/* Heegbach Apotheke und Sanitätshaus Erzhausen
   Gestaltung: cs creative design, Stand Oktober 2026
   Farbpalette: Creme, Sand, Salbei, Petrol, Terrakotta, Graphit (siehe :root).
   Das Logo bleibt in seinen Originalfarben.
   Für Text werden abgedunkelte Varianten genutzt (Kontrast mindestens 4,5 zu 1). */

@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-400-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/roboto-400-italic.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-500-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-700-normal.woff2) format("woff2")}

:root{
  /* Farbpalette Version 3, Oktober 2026. Nur diese sechs Farben plus Weiß auf Aktionsbuttons. */
  --creme:#FAFAF8;    /* Hintergrund, gebrochenes Weiß */
  --sand:#EAE3D8;     /* Abschnittsflächen, Servicekarten */
  --salbei:#DDE5D8;   /* Infoboxen, Bildhintergründe */
  --petrol:#27565B;   /* Überschriften, Links, Navigation, 7,5:1 auf Creme */
  --terra:#A94438;    /* Primäre Aktionen, Weiß darauf 5,9:1 */
  --graphit:#303B38;  /* Fließtext, 10,6:1 auf Creme */
  --weiss:#FFFFFF;    /* nur Schrift auf Terrakotta */
  --blau:#349FBF;     /* Logoblau, nur Akzente und Schmuck, nie für Text */
  --blau-hell:#E6F3F8; /* helle Tönung des Logoblaus für Flächen */
  /* Zuordnung der bisherigen Namen */
  --petrol-text:var(--petrol);--petrol-dunkel:var(--petrol);--petrol-tief:var(--petrol);
  --petrol-hell:var(--salbei);--petrol-hauch:var(--sand);
  --gruen:var(--petrol);--gruen-text:var(--petrol);--gruen-hell:var(--salbei);
  --rot:var(--terra);--rot-dunkel:var(--terra);
  --text:var(--graphit);--text-leise:var(--graphit);
  --linie:var(--sand);
  --radius:20px;
  --radius-gross:28px;
  --schatten:0 1px 2px rgba(48,59,56,.05),0 8px 24px rgba(48,59,56,.07);
  --breite:1180px;
  --skala:1;
  --fokus:var(--petrol);
  --titel:"Fraunces",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(100% * var(--skala));-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{hyphens:auto;-webkit-hyphens:auto;margin:0;font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--weiss);overflow-wrap:break-word}
img,svg,picture{max-width:100%;height:auto;display:block}
a[href^="mailto"]{overflow-wrap:anywhere}
a{color:var(--petrol-text);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--petrol-dunkel);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{color:var(--petrol-dunkel);line-height:1.2;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.2rem)}
h3{font-size:1.25rem}
p,ul,ol{margin:0 0 1em}
strong{font-weight:700}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-10rem;z-index:100;background:var(--petrol-tief);color:var(--creme);padding:.8rem 1.2rem;border-radius:8px;font-weight:700}
.skip:focus{top:1rem;color:var(--creme)}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

/* ---------- Bedienleiste ---------- */
.bedienleiste{background:var(--petrol-tief);color:var(--creme);font-size:.9rem}
.bedienleiste .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center;justify-content:space-between;min-height:44px}
.bedienleiste a{color:var(--creme);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem}
.bedienleiste a:hover{text-decoration:underline}
.bedienleiste .links{display:flex;flex-wrap:wrap;gap:0 1rem}
.werkzeuge{display:flex;gap:.35rem;align-items:center}
.werkzeuge button{font:inherit;font-weight:700;background:transparent;color:var(--creme);border:1px solid rgba(255,255,255,.55);border-radius:8px;min-width:44px;min-height:36px;padding:0 .6rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.werkzeuge button:hover{background:rgba(255,255,255,.12)}
.werkzeuge button[aria-pressed="true"]{background:var(--creme);color:var(--petrol-tief)}

/* ---------- Kopf ---------- */
.kopf{background:var(--creme);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:50}
.kopf .wrap{display:flex;align-items:center;gap:1rem;min-height:84px}
.logo{flex:0 0 auto;display:block;padding:.4rem 0}
.logo img{width:clamp(130px,22vw,230px);height:auto}
.logo{min-width:0;flex-shrink:1}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.nav a{white-space:nowrap;display:flex;align-items:center;min-height:48px;padding:0 .75rem;border-radius:10px;color:var(--text);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--petrol-hauch);color:var(--petrol-dunkel)}
.nav a[aria-current="page"]{color:var(--petrol-dunkel);box-shadow:inset 0 -3px 0 var(--petrol)}
.nav .sani a{border:2px solid var(--petrol);color:var(--petrol-dunkel);margin-left:.3rem}
.nav .bestellen a{background:var(--rot);color:var(--creme);margin-left:.3rem}
.nav .bestellen a:hover{background:var(--rot-dunkel);color:var(--creme)}
.menue-knopf{display:none;margin-left:auto;flex-shrink:0;font:inherit;font-weight:700;background:var(--petrol-dunkel);color:var(--creme);border:0;border-radius:10px;min-height:48px;padding:0 1rem;cursor:pointer;align-items:center;gap:.5rem}
.menue-knopf svg{width:22px;height:22px}
.extern-symbol{display:inline-block;width:.85em;height:.85em;margin-left:.3em;vertical-align:-.05em}

@media (max-width:1060px){
  .menue-knopf{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--creme);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);margin:0}
  .nav[data-offen="nein"]{display:none}
  .nav ul{flex-direction:column;align-items:stretch;padding:.6rem clamp(1rem,3vw,2rem) 1rem;gap:.25rem}
  .nav a{min-height:52px;font-size:1.1rem;border-bottom:1px solid var(--petrol-hell);border-radius:0}
  .nav .sani a,.nav .bestellen a{margin:.4rem 0 0;border-radius:10px;justify-content:center}
}


/* Große Schrift auf breiten Bildschirmen: Menü wie mobil */
  html[data-gross] .menue-knopf{display:inline-flex}
  html[data-gross] .nav{position:absolute;left:0;right:0;top:100%;background:var(--creme);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);margin:0}
  html[data-gross] .nav[data-offen="nein"]{display:none}
  html[data-gross] .nav ul{flex-direction:column;align-items:stretch;padding:.6rem clamp(1rem,3vw,2rem) 1rem;gap:.25rem}
  html[data-gross] .nav a{min-height:52px;font-size:1.1rem;border-bottom:1px solid var(--petrol-hell);border-radius:0}
  html[data-gross] .nav .sani a,html[data-gross] .nav .bestellen a{margin:.4rem 0 0;border-radius:10px;justify-content:center}

/* ---------- Infozeile ---------- */
.infozeile{background:var(--petrol-hauch);border-bottom:1px solid var(--linie);font-size:.95rem}
.infozeile .wrap{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;align-items:center;min-height:44px}
.infozeile a{text-decoration:none;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.status{display:inline-flex;align-items:center;gap:.45rem;font-weight:500}
.status::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--text-leise)}
.status[data-offen="ja"]::before{background:var(--gruen)}
.status[data-offen="nein"]::before{background:var(--rot)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.4rem;border-radius:12px;font:inherit;font-weight:700;font-size:1.02rem;text-decoration:none;border:2px solid transparent;cursor:pointer;background:var(--petrol-dunkel);color:var(--creme);line-height:1.2;text-align:center}
.knopf:hover{background:var(--petrol-tief);color:var(--creme)}
.knopf.rot{background:var(--rot)}.knopf.rot:hover{background:var(--rot-dunkel)}
.knopf.gruen{background:var(--gruen-text)}.knopf.gruen:hover{background:var(--petrol)}
.knopf.rahmen{background:var(--creme);color:var(--petrol-dunkel);border-color:var(--petrol)}
.knopf.rahmen:hover{background:var(--petrol-hauch)}
.knopf.hell{background:var(--creme);color:var(--petrol-tief)}
.knopf.hell:hover{background:var(--petrol-hell);color:var(--petrol-tief)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ---------- Bereiche ---------- */
main{display:block}
.abschnitt{padding:clamp(2.6rem,6vw,4.5rem) 0}
.abschnitt.getoent{background:var(--petrol-hauch)}
.abschnitt.gruen{background:var(--gruen-hell)}
.abschnitt-kopf{max-width:46rem;margin-bottom:2rem}
.abschnitt-kopf p{color:var(--text-leise);font-size:1.1rem}
.abschnitt-kopf p.dachzeile,.karte p.dachzeile{color:var(--gruen-text);font-size:.85rem}
.dachzeile{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen-text);margin-bottom:.6rem}
.lead{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--text-leise);max-width:42rem}

/* Welle als Bildmotiv aus dem Logo, rein schmückend */
.welle{display:block;width:100%;height:28px;color:var(--petrol)}
.welle.hell{color:var(--petrol-hauch)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4rem);}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero-bild{position:relative}
.hero-bild picture,.hero-bild img{border-radius:var(--radius-gross);width:100%;aspect-ratio:16/11;object-fit:cover;object-position:60% 30%}
.hero-bild{isolation:isolate}
.hero-bild::before{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;border-radius:var(--radius-gross);background:var(--gruen-hell);z-index:-1}
.hero h1 span{display:block;color:var(--petrol-text);font-weight:400;font-size:.55em;letter-spacing:0;margin-top:.4rem}
.siegelzeile{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;padding:0;list-style:none}
.siegelzeile li{background:var(--creme);border:1px solid var(--linie);border-radius:999px;padding:.35rem .85rem;font-size:.9rem;font-weight:500;color:var(--petrol-dunkel)}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero-bild{order:-1}.hero-bild::before{display:none}}

/* Schnellwahl unter dem Hero */
.schnellwahl{margin-top:-1.6rem;position:relative;z-index:2}
.schnellwahl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.schnellwahl a{display:flex;gap:.9rem;align-items:center;height:100%;background:var(--creme);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem 1.1rem;text-decoration:none;color:var(--text);box-shadow:var(--schatten);min-height:88px}
.schnellwahl a:hover{border-color:var(--petrol);transform:translateY(-1px)}
.schnellwahl strong{display:block;color:var(--petrol-dunkel);font-size:1.05rem}
.schnellwahl span{font-size:.92rem;color:var(--text-leise);line-height:1.35}
.symbol{flex:0 0 auto;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--petrol-hell);color:var(--petrol-dunkel)}
.symbol svg{width:26px;height:26px}
.symbol.rot{background:var(--salbei);color:var(--rot-dunkel)}
.symbol.gruen{background:var(--gruen-hell);color:var(--gruen-text)}
@media (max-width:960px){.schnellwahl ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.schnellwahl ul{grid-template-columns:minmax(0,1fr)}.schnellwahl{margin-top:0}}

/* ---------- Raster und Karten ---------- */
.raster{display:grid;gap:1.2rem}
.raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}.raster.drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.raster.zwei,.raster.drei,.raster.vier{grid-template-columns:minmax(0,1fr)}}
.karte{background:var(--creme);border:1px solid var(--linie);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--schatten);display:flex;flex-direction:column}
.karte > :last-child{margin-bottom:0}
.karte h3{margin-bottom:.4rem}
.karte p{color:var(--text-leise)}
.karte .knopf,.karte .weiter{margin-top:auto;align-self:flex-start}
.karte.akzent{border-top:5px solid var(--petrol)}
.karte.akzent-rot{border-top:5px solid var(--rot)}
.karte.akzent-gruen{border-top:5px solid var(--gruen)}
.karte.bild{padding:0;overflow:hidden}
.karte.bild picture img,.karte.bild > img{width:100%;aspect-ratio:3/2;object-fit:cover}
.karte.bild .innen{padding:1.3rem 1.4rem 1.4rem;display:flex;flex-direction:column;flex:1}
.karte.bild .innen > :last-child{margin-bottom:0}
.karte.bild.enthalten picture img{object-fit:contain;background:var(--petrol-hauch);padding:1rem}
a.karte{text-decoration:none;color:inherit}
a.karte:hover{border-color:var(--petrol)}
a.karte:hover h3{text-decoration:underline}
.leistung{gap:.2rem}
.leistung .symbol{margin-bottom:.8rem}
.weiter{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;min-height:44px}
.weiter::after{content:"→";transition:transform .15s}
.weiter:hover::after{transform:translateX(3px)}

.geteilt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.geteilt.umgekehrt > :first-child{order:2}
.geteilt picture img{border-radius:var(--radius-gross);width:100%}
@media (max-width:860px){.geteilt,.geteilt.formularraster{grid-template-columns:minmax(0,1fr)}.geteilt.umgekehrt > :first-child{order:0}}

.haken{list-style:none;padding:0;margin:0 0 1.2rem}
.haken li{position:relative;padding-left:2rem;margin-bottom:.55rem}
.haken li::before{content:"";position:absolute;left:0;top:.3em;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2327565B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

.hinweis{background:var(--petrol-hell);border-left:5px solid var(--petrol);border-radius:10px;padding:1.1rem 1.3rem;margin:1.4rem 0}
.hinweis.rot{background:var(--salbei);border-left-color:var(--rot)}
.hinweis.gruen{background:var(--gruen-hell);border-left-color:var(--gruen)}
.hinweis > :last-child{margin-bottom:0}

/* Sanitätshausband */
.saniband{background:var(--petrol);color:var(--creme);border-radius:var(--radius-gross);overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr}
.saniband .innen{padding:clamp(1.6rem,4vw,3rem)}
.saniband h2,.saniband h3{color:var(--creme)}
.saniband p{color:var(--creme)}
.saniband a:not(.knopf){color:var(--creme)}
.saniband picture img{width:100%;height:100%;object-fit:cover}
.saniband .haken li::before{background-color:var(--creme)}
@media (max-width:860px){.saniband{grid-template-columns:1fr}}

/* Bestellwege */
.weg{position:relative}
.weg .nummer{position:absolute;top:-14px;left:1.4rem;background:var(--petrol-dunkel);color:var(--creme);font-weight:700;border-radius:999px;padding:.15rem .7rem;font-size:.85rem}

/* Siegel und Partner */
.siegel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.siegel li{background:var(--creme);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;font-size:.92rem;color:var(--text-leise);line-height:1.35}
.siegel picture{display:flex;align-items:center;justify-content:center;height:84px}
.siegel img{max-height:84px;width:auto;object-fit:contain}
.partner{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
.partnertitel{text-align:center;margin-bottom:1.2rem}
.partner a{display:block;padding:.4rem}
.partner img{height:70px;width:auto}

/* Zeitleiste */
.zeitleiste{list-style:none;margin:0;padding:0;border-left:3px solid var(--petrol-hell);margin-left:.6rem}
.zeitleiste li{position:relative;padding:0 0 1.3rem 1.6rem}
.zeitleiste li::before{content:"";position:absolute;left:-10px;top:.35rem;width:17px;height:17px;border-radius:50%;background:var(--creme);border:3px solid var(--petrol)}
.zeitleiste strong{display:block;color:var(--petrol-dunkel);font-size:1.15rem}

/* Presseliste */
.presse{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.presse li{overflow-wrap:anywhere}
.presse li{background:var(--creme);border:1px solid var(--linie);border-radius:12px;padding:1rem 1.2rem}
.presse a{font-weight:700;font-size:1.05rem}
.presse .quelle{display:block;font-size:.92rem;color:var(--text-leise);margin-top:.2rem}

/* Häufige Fragen */
.fragen details{background:var(--creme);border:1px solid var(--linie);border-radius:12px;margin-bottom:.7rem}
.fragen summary{cursor:pointer;padding:1rem 3rem 1rem 1.2rem;font-weight:700;color:var(--petrol-dunkel);position:relative;list-style:none;min-height:48px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--petrol-text)}
.fragen details[open] summary::after{content:"−"}
.fragen .antwort{padding:0 1.2rem 1.1rem}
.fragen .antwort > :last-child{margin-bottom:0}

/* Brotkrumen und Seitenkopf */
.seitenkopf{padding:1.4rem 0 2.2rem}
.brotkrumen ol{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.92rem}
.brotkrumen li+li::before{content:"›";margin-right:.5rem;color:var(--text-leise)}
.brotkrumen a{display:inline-flex;min-height:32px;align-items:center}

/* Öffnungszeiten */
.zeiten{width:100%;border-collapse:collapse}
.zeiten th,.zeiten td{text-align:left;padding:.45rem 0;vertical-align:top;border-bottom:1px solid var(--linie)}
.zeiten th{font-weight:500;padding-right:1rem}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}

/* ---------- Formulare ---------- */
.formular{background:var(--creme);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--schatten)}
fieldset{border:0;padding:0;margin:0 0 1.4rem}
legend{font-weight:700;font-size:1.15rem;color:var(--petrol-dunkel);margin-bottom:.8rem;padding:0}
.feld{margin-bottom:1.1rem}
.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:640px){.feldreihe{grid-template-columns:1fr}}
label{display:block;font-weight:500;margin-bottom:.3rem}
.hilfe{display:block;font-size:.92rem;color:var(--text-leise);margin:-.1rem 0 .4rem}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;font:inherit;color:var(--text);background:var(--creme);border:2px solid var(--petrol);border-radius:10px;min-height:52px;padding:.65rem .8rem}
textarea{min-height:130px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--fokus);outline-offset:1px;border-color:var(--petrol-dunkel)}
input[type=file]{font:inherit;width:100%;padding:.6rem;border:2px dashed var(--petrol);border-radius:10px;background:var(--petrol-hauch);min-height:52px}
.wahl{display:grid;gap:.6rem}
.wahl label{display:flex;gap:.75rem;align-items:flex-start;font-weight:400;background:var(--petrol-hauch);border:2px solid transparent;border-radius:10px;padding:.8rem 1rem;cursor:pointer;margin:0}
.wahl label:has(input:checked){border-color:var(--petrol);background:var(--petrol-hell)}
.wahl input,.zustimmung input{width:1.35rem;height:1.35rem;flex:0 0 auto;margin:.15rem 0 0;accent-color:var(--petrol-dunkel)}
.zustimmung{display:flex;gap:.75rem;align-items:flex-start;font-weight:400}
.pflicht{color:var(--rot-dunkel)}
.fehler{color:var(--rot-dunkel);font-weight:500;margin:.4rem 0 0}
.ehrlich{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Terminbuchung (termin.js) */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem}
.svc-grid label{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;background:var(--petrol-hauch);border:2px solid transparent;border-radius:10px;padding:.8rem 1rem;cursor:pointer;margin:0}
.svc-grid label:has(input:checked){border-color:var(--petrol);background:var(--petrol-hell)}
.svc-grid input{width:1.3rem;height:1.3rem;margin:.15rem 0 0;accent-color:var(--petrol-dunkel)}
.schritt{margin-bottom:1.2rem}
.schritt h2{font-size:1.35rem;display:flex;align-items:center;gap:.6rem}
.schritt-nr{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--petrol-dunkel);color:var(--creme);font-size:1rem}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.cal-head button,.cal-grid button,.slot-grid button{font:inherit;min-height:48px;min-width:48px;border-radius:10px;border:2px solid var(--linie);background:var(--creme);color:var(--text);cursor:pointer}
.cal-head button{font-size:1.4rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.cal-grid .wd{text-align:center;font-weight:700;color:var(--text-leise);font-size:.9rem}
.cal-grid button:disabled,.cal-head button:disabled{opacity:.4;cursor:not-allowed}
.cal-grid button[aria-pressed="true"],.slot-grid button[aria-pressed="true"]{background:var(--petrol-dunkel);color:var(--creme);border-color:var(--petrol-dunkel)}
.cal-grid button:not(:disabled):hover,.slot-grid button:hover{border-color:var(--petrol)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.45rem}
.booking-summary{font-weight:700;color:var(--petrol-dunkel)}

/* ---------- Fußbereich ---------- */
.fuss{background:var(--petrol-tief);color:var(--creme);margin-top:0}
.fuss .oben{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:2rem;padding:3rem 0 2rem}
.fuss .zeiten{font-size:.95rem}
@media (min-width:561px){.fuss .zeiten th{white-space:nowrap}}
@media (max-width:960px){.fuss .oben{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.fuss .oben{grid-template-columns:minmax(0,1fr)}}
.fuss h2{color:var(--creme);font-size:1.1rem;margin-bottom:.8rem}
.fuss a{color:var(--creme)}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.15rem}
.fuss li a{display:inline-block;padding:.3rem 0}
.fuss .zeiten th,.fuss .zeiten td{border-color:rgba(255,255,255,.15);color:var(--creme)}
.fuss .logo-weiss{background:var(--creme);border-radius:12px;padding:.7rem 1rem;display:inline-block;margin-bottom:1rem}
.fuss .logo-weiss img{width:190px}
.fuss .notruf{background:rgba(255,255,255,.08);border-radius:10px;padding:.8rem 1rem;margin-top:1rem}
.fuss .unten{border-top:1px solid rgba(255,255,255,.15);padding:1.2rem 0 1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.92rem;align-items:center}
.fuss .unten a{min-height:36px;display:inline-flex;align-items:center}
.sozial{display:flex;gap:.5rem;margin-top:.6rem}
.sozial a{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.1)}
.sozial a:hover{background:rgba(255,255,255,.2)}
.sozial svg{width:22px;height:22px}

@media (max-width:760px){
  .bedienleiste{font-size:.85rem}
  .bedienleiste .wrap{min-height:40px;gap:0 .8rem}
  .bedienleiste .links a[href^="tel"]{display:none}
  .bedienleiste a{min-height:40px}
  .werkzeuge button{min-height:36px;min-width:40px;padding:0 .45rem}
  .infozeile .adresse{display:none}
  .kopf .wrap{min-height:72px}
  a.karte.leistung{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:1rem;align-items:start;padding:1rem 1.1rem}
  a.karte.leistung .symbol{grid-row:1 / span 4;margin:0}
  a.karte.leistung h3{margin:.1rem 0 .2rem}
  a.karte.leistung .weiter{grid-column:2}
}
/* Mobile Schnellleiste */
.schnellleiste{display:none}
@media (max-width:760px){
  .schnellleiste{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--creme);border-top:1px solid var(--linie);box-shadow:0 -4px 16px rgba(48,59,56,.12);padding-bottom:env(safe-area-inset-bottom)}
  .schnellleiste a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:60px;font-size:.85rem;font-weight:700;text-decoration:none;color:var(--petrol-dunkel)}
  .schnellleiste a.rot{background:var(--rot);color:var(--creme)}
  .schnellleiste svg{width:22px;height:22px}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ---------- Kontrastmodus ---------- */
html[data-kontrast="hoch"]{--creme:#fff;--sand:#fff;--salbei:#fff;--petrol:#000;--terra:#000;--graphit:#000;--weiss:#fff;--fokus:#000}
html[data-kontrast="hoch"] a{text-decoration:underline}
html[data-kontrast="hoch"] .hero,html[data-kontrast="hoch"] .seitenkopf,html[data-kontrast="hoch"] .saniband{background:var(--creme);color:#000}
html[data-kontrast="hoch"] .saniband h2,html[data-kontrast="hoch"] .saniband p,html[data-kontrast="hoch"] .saniband a:not(.knopf){color:#000}
html[data-kontrast="hoch"] .saniband{border:3px solid #000}
html[data-kontrast="hoch"] .knopf.hell{background:#000;color:var(--creme)}
html[data-kontrast="hoch"] .karte,html[data-kontrast="hoch"] .schnellwahl a{box-shadow:none;border-width:2px}
html[data-kontrast="hoch"] .welle,html[data-kontrast="hoch"] .hero-bild::before{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.bedienleiste,.kopf .nav,.menue-knopf,.schnellleiste,.infozeile{display:none!important}.kopf{position:static}a{color:#000}}

.geteilt.formularraster{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.vital{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.2rem;align-items:center}
@media (max-width:480px){.vital{grid-template-columns:minmax(0,1fr)}}
.saniband{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:860px){.saniband{grid-template-columns:minmax(0,1fr)}}
h1,h2,h3,h4,.karte p,.karte h3,.schnellwahl a,legend,label{overflow-wrap:anywhere}
.zeiten th{hyphens:manual}
.geteilt picture img.logo-klein{width:auto;max-width:200px}
.knopf{max-width:100%}
@media (max-width:420px){.zeiten th,.zeiten td{display:block;padding:.15rem 0}.zeiten th{padding-top:.55rem;border-bottom:0;font-weight:700}}


/* =====================================================================
   Gestaltung Version 3: warm, modern, klar, vertrauenswürdig
   ===================================================================== */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/fraunces-soft.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/fraunces-soft-italic.woff2) format("woff2")}
body{background:var(--creme);color:var(--graphit)}
h1,h2,h3{font-family:var(--titel);font-weight:600;letter-spacing:0;color:var(--petrol);font-variation-settings:"SOFT" 50,"WONK" 0}
h1{line-height:1.12}
h3{font-size:1.28rem}
a{color:var(--petrol)}
blockquote{font-family:var(--titel);font-style:italic}
.dachzeile{font-family:var(--titel);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;font-size:1.12rem!important;color:var(--petrol)!important}
.lead,.abschnitt-kopf p,.karte p{color:var(--graphit)}
.abschnitt{padding:clamp(3rem,7vw,5.5rem) 0}
.abschnitt.getoent,.abschnitt.sand{background:var(--sand)}
.abschnitt.salbei{background:var(--sand)}
.abschnitt-kopf{margin-bottom:2.4rem}
.abschnitt-kopf h2::after,.mit-welle::after{content:"";display:block;width:100px;height:12px;margin-top:.8rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M2 6c8-5 16-5 24 0s16 5 24 0 16-5 24 0 16 5 24 0' fill='none' stroke='%2327565B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.seitenkopf + .abschnitt{padding-top:2.6rem!important}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.fuss :focus-visible,.bedienleiste :focus-visible,.saniband :focus-visible{outline-color:var(--creme)}

/* Knöpfe: primär Terrakotta, sekundär Kontur */
.knopf{border-radius:999px;padding:.75rem 1.6rem;background:transparent;color:var(--petrol);border:2px solid var(--petrol)}
.knopf:hover{background:var(--petrol);color:var(--creme)}
.knopf.rahmen,.knopf.gruen{background:transparent;color:var(--petrol);border-color:var(--petrol)}
.knopf.rahmen:hover,.knopf.gruen:hover{background:var(--petrol);color:var(--creme)}
.knopf.rot{background:var(--terra);color:var(--weiss);border-color:var(--terra)}
.knopf.rot:hover{background:var(--terra);color:var(--weiss);text-decoration:underline;text-underline-offset:.2em}
.knopf.hell{background:var(--creme);color:var(--petrol);border-color:var(--creme)}
.knopf.hell:hover{background:transparent;color:var(--creme)}
.knopf.auf-petrol{background:transparent;color:var(--creme);border-color:var(--creme)}
.knopf.auf-petrol:hover{background:var(--creme);color:var(--petrol)}

/* Kopf, Navigation, Leisten */
.bedienleiste{background:var(--petrol);color:var(--creme)}
.bedienleiste a,.werkzeuge button{color:var(--creme)}
.werkzeuge button{border-radius:999px;border-color:var(--creme);background:transparent}
.werkzeuge button:hover{background:var(--creme);color:var(--petrol)}
.werkzeuge button[aria-pressed="true"]{background:var(--creme);color:var(--petrol)}
.kopf{background:var(--creme);border-bottom:1px solid var(--sand)}
.nav a{color:var(--petrol)}
.nav a:hover{background:var(--sand);color:var(--petrol)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--petrol)}
.nav .sani a{border:2px solid var(--petrol);border-radius:999px;background:transparent}
.nav .bestellen a{background:var(--terra);color:var(--weiss);border-radius:999px}
.nav .bestellen a:hover{background:var(--terra);color:var(--weiss);text-decoration:underline}
.nav .bestellen a[aria-current="page"]{box-shadow:none}
.menue-knopf{background:transparent;color:var(--petrol);border:2px solid var(--petrol);border-radius:999px}
@media (max-width:1060px){.nav{background:var(--creme);border-bottom-color:var(--sand)}.nav a{border-bottom-color:var(--sand)}}
html[data-gross] .nav{background:var(--creme)}
.infozeile{background:var(--sand);border-bottom:0}
.status::before{background:var(--graphit)}
.status[data-offen="ja"]::before{background:var(--petrol)}
.status[data-offen="nein"]::before{background:var(--graphit)}
.seitenkopf{background:var(--creme);padding:1.6rem 0 1.4rem}

/* Hero: Creme, ein klares Foto */
.hero{background:var(--creme);padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.hero .gruss{font-family:var(--titel);font-style:italic;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);color:var(--petrol);margin:0 0 .5rem}
.hero h1 span{font-family:"Roboto",system-ui,sans-serif;font-weight:400;color:var(--graphit)}
.hero-bild::before{display:none}
.hero-bild picture img{aspect-ratio:4/3.4;border-radius:var(--radius-gross);object-position:50% 45%;background:var(--salbei)}
.hero-bild figcaption{position:absolute;left:1.2rem;bottom:1.2rem;background:var(--creme);border-radius:999px;padding:.45rem 1rem;font-size:.92rem;color:var(--graphit)}
.hero-bild figcaption strong{color:var(--petrol)}
.siegelzeile li{background:var(--sand);border:0;color:var(--graphit)}
.siegelzeile li a{color:var(--petrol)}

/* Schnellwahl als Servicekarten */
.schnellwahl{margin-top:0;padding-bottom:1rem}
.schnellwahl a{background:var(--sand);border:0;box-shadow:none;border-radius:var(--radius)}
.schnellwahl a:hover{transform:none;background:var(--salbei)}
.schnellwahl strong{color:var(--petrol)}
.schnellwahl span{color:var(--graphit)}

/* Symbole */
.symbol,.symbol.rot,.symbol.gruen{border-radius:50%;width:54px;height:54px;background:var(--salbei);color:var(--petrol)}
.abschnitt.getoent .symbol,.abschnitt.sand .symbol,.abschnitt.salbei .symbol{background:var(--creme)}

/* Karten: Sand auf Creme, Creme auf Sand, ohne Balken */
.karte{background:var(--sand);border:0;box-shadow:none;border-radius:var(--radius)}
.abschnitt.getoent .karte,.abschnitt.sand .karte,.abschnitt.salbei .karte{background:var(--creme)}
.karte.akzent,.karte.akzent-rot,.karte.akzent-gruen{border-top:0;box-shadow:none}
.karte.akzent-rot,.karte.akzent-gruen,.karte.akzent{background:var(--sand)}
.abschnitt.getoent .karte.akzent,.abschnitt.getoent .karte.akzent-rot,.abschnitt.getoent .karte.akzent-gruen{background:var(--creme)}
.karte.akzent .symbol,.karte.akzent-rot .symbol,.karte.akzent-gruen .symbol{background:var(--creme)}
a.karte:hover{background:var(--salbei)}
.karte.bild.enthalten picture img{background:var(--salbei)}
.weg .nummer{background:var(--petrol);color:var(--creme)}
.leistung .weiter,.weiter{color:var(--petrol)}

/* Infoboxen in Salbei */
.hinweis,.hinweis.rot,.hinweis.gruen{background:var(--salbei);border-left:0;border-radius:var(--radius)}
.formular{background:var(--creme);border:1px solid var(--sand);box-shadow:none;border-radius:var(--radius-gross)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{background:var(--creme);border:2px solid var(--petrol);color:var(--graphit)}
input[type=file]{background:var(--sand);border:2px dashed var(--petrol)}
.wahl label,.svc-grid label{background:var(--sand)}
.wahl label:has(input:checked),.svc-grid label:has(input:checked){background:var(--salbei);border-color:var(--petrol)}
.wahl input,.zustimmung input,.svc-grid input{accent-color:var(--petrol)}
.pflicht{color:var(--petrol)}
.fehler{color:var(--terra)}
.cal-head button,.cal-grid button,.slot-grid button{background:var(--creme);border-color:var(--sand);color:var(--graphit)}
.cal-grid button[aria-pressed="true"],.slot-grid button[aria-pressed="true"]{background:var(--petrol);color:var(--creme);border-color:var(--petrol)}
.schritt-nr{background:var(--petrol);color:var(--creme)}

/* Persönlicher Gruß */
.brief{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.brief picture img{border-radius:var(--radius-gross);width:100%;background:var(--salbei)}
.brief blockquote{margin:0 0 1.2rem;font-size:clamp(1.35rem,1.15rem + 1vw,1.85rem);line-height:1.35;color:var(--petrol)}
.brief blockquote::before{content:"“";display:block;font-size:4.2rem;line-height:1;height:2.4rem;color:var(--petrol);font-style:normal}
.brief .unterschrift{font-family:var(--titel);font-style:italic;font-size:1.2rem;color:var(--petrol);margin-top:1.2rem}
.brief .unterschrift span{display:block;font-family:"Roboto",sans-serif;font-style:normal;font-size:.95rem;color:var(--graphit)}
@media (max-width:860px){.brief{grid-template-columns:minmax(0,1fr)}}
.werte .symbol{width:62px;height:62px;margin-bottom:1rem}
.werte .symbol svg{width:30px;height:30px}

/* Bilder */
.geteilt picture img{border-radius:var(--radius-gross);background:var(--salbei)}
.karte.bild picture img{border-radius:0}

/* Sanitätshaus: ruhige Petrolfläche ohne Verlauf */
.saniband{background:var(--petrol);border-radius:var(--radius-gross)}
.saniband h2,.saniband h3,.saniband p,.saniband li,.saniband .dachzeile{color:var(--creme)!important}
.saniband .haken li::before{background-color:var(--creme)}

/* Siegel und Partner */
.siegel li{background:var(--sand);border:0;border-radius:var(--radius);color:var(--graphit)}
.abschnitt.getoent .siegel li{background:var(--creme)}
.partner img{background:transparent}
.presse li{background:var(--sand);border:0}
.fragen details{background:var(--sand);border:0}
.abschnitt.getoent .fragen details,.abschnitt.getoent .presse li{background:var(--creme)}
.fragen summary{color:var(--petrol)}
.fragen summary::after{color:var(--petrol)}
.zeiten th,.zeiten td{border-bottom-color:var(--sand)}
.abschnitt.getoent .zeiten th,.abschnitt.getoent .zeiten td,.karte .zeiten th,.karte .zeiten td{border-bottom-color:var(--creme)}
.zeitleiste{border-left-color:var(--salbei)}
.zeitleiste li::before{background:var(--creme);border-color:var(--petrol)}
.haken li::before{background-color:var(--salbei)}

/* Fußbereich Petrol mit Wellenkante */
.fuss{background:var(--petrol);color:var(--creme);position:relative;margin-top:36px}
.fuss::before{content:"";position:absolute;left:0;right:0;top:-35px;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0 36V20C180 2 360 2 540 16s360 18 540 5 270-20 360-9v24z' fill='%2327565B'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.fuss a,.fuss h2,.fuss .zeiten th,.fuss .zeiten td{color:var(--creme)}
.fuss .logo-weiss{background:var(--creme);border-radius:16px}
.fuss .notruf{background:rgba(247,244,238,.1)}
.sozial a{background:rgba(247,244,238,.12)}

/* Mobile Schnellleiste */
@media (max-width:760px){
  .schnellleiste{background:var(--creme);border-top:1px solid var(--sand)}
  .schnellleiste a{color:var(--petrol)}
  .schnellleiste a.rot{background:var(--terra);color:var(--weiss)}
}

/* Kontrastmodus */
html[data-kontrast="hoch"] .abschnitt-kopf h2::after,html[data-kontrast="hoch"] .fuss::before{display:none}
html[data-kontrast="hoch"] .karte,html[data-kontrast="hoch"] .schnellwahl a,html[data-kontrast="hoch"] .siegel li,html[data-kontrast="hoch"] .fragen details{border:2px solid #000}
html[data-kontrast="hoch"] .saniband{background:#fff;border:3px solid #000}
html[data-kontrast="hoch"] .saniband h2,html[data-kontrast="hoch"] .saniband p,html[data-kontrast="hoch"] .saniband li,html[data-kontrast="hoch"] .saniband .dachzeile{color:#000!important}
html[data-kontrast="hoch"] .saniband .knopf.hell{background:#000;color:#fff;border-color:#000}
html[data-kontrast="hoch"] .saniband .knopf.auf-petrol{color:#000;border-color:#000}
html[data-kontrast="hoch"] .fuss{background:#000;color:#fff}
html[data-kontrast="hoch"] .fuss a,html[data-kontrast="hoch"] .fuss h2,html[data-kontrast="hoch"] .fuss .zeiten th,html[data-kontrast="hoch"] .fuss .zeiten td{color:#fff}
html[data-kontrast="hoch"] .bedienleiste{background:#000}
html[data-kontrast="hoch"] .bedienleiste a,html[data-kontrast="hoch"] .werkzeuge button{color:#fff;border-color:#fff}
html[data-kontrast="hoch"] .werkzeuge button[aria-pressed="true"]{background:#fff;color:#000}
.abschnitt.getoent .karte .symbol,.abschnitt.sand .karte .symbol{background:var(--salbei)}
.karte.akzent .symbol,.karte.akzent-rot .symbol,.karte.akzent-gruen .symbol{background:var(--salbei)}
.abschnitt.getoent .karte.akzent .symbol{background:var(--salbei)}
.fuss{margin-top:0}
input[type=radio],input[type=checkbox]{color:var(--graphit);border-color:var(--petrol)}

/* =====================================================================
   Akzente im Logoblau (Version 5)
   Das Blau aus dem Logo setzt frische, moderne Akzente. Es wird nur für
   Schmuck, Linien, Punkte und Flächen genutzt, nie für Text, damit alle
   Kontraste erhalten bleiben. Text auf blauen Tönungen bleibt Petrol.
   ===================================================================== */
.abschnitt-kopf h2::after,.mit-welle::after{width:110px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14'%3E%3Cpath d='M2 7c9-6 18-6 27 0s18 6 27 0 18-6 27 0 18 6 25 0' fill='none' stroke='%23349FBF' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.dachzeile{display:inline-flex!important;align-items:center;gap:.6rem}
.dachzeile::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--blau);flex:0 0 auto}
.hero .gruss{display:flex;align-items:center;gap:.7rem}
.hero .gruss::before{content:"";width:34px;height:3px;border-radius:3px;background:var(--blau)}

/* Hero: blaue Form hinter dem Teamfoto */
.hero-bild{isolation:isolate}
.hero-bild::before{display:block!important;content:"";position:absolute;right:-18px;bottom:-18px;width:62%;height:62%;border-radius:var(--radius-gross);background:var(--blau);z-index:-1}
.hero-bild::after{content:"";position:absolute;left:-14px;top:-14px;width:72px;height:72px;border-radius:50%;background:var(--blau-hell);z-index:-1}
@media (max-width:860px){.hero-bild::before{right:-8px;bottom:-10px}.hero-bild::after{display:none}}

/* Leisten und Navigation */
.infozeile{background:var(--blau-hell)}
.nav a:hover{background:var(--blau-hell)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--blau)}
.siegelzeile li{background:var(--blau-hell)}

/* Symbole, Haken, Zeitleiste */
.symbol,.symbol.rot,.symbol.gruen,
.abschnitt.getoent .symbol,.abschnitt.getoent .karte .symbol,.karte.akzent .symbol,.karte.akzent-rot .symbol,.karte.akzent-gruen .symbol,.abschnitt.getoent .karte.akzent .symbol{background:var(--blau-hell);color:var(--petrol)}
.haken li::before{background-color:var(--blau-hell)}
.saniband .haken li::before{background-color:var(--creme)}
.zeitleiste{border-left-color:var(--blau-hell)}
.zeitleiste li::before{border-color:var(--blau)}
.weg .nummer{background:var(--blau-hell);color:var(--petrol)}

/* Karten: blauer Rahmen beim Überfahren, kein Farbwechsel des Textes */
a.karte,.schnellwahl a{box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s,background-color .15s}
a.karte:hover,.schnellwahl a:hover{background:var(--blau-hell);box-shadow:inset 0 0 0 2px var(--blau)}
.fragen details[open]{box-shadow:inset 3px 0 0 var(--blau)}
.wahl label:has(input:checked),.svc-grid label:has(input:checked){background:var(--blau-hell);border-color:var(--blau)}
.cal-grid button:not(:disabled):hover,.slot-grid button:hover{border-color:var(--blau)}

/* Sanitätshausband: feine blaue Welle */
.saniband .innen{position:relative}
.saniband h2::after{content:"";display:block;width:110px;height:14px;margin-top:.8rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14'%3E%3Cpath d='M2 7c9-6 18-6 27 0s18 6 27 0 18-6 27 0 18 6 25 0' fill='none' stroke='%23349FBF' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}

/* Fußbereich: blaue Wellenlinie über der Petrolkante */
.fuss::after{content:"";position:absolute;left:0;right:0;top:-44px;height:24px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 20C180 2 360 2 540 14s360 14 540 4 270-14 360-6' fill='none' stroke='%23349FBF' stroke-width='2.5'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.fuss h2::after{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--blau);margin-top:.5rem}

/* Kontrastmodus: Schmuck aus */
html[data-kontrast="hoch"]{--blau:#000;--blau-hell:#fff}
html[data-kontrast="hoch"] .hero-bild::before,html[data-kontrast="hoch"] .hero-bild::after,html[data-kontrast="hoch"] .fuss::after,html[data-kontrast="hoch"] .dachzeile::before,html[data-kontrast="hoch"] .hero .gruss::before,html[data-kontrast="hoch"] .saniband h2::after{display:none!important}
@media (prefers-reduced-motion:reduce){a.karte,.schnellwahl a{transition:none}}
.partnertitel{display:flex!important;justify-content:center}
section[aria-labelledby="h-marken"]{padding-bottom:4.4rem!important}
.partnerband{background:var(--weiss)}
.siegel picture img.safespace-klein,.siegel img.safespace-klein{max-height:32px;width:auto}
.siegel{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}

/* Symbole: Logogrün mit weißem Zeichen (Version 5.2).
   Weiß auf #799319 = 3,50 zu 1, erfüllt WCAG 1.4.11 (3 zu 1).
   Alternativen: Logoblau #349FBF (3,06) oder tieferes Blau #2B88A6 (4,06). */
:root{--symbol:#799319}
.symbol,.symbol.rot,.symbol.gruen,
.abschnitt.getoent .symbol,.abschnitt.getoent .karte .symbol,.abschnitt.sand .karte .symbol,
.karte.akzent .symbol,.karte.akzent-rot .symbol,.karte.akzent-gruen .symbol,.abschnitt.getoent .karte.akzent .symbol{background:var(--symbol);color:#FFFFFF}
.symbol svg{stroke-width:2.2}
html[data-kontrast="hoch"]{--symbol:#000}

/* Dachzeilen im Logogrün (Version 5.3).
   Text in abgedunkeltem Logogrün #576A12 (gleicher Farbton, 5,8:1 auf Weiß, 4,7:1 auf Sand),
   der Strich davor im reinen Logogrün #799319. */
:root{--gruen-logo:#799319;--gruen-logo-text:#576A12}
.dachzeile,.abschnitt-kopf p.dachzeile,.karte p.dachzeile,.hero .gruss{color:var(--gruen-logo-text)!important}
.dachzeile::before,.hero .gruss::before{background:var(--gruen-logo)}
.saniband .dachzeile{color:var(--creme)!important}
.saniband .dachzeile::before{background:var(--creme)}
html[data-kontrast="hoch"]{--gruen-logo:#000;--gruen-logo-text:#000}
body,p,li,td,th,label,.lead{hyphens:manual;-webkit-hyphens:manual}
/* Version 5.4: Teamfoto im Garten, Querformat */
/* 31.10.2026: Teamfoto 1044 x 822 im eigenen Seitenverhältnis, damit niemand angeschnitten wird */
.hero-bild picture img{aspect-ratio:1044/822;object-position:50% 50%}
@media (max-width:560px){.hero-bild figcaption{font-size:.8rem;left:.7rem;bottom:.7rem;padding:.3rem .75rem}}
/* Version 5.5: Hintergrundfoto Regale im Abschnitt "Was uns ausmacht" */
.abschnitt.werte{position:relative;isolation:isolate;background-color:var(--sand);background-image:linear-gradient(90deg,rgba(234,227,216,.9) 0%,rgba(234,227,216,.68) 42%,rgba(234,227,216,.3) 100%),url("img/hintergrund-regale.jpg");background-size:cover;background-position:center 40%;background-repeat:no-repeat}
.abschnitt.werte .karte{background:rgba(250,250,248,.94);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html[data-kontrast="hoch"] .abschnitt.werte{background-image:none;background-color:var(--creme)}
html[data-kontrast="hoch"] .abschnitt.werte .karte{background:var(--creme);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Version 5.6: Siegel in Logogrün, getrennt nach Auszeichnungen und Kooperationen.
Weiße Schrift auf #799319 = 3,5:1, deshalb fett und ab 1,2rem (große Schrift, WCAG 1.4.3: 3:1).
Logos stehen auf einer weißen Fläche, damit sie in Originalfarben bleiben. */
.siegel-titel{font-size:1.3rem;margin:2.2rem 0 1rem}
.abschnitt-kopf + .siegel-titel{margin-top:0}
.siegel.siegel-gruen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.siegel.siegel-mitte{display:flex;flex-wrap:wrap;justify-content:center}
.siegel.siegel-mitte li{flex:0 1 calc((100% - 3.6rem) / 4)}
.siegel.siegel-gruen li{background:var(--gruen-logo);color:#fff;font-weight:700;font-size:1.2rem;line-height:1.3;padding:1.2rem 1rem 1.4rem;gap:.9rem;border:0}
.siegel.siegel-gruen picture{background:#fff;border-radius:14px;width:100%;height:120px;padding:.8rem}
.siegel.siegel-gruen img{max-height:96px}
.siegel.siegel-gruen img.safespace-klein{max-height:44px}
@media (max-width:860px){.siegel.siegel-gruen{grid-template-columns:repeat(2,minmax(0,1fr))}.siegel.siegel-mitte li{flex-basis:calc((100% - 1.2rem) / 2)}}
@media (max-width:560px){.siegel.siegel-gruen{gap:.8rem}.siegel.siegel-mitte li{flex-basis:calc((100% - .8rem) / 2)}.siegel.siegel-gruen li{font-size:1.2rem;padding:.8rem .7rem 1rem}.siegel.siegel-gruen picture{height:96px;padding:.6rem}.siegel.siegel-gruen img{max-height:76px}}
@media (max-width:340px){.siegel.siegel-gruen{grid-template-columns:minmax(0,1fr)}.siegel.siegel-mitte li{flex-basis:100%}}
html[data-kontrast="hoch"] .siegel.siegel-gruen li{background:#fff;color:#000;border:2px solid #000}
/* Version 5.7: Monatsflyer auf "Aktuelles", Hinweiskarte auf der Startseite, weiße Logoflächen */
.flyer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.flyer-seiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.flyer-seite{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--schatten);transition:transform .15s,box-shadow .15s}
.flyer-seite:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--blau),var(--schatten)}
.flyer-seite img{width:100%;height:auto;aspect-ratio:1024/1449;object-fit:cover}
.flyer-zeitraum{font-weight:700;color:var(--petrol)!important}
.flyer-text .knopfreihe{margin:1.2rem 0}
@media (max-width:860px){.flyer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.flyer-seiten{grid-template-columns:minmax(0,1fr)}}
.raster-aktuell .flyer-teaser-bild{display:block;background:#fff;overflow:hidden}
.raster-aktuell .flyer-teaser-bild img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:top}
.raster-aktuell .karte.flyer-teaser{background:var(--sand)}
@media (prefers-reduced-motion:reduce){.flyer-seite{transition:none}}
/* Logos und Urkunden in Bildkarten auf weißem Grund */
.karte.bild.enthalten picture img{background:#fff}
/* Version 5.8: Heegbach-Vital-Regal, Hector, Laumännchen, Kopfbanner Frauengesundheit, Social-Knöpfe Kontakt */
.vital.vital-mit-regal{grid-template-columns:170px minmax(0,1fr);align-items:center}
.vital-regal img{width:170px;height:auto;filter:drop-shadow(0 10px 18px rgba(48,59,56,.18))}
@media (max-width:480px){.vital.vital-mit-regal{grid-template-columns:minmax(0,1fr)}.vital-regal{justify-self:center}.vital-regal img{width:150px}}
/* Startseite: das Regal lugt aus der Leistungskarte, rein schmückend */
a.karte.leistung.mit-regal{position:relative;overflow:hidden;padding-right:5.4rem}
.karte-regal{position:absolute;right:.7rem;bottom:-2.6rem;width:64px;height:auto;transform:rotate(-4deg);transition:transform .25s ease;filter:drop-shadow(0 6px 10px rgba(48,59,56,.18));pointer-events:none}
a.karte.leistung.mit-regal:hover .karte-regal,a.karte.leistung.mit-regal:focus-visible .karte-regal{transform:rotate(0) translateY(-1.4rem)}
@media (max-width:760px){a.karte.leistung.mit-regal{padding-right:4.6rem}.karte-regal{width:52px;bottom:-1.8rem}}
@media (prefers-reduced-motion:reduce){.karte-regal{transition:none}}
/* Laumännchen */
.laum-logo img{width:100%;max-width:320px;height:auto}
.karte .laum-logo{display:block;margin-bottom:1rem;background:#fff;border-radius:12px;padding:.6rem .8rem;align-self:flex-start}
.karte .laum-logo img{max-width:240px}
.laum-link{display:inline-block;margin-top:.6rem;background:#fff;border-radius:14px;padding:.7rem 1rem;box-shadow:var(--schatten)}
.laum-link:hover{box-shadow:inset 0 0 0 2px var(--blau),var(--schatten)}
/* Kopfbanner Frauengesundheit */
.kopfbanner{display:block;margin:0 0 2rem}
.kopfbanner img{width:100%;max-width:820px;height:auto}
/* Social-Knöpfe auf der Kontaktseite */
.sozial-gross{margin-top:2.4rem;text-align:center}
.sozial-titel{font-size:1.3rem;margin-bottom:1rem}
.sozial-gross ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.sozial-gross a{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.6rem 1.3rem;border:2px solid var(--petrol);border-radius:999px;color:var(--petrol);font-weight:700;text-decoration:none;background:var(--creme)}
.sozial-gross a:hover{background:var(--blau-hell);border-color:var(--blau)}
.sozial-gross a > svg:first-child{width:24px;height:24px;flex:0 0 auto}
html[data-kontrast="hoch"] .karte-regal{display:none}
.laum-logo img,.laum-link img{background:transparent!important;border-radius:0!important}
/* Version 5.9: Untermenü Leistungen und Band "Für die ganze Familie" */
.hat-untermenue{position:relative;display:flex;align-items:center;flex-wrap:wrap}
.hat-untermenue > a{padding-right:.35rem}
.nav a.im-bereich{box-shadow:inset 0 -3px 0 var(--blau-hell)}
.untermenue-knopf{display:inline-grid;place-items:center;width:32px;height:44px;margin-left:-.3rem;border:0;border-radius:10px;background:transparent;color:var(--petrol);cursor:pointer}
.untermenue-knopf:hover{background:var(--blau-hell)}
.untermenue-pfeil{width:18px;height:18px;transition:transform .2s}
.untermenue-knopf[aria-expanded="true"] .untermenue-pfeil{transform:rotate(180deg)}
.untermenue{position:absolute;top:calc(100% + .4rem);left:-1rem;z-index:60;width:min(560px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.6rem;padding:1.2rem 1.4rem 1rem;background:var(--creme);border:1px solid var(--sand);border-radius:var(--radius);box-shadow:0 12px 32px rgba(48,59,56,.14)}
.untermenue[hidden]{display:none}
.untermenue-titel{font-family:var(--titel);font-style:italic;font-size:1rem;color:var(--gruen-logo-text);margin:0 0 .3rem}
.untermenue ul{list-style:none;margin:0;padding:0;display:block!important}
.untermenue li{margin:0}
.nav .untermenue a{display:flex;min-height:44px;padding:0 .6rem;margin:0 -.6rem;border-radius:10px;white-space:normal;font-weight:500;color:var(--petrol);border:0;box-shadow:none}
.nav .untermenue a:hover{background:var(--blau-hell)}
.nav .untermenue a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--blau)}
.untermenue-alle{grid-column:1 / -1;border-top:1px solid var(--sand)!important;margin-top:.4rem!important;padding-top:.5rem!important;font-weight:700!important}
.untermenue-alle::after{content:" →"}
@media (max-width:1060px){
  .hat-untermenue{display:grid;grid-template-columns:1fr auto}
  .untermenue-knopf{width:52px;height:52px;margin:0;border-bottom:1px solid var(--sand);border-radius:0}
  .untermenue{position:static;width:auto;grid-column:1 / -1;grid-template-columns:1fr;box-shadow:none;border:0;border-radius:0;padding:.3rem 0 .6rem 1rem;background:var(--creme)}
  .nav .untermenue a{font-size:1.02rem;min-height:48px;border-bottom:1px solid var(--sand);border-radius:0}
}
html[data-gross] .hat-untermenue{display:grid;grid-template-columns:1fr auto}
html[data-gross] .untermenue{position:static;width:auto;grid-column:1 / -1;grid-template-columns:1fr;box-shadow:none;border:0;padding:.3rem 0 .6rem 1rem}
@media (prefers-reduced-motion:reduce){.untermenue-pfeil{transition:none}}
html[data-kontrast="hoch"] .untermenue{border:2px solid #000;box-shadow:none}
/* Familie */
.familie-karte .familie-bild{display:flex;align-items:center;justify-content:center;height:210px;background:#fff;padding:1rem}
.familie-karte .familie-bild img{width:auto;max-width:100%;max-height:178px;height:auto;object-fit:contain;aspect-ratio:auto}
.familie-karte .innen{display:flex;flex-direction:column;gap:.5rem}
.familie-karte h3{margin:0}
.familie-text{color:var(--graphit);line-height:1.6}
.familie-karte .weiter{margin-top:auto}
.familie-karte:hover .familie-bild img{transform:scale(1.03)}
.familie-bild img{transition:transform .25s}
@media (prefers-reduced-motion:reduce){.familie-bild img{transition:none}}
@media (max-width:560px){.familie-karte .familie-bild{height:170px}.familie-karte .familie-bild img{max-height:140px}}
.karte.bild.familie-karte .familie-bild picture{display:flex;justify-content:center;align-items:center;width:100%;height:100%}
.karte.bild.familie-karte .familie-bild picture img{width:auto;height:auto;max-width:100%;max-height:178px;aspect-ratio:auto;object-fit:contain;border-radius:0;background:transparent}
@media (max-width:560px){.karte.bild.familie-karte .familie-bild picture img{max-height:140px}}

/* Version 5.5: Foto im Kids Club */
.kids-aktionen{align-items:start;margin-top:1.4rem}
.kids-foto{margin:0}
.kids-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-gross)}
.kids-foto figcaption{margin-top:.6rem;font-size:.95rem;color:var(--graphit)}
.kids-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
@media (min-width:861px){.kids-foto{position:sticky;top:1.5rem}}
/* Version 5.6: Cannabis 4 You */
.karte.bild.c4y-logo{background:#fff;padding:clamp(1rem,3vw,2rem)}
.karte.bild.enthalten.c4y-logo picture img{background:#fff;aspect-ratio:1/1;padding:0;max-width:380px;margin:0 auto;display:block}