/* 2E FACTUM GROUP – Gestaltungsbasis · Stand 2026-10-13
   Drei Geschäftsbereiche: Engineering (Planblau), Ausbau & Fassade (Ocker), Tax (Petrol).
   Schriften selbst gehostet (SIL OFL): Newsreader (Überschriften), Inter (Text), IBM Plex Mono (Planbezeichnungen).
   Keine externen Quellen, keine Cookies. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("../assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --nacht:#10273D;--nacht-2:#14304C;--nacht-3:#1C3A58;
  --tinte:#17222D;--grau-1:#505C68;--grau-2:#6E7884;
  --gips:#ECEEEC;       /* Seitengrund: Gipsplatte, kühl */
  --kalk:#F8F9F7;       /* helle Flächen */
  --linie:#CDD2D2;--linie-hell:#DFE3E2;
  --eng:#2F5E92;--eng-hell:#E1E9F2;--eng-dunkel:#8FB5E0;   /* Engineering – Planblau */
  --aus:#8C6A22;--aus-hell:#F1E9D6;--aus-dunkel:#D2AE5F;   /* Ausbau & Fassade – Ocker */
  --tax:#1D5B64;--tax-hell:#DDEBEC;--tax-dunkel:#6DB3BE;   /* Tax – Petrol */
  --akzent:var(--nacht);--akzent-hell:var(--kalk);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --breite:1200px;--rand:clamp(20px,4vw,40px);
  --t-schnell:.18s;--t-ruhig:.7s;--kurve:cubic-bezier(.2,.7,.2,1);
}
body[data-bereich="eng"]{--akzent:var(--eng);--akzent-hell:var(--eng-hell)}
body[data-bereich="aus"]{--akzent:var(--aus);--akzent-hell:var(--aus-hell)}
body[data-bereich="tax"]{--akzent:var(--tax);--akzent-hell:var(--tax-hell)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--tinte);background:var(--gips);-webkit-font-smoothing:antialiased;font-feature-settings:"cv05","cv11"}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color var(--t-schnell)}
a:hover{text-decoration-color:currentColor}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--nacht);text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:420;letter-spacing:-.018em;line-height:1.04}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.95rem,3.4vw,2.9rem);line-height:1.08}
h3{font-size:1.18rem;font-weight:620;letter-spacing:-.01em;line-height:1.25}
h4{font-size:1.02rem;font-weight:620}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.55;color:var(--grau-1);max-width:38em}
.hülle{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:820px}
.leise{color:var(--grau-1);font-size:.95rem}
.auge{display:block;font-size:.86rem;font-weight:600;color:var(--akzent);margin-bottom:.9rem;letter-spacing:.01em}
.plan{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--grau-2)}
.nurlesbar{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nurlesbar:focus{left:12px;top:12px;width:auto;height:auto;z-index:100;background:#fff;padding:10px 14px;color:var(--nacht)}
:focus-visible{outline:2px solid var(--eng);outline-offset:3px;border-radius:2px}
.dunkel :focus-visible,.hero :focus-visible,.fuss :focus-visible,.ausgang :focus-visible{outline-color:#fff}

/* Hinweisleiste */
.arbeitsstand{background:var(--nacht);color:rgba(255,255,255,.78);font-size:.8rem;text-align:center;padding:6px 16px;border-bottom:1px solid rgba(255,255,255,.08)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(236,238,236,.9);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color var(--t-schnell),box-shadow var(--t-schnell)}
.kopf.kompakt{border-bottom-color:var(--linie);box-shadow:0 6px 18px -14px rgba(11,31,51,.45)}
.kopf .hülle{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.marke{display:flex;align-items:center;gap:13px;color:var(--nacht);font-weight:700;letter-spacing:.07em;font-size:1rem;line-height:1.05;text-decoration:none}
.marke .signet{width:42px;height:42px;flex:none;transition:transform var(--t-ruhig) var(--kurve)}
.kopf.kompakt .marke .signet{transform:scale(.88)}
.marke small{display:block;font-weight:500;letter-spacing:.02em;font-size:.72rem;color:var(--grau-1);margin-top:5px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav>ul>li{position:relative}
.nav>ul>li>a{display:block;padding:10px 13px;font-weight:520;font-size:.95rem;color:var(--tinte);text-decoration:none;border-radius:6px;position:relative}
.nav>ul>li>a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--nacht);transform:scaleX(0);transform-origin:left;transition:transform var(--t-schnell) var(--kurve)}
.nav>ul>li>a:hover::after,.nav>ul>li.aktiv>a::after{transform:scaleX(1)}
.nav>ul>li[data-nav="eng"]>a::after{background:var(--eng)}
.nav>ul>li[data-nav="aus"]>a::after{background:var(--aus)}
.nav>ul>li[data-nav="tax"]>a::after{background:var(--tax)}
.nav .cta>a{background:var(--nacht);color:#fff;margin-left:10px;padding:11px 18px}
.nav .cta>a::after{display:none}
.nav .cta>a:hover{background:var(--nacht-2)}
.untermenue{position:absolute;top:calc(100% + 6px);left:0;min-width:300px;background:var(--kalk);border:1px solid var(--linie);box-shadow:0 18px 40px -24px rgba(11,31,51,.5);padding:10px;display:none;z-index:60}
.untermenue.breit{min-width:520px;display:none;grid-template-columns:1fr 1fr;gap:4px 12px}
.nav>ul>li:hover>.untermenue,.nav>ul>li:focus-within>.untermenue{display:block}
.nav>ul>li:hover>.untermenue.breit,.nav>ul>li:focus-within>.untermenue.breit{display:grid}
.untermenue a{display:block;padding:7px 10px;font-size:.92rem;color:var(--tinte);text-decoration:none;border-left:2px solid transparent}
.untermenue a:hover{background:#fff;border-left-color:var(--akzent-m,var(--nacht))}
.untermenue .gruppe{font-size:.8rem;font-weight:600;color:var(--grau-2);padding:10px 10px 2px}
.untermenue .spalte{display:flex;flex-direction:column}
.nav [data-nav="eng"] .untermenue{--akzent-m:var(--eng)}
.nav-schalter{display:none;background:none;border:1px solid var(--linie);padding:8px 14px;font:inherit;font-size:.9rem;color:var(--nacht);cursor:pointer}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--nacht);color:#fff;font-weight:600;font-size:1rem;border:1px solid var(--nacht);text-decoration:none;transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.knopf:hover{background:var(--nacht-2)}
.knopf svg{width:16px;height:16px;transition:transform var(--t-schnell) var(--kurve)}
.knopf:hover svg{transform:translateX(3px)}
.knopf.hell{background:#fff;color:var(--nacht);border-color:#fff}
.knopf.hell:hover{background:var(--gips)}
.knopf.rahmen{background:transparent;color:inherit;border-color:currentColor}
.knopf.rahmen:hover{background:rgba(255,255,255,.08)}

/* ---------- Startseite: Hero mit Schriftfeld ---------- */
.hero{background:var(--nacht);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E")}
.hero .hülle{padding-top:clamp(56px,9vw,112px);padding-bottom:0}
.hero .absender{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:rgba(255,255,255,.62);margin:0 0 28px}
.hero h1{color:#fff;font-size:clamp(2.9rem,8.2vw,7rem);line-height:.98;font-weight:380;letter-spacing:-.03em;margin:0 0 .35em}
.hero h1 span{display:block;padding-left:.45em;position:relative}
.hero h1 span::before{content:"";position:absolute;left:0;top:.18em;bottom:.14em;width:.09em;background:var(--strich)}
.hero h1 .z-eng{--strich:var(--eng-dunkel)}
.hero h1 .z-aus{--strich:var(--aus-dunkel)}
.hero h1 .z-tax{--strich:var(--tax-dunkel)}
.hero .lead{color:rgba(255,255,255,.82);max-width:34em;font-size:clamp(1.12rem,1.6vw,1.32rem)}
.hero .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0}

/* Schriftfeld (Plankopf) – drei gleichwertige Einstiege */
.schriftfeld{margin-top:clamp(56px,8vw,96px);border-top:1px solid rgba(255,255,255,.28);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.schriftfeld .feld{position:relative;display:flex;flex-direction:column;padding:26px 28px 30px;color:#fff;text-decoration:none;border-left:1px solid rgba(255,255,255,.18);min-height:260px;transition:background var(--t-schnell)}
.schriftfeld .feld:first-child{border-left:0;padding-left:0}
.schriftfeld .feld::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--strich);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--kurve)}
.schriftfeld .feld:first-child::before{left:0}
.schriftfeld .feld:hover::before,.schriftfeld .feld:focus-visible::before{transform:scaleX(1)}
.schriftfeld .feld:hover{background:rgba(255,255,255,.03)}
.schriftfeld .kennung{font-family:var(--mono);font-size:.74rem;color:var(--strich);letter-spacing:.06em;margin-bottom:18px}
.schriftfeld h2{color:#fff;font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:.4em}
.schriftfeld p{color:rgba(255,255,255,.76);font-size:.98rem;margin:0 0 18px;max-width:28em}
.schriftfeld ul{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px dashed rgba(255,255,255,.2);font-size:.88rem;color:rgba(255,255,255,.68);display:flex;flex-wrap:wrap;gap:4px 14px}
.schriftfeld .weiter{margin-top:18px;font-weight:600;font-size:.95rem;display:inline-flex;gap:8px;align-items:center}
.schriftfeld .weiter svg{width:16px;height:16px;transition:transform var(--t-schnell) var(--kurve)}
.schriftfeld .feld:hover .weiter svg{transform:translateX(4px)}
.feld.f-eng{--strich:var(--eng-dunkel)}.feld.f-aus{--strich:var(--aus-dunkel)}.feld.f-tax{--strich:var(--tax-dunkel)}
.schriftfeld-fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding:12px 0 16px;font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* Ladesequenz: nur Startseite, nur ohne reduzierte Bewegung */
@media (prefers-reduced-motion:no-preference){
  .hero .absender,.hero h1 span,.hero .lead,.hero .knoepfe{animation:auf .8s var(--kurve) both}
  .hero h1 span:nth-child(1){animation-delay:.08s}.hero h1 span:nth-child(2){animation-delay:.18s}.hero h1 span:nth-child(3){animation-delay:.28s}
  .hero .lead{animation-delay:.42s}.hero .knoepfe{animation-delay:.52s}
  .hero h1 span::before{animation:strich .9s var(--kurve) both;transform-origin:top}
  .hero h1 span:nth-child(1)::before{animation-delay:.3s}.hero h1 span:nth-child(2)::before{animation-delay:.42s}.hero h1 span:nth-child(3)::before{animation-delay:.54s}
  .schriftfeld{animation:linie 1.1s .6s var(--kurve) both}
  .schriftfeld .feld{animation:auf .8s var(--kurve) both}
  .schriftfeld .feld:nth-child(1){animation-delay:.75s}.schriftfeld .feld:nth-child(2){animation-delay:.85s}.schriftfeld .feld:nth-child(3){animation-delay:.95s}
}
@keyframes auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes strich{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes linie{from{border-top-color:transparent}to{border-top-color:rgba(255,255,255,.28)}}

/* ---------- Abschnitte ---------- */
section.abschnitt{padding:clamp(64px,9vw,112px) 0}
section.abschnitt.eng{padding:48px 0}
section.abschnitt.weiss{background:var(--kalk);border-top:1px solid var(--linie-hell);border-bottom:1px solid var(--linie-hell)}
section.abschnitt.dunkel{background:var(--nacht);color:#fff}
section.abschnitt.dunkel h2,section.abschnitt.dunkel h3{color:#fff}
section.abschnitt.dunkel p{color:rgba(255,255,255,.8)}
.kopfzeile{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end;gap:40px;margin-bottom:48px}
.kopfzeile h2{margin:0}
.kopfzeile p{margin:0;color:var(--grau-1);font-size:1.06rem;max-width:34em}
.zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.dreispaltig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}

/* Situationswahl (Startseite + Situationsübersicht) */
.lagewahl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;border-top:1px solid var(--linie)}
.lagewahl .liste{list-style:none;margin:0;padding:0;border-right:1px solid var(--linie)}
.lagewahl .liste li{border-bottom:1px solid var(--linie)}
.lagewahl .liste button,.lagewahl .liste a{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px 1fr;gap:14px;width:100%;padding:20px 20px 20px 0;cursor:pointer;font-size:1.04rem;font-weight:560;color:var(--tinte);line-height:1.35;position:relative}
.lagewahl .liste button::before,.lagewahl .liste a::before{content:"";width:12px;height:12px;margin-top:.35em;border:1.5px solid var(--farbe);background:transparent;transition:background var(--t-schnell)}
.lagewahl .liste button:hover::before,.lagewahl .liste button[aria-selected="true"]::before{background:var(--farbe)}
.lagewahl .liste button[aria-selected="true"]{color:var(--nacht)}
.lagewahl .liste button[aria-selected="true"]::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:3px;background:var(--farbe)}
.lagewahl .liste button:focus-visible{outline:2px solid var(--eng);outline-offset:-2px}
.lagewahl .liste small{display:block;font-weight:450;font-size:.84rem;color:var(--grau-2);margin-top:3px}
.lagewahl [data-b="eng"]{--farbe:var(--eng)}.lagewahl [data-b="aus"]{--farbe:var(--aus)}.lagewahl [data-b="tax"]{--farbe:var(--tax)}
.lagewahl .tafeln{padding:28px 0 28px 48px}
.lage{--farbe:var(--eng)}
.lage[data-b="aus"]{--farbe:var(--aus)}.lage[data-b="tax"]{--farbe:var(--tax)}
.lage .bereich{font-size:.86rem;font-weight:600;color:var(--farbe);margin-bottom:10px}
.lage h3{font-family:var(--serif);font-weight:430;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin-bottom:.6em}
.lage p{color:var(--grau-1);max-width:36em}
.lage dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:22px 0 26px;font-size:.96rem;border-top:1px solid var(--linie-hell);padding-top:18px}
.lage dt{color:var(--grau-2);font-size:.88rem;padding-top:1px}
.lage dd{margin:0}
.lage .wege{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.lage .wege a{font-weight:600;color:var(--farbe)}
html.js .lagewahl.aktiv .lage{display:none}
html.js .lagewahl.aktiv .lage.zeigen{display:block;animation:auf .45s var(--kurve) both}
html:not(.js) .lagewahl{display:block}
html:not(.js) .lagewahl .liste{display:none}
html:not(.js) .lagewahl .tafeln{padding-left:0}
.lagewahl:not(.aktiv) .lage+.lage{margin-top:44px;padding-top:36px;border-top:1px solid var(--linie-hell)}
@media (prefers-reduced-motion:reduce){html.js .lagewahl.aktiv .lage.zeigen{animation:none}}

/* Arbeitsergebnisse */
.ergebnisse{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.ergebnisse li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:32px;padding:26px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.ergebnisse h3{font-family:var(--serif);font-weight:440;font-size:1.45rem;margin:0}
.ergebnisse p{margin:0;color:var(--grau-1)}
.ergebnisse .zuordnung{font-size:.88rem;font-weight:600;color:var(--farbe);display:flex;gap:10px;align-items:center}
.ergebnisse .zuordnung::before{content:"";width:18px;height:2px;background:var(--farbe)}
.ergebnisse li[data-b="eng"]{--farbe:var(--eng)}.ergebnisse li[data-b="aus"]{--farbe:var(--aus)}.ergebnisse li[data-b="tax"]{--farbe:var(--tax)}

/* Erfahrung (Startseite) */
.einblick{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.jahre{display:flex;gap:40px;margin:30px 0 0;padding:0;list-style:none}
.jahre li{border-top:2px solid var(--nacht);padding-top:12px;max-width:12em}
.jahre b{display:block;font-family:var(--serif);font-weight:400;font-size:3.2rem;line-height:1;color:var(--nacht);letter-spacing:-.02em}
.jahre span{display:block;font-size:.9rem;color:var(--grau-1);margin-top:8px}
.einblick .stationen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.einblick .stationen li{padding:20px 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:24px}
.einblick .stationen .art{font-size:.88rem;font-weight:600;color:var(--grau-2)}
.einblick .stationen h3{font-size:1.06rem;margin-bottom:4px}
.einblick .stationen p{margin:0;color:var(--grau-1);font-size:.95rem}

/* Zuständigkeiten */
.zustaendig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.25)}
.zustaendig>div{padding:30px 32px 6px 0}
.zustaendig>div+div{padding-left:32px;border-left:1px solid rgba(255,255,255,.18)}
.zustaendig .bereiche{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.zustaendig .bereiche li{font-size:.84rem;font-weight:600;padding:4px 10px;border:1px solid currentColor}
.zustaendig .b-eng{color:var(--eng-dunkel)}.zustaendig .b-aus{color:var(--aus-dunkel)}.zustaendig .b-tax{color:var(--tax-dunkel)}
.zustaendig h3{font-family:var(--serif);font-weight:420;font-size:1.8rem;margin-bottom:.3em}

/* ---------- Unterseiten ---------- */
.seitenkopf{padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px);background:var(--kalk);border-bottom:1px solid var(--linie-hell);position:relative}
.seitenkopf::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--akzent)}
.seitenkopf .pfad{font-size:.85rem;color:var(--grau-2);margin-bottom:28px}
.seitenkopf .pfad a{color:var(--grau-1)}
.seitenkopf .pfad span{margin:0 8px;color:var(--linie)}
.seitenkopf h1{max-width:16em}
.rollenzeile{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--akzent);margin-bottom:20px}
.rollenzeile i{width:10px;height:10px;background:var(--akzent);display:inline-block}
.hinweisbox{border-left:3px solid var(--akzent);background:var(--akzent-hell);padding:16px 20px;font-size:.96rem;max-width:760px;margin:26px 0 0}
.hinweisbox strong{display:block;margin-bottom:4px;color:var(--nacht)}

/* Bereichsseiten: Leistungsgruppen */
.gruppe-kopf{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px;align-items:start;margin-bottom:32px}
.gruppe-kopf h2{margin:0}
.gruppe-kopf p{color:var(--grau-1);margin:0;max-width:36em}
.zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.zeilen li a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) 32px;gap:28px;padding:24px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--tinte);align-items:baseline;transition:padding var(--t-schnell) var(--kurve)}
.zeilen li a:hover{padding-left:10px}
.zeilen h3{font-family:var(--serif);font-weight:440;font-size:1.5rem;margin:0;color:var(--nacht)}
.zeilen p{margin:0;color:var(--grau-1)}
.zeilen .pfeil{color:var(--akzent);justify-self:end}
.zeilen .pfeil svg{width:18px;height:18px;transition:transform var(--t-schnell) var(--kurve)}
.zeilen li a:hover .pfeil svg{transform:translateX(4px)}

/* Mandatsregel */
.mandatsregel{display:grid;grid-template-columns:auto 1fr;gap:20px;border:1px solid var(--eng);background:var(--eng-hell);padding:22px 26px;max-width:880px}
.mandatsregel svg{width:34px;height:34px;color:var(--eng)}
.mandatsregel h3{margin:0 0 6px;color:var(--nacht)}
.mandatsregel p{margin:0;font-size:.97rem}

/* Kette: Situation → Was wir tun → Was Sie erhalten */
.kette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid var(--akzent);background:var(--kalk)}
.kette>div{padding:36px 32px}
.kette>div+div{border-left:1px solid var(--linie-hell)}
.kette .ergebnis{background:var(--akzent-hell)}
.kette .schritt{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--grau-2);margin-bottom:18px}
.kette .schritt b{width:26px;height:26px;background:var(--nacht);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-family:var(--mono);font-weight:500}
.kette .ergebnis .schritt b{background:var(--akzent)}
.kette p{font-size:.98rem}
.kette ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.kette li{position:relative;padding-left:20px;font-size:.98rem}
.kette li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:2px;background:var(--akzent)}
.kette .leistungen li{padding-left:0}
.kette .leistungen li::before{display:none}
.kette .leistungen h4{margin:0 0 6px;font-size:1.04rem}
.kette .leistungen p{margin:0;color:var(--grau-1);font-size:.94rem}

/* Ablauf, Abgrenzung */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:s;border-left:1px solid var(--linie);margin-left:14px}
.ablauf li{position:relative;padding:0 0 30px 34px;counter-increment:s}
.ablauf li::before{content:counter(s);position:absolute;left:-14px;top:0;width:28px;height:28px;background:var(--akzent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;border:3px solid var(--gips)}
section.weiss .ablauf li::before{border-color:var(--kalk)}
.ablauf h3{margin:3px 0 5px;font-size:1.08rem}
.ablauf p{margin:0;color:var(--grau-1);max-width:56em}
.abgrenzung{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.abgrenzung li{position:relative;padding-left:26px}
.abgrenzung li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1.5px;background:var(--grau-2);transform:rotate(-45deg)}
.abgrenzung li::after{content:"";position:absolute;left:0;top:.72em;width:14px;height:1.5px;background:var(--grau-2);transform:rotate(45deg)}

/* Projektphasen (interaktiv, Engineering) */
.phasen{border-top:1px solid var(--linie)}
.phasen .leiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;margin:0;padding:0;list-style:none}
.phasen .leiste::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--linie)}
.phasen .leiste button{all:unset;box-sizing:border-box;display:block;width:100%;padding:12px 16px 18px 0;cursor:pointer;position:relative;font-weight:600;color:var(--grau-1)}
.phasen .leiste button::before{content:"";display:block;width:18px;height:18px;margin:4px 0 14px;background:var(--gips);border:2px solid var(--grau-2);position:relative;z-index:1;transition:background var(--t-schnell),border-color var(--t-schnell)}
section.weiss .phasen .leiste button::before{background:var(--kalk)}
.phasen .leiste button[aria-selected="true"]{color:var(--nacht)}
.phasen .leiste button[aria-selected="true"]::before,.phasen .leiste button:hover::before{background:var(--eng);border-color:var(--eng)}
.phasen .leiste button:focus-visible{outline:2px solid var(--eng);outline-offset:2px}
.phasen .leiste small{display:block;font-weight:450;font-size:.84rem;color:var(--grau-2)}
.phase{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;padding:26px 0 0}
.phase h3{font-family:var(--serif);font-weight:430;font-size:1.7rem}
.phase ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.phase li{padding-left:20px;position:relative}
.phase li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:2px;background:var(--eng)}
html.js .phasen.aktiv .phase{display:none}
html.js .phasen.aktiv .phase.zeigen{display:grid;animation:auf .4s var(--kurve) both}
html:not(.js) .phasen .leiste,.phasen:not(.aktiv) .leiste{display:none}
.phasen:not(.aktiv) .phase+.phase{border-top:1px solid var(--linie-hell);margin-top:24px}
@media (prefers-reduced-motion:reduce){html.js .phasen.aktiv .phase.zeigen{animation:none}}

/* Schichtaufbau (Ausbau & Fassade) */
.schnitt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.schnitt figure{margin:0}
.schnitt figcaption{font-size:.86rem;color:var(--grau-2);margin-top:12px}
.schnitt svg text{font-family:var(--sans)}
.schichten{list-style:none;margin:0;padding:0;counter-reset:l;border-top:1px solid var(--linie)}
.schichten li{counter-increment:l;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:.96rem}
.schichten li::before{content:counter(l);font-family:var(--mono);font-size:.8rem;color:var(--aus);padding-top:2px}
.schichten b{font-weight:600}

/* Gewerkezeilen */
.gewerke{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--linie)}
.gewerke div{padding:22px 0;border-bottom:1px solid var(--linie)}
.gewerke h3{margin-bottom:6px}
.gewerke p{margin:0;color:var(--grau-1);font-size:.96rem}

/* Folge / Ausgang */
.folge{margin-top:28px;display:flex;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--linie)}
.folge .auge{margin:0;white-space:nowrap;color:var(--grau-2)}
.folge p{margin:0}
.ausgang{background:var(--nacht);color:#fff;position:relative;overflow:hidden}
.ausgang::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--eng-dunkel) 0 33.3%,var(--aus-dunkel) 33.3% 66.6%,var(--tax-dunkel) 66.6%)}
.ausgang .hülle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.ausgang h2{color:#fff;margin-bottom:.35em}
.ausgang p{color:rgba(255,255,255,.78);margin:0;max-width:40em;font-size:1.06rem}
.ausgang .knopf.hell{white-space:nowrap}

/* FAQ */
.faq{max-width:840px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-weight:600;font-size:1.08rem;position:relative;color:var(--nacht)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:translateY(-70%) rotate(45deg);transition:transform var(--t-schnell)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{margin:0 0 20px;color:var(--grau-1);max-width:60em}

/* Regeln */
.regeln{counter-reset:regel;list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.regel{display:grid;grid-template-columns:64px minmax(0,4fr) minmax(0,7fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--linie)}
.regel::before{counter-increment:regel;content:counter(regel,decimal-leading-zero);font-family:var(--mono);font-size:.9rem;color:var(--eng);padding-top:3px}
.regel h3{margin:0}
.regel p{margin:0;color:var(--grau-1)}

/* Personen */
.person{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start;padding:36px 0;border-top:1px solid var(--linie)}
.person h3{font-family:var(--serif);font-weight:430;font-size:2rem;margin-bottom:6px}
.person .funktion{color:var(--grau-1);margin:0}
.person dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 22px;margin:18px 0 0;font-size:.95rem}
.person dt{color:var(--grau-2)}
.person dd{margin:0}

/* Erfahrung (Unterseite) */
.erfahrung{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.erfahrung li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:28px;padding:24px 0;border-bottom:1px solid var(--linie)}
.erfahrung .tag{font-size:.88rem;font-weight:600;color:var(--grau-2)}
.erfahrung h3{font-size:1.06rem;margin:0}
.erfahrung p{margin:0;color:var(--grau-1);font-size:.95rem}

/* Formular */
form.erstgespraech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;background:var(--kalk);border-top:3px solid var(--nacht);padding:34px}
form.erstgespraech .voll{grid-column:1/-1}
form.erstgespraech label{display:block;font-size:.9rem;font-weight:560;color:var(--nacht);margin-bottom:6px}
form.erstgespraech input,form.erstgespraech select,form.erstgespraech textarea{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #B9C0C2;border-radius:0;background:#fff;color:var(--tinte)}
form.erstgespraech input:focus,form.erstgespraech select:focus,form.erstgespraech textarea:focus{border-color:var(--eng);outline:2px solid var(--eng);outline-offset:0}
form.erstgespraech fieldset{grid-column:1/-1;border:1px dashed #B9C0C2;padding:18px 20px 8px;margin:0}
form.erstgespraech legend{font-size:.9rem;font-weight:600;color:var(--grau-1);padding:0 8px}
form.erstgespraech .hinweis{font-size:.86rem;color:var(--grau-1);margin:0}
form.erstgespraech .senden{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
form.erstgespraech button{font:inherit;font-weight:600;font-size:1rem;padding:14px 26px;border:0;background:var(--nacht);color:#fff;cursor:pointer}
form.erstgespraech button:hover{background:var(--nacht-2)}
.honig{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.kontaktnebe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.kontaktnebe aside{background:var(--nacht);color:#fff;padding:32px}
.kontaktnebe aside h3{color:#fff;font-size:1.05rem;margin-top:1.2em}
.kontaktnebe aside h3:first-child{margin-top:0}
.kontaktnebe aside p,.kontaktnebe aside li{color:rgba(255,255,255,.8);font-size:.95rem}
.kontaktnebe aside ol{padding-left:20px;margin:0 0 10px}

/* Rechtstexte */
.recht h2{font-family:var(--sans);font-weight:650;font-size:1.3rem;letter-spacing:-.01em;margin-top:2em}
.recht h3{font-size:1.04rem;margin-top:1.6em}
.recht table{border-collapse:collapse;width:100%;font-size:.96rem;margin:1em 0}
.recht td,.recht th{border-bottom:1px solid var(--linie);padding:10px 12px;text-align:left;vertical-align:top}
.recht th{color:var(--grau-1);font-weight:500;width:34%}

/* Fuss */
.fuss{background:#071626;color:rgba(255,255,255,.78);padding:64px 0 28px}
.fuss .hülle{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.fuss h2{font-family:var(--sans);color:#fff;font-size:.92rem;font-weight:620;letter-spacing:0;margin-bottom:14px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:8px;font-size:.93rem}
.fuss a{color:rgba(255,255,255,.78);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .marke{color:#fff;margin-bottom:18px}
.fuss .marke small{color:rgba(255,255,255,.6)}
.fuss .gesellschaft p{font-size:.92rem;color:rgba(255,255,255,.7)}
.fuss .s-eng h2{color:var(--eng-dunkel)}.fuss .s-aus h2{color:var(--aus-dunkel)}.fuss .s-aus h2.t{color:var(--tax-dunkel)}
.fuss .unten{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.55)}

/* Einblenden beim Scrollen – Inhalte bleiben ohne JS sichtbar */
html.js .ein{opacity:0;transform:translateY(18px);transition:opacity var(--t-ruhig) var(--kurve),transform var(--t-ruhig) var(--kurve)}
html.js .ein.sichtbar{opacity:1;transform:none}
html.js .ein.sichtbar+.ein.sichtbar{transition-delay:.08s}
@media (prefers-reduced-motion:reduce){html.js .ein{opacity:1;transform:none;transition:none}}
@media print{html.js .ein{opacity:1;transform:none}}

/* Responsiv */
@media (max-width:1040px){
  .nav-schalter{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--kalk);border-bottom:1px solid var(--linie);box-shadow:0 18px 30px -20px rgba(11,31,51,.5);padding:10px var(--rand) 20px;max-height:calc(100vh - 80px);overflow:auto}
  .nav.offen{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav>ul>li>a{padding:12px 4px;font-size:1.05rem}
  .nav>ul>li>a::after{left:4px;right:auto;width:28px}
  .untermenue,.untermenue.breit,.nav>ul>li:hover>.untermenue.breit,.nav>ul>li:focus-within>.untermenue.breit{position:static;display:block;min-width:0;border:0;box-shadow:none;background:transparent;padding:0 0 8px 8px}
  .nav .cta>a{margin:12px 0 0;text-align:center}
  .schriftfeld{grid-template-columns:1fr}
  .schriftfeld .feld,.schriftfeld .feld:first-child{border-left:0;padding:24px 0 26px;border-top:1px solid rgba(255,255,255,.18);min-height:0}
  .schriftfeld .feld:first-child{border-top:0}
  .kopfzeile,.gruppe-kopf,.einblick,.zweispaltig,.schnitt,.phase,.person,.kontaktnebe{grid-template-columns:1fr;gap:24px}
  .dreispaltig{grid-template-columns:1fr;gap:28px}
  .lagewahl{grid-template-columns:1fr}
  .lagewahl .liste{border-right:0}
  .lagewahl .liste button[aria-selected="true"]::after{display:none}
  .lagewahl .tafeln{padding:28px 0 0}
  .ergebnisse li{grid-template-columns:1fr;gap:8px}
  .kette{grid-template-columns:1fr}
  .kette>div+div{border-left:0;border-top:1px solid var(--linie-hell)}
  .regel{grid-template-columns:48px 1fr}
  .regel p{grid-column:2}
  .erfahrung li{grid-template-columns:1fr;gap:6px}
  .fuss .hülle{grid-template-columns:1fr 1fr}
  .fuss .gesellschaft{grid-column:1/-1}
  .zustaendig{grid-template-columns:1fr}
  .zustaendig>div+div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
}
@media (max-width:640px){
  body{font-size:16px}
  .kopf .hülle{height:64px}
  .marke small{display:none}
  .marke .signet{width:38px;height:38px}
  .hero h1{font-size:clamp(2.5rem,12.5vw,3.6rem)}
  .zeilen li a{grid-template-columns:1fr 24px;gap:6px 14px}
  .zeilen li a p{grid-column:1}
  .zeilen .pfeil{grid-row:1;grid-column:2}
  .phasen .leiste{grid-template-columns:repeat(2,1fr)}
  .phasen .leiste::before{display:none}
  .einblick .stationen li{grid-template-columns:1fr;gap:4px}
  .jahre{gap:24px}
  .jahre b{font-size:2.5rem}
  .gewerke{grid-template-columns:1fr}
  .ausgang .hülle{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px}
  form.erstgespraech{grid-template-columns:1fr;padding:22px}
  .fuss .hülle{grid-template-columns:1fr}
  .folge{flex-direction:column;gap:6px}
  .mandatsregel{grid-template-columns:1fr}
}
@media print{.kopf,.fuss,.ausgang,.arbeitsstand,.nav-schalter{display:none}body{background:#fff}}

/* Ergänzungen */
.rollenzeile span{font-weight:450;color:var(--grau-1)}
.rollenzeile span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--linie);vertical-align:middle;margin:0 10px 0 4px}
.abgrenzung-ok{list-style:none;margin:0;padding:0;display:grid;gap:12px;border-top:1px solid var(--linie);padding-top:14px}
.abgrenzung-ok li{position:relative;padding-left:24px}
.abgrenzung-ok li::before{content:"";position:absolute;left:2px;top:.45em;width:6px;height:11px;border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(40deg)}
.meldung{background:#fff;border-left:3px solid #B3261E;padding:14px 18px;margin:0 0 24px;color:var(--tinte)}

/* ===== Überarbeitung 2026-10-14: Kundenführung, Startseite, Mobil ===== */
.hero .hülle{padding-bottom:clamp(48px,6vw,80px)}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.9rem);line-height:1.02}
.hero .absender{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.hero .absender .b{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.78)}
.hero .absender .b::before{content:"";width:8px;height:8px;background:var(--m)}
.b-eng{--m:var(--eng-dunkel)}.b-aus{--m:var(--aus-dunkel)}.b-tax{--m:var(--tax-dunkel)}
.einstiege{background:var(--nacht);color:#fff;padding:0 0 8px}
.einstiege .schriftfeld{margin-top:0}
.schriftfeld .feld dl{margin:0 0 6px;display:grid;gap:4px 0;font-size:.95rem}
.schriftfeld .feld dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:10px}
.schriftfeld .feld dd{margin:0;color:rgba(255,255,255,.86)}
.schriftfeld .feld .weiter{margin-top:auto;padding-top:20px}
.schriftfeld-fuss{margin:0}

/* Situationen nach Kundengruppe */
.lagen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;align-items:start}
.lagegruppe{border-top:3px solid var(--farbe);background:var(--kalk)}
.lagegruppe[data-b="eng"]{--farbe:var(--eng)}.lagegruppe[data-b="aus"]{--farbe:var(--aus)}.lagegruppe[data-b="tax"]{--farbe:var(--tax)}
.lagegruppe-titel{font-size:.9rem;font-weight:650;letter-spacing:.02em;color:var(--farbe);margin:0;padding:16px 20px 6px}
.lage{border-top:1px solid var(--linie-hell);display:block}
.lage>summary{list-style:none;cursor:pointer;padding:16px 52px 16px 20px;min-height:52px;font-weight:600;font-size:1.04rem;color:var(--nacht);position:relative}
.lage>summary::-webkit-details-marker{display:none}
.lage>summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--farbe,var(--eng));border-bottom:2px solid var(--farbe,var(--eng));transform:translateY(-70%) rotate(45deg);transition:transform var(--t-schnell)}
.lage[open]>summary::after{transform:translateY(-30%) rotate(225deg)}
.lage>summary:hover{background:#fff}
.lage>summary:focus-visible{outline:2px solid var(--eng);outline-offset:-2px}
.lage-inhalt{padding:4px 20px 22px}
.lage-inhalt h3{font-family:var(--serif);font-weight:430;font-size:1.45rem;line-height:1.2;margin-bottom:.5em}
.lage-inhalt p{color:var(--grau-1)}
.lage-inhalt dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:16px 0 14px;font-size:.98rem;border-top:1px solid var(--linie-hell);padding-top:14px}
.lage-inhalt dt{color:var(--grau-2);font-size:.88rem}
.lage-inhalt dd{margin:0;color:var(--tinte)}
.lage-inhalt .wege{display:flex;flex-wrap:wrap;gap:0 18px;margin-bottom:10px}
.lage-inhalt .wege a{display:inline-block;padding:10px 0;font-weight:600;color:var(--farbe,var(--eng))}
.lage-inhalt .knopf.klein{padding:12px 18px;font-size:.95rem}
@media (prefers-reduced-motion:no-preference){.lage[open] .lage-inhalt{animation:auf .35s var(--kurve) both}}

/* Erfahrung verdichtet */
.schwerpunkte{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.schwerpunkte li{padding:18px 0;border-bottom:1px solid var(--linie)}
.schwerpunkte h3{margin:0 0 4px;font-size:1.08rem}
.schwerpunkte p{margin:0;color:var(--grau-1)}
.weiterlink{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:14px}
.weiterlink a{display:inline-block;padding:10px 0;font-weight:600;color:var(--nacht)}

/* Kontaktabschluss mit mehreren Bereichen */
.ausgang-knoepfe{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.ausgang-knoepfe .knopf{justify-content:space-between;white-space:nowrap}
.ausgang .knopf.rahmen{color:#fff;border-color:rgba(255,255,255,.55)}
.kopf-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.knopf.rahmen-dunkel{background:transparent;color:var(--nacht);border-color:var(--nacht)}
.knopf.rahmen-dunkel:hover{background:var(--gips)}

/* Ablauf als Schrittleiste (Ausbau & Fassade) */
.schrittleiste{list-style:none;margin:0;padding:0;counter-reset:sl;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:3px solid var(--akzent)}
.schrittleiste li{counter-increment:sl;padding:22px 20px 24px 0;position:relative}
.schrittleiste li+li{padding-left:20px;border-left:1px solid var(--linie)}
.schrittleiste li::before{content:counter(sl,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.8rem;color:var(--akzent);margin-bottom:10px}
.schrittleiste h3{font-size:1.04rem;margin-bottom:6px}
.schrittleiste p{margin:0;color:var(--grau-1);font-size:.95rem}

/* Leistungsgruppen */
.gewerkgruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.gewerkgruppen.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
.gewerkgruppe{border-top:2px solid var(--akzent);padding-top:18px}
.gewerkgruppe h3{font-family:var(--serif);font-weight:440;font-size:1.5rem;margin-bottom:12px}
.gewerkgruppe ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gewerkgruppe li{color:var(--grau-1);font-size:.97rem}
.gewerkgruppe li b{display:block;color:var(--tinte);font-weight:620}
.gewerkgruppe p{color:var(--grau-1);margin:0}

/* Fuss, neu: Kontakt + Bereiche sichtbar, Rest aufklappbar */
.fuss .hülle{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,2fr);gap:32px 40px;align-items:start}
.fuss .kontakt{margin-top:6px}
.fuss .kontakt a,.fuss-bereiche a,.fuss-gruppe li a,.recht-links a{display:inline-block;padding:9px 0}
.fuss-bereiche{display:flex;flex-direction:column}
.fuss-bereiche a{font-weight:620;color:#fff;font-size:1.02rem;border-left:3px solid var(--m);padding-left:12px;margin-bottom:6px}
.fuss-bereiche .s-eng{--m:var(--eng-dunkel)}.fuss-bereiche .s-aus{--m:var(--aus-dunkel)}.fuss-bereiche .s-tax{--m:var(--tax-dunkel)}
.fuss-mehr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.fuss-gruppe summary{list-style:none;cursor:pointer;color:#fff;font-weight:620;font-size:.92rem;padding:10px 0;min-height:44px}
.fuss-gruppe summary::-webkit-details-marker{display:none}
.fuss-gruppe li{margin:0}
.recht-links{list-style:none;margin:0;padding:0;display:flex;gap:0 20px;flex-wrap:wrap}
.recht-links a{color:rgba(255,255,255,.72)}
.fuss .unten{align-items:center}

/* Brotkrumen und kleine Links: ausreichende Trefferfläche */
.seitenkopf .pfad a{display:inline-block;padding:10px 0}

@media (max-width:1040px){
  .lagen{grid-template-columns:1fr}
  .schrittleiste{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--akzent)}
  .schrittleiste li,.schrittleiste li+li{padding:14px 0 14px 20px;border-left:0;border-top:1px solid var(--linie)}
  .schrittleiste li:first-child{border-top:0}
  .gewerkgruppen,.gewerkgruppen.vier{grid-template-columns:1fr}
  .fuss .hülle{grid-template-columns:1fr 1fr}
  .fuss-mehr{grid-column:1/-1;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.14)}
  .fuss-gruppe{border-bottom:1px solid rgba(255,255,255,.14)}
  .fuss-gruppe summary{position:relative;padding:12px 30px 12px 0}
  .fuss-gruppe summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:1.2rem;color:rgba(255,255,255,.7)}
  .fuss-gruppe[open] summary::after{content:"–"}
  .fuss-gruppe ul{padding-bottom:10px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(2.1rem,9.5vw,2.9rem)}
  .schriftfeld .feld{padding:22px 0 24px}
  .lage-inhalt dl{grid-template-columns:1fr;gap:2px}
  .lage-inhalt dd{margin-bottom:8px}
  .ausgang-knoepfe .knopf{white-space:normal}
  .fuss .hülle{grid-template-columns:1fr}
  .fuss .unten{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:640px){
  .ausgang .knopf.hell,.ausgang .knopf{white-space:normal;max-width:100%}
  .ausgang .hülle>div{min-width:0}
  .einstiege .feld{border-left:3px solid var(--strich)!important;padding-left:16px!important;margin-top:14px;background:rgba(255,255,255,.03)}

  .einstiege .feld .weiter{min-height:44px;align-items:center}
}
/* Trefferflächen mindestens 44 px */
.fuss .kontakt a,.fuss-bereiche a,.fuss-gruppe li a,.recht-links a,.seitenkopf .pfad a,.weiterlink a,.lage-inhalt .wege a{padding:11px 0;min-height:44px}
.fuss-bereiche a{padding-left:12px}
.nav-schalter{min-height:44px;min-width:64px}
.marke{min-height:44px}
.phase p a,.folge a{display:inline-block;padding:11px 0}
.ergebnisse .zuordnung{min-height:44px;padding:10px 0}

/* ===== Masterauftrag 2026-10-14: Navigation, Bereichseinstiege, Situationsfinder ===== */
.nav>ul>li.hat-menue{display:flex;align-items:center}
.aufklapp{width:30px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;margin-left:-8px;color:var(--grau-1)}
.aufklapp::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);transition:transform var(--t-schnell)}
.hat-menue.offen>.aufklapp::before{transform:translate(-50%,-30%) rotate(225deg)}
.aufklapp:focus-visible{outline:2px solid var(--eng);outline-offset:-4px}
.nav-satz{grid-column:1/-1;margin:0 0 8px;padding:6px 10px 10px;font-size:.86rem;line-height:1.45;color:var(--grau-1);border-bottom:1px solid var(--linie-hell)}
.nav>ul>li.offen>.untermenue{display:block}
.nav>ul>li.offen>.untermenue.breit{display:grid}
.untermenue a.mehr{font-weight:600;color:var(--nacht);margin-top:6px}
.untermenue a{min-height:40px;display:flex;align-items:center}

.schriftfeld .feld h2 a{color:#fff;text-decoration:none}
.schriftfeld .feld h2 a:hover{text-decoration:underline;text-decoration-color:var(--strich)}
.schriftfeld .feld:hover::before,.schriftfeld .feld:focus-within::before{transform:scaleX(1)}
.feld-cta{margin:auto 0 0;padding-top:22px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.feld-cta .knopf{padding:12px 16px;font-size:.95rem}
.feld-cta .weiter{margin:0;padding:12px 0;color:#fff;font-weight:600;font-size:.92rem;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.schriftfeld .feld dd b{font-weight:600;color:#fff}

.finder-frage{font-weight:620;color:var(--nacht);margin:0 0 12px}
.gruppenknoepfe{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}
.finder.aktiv .gruppenknoepfe{display:grid}
.gruppenwahl{font:inherit;font-weight:600;font-size:.98rem;text-align:left;line-height:1.3;padding:16px 18px;min-height:64px;background:var(--kalk);color:var(--nacht);border:1px solid var(--linie);border-top:3px solid var(--farbe);cursor:pointer;transition:background var(--t-schnell),color var(--t-schnell)}
.gruppenwahl[data-b="eng"]{--farbe:var(--eng)}.gruppenwahl[data-b="aus"]{--farbe:var(--aus)}.gruppenwahl[data-b="tax"]{--farbe:var(--tax)}
.gruppenwahl:hover{background:#fff}
.gruppenwahl[aria-pressed="true"]{background:var(--farbe);color:#fff;border-color:var(--farbe)}
.gruppenwahl:focus-visible{outline:2px solid var(--nacht);outline-offset:2px}
.finder:not(.aktiv) .finder-frage{display:none}
.finder.aktiv .lagen{display:block}
.finder.aktiv .lagegruppe{display:none;max-width:860px}
.finder.aktiv .lagegruppe.zeigen{display:block}
.finder.aktiv .lagegruppe-titel{display:none}
@media (prefers-reduced-motion:no-preference){.finder.aktiv .lagegruppe.zeigen{animation:auf .35s var(--kurve) both}}

/* Ausbau & Fassade */
.seitenkopf .anliegen{margin-top:26px;max-width:46em}
.seitenkopf .anliegen>p:first-child{font-size:1.08rem;color:var(--tinte);border-left:3px solid var(--akzent);padding-left:16px}
.meister h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}

@media (max-width:1040px){
  .nav>ul>li.hat-menue{flex-wrap:wrap;justify-content:space-between}
  .nav>ul>li.hat-menue>a{flex:1}
  .aufklapp{width:48px;height:48px;margin:0}
  .untermenue,.untermenue.breit,.nav>ul>li:hover>.untermenue,.nav>ul>li:hover>.untermenue.breit,.nav>ul>li:focus-within>.untermenue,.nav>ul>li:focus-within>.untermenue.breit{display:none;flex-basis:100%}
  .nav>ul>li.offen>.untermenue,.nav>ul>li.offen>.untermenue.breit{display:block;position:static;border:0;box-shadow:none;background:transparent;padding:0 0 10px 8px;min-width:0}
  .untermenue a{min-height:44px}
  .gruppenknoepfe{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .feld-cta .knopf{width:100%;justify-content:space-between}
  .gruppenwahl{padding:14px;font-size:.95rem}
}
.schriftfeld .feld .feld-cta .weiter{margin:0;padding:12px 0}
.schriftfeld .feld h2 a{display:inline-block;padding:9px 0}
main p>a:only-child:not(.knopf){display:inline-block;padding:11px 0}

/* ===== Gestaltung 2026-10-14 b: Startseite mit Rhythmus ===== */
/* Lesbarkeit allgemein: kleine Etiketten grösser und kräftiger */
.kopfzeile p{font-size:1.1rem;line-height:1.6}

/* Hero: zweispaltig mit schematischer Zeichnung */
.hero.start .hülle{padding-bottom:clamp(120px,14vw,190px)}
.hero-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero.start .absender{font-size:.84rem;color:rgba(255,255,255,.8)}
.hero.start .lead{color:rgba(255,255,255,.88)}
.hero-zeichnung{margin:0;position:relative}
.hero-zeichnung svg{width:100%;height:auto}
.hero-zeichnung figcaption{position:absolute;right:4%;bottom:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:rgba(255,255,255,.45)}
@media (prefers-reduced-motion:no-preference){
  .hero-zeichnung .z-strich{stroke-dasharray:var(--l,900);stroke-dashoffset:var(--l,900);animation:zeichnen 1.8s .7s var(--kurve) forwards}
  .hero-zeichnung .z-mass .z-strich{animation-delay:1.1s}.hero-zeichnung .z-konto .z-strich{animation-delay:1.6s}
  .hero-zeichnung circle.z-strich{stroke-dasharray:5 6;stroke-dashoffset:0;opacity:0;animation:aufblenden .8s 1.5s var(--kurve) forwards}
  .hero-zeichnung .z-wand rect,.hero-zeichnung .z-konto rect{animation:aufblenden 1s .4s var(--kurve) both}
}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes aufblenden{from{opacity:0}to{opacity:1}}

/* Lebendiger Hauptknopf: Farbleiste der drei Bereiche wächst beim Darüberfahren */
.knopf.gross{position:relative;padding:18px 26px;font-size:1.06rem;overflow:hidden}
.knopf.gross .farbleiste{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--eng) 0 33.3%,var(--aus) 33.3% 66.6%,var(--tax) 66.6%);transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--kurve)}
.knopf.gross:hover .farbleiste,.knopf.gross:focus-visible .farbleiste{transform:scaleX(1)}
.knopf.gross:hover{background:#fff;box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.hero .knopf.rahmen{color:#fff;border-color:rgba(255,255,255,.5);padding:18px 24px}
.hero .knopf.rahmen:hover{border-color:#fff}

/* Bereiche: Karten ragen aus dem dunklen Hero in den hellen Grund */
.einstiege{background:linear-gradient(180deg,var(--nacht) 0 150px,var(--gips) 150px);color:var(--tinte);padding:0 0 clamp(56px,7vw,96px);margin-top:-110px;position:relative;z-index:1}
.einstiege-titel{font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 16px}
.bkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:stretch}
.bkarte{display:flex;flex-direction:column;background:#fff;box-shadow:0 30px 60px -40px rgba(11,31,51,.55),0 2px 0 rgba(11,31,51,.04);transition:transform .35s var(--kurve),box-shadow .35s var(--kurve)}
.bkarte:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px rgba(11,31,51,.6)}
.k-eng{--farbe:var(--eng);--farbe-hell:var(--eng-hell);--farbe-licht:var(--eng-dunkel)}
.k-aus{--farbe:var(--aus);--farbe-hell:var(--aus-hell);--farbe-licht:var(--aus-dunkel)}
.k-tax{--farbe:var(--tax);--farbe-hell:var(--tax-hell);--farbe-licht:var(--tax-dunkel)}
.bk-kopf{background:var(--farbe);color:#fff;padding:26px 28px 26px;position:relative;overflow:hidden;min-height:250px;display:flex;flex-direction:column}
.bk-zeichen{position:absolute;right:-6px;top:-34px;font-family:var(--serif);font-size:13rem;line-height:1;font-weight:400;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);pointer-events:none;transition:transform .6s var(--kurve)}
.bkarte:hover .bk-zeichen{transform:translateY(8px)}
.bk-pikto{width:48px;height:48px;color:#fff;opacity:.95;margin-bottom:18px}
.bk-kennung{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.bk-kopf h3{font-family:var(--serif);font-weight:420;font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.015em;color:#fff;margin:4px 0 auto;padding-bottom:18px}
.bk-kopf h3 a{color:#fff;text-decoration:none;display:inline-block;padding:4px 0}
.bk-kopf h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.bk-label,.bkarte dt{font-size:.8rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;margin:0 0 4px}
.bk-kopf .bk-label{color:rgba(255,255,255,.78)}
.bk-wer{margin:0;font-size:1.04rem;line-height:1.5;color:#fff}
.bk-wer b{font-weight:650}
.bk-rumpf{padding:24px 28px 26px;display:flex;flex-direction:column;flex:1}
.bkarte dl{margin:0}
.bkarte dt{color:var(--farbe)}
.bkarte dd{margin:0 0 18px;color:var(--grau-1);font-size:.99rem;line-height:1.55}
.bkarte dd.bk-anliegen{font-size:1.12rem;line-height:1.45;color:var(--nacht);font-weight:520}
.bk-ergebnis{background:var(--farbe-hell);border-left:3px solid var(--farbe);padding:14px 16px;margin:0 0 22px}
.bk-ergebnis .bk-label{color:var(--farbe)}
.bk-ergebnis p:last-child{margin:0;color:var(--nacht);font-weight:560}
.bk-cta{margin:auto 0 0;display:flex;flex-direction:column;align-items:stretch;gap:2px}
.bk-knopf{background:var(--farbe);border-color:var(--farbe);justify-content:space-between;padding:15px 18px;font-size:.98rem}
.bk-knopf:hover{background:var(--nacht);border-color:var(--nacht)}
.bk-cta .weiter{align-self:flex-start;display:inline-block;padding:12px 0;font-weight:620;color:var(--farbe);min-height:44px}
.einstiege .schriftfeld-fuss{border-top:1px solid var(--linie);margin-top:28px;color:var(--grau-1);font-size:.76rem}

/* Situationsfinder auf dunkler Planfläche */
.finder-flaeche{background:var(--nacht-2);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.finder-flaeche::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(143,181,224,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(143,181,224,.09) 1px,transparent 1px),linear-gradient(rgba(143,181,224,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(143,181,224,.045) 1px,transparent 1px);background-size:96px 96px,96px 96px,24px 24px,24px 24px}
.finder-flaeche h2{color:#fff}
.finder-flaeche .kopfzeile p{color:rgba(255,255,255,.82)}
.finder-flaeche .finder-frage{color:#fff;font-family:var(--serif);font-weight:420;font-size:1.6rem;margin-bottom:16px}
.finder-flaeche .gruppenknoepfe{counter-reset:gk;gap:12px;margin-bottom:28px}
.finder-flaeche .gruppenwahl{counter-increment:gk;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18);border-top:4px solid var(--farbe-l);padding:18px 20px 20px;min-height:110px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;font-size:1.04rem;transition:background var(--t-schnell),transform .3s var(--kurve)}
.finder-flaeche .gruppenwahl::before{content:counter(gk,decimal-leading-zero);font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--farbe-l)}
.finder-flaeche .gruppenwahl[data-b="eng"]{--farbe-l:var(--eng-dunkel)}.finder-flaeche .gruppenwahl[data-b="aus"]{--farbe-l:var(--aus-dunkel)}.finder-flaeche .gruppenwahl[data-b="tax"]{--farbe-l:var(--tax-dunkel)}
.finder-flaeche .gruppenwahl:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.finder-flaeche .gruppenwahl[aria-pressed="true"]{background:#fff;color:var(--nacht);border-color:#fff;border-top-color:var(--farbe)}
.finder-flaeche .gruppenwahl[aria-pressed="true"]::before{color:var(--farbe)}
.finder-flaeche .gruppenwahl:focus-visible{outline-color:#fff}
.finder-flaeche .lagegruppe{background:#fff;color:var(--tinte);box-shadow:0 30px 60px -40px rgba(0,0,0,.7)}
.finder-flaeche .lagegruppe-titel{font-size:1rem}
.finder-flaeche .lage>summary{font-size:1.08rem}
.finder-flaeche .lage-inhalt dt{font-weight:600;color:var(--farbe)}
html:not(.js) .finder-flaeche .lagen{gap:20px}

/* Ergebnisse als Blätter */
.ergebnis-flaeche{background:var(--gips)}
.blaetter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);align-items:start}
.blaetter li{background:#fff;padding:0 28px 30px;position:relative;box-shadow:0 24px 50px -36px rgba(11,31,51,.5);display:flex;flex-direction:column}
.blaetter li::after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,var(--gips) 50%,var(--farbe-hell) 50%)}
.blaetter li[data-b="eng"]{--farbe:var(--eng);--farbe-hell:var(--eng-hell)}.blaetter li[data-b="aus"]{--farbe:var(--aus);--farbe-hell:var(--aus-hell)}.blaetter li[data-b="tax"]{--farbe:var(--tax);--farbe-hell:var(--tax-hell)}
.blatt-kopf{display:block;border-top:6px solid var(--farbe);margin:0 -28px 22px;padding:16px 28px 0}
.blaetter .zuordnung{font-size:.86rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--farbe);display:inline-flex;gap:10px;align-items:center;min-height:44px}
.blaetter .zuordnung::before{content:"";width:18px;height:2px;background:var(--farbe)}
.blaetter h3{font-family:var(--serif);font-weight:430;font-size:clamp(1.55rem,2vw,1.85rem);line-height:1.15;color:var(--nacht);margin:0 0 14px}
.blaetter p{margin:0 0 22px;color:var(--grau-1);font-size:1.02rem}
.blatt-zeilen{display:block;height:46px;margin-top:auto;background:repeating-linear-gradient(180deg,transparent 0 13px,var(--linie-hell) 13px 14px);mask-image:linear-gradient(90deg,#000 0 72%,transparent 72%);-webkit-mask-image:linear-gradient(90deg,#000 0 72%,transparent 72%)}
@media (min-width:1041px){.blaetter li:nth-child(2){margin-top:36px}.blaetter li:nth-child(3){margin-top:72px}}

/* Kompetenz auf warmem Materialgrund */
.kompetenz-flaeche{background-color:var(--aus-hell);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .13 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");border-top:1px solid #E4D6B6}
.kompetenz-flaeche h2{font-size:clamp(2.2rem,4vw,3.4rem)}
.kompetenz-text{font-size:1.12rem;line-height:1.6;color:var(--tinte)}
.schwerpunkte.grosse{counter-reset:sp;border:0;display:grid;gap:14px}
.schwerpunkte.grosse li{counter-increment:sp;background:rgba(255,255,255,.72);border:0;border-left:4px solid var(--farbe);padding:22px 26px 22px 84px;position:relative}
.schwerpunkte.grosse li::before{content:counter(sp,decimal-leading-zero);position:absolute;left:24px;top:18px;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--farbe)}
.schwerpunkte.grosse li[data-b="eng"]{--farbe:var(--eng)}.schwerpunkte.grosse li[data-b="aus"]{--farbe:var(--aus)}
.schwerpunkte.grosse li[data-b="nacht"]{--farbe:var(--nacht);background:var(--nacht);color:#fff}
.schwerpunkte.grosse li[data-b="nacht"]::before{color:var(--aus-dunkel)}
.schwerpunkte.grosse li[data-b="nacht"] h3{color:#fff}.schwerpunkte.grosse li[data-b="nacht"] p{color:rgba(255,255,255,.82)}
.schwerpunkte.grosse h3{font-size:1.22rem;margin-bottom:6px}
.schwerpunkte.grosse p{font-size:1rem;line-height:1.55}

/* Abschluss: drei Bereichskacheln */
.start-ausgang{background:var(--nacht);color:#fff;padding:clamp(64px,8vw,104px) 0}
.sa-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:36px}
.sa-kopf h2{color:#fff;margin:0;font-size:clamp(2.2rem,4.4vw,3.6rem)}
.sa-kopf p{margin:0;color:rgba(255,255,255,.82);font-size:1.1rem}
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kachel{background:var(--farbe);color:#fff;text-decoration:none;padding:26px 26px 24px;min-height:200px;display:grid;grid-template-rows:auto 1fr auto;gap:14px;position:relative;overflow:hidden;transition:transform .35s var(--kurve),background .25s}
.kachel::after{content:"";position:absolute;inset:auto 0 0 0;height:0;background:rgba(255,255,255,.12);transition:height .4s var(--kurve)}
.kachel:hover{transform:translateY(-4px)}
.kachel:hover::after{height:100%}
.kachel-bereich{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.kachel-text{font-family:var(--serif);font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.15;font-weight:420}
.kachel-pfeil{justify-self:end;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:background .25s,color .25s}
.kachel-pfeil svg{width:18px;height:18px}
.kachel:hover .kachel-pfeil{background:#fff;color:var(--farbe)}
.kachel:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (prefers-reduced-motion:reduce){.bkarte,.kachel,.finder-flaeche .gruppenwahl,.bk-zeichen,.knopf.gross .farbleiste{transition:none}.bkarte:hover,.kachel:hover{transform:none}}

@media (max-width:1040px){
  .hero-raster{grid-template-columns:1fr}
  .hero-zeichnung{max-width:520px;width:100%;justify-self:center;margin-top:8px}
  .bkarten{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .bk-kopf{min-height:0}
  .blaetter{grid-template-columns:1fr;max-width:640px}
  .kacheln{grid-template-columns:1fr}
  .kachel{min-height:0;grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .kachel-bereich{grid-column:1/-1}
  .kachel-pfeil{grid-column:2;grid-row:2;align-self:end}
  .sa-kopf{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero.start .hülle{padding-bottom:130px}
  .hero-zeichnung{max-width:340px}
  .hero-zeichnung figcaption{position:static;text-align:right;margin-top:4px}
  .hero .knoepfe{flex-direction:column;align-items:stretch}
  .knopf.gross{justify-content:space-between}
  .einstiege{margin-top:-90px;background:linear-gradient(180deg,var(--nacht) 0 120px,var(--gips) 120px)}
  .bk-kopf{padding:22px 20px}
  .bk-zeichen{font-size:9rem;top:-20px}
  .bk-rumpf{padding:20px 20px 22px}
  .finder-flaeche .gruppenknoepfe{grid-template-columns:1fr 1fr;gap:8px}
  .finder-flaeche .gruppenwahl{min-height:96px;padding:14px;font-size:.96rem}
  .blaetter li{padding:0 20px 24px}.blatt-kopf{margin:0 -20px 18px;padding:14px 20px 0}
  .schwerpunkte.grosse li{padding:18px 18px 18px 68px}
  .schwerpunkte.grosse li::before{left:16px;font-size:2rem}
  .kachel{padding:20px}
}
/* Feinschliff: Karteninhalte auf gleicher Höhe, Zeichen, mobile Zeichnung */
@media (min-width:1041px){
  .bkarten{grid-template-rows:auto auto auto auto}
  .bkarte{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
  .bkarte .bk-rumpf{display:contents}
  .bkarte dl{padding:24px 28px 0}
  .bkarte .bk-ergebnis{margin:0 28px 22px;align-self:start}
  .bkarte .bk-cta{padding:0 28px 26px;align-self:end}
}
.bk-zeichen{top:6px;right:14px;font-size:10.5rem}
.finder-flaeche{padding-bottom:clamp(56px,7vw,88px)}
@media (max-width:640px){.hero-zeichnung{max-width:270px}.bk-zeichen{font-size:8rem;top:4px}}
.bk-zeichen{font-size:7.5rem;top:12px;-webkit-text-stroke-color:rgba(255,255,255,.2)}
@media (max-width:640px){.bk-zeichen{font-size:6.5rem}}

/* ===== Neues Logo 2026-10-14 ===== */
.marke .logo{display:block;height:46px;width:auto;max-width:100%}
.kopf.kompakt .marke .logo{height:40px}
.kopf .marke{transition:none}
.fuss .marke .logo{height:52px}
.fuss .markenzeile{margin:10px 0 18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.62)}
@media (max-width:640px){.marke .logo{height:36px}.kopf.kompakt .marke .logo{height:34px}.fuss .marke .logo{height:44px}}
@media (prefers-reduced-motion:no-preference){.kopf .marke .logo{transition:height var(--t-schnell)}}

/* ===== Dunkler Kopf mit Negativ-Logo 2026-10-14 d ===== */
.arbeitsstand{background:#0A1829;border-bottom-color:rgba(255,255,255,.06)}
.kopf{background:var(--nacht);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.1)}
.kopf.kompakt{border-bottom-color:rgba(255,255,255,.16);box-shadow:0 10px 28px -18px rgba(0,0,0,.7)}
.kopf .hülle{height:80px}
.marke .logo{height:52px}
.kopf.kompakt .marke .logo{height:44px}
.nav>ul>li>a{color:rgba(255,255,255,.88)}
.nav>ul>li>a:hover,.nav>ul>li.aktiv>a{color:#fff}
.nav>ul>li>a::after{background:rgba(255,255,255,.7)}
.aufklapp{color:rgba(255,255,255,.7)}
.nav .cta>a{background:#fff;color:var(--nacht)}
.nav .cta>a:hover{background:var(--gips);color:var(--nacht)}
.nav-schalter{border-color:rgba(255,255,255,.45);color:#fff}
.nav-schalter[aria-expanded="true"]{background:#fff;color:var(--nacht);border-color:#fff}
.fuss .marke .logo{height:60px}
.fuss .markenzeile{color:rgba(255,255,255,.7)}
@media (max-width:1040px){
  .nav>ul>li>a{color:var(--tinte)}
  .nav>ul>li>a:hover,.nav>ul>li.aktiv>a{color:var(--nacht)}
  .nav>ul>li>a::after{background:var(--nacht)}
  .aufklapp{color:var(--grau-1)}
  .nav .cta>a{background:var(--nacht);color:#fff}
  .nav .cta>a:hover{background:var(--nacht-2);color:#fff}
}
@media (max-width:640px){
  .kopf .hülle{height:66px}
  .marke .logo{height:42px}.kopf.kompakt .marke .logo{height:38px}.fuss .marke .logo{height:50px}
}

/* ===== Startseite 2026-10-14 e: Anliegen statt Kachelraster, kompakte Bereichsreihe ===== */
.anliegen{background:var(--kalk);padding:clamp(64px,8vw,112px) 0 clamp(48px,6vw,80px);position:relative}
.anliegen::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--eng) 0 33.3%,var(--aus) 33.3% 66.6%,var(--tax) 66.6%)}
.anliegen .kopfzeile{margin-bottom:24px}
.anliegen-liste{list-style:none;margin:0;padding:0;counter-reset:none}
.anliegen-eintrag{--farbe:var(--nacht);--farbe-hell:var(--gips);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,5vw,80px);padding:clamp(32px,4vw,52px) 0 clamp(32px,4vw,52px) 28px;border-top:1px solid var(--linie);position:relative;transition:background var(--t-schnell)}
.anliegen-eintrag:last-child{border-bottom:1px solid var(--linie)}
.anliegen-eintrag::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:4px;background:var(--farbe);transform:scaleY(.35);transform-origin:top;transition:transform .6s var(--kurve)}
.anliegen-eintrag:hover::before,.anliegen-eintrag:focus-within::before,.anliegen-eintrag.sichtbar::before{transform:scaleY(1)}
.anliegen-eintrag[data-b="eng"]{--farbe:var(--eng);--farbe-hell:var(--eng-hell)}
.anliegen-eintrag[data-b="aus"]{--farbe:var(--aus);--farbe-hell:var(--aus-hell)}
.anliegen-eintrag[data-b="tax"]{--farbe:var(--tax);--farbe-hell:var(--tax-hell)}
.anliegen-eintrag:nth-child(even) .ae-frage{padding-left:clamp(0px,4vw,56px)}
.ae-nr{display:block;font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--farbe);opacity:.9;margin-bottom:10px}
.ae-wer{margin:0 0 10px;font-family:var(--mono);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--farbe)}
.ae-frage h3{margin:0;font-family:var(--serif);font-weight:430;font-size:clamp(1.55rem,2.3vw,2.15rem);line-height:1.2;color:var(--nacht);text-wrap:balance;max-width:18em}
.ae-antwort dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px clamp(20px,3vw,40px)}
.ae-antwort dt{font-size:.78rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--farbe);margin:0 0 8px}
.ae-antwort dd{margin:0;color:var(--grau-1);font-size:1rem;line-height:1.6}
.ae-antwort dd+dt{grid-column:2;grid-row:1}
.ae-antwort dd:last-of-type{grid-column:2;grid-row:2;background:var(--farbe-hell);padding:14px 16px;color:var(--nacht);font-weight:500;border-left:3px solid var(--farbe)}
.ae-antwort dt:first-of-type{grid-column:1;grid-row:1}.ae-antwort dd:first-of-type{grid-column:1;grid-row:2}
.ae-wege{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:.95rem}
.ae-wege a{color:var(--nacht);text-decoration:none;border-bottom:1px solid var(--linie);padding:4px 0;min-height:32px;display:inline-flex;align-items:center;transition:border-color var(--t-schnell)}
.ae-wege a:hover{border-bottom-color:var(--farbe)}
.ae-wege a+a::before{content:"·";margin:0 12px;color:var(--grau-2)}
.ae-cta{margin:20px 0 0}
.ae-cta .knopf{background:var(--farbe);border-color:var(--farbe);padding:12px 18px;font-size:.95rem}
.ae-cta .knopf:hover{background:var(--nacht);border-color:var(--nacht)}

.bereiche{background:var(--gips);padding:clamp(48px,6vw,88px) 0 24px;border-top:1px solid var(--linie)}
.bereiche .kopfzeile{margin-bottom:32px}
.bereiche-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.bereich-kurz{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--farbe);color:#fff;padding:26px 26px 22px;min-height:240px;text-decoration:none;overflow:hidden;transition:transform .35s var(--kurve),box-shadow .35s var(--kurve)}
.bereich-kurz:hover{transform:translateY(-4px);box-shadow:0 34px 60px -36px rgba(11,31,51,.7)}
.bereich-kurz .bk-zeichen{position:absolute;right:14px;top:-6px;font-family:var(--serif);font-size:9rem;line-height:1;color:rgba(255,255,255,.14);transition:transform .6s var(--kurve)}
.bereich-kurz:hover .bk-zeichen{transform:translateY(8px)}
.bereich-kurz .bk-pikto{width:36px;height:36px;color:rgba(255,255,255,.8)}
.bereich-kurz .bk-titel{font-family:var(--serif);font-size:1.7rem;line-height:1.1;margin-top:auto;position:relative}
.bereich-kurz .bk-satz{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.86);position:relative;max-width:26em}
.bereich-kurz .bk-weiter{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;margin-top:8px;position:relative}
.bereich-kurz .bk-weiter svg{width:14px;height:14px;transition:transform var(--t-schnell) var(--kurve)}
.bereich-kurz:hover .bk-weiter svg{transform:translateX(3px)}
.bereiche .schriftfeld-fuss{border-top:1px solid var(--linie);margin-top:28px;color:var(--grau-1);font-size:.76rem}
.start-ausgang .sa-kopf p{color:rgba(255,255,255,.82);font-size:1.06rem;max-width:36em}
@media (max-width:1040px){
  .anliegen-eintrag{grid-template-columns:1fr;gap:18px;padding-left:22px}
  .anliegen-eintrag:nth-child(even) .ae-frage{padding-left:0}
  .ae-antwort dl{grid-template-columns:1fr}
  .ae-antwort dt,.ae-antwort dd,.ae-antwort dd+dt,.ae-antwort dd:last-of-type,.ae-antwort dt:first-of-type,.ae-antwort dd:first-of-type{grid-column:1;grid-row:auto}
  .bereiche-reihe{grid-template-columns:1fr;gap:12px}
  .bereich-kurz{min-height:0;padding:22px 22px 20px}
  .bereich-kurz .bk-zeichen{font-size:6.5rem}
}
@media (max-width:640px){
  .ae-nr{font-size:2rem}
  .ae-frage h3{font-size:1.45rem}
}
.hero.start .hülle{padding-bottom:clamp(56px,7vw,96px)}
@media (max-width:640px){.hero.start .hülle{padding-bottom:56px}}
@media (max-width:640px){.ae-wege{flex-direction:column;gap:2px}.ae-wege a+a::before{content:none}}
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}

/* ===== Lebendige Oberfläche 2026-10-14 f: Fortschritt, Schnellkontakt, Status, Zeichnung ===== */
.kopf{position:sticky}
.fortschritt{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:linear-gradient(90deg,var(--eng) 0 33.3%,var(--aus) 33.3% 66.6%,var(--tax) 66.6%);transform:scaleX(var(--f,0));transform-origin:left;pointer-events:none;z-index:2}
html:not(.js) .fortschritt{display:none}

.status-chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 14px 7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:.84rem;color:rgba(255,255,255,.88);background:rgba(255,255,255,.05)}
.status-chip i{width:9px;height:9px;border-radius:50%;background:#6DB3BE;box-shadow:0 0 0 0 rgba(109,179,190,.6);flex:none}
@media (prefers-reduced-motion:no-preference){.status-chip i{animation:leben 2.4s ease-out infinite}}
@keyframes leben{0%{box-shadow:0 0 0 0 rgba(109,179,190,.55)}70%{box-shadow:0 0 0 10px rgba(109,179,190,0)}100%{box-shadow:0 0 0 0 rgba(109,179,190,0)}}

.knopf.puls{box-shadow:0 0 0 0 rgba(255,255,255,.35)}
@media (prefers-reduced-motion:no-preference){.knopf.puls{animation:atem 3.2s ease-in-out infinite}.knopf.puls:hover{animation:none}}
@keyframes atem{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0),0 14px 34px -18px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.7)}}

/* Hero-Zeichnung reagiert auf Zeiger */
.hero-zeichnung .z-schicht,.hero-zeichnung .z-label{transition:fill-opacity .25s,opacity .25s,stroke .25s}
.hero-zeichnung.aktiv .z-schicht:not(.an){opacity:.45}
.hero-zeichnung.aktiv .z-label:not(.an){opacity:.35}
.hero-zeichnung .z-label.an{fill:#fff;font-weight:600}
.hero-zeichnung .z-schicht.an{stroke:#fff;stroke-width:2}
.hero-zeichnung .z-schicht{cursor:crosshair}
@media (prefers-reduced-motion:no-preference){
  .hero-zeichnung .z-pruef{animation:zeichnen 1.8s 1.1s var(--kurve) forwards,pruefen 4s 3s ease-in-out infinite}
  .hero-zeichnung .z-haken{animation:zeichnen 1.8s var(--kurve) forwards,haken 6s 3.5s ease-in-out infinite}
  .hero-zeichnung .z-haken:nth-of-type(2){animation-delay:1.9s,4s}.hero-zeichnung .z-haken:nth-of-type(3){animation-delay:2.1s,4.5s}
  .hero-zeichnung svg{transition:transform .6s var(--kurve)}
}
@keyframes pruefen{0%,100%{transform:scale(1);transform-origin:298px 250px;opacity:1}50%{transform:scale(1.08);transform-origin:298px 250px;opacity:.6}}
@keyframes haken{0%,80%,100%{opacity:1}88%{opacity:.15}}

/* Schnellkontakt */
.schnell{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--kurve),transform .35s var(--kurve)}
.schnell.da{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .schnell{opacity:1;transform:none;pointer-events:auto}
.schnell-knopf{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--nacht);color:#fff;border:1px solid rgba(255,255,255,.18);padding:14px 20px 14px 16px;text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transition:background var(--t-schnell),transform var(--t-schnell)}
.schnell-knopf:hover{background:var(--nacht-2);transform:translateY(-2px)}
.schnell-knopf svg{width:20px;height:20px;position:relative}
.schnell-puls{position:absolute;inset:-1px;border:1px solid rgba(255,255,255,.5);pointer-events:none;opacity:0}
@media (prefers-reduced-motion:no-preference){.schnell-puls{animation:ring 3s ease-out infinite}}
@keyframes ring{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
.schnell-knopf[aria-expanded="true"] .schnell-puls{display:none}
.schnell-panel{width:min(360px,calc(100vw - 36px));background:#fff;color:var(--tinte);box-shadow:0 30px 70px -30px rgba(11,31,51,.6);border:1px solid var(--linie);padding:16px 16px 12px;transform-origin:bottom right;animation:aufklappen .25s var(--kurve)}
@keyframes aufklappen{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.schnell-titel{margin:0 0 8px;font-family:var(--serif);font-size:1.25rem;color:var(--nacht)}
.schnell-panel a[data-b]{--farbe:var(--nacht);display:grid;grid-template-columns:1fr 16px;gap:2px 12px;align-items:center;padding:10px 12px;margin:0 -4px;border-left:3px solid var(--farbe);text-decoration:none;color:var(--tinte);transition:background var(--t-schnell)}
.schnell-panel a[data-b]:hover{background:var(--gips)}
.schnell-panel a[data-b="eng"]{--farbe:var(--eng)}.schnell-panel a[data-b="aus"]{--farbe:var(--aus)}.schnell-panel a[data-b="tax"]{--farbe:var(--tax)}
.schnell-panel a b{font-size:.95rem;color:var(--nacht)}
.schnell-panel a span{grid-column:1;font-size:.84rem;color:var(--grau-1)}
.schnell-panel a svg{grid-column:2;grid-row:1/3;width:16px;height:16px;color:var(--farbe)}
.schnell-fuss{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--linie-hell);font-size:.8rem;color:var(--grau-1)}
.schnell-fuss a{color:var(--nacht)}
@media (max-width:640px){
  .schnell{left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));align-items:stretch}
  .schnell-knopf{justify-content:center;padding:15px 18px}
  .schnell-panel{width:100%}
}
@media print{.schnell,.fortschritt{display:none}}

/* ===== SEO-Phase 1, 2026-10-17: Überschriftenebenen semantisch, Erscheinungsbild unverändert ===== */
.kette h2.schritt{font-family:var(--sans);letter-spacing:0;line-height:1.3;margin-top:0}
.kette .leistungen h3{margin:0 0 6px;font-size:1.04rem}
.person h2{font-family:var(--serif);font-weight:430;font-size:2rem;line-height:1.15;letter-spacing:-.01em;margin-bottom:6px}
.kontaktnebe aside h2{font-family:var(--sans);font-weight:620;color:#fff;font-size:1.05rem;letter-spacing:0;line-height:1.3;margin:1.2em 0 .5em}
.kontaktnebe aside h2:first-child{margin-top:0}
.hülle.schmal>h2,.abschnitt>.hülle>h2:first-child{margin-bottom:.8em}

/* ===== 2026-10-18 (b): Startseite – Überschrift, Bereichskacheln im ersten Blickfeld, Anliegen darunter ===== */
.hero.start .hülle{padding-top:clamp(36px,4.2vw,60px);padding-bottom:clamp(120px,11vw,150px)}
.hero.start h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.04;margin:0 0 .28em}
.hero.start h1 span{display:inline-block;margin-right:.55em}
.hero.start h1 span:last-child{margin-right:0}
.hero.start .lead{max-width:34em;margin:0;font-size:clamp(1.08rem,1.5vw,1.28rem)}
.wegweiser{position:relative;z-index:2;margin-top:clamp(-104px,-7.5vw,-84px);padding:0 0 clamp(36px,4vw,56px);background:linear-gradient(180deg,transparent 0,transparent clamp(84px,7.5vw,104px),var(--gips) clamp(84px,7.5vw,104px))}
.wegknoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);scroll-margin-top:92px}
.wegknopf{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;grid-template-areas:"pikto cue" ". ." "titel titel" "satz satz";gap:0 14px;align-items:end;background:var(--farbe);color:#fff;padding:24px 24px 22px;min-height:236px;text-decoration:none;overflow:hidden;box-shadow:0 26px 48px -30px rgba(11,31,51,.75);transition:transform .35s var(--kurve),box-shadow .35s var(--kurve),background .25s;cursor:pointer;animation:auf .7s var(--kurve) both}
.wegknopf:nth-child(2){animation-delay:.08s}.wegknopf:nth-child(3){animation-delay:.16s}
.wegknopf.k-eng{--farbe:var(--eng)}.wegknopf.k-aus{--farbe:var(--aus)}.wegknopf.k-tax{--farbe:var(--tax)}
.wegknopf:hover{transform:translateY(-4px);box-shadow:0 36px 56px -32px rgba(11,31,51,.8)}
.wegknopf:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.wegknopf .bk-zeichen{display:none}
.wegknopf .bk-pikto{grid-area:pikto;align-self:start;width:36px;height:36px;color:rgba(255,255,255,.88)}
.wegknopf .wk-titel{grid-area:titel;font-family:var(--serif);font-weight:430;font-size:clamp(1.8rem,2.5vw,2.25rem);line-height:1.08;margin:18px 0 10px}
.wegknopf .wk-satz{grid-area:satz;align-self:start;font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.9);min-height:4.5em}
.wegknopf .wk-cue{grid-area:cue;align-self:start;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:background .25s,color .25s}
.wegknopf .wk-cue svg{width:17px;height:17px;transform:rotate(90deg)}
.wegknopf:hover .wk-cue{background:#fff;color:var(--farbe)}
.wegknopf[aria-pressed="true"]{background:var(--nacht);box-shadow:0 0 0 3px var(--farbe) inset}
.wegknopf[aria-pressed="true"] .wk-cue{background:var(--farbe);border-color:var(--farbe)}
.wegknopf[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-1px;width:28px;height:14px;margin-left:-14px;background:var(--gips);clip-path:polygon(0 100%,50% 0,100% 100%)}
html.js [data-wegweiser].aktiv .weg-panel{display:none}
html.js [data-wegweiser].aktiv .weg-panel.zeigen{display:block;animation:auf .4s var(--kurve) both}
.weg-panel{--farbe:var(--eng);background:#fff;border-top:4px solid var(--farbe);box-shadow:0 30px 60px -44px rgba(11,31,51,.55);margin-top:clamp(22px,2.6vw,30px);scroll-margin-top:96px}
.weg-panel[data-b="aus"]{--farbe:var(--aus)}.weg-panel[data-b="tax"]{--farbe:var(--tax)}
.wp-liste{padding:14px 28px 6px;display:grid;gap:18px}
.wp-gruppe h2{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--grau-1);margin:12px 0 4px}
.wp-gruppe .lage{--farbe:var(--eng)}
.wp-gruppe[data-b="aus"] .lage{--farbe:var(--aus)}.wp-gruppe[data-b="tax"] .lage{--farbe:var(--tax)}
.wp-gruppe .lage>summary{padding-left:0;border-radius:0}
.wp-gruppe .lage-inhalt{padding-left:0;padding-right:0;max-width:860px}
.wp-gruppe .lage-inhalt dt{font-weight:600;color:var(--farbe)}
.wp-fuss{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;margin-top:8px;padding:18px 28px;background:var(--kalk);border-top:1px solid var(--linie-hell)}
.wp-bereich{font-weight:600;color:var(--farbe);display:inline-flex;gap:8px;align-items:center;min-height:44px}
.wp-bereich svg{width:14px;height:14px}
/* Schildern Sie Ihr Anliegen: eigener, abgegrenzter Abschnitt */
.anliegen-start{background:#fff;padding:clamp(52px,6.5vw,88px) 0;border-top:1px solid var(--linie)}
.as-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(26px,3.4vw,40px)}
.as-kopf h2{margin:0;font-size:clamp(2rem,3.8vw,3.1rem)}
.as-kopf p{margin:0;color:var(--grau-1);font-size:1.06rem;max-width:36em}
.as-wege{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.6vw,18px)}
.as-weg{position:relative;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;min-height:128px;padding:20px 22px;border:1.5px solid var(--linie);color:var(--nacht);text-decoration:none;background:var(--kalk);transition:border-color .2s,background .2s,transform .3s var(--kurve)}
.as-weg:hover{border-color:var(--nacht);transform:translateY(-3px)}
.as-weg:focus-visible{outline:3px solid var(--nacht);outline-offset:3px}
.as-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau-1)}
.as-wert{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15;overflow-wrap:anywhere}
.as-weg.haupt{background:var(--nacht);border-color:var(--nacht);color:#fff}
.as-weg.haupt .as-label{color:rgba(255,255,255,.7)}
.as-weg.haupt:hover{background:var(--nacht-3)}
.as-pfeil{position:absolute;right:18px;top:18px;width:40px;height:40px;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center}
.as-pfeil svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.wegknopf,.as-weg{transition:none;animation:none}.wegknopf:hover,.as-weg:hover{transform:none}html.js [data-wegweiser].aktiv .weg-panel.zeigen{animation:none}}
/* nach Auswahl: Kacheln werden zur schmalen Leiste, die Anliegen stehen direkt darunter */
[data-wegweiser].gewaehlt .wegknopf{min-height:0;padding:16px 20px 14px;grid-template-rows:auto;grid-template-areas:"titel cue";gap:0 14px;align-items:center}
[data-wegweiser].gewaehlt .wegknopf .wk-satz,[data-wegweiser].gewaehlt .wegknopf .bk-pikto{display:none}
[data-wegweiser].gewaehlt .wegknopf .wk-titel{margin:0;font-size:clamp(1.35rem,1.9vw,1.7rem)}
[data-wegweiser].gewaehlt .wegknopf .wk-cue{width:34px;height:34px;align-self:center}
[data-wegweiser].gewaehlt .wegknopf .bk-zeichen{display:none}
.wegweiser.gewaehlt{background:linear-gradient(180deg,transparent 0,transparent 30px,var(--gips) 30px)}
[data-wegweiser].gewaehlt .wegknopf:not([aria-pressed="true"]){opacity:.86}
@media (max-width:1040px){
  .hero.start h1 span{display:block;margin-right:0}
  .hero.start .hülle{padding-bottom:clamp(84px,18vw,110px)}
  .wegweiser{margin-top:-64px;background:linear-gradient(180deg,transparent 0,transparent 64px,var(--gips) 64px)}
  .wegknoepfe{grid-template-columns:1fr}
  .wegknopf{min-height:0;padding:20px 20px 18px;grid-template-rows:auto auto;grid-template-areas:"titel cue" "satz cue";gap:6px 14px;align-items:center}
  .wegknopf .wk-satz{min-height:0}
  .wegknopf .bk-pikto{display:none}
  .wegknopf .wk-titel{margin:0}
  .wegknopf[aria-pressed="true"]::after{display:none}
  [data-wegweiser].gewaehlt .wegknopf{padding:14px 18px 12px}
  .wegweiser.gewaehlt{background:linear-gradient(180deg,transparent 0,transparent 26px,var(--gips) 26px)}
  .wp-liste,.wp-fuss{padding-left:18px;padding-right:18px}
  .wp-fuss .knopf{width:100%;justify-content:space-between}
  .as-kopf{grid-template-columns:1fr}
  .as-wege{grid-template-columns:1fr}
  .as-weg{min-height:0;padding:18px 20px}
}

/* ---------- Rahmen Weiche 2026-10-18: Unterseiten an Startseite und Bereichsseiten angleichen (Inhalte unverändert) ---------- */
.nav li[data-nav="situation"]{display:none}
.nav .cta>a{background:#fff;color:var(--nacht);border-radius:2px}
.nav .cta>a:hover{background:var(--gips);color:var(--nacht)}
.nav-tel{display:block;padding:10px 12px;margin-left:6px;font-size:.95rem;color:rgba(255,255,255,.72);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-tel:hover{color:#fff}
body .seitenkopf{background:var(--akzent);color:#fff;border-bottom:0;overflow:hidden;isolation:isolate}
body:not([data-bereich]) .seitenkopf,body[data-bereich=""] .seitenkopf{background:var(--nacht)}
body .seitenkopf::before{top:0;left:0;right:0;bottom:0;height:auto;width:auto;z-index:-1;background:transparent;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 100%);mask-image:linear-gradient(90deg,transparent 20%,#000 100%)}
body .seitenkopf h1,body .seitenkopf h2,body .seitenkopf h3{color:#fff}
body .seitenkopf .pfad,body .seitenkopf .pfad a,body .seitenkopf .lead,body .seitenkopf p{color:rgba(255,255,255,.86)}
body .seitenkopf .pfad span{color:rgba(255,255,255,.4)}
body .seitenkopf .rollenzeile{color:#fff}
body .seitenkopf .rollenzeile i{background:#fff}
body .seitenkopf .knopf{background:#fff;color:var(--nacht);border-color:#fff}
body .seitenkopf .knopf.rahmen{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
body .seitenkopf .hinweisbox{background:rgba(255,255,255,.1);border-left-color:#fff;color:#fff}
body .seitenkopf .hinweisbox strong{color:#fff}
body .seitenkopf a{color:#fff}
@media (max-width:1040px){.nav-tel{padding:12px 4px;margin:4px 0 0}}
body .seitenkopf .rollenzeile *{color:rgba(255,255,255,.8)}