/* ============================================================
   AV&DP GmbH, Website-Design
   Richtung: Aeline und Finlytix (Framer-Referenzen), uebersetzt in die
   AV&DP-CI. Heller Grund, weiche graue Flaechen, Pillen-Knoepfe mit Pfeil,
   ein grosser Foto-Hero mit Glaskarten. Die Oesterreich-Karte bleibt aus
   der Vorlage und bringt ihre eigenen Inline-Stile mit.

   System
   - Container 1240px, Abschnittsabstand eine Stufe
   - Radius: 28px Rahmen, 20px Karten, 14px kleine Flaechen, 999px Pillen
   - Ein Akzent: AV&DP-Blau, dazu ein zartes Blau fuer Flaechen
   - Bewegung: eine Federkurve fuer alles, Einfahren von unten wie in der
     Referenz (Hero 120px, Sektionen 48px), Reduced Motion schaltet ab
   - Z-Index: 1 Deko, 50 Kopfzeile, 60 Mobilmenue, 100 Cookie-Banner
   ============================================================ */

:root{
  --grund:#F4F6FB;
  --weiss:#FFFFFF;
  --karte:#EDF0F7;
  --karte-2:#E4E9F3;
  --ink:#0B1020;
  --text:#4A5470;
  --text-2:#646E88;
  --linie:#DFE5EF;
  --blau:#3B54A5;
  --blau-dunkel:#2A3F85;
  --blau-hell:#4E8CF7;
  --blau-zart:#DDE6FB;
  --nacht:#0B1020;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,48px);
  --sek:clamp(80px,10vw,136px);
  --kopf-abstand:clamp(36px,5vw,64px);
  --gap:clamp(14px,1.8vw,20px);

  --r-rahmen:28px;
  --r-karte:20px;
  --r-klein:14px;

  --feder:cubic-bezier(.22,1,.36,1);
  --schatten:0 30px 60px -36px rgba(11,16,32,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--grund);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button,input,select,textarea,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,h4,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blau-hell);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sek{padding-block:var(--sek)}
.sek--weiss{background:var(--weiss)}

/* ---------- Typografie ---------- */
.titel{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.035em;line-height:1.06;color:var(--ink)}
.titel--mittel{font-size:clamp(1.9rem,3.6vw,3rem)}
.lead{font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.65;color:var(--text);max-width:58ch}
.kopf{display:grid;gap:18px;margin-bottom:var(--kopf-abstand)}
.kopf--mitte{text-align:center;justify-items:center;margin-inline:auto;max-width:760px}
.kopf--mitte .lead{margin-inline:auto}
.label{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--weiss);
  border:1px solid var(--linie);font-size:.8rem;font-weight:500;color:var(--text)}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blau)}
.label--glas{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.label--glas::before{display:none}
.flagge{display:flex;flex-direction:column;width:18px;height:12px;border-radius:2px;overflow:hidden;flex:none}
.flagge i{flex:1;background:#C8102E}
.flagge i:nth-child(2){background:#fff}

/* Icon-Pillen mitten in einer Ueberschrift, wie in der Aeline-Referenz */
.pille-inline{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  height:.86em;min-width:1.5em;padding:0 .18em;margin:-.1em .08em 0;border-radius:999px;background:var(--blau-zart)}
.pille-inline img{height:.62em;width:auto;border-radius:999px}
.pille-inline--foto{padding:0;overflow:hidden;min-width:1.7em}
.pille-inline--foto img{height:100%;width:100%;object-fit:cover;object-position:50% 22%;border-radius:0}

/* ---------- Knoepfe: Pille mit Pfeilkreis ---------- */
.knopf{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 24px;border-radius:999px;border:1px solid transparent;
  font-size:.98rem;font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color .25s var(--feder),color .25s,border-color .25s,transform .2s var(--feder)}
.knopf__pfeil{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:transform .35s var(--feder),background-color .25s}
.knopf__pfeil svg{width:16px;height:16px}
.knopf:hover .knopf__pfeil{transform:rotate(-45deg)}
.knopf:active{transform:scale(.98)}
.knopf--dunkel{background:var(--nacht);color:#fff}
.knopf--dunkel .knopf__pfeil{background:var(--blau);color:#fff}
.knopf--dunkel:hover{background:#1A2238}
.knopf--blau{background:var(--blau);color:#fff}
.knopf--blau .knopf__pfeil{background:#fff;color:var(--blau)}
.knopf--blau:hover{background:var(--blau-dunkel)}
.knopf--hell{background:#fff;color:var(--ink)}
.knopf--hell .knopf__pfeil{background:var(--blau-zart);color:var(--blau)}
.knopf--glas{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:7px 24px;min-height:56px}
.knopf--glas:hover{background:rgba(255,255,255,.24)}
.knopf--klein{padding:5px 5px 5px 18px;font-size:.92rem;gap:10px}
.knopf--klein .knopf__pfeil{width:34px;height:34px}

/* ---------- Kopfzeile ---------- */
.scroll-wache{position:absolute;top:0;left:0;width:1px;height:1px}
.kopfzeile{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--gutter);transition:padding .3s var(--feder)}
.kopfzeile__leiste{max-width:calc(var(--maxw) + 24px);margin-inline:auto;display:flex;align-items:center;gap:24px;
  padding:10px 10px 10px 22px;border-radius:999px;border:1px solid transparent;
  transition:background-color .35s var(--feder),border-color .35s,box-shadow .35s}
.kopfzeile.gescrollt .kopfzeile__leiste{background:rgba(255,255,255,.86);border-color:rgba(223,229,239,.9);
  box-shadow:0 18px 40px -28px rgba(11,16,32,.35);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.marke{position:relative;display:block;height:34px;flex:none}
.marke img{height:34px;width:auto;transition:opacity .3s}
.marke .marke--blau{position:absolute;inset:0;opacity:0}
.kopfzeile.gescrollt .marke--weiss{opacity:0}
.kopfzeile.gescrollt .marke--blau{opacity:1}
.hauptnav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:.95rem;font-weight:500;color:rgba(255,255,255,.88)}
.hauptnav a{position:relative;padding-block:6px;transition:color .2s}
.hauptnav a:hover{color:#fff}
.kopfzeile.gescrollt .hauptnav{color:var(--text)}
.kopfzeile.gescrollt .hauptnav a:hover{color:var(--ink)}
.kopfzeile .knopf{margin-left:8px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);
  align-items:center;justify-content:center;margin-left:auto}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:#fff;position:relative;transition:transform .3s var(--feder),background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.kopfzeile.gescrollt .burger{border-color:var(--linie);background:#fff}
.kopfzeile.gescrollt .burger span,.kopfzeile.gescrollt .burger span::before,.kopfzeile.gescrollt .burger span::after{background:var(--ink)}
.burger[aria-expanded="true"] span{background:transparent!important}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:12px}
.hero__rahmen{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-rahmen);
  min-height:min(820px,calc(100dvh - 24px));display:flex;flex-direction:column;
  background:linear-gradient(160deg,#2A3F85 0%,#3B54A5 45%,#6F9BE8 100%)}
.hero__bild{position:absolute;inset:0;z-index:-2;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 28%,#000 78%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 28%,#000 78%)}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 85%;transform-origin:50% 80%;opacity:.55;mix-blend-mode:luminosity;animation:bildZoom 2.5s var(--feder) both}
.hero__rahmen::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,16,32,.22) 0%,rgba(11,16,32,0) 32%,rgba(11,16,32,0) 62%,rgba(11,16,32,.3) 100%)}
.hero__inhalt{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(104px,13vh,144px) var(--gutter) 0}
.hero h1{margin-top:18px;font-size:clamp(2.4rem,5.2vw,4.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.04;color:#fff;max-width:19ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:#BFD2FF}
.hero__lead{margin-top:18px;max-width:min(820px,100%);text-wrap:balance;font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.86)}
.hero__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.hero__karten{--ks:clamp(150px,14vw,205px);position:relative;z-index:5;height:var(--kh,340px);margin:clamp(8px,2vh,24px) 0 -64px;perspective:1400px;transform-style:preserve-3d}
.hk-slot{position:absolute;left:50%;top:0;width:var(--kb,260px);margin-left:calc(var(--kb,260px) / -2);
  transform:translateX(calc(var(--o,0) * var(--ks,205px))) translateY(calc(var(--a,0) * 30px)) translateZ(calc(var(--a,0) * -110px)) rotateY(calc(var(--o,0) * -12deg));
  z-index:calc(10 - var(--a,0));opacity:calc(1 - var(--a,0) * .1);
  transition:transform 1s var(--feder),opacity 1s var(--feder),z-index 0s .5s;will-change:transform}
.hk-slot.ist-weit{opacity:0;pointer-events:none}
.hk-slot.ist-sprung{transition:none;opacity:0}
.hk-slot--mitte{--kb:300px;z-index:20;transform:translateZ(40px)}
.hk-slot--mitte .hk{min-height:310px;box-shadow:0 50px 90px -40px rgba(11,16,32,.8)}
.hk{position:relative;width:100%;min-height:var(--kh-karte,250px);border-radius:22px;padding:18px;text-align:left;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 44px 80px -44px rgba(11,16,32,.7)}
.hk--glas{min-height:300px;background:rgba(11,16,32,.58);border-color:rgba(255,255,255,.5)}
.hk__zeichen{position:absolute;right:-18px;bottom:-22px;width:150px;height:150px;opacity:.14;pointer-events:none;
  filter:brightness(0) invert(1);mask:linear-gradient(135deg,#000 30%,transparent 90%);-webkit-mask:linear-gradient(135deg,#000 30%,transparent 90%)}
.hk--weiss{background:#fff;color:var(--ink)}
.hk--dunkel{background:var(--nacht);color:#fff}
.hk--zart{background:var(--blau-zart);color:var(--ink)}
.hk--glas{background:rgba(11,16,32,.52);border:1px solid rgba(255,255,255,.34);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  align-items:center;justify-content:center;text-align:center;transition:background-color .3s}
a.hk--glas:hover{background:rgba(11,16,32,.7)}
.hk__klein{font-size:.78rem;font-weight:500;color:var(--text-2)}
.hk--dunkel .hk__klein{color:rgba(255,255,255,.6)}
.hk__gross{font-size:2.5rem;font-weight:500;letter-spacing:-.04em;line-height:1;margin-top:auto}
.hk__text{font-size:.9rem;line-height:1.45;color:var(--text)}
.hk--dunkel .hk__text{color:rgba(255,255,255,.72)}
.hk--glas .hk__text{color:rgba(255,255,255,.8)}
.hk__titel{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.hk__plus{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);
  display:grid;place-items:center;margin-bottom:6px}
.hk__plus::before,.hk__plus::after{content:"";position:absolute;width:20px;height:2px;border-radius:2px;background:#fff}
.hk__plus::after{transform:rotate(90deg)}
.hk__plus{position:relative}
.hk__chips{display:flex;flex-wrap:wrap;gap:6px}
.hk__chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.8rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.hk__chip img{width:14px;height:14px;filter:brightness(0) invert(1)}
.hk__logos{display:grid;gap:10px;margin-top:4px}
.hk__logos img{height:24px;width:auto;max-width:150px;object-fit:contain;object-position:left center}
.hk__liste{display:grid;gap:10px;margin-top:auto}
.hk__liste li{display:flex;align-items:center;gap:9px;font-size:.9rem;line-height:1.3}
.hk__liste li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:var(--blau) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.hk__person{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%;box-shadow:0 0 0 3px var(--blau-zart)}
.hk__paar{display:flex}
.hk__paar .hk__person:last-child{margin-left:-14px;box-shadow:0 0 0 3px #fff}
.hk .flagge{width:34px;height:23px;border-radius:4px}

/* Hero faehrt beim Laden ein: Bild zoomt, Inhalte kommen gestaffelt von unten */
.hero [data-hero]{opacity:0;animation:heroAuf 1.2s var(--feder) forwards;animation-delay:var(--verzug,0s)}
@keyframes heroAuf{from{opacity:0;transform:translateY(var(--hero-y,120px))}to{opacity:1;transform:none}}
@keyframes bildZoom{from{transform:scale(1.2)}to{transform:scale(1)}}
.hero__karten[data-hero]{--hero-y:90px}
.schweben{animation:schweben 7s ease-in-out infinite alternate}
.schweben--2{animation-duration:8.5s;animation-delay:-3s}
@keyframes schweben{from{translate:0 0}to{translate:0 -10px}}

/* Auf dem Desktop traegt die Mittelkarte den Aufruf, die Knoepfe waeren doppelt */
@media (min-width:941px){.hero__knoepfe{display:none}}

/* Scroll-Scrub im Hero: Canvas liegt ueber dem Poster, sobald die Bilder da sind */
.hero__scrub{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.hero__bild--scrub.ist-bereit .hero__scrub{opacity:1}
.hero__bild--scrub.ist-bereit img{animation:none}
@media (max-width:640px){.hero__scrub{display:none}}

/* ---------- Partnerbaender ---------- */
.baender{position:relative;z-index:1;height:clamp(170px,17vw,220px);margin-top:0;overflow:hidden}
.band{position:absolute;left:-6%;right:-6%;top:calc(50% - 30px);height:60px;display:flex;align-items:center;overflow:hidden}
.band--a{background:var(--blau);transform:rotate(-3.5deg);z-index:2;box-shadow:0 18px 40px -24px rgba(11,16,32,.55)}
.band--b{background:var(--nacht);transform:rotate(3deg);z-index:1}
.band__reihe{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;padding-inline:36px;animation:bandLauf 60s linear infinite}
.band--b .band__reihe{animation-direction:reverse;animation-duration:70s}
.band img{height:30px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.92}
@keyframes bandLauf{to{transform:translateX(-50%)}}

/* ---------- Ueber uns: Aussage und Bento ---------- */
.aussage{text-align:left}
.aussage .titel{max-width:22ch}
.aussage__texte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin:32px 0 0;max-width:1080px}
@media (max-width:760px){.aussage__texte{grid-template-columns:1fr;gap:14px}}
.aussage__texte p{color:var(--text);font-size:1.05rem;line-height:1.7}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:var(--gap);margin-top:var(--kopf-abstand)}
.bento__foto{grid-row:span 2;position:relative;border-radius:var(--r-karte);overflow:hidden;background:var(--karte-2)}
.bento__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.bento__foto figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:14px 16px;border-radius:var(--r-klein);
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bento__foto b{display:block;font-weight:500}
.bento__foto span{font-size:.88rem;color:var(--text)}
.bento__foto a{color:var(--blau);font-weight:500}
.zahlkarte{border-radius:var(--r-karte);background:var(--karte);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.zahlkarte b{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.zahlkarte > span{font-size:.95rem;color:var(--text)}
.zahlkarte--blau{background:var(--blau);color:#fff}
.zahlkarte--blau > span{color:rgba(255,255,255,.8)}
.zahlkarte--hellblau{background:var(--blau-zart)}
.bento__prinzipien{grid-column:span 2;border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);padding:26px;display:grid;gap:14px;align-content:center}
.bento__prinzipien li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.5}
.bento__prinzipien img{width:22px;height:22px;flex:none;margin-top:1px}

/* ---------- Leistungen: vier Felder als grosse Karten ---------- */
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.feldkarte{border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .4s var(--feder),transform .4s var(--feder)}
.feldkarte:hover{box-shadow:var(--schatten);transform:translateY(-4px)}
.feldkarte__bild{position:relative;height:clamp(210px,20vw,250px);background:radial-gradient(120% 90% at 50% 100%,var(--blau-zart) 0%,var(--karte) 60%);overflow:hidden;display:grid;place-items:center}
.feldkarte__zeichen{width:92px;height:92px;border-radius:26px;background:#fff;display:grid;place-items:center;box-shadow:0 20px 40px -24px rgba(11,16,32,.4);z-index:2}
.feldkarte__zeichen img{width:56px;height:56px;object-fit:contain}
.orbit{position:absolute;width:210px;height:210px;border-radius:50%;border:1px dashed rgba(59,84,165,.28);animation:kreisen 30s linear infinite}
.orbit--2{width:320px;height:320px;animation-duration:44s;animation-direction:reverse;border-color:rgba(59,84,165,.16)}
.orbit__icon{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--nacht);display:grid;place-items:center;
  box-shadow:0 12px 24px -16px rgba(11,16,32,.45);animation:kreisen 30s linear infinite reverse}
.orbit--2 .orbit__icon{animation-duration:44s;animation-direction:normal}
.orbit__icon img{width:24px;height:24px}
@keyframes kreisen{to{rotate:360deg}}
.feldkarte__text{padding:26px 28px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.feldkarte__claim{font-size:.82rem;font-weight:500;color:var(--blau)}
.feldkarte h3{font-size:1.7rem;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.feldkarte p{color:var(--text);line-height:1.6}
.posten{display:grid;gap:8px;margin-top:10px}
.posten__zeile{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r-klein);background:var(--grund);transition:background-color .25s,transform .3s var(--feder)}
a.posten__zeile:hover{background:var(--blau-zart);transform:translateX(3px)}
.posten__zeile img{width:34px;height:34px;flex:none;padding:6px;border-radius:10px;background:var(--nacht)}
.posten__zeile b{display:block;font-weight:500;font-size:.98rem}
.posten__zeile span{display:block;font-size:.86rem;color:var(--text)}
.posten__text{flex:1;min-width:0}
.posten__los{flex:none;font-size:.84rem;font-weight:500;color:var(--blau);white-space:nowrap}

/* ---------- Fuer wen: Aeline-Servicegitter ---------- */
.dienste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);padding:var(--gap);border-radius:var(--r-rahmen);background:var(--karte)}
.dienst{grid-column:span 2;background:var(--weiss);border-radius:var(--r-karte);padding:28px;display:flex;flex-direction:column;gap:12px;min-height:220px;
  transition:transform .4s var(--feder),box-shadow .4s var(--feder)}
.dienst:nth-child(4),.dienst:nth-child(5){grid-column:span 3}
.dienst:hover{box-shadow:var(--schatten)}
.dienst__icon{width:48px;height:48px;border-radius:14px;background:var(--nacht);display:grid;place-items:center;margin-bottom:auto}
.dienst__icon img{width:26px;height:26px}
.dienst h3{margin-top:26px;font-size:1.3rem;font-weight:500;letter-spacing:-.02em}
.dienst p{color:var(--text);line-height:1.6}

/* ---------- Ablauf ---------- */
.schritte{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.schritte__linie{position:absolute;top:36px;left:16.6%;right:16.6%;height:2px;background:var(--linie);overflow:hidden}
.schritte__linie::after{content:"";position:absolute;inset:0;background:var(--blau);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--feder) .3s}
.schritte.ist-da .schritte__linie::after{transform:scaleX(1)}
.schritt{position:relative;text-align:center;padding:0 12px}
.schritt__nr{width:72px;height:72px;margin:0 auto;border-radius:50%;background:var(--weiss);border:1px solid var(--linie);display:grid;place-items:center;
  font-size:1.35rem;font-weight:500;color:var(--blau);box-shadow:0 18px 36px -26px rgba(11,16,32,.45);position:relative;z-index:1}
.schritt h3{margin-top:24px;font-size:1.3rem;font-weight:500;letter-spacing:-.02em}
.schritt p{margin:10px auto 0;color:var(--text);line-height:1.6;max-width:34ch}
.schritte__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 26px;margin-top:var(--kopf-abstand);color:var(--text)}

/* ---------- Online anfragen: Split mit Zeilen ---------- */
.online{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.online .kopf{margin-bottom:0;position:sticky;top:120px}
.anfragen{display:grid;gap:12px}
.anfrage{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 22px 22px 20px;border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);
  transition:border-color .3s,box-shadow .4s var(--feder),transform .4s var(--feder)}
.anfrage:hover{border-color:var(--blau);box-shadow:var(--schatten);transform:translateY(-3px)}
.anfrage__icon{width:56px;height:56px;border-radius:16px;background:var(--nacht);display:grid;place-items:center}
.anfrage__icon img{width:32px;height:32px}
.anfrage h3{font-size:1.2rem;font-weight:500;letter-spacing:-.015em}
.anfrage p{margin-top:4px;color:var(--text);font-size:.95rem;line-height:1.55}
.anfrage small{display:block;margin-top:8px;font-size:.82rem;color:var(--text-2)}
.anfrage__pfeil{width:44px;height:44px;border-radius:50%;background:var(--nacht);color:#fff;display:grid;place-items:center;transition:transform .35s var(--feder),background-color .25s}
.anfrage__pfeil svg{width:16px;height:16px}
.anfrage:hover .anfrage__pfeil{transform:rotate(-45deg);background:var(--blau)}

/* ---------- Oesterreich: Vorlage im dunklen Rahmen ---------- */
.rahmen-dunkel{margin:0 12px;border-radius:var(--r-rahmen);overflow:hidden}
@keyframes atDraw{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.person{position:relative;border-radius:var(--r-karte);overflow:hidden;aspect-ratio:4/5.4;background:var(--karte-2)}
.person img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .8s var(--feder)}

.person__karte{position:absolute;left:10px;right:10px;bottom:10px;padding:14px 16px;border-radius:var(--r-klein);background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.person__karte h3{font-size:1.02rem;font-weight:500}
.person__karte p{font-size:.86rem;color:var(--blau);font-weight:500}
.person__karte small{display:block;margin-top:4px;font-size:.82rem;color:var(--text);line-height:1.45}
.team__fuss{margin-top:28px;text-align:center;color:var(--text-2);font-size:.94rem}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq .kopf{position:sticky;top:120px;margin-bottom:0}
.faq__gruppe + .faq__gruppe{margin-top:34px}
.faq__gruppe h3{font-size:.82rem;font-weight:500;color:var(--text-2);margin:0 0 12px 4px}
.frage{border-radius:var(--r-klein);background:var(--weiss);border:1px solid var(--linie);overflow:hidden;transition:border-color .3s}
.frage + .frage{margin-top:10px}
.frage[open]{border-color:#C9D5EE}
.frage summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 20px 20px 22px;font-size:1.04rem;font-weight:500}
.frage summary::-webkit-details-marker{display:none}
.frage__plus{position:relative;width:32px;height:32px;border-radius:50%;background:var(--grund);flex:none;transition:transform .4s var(--feder),background-color .25s}
.frage__plus::before,.frage__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px}
.frage__plus::after{transform:rotate(90deg)}
.frage[open] .frage__plus{transform:rotate(45deg);background:var(--blau-zart)}
.frage__antwort{padding:0 22px 22px;color:var(--text);line-height:1.65;max-width:64ch}

/* ---------- Kontakt ---------- */
.kontakt{margin:0 12px;border-radius:var(--r-rahmen);overflow:hidden;position:relative;isolation:isolate;background:linear-gradient(160deg,#1C2A5C,#3B54A5)}
.kontakt__bild{position:absolute;inset:0;z-index:-2}
.kontakt__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.kontakt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,16,32,.78) 0%,rgba(11,16,32,.5) 55%,rgba(11,16,32,.35) 100%)}
.kontakt__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:center;padding-block:clamp(56px,8vw,104px)}
.kontakt .titel{color:#fff}
.kontakt .lead{color:rgba(255,255,255,.82);margin-top:18px}
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.kachel{padding:18px 20px;border-radius:var(--r-klein);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kachel dt{font-size:.8rem;color:rgba(255,255,255,.72)}
.kachel dd{margin-top:6px}
.kachel a{font-size:1.1rem;font-weight:500}
.kachel em{display:block;margin-top:4px;font-style:normal;font-size:.84rem;color:rgba(255,255,255,.72)}
.persoenlich{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 18px 14px 14px;border-radius:var(--r-klein);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.persoenlich img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
.persoenlich b{display:block;color:#fff;font-weight:500}
.persoenlich span{font-size:.92rem;line-height:1.5}
.k-punkte{display:grid;gap:10px;margin-top:22px}
.k-punkte li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.88);font-size:.95rem}
.k-punkte li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' stroke='%233B54A5' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.formular{background:#fff;border-radius:var(--r-karte);padding:clamp(24px,3vw,36px);display:grid;gap:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.feldgruppe label{display:block;margin-bottom:7px;font-size:.86rem;font-weight:500}
.feldgruppe label small{font-weight:400;color:var(--text-2);font-size:inherit}
.eingabe{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-klein);padding:14px 16px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.eingabe:focus{outline:none;background:#fff;border-color:var(--blau-hell);box-shadow:0 0 0 4px rgba(78,140,247,.16)}
textarea.eingabe{resize:vertical;min-height:96px}
select.eingabe{appearance:none;padding-right:44px;background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5470' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.telefon{display:flex}
.telefon span{display:flex;align-items:center;padding:0 14px;border:1px solid var(--linie);border-right:0;border-radius:var(--r-klein) 0 0 var(--r-klein);background:var(--karte);color:var(--text);font-weight:500}
.telefon .eingabe{border-radius:0 var(--r-klein) var(--r-klein) 0;min-width:0}
.fehler{display:none;margin-top:6px;font-size:.84rem;color:#B03026}
.feldgruppe.fehlt .eingabe{border-color:#B03026}
.feldgruppe.fehlt .fehler{display:block}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--text);cursor:pointer}
.zustimmung input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--blau)}
.zustimmung a{color:var(--blau);text-decoration:underline;text-underline-offset:2px}
.formular .knopf{justify-content:space-between;width:100%;margin-top:4px}
.formular__hinweis{text-align:center;font-size:.86rem;color:var(--text-2)}
.status{display:none;padding:14px 16px;border-radius:var(--r-klein);font-size:.93rem;line-height:1.5}
.status.zeigen{display:block}
.status.ok{background:#E8F6EF;color:#12694A}
.status.fehler-box{background:#FDECEA;color:#96271C}

/* ---------- Fusszeile ---------- */
.fuss{padding-block:clamp(64px,8vw,104px) 28px}
.fuss__oben{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.fuss__marke img{height:38px;width:auto}
.fuss__marke p{margin-top:20px;color:var(--text);line-height:1.7;max-width:34ch}
.fuss__marke small{display:block;margin-top:14px;font-size:.86rem;color:var(--text-2);line-height:1.6}
.fuss h3{font-size:.86rem;font-weight:500;color:var(--text-2);margin-bottom:16px}
.fuss ul{display:grid;gap:12px;color:var(--text)}
.fuss a{transition:color .2s}
.fuss a:hover{color:var(--blau)}
.fuss__tel{font-weight:500;color:var(--ink)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--linie);font-size:.86rem;color:var(--text-2)}
.fuss__recht{display:flex;flex-wrap:wrap;gap:22px}

/* ---------- Einfahren beim Scrollen ---------- */
[data-auf]{opacity:0;transform:translateY(var(--auf-y,48px));transition:opacity .9s var(--feder),transform 1.1s var(--feder);transition-delay:var(--verzug,0s)}
[data-auf].ist-da{opacity:1;transform:none}

/* ---------- Mobil ---------- */
@media (max-width:1060px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__foto{grid-row:span 2}
}
@media (max-width:860px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__oben{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  .hauptnav,.kopfzeile .knopf--kopf{display:none}
  .burger{display:flex}
  .kopfzeile.menu-offen .kopfzeile__leiste{background:#fff;border-color:var(--linie);border-radius:26px;flex-wrap:wrap}
  .kopfzeile.menu-offen .marke--weiss{opacity:0}
  .kopfzeile.menu-offen .marke--blau{opacity:1}
  .kopfzeile.menu-offen .burger span::before,.kopfzeile.menu-offen .burger span::after{background:var(--ink)}
  .kopfzeile.menu-offen .burger{border-color:var(--linie);background:#fff}
  .kopfzeile.menu-offen .hauptnav{display:grid;width:100%;gap:0;margin:8px 0 6px;color:var(--ink)}
  .kopfzeile.menu-offen .hauptnav a{padding:14px 4px;border-top:1px solid var(--linie);font-size:1.02rem}
  .kopfzeile.menu-offen .knopf--kopf{display:inline-flex;width:100%;justify-content:space-between;margin:6px 0 4px}
  .felder,.online,.faq,.kontakt__raster{grid-template-columns:1fr}
  .online .kopf,.faq .kopf{position:static}
  .dienste{grid-template-columns:1fr 1fr}
  .dienst,.dienst:nth-child(4),.dienst:nth-child(5){grid-column:span 1}
  .dienst:nth-child(5){grid-column:span 2}
  .schritte{grid-template-columns:1fr;gap:36px}
  .schritte__linie{display:none}
}
@media (max-width:640px){
  .hero{padding:8px}
  .hero__rahmen{border-radius:22px}
  .hero h1{font-size:clamp(2.3rem,11vw,3rem)}
  .hero__knoepfe .knopf{width:100%;justify-content:space-between}
  .hero__karten{--kb:220px;--ks:120px;--kh:280px;margin:8px 0 -50px}
  .hk{padding:14px;min-height:220px}
  .hk--glas{min-height:250px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento__foto{grid-row:auto;aspect-ratio:4/5}
  .bento__prinzipien{grid-column:auto}
  .zahlkarte{min-height:150px}
  .dienste{grid-template-columns:1fr}
  .dienst,.dienst:nth-child(5){grid-column:auto;min-height:0}
  .team{grid-template-columns:1fr 1fr;gap:10px}
  .person__karte{left:6px;right:6px;bottom:6px;padding:10px 12px}
  .person__karte small{display:none}
  .anfrage{grid-template-columns:auto 1fr}
  .posten__zeile{flex-wrap:wrap}
  .posten__text{flex:1 1 calc(100% - 52px)}
  .posten__los{width:100%;padding-left:48px;margin-top:-4px}
  .anfrage__pfeil{display:none}
  .kacheln{grid-template-columns:1fr}
  .rahmen-dunkel,.kontakt{margin:0 8px;border-radius:22px}
  .fuss__oben{grid-template-columns:1fr}
  .baender{height:140px}
  .band{height:48px;top:calc(50% - 24px)}
  .band img{height:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-auf],.hero [data-hero]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Unterseiten ---------- */
.unterhero{padding:12px}
.unterhero__rahmen{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-rahmen);color:#fff;text-align:center;
  padding:clamp(120px,15vh,168px) var(--gutter) clamp(56px,7vh,84px);background:linear-gradient(160deg,#2A3F85 0%,#3B54A5 45%,#6F9BE8 100%)}
.unterhero__rahmen::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 80% 100%,rgba(255,255,255,.14),transparent 70%)}
.unterhero__zeichen{position:absolute;right:-60px;bottom:-90px;width:min(380px,50vw);height:auto;opacity:.12;z-index:-1;pointer-events:none;
  filter:brightness(0) invert(1);-webkit-mask:linear-gradient(135deg,#000 20%,transparent 85%);mask:linear-gradient(135deg,#000 20%,transparent 85%)}
.unterhero__inhalt{display:flex;flex-direction:column;align-items:center;max-width:860px;margin:0 auto}
.unterhero h1{margin-top:16px;font-size:clamp(2.2rem,4.8vw,4rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;text-wrap:balance}
.unterhero .lead{margin-top:16px;max-width:720px;color:rgba(255,255,255,.86);text-wrap:balance}
.unterhero__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.unterhero [data-hero]{--hero-y:40px}
.krumen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px;font-size:.82rem;color:rgba(255,255,255,.62)}
.krumen a{color:inherit;text-decoration:none}.krumen a:hover{color:#fff}.krumen b{font-weight:500;color:#fff}
.themen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);padding:var(--gap);border-radius:var(--r-rahmen);background:var(--karte)}
.thema{background:var(--weiss);border-radius:var(--r-karte);padding:28px;display:flex;flex-direction:column;gap:10px}
.thema h3{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin-top:14px}
.thema__zusatz{font-size:.82rem;font-weight:500;color:var(--blau)}
.thema p{color:var(--text);line-height:1.6}
.thema__fuss{margin-top:auto;padding-top:14px}
.bereiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.bereich{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-karte);background:var(--weiss);color:var(--ink);text-decoration:none;
  box-shadow:0 1px 0 rgba(11,16,32,.04);transition:transform .35s var(--feder),box-shadow .35s var(--feder)}
.bereich:hover{box-shadow:0 18px 40px -24px rgba(11,16,32,.35)}
.bereich img{width:44px;height:44px;border-radius:12px;background:var(--blau-zart);padding:8px}
.bereich b{display:block;font-weight:500}.bereich small{color:var(--text-2)}
.bereich .anfrage__pfeil{margin-left:auto}
.rechtstext{max-width:780px;margin:0 auto}
.rechtstext h2{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;margin:40px 0 12px}
.rechtstext p,.rechtstext li{line-height:1.65;color:var(--text)}
.rechtstext p+p{margin-top:10px}.rechtstext ul{list-style:disc;padding-left:22px;display:grid;gap:6px;margin:8px 0 12px}
.rechtstext a{color:var(--blau)}
.rechtstext code{font-size:.85em;background:var(--karte);padding:2px 6px;border-radius:6px}
.fakten{display:grid;gap:10px;margin:18px 0}
.fakten div{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--linie)}
.fakten dt{font-weight:500;color:var(--ink)}.fakten dd{color:var(--text)}
mark.offen{background:#FFF1B8;color:#6b5300;padding:2px 8px;border-radius:999px;font-size:.8em;font-weight:500}
@media (max-width:860px){.bereiche{grid-template-columns:1fr}.fakten div{grid-template-columns:1fr;gap:4px}}
@media (max-width:640px){.unterhero{padding:8px}.unterhero__rahmen{border-radius:22px;padding-top:110px}.themen{padding:12px}
  .unterhero__knoepfe{width:100%}.unterhero__knoepfe .knopf{width:100%;justify-content:space-between;white-space:normal;text-align:left}}
.feldkarte__link{color:inherit;text-decoration:none}.feldkarte__link:hover{color:var(--blau)}

/* ============================================================
   Bereichsseiten (Absichern, Vorsorgen, Darlehen, Planung)
   Das Zeichen besteht aus vier Vierteln, jedes Viertel ist ein Bereich.
   Im Kopf jeder Bereichsseite steht es gross, das eigene Viertel leuchtet,
   die anderen drei fuehren weiter. Das ist die eine laute Stelle, alles
   andere bleibt im bestehenden System (Radien, Blau, Pillen).
   ============================================================ */
.hauptnav a[aria-current="page"]{color:#fff}
.hauptnav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor}
.kopfzeile.gescrollt .hauptnav a[aria-current="page"]{color:var(--blau)}
@media (max-width:1180px) and (min-width:941px){.hauptnav{gap:20px;font-size:.92rem}}

/* Kopf der Bereichsseite: Text links, Zeichen rechts */
.unterhero--bereich .unterhero__rahmen{text-align:left;padding-bottom:clamp(56px,8vh,96px)}
.bhero{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.bhero .unterhero__inhalt{align-items:flex-start;margin:0;max-width:none}
.bhero .krumen{justify-content:flex-start}
.bhero h1{font-size:clamp(2.6rem,6vw,5.2rem)}
.bhero .lead{text-wrap:pretty;margin-inline:0}
.bhero .unterhero__knoepfe{justify-content:flex-start}

.kompass{--k:clamp(260px,31vw,440px);width:var(--k);justify-self:end;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,12px)}
.kompass__feld{position:relative;display:block;color:#fff;text-decoration:none;border-radius:18px}
.kompass__wort{position:absolute;white-space:nowrap}
.kompass__feld:nth-child(1) .kompass__wort{left:0;top:0}
.kompass__feld:nth-child(2) .kompass__wort{right:0;top:0}
.kompass__feld:nth-child(3) .kompass__wort{left:0;bottom:0}
.kompass__feld:nth-child(4) .kompass__wort{right:0;bottom:0}
.kompass__feld img{width:100%;height:auto;filter:brightness(0) invert(1);opacity:.26;transition:opacity .45s var(--feder),transform .6s var(--feder)}
.kompass__wort{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.62);transition:color .3s}
.kompass__wort b{font-weight:500;color:#fff;margin-right:6px}
.kompass__feld:hover img{opacity:.6}
.kompass__feld:hover .kompass__wort{color:#fff}
.kompass__feld.ist-aktiv img{opacity:1}
.kompass__feld.ist-aktiv .kompass__wort{color:#fff}
.kompass__feld:nth-child(1):hover img{transform:translate(-4px,-4px)}
.kompass__feld:nth-child(2):hover img{transform:translate(4px,-4px)}
.kompass__feld:nth-child(3):hover img{transform:translate(-4px,4px)}
.kompass__feld:nth-child(4):hover img{transform:translate(4px,4px)}
.kompass[data-hero]{--hero-y:60px}

/* Einstieg: Aussage links, Anlaesse rechts */
.einstieg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.einstieg__aussage{font-size:clamp(1.6rem,2.8vw,2.35rem);font-weight:500;letter-spacing:-.03em;line-height:1.18;color:var(--ink);max-width:24ch;text-wrap:balance}
.einstieg__text{color:var(--text);font-size:1.05rem;line-height:1.7;max-width:56ch}
.einstieg__text + .einstieg__text{margin-top:14px}
.anlaesse__titel{margin-top:30px;font-size:.86rem;font-weight:500;color:var(--text-2)}
.anlaesse{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.anlaesse li{padding:9px 16px;border-radius:999px;background:var(--grund);border:1px solid var(--linie);font-size:.93rem;color:var(--ink)}

/* Themen: Verzeichnis klebt links, Themenbloecke rechts */
.themenliste{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.tindex{position:sticky;top:112px;display:grid;gap:4px}
.tindex__titel{font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px}
.tindex a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-klein);color:var(--text);font-weight:500;transition:background-color .25s,color .25s}
.tindex a img{width:30px;height:30px;padding:5px;border-radius:9px;background:var(--karte-2);filter:grayscale(1);opacity:.7;transition:background-color .25s,opacity .25s,filter .25s}
.tindex a:hover{color:var(--ink);background:var(--weiss)}
.tindex a.ist-aktiv{background:var(--weiss);color:var(--ink);box-shadow:0 12px 30px -24px rgba(11,16,32,.45)}
.tindex a.ist-aktiv img{background:var(--nacht);filter:none;opacity:1}
.tbloecke{display:grid;gap:var(--gap)}
.tblock{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-karte);padding:clamp(24px,3.4vw,44px);scroll-margin-top:110px}
.tblock__kopf{display:flex;align-items:center;gap:16px}
.tblock__kopf .dienst__icon{margin:0;flex:none}
.tblock h3{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.tblock__zusatz{display:block;margin-top:3px;font-size:.88rem;font-weight:500;color:var(--blau)}
.tblock__text{margin-top:20px;color:var(--text);font-size:1.03rem;line-height:1.7;max-width:62ch}
.tblock__achten{margin-top:24px;padding:20px 22px;border-radius:var(--r-klein);background:var(--grund)}
.tblock__achten h4{font-size:.86rem;font-weight:500;color:var(--text-2);margin:0 0 12px}
.haken{display:grid;gap:10px}
.haken li{display:flex;gap:11px;align-items:flex-start;line-height:1.5;color:var(--ink)}
.haken li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:50%;flex:none;background:var(--blau) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.tblock__fuss{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tblock__online{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--text-2)}

/* Werkzeug: dunkler Rahmen mit Rechner */
.werkzeug{margin:0 12px;border-radius:var(--r-rahmen);overflow:hidden;position:relative;isolation:isolate;color:#fff;
  background:radial-gradient(80% 60% at 100% 0%,rgba(78,140,247,.22),transparent 60%),radial-gradient(60% 60% at 0% 100%,rgba(59,84,165,.35),transparent 70%),var(--nacht)}
.werkzeug__zeichen{position:absolute;right:-80px;top:-80px;width:420px;opacity:.05;z-index:-1;filter:brightness(0) invert(1);pointer-events:none}
.werkzeug__innen{padding-block:clamp(56px,8vw,112px)}
.werkzeug .titel{color:#fff}
.werkzeug .lead{color:rgba(255,255,255,.74)}
.rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);align-items:start}
.eingaben{display:grid;gap:22px;padding:clamp(22px,3vw,34px);border-radius:var(--r-karte);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.regler label,.regler__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.92rem;color:rgba(255,255,255,.78)}
.regler__wert{display:flex;align-items:baseline;gap:6px}
.regler__wert input{width:8.5ch;text-align:right;font:inherit;font-size:1.12rem;font-weight:500;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);padding:2px 0}
.regler__wert input:focus{outline:none;border-bottom:2px solid var(--blau-hell);background:rgba(78,140,247,.14);border-radius:4px 4px 0 0}
.regler__wert span{font-size:.9rem;color:rgba(255,255,255,.6)}
.regler input[type=range]{width:100%;margin-top:12px;accent-color:var(--blau-hell);height:24px;cursor:pointer}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl button{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:transparent;color:rgba(255,255,255,.86);font-size:.92rem;
  transition:background-color .25s,border-color .25s,color .25s}
.wahl button:hover{border-color:rgba(255,255,255,.5)}
.wahl button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}
.eingaben__gruppe{display:grid;gap:12px}
.eingaben__gruppe > span{font-size:.92rem;color:rgba(255,255,255,.78)}
.ergebnis{background:#fff;color:var(--ink);border-radius:var(--r-karte);padding:clamp(24px,3vw,36px);display:grid;gap:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);position:sticky;top:110px}
.ergebnis__klein{font-size:.88rem;color:var(--text)}
.ergebnis__zahl{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ergebnis__zahl small{font-size:.4em;letter-spacing:0;color:var(--text);font-weight:400;margin-left:6px}
.zeilen{display:grid;gap:0;border-top:1px solid var(--linie)}
.zeilen div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.zeilen dt{color:var(--text)}
.zeilen dd{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.zeilen .summe dt,.zeilen .summe dd{color:var(--ink);font-weight:500}
.ergebnis__hinweis{font-size:.82rem;line-height:1.55;color:var(--text-2)}
.ergebnis .knopf{justify-content:space-between}
.befund{display:grid;gap:10px}
.befund li{padding:14px 16px;border-radius:var(--r-klein);background:var(--grund);line-height:1.5}
.befund li b{display:block;font-weight:500}
.befund li span{font-size:.92rem;color:var(--text)}
.befund--ok li{background:#EEF6F1}
.befund__leer{color:var(--text);font-size:.95rem}
.balken{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:6px}
.balken i{flex:1;display:flex;flex-direction:column-reverse;border-radius:4px 4px 0 0;overflow:hidden;min-height:2px}
.balken i b{background:var(--blau);display:block}
.balken i em{background:var(--blau-hell);opacity:.55;display:block}
.legende{display:flex;flex-wrap:wrap;gap:16px;font-size:.84rem;color:var(--text)}
.legende span{display:inline-flex;align-items:center;gap:7px}
.legende span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--blau)}
.legende span + span::before{background:var(--blau-hell);opacity:.55}

/* Vorsorgen: drei Saeulen als Bauwerk */
.saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(40px,5vw,64px)}
.saeule{padding:24px;border-radius:var(--r-klein);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid;gap:10px;align-content:start}
.saeule h3{font-size:1.2rem;font-weight:500;letter-spacing:-.015em}
.saeule p{color:rgba(255,255,255,.72);line-height:1.6;font-size:.96rem}
.saeule ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.saeule li{font-size:.82rem;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1)}

/* Darlehen: Partnerlogos als ruhiges Raster */
.logoraster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden}
.logoraster li{background:var(--weiss);display:grid;place-items:center;padding:28px 22px;min-height:104px}
.logoraster img{max-width:100%;width:auto;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logoraster li:hover img{filter:none;opacity:1}

/* Planung: fuenf Schritte */
.schritte--fuenf{grid-template-columns:repeat(5,minmax(0,1fr))}
.schritte--fuenf .schritte__linie{left:10%;right:10%}
.schritte--fuenf .schritt p{max-width:24ch}

.sek--weiss .bereich{background:var(--grund)}

@media (max-width:940px){
  .bhero{grid-template-columns:1fr}
  .kompass{--k:min(260px,62vw);justify-self:start}
  .kompass__wort{font-size:.8rem}
  .einstieg,.themenliste,.rechner{grid-template-columns:1fr}
  .tindex{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .tindex__titel{width:100%;margin-bottom:8px}
  .tindex a{padding:8px 12px;background:var(--weiss);border:1px solid var(--linie);font-size:.92rem}
  .tindex a img{display:none}
  .ergebnis{position:static}
  .saeulen{grid-template-columns:1fr}
  .logoraster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .schritte--fuenf{grid-template-columns:1fr}
}
@media (max-width:640px){
  .werkzeug{margin:0 8px;border-radius:22px}
  .logoraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logoraster li{padding:20px 14px;min-height:84px}
  .tblock__achten{padding:16px}
}
.sprung{position:fixed;left:16px;top:-60px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--nacht);color:#fff;font-weight:500;transition:top .2s}
.sprung:focus{top:16px}
.feldkarte__mehr{align-self:flex-start;margin-top:14px}
.befund li.befund__gruppe{padding:6px 0 0;background:none;font-size:.8rem;font-weight:500;color:var(--text-2)}
.regler__wert span{white-space:nowrap}
@media (max-width:640px){.regler__wert input{width:7ch}.regler__kopf label{flex:1;min-width:0}}
.kopfzeile.menu-offen .hauptnav a[aria-current="page"]{color:var(--blau)}.kopfzeile.menu-offen .hauptnav a[aria-current="page"]::after{display:none}
@media (max-width:940px){
  .kopfzeile.menu-offen{z-index:60}
  .kopfzeile.menu-offen .kopfzeile__leiste{isolation:isolate;box-shadow:0 30px 60px -30px rgba(11,16,32,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .kopfzeile .burger{order:1}
  .kopfzeile .hauptnav{order:2}
  .kopfzeile .knopf--kopf{order:3}
}
.bereiche--vier{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}.bereiche--vier .bereich{padding:24px 24px 24px 22px}.bereiche--vier .bereich img{width:56px;height:56px}@media (max-width:640px){.bereiche--vier{grid-template-columns:1fr}}
.buero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.buero__fakten{display:grid;gap:0;margin:28px 0 30px;border-top:1px solid var(--linie)}
.buero__fakten div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linie)}
.buero__fakten dt{color:var(--text-2);font-size:.92rem}
.buero__fakten dd{color:var(--ink);line-height:1.55}
.buero__titel{font-size:1.4rem;font-weight:500;letter-spacing:-.02em}
.buero__text{margin-top:10px;color:var(--text);line-height:1.6}
@media (max-width:940px){.buero{grid-template-columns:1fr}}
@media (max-width:640px){.buero__fakten div{grid-template-columns:1fr;gap:4px}}
@media (max-width:1060px) and (min-width:941px){.hauptnav{gap:14px;font-size:.88rem}.kopfzeile__leiste{gap:16px;padding-left:18px}.marke,.marke img{height:30px}.kopfzeile .knopf--kopf{font-size:.88rem;padding-left:14px}.hauptnav a{white-space:nowrap}}
/* Anfangsbuchstaben in der Navigation: A, V, D, P ergeben den Namen */
.nav-init{color:#A9C2FF;font-weight:700}
.kopfzeile.gescrollt .nav-init,.kopfzeile.menu-offen .nav-init{color:var(--blau)}
/* Partnerbaender untereinander statt ueber Kreuz (Wunsch Tobias, 27.09.2026) */
.baender{height:auto;display:grid;gap:10px;padding:clamp(28px,4vw,48px) 12px}
.band{position:relative;left:auto;right:auto;top:auto;transform:none;height:64px;border-radius:var(--r-klein)}
.band--a{box-shadow:none}
@media (max-width:640px){.baender{height:auto;padding:24px 8px;gap:8px}.band{top:auto;height:50px}}
/* Logos mit eigener Farbflaeche wuerden beim Weissfaerben zu Kaesten: Original auf weissem Plaettchen */
.band img[src*="bank99"],.band img[src*="hypo-"],.band img[src*="wuestenrot"],.band img[src*="raiffeisen"]{filter:none;opacity:1;background:#fff;border-radius:8px;padding:4px 6px;height:38px;box-sizing:border-box}
@media (max-width:640px){.band img[src*="bank99"],.band img[src*="hypo-"],.band img[src*="wuestenrot"],.band img[src*="raiffeisen"]{height:30px}}

/* ============================================================
   Muenze wird Zeichen (Startseite, Kopf von "Leistungen")
   Scroll steuert CSS-Variablen, gesetzt von site.js. Die Standardwerte
   sind der Endzustand: ohne JS und bei Reduced Motion steht das Logo.
   Die Muenze ist ein Higgsfield-Foto (Mittelfeld leer), das Zeichen
   kommt aus der echten Logodatei und kann daher nie verzerren.
   ============================================================ */
.zeichen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-bottom:var(--kopf-abstand)}
.zeichen__text{display:grid;gap:18px;justify-items:start}
.buehne{--rx:0deg;--ry:0deg;--sk:1;--hub:0px;--zo:1;--licht:-120%;--glanz:0;--bl:1;--praeg:0;--zs:1;--sp:14px;--wo:1;
  position:relative;width:min(480px,100%);aspect-ratio:1;justify-self:center}
.buehne__raum{position:absolute;inset:0;display:grid;place-items:center}
.buehne__dreh{position:relative;width:78%;aspect-ratio:1;
  transform:translateY(var(--hub)) scale(var(--sk));will-change:transform}
.buehne__muenze{position:absolute;inset:0;width:100%;height:100%;opacity:var(--glanz);
  filter:drop-shadow(0 30px 40px rgba(11,16,32,.28))}
.buehne__schatten{position:absolute;left:24%;right:24%;bottom:6%;height:7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,16,32,.3),transparent);opacity:var(--glanz);transform:scaleX(calc(.7 + .3 * var(--sk)))}
.buehne__zeichen{position:absolute;inset:15%;opacity:var(--zo);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;transform:scale(var(--zs))}
.viertel{display:block;filter:drop-shadow(-1.2px -1.2px 0 rgba(255,255,255,calc(.3 * var(--praeg)))) drop-shadow(1.5px 2.5px 1.5px rgba(5,10,30,calc(.6 * var(--praeg))))}
.viertel--a{transform:translate(calc(var(--sp) * -1),calc(var(--sp) * -1))}
.viertel--v{transform:translate(var(--sp),calc(var(--sp) * -1))}
.viertel--d{transform:translate(calc(var(--sp) * -1),var(--sp))}
.viertel--p{transform:translate(var(--sp),var(--sp))}
.viertel__form{position:relative;display:block;width:100%;height:100%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.viertel__form i{position:absolute;inset:0}
.viertel__metall{background:linear-gradient(135deg,#A9BCF0 0%,#5471C4 34%,#2E438C 66%,#1B2A5E 100%)}
.viertel__blau{background:var(--blau);opacity:var(--bl)}
.buehne__worte{position:absolute;inset:9%;pointer-events:none}
.buehne__wort{position:absolute;pointer-events:auto;font-size:.95rem;font-weight:500;color:var(--text);opacity:var(--wo);
  transition:color .2s;padding:6px 2px}
.buehne__wort b{color:var(--blau);font-weight:700;margin-right:3px}
.buehne__wort:hover{color:var(--ink)}
.buehne__wort--a{left:0;top:0}.buehne__wort--v{right:0;top:0}.buehne__wort--d{left:0;bottom:0}.buehne__wort--p{right:0;bottom:0}
.buehne.ist-still .buehne__worte{visibility:hidden}
@media (max-width:940px){.zeichen{grid-template-columns:1fr}.buehne{width:min(420px,100%)}}
@media (max-width:640px){.buehne__wort{font-size:.85rem}}

/* ---------- Leistungen: vier Karten setzen das Zeichen zusammen ----------
   Ersetzt die Orbit-Ringe. Oben A und V (Viertel unten innen), unten D und P
   (Viertel oben innen). Kein Hover-Hueben, nur die Kante wird blau. */
.felder{gap:var(--gap)}
.feldkarte{transition:border-color .3s}
.feldkarte:hover{box-shadow:none;transform:none;border-color:#C9D5EE}
.feldkarte__bild{display:none}
.feldkarte--a,.feldkarte--v{flex-direction:column-reverse}
.feldkarte__viertel{--vg:clamp(150px,17vw,220px);display:flex;padding:14px}
.feldkarte__viertel span{display:block;width:var(--vg);aspect-ratio:1;background:var(--blau);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.feldkarte--a .feldkarte__viertel{justify-content:flex-end;align-items:flex-end;margin-top:auto}
.feldkarte--v .feldkarte__viertel{justify-content:flex-start;align-items:flex-end;margin-top:auto}
.feldkarte--d .feldkarte__viertel{justify-content:flex-end}
.feldkarte--p .feldkarte__viertel{justify-content:flex-start}
.feldkarte--a .feldkarte__text,.feldkarte--v .feldkarte__text{flex:0 0 auto}
@media (max-width:940px){
  .feldkarte--a,.feldkarte--v{flex-direction:column}
  .feldkarte__viertel{--vg:110px;padding:18px 18px 0}
  .feldkarte--a .feldkarte__viertel,.feldkarte--v .feldkarte__viertel{margin-top:0;align-items:flex-start}
}

/* Glanzlicht: zieht einmal ueber das Siegel, waehrend sich das Zeichen einpraegt */
.buehne__licht{position:absolute;inset:0;border-radius:50%;overflow:hidden;opacity:var(--glanz);pointer-events:none}
.buehne__licht i{position:absolute;top:-10%;bottom:-10%;left:0;width:60%;
  background:linear-gradient(100deg,transparent 0%,rgba(190,210,255,.0) 30%,rgba(225,235,255,.22) 50%,rgba(190,210,255,0) 70%,transparent 100%);
  transform:translateX(var(--licht)) skewX(-12deg)}

/* Hero-Karten steigen beim Scrollen von unten auf (Wunsch Tobias, 27.09.2026).
   Ohne JS und bei Reduced Motion stehen sie an ihrem Platz. */
.hero__karten{transform:translateY(var(--ky,0px));opacity:var(--ko,1);will-change:transform}

/* Hero bleibt auf dem Desktop stehen, bis die Karten aufgestiegen sind.
   Die Bahn ist um --pin laenger als der Hero; so lange klebt er oben.
   Der Hero behaelt seine eigene Hoehe (keine Streckung auf Fensterhoehe). */
@media (min-width:941px){
  .hero-bahn{--pin:min(60vh,520px)}
  .hero-bahn::after{content:"";display:block;height:var(--pin)}
  /* Hero und Logo-Leisten stehen gemeinsam und fuellen genau das Fenster;
     auf hohen Monitoren gedeckelt, damit zwischen Text und Karten keine
     Luecke aufreisst. Erst der Abschnitt danach scrollt hoch. */
  .hero-steher{position:sticky;top:0;height:min(100dvh,1060px);display:flex;flex-direction:column}
  .hero-steher .hero{flex:1;min-height:0;display:flex;flex-direction:column}
  .hero-steher .hero__rahmen{flex:1;min-height:0}
  .hero-steher .baender{flex:none;padding:10px 12px 12px;gap:8px}
  .hero-steher .band{height:56px}
}
@media (prefers-reduced-motion:reduce){.hero-bahn::after{display:none}.hero-steher{position:relative;height:auto}}

/* Scroll-Hinweis im Hero: sichtbar, solange die Karten noch unten liegen */
.hero__hinweis{position:absolute;left:50%;bottom:clamp(20px,4vh,36px);z-index:6;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:0;color:#fff;
  opacity:var(--hw,1);transition:opacity .2s}
.hero__hinweis span{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hero__hinweis i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:wippen 1.6s ease-in-out infinite alternate}
.hero__hinweis svg{width:18px;height:18px}
.hero__hinweis:hover i{background:rgba(255,255,255,.26)}
.hero__hinweis.ist-weg{visibility:hidden}
@keyframes wippen{from{transform:translateY(0)}to{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.hero__hinweis{display:none}}
/* Stehender Hero auf niedrigen Bildschirmen verdichten, damit die Karten
   samt "Kostenloses Erstgespraech" ganz ins Bild passen */
@media (min-width:941px) and (max-height:920px){
  .hero-steher .hero__inhalt{padding-top:clamp(84px,11vh,112px)}
  .hero-steher .hero h1{font-size:clamp(2.1rem,6.2vh,3.6rem);margin-top:12px}
  .hero-steher .hero__lead{margin-top:12px}
  .hero-steher .baender{padding:8px 12px 10px;gap:6px}
  .hero-steher .band{height:46px}
  .hero-steher .band img{height:24px}
  .hero-steher .hero__karten{scale:.82;transform-origin:50% 0;margin-top:4px}
}
@media (min-width:941px) and (max-height:700px){
  .hero-steher .hero__karten{scale:.7}
  .hero-steher .hero__inhalt{padding-top:80px}
}
@media (min-width:941px) and (max-height:760px){.hero-steher .hero__karten{margin-bottom:-110px}}
@media (min-width:941px) and (max-height:700px){.hero-steher .hero__karten{margin-bottom:-120px}}
/* Handy: Knoepfe sind im Hero sichtbar, der Scroll-Hinweis entfaellt */
@media (max-width:940px){.hero__hinweis{display:none}}

/* ============================================================
   Handy-Feinschliff (28.09.2026): kompakter, weniger Leerraum,
   Zeilen statt gestapelter Bloecke, wo Inhalte klein sind.
   ============================================================ */
@media (max-width:640px){
  .hero h1{font-size:clamp(2rem,9vw,2.5rem)}
  .bento__foto a{white-space:nowrap}
  .bento{grid-template-columns:1fr 1fr;gap:10px}
  .bento__foto{grid-column:span 2;aspect-ratio:1/1}
  .bento__prinzipien{grid-column:span 2;padding:20px}
  .zahlkarte{min-height:118px;padding:16px;gap:10px}
  .zahlkarte b{font-size:1.9rem}
  .zahlkarte > span{font-size:.86rem}

  .feldkarte__text{padding:20px 18px 22px}
  .feldkarte h3{font-size:1.45rem}
  .feldkarte__viertel{--vg:76px;padding:16px 18px 0}
  .posten__zeile{flex-wrap:nowrap;padding:10px 12px;gap:12px}
  .posten__text{flex:1 1 auto}
  .posten__los{width:auto;padding-left:0;margin-top:0;font-size:.78rem}
  .posten__zeile img{width:30px;height:30px}

  .dienste{padding:10px;gap:10px}
  .dienst{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:4px;padding:18px;min-height:0}
  .dienst__icon{grid-row:span 2;width:44px;height:44px;margin:0}
  .dienst h3{margin-top:0;font-size:1.1rem}
  .dienst p{font-size:.94rem}

  .schritte{gap:22px}
  .schritt{display:grid;grid-template-columns:52px 1fr;column-gap:16px;text-align:left;padding:0}
  .schritt__nr{grid-row:span 2;width:52px;height:52px;margin:0;font-size:1.1rem}
  .schritt h3{margin-top:4px;font-size:1.15rem}
  .schritt p{margin:6px 0 0;max-width:none}
  .schritte__fuss{flex-direction:column;text-align:center}

  .fuss__oben{grid-template-columns:1fr 1fr;gap:28px 20px}
  .fuss__marke{grid-column:span 2}
  .fuss__oben > div:last-child{grid-column:span 2}
}
@media (max-width:640px){
  /* Handy: Knoepfe tragen den Aufruf, das Kartenkarussell entfaellt */
  .hero__karten{display:none}
  .hero__rahmen{min-height:min(620px,90svh)}
  .hero__inhalt{padding-bottom:36px}
  .posten__los{white-space:normal;text-align:right;flex:0 0 64px;line-height:1.25}
  .posten__text{min-width:0}
}
@media (max-width:640px){
  .logoraster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logoraster li{padding:14px 8px;min-height:68px}
  .logoraster img{max-height:30px}
  .kompass{--k:190px;justify-self:center;margin-top:4px}
  .kompass__wort{font-size:.74rem}
  .tblock{padding:20px 18px}
  .tblock h3{font-size:1.3rem}
  .tblock__text{margin-top:14px;font-size:.98rem}
  .tblock__fuss{margin-top:18px}
  .einstieg__aussage{font-size:1.5rem}
}
@media (max-width:640px){.schritte--fuenf .schritt p{max-width:none}}

/* ============================================================
   Footer neu (28.09.2026): dunkler Rahmen wie Kontakt und Werkzeuge,
   Abschlussaufruf oben, Register sichtbar, Zeichen als stilles Wasserzeichen
   ============================================================ */
.fuss{padding:0 0 12px}
.fuss__rahmen{position:relative;isolation:isolate;overflow:hidden;margin:0 12px;border-radius:var(--r-rahmen);
  background:radial-gradient(70% 60% at 100% 0%,rgba(78,140,247,.18),transparent 60%),var(--nacht);color:rgba(255,255,255,.72)}
.fuss__zeichen{position:absolute;right:-6%;bottom:-18%;width:min(520px,60vw);height:auto;opacity:.045;z-index:-1;pointer-events:none}
.fuss .wrap{padding-block:clamp(48px,6vw,80px) 24px}
.fuss__aufruf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding-bottom:clamp(36px,5vw,56px);border-bottom:1px solid rgba(255,255,255,.1)}
.fuss__satz{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:#fff;max-width:22ch}
.fuss__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.fuss .fuss__tel{font-size:1.15rem;font-weight:500;color:#fff}
.fuss__oben{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,56px)}
.fuss__marke img{height:36px}
.fuss__marke p{color:rgba(255,255,255,.72);margin-top:18px}
.fuss__register{display:grid;gap:10px;margin-top:20px}
.fuss__register dt{font-size:.8rem;color:rgba(255,255,255,.5)}
.fuss__register dd{font-size:.88rem;color:rgba(255,255,255,.8)}
.fuss h3{color:rgba(255,255,255,.5);font-size:.84rem}
.fuss ul{color:rgba(255,255,255,.82);gap:11px}
.fuss address{font-style:normal;line-height:1.7;color:rgba(255,255,255,.82)}
.fuss a:hover{color:#fff}
.fuss__bereiche b{color:#A9C2FF;font-weight:700}
.fuss__unten{border-top-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.fuss__recht a{color:rgba(255,255,255,.66)}
@media (max-width:1060px){.fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss__marke{grid-column:span 2}}
@media (max-width:640px){
  .fuss__rahmen{margin:0 8px;border-radius:22px}
  .fuss__oben{grid-template-columns:1fr 1fr;gap:28px 18px}
  .fuss__marke,.fuss__oben > div:last-child{grid-column:span 2}
  .fuss__aufruf .knopf{width:100%;justify-content:space-between}
}

/* ---------- Transparenz: Aussagen als ruhige Liste ---------- */
.transparenz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.transparenz .kopf{position:sticky;top:120px;margin-bottom:0}
.transparenz__liste{display:grid;border-top:1px solid var(--linie)}
.transparenz__liste div{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--linie)}
.transparenz__liste dt{font-size:1.12rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.transparenz__liste dd{color:var(--text);line-height:1.65;max-width:60ch}
@media (max-width:940px){.transparenz{grid-template-columns:1fr}.transparenz .kopf{position:static}}

/* ---------- Direkt loslegen: Neukunden und Bestandskunden nebeneinander ---------- */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.weg{padding:clamp(22px,3vw,34px);border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie)}
.sek--weiss .weg{background:var(--grund);border-color:transparent}
.sek--weiss .weg .posten__zeile{background:var(--weiss)}
.weg h3{font-size:1.4rem;font-weight:500;letter-spacing:-.02em}
.weg > p{margin-top:8px;color:var(--text);line-height:1.6}
@media (max-width:940px){.wege{grid-template-columns:1fr}}
/* ---------- Unterlagen: Checkliste zweispaltig ---------- */
.unterlagen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.unterlagen .kopf{margin-bottom:0}
.unterlagen__liste{grid-template-columns:1fr 1fr;gap:14px 28px;padding:clamp(22px,3vw,32px);border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie)}
.sek--weiss .unterlagen__liste{background:var(--grund);border-color:transparent}
@media (max-width:940px){.unterlagen{grid-template-columns:1fr}}
@media (max-width:640px){.unterlagen__liste{grid-template-columns:1fr}}
.buero__service{margin-top:18px}.buero__service a{color:var(--blau);font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.fuss__oben > div:last-child{grid-column:auto}}
.wege{grid-template-columns:repeat(2,minmax(0,1fr))}.weg{min-width:0}@media (max-width:940px){.wege{grid-template-columns:minmax(0,1fr)}}
/* Einspaltige Raster duerfen nie breiter werden als der Bildschirm */
@media (max-width:940px){
  .felder,.buero,.transparenz,.unterlagen,.einstieg,.themenliste,.rechner,.faq,.online,.kontakt__raster{grid-template-columns:minmax(0,1fr)}
  .feldkarte,.posten,.posten__zeile{min-width:0}
}
@media (max-width:420px){
  .titel,.posten__text b,.tblock h3,.buero__fakten dd{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}
@media (max-width:380px){.weg{padding:16px}.posten__los{display:none}.posten__text span{hyphens:auto;-webkit-hyphens:auto}}
/* Footer: Kontakt als zwei offizielle Kacheln oben rechts */
.fuss__aufruf{align-items:flex-start}
.fuss__links{display:grid;gap:22px;justify-items:start}
.fuss__kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:min(520px,100%)}
.fuss__kachel{padding:18px 20px;border-radius:var(--r-klein);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:border-color .25s,background-color .25s}
.fuss__kachel:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09)}
.fuss__kachel dt{font-size:.8rem;color:rgba(255,255,255,.55)}
.fuss__kachel dd{margin-top:6px}
.fuss__kachel a{display:block;font-size:1.12rem;font-weight:500;color:#fff}
.fuss__kachel em{display:block;margin-top:4px;font-style:normal;font-size:.84rem;color:rgba(255,255,255,.6)}
@media (max-width:940px){.fuss__kontakt{min-width:0;width:100%}}
@media (max-width:640px){.fuss__kontakt{grid-template-columns:1fr}.fuss__links .knopf{width:100%;justify-content:space-between}}

/* ============================================================
   Ratgeber: Artikelkarten mit Bereichs-Viertel, Lesetext, Rechnungen
   ============================================================ */
.kopf--zeile{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px}
.rkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rkarten--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.rkarte{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:280px;padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie);color:var(--ink);transition:border-color .3s}
.sek--weiss .rkarte{background:var(--grund);border-color:transparent}
.rkarte:hover{border-color:#C9D5EE}
.rkarte:hover b{color:var(--blau)}
.rkarte__viertel{position:absolute;right:-18px;top:-18px;width:110px;height:110px;background:var(--blau-zart);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.rkarte__bereich{font-size:.82rem;font-weight:500;color:var(--blau)}
.rkarte b{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;line-height:1.2;max-width:16ch;transition:color .2s}
.rkarte__kurz{color:var(--text);line-height:1.6}
.rkarte__fuss{margin-top:auto;padding-top:10px;font-size:.84rem;color:var(--text-2)}
@media (max-width:940px){.rkarten,.rkarten--zwei{grid-template-columns:minmax(0,1fr)}.rkarte{min-height:0}}

.artikel__meta{margin-top:14px;font-size:.86rem;color:rgba(255,255,255,.7)}
.artikel-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,6vw,88px);align-items:start}
.artikel{max-width:68ch;font-size:1.06rem;line-height:1.75;color:var(--text)}
.artikel h2{margin:44px 0 12px;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.artikel h2:first-child{margin-top:0}
.artikel p + p{margin-top:14px}
.artikel ul{display:grid;gap:10px;margin-top:12px;padding-left:0}
.artikel li{position:relative;padding-left:22px}
.artikel li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--blau)}
.artikel b{color:var(--ink);font-weight:500}
.artikel__tabelle{margin-top:16px;overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-klein)}
.artikel__tabelle table{width:100%;border-collapse:collapse;font-size:.96rem}
.artikel__tabelle th{text-align:left;font-size:.8rem;font-weight:500;color:var(--text-2);padding:12px 16px;background:var(--grund)}
.artikel__tabelle td{padding:12px 16px;border-top:1px solid var(--linie);color:var(--ink);vertical-align:top}
.artikel__tabelle td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
.artikel__rechnung{margin-top:16px;padding:6px 20px;border-radius:var(--r-klein);background:var(--grund)}
.artikel__rechnung div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linie)}
.artikel__rechnung div:last-child{border-bottom:0}
.artikel__rechnung dt{color:var(--text)}
.artikel__rechnung dd{font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.artikel__rechnung .summe dt,.artikel__rechnung .summe dd{color:var(--blau);font-weight:500}
.artikel__hinweis{margin-top:40px;padding-top:18px;border-top:1px solid var(--linie);font-size:.88rem;color:var(--text-2)}
.artikel__seite{position:sticky;top:110px}
.artikel__box{display:grid;gap:12px;justify-items:start;padding:24px;border-radius:var(--r-karte);color:#fff;
  background:radial-gradient(90% 80% at 100% 0%,rgba(78,140,247,.3),transparent 60%),var(--nacht)}
.artikel__box b{font-size:1.2rem;font-weight:500}
.artikel__box p{color:rgba(255,255,255,.72);line-height:1.55;font-size:.95rem}
.knopf--glas-dunkel{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.knopf--glas-dunkel .knopf__pfeil{background:rgba(255,255,255,.14)}
.knopf--glas-dunkel:hover{background:rgba(255,255,255,.14)}
.artikel__box .knopf{white-space:normal;text-align:left}
@media (max-width:940px){.artikel-raster{grid-template-columns:minmax(0,1fr)}.artikel__seite{position:static}}
@media (max-width:640px){.artikel{font-size:1rem}.artikel__tabelle td:nth-child(2){white-space:normal}}
.rkarte__viertel{width:84px;height:84px;right:-12px;top:-12px}.rkarte b{max-width:calc(100% - 60px);hyphens:auto;-webkit-hyphens:auto}
/* ---------- Karriere: Bereiche als Karten mit Viertel ---------- */
.kbereiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.kbereich{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-karte);background:var(--grund)}
.kbereich__viertel{width:64px;height:64px;background:var(--blau);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;margin-bottom:8px}
.kbereich h3{font-size:1.3rem;font-weight:500;letter-spacing:-.02em}
.kbereich p{color:var(--text);line-height:1.6}
.kbereich .knopf{margin-top:auto;align-self:flex-start}
.team__fuss a{color:var(--blau);font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (max-width:940px){.kbereiche{grid-template-columns:minmax(0,1fr)}}
/* Hero-Ueberschrift: Anfangsbuchstaben der vier Bereiche ergeben AVDP */
.hero h1 .h-init{font-weight:inherit;color:#A9C2FF}
.hero h1{max-width:17ch}

/* ============================================================
   Redesign 30.09.2026: Muster aus der TN-Designsprache und von ANBO,
   in AV&DP-Blau und mit dem Zeichen (vier Viertel) als Motiv.
   Karo-Raster, Handschrift-Notizen, Mega-Menue, Zeitleiste, Marker.
   ============================================================ */
:root{--hand:Caveat,"Segoe Print",cursive;--karo:#DCE3F0;--blau-tinte:#2A3F85}

/* ---------- Karo-Raster, laeuft aus einer Ecke aus ---------- */
.kariert{position:relative;isolation:isolate}
.kariert::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,var(--karo) 1px,transparent 1px),linear-gradient(to bottom,var(--karo) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 55% 65% at 0% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 55% 65% at 0% 0%,#000 30%,transparent 78%)}
.kariert--rechts::before{-webkit-mask-image:radial-gradient(ellipse 55% 65% at 100% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 55% 65% at 100% 0%,#000 30%,transparent 78%)}
/* auf dunklem Grund: helle Linien, sehr zart */
.kariert--hell::before{background-image:linear-gradient(to right,rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.09) 1px,transparent 1px)}

/* ---------- Handschrift-Notiz mit Pfeil, zeichnet sich beim Einblenden ---------- */
.notiz{position:absolute;z-index:3;font:600 clamp(21px,1.9vw,26px)/1.05 var(--hand);color:var(--blau);white-space:nowrap;pointer-events:none}
.notiz svg{position:absolute;width:56px;height:50px;overflow:visible}
.notiz path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ist-da .notiz path,.notiz.ist-da path{animation:kritzeln .9s var(--feder) .5s forwards}
.ist-da .notiz .spitze,.notiz.ist-da .spitze{animation-delay:1.3s;animation-duration:.35s}
.notiz--hell{color:#BFD2FF}
@keyframes kritzeln{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.notiz path{stroke-dashoffset:0;animation:none!important}}
@media (max-width:640px){.notiz svg{display:none}.notiz{font-size:21px}}

/* ---------- Mega-Menue: oeffnet beim Ueberfahren der vier Bereiche ---------- */
.kopfzeile__leiste{position:relative}
.nav-bereiche{display:flex;align-items:center;gap:inherit}
.mega{position:absolute;left:0;right:0;top:100%;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--feder),transform .3s var(--feder),visibility 0s .3s;z-index:60}
.nav-bereiche:hover .mega,.nav-bereiche:focus-within .mega{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--feder),transform .3s var(--feder)}
.mega.zu{opacity:0!important;visibility:hidden!important}
.mega__karte{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:10px;padding:10px;
  border-radius:var(--r-karte);background:#fff;border:1px solid var(--linie);box-shadow:0 30px 60px -30px rgba(11,16,32,.4);color:var(--ink)}
.mega__karte::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,var(--karo) 1px,transparent 1px),linear-gradient(to bottom,var(--karo) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 50% 70% at 0% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 50% 70% at 0% 0%,#000 25%,transparent 75%)}
.mega__liste{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px}
.mega__zeile{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:var(--r-klein);color:var(--ink);transition:background-color .2s}
.mega__zeile:hover,.mega__zeile:focus-visible{background:var(--grund)}
.mega__viertel{flex:none;width:44px;height:44px;border-radius:12px;background:var(--blau-zart);display:grid;place-items:center}
.mega__viertel i{display:block;width:26px;height:26px;background:var(--blau);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mega__zeile b{display:block;font-size:1.02rem;font-weight:500}
.mega__zeile b .nav-init{color:var(--blau)}
.mega__zeile span{display:block;margin-top:2px;font-size:.88rem;line-height:1.45;color:var(--text)}
.mega__zeile .pfeil-rechts{margin-left:auto;align-self:center;color:var(--text-2);transition:transform .25s var(--feder),color .2s}
.mega__zeile:hover .pfeil-rechts{transform:translateX(3px);color:var(--blau)}
.mega__kachel{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px 24px;border-radius:14px;color:#fff;
  background:radial-gradient(70% 80% at 100% 0%,rgba(78,140,247,.45),transparent 60%),linear-gradient(150deg,#1C2A5C 0%,#2A3F85 60%,#3B54A5 100%)}
.mega__kachel::after{content:"";position:absolute;right:-30px;bottom:-40px;width:180px;height:180px;z-index:-1;opacity:.1;
  background:#fff;-webkit-mask:url(../img/zeichen/ganz.png) center/contain no-repeat;mask:url(../img/zeichen/ganz.png) center/contain no-repeat}
.mega__kachel .notiz{position:static;color:#BFD2FF;transform:rotate(-4deg);transform-origin:left;margin-bottom:4px}
.mega__kachel h3{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.mega__kachel p{color:rgba(255,255,255,.78);font-size:.94rem}
.mega__kachel .knopf{align-self:flex-start;margin-top:6px}
.kopfzeile:not(.gescrollt) .mega__zeile b{color:var(--ink)}
@media (max-width:940px){.nav-bereiche{display:contents}.mega{display:none}}
@media (min-width:941px) and (max-width:1100px){.mega__liste{grid-template-columns:1fr}}

/* ---------- Leistungskarten innen im Kartenaufbau (Flaeche oben, Link unten) ---------- */
.feldkarte{background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 42%);border-color:var(--linie)}
.feldkarte--a,.feldkarte--v{background:linear-gradient(0deg,rgba(221,230,251,.55) 0%,#fff 42%)}
.feldkarte__text{gap:12px}
.feldkarte .posten__zeile{background:rgba(244,246,251,.9)}
.feldkarte a.feldkarte__mehr{display:flex;align-items:center;gap:8px;align-self:stretch;margin-top:14px;padding-top:16px;border-top:1px solid var(--linie);
  font-size:.95rem;font-weight:500;color:var(--blau)}
.feldkarte__mehr .pfeil-rechts{width:16px;height:16px;transition:transform .25s var(--feder)}
.feldkarte__mehr:hover .pfeil-rechts{transform:translateX(3px)}
.pfeil-rechts{width:16px;height:16px;flex:none}

/* ---------- Ablauf als Zeitleiste mit Bild daneben ---------- */
.zeit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.zeit__liste{position:relative;display:grid;gap:30px;margin-top:6px}
.zeit__liste::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:2px;background:var(--linie)}
.zeit__schritt{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;align-items:start}
.zeit__nr{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;font-weight:500;
  color:var(--blau);background:#fff;border:1.5px solid var(--blau)}
.zeit__schritt:first-child .zeit__nr{background:var(--blau);color:#fff}
.zeit__schritt h3{position:relative;display:inline-block;font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin-top:10px}
.zeit__schritt p{margin-top:6px;color:var(--text);line-height:1.6;max-width:46ch}
.notiz--schritt{position:relative;display:inline-block;margin-left:14px;transform:rotate(-5deg) translateY(-6px)}
.notiz--schritt svg{left:0;top:100%;width:100%;height:10px}
.zeit__fuss{justify-content:flex-start;margin-top:36px}
.zeit__bild{position:relative;border-radius:var(--r-rahmen);overflow:hidden;aspect-ratio:4/5;background:var(--karte-2);box-shadow:0 40px 80px -50px rgba(11,16,32,.55)}
.zeit__bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
@media (max-width:940px){.zeit{grid-template-columns:minmax(0,1fr)}.zeit__bild{aspect-ratio:16/10;order:-1}}
@media (max-width:640px){.notiz--schritt{display:block;width:max-content;margin:4px 0 0;transform:rotate(-4deg)}.notiz--schritt svg{display:block}}

/* ---------- Zeichen als Marker ---------- */
.marker{display:inline-block;flex:none;width:22px;height:22px;border-radius:7px;background:var(--blau);position:relative;vertical-align:-4px;margin-right:12px}
.marker::after{content:"";position:absolute;inset:4px;background:#fff;-webkit-mask:url(../img/zeichen/ganz.png) center/contain no-repeat;mask:url(../img/zeichen/ganz.png) center/contain no-repeat}
#transparenz .transparenz__liste dt{display:flex;align-items:flex-start;gap:0}
#transparenz .transparenz__liste dd{padding-left:34px}

/* ---------- Kontaktkarte: Wien-Foto in AV&DP-Blau eingefaerbt, Logo-Kachel ---------- */
.kontakt__bild img{filter:grayscale(1) contrast(1.08) brightness(.95)}
.kontakt::after{background:linear-gradient(100deg,rgba(20,31,74,.94) 0%,rgba(33,50,112,.86) 45%,rgba(59,84,165,.62) 100%)}
.kontakt__bild::after{content:"";position:absolute;inset:0;background:#3B54A5;mix-blend-mode:color;opacity:.85}
.kontakt__raster > div:first-child::before{content:"";display:block;width:52px;height:52px;margin-bottom:22px;border-radius:14px;
  background:rgba(255,255,255,.12) url(../img/zeichen/ganz.png) center/30px no-repeat;border:1px solid rgba(255,255,255,.28)}

/* ---------- Footer: Viertel vor den Bereichen, "Nach oben" in Handschrift ---------- */
.fuss__bereich{display:flex;align-items:center;gap:10px}
.fuss__bereich i{flex:none;width:18px;height:18px;background:#A9C2FF;opacity:.9;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fuss__hoch{position:relative;display:inline-flex;align-items:flex-end;gap:6px;font:600 1.35rem/1 var(--hand);color:#BFD2FF!important}
.fuss__hoch svg{width:26px;height:30px;overflow:visible}
.fuss__hoch path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fuss__recht{align-items:center}

/* ---------- Notiz am Foto, Hero-Karo ---------- */
.bento__foto{overflow:visible}
.bento__foto img{border-radius:var(--r-karte)}
.notiz--foto{left:auto;right:14px;top:-38px;transform:rotate(-5deg);color:var(--blau)}
.notiz--foto svg{left:-56px;top:14px;transform:scaleX(-1) rotate(10deg)}
.hero__rahmen.kariert::before{z-index:0;-webkit-mask-image:radial-gradient(ellipse 45% 55% at 0% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 45% 55% at 0% 0%,#000 25%,transparent 75%)}
.hero__rahmen.kariert{isolation:isolate}
.mega__zeile b .nav-init{display:inline;margin:0;font-size:inherit;line-height:inherit}


/* ===== Redesign Unterseiten: bereiche ===== */
/* Redesign Unterseiten: bereiche (wird am Ende in design.css zusammengefuehrt)
   Gilt fuer den Seitenkopf aller Unterseiten (.unterhero) und fuer die vier
   Bereichsseiten. Nur Aussehen und Anordnung, Inhalte kommen unveraendert
   aus werkzeuge/bereiche.py. Formsprache wie die Startseite: Radien 28/20/14,
   Blau-Rahmen mit feinem Karo, Wien in Blau, Viertel des Zeichens als Gesicht. */

/* ============================================================
   Seitenkopf aller Unterseiten: wie der Hero der Startseite
   Blau-Verlauf, Wien als Luminanzbild von unten, Karo aus der Ecke
   ============================================================ */
.unterhero__rahmen{
  background:radial-gradient(60% 80% at 85% 100%,rgba(255,255,255,.12),transparent 70%),
    linear-gradient(160deg,#2A3F85 0%,#3B54A5 45%,#6F9BE8 100%)}
.unterhero__rahmen::after{z-index:-2;
  background:url(../img/hero-wien-1280.jpg) 50% 88%/cover no-repeat;opacity:.34;mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 38%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 38%,#000 100%)}
.unterhero__rahmen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 45% 60% at 0% 0%,#000 25%,transparent 75%);
  mask-image:radial-gradient(ellipse 45% 60% at 0% 0%,#000 25%,transparent 75%)}
/* Unten ein Hauch Dunkel, damit Knoepfe vor dem Bild ruhig stehen */
.unterhero__inhalt{position:relative}
.unterhero .label--glas{padding:7px 14px}

/* ---------- Bereichskopf: eigenes Viertel traegt die Seite ---------- */
.unterhero--bereich .unterhero__rahmen{padding-bottom:clamp(64px,9vh,104px)}
.unterhero--bereich .unterhero__rahmen::before{
  -webkit-mask-image:radial-gradient(ellipse 50% 70% at 0% 0%,#000 25%,transparent 75%);
  mask-image:radial-gradient(ellipse 50% 70% at 0% 0%,#000 25%,transparent 75%)}
.bhero{align-items:center}
.bhero .label--glas{letter-spacing:.01em}

/* Kompass: die drei anderen Viertel treten zurueck, das eigene steht vorn */
.kompass{position:relative;isolation:isolate}
.kompass::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 72%)}
.kompass__feld img{opacity:.2}
.kompass__feld.ist-aktiv img{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 24px 34px rgba(11,16,32,.32))}
.kompass__feld:hover img{opacity:.5}
.kompass__feld.ist-aktiv:hover img{opacity:1}
.kompass__wort{color:rgba(255,255,255,.55)}
.kompass__feld.ist-aktiv .kompass__wort{color:#fff}
.kompass__feld.ist-aktiv .kompass__wort b{color:#BFD2FF}
/* keine Bewegung beim Ueberfahren, nur Helligkeit */
.kompass__feld:nth-child(n):hover img{transform:none}

/* ============================================================
   Einstieg: Aussage mit grossem Viertel, Anlaesse als Karte
   ============================================================ */
.einstieg__links{position:sticky;top:120px}
.einstieg__aussage{font-size:clamp(1.8rem,3.2vw,2.7rem);max-width:20ch}
.anlaesse__karte{margin-top:30px;padding:clamp(20px,2.4vw,26px);border-radius:var(--r-karte);border:1px solid var(--linie);
  background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 78%)}
.anlaesse__karte .anlaesse__titel{display:flex;align-items:center;margin-top:0;font-size:.95rem;color:var(--ink)}
.anlaesse__karte .marker{margin-right:10px}
.anlaesse__karte .anlaesse{margin-top:16px}
.anlaesse__karte .anlaesse li{background:#fff}

/* ============================================================
   Themen: Karten mit Blau-Verlauf oben, Linkzeile unten
   ============================================================ */
.tblock{background:linear-gradient(180deg,rgba(221,230,251,.5) 0%,#fff 200px);transition:border-color .3s}
.tblock:target,.tblock:focus-within{border-color:#C9D5EE}
.tblock__achten{background:rgba(244,246,251,.9);border:1px solid var(--linie)}
.tblock__achten h4{color:var(--ink);font-size:.9rem}
.tblock__fuss{align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--linie)}
.tblock__online{margin-left:4px}
.tblock__online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blau-hell);box-shadow:0 0 0 4px rgba(78,140,247,.18)}
.tindex a.ist-aktiv{border:1px solid var(--linie);box-shadow:none;padding:11px 13px}
.tindex a.ist-aktiv img{background:var(--blau)}

/* ============================================================
   Werkzeug: Viertel als stilles Wasserzeichen, ruhige Regler
   ============================================================ */
.werkzeug__zeichen{right:clamp(20px,4vw,72px);top:clamp(20px,4vw,64px);width:clamp(140px,15vw,210px);height:auto;opacity:.09;filter:brightness(0) invert(1)}
.werkzeug .regler input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:28px;margin-top:10px}
.werkzeug .regler input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.2)}
.werkzeug .regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:#fff;border:0;box-shadow:0 0 0 5px rgba(78,140,247,.35),0 6px 14px rgba(0,0,0,.35);transition:box-shadow .2s}
.werkzeug .regler input[type=range]:focus-visible{outline:none}
.werkzeug .regler input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--blau-hell)}
.werkzeug .regler input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.2)}
.werkzeug .regler input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--blau-hell)}
.werkzeug .regler input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(78,140,247,.35)}
.werkzeug .eingaben{background:rgba(255,255,255,.05)}
.werkzeug .regler + .regler{padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.werkzeug .eingaben{gap:20px}
.ergebnis__zahl{color:var(--blau-tinte)}

/* Vorsorgen: die staatliche Saeule ist die groesste */
.saeulen{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.saeule:first-child{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.saeule{border-radius:var(--r-karte)}

/* ============================================================
   Ablauf: Zeitleiste wie auf der Startseite, rechts das Viertel
   ============================================================ */
.zeit--bereich{align-items:center}
.zeit--bereich .kopf{margin-bottom:clamp(28px,4vw,44px)}
.zeit__liste--fuenf{gap:22px}
.zeit__liste--fuenf .zeit__schritt p{max-width:40ch}
.zeit__zeichen{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:4/5;
  background:radial-gradient(70% 60% at 85% 100%,rgba(255,255,255,.16),transparent 70%),linear-gradient(160deg,#2A3F85 0%,#3B54A5 45%,#6F9BE8 100%)}
.zeit__zeichen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 75%)}
.zeit__bild.zeit__zeichen img{width:56%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(11,16,32,.35));
  animation:schweben 7s ease-in-out infinite alternate}
.zeit__liste--fuenf ~ .zeit__fuss{margin-top:30px}

/* ============================================================
   Unterlagen: Karte mit Viertel in der Ecke
   ============================================================ */
.unterlagen__karte{position:relative;isolation:isolate;overflow:hidden;padding:clamp(22px,3vw,34px);border-radius:var(--r-karte);border:1px solid var(--linie);
  background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 70%)}
.unterlagen__karte .unterlagen__liste,.sek--weiss .unterlagen__karte .unterlagen__liste{padding:0;border:0;border-radius:0;background:none}

/* ============================================================
   Fragen: Logo-Marker vor den Gruppen
   ============================================================ */
.faq__gruppe h3{display:flex;align-items:center;font-size:.95rem;color:var(--ink);margin:0 0 14px 2px}
.faq__gruppe h3 .marker{margin-right:10px}
.sek--weiss .frage{background:var(--weiss)}

/* ============================================================
   Die anderen drei Bereiche: Karten wie auf der Startseite
   ============================================================ */
#bereiche .bereich{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:18px 14px;align-items:end;min-height:176px;padding:22px 22px 22px 24px;
  border:1px solid var(--linie);box-shadow:none;background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 70%);transition:border-color .3s}
#bereiche .bereich:hover{transform:none;box-shadow:none;border-color:#C9D5EE}
#bereiche .bereich img{grid-column:1;grid-row:1;width:52px;height:52px;padding:10px;border-radius:14px;background:var(--blau-zart)}
#bereiche .bereich > span:not(.anfrage__pfeil){grid-column:1;grid-row:2;align-self:end}
#bereiche .bereich b{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
#bereiche .bereich small{display:block;margin-top:4px;font-size:.92rem;line-height:1.45}
#bereiche .bereich .anfrage__pfeil{grid-column:2;grid-row:2;align-self:end;margin:0}
#bereiche .bereich:hover .anfrage__pfeil{background:var(--blau);transform:rotate(-45deg)}

/* ---------- Tablet und Handy ---------- */
@media (max-width:940px){
  .einstieg__links{position:static}
  .zeit__zeichen{aspect-ratio:16/9}
  .zeit__bild.zeit__zeichen img{width:auto;height:70%}
  .saeulen{grid-template-columns:1fr}
  #bereiche .bereich{min-height:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;padding:16px 18px}
  #bereiche .bereich img,#bereiche .bereich > span:not(.anfrage__pfeil),#bereiche .bereich .anfrage__pfeil{grid-row:1;align-self:center}
  #bereiche .bereich > span:not(.anfrage__pfeil){grid-column:2}
  #bereiche .bereich .anfrage__pfeil{grid-column:3}
  #bereiche .bereich b{font-size:1.1rem}
}
@media (max-width:640px){
  .unterhero__rahmen::after{opacity:.28}
  .zeit__zeichen{display:none}
  .anlaesse__karte{padding:18px}
  .werkzeug__zeichen{width:120px;opacity:.07}
  .tblock__fuss{padding-top:16px}
  #bereiche .bereich img{width:44px;height:44px;padding:8px}
  #bereiche .bereich .anfrage__pfeil{display:grid;width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){.zeit__bild.zeit__zeichen img{animation:none}}
/* Laengere Notiz steht in eigener Zeile unter dem Schritt-Titel */
.notiz--schritt.notiz--lang{display:block;width:max-content;margin:6px 0 12px;transform:rotate(-3deg)}


/* ===== Redesign Unterseiten: firma ===== */
/* Redesign Unterseiten: firma (wird am Ende in design.css zusammengefuehrt) */

/* ==========================================================
   Über uns
   ========================================================== */

/* Lebenslagen: Titel links, Einleitung rechts; eine dunkle Hochkant-Karte, vier helle daneben */
#fuer-wen .lagen__kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;column-gap:clamp(32px,6vw,96px)}
#fuer-wen .lagen__kopf .lead{max-width:52ch}
#fuer-wen .lagen{grid-template-columns:repeat(3,minmax(0,1fr))}
#fuer-wen .lagen .dienst{grid-column:auto;min-height:230px}
#fuer-wen .lagen .dienst:hover{transform:none;box-shadow:none}
#fuer-wen .lagen .dienst:nth-child(4){grid-column:1;grid-row:1 / span 2;position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(70% 60% at 100% 0%,rgba(78,140,247,.42),transparent 62%),linear-gradient(160deg,#1C2A5C 0%,#2A3F85 58%,#3B54A5 100%)}
#fuer-wen .lagen .dienst:nth-child(4)::after{content:"";position:absolute;right:-70px;top:-60px;width:280px;height:280px;z-index:-1;opacity:.09;
  background:#fff;-webkit-mask:url(../img/zeichen/ganz.png) center/contain no-repeat;mask:url(../img/zeichen/ganz.png) center/contain no-repeat}
#fuer-wen .lagen .dienst:nth-child(4) .dienst__icon{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
#fuer-wen .lagen .dienst:nth-child(4) h3{font-size:clamp(1.6rem,2.2vw,2rem);line-height:1.1;max-width:12ch}
#fuer-wen .lagen .dienst:nth-child(4) p{color:rgba(255,255,255,.8);max-width:30ch}

/* Vier Buchstaben: Zeilen links, das Zeichen aus vier Vierteln rechts; die Zeile hebt ihr Viertel hervor */
#name .buchstaben{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
#name .buchstaben__liste{display:grid;border-top:1px solid var(--linie)}
#name .buchstabe{display:flex;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid var(--linie);color:var(--ink);transition:color .2s}
#name .buchstabe .mega__viertel{width:52px;height:52px;border-radius:14px;background:var(--weiss);border:1px solid var(--linie);transition:background-color .25s,border-color .25s}
#name .buchstabe .mega__viertel i{width:28px;height:28px}
#name .buchstabe__text{flex:1;min-width:0}
#name .buchstabe b{display:block;font-size:1.15rem;font-weight:500;letter-spacing:-.015em}
#name .buchstabe small{display:block;margin-top:2px;font-size:.94rem;color:var(--text)}
#name .buchstabe .pfeil-rechts{color:var(--text-2);transition:color .2s}
#name .buchstabe:hover b,#name .buchstabe:focus-visible b{color:var(--blau)}
#name .buchstabe:hover .pfeil-rechts,#name .buchstabe:focus-visible .pfeil-rechts{color:var(--blau)}
#name .buchstabe:hover .mega__viertel,#name .buchstabe:focus-visible .mega__viertel{background:var(--blau-zart);border-color:var(--blau-zart)}

#name .buchstaben__bild{position:relative;border-radius:var(--r-rahmen);border:1px solid var(--linie);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(85% 75% at 50% 50%,rgba(221,230,251,.75) 0%,rgba(255,255,255,.9) 62%)}
#name .buchstaben__zeichen{width:min(66%,360px);aspect-ratio:1000/1002;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px)}
#name .buchstaben__zeichen i{display:block;background:var(--blau);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:background-color .35s var(--feder),opacity .35s var(--feder)}
/* Zeile im Blick: nur ihr Viertel bleibt kräftig (nur mit Maus, damit es auf dem Handy nicht hängen bleibt) */
@media (hover:hover){
#name .buchstaben:has(.buchstabe:hover) .buchstaben__zeichen i,
#name .buchstaben:has(.buchstabe:focus-visible) .buchstaben__zeichen i{background:#C9D5EE}
#name .buchstaben:has(.buchstabe--a:hover) .zeichen__a,#name .buchstaben:has(.buchstabe--a:focus-visible) .zeichen__a,
#name .buchstaben:has(.buchstabe--v:hover) .zeichen__v,#name .buchstaben:has(.buchstabe--v:focus-visible) .zeichen__v,
#name .buchstaben:has(.buchstabe--d:hover) .zeichen__d,#name .buchstaben:has(.buchstabe--d:focus-visible) .zeichen__d,
#name .buchstaben:has(.buchstabe--p:hover) .zeichen__p,#name .buchstaben:has(.buchstabe--p:focus-visible) .zeichen__p{background:var(--blau)}
}

@media (max-width:940px){
  #fuer-wen .lagen__kopf{grid-template-columns:minmax(0,1fr)}
  #fuer-wen .lagen{grid-template-columns:1fr 1fr}
  #fuer-wen .lagen .dienst:nth-child(4){grid-column:1 / -1;grid-row:auto;min-height:0}
  #fuer-wen .lagen .dienst:nth-child(5){grid-column:auto}
  #name .buchstaben{grid-template-columns:minmax(0,1fr)}
  #name .buchstaben__bild{order:-1;aspect-ratio:16/9}
  #name .buchstaben__zeichen{width:auto;height:74%}
}
@media (max-width:640px){
  #fuer-wen .lagen{grid-template-columns:1fr}
  #fuer-wen .lagen .dienst,#fuer-wen .lagen .dienst:nth-child(4){grid-column:auto;min-height:0}
  #fuer-wen .lagen .dienst:nth-child(4) h3{font-size:1.1rem;max-width:none}
  #fuer-wen .lagen .dienst:nth-child(4)::after{width:150px;height:150px;right:-40px;top:-40px}
  #name .buchstaben__bild{aspect-ratio:16/10}
  #name .buchstabe{padding:14px 2px;gap:14px}
  #name .buchstabe .mega__viertel{width:44px;height:44px}
  #name .buchstabe b{font-size:1.05rem}
  #name .buchstabe small{font-size:.88rem}
}

/* ==========================================================
   Kontakt
   ========================================================== */
#buero .buero{align-items:center}
#buero .buero__bild{position:relative;margin:0;border-radius:var(--r-rahmen);aspect-ratio:4/3.4;background:var(--karte-2);box-shadow:0 40px 80px -50px rgba(11,16,32,.55)}
#buero .buero__bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;border-radius:var(--r-rahmen)}
#buero .buero__bild .notiz--foto{top:-40px;right:22px}
#buero .buero__online{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(56px,7vw,96px);padding:clamp(24px,3vw,40px);border-radius:var(--r-rahmen);border:1px solid var(--linie);
  background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 58%)}
#buero .buero__online .buero__titel{font-size:clamp(1.4rem,2vw,1.7rem)}
#buero .buero__online .posten{grid-template-columns:minmax(0,1fr);margin-top:0}
#buero .buero__online .posten__zeile{min-width:0}
#buero .buero__online .posten__zeile{height:100%;background:var(--weiss);border:1px solid var(--linie);transition:border-color .25s,background-color .25s}
#buero .buero__online a.posten__zeile:hover{transform:none;background:var(--weiss);border-color:#C9D5EE}
@media (max-width:940px){
  #buero .buero__bild{aspect-ratio:16/10;order:-1;margin-top:34px}
  #buero .buero__online{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  #buero .buero__bild .notiz--foto{top:-30px;right:12px}
}

/* ==========================================================
   Impressum und Datenschutz: Satzspiegel mit Randspalte
   ========================================================== */
#recht .rechtstext{max-width:1040px;display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);column-gap:0;
  padding:clamp(28px,5vw,64px);border-radius:var(--r-rahmen);background:var(--weiss);border:1px solid var(--linie)}
#recht .rechtstext > *{grid-column:2;max-width:calc(68ch + 56px);padding-left:clamp(24px,4vw,56px)}
#recht .rechtstext > h2{padding-left:0;padding-right:20px}
#recht .rechtstext > .fakten{max-width:none;padding-left:0;margin-left:clamp(24px,4vw,56px)}
#recht .rechtstext > h2{grid-column:1;display:flex;align-items:flex-start;gap:0;margin:0;padding-top:34px;font-size:1.12rem;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
#recht .rechtstext > h2 ~ h2,#recht .rechtstext > h2 ~ h2 + *{border-top:1px solid var(--linie)}
#recht .rechtstext > h2 + *{padding-top:34px}
#recht .rechtstext > h2:first-child,#recht .rechtstext > h2:first-child + *{padding-top:0}
#recht .rechtstext > .lead + h2,#recht .rechtstext > .lead + h2 + *{padding-top:0}
#recht .rechtstext > h2::before{content:"";flex:none;width:18px;height:18px;margin:2px 12px 0 0;border-radius:6px;
  background:var(--blau) url(../img/zeichen/ganz.png) center/12px no-repeat}
#recht .rechtstext > p.lead{grid-column:1 / -1;max-width:none;padding-left:0;margin-bottom:40px;padding-bottom:36px;border-bottom:1px solid var(--linie);
  font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink);letter-spacing:-.01em}
#recht .rechtstext p + p{margin-top:12px}
#recht .rechtstext a{text-decoration:underline;text-decoration-color:rgba(59,84,165,.35);text-underline-offset:3px}
#recht .rechtstext a:hover{text-decoration-color:currentColor}
#recht .rechtstext ul{list-style:none;padding-left:0;gap:8px;margin:12px 0 14px}
#recht .rechtstext ul li{position:relative;padding-left:22px}
#recht .rechtstext ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:3px;background:var(--blau)}
#recht .fakten{gap:0;margin:22px 0 4px;border-radius:var(--r-karte);border:1px solid var(--linie);overflow:hidden;background:var(--grund)}
#recht .fakten div{grid-template-columns:190px 1fr;gap:16px;padding:14px 20px;border-top:1px solid var(--linie)}
#recht .fakten div:first-child{border-top:0}
#recht .fakten dt{font-size:.92rem;color:var(--text-2);font-weight:400}
#recht .fakten dd{color:var(--ink);line-height:1.55}
@media (max-width:860px){
  #recht .rechtstext{grid-template-columns:minmax(0,1fr)}
  #recht .rechtstext > h2{grid-column:1;padding-top:30px;margin-bottom:12px}
  #recht .rechtstext > h2 ~ h2 + *{border-top:0}
  #recht .rechtstext > h2 + *{padding-top:0}
  #recht .rechtstext > *{grid-column:1;padding-left:0}
  #recht .rechtstext > .fakten{margin-left:0}
  #recht .fakten div{grid-template-columns:1fr;gap:2px;padding:12px 16px}
}
@media (max-width:640px){
  #recht .rechtstext{padding:22px 18px;border-radius:22px}
  #recht .rechtstext > p.lead{margin-bottom:8px;padding-bottom:22px}
}


/* ===== Redesign Unterseiten: service ===== */
/* Redesign Unterseiten: service und karriere (wird am Ende in design.css zusammengefuehrt).
   Alle Regeln haengen an sv-* (service.html) oder kr-* (karriere.html),
   damit die gemeinsamen Bausteine (.tblock, .tindex, .kbereich) auf den
   Bereichsseiten unberuehrt bleiben. */

/* ============================================================
   SERVICE
   ============================================================ */

/* ---------- Anliegen: Verzeichnis als ruhige Karte, Bloecke zweispaltig ---------- */
@media (min-width:941px){.sv-aufgaben .themenliste{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}}
.sv-aufgaben .tindex__titel{margin-bottom:22px}
.sv-aufgaben .tindex__liste{display:grid;gap:4px;padding:8px;border-radius:var(--r-karte);background:var(--weiss);border:1px solid var(--linie)}
.sv-aufgaben .tindex a{padding:11px 12px;line-height:1.35}
.sv-aufgaben .tindex a img{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--grund);filter:grayscale(1);opacity:.75}
.sv-aufgaben .tindex a:hover{background:var(--grund)}
.sv-aufgaben .tindex a.ist-aktiv{background:linear-gradient(90deg,rgba(221,230,251,.7),rgba(221,230,251,.25));box-shadow:none;color:var(--ink)}
.sv-aufgaben .tindex a.ist-aktiv img{background:var(--nacht);filter:none;opacity:1}

.sv-aufgaben .tblock{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(221,230,251,.45) 0%,#fff 38%);border:1px solid var(--linie)}
.sv-aufgaben .tblock__kopf .dienst__icon{width:52px;height:52px;border-radius:var(--r-klein)}
.sv-aufgaben .tblock__achten{background:var(--weiss);border:1px solid var(--linie);padding:22px 22px 24px}
.sv-aufgaben .tblock__achten h4{display:flex;align-items:center;font-size:.95rem;font-weight:500;color:var(--ink);margin-bottom:16px}
.sv-aufgaben .tblock__achten .marker{width:20px;height:20px;border-radius:6px;margin-right:10px;vertical-align:0}
.sv-aufgaben .tblock__achten .haken{gap:12px}
.sv-aufgaben .tblock__achten .haken li{font-size:.97rem}
.sv-aufgaben .tblock__hinweis{font-size:.95rem;color:var(--text-2);padding-top:18px;border-top:1px solid var(--linie)}

@media (min-width:1100px){
  .sv-aufgaben .tblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);column-gap:clamp(24px,3vw,40px);align-content:start;
    grid-template-areas:"kopf kopf" "text achten" "hinweis achten" "fuss fuss"}
  .sv-aufgaben .tblock__kopf{grid-area:kopf}
  .sv-aufgaben .tblock__text{grid-area:text}
  .sv-aufgaben .tblock__achten{grid-area:achten;align-self:start}
  .sv-aufgaben .tblock__hinweis{grid-area:hinweis;align-self:start}
  .sv-aufgaben .tblock__fuss{grid-area:fuss}
  .sv-aufgaben .tblock__text:not(.tblock__hinweis){font-size:1rem}
}

/* ---------- Ablauf: Zeitleiste mit Foto aus der Kundenbetreuung ---------- */
.sv-ablauf .zeit__bild img{object-position:50% 30%}
@media (max-width:940px){.sv-ablauf .zeit__bild img{object-position:50% 18%}}

/* ============================================================
   KARRIERE
   ============================================================ */

/* ---------- Bereiche: ungleiche Kacheln mit Logo-Viertel ---------- */
.kr-bereiche .kbereiche{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto}
.kr-bereiche .kbereich{background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 46%);border:1px solid var(--linie);gap:12px;padding:clamp(24px,2.8vw,34px)}
.kr-bereiche .kbereich h3{font-size:clamp(1.3rem,1.9vw,1.6rem);letter-spacing:-.025em;line-height:1.15;max-width:22ch}
.kr-bereiche .kbereich p{max-width:48ch}
.kr-bereiche .kbereich__viertel{margin:0}
.kr-bereiche .kbereich .knopf{margin-top:auto}

/* A: grosse Kachel links, Viertel unten innen wie auf der Startseite */
.kr-bereiche .kbereich--a{grid-row:span 2;background:linear-gradient(0deg,rgba(221,230,251,.6) 0%,#fff 48%)}
.kr-bereiche .kbereich--a .kbereich__viertel{order:9;align-self:flex-end;width:clamp(150px,16vw,210px);height:auto;aspect-ratio:1;margin-top:clamp(20px,3vw,36px)}
.kr-bereiche .kbereich--a h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:4px}
.kr-bereiche .kbereich--a .knopf{margin-top:14px}

/* D und P: Text links, Viertel rechts oben */
.kr-bereiche .kbereich--d,.kr-bereiche .kbereich--p{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-content:start}
.kr-bereiche .kbereich--d > *,.kr-bereiche .kbereich--p > *{grid-column:1}
.kr-bereiche .kbereich--d .kbereich__viertel,.kr-bereiche .kbereich--p .kbereich__viertel{grid-column:2;grid-row:1 / span 3;width:clamp(72px,7vw,96px);height:auto;aspect-ratio:1}
.kr-bereiche .kbereich--d .knopf,.kr-bereiche .kbereich--p .knopf{margin-top:8px;justify-self:start}

@media (max-width:940px){
  .kr-bereiche .kbereiche{grid-template-columns:minmax(0,1fr)}
  .kr-bereiche .kbereich--a{grid-row:auto}
  .kr-bereiche .kbereich--a .kbereich__viertel{order:0;align-self:flex-start;width:84px;margin:0 0 4px}
  .kr-bereiche .kbereich--a{background:linear-gradient(180deg,rgba(221,230,251,.55) 0%,#fff 46%)}
}
@media (max-width:640px){
  .kr-bereiche .kbereich{padding:20px 18px 22px}
  .kr-bereiche .kbereich--a .kbereich__viertel{width:64px}
  .kr-bereiche .kbereich--d .kbereich__viertel,.kr-bereiche .kbereich--p .kbereich__viertel{width:52px}
  .kr-bereiche .kbereich--d,.kr-bereiche .kbereich--p{column-gap:14px}
}

/* ---------- Was dich erwartet: Marker vor den Punkten ---------- */
.kr-erwartet .transparenz__liste dt{display:flex;align-items:flex-start}
.kr-erwartet .transparenz__liste dd{padding-left:34px}

/* ---------- Bewerbung: Zeitleiste, zwei Portraits als Bildpaar ---------- */
.kr-bild{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 40px 80px -50px rgba(11,16,32,.45)}
.kr-bild img{border-radius:var(--r-karte);object-position:50% 20%}
.kr-bild img:last-child{margin-top:clamp(28px,5vw,64px);height:calc(100% - clamp(28px,5vw,64px))}
.kr-bild img:first-child{height:calc(100% - clamp(28px,5vw,64px))}
@media (max-width:940px){
  .kr-bild{aspect-ratio:16/11}
  .kr-bild img:first-child,.kr-bild img:last-child{margin-top:0;height:100%}
}

/* ---------- Handy: Verzeichnis wieder als Chips, Notiz mit Luft ---------- */
@media (max-width:940px){
  .sv-aufgaben .tindex__liste{display:flex;flex-wrap:wrap;gap:6px;padding:0;background:none;border:0}
}
@media (max-width:640px){
  .sv-ablauf .notiz--schritt,.kr-ablauf .notiz--schritt{margin:6px 0 8px}
}


/* ===== Redesign Unterseiten: ratgeber ===== */
/* Redesign Unterseiten: ratgeber (wird am Ende in design.css zusammengefuehrt)
   Gilt fuer ratgeber.html, die drei Artikel und die Ratgeber-Karten der Startseite (#ratgeber).
   Motiv: das Zeichen als Bereichssymbol. Das ganze Zeichen zart, das Viertel des Bereichs
   (D wie Darlehen, V wie Vorsorgen) in Blau an seiner echten Stelle. */

/* ---------- Artikelkarten (Startseite, Uebersicht, Weiterlesen) ---------- */
.rkarte{--zs:40px;--zp:clamp(22px,2.6vw,30px);gap:12px;min-height:0;padding:var(--zp);
  background:linear-gradient(0deg,rgba(221,230,251,.55) 0%,#fff 46%);border:1px solid var(--linie);transition:border-color .3s}
.sek--weiss .rkarte{background:linear-gradient(0deg,rgba(221,230,251,.55) 0%,#fff 46%);border-color:var(--linie)}
.rkarte:hover{border-color:#C9D5EE}
/* ganzes Zeichen zart, darueber das Bereichs-Viertel in Blau */
.rkarte::before{content:"";position:absolute;left:var(--zp);top:var(--zp);width:var(--zs);height:var(--zs);background:var(--blau-zart);
  -webkit-mask:url(../img/zeichen/ganz.png) center/100% 100% no-repeat;mask:url(../img/zeichen/ganz.png) center/100% 100% no-repeat}
.rkarte .rkarte__viertel{right:auto;top:var(--zp);left:var(--zp);width:calc(var(--zs) / 2);height:calc(var(--zs) / 2);background:var(--blau)}
.rkarte--v .rkarte__viertel,.rkarte--p .rkarte__viertel{left:calc(var(--zp) + var(--zs) / 2)}
.rkarte--d .rkarte__viertel,.rkarte--p .rkarte__viertel{top:calc(var(--zp) + var(--zs) / 2)}
.rkarte__bereich{display:flex;align-items:center;min-height:var(--zs);padding-left:calc(var(--zs) + 14px);margin-bottom:8px}
.rkarte b{max-width:none;font-size:1.4rem;line-height:1.18;hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
.rkarte__kurz{font-size:.97rem}
.rkarte__fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--linie);font-size:.86rem;color:var(--text-2)}
.rkarte__fuss .pfeil-rechts{color:var(--blau)}
.rkarte{row-gap:12px}
.rkarte__kurz{margin-bottom:10px}

/* Uebersicht: groessere Karten, Zeichen in einer eigenen Flaeche oben */
.rkarten--gross{gap:var(--gap)}
.rkarten--gross .rkarte{--zs:128px;--flaeche:212px;padding-top:calc(var(--flaeche) + 28px);min-height:520px}
.rkarten--gross .rkarte::after{content:"";position:absolute;z-index:-1;left:8px;right:8px;top:8px;height:var(--flaeche);border-radius:var(--r-klein);
  background-color:var(--grund);
  background-image:linear-gradient(to right,var(--karo) 1px,transparent 1px),linear-gradient(to bottom,var(--karo) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px}
.rkarten--gross .rkarte{isolation:isolate}
.rkarten--gross .rkarte::before{left:calc(50% - var(--zs) / 2);top:calc(8px + (var(--flaeche) - var(--zs)) / 2)}
.rkarten--gross .rkarte .rkarte__viertel{left:calc(50% - var(--zs) / 2);top:calc(8px + (var(--flaeche) - var(--zs)) / 2)}
.rkarten--gross .rkarte--v .rkarte__viertel,.rkarten--gross .rkarte--p .rkarte__viertel{left:50%}
.rkarten--gross .rkarte--d .rkarte__viertel,.rkarten--gross .rkarte--p .rkarte__viertel{top:calc(8px + var(--flaeche) / 2)}
.rkarten--gross .rkarte__bereich{padding-left:0;min-height:0;margin-bottom:2px}
.rkarten--gross .rkarte b{font-size:clamp(1.4rem,1.9vw,1.6rem)}

@media (max-width:940px){
  .rkarten--gross .rkarte{--zs:96px;--flaeche:160px;min-height:0}
}
@media (max-width:640px){
  .rkarte{--zs:34px}
  .rkarte b{font-size:1.25rem}
  .rkarten--gross .rkarte{--zs:80px;--flaeche:128px}
  .rkarten--gross .rkarte b{font-size:1.3rem}
}

/* ---------- Artikel: Satzspiegel und Lesefluss ---------- */
#text .artikel-raster{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,6vw,96px)}
.artikel{max-width:65ch;font-size:1.075rem;line-height:1.78;counter-reset:abschnitt}
.artikel > * + *{margin-top:18px}
.artikel p + p{margin-top:18px}
.artikel h2{counter-increment:abschnitt;display:flex;align-items:baseline;gap:14px;margin:64px 0 0;font-size:clamp(1.4rem,2.2vw,1.75rem);text-wrap:balance}
.artikel h2:first-child{margin-top:0}
.artikel h2 + *{margin-top:14px}
.artikel b{font-weight:500}

/* Aufzaehlungen als ruhige Zeilen mit Rahmen rundum */
.artikel ul{gap:8px;margin-top:18px}
.artikel li{padding:14px 18px 14px 44px;border:1px solid var(--linie);border-radius:var(--r-klein);background:#fff;line-height:1.65}
.artikel li::before{left:20px;top:calc(14px + .825em - 4px);width:8px;height:8px;border-radius:2px}

/* Tabelle */
.artikel__tabelle{margin-top:20px;border-radius:var(--r-karte);background:#fff}
.artikel__tabelle table{font-size:.97rem}
.artikel__tabelle th{padding:14px 18px;background:var(--grund);font-size:.8rem}
.artikel__tabelle td{padding:15px 18px}
.artikel__tabelle td:first-child{font-weight:500}
.artikel__tabelle td:last-child{color:var(--text)}

/* Beispielrechnung als Beleg mit hervorgehobener Summe */
.artikel__rechnung{margin-top:20px;padding:8px 8px 8px;border-radius:var(--r-karte);background:#fff;border:1px solid var(--linie)}
.artikel__rechnung div{padding:13px 16px;border-bottom:1px dashed var(--linie)}
.artikel__rechnung div:nth-last-child(2){border-bottom:0}
.artikel__rechnung dt{line-height:1.5}
.artikel__rechnung dd{line-height:1.5}
.artikel__rechnung .summe{align-items:center;margin-top:6px;padding:16px;border:0;border-radius:var(--r-klein);background:var(--blau-zart)}
.artikel__rechnung .summe dt{color:var(--blau-tinte)}
.artikel__rechnung .summe dd{color:var(--blau);font-size:1.3rem;letter-spacing:-.01em}

/* Hinweis am Ende als Infokasten mit Zeichen-Marker */
.artikel__hinweis{display:flex;align-items:flex-start;margin-top:56px;padding:18px 20px;border:1px solid var(--linie);border-radius:var(--r-klein);
  background:var(--grund);line-height:1.6}
.artikel__hinweis .marker{margin-top:1px}

/* Seitenbox: blaue Kachel wie im Menue, Bereichs-Viertel als Wasserzeichen */
.artikel__seite{top:120px}
.artikel__box{position:relative;overflow:hidden;isolation:isolate;gap:14px;padding:28px 26px 26px;
  background:radial-gradient(70% 80% at 100% 0%,rgba(78,140,247,.45),transparent 60%),linear-gradient(150deg,#1C2A5C 0%,#2A3F85 60%,#3B54A5 100%)}
.artikel__zeichen{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.artikel__zeichen i{display:block;width:28px;height:28px;background:#fff;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.artikel__box::after{content:"";position:absolute;z-index:-1;right:-36px;bottom:-40px;width:190px;height:190px;opacity:.1;background:#fff;
  -webkit-mask:url(../img/zeichen/ganz.png) center/contain no-repeat;mask:url(../img/zeichen/ganz.png) center/contain no-repeat}
.artikel__box b{font-size:1.45rem;letter-spacing:-.02em;line-height:1.15}
.artikel__box p{color:rgba(255,255,255,.8);margin-bottom:6px}
.artikel__box .knopf{width:100%;justify-content:space-between;line-height:1.3}
.artikel__box .knopf--glas-dunkel{border-color:rgba(255,255,255,.3)}

@media (max-width:940px){
  #text .artikel-raster{grid-template-columns:minmax(0,1fr)}
  .artikel{max-width:65ch}
}
@media (max-width:640px){
  .artikel{font-size:1.02rem;line-height:1.72}
  .artikel h2{margin-top:48px;gap:12px}
  .artikel li{padding:13px 14px 13px 36px}
  .artikel li::before{left:16px;top:calc(13px + .825em - 4px)}
  .artikel__rechnung div{padding:12px 12px}
  .artikel__rechnung .summe{padding:14px 12px}
  .artikel__rechnung .summe dd{font-size:1.15rem}
  /* Tabelle wird zu Zeilen: Posten oben, Satz und "Faellt an" darunter */
  .artikel__tabelle{overflow:visible}
  .artikel__tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .artikel__tabelle table,.artikel__tabelle tbody{display:block}
  .artikel__tabelle tr{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:14px 16px;border-top:1px solid var(--linie)}
  .artikel__tabelle tr:first-child{border-top:0}
  .artikel__tabelle td{padding:0;border:0}
  .artikel__tabelle td:first-child{grid-column:1 / -1;margin-bottom:4px}
  .artikel__tabelle td:nth-child(2){font-size:.93rem;color:var(--text)}
  .artikel__tabelle td:last-child{justify-self:end;align-self:start;padding:1px 10px;border-radius:999px;background:var(--blau-zart);color:var(--blau);font-size:.8rem;font-weight:500;white-space:nowrap}
}