/* Startseite in WordPress: Ergänzungen zum Entwurf (Links in der Zeitung) */
.aufmacher h2 a:hover{color:var(--gold)}
.liste article.ms-verlinkt{position:relative}
.liste article.ms-verlinkt h3 a::after{content:"";position:absolute;inset:0}
.liste article.ms-verlinkt:hover h3{color:var(--gold)}
/* Noch keine Journal-Beiträge: rechte Spalte ausblenden, Projekte über die volle Breite */
.titelseite.ohne-journal{grid-template-columns:1fr}
.titelseite.ohne-journal .rechts-spalte{display:none}
.titelseite.ohne-journal .links{border-right:0;padding-right:0}
/* Titelstory oben: Bild, Schlagzeile, Vorspann und „Read the story“ führen zum Beitrag.
   Die Pfeile liegen darüber und haben eine große Klickfläche; rund um den Pfeilkasten öffnet ein Klick nichts. */
.steuer button{position:relative}
.steuer button::before{content:"";position:absolute;inset:-14px -12px}
.steuer::after{content:"";position:absolute;inset:-16px;z-index:-1}
.folie .folie-link{color:inherit;text-decoration:none;transition:color .25s}
.folie .folie-link:hover{color:var(--gold)}
.folie .folie-bild{display:block;min-height:0;height:100%;margin:0 -56px;cursor:pointer}
.folie .folie-bild picture{margin:0}
@media(max-width:900px){.folie .folie-bild{margin:0 -18px}}
/* Schriftzug im Kopf führt nach oben, ohne das Layout zu ändern */
.ms-marke-link{display:contents}
/* Gerade angezeigter Abschnitt im Menü unter dem Schriftzug */
.kopf .balken nav a.aktiv{color:var(--gold);font-weight:600}

/* Rides for Sale: ohne Schlagworte und Standort, Preis in einer Zeile, „Enquire“ rechts daneben */
.rides>a>.et.gold,.rides .fuss .et.grau{display:none}
.rides .fuss{padding-right:96px}
.rides .preis{white-space:nowrap}
.rides .anfrage{position:absolute;right:0;bottom:3px;margin:0!important}

@media(max-width:900px){
 /* Handy: Logo-Kopf ragt nur noch mit der obersten Zeile ins Titelbild */
 :root{--peek:52px}
 /* Handy: unter der Titelstory die übrigen Projekte als Liste (die erste steht schon oben) */
 .titelseite .links{display:block!important;padding:30px 0 6px}
 .titelseite .links .ort{display:none}
 .projekte{display:block}
 .projekte::before{content:"More projects";display:block;padding-bottom:12px;border-bottom:1px solid var(--linie);font:500 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
 .projekte .aufmacher{opacity:1!important;visibility:visible!important;display:grid;grid-template-columns:1fr 110px;gap:18px;align-items:start;padding:22px 0;border-bottom:1px solid var(--linie);position:relative}
 .projekte .aufmacher:last-child:not(:first-child){display:none}
 .projekte .aufmacher .foto{order:0;aspect-ratio:4/5}
 .projekte .aufmacher h2{font:400 25px/1.15 var(--titel);letter-spacing:0;margin:8px 0 8px}
 .projekte .aufmacher h2 a::after{content:"";position:absolute;inset:0}
 .projekte .aufmacher .unter{font:350 16px/1.45 var(--sans);color:#444;margin:0}
 .projekte .aufmacher p:not(.unter),.projekte .aufmacher .pfeil{display:none}
 .titelseite .rechts-spalte{padding-top:30px}
 /* Handy: Rides zweispaltig; Preis in einer Zeile, „Enquire“ darunter */
 .rides h3{font-size:21px}
 .rides .fuss{padding-right:0!important}
 .rides .preis{font-size:18px}
 .rides .anfrage{position:static;margin-top:8px!important}
}
@media(max-width:900px){
 /* Handy: Projekt-Vorschauen als vollflächige Bildkacheln, Text weiß auf dem Bild */
 .projekte::before{border-bottom:0;padding-bottom:14px}
 .projekte .aufmacher{display:block;position:relative;height:172px;margin:0 -18px 3px;padding:0 18px 16px;border:0;overflow:hidden;display:flex;align-items:flex-end}
 .projekte .aufmacher{isolation:isolate}
 .projekte .aufmacher .foto{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
 .projekte .aufmacher .foto img{width:100%;height:100%;object-fit:cover}
 .projekte .aufmacher .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.62) 100%);pointer-events:none}
 .projekte .aufmacher .et.gold{color:#fff}
 .projekte .aufmacher h2{color:#fff;font-size:28px;margin:4px 0 2px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
 .projekte .aufmacher h2 a{color:#fff}
 .projekte .aufmacher .unter{color:rgba(255,255,255,.9);font-size:15px}
}
/* Handy: Titelbereich mit schwarzem Grund wie die Unterseiten – Safari färbt dann die Leisten oben und unten schwarz */
@media(max-width:900px){.cover{background:#111}}
/* Handy: Zeitungskopf mit schwarzem Grund und schmalem schwarzem Band oben – Safari färbt die Leiste dann auch bei angedocktem Kopf schwarz */
@media(max-width:900px){
 .kopf{background:linear-gradient(var(--papier),var(--papier)) 0 calc(6px * var(--a,0))/100% 100% no-repeat #111}
 /* Über dem Kopf ein Verlauf ins Schwarz, der mitwandert: das Bild läuft weich in die Kante aus */
 /* Anfangs ein schmaler Schatten der Zeitung auf dem Bild; erst kurz vor dem Andocken wird er höher (--a von 0 bis 1, aus start-wp.js) */
 .kopf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(12px + 48px * var(--a,0));background:linear-gradient(180deg,rgba(17,17,17,0),rgba(17,17,17,calc(.14 + .46 * var(--a,0))) 50%,rgba(17,17,17,calc(.32 + .68 * var(--a,0))));pointer-events:none}
}
@media(max-width:900px){
 /* Handy: die drei Projekt-Kacheln blenden beim Hochschieben der Zeitung nacheinander ein, ab etwa der Hälfte (--z von 0 bis 1 aus start-wp.js) */
 .projekte .aufmacher{--o:clamp(0,calc((var(--z,1) - var(--ab)) / .26),1);opacity:var(--o)!important;transform:translateY(calc(22px * (1 - var(--o))));transition:none!important}
 .projekte .aufmacher:nth-child(1){--ab:.5}
 .projekte .aufmacher:nth-child(2){--ab:.63}
 .projekte .aufmacher:nth-child(3){--ab:.76}
}
/* Handy: Riesenrad sitzt über dem Schriftzug und taucht nur mit dem Fuß (Wolken) hinter die Buchstaben, wie am Laptop */
@media(max-width:900px){.kopf .rad{bottom:calc(100% - 47px);width:17vw!important}}
/* Handy: Riesenrad erst beim Hochschieben einblenden, damit es unten im Titelbild nicht angeschnitten hervorschaut */
@media(max-width:900px){
 /* Riesenrad: blendet beim Hochschieben ein; beim Verkleinern schiebt es sich so weit nach oben, dass es beim Andocken gerade verschwindet (--r) */
 .kopf .rad{opacity:1;transform:translateX(-50%) translateY(calc(-10px * var(--r,0)))}
 /* Angedockt wie der Kopf der Unterseiten: Schriftzug 46 % breit, Abstände gleich (--a von 0 bis 1) */
 /* Verschieben per transform statt Abstand: so bleibt die Andockhöhe aus start.js gleich, auch wenn die Seite schon gescrollt geladen wird */
 .kopf .schrift{width:calc(56% - 10% * var(--s,0))!important;transform:translateY(calc(8px * var(--s,0)))}
 .kopf .motto{font-size:calc(8px - .5px * var(--s,0));transform:translateY(calc(8px * var(--s,0)))}
 .kopf .balken{transform:translateY(calc(11px * var(--s,0)))}
 /* Papierstreifen unter der Doppellinie bleibt erhalten: die Leiste rückt per transform nach unten, der Kopf wächst unten mit */
 .kopf{padding-bottom:calc(12px + 9px * var(--s,0))}
}
@media(max-width:900px){
 /* Handy: „Latest from the Journal“ ohne Einblenden, kommt einfach beim Scrollen von unten mit */
 .rechts-spalte,.rechts-spalte.sichtbar{opacity:1!important;translate:none!important;transition:none!important}
}
/* Handy: Seitengrund mit schwarzer Grundfarbe und Papier als Bild darüber (wie auf den Unterseiten) – Safari färbt so auch die untere Leiste schwarz */
@media(max-width:900px){html,body{background:linear-gradient(var(--papier),var(--papier)) #111}}

/* About wie die anderen Rubriken: keine zusätzliche Doppellinie über der Überschrift */
.trenner{border-top:0!important}
.trenner+.rubrikkopf{margin-top:0!important}

/* Marketing: nur der große Artikel, die zwei Auszüge darunter ausgeblendet */
.mB .zwei{display:none!important}


/* Fuß: Imprint · Privacy kleiner, wie das Motto „Higher Perspectives“ im Kopf */
footer .unten span:has(a[href*="imprint"]){font-size:9px!important;letter-spacing:.36em!important;align-self:center}


/* Fuß: Copyright so klein wie Imprint · Privacy */
footer .unten>span:first-child{font-size:9px!important;letter-spacing:.36em!important;align-self:center}

/* Fuß: „Let’s talk.“ in eigener Zeile, eine Leerzeile unter „The next step is in your hands.“ */
footer .gross a{display:table;margin:1.1em auto 0}

/* Fuß Startseite: klare Abfolge – Schlagzeile · Leerzeile · Let’s talk · Luft · Kontaktzeile · Luft · Leiste */
footer .gross{margin-bottom:0!important}
footer .gross+p{margin-top:56px!important;font-size:15px}
footer .sozial{margin-top:12px!important}
footer .unten{margin-top:56px!important;align-items:center}
@media(max-width:900px){footer .gross+p{margin-top:40px!important;font-size:14px}footer .unten{margin-top:40px!important}}
@media(max-width:900px){footer .unten{flex-direction:column;align-items:center;gap:10px!important;text-align:center}}

/* About auf der Startseite: Projekte verlinkt, wie auf der About-Seite */
.aB .kasten li a{border-bottom:1px solid var(--linie)}
.aB .kasten li a:hover{color:var(--gold);border-color:var(--gold)}

/* Handy: Zähler zwischen den Pfeilen wie die Nummer über der Schlagzeile (serifenlos) */
@media(max-width:900px){.cover .steuer #zaehler,.cover .steuer .gesamt{font:500 11px/1 var(--sans);letter-spacing:.24em}}