/* Psychotherapeutische Praxis Irene Baumgärtel · Entwurf vom 30.10.2026, vierte Fassung
   System „Scheibe und Weg“, abgeleitet aus Irenes Logo: Die Fläche ist die Bernstein-Scheibe, die Seite läuft als weißer Weg hinein.
   Eine Fotoform (Scheibe), ein Raster (zwei gleiche Spalten), eine Listenform, vier Flächen (Weiß, Hell, Bernstein, Anthrazit), ein Übergang (Schwung).
   Eine einzige Bewegung: Das Foto der Startseite kommt beim Laden zur Ruhe (nicht bei „Bewegung reduzieren“).
   Schrift Fira Sans 500 und 700 (OFL, Lizenz in assets/schriften), lokal eingebunden, keine fremden Server. */

/* ---------- Schriften ---------- */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: block;
  src: url("/assets/schriften/fira-sans-latin-500-normal.woff2") format("woff2");
  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: "Fira Sans"; font-style: normal; font-weight: 500; font-display: block;
  src: url("/assets/schriften/fira-sans-latin-ext-500-normal.woff2") format("woff2");
  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: "Fira Sans"; font-style: normal; font-weight: 700; font-display: block;
  src: url("/assets/schriften/fira-sans-latin-700-normal.woff2") format("woff2");
  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: "Fira Sans"; font-style: normal; font-weight: 700; font-display: block;
  src: url("/assets/schriften/fira-sans-latin-ext-700-normal.woff2") format("woff2");
  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; }

/* ---------- Grundwerte ---------- */
:root {
  /* Flächen */
  --grund: #ffffff;
  --hell: #fef3dd;           /* Bernstein stark aufgehellt, die zweite Fläche */
  --wand: #fbb231;           /* Hauptton des Logos, Text darauf 8,1 : 1 */
  --wand-verlauf: linear-gradient(95deg, #fcd28f 0%, #fbb231 58%);   /* wie die Scheibe im Logo */
  --tinte: #2b2624;          /* Text und Fuß, aus dem fast Schwarz des Logos (#363131) */

  /* Text und Linien */
  --tinte-2: #443d39;        /* Nebentext, dunkler als der Logoring, 10 : 1 auf Weiß */
  --wand-tinte-2: #2b2624;   /* Nebentext auf Bernstein: dieselbe Tinte, 8,1 : 1 */
  --fuss-tinte-2: #efe7df;   /* Nebentext im Fuß */
  --linie: #e8d9bd;          /* Linien auf Weiß und Hell */
  --punkt: #e79d18;          /* Listenpunkt */
  --unterstrich: #b9811c;    /* Linkunterstrich auf hellem Grund, 3,4 : 1 */

  /* Nur im Entwurf: Arbeitsfarbe für Fragen an Irene, bewusst außerhalb des Systems */
  --irene: #1c3fa8;          /* Weiß darauf 9 : 1 */

  /* Schriftstufen */
  --t-display: clamp(3rem, 1.5rem + 5.6vw, 6rem);
  --t-h2: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
  --t-lead: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --t-h3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  --t-text: clamp(1.1875rem, 1.1rem + 0.35vw, 1.25rem);
  --t-klein: 1.125rem;

  /* Maße */
  --rand: clamp(1.25rem, 3.5vw, 3rem);
  --breite: 84rem;
  --luft: clamp(2.75rem, 5vw, 4.75rem);
  --luft-eng: clamp(1.75rem, 3vw, 2.75rem);
  --weg: clamp(6rem, 20.8vw, 18.75rem);        /* Höhe des Wegs unter der Bernsteinfläche */
  --schwung: clamp(2rem, 4.5vw, 4rem);         /* Höhe des Übergangs zwischen zwei Flächen */
  --spalten: clamp(2rem, 4vw, 4rem);           /* Abstand der zwei Spalten */
  --ring: var(--grund);                        /* Farbe um überlagerte Scheiben */
  --rundung: 1.25rem;
  --schrift: "Fira Sans", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--tinte); accent-color: var(--tinte); caret-color: var(--tinte); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-text);
  font-weight: 500;
  line-height: 1.55;
  font-feature-settings: "kern" 1;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.015em; }
h3, .titel-klein { font-size: var(--t-h3); letter-spacing: -0.005em; line-height: 1.2; }
h4 { font-size: var(--t-text); line-height: 1.4; }
.einleitung { font-size: var(--t-lead); font-weight: 500; line-height: 1.4; }

/* Deutsche Komposita nur in schmalen Spalten trennen, erst ab zwölf Zeichen; Adressen nie */
main { hyphens: auto; hyphenate-limit-chars: 12 5 5; }
@media (min-width: 60em) { main { hyphens: manual; } }
a[href^="mailto:"], a[href^="tel:"], .titel-klein, .liste li { hyphens: manual; }
.mail-text { white-space: nowrap; }   /* E-Mail-Adresse bleibt zusammen, bricht nie am Bindestrich der Domain */
p, li, dd { text-wrap: pretty; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }   /* geladen sind 500 und 700 */

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--unterstrich);
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 150ms ease, text-decoration-color 150ms ease;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--wand); color: var(--tinte); }

.sprung {
  position: absolute; left: 1rem; top: 1rem; z-index: 20;
  padding: 0.75rem 1rem; background: var(--tinte); color: #fff; text-decoration: none;
  clip-path: inset(50%);
}
.sprung:focus { clip-path: none; }

.entwurf-leiste {
  margin: 0; padding: 0.5rem var(--rand);
  background: var(--irene); color: #fff;
  font-size: 0.875rem; line-height: 1.4; text-align: center;
}

/* ---------- Kopf ---------- */
.kopf { position: relative; z-index: 10; background: var(--grund); }
.kopf__innen {
  max-width: var(--breite); margin: 0 auto; padding: 0.875rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; color: var(--tinte); }
.marke__logo { width: auto; height: 4rem; }
.marke__text { display: flex; flex-direction: column; line-height: 1.2; }
.marke__name { font-size: 1.375rem; font-weight: 700; }
.marke__zusatz { font-size: 1rem; color: var(--tinte-2); }

.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.menue a {
  display: block; padding: 0.625rem 0.75rem; min-height: 2.75rem;
  font-size: var(--t-klein); text-decoration: none; color: var(--tinte);
}
.menue a:hover { text-decoration: underline; text-decoration-color: var(--unterstrich); text-decoration-thickness: 2px; }
.menue a[aria-current="page"] {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--wand);
  text-underline-offset: 0.45em;
}

.menue-knopf {
  display: none;
  min-height: 2.75rem; padding: 0.5rem 1.125rem;
  font: inherit; font-size: var(--t-klein); font-weight: 700; color: var(--tinte);
  background: var(--grund); border: 1px solid var(--tinte); border-radius: 999px; cursor: pointer;
}

@media (max-width: 59.99em) {
  .kopf__innen { gap: 0.75rem; }
  .marke { gap: 0.625rem; flex: 1 1 0%; min-width: 0; }   /* Menü-Knopf bleibt in der Zeile, auch bei 320 px */
  .marke__logo { height: 3.25rem; }
  .marke__name { font-size: 1.1875rem; }
  .marke__zusatz { font-size: 0.875rem; }
  .js .menue-knopf { display: inline-flex; align-items: center; }
  .js .menue { display: none; flex-basis: 100%; }
  .js .menue[data-offen] { display: block; }
  .menue ul { flex-direction: column; gap: 0; padding-bottom: 0.5rem; }
  .menue li + li { border-top: 1px solid var(--linie); }
  .menue a { padding: 0.875rem 0; font-size: 1.25rem; }
  .menue a[aria-current="page"] { text-underline-offset: 0.3em; }
}

/* ---------- Flächen und Übergänge ---------- */
.abschnitt { position: relative; padding: var(--luft) 0; background: var(--grund); }
.abschnitt--oben-eng { padding-top: var(--luft-eng); }
.abschnitt--ohne-oben { padding-top: 0; }
.abschnitt--hell { background: var(--hell); --ring: var(--hell); }
.wand { position: relative; background: var(--wand); background-image: var(--wand-verlauf); color: var(--tinte); --ring: var(--wand); }
.wand a { text-decoration-color: var(--tinte); }
.wand .mail-hinweis { color: var(--wand-tinte-2); }

/* Der Schwung: jeder Flächenwechsel hat dieselbe Kante. Die Fläche wächst damit in die vorige hinein. */
.schwung::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--schwung);
  background: inherit; pointer-events: none;
  -webkit-mask: url("/assets/bilder/schwung.svg") center / 100% 100% no-repeat;
  mask: url("/assets/bilder/schwung.svg") center / 100% 100% no-repeat;
}

/* Der Weg aus dem Logo: Unter jeder Bernsteinfläche oben auf der Seite läuft die weiße Seite als Weg in die Farbe. */
.mit-weg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--weg); z-index: 2;
  background: var(--grund); pointer-events: none;
  -webkit-mask: url("/assets/bilder/weg.svg") center / 100% 100% no-repeat;
  mask: url("/assets/bilder/weg.svg") center / 100% 100% no-repeat;
}

/* ---------- Das Raster: überall dieselben zwei gleichen Spalten, nichts bleibt leer stehen ---------- */
.feld, .satzspiegel { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.feld { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem) var(--spalten); }
.feld__kopf, .feld__inhalt { min-width: 0; }
.feld__kopf > h2 + *, .feld__inhalt > h2 + * { margin-top: 1rem; }
.feld__inhalt > h3 { margin-top: 2rem; margin-bottom: 0.625rem; }
.feld__inhalt > h3:first-child { margin-top: 0; }
.feld__breit { grid-column: 1 / -1; min-width: 0; }
.feld__breit > p { max-width: 50em; }
.satzspiegel > * { max-width: 38em; }
section[id] { scroll-margin-top: 1rem; }
@media (min-width: 60em) {
  .feld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .feld--mitte { align-items: center; }
  .feld__kopf:not(.feld__breit) { position: sticky; top: 1.5rem; }
  .feld--mitte .feld__kopf { position: static; }
}

/* ---------- Die Scheibe: die eine Form der Fotos, dahinter die Sichel aus dem Logo ---------- */
.scheibe { position: relative; isolation: isolate; aspect-ratio: 1; width: 96.5%; }
.scheibe::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--wand); transform: translate(3.5%, 3.5%);
}
.scheibe img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Die Fotos der Räume sind schon quadratisch zugeschnitten; nur Porträt und Wiese brauchen einen Ausschnitt */
.scheibe--portrait img { object-position: 50% 22%; }
.scheibe--wiese img { object-position: 62% 50%; }

/* Zwei Scheiben übereinander: die kleine liegt vorn und trägt einen Ring in der Farbe der Fläche */
.scheiben { position: relative; padding-bottom: 4%; }
.scheiben > .scheibe:first-child { width: 92%; margin-left: auto; margin-right: 3.5%; }
.scheiben > .scheibe--klein { position: absolute; left: 0; bottom: 0; width: 40%; }
.scheibe--klein::before { display: none; }
.scheibe--klein img { border: clamp(0.375rem, 1vw, 0.625rem) solid var(--ring); }

/* Eine Scheibe, die aus dem Inhalt in die Bernsteinfläche ragt */
.ragt { position: relative; z-index: 3; margin-top: calc(-1 * clamp(2.75rem, 12vw, 12rem)); }
@media (max-width: 59.99em) { .ragt { order: -1; justify-self: end; } }
/* Gruppenseite: Der Raum ragt nur auf großen Bildschirmen in den Kopf, um die Höhe der Sprungleiste weiter;
   am Handy steht er unter dem Kopf der Gruppe, weil darüber die Sprungleiste liegt */
@media (max-width: 59.99em) { .ragt--nur-gross { order: 0; margin-top: 0; justify-self: auto; } }
@media (min-width: 60em) { .ragt--nur-gross { margin-top: calc(-1 * clamp(2.75rem, 12vw, 12rem) - 6rem); } }
@media (min-width: 60em) {
  .feld--ragt { grid-template-rows: auto 1fr; }
  .feld--ragt > .ragt { grid-column: 2; grid-row: 1; }
  .feld--ragt > .feld__inhalt:not(.werdegang) { grid-column: 1; grid-row: 1 / span 2; }
  .feld--ragt > .werdegang { grid-column: 2; grid-row: 2; }
  .feld--ragt:not(:has(.werdegang)) > .ragt { grid-row: 1 / span 2; }
}

/* Praxisseite: zwei große Scheiben nebeneinander, die rechte ragt in den Kopf */
.raeume { column-gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 60em) { .raeume > .scheibe:first-child { align-self: end; } }
.werdegang__titel { margin: 0 0 0.75rem; }
.kontakt__vertraulich { margin-top: 1.5rem; }
.kontakt__adresse { font-size: min(var(--t-lead), 5.4vw); }   /* Adresse bleibt bei 320 px in einer Zeile */

/* ---------- Startbühne ---------- */
.buehne { overflow: hidden; }
.buehne__innen {
  max-width: var(--breite); margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--rand) calc(var(--weg) * 0.3);
  display: grid; gap: 2rem;
}
.buehne .titel-gross__name { display: block; }
.titel-gross__praxis { display: block; margin-top: 0.75rem; font-size: var(--t-lead); line-height: 1.2; letter-spacing: 0; }
.buehne__zeile { margin: 0.875rem 0 0; font-size: var(--t-text); max-width: 28em; }
.buehne__bild { width: 100%; margin: 0 0 calc(var(--weg) * -0.3); aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }
@keyframes zur-ruhe { from { transform: scale(1.07); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .buehne__bild img { animation: zur-ruhe 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@media (min-width: 60em) {
  .buehne__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--spalten); align-items: start; padding-bottom: calc(var(--weg) * 0.42); }
  .buehne__bild { align-self: end; width: calc(100% + var(--rand)); max-width: none; margin: 0 calc(-1 * var(--rand)) calc(var(--weg) * -0.3) 0; }
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { --weg: clamp(4rem, 10vw, 9rem); }
@media (min-width: 60em) { .seitenkopf h1 { max-width: calc(56vw - var(--rand)); } }   /* Titel bleibt links vom Kopf des Wegs */
.seitenkopf__innen {
  position: relative; z-index: 3; max-width: var(--breite); margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--rand) calc(var(--weg) * 0.62);
}
.seitenkopf__zeile { margin: 0.875rem 0 0; font-size: var(--t-lead); line-height: 1.35; color: var(--wand-tinte-2); max-width: min(26em, calc(56vw - var(--rand))); }
@media (max-width: 59.99em) { .seitenkopf__innen { padding-bottom: var(--weg); } .seitenkopf__zeile { max-width: none; } }

/* ---------- Handlungen ---------- */
.link-zeile { margin-top: 1.25rem; }
.link-pfeil { font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: var(--wand); }
.link-pfeil::after {
  content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.45em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
}
.link-pfeil:hover { text-decoration-color: var(--tinte); }

.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }
.knopf {
  display: inline-flex; align-items: center; min-height: 3.5rem; padding: 0.75rem 2rem;
  background: var(--tinte); color: #fff; border-radius: 999px;
  font-size: var(--t-text); font-weight: 700; text-decoration: none; transition: background-color 150ms ease;
}
.knopf:hover { background: #4a413d; }
.knopf:active { background: #1a1615; }
.feld__inhalt > .knopf-reihe:first-child { margin-top: 0; }

/* Hinweis zur Verschlüsselung unter jedem E-Mail-Knopf */
.mail-hinweis { margin: 0.75rem 0 0; max-width: 34em; font-size: var(--t-klein); line-height: 1.5; color: var(--tinte-2); }

/* ---------- Die eine Listenform: feine Linie, davor Punkt, Jahr oder Nummer ---------- */
.liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.liste li { position: relative; padding: 0.75rem 0 0.75rem 1.75rem; border-top: 1px solid var(--linie); }
.liste li::before {
  content: ""; position: absolute; left: 0.125rem; top: calc(0.75rem + 0.58em);
  width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--punkt);
}
.liste--gross li { font-size: var(--t-lead); line-height: 1.3; }
.liste--gross li::before { top: calc(0.75rem + 0.42em); }
.liste--jahr li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.75rem; padding-left: 0; }
.liste--jahr li::before { display: none; }
.liste__jahr { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Listen über die volle Breite: zwei Spalten, die Einträge laufen ohne Lücke durch */
@media (min-width: 60em) {
  .liste--spalten { columns: 2; column-gap: var(--spalten); border-bottom: 0; }
  .liste--spalten li { break-inside: avoid; }
}
/* Angaben aus Bezeichnung und Wert: dieselbe Linie */
.daten { margin: 0; border-bottom: 1px solid var(--linie); }
.daten > div { display: grid; gap: 0.125rem; padding: 0.75rem 0; border-top: 1px solid var(--linie); }
.daten dt { font-weight: 700; hyphens: manual; }
.daten dd { margin: 0; }
.daten a[href^="tel:"] { display: inline-block; padding: 0.6875rem 0; margin: -0.6875rem 0; }   /* Tipp-Ziel 44 px, Zeile bleibt gleich */
@media (min-width: 40em) { .daten > div { grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; } }

/* Ein Eintrag aus Titel und Text, getrennt durch dieselbe Linie (Verfahren) */
.eintrag { padding: 1.25rem 0; border-top: 1px solid var(--linie); break-inside: avoid; }
.eintrag h3 { margin-bottom: 0.625rem; }
.eintraege { border-bottom: 1px solid var(--linie); }
@media (min-width: 60em) { .eintraege { columns: 2; column-gap: var(--spalten); border-bottom: 0; } }

/* ---------- Gruppen ---------- */
.gruppen-sprung { position: relative; z-index: 3; max-width: var(--breite); margin: 0 auto; padding: var(--luft-eng) var(--rand) 0; font-size: var(--t-lead); }
.gruppen-sprung ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2rem; }
.gruppen-sprung a { display: inline-block; padding: 0.375rem 0; font-weight: 700; text-decoration-color: var(--wand); text-decoration-thickness: 2px; }
.gruppen-sprung a:hover { text-decoration-color: var(--tinte); }
/* Am Desktop ragt das Foto der ersten Gruppe neben der Sprungleiste in den Kopf. Die Leiste bleibt deshalb in der linken Spalte
   und bricht dort um, statt unter das Foto zu laufen (bei fünf Einträgen verdeckte es „Trauma“ und „In Planung“) */
@media (min-width: 60em) { .gruppen-sprung ul { max-width: calc((100% - var(--spalten)) / 2); } }
/* Eine Gruppe: links alles zum Lesen, rechts Foto, Termine und Inhalte. Beide Spalten stehen fest, keine läuft mit,
   sonst schiebt sich der Kopf beim Scrollen über den Text und die Kästen darunter */
.gruppe__text, .gruppe__seite { min-width: 0; }
.gruppe__text > h2 + * { margin-top: 1rem; }
.gruppe__angaben { margin: 1.5rem 0; }
@media (min-width: 40em) { .gruppe__angaben > div { grid-template-columns: 10rem minmax(0, 1fr); } }   /* halbe Spalte: Bezeichnung schmaler als auf Kontakt */
.gruppe__liste-titel { margin: 2.5rem 0 0.625rem; }
.gruppe__seite > .gruppe__liste-titel:first-child { margin-top: 0; }
.gruppe__zeile { margin-top: 0.75rem; }

/* Der nächste Termin: die eine Bernsteinfläche im Abschnitt, damit das Datum zuerst gelesen wird.
   Dieselbe Fläche trägt Irenes Hinweis oben auf „Fragen“, der vor allen Antworten gelesen werden soll */
.naechster, .hinweis {
  display: grid; gap: 0.125rem; margin: 1.25rem 0; padding: 1.125rem 1.5rem;
  background: var(--wand-verlauf); color: var(--tinte); border-radius: var(--rundung);
}
.naechster__titel, .hinweis__titel { font-weight: 700; }
.hinweis { gap: 0.5rem; margin: 1.5rem 0 1.75rem; }
.hinweis:first-child { margin-top: 0; }
.hinweis p { margin: 0; }
.naechster__wann { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.naechster__alternativ, .naechster__zusatz { font-size: var(--t-klein); font-variant-numeric: tabular-nums; }
.feld__breit > .naechster { width: fit-content; max-width: 100%; }   /* ohne Spalte daneben nicht über die ganze Breite */
.feld__kopf .knopf-reihe { margin-top: 1.25rem; }

/* Themen und Termine: Scheiben auf einem Weg, hohl ist vorbei, Bernstein kommt noch, Anthrazit ist als Nächstes dran */
.fahrplan { --nr: 2.75rem; --oben: 0.875rem; list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.fahrplan__zeile { position: relative; display: grid; grid-template-columns: var(--nr) minmax(0, 1fr); column-gap: 0.875rem; }
.fahrplan__zeile::before {   /* der Weg läuft von Scheibe zu Scheibe */
  content: ""; position: absolute; left: calc(var(--nr) / 2 - 1.5px); top: 0; bottom: 0; width: 3px; background: var(--wand);
}
.fahrplan__zeile--vorbei::before { background: var(--linie); }
.fahrplan__zeile:first-child::before { top: calc(var(--oben) + var(--nr) / 2); }
.fahrplan__zeile:last-child::before { bottom: auto; height: calc(var(--oben) + var(--nr) / 2); }
.fahrplan__nr {
  position: relative; display: grid; place-items: center; width: var(--nr); height: var(--nr); margin-top: var(--oben); border-radius: 50%;
  background: var(--wand); color: var(--tinte); font-weight: 700; line-height: 1;
}
.fahrplan__zeile--vorbei .fahrplan__nr { background: var(--grund); box-shadow: inset 0 0 0 2px var(--linie); color: var(--tinte-2); font-weight: 500; }
.fahrplan__zeile--naechster .fahrplan__nr { background: var(--tinte); color: #fff; }
.fahrplan__text { display: grid; gap: 0.125rem; align-content: start; min-height: calc(var(--nr) + 2 * var(--oben)); padding: var(--oben) 0; border-top: 1px solid var(--linie); }
.fahrplan__zeile:first-child .fahrplan__text { border-top: 0; }
.fahrplan__wann { font-size: var(--t-text); font-weight: 700; line-height: 1.3; }
.fahrplan__tag { margin-left: 0.5rem; font-size: var(--t-klein); font-weight: 500; color: var(--tinte-2); }
.fahrplan__thema { line-height: 1.35; }
.fahrplan__ausweich { display: block; margin-top: 0.25rem; font-size: var(--t-klein); color: var(--tinte-2); }
/* Vorbei: das Thema bleibt und steht vorn, der Vermerk rechts daneben */
.fahrplan__zeile--vorbei { --oben: 0.5rem; }
.fahrplan__zeile--vorbei .fahrplan__text { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fahrplan__zeile--vorbei .fahrplan__thema { order: -1; color: var(--tinte-2); }
.fahrplan__wann--vorbei, .fahrplan__wann--offen { font-size: var(--t-klein); font-weight: 500; color: var(--tinte-2); }
.fahrplan__zeile--naechster .fahrplan__thema { font-weight: 700; }
@media (min-width: 40em) {
  .fahrplan__text { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
  .fahrplan__zeile--vorbei .fahrplan__text { display: grid; column-gap: 1.25rem; align-items: center; align-content: center; }
  .fahrplan__zeile--vorbei .fahrplan__thema { order: 0; }
  .fahrplan__wann { padding-top: 0.0625rem; }
  .fahrplan__tag { display: block; margin-left: 0; }
  .fahrplan__thema { padding-top: 0.0625rem; }
}

/* ---------- Fragen zum Aufklappen ---------- */
.frage { border-top: 1px solid var(--linie); }
.frage:last-child { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1rem 0; list-style: none; cursor: pointer;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:focus-visible { outline-offset: 2px; }
.frage summary h2 { min-width: 0; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; hyphens: auto; }
.frage summary::after {
  content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background:
    linear-gradient(var(--tinte), var(--tinte)) center / 0.875rem 2px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) center / 2px 0.875rem no-repeat,
    var(--wand);
}
.frage[open] summary::after { background-size: 0.875rem 2px, 2px 0, auto; }
.frage__text { padding-bottom: 1.25rem; }

/* ---------- Rechtstexte ---------- */
.rechtstext { font-size: var(--t-klein); }
.rechtstext > h2:first-child { margin-top: 0; }
.rechtstext--spalten > h2, .rechtstext--spalten > h3, .rechtstext--spalten > h4 { break-after: avoid; }
.rechtstext--spalten > p, .rechtstext--spalten > .daten { break-inside: avoid; }
@media (min-width: 60em) { .rechtstext--spalten { columns: 2; column-gap: var(--spalten); } }
.rechtstext > h2 { margin: 2.25rem 0 0.625rem; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.005em; scroll-margin-top: 1.5rem; }
.rechtstext > h3 { margin: 1.5rem 0 0.375rem; font-size: var(--t-text); line-height: 1.3; }
.rechtstext > h4 { font-size: var(--t-klein); margin: 1.25rem 0 0.25rem; }
.rechtstext > .liste { margin: 0 0 1em; }
.rechtstext > .daten { margin: 0 0 1em; }
.hervorgehoben { margin: 0 0 1em; padding: 1.25rem 1.5rem; background: var(--hell); border-radius: var(--rundung); }
.rechtstext__stand { margin-top: 2rem; color: var(--tinte-2); }
.inhaltsverzeichnis h2 { margin: 0; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.005em; }
.inhaltsverzeichnis ol { list-style: none; margin: 1rem 0 0; padding: 0; border-bottom: 1px solid var(--linie); }
.inhaltsverzeichnis li { border-top: 1px solid var(--linie); }
.inhaltsverzeichnis a { display: block; padding: 0.625rem 0; }

/* ---------- Nur im Entwurf: Mannys Fragen an Irene ---------- */
.irene {
  margin: 1.5rem 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--irene); color: #fff; border-radius: var(--rundung);
  font-size: var(--t-klein); font-weight: 500; line-height: 1.45; hyphens: manual;
}
.irene__titel { margin: 0 0 0.5rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.irene ol { margin: 0; padding-left: 1.5rem; }
.irene li + li { margin-top: 0.5rem; }
.irene ol + .irene__titel { margin-top: 1.25rem; }
.feld__breit.irene { margin: 0; }
.frage .irene { margin-bottom: 0; }
.eintrag .irene { margin-bottom: 0; }
.fehlt {
  padding: 0.1em 0.45em; border-radius: 0.3rem; background: var(--irene); color: #fff; font-size: 0.9375em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Fuß ---------- */
.fuss { position: relative; background: var(--tinte); color: #fff; font-size: var(--t-klein); }
.fuss a { text-decoration-color: var(--wand); }
.fuss__innen {
  max-width: var(--breite); margin: 0 auto; padding: 2.5rem var(--rand) 0;
  display: grid; gap: 2.25rem;
}
.fuss__praxis { display: flex; gap: 1.25rem; align-items: center; }
@media (max-width: 39.99em) { .fuss__praxis { flex-direction: column; align-items: flex-start; } }
.fuss__logo { flex: none; width: 5.5rem; height: 5.5rem; padding: 0.5rem; object-fit: contain; background: #fff; border-radius: 50%; }
.fuss__links ul { list-style: none; margin: 0; padding: 0; }
.fuss__links a { display: inline-block; padding: 0.5625rem 0; }   /* Tipp-Ziel 44 px */
.fuss__unten {
  max-width: var(--breite); margin: 1.5rem auto 0; padding: 0 var(--rand) 1.25rem;
  font-size: var(--t-klein); color: var(--fuss-tinte-2);
}
.fuss__unten > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.25rem; border-top: 1px solid #5a524d; }
.fuss__unten p { margin: 0; }
.fuss__login a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.75rem; color: inherit; }
.fuss__login svg { flex: none; opacity: 0.8; }
@media (min-width: 60em) { .fuss__innen { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
  .fuss__links ul { display: flex; gap: 0 2rem; } }

@media (prefers-reduced-motion: reduce) {
  a, .knopf { transition: none; }
}

@media print {
  .entwurf-leiste, .menue, .menue-knopf, .knopf-reihe, .sprung, .irene { display: none !important; }
  .schwung::before, .mit-weg::after, .scheibe::before { display: none; }
  .wand, .fuss, .abschnitt--hell { background: none; color: inherit; }
}