/* ==========================================================================
   beckmann-si.de — Sensorische Integration, Kerstin Beckmann
   Designsystem "Werkstatt der Sinne"
   Farben abgeleitet aus dem Wahrnehmungshaus: Fundament grün, Bausteine
   orange, Dach blau. Die Seite nimmt Petrol und Bernstein daraus auf,
   damit die Original-Grafik nicht als Fremdkoerper wirkt.
   ========================================================================== */

/* --- Schriften, selbst gehostet (kein Google-CDN, DSGVO) ----------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../fonts/atkinson-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../fonts/atkinson-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Token --------------------------------------------------------------- */
:root {
  /* Flaechen */
  --ground:      #FAF8F4;  /* Papierweiss, Grundflaeche */
  --paper:       #FFF;  /* Karten, Formular */
  --ground-warm: #F3EFE6;  /* abgesetzte Baender */

  /* Schrift */
  --ink:         #1B2A29;  /* Haupttext, dunkles Tannengruen statt Schwarz */
  --ink-soft:    #4A5A57;  /* Sekundaertext */

  /* Traeger und Signal */
  --deep:        #17494F;  /* Petrol, Fundamentflaechen, Footer */
  --deep-dark:   #0E3339;  /* Petrol dunkel, Hover auf dunklem Grund */
  --deep-light:  #E3ECEC;  /* Petrol sehr hell, Flaechen */
  --signal:      #A15806;  /* Bernstein, Links und Akzentschrift auf hell */
  --signal-btn:  #E8A020;  /* Bernstein hell, nur als Buttonflaeche */
  --signal-soft: #FBF0DC;  /* Bernstein sehr hell, Flaechen */

  /* Sinne: drei Nahsinne kraeftig, Fernsinne gedaempft */
  --sinn-tast:   #A8412F;  /* Tastsinn, Haut */
  --sinn-tiefe:  #8A5A1E;  /* Eigen-/Tiefenwahrnehmung, Muskeln und Gelenke */
  --sinn-gleich: #1D6480;  /* Gleichgewicht, Innenohr */
  --sinn-fern:   #5A665C;  /* Fernsinne gemeinsam */

  /* Linien */
  --line:        #DDD6C9;
  --line-strong: #BFB6A4;

  /* Raster */
  --wrap:        72rem;
  --prose:       34rem;   /* rund 66 Zeichen */
  --radius:      14px;
  --radius-lg:   22px;

  /* Abstaende, grosszuegig (Density 3/10) */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2.5rem;
  --s-5: 4rem;    --s-6: 6rem;   --s-7: 8rem;

  --shadow-soft: 0 2px 4px rgba(23,73,79,.05), 0 8px 24px rgba(23,73,79,.07);
  --shadow-lift: 0 4px 8px rgba(23,73,79,.07), 0 16px 40px rgba(23,73,79,.11);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Safari kennt ausschliesslich die Präfix-Variante. Ohne sie vergroessert
   iOS im Querformat eigenmaechtig die Schrift. Nicht entfernen. */
/* stylelint-disable-next-line property-no-vendor-prefix */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Atkinson', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 var(--s-2);
  text-wrap: balance;
  letter-spacing: -0.01em;
  /* Deutsche Komposita wie "Datenschutzerklaerung" passen auf 320px in keine
     Zeile und sprengen sonst das Layout. hyphens greift nur, wenn noetig –
     die Sprache steht im lang-Attribut des html-Elements. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); font-weight: 600; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);  font-weight: 600; line-height: 1.25; }
h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }

p { margin: 0 0 var(--s-2); }
p, li { max-width: var(--prose); }
.wide p, .wide li { max-width: none; }

a { color: var(--signal); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--deep); }

strong { font-weight: 700; }
em.term { font-style: normal; font-weight: 700; color: var(--deep); }

blockquote { margin: 0; }

/* Fokus, immer sichtbar */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -100px;
  background: var(--deep); color: #fff;
  padding: var(--s-2) var(--s-3); border-radius: 0 0 var(--radius) var(--radius);
  z-index: 200; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  /* clip ist veraltet, bleibt aber als Rueckfallebene fuer Browser ohne
     clip-path stehen – ohne sie waere der Text sichtbar statt versteckt. */
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Layout -------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 30rem) { .wrap { width: calc(100% - 2rem); } }

section { padding-block: var(--s-6); }
@media (max-width: 48rem) { section { padding-block: var(--s-5); } }
@media (max-width: 34rem) { section { padding-block: 3rem; } }

/* Abschnittskopf: Ueberschrift links, Einleitung rechts daneben. So bleibt die
   Zeilenlaenge bei rund 66 Zeichen, ohne dass rechts ein Loch entsteht. */
.section-head { margin-bottom: var(--s-4); display: grid; gap: var(--s-2) var(--s-5); }
.section-head p { color: var(--ink-soft); font-size: 1.15rem; }
.section-head > :last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .section-head h2, .section-head h3 { margin-bottom: 0; }
  .section-head p { max-width: 34rem; }
}

/* Abgesetzte Baender */
.band-warm { background: var(--ground-warm); }
.band-deep { background: var(--deep); color: #EAF1F0; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep a { color: var(--signal-btn); }
.band-deep .section-head p { color: #BFD4D2; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: inherit; font-size: 1.05rem; font-weight: 700;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
  min-height: 44px;
}
.btn-primary { background: var(--signal-btn); color: #2B1B02; border-color: #2B1B02; }
.btn-primary:hover { background: #F5B23E; color: #2B1B02; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--deep); border-color: var(--deep); }
.btn-ghost:hover { background: var(--deep); color: #fff; }
.band-deep .btn-ghost { color: #fff; border-color: #7FA9A8; }
.band-deep .btn-ghost:hover { background: #fff; color: var(--deep); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,244,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--s-3);
  justify-content: space-between; min-height: 68px;
}
.brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem; font-weight: 600; color: var(--ink);
  text-decoration: none; line-height: 1.15;
}
.brand span { display: block; font-family: 'Atkinson', sans-serif;
  font-size: .72rem; font-weight: 400; color: var(--ink-soft); letter-spacing: .02em; }

.site-nav ul { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0;
  align-items: center; flex-wrap: wrap; }
.site-nav li { max-width: none; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .98rem;
  padding: .4em .1em; display: inline-block; }
.site-nav a:hover { color: var(--signal); text-decoration: underline; }
.site-nav .btn { font-size: .95rem; padding: .6em 1.2em; }
@media (max-width: 62rem) { .site-nav .nav-links { display: none; } }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: var(--s-6) var(--s-5); position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-5); align-items: center; }
}
.hero h1 { margin-bottom: var(--s-3); }
.hero .lead { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); color: var(--ink-soft);
  max-width: 32rem; margin-bottom: var(--s-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.hero-note { font-size: .95rem; color: var(--ink-soft); margin-top: var(--s-3); }

/* Zwei Beobachtungen nebeneinander */
.observations { display: grid; gap: var(--s-2); }
@media (min-width: 34rem) { .observations { grid-template-columns: 1fr 1fr; } }
.obs {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--c, var(--line-strong));
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: var(--shadow-soft);
}
.obs--sucher    { --c: var(--sinn-tast); }
.obs--vermeider { --c: var(--sinn-gleich); }
.obs h2 { font-size: 1.15rem; color: var(--c); margin-bottom: var(--s-1); line-height: 1.25; }
.obs .quote {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem; line-height: 1.35; color: var(--ink);
  margin: 0 0 var(--s-2); max-width: none;
}
.obs ul { margin: 0; padding-left: 1.1em; font-size: .97rem; color: var(--ink-soft); }
.obs li { margin-bottom: .35em; max-width: none; }

/* --- Umschalter Reizsucher / Reizvermeider ------------------------------- */
.switcher { margin-top: var(--s-4); }
.switch-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--deep-light); border-radius: 999px; margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.switch-tabs button {
  font-family: inherit; font-size: 1rem; font-weight: 700;
  padding: .6em 1.3em; border: none; border-radius: 999px;
  background: transparent; color: var(--deep); cursor: pointer;
  min-height: 44px; transition: background-color .18s ease, color .18s ease;
}
.switch-tabs button[aria-selected="true"] { background: var(--deep); color: #fff; }
.switch-tabs button:hover:not([aria-selected="true"]) { background: #CFDEDD; }

.panel { animation: fade-in .3s ease; }
/* Einleitungssatz ueber den beiden Merkmalsspalten: laeuft ueber die volle
   Breite der darunterliegenden Spalten, sonst steht er verloren links. */
.panel > p:first-child { max-width: 46rem; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.trait-grid { display: grid; gap: var(--s-2) var(--s-4); }
@media (min-width: 46rem) { .trait-grid { grid-template-columns: repeat(2, 1fr); } }
.trait-grid ul { margin: 0; padding: 0; list-style: none; }
.trait-grid li {
  max-width: none; position: relative;
  padding-left: 1.6rem; margin-bottom: var(--s-2);
}
.trait-grid li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--deep); opacity: .55;
}
.band-deep .trait-grid li::before { background: var(--signal-btn); opacity: 1; }

/* --- Wahrnehmungshaus ---------------------------------------------------- */
.haus-layout { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 58rem) { .haus-layout { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

/* Mobil klebt das Bild unter der Kopfzeile, waehrend man die Kacheln durchgeht.
   Ohne das waere die Hervorhebung unsichtbar - Bild und Kachel lagen bisher
   mehrere Bildschirme auseinander. */
@media (max-width: 57.99rem) {
  .haus-figure {
    position: sticky; top: 68px; z-index: 5;
    background: var(--ground); padding-bottom: var(--s-2);
    margin-inline: calc(var(--s-2) * -1); padding-inline: var(--s-2);
  }
  /* Hoehe ueber die Breite steuern, damit das Seitenverhaeltnis (850:1044)
     exakt erhalten bleibt - eine max-height am Bild verzerrt es. */
  .haus-bild { max-width: calc(44vh * 850 / 1044); margin-inline: auto; }
  .haus-bild img { width: 100%; height: auto; }
  .haus-figure figcaption { font-size: .78rem; margin-top: .4rem; }
}

.haus-figure { margin: 0; }
.haus-bild { position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lift); background: #fff; }
.haus-figure img { width: 100%; display: block; }

/* Klickflaechen ueber dem Bild. Nur mit JavaScript sichtbar (hidden wird entfernt),
   damit ohne JS keine toten Schaltflaechen herumstehen. */
.haus-zonen { position: absolute; inset: 0; }
/* Auf schmalen Viewports ist das Bild so klein, dass die Deckenzone unter die
   Mindestgroesse fuer Beruehrungsziele faellt. Dort wird ausschliesslich ueber
   die Kacheln bedient - die sind ohnehin der bequemere Weg. */
@media (max-width: 57.99rem) {
  .haus-zonen { display: none; }
}
.haus-zonen .zone {
  position: absolute; left: 0; right: 0;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zone:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
/* Trefferflaechen - groesser als die Hervorhebung, weil die Decke sehr schmal ist */
.z-dach      { top: 18%; height: 12%; }
.z-decke     { top: 30%; height:  5%; }
.z-bausteine { top: 35%; height: 49%; }
.z-fundament { top: 84%; height: 13%; }

/* Die Marke hebt exakt das Band hervor, das zur Ebene gehoert */
.haus-marke {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  border: 4px solid transparent; border-radius: 5px;
  opacity: 0; pointer-events: none; box-shadow: none;
  transition: top .35s cubic-bezier(.22,.8,.3,1), height .35s cubic-bezier(.22,.8,.3,1),
              opacity .25s ease, border-color .25s ease;
}
.haus-bild.ist-aktiv .haus-marke { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .haus-marke { transition: none; }
}
.haus-figure figcaption {
  font-size: .85rem; color: var(--ink-soft); margin-top: var(--s-2); text-align: right;
}

/* Ebenen-Erklaerung, baut sich beim Scrollen auf */
.ebenen { list-style: none; margin: 0; padding: 0; counter-reset: ebene; }
.ebenen li {
  max-width: none; position: relative;
  border-radius: var(--radius); margin-bottom: var(--s-2);
  background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--e, var(--line-strong));
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  /* Der Knopf legt sich unsichtbar ueber die Kachel, deshalb der breite
     linke Innenabstand. So bleibt das HTML gueltig (ein <button> darf keine
     Ueberschrift enthalten) und die ganze Flaeche bleibt anklickbar. */
  padding: var(--s-3) var(--s-3) var(--s-3) 4.2rem;
  opacity: 1;
}
.ebenen li::before {
  content: ""; position: absolute; left: 1.25rem; top: 1.75rem;
  width: 1.6rem; height: 1.6rem; border-radius: 5px;
  background: var(--e, var(--line-strong));
  box-shadow: 0 0 0 0 var(--e); transition: box-shadow .25s ease;
  z-index: 1;
}
.ebene-knopf {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent;
  cursor: pointer; border-radius: var(--radius);
}
.ebene-knopf:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.ebenen li:hover { background: var(--ground-warm); }
.ebenen li:has(.ebene-knopf[aria-pressed="true"]) {
  background: var(--deep-light); border-color: var(--e, var(--deep));
  box-shadow: var(--shadow-lift);
}
.ebenen li:has(.ebene-knopf[aria-pressed="true"])::before {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--e) 28%, transparent);
}
.ebenen .e-dach       { --e: #2B7BA8; }
.ebenen .e-decke      { --e: #6BA8CC; }
.ebenen .e-bausteine  { --e: #E8722F; }
.ebenen .e-fundament  { --e: #7FAF2B; }
.ebenen h3 { font-size: 1.1rem; margin-bottom: .2em; }
.ebenen p { margin: 0; font-size: 1rem; color: var(--ink-soft); max-width: none; }

/* Aufbau-Animation von unten nach oben. Sie erzaehlt "ein Haus baut man von
   unten" - das traegt nur, solange das Haus daneben sichtbar ist. Schmaler steht
   es weit darueber, dort waere der Effekt nur eine leere Flaeche. */
@media (min-width: 58rem) {
  .js .ebenen li { opacity: 0; transform: translateY(18px); }
  .js .ebenen.is-built li {
    opacity: 1; transform: none;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.8,.3,1);
  }
  /* Kurze Staffelung: Der Aufbau bleibt erkennbar, ohne dass man auf leere
     Kacheln wartet. Nach gut einer halben Sekunde steht alles. */
  .js .ebenen.is-built .e-fundament { transition-delay: .04s; }
  .js .ebenen.is-built .e-bausteine { transition-delay: .17s; }
  .js .ebenen.is-built .e-decke     { transition-delay: .30s; }
  .js .ebenen.is-built .e-dach      { transition-delay: .43s; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ebenen li { opacity: 1; transform: none; }
  .js .ebenen.is-built li { transition: none; }
}

/* --- Sinne --------------------------------------------------------------- */
.sinne-gruppe { margin-bottom: var(--s-5); }
.sinne-gruppe > p { color: var(--ink-soft); margin-bottom: var(--s-3); }
.sinne-grid { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .sinne-grid { grid-template-columns: repeat(3, 1fr); } }
.sinne-grid--fern { gap: var(--s-2); }
@media (min-width: 40rem) { .sinne-grid--fern { grid-template-columns: repeat(4, 1fr); } }

.sinn {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-3);
  border-top: 5px solid var(--c);
}
.sinn--tast   { --c: var(--sinn-tast); }
.sinn--tiefe  { --c: var(--sinn-tiefe); }
.sinn--gleich { --c: var(--sinn-gleich); }
.sinn h3 { color: var(--c); font-size: 1.2rem; }
.sinn .fach { font-size: .82rem; color: var(--ink-soft); display: block; margin-bottom: var(--s-2); }
.sinn p { margin: 0; font-size: 1rem; max-width: none; }
.sinn .alltag {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px dashed var(--line); font-size: .97rem; color: var(--ink-soft);
}

/* Fernsinne schlichter */
.sinn-fern {
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-2) var(--s-3);
}
.sinn-fern h4 { color: var(--sinn-fern); margin-bottom: .1em; }
.sinn-fern p { margin: 0; font-size: .95rem; color: var(--ink-soft); max-width: none; }

/* --- Lernpyramide -------------------------------------------------------- */
.pyramide { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 54rem) { .pyramide { grid-template-columns: 1fr 1.1fr; gap: var(--s-5); } }

.balken-titel { font-size: 1.3rem; margin-bottom: var(--s-3); }
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.balken li { max-width: none; }
.balken-knopf {
  width: 100%; font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius);
  padding: .55rem .6rem;
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: .3rem var(--s-2); align-items: center;
  text-align: left;
  transition: background-color .18s ease;
}
.balken-knopf:hover { background: var(--ground-warm); }
.balken-knopf[aria-expanded="true"] { background: var(--ground-warm); }
.balken-knopf[aria-expanded="true"] .was { font-weight: 700; }
/* Die Zahl steht auf hellem Grund, also dunkel setzen */
.balken .zahl {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: 1.5rem; text-align: right; color: var(--ink);
  line-height: 1;
}
/* Beschriftung ueber dem Balken: nie abgeschnitten, immer lesbar */
.balken .was { grid-column: 2; grid-row: 1; font-size: .98rem; line-height: 1.3; }
.balken .bar {
  grid-column: 2; grid-row: 2;
  height: 1.05rem; border-radius: 4px;
  background: var(--b); width: var(--w);
  transition: width .9s cubic-bezier(.22,.8,.3,1);
}
/* Balken wachsen nacheinander von oben nach unten, der Bernstein zuletzt */
.js .balken.is-shown li:nth-child(1) .bar { transition-delay: .00s; }
.js .balken.is-shown li:nth-child(2) .bar { transition-delay: .08s; }
.js .balken.is-shown li:nth-child(3) .bar { transition-delay: .16s; }
.js .balken.is-shown li:nth-child(4) .bar { transition-delay: .24s; }
.js .balken.is-shown li:nth-child(5) .bar { transition-delay: .32s; }
.js .balken.is-shown li:nth-child(6) .bar { transition-delay: .40s; }

.balken-text {
  margin: 0; padding: .2rem .6rem .8rem 5.4rem;
  font-size: 1rem; color: var(--ink-soft); max-width: 34rem;
}
/* Ohne JavaScript stehen die Texte einfach offen da. */
.js .balken-text { display: none; }
.js .balken-text.ist-offen { display: block; }
.balken-hinweis { font-size: .9rem; color: var(--ink-soft); margin-top: var(--s-2); }
@media (max-width: 30rem) { .balken-text { padding-left: .6rem; } }
.js .balken .bar { width: 0; }
.js .balken.is-shown .bar { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
  .js .balken .bar { width: var(--w); transition: none; }
}
.balken .b-lesen  { --b: #5F6E6A; --w: 12%;  }
.balken .b-hoeren { --b: #4E716D; --w: 22%;  }
.balken .b-sehen  { --b: #3C6A6D; --w: 32%;  }
.balken .b-beides { --b: #2E6E7C; --w: 52%;  }
.balken .b-sagen  { --b: #1D5C6D; --w: 72%;  }
.balken .b-tun    { --b: #A15806; --w: 94%;  }

/* Zwei Praxisbilder: Reiz und Pause */
.praxis-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); }
.praxis-paar figure { margin: 0; }
.praxis-paar img {
  width: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-soft); background: var(--ground-warm);
}
.praxis-paar figcaption {
  font-size: .92rem; color: var(--ink-soft); margin-top: var(--s-1); line-height: 1.4;
}

/* --- Seminar-Module ------------------------------------------------------ */
.module { display: grid; gap: var(--s-3); counter-reset: tag; }
@media (min-width: 52rem) { .module { grid-template-columns: repeat(3, 1fr); } }
.modul {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-4) var(--s-3) var(--s-3);
  position: relative; display: flex; flex-direction: column;
}
.modul .tag-nr {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: .95rem; color: var(--signal); margin-bottom: .3em;
}
.modul h3 { margin-bottom: var(--s-2); }
.modul ul { margin: 0; padding-left: 1.15em; font-size: 1rem; }
.modul li { margin-bottom: .45em; max-width: none; }

.buchung {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--signal-soft); border-radius: var(--radius-lg);
  border: 1px solid #E8D5B0;
}
.buchung h3 { margin-bottom: var(--s-2); }
.buchung .optionen { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
@media (min-width: 44rem) { .buchung .optionen { grid-template-columns: 1fr 1fr; } }
.buchung p { max-width: none; }

/* --- Vita ---------------------------------------------------------------- */
.vita-layout { display: grid; gap: var(--s-4); }
.vita-layout p, .vita-layout li { max-width: 38rem; }
@media (min-width: 52rem) { .vita-layout { grid-template-columns: 18rem 1fr; gap: var(--s-5); } }
.vita-portrait img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); width: 100%; }
@media (max-width: 52rem) {
  .vita-portrait { max-width: 15rem; }
}
.vita-portrait figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: var(--s-2); }

.linie { list-style: none; margin: var(--s-3) 0 0; padding: 0;
  border-left: 2px solid var(--line-strong); }
.linie li { max-width: none; position: relative; padding: 0 0 var(--s-3) var(--s-3); }
.linie li::before {
  content: ""; position: absolute; left: -7px; top: .55em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--deep);
}
.linie li:last-child { padding-bottom: 0; }
.linie li:last-child::before { background: var(--signal-btn); border-color: var(--signal); }
.linie .jahr { font-weight: 700; color: var(--deep); }

/* --- Referenzen und Feedback --------------------------------------------- */
.ref-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ref-liste li {
  max-width: none; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .5em 1.2em .5em .95em; font-size: 1rem;
  display: inline-flex; align-items: center; gap: .6em;
}
.ref-liste svg { flex: 0 0 auto; color: var(--deep); }
.stimmen { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 46rem) { .stimmen { grid-template-columns: repeat(2, 1fr); } }
.stimme {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-3) var(--s-3) var(--s-2);
}
.stimme blockquote {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem;
  line-height: 1.45; margin: 0 0 var(--s-1);
}
.stimme figcaption { font-size: .93rem; color: var(--ink-soft); }

/* --- Termine ------------------------------------------------------------- */
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.termin {
  max-width: none; display: grid; gap: var(--s-1) var(--s-3);
  align-items: center; padding: var(--s-3);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
@media (min-width: 44rem) {
  .termin { grid-template-columns: 11rem 1fr auto; }
}
.termin .datum { font-weight: 700; color: var(--deep); }
.termin .veranstalter { color: var(--ink-soft); font-size: .97rem; }
.termin .ort { font-size: .95rem; color: var(--ink-soft); }
.termine-leer { color: var(--ink-soft); }

/* --- Formular ------------------------------------------------------------ */
.kontakt-layout { display: grid; gap: var(--s-4); }
@media (min-width: 56rem) { .kontakt-layout { grid-template-columns: 1.15fr .85fr; gap: var(--s-5); } }

.form-card {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-4);
  box-shadow: var(--shadow-soft);
}
.feld { margin-bottom: var(--s-3); }
.feld label { display: block; font-weight: 700; margin-bottom: .35em; font-size: 1rem; }
.feld .hinweis { font-weight: 400; color: var(--ink-soft); font-size: .92rem; }
.feld input, .feld textarea {
  width: 100%; font-family: inherit; font-size: 1.05rem;
  padding: .7em .85em; border: 2px solid var(--line-strong);
  border-radius: var(--radius); background: var(--ground);
  color: var(--ink); min-height: 44px;
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.feld input:focus, .feld textarea:focus { border-color: var(--deep); background: #fff; }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #A8412F; }
.feld .fehler { color: #8E2F20; font-size: .95rem; font-weight: 700; margin-top: .35em; display: block; }

.feld-check { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: var(--s-3); }
.feld-check input { width: 1.4rem; height: 1.4rem; margin-top: .2rem; flex: 0 0 auto; min-height: 0; }
.feld-check label { font-weight: 400; font-size: .98rem; margin: 0; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { padding: var(--s-3); border-radius: var(--radius); margin-bottom: var(--s-3); font-weight: 700; }
.form-status--ok   { background: #E4F0E6; border: 2px solid #4B7A52; color: #244C29; }
.form-status--fehler { background: #FBE9E5; border: 2px solid #A8412F; color: #7C2C1E; }

.kontakt-direkt dl { margin: 0; }
.kontakt-direkt dt { font-weight: 700; margin-top: var(--s-3); font-size: .95rem; color: var(--ink-soft); }
.kontakt-direkt dd { margin: .15em 0 0; font-size: 1.1rem; }
.kontakt-direkt dd a { font-weight: 700; }

/* --- Fusszeile ----------------------------------------------------------- */
.site-footer { background: var(--deep); color: #C9DBD9; padding-block: var(--s-5) var(--s-4); }
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer h2 { font-size: 1.3rem; }
.footer-grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer a { color: #F5CE8A; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5em; max-width: none; }
.site-footer p { max-width: 30rem; }
.footer-bottom {
  border-top: 1px solid #2C6068; padding-top: var(--s-3);
  font-size: .92rem; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  justify-content: space-between;
}

/* --- Rechtstexte (Unterseiten) ------------------------------------------- */
.rechtstext { padding-block: var(--s-5); }
.rechtstext h1 { margin-bottom: var(--s-4); }
.rechtstext h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-top: var(--s-4); }
.rechtstext h3 { margin-top: var(--s-3); }
.rechtstext p, .rechtstext li { max-width: var(--prose); }
.rechtstext ul { padding-left: 1.2em; }

/* Platzhalter, bis echte Inhalte geliefert sind */
.platzhalter {
  background: repeating-linear-gradient(135deg, #FFF8E6, #FFF8E6 12px, #FDF1D4 12px, #FDF1D4 24px);
  border: 2px dashed #C9962E; border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); color: #6A4E12; font-size: .95rem;
}
.platzhalter strong { color: #4A360A; }

/* --- Druck --------------------------------------------------------------- */
@media print {
  .site-header, .hero-actions, .switch-tabs, .form-card { display: none; }
  body { font-size: 11pt; background: #fff; }
}

/* --- Sehr schmale Viewports ---------------------------------------------- */
@media (max-width: 26rem) {
  .brand span { font-size: .68rem; }
  .site-nav .btn { padding: .55em .9em; font-size: .9rem; }
}

/* --- Rezeptseite (Knete) -------------------------------------------------- */
.rezept-kopf { padding-block: var(--s-5) var(--s-5); }
.rezept-hero { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 56rem) {
  .rezept-hero { grid-template-columns: 1fr 26rem; gap: var(--s-5); }
}
.rezept-hero .lead {
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
  color: var(--ink-soft); max-width: 34rem;
}

.rezept-bild { margin: 0; }
.rezept-bild img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); background: var(--ground-warm);
}
.rezept-bild figcaption {
  font-size: .92rem; color: var(--ink-soft); margin-top: var(--s-2);
}

.rezept-spalten { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 50rem) { .rezept-spalten { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

/* Zutatenliste: Menge und Zutat sauber untereinander */
.zutaten { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.zutaten li {
  max-width: none;
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-2);
  padding: .7em 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.zutaten li:first-child { border-top: 1px solid var(--line); }
.zutaten .menge { font-weight: 700; color: var(--deep); }
@media (max-width: 26rem) {
  .zutaten li { grid-template-columns: 1fr; gap: .1rem; }
}

/* Arbeitsschritte, nummeriert - hier ist die Reihenfolge echte Information */
.schritte { list-style: none; counter-reset: schritt; margin: var(--s-4) 0 0; padding: 0; }
.schritte li {
  max-width: none; counter-increment: schritt;
  display: grid; gap: var(--s-2) var(--s-3); align-items: start;
  padding-bottom: var(--s-4); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.schritte li:last-child { border-bottom: 0; margin-bottom: 0; }
@media (min-width: 46rem) {
  .schritte li { grid-template-columns: 1fr 20rem; align-items: center; }
  /* Bei geraden Schritten wandert das Bild nach links - die Spaltenbreiten
     muessen mitwandern, sonst bekommt das Bild die breite Textspalte. */
  .schritte li:nth-child(even) { grid-template-columns: 20rem 1fr; }
  .schritte li:nth-child(even) > picture { order: -1; }
}
.schritte .schritt-text { position: relative; padding-left: 3.4rem; }
.schritte .schritt-text::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -.15em;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--deep); color: #fff;
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.schritte h3 { margin-bottom: .3em; }
.schritte p { margin: 0; }
.schritte img {
  width: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-soft); background: var(--ground-warm);
}

.hinweis-box {
  background: var(--signal-soft); border: 1px solid #E8D5B0;
  border-radius: var(--radius); padding: var(--s-3);
  margin-top: var(--s-4); max-width: 44rem;
}
.band-warm .hinweis-box { background: var(--paper); border-color: var(--line); }


/* --- Horizontale Slider auf schmalen Viewports ---------------------------- */
/* Drei Abschnitte, die untereinander sehr viel Hoehe fressen, werden zum
   Wischen. Die angeschnittene Folgekarte zeigt, dass es weitergeht. */
@media (max-width: 52rem) {
  .module,
  .stimmen,
  .termine {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    gap: var(--s-2);
    /* Karten duerfen bis an den Bildschirmrand laufen */
    margin-inline: calc(var(--s-2) * -1);
    padding-inline: var(--s-2);
    padding-bottom: var(--s-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .module > *,
  .stimmen > *,
  .termine > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
    min-width: 0;
    /* Bezugspunkt fuer absolut positionierte Kinder. Ohne das entkommen
       .visually-hidden-Spans dem Clipping und verbreitern das Dokument. */
    position: relative;
  }
  .module:focus-visible,
  .stimmen:focus-visible,
  .termine:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }

  /* Termine behalten im Slider ihre vertikale Struktur */
  .termin { grid-template-columns: 1fr; align-content: start; }
}

/* --- Gruppen, die am Desktop nebeneinander stehen ------------------------- */
/* Mobil verlieren sie sonst den Bezug zueinander: enger Abstand innerhalb der
   Gruppe, deutlich groesserer nach aussen. */
@media (max-width: 46rem) {
  .observations { gap: var(--s-1); }
  .observations .obs { border-radius: var(--radius); }
  .praxis-paar { gap: var(--s-1); margin-top: var(--s-3); }
  .praxis-paar figcaption { font-size: .85rem; }
}

/* ===========================================================================
   Hilfsklassen
   ---------------------------------------------------------------------------
   Ersetzen die frueheren style="..."-Attribute im Markup. Die CSP erlaubt
   style-src 'self' ohne 'unsafe-inline' – Inline-Styles wurden auf dem Server
   deshalb vom Browser verworfen, lokal ohne .htaccess aber angewendet.

   !important bildet die Spezifitaet des ehemaligen Inline-Styles nach: die
   Regeln sollen wie zuvor jede Komponentenregel uebersteuern. Die Werte sind
   1:1 aus dem alten Markup uebernommen, es rendert nichts anders.
   ========================================================================= */

/* Aussenabstand oben */
.mt-xs { margin-top: .5rem !important; }
.mt-s  { margin-top: .75rem !important; }
.mt-m  { margin-top: 1.5rem !important; }
.mt-l  { margin-top: 2rem !important; }
.mt-xl { margin-top: 2.5rem !important; }
.mt-2xl { margin-top: 3rem !important; }

/* Aussenabstand zuruecksetzen */
.m-0    { margin: 0 !important; }
.mb-0   { margin-bottom: 0 !important; }
.m-xl-0 { margin: 2.5rem 0 0 !important; }

/* Breite und Ausrichtung */
.mw-36 { max-width: 36rem !important; }
.mw-44 { max-width: 44rem !important; }
.mw-46 { max-width: 46rem !important; }
.zentriert { margin-inline: auto !important; }
.text-zentriert { text-align: center !important; }

/* Schrift */
.fs-090 { font-size: .9rem !important; }
.fs-092 { font-size: .92rem !important; }
.fs-095 { font-size: .95rem !important; }
.fs-097 { font-size: .97rem !important; }
.fs-100 { font-size: 1rem !important; }
.text-soft { color: var(--ink-soft) !important; }
.schrift-ui { font-family: 'Atkinson', sans-serif !important; }

/* Einzelbausteine */
.zitat {
  margin: 1.5rem 0 !important;
  padding-left: 1.25rem !important;
  border-left: 4px solid var(--line-strong) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.2rem !important;
  line-height: 1.45 !important;
}
.bild-gerahmt {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lift) !important;
}