/* ============================================================
   MEMORO · Designsystem "Signal" für die Unterseiten
   Übernommen aus der Startseite (index.html, Variante 02).
   Die Startseite behält ihr eigenes Stylesheet im Kopf, damit
   an ihr nichts angefasst werden muss. Hier stehen dieselben
   Bausteine plus das, was nur die Unterseiten brauchen:
   Seitenkopf ohne Video, Formular, Rechtstexte, CTA-Band.
   ============================================================ */

:root{
  --plum:#704861;
  --plum-lt:#9C6B87;
  --plum-soft:#C9A7B5;
  --plum-mist:#F3ECF0;
  --plum-deep:#472A3B;
  --ink:#150C13;
  --ink-2:#1E1119;
  --orange:#FF7A38;
  --orange-deep:#D9601F;
  --paper:#FFFFFF;
  --paper-warm:#FAF7F9;
  --sand:#F6F0EC;
  --text:#1A0F17;
  --muted:#6E5B67;
  --line:rgba(112,72,97,.14);
  --line-dark:rgba(255,255,255,.13);

  --ease-spring:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --nav-h:96px;

  --sans:"Geist","Inter",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{margin:0}
section{scroll-margin-top:var(--nav-h)}
.wrap{width:min(1280px,100% - 48px);margin-inline:auto}
@media(max-width:640px){.wrap{width:min(1280px,100% - 34px)}}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;color:var(--orange);
}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,122,56,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,122,56,0)}100%{box-shadow:0 0 0 0 rgba(255,122,56,0)}}
.eyebrow--plum{color:var(--plum)}
.eyebrow--plum i{background:var(--plum);box-shadow:none;animation:none}

.shead{max-width:640px}
.shead h2{font-size:clamp(31px,4vw,54px);margin-top:18px}
.shead p{margin-top:16px;color:var(--muted);font-size:17px}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .eyebrow{justify-content:center}
.dark .shead p{color:rgba(255,255,255,.66)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Lesefortschritt ---------- */
.progress{position:fixed;top:0;left:0;height:2px;z-index:200;width:0;
  background:linear-gradient(90deg,var(--plum),var(--orange));transition:width .1s linear}

/* ---------- NAVIGATION ---------- */
.nav{position:fixed;inset:14px 0 auto 0;z-index:100;display:flex;justify-content:center}
/* Helle Leiste ab dem ersten Pixel, als Liquid Glass: hoher Blur, kräftige
   Sättigung, heller Innenkantenglanz. Die Deckung bleibt niedrig genug, dass
   Bild und Sektionen durchscheinen, aber hoch genug für lesbaren Text. */
.nav__in{
  position:relative;isolation:isolate;
  width:min(1280px,100% - 32px);height:78px;display:flex;align-items:center;gap:26px;
  padding:0 14px 0 22px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.34));
  backdrop-filter:blur(36px) saturate(215%) brightness(112%);
  -webkit-backdrop-filter:blur(36px) saturate(215%) brightness(112%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 14px 44px rgba(21,12,19,.20),
             inset 0 1px 0 rgba(255,255,255,.8),
             inset 0 -1px 0 rgba(112,72,97,.06);
  transition:background .35s var(--ease-out),border-color .35s,box-shadow .35s,backdrop-filter .35s;
  color:var(--text);
}
/* Lichtkante oben links, damit das Glas plastisch wirkt */
.nav__in::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(112deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,.22) 100%);
}
@supports not (backdrop-filter:blur(1px)){.nav__in{background:rgba(255,255,255,.94)}}
/* Vollständiges Logo mit Schriftzug in Plum, die Leiste ist immer hell. */
.nav__logo{position:relative;display:block;height:44px;margin-right:auto;
  transition:transform .5s var(--ease-spring)}
.nav__logo:hover{transform:scale(1.03)}
.nav__logo img{display:block;height:44px;width:auto}
/* Die Kapsel hinter den Menüpunkten gibt es nur einmal: sie wandert zu
   dem Punkt, auf dem die Maus steht, und gleitet beim Verlassen zur
   aktuellen Seite zurück. Deshalb haben die Links selbst keine Fläche.
   Gesetzt wird sie von signal.js. */
.nav__links{display:flex;gap:2px;position:relative;isolation:isolate}
.nav__links a{position:relative;padding:8px 14px;border-radius:999px;font-size:14px;
  color:var(--plum-deep);
  transition:color .25s,background .25s}
.nav__links a:hover{color:var(--plum)}
.nav__gleiter{
  position:absolute;left:0;top:0;height:100%;width:0;z-index:-1;
  border-radius:999px;pointer-events:none;opacity:0;
  background:rgba(112,72,97,.12);
}
/* Erst nach dem ersten Setzen darf sie sich bewegen, sonst fliegt sie
   beim Laden aus dem Nichts an ihren Platz. */
.nav__gleiter.bereit{
  transition:transform .42s var(--ease-spring),width .42s var(--ease-spring),
             opacity .3s var(--ease-out);
}
.nav__gleiter.an{opacity:1}
.nav__links a.is-active::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:14px;height:2px;border-radius:2px;background:var(--orange)}
/* Nach dem Scrollen etwas dichter, sonst verliert die Leiste über den dunklen
   Sektionen ihren Kontrast. */
.nav.scrolled .nav__in{
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.52));
  border-color:rgba(255,255,255,.62);
  box-shadow:0 10px 34px rgba(26,15,23,.14),
             inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(112,72,97,.08);
}
@supports not (backdrop-filter:blur(1px)){.nav.scrolled .nav__in{background:#fff}}

/* ---------- Schaltflächen ----------
   Der Verlauf, der Innenglanz und der Lichtstreifen sind dieselben wie beim
   Kopfzeilen-Knopf (.nav-cta in nav-glass.css). Beim Überfahren hebt sich der
   Knopf über die Variable --lift; die magnetische Verschiebung liegt getrennt
   davon in --mag-x / --mag-y, damit sich beide nicht gegenseitig überschreiben. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transform:translate(var(--mag-x,0px),var(--mag-y,0px)) translateY(var(--lift,0px));
  transition:transform .5s var(--ease-out),background .32s var(--ease-out),
             box-shadow .38s var(--ease-out),border-color .32s,color .3s;
  white-space:nowrap;will-change:transform;
}
/* Lichtstreifen, der beim Überfahren einmal quer durchzieht */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.4) 50%,transparent 66%);
  transform:translateX(-115%);opacity:0;
}

.btn--fill{
  background:linear-gradient(180deg,#FF8F4D 0%,#F0700F 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(120,50,0,.26),
             0 0 0 1px rgba(190,80,10,.26),
             0 8px 22px -6px rgba(217,96,31,.55);
}
.btn--fill:hover{
  --lift:-2px;
  background:linear-gradient(180deg,#FF9E63 0%,#E4650B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),
             inset 0 -1px 0 rgba(120,50,0,.2),
             0 0 0 1px rgba(190,80,10,.22),
             0 10px 24px -8px rgba(217,96,31,.6),
             0 24px 48px -16px rgba(255,122,56,.55);
}
.btn--fill:active{
  box-shadow:inset 0 2px 6px rgba(120,50,0,.34),
             0 0 0 1px rgba(190,80,10,.3),
             0 4px 12px -6px rgba(217,96,31,.5);
}

.btn--glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff;
  backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px -10px rgba(0,0,0,.55)}
/* Lichtfleck unter dem Zeiger; ohne Zeigerdaten sitzt er mittig */
.btn--glass::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease-out);
}
.btn--glass:hover{--lift:-2px;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             0 14px 32px -12px rgba(0,0,0,.6),
             0 0 0 4px rgba(255,255,255,.07)}
.btn--glass:hover::after{opacity:1}
.btn--glass:active{box-shadow:inset 0 2px 8px rgba(0,0,0,.28)}

.btn--dark{background:var(--plum);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -10px rgba(71,42,59,.6)}
.btn--dark:hover{--lift:-2px;background:#5C3A50;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 34px -12px rgba(71,42,59,.7)}
.btn--ghost{border-color:var(--line);color:var(--plum);background:#fff;
  box-shadow:0 2px 8px -4px rgba(71,42,59,.18)}
.btn--ghost:hover{--lift:-2px;border-color:var(--plum);
  box-shadow:0 12px 26px -12px rgba(71,42,59,.4)}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 6px 18px -8px rgba(0,0,0,.3)}
.btn--light:hover{--lift:-2px;box-shadow:0 16px 34px -12px rgba(0,0,0,.4)}
.btn--lg{padding:15px 28px;font-size:15px}
.btn .arw{transition:transform .3s var(--ease-spring)}
.btn:hover .arw{transform:translateX(4px)}
/* Nach den Varianten, damit das Eindrücken den Anhebe-Zustand überstimmt */
.btn:active{--lift:0px;transition-duration:.09s}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.btn--ghost:focus-visible,.btn--light:focus-visible{outline-color:var(--plum)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{animation:btn-glanz .9s var(--ease-out) forwards}
}
@keyframes btn-glanz{
  0%{transform:translateX(-115%);opacity:0}
  16%{opacity:1}
  100%{transform:translateX(115%);opacity:0}
}

.burger{display:none;width:44px;height:44px;border:1px solid currentColor;background:none;border-radius:999px;
  cursor:pointer;align-items:center;justify-content:center;color:inherit;opacity:.75}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}
.mobile{position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;padding:110px 28px 40px;
  display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s,transform .35s,visibility .35s}
.mobile.open{opacity:1;visibility:visible;transform:none}
.mobile a{font-size:29px;padding:15px 0;border-bottom:1px solid var(--line-dark)}
.mobile .btn{margin-top:26px;align-self:flex-start;border-bottom:0}

/* ---------- Mesh-Verlauf (dunkle Flächen) ---------- */
.mesh{position:absolute;inset:-20%;z-index:0;filter:blur(80px);opacity:.6;mix-blend-mode:screen;pointer-events:none}
.mesh i{position:absolute;border-radius:50%;display:block}
.mesh i:nth-child(1){width:46vw;height:46vw;left:-6%;top:-8%;background:#8E5A78;animation:m1 22s ease-in-out infinite}
.mesh i:nth-child(2){width:38vw;height:38vw;right:2%;top:6%;background:#C4562A;animation:m2 26s ease-in-out infinite}
.mesh i:nth-child(3){width:44vw;height:44vw;left:26%;bottom:-18%;background:#5E3450;animation:m3 30s ease-in-out infinite}
.mesh i:nth-child(4){width:26vw;height:26vw;right:22%;bottom:-6%;background:#A2708C;animation:m1 19s ease-in-out infinite reverse}
@keyframes m1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.14)}}
@keyframes m2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-11%,10%) scale(1.2)}}
@keyframes m3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,-9%) scale(.9)}}

/* ---------- Aura (wandernde Lichter, nur Pflaumentöne) ---------- */
.aura{position:absolute;inset:-32% -16%;z-index:1;pointer-events:none;filter:blur(94px);
  mix-blend-mode:screen;will-change:transform}
.aura i{position:absolute;display:block;border-radius:50%;opacity:.6;will-change:transform}
.aura i:nth-child(1){width:46vw;height:46vw;left:-6%;top:0;background:#8E5A78;animation:a1 13s ease-in-out infinite}
.aura i:nth-child(2){width:33vw;height:33vw;right:4%;top:-8%;background:#9C6B87;animation:a2 16s ease-in-out infinite}
.aura i:nth-child(3){width:40vw;height:40vw;left:36%;bottom:-26%;background:#5E3450;animation:a3 19s ease-in-out infinite}
@keyframes a1{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(30%,20%) scale(1.34)}62%{transform:translate(-16%,30%) scale(.82)}}
@keyframes a2{0%,100%{transform:translate(0,0) scale(1)}36%{transform:translate(-36%,26%) scale(1.42)}68%{transform:translate(18%,-18%) scale(.8)}}
@keyframes a3{0%,100%{transform:translate(0,0) scale(1)}34%{transform:translate(-26%,-30%) scale(1.3)}70%{transform:translate(22%,-8%) scale(.86)}}

/* ============================================================
   SEITENKOPF DER UNTERSEITEN
   Gleiche Sprache wie der Hero der Startseite, nur ohne Video:
   dunkle Fläche, Mesh, feines Raster, Eule als Wasserzeichen.
   ============================================================ */
.phero{
  position:relative;overflow:hidden;color:#fff;
  padding:calc(var(--nav-h) + clamp(52px,7vw,96px)) 0 clamp(64px,7vw,104px);
  background:linear-gradient(200deg,#3A2132 0%,#20131E 52%,#150C13 100%);
}
.phero .mesh{opacity:.42}
.phero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 80% 70% at 36% 40%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 36% 40%,#000,transparent 76%);
}
.phero .wrap{position:relative;z-index:3}
.phero__in{max-width:820px}
.phero h1{font-size:clamp(36px,5vw,68px);line-height:1.03;letter-spacing:-.04em;margin:22px 0 0}
.phero h1 em{font-style:normal;background:linear-gradient(96deg,#FF8F4D,#FFCBA6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phero__sub{margin-top:20px;max-width:62ch;font-size:17.5px;color:rgba(255,255,255,.82);line-height:1.58}
.phero__sub b{font-weight:400;color:#fff}
.phero__sub--2{margin-top:13px;color:rgba(255,255,255,.7)}
.phero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.phero__trust{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}

.glassbar{
  margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:20px;overflow:hidden;max-width:840px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
@supports not (backdrop-filter:blur(1px)){.glassbar{background:rgba(30,17,25,.93)}}
.glassbar--3{grid-template-columns:repeat(3,1fr);max-width:700px}
.glassbar div{padding:18px 22px;border-right:1px solid rgba(255,255,255,.1)}
.glassbar div:last-child{border-right:0}
.glassbar b{display:block;font-size:32px;font-weight:400;letter-spacing:-.035em;line-height:1}
.glassbar span{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}

/* ---------- Laufband ---------- */
.ticker{position:relative;z-index:1;padding:15px 0;background:var(--ink-2);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker span{padding:0 28px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);white-space:nowrap;display:flex;align-items:center;gap:28px}
.ticker span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:.7}

/* ---------- Glaskarten ---------- */
.glass{position:relative;padding:28px 26px;border-radius:22px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 20px 50px rgba(0,0,0,.28);
  overflow:hidden;transition:transform .45s var(--ease-spring),border-color .45s,background .45s}
@supports not (backdrop-filter:blur(1px)){.glass{background:rgba(40,24,34,.95)}}
.glass:hover{transform:translateY(-5px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3)}
.glass__glow{position:absolute;width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,122,56,.3),transparent 68%);
  opacity:0;transition:opacity .35s;filter:blur(12px);transform:translate(-50%,-50%);left:var(--mx,50%);top:var(--my,50%)}
.glass:hover .glass__glow{opacity:1}

/* ============================================================
   DUNKLE INHALTSFLÄCHE (Nachfolge, Türen, Kontakt)
   ============================================================ */
.dunkel{position:relative;padding:clamp(84px,9vw,132px) 0;color:#fff;overflow:hidden;
  background:linear-gradient(200deg,#331D2C 0%,#20131E 50%,#150C13 100%)}
.dunkel .mesh{filter:blur(90px);opacity:.46}
.dunkel .wrap{position:relative;z-index:3}
.dunkel .wz{z-index:2}

.nf__block{margin-top:56px}
.nf__block:first-of-type{margin-top:48px}
.nf__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);display:block;margin-bottom:20px}
.nf__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--orange)}
.nf__lagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nf__lagen h3{font-size:20px;margin:12px 0 10px}
.nf__lagen p{font-size:15px;color:rgba(255,255,255,.72);line-height:1.58}
.nf__zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nf__zwei h3{font-size:24px;margin-bottom:14px}
.nf__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nf__liste li{position:relative;padding-left:20px;font-size:15px;color:rgba(255,255,255,.82)}
.nf__liste li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);opacity:.85}
.nf__liste li b{font-weight:400;color:#fff}
.nf__preis{font-size:15px;color:rgba(255,255,255,.78);line-height:1.6}
.nf__preis b{font-weight:400;color:#fff}
.nf__warum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden}
.nf__warum div{background:rgba(21,12,19,.55);padding:22px 24px}
.nf__warum div:last-child{grid-column:1/-1}
.nf__warum b{display:block;font-weight:400;font-size:16px;margin-bottom:6px}
.nf__warum span{font-size:14px;color:rgba(255,255,255,.66);line-height:1.5}
.nf__meister{margin-top:14px;padding:18px 24px;border-radius:16px;border:1px dashed rgba(255,255,255,.24);
  font-size:15.5px;color:rgba(255,255,255,.78)}
.nf__meister b{font-weight:400;color:#fff}
.nf__frei{margin-top:34px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  padding:24px 28px;border-radius:20px;background:rgba(255,122,56,.1);border:1px solid rgba(255,122,56,.28)}
.nf__frei p{font-size:16px;color:rgba(255,255,255,.86);max-width:62ch}
.nf__frei b{font-weight:400;color:#fff}

/* ---------- Zeitstrahl ---------- */
.tl{position:relative;margin-top:22px;padding-left:8px}
.tl__item{position:relative;border-top:1px solid rgba(255,255,255,.14)}
.tl__item:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.tl__item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px 1fr auto 20px;
  gap:16px;align-items:center;padding:20px 4px;transition:color .3s}
.tl__item summary::-webkit-details-marker{display:none}
.tl__item summary:hover{color:#fff}
.tl__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--orange)}
.tl__t{font-size:18px;letter-spacing:-.02em}
.tl__dauer{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.tl__chev{transition:transform .3s var(--ease-spring);color:rgba(255,255,255,.5)}
.tl__item[open] .tl__chev{transform:rotate(180deg)}
.tl__body{padding:0 4px 22px 72px;font-size:15.5px;color:rgba(255,255,255,.74);max-width:70ch}
.tl__body b{font-weight:400;color:#fff}

/* ---------- Der Weg: Linie, die beim Scrollen mitwächst ---------- */
.weg-linie{position:relative;margin-top:40px;padding-left:90px}
.weg-linie__spur{position:absolute;left:32px;top:7px;bottom:10px;width:2px;
  background:rgba(255,255,255,.14);border-radius:2px}
.weg-linie__fill{position:absolute;inset:0 0 auto 0;height:var(--fortschritt,0%);
  background:linear-gradient(180deg,var(--plum-lt),var(--orange));border-radius:2px;
  transition:height .25s linear}
.weg-schritt{position:relative;padding:0 0 34px}
.weg-schritt:last-child{padding-bottom:0}
.weg-schritt__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.weg-schritt h3{font-size:21px;letter-spacing:-.024em}
.weg-schritt .dauer{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.weg-schritt p{margin-top:10px;font-size:15.5px;color:rgba(255,255,255,.74);max-width:64ch}
.weg-schritt p b{font-weight:400;color:#fff}
.weg-punkt{position:absolute;left:-57px;top:5px;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.28);transition:border-color .4s,background .4s,box-shadow .4s}
.weg-schritt.erreicht .weg-punkt{border-color:var(--orange);background:var(--orange);
  box-shadow:0 0 0 6px rgba(255,122,56,.16)}

/* ============================================================
   HELLE FLÄCHEN
   ============================================================ */
.hell{position:relative;overflow:hidden;padding:clamp(80px,9vw,128px) 0;background:var(--paper)}
.hell .wrap{position:relative;z-index:1}
.hell--warm{background:var(--paper-warm)}
.hell--sand{background:var(--sand)}

/* Kacheln / Bento */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.grid__k{grid-column:1/-1;margin-top:26px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tile{position:relative;border-radius:22px;padding:30px;border:1px solid var(--line);
  background:#fff;overflow:hidden;
  transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s}
.tile:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(26,15,23,.1);border-color:rgba(112,72,97,.24)}
.tile h3{font-size:22px;margin-bottom:9px;letter-spacing:-.022em}
.tile p{font-size:15px;color:var(--muted);line-height:1.56}
.tile .eyebrow{margin-bottom:15px}
.tile a.more{display:inline-flex;gap:7px;margin-top:14px;font-size:14px;color:var(--plum)}
.tile a.more:hover{color:var(--orange-deep)}
.tile--plum a.more:hover,.tile--dark a.more:hover{color:#fff!important}
.t-a,.t-b,.t-c{grid-column:span 4}
.t-d,.t-e,.t-f,.t-g{grid-column:span 3}
.t-d h3,.t-e h3,.t-f h3,.t-g h3{font-size:19px}
.t-halb{grid-column:span 6}
.tile--dark{background:var(--ink);color:#fff;border-color:transparent}
.tile--dark p{color:rgba(255,255,255,.7)}
.tile--dark::before{content:"";position:absolute;right:-22%;top:-42%;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,56,.55),transparent 66%);filter:blur(36px)}
.tile--plum{background:var(--plum);color:#fff;border-color:transparent}
.tile--plum p{color:rgba(255,255,255,.78)}
.bento__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px;flex-wrap:wrap}
.bento__head h2{font-size:clamp(31px,4vw,54px);max-width:16ch;margin-top:18px}
.bento__head p{max-width:40ch;color:var(--muted);font-size:16.5px}

/* Netzgrafik in der dunklen Kachel */
.netviz{position:relative;height:150px;margin-top:20px}
.netviz svg{width:100%;height:100%;overflow:visible}
.netviz .ln{stroke:rgba(255,255,255,.28);stroke-width:1;fill:none;stroke-dasharray:4 5;animation:dash 14s linear infinite}
@keyframes dash{to{stroke-dashoffset:-180}}
.netviz .nd{fill:#fff}
.netviz .nd.hot{fill:var(--orange)}
.netviz .ping{fill:none;stroke:var(--orange);stroke-width:1.2;opacity:0;transform-origin:center;animation:ping 3.4s ease-out infinite}
@keyframes ping{0%{r:4;opacity:.9}80%,100%{r:24;opacity:0}}

/* Kennzahlenband auf hellen Flächen */
.mapstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  margin-top:26px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.mapstats div{background:#fff;padding:16px 18px}
.mapstats b{display:block;font-size:30px;font-weight:400;line-height:1;color:var(--plum)}
.mapstats span{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.map__note{margin-top:13px;font-size:12.5px;color:var(--muted)}

.satzkasten{margin-top:26px;padding:24px 28px;border-radius:18px;background:#fff;border:1px solid var(--line);
  font-size:17px;color:var(--muted);line-height:1.6}
.satzkasten b{font-weight:400;color:var(--text)}
.hell--warm .satzkasten{background:var(--paper-warm)}

/* Reihen mit Nummer */
.rw{margin-top:46px;border-top:1px solid var(--line)}
.rw__row{display:grid;grid-template-columns:88px 1fr 1.15fr;gap:26px;padding:30px 0;
  border-bottom:1px solid var(--line);align-items:start;transition:background .35s}
.rw__row:hover{background:var(--paper-warm)}
.rw__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--orange);padding-top:6px}
.rw__row h3{font-size:23px;letter-spacing:-.024em}
.rw__row p{font-size:15.5px;color:var(--muted);line-height:1.58}
.rw__row ul{margin:0;padding-left:18px;font-size:15.5px;color:var(--muted);line-height:1.7}
.rw__schluss{margin-top:34px;font-size:clamp(20px,2.4vw,30px);line-height:1.34;letter-spacing:-.028em;max-width:24ch}
.rw__schluss em{font-style:normal;color:var(--orange-deep)}

/* Türkarten */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
.tcards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tcard{display:flex;flex-direction:column}
.tcard h3{font-size:25px;margin:14px 0 8px}
.tcard .preis{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.tcard p{margin-top:12px;margin-bottom:22px;font-size:15px;color:rgba(255,255,255,.72);line-height:1.58}
.tcard ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.tcard ul li{position:relative;padding-left:19px;font-size:14.5px;color:rgba(255,255,255,.78)}
.tcard ul li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--orange);opacity:.85}
.tcard .btn{margin-top:auto;width:100%}
.tueren__satz{margin-top:26px;font-size:16.5px;color:rgba(255,255,255,.74);max-width:64ch}
.tueren__satz a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Personen */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.people--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Flexspalte, damit das Logo unten steht: die Karten sind gleich hoch,
   die Texte verschieden lang — sonst sitzt jedes Logo anders hoch. */
.person{display:flex;flex-direction:column;padding:26px;border-radius:22px;border:1px solid var(--line);background:var(--paper-warm);
  transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s}
.person:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(26,15,23,.09);border-color:rgba(112,72,97,.24)}
.person__pic{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-bottom:18px;
  background:linear-gradient(150deg,var(--plum),#402437)}
.person__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  transition:transform 1.2s var(--ease-out)}
.person:hover .person__pic img{transform:scale(1.04)}
.person__pic--mono{display:grid;place-items:center}
.person__pic--mono span{font-family:var(--mono);font-size:30px;letter-spacing:.1em;color:rgba(255,255,255,.82)}
.person__pic--mono small{position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.person__logo{height:24px;width:auto;margin-top:auto;padding-top:16px;align-self:flex-start;opacity:.45;filter:grayscale(1);
  transition:opacity .35s,filter .35s}
.person:hover .person__logo{opacity:1;filter:none}
.person h3{font-size:21px}
.person .rolle{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-deep)}
.person p{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.56}

.zitat{margin-top:44px;padding:38px 42px;border-radius:24px;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.zitat::before{content:"";position:absolute;right:-16%;top:-60%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,56,.4),transparent 66%);filter:blur(40px)}
.zitat p{position:relative;font-size:clamp(20px,2.4vw,30px);line-height:1.34;letter-spacing:-.025em;max-width:26ch}
.zitat footer{position:relative;margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.direkt{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:20px 24px;border-radius:18px;border:1px solid var(--line);background:var(--paper-warm);font-size:15.5px}
.direkt b{font-weight:400}
.direkt a{color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.rat{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.rat__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Kurze Erklärung unter jedem Namen im Aufsichtsrat: woher die Person
   kommt und was sie mitbringt, je Zeile ein Punkt. */
.rat__punkte{list-style:none;margin:14px 0 0;padding:0}
.rat__punkte li{position:relative;padding:4px 0 4px 15px;font-size:13.5px;line-height:1.48;color:var(--muted)}
.rat__punkte li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1.5px;border-radius:1px;background:var(--orange)}
.rat__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px;margin-top:16px}
.rat__list div b{display:block;font-weight:400;font-size:15px}
.rat__list div span{font-size:12.5px;color:var(--muted);line-height:1.45}
.rat--offen{opacity:.45}
.mitwirkende{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
ul.logos{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.logos li{display:grid;place-items:center;height:76px;padding:14px 18px;border-radius:14px;
  background:var(--paper-warm);border:1px solid var(--line);
  transition:transform .35s var(--ease-spring),border-color .35s,box-shadow .35s;min-width:0}
.logos li:hover{transform:translateY(-2px);border-color:rgba(112,72,97,.24);
  box-shadow:0 12px 26px rgba(26,15,23,.07)}
.logos img{max-height:40px;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1);opacity:.6;transition:filter .35s,opacity .35s}
.logos li:hover img{filter:none;opacity:1}
.logos .name{font-size:14px;color:var(--plum);text-align:center;line-height:1.3}
.hell .logos li{background:#fff}

/* Ortslisten */
.orte{margin-top:40px}
.orte .eyebrow{display:inline-flex}
.orte ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.orte ul+.eyebrow{margin-top:30px}
.orte--ag li a,.orte--ag li span{background:var(--plum-mist);border-color:rgba(112,72,97,.22)}
.orte li a,.orte li span{display:inline-block;padding:8px 15px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:13.5px;color:var(--plum);
  transition:border-color .3s,transform .3s var(--ease-spring),box-shadow .3s}
.orte li a:hover{border-color:var(--plum);transform:translateY(-2px);box-shadow:0 10px 22px rgba(31,18,25,.08)}
.orte li b{font-weight:500}
.orte li i{font-style:normal;color:var(--muted)}

/* Mosaik und Beispiele */
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px}
.mo{margin:0;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.mo img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.mo:hover img{transform:scale(1.05)}
.mo figcaption{position:absolute;inset:auto 0 0 0;padding:20px 22px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(21,12,19,.86))}
.mo figcaption b{display:block;font-weight:400;font-size:18px}
.mo figcaption span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66)}
.beispiele{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.beispiel{padding:28px;border-radius:20px;border:1px solid var(--line);background:var(--paper-warm)}
.beispiel h3{font-size:20px;margin:12px 0 10px}
.beispiel p{font-size:15.5px;color:var(--muted);line-height:1.58}
.hell--warm .beispiel{background:#fff}
.merksatz{margin-top:16px;padding:22px 26px;border-radius:18px;background:var(--plum-mist);
  font-size:16.5px;color:var(--text)}

/* ---------- Struktur: zwei Ebenen mit gezeichneter Verbindung ---------- */
.struktur{display:grid;grid-template-columns:1fr;gap:0;margin-top:44px;justify-items:center}
.struktur__karte{width:min(560px,100%);padding:28px 30px;border-radius:22px;border:1px solid var(--line);
  background:#fff;text-align:center;box-shadow:0 20px 44px rgba(26,15,23,.06)}
.struktur__karte h3{font-size:23px;margin:10px 0 10px}
.struktur__karte p{font-size:15.5px;color:var(--muted);line-height:1.58}
/* Die Linie zeichnet sich beim Einblenden, danach wandert ein Puls
   von der AG zur Vorsorge GmbH: die Richtung, in der gebaut wird. */
.struktur__linie{width:100%;max-width:560px;height:86px;overflow:visible}
.struktur__linie .bahn{fill:none;stroke:var(--plum-soft);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) .2s}
.struktur.in .struktur__linie .bahn{stroke-dashoffset:0}
.struktur__linie .puls{fill:var(--orange);opacity:0}
.struktur.in .struktur__linie .puls{animation:wandern 3.6s ease-in-out infinite 1.3s}
@keyframes wandern{
  0%{opacity:0;transform:translateY(0)}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translateY(64px)}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__cols{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;margin-top:46px;align-items:start}
.faq__cols--gleich{grid-template-columns:1fr 1fr}
.faq__col h3{font-size:20px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:16px;justify-content:space-between;
  align-items:center;padding:16px 0;font-size:16.5px;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--plum)}
.faq details[open] summary{color:var(--plum)}
.faq details[open] .tl__chev{transform:rotate(180deg)}
.faq .tl__chev{color:var(--plum-soft);flex:none}
.faq details p{padding:0 0 18px;font-size:15.5px;color:var(--muted);line-height:1.62;max-width:64ch}

/* ============================================================
   KONTAKTWEGE UND FORMULAR
   ============================================================ */
.wege3{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:16px;margin-top:46px}
.wege3--zwei{grid-template-columns:1fr 1fr;max-width:860px}
.weg h3{font-size:24px;margin:12px 0 8px}
.pfad .wer{font-size:14px;color:var(--orange);font-family:var(--mono);letter-spacing:.06em}
.weg p.txt{margin-top:12px;font-size:15px;color:rgba(255,255,255,.72);line-height:1.58}
.pfad .mail{display:inline-flex;gap:8px;margin-top:18px;font-size:15.5px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}
.pfad .mail:hover{border-color:var(--orange)}
.pfad .arw{transition:transform .3s var(--ease-spring)}
.pfad .mail:hover .arw{transform:translateX(4px)}
.kontakt__foot{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 40px;font-size:15px;
  color:rgba(255,255,255,.66)}
.kontakt__foot a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.formgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
.formgrid h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.formgrid .lead{margin-top:18px;color:var(--muted);font-size:16.5px;max-width:42ch}
.direktbox{margin-top:26px;padding:24px 26px;border-radius:20px;border:1px solid var(--line);
  background:var(--paper-warm);font-size:15.5px;line-height:1.75}
.direktbox b{font-weight:400}
.direktbox a{color:var(--plum);text-decoration:underline;text-underline-offset:3px}

.form{padding:30px;border-radius:24px;border:1px solid var(--line);background:#fff;
  box-shadow:0 26px 60px rgba(31,18,25,.07)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.feld label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.feld input,.feld select,.feld textarea{
  font-family:var(--sans);font-size:15.5px;font-weight:300;color:var(--text);
  padding:13px 15px;border-radius:13px;border:1px solid var(--line);background:var(--paper-warm);
  transition:border-color .3s,box-shadow .3s,background .3s}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--plum);background:#fff;box-shadow:0 0 0 4px rgba(112,72,97,.1)}
.hp-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:14px;color:var(--muted);line-height:1.55}
.consent input{margin-top:3px;accent-color:var(--plum);width:17px;height:17px;flex:none}
.consent a{color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.form .btn{width:100%}
.form__status{margin-top:14px;font-size:14.5px;color:var(--plum)}
.form__status.ok{color:#2E7D4F}
.form__status.err{color:var(--orange-deep)}
.form__hinweis{margin-top:16px;font-size:12.5px;color:var(--muted)}

/* ============================================================
   CTA-BAND am Seitenende
   ============================================================ */
.ctaband{position:relative;overflow:hidden;padding:clamp(72px,8vw,110px) 0;color:#fff;text-align:center;
  background:linear-gradient(140deg,#4A2B41 0%,#2A1826 46%,#150C13 100%)}
.ctaband .mesh{opacity:.4}
.ctaband .wrap{position:relative;z-index:2;max-width:760px}
.ctaband h2{font-size:clamp(30px,4vw,50px)}
.ctaband p{margin:18px auto 0;max-width:52ch;font-size:17px;color:rgba(255,255,255,.76)}
.ctaband .cta__reihe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.ctaband .klein{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
/* Ringe, die nach außen laufen: ruhiges Signal statt Blinken */
.ringe{position:absolute;left:50%;top:50%;width:min(900px,120%);aspect-ratio:1;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none}
.ringe i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,122,56,.22);
  opacity:0;animation:ringe 7s ease-out infinite}
.ringe i:nth-child(2){animation-delay:2.3s}
.ringe i:nth-child(3){animation-delay:4.6s}
@keyframes ringe{0%{transform:scale(.3);opacity:0}18%{opacity:.7}100%{transform:scale(1);opacity:0}}

/* ============================================================
   RECHTSTEXTE
   ============================================================ */
.legal{padding:calc(var(--nav-h) + clamp(32px,4vw,56px)) 0 clamp(72px,8vw,110px);background:var(--paper)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(34px,4.6vw,54px)}
.legal h2{font-size:clamp(23px,2.6vw,30px);margin:44px 0 14px}
.legal h3{font-size:19px;margin:28px 0 10px}
.legal p,.legal li{font-size:16px;color:var(--muted);line-height:1.72}
.legal p{margin-bottom:14px}
.legal p b,.legal li b{font-weight:400;color:var(--text)}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.legal__stand{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;z-index:1;background:var(--ink-2);color:rgba(255,255,255,.62);padding:70px 0 34px;
  border-top:1px solid var(--line-dark)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer__logo{margin-bottom:18px}
.footer__logo img{height:32px;width:auto;opacity:.94}
.footer p{font-size:14.5px;max-width:38ch;line-height:1.6}
.footer h4{color:#fff;font-size:12px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.footer ul a:hover{color:#fff}
.footer__bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:13px}
.footer__bottom nav{display:flex;gap:22px}

/* ---------- Eule als Wasserzeichen ---------- */
.wz{
  position:absolute;pointer-events:none;user-select:none;
  width:min(560px,44%);height:auto;right:-5%;bottom:-14%;
  opacity:.06;animation:treiben 34s ease-in-out infinite;
}
.wz--hell{opacity:.045}
.wz--oben{top:-10%;bottom:auto;right:-7%}
.wz--klein{width:min(360px,30%);right:2%;bottom:-8%}
.wz--links{left:-6%;right:auto}
@keyframes treiben{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(-2.5deg)}}
@media(max-width:880px){.wz{width:76%;opacity:.05}}

/* ---------- Wortwelle ---------- */
.grosssatz{font-size:clamp(24px,3.1vw,42px);line-height:1.24;letter-spacing:-.03em;max-width:24ch}
.grosssatz .w{transition:color .5s var(--ease-out),text-shadow .5s var(--ease-out)}
.grosssatz .w.hot{color:var(--orange);text-shadow:0 0 26px rgba(255,122,56,.35)}
/* Aufbau wie im Tisch-Abschnitt der Startseite: zwei Zeilen statt einer.
   Satz und Hinweis stehen nebeneinander in der ersten und enden auf
   derselben Höhe, die Rollen stehen allein in der zweiten. Vorher hing
   der Hinweis an der Unterkante der Rollen und stand neben ihnen. */
.satz__grid{display:grid;grid-template-columns:1.22fr .78fr;gap:24px 56px;align-items:end}
.grosssatz{grid-column:1;grid-row:1}
.satz__grid .rollen{grid-column:1;grid-row:2}
.satz__note{grid-column:2;grid-row:1;align-self:end;justify-self:end;
  color:rgba(255,255,255,.72);font-size:16.5px;max-width:40ch}
.satz__note b{font-weight:400;color:#fff}
/* Der Abstand zum Satz kommt aus dem Zeilenabstand des Rasters. */
.satz__grid .rollen{margin-top:0}
.rollen{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.rollen span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:13.5px;
  color:rgba(255,255,255,.86)}
.rollen span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--plum-soft)}
.rollen span:nth-child(-n+3)::before{background:var(--orange)}

/* ---------- REVEALS ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* ---------- RESPONSIV ---------- */
@media(max-width:1080px){
  .faq__cols,.formgrid,.satz__grid{grid-template-columns:1fr;gap:40px}
  /* Untereinander gilt die Zeilenaufteilung nicht mehr: Satz, Rollen,
     Hinweis stehen dann in der Reihenfolge des Quelltextes. */
  .grosssatz,.satz__grid .rollen,.satz__note{grid-column:auto;grid-row:auto;justify-self:stretch}
  .satz__grid{gap:28px}
  .nf__zwei,.beispiele{grid-template-columns:1fr}
  .wege3,.wege3--zwei{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-a,.t-b,.t-c,.t-halb{grid-column:span 2}
  .t-d,.t-e,.t-f,.t-g{grid-column:span 1}
  .nf__lagen,.nf__warum,.tcards,.tcards--4,.people,.people--4,.mosaic{grid-template-columns:minmax(0,1fr)}
  .rat__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .nf__warum div{border-bottom:1px solid rgba(255,255,255,.1)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .rw__row{grid-template-columns:56px 1fr;gap:14px}
  .rw__row p,.rw__row ul{grid-column:2}
}
@media(max-width:880px){
  .nav__links,.nav .btn{display:none}
  .burger{display:flex}
  .glassbar,.glassbar--3{grid-template-columns:1fr 1fr}
  .glassbar div:nth-child(2n){border-right:0}
  .glassbar div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
  .mapstats{grid-template-columns:1fr 1fr}
  .phero h1{font-size:clamp(32px,8.4vw,44px)}
  .phero__cta .btn{width:100%}
  .tl__item summary{grid-template-columns:38px 1fr 18px;gap:12px}
  .tl__dauer{grid-column:2;margin-top:-6px}
  .tl__body{padding-left:50px}
  .weg-linie{padding-left:44px}
  .weg-linie__spur{left:16px}
  .weg-punkt{left:-27px}
  .form .row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g,.t-halb{grid-column:span 1}
  .t-d h3,.t-e h3,.t-f h3,.t-g h3{font-size:21px}
  .footer__grid{grid-template-columns:1fr}
  .zitat{padding:28px 24px}
  .nf__frei{padding:22px}
  .form{padding:24px 20px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .struktur__linie path{stroke-dashoffset:0}
  .weg-linie__fill{height:100%}
}

/* ============================================================
   BILDSPRACHE UND BEWEGUNG DER UNTERSEITEN
   Ersetzt das Eulen-Wasserzeichen, das auf jeder dunklen
   Sektion dasselbe war. Jede Unterseite bekommt hier eigene
   Bausteine, dazu die gemeinsamen: Bildkopf, Bildband, Splitt.
   Bewegt wird ausschließlich transform und opacity.
   ============================================================ */

/* ---------- Bildkopf: Foto statt Farbverlauf ---------- */
.phero--bild{background:var(--ink)}
.phero__bild{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.phero__bild img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transform-origin:50% 60%;
  will-change:transform;
}
/* Pflicht-Scrim: Text liegt nie auf ungefiltertem Foto. Links dicht,
   damit die Überschrift trägt, nach rechts öffnet sich das Motiv. */
.phero__bild::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(21,12,19,.94) 0%, rgba(24,13,21,.86) 34%, rgba(45,24,39,.52) 64%, rgba(21,12,19,.70) 100%),
    linear-gradient(180deg, rgba(21,12,19,.72) 0%, rgba(21,12,19,.18) 40%, rgba(21,12,19,.86) 100%);
}
.phero--bild .mesh{opacity:.26}
.phero--bild::before{opacity:.5}

/* ---------- Bildband: volle Breite, ruhige Parallaxe ---------- */
.band{
  position:relative;overflow:hidden;
  height:clamp(320px,44vh,520px);height:clamp(320px,44svh,520px);
  background:var(--ink);
}
.band__bild{position:absolute;inset:-8% 0;will-change:transform}
.band__bild img{width:100%;height:100%;object-fit:cover}
.band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,12,19,.62) 0%,rgba(21,12,19,.16) 42%,rgba(21,12,19,.72) 100%);
}
.band__text{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(26px,4vw,54px) 0;
}
.band__text .wrap{max-width:760px}
.band__text p{
  font-family:var(--sans);font-weight:400;font-size:clamp(22px,3vw,40px);
  line-height:1.16;letter-spacing:-.034em;color:#fff;text-wrap:balance;
}
.band__text p em{font-style:normal}
.band__text .klein{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:14px;
}

/* ---------- Splitt: Bild und Text nebeneinander, im Wechsel ---------- */
.splitt{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.splitt--dreh{direction:rtl}
.splitt--dreh > *{direction:ltr}
.splitt__bild{
  position:relative;border-radius:22px;overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 30px 70px rgba(21,12,19,.20);
}
.dunkel .splitt__bild{box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.10)}
.splitt__bild img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);will-change:transform;
}
/* Der Zuschnitt öffnet sich beim Hereinscrollen von unten nach oben */
.splitt__bild{clip-path:inset(0 0 0 0 round 22px)}
.reveal .splitt__bild,.splitt__bild.reveal{clip-path:inset(28% 0 0 0 round 22px);transition:clip-path 1.2s var(--ease-out)}
.reveal.in .splitt__bild,.splitt__bild.reveal.in{clip-path:inset(0 0 0 0 round 22px)}
.splitt__text h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.splitt__text h3 em{font-style:normal;color:var(--plum)}
.dunkel .splitt__text h3 em{color:var(--plum-soft)}
.splitt__text p{color:var(--muted);font-size:16.5px;max-width:46ch}
.dunkel .splitt__text p{color:rgba(255,255,255,.72)}
.splitt__marke{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);
}
.splitt__marke::before{content:"";width:22px;height:1px;background:currentColor;opacity:.8}

@media(max-width:880px){
  .splitt{grid-template-columns:1fr;gap:24px}
  .splitt--dreh{direction:ltr}
  .splitt__bild{aspect-ratio:16/10}
  .band{height:clamp(260px,40vh,380px);height:clamp(260px,40svh,380px)}
}

/* ============================================================
   MOTION GRAFIK JE UNTERSEITE
   Jede Seite bekommt eine eigene Bewegungssprache, damit sich
   die Unterseiten nicht mehr gleichen:
     Nachfolge  · Linie, die sich zeichnet
     Netzwerk   · Knoten, die sich verbinden
     Über uns   · Ringe, die wachsen
     Kontakt    · Licht, das atmet
   ============================================================ */

/* ---------- 1 · NACHFOLGE: der Weg zeichnet sich ---------- */
.pfad{
  position:relative;margin-top:clamp(30px,4vw,52px);
  /* Eine Quelle für beide Maße: die Spur links und die Gasse, um die
     der Text eingerückt ist. Der Punkt rechnet sich daraus aus. */
  --spur:clamp(48px,7vw,96px);
  --gasse:clamp(74px,10vw,140px);
}
.pfad__grafik{
  position:absolute;left:0;top:0;width:var(--spur);height:100%;
  pointer-events:none;overflow:visible;
}
.pfad__grafik path{fill:none;stroke-linecap:round}
.pfad__spur{stroke:rgba(255,255,255,.13);stroke-width:2}
.pfad__zug{
  stroke:url(#wegVerlauf);stroke-width:2.5;
  stroke-dasharray:var(--len,2000);
  stroke-dashoffset:calc(var(--len,2000) * (1 - var(--zug,0)));
}
.pfad__kopf{
  fill:var(--orange);
  filter:drop-shadow(0 0 9px rgba(255,122,56,.85));
  opacity:var(--kopfauf,0);
}
.pfad__liste{list-style:none;margin:0;padding:0 0 0 var(--gasse);
  display:flex;flex-direction:column;gap:clamp(26px,3.4vw,46px)}
.pfad__punkt{position:relative}
.pfad__punkt::before{
  /* --px kommt aus signal.js: die X-Stelle, an der die Welle auf dieser
     Höhe verläuft. Ohne JS steht der Punkt mittig auf der Spur. */
  content:"";position:absolute;left:calc(var(--px, calc(var(--spur) / 2)) - var(--gasse) - 7px);
  top:10px;width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.22);
  transition:border-color .5s var(--ease-out),background .5s var(--ease-out),transform .5s var(--ease-spring);
}
.pfad__punkt.an::before{
  background:var(--orange);border-color:var(--orange);transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(255,122,56,.16);
}
.pfad__nr{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:color .5s var(--ease-out);
}
.pfad__punkt.an .pfad__nr{color:var(--orange)}
.pfad__punkt h3{font-size:clamp(20px,2.2vw,27px);margin:7px 0 9px;
  opacity:.55;transition:opacity .6s var(--ease-out)}
.pfad__punkt.an h3{opacity:1}
.pfad__punkt p{color:rgba(255,255,255,.62);max-width:52ch;font-size:16px;
  opacity:.5;transition:opacity .6s var(--ease-out)}
.pfad__punkt.an p{opacity:1}
.pfad__dauer{
  display:inline-block;margin-top:11px;padding:4px 11px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.62);
}
.pfad__punkt.an .pfad__dauer{border-color:rgba(255,122,56,.4);color:#fff}

/* ---------- 2 · NETZWERK: Knoten verbinden sich ---------- */
.netz{position:absolute;inset:0;z-index:1;pointer-events:none}
.netz canvas{width:100%;height:100%;display:block;opacity:.85}
.netz--hell canvas{opacity:.5}

/* ---------- 3 · ÜBER UNS: Ringe wachsen ---------- */
/* Nicht .ringe nennen: so heißt schon der Puls im CTA-Band. */
.jahresringe{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(1100px,116%);aspect-ratio:1;z-index:0;pointer-events:none;
  opacity:.5;
}
.jahresringe circle{
  fill:none;stroke:currentColor;stroke-width:.6;
  transform-origin:50% 50%;
  transform:scale(var(--r,.2));opacity:calc(var(--r,.2) * .9);
  transition:transform 1.6s var(--ease-out),opacity 1.6s var(--ease-out);
}
.jahresringe circle:nth-child(1){transition-delay:0s}
.jahresringe circle:nth-child(2){transition-delay:.14s}
.jahresringe circle:nth-child(3){transition-delay:.28s}
.jahresringe circle:nth-child(4){transition-delay:.42s}
.jahresringe circle:nth-child(5){transition-delay:.56s}
.jahresringe circle:nth-child(6){transition-delay:.7s}
.jahresringe__punkt{
  fill:var(--orange);opacity:0;
  transition:opacity .8s var(--ease-out);
}
.in .jahresringe__punkt{opacity:.85}
.in .jahresringe__punkt:nth-of-type(2){transition-delay:.5s}
.in .jahresringe__punkt:nth-of-type(3){transition-delay:.7s}
.in .jahresringe__punkt:nth-of-type(4){transition-delay:.9s}

/* ---------- 4 · KONTAKT: Licht atmet ---------- */
.atem{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
/* Kräftiger und schneller als zuvor (9 s / 11,5 s), aber weiterhin eine
   Atembewegung und kein Blinken: nur Maßstab und Deckkraft ändern sich,
   die Ränder bleiben weich. Das zweite Licht wandert dazu ein Stück,
   damit die beiden nicht im Gleichtakt pulsieren. */
.atem i{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(1000px,104%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,122,56,.46),rgba(201,167,181,.38) 42%,transparent 70%);
  filter:blur(26px);
  animation:atmen 6s var(--ease-out) infinite;
}
.atem i:nth-child(2){
  width:min(660px,70%);animation-name:atmen2;animation-duration:7.6s;animation-delay:-2.4s;
  background:radial-gradient(circle at 50% 50%,rgba(201,167,181,.52),rgba(112,72,97,.2) 50%,transparent 72%);
}
@keyframes atmen{
  0%,100%{transform:scale(.88);opacity:.55}
  50%    {transform:scale(1.16);opacity:1}
}
@keyframes atmen2{
  0%,100%{transform:translate(0,0) scale(.9);opacity:.6}
  50%    {transform:translate(6%,-4%) scale(1.2);opacity:1}
}
/* Eingabefelder bekommen eine Linie, die beim Fokus von links einläuft */
/* Beim Fokus läuft eine Linie von links unter das Feld. Als
   Pseudo-Element, damit im Markup nichts ergänzt werden muss. */
.feld{position:relative}
.feld::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease-out);pointer-events:none;
}
.feld:focus-within::after{transform:scaleX(1)}

@media(max-width:880px){
  .pfad{--spur:40px;--gasse:62px}
  .jahresringe{width:150%}
}

/* ============================================================
   TIPPZIELE AUF DEM HANDY
   Footer-Listen, Fußzeile und freistehende Telefon- und
   E-Mail-Links sind eigenständige Ziele und brauchen Höhe.
   Links mitten im Fließtext bleiben, wie sie sind: dort wäre
   eine Mindesthöhe ein Loch im Absatz.
   ============================================================ */
@media(max-width:880px){
  .footer ul{gap:0}
  .footer ul a,
  .footer__bottom nav a{
    display:flex;align-items:center;min-height:44px;
  }
  .footer__bottom nav{gap:20px}
  /* Freistehende Kontaktwege: die Mail-Zeile der Kontaktkarten, die
     Zeile unter den Karten und der Direktkasten. Jede steht für sich
     auf einer eigenen Zeile, eine Mindesthöhe stört dort nicht. */
  .weg .mail,
  .kontakt__foot a,
  .direktbox a,
  .direkt a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

/* Nummerierte Zusagen neben dem Bild. Die Zahl kommt aus dem
   Zähler der Liste, im Markup steht sie nicht doppelt. */
.zusage{list-style:none;margin:22px 0 0;padding:0;counter-reset:z}
.zusage li{
  counter-increment:z;position:relative;padding:0 0 0 44px;
  margin-bottom:20px;
}
.zusage li::before{
  content:"0" counter(z);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--orange);
}
.zusage b{display:block;font-weight:400;font-size:18px;color:var(--text);margin-bottom:5px}
.zusage span{display:block;color:var(--muted);font-size:15.5px;line-height:1.6}
.zusage li::after{
  content:"";position:absolute;left:5px;top:26px;bottom:-14px;width:1px;
  background:linear-gradient(180deg,var(--line),transparent);
}
.zusage li:last-child{margin-bottom:0}
.zusage li:last-child::after{display:none}

/* ============================================================
   WENIGER BEWEGUNG
   Der globale Block weiter oben schaltet Animationen und
   Übergänge ab. Hier kommt dazu, was danach neu entstanden ist:
   alles muss ohne Bewegung im Endzustand stehen, nicht im
   Anfangszustand hängen bleiben.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .phero__bild img{transform:scale(1.04)!important}
  .band__bild{transform:none!important}
  .splitt__bild,.reveal .splitt__bild,.splitt__bild.reveal{clip-path:none}
  .pfad__zug{stroke-dashoffset:0}
  .pfad__kopf{opacity:0}
  .pfad__punkt h3,.pfad__punkt p{opacity:1}
  .jahresringe circle{transform:scale(1);opacity:.55}
  .jahresringe__punkt{opacity:.85}
  .atem i{animation:none;transform:translate(-50%,-50%) scale(1);opacity:.8}
  .feld::after{display:none}
}

/* Ältere Safari (vor iOS 16) kennen overflow:clip nicht. Ohne diesen
   Ersatz könnte ein Zierelement die Seite seitlich verschiebbar machen.
   Nur am body und als hidden: am html zusätzlich gesetzt würde der body
   zum Scroll-Container, und alle haftenden Köpfe hörten auf zu haften. */
@supports not (overflow:clip){
  body{overflow-x:hidden}
}