/* ==========================================================================
   Rodenburg Senger – Website · Stand 06.11.2026
   Schriften: Fraunces (Titel) + Inter (Text), SIL Open Font License, selbst gehostet
   ========================================================================== */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --tinte: #0e1b33;
  --tinte-2: #16284a;
  --tinte-3: #22385f;
  --navy: #324c7b;
  --messing: #c5a06a;
  --messing-hell: #e6d3b1;
  --messing-dunkel: #8a6a35;   /* Gold für Text auf hellem Grund (Kontrast ≥ 4,5:1) */
  --papier: #f6f3ee;
  --papier-2: #efe9df;
  --text: #3d4352;
  --grau: #5f6676;
  --linie: #e4dfd6;
  --gruen: #2f7d55;
  --schatten: 0 1px 2px rgba(14, 27, 51, .04), 0 12px 32px -12px rgba(14, 27, 51, .18);
  --schatten-hoch: 0 2px 4px rgba(14, 27, 51, .06), 0 28px 48px -16px rgba(14, 27, 51, .28);
  --radius: 18px;
  --breite: 1240px;
  --kopf-h: 78px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --weich: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--text); background: var(--papier); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--messing-hell); color: var(--tinte); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--tinte); letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.12; margin: 0 0 18px; font-variation-settings: 'opsz' 96; }
h1 br { display: none; }
h2 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.2; margin: 0 0 14px; font-variation-settings: 'opsz' 72; }
h3 { font-size: 22px; line-height: 1.3; margin: 0 0 8px; }
p { margin: 0 0 18px; text-wrap: pretty; }
strong { color: var(--tinte); font-weight: 600; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--schatten-hoch); }
.sprung:focus { left: 12px; top: 12px; }
main:focus { outline: none; }

/* Seitenwechsel weich überblenden (moderne Browser) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- Hinweis-Banner ---------- */
.hinweis-banner { padding: 12px 22px; text-align: center; background: var(--messing-hell); color: var(--tinte); font-size: 15px; font-weight: 500; }
.hinweis-banner.geschlossen { background: #f4d9cf; color: #6e2610; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s, background .3s;
}
.kopf.gescrollt { box-shadow: 0 10px 30px -18px rgba(14, 27, 51, .45); border-bottom-color: var(--linie); background: rgba(255, 255, 255, .96); }
.kopf-innen { max-width: var(--breite); min-height: var(--kopf-h); margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { flex: none; border-radius: 6px; }
.logo img { height: 50px; width: auto; transition: height .3s var(--weich); }
.kopf.gescrollt .logo img { height: 42px; }

.menu-knopf { display: none; }
.menu-kontakt { display: none; }
.hauptmenu ul { list-style: none; margin: 0; padding: 0; }
.menu-liste { display: flex; align-items: center; gap: 2px; }
.hauptmenu li { position: relative; }
.menu-liste > li > a {
  position: relative; display: block; padding: 12px 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte); text-decoration: none;
}
.menu-liste > li > a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--messing); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.menu-liste > li > a:hover::after, .menu-liste > li > a[aria-current="page"]::after { transform: scaleX(1); }
.untermenu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 70;
  min-width: 260px; padding: 10px !important; background: #fff; border-radius: 14px; box-shadow: var(--schatten-hoch);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.hat-untermenu:hover .untermenu, .hat-untermenu:focus-within .untermenu { opacity: 1; visibility: visible; transform: none; }
.untermenu a { display: block; padding: 10px 14px; border-radius: 9px; color: var(--tinte); text-decoration: none; font-size: 15px; }
.untermenu a:hover { background: var(--papier); color: var(--navy); }

/* ---------- Kopfbereich (Held) ---------- */
.held { position: relative; overflow: hidden; isolation: isolate; min-height: 46vh; display: flex; align-items: flex-end; background: var(--tinte); color: #fff; }
.held-gross { min-height: min(84vh, 800px); align-items: center; }
.held-ohne-bild { min-height: 32vh; background: radial-gradient(120% 140% at 85% 0%, #1d3561 0%, var(--tinte) 60%); }
.held picture { position: absolute; inset: 0; z-index: -2; }
.held-bild { width: 100%; height: 100%; object-fit: cover; animation: zoom 16s ease-out both; will-change: transform; }
.held::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(14, 27, 51, .95) 0%, rgba(14, 27, 51, .8) 42%, rgba(14, 27, 51, .32) 100%); }
.held::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; background: linear-gradient(0deg, rgba(14, 27, 51, .45), rgba(14, 27, 51, 0)); }
.held-ohne-bild::before, .held-ohne-bild::after { display: none; }
.held-inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 120px 32px 72px; }
.held-gross .held-inhalt { padding-top: 96px; padding-bottom: 150px; }
.held-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--messing); animation: hoch .8s .1s both; }
.held-kicker::before { content: ''; width: 44px; height: 1px; background: currentColor; }
.held-titel { max-width: 920px; margin: 0; font-family: var(--serif); font-weight: 350; color: #fff; font-size: clamp(40px, 5.4vw, 78px); line-height: 1.03; letter-spacing: -.022em; font-variation-settings: 'opsz' 144, 'SOFT' 30; text-wrap: balance; animation: hoch .9s .2s both; }
.held:not(.held-gross) .held-titel { font-size: clamp(36px, 4vw, 58px); }
.held-titel em { color: var(--messing-hell); font-weight: 300; }
.held-text { max-width: 600px; margin: 24px 0 0; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .84); animation: hoch .9s .35s both; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; animation: hoch .9s .5s both; }
.scroll-hinweis { position: absolute; left: 50%; bottom: 96px; translate: -50% 0; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; color: #fff; animation: schweben 2.4s ease-in-out infinite; }
.scroll-hinweis svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hinweis:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@keyframes zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hoch { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- Knöpfe ---------- */
.knopf-gold, .knopf-hell, .knopf-linie, .knopf-dunkel, .knopf, .knopf-rahmen {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .03em; text-decoration: none; cursor: pointer;
  transition: transform .2s, background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.knopf-gold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.knopf-gold { background: var(--messing); color: var(--tinte); }
.knopf-gold:hover { background: var(--messing-hell); color: var(--tinte); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(197, 160, 106, .7); }
.knopf-hell { border-color: rgba(255, 255, 255, .45); color: #fff; }
.knopf-hell:hover { background: #fff; color: var(--tinte); transform: translateY(-2px); }
.knopf-dunkel, .knopf { background: var(--tinte); color: #fff; }
.knopf-dunkel:hover, .knopf:hover { background: var(--tinte-3); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(14, 27, 51, .6); }
.knopf-linie { border-color: var(--tinte); color: var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: #fff; transform: translateY(-2px); }
.knopf-rahmen { width: 100%; border-color: var(--messing); color: var(--messing-hell); }
.knopf-rahmen:hover { background: var(--messing); color: var(--tinte); }

/* ---------- Faktenband (Start) ---------- */
.zahlen { position: relative; z-index: 5; max-width: calc(var(--breite) - 64px); margin: -76px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: var(--radius); box-shadow: var(--schatten-hoch); }
.zahl { padding: 30px 28px; border-left: 1px solid var(--linie); }
.zahl:first-child { border-left: 0; }
.zahl-wert { display: block; font-family: var(--serif); font-size: 38px; line-height: 1.05; color: var(--tinte); font-variation-settings: 'opsz' 144; }
.zahl-text { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--grau); }

/* ---------- Inhalt + Seitenleiste ---------- */
.rumpf { max-width: var(--breite); margin: 0 auto; padding: 96px 32px 112px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 64px; align-items: start; }
.inhalt { min-width: 0; }
.lead { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.45; color: var(--navy); margin: 0 0 28px; }
.fliesstext { max-width: 70ch; }
.abschnitt { margin-top: 12px; }
.klein { font-size: 14px; color: rgba(255, 255, 255, .74); max-width: 480px; margin: 0; }
.klein a { color: var(--messing-hell); }

.seitenleiste { position: sticky; top: calc(var(--kopf-h) + 28px); padding: 32px 28px; border-radius: var(--radius); background: var(--tinte); color: #c9d0dd; font-size: 15px; line-height: 1.65; box-shadow: var(--schatten-hoch); }
.seitenleiste .block { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.seitenleiste .block p { margin: 0; }
.block-marke strong { display: block; font-family: var(--serif); font-size: 23px; font-weight: 400; color: #fff; line-height: 1.25; }
.block-marke span { font-size: 14px; color: var(--messing-hell); }
.block-titel { margin: 0 0 6px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); }
.seitenleiste .lage { border-bottom: 0; margin-bottom: 10px; font-size: 14px; }
.seitenleiste strong { color: #fff; font-weight: 600; }
.seitenleiste a { color: var(--messing-hell); text-decoration: none; }
.seitenleiste a:hover { color: #fff; text-decoration: underline; }
.seitenleiste a.knopf-rahmen:hover { color: var(--tinte); text-decoration: none; }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; }
.zeiten dt { color: #fff; }
.zeiten dd { margin: 0; }
.zusatz { margin-top: 4px !important; font-size: 14px; color: #aeb6c6; }
.status { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.status .punkt { width: 9px; height: 9px; border-radius: 50%; background: #9aa3b5; flex: none; }
.status-offen .punkt { background: #4cc38a; box-shadow: 0 0 0 0 rgba(76, 195, 138, .6); animation: puls 2.2s infinite; }
.seitenleiste .status-offen { color: #fff; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 138, .55); } 70% { box-shadow: 0 0 0 9px rgba(76, 195, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 195, 138, 0); } }

/* ---------- Start ---------- */
.box { margin: 52px 0; }
.box-titel { font-size: 30px; margin-bottom: 22px; }
.liste { list-style: none; margin: 0; padding: 0; counter-reset: punkt; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.liste li { counter-increment: punkt; position: relative; padding: 22px 22px 22px 70px; background: #fff; border-radius: 14px; box-shadow: var(--schatten); font-size: 15.5px; line-height: 1.5; color: var(--tinte); transition: transform .25s var(--weich), box-shadow .25s; }
.liste li::before { content: counter(punkt, decimal-leading-zero); position: absolute; left: 22px; top: 19px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--messing-dunkel); }
.liste li:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kachel { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; text-decoration: none; background: var(--tinte); box-shadow: var(--schatten); isolation: isolate; }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--weich); z-index: -2; }
.kachel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 27, 51, 0) 30%, rgba(14, 27, 51, .9) 100%); transition: opacity .3s; }
.kachel span { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 22px; color: #fff; }
.kachel span::after { content: '→'; font-family: var(--sans); color: var(--messing); transition: transform .3s; }
.kachel:hover img { transform: scale(1.07); }
.kachel:hover span::after { transform: translateX(6px); }

/* ---------- Notar ---------- */
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 36px 0 56px; counter-reset: feld; }
.feld { counter-increment: feld; position: relative; padding: 30px 28px; background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); transition: transform .25s var(--weich), box-shadow .25s; }
.raster-2 .feld::before { content: counter(feld, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--messing-dunkel); }
.feld:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.feld h2 { font-size: 23px; margin-bottom: 10px; }
.feld p { font-size: 15.5px; }
.feld p:last-child { margin: 0; }
.bild-band { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius); margin: 0 0 64px; box-shadow: var(--schatten); }

.bereiche { margin: 8px 0 56px; border-top: 1px solid var(--linie); counter-reset: bereich; }
.bereich { counter-increment: bereich; border-bottom: 1px solid var(--linie); }
.bereich summary { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 24px 0; cursor: pointer; list-style: none; }
.bereich summary::-webkit-details-marker { display: none; }
.bereich summary::before, .bereich-einfach::before { content: counter(bereich, decimal-leading-zero); font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--messing-dunkel); }
.bereich summary h3 { margin: 0; font-size: 24px; transition: color .2s; }
.bereich summary:hover h3 { color: var(--navy); }
.pfeil { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie); transition: background .25s, border-color .25s, transform .35s var(--weich); }
.pfeil::before, .pfeil::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; background: var(--tinte); translate: -50% -50%; transition: transform .35s var(--weich); }
.pfeil::after { transform: rotate(90deg); }
.bereich[open] .pfeil { background: var(--tinte); border-color: var(--tinte); }
.bereich[open] .pfeil::before, .bereich[open] .pfeil::after { background: #fff; }
.bereich[open] .pfeil::after { transform: rotate(0deg); }
.bereich-text { padding: 0 48px 26px 72px; }
.bereich-text p { margin: 0; }
.bereich[open] .bereich-text { animation: aufklappen .35s var(--weich); }
.bereich-einfach { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; padding: 24px 0; }
.bereich-einfach h3 { margin: 0; font-size: 24px; }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.hinweis { padding: 48px 46px; border-radius: 22px; background: var(--tinte); color: #c9d0dd; box-shadow: var(--schatten-hoch); position: relative; overflow: hidden; }
.hinweis::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(197, 160, 106, .25); }
.hinweis h2 { color: #fff; }
.hinweis strong { color: #fff; }
.hinweis p:last-child { margin: 0; }

/* ---------- Partner ---------- */
.pillen { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.pillen a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: var(--schatten); color: var(--tinte); text-decoration: none; font-weight: 500; font-size: 15px; transition: background .2s, color .2s, transform .2s; }
.pillen a:hover { background: var(--tinte); color: #fff; transform: translateY(-2px); }
.personen { display: grid; gap: 32px; margin-top: 36px; }
.person { display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--schatten); }
.person-bild { position: relative; overflow: hidden; background: var(--papier-2); }
.person-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: filter .5s, transform .9s var(--weich); }
.person:hover .person-bild img { filter: none; transform: scale(1.04); }
.person-text { padding: 36px 38px; }
.person-text h2 { font-size: 32px; margin-bottom: 4px; }
.titelzeile { margin: 0 0 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--messing-dunkel); }
.vita { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--linie); }
.vita li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 9px 0; font-size: 15.5px; line-height: 1.55; }
.vita li::before { content: ''; position: absolute; left: -29px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--messing); transition: background .2s; }
.vita li:hover::before { background: var(--messing); }
.vita-jahr { font-family: var(--serif); font-size: 17px; color: var(--tinte); }
.unterzeile { margin: 26px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border-radius: 999px; background: var(--papier); font-size: 14px; color: var(--tinte); }

/* ---------- Rechtsberatung ---------- */
.zwei-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.karte { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--schatten); transition: transform .3s var(--weich), box-shadow .3s; }
.karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
.karte-bild { overflow: hidden; aspect-ratio: 16 / 10; background: var(--papier-2); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--weich); }
.karte:hover .karte-bild img { transform: scale(1.05); }
.karte-text { padding: 30px 30px 34px; }
.karte-text h2 { font-size: 28px; margin-bottom: 4px; }
.karte-text p { font-size: 15.5px; }
.karte-text p:last-child { margin: 0; }

/* ---------- Ansprechpartner ---------- */
.team-bereich { margin: 32px 0 72px; }
.etikett { margin: 0 0 16px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-dunkel); }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.team li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border-radius: 14px; box-shadow: var(--schatten); transition: transform .25s var(--weich), box-shadow .25s; }
.team li:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.mono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinte); color: var(--messing-hell); font-family: var(--serif); font-size: 16px; letter-spacing: .04em; }
.team-text { min-width: 0; }
.team .name { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--tinte); }
.team a { font-size: 14px; overflow-wrap: break-word; text-decoration: none; }
.team a:hover { text-decoration: underline; }

.karte-zustimmung { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 380px; padding: 40px 28px; text-align: center; border-radius: 22px; color: #fff; background: radial-gradient(120% 120% at 20% 0%, #1d3561 0%, var(--tinte) 65%); box-shadow: var(--schatten-hoch); }
.karte-icon { width: 44px; height: 44px; fill: none; stroke: var(--messing); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.karte-zustimmung .adresse { font-family: var(--serif); font-size: 26px; color: #fff; }
.karte-rahmen { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; box-shadow: var(--schatten-hoch); }
.nach-karte { margin-top: 18px; font-size: 15px; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 780px; }
.rechtstext h2 { font-size: 26px; margin: 44px 0 12px; }
.rechtstext p, .rechtstext li { font-size: 16px; }
.rechtstext ul { padding-left: 20px; margin: 0 0 18px; }
mark.offen { background: #fff0c2; color: #5a4500; padding: 1px 5px; border-radius: 4px; }

/* ---------- Kontaktfläche vor dem Fuß ---------- */
.aufruf { padding: 0 32px; }
.aufruf-innen { position: relative; overflow: hidden; max-width: var(--breite); margin: 0 auto 96px; padding: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 48px; align-items: end; border-radius: 26px; background: var(--messing); color: var(--tinte); }
.aufruf-innen::after { content: ''; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(14, 27, 51, .14); }
.aufruf-kicker { grid-column: 1 / -1; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.aufruf-titel { margin: 0; max-width: 720px; font-family: var(--serif); font-weight: 350; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.aufruf-titel em { font-weight: 300; }
.aufruf-knoepfe { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: #aeb6c6; font-size: 15px; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 80px 32px 32px; }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 40px; }
.fuss-marke { margin-bottom: 14px; font-family: var(--serif); font-size: 34px; line-height: 1.1; color: #fff; }
.fuss-marke span { color: var(--messing); }
.fuss-titel { margin: 6px 0 14px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--messing); }
.fuss p { margin: 0 0 14px; }
.fuss a { color: #dfe4ee; text-decoration: none; }
.fuss a:hover { color: var(--messing-hell); text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss .status { color: #dfe4ee; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #8f98ab; }
.nach-oben { display: inline-flex; align-items: center; gap: 8px; }
.nach-oben svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Einblenden beim Scrollen ---------- */
.rein-aktiv :is(.box li, .kachel, .feld, .bereich, .hinweis, .person, .karte, .team li, .zahl, .bild-band, .pillen, .karte-zustimmung):not(.sichtbar) { opacity: 0; transform: translateY(28px); }
.rein-aktiv :is(.box li, .kachel, .feld, .bereich, .hinweis, .person, .karte, .team li, .zahl, .bild-band, .pillen, .karte-zustimmung) { transition: opacity .7s ease var(--verzoegerung, 0ms), transform .7s var(--weich) var(--verzoegerung, 0ms), box-shadow .25s; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  :root { --kopf-h: 68px; }
  .kopf-innen { padding: 10px 22px; }
  .logo img, .kopf.gescrollt .logo img { height: 40px; }

  /* Menü als Vollbild-Ebene (nur mit JavaScript; ohne JS bleibt die Linkleiste sichtbar) */
  .js .menu-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; color: var(--tinte); font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 2; }
  .menu-linien { position: relative; width: 18px; height: 12px; }
  .menu-linien span { position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; transition: transform .3s var(--weich), top .3s var(--weich); }
  .menu-linien span:first-child { top: 2px; }
  .menu-linien span:last-child { top: 9px; }
  .menu-offen .menu-linien span:first-child { top: 5.5px; transform: rotate(45deg); }
  .menu-offen .menu-linien span:last-child { top: 5.5px; transform: rotate(-45deg); }
  .menu-offen .menu-knopf { background: var(--tinte); color: #fff; border-color: var(--tinte); }

  .js .hauptmenu {
    position: fixed; inset: 0; z-index: 1; overflow-y: auto;
    padding: calc(var(--kopf-h) + 32px) 28px 40px;
    background: var(--tinte); color: #fff;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .js.menu-offen .hauptmenu { opacity: 1; visibility: visible; }
  .menu-offen, .menu-offen body { overflow: hidden; }
  .menu-offen .kopf { background: var(--tinte); border-bottom-color: rgba(255, 255, 255, .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .logo { position: relative; z-index: 2; }
  .menu-offen .logo img { filter: brightness(0) invert(1); }
  .js .menu-liste { display: block; }
  .js .menu-liste > li { border-bottom: 1px solid rgba(255, 255, 255, .08); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s var(--weich); }
  .js.menu-offen .menu-liste > li { opacity: 1; transform: none; }
  .js.menu-offen .menu-liste > li:nth-child(2) { transition-delay: .04s; }
  .js.menu-offen .menu-liste > li:nth-child(3) { transition-delay: .08s; }
  .js.menu-offen .menu-liste > li:nth-child(4) { transition-delay: .12s; }
  .js.menu-offen .menu-liste > li:nth-child(5) { transition-delay: .16s; }
  .js.menu-offen .menu-liste > li:nth-child(6) { transition-delay: .2s; }
  .js .menu-liste > li > a { padding: 16px 0; font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.01em; text-transform: none; color: #fff; }
  .js .menu-liste > li > a::after { left: 0; right: auto; width: 40px; bottom: 10px; }
  .js .untermenu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 14px !important; background: none; box-shadow: none; }
  .js .untermenu a { padding: 6px 0; color: var(--messing-hell); font-size: 16px; }
  .js .untermenu a:hover { background: none; color: #fff; }
  .js .menu-kontakt { display: grid; gap: 6px; margin-top: 32px; font-size: 15px; color: #aeb6c6; }
  .js .menu-kontakt a { color: var(--messing-hell); text-decoration: none; font-size: 18px; }

  /* ohne JavaScript: Linkleiste umbrechen */
  html:not(.js) .kopf-innen { flex-direction: column; }
  html:not(.js) .menu-liste { flex-wrap: wrap; justify-content: center; }

  .rumpf { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 72px 24px 88px; }
  .seitenleiste { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .seitenleiste .block-marke, .seitenleiste .lage, .seitenleiste .knopf-rahmen { grid-column: 1 / -1; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -56px 20px 0; }
  .zahl:nth-child(3) { border-left: 0; }
  .zahl:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person-bild { height: 240px; }
  .aufruf-innen { grid-template-columns: minmax(0, 1fr); padding: 48px 36px; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Handy ---------- */
@media (max-width: 680px) {
  body { font-size: 16px; }
  .kopf-innen { padding: 10px 16px; gap: 12px; }
  .logo img, .kopf.gescrollt .logo img { height: 34px; }
  .js .menu-knopf { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .menu-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .held { min-height: 40vh; }
  .held-gross { min-height: 640px; }
  .held-inhalt { padding: 72px 22px 56px; }
  .held-gross .held-inhalt { padding: 64px 22px 120px; }
  .held::before { background: linear-gradient(180deg, rgba(14, 27, 51, .55) 0%, rgba(14, 27, 51, .92) 75%); }
  .held-text { font-size: 17px; }
  .held-knoepfe a { width: 100%; }
  .scroll-hinweis { display: none; }
  .zahl { padding: 20px 18px; }
  .zahl-wert { font-size: 26px; }
  .zahl-text { font-size: 13px; }
  .rumpf { padding: 56px 20px 72px; }
  .seitenleiste { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .liste, .kacheln, .raster-2, .zwei-karten, .team, .team-bereich { grid-template-columns: minmax(0, 1fr); }
  .kachel { aspect-ratio: 16 / 10; }
  .bereich summary { grid-template-columns: 44px minmax(0, 1fr) 36px; padding: 20px 0; }
  .bereich summary::before, .bereich-einfach::before { font-size: 22px; }
  .bereich summary h3, .bereich-einfach h3 { font-size: 20px; }
  .bereich-einfach { grid-template-columns: 44px minmax(0, 1fr); }
  .pfeil { width: 36px; height: 36px; }
  .bereich-text { padding: 0 0 22px 52px; }
  .hinweis { padding: 34px 26px; }
  .person-text { padding: 28px 24px; }
  .vita li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aufruf { padding: 0 16px; }
  .aufruf-innen { padding: 40px 26px; margin-bottom: 64px; }
  .aufruf-knoepfe a { width: 100%; }
  .fuss-innen { padding: 56px 22px 28px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fuss-marke { font-size: 28px; }
}

/* ---------- Weniger Bewegung gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}