/* ==========================================================================
   Paarberatung Naumann — gemeinsames Stylesheet
   Übernimmt das Erscheinungsbild der freigegebenen Entwürfe start.html / sub.html
   und ergänzt: mobile Navigation, Leit-Trias, Servicekarten, Formular, Rechtsseiten.
   ========================================================================== */

/* ---------- Schriften, lokal eingebunden (kein Google-CDN) ---------- */
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/lora.woff2') format('woff2');
}
@font-face{
  font-family:'Lora'; font-style:italic; font-weight:400 500; font-display:swap;
  src:url('../fonts/lora-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/inter.woff2') format('woff2');
}

:root{
  --pine:#2F6B4F; --pine-deep:#20402E; --moss:#7A9E86;
  --sand:#E7DCCB; --sand-soft:#F1EADD; --offwhite:#FAF7F1;
  --amber:#D99A45; --amber-deep:#C0812E; --clay:#9C5A3C;
  --blue:#6E93A0; --blue-soft:#EAF0F0;
  --bordeaux:#6F1C2F; --bordeaux-soft:#F3E8EB;
  --ink:#24312B; --ink-soft:#5F564A; --line:rgba(36,49,43,.13);
  --display:'Lora',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1180px; --wrap-narrow:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--offwhite); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; line-height:1.14; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
.wrap-narrow{max-width:var(--wrap-narrow); margin:0 auto; padding:0 32px}
.eyebrow{
  font-family:var(--body); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber-deep);
}

.skiplink{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--pine-deep); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skiplink:focus{left:0}
:focus-visible{outline:2px solid var(--amber-deep); outline-offset:3px; border-radius:4px}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.scrolled{
  background:rgba(250,247,241,.92); backdrop-filter:blur(12px);
  padding:10px 32px; box-shadow:0 1px 0 var(--line);
}

/* Weicher Verlauf hinter dem Balken, solange er ueber dem Bild steht.
   Gemessen am Startbild: der obere Bildrand ist hell (Mittelwert rgb(189,167,183),
   hellster Punkt 255 — Wolken). Weisse Schrift kam dort nur auf 3,4:1; noetig
   sind 4,5:1. Ein halbdurchsichtiger Balken wuerde stattdessen eine sichtbare
   Kante quer durchs Bild ziehen — der auslaufende Verlauf hat dieselbe Wirkung
   ohne Kante. Liegt hinter dem Inhalt (z-index:-1) und blendet weich aus,
   statt beim Scrollen hart zu verschwinden. */
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; height:170px;
  background:linear-gradient(180deg, rgba(20,35,26,.58) 0%, rgba(20,35,26,.28) 48%, rgba(20,35,26,0) 100%);
  z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s ease;
}
.nav.hero-mode:not(.scrolled)::before{opacity:1}
.brand{display:flex; align-items:center; gap:13px}
.brand img{height:50px; width:auto; display:block; transition:height .4s ease, filter .4s ease}
.nav.scrolled .brand img{height:42px}
.nav.hero-mode .brand img{filter:brightness(0) invert(1)}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--display); font-weight:600; font-size:1.16rem; color:var(--pine-deep); transition:color .4s}
.nav.hero-mode .brand-text b{color:var(--offwhite)}
/* Leit-Trias im Schriftzug. Bordeaux statt Amber — aus zwei Gruenden:
   Erstens steht so im Farbkonzept, dass Bordeaux die Akzentfarbe der
   Leit-Trias ist (.trias-worte auf den Seiten macht es bereits so, der Kopf
   war die Ausnahme). Zweitens trug der Schriftzug damit drei Farben auf
   engstem Raum — Figur bordeaux, Name gruen, Trias amber. Jetzt sind es zwei,
   und die drei Woerter gehoeren sichtbar zur Figur daneben.
   Ueber dem Bild laufen alle drei Teile weiss mit, wie der Rest des Balkens. */
.brand-text span{
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bordeaux); margin-top:5px; font-weight:600; transition:color .4s;
}
.nav.hero-mode .brand-text span{color:rgba(250,247,241,.92)}
.nav.scrolled.hero-mode .brand-text span{color:var(--bordeaux)}

.navlinks{display:flex; align-items:center; gap:26px; font-size:.9rem; font-weight:500}
.navlinks > a,.navitem > a{color:var(--ink); opacity:.84; transition:opacity .2s, color .4s; position:relative; padding:4px 0; display:inline-block}
.nav.hero-mode .navlinks > a,.nav.hero-mode .navitem > a{color:var(--offwhite)}
.navlinks a.active{opacity:1; color:var(--amber-deep)}
.nav.hero-mode .navlinks a.active{color:#f4d9a6}
.navlinks a:not(.navcta)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--amber); transition:width .28s ease;
}
.navlinks a:not(.navcta):hover::after,.navlinks a.active:not(.navcta)::after{width:100%}
.navlinks a:not(.navcta):hover{opacity:1}
/* Selektor bewusst mit ".navlinks >" davor: die Regel weiter oben
   (.navlinks > a, .navitem > a) ist spezifischer als ein einzelnes .navcta und
   hat sonst das padding:4px 0 durchgesetzt — der Rahmen klebte dann ohne jede
   Luft an den Buchstaben. Farbe und Deckkraft kamen nur durch, weil dort
   !important steht. */
.navlinks > a.navcta{
  border:1.5px solid var(--amber); color:var(--amber-deep)!important; opacity:1!important;
  padding:8px 18px; border-radius:999px; transition:background .25s,color .25s,border-color .25s;
}
.nav.hero-mode .navcta{border-color:rgba(250,247,241,.55); color:var(--offwhite)!important}
.navcta:hover{background:var(--amber); border-color:var(--amber); color:#fff!important}

/* Sobald der Balken hinterlegt ist, gewinnt die dunkle Schrift — sonst steht
   weisse Schrift auf hellem Grund, solange der Hero noch angeschnitten ist. */
.nav.scrolled.hero-mode .brand img{filter:none}
.nav.scrolled.hero-mode .brand-text b{color:var(--pine-deep)}
.nav.scrolled.hero-mode .navlinks > a,
.nav.scrolled.hero-mode .navitem > a{color:var(--ink)}
.nav.scrolled.hero-mode .navlinks a.active{color:var(--amber-deep)}
.nav.scrolled.hero-mode .navcta{border-color:var(--amber); color:var(--amber-deep)!important}
.nav.scrolled.hero-mode .navcta:hover{color:#fff!important}
.nav.scrolled.hero-mode .burger i{background:var(--ink)}

/* Untermenü am Schreibtisch */
.navitem{position:relative}
.navitem > a::before{content:""; position:absolute; left:0; right:0; top:100%; height:16px}
.submenu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px;
  min-width:250px; box-shadow:0 18px 44px rgba(36,49,43,.14);
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.navitem:hover .submenu,.navitem:focus-within .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.submenu a{
  display:block; padding:9px 14px; border-radius:9px; font-size:.9rem;
  color:var(--ink)!important; opacity:.9; transition:background .2s, color .2s;
}
.submenu a:hover{background:var(--sand-soft); color:var(--pine)!important; opacity:1}
.submenu a::after{display:none!important}
.submenu .sub-lead{
  display:block; padding:9px 14px 11px; font-family:var(--display); font-size:.95rem;
  color:var(--pine-deep)!important; border-bottom:1px solid var(--line); margin-bottom:6px; border-radius:9px 9px 0 0;
}

/* Burger und mobiles Menü */
.burger{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  padding:0; position:relative; z-index:70;
}
.burger i{
  position:absolute; left:10px; right:10px; height:1.8px; background:var(--ink);
  transition:transform .3s ease, opacity .2s ease, background .4s ease;
}
.nav.hero-mode .burger i{background:var(--offwhite)}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
body.menu-open .burger i{background:var(--offwhite)}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobilnav{
  position:fixed; inset:0; z-index:65; background:var(--pine-deep);
  padding:96px 26px 48px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .34s ease, visibility .34s;
}
body.menu-open .mobilnav{opacity:1; visibility:visible}
body.menu-open{overflow:hidden}
.mobilnav h4{
  font-family:var(--body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:#f0cf9c; font-weight:600; margin:26px 0 10px;
}
.mobilnav h4:first-child{margin-top:0}
.mobilnav a{
  display:block; color:rgba(250,247,241,.9); font-family:var(--display); font-size:1.16rem;
  padding:11px 0; border-bottom:1px solid rgba(250,247,241,.12);
}
.mobilnav a.active{color:#f4d9a6}
.mobilnav a.sub{font-size:1rem; padding-left:18px; color:rgba(250,247,241,.7); font-family:var(--body)}
.mobilnav .mobcta{
  display:inline-block; margin-top:30px; border:1.5px solid var(--amber); color:#f4d9a6;
  border-radius:999px; padding:12px 26px; font-family:var(--body); font-size:.95rem; font-weight:600;
}

/* ==========================================================================
   HERO — Startseite
   ========================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:-8% 0 0 0; z-index:0; will-change:transform}
.hero-atmo{position:absolute; inset:0; background:linear-gradient(180deg,#cdd7d4,#8fae94 52%,#b98d63)}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.hero-photo.loaded{opacity:1}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(32,64,46,.42) 0%, rgba(32,64,46,.06) 30%, rgba(32,64,46,.30) 66%, rgba(32,64,46,.86) 100%);
}
.hero-inner{position:relative; z-index:2; width:100%; padding-bottom:9vh}
/* Die Zeile sitzt bei rund 18 % der Bildhoehe — genau dort, wo der hero-scrim
   sein Loch hat (nur .20). Gemessen kam die Sandschrift dort auf 2,07:1, noetig
   sind 4,5:1. Mit dieser Hinterlegung sind es 6,13:1.
   Bewusst NICHT in Amber hinterlegt, obwohl das die Knopffarbe waere: Amber ist
   auf dieser Seite das Klick-Signal. Der Knopf "Jetzt Kontakt aufnehmen" steht
   zwar 449 px darunter, aber im selben Bildausschnitt. Ein zweiter Amberblock,
   der nicht klickbar ist, laedt zum Fehlklick ein und schwaecht den Knopf.
   Rechtes Innenmass kleiner als das linke: die Laufweite von .22em haengt hinter
   dem letzten Buchstaben noch als Leerraum, sonst sitzt der Text sichtbar links. */
.hero-eyebrow{
  color:#f4d9a6;
  display:inline-block;
  background:rgba(20,35,26,.62);
  padding:7px 13px 7px 15px;
  border-radius:999px;
  backdrop-filter:blur(3px);
}
.hero h1{
  color:var(--offwhite); font-size:clamp(2.5rem,6.2vw,5rem); letter-spacing:-.015em;
  margin:18px 0 0; text-shadow:0 2px 30px rgba(20,35,26,.35); max-width:16ch;
}
.hero-lead{color:#fff; font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.6rem); margin-top:16px; max-width:28ch; opacity:.96}
.hero-sub{color:rgba(255,255,255,.9); font-size:1.02rem; margin-top:14px; max-width:46ch}
.hero-line{color:#f4d9a6; font-family:var(--display); font-style:italic; font-size:1.12rem; margin-top:22px}
.scrollhint{
  position:absolute; left:50%; bottom:26px; z-index:2; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrollhint i{width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent); display:block; animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Auf dem Telefon ausblenden.
   Der Hinweis sitzt unten mittig, der Textblock des Hero reicht dort aber bis
   fast an den Rand — auf dem iPhone stand „Ihr Weg" halb hinter dem Knopf
   „Mehr erfahren", quer sogar ganz darauf. Vom Kunden gemeldet am 06.08.2026.
   Auf einem Berührungsbildschirm ist ein Scrollhinweis ohnehin entbehrlich:
   Dort wischt jeder von selbst. */
@media(max-width:820px), (max-height:620px){
  .scrollhint{display:none}
}

/* ==========================================================================
   SUBHERO — Unterseiten
   ========================================================================== */
.subhero{position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden}
.subhero-media{position:absolute; inset:0; z-index:0}
.subhero-atmo{position:absolute; inset:0; background:linear-gradient(180deg,#b7cbd0,#7f9c84)}
.subhero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s}
.subhero-photo.loaded{opacity:1}
.subhero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(30,52,42,.44) 0%,rgba(30,52,42,.10) 34%,rgba(30,52,42,.36) 64%,rgba(30,52,42,.85) 100%);
}
.subhero-inner{position:relative; z-index:2; width:100%; padding-bottom:7vh}

/* Auf dem Telefon wirken die Bilder deutlich dunkler als am Schreibtisch —
   vom Kunden am 06.08.2026 gemeldet, und der Grund ist rechnerisch:
   Die Abdunkelung ist oben und unten kräftig und in der Mitte fast weg. Auf
   einem hohen, schmalen Bildschirm ist der Kopfbereich niedriger, also machen
   die beiden dunklen Enden einen viel größeren Anteil der sichtbaren Fläche
   aus. Dasselbe Bild, dieselbe Abdunkelung — nur anders verteilt.
   Deshalb hier gedämpfter, ohne die Lesbarkeit der weißen Schrift aufzugeben. */
@media(max-width:820px){
  .hero-scrim{
    background:linear-gradient(180deg, rgba(32,64,46,.34) 0%, rgba(32,64,46,.04) 34%, rgba(32,64,46,.22) 66%, rgba(32,64,46,.78) 100%);
  }
  .subhero-scrim{
    background:linear-gradient(180deg,rgba(30,52,42,.34) 0%,rgba(30,52,42,.06) 38%,rgba(30,52,42,.26) 66%,rgba(30,52,42,.76) 100%);
  }
}
.crumb{color:rgba(255,255,255,.78); font-size:.82rem; margin-bottom:18px}
.crumb a:hover{color:#fff}
.step-tag{display:inline-flex; align-items:center; gap:10px; color:#f4d9a6; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
/* min-width statt width, dazu waagerechtes Innenmaß und ein Pillenradius.
   Bei einstelligen Nummern bleibt es ein Kreis; bei „5.2" oder „3.1" wächst
   die Form mit, statt die erste Ziffer anzuschneiden. Vom Kunden gemeldet
   am 06.08.2026. */
.step-tag i{
  min-width:26px; height:26px; padding:0 8px;
  border:1.5px solid #f4d9a6; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-style:normal; font-size:.85rem;
  white-space:nowrap;
}
.subhero h1{
  color:var(--offwhite); font-size:clamp(2.1rem,4.8vw,3.9rem); letter-spacing:-.012em;
  margin:16px 0 0; max-width:18ch; text-shadow:0 2px 30px rgba(20,35,26,.3);
}
.subhero .sub{color:#fff; font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,2vw,1.42rem); margin-top:14px; opacity:.95; max-width:34ch}

/* Werte-Streifen */
.values{background:var(--pine-deep); color:var(--offwhite)}
.values .wrap{display:flex; flex-wrap:wrap; gap:10px 40px; padding-top:22px; padding-bottom:22px; align-items:center; justify-content:center; text-align:center}
.values span{font-family:var(--display); font-size:1.05rem}
.values b{color:#f4d9a6; font-weight:500}
.values .dot{color:var(--moss)}

/* ==========================================================================
   ABSCHNITTE
   ========================================================================== */
.section{padding:112px 0}
.section.tight{padding:80px 0}
.section.sand{background:var(--sand-soft)}
.sec-head{max-width:640px; margin-bottom:52px}
.sec-head.mitte{margin-left:auto; margin-right:auto; text-align:center}
.sec-head h2{font-size:clamp(1.85rem,3.6vw,2.9rem); letter-spacing:-.01em; margin-top:14px; color:var(--pine-deep)}
.sec-head p{color:var(--ink-soft); margin-top:16px; font-size:1.05rem}

.intro{padding:100px 0 20px}
.intro .wrap{max-width:770px}
.intro .eyebrow{color:var(--blue)}
.intro h2{font-size:clamp(1.65rem,3.2vw,2.5rem); color:var(--pine-deep); margin-top:14px; letter-spacing:-.01em}
.intro p{color:var(--ink-soft); font-size:1.08rem; margin-top:20px}
.intro p strong{color:var(--ink); font-weight:600}

/* Fließtext-Block */
.text{max-width:770px; margin:0 auto}
.text h3{font-size:1.42rem; color:var(--pine-deep); margin:44px 0 14px}
.text h4{font-size:1.14rem; color:var(--pine-deep); margin:30px 0 10px; font-weight:600}
.text p{color:var(--ink-soft); margin-bottom:16px}
.text p strong{color:var(--ink); font-weight:600}
.text ul{margin:6px 0 22px; padding:0; list-style:none}
.text ul li{position:relative; padding:5px 0 5px 24px; color:var(--ink-soft)}
.text ul li::before{content:""; position:absolute; left:3px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--moss)}

/* ==========================================================================
   PORTRÄTS — bisher nur auf „Über uns"
   Breite des Textblocks (770px), damit Bild und Text dieselbe Kante haben.
   ========================================================================== */
.portrait-breit{
  max-width:770px; margin:0 auto;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 20px 44px rgba(36,49,43,.12);
}
.portrait-breit img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}

.portrait-paar{
  max-width:770px; margin:34px auto 30px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.portrait-einzeln{margin:0}
.portrait-einzeln .rahmen{
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 16px 36px rgba(36,49,43,.10);
}
.portrait-einzeln img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.portrait-einzeln figcaption{
  margin-top:12px; text-align:center;
  font-family:var(--display); font-size:1.05rem; color:var(--pine-deep);
}
@media(max-width:640px){
  .portrait-paar{grid-template-columns:1fr; gap:28px; margin-top:28px}
}

/* ==========================================================================
   LEIT-TRIAS — die drei Kernsätze, in Bordeaux akzentuiert
   ========================================================================== */
.trias{background:var(--offwhite); padding:104px 0; text-align:center; position:relative; overflow:hidden}
.trias .wrap{max-width:760px; position:relative; z-index:1}
.trias-engel{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  height:min(76%,340px); opacity:.05; pointer-events:none; z-index:0;
}
.trias-worte{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 20px;
  font-family:var(--display); font-size:clamp(1.5rem,3.6vw,2.5rem); color:var(--bordeaux); letter-spacing:-.01em;
}
.trias-worte .strich{color:var(--moss); font-weight:300}
.trias p{
  font-family:var(--display); font-size:clamp(1.2rem,2.3vw,1.6rem);
  color:var(--pine-deep); margin-top:26px; line-height:1.4;
}
.trias .arbeitsweise{
  font-style:italic; color:var(--clay); font-size:clamp(1.05rem,2vw,1.3rem); margin-top:20px;
}

/* Leitsatz im Fließtext — klein, aber erkennbar aus der Leit-Trias */
.leitsatz{
  font-family:var(--display); font-style:italic; color:var(--clay);
  font-size:clamp(1.05rem,2vw,1.25rem); margin-top:22px;
}

/* Freigestellter Versprechen-Satz */
.versprechen{background:var(--sand-soft); padding:120px 0; text-align:center}
.versprechen p{
  font-family:var(--display); font-size:clamp(1.7rem,4vw,3rem); color:var(--pine-deep);
  line-height:1.3; max-width:16ch; margin:0 auto; letter-spacing:-.015em;
}
.versprechen .quelle{font-family:var(--body); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:30px}
/* Nur dort, wo in diesem Block die Leit-Trias selbst steht (bisher „Über uns").
   Rot wie die Figur — so steht die Unterschrift auch auf der Visitenkarte.
   Die uebrigen zehn .versprechen-Bloecke tragen andere Saetze und bleiben gruen. */
.versprechen.marke p{color:var(--bordeaux)}

/* ==========================================================================
   DER WEG — vier Schritte
   ========================================================================== */
.weg{background:var(--sand-soft); position:relative}
.weg-track{position:relative; margin-top:20px}
.weg-line{
  position:absolute; left:0; right:0; top:34px; height:2px;
  background:repeating-linear-gradient(90deg,var(--moss) 0 14px,transparent 14px 26px); opacity:.55;
}
.weg-line::after{content:""; position:absolute; right:-2px; top:-5px; border:6px solid transparent; border-left-color:var(--moss)}
.weg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px; position:relative}
.step{position:relative}
.step .node{
  width:70px; height:70px; border-radius:50%; background:var(--offwhite);
  border:2px solid var(--moss); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.5rem; color:var(--pine); position:relative; z-index:2;
  box-shadow:0 6px 20px rgba(47,107,79,.14); transition:transform .3s ease, background .3s, color .3s, border-color .3s;
}
.step:hover .node{transform:translateY(-4px); background:var(--pine); color:#fff; border-color:var(--pine)}
.step h3{font-size:1.28rem; color:var(--pine-deep); margin:26px 0 8px}
.step p{color:var(--ink-soft); font-size:.98rem}
.step em{font-family:var(--display); font-style:italic; color:var(--clay); font-size:.92rem; display:block; margin-top:6px}

/* ==========================================================================
   KARTEN
   ========================================================================== */
.cards{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
.card{
  grid-column:span 2; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:30px 28px; transition:transform .28s ease, box-shadow .28s ease, border-color .28s;
  position:relative; overflow:hidden; display:block;
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--amber); transform:scaleY(0); transform-origin:top; transition:transform .3s ease}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(36,49,43,.10); border-color:transparent}
.card:hover::before{transform:scaleY(1)}
.card .said{font-family:var(--display); font-style:italic; font-size:1.16rem; color:var(--pine-deep); line-height:1.35}
.card .arrow{color:var(--moss); margin:16px 0 6px; font-size:1.1rem}
.card .offer{font-weight:600; font-size:1.02rem; color:var(--clay)}
.cards.fuenf .card:nth-child(4),.cards.fuenf .card:nth-child(5){grid-column:span 3}

/* Themenkarten der Verteilseiten */
.themen{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.thema{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .28s ease, box-shadow .28s ease;
}
.thema:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(36,49,43,.12)}
.thema-bild{height:186px; background:var(--sand); position:relative; overflow:hidden}
/* Kachel ohne Foto: die Wort-Bild-Marke als ruhiges Zeichen statt leerer Fläche */
.thema-bild.ohne-foto{
  background:linear-gradient(145deg,var(--sand-soft),var(--sand));
  display:flex; align-items:center; justify-content:center;
}
.thema-bild.ohne-foto img{
  width:auto; height:56%; opacity:.22; object-fit:contain;
  transition:opacity .4s ease, transform .6s ease;
}
.thema:hover .thema-bild.ohne-foto img{opacity:.34; transform:scale(1.05)}
.thema-bild img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.thema:hover .thema-bild img{transform:scale(1.05)}
.thema-inhalt{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.thema h3{font-size:1.3rem; color:var(--pine-deep); margin-bottom:10px}
.thema p{color:var(--ink-soft); font-size:.98rem; flex:1}
.thema .mehr{display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--amber-deep); font-weight:600; font-size:.92rem}
.thema .mehr span{transition:transform .25s ease}
.thema:hover .mehr span{transform:translateX(5px)}

/* Servicekarten — nur „Ihr Weg zu uns“, bewusst anders als Themenkarten */
.servicecards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.service{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 28px 30px;
  display:flex; flex-direction:column; transition:transform .28s ease, box-shadow .28s ease, border-color .28s;
}
.service:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(36,49,43,.10); border-color:var(--moss)}
.service .ico{
  width:54px; height:54px; border-radius:50%; background:var(--sand-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--pine); flex-shrink:0;
}
.service .ico svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.service:hover .ico{background:var(--pine); color:#fff}
.service h3{font-size:1.24rem; color:var(--pine-deep); margin-bottom:12px}
.service ul{list-style:none; margin:0; padding:0; flex:1}
.service ul li{color:var(--ink-soft); font-size:.97rem; padding:3px 0}
.service .mehr{display:inline-flex; align-items:center; gap:8px; margin-top:20px; color:var(--amber-deep); font-weight:600; font-size:.92rem}
.service .mehr span{transition:transform .25s ease}
.service:hover .mehr span{transform:translateX(5px)}

/* ==========================================================================
   LEBENSPHASEN-TABELLE
   ========================================================================== */
.phasen{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.phasen-zeile{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
  padding:22px 30px; border-bottom:1px solid var(--line); transition:background .22s ease;
}
.phasen-zeile:last-child{border-bottom:0}
.phasen-zeile:hover{background:var(--sand-soft)}
.phasen-zeile .sagt{font-family:var(--display); font-style:italic; font-size:1.12rem; color:var(--pine-deep)}
.phasen-zeile .loesung{display:flex; align-items:center; gap:12px; color:var(--clay); font-weight:600}
.phasen-zeile .loesung::before{content:"→"; color:var(--moss); font-weight:400}
.phasen-kopf{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:16px 30px;
  background:var(--pine-deep); color:#f0cf9c;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
}

/* ==========================================================================
   BAND — Vollbild-Zitat
   ========================================================================== */
.band{position:relative; min-height:76vh; display:flex; align-items:center; overflow:hidden}
.band-media{position:absolute; inset:0; z-index:0}
.band-atmo{position:absolute; inset:0; background:linear-gradient(180deg,#c9d4cf,#8fae94 55%,#3f5f49)}
.band-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.band-photo.loaded{opacity:1}
.band-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(20,40,29,.88) 0%,rgba(20,40,29,.58) 45%,rgba(20,40,29,.18) 100%)}
.band-inner{position:relative; z-index:2; width:100%}
.band-inner .eyebrow{color:#f0cf9c}
.band blockquote{
  font-family:var(--display); font-weight:500; color:var(--offwhite);
  font-size:clamp(1.45rem,3vw,2.3rem); line-height:1.32; max-width:22ch; margin:18px 0 0; letter-spacing:-.005em;
}
.band .sig{color:rgba(255,255,255,.82); margin-top:20px; font-size:1rem; max-width:40ch}
.band .morelink{display:inline-flex; align-items:center; gap:8px; margin-top:26px; color:#f4d9a6; font-weight:600; font-size:.95rem}
.band .morelink span{transition:transform .25s ease}
.band .morelink:hover span{transform:translateX(5px)}

/* ==========================================================================
   AUFKLAPPER
   ========================================================================== */
.acc-sec{padding:56px 0 106px}
.acc-sec .wrap{max-width:860px}
.acc-head{margin-bottom:32px}
.acc-head .eyebrow{color:var(--blue)}
.acc-head h2{font-size:clamp(1.55rem,3vw,2.2rem); color:var(--pine-deep); margin-top:12px}
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:26px 8px 26px 0; display:flex; align-items:center; gap:20px;
  font-family:var(--body); color:var(--ink); transition:color .2s;
}
.acc-btn:hover{color:var(--pine)}
.acc-num{font-family:var(--display); font-size:1.05rem; color:var(--moss); min-width:28px}
.acc-title{font-family:var(--display); font-size:1.3rem; font-weight:500; flex:1; color:var(--pine-deep)}
.acc-ico{width:30px; height:30px; border:1.5px solid var(--moss); border-radius:50%; position:relative; flex-shrink:0; transition:background .25s, border-color .25s}
.acc-ico::before,.acc-ico::after{content:""; position:absolute; background:var(--pine); transition:transform .3s, background .25s}
.acc-ico::before{width:12px; height:1.6px; top:50%; left:50%; transform:translate(-50%,-50%)}
.acc-ico::after{width:1.6px; height:12px; top:50%; left:50%; transform:translate(-50%,-50%)}
.acc-item.open .acc-ico{background:var(--pine); border-color:var(--pine)}
.acc-item.open .acc-ico::before,.acc-item.open .acc-ico::after{background:#fff}
.acc-item.open .acc-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.3,.7,.3,1)}
.acc-body{padding:2px 8px 34px 48px; color:var(--ink-soft)}
.acc-body p{margin-bottom:14px}
.acc-body ul{margin:8px 0 16px; padding:0; list-style:none}
.acc-body ul li{position:relative; padding:5px 0 5px 22px; font-size:1rem; color:var(--ink)}
.acc-body ul li::before{content:""; position:absolute; left:2px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--moss)}

.note{background:var(--blue-soft); border-left:3px solid var(--blue); padding:15px 20px; border-radius:0 10px 10px 0; color:var(--ink); font-size:.98rem; margin:6px 0 18px}
.note.warm{background:var(--sand-soft); border-left-color:var(--amber)}
.note.mark{background:var(--bordeaux-soft); border-left-color:var(--bordeaux)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px}
.chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.86rem; color:var(--ink-soft)}
.step3{display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px}
.step3 .s{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px}
.step3 .s h4{margin:0 0 6px; font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--pine-deep)}
.step3 .s .k{display:inline-block; font-family:var(--display); color:var(--amber-deep); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px}

/* ==========================================================================
   HONORAR-TABELLE
   ========================================================================== */
.preise{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:26px 0}
.preis{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline; padding:20px 28px; border-bottom:1px solid var(--line)}
.preis:last-child{border-bottom:0}
.preis h4{font-size:1.1rem; color:var(--pine-deep); font-weight:600}
.preis .dauer{display:block; font-family:var(--body); font-size:.88rem; color:var(--ink-soft); margin-top:4px; font-weight:400}
.preis .betrag{font-family:var(--display); font-size:1.32rem; color:var(--clay); white-space:nowrap}

/* ==========================================================================
   FORMULAR
   ========================================================================== */
.formular{background:#fff; border:1px solid var(--line); border-radius:20px; padding:40px 38px; box-shadow:0 14px 40px rgba(36,49,43,.06)}
.feldreihe{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.feld{margin-bottom:20px}
.feld label{display:block; font-size:.86rem; font-weight:600; color:var(--pine-deep); margin-bottom:7px}
.feld .opt{font-weight:400; color:var(--ink-soft)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--offwhite); border:1.5px solid var(--line); border-radius:11px;
  padding:13px 16px; transition:border-color .22s ease, background .22s ease;
}
.feld input:focus,.feld textarea:focus{outline:none; border-color:var(--moss); background:#fff}
.feld textarea{min-height:150px; resize:vertical}

.interessen{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.interesse input{position:absolute; opacity:0; width:0; height:0}
.interesse span{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--offwhite); border:1.5px solid var(--line); border-radius:999px;
  padding:10px 18px 10px 14px; font-size:.94rem; color:var(--ink-soft);
  transition:border-color .2s, background .2s, color .2s;
}
.interesse span::before{
  content:""; width:19px; height:19px; border:1.5px solid var(--moss); border-radius:6px;
  display:inline-block; flex-shrink:0; transition:background .2s, border-color .2s;
  background-repeat:no-repeat; background-position:center; background-size:12px;
}
.interesse:hover span{border-color:var(--moss); color:var(--ink)}
.interesse input:checked + span{background:var(--sand-soft); border-color:var(--pine); color:var(--pine-deep); font-weight:500}
.interesse input:checked + span::before{
  background-color:var(--pine); border-color:var(--pine);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.interesse input:focus-visible + span{outline:2px solid var(--amber-deep); outline-offset:3px}

.zustimmung{display:flex; gap:13px; align-items:flex-start; margin:6px 0 26px}
.zustimmung input{width:19px; height:19px; margin-top:3px; accent-color:var(--pine); flex-shrink:0}
.zustimmung label{font-size:.92rem; color:var(--ink-soft); line-height:1.55}
.zustimmung a{color:var(--pine); text-decoration:underline; text-underline-offset:2px}
.honigtopf{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.fehler{background:#FBEAEA; border-left:3px solid #B4483F; color:#7A2A24; padding:15px 20px; border-radius:0 10px 10px 0; margin-bottom:26px; font-size:.96rem}
.fehler ul{margin:8px 0 0; padding-left:20px}

/* ==========================================================================
   KONTAKTWEGE
   ========================================================================== */
.wege{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:12px}
.weg-karte{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px}
.weg-karte h3{font-size:1.18rem; color:var(--pine-deep); margin-bottom:6px}
.weg-karte .fach{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); font-weight:600; margin-bottom:14px; display:block}
.weg-karte p{color:var(--ink-soft); font-size:.96rem; margin-bottom:12px}
.kontaktzeile{display:flex; align-items:center; gap:12px; padding:9px 0; color:var(--ink)}
.kontaktzeile svg{width:19px; height:19px; stroke:var(--moss); fill:none; stroke-width:1.7; flex-shrink:0}
.kontaktzeile a{color:var(--pine); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(47,107,79,.3)}
.kontaktzeile a:hover{text-decoration-color:var(--pine)}
.fehlt{background:var(--bordeaux-soft); color:var(--bordeaux); padding:2px 9px; border-radius:5px; font-size:.86rem; font-weight:600}

.karten-knopf{display:inline-flex; align-items:center; gap:8px; background:var(--offwhite); border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:.9rem; color:var(--ink-soft); margin:6px 8px 0 0; transition:border-color .2s, color .2s}
.karten-knopf:hover{border-color:var(--moss); color:var(--pine)}

/* ==========================================================================
   KNÖPFE
   ========================================================================== */
.btn{
  font-family:var(--body); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  padding:15px 28px; border-radius:999px; cursor:pointer; display:inline-block;
  transition:transform .2s ease, background .25s, box-shadow .25s, border-color .25s;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--amber); color:#3a2a10; box-shadow:0 8px 24px rgba(180,120,30,.35)}
.btn-primary:hover{transform:translateY(-2px); background:#e6a94e; box-shadow:0 12px 30px rgba(180,120,30,.45)}
.btn-ghost{border-color:rgba(255,255,255,.6); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}

/* Abschluss */
.close{background:var(--sand-soft); text-align:center; padding:104px 0}
.close .wrap{max-width:740px}
.close h2{font-size:clamp(1.9rem,4vw,3rem); color:var(--pine-deep); max-width:20ch; margin:16px auto 0}
.close .lead{font-family:var(--display); font-size:clamp(1.35rem,2.6vw,1.95rem); color:var(--pine-deep); line-height:1.35}
.close p{color:var(--ink-soft); max-width:48ch; margin:18px auto 0}
.close .cta-row{justify-content:center; margin-top:32px}
.close .btn-ghost{border-color:var(--pine); color:var(--pine)}
.close .btn-ghost:hover{background:rgba(47,107,79,.08)}

/* ==========================================================================
   FUSSBEREICH
   ========================================================================== */
footer{background:var(--pine-deep); color:rgba(250,247,241,.8); padding:68px 0 38px}
.foot-top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; border-bottom:1px solid rgba(250,247,241,.14); padding-bottom:38px}
.foot-brand img{height:52px; width:auto; filter:brightness(0) invert(1); opacity:.92}
.foot-marke{display:inline-flex; align-items:center; gap:14px}
.foot-marke b{
  font-family:var(--display); font-weight:600; font-size:1.24rem;
  color:var(--offwhite); letter-spacing:-.01em;
}
.foot-brand p{margin-top:16px; font-family:var(--display); font-style:italic; color:#f0cf9c; max-width:30ch}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap}
.foot-col h4{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#f0cf9c; margin:0 0 14px; font-family:var(--body); font-weight:600}
.foot-col a{display:block; color:rgba(250,247,241,.78); font-size:.92rem; padding:5px 0; transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:26px; font-size:.82rem; color:rgba(250,247,241,.7)}
/* Die Leit-Trias stand hier in .55 Deckkraft bei .82rem — auf dem Bildschirm
   „sehr fein, schlecht zu lesen" (Kunde, 06.08.2026). Sie ist der Kernsatz der
   Marke und darf nicht das Blasseste auf der Seite sein. Jetzt in der
   Auszeichnungsschrift, größer und im Amber des Fußbereichs. */
.foot-bottom span:first-child{
  font-family:var(--display); font-size:1.02rem; color:#f0cf9c; letter-spacing:.01em;
}
.foot-bottom a{color:rgba(250,247,241,.7)}
.foot-bottom a:hover{color:#fff}

/* ==========================================================================
   RECHTSSEITEN
   ========================================================================== */
.rechtshero{background:var(--pine-deep); color:var(--offwhite); padding:150px 0 64px}
.rechtshero h1{color:#fff; font-size:clamp(2rem,4vw,2.9rem)}
.rechtshero p{color:#f0cf9c; font-family:var(--display); font-style:italic; margin-top:12px}
.recht{padding:70px 0 100px}
.recht .wrap{max-width:800px}
.recht h2{font-size:1.5rem; color:var(--pine-deep); margin:44px 0 14px}
.recht h2:first-child{margin-top:0}
.recht h3{font-size:1.14rem; color:var(--pine-deep); margin:28px 0 10px; font-weight:600}
.recht p{color:var(--ink-soft); margin-bottom:14px}
.recht a{color:var(--pine); text-decoration:underline; text-underline-offset:2px}
.recht ul{margin:6px 0 20px; padding:0; list-style:none}
.recht ul li{position:relative; padding:4px 0 4px 22px; color:var(--ink-soft)}
.recht ul li::before{content:""; position:absolute; left:2px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--moss)}
.bildliste{display:grid; gap:12px; margin:18px 0 26px}
.bildliste div{background:#fff; border:1px solid var(--line); border-radius:11px; padding:14px 18px; font-size:.92rem; color:var(--ink-soft)}
.bildliste b{color:var(--ink); font-weight:600}

/* ==========================================================================
   EINBLENDEN
   ========================================================================== */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1; transform:none}

/* ==========================================================================
   SCHMALE BILDSCHIRME
   ========================================================================== */
@media(max-width:1100px){
  /* Zwischen 900 und 1100 Pixeln wird der Navigationsbalken eng: fünf
     Menüpunkte, der Kontaktknopf und der Schriftzug müssen nebeneinander
     passen. Knapp oberhalb der Burger-Grenze (900px) reicht der Platz sonst
     nicht mehr, seit der Knopf sein richtiges Innenmaß hat. */
  .navlinks{gap:18px; font-size:.86rem}
  .navlinks > a.navcta{padding:7px 14px}
}
@media(max-width:960px){
  /* Letzte 60 Pixel vor der Burger-Grenze: hier berührte der Schriftzug sonst
     das Menü. Beide Zeilen der Marke sind exakt gleich breit (224px), das
     Ausblenden der Unterzeile brächte also nichts — nur Verkleinern hilft. */
  .brand img{height:44px}
  .brand-text b{font-size:1.02rem}
  .brand-text span{font-size:.55rem; letter-spacing:.16em}
}
@media(max-width:1000px){
  .themen{grid-template-columns:repeat(2,1fr)}
  .servicecards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .navlinks{display:none}
  .burger{display:block}
  .cards{grid-template-columns:1fr}
  .card,.cards.fuenf .card:nth-child(4),.cards.fuenf .card:nth-child(5){grid-column:span 1}
  .themen,.servicecards,.wege{grid-template-columns:1fr}
  .feldreihe{grid-template-columns:1fr; gap:0}
  .weg-grid{grid-template-columns:1fr; gap:14px}
  .weg-line{
    left:34px; right:auto; top:0; bottom:0; width:2px; height:auto;
    background:repeating-linear-gradient(180deg,var(--moss) 0 14px,transparent 14px 26px);
  }
  .weg-line::after{display:none}
  .step{display:grid; grid-template-columns:70px 1fr; gap:20px; align-items:start; padding:10px 0}
  .step h3{margin-top:12px}
  .section{padding:80px 0}
  .trias,.versprechen,.close{padding:80px 0}
  .wrap,.wrap-narrow{padding:0 22px}
  .nav,.nav.scrolled{padding:12px 22px}
  .brand img{height:38px}
  .brand-text b{font-size:1.02rem}
  .formular{padding:30px 24px}
  .acc-body{padding-left:8px}
  .values .wrap{gap:6px 20px}
  .phasen-zeile,.phasen-kopf{grid-template-columns:1fr; gap:8px}
  .phasen-kopf{display:none}
  .preis{grid-template-columns:1fr; gap:6px}
  .trias-engel{opacity:.04; right:-80px}
}
@media(max-width:560px){
  body{font-size:16px}
  .brand-text{display:none}
  .subhero{min-height:58vh}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1; transform:none}
  .hero-photo,.band-photo,.subhero-photo{opacity:1}
  .acc-panel{transition:none!important}
}

@media print{
  .nav,.mobilnav,.burger,.scrollhint,.close,.band{display:none!important}
  body{background:#fff}
  .hero,.subhero{min-height:auto; padding:40px 0}
  .hero-scrim,.subhero-scrim,.hero-media,.subhero-media{display:none}
  .hero h1,.subhero h1{color:var(--ink); text-shadow:none}
}