/* Kosmetik Team Visage – Website
   Farbwelt der bisherigen Seite: Beere #913c56 · Gold #c2a476 · Creme #f6f2ec · Anthrazit #202020 */
@font-face { font-family:"Open Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/open-sans-400.woff2") format("woff2"); }
@font-face { font-family:"Open Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/open-sans-600.woff2") format("woff2"); }
@font-face { font-family:"Open Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/open-sans-700.woff2") format("woff2"); }

:root {
  --berry:#913c56; --berry-d:#762f46; --gold:#c2a476; --gold-d:#b28d53; --gold-l:#d3be9d;
  --cream:#f6f2ec; --cream-2:#fcfaf7; --ink:#202020; --text:#3a3a3a; --muted:#6a6a6a; --line:#e6ddcd;
  --radius:14px; --wrap:1180px; --head-h:72px;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font:400 1rem/1.7 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:#fff; padding-bottom:64px; }
@media (min-width:900px) { body { padding-bottom:0; } }
img { max-width:100%; height:auto; display:block; }
a { color:var(--berry); text-underline-offset:3px; } a:hover { color:var(--berry-d); }
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 18px; }
.skip { position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:1000; } .skip:focus { left:8px; top:8px; }
.small { font-size:.85rem; } .hp { position:absolute; left:-9999px; }

/* Buttons */
.btn, .content a.btn { display:inline-block; background:var(--berry); color:#fff !important; text-decoration:none; font:700 .95rem/1.2 "Open Sans", sans-serif; letter-spacing:.03em; text-transform:uppercase; padding:14px 26px; border-radius:999px; border:2px solid var(--berry); cursor:pointer; transition:background .2s, transform .2s; text-align:center; }
.btn:hover, .content a.btn:hover { background:var(--berry-d); border-color:var(--berry-d); color:#fff !important; transform:translateY(-1px); }
.btn-sm { padding:9px 18px; font-size:.8rem; }
.btn-ghost, .content a.btn-ghost { background:transparent; color:var(--berry) !important; } .btn-ghost:hover { background:var(--berry); }
.btn-light { background:#fff; color:var(--berry) !important; border-color:#fff; } .btn-light:hover { background:var(--cream); border-color:var(--cream); color:var(--berry-d) !important; }
.content .btn h2, .content .btn h3 { margin:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; }

/* Hinweisleiste + Kopf */
.notice { background:var(--berry); color:#fff; text-align:center; padding:8px 14px; font-size:.9rem; }
.site-header { position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--line); }
.topbar { background:var(--cream); font-size:.82rem; color:var(--muted); display:none; }
.topbar-in { display:flex; justify-content:space-between; align-items:center; min-height:34px; }
.topbar-links { display:flex; gap:20px; } .topbar a { color:var(--text); text-decoration:none; font-weight:600; } .topbar a:hover { color:var(--berry); }
.head-in { display:flex; align-items:center; justify-content:space-between; min-height:var(--head-h); gap:12px; position:relative; }
.logo img { height:50px; width:auto; }
.head-cta { display:none; }
.burger { width:48px; height:48px; border:0; background:none; display:grid; place-content:center; gap:5px; cursor:pointer; margin-right:-8px; }
.burger span { display:block; width:26px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.main-nav { position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--line); box-shadow:0 14px 24px rgba(0,0,0,.08); display:none; max-height:calc(100vh - var(--head-h) - 20px); overflow:auto; }
.main-nav.open { display:block; }
.nav-list, .sub { list-style:none; margin:0; padding:0; }
.nav-list > li { display:flex; flex-wrap:wrap; align-items:stretch; border-bottom:1px solid var(--line); }
.nav-list a { display:block; padding:15px 18px; color:var(--ink); text-decoration:none; font-weight:600; text-transform:uppercase; font-size:.9rem; letter-spacing:.03em; flex:1; }
.nav-list a:hover, .nav-list li.active > a, .nav-list a[aria-current="page"] { color:var(--berry); }
.sub-toggle { width:56px; border:0; border-left:1px solid var(--line); background:var(--cream-2); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.sub-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.sub { display:none; width:100%; background:var(--cream-2); } .sub.open { display:block; }
.sub a { padding:13px 18px 13px 34px; font-weight:400; text-transform:none; font-size:.95rem; letter-spacing:0; border-top:1px solid var(--line); }

@media (min-width:900px) {
  .topbar { display:block; }
  .head-cta { display:inline-block; order:3; }
  .burger { display:none; }
  .head-in { flex-wrap:wrap; padding-top:10px; padding-bottom:0; }
  .logo { order:1; } .head-cta { order:2; margin-left:auto; }
  .logo img { height:58px; }
  .main-nav { position:static; display:block !important; order:4; width:100%; box-shadow:none; border:0; overflow:visible; max-height:none; margin-top:6px; }
  .nav-list { display:flex; justify-content:center; flex-wrap:wrap; gap:0 4px; border-top:1px solid var(--line); }
  .nav-list > li { position:relative; border:0; display:block; }
  .nav-list a { padding:15px 13px; font-size:.82rem; flex:none; }
  .nav-list > li.has-sub > a { padding-right:24px; }
  .sub-toggle { position:absolute; right:2px; top:0; height:100%; width:22px; border:0; background:none; pointer-events:none; }
  .sub { position:absolute; left:0; top:100%; min-width:270px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); box-shadow:0 14px 28px rgba(0,0,0,.12); display:block; opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s; z-index:5; }
  .nav-list li:hover > .sub, .nav-list li:focus-within > .sub { opacity:1; visibility:visible; transform:none; }
  .sub a { padding:12px 18px; }
  .sub a:hover { background:var(--cream); }
}

/* Hero (Startseite) */
.hero { position:relative; background:var(--cream); }
.hero-img img { width:100%; height:clamp(190px, 46vw, 560px); object-fit:cover; object-position:0 20%; }
.hero-card { background:var(--berry); color:#fff; padding:22px 20px; text-align:left; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.hero-title { margin:0; font:700 1.25rem/1.35 "Open Sans", sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.hero-in { padding:0; max-width:none; }
@media (min-width:720px) { .hero-in { display:none; } .hero-img img { object-position:center; height:auto; max-height:560px; } }

/* Inhalt */
.main { min-height:50vh; }
.crumbs { padding-top:16px; font-size:.85rem; color:var(--muted); } .breadcrumb a { color:var(--muted); } .breadcrumb a:hover { color:var(--berry); }
.content { padding-top:20px; padding-bottom:56px; }
.content > *:first-child { margin-top:0; }
.content h1 { color:var(--berry); font:700 clamp(1.5rem, 5.5vw, 2.4rem)/1.2 "Open Sans", sans-serif; text-transform:uppercase; letter-spacing:.01em; margin:.4em 0 .5em; overflow-wrap:anywhere; hyphens:auto; }
.content h1.page-title { margin-top:.6em; }
.content h2 { color:var(--berry); font:700 clamp(1.3rem, 4.2vw, 1.75rem)/1.3 "Open Sans", sans-serif; margin:1.5em 0 .5em; }
.content h3 { color:var(--ink); font:700 clamp(1.1rem, 3.4vw, 1.3rem)/1.35 "Open Sans", sans-serif; margin:1.4em 0 .4em; }
.content h4 { color:var(--ink); font:700 1.05rem/1.4 "Open Sans", sans-serif; margin:1.2em 0 .3em; }
.content p { margin:0 0 1em; }
.content ul, .content ol { padding-left:1.3em; margin:0 0 1.2em; } .content li { margin:.3em 0; }
.content ul li::marker { color:var(--gold-d); }
.content hr { border:0; height:1px; background:var(--line); margin:2em 0; }
.content img { border-radius:10px; margin:.4em 0 1em; }
.content blockquote { margin:1.4em 0; padding:14px 20px; border-left:4px solid var(--gold); background:var(--cream); font-style:italic; }
.content table { width:100%; border-collapse:collapse; margin:1.2em 0; display:block; overflow-x:auto; }
.content th, .content td { border:1px solid var(--line); padding:10px 12px; text-align:left; }
.content th { background:var(--cream); }
.content iframe, .content video { max-width:100%; border:0; }
.content .display h1, .content .display h2 { margin-top:.2em; }

/* Raster aus dem alten Seiteneditor */
.content .row { display:flex; flex-wrap:wrap; gap:0 24px; margin:0 0 1em; }
.content .row > [class*="col-"] { flex:1 1 100%; min-width:0; }
@media (min-width:768px) {
  .content .row > .col-6 { flex:1 1 calc(50% - 12px); max-width:calc(50% - 12px); }
  .content .row > .col-4 { flex:1 1 calc(33.333% - 16px); max-width:calc(33.333% - 16px); }
  .content .row > .col-3 { flex:1 1 calc(25% - 18px); max-width:calc(25% - 18px); }
  .content .row > .col-8 { flex:1 1 calc(66.666% - 8px); max-width:calc(66.666% - 8px); }
  .content .row > .col-5 { flex:1 1 calc(41.666% - 14px); max-width:calc(41.666% - 14px); }
  .content .row > .col-7 { flex:1 1 calc(58.333% - 10px); max-width:calc(58.333% - 10px); }
  .content .row > .col-9 { flex:1 1 calc(75% - 6px); max-width:calc(75% - 6px); }
  .content .row > .col-2 { flex:1 1 calc(16.666% - 20px); max-width:calc(16.666% - 20px); }
}
.content .col-12 > .col-12 { width:100%; }
.content .card { background:var(--cream); border:1px solid var(--line); border-top:4px solid var(--gold); border-radius:var(--radius); padding:22px 20px; margin:1.2em 0; }
.content .card h2, .content .card h3 { margin-top:.2em; }
.content .list { display:flex; gap:12px; align-items:flex-start; margin:0 0 .5em; } .content .list h3 { margin:0; }
.content img.full { width:100%; }

/* Galerie + Lightbox */
.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:1.2em 0; }
@media (min-width:640px) { .gallery { grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (min-width:1000px) { .gallery { grid-template-columns:repeat(4,1fr); } }
.gallery a { display:block; overflow:hidden; border-radius:10px; aspect-ratio:4/3; background:var(--cream); }
.gallery img { width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; transition:transform .4s; } .gallery a:hover img { transform:scale(1.05); }
.lb { position:fixed; inset:0; background:rgba(10,8,9,.92); z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.lb img { max-width:100%; max-height:88vh; border-radius:6px; margin:0; }
.lb button { position:absolute; background:rgba(255,255,255,.15); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:1.6rem; cursor:pointer; line-height:1; }
.lb button:hover { background:rgba(255,255,255,.3); }
.lb .lb-x { top:14px; right:14px; } .lb .lb-p { left:12px; top:50%; } .lb .lb-n { right:12px; top:50%; }

/* Startseite */
.content-home > .row > .col-12 > section, .content-home section { margin:0; }
.content-home { max-width:960px; }

/* Formular */
.form fieldset { border:1px solid var(--line); border-radius:var(--radius); padding:6px 18px 12px; margin:0 0 18px; background:var(--cream-2); }
.form legend { padding:0 8px; font-weight:700; color:var(--berry); }
.fgrid { display:grid; gap:0 18px; grid-template-columns:1fr; } @media (min-width:640px) { .fgrid { grid-template-columns:1fr 1fr; } }
.form label { display:block; font-weight:600; font-size:.9rem; margin:10px 0 4px; }
.form input:not([type=checkbox]), .form select, .form textarea { display:block; width:100%; margin-top:5px; font:inherit; font-weight:400; padding:12px 14px; border:1px solid #cfc3ac; border-radius:10px; background:#fff; color:var(--ink); min-height:48px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color:var(--berry); outline:3px solid rgba(145,60,86,.2); }
.form label.check { display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.form label.check input { width:22px; height:22px; margin:3px 0 0; min-height:0; flex:none; accent-color:var(--berry); }
.alert { padding:14px 18px; border-radius:12px; margin:0 0 18px; border:1px solid; }
.alert.ok { background:#e9f5ee; border-color:#a9d4b9; color:#1d5a37; } .alert.err { background:#fdecea; border-color:#f1b5b0; color:#8c1d18; }

/* Kontakt, Karte */
.contact-box { font-style:normal; line-height:1.9; }
.hours { list-style:none; padding:0; margin:0 0 1em; } .hours li { padding:3px 0; }
.map-consent { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); min-height:280px; display:grid; place-items:center; padding:20px; text-align:center; margin:1em 0; overflow:hidden; }
.map-consent iframe { width:100%; height:380px; border:0; display:block; }
.map-consent-box { max-width:520px; } .map-consent .btn { margin:4px; }

/* Fuß */
.site-footer { background:var(--ink); color:#d9d4cc; padding-top:44px; margin-top:20px; font-size:.95rem; }
.site-footer a { color:#fff; } .site-footer a:hover { color:var(--gold-l); }
.foot-grid { display:grid; gap:32px; grid-template-columns:1fr; } @media (min-width:760px) { .foot-grid { grid-template-columns:repeat(3,1fr); } }
.foot-h { color:var(--gold); font:700 .85rem/1.3 "Open Sans",sans-serif; text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px; }
.foot-links { list-style:none; margin:0; padding:0; } .foot-links li { margin:0; } .foot-links a { display:block; padding:7px 0; text-decoration:none; }
.foot-links a:hover { text-decoration:underline; }
.foot-social { display:flex; gap:16px; margin-top:12px; }
.foot-reviews { margin-top:28px; padding-top:18px; border-top:1px solid #3a3a3a; font-size:.9rem; }
.foot-reviews .btn-ghost { color:#fff !important; border-color:var(--gold); margin:0 8px; } .foot-reviews .btn-ghost:hover { background:var(--gold); }
.foot-bottom { margin-top:36px; padding-top:18px; padding-bottom:22px; border-top:1px solid #3a3a3a; font-size:.82rem; color:#9a948a; }

/* Mobile Schnellleiste */
.mobile-bar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom); }
.mobile-bar a { flex:1; text-align:center; padding:15px 6px; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); text-decoration:none; border-right:1px solid var(--line); }
.mobile-bar a.primary { background:var(--berry); color:#fff; border:0; flex:1.4; }
@media (min-width:900px) { .mobile-bar { display:none; } }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
@media print { .site-header, .mobile-bar, .site-footer { display:none; } }

/* Gutschein-Bestellformular */
.voucher { margin:1.5em 0; }
.voucher .tiles { display:grid; gap:10px; grid-template-columns:1fr; margin:10px 0 14px; }
@media (min-width:560px) { .voucher .tiles { grid-template-columns:1fr 1fr; } }
.voucher .tile { display:flex !important; gap:12px; align-items:flex-start; margin:0 !important; padding:14px 16px; border:2px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-weight:400 !important; }
.voucher .tile input { width:22px !important; height:22px; min-height:0 !important; margin:3px 0 0 !important; flex:none; accent-color:var(--berry); }
.voucher .tile span { display:flex; flex-direction:column; } .voucher .tile small { color:var(--muted); font-size:.85rem; }
.voucher .tile:has(input:checked) { border-color:var(--berry); background:#fbf3f6; box-shadow:0 0 0 3px rgba(145,60,86,.12); }
.voucher .vblock[hidden] { display:none; }
.voucher .chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px; }
.voucher .chip { padding:9px 16px; border:2px solid var(--gold); border-radius:999px; background:#fff; font:700 .9rem "Open Sans",sans-serif; cursor:pointer; color:var(--ink); }
.voucher .chip:hover, .voucher .chip.on { background:var(--berry); border-color:var(--berry); color:#fff; }
.voucher .radios { margin:10px 0; } .voucher .radios .lbl { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.voucher .radio { display:inline-flex !important; align-items:center; gap:8px; margin:0 18px 8px 0 !important; font-weight:400 !important; }
.voucher .radio input { width:20px !important; height:20px; min-height:0 !important; margin:0 !important; accent-color:var(--berry); }
.voucher .qty { max-width:220px; }
.voucher .item-preview { display:flex; gap:14px; align-items:center; margin:12px 0; padding:12px; background:var(--cream); border-radius:12px; }
.voucher .item-preview img { width:96px; height:96px; object-fit:cover; border-radius:10px; margin:0; flex:none; } .voucher .item-preview img[hidden] { display:none; }
.voucher .item-preview > div { display:flex; flex-direction:column; gap:2px; } .voucher .item-preview a { font-size:.9rem; }
.voucher .v-total { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 8px; padding:16px 20px; background:var(--cream); border:2px solid var(--gold); border-radius:12px; font-size:1.15rem; }
.voucher .v-total strong { color:var(--berry); font-size:1.4rem; }
.voucher .ferr { display:block; color:#8c1d18; font-size:.85rem; margin:-2px 0 8px; }

/* Cituro-Terminbuchung als Overlay */
.cit-ov { position:fixed; inset:0; z-index:3000; background:rgba(20,15,18,.72); display:flex; align-items:center; justify-content:center; padding:0; }
.cit-box { position:relative; background:#fff; width:100%; height:100%; display:flex; flex-direction:column; }
@media (min-width:760px) { .cit-ov { padding:24px; } .cit-box { max-width:980px; height:min(92vh,860px); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4); } }
.cit-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--berry); color:#fff; font-weight:700; }
.cit-bar a { color:#fff; font-size:.85rem; font-weight:400; margin-left:auto; margin-right:10px; }
.cit-x { width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; flex:none; }
.cit-x:hover { background:rgba(255,255,255,.32); }
.cit-frame { flex:1; width:100%; border:0; background:#fff; }
.cit-load { position:absolute; inset:60px 0 0; display:grid; place-items:center; color:var(--muted); pointer-events:none; }

.voucher .item-preview[hidden], .voucher .vblock[hidden] { display:none !important; }
body.cit-open { overflow:hidden; }

/* ProvenExpert-Siegel (nur nach Einwilligung vorhanden): schwebt am rechten Rand direkt unter dem festen Kopfbereich, beim Seitenaufruf also im Bild
   oberhalb von Textfeld und Inhalt; Desktop und Handy gleich. Die Höhe des Kopfbereichs liefert site.js als --hdr-h. Siegel verbreitert die Seite nicht. */
body > div.pe-pro-seal { top:calc(var(--hdr-h, 132px) + 14px) !important; bottom:auto !important; right:0 !important; left:auto !important; margin:0 !important; max-width:100vw !important; }
/* Desktop: Siegel auf 70 % verkleinert (ca. 95 × 153 px), fest am unteren rechten Rand. Handy/Tablet (unter 900 px) bleibt wie oben. */
@media (min-width:900px) {
  body > div.pe-pro-seal { top:auto !important; bottom:16px !important; right:0 !important; scale:.7 !important; transform-origin:bottom right !important; }
}
.opt { font-weight:400; color:var(--muted); font-size:.88em; }
/* Handy/Tablet (Schnellleiste sichtbar): Siegel direkt über der Leiste, rechts über „Termin buchen“; auf der Startseite zusätzlich --seal-lift (site.js) */
@media (max-width:899px) {
  .mobile-bar a { min-height:54px; }
  body > div.pe-pro-seal { top:auto !important; bottom:calc(55px + env(safe-area-inset-bottom, 0px) + var(--seal-lift, 0px)) !important; }
}


/* Cituro-Hinweis im Overlay */
.cit-body { flex:1; display:flex; flex-direction:column; position:relative; min-height:0; }
.cit-body .cit-frame { flex:1; }
.cit-body .cit-load { inset:0; }
.cit-consent { max-width:560px; margin:auto; padding:28px 22px; text-align:left; }
.cit-consent h3 { margin:0 0 .6em; color:var(--berry); } .cit-consent-btns { display:flex; flex-wrap:wrap; gap:10px; }

/* Consent-Manager */
.ktv-cb { position:fixed; left:12px; right:12px; bottom:12px; z-index:2500; max-width:640px; margin:0 auto; background:#fff; color:var(--text); border:1px solid var(--line); border-top:4px solid var(--gold); border-radius:14px; padding:18px 18px 16px; box-shadow:0 12px 40px rgba(0,0,0,.25); font-size:.92rem; line-height:1.55; }
.ktv-cb h2 { margin:0 0 .35em; font:700 1.1rem/1.3 "Open Sans",sans-serif; color:var(--ink); }
.ktv-cb p { margin:0 0 12px; }
.ktv-cb-btns, .ktv-cp-f { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:520px) { .ktv-cb-btns, .ktv-cp-f { grid-template-columns:1fr; } .ktv-cb { bottom:0; left:0; right:0; border-radius:14px 14px 0 0; max-height:88vh; overflow:auto; } }
.ktv-btn { font:700 .85rem/1.2 "Open Sans",sans-serif; padding:12px 10px; border-radius:10px; border:2px solid var(--berry); background:#fff; color:var(--berry); cursor:pointer; min-height:46px; }
.ktv-btn:hover { background:var(--berry); color:#fff; }
.ktv-cp-ov { position:fixed; inset:0; z-index:2600; background:rgba(20,15,18,.6); display:flex; align-items:center; justify-content:center; padding:12px; }
.ktv-cp { background:#fff; width:min(720px,100%); max-height:92vh; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.ktv-cp-h { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.ktv-cp-h h2 { margin:0; font:700 1.15rem "Open Sans",sans-serif; color:var(--ink); }
.ktv-x { width:44px; height:44px; border:0; background:none; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--muted); }
.ktv-cp-b { padding:14px 18px; overflow:auto; flex:1; font-size:.92rem; line-height:1.55; }
.ktv-cp-f { padding:12px 18px; border-top:1px solid var(--line); }
.ktv-cat { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 12px; background:var(--cream-2); }
.ktv-cat-h { display:flex; justify-content:space-between; align-items:center; gap:10px; } .ktv-cat h3 { margin:0; font:700 1rem "Open Sans",sans-serif; color:var(--ink); }
.ktv-cat p { margin:.3em 0 .6em; color:var(--muted); font-size:.85rem; } .ktv-always { font-size:.78rem; font-weight:700; color:var(--berry); }
.ktv-svc { border-top:1px solid var(--line); padding:8px 0 2px; }
.ktv-sw { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; }
.ktv-sw input { position:absolute; opacity:0; width:1px; height:1px; }
.ktv-sw-t { width:44px; height:26px; border-radius:999px; background:#cfc6b4; position:relative; flex:none; transition:background .2s; }
.ktv-sw-t::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; }
.ktv-sw input:checked + .ktv-sw-t { background:var(--berry); } .ktv-sw input:checked + .ktv-sw-t::after { transform:translateX(18px); }
.ktv-sw input:focus-visible + .ktv-sw-t { outline:3px solid var(--gold); outline-offset:2px; }
.ktv-svc details { margin:4px 0 4px 54px; font-size:.83rem; } .ktv-svc summary { cursor:pointer; color:var(--berry); }
.ktv-svc dl { margin:.5em 0 0; } .ktv-svc dt { font-weight:700; margin-top:.5em; } .ktv-svc dd { margin:0; overflow-wrap:anywhere; color:var(--text); }
body.ktv-cp-open { overflow:hidden; }
.ktv-cf { position:fixed; left:10px; bottom:12px; z-index:85; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--berry); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.2); display:grid; place-items:center; }
.ktv-cf:hover { background:var(--berry); color:#fff; }
@media (max-width:899px) { .ktv-cf { bottom:calc(66px + env(safe-area-inset-bottom)); width:40px; height:40px; } }
.foot-bottom p { margin:0; } .foot-consent { margin-top:6px !important; } .foot-consent a { color:#d9d4cc; }

/* Blockierte Inhalte (Platzhalter) */
.consent-block { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:1em 0; text-align:center; }
.consent-ph p { margin:.4em 0; } .consent-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.consent-direct { font-size:.85rem; }
.consent-loaded iframe { width:100%; min-height:380px; border:0; display:block; }
.map-consent { min-height:0; }

/* Spamschutz ALTCHA (selbst gehostet) */
.altcha-wrap { margin:14px 0 6px; max-width:380px; }
altcha-widget { --altcha-color-active:#913c56; --altcha-color-base:#fff; --altcha-color-text:#202020; --altcha-border-radius:10px; --altcha-border-width:1px; --altcha-color-border:#cfc3ac; --altcha-max-width:100%; }

/* Karte: Google-Maps-Link bleibt unter Platzhalter und Karte sichtbar */
.map-wrap { margin:1em 0; } .map-wrap .consent-block { margin:0; } .map-link { margin:0 0 20px; text-align:center; }



/* Konfigurierbare Formulare */
.ktv-form .ff { grid-column:1 / -1; min-width:0; }
@media (min-width:640px) { .ktv-form .ff.ff-half { grid-column:auto; } }
.ktv-form fieldset.nolegend { border:0; background:none; padding:0; }
.ktv-form .ff > label:not(.check):not(.choice), .ktv-form .ff .lbl { display:block; font-weight:600; font-size:.9rem; margin:10px 0 4px; }
.ktv-form .choices { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:4px 22px; margin-top:6px; }
.ktv-form .choices .choice-other { grid-column:1 / -1; }
.ktv-form label.choice { display:flex; gap:9px; align-items:center; font-weight:400; margin:4px 0; cursor:pointer; }
.ktv-form label.choice input { width:22px; height:22px; min-height:0; margin:0; flex:none; accent-color:var(--berry); }
.ktv-form .ff.has-error input:not([type=checkbox]):not([type=radio]), .ktv-form .ff.has-error select, .ktv-form .ff.has-error textarea { border-color:#8c1d18; }
.ktv-form .ferr { display:block; color:#8c1d18; font-size:.85rem; font-weight:600; margin:4px 0 2px; }
.ktv-form .ferr:empty { display:none; }
.ktv-form .fhelp, .ktv-form .fcount { display:block; font-size:.82rem; color:#6b6558; margin-top:4px; }
.ktv-form .fcount { text-align:right; }
.ktv-form .finfo { font-size:.92rem; color:#4a463e; }
.ktv-form .finfo p { margin:8px 0; }
/* „Sonstiges“ mit Textfeld */
.ktv-form .choice-other { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.ktv-form .choice-other .other-text { width:min(100%, 260px); }
/* Digitale Unterschrift */
.ktv-form .sig { margin-top:6px; }
.ktv-form .sig-pad, .ktv-form .sig-done { position:relative; border:2px dashed #b9a98a; border-radius:14px; background:#fff; }
.ktv-form .sig-pad { height:190px; touch-action:none; }
.ktv-form .sig-pad canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:12px; cursor:crosshair; touch-action:none; }
.ktv-form .sig-x { position:absolute; left:16px; bottom:34px; color:#b9a98a; font-size:1rem; pointer-events:none; }
.ktv-form .sig-pad::after { content:""; position:absolute; left:40px; right:16px; bottom:38px; border-bottom:1px solid #d8cdb7; pointer-events:none; }
.ktv-form .sig-done { min-height:120px; display:flex; align-items:center; justify-content:center; padding:10px; cursor:pointer; }
.ktv-form .sig-done[hidden] { display:none; }
.ktv-form .sig-done img { max-width:100%; max-height:150px; }
.ktv-form .sig-empty { color:#6b6558; font-size:.95rem; }
.ktv-form .sig-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.ktv-form .ff.has-error .sig-pad, .ktv-form .ff.has-error .sig-done { border-color:#8c1d18; }
html.sig-lock, html.sig-lock body { overflow:hidden; }
.sig-modal { position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; background:var(--cream, #f6f2ec); padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap:8px; }
.sig-modal-bar { display:flex; flex-direction:column; gap:6px; }
.sig-modal-title { margin:0; font-size:1rem; color:var(--berry, #913c56); }
.sig-rotate { display:none; align-items:center; gap:10px; margin:0; padding:8px 12px; border-radius:12px; background:#fff; border:1px solid #d8cdb7; font-size:.92rem; line-height:1.35; }
.sig-rotate svg { flex:none; color:var(--berry, #913c56); }
@media (orientation:portrait) { .sig-rotate { display:flex; } }
.sig-modal-pad { position:relative; flex:1; min-height:0; border:2px dashed #b9a98a; border-radius:14px; background:#fff; touch-action:none; }
.sig-modal-pad canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:12px; touch-action:none; }
.sig-modal-pad .sig-x { position:absolute; left:16px; bottom:30px; color:#b9a98a; font-size:1.1rem; pointer-events:none; }
.sig-modal-pad::after { content:""; position:absolute; left:44px; right:16px; bottom:34px; border-bottom:1px solid #d8cdb7; pointer-events:none; }
.sig-modal-actions { display:flex; gap:10px; justify-content:flex-end; }
.sig-modal-actions .btn { margin:0; flex:1 1 0; min-width:0; max-width:220px; padding:12px 8px; font-size:.9rem; letter-spacing:0; white-space:nowrap; }
@media (orientation:landscape) and (max-height:520px) { .sig-modal-bar { flex-direction:row; align-items:center; justify-content:space-between; } .sig-modal { gap:6px; } }
/* Mehrstufige Formulare: Fortschritt und Navigation */
.ktv-form .fstep[hidden] { display:none !important; }
.ktv-form .fprogress { margin:0 0 14px; }
.ktv-form .fprogress-text { margin:0 0 6px; font-weight:600; color:var(--berry); font-size:.95rem; }
.ktv-form .fprogress-bar { height:8px; border-radius:99px; background:#e7dfd2; overflow:hidden; }
.ktv-form .fprogress-bar span { display:block; height:100%; width:0; background:var(--berry); border-radius:99px; transition:width .25s ease; }
.ktv-form .fnav { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-top:18px; }
.ktv-form.is-steps .fnav .btn { min-width:130px; }
.ktv-form .fstep-final { margin-top:6px; }
.ktv-form.is-steps .fstep-final .small { margin:12px 0 0; }
@media (max-width:639px) { .ktv-form .fnav { flex-direction:column-reverse; align-items:stretch; } .ktv-form .fnav .btn { margin-inline:0; width:100%; } }
/* Icons (Inline-SVG) */
.ico { width:1.1em; height:1.1em; vertical-align:-.2em; flex:none; }
.ico-wa { color:#25d366; }
.contact-box .ico { margin-right:4px; }
.topbar-links a { display:inline-flex; align-items:center; gap:6px; }
.mobile-bar a { display:flex; align-items:center; justify-content:center; gap:7px; }
.mobile-bar a .ico { width:1.25em; height:1.25em; vertical-align:0; }
.mobile-bar a.primary .ico { color:#fff; }
.voucher [hidden] { display:none !important; }

/* Gutschein: Zahlungsarten, Bestellübersicht */
.voucher .radio.pay { display:flex !important; align-items:flex-start; margin:0 0 10px !important; padding:12px 14px; border:1px solid #cfc3ac; border-radius:10px; background:#fff; }
.voucher .radio.pay input { margin-top:3px !important; }
.voucher .radio.pay small { display:block; color:#6b6558; font-weight:400; margin-top:2px; }
.voucher .v-summary { margin:20px 0 10px; padding:16px 18px; background:var(--cream-2, #faf6ee); border:1px solid var(--line); border-radius:12px; }
.voucher .v-summary h3 { margin:0 0 8px; font-size:1.05rem; color:var(--berry); }
.voucher .v-summary dl { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0 0 6px; }
.voucher .v-summary dt { font-weight:600; }
.voucher .v-summary dd { margin:0; }
.voucher .v-summary .v-total { margin:12px 0 8px; }.voucher .radio.pay[hidden] { display:none !important; }


/* =====================================================================
   Seitenbausteine (ab v0.21): einheitliches Raster, Bänder, Karten, Zitate
   Farben/Schrift unverändert (Beere, Gold, Creme, Anthrazit, Open Sans)
   ===================================================================== */
body { overflow-x:clip; }
.content-home { max-width:var(--wrap); }
.content { padding-top:8px; }
.sec { position:relative; isolation:isolate; padding-block:clamp(38px, 6.5vw, 76px); }
.sec > :first-child { margin-top:0 !important; } .sec > :last-child { margin-bottom:0 !important; }
.sec-alt::before, .sec-berry::before { content:""; position:absolute; inset:0 calc(50% - 50vw); z-index:-1; }
.sec-alt::before { background:var(--cream); }
.sec-berry::before { background:var(--berry); }
.sec-berry, .sec-berry h2, .sec-berry p, .sec-berry .eyebrow { color:#fff; }
.sec-berry a:not(.btn) { color:#fff; }
.sec-head { max-width:760px; margin:0 0 clamp(22px, 3.5vw, 38px); }
.sec-head.center { margin-inline:auto; text-align:center; }
.content .sec h2, .content .sec-head h2 { margin:0 0 .45em; font-size:clamp(1.45rem, 3.6vw, 2.05rem); line-height:1.22; text-wrap:balance; color:var(--berry); }
.sec-berry h2 { color:#fff !important; }
.content .sec h3 { text-wrap:balance; }
.eyebrow { margin:0 0 .7em !important; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); }
.lead { font-size:clamp(1.05rem, 2vw, 1.2rem); line-height:1.65; color:var(--ink); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:1.5em; }

/* Seitenkopf */
.pg-hero { display:grid; gap:26px; align-items:center; padding-block:clamp(10px, 2.5vw, 28px) clamp(34px, 5vw, 60px); }
@media (min-width:880px) { .pg-hero.has-img { grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:clamp(32px, 5vw, 76px); } }
.content .pg-hero h1 { margin:0 0 .4em; font-size:clamp(1.65rem, 4.4vw, 2.8rem); line-height:1.13; letter-spacing:.005em; text-wrap:balance; }
.pg-hero p { max-width:62ch; }
.pg-hero figure { margin:0; }
.pg-hero img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:22px; margin:0; box-shadow:0 26px 50px -26px rgba(32,32,32,.5); }
/* Oberster Block mit Foto: kompakter (Bild niedriger, weniger Abstand) */
@media (min-width:880px) {
  .pg-hero.has-img { padding-block:clamp(6px, 1.5vw, 18px) clamp(24px, 3vw, 40px); gap:clamp(24px, 3.5vw, 52px); }
  .pg-hero.has-img img { aspect-ratio:16 / 10; max-height:300px; }
  .content .pg-hero.has-img h1 { font-size:clamp(1.5rem, 3.2vw, 2.15rem); }
  .pg-hero.has-img p { margin-bottom:.6em; }
}
@media (min-width:900px) and (max-width:1439px) { .nav-list a { padding-inline:9px; font-size:.78rem; letter-spacing:.015em; } .nav-list > li.has-sub > a { padding-right:20px; } }
.tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0 !important; margin:0 0 1.2em !important; }
.tags li { margin:0; padding:6px 14px; border:1px solid var(--gold); border-radius:999px; background:#fff; font-size:.84rem; font-weight:600; color:var(--ink); }

/* Karten und Raster */
.cards { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.cards.c2 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cards.c4 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.tile { min-width:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(20px, 3vw, 28px); box-shadow:0 1px 2px rgba(32,32,32,.04), 0 16px 32px -24px rgba(32,32,32,.4); }
.sec-alt .tile { border-color:transparent; }
.content .tile h3 { margin:0 0 .45em; font-size:1.13rem; line-height:1.32; color:var(--ink); }
.tile > :last-child { margin-bottom:0; }
.tile p { margin:0 0 .8em; }
.tile ul { margin-bottom:.8em; }
.ic { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--cream); color:var(--berry); margin-bottom:14px; }
.sec-alt .ic { background:#fff; }
.ic .ico { width:24px; height:24px; vertical-align:0; }
.checks { list-style:none; padding:0 !important; margin:0 0 1.2em; display:grid; gap:11px; }
.checks li { position:relative; margin:0; padding-left:34px; }
.checks li::before { content:""; position:absolute; left:0; top:.18em; width:22px; height:22px; border-radius:50%; background:var(--berry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (min-width:760px) { .checks.cols { grid-template-columns:1fr 1fr; gap:11px 36px; } }
.split { display:grid; gap:clamp(24px, 5vw, 64px); align-items:center; }
@media (min-width:880px) { .split { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .split.rev > :first-child { order:2; } .split.top { align-items:start; } }
.split figure { margin:0; } .split img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:22px; margin:0; box-shadow:0 26px 50px -26px rgba(32,32,32,.5); }
.text-block > p { max-width:68ch; }

/* Ergebnisse als Icon-Kacheln */
.results { display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); }
@media (min-width:760px) { .results { grid-template-columns:repeat(4, 1fr); gap:16px; } }
.res { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:22px 12px; background:#fff; border:1px solid var(--line); border-radius:18px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; hyphens:auto; }
.sec-alt .res { border-color:transparent; }
.res .ic { margin:0; background:var(--cream); } .sec-alt .res .ic { background:var(--cream); }

/* Preise */
.prices { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items:stretch; }
.price { display:flex; flex-direction:column; gap:10px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(20px, 3vw, 28px); box-shadow:0 1px 2px rgba(32,32,32,.04), 0 16px 32px -24px rgba(32,32,32,.4); }
.sec-alt .price { border-color:transparent; }
.content .price h3 { margin:0; font-size:1.12rem; line-height:1.32; color:var(--ink); }
.price p { margin:0; }
.price .amount { margin:2px 0 0; font-size:2rem; font-weight:700; line-height:1.1; color:var(--berry); }
.price .amount small { font-size:.9rem; font-weight:600; color:var(--muted); }
.price .note { font-size:.9rem; color:var(--muted); }
.price .btn { margin-top:auto; align-self:flex-start; }
.price > .btn { margin-top:14px; }
.rows { list-style:none; padding:0 !important; margin:0 !important; }
.rows li { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0; padding:10px 0; border-top:1px solid var(--line); }
.rows li:first-child { border-top:0; padding-top:2px; }
.rows li > span { min-width:0; } .rows small { display:block; color:var(--muted); font-size:.85rem; }
.rows strong { white-space:nowrap; color:var(--berry); }
.plist { list-style:none; padding:0 !important; margin:0; display:grid; gap:10px 16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.plist li { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:14px; font-weight:600; color:var(--ink); }
.plist strong { color:var(--berry); white-space:nowrap; }
.sec-alt .plist li { border-color:transparent; }
.notice-box { padding:16px 20px; border-radius:14px; background:#fff; border:1px solid var(--gold); font-weight:600; color:var(--ink); margin:0 0 22px; }

/* Ablauf, Eckdaten */
.steps { list-style:none; counter-reset:step; padding:0 !important; margin:0; display:grid; gap:14px; }
.steps li { counter-increment:step; position:relative; margin:0; padding:22px 24px 22px 86px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.sec-alt .steps li { border-color:transparent; }
.steps li::before { content:counter(step); position:absolute; left:24px; top:20px; width:44px; height:44px; border-radius:50%; background:var(--berry); color:#fff; font-weight:700; font-size:1.1rem; display:grid; place-items:center; }
.content .steps h3 { margin:0 0 .35em; font-size:1.12rem; color:var(--ink); }
.steps p { margin:0 0 .7em; max-width:75ch; } .steps p:last-child { margin-bottom:0; }
.facts { display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); margin:0; }
@media (min-width:760px) { .facts { grid-template-columns:repeat(4, 1fr); gap:16px; } }
.fact { padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.sec-alt .fact { border-color:transparent; }
.fact dt { margin:0 0 4px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d); }
.fact dd { margin:0; font-size:1.08rem; font-weight:700; line-height:1.35; color:var(--ink); }

/* Zitate (Kundenmeinungen) */
.quotes { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items:stretch; }
.quote { position:relative; margin:0; padding:62px 28px 26px; display:flex; flex-direction:column; gap:16px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 1px 2px rgba(32,32,32,.04), 0 18px 36px -26px rgba(32,32,32,.4); }
.sec-alt .quote { border-color:transparent; }
.quote::before { content:"\201E"; position:absolute; top:6px; left:22px; font:700 6.6rem/1 Georgia, "Times New Roman", serif; color:var(--gold); }
.quote::after { content:"\201C"; position:absolute; right:22px; bottom:-14px; font:700 5rem/1 Georgia, "Times New Roman", serif; color:var(--gold-l); opacity:.55; pointer-events:none; }
.content .quote blockquote { margin:0; padding:0; border:0; background:none; font-style:normal; }
.quote blockquote p { margin:0 0 .6em; font-size:1.02rem; line-height:1.68; color:var(--ink); } .quote blockquote p:last-child { margin-bottom:0; }
.quote figcaption { margin-top:auto; padding-top:4px; font-weight:700; color:var(--berry); }
.quote figcaption::before { content:""; display:inline-block; width:28px; height:2px; margin-right:10px; vertical-align:middle; background:var(--gold); }
.quote.lg { padding:68px clamp(26px, 4vw, 44px) 30px; } .quote.lg blockquote p { font-size:clamp(1.15rem, 2.2vw, 1.4rem); line-height:1.55; }

/* Bildreihen */
.photos { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.photos img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:18px; margin:0; }
.photos.p2 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.photos.certs img { aspect-ratio:auto; object-fit:contain; background:#fff; border:1px solid var(--line); padding:8px; }
.portrait { margin:0; text-align:center; } .portrait img { width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:22px; margin:0 0 12px; box-shadow:0 26px 50px -26px rgba(32,32,32,.5); }
.portrait figcaption { font-weight:700; color:var(--ink); } .portrait small { display:block; font-weight:400; color:var(--muted); font-size:.9rem; }
.motto { margin:0; padding:clamp(22px, 4vw, 36px); border-radius:22px; background:var(--berry); color:#fff; } .motto p { margin:0 0 .5em; font-size:clamp(1.2rem, 2.6vw, 1.6rem); font-weight:700; line-height:1.35; text-transform:uppercase; letter-spacing:.02em; } .motto small { color:var(--gold-l); font-size:.95rem; }
.cta { text-align:center; } .cta h2 { margin-bottom:.5em; }
.sec-berry .btn { background:#fff; color:var(--berry) !important; border-color:#fff; } .sec-berry .btn:hover { background:var(--cream); border-color:var(--cream); }
.stack > * + * { margin-top:1.2rem; }
.link-more { display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; }
.link-more::after { content:"\2192"; transition:transform .2s; } .link-more:hover::after { transform:translateX(4px); }

/* Kontaktbereich */
.contact-grid { display:grid; gap:clamp(24px, 4vw, 48px); }
@media (min-width:900px) { .contact-grid { grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); align-items:start; } }
.contact-grid .tile { padding:clamp(22px, 3vw, 34px); }
.contact-grid h2, .contact-grid h3 { margin-top:0; }
.content .sec-berry h2 + p { max-width:60ch; margin-inline:auto; }
.site-footer { margin-top:0; }
/* Feinschliff Seitenbausteine */
.pg-intro { padding-top:clamp(6px, 2vw, 22px); }
.content .pg-hero h2 { margin:.1em 0 .6em; font-size:clamp(1.2rem, 2.6vw, 1.6rem); line-height:1.3; color:var(--ink); }
.pg-hero:not(.has-img) > div:not(.split) { max-width:880px; }
.content .tile h2 { margin:0 0 .5em; font-size:clamp(1.2rem, 2.3vw, 1.45rem); line-height:1.25; }
.tile img.thumb { width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:14px; margin:0 0 18px; }
.amount-line { margin:0 !important; padding:12px 16px; background:var(--cream); border-radius:12px; font-weight:600; color:var(--ink); }
.sec-alt .amount-line { background:var(--cream); }
.price.wide { grid-column:1 / -1; }
.price.wide .checks { margin-bottom:.4em; }
.price .amount-line { font-size:1.05rem; }
.linkcard { display:block; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s; }
.linkcard:hover { transform:translateY(-3px); box-shadow:0 24px 40px -22px rgba(32, 32, 32, .45); }
.linkcard h2 { color:var(--berry); }
.split.top > .tile { align-self:start; }
.sec .gallery { margin:0; }
.cta .btn { margin-top:4px; }
/* Korrekturen */
.content .stack > * + * { margin-top:clamp(22px, 3.5vw, 36px); }
@media (min-width:900px) { .cards.c3 { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.sec .text-block.lead { max-width:70ch; }.quote::before { top:-12px; font-size:6rem; }
.quote { padding-top:58px; }
.quote.lg { padding-top:64px; }
/* Zitate: großes Anführungszeichen im Fluss, Spalten statt gleich hoher Karten */
.quotes { display:block; columns:3 300px; column-gap:20px; }
.quote { break-inside:avoid; margin:0 0 20px; padding:24px 28px 26px; gap:6px; }
.quote::before { content:"\201C"; position:static; display:block; height:46px; margin:0 0 -4px; font:700 6rem/.8 Georgia, "Times New Roman", serif; color:var(--gold); }
.quote::after { content:"\201D"; right:22px; bottom:-18px; }
.quote.lg { padding-top:28px; } .quote.lg::before { height:54px; font-size:7rem; }
.split > .quote.lg { margin:0; }.cards.c2 { align-items:stretch; }
/* Gleich große Blöcke: Karten und Panels in einer Reihe sind gleich hoch, „Mehr erfahren“-Links sitzen unten */
.cards > .tile, .duo > .panel { display:flex; flex-direction:column; }
.cards > .tile > p:has(> .link-more), .duo > .panel > p:has(> .link-more) { margin-top:auto; padding-top:.8em; }
.cards > .tile > .btn, .duo > .panel > p:has(> .btn):last-child { margin-top:auto; }
/* Standard-Textlayout der Boxen (siehe Projektwissen): Fakten-Kacheln sitzen unten, darunter der Button; Einleitungssatz normal (nicht fett) */
.duo > .panel > dl.facts.c2 { margin-top:auto; margin-bottom:0; }
.duo > .panel > dl.facts.c2 ~ p:has(> .btn):last-child { margin-top:1.1em; margin-bottom:0; }
.duo > .panel > .fact-box { margin-bottom:1em; font-size:.95rem; }
.panel > .lead { margin:0 0 1em; }
.panel > .checks { margin-bottom:1em; }
.panel > p { margin:0 0 1em; }
/* Breiter Kasten im Querformat: Bild links, Text rechts (mobil untereinander) */
.panel-wide .split { align-items:center; gap:clamp(22px, 4vw, 52px); }
.panel-wide .split img { aspect-ratio:2.07 / 1; object-fit:cover; border-radius:16px; box-shadow:none; }
.panel-wide .eyebrow { margin-bottom:.5em !important; }
.panel-wide h2 { margin-top:0 !important; }


/* Zweispaltige Gegenüberstellung (z. B. HautStart-Behandlung | Haut-Sprechstunde): Desktop links/rechts, mobil untereinander */
.duo { display:grid; gap:clamp(20px, 3vw, 32px); align-items:stretch; }
@media (min-width:980px) { .duo { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.panel { min-width:0; background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(20px, 3vw, 34px); box-shadow:0 1px 2px rgba(32, 32, 32, .04), 0 18px 36px -26px rgba(32, 32, 32, .4); scroll-margin-top:calc(var(--hdr-h, 130px) + 14px); }
.sec-alt .panel { border-color:transparent; }
.panel > :last-child { margin-bottom:0; }
.panel img.thumb { width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:16px; margin:0 0 20px; }
.content .panel h2 { margin:0 0 .6em; font-size:clamp(1.3rem, 2.4vw, 1.6rem); line-height:1.25; }
.content .panel h3 { margin:1.6em 0 .6em; font-size:1.15rem; color:var(--ink); }
.content .panel h4 { margin:0 0 .3em; font-size:1.05rem; color:var(--ink); }
.panel .facts.c2 { grid-template-columns:repeat(2, 1fr); margin:0 0 .6em; }
.panel .steps li { padding:18px 18px 18px 68px; background:var(--cream); border:0; }
.panel .steps li::before { left:16px; top:16px; width:38px; height:38px; font-size:1rem; }
.panel .fact { background:var(--cream); border:0; }
.fact-box { margin:0 0 .4em; padding:18px 20px; border-radius:16px; background:var(--cream); }
.fact-box .ic { background:#fff; } .fact-box p { margin:0 0 .7em; } .fact-box p:last-child { margin-bottom:0; }
/* Korrektur: Eckdaten-Raster darf nie breiter werden als der Bildschirm */
.facts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:760px) { .facts { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.panel .facts.c2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.fact dd { overflow-wrap:anywhere; hyphens:auto; }
/* Ablauf als zwei Spalten über die volle Breite (balanciert, Karten bleiben ungeteilt) */
.steps.cols { display:block; }
@media (min-width:900px) { .steps.cols { columns:2; column-gap:18px; } }
.steps.cols li { break-inside:avoid; margin:0 0 14px; }
/* Handy/Tablet: Buttons immer zentriert */
@media (max-width:899px) {
  .actions { justify-content:center; }
  .content p:has(> .btn), .content div:has(> .btn:only-child), .tile p:has(> .btn), .panel p:has(> .btn), .cta { text-align:center; }
  .price .btn, .price > .btn, .tile > .btn { align-self:center; margin-inline:auto; }
  .hero-card { align-items:center; text-align:center; }
  .form .btn, .ktv-form .btn, .voucher .btn[type=submit], .alert .btn { display:block; margin-inline:auto; }
  .consent-block .btn, .map-consent .btn { margin-inline:auto; }
}

/* Interne Verlinkung am Seitenende */
.related-list { list-style:none; margin:0 !important; padding:0 !important; display:flex; flex-wrap:wrap; gap:10px; }
.related-list li { margin:0; }
.related-list a { display:inline-block; padding:10px 18px; background:#fff; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-weight:600; text-decoration:none; transition:border-color .2s, color .2s; }
.related-list a:hover { border-color:var(--berry); color:var(--berry); }
@media (max-width:899px) { .related-list { justify-content:center; } }
/* =====================================================================
   Design-Vorgabe (v0.36): FAQ-Akkordeon, Übersichtskarten, Textseiten, Abschlussband
   ===================================================================== */
/* Seitenkopf: einheitliche Überschriftengröße auf allen Seiten */
.content .pg-hero h1, .content .pg-hero.has-img h1 { font-size:clamp(1.6rem, 3.8vw, 2.45rem); }
.pg-hero .eyebrow { margin-bottom:.6em !important; }
.pg-hero .actions { margin-top:1.2em; }
.pg-hero .tags { margin-bottom:1em !important; }

/* FAQ: aufklappbare Fragen (<details class="faq">), ohne JavaScript */
.faq-list { display:grid; gap:10px; max-width:860px; }
details.faq { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(32,32,32,.04); }
.sec-alt details.faq { border-color:transparent; }
details.faq > summary { position:relative; cursor:pointer; list-style:none; padding:16px 54px 16px 20px; font-weight:700; line-height:1.4; color:var(--ink); }
details.faq > summary::-webkit-details-marker { display:none; }
details.faq > summary::after { content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font:400 1.7rem/1 "Open Sans", sans-serif; color:var(--berry); }
details.faq[open] > summary::after { content:"\2212"; }
details.faq > summary:hover { color:var(--berry); }
details.faq > .faq-a { padding:0 20px 18px; }
details.faq > .faq-a p { margin:0 0 .7em; } details.faq > .faq-a p:last-child { margin-bottom:0; }

/* Übersichtskarten (Anti-Aging, Behandlungsübersicht): Bild, Name, ein Satz, „Mehr erfahren“ */
.cards.hub > .tile { padding:0; overflow:hidden; }
.cards.hub > .tile > img.thumb { margin:0; border-radius:0; aspect-ratio:16 / 10; }
.cards.hub > .tile > h3, .cards.hub > .tile > p { margin-inline:clamp(18px, 2.6vw, 24px); }
.cards.hub > .tile > h3 { margin-top:18px; }
.cards.hub > .tile > p:last-child { margin-bottom:clamp(18px, 2.6vw, 24px); }
.cards.hub > .tile > p:has(> .link-more) { margin-top:auto; padding-top:.6em; }

/* Textseiten (Rechtstexte): schmale Lesespalte, klare Abstufung der Überschriften, Inhaltsverzeichnis */
.prose { max-width:76ch; }
.prose h2 { margin:2em 0 .5em; font-size:clamp(1.25rem, 2.6vw, 1.55rem); line-height:1.25; color:var(--berry); scroll-margin-top:calc(var(--hdr-h, 130px) + 14px); }
.prose h2:first-child, .prose .toc + h2 { margin-top:0; }
.prose h3 { margin:1.6em 0 .4em; font-size:1.08rem; line-height:1.35; color:var(--ink); }
.prose p, .prose li { max-width:none; }
.prose p { margin:0 0 1em; }
.prose ul, .prose ol { margin:0 0 1em; padding-left:1.3em; } .prose li { margin-bottom:.35em; }
.toc { margin:0 0 2.2em; padding:18px 22px; background:var(--cream); border-radius:16px; }
.toc-h { margin:0 0 .5em !important; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); }
.toc ol { margin:0; padding-left:1.3em; columns:1; } @media (min-width:700px) { .toc ol { columns:2; column-gap:32px; } }
.toc li { margin:0 0 .3em; break-inside:avoid; } .toc a { text-decoration:none; font-weight:600; }

/* Abschlussband (Beere): überall gleich – Überschrift, ein Satz, ein Button */
.sec-berry .cta h2 { color:#fff !important; margin-bottom:.4em; }
.sec-berry .cta p { max-width:58ch; margin-inline:auto; }
.sec-berry .cta p:has(> .btn) { margin-top:1.3em; }
.sec-berry .cta .btn { margin-top:0; }

/* Preiskarten: Name, Preis, Leistung, Button unten – in einer Reihe gleich hoch */
.price .btn { align-self:flex-start; }
.sec-head p:not(.eyebrow) { color:var(--text); }
.photos.fit img { aspect-ratio:auto; object-fit:contain; background:#fff; border:1px solid var(--line); padding:6px; }
.prose { overflow-wrap:break-word; } .prose a { overflow-wrap:anywhere; }

/* Formulare: Sichtbarkeitsregeln, Zusammenfassung, Unterschriftshöhe (v0.37) */
.ktv-form .is-off { display:none !important; }
.ktv-form .final-text { margin:0 0 14px; font-weight:600; color:var(--ink); }
.ktv-form .fsummary { margin:0 0 18px; padding:14px 18px; background:var(--cream); border-radius:14px; max-height:46vh; overflow:auto; }
.ktv-form .fsummary h3 { margin:12px 0 4px; font-size:.95rem; color:var(--berry); } .ktv-form .fsummary h3:first-child { margin-top:0; }
.ktv-form .fsummary dl { margin:0; display:grid; gap:4px 0; }
.ktv-form .fsummary .srow { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:10px; padding:4px 0; border-top:1px solid var(--line); font-size:.9rem; }
.ktv-form .fsummary dt { font-weight:600; color:var(--ink); overflow-wrap:anywhere; } .ktv-form .fsummary dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:560px) { .ktv-form .fsummary .srow { grid-template-columns:1fr; gap:0; } }
.ktv-form .sig-pad { height:var(--sig-h, 190px); }
.ktv-form .ff-info.finfo { white-space:normal; }

/* Admin-Vorschau eines Formulars: kompakt, Hinweis direkt über der Überschrift */
.preview-wrap { padding-block:14px 56px; }
.preview-banner { margin:0 0 14px; padding:10px 14px; border-radius:12px; background:#fbf3e4; border:1px solid var(--gold); color:var(--ink); font-size:.92rem; }
.preview-wrap .page-title { margin:0 0 .6em; }

/* Textseiten und Formulare: kleinerer Abstand zwischen Seitenkopf und erstem Text */
.sec.pg-text { padding-bottom:0; }
.sec.pg-text .pg-hero { padding-bottom:0; }
.sec.pg-text + .sec { padding-top:clamp(14px, 2.5vw, 26px); }

/* Seiten mit Formular: ProvenExpert-Siegel immer ausgeblendet */
body.has-form > div.pe-pro-seal { display:none !important; }

/* Unterschriftenfeld: dezentes Foto (Hand mit Stift am Tablet, Pexels-Lizenz) hinter der Schreibflaeche; die Unterschrift selbst wird nur aus dem Canvas exportiert */
.ktv-form .sig-pad, .sig-modal-pad { background:linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)), url(../img/unterschrift-tablet.jpg) center / cover no-repeat #fff; }

/* Ein gemeinsamer Buchungsbutton unter nebeneinanderstehenden Boxen */
.sec .btn-row { display:flex; justify-content:center; margin-top:clamp(22px, 3.5vw, 36px); }
.sec .btn-row .btn { margin:0; }

/* Zwei Boxen mit gleichem Aufbau: alle Zeilen (Bild, Texte, Hinweis, Fakten) liegen links und rechts auf gleicher Hoehe (8 Zeilen je Box) */
@media (min-width:980px) {
  .duo.duo-aligned { row-gap:0; }
  .duo.duo-aligned > .panel { display:grid; grid-row:span 8; grid-template-rows:subgrid; row-gap:0; align-content:start; }
  .duo.duo-aligned > .panel > dl.facts.c2 { margin-top:0; align-content:start; grid-auto-rows:1fr; }
  .duo.duo-aligned .fact { min-height:7.4rem; }
}
/* Breiter Kasten mit hoeherem Bild (3:2 statt 2,07:1) */
.panel-wide.panel-tall .split img { aspect-ratio:3 / 2; }

/* Sprungmarken auf Ueberschriften: nicht unter dem festen Kopfbereich verschwinden */
h2[id] { scroll-margin-top:calc(var(--hdr-h, 130px) + 14px); }

/* Seitenkopf aller Seiten: einheitlich kleiner Abstand zwischen Ueberschrift und erstem Abschnitt (Textseiten: siehe .pg-text) */
.sec.pg-intro:not(.pg-text) { padding-bottom:clamp(18px, 3vw, 34px); }
.sec.pg-intro:not(.pg-text) .pg-hero { padding-bottom:0; }
.sec.pg-intro:not(.pg-text) + .sec { padding-top:clamp(28px, 4.5vw, 52px); }