/* ============================================================
   insider.css — Seiten-CSS /insider (Skelett-Phase)
   Lädt NACH tokens.css → base.css → sections.css.

   Regeln (UEBERGABE_SKELETT_BAU_V2, wie method.css):
   - Farben NUR via Tokens; Ausnahmen: 1:1 aus home.css/method.css
     übernommene rgba-Werte + die Bestand-Bildfläche #dfe7ef.
   - Sektionsabstände im Bestand-Muster (96–112px vertikal,
     Hero großzügiger) — überschreiben das --section-y der base.css.
   - Grids align-items:start. Viewport fix 1920×1080,
     KEIN Responsive, kein clamp, keine Media Queries.
   - Keine zusätzlichen Pseudo-Elemente auf .section (Lesson §7.5).
   ============================================================ */

/* =========================
   POSITIONS-VARIABLEN /insider-Hero (Bau-Werkzeug) — CSS = WAHRHEIT.
   Das Dev-Panel (_dev-insider-panel.js, Taste s) liest/schreibt diese Werte;
   die Seite rendert IMMER hieraus, auch ohne Panel -> Panel-Ausbau verschiebt nichts.
   Stand: 2026-07-16-a (Inhaber-Uebergabe der Panel-Werte 15.07.-c: Kicker, Treppe w2/w3, Lead, CTA nachjustiert, Head-Alpha 0.86). Uebernahme-Ritual: "Werte kopieren" ->
   diesen :root-Block ersetzen -> I_STAND (Panel + Kommentar) gleich erhoehen.
   VOR LIVEGANG: Panel-Datei + Script-Tag in insider.html raus; Block bleibt.
========================= */
:root{
  --i-kicker-x:-183px;  --i-kicker-y:-40px;
  --i-w1-x:587px;       --i-w1-y:0px;
  --i-w2-x:327px;       --i-w2-y:60px;
  --i-w3-x:115px;       --i-w3-y:131px;
  --i-lead-x:212px;     --i-lead-y:176px;
  --i-cta-x:760px;      --i-cta-y:256px;   /* CTA-Button "Zum Buch" */
  --i-head-size:76px;               /* Headline-Groesse (justierbar) */
  --i-head-alpha:0.86;              /* Headline-Weiss-Deckkraft — gedimmt gg. Strahlen (w3 = orange via .hl) */
  --i-av-x:362px;    --i-av-y:67px;  /* Avatar-Position */
  --i-av-scale:1.05;                 /* Avatar-Groesse (Faktor) */
  --i-av-opacity:0.18;               /* Avatar-Durchscheinen */
  --i-hero-minh:940px;               /* Hero-Blau Mindesthoehe — KONSTANT, unabhaengig von Headline-Groesse */
}

/* =========================
   1 · HERO / BIO (dunkel, glow-tl) — Avatar als Hintergrund-Ebene
========================= */

/* overflow: clip statt hidden (Inhaber-Entscheid 28.07., Desktop-Fix wie
   sections.css) — diese Regel gewinnt gegen .section und muss den Fix
   selbst tragen, sonst scrollt /insider.html#making weiter INNERHALB
   des Heros (FEHLERFUND vom Mobilbau; mobil + Band clippen laengst).
   hidden davor = Rueckfalllinie fuer alte Browser. */
.i-hero{ position:relative; overflow:hidden; overflow:clip; min-height:var(--i-hero-minh); padding:140px 0 112px; }

/* Avatar hinter dem Text (Inhaber-Idee 2026-07-15, 15.07. auf FREISTELLER umgestellt):
   freigestellter Kohle-Sketch (remove.bg), unterer Rand weich ausgelaufen -> kein Hard-Cut
   (abgeschnittene Schulter loest sich ins Blau); voll deckend, komplett via Dev-Panel
   positionier-/skalier-/dimmbar. Dekorativ (aria-hidden / leerer Alt); EXIF gestrippt (R1).
   Quell-Aufloesung 500x500 (remove.bg-Gratisvorschau) -> width:500 = native, scharf; groesser
   nur mit HD-Reexport (Original avatar_kohle.png 1254x1254 im Master-Inbox). */
.i-hero__bg-avatar{
  position:absolute;
  /* fest in der HERO-ZONE verankert (Mitte des alten 940px-Hero-Bildschirms) —
     top:50% würde nach dem Einzug des Making-of-Blocks (1b) in die Sektion
     mit der Sektionshöhe nach unten wandern. Position visuell unverändert. */
  top:calc(var(--i-hero-minh) / 2); left:68%;
  width:500px; height:auto;
  opacity:var(--i-av-opacity);
  transform:translate(-50%,-50%) translate(var(--i-av-x), var(--i-av-y)) scale(var(--i-av-scale));
  transform-origin:center;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

/* Textspalte ueber dem Avatar. min-height reserviert den kompletten Hero-
   Bildschirm (= --i-hero-minh minus 140px Section-Padding oben), damit der
   nachfolgende Making-of-Block (1b) NIE in die per transform verschobenen
   Lead-/CTA-Elemente rutscht — der Hero sieht exakt aus wie vor dem Umbau. */
.i-hero__copy{
  position:relative;
  z-index:1;
  max-width:1100px;
  min-height:calc(var(--i-hero-minh) - 140px);
}

/* .i-hero__cta 28.07. ersatzlos raus (Inhaber) — Markup-Block in
   insider.html entfernt; --i-cta-x/y bleiben im :root-Block stehen
   (Schieber-Sicherung: Panel-Stand wird nicht angefasst), die zwei
   CTA-Regler des Panels laufen ins Leere. */

.i-hero__kicker{
  margin:0 0 30px;
  min-height:1em;                 /* reserviert Zeilenraum des leeren Slots */
  text-shadow:0 8px 24px rgba(0,0,0,0.10);   /* 1:1 Bestand-Hero-Kicker */
  transform:translate(var(--i-kicker-x), var(--i-kicker-y));
}

/* 1:1 Bestand-Hero (Treppen-Rezept): Groesse justierbar / 0.82 / -0.095em / 760 */
.i-hero__headline{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:var(--i-head-size);
  line-height:0.82;
  font-weight:760;
  letter-spacing:-0.095em;
  color:rgba(255,255,255,0.92);
}

.i-hero__word{
  display:block;
  white-space:nowrap;
  min-height:0.82em;              /* reserviert Zeilenraum der leeren Treppen-Slots */
  color:rgba(255,255,255,var(--i-head-alpha));   /* gedimmt via Panel (--i-head-alpha); w3 orange via .hl */
  text-shadow:0 10px 30px rgba(0,0,0,0.14);  /* 1:1 Bestand .hero-word */
}

/* Treppen-Versatz (Startwerte) + Feinposition je Zeile via Dev-Panel */
.i-hero__word.w1{ margin-left:0;     transform:translate(var(--i-w1-x), var(--i-w1-y)); }
.i-hero__word.w2{ margin-left:0.9ch; transform:translate(var(--i-w2-x), var(--i-w2-y)); }
.i-hero__word.w3{ margin-left:1.8ch; transform:translate(var(--i-w3-x), var(--i-w3-y)); }

/* "3-Farben-System" orange (Inhaber 15.07.) — spezifischer als .i-hero__word (setzt Wortfarbe direkt auf Weiss), 1:1 wie .a-hero__word.hl */
.i-hero__word.hl{ color:var(--orange); }

.i-hero__lead{
  margin:44px 0 0;
  white-space:pre-line;           /* respektiert den \n im Text -> Lead zweizeilig (Inhaber 15.07.) */
  font-size:var(--t-lead);
  font-weight:500;
  line-height:1.45;
  min-height:1.45em;              /* reserviert Zeilenraum des leeren Slots */
  color:rgba(255,255,255,0.82);   /* 1:1 Bestand .hero-subline */
  max-width:52ch;
  transform:translate(var(--i-lead-x), var(--i-lead-y));
}

/* =========================
   Kontextuelle Textlinks (creme + helle Karten) — 1:1 Muster method.css
   Designsprache Bestand: ruhiges Blau, Hover = orange-deep (erlaubter Akzent)
========================= */

.context-link{
  display:inline-flex;
  align-items:center;
  min-height:48px;                /* Touch-Target (UX §2) */
  font-family:var(--font-head);
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.01em;
  color:var(--blue);
  transition:color 0.2s ease;
}

.context-link::after{
  content:"\2192";                /* → */
  margin-left:10px;
  transition:transform 0.2s ease;
}

.context-link:hover{ color:var(--orange-deep); }
.context-link:hover::after{ transform:translateX(4px); }

/* =========================
   1b · MAKING-OF-VIDEO — im DUNKLEN Hero-Feld (Neuaufbau 21.07., 3. Runde):
   Seiten-Rhythmus bleibt streng dunkel→hell→dunkel→hell (Inhaber-Gesetz,
   Referenz /book). Der Block liegt IN der i-hero-Sektion (kein Sektions-
   Neustart → keine Naht); Rahmen + Hover 1:1 Tür-Karten-Rezept der App
   (home-hub.css .hub-card, Quelle lobby 62bc42f) — dunkler Grund ist
   dessen App-Heimat. Keine neuen Rezepte, keine neuen Farben.
========================= */

/* Abstand zum Hero-Bildschirm darüber (Sektions-Rhythmus-Maß 112px) */
.i-making{ padding-top:112px; }

/* Überschrift zentriert; Farbe = Programm-Weiß der dunklen Felder
   (base.css .section--dark h2 greift automatisch — hier KEINE Farbe setzen);
   Versalien = Inhaber „große Buchstaben" 21.07. */
.i-making__title{
  margin:0 0 18px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

/* Erklärsatz UNTER der Überschrift, ÜBER dem Video (Inhaber 21.07.);
   Weiß-Ton 1:1 Programm .hero-subline / .i-hero__lead */
.i-making__caption{
  margin:0 auto 48px;
  max-width:72ch;
  text-align:center;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:rgba(255,255,255,0.82);
}

/* Video groß (volle Container-Breite 1320px — „es ist es wert, groß gezeigt
   zu werden") im Tür-Karten-Rahmen, Werte 1:1 .hub-card: #13283F-Grund ·
   Orange-Akzent-Rand .3 → Hover .78 · Hover hebt 6px. Bewusst OHNE
   Orange-Hauch/Verlauf — nichts liegt über dem Laufbild. Lift nur solange
   das Video nicht läuft (beim Schauen bleibt die Karte ruhig). */
.i-making__video-card{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background-color:#13283F;
  border:1px solid rgba(227,122,45,.3);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  isolation:isolate;
  transition:transform .28s, border-color .28s;
}

.i-making__video-card:not(.is-playing){ cursor:pointer; }

.i-making__video-card:not(.is-playing):hover{
  transform:translateY(-6px);
  border-color:rgba(227,122,45,.78);
}

.i-making__video-card video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;                /* 16:9 in 16:9 = deckungsgleich */
  display:block;
}

/* Eigener Play-Knopf UNTER dem Huf-Kreis des Posters (Inhaber 21.07.: das
   native Overlay verdeckte den Huf) — Kreis + Dreieck 1:1 das i-video-Rezept
   dieser Seite; native Controls erst ab Klick (assets/js/making-video.js). */
.i-making__play{
  position:absolute;
  left:50%;
  bottom:36px;
  width:72px;
  height:72px;
  margin-left:-36px;
  padding:0;
  border-radius:50%;
  background:rgba(19,40,63,0.72);
  border:1px solid rgba(255,255,255,0.12);
  cursor:pointer;
  z-index:2;
  transition:border-color .28s;
}

.i-making__play::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  margin:-12px 0 0 -7px;
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent rgba(255,255,255,0.92);
}

.i-making__video-card:hover .i-making__play{ border-color:rgba(227,122,45,.78); }

.i-making__video-card.is-playing .i-making__play{ display:none; }

/* =========================
   2 · BEI DER ARBEIT (creme) — Foto-Loop im selben Tür-Karten-Rahmen,
   Text rechts daneben (Inhaber 21.07.). Folgt direkt auf das dunkle
   Hero+Video-Feld → der warme Dunkel→Creme-Übergang (sections.css) greift.
========================= */

.i-atwork{ padding:112px 0 96px; }

.i-atwork__row{
  display:grid;
  grid-template-columns:636px 1fr;
  gap:64px;
  align-items:start;              /* Regel: nie center */
}

/* Loop-Mechanik (abgenommen 21.07., unverändert): Bilder stapeln absolut,
   .is-active blendet ein (assets/js/at-work-loop.js, TAKT_MS dort tunbar) */
.i-making__stage--atwork{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  isolation:isolate;
}

.i-making__stage--atwork img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}

.i-making__stage--atwork img.is-active{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .i-making__stage--atwork img{ transition:none; }
  .i-making__stage--atwork img:first-child{ opacity:1; }  /* Standbild-Fallback */
}

/* Rahmen der Foto-Karte — 1:1 wie .i-making__video-card (Tür-Karten-Rezept) */
.i-atwork__card{
  background-color:#13283F;
  border:1px solid rgba(227,122,45,.3);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  transition:transform .28s, border-color .28s;
}

.i-atwork__card:hover{
  transform:translateY(-6px);
  border-color:rgba(227,122,45,.78);
}

/* Textblock optisch auf Höhe neben der 636px-Karte (Grid bleibt start — Regel) */
.i-atwork__copy{ padding-top:120px; }

.i-atwork__title{
  margin:0 0 20px;
  color:var(--blue);
}

.i-atwork__p{
  margin:0 0 1.1em;
  max-width:48ch;
  font-size:var(--t-lead);
  line-height:var(--lh-body);
  color:rgba(31,58,95,0.78);
}

/* =========================
   3 · DATEN-ARCHIV (dunkel, glow-br)
========================= */

.i-data{ padding:112px 0 96px; }

.i-data__header{
  text-align:center;
  margin-bottom:64px;             /* Bestand-Muster .examples-header */
}

.i-data__title{
  margin:0;
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.i-data__grid{
  display:grid;
  grid-template-columns:306px 306px 306px 306px;
  gap:32px;
  justify-content:center;
  align-items:stretch;            /* Karten gleich groß (Inhaber 22.07.,
                                     wie m-colors__grid auf /method) */
}

/* Edle Karte auf dunkel — Karten-Rezept der method-Drei-Farben-Karten */
.i-stat{
  background:linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:32px 30px 36px;
  box-shadow:var(--shadow-soft);
}

.i-stat__value{
  margin:0 0 10px;
  font-family:var(--font-head);
  font-weight:760;
  font-size:var(--t-h1);
  letter-spacing:-0.015em;
  line-height:1.1;
  color:rgba(255,255,255,0.92);
  min-height:1.1em;               /* reserviert Zeilenraum des leeren Slots */
}

.i-stat__label{
  margin:0;
  font-size:0.78rem;              /* 1:1 Bestand-Chip-Typo */
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);   /* 1:1 Bestand .app-detail */
  min-height:1em;                 /* reserviert Zeilenraum des leeren Slots */
}

/* =========================
   4 · YOUTUBE (creme)
========================= */

.i-videos{ padding:112px 0 96px; }

/* Text links, Video rechts — Spiegel des .i-atwork-Rezepts (Inhaber 27.07.) */
.i-videos__row{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:64px;
  align-items:start;              /* Regel: nie center */
}

/* Textblock optisch auf Höhe neben dem 604px-Video (Grid bleibt start — Regel) */
.i-videos__copy{ padding-top:120px; }

.i-videos__title{
  margin:0 0 20px;
  color:var(--blue);
}

.i-videos__lead{
  margin:0;
  max-width:48ch;                 /* 1:1 Bestand .i-atwork__p */
  font-size:var(--t-lead);
  line-height:var(--lh-body);
  color:rgba(31,58,95,0.78);
}

/* EIN Hochkant-Video 9:16 statt drei 16:9-Slots (Inhaber 27.07.) —
   Bildflächen-Rezept bleibt: #dfe7ef, Karten-Radius 16, Haarlinie, Schatten */
.i-videos__stage{
  width:340px;                    /* -> 604px hoch; Handy-Format */
  aspect-ratio:9 / 16;
  border-radius:16px;
  overflow:hidden;
  background:#dfe7ef;             /* 1:1 Bestand .proof-stage */
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(19,40,63,0.10);
}

.i-videos__video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   5 · SOCIAL-OUTBOUND (dunkel, glow-bl)
========================= */

.i-social{ padding:112px 0 96px; }

.i-social__header{
  text-align:center;
  margin-bottom:48px;
}

.i-social__title{
  margin:0;
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.i-social__pills{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
}

/* =========================
   6 · EXTERNE BELEGE (creme)
========================= */

/* Zitat-Karten 27.07. ersatzlos gestrichen (Inhaber). Schmales Creme-Band:
   haelt den Rhythmus dunkel→hell→dunkel und traegt nur die 2 Cross-Links. */
.i-press{ padding:56px 0; }

.i-press__links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
}

/* =========================
   7 · ABSCHLUSS-CTA (dunkel, glow-tr)
========================= */

.i-cta{ padding:112px 0 112px; }

.i-cta__title{
  margin:0 auto;
  max-width:22ch;
  text-align:center;
  font-size:var(--t-display);
  font-weight:760;
  letter-spacing:-0.03em;
  line-height:var(--lh-tight);
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.i-cta__actions{
  margin-top:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}