/* ===========================================================================
   ukmc.de — Designsystem, 29.07.2026

   Konzept: eine Akte, keine Website. Nummerierte Kapitel mit stehender
   Marginalspalte, Haarlinien statt Kästen, Playfair trägt, Jost begleitet,
   warmes Papier, Rot nur dort, wo jemand handeln soll. Bildtafeln
   unterbrechen die Akte wie Tafeln in einem Buch.
   =========================================================================== */
:root{
  --navy:#1b2559;  --navy-t:#0e1433;
  --rot:#c01019;   --rot-t:#930c13;

  --papier:#ffffff;
  --creme:#faf7f2;
  --linie:#e6e1d8;
  --linie-f:#efebe4;
  --text:#171a2e;  --text-l:#5c6178;  --text-xl:#9a9fb0;

  --ez:cubic-bezier(.19,.72,.28,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding, damit Anker nicht unter dem festen Kopf landen und die
   Seite beim Springen nicht nachkorrigieren muss */
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:Jost,system-ui,sans-serif;font-weight:300;background:var(--papier);
  color:var(--text);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;
  letter-spacing:.004em}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;
  line-height:1.12;letter-spacing:-.012em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* ---------- Kopf ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:70;transition:.4s var(--ez)}
header.fest{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--linie-f)}
.kopf{display:flex;align-items:center;gap:40px;height:100px;transition:height .4s var(--ez)}
header.fest .kopf{height:78px}
.marke{flex:none}
.marke img{height:64px;width:auto;transition:height .4s var(--ez)}
header.fest .marke img{height:52px}
.marke .hell{display:block} .marke .dunkel{display:none}
header.fest .marke .hell{display:none} header.fest .marke .dunkel{display:block}
nav{display:flex;gap:26px;margin-left:10px;margin-top:9px}
nav a{text-decoration:none;font-size:11.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.72);transition:color .3s;
  position:relative;padding:8px 0;white-space:nowrap}
nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rot);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ez)}
nav a:hover{color:#fff}
nav a:hover::after,nav a.hier::after{transform:scaleX(1)}
nav a.hier{color:#fff}
header.fest nav a{color:#3e4562}
header.fest nav a:hover,header.fest nav a.hier{color:var(--navy)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:22px;margin-top:9px}
.kopf-rechts::before{content:'';width:1px;height:26px;background:rgba(255,255,255,.22);
  flex:none;margin-right:2px;transition:background .4s var(--ez)}
header.fest .kopf-rechts::before{background:var(--linie)}
.tel{text-decoration:none;font-size:17px;font-weight:400;color:#fff;white-space:nowrap;
  transition:.25s;font-variant-numeric:tabular-nums;letter-spacing:.03em}
header.fest .tel{color:var(--navy)}
.tel:hover{color:var(--rot)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--rot);color:#fff;text-decoration:none;font-weight:500;font-size:12px;
  padding:15px 30px;border:1px solid var(--rot);cursor:pointer;font-family:inherit;
  transition:.28s var(--ez);white-space:nowrap;letter-spacing:.14em;text-transform:uppercase}
.knopf:hover{background:var(--rot-t);border-color:var(--rot-t)}
.knopf.linie{background:transparent;color:var(--navy);border-color:var(--linie)}
.knopf.linie:hover{background:transparent;border-color:var(--navy)}
.knopf.hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.knopf.hell:hover{background:rgba(255,255,255,.1);border-color:#fff}
.brenner{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
header.fest .brenner{color:var(--navy)}

/* Aufgeklapptes Menü (mobil) */
.menue-flaeche{display:none;position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.98);
  backdrop-filter:blur(18px);padding:130px 40px 40px;flex-direction:column;gap:6px}
.menue-flaeche.an{display:flex}
.menue-flaeche a{text-decoration:none;font-family:"Playfair Display",serif;font-size:26px;
  color:var(--navy);padding:12px 0;border-bottom:1px solid var(--linie-f)}
.menue-flaeche .tel-gross{font-family:Jost,sans-serif;font-size:19px;margin-top:22px;
  border-bottom:none;color:var(--rot)}

/* ---------- Eyebrow ---------- */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--rot);
  margin-bottom:14px}
.eyebrow::before{content:'';width:42px;height:2px;background:currentColor;flex:none;
  transform-origin:left center;transition:transform .8s var(--ez) .1s}
.eyebrow.rv::before{transform:scaleX(0)}
.eyebrow.rv.in::before{transform:scaleX(1)}
.eyebrow.hell{color:rgba(255,255,255,.92)}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  padding:170px 0 0;overflow:hidden;background:var(--navy-t)}
.hero-bild{position:absolute;inset:0;z-index:0;
  background:url('/assets/hero_leuchtturm.jpg') 52% 45%/cover no-repeat;
  animation:heran 22s ease-out forwards}
@keyframes heran{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero-bild::after{content:'';position:absolute;inset:0;background:
  linear-gradient(97deg,rgba(14,20,51,.93) 0%,rgba(14,20,51,.8) 40%,rgba(14,20,51,.36) 72%,rgba(14,20,51,.24) 100%),
  linear-gradient(180deg,rgba(14,20,51,.6) 0%,transparent 22%,transparent 58%,rgba(14,20,51,.72) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-text{max-width:840px;padding-bottom:92px}
.hero h1{font-size:clamp(38px,5.6vw,72px);color:#fff;margin:0;line-height:1.06;
  max-width:15ch;text-wrap:balance;text-shadow:0 2px 30px rgba(14,20,51,.5)}
.hero h1 i{font-style:italic}
.nach{font-family:"Playfair Display",serif;font-style:italic;
  font-size:clamp(20px,2.4vw,29px);color:rgba(255,255,255,.7);margin-top:16px}
.vor{font-size:18px;color:rgba(255,255,255,.72);max-width:600px;margin-top:28px}
.vor b{color:#fff;font-weight:500}
.scroll-hin{position:absolute;right:44px;bottom:34px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:13px;text-decoration:none;
  color:rgba(255,255,255,.62);transition:color .3s}
.scroll-hin:hover{color:#fff}
.scroll-hin span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.scroll-hin i{display:block;width:1px;height:44px;background:linear-gradient(180deg,
  rgba(255,255,255,.55),rgba(255,255,255,0));position:relative;overflow:hidden}
.scroll-hin i::after{content:'';position:absolute;left:0;top:0;width:1px;height:14px;
  background:#fff;animation:tropfen 2.6s var(--ez) infinite}
@keyframes tropfen{0%{transform:translateY(-16px);opacity:0}
  35%{opacity:1}100%{transform:translateY(46px);opacity:0}}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{position:relative;background:var(--navy-t);color:#fff;
  padding:190px 0 84px;overflow:hidden}
.seitenkopf::before{content:'';position:absolute;inset:0;
  background:url('/assets/sturm_wellen.jpg') center 30%/cover no-repeat;opacity:.16}
.seitenkopf::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,20,51,.4),rgba(14,20,51,.85))}
.seitenkopf .wrap{position:relative;z-index:2}
.seitenkopf .pfad{font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.5);
  margin-bottom:22px}
.seitenkopf .pfad a{text-decoration:none;transition:color .2s}
.seitenkopf .pfad a:hover{color:#fff}
.seitenkopf h1{font-size:clamp(34px,4.6vw,60px);max-width:18ch;text-wrap:balance}
.seitenkopf h1 i{font-style:italic}
.seitenkopf .lead{color:rgba(255,255,255,.75);margin-top:20px}

/* ---------- Versprechens-Band ---------- */
.uhrband{position:relative;z-index:2;background:#fff;border-bottom:1px solid var(--linie)}
.uhrband .wrap{display:flex;align-items:center;gap:40px;padding-top:26px;padding-bottom:26px}
.uhr-lage{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-l);white-space:nowrap;flex:none}
.uhr-lage .pkt{width:8px;height:8px;border-radius:50%;background:#2f9e5f;flex:none;
  box-shadow:0 0 0 0 rgba(47,158,95,.6);animation:puls 2.6s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(47,158,95,0)}100%{box-shadow:0 0 0 0 rgba(47,158,95,0)}}
.uhr-mitte{flex:1;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-left:1px solid var(--linie);padding-left:40px}
.uhr-mitte .zusage{font-family:"Playfair Display",serif;font-size:clamp(19px,1.9vw,24px);
  color:var(--navy)}
.uhr-mitte .dazu{font-size:14.5px;color:var(--text-l)}
.uhr-wege{display:flex;gap:12px;flex:none}

/* ---------- Kapitel / Akte ---------- */
section{position:relative}
.kapitel{padding:110px 0}
.kapitel.creme{background:var(--creme)}
.kapitel.knapp{padding:84px 0}
.akte{display:grid;grid-template-columns:200px 1fr;gap:76px;align-items:start}
.rail{position:sticky;top:130px}
.rail .nr{font-family:"Playfair Display",serif;font-size:64px;line-height:1;
  color:var(--navy);opacity:.14;margin-bottom:14px}
.rail .name{display:flex;align-items:center;gap:12px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--rot)}
.rail .name::before{content:'';width:26px;height:2px;background:currentColor;flex:none;
  transform-origin:left center;transition:transform .8s var(--ez) .1s}
.rail.rv .name::before{transform:scaleX(0)}
.rail.rv.in .name::before{transform:scaleX(1)}
h2{font-size:clamp(29px,3.6vw,46px);margin-bottom:22px;max-width:21ch;text-wrap:balance}
h2 i{font-style:italic}
.lead{font-size:19px;color:var(--text-l);max-width:620px}
.flie{max-width:680px;display:flex;flex-direction:column;gap:18px;
  font-size:17px;color:var(--text-l)}
.flie b{color:var(--text);font-weight:500}

.tr::before{content:'';position:absolute;top:0;left:50%;width:1px;height:64px;z-index:3;
  transform:translateX(-50%) scaleY(0);transform-origin:top center;
  background:linear-gradient(180deg,var(--rot) 0%,rgba(192,16,25,.35) 55%,transparent 100%);
  transition:transform 1.1s var(--ez)}
.tr.gesehen::before{transform:translateX(-50%) scaleY(1)}

/* ---------- Drei Wege ---------- */
.wege3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px;
  border-top:1px solid var(--linie)}
.weg{padding:40px 36px 36px 0;border-right:1px solid var(--linie);text-decoration:none;
  display:flex;flex-direction:column;transition:.3s var(--ez);position:relative}
.weg:last-child{border-right:none}
.weg:not(:first-child){padding-left:36px}
.weg::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ez)}
.weg:hover::before{transform:scaleX(1)}
.weg h3{font-size:24px;margin-bottom:11px;color:var(--navy)}
.weg p{font-size:16px;color:var(--text-l);flex:1}
.weg .hin{margin-top:24px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--navy);display:flex;align-items:center;gap:10px;
  transition:.3s var(--ez)}
.weg:hover .hin{color:var(--rot);gap:16px}
.weg .hin::after{content:'—'}

/* ---------- Bildtafel ---------- */
.bildzone{position:relative;min-height:600px;display:flex;align-items:center;
  overflow:hidden;padding:120px 0;background:var(--navy-t)}
.bildzone-bg{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:center;transform:scale(1.07);transition:transform 2.4s var(--ez)}
.bildzone.gesehen .bildzone-bg{transform:scale(1)}
.bildzone-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(14,20,51,.92) 0%,rgba(14,20,51,.74) 46%,rgba(14,20,51,.28) 100%)}
.bildzone .wrap{position:relative;z-index:2}
.bildzone-in{max-width:600px;color:#fff}
.bildzone h2{color:#fff}
.bildzone p{color:rgba(255,255,255,.76);font-size:18px;margin-top:18px}

/* ---------- Ablauf-Liste ---------- */
.ablauf{list-style:none;margin-top:50px;border-top:1px solid var(--linie);max-width:760px}
.ablauf li{display:grid;grid-template-columns:96px 1fr;gap:30px;align-items:start;
  padding:34px 0;border-bottom:1px solid var(--linie)}
.ablauf .z{font-family:"Playfair Display",serif;font-size:44px;color:var(--navy);
  opacity:.18;line-height:1;padding-top:2px}
.ablauf h3{font-size:21px;color:var(--navy);margin-bottom:7px}
.ablauf p{font-size:16.5px;color:var(--text-l)}

/* ---------- Finder / Zeilenlisten ---------- */
.finder{margin-top:50px;border-top:1px solid var(--linie)}
.finder.eng{margin-top:34px}
.zeile{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;
  border-bottom:1px solid var(--linie);text-decoration:none;padding:30px 0;
  transition:padding .35s var(--ez)}
.zeile:hover{padding-left:16px}
.zeile .lage{font-size:17.5px;color:var(--text-l);transition:color .25s}
.zeile:hover .lage{color:var(--text)}
.zeile .verf{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.zeile .verf b{font-family:"Playfair Display",serif;font-size:24px;color:var(--navy);
  font-weight:400}
.zeile .verf .hin{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--text-xl);display:flex;align-items:center;gap:9px;
  transition:.3s var(--ez)}
.zeile .verf .hin::after{content:'—'}
.zeile:hover .verf .hin{color:var(--rot);gap:15px}

/* ---------- Themen-Blöcke auf Verfahrens-Seiten ---------- */
/* Der „Wann es passt"-Absatz ist die Antwort der Seite — er steht groß in
   der Serife, aber mit Lesebreite, nicht mit Überschriften-Breite. */
.wann{font-family:"Playfair Display",Georgia,serif;font-weight:400;
  font-size:clamp(21px,2.3vw,28px);line-height:1.42;color:var(--text);
  max-width:34ch;letter-spacing:-.008em}

.block{margin-top:56px}
.block:first-child{margin-top:0}
.block .block-titel{display:flex;align-items:center;gap:14px;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--text-xl);
  margin-bottom:20px}
.block .block-titel::after{content:'';flex:1;height:1px;background:var(--linie)}
.situationen{list-style:none;counter-reset:sit;max-width:700px}
.situationen li{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:20px 0;
  border-bottom:1px solid var(--linie-f);font-size:16.5px;color:var(--text-l)}
.situationen li::before{counter-increment:sit;content:counter(sit,decimal-leading-zero);
  font-family:"Playfair Display",serif;font-size:26px;color:var(--navy);opacity:.25;
  line-height:1.2}
.schluss{margin-top:60px;border-top:1px solid var(--linie);padding-top:44px}
.schluss p{font-family:"Playfair Display",serif;font-style:italic;
  font-size:clamp(20px,2.2vw,26px);color:var(--navy);line-height:1.45;max-width:26ch}
.schluss .tat{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Leistungs-Karten (ergänzende Leistungen) ---------- */
.erg{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;
  border-top:1px solid var(--linie)}
.erg a{padding:36px 32px 32px 0;border-right:1px solid var(--linie);text-decoration:none;
  transition:.3s var(--ez);position:relative}
.erg a:last-child{border-right:none}
.erg a:not(:first-child){padding-left:32px}
.erg a::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ez)}
.erg a:hover::before{transform:scaleX(1)}
.erg h3{font-size:21px;color:var(--navy);margin-bottom:9px}
.erg p{font-size:15.5px;color:var(--text-l)}

/* ---------- Erklär-Muster aus dem Webinar „Sicherheit macht Mut" ---------- */
/* Die Landkarte: fünf Stufen auf der Achse früh → letzte Instanz */
.landkarte{margin-top:44px;max-width:860px}
.landkarte-achse{display:flex;align-items:center;gap:16px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.landkarte-achse span:first-child{color:#2f9e5f}
.landkarte-achse span:last-child{color:var(--rot)}
.landkarte-achse i{flex:1;height:4px;border-radius:2px;position:relative;
  background:linear-gradient(90deg,#2f9e5f 0%,#c08a2e 52%,var(--rot) 100%)}
.landkarte-achse i::after{content:'';position:absolute;right:-1px;top:50%;
  transform:translateY(-50%);border-left:9px solid var(--rot);
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.landkarte-stufen{display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--linie);border-top:none;background:#fff;position:relative}
/* Derselbe Verlauf liegt auf der Oberkante der fünf Spalten — jede Stufe
   trägt ihre Farbe auf der Achse. */
.landkarte-stufen::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2f9e5f 0%,#c08a2e 52%,var(--rot) 100%)}
.landkarte-stufen a{padding:22px 18px 20px;border-right:1px solid var(--linie);
  text-decoration:none;transition:.28s var(--ez);position:relative;display:flex;
  flex-direction:column;gap:7px}
.landkarte-stufen a:last-child{border-right:none}
.landkarte-stufen a::before{content:'';position:absolute;top:3px;left:0;right:0;
  height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ez)}
.landkarte-stufen a:hover::before{transform:scaleX(1)}
.landkarte-stufen a:hover{background:var(--creme)}
.landkarte-stufen b{font-family:"Playfair Display",serif;font-weight:400;
  font-size:17px;color:var(--navy);line-height:1.25}
.landkarte-stufen small{font-size:12.5px;color:var(--text-xl);line-height:1.45}
.landkarte-merk,.merk{margin-top:26px;font-size:16.5px;color:var(--text-l);max-width:640px}
.landkarte-merk b,.merk b{color:var(--navy);font-weight:500}
.merk .fussnote{display:block;margin-top:8px;font-size:12px;color:var(--text-xl)}

/* Die drei Auslöser des Gesetzes — der mittlere ist der Zustand der Wahl */
.ausloeser{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border:1px solid var(--linie);background:#fff;max-width:960px}
.ausloeser > div{padding:30px 28px;border-right:1px solid var(--linie);display:flex;
  flex-direction:column;gap:10px}
.ausloeser > div:last-child{border-right:none}
.ausloeser small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--text-xl)}
.ausloeser h3{font-size:20px;color:var(--navy)}
.ausloeser p{font-size:15px;color:var(--text-l);flex:1}
.ausloeser .folge{font-size:12.5px;line-height:1.5;padding-top:12px;
  border-top:1px solid var(--linie-f);color:var(--text-l)}
.ausloeser .folge.frei{color:var(--navy);font-weight:500}
.ausloeser .mitte{background:var(--creme);border-top:2px solid var(--rot);
  margin-top:-1px}

/* Die Realität in Zahlen — Balken, wurzelskaliert */
.statistik{margin-top:44px;max-width:760px;display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--linie)}
.statistik > div{display:grid;grid-template-columns:200px 1fr 90px;gap:22px;
  align-items:center;padding:16px 0;border-bottom:1px solid var(--linie)}
.statistik .s-name{font-size:15px;color:var(--text-l)}
.statistik i{display:block;height:10px;background:var(--navy);width:var(--b);
  min-width:3px;opacity:.85}
.statistik > div:first-child i{background:var(--rot)}
.statistik b{font-family:"Playfair Display",serif;font-weight:400;font-size:19px;
  color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}

/* Dauer-Zeile unter den Verfahrens-Schritten */
.dauer{margin-top:22px;font-size:16px;color:var(--text-l)}
.dauer b{color:var(--navy);font-weight:500}

/* Querverweis unter jeder Verfahrens-Seite — macht die Schwestern sichtbar */
.weitere{background:var(--creme);border-block:1px solid var(--linie);padding:26px 0}
.weitere .wrap{display:flex;align-items:baseline;gap:12px 26px;flex-wrap:wrap}
.weitere span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--text-xl);margin-right:10px}
.weitere a{text-decoration:none;font-family:"Playfair Display",serif;font-size:18px;
  color:var(--navy);border-bottom:1px solid transparent;transition:.25s}
.weitere a:hover{color:var(--rot);border-bottom-color:var(--rot)}

/* ---------- Video ---------- */
.video{position:relative;overflow:hidden;aspect-ratio:16/8;background:var(--navy-t);
  cursor:pointer;margin-top:50px}
.video img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ez)}
.video:hover img{transform:scale(1.035)}
.video::after{content:'';position:absolute;inset:0;background:rgba(14,20,51,.38);
  pointer-events:none;transition:background .4s}
.video:hover::after{background:rgba(14,20,51,.26)}
.video .start{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;color:#fff}
.video .ring{width:84px;height:84px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;transition:.45s var(--ez)}
.video:hover .ring{border-color:#fff;background:rgba(255,255,255,.08);transform:scale(1.06)}
.video .ring svg{width:20px;height:20px;margin-left:4px}
.video .start b{font-family:"Playfair Display",serif;font-size:19px;font-weight:400;
  font-style:italic}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* ---------- Kanzleien ---------- */
.kanzlei{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:8px}
.kanzlei ul,.punkte{list-style:none;margin-top:30px;border-top:1px solid var(--linie)}
.kanzlei li,.punkte li{display:flex;gap:16px;font-size:16.5px;color:var(--text-l);
  padding:16px 0;border-bottom:1px solid var(--linie-f)}
.kanzlei li i,.punkte li i{font-style:normal;font-family:"Playfair Display",serif;
  color:var(--navy);font-size:14px;flex:none;padding-top:2px;opacity:.35}
.bildkarte{position:relative;overflow:hidden}
.bildkarte img{width:100%;height:500px;object-fit:cover}
.bildkarte .zitat{position:absolute;left:0;right:0;bottom:0;padding:56px 40px 36px;
  background:linear-gradient(180deg,transparent,rgba(14,20,51,.92) 52%);color:#fff}
.bildkarte .zitat p{font-family:"Playfair Display",serif;font-size:22px;line-height:1.42;
  font-style:italic}
.bildkarte .zitat .wer{margin-top:16px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500}

/* ---------- Zahlen ---------- */
.zahlenband{border-block:1px solid var(--linie);background:#fff}
.zahlen{display:grid;grid-template-columns:repeat(4,1fr)}
.zahl{padding:54px 34px 48px 0;border-right:1px solid var(--linie)}
.zahl:last-child{border-right:none}
.zahl:not(:first-child){padding-left:34px}
.zahl b{display:block;font-family:"Playfair Display",serif;font-size:clamp(36px,4.2vw,54px);
  color:var(--navy);line-height:1;margin-bottom:14px;font-weight:400}
.zahl span{font-size:14.5px;color:var(--text-l);line-height:1.5;display:block}

/* ---------- Formular ---------- */
.formular{max-width:640px;margin-top:44px}
.feld{margin-bottom:26px}
.feld label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--text-l);margin-bottom:9px}
.feld label i{font-style:normal;color:var(--rot)}
.feld input,.feld select,.feld textarea{width:100%;font-family:inherit;font-size:17px;
  font-weight:300;color:var(--text);background:transparent;border:none;
  border-bottom:1px solid var(--linie);padding:10px 2px 12px;border-radius:0;
  transition:border-color .3s;-webkit-appearance:none;appearance:none}
.feld select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6178' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
.feld textarea{resize:vertical;min-height:64px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;
  border-bottom-color:var(--navy)}
.feld .warum{font-size:13.5px;color:var(--text-xl);margin-top:7px}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.form-fuss{margin-top:36px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.form-erwartung{font-size:14.5px;color:var(--text-l)}
.form-erwartung b{font-family:"Playfair Display",serif;font-weight:400;
  font-size:17px;color:var(--navy)}
.form-danke{display:none;border-top:2px solid var(--navy);padding-top:30px;max-width:640px}
.form-danke.an{display:block}
.form-danke h3{font-size:24px;color:var(--navy);margin-bottom:10px}
.form-danke p{color:var(--text-l)}
.form-fehler{display:none;font-size:14.5px;color:var(--rot);margin-top:14px}
.form-fehler.an{display:block}
.diskretion{border-left:2px solid var(--navy);padding:6px 0 6px 26px;max-width:640px;
  margin-top:44px}
.diskretion p{font-size:15.5px;color:var(--text-l)}
.diskretion b{color:var(--text);font-weight:500}

/* ---------- Vergleich (Sofort-Termin) ---------- */
.vergleich{margin-top:50px;border-top:1px solid var(--linie);max-width:760px}
.vergleich > div{display:grid;grid-template-columns:190px 1fr;gap:30px;
  padding:30px 0;border-bottom:1px solid var(--linie)}
.vergleich h3{font-size:20px;color:var(--navy)}
.vergleich p{font-size:16.5px;color:var(--text-l)}

/* ---------- Abschluss ---------- */
.abschluss{position:relative;padding:150px 0;text-align:center;color:#fff;
  overflow:hidden;background:var(--navy-t)}
.abschluss .bildzone-bg{background-image:url('/assets/sturm_wellen.jpg');transform:none}
.abschluss .bildzone-bg::after{background:linear-gradient(180deg,rgba(14,20,51,.88),rgba(14,20,51,.94))}
.abschluss .wrap{position:relative;z-index:2}
.abschluss h2{color:#fff;margin:0 auto 22px;max-width:16ch}
.abschluss p{color:rgba(255,255,255,.72);font-size:19px;max-width:580px;margin:0 auto 40px}
.abschluss .wege{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- Fuß ---------- */
footer{background:var(--navy-t);color:rgba(255,255,255,.72);font-size:15px}
.fuss-oben{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:60px;
  padding-top:72px;padding-bottom:56px}
.fuss-marke img{height:74px;width:auto;margin-bottom:22px}
.fuss-marke p{line-height:1.65;font-size:14.5px;color:rgba(255,255,255,.55)}
.fuss-tel{display:inline-block;margin-top:18px;text-decoration:none;font-size:19px;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.03em;transition:.25s}
.fuss-tel:hover{color:#ff6b72}
.fuss-spalte{display:flex;flex-direction:column;gap:11px}
.fuss-spalte b{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:rgba(255,255,255,.42);margin-bottom:8px}
.fuss-spalte a{text-decoration:none;color:rgba(255,255,255,.72);font-size:15px;
  transition:color .25s;width:fit-content}
.fuss-spalte a:hover{color:#fff}
.fuss-unten{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);
  padding-top:26px;padding-bottom:34px;font-size:13.5px;color:rgba(255,255,255,.42)}
.fuss-links{display:flex;gap:24px;flex-wrap:wrap}
.fuss-links a{text-decoration:none;color:rgba(255,255,255,.55);transition:.25s}
.fuss-links a:hover{color:#fff}

/* ---------- Einblenden — bewusst dezent, damit beim Scrollen nichts wippt ---------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s} .rv.d3{transition-delay:.3s}

@media (max-width:1080px){
  nav,.kopf-rechts .knopf,.scroll-hin,.kopf-rechts::before,.kopf-rechts .tel{display:none}
  .brenner{display:block}
  .hero{min-height:0;padding:150px 0 0}
  .hero-text{padding-bottom:56px}
  .seitenkopf{padding:160px 0 64px}
  .uhrband .wrap{flex-direction:column;align-items:stretch;gap:16px}
  .uhr-mitte{border-left:none;padding-left:0}
  .uhr-wege{flex-direction:column}
  .akte{grid-template-columns:1fr;gap:34px}
  .rail{position:static;display:flex;align-items:baseline;gap:18px}
  .rail .nr{font-size:38px;margin:0}
  .wege3,.erg{grid-template-columns:1fr}
  .weg,.erg a{border-right:none;border-bottom:1px solid var(--linie);padding:32px 0!important}
  .weg:last-child,.erg a:last-child{border-bottom:none}
  .ablauf li{grid-template-columns:60px 1fr;gap:20px}
  .zeile{grid-template-columns:1fr;gap:12px}
  .kanzlei{grid-template-columns:1fr;gap:44px}
  .bildkarte img{height:360px}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .zahl{padding:34px 20px 30px 0}
  .zahl:nth-child(2n){border-right:none}
  .kapitel{padding:80px 0}
  .video{aspect-ratio:16/9}
  .feld-reihe{grid-template-columns:1fr}
  .fuss-oben{grid-template-columns:1fr;gap:40px;padding-top:52px}
  .landkarte-stufen,.ausloeser{grid-template-columns:1fr}
  .landkarte-stufen{border-top:1px solid var(--linie)}
  .landkarte-stufen::before{right:auto;bottom:0;width:3px;height:auto;
    background:linear-gradient(180deg,#2f9e5f 0%,#c08a2e 52%,var(--rot) 100%)}
  .landkarte-stufen a,.ausloeser > div{border-right:none;border-bottom:1px solid var(--linie)}
  .landkarte-stufen a:last-child,.ausloeser > div:last-child{border-bottom:none}
  .statistik > div{grid-template-columns:1fr 70px;gap:12px}
  .statistik .s-name{grid-column:1 / -1;padding-top:2px}
  .vergleich > div{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* Der zweite Weg neben dem Rückruf: selbst einen Termin legen. Abgesetzt,
   nicht gleichrangig — der Rückruf bleibt der Hauptweg. */
.form-alternativ{margin-top:28px;padding-top:24px;border-top:1px solid var(--linie,rgba(0,0,0,.1))}
.form-alternativ p{color:var(--text-l);font-size:15px;max-width:46ch;margin-bottom:14px}