/*
 * Dearpiece – gemeinsame Bausteine für alle Inhaltsseiten (docs/branding/corporate-design.md, 10.10.2026).
 * Farben, Schrift (Inter), Abstandsskala 4, 8, 12, 16, 24, 32, 48, 72, Ecken (Karten 12, Knöpfe 8, Bilder 4), Schatten nur unter Bildern.
 * Pro Ansicht ein violetter Hauptknopf, Zweitknöpfe als Umriss.
 */
:root{
  --paper:#EFECE6; --wall:#E5E0D7; --ink:#14141A; --ink-soft:#5E5E6B; --line:#D7D1C6; --line-strong:#8C8C94;
  --accent:#5233E0; --accent-hover:#432AB8; --accent-press:#39249D; --tint:rgba(82,51,224,.10); --err:#B3261E; --ok:#1F7A4D;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r-card:12px; --r-ctrl:8px; --r-img:4px; --shadow:0 18px 40px -18px rgba(20,20,26,.42);
  --page:1120px; --text:680px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Segoe UI",system-ui,sans-serif; font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:3px} a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--page); margin:0 auto; padding:0 var(--s5)}
@media (max-width:640px){ .wrap{padding:0 var(--s4)} }

/* Schrift */
h1,h2,h3{color:var(--ink); font-weight:700; margin:0}
h1{font-size:clamp(36px,5vw,56px); line-height:1.05; letter-spacing:-.035em}
h2{font-size:clamp(26px,3.2vw,36px); line-height:1.12; letter-spacing:-.03em}
h3{font-size:20px; line-height:1.3; letter-spacing:-.01em; font-weight:600}
p{margin:0 0 var(--s4)} p:last-child{margin-bottom:0}
.lead{font-size:clamp(18px,1.6vw,20px); line-height:1.5; color:var(--ink-soft); max-width:var(--text)}
.small{font-size:15px; color:var(--ink-soft)}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.measure{max-width:var(--text)}

/* Knöpfe */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:48px; padding:0 var(--s5); border-radius:var(--r-ctrl); border:1.5px solid transparent; font:inherit; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.btn-primary{background:var(--accent); color:#fff} .btn-primary:hover{background:var(--accent-hover); color:#fff} .btn-primary:active{background:var(--accent-press)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink); font-weight:500} .btn-ghost:hover{background:rgba(20,20,26,.06); border-color:var(--ink); color:var(--ink)} /* Zweitknopf: Umriss in Tinte, nicht fett (Regel 44) */

/* Knöpfe beim Darüberfahren (Niklas 12.10.2026): heben sich leicht an und bekommen Schatten, beim Drücken zurück. Ohne Bewegung, wenn das System es so will. */
.btn{transition:transform .18s ease, box-shadow .18s ease, background .2s, border-color .2s, color .2s}
.btn:not([disabled]):hover{transform:translateY(-2px) scale(1.02); box-shadow:0 10px 22px -10px rgba(20,20,26,.45)}
.btn-primary:not([disabled]):hover{box-shadow:0 12px 26px -10px rgba(82,51,224,.55)}
.btn:not([disabled]):active{transform:translateY(0) scale(.99); box-shadow:none}
@media (prefers-reduced-motion:reduce){ .btn,.btn:hover,.btn:active{transform:none!important; transition:none} }
.btn-sm{min-height:40px; padding:0 var(--s4); font-size:15px} .btn-lg{min-height:56px; padding:0 var(--s6); font-size:17px}
@media (max-width:640px){ .btn-lg{width:100%} .btn-sm{min-height:44px} }

/* Kopf und Fuß */
.site-head{border-bottom:1px solid var(--line); background:var(--paper)}
.site-head .wrap{display:flex; align-items:center; gap:var(--s5); min-height:72px}
.site-head .logo{display:block; flex:none} .site-head .logo img{height:26px; width:auto}
.site-nav{display:flex; gap:var(--s5); margin-left:auto; font-size:17px; font-weight:500}
.site-nav a{color:var(--ink-soft); text-decoration:none; padding:var(--s2) 0; border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink)} .site-nav a[aria-current]{color:var(--ink); border-bottom-color:var(--ink)}
/* Kopfmenü (Niklas 11.10.2026, Regel 46): am Rechner eine Zeile, am Handy Menü zum Aufklappen. Verwaltung (.shell-nav) bricht weiter um. */
.head-rechts{display:flex; align-items:center; gap:var(--s1); flex:none}
.kopf-nav + .head-rechts{margin-left:var(--s3)}
.head-ico{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer; text-decoration:none}
.head-ico:hover{background:var(--wall)} .head-ico[aria-current]{box-shadow:inset 0 0 0 1.5px var(--ink)} .head-ico[hidden]{display:none}
.head-n{position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--ink); color:var(--paper); font-size:11px; font-weight:600; line-height:18px; text-align:center}
.head-cta{margin-left:var(--s2)} .head-menu{display:none}
@media (max-width:980px){
  .kopf{position:relative} .kopf .wrap{min-height:64px}
  .kopf .kopf-nav{display:none} .kopf .head-rechts{margin-left:auto} .kopf .head-menu{display:inline-grid}
  .kopf.menu-offen .kopf-nav{display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%; z-index:60; margin:0; padding:var(--s2) var(--s5) var(--s4); background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(20,20,26,.08)}
  .kopf.menu-offen .kopf-nav a{display:flex; align-items:center; min-height:52px; padding:0; border-bottom:1px solid var(--line); font-size:18px; color:var(--ink)}
  .kopf.menu-offen .kopf-nav a:last-child{border-bottom:0} .kopf.menu-offen .kopf-nav a[aria-current]{font-weight:600}
}
@media (max-width:900px){ .site-head:not(.kopf) .wrap{flex-wrap:wrap; min-height:0; padding-top:var(--s4); padding-bottom:var(--s3); row-gap:var(--s3)} .site-head:not(.kopf) .site-nav{order:3; width:100%; margin-left:0; flex-wrap:wrap; gap:var(--s2) var(--s4)} .site-head:not(.kopf) .btn{margin-left:auto} }
.site-foot{border-top:1px solid var(--line); margin-top:var(--s8); padding:var(--s6) 0 var(--s7); font-size:15px; color:var(--ink-soft)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-bottom:var(--s4)} .site-foot a{color:var(--ink-soft); text-decoration:none} .site-foot a:hover{color:var(--ink)}

/* Seitenkopf und Abschnitte */
.page-hero{padding:var(--s7) 0 var(--s6)} .page-hero h1{margin:var(--s3) 0 var(--s4); max-width:860px}
.crumb{font-size:14px; color:var(--ink-soft)} .crumb a{color:var(--ink-soft); text-decoration:none} .crumb a:hover{color:var(--ink); text-decoration:underline}
.section{margin-top:var(--s8)} .section-head{margin-bottom:var(--s6); max-width:var(--text)} .section-head h2{margin-bottom:var(--s3)} .section-head p{color:var(--ink-soft)}
@media (max-width:640px){ .page-hero{padding:var(--s6) 0 var(--s5)} .section{margin-top:var(--s7)} .section-head{margin-bottom:var(--s5)} }

/* Karte */
.card{background:var(--wall); border-radius:var(--r-card); padding:var(--s5)}
.card-line{border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s5); background:var(--paper)}

/* Bild in fester Proportion, nie beschnitten */
.frame{position:relative; aspect-ratio:2/3; background:var(--wall); border-radius:var(--r-card); display:flex; align-items:center; justify-content:center; padding:var(--s5)}
.frame.q{aspect-ratio:3/2}
.frame img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--r-img); box-shadow:var(--shadow)}
.frame .tag{position:absolute; left:var(--s3); top:var(--s3); font-size:13px; font-weight:600; padding:2px var(--s3); border-radius:999px; background:var(--paper); color:var(--ink)}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}

/* Nummerierte Schritte */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); counter-reset:step; list-style:none; margin:0; padding:0}
.steps>li{counter-increment:step; display:flex; flex-direction:column; gap:var(--s3)}
.steps>li::before{content:counter(step); display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line-strong); font-weight:600; font-size:16px}
.steps p{margin:0}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* Ablauf als Leiste */
.flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); list-style:none; margin:0; padding:0}
.flow>li{border-top:2px solid var(--ink); padding-top:var(--s4)} .flow b{display:block; margin-bottom:var(--s2)} .flow span{font-size:16px}
@media (max-width:900px){ .flow{grid-template-columns:1fr 1fr; row-gap:var(--s5)} } @media (max-width:560px){ .flow{grid-template-columns:1fr} }

/* Zweispaltig */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:center}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:var(--s5)} }

/* Preise */
.price-cards{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
@media (max-width:760px){ .price-cards{grid-template-columns:1fr} }
.price-card h3{margin-bottom:var(--s1)} .price-card .small{margin-bottom:var(--s4)}
.price-list{list-style:none; margin:0 0 var(--s5); padding:0}
.price-list li{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--line)}
.price-list li:last-child{border-bottom:1px solid var(--line)} .price-list .size{font-weight:600} .price-list .note{display:block; font-size:14px; color:var(--ink-soft); font-weight:400}
.price-list .price{font-weight:700; font-size:18px; white-space:nowrap}
.badge{display:inline-block; font-size:12px; font-weight:600; padding:2px var(--s2); border-radius:999px; background:var(--tint); color:var(--accent-press); margin-left:var(--s2); vertical-align:2px}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)} .checks li{padding-left:28px; position:relative} .checks li::before{content:"✓"; position:absolute; left:0; font-weight:700}

/* Filter-Chips */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6)}
.chip{min-height:40px; padding:0 var(--s4); border:1.5px solid var(--line-strong); border-radius:999px; background:transparent; font:inherit; font-size:15px; font-weight:500; color:var(--ink); cursor:pointer}
.chip:hover{border-color:var(--ink)} .chip[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 10%, var(--paper)); color:var(--ink); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
@media (pointer:coarse){ .chip{min-height:44px} }

/* Beispiele */
.examples{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7) var(--s6)}
@media (max-width:860px){ .examples{grid-template-columns:1fr} }
.example .compare{margin-bottom:var(--s4)} .example h3{margin-bottom:var(--s3)}
.facts{display:grid; grid-template-columns:max-content 1fr; gap:var(--s1) var(--s3); margin:0 0 var(--s3); font-size:15px} .facts dt{color:var(--ink-soft)} .facts dd{margin:0}

/* Fragen */
.faq{max-width:780px}
.faq details{border-top:1px solid var(--line)} .faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:var(--s5) 40px var(--s5) 0; font-weight:600; font-size:18px; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:var(--s2); top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--ink-soft)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-soft); padding:0 0 var(--s5); max-width:var(--text)}

/* Abschluss */
.cta-band{margin-top:var(--s8); background:var(--wall); border-radius:var(--r-card); padding:var(--s7) var(--s5); text-align:center}
.cta-band h2{margin-bottom:var(--s3)} .cta-band p{color:var(--ink-soft); margin:0 auto var(--s5); max-width:520px}
.ph{background:var(--tint); padding:0 var(--s1); border-radius:4px}

.example .frame{aspect-ratio:4/5}

/* Handy (10.10.2026): Kopf kompakt, Navigation ohne Laufleiste, Bilder mit weniger Rand */
@media (max-width:640px){
  .kopf .head-cta{display:none}
  .site-head:not(.kopf) .btn{display:none}
  .site-head:not(.kopf) .site-nav{flex-wrap:wrap; overflow:visible; white-space:nowrap; gap:var(--s2) var(--s4); font-size:15px}
  .site-head:not(.kopf) .site-nav a{padding:var(--s2) 0; min-height:44px; display:inline-flex; align-items:center}
  .frame{padding:var(--s3)}
  .compare{gap:var(--s3)}
  .page-hero h1{font-size:34px}
  .cta-band{padding:var(--s6) var(--s4)}
  .card,.card-line{padding:var(--s4)}
}
@media (max-width:640px){ .chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--s4)); padding-right:var(--s4)} .chips::-webkit-scrollbar{display:none} .chip{flex:none} }

/* Inhaltsseiten aus Markdown (inhalte.js, Stand 11.10.2026, Regeln in docs/branding/design-regeln.md Abschnitt „Inhaltsseiten“)
   Aufbau wie die Startseite: Hero mit Text links und Vorher-Nachher rechts, Abschnitte mit 72 px Rhythmus, jeder zweite auf der Fläche Wall,
   Bild neben Text im Wechsel, Fließtext 18 px in Tinte, Lesebreite 720 px, Tabellen scrollen nur in ihrem Kasten. */
.inh-seite{}
.inh-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:center; padding:var(--s7) 0 var(--s8)}
.inh-hero.ohne-bild{grid-template-columns:minmax(0,760px)}
.inh-hero h1{font-size:clamp(36px,4.6vw,56px); line-height:1.04; letter-spacing:-.035em; margin:var(--s3) 0 var(--s4)}
.inh-hero .lead{font-size:clamp(18px,1.5vw,20px); color:var(--ink-soft); margin:0 0 var(--s6); max-width:560px}
.hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2)} .hero-cta small{font-size:14px; color:var(--ink-soft)}
.inh-hero-media .inh-bild{margin:0}
@media (max-width:860px){ .inh-hero{grid-template-columns:1fr; gap:var(--s6); padding:var(--s5) 0 var(--s7)} .hero-cta{align-items:stretch} .hero-cta small{text-align:center} }

/* Abschnitte */
.inhalt{max-width:none}
.inh-sek{padding:var(--s8) 0}
.inh-sek.inh-intro{padding:0 0 var(--s5)}
.inh-band{background:var(--wall); box-shadow:0 0 0 100vmax var(--wall); clip-path:inset(0 -100vmax)}
.inh-schmal{max-width:720px}
.inh-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:center}
.inh-split.rev .inh-media{order:-1}
@media (max-width:860px){ .inh-sek{padding:var(--s7) 0} .inh-split{grid-template-columns:1fr; gap:var(--s5)} .inh-split.rev .inh-media{order:0} }
.inhalt h2{font-size:clamp(28px,3.2vw,40px); line-height:1.1; letter-spacing:-.03em; margin:0 0 var(--s5)}
.inhalt h3{font-size:21px; line-height:1.3; margin:var(--s6) 0 var(--s2)} .inhalt h2+h3{margin-top:0}
.inhalt p, .inhalt li{font-size:19px; line-height:1.65; color:var(--ink)}
.inhalt p{margin:0 0 var(--s4)}
.inhalt ul,.inhalt ol{margin:0 0 var(--s5); padding-left:var(--s5)} .inhalt li{margin-bottom:var(--s2)} .inhalt li::marker{color:var(--ink-soft)}
.inhalt b{font-weight:600}
.knopf{margin:var(--s5) 0 0}

/* Bilder: Vorher-Nachher-Regler, Einzelbild, drei nebeneinander */
.inh-bild{margin:var(--s6) 0}
.inh-bild figcaption{font-size:15px; color:var(--ink-soft); margin-top:var(--s3); line-height:1.5}
.inh-split .inh-bild, .inh-hero .inh-bild{margin:0}
.vn{position:relative; width:100%; overflow:hidden; border-radius:var(--r-card); box-shadow:var(--shadow); background:var(--wall); touch-action:pan-y}
.vn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none}
.vn-vor{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vn-griff{position:absolute; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; background:var(--paper); pointer-events:none}
.vn-griff::after{content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--paper); color:var(--ink); display:grid; place-items:center; font-weight:700; font-size:15px; box-shadow:0 4px 14px rgba(20,20,26,.25); letter-spacing:2px}
.vn-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.vn-range:focus-visible+*, .vn:focus-within .vn-griff::after{outline:3px solid var(--accent); outline-offset:3px}
.vn .tag, .vn-einzel .tag{position:absolute; top:var(--s3); font-size:13px; font-weight:600; padding:2px var(--s3); border-radius:999px; background:var(--paper); color:var(--ink); z-index:2; pointer-events:none}
.vn .vn-l{left:var(--s3)} .vn .vn-r{right:var(--s3)} .vn-einzel .tag{left:var(--s3)}
.vn-einzel{position:relative} .vn-einzel img{width:100%; height:auto; border-radius:var(--r-card); box-shadow:var(--shadow)}
.vn-drei{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4)}
@media (max-width:560px){ .vn-drei{gap:var(--s2)} .vn-drei .tag{font-size:12px; padding:1px var(--s2); top:var(--s2); left:var(--s2)} }
.inhalt li .inh-bild{max-width:480px; margin:var(--s3) 0 var(--s4)}
.frame img.gerahmt{border:8px solid var(--rahmen); border-radius:0}

/* Tabellen */
.tbl{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper)}
.tbl table{border-collapse:collapse; width:100%; font-size:16px; line-height:1.45}
.tbl th,.tbl td{text-align:left; vertical-align:top; padding:var(--s3) var(--s4); border-top:1px solid var(--line)}
.tbl thead th{border-top:0; background:var(--wall); font-weight:600} .tbl tbody th{font-weight:600}
.tbl tbody tr:first-child>*{border-top:0} .tbl thead+tbody tr:first-child>*{border-top:1px solid var(--line)}
.inh-band .tbl{background:var(--paper)}

/* Fragen auf eigener Fläche */
.inh-faq .faq{max-width:none}
.faq .antwort{color:var(--ink-soft); padding:0 0 var(--s5); max-width:var(--text)} .faq .antwort p{margin:0 0 var(--s3); font-size:17px; color:var(--ink-soft)}

/* Hinweis „nicht live“ (nur am eigenen Rechner) */
.nicht-live{margin:var(--s5) 0 0; padding:var(--s3) var(--s4); border:1px solid var(--line-strong); border-radius:var(--r-ctrl); background:var(--wall); font-size:15px}

/* Kacheln (Übersichten, Passt auch) */
.passt h2{font-size:clamp(28px,3.2vw,40px); letter-spacing:-.03em; margin-bottom:var(--s5)}
.kacheln{list-style:none; margin:0 0 var(--s4); padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s5)}
.kachel{display:flex; flex-direction:column}
.kachel img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-img); margin-bottom:var(--s4)} .kachel h3{margin-bottom:var(--s2); font-size:19px} .kachel h3 a{color:var(--ink); text-decoration:none} .kachel h3 a::after{content:""; position:absolute; inset:0} .kachel{position:relative} .kachel:hover{border-color:var(--line-strong)} .kachel h3 a:hover{text-decoration:underline}
.inh-schmal .vn.hoch, .inh-schmal .vn-einzel.hoch{max-width:460px}
.inh-galerie{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s5); align-items:start; margin:var(--s6) 0} .inh-galerie .inh-bild{margin:0} .inh-galerie .vn.hoch, .inh-galerie .vn-einzel.hoch{max-width:none}

/* Über uns: Grundsätze als Karten, Foto im Hero nicht höher als 520 px */
.grundsaetze{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4)} .grundsaetze li{margin:0} .grundsaetze h3{margin:0 0 var(--s2)} .grundsaetze p{font-size:17px; margin:0}
@media (max-width:900px){ .grundsaetze{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .grundsaetze{grid-template-columns:1fr} }
.ueber-foto{max-width:380px; justify-self:end} .ueber-foto img{width:100%; height:auto} @media (max-width:860px){ .ueber-foto{justify-self:start; max-width:300px} }
.inhalt ul.grundsaetze{padding-left:0; margin:0} .inhalt + .cta-band, .passt + .cta-band{margin-top:var(--s5)}

/* Gutschein (gutschein.js, 11.10.2026): Kauf in Schritten, Ändern-Seite. Auswahlkarten nach Farbsystem: gewählt = Violett-Rahmen und 10 % Tönung */
.gs{max-width:720px; padding:var(--s6) 0 var(--s7)}
.gs h1{font-size:clamp(34px,4.4vw,52px); line-height:1.05; letter-spacing:-.035em; margin:var(--s3) 0 var(--s4)}
.gs h2{font-size:clamp(22px,2.4vw,28px); margin:var(--s7) 0 var(--s3)}
.gs .lead{margin:0 0 var(--s6)}
.gs-form fieldset{border:0; padding:0; margin:0 0 var(--s6)}
.gs-form legend{display:flex; align-items:center; gap:var(--s3); font-size:21px; font-weight:700; letter-spacing:-.01em; margin-bottom:var(--s4); padding:0}
.gs-nr{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-strong); font-size:15px; font-weight:600}
.gs-wahl{display:grid; gap:var(--s3)} .gs-wahl.zwei{grid-template-columns:1fr 1fr} .gs-wahl.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){ .gs-wahl.zwei, .gs-wahl.drei{grid-template-columns:1fr} }
.gs-karte{position:relative; display:block; cursor:pointer}
.gs-karte input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.gs-karte span{display:flex; flex-direction:column; gap:2px; min-height:72px; justify-content:center; padding:var(--s3) var(--s4); border:1.5px solid var(--line-strong); border-radius:var(--r-card); background:transparent}
.gs-karte b{font-weight:600} .gs-karte small{font-size:15px; color:var(--ink-soft)}
.gs-karte:hover span{border-color:var(--ink)}
.gs-karte input:checked+span{background:color-mix(in srgb, var(--accent) 10%, var(--paper)); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.gs-karte input:focus-visible+span{outline:3px solid var(--accent); outline-offset:3px}
.gs-preis{margin:var(--s4) 0 0; font-size:18px} .gs-preis b{font-size:22px}
.gs-termin{margin-top:var(--s4)} .gs-termin[hidden], #abs[hidden]{display:none}
.gs-zeile{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)} @media (max-width:420px){ .gs-zeile{grid-template-columns:1fr} }
.gs label.f{display:block; margin:var(--s4) 0 var(--s2); font-weight:600}
.gs input[type=text], .gs input[type=email], .gs input[type=date], .gs input[type=time], .gs textarea{width:100%; min-height:48px; font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--r-ctrl); padding:10px 14px}
.gs input:focus-visible, .gs textarea:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.gs .muted{color:var(--ink-soft); font-size:15px; margin:var(--s2) 0 0}
.gs .legal{border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4); margin:var(--s6) 0; background:var(--wall); font-size:15px} .gs .legal p{margin:0 0 var(--s2)} .gs .legal p:last-child{margin:0}
.gs .err{color:var(--err); font-weight:600; min-height:0} .gs .err:empty{display:none} .gs .ok{color:var(--ok); font-weight:600}
.gs-kaufen{width:100%}
.gs-code{font-weight:800; letter-spacing:.04em; font-size:clamp(24px,3vw,32px); margin:var(--s2) 0 var(--s5)} h1 .gs-code{display:block; font-size:.5em; margin:var(--s2) 0 0; color:var(--ink-soft)}
.gs-knoepfe{display:flex; flex-wrap:wrap; gap:var(--s3)} @media (max-width:560px){ .gs-knoepfe .btn{width:100%} }
.gs-mail{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s5); margin:var(--s3) 0 0}
.gs form:not(.gs-form) label.f+input{max-width:none}
.gs button.btn{border:0}
.gs-form > .btn{margin-top:var(--s5)}
h1,h2,h3{overflow-wrap:break-word; hyphens:auto}
.karten-gross{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin-top:var(--s5)} .karten-gross .kachel .inh-bild{margin:0 0 var(--s4)} .karten-gross .kachel p{font-size:17px} .karten-gross .kachel h3{margin-top:0} .inh-split+.inh-split, .inh-schmal+.inh-split, .inh-split+.inh-schmal{margin-top:var(--s7)}
@media (max-width:640px){ .inh-hero h1, .gs h1, .page-hero h1, .shell-main h1{font-size:clamp(28px,7.6vw,36px)} h1{overflow-wrap:anywhere} }
.inh-split>*, .inh-galerie>*, .kacheln>*{min-width:0} @media (max-width:860px){ .inh-split{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .inhalt p, .inhalt li{font-size:18px} }
.example .vn, .split .vn{margin-bottom:var(--s4)}