/*
  Richtung A „Redaktion / Haltung“, frederikvonderheyden.de, Entwurf 11.11.2026

  Farbe (Regel 1, Herkunft jeder Farbe):
  --signal  #2b4aa6  Anzugblau aus dem Porträt. Gemessen #2A324B (H 225°), Sättigung für die Signalrolle angehoben, Ton beibehalten. Kontrast auf Weiß 7,6:1.
  --tinte   #161a26  Schattenton des Anzugs (gemessen #1F2636), abgedunkelt für Fließtext. Kontrast auf Weiß 17:1.
  --neben   #555c6e  Nebentinte, gleiche Färbung wie die Tinte (H 225°), 6,4:1 auf Weiß.
  --grund   #ffffff  reines Weiß.
  --grau    #eef0f5  kühles Grau im Ton des Anzugs (H 225°, L 95 %), keine Creme.
  --linie   #d3d8e3  Haarlinien, Ton des Anzugs.
  Dunkelmodus: dieselben Töne invertiert, Signal aufgehellt auf #9bb0ee.
  Keine Gold-, Neon- oder Verlaufsfarben. Hautton und Wandbeige des Porträts bewusst nicht verwendet (Nähe zu Creme und Gold).

  Schrift (Regel 3): Schibsted Grotesk (für eine Zeitungsredaktion gezeichnet) für Titel und Bedienung,
  Newsreader (für Lesetext am Bildschirm gezeichnet) nur als Fließtext auf Weiß. Beide selbst gehostet.

  Bewegung (Regel 12): Text setzt sich wie Satz, Zeile für Zeile auf die Grundlinie; Spaltenlinien ziehen sich
  wie die Hilfslinien eines Layouts. Nur mit html.js und ohne prefers-reduced-motion.
*/

@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibstedgrotesk-normal-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibstedgrotesk-normal-latin-ext.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-normal-latin.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-normal-latin-ext.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --grund:#ffffff;--grau:#eef0f5;--tinte:#161a26;--neben:#555c6e;--signal:#2b4aa6;--linie:#d3d8e3;--auf-signal:#ffffff;
  --flaeche:#161a26;--auf-flaeche:#eef0f5;--auf-flaeche-neben:#a9b0c2;
  --grotesk:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --rand:clamp(16px,4.2vw,64px);
  --max:1360px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--grund:#11141c;--grau:#1a1e29;--tinte:#eceef3;--neben:#a3a9b8;--signal:#9bb0ee;--linie:#2e3443;--auf-signal:#11141c;--flaeche:#0b0d13;--auf-flaeche:#eceef3;--auf-flaeche-neben:#a3a9b8;color-scheme:dark}
}
:root[data-theme="dark"]{--grund:#11141c;--grau:#1a1e29;--tinte:#eceef3;--neben:#a3a9b8;--signal:#9bb0ee;--linie:#2e3443;--auf-signal:#11141c;--flaeche:#0b0d13;--auf-flaeche:#eceef3;--auf-flaeche-neben:#a3a9b8;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--grund);scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--grotesk);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--signal)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
h1,h2,h3,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.ueberspringen{position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--grund);padding:12px 16px;z-index:50}
.ueberspringen:focus{left:16px;top:16px}

/* Kopf wie ein Zeitungskopf: Name links, Rubriken rechts */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.marke{font-weight:760;font-size:19px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.rubriken{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:15px}
.rubriken a{text-decoration:none;padding-block:12px}
.rubriken a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;background:var(--signal);color:var(--auf-signal);font-weight:650;font-size:16px;text-decoration:none;border-radius:2px;border:1px solid var(--signal)}
.knopf:hover{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}
.knopf.leise{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf.leise:hover{background:var(--tinte);color:var(--grund)}
.rubriken .knopf{min-height:44px;padding:10px 18px;font-size:15px}
@media (max-width:860px){.rubriken .weg-mobil{display:none}}
@media (max-width:520px){.rubriken .knopf{display:none}.marke{font-size:17px}}

/* Titelseite */
.titel{position:relative;padding-block:clamp(40px,7vw,104px) clamp(56px,8vw,120px);overflow:hidden}
.spalten{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.spalten i{border-left:1px solid var(--linie);transform-origin:top}
.spalten i:first-child{border-left-color:transparent}
.titel-raster{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);align-items:end}
.titel-text{grid-column:1 / span 7}
.unterzeile{font-size:16px;color:var(--neben);margin-bottom:clamp(20px,3vw,40px)}
.unterzeile b{color:var(--tinte);font-weight:650}
h1.gross{font-size:clamp(46px,7.6vw,118px);line-height:.94;letter-spacing:-.045em;font-weight:780}
h1.gross .zeile{display:block;overflow:hidden;padding-bottom:.06em}
h1.gross .zeile > span{display:block}
h1.gross em{font-style:normal;color:var(--signal)}
.vorspann{font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);line-height:1.42;max-width:34em;margin-top:clamp(24px,3vw,40px)}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.titel-bild{grid-column:9 / span 4}
.titel-bild img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:4% 20%;filter:grayscale(1) contrast(1.04)}
.bildzeile{font-size:14px;line-height:1.45;color:var(--neben);margin-top:12px;max-width:30em}
.bildzeile b{color:var(--tinte);font-weight:650}
@media (max-width:960px){
  .titel-text{grid-column:1 / -1}
  .titel-bild{grid-column:1 / span 8;margin-top:48px}
  .spalten{display:none}
}
@media (max-width:560px){.titel-bild{grid-column:1 / -1}}

/* Abschnitte */
.abschnitt{padding-block:clamp(64px,9vw,136px);border-top:1px solid var(--linie)}
.abschnitt.grau{background:var(--grau);border-top:0}
.kopfzeile{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);margin-bottom:clamp(36px,5vw,72px)}
.kopfzeile .ressort{grid-column:1 / span 3;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--neben);padding-top:.5em}
.kopfzeile h2{grid-column:4 / span 9;font-size:clamp(34px,4.6vw,68px);line-height:1;letter-spacing:-.035em;font-weight:760;max-width:15em}
@media (max-width:860px){.kopfzeile .ressort,.kopfzeile h2{grid-column:1 / -1}.kopfzeile .ressort{padding:0 0 12px}}

/* Thesen in Übergröße */
.thesen{counter-reset:these}
.these{display:grid;grid-template-columns:repeat(12,1fr);gap:16px clamp(16px,2vw,32px);padding-block:clamp(28px,3.4vw,48px);border-top:1px solid var(--tinte);position:relative}
.these:last-child{border-bottom:1px solid var(--tinte)}
.these .nr{grid-column:1 / span 1;font-weight:650;font-size:18px;color:var(--signal);padding-top:.6em}
.these h3{grid-column:2 / span 7;font-size:clamp(36px,5.6vw,84px);line-height:.98;letter-spacing:-.04em;font-weight:760}
.these p{grid-column:9 / span 4;font-family:var(--serif);font-size:19px;line-height:1.5;align-self:end}
@media (max-width:860px){.these .nr{grid-column:1 / -1;padding:0}.these h3,.these p{grid-column:1 / -1}}

/* Fallstudien als Reportage */
.fall{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);padding-block:clamp(40px,5vw,72px)}
.fall + .fall{border-top:1px solid var(--linie)}
.fall-bild{grid-column:1 / span 8}
.fall-bild img,.fall-bild video{width:100%;background:var(--grau);border:1px solid var(--linie)}
.fall-text{grid-column:9 / span 4;align-self:start}
.fall.rechts .fall-bild{grid-column:5 / span 8;grid-row:1}
.fall.rechts .fall-text{grid-column:1 / span 4;grid-row:1}
.fall.schmal .fall-bild{grid-column:2 / span 4}
.fall.schmal .fall-text{grid-column:7 / span 5;align-self:center}
.fall-marke{font-size:15px;font-weight:650;color:var(--signal);margin-bottom:14px}
.fall h3{font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.025em;font-weight:720;margin-bottom:22px}
.fall dl{font-family:var(--serif);font-size:18px;line-height:1.5}
.fall dt{font-family:var(--grotesk);font-size:14px;font-weight:650;color:var(--neben);margin-top:18px}
.fall dd{margin-top:2px}
.fall .weiter{display:inline-block;margin-top:26px;font-weight:650;padding-block:10px}
@media (max-width:960px){
  .fall-bild,.fall.rechts .fall-bild,.fall.schmal .fall-bild{grid-column:1 / -1;grid-row:auto}
  .fall-text,.fall.rechts .fall-text,.fall.schmal .fall-text{grid-column:1 / -1;grid-row:auto;margin-top:28px}
  .fall.schmal .fall-bild{max-width:420px}
}

/* Videoplatz: Poster, Start nur auf Klick */
.film{position:relative}
.film .start{position:absolute;left:0;bottom:0;display:none;align-items:center;gap:12px;min-height:56px;padding:14px 22px;border:0;border-radius:2px;background:var(--tinte);color:var(--grund);font:650 16px/1 var(--grotesk);cursor:pointer}
.film .start::before{content:"";width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.js .film .start{display:inline-flex}
.js .film.laeuft .start{display:none}
.film .start:hover{background:var(--signal);color:var(--auf-signal)}

/* System: eine Zahl, ein Satz, darunter ein gesetztes Register */
.system{background:var(--flaeche);color:var(--auf-flaeche);border-top:0}
.system .kopfzeile .ressort{color:var(--auf-flaeche-neben)}
.zahl-satz{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);align-items:end}
.zahl-satz .riesenzahl{grid-column:1 / span 6;font-size:clamp(120px,19vw,300px);line-height:.8;letter-spacing:-.06em;font-weight:800}
.zahl-satz .riesenzahl small{font-size:.42em;letter-spacing:-.02em;font-weight:700}
.zahl-satz p{grid-column:7 / span 6;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.35;padding-bottom:.6em}
.register{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--auf-flaeche-neben)}
.register div{padding:20px 16px 0 0}
.register dt{font-size:clamp(28px,3vw,44px);font-weight:720;letter-spacing:-.03em;line-height:1}
.register dd{font-size:15px;color:var(--auf-flaeche-neben);margin-top:8px}
.quelle{font-size:14px;color:var(--auf-flaeche-neben);margin-top:28px}
.system a{color:var(--auf-flaeche)}
@media (max-width:860px){.zahl-satz .riesenzahl,.zahl-satz p{grid-column:1 / -1}.register{grid-template-columns:repeat(2,1fr)}.register div{padding-bottom:12px}}

/* Drei Wege: Spalten wie im Satzspiegel */
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,2vw,32px)}
.weg{border-top:3px solid var(--tinte);padding-top:22px}
.weg h3{font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em;font-weight:720;margin-bottom:14px}
.weg p{font-family:var(--serif);font-size:18px;line-height:1.5}
@media (max-width:860px){.wege{grid-template-columns:1fr;gap:40px}}

/* Porträt des Autors */
.autor{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px)}
.autor-text{grid-column:4 / span 6}
.autor-text p{font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.55}
.autor-text p + p{margin-top:1em}
.autor-text p:first-child::first-letter{font-family:var(--grotesk);font-weight:780;float:left;font-size:4.1em;line-height:.82;padding:.06em .08em 0 0;color:var(--signal)}
.autor-rand{grid-column:10 / span 3;font-size:15px;line-height:1.5}
.autor-rand h3{font-size:15px;font-weight:650;color:var(--neben);margin:0 0 8px}
.autor-rand li{padding-block:8px;border-top:1px solid var(--linie)}
.autor-rand ul + h3{margin-top:28px}
.buch{grid-column:1 / span 3}
.buch img{width:100%;max-width:240px;border:1px solid var(--linie)}
@media (max-width:960px){.buch{grid-column:1 / span 4}.autor-text{grid-column:5 / -1}.autor-rand{grid-column:1 / -1;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}}
@media (max-width:600px){.buch,.autor-text{grid-column:1 / -1}.buch{margin-bottom:32px}.buch img{max-width:200px}.autor-rand{grid-template-columns:1fr}}

/* Kontakt */
.kontakt{padding-block:clamp(72px,10vw,150px);border-top:1px solid var(--linie)}
.kontakt h2{font-size:clamp(40px,6.4vw,100px);line-height:.96;letter-spacing:-.045em;font-weight:780;max-width:12em}
.kontakt p{font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);line-height:1.45;max-width:32em;margin-top:28px}

/* Fuß */
.fuss{border-top:1px solid var(--tinte);padding-block:32px 48px;font-size:15px;color:var(--neben)}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss a{padding-block:10px;display:inline-block}

/* Projektindex */
.index-kopf{padding-block:clamp(40px,6vw,96px) clamp(40px,5vw,72px)}
.index-kopf h1{font-size:clamp(44px,7vw,110px);line-height:.94;letter-spacing:-.045em;font-weight:780;max-width:11em}
.index-kopf .vorspann{margin-top:28px}
.inhalt{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:36px;font-size:15px}
.inhalt a{padding-block:10px}
.gruppe{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--tinte)}
.gruppe-kopf{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);margin-bottom:36px}
.gruppe-kopf h2{grid-column:1 / span 6;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.03em;line-height:1.02;font-weight:760}
.gruppe-kopf p{grid-column:8 / span 5;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--neben)}
@media (max-width:860px){.gruppe-kopf h2,.gruppe-kopf p{grid-column:1 / -1}.gruppe-kopf p{margin-top:12px}}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:48px clamp(16px,2vw,32px)}
@media (max-width:960px){.raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.raster{grid-template-columns:1fr;gap:40px}}
.projekt figure{aspect-ratio:16/10;overflow:hidden;background:var(--grau);border:1px solid var(--linie)}
.projekt figure img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.projekt .satzflaeche{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.6vw,24px)}
.projekt .satzflaeche b{font-size:clamp(26px,2.4vw,36px);line-height:1;letter-spacing:-.035em;font-weight:780;max-width:9em}
.projekt .satzflaeche span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--neben)}
.projekt .satzflaeche.dunkel{background:var(--flaeche);color:var(--auf-flaeche);border-color:var(--flaeche)}
.projekt .satzflaeche.dunkel span{color:var(--auf-flaeche-neben)}
.projekt .satzflaeche em{font-style:normal;color:var(--signal)}
.projekt .satzflaeche.dunkel em{color:#9bb0ee}
.projekt .meta{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--neben);margin-top:14px;padding-top:10px;border-top:1px solid var(--linie)}
.projekt h3{font-size:21px;line-height:1.2;letter-spacing:-.015em;font-weight:700;margin-top:8px}
.projekt h3 a{text-decoration:none}
.projekt h3 a:hover{text-decoration:underline}
.projekt p{font-family:var(--serif);font-size:17px;line-height:1.45;margin-top:6px;color:var(--neben)}
.projekt.gross{grid-column:span 2}
.projekt.gross figure{aspect-ratio:16/8.4}
@media (max-width:600px){.projekt.gross{grid-column:auto}.projekt.gross figure{aspect-ratio:16/10}}

/* Projektdetail */
.detail-kopf{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px);padding-block:clamp(36px,5vw,80px) clamp(32px,4vw,56px)}
.pfad{grid-column:1 / -1;font-size:15px;color:var(--neben);margin-bottom:28px}
.pfad a{padding-block:10px;display:inline-block}
.detail-kopf h1{grid-column:1 / span 9;font-size:clamp(44px,7vw,112px);line-height:.94;letter-spacing:-.045em;font-weight:780}
.detail-kopf .vorspann{grid-column:1 / span 7}
.eckdaten{grid-column:9 / span 4;align-self:end;font-size:15px}
.eckdaten div{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-top:1px solid var(--linie)}
.eckdaten dt{color:var(--neben)}
.eckdaten dd{font-weight:650;text-align:right}
@media (max-width:960px){.detail-kopf h1,.detail-kopf .vorspann,.eckdaten{grid-column:1 / -1}.eckdaten{margin-top:36px}}
.hauptbild img{width:100%;border:1px solid var(--linie)}
.spalten-text{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,2vw,32px)}
.spalten-text h3{font-size:15px;font-weight:650;color:var(--signal);padding-top:14px;border-top:3px solid var(--tinte);margin-bottom:12px}
.spalten-text p{font-family:var(--serif);font-size:19px;line-height:1.5}
@media (max-width:860px){.spalten-text{grid-template-columns:1fr;gap:36px}}
.funktionen{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(16px,2vw,32px)}
.funktionen li{padding-block:24px;border-top:1px solid var(--linie)}
.funktionen h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.15;font-weight:720;margin-bottom:10px}
.funktionen p{font-family:var(--serif);font-size:18px;line-height:1.5;max-width:32em}
@media (max-width:760px){.funktionen{grid-template-columns:1fr}}
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:start}
.galerie figure:first-child{grid-column:1 / span 8}
.galerie figure:last-child{grid-column:9 / span 4}
.galerie img{width:100%;border:1px solid var(--linie)}
.galerie figcaption,.film-zeile{font-size:14px;color:var(--neben);margin-top:10px;line-height:1.45}
@media (max-width:760px){.galerie figure:first-child,.galerie figure:last-child{grid-column:1 / -1}.galerie figure:last-child{max-width:300px}}
.film-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,32px)}
.film-raster .film-wrap{grid-column:1 / span 9}
.film-raster video{width:100%;border:1px solid var(--linie);background:var(--grau)}
.film-raster .film-text{grid-column:10 / span 3;font-family:var(--serif);font-size:18px;line-height:1.5;align-self:end}
@media (max-width:960px){.film-raster .film-wrap,.film-raster .film-text{grid-column:1 / -1}.film-raster .film-text{margin-top:20px}}

/* Bewegung: nur mit JS, nie bei reduzierter Bewegung */
@media (prefers-reduced-motion:no-preference){
  .js h1.gross .zeile > span{transform:translateY(108%);animation:setzen .9s cubic-bezier(.2,.7,.1,1) forwards}
  .js h1.gross .zeile:nth-child(2) > span{animation-delay:.12s}
  .js h1.gross .zeile:nth-child(3) > span{animation-delay:.24s}
  .js h1.gross .zeile:nth-child(4) > span{animation-delay:.36s}
  .js .spalten i{transform:scaleY(0);animation:ziehen 1.2s cubic-bezier(.3,.6,.1,1) forwards}
  .js .spalten i:nth-child(2){animation-delay:.1s}
  .js .spalten i:nth-child(3){animation-delay:.2s}
  .js .spalten i:nth-child(4){animation-delay:.3s}
  .js .vorspann.erst,.js .aktionen.erst,.js .titel-bild{opacity:0;animation:auftauchen .7s ease-out .5s forwards}
  .js .linie-zieht{position:relative}
  .js .linie-zieht::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.3,.6,.1,1)}
  .js .linie-zieht.ist-da::before{transform:scaleX(1)}
  .js .setzt h3{clip-path:inset(0 0 100% 0);transform:translateY(.3em);transition:clip-path .8s cubic-bezier(.2,.7,.1,1),transform .8s cubic-bezier(.2,.7,.1,1)}
  .js .setzt.ist-da h3{clip-path:inset(0 0 -10% 0);transform:none}
}
@keyframes setzen{to{transform:none}}
@keyframes ziehen{to{transform:none}}
@keyframes auftauchen{to{opacity:1}}
.projekt figure.hoch img{object-fit:contain;object-position:50% 50%;padding:12px}