/* Startseite – übernommen aus entwuerfe/18-vogue-start.html (werkzeug/theme-start.py) */

/* Entwurf 15 – Titelstory als Vollbild; die Zeitung mit dem Logo schiebt sich darüber und bleibt oben als Kopf stehen */
:root{--papier:#fcfbf8;--tinte:#111;--grau:#6d6a64;--linie:#dcd9d2;--gold:#b08a3e;--peek:54px;--leiste:76px;
 --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:350 18px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.et{font:500 12.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.gold{color:var(--gold)}
.grau{color:var(--grau)}
.logo{mix-blend-mode:multiply}
.pfeil{display:inline-flex;gap:14px;align-items:center;margin-top:22px;border-bottom:1px solid var(--gold);padding-bottom:6px}
.pfeil::after{content:"→";color:var(--gold);font-size:18px;letter-spacing:0}

/* Titelbereich: steht fest, die Zeitung schiebt sich darüber */
.cover{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--papier)}
.direkt{position:relative;z-index:3;height:var(--streifen,30px);align-items:center;display:flex;justify-content:space-between;gap:20px;padding:7px 56px;background:var(--tinte);color:#e9e4d8;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.direkt a:hover{color:var(--gold)}
.direkt span{display:flex;gap:22px}
.cover .leiste{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:30px;height:var(--leiste);padding:0 56px;background:var(--papier)}
.cover .leiste .schrift{height:30px;width:auto}
.mobilkopf{display:none}
.cover .leiste nav{display:flex;gap:40px;align-items:center}
.cover .leiste .kontakt{border:1px solid var(--tinte);padding:9px 16px}
.cover .leiste .kontakt:hover{background:var(--tinte);color:var(--papier)}
/* Menü für Tablet und Handy */
.menue-knopf{display:none;background:none;border:1px solid var(--tinte);padding:8px 14px;cursor:pointer;color:inherit}
.menue-flaeche{position:fixed;inset:0;z-index:60;background:var(--papier);display:none;flex-direction:column;padding:90px 28px 40px}
.menue-flaeche.offen{display:flex}
.menue-flaeche a{font:400 34px/1.2 var(--titel);padding:12px 0;border-bottom:1px solid var(--linie)}
.menue-flaeche .zu{position:absolute;right:20px;top:22px;background:none;border:1px solid var(--tinte);padding:8px 14px;cursor:pointer}
.cover .leiste .marke-k{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cover .leiste .unterzeile{font:500 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.cover .leiste .schrift{height:26px}
.folie{position:absolute;inset:calc(var(--leiste) + var(--streifen,30px)) 0 0 0;opacity:0;visibility:hidden;transition:opacity .9s,visibility 0s .9s}
.folie.aktiv{opacity:1;visibility:visible;transition:opacity .9s}
.folie picture{display:block}
.folie picture img{width:100%;height:100%;object-fit:cover}
.titel-gross{letter-spacing:-.03em}
.steuer{position:absolute;z-index:4;display:flex;align-items:center;gap:14px;font:400 15px var(--titel)}
.steuer button{background:none;border:0;color:inherit;cursor:pointer;font-size:20px;line-height:1;padding:4px}
.steuer button:hover{color:var(--gold)}
.steuer .linie{width:80px;height:1px;position:relative;background:currentColor;opacity:.35}
.steuer .linie i{position:absolute;left:0;top:-.5px;height:2px;background:var(--gold);transition:width .6s}
.inhalt{position:absolute;z-index:4}
.inhalt button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;color:inherit;cursor:pointer;opacity:.55;transition:opacity .3s}
.inhalt button:hover,.inhalt button.aktiv{opacity:1}
.meta{border-top:1px solid var(--tinte)}
.meta div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid var(--linie)}
.meta span:last-child{color:var(--grau)}
/* Variante B3 · Passepartout, aufgeräumt */
.folie{display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:20px;padding:34px 56px 0}
.fb-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,min(560px,50%));align-items:end;gap:50px;padding-bottom:16px;border-bottom:1px solid var(--tinte)}
.fb-kopf .von{display:block;font:500 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.fb-kopf .marke{display:block;height:30px;width:auto;margin:8px 0 12px;mix-blend-mode:multiply}
.fb-kopf .titel-gross{font:500 clamp(40px,4.4vw,70px)/.95 var(--titel)}
.fb-kopf .rechts{text-align:right}
.fb-kopf .vorspann{font-size:15.5px;line-height:1.5;margin-bottom:4px;text-wrap:balance}
.fb-kopf .pfeil{margin-top:0}
.folie picture{height:100%;margin:0 -56px}
.steuer{right:56px;bottom:calc(var(--peek) + 30px);background:var(--papier);padding:8px 16px}
.inhalt{display:none}

/* Die Zeitung */
.zeitung{position:relative;z-index:2;margin-top:calc(-1 * var(--peek));background:var(--papier)}
.rahmen{max-width:1440px;margin:0 auto;padding:0 44px;border-left:1px solid var(--linie);border-right:1px solid var(--linie)}
.kopf{position:sticky;top:0;z-index:5;background:var(--papier);text-align:center;padding-top:20px}
.kopf .rad{position:absolute;left:50%;width:calc(min(200px,30vw) * (1 - .35 * var(--p,0)));aspect-ratio:840/492;height:auto;bottom:calc(100% - 62px);transform:translateX(-50%);
 -webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 47%,#000 74%,transparent 100%);mask-image:radial-gradient(ellipse 60% 64% at 50% 47%,#000 74%,transparent 100%);pointer-events:none}
.mehr-link:hover{color:var(--gold)}
.kopf .zeile1{display:flex;justify-content:space-between;align-items:center;height:44px}
.kopf .zeile1 .gold{display:flex;align-items:center;gap:16px}
.kopf .zeile1 .gold::after{content:"";width:60px;border-top:1px solid var(--gold)}
.kopf .schrift{display:block;width:calc(min(480px,48%) * (1 - .35 * var(--p,0)));height:auto;margin:8px auto 0}
.kopf .motto{display:flex;align-items:center;gap:22px;justify-content:center;margin-top:calc(6px - 2px * var(--p,0));font:500 calc(11px - 2px * var(--p,0)) var(--sans);letter-spacing:.5em}
.kopf .motto::before,.kopf .motto::after{content:"";width:calc(min(150px,11vw) * (1 - .35 * var(--p,0)));border-top:1px solid var(--tinte)}
.kopf .balken{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:calc(10px - 5px * var(--p,0));padding:calc(8px - 3px * var(--p,0)) 0 calc(7px - 2px * var(--p,0));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;display:flex;gap:18px;justify-content:flex-end;align-items:center}
.updates{background:none;border:1px solid var(--tinte);color:inherit;cursor:pointer;padding:6px 12px}
.kopf .updates{font-size:10px;padding:4px 10px}
.updates:hover{background:var(--tinte);color:var(--papier)}
.anmelden{display:none;position:absolute;right:44px;top:100%;background:var(--papier);border:1px solid var(--tinte);padding:18px;width:360px;text-align:left}
.anmelden.offen{display:block}
.anmelden p{font-size:16px;margin-bottom:10px}
.anmelden input{font:inherit;padding:8px 10px;border:1px solid var(--tinte);width:100%;background:#fff}
.anmelden button{font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:11px;border:0;background:var(--tinte);color:#fff;width:100%;margin-top:8px}

/* Aufmacher wie Bild 2 */
.titelseite{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);border-bottom:1px solid var(--linie)}
.links{padding:116px 34px 30px 0;border-right:1px solid var(--linie)}
.rechts-spalte{padding:116px 0 30px 30px}
.aufmacher{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.aufmacher h2{font:500 clamp(48px,5.4vw,84px)/.95 var(--titel);letter-spacing:-.03em;margin:14px 0 22px}
.aufmacher .unter{font:400 26px/1.35 var(--sans)}
.aufmacher p{margin-top:18px;color:#333}
.aufmacher .foto{aspect-ratio:4/5}
.ort{margin-top:28px;padding:8px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font-size:11px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.ort .pfeile{display:flex;align-items:center;gap:12px;font:400 14px var(--titel);letter-spacing:0}
.ort .pfeile button{width:32px;height:32px;border-radius:50%;border:1px solid var(--tinte);background:none;color:inherit;cursor:pointer;font-size:14px}
.ort .pfeile button:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.projekte{display:grid}
.projekte .aufmacher{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.projekte .aufmacher.aktiv{opacity:1;visibility:visible;transition:opacity .6s}
.liste h3{font:400 28px/1.15 var(--titel);margin:8px 0 10px}
.liste p{font-size:16px;color:#444}
.rechts-spalte .ueber{padding-bottom:12px;border-bottom:1px solid var(--linie)}
.liste article{display:grid;grid-template-columns:1fr 150px;gap:22px;padding:24px 0;border-bottom:1px solid var(--linie)}
.liste .foto{aspect-ratio:4/5}
.liste h3{font-size:25px}
.liste article:hover h3{color:var(--gold)}

/* Weitere Abschnitte */
.abschnitt{padding-top:100px}
.abschnitt.verkauf{padding-top:56px}
/* Rubrikköpfe: linksbündig und kleiner als der Schriftzug, gleiche Stilmittel wie der Kopf */
.rubrikkopf{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;margin-bottom:30px}
.rubrikkopf h2{font:500 clamp(20px,1.9vw,26px)/1 var(--titel);text-transform:uppercase;letter-spacing:.1em}
.rubrikkopf .motto{display:flex;align-items:center;gap:18px;font:500 10.5px var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--grau)}
.rubrikkopf .motto::before{content:"";width:40px;border-top:1px solid var(--tinte)}
.rubrikkopf .leiste2{flex-basis:100%;display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:8px 0 7px;font-size:11px;border-top:1px solid var(--linie);border-bottom:3px double var(--tinte)}
.rubrikkopf .leiste2 a:hover{color:var(--gold)}
/* Trenner vor About: doppelte Linie, darauf das kleine Riesenrad */
.trenner{margin-top:100px;border-top:3px double var(--tinte)}
/* Marketing: breites Bild mit Textkarte, darunter zwei Meldungen */
.abschnitt.werbung{padding-top:90px}
.mB .gross{position:relative;display:block;aspect-ratio:21/9}
.mB .gross .foto{position:absolute;inset:0;overflow:hidden}
.mB .gross .foto img{transition:transform .8s}
.mB .gross:hover .foto img{transform:scale(1.02)}
.mB .karte{position:absolute;left:32px;bottom:32px;max-width:470px;background:var(--papier);padding:26px 28px}
.mB .karte h3{font:400 clamp(26px,2.4vw,34px)/1.12 var(--titel);margin:8px 0 10px}
.mB .karte p,.mB .zwei p{font-size:16px;color:#444}
.mB .zwei{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;margin-top:30px}
.mB .zwei a{display:block;border-top:1px solid var(--tinte);padding-top:14px}
.mB .zwei h3{font:400 26px/1.15 var(--titel);margin:8px 0 8px}
.mB .zwei a:hover h3{color:var(--gold)}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--tinte);padding-bottom:12px;margin-bottom:44px}
.kopfzeile h2{font:400 clamp(30px,3.2vw,44px)/1 var(--titel)}
/* What I Do: vier Bereiche nebeneinander */
.abschnitt.wasich{padding-top:90px}
.vier{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:40px}
.vier a{position:relative;display:flex;flex-direction:column;padding-top:4px}
.vier a+a::before{content:"";position:absolute;left:-20px;top:0;bottom:0;border-left:1px solid var(--linie)}
.vier .nr{font:400 34px/1 var(--titel);color:var(--gold)}
.vier h3{font:400 24px/1.15 var(--titel);margin:14px 0 10px}
.vier p{font-size:16px;color:#444;margin-bottom:16px}
.vier .pfeil{margin-top:auto;align-self:flex-start}
.vier a:hover h3{color:var(--gold)}
/* Belegleiste: Kundenzitat und Zahlen */
.beleg{margin-top:100px;padding:46px 0 40px;border-top:3px double var(--tinte);border-bottom:1px solid var(--tinte);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:60px;align-items:center}
.beleg blockquote{font:400 italic clamp(24px,2.4vw,34px)/1.25 var(--titel)}
.beleg>p{grid-column:1;margin-top:14px}
.beleg .zahlen{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;row-gap:24px}
.beleg .zahlen b{display:block;font:400 44px/1 var(--titel)}
.beleg .zahlen span{display:block;margin-top:6px;font-size:11px}
/* Kontakt */
.kontaktband{padding-top:100px}
.kb{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:60px}
.kform{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-content:start}
.kform label{display:flex;flex-direction:column;gap:6px}
.kform .voll,.kform label:first-child{grid-column:1/3}
.kform input,.kform select,.kform textarea{font:350 17px var(--sans);letter-spacing:0;text-transform:none;padding:10px 12px;border:1px solid var(--tinte);background:#fff;color:var(--tinte)}
.kform button{grid-column:1/3;justify-self:start;padding:14px 26px;background:var(--tinte);color:var(--papier);border:0;cursor:pointer}
.kform button:hover{background:var(--gold)}
.kform .danke{grid-column:1/3;font-style:italic}
.wege{position:relative;display:grid;grid-template-columns:1fr 1fr;align-content:start}
.wege::before{content:"";position:absolute;left:-30px;top:0;bottom:0;border-left:1px solid var(--linie)}
.wege a{padding:14px 0;border-bottom:1px solid var(--linie)}
.wege b{display:block;font:400 20px/1.25 var(--titel);margin-top:4px}
.wege a:hover b{color:var(--gold)}
footer .sozial a:hover{color:var(--gold)}
/* Schwebender Kontaktknopf */
.schwebe{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--tinte);color:var(--papier);padding:13px 20px;box-shadow:0 6px 24px rgba(0,0,0,.18);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.schwebe.da{opacity:1;transform:none;pointer-events:auto}
.schwebe:hover{background:var(--gold)}
/* Used Rides: Featured Rides von All Rides For You, ruhig wie Kleinanzeigen einer Zeitung */
.rides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:44px}
.rides a{display:flex;flex-direction:column;position:relative}
.rides a+a::before{content:"";position:absolute;left:-22px;top:0;bottom:0;border-left:1px solid var(--linie)}
.rides .foto{aspect-ratio:4/3;margin-bottom:18px;overflow:hidden}
.rides .foto img{transition:transform .8s}
.rides a:hover .foto img{transform:scale(1.04)}
.rides h3{font:400 27px/1.15 var(--titel);margin:8px 0 6px}
.rides .von{font-size:15px;color:var(--grau)}
.rides .daten{margin:12px 0 16px;font-size:15px;color:#444;line-height:1.5}
.rides .fuss{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:12px;border-top:1px solid var(--linie)}
.rides .preis{font:400 21px var(--titel)}
.rides a:hover h3{color:var(--gold)}
.rides .anfrage{display:block;margin-top:12px;color:var(--gold)}
/* About: Zeitungsporträt in drei Spalten mit Infokasten */
.aB{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);column-gap:44px;align-items:start}
.aB .foto{aspect-ratio:3/4}
.aB .mitte{position:relative}
.aB .mitte::before,.aB .kasten::before{content:"";position:absolute;left:-22px;top:0;bottom:0;border-left:1px solid var(--linie)}
.aB blockquote{font:400 clamp(28px,2.8vw,42px)/1.2 var(--titel);margin:12px 0 20px}
.aB .kasten{position:relative;border-top:3px double var(--tinte);padding-top:14px}
.aB .kasten h4{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:16px 0 6px}
.aB .kasten h4:first-child{margin-top:0}
.aB .kasten li{list-style:none;font-size:16px;padding:3px 0}
.ich{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.ich .foto{aspect-ratio:4/5}
.ich blockquote{font:400 clamp(26px,2.6vw,38px)/1.25 var(--titel);margin:16px 0 24px}
footer{margin-top:120px;padding:60px 0 30px;text-align:center;border-top:3px double var(--tinte)}
footer .rad{width:min(380px,70vw);margin:0 auto}
footer .gross{font:400 clamp(32px,4.2vw,58px)/1.05 var(--titel);margin:26px 0 12px}
footer .gross a{border-bottom:1px solid var(--gold)}
footer .unten{margin-top:50px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--linie);padding-top:14px}

@media(max-width:1100px){
 .cover .leiste nav{display:none}
 .menue-knopf{display:block}
 .kopf .balken nav{display:none}
 .kopf .balken{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
 :root{--peek:104px;--leiste:56px}
 .cover .leiste{padding:0 18px}
 .cover .leiste .schrift{height:22px}
 .steuer{left:18px!important;right:auto!important;top:auto!important;bottom:calc(var(--peek) + 14px)!important;background:var(--papier);color:var(--tinte)!important;padding:4px 10px;gap:8px;font-size:14px}
 .steuer .linie,.steuer .gesamt{display:none}
 .inhalt{display:none!important}
 .folie{padding:14px 18px 0;row-gap:12px}
 .folie picture{margin:0 -18px}
 .fb-kopf{grid-template-columns:1fr;gap:10px}
 .fb-kopf .marke{display:none}
 .fb-kopf .titel-gross{font-size:34px;margin-top:6px}
 .fb-kopf .rechts{text-align:left}
 .fb-kopf .vorspann{display:none}
 body{font-size:17px}
 .rahmen{padding:0 18px;border:0}
 .kopf{padding-top:12px}
 .kopf .zeile1{height:34px}
 .kopf .zeile1 .gold::after{display:none}
 .kopf .schrift{width:56%}
 .kopf .rad{width:20vw!important}
 .kopf .motto{font-size:8px;letter-spacing:.36em;gap:10px}
 .kopf .balken{font-size:9.5px}
 .kopf .balken .rechts .updates{display:none}
 .anmelden{right:18px;width:calc(100vw - 36px)}
 .titelseite{grid-template-columns:1fr}
 .links{padding:100px 0 26px;border-right:0}
 .rechts-spalte{padding:20px 0}
 .aufmacher{grid-template-columns:1fr;gap:20px}
 .aufmacher .foto{aspect-ratio:4/3;order:-1}
 .aufmacher .unter{font-size:21px}
 .rides{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:40px}
 .rides a+a::before{display:none}
 .rides h3{font-size:22px}
 .rides .daten{font-size:14px}
 .liste article{grid-template-columns:1fr 110px}
 .abschnitt{padding-top:70px}
 .trenner{margin-top:70px}
 .abschnitt.werbung{padding-top:70px}
 .mB .gross{display:flex;flex-direction:column;aspect-ratio:auto}
 .mB .gross .foto{position:static;aspect-ratio:4/3}
 .mB .karte{position:static;max-width:none;padding:20px 0 0}
 .mB .zwei{grid-template-columns:1fr;row-gap:26px}
 .rubrikkopf{row-gap:8px}
 .rubrikkopf .motto{font-size:9px;letter-spacing:.26em;gap:10px}
 .rubrikkopf .motto::before{width:24px}
 .rubrikkopf .leiste2{font-size:9.5px}
 .aB{grid-template-columns:1fr;row-gap:30px}
 .aB .mitte::before,.aB .kasten::before{display:none}
 .vier{grid-template-columns:1fr 1fr;row-gap:36px;column-gap:20px}
 .vier a+a::before{display:none}
 .beleg{grid-template-columns:1fr;row-gap:24px}
 .beleg .zahlen{grid-column:1;grid-row:auto}
 .direkt{padding:7px 18px;font-size:10px}
 .direkt span:last-child{display:none}
 .kb{grid-template-columns:1fr;row-gap:40px}
 .wege::before{display:none}
 .schwebe{right:14px;bottom:14px;padding:11px 16px}
 /* Handy: Projekte stehen schon oben in der Titelstory – in der Zeitung zuerst das Journal */
 /* Handy: Kopf, Titel und Text scrollen weg; das Titelbild steht still (sticky, kein Skript) */
 .mobilkopf{display:flex;flex-direction:column;position:relative;z-index:5;height:100vh;height:100svh;pointer-events:none}
 .mk-oben{background:var(--papier);pointer-events:auto}
 .mk-oben .direkt{display:flex}
 .mk-leiste{display:flex;justify-content:space-between;align-items:center;height:var(--leiste);padding:0 18px}
 .mk-leiste .marke-k{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
 .mk-leiste .schrift{height:22px;width:auto}
 .mk-leiste .unterzeile{font:500 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
 .mk-leiste .menue-knopf{display:block}
 .mk-kopf{padding:28px 18px 14px;border-bottom:1px solid var(--tinte);margin:0 18px;padding-left:0;padding-right:0}
 .mk-titel{font:500 34px/1 var(--titel);letter-spacing:-.03em;margin-bottom:0}
 .mk-kopf .pfeil{margin-top:8px}
 .mk-folie{display:none}
 .mk-folie.aktiv{display:block}
 .mk-luft{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:0 18px calc(var(--peek) + 20px)}
 .mk-luft .steuer{position:static!important;align-self:flex-end;margin-top:16px;pointer-events:auto}
 .mk-text p{color:#fff;font:400 16px/1.5 var(--sans);text-shadow:0 1px 14px rgba(0,0,0,.6);max-width:30em}
 .cover{position:sticky;top:0;margin-top:-100vh;margin-top:-100svh;min-height:0}
 .cover>.direkt,.cover .leiste{display:none}
 .folie{inset:0!important;display:block;padding:0!important}
 .folie .fb-kopf{display:none}
 .folie picture{position:absolute;inset:0;margin:0!important}
 .folie picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5) 100%);pointer-events:none}
 .steuer{left:auto!important;right:18px!important}
 .titelseite .links{display:none}
 .beleg{display:none}
 .rechts-spalte{padding-top:34px}
 .ich{grid-template-columns:1fr;gap:34px}
}


/* Handy-Fassung B · Großer Titel auf dem Bild */
@media(max-width:900px){
 .mk-oben{display:contents}
 .mobilkopf>*,.mk-oben>*{pointer-events:auto}
 .mk-luft{pointer-events:none}
 .mk-luft .steuer{pointer-events:auto}
 .mk-leiste{background:var(--papier)}
 .mk-kopf{background:var(--papier)}

 .mk-leiste{border-bottom:1px solid var(--linie)}
 .mk-leiste .menue-knopf{display:none!important}
 .mobilkopf .direkt{display:none!important}
 .mk-leiste .schrift{display:none}
 .mk-leiste .unterzeile{font-size:12px;letter-spacing:.34em}
 .mk-leiste .unterzeile .ms{color:var(--tinte);margin-right:.5em}
 .mk-leiste{height:auto!important;padding:14px 18px 10px!important}
 .mk-kopf{order:3;margin-top:auto;background:none;border:0;padding:0 18px}
 .mk-kopf .mk-folie::before{content:attr(data-nr);display:block;font:500 11px var(--sans);letter-spacing:.24em;color:var(--gold);margin-bottom:10px}
 .mk-titel{color:#fff;font-size:50px;line-height:.95;text-shadow:0 2px 20px rgba(0,0,0,.35)}
 .mk-kopf .pfeil{color:#fff;margin-top:14px}
 .mk-luft{order:4;flex:none;padding:14px 18px calc(var(--peek) + 22px)}
 .folie picture::after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.65) 100%)}
 .mk-luft .steuer{background:none!important;color:#fff!important}
}


/* Handy: Logos ohne Mischmodus, damit das Scrollen leicht bleibt; Papier dafür weiß wie der Logogrund */
@media(max-width:900px){.logo,.fb-kopf .marke{mix-blend-mode:normal!important}:root{--papier:#fff}}


/* Handy: Die Projektauswahl steht still wie das Foto; die Zeitung schiebt sich darüber */
@media(max-width:900px){.cover .steuer{z-index:1;bottom:calc(var(--peek) + 16px)!important;background:none!important;color:#fff!important;padding:0!important}
 .mk-luft{padding-bottom:calc(var(--peek) + 64px)!important}}


/* Handy: Die Projektauswahl blendet aus, sobald man zu scrollen beginnt */
@media(max-width:900px){.cover .steuer{transition:opacity .35s}.weg-gescrollt .cover .steuer{opacity:0;pointer-events:none}}


/* Handy: "Latest from the Journal" blendet erst ein, wenn es etwa 75 % der Bildschirmhöhe erreicht */
@media(max-width:900px){.rechts-spalte{opacity:0;translate:0 24px;transition:opacity .8s,translate .8s}.rechts-spalte.sichtbar{opacity:1;translate:0 0}}


/* Handy: Titel, "Read the story" und Text blenden im Takt des Fingers aus,
   auf den letzten 160 px, bevor "Read the story" den oberen Rand erreicht (ohne Skript beim Scrollen) */
@keyframes ausblenden{from{opacity:1}to{opacity:0}}
@media(max-width:900px){@supports(animation-timeline:scroll()){
 .mk-kopf,.mk-text{animation:ausblenden linear both;animation-timeline:scroll(root);animation-range:300px 460px}
}}


/* Fassung 18 – Startbild wie Entwurf 14 (Vogue): Foto über den ganzen Bildschirm, großes weißes Logo, Geschichte unten */
.vlogo,.vlogo-m,.vmotto{display:none}
.folie .dach{display:none}
@media(min-width:901px){
 /* Weiße Zeitungsfläche ragt etwas höher ins Bild; "Est. 1990" steht mittig darin, der Schriftzug bleibt noch verdeckt */
 :root{--peek:66px;--rand:56px}
 .kopf{padding-top:15px}
 .kopf .schrift{margin-top:24px}
 .cover>.direkt{display:none}
 .cover{background:#222}
 .folie{inset:0!important;padding:0!important;display:block!important}
 .folie picture{position:absolute;inset:0;height:auto;margin:0!important}
 .folie picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.65) 100%);pointer-events:none}
 .cover .leiste{position:absolute;top:0;left:0;right:0;background:none;color:#fff;padding:0 var(--rand)}
 .cover .leiste .vdatum{flex:1}
 .cover .leiste nav{flex:none}
 .cover .leiste .kontakt{border-color:rgba(255,255,255,.85)}
 .cover .leiste .kontakt:hover{background:#fff;color:var(--tinte)}
 .vlogo{display:block;position:absolute;z-index:3;left:0;right:0;top:calc(var(--leiste) - 8px);text-align:center;color:#fff;pointer-events:none}
 .vlogo img{width:min(860px,64vw);height:auto;margin:0 auto}
 .vlogo span{display:block;margin-top:10px;letter-spacing:.42em}
 .fb-kopf{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:calc(var(--peek) + 64px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;row-gap:0;align-items:end;padding:0;border:0;color:#fff}
 .fb-kopf>div:first-child{grid-column:1;grid-row:1}
 .fb-kopf .rechts{display:contents}
 .folie .dach{display:block}
 .fb-kopf .titel-gross{font:400 clamp(46px,7vw,120px)/.95 var(--titel);letter-spacing:-.02em;margin:14px 0 18px;max-width:11ch}
 .fb-kopf .vorspann{grid-column:1;grid-row:2;text-align:left;font-size:20px;line-height:1.45;max-width:32em;margin:0;text-wrap:pretty}
 .fb-kopf .pfeil{grid-column:2;grid-row:1/3;align-self:end;margin:0 0 4px;width:224px;justify-content:space-between;border:1px solid rgba(255,255,255,.85);padding:13px 20px}
 .fb-kopf .pfeil::after{color:#fff}
 .fb-kopf .pfeil:hover{background:#fff;color:var(--tinte)}
 .fb-kopf .pfeil:hover::after{color:var(--tinte)}
 .steuer{left:auto!important;right:56px!important;bottom:calc(var(--peek) + 24px);width:224px;justify-content:space-between!important;background:none!important;color:#fff!important;padding:0!important}
}
@media(max-width:900px){
 .mk-leiste{background:none!important;border-bottom:0!important;padding:16px 18px 0!important}
 .mk-leiste .marke-k{width:100%;align-items:center}
 .mk-leiste .unterzeile{display:none}
 .vlogo-m{display:block;width:76%;height:auto}
 /* Handy: Akzente im Startbild weiß statt gold */
 .mk-kopf .mk-folie::before{color:#fff!important}
 .mk-kopf .pfeil{border-bottom-color:#fff}
 .mk-kopf .pfeil::after{color:#fff}
 .cover .steuer .linie i{background:#fff}
 .vmotto{display:block;color:#fff;font-size:9.5px;letter-spacing:.42em;margin-top:2px}
 .folie picture::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 28%,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%)!important}
}


/* Laptop 90 %: Schrift und Abstände 10 % kleiner (automatisch aus den Regeln oben erzeugt) */
@media(min-width:901px){
/* Entwurf 15 – Titelstory als Vollbild; die Zeitung mit dem Logo schiebt sich darüber und bleibt oben als Kopf stehen */
:root{--peek:48.6px;--leiste:68.4px}
body{font:350 16.2px/1.6 var(--sans)}
.et{font:500 11.25px/1.3 var(--sans)}
.pfeil{gap:12.6px;margin-top:19.8px;padding-bottom:5.4px}
.pfeil::after{font-size:16.2px}
/* Titelbereich: steht fest, die Zeitung schiebt sich darüber */
.cover{min-height:540px}
.direkt{height:var(--streifen,27px);gap:18px;padding:6.3px 50.4px;font:500 9.9px var(--sans)}
.direkt span{gap:19.8px}
.cover .leiste{gap:27px;padding:0 50.4px}
.cover .leiste .schrift{height:27px}
.cover .leiste nav{gap:36px}
.cover .leiste .kontakt{padding:8.1px 14.4px}
/* Menü für Tablet und Handy */
.menue-knopf{padding:7.2px 12.6px}
.menue-flaeche{padding:81px 25.2px 36px}
.menue-flaeche a{font:400 30.6px/1.2 var(--titel);padding:10.8px 0}
.menue-flaeche .zu{right:18px;top:19.8px;padding:7.2px 12.6px}
.cover .leiste .marke-k{gap:5.4px}
.cover .leiste .unterzeile{font:500 9.45px/1 var(--sans)}
.cover .leiste .schrift{height:23.4px}
.folie{inset:calc(var(--leiste) + var(--streifen,27px)) 0 0 0}
.steuer{gap:12.6px;font:400 13.5px var(--titel)}
.steuer button{font-size:18px;padding:3.6px}
.steuer .linie{width:72px}
.meta div{gap:18px;padding:7.2px 0}
/* Variante B3 · Passepartout, aufgeräumt */
.folie{row-gap:18px;padding:30.6px 50.4px 0}
.fb-kopf{gap:45px;padding-bottom:14.4px}
.fb-kopf .von{font:500 10.8px/1.3 var(--sans)}
.fb-kopf .marke{height:27px;margin:7.2px 0 10.8px}
.fb-kopf .titel-gross{font:500 clamp(36px,3.96vw,63px)/.95 var(--titel)}
.fb-kopf .vorspann{font-size:13.95px;margin-bottom:3.6px}
.steuer{right:50.4px;bottom:calc(var(--peek) + 27px);padding:7.2px 14.4px}
.rahmen{max-width:1296px;padding:0 39.6px}
.kopf{padding-top:18px}
.kopf .rad{width:calc(min(180px,27vw) * (1 - .35 * var(--p,0)));bottom:calc(100% - 55.8px)}
.kopf .zeile1{height:39.6px}
.kopf .zeile1 .gold{gap:14.4px}
.kopf .zeile1 .gold::after{width:54px}
.kopf .schrift{width:calc(min(432px,48%) * (1 - .35 * var(--p,0)));margin:7.2px auto 0}
.kopf .motto{gap:19.8px;margin-top:calc(5.4px - 2px * var(--p,0));font:500 calc(9.9px - 2px * var(--p,0)) var(--sans)}
.kopf .motto::before,.kopf .motto::after{width:calc(min(135px,9.9vw) * (1 - .35 * var(--p,0)))}
.kopf .balken{margin-top:calc(9px - 4.5px * var(--p,0));padding:calc(7.2px - 3px * var(--p,0)) 0 calc(6.3px - 2px * var(--p,0));font-size:9.9px}
.kopf .balken nav{gap:23.4px}
.kopf .balken .rechts{gap:16.2px}
.updates{padding:5.4px 10.8px}
.kopf .updates{font-size:9px;padding:3.6px 9px}
.anmelden{right:39.6px;padding:16.2px;width:324px}
.anmelden p{font-size:14.4px;margin-bottom:9px}
.anmelden input{padding:7.2px 9px}
.anmelden button{font:500 10.8px var(--sans);padding:9.9px;margin-top:7.2px}
.links{padding:104.4px 30.6px 27px 0}
.rechts-spalte{padding:104.4px 0 27px 27px}
.aufmacher{gap:32.4px}
.aufmacher h2{font:500 clamp(43.2px,4.86vw,75.6px)/.95 var(--titel);margin:12.6px 0 19.8px}
.aufmacher .unter{font:400 23.4px/1.35 var(--sans)}
.aufmacher p{margin-top:16.2px}
.ort{margin-top:25.2px;padding:7.2px 0;font-size:9.9px;gap:14.4px}
.ort .pfeile{gap:10.8px;font:400 12.6px var(--titel)}
.ort .pfeile button{width:28.8px;height:28.8px;font-size:12.6px}
.liste h3{font:400 25.2px/1.15 var(--titel);margin:7.2px 0 9px}
.liste p{font-size:14.4px}
.rechts-spalte .ueber{padding-bottom:10.8px}
.liste article{gap:19.8px;padding:21.6px 0}
.liste h3{font-size:22.5px}
/* Weitere Abschnitte */
.abschnitt{padding-top:90px}
.abschnitt.verkauf{padding-top:50.4px}
/* Rubrikköpfe: linksbündig und kleiner als der Schriftzug, gleiche Stilmittel wie der Kopf */
.rubrikkopf{column-gap:16.2px;margin-bottom:27px}
.rubrikkopf h2{font:500 clamp(18px,1.71vw,23.4px)/1 var(--titel)}
.rubrikkopf .motto{gap:16.2px;font:500 9.45px var(--sans)}
.rubrikkopf .motto::before{width:36px}
.rubrikkopf .leiste2{margin-top:10.8px;padding:7.2px 0 6.3px;font-size:9.9px}
/* Trenner vor About: doppelte Linie, darauf das kleine Riesenrad */
.trenner{margin-top:90px}
/* Marketing: breites Bild mit Textkarte, darunter zwei Meldungen */
.abschnitt.werbung{padding-top:81px}
.mB .karte{left:28.8px;bottom:28.8px;max-width:423px;padding:23.4px 25.2px}
.mB .karte h3{font:400 clamp(23.4px,2.16vw,30.6px)/1.12 var(--titel);margin:7.2px 0 9px}
.mB .karte p,.mB .zwei p{font-size:14.4px}
.mB .zwei{column-gap:39.6px;margin-top:27px}
.mB .zwei a{padding-top:12.6px}
.mB .zwei h3{font:400 23.4px/1.15 var(--titel);margin:7.2px 0 7.2px}
.kopfzeile{padding-bottom:10.8px;margin-bottom:39.6px}
.kopfzeile h2{font:400 clamp(27px,2.88vw,39.6px)/1 var(--titel)}
/* What I Do: vier Bereiche nebeneinander */
.abschnitt.wasich{padding-top:81px}
.vier{column-gap:36px}
.vier a{padding-top:3.6px}
.vier .nr{font:400 30.6px/1 var(--titel)}
.vier h3{font:400 21.6px/1.15 var(--titel);margin:12.6px 0 9px}
.vier p{font-size:14.4px;margin-bottom:14.4px}
/* Belegleiste: Kundenzitat und Zahlen */
.beleg{margin-top:90px;padding:41.4px 0 36px;column-gap:54px}
.beleg blockquote{font:400 italic clamp(21.6px,2.16vw,30.6px)/1.25 var(--titel)}
.beleg>p{margin-top:12.6px}
.beleg .zahlen{row-gap:21.6px}
.beleg .zahlen b{font:400 39.6px/1 var(--titel)}
.beleg .zahlen span{margin-top:5.4px;font-size:9.9px}
/* Kontakt */
.kontaktband{padding-top:90px}
.kb{column-gap:54px}
.kform{gap:14.4px 18px}
.kform label{gap:5.4px}
.kform input,.kform select,.kform textarea{font:350 15.3px var(--sans);padding:9px 10.8px}
.kform button{padding:12.6px 23.4px}
.wege a{padding:12.6px 0}
.wege b{font:400 18px/1.25 var(--titel);margin-top:3.6px}
/* Schwebender Kontaktknopf */
.schwebe{right:18px;bottom:18px;padding:11.7px 18px}
/* Used Rides: Featured Rides von All Rides For You, ruhig wie Kleinanzeigen einer Zeitung */
.rides{column-gap:39.6px}
.rides .foto{margin-bottom:16.2px}
.rides h3{font:400 24.3px/1.15 var(--titel);margin:7.2px 0 5.4px}
.rides .von{font-size:13.5px}
.rides .daten{margin:10.8px 0 14.4px;font-size:13.5px}
.rides .fuss{padding-top:10.8px}
.rides .preis{font:400 18.9px var(--titel)}
.rides .anfrage{margin-top:10.8px}
/* About: Zeitungsporträt in drei Spalten mit Infokasten */
.aB{column-gap:39.6px}
.aB blockquote{font:400 clamp(25.2px,2.52vw,37.8px)/1.2 var(--titel);margin:10.8px 0 18px}
.aB .kasten{padding-top:12.6px}
.aB .kasten h4{font:500 9.9px var(--sans);margin:14.4px 0 5.4px}
.aB .kasten li{font-size:14.4px}
.ich{gap:57.6px}
.ich blockquote{font:400 clamp(23.4px,2.34vw,34.2px)/1.25 var(--titel);margin:14.4px 0 21.6px}
footer{margin-top:108px;padding:54px 0 27px}
footer .rad{width:min(342px,63vw)}
footer .gross{font:400 clamp(28.8px,3.78vw,52.2px)/1.05 var(--titel);margin:23.4px 0 10.8px}
footer .unten{margin-top:45px;gap:10.8px;padding-top:12.6px}
.mk-leiste .unterzeile{font-size:10.8px}
.mk-leiste{padding:12.6px 16.2px 9px!important}
.mk-kopf{padding:0 16.2px}
.mk-kopf .mk-folie::before{font:500 9.9px var(--sans);margin-bottom:9px}
.mk-titel{font-size:45px}
.mk-kopf .pfeil{margin-top:12.6px}
.mk-luft{padding:12.6px 16.2px calc(var(--peek) + 19.8px)}
}


/* Laptop, nach der 90-%-Verkleinerung nachjustiert: Vorspann der Titelstorys größer, weißer Balken unten 17 px höher (mehr Weiß unter "Est. 1990") */
@media(min-width:901px){:root{--peek:66px}.fb-kopf .vorspann{font-size:18.5px}.kopf .schrift{margin-top:36px}.fb-kopf .titel-gross{max-width:none}}
/* Laptop: angedockter Zeitungskopf exakt so groß wie der Kopf der Artikelseite ("All-out on red") */
@media(min-width:901px){
 .kopf .schrift{width:calc(min(432px,48%) * (1 - .375 * var(--p,0)))}
 .kopf .motto::before,.kopf .motto::after{width:calc(min(135px,9.9vw) * (1 - .2667 * var(--p,0)))}
 .kopf .balken{margin-top:calc(9px - 1.8px * var(--p,0));padding-top:calc(7.2px - 1.8px * var(--p,0));padding-bottom:calc(6.3px - 1.8px * var(--p,0))}
 .kopf .motto{font-size:calc(9.9px - 1.8px * var(--p,0))}
 .kopf .updates{padding:1px 8px;line-height:1.3}
}
<style>
/* Riesenrad freigestellt: kein weißer Hintergrund, ragt direkt über das Foto */
.kopf .rad{-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal!important}
/* Strichlicht: jede Linie bekommt einen hauchfeinen hellen Saum, damit das Rad auf jedem Foto lesbar bleibt */
.kopf .rad{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 3px rgba(255,255,255,.8)) drop-shadow(0 0 7px rgba(255,255,255,.45))}
/* Die Zeichnung ist oben am Bildrand angeschnitten: obere Kante weich auslaufen lassen */
.kopf .rad{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 3.5%)!important;mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 3.5%)!important}
/* Etwas Weißraum unter der doppelten Linie, bevor die Seite darunter verschwindet */
.kopf{padding-bottom:12px}
<style>
/* Laptop: beim ersten Hochscrollen wächst der weiße Bereich um bis zu 80 px nach oben (Wert setzt das Andock-Skript) */
@media(min-width:901px){.zeitung::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--wachs,0px);background:var(--papier);pointer-events:none}}
<style>
/* Menü springt weich zu den Sektionen; Abstand oben, damit der angedockte Zeitungskopf nichts verdeckt */
html{scroll-behavior:smooth}
#projects,#journal,#used-rides,#about{scroll-margin-top:140px}
#projects{scroll-margin-top:165px}
#journal{scroll-margin-top:150px}
#about{scroll-margin-top:120px}
@media(max-width:900px){#projects,#journal,#used-rides,#about{scroll-margin-top:110px}}

@media(min-width:901px){.cover .steuer .linie{flex:1}.cover .steuer button{padding:0}}
/* Vorerst ausgeblendet: Kundenzitat (Stefan Sittler-Koidl) und Marketing ("From the agency") */
.beleg,.abschnitt.werbung{display:none!important}