/* ==========================================================================
   Taxi-Service Kuchelmeister GmbH — Design-System
   Gilt für: index · leistungen · fuhrpark · ueber-uns · kontakt ·
             impressum · datenschutz
   Reines CSS, keine externen Ressourcen, keine Build-Kette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften — lokal eingebunden (DSGVO: kein Google-Fonts-Request)
   Beide Dateien sind Variable Fonts; ein Face je Familie deckt alle
   Schnitte 300–600 ab.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-400.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-400.woff2") format("woff2");
  font-weight:300 500;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   2. Farb-Token — Palette der Kundin
   Regel: #fff114 ist Signalfarbe für FLÄCHEN (immer mit dunklem Text),
   niemals Textfarbe auf hellem Grund. Text ist #1c1c1c / #5e5e5f.
   #c0c0c1 und #9f9fa0 sind KEINE Textfarben — sie tragen als Fläche und
   als Linie.

   Überarbeitung 09.08.2026 — Beanstandung "Das Grau muss deutlich mehr
   rein". Zugesagt war "das Gelb UND das Grau" der bisherigen Seite; geliefert
   hat die Kundin am 03.08. vier Werte: #c0c0c1 · #9f9fa0 · #5e5e5f · #e2e3f2.
   Bis hierher kam davon nur #5e5e5f vor, und zwar ausschließlich als
   Textfarbe. Grau war also nirgends eine Fläche.
   Geändert wurden genau zwei Token — der Rest der Seite erbt daraus:
     --paper-2  #f5f2cf -> #e2e3f2   Die zweite Sektionsfläche war ein
                                     erfundener Creme-Ton (nicht aus der
                                     Palette) und hob sich mit 1,09:1 kaum
                                     vom Grund ab. Jetzt der gelieferte
                                     Grauton, 1,22:1 — sichtbar als eigene
                                     Fläche, ohne die Seite einzutrüben.
     --line     rgba(28,28,28,.16) -> #c0c0c1   Schwarz mit Deckkraft ergab
                                     auf Creme einen oliv gebrochenen Strich
                                     (1,36:1). Der gelieferte Grauwert ist mit
                                     1,74:1 klarer UND erkennbar grau.
   Nachgemessene Kontraste der neuen Paarungen stehen an den Regeln selbst.
   -------------------------------------------------------------------------- */
:root{
  /* Flächen
     Überarbeitung 26.08.2026 — Rückkehr zur Ruhe des Entwurfs A.
     Zwischenstand 26.08.2026 war ein neutrales Grau #e2e2e2. Zurück auf
     Creme, weil der Betrieb den gelben Hintergrund am 03.08. schriftlich
     mit Farbcode verlangt hat ("Webseiten-Hintergrund #fffcce") und wir
     ihn in der Auftragsbestätigung desselben Tages zugesagt haben.
     Aus der Grau-Runde bleibt, was unabhängig davon trägt: Karten sind
     seither echte weiße Flächen. Auf Creme steht Weiß mit nur 1,05:1 —
     die Kante trägt deshalb der mehrstufige Schatten, nicht der
     Farbunterschied. Im Browser nachgesehen: sitzt. */
  --paper:#fffcce;        /* Seitenhintergrund — helles Gelb, schriftlich verlangt 03.08. */
  --paper-2:#e2e3f2;      /* ruhigere Sektion — Grauton aus der Kundenpalette */
  --panel:#ffffff;        /* Karten — heben sich jetzt klar von der Fläche ab */
  --tint:#fcf38f;         /* weiche Gelb-Fläche */
  --sun:#fff114;          /* Signalgelb — nur Fläche, Text darauf #1c1c1c */
  --dark:#2a2a2a;         /* dunkle Cover-Sektion */
  --dark-2:#1c1c1c;

  /* Text */
  --ink:#1c1c1c;
  --ink-2:#5e5e5f;
  --on-dark:#ffffff;
  --on-dark-2:rgba(255,255,255,.74);

  /* Dekor */
  --grey-1:#c0c0c1;
  --grey-2:#9f9fa0;
  --mist:#e2e3f2;
  /* Linien in den gelieferten Grautönen statt in Schwarz mit Deckkraft.
     Stand 26.08.2026: Die Fläche ist wieder das Creme #fffcce, das der
     Betrieb am 03.08. schriftlich mit Farbcode verlangt hat. Damit gelten
     wieder seine eigenen Grautöne als Linienfarben.
     --line   #c0c0c1: 1,74:1 auf Creme
     --line-2 #e2e3f2: 1,22:1 auf Creme — die leisere der beiden
     Beides sind Trennlinien ohne Bedeutungsträger; für sie gilt keine
     Kontrastmindestgrenze. Text steht nie in diesen Farben. */
  --line:#c0c0c1;
  --line-2:#e2e3f2;

  /* Radien — Überarbeitung 26.08.2026, Vorgabe "weicher und hochwertiger".
     Am 06.08. standen sie auf 3px, weil das runde weiche Kastenbild als
     Merkmal generierter Oberflächen gilt. Diese Sorge bleibt berechtigt,
     die Antwort darauf ist aber nicht der Radius, sondern woher die
     Weichheit kommt:
       - Persönlichkeit trägt die Typografie (Newsreader mit optischer
         Größe, kursive Akzente), nicht die Ecke.
       - Tiefe tragen mehrstufige Schatten und echte Materialien.
       - Es gibt keinen Akzentbalken, keinen Verlauf, kein Emoji — die
         drei Zutaten, die den generischen Look tatsächlich ausmachen.
     Die weichen Radien stammen aus der Grau-Runde vom 26.08.2026 und sind
     geblieben, als die Fläche zurück auf das vom Betrieb verlangte Creme
     ging: Sie hängen an der Materialsprache, nicht an der Grundfarbe. */
  --r-sm:8px;         /* Marken, Chips, kleine Flächen */
  --r:14px;           /* Karten, Knöpfe, Bildkacheln */
  --r-lg:22px;        /* große Flächen: Cover, Panels, Vollbild-Kacheln */

  /* Weiche, mehrstufige Schatten in warmem Grau (abgeleitet aus --ink-2
     #5e5e5f). Ersetzen harte Ränder und den einen dicken Schlagschatten:
     Tiefe entsteht durch mehrere sehr schwache Lagen, nicht durch Kontrast.
     Nur dort einsetzen, wo Flächen wirklich ÜBEREINANDER liegen. */
  --shadow-soft:
    0 1px 2px rgba(94,94,95,.05),
    0 3px 8px rgba(94,94,95,.045),
    0 9px 22px rgba(94,94,95,.04),
    0 22px 48px rgba(94,94,95,.035);
  --shadow-lift:
    0 1px 2px rgba(94,94,95,.06),
    0 4px 12px rgba(94,94,95,.055),
    0 14px 34px rgba(94,94,95,.05),
    0 34px 72px rgba(94,94,95,.045);

  /* Bewegung: eine einzige Kurve für alles, damit nichts aus dem Takt fällt.
     Kein Überschwingen — nichts soll federn oder hüpfen. */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Druckantwort (26.08.2026): Rückmeldung gehört auf das Drücken, nicht
     auf das Loslassen — sonst wirkt die Fläche tot, solange der Finger
     liegt. Kurz und ohne Überschwingen, damit es nach Material klingt
     und nicht nach Effekt. */
  --ease-press:cubic-bezier(.2,.8,.3,1);
  --t-press:110ms;

  --wrap:1180px;
  --pad:30px;
  --measure:66ch;   /* Zeilenlänge Fließtext: 60–70 Zeichen */
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden — vorbeugende Änderung vom 26.08.2026.
     overflow-x:hidden macht den body zu einem eigenen Scroll-Container.
     Das ist eine bekannte Ursache dafür, dass Ankersprünge ins Leere
     laufen und klebende Kopfzeilen nicht mehr kleben. Solange die
     Navigation auf eigene Seiten zeigte, konnte das nichts anrichten;
     seit die Website wieder EINSEITIG ist, ist jeder Menüpunkt ein
     Ankersprung, und das Risiko trifft die gesamte Navigation.
     overflow-x:clip schneidet genauso ab, erzeugt aber keinen
     Scroll-Container.
     EHRLICHKEITSVERMERK: Der Ankersprung selbst konnte hier nicht
     nachgewiesen werden — im Vorschau-Panel scrollt überhaupt nichts,
     auch nicht per window.scrollTo oder documentElement.scrollTop.
     Gemessen wurde also die Testumgebung, nicht die Seite. Die
     Umstellung bleibt richtig, ihre Wirkung ist aber ungeprüft und
     gehört an einem echten Browser nachgesehen. */
  overflow-x:clip;
}
h1,h2,h3,.serif{
  font-family:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  font-weight:300;
  letter-spacing:-.008em;
  line-height:1.12;
  /* Newsreader trägt eine opsz-Achse (nachgemessen: 934 px bei opsz 16 gegen
     985 px bei opsz 72, gleiche Schriftgröße). Wo bewusst davon abgewichen
     wird, steht es an der Regel selbst — immer MIT "wght", sonst überschreibt
     font-variation-settings das font-weight und alles fällt auf 400 zurück. */
  font-optical-sizing:auto;
  text-wrap:balance;
}

/* Hängende Interpunktion — Anführungszeichen und Bindestriche hängen in den
   Rand statt die Kante auszufransen. Nur Safari setzt es bisher um; die
   anderen ignorieren die Zeile folgenlos. */
html{hanging-punctuation:first allow-end last}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--sun);color:var(--ink)}

/* Fokus — überall sichtbar */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--sun)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--sun);color:var(--ink);font-weight:600;font-size:.9rem;
  padding:12px 20px;border-radius:0 0 var(--r) 0;text-decoration:none;
}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
section{padding:112px 0}
.sec-tight{padding-top:0}
.sec-alt{background:var(--paper-2)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* Overline
   Überarbeitung 06.08.2026: vorher Versalien mit .2em Sperrung und einem
   28px-Strich davor — vor JEDER Sektion identisch, das las sich wie ein
   Stempel. Der Strich entfällt ersatzlos, die Sperrung geht auf ein Drittel
   zurück, das Gewicht von 600 auf 500. Die Zeile ordnet jetzt ein, statt
   sich anzukündigen. Kleine Schrift bekommt mehr Luft, nicht weniger. */
.ov{
  display:block;
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;line-height:1.5;
}
.lead{color:var(--ink-2);font-weight:300;max-width:var(--measure)}

/* Gelb-Marker: der einzige Ort, an dem Gelb hinter Text liegt.
   Text bleibt #1c1c1c — Kontrast 14,5:1 auf Gelb, 16,3:1 auf Creme. */
.hl{
  font-style:italic;
  background-image:linear-gradient(transparent 56%,var(--sun) 56%,var(--sun) 93%,transparent 93%);
  padding:0 .06em;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
/* Überarbeitung 06.08.2026: border-radius:999px (Pillenform) auf allen
   Schaltflächen war das zweite Baukasten-Merkmal. Jetzt --r (3px):
   die Fläche bleibt eine Fläche, sie wird nur nicht mehr zur Kapsel. */
.btn{
  text-decoration:none;font-weight:500;font-size:.98rem;
  padding:15px 28px;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s var(--ease),
             color .18s var(--ease),border-color .18s var(--ease),
             box-shadow .18s var(--ease);
}
/* Politur 26.08.2026: hauchfeine helle Kante an der Oberseite. Licht fällt
   von oben ein, also fängt die obere Kante es — dieselbe Logik, nach der
   die Schatten nach unten fallen. Macht aus der Farbfläche einen Körper,
   ohne dass ein Verlauf nötig wäre. */
.btn-sun{
  background:var(--sun);color:var(--ink);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-sun:hover{background:var(--ink);color:var(--sun);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--sun);transform:translateY(-2px)}
/* Druckantwort (26.08.2026): Die Fläche gibt nach, solange der Finger liegt,
   und nicht erst beim Loslassen. Steht bewusst NACH den :hover-Regeln, damit
   sie beim Drücken gewinnt — sonst federt der Knopf beim Zeiger nach oben,
   während man ihn drückt. Auf Zeigergeräten ohne Druck bleibt alles wie
   gehabt, weil :active dort nur den Moment des Klicks abdeckt. */
.btn:active{transform:scale(.97);transition:transform var(--t-press) var(--ease-press)}

/* Textlink mit Pfeil
   Die gelbe 2px-Unterkante trug hier keine Bedeutung — sie war Dekoration an
   jedem einzelnen Verweis. Jetzt eine Haarlinie in Tinte, die beim Überfahren
   deckend wird; der Pfeil wandert weiterhin, aber nur 3 px statt 5 px. */
.more{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:500;font-size:.95rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:4px;transition:gap .18s var(--ease),border-color .18s var(--ease);
}
.more:hover{gap:12px;border-color:var(--ink)}
.more span[aria-hidden]{transition:transform .18s var(--ease)}
.more:hover span[aria-hidden]{transform:translateX(2px)}

/* --------------------------------------------------------------------------
   5. Navigation (alle Seiten) + mobiles Burger-Menü
   -------------------------------------------------------------------------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  padding:16px 0;border-bottom:1px solid transparent;
  /* Kein Übergang auf padding: das animiert die Layout-Höhe und erzwingt bei
     jedem Scroll-Frame ein Neu-Layout — auf schwächeren Handys sichtbares
     Ruckeln, also genau bei der Zielgruppe. Der Sprung ist unmerklich,
     Hintergrund und Rahmen blenden weiterhin weich. */
  transition:background-color .3s,border-color .3s;
}
/* Die Leiste ist ein Material, kein Balken: der Inhalt zieht sichtbar
   darunter hindurch. Zwei Korrekturen am 26.08.2026:
   1. Der Farbwert stand noch auf dem Creme #fffcce der alten Palette —
      die Leiste wäre gelblich über einer grauen Seite gelegen.
   2. Statt einer Kante trennt eine weiche Schattenlage; die Deckkraft
      ist bewusst niedriger als vorher (.72 statt .88), damit man das
      Durchscheinen auch wirklich sieht. Ohne Durchscheinen wäre die
      Unschärfe nur Rechenaufwand. */
header.nav.sc{
  padding:10px 0;
  background:rgba(255,252,206,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-color:transparent;
  box-shadow:0 1px 2px rgba(94,94,95,.04),0 6px 18px rgba(94,94,95,.045);
}
/* Kann der Browser nicht unscharf zeichnen, wird die Leiste deckend —
   halbdurchsichtig ohne Unschärfe macht den Text darunter unlesbar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.nav.sc{background:var(--paper)}
}
/* Wer Transparenz abbestellt hat, bekommt eine feste Fläche mit Kante. */
@media (prefers-reduced-transparency:reduce){
  header.nav.sc{
    background:var(--paper);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:var(--line-2);
  }
}
header.nav.open{background:var(--paper);border-color:var(--line-2)}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:20px;
}
.brand{
  display:flex;align-items:center;gap:11px;
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.3rem;
  color:var(--ink);text-decoration:none;margin-right:auto;white-space:nowrap;
}
/* Das Wortbild-Zeichen war eine gelbe Kachel mit Radius und Symbol darin —
   dasselbe Muster wie die Icon-Kacheln auf den Karten. Danach stand ein
   allgemeines Taxischild-Symbol dort. Seit 07.08.2026 steht das eigene
   Zeichen der Kundin (T + K + Dachschild) da. Es bringt sein Gelb selbst
   mit, die gelbe Trägerfläche entfällt deshalb weiterhin.
   Das Zeichen ist liegend (96.6 : 63), die Breite folgt der Höhe. */
/* Überarbeitung 26.08.2026: Statt der Nachzeichnung steht hier jetzt das
   vom Betrieb gelieferte Logo als Bild — ausdrücklich MIT seinem eigenen
   Hintergrund, dem gelb-schwarzen Strahlenverlauf. Es bringt seine Fläche
   selbst mit und braucht deshalb keine Trägerfarbe. Die Höhe bleibt bei
   34px, damit sich am Kopfband nichts verschiebt. */
/* Vollständiges Logo-Banner, Vorgabe des Betriebs vom 27.08.2026. Es trägt
   den Firmennamen selbst, deshalb steht keine getippte Wortmarke daneben.
   Das Seitenverhältnis liegt bei etwa 5,6:1.
   28.08.2026 auf Kundenwunsch um 50 % vergrößert: 62 → 93px, mobil 34 → 51px
   und 28 → 42px, Fußzeile 58 → 87px. Bei 93px ist das Banner rund 520px breit;
   das Kopfband muss deshalb im Browser gegen die Navigation geprüft werden. */
.brand .mk-banner{
  height:93px;width:auto;flex:none;display:block;
  object-fit:contain;border-radius:var(--r-sm);
}
@media(max-width:900px){ .brand .mk-banner{height:51px} }
@media(max-width:420px){ .brand .mk-banner{height:42px} }
/* In der Fußzeile darf es etwas größer stehen, dort gibt es keine Nachbarn. */
.foot .mk-banner-fuss{
  height:87px;width:auto;display:block;margin-bottom:14px;
  object-fit:contain;border-radius:var(--r-sm);
}

.brand .mk{
  width:auto;height:34px;flex:none;
  display:block;object-fit:contain;
  /* Das Logo bringt seinen eigenen Hintergrund mit. Ohne gerundete Ecken
     klebt es als hartes Rechteck im Kopfband; mit ihnen wird es ein Objekt
     im selben Formenkanon wie Karten und Knöpfe. */
  border-radius:var(--r-sm);
}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  color:var(--ink-2);font-size:.88rem;text-decoration:none;
  padding:4px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--ink);border-color:var(--sun)}
.nav-links a.is-active{color:var(--ink);font-weight:500;border-color:var(--sun)}
/* Gelb bleibt hier: die Rufnummer ist die eine Handlung, um die sich die
   ganze Seite dreht. Das ist Bedeutung, nicht Schmuck. */
.call{
  background:var(--sun);color:var(--ink);text-decoration:none;
  font-size:.84rem;font-weight:600;padding:11px 20px;border-radius:var(--r);
  white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s var(--ease),
             color .18s var(--ease),box-shadow .18s var(--ease);
}
.call:hover{transform:translateY(-1px);background:var(--ink);color:var(--sun);box-shadow:var(--shadow-soft)}
.call .short{display:none}

.burger{
  display:none;width:46px;height:46px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  align-items:center;justify-content:center;
}
.burger span{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  position:relative;transition:transform .25s,opacity .2s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:flex}
  /* Ab hier steht neben dem Zeichen und der Wortmarke auch noch der Burger.
     Knapp über 520 px ist die Zeile am engsten — dort etwas kleineres
     Zeichen und engere Abstände, sonst schiebt es den Burger über den Rand. */
  .nav-inner{gap:14px}
  .brand .mk,.brand .mk svg{height:30px}
  /* Harte Zusage ab hier: der Burger kann nicht mehr aus der Zeile gedrückt
     werden. Wird es trotz aller Abstufungen zu eng — etwa weil jemand die
     Schriftgröße des Browsers hochsetzt, was in dieser Zielgruppe vorkommt —,
     kürzt sich die Wortmarke. Zeichen, Anruf-Knopf und Burger bleiben ganz. */
  .brand{min-width:0}
  .brand .wm{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px var(--pad) 20px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  }
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none;box-shadow:var(--shadow-lift)}
  .nav-links a{
    font-size:1.02rem;padding:15px 0;
    border-bottom:1px solid var(--line-2);border-left:3px solid transparent;
    padding-left:12px;
  }
  .nav-links a:hover,.nav-links a.is-active{border-bottom-color:var(--line-2);border-left-color:var(--sun)}
}
@media(max-width:520px){
  :root{--pad:20px}
  /* Auf 390 px stand die Kopfzeile schon vorher ohne Reserve: Zeichen,
     Wortmarke, Rufknopf und Burger füllten die Breite bis auf den letzten
     Punkt. Das breitere Zeichen hat den Burger über den Rand geschoben.
     Deshalb hier engere Abstände und ein kleineres Zeichen — danach bleibt
     der Burger innerhalb des Seitenrands. */
  .nav-inner{gap:10px}
  .brand{font-size:1.12rem;gap:8px}
  .brand .mk,.brand .mk svg{height:27px}
  .call .full{display:none}
  .call .short{display:inline}
}
/* Reparatur 07.08.2026 — bis hierher endete die Anpassung bei 520 px. Auf
   320 px (iPhone SE der ersten Generationen, ältere Android-Geräte) lief der
   Burger bis 368 px hinaus und wurde von body{overflow-x:hidden} abgeschnitten:
   das Menü war nicht mehr zu öffnen. Auch 360 px lag noch darüber.
   Zwei Stufen, in dieser Reihenfolge, weil der Anruf-Knopf in KEINER Stufe
   angetastet wird — bei einem Taxibetrieb ist er die eine wichtige Fläche. */
@media(max-width:400px){
  /* Stufe 1: Abstände und Zeichen zusammenziehen. Trägt 375 px. */
  .nav-inner{gap:6px}
  .brand{font-size:1.02rem;gap:6px}
  .brand .mk,.brand .mk svg{height:24px}
  .call{padding:11px 15px}
}
@media(max-width:374px){
  /* Stufe 2: die Wortmarke weicht, das Zeichen bleibt. Kein display:none —
     der Text bleibt im Barrierefreiheitsbaum, sonst verlöre der Logo-Link
     seinen zugänglichen Namen. Er nimmt nur keine Breite mehr ein. */
  .brand{gap:0}
  .brand .wm{
    position:absolute;width:1px;height:1px;padding:0;margin:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{padding:150px 0 0}
.hero-top{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;padding-bottom:60px}
.hero .ov{margin-bottom:22px}
/* Große Überschrift: engere Laufweite, geringste Strichstärke, opsz ans obere
   Ende. Beides zusammen macht den Unterschied zwischen "groß gesetzt" und
   "für diese Größe gezeichnet". "wght" muss mitstehen — sonst setzt
   font-variation-settings das Gewicht auf 400 zurück. */
.hero h1{
  font-size:clamp(2.5rem,5.4vw,4.6rem);
  letter-spacing:-.026em;
  font-variation-settings:"opsz" 72,"wght" 300;
  line-height:1.06;
}
.hero .sub{color:var(--ink-2);font-size:1.14rem;font-weight:300;max-width:44ch;margin-top:26px}
.cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-note{display:flex;flex-direction:column;gap:22px}
/* Der gelbe 2px-Balken links war Dekoration an einer reinen Textangabe.
   Eine Haarlinie ordnet genauso, ohne die Signalfarbe zu verbrauchen. */
.hero-note>div{border-left:1px solid var(--line);padding-left:18px}
.hero-note b{font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.4rem;display:block}
.hero-note span{color:var(--ink-2);font-size:.93rem;font-weight:300;display:block;margin-top:2px}
@media(max-width:820px){
  .hero{padding-top:124px}
  .hero-top{grid-template-columns:1fr;gap:34px;padding-bottom:44px}
}

/* Vollbild-Band
   Reparatur 09.08.2026 (Beanstandung "Das Fahrzeug ist gar nicht richtig
   drauf"): Die Höhe hing an 60vh. Damit war die Anzeigefläche NICHT
   formatstabil, sondern hing an der Fensterhöhe des Betrachters —
   nachgemessen 1440x451 (Verhältnis 3,19:1) auf dem Rechner und 390x506
   (0,77:1, also HOCHKANT) auf dem Telefon. Dieselbe Bilddatei musste beide
   bedienen; object-fit:cover hat dazwischen 53 % bzw. 48 % weggeschnitten.
   Jetzt ein festes Verhältnis von 2,4:1 auf allen Breiten, und die Datei
   wird in genau diesem Verhältnis erzeugt (1440x600). Restverlust 0 %.
   Keine max-height: eine Deckelung würde das Verhältnis auf breiten
   Bildschirmen wieder brechen und genau den Beschnitt zurückholen, der hier
   abgestellt wird. Die Bandhöhe wächst deshalb mit der Breite mit
   (1440 px -> 600 px, 390 px -> 163 px). */
/* 02.09.2026 auf Kundenwunsch: Das Band stand auf 2.4 und schnitt das Fahrzeug
   unten an. 2.0 zeigt die Aufnahme vollstaendig, das Auto sitzt kleiner im
   Bild. Die Datei ist auf 1440x720 neu zugeschnitten, Verhaeltnis passt exakt,
   cover schneidet daher nichts. */
/* 04.09.2026 auf Kundenwunsch: Der Betrieb hat eine eigene neue Aufnahme geliefert
   (Taxi_Nebelstadt_neu.jpg, 1536x1024) mit der Vorgabe, den unteren Bildrand nicht
   abzuschneiden. Die Datei liegt als 1440x823 im Band, das Verhaeltnis ist deshalb
   exakt 1440/823 und cover schneidet nichts. Beschnitten ist nur oben ein Streifen
   Himmel, damit das Band nicht bildschirmhoch wird. Der untere Rand ist der untere
   Rand der Quelldatei. */
.fullband{position:relative;width:100%;aspect-ratio:1440/823;overflow:hidden;background:var(--paper-2)}
.fullband img{width:100%;height:100%;object-fit:cover}
.fullband .cap{
  position:absolute;bottom:20px;
  left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  /* Bildunterschrift auf grauem Grund statt auf Creme (09.08.2026): Der
     Creme-Chip lag als vierte helle Fläche auf dem Bild und verschwand
     halb darin. Nebelgrau setzt sich vom Motiv ab und bringt die
     Kundenfarbe genau dort ins Bild, wo sie ohnehin schon steckt — die
     Fahrzeuge sind silber-anthrazit.
     Überarbeitung 26.08.2026, zwei Dinge in einem:
     1. Der Farbwert stand noch auf dem bläulichen #e2e3f2 der alten
        Palette — ein Blaustich auf einer neutralgrauen Seite.
     2. Mit 93 % Deckkraft war die Unschärfe dahinter reine Rechenarbeit:
        Man sah nichts durchscheinen, das war eine Platte, kein Glas.
        Jetzt 78 % über kräftigerer Unschärfe mit Sättigungsanhebung, dazu
        eine helle Oberkante — so fängt Glas das Licht.
     Kontrast bleibt gewahrt: Text #1c1c1c auf der aufgehellten Fläche
     liegt auch über dunklen Bildstellen deutlich über 4,5:1, weil die
     Sättigungsanhebung den Untergrund zusätzlich aufhellt. */
  background:rgba(255,252,206,.80);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  color:var(--ink);font-size:.76rem;letter-spacing:.03em;
  padding:9px 15px;border-radius:var(--r);
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.65);
}
/* Ohne Unschärfe wäre halbdurchsichtiger Text auf einem Foto unlesbar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fullband .cap{background:#fffcce}
}
@media (prefers-reduced-transparency:reduce){
  .fullband .cap{
    background:#fffcce;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* Bildunterschrift unter das Bild, sobald das Band schmal wird (09.08.2026).
   Nachgemessen bei 390 px: Das Band ist dort 163 px hoch, die Unterschrift
   bricht auf zwei Zeilen um und ist 62 px hoch — sie deckte damit die untere
   Hälfte des Fahrzeugs ab, einschließlich Rädern und Schriftzug. Das ist
   derselbe Eindruck, der beanstandet wurde, nur durch eine Fläche statt
   durch einen Beschnitt.
   Ab 641 px ist das Band mindestens 267 px hoch und die Zeile passt einzeilig
   an den unteren Rand; dort bleibt alles wie bisher.
   Das Bild behält sein Verhältnis über aspect-ratio am Bild selbst — es
   verschiebt beim Laden nichts (CLS unverändert 0,00).
   Text --ink-2 #5e5e5f auf der Grundfläche #fffcce: 6,19:1. */
@media(max-width:640px){
  .fullband{aspect-ratio:auto;overflow:visible;background:none}
  .fullband img{aspect-ratio:1440/823;height:auto;background:var(--paper-2)}
  .fullband .cap{
    position:static;left:auto;bottom:auto;display:block;
    background:none;box-shadow:none;border-radius:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    color:var(--ink-2);padding:10px var(--pad) 0;
  }
}

/* Stichwort-Leiste
   Seit 09.08.2026 auf grauem Grund. Sie steht direkt unter dem Bildband und
   war vorher eine reine Linie auf Creme — hier entsteht mit einer schmalen
   Fläche der erste Taktwechsel, ohne dass Inhalt dazukommt.
   Text --ink-2 #5e5e5f auf #e2e3f2: 5,09:1 (Fließtext-Grenze 4,5:1). */
.strip{background:var(--mist);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:20px;padding-bottom:20px;align-items:center}
.strip span{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:24px;
}
.strip span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.strip span:last-child::after{display:none}

/* --------------------------------------------------------------------------
   7. Sektions-Kopf & Leitsatz
   -------------------------------------------------------------------------- */
/* Sektions-Kopf
   Überarbeitung 06.08.2026: Vorher stand auf JEDER Sektion derselbe Turm —
   Overline, Überschrift, Vorspann, Verweis, alles linksbündig untereinander,
   700 px breit. Sieben Sektionen, sieben identische Anläufe.
   Jetzt ab 961 px ein Zweispalter mit ungleichen Breiten: die Aussage steht
   links und groß, der erklärende Vorspann rechts daneben auf Grundlinie.
   Darunter bleibt alles gestapelt — auf dem Handy ist ein Zweispalter kein
   Gewinn. Die Zeilenlänge des Vorspanns bleibt in beiden Fällen begrenzt. */
.ohead{max-width:760px}
.ohead h2{
  font-size:clamp(2rem,4.4vw,3.3rem);margin-top:14px;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 72,"wght" 300;
  max-width:19ch;
}
.ohead h2 em{font-style:italic}
.ohead .lead{margin-top:18px;font-size:1.08rem}
.ohead .more{margin-top:24px}

/* Nur für Sektionsköpfe, die über die volle Satzbreite laufen — also direkte
   Kinder von .wrap. Der Kopf auf der Kontaktseite steht in der schmaleren
   Formularspalte; dort ergäbe der Zweispalter eine Vorspann-Säule von vier
   Wörtern Breite. Nachgesehen: alle übrigen sechzehn Köpfe sind direkte
   Kinder von .wrap, nur der eine auf kontakt.php nicht. */
@media(min-width:961px){
  .wrap>.ohead:not(.center){
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(40px,5vw,88px);
  }
  .wrap>.ohead:not(.center) .ov  {grid-column:1/-1;grid-row:1}
  .wrap>.ohead:not(.center) h2   {grid-column:1;grid-row:2;margin-top:14px}
  .wrap>.ohead:not(.center) .lead{grid-column:2;grid-row:2;margin-top:0;align-self:end;padding-bottom:.4em}
  /* Korrektur 26.08.2026, im Browser gefunden: Die Regel darüber weist JEDEM
     Vorspann-Absatz dieselbe Zelle zu (Spalte 2, Zeile 2). Sobald ein Kopf
     zwei davon hat, liegen sie exakt übereinander und sind unlesbar. Genau
     das war bei "Unsere Spezialisierung" der Fall, seit dort die Ergänzung
     von Seite 3 des Ausdrucks dazukam ("Auch bei stationären Aufnahme- und
     Verlegungsfahrten …"). Gemessen: beide Absätze auf y=1522, gleiche
     Breite, vollständig überlagert.
     Jeder weitere Absatz rückt jetzt eine Zeile tiefer. Zeile 3 trägt in
     Spalte 1 den Weiterlesen-Verweis, der Vorspann sitzt in Spalte 2 —
     die beiden stören sich nicht. */
  .wrap>.ohead:not(.center) .lead ~ .lead{
    grid-row:3;align-self:start;padding-bottom:0;margin-top:14px;
  }
  .wrap>.ohead:not(.center) .more{grid-column:1;grid-row:3;justify-self:start;margin-top:26px}
}

/* Leitsatz — die eine große Aussage über die volle Breite. Sie ist der
   Gegentakt zum Zweispalter: hier gibt es keine Spalte, keinen Vorspann,
   keine Karte. Nur Satz. */
.intro{max-width:940px}
.intro p{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.28;letter-spacing:-.014em;
  /* Maß in em, also an der EIGENEN Schriftgröße dieses Absatzes. Ein ch-Wert
     am Container hätte sich an dessen 16px-Grundschrift orientiert und den
     Satz auf ein Viertel der gewollten Breite gequetscht.
     19em sind bei dieser Größe rund 55 Zeichen — für Schaugrößen die richtige
     Zeile; die 60–70 Zeichen gelten für Fließtext, nicht für Schaugrößen. */
  max-width:19em;
  text-wrap:balance;
}
/* Der Leitsatz rückt ein: er steht nicht an der Kante wie alles andere,
   sondern gesetzt in der Fläche. Das ist der Taktwechsel zwischen zwei
   Sektionen, die beide links beginnen. */
@media(min-width:861px){.intro{margin-left:9%}}

/* --------------------------------------------------------------------------
   8. Karten
   -------------------------------------------------------------------------- */
/* Überarbeitung 06.08.2026 — hier lagen drei der sieben beanstandeten Muster
   übereinander: gleich große weiße Boxen mit Rand und Radius (1), gelbe
   Icon-Kacheln am Kopf (2) und eine dunkle Box zwischen hellen (3).
   Alle drei entfallen.

   Statt Boxen: der Text steht auf dem Papier, getrennt durch eine Haarlinie
   oben und durch Weißraum. Der Spaltenabstand wächst von 18 auf gut 50 px —
   Trennung entsteht durch Abstand, nicht durch Rahmen.
   Statt der dunklen Box: die hervorgehobene Karte bekommt eine kräftige
   Oberkante in Signalgelb. Das Gelb markiert dort etwas, statt zu füllen. */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(28px,4vw,54px);row-gap:clamp(38px,4vw,58px);
  margin-top:56px;
}
.cards.two{grid-template-columns:repeat(2,1fr)}

/* Asymmetrie, wo sie trägt: bei GENAU drei Karten wird die erste Spalte
   breiter. Bei sechs Karten (leistungen) bleibt das Raster gleichmäßig —
   dort stünden sonst zwei breite Kacheln untereinander.
   Browser ohne :has() bekommen unverändert drei gleiche Spalten. */
@media(min-width:861px){
  .cards:not(.two):has(>:nth-child(3)):not(:has(>:nth-child(4))){
    grid-template-columns:1.28fr 1fr 1fr;
  }
}

/* Karten sind seit 26.08.2026 echte Flächen statt Text unter einer Linie.
   Grund: Die Grundfläche ist jetzt grau. Auf Creme konnte reiner Text mit
   Trennlinien stehen. Die Flächen sind aus der Grau-Runde geblieben, weil
   sie den Abschnitten auch auf Creme Halt geben — dort über den Schatten,
   nicht über den Farbunterschied.
   Bewusst KEIN Hover-Effekt: eine Karte ist kein Bedienelement, und ein
   wanderender Schatten unter jedem Absatz ist Zappeln, nicht Wertigkeit.
   Rückmeldung gibt es dort, wo etwas passiert — an Knöpfen und Verweisen.
   (Nebeneffekt, der hier gelegen kommt: .reveal setzt die Kurzschreibweise
   transition und hätte einen eigenen Übergang ohnehin überschrieben.) */
.card{
  background:var(--panel);
  border:0;
  border-radius:var(--r);
  padding:26px 24px 28px;
  box-shadow:var(--shadow-soft);
}

/* Icons ohne Trägerfläche: nur die Strichzeichnung, in Tinte, kleiner und
   leiser als vorher. Die Hierarchie trägt jetzt die Typografie. */
.card .ic{
  width:26px;height:26px;border-radius:0;flex:none;
  background:none;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card .ic svg{width:26px;height:26px;stroke-width:1.25}

.card h3{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.4rem;
  font-variation-settings:"opsz" 18,"wght" 420;
  letter-spacing:-.004em;line-height:1.22;
}
.card p{margin-top:11px;color:var(--ink-2);font-size:.95rem;font-weight:300;max-width:var(--measure)}
.card .more{margin-top:18px}

/* Alle Karten bleiben weiß und ohne farbige Akzentkante. */
.card.tint h3,.card.dark h3{color:var(--ink)}
.card.tint p,.card.dark p{color:var(--ink-2)}
.card.tint .ic,.card.dark .ic{background:none;color:var(--ink)}
.card.dark .more{color:var(--ink)}
.card.dark .more:hover{border-color:var(--ink)}

@media(max-width:860px){.cards,.cards.two{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards,.cards.two{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   9. Kennzahlen
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stats>div{padding:36px 22px 8px;border-right:1px solid var(--line)}
.stats>div:last-child{border-right:0}
.stats b{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:300;
  font-size:clamp(2.1rem,4vw,2.9rem);display:block;line-height:1.05;
  font-variation-settings:"opsz" 72,"wght" 300;letter-spacing:-.018em;
}
.stats b em{font-style:italic}
.stats span{font-size:.82rem;color:var(--ink-2);display:block;margin-top:10px}
@media(max-width:760px){
  .stats,.stats.three{grid-template-columns:1fr}
  .stats>div{border-right:0;border-bottom:1px solid var(--line);padding:24px 0 20px}
  .stats>div:last-child{border-bottom:0}
}

/* --------------------------------------------------------------------------
   10. Galerie
   -------------------------------------------------------------------------- */
/* Galerie: ungleiche Spalten und ungleiche Höhen. Drei gleich große Kacheln
   nebeneinander war dasselbe Raster wie überall; jetzt trägt das erste Bild
   mehr Fläche und die mittlere Spalte sitzt tiefer. Der Versatz ist Abstand,
   kein Effekt — er verschiebt nichts beim Laden. */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(16px,2vw,26px);row-gap:26px;margin-top:56px;
}
/* Ungleiche Spalten, aber gemeinsame Oberkante. Ein zusätzlicher senkrechter
   Versatz war ausprobiert und wieder entfernt: bei gleichem Seitenverhältnis
   und ungleichen Breiten sind die Höhen ohnehin verschieden — beides zusammen
   sah nicht komponiert aus, sondern verrutscht. */
@media(min-width:861px){
  .gallery:has(>:nth-child(3)):not(:has(>:nth-child(4))){
    grid-template-columns:1.32fr 1fr 1fr;
    align-items:start;
  }
}
/* Damit die drei Bilder trotz ungleicher Breiten auf einer Höhe schließen,
   bekommt das breite ein eigenes Seitenverhältnis: 1,32 × 0,8 = 1,056.
   Sonst stünde unter den beiden schmalen eine leere Fläche und das Ganze
   sähe abgerutscht aus statt gesetzt.
   Reparatur 09.08.2026: Diese Regel stand bis dahin INNERHALB der
   Abfrage ab 961 px. Unterhalb fiel die erste Kachel auf 4/5 zurück, die
   Datei musste also 1,056 und 0,8 zugleich bedienen — 13 % Beschnitt allein
   dadurch. Sie gilt jetzt auf allen Breiten; die ungleichen Spalten bleiben
   in der Abfrage, denn nur die sind breitenabhängig. */
.gallery:has(>:nth-child(3)):not(:has(>:nth-child(4)))>:first-child{
  aspect-ratio:1.056;
}
.gfig{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  background:var(--paper-2);
  /* Politur 26.08.2026: eine Stufe tiefer als die Karten. Die Kacheln
     tragen Fotos und sind das schwerste Element der Seite — sie sollen
     auch so über dem grauen Grund liegen. Dazu eine hauchfeine dunkle
     Innenkante: Fotos laufen sonst ohne Abschluss in die Rundung, mit ihr
     bekommt die Kachel einen Rand, wie ein gerahmter Abzug.
     Bewusst statisch statt beim Überfahren: .gfig trägt .reveal, und
     dessen transition-Kurzschreibweise steht später im Stylesheet und
     würde einen eigenen Übergang hier überschreiben. Die Bewegung beim
     Überfahren sitzt deshalb am Bild darin, wo sie sauber läuft. */
  box-shadow:var(--shadow-lift),inset 0 0 0 1px rgba(20,20,20,.07);
  /* Fluchtpunkt für die sehr leichte Kippung beim Überfahren. */
  perspective:1400px;
}
/* Bewegung über die EINZELNEN Transform-Eigenschaften translate/scale/rotate
   statt über transform: so können Scroll-Versatz (translate) und
   Zeigefinger-Zustand (scale/rotate) nebeneinander bestehen, ohne sich
   gegenseitig zu überschreiben. Beides ist reine Compositor-Arbeit.
   Die Grundskalierung 1.05 ist der Spielraum, aus dem der Scroll-Versatz
   schöpft — ohne sie käme an der Kante der Hintergrund zum Vorschein. */
.gfig img{
  width:100%;height:100%;object-fit:cover;
  transform-origin:50% 58%;
  scale:1.05;
  transition:scale .7s var(--ease),rotate .7s var(--ease);
  /* Kein will-change: die Scroll-Animation und der Zeigefinger-Zustand
     befördern das Bild ohnehin auf eine eigene Ebene, und zwar nur dann.
     Dauerhaft gesetzt kostet es auf schwachen Geräten durchgehend Speicher —
     also genau dort, wo es wehtut. */
}
.gfig:hover img{scale:1.075;rotate:x .6deg}
/* Politur 26.08.2026: Der Verlauf hatte zwei Stufen und setzte deshalb
   sichtbar an — eine Kante quer über dem Foto. Jetzt fünf Stufen, die dem
   Verlauf des Auges folgen: unten trägt er den Text, oben löst er sich
   vollständig auf. Dieselbe Deckkraft am Text, aber kein Ansatz mehr.
   Kein backdrop-filter hier: Er würde über die volle Fläche unscharf
   zeichnen, auch dort, wo der Verlauf schon durchsichtig ist, und genau
   die harte Kante zurückholen, die dieser Schritt beseitigt. */
.gfig .g-ov{
  position:absolute;left:0;right:0;bottom:0;padding:24px 22px;
  background:linear-gradient(0deg,
    rgba(18,18,18,.93) 0%,
    rgba(18,18,18,.82) 34%,
    rgba(18,18,18,.55) 60%,
    rgba(18,18,18,.24) 80%,
    rgba(18,18,18,.06) 92%,
    rgba(18,18,18,0) 100%);
  color:var(--on-dark);
}
.gfig .t{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun);font-weight:600}
.gfig h3{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.45rem;margin-top:5px;
  font-variation-settings:"opsz" 18,"wght" 420;
}
.gfig p{font-size:.87rem;color:var(--on-dark-2);font-weight:300;margin-top:6px;max-width:var(--measure)}
@media(max-width:860px){
  .gallery,.gallery:has(>:nth-child(3)){grid-template-columns:1fr}
  /* Das frühere aspect-ratio:16/10 ist ersatzlos entfallen (09.08.2026):
     Es kippte dieselbe Datei von 0,8 (stehend) auf 1,6 (liegend) — zwischen
     Telefon und Rechner lagen damit 40 % Beschnitt an derselben Kachel.
     Die Kacheln behalten ihr Format jetzt über alle Breiten. */
}

/* --------------------------------------------------------------------------
   11. Versprechen-Raster
   -------------------------------------------------------------------------- */
/* Vier einzelne weiße Karten mit denselben Abständen wie die Leistungen. */
.prom{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;margin-top:52px;
}
.prom>div{
  background:var(--panel);border-radius:var(--r);
  padding:26px 24px 28px;box-shadow:var(--shadow-soft);
}
.prom .no{
  display:block;background:none;color:var(--ink-2);
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-size:.86rem;font-weight:500;
  letter-spacing:.06em;padding:0;border-radius:0;
  font-variant-numeric:tabular-nums;
}
.prom h3{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.4rem;margin:10px 0 10px;
  font-variation-settings:"opsz" 18,"wght" 420;
}
.prom p{color:var(--ink-2);font-weight:300;font-size:.96rem;max-width:var(--measure)}
@media(max-width:640px){
  .prom{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   12. Info-/Vertrauens-Karten (2 Spalten)
   -------------------------------------------------------------------------- */
/* Zweispalter: ungleiche Breiten statt zwei halber Seiten. Die tragende
   Aussage links bekommt mehr Raum als die begleitende rechts. */
.duo{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,56px);margin-top:52px}
.duo>*{min-width:0}

/* Wie .card seit 26.08.2026 eine echte Fläche: Weiß auf grauem Grund.
   Die Panels sind meist breiter als die Karten und tragen längere Texte,
   deshalb etwas mehr Innenabstand und der größere Radius. */
.pc{
  background:var(--panel);
  border:0;
  border-radius:var(--r-lg);
  padding:30px 30px 32px;
  box-shadow:var(--shadow-soft);
}
.pc h3{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.55rem;
  font-variation-settings:"opsz" 20,"wght" 420;letter-spacing:-.006em;
}
.pc p{margin-top:14px;font-size:.97rem;color:var(--ink-2);font-weight:300;max-width:var(--measure)}
.pc.tint p{color:var(--ink)}
.pc .more{margin-top:20px}
.pc .who,.crew .who{display:flex;gap:18px;align-items:center}
/* Das Kürzel-Rund war eine gelbe Fläche in derselben Machart wie die
   Icon-Kacheln. Jetzt ein feiner Kreis mit Tinte darin. */
/* 28.08.2026 auf Kundenwunsch von 56px auf 96px: die Gesichter sollen
   erkennbar sein. .av und .km-portrait müssen denselben Wert tragen,
   sonst springt die Fahrerliste — sie standen vorher auf 56 und 60. */
.pc .av,.crew .av{
  width:75px;height:96px;border-radius:3px;flex:none;
  background:none;color:var(--ink);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-size:1.9rem;font-weight:500;
  letter-spacing:.04em;
}
.pc .role,.crew .role{color:var(--ink-2);font-weight:500;font-size:.84rem;margin-top:2px}

/* Fahrerliste (25.08.2026): sieben Personen als ruhiges Raster, ohne
   Kartenrahmen — sie sollen als ein Team lesbar sein, nicht als sieben
   einzelne Kacheln. Fließt von drei auf zwei auf eine Spalte. */
.crew{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(24px,3vw,44px);row-gap:clamp(26px,3vw,34px);
  margin-top:52px;
}
.crew h3{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;font-size:1.18rem;
  font-variation-settings:"opsz" 18,"wght" 420;
}
@media(max-width:860px){.crew{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.crew{grid-template-columns:1fr}}
.pc .badge{
  display:block;width:fit-content;margin-top:20px;font-size:.83rem;font-weight:500;
  background:none;border:0;border-left:1px solid var(--line);
  color:var(--ink-2);padding:2px 0 2px 14px;border-radius:0;
  max-width:var(--measure);
}
@media(max-width:760px){.duo{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   13. Dunkle Cover-Sektion — hier darf Gelb Textfarbe sein (12,2:1 auf #2a2a2a)
   -------------------------------------------------------------------------- */
/* Die dunkle Sektion ist der eine Taktwechsel der Seite — hier darf die
   Seite kippen. Sie war eine flache Fläche mit 24px Radius, also eine sehr
   große Karte. Jetzt eine nahezu rechtwinklige Platte mit einem sehr weichen
   Verlauf: die Andeutung einer Lichtquelle oben links, ausgeführt
   ausschließlich zwischen den beiden erlaubten Dunkelwerten #2a2a2a und
   #1c1c1c. Kein Glühen, kein Farbstich, keine neue Farbe.
   Weiß darauf: 14,1:1 am hellsten Punkt, 16,9:1 am dunkelsten. */
.cover{
  background:var(--dark);
  background:
    radial-gradient(128% 96% at 20% -12%,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.018) 34%,
      rgba(255,255,255,0) 62%),
    linear-gradient(158deg,var(--dark) 0%,var(--dark) 34%,var(--dark-2) 100%);
  color:var(--on-dark);border-radius:var(--r-lg);padding:72px clamp(28px,5vw,64px);
  box-shadow:var(--shadow-lift);
}
.cover .ov{color:var(--on-dark-2)}
.cover h2{
  font-size:clamp(1.9rem,4.2vw,3.1rem);margin-top:16px;max-width:18ch;
  font-variation-settings:"opsz" 72,"wght" 300;letter-spacing:-.02em;
}
.cover h2 em{font-style:italic;color:var(--sun)}
.cover .lead{color:var(--on-dark-2);margin-top:18px;max-width:var(--measure)}
.chips{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:32px}
.chips span{
  border:1px solid rgba(255,255,255,.20);border-radius:var(--r);
  padding:8px 15px;font-size:.85rem;color:var(--on-dark-2);
}
.chips span.hot{background:var(--sun);border-color:var(--sun);color:var(--ink);font-weight:600}
.cover .note{margin-top:22px;font-size:.84rem;color:rgba(255,255,255,.6);max-width:var(--measure)}
@media(max-width:640px){.cover{padding:44px 26px}}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:840px;margin:44px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 48px 24px 4px;position:relative;
  font-size:1.14rem;font-family:"Newsreader","Newsreader Fallback",Georgia,serif;font-weight:400;
  font-variation-settings:"opsz" 18,"wght" 420;
  transition:color .18s var(--ease);
}
.faq summary:hover{color:var(--ink-2)}
.faq summary::-webkit-details-marker{display:none}
/* Der gelbe Kreis mit dem Plus war Dekoration an einer Bedienstelle, die
   auch ohne Farbfläche eindeutig ist. Jetzt nur noch das Zeichen selbst,
   in Tinte, ohne Trägerfläche. */
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:0;background:none;
  background-image:linear-gradient(var(--ink-2),var(--ink-2)),linear-gradient(var(--ink-2),var(--ink-2));
  background-size:14px 1px,1px 14px;background-position:center,center;
  background-repeat:no-repeat;transition:transform .22s var(--ease);
}
.faq summary:hover::after{background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink))}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 48px 24px 4px;color:var(--ink-2);font-weight:300;font-size:.97rem;max-width:var(--measure)}

/* --------------------------------------------------------------------------
   15. Kontakt-Abschluss
   -------------------------------------------------------------------------- */
.contact{text-align:center}
.contact .ov{margin:0 auto}
.contact h2{
  font-size:clamp(2rem,4.8vw,3.5rem);margin-top:16px;
  font-variation-settings:"opsz" 72,"wght" 300;letter-spacing:-.022em;
  max-width:20ch;margin-left:auto;margin-right:auto;
}
.contact h2 em{font-style:normal}
/* Gelb bleibt: die Rufnummer ist der Zweck der Seite. Der Strich wird von
   3 px auf 2 px zurückgenommen — genug Signal, weniger Lärm. */
.contact .phone{
  display:block;width:fit-content;margin:6px auto 0;
  font-family:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;font-weight:300;
  font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.12;
  font-variation-settings:"opsz" 72,"wght" 300;letter-spacing:-.022em;
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--sun);padding-bottom:5px;
  transition:border-color .18s var(--ease);
}
.contact .phone:hover{border-color:var(--ink)}
.contact .addr{color:var(--ink-2);margin-top:18px;font-weight:300;font-size:.95rem}
/* Die Bürozeiten sind eine Angabe, keine Schaltfläche. Gelbe Pille entfällt. */
.contact .hours{
  display:inline-block;margin-top:18px;background:none;color:var(--ink-2);
  font-weight:400;font-size:.9rem;padding:8px 0 0;border-radius:0;
  border-top:1px solid var(--line);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
/* Fußbereich in Grau statt in Creme (09.08.2026). Der Fuß ist die eine
   Fläche, die auf JEDER der sieben Seiten steht — Grau wirkt dort am
   verlässlichsten, ohne in den Inhalt zu greifen. Zugleich schließt die
   Seite jetzt auf einer Fläche ab statt auf einer Linie.
   Kontraste auf #e2e3f2: Spaltenüberschrift und Verweise im Überfahren
   #1c1c1c 13,39:1 · Verweise und Zeilen #5e5e5f 5,09:1. */
footer{background:var(--mist);padding:60px 0 40px;border-top:1px solid var(--line);margin-top:20px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:32px}
.foot .serif{font-size:1.45rem;display:flex;align-items:center;gap:10px}
/* Zweite gelbe Kachel derselben Machart — entfällt wie die im Kopf.
   Dasselbe Zeichen wie oben, eine Spur kleiner: die Wortmarke steht hier
   in 1.45rem, das Zeichen darf sie nicht überragen. */
.foot .serif .mk{
  width:auto;height:30px;flex:none;
  background:none;color:var(--ink);
  display:flex;align-items:center;
}
.foot .serif .mk svg{width:auto;height:30px;display:block}
.foot .about{color:var(--ink-2);font-size:.9rem;font-weight:300;max-width:38ch;margin-top:14px}
/* Ebene h3 statt h4 (Lighthouse heading-order, 06.08.2026): die Spalten-
   überschriften folgten im Dokument auf ein h2 und sprangen damit eine Ebene.
   Die Größe hängt an dieser Klasse, nicht an der Ebene — das Bild ist
   unverändert. h4 bleibt mit aufgeführt, falls irgendwo noch eines steht.
   Wichtig: Die Familie muss ausdrücklich gesetzt werden. h3 erbt sonst die
   Newsreader-Serife aus Abschnitt 3, h4 tat das nie. */
.fcol h3,.fcol h4{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  margin-bottom:14px;font-weight:600;line-height:1.4;
}
.fcol a,.fcol span{display:block;color:var(--ink-2);font-size:.9rem;text-decoration:none;margin-bottom:8px;font-weight:300}
.fcol a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fbot{
  /* Der eine Ort für den kräftigeren der beiden Dekor-Grautöne: Diese Linie
     trennt zwei Bereiche, nicht zwei Zeilen. #9f9fa0 auf #e2e3f2 = 2,08:1
     gegenüber 1,43:1 bei #c0c0c1 — sie trägt sichtbar mehr, bleibt aber
     eine Haarlinie. */
  padding-top:24px;border-top:1px solid var(--grey-2);
  font-size:.8rem;color:var(--ink-2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.foot{grid-template-columns:1fr;gap:26px}}

/* --------------------------------------------------------------------------
   17. Reveal-Animation
   -------------------------------------------------------------------------- */
/* Umgekehrtes Prinzip (Härtung 03.08.2026): Inhalte sind IMMER sichtbar.
   Versteckt wird nur, wenn das Skript nachweislich läuft und einen
   IntersectionObserver hat — es setzt dazu .hat-reveal auf <html>.
   Fällt das Skript aus, blockiert ein Browser es, oder feuert der Observer
   nicht (z. B. bei nicht gerendertem Tab), bleibt die Seite lesbar statt leer.
   Zusätzlich blendet das Skript nach 1,5 s alles ein, was noch offen ist. */
/* Qualität statt Menge (06.08.2026): Weg 22 -> 10 px, Dauer 1 s -> 620 ms.
   Ein kurzer Weg wirkt beiläufig, ein langer wie eine Vorführung. Die Kurve
   schwingt bewusst nicht über — nichts federt.
   Dazu ein Versatz zwischen Geschwistern (70/140/210 ms): die Gruppe kommt
   als Gruppe statt als vier gleichzeitige Sprünge. Mehr als 210 ms wartet
   niemand auf eine Überschrift. */
.hat-reveal .reveal{
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}
.hat-reveal .reveal.in{opacity:1;transform:none}
.hat-reveal .reveal:nth-child(2){transition-delay:70ms}
.hat-reveal .reveal:nth-child(3){transition-delay:140ms}
.hat-reveal .reveal:nth-child(4){transition-delay:210ms}

/* --------------------------------------------------------------------------
   17.1 Seitenwechsel — View Transitions, rein deklarativ
   Kein Skript, kein Ereignis-Abfangen, damit auch nichts an der
   Content-Security-Policy hängt. Browser ohne Unterstützung überlesen die
   Regel und wechseln wie bisher hart — das ist die Rückfallebene.
   220 ms Überblendung ohne Bewegung: es soll die Seite ruhig übergeben,
   nicht schieben.
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:220ms;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   17.2 Gestaffelte Ebenen beim Scrollen
   Umgesetzt über animation-timeline:view() — die Bewegung hängt am Scroll-
   Fortschritt des Elements und läuft im Compositor, nicht im Hauptthread.
   Kein Skript, kein Scroll-Ereignis, kein Ersatz für Browser ohne
   Unterstützung: dort steht das Bild einfach still. Das ist die Rückfallebene.
   Bewegt wird ausschließlich translate — kein Neu-Layout, kein Neu-Zeichnen.
   Der Weg beträgt 7 px nach oben und 7 px nach unten über den gesamten
   Durchlauf; die Bildunterschrift läuft mit 4 px gegen. Das ist absichtlich
   so wenig, dass es erst auffällt, wenn man es wegnimmt.
   Das Hero-Bild bleibt ausdrücklich unbewegt: es ist das LCP-Element, dort
   wird nichts angefasst, was den Aufbau verzögern könnte.
   -------------------------------------------------------------------------- */
@supports (animation-timeline:view()){
  @keyframes km-schub{
    from{translate:0 7px}
    to  {translate:0 -7px}
  }
  @keyframes km-gegenschub{
    from{translate:0 -4px}
    to  {translate:0 4px}
  }
  /* Zwei Fallen, beide beim Messen aufgefallen:
     1. Keine Kurzschreibweise — "animation:km-schub linear both" setzt
        animation-duration auf 0s. An einer Scroll-Zeitachse muss sie "auto"
        sein, sonst steht die Bewegung still.
     2. Kein view() am Bild selbst: .gfig hat overflow:hidden und ist damit
        ein eigener Scroll-Container, der nie scrollt (gemessen: Fortschritt
        konstant 50 %). Deshalb benennt .gfig die Zeitachse, die Kinder
        hängen sich daran. */
  .gfig{
    view-timeline-name:--km-bild;
    view-timeline-axis:block;
  }
  .gfig img,.gfig .g-ov{
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--km-bild;
    animation-range:entry 0% exit 100%;
  }
  .gfig img  {animation-name:km-schub}
  .gfig .g-ov{animation-name:km-gegenschub}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
  }
  .hat-reveal .reveal{opacity:1;transform:none}
  .hat-reveal .reveal:nth-child(2),
  .hat-reveal .reveal:nth-child(3),
  .hat-reveal .reveal:nth-child(4){transition-delay:0s}
  /* Scroll-Versatz und Zeigefinger-Zustände auf den Bildern still stellen.
     Die Grundskalierung bleibt — sie ist Bildausschnitt, keine Bewegung. */
  .gfig img,.gfig .g-ov{animation:none!important}
  .gfig img{translate:none}
  .gfig:hover img{scale:1.05;rotate:none}
  /* Seitenwechsel-Überblendung abschalten. Die Regel oben greift auf den
     View-Transition-Pseudoelementen nicht zuverlässig, deshalb ausdrücklich. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}

/* ==========================================================================
   18. ERGÄNZUNGEN — angehängt für leistungen · fuhrpark · ueber-uns
   Ausschließlich neue Regeln. An den Abschnitten 1–17 wurde nichts geändert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   18.1 Newsreader Kursiv — eigene Datei statt synthetischer Schräglage
   Die Roman-Datei bleibt unverändert (Variable Font, Weight-Range 300–500);
   dieses Face ergänzt sie nur um font-style:italic. Betrifft alle
   Kursiv-Akzente: .hl, .ohead h2 em, .cover h2 em, .stats b em, .contact h2 em.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight:300 500;
  font-style:italic;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   18.1a Ersatzschrift mit angeglichenen Maßen (Reparatur 07.08.2026)
   Befund: bei 1440 px lag CLS bei 0,116. Nachgewiesene Ursache — die Seite
   einmal ohne newsreader-italic.woff2 geladen: CLS 0,0021 statt 0,1158.
   Die Kursive kam als letzte Datei an; bis dahin stand "Persönlich" in
   Georgia Kursiv, die 10 % breiter läuft. Dadurch brach die H1 anders um und
   schob alles darunter (.hero-note, .sub, .cta) nach unten.
   Nur vorladen genügt nicht: dann kommt die Datei früher, der Sprung bleibt
   gleich groß. Auch getestet und wieder verworfen — der Preload der 147 kB
   großen Kursiv-Datei kostete im Lighthouse-Mobiltest 0,8 s LCP auf den
   Rechtsseiten (2,4 s -> 3,2 s), ohne dass CLS davon profitierte.
   Was wirkt: die Ersatzschrift belegt denselben Raum. Die Werte sind an den
   echten Überschriften dieser Seite gemessen und dann nachgemessen, nicht
   aus einer Tabelle übernommen (Newsreader gegen Georgia, Anzeigengrößen
   40–74 px, wo ein umspringender Umbruch eine ganze Zeile kostet):
     Laufweite  Newsreader Kursiv : Georgia Kursiv = 85,5 %
     Laufweite  Newsreader Roman  : Georgia Roman  = 94,0 %
   ascent/descent sind auf die so angepasste Kegelgröße umgerechnet
   (74/26 Einheiten je Geviert geteilt durch size-adjust).
   Fällt local() aus (kein Georgia auf dem Gerät), greift wie bisher der Rest
   der Kette — die Seite verliert dann nur den Ausgleich, nichts weiter.
   Gemessen 1440 px, kalter Cache, 1,6 Mbit/s: CLS 0,1158 -> 0,0001
   (schlechteste Seite kontakt.php 0,0346 -> 0,0067), mobil 390 px 0,0000.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Newsreader Fallback";
  src:local("Georgia"),local("Georgia Regular");
  font-style:normal;
  size-adjust:94.0%;
  ascent-override:78.7%;
  descent-override:27.7%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Newsreader Fallback";
  src:local("Georgia Italic"),local("Georgia-Italic"),local("Georgia");
  font-style:italic;
  size-adjust:85.5%;
  ascent-override:86.5%;
  descent-override:30.4%;
  line-gap-override:0%;
}

/* --------------------------------------------------------------------------
   18.2 Merkmal-Liste — für das Patienten-Merkblatt und die Ausstattungs-
   Listen. Nötig, weil der Reset in Abschnitt 3 jede Listendarstellung
   entfernt und es bisher keine Listen-Komponente gab.
   Die Punkte sind bewusst eine wiederholbare <li>-Struktur: spätere echte
   Angaben lassen sich zeilenweise austauschen.
   -------------------------------------------------------------------------- */
.tlist{list-style:none;display:grid;gap:15px;margin-top:22px}
.tlist li{position:relative;padding-left:34px;color:var(--ink-2);font-weight:300;font-size:.97rem}
.tlist li b{color:var(--ink);font-weight:500}
/* Überarbeitung 06.08.2026: Jeder Punkt trug ein gelbes Scheibchen mit Haken.
   Bei neun Punkten hintereinander wird daraus eine gelbe Punktreihe — Gelb
   als Dauerton statt als Akzent. Der Haken bleibt, die Scheibe fällt weg. */
.tlist li{padding-left:28px;max-width:var(--measure)}
.tlist li::before{
  content:"";position:absolute;left:1px;top:.52em;
  width:9px;height:5px;border-radius:0;background:none;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg);
}
/* Inline-Kennzeichnung innerhalb eines Listenpunkts (z. B. Genehmigungspflicht) */
.tlist .tag{
  display:inline-block;margin-left:7px;vertical-align:1px;
  background:none;border:1px solid var(--line);color:var(--ink-2);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:1px 8px;border-radius:var(--r);
}
.pc.tint .tlist li{color:var(--ink)}

/* --------------------------------------------------------------------------
   18.3 Karten-Stapel — untereinander stehende .pc-Karten in voller Breite.
   .duo deckt nur den Zweispalter ab; für breite Einzelkarten fehlte der
   gleiche Außenabstand.
   -------------------------------------------------------------------------- */
.stack{display:grid;gap:18px;margin-top:50px}

/* ==========================================================================
   19. ERGÄNZUNGEN — angehängt für kontakt · impressum · datenschutz
   sowie für den Adminbereich-Hinweis und die Team-Porträts.
   Ausschließlich neue Regeln. An den Abschnitten 1–18 wurde nichts geändert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.1 Aktueller Hinweis (Feld "hinweis" aus dem Adminbereich)
   Steht auf allen Seiten direkt unter der Navigation. Die Navigation ist
   fixiert, deshalb trägt der Hinweis den nötigen Abstand nach oben selbst.
   Ist er da, braucht der Hero seinen eigenen großen Abstand nicht mehr —
   diese Regel greift nur, wenn der Hinweis tatsächlich ausgegeben wurde.
   -------------------------------------------------------------------------- */
.km-hinweis{
  background:var(--sun);color:var(--ink);
  padding:104px 0 16px;border-bottom:1px solid rgba(28,28,28,.14);
}
.km-hinweis p{font-weight:500;font-size:.97rem;max-width:80ch}
.km-hinweis + main .hero{padding-top:52px}

/* --------------------------------------------------------------------------
   19.2 Kontaktseite — Formular links, Angaben rechts
   -------------------------------------------------------------------------- */
.km-kontakt{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
/* Rasterkinder dürfen nie breiter werden als ihre Spalte. Ohne min-width:0
   gilt für sie min-width:auto — ein langes Wort oder ein unglücklich
   gesetzter Innen-Container schiebt dann die gesamte Seite seitwärts. */
.km-kontakt>*{min-width:0}
.km-kontakt-info{display:grid;gap:18px}
.km-kontakt-info .pc{padding:32px 28px}
.km-kontakt-info .pc p{margin-top:12px}
@media(max-width:900px){.km-kontakt{grid-template-columns:1fr;gap:26px}}

/* Beschriftete Kontaktangaben */
.km-daten{margin-top:18px}
.km-daten dt{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin-top:18px;
}
.km-daten dt:first-child{margin-top:0}
.km-daten dd{margin-top:4px;font-size:1rem;font-weight:300;color:var(--ink)}
.km-daten dd a{text-decoration:none;border-bottom:2px solid rgba(28,28,28,.28)}
.km-daten dd a:hover{border-color:var(--ink)}

.km-linkhinweis{font-size:.85rem;color:var(--ink-2);font-weight:300}

/* --------------------------------------------------------------------------
   19.3 Kontaktformular
   Schriftgröße der Eingabefelder bewusst 1rem (16px): darunter zoomt iOS
   beim Antippen in das Feld hinein und die Seite verrutscht.
   -------------------------------------------------------------------------- */
/* Das Formular bleibt bewusst eine eigene Fläche: hier liegt tatsächlich
   etwas über dem Papier, in das man hineinschreibt. Statt des Rands trägt es
   jetzt den weichen, mehrstufigen Schatten. */
.km-formular{
  background:var(--panel);border:0;border-radius:var(--r);
  box-shadow:var(--shadow-soft);
  padding:36px clamp(20px,3vw,34px);margin-top:34px;
}
.km-formular form p{margin-top:22px}
.km-formular form p:first-of-type{margin-top:0}
.km-formular label{
  display:block;font-size:.92rem;font-weight:500;color:var(--ink);margin-bottom:8px;
}
.km-formular input[type="text"],
.km-formular input[type="email"],
.km-formular input[type="tel"],
.km-formular textarea{
  width:100%;display:block;
  font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5;color:var(--ink);
  background:var(--paper);
  border:1px solid rgba(28,28,28,.30);border-radius:var(--r);
  padding:14px 16px;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.km-formular textarea{resize:vertical;min-height:150px}
.km-formular input[type="text"]:hover,
.km-formular input[type="email"]:hover,
.km-formular input[type="tel"]:hover,
.km-formular textarea:hover{border-color:var(--ink)}
.km-formular input:focus-visible,
.km-formular textarea:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
  border-color:var(--ink);background:var(--panel);
}
/* Rückfallebene für Browser ohne :focus-visible bei Formularfeldern */
.km-formular input:focus,
.km-formular textarea:focus{border-color:var(--ink);background:var(--panel)}

.km-optional{color:var(--ink-2);font-weight:400}

/* Einwilligung: Kästchen links, Text daneben, ganze Zeile anklickbar.
   BEWUSST kein display:flex und kein display:grid auf dem Label. Der Text
   enthält einen Link; ein Flex- oder Grid-Container macht daraus mehrere
   eigenständige Kinder, deren Mindestbreiten sich ADDIEREN — auf schmalen
   Handys sprengt das die Spalte und die ganze Seite scrollt seitwärts
   (nachgemessen bei 390 px: 423 px statt 350 px). Stattdessen bleibt der Text
   ein einziger Fließtext und das Kästchen hängt absolut daneben — dasselbe
   Muster wie bei .tlist in Abschnitt 18.2. */
.km-datenschutz label{
  display:block;position:relative;padding-left:37px;
  font-size:.94rem;font-weight:300;color:var(--ink-2);line-height:1.55;
  cursor:pointer;margin-bottom:0;
}
.km-datenschutz input[type="checkbox"]{
  position:absolute;left:0;top:.1em;
  width:24px;height:24px;
  accent-color:var(--ink);cursor:pointer;
}
.km-datenschutz input[type="checkbox"]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.km-datenschutz a{color:var(--ink);font-weight:500}

.km-formular button[type="submit"]{
  font-family:inherit;font-size:1rem;font-weight:600;
  background:var(--sun);color:var(--ink);
  border:1px solid transparent;border-radius:var(--r);
  padding:16px 34px;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s var(--ease),
             color .18s var(--ease),box-shadow .18s var(--ease);
}
.km-formular button[type="submit"]:hover{background:var(--ink);color:var(--sun);transform:translateY(-2px);box-shadow:var(--shadow-soft)}

.km-pflicht{font-size:.85rem;color:var(--ink-2);font-weight:300}

/* Rückmeldungen
   Erfolg und Fehler dürfen sich nicht allein durch die Farbe unterscheiden —
   bei Farbsehschwäche wäre der Unterschied sonst weg. Statt eines farbigen
   Seitenbalkens trägt jede Meldung ein Symbol: es funktioniert auch in
   Graustufen und ist eindeutiger als ein Strich. Der zweite Wert in content
   (nach dem Schrägstrich) hält den Screenreader davon ab, das Zeichen
   vorzulesen — die Meldung selbst sagt bereits alles. */
.km-erfolg,.km-fehler{
  position:relative;border-radius:var(--r);padding:18px 20px 18px 54px;
  margin-bottom:26px;color:var(--ink);font-size:.97rem;
}
.km-erfolg::before,.km-fehler::before{
  position:absolute;left:20px;top:17px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;line-height:1;
}
.km-erfolg{background:var(--tint);border:1px solid rgba(28,28,28,.16)}
.km-erfolg::before{content:"✓" / "";background:var(--ink);color:var(--sun)}
.km-fehler{background:var(--paper-2);border:1px solid rgba(28,28,28,.22)}
.km-fehler::before{content:"!" / "";background:#a3231f;color:#fff}
.km-fehler p{font-weight:600;font-size:.97rem}
.km-fehler ul{list-style:none;margin-top:10px;display:grid;gap:7px}
.km-fehler li{position:relative;padding-left:20px;font-size:.94rem;font-weight:300}
.km-fehler li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:8px;height:8px;border-radius:50%;background:#a3231f;
}

@media(max-width:520px){
  .km-formular{padding:26px 20px}
  .km-kontakt-info .pc{padding:26px 20px}
}

/* --------------------------------------------------------------------------
   19.4 Team-Porträt — ersetzt das Kürzel-Rund, wenn ein Foto hochgeladen ist
   -------------------------------------------------------------------------- */
.km-portrait{
  width:75px;height:96px;flex:none;border-radius:3px;object-fit:cover;
  background:var(--paper-2);
}

/* 02.09.2026 auf Kundenwunsch: Der Betrieb hat neue Aufnahmen fuer Herrn
   Karacan, Frau Kraemer und Frau Kuchelmeister geliefert, jeweils mit mehr
   Umfeld. Damit entfaellt die Sonderregel vom 31.08., die sein zu enges Foto
   per object-position an den linken Bildrand geschoben hat. Die neuen Dateien
   liegen im Rahmenverhaeltnis 75:96 vor, cover schneidet daher nichts mehr ab.
   Herkunft der Dateien siehe Befund-KI-Bilder-2026-09-02 im Projektordner. */

/* 02.09.2026 auf Kundenwunsch: Die beiden Portraits im Geschaeftsfuehrungs-
   Block sollen groesser sein als die Fahrerliste. 110x141 haelt das Verhaeltnis
   75:96 exakt, deshalb schneidet cover auch hier nicht. Das .av-Kuerzel traegt
   denselben Wert, sonst springt die Zeile, sobald ein Foto fehlt. */
.pc .who .km-portrait,.pc .who .av{width:110px;height:141px}
.pc .who p{margin-top:0}

/* --------------------------------------------------------------------------
   19.5 Rechtsseiten — Impressum und Datenschutzerklärung
   Schlichte, gut lesbare Typografie. Bewusst schmale Zeilenlänge.
   -------------------------------------------------------------------------- */
.km-recht-kopf{padding-bottom:44px}
/* Reparatur 07.08.2026 (beim Prüfen von 320 px aufgefallen, kein Teil der
   drei gemeldeten Befunde): "Datenschutzerklärung" ist bei 40 px 361 px breit
   und passt unter 401 px in keine Zeile. Das Wort lief über den rechten Rand
   hinaus und zog die Seite auf 381 px auf — bei 320 px war das Ende des
   Wortes abgeschnitten.
   Zuerst versucht: trennen (hyphens:auto). Verworfen — wo genau getrennt
   wird, hängt an der Schriftbreite, und solange Newsreader noch lädt, steht
   Georgia da. Die Überschrift sprang dadurch zwischen einer und zwei Zeilen:
   gemessene CLS 0,034 auf 390 px, also genau der Fehler aus Befund 2 an
   anderer Stelle. Stattdessen wird die Überschrift unterhalb von 401 px an
   die Breite gebunden. Bei 320 px sind das 27 px statt 40 px — das Wort
   passt damit in JEDER Schrift in eine Zeile, der Umbruch kann nicht mehr
   kippen. break-word bleibt als letzter Riegel gegen Abschneiden stehen. */
@media(max-width:400px){
  .km-recht-kopf h1{font-size:min(2.5rem,8.5vw);overflow-wrap:break-word}
}
.km-recht{max-width:760px}
.km-recht h2{
  font-size:1.5rem;font-weight:400;margin-top:48px;
  padding-top:22px;border-top:1px solid var(--line);
  font-variation-settings:"opsz" 20,"wght" 420;
}
.km-recht h2:first-child{margin-top:0;padding-top:0;border-top:0}
.km-recht p{margin-top:14px;font-size:1rem;font-weight:300;color:var(--ink-2);line-height:1.75;max-width:var(--measure)}
.km-recht p b,.km-recht li b{color:var(--ink);font-weight:500}
.km-recht a{color:var(--ink);font-weight:500}
.km-liste{list-style:none;display:grid;gap:11px;margin-top:16px}
.km-liste li{
  position:relative;padding-left:24px;max-width:var(--measure);
  font-size:1rem;font-weight:300;color:var(--ink-2);line-height:1.7;
}
/* Gelbe Punkte vor jedem Aufzählungspunkt einer Rechtsseite trugen keine
   Bedeutung. Ein feiner Strich ordnet genauso und ist ruhiger zu lesen.
   Farbe ist --ink-2 und nicht --grey-2: nachgemessen erreicht --grey-2 auf
   Creme nur 2,53:1 — als Marke für ältere Augen zu blass, auch wenn
   Dekor formal keinen Textkontrast braucht. --ink-2 liegt bei 6,19:1. */
.km-liste li::before{
  content:"";position:absolute;left:2px;top:.86em;
  width:9px;height:1px;border-radius:0;background:var(--ink-2);
  border:0;
}
.km-recht-fuss{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.95rem;
}

/* --------------------------------------------------------------------------
   19.6 Redaktionshinweise — sichtbar, unübersehbar, vor dem Livegang zu
   entfernen. Bewusst nicht dezent: dieser Kasten soll stören.
   -------------------------------------------------------------------------- */
.km-redaktion{
  background:var(--sun);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--r);
  padding:28px 30px;max-width:760px;
}
.km-redaktion h2{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  line-height:1.4;
}
.km-redaktion p{margin-top:13px;font-size:.95rem;font-weight:400;line-height:1.65}
.km-redaktion p b{font-weight:600}

/* Fehlende Angabe mitten im Fließtext */
.km-fehlend{
  display:block;background:var(--tint);
  border:2px dashed rgba(28,28,28,.55);border-radius:12px;
  padding:16px 18px;margin-top:16px;
  color:var(--ink)!important;font-weight:400;font-size:.94rem;line-height:1.65;
}
.km-fehlend b{color:var(--ink);font-weight:600}
span.km-fehlend{display:inline;padding:1px 7px;border-radius:6px;margin-top:0}

@media(max-width:520px){
  .km-redaktion{padding:22px 20px}
  .km-recht h2{font-size:1.35rem}
}

/* ---------------------------------------------------------------------
   Nachtrag 03.08.2026 (Sicherheits-Lauf): Honigtopf des Kontaktformulars.
   Stand vorher als style="…" im HTML. Hier ausgelagert, damit die
   Content-Security-Policy der oeffentlichen Seiten ohne 'unsafe-inline'
   auskommt. Wirkung unveraendert: fuer Menschen unsichtbar, fuer Bots nicht.
   --------------------------------------------------------------------- */
.km-formular .km-hp{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ---------------------------------------------------------------------
   Standortkarte (26.08.2026). Ein Bild, kein eingebetteter Kartendienst —
   die Begründung steht im Markup. Sie sitzt in einem .pc-Panel, trägt
   deshalb den kleineren Radius und einen ruhigen Rahmen statt Schatten:
   Zwei Schattenlagen übereinander (Panel und Bild) sähen aus wie ein
   Aufkleber auf einer Karte.
   --------------------------------------------------------------------- */
.km-karte{
  margin:20px 0 22px;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:inset 0 0 0 1px rgba(20,20,20,.09);
}
.km-karte img{width:100%;height:auto;display:block}

/* ---------------------------------------------------------------------
   Nachtrag 26.08.2026: Aufklappbare Fahrzeugbilder.
   Vorgabe des Betriebs, Seite 5 seines Ausdrucks: "Bilder hinterlegen
   die bei draufklicken erscheinen", mit Zuordnung der Dateinamen je
   Fahrzeug. Umgesetzt mit <dialog>, weil das Element Fokusfang,
   Escape-Taste und die Sperre des Hintergrunds vom Browser bekommt,
   statt sie in Skript nachzubauen.
   --------------------------------------------------------------------- */

/* Der Knopf wird per Skript eingesetzt. Diese Regel ist die Rückfallebene:
   Taucht er ohne Skript doch im Markup auf, bleibt er unsichtbar, statt
   als tote Schaltfläche dazustehen. */
.kfz-mehr{display:none}
.hat-js .gfig .kfz-mehr{
  display:inline-flex;align-items:center;gap:7px;
  position:absolute;right:16px;top:16px;z-index:2;
  padding:9px 15px;border:0;border-radius:999px;cursor:pointer;
  font:500 .82rem/1 "Inter","Inter Fallback",system-ui,sans-serif;
  color:var(--ink);
  /* Eigenes Material: Der Knopf liegt auf dem Foto, nicht auf der Seite.
     Halbdeckendes Weiß mit Unschärfe hält ihn auf hellen wie dunklen
     Bildstellen lesbar. */
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--shadow-soft);
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hat-js .gfig .kfz-mehr{background:#fff}
}
@media (prefers-reduced-transparency:reduce){
  .hat-js .gfig .kfz-mehr{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.hat-js .gfig .kfz-mehr:hover{background:#fff;transform:translateY(-2px)}
.hat-js .gfig .kfz-mehr:active{transform:scale(.97);transition:transform var(--t-press) var(--ease-press)}
.kfz-mehr .zahl{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--sun);font-weight:600;font-size:.74rem;
}

.kfz-dialog{
  border:0;padding:0;border-radius:var(--r-lg);
  width:min(1100px,calc(100vw - 40px));max-width:none;
  max-height:calc(100vh - 60px);
  /* Ohne diese Zeile klebt der Dialog in der linken oberen Ecke: die
     eigene width-Angabe hebt die Vorgabe des Browsers auf, die ihn sonst
     mittig setzt. Im Browser nachgesehen, nicht angenommen. */
  margin:auto;
  /* Politur 26.08.2026: Der Dialog ist eine Glasscheibe über der Seite,
     kein weißes Blatt. Die Seite darunter ist ohnehin abgedunkelt, das
     Durchscheinen bleibt deshalb ruhig — man sieht, worüber man steht.
     Die helle Oberkante lässt die Scheibe eine Dicke haben. */
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  backdrop-filter:saturate(180%) blur(30px);
  color:var(--ink);
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kfz-dialog{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  .kfz-dialog{
    background:var(--panel);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
.kfz-dialog::backdrop{
  background:rgba(28,28,28,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* Der Kopf klebt beim Blättern oben. Deckend weiß läge er als Platte auf
   der Glasscheibe — deshalb dieselbe Transluzenz, nur eine Spur dichter,
   damit die Überschrift auch über einem Foto steht. */
.kfz-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-bottom:1px solid var(--line-2);
  position:sticky;top:0;z-index:1;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kfz-kopf{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){
  .kfz-kopf{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.kfz-kopf h3{
  font-family:"Newsreader","Newsreader Fallback",Georgia,serif;
  font-weight:400;font-size:1.4rem;letter-spacing:-.006em;
  font-variation-settings:"opsz" 18,"wght" 420;
}
.kfz-zu{
  flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:var(--paper);color:var(--ink);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .18s var(--ease);
}
.kfz-zu:hover{background:var(--line)}
.kfz-zu:active{transform:scale(.94);transition:transform var(--t-press) var(--ease-press)}
.kfz-bilder{
  display:grid;gap:14px;padding:18px 22px 22px;
  overflow-y:auto;max-height:calc(100vh - 160px);
}
@media(min-width:800px){ .kfz-bilder{grid-template-columns:1fr 1fr} }
/* Gleiche Höhe für alle Bilder im Dialog. Der Betrieb hat quer- und
   hochformatige Aufnahmen geliefert; nebeneinander in Originalhöhe stehen
   sie ungleich und wirken zusammengewürfelt. Ein gemeinsames Format von
   3:2 hält die Reihe ruhig, und weil alle Motive mittig stehen, kostet der
   Beschnitt an den Rändern nichts Wesentliches. */
.kfz-bilder img{
  width:100%;height:auto;display:block;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r);background:var(--paper-2);
}
@media(max-width:520px){
  .kfz-dialog{width:calc(100vw - 20px);border-radius:var(--r)}
  .hat-js .gfig .kfz-mehr{right:12px;top:12px;padding:8px 13px;font-size:.78rem}
}
/* Wer Bewegung abbestellt hat, bekommt den Dialog ohne Anflug. */
@media (prefers-reduced-motion:reduce){
  .hat-js .gfig .kfz-mehr{transition:none}
  .hat-js .gfig .kfz-mehr:hover{transform:none}
}