/* guide.css — was nur der CI-Guide braucht.

   Seit v2.0 laufen index.html und socialmedia.html auf dem Stylesheet der
   Website (web/website.css): Kopfleiste, Hero mit Porträt, Sprungmarken,
   Abschnitte, Glas, Knöpfe, Fuß und Sternenfeld sehen aus wie auf
   emmawoelk.com. Hier steht nur, was die Website nicht hat: Tabellen,
   Codeblöcke, Farbfelder, Do/Don't-Kacheln, Galerien und die maßstäblichen
   Folienabbildungen. Übernommen aus dem alten ci.css und in die Optik der
   Website gezogen.

   Farben: nur die Palette aus Abschnitt 03 und die benannten Violett-Stufen,
   Abstufungen aus Deckkraft. check-ci.js prüft das.

   Klassen, die es auf der Website auch gibt, heißen hier anders — sonst
   erbte jede Folie die Regeln der Kopfleiste (.kopf) und des Fußes (.fuss):
   .urteil statt .chip, .masse statt .zahlen, .sl-kopf/.sl-inhalt/.sl-fuss/
   .sl-zahl auf den Folien. */

:root{
  /* Kurzwörter aus dem alten ci.css, auf die Tokens der Website gelegt. Die
     Folienabbildungen und viele style-Attribute im Markup benutzen sie. */
  --display:var(--ruf);
  --ink:var(--weiss);
  --ink-2:rgba(255,255,255,.76);
  --ink-3:rgba(255,255,255,.52);
  --rule:rgba(255,255,255,.1);
  --rule-2:rgba(255,255,255,.22);
  --panel:var(--flaeche);
  --lead:var(--gelb);
  --ok:var(--erfolg); --no:var(--fehler);
  --rund:18px;
  --ico-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
}

/* ============ SEITE ============ */
/* Der Kopf der Seite ist der Hero mit Porträt der Website. Darunter die
   Kennzeichnung als Pillen, nicht als Eyebrow über der Headline. */
.guide .hero p.llms{ margin-top:22px; max-width:62ch; border-left:2px solid var(--gelb); padding:2px 0 2px 16px; }
.guide .hero p.llms a{ font-weight:600; }
.head-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.head-meta span{ font-size:13px; color:var(--ink-2); background:var(--glas); border:1px solid var(--glas-rand);
  border-radius:99px; padding:6px 14px; }

/* Hero mit Porträt, Text rechts: für Fotos, auf denen Emma links steht.
   kiw-emma-abschluss.webp ist so gebaut — die Website setzt es im CTA-Band
   (Element 70) mit Text rechts ein. Mit dem Text links lag die Headline auf
   dem Gesicht, und die dunkle rechte Hälfte blieb leer. Der Verlauf wird
   gespiegelt, der Bildausschnitt bleibt links, damit Emma ganz im Bild ist. */
.guide .hero--rechts .hero__bild{ object-position:28% top; }
.guide .hero--rechts::after{
  background:
    linear-gradient(270deg,#000 0,rgba(0,0,0,.7) 28%,transparent 52%),
    linear-gradient(180deg,#000 0,transparent 100px),
    linear-gradient(0deg,#000 0,transparent 160px);
}
.guide .hero--rechts .hero__innen{ max-width:640px; margin-left:auto; }
@media (max-width:760px){ .guide .hero--rechts .hero__innen{ max-width:none; margin-left:0; } }

/* Die Sprungmarken stehen wie in der Bibliothek direkt unter dem Kopf. */
.guide .guide-uebersicht{ padding-block:30px 6px; }
.guide .guide-uebersicht .sprungmarken{ margin-top:0; }

/* Jeder Abschnitt ist ein Kapitel der Seite: viel Luft, eine feine Linie
   dazwischen, wie die Elemente auf /elemente. */
.guide section.abschnitt{ padding-block:clamp(64px,8vw,112px); border-top:1px solid var(--linie);
  scroll-margin-top:var(--kopfhoehe); }

.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:34px; }
.sec-head .num{ flex:none; font-family:var(--ruf); font-weight:700; font-size:clamp(34px,4.6vw,64px); line-height:1;
  color:var(--gelb); font-variant-numeric:tabular-nums; }
.sec-head h2.display{ font-size:clamp(34px,4.6vw,64px); line-height:1; margin:0; }
@media (max-width:760px){ .sec-head{ gap:12px; margin-bottom:24px; } }

.display{ font-family:var(--ruf); font-weight:700; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; }

/* ============ TEXT IN DEN ABSCHNITTEN ============ */
/* Die Website setzt Abstände über Nachbarschaft (p+p, h2+p …). Die Bausteine
   des Guides bringen ihre eigenen mit; beides zusammen verdoppelt sie. */
.guide .abschnitt p{ margin:0 0 16px; max-width:68ch; color:var(--ink-2); }
.guide .abschnitt ul,.guide .abschnitt ol{ margin:0 0 16px; }
.guide .abschnitt li{ margin-block:0; }
.guide .abschnitt h3{ font-family:var(--stark); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:24px; line-height:1.125; margin:0 0 14px; }
.guide .abschnitt h4{ font-family:var(--text); font-weight:700; font-size:17px; line-height:1.3; letter-spacing:.01em;
  margin:0 0 8px; color:var(--weiss); }
.guide .abschnitt strong{ color:var(--weiss); font-weight:700; }
.guide .abschnitt p.lead{ font-size:21px; line-height:1.62; font-weight:300; max-width:60ch; margin-bottom:40px; }
@media (max-width:760px){
  .guide .abschnitt h3{ font-size:20px; }
  .guide .abschnitt p.lead{ font-size:18px; line-height:1.5; }
}
/* Kursiv nur für einen benannten Gegenstand im Lauftext (Abschnitt 04). Die
   Website setzt em ohne Kursiv — hier ist es die Ausnahme mit Klasse. */
.guide em.it{ font-style:italic; font-weight:500; }
.guide code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; }
.label{ font-size:14px; font-weight:700; color:var(--weiss); }

.guide .abschnitt ul.rl{ margin:0; padding:0; list-style:none; }
.guide .abschnitt ul.rl li{ position:relative; padding-left:22px; margin:0 0 12px; color:var(--ink-2); max-width:72ch; }
ul.rl li::before{ content:"\25CF"; position:absolute; left:0; top:0; color:var(--gelb); font-size:9px; line-height:2.4; }
ul.rl li b{ color:var(--weiss); font-weight:700; }
ul.no li::before{ content:"\00D7"; color:var(--no); font-size:17px; line-height:1.2; font-weight:700; }

.block{ margin:0 0 56px; }
.block:last-child{ margin-bottom:0; }
/* Ein Satz unter einer Tabelle, einem Raster oder einer Bühne klebte an deren
   Unterkante: die Website-Abstände greifen nur zwischen Text. */
.guide .abschnitt :is(.scroll-x,.grid2,.grid3,.grid4,.lgg,.stage,.codebox,.sizes,.cs,.fav,.bgg,.slgrid,.lw,.eug)+p{ margin-top:18px; }
/* Ein Block, der auf losen Text folgt (etwa die Folienabbildung unter dem
   Beispielsatz), braucht denselben Abstand wie zwei Blöcke untereinander. */
.guide .abschnitt :is(p,ul,.codebox,.scroll-x,.typ)+.block{ margin-top:56px; }

/* ============ GLAS ============ */
/* Karten, Kacheln und Kästen des Guides stehen auf demselben Glas wie die
   Karten der Website. */
.card,.sw,.dd,.tp,.lgc,.bgc,.euc,.lwc,.slwrap,.stage,.guide pre,.scroll-x:has(>.tbl){
  background:var(--glas); border:1px solid var(--glas-rand); box-shadow:var(--glas-kante);
  border-radius:var(--rund); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.card{ padding:26px 28px; }
.guide .abschnitt .card p:last-child,.guide .abschnitt .card ul:last-child{ margin-bottom:0; }

.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:760px){ .grid2,.grid3,.grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .grid2,.grid3,.grid4{ grid-template-columns:1fr; } }

/* ============ BÜHNE ============ */
.stage{ overflow:hidden; margin-top:16px; }
.stage .bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--glas-rand); }
.stage .body-light{ background:#FFFFFF; padding:34px; color:#000000; }
.stage .body-dark{ background:#000000; padding:34px; color:#FFFFFF; }
.stage .body-tint{ background:#FFF700; padding:34px; color:#000000; }
@media (max-width:760px){ .stage .body-light,.stage .body-dark,.stage .body-tint{ padding:22px; } }

/* Do / Don't */
.dd{ overflow:hidden; display:flex; flex-direction:column; }
.dd .head{ display:flex; align-items:flex-start; gap:8px; padding:10px 14px; border-bottom:1px solid var(--glas-rand); }
.urteil{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:3px 9px;
  border-radius:99px; white-space:nowrap; }
.urteil.y{ background:rgba(53,200,138,.12); color:var(--ok); }
.urteil.n{ background:rgba(255,90,95,.12); color:var(--no); }
.dd .head span.t{ font-size:13px; color:var(--ink-2); line-height:1.35; }
.dd .demo{ padding:24px; display:grid; place-items:center; min-height:118px; background:#FFFFFF; flex:1; }
.dd .demo.dk{ background:#000000; }
.dd .demo img{ height:34px; width:auto; }

/* ============ FARBFELDER ============ */
.sw{ overflow:hidden; }
.sw i{ display:block; height:86px; }
.sw .m{ padding:12px 14px 14px; }
.sw b{ display:block; font-size:14px; font-weight:900; font-family:var(--stark); text-transform:uppercase; letter-spacing:.02em; color:var(--weiss); }
.sw .m>code{ display:block; font-size:12px; color:var(--ink-3); margin:2px 0 6px; letter-spacing:.02em; }
.sw span{ display:block; font-size:12.5px; color:var(--ink-2); line-height:1.45; }

/* ============ TABELLE ============ */
/* Wie die Tabellen der Website: Kopf in Gelb, auf Glas, scrollt waagerecht. */
.scroll-x{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:15px; }
.tbl th{ text-align:left; font-size:14px; font-weight:700; color:var(--gelb); padding:14px 18px;
  border-bottom:1px solid var(--rule-2); }
.tbl td{ padding:12px 18px; border-bottom:1px solid var(--rule); color:var(--ink-2); vertical-align:top; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td:first-child{ color:var(--weiss); font-weight:500; }
.tbl code{ color:var(--gelb); font-weight:600; }

/* ============ LOGO-GALERIE ============ */
.lgg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:16px; }
@media (max-width:660px){ .lgg{ grid-template-columns:1fr; } }
.lgc{ overflow:hidden; display:flex; flex-direction:column; }
.lgc .st{ padding:26px 24px; display:grid; place-items:center; min-height:132px; }
.lgc .st.hell{ background:#FFFFFF; }
.lgc .st.dunkel{ background:#000000; }
.lgc .st img{ width:auto; max-width:100%; max-height:80px; }
.lgc .mt{ padding:14px 18px 16px; border-top:1px solid var(--glas-rand); margin-top:auto; }
.lgc .mt b{ display:block; font-size:14px; font-weight:900; color:var(--weiss); font-family:var(--stark); text-transform:uppercase; letter-spacing:.02em; }
.lgc .mt code{ display:block; font-size:12px; color:var(--gelb); margin-top:4px; }
.lgc .mt span{ display:block; font-size:12.5px; color:var(--ink-3); line-height:1.45; margin-top:6px; }
.lgc .fl{ display:flex; gap:16px; flex-wrap:wrap; margin-top:11px; }
a.dl{ display:inline-flex; align-items:baseline; gap:6px; font-size:13px; font-weight:700; color:var(--gelb);
  text-decoration:none; letter-spacing:.01em; }
a.dl::before{ content:"\2193"; font-size:13px; line-height:1; }
a.dl:hover{ text-decoration:underline; }

/* ============ CODE ============ */
.codebox{ position:relative; margin:0 0 16px; }
.guide pre{ padding:18px 20px; overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; line-height:1.6; color:var(--ink-2); margin:0; }
button.cpcode{ position:absolute; top:10px; right:10px; font:inherit; font-size:12px; font-weight:600;
  background:var(--glas); color:var(--ink-2); border:1px solid var(--rule-2); border-radius:99px; padding:4px 12px; cursor:pointer; }
button.cpcode:hover{ color:var(--gelb); border-color:var(--gelb); }
button.cpcode.ok{ color:var(--ok); border-color:var(--ok); }
/* Der Kopierknopf am Farbcode: Lucide "copy" als Maske, der Strich ist
   currentColor. Ein leeres Rechteck sah aus wie ein fehlendes Zeichen. */
button.cp{ appearance:none; background:none; border:0; padding:0; margin-left:6px; cursor:pointer;
  width:12px; height:12px; vertical-align:-1px; display:inline-block; color:inherit; opacity:.55; transition:opacity .12s;
  background-color:currentColor;
  -webkit-mask:var(--ico-copy) no-repeat center/12px 12px; mask:var(--ico-copy) no-repeat center/12px 12px; }
button.cp:hover,button.cp:focus-visible{ opacity:1; }
button.cp.ok{ opacity:1; background-color:var(--ok); }

/* ============ LOGO-BEISPIELE ============ */
.cs{ background:#FFFFFF; padding:44px; display:grid; place-items:center; border-radius:var(--rund); }
.cs .wrap{ position:relative; outline:1px dashed #DF579D; }
.cs .box{ outline:1px solid #8075D9; display:block; }
.sizes{ background:#FFFFFF; padding:28px; display:flex; flex-wrap:wrap; gap:36px; align-items:flex-end; border-radius:var(--rund); }
.sizes figure{ margin:0; text-align:center; }
.sizes figcaption{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(0,0,0,.55); margin-top:10px; font-weight:600; }
.fav{ display:flex; gap:26px; align-items:flex-end; flex-wrap:wrap; background:#FFFFFF; padding:24px 26px; border-radius:var(--rund); }
.fav figure{ margin:0; text-align:center; }
.fav figcaption{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(0,0,0,.55); margin-top:9px; font-weight:600; }
.fav img,.fav .kachel{ display:block; margin:0 auto; }
.fav .kachel{ background:#000000; display:grid; place-items:center; }
.fav .kachel i{ display:block; width:72%; height:52%;
  -webkit-mask:url(logos/icon-dark.svg) center/contain no-repeat; mask:url(logos/icon-dark.svg) center/contain no-repeat; }
.fav .kachel.weiss i{ background-color:#FFFFFF; }
.fav .kachel.gelb i{ background-color:#FFF700; }

/* ============ TYPO-PROBEN ============ */
.tp{ padding:24px 26px; }
.tp .h1p{ font-family:var(--ruf); font-weight:700; text-transform:uppercase; font-size:clamp(34px,5vw,56px); line-height:1;
  letter-spacing:.005em; color:var(--weiss); margin:10px 0 12px; }
.tp .h3p{ font-family:var(--stark); font-weight:900; text-transform:uppercase; font-size:clamp(22px,3vw,30px); line-height:1.1;
  letter-spacing:.02em; color:var(--weiss); margin:10px 0 12px; }
.tp .bp{ font-family:var(--text); font-weight:400; font-size:17px; line-height:1.6; color:var(--ink-2); margin:10px 0 12px; max-width:64ch; }

/* ============ DER GELBE MARKER ============ */
/* Eine gezeichnete Fläche mit fester Höhe, symmetrisch um das Versalband —
   Begründung und Messung in Abschnitt 06. */
mark.mk{ --mk-oben:.05em; --mk-hoehe:1.2em; color:#000000; font-weight:700; padding:0 .24em;
  background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 var(--mk-oben)/100% var(--mk-hoehe);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.tx mark,mark.mk-text{ --mk-oben:.02em; --mk-hoehe:1.17em; }

/* ============ ICONS ============ */
.icotools{ display:flex; gap:12px; align-items:center; margin:16px 0 12px; flex-wrap:wrap; }
.icotools input{ flex:1; min-width:190px; font:inherit; font-size:15px; background:var(--glas); border:1px solid var(--rule-2);
  border-radius:99px; color:var(--weiss); padding:10px 18px; }
.icotools input:focus-visible{ outline:2px solid var(--gelb); outline-offset:1px; }
.icochips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.icochips button{ font:inherit; font-size:13px; background:var(--glas); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; color:var(--ink-2); padding:7px 14px; cursor:pointer; }
.icochips button:hover{ color:var(--violett-hell); border-color:var(--violett-hell); }
.icochips button.an{ color:var(--gelb); border-color:var(--gelb); }
.bgchips button i{ font-style:normal; opacity:.55; font-variant-numeric:tabular-nums; }
.bgchips button.an i{ opacity:.8; }
/* Das Raster sitzt in einem eigenen Scrollbereich: ungefiltert standen über
   tausend Pixel Icons zwischen zwei Absätzen. Der Balken ist gelb. */
.icogrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:8px; max-height:420px; overflow-y:auto;
  padding:10px; border:1px solid var(--glas-rand); border-radius:var(--rund); background:var(--glas-leicht);
  scrollbar-color:var(--gelb) transparent; }
.icogrid::-webkit-scrollbar{ width:10px; }
.icogrid::-webkit-scrollbar-track{ background:transparent; }
.icogrid::-webkit-scrollbar-thumb{ background:var(--gelb); border-radius:99px; border:2px solid var(--flaeche); }
.icogrid .ic{ border:1px solid var(--glas-rand); border-radius:12px; background:var(--glas); padding:12px 6px 9px;
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-align:center; }
.icogrid .ic:hover{ border-color:var(--gelb); }
.icogrid .ic.ok{ border-color:var(--ok); }
.icogrid .ic i{ display:block; width:22px; height:22px; background-color:var(--gelb);
  -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.icogrid .ic span{ font-size:10px; color:var(--ink-3); line-height:1.25; word-break:break-word; }
.icocount{ font-size:13px; color:var(--ink-3); }

/* ============ ANWENDUNGSBEISPIELE ============ */
.sig{ background:#FFFFFF; color:#000000; padding:26px 28px; font-family:var(--text); font-size:13.5px; line-height:1.55; }
.sig img{ height:46px; width:auto; margin-bottom:14px; }
.sig b{ font-weight:700; color:#000000; }
.sig .z{ color:rgba(0,0,0,.55); }
/* Signatur v2 (16.09.2026): Grussformel zuerst, darunter Portraet neben Logo.
   Beide Bilder brauchen eigene Regeln, weil .sig img sonst auch das Portraet
   auf 46 px Hoehe zwingt. */
/* Zweiter Kopierknopf am Signaturblock: derselbe Knopf, links daneben. Der
   Block ist hoch, unten waere der Knopf ausserhalb des Blicks. */
.codebox .cpcode--zweit{ right:136px; }
@media (max-width:560px){
  .codebox .cpcode--zweit{ right:10px; top:44px; }
}

.sig .sig-gruss{ margin:0 0 14px; color:rgba(0,0,0,.55); }
.sig .sig-reihe{ display:flex; align-items:flex-start; gap:16px; }
.sig .sig-foto{ width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0; flex:none; }
.sig .sig-name{ font-weight:700; font-size:16px; }
.sig .sig-rolle{ color:rgba(0,0,0,.6); margin-bottom:10px; }
.sig .sig-kontakt{ margin-bottom:12px; }
/* Der Termin liegt auf einer schwarzen Flaeche: Gelb ist in der Signatur
   verboten, und in einer Mail ist das ohnehin eine Tabellenzelle mit
   bgcolor — Outlook verschluckt Hintergruende an Inline-Elementen. */
.sig .sig-cta a{ display:inline-block; background:#000000; color:#FFFFFF;
                 font-weight:700; font-size:13px; padding:5px 12px; text-decoration:none; }
.sig .sig-fuss{ display:flex; align-items:center; gap:14px; margin-top:16px;
                padding-top:12px; border-top:1px solid rgba(0,0,0,.14); }
.sig .sig-logo{ width:96px; height:auto; margin:0; flex:none; }
.sig .sig-fuss .z{ font-size:11.5px; line-height:1.5; }
.hero-demo{ background:#000000; padding:44px 40px; }
.hero-demo h5{ font-family:var(--ruf); font-weight:700; text-transform:uppercase; font-size:clamp(28px,4.6vw,46px);
  line-height:1; letter-spacing:.005em; color:#FFFFFF; margin:0 0 16px; max-width:18ch; }
.guide .abschnitt .hero-demo p{ color:rgba(255,255,255,.72); max-width:52ch; font-size:15px; margin:0 0 22px; }
.hero-demo .btn{ display:inline-block; background:#FFF700; color:#000000; font-weight:700; font-size:14px;
  letter-spacing:.025em; text-transform:uppercase; padding:16px 34px; border-radius:50px; text-decoration:none; }

/* ============ FUSS ============ */
/* Die Rechtsangaben stehen im Fuß der Website-Optik, mittig unter dem Logo. */
.fuss .foot-legal{ margin-top:30px; text-align:center; font-size:14px; color:rgba(255,255,255,.62); }
.fuss .foot-legal p{ max-width:none; margin:0 auto 8px; }
.fuss .fuss__reihe{ grid-template-columns:1fr; justify-items:center; }
.fuss .fuss__logo{ justify-self:center; }

/* ============ SOCIAL: LEINWÄNDE ============ */
/* Alle Vorschauen sind maßstäblich: aspect-ratio und Ränder in Prozent. */
.lw{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); align-items:start; }
.lwc{ overflow:hidden; }
.lwc .fl{ background:#000000; position:relative; }
.lwc .fl::after{ content:""; position:absolute; inset:6%; border:1px dashed rgba(255,247,0,.45); pointer-events:none; }
.lwc .mt{ padding:10px 12px 12px; border-top:1px solid var(--glas-rand); }
.lwc .mt b{ display:block; font-family:var(--stark); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:12px; color:var(--weiss); }
.lwc .mt span{ display:block; font-size:11.5px; color:var(--ink-3); line-height:1.45; margin-top:3px; }
.zone{ position:absolute; background:repeating-linear-gradient(45deg,rgba(223,87,157,.30) 0 5px,transparent 5px 10px); pointer-events:none; }
.zone.top{ top:0; left:0; right:0; height:13%; }
.zone.bot{ bottom:0; left:0; right:0; height:26%; }
.zone.rig{ top:13%; bottom:26%; right:0; width:20%; }

/* ============ SOCIAL: FOLIEN 4:5 ============ */
/* Die Folien bilden Social-Seiten im Format 1080 × 1350 ab und behalten ihr
   eigenes Aussehen — sie zeigen eine Anzeige, nicht die Website. Größen in
   cqw (Prozent der Kartenbreite); das untere Polster in Prozent, weil ein
   Element seine eigenen Container-Einheiten nicht benutzen kann. 14 % ist die
   Zone des Zeichens. Begründungen in ARBEITSSTAND.md, Einträge 28 bis 33. */
.sl{ aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start;
  padding:8% 7% 14%; container-type:inline-size; }
.sl .sl-inhalt{ margin-block:auto; }
.sl.schwarz{ background:#000000; color:#FFFFFF; }
.sl.papier{ background:#FFFFFF; color:#000000; }
.sl.gelb{ background:#FFF700; color:#000000; }
.sl.foto{ background:#000000 url(backgrounds/bguniverse1.webp) center/cover; color:#FFFFFF; }
/* Vorher eingekastelt auf #191919, nachher frei mit gelbem Strich — die
   Bedeutung liegt in der Anordnung, nicht in einer Statusfarbe. */
.sl .vn-alt{ background:var(--flaeche); border-radius:3px; padding:4cqw 4.5cqw; }
.sl .vn-alt .vn-marke{ color:rgba(255,255,255,.42); }
.sl .vn-alt .vn-satz{ color:rgba(255,255,255,.58); }
.sl .vn-neu{ margin-top:6cqw; padding-left:2.5cqw; border-left:1cqw solid var(--gelb); }
.sl .vn-neu .vn-marke{ color:var(--gelb); }
.sl .vn-neu .vn-satz{ color:#FFFFFF; }
.sl .vn-marke{ display:block; font-family:var(--stark); font-weight:900; text-transform:uppercase; letter-spacing:.16em; font-size:3.2cqw; margin-bottom:1.6cqw; }
.sl .vn-satz{ font-family:var(--stark); font-weight:900; text-transform:uppercase; font-size:7cqw; line-height:1.06; letter-spacing:.005em; }
.sl .vn-klein .vn-satz{ font-size:5.4cqw; }
.sl .vn-klein.vn-alt{ padding:3cqw 3.5cqw; }
.sl .vn-klein.vn-neu{ margin-top:4cqw; }
.sl .sl-kopf{ font-family:Inter,sans-serif; font-size:3.2cqw; letter-spacing:.2em; text-transform:uppercase; font-weight:600; opacity:.75; }
.sl .hl{ font-family:var(--ruf); font-weight:700; text-transform:uppercase; font-size:13cqw; line-height:1.02; letter-spacing:.005em; }
.sl .tx{ font-family:Inter,sans-serif; font-size:4.6cqw; line-height:1.35; opacity:.9; }
.sl .sl-zahl{ font-family:var(--ruf); font-weight:700; font-size:27cqw; line-height:.85; letter-spacing:.005em; }
/* Der Fuß steht fest unten links, an derselben Stelle auf jeder Folie. */
.sl .sl-fuss{ position:absolute; left:7%; right:7%; bottom:6.5%; display:flex; justify-content:space-between; align-items:flex-end;
  gap:2cqw; font-family:Inter,sans-serif; font-size:2.8cqw; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.sl img.mk{ height:5.5cqw; width:auto; opacity:.95; }
.sl mark{ --mk-oben:.05em; --mk-hoehe:1.2em; color:#000000; padding:0 .2em;
  background:linear-gradient(#FFF700,#FFF700) no-repeat 0 var(--mk-oben)/100% var(--mk-hoehe);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sl.gelb mark{ color:#FFF700; background-image:linear-gradient(#000000,#000000); }
/* Zwei Spalten fest, unter 640 px eine; kein Scrollbereich — eine Abfolge
   will man nebeneinander sehen. */
.slgrid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px){ .slgrid{ grid-template-columns:minmax(0,1fr); } }
.slwrap{ align-self:start; overflow:hidden; }
.slwrap .cap{ padding:10px 12px 12px; font-size:11.5px; color:var(--ink-3); line-height:1.4; border-top:1px solid var(--glas-rand); }
.slwrap .cap b{ display:block; color:var(--weiss); font-size:12px; font-family:var(--stark); font-weight:900; text-transform:uppercase;
  letter-spacing:.02em; margin-bottom:2px; overflow-wrap:anywhere; }

.typ{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.typ span{ font-size:13px; color:var(--ink-2); background:var(--glas); border:1px solid var(--glas-rand); border-radius:99px; padding:6px 14px; }
.typ span b{ color:var(--gelb); font-weight:700; }

/* ============ SOCIAL: EU-ICONS ============ */
.eug{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:16px; }
@media (max-width:820px){ .eug{ grid-template-columns:1fr; } }
.euc{ overflow:hidden; display:flex; flex-direction:column; }
.euc .duo{ display:grid; grid-template-columns:1fr 1fr; }
.euc .duo>div{ padding:24px 16px; display:grid; place-items:center; min-height:104px; }
.euc .duo .hell{ background:#FFFFFF; }
.euc .duo .dunkel{ background:#000000; }
.euc .duo img{ max-height:46px; width:auto; max-width:100%; }
.euc .mt{ padding:14px 16px 16px; border-top:1px solid var(--glas-rand); margin-top:auto; }
.euc .mt b{ display:block; font-family:var(--stark); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:14px; color:var(--weiss); }
.euc .mt code{ display:block; font-size:12px; color:var(--gelb); margin-top:4px; }
.euc .mt span{ display:block; font-size:12.5px; color:var(--ink-3); line-height:1.45; margin-top:6px; }
.platz{ position:relative; aspect-ratio:9/16; max-width:220px; border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  background:#000000 url(backgrounds/bguniverse2.webp) center/cover; }
.platz .rand{ position:absolute; inset:6%; border:1px dashed rgba(255,247,0,.45); }
.platz .eu{ position:absolute; left:6%; bottom:26%; width:8%; aspect-ratio:1/1; background:#FFFFFF;
  -webkit-mask:url(ai-labels/ai-basic-black.svg) center/contain no-repeat; mask:url(ai-labels/ai-basic-black.svg) center/contain no-repeat; }
.platz .badge{ position:absolute; right:6%; top:13%; background:#FFF700; color:#000000; font:700 7px/1 Inter,sans-serif;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 6px; }

/* ============ HINTERGRÜNDE ============ */
/* Die Galerie sitzt wie das Icon-Raster in einem eigenen Scrollbereich.
   flex:0 0 auto ist Pflicht: sonst schrumpfen die Karten auf ihre
   Mindesthöhe, und die Bilder auf Höhe null laden nie. */
.bgg{ display:flex; flex-direction:column; gap:14px; margin-top:16px; max-height:min(74vh,720px); overflow-y:auto;
  padding:10px 12px 10px 10px; border:1px solid var(--glas-rand); border-radius:var(--rund); background:var(--glas-leicht);
  scrollbar-color:var(--gelb) transparent; }
.bgg::-webkit-scrollbar{ width:10px; }
.bgg::-webkit-scrollbar-track{ background:transparent; }
.bgg::-webkit-scrollbar-thumb{ background:var(--gelb); border-radius:99px; border:2px solid var(--flaeche); }
.bgg .bgc[hidden]{ display:none; }
.bgg:empty,.bgg.leer{ border-color:transparent; }
.bgc{ overflow:hidden; flex:0 0 auto; }
.bgc .bild{ position:relative; background:#000000; line-height:0; }
.bgc .bild img{ width:100%; height:auto; display:block; }
.bgc .bild.verlauf::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#000000 0%,transparent 18%,transparent 82%,#000000 100%),linear-gradient(180deg,transparent 55%,#000000 100%); }
.bgc .bild .probe{ position:absolute; left:5%; top:50%; transform:translateY(-50%); font-family:var(--ruf); font-weight:700;
  text-transform:uppercase; font-size:clamp(16px,2.6vw,30px); line-height:1; letter-spacing:.005em; color:#FFFFFF; }
.bgc .mt{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:baseline; padding:12px 16px 14px; border-top:1px solid var(--glas-rand); }
.bgc .mt b{ font-family:var(--stark); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:14px; color:var(--weiss); }
.bgc .mt code{ font-size:12px; color:var(--gelb); }
.bgc .mt .rolle{ font-size:11px; letter-spacing:.04em; font-weight:700; padding:3px 9px; border-radius:99px;
  background:rgba(255,247,0,.1); color:var(--gelb); }
.bgc .mt span.t{ flex:1 1 260px; font-size:13px; color:var(--ink-3); line-height:1.45; min-width:0; }
.bgc .mt .masse{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Schichtdiagramm */
.schichten{ display:flex; flex-direction:column; gap:3px; margin-top:14px; }
.schichten div{ padding:12px 16px; font-size:13px; border-left:3px solid var(--gelb); background:var(--glas); color:var(--ink-2); border-radius:0 10px 10px 0; }
.schichten div b{ color:var(--weiss); font-weight:700; }
.schichten div:nth-child(1){ border-left-color:var(--rule-2); background:#000000; }
.schichten div:nth-child(2){ border-left-color:var(--violett); }
.schichten div:nth-child(3){ border-left-color:var(--magenta); }
.schichten div:nth-child(4){ border-left-color:rgba(255,255,255,.55); }
.schichten div:nth-child(5){ border-left-color:var(--gelb); }