/* Schriften: lokal, Latin-Subset, SIL Open Font License (Lizenztexte in src/fonts/) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/fraunces-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}

/* Farben (erzeugt aus src/lib/farben.js) */
:root {
  --sb-waldgruen: #113529;
  --sb-kieferngruen: #2F5A45;
  --sb-salbei: #6E8F6A;
  --sb-moos: #A9C3A0;
  --sb-nebelgruen: #D6E3CC;
  --sb-creme: #EDEAE0;
  --sb-bernstein: #C9963C;
  --sb-tinte: #1B2A22;
  --sb-bernstein-dunkel: #8C5F1C;
  --sb-bernstein-text: #A8782A;
}

/* Grundlagen für alle Studio-Seiten */

:root {
  /* Farbe des hervorgehobenen Worts im Hero und Text-/Grundfarbe des Haupt-Buttons.
     Entschieden: Wort in Marken-Bernstein, Button Waldgrün auf Bernstein (Variante B).
     Variante C (Weiß auf --sb-bernstein-dunkel) ist als .sb-knopf--dunkel freigegeben. */
  --sb-akzent-wort: var(--sb-bernstein);
  --sb-knopf-grund: var(--sb-bernstein);
  --sb-knopf-text: var(--sb-waldgruen);
  --sb-breite: 1104px;
  --sb-rand: max(16px, 4vw);
  --sb-schrift-text: Georgia, 'Times New Roman', serif;
  --sb-schrift-titel: 'Fraunces', Georgia, serif;
  --sb-schrift-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sb-schrift-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.sb-seite {
  margin: 0;
  background: var(--sb-creme);
  color: var(--sb-tinte);
  font-family: var(--sb-schrift-text);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--sb-schrift-titel);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--sb-waldgruen);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(40px, 8vw, 82px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.6vw, 44px); }
h3 { font-size: clamp(22px, 2.6vw, 27px); }
p { margin: 0 0 1em; }

a { color: var(--sb-waldgruen); text-decoration-color: var(--sb-bernstein); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 3px solid var(--sb-fokus, var(--sb-waldgruen)); outline-offset: 3px; border-radius: 2px; }

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

/* Papierkorn (Sprunglink und Filter-Bibliothek stehen in _rahmen.css) */
.sb-papier {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: multiply;
  opacity: .55;
}

/* ---------- Layout ---------- */
.sb-breite { max-width: var(--sb-breite); margin-inline: auto; padding-inline: var(--sb-rand); }
.sb-abschnitt { position: relative; isolation: isolate; padding-block: clamp(56px, 9vw, 104px); }
.sb-abschnitt--creme { background: var(--sb-creme); color: var(--sb-tinte); }
.sb-abschnitt--wald {
  --sb-fokus: var(--sb-bernstein);
  background: var(--sb-waldgruen);
  color: var(--sb-creme);
}
.sb-abschnitt--wald h2,
.sb-abschnitt--wald h3 { color: var(--sb-creme); }
.sb-abschnitt--wald a { color: var(--sb-creme); }
.sb-abschnitt--wald .sb-karte { --sb-fokus: var(--sb-waldgruen); }
.sb-abschnitt--wald .sb-karte a { color: var(--sb-waldgruen); }

.sb-dachzeile {
  font-family: var(--sb-schrift-mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-kieferngruen);
  margin: 0 0 14px;
}
.sb-abschnitt--wald .sb-dachzeile { color: var(--sb-moos); }

/* Kopf- und Fußzeile. Alles unter .sb-kopf / .sb-fuss gekapselt,
   damit das Paket auch auf der Mutkompass-Landingpage neben deren CSS funktioniert. */

.sb-kopf, .sb-kopf *, .sb-fuss, .sb-fuss * { box-sizing: border-box; }

/* Filter-Bibliothek (unsichtbar) */
.sb-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Sprunglink für Tastatur-Nutzer */
.sb-sprung {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--sb-waldgruen);
  color: var(--sb-creme);
  font: 500 16px/1.4 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.sb-sprung:focus { top: 12px; color: var(--sb-creme); outline: 3px solid var(--sb-bernstein); outline-offset: 3px; }

/* ---------- Kopfzeile ---------- */
.sb-kopf {
  position: relative;
  z-index: 10;
  background: var(--sb-creme);
  color: var(--sb-waldgruen);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
.sb-kopf__innen {
  max-width: 1104px;
  margin: 0 auto;
  padding: 14px max(16px, 4vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.sb-kopf__marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sb-waldgruen);
  text-decoration: none;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
}
.sb-kopf__marke img { display: block; width: 44px; height: 44px; }
.sb-kopf__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}
.sb-kopf__nav a {
  display: inline-block;
  padding: 10px 0;
  color: var(--sb-waldgruen);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color .2s ease;
}
.sb-kopf__nav a:hover { text-decoration-color: var(--sb-bernstein); }
.sb-kopf__menueknopf { display: none; }
.sb-kopf__linie { display: block; width: 100%; height: 8px; }
.sb-kopf a:focus-visible,
.sb-kopf button:focus-visible {
  outline: 3px solid var(--sb-waldgruen);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .sb-kopf__marke { font-size: 18px; }
  /* Ohne JavaScript bleiben die Links sichtbar und rutschen unter die Marke */
  .sb-kopf__nav { flex-basis: 100%; }
  .sb-kopf__nav ul { gap: 0 18px; }

  .js .sb-kopf__menueknopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    margin: 0;
    font: 500 16px/1 'Inter', system-ui, sans-serif;
    color: var(--sb-waldgruen);
    background: transparent;
    border: 1.5px solid var(--sb-kieferngruen);
    border-radius: 999px;
    cursor: pointer;
  }
  .js .sb-kopf__nav { display: none; }
  .js .sb-kopf__menueknopf[aria-expanded="true"] + .sb-kopf__nav { display: block; }
  .js .sb-kopf__nav ul { flex-direction: column; padding: 6px 0 4px; }
  .js .sb-kopf__nav a { display: block; padding: 12px 0; }
}

/* ---------- Fußzeile ---------- */
.sb-fuss {
  background: var(--sb-waldgruen);
  color: var(--sb-creme);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.sb-fuss__innen {
  max-width: 1104px;
  margin: 0 auto;
  padding: 44px max(16px, 4vw) 40px;
  display: grid;
  gap: 14px;
}
.sb-fuss p { margin: 0; }
.sb-fuss__marke { display: flex; align-items: center; gap: 14px; }
.sb-fuss__marke strong { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 17px; }
/* Auf Waldgrün würde der Kreis des Badges verschwinden: darum eine Creme-Fläche dahinter */
.sb-fuss__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sb-creme);
}
.sb-fuss__badge img { display: block; width: 48px; height: 48px; }
.sb-fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.sb-fuss li + li::before {
  content: "·";
  content: "·" / "";
  margin-right: 10px;
  color: var(--sb-moos);
}
.sb-fuss a {
  display: inline-block;
  padding: 6px 0;
  color: var(--sb-creme);
  text-decoration: underline;
  text-decoration-color: rgba(201, 150, 60, .6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.sb-fuss a:hover { text-decoration-color: var(--sb-bernstein); }
.sb-fuss a:focus-visible {
  outline: 3px solid var(--sb-bernstein);
  outline-offset: 3px;
  border-radius: 2px;
}
.sb-fuss__recht { color: var(--sb-nebelgruen); }
/* Direkt nach einem waldgrünen Abschnitt (Startseite): feine Trennlinie */
.sb-fuss--anschluss .sb-fuss__innen { border-top: 1px solid rgba(169, 195, 160, .3); }

/* Auf Seiten mit eigenem Design (Mutkompass) setzt deren CSS generische footer-Regeln
   (Abstände, Flex-Navigation, Linkfarben). Diese Regeln heben sie für die Studio-Fußzeile auf. */
footer.sb-fuss {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}
footer.sb-fuss nav { display: block; }
footer.sb-fuss a { font-size: 15px; }
footer.sb-fuss a:hover { color: var(--sb-creme); }

/* Kleingedrucktes der Mutkompass-Seite (vorher Teil der alten Fußzeile) */
.sb-kleingedruckt {
  position: relative;
  z-index: 1;
  max-width: 1104px;
  margin: clamp(32px, 6vw, 64px) auto 0;
  padding: 0 max(16px, 4vw) 28px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: #5E5A53;
}
.sb-kleingedruckt p { margin: 0; }

/* Gestaltungs-Bausteine (siehe src/vorlagen/bausteine.js) */

/* ---------- Deko-Fläche mit Pinselstrichen und Kiefern ---------- */
.sb-deko {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* Bänder am oberen/unteren Rand: Höhe ergibt sich aus der Breite (aspect-ratio am Element) */
/* Höchstens 1320 px breit und zentriert: Auf sehr breiten Bildschirmen (z. B. 27 Zoll, 2560 px)
   würden die Bänder sonst riesig, Kiefern ragten über den Abschnitt und Striche würden beschnitten. */
.sb-deko--oben, .sb-deko--unten { left: 50%; right: auto; width: min(100%, 1320px); transform: translateX(-50%); overflow: visible; }
/* overflow: visible – Striche dürfen über den Rand des Bands hinausreichen (sonst wirken sie auf breiten
   Bildschirmen abgeschnitten). Waagerechtes Scrollen verhindert body { overflow-x: clip }. */
.sb-deko--oben { bottom: auto; height: auto; }
.sb-deko--unten { top: auto; height: auto; }
.sb-nur-schmal { display: none; }
@media (max-width: 600px) {
  .sb-nur-breit { display: none; }
  .sb-nur-schmal { display: block; }
}
.sb-abschnitt--creme .sb-strich,
.sb-karte .sb-strich,
.sb-unterstrichen .sb-strich { mix-blend-mode: multiply; }

/* Malen: Striche erscheinen einmal von links nach rechts (nur mit JavaScript) */
.js .sb-mal .sb-strich {
  clip-path: inset(-60% 116% -60% -16%);
  transition: clip-path 1.6s cubic-bezier(.45, .05, .3, 1);
  transition-delay: var(--sb-verz, 0s);
}
.js .sb-mal.ist-gemalt .sb-strich { clip-path: inset(-60% -16% -60% -16%); }

/* ---------- Übergang hell/dunkel ---------- */
.sb-uebergang { display: block; line-height: 0; margin-bottom: -1px; position: relative; }
.sb-uebergang svg { display: block; width: 100%; height: 120px; }
.sb-uebergang--creme-wald { background: var(--sb-creme); }
.sb-uebergang--wald-creme { background: var(--sb-waldgruen); }

/* ---------- Karte aus gerissenem Papier ---------- */
.sb-karte {
  position: relative;
  isolation: isolate;
  padding: 34px 30px 30px;
  color: var(--sb-tinte);
}
.sb-karte__grund {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  z-index: -1;
  overflow: visible;
}
.sb-karte h3 { color: var(--sb-waldgruen); font-size: 26px; margin: 0 0 6px; }
.sb-karte p { margin: 0 0 10px; }
.sb-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 40px 36px;
  padding: 14px;
  margin: -14px;
}

/* Kleine Angaben in Inter: Untertitel, Plattformen, Preise, Labels */
.sb-angabe {
  font-family: var(--sb-schrift-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-kieferngruen);
}
.sb-preis { font-family: var(--sb-schrift-ui); font-weight: 500; color: var(--sb-waldgruen); }

/* ---------- Haupt-Button: Bernstein-Pinselstrich ---------- */
.sb-knopf {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 34px;
  border: 0;
  background: none;
  color: var(--sb-knopf-text);
  font: 500 16px/1.2 var(--sb-schrift-ui);
  text-decoration: none;
  cursor: pointer;
}
.sb-knopf__grund {
  position: absolute;
  inset: -10px -16px;
  width: calc(100% + 32px);
  height: calc(100% + 20px);
  z-index: -1;
  overflow: visible;
  color: var(--sb-knopf-grund);
  transition: transform .4s ease;
}
.sb-knopf:hover .sb-knopf__grund,
.sb-knopf:focus-visible .sb-knopf__grund { transform: scale(1.05) rotate(-1deg); }
.sb-knopf:focus-visible { outline-offset: 12px; }
/* Variante C: Weiß auf dunklem Bernstein (freigegeben für Stellen, an denen B nicht passt) */
.sb-knopf--dunkel { --sb-knopf-grund: var(--sb-bernstein-dunkel); --sb-knopf-text: #fff; }
/* gegen die Linkfarben der Abschnitte absichern */
.sb-seite a.sb-knopf { color: var(--sb-knopf-text); }

/* Textlink neben dem Button, z. B. „Wer dahintersteht →“ */
.sb-textlink {
  font-family: var(--sb-schrift-ui);
  font-weight: 500;
  color: var(--sb-waldgruen);
  text-decoration: underline;
  text-decoration-color: var(--sb-bernstein);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* ---------- Unterstreichung unter einem Schlüsselwort ---------- */
.sb-unterstrichen {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-style: normal;
  color: var(--sb-akzent-wort);
}
.sb-unterstrichen svg {
  position: absolute;
  left: -4%;
  bottom: -.12em;
  width: 108%;
  height: .34em;
  z-index: -1;
  overflow: visible;
}

@media (max-width: 600px) {
  .sb-uebergang svg { height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .sb-mal .sb-strich { clip-path: none; transition: none; }
  .sb-knopf__grund, .sb-kopf__nav a { transition: none; }
  .sb-knopf:hover .sb-knopf__grund, .sb-knopf:focus-visible .sb-knopf__grund { transform: none; }
}
.sb-abschnitt--creme .sb-kiefer__lavur { mix-blend-mode: multiply; }

/* ---------- Zurück-Link oben auf Unterseiten ---------- */
.sb-zurueck {
  display: inline-block;
  margin-bottom: 24px;
  padding: 4px 0;
  font-family: var(--sb-schrift-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--sb-waldgruen);
  text-decoration: underline;
  text-decoration-color: var(--sb-bernstein);
  text-underline-offset: 4px;
}

/* Abschnitte der Startseite (und wiederverwendbare Inhaltsmuster) */

.sb-einleitung { max-width: 60ch; font-size: 18px; }
.sb-abschnitt--wald .sb-einleitung { color: var(--sb-nebelgruen); }
.sb-abschnitt h2 + .sb-einleitung { margin-bottom: 40px; }

/* Button und Textlink nebeneinander */
.sb-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 44px;
  padding: 10px 16px;
}

/* ---------- Hero ---------- */
.sb-hero {
  z-index: 1; /* über dem folgenden Übergang, damit die Kiefern aus der Pinselkante wachsen */
  display: flex;
  align-items: center;
  min-height: min(84vh, 780px);
  /* unten genug Abstand, damit Button und Textlink nie über den Strichen an der Graskante liegen */
  padding-block: clamp(84px, 11vw, 150px) clamp(84px, 9vw, 132px);
  text-align: center;
}
/* Kiefern-Band: ragt in die Pinselkante darunter (Übergang 120 px, die dunkle Fläche beginnt nach ca. 70 px),
   auf sehr breiten Bildschirmen begrenzt, damit die Kiefern nicht in die Überschrift wachsen */
.sb-hero__kiefern {
  z-index: 1;
  bottom: -92px;
}
.sb-hero__innen { width: 100%; }
.sb-hero h1 { margin-bottom: 22px; }
.sb-hero__text {
  font-size: clamp(18px, 2.4vw, 21px);
  max-width: 34ch;
  margin: 0 auto 30px;
}

/* ---------- Apps ---------- */
.sb-karte__werkstatt { font-style: normal; }

/* ---------- Versprechen ---------- */
.sb-versprechen {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.sb-versprechen .sb-symbol { display: block; margin: 0 0 14px -4px; }
.sb-versprechen h3 { margin-bottom: 10px; }
.sb-schlusszeile {
  margin: 0;
  text-align: center;
  font-family: var(--sb-schrift-titel);
  font-weight: 900;
  font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.3;
  color: var(--sb-waldgruen);
}
.sb-schlusszeile > span {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 14px 28px;
}

/* ---------- Neuigkeiten + Newsletter ---------- */
.sb-neues {
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  gap: 56px 64px;
  align-items: start;
}
.sb-neuigkeiten { list-style: none; margin: 0; padding: 0; }
.sb-neuigkeiten li { padding: 18px 0; border-top: 1px solid rgba(169, 195, 160, .35); }
.sb-neuigkeiten li:first-child { border-top: 0; padding-top: 4px; }
.sb-neuigkeiten p { margin: 0 0 6px; }
.sb-neuigkeit__kopf {
  font-family: var(--sb-schrift-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sb-moos);
}
.sb-newsletter { padding: 34px 32px 30px; }
.sb-newsletter h3 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 10px; }
.sb-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 22px 0 18px;
}
.sb-formular input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 50px;
  padding: 10px 14px;
  font: 400 16px/1.3 var(--sb-schrift-ui);
  color: var(--sb-tinte);
  background: #F8F6EF;
  border: 1.5px solid var(--sb-kieferngruen);
  border-radius: 4px;
}
.sb-formular input[type="email"]::placeholder { color: #5A6B60; opacity: 1; }
.sb-formular .sb-knopf { margin: 0 14px; }
.sb-kleintext { font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ---------- Über das Studio ---------- */
.sb-person {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 48px 64px;
  align-items: center;
  margin: 8px 0 72px;
}
.sb-foto { position: relative; isolation: isolate; margin: 14px; transform: rotate(-1.5deg); }
.sb-foto__rahmen {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  z-index: -1;
  overflow: visible;
}
.sb-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  clip-path: polygon(1% 1.2%, 50% 0.4%, 99.2% 1%, 98.8% 50%, 99.4% 98.6%, 50% 99.5%, 0.6% 99%, 1.2% 50%);
}
.sb-person__text { font-size: 19px; line-height: 1.7; max-width: 44ch; margin: 0; }
.sb-ueber-unten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
}
.sb-chronik { position: relative; padding-left: 34px; }
.sb-chronik__linie { position: absolute; left: 4px; top: 10px; bottom: 16px; width: 10px; height: calc(100% - 26px); }
.sb-chronik ol { list-style: none; margin: 0; padding: 0; }
.sb-chronik li { position: relative; padding-bottom: 20px; }
.sb-chronik li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--sb-creme);
  border: 2.5px solid var(--sb-kieferngruen);
  border-radius: 52% 46% 55% 48%;
}
.sb-chronik time {
  display: block;
  font-family: var(--sb-schrift-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--sb-kieferngruen);
}
.sb-chronik p { margin: 0; }

/* ---------- Kanäle ---------- */
.sb-kanaele { padding-top: clamp(40px, 6vw, 72px); }
.sb-tuschelinie { display: block; width: min(var(--sb-breite), 100%); height: 8px; margin: 0 auto clamp(40px, 6vw, 64px); }
.sb-kanal-liste {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}
.sb-kanal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  text-decoration: none;
  font-family: var(--sb-schrift-ui);
  color: var(--sb-waldgruen);
  line-height: 1.25;
}
.sb-kanal strong { display: block; font-weight: 500; font-size: 17px; }
.sb-kanal__name { display: block; font-size: 14px; color: var(--sb-kieferngruen); }
.sb-kanal:hover strong { text-decoration: underline; text-decoration-color: var(--sb-bernstein); text-underline-offset: 4px; }
.sb-kanal__symbol { flex: none; }

/* Video: Zwei-Klick-Lösung. Ohne JavaScript bleibt nur der Link zum Kanal. */
.sb-video { max-width: 720px; }
.sb-video__buehne { position: relative; }
.sb-video.ist-bereit .sb-video__buehne,
.sb-video.ist-aktiv .sb-video__buehne {
  aspect-ratio: 16 / 9;
  background: var(--sb-waldgruen);
  border-radius: 4px;
  overflow: hidden;
}
.sb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sb-video__start {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  --sb-fokus: var(--sb-bernstein);
}
.sb-video__start:focus-visible { outline-offset: -6px; }
.sb-video__start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-video__knopf {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--sb-bernstein);
  color: var(--sb-waldgruen);
  font: 500 17px/1 var(--sb-schrift-ui);
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(17, 53, 41, .35);
  transition: transform .25s ease;
}
.sb-video__start:hover .sb-video__knopf { transform: translate(-50%, -50%) scale(1.05); }
.sb-video__titel { font-family: var(--sb-schrift-ui); font-weight: 500; color: var(--sb-waldgruen); margin: 12px 0 4px; }
.sb-video__ersatz { margin: 0 0 8px; }
.sb-video__hinweis { font-size: 14.5px; line-height: 1.55; margin: 8px 0 0; }

/* ---------- Kontakt ---------- */
.sb-kontakt { padding-bottom: clamp(64px, 9vw, 96px); }
.sb-mail {
  font-family: var(--sb-schrift-titel);
  font-weight: 900;
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.25;
  overflow-wrap: break-word;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.sb-abschnitt--wald .sb-mail { color: var(--sb-creme); }

/* ---------- Schmal ---------- */
@media (max-width: 860px) {
  .sb-neues, .sb-ueber-unten { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sb-versprechen { grid-template-columns: 1fr; gap: 32px; }
  .sb-person { grid-template-columns: 1fr; justify-items: center; }
  .sb-foto { width: min(78vw, 340px); }
}
@media (max-width: 600px) {
  .sb-hero__kiefern { bottom: -58px; width: 100%; }
  .sb-hero { min-height: 0; }
  .sb-newsletter { padding: 28px 22px 24px; }
  .sb-schlusszeile > span { padding: 12px 8px; }
  .sb-video__knopf { padding: 11px 18px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-video__knopf { transition: none; }
  .sb-video__start:hover .sb-video__knopf { transform: translate(-50%, -50%); }
}

/* ---------- Kurzseiten (Newsletter, 404) ---------- */
.sb-kurz {
  display: flex;
  align-items: center;
  min-height: min(70vh, 640px);
  text-align: center;
}
.sb-kurz__innen { width: 100%; max-width: 720px; }
.sb-kurz h1 { font-size: clamp(38px, 7vw, 64px); margin-bottom: 20px; }
.sb-kurz p { font-size: clamp(18px, 2.2vw, 20px); max-width: 40ch; margin-inline: auto; }
.sb-kurz .sb-aktionen { margin-top: 30px; }
.sb-shiba { display: block; width: min(300px, 80%); height: auto; margin: 0 auto 12px; }

/* ---------- Versionsseite ---------- */
.sb-versionen__innen { max-width: 820px; }
.sb-versionen h1 { font-size: clamp(36px, 6vw, 58px); }
.sb-update-hinweis { margin: 40px 14px 56px; }
.sb-update-hinweis h2 { font-size: clamp(22px, 2.6vw, 27px); margin-bottom: 12px; }
.sb-version { position: relative; padding: 26px 0 22px 34px; }
.sb-version + .sb-version { border-top: 1px solid rgba(47, 90, 69, .25); }
.sb-version::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 34px;
  width: 14px;
  height: 14px;
  background: var(--sb-creme);
  border: 2.5px solid var(--sb-kieferngruen);
  border-radius: 52% 46% 55% 48%;
}
.sb-version h2 {
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.3;
  margin-bottom: 10px;
}
.sb-version ul { margin: 0; padding-left: 1.2em; }
.sb-version li { margin-bottom: 6px; }
.sb-version li::marker { color: var(--sb-kieferngruen); }
.sb-version p { margin: 0; }
.sb-versionen__newsletter { margin-top: 40px; }
.sb-versionen__newsletter .sb-textlink { white-space: nowrap; }

/* Impressum und Datenschutz in Studio-Typografie. Die Klassen (.back, .sub, .addr, …)
   stammen aus den bisherigen Seiten und bleiben, damit neue Fassungen ohne Anpassung passen. */
.sb-recht { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.sb-recht__innen { max-width: 820px; }
.sb-recht h1 { font-size: clamp(24px, 7.5vw, 52px); margin-bottom: 8px; hyphens: auto; overflow-wrap: break-word; }
.sb-recht .sub { font-family: var(--sb-schrift-ui); font-size: 15px; color: var(--sb-kieferngruen); margin: 0 0 36px; }
.sb-recht h2 { font-size: clamp(21px, 2.4vw, 25px); margin: 40px 0 10px; line-height: 1.25; }
.sb-recht h2.spaced { margin-top: 56px; }
.sb-recht h3 { font-size: clamp(18px, 2vw, 21px); margin: 28px 0 8px; }
.sb-recht p, .sb-recht ul { margin: 0 0 14px; }
.sb-recht ul { padding-left: 1.2em; }
.sb-recht li { margin: 6px 0; }
.sb-recht li::marker { color: var(--sb-kieferngruen); }
.sb-recht a { overflow-wrap: break-word; }
.sb-recht .addr {
  display: block;
  font-style: normal;
  line-height: 1.75;
  background: #F6F4EC;
  border: 1.5px solid var(--sb-moos);
  border-radius: 6px;
  padding: clamp(18px, 3vw, 26px);
  margin-bottom: 8px;
}
.sb-recht .addr .name { font-family: var(--sb-schrift-titel); font-weight: 900; font-size: 20px; color: var(--sb-waldgruen); }
.sb-recht .addr .studio { color: var(--sb-kieferngruen); font-family: var(--sb-schrift-ui); font-weight: 500; }
.sb-recht .addr .ctlabel {
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(47, 90, 69, .25);
  font-family: var(--sb-schrift-ui);
  font-weight: 500;
  color: var(--sb-waldgruen);
}
.sb-recht .addr dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; }
.sb-recht .addr dt { color: var(--sb-kieferngruen); }
.sb-recht .addr dd { margin: 0; }
.sb-recht .note {
  border-left: 3px solid var(--sb-moos);
  padding-left: 16px;
  margin: 20px 0;
}
.sb-recht .stand {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid rgba(47, 90, 69, .25);
  font-family: var(--sb-schrift-ui);
  font-size: 14px;
  color: var(--sb-kieferngruen);
}
@media (max-width: 480px) {
  /* Bezeichnung und Wert untereinander, damit lange Adressen nicht mitten im Wort umbrechen */
  .sb-recht .addr dl { grid-template-columns: 1fr; }
  .sb-recht .addr dt { margin-top: 6px; }
}