/* ════════════════════════════════════════════════════════════════════
   thesen19 — Aufsatz auf thesen17
   1) Seiten-Grund einen Tick heller (war #ECEEF1)
   2) „DEMNÄCHST" — ruhige Teaser (wie #13, ohne Zitat), linksbündig,
      zweispaltig: Inhalt links · hellblaue Letter-Einheit rechts.
      Headline in Flecha M Medium, größer & luftiger. Gelbe Linie + Hashtags.
   ════════════════════════════════════════════════════════════════════ */

/* Flecha M — Medium (aufrecht), neu; weight 500 / normal war frei */
@font-face{
  font-family:'Flecha M';
  src:url('../fonts/FlechaM-Medium.woff2') format('woff2'),
      url('../fonts/FlechaM-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}

/* 1) Hintergrund ein kleines Stück heller ───────────────────────────── */
.v6-fx-drift{--paper:#F1F3F6;}
body{background-color:#F1F3F6;}

/* ── Sektion „DEMNÄCHST" — linksbündig (gleiche Kante wie Header/Thesen) ── */
.v6-upstack{
  max-width:1320px; margin:0 auto; padding:0 40px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
.v6-up{width:100%; max-width:880px;}

/* Zweispaltig: Inhalt links · hellblaue Einheit rechts */
.v6-up-inner{
  background:var(--paper-pure); border:1px dashed rgba(0,0,254,.30);
  border-radius:5px; overflow:hidden;
  display:grid; grid-template-columns:1fr minmax(230px,290px); align-items:stretch;
}
.v6-up-main{padding:24px 30px; display:flex; flex-direction:column;}
.v6-up-head{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;}
.v6-up-num{
  font-family:var(--font-wide); font-weight:700; font-size:24px; line-height:1;
  color:var(--blue); letter-spacing:-.02em;
}
.v6-up-kw{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  border:1px solid var(--blue); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
/* Headline: Flecha M Medium, größer, mehr Abstand oben/unten */
/* .v6-fx-drift-Prefix: höhere Spezifität als der Reset .v6-fx-drift h3{margin:0} */
.v6-fx-drift .v6-up-title{
  font-family:var(--font-serif); font-weight:500;
  font-size:28px; line-height:1.1; letter-spacing:-.015em;
  color:var(--ink); margin:29px 0 10px; text-transform:none; text-wrap:balance;
}
.v6-up-line{
  display:block; width:60px; height:0; border:none; border-top:3px solid var(--yellow);
  border-radius:2px; margin:0;
}
.v6-up-tags{display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center;}
.v6-up .v6-ptag{font-size:10px; padding:3px 8px; opacity:.85;}

/* Rechte hellblaue Einheit (Nudge + CTA) */
.v6-up-nudge{
  background:rgba(0,0,254,.05); border-left:1px solid rgba(0,0,254,.12);
  padding:24px 26px; display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.v6-up-nudge-text{margin:0; font-family:var(--font-sans); font-size:13px; line-height:1.5; color:var(--graphite);}
.v6-up-cta{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--blue);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  border-bottom:2px solid var(--blue); padding-bottom:2px;
}
.v6-up-arr{display:inline-block; transition:transform var(--d-fast) var(--ease-out);}
.v6-up-cta:hover .v6-up-arr{transform:translate(3px,-3px);}

/* ── Index: kommende Zeilen sind jetzt klickbar (→ Letter) ───────────── */
.v6-row-up .v6-rowbtn-up{cursor:pointer; text-decoration:none;}
.v6-row-up:hover{background:rgba(0,0,254,.05);}
.v6-row-up:hover .v6-rowkw{background:var(--blue); color:#fff;}
.v6-rowkw{transition:background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1024px){ .v6-upstack{padding:0 28px;} .v6-up{max-width:none;} }
@media (max-width:680px){
  .v6-upstack{padding:0 20px; gap:14px;}
  .v6-up-inner{grid-template-columns:1fr;}
  .v6-up-main{padding:20px 20px;}
  .v6-fx-drift .v6-up-title{font-size:24px; margin:24px 0 10px;}
  .v6-up-nudge{border-left:none; border-top:1px solid rgba(0,0,254,.12); padding:18px 20px;}
}

/* ════════════════════════════════════════════════════════════════════
   Hero / Marquee / Thesen-Boxen — Feinschliff
   ════════════════════════════════════════════════════════════════════ */

/* Hero straffen: weniger große Abstände, Linie + Lead-Text höher */
.v6-hero{padding:54px 40px 38px;}            /* war 88 40 64 */
.v6-heroeyebrow{margin-bottom:16px;}         /* war 28 */
.v6-h1bottom{margin-top:10px;}               /* war 18 */
.v6-herofoot{margin-top:22px; padding-top:16px;}  /* war 40 / 20 → ein Stück hoch */

/* „·" (Divis) im hellen Marken-Gelb statt im tiefen Gelb */
.v6-h1slash{color:var(--yellow);}
/* „bald" in Schwarz statt verblasstem Blau */
.v6-h1bottomblue{color:var(--ink); opacity:1;}

/* Laufband ein Stück höher */
.v6-marqueewrap{margin-top:16px;}            /* war 32 */

/* Headline-Umbruch, wenn schmaler: KI·ARBEITS-/WELT bleibt groß
   (sonst schrumpft das eine lange Wort unter die zweite Headline) */
@media (max-width:860px){
  .v6-h1big{font-size:clamp(54px, 11vw, 90px); line-height:.96;}
  .v6-h1underline{display:none;}             /* Strich beim Umbruch ausblenden */
}

/* Thesennummern einen Tick kleiner */
.v6-pnum{font-size:46px;}

/* Thesen-Box zugeklappt: Bild höher, Button tiefer, weniger Weißraum unten */
.v6-poster .v6-pimg{width:72%; height:72%;}
.v6-fx-drift .v6-poster:not(.is-open) .v6-pfig{min-height:260px;}
.v6-fx-drift .v6-poster:not(.is-open) .v6-pinner{padding-bottom:20px;}

/* ════════════════════════════════════════════════════════════════════
   Mobile-Feinschliff (Responsive-Pass 2026-06-24) — lädt zuletzt, gewinnt
   bewusst gegen die duplizierten Panel-Blöcke in thesen15.css.
   ════════════════════════════════════════════════════════════════════ */

/* (1b) Header bei Scroll-down ausblenden, bei Scroll-up einfaden — nur Mobile.
   Schafft Viewport-Höhe neben der fixierten Profil-Schublade. JS togglet die Klasse. */
@media (max-width:768px){
  .site-header{transition:transform .32s cubic-bezier(.22,.61,.36,1);}
  .site-header.site-header--hidden{transform:translateY(-100%);}
}
/* Footer-Freiraum an die nun höhere Profil-Schublade (128px) anpassen, damit
   die unteren Footer-Links auf Mobile nicht verdeckt werden. */
@media (max-width:600px){
  .v15 .site-footer{padding-bottom:128px;}
}

/* (1a + Gestaltung) Profil-Schublade (≤1024): höher, damit der Titel
   „Dein persönliches AI-Culture-Profil" vollständig sichtbar ist. Tap-Leiste
   dezent getönt (nicht mehr rein weiß) + sanfter Glow als Klick-Einladung. */
@container v6 (max-width:1024px){
  .rb-panel:not(.is-open){max-height:108px;}        /* Tablet: Titel 1-zeilig */
  .rb-panelbar{background:rgba(0,0,254,.07);}
  .rb-panelbar-hint{color:var(--blue);}
  .rb-panelbar-arrow{color:var(--blue);}
  .rb-panel:not(.is-open){animation:rbDrawerGlow 3.2s ease-in-out infinite;}
}
@container v6 (max-width:600px){
  .rb-panel:not(.is-open){max-height:109px;}        /* Mobile: knapp Titel-hoch (−15%) */
  .rb-paneltitle{font-size:19px;}
}
@keyframes rbDrawerGlow{
  0%,100%{box-shadow:0 -10px 30px -12px rgba(10,10,10,.30);}
  50%{box-shadow:0 -10px 34px -10px rgba(0,0,254,.42);}
}

/* (Thesen-Boxen, nur Mobile ≤600) */
@container v6 (max-width:600px){
  /* Headline + Bild wieder luftig: row-gap zurück auf normal (4px war zu eng).
     row-gap steuert ALLE Reihenabstände — daher die Headline NICHT hierüber. */
  .v6-pinner{row-gap:14px;}
  /* Geschlossen: das (versteckte) Teaser-Element nimmt keine Grid-Zeile mehr ein
     → kein doppelter Leerraum mehr nach „These lesen". */
  .v6-fx-drift .v6-poster:not(.is-open) .v6-pbody{display:none;}
  .v6-fx-drift .v6-poster:not(.is-open) .v6-pinner{padding-bottom:10px;}

  /* NUR das italic-Zitat (FlechaM, direkt nach dem Bild) im OFFENEN Zustand
     enger an Bild und Text rücken — gezielt per Margin, ohne die Headline-
     Abstände zu verändern. -8px gegen den 14px row-gap → ~6px Restabstand. */
  .v6-pdetail-inner{padding-top:0;}
  .v6-fx-drift .v6-poster.is-open .v6-pmain{margin-top:-11px;}   /* VOR dem Zitat (Bild→Zitat) ~3px */
  .v6-fx-drift .v6-poster.is-open .v6-pbody{margin-top:-11px;}   /* NACH dem Zitat (Zitat→Text) ~3px */

  /* Thesennummer + Hashtags oben bündig */
  .v6-ptags{padding-top:0;}
  /* Zitat-Innenabstand (gelbe Linien ↔ Text) */
  .v6-pquote{gap:7px;}
  /* (3) Letter-Senden-Button volle Breite, zentriert */
  .v6-ctaformfoot{display:block;}
  .v6-ctabtn{width:100%; justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .rb-panel{animation:none !important;}
}