/* =========================================================
   Phantom Global — Designsystem
   Ruhige Flächen, große Typografie, wenige Linien.
   Weiß → Nebelgrau → Nacht als Rhythmus über alle Seiten.
   ========================================================= */

:root{
  /* Flächen */
  --paper:#FFFFFF;         /* nur noch für Karten und Tabellen */
  --grund:#E9F0FA;         /* heller Grund der Seite — deutlich blau */
  --mist:#DCE7F6;          /* der tiefere der beiden hellen Töne */
  --night:#00224E;         /* abgedunkeltes Allianz-Blau für große Flächen */
  --night-2:#001636;

  /* Text */
  --ink:#111114;
  --ink-2:#6C6C74;
  --ink-3:#96969E;
  --on-night:#FFFFFF;
  --on-night-2:rgba(255,255,255,.62);

  /* Allianz-Blau als Markenfarbe. Auf dunklem Grund ein aufgehellter Ton
     derselben Farbe (H 214°), weil #003781 auf Schwarz nicht mehr lesbar ist. */
  --accent:#003781;
  --accent-hi:#4C93F0;
  --accent-dunkel:#002355;

  /* Ein eigener Ton je Säule. Das Fundament behält die Markenfarbe — es ist
     die Basis, nicht eine der Säulen. Von jedem Ton gibt es zwei Werte: der
     erste steht auf hellem Grund (mindestens 4.5:1 gegen Weiß, also auch für
     kleine Schrift tragfähig), der zweite auf den dunklen Bändern.
       Strategie … Violett      Digitalisierung … Grün
       Prozesse  … Türkis       Automatisierung … Bernstein
       Marketing … Koralle      KI              … Magenta */
  --t-violett:#5B4CC7;   --t-violett-hi:#9C8DF2;
  --t-tuerkis:#0E7F87;   --t-tuerkis-hi:#3CC7D1;
  --t-koralle:#C0472F;   --t-koralle-hi:#FF8B6E;
  --t-gruen:#17784A;     --t-gruen-hi:#46C98A;
  --t-amber:#8F680B;     --t-amber-hi:#E5AC3C;
  --t-magenta:#A93B89;   --t-magenta-hi:#EE7CC6;

  --line:rgba(0,40,90,.14);
  --line-night:rgba(255,255,255,.14);

  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(22px,5vw,48px);
  --maxw:1240px;
  --readw:820px;

  --r-card:22px;
  --r-pill:980px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:74px}
body{
  margin:0;
  background:var(--grund);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16.5px,1.05vw,18px);
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
p{margin:0}
a{color:inherit}
img{max-width:100%}
h1,h2,h3,h4{
  font-family:var(--display);margin:0;
  letter-spacing:-.032em;line-height:1.06;font-weight:600;
  text-wrap:balance;
}

/* ---------- Flächen ---------- */
section{padding:clamp(76px,9vw,150px) 0}
.band-paper{background:var(--mist)}
.band-blue{background:var(--night);color:var(--on-night)}
.band-deep{background:var(--night-2);color:var(--on-night)}
.on-blue{color:var(--on-night)}

/* ---------- Navigation ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(233,240,250,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:54px}
.logo{
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.logo span{font-weight:500;color:var(--ink-3)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:.83rem;font-weight:400}
.nav-links > a{text-decoration:none;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.nav-links > a:hover{color:var(--ink)}
.nav-links > a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav-right{display:flex;align-items:center;gap:14px}

/* Leistungs-Menü */
.has-menu{position:relative}
.has-menu > button{
  font:inherit;font-size:.83rem;color:var(--ink-2);background:none;border:0;padding:0;
  cursor:pointer;display:flex;align-items:center;gap:.4em;transition:color .2s;
}
.has-menu > button::after{
  content:"";width:5px;height:5px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .25s;
}
.has-menu[aria-expanded="true"] > button,.has-menu > button:hover{color:var(--ink)}
.has-menu[aria-expanded="true"] > button::after{transform:rotate(225deg) translateY(-2px)}
.menu{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:360px;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--line);border-radius:18px;padding:10px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
}
.has-menu[aria-expanded="true"] .menu{opacity:1;visibility:visible;transform:translateX(-50%)}
.menu a{display:block;text-decoration:none;padding:11px 14px;border-radius:12px;color:var(--ink);transition:background .18s}
.menu a:hover{background:rgba(0,0,0,.045)}
.menu a b{display:block;font-weight:500;font-size:.92rem;letter-spacing:-.015em}
.menu a i{display:block;font-style:normal;font-size:.8rem;color:var(--ink-2);margin-top:2px;letter-spacing:-.005em}
.menu a.is-base{background:rgba(0,55,129,.06)}
.menu a.is-base:hover{background:rgba(0,55,129,.1)}
.menu a.is-base b{color:var(--accent)}

.nav-toggle{
  display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:0;position:relative;
}
.nav-toggle i{position:absolute;left:8px;right:8px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .28s,opacity .2s}
.nav-toggle i{left:12px;right:12px}
.nav-toggle i:nth-child(1){top:16px}
.nav-toggle i:nth-child(2){top:21px}
.nav-toggle i:nth-child(3){top:26px}
body.nav-open .nav-toggle i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .nav-toggle i:nth-child(2){opacity:0}
body.nav-open .nav-toggle i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media(max-width:1040px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:54px 0 auto;background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px var(--pad) 30px;
    max-height:calc(100vh - 54px);overflow-y:auto;display:none;
  }
  body.nav-open .nav-links{display:flex}
  .nav-links > a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink)}
  .has-menu{position:static}
  .has-menu > button{padding:15px 2px;border-bottom:1px solid var(--line);width:100%;justify-content:space-between;font-size:1.05rem;color:var(--ink)}
  .menu{
    position:static;transform:none;min-width:0;border:0;box-shadow:none;
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:6px 0 10px;opacity:1;visibility:visible;display:none;
  }
  .has-menu[aria-expanded="true"] .menu{display:block;transform:none}
  .menu a{padding:12px 14px}
  .nav-right .btn{display:none}
}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:500;font-size:.95rem;letter-spacing:-.01em;
  padding:13px 26px;border-radius:var(--r-pill);
  transition:background .2s ease,transform .2s ease;white-space:nowrap;
}
.btn:hover{background:var(--accent-dunkel);transform:translateY(-1px)}
.btn-ghost{
  background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 1.4px rgba(0,55,129,.42);
}
.btn-ghost:hover{background:rgba(0,55,129,.07);color:var(--accent);transform:translateY(-1px)}
.on-blue .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.32)}
.on-blue .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:rgba(255,255,255,.86);color:var(--ink)}
.btn-sm{padding:8px 18px;font-size:.83rem}

/* ---------- Hero: Startseite ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(88px,13vw,190px) 0 clamp(72px,9vw,130px);
  background:
    radial-gradient(120% 95% at 50% -12%,rgba(0,55,129,.26) 0%,rgba(0,55,129,0) 62%),
    var(--grund);
}
.hero h1{
  font-size:clamp(2.9rem,7.6vw,5.6rem);font-weight:600;
  letter-spacing:-.045em;line-height:1.03;
  margin:0 auto;max-width:15ch;color:var(--ink);
}
.hero h1 em{font-style:normal;color:var(--ink)}
.hero p.lead{
  margin:26px auto 0;max-width:52ch;
  font-size:clamp(1.08rem,1.75vw,1.42rem);line-height:1.42;
  letter-spacing:-.018em;color:var(--ink-2);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;justify-content:center}

/* ---------- Hero: Themenseiten ---------- */
.hero-sub{
  position:relative;overflow:hidden;text-align:center;color:var(--on-night);
  padding:clamp(80px,11vw,164px) 0 clamp(64px,8vw,112px);
  background:
    radial-gradient(110% 80% at 50% 0%,rgba(76,147,240,.24) 0%,rgba(76,147,240,0) 60%),
    var(--night);
}
.hero-sub h1{
  font-size:clamp(2.5rem,6.4vw,4.7rem);font-weight:600;letter-spacing:-.045em;
  margin:0 auto;max-width:17ch;color:#fff;
}
.hero-sub h1 em{font-style:normal;color:var(--accent-hi)}
.hero-sub .lead{
  margin:24px auto 0;max-width:62ch;
  font-size:clamp(1.04rem,1.6vw,1.3rem);line-height:1.45;letter-spacing:-.016em;
  color:var(--on-night-2);
}
.hero-sub .hero-cta{margin-top:36px}

/* ---------- Kennzahlen ---------- */
.kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:clamp(52px,6vw,80px);text-align:left;
}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{
  background:rgba(255,255,255,.06);border:1px solid var(--line-night);
  border-radius:var(--r-card);padding:26px 24px 28px;
}
.kpi b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.04em;color:#fff;line-height:1.05;
}
.kpi span{display:block;margin-top:10px;font-size:.88rem;color:var(--on-night-2);line-height:1.45;letter-spacing:-.008em}

/* ---------- Abschnittsköpfe ---------- */
.sec-head{max-width:var(--readw);margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{
  font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.04em;
  margin-top:14px;color:var(--ink);
}
.on-blue .sec-head h2{color:#fff}
.sec-head p{
  margin:20px auto 0;color:var(--ink-2);max-width:60ch;
  font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.5;letter-spacing:-.015em;
}
.on-blue .sec-head p{color:var(--on-night-2)}

/* ---------- Das Bauwerk: Dach, Säulen, Fundament ---------- */
.house-head{max-width:var(--readw);margin-left:auto;margin-right:auto;text-align:center}
.house-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.04em;margin-top:0}
.house-head p{margin:20px auto 0;color:var(--on-night-2);max-width:58ch;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.5;letter-spacing:-.015em}

.house{
  margin:clamp(48px,6vw,80px) auto 0;max-width:1080px;
  display:flex;flex-direction:column;gap:8px;
}

/* Das Dach */
.roof{
  border-radius:20px;padding:clamp(22px,2.6vw,30px) 28px;
  background:
    radial-gradient(120% 180% at 50% 0%,rgba(76,147,240,.22) 0%,rgba(76,147,240,0) 70%),
    rgba(255,255,255,.07);
  border:1px solid var(--line-night);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.roof-mark{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:-.03em;color:#fff;
}
.roof-sub{font-size:.94rem;color:var(--on-night-2);letter-spacing:-.01em}

/* Die Säulen — tragen oben das Dach, stehen unten auf dem Fundament */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pillar{
  position:relative;min-height:clamp(124px,12.5vw,162px);
  border-radius:18px 18px 8px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid var(--line-night);
  padding:20px 20px 22px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  text-decoration:none;
}
.pillar .p-i{font-size:.82rem;font-weight:600;color:var(--accent-hi);letter-spacing:-.005em}
.pillar .p-t{
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.12rem);
  letter-spacing:-.03em;color:#fff;line-height:1.22;
}
.pillar::after{
  content:"\2192";position:absolute;right:20px;bottom:20px;
  color:var(--accent-hi);opacity:0;transform:translateX(-4px);
  transition:opacity .25s,transform .25s;
}
.pillar:hover{
  background:linear-gradient(180deg,rgba(76,147,240,.26) 0%,rgba(76,147,240,.07) 100%);
  border-color:rgba(76,147,240,.55);
}
.pillar:hover::after{opacity:1;transform:none}

@media(max-width:1000px){.pillars{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pillar{min-height:clamp(104px,26vw,124px)}}
/* Ganz schmal: die Säulen werden zu kompakten Zeilen statt zu leeren Hochformaten */
@media(max-width:420px){
  .pillars{grid-template-columns:1fr;gap:6px}
  .pillar{
    min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:14px;padding:16px 18px;border-radius:12px;
  }
  .pillar .p-i{flex:none}
  .pillar .p-t{font-size:1.02rem;margin-right:auto}
  .pillar::after{position:static;opacity:.55;transform:none}
  .pillar:hover::after{opacity:1}
}

/* Das Fundament — trägt alles darüber */
.foundation{
  background:#fff;color:var(--ink);border-radius:8px 8px 20px 20px;
  padding:clamp(28px,3.4vw,40px) clamp(26px,3.2vw,40px);
  display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:20px 40px;
  text-decoration:none;position:relative;transition:background .25s ease;
}
@media(max-width:760px){.foundation{grid-template-columns:1fr;gap:14px}}
.foundation:hover{background:#EFF4FE}
.foundation .f-label{font-size:.86rem;font-weight:600;color:var(--accent)}
.foundation .f-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,2.9vw,2rem);letter-spacing:-.038em;margin-top:8px;
}
.foundation .f-note{font-size:1rem;color:var(--ink-2);max-width:38ch;letter-spacing:-.012em;line-height:1.5}

/* ---------- Fundament-Block ---------- */
.fund-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(44px,5vw,68px)}
@media(max-width:900px){.fund-grid{grid-template-columns:1fr}}
.fund-copy{font-size:1.04rem;color:var(--ink-2);letter-spacing:-.014em;line-height:1.6}
.fund-copy p+p{margin-top:20px}
.fund-copy .pull{
  font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.7vw,1.85rem);
  line-height:1.22;letter-spacing:-.038em;color:var(--ink);
  margin:30px 0;padding:0;
}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-item{
  background:var(--mist);border-radius:18px;padding:24px 26px;
  display:flex;gap:20px;align-items:flex-start;
}
.band-paper .stack-item{background:#fff}
.stack-item .k{font-size:.88rem;font-weight:600;color:var(--accent);padding-top:3px;flex:none;font-variant-numeric:tabular-nums}
.stack-item h4{font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.028em;margin:0 0 6px}
.stack-item p{font-size:.96rem;color:var(--ink-2);letter-spacing:-.01em}

/* ---------- Karten: Leistungen ---------- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;margin-top:clamp(44px,5vw,64px);
}
.card{
  background:#fff;border-radius:var(--r-card);padding:clamp(28px,3vw,38px);
  text-decoration:none;display:flex;flex-direction:column;
  border:1px solid var(--line);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(0,0,0,.3)}
.card .num{font-size:.84rem;font-weight:600;color:var(--accent);display:block;margin-bottom:14px}
.card h3{font-size:1.3rem;font-weight:600;letter-spacing:-.032em;margin-bottom:10px}
.card p{font-size:.97rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.5}
.card.is-base{background:var(--night);border-color:transparent;color:#fff}

/* Bento: Fundament und die jüngste Säule breiter — das Raster geht damit glatt auf */
@media(min-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards .card.is-base,
  .cards .card:last-child{grid-column:span 2}
}
.card.is-base .num{color:var(--accent-hi)}
.card.is-base p{color:var(--on-night-2)}
.card .tag{
  display:inline-block;width:fit-content;margin-top:16px;
  font-size:.78rem;font-weight:500;letter-spacing:-.005em;
  color:#fff;background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:6px 13px;
}
.card .more{
  display:flex;width:fit-content;align-items:center;gap:.45em;margin-top:auto;padding-top:20px;
  font-size:.9rem;font-weight:500;color:var(--accent);letter-spacing:-.012em;
}
.card.is-base .more{color:var(--accent-hi)}
.card .more::after{content:"\2192";transition:transform .25s}
.card:hover .more::after{transform:translateX(4px)}

/* ---------- Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(44px,5vw,64px)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  background:rgba(255,255,255,.05);border:1px solid var(--line-night);
  border-radius:var(--r-card);padding:28px 26px 30px;
}
.step .n{display:block;font-size:.84rem;font-weight:600;color:var(--accent-hi);margin-bottom:14px;font-variant-numeric:tabular-nums}
.step h4{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.03em;margin-bottom:10px}
.step p{font-size:.95rem;color:var(--on-night-2);letter-spacing:-.01em;line-height:1.5}
.steps-light .step{background:var(--paper);border-color:transparent}
.steps-light .step .n{color:var(--accent)}
.steps-light .step h4{color:var(--ink)}
.steps-light .step p{color:var(--ink-2)}

/* ---------- Warum ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:clamp(44px,5vw,64px)}
.why > div{
  background:var(--paper);border-radius:var(--r-card);
  padding:clamp(26px,2.8vw,34px);
}
.on-blue .why > div{background:rgba(255,255,255,.06);border:1px solid var(--line-night)}
.why div h4{
  font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:10px;
}
.on-blue .why div h4{color:#fff}
.why div p{font-size:.97rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.5}
.on-blue .why div p{color:var(--on-night-2)}

/* ---------- Passung ---------- */
.fit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);margin-top:clamp(40px,4.5vw,58px)}
@media(max-width:860px){.fit{grid-template-columns:1fr}}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{
  padding:17px 0 17px 30px;border-bottom:1px solid var(--line);position:relative;
  font-size:1.02rem;letter-spacing:-.014em;
}
.fit li:first-child{border-top:1px solid var(--line)}
.fit li::before{
  content:"";position:absolute;left:2px;top:27px;width:9px;height:9px;
  border-radius:50%;background:var(--accent);
}
/* ---------- Dreier-Karten ---------- */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:clamp(40px,4.5vw,58px)}
.trio > div{background:var(--paper);border-radius:var(--r-card);padding:clamp(26px,2.8vw,34px)}
.band-paper .trio > div{background:#fff}
.on-blue .trio > div{background:rgba(255,255,255,.05);border:1px solid var(--line-night)}
.trio .n{display:block;font-size:.84rem;font-weight:600;color:var(--accent);margin-bottom:12px}
.on-blue .trio .n{color:var(--accent-hi)}
.trio h4{font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:-.03em;margin:0 0 9px}
.trio p{font-size:.96rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.5}
.on-blue .trio p{color:var(--on-night-2)}
.trio cite{display:block;margin-top:14px;font-style:normal;font-size:.85rem;color:var(--ink-3);letter-spacing:-.008em}
.on-blue .trio cite{color:rgba(255,255,255,.5)}
.trio cite a{color:var(--accent);text-decoration:none;font-weight:500}
.on-blue .trio cite a{color:var(--accent-hi)}

/* ---------- Tabellen ---------- */
.tbl-scroll{
  overflow-x:auto;margin-top:clamp(36px,4vw,54px);
  border-radius:var(--r-card);background:#fff;border:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
  /* Der Schatten an der rechten Kante verschwindet, sobald man am Ende ist */
  background-image:linear-gradient(to right,rgba(0,0,0,.10),rgba(0,0,0,0) 18px);
  background-position:right center;background-repeat:no-repeat;
  background-size:22px 100%;background-attachment:local,scroll;
}
@media(min-width:900px){.tbl-scroll{background-image:none}}
.on-blue .tbl-scroll{background:rgba(255,255,255,.04);border-color:var(--line-night)}
.band-paper .tbl-scroll{background:#fff}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:.96rem;letter-spacing:-.012em}
thead th{
  background:transparent;color:var(--ink-3);text-align:left;
  padding:20px 26px 14px;font-family:var(--body);font-size:.84rem;font-weight:600;letter-spacing:-.005em;
}
.on-blue thead th{color:rgba(255,255,255,.5)}
tbody td{padding:20px 26px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2);line-height:1.5}
.on-blue tbody td{border-top-color:var(--line-night);color:var(--on-night-2)}
tbody td:first-child{color:var(--ink);font-weight:500;width:23%}
.on-blue tbody td:first-child{color:#fff}
tbody tr:nth-child(even) td{background:transparent}
td.neg{color:var(--ink-3)}
.on-blue td.neg{color:rgba(255,255,255,.42)}
td.pos{color:var(--ink)}
.on-blue td.pos{color:#fff}
.tbl-hint{font-size:.86rem;color:var(--ink-2);margin-top:14px}

/* ---------- Ablauf-Kacheln ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(42px,5vw,62px)}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.node{
  background:rgba(255,255,255,.05);border:1px solid var(--line-night);
  border-radius:var(--r-card);padding:28px 26px 30px;
}
.node .step{display:block;font-size:.84rem;font-weight:600;color:var(--accent-hi);background:none;border:0;padding:0;border-radius:0}
.node h4{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.032em;margin:14px 0 9px;color:#fff}
.node p{font-size:.94rem;color:var(--on-night-2);letter-spacing:-.01em;line-height:1.5}
.node.result{background:#fff;border-color:transparent}
.node.result h4{color:var(--ink);font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.045em}
.node.result p{color:var(--ink-2)}
.node.result .step{color:var(--accent)}

/* ---------- Gegenüberstellung ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,4.5vw,58px)}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split-col{border-radius:var(--r-card);padding:clamp(28px,3vw,38px)}
.split-col.a{background:var(--mist);color:var(--ink-3)}
.band-paper .split-col.a{background:#fff}
.split-col.b{background:var(--night);color:#fff}
.split-col h3{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.035em;margin-bottom:8px}
.split-col.a h3{color:var(--ink-2)}
.split-col .sub{display:block;font-size:.84rem;font-weight:600;margin-bottom:24px;color:var(--ink-3)}
.split-col.b .sub{color:var(--accent-hi)}
.split-col ul{list-style:none;margin:0;padding:0}
.split-col li{padding:14px 0;border-top:1px solid var(--line);font-size:.95rem;display:flex;gap:14px;letter-spacing:-.01em;line-height:1.5}
.split-col.b li{border-top-color:var(--line-night)}
.split-col li .m{font-size:.84rem;font-weight:500;flex:none;width:106px;opacity:.6;padding-top:2px}

/* Auf dunklem Grund kehrt sich die Gegenüberstellung um: das Tragfähige ist das Helle */
.on-blue .split-col.a{background:rgba(255,255,255,.04);border:1px solid var(--line-night);color:rgba(255,255,255,.45)}
.on-blue .split-col.a h3{color:rgba(255,255,255,.62)}
.on-blue .split-col.a .sub{color:rgba(255,255,255,.4)}
.on-blue .split-col.a li{border-top-color:var(--line-night)}
.on-blue .split-col.b{background:#fff;color:var(--ink)}
.on-blue .split-col.b h3{color:var(--ink)}
.on-blue .split-col.b .sub{color:var(--accent)}
.on-blue .split-col.b li{border-top-color:var(--line)}

/* ---------- Karten-Raster ---------- */
.grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:clamp(40px,4.5vw,58px)}
.g-card{background:var(--paper);border-radius:var(--r-card);padding:clamp(26px,2.8vw,34px)}
@media(min-width:1000px){.grid6.vier{grid-template-columns:repeat(4,1fr)}}
.band-paper .g-card{background:#fff}
.on-blue .g-card{background:rgba(255,255,255,.05);border:1px solid var(--line-night)}
.g-card .n{display:block;font-size:.84rem;font-weight:600;color:var(--accent);margin-bottom:12px;font-variant-numeric:tabular-nums}
.on-blue .g-card .n{color:var(--accent-hi)}
.g-card h4{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.03em;margin-bottom:9px}
.g-card p{font-size:.95rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.5}
.on-blue .g-card p{color:var(--on-night-2)}

/* ---------- Zeitachse ---------- */
.tl{margin-top:clamp(40px,4.5vw,58px);border-left:1px solid var(--line-night);padding-left:0}
.tl-item{padding:0 0 34px 32px;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-4.5px;top:8px;width:9px;height:9px;background:var(--accent-hi);border-radius:50%}
.tl-item .wk{font-size:.84rem;font-weight:600;color:var(--accent-hi)}
.tl-item h4{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.03em;margin:9px 0 7px;color:#fff}
.tl-item p{font-size:.95rem;color:var(--on-night-2);max-width:58ch;letter-spacing:-.01em;line-height:1.5}

/* ---------- Herausgehobener Satz ---------- */
.callout{
  margin:clamp(48px,5vw,66px) auto 0;padding:0;border:0;text-align:center;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.45rem,3.2vw,2.3rem);line-height:1.2;letter-spacing:-.04em;
  color:var(--ink);max-width:26ch;
}
.on-blue .callout{color:#fff}
.note{margin:26px auto 0;font-size:.94rem;color:var(--ink-2);max-width:74ch;letter-spacing:-.01em;line-height:1.55;text-align:left}
.on-blue .note{color:rgba(255,255,255,.5)}
.note a{color:var(--accent);text-decoration:none;font-weight:500}
.on-blue .note a{color:var(--accent-hi)}
.note strong{color:var(--ink);font-weight:600}
.on-blue .note strong{color:rgba(255,255,255,.7)}

/* ---------- Weitere Leistungen ---------- */
.more-topics{margin-top:clamp(40px,4.5vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.more-topics{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.more-topics{grid-template-columns:1fr}}
.more-topics a{
  background:var(--paper);border-radius:var(--r-card);padding:26px 28px 28px;
  text-decoration:none;display:block;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),background .25s;
}
.band-paper .more-topics a{background:#fff}
.more-topics a:hover{transform:translateY(-4px);background:#ECEEF3}
.more-topics .n{display:block;font-size:.82rem;font-weight:600;color:var(--accent);margin-bottom:10px}
.more-topics b{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.03em;color:var(--ink)}
.more-topics span.d{display:block;font-size:.93rem;color:var(--ink-2);margin-top:7px;letter-spacing:-.012em;line-height:1.5}

/* ---------- Abschluss ---------- */
.cta-final{text-align:center}
.cta-final h2{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:600;letter-spacing:-.045em;max-width:19ch;margin:0 auto;color:#fff}
.cta-final p{margin:24px auto 0;max-width:54ch;color:var(--on-night-2);font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.5;letter-spacing:-.015em}
.cta-final .btn{margin-top:36px}

/* ---------- Fußbereich ---------- */
footer{
  background:var(--night-2);color:rgba(255,255,255,.62);
  padding:clamp(56px,6vw,88px) 0 40px;font-size:.9rem;
}
/* Drei gleich breite Spalten als Block in der Mitte — der Text darin bleibt linksbündig */
.foot-grid{
  display:grid;grid-template-columns:repeat(3,max-content);
  justify-content:space-between;          /* über die volle Breite verteilt … */
  gap:40px;                               /* … die Lücken dazwischen sind dabei gleich groß */
  text-align:left;
}
@media(max-width:820px){.foot-grid{grid-template-columns:repeat(2,max-content);justify-content:space-between;gap:40px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;justify-content:stretch;gap:34px}}

.foot-col h5{
  display:block;margin:0 0 18px;
  font-family:var(--display);font-size:1rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.25;color:#fff;
}
.foot-col a{
  display:block;text-decoration:none;color:rgba(255,255,255,.62);
  padding:7px 0;transition:color .2s;letter-spacing:-.012em;
}
@media(max-width:820px){
  .foot-col a{padding:11px 0}
  .foot-recht a{padding:6px 0}
}
.foot-col a:hover{color:#fff}
.foot-col > a:first-of-type{padding-top:0}

.foot-schluss{
  margin-top:clamp(46px,5vw,68px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 40px;align-items:baseline;justify-content:center;
  text-align:center;font-size:.84rem;color:rgba(255,255,255,.45);letter-spacing:-.008em;
}
.foot-recht{display:flex;gap:22px}
.foot-schluss a{color:rgba(255,255,255,.45);text-decoration:none}
.foot-schluss a:hover{color:#fff}
/* Copyright und Rechtshinweis teilen sich eine Zeile mit den Rechtslinks */
.foot-schluss > span:first-child{flex:1 1 auto;min-width:0}
.foot-recht{flex:0 0 auto}

/* ---------- Bewegung ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.pillar{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1),background .3s ease,border-color .3s ease}
.house.in .pillar{opacity:1;transform:none}
.house.in .pillar:nth-child(1){transition-delay:.08s}
.house.in .pillar:nth-child(2){transition-delay:.16s}
.house.in .pillar:nth-child(3){transition-delay:.24s}
.house.in .pillar:nth-child(4){transition-delay:.32s}
.house.in .pillar:nth-child(5){transition-delay:.40s}

a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.on-blue a:focus-visible,.on-blue .btn:focus-visible{outline-color:var(--accent-hi)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.pillar{opacity:1!important;transform:none!important;transition:none!important}
  .card:hover,.more-topics a:hover,.btn:hover{transform:none}
}

/* ---------- CTA in der mobilen Navigation ---------- */
.nav-cta{display:none}
@media(max-width:1040px){
  .nav-links > a.nav-cta{
    display:block;text-align:center;color:#fff;border-bottom:0;
    margin-top:24px;padding:15px 20px;font-size:1rem;font-weight:500;
  }
  .nav-links > a.nav-cta:hover{color:#fff}
}

/* ---------- Rechtstexte: Impressum, Datenschutz ---------- */
.hero-sub.is-slim{padding:clamp(56px,7vw,96px) 0 clamp(44px,5vw,68px)}
.hero-sub.is-slim h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:20ch}
.hero-sub.is-slim .lead{font-size:clamp(1rem,1.4vw,1.14rem);max-width:58ch}

.legal{max-width:70ch;margin:0 auto}
.legal h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,2.4vw,1.8rem);letter-spacing:-.035em;color:var(--ink);
  margin-top:clamp(44px,4.6vw,64px);
}
.legal > h2:first-child{margin-top:0}
.legal h3{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.028em;margin-top:32px}
.legal p{margin-top:16px;color:var(--ink-2);font-size:1.02rem;line-height:1.62;letter-spacing:-.012em}
.legal p strong,.legal li strong{color:var(--ink);font-weight:600}
/* Die Datenschutzerklaerung verlinkt lange Adressen am Stueck, etwa
   privacy.microsoft.com/de-de/privacystatement. Ohne Umbruchpunkt
   schiebt eine solche Zeile die ganze Seite breiter als das Fenster:
   auf einem 375er Bildschirm gemessene 520 Pixel, also seitliches
   Schieben auf jeder Zeile. word-wrap steht fuer aeltere Browser
   davor. */
.legal a{color:var(--accent);text-decoration:none;word-wrap:break-word;overflow-wrap:break-word}
.legal a:hover{text-decoration:underline}
.legal ul{margin:16px 0 0;padding-left:20px;color:var(--ink-2);font-size:1.02rem;line-height:1.62;letter-spacing:-.012em}
.legal li{margin-top:10px}
.legal li::marker{color:var(--accent)}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--mist);border-radius:5px;padding:2px 6px;color:var(--ink);
}

.legal address{
  font-style:normal;margin-top:18px;padding:22px 24px;
  background:var(--paper);border-radius:16px;
  color:var(--ink);font-size:1.02rem;line-height:1.6;letter-spacing:-.012em;
}
.legal address a{color:var(--accent)}

.legal .kv{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:12px 28px;font-size:1.02rem;letter-spacing:-.012em}
@media(max-width:560px){.legal .kv{grid-template-columns:1fr;gap:4px 0}}
.legal .kv dt{color:var(--ink);font-weight:600}
.legal .kv dd{margin:0;color:var(--ink-2)}
@media(max-width:560px){.legal .kv dd{margin-bottom:12px}}

.legal .hint{
  margin-top:20px;padding:18px 22px;background:var(--paper);border-radius:14px;
  font-size:.94rem;line-height:1.55;color:var(--ink-2);
}
.legal .stand{
  margin-top:clamp(44px,4.6vw,64px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink-2);
}

/* Offene Angaben, die nur der Betreiber liefern kann */
.todo{
  background:#FFF1C2;color:#5A4300;border-radius:6px;padding:2px 8px;
  font-weight:500;font-size:.95em;white-space:normal;
}

/* ---------- Anfrageformular im Abschluss-Abschnitt ---------- */
.anfrage{
  max-width:620px;margin:36px auto 0;text-align:left;
  display:flex;flex-direction:column;gap:14px;
}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.feldpaar{grid-template-columns:1fr}}
.feld{display:block}
.feld > span{
  display:block;margin-bottom:7px;font-size:.86rem;font-weight:500;
  color:var(--on-night-2);letter-spacing:-.008em;
}
.anfrage input[type="text"],
.anfrage input[type="email"],
.anfrage input[type="tel"],
.anfrage textarea{
  width:100%;font:inherit;font-size:1rem;color:#fff;letter-spacing:-.012em;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-night);border-radius:12px;
  padding:13px 15px;transition:border-color .2s,background .2s;
}
.anfrage textarea{resize:vertical;line-height:1.5}
.anfrage input::placeholder,.anfrage textarea::placeholder{color:rgba(255,255,255,.38)}
.anfrage input:focus,.anfrage textarea:focus{
  outline:none;background:rgba(255,255,255,.12);border-color:var(--accent-hi);
}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zustimmung{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.9rem;line-height:1.5;color:var(--on-night-2);letter-spacing:-.008em;
}
.zustimmung input{
  flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--accent-hi);cursor:pointer;
}
.zustimmung a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.anfrage button{align-self:flex-start;margin-top:4px;cursor:pointer;border:0;font-family:inherit}
.anfrage button[disabled]{opacity:.6;cursor:progress}
.formular-zusage{font-size:.86rem;line-height:1.5;color:var(--on-night-2);max-width:56ch;letter-spacing:-.008em}
.formular-meldung{font-size:.92rem;color:var(--accent-hi);min-height:1.2em}
.formular-meldung.ist-fehler{color:#FF9A93}

/* ---------- Dezente Bewegung ---------- */
/* Kopfzeile bekommt beim Scrollen etwas mehr Präsenz */
header{transition:box-shadow .3s ease,background .3s ease}
header.ist-gescrollt{box-shadow:0 1px 24px -8px rgba(0,27,54,.28);background:rgba(233,240,250,.88)}

/* Karten in einem Raster erscheinen nacheinander statt gleichzeitig */
.reveal.gestaffelt > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
}
.reveal.gestaffelt.in > *{opacity:1;transform:none}

/* Weicher Lichtschein dort, wo der Zeiger steht */
.card,.g-card,.more-topics a,.kpi,.trio > div{position:relative;overflow:hidden}
.card::before,.g-card::before,.more-topics a::before,.kpi::before,.trio > div::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--zeiger-x,50%) var(--zeiger-y,0%),
             rgba(0,55,129,.11),transparent 70%);
}
.on-blue .card::before,.on-blue .g-card::before,.on-blue .kpi::before,.on-blue .trio > div::before,
.card.is-base::before{
  background:radial-gradient(220px circle at var(--zeiger-x,50%) var(--zeiger-y,0%),
             rgba(76,147,240,.16),transparent 70%);
}
.card:hover::before,.g-card:hover::before,.more-topics a:hover::before,
.kpi:hover::before,.trio > div:hover::before{opacity:1}

/* Hero: ein sehr langsam wandernder Lichtschein */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 40%,rgba(0,55,129,.10),transparent 70%);
  animation:driften 26s ease-in-out infinite alternate;
}
.hero-sub::before{
  content:"";position:absolute;inset:-30% -10% auto;height:90%;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 35%,rgba(76,147,240,.16),transparent 70%);
  animation:driften 30s ease-in-out infinite alternate;
}
@keyframes driften{
  from{transform:translate3d(-4%,0,0) scale(1)}
  to{transform:translate3d(4%,2%,0) scale(1.08)}
}

/* Knopf gibt beim Drücken nach */
.btn:active{transform:translateY(0) scale(.985)}

@media(prefers-reduced-motion:reduce){
  .reveal.gestaffelt > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero::before,.hero-sub::before{animation:none}
  .card::before,.g-card::before,.more-topics a::before,.kpi::before,.trio > div::before{display:none}
  header{transition:none}
}

/* ---------- Bildbänder ---------- */
.bildband{
  margin:0;position:relative;overflow:hidden;
  background:var(--night);
}
.bildband img{
  display:block;width:100%;height:clamp(240px,34vw,460px);
  object-fit:cover;object-position:center 42%;
}
.bildband.hoch img{height:clamp(300px,42vw,600px)}
.bildband figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(20px,3vw,34px) var(--pad);
  background:linear-gradient(180deg,rgba(5,6,10,0) 0%,rgba(5,6,10,.72) 45%,rgba(5,6,10,.94) 100%);
  padding-top:clamp(52px,7vw,90px);
  color:#fff;font-size:.95rem;letter-spacing:-.012em;
}
.bildband figcaption b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.03em;margin-bottom:4px;
}
.bildband figcaption span{color:var(--on-night-2)}

/* ---------- Team ---------- */
.zitatkarte{
  background:var(--paper);border-radius:28px;
  padding:clamp(40px,6vw,84px) clamp(26px,5vw,64px);
  margin-top:clamp(40px,4.6vw,66px);
}
.band-paper .zitatkarte{background:#fff}
.on-blue .zitatkarte{background:rgba(255,255,255,.05);border:1px solid var(--line-night)}
.grosszitat{
  max-width:30ch;margin:0 auto;text-align:center;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.45rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.04em;color:var(--ink);
}
.on-blue .grosszitat{color:#fff}
.zitatgeber{
  max-width:52ch;margin:30px auto 0;text-align:center;
  font-size:.98rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.55;
}
.zitatgeber b{display:block;color:var(--ink);font-weight:600;font-size:1.08rem;margin-bottom:4px}
.on-blue .zitatgeber{color:var(--on-night-2)}
.on-blue .zitatgeber b{color:#fff}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,5vw,60px)}
@media(max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team{grid-template-columns:1fr}}
.person.text{
  background:#fff;border-radius:var(--r-card);padding:clamp(24px,2.6vw,30px);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.band-paper .person.text{background:#fff}
.person.text:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,0,0,.28)}
.person h3{font-size:1.12rem;font-weight:600;letter-spacing:-.03em}
.person .rolle{margin-top:5px;font-size:.9rem;font-weight:500;color:var(--accent)}
.person p{margin-top:11px;font-size:.94rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.5}

/* Teamfoto als Anriss auf der Startseite */
.team-bild{
  display:block;margin-top:clamp(38px,4.5vw,56px);
  border-radius:24px;overflow:hidden;background:var(--night);
}
.team-bild img{
  display:block;width:100%;height:clamp(220px,30vw,420px);object-fit:cover;object-position:center 55%;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.team-bild:hover img{transform:scale(1.02)}

/* ---------- Anfrageformular im Abschluss-Abschnitt ---------- */
.anfrage{
  max-width:620px;margin:36px auto 0;text-align:left;
  display:flex;flex-direction:column;gap:14px;
}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.feldpaar{grid-template-columns:1fr}}
.feld{display:block}
.feld > span{
  display:block;margin-bottom:7px;font-size:.86rem;font-weight:500;
  color:var(--on-night-2);letter-spacing:-.008em;
}
.anfrage input[type="text"],
.anfrage input[type="email"],
.anfrage input[type="tel"],
.anfrage textarea{
  width:100%;font:inherit;font-size:1rem;color:#fff;letter-spacing:-.012em;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-night);border-radius:12px;
  padding:13px 15px;transition:border-color .2s,background .2s;
}
.anfrage textarea{resize:vertical;line-height:1.5}
.anfrage input::placeholder,.anfrage textarea::placeholder{color:rgba(255,255,255,.38)}
.anfrage input:focus,.anfrage textarea:focus{
  outline:none;background:rgba(255,255,255,.12);border-color:var(--accent-hi);
}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zustimmung{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.9rem;line-height:1.5;color:var(--on-night-2);letter-spacing:-.008em;
}
.zustimmung input{
  flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--accent-hi);cursor:pointer;
}
.zustimmung a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.anfrage button{align-self:flex-start;margin-top:4px;cursor:pointer;border:0;font-family:inherit}
.anfrage button[disabled]{opacity:.6;cursor:progress}
.formular-zusage{font-size:.86rem;line-height:1.5;color:var(--on-night-2);max-width:56ch;letter-spacing:-.008em}
.formular-meldung{font-size:.92rem;color:var(--accent-hi);min-height:1.2em}
.formular-meldung.ist-fehler{color:#FF9A93}

/* ---------- Dezente Bewegung ---------- */
/* Kopfzeile bekommt beim Scrollen etwas mehr Präsenz */
header{transition:box-shadow .3s ease,background .3s ease}
header.ist-gescrollt{box-shadow:0 1px 24px -8px rgba(0,27,54,.28);background:rgba(233,240,250,.88)}

/* Karten in einem Raster erscheinen nacheinander statt gleichzeitig */
.reveal.gestaffelt > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
}
.reveal.gestaffelt.in > *{opacity:1;transform:none}

/* Weicher Lichtschein dort, wo der Zeiger steht */
.card,.g-card,.more-topics a,.kpi,.trio > div{position:relative;overflow:hidden}
.card::before,.g-card::before,.more-topics a::before,.kpi::before,.trio > div::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--zeiger-x,50%) var(--zeiger-y,0%),
             rgba(0,55,129,.11),transparent 70%);
}
.on-blue .card::before,.on-blue .g-card::before,.on-blue .kpi::before,.on-blue .trio > div::before,
.card.is-base::before{
  background:radial-gradient(220px circle at var(--zeiger-x,50%) var(--zeiger-y,0%),
             rgba(76,147,240,.16),transparent 70%);
}
.card:hover::before,.g-card:hover::before,.more-topics a:hover::before,
.kpi:hover::before,.trio > div:hover::before{opacity:1}

/* Hero: ein sehr langsam wandernder Lichtschein */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 40%,rgba(0,55,129,.10),transparent 70%);
  animation:driften 26s ease-in-out infinite alternate;
}
.hero-sub::before{
  content:"";position:absolute;inset:-30% -10% auto;height:90%;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 35%,rgba(76,147,240,.16),transparent 70%);
  animation:driften 30s ease-in-out infinite alternate;
}
@keyframes driften{
  from{transform:translate3d(-4%,0,0) scale(1)}
  to{transform:translate3d(4%,2%,0) scale(1.08)}
}

/* Knopf gibt beim Drücken nach */
.btn:active{transform:translateY(0) scale(.985)}

@media(prefers-reduced-motion:reduce){
  .reveal.gestaffelt > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero::before,.hero-sub::before{animation:none}
  .card::before,.g-card::before,.more-topics a::before,.kpi::before,.trio > div::before{display:none}
  header{transition:none}
}

/* ---------- Bildbänder ---------- */
.bildband{
  margin:0;position:relative;overflow:hidden;
  background:var(--night);
}
.bildband img{
  display:block;width:100%;height:clamp(240px,34vw,460px);
  object-fit:cover;object-position:center 42%;
}
.bildband.hoch img{height:clamp(300px,42vw,600px)}
.bildband figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(20px,3vw,34px) var(--pad);
  background:linear-gradient(180deg,rgba(5,6,10,0) 0%,rgba(5,6,10,.72) 45%,rgba(5,6,10,.94) 100%);
  padding-top:clamp(52px,7vw,90px);
  color:#fff;font-size:.95rem;letter-spacing:-.012em;
}
.bildband figcaption b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.03em;margin-bottom:4px;
}
.bildband figcaption span{color:var(--on-night-2)}

/* ---------- Team ---------- */
.team-kopf{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:center;margin-top:clamp(44px,5vw,68px)}
@media(max-width:860px){.team-kopf{grid-template-columns:1fr}}
.team-kopf .portraet{border-radius:24px;overflow:hidden;background:var(--mist)}
.team-kopf .portraet img{display:block;width:100%;height:auto}
.team-kopf .zitat{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.2;letter-spacing:-.04em;color:var(--ink);
}
.on-blue .team-kopf .zitat{color:#fff}
.team-kopf .wer{margin-top:26px;font-size:1rem;color:var(--ink-2);letter-spacing:-.012em}
.on-blue .team-kopf .wer{color:var(--on-night-2)}
.team-kopf .wer b{display:block;color:var(--ink);font-weight:600;font-size:1.08rem}
.on-blue .team-kopf .wer b{color:#fff}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(40px,5vw,60px)}
@media(max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team{grid-template-columns:1fr}}
.person figure{margin:0;border-radius:20px;overflow:hidden;background:var(--mist);aspect-ratio:4/5}
.person figure img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.person:hover figure img{transform:scale(1.03)}
.person h3{margin-top:16px;font-size:1.1rem;font-weight:600;letter-spacing:-.03em}
.person .rolle{margin-top:4px;font-size:.9rem;font-weight:500;color:var(--accent)}
.on-blue .person .rolle{color:var(--accent-hi)}
.person p{margin-top:9px;font-size:.94rem;color:var(--ink-2);letter-spacing:-.012em;line-height:1.5}
.on-blue .person p{color:var(--on-night-2)}
.on-blue .person h3{color:#fff}

/* Team-Anriss auf der Startseite */
.team-reihe{display:flex;gap:14px;margin-top:clamp(36px,4vw,52px);flex-wrap:wrap;justify-content:center}
.team-reihe a{
  width:clamp(118px,13vw,168px);text-decoration:none;text-align:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.team-reihe a:hover{transform:translateY(-5px)}
.team-reihe img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:16px;background:var(--mist);
}
.team-reihe b{display:block;margin-top:11px;font-size:.9rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.on-blue .team-reihe b{color:#fff}
.team-reihe span{display:block;font-size:.82rem;color:var(--ink-2)}
.on-blue .team-reihe span{color:var(--on-night-2)}

/* =========================================================
   Bildzeichen, Sinnbilder und das wachsende Bauwerk
   Nachgetragen: bis hierher war die Seite rein typografisch.
   Alle Sinnbilder liegen als <symbol> in der Seite und werden
   über <use> geholt — keine zusätzliche Anfrage, kein Font.
   ========================================================= */

/* Der Vorrat an Sinnbildern selbst wird nie gezeigt */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Ein Sinnbild erbt Farbe und Größe von seinem Umfeld */
.ico{width:22px;height:22px;display:block;flex:none}

/* ---------- Bildzeichen ---------- */
/* Das Zeichen ist zweifarbig: Dach und Fundament in der Markenfarbe,
   die Säulen in der Textfarbe. Beide Werte erben in das <use> hinein. */
.marke{display:block;flex:none;height:24px;width:auto}

.logo{display:inline-flex;align-items:center;gap:9px}
.logo .marke{height:30px;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.logo:hover .marke{transform:translateY(-2px)}
@media(max-width:520px){.logo .marke{height:26px}}

/* ---------- Hero: Grundriss im Hintergrund ---------- */
/* Ein feines Raster wie auf einem Bauplan, das sehr langsam wandert. */
.hero .wrap{position:relative;z-index:1}
.hero-raster{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(90deg,rgba(0,55,129,.13) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(180deg,rgba(0,55,129,.07) 0 1px,transparent 1px 74px);
  -webkit-mask-image:radial-gradient(105% 78% at 50% 4%,#000 0%,rgba(0,0,0,.45) 45%,transparent 76%);
          mask-image:radial-gradient(105% 78% at 50% 4%,#000 0%,rgba(0,0,0,.45) 45%,transparent 76%);
  animation:rasterdrift 34s ease-in-out infinite alternate;
}
@keyframes rasterdrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-74px,-18px,0)}
}

/* ---------- Hero: Abzeichen über der Überschrift ---------- */
.hero-badge{
  display:inline-flex;align-items:center;gap:11px;
  margin:0 auto 30px;padding:8px 18px 8px 14px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:.84rem;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.hero-badge .marke{height:24px}
@media(max-width:520px){.hero-badge{font-size:.78rem;padding:7px 14px 7px 11px}}

/* ---------- Sinnbild-Kacheln ---------- */
/* Ein gemeinsames Grundmuster: gerundete Fläche, Markenfarbe, dünne Linie.
   Auf hellem Grund blau auf Blauschleier, auf dunklem Grund aufgehellt. */
.c-ico,.s-ico,.w-ico,.st-ico > span,.p-ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:14px;
  background:rgba(0,55,129,.07);border:1px solid rgba(0,55,129,.12);
  color:var(--ton,var(--accent));
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.on-blue .c-ico,.on-blue .s-ico,.on-blue .w-ico,.on-blue .p-ico,.card.is-base .c-ico{
  background:rgba(76,147,240,.15);border-color:rgba(76,147,240,.28);color:var(--accent-hi);
}
.c-ico .ico,.s-ico .ico,.w-ico .ico,.st-ico .ico,.p-ico .ico{width:23px;height:23px}

/* ---------- Das Bauwerk wächst: Fundament, Säulen, Dach ---------- */
/* Die Reihenfolge ist die Aussage der Seite: erst das Fundament,
   dann die Säulen, zuletzt das Dach. */
.house .foundation{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1),background .25s ease;
}
.house.in .foundation{opacity:1;transform:none}

.house .roof{
  opacity:0;transform:translateY(-18px) scale(.99);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
}
.house.in .roof{opacity:1;transform:none;transition-delay:1.16s}

/* Die Säulen wachsen von unten nach oben aus dem Fundament heraus.
   Beschnitten statt gestaucht — sonst würde die Schrift verzerren. */
.pillar{
  --p-r:18px 18px 8px 8px;
  overflow:hidden;
  opacity:1;transform:none;
  clip-path:inset(100% 0 0 0 round var(--p-r));
  transition:clip-path .85s cubic-bezier(.22,.61,.36,1),background .3s ease,border-color .3s ease;
}
.house.in .pillar{clip-path:inset(0 0 0 0 round var(--p-r))}
.house.in .pillar:nth-child(1){transition-delay:.30s}
.house.in .pillar:nth-child(2){transition-delay:.43s}
.house.in .pillar:nth-child(3){transition-delay:.56s}
.house.in .pillar:nth-child(4){transition-delay:.69s}
.house.in .pillar:nth-child(5){transition-delay:.82s}

/* Der Inhalt kommt eine Spur nach der Säule, damit er nicht mitwandert */
.pillar > *{opacity:0;transition:opacity .5s ease}
.house.in .pillar > *{opacity:1}
.house.in .pillar:nth-child(1) > *{transition-delay:.72s}
.house.in .pillar:nth-child(2) > *{transition-delay:.85s}
.house.in .pillar:nth-child(3) > *{transition-delay:.98s}
.house.in .pillar:nth-child(4) > *{transition-delay:1.11s}
.house.in .pillar:nth-child(5) > *{transition-delay:1.24s}

/* Inhalt der Säule: Sinnbild oben, Beschriftung unten */
.pillar .p-ico{width:40px;height:40px;border-radius:12px;position:relative;z-index:1}
.pillar .p-ico .ico{width:21px;height:21px}
.pillar .p-txt{display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.pillar:hover .p-ico{background:rgba(76,147,240,.26);border-color:rgba(76,147,240,.5);transform:translateY(-2px)}

/* Das Fundament bekommt sein eigenes Zeichen */
.foundation .f-main{display:flex;align-items:center;gap:18px}
.foundation .f-ico{
  flex:none;width:52px;height:52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,55,129,.08);border:1px solid rgba(0,55,129,.14);color:var(--accent);
  transition:background .25s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.foundation .f-ico .ico{width:26px;height:26px}
.foundation:hover .f-ico{background:rgba(0,55,129,.14);transform:translateY(-2px)}
@media(max-width:480px){
  .foundation .f-main{gap:14px}
  .foundation .f-ico{width:44px;height:44px;border-radius:13px}
  .foundation .f-ico .ico{width:22px;height:22px}
}

/* Ganz schmale Anzeigen: die Säulen liegen als Zeilen, nicht als Hochformate */
@media(max-width:420px){
  .pillar{--p-r:12px}
  .pillar .p-ico{width:36px;height:36px;border-radius:10px}
  .pillar .p-ico .ico{width:19px;height:19px}
  .pillar .p-txt{flex:1 1 auto;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .pillar .p-t{font-size:1rem}
}

/* ---------- Fundament-Abschnitt: Schritte mit Zeichen ---------- */
.stack-item{align-items:flex-start}
.st-ico{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;width:46px}
.st-ico b{font-size:.76rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:0}
.stack-item:hover .st-ico > span{background:rgba(0,55,129,.12);transform:translateY(-2px)}

/* ---------- Leistungskarten: Zeichen neben der Kennung ---------- */
.c-kopf{display:flex;align-items:center;gap:13px;margin-bottom:18px;position:relative;z-index:1}
.card .c-kopf .num{margin-bottom:0}
.card:hover .c-ico{transform:translateY(-3px)}
.card h3,.card p,.card .tag,.card .more{position:relative;z-index:1}

/* ---------- Vier Schritte: Zeichen über der Nummer ---------- */
.step .s-ico{margin-bottom:18px}
.step:hover .s-ico{transform:translateY(-3px)}

/* ---------- Warum wir: Zeichen über der Überschrift ---------- */
.why .w-ico{margin-bottom:18px}
.why > div:hover .w-ico{transform:translateY(-3px)}

/* ---------- Kontakt: drei Zusagen mit Zeichen ---------- */
.zusagen{
  list-style:none;margin:0 0 34px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.zusagen li{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid var(--line-night);
  font-size:.88rem;font-weight:500;letter-spacing:-.01em;color:#fff;
}
.zusagen .ico{width:18px;height:18px;color:var(--accent-hi)}

/* ---------- Fußbereich: Bildzeichen und Wortmarke ---------- */
.foot-marke{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-marke .marke{height:42px}
.foot-marke b{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.03em;color:#fff;display:block;
}
.foot-marke span{display:block;font-size:.8rem;color:var(--on-night-2);letter-spacing:-.008em;margin-top:1px}

/* ---------- Wer Bewegung reduziert eingestellt hat, bekommt keine ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-raster{animation:none}
  .house .foundation,.house .roof,.pillar,.pillar > *{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .card:hover .c-ico,.step:hover .s-ico,.why > div:hover .w-ico,
  .pillar:hover .p-ico,.foundation:hover .f-ico,.logo:hover .marke,
  .stack-item:hover .st-ico > span{transform:none}
}

/* ---------- Nachzug: die neuen Bausteine an bestehende Regeln anpassen ---------- */

/* Die Wortmarke steht jetzt in einem eigenen <span> neben dem Bildzeichen.
   Ohne diese Regel würde .logo span den ganzen Schriftzug grau einfärben. */
.logo .logo-wort{font-weight:600;color:var(--ink)}
.logo .logo-wort span{font-weight:500;color:var(--ink-3)}

/* Das Dach trägt das Bildzeichen neben dem Namen */
.roof-mark{display:inline-flex;align-items:center;gap:13px}
.roof-mark .marke{height:38px}
@media(max-width:520px){.roof-mark{gap:10px}.roof-mark .marke{height:30px}}

/* Beschriftung des Fundaments sitzt jetzt in <span>-Elementen */
.foundation .f-label,.foundation .f-title{display:block}

/* Fußbereich: nur der innere <span> ist die kleine Zeile, nicht die Hülle */
.foot-marke > span{display:block}
.foot-marke > span > span{font-size:.8rem;color:var(--on-night-2);letter-spacing:-.008em;margin-top:1px}
@media(max-width:520px){.foot-marke{margin-bottom:28px}.foot-marke .marke{height:34px}}
footer.mit-marke .foot-marke,footer.mit-palette .foot-marke{margin-bottom:22px}

/* Die drei Zusagen stehen über dem Formular und in derselben Breite */
.cta-final .zusagen{max-width:820px;margin:34px auto 0;justify-content:center}

/* =========================================================
   Farbcodierte Säulen
   Jede Säule trägt ihren eigenen Ton durch Sinnbild, Kachel,
   Karte und Kennung. Das Fundament bleibt in der Markenfarbe.

   Ein Baustein bekommt eine Klasse .t-<farbe>, die zwei Werte
   setzt: --ton für helle Flächen, --ton-hi für die dunklen
   Bänder. Alle Regeln darunter lesen nur noch diese beiden —
   eine Farbe ändern heißt: einen Wert im :root-Block ändern.
   ========================================================= */

.t-blau    {--ton:var(--accent);     --ton-hi:var(--accent-hi)}
.t-violett {--ton:var(--t-violett);  --ton-hi:var(--t-violett-hi)}
.t-tuerkis {--ton:var(--t-tuerkis);  --ton-hi:var(--t-tuerkis-hi)}
.t-koralle {--ton:var(--t-koralle);  --ton-hi:var(--t-koralle-hi)}
.t-gruen   {--ton:var(--t-gruen);    --ton-hi:var(--t-gruen-hi)}
.t-amber   {--ton:var(--t-amber);    --ton-hi:var(--t-amber-hi)}
.t-magenta {--ton:var(--t-magenta);  --ton-hi:var(--t-magenta-hi)}

/* Die Sinnbild-Kacheln nehmen den Ton auf.
   Die blauen rgba-Werte weiter oben bleiben als Rückfall stehen,
   falls ein Browser color-mix nicht kennt. */
.c-ico,.s-ico,.w-ico,.p-ico{
  background:rgba(0,40,90,.05);
  background:color-mix(in srgb,var(--ton,var(--accent)) 11%,transparent);
  border-color:rgba(0,40,90,.14);
  border-color:color-mix(in srgb,var(--ton,var(--accent)) 26%,transparent);
}
.on-blue .c-ico,.on-blue .s-ico,.on-blue .w-ico,.on-blue .p-ico,.card.is-base .c-ico{
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 17%,transparent);
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 34%,transparent);
  color:var(--ton-hi,var(--accent-hi));
}

/* ---------- Leistungskarten ---------- */
/* Eine schmale Kante oben trägt die Farbe der Säule. Als innerer
   Schatten statt als Rahmen, damit sie der Eckenrundung folgt. */
.card{box-shadow:inset 0 3px 0 0 var(--ton,var(--accent))}
.card:hover{box-shadow:inset 0 3px 0 0 var(--ton,var(--accent)),0 22px 44px -26px rgba(0,0,0,.3)}
.card.is-base{box-shadow:inset 0 3px 0 0 var(--ton-hi,var(--accent-hi))}
.card.is-base:hover{box-shadow:inset 0 3px 0 0 var(--ton-hi,var(--accent-hi)),0 22px 44px -26px rgba(0,0,0,.3)}

.card .num,.card .more{color:var(--ton,var(--accent))}
.card.is-base .num,.card.is-base .more{color:var(--ton-hi,var(--accent-hi))}
.card:hover{border-color:color-mix(in srgb,var(--ton,var(--accent)) 34%,transparent)}

/* Auch der Lichtschein unter dem Zeiger nimmt die Farbe an */
.card::before{
  background:radial-gradient(220px circle at var(--zeiger-x,50%) var(--zeiger-y,0%),
             color-mix(in srgb,var(--ton,var(--accent)) 15%,transparent),transparent 70%);
}
.on-blue .card::before,.card.is-base::before{
  background:radial-gradient(220px circle at var(--zeiger-x,50%) var(--zeiger-y,0%),
             color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 20%,transparent),transparent 70%);
}

/* ---------- Die Säulen im Bauwerk ---------- */
.pillar .p-i{color:var(--ton-hi,var(--accent-hi))}
.pillar::after{color:var(--ton-hi,var(--accent-hi))}

/* Statt eines wandernden Bandes liegt die Farbe der Säule ruhig in der Fläche:
   ein sehr schwacher Verlauf von oben nach unten über dem weißen Grundton.
   Kennt ein Browser color-mix nicht, bleibt einfach der weiße Verlauf stehen. */
.pillar{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 13%,transparent) 0%,
      color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 4%,transparent) 100%),
    linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 24%,transparent);
}
.pillar:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 26%,transparent) 0%,
    color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 7%,transparent) 100%);
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 55%,transparent);
}
.pillar:hover .p-ico{
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 30%,transparent);
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 55%,transparent);
}

/* ---------- Die vier Schritte ---------- */
/* Kühl nach warm: von der Analyse bis zur Skalierung. Schritt 02
   ist das Fundament und bleibt deshalb in der Markenfarbe. */
.step .n{color:var(--ton-hi,var(--accent-hi))}

/* ---------- Hero: das Licht der Säulen von unten ---------- */
/* Sechs weiche Scheine am unteren Rand, in den Farben der sechs
   Säulen — als läge der Abschnitt darunter schon im Bild. */
.hero-glanz{
  position:absolute;left:0;right:0;bottom:0;height:40%;
  pointer-events:none;z-index:0;opacity:.3;
  background:
    radial-gradient(19% 88% at 10% 126%,var(--t-violett),transparent 62%),
    radial-gradient(19% 88% at 26% 126%,var(--t-tuerkis),transparent 62%),
    radial-gradient(19% 88% at 42% 126%,var(--t-koralle),transparent 62%),
    radial-gradient(19% 88% at 58% 126%,var(--t-gruen),transparent 62%),
    radial-gradient(19% 88% at 74% 126%,var(--t-amber),transparent 62%),
    radial-gradient(19% 88% at 90% 126%,var(--t-magenta),transparent 62%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.22) 55%,transparent 100%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.22) 55%,transparent 100%);
}
@media(max-width:700px){.hero-glanz{opacity:.22;height:28%}}

/* ---------- Fußbereich: die Palette als schmale Kante ---------- */
/* Nur dort, wo die Klasse gesetzt ist — die übrigen Seiten tragen die
   Farbcodierung noch nicht und bekämen sonst eine Kante ohne Bezug. */
footer.mit-palette{border-top:3px solid transparent;
  border-image:linear-gradient(90deg,
    var(--accent-hi),var(--t-violett-hi),var(--t-tuerkis-hi),var(--t-koralle-hi),
    var(--t-gruen-hi),var(--t-amber-hi),var(--t-magenta-hi)) 1;
}

/* =========================================================
   Hero: Bild im Hintergrund
   Das Bild zeigt das Bildzeichen als Bauwerk in einer Landschaft.
   Es ist sehr hell (Helligkeit 150-247), die Schrift darüber ist
   dunkel — deshalb liegt zwischen beiden ein Schleier, der genau
   dort am dichtesten ist, wo der Text steht.

   Reihenfolge der Ebenen, von oben nach unten:
     1. weicher Schleier hinter der Schrift
     2. Verlauf, der oben unter die Kopfzeile und unten in die
        Seitenfarbe ausläuft — damit die Kante zum nächsten
        Abschnitt nicht hart abreißt
     3. das Bild selbst
     4. die Seitenfarbe als Rückfall, falls das Bild fehlt
   ========================================================= */
.hero{
  background:
    radial-gradient(62% 58% at 50% 44%,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.56) 52%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg,
      rgba(233,240,250,.92) 0%,
      rgba(233,240,250,0) 20%,
      rgba(233,240,250,0) 64%,
      var(--grund) 100%),
    url("bilder/hero-hintergrund.jpg") 68% center/cover no-repeat,
    var(--grund);
}

/* Auf Telefonen wird das Bild stark beschnitten. Dort die kleine Fassung —
   25 statt 73 KB — und der Ausschnitt etwas weiter nach rechts, damit das
   Bauwerk im Bild nicht ganz aus dem Rahmen fällt. */
@media(max-width:900px){
  .hero{
    background:
      radial-gradient(80% 46% at 50% 40%,
        rgba(255,255,255,.86) 0%,
        rgba(255,255,255,.5) 58%,
        rgba(255,255,255,0) 100%),
      linear-gradient(180deg,
        rgba(233,240,250,.92) 0%,
        rgba(233,240,250,0) 18%,
        rgba(233,240,250,0) 58%,
        var(--grund) 100%),
      url("bilder/hero-hintergrund-klein.jpg") 87% center/cover no-repeat,
      var(--grund);
  }
}

/* Das Bild bringt eigene Fluchtlinien und einen eigenen Lichtschein mit.
   Deshalb treten Bauraster, Farbscheine und der wandernde Schimmer zurück —
   sonst liegen drei Strukturen übereinander. */
.hero-raster{opacity:.3}
.hero-glanz{opacity:.16}
.hero::before{opacity:.45}
@media(max-width:700px){.hero-glanz{opacity:.12}}

/* ---------- Teamfoto ---------- */
/* Auf dem stehenden Gruppenbild reicht das Haar beider Maenner bis an die
   oberste Bildzeile. Jeder senkrechte Beschnitt trifft deshalb sofort die
   Koepfe. Das Band bekommt darum keine feste Hoehe mehr, sondern die Hoehe
   des Bildes: Es wird gar nichts mehr beschnitten. */
.team-bild img{height:auto;object-fit:fill}
/* Die Vergroesserung beim Ueberfahren wuerde an allen vier Kanten
   beschneiden, oben also wieder die Koepfe. Deshalb hier ohne. */
.team-bild:hover img{transform:none}

/* Auf der Teamseite hat das Bild oben Luft, dort genuegt es, den
   Ausschnitt an die Oberkante zu setzen. Beschnitten wird nur unten. */
.bildband img{object-position:center top}

/* =========================================================
   Engere Abstände — für alle Seiten
   Der Block steht am Dateiende: Die Regeln haben dieselbe
   Spezifität wie die Ursprungswerte weiter oben und gewinnen
   über die Reihenfolge. Oben bleibt sichtbar, wovon hier
   abgewichen wird.

   Jeder Wert bleibt ein clamp() aus drei Zahlen: Minimum für
   Telefone, mitwachsender Wert, Maximum für große Bildschirme.
   Alle drei sind im selben Verhältnis gekürzt — sonst würde
   sich das Verhältnis zwischen Telefon und Desktop verschieben.
   ========================================================= */

/* Das Polster jedes Abschnitts — der größte Hebel.
   390 px:  54 px (vorher 76)   ·  1440 px: 81 px (vorher 130)
   ab 1643 px: 92 px (vorher 150) */
section{padding:clamp(54px,5.6vw,92px) 0}

/* Der Hero trägt jetzt ein Bild. Er wird mit gekürzt, aber weniger stark —
   zu wenig Polster und vom Bild bleibt nur noch ein Streifen übrig.
   390 px: 66/54 px (vorher 88/72)  ·  1440 px: 137/95 px (vorher 187/130) */
.hero{padding:clamp(66px,9.5vw,140px) 0 clamp(54px,6.6vw,98px)}

/* Abstand von der Überschrift zum Inhalt des Abschnitts */
.cards,
.steps,
.why{margin-top:clamp(32px,3.2vw,46px)}
.house{margin-top:clamp(34px,3.9vw,56px)}
.fund-grid{margin-top:clamp(32px,3.4vw,48px)}
.team-bild{margin-top:clamp(26px,2.8vw,40px)}

/* Abstand von der Überschrift zum Vorspann darunter */
.sec-head p,
.house-head p{margin-top:14px}
.cta-final p{margin-top:18px}

/* Kontaktabschnitt: Zusagen, Formular, Knöpfe */
.hero-cta{margin-top:30px}
.cta-final .zusagen{margin-top:26px}
.anfrage{margin-top:28px}

/* ---------- Telefone ---------- */
/* Unterhalb von 560 px zählt jeder Bildschirm doppelt: Die Abschnitte
   stapeln sich einspaltig, aus sieben Karten nebeneinander werden sieben
   untereinander. Deshalb hier noch einmal enger — die Grenze zwischen zwei
   Abschnitten trägt ohnehin der Farbwechsel, nicht der Abstand. */
@media(max-width:560px){
  section{padding:46px 0}
  .hero{padding:56px 0 46px}
  .cards,
  .steps,
  .why{margin-top:28px}
  .house{margin-top:30px}
  .fund-grid{margin-top:28px}
  .team-bild{margin-top:22px}
  .hero-cta{margin-top:26px}

  /* Innenpolster der Bausteine: bei sieben gestapelten Karten summieren
     sich 28 px oben und unten zu fast 400 px allein an Kartenrand. */
  .card,
  .why > div,
  .step{padding:24px}
  .stack-item{padding:20px}
}

/* =========================================================
   Unterseiten im Design der Startseite
   Zwei Dinge kommen dazu:
     1. Dieselben engeren Abstände wie auf der Startseite.
     2. Ein Farbton je Seite. Die Klasse .t-<farbe> am <body>
        setzt --ton und --ton-hi; alle Bausteine darunter lesen
        nur noch diese beiden Werte. Ohne Klasse bleibt es beim
        Markenblau — die Rechts- und Dankeseiten sehen also aus
        wie bisher.
   ========================================================= */

/* ---------- Abstände ---------- */
.trio,
.grid6,
.split,
.fit,
.tl{margin-top:clamp(30px,3.1vw,42px)}
.more-topics{margin-top:clamp(30px,3.2vw,42px)}
.flow{margin-top:clamp(32px,3.4vw,46px)}
.tbl-scroll{margin-top:clamp(26px,2.9vw,40px)}
.team{margin-top:clamp(30px,3.4vw,44px)}
.team-kopf{margin-top:clamp(32px,3.5vw,48px)}
.team-reihe{margin-top:clamp(26px,2.9vw,38px)}
.hero-sub .hero-cta{margin-top:28px}

@media(max-width:560px){
  .trio,.grid6,.split,.fit,.tl,.more-topics,.flow,
  .team,.team-kopf,.team-reihe{margin-top:26px}
  .tbl-scroll{margin-top:22px}
  .g-card,.trio > div,.more-topics a,.node,.split-col{padding:24px}
  .kpi{padding:20px 18px 22px}
}

/* ---------- Farbton der Seite ---------- */
/* Überall dort, wo bisher fest die Markenfarbe stand, steht jetzt
   der Ton der Seite — mit der Markenfarbe als Rückfall. */
.hero-sub h1 em{color:var(--ton-hi,var(--accent-hi))}
.kpi b{color:#fff}
.kpi span{color:var(--on-night-2)}
.g-card .n,
.trio .n,
.more-topics .n,
.tl .n,
.split-col.b .sub{color:var(--ton,var(--accent))}
.on-blue .g-card .n,
.on-blue .trio .n,
.on-blue .tl .n,
.node .step{color:var(--ton-hi,var(--accent-hi))}

/* Kacheln bekommen dieselbe farbige Oberkante wie die Karten der
   Startseite — als innerer Schatten, damit sie der Rundung folgt. */
.g-card,
.trio > div,
.more-topics a{box-shadow:inset 0 3px 0 0 var(--ton,var(--accent))}
.on-blue .g-card,
.on-blue .trio > div{box-shadow:inset 0 3px 0 0 var(--ton-hi,var(--accent-hi))}
.more-topics a:hover{
  box-shadow:inset 0 3px 0 0 var(--ton,var(--accent)),0 22px 44px -26px rgba(0,0,0,.3);
}

/* Die Kennzahlen im Hero nehmen den Ton als feinen Schimmer auf */
.hero-sub .kpi{
  background:rgba(255,255,255,.05);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 10%,rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 26%,transparent);
}

/* ---------- Verweise auf die anderen Themen ---------- */
/* Dieselbe Logik wie die Kartenreihe der Startseite: Jeder Verweis
   trägt das Sinnbild und den Ton seines Ziels, nicht den der Seite,
   auf der er steht. Deshalb setzt hier jedes <a> seinen eigenen Ton. */
.more-topics a{display:flex;flex-direction:column;gap:0}
.more-topics .mt-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.more-topics .mt-ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:12px;
  background:rgba(0,40,90,.05);
  background:color-mix(in srgb,var(--ton,var(--accent)) 11%,transparent);
  border:1px solid rgba(0,40,90,.14);
  border:1px solid color-mix(in srgb,var(--ton,var(--accent)) 26%,transparent);
  color:var(--ton,var(--accent));
  transition:background .3s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.more-topics .mt-ico .ico{width:21px;height:21px}
.more-topics a:hover .mt-ico{transform:translateY(-2px)}
.more-topics .n{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
  .more-topics a:hover .mt-ico{transform:none}
}

/* Die farbige Oberkante braucht einen Rahmen, der sie fasst — sonst
   laeuft der innere Schatten an den runden Ecken frei aus und sieht
   aus wie zwei Haken. Die Karten der Startseite haben diesen Rahmen
   von Anfang an; hier wird er nachgezogen. */
.g-card,
.trio > div,
.more-topics a{border:1px solid var(--line)}
.on-blue .g-card,
.on-blue .trio > div{border-color:var(--line-night)}

/* ---------- Sinnbilder in den Bausteinen der Themenseiten ---------- */
/* Dieselbe Kachel wie auf der Startseite, nur eine Nummer kleiner —
   g-card, trio und node sind schmaler als die Leistungskarten. */
.g-card .c-kopf,
.trio .c-kopf,
.node .c-kopf{gap:12px;margin-bottom:14px}
.g-card .c-kopf .n,
.trio .c-kopf .n,
.node .c-kopf .step{margin-bottom:0}
.g-card .c-ico,
.trio .c-ico,
.node .c-ico{width:40px;height:40px;border-radius:12px}
.g-card .c-ico .ico,
.trio .c-ico .ico,
.node .c-ico .ico{width:21px;height:21px}
.g-card:hover .c-ico,
.trio > div:hover .c-ico,
.node:hover .c-ico{transform:translateY(-2px)}

/* Schritte tragen das Sinnbild darüber, wie auf der Startseite */
.step .s-ico{margin-bottom:16px}

@media(max-width:560px){
  .g-card .c-ico,.trio .c-ico,.node .c-ico{width:36px;height:36px;border-radius:10px}
  .g-card .c-kopf,.trio .c-kopf,.node .c-kopf{gap:10px;margin-bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  .g-card:hover .c-ico,.trio > div:hover .c-ico,.node:hover .c-ico{transform:none}
}

/* Zeitleiste: das Sinnbild steht neben der Wochenangabe, der Punkt auf
   der Linie bleibt der Marker fuer den Zeitpunkt. */
.tl-item .c-kopf{gap:12px;margin-bottom:10px}
.tl-item .c-ico{width:38px;height:38px;border-radius:12px}
.tl-item .c-ico .ico{width:20px;height:20px}
.tl-item .c-kopf .wk{margin:0}
.tl-item h4{margin-top:0}

/* ---------- Mannschaft ---------- */
/* Vier Personen, zwei nebeneinander und zwei darunter. Das Raster ist
   schmaler als der Textbereich und steht mittig, sonst haengen zwei
   Karten am linken Rand und rechts bleibt Leere. */
.team{
  grid-template-columns:repeat(2,1fr);
  max-width:820px;margin-left:auto;margin-right:auto;
}
@media(max-width:640px){.team{grid-template-columns:1fr;max-width:430px}}

/* =========================================================
   Fundamentseite
   Die längste Seite des Auftritts: achtzehn Abschnitte, sechs
   Tabellen, viel Fließtext. Durchgehend in einem Blau wirkt das
   wie eine Wand.

   Sie ist deshalb in vier Kapitel geteilt, jedes mit einem
   eigenen Ton am <section>. Der Ton erbt auf alles darin:
   Sinnbilder, Kennungen, Kartenkanten, Tabellen. Innerhalb
   eines Kapitels bleibt er gleich, damit Gliederung entsteht
   und nicht Unruhe.

     Grundlagen              Türkis
     Pflichten und Anbieter  Koralle
     Zusammenarbeit          Bernstein
     Passung und Vertrauen   Grün

   Hero, Themenverweise und Kontakt behalten das Markenblau:
   Das Fundament bleibt die Basis, auch farblich.
   ========================================================= */

/* ---------- Kapitelmarke über jeder Überschrift ---------- */
/* Statt eines blossen Strichs steht dort das Sinnbild des Abschnitts,
   in der Farbe seines Kapitels. Es sagt in einem Zeichen, worum es
   geht, und macht den Kapitelwechsel sichtbar. */
.kapitel-ico{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 auto 20px;border-radius:16px;
  background:rgba(0,40,90,.05);
  background:color-mix(in srgb,var(--ton,var(--accent)) 11%,transparent);
  border:1px solid rgba(0,40,90,.14);
  border:1px solid color-mix(in srgb,var(--ton,var(--accent)) 26%,transparent);
  color:var(--ton,var(--accent));
}
.on-blue .kapitel-ico{
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 17%,transparent);
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 34%,transparent);
  color:var(--ton-hi,var(--accent-hi));
}
.kapitel-ico .ico{width:26px;height:26px}
@media(max-width:560px){
  .kapitel-ico{width:46px;height:46px;border-radius:14px;margin-bottom:16px}
  .kapitel-ico .ico{width:23px;height:23px}
}

/* ---------- Sinnbild in den Kennzahlen ---------- */
/* Die Kacheln zeigten nur Zahl und Zeile. Ein Zeichen darueber gibt
   ihnen dieselbe Sprache wie die uebrigen Bausteine. */
/* Der Selektor braucht .kpi davor: Die Regel ».kpi span{display:block}«
   weiter oben ist spezifischer als ».kpi-ico« allein und machte aus der
   Kachel einen Block statt eines Flex-Kastens. Das Zeichen fiel dadurch
   in die obere linke Ecke, statt mittig zu sitzen. Aus demselben Grund
   wird margin-top hier ausdruecklich zurueckgesetzt. */
.kpi .kpi-ico{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin:0 0 14px;border-radius:12px;
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 18%,transparent);
  border:1px solid rgba(255,255,255,.18);
  border:1px solid color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 32%,transparent);
  color:var(--ton-hi,var(--accent-hi));
}
.kpi .kpi-ico .ico{width:20px;height:20px}

/* ---------- Tabellen ---------- */
/* Neunzehn Tabellen auf sieben Seiten, viele über die volle
   Breite. Ohne Führung verliert man beim Lesen die Zeile. Die Regeln
   gelten überall und nehmen den Ton der Seite oder des Kapitels an.
   Sie stehen am Dateiende und gewinnen über die Reihenfolge; oben
   bleibt sichtbar, wovon abgewichen wird. */

/* Farbige Oberkante wie bei den Karten, damit die Tabelle als
   Baustein desselben Systems erkennbar ist */
.tbl-scroll{box-shadow:inset 0 3px 0 0 var(--ton,var(--accent))}
.on-blue .tbl-scroll{box-shadow:inset 0 3px 0 0 var(--ton-hi,var(--accent-hi))}

/* Die Kopfzeile hebt sich ab und trägt den Ton */
thead th{
  background:rgba(0,40,90,.05);
  background:color-mix(in srgb,var(--ton,var(--accent)) 9%,transparent);
  color:var(--ton,var(--accent));
}
.on-blue thead th{
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 13%,transparent);
  color:var(--ton-hi,var(--accent-hi));
}

/* Jede zweite Zeile leicht hinterlegt: Das hält beim Lesen
   breiter Tabellen die Zeile zusammen. */
tbody tr:nth-child(even) td{background:rgba(0,40,90,.03)}
.on-blue tbody tr:nth-child(even) td{background:rgba(255,255,255,.035)}

/* Die erste Spalte ist die Merkspalte und bekommt eine Kante */
tbody td:first-child{
  box-shadow:inset 3px 0 0 0 rgba(0,40,90,.35)) 50%,transparent);
  box-shadow:inset 3px 0 0 0 color-mix(in srgb,var(--ton,var(--accent)) 50%,transparent);
}
.on-blue tbody td:first-child{
  box-shadow:inset 3px 0 0 0 rgba(255,255,255,.45)) 55%,transparent);
  box-shadow:inset 3px 0 0 0 color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 55%,transparent);
}

/* Der Vergleich vorher/nachher: Sinnbild neben der Kennung.
   Die linke Spalte ist der Ist-Zustand und bleibt gedaempft, die rechte
   traegt den Ton der Seite. */
.split-col .c-kopf{gap:12px;margin-bottom:12px}
.split-col .c-ico{width:40px;height:40px;border-radius:12px}
.split-col .c-ico .ico{width:21px;height:21px}
.split-col .c-kopf .sub{margin-bottom:0}
.split-col.a .c-ico{
  background:rgba(0,40,90,.07);border-color:rgba(0,40,90,.14);color:var(--ink-3);
}
.split-col.b .c-ico{
  background:rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 18%,transparent);
  border-color:rgba(255,255,255,.18);
  border-color:color-mix(in srgb,var(--ton-hi,var(--accent-hi)) 32%,transparent);
  color:var(--ton-hi,var(--accent-hi));
}

/* ---------- Frei umbrechende Kartenbloecke ---------- */
/* Ein Raster laesst eine unvollstaendige letzte Zeile links stehen; die
   Karten haengen dann am Rand und rechts bleibt Leere. Flexbox mit
   justify-content:center setzt die Restzeile stattdessen in die Mitte.
   Damit die vollen Zeilen trotzdem gleich breite Karten haben, waechst
   keine Karte (flex-grow 0), die Breite kommt aus der Spaltenzahl, die
   der Block selbst mitgibt: style="--spalten:4". */
.trio-frei{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
}
.trio-frei > div{
  flex:0 1 calc((100% - (var(--spalten,3) - 1) * 16px) / var(--spalten,3));
}
@media(max-width:1040px){
  .trio-frei > div{flex-basis:calc((100% - 16px) / 2)}
}
@media(max-width:640px){
  .trio-frei > div{flex-basis:100%}
}

/* Vierte Ebene in Rechtstexten. Die Datenschutzerklaerung gliedert bis
   dorthin, etwa bei den einzelnen Konferenzwerkzeugen. */
.legal h4{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:-.018em;margin-top:26px;color:var(--accent);
}
.legal h4 + p{margin-top:10px}