/* Fahrschule Boden – Stylesheet (mobile-first, dunkles Design)
   Schriften: Barlow / Barlow Semi Condensed (OFL), lokal eingebunden.
   Icons: Tabler Icons (MIT), siehe assets/icons/LICENSE.txt */

@font-face{font-family:"Barlow";src:url("fonts/Barlow-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("fonts/BarlowSemiCondensed-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("fonts/BarlowSemiCondensed-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- Design-Tokens ----------
   Schwarz und Gelb sind die Markenfarben. Gelb ist Akzent:
   Hauptbuttons, Icons, Klassen-Schilder, h1-Hervorhebung, Fokus.
   Flächen sind neutrale Grautöne, alle Textfarben erfüllen WCAG AA. */
:root{
  /* Marke */
  --brand:#feca07;
  --brand-hover:#ffd633;
  --brand-soft:rgba(254,202,7,.10);
  --brand-line:rgba(254,202,7,.32);
  --on-brand:#0b0b0c;
  --ink:#feca07;          /* Gelb als Schrift-/Iconfarbe */
  --ink-hover:#ffd633;
  --akzent-farbe:#feca07; /* "In Oschatz" in der Hauptüberschrift */
  --akzent-linie:transparent;

  /* Flächen (dunkel nach hell) */
  --bg:#0b0b0c;
  --bg-alt:#111113;
  --surface:#18181b;
  --surface-2:#212125;
  --border:#2a2a2f;
  --border-strong:#3a3a40;

  /* Text */
  --text-strong:#f4f4f5;
  --text:#cecece;
  --text-muted:#8f8f96;

  /* Status, Glas, Schatten */
  --success:#34c77b;
  --glass:rgba(11,11,12,.85);
  --plate-shadow:rgba(0,0,0,.45);

  /* Form & Raster */
  --radius-s:10px;
  --radius:14px;
  --radius-l:20px;
  --pad:clamp(1rem,4.5vw,2rem);
  --max:70rem;
  --kopf-hoehe:7.5rem;

  --head:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark;
}

/* Helles Design: folgt der Systemeinstellung, außer der Nutzer hat umgeschaltet */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
  --brand-soft:rgba(254,202,7,.16);
  --brand-line:rgba(190,140,0,.45);
  --ink:#8a6300;
  --ink-hover:#6f4f00;
  --akzent-farbe:#111113;
  --akzent-linie:#feca07;
  --bg:#fafaf9;
  --bg-alt:#f3f3f1;
  --surface:#ffffff;
  --surface-2:#efefec;
  --border:#e4e4e0;
  --border-strong:#cfcfca;
  --text-strong:#111113;
  --text:#3a3a40;
  --text-muted:#66666d;
  --success:#1f9d57;
  --glass:rgba(250,250,249,.86);
  --plate-shadow:rgba(0,0,0,.18);
  color-scheme:light;
  }
}
:root[data-theme="light"]{
  --brand-soft:rgba(254,202,7,.16);
  --brand-line:rgba(190,140,0,.45);
  --ink:#8a6300;
  --ink-hover:#6f4f00;
  --akzent-farbe:#111113;
  --akzent-linie:#feca07;
  --bg:#fafaf9;
  --bg-alt:#f3f3f1;
  --surface:#ffffff;
  --surface-2:#efefec;
  --border:#e4e4e0;
  --border-strong:#cfcfca;
  --text-strong:#111113;
  --text:#3a3a40;
  --text-muted:#66666d;
  --success:#1f9d57;
  --glass:rgba(250,250,249,.86);
  --plate-shadow:rgba(0,0,0,.18);
  color-scheme:light;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--kopf-hoehe);-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

body{
  margin:0;
  padding-bottom:5.4rem;
  font:400 1.0625rem/1.65 var(--body);
  color:var(--text);
  background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:48rem){body{padding-bottom:0}}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink-hover)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand);color:var(--on-brand)}

h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.05;margin:0;color:var(--text-strong);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.75rem,12vw,5.25rem);text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
h2{font-size:clamp(2rem,7vw,3rem)}
h3{font-size:1.5rem;line-height:1.15}
p{margin:0 0 1rem;text-wrap:pretty}
strong{color:var(--text-strong);font-weight:600}
.gelb{color:var(--ink)}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:var(--on-brand);padding:.8rem 1.2rem;z-index:100;font-weight:600}
.skip:focus{left:0}

/* Icons per <use> aus dem Sprite im <body> */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:inline-block;flex:none;width:1.1em;height:1.1em;vertical-align:-.18em;color:var(--ink)}

/* Dachzeile über Überschriften */
.dach{margin:0 0 .75rem;font:700 .875rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)}
.kopf__zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.55rem}
.marke{display:block;line-height:0}
.marke img{width:auto;height:2.9rem}
@media (min-width:48rem){.marke img{height:3.25rem}}
.kopf__aktionen{display:none;align-items:center;gap:1.25rem}
.kopf__kontakt{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;line-height:1.15}
.kopf__tel{font:700 1.15rem var(--head);color:var(--text-strong);text-decoration:none}
.kopf__tel:hover{color:var(--ink)}
.kopf__mail{font-size:.875rem;font-weight:600;color:var(--text-muted);text-decoration:none}
.kopf__mail:hover{color:var(--ink)}
.kopf__mobil{display:flex;align-items:center;gap:.5rem}
.kopf__mobil a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.kopf__mobil a:hover{background:var(--surface-2)}
.kopf__mobil svg{width:1.25rem;height:1.25rem}
@media (min-width:48rem){.kopf__aktionen{display:flex}.kopf__mobil{display:none}}

.kapitel{display:flex;gap:.375rem;overflow-x:auto;scrollbar-width:none;padding:0 0 .6rem;margin:0;list-style:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.kapitel::-webkit-scrollbar{display:none}
.kapitel a{display:flex;align-items:center;min-height:2.75rem;white-space:nowrap;padding:0 1rem;border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;transition:background-color .15s ease,color .15s ease}
.kapitel a:hover{background:var(--surface);color:var(--text-strong)}
@media (min-width:56rem){.kapitel{-webkit-mask-image:none;mask-image:none;margin-left:-1rem}}

/* Umschalter hell/dunkel (ohne JavaScript ausgeblendet, dann gilt die Systemeinstellung) */
.thema{position:relative;display:inline-flex;align-items:center;justify-content:space-between;flex:none;width:4.25rem;height:2.75rem;padding:0 .55rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer}
.thema[hidden]{display:none}
.thema svg{position:relative;z-index:1;width:1.1rem;height:1.1rem;transition:color .2s ease}
.thema__knopf{position:absolute;top:50%;left:.3rem;width:2rem;height:2rem;border-radius:50%;background:var(--brand);transform:translate(0,-50%);transition:transform .2s ease}
.thema[aria-checked="false"] .thema__sonne,.thema[aria-checked="true"] .thema__mond{color:var(--on-brand)}
.thema[aria-checked="true"] .thema__knopf{transform:translate(1.65rem,-50%)}
.thema:hover{border-color:var(--border-strong)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:0 1.5rem;border-radius:999px;border:1px solid transparent;font:700 1.125rem/1 var(--head);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn--gelb{background:var(--brand);color:var(--on-brand)}
.btn--gelb:hover{background:var(--brand-hover);color:var(--on-brand)}
.btn--rand{border-color:var(--border-strong);color:var(--text-strong);background:transparent}
.btn--rand:hover{border-color:var(--text-muted);background:var(--surface);color:var(--text-strong)}
.btn--klein{min-height:2.75rem;padding:0 1.15rem;font-size:1rem}
.btn--download{gap:.45rem}
.btn--download .ico{width:1.15em;height:1.15em}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:2rem 3.5rem;overflow:hidden;isolation:isolate}
/* Tacho-Bogen aus dem Logo, sehr zurückhaltend als Hintergrundmotiv */
.hero::before{content:"";position:absolute;z-index:-1;right:-45vw;top:-12vw;width:110vw;height:110vw;max-width:60rem;max-height:60rem;border-radius:50%;border:clamp(8px,1.6vw,14px) solid transparent;border-top-color:var(--brand);transform:rotate(-20deg);opacity:.18}
.hero::after{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(50rem 26rem at 85% 0%,rgba(254,202,7,.06),transparent 65%)}
.hero__raster{display:grid;gap:2.25rem}
@media (min-width:56rem){
  .hero{padding-block:4.5rem 6rem}
  .hero::before{right:-14rem;top:-18rem}
  .hero__raster{grid-template-columns:1.1fr .9fr;align-items:center;gap:4rem}
}
.status{display:inline-flex;align-items:center;gap:.55rem;padding:.375rem .9rem .375rem .75rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:.9rem;color:var(--text);margin-bottom:1.5rem}
.status::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--text-muted)}
.status[data-offen="ja"]::before{background:var(--success)}
.hero h1 .gelb{display:block;color:var(--akzent-farbe);text-decoration:underline;text-decoration-color:var(--akzent-linie);text-decoration-thickness:.12em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.hero__lead{font-size:1.175rem;line-height:1.6;max-width:34rem;margin:1.4rem 0 1.75rem}
.hero__cta{display:none}  /* mobil übernimmt die feste Leiste unten */
@media (min-width:48rem){.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}}
.hero__fakten{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;margin:0;padding:0}
.hero__fakten li{display:inline-flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:600;color:var(--text)}
@media (min-width:48rem){.hero__fakten{margin-top:1.75rem}}

/* Wegweiser: Auswahl der Fahrzeugart */
.wegweiser{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:.5rem}
.wegweiser__kopf{margin:0;padding:.85rem 1rem .6rem;color:var(--text-strong);font:700 1.25rem/1.1 var(--head)}
.weg{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.9rem;min-height:4.75rem;padding:.85rem 1rem;margin-top:.375rem;border-radius:var(--radius);background:var(--bg-alt);border:1px solid transparent;color:var(--text-strong);text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.weg:hover{border-color:var(--border-strong);background:var(--surface-2);color:var(--text-strong)}
.weg__ico{width:2.75rem;height:2.75rem;padding:.6rem;border-radius:var(--radius-s);background:var(--brand-soft);color:var(--ink);stroke-width:1.75}
.weg__titel{display:block;font:800 1.5rem/1.05 var(--head)}
@media (min-width:30rem){.weg__titel{font-size:1.65rem}}
.weg__sub{display:block;font-size:.9rem;color:var(--text-muted);margin-top:.2rem}
.weg__alter{font:700 .95rem/1 var(--head);padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border-strong);color:var(--text-strong);white-space:nowrap}
.weg::after{content:"";width:.55rem;height:.55rem;border-top:2px solid var(--text-muted);border-right:2px solid var(--text-muted);transform:rotate(45deg);margin-right:.3rem}
.weg:hover::after{border-color:var(--ink)}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(3.5rem,9vw,6rem)}
.abschnitt--flaeche{background:var(--bg-alt);border-block:1px solid var(--border)}
.abschnitt__kopf{max-width:44rem;margin-bottom:2.25rem}
.abschnitt__kopf p{font-size:1.125rem;color:var(--text);margin:1rem 0 0}

/* Fahrlehrer */
.lehrer{display:grid;gap:2.25rem}
@media (min-width:56rem){.lehrer{grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:center}}
.lehrer__bild{position:relative;margin:0;max-width:24rem;justify-self:center;width:100%}
.lehrer__bild::before{content:"";position:absolute;inset:.85rem -.85rem -.85rem .85rem;border-radius:var(--radius-l);border:2px solid var(--brand-line)}
.lehrer__bild img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--radius-l)}
.lehrer__bild figcaption{position:absolute;left:1rem;bottom:1rem;padding:.55rem .85rem;border-radius:var(--radius-s);background:rgba(11,11,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:700 1.05rem/1.15 var(--head);color:#f4f4f5}
.lehrer__bild figcaption span{display:block;font:600 .8rem/1.3 var(--body);color:#b4b4ba}
.lehrer__text h2{margin-bottom:1.25rem}
.lehrer__text>p{font-size:1.125rem}

/* Auf einen Blick */
.fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.75rem 0 0}
.fakten div{padding:.9rem 1rem;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--border)}
.fakten div.breit{grid-column:1/-1}
.fakten dt{font:700 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.fakten dt .ico,.kontakt dt .ico{margin-right:.35rem;font-size:1.15em}
.fakten dd{margin:.35rem 0 0;font-weight:600;font-size:1.05rem;color:var(--text-strong);line-height:1.4}
.fakten dd a{color:var(--text-strong)}
.fakten dd a:hover{color:var(--ink)}

/* Klassen */
.klassen{display:grid;gap:1rem}
@media (min-width:56rem){
  /* Desktop: alle drei Boxen gleich hoch, Weiter-Button sitzt jeweils unten */
  .klassen{grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch}
  .klassen__gruppe{display:flex;flex-direction:column}
  .klassen .klassen__weiter{margin-top:auto}
  .klassen .klassen__liste{margin-bottom:1rem}
}
.klassen__gruppe{padding:1.5rem 1.25rem .75rem;border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--border);scroll-margin-top:var(--kopf-hoehe);transition:border-color .2s ease}
.klassen__gruppe:target{border-color:var(--brand-line)}
.klassen__gruppe h3{display:flex;align-items:center;gap:.65rem;font-size:1.75rem}
.klassen__ico{width:2.5rem;height:2.5rem;padding:.5rem;border-radius:var(--radius-s);background:var(--brand-soft);color:var(--ink);stroke-width:1.75;flex:none}
.klassen__gruppe>p{color:var(--text-muted);margin:.5rem 0 1rem}
.klassen__weiter{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:3rem;margin:.5rem 0 .75rem;padding:.75rem 1rem;border-radius:var(--radius-s);border:1px solid var(--border-strong);color:var(--text-strong);font:700 1.05rem/1.15 var(--head);text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.klassen__weiter:hover{border-color:var(--text-muted);background:var(--surface-2);color:var(--text-strong)}
.klassen__weiter .ico{width:1.25em;height:1.25em}
.klassen__liste{list-style:none;margin:0;padding:0}
.klassen__liste li{display:grid;grid-template-columns:4.4rem 1fr;gap:.9rem;align-items:start;padding:.9rem 0;border-top:1px solid var(--border)}
/* Klassen-Badge im Stil eines Bundesstraßenschilds (Zeichen 401):
   gelbes Schild, schmaler gelber Rand, schwarze Einfassung, schwarze Schrift */
.kz{justify-self:start;display:grid;place-items:center;min-width:2.9rem;min-height:2.1rem;padding:.1rem .6rem 0;border-radius:6px;background:var(--brand);color:var(--on-brand);box-shadow:inset 0 0 0 3px var(--brand),inset 0 0 0 5px var(--on-brand),0 2px 0 var(--plate-shadow);font:700 1.2rem/1 var(--head);letter-spacing:.02em;white-space:nowrap}
.klassen__liste strong{display:block}
.klassen__liste div span{display:block;font-size:.95rem;color:var(--text-muted)}

/* Ablauf */
.schritte{list-style:none;counter-reset:schritt;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:56rem){.schritte{grid-template-columns:repeat(5,1fr)}}
.schritte li{position:relative;counter-increment:schritt;padding:1.25rem 3.25rem 1.35rem 4.25rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
@media (min-width:56rem){.schritte li{padding:4.5rem 1.25rem 1.4rem}}
.schritte li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:1.15rem;top:1.15rem;font:800 1.9rem/1 var(--head);color:var(--ink)}
.schritte__ico{position:absolute;right:1.15rem;top:1.2rem;width:1.5rem;height:1.5rem;color:var(--text-muted);stroke-width:1.75}
.schritte h3{font-size:1.35rem;margin-bottom:.35rem}
.schritte p{margin:0;color:var(--text);font-size:1rem}

/* Kurse / Fahrzeuge: Zeilenlisten */
.zeilen{list-style:none;margin:0;padding:0;max-width:48rem}
.zeilen li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1.5rem;padding:1rem 0;border-top:1px solid var(--border)}
.zeilen li:last-child{border-bottom:1px solid var(--border)}
.zeilen span{color:var(--text-muted)}
/* Kurse: Zeilen über die volle Breite */
.zeilen.kurse{max-width:none}
.kurse__hinweis{margin-top:1.5rem}

.fahrzeuge{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem;max-width:none}
.fahrzeuge li,.fahrzeuge li:last-child{display:block;padding:1.1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.fahrzeuge strong{display:block;font:700 1.3rem/1.15 var(--head)}
.fahrzeuge span{display:inline-block;margin-top:.4rem;font-size:.875rem;font-weight:600;color:var(--text-muted)}

/* Fahrzeug-Galerie: mobil wischen, ab Desktop Raster */
.galerie{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad)*-1) 1.75rem;padding:0 var(--pad);scroll-padding-inline:var(--pad)}
.galerie::-webkit-scrollbar{display:none}
.galerie__bild{position:relative;margin:0;scroll-snap-align:start;border-radius:var(--radius-l);overflow:hidden;background:var(--surface);aspect-ratio:4/3}
.galerie__bild img{width:100%;height:100%;object-fit:cover}
.galerie__bild figcaption{position:absolute;left:.85rem;bottom:.85rem;padding:.55rem .85rem;border-radius:var(--radius-s);background:rgba(11,11,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:700 1.05rem/1.15 var(--head);color:#f4f4f5}
.galerie__bild figcaption span{display:block;font:600 .8rem/1.3 var(--body);color:#b4b4ba}
@media (min-width:56rem){
  .galerie{grid-auto-flow:row;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;overflow:visible;margin-inline:0;padding:0;gap:1rem}
  .galerie__bild{aspect-ratio:auto;min-height:13rem}
  .galerie__bild--gross{grid-row:1/3;aspect-ratio:3/2}
}

/* Bildband mit Markenspruch */
.bildband{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(22rem,70vw,34rem);overflow:hidden}
.bildband picture,.bildband img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.bildband img{object-fit:cover;object-position:60% 40%}
.bildband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.2) 0%,rgba(11,11,12,.45) 45%,rgba(11,11,12,.94) 100%)}
.bildband__text{padding-block:2.5rem}
.bildband__spruch{margin:0;font:800 clamp(2.25rem,9vw,4.25rem)/.98 var(--head);text-transform:uppercase;color:#f4f4f5;letter-spacing:-.01em}
.bildband__spruch .gelb{display:block;color:var(--brand)}
.bildband__sub{margin:.85rem 0 0;font-size:1.1rem;color:#cecece}

/* FAQ */
.faq{display:grid;gap:.6rem}
.faq details{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);transition:border-color .15s ease}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{position:relative;cursor:pointer;list-style:none;padding:1.1rem 3.5rem 1.1rem 1.25rem;font:700 1.2rem/1.25 var(--head);color:var(--text-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--ink);font:700 1.25rem/1 var(--head)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 1.25rem 1.25rem;margin:0}

/* Google-Bewertungen (statisch, Stand im HTML-Kommentar) */
.sterne{display:inline-flex;gap:.1rem;color:var(--brand)}
.sterne svg{width:1.1rem;height:1.1rem}
.sterne--schnitt{position:relative;display:inline-block;vertical-align:middle}
.sterne__voll,.sterne__leer{display:flex;gap:.1rem}
.sterne__leer{color:var(--border-strong)}
.sterne__voll{position:absolute;inset:0 auto 0 0;width:92%;overflow:hidden;color:var(--brand)}  /* 4,6 von 5 = 92 % */
.sterne--schnitt svg{flex:none;width:1.35rem;height:1.35rem}
.bewertungen__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:2.25rem}
.bewertungen__kopf .abschnitt__kopf{margin-bottom:0}
.schnitt{display:inline-flex;align-items:center;gap:1rem;padding:.9rem 1.25rem;border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:border-color .15s ease}
.schnitt:hover{border-color:var(--border-strong);color:var(--text)}
.schnitt__note{font:800 2.75rem/1 var(--head);color:var(--text-strong)}
.schnitt__text{display:block;margin-top:.3rem;font-size:.9rem;font-weight:600;color:var(--text-muted)}
.bewertungen{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:56rem){.bewertungen{grid-template-columns:repeat(3,1fr)}}
.bewertung{display:flex;flex-direction:column;gap:.85rem;height:100%;margin:0;padding:1.5rem;border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--border)}
.bewertung blockquote{margin:0}
.bewertung blockquote p{margin:0;font-size:1.05rem;color:var(--text-strong)}
.bewertung figcaption{margin-top:auto;font-size:.9rem;color:var(--text-muted)}
.bewertung figcaption strong{color:var(--text)}
.bewertungen__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:1.75rem}
.bewertungen__hinweis{flex:1 1 20rem;margin:0;font-size:.85rem;color:var(--text-muted)}
.hero__bewertung{display:inline-flex;align-items:center;gap:.45rem;color:var(--text-strong);text-decoration:none}
.hero__bewertung .ico{color:var(--brand)}
.hero__bewertung:hover{color:var(--ink)}

/* Social Media: einfache Links, keine eingebetteten Inhalte (kein Tracking) */
.social{display:grid;gap:1rem}
@media (min-width:48rem){.social{grid-template-columns:2fr 1fr}}
.social__karte{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-height:13rem;padding:1.5rem;border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;overflow:hidden;isolation:isolate;transition:border-color .15s ease}
.social__karte:hover{border-color:var(--border-strong);color:var(--text)}
.social__kopf{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.25rem 1rem;width:100%}
.social__kopf .social__ico{margin-bottom:0}
.social__kopf .social__name,.social__kopf .social__handle{display:block}
.social__aktion--kopf{grid-column:1/-1;margin-top:.25rem;padding-top:0;text-decoration:none}
@media (min-width:30rem){.social__aktion--kopf{grid-column:auto;grid-row:1;grid-column-start:3;margin:0}.social__kopf{grid-template-columns:auto 1fr auto}}
/* Instagram: Platzhalter bis zur Zustimmung, danach eingebettetes Profil */
.insta{width:100%;margin-top:1.25rem;container-type:inline-size}
.insta__hinweis{padding:1.25rem;border-radius:var(--radius);border:1px dashed var(--border-strong);background:var(--bg-alt)}
.insta__hinweis p{font-size:.95rem;color:var(--text-muted)}
.insta__hinweis .insta__titel{margin-bottom:.4rem;font:700 1.2rem/1.2 var(--head);color:var(--text-strong)}
.insta__laden[hidden]{display:none}
.insta iframe{display:block;width:100%;height:calc(9.5rem + 67cqi);border:0;border-radius:var(--radius);background:#fff}
.social__karte--gross::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(28rem 16rem at 100% 0%,var(--brand-soft),transparent 70%)}
.social__ico{width:3rem;height:3rem;padding:.65rem;margin-bottom:.75rem;border-radius:var(--radius);background:var(--brand-soft);color:var(--ink);stroke-width:1.75}
.social__name{font:800 1.75rem/1.1 var(--head);color:var(--text-strong)}
.social__handle{font-weight:600;color:var(--text-muted)}
.social__text{max-width:32rem;margin-top:.35rem}
.social__aktion{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1rem;font:700 1.1rem/1 var(--head);color:var(--ink)}
.social__karte:hover .social__aktion{color:var(--ink-hover)}

/* Kontakt: Abschluss mit Markenakzent statt gelber Vollfläche */
.kontakt{position:relative;background:var(--bg-alt);border-top:1px solid var(--border);overflow:hidden;isolation:isolate}
.kontakt::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(40rem 22rem at 0% 100%,rgba(254,202,7,.07),transparent 70%)}
.kontakt__raster{display:grid;gap:2rem}
@media (min-width:48rem){.kontakt__raster{grid-template-columns:1fr 1fr;gap:3rem;align-items:end}}
.kontakt h2{margin-bottom:1rem}
.kontakt address{font-style:normal}
.kontakt__tel{display:inline-block;font:800 clamp(2.2rem,10vw,3.25rem)/1.05 var(--head);color:var(--text-strong);text-decoration:none;margin-bottom:.4rem}
.kontakt__tel:hover{color:var(--ink)}
.kontakt dl{margin:0;padding:1.25rem 1.35rem;border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--border)}
.kontakt dt{font:700 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:1.1rem}
.kontakt dt:first-child{margin-top:0}
.kontakt dd{margin:.25rem 0 0;font-size:1.075rem;font-weight:600;color:var(--text-strong)}
.kontakt__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* Fuß */
.fuss{padding-block:2.25rem;background:var(--bg);border-top:1px solid var(--border);font-size:.95rem;color:var(--text-muted)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem}
.fuss p{margin:0}
.fuss ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;list-style:none;margin:0;padding:0}
.fuss a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--text)}
.fuss a:hover{color:var(--ink)}

/* Mobile Aktionsleiste */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr auto auto;gap:.5rem;padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--border)}
.leiste .btn{min-height:3.1rem;padding:0 .8rem;font-size:1.05rem;white-space:nowrap}
.leiste .btn .ico{width:1.2em;height:1.2em}
.leiste__icon{width:3.1rem;padding:0!important}
.leiste .btn--rand{background:var(--surface)}
@media (min-width:48rem){.leiste{display:none}}

/* Rechtstexte / 404 */
.text{max-width:48rem;padding-block:2.5rem 4rem}
.text h1{font-size:clamp(2.4rem,9vw,3.5rem);margin-bottom:1.5rem}
.text h2{font-size:1.5rem;margin:2rem 0 .6rem}
.platzhalter{border:1px dashed var(--brand-line);background:var(--brand-soft);color:var(--text-strong);padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.5rem}