/* ===========================================================
   feeschwaiger.de — Gestaltung „Fahrspur"
   Schriften liegen im Ordner /schriften und werden selbst
   ausgeliefert. Es geht keine Anfrage an Google.
   =========================================================== */

@font-face{
  font-family:'Archivo';
  src:url('schriften/Archivo.woff2') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo Narrow';
  src:url('schriften/ArchivoNarrow.woff2') format('woff2-variations');
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  --asphalt:#111214;
  --band:#1a1c1f;
  --band2:#202327;
  --ink:#f4f3f1;
  --dim:#8a8d92;
  --dimmer:#63666b;
  --line:#2a2d31;
  --line-hell:#3a3e44;
  --signal:#e4572e;

  --eo:cubic-bezier(.23,1,.32,1);
  --sanft:cubic-bezier(.16,1,.3,1);
  --eio:cubic-bezier(.77,0,.175,1);

  --rand:clamp(18px,3.4vw,52px);
  --breite:1360px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--asphalt); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif; font-weight:300;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

.bahn{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.eng{max-width:760px}
.schmal{font-family:'Archivo Narrow',sans-serif}
.caps{font-family:'Archivo Narrow',sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}

/* Tastaturbedienung sichtbar machen */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sprung{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--asphalt);
  padding:10px 18px;z-index:200}
.sprung:focus{left:var(--rand);top:10px}

/* ===================== Kopfzeile ===================== */
.kopf{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
  transition:background-color 320ms var(--eo),border-color 320ms var(--eo),padding 320ms var(--eo);
  border-bottom:1px solid transparent;background:none}
.kopf::before{content:'';position:absolute;left:0;right:0;top:0;height:230%;
  z-index:-1;pointer-events:none;transition:opacity 320ms var(--eo);
  background:linear-gradient(to bottom,rgba(17,18,20,.96) 0%,rgba(17,18,20,.93) 34%,
    rgba(17,18,20,.58) 62%,rgba(17,18,20,0) 100%)}
.kopf[data-fest]::before{opacity:0}
.kopf[data-fest]{background:rgba(17,18,20,.94);backdrop-filter:blur(12px) saturate(1.3);
  border-bottom-color:var(--line);padding:11px 0}
.kopf .bahn{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Das Zeichen ersetzt den Schriftzug. Die Schriftregeln bleiben stehen:
   lädt das Bild einmal nicht, greift der Alternativtext und sieht aus
   wie vorher. */
.marke img{display:block;height:17px;width:auto}
.kopf[data-fest] .marke img{height:16px}
.fusslogo{display:block;height:clamp(34px,4.6vw,46px);width:auto;
  margin-bottom:clamp(26px,4vh,40px);opacity:.88}
.marke{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.hauptnav{display:flex;align-items:center;gap:clamp(16px,2.2vw,28px)}
.hauptnav a{font-family:'Archivo Narrow',sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:#a2a5aa;position:relative;
  padding:6px 0;transition:color 220ms var(--eo)}
/* Fahrbahnmarkierung: die Linie zieht von links unter das Wort und
   verlässt es nach rechts, wie eine Markierung, die vorbeizieht. */
.hauptnav a:not(.knopf-anfrage)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--signal);transform:scaleX(0);transform-origin:right center;
  transition:transform 380ms var(--eio)}
.hauptnav a[aria-current]{color:var(--ink)}
.hauptnav a[aria-current]:not(.knopf-anfrage)::after{transform:scaleX(1);transform-origin:left center;
  background:var(--line-hell)}
.hauptnav a:hover{color:var(--ink)}
.hauptnav a:not(.knopf-anfrage):hover::after{transform:scaleX(1);transform-origin:left center;background:var(--signal)}
.knopf-anfrage,button[type=submit]{border:1px solid transparent;color:var(--ink)!important;
  padding:9px 17px!important;border-radius:3px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.028) 46%,rgba(228,87,46,.14) 100%);
  backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);
  transition:color 320ms var(--eo),transform 140ms var(--eo),background 320ms var(--eo)}
/* Der Rahmen: Verlaufsfläche, Mitte ausgeschnitten. */
.knopf-anfrage::after,button[type=submit]::after{content:'';position:absolute;inset:0;border-radius:3px;padding:1px;
  pointer-events:none;transition:background 320ms var(--eo);
  background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.09) 44%,rgba(228,87,46,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
/* Die Tönung fährt von links ein, als Verlauf aus Glut und Schwarz. */
.knopf-anfrage::before,button[type=submit]::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(228,87,46,.26) 0%,rgba(201,68,29,.17) 55%,rgba(125,36,8,.1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transform:scaleX(0);transform-origin:left center;transition:transform 420ms var(--eio)}
/* .hauptnav a setzt weiter unten eine eigene Übergangsliste und
   gewinnt über die Spezifität. Ohne diese Zeile springt der Knopf oben
   beim Drücken, statt zu federn wie der im Formular. */
.hauptnav .knopf-anfrage{transition:color 320ms var(--eo),transform 140ms var(--eo),background 320ms var(--eo)}
.knopf-anfrage:active,button[type=submit]:active{transform:scale(.97)}
.knopf-anfrage:hover::after,button[type=submit]:hover::after{background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 44%,rgba(228,87,46,.62) 100%)}
.knopf-anfrage:hover::before,button[type=submit]:hover::before,
.knopf-anfrage:active::before,button[type=submit]:active::before{transform:scaleX(1)}

/* Kontaktzeilen im Menü: auf dem Rechner verborgen, dort ist der
   Knopf „Anfragen" richtig, Wählen wäre dort kein sinnvoller Vorgang. */
.cta-zeilen{display:none}

/* Menü auf dem Telefon */
.menuknopf{display:none;background:none;border:0;color:var(--ink);padding:8px;cursor:pointer;
  transition:transform 140ms var(--eo)}
.menuknopf:active{transform:scale(.94)}
.menuknopf svg{display:block}
.menuknopf .zu{display:none}
.menuknopf[aria-expanded=true] .auf{display:none}
.menuknopf[aria-expanded=true] .zu{display:block}

/* ===================== Aufmacher ===================== */
.buehne{min-height:92svh;display:flex;align-items:flex-end;
  padding:clamp(110px,16vh,150px) 0 clamp(40px,7vh,78px);position:relative;overflow:hidden}
.buehne .grund{position:absolute;inset:0}
.buehne .grund picture{display:contents}
.buehne .grund img{width:100%;height:100%;object-fit:cover;object-position:50% 66%;
  filter:saturate(1.04) contrast(1.02) brightness(.98);
  transform:scale(1.11);animation:heranziehen 14s var(--sanft) forwards;will-change:transform}
@keyframes heranziehen{to{transform:scale(1)}}
.buehne .grund::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,var(--asphalt) 1%,rgba(17,18,20,.3) 30%,rgba(17,18,20,.08) 100%),
  linear-gradient(100deg,rgba(17,18,20,.6) 0%,rgba(17,18,20,.16) 46%,rgba(17,18,20,0) 70%)}
.buehne .bahn{position:relative;width:100%}

@keyframes steigen{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.buehne .bahn>.caps{color:rgba(244,243,241,.84)}
.buehne .bahn>.caps,.titel>*,.buehne .unten{opacity:0;
  animation:steigen 780ms var(--sanft) forwards}
.buehne .bahn>.caps{animation-duration:700ms;animation-delay:120ms}
.titel>*:nth-child(1){animation-delay:220ms}
.titel>*:nth-child(2){animation-delay:300ms}
.titel>*:nth-child(3){animation-delay:380ms}
.buehne .unten{animation-delay:520ms}
.titel>span{display:block}
.titel{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(42px,10.2vw,164px);line-height:.86;letter-spacing:-.028em;text-transform:uppercase}
.titel em{font-style:normal;display:block;
  -webkit-text-stroke:2px rgba(244,243,241,.92);color:rgba(244,243,241,.06);paint-order:stroke fill}
.buehne .unten{margin-top:clamp(22px,3.4vh,32px);display:flex;flex-wrap:wrap;
  gap:22px 40px;align-items:flex-end}
.buehne .unten p{max-width:44ch;color:#c5c7cb;line-height:1.68;font-size:15.5px}
.zaehler{margin-left:auto;display:flex;gap:clamp(18px,2.6vw,34px)}
.zaehler b{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(20px,2.3vw,28px);line-height:1.1}

/* ===================== Querstrecke ===================== */
.strecke{position:relative;
  /* Platz, den sich die Überschrift nimmt. Alles andere rechnet damit. */
  --kopfzone:clamp(150px,18vh,206px)}
.strecke .halt{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  overflow:hidden;padding-top:var(--kopfzone);box-sizing:border-box}
.schiene{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--rand);will-change:transform}
.wagen{flex:0 0 clamp(248px,31vw,420px);position:relative}
.wagen .bild{display:block;position:relative;overflow:hidden;aspect-ratio:3/4;
  /* 220 = Titelzeile und Untertitel der Karte, plus zweimal der untere
     Freiraum. Zweimal, weil die Karte mittig sitzt und jeder Zuschlag
     nur zur Hälfte nach unten wirkt. */
  max-height:calc(100svh - var(--kopfzone) - 220px);background:var(--band)}
.wagen .bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.8);transform:scale(1.03);
  transition:transform 900ms var(--eo),filter 500ms var(--eo)}
.wagen .nr{position:absolute;top:12px;left:14px;font-family:'Archivo Narrow',sans-serif;
  font-size:11px;letter-spacing:.2em;color:var(--signal)}
.wagen h3{margin-top:14px;font-family:'Archivo Narrow',sans-serif;font-weight:500;
  font-size:clamp(15px,1.5vw,20px);text-transform:uppercase;line-height:1.16}
.wagen p{margin-top:5px;font-size:12.5px;color:var(--dim)}
.wagen a{text-decoration:none;color:inherit;display:block}
@media(hover:hover)and(pointer:fine){
  .wagen a:hover .bild img{transform:scale(1.07);filter:saturate(1) brightness(1)}
  .wagen a:hover h3{color:var(--ink)}
}
.streckenkopf{position:absolute;top:clamp(78px,12vh,120px);left:0;right:0;pointer-events:none;z-index:2}
.streckenkopf .bahn{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.streckenkopf h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(20px,2.6vw,34px);text-transform:uppercase;letter-spacing:-.01em}
.streckenkopf a{pointer-events:auto;text-decoration:none}
.wischen{display:none}
@media(hover:hover)and(pointer:fine){.streckenkopf a:hover{color:var(--ink)}}
.fortschritt{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(36px,6vh,64px);
  height:1px;background:var(--line);z-index:2}
.fortschritt i{display:block;height:1px;background:var(--signal);transform-origin:left;transform:scaleX(0)}

/* ===================== Abschnitte ===================== */
section{padding:clamp(60px,10vh,118px) 0}
.abschnittskopf{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(24px,4vh,40px);border-top:1px solid var(--line);padding-top:16px}
.abschnittskopf h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;
  font-size:clamp(22px,3.2vw,40px);text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.abschnittskopf .rechts{margin-left:auto}

/* Über mich */
.person{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,76px);align-items:start}
.person p{color:#b6b9bd;line-height:1.82;font-size:15.5px}
.person p+p{margin-top:16px}
.person .spruch{margin-top:28px;border-left:2px solid var(--signal);padding-left:20px;
  font-family:'Archivo Narrow',sans-serif;font-size:clamp(17px,2.1vw,23px);line-height:1.4;color:var(--ink)}
.person .portraet{aspect-ratio:3/2;overflow:hidden;background:var(--band)}
.person .portraet img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.9)}

/* Leistungen als Akkordeon.
   Sechs Zeilen statt sechs Kästen. Wer mehr wissen will, klappt auf.
   Gebaut mit details/summary, damit es ohne JavaScript und mit der
   Tastatur funktioniert. Der erste Punkt steht offen, sonst sieht
   niemand, dass sich hier etwas öffnen lässt. */
.leistungen{border-top:1px solid var(--line)}
.leistungen details{border-bottom:1px solid var(--line)}
.leistungen summary{display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(17px,2.2vw,24px) 0;cursor:pointer;list-style:none;
  transition:padding-left 300ms var(--eo)}
.leistungen summary::-webkit-details-marker{display:none}
.leistungen summary::marker{content:''}
.leistungen .nr{flex:0 0 auto;font-family:'Archivo Narrow',sans-serif;font-size:12px;
  letter-spacing:.2em;color:var(--signal)}
.leistungen h3{flex:1;min-width:0;margin:0;font-family:'Archivo Narrow',sans-serif;
  font-weight:500;font-size:clamp(17px,2.1vw,25px);text-transform:uppercase;
  line-height:1.14;transition:color 200ms var(--eo)}
@media(hover:hover)and(pointer:fine){
  .leistungen summary:hover{padding-left:10px}
  .leistungen summary:hover h3{color:#fff}
}
.leistungen summary:active{transform:scale(.998)}

/* Das Kreuz dreht sich zum Strich, statt ein Zeichen auszutauschen */
.plus{position:relative;flex:0 0 auto;width:14px;height:14px}
.plus::before,.plus::after{content:'';position:absolute;background:var(--signal)}
.plus::before{left:0;top:6px;width:14px;height:2px}
.plus::after{left:6px;top:0;width:2px;height:14px;
  transition:transform 320ms var(--eo)}
.leistungen details[open] .plus::after{transform:rotate(90deg)}

.klappe{padding:0 0 clamp(18px,2.4vw,28px) calc(clamp(14px,2vw,28px) + 22px);
  display:grid;grid-template-rows:1fr}
.leistungen details[open] .klappe{animation:aufklappen 320ms var(--eo)}
@keyframes aufklappen{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
.klappe ul{min-height:0;overflow:hidden;list-style:none;color:#9da0a5;
  font-size:14.2px;line-height:1.7;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px clamp(18px,2.6vw,44px)}
.klappe li{padding-left:15px;position:relative}
.klappe li::before{content:'';position:absolute;left:0;top:.76em;width:7px;height:1px;
  background:var(--line-hell)}

/* Marken, nach Feld gruppiert.
   Eine reine Liste aus 26 Namen liest sich wie ein Telefonbuch. Die vier
   Felder machen daraus eine Aussage darüber, wo sie zu Hause ist. */
.marken{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
.marken .feld h3{font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--signal);text-align:center;
  padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.marken .feld span{display:block;font-family:'Archivo Narrow',sans-serif;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.04em;color:#a9acb1;padding:8px 0;text-align:center;
  transition:color 200ms var(--eo)}
@media(hover:hover)and(pointer:fine){.marken .feld span:hover{color:var(--ink)}}

/* ===================== Kontakt =====================
   Geteilter Schirm: links das Bild, rechts das Formular als Glasfeld.
   Das Bild läuft über die ganze Breite und wird nach rechts abgedunkelt,
   damit das Glas etwas hinter sich hat und nicht auf schwarzer Fläche
   schwebt. */
.kontakt{position:relative;overflow:hidden;padding:0;
  background:var(--asphalt);border-top:1px solid var(--line)}
.kontakt::before{content:'';position:absolute;inset:0;
  background:url('bilder/p12-ferrari.jpg') center 42%/cover;
  transform:scale(1.04)}
.kontakt::after{content:'';position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(17,18,20,.28) 0%,rgba(17,18,20,.46) 34%,
    rgba(17,18,20,.86) 56%,rgba(17,18,20,.95) 100%),
  linear-gradient(to bottom,rgba(17,18,20,.42),rgba(17,18,20,.1) 34%,rgba(17,18,20,.6))}
.kontakt .bahn{position:relative;z-index:2;max-width:none;padding:0}
.kontaktraster{display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:stretch;min-height:min(680px,86vh)}
.kontaktraster>div:first-child{display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(30px,4.6vw,76px)}
.kontaktraster .caps{color:rgba(244,243,241,.8)}
.kontaktraster h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,54px);line-height:.94;letter-spacing:-.022em;
  text-shadow:0 2px 26px rgba(0,0,0,.5)}
.kontaktraster .direkt{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.kontaktraster .direkt a{font-family:'Archivo Narrow',sans-serif;font-size:clamp(16px,1.8vw,20px);
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;width:fit-content;
  border-bottom:1px solid var(--line-hell);padding-bottom:3px;
  transition:border-color 220ms var(--eo),color 220ms var(--eo)}
.kontaktraster .direkt .kreis,.kontaktraster .direkt .pf,.kontaktraster .direkt .txt b{display:none}
@media(hover:hover)and(pointer:fine){.kontaktraster .direkt a:hover{border-color:var(--signal)}}

form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#anfrage{align-self:center;margin:clamp(20px,3vw,54px);
  background:rgba(19,21,24,.56);backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:clamp(22px,2.6vw,36px);
  box-shadow:0 26px 60px rgba(0,0,0,.42)}
#anfrage input,#anfrage select,#anfrage textarea{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17);border-radius:7px}
#anfrage input:hover,#anfrage select:hover,#anfrage textarea:hover{border-color:rgba(255,255,255,.3)}
#anfrage input:focus,#anfrage select:focus,#anfrage textarea:focus{
  background:rgba(255,255,255,.12);border-color:var(--signal)}
#anfrage .hinweis{color:rgba(244,243,241,.62)}
#anfrage .hinweis a{color:rgba(244,243,241,.85)}
.feld{display:flex;flex-direction:column;gap:7px}
.feld.voll{grid-column:1/-1}
label{font-family:'Archivo Narrow',sans-serif;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
input,select,textarea{
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:300;color:var(--ink);
  background:var(--asphalt);border:1px solid var(--line);border-radius:2px;
  padding:12px 13px;width:100%;
  transition:border-color 200ms var(--eo),background-color 200ms var(--eo)}
textarea{resize:vertical;min-height:120px;line-height:1.6}
input:hover,select:hover,textarea:hover{border-color:var(--line-hell)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);background:#0d0e10}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.absenden{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
button[type=submit]{
  font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 26px!important;cursor:pointer}
/* Der Rahmen: Verlaufsfläche, Mitte ausgeschnitten. */
/* Kräftiger als oben: der Grund unter diesem Knopf ist fast schwarz,
   dieselbe Tönung wäre dort nicht zu sehen. */
button[type=submit]::before{
  background:linear-gradient(118deg,rgba(228,87,46,.42) 0%,rgba(201,68,29,.28) 55%,rgba(125,36,8,.15) 100%)}
.hinweis{font-size:12.5px;color:var(--dimmer);max-width:42ch;line-height:1.6}
.hinweis a{color:var(--dim)}

/* ===================== Fußzeile ===================== */
.fuss{border-top:1px solid var(--line);padding:clamp(34px,5vh,54px) 0 30px;background:var(--asphalt)}
.fussraster{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:space-between;align-items:baseline}
.fussraster a{text-decoration:none;color:var(--dim);transition:color 180ms var(--eo)}
@media(hover:hover)and(pointer:fine){.fussraster a:hover{color:var(--ink)}}
.fussnav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* ===================== Projektseite ===================== */
.seitenkopf{padding:clamp(120px,18vh,180px) 0 clamp(26px,4vh,44px);border-bottom:1px solid var(--line)}
.seitenkopf h1{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(36px,7.4vw,104px);line-height:.88;letter-spacing:-.025em}
.seitenkopf p{margin-top:20px;max-width:56ch;color:#b6b9bd;line-height:1.74}

.filter{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:clamp(22px,3.4vh,34px) 0 clamp(18px,3vh,28px)}
/* Der Schalter für die Formate. Gestrichelt, weil dahinter noch etwas
   liegt, das man erst holen muss. */
.filter .mehr{display:inline-flex;align-items:center;gap:9px;
  margin-left:12px;border-style:dashed;color:var(--signal)}
.filter .mehr .plus{width:11px;height:11px}
.filter .mehr .plus::before{top:5px;width:11px}
.filter .mehr .plus::after{left:5px;height:11px}
.filter .mehr[aria-expanded=true] .plus::after{transform:rotate(90deg)}
.filter .formatliste{display:none;width:100%;flex-wrap:wrap;gap:7px;
  padding:14px 0 2px;margin-top:11px;border-top:1px solid var(--line)}
.filter .formatliste[data-auf]{display:flex}
.filter button{font-family:'Archivo Narrow',sans-serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:2px;padding:8px 14px;cursor:pointer;
  transition:transform 140ms var(--eo),border-color 200ms var(--eo),color 200ms var(--eo),background-color 200ms var(--eo)}
.filter button:active{transform:scale(.97)}
@media(hover:hover)and(pointer:fine){.filter button:hover{border-color:var(--line-hell);color:var(--ink)}}
.filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--asphalt)}

.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);
  padding-bottom:clamp(50px,9vh,110px)}
.tafel{display:block;text-decoration:none;color:inherit;
  transition:opacity 340ms var(--eo),transform 340ms var(--eo)}
.tafel[hidden]{display:none}
.tafel .bild{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--band);position:relative}
.tafel .bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.84);
  transform:scale(1.02);transition:transform 820ms var(--eo),filter 460ms var(--eo)}
.tafel .marke{position:absolute;left:0;bottom:0;color:var(--ink);
  background:linear-gradient(130deg,rgba(228,87,46,.32) 0%,rgba(228,87,46,.09) 58%,rgba(228,87,46,0) 100%),
    linear-gradient(130deg,rgba(17,18,20,.72) 0%,rgba(17,18,20,.8) 100%);
  backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(228,87,46,.45),
    0 6px 18px rgba(0,0,0,.35);
  font-family:'Archivo Narrow',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;clip-path:inset(0 100% 0 0);transition:clip-path 380ms var(--eo)}
.tafel h2{font-family:'Archivo Narrow',sans-serif;font-weight:500;font-size:clamp(16px,1.7vw,21px);
  text-transform:uppercase;line-height:1.16;margin:13px 0 4px}
.tafel .meta{display:block;font-size:12.5px;color:var(--dim)}
.tafel .orte{display:block;margin-top:4px;font-size:12.5px;color:var(--dimmer)}
.tafel .text{display:block;margin-top:8px;font-size:13.4px;color:#9da0a5;line-height:1.62}
@media(hover:hover)and(pointer:fine){
  .tafel:hover .bild img{transform:scale(1.05);filter:saturate(1) brightness(1)}
  .tafel:hover .marke{clip-path:inset(0 0 0 0)}
}
.leermeldung{padding:40px 0;color:var(--dim)}

/* ===================== Rechtstexte ===================== */
.rechtstext{padding:clamp(110px,16vh,170px) 0 clamp(60px,9vh,110px)}
.rechtstext h1{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,64px);line-height:.94;letter-spacing:-.02em;margin-bottom:clamp(24px,4vh,40px)}
.rechtstext h2{font-family:'Archivo Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;margin:34px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.rechtstext h3{font-family:'Archivo Narrow',sans-serif;font-weight:500;font-size:16px;margin:20px 0 8px}
.rechtstext p,.rechtstext li{color:#b1b4b9;line-height:1.78;font-size:14.8px}
.rechtstext p+p{margin-top:12px}
.rechtstext ul{margin:10px 0 0 18px}
.rechtstext li{margin-bottom:6px}
.rechtstext a{color:var(--ink)}
.offen::after{content:'';position:absolute;inset:0;border-radius:3px;padding:1px;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 44%,rgba(228,87,46,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.offen{position:relative;border:1px solid transparent;border-radius:3px;
  background:linear-gradient(135deg,rgba(228,87,46,.12) 0%,rgba(228,87,46,.035) 52%,rgba(255,255,255,.022) 100%);
  padding:16px 18px;margin:18px 0;
  font-size:13.6px;color:#d9c0b6}



/* ===================== Bedienung mit dem Finger =====================
   Apple rechnet mit mindestens 44px Kantenlänge. Gemessen waren es
   vorher 18 bis 34px. Außerdem zoomt iOS beim Hineintippen in ein Feld,
   dessen Schrift kleiner als 16px ist. */
@media (pointer:coarse), (max-width:760px){
  a,button{-webkit-tap-highlight-color:transparent}
  .marke{display:inline-block;padding:10px 0}
  .menuknopf{padding:15px}
  .hauptnav a{padding:14px 0}
  .fussnav a,.fussraster a{display:inline-block;padding:13px 0}
  .kontaktraster .direkt a{padding-top:10px;padding-bottom:11px}
  .streckenkopf a{display:inline-block;padding:13px 0}
  .filter button{min-height:44px;padding:11px 16px;font-size:12.5px}
  input,select,textarea{font-size:16px;padding:14px 13px}
  button[type=submit]{min-height:50px}
  .tafel,.wagen a{-webkit-touch-callout:none}
}

/* ===================== Kacheln ohne Foto =====================
   Solange kein Bild vorliegt, tritt eine gesetzte Schrifttafel an
   seine Stelle. Sie füllt dasselbe Seitenverhältnis, damit das
   Raster nicht springt, wenn die Fotos später nachkommen. */
.platzhalter{display:flex!important;flex-direction:column;justify-content:flex-end;
  gap:6px;padding:clamp(14px,2vw,24px);
  background:linear-gradient(158deg,var(--band2) 0%,var(--band) 62%,#141619 100%)}
.platzhalter::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(244,243,241,.022) 16px 32px)}
.platzhalter::after{content:'';position:absolute;left:0;top:0;width:3px;height:44px;background:var(--signal)}
.ph-jahr{position:relative;font-family:'Archivo Narrow',sans-serif;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--signal)}
.ph-titel{position:relative;font-family:'Archivo Narrow',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:clamp(22px,2.8vw,42px);line-height:.94;
  letter-spacing:-.022em;color:rgba(244,243,241,.34)}
.wagen .platzhalter .nr,.tafel .platzhalter .marke{z-index:2}
/* Platz für das Schildchen, sonst liegt es auf dem Kundennamen */
.tafel .platzhalter{padding-bottom:46px}
.tafel .platzhalter .marke{clip-path:inset(0 0 0 0)}

/* Kundenname über dem Projekttitel */
.wagen .kunde,.tafel .kunde{display:block;font-family:'Archivo Narrow',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);
  margin-top:13px}
.wagen .kunde+h3,.tafel .kunde+h2{margin-top:4px}

/* ===================== Einblenden ===================== */
.zeig{opacity:0;transform:translateY(16px);
  transition:opacity 620ms var(--eo),transform 620ms var(--eo)}
.zeig.da{opacity:1;transform:none}

/* ===================== Schmale Geräte ===================== */
@media(max-width:900px){
  .person{display:flex;flex-direction:column}
  .person .portraet{order:-2;max-width:none;aspect-ratio:4/5;
    margin:0 calc(-1 * var(--rand)) 24px}
  .person #persontext{display:contents}
  .person .spruch{order:-1;margin:0 0 26px;font-size:17px}
  .person .portraet img{object-position:41% 46%}
  .klappe ul{grid-template-columns:1fr 1fr}
  /* Das Kontaktbild ist quer aufgebaut, der Ferrari sitzt rechts unten.
     Über die ganze hohe Fläche gezogen sah man nur Bergmitte. Auf dem
     Telefon läuft es deshalb als Streifen im eigenen Seitenverhältnis:
     nichts wird beschnitten, das Bild bleibt wie fotografiert. */
  .kontakt{background:var(--asphalt)}
  .kontakt::before{inset:0 0 auto;height:min(100vw,460px);transform:none;
    background-position:55% 50%;
    /* Dieselbe Behandlung wie die Projektfotos auf der Seite, eine Spur
       tiefer, weil es hier Grund ist und nicht Motiv. */
    filter:saturate(.82) brightness(.74)}
  /* Der Schleier bleibt bis 74 Prozent fast durchsichtig, dort steht der
     Wagen. Erst darunter läuft der Streifen in den Grund aus. */
  .kontakt::after{inset:0 0 auto;height:calc(min(100vw,460px) + 60px);background:
    linear-gradient(to bottom,rgba(17,18,20,.5) 0%,rgba(17,18,20,.24) 26%,
      rgba(17,18,20,.3) 70%,rgba(17,18,20,.72) 88%,var(--asphalt) 100%)}
  .kontaktraster{grid-template-columns:1fr;min-height:0}
  /* ============ 4. Kontaktwege als Karten wie im Menü ============ */
  .kontaktraster .direkt{margin-top:22px;gap:0;
    border-top:1px solid rgba(255,255,255,.14)}
  .kontaktraster .direkt a{display:flex;align-items:center;gap:14px;width:auto;
    padding:15px 0!important;border-bottom:1px solid rgba(255,255,255,.14);
    transition:padding-left 240ms var(--eo)}
  .kontaktraster .direkt a:active{padding-left:6px}
  .kontaktraster .direkt .kreis{display:grid;flex:0 0 auto;width:38px;height:38px;
    border-radius:50%;position:relative;border:1px solid transparent;place-items:center;
    color:var(--signal);
    background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 48%,rgba(228,87,46,.16) 100%)}
  .kontaktraster .direkt .kreis::after{content:'';position:absolute;inset:0;border-radius:50%;
    padding:1px;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 44%,rgba(228,87,46,.5) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude}
  .kontaktraster .direkt .txt{flex:1;min-width:0}
  .kontaktraster .direkt .txt b{display:block;font-family:'Archivo Narrow',sans-serif;
    font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .kontaktraster .direkt .txt span{display:block;font-size:16px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kontaktraster .direkt .pf{display:block;color:var(--dim);font-size:18px}
  .kontaktraster>div:first-child{padding:calc(min(100vw,460px) + 30px) var(--rand) clamp(22px,4vh,34px)}
  #anfrage{margin:0 var(--rand) clamp(34px,6vh,60px);backdrop-filter:blur(14px)}
  .galerie{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  /* Kleinste Schriften eine Spur größer, 10,5px liest auf dem Telefon niemand */
  .caps{font-size:12px}
  .wagen p,.tafel .meta{font-size:13px}
  .tafel .marke{font-size:11.5px;padding:6px 11px}
  .ph-jahr{font-size:12px}
  section{padding:clamp(48px,8vh,118px) 0}
  /* Die Konturschrift wird bei 42px sonst zu fett */
  .titel em{-webkit-text-stroke-width:1.5px}

  .menuknopf{display:block}
  .hauptnav{position:fixed;inset:0 0 auto 0;top:0;padding:74px var(--rand) 28px;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--asphalt);
    border-bottom:1px solid var(--line);box-shadow:0 22px 40px rgba(0,0,0,.45);
    clip-path:inset(0 0 100% 0);transition:clip-path 380ms var(--eo);z-index:-1}
  .hauptnav[data-offen]{clip-path:inset(0 0 0 0)}
  .hauptnav a{font-size:19px;letter-spacing:.06em;padding:11px 0;color:var(--ink)}
  .hauptnav .knopf-anfrage{display:none}
  .cta-zeilen{display:block;width:100%;margin-top:20px;border-top:1px solid var(--line)}
  .cta-zeilen a{display:flex;align-items:center;gap:14px;padding:17px 0;
    border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
    transition:padding-left 240ms var(--eo)}
  .cta-zeilen a:active{padding-left:6px}
  .cta-zeilen .kreis{flex:0 0 auto;width:38px;height:38px;border-radius:50%;position:relative;
    border:1px solid transparent;display:grid;place-items:center;color:var(--signal);
    background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 48%,rgba(228,87,46,.16) 100%)}
  .cta-zeilen .kreis::after{content:'';position:absolute;inset:0;border-radius:50%;padding:1px;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 44%,rgba(228,87,46,.5) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude}
  .cta-zeilen .txt{flex:1;min-width:0}
  .cta-zeilen .txt b{display:block;font-family:'Archivo Narrow',sans-serif;font-weight:600;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .cta-zeilen .txt span{display:block;font-size:16px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cta-zeilen .pf{color:var(--dim);font-size:18px}
  .zaehler{margin-left:0;width:100%;flex-wrap:wrap;gap:16px 26px}
  .klappe ul{grid-template-columns:1fr}
  .klappe{padding-left:0}
  .galerie{grid-template-columns:1fr}
  .marken{grid-template-columns:1fr 1fr}
  form{grid-template-columns:1fr}
  /* Querstrecke: auf dem Telefon wischt man seitwärts, statt zu stapeln.
     Das hält die Idee der Fahrspur und spart rund 2700px Scrollweg. */
  .strecke{height:auto!important}
  .strecke .halt{position:static;height:auto;display:block;overflow:visible;padding:30px 0 6px}
  .schiene{flex-wrap:nowrap;width:100%;gap:12px;transform:none!important;
    padding:0 0 0 var(--rand);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .schiene::-webkit-scrollbar{display:none}
  .wagen{flex:0 0 min(74vw,300px);scroll-snap-align:start}
  .wagen:last-child{margin-right:var(--rand)}
  .streckenkopf{position:static;margin-bottom:16px}
  .streckenkopf .bahn{flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .streckenkopf h2{width:100%}
  .wischen{display:inline;color:var(--signal)}
  .fortschritt{display:none}
  .buehne{min-height:86svh}
  /* Handy: eigener Zuschnitt im Hochformat 1:2, siehe <picture> im
     Aufmacher. Der Wagen steht dort oben, darunter liegt Fahrbahn für
     den Textblock. Quer geschnitten sah man nur einen Streifen Wald. */
  .buehne .grund img{object-position:50% 25%}
  .buehne .grund::after{background:
    linear-gradient(to top,var(--asphalt) 3%,rgba(17,18,20,.88) 30%,rgba(17,18,20,.44) 56%,rgba(17,18,20,.1) 100%),
    linear-gradient(to bottom,rgba(17,18,20,.5) 0%,rgba(17,18,20,.26) 26%,rgba(17,18,20,0) 44%)}
  /* Der Einleitungsabsatz steht wortgleich noch einmal unter „Über mich“.
     Auf dem Telefon kostet er 170 Pixel und legt sich über den Wagen,
     also bleibt er hier weg. Er ist einen Wisch entfernt. */
  .buehne .unten p{display:none}
  .buehne .unten{margin-top:clamp(26px,4vh,38px)}

  /* Filterzeile war 413px hoch, also ein halbes Telefon voller Knöpfe.
     Jetzt eine Zeile zum Wischen, mit weichem Rand. */
  .filter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:16px var(--rand);margin:0 calc(-1 * var(--rand));
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%)}
  .filter::-webkit-scrollbar{display:none}
  .filter button{flex:0 0 auto}
  .filter .mehr{display:none}
  .filter .formatliste,.filter .formatliste[data-auf]{display:contents}

  /* Kennzahlen als festes Zweierraster, sonst rutschen sie ungleich */
  .zaehler{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-left:0;width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  .zeig{opacity:1;transform:none}
}


/* ===================== Weniger Bewegung =====================
   Wer im Betriebssystem „Bewegung reduzieren“ gewählt hat, bekommt die
   Seite ohne Heranziehen, ohne Staffelung und ohne hochzählende Zahlen.
   seite.js fragt dieselbe Einstellung ab. */
@media(prefers-reduced-motion:reduce){
  .buehne .grund img{animation:none!important;transform:none!important}
  .buehne .bahn>.caps,.titel>*,.buehne .unten{opacity:1!important;animation:none!important}
  .zeig{opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}