/* Birgit Zerjatke, Finanz- und Versicherungsmaklerin. Gestaltung nach DESIGN.md (Kanzlei-Ästhetik: Register, Karteikarte, Schreibmaschine, Orange der Marke) */
@font-face { font-family: 'Aleo'; src: url(/assets/fonts/aleo-var.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(/assets/fonts/courierprime-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(/assets/fonts/courierprime-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Aleo Ersatz'; src: local('Georgia'); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; }

:root {
  --papier: #FCFCFA; --tinte: #221E1B; --graphit: #5C5650; --orange: #F26722; --siegel: #B4460F; --siegel-dunkel: #9A3B0C;
  --silber: #E7E7E3; --kiesel: #B8B0A3; --flaeche: #F4F3EF; --weiss: #FFFFFF;
  --serif: 'Aleo', 'Aleo Ersatz', Georgia, serif; --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --breite: 76rem; --rand: 16px; --text: 41rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --kurve: cubic-bezier(.2, .7, .2, 1); --kurve-weich: cubic-bezier(.32, .72, 0, 1);
}
@media (min-width: 760px) { :root { --rand: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
::selection { background: #FBD3BD; color: var(--tinte); }
input, textarea { caret-color: var(--siegel); }
.mono, td, .rechner-ergebnis dd { font-variant-numeric: tabular-nums; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.65 var(--serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 760px) { body { font-size: 1.125rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--siegel); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .2s var(--kurve); }
a:hover { color: var(--siegel-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); color: var(--tinte); line-height: 1.12; margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.4rem + 3.3vw, 3.5rem); font-weight: 600; letter-spacing: -.018em; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem); font-weight: 600; letter-spacing: -.012em; }
h3, .h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.h-klein { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--s4); }
.mono { font-family: var(--mono); font-size: .9375em; letter-spacing: .01em; }
.klein { font-size: .9rem; color: var(--graphit); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--tinte); color: #fff; padding: 10px 16px; z-index: 30; }
.skip:focus { top: 8px; }
svg.pfeil, svg.raus { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -.16em; transition: transform .28s var(--kurve-weich); }
svg.raus { width: .85em; height: .85em; vertical-align: -.06em; }

/* ---------------- Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; background: var(--siegel); color: #fff; border: 1.5px solid var(--siegel); border-radius: 2px; font: 600 1.0625rem/1.2 var(--serif); text-decoration: none; cursor: pointer; transition: background .25s var(--kurve), border-color .25s var(--kurve), color .25s var(--kurve), transform .15s var(--kurve); }
.knopf:hover { background: var(--siegel-dunkel); border-color: var(--siegel-dunkel); color: #fff; text-decoration: none; }
.knopf:hover svg.pfeil, .link-pfeil:hover svg.pfeil { transform: translateX(4px); }
.knopf:active { transform: scale(.985); }
.knopf-rand { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf-rand:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf-klein { min-height: 42px; padding: 8px 16px; font-size: 1rem; }
.knopf-voll { width: 100%; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.link-pfeil { display: inline; font-weight: 600; text-decoration: none; }
.link-pfeil svg.pfeil, .link-pfeil svg.raus { margin-left: 6px; }
.link-pfeil:hover { text-decoration: underline; }

/* ---------------- Leiste und Kopf */
.hinweisleiste { background: var(--tinte); color: #fff; font-size: .95rem; padding: 10px 0; }
.hinweisleiste p { margin: 0; } .hinweisleiste a { color: #fff; }
.leiste { background: var(--orange); color: var(--tinte); font-size: .875rem; }
.leiste-in { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: var(--s4); }
.leiste p { margin: 0; font-family: var(--mono); letter-spacing: .01em; }
.leiste ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); }
.leiste a { color: var(--tinte); text-decoration: none; font-weight: 500; }
.leiste a:hover { text-decoration: underline; color: var(--tinte); }
.leiste a { white-space: nowrap; }
@media (max-width: 999px) { .leiste-adresse { display: none; } .leiste ul { margin-left: auto; } }
.leiste-tel a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 700; }
.leiste-tel svg { width: 15px; height: 15px; }
@media (max-width: 759px) { .leiste-adresse { display: none; } .leiste ul { justify-content: space-between; width: 100%; gap: var(--s4); } .leiste li:nth-child(-n+2) { display: none; } }

.kopf { position: relative; background: var(--papier); border-bottom: 1px solid var(--silber); z-index: 20; }
.kopf-in { display: flex; align-items: center; gap: var(--s5); min-height: 84px; }
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinte); flex: none; }
.marke:hover { color: var(--tinte); }
.marke-logo { width: 112px; height: auto; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; padding-left: 14px; border-left: 1px solid var(--silber); }
.marke-1 { font-weight: 600; font-size: 1.0625rem; }
.marke-2 { font-family: var(--mono); font-size: .78rem; color: var(--graphit); letter-spacing: .01em; }
.hauptnav { margin-left: auto; display: none; }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav-link { display: block; padding: 28px 12px; color: var(--tinte); text-decoration: none; font-weight: 500; font-size: 1rem; position: relative; }
.nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 20px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--kurve-weich); }
.nav-punkt:hover .nav-link::after, .nav-punkt:focus-within .nav-link::after, .nav-link[aria-current]::after { transform: scaleX(1); }
.nav-link:hover { color: var(--tinte); }
.nav-tafel { position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-top: 1px solid var(--silber); border-bottom: 1px solid var(--silber); box-shadow: 0 30px 50px -36px rgba(34, 30, 27, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--kurve), transform .3s var(--kurve-weich), visibility 0s .3s; }
.nav-punkt:hover .nav-tafel, .nav-punkt:focus-within .nav-tafel { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
.nav-tafel-in { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: var(--s6) var(--rand) var(--s7); display: grid; grid-template-columns: 15rem 1fr; gap: var(--s7); }
.nav-tafel-kopf { font-size: 1.5rem; font-weight: 600; color: var(--tinte); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; align-self: start; line-height: 1.2; }
.nav-tafel-kopf:hover { color: var(--siegel); } .nav-tafel-kopf:hover svg.pfeil { transform: translateX(4px); }
.nav-spalten { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: var(--s7); }
.nav-spalten li { break-inside: avoid; }
.nav-spalten a { display: block; padding: 7px 0; color: var(--tinte); text-decoration: none; font-size: 1rem; border-bottom: 1px solid transparent; }
.nav-spalten a:hover { color: var(--siegel); }
.nav-tief .nav-spalten { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
.nav-spalten .gruppe > a { font-weight: 600; border-bottom-color: var(--silber); margin-bottom: 6px; }
.nav-spalten ul { list-style: none; margin: 0; padding: 0; }
.nav-spalten ul a { font-size: .95rem; color: var(--graphit); padding: 5px 0; }
.kopf-kontakt { display: none; align-items: center; gap: var(--s4); flex: none; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 1rem; color: var(--tinte); text-decoration: none; white-space: nowrap; }
.kopf-tel svg { width: 18px; height: 18px; color: var(--siegel); }
.kopf-tel:hover { color: var(--siegel); }
.menu-knopf { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px 0 12px; background: none; border: 0; font: 600 1rem var(--serif); color: var(--tinte); cursor: pointer; }
.menu-linien { position: relative; width: 22px; height: 12px; }
.menu-linien i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .35s var(--kurve-weich), top .35s var(--kurve-weich); }
.menu-linien i:first-child { top: 0; } .menu-linien i:last-child { top: 10px; }
.menu-knopf[aria-expanded="true"] .menu-linien i:first-child { top: 5px; transform: rotate(45deg); }
.menu-knopf[aria-expanded="true"] .menu-linien i:last-child { top: 5px; transform: rotate(-45deg); }
.handymenue { border-top: 1px solid var(--silber); background: var(--papier); max-height: calc(100dvh - 120px); overflow-y: auto; padding: var(--s4) 0 var(--s7); }
.handy-liste { list-style: none; margin: 0; padding: 0; }
.handy-liste > li { border-bottom: 1px solid var(--silber); }
.handy-liste summary, .handy-solo { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 1.1875rem; font-weight: 600; cursor: pointer; list-style: none; color: var(--tinte); text-decoration: none; }
.handy-liste summary::-webkit-details-marker { display: none; }
.handy-liste summary::after { content: ''; width: 10px; height: 10px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--kurve-weich); }
.handy-liste details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.handy-liste details ul { list-style: none; margin: 0 0 var(--s4); padding: 0 0 0 var(--s4); border-left: 2px solid var(--orange); }
.handy-liste details ul ul { border-left: 0; padding-left: var(--s4); margin: 0; }
.handy-liste details a { display: block; padding: 9px 0; color: var(--tinte); text-decoration: none; }
.handy-liste details ul ul a { color: var(--graphit); font-size: .98rem; padding: 6px 0; }
.handy-kontakt { padding-top: var(--s5); }
.handy-kontakt .knopf { width: 100%; }
.handy-kontakt p { margin-top: var(--s4); }
.handy-kontakt p a { margin-right: var(--s4); }
@media (min-width: 1180px) {
  .hauptnav, .kopf-kontakt { display: flex; }
  .menu-knopf, .handymenue { display: none !important; }
  .kopf-in { gap: var(--s4); }
}
@media (min-width: 1180px) { .marke-text { display: none; } .marke-logo { width: 124px; } }
@media (min-width: 1180px) and (max-width: 1300px) { .nav-link { padding-left: 9px; padding-right: 9px; font-size: .96rem; } .nav-link::after { left: 9px; right: 9px; } }
@media (max-width: 420px) { .marke-text .marke-2 { display: none; } .marke-logo { width: 96px; } }
@media (max-width: 400px) { .marke-text { display: none; } }
@media (max-width: 559px) { h1 { hyphens: auto; -webkit-hyphens: auto; font-size: 1.95rem; } }

.krumen { padding-top: var(--s5); }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--mono); font-size: .84rem; color: var(--graphit); }
.krumen li + li::before { content: '/'; margin: 0 .55em; color: var(--kiesel); }
.krumen a { color: var(--graphit); text-decoration: none; }
.krumen a:hover { color: var(--siegel); text-decoration: underline; }

/* ---------------- Startseite: Held */
.held { position: relative; padding: 0 0 var(--s8); overflow: hidden; }
.held-raster { display: grid; gap: var(--s6); }
.held-bild { order: -1; margin: 0 calc(-1 * var(--rand)); background: var(--orange); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: end; gap: var(--s4); padding: var(--s5) var(--rand) 0; }
.held-flaeche { align-self: start; }
.held-logo { width: 100%; max-width: 230px; }
.held-flaeche-text { color: var(--tinte); margin: var(--s3) 0 var(--s5); line-height: 1.5; font-size: .875rem; max-width: 16em; }
.held-foto { margin: 0; }
.held-foto img { width: 100%; aspect-ratio: 853 / 1100; object-fit: cover; object-position: 50% 12%; }
.held-unter { color: var(--siegel); margin: 0 0 var(--s4); font-size: .95rem; }
.held h1 { max-width: 17ch; }
.held-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--graphit); max-width: 34rem; }
.held-fakten { display: flex; flex-wrap: wrap; gap: 6px 24px; font-family: var(--mono); font-size: .875rem; color: var(--graphit); margin: 0; }
.held-fakten span { position: relative; }
@media (min-width: 760px) {
  .held { padding: var(--s8) 0 var(--s9); }
  .held::after { content: ''; position: absolute; top: 0; right: 0; bottom: var(--s8); left: calc(50% + min(var(--breite), 100vw - 64px) * .08); background: var(--orange); z-index: -1; }
  .held-raster { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: var(--s8); }
  .held-bild { order: 0; margin: 0; background: none; padding: 0; display: block; position: relative; }
  .held-flaeche { position: absolute; top: -8px; right: 0; text-align: right; z-index: 1; }
  .held-logo { max-width: 210px; margin-left: auto; }
  .held-flaeche-text { margin: var(--s2) 0 0 auto; max-width: 15em; }
  .held-foto { width: 80%; margin-top: 175px; margin-left: -12%; box-shadow: 0 30px 60px -40px rgba(34, 30, 27, .55); }
  .held-foto img { aspect-ratio: 853 / 1150; }
}
@media (min-width: 760px) and (max-width: 1099px) { .held h1 { font-size: clamp(2.125rem, 1rem + 2.6vw, 2.75rem); hyphens: auto; -webkit-hyphens: auto; } }
@media (min-width: 1100px) { .held-flaeche-text { max-width: none; white-space: nowrap; } .held-foto { width: 68%; margin-top: 160px; margin-left: -14%; } .held-logo { max-width: 260px; } }

/* ---------------- Anwalt */
.anwalt { padding: var(--s8) 0; border-top: 1px solid var(--silber); }
.anwalt-raster { display: grid; gap: var(--s6); align-items: center; }
.anwalt-satz { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.375rem); line-height: 1.32; font-weight: 300; letter-spacing: -.01em; max-width: 30ch; color: var(--tinte); margin-bottom: var(--s5); text-wrap: pretty; }
.anwalt-schluss { font-weight: 600; font-size: 1.25rem; color: var(--siegel); margin: 0; }
.anwalt-bild { margin: 0; max-width: 424px; }
.anwalt-bild img { width: 100%; }
@media (min-width: 900px) { .anwalt { padding: var(--s9) 0; } .anwalt-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s8); } .anwalt-bild { justify-self: end; } }

/* ---------------- Register (Leistungen) */
.register-abschnitt { padding: var(--s8) 0; background: var(--flaeche); }
.register-raster { display: grid; gap: var(--s6); }
.register-kopf p { color: var(--graphit); max-width: 30rem; }
.register { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--silber); }
.register-abschnitt .register { border-color: #DCDAD4; }
.register-zeile { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem; gap: var(--s4); padding: var(--s5) var(--s3) var(--s5) 0; border-top: 1px solid var(--silber); transition: background .3s var(--kurve); }
.register-abschnitt .register-zeile { border-color: #DCDAD4; }
.register-nr { font-size: 1.125rem; color: var(--siegel); padding-top: 4px; transition: color .3s var(--kurve); }
.register-inhalt h3, .register-inhalt .h3 { margin: 0 0 6px; font-size: clamp(1.3125rem, 1.1rem + .7vw, 1.625rem); }
.register-inhalt h3 a, .register-inhalt .h3 a { color: var(--tinte); text-decoration: none; }
.register-inhalt h3 a::after, .register-inhalt .h3 a::after { content: ''; position: absolute; inset: 0; }
.register-inhalt p { margin: 0; color: var(--graphit); max-width: 40rem; }
.register-unter { margin-top: 10px !important; font-size: .95rem; position: relative; z-index: 1; line-height: 1.7; }
.register-unter a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--kiesel); }
.register-unter a:hover { color: var(--siegel); border-color: var(--siegel); }
.register-unter span { color: var(--kiesel); }
.register-pfeil { align-self: center; color: var(--siegel); }
@media (max-width: 599px) { .register-zeile { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s3); padding-right: 0; } .register-pfeil { display: none; } .register-nr { font-size: 1rem; } }
.register-pfeil svg { width: 22px; height: 22px; }
.register-zeile:hover { background: rgba(255, 255, 255, .7); }
.register-zeile:hover .register-pfeil svg { transform: translateX(4px); }
.register-zeile:hover h3 a, .register-zeile:hover .h3 a { color: var(--siegel); }
@media (min-width: 900px) {
  .register-abschnitt { padding: var(--s9) 0; }
  .register-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s8); }
  .register-kopf { position: sticky; top: var(--s6); align-self: start; }
  .register-zeile { grid-template-columns: 4.5rem minmax(0, 1fr) 2rem; padding: var(--s6) var(--s4) var(--s6) var(--s2); }
}
.register-seite { margin: var(--s6) 0; }
.register-seite .register-zeile:hover { background: var(--flaeche); }

/* ---------------- Sieben Aspekte (dunkel) */
.sieben { background: var(--tinte); color: #E4E0DA; padding: var(--s8) 0; }
.sieben h2, .sieben h3 { color: #fff; }
.sieben-kopf { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
.sieben-intro p { color: #CFC9C1; }
.sieben-liste { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sieben-liste li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px var(--s4); padding: var(--s5) 0; border-top: 1px solid #3B3632; }
.sieben-nr { grid-row: span 3; font-size: 2.25rem; line-height: 1; color: var(--orange); font-weight: 700; }
.sieben-liste h3 { margin: 4px 0 var(--s2); font-size: 1.3125rem; }
.sieben-liste p { margin: 0; color: #CFC9C1; }
.sieben-liste .link-pfeil { color: #FFB089; margin-top: var(--s3); }
.sieben-liste .link-pfeil:hover { color: #fff; }
.sieben-schluss { margin: var(--s7) 0 0; padding-top: var(--s6); border-top: 1px solid #3B3632; font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); line-height: 1.5; color: #fff; font-weight: 300; max-width: 52rem; }
@media (min-width: 900px) {
  .sieben { padding: var(--s9) 0; }
  .sieben-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s8); }
  .sieben-liste li { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.55fr); gap: var(--s6); padding: var(--s6) 0; }
  .sieben-nr { grid-row: auto; font-size: 3rem; }
  .sieben-liste h3 { margin: 4px 0 0; }
  .sieben-liste li > p:last-child:not(:nth-child(4)) { grid-column: 3; }
  .sieben-liste li > p { grid-column: 3; }
  .sieben-liste li > h3 { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------------- Büro und Karteikarte */
.buero { padding: var(--s8) 0; }
.buero-raster { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr); }
.buero-lead { font-size: 1.1875rem; color: var(--graphit); max-width: 34rem; }
.buero-daten { margin: var(--s5) 0; display: grid; gap: 0; }
.buero-daten > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--silber); }
.buero-daten > div:last-child { border-bottom: 1px solid var(--silber); }
.buero-daten dt { font-family: var(--mono); font-size: .875rem; color: var(--graphit); padding-top: 3px; }
.buero-daten dd { margin: 0; }
.buero-daten dd.mono a { color: var(--tinte); text-decoration: none; font-size: 1.0625rem; } .buero-daten dd.mono a:hover { color: var(--siegel); text-decoration: underline; }
.buero-daten .klein { font-family: var(--serif); margin-left: 6px; }
@media (min-width: 900px) { .buero { padding: var(--s9) 0; } .buero-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }

.karteikarte { position: relative; margin-top: 38px; background: var(--weiss); border-top: 3px solid var(--orange); padding: var(--s6) var(--s5) var(--s5); box-shadow: 0 1px 0 var(--silber), 0 18px 40px -24px rgba(34, 30, 27, .25); }
.karteikarte-reiter { position: absolute; top: -37px; left: -1px; margin: 0; padding: 8px 16px 6px; background: var(--orange); color: var(--tinte); font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
.karteikarte dl { margin: 0; }
.karteikarte dl > div { padding: var(--s3) 0 var(--s4); border-bottom: 1px dashed #D9D6CF; }
.karteikarte dl > div:first-child { padding-top: 0; }
.karteikarte dt { font-weight: 700; font-size: 1.0625rem; }
.karteikarte dd { margin: 2px 0 0; color: var(--graphit); font-size: .98rem; line-height: 1.5; }
.karteikarte dd .mono { color: var(--tinte); font-size: .92rem; }
.nr { white-space: nowrap; }
.karteikarte-fuss { margin: var(--s4) 0 0; font-size: .92rem; color: var(--graphit); }
@media (min-width: 760px) { .karteikarte { padding: var(--s6) var(--s6) var(--s5); } }
.karteikarte.kompakt { margin-top: calc(var(--s7) + 38px); }

/* ---------------- Fragen */
.fragen { padding: var(--s8) 0 var(--s9); border-top: 1px solid var(--silber); }
.fragen-raster { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .fragen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s8); } }
.fragen-liste details { border-bottom: 1px solid var(--silber); }
.fragen-liste details:first-child { border-top: 1px solid var(--silber); }
.fragen-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s5); padding: 20px 0; font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: '+'; font-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--siegel); flex: none; transition: transform .3s var(--kurve-weich); }
.fragen-liste details[open] summary::after { transform: rotate(45deg); }
.fragen-liste summary:hover { color: var(--siegel); }
.fragen-liste details p { margin: 0 0 var(--s5); color: var(--graphit); max-width: 44rem; }

/* ---------------- Unterseiten */
.seiten-kopf { padding-top: var(--s6); padding-bottom: var(--s6); }
.seiten-kopf h1 { max-width: 22ch; margin-bottom: var(--s4); }
.seiten-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--graphit); max-width: 42rem; margin: 0; }
.seiten-raster { display: grid; gap: var(--s7); padding-bottom: var(--s9); background: linear-gradient(var(--silber), var(--silber)) no-repeat center top / calc(100% - 2 * var(--rand)) 1px; padding-top: var(--s6); }
@media (min-width: 1000px) { .seiten-raster { grid-template-columns: minmax(0, var(--text)) minmax(0, 1fr); gap: var(--s8); padding-top: var(--s7); } .seiten-raster.ohne-aside { grid-template-columns: minmax(0, 48rem); } .seiten-kopf { padding-top: var(--s7); } }
.fliesstext { min-width: 0; }
.fliesstext > :first-child { margin-top: 0; }
.fliesstext h2 { margin-top: var(--s7); font-size: clamp(1.4375rem, 1.15rem + 1vw, 1.875rem); }
.fliesstext h3 { margin-top: var(--s6); }
.fliesstext ul, .fliesstext ol:not(.register):not(.news-liste) { padding-left: 0; margin: 0 0 var(--s5); list-style: none; }
.fliesstext ul > li { position: relative; padding-left: 1.4em; margin-bottom: 8px; }
.fliesstext ul > li::before { content: ''; position: absolute; left: .15em; top: .72em; width: 7px; height: 7px; background: var(--orange); }
.fliesstext ol:not(.register):not(.news-liste) { counter-reset: n; }
.fliesstext ol:not(.register):not(.news-liste) > li { counter-increment: n; position: relative; padding-left: 2.4em; margin-bottom: var(--s3); }
.fliesstext ol:not(.register):not(.news-liste) > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--mono); color: var(--siegel); font-size: .95em; }
.tabelle { overflow-x: auto; margin: var(--s5) 0 var(--s6); -webkit-overflow-scrolling: touch; }
.fliesstext table { border-collapse: collapse; width: 100%; font-size: .98rem; line-height: 1.5; }
.fliesstext th, .fliesstext td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--silber); }
.fliesstext thead th { font-family: var(--mono); font-weight: 700; font-size: .875rem; border-bottom: 2px solid var(--tinte); }
.fliesstext tbody th { font-weight: 600; }
.fliesstext caption { text-align: left; font-weight: 700; padding-bottom: var(--s2); }
table.rechnung td { text-align: right; font-family: var(--mono); white-space: nowrap; }
table.rechnung tfoot th, table.rechnung tfoot td { border-top: 2px solid var(--tinte); border-bottom: 0; font-weight: 700; }
table.angebot td { font-family: var(--mono); }
.haken-zeichen { color: var(--siegel); display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.abbildung { margin: var(--s6) 0; }
.abbildung img { width: 100%; max-width: 100%; border: 1px solid var(--silber); background: #fff; }
.abbildung figcaption { font-family: var(--mono); font-size: .84rem; color: var(--graphit); margin-top: var(--s2); }
.auch { padding: var(--s4) var(--s5); background: var(--flaeche); }
.linkliste { margin: var(--s7) 0; }
.linkliste ul { list-style: none !important; margin: 0; padding: 0 !important; border-top: 1px solid var(--silber); }
.linkliste li { padding: 0 !important; margin: 0 !important; border-bottom: 1px solid var(--silber); }
.linkliste li::before { display: none; }
.linkliste a { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 14px 0; color: var(--tinte); text-decoration: none; font-weight: 600; }
.linkliste a:hover { color: var(--siegel); }
.linkliste a:hover svg { transform: translate(2px, -2px); }
.kleingedruckt { margin: var(--s7) 0 0; padding: var(--s5); background: var(--flaeche); font-size: .9rem; line-height: 1.6; color: var(--graphit); }
.kleingedruckt p:last-child { margin: 0; }
.kleingedruckt .h-klein { font-size: .95rem; margin-bottom: var(--s2); }
.gesellschaften { columns: 1; column-gap: var(--s7); font-size: .98rem; margin: var(--s5) 0; }
.gesellschaften li { break-inside: avoid; padding-left: 1.1em !important; margin-bottom: 4px !important; }
.gesellschaften li::before { width: 5px !important; height: 5px !important; top: .7em !important; }
@media (min-width: 640px) { .gesellschaften { columns: 2; } }
.rechtstext h2 { font-size: 1.375rem; margin-top: var(--s6); }

.seiten-aside { display: grid; gap: var(--s6); align-content: start; }
@media (min-width: 1000px) { .seiten-aside { position: sticky; top: var(--s5); } }
.kontaktkarte { border: 1px solid var(--silber); border-top: 3px solid var(--orange); background: var(--weiss); padding: var(--s5); }
.kontaktkarte .kontaktkarte-titel { font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin-bottom: var(--s2); color: var(--tinte); }
.kontaktkarte p { color: var(--graphit); }
.kontaktkarte-tel { color: var(--tinte) !important; font-size: 1rem; line-height: 1.8; }
.kontaktkarte-tel span { color: var(--graphit); display: inline-block; min-width: 4.8em; font-family: var(--serif); font-size: .9rem; }
.kontaktkarte-tel a { color: var(--tinte); text-decoration: none; } .kontaktkarte-tel a:hover { color: var(--siegel); text-decoration: underline; }
.nachbarn-titel { font-family: var(--mono); font-size: .875rem; margin-bottom: var(--s2); }
.nachbarn-titel a { color: var(--graphit); }
.nachbarn ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--silber); }
.nachbarn li { border-bottom: 1px solid var(--silber); }
.nachbarn li a { display: block; padding: 10px 0; color: var(--tinte); text-decoration: none; font-size: 1rem; }
.nachbarn li a:hover { color: var(--siegel); }

.news-liste { list-style: none; margin: var(--s5) 0; padding: 0; border-top: 1px solid var(--silber); }
.news-liste li { padding: var(--s5) 0; border-bottom: 1px solid var(--silber); }
.news-datum { color: var(--graphit); margin: 0 0 6px; font-size: .9rem; }
.news-liste h2 { margin: 0 0 var(--s2); }
.news-liste h2 a { color: var(--tinte); text-decoration: none; } .news-liste h2 a:hover { color: var(--siegel); text-decoration: underline; }
.video { margin: var(--s6) 0; padding: var(--s5); background: var(--tinte); color: #E4E0DA; aspect-ratio: auto; }
.video-titel { color: #fff; font-weight: 600; }
.video .knopf-rand { color: #fff; border-color: #fff; } .video .knopf-rand:hover { background: #fff; color: var(--tinte); }
.video .klein { color: #CFC9C1; margin: var(--s3) 0 0; } .video .klein a { color: #FFB089; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.markt ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--silber); }
.markt li { padding: var(--s4) 0; border-bottom: 1px solid var(--silber); }
.markt li a { font-weight: 600; color: var(--tinte); text-decoration: none; } .markt li a:hover { color: var(--siegel); text-decoration: underline; }
.markt li p { margin: 6px 0 0; color: var(--graphit); font-size: .98rem; }
.markt .mono { color: var(--graphit); font-size: .84rem; }
.lade { color: var(--graphit); }

.ueber { display: grid; gap: var(--s5); align-items: start; margin-bottom: var(--s5); }
.ueber-foto { margin: 0; max-width: 300px; }
.ueber-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 4px; }
@media (min-width: 700px) { .ueber { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); } }
.kontakt-block { display: grid; gap: var(--s6); margin-bottom: var(--s6); }
.kontakt-block .buero-daten { margin: 0; }
@media (min-width: 900px) { .kontakt-block { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); } .seiten-raster.ohne-aside .fliesstext:has(.kontakt-block) { max-width: none; } }
.anfahrt h2 { margin-top: 0; font-size: 1.375rem; }

/* ---------------- Formulare und Rechner */
.formular-rahmen { margin: var(--s7) 0 0; padding: var(--s5); background: var(--weiss); border: 1px solid var(--silber); border-top: 3px solid var(--orange); }
@media (min-width: 760px) { .formular-rahmen { padding: var(--s6); } }
.formular-titel, .fliesstext .formular-titel { font-size: 1.375rem; margin: 0 0 var(--s5); }
.formular-felder, .rechner-felder { display: grid; gap: var(--s4) var(--s5); }
@media (min-width: 640px) { .formular-felder, .rechner-felder { grid-template-columns: 1fr 1fr; } .feld.voll, .formular-felder > fieldset, .formular-felder > .feld:has(textarea) { grid-column: 1 / -1; } }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld label, .feld legend { font-weight: 600; font-size: .98rem; }
.feld .hilfe { font-size: .85rem; color: var(--graphit); }
.pflicht { color: var(--siegel); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 11px 13px; font: 400 1.0625rem/1.4 var(--serif); color: var(--tinte); background: #fff; border: 1px solid #A9A39B; border-radius: 2px; transition: border-color .2s var(--kurve), box-shadow .2s var(--kurve); }
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinte); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--siegel); box-shadow: 0 0 0 3px rgba(242, 103, 34, .28); }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #B3261E; box-shadow: 0 0 0 1px #B3261E; }
fieldset.feld { border: 0; padding: 0; margin: 0; }
.wahl { flex-direction: row !important; flex-wrap: wrap; gap: 8px 24px !important; }
.wahl legend { margin-bottom: 8px; width: 100%; }
.wahl label, .haken { display: inline-flex; align-items: center; gap: 10px; font-weight: 400 !important; cursor: pointer; min-height: 32px; }
.wahl input, .haken input { width: 20px; height: 20px; accent-color: var(--siegel); flex: none; }
.haken { align-items: flex-start; margin-top: var(--s3); } .haken input { margin-top: 3px; }
.gruppe-empfehlung { margin-top: var(--s3) !important; padding-top: var(--s4) !important; border-top: 1px solid var(--silber) !important; }
.gruppe-empfehlung .reihe { display: grid; gap: var(--s4) var(--s5); width: 100%; margin-top: var(--s3); }
@media (min-width: 640px) { .gruppe-empfehlung .reihe { grid-template-columns: 1fr 1fr; } }
.fallen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }
.formular .klein { margin: var(--s5) 0 var(--s4); }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form-status { margin: 0; font-size: .98rem; }
.form-status.fehler { color: #B3261E; }
.formular-erfolg h2 { font-size: 1.375rem; } .formular-erfolg:focus { outline: none; }
.rechner { margin: 0 0 var(--s7); padding: var(--s5); border: 1px solid var(--silber); border-top: 3px solid var(--orange); background: #fff; }
@media (min-width: 760px) { .rechner { padding: var(--s6); } }
.rechner-ergebnis { margin: var(--s5) 0 var(--s3); border-top: 2px solid var(--tinte); }
.rechner-ergebnis > div { display: flex; justify-content: space-between; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--silber); }
.rechner-ergebnis dt { color: var(--graphit); } .rechner-ergebnis dd { margin: 0; font-family: var(--mono); white-space: nowrap; }
.rechner-ergebnis .summe dt { color: var(--tinte); font-weight: 700; } .rechner-ergebnis .summe dd { font-weight: 700; color: var(--siegel); font-size: 1.25rem; }

/* ---------------- Fuß */
.fuss { background: var(--tinte); color: #D6D1CA; padding: var(--s8) 0 0; font-size: 1rem; }
.fuss a { color: #fff; text-decoration: none; } .fuss a:hover { color: #FFB089; text-decoration: underline; }
.fuss-raster { display: grid; gap: var(--s6); padding-bottom: var(--s7); }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); } }
.fuss-logo { width: 190px; margin-bottom: var(--s3); }
.fuss-unter { color: var(--kiesel); font-size: .84rem; }
.fuss-h { color: #fff; font-family: var(--mono); font-size: .875rem; font-weight: 700; letter-spacing: .03em; margin-bottom: var(--s3); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { padding: 4px 0; }
.fuss .mono a { font-size: 1rem; }
.fuss-erlaubnis { background: linear-gradient(#3B3632, #3B3632) no-repeat center top / calc(100% - 2 * var(--rand)) 1px; padding-top: var(--s5); padding-bottom: var(--s5); }
.fuss-erlaubnis p { margin: 0; font-size: .84rem; line-height: 1.6; color: #B9B2A8; max-width: 62rem; }
.fuss-erlaubnis .mono { color: #E4E0DA; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); background: linear-gradient(#3B3632, #3B3632) no-repeat center top / calc(100% - 2 * var(--rand)) 1px; padding-top: var(--s4); padding-bottom: var(--s5); font-size: .9rem; }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 4px var(--s5); }
.fuss-unten p { margin: 0; color: #B9B2A8; }

/* ---------------- Handy-Schnellkontakt */
.handyleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1.4fr; background: var(--papier); border-top: 1px solid var(--silber); padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
.handyleiste a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; font-weight: 600; text-decoration: none; color: var(--tinte); border: 1.5px solid var(--tinte); border-radius: 2px; }
.handyleiste svg { width: 18px; height: 18px; }
.handyleiste .handyleiste-haupt { background: var(--siegel); border-color: var(--siegel); color: #fff; }
@media (max-width: 759px) { body { padding-bottom: 72px; } }
@media (min-width: 760px) { .handyleiste { display: none; } }

/* ---------------- Auftritt beim Scrollen (nur mit JS, nur ohne reduzierte Bewegung) */
@media (prefers-reduced-motion: no-preference) {
  .js .auftritt { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--kurve-weich), transform .9s var(--kurve-weich); }
  .js .auftritt.ist-da { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media print { .leiste, .kopf, .handyleiste, .fuss, .seiten-aside { display: none; } body { background: #fff; } }