/* Artikel/Projekt – übernommen aus entwuerfe/wiener-looping.html (Referenz 06.11.2026) */

/* Artikelseite im Zeitungsstil der Startseite: Zeitungskopf, Schlagzeile, Text und Bilder im Wechsel wie im Original */
:root{--papier:#fcfbf8;--tinte:#111;--grau:#6d6a64;--linie:#dcd9d2;--gold:#b08a3e;--rand:44px;
 --titel:"Playfair Display",Georgia,serif;--sans:"Jost",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--papier)}
body{color:var(--tinte);font:300 18px/1.7 var(--sans)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
.et{font:500 12.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.gold{color:var(--gold)}
.rahmen{max-width:1440px;margin:0 auto;padding:0 var(--rand);border-left:1px solid var(--linie);border-right:1px solid var(--linie)}

/* Zeitungskopf wie auf der Startseite */
.kopf{text-align:center;padding-top:96px}
.kopf .rad{width:min(200px,30vw);height:auto;margin:0 auto -14px;mix-blend-mode:multiply}
.kopf .zeile1{display:flex;justify-content:space-between;align-items:center;height:44px;margin-top:-140px;margin-bottom:96px}
.kopf .zeile1 .gold{display:flex;align-items:center;gap:16px}
.kopf .zeile1 .gold::after{content:"";width:60px;border-top:1px solid var(--gold)}
.kopf .zeile1 a:hover{color:var(--gold)}
.kopf .schrift{display:block;width:min(480px,48%);height:auto;margin:0 auto;mix-blend-mode:multiply}
.kopf .motto{display:flex;align-items:center;gap:22px;justify-content:center;margin-top:6px;font:500 11px var(--sans);letter-spacing:.5em}
.kopf .motto::before,.kopf .motto::after{content:"";width:min(150px,11vw);border-top:1px solid var(--tinte)}
.kopf .balken{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:10px;padding:8px 0 7px;font-size:11px;border-top:1px solid var(--linie);border-bottom:3px double var(--tinte)}
.kopf .balken span:first-child{text-align:left}
.kopf .balken nav{display:flex;gap:26px}
.kopf .balken nav a:hover{color:var(--gold)}
.kopf .balken .rechts{text-align:right}

/* Schmale Leiste, sobald der Kopf weg ist; goldener Lesefortschritt */
.leiste{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(252,251,248,.97);box-shadow:0 1px 0 var(--linie);transform:translateY(-100%);transition:transform .35s}
.leiste.da{transform:none}
.leiste .rahmen{display:flex;align-items:center;justify-content:space-between;height:58px;border:0}
.leiste img{height:20px;width:auto;mix-blend-mode:multiply}
.leiste nav{display:flex;gap:30px}
.leiste nav a:hover{color:var(--gold)}
.fortschritt{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold)}

/* Schlagzeile */
.titelkopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:60px;padding:60px 0 34px;border-bottom:1px solid var(--tinte);align-items:end}
.titelkopf .et{display:block;margin-bottom:16px}
.titelkopf h1{font:400 clamp(56px,7vw,112px)/.92 var(--titel);letter-spacing:-.02em}
.titelkopf h1 i{font-style:italic}
.titelkopf .vorspann{font:400 italic clamp(21px,1.7vw,25px)/1.45 var(--titel)}
.titelkopf .zeile{display:flex;gap:26px;margin-top:22px;padding-top:12px;border-top:1px solid var(--linie);font-size:11px;color:var(--grau)}
.aufmacherbild{margin-top:34px}
.aufmacherbild img{aspect-ratio:21/9;object-fit:cover;object-position:50% 60%}

/* Magazin: Textspalte schmal und ruhig, Bilder groß, randlos oder versetzt */
.artikel{padding:40px 0 20px}
.artikel .spalte{max-width:640px;margin:0 auto 70px;font-size:19px;line-height:1.78}
.artikel .spalte p+p{margin-top:1.1em}
.artikel .eroeffnung .auf{font:400 26px/1.45 var(--titel)}
.artikel .kap .auf::first-line{text-transform:uppercase;letter-spacing:.08em;font-weight:400}
.artikel .eroeffnung{margin-top:70px}
.artikel .eroeffnung .auf::first-letter{float:left;font:400 108px/.78 var(--titel);color:var(--gold);margin:10px 16px 0 0}
.artikel .rubrik{display:block;text-align:center;color:var(--gold);margin-bottom:34px}
.artikel .rubrik::after{content:"";display:block;width:1px;height:46px;background:var(--gold);margin:16px auto 0}
.artikel .zwei{max-width:1040px;columns:2;column-gap:64px;column-rule:1px solid var(--linie)}
.artikel .zwei .auf{column-span:all;max-width:760px;margin:0 auto 1.4em;text-align:center}
.artikel .zwei p{break-inside:avoid-column}
.artikel .schluss p:last-child::after{content:"";display:inline-block;width:.6em;height:.6em;background:var(--gold);margin-left:.4em;vertical-align:.05em}
figure{position:relative;margin:0 0 70px}
figure img{width:100%;height:100%;object-fit:cover}
figcaption{position:absolute;right:0;bottom:-24px;font-size:10.5px;color:var(--grau)}
figcaption::before{content:"Fig. "}
.vollbild{width:100vw;margin-left:calc(50% - 50vw);height:min(92vh,980px)}
.vollbild figcaption{right:var(--rand)}
.vollbild.hoch{height:min(100vh,1100px)}
.vollbild.dunkel{height:auto;background:#000}
.vollbild.dunkel img{height:auto;max-height:100vh;object-fit:contain}
.breit{max-width:1180px;margin-left:auto;margin-right:auto}
.paar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:90px}
.paar figure{margin:0}
.versetzt .gross{grid-column:1/9;aspect-ratio:3/2}
.versetzt .klein{grid-column:9/13;margin-top:180px;aspect-ratio:3/4}
.versetzt.gegen .gross{grid-column:5/13;grid-row:1}
.versetzt.gegen .klein{grid-column:1/5;grid-row:1;margin-top:0;align-self:end}
.unten{align-items:end}
.unten .gross{grid-column:2/9;aspect-ratio:4/3}
.unten .klein{grid-column:9/13;aspect-ratio:4/5}
.seite{align-items:center}
.seite .mittel{grid-column:1/7;aspect-ratio:4/5}
.seite .neben{grid-column:8/13;max-width:none;margin:0}
.kapitel{text-align:center;margin:130px auto 60px;max-width:1100px}
.kapitel .et{color:var(--gold)}
.kapitel h2{font:400 clamp(60px,8.5vw,140px)/.92 var(--titel);letter-spacing:-.025em;margin-top:22px}
.kapitel h2 i{font-style:italic}
.zitat{max-width:980px;margin:110px auto;text-align:center;font:400 italic clamp(34px,4.2vw,64px)/1.12 var(--titel);letter-spacing:-.01em}
.zitat::before,.zitat::after{content:"";display:block;width:60px;margin:0 auto;border-top:1px solid var(--gold)}
.zitat::before{margin-bottom:40px}.zitat::after{margin-top:40px}
.ende{max-width:880px;margin:0 auto}
/* Schluss: Autor und nächste Geschichten */
.autor{display:grid;grid-template-columns:110px 1fr;gap:28px;align-items:center;margin-top:70px!important;padding:30px 0;border-top:1px solid var(--tinte);border-bottom:1px solid var(--linie)}
.autor img{width:110px;height:110px;border-radius:50%;object-fit:cover}
.autor b{display:block;font:400 26px/1.2 var(--titel)}
.autor p{margin:6px 0 0!important;font-size:16px;color:#444}
.autor .pfeil{display:inline-flex;gap:12px;margin-top:14px;border-bottom:1px solid var(--gold);padding-bottom:5px}
.autor .pfeil::after{content:"→";color:var(--gold);letter-spacing:0}
.weiter{padding:90px var(--rand) 0;max-width:1180px;margin:0 auto}
.weiter .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double var(--tinte);padding-bottom:10px;margin-bottom:34px}
.weiter .kopfzeile h3{font:500 22px/1 var(--titel);text-transform:uppercase;letter-spacing:.1em}
.weiter .zwei{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.weiter .foto{aspect-ratio:3/2;overflow:hidden;margin-bottom:18px}
.weiter .foto img{height:100%;object-fit:cover;transition:transform .6s}
.weiter a:hover img{transform:scale(1.03)}
.weiter h4{font:400 32px/1.1 var(--titel);margin-top:8px}
.weiter p{font-size:16px;color:#444;margin-top:8px}
footer{margin-top:120px;background:var(--tinte);color:#e9e4d8;padding:60px var(--rand) 34px;text-align:center}
footer .gross{font:400 clamp(30px,3.6vw,52px)/1.1 var(--titel);color:#fff}
footer .gross a{border-bottom:1px solid #fff}
footer .unten{margin-top:50px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #333;padding-top:14px;color:#999}


@media(max-width:900px){
 :root{--rand:18px}
 body{font-size:17px}
 .rahmen{border:0}
 .kopf{padding-top:70px}
 .kopf .rad{width:26vw;margin-bottom:-8px}
 .kopf .zeile1{margin-top:-104px;margin-bottom:70px;height:34px}
 .kopf .zeile1 .gold::after{display:none}
 .kopf .schrift{width:62%}
 .kopf .motto{font-size:8px;letter-spacing:.36em;gap:10px}
 .kopf .balken{grid-template-columns:1fr 1fr;font-size:9.5px}
 .kopf .balken nav{display:none}
 .leiste nav a:not(:last-child){display:none}
 .titelkopf{grid-template-columns:1fr;row-gap:22px;padding-top:40px}
 .titelkopf .zeile{flex-wrap:wrap;gap:6px 18px}
 .aufmacherbild img{aspect-ratio:4/3}
 .artikel .spalte{font-size:17.5px;margin-bottom:50px}
 .artikel .eroeffnung .auf{font-size:21px}
 .artikel .eroeffnung .auf::first-letter{font-size:80px}
 .artikel .zwei{columns:1}
 .artikel .zwei .auf{text-align:left}
 .vollbild,.vollbild.hoch{height:70vh}
 .vollbild.dunkel{height:auto}
 .paar{grid-template-columns:1fr;row-gap:44px;margin-bottom:60px}
 .paar figure,.paar .spalte{grid-column:1!important;grid-row:auto!important;margin:0!important}
 .versetzt .klein{width:72%;justify-self:end}
 .kapitel{margin:90px auto 40px}
 .zitat{margin:70px auto}
 .weiter .zwei{grid-template-columns:1fr}
 .autor{grid-template-columns:80px 1fr;gap:18px}
 .autor img{width:80px;height:80px}
}
/* Einstieg: schmaler Zeitungskopf (scrollt mit weg), darunter ein schmaleres Titelbild mit der Schlagzeile */
.kopf{background:var(--papier);padding-top:16px}
.kopf .rad,.kopf .zeile1,.aufmacherbild,.leiste{display:none}
.kopf .schrift{width:min(300px,30%)}
.kopf .motto{font-size:9px;margin-top:4px}
.kopf .motto::before,.kopf .motto::after{width:min(110px,8vw)}
.kopf .balken{margin-top:8px;padding:6px 0 5px}
.banner{position:relative;height:62vh;min-height:420px;max-height:700px;margin-top:22px;color:#fff;overflow:hidden;background:#222}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 100%)}
.banner .text{position:absolute;z-index:1;left:36px;right:36px;bottom:40px}
.banner .et{display:block;margin-bottom:14px}
.banner h1{font:400 clamp(56px,7.5vw,120px)/.92 var(--titel);letter-spacing:-.02em}
.banner h1 i{font-style:italic}
.titelkopf{padding-top:40px}
.titelkopf>div:first-child{display:none}
.titelkopf>div:last-child{grid-column:1/-1;max-width:880px}
@media(max-width:900px){.kopf{padding-top:12px}.kopf .schrift{width:46%}.kopf .motto{font-size:7.5px}
 .banner{height:56vh;min-height:360px;margin-top:16px}.banner .text{left:18px;right:18px;bottom:24px}}
/* Der obere Teil (Kopf, Titelbild, Einleitung) fährt nach oben weg und legt das erste Bild bildschirmfüllend frei */
.enthuellen{position:relative}
.unterbild{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#111}
.unterbild img{width:100%;height:100%;object-fit:cover}
.unterbild .et{position:absolute;right:var(--rand);bottom:18px;color:#fff;font-size:10.5px}
.unterbild .et::before{content:"Fig. "}
.papier{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;min-height:100vh;min-height:100svh;background:var(--papier);padding-bottom:50px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.luft{height:75vh;height:75svh}
/* Der Artikel schiebt sich über das stehende Bild, sobald die Zeitung zu etwa 75 % weg ist */
.ueber{position:relative;z-index:2;background:var(--papier);box-shadow:0 -30px 60px rgba(0,0,0,.35)}
/* Vierspalter wie eine Zeitungsseite: Schlagzeile mittig, Text – Bild über zwei Spalten – Text, unten fünf Kennzahlen */
.v4{padding:46px 0 10px}
.v4 h1{text-align:center;font:400 clamp(70px,9vw,140px)/.95 var(--titel);letter-spacing:-.025em}
.v4 h1 i{font-style:italic}
.v4-deck{max-width:980px;margin:18px auto 0;text-align:center;font:500 19px/1.45 var(--sans)}
.v4-von{text-align:center;margin-top:12px;font-size:11px;color:var(--grau)}
.v4-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:34px;margin-top:34px;padding-top:24px;border-top:1px solid var(--tinte)}
.v4-sp{font-size:16px;line-height:1.55;text-align:justify;hyphens:auto;-webkit-hyphens:auto;position:relative}
.v4-sp p+p{margin-top:.7em;text-indent:1.2em}
.v4-sp .et{display:block;margin-bottom:10px}
.v4-erste p:first-of-type::first-letter{float:left;font:400 94px/.78 var(--titel);margin:6px 10px 0 0}
.v4-bild{grid-column:2/4;margin:0}
.v4-bild img{aspect-ratio:4/5;object-fit:cover}
.v4-bild figcaption{text-align:center;font-size:12.5px;margin-top:8px;color:var(--grau)}
.v4-sp:last-child::before,.v4-erste::after{content:"";position:absolute;top:0;bottom:0;border-left:1px solid var(--linie)}
.v4-sp:last-child::before{left:-17px}.v4-erste::after{right:-17px}
.v4-zahlen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:34px;padding-top:26px;border-top:3px double var(--tinte)}
.v4-zahlen div{text-align:center;padding:0 14px}
.v4-zahlen div+div{border-left:1px solid var(--linie)}
.v4-zahlen b{display:block;font:400 clamp(40px,4vw,60px)/1 var(--titel)}
.v4-zahlen span{display:block;font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.v4-zahlen p{font:400 italic 19px/1.25 var(--titel);margin-top:10px}
@media(max-width:900px){
 .v4-raster{grid-template-columns:1fr;row-gap:24px}
 .v4-bild{grid-column:1;order:-1}
 .v4-sp::before,.v4-sp::after{display:none}
 .v4-zahlen{grid-template-columns:1fr 1fr;row-gap:24px}
 .v4-zahlen div+div{border-left:0}
}
/* Schriftbild (06.11.2026): Überschriften Playfair Display, Fließtext Jost 350, kleine Zeilen Jost 500 */
.v4-sp,.artikel .spalte,.artikel .spalte p,.r div.txt,.autor p{font-family:var(--sans);font-weight:350}
.artikel .eroeffnung .auf{font-family:var(--titel);font-weight:400}
.v4-deck{font-family:var(--sans);font-weight:500}
.v4-sp{font-size:16.5px;line-height:1.6}
.artikel .spalte,.r div.txt{font-size:19px;line-height:1.7}


/* Laptop 90 %: Schrift und Abstände 10 % kleiner (automatisch aus den Regeln oben erzeugt) */
@media(min-width:901px){
/* Artikelseite im Zeitungsstil der Startseite: Zeitungskopf, Schlagzeile, Text und Bilder im Wechsel wie im Original */
:root{--rand:39.6px}
body{font:300 16.2px/1.7 var(--sans)}
.et{font:500 11.25px/1.3 var(--sans)}
.rahmen{max-width:1296px}
/* Zeitungskopf wie auf der Startseite */
.kopf{padding-top:86.4px}
.kopf .rad{width:min(180px,27vw)}
.kopf .zeile1{height:39.6px;margin-bottom:86.4px}
.kopf .zeile1 .gold{gap:14.4px}
.kopf .zeile1 .gold::after{width:54px}
.kopf .schrift{width:min(432px,48%)}
.kopf .motto{gap:19.8px;margin-top:5.4px;font:500 9.9px var(--sans)}
.kopf .motto::before,.kopf .motto::after{width:min(135px,9.9vw)}
.kopf .balken{margin-top:9px;padding:7.2px 0 6.3px;font-size:9.9px}
.kopf .balken nav{gap:23.4px}
.leiste .rahmen{height:52.2px}
.leiste img{height:18px}
.leiste nav{gap:27px}
/* Schlagzeile */
.titelkopf{column-gap:54px;padding:54px 0 30.6px}
.titelkopf .et{margin-bottom:14.4px}
.titelkopf h1{font:400 clamp(50.4px,6.3vw,100.8px)/.92 var(--titel)}
.titelkopf .vorspann{font:400 italic clamp(18.9px,1.53vw,22.5px)/1.45 var(--titel)}
.titelkopf .zeile{gap:23.4px;margin-top:19.8px;padding-top:10.8px;font-size:9.9px}
.aufmacherbild{margin-top:30.6px}
/* Magazin: Textspalte schmal und ruhig, Bilder groß, randlos oder versetzt */
.artikel{padding:36px 0 18px}
.artikel .spalte{max-width:576px;margin:0 auto 63px;font-size:17.1px}
.artikel .eroeffnung .auf{font:400 23.4px/1.45 var(--titel)}
.artikel .eroeffnung{margin-top:63px}
.artikel .eroeffnung .auf::first-letter{font:400 97.2px/.78 var(--titel);margin:9px 14.4px 0 0}
.artikel .rubrik{margin-bottom:30.6px}
.artikel .rubrik::after{height:41.4px;margin:14.4px auto 0}
.artikel .zwei{max-width:936px;column-gap:57.6px}
.artikel .zwei .auf{max-width:684px}
figure{margin:0 0 63px}
figcaption{font-size:9.45px}
.vollbild{width:90vw;margin-left:calc(50% - 45vw);height:min(92vh,882px)}
.vollbild.hoch{height:min(100vh,990px)}
.breit{max-width:1062px}
.paar{column-gap:21.6px;margin-bottom:81px}
.versetzt .klein{margin-top:162px}
.kapitel{margin:117px auto 54px;max-width:990px}
.kapitel h2{font:400 clamp(54px,7.65vw,126px)/.92 var(--titel);margin-top:19.8px}
.zitat{max-width:882px;margin:99px auto;font:400 italic clamp(30.6px,3.78vw,57.6px)/1.12 var(--titel)}
.zitat::before,.zitat::after{width:54px}
.zitat::before{margin-bottom:36px}
.zitat::after{margin-top:36px}
.ende{max-width:792px}
/* Schluss: Autor und nächste Geschichten */
.autor{gap:25.2px;margin-top:63px!important;padding:27px 0}
.autor img{width:99px;height:99px}
.autor b{font:400 23.4px/1.2 var(--titel)}
.autor p{margin:5.4px 0 0!important;font-size:14.4px}
.autor .pfeil{gap:10.8px;margin-top:12.6px;padding-bottom:4.5px}
.weiter{padding:81px var(--rand) 0;max-width:1062px}
.weiter .kopfzeile{padding-bottom:9px;margin-bottom:30.6px}
.weiter .kopfzeile h3{font:500 19.8px/1 var(--titel)}
.weiter .zwei{gap:36px}
.weiter .foto{margin-bottom:16.2px}
.weiter h4{font:400 28.8px/1.1 var(--titel);margin-top:7.2px}
.weiter p{font-size:14.4px;margin-top:7.2px}
footer{margin-top:108px;padding:54px var(--rand) 30.6px}
footer .gross{font:400 clamp(27px,3.24vw,46.8px)/1.1 var(--titel)}
footer .unten{margin-top:45px;gap:10.8px;padding-top:12.6px}
/* Einstieg: schmaler Zeitungskopf (scrollt mit weg), darunter ein schmaleres Titelbild mit der Schlagzeile */
.kopf{padding-top:14.4px}
.kopf .schrift{width:min(270px,30%)}
.kopf .motto{font-size:8.1px;margin-top:3.6px}
.kopf .motto::before,.kopf .motto::after{width:min(99px,7.2vw)}
.kopf .balken{margin-top:7.2px;padding:5.4px 0 4.5px}
.banner{min-height:378px;max-height:630px;margin-top:19.8px}
.banner .text{left:32.4px;right:32.4px;bottom:36px}
.banner .et{margin-bottom:12.6px}
.banner h1{font:400 clamp(50.4px,6.75vw,108px)/.92 var(--titel)}
.titelkopf{padding-top:36px}
.titelkopf>div:last-child{max-width:792px}
.unterbild .et{bottom:16.2px;font-size:9.45px}
.papier{padding-bottom:45px}
/* Vierspalter wie eine Zeitungsseite: Schlagzeile mittig, Text – Bild über zwei Spalten – Text, unten fünf Kennzahlen */
.v4{padding:41.4px 0 9px}
.v4 h1{font:400 clamp(63px,8.1vw,126px)/.95 var(--titel)}
.v4-deck{max-width:882px;margin:16.2px auto 0;font:500 17.1px/1.45 var(--sans)}
.v4-von{margin-top:10.8px;font-size:9.9px}
.v4-raster{column-gap:30.6px;margin-top:30.6px;padding-top:21.6px}
.v4-sp{font-size:14.4px}
.v4-sp .et{margin-bottom:9px}
.v4-erste p:first-of-type::first-letter{font:400 84.6px/.78 var(--titel);margin:5.4px 9px 0 0}
.v4-bild figcaption{font-size:11.25px;margin-top:7.2px}
.v4-zahlen{margin-top:30.6px;padding-top:23.4px}
.v4-zahlen div{padding:0 12.6px}
.v4-zahlen b{font:400 clamp(36px,3.6vw,54px)/1 var(--titel)}
.v4-zahlen span{font:500 9.9px var(--sans);margin-top:7.2px}
.v4-zahlen p{font:400 italic 17.1px/1.25 var(--titel);margin-top:9px}
.v4-sp{font-size:14.85px}
.artikel .spalte,.r div.txt{font-size:17.1px}
}