/* ---------------------------------------------------------------------------
   ServyHub Website – Bausteine.

   Alle Farben, Radien, Abstände und Schatten kommen aus tokens.css
   (design/tokens.css). Hier stehen nur Ableitungen, die der Entwurf je Thema
   anders setzt (Bereichskarten dunkel satt mit weißem Text, Partner-Band) —
   im selben Dreiklang wie tokens.css: hell, data-theme="dark", System dunkel.
   --------------------------------------------------------------------------- */

:root, [data-theme="light"] {
  --cat-copy: var(--ink-muted);
  --cat-border: var(--border);
  --band-bg: var(--ink);
  --band-ink: var(--surface-page);
  --band-card: rgba(255, 255, 255, .08);
  --band-border: transparent;
  --price-ink: var(--cat-kleinanzeigen-ink);
  color-scheme: light;
}
[data-theme="dark"] {
  --cat-copy: rgba(255, 255, 255, .86);
  --cat-border: transparent;
  --tile-dunkel: rgba(255, 255, 255, .18);
  --band-bg: var(--surface-card);
  --band-ink: var(--ink);
  --band-card: var(--surface-raised);
  --band-border: var(--border);
  --price-ink: #7fe3ee;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-copy: rgba(255, 255, 255, .86);
    --cat-border: transparent;
    --tile-dunkel: rgba(255, 255, 255, .18);
    --band-bg: var(--surface-card);
    --band-ink: var(--ink);
    --band-card: var(--surface-raised);
    --band-border: var(--border);
    --price-ink: #7fe3ee;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--surface-page); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
img { max-width: 100%; display: block; }
svg.i { width: 20px; height: 20px; flex: none; }
svg.i.s16 { width: 16px; height: 16px; }
svg.i.s14 { width: 14px; height: 14px; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 2px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 50;
  background: var(--primary); color: var(--on-primary); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); font-weight: 700;
}
.skip-link:focus { top: var(--space-2); }

.wrap { width: min(1200px, 100% - 2 * var(--space-4)); margin-inline: auto; }
.muted { color: var(--ink-muted); }
.row { display: flex; align-items: center; }
.gap2 { gap: var(--space-2); } .gap3 { gap: var(--space-3); } .gap4 { gap: var(--space-4); }
.wrapflex { flex-wrap: wrap; }

/* -------------------------------------------------------------- Typografie */
.t-display, .t-h1, .t-h2, .t-h3 { color: var(--ink); }
.eyebrow {
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary-ink);
}
.lead { font-size: 19px; line-height: 30px; color: var(--ink-muted); }
.link {
  color: var(--primary-ink); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 4px;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose { font-size: 16px; line-height: 26px; max-width: 760px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: 24px; line-height: 30px; font-weight: 800; margin-top: var(--space-12); }
.prose h3 { font-size: 19px; line-height: 26px; font-weight: 700; margin-top: var(--space-8); }
.prose a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote {
  border-left: 4px solid var(--primary); padding: var(--space-2) var(--space-4);
  background: var(--primary-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-weight: 600;
}

/* ------------------------------------------------------------ Bedienelemente */
.btn {
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: 44px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-pop); }
.btn-grad { background: linear-gradient(90deg, var(--primary), var(--accent)); color: var(--on-primary); box-shadow: var(--shadow-pop); }
.btn-ghost { border: 1px solid var(--border); background: var(--surface-card); }
/* Zurückhaltend: für „Suchen“ – sichtbar, aber nicht lauter als der Inhalt. */
.btn-soft { background: var(--primary-soft); color: var(--primary-ink); }
.btn-soft:hover { filter: none; background: var(--surface-raised); }
.btn-ghost:hover { background: var(--surface-raised); filter: none; }
.btn-lg { height: 50px; }
.btn-block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { filter: brightness(.97); }
.chip.on, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current] {
  background: var(--primary); color: var(--on-primary);
}
/* Auswahlchips als echte Formularelemente: Checkbox/Radio, sichtbar ist das Label. */
.chipwahl { position: relative; display: inline-flex; }
.chipwahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chipwahl input:checked + .chip { background: var(--primary); color: var(--on-primary); }
.chipwahl input:focus-visible + .chip { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--on-primary); background: var(--c, var(--primary));
}
.tag {
  display: inline-flex; font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted);
}
/* Bewertungssterne immer im Token --star (gold), auch in fetten Kennzahlen. */
.stern { color: var(--star); }
.tag.neu { background: var(--cat-mitfahren-tint); color: var(--cat-mitfahren-ink); }

.card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
a.card { transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-2px); }

/* Formularfelder */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > span, .feld > label, .lab {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
}
.inp {
  height: 46px; border-radius: var(--radius-md); background: var(--surface-raised);
  display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--ink-muted);
  font-size: 14px; border: 1px solid transparent;
}
.inp:focus-within { border-color: var(--primary); }
.inp input, .inp select { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); height: 100%; font-size: 15px; }
.inp input::placeholder, .eingabe::placeholder { color: var(--ink-muted); }
.eingabe {
  width: 100%; min-height: 46px; border-radius: var(--radius-md); background: var(--surface-raised);
  border: 1px solid transparent; padding: 11px 14px; font-size: 15px; color: var(--ink);
}
.eingabe:focus { outline: none; border-color: var(--primary); }
textarea.eingabe { min-height: 140px; resize: vertical; line-height: 22px; }
.formular { display: grid; gap: var(--space-4); }
.formular .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.haken { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 20px; }
.haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.fehler { color: var(--danger); font-size: 13px; font-weight: 600; }
/* Unsichtbar für Menschen, ein Köder für Bots (formulare.py: homepage) */
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Kompakte Suche (404-Seite); die Suche im Kopf bringt header/header.css mit. */
.hsearch {
  flex: 0 1 190px; min-width: 120px; display: flex; align-items: center; gap: var(--space-2); height: 44px;
  padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--surface-raised);
  color: var(--ink-muted); font-size: 14px; border: 1px solid transparent;
}
.hsearch:focus-within { border-color: var(--primary); }
.hsearch input { border: 0; background: none; outline: none; width: 100%; min-width: 0; font-size: 14px; color: var(--ink); }
.hsearch input::placeholder { color: var(--ink-muted); }

/* ----------------------------------------------------------------- Sektionen */
.sec { padding-top: var(--space-16); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.sec-head h2, .h2 { font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.01em; }
.sec-head p { margin-top: 6px; }
.sec-head .eyebrow + h2 { margin-top: 6px; }

/* Seitenkopf der Unterseiten */
.seitenkopf { padding-top: var(--space-12); }
.seitenkopf h1 { font-size: 40px; line-height: 46px; font-weight: 800; letter-spacing: -.015em; margin-top: var(--space-2); }
.seitenkopf .lead { margin-top: var(--space-3); max-width: 720px; }
.brotkrumen { font-size: 14px; color: var(--ink-muted); }
.brotkrumen ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.brotkrumen li + li::before { content: "›"; margin-right: 6px; }
.brotkrumen a:hover { color: var(--ink); text-decoration: underline; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-ink); font-weight: 600; font-size: 15px; }

/* ---------------------------------------------------------------------- Hero */
.hero { padding-top: var(--space-16); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-12); align-items: center; }
.hero h1 { font-size: 60px; line-height: 64px; font-weight: 800; letter-spacing: -.025em; margin-top: 14px; }
.hero h1 em, .grad-text {
  font-style: normal; background: linear-gradient(90deg, var(--primary-ink), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { margin-top: var(--space-4); max-width: 520px; }
.bigsearch {
  margin-top: var(--space-8); display: flex; align-items: center; padding: 8px;
  border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.bigsearch .f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); height: 48px; color: var(--ink-muted); font-size: 15px; }
.bigsearch .f + .f { border-left: 1px solid var(--border); }
.bigsearch input { border: 0; outline: none; background: none; width: 100%; min-width: 0; color: var(--ink); font-size: 15px; height: 100%; }
.bigsearch input::placeholder { color: var(--ink-muted); }
.bigsearch .btn { height: 48px; }
.bigsearch:focus-within { border-color: var(--primary); }
.pop { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 14px; }
.stats { display: flex; gap: var(--space-8); margin-top: var(--space-8); flex-wrap: wrap; }
.stats b { display: block; font-size: 26px; line-height: 30px; font-weight: 800; }
.stats span { font-size: 13px; }

/* Kachel-Collage: Positionen aus dem Entwurf (560 × 500) in Prozent. */
.mosaic { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 500; margin-inline: auto; }
.m { position: absolute; border-radius: var(--radius-xl); overflow: hidden; color: #fff; transition: transform .2s ease; }
.m:hover { transform: translateY(-3px); }
.m1 { left: 0; top: 6%; width: 51.8%; height: 60%; background: linear-gradient(160deg, var(--cat-events), var(--cat-nachhilfe)); }
.m2 { left: 55.4%; top: 0; width: 44.6%; height: 40%; background: linear-gradient(160deg, var(--cat-servybill), var(--cat-kennenlernen)); }
.m3 { left: 55.4%; top: 44%; width: 44.6%; height: 52%; background: linear-gradient(160deg, var(--cat-sport), var(--cat-kleinanzeigen)); }
.m4 { left: 7.1%; top: 70%; width: 44.6%; height: 26%; background: linear-gradient(160deg, var(--cat-mitfahren), var(--cat-nachbarschaft)); }
.m .big { position: absolute; right: -20px; bottom: -24px; width: 170px; height: 170px; color: rgba(255, 255, 255, .22); }
.m .lbl { position: absolute; left: 20px; top: 20px; right: 16px; font-weight: 800; font-size: 20px; line-height: 26px; }
.m .lbl small { display: block; font-weight: 500; font-size: 13px; line-height: 18px; opacity: .9; }
.float {
  position: absolute; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 12px 14px; display: flex; gap: 10px; align-items: center; font-size: 13px; line-height: 18px; color: var(--ink);
}
.float b { display: block; font-size: 14px; }
.float.f1 { left: 58.9%; top: 84%; max-width: 230px; }
.float.f2 { left: 19.6%; top: 56.4%; }
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--c, var(--primary)); }
.avs { display: flex; }
.avs .av { width: 28px; height: 28px; border: 2px solid var(--surface-card); margin-left: -8px; font-size: 11px; }
.avs .av:first-child { margin-left: 0; }

/* ------------------------------------------------------------ Bereichskarten */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.cat {
  position: relative; padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--cat-border);
  background-color: var(--c-tint); background-image: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  min-height: 178px; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.tile {
  width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; color: #fff;
  /* Hell: Bereichsfarbe. Dunkel: weiß, 18 % über der satten Kartenfläche (Entwurf). */
  background: var(--tile-dunkel, var(--c)); flex: none;
}
.tile svg { width: 26px; height: 26px; }
.cat h3 { font-size: 20px; line-height: 26px; font-weight: 800; margin-top: var(--space-4); color: var(--c-ink); }
.cat p { font-size: 14px; line-height: 20px; color: var(--cat-copy); margin-top: 4px; max-width: 240px; }
.cat .meta { margin-top: auto; padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--cat-copy); }
.go { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; color: var(--c-ink); }
.go svg { width: 14px; height: 14px; }
.mini { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); flex: none; }
.mini svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Empfehlungen */
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.recs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.rec { overflow: hidden; display: flex; flex-direction: column; position: relative; }
.rec .img { height: 160px; position: relative; display: grid; place-items: center; color: rgba(255, 255, 255, .35); background: linear-gradient(150deg, var(--c), var(--c2, var(--c))); }
.rec .img > svg { width: 84px; height: 84px; }
.rec .img .badge { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.fav {
  position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, .28); display: grid; place-items: center; color: #fff; z-index: 2;
}
.fav svg { width: 18px; height: 18px; }
.fav[aria-pressed="true"] svg { fill: currentColor; }
/* Echtes Bild (Veranstaltungen aus Events): füllt die Fläche, Marken oben rechts */
.rec .img { overflow: hidden; }
.rec .img > img.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec .img .badge, .rec .img .marken { z-index: 1; }
.rec .img .marken { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.rec .img .marken .badge { position: static; }
.rec .body { padding: var(--space-4); }
.rec h3, .rec h4 { font-size: 17px; line-height: 22px; font-weight: 800; }
.rec .body p { font-size: 13px; line-height: 18px; margin-top: 6px; }
/* Ganze Karte klickbar, der Favoriten-Knopf bleibt eigenständig. */
.rec .stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rec:hover { transform: translateY(-2px); }
.rec { transition: transform .15s ease; }
.leer { padding: var(--space-8); text-align: center; color: var(--ink-muted); grid-column: 1 / -1; }
/* Leerer Reiter bei „Für dich empfohlen“ (startseite.js leerKarte) */
.recs-leer { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8); }
.recs-leer h3 { margin: 0 0 var(--space-2); font-size: 20px; font-weight: 800; }
.recs-leer p { margin: 0 0 var(--space-4); color: var(--ink-muted); max-width: 52ch; }
.recs-leer-zeichen { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--cat-events-tint); color: var(--cat-events-ink); }
.recs-leer-zeichen svg.i { width: 30px; height: 30px; }
@media (max-width: 680px) { .recs-leer { flex-direction: column; align-items: flex-start; padding: var(--space-6); } }

/* --------------------------------------------------------------------- Jobs */
.jobs { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-6); align-items: start; }
.jobfilter { padding: var(--space-6); }
.jobfilter h2, .jobfilter h3 { font-size: 18px; line-height: 24px; font-weight: 800; margin-bottom: var(--space-4); }
.jobfilter .inp { margin-bottom: var(--space-3); }
.jobfilter fieldset { border: 0; padding: 0; margin: 0; }
.jobfilter legend { padding: 0; margin: var(--space-4) 0 var(--space-2); }
.joblist { display: flex; flex-direction: column; gap: var(--space-3); }
.job { padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.logo2 { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 18px; flex: none; background: var(--c); }
.job h3 { font-size: 17px; line-height: 22px; font-weight: 800; }
.job .firma { font-size: 14px; }
.job .tags { display: flex; gap: var(--space-2); margin-top: 6px; flex-wrap: wrap; }
.job .right { margin-left: auto; text-align: right; font-size: 13px; white-space: nowrap; }
.job .right b { display: block; font-size: 15px; color: var(--ink); }
.ergebnis-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; }
.ergebnis-kopf select { height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-card); padding: 0 14px; font-weight: 600; font-size: 14px; }
.seiten { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
.seiten a { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.seiten a[aria-current] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* --------------------------------------------------------- Zwei Spalten / Panels */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.panel { padding: var(--space-6); }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); gap: var(--space-3); }
.panel-head h2, .panel-head h3 { font-size: 20px; line-height: 26px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.ad .ph { height: 104px; border-radius: var(--radius-md); display: grid; place-items: center; color: rgba(255, 255, 255, .4); background: linear-gradient(150deg, var(--c), var(--c2, var(--c))); }
.ad .ph > svg { width: 44px; height: 44px; }
.ad b { display: block; font-size: 14px; margin-top: 8px; line-height: 18px; }
.ad:hover b { text-decoration: underline; }
.price { font-weight: 800; color: var(--price-ink); font-size: 15px; }
.post { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.post:first-of-type { border-top: 0; }
.post p { font-size: 14px; line-height: 20px; }
.post .m2l { font-size: 12px; margin-top: 4px; }
.post:hover b { text-decoration: underline; }

/* -------------------------------------------------------------------- Schritte */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.step { padding: var(--space-6); }
.num { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; font-weight: 800; }
.step h3 { font-size: 18px; line-height: 24px; font-weight: 800; margin: var(--space-4) 0 6px; }
.step p { font-size: 14px; line-height: 21px; }

/* ---------------------------------------------------------------- Partner-Band */
.band {
  border-radius: var(--radius-xl); padding: var(--space-12); display: grid; grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8); align-items: center; background: var(--band-bg); color: var(--band-ink); border: 1px solid var(--band-border);
}
.band h2 { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -.015em; margin-top: 8px; }
.band p.l { opacity: .8; margin-top: var(--space-3); }
.band .eyebrow { color: inherit; opacity: .7; }
.band :focus-visible { outline-color: currentColor; }
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
/* Ungerade Zahl von Angeboten (seit ServyBill statt Essen drei): das letzte über die ganze Breite */
.pgrid > :last-child:nth-child(odd), .grid2[data-partner-raster] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pcard { border-radius: var(--radius-md); padding: var(--space-4); background: var(--band-card); display: flex; gap: var(--space-3); align-items: flex-start; }
.pcard:hover { filter: brightness(1.15); }
.pcard b { display: block; font-size: 15px; }
.pcard span:not(.mini) { font-size: 13px; opacity: .78; line-height: 18px; display: block; margin-top: 2px; }

/* --------------------------------------------------------------- App + Premium */
.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); }
.app { padding: var(--space-8); display: flex; gap: var(--space-6); align-items: center; background: var(--primary-soft); border-color: transparent; }
.app h2 { font-size: 28px; line-height: 34px; font-weight: 800; margin-top: 6px; }
.phone { width: 150px; height: 230px; border-radius: 30px; background: var(--surface-card); border: 6px solid var(--ink); flex: none; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.phone i { display: block; border-radius: 8px; height: 30px; background: var(--c); }
.phone .t { height: 10px; width: 70%; background: var(--surface-raised); border-radius: 5px; }
.stores { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border-radius: 14px; background: var(--ink); color: var(--surface-card); font-size: 12px; line-height: 14px; }
.store b { display: block; font-size: 16px; line-height: 18px; }
.store svg { width: 22px; height: 22px; }
.premium { padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; }
.premium h3 { font-size: 22px; line-height: 28px; font-weight: 800; }
.premium ul { margin: var(--space-6) 0; padding-left: 18px; font-size: 14px; line-height: 24px; }
.premium .btn { align-self: flex-start; }
.crown { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-soft); display: grid; place-items: center; color: var(--star); flex: none; }
.crown svg { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ Newsletter */
.news { padding: var(--space-8) var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.news h2 { font-size: 24px; line-height: 30px; font-weight: 800; }
.news form { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.news .inp { width: 380px; max-width: 100%; margin: 0; border-radius: var(--radius-pill); height: 50px; }
.news .fehler { flex-basis: 100%; padding-left: 14px; }

/* ------------------------------------------------------- Unterseiten-Bausteine */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.kachel { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.kachel h2, .kachel h3 { font-size: 18px; line-height: 24px; font-weight: 800; }
.kachel p { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.kachel .mini, .kachel .ikon { margin-bottom: var(--space-2); }
.kachel .link { margin-top: auto; padding-top: var(--space-2); }
.ikon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.ikon svg { width: 22px; height: 22px; }
.inhalt-mit-seite { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-12); align-items: start; }
.inhalt-mit-seite.rechts { grid-template-columns: 1fr 360px; gap: var(--space-6); }
.inhalt-mit-seite > * { min-width: 0; }
.seitenleiste { position: sticky; top: 100px; padding: var(--space-4); }
.seitenleiste h2 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-2) var(--space-3); }
.seitenleiste ol, .seitenleiste ul { list-style: none; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.seitenleiste a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-muted); font-weight: 600; }
.seitenleiste a:hover { background: var(--surface-raised); color: var(--ink); }
.seitenleiste a[aria-current] { background: var(--primary-soft); color: var(--primary-ink); }
.platzhalter {
  border: 2px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6);
  background: var(--surface-raised); color: var(--ink-muted); font-size: 14px; line-height: 22px;
}
.platzhalter strong { color: var(--ink); }
.hinweis { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink); font-size: 14px; line-height: 22px; }
.hinweis svg { color: var(--primary-ink); margin-top: 1px; }
.stand { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-2); }
.bestaetigung { padding: var(--space-12) var(--space-8); text-align: center; display: grid; justify-items: center; gap: var(--space-3); }
.bestaetigung .ikon { width: 64px; height: 64px; border-radius: 50%; background: var(--cat-mitfahren-tint); color: var(--cat-mitfahren-ink); }
.bestaetigung .ikon svg { width: 30px; height: 30px; }
.bestaetigung h2 { font-size: 24px; line-height: 30px; font-weight: 800; }

/* Bereichsseite */
.bereich-held { border-radius: var(--radius-xl); padding: var(--space-12); background-color: var(--c-tint); background-image: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: center; border: 1px solid var(--cat-border); }
.bereich-held .tile { width: 72px; height: 72px; }
.bereich-held .tile svg { width: 36px; height: 36px; }
.bereich-held h1 { font-size: 40px; line-height: 46px; font-weight: 800; color: var(--c-ink); letter-spacing: -.015em; }
.bereich-held p { color: var(--cat-copy); margin-top: var(--space-2); max-width: 620px; }
.bereich-held .zahl { text-align: right; color: var(--cat-copy); font-size: 14px; font-weight: 600; }
.bereich-held .zahl b { display: block; font-size: 28px; line-height: 34px; font-weight: 800; color: var(--c-ink); }
.werkzeug { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.detail { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); align-items: start; }
.detail .bild { height: 320px; border-radius: var(--radius-lg); display: grid; place-items: center; color: rgba(255, 255, 255, .35); background: linear-gradient(150deg, var(--c), var(--c2, var(--c))); position: relative; }
.detail .bild > svg { width: 140px; height: 140px; }
.detail .bild .badge { position: absolute; left: 16px; bottom: 16px; background: rgba(0, 0, 0, .35); }
.fakten { list-style: none; padding: 0; display: grid; gap: var(--space-3); font-size: 15px; }
.fakten li { display: flex; gap: var(--space-3); align-items: center; }
.fakten svg { color: var(--ink-muted); }
.seitenkarte { padding: var(--space-6); display: grid; gap: var(--space-4); position: sticky; top: 100px; }

/* Akkordeon (Hilfe, FAQ) */
.faq { display: grid; gap: var(--space-3); }
.faq details { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.faq summary { cursor: pointer; padding: var(--space-4) var(--space-6); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 600; color: var(--primary-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 var(--space-6) var(--space-4); color: var(--ink-muted); font-size: 15px; line-height: 24px; }

/* Preise (Premium) */
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.preis { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.preis.hervor { border: 2px solid var(--primary); box-shadow: var(--shadow-pop); }
.preis .betrag { font-size: 40px; line-height: 46px; font-weight: 800; }
.preis .betrag small { font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.preis ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: 14px; }
.preis li { display: flex; gap: var(--space-2); }
.preis li svg { color: var(--cat-mitfahren); width: 18px; height: 18px; margin-top: 1px; }
.preis .btn { margin-top: auto; }
.umschalter { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-raised); gap: 4px; }

/* Blog */
.artikelkarte { overflow: hidden; display: flex; flex-direction: column; }
.artikelkarte .img { height: 180px; display: grid; place-items: center; color: rgba(255, 255, 255, .35); background: linear-gradient(150deg, var(--c), var(--c2, var(--c))); }
.artikelkarte .img > svg { width: 80px; height: 80px; }
.artikelkarte .body { padding: var(--space-6); display: grid; gap: var(--space-2); }
.artikelkarte h2, .artikelkarte h3 { font-size: 19px; line-height: 25px; font-weight: 800; }
.artikelkarte p { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.artikel-held { height: 300px; border-radius: var(--radius-xl); display: grid; place-items: center; color: rgba(255, 255, 255, .35); background: linear-gradient(150deg, var(--c), var(--c2, var(--c))); margin-top: var(--space-8); }
.artikel-held > svg { width: 120px; height: 120px; }

/* Cookie-Schalter */
.cookie-schalter { display: flex; justify-content: space-between; gap: var(--space-6); align-items: flex-start; padding: var(--space-6); }
.cookie-schalter h2 { font-size: 18px; line-height: 24px; font-weight: 800; }
.cookie-schalter p { font-size: 14px; line-height: 21px; color: var(--ink-muted); margin-top: 4px; }
.kippschalter { position: relative; width: 52px; height: 30px; flex: none; }
.kippschalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.kippschalter span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--border); transition: background .15s; }
.kippschalter span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.kippschalter input:checked + span { background: var(--primary); }
.kippschalter input:checked + span::after { transform: translateX(22px); }
.kippschalter input:disabled { cursor: not-allowed; }
.kippschalter input:disabled + span { opacity: .6; }
.kippschalter input:focus-visible + span { outline: 3px solid var(--primary-ink); outline-offset: 2px; }

/* Status */
.dienste { list-style: none; padding: 0; }
.dienste li { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); font-weight: 600; }
.dienste li:first-child { border-top: 0; }
.dienste .ok { color: var(--cat-mitfahren-ink); display: inline-flex; gap: 6px; align-items: center; }

/* 404 */
.nichtgefunden { text-align: center; padding: var(--space-16) 0 0; display: grid; justify-items: center; gap: var(--space-4); }
.nichtgefunden .code { font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }

/* --------------------------------------------------------------- Responsiv */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; line-height: 54px; }
  .cats, .steps, .grid3, .preise { grid-template-columns: repeat(2, 1fr); }
  .recs, .grid4 { grid-template-columns: repeat(2, 1fr); }
  .jobs, .two, .band, .duo, .inhalt-mit-seite, .inhalt-mit-seite.rechts, .detail { grid-template-columns: 1fr; }
  .seitenleiste, .seitenkarte { position: static; }
  .news { flex-direction: column; align-items: stretch; padding: var(--space-8); }
  .bereich-held { grid-template-columns: auto 1fr; }
  .bereich-held .zahl { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 680px) {
  .sec { padding-top: var(--space-12); }
  .seitenkopf { padding-top: var(--space-8); }
  .seitenkopf h1, .bereich-held h1 { font-size: 32px; line-height: 38px; }
  .hero { padding-top: var(--space-8); }
  .hero h1 { font-size: 38px; line-height: 44px; }
  .lead { font-size: 17px; line-height: 27px; }
  .bigsearch { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: var(--space-2); }
  .bigsearch .f { flex: none; }
  .bigsearch .f + .f { border-left: 0; border-top: 1px solid var(--border); }
  .bigsearch .btn { margin-top: var(--space-2); }
  .bigsearch .btn { width: 100%; }
  .stats { gap: var(--space-6); }
  .cats, .steps, .grid2, .grid3, .grid4, .preise, .pgrid, .formular .zwei { grid-template-columns: 1fr; }
  .recs { grid-template-columns: 1fr; }
  .ads { grid-template-columns: repeat(2, 1fr); }
  .job { padding: var(--space-4); flex-wrap: wrap; }
  .job .right { margin-left: 68px; text-align: left; display: flex; gap: var(--space-2); }
  .band, .bereich-held { padding: var(--space-8) var(--space-6); }
  .band h2 { font-size: 28px; line-height: 34px; }
  .app { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
  .phone { display: none; }
  .premium { padding: var(--space-6); }
  .news { padding: var(--space-6); }
  .news .inp { width: 100%; }
  .news form .btn { width: 100%; }
  .float.f1 { max-width: 200px; left: 52%; }
  .detail .bild { height: 220px; }
  .nichtgefunden .code { font-size: 88px; }
}
@media (max-width: 420px) {
  .mosaic .float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .skip-link { display: none !important; }
  /* Rechtstexte drucken (und die PDFs der Fassungen, tools/rechtstexte-pdf.mjs): nur der Text */
  .seitenleiste, .brotkrumen, .archiv-hinweis, .fassung-zeile { display: none !important; }
  .inhalt-mit-seite { display: block; }
  .seitenkopf, .sec { padding-top: 0 !important; padding-bottom: 8mm !important; }
  .prose section { break-inside: auto; }
  .prose h2 { break-after: avoid; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}


/* Eigene Formularbausteine (assets/felder.js) statt nativer Felder – Aussehen wie .eingabe und das Sprachmenü */
.auswahl { position: relative; }
.auswahl-knopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.auswahl-knopf .auswahl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-knopf svg.i { width: 18px; height: 18px; flex: none; color: var(--ink-muted); }
.auswahl-knopf[aria-expanded="true"] { border-color: var(--primary); }
.auswahl-popup {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 6px; padding: 6px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.auswahl-liste { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; outline: none; }
.auswahl-liste li { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.auswahl-liste li.aktiv, .auswahl-liste li:hover { background: var(--surface-raised); }
.auswahl-liste li[aria-selected="true"] { color: var(--primary-ink); }
/* Zeichen vor dem Text einer Option (felder.js, z. B. Art eines Links) */
.auswahl-text:has(.auswahl-zeichen), .auswahl-liste li:has(.auswahl-zeichen) { display: flex; align-items: center; gap: 10px; }
.auswahl-zeichen { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--primary-ink); }
.auswahl-zeichen svg.i, .auswahl-knopf .auswahl-zeichen svg.i { width: 18px; height: 18px; color: inherit; }
.auswahl-liste .auswahl-leer { color: var(--ink-muted); cursor: default; }
.datum { display: flex; align-items: center; gap: 6px; }
.datum .eingabe { width: 4.2em; text-align: center; }
.datum .eingabe[data-teil="j"] { width: 5.6em; }
.datum[data-ungueltig] .eingabe { border-color: var(--danger); }
.schalter { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-weight: 600; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter span { width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--border); position: relative; flex: none; transition: background .15s; }
.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-card); box-shadow: var(--shadow-card); transition: transform .15s; }
.schalter input:checked + span { background: var(--primary); }
.schalter input:checked + span::after { transform: translateX(18px); }
.schalter input:focus-visible + span { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.konto-bild { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); overflow: hidden; flex: none; }
.konto-bild img { width: 100%; height: 100%; object-fit: cover; }
.konto-bild svg.i { width: 40px; height: 40px; }

.tage { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tage .tag { min-width: 48px; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-card); font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.tage .tag[aria-pressed="true"], .tage .tag[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.tage a.tag { display: inline-flex; align-items: center; text-decoration: none; }
.btn-gefahr { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-gefahr:hover { filter: brightness(.95); }

.zeilen { display: grid; gap: var(--space-3); }
.zeile { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }



/* Postfach (/notifications) und Support-Verlauf */
.postfach li.ungelesen { border-color: var(--primary); background: var(--primary-soft); }
.postfach .postfach-ziel { color: inherit; text-decoration: none; flex: 1; }
.postfach .postfach-ziel:hover strong { text-decoration: underline; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.verlauf li { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); white-space: pre-wrap; }
.verlauf li.vom-support { background: var(--primary-soft); border-color: transparent; }
.einstellung-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.einstellung-zeile .row { gap: var(--space-6); }
.schalter input:disabled + span { opacity: .55; }

/* Support-Bearbeitung: interne Notizen sieht nur das Team */
.verlauf li.intern { background: var(--surface-raised); border-style: dashed; }

/* ServyBill nimmt den Platz von „Essen bestellen“ ein und übernimmt dessen Farben (keine neuen Farben;
   --cat-essen bleibt als Ton für Status, Blog und Platzhalter) */
:root {
  --cat-servybill: var(--cat-essen); --cat-servybill-tint: var(--cat-essen-tint); --cat-servybill-ink: var(--cat-essen-ink);
}

/* Markenfarben der Netzwerke (nur für ihre Zeichen, z. B. Art eines Links) – keine Tokens, weil fremde Marken;
   im dunklen Modus hellere Fassungen, damit sie lesbar bleiben */
:root {
  --marke-instagram: #d6246e; --marke-facebook: #1877f2; --marke-tiktok: #111111; --marke-youtube: #e00000;
  --marke-linkedin: #0a66c2; --marke-mastodon: #6364ff; --marke-x: #111111;
}
[data-theme="dark"] {
  --marke-instagram: #ff5c9a; --marke-facebook: #5a9dff; --marke-tiktok: #f2f2f2; --marke-youtube: #ff5a5a;
  --marke-linkedin: #4ca3ff; --marke-mastodon: #9a9bff; --marke-x: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marke-instagram: #ff5c9a; --marke-facebook: #5a9dff; --marke-tiktok: #f2f2f2; --marke-youtube: #ff5a5a;
    --marke-linkedin: #4ca3ff; --marke-mastodon: #9a9bff; --marke-x: #f2f2f2;
  }
}