/* ═══════════════════════════════════════════════════════════════════════
   BAURAPPORT.CH — DESIGNSYSTEM DER ÖFFENTLICHEN WEBSITE (seit 01.10.2026)

   Quelle des Entwurfs: docs/plans/mockups/2026-10-01-webseite/. Diese Datei
   wird NICHT von Vite gebaut — der Deploy baut kein CSS neu. Sie liegt fertig
   in public/css und wird von layouts/website.blade.php geladen.

   EIN System für alle Seiten. Die heutige Website setzt jede Seite neu
   zusammen (eigene Abstände, eigene Kopfbereiche, eigene Kartenformen) —
   hier gibt es je Baustein genau eine Form:

     Container   1152px, Seitenrand 20 / 24 / 32px
     Abschnitt   96px oben/unten (64px am Handy), immer
     Kopfbereich .seitenkopf — auf jeder Unterseite gleich hoch, gleich gebaut
     Hintergrund weiss ↔ hellgrau im Wechsel; DUNKEL nur zweimal pro Seite
                 und nie randlos: als abgerundete Fläche IN einem Abschnitt,
                 damit kein harter Schnitt quer über die Seite entsteht
     Knöpfe      gross 16/36px, normal 12/22px — Hauptaktion immer blau
     Karten      Radius 20px, Innenabstand 28/32px, ein Schatten

   Farben aus dem Logo (#0B4DA2) und der App (Blau #2563EB, Tinte #0B1220).
   «Neu» ist bernsteinfarben — die einzige Stelle, an der Bernstein auftritt.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tinte: #0B1220;
  --tinte-2: #1E293B;
  --text: #334155;
  --leise: #64748B;
  --blass: #94A3B8;
  --linie: #E2E8F0;
  --linie-2: #EEF2F6;
  --weiss: #FFFFFF;
  --grau: #F6F8FB;
  --grau-2: #EEF2F7;
  --marke: #0B4DA2;
  --blau: #2563EB;
  --blau-tief: #1D4ED8;
  --blau-hell: #EFF5FF;
  --blau-rand: #BFD4FE;
  --gruen: #059669;
  --gruen-hell: #ECFDF5;
  --neu: #B45309;
  --neu-hell: #FFF7E8;
  --neu-rand: #FCD9A0;
  --violett: #6D28D9;
  --violett-hell: #F5F3FF;

  --r-s: 10px;
  --r: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --schatten-s: 0 1px 2px rgba(11, 18, 32, .05), 0 1px 3px rgba(11, 18, 32, .06);
  --schatten: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 24px -6px rgba(11, 18, 32, .10);
  --schatten-l: 0 2px 4px rgba(11, 18, 32, .04), 0 24px 56px -12px rgba(11, 18, 32, .22);
  --schrift: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breite: 1152px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); color: var(--text); background: var(--weiss);
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* .h1 auch ohne h1-Element: der Slogan im Startseitenkopf ist seit dem 02.10.2026 ein
   <p class="h1"> (die Überschrift für Google steht darüber) und stand ohne diese Regel
   dünn und grau da — Betreiber: «eine andere schriftart als der rest der webseite». */
h1, h2, h3, h4, .h1 { color: var(--tinte); margin: 0; font-weight: 800; letter-spacing: -0.022em; line-height: 1.12; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--blau-rand); outline-offset: 2px; border-radius: 6px; }

/* ── Raster ─────────────────────────────────────────────────────────── */
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }
.schmal { max-width: 760px; margin-left: auto; margin-right: auto; }

.abschnitt { padding: 64px 0; }
@media (min-width: 640px) { .abschnitt { padding: 96px 0; } }
.abschnitt.grau { background: var(--grau); }
.abschnitt.eng-oben { padding-top: 0; }
/* Zwei graue Abschnitte hintereinander bekommen eine feine Trennlinie —
   sonst verschmelzen sie zu einem Block, ohne dass der Inhalt es will. */
.abschnitt.grau + .abschnitt.grau { border-top: 1px solid var(--linie-2); }

/* ── Typografie ─────────────────────────────────────────────────────── */
.ueber {                      /* die kleine Zeile über einer Überschrift */
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blau);
  margin-bottom: 14px;
}
.h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); letter-spacing: -0.035em; line-height: 1.04; }
.h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); letter-spacing: -0.03em; }
.h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.3; font-weight: 750; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--leise); }
.mitte { text-align: center; }
.kopf { max-width: 720px; margin-bottom: 48px; }
.kopf.mitte { margin-left: auto; margin-right: auto; }
.kopf .lead { margin-top: 16px; }
@media (min-width: 640px) { .kopf { margin-bottom: 64px; } }
.farbverlauf {
  background: linear-gradient(100deg, var(--blau) 0%, #4F46E5 60%, var(--marke) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Knöpfe ─────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer;
  padding: 12px 22px; border-radius: 12px; border: 0; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf.gross { font-size: 16px; padding: 17px 36px; border-radius: 14px; }
@media (min-width: 640px) { .knopf.gross { padding: 18px 40px; } }
.knopf.haupt { background: var(--blau); color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, .3), 0 8px 20px -6px rgba(37, 99, 235, .55); }
.knopf.haupt:hover { background: var(--blau-tief); transform: translateY(-1px); }
.knopf.zweit { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-s); }
.knopf.zweit:hover { box-shadow: inset 0 0 0 1px var(--blass), var(--schatten-s); }
.knopf.hell { background: #fff; color: var(--tinte); }
.knopf.hell:hover { transform: translateY(-1px); }
.knopf.geist { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.knopf.geist:hover { background: rgba(255, 255, 255, .14); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knoepfe.mitte { justify-content: center; }
.textlink { display: inline-flex; align-items: center; gap: 6px; color: var(--blau); font-weight: 700; text-decoration: none; }
.textlink svg { width: 16px; height: 16px; transition: transform .15s; }
.textlink:hover svg { transform: translateX(3px); }

/* ── «Neu» ─────────────────────────────────────────────────────────── */
.neu {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--neu); background: var(--neu-hell); box-shadow: inset 0 0 0 1px var(--neu-rand);
  padding: 4px 10px; border-radius: 999px; line-height: 1.2;
}
.neu svg { width: 13px; height: 13px; }
.neu.klein { font-size: 10.5px; padding: 3px 8px; }

/* ── Navigation ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
}
.nav.gescrollt { border-bottom-color: var(--linie); background: rgba(255, 255, 255, .92); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.logo svg { width: 30px; height: 30px; }
.logo b { font-size: 19px; font-weight: 800; color: var(--marke); letter-spacing: -0.02em; }
.logo b span { color: #6D8FC4; font-weight: 700; }
.nav-links { display: none; gap: 4px; }
.nav-links a {
  text-decoration: none; font-size: 15px; font-weight: 600; color: var(--text);
  padding: 8px 12px; border-radius: 10px; transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--grau); color: var(--tinte); }
.nav-links a.aktiv { color: var(--tinte); background: var(--grau-2); }
.nav-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-rechts .anmelden { display: none; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--text); padding: 8px 12px; }
.sprache { display: none; font-size: 13px; font-weight: 700; color: var(--leise); gap: 2px; }
.sprache a { text-decoration: none; padding: 6px 7px; border-radius: 8px; }
.sprache a.aktiv { color: var(--tinte); background: var(--grau-2); }
.burger { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; border: 0; background: transparent; cursor: pointer; color: var(--tinte); }
.burger svg { width: 24px; height: 24px; }
@media (min-width: 1000px) {
  .nav-links, .nav-rechts .anmelden, .sprache { display: flex; }
  .burger { display: none; }
}
.nav-panel { display: none; border-top: 1px solid var(--linie); background: #fff; padding: 12px 20px 24px; }
.nav-panel.offen { display: block; }
.nav-panel a { display: block; padding: 13px 4px; font-size: 17px; font-weight: 650; color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-2); }
.nav-panel .knoepfe { margin-top: 18px; }
.nav-panel .knoepfe .knopf { flex: 1 1 140px; }
@media (min-width: 1000px) { .nav-panel { display: none !important; } }

/* ── Startseite: Kopf ───────────────────────────────────────────────── */
.held { position: relative; overflow: hidden; padding: 56px 0 72px; background:
  radial-gradient(900px 480px at 85% -10%, rgba(37, 99, 235, .13), transparent 60%),
  radial-gradient(700px 420px at -10% 10%, rgba(79, 70, 229, .08), transparent 60%),
  linear-gradient(#fff, var(--grau)); }
.held::before {                 /* feines Punktraster, nach unten ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(11, 18, 32, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000, transparent 75%); mask-image: linear-gradient(#000, transparent 75%);
}
@media (min-width: 640px) { .held { padding: 80px 0 104px; } }
.held-raster { position: relative; display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .held-raster { grid-template-columns: 1fr 1.08fr; gap: 48px; } }
.ankuendigung {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-s);
  padding: 6px 14px 6px 6px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--tinte);
  margin-bottom: 26px; transition: box-shadow .15s;
}
.ankuendigung:hover { box-shadow: inset 0 0 0 1px var(--blass), var(--schatten-s); }
.ankuendigung .neu { flex: none; }
.ankuendigung span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ankuendigung svg.pf { width: 16px; height: 16px; color: var(--leise); flex: none; }
.held .lead { margin-top: 22px; max-width: 560px; }
.held .knoepfe { margin-top: 34px; }
.vertrauen { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 14px; color: var(--leise); font-weight: 500; }
.vertrauen span { display: inline-flex; align-items: center; gap: 7px; }
.vertrauen svg { width: 17px; height: 17px; color: var(--gruen); }

/* Produktbild im Kopf: Browser + Handy */
.buehne { position: relative; padding-bottom: 28px; }
.browser { background: #fff; border-radius: 16px; box-shadow: var(--schatten-l), 0 0 0 1px rgba(11, 18, 32, .06); overflow: hidden; }
.browser-leiste { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #F3F5F8; border-bottom: 1px solid var(--linie); }
.browser-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #D5DAE1; }
.browser-leiste em { margin-left: 14px; flex: 1; max-width: 300px; font-style: normal; font-size: 12px; color: var(--leise); background: #fff; border-radius: 7px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--linie); }
.browser img { width: 100%; }
.handy {
  background: #0B1220; border-radius: 30px; padding: 7px; box-shadow: var(--schatten-l), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.handy img { border-radius: 24px; width: 100%; }
.buehne .handy { position: absolute; width: 31%; right: -10px; bottom: 0; }
@media (max-width: 640px) { .buehne .handy { width: 36%; right: -6px; } }
.schwebend {                   /* kleines Kärtchen, das am Bild klebt */
  position: absolute; left: -14px; bottom: 54px; display: flex; align-items: center; gap: 11px;
  background: #fff; border-radius: 14px; padding: 11px 15px; box-shadow: var(--schatten-l), 0 0 0 1px rgba(11, 18, 32, .05);
  font-size: 13px; color: var(--leise); line-height: 1.35;
}
.schwebend b { display: block; color: var(--tinte); font-size: 14px; }
.schwebend .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--gruen-hell); color: var(--gruen); display: grid; place-items: center; }
.schwebend .ic svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .schwebend { left: 8px; bottom: 18px; } }

/* ── Kennzahlenleiste ───────────────────────────────────────────────── */
.leiste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linie); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--schatten-s), 0 0 0 1px var(--linie); }
@media (min-width: 900px) { .leiste { grid-template-columns: repeat(4, 1fr); } }
.leiste > div { background: #fff; padding: 22px 24px; }
.leiste b { display: block; font-size: 22px; font-weight: 800; color: var(--tinte); letter-spacing: -0.02em; }
.leiste span { font-size: 14px; color: var(--leise); }

/* ── Karten und Raster ─────────────────────────────────────────────── */
.karte { background: #fff; border-radius: var(--r-l); padding: 28px; box-shadow: var(--schatten-s), 0 0 0 1px var(--linie); }
@media (min-width: 640px) { .karte { padding: 32px; } }
.karte .h3 { margin-top: 18px; }
.karte p { margin-top: 8px; color: var(--leise); font-size: 15.5px; }
.symbol { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--blau-hell); color: var(--blau); flex: none; }
.symbol svg { width: 22px; height: 22px; }
.symbol.gruen { background: var(--gruen-hell); color: var(--gruen); }
.symbol.violett { background: var(--violett-hell); color: var(--violett); }
.symbol.neu-f { background: var(--neu-hell); color: var(--neu); }
.raster-2, .raster-3, .raster-4 { display: grid; gap: 20px; }
@media (min-width: 720px) { .raster-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; } .raster-3, .raster-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .raster-3 { grid-template-columns: repeat(3, 1fr); } .raster-4 { grid-template-columns: repeat(4, 1fr); } }

/* Bento: grosse und kleine Kacheln gemischt */
.bento { display: grid; gap: 20px; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(6, 1fr); gap: 24px; } .bento > .b2 { grid-column: span 2; } .bento > .b3 { grid-column: span 3; } .bento > .b4 { grid-column: span 4; } }
.bento .karte { display: flex; flex-direction: column; }
.bento .bild-unten { margin-top: auto; padding-top: 24px; }
.kachel-bild { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--linie); background: var(--grau); }
.kachel-bild img { width: 100%; }

/* ── Vorstellung: Text neben Bild ───────────────────────────────────── */
.vorstellung { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .vorstellung { grid-template-columns: 1fr 1.1fr; gap: 72px; } .vorstellung.umgekehrt > :first-child { order: 2; } }
.vorstellung + .vorstellung { margin-top: 96px; }
.punkte { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.punkte li { display: flex; gap: 14px; align-items: flex-start; }
.punkte li .symbol { width: 38px; height: 38px; border-radius: 11px; }
.punkte li .symbol svg { width: 19px; height: 19px; }
.punkte b { display: block; color: var(--tinte); font-size: 16px; font-weight: 700; }
.punkte p { font-size: 15px; color: var(--leise); margin-top: 2px; }
.hinweiszeile { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 13.5px; color: var(--leise); background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 7px 13px; border-radius: 999px; }
.hinweiszeile svg { width: 16px; height: 16px; color: var(--blass); }

/* ── Reiter (Rollen) ───────────────────────────────────────────────── */
.reiter { display: inline-flex; gap: 4px; background: var(--grau-2); padding: 5px; border-radius: 14px; margin-bottom: 36px; flex-wrap: wrap; }
.reiter button { font: inherit; font-size: 15px; font-weight: 700; color: var(--leise); background: transparent; border: 0; padding: 10px 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.reiter button svg { width: 17px; height: 17px; }
.reiter button.an { background: #fff; color: var(--tinte); box-shadow: var(--schatten-s); }
.reiter-flaeche { display: none; }
.reiter-flaeche.an { display: block; animation: auf .35s ease; }
@keyframes auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Bühne für Bildschirmfotos ─────────────────────────────────────── */
.bildflaeche { position: relative; border-radius: var(--r-xl); padding: 28px; background: linear-gradient(140deg, var(--blau-hell), #F4F1FF 55%, var(--grau)); overflow: hidden; }
@media (min-width: 640px) { .bildflaeche { padding: 44px; } }
.bildflaeche.gruen { background: linear-gradient(140deg, var(--gruen-hell), #F0FAF6 55%, var(--grau)); }
.bildflaeche.violett { background: linear-gradient(140deg, var(--violett-hell), #F8F6FF 55%, var(--grau)); }
.bildflaeche .browser { position: relative; }
.zwei-handys { display: flex; gap: 18px; justify-content: center; align-items: flex-end; }
.zwei-handys .handy { width: min(46%, 250px); }
.zwei-handys .handy:nth-child(2) { margin-bottom: 30px; }

/* ── Schritte ───────────────────────────────────────────────────────── */
.schritte { display: grid; gap: 20px; counter-reset: s; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.schritt { position: relative; }
.schritt .nr { width: 44px; height: 44px; border-radius: 50%; background: var(--tinte); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 17px; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--linie); }
.schritt .h3 { margin-top: 22px; }
@media (min-width: 900px) {
  .schritte .schritt:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 64px; right: -10px; height: 2px; background: repeating-linear-gradient(90deg, var(--linie) 0 8px, transparent 8px 14px); }
}

/* ── Gewerbe-Wolke ─────────────────────────────────────────────────── */
.wolke { display: flex; flex-wrap: wrap; gap: 10px; }
.wolke.mitte { justify-content: center; }
.wolke span { background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--tinte-2); }

/* ── Stimmen ───────────────────────────────────────────────────────── */
.stimmen { display: grid; gap: 20px; }
@media (min-width: 760px) { .stimmen { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .stimmen { grid-template-columns: repeat(3, 1fr); } .stimmen .stimme:nth-child(4), .stimmen .stimme:nth-child(5) { grid-column: span 1; } }
.stimme { display: flex; flex-direction: column; }
.stimme .zeichen { width: 30px; height: 30px; color: var(--blau-rand); }
.stimme blockquote { margin: 14px 0 0; font-size: 15.5px; color: var(--tinte-2); line-height: 1.65; }
.stimme blockquote .rest { display: none; }
.stimme.offen blockquote .rest { display: inline; }
.stimme.offen blockquote .pkt { display: none; }
.stimme .mehr { margin-top: 10px; align-self: flex-start; font: inherit; font-size: 14px; font-weight: 700; color: var(--blau); background: none; border: 0; padding: 0; cursor: pointer; }
.stimme footer { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 12px; }
.stimme footer .av { width: 40px; height: 40px; border-radius: 50%; background: var(--blau-hell); color: var(--blau); display: grid; place-items: center; flex: none; }
.stimme footer .av svg { width: 20px; height: 20px; }
.stimme footer b { display: block; color: var(--tinte); font-size: 15px; }
.stimme footer span { font-size: 13.5px; color: var(--leise); }
.stimme .sterne { display: flex; gap: 2px; color: #F59E0B; }
.stimme .sterne svg { width: 16px; height: 16px; }

/* ── Dunkle Fläche (nie randlos) ───────────────────────────────────── */
.dunkel {
  position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--tinte); color: #CBD5E1;
  padding: 48px 28px;
  background-image: radial-gradient(600px 300px at 90% 0%, rgba(37, 99, 235, .35), transparent 65%), radial-gradient(500px 280px at 0% 100%, rgba(79, 70, 229, .22), transparent 60%);
}
@media (min-width: 640px) { .dunkel { padding: 72px 64px; } }
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .lead { color: #B6C2D3; }
.dunkel .vertrauen { color: #94A3B8; justify-content: center; }
.dunkel .vertrauen svg { color: #34D399; }

/* ── Seitenkopf der Unterseiten (überall gleich) ───────────────────── */
.seitenkopf { position: relative; overflow: hidden; padding: 64px 0 56px; background:
  radial-gradient(800px 380px at 80% -20%, rgba(37, 99, 235, .12), transparent 60%), linear-gradient(#fff, var(--grau)); border-bottom: 1px solid var(--linie-2); }
.seitenkopf::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(11, 18, 32, .07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }
@media (min-width: 640px) { .seitenkopf { padding: 88px 0 72px; } }
.seitenkopf .wrap { position: relative; }
.seitenkopf .lead { margin-top: 18px; max-width: 640px; }
.seitenkopf.mitte .lead { margin-left: auto; margin-right: auto; }
.seitenkopf .knoepfe { margin-top: 30px; }
.krume { font-size: 13.5px; color: var(--blass); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.seitenkopf.mitte .krume { justify-content: center; }
.krume a { text-decoration: none; color: var(--leise); }
.krume a:hover { color: var(--tinte); }

/* ── Preise ────────────────────────────────────────────────────────── */
.umschalter { display: inline-flex; gap: 4px; background: #fff; padding: 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-s); margin-top: 30px; }
.umschalter button { font: inherit; font-weight: 700; font-size: 14.5px; border: 0; background: transparent; padding: 10px 20px; border-radius: 999px; cursor: pointer; color: var(--leise); display: inline-flex; align-items: center; gap: 8px; }
.umschalter button.an { background: var(--tinte); color: #fff; }
.umschalter .rabatt { font-size: 11.5px; font-weight: 800; color: var(--gruen); background: var(--gruen-hell); padding: 2px 8px; border-radius: 999px; }
.umschalter button.an .rabatt { background: rgba(52, 211, 153, .18); color: #6EE7B7; }
.tarife { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 760px) { .tarife { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tarife { grid-template-columns: repeat(4, 1fr); } }
.tarif { position: relative; display: flex; flex-direction: column; }
.tarif.beliebt { box-shadow: 0 0 0 2px var(--blau), var(--schatten-l); }
.tarif .band { position: absolute; top: -13px; left: 28px; background: var(--blau); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; }
.tarif h3 { font-size: 20px; }
.tarif .fuer { font-size: 14.5px; color: var(--leise); margin-top: 6px; min-height: 44px; }
.preis { margin-top: 20px; display: flex; align-items: baseline; gap: 6px; }
.preis b { font-size: 44px; font-weight: 800; color: var(--tinte); letter-spacing: -0.04em; line-height: 1; }
.preis > span { color: var(--leise); font-size: 15px; }
.jahr-hinweis { font-size: 13.5px; color: var(--gruen); font-weight: 600; margin-top: 8px; min-height: 20px; }
.tarif ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 11px; font-size: 15px; }
.tarif li { display: flex; gap: 10px; align-items: flex-start; }
.tarif li svg { width: 18px; height: 18px; color: var(--gruen); flex: none; margin-top: 3px; }
.tarif .knopf { margin-top: auto; width: 100%; }
.preis-nur-jahr { display: none; }
body.jaehrlich .preis-nur-monat { display: none; }
body.jaehrlich .preis-nur-jahr { display: inline; }
.alles-drin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .alles-drin { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .alles-drin { grid-template-columns: repeat(4, 1fr); } }
.alles-drin > span { display: flex; gap: 10px; align-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); border-radius: 12px; padding: 13px 14px; font-size: 14.5px; font-weight: 600; color: var(--tinte-2); }
.alles-drin > span > svg { width: 18px; height: 18px; color: var(--gruen); flex: none; }
.alles-drin > span.ist-neu { background: var(--neu-hell); box-shadow: inset 0 0 0 1px var(--neu-rand); }
.alles-drin > span.ist-neu > svg { color: var(--neu); }
.alles-drin > span > .neu { margin-left: auto; flex: none; }

/* ── Fragen (Akkordeon) ────────────────────────────────────────────── */
.fragen { display: grid; gap: 12px; }
.fragen details { background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linie); }
.fragen details[open] { box-shadow: inset 0 0 0 1px var(--blau-rand), var(--schatten-s); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-weight: 700; color: var(--tinte); font-size: 16.5px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--grau); display: grid; place-items: center; flex: none; transition: transform .2s, background .2s; }
.fragen summary .plus svg { width: 16px; height: 16px; color: var(--leise); }
.fragen details[open] summary .plus { transform: rotate(45deg); background: var(--blau-hell); }
.fragen .antwort { padding: 0 22px 22px; color: var(--text); font-size: 15.5px; }
.fragen .antwort p + p { margin-top: 10px; }
/* Die Fragen stehen so breit wie jede andere Seite; die Antwort bricht trotzdem
   nach einer lesbaren Zeilenlänge um (02.10.2026). */
.fragen .antwort p { max-width: 72ch; }

/* ── Fliesstext (Rechtliches, Ratgeber) ────────────────────────────── */
.fliesstext { font-size: 17px; line-height: 1.75; color: var(--text); max-width: 72ch; }
.fliesstext h2 { font-size: 1.55rem; margin: 2.2em 0 .6em; }
.fliesstext h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; }
.fliesstext h2:first-child, .fliesstext h3:first-child { margin-top: 0; }
.fliesstext p { margin: 0 0 1.05em; }
.fliesstext ul, .fliesstext ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.fliesstext li { margin: .35em 0; }
.fliesstext li::marker { color: var(--blau); }
.fliesstext a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blau-rand); }
.fliesstext strong { color: var(--tinte); }
.fliesstext table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 1.4em; }
.fliesstext th, .fliesstext td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; color: var(--leise); margin-top: 18px; }
.seitenkopf.mitte .artikel-meta { justify-content: center; }
.kategorie { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blau); background: var(--blau-hell); padding: 4px 10px; border-radius: 999px; }
.mit-seite { display: grid; gap: 48px; }
@media (min-width: 1000px) { .mit-seite { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.seitenkasten { position: sticky; top: 92px; }

/* Ratgeber-Karten */
.beitrag { text-decoration: none; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.beitrag:hover { transform: translateY(-2px); box-shadow: var(--schatten), 0 0 0 1px var(--blau-rand); }
.beitrag .h3 { margin-top: 14px; }
.beitrag p { flex: 1; }
.beitrag .unten { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--blass); }
.beitrag .bildchen { height: 140px; margin: -28px -28px 22px; border-radius: var(--r-l) var(--r-l) 0 0; display: grid; place-items: center; }
@media (min-width: 640px) { .beitrag .bildchen { margin: -32px -32px 24px; } }
.beitrag .bildchen svg { width: 46px; height: 46px; }
/* Vorschaubild statt Symbol (02.10.2026): Ausschnitt aus Vorlage oder App, oben
   links ausgerichtet, damit Titel und Kopf des Blatts sichtbar bleiben. */
.beitrag .bildchen.vorschau { display: block; height: 168px; padding: 16px 18px 0; background: var(--linie-2); overflow: hidden; }
.beitrag .bildchen.vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 6px 6px 0 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 18px rgba(15, 23, 42, .10); }
/* Das Etikett so breit wie das Wort — in der Flex-Spalte zog es sich sonst über die ganze Karte. */
.beitrag .kategorie { align-self: flex-start; }

/* ── Formulare (nur Ansicht) ───────────────────────────────────────── */
.feld { display: grid; gap: 7px; }
.feld label { font-size: 14px; font-weight: 700; color: var(--tinte); }
.feld input, .feld select, .feld textarea { font: inherit; font-size: 16px; padding: 13px 15px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px var(--linie); background: #fff; color: var(--tinte); width: 100%; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blau); }
.felder { display: grid; gap: 18px; }
@media (min-width: 640px) { .felder.zwei { grid-template-columns: 1fr 1fr; } }
.kasten-hinweis { font-size: 13.5px; color: var(--leise); }

/* Anmelden / Registrieren */
.anmelde-seite { min-height: 100vh; display: grid; background: var(--grau); }
@media (min-width: 1000px) { .anmelde-seite { grid-template-columns: 1fr 1fr; } }
.anmelde-form { display: flex; flex-direction: column; justify-content: center; padding: 40px 20px; }
.anmelde-form > div { width: 100%; max-width: 420px; margin: 0 auto; }
.anmelde-bild { display: none; position: relative; overflow: hidden; background: var(--tinte); color: #CBD5E1; padding: 64px;
  background-image: radial-gradient(600px 400px at 100% 0%, rgba(37, 99, 235, .4), transparent 60%), radial-gradient(500px 360px at 0% 100%, rgba(79, 70, 229, .25), transparent 60%); }
@media (min-width: 1000px) { .anmelde-bild { display: flex; flex-direction: column; justify-content: center; } }
.anmelde-bild h2 { color: #fff; font-size: 2.1rem; }

/* ── Fuss ──────────────────────────────────────────────────────────── */
.fuss { background: var(--tinte); color: #94A3B8; padding: 72px 0 32px; font-size: 15px; }
.fuss-raster { display: grid; gap: 40px; }
@media (min-width: 900px) { .fuss-raster { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.fuss .logo b { color: #fff; }
.fuss .logo b span { color: #7FA3DB; }
.fuss p { margin-top: 14px; max-width: 320px; line-height: 1.6; }
.fuss h4 { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.fuss a { text-decoration: none; color: #B6C2D3; }
.fuss a:hover { color: #fff; }
.fuss-unten { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13.5px; }
.schweiz { display: inline-flex; align-items: center; gap: 8px; }
.schweiz i { width: 16px; height: 16px; border-radius: 3px; background: #DC2626; position: relative; }
.schweiz i::before, .schweiz i::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.schweiz i::before { width: 9px; height: 3px; } .schweiz i::after { width: 3px; height: 9px; }

/* ── Erstellte Bilder (Rechnung, Rechte, Antrag) ──────────────────── */
.papier { background: #fff; border-radius: 16px; box-shadow: var(--schatten-l), 0 0 0 1px rgba(11, 18, 32, .05); overflow: hidden; max-width: 500px; margin: 0 auto; font-size: 13px; }
.papier .ob { padding: 22px 24px 14px; }
.papier .firm { display: flex; align-items: center; gap: 10px; }
.papier .firm i { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--blau), #4F46E5); }
.papier .firm b { display: block; color: var(--tinte); font-size: 14.5px; }
.papier .firm small { color: var(--leise); font-size: 11.5px; }
.papier .re { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: var(--leise); font-size: 12px; }
.papier .re b { display: block; color: var(--tinte); font-size: 16px; }
.pos { width: 100%; border-collapse: collapse; margin-top: 14px; }
.pos th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blass); padding: 6px 0; border-bottom: 1px solid var(--linie); }
.pos td { padding: 7px 0; border-bottom: 1px solid var(--linie-2); color: var(--text); }
.pos td:last-child, .pos th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pos tr.sum td { border: 0; padding-top: 10px; font-weight: 800; color: var(--tinte); }
.pos tr.mw td { border: 0; color: var(--blass); padding: 2px 0; }
.qr { display: flex; gap: 16px; align-items: center; border-top: 1px dashed var(--blass); padding: 16px 24px 20px; }
.qr svg { width: 88px; height: 88px; flex: none; }
.qr .zt { font-size: 11px; color: var(--leise); line-height: 1.55; }
.qr .zt b { display: block; color: var(--tinte); font-size: 11.5px; }
.ablauf { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.ablauf span { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 6px 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte-2); }
.ablauf span.ok { background: var(--gruen-hell); box-shadow: inset 0 0 0 1px #A7F3D0; color: #047857; }
.ablauf span.warn { background: var(--neu-hell); box-shadow: inset 0 0 0 1px var(--neu-rand); color: var(--neu); }
.ablauf em { font-style: normal; color: var(--blass); align-self: center; }

.ui-karte { background: #fff; border-radius: 14px; padding: 15px 17px; box-shadow: var(--schatten), 0 0 0 1px rgba(11, 18, 32, .05); font-size: 13.5px; }
.ui-karte .k { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blass); margin-bottom: 9px; }
.ui-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-zeile b { color: var(--tinte); display: block; font-size: 14px; }
.ui-zeile small { color: var(--leise); font-size: 12px; }
.ui-knopf { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 9px; }
.ui-knopf.ja { background: var(--blau); color: #fff; }
.ui-knopf.nein { box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte-2); background: #fff; }
.schalter { width: 34px; height: 20px; border-radius: 99px; background: var(--blau); position: relative; justify-self: center; }
.schalter::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.schalter.aus { background: #CBD5E1; }
.schalter.aus::after { right: auto; left: 3px; }
.rechte-tab { display: grid; grid-template-columns: 1fr 58px 58px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie-2); font-size: 13px; color: var(--tinte-2); }
.rechte-tab.kopfz { border: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blass); padding-top: 0; }
.rechte-tab.kopfz span { text-align: center; }



/* Fünf Karten im Dreierraster: die letzte über zwei Spalten — sonst steht
   eine Reihe halb leer (Befund der Prüfung vom 01.10.2026). */
@media (min-width: 1000px) { .raster-3 > .spanne-2 { grid-column: span 2; } }

/* Schmale Handys: Navigation enger, damit Logo, Knopf und Menü in 390px passen */
@media (max-width: 480px) {
  .nav-in { gap: 12px; }
  .nav-rechts .knopf { padding: 10px 14px; font-size: 14px; }
  .logo b { font-size: 17px; }
  .logo svg { width: 26px; height: 26px; }
}
html { overflow-x: clip; }
.alles-drin > span { min-width: 0; }
@media (max-width: 560px) { .alles-drin { grid-template-columns: 1fr; } }

/* ── Nachbesserungen nach dem ersten Ansehen ───────────────────────── */
/* Ein Rasterkind ist sonst so breit wie sein breitester Inhalt — die
   nicht umbrechende «Neu»-Zeile schob am Handy den ganzen Kopf über den Rand. */
.held-raster > *, .vorstellung > *, .bento > *, .raster-2 > *, .raster-3 > *, .raster-4 > * { min-width: 0; }
.held .h1 { font-size: clamp(2.3rem, 4.3vw, 3.55rem); }
@media (min-width: 1000px) { .held-raster { grid-template-columns: 1.08fr 1fr; } }
@media (max-width: 640px) { .leiste > div { padding: 18px 16px; } .leiste b { font-size: 18px; } .leiste span { font-size: 13.5px; } }
/* Fünf Stimmen: die letzte Reihe mittig statt mit einem Loch rechts */
@media (min-width: 1100px) {
  .stimmen { display: flex; flex-wrap: wrap; justify-content: center; }
  .stimmen .stimme { flex: 0 1 calc((100% - 48px) / 3); }
}

/* Funktionsumfang: eine Karte je Kategorie, darin eine ruhige Liste */
.kategorien { display: grid; gap: 24px; }
@media (min-width: 1000px) { .kategorien { grid-template-columns: repeat(2, 1fr); } }
.kategorie-karte.ist-neu { box-shadow: var(--schatten-s), 0 0 0 1px var(--neu-rand); background: linear-gradient(180deg, #FFFCF6, #fff 40%); }
.kat-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--linie-2); }
.kat-liste { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 16px; }
.kat-liste li { display: flex; gap: 12px; align-items: flex-start; }
.kat-liste li > svg { width: 18px; height: 18px; color: var(--gruen); flex: none; margin-top: 3px; }
.kategorie-karte.ist-neu .kat-liste li > svg { color: var(--neu); }
.kat-liste b { display: block; color: var(--tinte); font-size: 15.5px; }
.kat-liste p { margin-top: 3px; font-size: 14.5px; color: var(--leise); }
/* Ferien-Bild: Handy und Karten nebeneinander, am Handy untereinander */
.ferien-bild { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 18px; align-items: end; }
@media (max-width: 560px) { .ferien-bild { grid-template-columns: 1fr; } .ferien-bild > div:first-child { width: 220px; margin: 0 auto; } }
/* Kategorien als Spalten statt Raster: ungleich lange Karten lassen keine Löcher */
@media (min-width: 1000px) { .kategorien { display: block; columns: 2; column-gap: 24px; } .kategorien > .karte { break-inside: avoid; margin-bottom: 24px; } }
@media (max-width: 560px) {
  .papier .re > div:last-child { text-align: left !important; }
  .ablauf em { display: none; }
}


/* ── Ergänzungen für die echte Website ─────────────────────────────── */
.nur-leser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.meldung { border-radius: var(--r); padding: 14px 18px; font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.meldung svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.meldung.ok { background: var(--gruen-hell); color: #065F46; box-shadow: inset 0 0 0 1px #A7F3D0; }
.meldung.fehler { background: #FEF2F2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }
.meldung.hinweis { background: var(--neu-hell); color: #78350F; box-shadow: inset 0 0 0 1px var(--neu-rand); }
.meldung.info { background: var(--blau-hell); color: #1E3A8A; box-shadow: inset 0 0 0 1px var(--blau-rand); }
.meldung a { color: inherit; font-weight: 700; }
.feld .fehler-text { font-size: 13.5px; color: #B91C1C; }
.feld input.ist-fehler, .feld select.ist-fehler, .feld textarea.ist-fehler { box-shadow: inset 0 0 0 2px #F87171; }
.haken-zeile { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.haken-zeile input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blau); flex: none; }
.haken-zeile a { color: var(--blau); }
.sprache-menue a { display: block; }
.nav-panel .sprachen { display: flex; gap: 8px; margin-top: 16px; }
.nav-panel .sprachen a { flex: 1; text-align: center; border: 0; border-radius: 10px; padding: 10px 0; font-size: 14px; box-shadow: inset 0 0 0 1px var(--linie); }
.nav-panel .sprachen a.aktiv { background: var(--tinte); color: #fff; box-shadow: none; }
.nav-panel button.pwa { display: flex; width: 100%; gap: 8px; align-items: center; padding: 13px 4px; font: inherit; font-size: 17px; font-weight: 650; color: var(--tinte); background: none; border: 0; border-bottom: 1px solid var(--linie-2); cursor: pointer; }
.fliesstext .kasten { background: var(--grau); border-radius: var(--r); padding: 18px 20px; margin: 0 0 1.4em; }
.fliesstext .kasten p:last-child { margin-bottom: 0; }
.fliesstext blockquote { border-left: 3px solid var(--blau-rand); margin: 1.2em 0; padding: .2em 0 .2em 1em; color: var(--leise); }
.fliesstext code { background: var(--grau-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; background: #25D366; border-radius: 50%; box-shadow: 0 8px 24px -4px rgba(37,211,102,.5); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
.whatsapp:hover { transform: scale(1.08); }
.whatsapp svg { width: 30px; height: 30px; }
.filter-zeile { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 32px; scrollbar-width: none; }
.filter-zeile::-webkit-scrollbar { display: none; }
.filter-zeile a { flex: none; text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--tinte-2); background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.filter-zeile a.an { background: var(--tinte); color: #fff; box-shadow: none; }
.filter-zeile a span { opacity: .6; margin-left: 4px; }

/* Ratgeber-Artikel: Titel kleiner als ein Seitentitel, Seitenleiste */
.artikel-titel { max-width: 860px; margin-top: 16px; font-size: clamp(2rem, 4vw, 3.1rem); }
.seitenkasten { display: grid; gap: 20px; align-content: start; }
.karte.tief { background: var(--tinte); color: #CBD5E1; box-shadow: none; }
.karte.tief .h3 { color: #fff; margin: 0; }
.karte.tief p { color: #B6C2D3; margin: 10px 0 0; }
.karte.tief .knopf { margin-top: 20px; width: 100%; }
.karte.weitere .h3 { margin: 0 0 6px; }
.karte.weitere a { display: block; text-decoration: none; padding: 12px 0; border-top: 1px solid var(--linie-2); }
.karte.weitere a b { display: block; color: var(--tinte); font-size: 15px; line-height: 1.35; }
.karte.weitere a span { display: block; color: var(--leise); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
.karte.weitere a:hover b { color: var(--blau); }
/* Rechtliches: Seitenleiste mit den drei Dokumenten */
.recht-liste .h3 { margin: 0 0 10px; }
.recht-liste a { display: block; padding: 10px 0; border-top: 1px solid var(--linie-2); text-decoration: none; font-weight: 600; color: var(--tinte-2); }
.recht-liste a.an { font-weight: 800; color: var(--blau); }
.fliesstext .stand { font-size: 15px; color: var(--leise); background: var(--grau); border-radius: var(--r); padding: 14px 18px; margin: 0 0 2em; }
/* Quellen am Ende eines Ratgeber-Artikels (Gesetzestexte, GAV) */
.fliesstext .quellen { font-size: 14px; line-height: 1.6; color: var(--leise); border-top: 1px solid var(--linie); padding-top: 16px; margin-top: 2.2em; }
.fliesstext .person { display: flex; gap: 18px; align-items: center; margin-bottom: 2em; }
.fliesstext .person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.fliesstext .person span { color: var(--leise); }
.karte.weitere p { margin: 0 0 14px; color: var(--leise); font-size: 14.5px; }
.karte.weitere a.textlink { display: inline-flex; border: 0; padding: 0; }
/* Kontakt */
.kontakt-raster { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.kanaele { display: grid; gap: 16px; }
.karte.kanal { display: flex; gap: 16px; align-items: flex-start; padding: 24px; }
.karte.kanal > div { min-width: 0; }
.karte.kanal b { color: var(--tinte); display: block; }
.karte.kanal a { color: var(--blau); font-weight: 700; text-decoration: none; font-size: 17px; overflow-wrap: anywhere; }
.karte.kanal span { color: var(--tinte-2); }
.karte.kanal p { margin-top: 4px; font-size: 14px; }
.kanal-faq { padding: 24px; }
.kanal-faq b { color: var(--tinte); }
.kanal-faq .unten { margin-top: 12px; }
.formular-titel { margin: 0 0 20px; font-size: 1.35rem; }
.knopf.breit { width: 100%; padding: 16px 24px; }
.feld .fehler-text, .felder > .fehler-text { margin: 0; }
.abschnitt .meldung { margin-bottom: 28px; }
/* Anmelden / Registrieren — Ergänzungen zum Grundgerüst oben */
.anmelde-form .logo { margin-bottom: 40px; }
.anmelde-form .lead { margin-top: 10px; font-size: 16px; }
.anmelde-form form.felder { margin-top: 32px; }
.anmelde-form .unter { margin-top: 28px; text-align: center; color: var(--leise); }
.feld .label-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feld .label-zeile a { color: var(--blau); font-weight: 600; font-size: 14px; text-decoration: none; }
.anmelde-bild .punkte .symbol { background: rgba(255,255,255,.08); color: #93C5FD; }
.anmelde-bild .punkte b { color: #fff; }
.anmelde-bild .punkte p { color: #94A3B8; }
.anmelde-bild figure { margin: 48px 0 0; padding: 24px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.anmelde-bild blockquote { margin: 0; color: #E2E8F0; font-size: 15.5px; line-height: 1.6; }
.anmelde-bild figcaption { margin-top: 12px; font-size: 13.5px; color: #94A3B8; }
.anmelde-form .meldung { margin-top: 24px; }

/* ── Handy und Tablet zuerst (01.10.2026, nach den Aufnahmen bei 320px) ── */
/* Bilder mit width/height-Attribut (gegen Springen beim Laden) behalten sonst
   die Attributhöhe: das Handy im Startseitenkopf wurde 844px hoch und lag
   über Titel und Knopf. */
img { height: auto; }
/* Lange deutsche Wörter («Handwerksbetrieb», «Geschäftsbedingungen») passen
   bei 320px nicht in eine Zeile der Seitenschrift. Erst kleiner setzen, dann
   trennen — und als letzte Sicherung umbrechen statt abschneiden. */
h1, h2, h3, .h1, .h2, .h3 { overflow-wrap: break-word; }
/* Trennen nur im grossen Titel — in Zwischentiteln trennte der Browser «Ex-cel-Liste». */
h1, .h1 { -webkit-hyphens: auto; hyphens: auto; }
/* Den Slogan im Startseitenkopf nie trennen: «Handwerksbetrieb.» passt fett von 320 bis
   1920px in seine Zeile (gemessen 02.10.2026, am knappsten bei 1280px: 461 von 540px).
   Mit Trennung füllte der Browser die erste Zeile und schrieb «Handwerksbe-trieb.». */
.held .h1 { -webkit-hyphens: manual; hyphens: manual; }
.h1, .held .h1 { font-size: clamp(1.75rem, 8.6vw, 3.55rem); }
.h2 { font-size: clamp(1.55rem, 6.6vw, 2.7rem); }
@media (min-width: 640px) { .h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); } .h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); } }
@media (min-width: 1000px) { .held .h1 { font-size: clamp(2.3rem, 4.3vw, 3.55rem); } }
.knopf { max-width: 100%; }
@media (max-width: 480px) { .knopf { white-space: normal; line-height: 1.25; text-align: center; } }
/* Navigation: der Testen-Knopf bleibt einzeilig, auch bei 320px */
.nav .knopf { white-space: nowrap; line-height: 1; }
/* Knopfgruppen am Handy: volle Breite, gleich breit, Text auf einer Zeile */
@media (max-width: 480px) {
  .knoepfe > .knopf { flex: 1 1 100%; }
  .knopf.gross { padding-left: 18px; padding-right: 18px; }
}
/* WhatsApp am Handy erst nach dem ersten Bildschirm — beim Öffnen lag die
   Blase genau über dem Testen-Knopf. website.js setzt .sichtbar. */
@media (max-width: 999px) {
  .whatsapp { width: 50px; height: 50px; right: 14px; bottom: 14px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
  .whatsapp.sichtbar { opacity: 1; pointer-events: auto; transform: none; }
  .whatsapp svg { width: 26px; height: 26px; }
}
/* Reiter am Handy nebeneinander, gleich breit — nicht als zwei Zeilen */
@media (max-width: 480px) {
  .reiter { display: flex; width: 100%; flex-wrap: nowrap; }
  .reiter button { flex: 1 1 0; justify-content: center; text-align: center; padding: 10px 8px; font-size: 14px; line-height: 1.2; }
}
@media (max-width: 380px) { .reiter button svg { display: none; } }
/* Sehr schmale Handys (unter 360px, z.B. iPhone SE 1. Generation): Logo,
   Testen-Knopf und Menü passen nicht nebeneinander — das Menü-Symbol lag am
   Rand. Der Knopf steht im aufgeklappten Menü und direkt darunter im Kopf. */
@media (max-width: 359px) {
  .nav-rechts > .knopf { display: none; }
  .nav-in { gap: 8px; }
}
/* Preis-Umschalter am Handy: zwei gleich breite Hälften, der Rabatt unter «Jährlich» */
@media (max-width: 480px) {
  .umschalter { display: flex; width: 100%; }
  .umschalter button { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 8px; line-height: 1.2; }
  .umschalter .rabatt { white-space: nowrap; }
}

/* ── Karussell der Mitarbeiter-App (01.10.2026) ─────────────────────── */
/* Fünf Handys im Raum: Mitte gross und scharf, die Nachbarn gedreht und
   blasser. Stellung und Winkel wie in der Galerie der alten Startseite. */
.karussell { --kb: 270px; --nah: 250px; --fern: 430px; margin-top: 28px; }
.karussell-knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.karussell-knoepfe button { font: inherit; font-size: 14.5px; font-weight: 700; padding: 9px 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: #fff; color: var(--tinte-2); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-s); transition: background .2s, color .2s; }
.karussell-knoepfe button:hover { color: var(--tinte); }
.karussell-knoepfe button.an { background: var(--blau); color: #fff; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .7); }
.karussell-buehne { position: relative; height: calc(var(--kb) * 2.164 + 48px); perspective: 1600px; overflow: hidden; touch-action: pan-y; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  background: radial-gradient(closest-side, rgba(37, 99, 235, .10), transparent) center 45% / 70% 80% no-repeat; }
.karussell-handy { position: absolute; left: 50%; top: 16px; width: var(--kb); padding: 7px; cursor: pointer;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s, filter .45s; will-change: transform; }
.karussell-handy img { width: 100%; height: auto; border-radius: 24px; pointer-events: none; }
.karussell-handy[data-pos="0"]  { z-index: 3; transform: translateX(-50%); cursor: default; }
.karussell-handy[data-pos="1"]  { z-index: 2; transform: translateX(calc(-50% + var(--nah))) rotateY(-25deg) scale(.84); opacity: .8; filter: saturate(.75) brightness(.92); }
.karussell-handy[data-pos="-1"] { z-index: 2; transform: translateX(calc(-50% - var(--nah))) rotateY(25deg) scale(.84); opacity: .8; filter: saturate(.75) brightness(.92); }
.karussell-handy[data-pos="2"]  { z-index: 1; transform: translateX(calc(-50% + var(--fern))) rotateY(-32deg) scale(.7); opacity: .4; filter: saturate(.6) brightness(.9); }
.karussell-handy[data-pos="-2"] { z-index: 1; transform: translateX(calc(-50% - var(--fern))) rotateY(32deg) scale(.7); opacity: .4; filter: saturate(.6) brightness(.9); }
.karussell-hinweis { display: none; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--blass); }
.karussell-hinweis svg { width: 15px; height: 15px; }
/* Tablet: etwas kleiner, die äusseren nur noch angedeutet */
@media (max-width: 999px) { .karussell { --kb: 240px; --nah: 210px; --fern: 360px; } }
/* Handy: ein Handy in der Mitte, die Nachbarn schauen am Rand hervor; wischen */
@media (max-width: 640px) {
  .karussell { --kb: min(58vw, 240px); --nah: min(52vw, 220px); --fern: 100vw; }
  .karussell-buehne { margin: 0 -20px; }
  .karussell-handy[data-pos="2"], .karussell-handy[data-pos="-2"] { opacity: 0; }
  .karussell-knoepfe { gap: 6px; }
  .karussell-knoepfe button { padding: 8px 12px; font-size: 13.5px; }
  .karussell-hinweis { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .karussell-handy { transition: none; } }
/* Die vier Punkte unter dem Karussell: im Raster statt als lange Spalte */
.punkte.punkte-raster { margin-top: 40px; }
@media (min-width: 760px) { .punkte.punkte-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }
@media (min-width: 1100px) { .punkte.punkte-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Kundenstimmen am Handy als Wischbahn (01.10.2026) ──────────────── */
/* Immer genau eine Stimme; wischen, Pfeile oder Punkte. Ab 760px Raster. */
.schieber-steuerung { display: none; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; }
.schieber-pfeil { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-s);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.schieber-pfeil svg { width: 18px; height: 18px; }
.schieber-pfeil:disabled { opacity: .35; cursor: default; }
.schieber-punkte { display: flex; gap: 6px; }
.schieber-punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--linie); cursor: pointer; transition: width .25s, background .25s; }
.schieber-punkte button.an { width: 22px; background: var(--blau); }
@media (max-width: 759px) {
  .schieber .stimmen { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -20px; padding: 4px 20px 10px; scroll-padding: 0 20px; scrollbar-width: none; align-items: flex-start; }
  .schieber .stimmen::-webkit-scrollbar { display: none; }
  .schieber .stimmen > .stimme { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .schieber-steuerung { display: flex; }
}

/* ── Fusszeile am Handy (01.10.2026) ───────────────────────────────── */
/* Produkt, Hilfe und Rechtliches nebeneinander statt untereinander — die
   Fusszeile war am Handy fast so lang wie ein Abschnitt. */
@media (max-width: 899px) {
  .fuss { padding: 48px 0 28px; }
  .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 14px; }
  .fuss-raster > :first-child { grid-column: 1 / -1; }
  .fuss h4 { font-size: 11.5px; letter-spacing: .03em; margin-bottom: 10px; overflow-wrap: break-word; }
  .fuss ul { gap: 8px; font-size: 14px; line-height: 1.35; }
  .fuss li { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .fuss-unten { margin-top: 36px; }
}

/* ── SEO-Paket 1 (02.10.2026): zwei geteilte Bauteile ──────────────── */
/* Freigegeben im Entwurf docs/plans/mockups/2026-10-02-seo-vorlagen/.  */

/* Titelzeile über dem Slogan der Startseite: die eigentliche H1 für Google.
   Der Slogan darunter bleibt gross und sieht aus wie vorher. */
.held-titel { display: block; margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: var(--blau); max-width: 560px; }

/* Download-Kasten der Vorlagen-Seiten im Ratgeber: Symbol, Text, zwei Knöpfe. */
.vorlage-kasten { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin-bottom: 44px; }
.vorlage-kasten .text { flex: 1 1 240px; min-width: 0; }
.vorlage-kasten .text .h3 { margin: 0; }
.vorlage-kasten .text p { margin-top: 4px; }
.vorlage-kasten .knoepfe { flex: 0 1 auto; }

/* Im Fliesstext der Ratgeber-Artikel: Knopf, Handy- und Browserbild, Fragen. */
.fliesstext .knopf { color: #fff; text-decoration: none; }
.fliesstext .knopf.zweit { color: var(--tinte); }
.fliesstext figure { margin: 30px 0; }
.fliesstext figure.handy { max-width: 250px; margin-left: auto; margin-right: auto; }
.fliesstext .fragen { margin-top: 8px; }
.fliesstext .fragen .antwort p { margin: 0; }