/*
 Theme Name:   KFZ Hambüchen
 Theme URI:    https://kfz-hambuechen.de
 Description:  Eigenständiges Block-Theme für KFZ-Hambüchen. Self-contained, portabel, ohne Parent-Abhängigkeit und ohne externe Dienste – die Seite lädt nichts von Dritt-Servern und kommt damit ohne Einwilligungsbanner aus.
 Author:       KFZ-Hambüchen
 Author URI:   https://kfz-hambuechen.de
 Version:      2.1.0
 Requires at least: 6.5
 Tested up to: 7.0
 Requires PHP: 7.4
 Text Domain:  kfz-hambuechen
*/

/* =========================================================================
   AUFBAU DIESER DATEI

   Zwei Grundregeln, an denen sich alles Weitere ausrichtet:

   1. Die Inhaltsbreite ("Schale") entsteht immer über `padding-inline` am
      Container – nie über `margin-inline:auto` an dessen Kindern. Sonst
      genügt in einer Kindregel eine `margin`-Kurzform, um die Zentrierung
      stillschweigend auszuhebeln.
   2. Kindregeln setzen deshalb ausschließlich `margin-block`, niemals die
      `margin`-Kurzform.
   ========================================================================= */

/* =========================================================================
   SCHRIFTEN

   Überschriften und Fließtext laufen über einen System-Font-Stack (siehe
   theme.json). Das lädt nichts nach und sieht auf allen Plattformen
   ordentlich aus.

   Für ein eigenständigeres Markenbild lassen sich Inter und Barlow Condensed
   nachrüsten – zwingend selbst gehostet, nicht über das Google-CDN, sonst
   wandert bei jedem Seitenaufruf die Besucher-IP zu Google und die Seite
   braucht wieder ein Einwilligungsbanner. Vorgehen:
     1. woff2-Dateien (Subset latin) nach assets/fonts/ legen
     2. Die @font-face-Regeln unten einkommentieren
     3. In functions.php ein <link rel="preload" as="font" crossorigin> für
        die beiden Above-the-fold-Schnitte ergänzen
   ========================================================================= */

/*
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('assets/fonts/inter-latin-variable.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/barlow-condensed-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+20AC;
}
*/

/* =========================================================================
   TOKENS

   Kurzformen der in theme.json definierten Werte. theme.json bleibt die
   Quelle – hier stehen nur Aliase, damit die Regeln lesbar bleiben.
   ========================================================================= */

:root{
  --surface:        var(--wp--custom--color--surface, #fff);
  --surface-alt:    var(--wp--custom--color--surface-alt, #f5f5f6);
  --surface-invert: var(--wp--custom--color--surface-invert, #141417);
  --border:         var(--wp--custom--color--border, #e8e8ea);
  --border-strong:  var(--wp--custom--color--border-strong, #a3a3ab);
  --text:           var(--wp--custom--color--text, #141417);
  --text-muted:     var(--wp--custom--color--text-muted, #52525b);
  --action:         var(--wp--custom--color--action, #cc0000);
  --action-hover:   var(--wp--custom--color--action-hover, #a80000);
  --action-active:  var(--wp--custom--color--action-active, #870606);
  --action-subtle:  var(--wp--custom--color--action-subtle, #fff1f1);
  --focus:          var(--wp--custom--color--focus-ring, #a80000);

  --r-sm:   var(--wp--custom--radius--sm, 8px);
  --r-md:   var(--wp--custom--radius--md, 12px);
  --r-lg:   var(--wp--custom--radius--lg, 16px);
  --r-pill: var(--wp--custom--radius--pill, 999px);

  --e-sm: var(--wp--custom--elevation--sm, 0 2px 6px rgba(9,9,11,.07));
  --e-md: var(--wp--custom--elevation--md, 0 6px 18px rgba(9,9,11,.08));
  --e-lg: var(--wp--custom--elevation--lg, 0 14px 34px rgba(9,9,11,.12));
  --e-up: var(--wp--custom--elevation--up, 0 -8px 24px rgba(9,9,11,.10));

  --t-fast: var(--wp--custom--motion--fast, 140ms);
  --t-base: var(--wp--custom--motion--base, 220ms);
  --ease:   var(--wp--custom--motion--ease, cubic-bezier(.2,.7,.3,1));

  /* Breiten */
  --shell:  1200px;
  --gutter: clamp(1rem, 4vw, 1.5rem);

  /* Zeilenlängen – drei Maße, mehr braucht es nicht */
  --measure:        68ch;   /* Fließtext */
  --measure-lead:   58ch;   /* Vorspann unter einer Überschrift */
  --measure-narrow: 46ch;   /* kurze Hinweise in Spalten */

  /* Von ui.js gesetzt, sobald die tatsächliche Kopfhöhe feststeht */
  --header-h: 5rem;
  --sticky-h: 0px;
}

/* Kurzform für die Schale: Randabstand, ab --shell zentriert. */
@supports (width: max(1px, 2px)){
  .u-shell{ padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2)); }
}

/* =========================================================================
   BASIS
   ========================================================================= */

/* Ohne das addiert jedes width:100% sein Padding obendrauf – Formularfelder
   sprengen ihre Karte, min-height wirkt auf die Contentbox statt auf das
   ganze Element. WordPress liefert diesen Reset nicht global mit. */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  overflow-wrap:break-word;
  padding-bottom:var(--sticky-h);   /* Platz für die fixierte Aktionsleiste */
}

/* Lange deutsche Komposita dürfen umbrechen, statt aus dem Viewport zu ragen. */
h1,h2,h3,h4{ overflow-wrap:break-word; hyphens:auto; text-wrap:balance; }
p{ text-wrap:pretty; }

img,video,svg{ max-width:100%; height:auto; }

/* Grid- und Flex-Kinder dürfen schrumpfen – sonst sprengt langer Inhalt das Raster. */
.wp-block-column,
.kfz-services__item,
.kfz-contactgrid > *,
.site-header__inner > *{ min-width:0; }

/* Ziffern in Telefonnummern und Zeiten laufen nicht mehr optisch auseinander. */
.kfz-hours__list,
.kfz-hours-bar,
.footer-hours,
.site-footer address{ font-variant-numeric:tabular-nums; }

/* --- Fokus: eine Regel für alles, invertiert auf dunklem Grund ----------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.site-footer :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.section--trust :where(a, button):focus-visible,
.kfz-ctaband :where(a, button):focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 6px rgba(0,0,0,.55);
}

/* --- Sprungmarke -------------------------------------------------------- */
.kfz-skiplink{
  position:fixed; top:.75rem; left:.75rem; z-index:10000;
  transform:translateY(-200%);
  background:var(--surface); color:var(--action-hover);
  padding:.75rem 1.25rem; border-radius:var(--r-sm);
  box-shadow:var(--e-lg); font-weight:700; text-decoration:underline;
  transition:transform var(--t-fast) var(--ease);
}
.kfz-skiplink:focus-visible{ transform:translateY(0); }

/* =========================================================================
   LAYOUT

   Die Schale entsteht aus dem Padding des Abschnitts. Kinder brauchen
   deshalb weder max-width noch automatische Ränder – und keine Kindregel
   kann die Ausrichtung mehr versehentlich aufheben.
   ========================================================================= */

/* Farbflächen stoßen direkt aneinander – der Standardabstand zwischen
   Blöcken würde sonst weiße Streifen zwischen Hero, dunkler Vertrauensleiste
   und rotem Handlungsband erzeugen. */
main.wp-block-group > *{ margin-block:0; }

.section{
  padding-block:clamp(2.5rem, 5vw, 4.5rem);
  padding-inline:max(var(--gutter), calc((100% - var(--shell)) / 2));
}
.section--alt{ background:var(--surface-alt); }
.section--tight{ padding-block:clamp(1.75rem, 3.5vw, 2.75rem); }

/* Lesbare Zeilenlängen für Fließtext, der direkt im Abschnitt steht. */
.section > :is(p, ul, ol, dl){ max-width:var(--measure); }
.section > :is(h2, h3){ max-width:34ch; }
/* Ausgenommen: Listen, die in Wahrheit ein Raster sind – sie sollen die
   volle Abschnittsbreite nutzen, nicht eine Textspalte. */
.section > :is(.kfz-services, .kfz-trustbar, .kfz-promise){ max-width:none; }

.section .section-title{
  margin-block:0 clamp(1.5rem, 3vw, 2.5rem);
}
/* Titel und Vorspann gehören zusammen – dazwischen weniger Luft. */
.section .section-title:has(+ .section-lead){ margin-block-end:.5rem; }
.section .section-lead{
  margin-block:0 clamp(1.75rem, 3.5vw, 2.75rem);
  color:var(--text-muted);
  max-width:var(--measure-lead);
}

/* --- Zentrierter Abschnittskopf ----------------------------------------
   Für Abschnitte, unter denen ein symmetrisches Raster steht. Titel und
   Vorspann werden immer gemeinsam ausgerichtet, nie einzeln. */
.section--centered .section-title,
.section--centered .section-lead{ text-align:center; }
.section--centered .section-lead{ margin-inline:auto; }
.section--centered > :is(h2, h3){ max-width:100%; }
.section--centered .kfz-faq{ margin-inline:auto; }

/* =========================================================================
   KOPFBEREICH

   Der Template-Part-Block erzeugt immer einen eigenen Wrapper. Die Klasse
   .site-header sitzt deshalb direkt auf diesem Wrapper (siehe die
   template-part-Aufrufe in templates/). Läge sie stattdessen auf einer
   zusätzlichen Group darin, entstünden zwei verschachtelte <header> – und
   position:sticky fände keinen Spielraum, weil ein klebendes Element nur
   innerhalb seines Elternelements wandert.
   ========================================================================= */

.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:transform var(--t-base) var(--ease);
}
/* Auf kleinen Bildschirmen weicht der Kopf beim Weiterlesen nach oben und
   kommt zurück, sobald jemand nach oben scrollt. So bleibt er erreichbar,
   kostet aber beim Lesen keinen Platz. */
.site-header.is-tucked{ transform:translateY(-100%); }
@supports not (backdrop-filter: blur(10px)){
  .site-header{ background:var(--surface); }
}

/* Zwei Zeilen: oben Logo und Erreichbarkeit als zusammenhängende Gruppe,
   darunter die Navigation über die volle Breite zentriert. */
.site-header__inner{
  max-width:calc(var(--shell) + var(--gutter) * 2);
  margin-inline:auto;
  padding:.5rem var(--gutter) 0;
  display:flex; align-items:center;
  gap:.35rem clamp(.75rem, 2vw, 1.25rem); flex-wrap:wrap;
}

.site-logo{
  display:block; flex:0 0 auto;
  width:clamp(104px, 26vw, 160px);
  aspect-ratio:170 / 56;
  background:url('assets/images/ham-logo.webp') left center / contain no-repeat;
  text-indent:-9999px; overflow:hidden;
}
/* Im Kontrastmodus von Windows werden Hintergrundbilder verworfen – dann
   tritt der Schriftzug an die Stelle des Logos. */
@media (forced-colors: active){
  .site-logo{ text-indent:0; background:none; width:auto; }
  .site-logo::after{ content:"KFZ Hambüchen"; font-weight:700; }
}

/* Zweite Zeile, über die volle Breite und mittig. */
.site-nav{
  order:3; flex:1 1 100%;
  display:flex; align-items:center; justify-content:center;
  gap:.25rem clamp(.75rem, 2.5vw, 1.75rem);
  font-weight:600; font-size:1rem;
  margin-block-start:.3rem;
  border-top:1px solid var(--border);
}
.site-nav a{
  color:var(--text); text-decoration:none;
  display:inline-flex; align-items:center; min-height:42px; padding-inline:.25rem;
  border-bottom:2px solid transparent;
  transition:color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.site-nav a:hover{ color:var(--action); }
.site-nav a[aria-current="page"]{ color:var(--action); border-bottom-color:var(--action); }

/* Reicht der Platz nicht, wird die Navigation seitlich scrollbar, statt
   in mehreren Zeilen den halben Bildschirm zu belegen. Dann linksbündig,
   sonst „springt“ der erste Eintrag beim Scrollen aus dem Bild. */
@media (max-width: 640px){
  .site-nav{
    justify-content:flex-start;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  }
  .site-nav::-webkit-scrollbar{ display:none; }
}

/* --- Kompakter Kopf auf Mobilgeräten ------------------------------------
   Auf einem 640 Pixel hohen Bildschirm kostet jede Zeile im Kopf spürbar
   Inhalt. Deshalb kleineres Logo, engere Zeilen und ein kleinerer
   Navigationsschriftgrad. */
@media (max-width: 640px){
  .site-header__inner{ padding-block:.35rem 0; gap:.25rem .75rem; }
  .site-nav{ font-size:.9375rem; margin-block-start:.15rem; }
  .site-nav a{ min-height:38px; }
  .kfz-hours-bar__phone{ font-size:1rem; min-height:38px; gap:.35rem; }
  .kfz-hours-bar__phone .kfz-icon{ width:18px; height:18px; }
}
/* Der Öffnungsstatus steht ohnehin im Abschnitt „Öffnungszeiten“ – im
   engen Kopf kostet er mehr Platz als er nützt. */
@media (max-width: 560px){
  .site-header .kfz-status{ display:none; }
}

/* --- Kontaktzeile im Kopfbereich ---------------------------------------- */
.kfz-hours-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1.1rem;
  font-size:.95rem; line-height:1.3;
}
.kfz-hours-bar__phone{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:1.05rem; color:var(--text); text-decoration:none;
  min-height:44px;
}
.kfz-hours-bar__phone:hover{ color:var(--action); }
.kfz-hours-bar__phone .kfz-icon{ color:var(--action); }
.kfz-hours-bar__hours{
  display:inline-flex; align-items:center; gap:.45rem; color:var(--text-muted);
}
@media (max-width: 900px){
  .kfz-hours-bar__hours{ display:none; }   /* Zeiten stehen weiter unten in voller Form */
}

/* --- Öffnungsstatus ------------------------------------------------------ */
.kfz-status{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.875rem; font-weight:600;
  padding:.2rem .6rem; border-radius:var(--r-pill);
}
.kfz-status--is-open{ color:#0b5c2e; background:#e6f5ec; }
.kfz-status--is-closed{ color:#7a3a00; background:#fdf1e3; }
.kfz-status__dot{
  width:.5rem; height:.5rem; border-radius:50%; background:currentColor; flex:0 0 auto;
}
.kfz-status--block{
  margin-block:0 1rem; font-size:1rem; padding:.4rem .85rem;
}

/* =========================================================================
   HERO
   ========================================================================= */

.wp-block-group.hero{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:clamp(26rem, 62svh, 44rem);
  padding-block:clamp(3.5rem, 10vh, 8rem);
  padding-inline:max(var(--gutter), calc((100% - var(--shell)) / 2));
  color:#fff; text-align:center;
  background:var(--surface-invert) url('assets/images/ham-hero2.webp') center / cover no-repeat;
}
/* Das Foto ist hell – ohne kräftige Abdunklung erreicht weißer Text den
   erforderlichen Kontrast nicht. */
.wp-block-group.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.74) 55%, rgba(10,10,12,.84) 100%),
    radial-gradient(120% 85% at 50% 70%, rgba(0,0,0,.45), transparent 70%);
}
/* Diese Regel setzt bewusst weder width noch max-width: Sie hätte höhere
   Spezifität als die Regeln der einzelnen Elemente und würde deren Maße
   überschreiben – genau daran wurde die Pille zuvor auf volle Breite
   gestreckt und die Unterzeile verlor ihre Lesebreite.
   Die Breite bestimmt stattdessen align-items:center am Hero: Jedes Kind
   nimmt seine Inhaltsbreite ein, begrenzt durch sein eigenes max-width. */
.wp-block-group.hero > *{ position:relative; z-index:1; margin-inline:0; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  max-width:100%;
  font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  margin-block:0 1.25rem;
}
/* Auf den schmalsten Geräten müsste die Beschriftung sonst umbrechen –
   eine zweizeilige Pille sieht nach Versehen aus. */
@media (max-width: 400px){
  .hero__eyebrow{ font-size:.8125rem; letter-spacing:.04em; padding-inline:.7rem; }
}
.wp-block-group.hero h1{
  font-size:clamp(2rem, 1.1rem + 3.6vw, 3.75rem);
  line-height:1.05; font-weight:700;
  max-width:min(20ch, 100%); margin-block:0 .6rem;
}
.hero__sub{
  font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem);
  max-width:min(52ch, 100%); margin-block:0 1.75rem;
  color:rgba(255,255,255,.94);
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:.75rem;
  align-items:center; justify-content:center;
  max-width:100%; margin-block:0;
}
.hero__note{
  max-width:min(52ch, 100%); margin-block:1.25rem 0;
  font-size:.95rem; color:rgba(255,255,255,.86);
}

/* =========================================================================
   VERTRAUENSLEISTE
   ========================================================================= */

.kfz-trustbar{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem clamp(1rem, 3vw, 2.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kfz-trustbar__item{
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.95rem; line-height:1.45;
}
.kfz-trustbar__item > span{ display:flex; flex-direction:column; gap:.1rem; }
.kfz-trustbar__item strong{ font-weight:700; }
.kfz-trustbar__item span span{ color:var(--text-muted); }
.kfz-trustbar__icon{ flex:0 0 auto; color:var(--action); width:28px; height:28px; }

.section--trust{
  background:var(--surface-invert); color:#fff;
  padding-block:clamp(1.5rem, 3vw, 2.25rem);
}
.section--trust .kfz-trustbar__item span span{ color:rgba(255,255,255,.72); }
.section--trust .kfz-trustbar__icon{ color:var(--wp--preset--color--brand-300, #ff9a9a); }

/* =========================================================================
   LEISTUNGEN
   ========================================================================= */

.kfz-services{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.75rem, 2vw, 1.125rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.kfz-services__item{
  position:relative;
  display:flex; align-items:flex-start; gap:clamp(.75rem, 2.5vw, 1rem);
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1rem, 3vw, 1.25rem);
  transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* Der Schatten liegt auf einer eigenen Ebene und wird nur ein-/ausgeblendet –
   eine animierte box-shadow würde in jedem Frame neu gezeichnet.
   Wichtig: kein overflow:hidden am Item, sonst wird genau dieser nach außen
   gezeichnete Schatten weggeschnitten. */
.kfz-services__item::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--e-md); opacity:0; transition:opacity var(--t-base) var(--ease);
}
.kfz-services__item:hover,
.kfz-services__item:focus-within{ transform:translateY(-3px); border-color:transparent; }
.kfz-services__item:hover::after,
.kfz-services__item:focus-within::after{ opacity:1; }

.kfz-services__icon{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:clamp(2.5rem, 8vw, 3rem); height:clamp(2.5rem, 8vw, 3rem);
  border-radius:var(--r-md);
  background:var(--action-subtle); color:var(--action);
  transition:transform var(--t-base) var(--ease);
}
.kfz-services__icon .kfz-icon{ width:60%; height:60%; }
.kfz-services__item:hover .kfz-services__icon,
.kfz-services__item:focus-within .kfz-services__icon{ transform:scale(1.08) rotate(-3deg); }

.kfz-services__body{ display:flex; flex-direction:column; gap:.3rem; }
.kfz-services__title{
  font-family:var(--wp--preset--font-family--heading);
  font-size:1.25rem; font-weight:700; line-height:1.25;
}
.kfz-services__title a{ color:inherit; text-decoration:none; }
.kfz-services__title a::after{
  content:""; position:absolute; inset:0;   /* ganze Karte klickbar */
}
.kfz-services__title a:hover{ color:var(--action); }
.kfz-services__teaser{ color:var(--text-muted); font-size:.95rem; line-height:1.55; }

/* =========================================================================
   ÖFFNUNGSZEITEN
   ========================================================================= */

.kfz-hours{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:clamp(1.25rem, 3vw, 1.75rem);
  box-shadow:var(--e-sm);
}
.kfz-hours__title{
  font-family:var(--wp--preset--font-family--heading);
  margin-block:0 .75rem; font-size:1.5rem; line-height:1.2;
}
.kfz-hours__list{
  display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.25rem;
  margin-block:0 1rem;
}
.kfz-hours__list dt{ font-weight:700; white-space:nowrap; }
.kfz-hours__list dd{ margin:0; color:var(--text-muted); }
.kfz-hours__note{
  margin-block:0; padding-top:1rem; border-top:1px solid var(--border);
  font-size:.95rem; color:var(--text-muted); line-height:1.6;
}

/* =========================================================================
   LEISTUNGSVERSPRECHEN

   Zwei Spalten statt automatischer Anpassung: Bei vier Punkten und drei
   Spalten bliebe der vierte allein in der zweiten Zeile stehen.
   ========================================================================= */

.kfz-promise{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.5rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns:1fr;
}
@media (min-width: 48em){
  .kfz-promise{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.kfz-promise__item{ display:flex; align-items:flex-start; gap:.85rem; }
.kfz-promise__item > span{ display:flex; flex-direction:column; gap:.3rem; }
.kfz-promise__item strong{
  font-family:var(--wp--preset--font-family--heading);
  font-size:1.25rem; line-height:1.25;
}
.kfz-promise__item span span{
  color:var(--text-muted); line-height:1.6; max-width:var(--measure-narrow);
}
.kfz-promise__icon{
  flex:0 0 auto; width:26px; height:26px;
  color:#0f7a3d; margin-top:.3rem;
}

/* =========================================================================
   ÜBER UNS
   ========================================================================= */

.section.about{
  display:grid; gap:clamp(1rem, 3vw, 3rem);
  grid-template-columns:minmax(0, 15rem) minmax(0, 1fr);
  align-items:start;
}
.section.about > .section-title{ grid-column:1; margin-block-end:0; }
.section.about .about-text{ grid-column:2; }
.section.about .about-text p{ max-width:var(--measure); margin-block:0 1rem; }
.section.about .about-text p:last-child{ margin-block-end:0; }
@media (max-width: 1024px){
  .section.about{ grid-template-columns:1fr; gap:clamp(.75rem, 2vw, 1.25rem); }
  .section.about > .section-title,
  .section.about .about-text{ grid-column:1; }
}

/* =========================================================================
   ANFAHRT
   ========================================================================= */

.kfz-directions__map{
  position:relative; display:grid; place-items:center; gap:.5rem;
  min-height:14rem; margin-block-end:1.25rem;
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:
    linear-gradient(0deg, rgba(204,0,0,.05), rgba(204,0,0,.05)),
    repeating-linear-gradient(0deg, var(--surface-alt) 0 34px, var(--border) 34px 35px),
    repeating-linear-gradient(90deg, var(--surface-alt) 0 46px, var(--border) 46px 47px);
  color:var(--text-muted);
}
.kfz-directions__pin{
  display:grid; place-items:center; width:3rem; height:3rem;
  border-radius:50%; background:var(--action); color:#fff;
  box-shadow:var(--e-md);
}
.kfz-directions__pin .kfz-icon{ width:1.5rem; height:1.5rem; }
.kfz-directions__maplabel{ font-size:.9rem; font-weight:600; text-align:center; }

.kfz-directions__address{ font-style:normal; line-height:1.6; margin-block:0 .75rem; }
.kfz-directions__hint{
  color:var(--text-muted); margin-block:0 1.25rem; max-width:var(--measure-narrow);
}
.kfz-directions__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block:0 .75rem; }
.kfz-directions__privacy{
  font-size:.85rem; color:var(--text-muted); margin-block:0;
  max-width:var(--measure-narrow);
}

/* =========================================================================
   KONTAKT
   ========================================================================= */

.kfz-contactgrid{
  display:grid; gap:clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items:start;
}
/* Beide Spalten starten oben bündig, und die Abstände darin sind fest
   gesetzt statt von Standardrändern abhängig – sonst schiebt allein die
   Tatsache, dass eine Spalte mit einer Überschrift beginnt und die andere
   mit einer Karte, die Spalten um knapp 30 Pixel gegeneinander. */
.kfz-contactgrid > *{ margin-block:0; }
.kfz-contactgrid > .wp-block-group{
  display:flex; flex-direction:column; gap:1.25rem;
}
.kfz-contactgrid > .wp-block-group > *{ margin-block:0; }
.kfz-contactgrid h3{ margin-block:0; }
.kfz-contactgrid > .wp-block-group > p{ color:var(--text-muted); margin-block:-.5rem 0; }

.kfz-contact__lead{
  margin-block:0 1.25rem; color:var(--text-muted); max-width:var(--measure-narrow);
}

/* Kontaktwege stehen bewusst untereinander – drei gleichrangige Zeilen. */
.kfz-contact__actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:.75rem;
  margin-block:0;
}
/* Handlungsaufforderung im Fließtext: nebeneinander. Eigene Klasse, damit
   sie sich nicht mit der Kontaktspalte oben ins Gehege kommt. */
.kfz-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-block:0;
}
.section--centered .kfz-actions{ justify-content:center; }

/* =========================================================================
   AUFKLAPPBARE FORMULARE

   Die Formulare liegen hinter einer Schaltfläche. Zwei dauerhaft
   ausgeklappte Formulare auf der Startseite wirken erschlagend und
   verdrängen alles Weitere nach unten.
   ========================================================================= */

/* Den Abstand zwischen zwei Schaltflächen gibt der umgebende Spaltenfluss
   vor (siehe .kfz-contactgrid) – eine eigene Margin würde sich dort mit
   dem gap addieren. */
.kfz-disclosure{ display:block; }

.kfz-disclosure__toggle{
  /* trägt zusätzlich .kfz-btn – hier nur, was ein <summary> braucht */
  list-style:none; cursor:pointer; width:100%;
}
.kfz-disclosure__toggle::-webkit-details-marker{ display:none; }
.kfz-disclosure__label{ flex:1 1 auto; text-align:left; }

.kfz-disclosure__chevron{
  flex:0 0 auto; width:.55rem; height:.55rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-base) var(--ease);
}
.kfz-disclosure[open] .kfz-disclosure__chevron{
  transform:rotate(-135deg) translateY(-2px);
}

.kfz-disclosure[open] > .kfz-form{ margin-block-start:.85rem; }

/* Beim Aufklappen sanft einblenden – der Sprung von 0 auf ein komplettes
   Formular ist sonst sehr abrupt. */
@media (prefers-reduced-motion: no-preference){
  @keyframes kfz-disclose{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .kfz-disclosure[open] > .kfz-form{ animation:kfz-disclose .28s var(--ease) both; }
}

/* =========================================================================
   FORMULARE
   ========================================================================= */

.kfz-form{
  position:relative;   /* Bezugsrahmen für den Honeypot */
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:clamp(1.25rem, 3vw, 1.75rem);
  box-shadow:var(--e-sm);
}
.kfz-form__grid{
  display:grid; gap:1rem clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.kfz-field{ display:flex; flex-direction:column; gap:.35rem; margin:0; }
.kfz-field--full{ grid-column:1 / -1; }
.kfz-field label{ font-weight:600; font-size:.95rem; }
.kfz-hint{ font-weight:400; color:var(--text-muted); }
.kfz-req{ color:var(--action); }

.kfz-field input[type="text"],
.kfz-field input[type="tel"],
.kfz-field input[type="email"],
.kfz-field select,
.kfz-field textarea{
  font:inherit; font-size:1rem; color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  padding:.7rem .85rem; width:100%; min-height:44px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.kfz-field textarea{ resize:vertical; min-height:6rem; }
.kfz-field :is(input, select, textarea):hover{ border-color:var(--text-muted); }
.kfz-field :is(input, select, textarea):focus-visible{
  border-color:var(--action); outline-offset:1px;
}

/* --- Auswahlfelder -------------------------------------------------------
   Das geschlossene Feld ist vollständig selbst gestaltet: kein System-Look,
   sondern derselbe Rahmen, Radius und Fokus wie bei den Textfeldern, dazu
   ein eigener Pfeil. */
.kfz-field select{
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  padding-inline-end:2.5rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2352525b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:.7rem auto;
}
.kfz-field select:hover,
.kfz-field select:focus-visible{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23cc0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
/* Solange keine Auswahl getroffen wurde, wirkt der Platzhalter zurückhaltend. */
.kfz-field select:has(option[value=""]:checked){ color:var(--text-muted); }

/* Die aufgeklappte Liste zeichnet klassisch das Betriebssystem – nur diese
   beiden Eigenschaften nehmen manche Browser dort an. */
.kfz-field select option{ background:var(--surface); color:var(--text); }

/* Neuere Browser erlauben es, auch die aufgeklappte Liste selbst zu
   gestalten. Wo das unterstützt wird, ersetzt der folgende Block das
   System-Menü vollständig – sonst bleibt es beim nativen Menü, das
   Verhalten ist in beiden Fällen identisch. */
@supports (appearance: base-select){
  .kfz-field select,
  .kfz-field select::picker(select){ appearance:base-select; }

  .kfz-field select{
    background-image:none; padding-inline-end:.85rem;
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  }
  .kfz-field select::picker-icon{
    color:var(--text-muted); transition:transform var(--t-base) var(--ease);
  }
  .kfz-field select:hover::picker-icon,
  .kfz-field select:open::picker-icon{ color:var(--action); }
  .kfz-field select:open::picker-icon{ transform:rotate(180deg); }

  .kfz-field select::picker(select){
    border:1px solid var(--border); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--e-lg);
    padding:.35rem; margin-block-start:.35rem;
    max-height:18rem; overflow-y:auto;
  }
  .kfz-field select option{
    display:flex; align-items:center; gap:.6rem;
    padding:.6rem .7rem; border-radius:var(--r-sm);
    color:var(--text); background:transparent;
    cursor:pointer; min-height:44px;
  }
  .kfz-field select option:hover,
  .kfz-field select option:focus{
    background:var(--action-subtle); color:var(--action-hover); outline:none;
  }
  .kfz-field select option:checked{ font-weight:700; }
  .kfz-field select option::checkmark{
    order:1; margin-inline-start:auto; color:var(--action); content:"✓";
  }
  /* Der Platzhalter „Bitte wählen“ ist keine echte Auswahl. */
  .kfz-field select option[value=""]{ color:var(--text-muted); }
}

.kfz-field--check{ flex-direction:row; margin-block-start:1.25rem; }
.kfz-field--check label{
  display:flex; align-items:flex-start; gap:.65rem;
  font-weight:400; font-size:.95rem; line-height:1.55;
}
.kfz-field--check input{
  margin-top:.2rem; width:1.15rem; height:1.15rem; flex:0 0 auto; accent-color:var(--action);
}

/* Honeypot – für Menschen nicht erreichbar, für Bots sichtbar genug. */
.kfz-form__trap{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.kfz-form__submit{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
  margin-block:1.5rem .5rem;
}
.kfz-form__promise{ color:var(--text-muted); font-size:.95rem; }
.kfz-form__required{ margin-block:0; font-size:.85rem; color:var(--text-muted); }

.kfz-note{
  margin-block:0 1.25rem; padding:.9rem 1.1rem;
  border-radius:var(--r-md); border-left:4px solid;
  font-size:1rem; line-height:1.55;
}
.kfz-note--success{ background:#e6f5ec; border-color:#0f7a3d; color:#0b4f27; }
.kfz-note--error{ background:#fdecec; border-color:var(--action); color:#7a1414; }

/* =========================================================================
   FAQ
   ========================================================================= */

.kfz-faq{ max-width:78ch; }
.kfz-faq__title{
  margin-block:0 clamp(1.5rem, 3vw, 2.5rem);
}
.section--centered .kfz-faq__title{ text-align:center; }
.kfz-faq__item{ border-bottom:1px solid var(--border); }
.kfz-faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1rem; cursor:pointer;
  font-family:var(--wp--preset--font-family--heading);
  font-size:1.25rem; font-weight:600; line-height:1.3;
  list-style:none; min-height:44px;
}
.kfz-faq__item summary::-webkit-details-marker{ display:none; }
.kfz-faq__item summary::after{
  content:""; flex:0 0 auto; width:.7rem; height:.7rem;
  border-right:2px solid var(--action); border-bottom:2px solid var(--action);
  transform:rotate(45deg); transform-origin:center;
  transition:transform var(--t-base) var(--ease);
}
.kfz-faq__item[open] summary::after{ transform:rotate(-135deg); }
.kfz-faq__item summary:hover{ color:var(--action); }
.kfz-faq__answer{
  padding-block:0 1.1rem; color:var(--text-muted); max-width:var(--measure);
  text-align:left;
}
.kfz-faq__answer p{ margin-block:0 .75rem; }
.kfz-faq__answer p:last-child{ margin-block-end:0; }

/* Weiche Höhe, wo der Browser sie beherrscht – sonst öffnet es hart, was
   funktional identisch ist. */
@supports (interpolate-size: allow-keywords){
  .kfz-faq__item{ interpolate-size:allow-keywords; }
  .kfz-faq__item::details-content{
    block-size:0; overflow:hidden; opacity:0;
    transition:block-size var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
               content-visibility var(--t-base) allow-discrete;
  }
  .kfz-faq__item[open]::details-content{ block-size:auto; opacity:1; }
}

/* =========================================================================
   HANDLUNGSBAND
   ========================================================================= */

.kfz-ctaband{
  background:var(--action-hover); color:#fff;
  padding-block:clamp(2rem, 5vw, 3rem);
  padding-inline:max(var(--gutter), calc((100% - var(--shell)) / 2));
}
.kfz-ctaband__title{
  font-family:var(--wp--preset--font-family--heading);
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight:700;
  margin-block:0 .35rem; line-height:1.15;
}
.kfz-ctaband__text{
  margin-block:0 1.5rem; color:rgba(255,255,255,.9); max-width:52ch;
}
.kfz-ctaband__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block:0; }

/* =========================================================================
   BUTTONS
   ========================================================================= */

.kfz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-size:1rem; line-height:1.2; text-decoration:none;
  text-align:center;
  padding:.85rem 1.5rem; border-radius:var(--r-md); border:2px solid transparent;
  min-height:48px; max-width:100%; cursor:pointer;
  /* Umbruch erlaubt: Bei vergrößerter Systemschrift würde eine feste Zeile
     sonst aus dem Viewport laufen. */
  white-space:normal; hyphens:none;
  transition:background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.kfz-btn .kfz-icon{ width:20px; height:20px; flex:0 0 auto; }
.kfz-btn:active{ transform:scale(.97); }
@media (hover: hover){
  .kfz-btn:hover{ transform:translateY(-1px); }
  .kfz-btn:active{ transform:scale(.97) translateY(0); }
}

.kfz-btn--primary{ background:var(--action); color:#fff; box-shadow:var(--e-sm); }
.kfz-btn--primary:hover{ background:var(--action-hover); color:#fff; }
.kfz-btn--primary:active{ background:var(--action-active); }

.kfz-btn--ghost{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.kfz-btn--ghost:hover{ border-color:var(--action); color:var(--action); }

.kfz-btn--quiet{
  background:transparent; color:var(--text-muted);
  padding-inline:.25rem; min-height:44px; font-weight:600;
}
.kfz-btn--quiet:hover{ color:var(--action); }

.kfz-btn--invert{ background:#fff; color:var(--action-hover); }
.kfz-btn--invert:hover{ background:#fff; color:var(--action-active); }

.kfz-btn--outline-invert{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.kfz-btn--outline-invert:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }

.kfz-btn--lg{ font-size:1.0625rem; padding:1rem 1.75rem; min-height:52px; }
/* Auf sehr schmalen Geräten passt "Anrufen: 02174 6664914" sonst nicht in
   eine Zeile und bricht mitten in der Rufnummer um. */
@media (max-width: 359.98px){
  .kfz-btn--lg{ font-size:1rem; padding-inline:1.25rem; }
}

/* =========================================================================
   FIXIERTE AKTIONSLEISTE (mobil)
   ========================================================================= */

.kfz-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; gap:.6rem; justify-content:center;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:var(--e-up);
  transform:translateY(110%); opacity:0; visibility:hidden;
  transition:transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
             visibility var(--t-base);
}
.kfz-sticky.is-visible{ transform:translateY(0); opacity:1; visibility:visible; }
.kfz-sticky .kfz-btn{
  flex:1 1 auto; min-width:0; max-width:16rem; padding-inline:1rem;
  white-space:nowrap;   /* die Leiste soll einzeilig bleiben */
}

/* Auf sehr schmalen Geräten passen zwei Schaltflächen sonst nicht nebeneinander. */
@media (max-width: 374.98px){
  .kfz-sticky{ gap:.4rem; padding-inline:.5rem; }
  .kfz-sticky .kfz-btn{ padding-inline:.6rem; font-size:.9375rem; }
  .kfz-sticky .kfz-icon{ width:18px; height:18px; }
}

@media (max-width: 1023.98px){
  /* Platz reservieren, damit die Leiste den Seitenfuß nicht überdeckt. */
  body{ --sticky-h:5.25rem; }
}
@media (min-width: 1024px){
  .kfz-sticky{ display:none; }
}

/* =========================================================================
   FUSSBEREICH
   ========================================================================= */

.site-footer{
  background:var(--surface-invert); color:#fff;
  padding-block:clamp(2rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2rem);
  padding-inline:max(var(--gutter), calc((100% - var(--shell)) / 2));
}
.site-footer .footer-inner{
  display:grid; gap:clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.site-footer h2{
  font-size:1.0625rem; margin-block:0 .75rem; color:#fff;
  letter-spacing:.04em; text-transform:uppercase;
}
.site-footer p{ margin-block:0 .5rem; color:rgba(255,255,255,.82); line-height:1.6; }
.site-footer address{ font-style:normal; color:rgba(255,255,255,.82); line-height:1.7; }

/* Links im Fußbereich waren bislang nicht von Fließtext unterscheidbar –
   gleiche Farbe, keine Unterstreichung. */
.site-footer a{
  color:#fff; text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-color:rgba(255,255,255,.45);
  transition:text-decoration-color var(--t-base) var(--ease);
}
.site-footer a:hover{ text-decoration-color:#fff; }

.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{ margin-block-end:.15rem; }
.footer-list a{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding-block:.1rem;
}
.footer-list .kfz-icon{ width:18px; height:18px; opacity:.8; }

.footer-hours{ display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; margin:0; }
.footer-hours dt{ font-weight:700; white-space:nowrap; }
.footer-hours dd{ margin:0; color:rgba(255,255,255,.82); }

.footer-bottom{
  margin-block-start:clamp(1.5rem, 3vw, 2rem);
  padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center;
  font-size:.9rem; color:rgba(255,255,255,.7);
}
.footer-bottom p{ margin:0; color:inherit; }

/* =========================================================================
   RECHTSSEITEN

   Auch hier entsteht die Spalte aus dem Padding – frühere Versuche über
   margin-inline:auto wurden von jeder einzelnen Folgeregel wieder
   ausgehebelt.
   ========================================================================= */

.legal-page{
  padding-block:clamp(1.5rem, 5vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
  padding-inline:max(var(--gutter), calc((100% - var(--measure)) / 2));
  line-height:var(--wp--custom--line--relaxed, 1.75);
}
.legal-page h1{ margin-block:0 1rem; }
.legal-page h2{
  margin-block:2rem .6rem;
  font-size:clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
}
.legal-page p, .legal-page ul{ margin-block:.6rem; }
.legal-page a{
  color:var(--action-hover); text-decoration:underline; text-underline-offset:.18em;
}
.legal-page a:hover{ text-decoration-thickness:2px; }

.legal-dl{
  display:grid; grid-template-columns:minmax(9rem, max-content) minmax(0, 1fr);
  gap:.4rem 1rem; margin-block:.6rem 1rem;
}
.legal-dl dt{ font-weight:600; }
.legal-dl dd{ margin:0; color:var(--text-muted); }
@media (max-width: 600px){
  .legal-dl{ grid-template-columns:1fr; }
  .legal-dl dt{ margin-block-start:.5rem; }
}

.legal-updated{ margin-block-start:2rem; font-size:.9rem; color:var(--text-muted); }

/* =========================================================================
   ICONS
   ========================================================================= */

.kfz-icon{
  display:inline-block; vertical-align:middle;
  width:1.25em; height:1.25em;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================================
   EINBLENDEN BEIM SCROLLEN

   Die Klasse wird per JavaScript vergeben und nur wirksam, wenn <html> die
   Klasse "js" trägt. Ohne JavaScript bleibt jeder Inhalt sichtbar.
   ========================================================================= */

.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal.no-anim{ transition:none; }

/* Hero-Inhalte laufen ohne JavaScript – die Überschrift wird bewusst nur
   verschoben und nie ausgeblendet, damit sie als größtes Element sofort zählt. */
@media (prefers-reduced-motion: no-preference){
  @keyframes kfz-rise{ from{ transform:translateY(14px); } to{ transform:none; } }
  @keyframes kfz-fade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

  .hero__eyebrow{ animation:kfz-fade .5s var(--ease) both; }
  .wp-block-group.hero h1{ animation:kfz-rise .55s var(--ease) both; }
  .hero__sub{ animation:kfz-fade .55s var(--ease) .1s both; }
  .hero__actions{ animation:kfz-fade .55s var(--ease) .2s both; }
  .hero__note{ animation:kfz-fade .55s var(--ease) .3s both; }
}

/* =========================================================================
   BEWEGUNG REDUZIEREN
   ========================================================================= */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .reveal.is-visible{ opacity:1 !important; transform:none !important; }
  .kfz-services__item:hover,
  .kfz-services__item:focus-within,
  .kfz-btn:hover,
  .kfz-btn:active{ transform:none; }
}

/* =========================================================================
   ANKER

   Der Kopfbereich ist fixiert; ohne Ausgleich verschwindet das Sprungziel
   dahinter. Die tatsächliche Höhe schreibt ui.js in --header-h, weil die
   Navigation auf schmalen Geräten in eine zweite Zeile umbricht.
   ========================================================================= */

:target,
#termin, #kontakt, #oeffnungszeiten, #leistungen, #inhalt,
#termin-form, #rueckruf-form{
  scroll-margin-top:calc(var(--header-h, 5rem) + 1rem);
}

/* =========================================================================
   KONTRASTMODUS
   ========================================================================= */

@media (forced-colors: active){
  .kfz-btn{ border:2px solid ButtonText; }
  .kfz-services__item,
  .kfz-form,
  .kfz-hours{ border:1px solid CanvasText; }
}