/* ==========================================================================
   Marqués Autocares y Limousines — Palma de Mallorca
   Gestaltung & Umsetzung: PixelUno · https://pixeluno.es

   Unverbindliche Vorschau.

   Die Welt dieser Seite ist die spanische Verkehrsdrucksache des
   Gründungsjahrs 1968: der Fahrschein, das Tarifblatt, der Fahrplan. Nicht
   als Nostalgie, sondern als Ordnungslogik — geführte Felder, Haarlinien,
   Serie und Nummer, gestanzte Perforation. Jedes Feld dieser Seite trägt
   eine echte Angabe des Betriebs; erfundene Seriennummern gibt es nicht,
   die „Nummer" des Belegs ist die Telefonnummer des Hauses.

   Keine Abhängigkeiten, keine Buildkette für dieses Stylesheet.
   ========================================================================== */

/* ── Schriften ─────────────────────────────────────────────────────────────
   Archivo trägt die Aussagen: ein Grotesk aus der Linie amerikanischer
   Verkehrs- und Zeitungsschriften, mit echter Breitenachse — verdichtet
   spricht sie wie der Aufdruck auf einem Fahrplan.
   Onest liest ruhig und trägt die drei Sprachen ohne Manier.
   Chivo Mono steht ausschließlich dort, wo gemessen wird: Plätze,
   Uhrzeiten, Nummern, Felder.
   Alle drei latin-subgesetzt — ES, EN und DE brauchen nichts darüber.   */
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo.woff2") format("woff2-variations");font-weight:400 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("assets/fonts/onest.woff2") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("assets/fonts/chivomono.woff2") format("woff2-variations");font-weight:400 500;font-style:normal;font-display:swap}

/* ── Marken-Token ─────────────────────────────────────────────────────────
   Gold und Dunkel sind gesetzt: das Gold stammt pixelgenau aus dem
   bestehenden Logo, der Dunkelton aus dem bestehenden Theme.
   Kartonton und Stempelrot kommen aus der Drucksachenwelt hinzu.         */
:root{
  /* Tinte — das dominierende Feld */
  --ink:#0F1418;
  --ink-2:#141B21;
  --ink-3:#1B242B;
  --rule:#2B383F;
  --rule-soft:#212C33;

  /* Gold — die Druckfarbe der Formularteile */
  --gold:#D7B65D;
  --gold-ink:#6B5217;      /* dieselbe Farbe, aber lesbar auf Karton */

  /* Karton — das zweite Feld, dunkle Schrift darauf */
  --card:#E6DCC8;
  --card-rule:#BCAE93;
  --card-ink:#221E17;
  --card-muted:#5E5647;

  /* Schrift auf Tinte */
  --bone:#E4E7E5;
  --muted:#97A3AA;         /* aus dem Blau der Tinte getönt, nicht grau */

  /* Stempelrot — ausschließlich als Stempel, nie als Fläche.
     Zwei Aufhellungen desselben Tons: der dunkle Abdruck sitzt auf
     Karton (4,9:1), der helle auf Tinte (5,8:1). Dieselbe Farbe,
     zwei Untergründe — ein Stempel, der auf beiden lesbar ist. */
  --sello:#A6362C;
  --sello-ink:#E0705F;

  /* Papierweiß. Es gehört nicht zur Palette des Hauses, sondern zum Medium:
     die Förderlogos brauchen weißen Grund, der Druck braucht weißes Blatt. */
  --paper:#fff;
  --print-ink:#000;
  --print-rule:#999;

  /* Der Abdruck des gestanzten Lochs. Teil des Schattenvokabulars, keine
     Flächenfarbe — deshalb hier und nicht in der Palette. */
  --shadow-punch:inset 0 2px 5px rgb(0 0 0 / .85);

  /* Vorschau-Streifen, Agenturvorgabe PixelUno */
  --preview:#6D28D9;
  --preview-fg:#fff;
  --strip-h:2.125rem;

  /* Raster */
  --wrap:75rem;
  --measure:34rem;
  --gutter:clamp(1.15rem,4.5vw,2.75rem);
  --section:clamp(4.5rem,9vw,8rem);

  /* Größen — jede Schriftgröße der Seite kommt aus dieser Skala */
  --fs-2xs:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-body-2:.9375rem;
  --fs-base:1.0625rem;
  --fs-lead:clamp(1.125rem,1rem + .6vw,1.375rem);
  --fs-h3:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --fs-h2:clamp(1.75rem,1.35rem + 2vw,3rem);
  --fs-h1:clamp(2.6rem,1.6rem + 5.2vw,5.75rem);
  /* Display-Stufen, die nur an je einer Stelle stehen — die Skala bleibt
     trotzdem die einzige Quelle, sonst ist sie keine Skala. */
  --fs-3xs:.5625rem;                                  /* Zeile unter der Wortmarke */
  --fs-brand:1.15rem;
  --fs-brand-sm:1rem;                                 /* schmale Ansicht */
  --fs-punch:clamp(1.75rem,4.5vw,2.75rem);            /* Ziffern im Lochstreifen */
  --fs-tariff:clamp(1.35rem,3vw,2.1rem);              /* Zeilen des Tarifblatts */
  --fs-h1-sub:clamp(2.25rem,1.5rem + 3.6vw,4.25rem);  /* Überschrift der Unterseiten */
  --fs-year:clamp(6rem,20vw,15rem);                   /* die Jahreszahl 1968 */

  --ease:cubic-bezier(.2,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--strip-h) + 5.5rem)}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:"Onest",ui-sans-serif,system-ui,sans-serif;
  font-size:var(--fs-base);line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,dt{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--gold);color:var(--ink)}

/* Fokus: eine gestanzte Marke, kein Systemring. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}
.on-card :focus-visible{outline-color:var(--gold-ink)}

.skip{
  position:fixed;top:calc(var(--strip-h) + .5rem);left:.5rem;z-index:90;
  transform:translateY(-250%);
  background:var(--gold);color:var(--ink);
  padding:.6rem 1rem;font-weight:600;font-size:var(--fs-sm);
  text-decoration:none;transition:transform .2s var(--ease);
}
.skip:focus{transform:none}

.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}

/* ── Typografische Rollen ─────────────────────────────────────────────────
   „display" ist die verdichtete Grotesk in Versalien: laut, aber selten.
   „mono" ist ausschließlich Messwert — Plätze, Zeiten, Nummern.          */
.display{
  font-family:"Archivo",ui-sans-serif,sans-serif;
  font-weight:800;font-stretch:76%;
  text-transform:uppercase;
  line-height:.92;letter-spacing:-.012em;
  text-wrap:balance;
}
.mono{
  font-family:"Chivo Mono",ui-monospace,monospace;
  font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.lead{font-size:var(--fs-lead);line-height:1.5}
.dim{color:var(--muted)}
.on-card .dim{color:var(--card-muted)}
.on-card .proof{--stamp:var(--sello)}

/* ── Vorschau-Streifen ────────────────────────────────────────────────────
   Fest, nicht schließbar, immer über dem Kopf. Agenturvorgabe.          */
.preview-strip{
  position:fixed;inset:0 0 auto 0;z-index:60;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--preview);color:var(--preview-fg);
  font-size:var(--fs-xs);font-weight:500;line-height:1.3;
  text-align:center;padding:.45rem var(--gutter);
}

/* ── Kopf ─────────────────────────────────────────────────────────────────
   Der Kopf ist die obere Kante des Belegs: eine Haarlinie, sonst nichts.
   Beim Scrollen legt sich Tinte dahinter.                               */
.site-header{
  position:fixed;inset:var(--strip-h) 0 auto 0;z-index:50;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.site-header.is-stuck{
  background:rgb(15 20 24 / .93);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--rule);
}
.header__in{display:flex;align-items:center;gap:clamp(.65rem,2vw,1.75rem);padding-block:.7rem}

/* Wortmarke: das Siegel bleibt, der Chromverlauf von 2005 geht.        */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand__seal{width:2.4rem;height:2.4rem;flex:0 0 auto}
.brand__name{
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:90%;
  font-size:var(--fs-brand);letter-spacing:-.01em;line-height:1;color:var(--bone);
  display:block;
}
.brand__sub{
  display:block;margin-top:.24rem;
  font-family:"Chivo Mono",monospace;font-size:var(--fs-3xs);font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);margin-left:auto}
.nav__tel{display:none}
.nav a{
  font-size:var(--fs-sm);font-weight:500;text-decoration:none;color:var(--bone);
  padding-block:.35rem;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.header__tel{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  border:1px solid var(--rule);padding:.5rem .85rem;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.header__tel:hover{border-color:var(--gold);background:rgb(215 182 93 / .07)}
.header__tel b{font-family:"Chivo Mono",monospace;font-size:var(--fs-sm);font-weight:500;letter-spacing:.02em;white-space:nowrap}
.header__tel svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--gold)}

.lang{display:flex;align-items:center;gap:.1rem}
.lang a{
  font-family:"Chivo Mono",monospace;font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:.1em;text-decoration:none;color:var(--muted);
  padding:.4rem .4rem;transition:color .2s var(--ease);
}
.lang a:hover{color:var(--bone)}
.lang a[aria-current]{color:var(--gold)}
/* Die Trennpunkte zwischen den Sprachen standen in der Linienfarbe und
   waren mit 1,5:1 praktisch unsichtbar — die drei Kürzel verschwammen
   zu einem Block. Gedämpft, aber lesbar. */
.lang span{color:var(--muted);font-size:var(--fs-2xs);opacity:.55}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  width:2.75rem;height:2.75rem;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.burger svg{width:1.15rem;height:1.15rem}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .m{display:none}

/* ── Beleg-Bausteine ──────────────────────────────────────────────────────
   Die wiederkehrende Form der Seite: eine Kopfleiste, in der links und
   rechts je eine echte Angabe steht, darunter eine Haarlinie.           */
.rail{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.65rem;border-bottom:1px solid var(--rule);
  color:var(--gold);
}
.rail > :last-child{color:var(--muted)}
.on-card .rail{border-bottom-color:var(--card-rule);color:var(--gold-ink)}
.on-card .rail > :last-child{color:var(--card-muted)}

/* ── Knöpfe ───────────────────────────────────────────────────────────────
   Flach und geführt. Der aufsteigende Grund beim Hover ist die Bewegung
   des Stempels, nicht Dekoration.                                       */
.btn{
  --btn-fg:var(--ink);--btn-bg:var(--gold);--btn-fill:var(--ink);--btn-hover-fg:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.85rem 1.5rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:88%;
  font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-fill);
  transform:translateY(101%);transition:transform .45s var(--ease-out);
}
.btn:hover{color:var(--btn-hover-fg);border-color:var(--gold)}
.btn:hover::before{transform:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--bone);--btn-fill:var(--gold);--btn-hover-fg:var(--ink);border-color:var(--rule)}
.on-card .btn{--btn-fg:var(--card);--btn-bg:var(--card-ink);--btn-fill:var(--gold);--btn-hover-fg:var(--card-ink)}
.on-card .btn:hover{border-color:var(--card-ink)}
.btn svg{width:1.05rem;height:1.05rem;flex:0 0 auto}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{color:var(--btn-fg);border-color:var(--btn-bg)}
.btn[disabled]:hover::before,.btn[aria-disabled="true"]:hover::before{transform:translateY(101%)}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:var(--fs-body-2);text-decoration:none;
  color:var(--gold);padding-bottom:.15rem;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease);
}
.tlink:hover{background-size:100% 1px}
.on-card .tlink{color:var(--gold-ink);background-image:linear-gradient(var(--gold-ink),var(--gold-ink))}
.tlink svg{width:.9rem;height:.9rem;transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
main{padding-top:0}
section{padding-block:var(--section)}
/* Wo Tinte auf Karton trifft, ist die Naht eine Stanzung, kein Farbwechsel. */
.field-card{background:var(--card);color:var(--card-ink);position:relative}
.field-card::before,.field-card::after{
  content:"";position:absolute;left:0;right:0;height:5px;z-index:1;
  background-image:radial-gradient(circle at center,var(--ink) 2.4px,transparent 2.5px);
  background-size:11px 5px;background-repeat:repeat-x;
}
.field-card::before{top:-2px}
.field-card::after{bottom:-2px}
.field-ink2{background:var(--ink-2)}
.sec-head{display:grid;gap:1.3rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p{max-width:var(--measure);color:var(--muted)}
.on-card .sec-head p{color:var(--card-muted)}

/* ── Aufblenden ───────────────────────────────────────────────────────────
   Der Inhalt ist ohne JavaScript sichtbar. Erst wenn das Skript läuft,
   setzt es .js auf <html> und darf verbergen — die Bestandsseite macht
   den Fehler andersherum und bleibt ohne Skript leer.

   Drei Bewegungen, eine Grammatik — so entsteht eine Drucksache:
   die Linie wird gezogen, die Jahreszahl wird gestempelt, der Satz wird
   gelegt. Alles andere bleibt still.                                     */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* Die Linie wird gezogen: das Lineal fährt von links durch, bevor die
   beiden Felder darüber stehen. */
.js .reveal .rail{border-bottom-color:transparent}
.js .reveal .rail > *{opacity:0}
.js .reveal.is-in .rail{
  border-bottom-color:var(--rule);
  transition:border-bottom-color .01s linear calc(var(--d,0ms) + 460ms);
}
.js .on-card .reveal.is-in .rail{border-bottom-color:var(--card-rule)}
.js .reveal.is-in .rail::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:left;
  animation:rule-draw .55s var(--ease-out) var(--d,0ms) both;
}
.js .reveal .rail{position:relative}
.js .reveal.is-in .rail > *{
  opacity:1;transition:opacity .5s var(--ease) calc(var(--d,0ms) + 380ms);
}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Die Jahreszahl wird gestempelt: der Abdruck setzt sich, statt zu gleiten. */
.js .since__year.reveal{opacity:0;transform:scale(1.035);filter:blur(3px)}
.js .since__year.reveal.is-in{
  opacity:1;transform:none;filter:none;
  transition:opacity .5s var(--ease-out),transform .62s var(--ease-out),filter .5s var(--ease-out);
}

/* ══ HERO ═══════════════════════════════════════════════════════════════════
   Das erste Bild ist der ausgefüllte Beleg: oben die Kopfleiste mit Ort und
   Nummer des Hauses, in der Mitte die Aussage, unten die drei Felder, die
   ein Besucher wirklich prüft — Ort, Zeiten, Parkplatz im Terminal.       */
.hero{
  position:relative;min-height:min(100svh,52rem);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--strip-h) + 7rem);padding-bottom:clamp(2rem,5vw,3.5rem);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* Zwei Schleier: einer trägt die Schrift links, einer setzt die untere Kante. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgb(15 20 24 / .96) 0%,rgb(15 20 24 / .82) 38%,rgb(15 20 24 / .35) 72%,rgb(15 20 24 / .55) 100%),
    linear-gradient(180deg,rgb(15 20 24 / .85) 0%,transparent 26%,transparent 52%,rgb(15 20 24 / .92) 100%);
}
.hero__in{position:relative;z-index:1}
.hero__rail{margin-bottom:clamp(1.75rem,4vw,3rem)}
.hero h1{font-size:var(--fs-h1);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero__lead{margin-top:1.5rem;max-width:38ch;color:var(--bone)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.75rem,3.5vw,2.5rem)}

/* Die drei geprüften Felder, als Tabelle eines Belegs gesetzt. */
.hero__fields{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
}
.hero__fields div{padding:1.15rem 1.35rem 0 0}
.hero__fields div + div{border-left:1px solid var(--rule);padding-left:1.35rem}
.hero__fields dt{color:var(--gold);margin-bottom:.5rem}
.hero__fields dd{font-size:var(--fs-body-2);line-height:1.4;color:var(--bone)}

/* ══ LOCHSTREIFEN ═══════════════════════════════════════════════════════════
   Die Signaturhandlung der Seite. Auf dem Fahrschein lochte der Schaffner
   die bezahlte Zone; hier locht der Besucher seine Gruppengröße, und die
   Flotte darunter richtet sich danach. Ohne JavaScript sind es Sprunglinks
   auf die Flotte, die Seite bleibt vollständig bedienbar.                */
.punch{
  padding-block:clamp(3rem,6vw,4.5rem);background:var(--ink-2);
  border-bottom:1px solid var(--rule);position:relative;
}
/* Die Oberkante der Lochbande ist die Trennkante des Blocks. */
.punch::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background-image:radial-gradient(circle at center,var(--rule) 1.5px,transparent 1.6px);
  background-size:10px 3px;background-repeat:repeat-x;
}
.punch__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}
.punch__head h2{font-size:var(--fs-h3);font-family:"Onest",sans-serif;font-weight:600;text-transform:none;letter-spacing:0}
.punch__strip{
  display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--rule);background:var(--ink);
}
.punch__btn{
  position:relative;display:grid;gap:.35rem;justify-items:center;
  padding:1.4rem .5rem 1.5rem;background:none;border:0;cursor:pointer;
  border-left:1px solid var(--rule);
  transition:background-color .3s var(--ease);
  text-decoration:none;
}
.punch__btn:first-child{border-left:0}
.punch__btn:hover{background:rgb(215 182 93 / .06)}
.punch__num{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:70%;
  font-size:var(--fs-punch);line-height:1;
  color:var(--bone);transition:color .3s var(--ease);
  font-variant-numeric:tabular-nums;
}
.punch__lbl{color:var(--muted);transition:color .3s var(--ease)}
/* Das Loch: eine gestanzte Scheibe, die beim Auswählen aufgeht. */
.punch__btn::after{
  content:"";position:absolute;left:50%;bottom:.6rem;translate:-50% 0;
  width:.55rem;height:.55rem;border-radius:50%;
  border:1px solid var(--rule);background:transparent;
  transition:transform .45s var(--ease-out),background-color .3s var(--ease),border-color .3s var(--ease);
}
.punch__btn[aria-pressed="true"]{background:rgb(215 182 93 / .1)}
.punch__btn[aria-pressed="true"] .punch__num{color:var(--gold)}
.punch__btn[aria-pressed="true"] .punch__lbl{color:var(--bone)}
.punch__btn[aria-pressed="true"]::after{
  background:var(--ink);border-color:var(--gold);
  transform:scale(1.9);
  box-shadow:var(--shadow-punch);
}
.punch__note{margin-top:1rem;color:var(--muted);font-size:var(--fs-body-2)}
.punch__note b{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}

/* ══ FLOTTE ═════════════════════════════════════════════════════════════════
   Jedes Fahrzeug ist ein Beleg: Bild, Kopfleiste mit Plätzen, Name, das eine
   Merkmal, das nur dieses Fahrzeug hat.                                   */
.fleet__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.plate{
  display:flex;flex-direction:column;background:var(--ink);
  text-decoration:none;color:inherit;position:relative;
  transition:background-color .4s var(--ease);
}
.plate:hover{background:var(--ink-3)}
.plate[hidden]{display:none}
.plate__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink-3)}
.plate__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .5s var(--ease)}
.plate:hover .plate__media img{transform:scale(1.045)}
.plate__pax{
  position:absolute;top:0;right:0;z-index:1;
  background:var(--ink);color:var(--gold);
  padding:.5rem .7rem;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;
}
.plate__body{padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.plate__cls{color:var(--muted)}
.plate__name{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:88%;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.01em}
.plate__feat{color:var(--muted);font-size:var(--fs-body-2);line-height:1.45}
.plate__go{margin-top:auto;padding-top:1rem;color:var(--gold);display:flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:600}
.plate__go svg{width:.85rem;height:.85rem;transition:transform .35s var(--ease)}
.plate:hover .plate__go svg{transform:translateX(4px)}
/* Elektro-Marke: ein Stempel, keine Kachel. */
.plate__stamp{
  position:absolute;top:.9rem;left:.9rem;z-index:1;
  border:1px solid var(--gold);color:var(--gold);
  padding:.3rem .5rem;background:rgb(15 20 24 / .78);
  backdrop-filter:blur(3px);
}
.fleet__empty{padding:3rem 1.5rem;text-align:center;color:var(--muted);background:var(--ink)}
.fleet__foot{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}

/* ══ FLUGHAFEN ══════════════════════════════════════════════════════════════
   Das härteste Argument des Hauses bekommt eine eigene Fläche. Die
   Nummerierung steht hier, weil die Reihenfolge selbst die Information ist:
   so läuft eine Ankunft ab.                                              */
.airport{position:relative;overflow:hidden;background:var(--ink-2)}
.airport__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr}
.airport__media{position:relative;border:1px solid var(--rule);height:100%;display:flex}
.airport__media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.airport__cap{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex}
.airport__cap .proof{margin-top:0;background:rgb(15 20 24 / .88);backdrop-filter:blur(4px)}
.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--rule)}
.steps li{
  counter-increment:step;
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;
  padding-block:1.4rem;border-bottom:1px solid var(--rule);
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:"Chivo Mono",monospace;font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:.1em;color:var(--gold);padding-top:.3rem;
  font-variant-numeric:tabular-nums;
}
.steps h3{font-size:var(--fs-body-2);font-weight:600;margin-bottom:.35rem}
.steps p{color:var(--muted);font-size:var(--fs-body-2);line-height:1.55}

/* ══ LEISTUNGEN ═════════════════════════════════════════════════════════════
   Kein Kachelraster aus Symbol, Überschrift und Text. Die Leistungen sind
   die Zeilen eines Tarifblatts: beim Überfahren tritt das Bild hervor.   */
.tariff{border-top:1px solid var(--rule)}
.tariff__row{
  position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:1.5rem;
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;
  transition:background-color .45s var(--ease);
}
.tariff__row:hover{background:rgb(215 182 93 / .045)}
/* Die Zeile rückt beim Überfahren ein — als Verschiebung, nicht als Polster:
   ein animiertes padding lässt den Browser jedes Bild neu umbrechen. */
.tariff__text{transition:transform .45s var(--ease)}
.tariff__row:hover .tariff__text{transform:translateX(1.25rem)}
.tariff__name{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:84%;font-size:var(--fs-tariff);line-height:1.05;letter-spacing:-.015em;transition:color .35s var(--ease)}
.tariff__row:hover .tariff__name{color:var(--gold)}
.tariff__desc{margin-top:.5rem;color:var(--muted);font-size:var(--fs-body-2);max-width:46ch;line-height:1.5}
.tariff__aside{display:flex;align-items:center;gap:1.25rem;flex:0 0 auto}
.tariff__thumb{
  width:7.5rem;height:5rem;object-fit:cover;border:1px solid var(--rule);
  opacity:.35;filter:saturate(.35);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .6s var(--ease-out);
}
.tariff__row:hover .tariff__thumb{opacity:1;filter:none;transform:scale(1.03)}
.tariff__arrow{width:1.1rem;height:1.1rem;color:var(--gold);flex:0 0 auto;transition:transform .4s var(--ease)}
.tariff__row:hover .tariff__arrow{transform:translateX(5px)}

/* ══ 1968 ═══════════════════════════════════════════════════════════════════
   Der Kartonabschnitt: das zweite Feld der Seite. Hier liegt die Geschichte,
   die auf der Bestandsseite auf einer Unterseite vergraben ist.          */
.since__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr}
.since__year{
  font-family:"Archivo",sans-serif;font-weight:900;font-stretch:66%;
  font-size:var(--fs-year);line-height:.78;letter-spacing:-.03em;
  color:var(--card-ink);font-variant-numeric:tabular-nums;
}
.since__body{display:grid;gap:1.15rem;max-width:var(--measure)}
.since__body p{color:var(--card-muted);line-height:1.65}
.since__body p:first-child{color:var(--card-ink);font-size:var(--fs-lead);line-height:1.5}
.since__marks{display:grid;gap:0;margin-top:.75rem;border-top:1px solid var(--card-rule)}
.since__marks div{display:grid;grid-template-columns:5.5rem 1fr;gap:1.25rem;padding-block:.85rem;border-bottom:1px solid var(--card-rule);align-items:baseline}
.since__marks dt{color:var(--gold-ink);font-variant-numeric:tabular-nums}
.since__marks dd{font-size:var(--fs-body-2);color:var(--card-muted);line-height:1.5}

/* ── Versprechen: eine Liste mit Haarlinien, keine Kachelwand. ────────── */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;border-top:1px solid var(--card-rule)}
.promise li{padding:1.5rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--card-rule)}
.promise h3{font-size:var(--fs-body-2);font-weight:600;margin-bottom:.4rem;color:var(--card-ink)}
.promise p{font-size:var(--fs-body-2);color:var(--card-muted);line-height:1.5}
/* Der Prüfstempel: eine Marke der Korrekturfahne, kein Fehlerkästchen.
   Er steht überall dort, wo eine Angabe des Kunden fehlt — und nur dort.
   Der Prüfstempel darf nicht aussehen wie eine Formularfehlermeldung: beides
   ist rot, also muss die Geometrie sie trennen. Der Stempel steht schief, hat
   eine doppelt aufgesetzte Kante und sitzt ungleichmäßig im Abdruck — die
   Fehlermeldung bleibt flacher Text ohne Rahmen. */
.proof{
  display:inline-block;margin-top:.85rem;
  --stamp:var(--sello-ink);
  font-family:"Chivo Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--stamp);
  border:1.5px solid currentColor;padding:.28rem .5rem .22rem;
  rotate:-1.7deg;
  box-shadow:1.5px 1.5px 0 -.5px color-mix(in srgb,var(--stamp) 45%,transparent);
  opacity:.92;
}

/* ══ ANFRAGE ════════════════════════════════════════════════════════════════
   Drei Schritte statt eines Blocks mit Bild-Captcha. Ohne JavaScript sind
   alle drei Schritte gleichzeitig sichtbar und der Beleg lässt sich
   trotzdem absenden.                                                     */
.ask{position:relative}
.ask__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
.ask__form{border:1px solid var(--rule);background:var(--ink-2)}
.ask__prog{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
.ask__prog li{
  padding:.9rem 1rem;border-left:1px solid var(--rule);color:var(--muted);
  display:flex;align-items:center;gap:.55rem;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.ask__prog li:first-child{border-left:0}
.ask__prog li::before{
  content:"";width:.45rem;height:.45rem;border-radius:50%;
  border:1px solid currentColor;flex:0 0 auto;
  transition:background-color .3s var(--ease);
}
.ask__prog li[aria-current="step"]{color:var(--gold);background:rgb(215 182 93 / .07)}
.ask__prog li[aria-current="step"]::before{background:var(--gold)}
.ask__prog li[data-done]{color:var(--bone)}
.ask__prog li[data-done]::before{background:var(--bone)}

.step{padding:clamp(1.5rem,3.5vw,2.25rem);border:0;margin:0;min-inline-size:0}
.step[hidden]{display:none}
.step > legend{
  font-family:"Onest",sans-serif;font-size:var(--fs-h3);font-weight:600;
  padding:0;margin-bottom:.5rem;color:var(--bone);
}
.step__hint{color:var(--muted);font-size:var(--fs-body-2);margin-bottom:1.5rem}

/* Auswahlfelder als geführte Kästchen — die Antwort wird eingetragen. */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.opt{position:relative;background:var(--ink)}
/* Sieben Anlässe füllen ein zwei- oder dreispaltiges Raster nie glatt aus.
   Die letzte Wahl nimmt die Restzeile — sonst steht dort ein leerer Block
   in der Farbe der Trennlinien. */
.opt:last-child{grid-column:1/-1}
.opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{
  display:flex;align-items:center;gap:.6rem;min-height:3.25rem;
  padding:.85rem 1rem;font-size:var(--fs-body-2);line-height:1.3;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.opt span::before{
  content:"";width:.8rem;height:.8rem;flex:0 0 auto;
  border:1px solid var(--muted);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.opt input:checked + span{background:rgb(215 182 93 / .1);color:var(--gold)}
.opt input:checked + span::before{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:-2px}
.opt input:hover + span{background:rgb(215 182 93 / .05)}

.fields{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.f{display:grid;gap:.45rem}
.f--wide{grid-column:1/-1}
.f label{color:var(--gold);font-family:"Chivo Mono",monospace;font-size:var(--fs-2xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.f input,.f textarea,.f select{
  font:inherit;font-size:var(--fs-body-2);
  background:var(--ink);color:var(--bone);
  border:1px solid var(--rule);border-radius:0;
  padding:.8rem .9rem;min-height:3rem;width:100%;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.f textarea{min-height:6rem;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--muted)}
.f input:hover,.f textarea:hover{border-color:var(--rule-soft)}
.f input:focus,.f textarea:focus{border-color:var(--gold);outline:none;background:var(--ink-2)}
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--sello-ink)}
.f__err{color:var(--sello-ink);font-size:var(--fs-xs);min-height:1.1rem;display:block}
.on-card .f input[aria-invalid="true"],.on-card .f textarea[aria-invalid="true"]{border-color:var(--sello)}
.on-card .f__err{color:var(--sello)}
.f__err:empty{min-height:0}

.step__nav{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;align-items:center}
.step__nav .back{margin-right:auto}

/* Zusammenfassung vor dem Absenden — der ausgefüllte Beleg. */
.recap{border:1px solid var(--rule);background:var(--ink);padding:1.15rem 1.25rem;margin-bottom:1.5rem}
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;font-size:var(--fs-body-2)}
.recap dt{color:var(--gold);font-family:"Chivo Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;padding-top:.2rem}
.recap dd{color:var(--bone)}

/* Honigtopf: für Menschen unsichtbar, für Bots einladend. Ersetzt das
   Bild-Captcha der Bestandsseite, das mit Screenreader unbedienbar ist. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ask__aside{display:grid;gap:1.5rem;align-content:start}
.ask__direct{border:1px solid var(--rule);padding:1.35rem}
.ask__direct dl{display:grid;gap:1.1rem;margin-top:1.1rem}
.ask__direct dt{color:var(--gold);margin-bottom:.3rem}
.ask__direct dd a{text-decoration:none;font-family:"Chivo Mono",monospace;font-size:var(--fs-base);letter-spacing:.01em}
.ask__direct dd a:hover{color:var(--gold)}

/* ══ KONTAKT ════════════════════════════════════════════════════════════════ */
.contact__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
.contact__map{border:1px solid var(--rule);position:relative;overflow:hidden;background:var(--ink-2);min-height:18rem;display:block;text-decoration:none}
.contact__map img{width:100%;height:100%;object-fit:cover;min-height:18rem;filter:grayscale(1) contrast(1.05) brightness(.72);transition:filter .5s var(--ease)}
.contact__map:hover img{filter:grayscale(.55) contrast(1.05) brightness(.85)}
.contact__pin{
  position:absolute;inset:auto auto 1rem 1rem;
  background:var(--ink);border:1px solid var(--gold);color:var(--gold);
  padding:.6rem .85rem;display:inline-flex;align-items:center;gap:.5rem;
}
.contact__pin svg{width:.9rem;height:.9rem}
.contact__list{display:grid;gap:0;border-top:1px solid var(--rule)}
.contact__list > div{padding-block:1.15rem;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:7rem 1fr;gap:1.25rem;align-items:baseline}
.contact__list dt{color:var(--gold)}
.contact__list dd{font-size:var(--fs-body-2);line-height:1.5}
.contact__list dd a{text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .25s var(--ease)}
.contact__list dd a:hover{border-color:var(--gold)}
.contact__hours{font-family:"Chivo Mono",monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);letter-spacing:.02em}

/* ══ FUSS ═══════════════════════════════════════════════════════════════════ */
.site-footer{border-top:1px solid var(--rule);background:var(--ink);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:1fr;padding-bottom:2.5rem;border-bottom:1px solid var(--rule)}
/* Die Mono steht nur, wo gemessen wird. Eine Spaltenüberschrift misst nichts. */
.footer__col h3{color:var(--gold);margin-bottom:1rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:84%;
  font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase}
.footer__col li + li{margin-top:.6rem}
.footer__col a{font-size:var(--fs-body-2);text-decoration:none;color:var(--muted);transition:color .25s var(--ease)}
.footer__col a:hover{color:var(--bone)}
.footer__brand p{margin-top:1rem;color:var(--muted);font-size:var(--fs-body-2);max-width:32ch;line-height:1.55}
.footer__funds{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1.75rem}
/* Förderlogos sind Pflichtangaben und dürfen nicht zu Grafik werden:
   weißer Grund, keine Filter, groß genug zum Lesen. */
.footer__funds img{height:2.75rem;width:auto;background:var(--paper);padding:.35rem .5rem;opacity:.9;transition:opacity .3s var(--ease)}
.footer__funds a:hover img{opacity:1}
.footer__bottom{padding-top:1.75rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--fs-sm)}
.footer__bottom a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.footer__bottom a:hover{color:var(--bone);border-bottom-color:var(--rule)}
.signature{display:inline-flex;align-items:center;gap:.35rem}
.signature a{color:var(--gold);font-weight:600;border-bottom-color:var(--rule)}
.signature a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.signature svg{width:.8rem;height:.8rem;color:var(--sello)}

/* ── Der Abriss ───────────────────────────────────────────────────────────
   Das Kartonfeld als eigenständiges Bauteil, damit die Welt nicht auf der
   Startseite endet: Auf den Fahrzeug- und Leistungsseiten trägt es die
   Datenfelder. Oben und unten eine gestanzte Kante — die Stelle, an der ein
   Fahrschein vom Block getrennt wird.                                     */
.stub{background:var(--card);color:var(--card-ink);position:relative;
  padding:1.5rem clamp(1.25rem,3vw,2rem) 1.75rem;margin-top:2.25rem}
.stub .spec dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--card-rule)}
.stub .spec dd a:hover{border-bottom-color:var(--gold-ink)}
.stub::before,.stub::after{
  content:"";position:absolute;left:0;right:0;height:5px;
  background-image:radial-gradient(circle at center,var(--ink) 2.4px,transparent 2.5px);
  background-size:11px 5px;background-repeat:repeat-x;
}
.stub::before{top:-2px}
.stub::after{bottom:-2px}
.stub .rail{border-bottom-color:var(--card-rule);color:var(--gold-ink)}
.stub .rail > :last-child{color:var(--card-muted)}
.stub .spec{border-top-color:var(--card-rule);margin-top:1.25rem}
.stub .spec > div{border-bottom-color:var(--card-rule)}
.stub .spec dt{color:var(--gold-ink)}
.stub .spec dd{color:var(--card-ink)}

/* ══ Unterseiten ════════════════════════════════════════════════════════════ */
.page-head{padding-top:calc(var(--strip-h) + 8rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--rule)}
.page-head h1{font-size:var(--fs-h1-sub);max-width:18ch}
.page-head p{margin-top:1.35rem;max-width:var(--measure);color:var(--muted)}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.75rem;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--gold)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs svg{width:.6rem;height:.6rem;opacity:.5}

/* Fahrzeugseite */
.spec{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:2rem}
.spec > div{display:grid;grid-template-columns:9rem 1fr;gap:1.25rem;padding-block:.95rem;border-bottom:1px solid var(--rule);align-items:baseline}
.spec dt{color:var(--gold)}
.spec dd{font-size:var(--fs-body-2)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(2.5rem,5vw,4rem)}
.gallery figure{margin:0;background:var(--ink);position:relative;overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;inset:auto 0 0 0;background:rgb(15 20 24 / .88);padding:.6rem .8rem;color:var(--muted);font-size:var(--fs-xs);border-top:1px solid var(--rule);translate:0 100%;transition:translate .4s var(--ease-out)}
.gallery figure:hover figcaption,.gallery figure:focus-within figcaption{translate:0 0}
.prose{display:grid;gap:1.15rem;max-width:var(--measure)}
.prose h2{font-size:var(--fs-h3);font-family:"Onest",sans-serif;font-weight:600;text-transform:none;letter-spacing:0;margin-top:1rem}
.prose p{color:var(--muted);line-height:1.7}
.split{display:grid;gap:clamp(2rem,4.5vw,4rem);grid-template-columns:1fr;align-items:start}
.cta-band{border-block:1px solid var(--rule);background:var(--ink-2);padding-block:clamp(3rem,6vw,4.5rem)}
.cta-band__in{display:grid;gap:1.5rem;justify-items:start}
.cta-band h2{font-size:var(--fs-h2);max-width:16ch}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:1.35rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  font-size:var(--fs-body-2);font-weight:600;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";width:.7rem;height:.7rem;flex:0 0 auto;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);rotate:45deg;translate:0 -.15rem;transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:-135deg;translate:0 .15rem}
.faq p{padding-bottom:1.35rem;color:var(--muted);max-width:var(--measure);line-height:1.65;font-size:var(--fs-body-2)}

/* ══ Breite Ansichten ═══════════════════════════════════════════════════════ */
@media (min-width:56rem){
  .airport__grid{grid-template-columns:1fr 1.05fr;align-items:stretch}
  .since__grid{grid-template-columns:auto 1fr;align-items:start;gap:clamp(3rem,6vw,6rem)}
  .ask__grid{grid-template-columns:1.55fr 1fr}
  .contact__grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .split{grid-template-columns:1.1fr 1fr}
  .cta-band__in{grid-template-columns:1fr auto;align-items:center;justify-items:start}
}

/* ══ Schmale Ansichten ══════════════════════════════════════════════════════
   Mobil ist keine verkleinerte Fassung: Menü, Lochstreifen, Tarifzeilen und
   Anfrage sind eigenständig gesetzt.                                     */
@media (max-width:62rem){
  .nav,.header__tel{display:none}
  .burger{display:inline-flex}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;inset:calc(var(--strip-h) + 4.15rem) 0 0 0;z-index:45;
    background:var(--ink);border-top:1px solid var(--rule);
    padding:.5rem var(--gutter) 2rem;margin:0;overflow-y:auto;
  }
  .nav.is-open a{padding-block:1.1rem;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-base)}
  .nav.is-open a::after{display:none}
  .nav__tel{
    display:flex !important;align-items:center;justify-content:center;gap:.6rem;
    margin-top:1.5rem;background:var(--gold);color:var(--ink) !important;
    padding:1rem !important;border-bottom:0 !important;font-weight:700 !important;
  }
  .nav__tel svg{width:1.05rem;height:1.05rem}
  body.nav-open{overflow:hidden}
}
@media (max-width:52rem){
  .hero{min-height:auto;padding-top:calc(var(--strip-h) + 13rem)}
  .hero__media img{object-position:66% 45%}
  .hero__media::after{background:linear-gradient(180deg,rgb(15 20 24 / .78) 0%,rgb(15 20 24 / .34) 24%,rgb(15 20 24 / .88) 56%,rgb(15 20 24 / .97) 100%)}
  .hero__fields{grid-template-columns:1fr}
  .hero__fields div{padding:1rem 0}
  .hero__fields div + div{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .punch__strip{grid-template-columns:repeat(3,1fr)}
  .punch__btn:nth-child(4){border-left:0}
  .punch__btn:nth-child(n+4){border-top:1px solid var(--rule)}
  .tariff__row{grid-template-columns:1fr;gap:1rem}
  .tariff__aside{justify-content:space-between;width:100%}
  .tariff__thumb{width:100%;height:9rem;opacity:.85;filter:saturate(.7)}
  .tariff__row:hover .tariff__text{transform:none}
  .steps li{grid-template-columns:1fr;gap:.4rem}
  .steps li::before{padding-top:0}
  .promise li{padding-right:0}
  .recap dl{grid-template-columns:1fr;gap:.15rem 0}
  .recap dd{margin-bottom:.65rem}
  .contact__list > div,.spec > div,.since__marks div{grid-template-columns:1fr;gap:.3rem}
  .ask__prog li{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.75rem .8rem;font-size:var(--fs-2xs)}
  .gallery figcaption{position:static;translate:none;background:none;border-top:0;padding:.7rem .8rem}
  /* Freistehende Links sind auf dem Telefon Schaltflächen und brauchen
     eine Fläche, die ein Daumen trifft. */
  .contact__list dd a,.ask__direct dd a{display:inline-block;padding-block:.5rem}
  .tlink{min-height:2.75rem;align-items:center}
}
@media (max-width:26rem){
  .brand__name{font-size:var(--fs-brand-sm)}
  .brand__seal{width:2.1rem;height:2.1rem}
  .punch__strip{grid-template-columns:repeat(2,1fr)}
  .punch__btn{border-left:1px solid var(--rule)}
  .punch__btn:nth-child(odd){border-left:0}
  .punch__btn:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ── Höhe des Vorschau-Streifens ohne JavaScript ──────────────────────────
   main.js misst den Streifen und schreibt --strip-h zurück. Ohne Skript
   greift diese Staffel: der Satz bricht auf schmalen Schirmen auf zwei, ganz
   schmal auf drei Zeilen um, und der Kopf darf nicht darunter rutschen —
   sonst verdeckt die Agenturmarke das Logo des Kunden.                    */
@media (max-width:40rem){:root{--strip-h:3.25rem}}
@media (max-width:24rem){:root{--strip-h:4.25rem}}

/* ══ Bewegung nur auf Wunsch ════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal,.js .since__year.reveal{opacity:1;transform:none;filter:none}
  .js .reveal .rail > *{opacity:1}
  .js .reveal .rail{border-bottom-color:var(--rule)}
  .js .reveal.is-in .rail::after{animation:none}
}

/* ══ Druck ══════════════════════════════════════════════════════════════════ */
@media print{
  .preview-strip,.site-header,.skip,.hero__cta,.btn,.punch,.ask,.cta-band,.contact__map{display:none !important}
  body{background:var(--paper);color:var(--print-ink);font-size:11pt}
  section{padding-block:1.2rem;break-inside:avoid}
  .field-card,.field-ink2,.airport,.plate,.ask__form{background:var(--paper)}
  .hero__media{position:static;height:auto}
  .hero__media::after{display:none}
  .hero{min-height:0;padding-top:0}
  a{text-decoration:underline}
  .rail{border-color:var(--print-rule)}
  img,figure,.plate,.steps li{break-inside:avoid}
}