/* Zentari: Tinte und Papier. Dunkle Tinte (grünschwarz) für Bühne und Abschluss, warmes Papier für Inhalt, Messing als einzige Farbe.
   Überschriften in DM Sans eng gesetzt, ein kursives Messingwort in Cormorant. Schriften lokal. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/dm-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-latin.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-italic-latin.woff2) format("woff2"); }

:root {
  --c-bg: #f3efe6; --c-text: #2c3530; --c-head: #0d1512; --c-mut: #5b665f; --c-line: rgba(13, 21, 18, .15); --c-accent: #7a5c14; --c-card: #fbf9f4;
  --gold: #c9a24b; --gold-hi: #e0bd62; --ink: #0d1512; --ink2: #131d19; --green: #46a57a; --bad: #b4452b;
  --paper: #fbf9f4; --paper-line: #ddd5c3;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --w: 1180px;
}
.ink { --c-bg: #0d1512; --c-text: #d3d9d1; --c-head: #f4f1ea; --c-mut: #97a299; --c-line: rgba(244, 241, 234, .15); --c-accent: #dcb85c; --c-card: #151f1b; background: var(--c-bg); color: var(--c-text); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: #0d1512; }
body { margin: 0; background: #f3efe6; color: #2c3530; font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--c-accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 10px 14px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }
.innen { max-width: var(--w); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--sans); color: var(--c-head); font-weight: 600; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 11.4vw, 92px); line-height: .98; }
h2 { font-size: clamp(32px, 7.6vw, 56px); line-height: 1.02; letter-spacing: -.032em; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0 0 1em; }
em.strich { font: italic 500 1.08em/1 var(--serif); letter-spacing: -.01em; color: var(--c-accent); }
.pille { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--c-line); border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 26px; }
.pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.lead { font-size: 18px; line-height: 1.65; color: var(--c-text); max-width: 56ch; }

/* Schwebende Navigation */
.top { position: fixed; top: 12px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.pill { pointer-events: auto; width: min(1120px, 100%); display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 22px; border-radius: 999px; background: rgba(13, 21, 18, .78); box-shadow: 0 0 0 1px rgba(244, 241, 234, .14), 0 18px 40px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 10px; margin-right: auto; color: #f4f1ea; }
.logo b { font: 600 20px/1 var(--sans); letter-spacing: -.04em; color: #f4f1ea; }
.logo b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--gold); }
.logo small { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #97a299; }
.nav { display: none; gap: 4px; margin-right: 10px; }
.nav a { color: #d3d9d1; text-decoration: none; font: 500 13px/1 var(--sans); display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.nav a:hover { background: rgba(244, 241, 234, .08); color: #fff; }
.nav a[aria-current="page"] { background: rgba(201, 162, 75, .16); color: var(--gold-hi); }
.menu-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border: 0; background: rgba(244, 241, 234, .08); border-radius: 50%; cursor: pointer; padding: 0; }
.menu-btn i { display: block; width: 18px; height: 1.5px; background: #f4f1ea; transition: transform .5s var(--ease); }
html.menu-open .menu-btn i:first-child { transform: translateY(3.25px) rotate(45deg); }
html.menu-open .menu-btn i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-ov { position: fixed; inset: 0; z-index: 55; background: rgba(13, 21, 18, .94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); display: flex; flex-direction: column; justify-content: center; padding: 90px 28px 40px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
html.menu-open .menu-ov { opacity: 1; visibility: visible; }
html.menu-open { overflow: hidden; }
.menu-ov a { font: 600 38px/1.1 var(--sans); letter-spacing: -.035em; color: #f4f1ea; text-decoration: none; padding: 12px 0; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.menu-open .menu-ov a { opacity: 1; transform: none; }
html.menu-open .menu-ov a:nth-child(1) { transition-delay: .06s; } html.menu-open .menu-ov a:nth-child(2) { transition-delay: .11s; } html.menu-open .menu-ov a:nth-child(3) { transition-delay: .16s; }
html.menu-open .menu-ov a:nth-child(4) { transition-delay: .21s; } html.menu-open .menu-ov a:nth-child(5) { transition-delay: .26s; } html.menu-open .menu-ov a:nth-child(6) { transition-delay: .31s; color: var(--gold-hi); }
html:not(.js) .menu-btn { display: none; }
html:not(.js) .menu-ov { position: static; opacity: 1; visibility: visible; background: #0d1512; padding: 90px 20px 20px; }
html:not(.js) .menu-ov a { opacity: 1; transform: none; font-size: 22px; }

/* Knöpfe: Pille mit eingebettetem Pfeil */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 6px 6px 6px 28px; background: var(--gold); color: var(--ink); border: 0; border-radius: 999px; font: 600 14px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .4s var(--ease), transform .3s var(--ease); }
.btn .pf { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(13, 21, 18, .12); transition: transform .4s var(--ease), background-color .4s var(--ease); }
.btn .pf svg { display: block; }
.btn:hover { background: var(--gold-hi); color: var(--ink); }
.btn:hover .pf { transform: translate(3px, -1px) scale(1.06); background: rgba(13, 21, 18, .2); }
.btn:active { transform: scale(.98); }
.btn.s { min-height: 44px; padding: 4px 4px 4px 20px; font-size: 13px; gap: 10px; }
.btn.s .pf { width: 36px; height: 36px; }
.btn.hell { background: transparent; color: var(--c-head); box-shadow: inset 0 0 0 1px var(--c-line); }
.btn.hell .pf { background: var(--c-line); }
.btn.hell:hover { background: rgba(201, 162, 75, .14); color: var(--c-head); box-shadow: inset 0 0 0 1px var(--gold); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Abschnitte */
.sek { padding: 88px 0; background: var(--c-bg); color: var(--c-text); position: relative; }
.sek.weiss { --c-bg: #fbf9f4; }
.sek.sand { --c-bg: #ebe5d8; }
.sek.ink, .schluss { --c-bg: #0d1512; }
.kopf { max-width: 760px; margin-bottom: 48px; }
.vorspann, .rail-c > .vorspann { max-width: 60ch; font-size: 17.5px; color: var(--c-text); margin: 14px 0 38px; }
.rail { display: grid; gap: 22px; }
.rail-n { font: italic 500 56px/.9 var(--serif); color: var(--c-accent); letter-spacing: -.01em; }
.rail-n b { display: block; margin-top: 12px; font: 500 12px/1.2 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--c-mut); }
.rail-c { min-width: 0; }
.rail-c > h2 { margin-bottom: 4px; }
.rand { margin: 30px 0 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); font: italic 500 21px/1.45 var(--serif); color: var(--c-head); max-width: 48ch; }
.rand b { display: block; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); font-style: normal; margin-bottom: 8px; }
.hinweis { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: rgba(201, 162, 75, .12); font-size: 15.5px; color: var(--c-head); }
.fuss { font-size: 13px; color: var(--c-mut); margin-top: 16px; }

/* Bezel: äußere Schale und innerer Kern */
.bezel { padding: 6px; border-radius: 30px; background: rgba(13, 21, 18, .05); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); }
.ink .bezel, .bezel.dunkel { background: rgba(244, 241, 234, .05); box-shadow: 0 0 0 1px rgba(244, 241, 234, .1); }
.bezel > .core { border-radius: 24px; background: var(--c-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); overflow: hidden; }
.ink .bezel > .core { box-shadow: inset 0 1px 0 rgba(244, 241, 234, .08); }

/* Hero: Kaskade aus Foto und Karten */
.hero { padding: 120px 0 56px; position: relative; overflow: hidden; background: radial-gradient(900px 600px at 82% 30%, rgba(201, 162, 75, .16), transparent 62%), radial-gradient(700px 500px at 0% 100%, rgba(70, 165, 122, .10), transparent 60%), #0d1512; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(244, 241, 234, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 234, .035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 75%); pointer-events: none; }
.hero > .innen { position: relative; }
.hero-g { display: grid; gap: 40px; }
.hero-t h1 { margin-bottom: 26px; max-width: 12ch; }
.hero-t .lead { color: #d3d9d1; margin-bottom: 32px; }
.hero-v { position: relative; min-height: 460px; }
.hero-foto { position: absolute; right: 50%; transform: translateX(50%); bottom: 0; height: 440px; width: auto; max-width: none; }
.hero-v::before { content: ""; position: absolute; left: 50%; bottom: 40px; width: 360px; height: 360px; margin-left: -180px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .5); box-shadow: 0 0 0 28px rgba(201, 162, 75, .05), 0 0 0 64px rgba(201, 162, 75, .03); }
.gcard { position: absolute; width: 232px; padding: 14px 16px; border-radius: 18px; background: rgba(21, 31, 27, .94); box-shadow: 0 0 0 1px rgba(244, 241, 234, .14), 0 26px 40px -22px rgba(0, 0, 0, .8); color: #d3d9d1; font-size: 13px; line-height: 1.45; }
.gcard small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 8px; }
.gcard b { display: block; font: 600 16px/1.2 var(--sans); letter-spacing: -.02em; color: #f4f1ea; }
.gcard .zahl { font: 600 26px/1 var(--sans); letter-spacing: -.04em; color: #f4f1ea; margin: 6px 0 4px; }
.gcard .quelle { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(244, 241, 234, .08); font-size: 12px; color: #b5beb6; }
.gcard .ampel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 0 4px rgba(70, 165, 122, .2); vertical-align: 1px; }
.gcard .ampel.gelb { background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .22); }
.gcard.c1 { left: 0; top: 24px; }
.gcard.c2 { right: 0; top: 150px; }
.gcard.c3 { left: 6px; bottom: 28px; }
.gcard .ja { display: inline-flex; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 600 12px/1 var(--sans); }
.hero-hinweis { margin: 22px 0 0; font-size: 12.5px; color: #97a299; }
.faktenleiste { background: #0d1512; border-top: 1px solid rgba(244, 241, 234, .1); }
.faktenleiste ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--w); display: grid; grid-template-columns: 1fr 1fr; }
.faktenleiste li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 22px 20px; border-bottom: 1px solid rgba(244, 241, 234, .08); color: #d3d9d1; font-size: 14px; line-height: 1.4; }
.faktenleiste li svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.faktenleiste b { display: block; color: #f4f1ea; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.faktenleiste span { color: #97a299; font-size: 13px; }

/* Bento */
.bento { display: grid; gap: 16px; }
.kachel { display: block; text-decoration: none; color: var(--c-text); height: 100%; }
.kachel .core { padding: 28px 26px 26px; height: 100%; display: flex; flex-direction: column; }
.kachel .tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(201, 162, 75, .16); color: var(--c-accent); font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; }
.kachel h3 { font-size: clamp(26px, 5.2vw, 38px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 12px; }
.kachel p { font-size: 15.5px; color: var(--c-text); }
.kachel .mini { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: 14px; }
.kachel .mini td { padding: 10px 6px 10px 0; border-bottom: 1px solid var(--c-line); color: var(--c-head); vertical-align: top; }
.kachel .mini td:last-child { text-align: right; font-weight: 600; white-space: nowrap; padding-right: 0; font-variant-numeric: tabular-nums; }
.kachel .mini small { display: block; color: var(--c-mut); font-size: 12.5px; font-weight: 400; }
.kachel .weiter { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font: 600 13.5px/1 var(--sans); color: var(--c-head); }
.kachel .weiter .pf { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--ink); transition: transform .4s var(--ease); }
.kachel:hover .weiter .pf { transform: translate(3px, -2px) scale(1.06); }
.kachel .bsp { font-size: 12px; color: var(--c-mut); margin-top: 14px; }
.kachel.gross .core { padding: 34px 30px 30px; }
.kachel .gz { font: 600 clamp(46px, 11vw, 84px)/.95 var(--sans); letter-spacing: -.05em; color: var(--c-head); margin: 4px 0 12px; }
.kachel .gz em { font: italic 500 .72em/1 var(--serif); color: var(--gold); letter-spacing: 0; }

/* Dokumente als Papier */
.doc { margin: 0; background: var(--paper); color: #1b1f1c; border-radius: 22px; padding: 26px 24px 18px; position: relative; box-shadow: 0 0 0 1px rgba(13, 21, 18, .06); }
.doc::before { content: ""; position: absolute; left: 24px; top: 0; width: 56px; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; }
.doc-h { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6a6f66; padding-bottom: 14px; border-bottom: 1px solid var(--paper-line); }
.doc-h em { font-style: normal; color: #7a5c14; }
.doc-t { margin: 16px 0 2px; font: 600 22px/1.2 var(--sans); letter-spacing: -.03em; color: #0d1512; }
.doc-s { font-size: 13px; color: #6a6f66; margin: 0 0 14px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc th { text-align: left; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6a6f66; padding: 8px 6px 8px 0; border-bottom: 1px solid #0d1512; }
.doc th:last-child, .doc td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.doc td { padding: 10px 6px 10px 0; border-bottom: 1px solid #e6dfce; vertical-align: top; color: #1b1f1c; }
.doc td small { display: block; color: #6a6f66; font-size: 12px; }
.doc td:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.doc-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; font-size: 14px; border-top: 2px solid #0d1512; margin-top: -1px; color: #1b1f1c; }
.doc-sum b { font: 600 26px/1 var(--sans); letter-spacing: -.04em; white-space: nowrap; }
.doc figcaption { font-size: 12px; color: #6a6f66; margin-top: 8px; }
.vergleich th:not(:first-child), .vergleich td:not(:first-child) { text-align: right; }
.vergleich tr.abw td { background: rgba(201, 162, 75, .24); font-weight: 600; }
.vergleich tr.abw td:last-child { color: #a3361b; }
.vergleich th:last-child, .vergleich td:last-child { padding-right: 4px; }
.markiert { margin: 14px 0 0; font-size: 13px; color: #4a4f46; }
.tagblatt { list-style: none; margin: 14px 0 0; padding: 0; }
.tagblatt li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e6dfce; font-size: 14px; }
.tagblatt time { font: 600 15px/1.5 var(--sans); letter-spacing: -.02em; color: #7a5c14; font-variant-numeric: tabular-nums; }
.tagblatt b { display: block; color: #0d1512; font-weight: 600; }
.tagblatt span { color: #6a6f66; font-size: 13px; }

/* Unterseiten-Kopf */
.deck { padding: 116px 0 72px; position: relative; overflow: hidden; background: radial-gradient(800px 520px at 85% 20%, rgba(201, 162, 75, .15), transparent 62%), #0d1512; color: #d3d9d1; }
.deck::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(244, 241, 234, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 234, .03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 75%); pointer-events: none; }
.deck > .innen { position: relative; }
.deck .pille { color: var(--gold-hi); border-color: rgba(244, 241, 234, .18); }
.deck h1 { color: #f4f1ea; font-size: clamp(40px, 10.6vw, 76px); max-width: 13ch; margin-bottom: 24px; }
.deck .lead { color: #d3d9d1; }
.deck-g { display: grid; gap: 48px; }
.deck-g > * { min-width: 0; }
.deck .btns { margin-top: 32px; }
.vertr { font-size: 14px; color: #97a299; display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; }
.vertr svg { flex: none; margin-top: 3px; }
.deck .bezel { background: rgba(244, 241, 234, .06); box-shadow: 0 0 0 1px rgba(244, 241, 234, .12), 0 40px 60px -30px rgba(0, 0, 0, .8); }
.deck .doc { box-shadow: none; }

/* Rechner und Ausprobieren */
.rechner { display: grid; gap: 0; }
.core.rechner { padding: 28px 24px; display: grid; gap: 28px; }
.rechner label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--c-text); margin-bottom: 10px; }
.rechner label output { font: 600 20px/1 var(--sans); letter-spacing: -.03em; color: var(--c-head); }
.rechner input[type=range] { width: 100%; accent-color: var(--gold); height: 28px; background: transparent; }
.rechner input[type=number] { width: 100%; min-height: 50px; padding: 10px 14px; font: 600 18px/1 var(--sans); color: var(--c-head); background: rgba(244, 241, 234, .06); border: 1px solid var(--c-line); border-radius: 14px; }
.ergebnis { padding: 24px; border-radius: 18px; background: rgba(201, 162, 75, .14); }
.ergebnis small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 10px; }
.ergebnis .gz { font: 600 clamp(40px, 10vw, 68px)/1 var(--sans); letter-spacing: -.05em; color: var(--c-head); font-variant-numeric: tabular-nums; }
.ergebnis p { margin: 10px 0 0; font-size: 13.5px; color: var(--c-mut); }
.rechner .zeilen { display: grid; gap: 0; }
.rechner .zeilen div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; color: var(--c-text); }
.rechner .zeilen b { color: var(--c-head); font-variant-numeric: tabular-nums; }
.rechner .zeilen .abw b { color: var(--gold-hi); }
.rechner .zeilen .abw { background: rgba(201, 162, 75, .1); margin: 0 -10px; padding: 12px 10px; border-radius: 10px; border-bottom-color: transparent; }

/* Tabellen im Aktenstil */
.akte-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.akte { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid var(--c-head); }
.akte th { text-align: left; font: 500 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); padding: 14px 14px 12px 0; border-bottom: 1px solid var(--c-line); }
.akte td { padding: 17px 18px 17px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; color: var(--c-text); overflow-wrap: anywhere; }
.akte td:first-child { font: 600 18px/1.3 var(--sans); letter-spacing: -.02em; color: var(--c-head); white-space: nowrap; }
.akte-wrap .akte { min-width: 560px; }

/* Listen */
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.haken li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; font-size: 15.5px; }
.haken li::before { content: ""; width: 12px; height: 7px; margin-top: 8px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
.haken.nein li::before { width: 12px; height: 0; border: 0; border-top: 1.5px solid var(--c-mut); transform: none; margin-top: 12px; }
.zweispalt { display: grid; gap: 32px; }
.zweispalt h3 { margin-bottom: 12px; }
.inhalt { list-style: none; margin: 0; padding: 0; counter-reset: k; border-top: 1px solid var(--c-head); }
.inhalt li { counter-increment: k; display: grid; grid-template-columns: 42px 1fr; padding: 16px 0; border-bottom: 1px solid var(--c-line); font: 600 17px/1.35 var(--sans); letter-spacing: -.015em; color: var(--c-head); }
.inhalt li::before { content: counter(k, decimal-leading-zero); font: italic 500 20px/1.2 var(--serif); color: var(--c-accent); }
.inhalt li span { display: block; font: 400 14.5px/1.5 var(--sans); letter-spacing: 0; color: var(--c-mut); margin-top: 2px; }
.paare { border-top: 1px solid var(--c-head); }
.paare > div { display: grid; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--c-line); }
.paare h3 { font-size: 22px; }
.paare .vor, .paare .mit { font-size: 15.5px; margin: 0; }
.paare .vor::before, .paare .mit::before { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.paare .vor::before { content: "Heute"; color: var(--c-mut); }
.paare .mit::before { content: "Mit der Assistenz"; color: var(--c-accent); }
.paare .mit { color: var(--c-head); }

/* Phasen */
.phasen { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-head); counter-reset: ph; }
.phasen li { counter-increment: ph; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.phasen li::before { content: counter(ph, decimal-leading-zero); display: block; font: italic 500 44px/1 var(--serif); color: var(--c-accent); margin-bottom: 12px; }
.phasen h3 { margin-bottom: 4px; font-size: 22px; }
.phasen .zeit { display: block; font-size: 13px; color: var(--c-mut); margin-bottom: 12px; }
.phasen dl { margin: 0; font-size: 14.5px; }
.phasen dt { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-top: 10px; }
.phasen dd { margin: 4px 0 0; color: var(--c-text); }
.nach { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-line); font-size: 15.5px; color: var(--c-mut); }

/* Person */
.person-g { display: grid; gap: 40px; align-items: center; }
.portrait { margin: 0; position: relative; }
.portrait img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 28px; }
.portrait.breit img { max-width: none; aspect-ratio: 16 / 11; object-position: 50% 30%; }
.rolle { color: var(--c-mut); font-size: 15px; margin: 10px 0 22px; }
.kontakt { list-style: none; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--c-line); display: grid; gap: 6px; font-size: 15px; }
.kontakt b { display: inline-block; min-width: 88px; font-weight: 600; color: var(--c-head); }
.band { position: relative; border-radius: 32px; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 21, 18, .1), rgba(13, 21, 18, .82)); }
.band > div { position: relative; z-index: 1; padding: 28px 24px; max-width: 640px; color: #f4f1ea; }
.band h2 { color: #f4f1ea; }
.band p { color: #d3d9d1; margin-top: 14px; }

/* FAQ */
.faq { border-top: 1px solid var(--c-head); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 48px 22px 0; font: 600 19px/1.3 var(--sans); letter-spacing: -.02em; color: var(--c-head); position: relative; transition: color .3s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent); }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(201, 162, 75, .16); color: var(--c-accent); display: flex; align-items: center; justify-content: center; font: 400 22px/1 var(--sans); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] p { animation: einblenden .4s var(--ease); }
.faq details p { margin: 0 0 22px; max-width: 64ch; font-size: 15.5px; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } }

/* Abschluss und Fuß */
.schluss { padding: 100px 0; background: radial-gradient(800px 420px at 20% 0%, rgba(201, 162, 75, .14), transparent 65%), #0d1512; color: #d3d9d1; }
.schluss h2 { color: #f4f1ea; max-width: 16ch; font-size: clamp(36px, 8.4vw, 72px); }
.schluss p { color: #d3d9d1; margin: 22px 0 32px; max-width: 54ch; }
.schluss .tel { margin: 28px 0 0; font-size: 15px; color: #97a299; }
.schluss a:not(.btn) { color: var(--gold-hi); }
.foot { background: #080d0b; color: #97a299; padding: 56px 0 32px; font-size: 14px; }
.foot a { color: #d3d9d1; text-decoration: none; }
.foot a:hover { color: var(--gold-hi); text-decoration: underline; }
.fg { display: grid; gap: 30px; }
.foot .logo { margin-right: 0; }
.foot p { margin: 12px 0 0; line-height: 1.7; }
.foot p strong { color: var(--gold-hi) !important; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.foot .fl { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot .fl a { display: inline-block; padding: 8px 0; }
.foot .fl.col { flex-direction: column; gap: 0; margin-top: 4px; }
.foot .kl { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(244, 241, 234, .1); font-size: 12.5px; color: #78837b; }

/* Rechtstexte */
.seitenkopf { padding-top: 124px; padding-bottom: 8px; }
.seitenkopf h1 { font-size: clamp(36px, 8vw, 58px); }
.legal { padding: 24px 0 88px; }
.rechts { max-width: 760px; }
.rechts h2 { font-size: 26px; margin: 40px 0 10px; letter-spacing: -.03em; }
.rechts p, .rechts li { font-size: 15.5px; }
.rechts ul { padding-left: 20px; }
.kv { display: grid; grid-template-columns: 1fr; margin: 0; }
.kv dt { font-weight: 600; color: var(--c-head); margin-top: 12px; font-size: 14.5px; }
.kv dd { margin: 2px 0 0; font-size: 15.5px; }
.mut { color: var(--c-mut); }
.fehler404 { padding-top: 150px; padding-bottom: 110px; }
.seitenkopf, .legal, .fehler404 { background: #f3efe6; }
body.hell-seite { background: #f3efe6; }

/* Formular */
.formseite { padding-top: 124px; padding-bottom: 88px; }
.fgrid { display: grid; gap: 36px; }
.formular { padding: 30px 24px; display: grid; gap: 22px; }
.feld label, .feld .lab, fieldset.feld legend { display: block; font-weight: 600; font-size: 13.5px; color: var(--c-head); margin-bottom: 8px; }
.feld .opt { font-weight: 400; color: var(--c-mut); }
fieldset.feld { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.feld legend { padding: 0; }
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld input[type=number], .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 13px 16px; font: 400 16px/1.4 var(--sans); color: var(--c-head); background: #fff; border: 1px solid #8b9490; border-radius: 14px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7a5c14 50%), linear-gradient(135deg, #7a5c14 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .28); }
.feld ::placeholder { color: #7b847e; }
.feld [aria-invalid=true] { border-color: var(--bad); }
.f2 { display: grid; gap: 22px; }
.zeiten { display: flex; flex-wrap: wrap; gap: 8px; }
.zeiten label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 12px 18px; border: 1px solid #8b9490; border-radius: 999px; font-weight: 500; cursor: pointer; color: var(--c-text); background: #fff; }
.zeiten input { accent-color: #8a6a1f; }
.zust { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--c-text); }
.zust input { margin-top: 4px; width: 18px; height: 18px; accent-color: #8a6a1f; flex: none; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { margin: 0; font-size: 14px; color: var(--c-mut); min-height: 1.4em; }
.note.bad, .fehl { color: var(--bad); font-weight: 600; }
.fehl { margin: 6px 0 0; font-size: 14px; }
.erwartet h2 { font-size: 30px; margin-bottom: 14px; }
.erwartet .core { padding: 28px 24px; }
.erwartet ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 12px; }
.erwartet li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 15.5px; }
.erwartet li svg { margin-top: 5px; }
.erwartet .person { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--c-line); padding-top: 18px; font-size: 14.5px; }
.erwartet .person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.erwartet .person b { display: block; color: var(--c-head); }
.danke { padding: 32px 26px; }
.danke h2 { font-size: 34px; margin-bottom: 12px; }
.danke textarea { width: 100%; min-height: 160px; font: 14px/1.5 var(--sans); padding: 12px; border: 1px solid #8b9490; border-radius: 14px; background: #fff; color: #1b1f1c; }

/* Einblenden */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.zwei { display: grid; gap: 36px; }

@media (min-width: 720px) {
  body { font-size: 17px; }
  .innen { padding: 0 32px; }
  .sek { padding: 128px 0; }
  .faktenleiste ul { grid-template-columns: repeat(4, 1fr); }
  .faktenleiste li { border-bottom: 0; border-right: 1px solid rgba(244, 241, 234, .08); padding: 26px 24px; }
  .faktenleiste li:last-child { border-right: 0; }
  .paare > div { grid-template-columns: 1fr 1.1fr 1.1fr; gap: 32px; }
  .zweispalt { grid-template-columns: 1fr 1fr; gap: 64px; }
  .phasen { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .f2 { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 200px 1fr; }
  .fg { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .schluss { padding: 140px 0; }
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento .b7 { grid-column: span 7; } .bento .b5 { grid-column: span 5; } .bento .b6 { grid-column: span 6; } .bento .b12 { grid-column: span 12; }
  .core.rechner { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 38px; }
  .band { min-height: 560px; }
  .band > div { padding: 48px 44px; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .menu-btn,   .pill { padding: 8px 8px 8px 26px; }
  .hero { padding: 150px 0 80px; }
  .hero-g { grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }
  .hero-t h1 { max-width: 9ch; }
  .hero-v { min-height: 640px; }
  .hero-foto { height: 640px; }
  .hero-v::before { width: 480px; height: 480px; margin-left: -240px; bottom: 60px; }
  .gcard { width: 250px; padding: 16px 18px; }
  .gcard.c1 { left: -30px; top: 50px; transform: rotate(-2.5deg); }
  .gcard.c2 { right: -20px; top: 230px; transform: rotate(2.5deg); }
  .gcard.c3 { left: 10px; bottom: 60px; transform: rotate(-1.5deg); }
  .deck { padding: 150px 0 110px; }
  .deck-g { grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
  .rail { grid-template-columns: 150px minmax(0, 1fr); gap: 36px; }
  .phasen { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .person-g { grid-template-columns: 420px 1fr; gap: 88px; }
  .fgrid { grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
  .formular { padding: 38px; }
  .zwei { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .seitenkopf, .formseite, .fehler404 { padding-top: 150px; }
}
@media (max-width: 959px) { .hero-v { display: grid; gap: 12px; min-height: 0; padding-top: 8px; } .hero-v::before { display: none; } .hero-foto { position: static; transform: none; height: 380px; margin: 0 auto -10px; order: 4; } .gcard { position: static; width: auto; } }
@media (max-width: 959px) { .top .btn.s { display: none; } }
@media (min-width: 480px) and (max-width: 959px) { .top .btn.s { display: inline-flex; } }
@media (max-width: 479px) { .logo small { display: none; } }
@media (max-width: 379px) { .innen { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .btn .pf, .rv, .menu-ov, .menu-ov a, .menu-btn i, .faq summary::after, .kachel .weiter .pf { transition: none; } .rv { opacity: 1; transform: none; filter: none; } .faq details[open] p { animation: none; } }
@media print { .top, .foot, .schluss, .menu-ov { display: none; } body { background: #fff; color: #000; } }

.bezel.ink { background: rgba(244, 241, 234, .05); box-shadow: 0 0 0 1px rgba(244, 241, 234, .1); color: var(--c-text); }
.bezel.ink > .core { background: #151f1b; }
.band .pille { color: var(--gold-hi); border-color: rgba(244, 241, 234, .3); }
.b7, .b5 { min-width: 0; }
#tok-b[hidden], #tdone-b[hidden], #tok[hidden], #tdone[hidden] { display: none; }
#tok-b, #tdone-b { margin-top: 0; }
.hero-foto { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.logo b { white-space: nowrap; }

/* ===== Zweite Runde: Startseite ohne Gesicht, jede Unterseite mit eigenem Aufbau ===== */
/* Blattstapel (Hero Startseite) */
.stapel { position: relative; min-height: 440px; }
.stapel .blatt { position: absolute; background: var(--paper); color: #1b1f1c; border-radius: 16px; padding: 18px 20px; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(13, 21, 18, .08); font-size: 12.5px; line-height: 1.5; }
.stapel .blatt small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6a6f66; margin-bottom: 10px; }
.stapel .zeile { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #e6dfce; color: #2a2f2b; }
.stapel .zeile b { font-variant-numeric: tabular-nums; }
.stapel .zeile.hit { background: linear-gradient(90deg, rgba(201, 162, 75, .34), rgba(201, 162, 75, .14)); margin: 0 -8px; padding: 7px 8px; border-radius: 6px; border-bottom-color: transparent; font-weight: 600; }
.stapel .b1 { left: 0; top: 40px; width: 62%; transform: rotate(-5deg); opacity: .92; }
.stapel .b2 { right: 0; top: 0; width: 60%; transform: rotate(4deg); }
.stapel .b3 { left: 12%; bottom: 0; width: 76%; transform: rotate(-1deg); padding: 22px 24px; }
.stapel .b3 .summe { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 2px solid #0d1512; }
.stapel .b3 .summe b { font: 600 30px/1 var(--sans); letter-spacing: -.045em; }
.stapel .scan { position: absolute; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 18px 4px rgba(201, 162, 75, .5); top: 10%; animation: scan 5.5s var(--ease) infinite; pointer-events: none; z-index: 3; }
@keyframes scan { 0%, 8% { top: 6%; opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 88%, 100% { top: 94%; opacity: 0; } }
.stapel .chip { position: absolute; z-index: 4; padding: 9px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 600 12.5px/1 var(--sans); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .7); }
.stapel .chip.c1 { right: 2%; top: 46%; transform: rotate(3deg); }
.stapel .chip.c2 { left: 0; top: 36%; transform: rotate(-3deg); background: #f4f1ea; }
.hero .beispielhinweis { margin: 18px 0 0; font-size: 12.5px; color: #97a299; }
.kreis-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.kreis-chips li { padding: 8px 14px; border-radius: 999px; background: rgba(244, 241, 234, .07); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .12); font-size: 13px; color: #d3d9d1; }

/* Situationen */
.sit-grid { display: grid; gap: 14px; }
.sit { padding: 24px 22px; border-radius: 22px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); display: flex; flex-direction: column; gap: 12px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.sit:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(201, 162, 75, .55), 0 24px 40px -26px rgba(13, 21, 18, .4); }
.sit .tag { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: rgba(201, 162, 75, .18); color: var(--c-accent); }
.sit .tag.hv { background: rgba(70, 165, 122, .16); color: #2c7a57; }
.sit h3 { font-size: 22px; letter-spacing: -.03em; }
.sit p { margin: 0; font-size: 15px; color: var(--c-text); }
.sit .ergebnis-z { margin-top: auto; font: italic 500 19px/1.2 var(--serif); color: var(--c-head); padding-top: 12px; border-top: 1px solid var(--c-line); }

/* Drei große Schritte */
.gs { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.gs > div { display: grid; gap: 10px; padding: 34px 0; border-bottom: 1px solid var(--c-line); }
.gs .nr { font: italic 500 clamp(64px, 14vw, 120px)/.85 var(--serif); color: var(--gold); }
.gs h3 { font-size: clamp(26px, 5.4vw, 38px); letter-spacing: -.035em; }
.gs p { margin: 0; max-width: 46ch; font-size: 16px; }
.gs .zeiten-s { margin-top: 10px; display: grid; gap: 4px; font-size: 13.5px; color: var(--c-mut); }
.gs .zeiten-s b { color: var(--c-head); font-weight: 600; }

/* Tabs */
.tabs { display: grid; gap: 22px; }
.tab-list { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn { appearance: none; border: 0; cursor: pointer; padding: 12px 20px; border-radius: 999px; background: transparent; color: var(--c-text); font: 600 14px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--c-line); transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.tab-btn:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.tab-btn[aria-selected="true"] { background: var(--gold); color: var(--ink); box-shadow: none; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: einblenden .5s var(--ease); }
.vsplit { display: grid; gap: 14px; }
.vsplit > div { padding: 24px 22px; border-radius: 20px; }
.vsplit .heute { background: rgba(13, 21, 18, .06); box-shadow: inset 0 0 0 1px var(--c-line); }
.vsplit .mit { background: rgba(201, 162, 75, .16); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .5); }
.ink .vsplit .heute { background: rgba(244, 241, 234, .05); }
.ink .vsplit .mit { background: rgba(201, 162, 75, .14); }
.vsplit small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-mut); margin-bottom: 10px; }
.vsplit .mit small { color: var(--c-accent); }
.vsplit p { margin: 0; font-size: 15.5px; color: var(--c-head); }
.vsplit h4 { margin: 0 0 8px; font: 600 20px/1.2 var(--sans); letter-spacing: -.03em; color: var(--c-head); }
.tabs-l { display: grid; gap: 28px; }
.tabs-l .tab-list { flex-direction: column; align-items: stretch; }
.tabs-l .tab-btn { text-align: left; border-radius: 16px; padding: 16px 18px; }

/* Prüfpunkte als Zeilen (Logistik) */
.pz { border-top: 1px solid var(--c-head); }
.pz > div { display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; padding: 22px 0; border-bottom: 1px solid var(--c-line); align-items: start; }
.pz .n { font: italic 500 26px/1 var(--serif); color: var(--c-accent); grid-row: span 2; }
.pz h3 { font-size: 22px; }
.pz p { margin: 0; font-size: 15.5px; }
.pz .beleg { grid-column: 2; display: inline-block; justify-self: start; margin-top: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(13, 21, 18, .06); font-size: 12px; color: var(--c-mut); }

/* Zeitstrahl (Logistik) */
.zs { display: grid; gap: 0; position: relative; margin-top: 8px; }
.zs > div { position: relative; padding: 0 0 34px 44px; }
.zs > div::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -8px; width: 1px; background: var(--c-line); }
.zs > div:last-child::before { display: none; }
.zs > div::after { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(201, 162, 75, .2); }
.zs .tag-z { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px; }
.zs h3 { font-size: 24px; margin-bottom: 6px; }
.zs p { margin: 0; max-width: 54ch; font-size: 15.5px; }
.balken { margin-top: 36px; padding: 22px; border-radius: 20px; background: rgba(13, 21, 18, .05); box-shadow: inset 0 0 0 1px var(--c-line); }
.balken .skala { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; font-size: 12px; color: var(--c-mut); text-align: center; margin-bottom: 8px; }
.balken .spur { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 38px; }
.balken .spur span { border-radius: 8px; background: rgba(13, 21, 18, .08); }
.balken .spur .an { background: var(--gold); }
.balken .beschr { margin: 12px 0 0; font-size: 13.5px; color: var(--c-mut); }

/* Statistik-Hero Logistik */
.stat-gross { font: 600 clamp(64px, 17vw, 168px)/.9 var(--sans); letter-spacing: -.06em; color: #f4f1ea; font-variant-numeric: tabular-nums; }
.stat-gross em { font: italic 500 .34em/1 var(--serif); letter-spacing: 0; color: var(--gold); margin-left: 10px; }
.stat-u { margin-top: 14px; font-size: 14px; color: #97a299; max-width: 44ch; }
.stat-zeilen { margin-top: 28px; display: grid; gap: 0; }
.stat-zeilen div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(244, 241, 234, .14); font-size: 14.5px; color: #d3d9d1; }
.stat-zeilen b { color: #f4f1ea; font-variant-numeric: tabular-nums; }

/* Gerät (Assistenz) */
.geraet { position: relative; margin: 0 auto; width: min(100%, 340px); }
.geraet .rahmen { padding: 10px; border-radius: 44px; background: #1c2822; box-shadow: 0 0 0 1px rgba(244, 241, 234, .18), 0 50px 70px -30px rgba(0, 0, 0, .9); }
.geraet .schirm { border-radius: 34px; background: var(--paper); color: #1b1f1c; padding: 28px 20px 22px; min-height: 480px; }
.geraet .schirm .kopfz { display: flex; justify-content: space-between; align-items: baseline; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6a6f66; margin-bottom: 16px; }
.geraet .schirm h4 { margin: 0 0 4px; font: 600 24px/1.1 var(--sans); letter-spacing: -.04em; color: #0d1512; }
.geraet .schirm .u { font-size: 13px; color: #6a6f66; margin: 0 0 14px; }
.geraet .karte { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e6dfce; margin-bottom: 8px; font-size: 13px; }
.geraet .karte b { display: block; font-weight: 600; color: #0d1512; }
.geraet .karte span { color: #6a6f66; }
.geraet .karte .a { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; }
.geraet .karte .a.g { background: var(--gold); }
.geraet .ja { display: block; text-align: center; padding: 12px; border-radius: 999px; background: #0d1512; color: #f4f1ea; font: 600 13px/1 var(--sans); margin-top: 12px; }
.geraet .fl { position: absolute; z-index: 2; padding: 9px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 600 12px/1 var(--sans); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .7); }
.geraet .fl.f1 { right: -14px; top: 90px; transform: rotate(3deg); }
.geraet .fl.f2 { left: -14px; bottom: 120px; transform: rotate(-3deg); background: #f4f1ea; }
.sicht-panel { padding: 26px 24px; border-radius: 22px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); }
.sicht-panel ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.sicht-panel li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: baseline; font-size: 15.5px; }
.sicht-panel li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.vgl3 { display: grid; gap: 14px; }
.vgl3 > div { padding: 26px 24px; border-radius: 22px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); }
.vgl3 > .hi { background: #0d1512; color: #d3d9d1; box-shadow: 0 0 0 1px rgba(201, 162, 75, .5), 0 30px 50px -30px rgba(13, 21, 18, .7); }
.vgl3 h3 { margin-bottom: 4px; }
.vgl3 > .hi h3 { color: #f4f1ea; }
.vgl3 small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin: 14px 0 6px; }
.vgl3 > .hi small { color: var(--gold-hi); }
.vgl3 p { margin: 0; font-size: 15px; }
.ebenen { padding: 22px; border-radius: 28px; background: rgba(13, 21, 18, .05); box-shadow: inset 0 0 0 1px var(--c-line); }
.ebenen .e2 { padding: 22px; border-radius: 22px; background: #0d1512; color: #d3d9d1; }
.ebenen .e2 > b, .ebenen .e1 > b { display: block; font: 600 17px/1.2 var(--sans); letter-spacing: -.02em; color: #f4f1ea; }
.ebenen .e2 > span, .ebenen .e1 > span { display: block; font-size: 14px; color: #97a299; margin-top: 4px; }
.ebenen .e1s { display: grid; gap: 10px; margin-top: 16px; }
.ebenen .e1 { padding: 16px 18px; border-radius: 16px; background: #1b2822; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35); }
.ebenen .e1 em { font: italic 500 18px/1 var(--serif); color: var(--gold); }

/* Module als Reihe (Hausverwaltung) */
.mod-reihe { display: grid; gap: 14px; }
.mod { padding: 24px 22px; border-radius: 22px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); display: flex; flex-direction: column; gap: 8px; }
.mod .nr { font: italic 500 28px/1 var(--serif); color: var(--c-accent); }
.mod h3 { font-size: 20px; }
.mod .frage { font: italic 500 18px/1.25 var(--serif); color: var(--c-head); }
.mod p { margin: 0; font-size: 14.5px; }

/* Phasen als große Zeilen (Vorgehen) */
.ph-zeile { display: grid; gap: 22px; padding: 44px 0; border-top: 1px solid var(--c-line); }
.ph-zeile .gross { font: italic 500 clamp(110px, 30vw, 240px)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--gold); user-select: none; }
.ph-zeile h2 { font-size: clamp(30px, 7vw, 52px); }
.ph-zeile .zeit { margin: 8px 0 0; color: var(--c-mut); font-size: 14px; }
.ph-3 { display: grid; gap: 16px; margin-top: 18px; }
.ph-3 div { padding-top: 12px; border-top: 1px solid var(--c-line); font-size: 15px; }
.ph-3 small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px; }
.spur-oben { display: flex; align-items: center; gap: 0; margin: 34px 0 0; }
.spur-oben span { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 5px rgba(201, 162, 75, .2); }
.spur-oben i { flex: 1; height: 1px; background: rgba(244, 241, 234, .25); }
.spur-oben span:nth-of-type(n+2) { background: transparent; box-shadow: inset 0 0 0 1px var(--gold); }
.banner-kurz { padding: 32px 28px; border-radius: 28px; background: #0d1512; color: #d3d9d1; display: grid; gap: 18px; }
.banner-kurz h3 { color: #f4f1ea; font-size: clamp(26px, 5.4vw, 40px); letter-spacing: -.035em; }

/* Über uns */
.stimme { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.stimme > div { padding: 28px 0; border-bottom: 1px solid var(--c-line); display: grid; gap: 10px; }
.stimme h3 { font-size: clamp(26px, 5.6vw, 40px); letter-spacing: -.035em; }
.stimme p { margin: 0; max-width: 58ch; }
.stand3 { display: grid; gap: 14px; }
.stand3 > div { padding: 24px 22px; border-radius: 22px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); }
.stand3 h3 { font-size: 20px; margin-bottom: 10px; }
.stand3 p { margin: 0; font-size: 15px; }

@media (min-width: 720px) {
  .sit-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .vsplit { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ph-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .mod-reihe { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .vgl3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .stand3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .gs > div { grid-template-columns: 220px 1fr; gap: 40px; align-items: center; padding: 44px 0; }
  .pz > div { grid-template-columns: 60px 1.1fr 1.6fr auto; gap: 0 28px; align-items: baseline; }
  .pz .n { grid-row: auto; }
  .pz .beleg { grid-column: auto; margin-top: 0; }
  .stimme > div { grid-template-columns: 1.1fr 1.5fr; gap: 56px; align-items: baseline; padding: 36px 0; }
  .banner-kurz { grid-template-columns: 1.3fr auto; align-items: center; padding: 44px 48px; gap: 36px; }
}
@media (min-width: 960px) {
  .sit-grid { grid-template-columns: repeat(3, 1fr); }
  .stapel { min-height: 560px; }
  .tabs-l { grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
  .mod-reihe { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .ph-zeile { grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
  .zs { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .zs > div { padding: 40px 0 0; }
  .zs > div::before { left: 15px; right: -28px; top: 7px; bottom: auto; width: auto; height: 1px; }
  .zs > div::after { left: 0; top: 0; }
}
@media (max-width: 719px) { .stapel .b1 { width: 70%; } .stapel .b2 { width: 66%; } .stapel .b3 { left: 4%; width: 92%; } .stapel { min-height: 420px; } .geraet .fl { display: none; } }
@media (prefers-reduced-motion: reduce) { .stapel .scan { animation: none; opacity: 0; } .tab-panel { animation: none; } .sit { transition: none; } }
@media (min-width: 960px) { .hero-t h1 { max-width: 14ch; font-size: clamp(42px, 5.5vw, 76px); } }
.stat-gross { font-size: clamp(56px, 13vw, 124px); white-space: nowrap; }
.stat-gross em { display: block; margin: 8px 0 0; font-size: .26em; }
.geraet .fl.f1 { top: 28px; right: -18px; }
.geraet .fl.f2 { left: 22px; bottom: -16px; }

/* ===== Startseite allgemein: Produktfenster, Säulen, Aufbau, Ergebnisse, Datenschutz ===== */
.fenster-b { position: relative; padding: 8px 0 24px; }
.fenster { position: relative; border-radius: 22px; background: #131d19; box-shadow: 0 0 0 1px rgba(244, 241, 234, .14), 0 60px 90px -40px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(201, 162, 75, .25); overflow: hidden; color: #d3d9d1; font-size: 13px; }
.fenster .leiste { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0f1713; border-bottom: 1px solid rgba(244, 241, 234, .08); }
.fenster .leiste i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 241, 234, .18); }
.fenster .leiste span { margin-left: 12px; font-size: 12px; letter-spacing: .04em; color: #7f8b83; }
.fenster .leiste em { margin-left: auto; font: 500 12px/1 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.fenster .koerper { display: grid; grid-template-columns: 1fr; }
.fenster .seite { display: none; padding: 16px 12px; border-right: 1px solid rgba(244, 241, 234, .08); background: #101813; }
.fenster .seite b { display: block; margin: 0 8px 12px; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6f7b73; }
.fenster .seite a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #aeb8b0; font-size: 12.5px; text-decoration: none; pointer-events: none; }
.fenster .seite a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fenster .seite a.an { background: rgba(201, 162, 75, .14); color: var(--gold-hi); }
.fenster .haupt { padding: 20px 18px 18px; }
.fenster h4 { margin: 0; font: 600 20px/1.1 var(--sans); letter-spacing: -.035em; color: #f4f1ea; }
.fenster .unter { margin: 4px 0 16px; color: #8c978f; font-size: 12px; }
.fenster .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.fenster .kpi { padding: 12px 12px 10px; border-radius: 14px; background: rgba(244, 241, 234, .05); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .08); }
.fenster .kpi b { display: block; font: 600 24px/1 var(--sans); letter-spacing: -.04em; color: #f4f1ea; font-variant-numeric: tabular-nums; }
.fenster .kpi span { display: block; margin-top: 6px; font-size: 12px; color: #8c978f; line-height: 1.3; }
.fenster .kpi.gold b { color: var(--gold-hi); }
.fenster .liste { display: grid; gap: 7px; }
.fenster .zl { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; background: rgba(244, 241, 234, .04); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .06); }
.fenster .zl .p { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(70, 165, 122, .18); }
.fenster .zl .p.g { background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .2); }
.fenster .zl .p.r { background: #d0674b; box-shadow: 0 0 0 4px rgba(208, 103, 75, .2); }
.fenster .zl b { display: block; color: #ece8df; font-weight: 600; font-size: 12.5px; }
.fenster .zl span { color: #7f8b83; font-size: 12px; }
.fenster .zl em { font: 600 12px/1 var(--sans); font-style: normal; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); }
.fenster .zl em.l { background: transparent; color: #aeb8b0; box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .2); }
.fenster-b .chip { position: absolute; z-index: 3; padding: 10px 16px; border-radius: 999px; background: #f4f1ea; color: var(--ink); font: 600 12.5px/1 var(--sans); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .8); }
.fenster-b .chip.c1 { left: -10px; bottom: 56px; }
.fenster-b .chip.c2 { right: -8px; top: 70px; background: var(--gold); }
.hero-hinweis2 { margin: 14px 0 0; text-align: center; font-size: 12px; color: #6f7b73; }

.saeulen { display: grid; gap: 14px; }
.saeule { padding: 30px 26px; border-radius: 26px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); display: flex; flex-direction: column; gap: 14px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.saeule:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(201, 162, 75, .6), 0 30px 50px -30px rgba(13, 21, 18, .45); }
.saeule .ico { width: 52px; height: 52px; border-radius: 16px; background: #0d1512; display: flex; align-items: center; justify-content: center; }
.saeule .ico svg { width: 26px; height: 26px; stroke: var(--gold-hi); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.saeule h3 { font-size: 28px; letter-spacing: -.04em; }
.saeule p { margin: 0; font-size: 15.5px; }
.saeule .nr { font: italic 500 18px/1 var(--serif); color: var(--c-accent); }

.fluss { display: grid; gap: 0; counter-reset: fl; }
.knoten { position: relative; padding: 0 0 30px 64px; counter-increment: fl; }
.knoten::before { content: counter(fl); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: #0d1512; color: var(--gold-hi); font: italic 500 22px/44px var(--serif); text-align: center; box-shadow: 0 0 0 1px rgba(201, 162, 75, .5); }
.knoten::after { content: ""; position: absolute; left: 22px; top: 50px; bottom: 6px; width: 1px; background: linear-gradient(var(--gold), transparent); opacity: .55; }
.knoten:last-child::after { display: none; }
.knoten h3 { font-size: 22px; margin-bottom: 6px; }
.knoten p { margin: 0; font-size: 15px; max-width: 34ch; }
.ink .knoten h3 { color: #f4f1ea; }
.drei-saetze { display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--c-line); }
.drei-saetze > div { padding: 22px 0; border-bottom: 1px solid var(--c-line); display: grid; gap: 6px; }
.drei-saetze h3 { font-size: 20px; }
.drei-saetze p { margin: 0; font-size: 15px; max-width: 50ch; }

.erg-grid { display: grid; gap: 14px; }
.erg { padding: 26px 24px; border-radius: 24px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); display: grid; gap: 12px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.erg:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(201, 162, 75, .6), 0 26px 44px -28px rgba(13, 21, 18, .4); }
.erg svg { width: 30px; height: 30px; stroke: var(--c-accent); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.erg h3 { font-size: 21px; }
.erg p { margin: 0; font-size: 15px; }

.ds-g { display: grid; gap: 18px; }
.ds-punkte { display: grid; gap: 0; }
.ds-punkte > div { display: grid; grid-template-columns: 38px 1fr; gap: 6px 16px; padding: 22px 0; border-bottom: 1px solid var(--c-line); }
.ds-punkte > div:first-child { border-top: 1px solid var(--c-line); }
.ds-punkte svg { grid-row: span 2; width: 30px; height: 30px; stroke: var(--gold-hi); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.ds-punkte h3 { font-size: 20px; }
.ds-punkte p { margin: 0; font-size: 15px; color: var(--c-text); }
.ds-karte { padding: 30px 26px; border-radius: 26px; background: rgba(201, 162, 75, .1); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .45); align-self: start; }
.ds-karte h3 { font-size: 24px; margin-bottom: 12px; }
.ds-karte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ds-karte li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 15px; color: var(--c-text); }
.ds-karte li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gold); }
.ds-karte p { margin: 16px 0 0; font-size: 13.5px; color: var(--c-mut); }

.branchen { display: grid; gap: 14px; }
.branche { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 26px; border-radius: 26px; text-decoration: none; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); color: var(--c-head); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.branche:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(201, 162, 75, .6), 0 26px 44px -28px rgba(13, 21, 18, .4); }
.branche b { display: block; font: 600 26px/1.1 var(--sans); letter-spacing: -.04em; }
.branche span.u { display: block; margin-top: 6px; font-size: 14.5px; color: var(--c-mut); }
.branche .pf { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--ink); transition: transform .4s var(--ease); }
.branche:hover .pf { transform: translate(3px, -3px) scale(1.06); }

@media (min-width: 720px) {
  .fenster .kpis { gap: 10px; }
  .fenster .koerper { grid-template-columns: 170px 1fr; }
  .fenster .seite { display: block; }
  .fenster .haupt { padding: 24px 24px 22px; }
  .saeulen { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .erg-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .branchen { grid-template-columns: 1fr 1fr; gap: 18px; }
  .drei-saetze { grid-template-columns: repeat(3, 1fr); gap: 36px; border-top: 1px solid var(--c-line); }
  .drei-saetze > div { border-bottom: 0; padding: 26px 0 0; }
}
@media (min-width: 960px) {
  .fenster-b { padding: 24px 0 36px; }
  .fenster { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: 70% 50%; transition: transform 1.1s var(--ease); }
  .fenster-b:hover .fenster { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
  .fluss { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .knoten { padding: 66px 0 0; }
  .knoten::before { left: 0; top: 0; }
  .knoten::after { left: 52px; right: -20px; top: 22px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
  .erg-grid { grid-template-columns: repeat(3, 1fr); }
  .ds-g { grid-template-columns: 1.25fr 1fr; gap: 56px; }
  .hero-g.allg { grid-template-columns: 1fr 1.08fr; gap: 56px; }
}
@media (max-width: 719px) { .fenster-b .chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .fenster { transform: none !important; transition: none; } .saeule, .erg, .branche { transition: none; } }

/* ===== Bereichsspezifische Köpfe und Bilder ===== */
.deck.foto, .deck.bildmitte { background: #0d1512; }
.deck.foto::before, .deck.bildmitte::before { display: none; }
.deck-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck.foto .deck-bg { opacity: .62; object-position: 50% 40%; }
.deck.foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 21, 18, .94) 18%, rgba(13, 21, 18, .55) 62%, rgba(13, 21, 18, .35)), linear-gradient(0deg, #0d1512, transparent 30%); }
.deck.foto > .innen, .deck.bildmitte > .innen { position: relative; z-index: 2; }
.deck.bildmitte .deck-bg { opacity: .5; object-position: 50% 50%; filter: saturate(.8); }
.deck.bildmitte::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(13, 21, 18, .35), rgba(13, 21, 18, .92) 75%); }
.deck.bildmitte .innen { text-align: center; }
.deck.bildmitte h1, .deck.bildmitte .lead { margin-left: auto; margin-right: auto; }
.deck.bildmitte .btns { justify-content: center; }
.deck.bildmitte .spur-oben { max-width: 560px; margin-left: auto; margin-right: auto; }
.deck.bildmitte .pille { margin-left: auto; margin-right: auto; }
.bildnachweis { margin: 14px 0 0; font-size: 12px; color: #7f8b83; }
.bildnachweis.hell { color: var(--c-mut); }

/* Hausverwaltung: heller Kopf mit Bogenbild */
.deck.hell { background: radial-gradient(900px 500px at 85% 15%, rgba(201, 162, 75, .2), transparent 60%), #f3efe6; color: #2c3530; }
.deck.hell::before { background-image: linear-gradient(rgba(13, 21, 18, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 21, 18, .05) 1px, transparent 1px); }
.deck.hell h1 { color: #0d1512; }
.deck.hell .lead { color: #2c3530; }
.deck.hell .pille { color: #7a5c14; border-color: rgba(13, 21, 18, .2); }
.deck.hell .vertr { color: #5b665f; }
.deck.hell .btn.hell { color: #0d1512; }
.bogen { position: relative; max-width: 440px; margin: 0 auto; }
.bogen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 220px 220px 28px 28px; box-shadow: 0 40px 70px -34px rgba(13, 21, 18, .55); }
.bogen .chip-k { position: absolute; padding: 12px 16px; border-radius: 18px; background: #fbf9f4; color: #1b1f1c; font-size: 12.5px; line-height: 1.35; box-shadow: 0 20px 34px -16px rgba(13, 21, 18, .5), 0 0 0 1px rgba(13, 21, 18, .06); max-width: 210px; }
.bogen .chip-k b { display: block; font: 600 13.5px/1.2 var(--sans); letter-spacing: -.02em; color: #0d1512; }
.bogen .chip-k i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--green); }
.bogen .chip-k i.g { background: var(--gold); } .bogen .chip-k i.r { background: #d0674b; }
.bogen .k1 { left: -26px; top: 32%; } .bogen .k2 { right: -22px; bottom: 14%; }

/* Objekte mit Foto (Hausverwaltung) */
.obj-grid { display: grid; gap: 14px; }
.obj { position: relative; border-radius: 26px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; box-shadow: 0 30px 50px -34px rgba(13, 21, 18, .6); }
.obj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.obj:hover img { transform: scale(1.04); }
.obj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(13, 21, 18, .86)); }
.obj > div { position: relative; z-index: 1; padding: 22px; color: #f4f1ea; width: 100%; }
.obj h3 { color: #f4f1ea; font-size: 24px; margin-bottom: 10px; }
.obj .st { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(13, 21, 18, .72); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .16); font-size: 13.5px; line-height: 1.35; color: #e6e9e3; }
.obj .st i { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--green); box-shadow: 0 0 0 4px rgba(70, 165, 122, .22); }
.obj .st i.g { background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .25); }
.obj .st i.r { background: #d0674b; box-shadow: 0 0 0 4px rgba(208, 103, 75, .25); }
.obj .st b { display: block; color: #fff; font-weight: 600; }

/* Logistik: geteilte Ansicht mit Foto, Zeitband */
.split-bild { display: grid; gap: 34px; }
.split-bild .foto { position: relative; border-radius: 28px; overflow: hidden; min-height: 320px; align-self: start; }
.split-bild .foto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.band-foto { position: relative; overflow: hidden; }
.band-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.band-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0d1512, rgba(13, 21, 18, .35) 30%, rgba(13, 21, 18, .75) 80%, #0d1512); }
.band-foto > .innen { position: relative; z-index: 1; }
.glas { padding: 26px 24px; border-radius: 24px; background: rgba(13, 21, 18, .62); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .16); }
.glas-g { display: grid; gap: 14px; }
.glas .tag-z { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 10px; }
.glas h3 { color: #f4f1ea; font-size: 24px; margin-bottom: 8px; }
.glas p { margin: 0; font-size: 15px; color: #d3d9d1; }

/* Vertrauen: Karten und Fakten */
.trust3 { display: grid; gap: 14px; }
.trust3 > div { padding: 28px 24px; border-radius: 24px; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08); }
.trust3 svg { width: 30px; height: 30px; stroke: var(--c-accent); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.trust3 h3 { font-size: 21px; margin-bottom: 8px; }
.trust3 p { margin: 0; font-size: 15px; }
.mit-bild { display: grid; gap: 26px; }
.mit-bild .foto { border-radius: 28px; overflow: hidden; min-height: 280px; position: relative; }
.mit-bild .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fakten-strip { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.fakten-strip > div { padding: 22px 0; border-bottom: 1px solid var(--c-line); }
.fakten-strip small { display: block; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px; }
.fakten-strip b { font: 600 22px/1.2 var(--sans); letter-spacing: -.03em; color: var(--c-head); }
.fakten-strip span { display: block; margin-top: 4px; font-size: 14px; color: var(--c-mut); }

@media (min-width: 720px) {
  .obj-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .obj { min-height: 460px; }
  .glas-g { grid-template-columns: repeat(2, 1fr); }
  .trust3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .fakten-strip { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .fakten-strip > div { border-bottom: 0; padding: 26px 0 0; }
}
@media (min-width: 960px) {
  .split-bild { grid-template-columns: .85fr 1.15fr; gap: 64px; }
  .split-bild .foto { position: sticky; top: 110px; min-height: 560px; }
  .glas-g { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mit-bild { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
  .mit-bild .foto { min-height: 440px; }
  .deck.hell .deck-g { align-items: center; }
}
@media (max-width: 719px) { .bogen .chip-k { position: static; margin-top: 10px; max-width: none; } .bogen img { border-radius: 160px 160px 24px 24px; } }
@media (prefers-reduced-motion: reduce) { .obj img { transition: none; } }

.halo { position: relative; }
.halo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 75, .32), rgba(201, 162, 75, 0) 68%); }
.halo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .45); box-shadow: 0 0 0 36px rgba(201, 162, 75, .05); }
.halo .geraet { z-index: 1; }
.bogen img, .portrait img { height: auto; }

/* Integrations-Diagramm (Startseite) */
.hero .hero-t { max-width: 820px; }
.hero h1 { max-width: 15ch; }
.hub { position: relative; margin-top: 56px; display: grid; gap: 14px; }
.hub-t { margin: 0 0 14px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #97a299; }
.hub-sp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hub-sp li { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 14px; background: rgba(244, 241, 234, .06); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .13); color: #d3d9d1; font-size: 14px; }
.hub-sp li svg { flex: none; width: 20px; height: 20px; stroke: #97a299; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hub-sp.hub-r li { background: rgba(201, 162, 75, .1); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .45); color: #f4f1ea; }
.hub-sp.hub-r li svg { stroke: var(--gold-hi); }
.hub-mitte { text-align: center; padding: 14px 0; }
.hub-mitte .hub-t { margin: 16px 0 6px; color: var(--gold-hi); }
.hub-mitte small { color: #97a299; font-size: 12px; }
.kern { position: relative; width: 104px; height: 104px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #2a362f, #131d19); box-shadow: 0 0 0 1px rgba(201, 162, 75, .7), 0 0 0 14px rgba(201, 162, 75, .08), 0 0 60px 4px rgba(201, 162, 75, .28); }
.kern::after { content: ""; position: absolute; inset: -26px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .35); animation: puls 3.6s var(--ease) infinite; }
.kern span { font: italic 500 54px/1 var(--serif); color: var(--gold-hi); }
@keyframes puls { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.hub-linien { display: none; }
.hub-linien path { fill: none; stroke: rgba(201, 162, 75, .55); stroke-width: 1.2; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.hub-linien .zu { animation: fliess 2.4s linear infinite; }
.hub-linien .ab { animation: fliess 2.4s linear infinite; }
@keyframes fliess { to { stroke-dashoffset: -20; } }
.hub-fuss { margin: 26px 0 0; font-size: 13px; color: #7f8b83; }
@media (min-width: 960px) {
  .hub { grid-template-columns: 1fr 190px 1fr; gap: 0 56px; align-items: start; padding-top: 0; }
  .hub-sp ul { gap: 14px; }
  .hub-mitte { align-self: center; padding-top: 0; margin-top: 44px; }
  .hub-linien { display: block; position: absolute; inset: 0; width: 100%; height: 360px; pointer-events: none; }
  .hub-sp, .hub-mitte { position: relative; z-index: 1; }
  .hero { padding-bottom: 72px; }
}
@media (max-width: 959px) { .hub-mitte { display: flex; align-items: center; gap: 18px; text-align: left; } .kern { width: 76px; height: 76px; margin: 0; flex: none; } .kern span { font-size: 40px; } .kern::after { display: none; } .hub-mitte > div:last-child { } }
@media (prefers-reduced-motion: reduce) { .kern::after { animation: none; opacity: .3; } .hub-linien .zu, .hub-linien .ab { animation: none; } }

/* Assistenz: Oberflächen als Karten */
.flaechen { position: relative; min-height: 420px; max-width: 460px; margin: 0 auto; }
.sf { position: absolute; width: 74%; padding: 16px 18px; border-radius: 18px; background: var(--paper); color: #1b1f1c; box-shadow: 0 34px 50px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(13, 21, 18, .08); font-size: 13px; line-height: 1.45; }
.sf-k { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6a6f66; }
.sf-k em { font-style: normal; padding: 4px 9px; border-radius: 999px; background: rgba(201, 162, 75, .28); color: #5b440b; letter-spacing: .1em; }
.sf b { display: block; font: 600 15px/1.25 var(--sans); letter-spacing: -.02em; color: #0d1512; }
.sf p { margin: 6px 0 0; color: #4a4f46; font-size: 12.5px; }
.sf-ja { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: #0d1512; color: #f4f1ea; font: 600 12px/1 var(--sans); }
.sf-z { padding: 8px 0; border-bottom: 1px solid #e6dfce; font-size: 13px; color: #2a2f2b; }
.sf-z.hit { background: linear-gradient(90deg, rgba(201, 162, 75, .36), rgba(201, 162, 75, .12)); margin: 0 -8px; padding: 8px; border-radius: 6px; font-weight: 600; border-bottom-color: transparent; }
.sf.f1 { left: 0; top: 0; transform: rotate(-2deg); z-index: 1; }
.sf.f2 { right: 0; top: 150px; transform: rotate(2.5deg); z-index: 2; }
.sf.f3 { left: 6%; bottom: 0; transform: rotate(-1deg); z-index: 3; }
@media (max-width: 719px) { .flaechen { min-height: 0; display: grid; gap: 12px; } .sf { position: static; width: auto; transform: none !important; } }

.hub-mitte small { display: block; }
.flaechen { min-height: 480px; }
.sf.f2 { top: 130px; }

/* Orbit: Zentari in der Mitte, Ihre Programme außen, Ergebnis je Programm */
.hero .hero-t { max-width: none; }
.hero h1 { max-width: 12ch; }
.orbit { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1 / 1; }
.o-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-svg .ol { stroke: rgba(201, 162, 75, .5); stroke-width: .35; stroke-dasharray: 1.2 1.8; animation: fliess2 2.8s linear infinite; }
@keyframes fliess2 { to { stroke-dashoffset: -6; } }
.o-kern { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.o-kern b { display: block; margin-top: 14px; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); }
.o-kern .kern { width: 96px; height: 96px; }
.ot { position: absolute; transform: translate(-50%, -50%); width: 31%; min-width: 150px; padding: 12px 14px 12px; border-radius: 18px; background: rgba(19, 29, 25, .94); box-shadow: 0 0 0 1px rgba(244, 241, 234, .15), 0 24px 34px -20px rgba(0, 0, 0, .8); z-index: 3; animation: anstoss 9s var(--ease) infinite; animation-delay: var(--d); }
.ot-i { display: inline-flex; width: 34px; height: 34px; border-radius: 11px; background: rgba(244, 241, 234, .07); align-items: center; justify-content: center; margin-bottom: 8px; }
.ot-i svg { width: 18px; height: 18px; stroke: #aeb8b0; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ot b { display: block; font: 600 14px/1.15 var(--sans); letter-spacing: -.02em; color: #f4f1ea; }
.ot em { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(201, 162, 75, .16); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .5); font: 600 12px/1 var(--sans); font-style: normal; color: var(--gold-hi); }
@keyframes anstoss { 0%, 100% { box-shadow: 0 0 0 1px rgba(244, 241, 234, .15), 0 24px 34px -20px rgba(0, 0, 0, .8); } 6%, 14% { box-shadow: 0 0 0 1px rgba(201, 162, 75, .9), 0 0 30px 0 rgba(201, 162, 75, .3), 0 24px 34px -20px rgba(0, 0, 0, .8); } 24% { box-shadow: 0 0 0 1px rgba(244, 241, 234, .15), 0 24px 34px -20px rgba(0, 0, 0, .8); } }
.o-leg { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 18px 0 0; font-size: 12px; color: #97a299; }
.o-leg span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.o-leg .a::before { background: rgba(244, 241, 234, .35); }
.o-leg .b::before { background: var(--gold); }
@media (min-width: 960px) { .hero-g.allg { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .hero h1 { max-width: 11ch; } }
@media (max-width: 719px) {
  .orbit { aspect-ratio: auto; display: grid; gap: 10px; }
  .o-svg { display: none; }
  .o-kern { position: static; transform: none; display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
  .o-kern .kern { width: 64px; height: 64px; } .o-kern .kern span { font-size: 34px; } .o-kern b { margin: 0; }
  .ot { position: static; transform: none; width: auto; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px 12px; animation: none; }
  .ot-i { margin: 0; } .ot em { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .ot, .o-svg .ol { animation: none; } }

/* ===== Bereiche-Karten, Drei-Felder-Ablauf, Beispielblock ===== */
.bereiche { display: grid; gap: 18px; }
.bereich { border-radius: 28px; overflow: hidden; background: var(--c-card); box-shadow: 0 0 0 1px rgba(13, 21, 18, .08), 0 30px 50px -36px rgba(13, 21, 18, .5); display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.bereich:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(201, 162, 75, .6), 0 36px 56px -34px rgba(13, 21, 18, .55); }
.bereich .bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bereich .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.04); transition: transform 1.4s var(--ease); }
.bereich:hover .bild img { transform: scale(1.05); }
.bereich .bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 21, 18, .0) 45%, rgba(13, 21, 18, .55)); }
.bereich .tg { position: absolute; left: 14px; bottom: 12px; z-index: 1; font: 500 12px/1 var(--sans); letter-spacing: .06em; color: rgba(244, 241, 234, .85); }
.bereich .txt { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.bereich .k { margin: 0 0 8px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); }
.bereich h3 { font-size: 25px; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 10px; }
.bereich .txt > p { font-size: 15px; margin-bottom: 18px; }
.bereich .links { margin-top: auto; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.bereich .links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-line); font: 600 14px/1.3 var(--sans); color: var(--c-head); text-decoration: none; transition: color .3s var(--ease); }
.bereich .links a:last-child { border-bottom: 0; padding-bottom: 0; }
.bereich .links a span { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(201, 162, 75, .2); color: var(--c-accent); flex: none; transition: transform .4s var(--ease), background-color .4s var(--ease); }
.bereich .links a:hover { color: var(--c-accent); }
.bereich .links a:hover span { transform: translate(3px, -2px); background: var(--gold); color: var(--ink); }

.drei-felder { display: grid; gap: 12px; align-items: stretch; }
.feld3 { padding: 28px 26px; border-radius: 26px; background: rgba(244, 241, 234, .05); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .13); }
.feld3.gold { background: rgba(201, 162, 75, .1); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .5); }
.feld3 .nn { display: block; margin-bottom: 14px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.feld3 h3 { color: #f4f1ea; font-size: 28px; margin-bottom: 18px; }
.feld3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feld3 li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: rgba(13, 21, 18, .55); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .1); font-size: 14.5px; color: #e3e7e0; }
.feld3 li svg { flex: none; width: 20px; height: 20px; stroke: var(--gold-hi); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feld3 li b { flex: none; font: italic 500 17px/1 var(--serif); color: var(--gold-hi); }
.weiter-p { display: none; }
.drei-fuss { margin-top: 30px; padding: 22px 24px; border-radius: 22px; background: rgba(244, 241, 234, .05); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .1); display: grid; gap: 6px; }
.drei-fuss b { font: 600 20px/1.2 var(--sans); letter-spacing: -.03em; color: #f4f1ea; }
.drei-fuss span { font-size: 13.5px; color: #97a299; max-width: 78ch; }
.drei-fuss + .drei-saetze { margin-top: 40px; }

.beispiel { display: grid; gap: 28px; padding: 34px 26px; border-radius: 32px; background: #0d1512; color: #d3d9d1; box-shadow: 0 40px 70px -40px rgba(13, 21, 18, .8); position: relative; overflow: hidden; }
.beispiel::before { content: ""; position: absolute; right: -80px; top: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 75, .22), transparent 70%); pointer-events: none; }
.beispiel > * { position: relative; }
.beispiel h2 { color: #f4f1ea; font-size: clamp(30px, 5.6vw, 46px); }
.beispiel p { color: #d3d9d1; }
.beispiel .pille { color: var(--gold-hi); border-color: rgba(244, 241, 234, .2); }
.zahlen3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 26px; border-top: 1px solid rgba(244, 241, 234, .14); }
.zahlen3 > div { padding: 18px 12px 0 0; }
.zahlen3 > div + div { padding-left: 16px; border-left: 1px solid rgba(244, 241, 234, .14); }
.zahlen3 b { display: block; font: 600 clamp(34px, 7vw, 52px)/1 var(--sans); letter-spacing: -.05em; color: #f4f1ea; font-variant-numeric: tabular-nums; }
.zahlen3 span { display: block; margin-top: 8px; font-size: 13px; color: #97a299; line-height: 1.35; }
.b-r { padding: 26px 24px; border-radius: 24px; background: rgba(201, 162, 75, .1); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .45); align-self: start; }
.b-k { margin: 0 0 12px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi) !important; }
.b-gz { font: 600 clamp(56px, 11vw, 96px)/.95 var(--sans); letter-spacing: -.055em; color: #f4f1ea; font-variant-numeric: tabular-nums; }
.b-gz em { font: italic 500 .42em/1 var(--serif); color: var(--gold); letter-spacing: 0; margin-left: 6px; }
.b-u { margin: 6px 0 18px !important; font-size: 14px; color: #aab4ac !important; }
.b-zeilen div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(244, 241, 234, .13); font-size: 14.5px; }
.b-zeilen b { color: #f4f1ea; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-fn { margin: 16px 0 0 !important; font-size: 12.5px; color: #97a299 !important; }

@media (min-width: 720px) {
  .bereiche { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .beispiel { grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 56px 52px; align-items: center; }
}
@media (min-width: 960px) {
  .drei-felder { grid-template-columns: 1fr 44px 1fr 44px 1fr; gap: 0; }
  .weiter-p { display: flex; align-items: center; justify-content: center; }
  .weiter-p svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--gold); stroke: var(--ink); transform: rotate(45deg); }
}
@media (max-width: 959px) { .weiter-p { display: flex; justify-content: center; } .weiter-p svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--gold); stroke: var(--ink); transform: rotate(135deg); } }
@media (prefers-reduced-motion: reduce) { .bereich, .bereich .bild img { transition: none; } }

/* ===== Fixes nach Prüfrunde 14.10. ===== */
/* Fokus mit Kontrast, auch auf Papier und in Formularen */
.ink :focus-visible, .top :focus-visible, .menu-ov :focus-visible { outline-color: var(--gold-hi); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid #7a5c14; outline-offset: 2px; border-color: #7a5c14; box-shadow: none; }
.zeiten input:focus-visible, .zust input:focus-visible { outline: 2px solid #7a5c14; outline-offset: 3px; }
.deck.hell em.strich { color: #7a5c14; }
.bildnachweis, .bildnachweis.hell { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 12px; background: rgba(13, 21, 18, .7); color: #d3d9d1; }
.bildnachweis.hell { background: rgba(13, 21, 18, .06); color: #4a554e; }
.logo small { color: #c3cbc5; font-size: 12px; }
/* Logistik-Kopf: Zahlentafel auf ruhigem Grund statt direkt auf dem Foto */
.deck.foto .deck-g > div:last-child { padding: 28px 30px; border-radius: 28px; background: rgba(13, 21, 18, .74); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .22), 0 40px 70px -40px rgba(0, 0, 0, .8); }
.deck.foto::after { background: linear-gradient(90deg, rgba(13, 21, 18, .95) 22%, rgba(13, 21, 18, .6) 66%, rgba(13, 21, 18, .4)), linear-gradient(0deg, #0d1512, transparent 30%); }
.stat-u { color: #c3cbc5; font-size: 14px; }
.stat-gross { font-size: clamp(56px, 7vw, 96px); }
/* Fotos einheitlich und ruhiger */
.deck-bg, .obj img, .mit-bild img, .split-bild img, .band-foto > img { filter: saturate(.62) contrast(1.04); }
.bogen img { filter: saturate(.7) contrast(1.03); }
.obj::after { background: linear-gradient(180deg, rgba(13, 21, 18, 0) 30%, rgba(13, 21, 18, .9)); }
.obj h3 { text-shadow: none; }
/* Reflow 320 */
.seitenkopf h1, .legal h2 { overflow-wrap: anywhere; hyphens: auto; }
.seitenkopf h1 { font-size: clamp(28px, 8.4vw, 58px); }
.branchen { grid-template-columns: minmax(0, 1fr); }
.branche > div { min-width: 0; }
.branche b { overflow-wrap: anywhere; }
@media (min-width: 720px) { .branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ohne JavaScript: Tabs ausgeschrieben, Formular versteckt */
html:not(.js) .tab-list { display: none; }
html:not(.js) .tab-panel[hidden] { display: block; margin-top: 18px; }
html:not(.js) #tform-box { display: none; }
h3.hm { font-size: 22px; margin: 0 0 8px; }
#tok, #tdone, #tok-b, #tdone-b { scroll-margin-top: 110px; }
/* Mikrotext nicht kleiner als 11,5 px */
.pille, .rail-n b, .hub-t, .doc-h, .gcard small, .kachel .tag, .sit .tag, .vsplit small, .phasen dt, .zs .tag-z, .glas .tag-z, .ph-3 small, .fakten-strip small, .b-k, .feld3 .nn, .bereich .k, .ds-karte small { font-size: 12px; }
.pille { font-size: 12px; letter-spacing: .16em; }
.rail-n b, .tab-btn { letter-spacing: .14em; }
.faktenleiste span, .hero-hinweis, .bildnachweis, .o-leg, .b-fn { font-size: 13px; }
/* Mobil: Hero-Knöpfe gleich breit */
@media (max-width: 599px) { .hero .btns .btn, .deck .btns .btn { width: 100%; justify-content: space-between; } }
@media print { .rv { opacity: 1 !important; transform: none !important; filter: none !important; } }
@media (prefers-reduced-motion: reduce) { a, summary, .btn, .tab-btn { transition: none !important; } }
html.anim-aus .kern::after, html.anim-aus .o-svg .ol, html.anim-aus .ot, html.anim-aus .hub-linien path { animation: none !important; }
.rail, .zweispalt, .tabs-l, .vsplit, .trust3, .mit-bild, .split-bild, .deck-g, .hero-g, .person-g, .fgrid, .beispiel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .zweispalt, .vsplit { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .beispiel { grid-template-columns: 1.05fr 1fr; } }
@media (min-width: 960px) {
  .rail { grid-template-columns: 150px minmax(0, 1fr); }
  .tabs-l { grid-template-columns: 340px minmax(0, 1fr); }
  .mit-bild { grid-template-columns: .9fr 1.1fr; }
  .split-bild { grid-template-columns: .85fr 1.15fr; }
  .deck-g { grid-template-columns: 1.05fr 1fr; }
  .hero-g.allg { grid-template-columns: 1fr 1fr; }
  .person-g { grid-template-columns: 420px minmax(0, 1fr); }
  .fgrid { grid-template-columns: 1.25fr 1fr; }
}

/* Startseite: schlichter, mittiger Text-Hero */
.hero.hero-mitte { padding: 170px 0 100px; text-align: center; background: radial-gradient(900px 520px at 50% 0%, rgba(201, 162, 75, .14), transparent 65%), #0d1512; }
.hero.hero-mitte .innen { max-width: 880px; }
.hero.hero-mitte h1 { max-width: 14ch; margin: 0 auto 26px; font-size: clamp(42px, 7.6vw, 84px); }
.hero.hero-mitte .lead { margin: 0 auto 34px; max-width: 58ch; color: #d3d9d1; }
.hero.hero-mitte .btns { justify-content: center; }
.hero.hero-mitte .pille { margin-left: auto; margin-right: auto; }
.hero-note { margin: 28px auto 0; max-width: 56ch; font-size: 13.5px; color: #97a299; }
@media (max-width: 719px) { .hero.hero-mitte { padding: 130px 0 72px; } }
.geraet { width: min(100%, 330px); }
.geraet .schirm { min-height: 500px; }
.geraet .karte span { display: block; }
.geraet .karte b span.a { display: inline-block; }
.geraet .schirm .kt { margin: 0 0 4px; font: 600 24px/1.1 var(--sans); letter-spacing: -.04em; color: #0d1512; }

/* Modellrechnung */
.szen { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.szen h2 { color: #f4f1ea; font-size: clamp(32px, 5.6vw, 52px); }
.szen .sz-l > p { color: #d3d9d1; }
.szen .zahlen3 { margin-top: 26px; }
.sz-r { padding: 28px 26px; border-radius: 28px; background: rgba(201, 162, 75, .1); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .5); align-self: start; }
.sz-sum { font: 600 clamp(54px, 10vw, 96px)/.95 var(--sans); letter-spacing: -.055em; color: #f4f1ea; font-variant-numeric: tabular-nums; margin: 4px 0 18px; }
.sz-sum em { font: italic 500 .3em/1 var(--serif); color: var(--gold-hi); letter-spacing: 0; margin-left: 10px; }
.sz-z { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(244, 241, 234, .15); }
.sz-z b { display: block; color: #f4f1ea; font-weight: 600; font-size: 15px; }
.sz-z span { display: block; margin-top: 2px; font-size: 12.5px; color: #aab4ac; }
.sz-z em { font: 600 17px/1 var(--sans); font-style: normal; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-z.zeit { background: rgba(244, 241, 234, .05); margin-top: 6px; padding: 12px 14px; border-radius: 12px; border-top: 0; }
.szen .b-fn { margin: 16px 0 0; font-size: 12.5px; color: #97a299; }
@media (min-width: 960px) { .szen { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; } }

/* ===== Endabnahme-Fixes ===== */
.bn-foto { position: absolute; right: 24px; bottom: 16px; z-index: 3; margin: 0; font-size: 12px; color: rgba(243, 239, 230, .62); }
.stat-zeilen b { white-space: nowrap; }
.sz-z em { white-space: nowrap; }
.szen h2 { line-height: 1.08; letter-spacing: -.028em; margin-bottom: 20px; font-size: clamp(30px, 4.4vw, 46px); }
.szen .b-fn { font-size: 13.5px; color: #b0bab2; }
.pz > div { grid-template-columns: 46px 12rem minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.pz .beleg { grid-column: 3; margin-top: 8px; justify-self: start; }
.pz .n { grid-row: span 2; }
@media (max-width: 719px) { .pz > div { grid-template-columns: 40px minmax(0, 1fr); } .pz .beleg { grid-column: 2; } }
.saeulen-linie { gap: 0; border-top: 1px solid var(--c-head); }
.saeulen-linie .saeule { border-radius: 0; box-shadow: none; background: transparent; padding: 28px 0; border-bottom: 1px solid var(--c-line); }
.saeulen-linie .saeule:hover { transform: none; box-shadow: none; }
.saeulen-linie .saeule .ico { background: transparent; width: 40px; height: 40px; }
.saeulen-linie .saeule .ico svg { stroke: var(--c-accent); width: 30px; height: 30px; }
@media (min-width: 720px) { .saeulen-linie { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; } .saeulen-linie .saeule { border-bottom: 0; padding-top: 30px; } }
.erg-linie { gap: 0; border-top: 1px solid var(--c-head); }
.erg-linie .erg { border-radius: 0; box-shadow: none; background: transparent; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.erg-linie .erg:hover { transform: none; box-shadow: none; }
@media (min-width: 720px) { .erg-linie { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
@media (min-width: 960px) { .erg-linie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bereich .bild::after { background: linear-gradient(180deg, rgba(13, 21, 18, 0) 38%, rgba(13, 21, 18, .72)); }
.bereich .tg { font-size: 12px; letter-spacing: .04em; color: #f4f1ea; }
.geraet .fl.f1 { transform: rotate(1.5deg); } .geraet .fl.f2 { transform: rotate(-1.5deg); }
.spur-lab { display: flex; justify-content: space-between; max-width: 560px; margin: 12px auto 0; font-size: 13px; color: rgba(243, 239, 230, .78); }
.spur-lab b { font-weight: 500; }

/* Termin: Cal.com-Buchung und schriftliche Anfrage */
.cal { margin-bottom: 22px; }
.cal h2 { margin-bottom: 8px; }
.cal-box { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.cal-frame { width: 100%; height: 680px; border: 0; border-radius: 14px; background: #fff; }
.schriftlich { margin-top: 8px; }
.schriftlich > summary { cursor: pointer; font-weight: 600; padding: 14px 0; min-height: 44px; }
.erwartet .person span { display: block; color: var(--c-mut, #5d665f); }
@media (max-width: 640px) { .cal-frame { height: 760px; } }
.cal h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.15; }
.cal .core { padding: 26px 28px; }

/* Handy: alles eine Stufe kleiner und leichter, damit es nicht erschlägt (Torben, 15.10.2026) */
@media (max-width: 640px) {
  html body h1, html body .deck h1, html body .seitenkopf h1, html body .hero.hero-mitte h1, html body .hero-t h1 { font-size: clamp(28px, 8.4vw, 33px); line-height: 1.06; font-weight: 500; }
  html body h2, html body .schluss h2, html body .szen h2, html body .beispiel h2, html body .ph-zeile h2 { font-size: clamp(22px, 6.4vw, 26px); line-height: 1.1; font-weight: 500; }
  html body h3, html body .kachel h3, html body .gs h3, html body .banner-kurz h3, html body .stimme h3 { font-size: 18px; line-height: 1.2; font-weight: 500; }
  html body .lead { font-size: 15.5px; line-height: 1.6; }
  html body main p, html body .schluss p { font-size: 15px; line-height: 1.6; }
  html body .stat-gross { font-size: clamp(40px, 11vw, 48px); }
  html body .ph-zeile .gross { font-size: clamp(72px, 22vw, 96px); }
  html body .sek { padding: 56px 0; }
  html body .schluss { padding: 64px 0; }
  html body .hero { padding: 96px 0 36px; }
  html body .kopf { margin-bottom: 30px; }
  html body .btn { min-height: 46px; padding: 4px 4px 4px 22px; font-size: 13px; gap: 10px; }
  html body .btn .pf { width: 36px; height: 36px; }
  html body .btn.s { min-height: 40px; }
  html body .bezel { border-radius: 24px; padding: 5px; }
  html body .bezel > .core { border-radius: 19px; }
  html body .core.rechner { padding: 20px 18px; }
  html body .geraet { width: min(100%, 262px); }
  html body .geraet .rahmen { padding: 8px; border-radius: 36px; }
  html body .geraet .schirm { min-height: 380px; padding: 22px 16px 18px; border-radius: 28px; }
  html body .geraet .schirm h4 { font-size: 20px; }
  html body .geraet .karte { padding: 10px 12px; font-size: 12px; }
  html body .cal-frame { height: 640px; }
}

/* Finale Web-Runde (19.10.2026): Klickziele auf dem Handy mindestens 44 px, kleinste Schrift 12 px, Footer zweispaltig */
@media (max-width: 760px) {
  .foot .fl a, .foot .kl a, .foot .fg p a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot .fl { gap: 0 22px; }
  .foot .fg { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot .fg > div:first-child { grid-column: 1 / -1; }
  .logo { min-height: 44px; align-items: center; }
  .tab-btn { min-height: 44px; }
  .form label, form label { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

/* Sichtbarkeit 22.10.2026: Branchen-Weiche auf der Startseite, Absender-Box, Menüknopf nur mobil */
.weiche { display: grid; gap: 12px; margin-top: 30px; max-width: 760px; }
.weiche-k { position: relative; display: block; padding: 18px 54px 18px 20px; border: 1px solid rgba(244, 241, 234, .2); border-radius: 18px; background: rgba(244, 241, 234, .05); color: #f4f1ea; text-decoration: none; text-align: left; transition: border-color .4s var(--ease), background .4s var(--ease); }
.weiche-k b { display: block; font-size: 18px; margin-bottom: 4px; color: #e0bd62; }
.weiche-k span:not(.pf) { display: block; font-size: 15px; line-height: 1.5; color: #d3d9d1; }
.weiche-k .pf { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.weiche-k:hover, .weiche-k:focus-visible { border-color: rgba(224, 189, 98, .7); background: rgba(244, 241, 234, .09); }
.absender { display: flex; align-items: center; gap: 14px; margin-top: 18px; max-width: 520px; }
.absender img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.absender b { display: block; font-size: 15px; }
.absender span { display: block; font-size: 14px; line-height: 1.5; opacity: .85; }
@media (min-width: 720px) { .weiche { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .menu-btn { display: none; } }
/* Ratgeberseiten */
.ratgeber-kopf { max-width: 760px; }
.ratgeber-kopf h1 { max-width: 18ch; margin-bottom: 22px; }
.ratgeber-kopf .lead { margin-bottom: 28px; }
.pp-liste { display: grid; gap: 14px; margin-top: 28px; }
.pp { padding: 20px 22px; border: 1px solid rgba(13, 21, 18, .14); border-radius: 18px; background: rgba(255, 255, 255, .55); }
.pp h3 { margin: 0 0 8px; font-size: 19px; }
.pp p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; }
.rail-c .liste { margin: 18px 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.6; }
.tab-wrap { margin-top: 26px; overflow-x: auto; border: 1px solid rgba(13, 21, 18, .14); border-radius: 18px; background: rgba(255, 255, 255, .55); }
.fristen { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.fristen th, .fristen td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(13, 21, 18, .1); }
.fristen thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.fristen tbody th { width: 17%; font-weight: 600; }
.fristen tbody tr:last-child th, .fristen tbody tr:last-child td { border-bottom: 0; }
.rail-c .klein { font-size: 14px; opacity: .8; }
@media (max-width: 1099px) {
  .tab-wrap { overflow: visible; border: 0; background: none; }
  .fristen { min-width: 0; }
  .fristen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fristen, .fristen tbody, .fristen tr, .fristen th, .fristen td { display: block; width: 100%; }
  .fristen tbody tr { margin-bottom: 14px; padding: 6px 0; border: 1px solid rgba(13, 21, 18, .14); border-radius: 18px; background: rgba(255, 255, 255, .55); }
  .fristen tbody th { width: 100%; padding: 14px 16px 4px; border: 0; font-size: 17px; }
  .fristen td { padding: 8px 16px; border: 0; }
  .fristen td::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 2px; }
}
.download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border: 1px solid rgba(13, 21, 18, .14); border-radius: 20px; background: rgba(255, 255, 255, .55); }
.download h2 { margin: 0 0 6px; font-size: 24px; }
.download p { margin: 4px 0; max-width: 52ch; }

/* Menü mit sechs Punkten: zwischen 960 und 1179 Pixeln enger setzen, damit nichts umbricht */
.nav a { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1179px) {
  .nav { gap: 0; margin-right: 6px; }
  .nav a { padding: 0 9px; font-size: 12.5px; }
  .logo small { display: none; }
}
.branche b { hyphens: auto; overflow-wrap: break-word; }

/* Anmelden: leise Textverknüpfung im Menü, kein zweiter Knopf neben dem Termin */
.nav a.anm { color: #97a299; margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(244, 241, 234, .16); border-radius: 0 999px 999px 0; }
.nav a.anm:hover { color: #fff; }
.menu-ov a.anm { font: 500 18px/1 var(--sans); letter-spacing: 0; color: #97a299; margin-top: 14px; min-height: 44px; display: flex; align-items: center; }
html.menu-open .menu-ov a:nth-child(7) { transition-delay: .36s; } html.menu-open .menu-ov a:nth-child(8) { transition-delay: .41s; }
@media (min-width: 960px) and (max-width: 1179px) { .nav a.anm { padding-left: 10px; margin-left: 2px; } }

/* Quellenzeilen: Links dunkler, damit der Kontrast auf Beige mindestens 4,5:1 erreicht (vorher 3,64:1) */
.klein a { color: #6b5316; text-decoration-color: rgba(107, 83, 22, .5); }

/* Ratgeber: Stand-Datum unter dem Einleitungstext */
.ratgeber-kopf .stand { margin: 14px 0 0; font: 500 13px/1.4 var(--sans); color: #97a299; }