/* Veracis Leads: hell und aufgeräumt nach dem Vorbild Leadrise, Marke von Veracis Solutions (Cormorant + DM Sans, Gold). Weiss, Manrope, schwarze Knöpfe,
   feine Ränder, grosse Radien. Die Live-Karte bleibt das eine dunkle Element. */
:root {
  --weiss: #ffffff;
  --grau: #f5f5f6;
  --grau-2: #ececee;
  --rand: #e4e4e7;
  --tinte: #181818;
  --text: #3b3b40;
  --leise: #6b6b73;
  --nacht: #0b1020;
  --licht: #c9a467;
  --licht-text: #8a6a2f;
  --warn: #b42318;
  --radius: 20px;
  --radius-klein: 14px;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--weiss); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--tinte); font-weight: 600; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.falle { position: absolute; left: -9999px; }
.sprung { position: absolute; left: 16px; top: -60px; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 50; text-decoration: none; font-weight: 600; }
.sprung:focus { top: 12px; }
.rahmen { width: min(1250px, 100% - 64px); margin: 0 auto; }
.rahmen-schmal { width: min(860px, 100% - 64px); }
.leise { color: var(--leise); }
[data-zahl], .markt-zahl, .betrag, output, .rechner-umsatz { font-variant-numeric: tabular-nums; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rand); }
.kopf-innen { display: flex; align-items: center; gap: 48px; height: 88px; }
.marke { display: inline-flex; align-items: baseline; gap: 8px; color: var(--tinte); text-decoration: none; line-height: 1; }
.marke-name { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: 0; }
.marke-zusatz { font-size: 13px; font-weight: 700; color: var(--licht-text); border: 1px solid var(--licht); border-radius: 6px; padding: 3px 7px; position: relative; top: -4px; }
.fuss .marke-zusatz { color: var(--licht); }
.nav { display: flex; gap: 32px; }
.nav a { color: var(--tinte); text-decoration: none; font-size: 16px; font-weight: 500; }
.nav a:hover { color: var(--leise); }
.kopf .knopf { margin-left: auto; }

/* Knöpfe und Felder */
.knopf { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border-radius: var(--radius-klein); font: 600 16px var(--sans); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; transition: background .15s, color .15s; }
.knopf-dunkel { background: var(--tinte); color: #fff; }
.knopf-dunkel:hover { background: #333; }
.knopf-grau { background: var(--grau-2); color: var(--tinte); }
.knopf-grau:hover { background: #e0e0e3; }
.knopf-hell { background: #fff; color: var(--tinte); }
.knopf-hell:hover { background: var(--grau-2); }
.knopf-klein { height: 48px; padding: 0 22px; font-size: 15px; }
.knopf:disabled { opacity: .6; cursor: progress; }
input[type="email"], input[type="text"], input[type="tel"], input[type="number"], select, textarea { height: 56px; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: #fff; color: var(--tinte); font: 16px var(--sans); padding: 0 18px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinte); }
select { padding-right: 40px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.meldung { font-size: 15px; color: #15803d; }
.meldung:empty { display: none; }
.meldung.fehler { color: var(--warn); }

/* Held */
.held { padding: 72px 0 0; }
.held-inhalt { text-align: center; display: grid; justify-items: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cfcfd4; border-radius: 10px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--tinte); }
.fahne { width: 14px; height: 14px; border-radius: 3px; background: #e30613; position: relative; }
.fahne::before, .fahne::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fahne::before { width: 8px; height: 2.4px; }
.fahne::after { width: 2.4px; height: 8px; }
.held h1 { margin-top: 26px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.12; max-width: 20ch; font-weight: 600; }
.held-lead { margin-top: 22px; font-size: 19px; color: var(--text); max-width: 54ch; }
.erfassen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; width: min(560px, 100%); }
.erfassen input[type="email"] { flex: 1 1 260px; }
.erfassen-fuss { flex-basis: 100%; font-size: 14px; color: var(--leise); }
.erfassen .meldung { flex-basis: 100%; }


/* Quellen */
.quellen { padding: 64px 0 24px; text-align: center; }
.quellen p { color: var(--leise); font-size: 15px; }
.quellen ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 56px; }
.quellen li { font-weight: 700; font-size: 18px; color: #9a9aa3; letter-spacing: -0.01em; }

/* Abschnitte */
.abschnitt { padding: 104px 0; }
.abschnitt-grau { background: var(--grau); }
.titel { text-align: center; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; margin: 0 auto 56px; max-width: 22ch; }
.untertitel { text-align: center; color: var(--leise); margin: -40px auto 48px; }
.karte { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 36px; }
.abschnitt-grau .karte { border-color: transparent; }
.karte-dunkel { background: var(--tinte); border-color: var(--tinte); color: #d4d4d8; }
.karte-dunkel h3 { color: #fff; }
.karte h3 { font-size: 22px; margin-bottom: 24px; }

.vorteile { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.haken li { padding-left: 34px; position: relative; }
.haken li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--grau-2); }
.haken li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 4px; border-left: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(-45deg); }
.haken b { display: block; color: var(--tinte); font-weight: 700; }
.haken span { display: block; color: var(--leise); font-size: 15.5px; }
.ablauf { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 22px; counter-reset: a; }
.ablauf li { counter-increment: a; padding-left: 50px; position: relative; }
.ablauf li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 10px; background: #2a2a2e; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.ablauf b { display: block; color: #fff; font-weight: 700; }
.ablauf span { display: block; color: #a1a1aa; font-size: 15.5px; }

/* Marktübersicht */
.feld { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tinte); border: 0; margin: 0; padding: 0; min-width: 0; }
.feld legend { padding: 0; margin-bottom: 8px; }
.feld select { width: 100%; height: 48px; font-weight: 500; font-size: 15px; }
.schalter { display: flex; flex-wrap: wrap; gap: 6px; }
.schalt { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rand); background: #fff; color: var(--tinte); font: 500 14px var(--sans); cursor: pointer; }
.schalt:hover { border-color: #b9b9c0; }
.schalt[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.schalter-klein .schalt { height: 32px; font-size: 13px; padding: 0 10px; }
.mehr summary { cursor: pointer; color: var(--leise); font-size: 14.5px; font-weight: 600; list-style: none; }
.mehr summary::after { content: " +"; }
.mehr[open] summary::after { content: " −"; }
.mehr[open] summary { margin-bottom: 14px; }
.mehr .segment { margin-top: 14px; }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--grau); border-radius: 12px; padding: 4px; }
.segment button { border: 0; background: none; height: 36px; border-radius: 9px; color: var(--leise); font: 600 14px var(--sans); cursor: pointer; }
.segment button[aria-pressed="true"] { background: #fff; color: var(--tinte); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.leads { list-style: none; margin: 0; padding: 0; }
.lead { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 12px 14px; cursor: pointer; border-radius: 12px; }
.lead:hover, .lead:focus-visible { background: var(--grau); }
.lead-firma { display: block; color: var(--tinte); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-anlass { display: block; font-size: 13.5px; color: var(--leise); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-anlass i { font-style: normal; color: var(--licht-text); font-weight: 600; margin-right: 8px; }
.leer { padding: 18px 14px; color: var(--leise); font-size: 14.5px; }

/* Anlässe */
.anlaesse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.anlaesse .karte { padding: 30px; }
.anlaesse b { display: block; color: var(--tinte); font-size: 20px; font-weight: 700; }
.anlaesse span { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--tinte); background: var(--grau); border-radius: 8px; padding: 3px 10px; min-height: 1.6em; }
.anlaesse p { color: var(--leise); font-size: 15.5px; margin-top: 14px; }

/* Rechner */
.rechner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; max-width: 980px; margin: 0 auto; padding: 44px; }
.rechner-form { display: grid; gap: 24px; }
.rechner-form label { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 15.5px; color: var(--text); font-weight: 500; }
.rechner-form input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--tinte); }
.rechner-form input[type="number"] { grid-column: 1 / -1; width: 100%; }
.rechner-form output { color: var(--tinte); font-weight: 700; }
.rechner-ergebnis { background: var(--grau); border-radius: var(--radius-klein); padding: 32px; }
.rechner-label { color: var(--leise); font-size: 15px; }
.rechner-umsatz { font-size: 22px; color: var(--tinte); font-weight: 600; margin: 4px 0; }
.rechner-umsatz span { font-size: clamp(42px, 4.4vw, 60px); font-weight: 700; letter-spacing: -0.03em; }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.preis { display: flex; flex-direction: column; gap: 22px; position: relative; }
.preis h3 { margin: 0; font-size: 18px; color: var(--leise); font-weight: 600; }
.preis-pro { border: 2px solid var(--tinte); }
.preis-marke { position: absolute; top: 28px; right: 28px; font-size: 13px; font-weight: 700; background: var(--tinte); color: #fff; border-radius: 8px; padding: 3px 10px; }
.betrag { font-size: 40px; font-weight: 700; color: var(--tinte); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.betrag small { font-size: 15px; color: var(--leise); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.preis .haken { flex: 1; gap: 12px; }
.preis .haken li { color: var(--text); font-size: 15.5px; }
.preis .knopf { width: 100%; }

/* Kantone */
.kantonliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kantonliste a { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #fff; border-radius: var(--radius-klein); text-decoration: none; color: var(--tinte); font-weight: 600; font-size: 15.5px; transition: box-shadow .15s; }
.kantonliste a:hover { box-shadow: 0 0 0 1px var(--tinte); }
.kantonliste a span { color: var(--leise); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Fragen */
.fragen { display: grid; gap: 12px; }
.fragen details { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 0 24px; background: #fff; }
.fragen summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-size: 17px; color: var(--tinte); position: relative; font-weight: 600; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 0; top: 16px; font-size: 26px; font-weight: 400; color: var(--leise); }
.fragen details[open] summary::after { content: "−"; }
.fragen details p { padding: 0 0 22px; color: var(--text); }
.fragen a { color: var(--tinte); font-weight: 600; }

/* Schluss */
.schluss { padding: 0 0 104px; }
.schluss-karte { background: var(--tinte); border-radius: 28px; padding: 80px 32px; text-align: center; display: grid; justify-items: center; }
.schluss-karte h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; max-width: 22ch; }
.schluss-karte p.leise { color: #a1a1aa; }
.schluss-karte .meldung { color: #86efac; }
.schluss-karte input[type="email"] { border-color: #3f3f46; background: #232326; color: #fff; }

/* Fuss */
.fuss { background: var(--tinte); color: #a1a1aa; padding: 56px 0 64px; }
.fuss .marke { color: #fff; }
.fuss-innen { display: flex; justify-content: space-between; gap: 32px; }
.fuss p { font-size: 14.5px; margin-top: 12px; }
.fuss nav { display: flex; gap: 28px; font-size: 15px; }
.fuss nav a { color: #d4d4d8; text-decoration: none; }
.fuss nav a:hover { color: #fff; }

/* Kantonsseiten */
.seite-kopf { padding: 72px 0 64px; text-align: center; }
.seite-kopf .rahmen { display: grid; justify-items: center; }
.brotkrumen { font-size: 14px; color: var(--leise); margin-bottom: 22px; }
.brotkrumen a { color: var(--leise); }
.seite-kopf h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.12; max-width: 20ch; }
.seite-kopf .held-lead { max-width: 62ch; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; margin: 0; }
.kennzahlen dt { color: var(--leise); font-size: 14.5px; }
.kennzahlen dd { margin: 2px 0 0; color: var(--tinte); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.zweispaltig > div { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 36px; }
.abschnitt-grau .zweispaltig > div { border-color: transparent; }
.zweispaltig h2 { font-size: 22px; margin-bottom: 20px; }
.rangliste { list-style: none; margin: 0; padding: 0; }
.rangliste li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rand); color: var(--tinte); font-weight: 500; }
.rangliste li:last-child { border-bottom: 0; }
.rangliste li span { color: var(--leise); font-variant-numeric: tabular-nums; }
.rangliste a { color: var(--tinte); font-weight: 700; text-decoration: none; }
.rangliste a:hover { text-decoration: underline; }
.firmenliste { list-style: none; margin: 0; padding: 0; }
.firmenliste li { padding: 14px 0; border-bottom: 1px solid var(--rand); }
.firmenliste li:last-child { border-bottom: 0; }
.firmenliste a { color: var(--tinte); font-weight: 700; text-decoration: none; }
.firmenliste a:hover { text-decoration: underline; }
.firmenliste p { color: var(--leise); font-size: 14.5px; }
.firmenliste i { font-style: normal; color: var(--licht-text); font-weight: 600; }
.zweispaltig > .kanton-karte { background: var(--nacht); border: 0; position: relative; min-height: 380px; padding: 0; overflow: hidden; }
.kanton-karte canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.schluss-innen { text-align: center; display: grid; justify-items: center; }

/* Lead-Akte */
.akte-huelle { position: fixed; inset: 0; z-index: 60; }
.akte-schatten { position: absolute; inset: 0; background: rgba(24, 24, 24, .45); backdrop-filter: blur(2px); }
.akte { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(620px, 100% - 24px); background: #fff; color: var(--tinte); overflow-y: auto; padding: 40px 44px 48px; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.25); animation: akteRein .28s ease-out; }
@keyframes akteRein { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .akte { animation: none; } }
.akte-zu { position: sticky; float: right; top: 0; margin: -16px -20px 0 0; width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--grau-2); font-size: 24px; line-height: 1; color: var(--tinte); cursor: pointer; z-index: 2; }
.akte h2 { font-size: 30px; line-height: 1.15; margin: 6px 50px 6px 0; }
.akte h3 { font-size: 14.5px; font-weight: 700; margin: 30px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rand); }
.akte-ort { color: var(--leise); font-size: 15px; }
.akte-anlass { margin-top: 18px; padding: 16px 18px; background: var(--grau); border-radius: var(--radius-klein); }
.akte-anlass b { display: block; font-size: 16px; }
.akte-anlass span { color: var(--leise); font-size: 14.5px; }
.akte dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.akte dt { color: var(--leise); }
.akte dd { margin: 0; }
.akte a { color: #1d4ed8; }
.personen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.personen li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.personen li span { color: var(--leise); text-align: right; }
.kontakt-zeile { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--rand); font-size: 15px; }
.kontakt-zeile:last-child { border-bottom: 0; }
.marke-warn { font-size: 12.5px; font-weight: 700; color: #9b2c1a; background: #fde7e2; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.marke-ok { font-size: 12.5px; font-weight: 700; color: #166534; background: #dcfce7; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.akte-leise { color: var(--leise); font-size: 14px; }
.verlauf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.verlauf-liste li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.verlauf-liste time { color: var(--leise); }
.einstieg { width: 100%; min-height: 230px; height: auto; padding: 16px 18px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: #fff; color: var(--tinte); font: 15px/1.55 var(--sans); resize: vertical; }
.einstieg-knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.akte .knopf-linie { background: var(--grau-2); color: var(--tinte); }
.laedt-zeile { color: var(--leise); font-size: 14.5px; padding: 6px 0; }

/* Dialog */
.dialog { border: 0; border-radius: 24px; padding: 36px; width: min(460px, 100% - 32px); background: #fff; color: var(--text); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.dialog::backdrop { background: rgba(24, 24, 24, .45); backdrop-filter: blur(2px); }
.dialog h2 { font-size: 28px; }
.dialog-paket { color: var(--leise); margin: 6px 0 22px; }
.dialog-zu { position: absolute; right: 16px; top: 14px; }
.dialog-zu button { background: var(--grau-2); border: 0; width: 40px; height: 40px; border-radius: 12px; color: var(--tinte); font-size: 24px; cursor: pointer; }
.formular { display: grid; gap: 14px; }
.formular label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--tinte); }
.formular input { width: 100%; height: 50px; }

/* Rechtsseiten */
.text-seite { padding: 72px 0 104px; }
.text-seite .rahmen { max-width: 760px; }
.text-seite h1 { font-size: 46px; margin-bottom: 36px; }
.text-seite h2 { font-size: 18px; margin: 32px 0 8px; }
.text-seite p { margin-bottom: 10px; }
.text-seite a { color: var(--tinte); font-weight: 600; }

/* Responsive */
@media (max-width: 1180px) {
  .kantonliste { grid-template-columns: repeat(3, 1fr); }
  .nav { gap: 22px; }
}
@media (max-width: 900px) {
  .rahmen, .rahmen-schmal { width: calc(100% - 32px); }
  .nav { display: none; }
  .kopf-innen { height: 72px; }
  .marke { font-size: 22px; }
  .held { padding-top: 44px; }
  .held h1 { font-size: 34px; }
  .held-lead { font-size: 17px; }
  .erfassen { flex-direction: column; }
  .erfassen input[type="email"] { flex: none; width: 100%; }
  .quellen ul { gap: 10px 28px; }
  .quellen li { font-size: 16px; }
  .abschnitt { padding: 72px 0; }
  .schluss { padding-bottom: 72px; }
  .titel { margin-bottom: 40px; }
  .untertitel { margin: -28px auto 36px; }
  .vorteile, .anlaesse, .preise, .zweispaltig { grid-template-columns: 1fr; }
  .karte, .zweispaltig > div { padding: 26px; }
  .rechner { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
  .kantonliste { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kantonliste a { padding: 14px; font-size: 14.5px; }
  .schluss-karte { padding: 52px 22px; border-radius: 22px; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .seite-kopf { padding: 44px 0 40px; }
  .akte { inset: 0; width: 100%; border-radius: 0; padding: 28px 22px 40px; }
  .akte dl { grid-template-columns: 1fr; gap: 2px; }
  .akte dd { margin-bottom: 8px; }
  .fuss-innen { flex-direction: column; }
}

/* Nachträge Handy */
@media (max-width: 900px) {
  .erfassen-fuss, .erfassen .meldung { flex-basis: auto; text-align: center; }
  .badge { font-size: 13px; padding: 5px 12px; }
  .kopf .knopf-klein { height: 42px; padding: 0 16px; font-size: 14px; }
}

/* Veracis Leads Ergänzungen */
.held-lead b { color: var(--tinte); font-weight: 700; }
.karte-text { color: #c4c4cc; margin-bottom: 14px; }
.karte-dunkel .knopf { margin-top: 14px; }
.liste-kopf { font-size: 13.5px; color: var(--leise); padding: 10px 14px 4px; }
.fuss p a { color: #fff; }
.nur-klein { display: none; }
@media (max-width: 900px) { .nur-gross { display: none; } .nur-klein { display: inline; } }

/* ── Bühne (02.10.2026): Auswahl als Satz, Karte und neueste Firmen in einem dunklen Element ── */
.satz { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 34px; font-size: 21px; font-weight: 500; color: var(--tinte); }
.satz select { height: 50px; width: auto; max-width: 100%; font: 600 19px var(--sans); border: 0; border-radius: 12px; background-color: var(--grau); padding: 0 42px 0 16px; cursor: pointer; }
.satz select:hover { background-color: var(--grau-2); }
.satz select:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }

.buehne { position: relative; margin-top: 40px; border-radius: 28px; overflow: hidden; background: radial-gradient(900px 480px at 38% 42%, #141d38, var(--nacht)); display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 620px; color: #d7dbe6; }
.b-karte { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 34px 36px 28px; }
.b-kopf { position: relative; z-index: 1; }
.b-zahl { font-size: clamp(60px, 6.4vw, 96px); line-height: .95; font-weight: 700; color: #fff; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.b-text { color: #a1a7b8; margin-top: 10px; font-size: 15.5px; }
.b-karte canvas { flex: 1; width: calc(100% + 40px); margin: -34px -20px 0; min-height: 330px; display: block; transition: opacity .2s; }
.buehne.laedt canvas { opacity: .55; }
.b-fuss { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.buehne .schalt { height: 38px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #e6e8ee; }
.buehne .schalt:hover { border-color: rgba(255, 255, 255, .4); }
.buehne .schalt[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--tinte); }
.buehne .segment { background: rgba(255, 255, 255, .08); min-width: 250px; }
.buehne .segment button { color: #a1a7b8; }
.buehne .segment button[aria-pressed="true"] { background: #fff; color: var(--tinte); }
.buehne :focus-visible { outline-color: #fff; }
.b-liste { background: rgba(255, 255, 255, .045); border-left: 1px solid rgba(255, 255, 255, .09); padding: 26px 14px 22px; display: flex; flex-direction: column; min-width: 0; }
.b-liste .liste-kopf { color: #a1a7b8; padding: 0 14px 10px; font-size: 14px; }
.b-liste .leads { flex: 1; }
.buehne .lead { padding: 11px 14px; border-radius: 12px; transition: background .15s; }
.buehne .lead:hover, .buehne .lead:focus-visible, .buehne .lead.ist-an { background: rgba(255, 255, 255, .09); }
.buehne .lead-firma { color: #fff; }
.buehne .lead-anlass { color: #a1a7b8; }
.buehne .lead-anlass i { color: #e3c48f; }
.buehne .leer { color: #a1a7b8; }
.b-hinweis { color: #8c93a6; font-size: 13.5px; line-height: 1.5; padding: 14px 14px 0; border-top: 1px solid rgba(255, 255, 255, .09); margin-top: 10px; }
.erfassen-buehne { margin: 32px auto 0; }

/* Offene Akte */
.offen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.offen > .laedt-zeile { grid-column: 1 / -1; text-align: center; padding: 60px 0; }
.offen-akte { background: #fff; border-radius: var(--radius); padding: 36px; color: var(--tinte); display: flex; flex-direction: column; }
.offen-firma { font-size: 28px; line-height: 1.15; margin: 6px 0; }
.offen-akte h4 { font-size: 14.5px; font-weight: 700; margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rand); color: var(--tinte); }
.offen-akte a { color: #1d4ed8; }
.offen-akte .knopf { margin-top: auto; align-self: flex-start; }
.offen-akte .kontakt-zeile:last-of-type { margin-bottom: 26px; }
.offen-brief { background: var(--tinte); border-radius: var(--radius); padding: 36px; color: #e4e4e7; display: flex; flex-direction: column; }
.offen-brief-kopf { color: #a1a1aa; font-size: 14.5px; font-weight: 600; margin-bottom: 18px; }
.offen-brief pre { margin: 0; font: 16px/1.65 var(--sans); white-space: pre-wrap; color: #f4f4f5; flex: 1; }
.offen-brief-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.offen-brief-fuss span { color: #a1a1aa; font-size: 13.5px; }

@media (max-width: 1100px) {
  .buehne { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 900px) {
  .satz { font-size: 18px; gap: 8px; margin-top: 26px; flex-direction: column; }
  .satz select { width: 100%; font-size: 17px; text-align: center; text-align-last: center; }
  .buehne { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px; margin-top: 28px; }
  .b-karte { padding: 24px 18px 18px; }
  .b-zahl { font-size: 56px; }
  .b-karte canvas { min-height: 0; height: 230px; flex: none; width: calc(100% + 24px); margin: -6px -12px 6px; }
  .buehne .segment { min-width: 0; width: 100%; }
  .b-liste { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .09); padding: 18px 6px; }
  .offen { grid-template-columns: minmax(0, 1fr); }
  .offen-akte, .offen-brief { padding: 26px; }
  .offen-firma { font-size: 24px; }
}
.fuss nav { flex-wrap: wrap; gap: 12px 28px; }
.erfassen-buehne { width: min(660px, 100%); }
.b-karte canvas { margin-top: -70px; }
@media (max-width: 900px) { .b-karte canvas { margin-top: -6px; } }