/* ═══════════════════════════════════════════════════════════════════
   RENT A MUSTANG — Vision: Warm. Geduldig. Einmalig.

   Zeile 5 der Vision ist der ganze Bauplan: ganz oben steht EINE
   Entscheidung, Schwarz oder Weiss, und die ganze Seite wechselt mit.
   Deshalb gibt es hier zwei vollstaendige Paletten statt einer, und
   der Schalter ist keine Spielerei, sondern das Angebot des Betriebs.

   Dazu `metaphor system`: der Tag steht als Fahrtenbuch da, so wie ein
   alter Wagen eins hat — Eintrag, Uhrzeit, Ort, Bemerkung.

   Gesperrt (Zeile 4): Sonnenuntergang, Schleife, Schreibschrift, und
   die eigene Vorfassung mit gestapelten Ablaufkarten.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Bodoni';src:url('fonts/bodoni-moda-400-normal-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni';src:url('fonts/bodoni-moda-400-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Bodoni';src:url('fonts/bodoni-moda-500-normal-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni';src:url('fonts/bodoni-moda-700-normal-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-400-normal-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-500-normal-latin.woff2') format('woff2');font-weight:500;font-display:swap}

/* ── Die zwei Paletten ───────────────────────────────────────────── */
html[data-modus="schwarz"]{
  --grund:#101013; --karte:#17171B; --schrift:#F0EDE7;
  --dim:rgba(240,237,231,.70); --linie:rgba(240,237,231,.17); --gold:#C9A227;
}
html[data-modus="weiss"]{
  --grund:#F1EEE8; --karte:#E7E2D9; --schrift:#16161A;
  --dim:#54545B; --linie:rgba(22,22,26,.18); --gold:#7A5C0C;
}
html[data-modus="schwarz"] .nur-weiss{display:none}
html[data-modus="weiss"] .nur-schwarz{display:none}

:root{--rand:clamp(20px,5vw,74px);--ease:cubic-bezier(.22,.8,.24,1)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--schrift);
  font-family:'Manrope',system-ui,sans-serif;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .45s var(--ease),color .45s var(--ease)}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--gold);color:var(--grund);padding:10px 16px}

.bahn{max-width:1240px;margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:'Bodoni',Didot,Georgia,serif;font-weight:400;margin:0;line-height:1.02}
h1{font-size:clamp(46px,10vw,140px);letter-spacing:-.02em}
h2{font-size:clamp(27px,4vw,52px);max-width:18ch}
h3{font-size:clamp(19px,2.2vw,26px)}
em{font-style:italic}
.text{margin:1.25em 0 0;max-width:50ch;color:var(--dim)}
.marke{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin:0 0 1.5em}

/* ── Kopf mit dem Schalter ───────────────────────────────────────── */
.kopf{display:flex;align-items:center;gap:14px;padding:18px var(--rand);
  border-bottom:1px solid var(--linie);flex-wrap:wrap}
.kopf__wort{font-family:'Bodoni',serif;font-size:19px;letter-spacing:.02em}
.kopf__ort{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.schalter{margin-left:auto;display:flex;align-items:center;gap:11px;
  background:none;border:1px solid var(--linie);color:inherit;
  padding:7px 8px 7px 14px;font:inherit;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer}
.schalter__wort{color:var(--dim);transition:color .3s var(--ease)}
.schalter__wort--an{color:var(--schrift)}
.schalter__gleis{width:44px;height:18px;border:1px solid var(--linie);position:relative;
  flex:0 0 auto}
.schalter__punkt{position:absolute;top:2px;left:2px;width:12px;height:12px;
  background:var(--schrift);transition:transform .38s var(--ease)}
html[data-modus="weiss"] .schalter__punkt{transform:translateX(26px)}
.kopf__anfrage{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── Auftakt ─────────────────────────────────────────────────────── */
.auftakt{padding:clamp(34px,6vh,72px) 0 clamp(50px,8vh,100px)}
.auftakt h1{margin-bottom:.22em}
.auftakt__unten{display:grid;gap:clamp(20px,3vw,52px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.auftakt__unten{grid-template-columns:1fr 1.25fr}}
.auftakt figure{margin:0;position:relative}
.auftakt figcaption{position:absolute;left:12px;bottom:10px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#F0EDE7;
  background:rgba(16,16,19,.74);padding:5px 9px}

/* ── metaphor system: das Fahrtenbuch ────────────────────────────── */
.buch{padding:clamp(60px,10vh,120px) 0;border-top:1px solid var(--linie)}
.buch__blatt{margin-top:clamp(24px,4vh,42px);border-top:1px solid var(--linie)}
.eintrag{display:grid;gap:4px 22px;grid-template-columns:1fr;
  padding:19px 0;border-bottom:1px solid var(--linie)}
@media(min-width:760px){
  .eintrag{grid-template-columns:64px 92px 1fr 1.35fr;align-items:baseline}
}
.eintrag__nr{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.eintrag__zeit{font-family:'Bodoni',serif;font-size:clamp(20px,2.4vw,28px);color:var(--gold)}
.eintrag__ort{font-family:'Bodoni',serif;font-size:clamp(19px,2.2vw,25px)}
.eintrag__bem{color:var(--dim);font-size:15.5px}
.buch__fuss{margin:1.4em 0 0;color:var(--dim);max-width:52ch;font-size:15.5px}

/* ── Der andere Wagen ────────────────────────────────────────────── */
.anderer{padding:clamp(60px,10vh,120px) 0;border-top:1px solid var(--linie);
  display:grid;gap:clamp(22px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.anderer{grid-template-columns:1.15fr .85fr}}
.anderer figure{margin:0}
.anderer img{width:100%}
.wechseln{display:inline-block;margin-top:1.5em;border:1px solid var(--gold);color:var(--gold);
  background:none;font:inherit;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:.95em 1.9em;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.wechseln:hover{background:var(--gold);color:var(--grund)}

/* ── Zwei ruhige Bildstrecken ────────────────────────────────────── */
.strecke{padding:clamp(56px,9vh,110px) 0;border-top:1px solid var(--linie);
  display:grid;gap:clamp(22px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){
  .strecke{grid-template-columns:.9fr 1.1fr}
  .strecke--gedreht{grid-template-columns:1.1fr .9fr}
}
.strecke figure{margin:0}
.strecke img{width:100%}

/* ── Anfrage ─────────────────────────────────────────────────────── */
.anfrage{padding:clamp(60px,10vh,120px) 0 clamp(40px,6vh,64px);border-top:1px solid var(--linie);
  display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr}
@media(min-width:820px){.anfrage{grid-template-columns:1.15fr .85fr}}
.knopf{display:inline-block;margin-top:1.7em;background:var(--gold);color:var(--grund);
  padding:1.05em 2.2em;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;transition:opacity .3s var(--ease)}
.knopf:hover{opacity:.85}
.daten{margin:0}
.daten dt{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  border-top:1px solid var(--linie);padding-top:13px}
.daten dd{margin:.4em 0 18px}

.fuss{border-top:1px solid var(--linie);padding:22px 0 clamp(40px,6vh,64px);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px 24px}

@media (prefers-reduced-motion:reduce){
  body,.schalter__punkt,.schalter__wort{transition:none}
}