/* ====================================================================
   Sylke bewegt – Startseite (Prototyp)
   Designsystem: siehe design-system.md
   Divi-Übertrag: siehe divi/UMSETZUNGSPLAN.md + divi/divi-custom-css.css
   ==================================================================== */

/* --------------------------------------------------------------------
   1. Lokale Schriften (@font-face)
   Die WOFF2-Dateien liegen in assets/fonts/ (aus dem Designsystem,
   Lora v37 / Poppins v24, Zeichensatz latin).
   Keine Verbindung zu Google Fonts oder externen CDNs.
   Hinweis: Lora liegt in 400/400i/500/700 vor – ein 600er-Schnitt
   existiert nicht. Serifen-Überschriften laufen deshalb auf 500.
   -------------------------------------------------------------------- */
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-v37-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-v37-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-v37-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-v37-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-v24-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------
   2. Design-Tokens
   Werte übernommen aus „Sylke bewegt Design System“
   (sylke-bewegt_allgemein/design-system/tokens/). Die Variablennamen
   dieser Seite bleiben bestehen; darunter liegen die Farbwerte des
   Designsystems, damit beide Seiten identisch aussehen.
   -------------------------------------------------------------------- */
:root {
  /* Markenfarbleiter (Designsystem) */
  --color-brand-900: #3a1722;
  --color-brand-800: #4f1f2e;
  --color-brand-700: #6b2a3f;
  --color-brand-600: #7d3149;
  --color-brand: #8f3955;
  --color-brand-400: #b3617c;
  --color-brand-300: #cf8ea3;
  --color-brand-200: #e3c3cd;
  --color-brand-100: #f3e2e7;

  /* Verbindliche Markenfarben */
  --color-primary: var(--color-brand);
  --color-background: #fbf3ef;      /* cream */
  --color-white: #ffffff;

  /* Ergänzende neutrale Farben */
  --color-text: #2b1c1f;            /* ink – dunkle, warme Textfarbe */
  --color-text-soft: #6b5a5c;       /* ink-soft – abgesenkter Text, Metaangaben */
  --color-surface: #f5e6de;         /* cream-deep – hellere Sekundärfläche */
  --color-border: #e8dad3;          /* dezente Rahmenfarbe */
  --color-dark: var(--color-brand-900);   /* dunkler Hintergrund Hero/Footer */
  --color-dark-soft: var(--color-brand-800);
  --color-primary-dark: var(--color-brand-700);  /* Hover-Zustand der Hauptfarbe */
  --color-rose-light: #d98ba4;      /* Akzent auf dunklem Grund (Hero-em, Labels) */

  /* Typografie */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --content-max: 1180px;
  --content-narrow: 760px;
  --space-section: clamp(4rem, 9vw, 7rem);
  --space-gap: clamp(1.5rem, 3vw, 2.5rem);

  /* Komponenten */
  --radius-card: 6px;
  --radius-btn: 3px;
  --shadow-card: 0 2px 8px rgba(58, 23, 34, 0.06),
                 0 12px 32px rgba(58, 23, 34, 0.10);
  --shadow-card-hover: 0 24px 56px rgba(58, 23, 34, 0.16);

  /* Header */
  --header-height: 76px;
}

/* --------------------------------------------------------------------
   3. Basis
   -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;                /* 17px */
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin: 0 0 1.1em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-primary);
}

/* Sichtbarer Tastaturfokus – global einheitlich */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.sb-newsletter :focus-visible,
.sb-hero :focus-visible,
.sb-footer :focus-visible {
  outline-color: var(--color-white);
}

/* Nur für Screenreader */
.sb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link */
.sb-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--radius-btn);
  transition: top 0.2s ease;
}
.sb-skip-link:focus-visible {
  top: 1rem;
}

/* --------------------------------------------------------------------
   4. Typografie-Komponenten
   -------------------------------------------------------------------- */
/* Sektionsüberschriften einfarbig in der Hauptfarbe */
.sb-heading-2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin: 0 0 1.25rem;
  color: var(--color-primary);
}
.sb-heading-3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.35;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.sb-heading--center {
  text-align: center;
}
.sb-heading--onDark {
  color: var(--color-white);
}

/* Kleines Label über Überschriften */
.sb-section-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 1rem;
}
.sb-section-label--onDark {
  color: var(--color-rose-light);
}
.sb-angebote .sb-section-label,
.sb-newsletter .sb-section-label,
.sb-testimonials .sb-section-label {
  text-align: center;
}

/* Textlink */
.sb-text-link {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.sb-text-link:hover {
  color: var(--color-primary-dark);
}
.sb-text-link--onDark {
  color: var(--color-rose-light);
}
.sb-text-link--onDark:hover {
  color: var(--color-white);
}

/* Platzhalter-Hinweise */
.sb-placeholder-note {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-soft);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.35rem 0.7rem;
  display: inline-block;
}

/* --------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------- */
.sb-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.9rem;
  min-height: 44px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sb-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.sb-btn--primary:hover {
  background: var(--color-primary-dark);
}

.sb-btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.sb-btn--secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Heller Umriss-Button für dunkle Flächen (Hero) */
.sb-btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}
.sb-btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-white);
}

.sb-btn--small {
  padding: 0.55rem 1.2rem;
  min-height: 40px;
  font-size: 0.875rem;
}
.sb-btn--wide {
  width: 100%;
}

/* --------------------------------------------------------------------
   6. Layout-Hilfen
   -------------------------------------------------------------------- */
.sb-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.sb-container--narrow {
  max-width: var(--content-narrow);
}
.sb-container--text {
  max-width: 780px;
}

.sb-section {
  padding-block: var(--space-section);
}

.sb-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.sb-two-col--uneven {
  grid-template-columns: 2fr 3fr;
  align-items: center;
}

/* --------------------------------------------------------------------
   7. Header / Navigation
   -------------------------------------------------------------------- */
.sb-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.sb-header-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.sb-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.sb-logo {
  width: clamp(160px, 18vw, 220px);
  height: auto;
}
/* Standard (transparenter Header über dunklem Hero): weißes Logo */
.sb-logo--dark { display: none; }
.sb-logo--light { display: block; }

/* Gescrollter Zustand: heller Hintergrund, rotes Logo, dunkle Links */
.sb-header.is-scrolled {
  background: rgba(251, 243, 239, 0.96);
  box-shadow: 0 2px 16px rgba(58, 23, 34, 0.1);
}
.sb-header.is-scrolled .sb-logo--dark { display: block; }
.sb-header.is-scrolled .sb-logo--light { display: none; }

.sb-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sb-nav-list a:not(.sb-btn) {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-white);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sb-nav-list a:not(.sb-btn):hover,
.sb-nav-list a:not(.sb-btn)[aria-current="page"] {
  border-bottom-color: var(--color-rose-light);
}
.sb-header.is-scrolled .sb-nav-list a:not(.sb-btn) {
  color: var(--color-text);
}
.sb-header.is-scrolled .sb-nav-list a:not(.sb-btn):hover,
.sb-header.is-scrolled .sb-nav-list a:not(.sb-btn)[aria-current="page"] {
  border-bottom-color: var(--color-primary);
}

/* Mobiler Menübutton */
.sb-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sb-nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.sb-header.is-scrolled .sb-nav-toggle-bar,
.sb-header.is-open .sb-nav-toggle-bar {
  background: var(--color-text);
}
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------- */
/* Reiner Farbhintergrund (warmer, dunkler Verlauf) – das Foto ist so
   zugeschnitten, dass weder Fenster noch Schrank sichtbar sind */
.sb-hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: center;
  background: linear-gradient(105deg,
    var(--color-dark) 0%,
    var(--color-dark) 40%,
    var(--color-dark-soft) 78%,
    #4a2e2e 100%);
  overflow: hidden;
  padding-top: var(--header-height);
}

/* Foto rechts, unterer Bildrand = Sektionsrand (knapp unter dem Dekolleté);
   linker Bildrand löst sich per Maske weich im Farbhintergrund auf */
.sb-hero-media {
  position: absolute;
  top: 36px;
  right: 0;
  bottom: 0;
  /* Breite: 60 % der Sektion, aber nie breiter als das Seitenverhältnis
     des Fotos bei voller Höhe erlaubt (sonst würde unten beschnitten) */
  width: min(60%, calc((100svh - 36px) * 632 / 600), 868px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 200px);
  mask-image: linear-gradient(to right, transparent 0, #000 200px);
}
.sb-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* rechte Bildseite (Sylke) hat Vorrang, beschnitten wird links */
  object-position: 100% 0;
}
/* Weicher Übergang der oberen Bildkante in den Farbhintergrund;
   dezente Abdunkelung am rechten Rand */
.sb-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(58, 23, 34, 0.9) 0, rgba(58, 23, 34, 0) 90px),
    linear-gradient(to left, rgba(58, 23, 34, 0.3) 0, rgba(58, 23, 34, 0) 110px);
}

.sb-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-block: clamp(2.5rem, 6vh, 5rem);
}

.sb-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  line-height: 1.12;
  color: var(--color-white);
  max-width: 12ch;
  margin: 0 0 1.5rem;
}
.sb-hero-title em {
  font-style: italic;
  color: var(--color-rose-light);
}

.sb-hero-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: var(--color-white);
  max-width: 44ch;
  margin-bottom: 1rem;
}
.sb-hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 48ch;
  margin-bottom: 2.2rem;
}

.sb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --------------------------------------------------------------------
   9. Abschnitt Orientierung & Haltung (Blöcke untereinander)
   -------------------------------------------------------------------- */
.sb-needs-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}
.sb-needs-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.sb-needs-marker {
  width: 10px;
  height: 10px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-primary);
}
.sb-needs-list p {
  margin: 0;
}

.sb-orientierung-block + .sb-orientierung-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Zweiter Block (Haltung) als ruhige, helle Karte hervorgehoben */
.sb-orientierung-block--haltung {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.sb-orientierung-block--haltung .sb-needs-list {
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------
   10. Angebote
   -------------------------------------------------------------------- */
.sb-angebote {
  background: var(--color-white);
}

.sb-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  margin-top: 3rem;
}

.sb-offer-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sb-offer-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.sb-offer-card-body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.sb-offer-card-body p {
  flex-grow: 1;
  font-size: 1rem;
}
.sb-offer-card-body .sb-text-link {
  align-self: flex-start;
  margin-top: 1.25rem;
}
.sb-offer-card-body .sb-text-link::after {
  content: " →";
}

/* Kartenbild (vorläufig: Ausschnitte aus dem alten Entwurf, Bildband wie
   dort ca. 3:1 – echte Fotos können später dasselbe Format nutzen) */
.sb-offer-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* Porträt im Bereich „Über Sylke" */
.sb-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

/* Bildplatzhalter (aktuell nicht in Verwendung – Komponente für künftige
   Unterseiten, solange dort noch Bilder fehlen) */
.sb-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background:
    linear-gradient(135deg, var(--color-surface) 0%, #efdcd2 100%);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 1rem;
}
.sb-img-placeholder--card {
  aspect-ratio: 3 / 2;
}
.sb-img-placeholder--portrait {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.sb-spiral {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  opacity: 0.5;
}

/* --------------------------------------------------------------------
   11. Newsletter
   -------------------------------------------------------------------- */
.sb-newsletter {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(143, 57, 85, 0.35) 0%, rgba(143, 57, 85, 0) 55%),
    var(--color-dark);
  color: var(--color-white);
}
.sb-newsletter-intro {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------
   12. Formulare (Newsletter + Kontakt)
   -------------------------------------------------------------------- */
.sb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.sb-form-field {
  margin-bottom: 1.25rem;
}
.sb-form-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.sb-optional {
  font-weight: 400;
  color: inherit;
  opacity: 0.7;
}
.sb-required {
  color: var(--color-primary);
}
.sb-newsletter .sb-required {
  color: var(--color-rose-light);
}

.sb-form input[type="text"],
.sb-form input[type="email"],
.sb-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.75rem 0.9rem;
  min-height: 48px;
}
.sb-form textarea {
  resize: vertical;
}
.sb-form input:focus-visible,
.sb-form textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}
.sb-newsletter .sb-form input:focus-visible {
  outline-color: var(--color-white);
}

.sb-form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-block: 0.5rem 1.5rem;
}
.sb-form-consent input[type="checkbox"] {
  /* 24 x 24 px ist das Mindestmaß für Zeigeflächen (WCAG 2.2, 2.5.8) */
  width: 24px;
  height: 24px;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
}
.sb-form-consent label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Entwurfshinweis nach Testklick */
.sb-form-note {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.4);
}
.sb-contact .sb-form-note {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-soft);
}
/* Rückmeldung nach dem Versand (kontakt.php) */
.sb-form-note.is-success {
  border-style: solid;
  border-color: var(--color-primary);
  color: var(--color-text);
}
.sb-form-note.is-error {
  border-style: solid;
  border-color: var(--color-brand-600);
  color: var(--color-brand-700);
}
.sb-form-note.is-busy {
  opacity: 0.7;
}

/* Honigtopf gegen Spam-Bots – für Menschen unsichtbar, für
   Screenreader ausgeblendet, aber im Formular vorhanden. */
.sb-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------
   13. Über Sylke
   -------------------------------------------------------------------- */
.sb-ueber .sb-btn {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------- */
.sb-testimonials {
  background: var(--color-white);
}
.sb-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  margin-top: 3rem;
}
.sb-testimonial {
  margin: 0;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.sb-testimonial blockquote {
  margin: 0;
  flex-grow: 1;
  position: relative;
}
.sb-testimonial blockquote::before {
  content: "\201E";                /* dezentes deutsches Anführungszeichen */
  font-family: var(--font-serif);
  font-size: 3.4rem;
  line-height: 0;
  color: var(--color-primary);
  opacity: 0.35;
  display: block;
  /* Luft zwischen Anführungszeichen und Zitattext.
     Ausgangswert war 1.4rem (22,4 px), dann 2 px und noch 1 mm (3,8 px)
     dazu – zusammen rund 28 px, also glatt 1.75rem. */
  margin-bottom: 1.75rem;
}
.sb-testimonial blockquote p {
  font-style: italic;
  font-size: 1rem;
}
.sb-testimonial figcaption {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------
   15. Kontakt
   -------------------------------------------------------------------- */
.sb-contact-list {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.sb-contact-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 0.75rem;
}
.sb-contact-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* Beide Spalten vertikal zentriert – die linke Spalte ist kürzer */
.sb-contact .sb-two-col {
  align-items: center;
}

.sb-contact-form-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-card);
}
.sb-contact-form-title {
  margin-bottom: 1.5rem;
}
.sb-contact-form-wrap .sb-btn {
  width: 100%;
}

/* --------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------- */
.sb-footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.85);
  padding-block: 4rem 2rem;
  font-size: 0.9375rem;
}
.sb-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sb-footer a:hover {
  color: var(--color-white);
}

.sb-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}
.sb-footer-brand img {
  width: 190px;
  margin-bottom: 1.25rem;
}
.sb-footer-brand p {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.7);
}

.sb-footer-heading {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-rose-light);
  margin: 0 0 1.1rem;
}
.sb-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.sb-footer-nav a,
.sb-footer-contact a {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  /* Mindesthöhe 24 px für Zeigeflächen (WCAG 2.2, 2.5.8) */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.sb-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}
.sb-footer-bottom p {
  margin: 0;
}
.sb-footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.75rem;
}
.sb-footer-legal a {
  /* Mindesthöhe 24 px für Zeigeflächen (WCAG 2.2, 2.5.8) */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .sb-two-col,
  .sb-two-col--uneven {
    gap: 2.5rem;
  }
  .sb-offer-grid,
  .sb-testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile Navigation + einspaltige Layouts */
@media (max-width: 860px) {
  .sb-nav-toggle {
    display: flex;
  }
  .sb-nav {
    position: absolute;
    top: var(--header-height);
    inset-inline: 0;
    background: var(--color-background);
    box-shadow: 0 14px 30px rgba(58, 23, 34, 0.15);
    display: none;
  }
  .sb-header.is-open .sb-nav {
    display: block;
  }
  /* Offenes Menü: Header immer hell, unabhängig von Scrollposition */
  .sb-header.is-open {
    background: var(--color-background);
  }
  .sb-header.is-open .sb-logo--dark { display: block; }
  .sb-header.is-open .sb-logo--light { display: none; }

  .sb-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 0 1.25rem;
  }
  .sb-nav-list a:not(.sb-btn) {
    display: block;
    padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
    color: var(--color-text) !important;
    border-bottom: 0;
    font-size: 1.0625rem;
  }
  .sb-nav-list a:not(.sb-btn):hover,
  .sb-nav-list a:not(.sb-btn)[aria-current="page"] {
    color: var(--color-primary) !important;
  }
  .sb-two-col,
  .sb-two-col--uneven {
    grid-template-columns: 1fr;
  }
  .sb-ueber-media {
    max-width: 420px;
  }
  .sb-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Hero gestapelt: Bild oben, Text darunter */
  .sb-hero {
    display: block;
    min-height: 0;
  }
  .sb-hero-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sb-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 632 / 600;
    object-position: center top;
  }
  .sb-hero-media::after {
    background:
      linear-gradient(to bottom, rgba(58, 23, 34, 0.9) 0, rgba(58, 23, 34, 0) 90px),
      linear-gradient(to top, rgba(58, 23, 34, 0.35) 0, rgba(58, 23, 34, 0) 70px);
  }
  .sb-hero-content {
    padding-block: 2.5rem 2rem;
  }
  .sb-hero-title {
    font-size: clamp(2.1rem, 9.5vw, 2.6rem);
    max-width: none;
  }
  .sb-hero-actions .sb-btn {
    flex: 1 1 100%;
  }
}

/* Smartphone */
@media (max-width: 680px) {
  .sb-offer-grid,
  .sb-testimonial-grid {
    grid-template-columns: 1fr;
  }
  .sb-footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .sb-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .sb-contact-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* Sehr schmale Geräte ab 320px */
@media (max-width: 360px) {
  body {
    font-size: 1rem;
  }
  .sb-hero-title {
    font-size: 2rem;
  }
  .sb-logo {
    width: 150px;
  }
}

/* --------------------------------------------------------------------
   18. Reduzierte Bewegung
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .sb-offer-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------
   19. Rechtstexte und Fehlerseite
   Lange Fließtexte (Impressum, Datenschutzerklärung) und die 404-Seite.
   Nur in der Wurzel-styles.css nötig – diese Seiten binden sie über den
   absoluten Pfad /assets/css/styles.css ein.
   -------------------------------------------------------------------- */
.sb-legal {
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.sb-legal h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 2.75rem 0 0.75rem;
}
.sb-legal h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-text);
  margin: 1.75rem 0 0.5rem;
}
.sb-legal h2:first-child,
.sb-legal h3:first-child {
  margin-top: 0;
}
.sb-legal p,
.sb-legal ul {
  margin: 0 0 1.1em;
}
.sb-legal ul {
  padding-left: 1.25rem;
}
.sb-legal li {
  margin-bottom: 0.4em;
}
.sb-legal address {
  font-style: normal;
  margin: 0 0 1.1em;
}
/* Lange Rechtsketten wie Paragraphenverweise dürfen umbrechen */
.sb-legal {
  overflow-wrap: break-word;
}
/* Die Absätze in Großbuchstaben aus dem Mustertext etwas beruhigen */
.sb-legal .sb-legal-shout {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-soft);
}

/* Quellenhinweis am Fuß eines Rechtstextes */
.sb-legal .sb-legal-quelle {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-soft);
}

/* Fehlerseite: mittig, viel Luft */
.sb-fehler {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}
.sb-fehler .sb-fehler-code {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 12vw, 6rem);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.25;
  margin: 0 0 0.5rem;
}
.sb-fehler-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ====================================================================
   20. Unterseiten
   Komponenten der Unterseiten – zuerst für „Über mich" entstanden und
   als Muster für die weiteren gedacht. Alle Werte nutzen die
   Design-Tokens aus Abschnitt 2. Die Startseite verwendet keine dieser
   Klassen; das Zusammenlegen ändert an ihr nichts.
   ==================================================================== */

/* 20.1 Header auf hellen Seiten -------------------------------------- */
/* Ohne dunklen Hero startet der Header sofort mit rotem Logo und
   dunklen Links (die Scroll-Zustände der Startseite bleiben aktiv). */
.sb-header--onLight .sb-logo--dark { display: block; }
.sb-header--onLight .sb-logo--light { display: none; }
.sb-header--onLight .sb-nav-list a:not(.sb-btn) {
  color: var(--color-text);
}
.sb-header--onLight .sb-nav-list a:not(.sb-btn):hover,
.sb-header--onLight .sb-nav-list a:not(.sb-btn)[aria-current="page"] {
  border-bottom-color: var(--color-primary);
}
.sb-header--onLight .sb-nav-toggle-bar {
  background: var(--color-text);
}
.sb-header--onLight :focus-visible {
  outline-color: var(--color-primary);
}

/* 20.2 Seiteneinstieg (heller Textauftakt statt Bild-Hero) ------------ */
.sb-page-intro {
  padding-top: calc(var(--header-height) + clamp(3.5rem, 8vw, 6rem));
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
/* Leitzitat in derselben Größe wie die übrigen Zitate der Seite */
.sb-page-intro-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  line-height: 1.55;
  color: var(--color-primary);
  max-width: 50ch;
  margin: 0 auto;
}
/* 20.3 Bereichs-Label („Wurzeln", „Unterrichten" …) ------------------- */
/* Einzige Überschrift je Bereich: kleines Versal-Label (ohne Linie) */
.sb-chapter-label {
  font-size: 0.875rem;
  margin: 0 0 1.75rem;
}

/* 20.4 Zweispaltige Bereiche (Bild 5 / Text 6 Anteile) ---------------- */
.sb-chapter-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* Bild rechts statt links (Reihenfolge im Markup: Text zuerst) */
.sb-chapter-grid--mediaRight {
  grid-template-columns: 6fr 5fr;
}

/* Gerahmtes Foto */
.sb-photo {
  margin: 0;
}
.sb-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.sb-photo--landscape img {
  aspect-ratio: 4 / 3;
}
/* Hochformat: Foto vollständig zeigen (kein Beschnitt) */
.sb-photo--portrait {
  max-width: 420px;
  justify-self: center;
}

/* 20.5 Hervorgehobene Karte (erste Faszienbehandlung) ----------------- */
.sb-insight-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: 2rem;
}
/* Auf weißen Sektionen hebt sich die Karte über die Hintergrundfarbe ab */
.sb-section--white .sb-insight-card {
  background: var(--color-background);
}

/* 20.7 Weiße Sektionsvariante ----------------------------------------- */
.sb-section--white {
  background: var(--color-white);
}

/* 20.8 Zitat (hell, zentriert) ---------------------------------------- */
.sb-quote {
  text-align: center;
}
.sb-quote blockquote {
  margin: 0 auto;
  max-width: 50ch;
}
.sb-quote blockquote::before {
  content: "\201E";
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0;
  display: block;
  margin-bottom: 2.75rem;   /* bewusst großzügiger Abstand zum Zitat */
  color: var(--color-primary);
  opacity: 0.35;
}
.sb-quote blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  line-height: 1.55;
  color: var(--color-primary);
}
/* Längeres Schlusszitat: etwas kleiner und in Textfarbe */
.sb-quote--closing blockquote p {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--color-text);
}

/* 20.9 Kurzvita -------------------------------------------------------- */
.sb-vita-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.sb-vita-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.sb-vita-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 1rem;
}
.sb-vita-marker {
  width: 7px;
  height: 7px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--color-primary);
}

/* 19.10 Responsive Ergänzungen ---------------------------------------- */
@media (max-width: 860px) {
  .sb-chapter-grid,
  .sb-chapter-grid--mediaRight {
    grid-template-columns: 1fr;
  }
  /* Text immer vor dem Bild, unabhängig von der Markup-Reihenfolge */
  .sb-chapter-grid .sb-photo {
    order: 2;
    max-width: 480px;
  }
  .sb-chapter-grid .sb-photo--portrait {
    max-width: 400px;
  }
  .sb-chapter-grid > div:not(.sb-photo) {
    order: 1;
  }
  .sb-vita-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ====================================================================
   21. Bildkopf, Spiral-Wasserzeichen, durchgehender Grund
   Muster für alle Unterseiten. Siehe README, Abschnitt
   „Gestaltungsmuster der Unterseiten".
   ==================================================================== */

/* Das Symbol-Depot darf keinen Platz einnehmen */
.sb-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 21.1 Bildkopf -------------------------------------------------------
   Die Breite des Bildfeldes wird aus dem Seitenverhältnis des Fotos
   (851 : 1280) und der Kopfhöhe berechnet. Zusammen mit object-fit:
   contain ist damit ausgeschlossen, dass Arme oder Füße abgeschnitten
   werden – egal wie breit der Bildschirm ist.
   -------------------------------------------------------------------- */
.sb-vita-hero {
  /* Seitenverhältnis des Kopffotos. Jede Seite bringt ihr eigenes Bild
     mit; über diese beiden Werte rechnet der Kopf die Breite des
     Bildfeldes aus. Vorgabe ist das Foto der Über-mich-Seite.
     Andere Formate über eine Zusatzklasse, siehe unten. */
  --bild-b: 851;
  --bild-h: 1280;

  /* Anteil der Bildschirmbreite, den das Bildfeld höchstens einnimmt.
     Dieselbe Zahl begrenzt unten die Kopfhöhe – nur wenn beide
     übereinstimmen, füllt das Foto sein Feld genau aus. Stimmen sie
     nicht überein, steht es eingerahmt darin und zeigt harte Kanten. */
  --bild-anteil: 46;

  /* Die Kopfhöhe ist zusätzlich durch die Bildschirmbreite begrenzt:
     das Bildfeld ist immer Höhe × Seitenverhältnis breit, und mehr als
     52 % der Breite darf es nicht beanspruchen. Ohne diese dritte Grenze
     wäre das Bildfeld auf schmaleren Desktops breiter als erlaubt, das
     Foto damit niedriger als der Kopf – und seine Oberkante stünde als
     harte Linie im Farbgrund. */
  --hero-hoehe: min(94svh, 900px,
                    calc(1vw * var(--bild-anteil) * var(--bild-h) / var(--bild-b)));
  position: relative;
  min-height: var(--hero-hoehe);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-height);
  background:
    radial-gradient(ellipse at 76% 6%,
      rgba(179, 97, 124, 0.32) 0%, rgba(179, 97, 124, 0) 60%),
    linear-gradient(102deg,
      var(--color-brand-900) 0%,
      var(--color-brand-900) 40%,
      var(--color-brand-800) 74%,
      #4a2e2e 100%);
}

.sb-vita-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(calc(1% * var(--bild-anteil)),
             calc(var(--hero-hoehe) * var(--bild-b) / var(--bild-h)));
  /* Linke Bildkante löst sich im Farbgrund auf, damit das Zitat
     hineinragen kann. Die Blende ist weich abgestuft, endet aber schon
     bei einem Drittel der Bildbreite – Sylkes ausgestreckte Hand liegt
     bei etwa 33 %, alles ab dort bleibt unverdeckt. */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.26) 12%,
    rgba(0,0,0,0.52) 18%, rgba(0,0,0,0.78) 24%, rgba(0,0,0,0.94) 29%,
    rgba(0,0,0,1) 33%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.26) 12%,
    rgba(0,0,0,0.52) 18%, rgba(0,0,0,0.78) 24%, rgba(0,0,0,0.94) 29%,
    rgba(0,0,0,1) 33%);
}
.sb-vita-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* nichts beschneiden */
  object-position: 100% 100%;  /* Sylke steht auf der unteren Kante */
}
/* Obere Bildkante weich in den Hintergrund überführen */
.sb-vita-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--color-brand-900) 0, rgba(58, 23, 34, 0) 130px);
}

.sb-vita-hero-inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-block: clamp(3rem, 8vh, 6rem);
}
.sb-vita-hero-zitat {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.85rem);
  line-height: 1.32;
  color: var(--color-white);
  max-width: 17ch;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.sb-vita-hero-name {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-200);
  margin: 0;
}

/* 21.2 Wasserzeichen --------------------------------------------------
   Die Spiralen liegen im Container .sb-verlauf, nicht in den einzelnen
   Sektionen. Nur so können sie über Kapitelgrenzen hinwegstehen und die
   Abschnitte optisch zusammenbinden.
   -------------------------------------------------------------------- */
.sb-wasserzeichen {
  position: absolute;
  z-index: 0;
  display: block;
  line-height: 0;
  pointer-events: none;
  color: var(--color-primary);
}
.sb-wasserzeichen svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Strichstärken kommen aus dem Symbol selbst (auslaufende Spirale),
     hier deshalb bewusst nichts vorgeben. */
}

/* Angeschnittene Spirale im Bildkopf, in Rosé auf dunklem Grund */
.sb-wasserzeichen--hero {
  bottom: 6%;
  left: 3%;
  width: 260px;
  height: 260px;
  z-index: 1;
  color: var(--color-rose-light);
  opacity: 0.12;
  transform: rotate(-18deg);
}

/* Sechs Spiralen entlang des Verlaufs. Alle vollständig im Bild – am
   Rand angeschnittene Spiralen wirkten wie ein Fehler statt wie ein
   Wasserzeichen. Die Werte sind bewusst krumm; ein gleichmäßiges Raster
   würde wie Tapete wirken. */
/* Der Randabstand ist in px angegeben und je Spirale so gewählt, dass
   auch das gedrehte Rechteck vollständig im Bild bleibt: eine um den
   Winkel a gedrehte Fläche der Breite b ragt je Seite um
   b * (|cos a| + |sin a| - 1) / 2 über ihre eigene Breite hinaus. */
.sb-wasserzeichen--1 { top:  5%; left:  48px; width: 300px; height: 300px; opacity: 0.11; transform: rotate(-14deg); }
.sb-wasserzeichen--2 { top: 20%; right: 76px; width: 340px; height: 340px; opacity: 0.09; transform: rotate( 30deg); }
.sb-wasserzeichen--3 { top: 36%; left:  56px; width: 250px; height: 250px; opacity: 0.12; transform: rotate(  8deg); }
.sb-wasserzeichen--4 { top: 53%; right: 64px; width: 300px; height: 300px; opacity: 0.10; transform: rotate(-24deg); }
.sb-wasserzeichen--5 { top: 70%; left:  56px; width: 330px; height: 330px; opacity: 0.09; transform: rotate( 16deg); }
.sb-wasserzeichen--6 { top: 86%; right: 64px; width: 260px; height: 260px; opacity: 0.11; transform: rotate( -6deg); }

/* 21.3 Durchgehender Grund -------------------------------------------
   Kein harter Wechsel Weiß/Creme mehr. Die Kapitel stehen auf einer
   Fläche; Rhythmus entsteht über die Spiralen und über zwei weiche
   Tonbänder an den Zitaten.
   -------------------------------------------------------------------- */
.sb-verlauf {
  position: relative;
  overflow: hidden;          /* verhindert seitliches Scrollen durch die
                                angeschnittenen Spiralen */
  background: var(--color-background);
}
.sb-verlauf > section {
  position: relative;
  z-index: 1;                /* Text immer über den Wasserzeichen */
}

/* Zitate als weiche Tonbänder statt als harte Farbkante */
.sb-verlauf .sb-quote {
  background: linear-gradient(180deg,
    rgba(245, 230, 222, 0) 0%,
    var(--color-surface) 14%,
    var(--color-surface) 86%,
    rgba(245, 230, 222, 0) 100%);
}

/* 21.4 Platzhalter-Bild ----------------------------------------------- */
.sb-photo--platzhalter figcaption {
  margin-top: 0.75rem;
  text-align: center;
}

/* 21.5 Schmale Bildschirme -------------------------------------------- */
@media (max-width: 860px) {
  .sb-vita-hero {
    display: block;
    min-height: 0;
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }
  .sb-vita-hero-media {
    position: relative;
    width: 100%;
    height: min(66svh, 520px);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sb-vita-hero-media img {
    object-position: 50% 100%;
  }
  .sb-vita-hero-media::after {
    background: linear-gradient(to bottom,
      var(--color-brand-900) 0, rgba(58, 23, 34, 0) 90px);
  }
  .sb-vita-hero-zitat {
    max-width: none;
  }
  .sb-wasserzeichen--hero {
    width: 190px;
    height: 190px;
    bottom: 2%;
    left: 30px;   /* 25 px Zuschlag für die Drehung, plus Luft */
  }
  /* Auf schmalen Bildschirmen weniger und kleinere Spiralen */
  .sb-wasserzeichen--2,
  .sb-wasserzeichen--5 { display: none; }
  .sb-wasserzeichen--1,
  .sb-wasserzeichen--3,
  .sb-wasserzeichen--4,
  .sb-wasserzeichen--6 { width: 220px; height: 220px; }
}

/* ====================================================================
   22. Kursangebote (Seite „Tanz")
   Ein Kurs je Abschnitt: Bild, Kurzbeschreibung, ausklappbarer Volltext,
   Zeit und Ort. Baut auf den Kapitel-Bausteinen aus Abschnitt 20 auf.
   ==================================================================== */

/* 22.0 Bildkopf mit Querformat --------------------------------------
   Die Über-mich-Seite stellt ihr hochformatiges Foto rechts neben den
   Text. Ein Querformat wäre dort so breit, dass für das Zitat nichts
   bliebe – deshalb hier vollflächig hinter dem Text, mit einem
   Farbschleier von links, der zur Bildmitte hin ausläuft.
   -------------------------------------------------------------------- */
.sb-vita-hero--vollbild {
  --hero-hoehe: min(88svh, 780px);
}
.sb-vita-hero--vollbild .sb-vita-hero-media {
  inset: 0;
  width: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}
.sb-vita-hero--vollbild .sb-vita-hero-media img {
  object-fit: cover;
  /* Kopf oben, die Hand an der Stange unten im Bild halten */
  object-position: 50% 30%;
}
.sb-vita-hero--vollbild .sb-vita-hero-media::after {
  background: linear-gradient(100deg,
    rgba(58, 23, 34, 0.95) 0%,
    rgba(58, 23, 34, 0.90) 24%,
    rgba(58, 23, 34, 0.62) 44%,
    rgba(58, 23, 34, 0.22) 64%,
    rgba(58, 23, 34, 0.00) 82%);
}

/* 22.1 Kurstitel und Kennsatz ---------------------------------------- */
.sb-kurs-titel {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 0.35rem;
}
/* „Schwerkraft. Flow. Ausdruck." – Dreiklang unter dem Titel */
.sb-kurs-kennsatz {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 1.1rem;
}
.sb-kurs-teaser {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* 22.2 Ausklappbarer Volltext -----------------------------------------
   <details>/<summary> statt eigener Klapp-Logik: funktioniert ohne
   JavaScript, ist von Haus aus tastaturbedienbar und wird von
   Screenreadern korrekt als auf-/zuklappbar angesagt.
   -------------------------------------------------------------------- */
.sb-mehr {
  margin: 1.25rem 0 1.75rem;
}
.sb-mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 24px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;          /* Standarddreieck weg, wir zeichnen selbst */
  transition: color 0.2s ease;
}
.sb-mehr > summary::-webkit-details-marker { display: none; }
.sb-mehr > summary:hover { color: var(--color-primary-dark); }
/* Zeichen: die Spirale aus dem Logo. Beim Öffnen dreht sie eine halbe
   Umdrehung – dieselbe Geste wie beim Prägungs-Button. */
.sb-mehr-zeichen {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  line-height: 0;
  transition: transform 0.45s cubic-bezier(0.34, 0.02, 0.2, 1);
}
.sb-mehr-zeichen svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sb-mehr[open] > summary .sb-mehr-zeichen {
  transform: rotate(180deg);
}
.sb-mehr[open] > summary { margin-bottom: 0.9rem; }

/* Bewusst ohne Linie oder Balken – Striche passen nicht zur Marke. */
.sb-mehr-inhalt {
  color: var(--color-text);
}

/* 22.3 Zeit und Ort ---------------------------------------------------
   Zwei eigens gezeichnete Zeichen. Das Designsystem führt bewusst keinen
   Zeichensatz; diese beiden folgen deshalb der Anmutung der Spirale:
   dünne Linie, runde Enden, keine Flächen. Was sie bedeuten, steht
   zusätzlich als Text da – sichtbar nur für Screenreader, denn ein
   Symbol allein ist keine zugängliche Beschriftung.
   Ohne Trennlinie darüber, siehe oben.
   -------------------------------------------------------------------- */
.sb-kurs-daten {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.sb-kurs-daten > li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.9rem;
  align-items: start;
}
.sb-kurs-zeichen {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 0.3rem;
  color: var(--color-primary);
  line-height: 0;
}
.sb-kurs-zeichen svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sb-kurs-wert {
  font-size: 1rem;
  line-height: 1.55;
}
/* Zusätze wie „Anfänger mit Vorkenntnissen" zurückgenommen */
.sb-kurs-wert b {
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-soft);
}

/* 22.4 Abschluss (auch von anderen Unterseiten genutzt) ------------------------------------------------------
   Bewusst hell. Zuvor stand hier ein dunkler Block – der ging nahtlos
   in den ebenfalls dunklen Footer über, zwei schwere Flächen ohne
   Trennung. Jetzt läuft die Seite gestuft aus: Creme im Textteil, ein
   Ton wärmer im Abschluss, dann der dunkle Footer als Schlusspunkt.
   Die Betonung kommt aus Typografie und Weißraum, nicht aus Farbe –
   so, wie das Designsystem es für Handlungsaufforderungen vorsieht. */
.sb-abschluss {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(143, 57, 85, 0.07) 0%, rgba(143, 57, 85, 0) 60%),
    var(--color-surface);
  text-align: center;
}
.sb-abschluss p {
  max-width: 46ch;
  margin-inline: auto;
}
.sb-abschluss .sb-abschluss-mail {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.sb-abschluss .sb-abschluss-mail:hover {
  color: var(--color-primary-dark);
}

/* 22.5 Schmale Bildschirme -------------------------------------------- */
@media (max-width: 860px) {
  .sb-vita-hero--vollbild .sb-vita-hero-media::after {
    background: linear-gradient(to bottom,
      rgba(58, 23, 34, 0.55) 0%,
      rgba(58, 23, 34, 0.30) 40%,
      rgba(58, 23, 34, 0.85) 100%);
  }
}

/* ====================================================================
   23. Körperbegleitung (Seite „Körperarbeit")
   ==================================================================== */

/* 23.0 Seitenverhältnis des Kopffotos (1280 × 960) ------------------- */
.sb-vita-hero--4zu3 {
  --bild-b: 4;
  --bild-h: 3;
  /* Ein Querformat darf breiter werden als ein Hochformat, sonst bliebe
     der Kopf sehr flach. */
  --bild-anteil: 52;
}

/* 23.1 Titel im Bildkopf ----------------------------------------------
   Die anderen Unterseiten tragen dort ein Zitat und setzen es kursiv.
   Hier steht ein Titel – aufrecht, größer, mit einer Zeile darunter. */
.sb-vita-hero-titel {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 0.5rem;
}
.sb-vita-hero-untertitel {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-brand-200);
  margin: 0 0 1.75rem;
}
.sb-vita-hero-text {
  color: rgba(255, 255, 255, 0.88);
  max-width: 38ch;
  margin: 0;
}

/* Platzhalter statt Foto, bis die Bilder vorliegen. Anders als ein
   <img> bringt ein <div> keine eigene Breite mit – ohne width: 100%
   schrumpft es auf die Breite seines Textes. */
.sb-vita-hero-media .sb-img-placeholder {
  width: 100%;
  height: 100%;
}
.sb-photo .sb-img-placeholder {
  width: 100%;
}

/* 23.2 Aufzählung mit der Spirale als Zeichen -------------------------
   Aus dem Entwurf übernommen: die Logo-Spirale als Aufzählungszeichen.
   Sie ersetzt den Punkt und bindet die Liste an die Marke. */
.sb-spiralliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}
.sb-spiralliste > li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 1rem;
  align-items: start;
}
.sb-listenzeichen {
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 0.3rem;
  color: var(--color-primary);
  opacity: 0.8;
  line-height: 0;
}
.sb-listenzeichen svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 23.3 Drei Gedanken nebeneinander ------------------------------------ */
.sb-drei-spalten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

/* 23.4 „Meine Arbeit" -------------------------------------------------
   Getöntes Band wie bei den Zitaten: oben und unten auslaufend, damit
   keine Kante entsteht, die gegen die Wasserzeichen arbeitet.
   -------------------------------------------------------------------- */
.sb-verlauf .sb-arbeit,
.sb-verlauf .sb-tonband {
  background: linear-gradient(180deg,
    rgba(245, 230, 222, 0) 0%,
    var(--color-surface) 12%,
    var(--color-surface) 88%,
    rgba(245, 230, 222, 0) 100%);
}
.sb-fortbildungen {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}
.sb-fortbildungen-titel {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 2rem 0 0.6rem;
}

/* 23.5 Schmale Bildschirme -------------------------------------------- */
@media (max-width: 860px) {
  .sb-drei-spalten {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   24. TanzSpielKarten
   ==================================================================== */

/* Seitenverhältnis des Kopffotos (961 × 1280 ≈ 3:4) */
.sb-vita-hero--3zu4 {
  --bild-b: 3;
  --bild-h: 4;
}

/* 24.1 Drei Anlässe -------------------------------------------------
   Aus dem Entwurf: „Genieße den Moment des Spiels!" – drei Zielgruppen
   nebeneinander, mittig gesetzt, mit der kleinen Spirale darüber.
   Liegt auf demselben getönten Band wie „Meine Arbeit" (siehe 23.4).
   -------------------------------------------------------------------- */
.sb-anlaesse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  text-align: center;
}
.sb-anlass-zeichen {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 0.9rem;
  color: var(--color-primary);
  opacity: 0.85;
  line-height: 0;
}
.sb-anlass-zeichen svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sb-anlass-titel {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

/* 24.2 Abstand nach einer Spiralliste ---------------------------------
   Ein Absatz direkt hinter dem letzten Aufzählungspunkt klebte an ihm
   und sah aus, als gehöre er noch dazu. */
.sb-spiralliste + p {
  margin-top: 2rem;
}

/* 24.3 Schmale Bildschirme -------------------------------------------- */
@media (max-width: 860px) {
  .sb-anlaesse {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ====================================================================
   25. Stimmen auf den Unterseiten
   Auf der Startseite stehen die Stimmen auf weißem Grund. Die
   Unterseiten haben einen durchgehenden getönten Verlauf – eine weiße
   Fläche über die volle Breite würde ihn zerschneiden. Deshalb hier:
   getöntes Band (siehe 23.4) mit weißen Karten ohne Rahmen.
   ==================================================================== */
.sb-testimonials--unterseite .sb-testimonial {
  background: var(--color-white);
  border: 0;
  box-shadow: var(--shadow-card);
}

/* Zwei Stimmen statt drei: mittig gesetzt, sonst klaffte rechts eine
   leere Spalte. */
.sb-testimonial-grid--zwei {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 680px) {
  .sb-testimonial-grid--zwei {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   26. Aufgefächertes Kartenblatt (Seite TanzSpielKarten)
   Alle 52 Karten in einem Blatt. Zehn liegen obenauf und sind zu
   lesen, die übrigen zeigen einen schmalen Streifen.

   Übernommen aus dem gelieferten Baustein, mit zwei Anpassungen:
   Der Baustein trug die Lage jeder Karte in einem style-Attribut.
   Unsere Content-Security-Policy (style-src 'self') lässt weder
   Inline-Styles noch <style>-Blöcke zu, deshalb steht das CSS hier
   und die 52 Lagen weiter unten als nth-child-Regeln. Das Skript
   liegt aus demselben Grund in /assets/js/faecher.js.

   Breiter Bogen ab 820 px, darunter ein kompakter Aufbau, bei dem
   sich die obersten fünf Karten auf zwei Höhen verteilen – so
   bleiben sie auf dem Telefon groß genug.
   ==================================================================== */
.tsk-faecher {
  --tsk-papier: transparent;     /* Hintergrund; der Verlauf soll durchlaufen */
  --tsk-max: 1240px;             /* Maximalbreite; mehr heißt größere Karten */
  --tsk-radius: .6cqw;           /* runde Ecken, skalieren mit den Karten */
  --tsk-dauer: 1.4s;
  --tsk-kurve: cubic-bezier(.16, .74, .26, 1);

  background: var(--tsk-papier);
  padding: clamp(1.5rem, 4vw, 4rem) clamp(.75rem, 3vw, 2rem);
}
.tsk-faecher *,
.tsk-faecher *::before,
.tsk-faecher *::after { box-sizing: border-box; }

.tsk-rahmen {
  max-width: var(--tsk-max);
  margin: 0 auto;
}

.tsk-buehne {
  position: relative;
  width: 100%;
  container-type: inline-size;
  /* kompakter Aufbau (Standard, Telefon) */
  --kb: 150px;                   /* Rückfall ohne Container-Einheiten */
  --basis: -3.3;
  aspect-ratio: 4.7687 / 3.3021;
}
@supports (width: 1cqw) {
  .tsk-buehne { --kb: 20.9702cqw; }
}
@media (min-width: 820px) {
  .tsk-buehne {
    --kb: 200px;
    --basis: -3.8;
    aspect-ratio: 6.0233 / 2.8940;
  }
  @supports (width: 1cqw) {
    .tsk-buehne { --kb: 16.6022cqw; }
  }
}

.tsk-karte {
  --lift: 0px;
  --w: var(--mw);
  --rr: var(--mrr);
  --sc: var(--msc);
  position: absolute;
  left: 47.3391%;
  top: 172.9117%;
  width: var(--kb);
  margin: 0;
  aspect-ratio: 1188/842;
  border-radius: var(--tsk-radius);
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 .06cqw .14cqw rgba(60, 42, 48, .10),
    0 .5cqw 1.1cqw rgba(60, 42, 48, .10),
    inset 0 0 0 1px rgba(60, 42, 48, .06);
  /* Ausgangslage: geschlossener Stapel am Scheitel des Bogens */
  transform:
    translate(-50%, -50%)
    rotate(var(--sw))
    translateY(calc(var(--kb) * var(--basis)))
    translateY(var(--lift))
    scale(.985);
  transition: transform var(--tsk-dauer) var(--tsk-kurve) var(--verz, 0s),
              box-shadow .8s ease;
  will-change: transform;
}
@media (min-width: 820px) {
  .tsk-karte {
    --w: var(--dw);
    --rr: var(--drr);
    --sc: var(--dsc);
    left: 48.7347%;
    top: 184.2063%;
  }
}
.tsk-karte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die zehn hervorgehobenen Karten liegen etwas höher. */
.tsk-karte--frei {
  box-shadow:
    0 .08cqw .2cqw rgba(60, 42, 48, .10),
    0 .9cqw 1.9cqw rgba(60, 42, 48, .14),
    0 2cqw 3.6cqw rgba(60, 42, 48, .10),
    inset 0 0 0 1px rgba(60, 42, 48, .06);
}

/* aufgefächert */
.tsk-buehne.ist-geoeffnet .tsk-karte {
  transform:
    translate(-50%, -50%)
    rotate(var(--w))
    translateY(calc(var(--kb) * var(--rr)))
    translateY(var(--lift))
    scale(var(--sc));
}

/* Nach dem Auffächern kurze Übergänge, damit das Anheben beim
   Darüberfahren nicht träge wirkt. */
.tsk-buehne.ist-ruhig .tsk-karte {
  transition: transform .55s cubic-bezier(.22, .7, .3, 1) 0s,
              box-shadow .45s ease;
  will-change: auto;
}
@media (hover: hover) and (pointer: fine) {
  .tsk-buehne.ist-ruhig .tsk-karte--frei:hover { --lift: -1.1cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .tsk-karte { transition: none; }
}

/* Das Blatt ist Bildmaterial, kein Text – beim Drucken bleibt es
   draußen, wie zuvor die Galerie. */
@media print {
  .tsk-faecher { display: none !important; }
}

/* 26.1 Lage der 52 Karten ---------------------------------------------
   Je Karte: --dw/--drr/--dsc für den breiten Bogen,
   --mw/--mrr/--msc für den kompakten Aufbau, --sw der Winkel im
   geschlossenen Stapel, --verz die Verzögerung beim Öffnen.
   Die Reihenfolge entspricht der Reihenfolge im Markup, von links
   nach rechts. Erzeugt aus dem gelieferten Baustein.
   -------------------------------------------------------------------- */
.tsk-karte:nth-child(1){--dw:-34.000deg;--drr:-3.80;--dsc:1.0;--mw:-24.000deg;--mrr:-3.30;--msc:1.0;--sw:-2.81deg;--verz:0.0s;z-index:1}
.tsk-karte:nth-child(2){--dw:-32.667deg;--drr:-3.80;--dsc:1.0;--mw:-23.059deg;--mrr:-3.30;--msc:1.0;--sw:-2.69deg;--verz:0.016s;z-index:2}
.tsk-karte:nth-child(3){--dw:-31.333deg;--drr:-4.20;--dsc:1.0;--mw:-22.118deg;--mrr:-3.75;--msc:1.0;--sw:-2.58deg;--verz:1.05s;z-index:3}
.tsk-karte:nth-child(4){--dw:-30.000deg;--drr:-3.80;--dsc:1.0;--mw:-21.176deg;--mrr:-3.30;--msc:1.0;--sw:-2.48deg;--verz:0.048s;z-index:4}
.tsk-karte:nth-child(5){--dw:-28.667deg;--drr:-3.80;--dsc:1.0;--mw:-20.235deg;--mrr:-3.30;--msc:1.0;--sw:-2.37deg;--verz:0.064s;z-index:5}
.tsk-karte:nth-child(6){--dw:-27.333deg;--drr:-3.80;--dsc:1.0;--mw:-19.294deg;--mrr:-3.30;--msc:1.0;--sw:-2.25deg;--verz:0.08s;z-index:6}
.tsk-karte:nth-child(7){--dw:-26.000deg;--drr:-3.80;--dsc:1.0;--mw:-18.353deg;--mrr:-3.30;--msc:1.0;--sw:-2.15deg;--verz:0.096s;z-index:7}
.tsk-karte:nth-child(8){--dw:-24.667deg;--drr:-4.80;--dsc:1.06;--mw:-17.412deg;--mrr:-5.25;--msc:1.04;--sw:-2.04deg;--verz:1.14s;z-index:907}
.tsk-karte:nth-child(9){--dw:-23.333deg;--drr:-3.80;--dsc:1.0;--mw:-16.471deg;--mrr:-3.30;--msc:1.0;--sw:-1.93deg;--verz:0.128s;z-index:9}
.tsk-karte:nth-child(10){--dw:-22.000deg;--drr:-3.80;--dsc:1.0;--mw:-15.529deg;--mrr:-3.30;--msc:1.0;--sw:-1.81deg;--verz:0.144s;z-index:10}
.tsk-karte:nth-child(11){--dw:-20.667deg;--drr:-3.80;--dsc:1.0;--mw:-14.588deg;--mrr:-3.30;--msc:1.0;--sw:-1.71deg;--verz:0.16s;z-index:11}
.tsk-karte:nth-child(12){--dw:-19.333deg;--drr:-3.80;--dsc:1.0;--mw:-13.647deg;--mrr:-3.30;--msc:1.0;--sw:-1.59deg;--verz:0.176s;z-index:12}
.tsk-karte:nth-child(13){--dw:-18.000deg;--drr:-4.20;--dsc:1.0;--mw:-12.706deg;--mrr:-3.75;--msc:1.0;--sw:-1.49deg;--verz:1.23s;z-index:13}
.tsk-karte:nth-child(14){--dw:-16.667deg;--drr:-3.80;--dsc:1.0;--mw:-11.765deg;--mrr:-3.30;--msc:1.0;--sw:-1.38deg;--verz:0.208s;z-index:14}
.tsk-karte:nth-child(15){--dw:-15.333deg;--drr:-3.80;--dsc:1.0;--mw:-10.824deg;--mrr:-3.30;--msc:1.0;--sw:-1.26deg;--verz:0.224s;z-index:15}
.tsk-karte:nth-child(16){--dw:-14.000deg;--drr:-3.80;--dsc:1.0;--mw:-9.882deg;--mrr:-3.30;--msc:1.0;--sw:-1.16deg;--verz:0.24s;z-index:16}
.tsk-karte:nth-child(17){--dw:-12.667deg;--drr:-3.80;--dsc:1.0;--mw:-8.941deg;--mrr:-3.30;--msc:1.0;--sw:-1.04deg;--verz:0.256s;z-index:17}
.tsk-karte:nth-child(18){--dw:-11.333deg;--drr:-4.80;--dsc:1.06;--mw:-8.000deg;--mrr:-4.50;--msc:1.04;--sw:-0.94deg;--verz:1.32s;z-index:917}
.tsk-karte:nth-child(19){--dw:-10.000deg;--drr:-3.80;--dsc:1.0;--mw:-7.059deg;--mrr:-3.30;--msc:1.0;--sw:-0.82deg;--verz:0.288s;z-index:19}
.tsk-karte:nth-child(20){--dw:-8.667deg;--drr:-3.80;--dsc:1.0;--mw:-6.118deg;--mrr:-3.30;--msc:1.0;--sw:-0.71deg;--verz:0.304s;z-index:20}
.tsk-karte:nth-child(21){--dw:-7.333deg;--drr:-3.80;--dsc:1.0;--mw:-5.176deg;--mrr:-3.30;--msc:1.0;--sw:-0.6deg;--verz:0.32s;z-index:21}
.tsk-karte:nth-child(22){--dw:-6.000deg;--drr:-3.80;--dsc:1.0;--mw:-4.235deg;--mrr:-3.30;--msc:1.0;--sw:-0.49deg;--verz:0.336s;z-index:22}
.tsk-karte:nth-child(23){--dw:-4.667deg;--drr:-4.20;--dsc:1.0;--mw:-3.294deg;--mrr:-3.75;--msc:1.0;--sw:-0.39deg;--verz:1.41s;z-index:23}
.tsk-karte:nth-child(24){--dw:-3.333deg;--drr:-3.80;--dsc:1.0;--mw:-2.353deg;--mrr:-3.30;--msc:1.0;--sw:-0.28deg;--verz:0.368s;z-index:24}
.tsk-karte:nth-child(25){--dw:-2.000deg;--drr:-3.80;--dsc:1.0;--mw:-1.412deg;--mrr:-3.30;--msc:1.0;--sw:-0.17deg;--verz:0.384s;z-index:25}
.tsk-karte:nth-child(26){--dw:-0.667deg;--drr:-3.80;--dsc:1.0;--mw:-0.471deg;--mrr:-3.30;--msc:1.0;--sw:-0.06deg;--verz:0.4s;z-index:26}
.tsk-karte:nth-child(27){--dw:0.667deg;--drr:-3.80;--dsc:1.0;--mw:0.471deg;--mrr:-3.30;--msc:1.0;--sw:0.06deg;--verz:0.416s;z-index:27}
.tsk-karte:nth-child(28){--dw:2.000deg;--drr:-4.80;--dsc:1.06;--mw:1.412deg;--mrr:-5.25;--msc:1.04;--sw:0.17deg;--verz:1.5s;z-index:927}
.tsk-karte:nth-child(29){--dw:3.333deg;--drr:-3.80;--dsc:1.0;--mw:2.353deg;--mrr:-3.30;--msc:1.0;--sw:0.28deg;--verz:0.448s;z-index:29}
.tsk-karte:nth-child(30){--dw:4.667deg;--drr:-3.80;--dsc:1.0;--mw:3.294deg;--mrr:-3.30;--msc:1.0;--sw:0.39deg;--verz:0.464s;z-index:30}
.tsk-karte:nth-child(31){--dw:6.000deg;--drr:-3.80;--dsc:1.0;--mw:4.235deg;--mrr:-3.30;--msc:1.0;--sw:0.49deg;--verz:0.48s;z-index:31}
.tsk-karte:nth-child(32){--dw:7.333deg;--drr:-3.80;--dsc:1.0;--mw:5.176deg;--mrr:-3.30;--msc:1.0;--sw:0.6deg;--verz:0.496s;z-index:32}
.tsk-karte:nth-child(33){--dw:8.667deg;--drr:-4.20;--dsc:1.0;--mw:6.118deg;--mrr:-3.75;--msc:1.0;--sw:0.71deg;--verz:1.59s;z-index:33}
.tsk-karte:nth-child(34){--dw:10.000deg;--drr:-3.80;--dsc:1.0;--mw:7.059deg;--mrr:-3.30;--msc:1.0;--sw:0.82deg;--verz:0.528s;z-index:34}
.tsk-karte:nth-child(35){--dw:11.333deg;--drr:-3.80;--dsc:1.0;--mw:8.000deg;--mrr:-3.30;--msc:1.0;--sw:0.94deg;--verz:0.544s;z-index:35}
.tsk-karte:nth-child(36){--dw:12.667deg;--drr:-3.80;--dsc:1.0;--mw:8.941deg;--mrr:-3.30;--msc:1.0;--sw:1.04deg;--verz:0.56s;z-index:36}
.tsk-karte:nth-child(37){--dw:14.000deg;--drr:-3.80;--dsc:1.0;--mw:9.882deg;--mrr:-3.30;--msc:1.0;--sw:1.16deg;--verz:0.576s;z-index:37}
.tsk-karte:nth-child(38){--dw:15.333deg;--drr:-4.80;--dsc:1.06;--mw:10.824deg;--mrr:-4.50;--msc:1.04;--sw:1.26deg;--verz:1.68s;z-index:937}
.tsk-karte:nth-child(39){--dw:16.667deg;--drr:-3.80;--dsc:1.0;--mw:11.765deg;--mrr:-3.30;--msc:1.0;--sw:1.38deg;--verz:0.608s;z-index:39}
.tsk-karte:nth-child(40){--dw:18.000deg;--drr:-3.80;--dsc:1.0;--mw:12.706deg;--mrr:-3.30;--msc:1.0;--sw:1.49deg;--verz:0.624s;z-index:40}
.tsk-karte:nth-child(41){--dw:19.333deg;--drr:-3.80;--dsc:1.0;--mw:13.647deg;--mrr:-3.30;--msc:1.0;--sw:1.59deg;--verz:0.64s;z-index:41}
.tsk-karte:nth-child(42){--dw:20.667deg;--drr:-3.80;--dsc:1.0;--mw:14.588deg;--mrr:-3.30;--msc:1.0;--sw:1.71deg;--verz:0.656s;z-index:42}
.tsk-karte:nth-child(43){--dw:22.000deg;--drr:-4.20;--dsc:1.0;--mw:15.529deg;--mrr:-3.75;--msc:1.0;--sw:1.81deg;--verz:1.77s;z-index:43}
.tsk-karte:nth-child(44){--dw:23.333deg;--drr:-3.80;--dsc:1.0;--mw:16.471deg;--mrr:-3.30;--msc:1.0;--sw:1.93deg;--verz:0.688s;z-index:44}
.tsk-karte:nth-child(45){--dw:24.667deg;--drr:-3.80;--dsc:1.0;--mw:17.412deg;--mrr:-3.30;--msc:1.0;--sw:2.04deg;--verz:0.704s;z-index:45}
.tsk-karte:nth-child(46){--dw:26.000deg;--drr:-3.80;--dsc:1.0;--mw:18.353deg;--mrr:-3.30;--msc:1.0;--sw:2.15deg;--verz:0.72s;z-index:46}
.tsk-karte:nth-child(47){--dw:27.333deg;--drr:-3.80;--dsc:1.0;--mw:19.294deg;--mrr:-3.30;--msc:1.0;--sw:2.25deg;--verz:0.736s;z-index:47}
.tsk-karte:nth-child(48){--dw:28.667deg;--drr:-4.80;--dsc:1.06;--mw:20.235deg;--mrr:-5.25;--msc:1.04;--sw:2.37deg;--verz:1.86s;z-index:947}
.tsk-karte:nth-child(49){--dw:30.000deg;--drr:-3.80;--dsc:1.0;--mw:21.176deg;--mrr:-3.30;--msc:1.0;--sw:2.48deg;--verz:0.768s;z-index:49}
.tsk-karte:nth-child(50){--dw:31.333deg;--drr:-3.80;--dsc:1.0;--mw:22.118deg;--mrr:-3.30;--msc:1.0;--sw:2.58deg;--verz:0.784s;z-index:50}
.tsk-karte:nth-child(51){--dw:32.667deg;--drr:-3.80;--dsc:1.0;--mw:23.059deg;--mrr:-3.30;--msc:1.0;--sw:2.69deg;--verz:0.8s;z-index:51}
.tsk-karte:nth-child(52){--dw:34.000deg;--drr:-3.80;--dsc:1.0;--mw:24.000deg;--mrr:-3.30;--msc:1.0;--sw:2.81deg;--verz:0.816s;z-index:52}

/* ====================================================================
   27. Untermenü in der Hauptnavigation
   „TanzSpielKarten" hat zwei Unterpunkte. Der Punkt selbst bleibt ein
   Link: wer ihn anklickt oder antippt, landet auf der Beschreibung.
   Das Untermenü öffnet am Schreibtisch beim Darüberfahren und beim
   Tabben; im Klappmenü steht es eingerückt darunter. Kein Skript.
   ==================================================================== */
.sb-nav-zweig {
  position: relative;
  /* Verlängert die Hoverfläche nach unten, damit der Weg von der
     Beschriftung ins Untermenü nicht durch eine Lücke führt. */
  padding-bottom: 0.7rem;
  margin-bottom: -0.7rem;
}

/* Kleiner Winkel als Hinweis, dass es weitergeht. */
.sb-nav-pfeil {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  opacity: 0.75;
}

.sb-nav-unterliste {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 13rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--color-background);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
}
.sb-nav-zweig:hover > .sb-nav-unterliste,
.sb-nav-zweig:focus-within > .sb-nav-unterliste {
  opacity: 1;
  visibility: visible;
}

/* Eine Klasse mehr als die Farbregeln des Kopfes (Abschnitt 7), damit
   die Einträge unabhängig von der Scrollposition dunkel bleiben. */
.sb-header .sb-nav-list .sb-nav-unterliste a:not(.sb-btn) {
  display: block;
  padding: 0.6rem 1.2rem;
  color: var(--color-text);
  border-bottom: 0;
  font-weight: 400;
}
.sb-header .sb-nav-list .sb-nav-unterliste a:not(.sb-btn):hover,
.sb-header .sb-nav-list .sb-nav-unterliste a:not(.sb-btn)[aria-current="page"] {
  color: var(--color-primary);
}

/* ====================================================================
   28. Workshop-Seite
   Diese Seite darf anders aussehen als die übrigen Unterseiten: heller
   Kopf statt dunklem Foto, Aquarellwischer statt Fotografien. Die
   Wischer sind echte Karten, so weit heruntergerechnet, dass nur die
   Farbe übrig bleibt – siehe /assets/workshop/.
   ==================================================================== */

/* 28.1 Kopf ----------------------------------------------------------- */
.ws-kopf {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  padding: calc(var(--header-height) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 7vw, 6rem);
}

/* Der große Wischer liegt rechts hinten und läuft nach allen Seiten
   weich aus – deshalb die Maske statt einer harten Kante. */
.ws-kopf-wischer {
  position: absolute;
  top: -12%;
  right: -18%;
  width: min(78%, 900px);
  height: auto;
  opacity: 0.5;
  border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 74%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 74%);
  pointer-events: none;
}

.ws-kopf-inhalt {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.ws-titel {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 1.08;
  color: var(--color-text);
  margin: 0.4rem 0 0.6rem;
}
.ws-titel em {
  font-style: italic;
  color: var(--color-primary);
}

.ws-untertitel {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--color-primary);
  margin: 0 0 1.6rem;
}

.ws-lead {
  font-size: 1.0625rem;
  line-height: 1.85;
  max-width: 36rem;
  margin: 0;
}

.ws-kopf-knopf {
  margin: 2.2rem 0 0;
}

/* Drei Karten, wie hingelegt. Erst ab 1000 px eingeblendet – darunter
   nehmen sie dem Text den Platz weg. */
.ws-kopf-karten {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 5vw, 4rem);
  display: none;
  z-index: 1;
  pointer-events: none;
}
.ws-kopf-karten img {
  display: block;
  width: clamp(120px, 13vw, 190px);
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(60, 42, 48, .12),
              0 16px 34px rgba(60, 42, 48, .16);
}
.ws-kopf-karten img:nth-child(1) { transform: rotate(-8deg); }
.ws-kopf-karten img:nth-child(2) { transform: rotate(3deg) translateY(14px); margin-left: -3.2rem; }
.ws-kopf-karten img:nth-child(3) { transform: rotate(11deg) translateY(2px); margin-left: -3.2rem; }
@media (min-width: 1000px) {
  .ws-kopf-karten { display: flex; }
}

/* 28.2 Einladung ------------------------------------------------------ */
.ws-einladung {
  background: var(--color-background);
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
.ws-gross {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 1.2rem;
}

/* 28.3 Was dich erwartet ---------------------------------------------- */
.ws-abschnitt-titel {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  color: var(--color-primary);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.ws-erwartet {
  background: var(--color-surface);
}

.ws-felder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 820px) {
  .ws-felder { grid-template-columns: 1fr 1fr; }
}

.ws-feld {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 96px;
}

/* Der Wischer als Medaillon: organische Ecken, leicht gedreht, damit
   keine zwei gleich aussehen. */
.ws-feld-wischer {
  flex: none;
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 56% 44% 50% 50% / 48% 54% 46% 52%;
  box-shadow: 0 6px 18px rgba(60, 42, 48, .14);
}
.ws-feld:nth-child(2) .ws-feld-wischer { border-radius: 47% 53% 58% 42% / 55% 45% 55% 45%; transform: rotate(-6deg); }
.ws-feld:nth-child(3) .ws-feld-wischer { border-radius: 60% 40% 44% 56% / 42% 58% 42% 58%; transform: rotate(4deg); }
.ws-feld:nth-child(4) .ws-feld-wischer { border-radius: 44% 56% 53% 47% / 57% 43% 57% 43%; transform: rotate(-3deg); }
.ws-feld:nth-child(5) .ws-feld-wischer { border-radius: 53% 47% 41% 59% / 45% 56% 44% 55%; transform: rotate(7deg); }

/* Die Spirale liegt mittig auf dem Medaillon. Der weiche Schatten
   sorgt dafür, dass sie auch auf einem hellen Wischer noch zu sehen
   ist – die Aquarelle sind unterschiedlich kräftig. */
.ws-feld-zeichen {
  position: absolute;
  left: 46px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  color: var(--color-white);
  line-height: 0;
  opacity: 0.95;
  filter: drop-shadow(0 1px 2.5px rgba(60, 42, 48, 0.5));
}
.ws-feld-zeichen svg { display: block; width: 100%; height: 100%; }

.ws-feld-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* 28.4 Das Spiel ------------------------------------------------------ */
.ws-spiel {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  text-align: center;
}
.ws-spiel-wischer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(115%, 1200px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.38;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 34%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 34%, transparent 72%);
  pointer-events: none;
}
.ws-spiel-inhalt {
  position: relative;
  z-index: 1;
}
.ws-satz {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 2.75rem);
  line-height: 1.25;
  color: var(--color-primary);
  margin: 1.8rem 0;
}
.ws-spiel-schluss {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 0;
}

/* 28.5 Für wen -------------------------------------------------------- */
.ws-fuerwen {
  background: var(--color-background);
}

/* 28.6 Rahmen und Termine --------------------------------------------- */
.ws-rahmen {
  background: var(--color-surface);
}
.ws-rahmen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .ws-rahmen-grid { grid-template-columns: 1.35fr 1fr; }
}

.ws-steckbrief {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.ws-steckbrief li {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 1rem;
  row-gap: 0.15rem;
}
.ws-steckbrief-zeichen {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  margin-top: 0.2rem;
  color: var(--color-primary);
  line-height: 0;
}
.ws-steckbrief-zeichen svg { display: block; width: 100%; height: 100%; }
.ws-steckbrief-was {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.ws-steckbrief-wert {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ws-termine {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-card);
}
.ws-termine-titel {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 1.25rem;
}
.ws-termin-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.ws-termin-jahr {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-text);
}
.ws-termin-was {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin-top: 0.2rem;
}

/* 28.7 Abschluss ------------------------------------------------------ */
.ws-abschluss {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
}
.ws-abschluss-spirale {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 96%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  opacity: 0.07;
  line-height: 0;
  pointer-events: none;
}
.ws-abschluss-spirale svg { display: block; width: 100%; height: 100%; }
.ws-abschluss .sb-container { position: relative; z-index: 1; }
.ws-abschluss-titel {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  line-height: 1.25;
  color: var(--color-white);
  margin: 0 0 1.2rem;
}
.ws-abschluss p {
  color: rgba(255, 255, 255, 0.88);
}
.ws-abschluss .sb-abschluss-mail {
  color: var(--color-rose-light);
}
.ws-abschluss-zurueck {
  margin-top: 2rem;
}
.ws-abschluss-zurueck a {
  color: rgba(255, 255, 255, 0.88);
}

/* 28.8 Schmale Bildschirme -------------------------------------------- */
@media (max-width: 860px) {
  /* Im Klappmenü steht das Untermenü eingerückt unter dem Punkt. */
  .sb-nav-zweig {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .sb-nav-pfeil { display: none; }
  .sb-nav-unterliste {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .sb-header .sb-nav-list .sb-nav-unterliste a:not(.sb-btn) {
    padding: 0.6rem clamp(1.25rem, 4vw, 2.5rem) 0.6rem calc(clamp(1.25rem, 4vw, 2.5rem) + 1.4rem);
    font-size: 1rem;
    color: var(--color-text-soft);
  }

  .ws-feld-wischer { width: 74px; height: 74px; }
  .ws-feld-zeichen { left: 37px; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}