/* ===========================================================================
   Soverra Website — Layout- und Komponenten-Styles

   Die .sv-*-Komponentenklassen sind die CSS-Fassung der Design-System-
   Komponenten aus _ds_bundle.js (Button, Card, Badge, StatusPill, Stepper,
   ProgressBar, Field/Input/Textarea). Werte 1:1 uebernommen; Hover-, Focus-
   und Active-Zustaende laufen hier ueber CSS statt ueber React-State.

   Alle Farb-, Typo- und Abstands-Variablen kommen aus /assets/ds/.
   =========================================================================== */

/* --- Ergaenzung zu den Design-Tokens ------------------------------------- */

/* Die Entwuerfe aus dem Design Canvas verwenden `var(--font-h5)`, das im
   Design-System nicht definiert ist — die betroffenen Ueberschriften fielen
   dadurch auf Fliesstext zurueck (Preise-FAQ, Rechtstexte). Hier ergaenzt,
   passend zur Skala zwischen --font-h4 (20px) und --font-body-lg (17px).
   Sobald das Design-System die Stufe selbst mitbringt, kann das hier weg. */
:root {
  --font-h5: var(--weight-semibold) var(--text-md)/var(--leading-md) var(--font-sans);
}


/* --- Grundlagen ---------------------------------------------------------- */

html, body { margin: 0; background: var(--canvas); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover, var(--brand-700)); }

.sv-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }


/* --- Kopfzeile ----------------------------------------------------------- */

.sv-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.sv-header__inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 32px;
}
.sv-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sv-brand img { border-radius: 9px; }
.sv-brand__name {
  font: var(--weight-bold) 20px var(--font-sans);
  letter-spacing: -0.02em; color: var(--text-primary);
}
.sv-nav { display: flex; gap: 4px; flex: 1; }
.sv-nav__link {
  font: var(--font-label); color: var(--text-secondary);
  padding: 8px 12px; border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.sv-nav__link:hover { color: var(--text-primary); background: var(--surface-hover); }
.sv-nav__link[aria-current="page"] { color: var(--text-primary); background: var(--surface-hover); }
.sv-header__actions { display: flex; align-items: center; gap: 8px; }

.sv-burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer;
}
.sv-mobile-nav {
  display: none; flex-direction: column; gap: 2px;
  padding: 12px 24px 20px; border-top: 1px solid var(--border-subtle);
  background: var(--surface);
}
.sv-mobile-nav[hidden] { display: none; }
.sv-mobile-nav__link {
  font: var(--font-body); color: var(--text-secondary);
  padding: 10px 4px; border-radius: var(--radius-md);
}
.sv-mobile-nav__link:hover { color: var(--text-primary); }
.sv-mobile-nav__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }


/* --- Fusszeile ----------------------------------------------------------- */

.sv-footer { background: var(--neutral-950); color: var(--neutral-300); }
.sv-footer__top {
  max-width: var(--content-max); margin: 0 auto; padding: 48px 24px 28px;
}
.sv-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sv-footer__brand img { border-radius: 8px; }
.sv-footer__brand span { font: var(--weight-bold) 19px var(--font-sans); color: var(--neutral-0); }
.sv-footer__claim { font: var(--font-body-sm); color: var(--neutral-400); max-width: 420px; margin: 0; }
.sv-footer__link { font: var(--font-body-sm); color: var(--neutral-400); }
.sv-footer__link:hover { color: var(--neutral-0); }
.sv-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.sv-footer__bottom {
  max-width: var(--content-max); margin: 0 auto; padding: 20px 24px;
  border-top: 1px solid var(--border-inverse);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font: var(--font-caption); color: var(--neutral-500);
}
.sv-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; }
.sv-footer__bottom .sv-footer__link { color: var(--neutral-500); font: var(--font-caption); }


/* --- Button -------------------------------------------------------------- */

.sv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.005em; border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
  transition: var(--transition-colors),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}
.sv-btn:active { transform: translateY(0.5px); }
.sv-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sv-btn--block { width: 100%; }
.sv-btn__icon { display: inline-flex; }
.sv-btn__icon--leading { margin-left: -2px; }
.sv-btn__icon--trailing { margin-right: -2px; }

/* Groessen */
.sv-btn--sm { height: var(--control-h-sm); padding: 0 12px; gap: 6px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); }
.sv-btn--md { height: var(--control-h-md); padding: 0 16px; gap: 8px; font: var(--weight-semibold) var(--text-base)/1 var(--font-sans); }
.sv-btn--lg { height: var(--control-h-lg); padding: 0 22px; gap: 9px; font: var(--weight-semibold) var(--text-md)/1 var(--font-sans); }

/* Varianten */
.sv-btn--primary { background: var(--accent); color: var(--text-on-brand); border: 1px solid transparent; box-shadow: var(--shadow-xs); }
.sv-btn--primary:hover { background: var(--accent-hover); color: var(--text-on-brand); }
.sv-btn--primary:active { background: var(--accent-active); }

.sv-btn--secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.sv-btn--secondary:hover { background: var(--surface-hover); border-color: var(--neutral-400); color: var(--text-primary); }
.sv-btn--secondary:active { background: var(--surface-active); }

.sv-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; }
.sv-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.sv-btn--ghost:active { background: var(--surface-active); }

.sv-btn--soft { background: var(--accent-soft); color: var(--accent-text); border: 1px solid transparent; }
.sv-btn--soft:hover { background: var(--accent-soft-hover); color: var(--accent-text); }
.sv-btn--soft:active { background: var(--brand-100); }

.sv-btn--danger { background: var(--red-600); color: var(--neutral-0); border: 1px solid transparent; box-shadow: var(--shadow-xs); }
.sv-btn--danger:hover, .sv-btn--danger:active { background: var(--red-700); color: var(--neutral-0); }

/* Varianten fuer dunkle CTA-Baender */
.sv-btn--white { background: var(--neutral-0); color: var(--brand-800); border: 1px solid transparent; box-shadow: var(--shadow-xs); }
.sv-btn--white:hover { background: var(--neutral-100); color: var(--brand-800); }

.sv-btn--on-dark { background: transparent; color: var(--neutral-0); border: 1px solid color-mix(in srgb, var(--neutral-0) 40%, transparent); }
.sv-btn--on-dark:hover { background: color-mix(in srgb, var(--neutral-0) 12%, transparent); color: var(--neutral-0); }


/* --- Card ---------------------------------------------------------------- */

.sv-card {
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.sv-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sv-card__body--none { padding: 0; }
.sv-card__body--sm { padding: 16px; }
.sv-card__body--md { padding: 20px; }
.sv-card__body--lg { padding: 24px; }


/* --- Badge --------------------------------------------------------------- */

.sv-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: var(--radius-xs);
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-sans);
  letter-spacing: 0.01em;
}
.sv-badge--neutral { background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200); }
.sv-badge--brand   { background: var(--brand-50);   color: var(--brand-700);   border: 1px solid var(--brand-100); }
.sv-badge--green   { background: var(--green-50);   color: var(--green-700);   border: 1px solid var(--green-100); }
.sv-badge--amber   { background: var(--amber-50);   color: var(--amber-700);   border: 1px solid var(--amber-100); }
.sv-badge--red     { background: var(--red-50);     color: var(--red-700);     border: 1px solid var(--red-100); }

.sv-badge--solid { color: var(--neutral-0); border-color: transparent; }
.sv-badge--neutral.sv-badge--solid { background: var(--neutral-700); }
.sv-badge--brand.sv-badge--solid   { background: var(--brand-600); }
.sv-badge--green.sv-badge--solid   { background: var(--green-600); }
.sv-badge--amber.sv-badge--solid   { background: var(--amber-600); }
.sv-badge--red.sv-badge--solid     { background: var(--red-600); }


/* --- StatusPill ---------------------------------------------------------- */

.sv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-full); white-space: nowrap;
  font-family: var(--font-sans); font-weight: var(--weight-semibold); line-height: 1;
}
.sv-pill--sm { height: 22px; padding: 0 8px; font-size: var(--text-2xs); }
.sv-pill--md { height: 26px; padding: 0 10px; font-size: var(--text-xs); }
.sv-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.sv-pill--md .sv-pill__dot { width: 7px; height: 7px; }

.sv-pill--verified { background: var(--status-verified-bg); color: var(--status-verified-fg); border: 1px solid var(--status-verified-border); }
.sv-pill--verified .sv-pill__dot { background: var(--status-verified-solid); }
.sv-pill--pending  { background: var(--status-pending-bg);  color: var(--status-pending-fg);  border: 1px solid var(--status-pending-border); }
.sv-pill--pending .sv-pill__dot { background: var(--status-pending-solid); }
.sv-pill--action   { background: var(--status-action-bg);   color: var(--status-action-fg);   border: 1px solid var(--status-action-border); }
.sv-pill--action .sv-pill__dot { background: var(--status-action-solid); }
.sv-pill--rejected { background: var(--status-rejected-bg); color: var(--status-rejected-fg); border: 1px solid var(--status-rejected-border); }
.sv-pill--rejected .sv-pill__dot { background: var(--status-rejected-solid); }
.sv-pill--neutral  { background: var(--status-neutral-bg);  color: var(--status-neutral-fg);  border: 1px solid var(--status-neutral-border); }
.sv-pill--neutral .sv-pill__dot { background: var(--neutral-400); }


/* --- ProgressBar --------------------------------------------------------- */

.sv-progress { display: flex; flex-direction: column; gap: 7px; }
.sv-progress__head { display: flex; justify-content: space-between; align-items: baseline; }
.sv-progress__label { font: var(--font-label); color: var(--text-secondary); }
.sv-progress__value { font: var(--font-mono-sm); font-size: 12px; color: var(--text-tertiary); }
.sv-progress__track {
  height: 7px; border-radius: var(--radius-full);
  background: var(--surface-sunken); overflow: hidden; box-shadow: var(--shadow-inner);
}
.sv-progress__bar {
  height: 100%; border-radius: var(--radius-full);
  transition: width var(--dur-slow) var(--ease-out);
}
.sv-progress__bar--brand { background: var(--accent); }
.sv-progress__bar--mint  { background: var(--accent-2); }
.sv-progress__bar--green { background: var(--green-600); }


/* --- Stepper ------------------------------------------------------------- */

.sv-stepper { display: flex; align-items: flex-start; gap: 4px; }
.sv-stepper__step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.sv-stepper__row { display: flex; align-items: center; width: 100%; }
.sv-stepper__dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
  background: var(--surface); color: var(--text-tertiary);
  border: 1px solid var(--border-strong);
  transition: var(--transition-colors);
}
.sv-stepper__line {
  height: 2px; flex: 1; margin: 0 8px; background: var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.sv-stepper__text { margin-top: 8px; text-align: center; max-width: 140px; }
.sv-stepper__label { font: var(--weight-medium) var(--text-sm)/1.3 var(--font-sans); color: var(--text-tertiary); }
.sv-stepper__desc { font: var(--font-caption); color: var(--text-tertiary); margin-top: 2px; }

.sv-stepper__step--done .sv-stepper__dot { background: var(--accent); color: var(--text-on-brand); border-color: transparent; }
.sv-stepper__step--done .sv-stepper__line { background: var(--accent); }
.sv-stepper__step--done .sv-stepper__label { font-weight: var(--weight-semibold); color: var(--text-primary); }

.sv-stepper__step--current .sv-stepper__dot { background: var(--surface); color: var(--accent-text); border: 2px solid var(--accent); }
.sv-stepper__step--current .sv-stepper__label { font-weight: var(--weight-semibold); color: var(--text-primary); }


/* --- Formularfelder ------------------------------------------------------ */

.sv-field { display: flex; flex-direction: column; gap: 6px; }
.sv-field__label { font: var(--font-label); color: var(--text-primary); display: inline-flex; gap: 4px; }
.sv-input {
  display: flex; align-items: center; gap: 8px;
  height: var(--control-h-md); padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); cursor: text;
  transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
}
.sv-input:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); }
.sv-input__el {
  flex: 1; min-width: 0; height: 100%;
  border: none; outline: none; background: transparent;
  font: var(--weight-regular) var(--text-base)/1 var(--font-sans);
  color: var(--text-primary); letter-spacing: 0;
}
.sv-textarea {
  width: 100%; resize: vertical; padding: 10px 12px;
  font: var(--font-body); color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); outline: none;
  transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
}
.sv-textarea:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }


/* --- Seitenspezifisches: Preisvergleich ---------------------------------- */

.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td {
  padding: 12px 14px; text-align: center;
  border-bottom: 1px solid var(--border-subtle); font: var(--font-body-sm);
}
.cmp-table td:first-child, .cmp-table th:first-child { text-align: left; }
/* Wertespalten nicht umbrechen ("E-Mail" sonst zweizeilig) */
.cmp-table td:not(:first-child), .cmp-table th:not(:first-child) { white-space: nowrap; }


/* --- Zielgruppenband (Startseite) ---------------------------------------- */

.sv-zielgruppe { text-align: center; }
.sv-zielgruppe__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 10px;
  border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent);
}
.sv-zielgruppe__name {
  font: var(--weight-semibold) var(--text-base)/1.3 var(--font-sans);
  color: var(--text-primary);
}
.sv-zielgruppe__text {
  font: var(--font-body-sm); color: var(--text-tertiary);
  margin-top: 4px; max-width: 26ch; margin-inline: auto;
}


/* --- Funktionen-Seite ---------------------------------------------------- */

.sv-eckdaten__item {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
}
.sv-eckdaten__wert {
  font: var(--weight-bold) 26px/1 var(--font-sans);
  letter-spacing: -0.02em; color: var(--accent-text);
}
.sv-eckdaten__label { font: var(--font-caption); color: var(--text-tertiary); margin-top: 6px; }

/* Sprungmarken-Leiste, klebt unter der Kopfzeile */
.sv-jump {
  position: sticky; top: 68px; z-index: 10;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.sv-jump__inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.sv-jump__inner::-webkit-scrollbar { display: none; }
.sv-jump__link {
  flex: none; padding: 12px 12px; white-space: nowrap;
  font: var(--font-label); color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: var(--transition-colors);
}
.sv-jump__link:hover { color: var(--text-primary); border-bottom-color: var(--accent); }

.sv-funkblock { scroll-margin-top: 116px; }
.sv-funkblock--alt {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.sv-funkblock__kopf { display: flex; gap: 16px; align-items: flex-start; }
.sv-funkblock__icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-lg);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sv-funkpunkt__titel {
  display: flex; gap: 9px; align-items: flex-start;
  font: var(--weight-semibold) var(--text-base)/1.35 var(--font-sans);
  color: var(--text-primary);
}
.sv-funkpunkt__haken {
  flex: none; margin-top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-50); color: var(--green-600);
  display: inline-flex; align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .sv-jump { top: 68px; }
  .sv-funkblock__kopf { flex-direction: column; gap: 12px; }
}


/* --- Rechtstexte (Impressum, Datenschutz, AGB) --------------------------- */

.sv-legal { max-width: 720px; margin: 0 auto; padding: 72px 24px 100px; }
.sv-legal h1 {
  font: var(--weight-bold) 38px/1.1 var(--font-sans);
  letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 10px;
}
.sv-legal__meta { font: var(--font-body-sm); color: var(--text-tertiary); margin: 0 0 36px; }
.sv-legal__body {
  display: flex; flex-direction: column; gap: 32px;
  font: var(--font-body); color: var(--text-secondary);
}
.sv-legal__body section { scroll-margin-top: 88px; }
.sv-legal__body h2 { font: var(--font-h5); color: var(--text-primary); margin: 0 0 10px; }
.sv-legal__body h3 {
  font: var(--weight-semibold) var(--text-base)/1.4 var(--font-sans);
  color: var(--text-primary); margin: 18px 0 6px;
}
.sv-legal__body p { margin: 0 0 10px; }
.sv-legal__body p:last-child { margin-bottom: 0; }
.sv-legal__body ul { margin: 8px 0 0; padding-left: 22px; }
.sv-legal__body li { margin-bottom: 6px; }
.sv-legal__body table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.sv-legal__body th, .sv-legal__body td {
  text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border-subtle); font: var(--font-body-sm);
}
.sv-legal__body th { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Sichtbarer Platzhalter-Hinweis — vor dem Livegang entfernen */
.sv-hinweis {
  display: flex; gap: 12px; padding: 16px 18px; margin-bottom: 36px;
  background: var(--amber-50); border: 1px solid var(--amber-100);
  border-radius: var(--radius-lg); color: var(--amber-700);
  font: var(--font-body-sm);
}
.sv-hinweis svg { flex: none; margin-top: 1px; }
.sv-hinweis strong { display: block; margin-bottom: 2px; }


/* --- Formularkarte (Kontakt) --------------------------------------------- */

.sv-formcard {
  background: var(--surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: 32px;
}

/* Pflichtfeld-Stern, Feldfehler und Statusmeldung des Kontaktformulars */
.sv-field__pflicht { color: var(--red-600); font-weight: var(--weight-regular); }
.sv-field__fehler { font: var(--font-caption); color: var(--red-700); margin-top: 2px; }
.sv-field--fehler .sv-input,
.sv-field--fehler .sv-textarea { border-color: var(--red-600); }

.sv-formstatus {
  padding: 12px 14px; margin-bottom: 16px;
  border-radius: var(--radius-md); font: var(--font-body-sm);
}
.sv-formstatus[hidden] { display: none; }
.sv-formstatus--ok {
  background: var(--green-50); color: var(--green-700);
  border: 1px solid var(--green-100);
}
.sv-formstatus--fehler {
  background: var(--red-50); color: var(--red-700);
  border: 1px solid var(--red-100);
}

.sv-formhinweis {
  font: var(--font-caption); color: var(--text-tertiary);
  margin: 14px 0 0; text-align: center;
}


/* --- Tarifkarte (Preise) ------------------------------------------------- */

.sv-tier {
  position: relative; padding: 22px 18px; border-radius: var(--radius-xl);
  background: var(--canvas); border: 1.5px solid var(--border-default);
}
.sv-tier--highlight {
  background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow-lg);
}


/* --- Abrechnungsumschalter (Preise) -------------------------------------- */

.sv-billing {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-full); box-shadow: var(--shadow-xs);
}
.sv-billing__btn {
  border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font: var(--weight-semibold) var(--text-sm) var(--font-sans);
  background: transparent; color: var(--text-secondary);
  transition: var(--transition-colors);
}
.sv-billing__btn[aria-pressed="true"] { background: var(--brand-600); color: var(--neutral-0); }


/* --- Responsiv -----------------------------------------------------------
   Die Seiteninhalte stammen aus dem Design Canvas und tragen feste
   Spaltenrastert als Inline-Style. Damit sie auf kleinen Bildschirmen
   umbrechen, bekommt jedes Raster beim Konvertieren die Klasse .sv-grid;
   die Regeln hier ueberschreiben dann den Inline-Wert.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .sv-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
}

@media (max-width: 900px) {
  .sv-nav, .sv-header__actions { display: none; }
  .sv-burger { display: inline-flex; }
  .sv-mobile-nav:not([hidden]) { display: flex; }
  .sv-stepper__desc { display: none; }

  /* Ueberschriften des Canvas-Layouts sind fuer 1280px gesetzt */
  main h1[style] { font-size: clamp(30px, 7vw, 52px) !important; }
  main h2[style] { font-size: clamp(24px, 5vw, 34px) !important; }

  /* Vergleichstabelle horizontal scrollen lassen — aber die Merkmalsspalte
     muss umbrechen duerfen, sonst schiebt ein langer Hinweis die
     Wertespalten aus dem Sichtfeld. */
  .cmp-table { display: block; overflow-x: auto; }
  .cmp-table td:first-child, .cmp-table th:first-child {
    white-space: normal; min-width: 190px; max-width: 240px;
  }
}

@media (max-width: 640px) {
  .sv-grid { grid-template-columns: 1fr !important; }
  /* Kennzahlen bleiben zweispaltig, sonst wird der Kopf sehr lang */
  .sv-eckdaten { grid-template-columns: 1fr 1fr !important; }
  .sv-footer__bottom { flex-direction: column; gap: 10px; }
  .sv-stepper { overflow-x: auto; }
  main section > div[style] { padding-left: 20px !important; padding-right: 20px !important; }
}


/* --- Aufklappmenue in der Kopfzeile --------------------------------------
   Greift nur oberhalb von 900px; darunter uebernimmt .sv-mobile-nav.

   Zum Offenhalten beim Hinuebersteuern gibt es zwei Vorkehrungen:

   1. Zwischen Menuepunkt und Panel liegen 6px Abstand. Ohne Gegenmassnahme
      verlaesst der Zeiger dort kurz beide Flaechen und das Menue klappt zu.
      Das ::before des Panels ueberbrueckt diese Luecke unsichtbar, sodass der
      Weg nach unten durchgehend ueber das Menue fuehrt.
   2. site.js schliesst zusaetzlich verzoegert (siehe dort), damit auch
      diagonale Mausbewegungen ausserhalb der Spalte verziehen werden.

   Ohne JavaScript uebernimmt die reine :hover-Regel unten — dann ohne
   Verzoegerung, aber dank der Bruecke trotzdem bedienbar. */

.sv-nav__group { position: relative; display: inline-flex; }
.sv-nav__trigger { display: inline-flex; align-items: center; gap: 5px; }
.sv-nav__chevron { transition: transform 180ms var(--ease-out, ease-out); }
:root:not(.sv-js) .sv-nav__group:hover .sv-nav__chevron,
.sv-nav__group:focus-within .sv-nav__chevron,
.sv-nav__group.is-open .sv-nav__chevron { transform: rotate(180deg); }

.sv-nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0; width: 340px;
  background: var(--surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 8px 6px 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms var(--ease-out, ease-out), transform 180ms var(--ease-out, ease-out);
  z-index: 30;
}

/* Unsichtbare Bruecke ueber die 6px Luecke. Etwas breiter als der
   Menuepunkt, damit auch ein leicht schraeger Weg noch traegt. */
.sv-nav__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px; height: 10px;
}

/* Ohne JavaScript: reines :hover. Mit JavaScript setzt site.js .is-open und
   uebernimmt damit auch das verzoegerte Schliessen. */
:root:not(.sv-js) .sv-nav__group:hover .sv-nav__panel,
.sv-nav__group:focus-within .sv-nav__panel,
.sv-nav__group.is-open .sv-nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.sv-nav__panel-item {
  display: block; padding: 10px 12px; border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.sv-nav__panel-item:hover { background: var(--brand-50); text-decoration: none; }
.sv-nav__panel-item:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.sv-nav__panel-item[aria-current="page"] { background: var(--surface-hover); }
.sv-nav__panel-title {
  display: block; font: var(--weight-semibold) var(--text-sm) var(--font-sans);
  color: var(--text-primary);
}
.sv-nav__panel-desc {
  display: block; margin-top: 2px;
  font: var(--font-caption); color: var(--text-tertiary);
}
.sv-nav__panel-all {
  display: block; margin-top: 4px; padding: 9px 12px;
  border-top: 1px solid var(--border-subtle);
  font: var(--weight-semibold) var(--text-sm) var(--font-sans); color: var(--accent-text);
}

.sv-mobile-nav__link--sub {
  padding-left: 18px; font-size: var(--text-sm);
  border-left: 2px solid var(--border-subtle); border-radius: 0;
}

/* --- Branchenkacheln ----------------------------------------------------- */

.br-card, .br-tile {
  transition: box-shadow 200ms var(--ease-out, ease-out), transform 200ms var(--ease-out, ease-out);
}
.br-card:hover, .br-tile:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .br-card, .br-tile, .sv-nav__panel, .sv-nav__chevron { transition: none; }
  .br-card:hover, .br-tile:hover { transform: none; }
}

/* --- Branchenseiten: schmale Viewports ----------------------------------
   Die Entwuerfe kommen aus dem Design Canvas und sind fuer 1280px gesetzt.
   Zwei Stellen brauchen auf dem Telefon eine Umbruchregel, sonst schieben
   sie die Seite seitlich aus dem Bild. */

@media (max-width: 640px) {
  .sv-btnrow { flex-wrap: wrap; }
  .sv-btnrow > .sv-btn { flex: 1 1 100%; }

  /* Kundentyp und Dokumentenliste untereinander statt nebeneinander */
  .sv-vorlage { flex-direction: column; gap: 4px !important; }
  .sv-vorlage > .kw-ref { text-align: left !important; }
}

/* --- Rechtstexte: lange Komposita brechen lassen -------------------------
   Ueberschriften wie "Allgemeine Geschaeftsbedingungen" und Begriffe wie
   "Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz" sind auf schmalen
   Viewports breiter als die Spalte. Ohne Trennung schieben sie die ganze
   Seite seitlich aus dem Bild. */

.sv-legal h1,
.sv-legal__body {
  hyphens: auto;
  overflow-wrap: break-word;
}