/* Stil 3: nahbar-freundlich. Warmes Weiß, Petrol, Koralle; runde Sans, abgerundete Karten. */
:root{--bg:#FAF6F0;--fg:#2B2F33;--teal:#23706C;--teal-hell:#2A7F7B;--teal-dunkel:#1F615E;--korall:#C04A2B;--korall-deko:#E76F51;--hell:#FFFFFF;--linie:#E8E0D4;--sans:"Nunito","Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.65 var(--sans)}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0 0 .5em;font-weight:800;color:var(--teal-dunkel)}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.25rem}
a{color:var(--teal);text-decoration:underline;text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--korall);outline-offset:3px;border-radius:4px}
.innen{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.schmal{max-width:760px}
/* Kopfzeile */
.kopf{background:var(--hell);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:5}
.kopf-zeile{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding-block:.8rem}
.marke{font-weight:800;font-size:1.3rem;color:var(--teal-dunkel);text-decoration:none}
.marke small{display:block;font-size:.75rem;font-weight:600;color:var(--korall);letter-spacing:.06em;text-transform:uppercase}
nav{display:flex;gap:1.25rem;flex-wrap:wrap;margin-left:auto}
nav a{text-decoration:none;font-weight:600;color:var(--fg);padding:.3rem 0}
nav a:hover,nav a:focus-visible,nav a[aria-current=page]{color:var(--teal)}
.menue-knopf{display:none;margin-left:auto;min-height:44px;padding:.5rem 1rem;border:2px solid var(--teal-dunkel);border-radius:999px;background:transparent;color:var(--teal-dunkel);font:800 .95rem var(--sans);cursor:pointer}
.kopf.offen .menue-knopf{background:var(--teal-dunkel);color:#fff}
/* Knöpfe */
.knopf{display:inline-block;background:var(--korall);color:#fff;text-decoration:none;padding:.85rem 1.5rem;border:0;border-radius:999px;font:800 1rem var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(192,74,43,.3);min-height:44px}
.knopf:hover,.knopf:focus-visible{background:#A63D22}
.knopf:disabled{opacity:.6;cursor:default}
.knopf.klein{padding:.55rem 1.1rem;font-size:.9rem;white-space:nowrap}
.leise{font-weight:700;align-self:center}
/* Hero + Fotoband */
.held{padding-block:4rem}
.lead{font-size:1.2rem;max-width:56ch;margin:0 0 1.8rem}
.aktionen{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.kleindruck{font-size:.9rem;color:#555C61;margin:0}
.zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.zwei>*{min-width:0}
.monogramm{display:block;width:min(100%,300px);height:auto;margin:0 auto;filter:drop-shadow(0 10px 24px rgba(31,97,94,.25))}
.band{margin:0;background:var(--teal-dunkel)}
.band img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.band figcaption{color:#D6E6E4;font-size:.95rem;padding-block:.8rem}
/* Abschnitte + Karten */
.abschnitt{padding-block:4rem}
.hell{background:var(--hell)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.karten article{background:var(--hell);border:1px solid var(--linie);border-radius:20px;padding:1.5rem;min-width:0}
.karten p{margin:0}
.karten p+p{margin-top:.6rem;font-weight:700}
.ikon{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:#E3F0EF;color:var(--teal);margin-bottom:.8rem}
.ikon svg{width:24px;height:24px}
.fakten-karte{background:var(--bg);border-radius:20px;padding:1.5rem 1.75rem;border:1px solid var(--linie)}
.fakten-karte h3{margin-bottom:.6rem}
.fakten{padding-left:1.2rem;margin:0;display:grid;gap:.4rem}
details{background:var(--hell);border:1px solid var(--linie);border-radius:14px;padding:.9rem 1.2rem;margin-bottom:.8rem}
summary{cursor:pointer;font-weight:800;color:var(--teal-dunkel);min-height:44px;display:flex;align-items:center}
details p{margin:.6rem 0 0}
/* Kontakt + Formular */
.gross{font-size:1.9rem;font-weight:800;margin:0 0 .8rem}
.gross a{color:var(--teal-dunkel);text-decoration:none}
address{font-style:normal;line-height:1.7;margin-bottom:1rem}
.formular{display:grid;gap:.9rem;background:var(--bg);border-radius:20px;padding:1.5rem}
.formular label{display:grid;gap:.3rem;font-weight:700;font-size:.9rem}
.formular input,.formular textarea,.formular select{font:inherit;padding:.65rem .9rem;border:1px solid #B8AFA2;border-radius:10px;background:#fff;color:var(--fg);width:100%;min-height:44px}
.formular :is(input,textarea,select):focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.falle{position:absolute;left:-9999px}
.form-hinweis{margin:0;font-size:.85rem;color:#555C61}
.hinweis{margin:0;color:var(--teal-dunkel);font-weight:800}
/* Unterseiten: Brotkrumen, Schritte, Rechtstext, CTA */
.brotkrumen{font-size:.9rem;margin:1.5rem 0 0}
.brotkrumen ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.brotkrumen li+li::before{content:"›";margin-right:.4rem;color:#555C61}
.seite-kopf{padding-block:1.5rem 2.5rem}
.seite-kopf .lead{margin-bottom:0}
.liste{padding-left:1.2rem;display:grid;gap:.5rem;margin:0}
.schritte{counter-reset:schritt;list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.schritte li{counter-increment:schritt;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start}
.schritte li::before{content:counter(schritt);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--teal-dunkel);color:#fff;font-weight:800}
.schritte strong{display:block;color:var(--teal-dunkel)}
.cta{text-align:center;background:var(--hell);border-radius:28px;padding:2.5rem 1.5rem;border:1px solid var(--linie)}
.cta p{max-width:48ch;margin:0 auto 1.4rem}
.cta .aktionen{justify-content:center;margin-bottom:0}
.rechtstext{max-width:70ch;padding-block:2.5rem 4rem}
.rechtstext h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.4em}
.rechtstext h2{font-size:1.35rem;margin-top:2rem}
.rechtstext p,.rechtstext ul{margin:0 0 1rem}
.rechtstext dl{margin:0 0 1rem;display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem}
.rechtstext dt{font-weight:700;color:var(--teal-dunkel)}
.rechtstext dd{margin:0}
.rechtstext .wichtig{background:var(--hell);border-left:4px solid var(--korall);padding:.9rem 1.2rem;border-radius:0 14px 14px 0}
/* Fußzeile */
.fuss{background:var(--teal-dunkel);color:#D6E6E4;padding-block:2.5rem;font-size:.9rem}
.fuss a{color:#fff}
.fuss p{margin:.5rem 0 0;line-height:1.6}
.fuss-links{font-weight:700;font-size:1rem;margin:0}
.bildnachweis{color:#D6E6E4}
.muster{margin-top:1.5rem;color:#F4C9B8}
/* Mobil */
@media (max-width:760px){
  .zwei{grid-template-columns:1fr}
  .held{padding-block:2.5rem}
  .monogramm{width:min(60%,220px)}
  .band img{aspect-ratio:16/9}
  .menue-knopf{display:inline-block;order:2}
  .kopf .tel{order:3;font-size:.85rem;padding:.55rem .9rem}
  .kopf nav{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;border-top:1px solid var(--linie);margin-top:.5rem;padding-top:.5rem}
  .kopf.offen nav{display:flex}
  .kopf nav a{padding:.7rem 0;min-height:44px;display:flex;align-items:center}
  .rechtstext dl{grid-template-columns:1fr}
  .schritte li{grid-template-columns:2.2rem 1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}