/* Facial AM Germany – Stylesheet
   Farben aus Logo und bisheriger Website: Taupe #bfa78f, Graphit, Logo-Gold */

@font-face{font-family:"Open Sans";src:url(../fonts/opensans.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/opensans-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/opensans-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/opensans-bolditalic.woff) format("woff");font-weight:700;font-style:italic;font-display:swap}

:root{
  --porzellan:#fbfaf8;
  --sand:#f3eee8;
  --taupe:#bfa78f;
  --taupe-hell:#e6dccf;
  --bronze:#86664a;
  --bronze-dunkel:#6b4f38;
  --graphit:#3f4143;
  --graphit-tief:#2b2c2e;
  --text:#3f4143;
  --text-leise:#6e6a66;
  --gold:#f2c14e;
  --wa:#1fa855;
  --wa-dunkel:#178a45;
  --weiss:#fff;
  --linie:#e4ddd4;
  --radius:14px;
  --breite:1180px;
  --schatten:0 18px 40px -22px rgba(63,46,30,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--porzellan);color:var(--text);font:400 17px/1.7 "Open Sans","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--bronze);text-underline-offset:3px}
a:hover{color:var(--bronze-dunkel)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{color:var(--graphit-tief);line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.35rem)}
h3{font-size:1.3rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul{margin:0 0 1.2em;padding-left:1.2em}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}
.text{max-width:68ch}
.lead{font-size:1.15rem;color:var(--text-leise)}
.skip{position:absolute;left:-9999px;top:0;background:var(--graphit);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:10px;top:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:inherit;font-weight:700;font-size:1rem;padding:.95em 1.5em;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn:active{transform:translateY(1px)}
.btn-termin{background:var(--bronze);color:#fff}
.btn-termin:hover{background:var(--bronze-dunkel);color:#fff}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dunkel);color:#fff}
.btn-rand{border-color:var(--graphit);color:var(--graphit);background:transparent}
.btn-rand:hover{background:var(--graphit);color:#fff}
.btn-hell{background:#fff;color:var(--graphit)}
.btn-hell:hover{background:var(--sand);color:var(--graphit-tief)}
.btn-gross{font-size:1.08rem;padding:1.05em 1.7em}
.btn-reihe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Kopf */
.hinweisleiste{background:var(--graphit-tief);color:#efe9e2;font-size:.9rem}
.hinweisleiste .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px}
.hinweisleiste a{color:#fff;text-decoration:none;font-weight:700}
.hinweisleiste a:hover{color:var(--gold)}
.hinweisleiste .angebot strong{color:var(--gold)}
.hinweisleiste .direkt{display:flex;gap:22px;white-space:nowrap}
.hinweisleiste .direkt a{display:inline-flex;align-items:center;gap:7px}
.hinweisleiste svg{width:16px;height:16px}

.kopf{position:sticky;top:0;z-index:60;background:rgba(251,250,248,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;gap:28px;height:92px}
.logo{flex:none;display:block}
.logo img{width:170px;height:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>a,.nav .unter>button{font-family:inherit;font-weight:600;font-size:.98rem;color:var(--graphit);text-decoration:none;padding:10px 14px;border-radius:999px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav .unter>button:hover,.nav>a[aria-current],.nav .unter.aktiv>button{background:var(--sand);color:var(--graphit-tief)}
.nav .unter{position:relative}
.nav .unter>button svg{width:12px;height:12px;transition:transform .15s}
.nav .unter.offen>button svg{transform:rotate(180deg)}
.untermenue{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(620px,90vw);background:#fff;border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:14px;display:none;grid-template-columns:1fr 1fr;gap:6px}
.unter.offen .untermenue{display:grid}
.untermenue a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;text-decoration:none;color:var(--graphit);font-weight:600;font-size:.95rem;line-height:1.3}
.untermenue a:hover,.untermenue a[aria-current]{background:var(--sand)}
.untermenue img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.untermenue a small{display:block;font-weight:400;color:var(--text-leise);font-size:.82rem}
.untermenue .alle{grid-column:1/-1;justify-content:center;border-top:1px solid var(--linie);border-radius:0;margin-top:4px;padding-top:12px}
.kopf-aktionen{display:flex;gap:10px;align-items:center}
.kopf-aktionen .btn{padding:.75em 1.2em;font-size:.95rem}
.kopf-aktionen .btn-wa{padding:.75em;width:46px;height:46px}
.menu-knopf{display:none;margin-left:auto;width:48px;height:48px;border-radius:12px;border:1px solid var(--linie);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-knopf svg{width:24px;height:24px}

/* ---------- Kontakt-Dock (immer sichtbar) */
.dock{position:fixed;right:18px;bottom:22px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dock a{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;box-shadow:0 12px 28px -10px rgba(0,0,0,.4);border-radius:999px}
.dock .dock-wa{background:var(--wa);color:#fff;padding:12px 20px 12px 14px;font-size:1rem}
.dock .dock-wa svg{width:34px;height:34px}
.dock .dock-wa span small{display:block;font-weight:400;font-size:.8rem;opacity:.92;line-height:1.1}
.dock .dock-wa span{line-height:1.25}
.dock .dock-wa:hover{background:var(--wa-dunkel)}
.dock .dock-tel{background:#fff;color:var(--graphit);padding:10px 16px;font-size:.95rem;border:1px solid var(--linie)}
.dock .dock-tel svg{width:20px;height:20px;color:var(--bronze)}
.dock .dock-tel:hover{background:var(--sand)}
.dock .dock-wa::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--wa);opacity:0;animation:puls 3.2s ease-out 1.5s 3}
.dock .dock-wa{position:relative}
@keyframes puls{0%{opacity:.7;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
.aktionsleiste{display:none}

/* ---------- Hero Startseite */
.hero{position:relative;background:var(--sand)}
.hero-bild img{width:100%;height:clamp(260px,38vw,560px);object-fit:cover;object-position:center}
.hero-karte{position:relative;margin:-110px auto 0;max-width:var(--breite);padding:0 24px}
.hero-karte .innen{background:#fff;border-radius:22px;box-shadow:var(--schatten);padding:40px 44px;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.hero-karte .bewertung{font-weight:700;color:var(--bronze);margin-bottom:12px}
.sterne{display:block;color:var(--gold);letter-spacing:2px;font-size:1.15rem;line-height:1.2}
.hero-karte h1{margin-bottom:.35em}
.hero-karte p{color:var(--text-leise);font-size:1.12rem;margin:0}
.hero-karte .angebotsbox{background:var(--graphit-tief);color:#efe9e2;border-radius:16px;padding:26px}
.angebotsbox .gross{font-size:2.6rem;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-.03em}
.angebotsbox p{color:#efe9e2;font-size:1rem;margin:.6em 0 1.1em}
.angebotsbox .btn{width:100%}
.angebotsbox .klein{font-size:.85rem;margin:.9em 0 0;opacity:.85}
.angebotsbox .klein a{color:#fff}

/* ---------- Seitenkopf Unterseiten */
.seitenkopf{position:relative;background:var(--graphit-tief);color:#fff;overflow:hidden}
.seitenkopf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.seitenkopf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,26,21,.88) 0%,rgba(32,26,21,.55) 55%,rgba(32,26,21,.1) 100%)}
.seitenkopf .wrap{position:relative;z-index:1;padding-top:clamp(60px,9vw,120px);padding-bottom:clamp(48px,7vw,90px)}
.seitenkopf h1{color:#fff;max-width:18ch}
.seitenkopf p{max-width:52ch;font-size:1.12rem;color:#f1ebe4}
.seitenkopf .preis-hinweis{display:inline-block;background:var(--gold);color:var(--graphit-tief);font-weight:700;border-radius:999px;padding:.35em 1em;margin-bottom:18px;font-size:.95rem}
.brotkrumen{font-size:.88rem;margin-bottom:14px;color:#e8dfd5}
.brotkrumen a{color:#fff}

/* ---------- Abschnitte */
.abschnitt{padding:clamp(56px,8vw,104px) 0}
.abschnitt.sand{background:var(--sand)}
.zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.zwei.umgekehrt>:first-child{order:2}
.zwei img{border-radius:22px;width:100%;object-fit:cover}
.haken{list-style:none;padding:0}
.haken li{position:relative;padding-left:34px;margin-bottom:.55em}
.haken li::before{content:"";position:absolute;left:0;top:.42em;width:20px;height:20px;border-radius:50%;background:var(--taupe-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2386664a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.fussnote{font-size:.88rem;color:var(--text-leise)}
.zitat{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.4;color:var(--graphit-tief);font-weight:700;letter-spacing:-.01em;border-left:4px solid var(--taupe);padding-left:22px;margin:1.4em 0}

/* ---------- Behandlungs-Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kachel{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--text);border:1px solid var(--linie)}
.kachel img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .4s}
.kachel:hover img{transform:scale(1.04)}
.kachel .k-text{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.kachel h3{margin:0 0 .3em;font-size:1.2rem}
.kachel p{font-size:.95rem;color:var(--text-leise);margin:0 0 14px}
.kachel .mehr{margin-top:auto;font-weight:700;color:var(--bronze)}
.kachel .ab{position:absolute;top:14px;right:14px;background:var(--gold);color:var(--graphit-tief);font-weight:700;border-radius:999px;padding:.3em .85em;font-size:.9rem}
.kachel.bald .ab{background:#fff;color:var(--text-leise)}
.kopfzeile{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.kopfzeile h2{margin:0}
.kopfzeile p{margin:0;color:var(--text-leise);max-width:46ch}

/* ---------- Leistungen (Über uns) */
.leistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;list-style:none;padding:0;margin:28px 0 0}
.leistungen li{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:24px}
.leistungen strong{display:block;color:var(--graphit-tief);font-size:1.1rem;margin-bottom:.3em}
.leistungen span{color:var(--text-leise);font-size:.96rem}

/* ---------- Galerie */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galerie a{display:block;border-radius:14px;overflow:hidden}
.galerie img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .4s}
.galerie a:hover img{transform:scale(1.05)}
.galerie a:first-child{grid-column:span 2;grid-row:span 2}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(20,17,14,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.offen{display:flex}
.lightbox img{max-height:86vh;max-width:92vw;width:auto;border-radius:10px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:52px;height:52px;border-radius:50%;font-size:26px;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lightbox .zu{top:18px;right:18px}
.lightbox .zurueck{left:18px;top:50%;transform:translateY(-50%)}
.lightbox .weiter{right:18px;top:50%;transform:translateY(-50%)}

/* ---------- Vorher/Nachher */
.vergleich{position:relative;border-radius:22px;overflow:hidden;user-select:none;touch-action:pan-y;background:#ddd}
.vergleich img{width:100%;display:block}
.vergleich .vorher{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.vergleich .vorher img{height:100%;object-fit:cover}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vergleich .griff{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.vergleich .griff::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--graphit);display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:4px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.vergleich .marke{position:absolute;bottom:14px;background:rgba(43,44,46,.75);color:#fff;font-size:.85rem;font-weight:700;padding:4px 12px;border-radius:999px;pointer-events:none}
.vergleich .marke.l{left:14px}.vergleich .marke.r{right:14px}
.vergleich:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.vorher-nachher{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vorher-nachher figure{margin:0}
.vorher-nachher img{border-radius:16px;aspect-ratio:1;object-fit:cover;width:100%}
.vorher-nachher figcaption{font-size:.85rem;color:var(--text-leise);margin-top:6px}

/* ---------- Preiskarte */
.preise-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.preiskarte{background:#fff;border:1px solid var(--linie);border-radius:22px;padding:30px 30px 18px}
.preiskarte h2{font-size:1.6rem}
.preiskarte .hinweis{font-size:.92rem;color:var(--text-leise)}
.preisliste{list-style:none;margin:10px 0 6px;padding:0}
.preisliste li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name preis" "dauer knopf";column-gap:16px;row-gap:2px;padding:12px 8px;margin:0 -8px;border-bottom:1px solid var(--linie);border-radius:10px;align-items:center}
.preisliste li:last-child{border-bottom:0}
.preisliste .p-name{grid-area:name;font-weight:600;color:var(--graphit-tief);line-height:1.35}
.preisliste .p-dauer{grid-area:dauer;color:var(--text-leise);font-size:.88rem}
.preisliste .p-preis{grid-area:preis;font-weight:700;color:var(--bronze);text-align:right;white-space:nowrap}
.preisliste li.zwischen{display:block;border-bottom:0;padding-bottom:0}
.preisliste h3{font-size:.95rem;margin:16px 0 0;color:var(--text-leise);font-weight:700}
.preisliste .waehlen{grid-area:knopf;justify-self:end;font-family:inherit;font-weight:700;font-size:.85rem;border:1.5px solid var(--bronze);color:var(--bronze);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap}
.preisliste .waehlen:hover,.preisliste li.gewaehlt .waehlen{background:var(--bronze);color:#fff}
.preisliste li.gewaehlt{background:linear-gradient(90deg,var(--sand),transparent)}
.preisliste .angebot .p-name::after{content:"Kennenlernpreis";display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;background:var(--gold);color:var(--graphit-tief);padding:2px 8px;border-radius:999px;vertical-align:2px;white-space:nowrap}

/* ---------- Formulare */
.formkarte{background:#fff;border:1px solid var(--linie);border-radius:22px;padding:32px;box-shadow:var(--schatten)}
.formkarte h2{font-size:1.6rem;margin-bottom:.2em}
.formkarte>p{color:var(--text-leise)}
.feld{margin-bottom:16px}
.feld label,.feld .label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px;color:var(--graphit-tief)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld input[type=date],.feld input[type=time],.feld input[type=password],.feld select,.feld textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--porzellan);border:1.5px solid #d7cec3;border-radius:12px;padding:12px 14px;min-height:50px}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--bronze);background:#fff;box-shadow:0 0 0 3px rgba(134,102,74,.18)}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.pflicht{color:var(--bronze)}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400!important;font-size:.95rem!important;cursor:pointer;padding:10px 12px;border-radius:12px;border:1.5px solid #e2dbd2;margin-bottom:8px;background:var(--porzellan)}
.check:hover{border-color:var(--taupe)}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--bronze);flex:none}
.check:has(input:checked){border-color:var(--bronze);background:#fff}
.check.ds{border:0;padding:0;background:none}
.feldhinweis{font-size:.85rem;color:var(--text-leise);margin:6px 0 0}
.feldhinweis.warnung{color:#a4410e;font-weight:600}
.oeffnungshinweis{background:var(--sand);border-radius:12px;padding:12px 14px;font-size:.9rem;margin:4px 0 16px}
.oeffnungshinweis strong{display:block;color:var(--graphit-tief)}
.honig{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}
.form-aktionen{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.form-aktionen .oder{color:var(--text-leise);font-size:.9rem}
.meldung{border-radius:14px;padding:16px 18px;margin:0 0 18px;font-weight:600}
.meldung.ok{background:#e7f4ea;color:#1d5a2b;border:1px solid #b9dfc2}
.meldung.fehler{background:#fbe9e5;color:#8d2a14;border:1px solid #f0c3b7}
.meldung[hidden]{display:none}
.formular.gesendet .felder{display:none}
button[disabled]{opacity:.6;cursor:wait}

.direktkarte{background:var(--graphit-tief);color:#efe9e2;border-radius:22px;padding:30px}
.direktkarte h3{color:#fff;font-size:1.35rem}
.direktkarte p{font-size:.98rem}
.direktkarte .btn{width:100%;margin-bottom:10px}
.direktkarte .zeiten{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);font-size:.92rem}
.direktkarte .zeiten dt{font-weight:700;color:#fff}
.direktkarte .zeiten dd{margin:0 0 6px}

/* ---------- Schnellanfrage Startseite */
.schnell{background:var(--graphit-tief);color:#efe9e2;border-radius:26px;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
.schnell h2{color:#fff}
.schnell p{color:#e3dbd2}
.schnell .formkarte{box-shadow:none}
.schnell .feld-reihe{grid-template-columns:1.3fr 1fr}

/* ---------- Kontaktband (vor dem Fuß) */
.kontaktband{background:var(--sand);padding:clamp(56px,7vw,90px) 0}
.kontaktband h2{text-align:center;margin-bottom:.25em}
.kontaktband>.wrap>p{text-align:center;color:var(--text-leise);margin-bottom:34px}
.wege{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.weg{display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:28px;text-decoration:none;background:#fff;color:var(--graphit-tief);border:1px solid var(--linie);transition:transform .15s,box-shadow .15s}
.weg:hover{transform:translateY(-3px);box-shadow:var(--schatten);color:var(--graphit-tief)}
.weg svg{width:40px;height:40px;margin-bottom:8px}
.weg strong{font-size:1.3rem}
.weg span{color:var(--text-leise)}
.weg .nr{font-weight:700;font-size:1.1rem;color:var(--bronze)}
.weg.wa{background:var(--wa);border-color:var(--wa);color:#fff}
.weg.wa span,.weg.wa .nr{color:#fff}
.weg.wa:hover{background:var(--wa-dunkel);color:#fff}
.weg.tel svg,.weg.termin svg{color:var(--bronze)}

/* ---------- Kontaktseite */
.kontakt-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.fakten{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:14px}
.fakten li{display:flex;gap:16px;background:#fff;border:1px solid var(--linie);border-radius:18px;padding:20px}
.fakten svg{width:30px;height:30px;color:var(--bronze);flex:none;margin-top:2px}
.fakten strong{display:block;color:var(--graphit-tief)}
.zeiten-tabelle{border-collapse:collapse;width:100%}
.zeiten-tabelle td{padding:3px 0;vertical-align:top}
.zeiten-tabelle td:first-child{padding-right:16px;white-space:nowrap}
.zeiten-tabelle tr.heute td{font-weight:700;color:var(--bronze)}
.karte{border-radius:22px;overflow:hidden;background:var(--sand);min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--linie)}
.karte iframe{width:100%;height:460px;border:0;display:block}
.karte .karte-hinweis{max-width:42ch;padding:30px}
.karte .karte-hinweis p{font-size:.92rem;color:var(--text-leise)}

/* ---------- Rechtstexte */
.rechtstext{max-width:78ch}
.rechtstext h2{font-size:1.45rem;margin-top:1.6em}
.rechtstext h3{font-size:1.12rem;margin-top:1.3em}
.rechtstext p,.rechtstext li{overflow-wrap:anywhere}

/* ---------- Fuß */
.fuss{background:var(--graphit-tief);color:#d9d1c8;padding:64px 0 120px;font-size:.95rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:var(--gold)}
.fuss-raster{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:36px}
.fuss h3{color:#fff;font-size:1.05rem;margin-bottom:.8em}
.fuss .logo-hell{background:#fff;border-radius:14px;padding:12px 16px;display:inline-block;margin-bottom:16px}
.fuss .logo-hell img{width:140px}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:6px}
.fuss .sozial{display:flex;gap:10px;margin-top:14px}
.fuss .sozial a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.fuss .sozial a:hover{background:rgba(255,255,255,.2)}
.fuss .sozial svg{width:20px;height:20px}
.fuss-unten{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:.88rem}
.fuss-unten nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss-unten button{background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:0}
.fuss-unten button:hover{color:var(--gold)}

/* ---------- Einwilligung */
.einwilligung{position:fixed;left:18px;bottom:18px;z-index:250;max-width:440px;background:#fff;border-radius:18px;box-shadow:0 20px 50px -14px rgba(0,0,0,.45);padding:22px;border:1px solid var(--linie);font-size:.92rem}
.einwilligung[hidden]{display:none}
.einwilligung h2{font-size:1.1rem;margin-bottom:.4em}
.einwilligung p{margin-bottom:12px}
.einwilligung .optionen{display:none;margin:0 0 12px}
.einwilligung.details .optionen{display:block}
.einwilligung .optionen label{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.einwilligung .optionen input{width:18px;height:18px;margin-top:3px;accent-color:var(--bronze)}
.einwilligung .knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.einwilligung .btn{padding:.7em 1.1em;font-size:.9rem}

/* ---------- Responsiv */
@media (max-width:1080px){
  .kopf-aktionen .btn-termin span{display:none}
  .nav>a,.nav .unter>button{padding:10px 10px}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  body{font-size:16.5px}
  .hinweisleiste .angebot{display:none}
  .hinweisleiste .wrap{justify-content:center}
  .kopf .wrap{height:76px}
  .logo img{width:140px}
  .menu-knopf{display:inline-flex}
  .kopf-aktionen{display:none}
  .nav{position:fixed;top:118px;left:0;right:0;bottom:0;background:var(--porzellan);flex-direction:column;align-items:stretch;padding:16px 20px 120px;overflow:auto;display:none;margin:0;gap:2px}
  .nav.offen{display:flex}
  .nav>a,.nav .unter>button{font-size:1.1rem;padding:14px 12px;border-radius:12px;width:100%;justify-content:space-between}
  .untermenue{position:static;transform:none;width:auto;box-shadow:none;border:0;grid-template-columns:1fr;padding:4px 0 8px;background:transparent}
  .zwei,.preise-raster,.kontakt-raster,.schnell,.hero-karte .innen{grid-template-columns:1fr}
  .zwei.umgekehrt>:first-child{order:0}
  .hero-karte{margin-top:-60px}
  .hero-bild img{object-position:6% center;height:300px}
  .hero-karte .innen{padding:28px 24px;gap:24px}
  .kacheln{grid-template-columns:1fr 1fr}
  .wege{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(3,1fr)}
  .dock{display:none}
  .aktionsleiste{display:grid;grid-template-columns:1fr 1.25fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--linie);box-shadow:0 -8px 24px -12px rgba(0,0,0,.25);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .aktionsleiste a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;font-weight:700;font-size:.82rem;border-radius:14px;padding:8px 4px;color:var(--graphit)}
  .aktionsleiste svg{width:24px;height:24px}
  .aktionsleiste .al-wa{background:var(--wa);color:#fff}
  .aktionsleiste .al-termin{background:var(--bronze);color:#fff}
  .aktionsleiste .al-tel{background:var(--sand)}
  .einwilligung{left:10px;right:10px;bottom:84px;max-width:none}
  .fuss{padding-bottom:130px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .kacheln{grid-template-columns:1fr}
  .feld-reihe,.schnell .feld-reihe{grid-template-columns:1fr}
  .formkarte,.preiskarte,.direktkarte{padding:24px 20px}
  .galerie{grid-template-columns:1fr 1fr}
  .vorher-nachher{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr}
  .btn-reihe .btn{flex:1 1 100%}
}
@media print{.kopf,.dock,.aktionsleiste,.einwilligung,.hinweisleiste,.kontaktband{display:none!important}}