@font-face{font-family:'Playfair Display Variable';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-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:'Playfair Display Variable';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-italic.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:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/poppins-300.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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400.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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.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;}
/* AYDIN Steuerberatung, Stylesheet v8
   Farben verbindlich nach Aydin-Guidelines: Weiß #f9f9f9, Salbei #c8c7b7, Sand #e1d8cf, Graphit #262722.
   Ein Abstandssystem für alle Abschnitte; Schräge 21° aus dem Signet als einziges grafisches Motiv. */
:root {
  --graphit: #262722;
  --tief: #1a1a17;
  --salbei: #c8c7b7;
  --sand: #e1d8cf;
  --weiss: #f9f9f9;
  --papier: #fdfcfb;
  --stein: #57584f;
  --nebel: #a7a89b;
  --linie: rgba(38, 39, 34, .14);
  --linie-hell: rgba(249, 249, 249, .16);
  --serif: "Playfair Display Variable", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --max: clamp(1440px, 84vw, 1640px);
  --spalt: clamp(16px, 2vw, 32px);
  --abstand: clamp(84px, 9vw, 152px);
  --abstand-s: clamp(56px, 6vw, 96px);
  --luft: clamp(40px, 5vw, 76px);
  --kopf: 104px;
  --kopf-klein: 84px;
  --tan: .3839;
  --akzent: #a3a28f;
  --sanft: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scroll-padding-top: 96px; }
body { overflow-wrap: break-word; margin: 0; background: var(--weiss); color: var(--graphit); font: 400 1rem/1.75 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; overflow-wrap: normal; }
html { font-variant-numeric: lining-nums; }
.buehne-zitat p, .index-titel, .weiterblaettern b { overflow-wrap: normal; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--salbei); color: var(--graphit); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.knopf:focus-visible { outline-color: var(--graphit); }
.knopf-hell:focus-visible, .dunkel .knopf:not(.knopf-linie):focus-visible, .kopf[data-tone="dunkel"] .knopf-kopf:focus-visible, .band .knopf:focus-visible { outline-color: var(--sand); }
.knopf-linie:focus-visible { outline-color: currentColor; }
h1[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.raster { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.zwoelf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: fixed; left: var(--gutter); top: -80px; z-index: 100; background: var(--graphit); color: var(--weiss); padding: .7rem 1.1rem; border-radius: 999px; text-decoration: none; }
.sprung:focus { top: 14px; }

/* ---------- Typografie ---------- */
.riesig { font-size: clamp(3rem, 1rem + 6.2vw, 8.2rem); line-height: .96; letter-spacing: -.03em; }
.titel { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 5rem); line-height: 1.04; letter-spacing: -.022em; }
.titel-m { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.07; letter-spacing: -.016em; }
.titel-s { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; }
.lead { font-weight: 300; font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.65; }
.klein { font-size: .8125rem; line-height: 1.6; letter-spacing: .01em; }
.leise { color: var(--stein); }
.dunkel .leise { color: var(--nebel); }
.ziffer { font-variant-numeric: tabular-nums lining-nums; }
.marke-punkt { display: inline-block; width: 8px; height: 8px; background: var(--salbei); transform: skewX(-21deg); flex: none; }
.ueberzeile { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font: 400 .75rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--stein); }
.ueberzeile::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.uz-pre { display: inline-flex; align-items: center; gap: 14px; }
.uz-pre::after { content: ""; width: 6px; height: 6px; background: var(--salbei); transform: skewX(-21deg); flex: none; }
.dunkel .ueberzeile { color: var(--nebel); }

/* ---------- Knöpfe und Links ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .75em; padding: 1.05rem 1.75rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--graphit); color: var(--weiss); font: 500 .9375rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.knopf:hover { background: #3b3c35; }
.knopf-hell { background: var(--sand); color: var(--graphit); }
.knopf-hell:hover { background: var(--weiss); }
.knopf-linie { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.knopf-linie:hover { background: rgba(127, 127, 120, .12); }
.pfeil { display: inline-block; width: 18px; height: 1px; background: currentColor; position: relative; transition: width .3s var(--sanft); flex: none; }
.pfeil::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
a:hover > .pfeil, button:hover > .pfeil { width: 26px; }
.textlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .2s ease; }
.textlink:hover { text-decoration-color: currentColor; }
.knopf-text { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.kreis { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(38, 39, 34, .3); display: grid; place-items: center; justify-self: end; flex: none; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.kreis::before { content: ""; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.kreis.runter::before { transform: translateY(-2px) rotate(135deg); }
a:hover > .kreis { background: var(--graphit); color: var(--weiss); box-shadow: none; }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 60; color: var(--graphit); border-bottom: 1px solid transparent; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.kopf.gescrollt { background: rgba(249, 249, 249, .92); border-bottom-color: var(--linie); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.kopf[data-tone="dunkel"] { color: var(--weiss); }
.kopf.gescrollt[data-tone="dunkel"] { background: rgba(38, 39, 34, .9); border-bottom-color: var(--linie-hell); }
.kopf-innen { display: flex; align-items: center; gap: 40px; height: var(--kopf); transition: height .35s var(--sanft); }
.kopf.gescrollt .kopf-innen { height: var(--kopf-klein); }
.logo { display: block; line-height: 0; flex: none; }
.logo svg { height: 58px; width: auto; transition: height .35s var(--sanft); }
.kopf.gescrollt .logo svg { height: 48px; }
.nav { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.nav-link { position: relative; font-size: .9375rem; letter-spacing: .01em; text-decoration: none; opacity: .85; padding: 10px 0; transition: opacity .2s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { opacity: 1; }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; }
.nav-punkt { position: relative; }
.nav-panel { position: absolute; top: 100%; left: -32px; width: 500px; padding: 12px; margin-top: 18px; background: var(--papier); color: var(--graphit); border-radius: 4px; box-shadow: 0 26px 64px rgba(26, 26, 23, .16), 0 0 0 1px var(--linie); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s var(--sanft), visibility 0s .25s; }
@media (max-height: 800px) { .nav-panel a { padding-top: 8px; padding-bottom: 8px; } .nav-panel span { display: none; } }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav-punkt:hover .nav-panel, .nav-punkt:focus-within .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-punkt.zu .nav-panel { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, visibility 0s .15s; }
.nav-panel a:hover { background: rgba(225, 216, 207, .5); }
.nav-panel b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.25; }
.nav-panel a + a { border-top: 1px solid var(--linie); }
.nav-panel a.nav-panel-fuss { margin-top: 8px; border-top: 0; background: rgba(200, 199, 183, .22); }
.nav-panel a.nav-panel-fuss:hover { background: rgba(200, 199, 183, .4); }
.knopf-kopf { padding: 1rem 1.5rem; font-size: .875rem; }
.kopf[data-tone="dunkel"] .knopf-kopf { background: var(--sand); color: var(--graphit); }
.menue-knopf { display: none; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font: 500 .9375rem/1 var(--sans); padding: 12px 0; cursor: pointer; }
.menue-knopf i { display: block; width: 24px; height: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform .3s var(--sanft); }
.menue-knopf[aria-expanded="true"] i { transform: scaleX(.6); }
.menue { position: fixed; inset: 0; z-index: 59; background: var(--graphit); color: var(--weiss); padding: 108px var(--gutter) 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow-y: auto; }
.menue nav { display: grid; gap: 2px; }
.kopf.menue-offen { background: var(--graphit); border-bottom-color: var(--linie-hell); }
.menue:not([hidden]) { animation: menue-ein .42s var(--sanft) both; }
.menue.schliesst { animation: menue-aus .24s ease both; }
.menue:not([hidden]) nav > a, .menue:not([hidden]) .unter, .menue:not([hidden]) .menue-fuss { animation: zeile .6s var(--sanft) both; }
.menue:not([hidden]) nav > :nth-child(2) { animation-delay: .04s; } .menue:not([hidden]) nav > :nth-child(3) { animation-delay: .08s; }
.menue:not([hidden]) nav > :nth-child(4) { animation-delay: .12s; } .menue:not([hidden]) nav > :nth-child(5) { animation-delay: .16s; }
.menue:not([hidden]) nav > :nth-child(n+6), .menue:not([hidden]) .menue-fuss { animation-delay: .2s; }
@keyframes menue-ein { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes menue-aus { to { opacity: 0; } }
.menue nav > a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.28; text-decoration: none; }
.menue .unter { display: grid; padding: 2px 0 12px 18px; border-left: 1px solid var(--linie-hell); margin: 4px 0 8px; }
.menue .unter a { font-size: 1rem; line-height: 2; color: var(--nebel); text-decoration: none; }
.menue-fuss { display: grid; gap: 16px; color: var(--nebel); font-size: .9375rem; }
.menue-fuss a:not(.knopf) { text-decoration: none; }

/* ---------- Seiten und Übergang ---------- */
main { transition: opacity .28s ease; }
.wisch { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.wisch i { position: absolute; top: -10%; height: 120%; left: calc(-23vh - 24px); width: calc(100vw + 46vh + 48px); transform: translateX(-102%) skewX(-21deg); }
.wisch i:nth-child(1) { background: var(--salbei); }
.wisch i:nth-child(2) { background: var(--sand); }
.wisch-an .wisch i { transform: translateX(0) skewX(-21deg); }

/* ---------- Abschnitte, Töne, Abstände ---------- */
.abschnitt { position: relative; padding-block: var(--abstand); overflow-x: clip; }
.hell { background: var(--weiss); }
.sandig { background: linear-gradient(180deg, #e6dfd8 0%, var(--sand) 100%); }
.sandhell { background: linear-gradient(180deg, #f4f0eb 0%, #ede7e0 100%); }
.salbeig { background: linear-gradient(180deg, #e9e8e1 0%, #dcdbcf 100%); }
.dunkel { background: radial-gradient(110% 80% at 100% 0%, #34352f 0%, var(--graphit) 58%); color: var(--weiss); }
.abschnitt.hell + .abschnitt.hell, .seite-kopf + .abschnitt.hell { padding-top: 0; }
.kopfzeile { align-items: end; row-gap: 24px; }
.kopfzeile > :first-child { grid-column: 1 / span 7; }
.kopfzeile > :last-child { grid-column: 8 / span 5; }
.kopfzeile > p.lead { max-width: 46ch; }
.kopfzeile + * { margin-top: var(--luft); }

/* ---------- Seitenköpfe ---------- */
.seite-kopf { overflow-x: clip; padding-top: calc(var(--kopf) + clamp(48px, 6vw, 96px)); padding-bottom: var(--abstand-s); }
.seite-kopf .zwoelf { align-items: end; row-gap: 48px; }
.seite-kopf-text { grid-column: 1 / span 7; }
.seite-kopf-bild { grid-column: 8 / span 5; }
.seite-kopf .lead { margin-top: 28px; max-width: 48ch; color: var(--stein); }
.seite-kopf-aktionen { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.seite-kopf-text-only .kopfzeile { align-items: end; }
.fehler-lead { margin-top: 28px; max-width: 46ch; }

/* ---------- Bilder ---------- */
.bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild img[data-parallax] { transform: scale(1.1); will-change: transform; }
figcaption { margin-top: 14px; font-size: .8125rem; color: var(--stein); }
.rahmen-bild { position: relative; isolation: isolate; }
.rahmen-bild::before { content: ""; position: absolute; z-index: -1; left: -9%; top: 20%; bottom: -6%; width: 54%; background: var(--sand); transform: skewX(-21deg); transform-origin: 0 100%; }
.rahmen-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand); }

/* ---------- Startbühne: das Signet als Fenster ---------- */
.buehne { position: relative; height: 250vh; height: 250svh; background: var(--weiss); }
.buehne-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  --s: min(calc(64svh / 56.63), calc(40vw / 56.27)); --l: calc(100vw - var(--gutter) - 56.27 * var(--s) - 3vw); --t: calc((100svh - 56.63 * var(--s)) / 2 + 5svh); }
.fenster { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.fenster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 30%; max-width: none; will-change: transform; }
.fenster-a { --ton: var(--salbei); clip-path: polygon(calc(var(--l) + 44.3 * var(--s)) var(--t), calc(var(--l) + 33.49 * var(--s)) calc(var(--t) + 28.18 * var(--s)), calc(var(--l) + 19.42 * var(--s)) calc(var(--t) + 28.18 * var(--s)), calc(var(--l) + 20.4 * var(--s)) calc(var(--t) + 30.72 * var(--s)), calc(var(--l) + 26.45 * var(--s)) calc(var(--t) + 46.51 * var(--s)), calc(var(--l) + 22.57 * var(--s)) calc(var(--t) + 56.63 * var(--s)), var(--l) calc(var(--t) + 56.63 * var(--s)), calc(var(--l) + 21.71 * var(--s)) var(--t)); animation: rein-a 1.6s var(--sanft) .1s both; }
.fenster-b { --ton: var(--sand); clip-path: polygon(calc(var(--l) + 56.27 * var(--s)) calc(var(--t) + 56.63 * var(--s)), calc(var(--l) + 33.68 * var(--s)) calc(var(--t) + 56.63 * var(--s)), calc(var(--l) + 29.12 * var(--s)) calc(var(--t) + 45.02 * var(--s)), calc(var(--l) + 23.81 * var(--s)) calc(var(--t) + 31.16 * var(--s)), calc(var(--l) + 46.4 * var(--s)) calc(var(--t) + 31.16 * var(--s))); animation: rein-b 1.6s var(--sanft) .28s both; }
.fenster-b::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(26, 26, 23, .78) 0%, rgba(26, 26, 23, .36) 40%, rgba(26, 26, 23, 0) 70%); opacity: var(--dunkel, 0); pointer-events: none; }
.fenster-a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(26, 26, 23, .78) 0%, rgba(26, 26, 23, .36) 40%, rgba(26, 26, 23, 0) 70%); opacity: var(--dunkel, 0); pointer-events: none; }
@keyframes rein-a { from { opacity: 0; transform: translate(-2%, -3%); } }
@keyframes rein-b { from { opacity: 0; transform: translate(2%, 3%); } }
.buehne-raster { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding-top: calc(var(--kopf) * .6); pointer-events: none; }
.buehne-text { max-width: min(48vw, 660px); pointer-events: auto; }
.buehne h1 > span { display: block; animation: zeile 1.2s var(--sanft) both; }
.buehne h1 .ueberzeile { display: flex; margin-bottom: clamp(20px, 2.4vw, 32px); }
.buehne h1 > span:nth-child(1) { animation-delay: .1s; }
.buehne h1 > span:nth-child(2) { animation-delay: .2s; }
.buehne h1 > span:nth-child(3) { animation-delay: .32s; }
.buehne h1 > span:nth-child(4) { animation-delay: .44s; }
@keyframes zeile { from { opacity: 0; transform: translateY(.3em); } }
.buehne-sub { margin-top: clamp(22px, 3vh, 34px); max-width: 40ch; color: var(--stein); animation: zeile 1.2s var(--sanft) .56s both; }
.buehne-aktionen { margin-top: clamp(26px, 3.6vh, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; animation: zeile 1.2s var(--sanft) .66s both; }
.buehne-aktionen .knopf { padding: 1.1rem 1.8rem; font-size: 1rem; }
.vertrauen { margin-top: clamp(28px, 4.6vh, 52px); display: inline-flex; align-items: center; gap: 20px; color: var(--stein); text-decoration: none; animation: zeile 1.2s var(--sanft) .8s both; }
.vertrauen-marken { display: flex; align-items: center; gap: 16px; flex: none; }
.vertrauen .datev-mitglied { width: 54px; height: 54px; filter: drop-shadow(0 0 .6px rgba(38, 39, 34, .45)) drop-shadow(0 6px 14px rgba(38, 39, 34, .08)); }
.vertrauen-marken img { width: auto; height: 46px; }
.vertrauen-text { padding-left: 20px; border-left: 1px solid var(--linie); font-size: .8125rem; line-height: 1.5; }
.vertrauen:hover .vertrauen-text { color: var(--graphit); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.buehne-zitat { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 11vh, 120px); margin: 0 auto; max-width: var(--max); padding-inline: var(--gutter); color: var(--weiss); opacity: 0; pointer-events: none; }
.buehne-zitat blockquote { margin: 0; }
.buehne-zitat p { font-family: var(--serif); font-size: clamp(2rem, 1rem + 3.2vw, 4.2rem); line-height: 1.06; letter-spacing: -.02em; max-width: 16em; text-wrap: balance; }
.buehne-zitat p span { color: var(--sand); }
.buehne-zitat figcaption { display: block; margin-top: 20px; font-size: .875rem; color: rgba(249, 249, 249, .82); }
.buehne-fuss { position: absolute; z-index: 2; left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); bottom: 22px; color: var(--stein); }
.buehne-fuss .hinweis { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.hinweis { display: inline-flex; align-items: center; gap: 12px; }
.hinweis i { position: relative; display: block; width: 1px; height: 34px; background: var(--linie); overflow: hidden; }
.hinweis i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--graphit); transform: translateY(-100%); animation: lauf 2.4s ease-in-out infinite; }
@keyframes lauf { to { transform: translateY(250%); } }
.buehne.gescrollt .hinweis i::after { animation-play-state: paused; }

/* ---------- Einführung ---------- */
.einf-titel { grid-column: 1 / span 7; }
.einf-zeile { display: block; }
/* Wechselwort: dunkles Salbei, kursiv, Salbei-Unterstreichung; der Punkt fährt mit dem Wort, der Rahmen schneidet nur das ein- und ausfahrende Wort ab */
.wechsel { --wechsel-farbe: #7d7b66; position: relative; display: inline-block; vertical-align: top; overflow: hidden; white-space: nowrap; padding: 0 .1em .28em .16em; margin: 0 -.1em -.28em -.16em; }
.wechsel-wort { display: inline-block; transition: transform .62s var(--sanft), opacity .42s ease; }
.ww { font-style: italic; color: var(--wechsel-farbe); text-decoration: underline; text-decoration-color: var(--salbei); text-decoration-thickness: max(2px, .04em); text-underline-offset: .14em; text-decoration-skip-ink: auto; }
.wechsel-wort.kommt { transform: translateY(85%); opacity: 0; }
.wechsel-wort.geht { position: absolute; left: .16em; top: 0; transform: translateY(-85%); opacity: 0; transition: transform .46s var(--sanft), opacity .2s ease; }
.einf-text { grid-column: 8 / span 5; align-self: end; display: grid; gap: 20px; color: var(--stein); }
.einf-text p { max-width: 46ch; }
.einf-text .textlink { color: var(--graphit); justify-self: start; font-size: .9375rem; }
.einf-text .knopf { justify-self: start; }

/* ---------- Leistungsindex ---------- */
.index { border-bottom: 1px solid var(--linie); }
.index-zeile { display: grid; grid-template-columns: 56px minmax(0, 7fr) minmax(0, 4fr) 48px; gap: 24px; align-items: center; padding: clamp(22px, 2.6vw, 38px) 0; border-top: 1px solid var(--linie); text-decoration: none; }
.index-titel { font-family: var(--serif); font-size: clamp(1.9rem, 1.05rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.024em; transition: transform .5s var(--sanft); }
.index-zeile:hover .index-titel { transform: translateX(14px); }
.index-zeile p { font-size: .9375rem; color: var(--stein); line-height: 1.6; }
.index-zeile:hover .kreis { background: var(--graphit); color: var(--weiss); box-shadow: none; }
/* Hover der Leistungsliste: schräge Sandfläche fährt ein, die übrigen Zeilen treten zurück */
.index-zeile { position: relative; isolation: isolate; transition: opacity .4s ease; }
.index-zeile::before { content: ""; position: absolute; z-index: -1; top: -1px; bottom: 0; left: calc(-1 * min(70px, var(--gutter) - 8px)); right: max(0px, calc(var(--zh, 130px) * .384 + 8px - var(--gutter))); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .index-zeile::before { background: rgba(225, 216, 207, .62); transform-origin: 0 100%; transform: skewX(-21deg) scaleX(0); transition: transform .6s var(--sanft); }
  .index-zeile:hover::before { transform: skewX(-21deg) scaleX(1); }
  .index:hover .index-zeile:not(:hover):not(:focus-visible) { opacity: .5; }
  .index-zeile:focus-visible::before { transform: skewX(-21deg) scaleX(1); }
  .index-zeile:hover p { color: var(--graphit); }
  .index-zeile .index-sym { transition: transform .5s var(--sanft); }
  .index-zeile:hover .index-sym { transform: translateX(6px); }
  .index-zeile:hover .kreis::before { animation: kreis-pfeil .5s var(--sanft); }
}
@keyframes kreis-pfeil { 0% { transform: translateX(-2px) rotate(45deg); } 45% { transform: translateX(8px) rotate(45deg); opacity: 0; } 55% { transform: translateX(-12px) rotate(45deg); opacity: 0; } 100% { transform: translateX(-2px) rotate(45deg); opacity: 1; } }
.index-zeile:focus-visible { outline: 2px solid var(--graphit); outline-offset: 6px; }
@media not all and (hover: hover) { .index-zeile:focus-visible::before { background: rgba(225, 216, 207, .62); transform: skewX(-21deg); transform-origin: 0 100%; } }
.index-klein .index-titel { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.7rem); }

/* ---------- Einblicke ---------- */
.einblick { position: relative; height: 400vh; height: 400svh; background: linear-gradient(180deg, var(--weiss) 0%, #f4f0eb 14%, #eee8e1 100%); }
.abschnitt:has(+ .einblick) { padding-bottom: var(--abstand-s); }
.einblick-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--kopf-klein); overflow: hidden; }
.einblick-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: center; width: 100%; }
.einblick-werte { position: relative; display: grid; container-type: inline-size; }
.wert-karte { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s ease, transform .3s ease, visibility 0s .18s; pointer-events: none; }
.wert-karte.an { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .45s ease .2s, transform .7s var(--sanft) .2s, visibility 0s .18s; }
.wert-karte h3 { font-size: min(clamp(1.6rem, 1.25rem + 1.9vw, 3rem), 13.2cqi); line-height: 1.02; letter-spacing: -.028em; }
.wert-karte > p { margin-top: 16px; max-width: 36ch; color: var(--stein); }
.wert-karte .wert-ort { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--stein); }
.wert-ort i { width: 8px; height: 8px; background: var(--salbei); transform: skewX(-21deg); }
.wert-bild { display: none; }
.einblick-marken { display: flex; gap: 8px; margin: 0 0 34px; }
.einblick-marken i { width: 26px; height: 6px; background: var(--linie); transform: skewX(-21deg); transition: background-color .4s ease; }
.einblick-marken i.an { background: var(--graphit); }
.einblick-buehne { position: relative; isolation: isolate; justify-self: end; width: min(100%, calc(100svh - var(--kopf-klein) - 120px)); }
.einblick-buehne::before { content: ""; position: absolute; z-index: -1; left: -14%; top: 14%; bottom: -6%; width: 54%; background: var(--salbei); opacity: .55; transform: skewX(-21deg); transform-origin: 0 100%; }
.einblick.statisch { height: auto; }
.einblick.statisch .einblick-sticky { position: relative; height: auto; padding-block: var(--abstand); overflow: visible; }
.einblick.statisch .einblick-raster { grid-template-columns: 1fr; }
.einblick.statisch .einblick-werte { min-height: 0; margin-top: var(--luft); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--spalt); }
.einblick.statisch .wert-karte { grid-area: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.einblick.statisch .wert-karte h3 { font-size: clamp(1.6rem, 1.25rem + 1.9vw, 3rem); }
.einblick.statisch .einblick-text > .knopf { margin-top: 56px; }

/* ---------- Lebenszyklen ---------- */
.zeitpunkt { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--weiss); }
@keyframes tafel { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Branchen-Explorer ---------- */
.branchen-ex { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); border-top: 1px solid rgba(38, 39, 34, .18); }
.bx-knopf { grid-column: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 2px 12px; align-items: baseline; width: 100%; padding: 15px 0; background: none; border: 0; border-bottom: 1px solid rgba(38, 39, 34, .18); color: var(--stein); font: inherit; text-align: left; cursor: pointer; transition: color .25s ease; }
.bx-name { font-family: var(--serif); font-size: clamp(1.2rem, 1.02rem + .55vw, 1.55rem); line-height: 1.2; color: var(--graphit); transition: transform .45s var(--sanft); }
.bx-kurz { grid-column: 2; font-size: .8125rem; line-height: 1.5; }
.bx-zeichen { grid-column: 3; grid-row: 1; align-self: center; width: 10px; height: 10px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .25s ease, transform .35s var(--sanft); }
.bx-knopf:hover .bx-name, .bx-knopf[aria-expanded="true"] .bx-name { transform: translateX(8px); }
.bx-knopf[aria-expanded="true"] { color: var(--graphit); }
.bx-knopf[aria-expanded="true"] .bx-zeichen { opacity: 1; }
.bx-knopf:focus-visible { outline: 2px solid var(--graphit); outline-offset: 2px; }
.bx-panel { grid-column: 2; grid-row: 1 / span 13; align-self: start; position: sticky; top: 112px; margin-top: 28px; padding: clamp(28px, 3vw, 52px); background: radial-gradient(120% 90% at 100% 0%, #34352f 0%, var(--graphit) 60%); color: var(--weiss); box-shadow: 0 34px 70px -44px rgba(26, 26, 23, .6); animation: bx-ein .6s var(--sanft) backwards; overflow: hidden; }
.bx-panel::after { content: ""; position: absolute; right: -6%; top: 0; width: 34%; height: 100%; background: rgba(225, 216, 207, .05); transform: skewX(-21deg); transform-origin: 100% 0; pointer-events: none; }
@keyframes bx-ein { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.bx-panel h3 { margin-top: 22px; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.08; letter-spacing: -.016em; }
.bx-satz { margin-top: 16px; color: var(--nebel); max-width: 46ch; }
.bx-label { margin-top: 28px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebel); }
.bx-themen { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.bx-themen li { padding: .55rem 1.2rem; font-size: .875rem; line-height: 1.35; color: var(--graphit); background: var(--sand); clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.bx-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bx-links a { color: var(--weiss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: rgba(249, 249, 249, .35); }
.bx-links a:hover { text-decoration-color: var(--weiss); }
.bx-aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.bx-aktionen .textlink { color: var(--weiss); }

/* ---------- Kacheln, Listen ---------- */
.branchen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.branche { padding: clamp(24px, 2.4vw, 36px); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 12px; background: var(--papier); }
.branche h3 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.8rem); line-height: 1.15; }
.branche p { color: var(--stein); font-size: 1rem; line-height: 1.6; }
.bereich-branchen { margin-top: var(--luft); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: baseline; }
.bereich-branchen > p { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stein); }
.bereich-branchen nav { display: flex; flex-wrap: wrap; gap: 8px; }
.bereich-branchen a, .themen-gross li { text-decoration: none; }
.bereich-branchen a { padding: .6rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); font-size: .875rem; line-height: 1.3; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.bereich-branchen a:hover { background: var(--graphit); color: var(--weiss); box-shadow: none; }
.themen-gross { display: flex; flex-wrap: wrap; gap: 12px; }
.themen-gross li { padding: 1rem 1.7rem; background: var(--papier); font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); line-height: 1.3; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.liste-gross { display: grid; border-top: 1px solid var(--linie); }
.liste-gross li { display: flex; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--linie); font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); line-height: 1.3; }
.liste-gross li .marke-punkt { transform: skewX(-21deg) translateY(-4px); }
.mehrwert { margin-top: 36px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--graphit); border-bottom: 1px solid var(--linie); }
.mehrwert span { font-size: .8125rem; color: var(--stein); }
.mehrwert p { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); line-height: 1.25; }

/* ---------- Branchenseite ---------- */
.branche-zeichen { grid-column: 9 / span 4; align-self: stretch; position: relative; isolation: isolate; display: grid; place-items: center; min-height: 300px; }
.branche-zeichen::before { content: ""; position: absolute; z-index: -1; left: 30%; right: 18%; bottom: 0; top: 4%; background: var(--sand); transform: skewX(-21deg); transform-origin: 50% 50%; }

/* ---------- Netzwerk ---------- */
.netzwerk { overflow: clip; }
.netzwerk::before { content: ""; position: absolute; left: -10vw; top: 0; bottom: 0; width: 32vw; background: rgba(225, 216, 207, .035); transform: skewX(-21deg); pointer-events: none; }
.netz-raster { position: relative; align-items: start; row-gap: 56px; }
.netz-bild { grid-column: 1 / span 5; position: sticky; top: 120px; }
.netz-text { grid-column: 7 / span 6; }
.netz-text .lead { margin-top: 24px; max-width: 46ch; }
.netz-karte { margin: clamp(28px, 3.6vw, 52px) 0 0; }
.netz-svg { width: 100%; height: auto; overflow: visible; }
.netz-linie { fill: none; stroke: rgba(225, 216, 207, .42); stroke-width: 1.2; stroke-dasharray: calc(var(--l) * 1px); stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--sanft) calc(var(--i) * .12s); }
.js .netz-knoten { opacity: 0; transform: translateY(10px); transition: opacity .7s ease calc(.35s + var(--i) * .12s), transform .9s var(--sanft) calc(.35s + var(--i) * .12s); }
.netz-zahl { font-family: var(--serif); font-size: 54px; fill: var(--sand); font-variant-numeric: lining-nums tabular-nums; }
.netz-wort { font-family: var(--serif); font-size: 27px; fill: var(--sand); }
.netz-name { font-family: var(--sans); font-size: 15px; fill: var(--weiss); fill-opacity: .82; }
.netz-kreis { fill: var(--tief); stroke: rgba(225, 216, 207, .5); stroke-width: 1; }
.netz-welle { fill: none; stroke: var(--sand); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.netz-puls { fill: var(--sand); visibility: hidden; }
.js .netzwerk:not(.sichtbar) .netz-linie { stroke-dashoffset: calc(var(--l) * 1px); }
.netzwerk.sichtbar .netz-knoten { opacity: 1; transform: none; }
.netzwerk.sichtbar .netz-welle { animation: welle 4.8s ease-out 1.4s infinite; }
.netzwerk.sichtbar .netz-puls { visibility: visible; }
@keyframes welle { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
.netz-liste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mitgliedschaften ---------- */
.mitglieder { overflow: clip; }
.mitglied-raster { row-gap: 40px; align-items: center; }
.mitglied-kopf { grid-column: 1 / span 5; }
.mitglied-kopf .lead { margin-top: 24px; }
.mitglied-liste { grid-column: 7 / span 6; display: grid; gap: 14px; }
.mitglied-liste li { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(24px, 2.6vw, 36px); background: var(--papier); box-shadow: 0 0 0 1px var(--linie), 0 24px 48px -40px rgba(26, 26, 23, .35); }
.mitglied-marke { display: flex; align-items: center; justify-content: center; height: 96px; }
.mitglied-marke .datev { height: 76px; width: auto; color: var(--graphit); }
.mitglied-marke .stbk { width: 168px; height: auto; }
.mitglied-text h3 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.75rem); line-height: 1.15; }
.mitglied-text p { margin-top: 8px; color: var(--stein); font-size: .9375rem; line-height: 1.65; }
.mitglied-text .textlink { display: inline-block; margin-top: 10px; font-size: .9375rem; }

/* ---------- Person ---------- */
.person { align-items: center; row-gap: 56px; }
.person-bild { grid-column: 1 / span 5; }
.person-text { position: relative; z-index: 1; grid-column: 7 / span 6; }
.person-rolle { margin-top: 12px; }
.person-text > p:not(.ueberzeile):not(.person-rolle) { margin-top: 22px; max-width: 58ch; }
.person-text blockquote { margin-top: clamp(32px, 4vw, 52px); padding-left: clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--salbei); }
.person-text blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.22; letter-spacing: -.01em; }
.fakten { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.fakten div { padding: 14px 0; border-top: 1px solid var(--linie); }
.fakten dt { font-size: .8125rem; color: var(--stein); }
.fakten dd { margin-top: 2px; }

/* ---------- Prinzipien, Manifest ---------- */
.prinzipien { display: grid; }
.prinzip { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px 64px; padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid rgba(38, 39, 34, .18); align-items: baseline; }
.prinzip:last-child { border-bottom: 1px solid rgba(38, 39, 34, .18); }
.prinzip h3 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); line-height: 1.04; letter-spacing: -.02em; }
.prinzip p { color: var(--stein); }
.manifest { max-width: 1080px; }
.manifest p { font-family: var(--serif); font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); line-height: 1.22; letter-spacing: -.015em; }
.manifest p + p { margin-top: .55em; }
.manifest .leise { color: var(--nebel); }
.manifest-strich .leise { display: block; }
.sandig .manifest .leise, .salbeig .manifest .leise, .hell .manifest .leise { color: var(--stein); }
.manifest-fuss { margin-top: 48px; display: flex; align-items: center; gap: 14px; font-size: .875rem; color: var(--nebel); }

/* ---------- Räume ---------- */
.raeume { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: clamp(36px, 4vw, 64px); align-items: stretch; }
.raeume figure { display: flex; flex-direction: column; margin: 0; }
.raeume figure:nth-child(1) { grid-column: 1 / span 8; grid-row: 1; }
.raeume figure:nth-child(2) { grid-column: 9 / span 4; grid-row: 1; }
.raeume figure:nth-child(3) { grid-column: 5 / span 8; grid-row: 2; }
.raeume figure:nth-child(4) { grid-column: 1 / span 4; grid-row: 2; }
.raeume figure:nth-child(odd) .bild { aspect-ratio: 3 / 2; }
.raeume figure:nth-child(even) .bild { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }

/* ---------- Ablauf ---------- */
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; counter-reset: schritt; }
.schritte.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schritte li { border-top: 1px solid var(--linie); padding-top: 26px; counter-increment: schritt; }
.dunkel .schritte li { border-top-color: var(--linie-hell); }
.schritte h3 { font-size: 1.5rem; line-height: 1.15; }
.schritte p { margin-top: 12px; color: var(--stein); font-size: .9375rem; line-height: 1.7; }
.dunkel .schritte p { color: var(--nebel); }

/* ---------- Fragen ---------- */
.fragen { border-bottom: 1px solid var(--linie); }
.frage { border-top: 1px solid var(--linie); }
.frage summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 24px; align-items: center; padding: 24px 0; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); line-height: 1.22; }
.frage-inhalt { padding: 0 0 30px; max-width: 72ch; color: var(--stein); }
.frage::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--sanft), content-visibility .5s allow-discrete; }
.frage[open]::details-content { block-size: auto; }
.plus { position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(38, 39, 34, .35); justify-self: end; transition: background-color .3s ease; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--sanft); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .plus { background: var(--graphit); color: var(--weiss); box-shadow: none; }
details[open] > summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }

/* ---------- Service ---------- */
.index-oben { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.index-oben a { display: grid; grid-template-columns: minmax(0, 1fr) 46px; grid-template-rows: auto 1fr; gap: 10px 16px; min-height: 176px; padding: clamp(20px, 2.2vw, 30px); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); text-decoration: none; transition: background-color .25s ease; }
.index-oben a:hover { background: rgba(225, 216, 207, .45); }
.index-oben b { grid-column: 1 / -1; grid-row: 2; align-self: end; font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.05rem + 1vw, 2.1rem); line-height: 1.1; letter-spacing: -.012em; }
.index-oben .kreis { grid-column: 2; grid-row: 1; align-self: start; }
.portal-raster { align-items: center; row-gap: 48px; }
.portal-marke { grid-column: 1 / span 5; background: var(--papier); border: 1px solid var(--linie); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.portal-marke .datev { width: 34%; height: auto; color: var(--graphit); }
.portal-marke span { position: absolute; left: 20px; bottom: 16px; font-size: .75rem; color: var(--stein); }
.portal-text { grid-column: 7 / span 6; }
.portal-text > p:not(.ueberzeile) { margin-top: 20px; color: var(--stein); }
.portal-text .seite-kopf-aktionen { margin-top: 30px; }
.portal-schritte { margin-top: calc(var(--luft) * 1.4); }
.portal-schritte h3.titel-s { margin-bottom: 32px; }
.termin-werkzeug { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.termin-hinweis-text { margin-top: 20px; }
.regler { margin-top: 36px; display: grid; gap: 24px; }
.regler label { display: block; font-size: .8125rem; color: var(--nebel); margin-bottom: 8px; }
.eingabe { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(249, 249, 249, .3); padding: 8px 0 10px; color: var(--weiss); font: 400 1.125rem/1.4 var(--serif); border-radius: 0; transition: border-color .25s ease; }
.eingabe:focus { outline: none; border-bottom-color: var(--sand); }
select.eingabe { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--nebel) 50%), linear-gradient(135deg, var(--nebel) 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
select.eingabe option { color: var(--graphit); background: var(--weiss); font-family: var(--sans); font-size: 1rem; }
.schalter { display: flex !important; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; font-size: .9375rem; color: var(--weiss) !important; margin: 0 !important; }
.schalter input { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 999px; background: rgba(249, 249, 249, .18); position: relative; cursor: pointer; flex: none; transition: background-color .25s ease; margin: 0; }
.schalter input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--weiss); transition: transform .3s var(--sanft); }
.schalter input:checked { background: var(--salbei); }
.schalter input:checked::after { transform: translateX(20px); background: var(--graphit); }
.schalter input:disabled { opacity: .4; cursor: not-allowed; }
.schalter input:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.terminliste { display: grid; border-top: 1px solid var(--linie-hell); }
.termin { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linie-hell); }
.termin time { font-family: var(--serif); font-size: 1.75rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.termin time small { display: block; margin-top: 6px; font-family: var(--sans); font-size: .75rem; color: var(--nebel); }
.termin ul { display: grid; gap: 4px; font-size: .9375rem; }
.termin .bis { font-size: .8125rem; color: var(--nebel); white-space: nowrap; font-variant-numeric: tabular-nums; }
.termin:first-child .bis { color: var(--sand); }
.werkzeug-fuss { margin-top: 28px; font-size: .8125rem; color: var(--nebel); max-width: 66ch; line-height: 1.65; }

/* ---------- Karriere ---------- */
.prinzipien.kompakt .prinzip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: 22px 0; }
.prinzipien.kompakt .prinzip h3 { font-size: clamp(1.4rem, 1.15rem + .7vw, 1.9rem); }
.stelle { background: var(--papier); border: 1px solid var(--linie); }
.stelle + .stelle { margin-top: 24px; }
.stelle-kopf { padding: clamp(28px, 3.4vw, 52px); border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; }
.stelle:last-child .stelle-kopf:last-child { border-bottom: 0; }
.stelle-kopf h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.016em; }
.stelle-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.stelle-meta span { padding: .45rem .9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); font-size: .8125rem; }
.stelle-inhalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stelle-block { padding: clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--linie); }
.stelle-block:nth-child(odd) { border-right: 1px solid var(--linie); }
.stelle-block.breit { grid-column: 1 / -1; border-right: 0; }
.stelle-block h4 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.stelle-block p { margin-top: 12px; color: var(--stein); }
.stelle-block ul { margin-top: 14px; display: grid; gap: 8px; }
.stelle-block .bieten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
.stelle-block li, .frage-inhalt li, .textseite li { position: relative; padding-left: 22px; color: var(--stein); font-size: .9688rem; line-height: 1.6; }
.stelle-block li::before, .frage-inhalt li::before, .textseite li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 7px; background: var(--salbei); transform: skewX(-21deg); }
.stelle-fuss { padding: clamp(24px, 3vw, 44px); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.stelle-fuss p { color: var(--stein); max-width: 56ch; }
.kontaktperson { margin-top: 40px; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; align-items: center; }
.kontaktperson .bild { aspect-ratio: 4 / 5; }
.kontaktperson h3 { font-size: 1.9rem; line-height: 1.1; }
.kontaktperson p { margin-top: 6px; color: var(--stein); }
.kontaktperson .daten-zeile { margin-top: 16px; display: grid; gap: 4px; }
.kontaktperson-fuss { margin-top: 32px; }

/* ---------- Kontakt ---------- */
.kontakt-raster { align-items: start; row-gap: 64px; }
.formular { grid-column: 1 / span 7; display: grid; gap: 26px; }
.kontakt-seite { grid-column: 9 / span 4; }
.kontakt-seite .bild { aspect-ratio: 4 / 5; }
.daten { margin-top: 28px; display: grid; gap: 20px; }
.daten dt { font-size: .8125rem; color: var(--stein); }
.daten dd { margin-top: 4px; }
.daten dd.gross { font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + .6vw, 1.75rem); line-height: 1.2; font-variant-numeric: lining-nums; }
.daten a { text-decoration: none; }
.daten a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.feld { display: grid; gap: 8px; }
.feld > label, .feld .etikett { font-size: .8125rem; color: var(--stein); }
.feld input, .feld textarea, .feld select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(38, 39, 34, .55); border-radius: 0; padding: 10px 0 12px; font: 400 1rem/1.5 var(--sans); transition: border-color .25s ease; }
.feld select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--stein) 50%), linear-gradient(135deg, var(--stein) 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.feld textarea { resize: vertical; min-height: 140px; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-bottom: 2px solid var(--graphit); padding-bottom: 11px; }
.feld [aria-invalid="true"], .feld [aria-invalid="true"]:focus { border-bottom: 2px solid #a8472a; padding-bottom: 11px; }
.feld-fehler { margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: #a8472a; }
.einwilligung + .feld-fehler { margin: 8px 0 0 34px; }
.zwei { align-items: start; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: inline-flex; cursor: pointer; position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips span { padding: .7rem 1.15rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); font-size: .875rem; line-height: 1.3; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.chips label:hover span { box-shadow: inset 0 0 0 1px var(--graphit); }
.chips input:checked + span { background: var(--graphit); color: var(--weiss); box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--graphit); outline-offset: 3px; }
.einwilligung { display: flex; gap: 14px; align-items: flex-start; font-size: .875rem; color: var(--stein); cursor: pointer; }
.einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--graphit); flex: none; cursor: pointer; }
.einwilligung input[aria-invalid="true"] { outline: 2px solid #a8472a; outline-offset: 2px; }
.formular-fuss { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.status { min-height: 1.6em; font-size: .9375rem; }
.status[data-art="fehler"] { color: #a8472a; }
.status[data-art="ok"] { color: var(--graphit); }

/* ---------- Anfahrt ---------- */
.anfahrt { align-items: start; row-gap: 56px; }
.wegeplan-box { grid-column: 1 / span 6; background: var(--papier); box-shadow: 0 0 0 1px var(--linie); padding: clamp(18px, 2.4vw, 32px); }
.sandig .wegeplan-box { box-shadow: 0 0 0 1px rgba(38, 39, 34, .12); }
.wegeplan-box svg { width: 100%; height: auto; }
.wegeplan-box .klein { margin-top: 10px; color: var(--stein); }
.wege { grid-column: 8 / span 5; display: grid; gap: 28px; align-self: center; }
.wege-lead { margin-top: 22px; }
.weg h3 { font-family: var(--sans); font-weight: 500; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.weg p { margin-top: 8px; color: var(--stein); font-size: .9375rem; line-height: 1.7; }
.route { display: flex; flex-wrap: wrap; gap: 12px; }
.linie-marke { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 4px; font-size: .75rem; font-weight: 600; color: var(--weiss); background: #2a5ea8; font-variant-numeric: lining-nums; }
.linie-marke.s { background: #3d6b3d; border-radius: 11px; }
.weg h3 .linie-marke:last-of-type { margin-right: 6px; }
.wegeplan text { font-family: var(--sans); }
.wegeplan .wp-titel { font-family: var(--serif); font-size: 21px; fill: var(--graphit); }
.wegeplan .wp-ort { font-size: 15px; font-weight: 500; fill: var(--graphit); }
.wegeplan .wp-linien { font-size: 14px; fill: var(--stein); }
.wegeplan .wp-marke { font-size: 12px; font-weight: 600; fill: #fff; }
.wegeplan .wp-strasse { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; fill: var(--stein); }
.wegeplan .wp-zeit { font-size: 13px; font-weight: 500; fill: var(--graphit); }
.wegeplan .wp-klein { font-size: 11px; letter-spacing: .18em; fill: var(--stein); }

/* ---------- Textseiten ---------- */
.textseite { max-width: 820px; }
.textseite h2 { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; margin-top: 44px; }
.textseite h3 { font-family: var(--sans); font-weight: 500; font-size: .9375rem; margin-top: 24px; }
.textseite p { margin-top: 10px; color: var(--stein); }
.textseite ul { margin-top: 10px; display: grid; gap: 8px; }

/* ---------- Band ---------- */
.band { position: relative; overflow: hidden; padding-block: clamp(80px, 9vw, 150px); }
.band::before { content: ""; position: absolute; right: -4vw; top: 0; bottom: 0; width: 26vw; background: rgba(225, 216, 207, .04); transform: skewX(-21deg); pointer-events: none; }
.band .zwoelf { position: relative; align-items: end; row-gap: 32px; }
.band h2 { grid-column: 1 / span 8; }
.band .band-aktion { grid-column: 9 / span 4; display: grid; gap: 18px; justify-items: start; }
.band .band-aktion p { color: var(--nebel); }

/* ---------- Fuß ---------- */
.fuss { background: var(--tief); color: var(--nebel); font-size: .875rem; line-height: 1.75; padding-top: clamp(72px, 8vw, 112px); padding-bottom: 36px; }
.fuss-raster { row-gap: 48px; }
.fuss-marke { grid-column: 1 / span 4; color: var(--weiss); }
.fuss-marke .logo svg { height: 60px; }
.claim { margin-top: 24px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; color: var(--weiss); }
.fuss-marken { margin-top: 28px; display: inline-flex; gap: 10px; text-decoration: none; }
.fuss-marke-kachel { display: grid; place-items: center; height: 64px; min-width: 64px; padding: 6px; background: #fff; border-radius: 6px; transition: transform .3s var(--sanft); }
.fuss-marke-kachel.breit { padding: 8px 14px; }
.fuss-marke-kachel svg { width: 52px; height: 52px; }
.fuss-marke-kachel img { height: 44px; width: auto; }
.fuss-marken:hover .fuss-marke-kachel { transform: translateY(-2px); }
.fuss-spalte h2 { font-family: var(--sans); font-size: .8125rem; font-weight: 500; color: var(--weiss); margin-bottom: 12px; }
.fuss-spalte p + p { margin-top: 10px; }
.fuss-spalte:nth-child(2) { grid-column: 6 / span 2; }
.fuss-spalte:nth-child(3) { grid-column: 8 / span 2; }
.fuss-spalte:nth-child(4) { grid-column: 10 / span 3; }
.fuss nav { display: grid; gap: 2px; }
.fuss a { text-decoration: none; }
.fuss a:not(.fuss-marken):hover { color: var(--weiss); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.fuss-unten { margin-top: clamp(64px, 7vw, 96px); padding-top: 22px; border-top: 1px solid rgba(249, 249, 249, .1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: .8125rem; }
.fuss-unten nav { display: flex; gap: 20px; }
.fuss-rechts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; }
.bewegung-knopf { background: none; border: 0; padding: 0; font: inherit; color: inherit; opacity: .85; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.bewegung-knopf::before { content: ""; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--salbei); transform: skewX(-21deg); }
.bewegung-knopf[aria-pressed="true"]::before { background: var(--sand); box-shadow: none; }
.bewegung-zustand { color: var(--sand); }
.bewegung-knopf:hover { opacity: 1; }
.bewegung-knopf:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }

/* ---------- Struktur in Bewegung (Szenen) ---------- */
.szene-abschnitt { overflow: clip; }
.szene-abschnitt::before { content: ""; position: absolute; right: -8vw; top: -10%; width: 40vw; height: 120%; background: rgba(200, 199, 183, .045); transform: skewX(-21deg); pointer-events: none; }
.szene-raster { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.szene { margin: 0; }
.szene svg { display: block; width: 100%; height: auto; overflow: visible; transition: opacity .26s ease; }
.szene-schritte { transition: opacity .26s ease; }
.szene-reiter { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.szene-reiter button { background: none; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-hell); color: var(--nebel); font: 400 .875rem/1.2 var(--sans); padding: .75rem 1.15rem; cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.szene-reiter button:hover { color: var(--weiss); box-shadow: inset 0 0 0 1px rgba(249, 249, 249, .4); }
/* Szenarien als ruhige Textreiter: umbrechen sauber, aktiver Reiter mit Linie in Sand */
.szene-reiter { gap: 2px 26px; }
.szene-reiter button, .szene-reiter button[aria-pressed="true"] { background: none; box-shadow: none; border-radius: 0; padding: 12px 0 9px; min-height: 44px; font-size: .875rem; letter-spacing: .01em; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.szene-reiter button { color: var(--nebel); }
.szene-reiter button:hover { color: var(--weiss); box-shadow: none; }
.szene-reiter button[aria-pressed="true"] { color: var(--weiss); border-bottom-color: var(--sand); }
.szene-reiter button:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (min-width: 1101px) and (max-width: 1320px) { .szene-reiter { column-gap: 20px; } .szene-reiter button, .szene-reiter button[aria-pressed="true"] { font-size: .8125rem; } }
.szene-schritte { margin-top: 24px; display: grid; border-top: 1px solid var(--linie-hell); }
.szene-schritte button { position: relative; width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--linie-hell); color: var(--nebel); font: inherit; text-align: left; cursor: pointer; }
.szene-schritte .nr { font-size: .8125rem; padding-top: .45em; font-variant-numeric: lining-nums; transition: color .3s ease; }
.szene-schritte b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.2; transition: color .3s ease; }
.szene-schritte em { display: block; font-style: normal; font-size: .9375rem; line-height: 1.55; height: 0; opacity: 0; overflow: hidden; transition: height .5s var(--sanft), opacity .4s ease, margin .5s var(--sanft); }
.szene-schritte button:hover b, .szene-schritte button.an b { color: var(--weiss); }
.szene-schritte button.an .nr { color: var(--sand); }
.szene-schritte button.an em { height: var(--em-h, auto); opacity: 1; margin-top: 6px; }
.szene-schritte button i { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sand); transform: scaleX(0); transform-origin: 0 50%; }
.szene-schritte button.an i { transform: scaleX(1); }
.szene-schritte button.an.laeuft i { animation: laufband var(--halten, 3600ms) linear both; }
.szene-schritte button:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
@keyframes laufband { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.szene-pause { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; background: none; border: 0; color: var(--nebel); font: 400 .8125rem/1 var(--sans); cursor: pointer; }
.szene-pause:hover { color: var(--weiss); }
.szene-pause i { width: 9px; height: 11px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.szene-pause.pausiert i { width: 0; height: 0; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.szene-pause:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
.sz-kante { fill: none; stroke: var(--nebel); stroke-width: 1.5; stroke-dasharray: 1 1; }
.sz-form { stroke-width: 1.5; stroke-linejoin: round; }
.sz-linie { stroke: var(--sand); stroke-width: 2; stroke-linecap: round; }
.sz-linie.leise { stroke: rgba(167, 168, 155, .45); stroke-width: 1.5; }
.sz-linie.strich { stroke: var(--nebel); stroke-dasharray: 6 6; stroke-width: 1.5; }
.sz-label { font-family: var(--serif); font-size: 22px; }
.sz-person + .sz-label { fill: var(--graphit); }
.sz-text { font-family: var(--serif); font-size: 24px; fill: var(--sand); }
.sz-text.klein { font-family: var(--sans); font-size: 17px; fill: var(--nebel); paint-order: stroke; stroke: var(--graphit); stroke-width: 6px; stroke-linejoin: round; }
.szene-schritte.sofort, .szene-schritte.sofort * { transition: none !important; }
.sz-rahmen { fill: none; stroke: rgba(167, 168, 155, .55); stroke-width: 1.2; stroke-dasharray: 5 6; }
.sz-rahmen.fest { stroke: var(--sand); stroke-dasharray: none; stroke-width: 1.5; }
.sz-kl { font-family: var(--sans); font-size: 15px; fill: var(--sand); paint-order: stroke; stroke: var(--graphit); stroke-width: 7px; stroke-linejoin: round; }

/* ================================================================ v8: Bilder ohne Anschnitt, Schräge nur als Fläche dahinter */
.bild.hoch { aspect-ratio: 4 / 5; }
.seite-kopf-bild .bild { max-width: 460px; margin-left: auto; overflow: visible; isolation: isolate; }
.seite-kopf-bild .bild::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 24%; bottom: -5%; width: 50%; background: var(--salbei); opacity: .5; transform: skewX(-21deg); transform-origin: 0 100%; }
.seite-kopf-bild .bild img { position: relative; }
.netz-bild .bild { max-width: 520px; }

/* ================================================================ v8: Symbole */
.sym { display: block; width: 48px; height: 48px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sym .ak { fill: var(--akzent); stroke: none; transition: fill .35s ease; }
/* Gleiche sichtbare Strichstärke (etwa 1,3–1,6 px) in jeder Größe */
.chip-sym { stroke-width: 3; }
.nav-sym, .bx-sym { stroke-width: 2.1; }
.io-sym, .kachel-sym, .netz-li-sym, .wb-sym { stroke-width: 1.6; }
.index-sym { stroke-width: 1.55; }
.p-sym { stroke-width: 1.75; }
.wert-sym { stroke-width: 1.45; }
.kopf-symbol .sym { stroke-width: 1.25; }
.wert-icon { stroke-width: 1.05; }
.bx-gross { stroke-width: 1.05; }
.dunkel, .bx-panel { --akzent: var(--sand); }
.zeichnen .sym :is(path, circle, rect, ellipse):not(.ak) { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.25s var(--sanft) calc(var(--d, 0) * 110ms); }
.zeichnen .sym .ak { transition: opacity .6s ease calc(.55s + var(--d, 0) * 110ms), transform .8s var(--sanft) calc(.55s + var(--d, 0) * 110ms), fill .35s ease; }
.js .zeichnen .sym:not(.da) :is(path, circle, rect, ellipse):not(.ak) { stroke-dashoffset: 1; }
.js .zeichnen .sym:not(.da) .ak { opacity: 0; transform: translateX(-4px); }
.kopf-symbol { margin-bottom: 26px; color: var(--graphit); }
.kopf-symbol .sym { width: 56px; height: 56px; }

/* Startseite und Leistungen: Bereichsliste */
.index-sym { width: 42px; height: 42px; color: var(--graphit); }
.index-zeile:hover .index-sym .ak { fill: var(--graphit); }

/* Navigation */
.nav-panel a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 11px 16px; border-radius: 3px; text-decoration: none; transition: background-color .2s ease; }
.nav-sym { grid-column: 1; grid-row: 1 / span 2; width: 30px; height: 30px; stroke-width: 1.6; }
.nav-panel b { grid-column: 2; }
.nav-panel span { grid-column: 2; font-size: .8125rem; color: var(--stein); }
.nav-panel .pfeil { grid-column: 3; grid-row: 1 / span 2; opacity: .5; }
.nav-panel a:hover .nav-sym .ak { fill: var(--graphit); }

/* Branchen-Auswahl */
.bx-sym { grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; color: var(--stein); transition: color .25s ease; }
.bx-knopf:hover .bx-sym, .bx-knopf[aria-expanded="true"] .bx-sym { color: var(--graphit); }
.bx-knopf[aria-expanded="true"] .bx-sym .ak { fill: var(--graphit); }
.bx-gross { width: 68px; height: 68px; color: var(--sand); stroke-width: 1.25; }

/* Branchenseite */
.branche-zeichen .branche-sym { position: relative; top: 2%; left: 6%; width: clamp(150px, 13vw, 210px); height: auto; aspect-ratio: 1; color: var(--graphit); stroke-width: .45; }
@media (min-width: 1101px) {
  .branche-kopf .seite-kopf-text { grid-column: 1 / span 8; }
  .branche-kopf .titel { font-size: clamp(2.3rem, 1.1rem + 3.1vw, 4.3rem); }
}
.branche-kopf .kopf-symbol { display: none; }

/* Weiterblättern mit Symbolen */
.weiterblaettern { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie); }
.weiterblaettern a { display: grid; gap: 16px; align-content: start; justify-items: start; padding: clamp(32px, 4vw, 56px) 24px clamp(32px, 4vw, 56px) 0; text-decoration: none; }
.weiterblaettern a + a { justify-items: end; text-align: right; border-left: 1px solid var(--linie); padding: clamp(32px, 4vw, 56px) 0 clamp(32px, 4vw, 56px) 24px; }
.wb-richtung { display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; color: var(--stein); }
.pfeil.zurueck { transform: scaleX(-1); }
.weiterblaettern a:hover .pfeil { width: 26px; }
.wb-ziel { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); transition: transform .45s var(--sanft); }
.wb-sym { width: clamp(36px, 3vw, 46px); height: clamp(36px, 3vw, 46px); color: var(--graphit); }
.weiterblaettern b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.4rem); line-height: 1.12; }
.weiterblaettern a:first-child:hover .wb-ziel { transform: translateX(-10px); }
.weiterblaettern a + a:hover .wb-ziel { transform: translateX(10px); }
.weiterblaettern a:hover .wb-sym .ak { fill: var(--graphit); }

/* Bereichsseiten: Kacheln und Branchen-Chips */
.kachel-sym { width: 40px; height: 40px; margin-bottom: 10px; color: var(--graphit); }
.bereich-branchen a { display: inline-flex; align-items: center; gap: 10px; }
.chip-sym { width: 20px; height: 20px; stroke-width: 2; }
.bereich-branchen a:hover .chip-sym .ak { fill: var(--sand); }

/* Service, Karriere: Symbole statt Zählern */
.io-sym { grid-column: 1; grid-row: 1; width: 40px; height: 40px; color: var(--graphit); }
.schritte.mit-sym li { counter-increment: none; }
.schritt-sym { width: 44px; height: 44px; margin-bottom: 22px; color: var(--graphit); }
.dunkel .schritt-sym { color: var(--sand); }

/* Kanzlei: Werte */
.werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px var(--spalt); }
.wert { position: relative; padding-top: 36px; border-top: 1px solid rgba(38, 39, 34, .18); }
.wert::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--graphit); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--sanft); }
.wert:hover::after { transform: scaleX(1); }
.wert::before { content: ""; position: absolute; z-index: 0; left: 20px; top: 50px; width: 56px; height: 52px; background: rgba(249, 249, 249, .75); transform: skewX(-21deg); transform-origin: 0 100%; }
.wert-icon { position: relative; z-index: 1; width: 66px; height: 66px; margin-bottom: 34px; color: var(--graphit); }
.wert h3 { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.08; letter-spacing: -.016em; }
.wert p { margin-top: 14px; color: var(--stein); font-size: .9375rem; line-height: 1.7; max-width: 32ch; }

/* Kanzlei: Manifest mit Unterstreichungen */
.manifest-strich em { font-style: normal; background: linear-gradient(var(--sand), var(--sand)) 0 94% / 100% 2px no-repeat; transition: background-size 1.1s var(--sanft) calc(.25s + var(--d, 0) * 280ms), color .9s ease calc(.25s + var(--d, 0) * 280ms); }
.js .manifest-strich em:not(.da) { background-size: 0% 2px; }
.js .manifest-strich .leise em.da { color: var(--weiss); }

/* Einblicke: Lamellen in der Signet-Schräge */
.wert-sym { width: 46px; height: 46px; margin-bottom: 22px; color: var(--graphit); }
.wert-sym :is(path, circle, rect, ellipse):not(.ak) { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--sanft) .2s; }
.wert-sym .ak { transition: opacity .5s ease .7s; }
.einblick:not(.statisch) .wert-karte:not(.an) .wert-sym :is(path, circle, rect, ellipse):not(.ak) { stroke-dashoffset: 1; transition-duration: .2s; transition-delay: 0s; }
.einblick:not(.statisch) .wert-karte:not(.an) .wert-sym .ak { opacity: 0; transition-delay: 0s; }
.einblick-werte { margin-top: clamp(26px, 3.6vh, 40px); }
.einblick-marken { margin-top: clamp(22px, 3vh, 34px); }
.lamellen { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--sand); box-shadow: 0 40px 80px -48px rgba(26, 26, 23, .45); }
.lamellen-bild { position: absolute; inset: 0; transform-origin: 50% 100%; }
.lamelle { position: absolute; inset: 0; will-change: clip-path; }
.lamellen-bild + .lamellen-bild .lamelle { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); }
.lamelle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.einblick.statisch .einblick-buehne, .einblick.statisch .einblick-marken { display: none; }
.einblick.statisch .wert-bild { display: block; margin-bottom: 26px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); transition: clip-path 1.2s var(--sanft); }
.js .einblick.statisch .wert-karte:not(.da) .wert-bild { clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%); }
.einblick.statisch .wert-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Zusammenarbeit: Zeitplan, der beim Scrollen von oben nach unten abläuft */
.prozess-raster { align-items: start; row-gap: var(--luft); }
.prozess-kopf { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf-klein) + clamp(32px, 6vh, 72px)); }
.prozess-kopf .lead { margin-top: 26px; max-width: 40ch; }
.prozess-stand { margin-top: clamp(40px, 7vh, 80px); }
.stand-symbole { position: relative; width: 76px; height: 76px; }
.stand-sym { position: absolute; inset: 0; color: var(--sand); opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .6s var(--sanft); }
.stand-sym.an { opacity: 1; transform: none; }
.stand-sym .sym { width: 76px; height: 76px; stroke-width: .95; }
.stand-sym .sym :is(path, circle, rect, ellipse):not(.ak) { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--sanft) .1s; }
.stand-sym.an .sym :is(path, circle, rect, ellipse):not(.ak) { stroke-dashoffset: 0; }
.stand-marken { margin-top: 26px; display: flex; gap: 8px; }
.stand-marken i { width: 26px; height: 6px; background: var(--linie-hell); transform: skewX(-21deg); transition: background-color .4s ease; }
.stand-marken i.an { background: var(--sand); }
.prozess-weg { grid-column: 7 / span 6; position: relative; }
.p-schiene { position: absolute; left: 21px; top: 18px; bottom: 60px; width: 1px; background: var(--linie-hell); }
.p-lauf { position: absolute; inset: 0; background: var(--sand); transform: scaleY(var(--p, 1)); transform-origin: 50% 0; }
.p-punkt { position: absolute; left: -5px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 7px rgba(225, 216, 207, .14); transform: translateY(calc(var(--py, 0px) - 5.5px)); opacity: var(--po, 0); transition: opacity .3s ease; }
.p-schritt { position: relative; padding: 0 0 clamp(56px, 9vh, 104px) 84px; transition: opacity .5s ease; }
.p-schritt:last-child { padding-bottom: 0; }
.js .prozess:not(.ruhig) .p-schritt:not(.an):not(.vorbei) { opacity: .34; }
.p-marke { position: absolute; left: 13px; top: 12px; width: 17px; height: 13px; background: var(--graphit); box-shadow: inset 0 0 0 1px var(--nebel); transform: skewX(-21deg); transition: background-color .4s ease, box-shadow .4s ease, transform .6s var(--sanft); }
.p-schritt.vorbei .p-marke, .p-schritt.an .p-marke { background: var(--sand); box-shadow: none; }
.p-schritt.an .p-marke { transform: skewX(-21deg) scale(1.35); }
.p-kopf { display: flex; align-items: center; gap: 14px; }
.p-sym { width: 36px; height: 36px; color: var(--sand); }
.p-zeit { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nebel); line-height: 1.5; }
.p-schritt h3 { margin-top: 18px; font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.5rem); line-height: 1.08; letter-spacing: -.016em; }
.p-text { margin-top: 14px; max-width: 46ch; color: var(--nebel); }
.p-ergebnis { margin-top: 22px; display: grid; gap: 6px; padding-left: 20px; border-left: 1px solid var(--linie-hell); font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem); line-height: 1.35; color: var(--weiss); }
.p-ergebnis span { font-family: var(--sans); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); line-height: 1.5; }
.p-schritt .p-kopf, .p-schritt h3, .p-text, .p-ergebnis { transition: transform .7s var(--sanft); }
.js .prozess:not(.ruhig) .p-schritt:not(.an):not(.vorbei) :is(.p-kopf, h3, .p-text, .p-ergebnis) { transform: translateY(10px); }

/* Netzwerk: Symbole statt Pluszeichen */
.netz-sym :is(path, circle, rect, ellipse) { fill: none; stroke: var(--sand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.netz-sym .ak { fill: var(--sand); stroke: none; }
.netz-li-sym { width: 40px; height: 40px; color: var(--sand); }

/* Karriere: Ansprechpartner per E-Mail */
.ansprech { align-items: center; row-gap: 48px; }
.ansprech-text { grid-column: 1 / span 6; }
.ansprech-text .lead { margin-top: 24px; max-width: 46ch; }
.ansprech-bild { grid-column: 8 / span 5; }

/* Kontakt: Fassade Schillerstraße 5 */
.kontakt-seite .fassade-box { margin: 0; padding: clamp(26px, 2.6vw, 40px) clamp(22px, 2.4vw, 36px) clamp(20px, 2vw, 28px); background: linear-gradient(180deg, #f4f0eb 0%, #ede7e0 100%); }
.fassade { width: 100%; height: auto; fill: none; stroke: var(--graphit); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.fassade .etage { fill: var(--graphit); stroke: none; }
.fassade .hier-a { fill: var(--salbei); stroke: none; }
.js .fassade .etage { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--sanft) .25s; }
.js .fassade .hier-marke { opacity: 0; transform: translateX(-10px); transition: opacity .7s ease 1s, transform .9s var(--sanft) 1s; }
.js .fassade.da .etage { transform: none; }
.js .fassade.da .hier-marke { opacity: 1; transform: none; }
.fassade .hier-b { fill: var(--sand); stroke: none; }
.fassade .hier-name { font-family: var(--serif); font-size: 37px; letter-spacing: .06em; fill: var(--weiss); stroke: none; }
.fassade .hier-etage { font-family: var(--sans); font-size: 23px; font-weight: 500; letter-spacing: .1em; fill: var(--sand); stroke: none; }
.fassade-box figcaption { margin-top: 18px; display: grid; gap: 2px; font-size: .875rem; line-height: 1.5; color: var(--graphit); }
.fassade-box figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; letter-spacing: .06em; }
.fassade-box figcaption span { font-size: .8125rem; color: var(--stein); }

/* Leistungsszenen: Schrittmarken statt Ziffern */
.szene-schritte button { grid-template-columns: 22px minmax(0, 1fr); }
.sz-marke { width: 10px; height: 10px; margin-top: .72em; box-shadow: inset 0 0 0 1px var(--nebel); transform: skewX(-21deg); transition: background-color .3s ease, box-shadow .3s ease; }
.szene-schritte button.an .sz-marke { background: var(--sand); box-shadow: none; }

/* ================================================================ Responsiv */
@media (max-width: 1280px) {
  .buehne-aktionen .knopf { padding: 1.05rem 1.55rem; }
  .nav { gap: 26px; }
  .kopf-innen { gap: 28px; }
  .logo svg { height: 50px; }
  .branchen.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kopfzeile > :first-child, .kopfzeile > :last-child { grid-column: 1 / -1; }
  .kopfzeile, .seite-kopf .zwoelf.kopfzeile { row-gap: 26px; }
  .kopfzeile > .lead { margin-top: 0; }
  .einf-titel { grid-column: 1 / -1; }
  .einf-text { grid-column: 1 / span 8; margin-top: 36px; }
  .seite-kopf-text { grid-column: 1 / -1; }
  .seite-kopf-bild { grid-column: 1 / span 8; }
  .branche-zeichen { display: none; }
  .person-bild { grid-column: 1 / span 7; }
  .person-text { grid-column: 1 / -1; }
  .netz-bild { grid-column: 1 / span 7; position: relative; top: 0; }
  .netz-text { grid-column: 1 / -1; }
  .mitglied-kopf, .mitglied-liste { grid-column: 1 / -1; }
  .mitglied-kopf { max-width: 640px; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .termin-werkzeug { grid-template-columns: 1fr; }
  .portal-marke { grid-column: 1 / span 7; }
  .portal-text { grid-column: 1 / -1; }
  .formular { grid-column: 1 / -1; }
  .kontakt-seite { grid-column: 1 / span 7; }
  .wegeplan-box, .wege { grid-column: 1 / -1; }
  .band h2, .band .band-aktion { grid-column: 1 / -1; }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-spalte:nth-child(n) { grid-column: span 4; }
  .szene-raster { grid-template-columns: 1fr; row-gap: 0; }
  .szene-text { display: contents; }
  .szene-text > .ueberzeile { order: 1; }
  .szene-text > h2 { order: 2; }
  .szene-text > .szene-reiter { order: 3; }
  .szene { order: 4; margin-top: 28px; max-width: 680px; }
  .szene-schritte { order: 5; }
  .szene-pause { order: 6; justify-self: start; }
  .bx-panel { grid-row: 1 / span 13; }
}
@media (max-width: 1080px) {
  .nav, .kopf-aktionen .knopf-kopf { display: none; }
  .menue-knopf { display: inline-flex; }
  .kopf-aktionen { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --kopf: 76px; --kopf-klein: 68px; }
  .logo svg { height: 44px; }
  .kopf.gescrollt .logo svg { height: 38px; }
  .prinzip { grid-template-columns: 1fr; gap: 12px; }
  .prinzipien.kompakt .prinzip { grid-template-columns: 1fr; gap: 6px; }
  .raeume { row-gap: 40px; }
  .raeume figure:nth-child(n) { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .raeume figure:nth-child(n) .bild { aspect-ratio: 3 / 2; flex: none; }
  .stelle-inhalt { grid-template-columns: 1fr; }
  .stelle-block:nth-child(odd) { border-right: 0; }
  .stelle-kopf { grid-template-columns: 1fr; }
  .branchen-ex { grid-template-columns: 1fr; }
  .bx-panel { grid-column: 1; grid-row: auto; position: relative; top: 0; margin: 0 0 18px; }
  .bx-knopf .bx-zeichen { opacity: .6; transform: rotate(135deg); }
  .bx-knopf[aria-expanded="true"] .bx-zeichen { transform: rotate(-45deg); }
  .bx-knopf:hover .bx-name, .bx-knopf[aria-expanded="true"] .bx-name { transform: none; }
  .bx-panel h3 { margin-top: 0; }
}
@media (max-width: 860px) {
  .index-zeile { grid-template-columns: 34px minmax(0, 1fr) 46px; gap: 6px 14px; }
  .index-titel { grid-column: 2; grid-row: 1; font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
  .index-zeile p { grid-column: 2; grid-row: 2; }
  .index-zeile .kreis { grid-column: 3; grid-row: 1 / span 2; }
  .index-klein .index-titel { font-size: clamp(1.3rem, 6vw, 1.7rem); }
}
@media (max-width: 760px) {
  :root { --abstand: 76px; --abstand-s: 52px; --luft: 36px; }
  .titel { font-size: clamp(2.1rem, 9.4vw, 2.8rem); }
  .seite-kopf { padding-top: calc(var(--kopf) + 40px); }
  .seite-kopf-bild, .person-bild, .kontakt-seite, .portal-marke, .netz-bild { grid-column: 1 / -1; }
  .einf-text { grid-column: 1 / -1; }
  .rahmen-bild::before { left: -5%; }
  .branchen.kacheln { grid-template-columns: 1fr; }
  .bereich-branchen { grid-template-columns: 1fr; }
  .themen-gross li { padding: .85rem 1.3rem; }
  .mitglied-liste li { grid-template-columns: 1fr; gap: 18px; }
  .mitglied-marke { justify-content: flex-start; height: auto; }
  .mitglied-marke .datev { height: 62px; }
  .mitglied-marke .stbk { width: 150px; }
  .index-oben { grid-template-columns: 1fr; border-left: 0; }
  .index-oben a { min-height: 0; padding: 18px 0; border-right: 0; grid-template-columns: 34px minmax(0, 1fr) 40px; grid-template-rows: auto; gap: 2px 12px; align-items: center; }
  .index-oben b { grid-column: 2; grid-row: 1; font-size: 1.375rem; }
  .index-oben .kreis { grid-column: 3; grid-row: 1; align-self: center; width: 40px; height: 40px; }
  .mehrwert { grid-template-columns: 1fr; gap: 8px; }
  .schritte, .schritte.drei { grid-template-columns: 1fr; gap: 32px; }
  .fakten { grid-template-columns: 1fr; }
  .termin { grid-template-columns: 96px minmax(0, 1fr); }
  .termin .bis { grid-column: 2; }
  .termin time { font-size: 1.45rem; }
  .zwei { grid-template-columns: 1fr; }
  .kontaktperson { grid-template-columns: 1fr; }
  .kontaktperson .bild { max-width: 220px; }
  .stelle-block .bieten { grid-template-columns: 1fr; }
  .fuss-spalte:nth-child(n) { grid-column: 1 / -1; }
  .fuss-spalte:nth-child(2) { grid-column: 1 / span 6; }
  .fuss-spalte:nth-child(3) { grid-column: 7 / span 6; }
  .sz-text.klein { font-size: 22px; }
  .sz-label { font-size: 23px; }
  .sz-kl { font-size: 20px; }
  .szene-schritte { margin-top: 28px; }
  .einblick.statisch .einblick-werte { grid-template-columns: 1fr; gap: 52px; }
}
@media (max-width: 600px) {
  .netz-svg { display: none; }
  .netz-liste { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie-hell); }
  .netz-liste li { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--linie-hell); }
  .netz-liste span { display: block; margin-top: 8px; font-size: .9375rem; line-height: 1.4; }
}
@media (max-width: 420px) {
  .knopf { white-space: normal; text-align: center; }
  .vertrauen-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .index-zeile { grid-template-columns: 26px minmax(0, 1fr) 40px; gap: 4px 12px; }
  .index-zeile .kreis { width: 40px; height: 40px; }
}


/* Zitat am Ende der Bühne: auf breiten Bildschirmen rechts über der ruhigen Unschärfe */
@media (min-width: 761px) and (min-aspect-ratio: 11/10) {
  .buehne-zitat { padding-left: max(var(--gutter), calc(min(100vw, var(--max)) * .52)); }
  .buehne-zitat p { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.7rem); max-width: 11em; }
}
/* ---------- Startbühne: Tablet hochkant und Telefon ---------- */
@media (min-width: 761px) {
  .buehne h1 { font-size: min(clamp(3rem, 1rem + 6.2vw, 8.2rem), 11.2svh); }
}
@media (min-width: 761px) and (max-aspect-ratio: 11/10) {
  .buehne h1 { font-size: min(clamp(3.4rem, 9.4vw, 6rem), 9svh); }
  .buehne-text { max-width: 46vw; }
  .vertrauen { width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
}
@media (min-width: 761px) and (max-height: 820px) { .buehne-fuss { display: none; } }
@media (min-width: 761px) and (max-height: 720px) { .buehne-sub { margin-top: 16px; font-size: 1rem; } .vertrauen { margin-top: 26px; } }
@media (min-width: 761px) and (max-height: 640px) { .buehne-sub { display: none; } }
@media (min-width: 761px) and (max-width: 1179px) and (max-height: 680px) { .buehne-sub { display: none; } }
@media (min-width: 761px) and (max-height: 520px) { .vertrauen { display: none; } .buehne h1 .ueberzeile { margin-bottom: 12px; } .buehne-aktionen { margin-top: 18px; } }
@media (max-width: 760px) {
  .buehne { height: 220vh; height: 220svh; }
  .buehne-sticky { --s: calc(36vw / 56.27); --l: calc(100vw - var(--gutter) - 56.27 * var(--s)); --t: calc(var(--kopf) + 14svh); }
  .buehne-raster { align-items: center; padding-top: var(--kopf); padding-bottom: 28px; }
  .buehne-text { max-width: none; width: 100%; }
  .buehne h1 { font-size: clamp(2.5rem, 12.4vw, 3.6rem); }
  .buehne h1 .ueberzeile { font-size: .6875rem; letter-spacing: .12em; margin-bottom: 18px; }
  .buehne-sub { font-size: 1rem; line-height: 1.6; margin-top: 18px; max-width: 32ch; }
  .buehne-aktionen { margin-top: 24px; gap: 10px; }
  .buehne-aktionen .knopf { padding: .95rem 1.35rem; font-size: .9375rem; }
  .vertrauen { margin-top: 24px; gap: 12px; }
  .vertrauen .datev-mitglied { width: 60px; height: 60px; }
  .vertrauen-marken img { height: 50px; }
  .vertrauen-text { padding-left: 12px; font-size: .75rem; }
  .vertrauen-text br { display: none; }
  .buehne-zitat { bottom: clamp(40px, 9vh, 80px); }
  .buehne-zitat p { font-size: clamp(1.85rem, 8.4vw, 2.6rem); }
  .buehne-fuss { left: var(--gutter); bottom: 18px; }
}
@media (max-width: 760px) and (max-height: 740px) { .buehne-fuss { display: none; } }
@media (max-width: 760px) and (max-height: 640px) { .buehne-sub { display: none; } }
@media (max-width: 760px) and (max-height: 560px) { .vertrauen { display: none; } }

/* ---------- Einblicke auf Tablet und Telefon: dieselbe Bewegung, eine Spalte; Zusammenarbeit einspaltig ---------- */
@media (max-width: 900px) {
  .einblick { background: linear-gradient(180deg, #f4f0eb 0%, #eee8e1 100%); }
  .einblick:not(.statisch) .einblick-sticky { align-items: flex-start; padding-top: calc(var(--kopf-klein) + clamp(14px, 3svh, 36px)); }
  .einblick:not(.statisch) .einblick-raster { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
  .einblick:not(.statisch) .einblick-text { display: contents; }
  .einblick:not(.statisch) .einblick-text > .ueberzeile { order: 1; margin-bottom: 12px; }
  .einblick:not(.statisch) #einblick-titel { order: 2; font-size: clamp(1.75rem, 6.6vw, 2.8rem); }
  .einblick:not(.statisch) .einblick-buehne { order: 3; justify-self: start; width: min(100%, calc((100svh - 560px) * 4 / 3)); margin-top: clamp(16px, 2.6svh, 30px); }
  .einblick:not(.statisch) .lamellen { aspect-ratio: 4 / 3; }
  .einblick:not(.statisch) .einblick-buehne::before { left: -4%; top: 22%; bottom: -5%; width: 58%; }
  .einblick:not(.statisch) .einblick-werte { order: 4; margin-top: clamp(16px, 2.6svh, 30px); }
  .einblick:not(.statisch) .einblick-marken { margin-top: clamp(14px, 2svh, 22px); }
  .einblick:not(.statisch) .einblick-marken { order: 5; margin-bottom: 0; }
  .einblick:not(.statisch) .einblick-text > .knopf { order: 6; justify-self: start; margin-top: clamp(18px, 3svh, 30px); }
  .einblick:not(.statisch) .wert-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .einblick:not(.statisch) .wert-sym { width: 34px; height: 34px; margin: 0; }
  .einblick:not(.statisch) .wert-karte h3 { font-size: min(clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem), 10.5cqi); }
  .einblick:not(.statisch) .wert-karte > p, .einblick:not(.statisch) .wert-karte .wert-ort { grid-column: 1 / -1; }
  .einblick:not(.statisch) .wert-karte > p { margin-top: 10px; font-size: .9375rem; line-height: 1.6; }
  .einblick:not(.statisch) .wert-karte .wert-ort { margin-top: 10px; }
}
@media (max-width: 600px) {
  /* Telefon: Bild im Querformat über die volle Breite, so hoch wie der Platz unter der Überschrift erlaubt (auch bei Safaris kleinerer Höhe) */
  .einblick:not(.statisch) .einblick-buehne { width: min(100%, calc((100svh - 410px) * 4 / 3)); }
  .einblick:not(.statisch) .lamellen { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) and (max-height: 800px), (min-width: 601px) and (max-width: 900px) and (max-height: 1060px) { .einblick:not(.statisch) .einblick-text > .knopf { display: none; } }
@media (max-width: 1100px) {
  .prozess-kopf { grid-column: 1 / -1; position: relative; top: 0; }
  .prozess-kopf .lead { max-width: 46ch; }
  .prozess-stand { display: none; }
  .prozess-weg { grid-column: 1 / -1; max-width: 720px; }
}
@media (max-width: 600px) {
  .p-schiene { left: 15px; }
  .p-marke { left: 7px; }
  .p-schritt { padding-left: 54px; padding-bottom: 52px; }
  .p-sym { width: 30px; height: 30px; stroke-width: 2.1; }
  .p-schritt h3 { margin-top: 12px; }
  .p-text { font-size: .9375rem; line-height: 1.65; }
}

/* Ohne JavaScript: alles statisch und vollständig sichtbar */
html:not(.js) .buehne, html:not(.js) .einblick { height: auto; }
html:not(.js) .einblick-sticky { position: relative; height: auto; padding-block: var(--abstand); }
html:not(.js) .einblick-werte { display: grid; gap: 40px; }
html:not(.js) .wert-karte { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .einblick-marken { display: none; }
@media (max-width: 760px) {
  .fuss nav a { display: inline-block; padding-block: 9px; }
  .fuss nav { gap: 0; }
  .fuss .fuss-unten nav { gap: 0 24px; flex-wrap: wrap; }
  .menue-knopf, .szene-pause { min-height: 44px; }
  .szene-reiter button, .bereich-branchen a { min-height: 44px; }
  .chips span { min-height: 44px; display: inline-flex; align-items: center; }
  .bx-links a, .bx-aktionen .textlink { min-height: 44px; display: inline-flex; align-items: center; }
  .fuss nav a { padding-block: 10px; }
  .menue .unter a { padding-block: 6px; line-height: 1.6; }
}
/* ---------- v8 responsiv ---------- */
@media (max-width: 600px) {
  .wegeplan-box { padding: 12px; }
  .wegeplan .wp-titel { font-size: 22px; }
  .wegeplan .wp-ort { font-size: 18px; }
  .wegeplan .wp-linien { font-size: 16.5px; }
  .wegeplan .wp-strasse, .wegeplan .wp-klein { font-size: 13px; letter-spacing: .12em; }
  .wegeplan .wp-zeit { font-size: 16px; }
  .uz-pre { display: none; }
}
.stelle-block p, .stelle-block ul { max-width: 68ch; }
.stelle-block ul.bieten { max-width: none; }
@media (max-width: 1100px) {
  .seite-kopf-bild .bild { margin-left: 0; max-width: 420px; }
  .branche-kopf .kopf-symbol { display: block; }
  .werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ansprech-text, .ansprech-bild { grid-column: 1 / -1; }
  .ansprech-bild { max-width: 560px; }
}
@media (max-width: 860px) {
  .index-sym { stroke-width: 2; }
  .index-sym { grid-column: 1; grid-row: 1; align-self: start; width: 32px; height: 32px; margin-top: .1em; }
}
@media (max-width: 760px) {
  .seite-kopf-bild .bild { max-width: none; aspect-ratio: 4 / 3.4; }
  .seite-kopf-bild .bild::before { display: none; }
  .kopf-symbol { margin-bottom: 20px; }
  .kopf-symbol .sym { width: 46px; height: 46px; }
  .weiterblaettern { grid-template-columns: 1fr; }
  .weiterblaettern a, .weiterblaettern a + a { justify-items: start; text-align: left; border-left: 0; padding-inline: 0; }
  .weiterblaettern a + a { border-top: 1px solid var(--linie); }
  .weiterblaettern a + a .wb-ziel { flex-direction: row-reverse; }
  .weiterblaettern a + a:hover .wb-ziel, .weiterblaettern a:first-child:hover .wb-ziel { transform: none; }
  .io-sym { width: 30px; height: 30px; }
  .schritt-sym { width: 40px; height: 40px; margin-bottom: 16px; }
  .werte { grid-template-columns: 1fr; gap: 44px; }
  .wert-icon { width: 56px; height: 56px; margin-bottom: 26px; }
  .wert::before { width: 48px; height: 44px; top: 46px; }
}
@media (max-width: 600px) {
  .netz-liste li > b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--sand); }
}
@media (max-width: 420px) {
  .index-sym { width: 26px; height: 26px; stroke-width: 2.4; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .seite-kopf-bild { grid-column: 1 / -1; }
  .seite-kopf-bild .bild { max-width: none; aspect-ratio: 4 / 3; }
  .seite-kopf-bild .bild::before { left: -4%; width: 40%; }
  .netz-bild { grid-column: 1 / -1; }
  .netz-bild .bild { max-width: none; aspect-ratio: 4 / 3; }
  .netz-bild .bild img { object-position: 50% 30%; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .kontakt-seite { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4.4vw, 48px); align-items: center; }
  .kontakt-seite .daten { margin-top: 0; }
}
@media (max-width: 560px) {
  .buehne-aktionen { display: grid; grid-template-columns: max-content; }
  .buehne-aktionen .knopf { justify-content: space-between; }
}
/* Einblicke auf niedrigen Bildschirmen (Laptops): kompakter, damit alles im Bild bleibt */
@media (min-width: 901px) and (max-height: 720px) {
  .einblick:not(.statisch) #einblick-titel { font-size: clamp(1.9rem, 1rem + 2vw, 2.6rem); }
  .einblick:not(.statisch) .einblick-werte { margin-top: 16px; }
  .einblick:not(.statisch) .einblick-marken { margin: 14px 0 20px; }
  .einblick:not(.statisch) .wert-karte h3 { font-size: min(2.2rem, 13.2cqi); }
  .einblick:not(.statisch) .wert-sym { width: 34px; height: 34px; }
}
/* Bewegung reduzieren: nur auf ausdrücklichen Wunsch (Schalter in der Fußzeile), nicht über die Systemeinstellung */
html.ruhig *, html.ruhig *::before, html.ruhig *::after { animation: none !important; transition: none !important; }
html.ruhig .buehne { height: auto; }
html.ruhig .buehne-sticky { position: relative; height: auto; overflow: visible; }
html.ruhig .buehne-raster { height: 100vh; height: 100svh; }
html.ruhig .buehne-fuss { display: none; }
html.ruhig .buehne-zitat { position: relative; inset: auto; bottom: auto; max-width: none; margin: 0; padding: var(--abstand-s) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); background: var(--graphit); opacity: 1 !important; translate: none !important; }
html.ruhig .bild img[data-parallax] { transform: none; }
html.ruhig { scroll-behavior: auto; }
html.ruhig .netz-puls { display: none; }
html.ruhig .prozess-stand { display: none; }
html.ruhig .zeichnen .sym :is(path, circle, rect, ellipse):not(.ak) { stroke-dashoffset: 0 !important; }
html.ruhig .zeichnen .sym .ak { opacity: 1 !important; transform: none !important; }
html.ruhig .manifest-strich em { background-size: 100% 2px !important; }


/* Kontaktformular: unsichtbares Feld gegen Spam-Programme */
.falle { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular[aria-busy="true"] .knopf { opacity: .6; cursor: progress; }

/* ---------- Seitenwechsel: weicher Wisch in der Signet-Schräge (21°) ----------
   Die neue Seite lädt sofort; der Browser schiebt sie mit einem Salbei-Band über die alte (CSS @view-transition).
   38.39vh = Versatz der 21°-Kante über die ganze Fensterhöhe. */
@view-transition { navigation: auto; }
::view-transition-image-pair(root) { background: var(--salbei); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: seite-wisch-alt .6s cubic-bezier(.5, 0, .2, 1) both; }
::view-transition-new(root) { animation: seite-wisch-neu .6s cubic-bezier(.5, 0, .2, 1) .07s both; }
@keyframes seite-wisch-alt {
  from { clip-path: polygon(0 0, 300% 0, 300% 100%, calc(0px - 38.39vh) 100%); }
  to { clip-path: polygon(calc(100% + 38.39vh) 0, 300% 0, 300% 100%, 100% 100%); }
}
@keyframes seite-wisch-neu {
  from { clip-path: polygon(-300% 0, 0 0, calc(0px - 38.39vh) 100%, -300% 100%); }
  to { clip-path: polygon(-300% 0, calc(100% + 38.39vh) 0, 100% 100%, -300% 100%); }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }