/* =====================================================================
   transform! 03/2026 · Ausgabestil online · Versuch 1 · GRAFIK 25.10.2026
   Gilt nur innerhalb von .tf26-03 (Freie Bühne). Greift auf keine Layoutregel
   des Themes zu; übernimmt nur Hausschriften (lokal) und die Tinte.
   Leitidee der Ausgabe: Zielkoordinaten. Raster sichtbar wie Passermarken im Druck.
   Leitidee Coverstory: vom System of Record zum System of Action.
   ===================================================================== */

.tf26-03{
  --papier:#FFFFFF; --papier-2:#F1F2EE; --tinte:#141B24; --grau:#5E6773; --haar:rgba(20,27,36,.16);
  --aktion:#1F4FD6;            /* „Action“: kräftiges Kobalt */
  --record:#7A838F;            /* „Record“: ruhiges Grau */
  --t-titel:'Kumbh Sans',system-ui,sans-serif; --t-text:'Hanken Grotesk',system-ui,sans-serif; --t-mono:'IBM Plex Mono',ui-monospace,monospace;
  --rand:clamp(16px,3.2vw,48px); --spalte:calc((min(100vw,1440px) - 2*var(--rand) - 11*24px)/12);
  background:var(--papier); color:var(--tinte); font-family:var(--t-text); font-weight:300;
  font-size:clamp(17px,1.25vw,19px); line-height:1.66; position:relative; overflow:hidden;
}
.tf26-03 *{box-sizing:border-box}
.tf26-03 p{margin:0}
.tf26-03 em{font-style:italic}
.tf26-03 img{display:block;width:100%;height:auto}

/* ---- 12er-Raster ---- */
.tf26-03 .tf-r{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;max-width:1440px;margin:0 auto;padding:0 var(--rand)}
.tf26-03 .tf-mono{font-family:var(--t-mono);font-size:11px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;font-weight:400}

/* Passermarke: kleines Kreuz an Rasterpunkten */
.tf26-03 .tf-pass{position:absolute;width:13px;height:13px;pointer-events:none}
.tf26-03 .tf-pass::before,.tf26-03 .tf-pass::after{content:"";position:absolute;background:var(--tinte);opacity:.55}
.tf26-03 .tf-pass::before{left:6px;top:0;width:1px;height:13px}
.tf26-03 .tf-pass::after{top:6px;left:0;height:1px;width:13px}

/* ---- Kopf ---- */
.tf26-03 .tf-kopf{position:relative;padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(32px,4vw,56px)}
.tf26-03 .tf-kopf .tf-zeile{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;color:var(--grau);border-top:1px solid var(--haar);padding-top:10px}
.tf26-03 .tf-dach{grid-column:1/-1;margin-top:clamp(36px,6vw,88px);color:var(--aktion)}
.tf26-03 h1.tf-titel{grid-column:1/12;margin:.18em 0 0;font-family:var(--t-titel);font-weight:300;font-size:clamp(42px,7.6vw,124px);line-height:.98;letter-spacing:-.025em}
.tf26-03 h1.tf-titel .tf-ziel{font-weight:500}
.tf26-03 .tf-vor{grid-column:1/8;margin-top:clamp(28px,3.4vw,52px);font-size:clamp(19px,1.75vw,26px);line-height:1.42;font-weight:300}
.tf26-03 .tf-autor{grid-column:9/13;align-self:end;color:var(--grau)}
.tf26-03 .tf-kopf .tf-pass.p1{left:calc(var(--rand) - 6px);top:clamp(40px,6vw,96px)}
.tf26-03 .tf-kopf .tf-pass.p2{right:calc(var(--rand) - 6px);top:clamp(40px,6vw,96px)}
@media (min-width:1441px){.tf26-03 .tf-kopf .tf-pass.p1{left:calc((100vw - 1440px)/2 + var(--rand) - 6px)}.tf26-03 .tf-kopf .tf-pass.p2{right:calc((100vw - 1440px)/2 + var(--rand) - 6px)}}

/* ---- Bilder ---- */
.tf26-03 figure{margin:0}
.tf26-03 .tf-voll{margin:0 0 clamp(48px,6vw,88px)}
.tf26-03 .tf-voll img{max-height:78vh;object-fit:cover}
.tf26-03 .tf-bu{color:var(--grau)}
.tf26-03 .tf-voll .tf-bu{margin-top:10px}
.tf26-03 .tf-voll .tf-bu span{grid-column:1/7}

/* ---- Satz: Text in Spalte 5–10, Belege in 1–3 ---- */
.tf26-03 .tf-reihe{margin-bottom:1.1em}
.tf26-03 .tf-reihe > p{grid-column:5/11}
.tf26-03 .tf-reihe > .tf-beleg{grid-column:1/4;grid-row:1;align-self:start;padding-top:.35em}
.tf26-03 .tf-erst > p::first-line{font-weight:500}
.tf26-03 .tf-beleg{border-top:1px solid currentColor;padding-top:8px;color:var(--record)}
.tf26-03 .tf-beleg b{display:block;font-family:var(--t-titel);font-weight:300;font-size:clamp(34px,3.2vw,52px);line-height:1;letter-spacing:-.02em;margin:6px 0 6px;color:var(--tinte)}
.tf26-03 .tf-beleg span{display:block;font-family:var(--t-mono);font-size:11px;line-height:1.45;letter-spacing:.04em}
.tf26-03 .ist-aktion .tf-beleg{color:var(--aktion)}
.tf26-03 .ist-aktion .tf-beleg b{color:var(--aktion)}

/* ---- Abschnitte: Koordinate links, Titel im Satz ---- */
.tf26-03 .tf-abschnitt{position:relative;margin:clamp(56px,7vw,112px) auto clamp(20px,2.4vw,32px)}
.tf26-03 .tf-abschnitt::before{content:"";grid-column:1/-1;grid-row:1;height:1px;background:var(--haar);margin-bottom:14px}
.tf26-03 .tf-abschnitt .tf-koord{grid-column:1/4;grid-row:2;color:var(--record)}
.tf26-03 .tf-abschnitt .tf-koord i{font-style:normal;color:var(--aktion)}
.tf26-03 .tf-abschnitt h2{grid-column:5/12;grid-row:2;margin:0;font-family:var(--t-titel);font-weight:400;font-size:clamp(28px,2.9vw,44px);line-height:1.08;letter-spacing:-.015em}
.tf26-03 .ist-aktion.tf-abschnitt h2,.tf26-03 .ist-aktion .tf-abschnitt h2{color:var(--tinte)}

/* ---- Zitate ---- */
.tf26-03 .tf-zitat{margin:clamp(48px,6vw,96px) auto}
.tf26-03 .tf-zitat blockquote{grid-column:2/12;margin:0;font-family:var(--t-titel);font-weight:300;font-size:clamp(30px,4.1vw,64px);line-height:1.1;letter-spacing:-.02em;text-indent:-.42em}
.tf26-03 .tf-zitat blockquote::first-letter{color:var(--aktion)}
.tf26-03 .tf-zitat .tf-wer{grid-column:2/12;margin-top:18px;color:var(--grau)}
.tf26-03 .tf-zitat--kurz blockquote{grid-column:5/12;font-size:clamp(40px,6.4vw,104px);font-weight:500}

/* ---- Human in / on the Loop ---- */
.tf26-03 .tf-loop{margin:clamp(32px,4vw,56px) auto}
.tf26-03 .tf-loop > div{grid-column:5/11;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--haar);padding-top:18px}
.tf26-03 .tf-loop figure svg{display:block;width:100%;max-width:220px;height:auto;margin:0 0 10px;color:var(--aktion)}
.tf26-03 .tf-loop h3{margin:0 0 4px;font-family:var(--t-titel);font-weight:500;font-size:19px;line-height:1.2}
.tf26-03 .tf-loop p{font-size:15px;line-height:1.5;color:var(--grau)}

/* ---- Bild im Satz ---- */
.tf26-03 .tf-bild{margin:clamp(40px,5vw,72px) auto}
.tf26-03 .tf-bild--rechts img{grid-column:5/13}
.tf26-03 .tf-bild--rechts .tf-bu{grid-column:1/4;grid-row:1;align-self:end}
.tf26-03 .tf-bild--links img{grid-column:1/9}
.tf26-03 .tf-bild--links .tf-bu{grid-column:10/13;align-self:end}

/* Porträt mit Titelzeile (Heft S. 11) */
.tf26-03 .tf-portraet{margin:clamp(56px,7vw,112px) 0}
.tf26-03 .tf-portraet .tf-zeile-gross{grid-column:1/-1;margin-top:clamp(18px,2vw,28px);font-family:var(--t-titel);font-weight:300;font-size:clamp(28px,3.6vw,58px);line-height:1.08;letter-spacing:-.02em}
.tf26-03 .tf-portraet .tf-zeile-gross em{font-style:normal;color:var(--aktion)}
.tf26-03 .tf-portraet .tf-bu{grid-column:1/-1;margin-top:10px}

/* Bild + Zitat (Heft S. 12) */
.tf26-03 .tf-bildzitat{margin:clamp(48px,6vw,96px) auto;align-items:end}
.tf26-03 .tf-bildzitat figure{grid-column:1/6}
.tf26-03 .tf-bildzitat figure .tf-bu{margin-top:10px}
.tf26-03 .tf-bildzitat blockquote{grid-column:7/13;margin:0;font-family:var(--t-titel);font-weight:300;font-size:clamp(22px,2.2vw,34px);line-height:1.24;letter-spacing:-.01em}
.tf26-03 .tf-bildzitat blockquote::before{content:"";display:block;width:56px;height:2px;background:var(--aktion);margin-bottom:22px}

/* ---- Powered-Teil ---- */
.tf26-03 .tf-powered{background:var(--papier-2);padding:1px 0 clamp(48px,6vw,96px);margin-top:clamp(64px,8vw,128px)}
.tf26-03 .tf-powered .tf-hinweis{grid-column:1/-1;margin-top:18px;color:var(--grau)}
.tf26-03 .tf-powered .tf-abschnitt{margin-top:clamp(32px,4vw,56px)}

/* ---- Fuß des Artikels ---- */
.tf26-03 .tf-ende{padding:clamp(48px,6vw,88px) 0 clamp(64px,8vw,120px)}
.tf26-03 .tf-ende .tf-heft{grid-column:5/11;display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:end;border-top:1px solid var(--haar);padding-top:20px}
.tf26-03 .tf-ende .tf-heft img{box-shadow:0 0 0 1px var(--haar)}
.tf26-03 .tf-ende p + p{margin-top:6px}
.tf26-03 .tf-ende a{color:inherit}

/* ---- Leiste Record → Action (nur Bildschirm) ---- */
.tf26-03 .tf-weg{position:fixed;right:var(--rand);bottom:22px;z-index:5;display:flex;align-items:center;gap:10px;color:var(--record);background:rgba(255,255,255,.9);padding:6px 10px;opacity:0;transition:opacity .4s}
.tf26-03 .tf-weg.an{opacity:1}
.tf26-03 .tf-weg .tf-spur{position:relative;width:120px;height:1px;background:var(--haar)}
.tf26-03 .tf-weg .tf-punkt{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--record);transform:translateX(-50%)}
.tf26-03 .tf-weg .tf-a{color:var(--record)}
.tf26-03 .tf-weg.aktion .tf-a{color:var(--aktion)}
.tf26-03 .tf-weg.aktion .tf-punkt{background:var(--aktion)}

/* Belege erscheinen beim Hereinscrollen (nur ohne „Bewegung reduzieren“) */
@media (prefers-reduced-motion:no-preference){
  .tf26-03.js .tf-beleg{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
  .tf26-03.js .tf-beleg.da{opacity:1;transform:none}
}

/* ---- Tablet / Handy ---- */
@media (max-width:1000px){
  .tf26-03 .tf-reihe > p,.tf26-03 .tf-abschnitt h2,.tf26-03 .tf-loop > div,.tf26-03 .tf-ende .tf-heft{grid-column:1/-1}
  .tf26-03 .tf-reihe > .tf-beleg{grid-column:1/-1;grid-row:auto;margin:0 0 14px;display:flex;align-items:baseline;gap:14px;padding-top:8px}
  .tf26-03 .tf-beleg b{margin:0;font-size:34px;flex:none}
  .tf26-03 .tf-abschnitt .tf-koord{grid-column:1/-1;grid-row:2;margin-bottom:8px}
  .tf26-03 .tf-abschnitt h2{grid-row:3}
  .tf26-03 h1.tf-titel,.tf26-03 .tf-vor,.tf26-03 .tf-autor,.tf26-03 .tf-zitat blockquote,.tf26-03 .tf-zitat .tf-wer,.tf26-03 .tf-zitat--kurz blockquote{grid-column:1/-1}
  .tf26-03 .tf-autor{margin-top:18px}
  .tf26-03 .tf-bild--rechts img,.tf26-03 .tf-bild--links img,.tf26-03 .tf-bild--rechts .tf-bu,.tf26-03 .tf-bild--links .tf-bu,.tf26-03 .tf-bildzitat figure,.tf26-03 .tf-bildzitat blockquote{grid-column:1/-1;grid-row:auto}
  .tf26-03 .tf-bild .tf-bu{margin-top:10px}
  .tf26-03 .tf-bildzitat blockquote{margin-top:28px}
  .tf26-03 .tf-weg{display:none}
}
@media (max-width:560px){
  .tf26-03 .tf-loop > div{grid-template-columns:1fr}
  .tf26-03 .tf-kopf .tf-zeile{flex-direction:column;gap:2px}
}

/* Korrekturen Versuch 1: Überschriften dunkel (Grundstil der Website setzt sie hell), Anführung hängend in Akzentfarbe */
.tf26-03 h1,.tf26-03 h2,.tf26-03 h3,.tf26-03 blockquote{color:var(--tinte)}
.tf26-03 .tf-zitat blockquote::first-letter{color:inherit}
.tf26-03 .tf-q{color:var(--aktion)}
.tf26-03 a{color:inherit}
@media (max-width:1000px){
  .tf26-03 .tf-voll .tf-bu span{grid-column:1/-1}
  .tf26-03 .tf-reihe > .tf-beleg{flex-wrap:wrap;row-gap:2px}
  .tf26-03 .tf-beleg span{flex:1 1 160px;min-width:0}
}

/* v34 (Wolfgang 11:25/11:27): gilgamesh.at ist Schaufenster für transform! – Herkunft am Anfang, Weg zum Heft am Ende */
.tf26-03 .tf-herkunft{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,3vw,40px)}
.tf26-03 .tf-herkunft img{width:34px;height:auto;box-shadow:0 0 0 1px var(--haar)}
.tf26-03 .tf-herkunft a{text-decoration:none}
.tf26-03 .tf-herkunft a:hover span{text-decoration:underline}
.tf26-03 .tf-abo{display:inline-block;margin-top:16px;padding:10px 16px;border:1px solid var(--tinte);font-family:var(--t-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.tf26-03 .tf-abo:hover{background:var(--tinte);color:var(--papier)}
.tf26-03 .tf-abo-satz{margin-top:14px;font-size:15px;line-height:1.5;color:var(--grau);max-width:46ch}

/* v35: Zuschreibung beim kurzen Zitat in derselben Spalte wie das Zitat, nicht breiter als 52 Zeichen */
.tf26-03 .tf-zitat--kurz .tf-wer{grid-column:5/12;max-width:52ch;text-transform:none;letter-spacing:.02em;font-size:12px}
.tf26-03 .tf-zitat .tf-wer{max-width:60ch}
@media (max-width:1000px){.tf26-03 .tf-zitat--kurz .tf-wer{grid-column:1/-1}}

/* v36 (Wolfgang 11:47): Abschnittslinien stören den Fließtext – weg. Abschnitte nur noch über Zwischentitel und Koordinate; etwas weniger Abstand, damit der Text weiterfließt. */
.tf26-03 .tf-abschnitt::before{display:none}
.tf26-03 .tf-abschnitt{margin-top:clamp(44px,5vw,80px)}
.tf26-03 .tf-abschnitt .tf-koord{grid-row:1;align-self:baseline;padding-top:.9em}
.tf26-03 .tf-abschnitt h2{grid-row:1}
@media (max-width:1000px){.tf26-03 .tf-abschnitt .tf-koord{grid-row:1;padding-top:0}.tf26-03 .tf-abschnitt h2{grid-row:2}}

/* v37 · weitere Artikel der Ausgabe: Kennung (Powered by / Kommentar), Bild in voller Breite im Text, „Mehr aus dieser Ausgabe“ */
.tf26-03 .tf-kennung{grid-column:9/13;margin-top:10px;color:var(--aktion)}
.tf26-03 .tf-voll--mitte{margin:clamp(40px,5vw,72px) 0}
.tf26-03 .tf-voll--mitte img{max-height:70vh}
.tf26-03 .tf-weiter{list-style:none;margin:10px 0 0;padding:0}
.tf26-03 .tf-weiter li{border-top:1px solid var(--haar);padding:9px 0;font-family:var(--t-titel);font-weight:400;font-size:18px;line-height:1.3}
.tf26-03 .tf-weiter a{text-decoration:none}
.tf26-03 .tf-weiter a:hover{color:var(--aktion)}
.tf26-03 .tf-portraet img{max-height:90vh;object-fit:cover}
@media (max-width:1000px){.tf26-03 .tf-kennung{grid-column:1/-1}}

/* v38: Porträts beim Beschneiden oben verankern, damit der Kopf bleibt */
.tf26-03 .tf-portraet img{object-position:50% 22%}

/* v42 (Wolfgang 25.10.2026, 16:18 „Aufmacher: Stark beschnitten“): Vollbilder werden nicht mehr beschnitten.
   Breite Bilder (Seitenverhältnis ab 1,8 : 1) laufen über die ganze Breite, ohne Höhenbegrenzung.
   Alle anderen stehen ganz, im Raster, linksbündig mit dem Text, höchstens 88 % der Fensterhöhe. */
.tf26-03 .tf-voll--breit img{max-height:none}
.tf26-03 .tf-voll--ganz{max-width:1440px;margin-left:auto;margin-right:auto;padding:0 var(--rand)}
.tf26-03 .tf-voll--ganz img{width:auto;max-width:100%;max-height:88vh;object-fit:contain}
.tf26-03 .tf-voll--ganz .tf-r{padding:0}
.tf26-03 .tf-portraet.tf-voll--breit img{max-height:none}

/* v43 (Wolfgang 25.10.2026, 16:23 „jetzt sind sie schmal“): Vollbilder wieder über die ganze Breite – und trotzdem unbeschnitten.
   Keine Höhenbegrenzung: Ein Bild darf höher sein als das Fenster; man scrollt durch das Bild. */
.tf26-03 .tf-voll--ganz{max-width:none;padding:0}
.tf26-03 .tf-voll--ganz img{width:100%;max-height:none}
.tf26-03 .tf-voll--ganz .tf-r{padding:0 var(--rand)}