/* ==========================================================================
   openmydoor24.de — Rex Fortis, 2026
   Ein Stylesheet, kein Framework. Keine externen Abhängigkeiten.
   ========================================================================== */

/* ---------- Schrift (lokal, latin-Subset) ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url("schrift/poppins-400.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url("schrift/poppins-500.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url("schrift/poppins-600.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url("schrift/poppins-700.woff2") format("woff2")}

:root{
  --blau:#113a51;      --blau-tief:#0d2c3e;
  --teal:#0b5e75;      --teal-hell:#0a6e8a;
  --gruen:#0c7844;     --gruen-tief:#096a3b;
  --orange:#ffab5f;    --gelb:#ffc700;
  --text:#2d2e33;      --text-leise:#5b6068;
  --linie:#e3e6ea;     --flaeche:#f6f8f9;  --weiss:#fff;
  --radius:14px;  --radius-s:8px;
  --schatten:0 1px 3px rgb(17 58 81 / .08), 0 8px 24px -12px rgb(17 58 81 / .18);
  --breite:1200px;  --schmal:760px;
  --takt:clamp(3.5rem, 7vw, 6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.075rem);line-height:1.65;color:var(--text);background:var(--weiss)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blau)}
:focus-visible{outline:3px solid var(--teal-hell);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{line-height:1.18;color:var(--blau);margin:0 0 .5em;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.35rem + 2.6vw,3.1rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem)}
h3{font-size:clamp(1.15rem,1.03rem + .6vw,1.4rem)}
p{margin:0 0 1.1em;max-width:68ch;text-wrap:pretty}
.leise{color:var(--text-leise)}
.zeitspanne{white-space:nowrap}
summary,li,td,figcaption{text-wrap:pretty}
/* FAQ-Fragen sind kurz – balance verhindert Fragezeichen-Waisen („… Sie?") */
summary,.karte h3,.abschnitt__kopf p{text-wrap:balance}
/* Lange deutsche Komposita sauber trennen statt hart brechen (braucht lang=de am html) */
h1,h2,h3,h4,p,li,summary,td{-webkit-hyphens:auto;hyphens:auto}
@media (min-width:48rem){h1,h2,h3,h4,p,li,summary,td{-webkit-hyphens:manual;hyphens:manual}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.klein{font-size:.875rem}

/* ---------- Grundraster ---------- */
.huelle{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.huelle--schmal{width:min(100% - 2.5rem,var(--schmal))}
.abschnitt{padding-block:var(--takt)}
.abschnitt--flaeche{background:var(--flaeche)}
.abschnitt--blau{background:var(--blau);color:#e8eef2}
.abschnitt--blau h2,.abschnitt--blau h3{color:#fff}
.raster{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:60rem){
  .raster--2{grid-template-columns:repeat(2,1fr)}
  .raster--3{grid-template-columns:repeat(3,1fr)}
  .raster--4{grid-template-columns:repeat(4,1fr)}
  .raster--text-bild{grid-template-columns:1.05fr .95fr;align-items:center}
}

/* ---------- Sprungmarke ---------- */
.sprung{position:absolute;left:-9999px;top:0;background:var(--blau);color:#fff;padding:.85rem 1.25rem;z-index:100;border-radius:0 0 var(--radius-s) 0}
.sprung:focus{left:0}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;align-items:center;gap:1.25rem;min-height:74px}
.kopf__logo img{height:42px;width:auto}
.kopf__nav{margin-left:auto;display:none}
@media (min-width:64rem){.kopf__nav{display:block}}
.kopf__nav > ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.kopf__nav a{color:var(--blau);text-decoration:none;font-weight:500;font-size:.95rem;padding-block:.5rem;border-bottom:2px solid transparent}
.kopf__nav a:hover,.kopf__nav a[aria-current="page"]{border-bottom-color:var(--orange)}
.kopf__ruf{margin-left:auto;display:flex;gap:.6rem}
@media (min-width:64rem){.kopf__ruf{margin-left:1.5rem}}

/* ---------- Schaltflächen ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-s);font-weight:600;font-size:1rem;
  text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,filter .15s ease;white-space:nowrap}
.knopf:hover{filter:brightness(1.08);transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf--ruf{background:var(--teal-hell);color:#fff}
.knopf--wa{background:var(--gruen);color:#fff}
.knopf--hell{background:#fff;color:var(--blau);border:1px solid var(--linie)}
.knopf--klein{padding:.6rem 1rem;font-size:.9rem}
.knopf svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;text-align:center;isolation:isolate;
  padding-block:clamp(2.75rem,6.5vw,4.75rem);background:var(--blau-tief);
  /* Mindesthoehe = Seitenverhaeltnis des Hero-Bildschnitts (1920x864). Ohne sie sind
     inhaltsarme Heroes flacher als der Zuschnitt und object-fit:cover kappt Koepfe. */
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(22rem,45vw,40rem)}
.hero--schlank{min-height:clamp(14rem,26vw,22rem)}
.hero__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(9 27 40 / .86) 0%,rgb(9 27 40 / .58) 48%,rgb(10 30 45 / .7) 100%)}
.hero h1,.hero h2{color:#fff}
.hero .leise{color:rgb(255 255 255 / .85)}
.hero__gruss{max-width:none;color:var(--orange);text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(.8rem,.75rem + .3vw,.95rem);font-weight:600;margin:0 0 .75rem}
.hero__titel{font-size:clamp(1.8rem,1.1rem + 3.2vw,3.4rem);margin:0 0 .8rem}
.hero__haken{display:grid;gap:.6rem 2.5rem;justify-content:center;margin:0 0 1.5rem;padding:0;list-style:none;
  grid-template-columns:1fr;text-align:left;max-width:34rem;margin-inline:auto}
@media (min-width:34rem){.hero__haken{grid-template-columns:repeat(2,auto)}}
.hero__haken li{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:clamp(1rem,.95rem + .3vw,1.2rem)}
.hero__haken svg{width:1.6rem;height:1.6rem;flex:none;fill:#fff;background:rgb(255 255 255 / .16);border-radius:6px;padding:.3rem}
.hero__claim{max-width:none;text-wrap:balance;font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);font-weight:500;color:rgb(255 255 255 / .92);margin:0 0 1.6rem}
.hero__ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- Bewertung ---------- */
.bewertung{display:inline-flex;flex-wrap:wrap;justify-content:center;row-gap:.2rem;align-items:center;gap:.55rem;margin:0 0 1.4rem;
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);font-weight:600}
.bewertung__sterne{color:var(--gelb);letter-spacing:.05em}
.bewertung__g{width:1.4em;height:1.4em;flex:none}

/* ---------- Preistabelle ---------- */
.preise{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--schatten)}
.preise caption{caption-side:top;text-align:left;font-weight:700;color:var(--blau);
  font-size:1.15rem;padding-bottom:.75rem}
.preise th,.preise td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--linie)}
.preise thead th{background:var(--blau);color:#fff;font-weight:600;font-size:.95rem}
.preise tbody tr:last-child td{border-bottom:0}
.preise td:last-child{font-weight:700;color:var(--blau);white-space:nowrap;text-align:right}
.preise__tag{font-weight:600}
@media (max-width:40rem){
  .preise thead{position:absolute;left:-9999px}
  .preise tr{display:block;border-bottom:1px solid var(--linie);padding:.6rem 0}
  .preise td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.35rem 1.1rem}
  .preise td::before{content:attr(data-label);font-weight:600;color:var(--text-leise)}
}

/* ---------- Karten ---------- */
.karte{--karte-pad:clamp(1.35rem,3vw,2rem);background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:var(--karte-pad);height:100%}
.karte__bild{width:calc(100% + 2*var(--karte-pad));max-width:none;height:200px;object-fit:cover;
  margin:calc(-1*var(--karte-pad)) calc(-1*var(--karte-pad)) 1.25rem;
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
.karte__bild--klein{height:9.5rem}
.karte--flaeche{background:var(--flaeche);border-color:transparent}
.karte h3{margin-top:0}
.karte p:last-child{margin-bottom:0}
.karte__num{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
  border-radius:50%;background:var(--blau);color:#fff;font-weight:700;margin-bottom:.9rem}

/* ---------- Orte ---------- */
.orte{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;list-style:none;margin:1.5rem 0 0;padding:0}
.orte a,.orte span{display:inline-block;padding:.55rem 1.1rem;border-radius:999px;
  background:#fff;border:1px solid var(--linie);text-decoration:none;color:var(--blau);font-weight:500;font-size:.95rem}
.orte a:hover{border-color:var(--teal);background:var(--teal);color:#fff}
.orte span{color:var(--text-leise)}

/* ---------- Rezensionen ---------- */
.rezension{position:relative;background:#fff;border-radius:18px;padding:1.75rem;height:100%;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgb(17 58 81 / .05),0 14px 34px -14px rgb(17 58 81 / .16)}
.rezension__kopf{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.rezension__avatar{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:1.05rem}
.rezension__avatar--1{background:#e0eff5;color:var(--teal)}
.rezension__avatar--2{background:#e3f2ea;color:var(--gruen)}
.rezension__avatar--3{background:#ffedd8;color:#a85a00}
.rezension__name{margin:0;font-weight:600;color:var(--blau);line-height:1.3}
.rezension__quelle{margin:0;font-size:.82rem;color:var(--text-leise)}
.rezension__g{width:1.3rem;height:1.3rem;flex:none;margin-left:auto}
.rezension__sterne{color:var(--gelb);font-size:1rem;letter-spacing:.14em;margin:0 0 .7rem}
.rezension__text{position:relative;z-index:1;margin:0;font-size:.96rem}

.bewertungspille{max-width:none;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .5rem;
  padding:.55em 1.15em;background:#fff;border:1px solid var(--linie);border-radius:999px;
  box-shadow:var(--schatten);font-size:.95rem}
.bewertungspille strong{color:var(--blau)}
.bewertungspille__g{width:1.2rem;height:1.2rem;flex:none}
.bewertungspille__sterne{color:var(--gelb);letter-spacing:.1em}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.75rem;max-width:var(--schmal);margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-s);overflow:hidden}
.faq summary{cursor:pointer;padding:1.15rem 3rem 1.15rem 1.35rem;font-weight:600;color:var(--blau);
  position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.35rem;top:50%;width:.65rem;height:.65rem;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{background:var(--flaeche)}
.faq__inhalt{padding:0 1.35rem 1.35rem}
.faq__inhalt p:last-child{margin-bottom:0}

/* ---------- Handlungsband ---------- */
.band{background:var(--blau);color:#fff;text-align:center;padding-block:clamp(2.75rem,6vw,4rem)}
.band h2{color:#fff;margin-bottom:.35rem}
.band p{margin-inline:auto;color:#c9d6de}
.band__ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}

/* ---------- Fuß ---------- */
.fuss{background:var(--blau-tief);color:#b9c7d1;padding-block:clamp(3rem,6vw,4.5rem);font-size:.94rem}
.fuss h2,.fuss h3{color:#fff;font-size:1.05rem;margin-bottom:.9rem}
.fuss a{color:#dbe6ed;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss__unten{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255 / .12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.875rem}

/* ---------- Mobiler Rufbalken ---------- */
.rufbalken{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:.5rem;padding:.6rem;
  background:rgb(255 255 255 / .96);backdrop-filter:blur(8px);border-top:1px solid var(--linie)}
.rufbalken .knopf{flex:1}
@media (min-width:64rem){.rufbalken{display:none}}
@media (max-width:63.99rem){body{padding-bottom:4.75rem}}

/* Hero-CTAs mobil nebeneinander halten (Rex-Fortis-Standard, kein Stapeln) */
@media (max-width:30rem){
  .hero__ctas{flex-wrap:nowrap}
  .hero__ctas .knopf{font-size:.86rem;padding:.7em .8em}
}

/* ---------- USP-Band unter dem Hero ---------- */
.usp{background:var(--flaeche);border-bottom:1px solid var(--linie);padding-block:1.6rem}
.usp__liste{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  gap:1.25rem 2rem;list-style:none;margin:0;padding:0}
.usp__liste li{display:flex;align-items:center;gap:.85rem}
.usp__chip{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;
  border-radius:var(--radius-s);background:var(--weiss);box-shadow:var(--schatten)}
.usp__chip svg{width:1.5rem;height:1.5rem;fill:var(--teal)}
.usp__text{display:grid;line-height:1.35}
.usp__text strong{color:var(--blau);font-size:.98rem}
.usp__text small{color:var(--text-leise);font-size:.855rem}
@media (max-width:64rem){.usp__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:26rem){.usp__liste{grid-template-columns:1fr}}

/* ---------- Markenband ---------- */
.marken{background:var(--weiss);border-top:1px solid var(--linie);padding-block:2.4rem}
.marken__titel{max-width:none;text-align:center;text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;font-weight:600;color:var(--text-leise);margin:0 0 1.6rem}
.marken__band{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marken__liste{flex:none;min-width:100%;display:flex;justify-content:space-around;align-items:center;
  gap:2rem;list-style:none;margin:0;padding:0;animation:marken-lauf 30s linear infinite}
/* Das Band besteht aus ZWEI identischen Listen. gap wirkt nur INNERHALB einer Liste –
   an der Nahtstelle (letztes Logo der einen, erstes der nächsten) klebten sie sonst
   aneinander. Der Abstand muss als padding IN die Liste, nicht zwischen die Listen:
   die Animation schiebt um translateX(-100%) der Listenbreite, ein gap zwischen den
   Listen würde bei jedem Durchlauf einen Sprung erzeugen. */
.marken__liste{padding-inline-end:2rem}
.marken__liste li{flex:none}
.marken__band:hover .marken__liste{animation-play-state:paused}
@keyframes marken-lauf{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marken__liste{animation:none}}

/* ---------- WhatsApp-Schwebe-Button (Desktop) ---------- */
.wa-schwebe{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;display:none;
  width:3.6rem;height:3.6rem;border-radius:50%;background:#25d366;
  box-shadow:0 6px 22px -6px rgb(0 0 0 / .4);align-items:center;justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease}
.wa-schwebe svg{width:2rem;height:2rem;fill:#fff}
.wa-schwebe:hover{transform:scale(1.07);box-shadow:0 8px 26px -6px rgb(0 0 0 / .45)}
@media (min-width:64rem){.wa-schwebe{display:flex}}

/* ---------- Sektionsköpfe & Zweispalter ---------- */
.abschnitt__kopf{max-width:var(--schmal);margin-inline:auto;text-align:center;margin-bottom:2.25rem}
.abschnitt__kopf p{margin-inline:auto}
.abschnitt__kopf > :last-child{margin-bottom:0}
.mittig{text-align:center;margin-inline:auto}

/* ---------- Umbrüche in zentriertem Text ----------
   Zentrierter Text mit einer Stummel-Schlusszeile („… Fr & Sa / bis 2 Uhr.") sieht
   kaputt aus. text-wrap:balance verteilt die Zeilen gleichmäßig. `pretty` genügt hier
   nicht — es verhindert nur die Einzelwort-Waise, gleicht aber nichts aus. */
.hero p,.hero li,
.band p,
.abschnitt__kopf p,
.mittig,
.marken__titel,
.preiskarte p,
.usp__text{text-wrap:balance}

/* Lange Fußnoten schmal NICHT zentrieren: mehrzeilig zentriert entstehen Stummelzeilen,
   die text-wrap:balance ab ~6 Zeilen nicht mehr auflöst. */
@media (max-width:40rem){p.klein.mittig{text-align:left}}
.raster--split{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.nur-breit{display:none}
@media (min-width:64rem){
  .raster--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem;align-items:start}
  .raster--split h2,.raster--split p{margin-bottom:0}
  .raster--split h2{font-size:clamp(1.5rem,1.1rem + 1.1vw,1.95rem)}
  .nur-breit{display:inline}
}

/* ---------- Verlinkte Kacheln: ganze Karte klickbar, Hover NUR hier ---------- */
.karte__link{color:inherit;text-decoration:none}
.karte__link::after{content:"";position:absolute;inset:0}
.karte p a{position:relative;z-index:1}
.karte:has(.karte__link){position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.karte:has(.karte__link):hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.karte:has(.karte__link) .karte__bild{transition:transform .3s ease}
.karte:has(.karte__link):hover .karte__bild{transform:scale(1.04)}
.karte:has(.karte__link:focus-visible){outline:3px solid var(--teal-hell);outline-offset:3px}

/* Bilder in Text-Bild-Sektionen: gerundet wie die Kacheln */
.raster--text-bild img{border-radius:var(--radius)}

/* ---------- Einsatzgebiet mit Ortsschildern ---------- */
.einsatz{color:#fff;background:linear-gradient(135deg,var(--blau-tief),var(--blau) 70%,var(--teal));padding-block:clamp(3rem,6vw,4.5rem)}
.einsatz h2{color:#fff;max-width:none}
.einsatz p{color:rgb(255 255 255 / .93)}
.einsatz__gruss{max-width:none;color:var(--orange);text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;font-size:.85rem;margin:0 0 .6rem}
.einsatz__raster{display:grid;gap:2.5rem;align-items:center}
@media (min-width:64rem){.einsatz__raster{grid-template-columns:1.1fr 1fr;gap:4.5rem}}
.ortsschilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;list-style:none;margin:0;padding:0}
@media (min-width:34rem){.ortsschilder{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ortsschilder__breit{grid-column:1 / -1}
.ortsschilder small{font-size:.72em;font-weight:500;opacity:.65;margin-left:.3em}
.ortsschilder li{display:grid;place-items:center;min-height:3.4rem;padding:.5em .7em;font-size:.92rem;
  background:var(--gelb);color:#1d1d1f;font-weight:600;text-align:center;
  border:3px solid #1d1d1f;border-radius:10px;
  box-shadow:inset 0 0 0 2px var(--gelb),inset 0 0 0 3.5px rgb(29 29 31 / .55),0 4px 14px -6px rgb(0 0 0 / .5)}

/* ---------- Festpreis-Karte ---------- */
.festpreis{max-width:34rem;margin-inline:auto;background:var(--weiss);border-radius:18px;
  padding:clamp(1.75rem,4vw,2.5rem);text-align:center;
  box-shadow:0 1px 2px rgb(17 58 81 / .05),0 18px 40px -16px rgb(17 58 81 / .2)}
.festpreis__badge{max-width:none;display:inline-block;background:var(--gelb);color:#1d1d1f;
  font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
  padding:.45em 1.1em;border-radius:999px;margin:0 0 1rem}
.festpreis__preis{max-width:none;font-family:inherit;font-weight:700;color:var(--blau);
  font-size:clamp(3.2rem,8vw,4.5rem);line-height:1;margin:0 0 .5rem;letter-spacing:-.02em}
.festpreis__preis::after{content:"";}
.festpreis__unter{max-width:none;margin:0 0 1.4rem;color:var(--text)}
.festpreis__liste{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem;justify-content:center}
.festpreis__liste li{display:flex;align-items:center;gap:.6rem;font-weight:500;text-align:left}
.festpreis__liste svg{width:1.25rem;height:1.25rem;flex:none;fill:var(--gruen)}
.festpreis__hinweis{max-width:none;margin:0;padding-top:1.1rem;border-top:1px solid var(--linie);
  font-size:.85rem;color:var(--text-leise)}


/* ---------- Leistungen-Dropdown (reines CSS, hover + focus-within) ---------- */
.untermenue{position:relative}
.untermenue > a::after{content:"";display:inline-block;margin-left:.45em;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.untermenue__liste{position:absolute;top:100%;left:-.75rem;min-width:16.5rem;z-index:60;
  display:none;list-style:none;margin:0;padding:.45rem;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-s);
  box-shadow:0 10px 30px -10px rgb(17 58 81 / .25)}
.untermenue:hover > .untermenue__liste,
.untermenue:focus-within > .untermenue__liste{display:block}
.untermenue__liste a{display:block;padding:.55em .85em;border-radius:6px;border-bottom:none;white-space:nowrap}
.untermenue__liste a:hover{background:var(--flaeche);border-bottom-color:transparent}
.untermenue__alle{border-top:1px solid var(--linie);margin-top:.35rem;padding-top:.35rem}
.untermenue__alle a{font-weight:600;color:var(--teal)}

/* ---------- Bewertungs-Badge im Header ---------- */
.kopf__bewertung{display:none;align-items:center;gap:.45rem;margin-left:auto;
  text-decoration:none;color:var(--text);font-size:.92rem;font-weight:600}
@media (min-width:64rem){.kopf__bewertung{display:flex}}
.kopf__bewertung svg{width:1.1rem;height:1.1rem;flex:none}
.kopf__bewertung strong{color:var(--blau)}
.kopf__sterne{color:var(--gelb);letter-spacing:.08em;font-size:.88rem}
.kopf__quelle{color:var(--text-leise);font-weight:500}
.kopf__bewertung:hover .kopf__quelle{color:var(--teal)}

/* ---------- Kleinstgeräte-Robustheit (≤480px) ---------- */
h1,h2,h3,p,li{overflow-wrap:break-word}
.raster > *{min-width:0}
@media (max-width:30rem){
  .knopf{white-space:normal;text-align:center}
  /* Rufnummern brechen NIE: Header-Button bleibt einzeilig, dafür kompakt */
  .kopf__ruf .knopf{white-space:nowrap;font-size:.82rem;padding:.55em .8em}
  .kopf__logo img{height:36px}
  .kopf__innen{gap:.75rem}
}
@media (max-width:21.25rem){
  .kopf__ruf .knopf{font-size:.76rem;padding:.5em .6em}
  .kopf__logo img{height:31px}
}
@media (max-width:26rem){.hero__ctas .knopf{font-size:.8rem;padding:.65em .75em}}
@media (max-width:22.5rem){.hero__ctas{flex-wrap:wrap}}

/* ---------- Preiskarten: Woche / Wochenende getrennt ---------- */
.preiskarten{display:grid;gap:1.25rem;max-width:52rem;margin-inline:auto}
@media (min-width:48rem){.preiskarten{grid-template-columns:1fr 1fr;align-items:stretch}}
.preiskarte{background:var(--weiss);border-radius:18px;padding:1.5rem 1.75rem;
  box-shadow:0 1px 2px rgb(17 58 81 / .05),0 14px 34px -14px rgb(17 58 81 / .16)}
.preiskarte h3{font-size:1.05rem;margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:2px solid var(--gelb)}
.preiskarte ul{list-style:none;margin:0;padding:0}
.preiskarte li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:.85rem;border-bottom:1px solid var(--linie)}
.preiskarte li:last-child{border-bottom:none;padding-bottom:0}
.preiskarte__zeit{font-weight:500}
.preiskarte__zeit small{display:block;font-size:.8rem;color:var(--text-leise);font-weight:400}
.preiskarte__preis{font-weight:700;color:var(--blau);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Button-Gruppen: einheitliche Abstände (statt Zeilenumbruch-Lücken) ---------- */
p:has(> .knopf){display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.mittig:has(> .knopf){justify-content:center}