/* ===========================================================================
   Finanzberatung Sinsheim — Denis Brunc
   Midnight Navy, Ivory und Champagner. Editorial-Serif + Inter.
   Leitidee: Viele Verträge → ein Ansprechpartner.

   Aufbau:  1 Schriften · 2 Tokens · 3 Basis · 4 Bausteine · 5 Buttons
            6 Header · 7 Hero · 8 Faden · 9 Vergleich · 10 Leistungen
            11 Warum jetzt · 12 Ablauf · 13 Über mich · 14 CTA · 15 Footer
            16 Mobile Leiste + WhatsApp · 17 Rechtsseiten + 404 · 18 Bewegung
   =========================================================================== */

/* --- 1 Schriften (lokal) ------------------------------------------------- */

@font-face{
  font-family:'Playfair Display';
  src:url('../assets/fonts/playfair-display-latin.woff2') format('woff2');
  font-weight:500 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  src:url('../assets/fonts/playfair-display-italic-latin.woff2') format('woff2');
  font-weight:500 700; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Caveat';
  src:url('../assets/fonts/caveat-latin.woff2') format('woff2');
  font-weight:500 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 2 Tokens ------------------------------------------------------------ */

:root{
  --navy-950:#051222;
  --navy-900:#07182F;
  --navy-800:#0B1D38;
  --navy-700:#10264A;
  --navy-600:#1B3560;

  --ivory:   #F6F3EC;
  --ivory-2: #FAF8F3;
  --ivory-3: #EDE6D8;

  --gold:    #D6B36A;
  --gold-2:  #E2C27D;
  --gold-3:  #CFA85E;
  --gold-ink:#86672B;   /* Gold für Text auf hellem Grund — heller Champagner hätte zu wenig Kontrast */

  --ink:     #0B1D38;
  --ink-2:   #3C4960;
  --ink-3:   #5E6879;

  --on-dark:   #F4F1EA;
  --on-dark-2: rgba(244,241,234,.8);
  --on-dark-3: rgba(244,241,234,.62);

  --line-dark: rgba(214,179,106,.2);
  --line-light:rgba(11,29,56,.13);

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --fs-h1: clamp(2.45rem, 1.3rem + 4.1vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.8vw, 3.35rem);
  --fs-h3: clamp(1.2rem, 1.08rem + .45vw, 1.45rem);

  --pad-x: clamp(20px, 4.6vw, 64px);
  --maxw:  1320px;
  --nav-h: 84px;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --out:   cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* --- 3 Basis ------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:72px;
}

body{
  margin:0;
  padding-top:var(--note-h,0px);
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); line-height:1.04; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.2; }

p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
address{ font-style:normal; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--gold); color:var(--navy-900); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--pad-x); top:-120px; z-index:200;
  padding:12px 20px; border-radius:999px;
  background:var(--gold); color:var(--navy-900); font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

/* Grid-Kinder dürfen schrumpfen, sonst drückt langer Text die Spalte über den Rand */
.hero__inner > *, .sig__grid > *, .svc__grid > *, .why__grid > *, .steps__grid > *, .about__grid > *, .foot__grid > *{ min-width:0; }

/* --- 4 Bausteine --------------------------------------------------------- */

.eyebrow{
  margin-bottom:clamp(14px,1.8vw,22px);
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--ink{ color:var(--gold-ink); }

.gold{ color:var(--gold); }
.gold-ink{ color:var(--gold-ink); }

/* Goldlinie zieht sich unter das Wort, sobald die Headline steht */
.gold-u{ position:relative; display:inline-block; }
.gold-u::after{
  content:""; position:absolute; left:.02em; right:.02em; bottom:-.04em; height:.07em;
  border-radius:1em;
  background:linear-gradient(90deg, var(--gold-3), var(--gold-2));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s var(--out) .7s;
}
.is-ready .gold-u::after{ transform:scaleX(1); }

.hand{ font-family:var(--hand); font-weight:600; line-height:1.05; }

/* Einblendung beim Scrollen */
.rv{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease) var(--d,0s), transform .8s var(--out) var(--d,0s);
}
.rv.in{ opacity:1; transform:none; }

/* Zeilen-Reveal: Text schiebt sich aus einer Maske */
.rv-line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.rv-line > span{
  display:inline-block;
  transform:translateY(106%);
  transition:transform .9s var(--out) var(--d,0s);
}
.is-ready .rv-line > span{ transform:none; }

html:not(.js) .rv{ opacity:1; transform:none; }
html:not(.js) .rv-line > span{ transform:none; }

/* Häkchen-Zeile — dezent, ohne Hintergrund */
.trust{ display:flex; flex-wrap:wrap; gap:8px 26px; font-size:.86rem; font-weight:500; color:var(--on-dark-2); }
.trust li{ display:inline-flex; align-items:center; gap:9px; }
.trust svg{ width:18px; height:18px; flex:none; padding:3px; border-radius:50%; color:var(--navy-900); background:var(--gold); }
.trust--center{ justify-content:center; }

.facts{ display:flex; flex-wrap:wrap; gap:14px 30px; }
.facts li{ display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:.96rem; color:var(--ink); }
.facts svg{ width:22px; height:22px; color:var(--gold-ink); flex:none; }

/* Bildzonen: Bild füllt die Zone; beim späteren Tausch nur src ersetzen */
.portrait-zone img{ object-fit:contain; object-position:center bottom; }

/* --- 5 Buttons ----------------------------------------------------------- */

.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:12px 26px;
  border:0; border-radius:999px;
  font-family:var(--sans); font-size:.95rem; font-weight:600; line-height:1.15;
  white-space:nowrap; cursor:pointer;
  transition:translate .45s var(--out), transform .25s var(--spring),
             box-shadow .35s var(--ease), background .35s var(--ease), color .3s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn .arr{ transition:transform .45s var(--spring); }
.btn:hover .arr{ transform:translateX(5px); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover::before{ transform:translateX(120%); }

.btn--gold{
  color:var(--navy-900);
  background:linear-gradient(180deg, var(--gold-2), var(--gold-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 12px 30px -14px rgba(214,179,106,.75);
}
.btn--gold:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 5px rgba(214,179,106,.16), 0 16px 36px -14px rgba(214,179,106,.9); }

.btn--line{ color:var(--on-dark); background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(244,241,234,.4); }
.btn--line:hover{ color:var(--gold-2); box-shadow:inset 0 0 0 1px var(--gold); background:rgba(214,179,106,.08); }
.btn--line::before{ background:linear-gradient(110deg, transparent 32%, rgba(214,179,106,.22) 50%, transparent 68%); }

.btn--sm{ min-height:44px; padding:10px 20px; font-size:.88rem; }
.btn--lg{ min-height:58px; padding:14px 30px; font-size:1rem; }
.btn--block{ width:100%; white-space:normal; }
@media (max-width:420px){ .btn{ white-space:normal; text-align:center; } }

.i-wa{ animation:wiggle 3.6s ease-in-out infinite; transform-origin:50% 60%; }
@keyframes wiggle{
  0%,86%,100%{ transform:rotate(0); }
  89%{ transform:rotate(-14deg); } 92%{ transform:rotate(11deg); }
  95%{ transform:rotate(-6deg); }  98%{ transform:rotate(3deg); }
}

/* --- 6 Header ------------------------------------------------------------ */

.nav{
  position:fixed; inset-inline:0; top:var(--note-h,0px); z-index:90;
  color:var(--on-dark);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--nav-h); transition:height .4s var(--out); }
.nav.is-stuck{
  background:rgba(7,24,47,.86);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(214,179,106,.16), 0 18px 40px -26px rgba(0,0,0,.8);
}
.nav.is-stuck .nav__inner{ height:68px; }

.brand{ display:inline-flex; align-items:center; gap:13px; color:var(--on-dark); }
.mono{ position:relative; flex:none; width:46px; height:44px; font-family:var(--serif); font-weight:500; font-size:2.35rem; line-height:1; }
.mono span{ position:absolute; top:1px; transition:transform .6s var(--spring); }
.mono span:first-child{ left:0; color:var(--gold); }
.mono span:last-child{ left:17px; top:7px; color:var(--on-dark); opacity:.92; }
.brand:hover .mono span:first-child{ transform:translateX(-2px); }
.brand:hover .mono span:last-child{ transform:translateX(3px); }
.brand__txt{ display:grid; line-height:1.15; }
.brand__txt b{ font-family:var(--serif); font-weight:600; font-size:1.02rem; letter-spacing:.14em; text-transform:uppercase; }
.brand__txt span{ margin-top:2px; font-size:.66rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.brand__txt small{ margin-top:3px; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); }

.nav__links{ display:none; gap:clamp(18px,2.4vw,36px); }
.nav__link{ position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; font-weight:500; color:var(--on-dark-2); transition:color .3s var(--ease); }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:8px; height:1.5px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:right center; transition:transform .45s var(--out);
}
.nav__link:hover{ color:var(--on-dark); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after{ transform:scaleX(1); transform-origin:left center; }
.nav__link[aria-current="true"]{ color:var(--gold-2); }

.nav__cta{ display:none; }
.nav__burger{ display:inline-grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:rgba(214,179,106,.14); color:var(--gold-2); cursor:pointer; }
.burger{ display:grid; gap:5px; width:20px; }
.burger i{ display:block; height:1.8px; border-radius:2px; background:currentColor; transition:transform .45s var(--spring), opacity .2s; }
.nav__burger[aria-expanded="true"] .burger i:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .burger i:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] .burger i:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

@media (min-width:1100px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__burger{ display:none; }
}
@media (max-width:420px){ .brand__txt small{ display:none; } }

.menu{
  position:fixed; inset:0; z-index:85;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(96px + var(--note-h,0px)) var(--pad-x) 40px;
  background:radial-gradient(120% 80% at 80% 0%, var(--navy-700), var(--navy-900) 60%);
  color:var(--on-dark);
  clip-path:circle(0% at calc(100% - 44px) 42px);
  transition:clip-path .5s var(--out);
}
.menu.is-open{ clip-path:circle(150% at calc(100% - 44px) 42px); }
.menu__list{ display:grid; gap:2px; }
.menu__list a{
  display:flex; align-items:baseline; gap:14px; padding:7px 0;
  font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,7.6vw,2.5rem);
  opacity:0; transform:translateY(20px);
  transition:opacity .35s var(--ease) var(--d,0s), transform .5s var(--out) var(--d,0s), color .3s;
}
.menu__list a small{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.1em; color:var(--gold); }
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu__list a[aria-current="true"]{ color:var(--gold-2); }
.menu__foot{ margin-top:30px; display:grid; gap:14px; opacity:0; transition:opacity .4s var(--ease) .35s; }
.menu.is-open .menu__foot{ opacity:1; }
.menu__call{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; color:var(--on-dark-2); font-weight:500; }
.menu__call svg{ width:18px; height:18px; color:var(--gold); }
@media (min-width:1100px){ .menu{ display:none; } }
.nav.menu-open{ background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }

/* --- 7 Hero -------------------------------------------------------------- */

.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--navy-900); color:var(--on-dark); }

.hero__bg{ position:absolute; inset:0; z-index:-3; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:72% 55%;
  opacity:.95;
  filter:brightness(1.22) saturate(1.08);
  transform:scale(1.08) translate3d(var(--bx,0px), var(--by,0px), 0);
  transition:transform 1.2s var(--out);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,24,47,.94) 0%, rgba(7,24,47,.76) 30%, rgba(7,24,47,.14) 60%, rgba(7,24,47,.4) 100%),
    linear-gradient(180deg, rgba(7,24,47,.66) 0%, rgba(7,24,47,0) 24%, rgba(7,24,47,0) 72%, rgba(7,24,47,.94) 100%);
}
/* Schmal liegt die Schrift über dem ganzen Bild: oben kräftiger abdunkeln, darunter frei */
@media (max-width:1099.98px){
  .hero__bg::after{
    background:linear-gradient(180deg, rgba(7,24,47,.66) 0%, rgba(7,24,47,.46) 38%, rgba(7,24,47,.14) 60%, rgba(7,24,47,.94) 100%);
  }
}
.hero__light{
  position:absolute; z-index:-2; pointer-events:none;
  width:900px; height:900px; left:34%; top:12%;
  background:radial-gradient(closest-side, rgba(214,179,106,.2), rgba(214,179,106,.06) 55%, transparent 72%);
  animation:breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe{ to{ transform:scale(1.12) translate(-30px, 20px); opacity:.8; } }

.hero__inner{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"text" "portrait" "check" "trust";
  padding-top:calc(var(--nav-h) + 20px);
}

.hero__region{ display:none; position:absolute; right:var(--pad-x); top:calc(var(--nav-h) + 8px); text-align:right; line-height:1.35; }
.hero__region b{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--on-dark); }
.hero__region span{ font-size:.72rem; color:var(--on-dark-3); }

.hero__text{ grid-area:text; position:relative; z-index:3; padding-top:clamp(18px,4vw,40px); }
.hero h1{ color:#fff; margin-bottom:clamp(18px,2.4vw,26px); }
.hero__lead{ max-width:40ch; font-size:clamp(1rem,.95rem + .25vw,1.12rem); color:var(--on-dark-2); margin-bottom:clamp(24px,3vw,34px); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (min-width:1100px){ .hero__actions .btn--lg{ padding-inline:24px; } }
@media (max-width:560px){ .hero__actions .btn{ width:100%; } }

.hero__trust{ grid-area:trust; position:relative; z-index:3; padding:26px 0 30px; }
/* Schmal: zwei Punkte links, zwei rechts — nicht drei und einer */
@media (max-width:759.98px){
  .hero__trust{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:12px clamp(8px,2.6vw,26px); font-size:.78rem; }
  .hero__trust li{ gap:5px; }
  .hero__trust svg{ width:15px; height:15px; padding:2.5px; }
}
/* Ganz schmale Geräte: etwas kleiner, damit jede Zeile ungebrochen bleibt */
@media (max-width:400px){
  .hero__trust{ font-size:.74rem; column-gap:8px; }
  .hero__trust li{ white-space:nowrap; }
}
@media (max-width:374.98px){
  .hero__trust{ font-size:.69rem; column-gap:6px; }
  .hero__trust svg{ width:14px; height:14px; padding:2px; }
}

.hero__portrait{
  grid-area:portrait; position:relative; z-index:1;
  margin:28px auto 0; width:min(86vw, 460px);
  translate:var(--px,0px) var(--py,0px);
  transition:translate 1.8s var(--out);   /* steht ruhig, folgt nur träge */
}
/* Schatten sitzt an der Hülle: Filter und Maske am selben Bild schneiden
   den Schatten an der Bildbox ab, das zeichnet ein sichtbares Rechteck. */
.hero__shade{ position:relative; display:block; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
/* Das Foto schneidet die Arme am linken und rechten Rand ab. Dort läuft die
   Anzugfarbe (am Bildrand gemessen, ~rgb 36 44 68) weich nach außen weiter —
   so entsteht keine harte Kante vor dem hellen Hintergrund, und das Foto
   selbst bleibt voll deckend. */
.hero__shade::before{
  /* Fläche ragt je 25 % über das Foto hinaus; die Bildkanten liegen darin
     bei 16,7 % und 83,3 %. */
  content:""; position:absolute; top:0; bottom:0; left:-25%; right:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(16% 34% at 16.7% 76%, rgb(36,44,68) 0%, rgba(33,41,63,.9) 32%, rgba(26,33,52,.5) 64%, rgba(20,28,46,0) 100%),
    radial-gradient(16% 34% at 83.3% 72%, rgb(35,43,66) 0%, rgba(33,41,63,.9) 32%, rgba(26,33,52,.5) 64%, rgba(20,28,46,0) 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 78%, transparent 98%);
          mask-image:linear-gradient(180deg, #000 78%, transparent 98%);
}
.hero__portrait img{
  width:100%;
  /* Schmale Kante nur an den Bildrändern — dort liegen allein die abgeschnittenen Arme */
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-composite:intersect;
  /* Kein Einblenden über die Deckkraft: das Porträt ist das größte Element der
     Seite und bestimmt den LCP. Es steht sofort da und fährt nur noch hoch. */
  transform:translateY(26px) scale(.985);
  transition:transform 1.1s var(--out) .15s;
}
.is-ready .hero__portrait img, html:not(.js) .hero__portrait img{ transform:none; }

/* Mobil sitzt die Unterschrift über dem dunklen Revers, nicht tiefer: dort
   liegt das weiße Einstecktuch und frisst den Kontrast. */
.hero__sig{
  position:absolute; right:0; bottom:46%;
  display:grid; justify-items:end; gap:2px;
  transform:rotate(-7deg);
  opacity:0; transition:opacity .8s var(--ease) 1.2s;
}
.is-ready .hero__sig, html:not(.js) .hero__sig{ opacity:1; }
.hero__sig .hand{ font-size:clamp(1.7rem,2.6vw,2.4rem); color:var(--on-dark); text-shadow:0 2px 12px rgba(7,24,47,.6); }
.hero__sig small{ font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-shadow:0 1px 6px rgba(7,24,47,.85); }
/* Mobil zweizeilig: einzeilig ist die Goldzeile breiter als die dunkle
   Sakkofläche rechts der Krawatte und läuft aufs weiße Hemd. */
@media (max-width:1099.98px){
  .hero__sig{ text-align:right; }
  .hero__sig small{ line-height:1.6; letter-spacing:.16em; }
  .hero__sig small span{ display:block; }
}

.hero__note{ display:none; position:absolute; right:var(--pad-x); bottom:24px; font-size:1.35rem; color:var(--gold-2); opacity:.9; transform:rotate(-6deg); }

/* --- Vertrags-Check ------------------------------------------------------ */

.check{ grid-area:check; position:relative; z-index:2; margin-top:-36px; padding:clamp(22px,2.6vw,34px) clamp(6px,1.6vw,30px) 10px; }
/* Kein Fenster: eine Haarlinie, die nach unten ausläuft, plus weiches Licht dahinter */
.check::before{
  content:""; position:absolute; inset:0; border-radius:30px; padding:1px; pointer-events:none;
  background:linear-gradient(170deg, rgba(214,179,106,.55), rgba(214,179,106,.12) 38%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.check::after{
  content:""; position:absolute; inset:-6% -8% 6%; z-index:-1; pointer-events:none;
  background:radial-gradient(62% 56% at 50% 32%, rgba(16,38,74,.92), rgba(7,24,47,0) 74%);
}

.check__title{ font-size:clamp(1.55rem,1.25rem + 1vw,2.05rem); color:#fff; text-align:center; }
.check__sub{ margin:6px auto 0; max-width:34ch; text-align:center; font-size:.92rem; color:var(--on-dark-2); }

.check__field{ position:relative; margin-top:22px; }
.check__lines{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.check__lines .ln{ fill:none; stroke:rgba(214,179,106,.26); stroke-width:1.2; stroke-dasharray:2 5; stroke-linecap:round; }
.check__lines .ln-on{
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 4px rgba(214,179,106,.65));
  transition:stroke-dashoffset .7s var(--out);
}
.check__lines .ln-on.on{ stroke-dashoffset:0; }

.tiles{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:480px){ .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:86px; padding:12px 6px;
  border:0; border-radius:16px;
  background:linear-gradient(180deg, rgba(20,44,84,.94), rgba(9,26,52,.94));
  box-shadow:inset 0 0 0 1px rgba(214,179,106,.36), 0 10px 24px -18px rgba(0,0,0,.8);
  color:var(--on-dark);
  font-size:.78rem; font-weight:500; line-height:1.15; text-align:center;
  cursor:pointer;
  translate:var(--mx,0px) var(--my,0px);
  transition:transform .4s var(--spring), box-shadow .35s var(--ease), background .35s var(--ease), translate .5s var(--out);
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:479px){
  .tile{ flex-direction:row; justify-content:flex-start; gap:12px; min-height:58px; padding:10px 14px; font-size:.9rem; text-align:left; }
}
.tile svg{ width:26px; height:26px; color:var(--gold); flex:none; transition:transform .5s var(--spring), color .3s; }
.tile:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(226,194,125,.85), 0 0 22px -4px rgba(214,179,106,.45), 0 14px 30px -18px rgba(0,0,0,.9); }
.tile:hover svg{ transform:scale(1.14) rotate(-7deg); }
.tile[aria-pressed="true"]{
  background:linear-gradient(180deg, rgba(214,179,106,.3), rgba(214,179,106,.12));
  box-shadow:inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(214,179,106,.12), 0 16px 34px -18px rgba(214,179,106,.75);
}
.tile[aria-pressed="true"] svg{ color:var(--gold-2); }
.tile__ok{ position:absolute; top:6px; right:6px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--gold); transform:scale(0); transition:transform .45s var(--spring); }
.tile__ok svg{ width:11px; height:11px; color:var(--navy-900); }
.tile[aria-pressed="true"] .tile__ok{ transform:scale(1); }
.tile.pop{ animation:tile-pop .45s var(--spring); }
@keyframes tile-pop{ 45%{ transform:scale(1.07); } }
.tiles.nudge .tile{ animation:nudge .9s var(--ease); }
.tiles.nudge .tile:nth-child(2){ animation-delay:.06s; } .tiles.nudge .tile:nth-child(3){ animation-delay:.12s; }
.tiles.nudge .tile:nth-child(4){ animation-delay:.18s; } .tiles.nudge .tile:nth-child(5){ animation-delay:.24s; }
.tiles.nudge .tile:nth-child(6){ animation-delay:.3s; }
@keyframes nudge{ 35%{ box-shadow:inset 0 0 0 1.5px var(--gold-2), 0 0 26px -2px rgba(214,179,106,.75); transform:translateY(-4px); } }

.check__for{ position:relative; z-index:1; margin-top:18px; text-align:center; font-family:var(--serif); font-size:clamp(1.15rem,1rem + .5vw,1.4rem); color:var(--on-dark-2); }
.swap{ display:inline-block; min-width:3ch; font-style:italic; font-weight:600; color:var(--gold-2); transition:transform .28s var(--out), opacity .2s var(--ease), filter .28s var(--ease); }
.swap.is-out{ transform:translateY(-55%); opacity:0; filter:blur(3px); }
.swap.is-in{ transform:translateY(55%); opacity:0; filter:blur(3px); transition:none; }
.swap-more{ margin-left:.4em; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--gold); }

.check__cta{ position:relative; z-index:1; display:flex; justify-content:center; margin-top:34px; }
.cnt{
  display:inline-grid; place-items:center; height:24px; min-width:0; width:0; padding:0; margin-left:-10px;
  border-radius:999px; background:var(--navy-900); color:var(--gold-2);
  font-size:.78rem; font-weight:700; overflow:hidden;
  transform:scale(0); transition:transform .4s var(--spring), min-width .3s var(--ease), margin .3s var(--ease), padding .3s;
}
.cnt.has{ transform:scale(1); min-width:24px; width:auto; padding:0 7px; margin-left:0; }
.cnt.bump{ animation:bump .45s var(--spring); }
@keyframes bump{ 40%{ transform:scale(1.3); } }

.check__note{ position:relative; z-index:1; margin-top:6px; min-height:2.9em; text-align:center; font-size:.84rem; color:var(--on-dark-3); }

/* Desktop: dreispaltige Bühne, Porträt überlagert Text und Check */
@media (min-width:1100px){
  .hero{ min-height:min(100svh, 980px); }
  .hero__inner{
    min-height:min(100svh, 980px);
    /* Check nie schmaler als 400 px, sonst passt „Versicherung" nicht in die Kachel */
    grid-template-columns:minmax(0,1.38fr) minmax(0,.46fr) minmax(400px,1fr);
    grid-template-rows:1fr auto;
    grid-template-areas:"text portrait check" "trust portrait check";
    column-gap:clamp(12px,1.6vw,28px);
    padding-top:var(--nav-h);
  }
  .hero__region{ display:block; }
  .hero h1{ font-size:clamp(2.7rem, 1.05rem + 2.45vw, 3.6rem); }
  .hero__text{ align-self:center; padding-top:40px; }
  .hero__trust{ padding:0 0 34px; align-self:end; }
  .hero__portrait{ align-self:end; width:auto; margin:0 -92% 0 -64%; }
  .hero__portrait img{
    /* Schmale Kante nur an den Bildrändern — dort liegen allein die abgeschnittenen Arme */
    -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(180deg, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-composite:intersect;
  }
  .hero__sig{ right:auto; left:6%; bottom:9%; justify-items:start; }
  .check{ align-self:center; margin-top:48px; padding-inline:clamp(6px,1.6vw,20px); }
  .tiles{ gap:8px; }
  .tile{ padding:12px 3px; font-size:.72rem; }
  .hero__note{ display:block; }
}
/* Schmale Desktops: Porträt sitzt näher an der Trust-Zeile, Unterschrift weicht nach rechts aus */
@media (min-width:1100px) and (max-width:1179.98px){ .hero__sig{ left:17%; } }

/* --- 8 Goldener Faden ---------------------------------------------------- */

main{ position:relative; }
.thread{ position:absolute; left:0; top:0; z-index:4; width:1px; height:1px; overflow:visible; pointer-events:none; }
.thread path{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(214,179,106,.5)); }
.thread circle{ fill:var(--gold-2); opacity:0; transition:opacity .3s; filter:drop-shadow(0 0 6px rgba(214,179,106,.9)); }
.thread.done circle{ opacity:1; }

/* --- 9 Vergleich: Ohne / Mit Denis --------------------------------------- */

.sig{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(84px,9vw,128px) 0 clamp(70px,8vw,110px); background:var(--ivory); }
.sig__land{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../assets/img/landschaft-hell-1600.webp') center 70% / cover no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.sig__head{ text-align:center; max-width:980px; margin:0 auto clamp(40px,5vw,70px); }
.sig h2{ color:var(--ink); }

/* Der Vergleich läuft als Film in Schleife: --p ist der Aufbau einer Seite,
   --f sagt, welche Seite gerade im Licht steht. Ohne JavaScript steht alles fertig da. */
.scrub{ --p:1; --f:1; }
.js .scrub{ --p:0; --f:.14; }

.sig__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vw,40px); }
@media (min-width:980px){ .sig__grid{ grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr); align-items:center; gap:0; } }

.ohne__head, .mit__head{ position:relative; z-index:3; }
.ohne h3, .mit h3{ font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem); color:var(--ink); }
.ohne__head p, .mit__head p{ margin-top:4px; font-size:.95rem; color:var(--ink-2); max-width:34ch; }

.ohne{ position:relative; min-height:clamp(440px,44vw,520px); }
/* Scheinwerfer auf der Seite, die gerade dran ist */
.ohne::before, .mit::before{
  content:""; position:absolute; z-index:-1; inset:-7% -9%; pointer-events:none;
  background:radial-gradient(56% 50% at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,.4) 52%, rgba(255,255,255,0) 78%);
  opacity:var(--f);
}
.ohne__head, .mit__head{ opacity:calc(.72 + .28 * var(--f)); }
.ohne__labels li, .node, .mit__denis, .mit__stats{ filter:grayscale(calc((1 - var(--f)) * .85)); }
.ohne__img{
  position:absolute; inset:64px -6% 0 -6%; z-index:0; overflow:hidden;
  opacity:calc(.32 + .68 * var(--f));
  /* Runde Blende plus weiche Kanten an allen vier Seiten — sonst bricht das
     Bild am Rand der Maske hart ab und man sieht das Rechteck. */
  -webkit-mask-image:
    radial-gradient(72% 68% at 52% 55%, #000 42%, rgba(0,0,0,.45) 74%, transparent 93%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 68%, transparent 94%);
  -webkit-mask-composite:source-in, source-in;
          mask-image:
    radial-gradient(72% 68% at 52% 55%, #000 42%, rgba(0,0,0,.45) 74%, transparent 93%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 68%, transparent 94%);
          mask-composite:intersect;
}
.ohne__img img{ width:100%; height:100%; object-fit:cover; object-position:48% 40%; filter:saturate(.8); transform:scale(calc(1.14 - .1 * var(--p))); }
.ohne__lines{ position:absolute; left:0; top:64px; width:100%; height:calc(100% - 64px); z-index:1; pointer-events:none; overflow:visible; }
.ohne__lines path{ fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.1; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p)); filter:drop-shadow(0 0 2px rgba(0,0,0,.35)); }
html:not(.js) .ohne__lines path, html:not(.js) .mit__lines path{ vector-effect:non-scaling-stroke; stroke-dasharray:none; }
.ohne__labels{ position:absolute; inset:64px 0 0; z-index:2; }
.ohne__labels li{
  position:absolute; left:var(--x); top:var(--y);
  display:grid; gap:1px; padding:7px 12px 8px;
  border-radius:12px; background:rgba(255,255,255,.95);
  box-shadow:0 10px 24px -14px rgba(11,29,56,.45);
  white-space:nowrap;
  transform:translate(-50%,-50%) rotate(var(--r)) translate(calc((1 - var(--p)) * var(--dx)), calc((1 - var(--p)) * var(--dy)));
  opacity:clamp(0, calc(var(--p) * 2.2 - var(--i) * .14), 1);
}
/* Die Kästen kommen nie zur Ruhe: leichtes Wippen, und reihum meldet sich einer */
.ohne__labels li{
  animation:box-bob 4.6s var(--ease) calc(var(--i) * -.62s) infinite alternate,
            box-alert 6.6s linear calc(var(--i) * -.82s) infinite;
}
@keyframes box-bob{ from{ translate:0 0; } to{ translate:2px -3px; } }
@keyframes box-alert{
  0%, 84%, 100%{ box-shadow:0 10px 24px -14px rgba(11,29,56,.45); }
  90%{ box-shadow:0 10px 24px -14px rgba(11,29,56,.45), 0 0 0 2px var(--gold); }
}
.ohne__labels b{ font-size:.8rem; font-weight:600; color:var(--ink); }
.ohne__labels small{ font-size:.68rem; color:var(--ink-3); }
.ohne__note{ position:absolute; right:4%; bottom:-10px; z-index:3; font-size:1.3rem; color:var(--gold-ink); transform:rotate(-5deg); opacity:clamp(0, calc(var(--p) * 2 - 1), 1); }
@media (max-width:640px){
  .ohne__labels .opt{ display:none; }
  .ohne__labels li{ left:clamp(66px, var(--x), calc(100% - 66px)); }
  .ohne__labels li{ padding:6px 9px; }
  .ohne__labels b{ font-size:.72rem; }
  .ohne__labels small{ font-size:.6rem; }
}

.sig__arrow{ display:grid; place-items:center; color:var(--gold-ink); opacity:calc(.1 + .9 * var(--f)); }
.sig__arrow svg{ width:84px; height:24px; overflow:visible; scale:var(--dir,1) 1; }
/* Lichtpunkt, der beim Wechsel hinüberläuft */
.sig__arrow-dot{ fill:var(--gold); filter:drop-shadow(0 0 5px rgba(214,179,106,.85)); opacity:var(--dot,0); }
.sig__arrow path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p)); }
@media (max-width:979px){ .sig__arrow svg{ transform:rotate(90deg); width:56px; } }

.mit{ position:relative; }
.mit__stage{
  position:relative; height:clamp(350px,34vw,420px); margin-top:10px; container-type:size;
  opacity:calc(.3 + .7 * var(--f));   /* wartet im Dunkeln, bis der Film herüberschwenkt */
}
.mit__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.mit__lines path{
  fill:none; stroke:var(--gold-3); stroke-width:1.5; stroke-dasharray:1; stroke-linecap:round;
  stroke-dashoffset:clamp(0, calc(1 - (var(--p) - .3) * 1.7), 1);
}

.node{
  --X:var(--tx); --Y:var(--ty);
  position:absolute; left:50%; top:44%;
  display:flex; align-items:center; gap:10px;
  font-size:.86rem; font-weight:600; color:var(--ink); white-space:nowrap;
  --k:clamp(0, calc((var(--p) - var(--i) * .03) * 1.3), 1);
  transform:translate(-50%,-50%)
            translate(calc((var(--sx) + (var(--X) - var(--sx)) * var(--k)) * 1cqw),
                      calc((var(--sy) + (var(--Y) - var(--sy)) * var(--k)) * 1cqh));
  opacity:clamp(.12, calc(var(--p) * 3), 1);
}

.node__ico{
  display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--ivory-2); color:var(--navy-800);
  box-shadow:inset 0 0 0 1.5px var(--gold), 0 8px 18px -10px rgba(11,29,56,.45);
  transition:background .35s, color .35s, transform .45s var(--spring);
}
.node__ico svg{ width:21px; height:21px; }
.node:hover .node__ico{ background:var(--gold); color:var(--navy-900); transform:scale(1.08); }
@media (max-width:640px){
  .node{ --X:var(--mtx, var(--tx)); --Y:var(--mty, var(--ty)); flex-direction:column; gap:5px; width:84px; font-size:.7rem; text-align:center; white-space:normal; line-height:1.2; }
  .node__ico{ width:38px; height:38px; }
}

.mit__denis{
  position:absolute; left:50%; top:44%; z-index:2;
  display:grid; justify-items:center; text-align:center;
  transform:translate(-50%,-50%) scale(calc(.72 + .28 * var(--p)));
  opacity:clamp(0, calc(var(--p) * 2 - .2), 1);
}
.mit__face{
  position:relative; display:block; width:clamp(112px,11vw,150px); aspect-ratio:1; border-radius:50%;
  box-shadow:0 0 0 3px var(--gold), 0 0 0 9px rgba(214,179,106,.16), 0 22px 44px -18px rgba(11,29,56,.6);
}
.mit__face img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 30%; }
.mit__face::after{ content:""; position:absolute; inset:-3px; border-radius:50%; box-shadow:0 0 0 0 rgba(214,179,106,.5); animation:halo 2.4s var(--ease) infinite; }
@keyframes halo{ 70%,100%{ box-shadow:0 0 0 22px rgba(214,179,106,0); } }
/* Weicher Lichthof hinter dem Namen: die Linien tauchen darunter ab, ohne Kasten */
.mit__denis b, .mit__denis small{ position:relative; z-index:1; }
.mit__denis::after{
  content:""; position:absolute; left:50%; bottom:-10px; z-index:0; width:260px; height:70px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--ivory) 55%, rgba(246,243,236,0));
}
.mit__denis b{ margin-top:12px; font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--ink); }
.mit__denis small{ font-size:.78rem; color:var(--ink-3); }
@media (max-width:640px){ .mit__denis b{ font-size:1.05rem; margin-top:8px; } .mit__denis small{ font-size:.7rem; } }

.mit__stats{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px clamp(18px,3vw,40px); margin-top:6px;
  opacity:clamp(0, calc((var(--p) - .72) * 4), 1);
}
.mit__stats li{ display:flex; align-items:baseline; gap:8px; font-size:.9rem; font-weight:500; color:var(--ink-2); }
.mit__stats b{ font-family:var(--serif); font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem); font-weight:700; color:var(--gold-ink); line-height:1; }
@media (max-width:640px){
  .mit__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; }
  .mit__stats li{ flex-direction:column; align-items:center; gap:4px; font-size:.78rem; }
}
.mit__note{ position:absolute; left:2%; bottom:52px; font-size:1.3rem; color:var(--gold-ink); transform:rotate(-6deg); opacity:clamp(0, calc((var(--p) - .8) * 5), 1); }
@media (max-width:979px){ .mit__note{ display:none; } }

/* Untereinander läuft kein Film: nichts abdunkeln, nichts anstrahlen */
@media (max-width:979px){
  .ohne::before, .mit::before{ display:none; }
  .ohne__head, .mit__head, .ohne__img, .mit__stage, .sig__arrow{ opacity:1; }
}

/* --- 10 Leistungen ------------------------------------------------------- */

.svc{ position:relative; isolation:isolate; background:var(--navy-900); color:var(--on-dark); }
.svc__grid{ display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){ .svc__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(36px,4vw,72px); } }

.svc__visual{
  position:relative; z-index:2; min-height:340px;
  margin-inline:calc(var(--pad-x) * -1);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(40px,6vw,70px) var(--pad-x) clamp(28px,4vw,48px);
}
@media (min-width:1000px){
  /* Das Bild ragt oben in den hellen Vergleich hinein */
  .svc__visual{ margin:0 0 0 calc(var(--pad-x) * -1); min-height:720px; padding:clamp(60px,6vw,90px) clamp(28px,3vw,48px) clamp(40px,4vw,56px) var(--pad-x); }
}
.svc__img{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.svc__img img{ width:100%; height:100%; object-fit:cover; object-position:30% 50%; filter:brightness(1.4) saturate(1.05); transform:scale(1.06) translateY(var(--iy,0px)); }
.svc__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,24,47,.42) 0%, rgba(7,24,47,.04) 35%, rgba(7,24,47,.3) 70%, rgba(7,24,47,.92) 100%); }
@media (min-width:1000px){
  /* Links weich anlaufen lassen: auf breiten Bildschirmen steht sonst eine
     harte Bildkante im dunklen Grund. */
  .svc__img{
    /* Links lang und weich anlaufen, oben sanft aus dem Übergang kommen —
       sonst steht die Bildkante hart im Navy bzw. an der hellen Szene darüber. */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 14%, #000 34%, #000 60%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%, #000 100%);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 14%, #000 34%, #000 60%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%, #000 100%);
            mask-composite:intersect;
  }
}
/* Breite Bildschirme: Bild bis an den linken Fensterrand ziehen, damit es dort
   ganz ausläuft und keine Bildkante mitten im Navy steht */
@media (min-width:1000px){ .svc__img{ left:min(0px, calc((var(--maxw) - 100vw) / 2)); } }
.svc__intro h2{ color:#fff; }
.svc__intro{ text-shadow:0 2px 16px rgba(7,24,47,.75), 0 1px 3px rgba(7,24,47,.6); }
.svc__intro > p:last-child{ margin-top:10px; font-size:1.05rem; color:var(--on-dark-2); }

/* Steht mitten im Bild, nicht am unteren Rand: das ist das Schaufenster
   zur Zeile, über der gerade der Zeiger steht. */
.svc__mid{ display:none; }
@media (min-width:1000px){
  .svc__mid{ display:block; margin-block:auto; padding-left:clamp(0px,2.2vw,38px); }
}
.svc__caption{ position:relative; max-width:31rem; }
.svc__caption::before{
  content:""; position:absolute; z-index:-1; inset:-16% -16% -20% -14%; pointer-events:none;
  background:radial-gradient(62% 58% at 42% 50%, rgba(7,24,47,.82), rgba(7,24,47,0) 74%);
}
.svc__cap-ico{
  display:grid; place-items:center; width:70px; height:70px; margin-bottom:20px; border-radius:50%;
  color:var(--gold-2); box-shadow:inset 0 0 0 1.5px var(--gold), 0 0 34px -6px rgba(214,179,106,.45);
  background:rgba(7,24,47,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.svc__cap-ico svg{ width:34px; height:34px; }
.svc__caption b{ display:block; font-family:var(--serif); font-size:clamp(1.9rem,1.4rem + 1.1vw,2.45rem); font-weight:600; line-height:1.1; color:#fff; }
.svc__caption p{ margin-top:12px; max-width:27rem; font-size:1.08rem; line-height:1.5; color:var(--on-dark); }
.svc__caption > *{ transition:opacity .3s var(--ease), transform .45s var(--out); }
.svc__caption.swapping > *{ opacity:0; transform:translateY(10px); }

/* Auswahl abschicken */
.svc__act{ margin-top:clamp(22px,3vw,30px); }
.svc__act--mob{ margin-top:26px; }
@media (min-width:1000px){ .svc__act--mob{ display:none; } }
.svc__hint{ margin-top:10px; font-size:.86rem; color:var(--on-dark-3); }


.svc__side{ padding:clamp(34px,5vw,80px) 0 clamp(60px,7vw,100px); display:flex; flex-direction:column; justify-content:center; }

.svc__list li{ position:relative; }
.svc__list li + li .row{ border-top:1px solid var(--line-dark); }
.svc__list li:last-child .row{ border-bottom:1px solid var(--line-dark); }
/* Die Zeile ist eine Schaltfläche: Browser-Grundstil vollständig zurücksetzen,
   sonst stünde sie als graue Systemtaste da. */
.row, a.row, button.row{
  position:relative; appearance:none; -webkit-appearance:none;
  display:grid; grid-template-columns:52px 50px minmax(0,1fr) 28px; align-items:center; gap:clamp(12px,1.6vw,20px);
  width:100%; min-height:84px; padding:14px 4px;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  font:inherit; letter-spacing:inherit; text-align:left; cursor:pointer;
  color:var(--on-dark); -webkit-tap-highlight-color:transparent;
}
.row::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, var(--gold), transparent); transform:scaleX(0); transform-origin:left center; transition:transform .6s var(--out); }
.row__no{ font-family:var(--serif); font-size:1.9rem; font-weight:500; color:var(--gold); line-height:1; }
.row__ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:var(--gold); box-shadow:inset 0 0 0 1px rgba(214,179,106,.5); transition:background .35s var(--ease), color .35s var(--ease), transform .5s var(--spring); }
.row__ico svg{ width:22px; height:22px; }
.row__txt{ display:grid; transition:transform .45s var(--out); }
.row__txt b{ font-family:var(--serif); font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem); font-weight:600; transition:color .3s var(--ease); }
.row__txt small{ font-size:.86rem; color:var(--on-dark-3); }
/* Haken statt Pfeil: die Zeile ist ein Schalter, kein Link */
.row__pick{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  color:transparent; box-shadow:inset 0 0 0 1.5px rgba(214,179,106,.4);
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .45s var(--spring);
}
.row__pick svg{ width:15px; height:15px; }
.row:hover .row__txt, .row.is-active .row__txt{ transform:translateX(6px); }
.row:hover .row__txt b, .row.is-active .row__txt b{ color:var(--gold-2); }
.row:hover .row__ico, .row.is-active .row__ico{ background:var(--gold); color:var(--navy-900); transform:rotate(-8deg); }
.row:hover .row__pick, .row.is-active .row__pick{ box-shadow:inset 0 0 0 1.5px var(--gold); }
.row[aria-pressed="true"] .row__pick{ background:var(--gold); color:var(--navy-900); box-shadow:inset 0 0 0 1.5px var(--gold); transform:scale(1.08); }
.row[aria-pressed="true"] .row__no, .row[aria-pressed="true"] .row__txt b{ color:var(--gold-2); }
.row.is-active::after, .row[aria-pressed="true"]::after{ transform:scaleX(1); }
.row:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:10px; }
/* Platz für den Info-Knopf zwischen Text und Haken */
.row__txt{ padding-right:90px; }
.row__info{
  position:absolute; top:50%; right:44px; z-index:2; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 14px 0 11px; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--gold-2);
  box-shadow:inset 0 0 0 1px rgba(214,179,106,.45);
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.row__info svg{ width:18px; height:18px; }
.row__info:hover, .row__info:focus-visible{ background:var(--gold); color:var(--navy-900); box-shadow:none; }
@media (max-width:560px){
  .row__txt{ padding-right:48px; }
  .row__info{ right:38px; width:44px; padding:0; justify-content:center; }
  .row__info span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:560px){
  .row, a.row, button.row{ grid-template-columns:34px 42px minmax(0,1fr) 28px; min-height:76px; gap:10px; }
  .row__no{ font-size:1.4rem; }
  .row__ico{ width:42px; height:42px; }
}

.svc__quote{ margin-top:clamp(30px,4vw,48px); max-width:30rem; }
.svc__quote .hand{ font-size:1.55rem; color:var(--gold-2); transform:rotate(-3deg); transform-origin:left; }
.svc__quote blockquote{ margin-top:10px; font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,1rem + .5vw,1.4rem); line-height:1.4; color:var(--on-dark); }
.svc__quote span{ display:block; margin-top:8px; font-size:.82rem; letter-spacing:.08em; color:var(--gold); }

/* --- 10b Detailansichten der Dienstleistungen ---------------------------
   Natives <dialog>: Fokusfalle, Esc und inerter Hintergrund kommen vom
   Browser. Mobil ein Blatt, das von unten hochfährt, auf dem Desktop ein
   großes Paneel. Kopf und Aktionsleiste bleiben stehen, nur der Inhalt
   scrollt. Ohne JavaScript stehen die Inhalte einfach im Fluss. */

html.has-info{ overflow:hidden; }

.info{
  position:fixed; inset:0; z-index:120;
  width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0;
  border:0; background:transparent; color:var(--ink); overflow:hidden;
}
.info::backdrop{ background:rgba(5,18,34,0); transition:background .35s var(--ease); }
.info.is-open::backdrop{ background:rgba(5,18,34,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.info[open]{ display:flex; align-items:flex-end; justify-content:center; }

.info__panel{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  width:100%; max-height:calc(100dvh - 18px);
  border-radius:26px 26px 0 0;
  background:var(--ivory-2);
  box-shadow:0 -24px 60px -24px rgba(5,18,34,.6);
  transform:translateY(104%);
  transition:transform .55s var(--out);
}
.info.is-open .info__panel{ transform:none; }
.info.is-closing .info__panel{ transform:translateY(104%); transition:transform .32s var(--ease); }

@media (min-width:760px){
  .info[open]{ align-items:center; padding:clamp(20px,4vh,48px) 24px; }
  .info__panel{
    width:min(920px,100%); max-height:min(90vh,980px); border-radius:28px;
    box-shadow:0 40px 90px -30px rgba(5,18,34,.75), 0 0 0 1px rgba(214,179,106,.25);
    transform:translateY(34px) scale(.975); opacity:0;
    transition:transform .6s var(--out), opacity .35s var(--ease);
  }
  .info.is-open .info__panel{ transform:none; opacity:1; }
  .info.is-closing .info__panel{ transform:translateY(20px) scale(.985); opacity:0; transition:transform .3s var(--ease), opacity .25s var(--ease); }
}

.info__head{
  position:relative; z-index:2; flex:none;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:22px clamp(18px,4vw,40px) 16px;
  border-bottom:1px solid var(--line-light);
}
/* Griff — nur Optik. Das Blatt schließt über das X, Esc, die Zurück-Taste oder den Hintergrund. */
.info__head::before{ content:""; position:absolute; left:50%; top:8px; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:rgba(11,29,56,.16); }
@media (min-width:760px){ .info__head::before{ display:none; } .info__head{ padding-top:26px; } }
.info__ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--navy-900); color:var(--gold-2); box-shadow:0 0 0 5px rgba(214,179,106,.16); }
.info__ico svg{ width:24px; height:24px; }
.info__kicker{ font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }
.info__title h3{ margin-top:2px; font-size:clamp(1.45rem,1.2rem + 1.1vw,2.1rem); color:var(--ink); }
.info__x{
  display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(11,29,56,.06); color:var(--ink); transition:background .3s var(--ease), transform .45s var(--spring);
}
.info__x svg{ width:22px; height:22px; }
.info__x:hover{ background:var(--gold); transform:rotate(90deg); }

.info__body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:clamp(22px,3vw,34px) clamp(18px,4vw,40px) clamp(26px,3vw,40px);
}
.info__claim{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.3; color:var(--gold-ink); }
.info__lead{ margin-top:10px; max-width:62ch; font-size:1.02rem; color:var(--ink-2); }

/* Inhalt läuft gestaffelt ein, sobald das Paneel steht */
.info__body > *{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--out); }
.info.is-open .info__body > *{ opacity:1; transform:none; }
.info.is-open .info__body > :nth-child(2){ transition-delay:.06s; }
.info.is-open .info__body > :nth-child(3){ transition-delay:.12s; }
.info.is-open .info__body > :nth-child(4){ transition-delay:.18s; }
.info.is-open .info__body > :nth-child(n+5){ transition-delay:.24s; }

.info__groups{ display:grid; gap:26px 40px; margin-top:clamp(24px,3vw,34px); }
@media (min-width:700px){ .info__groups{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.info__group--wide{ grid-column:1 / -1; }
/* Viele Gruppen unterschiedlicher Länge: in Spalten von oben nach unten
   fließen lassen statt Zeile für Zeile — so entstehen keine Lücken. */
.acc-groups{ display:grid; gap:26px 36px; margin-top:clamp(24px,3vw,32px); }
@media (min-width:700px){ .acc-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } }
.acc-group h4{
  display:flex; align-items:center; gap:12px; margin:0 0 6px;
  font-family:var(--serif); font-size:1.18rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink);
}
.acc-group__ico{ display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; background:#F1E3BF; color:var(--navy-800); box-shadow:inset 0 0 0 1.5px var(--gold); }
.acc-group__ico svg{ width:19px; height:19px; }
.acc-group h4 small{ margin-left:auto; font-family:var(--sans); font-size:.72rem; font-weight:600; color:var(--gold-ink); }
.acc{ border-bottom:1px solid var(--line-light); }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:48px; padding:6px 2px 6px 50px; cursor:pointer; list-style:none;
  font-size:.98rem; font-weight:600; color:var(--ink);
  transition:color .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--gold-ink); }
.acc summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }
.acc__plus{ position:relative; flex:none; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(134,103,43,.45); transition:background .3s var(--ease), transform .4s var(--spring); }
.acc__plus::before, .acc__plus::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1.6px; margin:-.8px 0 0 -5px; border-radius:2px; background:var(--gold-ink); transition:transform .35s var(--out), background .3s; }
.acc__plus::after{ transform:rotate(90deg); }
.acc[open] .acc__plus{ background:var(--gold); box-shadow:none; transform:rotate(180deg); }
.acc[open] .acc__plus::before, .acc[open] .acc__plus::after{ background:var(--navy-900); }
.acc[open] .acc__plus::after{ transform:rotate(0deg); }
.acc p{ padding:0 4px 16px 50px; font-size:.93rem; line-height:1.6; color:var(--ink-2); animation:acc-in .35s var(--ease); }
@keyframes acc-in{ from{ opacity:0; transform:translateY(-4px); } }
.info__groups--flow{ display:block; columns:1; column-gap:40px; }
@media (min-width:700px){ .info__groups--flow{ columns:2; } }
.info__groups--flow .info__group{ break-inside:avoid; margin-bottom:28px; }
.info__group h4{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
}
.info__group h4::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(134,103,43,.35), transparent); }
.info__group dl{ margin:0; display:grid; gap:14px; }
.info__dl2{ grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .info__dl2{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; } }
.info__group dt{ font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--ink); }
.info__group dd{ margin:3px 0 0; font-size:.94rem; line-height:1.55; color:var(--ink-2); }
.info__group dd a{ color:var(--gold-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.info__checks{ display:grid; gap:11px; }
.info__checks li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; font-size:.95rem; line-height:1.5; color:var(--ink-2); }
.info__checks svg{ width:22px; height:22px; padding:4px; border-radius:50%; background:var(--gold); color:var(--navy-900); }
.info__checks--muted svg{ background:var(--ivory-3); color:var(--ink-3); padding:3px; }

.info__journey{ display:grid; gap:0; margin-top:clamp(24px,3vw,34px); }
.info__journey li{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:16px; padding-bottom:22px; }
.info__journey li:not(:last-child)::before{ content:""; position:absolute; left:25px; top:52px; bottom:4px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--gold), rgba(214,179,106,.2)); }
.info__step{ grid-row:1 / span 2; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#F1E3BF; color:var(--navy-800); font-family:var(--serif); font-size:1.15rem; font-weight:600; box-shadow:inset 0 0 0 1.5px var(--gold); }
.info__journey h4{ margin:12px 0 0; font-family:var(--serif); font-size:1.14rem; font-weight:600; color:var(--ink); }
.info__journey p{ margin-top:4px; font-size:.95rem; line-height:1.55; color:var(--ink-2); max-width:58ch; }
@media (min-width:700px){
  .info__journey--row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .info__journey--row li{ grid-template-columns:1fr; padding-bottom:0; }
  .info__journey--row li::before{ display:none; }
  .info__journey--row .info__step{ grid-row:auto; }
}

.info__trio{ display:grid; gap:0 20px; margin-top:clamp(22px,3vw,30px); }
@media (min-width:700px){ .info__trio{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.info__trio li{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; padding:16px 0; border-top:1px solid rgba(134,103,43,.3); }
.info__trio svg{ grid-row:1 / span 2; width:26px; height:26px; color:var(--gold-ink); }
.info__trio b{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); }
.info__trio span{ font-size:.92rem; line-height:1.5; color:var(--ink-2); }

.info__more{ margin-top:clamp(26px,3vw,36px); padding:4px 0 4px 18px; box-shadow:inset 2px 0 0 var(--gold); }
.info__more b{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); }
.info__more p{ margin-top:4px; font-size:.95rem; color:var(--ink-2); max-width:58ch; }
.info__note{ margin-top:clamp(22px,3vw,30px); font-size:.82rem; line-height:1.55; color:var(--ink-3); max-width:70ch; }

.info__foot{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px;
  padding:14px clamp(18px,4vw,40px) calc(14px + env(safe-area-inset-bottom,0px));
  background:rgba(250,248,243,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-light);
}
.info__foot .btn{ flex:1 1 260px; }
@media (min-width:760px){ .info__foot .btn{ flex:0 0 auto; } }
.info__call{ display:inline-flex; align-items:center; gap:9px; min-height:48px; font-weight:600; font-size:.95rem; color:var(--ink); }
.info__call svg{ width:18px; height:18px; color:var(--gold-ink); }
.info__free{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-3); }
.info__free svg{ width:18px; height:18px; padding:3px; border-radius:50%; background:var(--gold); color:var(--navy-900); }
@media (max-width:759.98px){ .info__free{ width:100%; justify-content:center; } }
@media (max-width:759.98px){ .info__call{ width:100%; justify-content:center; min-height:44px; } }

/* Ohne JavaScript: kein Dialog, die Inhalte stehen als normale Abschnitte da */
html:not(.js) .infos{ background:var(--ivory-2); }
html:not(.js) .info{ position:static; display:block; height:auto; overflow:visible; }
html:not(.js) .info__panel{ transform:none; opacity:1; max-height:none; box-shadow:none; border-radius:0; margin-inline:auto; max-width:920px; }
html:not(.js) .info__body > *{ opacity:1; transform:none; }
html:not(.js) .info__x{ display:none; }

/* --- 11 Warum jetzt ------------------------------------------------------ */

.why{ position:relative; padding:clamp(80px,9vw,130px) 0 clamp(30px,4vw,60px); background:linear-gradient(180deg, var(--ivory-2), var(--ivory)); }
.why__grid, .steps__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,5vw,60px); }
@media (min-width:1000px){ .why__grid, .steps__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); align-items:center; } }
.why h2, .steps-sec h2{ color:var(--ink); }

/* Linienstücke zwischen den Punkten: ohne JS voll, mit JS scrollgesteuert */
.tl__line i, .step__line i{ --seg:1; }
.js .tl__line i, .js .step__line i{ --seg:var(--s,0); }

.tl__items{ --gap:34px; display:grid; gap:var(--gap); }
.tl__item{ position:relative; display:grid; grid-template-columns:80px minmax(0,1fr); column-gap:22px; align-items:start; }
.tl__line{ position:absolute; left:39px; top:88px; bottom:calc(var(--gap) * -1 + 8px); width:2px; border-radius:2px; background:var(--line-light); overflow:hidden; }
.tl__line i{ position:absolute; inset:0; background:linear-gradient(180deg, var(--gold-3), var(--gold)); transform:scaleY(var(--seg)); transform-origin:top; }
.tl__dot{
  grid-row:1 / span 3;
  display:grid; place-items:center; width:80px; height:80px; border-radius:50%;
  background:var(--ivory-3); color:var(--ink-3);
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .6s var(--ease), transform .6s var(--spring);
}
.tl__dot svg{ width:30px; height:30px; transition:transform .6s var(--spring); }
.tl__no{ margin-top:10px; font-size:.74rem; font-weight:600; letter-spacing:.18em; color:var(--ink-3); transition:color .4s; }
.tl__item h3{ margin-top:4px; color:var(--ink); }
.tl__item p{ margin-top:6px; max-width:32ch; font-size:.95rem; color:var(--ink-2); }
/* Inaktiv nur leiser gefärbt, nie unlesbar (ink-3 erreicht 5,1:1) */
.js .tl__item h3, .js .tl__item p{ color:var(--ink-3); transition:color .5s var(--ease) .12s; }
.tl__item.is-on .tl__dot{ background:#F1E3BF; color:var(--navy-800); box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 7px rgba(214,179,106,.16); transform:scale(1.04); }
.tl__item.is-on .tl__dot svg{ transform:rotate(-10deg) scale(1.08); }
.tl__item.is-on .tl__no{ color:var(--gold-ink); }
.js .tl__item.is-on h3{ color:var(--ink); }
.js .tl__item.is-on p{ color:var(--ink-2); }

@media (min-width:760px){
  .tl__items{ --gap:clamp(16px,2.4vw,34px); grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tl__item{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .tl__dot{ grid-row:auto; margin-bottom:12px; }
  .tl__item p{ margin-inline:auto; }
  .tl__item h3{ font-size:clamp(1.02rem, .82rem + .42vw, 1.16rem); text-wrap:balance; }
  .tl__line{ left:calc(50% + 50px); top:39px; bottom:auto; width:calc(100% + var(--gap) - 100px); height:2px; }
  .tl__line i{ transform:scaleX(var(--seg)); transform-origin:left; }
}

/* --- 12 Ablauf ----------------------------------------------------------- */

.steps-sec{ position:relative; padding:clamp(50px,6vw,80px) 0 clamp(90px,10vw,140px); background:var(--ivory); }

.steps__items{ --gap:40px; display:grid; gap:var(--gap); }
.step{
  position:relative;
  display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-areas:"ico no" ". h" ". p";
  column-gap:18px; align-items:center;
}
.step__no{
  grid-area:no;
  font-family:var(--serif); font-size:clamp(2.8rem,2.2rem + 2.4vw,4.2rem); font-weight:600; line-height:.9;
  color:transparent; -webkit-text-stroke:1.4px #A07C35;   /* Kontur mit 3,5:1 auf Ivory */
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s;
}
.step__ico{
  grid-area:ico; position:relative; z-index:1;
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--ivory-3); color:var(--ink-3);
  transition:background .45s var(--ease), color .45s var(--ease), box-shadow .5s var(--ease);
}
.step__ico svg{ grid-area:1/1; width:24px; height:24px; transition:opacity .3s, transform .5s var(--spring); }
.step__ico .ok{ opacity:0; transform:scale(.3); }
.step h3{ grid-area:h; margin-top:8px; color:var(--ink); }
.step p{ grid-area:p; margin-top:6px; max-width:30ch; font-size:.95rem; color:var(--ink-2); }
.step__line{ position:absolute; left:27px; top:64px; bottom:calc(var(--gap) * -1 + 8px); width:2px; border-radius:2px; background:var(--line-light); overflow:hidden; }
.step__line i{ position:absolute; inset:0; background:linear-gradient(180deg, var(--gold-3), var(--gold)); transform:scaleY(var(--seg)); transform-origin:top; }

.step.is-on .step__no{ color:var(--gold-ink); -webkit-text-stroke-color:var(--gold-ink); }
.step.is-on .step__ico{ background:var(--gold); color:var(--navy-900); box-shadow:0 0 0 7px rgba(214,179,106,.18); }
.step.is-done .step__ico .ico{ opacity:0; transform:scale(.3) rotate(-30deg); }
.step.is-done .step__ico .ok{ opacity:1; transform:none; }
.step.flash .step__ico{ animation:flash .6s var(--ease); }
@keyframes flash{ 0%{ box-shadow:0 0 0 0 rgba(214,179,106,.6); } 100%{ box-shadow:0 0 0 20px rgba(214,179,106,0); } }

@media (min-width:760px){
  .steps__items{ --gap:clamp(16px,2.6vw,40px); grid-template-columns:repeat(3,minmax(0,1fr)); }
  .step{ grid-template-columns:auto 56px minmax(0,1fr); grid-template-areas:"no ico line" "h h h" "p p p"; column-gap:14px; }
  .step h3{ margin-top:22px; }
  .step p{ max-width:26ch; }
  .step__line{ grid-area:line; position:relative; left:auto; top:auto; bottom:auto; width:auto; height:2px; margin-right:calc(var(--gap) * -1 + 8px); }
  .step__line i{ transform:scaleX(var(--seg)); transform-origin:left; }
}

/* --- 13 Über mich -------------------------------------------------------- */

.about{ position:relative; isolation:isolate; overflow:hidden; padding-top:clamp(70px,8vw,110px); background:linear-gradient(180deg, var(--ivory), var(--ivory-2)); }
.about__land{
  position:absolute; inset:0 0 0 35%; z-index:-1; pointer-events:none;
  background:url('../assets/img/landschaft-hell-1600.webp') center / cover no-repeat; opacity:.5;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent);
          mask-composite:intersect;
}
.about__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,4vw,60px); }
@media (min-width:1000px){ .about__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:end; } }

.about__portrait{ position:relative; order:2; justify-self:center; width:min(84vw, 430px); }
.about__shade{ display:block; filter:drop-shadow(0 30px 40px rgba(11,29,56,.2)); translate:0 var(--ay,0px); }
.about__portrait img{
  width:100%;
  -webkit-mask-image:linear-gradient(180deg, #000 86%, transparent 100%); mask-image:linear-gradient(180deg, #000 86%, transparent 100%);
}
.about__note{ position:absolute; left:0; top:-8px; font-size:1.3rem; color:var(--gold-ink); transform:rotate(-6deg); }
@media (min-width:1000px){
  .about__portrait{ order:0; justify-self:start; width:min(100%, 470px); margin-left:-2%; }
  .about__note{ left:-10%; top:18%; font-size:1.45rem; transform:rotate(-8deg); }
}

.about__text{ position:relative; padding-bottom:clamp(10px,3vw,40px); }
@media (min-width:1000px){ .about__text{ padding-bottom:clamp(80px,8vw,120px); } }
.about__mark{ position:absolute; left:-.08em; top:-.45em; z-index:-1; font-family:var(--serif); font-size:clamp(7rem,10vw,10rem); line-height:1; color:var(--gold); opacity:.35; }
.about h2{ color:var(--ink); }
.about__copy{ margin-top:clamp(18px,2.4vw,26px); display:grid; gap:12px; max-width:50ch; font-size:1.02rem; color:var(--ink-2); }
.about .facts{ margin-top:clamp(22px,3vw,32px); }
.about__sign{ margin-top:clamp(24px,3vw,34px); display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px; }
.about__sign .hand{ font-size:clamp(2.1rem,1.6rem + 1.4vw,2.8rem); color:var(--navy-800); transform:rotate(-4deg); }
.about__sign small{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }

/* --- 14 Finaler CTA ------------------------------------------------------ */

.cta{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(130px,15vw,210px) 0 clamp(100px,11vw,150px); color:var(--on-dark); text-align:center; background:var(--navy-900); }
.cta__bg{ position:absolute; inset:-70px 0; z-index:-2; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; transform:translateY(var(--cy,0px)); }
.cta__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ivory-2) 70px, rgba(250,248,243,.55) 150px, rgba(250,248,243,0) 290px),
    linear-gradient(180deg, rgba(7,24,47,.2) 12%, rgba(7,24,47,.62) 48%, rgba(7,24,47,.92) 82%, var(--navy-900) 100%);
}
.cta__spot{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(520px circle at var(--sx,50%) var(--sy,45%), rgba(214,179,106,.16), transparent 65%); }
.cta__inner{ position:relative; }
.cta h2{ max-width:17ch; margin-inline:auto; font-size:clamp(2.2rem,1.3rem + 3.3vw,3.9rem); color:#fff; }
.cta__sub{ margin:18px auto 0; max-width:36ch; font-size:1.08rem; color:var(--on-dark-2); }
.cta__termin{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; font-size:.95rem; font-weight:500; color:var(--on-dark); }
.cta__termin svg{ width:20px; height:20px; flex:none; color:var(--gold); }
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:clamp(28px,3.4vw,40px) 0 26px; }
@media (max-width:560px){ .cta__actions .btn{ width:100%; } }
.cta__note{ display:none; position:absolute; right:0; bottom:10px; font-size:1.45rem; color:var(--gold-2); transform:rotate(-7deg); }
@media (min-width:1000px){ .cta__note{ display:block; } }

/* --- 15 Footer ----------------------------------------------------------- */

.foot{ background:var(--navy-900); color:var(--on-dark-2); padding:clamp(40px,5vw,56px) 0 22px; }
.foot__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; align-items:start; }
.foot__brand{ grid-column:1 / -1; }
.foot__top{ position:absolute; right:var(--pad-x); top:0; }
.foot > .wrap{ position:relative; }
@media (min-width:860px){
  .foot__grid{ grid-template-columns:minmax(0,1.5fr) auto auto auto; gap:clamp(30px,5vw,80px); }
  .foot__brand{ grid-column:auto; }
  .foot__top{ position:static; }
}
.foot__brand p{ margin-top:14px; max-width:42ch; font-size:.88rem; color:var(--on-dark-3); }
.foot__col{ display:grid; align-content:start; }
.foot__col a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:.92rem; transition:color .3s var(--ease); }
.foot__col a:hover{ color:var(--gold-2); }
.foot__col svg{ width:18px; height:18px; color:var(--gold); }
.foot__top{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:var(--gold); box-shadow:inset 0 0 0 1px rgba(214,179,106,.45); transition:background .3s, color .3s, transform .45s var(--spring); }
.foot__top svg{ width:20px; height:20px; }
.foot__top:hover{ background:var(--gold); color:var(--navy-900); transform:translateY(-3px); }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 24px;
  margin-top:28px; padding-top:16px; border-top:1px solid rgba(214,179,106,.14);
  font-size:.8rem; color:var(--on-dark-3);
}
.foot__bottom nav{ display:flex; flex-wrap:wrap; gap:0 20px; }
.foot__bottom a{ display:inline-flex; align-items:center; min-height:44px; transition:color .3s; }
.foot__bottom a:hover{ color:var(--gold-2); }
@media (max-width:767.98px){ .foot__col a{ min-height:44px; } }

/* --- 16 Mobile Abschnittsleiste + WhatsApp ------------------------------- */

/* Abstand sitzt am <body> und schließt den Footer ein — Rechtslinks bleiben frei. */
.mnav{
  position:fixed; inset-inline:0; bottom:0; z-index:80;
  display:flex; gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(7,24,47,.92);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 -1px 0 rgba(214,179,106,.18);
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain;
}
.mnav::-webkit-scrollbar{ display:none; }
.mnav a{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:10px 15px 10px 11px; border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:.84rem; font-weight:600; color:var(--on-dark-2); white-space:nowrap; scroll-snap-align:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.mnav a small{ display:grid; place-items:center; min-width:22px; height:22px; padding:0 4px; border-radius:999px; background:rgba(214,179,106,.16); color:var(--gold); font-size:.68rem; font-weight:700; }
.mnav a[aria-current="true"]{ background:var(--gold); color:var(--navy-900); }
.mnav a[aria-current="true"] small{ background:var(--navy-900); color:var(--gold-2); }
/* Abstand sitzt am Footer selbst: seine Rechtslinks rutschen über die Leiste,
   und der dunkle Grund läuft darunter weiter statt eines hellen Streifens. */
/* Vier Einträge sollen auf dem Handy gleichzeitig zu sehen sein — kein Wischen,
   keine Nummern, dafür gleich breite Flächen. */
@media (max-width:519.98px){
  .mnav{ gap:5px; padding-inline:8px; }
  .mnav a{ justify-content:center; padding:10px 13px; font-size:.82rem; }
  .mnav a small{ display:none; }
}
/* Ab 360 px teilen sich die vier Flächen die Breite gleichmäßig auf;
   darunter bleibt die Leiste lieber schiebbar, als Wörter abzuschneiden. */
@media (min-width:360px) and (max-width:519.98px){
  .mnav a{ flex:1 0 auto; }
}
@media (max-width:767.98px){ body:has(.mnav) .foot{ padding-bottom:calc(22px + 74px + env(safe-area-inset-bottom,0px)); } }
@media (min-width:768px){ .mnav{ display:none; } }

/* Zwei schwebende Aktionen, gestapelt: WhatsApp unten am Daumen und golden
   (primär), Anrufen darüber, kleiner und in Navy-Glas (sekundär). */
.fabs{
  position:fixed; right:16px; z-index:81; bottom:calc(76px + env(safe-area-inset-bottom,0px));
  display:grid; gap:11px; justify-items:end;
}
.fab{
  position:relative;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(180deg, var(--gold-2), var(--gold-3)); color:var(--navy-900);
  box-shadow:0 14px 30px -10px rgba(214,179,106,.7);
  transform:scale(0); opacity:0; transition:transform .45s var(--spring), opacity .25s var(--ease);
}
.fab svg{ width:27px; height:27px; }
/* Der Zustand sitzt am Stapel, damit beide Flächen gemeinsam auftauchen. */
.fabs.is-on .fab{ transform:scale(1); opacity:1; }
.fabs.is-on .fab--call{ transition-delay:.08s; }
.fab--wa::after{ content:""; position:absolute; inset:0; border-radius:50%; z-index:-1; box-shadow:0 0 0 0 rgba(214,179,106,.55); animation:halo 2.4s var(--ease) infinite; }
.fab--call{
  width:50px; height:50px;
  background:rgba(7,24,47,.86); color:var(--gold-2);
  border:1px solid rgba(214,179,106,.42);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 12px 26px -12px rgba(5,18,34,.8);
}
.fab--call svg{ width:23px; height:23px; }
@media (min-width:768px){ .fabs{ display:none; } }

.buildnote{ position:fixed; inset-inline:0; top:0; z-index:95; padding:9px var(--pad-x); background:#FFE7B8; color:#6B3A00; font-size:.82rem; line-height:1.45; text-align:center; }

/* --- 16b Karriere ------------------------------------------------------
   Letzter Abschnitt des Onepagers, unter Kontakt: eigene Zielgruppe,
   deshalb bewusst nach der Kundenanfrage. Hell → dunkles Angebotsband → hell. */

.kar__top{ padding:clamp(80px,9vw,130px) 0 0; background:var(--ivory); }
.kar__head{ max-width:860px; margin-bottom:clamp(36px,4.6vw,60px); }
.kar h2{ color:var(--ink); }
.kar__lead{ margin-top:18px; max-width:56ch; font-size:1.04rem; color:var(--ink-2); }
.kar__h{ font-size:clamp(1.55rem,1.2rem + 1.4vw,2.35rem); color:var(--ink); }

.kpaths__grid{ display:grid; gap:clamp(40px,5vw,70px); }
@media (min-width:860px){ .kpaths__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kpath{ position:relative; padding-top:clamp(66px,6.4vw,92px); }
.kpath__no{
  position:absolute; left:-.04em; top:0; font-family:var(--serif); font-weight:600; line-height:.9;
  font-size:clamp(3.6rem,2.6rem + 3vw,5.2rem); color:transparent; -webkit-text-stroke:1.4px #A07C35; opacity:.9;
}
.kpath h3{ position:relative; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); color:var(--ink); }
.kpath > p{ margin:10px 0 20px; max-width:46ch; color:var(--ink-2); }

.kar__vorteile{ margin-top:clamp(44px,5vw,70px); padding-top:clamp(30px,3.4vw,44px); border-top:1px solid var(--line-light); }
.kar__list{ margin-top:18px; }
.kar__more{ display:grid; gap:14px 60px; margin-top:clamp(26px,3vw,36px); color:var(--ink-2); font-size:.97rem; }
.kar__more b{ color:var(--ink); }
@media (min-width:860px){ .kar__more{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:860px){ .kar__list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,5vw,70px); } }
.kar__bottom{ padding:0 0 clamp(80px,9vw,120px); background:var(--ivory); }
.kar__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:clamp(30px,4vw,44px); }
.kar__mail{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:.95rem; font-weight:500; color:var(--ink); text-decoration:underline; text-decoration-color:rgba(134,103,43,.45); text-underline-offset:4px; }
.kar__mail svg{ flex:none; width:18px; height:18px; color:var(--gold-ink); }
.kar__mail:hover{ color:var(--gold-ink); }
@media (max-width:560px){ .kar__cta .btn{ width:100%; } }

/* --- 17 Rechtsseiten und 404 --------------------------------------------- */

.btn--soft{ color:var(--on-dark); background:transparent; box-shadow:inset 0 0 0 1px rgba(244,241,234,.4); }
.btn--soft:hover{ color:var(--gold-2); box-shadow:inset 0 0 0 1px var(--gold); }
.btn--primary{ color:var(--navy-900); background:linear-gradient(180deg, var(--gold-2), var(--gold-3)); }

.kicker{ display:inline-block; margin-bottom:14px; font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); }
.kicker i{ display:none; }

.page-head{ padding-top:calc(var(--nav-h) + clamp(50px,7vw,90px)); padding-bottom:clamp(24px,3vw,40px); }
.page-head h1{ font-size:clamp(2.3rem,1.5rem + 3.4vw,3.8rem); color:var(--ink); }

.prose{ padding-bottom:clamp(64px,8vw,100px); }
.prose > *{ max-width:72ch; }
.prose h2{ margin:44px 0 12px; font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem); color:var(--ink); }
.prose h3{ margin:26px 0 8px; font-size:1.15rem; }
.prose p, .prose ul{ margin-bottom:16px; font-size:.98rem; line-height:1.72; color:var(--ink-2); }
.prose ul{ padding-left:20px; list-style:disc; }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--gold-ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose .box{ padding-left:18px; box-shadow:inset 2px 0 0 var(--gold); }
.todo{ display:inline-block; padding:2px 9px; border-radius:6px; background:#FFE7B8; color:#6B3A00; font-size:.84rem; font-weight:600; }

.nf{
  position:relative; min-height:88vh; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; padding-block:120px 80px;
  background:radial-gradient(90% 70% at 70% 20%, var(--navy-700), var(--navy-900) 60%); color:var(--on-dark);
}
.nf .blobs{ display:none; }
.nf__code{ margin-bottom:18px; font-family:var(--serif); font-size:clamp(5rem,18vw,11rem); line-height:.85; color:var(--gold); }
.nf__code span{ color:var(--on-dark); }
.nf h1{ margin-bottom:14px; font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); color:#fff; }
.nf .lead{ margin-bottom:30px; max-width:44ch; color:var(--on-dark-2); }

/* --- 18 Bewegung reduzieren ---------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .rv-line > span{ transform:none; }
  .hero__portrait img{ transform:none; }
  .js .scrub{ --p:1; --f:1; }
  .js .tl__line i, .js .step__line i{ --seg:1; }
  .menu__list a{ opacity:1; transform:none; }
  .info__panel, .info__body > *{ transform:none !important; }
}

@media print{
  .nav,.mnav,.fabs,.menu,.buildnote,.thread,.hero__bg,.cta__bg{ display:none !important; }
  body{ background:#fff; padding:0; }
}

/* ===== Themenseiten (versicherungen, privatdarlehen, ...) ==================
   Die Inhalte der Detailansichten als eigene Seiten. Markup und Klassen sind
   dieselben wie im Dialog (.info__body, .acc, .info__foot) – hier nur ohne
   Überlagerung, ohne Einblendung und mit offenen Aufklappern. */
.krumen{ margin-bottom:18px; font-size:.82rem; color:var(--ink-3); }
.krumen a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.thema{ padding-bottom:clamp(64px,8vw,100px); }
.thema .info__body{ padding:0; overflow:visible; max-height:none; }
.thema .info__body > *{ opacity:1; transform:none; transition:none; }
.thema .info__foot{
  position:static; margin-top:clamp(30px,4vw,44px); padding:clamp(22px,3vw,30px) 0 0;
  background:none; box-shadow:none; border-top:1px solid var(--line-light);
}
.thema__lead{ max-width:62ch; font-size:1.05rem; color:var(--ink-2); }
.thema__weiter{ margin-top:clamp(44px,6vw,70px); }
.thema__weiter a, .thema__liste a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px; padding:14px 0; border-bottom:1px solid var(--line-light);
  font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink);
}
.thema__weiter a:first-of-type{ border-top:1px solid var(--line-light); }
.thema__weiter a:hover, .thema__liste a:hover b{ color:var(--gold-ink); }
.thema__weiter .arr, .thema__liste .arr{ flex:none; width:20px; height:20px; color:var(--gold-ink); }
.thema__liste{ margin-top:clamp(22px,3vw,34px); border-top:1px solid var(--line-light); }
.thema__liste a{ align-items:flex-start; padding:20px 0; font-family:var(--sans); font-size:.95rem; font-weight:400; color:var(--ink-2); }
.thema__liste i{ flex:none; padding-top:6px; font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.14em; color:var(--gold-ink); }
.thema__liste span{ flex:1; }
.thema__liste b{ display:block; margin-bottom:3px; font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink); }

/* Feste Themenleiste unten (mobil), gleiche Idee wie die Abschnittsleiste der Startseite. */
.themen-leiste{
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  background:rgba(7,24,47,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  scrollbar-width:none;
}
.themen-leiste::-webkit-scrollbar{ display:none; }
.themen-leiste__p{
  flex:none; scroll-snap-align:start;
  display:flex; align-items:baseline; gap:7px; min-height:44px; padding:11px 15px;
  border:1px solid rgba(255,255,255,.16); border-radius:100px;
  font-size:.88rem; font-weight:500; color:#E9EDF3; white-space:nowrap;
}
.themen-leiste__p i{ font-style:normal; font-size:.68rem; font-weight:600; letter-spacing:.08em; color:var(--gold-2); }
.themen-leiste__p.is-on{ background:var(--gold); border-color:var(--gold); color:var(--navy-900); }
.themen-leiste__p.is-on i{ color:rgba(7,24,47,.6); }
/* Der Footer bekommt Platz, damit die Leiste Impressum und Datenschutz nie verdeckt. */
.themen-leiste ~ .foot{ padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:768px){
  .themen-leiste{ display:none; }
  .themen-leiste ~ .foot{ padding-bottom:0; }
}