/* ============================================================
   Baukasten — Sektionen B: FAQ · Gebiete · Preise · Team
   ------------------------------------------------------------
   Nur ergänzende Klassen mit Präfix `s-`. Grundgerüst (section,
   container, kopf, eyebrow, raster, card, chips/chip, btn) und
   alle Farben kommen aus base.css / paletten.css.
   Keine Hex-Farben ausser #fff, keine externen Assets.
   ============================================================ */

/* ---------- Hilfen ---------- */
.s-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Ein sichtbarer Fokus für alles, was in diesen Sektionen bedienbar ist. */
.s-faq :focus-visible,
.s-karte :focus-visible,
.s-gebiete :focus-visible,
.s-orte :focus-visible,
.s-tabelle :focus-visible,
.s-team :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}
.section--tief .s-team :focus-visible { outline-color: #fff; }

/* ============================================================
   1 · FAQ
   ============================================================ */
.s-faq { display: grid; gap: 0; }
.s-faq--liste { max-width: 880px; }

.s-faq--liste .s-frage { border-top: 1px solid var(--line); }
.s-faq--liste .s-frage:last-child { border-bottom: 1px solid var(--line); }

.s-frage__kopf {
  display: flex; align-items: flex-start; gap: 14px;
  padding-block: 18px; min-height: 56px;
  cursor: pointer; list-style: none;
}
.s-frage__kopf::-webkit-details-marker { display: none; }
.s-frage__kopf::marker { content: ""; }

.s-frage__nr {
  flex: none; width: 24px; padding-top: 3px;
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.s-frage__titel {
  flex: 1 1 auto; font-size: var(--t-h3); font-weight: 600;
  line-height: 1.35; letter-spacing: -.012em;
  transition: color .15s var(--ease);
}
.s-frage__kopf:hover .s-frage__titel { color: var(--brand); }

.s-frage__zeichen {
  flex: none; position: relative; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.s-frage__zeichen::before,
.s-frage__zeichen::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.7px; border-radius: 2px;
  background: var(--ink-2); transform: translate(-50%, -50%);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.s-frage__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }

.s-frage[open] > .s-frage__kopf .s-frage__titel { color: var(--brand); }
.s-frage[open] > .s-frage__kopf .s-frage__zeichen { background: var(--brand); border-color: var(--brand); }
.s-frage[open] > .s-frage__kopf .s-frage__zeichen::before { background: #fff; }
.s-frage[open] > .s-frage__kopf .s-frage__zeichen::after {
  background: #fff; transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.s-frage__text {
  padding: 0 48px 22px 38px; max-width: 74ch;
  font-size: var(--t-small); color: var(--muted);
}

/* Variante «zweispaltig»: gleiche Bausteine, als Karten auf zwei Spalten. */
.s-faq--karten { grid-template-columns: 1fr; gap: 12px; align-items: start; }
.s-faq--karten .s-frage {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.s-faq--karten .s-frage__kopf { padding: 16px 18px; gap: 12px; }
.s-faq--karten .s-frage__nr { display: none; }
.s-faq--karten .s-frage__titel { font-size: var(--t-body); }
.s-faq--karten .s-frage__zeichen { width: 30px; height: 30px; }
.s-faq--karten .s-frage__zeichen::before,
.s-faq--karten .s-frage__zeichen::after { width: 10px; }
.s-faq--karten .s-frage__text { padding: 0 18px 18px; }

@media (min-width: 820px) {
  .s-faq--karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
  /* Auf schmalen Schirmen kreuzen die Deko-Linien sonst die Ortsnamen. */
  .s-karte__flaeche::before, .s-karte__flaeche::after { display: none; }
  .s-faq--liste .s-frage__nr { display: none; }
  .s-frage__kopf { padding-block: 16px; }
  .s-frage__text { padding: 0 40px 20px 0; }
  .s-faq--karten .s-frage__text { padding: 0 16px 16px; }
}

/* ============================================================
   2 · Gebiete
   ============================================================ */

/* --- 2a · Karte mit Markern (reine CSS-Grafik, kein Kartenbild) --- */
.s-karte {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.s-karte__flaeche {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 44px) clamp(8px, 2vw, 18px);
  align-content: center;
  min-height: 280px; padding: clamp(24px, 4vw, 40px);
  background-color: color-mix(in srgb, var(--brand) 7%, var(--surface));
  background-image: radial-gradient(color-mix(in srgb, var(--brand) 15%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
/* Zwei sehr dezente Linien als «Wege» — Textur, keine Geografie. */
.s-karte__flaeche::before,
.s-karte__flaeche::after {
  content: ""; position: absolute; z-index: 0; left: -12%; width: 124%;
  height: 1.5px; background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.s-karte__flaeche::before { bottom: 20%; transform: rotate(-4deg); }
.s-karte__flaeche::after { top: 22%; transform: rotate(3deg); background: color-mix(in srgb, var(--brand) 7%, transparent); }

.s-pin {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: start; gap: 8px;
  min-height: 52px; padding: 8px 6px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
}
.s-pin__punkt {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent),
              0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.s-pin__name {
  font-size: .875rem; font-weight: 600; line-height: 1.3;
  text-align: center; transition: color .2s var(--ease);
}
.s-pin:hover .s-pin__name { color: var(--accent); }
.s-pin:hover .s-pin__punkt,
.s-pin:focus-visible .s-pin__punkt {
  background: var(--brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Leichte Streuung, damit die Marker nicht wie ein Raster wirken. */
.s-karte__flaeche .s-pin:nth-child(2) { transform: translateY(10px); }
.s-karte__flaeche .s-pin:nth-child(3) { transform: translateY(-6px); }
.s-karte__flaeche .s-pin:nth-child(4) { transform: translateY(14px); }
.s-karte__flaeche .s-pin:nth-child(5) { transform: translateY(-4px); }
.s-karte__flaeche .s-pin:nth-child(6) { transform: translateY(9px); }
.s-karte__flaeche .s-pin:nth-child(7) { transform: translateY(-7px); }
.s-karte__flaeche .s-pin:nth-child(8) { transform: translateY(6px); }

@media (min-width: 760px) {
  .s-karte__flaeche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.s-karte__hinweis {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--muted);
}
.s-karte__hinweis svg { flex: none; width: 14px; height: 14px; }

/* --- 2b · Chips --- */
.s-gebiete {
  padding: clamp(18px, 3.4vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.s-gebiete .chips { gap: 10px; }
.s-gebiete .chip {
  min-height: 46px; padding: 11px 18px;
  font-size: var(--t-small); background: #fff;
}
.s-gebiete .chip svg { width: 16px; height: 16px; }

/* --- 2c · Liste --- */
.s-orte { border-top: 1px solid var(--line); }
.s-ort { border-bottom: 1px solid var(--line); }
.s-ort__link {
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding-block: 10px;
  text-decoration: none; color: var(--ink);
}
.s-ort__nr {
  flex: none; width: 24px; font-size: var(--t-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.s-ort__name {
  font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
.s-ort__pfeil {
  flex: none; margin-left: auto; width: 16px; height: 16px; color: var(--muted);
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.s-ort__link:hover .s-ort__name { color: var(--brand); }
.s-ort__link:hover .s-ort__pfeil { transform: translateX(3px); color: var(--brand); }

@media (min-width: 760px) {
  .s-orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 64px); }
}

/* ============================================================
   3 · Preise
   ============================================================ */

/* --- 3a · Drei Pakete --- */
.s-pakete { align-items: stretch; }
.s-paket {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(20px, 3vw, 28px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.s-paket__name {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand);
}
.s-paket__preis {
  margin-top: 10px; font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.s-paket__text {
  margin-top: 8px; font-size: var(--t-small); color: var(--muted);
}
.s-paket__liste {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
}
.s-paket__punkt {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: var(--t-small); color: var(--ink-2);
}
.s-paket__punkt svg { width: 16px; height: 16px; margin-top: 3px; color: var(--brand); }

/* --- 3b · Tabelle --- */
.s-tabelle__huelle {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.s-tabelle { width: 100%; border-collapse: collapse; }

.s-tabelle thead th {
  padding: 12px clamp(16px, 3vw, 26px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); text-align: left;
}
.s-tabelle thead th:last-child { text-align: right; }

.s-tabelle tbody th,
.s-tabelle tbody td { padding: 16px clamp(16px, 3vw, 26px); vertical-align: top; }
.s-tabelle tbody th { text-align: left; font-weight: 600; }
.s-tabelle tbody td {
  text-align: right; white-space: nowrap;
  font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums;
}
.s-tabelle tbody tr + tr th,
.s-tabelle tbody tr + tr td { border-top: 1px solid var(--line); }

.s-tabelle__name { display: block; font-size: var(--t-h3); letter-spacing: -.01em; }
.s-tabelle__text {
  display: block; margin-top: 3px; max-width: 62ch;
  font-size: var(--t-small); font-weight: 400; color: var(--muted);
}

@media (max-width: 640px) {
  .s-tabelle thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .s-tabelle, .s-tabelle tbody, .s-tabelle tr,
  .s-tabelle tbody th, .s-tabelle tbody td { display: block; width: 100%; }
  .s-tabelle tbody tr { padding: 16px 18px; }
  .s-tabelle tbody tr + tr { border-top: 1px solid var(--line); }
  .s-tabelle tbody tr + tr th,
  .s-tabelle tbody tr + tr td { border-top: 0; }
  .s-tabelle tbody th,
  .s-tabelle tbody td { padding: 0; }
  .s-tabelle tbody td {
    margin-top: 6px; text-align: left; font-size: var(--t-body);
    white-space: normal;
  }
  .s-tabelle tbody td::before {
    content: attr(data-label) " ";
    font-weight: 600; color: var(--muted);
  }
}

/* ============================================================
   4 · Team
   ============================================================ */

/* Runder Platzhalter mit Monogramm — bewusst als Platzhalter erkennbar
   (gestrichelter Rand, kein Foto). */
.s-avatar {
  flex: none; display: grid; place-items: center;
  width: var(--s-avatar, 64px); height: var(--s-avatar, 64px);
  border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--brand) 9%, #fff);
  color: var(--brand);
  border: 1px dashed color-mix(in srgb, var(--brand) 32%, var(--line));
}
.s-avatar__zeichen { display: block; font-size: 0; line-height: 1; font-weight: 700; }
.s-avatar__zeichen::first-letter {
  font-size: calc(var(--s-avatar, 64px) * .36);
  line-height: 1;
}
.section--tief .s-avatar {
  background: color-mix(in srgb, #fff 13%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, #fff 32%, transparent);
}

/* --- 4a · Karten --- */
.s-person { gap: 10px; }
.s-person .s-avatar { margin-bottom: 4px; }
.s-person .s-person__rolle {
  margin-top: -2px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
.s-person .s-person__text { color: var(--muted); }

/* --- 4b · Liste --- */
.s-team-liste { display: grid; }
.s-team-zeile {
  display: grid; gap: 14px;
  padding-block: clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--line);
}
.s-team-zeile:last-child { border-bottom: 1px solid var(--line); }
.s-team-zeile__kopf { display: flex; align-items: center; gap: 14px; }
.s-team-zeile .s-avatar { --s-avatar: 48px; }
.s-team-zeile__name { font-size: var(--t-h3); margin-top: 2px; }
.s-team-zeile__rolle {
  margin-top: 2px; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
.s-team-zeile__text { max-width: 62ch; font-size: var(--t-small); color: var(--muted); }

@media (min-width: 820px) {
  .s-team-zeile {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 56px); align-items: start;
  }
}

/* --- 4c · Portrait gross --- */
/* .kopf p (base) setzt --muted und gewinnt gegen .section--tief p; auf dem
   dunklen Band ist das zu dunkel. Darum hier eine eigene, spezifischere Farbe. */
.kopf .s-kopf-text {
  margin-top: 12px; font-size: var(--t-small);
  color: color-mix(in srgb, #fff 82%, transparent);
}
.s-portrait {
  display: grid; gap: clamp(18px, 3vw, 26px);
  padding-block: clamp(24px, 4vw, 38px);
  border-top: 1px solid color-mix(in srgb, #fff 16%, transparent);
}
.s-portrait:first-child { padding-top: 0; border-top: 0; }
.s-portrait .s-avatar { --s-avatar: 88px; }
.s-portrait .s-portrait__rolle {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: color-mix(in srgb, #fff 64%, var(--accent));
}
.s-portrait .s-portrait__name { margin-top: 8px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: #fff; }
.s-portrait .s-portrait__text {
  margin-top: 8px; max-width: 58ch;
  font-size: var(--t-small); color: color-mix(in srgb, #fff 82%, transparent);
}

@media (min-width: 820px) {
  .s-portrait {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: clamp(28px, 5vw, 56px);
  }
  .s-portrait .s-avatar { --s-avatar: 128px; }
  .s-portrait:nth-child(even) .s-avatar { order: 2; justify-self: end; }
  .s-portrait:nth-child(even) .s-portrait__text { max-width: 54ch; }
}