/* ════════════════════════════════════════════════════════════════════
   thesen4 — Reaction-Box & AI-Culture-Profil (V4)
   Ergänzt css/thesen2.css + css/thesen3.css. Nur auf thesen4.html geladen.
   Bringt: (1) 2-Spalten-Layout der Variante-A-Galerie (Feed + sticky Profil),
   (2) Reaction-Box am Fuß jeder Thesen-Karte, (3) AI-Culture-Profil-Panel.
   High-Fidelity nach Reaction-Box-Briefing (README §4) + Design-Brief.
   Alle Tokens kommen aus dem .v6-fx-drift-Scope (thesen2.css); fehlende
   ergänzt der lokale Token-Block unten. Blau = „dein Signal", Grau =
   Kontext, Gelb = Highlight, Grün = live.
   ════════════════════════════════════════════════════════════════════ */

/* ── Ergänzende Tokens (Rest steht in thesen2.css) ───────────────────── */
.v6-fx-drift{
  --silver:#9799A0;
  --blue-deep:#0000B5;
  --rb-hair:rgba(10,10,10,.18);
}

/* ════════════════════════════════════════════════════════════════════
   1 · 2-Spalten-Layout: Feed (links) + sticky Profil-Panel (rechts)
   ════════════════════════════════════════════════════════════════════ */
.rb-feedwrap{
  max-width:1320px; margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:minmax(0,1fr) 327px;   /* Panel 12% schmaler (372→327) */
  gap:32px; align-items:start;
}
/* gstack gibt seine eigene Breite/Padding im 2-Spalter ab */
.rb-feedwrap .v6-gstack{max-width:none; margin:0; padding:0;}
.rb-feedwrap .v6-pinner{max-width:none;}

/* top = fixe Header-Höhe (80px) + 20px Luft */
.rb-panelwrap{position:sticky; top:100px;}

/* Aufklapp-Hoehe des Textbereichs grosszuegig (schmalere Feed-Spalte → mehr
   Textzeilen als in thesen3). */
.v6-fx-drift .v6-poster.is-open .v6-pdetail{max-height:2400px;}

/* ════════════════════════════════════════════════════════════════════
   2 · Reaction-Box (in der Thesen-Karte, am Fuß, volle Breite)
   ════════════════════════════════════════════════════════════════════ */
/* Volle Breite, eigene Zeile unter der Bildflaeche. Erst beim Aufklappen
   der These sichtbar (eigenes Collapse, gekoppelt an .is-open). box-sizing
   border-box → max-height:0 verbirgt auch die Rahmen, kein Sliver. */
.rb-box{
  grid-column:1 / -1;
  display:flex; align-items:stretch;
  border:1px solid var(--rb-hair); border-width:0; background:var(--paper-pure);
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height var(--d-slow) var(--ease-out),
             opacity var(--d-base) var(--ease-out),
             margin-top var(--d-slow) var(--ease-out);
}
.v6-poster.is-open .rb-box{max-height:1400px; opacity:1; margin-top:20px; border-width:1px;}

/* Schiene links (48px) */
.rb-rail{
  flex:0 0 48px; width:48px; background:var(--bone);
  border-right:1px solid rgba(10,10,10,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
}
.rb-railcat{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue); white-space:nowrap;
}
.rb-raildot{
  width:6px; height:6px; border-radius:50%; background:var(--blue);
  flex-shrink:0; animation:rbLive 2s ease-in-out infinite;
}

/* Body rechts */
.rb-body{flex:1 1 auto; min-width:0; padding:16px 20px 18px;}

/* Eyebrow */
.rb-eyebrow{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.rb-eyedot{width:6px; height:6px; border-radius:50%; background:var(--yellow);}
.rb-eyelabel{
  font-family:var(--font-wide); font-weight:700; font-size:11px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--blue);
}

/* Frage */
.rb-frage{
  position:relative; font-family:var(--font-display); font-weight:400;
  font-size:22px; line-height:1.12; color:var(--ink); margin:0 0 14px;
  text-wrap:balance; display:inline-block;
}
.rb-qmark{
  position:absolute; left:0; bottom:-9px; width:min(280px,80%); height:12px;
  opacity:0; transform:translateY(3px); pointer-events:none;
  transition:opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.rb-box:hover .rb-qmark{opacity:1; transform:translateY(0);}

/* Optionen (Pills) */
.rb-pills{display:flex; flex-wrap:wrap; gap:8px;}
.rb-pill{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:var(--paper-pure); color:var(--ink);
  border:1px solid rgba(10,10,10,.24); border-radius:999px;
  padding:9px 16px; font-family:var(--font-sans); font-size:14px; font-weight:500;
  line-height:1.2; text-align:left;
  transition:color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out),
             background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
  opacity:0; transform:translateY(10px); animation:rbCRise .42s var(--ease-out) forwards;
}
.rb-pill:hover{
  color:var(--blue); border-color:var(--blue); background:var(--blue-wash);
  transform:translateY(-2px);
}

.rb-hint{margin-top:12px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--silver);}

/* ── Zustand B (beantwortet) ── */
.rb-resultlabel{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--silver); margin-bottom:12px;
}
.rb-stack{
  display:flex; height:10px; border-radius:999px; overflow:hidden;
  background:rgba(10,10,10,.06); margin-bottom:14px;
}
.rb-seg{
  height:100%; border-right:2px solid var(--paper-pure);
  transition:width 720ms var(--ease-out);
}
.rb-seg:last-child{border-right:0;}
.rb-seg--own{background:var(--blue);}
.rb-seg--a{background:rgba(10,10,10,.32);}
.rb-seg--b{background:rgba(10,10,10,.15);}

.rb-legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.rb-legrow{display:flex; align-items:center; gap:9px;}
.rb-legdot{width:9px; height:9px; flex-shrink:0;}
.rb-legdot--own{background:var(--blue);}
.rb-legdot--a{background:rgba(10,10,10,.32);}
.rb-legdot--b{background:rgba(10,10,10,.15);}
.rb-leglabel{font-family:var(--font-sans); font-size:13.5px; color:var(--graphite); font-weight:400;}
.rb-legrow--own .rb-leglabel{color:var(--ink); font-weight:600;}
.rb-legbadge{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--blue); border-radius:999px; padding:1px 6px;
}
.rb-legpct{margin-left:auto; font-family:var(--font-wide); font-weight:400; font-size:13.5px; color:var(--silver);}
.rb-legrow--own .rb-legpct{color:var(--blue); font-weight:700;}

.rb-undo{
  appearance:none; background:none; border:0; cursor:pointer;
  margin-top:12px; padding:0; font-family:var(--font-mono); font-size:11px;
  text-decoration:underline; color:var(--graphite);
  transition:color var(--d-fast) var(--ease-out);
}
.rb-undo:hover{color:var(--blue);}

/* ════════════════════════════════════════════════════════════════════
   3 · AI-Culture-Profil-Panel (sticky Sidebar)
   ════════════════════════════════════════════════════════════════════ */
.rb-panel{
  display:flex; flex-direction:column; overflow:hidden;   /* runde Ecken clippen die blaue Titel-Section */
  width:100%; background:var(--paper-pure);
  border:1px solid rgba(10,10,10,.16); border-radius:4px;
  box-shadow:0 18px 44px -20px rgba(0,0,254,.22), 0 4px 16px -8px rgba(10,10,10,.14);
}

/* Mobile-Griff (nur unter Breakpoint sichtbar) */
.rb-panelbar{display:none;}

/* Titel-Section blau hinterlegt */
.rb-head{padding:18px 18px 16px; background:var(--blue);}
.rb-paneleyebrow{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.72); display:block; margin-bottom:8px;
}
.rb-paneltitle{
  font-family:var(--font-wide); font-weight:700; font-size:22px; line-height:.98;
  text-transform:uppercase; color:var(--paper-pure); margin:0;
}

.rb-meta{
  padding:0 18px 14px; border-bottom:1px solid rgba(10,10,10,.12);
  font-family:var(--font-mono); font-size:10.5px; color:var(--silver); letter-spacing:.02em;
  text-align:center;
}
.rb-meta b{color:var(--blue); font-weight:700;}

/* Hero — der Typ */
.rb-resultwrap{padding:16px 18px;}
.rb-card{
  position:relative; overflow:hidden; padding:15px 16px 16px; border-radius:4px;
  border:1.5px solid rgba(10,10,10,.2); background:var(--paper-pure);
  transition:border-color var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out),
             background var(--d-slow) var(--ease-out);
}
.rb-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue);
}
.rb-card--ready{
  border:1.5px solid var(--ink);
  background:linear-gradient(180deg, rgba(239,247,70,.16), rgba(239,247,70,0) 78%);
  box-shadow:6px 6px 0 -1px var(--blue-wash);
}
.rb-cardtag{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--graphite); margin-bottom:10px;
}
.rb-cardtag .rb-arrow{color:var(--blue); font-weight:700;}
.rb-cardadj{color:var(--silver);}

/* Typ-Kopfzeile: Label links, Gender-Selektor rechts (umbricht bei Enge) */
.rb-typhead{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px 12px; flex-wrap:wrap; margin-bottom:18px;   /* mehr Luft über dem Typ-Namen */
}
.rb-typhead .rb-cardtag{margin-bottom:0;}
.rb-genus{
  display:inline-flex; flex:0 0 auto;
  border:1px solid rgba(10,10,10,.2); border-radius:999px; overflow:hidden;
  background:var(--paper-pure);
}
.rb-genus-opt{
  appearance:none; cursor:pointer; border:0; background:transparent;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--silver); padding:3px 9px; line-height:1.4;
  border-right:1px solid rgba(10,10,10,.12);
  transition:background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.rb-genus-opt:last-child{border-right:0;}
.rb-genus-opt:hover{color:var(--ink);}
.rb-genus-opt.is-active,
.rb-genus-opt.is-active:hover{background:var(--blue); color:var(--paper-pure);}

/* .rb-card-Prefix: höhere Spezifität als der Reset .v6-fx-drift h3{margin:0} */
.rb-card .rb-typname{
  position:relative; display:inline-block;
  font-family:var(--font-display); font-weight:500; font-style:italic; font-size:32px; line-height:1.04;
  letter-spacing:-.025em; color:var(--ink); margin:0 0 22px; text-wrap:balance;
  text-transform:none;        /* globales h3 ist uppercase — Typ-Name ist FlechaM Medium-Kursiv */
}
.rb-typmark{position:absolute; left:0; bottom:-7px; width:84%; height:11px; pointer-events:none;}
.rb-typdesc{font-family:var(--font-sans); font-size:14px; line-height:1.5; color:var(--ink); margin:0;}
.rb-typbridge{font-family:var(--font-sans); font-size:14px; font-weight:500; font-style:italic; color:var(--graphite);}

/* ════════════ V7 · Typ-Karte — 5 gestalterische Ansätze ════════════ */
/* ════════════ Synthese-Karte = Gelbe Plakette (finale Fassung) ════════════ */
.rb-card--ready{
  border:1.5px solid var(--ink);
  background:#EFF746;          /* Marken-Gelb, literal (keine Var-Verkettung) */
  box-shadow:4px 4px 0 -1px var(--ink);
}
.rb-card--ready::before{display:none;}
.rb-card--ready .rb-typname{
  font-family:var(--font-wide); font-weight:700; font-style:normal; text-transform:uppercase;
  font-size:21px; letter-spacing:-.01em; line-height:1.08; color:var(--ink); margin:0 0 13px;
}
.rb-card--ready .rb-typdesc{font-family:var(--font-sans); font-size:14px; line-height:1.55; color:var(--ink); margin:0;}
/* Brücke folgt der Du-Zeile inline — kräftigerer Schnitt (600) + fetter Pfeil */
.rb-bridgein{font-weight:600; color:var(--ink);}
.rb-barr{color:var(--blue); font-weight:900; font-size:1.08em; padding-right:1px;}
/* Vor Synthese (verhüllt) */
.rb-progress{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px;}
.rb-pdot{width:9px; height:9px; border-radius:50%; background:rgba(10,10,10,.13);}
.rb-pdot--on{background:var(--blue); animation:rbDotPulse 2.4s ease-in-out infinite;}
.rb-veil{font-family:var(--font-sans); font-size:13px; font-style:italic; line-height:1.45; color:var(--graphite); margin:0;}

/* Hinweis unter der gelben Typ-Plakette: dezente kleine Box, erscheint ab
   Synthese (3 Reaktionen) — macht klar, dass mehr Antworten das Profil schärfen. */
.rb-maxnote{
  margin:0 18px 16px; padding:9px 12px;
  font-family:var(--font-sans); font-size:12px; line-height:1.4; color:var(--graphite);
  background:rgba(0,0,254,.045); border:1px solid rgba(0,0,254,.12); border-radius:6px;
}
.rb-maxnote:not([hidden]){display:flex; gap:8px; align-items:flex-start;}
.rb-maxnote-icon{flex-shrink:0; margin-top:1px;}

/* Achsen-Block */
.rb-axes{padding:12px 18px 16px;}
.rb-axestitle{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--silver); display:block; margin-bottom:12px;
}
/* minmax(0,1fr): Spalten dürfen unter die (nowrap-)Label-Breite schrumpfen,
   sonst sprengen die langen Pol-Labels das Panel über den Rand. */
.rb-axesgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; row-gap:9px;}
.rb-axis{display:flex; flex-direction:column; gap:5px;}
/* Beide Pole je Achse — Dimension ablesbar. Lange Labels (risk/fokus)
   faden den hinteren Wortteil aus statt umzubrechen. */
.rb-poles{display:flex; justify-content:space-between; gap:8px;}
.rb-pole{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.02em; color:var(--silver);
  white-space:nowrap; transition:color var(--d-base) var(--ease-out);
}
.rb-pole.is-on{color:var(--ink);}
/* Fade beginnt ~2–3 Buchstaben früher (46%) und ist am Box-Rand ganz weg,
   damit auch die rechts sitzenden Labels sichtbar ins Off laufen. */
.rb-pole--fade{
  max-width:calc(50% - 2px); overflow:hidden;
  /* Fade ~2 Buchstaben früher (schmaleres Panel) — solid-Stop 46→34%, Ende 96→86% */
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 34%,transparent 86%);
          mask-image:linear-gradient(to right,#000 0,#000 34%,transparent 86%);
}
.rb-track{
  position:relative; height:7px; border-radius:999px; background:rgba(0,0,254,.08);
}
.rb-tick{position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(10,10,10,.2);}
.rb-node{
  position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  background:var(--silver); transform:translate(-50%,-50%); left:50%;
  transition:left 620ms var(--ease-snap), background var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.rb-axis--active .rb-node{background:var(--blue); box-shadow:0 0 9px 1px rgba(0,0,254,.45);}
.rb-node--pulse{animation:rbNodeGlow 1s ease-in-out 2;}

/* CTA */
.rb-cta{
  appearance:none; cursor:pointer; text-decoration:none; white-space:nowrap;
  margin:2px 18px 18px; padding:11px 15px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:transparent; border:1px solid rgba(10,10,10,.32);
  font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--ink);
  transition:background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.rb-cta .rb-arrow{color:var(--blue); transition:color var(--d-fast) var(--ease-out);}
.rb-cta:hover{background:var(--blue); border-color:var(--blue); color:var(--paper); transform:translateY(-1px);}
.rb-cta:hover .rb-arrow{color:var(--paper);}

/* ════════════════════════════════════════════════════════════════════
   4 · Keyframes
   ════════════════════════════════════════════════════════════════════ */
@keyframes rbCRise{to{opacity:1; transform:translateY(0);}}
}
@keyframes rbLive{0%,100%{transform:scale(1); opacity:1;}50%{transform:scale(1.35); opacity:.55;}}
@keyframes rbDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,254,0);}50%{box-shadow:0 0 6px 1px rgba(0,0,254,.5);}}
@keyframes rbNodeGlow{0%{box-shadow:0 0 9px 1px rgba(0,0,254,.45);}50%{box-shadow:0 0 18px 4px rgba(0,0,254,.7);}100%{box-shadow:0 0 9px 1px rgba(0,0,254,.45);}}

/* ════════════════════════════════════════════════════════════════════
   5 · Responsive
   ════════════════════════════════════════════════════════════════════ */
/* Tablet & schmaler: Profil unter den Feed, nicht mehr sticky-Spalte */
@container v6 (max-width:1024px){
  .rb-feedwrap{grid-template-columns:1fr; gap:28px; padding:0 28px;}
  .rb-panelwrap{position:static;}
  .rb-panel{max-width:520px; margin:0 auto;}
}

/* Mobile: Box-Optionen gestapelt; Profil als einklappbares Sticky-Band unten */
@container v6 (max-width:600px){
  .rb-feedwrap{padding:0 20px;}
  .rb-pills{flex-direction:column;}
  .rb-pill{width:100%;}
  /* Titel weiter nach oben (Top-Padding 15->12); Meta-Zeile auf Mobile raus. */
  .rb-head{padding:12px 18px 13px;}
  .rb-meta{display:none;}
  /* Selektor rueckt unter das Label, groessere Touch-Targets */
  .rb-typhead{justify-content:flex-start;}
  .rb-genus-opt{padding:6px 13px; font-size:10px;}
  .rb-vopt{padding:7px 14px; font-size:12px;}

  /* Sticky-Band am unteren Rand */
  .rb-panelwrap{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40;
    padding:0; margin:0;
  }
  .rb-panel{
    max-width:none; margin:0; border-radius:12px 12px 0 0;
    border-bottom:0; max-height:80px; overflow:hidden;   /* collapsed: mehr Blau permanent sichtbar */
    box-shadow:0 -10px 30px -12px rgba(10,10,10,.3);
    transition:max-height var(--d-slow) var(--ease-out);
  }
  .rb-panel.is-open{max-height:82vh; overflow-y:auto;}
  /* Handle + blauer Kopf behalten ihre Hoehe (kein Flex-Schrumpfen) → Blau-Streifen planbar */
  .rb-head{flex-shrink:0;}
  .rb-panelbar{
    display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0;
    padding:0 18px; border:0; background:transparent; width:100%; text-align:left;
  }
  .rb-panelbar-dot{width:7px; height:7px; border-radius:50%; background:var(--blue); animation:rbLive 2s ease-in-out infinite;}
  .rb-panelbar-label{font-family:var(--font-wide); font-weight:700; font-size:12.5px; text-transform:none; letter-spacing:.01em; color:var(--ink);}
  .rb-panelbar-hint{margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver);}
  .rb-panel.is-open .rb-panelbar-arrow{transform:rotate(180deg);}
  .rb-panelbar-arrow{transition:transform var(--d-base) var(--ease-out); color:var(--graphite);}

  /* Platz, damit das Band nichts verdeckt */
  .v6-gallery{padding-bottom:88px;}
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  .rb-pill{opacity:1 !important; transform:none !important; animation:none !important;}
  .rb-raildot,.rb-pdot--on,.rb-node--pulse,.rb-panelbar-dot{animation:none !important;}
  .rb-qmark{transition:none !important;}
  .rb-seg,.rb-node{transition:none !important;}
  .rb-genus-opt{transition:none !important;}   /* harter Genus-Wechsel */
  .rb-vopt{transition:none !important;}
}

/* ════════════════════════════════════════════════════════════════════
   V12 · Basis-Fixes (über V11) — gilt für thesen12.html + alle Varianten
   (1) Zuklappen-Steuerung ans Karten-Ende + dezenter
   (2) Mobile-Reihenfolge der Thesen-Karte korrigiert
   ════════════════════════════════════════════════════════════════════ */

/* (1) Großer Toggle = Öffnen-CTA (bleibt prominent). Im offenen Zustand
   ausgeblendet; stattdessen eine dezente Zuklappen-Leiste GANZ am Ende
   der Karte (unter der Reaktions-Box). */
.v6-collapsebar{display:none;}
.v6-fx-drift .v6-poster.is-open .v6-toggle{display:none;}
.v6-fx-drift .v6-poster.is-open .v6-collapsebar{
  grid-column:1 / -1; order:5;
  display:flex; align-items:center; gap:14px;
  width:100%; margin-top:26px; padding:4px 2px;
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
}
.v6-collapsebar-line{flex:1 1 auto; height:1px; background:rgba(10,10,10,.14);
  transition:background var(--d-base) var(--ease-out);}
.v6-collapsebar-label{
  flex:0 0 auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--graphite);
  transition:color var(--d-fast) var(--ease-out);
}
.v6-collapsebar-arrow{
  flex:0 0 auto; font-size:13px; line-height:1; color:var(--graphite);
  transition:color var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-snap);
}
.v6-collapsebar:hover .v6-collapsebar-label,
.v6-collapsebar:hover .v6-collapsebar-arrow{color:var(--blue);}
.v6-collapsebar:hover .v6-collapsebar-arrow{transform:translateY(-3px);}
.v6-collapsebar:hover .v6-collapsebar-line{background:rgba(0,0,254,.22);}

/* (2) Mobile-Reihenfolge: Kopf → Titel → Bild → Text+Öffnen →
   Reaktions-Box → Zuklappen. (Die rb-box hatte kein order und sprang
   sonst zwischen Titel und Bild.) */
@container v6 (max-width:600px){
  .v6-fx-drift .v6-pinner .v6-pfig{order:2;}
  .v6-fx-drift .v6-pinner .v6-pmain{order:3;}
  .v6-fx-drift .rb-box{order:4;}
}

/* ════════════════════════════════════════════════════════════════════
   V12 · Profil zurücksetzen — dezenter Link im Panel + Bestätigungs-Modal
   Markup/Verhalten: thesen12-reset.js. Modal hängt am <body> (außerhalb
   des .v6-fx-drift-Containers, da container-type sonst position:fixed
   einfängt) → Tokens hier neu gemappt.
   ════════════════════════════════════════════════════════════════════ */

/* Dezenter Reset-Link, unten im Profil-Panel (nach dem CTA) */
.rb-reset{
  appearance:none; background:none; border:0; cursor:pointer;
  align-self:center; margin:0 18px 18px; padding:2px 4px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver); transition:color var(--d-fast) var(--ease-out);
}
.rb-reset:hover{color:var(--blue);}
.rb-reset-icon{font-size:13px; line-height:1; transition:transform var(--d-base) var(--ease-snap);}
.rb-reset:hover .rb-reset-icon{transform:rotate(-150deg);}

/* Body-Scroll-Sperre, solange das Modal offen ist */
body.v12-modal-lock{overflow:hidden;}

/* Modal-Grundgerüst (Tokens neu gemappt, da außerhalb von .v6-fx-drift) */
.v12-modal{
  --ink:var(--color-near-black); --paper-pure:var(--color-white); --graphite:#46484B;
  --silver:#9799A0; --blue:var(--color-blue); --blue-wash:var(--color-light-blue);
  --yellow:var(--color-yellow);
  --font-display:var(--font-serif); --font-mono:"Söhne Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-snap:cubic-bezier(.2,.9,.2,1);
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.v12-modal[hidden]{display:none;}
.v12-modal__scrim{
  position:absolute; inset:0; background:rgba(10,10,10,.55);
  opacity:0; transition:opacity .24s var(--ease-out);
}
.v12-modal.is-open .v12-modal__scrim{opacity:1;}
.v12-modal__dialog{
  position:relative; width:min(440px,100%); box-sizing:border-box;
  background:var(--paper-pure); border:1px solid var(--ink);
  box-shadow:10px 10px 0 -1px var(--blue-wash), 0 30px 60px -24px rgba(10,10,10,.5);
  padding:30px 30px 26px;
  opacity:0; transform:translateY(12px);
  transition:opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.v12-modal.is-open .v12-modal__dialog{opacity:1; transform:none;}
.v12-modal__eyebrow{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue); margin-bottom:12px;
}
.v12-modal__title{
  font-family:var(--font-display); font-weight:500; font-style:italic; font-size:30px;
  line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; text-transform:none;
}
.v12-modal__text{
  font-family:var(--font-sans); font-size:15px; line-height:1.6; color:var(--graphite); margin:0 0 24px;
}
.v12-modal__actions{display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap;}
.v12-modal__btn{
  appearance:none; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:14px;
  padding:11px 20px; border:1px solid var(--ink); background:var(--paper-pure); color:var(--ink);
  transition:background var(--d-fast,.12s) var(--ease-out), color var(--d-fast,.12s) var(--ease-out),
             transform var(--d-fast,.12s) var(--ease-out), border-color var(--d-fast,.12s) var(--ease-out);
}
.v12-modal__btn:hover{transform:translateY(-1px);}
.v12-modal__btn--ghost{background:transparent; border-color:rgba(10,10,10,.3); color:var(--graphite);}
.v12-modal__btn--ghost:hover{border-color:var(--ink); color:var(--ink);}
.v12-modal__btn--danger{background:var(--ink); border-color:var(--ink); color:var(--paper-pure);}
.v12-modal__btn--danger:hover{background:var(--blue); border-color:var(--blue);}

@media (prefers-reduced-motion:reduce){
  .v12-modal__scrim,.v12-modal__dialog{transition:none !important;}
  .rb-reset-icon{transition:none !important;}
}
/* ════════════════════════════════════════════════════════════════════
   V12-c · „VERBINDEND" — ein Leitmotiv statt vieler Einzeleffekte
   Lädt nach thesen12.css. Beim Antworten fließt ein Impuls von der
   Reaktions-Box zum Profil-Panel; das Panel „empfängt" sichtbar.
   Macht das Versprechen „rechts wächst dein Profil mit" wörtlich.
   ════════════════════════════════════════════════════════════════════ */

/* ── B · Scroll-Reveal (dezent, wie V12-a) ──────────────────────── */
.js-fx .v6-poster,
.js-fx .v6-ghead,
.js-fx .v6-cta,
.js-fx .v6-marqueewrap{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:opacity, transform;
}
.js-fx .is-revealed{opacity:1; transform:none;}

/* ── Signatur · Impuls-Fluss Box → Panel ────────────────────────────
   Der fliegende Punkt wird per JS erzeugt & via WAAPI entlang der
   Verbindung animiert. Hier nur sein Aussehen. */
.v12c-flow{
  position:fixed; z-index:60; width:12px; height:12px; border-radius:50%;
  background:var(--blue); pointer-events:none;
  box-shadow:0 0 12px 3px rgba(0,0,254,.55);
}
.v12c-flow::after{content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid rgba(0,0,254,.35);}

/* Panel „empfängt": weicher Glow-Puls über die ganze Animation.
   KEIN Positions-Versatz (kein Springen), und Start/Ende haben dieselbe
   Schatten-Struktur wie der Ruhezustand → blendet sauber aus statt hart.
   will-change:transform reserviert den Layer fürs Scroll-Mitlaufen (JS). */
.rb-panel{will-change:transform;}
.rb-panel.v12-receive{animation:v12cReceive 1s var(--ease-out);}
@keyframes v12cReceive{
  0%  {box-shadow:0 0 0 0 rgba(0,0,254,0),    0 18px 44px -20px rgba(0,0,254,.22), 0 4px 16px -8px rgba(10,10,10,.14);}
  28% {box-shadow:0 0 0 2px rgba(0,0,254,.85), 0 26px 60px -22px rgba(0,0,254,.55), 0 4px 16px -8px rgba(10,10,10,.14);}
  100%{box-shadow:0 0 0 0 rgba(0,0,254,0),    0 18px 44px -20px rgba(0,0,254,.22), 0 4px 16px -8px rgba(10,10,10,.14);}
}
/* Mobil (Panel = Sticky-Band unten): Glow am oberen Rand, ebenfalls als Puls */
@keyframes v12cReceiveM{
  0%  {box-shadow:0 0 0 0 rgba(0,0,254,0),  0 -10px 30px -12px rgba(10,10,10,.3);}
  28% {box-shadow:0 -3px 0 0 var(--blue),   0 -14px 36px -10px rgba(0,0,254,.5);}
  100%{box-shadow:0 0 0 0 rgba(0,0,254,0),  0 -10px 30px -12px rgba(10,10,10,.3);}
}
@container v6 (max-width:600px){
  .rb-panel{will-change:auto;}
  .rb-panel.v12-receive{animation-name:v12cReceiveM;}
}

/* Der betroffene Achsen-Node bekommt beim Empfang einen kräftigeren Glow */
.rb-node{transition:left 620ms cubic-bezier(.34,1.3,.5,1),
  background var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);}
.rb-node--pulse{animation:v12cNodeGlow 1.1s ease-in-out 2;}
@keyframes v12cNodeGlow{
  0%,100%{box-shadow:0 0 9px 1px rgba(0,0,254,.45);}
  50%{box-shadow:0 0 20px 5px rgba(0,0,254,.8);}
}

/* Typ-Plakette: weicher Cross-Fade (kein Hard-Swap) */
.rb-card.v12-fade{animation:v12cFade .5s var(--ease-out);}
@keyframes v12cFade{0%{opacity:0; transform:translateY(6px);}100%{opacity:1; transform:none;}}

/* Modal-Akzent „verbindend": RAHMENLOS & großzügig — der Inhalt steht
   direkt auf der dunklen Fläche (keine Dialog-Box), dunklerer Scrim,
   großer Titel mit handgezeichnetem Unterstrich, gelber Confirm-Button. */
.v15 .v12-modal{padding:clamp(24px,8vw,96px);}
.v15 .v12-modal__scrim{background:rgba(2,2,12,.95);}
.v15 .v12-modal__dialog{
  background:transparent; border:0; box-shadow:none; padding:0;
  width:min(720px,100%); text-align:left; transform:translateY(24px);
}
.v15 .v12-modal__eyebrow{color:var(--yellow); margin-bottom:22px; letter-spacing:.24em;}
.v15 .v12-modal__title{
  position:relative; display:inline-block; color:var(--paper-pure);
  font-size:clamp(40px,7vw,66px); line-height:1.0; margin:0 0 28px;
}
.v15 .v12-modal__title::after{
  content:""; position:absolute; left:0; bottom:-12px; height:6px; width:0;
  background:var(--yellow); border-radius:3px;
  transition:width .6s var(--ease-out) .16s;
}
.v15 .v12-modal.is-open .v12-modal__title::after{width:44%;}
.v15 .v12-modal__text{
  color:rgba(255,255,255,.72); font-size:clamp(16px,2.2vw,19px); line-height:1.6;
  max-width:48ch; margin:0 0 40px;
}
.v15 .v12-modal__actions{justify-content:flex-start; gap:16px;}
.v15 .v12-modal__btn{font-size:15px; padding:14px 28px;}
.v15 .v12-modal__btn--ghost{
  background:transparent; border-color:rgba(255,255,255,.32); color:rgba(255,255,255,.78);
}
.v15 .v12-modal__btn--ghost:hover{border-color:#fff; color:#fff;}
.v15 .v12-modal__btn--danger{background:var(--yellow); border-color:var(--yellow); color:var(--ink);}
.v15 .v12-modal__btn--danger:hover{background:#fff; border-color:#fff; color:var(--ink);}

@media (prefers-reduced-motion:reduce){
  .js-fx .v6-poster,.js-fx .v6-ghead,.js-fx .v6-cta,.js-fx .v6-marqueewrap{
    opacity:1 !important; transform:none !important; transition:none !important;}
  .v12c-flow{display:none !important;}
  .rb-panel,.rb-node,.rb-card{animation:none !important; transition:none !important;}
  .v15 .v12-modal__title::after{transition:none !important; width:44% !important;}
  .rb-panel{will-change:auto !important;}
}

/* ════════════════════════════════════════════════════════════════════
   V13 · Bugfix-Runde (überschreibt Basis + C-Effekte)
   ════════════════════════════════════════════════════════════════════ */

/* Das fixe Profil-Bottom-Sheet (≤1024px, ~84px hoch) würde sonst das
   Seitenende überdecken — Footer page-scoped (.v15) genug Bodenabstand geben.
   Media-Query, weil der Footer außerhalb des @container-Scopes liegt. */
@media (max-width:1024px){
  .v15 .site-footer{padding-bottom:calc(var(--spacing-md) + 88px);}
}

/* Marker-SVGs (.v6-pscribble) sind in thesen3.css absichtlich 130% groß
   (top/left:-15%) und überragen die Bildfläche. Auf Mobile = Bild volle
   Breite → Marker ragte über den Viewport (horizontaler Scroll). Clip auf
   dem Karten-Stapel verhindert das, ohne sichtbares Beschneiden (Striche
   liegen zentral). NICHT auf .v6-fx-drift, sonst verliert das sticky Profil-
   Panel seinen Scroll-Kontext. */
.v6-gstack{overflow-x:clip;}

/* (1) Overlay weniger dunkel */
.v15 .v12-modal__scrim{background:rgba(10,12,24,.82);}

/* (2) Meta-Zeile vertikal mittig (vorher 0 Top-Padding → klebte am Kopf) */
.rb-meta{padding:12px 18px; line-height:1.25;}

/* Frage ↔ Antwort-Optionen: Abstand. WICHTIG — höhere Spezifität als der
   Scope-Reset `.v6-fx-drift p{margin:0}`, sonst greift margin-bottom nicht. */
.v6-fx-drift .rb-frage{margin:0 0 28px;}

/* CTA-Headline „ZEHN TAGE. EINE THESE." −30% (132 → 92px) — nur Desktop */
@container v6 (min-width:1025px){
  .v6-ctah{font-size:92px;}
}

/* Galerie-Köpfe (beide) auf 62px angeglichen — nur Desktop; Tablet/Mobile
   nutzen weiter die responsiven .v6-gh-Größen (für beide identisch). */
@container v6 (min-width:1025px){
  .v6-fx-drift .v6-gh{font-size:62px;}
}

/* Galerie-A-Lead rechtsbündig */
.v6-gallery:not(.v6-gallery--swap) .v6-glead{text-align:right; margin-left:auto;}

/* „Ausführliches Profil ansehen" — Dauer-Glow (Loop) + flächiger Licht-Sweep,
   der periodisch über die Button-Fläche zieht. Glow bleibt wie gehabt. */
.rb-cta{
  background:linear-gradient(100deg,
      transparent 34%, rgba(0,0,254,.04) 44%, rgba(0,0,254,.26) 50%,
      rgba(0,0,254,.04) 56%, transparent 66%) 0% 0 / 240% 100% no-repeat;
  animation:rbCtaGlow 3.6s ease-in-out infinite, rbCtaSweep 4.6s var(--ease-out) infinite;
}
@keyframes rbCtaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,0,254,0);}
  50%{box-shadow:0 0 16px 1px rgba(0,0,254,.26);}
}
/* Band startet/ruht rechts außerhalb (unsichtbar), zieht nach links, dann Pause */
@keyframes rbCtaSweep{
  0%{background-position:0% 0;}
  52%{background-position:100% 0;}
  100%{background-position:100% 0;}
}
/* Inaktiv bis ein Profil-Status vorliegt (≥3 Reaktionen): ausgegraut, kein Glow, nicht klickbar */
.rb-cta--off{
  opacity:.5; pointer-events:none; cursor:default;
  border-color:rgba(10,10,10,.18); color:var(--silver);
  animation:none !important; box-shadow:none !important;
}
.rb-cta--off .rb-arrow{color:var(--silver);}
@media (prefers-reduced-motion:reduce){
  .rb-cta{animation:none !important;}
}
.rb-qmark{bottom:-3px; height:9px;}
.rb-pills{margin-top:0;}

/* (5) Zuklappen-Leiste: weniger Abstand */
.v6-fx-drift .v6-poster.is-open .v6-collapsebar{margin-top:10px;}

/* (8) Thesen-Boxen etwas niedriger — Weißraum bleibt */
.v6-pfig{min-height:160px;}
.v6-pinner{row-gap:16px;}
.v6-pdetail-inner{padding-top:24px; gap:20px;}
.v6-fx-drift .v6-poster.is-open .rb-box{margin-top:14px;}

/* (3) Zitat 15% kleiner (30 → 25.5px) */
.v6-pquote{font-size:25.5px; gap:14px;}

/* (4) Graue Bild-Spalte ~12% schmaler (mehr Textanteil) — nur ab Tablet */
@container v6 (min-width:601px){
  .v6-pinner{grid-template-columns:1.5fr 1fr;}
}

/* (5) Aufklappen: Bild endet am Zitat-Ende, Fließtext läuft breiter darunter.
   Der Body ist jetzt eine eigene volle-Breite-Zeile (aus pmain herausgelöst).
   Die Figur spannt weiter Titel + pmain — da der Toggle offen display:none ist,
   reicht das Bild damit genau bis zum Zitat-Ende. Body mit Weißraum rechts. */
.v6-fx-drift .v6-pbody{
  grid-column:1 / -1; max-width:none; padding-right:0;
  max-height:0; overflow:hidden; opacity:0; margin:0;
  transition:max-height var(--d-slow) var(--ease-out),
             opacity var(--d-base) var(--ease-out),
             margin-top var(--d-slow) var(--ease-out);
}
.v6-fx-drift .v6-poster.is-open .v6-pbody{max-height:1400px; opacity:1; margin-top:22px;}

/* (7) Marker T5: gelbe Kurve aufs rechte Linien-Ende (hoch auf Linienhöhe) */
#these-05 .v6-pscribble .mk-open{transform:translate(-4px,-46px);}

/* (9) Headline-Highlight (offen): T1 (gelber Highlighter, halbhoch) — auf alle */
.v6-fx-drift .v6-poster.is-open .v6-ptitle-mark{
  background:linear-gradient(to top, rgba(239,247,70,.9) 42%, transparent 42%);
  box-shadow:none; color:var(--ink);
}

/* (6) iPad/Tablet (≤1024): Profil als sticky Bottom-Sheet statt am Feed-Ende
   gestrandet. Pills bleiben (anders als Mobile) horizontal. */
@container v6 (max-width:1024px){
  .rb-panelwrap{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40; padding:0; margin:0;}
  .rb-panel{
    max-width:none; margin:0; border-radius:12px 12px 0 0; border-bottom:0;
    max-height:84px; overflow:hidden;
    box-shadow:0 -12px 34px -14px rgba(10,10,10,.34);
    transition:max-height var(--d-slow) var(--ease-out);
  }
  .rb-panel.is-open{max-height:84vh; overflow-y:auto;}
  .rb-head{flex-shrink:0;}
  .rb-panelbar{
    display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0;
    height:46px; padding:0 18px; border:0; background:transparent; width:100%; text-align:left;
  }
  .rb-panelbar-dot{width:7px; height:7px; border-radius:50%; background:var(--blue); animation:rbLive 2s ease-in-out infinite;}
  .rb-panelbar-label{font-family:var(--font-wide); font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--ink);}
  .rb-panelbar-hint{margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver);}
  .rb-panelbar-arrow{transition:transform var(--d-base) var(--ease-out); color:var(--graphite); padding-right:2px;}
  .rb-panel.is-open .rb-panelbar-arrow{transform:rotate(180deg);}
  .v6-gallery{padding-bottom:64px;}
}

/* Mobile (≤600): herausgelösten Body korrekt einordnen + Zitat kleiner.
   Reihenfolge: Kopf → Titel → Bild → Zitat(pmain) → Body → Reaktions-Box. */
@container v6 (max-width:600px){
  .v6-fx-drift .v6-pinner .v6-pbody{order:4; padding-right:0;}
  .v6-fx-drift .rb-box{order:5;}
  .v6-pquote{font-size:18.7px;}
}