/* ==========================================================================
   biteme.digital . insights.css (WP-E10)
   Motiv: Lesbarkeit vor Spektakel, Flaschenpost. Ruhigste reguläre Seite.
   Konventioneller Flow (kein ascent), Starttiefe -300 m. Keine Pins,
   moderate Reveals, dosierte Deko. Nur transform/opacity animiert.
   Initial-States für Reveals setzt die Engine via JS (nie CSS-Hide).
   ========================================================================== */

/* Lande-Zone: twilight (hellste reguläre Seite). Die Engine cross-fadet
   beim Scrollen auf die data-depth-zone der jeweiligen Sektion. */
body { --zone-bg: var(--zone-twilight); }

/* Lesbarkeit: Zeilenlängen begrenzen (Guide §6 Insights). */
.ins-hero__sub,
.ins-block__head .lead { max-width: 46ch; }

/* --------------------------------------------------------------------------
   HERO . ruhig, redaktionell, kein Foto
   -------------------------------------------------------------------------- */
.ins-hero {
  padding-block: clamp(4rem, 11vh, 7.5rem) clamp(2.5rem, 6vh, 4rem);
}
.ins-hero__inner { max-width: 52rem; }
.ins-hero__title {
  margin-top: 0.875rem;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
}
.ins-hero__sub { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   WHITEPAPER . Premium-Lead-Magnet, prominent
   -------------------------------------------------------------------------- */
.ins-paper { padding-block: clamp(2rem, 5vh, 3.5rem); }

.ins-paper__card {
  position: relative;
  border: 1px solid var(--caribbean-25);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--caribbean-08), transparent 60%),
    var(--bg-elevated);
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
}

.ins-paper__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 860px) {
  .ins-paper__grid { grid-template-columns: 280px 1fr; }
}

/* Cover-Visual des Whitepapers */
.ins-paper__cover { position: relative; }
.ins-paper__cover-inner {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--caribbean-25);
  background: linear-gradient(160deg, var(--bg-abyss), var(--bg-elevated-2) 55%, var(--bg-abyss));
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ins-paper__cover-mark {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 48px;
  height: 48px;
  opacity: 0.5;
}
.ins-paper__cover-title {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.ins-paper__cover-meta {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.ins-paper__cover-foot {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.8;
}

.ins-paper__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.ins-paper__lead { margin-top: 1.25rem; max-width: 54ch; }

.ins-paper__points {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.625rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
@media (min-width: 600px) {
  .ins-paper__points { grid-template-columns: 1fr 1fr; gap: 0.625rem 2rem; }
}
.ins-paper__points li {
  display: flex;
  gap: 0.5rem;
  max-width: 38ch;
}
.ins-paper__points li span { color: var(--accent-caribbean); flex: none; }

.ins-paper__who {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 56ch;
}
.ins-paper__who strong { color: var(--text-primary); font-weight: 600; }

.ins-paper__form {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 32rem;
}
.ins-paper__form .input { flex: 1 1 14rem; }
.ins-paper__form .btn-primary { flex: none; }
#paper-note { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   FILTER-PILLS . Inhaltstyp-Filter
   -------------------------------------------------------------------------- */
.ins-filterbar {
  position: sticky;
  top: 64px;
  z-index: 20;
  padding-block: 0.75rem;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.ins-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ins-filter__label {
  font-size: var(--fs-kicker);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.ins-filter .filter-pill { cursor: pointer; }

/* --------------------------------------------------------------------------
   REDAKTIONELLE BLÖCKE (Kolumne, Praxis, Presse)
   -------------------------------------------------------------------------- */
.ins-block { position: relative; padding-block: clamp(3rem, 7vh, 5rem); }

.ins-block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.ins-block__head h2 { margin-top: 0.625rem; }
.ins-block__head .lead { margin-top: 0.875rem; }
.ins-block__head--single { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }
.ins-block__all { flex: none; padding-bottom: 0.4rem; }

/* Kolumne hervorgehoben (WP-E10 Spezifik 2): akzentuierter Block */
.ins-block--feature {
  border-block: 1px solid var(--border-subtle);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--caribbean-08), transparent 55%);
}

.ins-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ins-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ins-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.ins-post {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.ins-post__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ins-post__meta time { font-size: 0.75rem; color: var(--text-muted); }
.ins-post h3 { line-height: 1.25; }
.ins-post p { font-size: 0.95rem; line-height: 1.55; max-width: none; }

/* Presse . schlicht, kein Hover-Karneval */
.ins-press__pending {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.ins-press .kicker { margin-bottom: 0.75rem; }
.ins-press__list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; color: var(--text-muted); }
.ins-press__list li { display: flex; gap: 0.5rem; }
.ins-press__list li span { color: var(--accent-caribbean); flex: none; }

/* Seekarten-Label (dosierte Deko, mono, sehr dezent) */
.seekarten-label {
  position: absolute;
  z-index: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.4;
  white-space: nowrap;
  pointer-events: none;
}
.seekarten-label--kolumne { right: clamp(8px, 3vw, 32px); top: 1.5rem; }
@media (max-width: 720px) { .seekarten-label { display: none; } }

/* --------------------------------------------------------------------------
   FLASCHENPOST . Newsletter, farblich abgesetzt, schaukelnde Flasche
   -------------------------------------------------------------------------- */
.ins-flaschenpost { padding-block: clamp(3rem, 7vh, 5rem) clamp(4rem, 10vh, 7rem); }

.ins-flaschenpost__card {
  position: relative;
  border: 1px solid var(--caribbean-25);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(74, 36, 120, 0.22), transparent 60%),
    linear-gradient(150deg, var(--bg-elevated-2), var(--bg-elevated) 60%, var(--bg-abyss));
  padding: clamp(2rem, 5vw, 3.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  overflow: hidden;
}
@media (min-width: 760px) {
  .ins-flaschenpost__card { grid-template-columns: 120px 1fr; align-items: center; gap: clamp(2rem, 5vw, 3.5rem); }
}

.ins-flaschenpost__deco {
  display: flex;
  justify-content: center;
}
.ins-bottle {
  width: clamp(64px, 9vw, 96px);
  height: auto;
  /* Aufhaengung am Korken oben: schaukelt um den oberen Mittelpunkt */
  transform-origin: 40px 10px;
  transform-box: view-box;
  animation: ins-bottle-rock 6.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
.ins-bottle__note { transform-box: fill-box; }

/* Sanftes Schaukeln: NUR transform (rotate), +/- 3 Grad, langsam.
   Bei reduced-motion legt der globale Reduced-Motion-Block (design-system,
   Abschnitt 14) die Animation still. */
@keyframes ins-bottle-rock {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

.ins-flaschenpost__body h2 { margin-top: 0.5rem; }
.ins-flaschenpost__body .lead { margin-top: 1rem; max-width: 52ch; }

.ins-flaschenpost__form {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 40rem;
}
@media (min-width: 560px) {
  .ins-flaschenpost__form { grid-template-columns: 1fr 1fr auto; }
}
.ins-flaschenpost__form .btn-primary { justify-content: center; }
.ins-flaschenpost__body .form-note { margin-top: 1rem; max-width: 56ch; }

/* --------------------------------------------------------------------------
   FILTER-ZUSTAND . ausgeblendete Gruppen (JS toggelt [hidden])
   -------------------------------------------------------------------------- */
[data-filter-group][hidden] { display: none; }

/* --------------------------------------------------------------------------
   REDUCED MOTION (ergänzend; Engine + design-system regeln den Rest)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ins-bottle { animation: none; transform: rotate(0deg); }
}

/* Flaschenpost "kommt bald" (Newsletter-Backend noch nicht live, 13.06.) */
.ins-flaschenpost__soon {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--text-muted);
}

/* Pressespiegel "kommt bald" (echte Kuratierung folgt, 13.06.) */
.ins-press__soon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--text-muted);
  margin: 0;
}