/* =====================================================================
   Praxis Schreiber, Wettenberg — Stylesheet
   Palette und Materialien stammen aus dem Foto des Praxisraums:
   helles Eichenholz, petrolfarbene Sessel, Pflanzengrün, Wandweiß.
   Keine externen Ressourcen.
   ===================================================================== */

:root{
  /* Farben aus dem Raum */
  --paper:      #f6f4f0;   /* Wandweiß, Grundfläche */
  --paper-warm: #efebe4;   /* Abschnittswechsel */
  --white:      #fffdfa;
  --petrol:     #2b3b47;   /* Sessel */
  --petrol-dk:  #1f2c36;
  --petrol-lt:  #4a606f;
  --oak:        #c9a87c;   /* Dielenboden */
  --oak-dk:     #9a7b4f;
  --green:      #4f6b55;   /* Pflanzen */
  --ink:        #1a2228;
  --ink-soft:   #3c4a52;
  --muted:      #5e6b72;
  --line:       #ded7cc;
  --line-soft:  #e9e3da;

  --serif: 'Source Serif 4', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1140px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --r: 3px;
  --r-lg: 6px;
  --shadow: 0 1px 3px rgba(26,34,40,.07), 0 8px 24px -12px rgba(26,34,40,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight:400;
  line-height:1.7;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
hr{ border:0; border-top:1px solid var(--line); margin:3rem 0; }

/* ---------- Typografie: Sprung H1 : Fließtext ≈ 3,2× ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.14; margin:0 0 .55em; text-wrap:balance; }
h1{ font-size:clamp(2.35rem, 1.5rem + 3.4vw, 3.75rem); letter-spacing:-.022em; line-height:1.08; }
h2{ font-size:clamp(1.65rem, 1.25rem + 1.7vw, 2.4rem); letter-spacing:-.015em; }
h3{ font-size:clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem); letter-spacing:-.008em; }
h4{ font-size:1.05rem; }

p{ margin:0 0 1.15em; max-width:66ch; }
a{ color:var(--petrol); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:var(--oak); }
a:hover{ color:var(--green); text-decoration-color:currentColor; }
strong{ font-weight:600; }

:focus-visible{ outline:3px solid var(--oak-dk); outline-offset:3px; border-radius:2px; }

.lead{ font-size:1.16em; line-height:1.55; color:var(--ink-soft); max-width:56ch; }
.small{ font-family:var(--sans); font-size:.88rem; color:var(--muted); }
.meta{ font-family:var(--sans); font-size:.82rem; color:var(--muted); letter-spacing:.02em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
/* Schmale Spalte, aber nicht zentriert: die linke Kante bleibt dieselbe wie
   überall sonst auf der Seite, nur die Zeilenlänge wird begrenzt. */
.wrap--narrow > *{ max-width:780px; margin-inline:0; }
.wrap--narrow > .crumbs{ max-width:none; }

/* ---------- Sprungmarke ---------- */
.skip{ position:absolute; left:-9999px; z-index:300; background:var(--petrol); color:#fff;
  font-family:var(--sans); font-size:.95rem; padding:.8rem 1.2rem; text-decoration:none; }
.skip:focus{ left:.75rem; top:.75rem; }

/* ---------- Servicezeile ---------- */
.topbar{ background:var(--petrol-dk); color:#b9c7d0; font-family:var(--sans); font-size:.85rem; }
.topbar .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1.6rem; min-height:2.5rem; padding-block:.35rem; }
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ color:#fff; text-decoration:underline; }
.topbar .tb-note{ margin-right:auto; }

/* ---------- Kopfzeile ---------- */
.masthead{ position:sticky; top:0; z-index:200; background:rgba(246,244,240,.93);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.masthead .wrap{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.5rem); min-height:4.75rem; }

.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.brand:hover{ color:var(--ink); }
.brand-mark{ flex:0 0 auto; color:var(--green); }
.brand-name{ display:block; font-size:1.12rem; font-weight:600; line-height:1.1;
  letter-spacing:-.015em; white-space:nowrap; }
.brand-sub{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:500; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; margin-top:.2rem; }

.nav{ margin-left:auto; }
.nav ul{ display:flex; align-items:center; gap:clamp(.9rem, 1.6vw, 1.6rem);
  list-style:none; margin:0; padding:0; }
/* Ein Eintrag, eine Zeile. Ein umbrechender Menüpunkt lässt die ganze
   Leiste unruhig wirken, deshalb hier ausdrücklich kein Umbruch. */
.nav a{ font-family:var(--sans); font-size:.93rem; font-weight:450; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap; padding-block:.35rem;
  border-bottom:2px solid transparent; display:inline-block; }
.nav a:hover{ color:var(--green); border-bottom-color:var(--oak); }
.nav a[aria-current="page"]{ color:var(--petrol); font-weight:600; border-bottom-color:var(--petrol); }
.nav .nav-cta a{ border:0; background:var(--petrol); color:#fff; border-radius:var(--r); padding:.6rem 1.1rem; }
.nav .nav-cta a:hover{ background:var(--petrol-dk); color:#fff; }

.nav-toggle{ display:none; margin-left:auto; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--sans); font-size:.93rem; background:var(--petrol); color:#fff;
  border:0; border-radius:var(--r); padding:.65rem 1rem; }

@media (max-width:1040px){
  .nav-toggle{ display:inline-flex; }
  .masthead .wrap{ flex-wrap:wrap; padding-bottom:.25rem; }
  .nav{ display:none; flex-basis:100%; margin-left:0; }
  .nav[data-open="true"]{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; padding-bottom:.5rem; }
  .nav li{ border-top:1px solid var(--line-soft); }
  .nav a{ padding:.9rem .2rem; border-bottom:0; white-space:normal; }
  .nav .nav-cta{ border-top:0; padding-top:.75rem; }
  .nav .nav-cta a{ text-align:center; }
  .topbar .tb-note{ display:none; }
}

/* ---------- Knöpfe ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.97rem; font-weight:500; line-height:1.1;
  padding:.9rem 1.5rem; border-radius:var(--r); border:1.5px solid var(--petrol);
  text-decoration:none; cursor:pointer; transition:background-color .18s, color .18s, border-color .18s; }
.btn-primary{ background:var(--petrol); color:#fff; }
.btn-primary:hover{ background:var(--petrol-dk); border-color:var(--petrol-dk); color:#fff; }
.btn-ghost{ background:transparent; color:var(--petrol); }
.btn-ghost:hover{ background:rgba(43,59,71,.07); color:var(--petrol-dk); }
.btn-light{ background:var(--white); color:var(--petrol); border-color:var(--white); }
.btn-light:hover{ background:var(--paper-warm); color:var(--petrol-dk); border-color:var(--paper-warm); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.btn-block{ width:100%; }

/* ---------- Abschnitte ---------- */
.section{ padding-block:clamp(3.25rem, 7vw, 5.75rem); }
.section--warm{ background:var(--paper-warm); }
.section--petrol{ background:var(--petrol-dk); color:#cfdae1; }
.section--petrol h2,.section--petrol h3{ color:#fff; }
.section--petrol a:not(.btn){ color:#fff; text-decoration-color:var(--oak); }
.section--petrol .lead{ color:#b9c7d0; }
.section-head{ max-width:60ch; margin-bottom:2.75rem; }
.section-head p{ color:var(--ink-soft); margin-bottom:0; }
.section--petrol .section-head p{ color:#b9c7d0; }

/* ---------- Hero: Praxisraum, stark aufgehellt ---------- */
.hero{ position:relative; border-bottom:1px solid var(--line); isolation:isolate; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:image-set(url('../img/praxisraum-2000.jpg') 1x);
  background-size:cover; background-position:52% 60%;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, rgba(246,244,240,.985) 0%, rgba(246,244,240,.955) 46%, rgba(246,244,240,.72) 72%, rgba(246,244,240,.55) 100%),
    linear-gradient(to bottom, rgba(246,244,240,.5), rgba(246,244,240,.85));
}
@media (max-width:860px){
  .hero::before{ background-position:60% 55%; }
  .hero::after{ background:linear-gradient(to bottom, rgba(246,244,240,.94), rgba(246,244,240,.985)); }
}
.hero .wrap{ padding-block:clamp(3rem, 7vw, 6rem); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4.4fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ margin-bottom:.45em; }
.hero .lead{ max-width:52ch; }
.hero-sig{ display:flex; align-items:center; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); max-width:34rem; }
.hero-sig img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 28%; flex:0 0 auto; }
.hero-sig div{ font-family:var(--sans); font-size:.88rem; line-height:1.45; color:var(--ink-soft); }
.hero-sig strong{ display:block; color:var(--ink); font-weight:600; }

/* Kontaktkarte */
.card-contact{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.65rem 1.75rem; box-shadow:var(--shadow); }
.card-contact h2{ font-size:1.15rem; margin-bottom:1.1rem; }
.card-contact dl{ margin:0; font-family:var(--sans); font-size:.94rem; }
.card-contact dt{ font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:1.1rem; }
.card-contact dt:first-of-type{ margin-top:0; }
.card-contact dd{ margin:.15rem 0 0; color:var(--ink); }
.card-contact dd a{ text-decoration:none; }
.card-contact dd a:hover{ text-decoration:underline; }
.card-contact .btn{ margin-top:1.5rem; }
.card-contact .card-note{ font-family:var(--sans); font-size:.8rem; color:var(--muted); margin:1rem 0 0; line-height:1.45; }

/* Auftakt-Bewegung: genau ein Moment auf der ganzen Seite */
.rise{ animation:rise .75s cubic-bezier(.21,.6,.35,1) both; }
.rise-2{ animation-delay:.14s; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .rise{ animation:none; } }

/* ---------- ECP-Siegel ---------- */
.credential{ display:flex; align-items:center; gap:1.1rem; margin-top:1.75rem;
  padding:1rem 1.2rem; background:rgba(255,253,250,.75); border:1px solid var(--line);
  border-left:3px solid var(--oak); border-radius:var(--r); max-width:34rem; }
.credential img{ width:48px; height:58px; object-fit:contain; flex:0 0 auto; }
.credential p{ margin:0; font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--ink-soft); max-width:none; }
.credential strong{ color:var(--ink); }

/* ---------- Leistungen als Zeilen ---------- */
.offers{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.offers li{ border-bottom:1px solid var(--line); }
.offers a{ display:grid; grid-template-columns:2.75rem minmax(0,1fr) auto; gap:1.6rem;
  align-items:start; padding:1.9rem 1rem 1.9rem 1.1rem; text-decoration:none; color:inherit;
  border-left:3px solid transparent; transition:border-color .18s, background-color .18s; }
.offers a:hover{ border-left-color:var(--oak); background:rgba(239,235,228,.6); color:inherit; }
.offers .ico{ color:var(--green); margin-top:.25rem; }
.offers h3{ margin:0 0 .3em; }
.offers p{ margin:0; font-size:.98rem; color:var(--ink-soft); max-width:60ch; }
.offers .go{ align-self:center; font-family:var(--sans); font-size:.9rem; color:var(--petrol); white-space:nowrap; }
@media (max-width:680px){
  .offers a{ grid-template-columns:2.25rem minmax(0,1fr); gap:1rem; padding-inline:.6rem; }
  .offers .go{ display:none; }
}

/* ---------- Anliegen (zwei Spalten Text) ---------- */
.concerns{ column-count:3; column-gap:3rem; max-width:68rem; }
.concerns li{ break-inside:avoid; margin-bottom:1.1rem; padding-left:1.6rem; position:relative; list-style:none; }
.concerns li::before{ content:""; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem; border-radius:50%; background:var(--green); }
.concerns{ padding:0; margin:0; }
@media (max-width:1000px){ .concerns{ column-count:2; } }
@media (max-width:760px){ .concerns{ column-count:1; } }

/* ---------- Bildband über die volle Breite ----------
   Der Praxisraum ist das stärkste Argument der Seite: ein heller Dachraum
   voller Pflanzen. Deshalb bekommt er einmal die ganze Breite, statt als
   Miniatur neben dem Text zu stehen. Beim Hereinscrollen fährt das Bild aus
   einer leichten Vergrößerung in seine Ruhelage — ein einziger, langsamer
   Schwenk, keine Effektsammlung. */
.room{ position:relative; overflow:hidden; background:var(--petrol-dk); }
.room-frame{
  position:relative; width:100%;
  height:clamp(22rem, 56vh, 40rem);
  overflow:hidden;
}
.room-frame img{
  width:100%; height:100%; object-fit:cover; object-position:50% 58%;
  transform:scale(1.08); transform-origin:50% 55%;
}
.reveal-enabled .room-frame img{ opacity:0; }
.reveal-enabled .room-frame.is-in img{
  opacity:1; transform:scale(1);
  transition:transform 1.6s cubic-bezier(.19,.72,.26,1), opacity .9s ease-out;
}
@media (prefers-reduced-motion:reduce){
  .reveal-enabled .room-frame img,
  .reveal-enabled .room-frame.is-in img{ opacity:1; transform:none; transition:none; }
}
.room-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:4.5rem var(--gutter) 1.5rem;
  background:linear-gradient(to top, rgba(20,28,34,.72), rgba(20,28,34,0));
  color:#fff; font-family:var(--sans); font-size:.92rem;
  pointer-events:none;
}
.room-caption span{ display:block; max-width:var(--wrap); margin-inline:auto; }
@media (max-width:640px){
  .room-frame{ height:clamp(17rem, 46vh, 24rem); }
  .room-caption{ font-size:.85rem; padding-top:3.5rem; }
}

/* ---------- Fließtext ---------- */
.prose > h2{ margin-top:2.5em; }
.prose > h2:first-child{ margin-top:0; }
.prose > h3{ margin-top:2em; }
.prose ul,.prose ol{ max-width:66ch; margin:0 0 1.35em; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.6rem; margin-bottom:.6em; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.68em; width:.45rem; height:.45rem; border-radius:50%; background:var(--oak); }
.prose ol{ padding-left:1.3rem; }
.prose ol li{ margin-bottom:.6em; padding-left:.3rem; }

.pull{ margin:2.75rem 0; padding-left:1.65rem; border-left:3px solid var(--oak);
  font-size:1.3em; line-height:1.45; font-style:italic; color:var(--ink); }
.pull p{ margin:0; max-width:34ch; }

.callout{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:var(--r); padding:1.4rem 1.6rem; margin:2.25rem 0; }
.callout h3{ font-size:1.08rem; margin-bottom:.45em; }
.callout p:last-child{ margin-bottom:0; }
.callout p{ font-size:.98rem; }

/* ---------- Raster ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); align-items:center; }
.trio{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:2.5rem; }
@media (max-width:900px){ .split,.duo{ grid-template-columns:1fr; } }

.aside{ position:sticky; top:6.25rem; display:grid; gap:1.25rem; }
@media (max-width:900px){ .aside{ position:static; } }
.aside-box{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; }
.aside-box h3{ font-size:1.02rem; margin-bottom:.6em; }
.aside-box p,.aside-box li{ font-family:var(--sans); font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.aside-box p{ margin-bottom:.7em; }
.aside-box ul{ list-style:none; margin:0; padding:0; }
.aside-box li{ padding-block:.45rem; border-top:1px solid var(--line-soft); }
.aside-box li:first-child{ border-top:0; }
.aside-box a{ text-decoration:none; }
.aside-box a:hover{ text-decoration:underline; }

.figure{ margin:0; }
.figure img{ border-radius:var(--r-lg); }
.figure figcaption{ font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:.7rem; }

/* ---------- Schritte (echte Abfolge, daher nummeriert) ---------- */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:2.25rem; }
.steps li{ counter-increment:s; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.22); }
.steps li::before{ content:counter(s); display:block; font-family:var(--sans); font-size:.8rem;
  font-weight:600; letter-spacing:.08em; color:var(--oak); margin-bottom:.7rem; }
.steps h3{ font-size:1.1rem; margin-bottom:.4em; }
.steps p{ font-size:.95rem; margin:0; color:#b9c7d0; }
.section:not(.section--petrol) .steps li{ border-top-color:var(--line); }
.section:not(.section--petrol) .steps p{ color:var(--ink-soft); }

/* ---------- Zeitleiste ---------- */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1.75rem;
  padding-block:1.15rem; border-bottom:1px solid var(--line); }
.timeline li:first-child{ border-top:1px solid var(--line); }
.timeline .yr{ font-family:var(--sans); font-size:.88rem; font-weight:500; color:var(--oak-dk); padding-top:.22em; }
.timeline p{ margin:0; }
@media (max-width:620px){ .timeline li{ grid-template-columns:1fr; gap:.15rem; } }

/* ---------- Tabelle ---------- */
.table-scroll{ overflow-x:auto; margin:1.5rem 0 1.25rem; }
.rates{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.97rem; min-width:26rem; }
.rates caption{ text-align:left; font-size:.85rem; color:var(--muted); padding-bottom:.7rem; }
.rates th,.rates td{ text-align:left; padding:1rem .6rem; border-bottom:1px solid var(--line); }
.rates thead th{ font-size:.78rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); border-bottom:1.5px solid var(--line); }
.rates tbody th{ font-weight:600; font-size:1rem; color:var(--ink); }
.rates td:last-child,.rates th:last-child{ text-align:right; white-space:nowrap; }
.rates .amount{ font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- Häufige Fragen ---------- */
.faq{ border-top:1px solid var(--line); max-width:52rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ position:relative; cursor:pointer; list-style:none;
  padding:1.3rem 2.75rem 1.3rem 0; font-weight:600; font-size:1.08rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.5rem; top:1.75rem;
  width:.72rem; height:.72rem; border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(45deg); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(-135deg); top:2rem; }
.faq summary:hover{ color:var(--green); }
.faq .answer{ padding:0 2.75rem 1.5rem 0; }
.faq .answer p:last-child{ margin-bottom:0; }

/* ---------- Anfahrt ---------- */
.map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper-warm); }
.map svg{ display:block; width:100%; height:auto; }

/* ---------- Formular ---------- */
.form{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.25rem); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--sans); font-size:.87rem; font-weight:500; color:var(--ink-soft); margin-bottom:.35rem; }
.field .req{ color:var(--oak-dk); }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); padding:.8rem .9rem; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--petrol); box-shadow:0 0 0 3px rgba(43,59,71,.14); background:var(--white); }
.field textarea{ min-height:9.5rem; resize:vertical; line-height:1.55; }
.field-check{ display:flex; gap:.7rem; align-items:flex-start; font-family:var(--sans);
  font-size:.87rem; line-height:1.5; color:var(--ink-soft); margin-bottom:1.4rem; }
.field-check input{ width:1.05rem; height:1.05rem; margin-top:.2rem; flex:0 0 auto; accent-color:var(--petrol); }
.hp{ position:absolute!important; left:-9999px!important; }
.form-status{ font-family:var(--sans); font-size:.93rem; padding:.9rem 1.1rem; border-radius:var(--r); margin-bottom:1.1rem; }
.form-status[data-state="ok"]{ background:#e8f0e9; color:#2f4b36; border:1px solid #b9cfbe; }
.form-status[data-state="err"]{ background:#f6e9e4; color:#7a3b25; border:1px solid #ddb9a8; }
.form-note{ font-family:var(--sans); font-size:.83rem; color:var(--muted); line-height:1.5; margin-top:1rem; }

/* ---------- Kontaktwege ---------- */
.channels{ list-style:none; margin:0 0 2rem; padding:0; border-top:1px solid var(--line); }
.channels li{ border-bottom:1px solid var(--line); padding-block:1.1rem; }
.channels .k{ display:block; font-family:var(--sans); font-size:.76rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.channels .v{ font-size:1.15rem; }
.channels a{ text-decoration:none; }
.channels a:hover{ text-decoration:underline; }

/* ---------- Abschlussaufruf ---------- */
.cta-band{ background:var(--petrol-dk); color:#cfdae1; }
.cta-band .wrap{ padding-block:clamp(2.75rem,5vw,4rem); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.75rem; }
.cta-band h2{ color:#fff; margin:0; max-width:22ch; font-size:clamp(1.45rem,1.1rem+1.3vw,2rem); }
.cta-band p{ margin:.5rem 0 0; color:#b9c7d0; max-width:44ch; font-size:.98rem; }

/* ---------- Fußzeile ---------- */
.site-footer{ background:var(--petrol-dk); color:#a9bcc7; font-family:var(--sans); font-size:.93rem; padding-block:3.5rem 2rem; border-top:1px solid rgba(255,255,255,.12); }
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2.5rem; }
.site-footer h2{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#7e95a3; margin:0 0 1rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.55rem; }
.site-footer p{ margin:0 0 .5rem; max-width:38ch; line-height:1.6; }
.footer-bottom{ margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; font-size:.85rem; color:#7e95a3; }
.footer-bottom .spacer{ margin-left:auto; }

/* ---------- Einblenden beim Scrollen ----------
   Ein Element schiebt sich beim Erreichen des Sichtfensters leicht nach oben ein.
   Bewusst kurz und nur einmal je Element: Bewegung soll den Blick führen,
   nicht die Seite unruhig machen. Wer „Bewegung reduzieren" eingestellt hat,
   bekommt gar keine. Ohne JavaScript greift assets/css/noscript.css. */
.reveal-enabled .section-head,
.reveal-enabled .offers li,
.reveal-enabled .concerns li,
.reveal-enabled .figure,
.reveal-enabled .trio > div,
.reveal-enabled .steps li,
.reveal-enabled .timeline li,
.reveal-enabled .table-scroll,
.reveal-enabled .faq details,
.reveal-enabled .aside-box,
.reveal-enabled .pull,
.reveal-enabled .callout,
.reveal-enabled .cta-band{
  opacity:0;
  transform:translateY(22px);
  will-change:opacity, transform;
}
/* Die Klasse steht doppelt, damit dieser Block gewinnt.
   Die Verstecken-Regeln oben enthalten Elementnamen (details, li, div) und
   sind dadurch spezifischer als eine einzelne Klasse — ohne die Verdopplung
   blieben genau diese Elemente für immer unsichtbar. */
.reveal-enabled .is-in.is-in{
  opacity:1;
  transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d, 0ms);
  will-change:auto;
}
@media (prefers-reduced-motion:reduce){
  .reveal-enabled .section-head,
  .reveal-enabled .offers li,
  .reveal-enabled .concerns li,
  .reveal-enabled .figure,
  .reveal-enabled .trio > div,
  .reveal-enabled .steps li,
  .reveal-enabled .timeline li,
  .reveal-enabled .table-scroll,
  .reveal-enabled .faq details,
  .reveal-enabled .aside-box,
  .reveal-enabled .pull,
  .reveal-enabled .callout,
  .reveal-enabled .cta-band{ opacity:1; transform:none; }
  .reveal-enabled .is-in.is-in{ transition:none; }
}

/* Beim Drucken und in Werkzeugen, die Animationen anhalten, ist alles sichtbar. */
@media print{
  .reveal-enabled .section-head,
  .reveal-enabled .offers li,
  .reveal-enabled .concerns li,
  .reveal-enabled .figure,
  .reveal-enabled .room-frame img,
  .reveal-enabled .trio > div,
  .reveal-enabled .steps li,
  .reveal-enabled .timeline li,
  .reveal-enabled .table-scroll,
  .reveal-enabled .faq details,
  .reveal-enabled .aside-box,
  .reveal-enabled .pull,
  .reveal-enabled .callout,
  .reveal-enabled .cta-band,
  .rise{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ---------- Kleinkram ---------- */
.eyebrow{ display:block; font-family:var(--sans); font-size:.84rem; font-weight:500;
  color:var(--oak-dk); margin-bottom:.9rem; }
.page-head{ background:var(--paper-warm); border-bottom:1px solid var(--line); }
.page-head .wrap{ padding-block:clamp(2.5rem,5vw,4.25rem); }
.page-head h1{ max-width:20ch; }
.page-head .lead{ max-width:54ch; }
.page-head p{ color:var(--ink-soft); }
.crumbs{ font-family:var(--sans); font-size:.83rem; color:var(--muted); margin-bottom:1.25rem; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--green); text-decoration:underline; }
.crumbs span{ margin-inline:.45rem; }
.new-flag{ display:none; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }