/* ===========================================================================
   GESTALTUNG DER GANZEN WEBSITE

   Stand v10, 08.08.2026. Diese Datei loest den Wix-Nachbau ab. Sie ist die
   Zusammenfuehrung der drei Dateien, aus denen der angenommene
   Startseiten-Entwurf bestand:

     entwurf-basis.css      Schrift, Farben, Abstaende, Kopf, Hero, Fuss
     entwurf.css            Bloecke, Spalten, Bildbehandlung, Farbverteilung
     entwurf-bewegung.css   Einblenden, Fokus, prefers-reduced-motion

   Dazu kommen die Bausteine, die die acht Unterseiten brauchen und die es auf
   der Startseite nicht gab: Zeitleisten, Preislisten, Aufklappfragen,
   Formularfelder, Rechtstexte.

   Zwei Regeln tragen alles:

   1. Farbe traegt nur Flaechen mit DUNKLEM Text.
      Die 44 Kontrastfehler des Bestands stammen ausnahmslos aus dem
      Gegenteil - weisser Text auf Gruen (2.01:1), weisser Text auf Flieder
      (1.52:1), Flieder auf Gruen (3.06:1). Gemessen am 08.08.2026, siehe
      docs/abnahme/. Hier gilt: auf Flieder 11.48:1, auf Gruen 5.72:1, auf
      Pink 7.39:1, auf Cremeweiss 17.1:1. Keine einzige neue Farbe.

   2. Genau fuenf Abstaende und vier Schriftgroessen.
      Wer einen sechsten Wert braucht, braucht in Wahrheit einen anderen
      Aufbau.
   =========================================================================== */

/* --- Schrift ---------------------------------------------------------------
   Figtree, SIL Open Font License 1.1, Lizenztext unter
   /assets/fonts/OFL-figtree.txt. Selbst gehostet als woff2, Teilmengen latin
   und latin-extended. Kein Aufruf nach draussen.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.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;
}

:root {
  /* --- Farben. Unveraendert aus dem Bestand. ------------------------------ */
  --farbe-text: #1c1917;
  --farbe-weiss: #fff;
  --farbe-hell: #fcf9f4;
  --farbe-pink: #fd7fb5;
  --farbe-flieder: #dccaf3;
  --farbe-gruen: #6f9e7f;

  /* --- Abstaende. Genau fuenf Werte. -------------------------------------- */
  --a1: 8px;
  --a2: 16px;
  --a3: 32px;
  --a4: 64px;
  --a5: 128px;

  /* --- Schriftgroessen. Verhaeltnis 1.4 von Stufe zu Stufe. --------------- */
  --gr-text: 18px;
  --gr-h3: 25px;
  --gr-h2: 35px;
  --gr-h1: 49px;

  /* Zwei Lesemasse, und der Unterschied ist gemessen, nicht Geschmack.

     --lesebreite ist die Hoechstbreite einer Textspalte NEBEN einem Bild. Dort
     steht immer wenig Text, und die Spaltenbreite ergibt sich ohnehin aus dem
     Raster; 39em greift dort praktisch nie ein, sondern deckelt nur.

     --lesespalte ist, was ein Absatz laufenden Textes bekommt. 39em ergaben in
     Figtree bei 18px gemessene 76 bis 87 Zeichen je Zeile - deutlich ueber dem
     geforderten Korridor von 65 bis 75. Bei 34em sind es gemessene 65 bis 76.
     Der Wert ist also aus der Zeilenmessung zurueckgerechnet und nicht
     geschaetzt; die Rechnung steht in docs/abnahme/zeilenlaengen.md. */
  --lesebreite: 39em;
  --lesespalte: 34em;
  --seitenbreite: 1120px;

  /* Die Welle des Bestands. Dort Spalte fuer Spalte am Pixel abgenommen:
     kubische Bezier, beide Kontrollpunkte bei 53% der Breite, Tiefe 15.47%
     der Flaechenbreite. */
  --wellentiefe: 15.47%;

  /* Bewegung. 420 ms liegt in der Mitte des Fensters von 300 bis 500 ms. */
  --bewegung-dauer: 420ms;
  --bewegung-kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bewegung-versatz: 16px;
}

* { box-sizing: border-box; }

/* scroll-padding-top: die Kopfzeile klebt oben und ist 84 Pixel hoch. Ohne
   diese Angabe landet eine Sprungmarke dahinter und die erste Ueberschrift ist
   verdeckt. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(84px + var(--a2));
}

body {
  margin: 0;
  font-family: "Figtree", Arial, sans-serif;
  font-size: var(--gr-text);
  line-height: 1.6;
  color: var(--farbe-text);
  background: var(--farbe-hell);
  -webkit-font-smoothing: antialiased;
}

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

/* overflow-wrap greift erst, wenn ein Wort sonst aus seinem Kasten liefe -
   im gewoehnlichen Satz aendert es nichts, und genau deshalb steht hier das
   und nicht hyphens. Ohne diese Zeile ragte "Datenschutzerklärung" als h1
   bei 375px um 13 Pixel ueber den Fensterrand hinaus und die ganze Seite
   liess sich waagerecht schieben.

   hyphens: auto stand hier kurz und war falsch: es trennt nicht nur im
   Notfall, sondern wo immer es die Zeile besser fuellt. Damit wurde die
   Startseite bei 375px 32 Pixel kuerzer als der angenommene Entwurf - eine
   Abweichung, die niemand gewollt hatte und die erst der Deckungsnachweis
   sichtbar gemacht hat. */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }

/* Nur die erste Ueberschriftstufe, und nur sie.

   overflow-wrap greift erst, wenn ein Wort sonst aus seinem Kasten liefe.
   Ohne diese Zeile ragte "Datenschutzerklärung" als h1 bei 375px um 13 Pixel
   ueber den Fensterrand hinaus und die ganze Seite liess sich waagerecht
   schieben.

   Zweimal wurde es hier zu breit gefasst, beide Male hat es der
   Deckungsnachweis gegen den angenommenen Entwurf gefangen:
     - hyphens: auto trennt nicht nur im Notfall, sondern wo immer es die
       Zeile besser fuellt. Die Startseite wurde davon bei 375px 32 Pixel
       kuerzer als der Entwurf.
     - dieselbe Regel auf h2 brach "Beratungsschwerpunkte" auf der Startseite
       in drei Zeilen statt zwei. Dort ragt das Wort um zwei Pixel aus seiner
       Textspalte, bleibt aber innerhalb der Tafel - es lief nie irgendwo
       hinaus, es sah nur nach einem Fall fuer dieselbe Regel aus. */
h1 { overflow-wrap: break-word; }
h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); letter-spacing: -0.01em; }
/* Vierte Stufe: eine Zwischenzeile, keine eigene Groesse. Sie steht auf
   Textgroesse und wird allein durch das Gewicht als Ueberschrift kenntlich.
   Eine fuenfte Groesse waere ein sechster Wert in einem System aus vieren. */
h4 { font-size: var(--gr-text); }

p { margin: 0 0 var(--a2); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--a2); padding-left: var(--a3); }
li { margin-bottom: var(--a1); }
li:last-child { margin-bottom: 0; }

a { color: inherit; }

figure { margin: 0; }

/* Verweise im Fliesstext sind unterstrichen. Farbe allein waere kein
   Unterschied, den jemand mit Farbsehschwaeche bemerkt. */
.textlink,
main p a,
main li a,
main dd a { text-decoration: underline; text-underline-offset: 0.18em; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sichtbarer Fokusrahmen. Zwei Ringe, damit er auf hellem wie auf farbigem
   Grund steht. */
:focus-visible {
  outline: 3px solid var(--farbe-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprungmarke zum Inhalt. Liegt ausserhalb des Bildes, bis sie den Fokus
   bekommt. */
.zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--a1) var(--a2);
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font-weight: 600;
  text-decoration: none;
}

.zum-inhalt:focus { left: var(--a1); top: var(--a1); }

/* ===========================================================================
   Kopfbereich - Aufbau wie im Bestand: Wortmarke als dreizeilige Versalie
   links, Navigation rechtsbuendig, Knopf ganz aussen rechts.
   =========================================================================== */
/* Die Kopfzeile klebt oben und bleibt beim Scrollen erreichbar.

   position: sticky, nicht fixed. Sticky laesst sie im Fluss der Seite - sie
   behaelt ihren Platz, und alles darunter beginnt da, wo es vorher begann. Mit
   fixed waere sie aus dem Fluss genommen und der erste Bildschirm um ihre
   Hoehe nach oben gerutscht; man muesste jeder Seite einen Ausgleich geben.

   Die Hoehe ist der Punkt. Vor dieser Runde waren es gemessene 136 Pixel am
   Rechner. Das ist als ruhender Kopf in Ordnung und als mitlaufender Streifen
   zu viel: bei 800 Pixeln Fensterhoehe waere jede sechste Zeile dauerhaft
   verdeckt. Der Inhalt ist unveraendert, die Kopfzeile wurde an ihm kleiner -
   Wortmarke, Innenabstand und Knopfhoehe. Gemessen 84 Pixel, 38 Prozent
   weniger.

   Bewusst NICHT beim Scrollen schrumpfend. Eine Kopfzeile, die sich beim
   Scrollen verkleinert, zieht allen Inhalt darunter um die Differenz nach
   oben - genau in dem Moment, in dem man zu lesen anfaengt. */
.kopf {
  position: sticky;
  top: 0;
  /* Ueber allem, was beim Scrollen darunter durchlaeuft: Hero, Tafeln, Fuss. */
  z-index: 30;
  background: var(--farbe-hell);
}

/* Solange die Seite oben steht, sitzt die Kopfzeile auf dem Grund und braucht
   keine Trennung - eine Linie waere dort eine Behauptung ueber eine Kante, die
   es nicht gibt. Sobald Inhalt darunter durchlaeuft, ist sie eine Ebene
   darueber, und das muss man sehen.

   Zwei Werte, nicht einer: die haarfeine Linie gibt die Kante, der weiche
   Schatten die Tiefe. Ein Schatten allein wirkt schmutzig, eine Linie allein
   flach. Beides in der Textfarbe mit wenig Deckkraft, also keine neue Farbe.
   Nur Schatten, keine Groesse - deshalb springt beim Scrollen nichts. Die
   Klasse setzt das Skript am Seitenende. */
html.kopf-schwebt .kopf {
  box-shadow:
    0 1px 0 0 rgba(28, 25, 23, 0.10),
    0 12px 28px -22px rgba(28, 25, 23, 0.55);
}

.kopf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--a2) var(--a3);
}

.wortmarke {
  flex: 0 0 220px;
  text-decoration: none;
  text-transform: uppercase;
}

.wortmarke-name {
  display: block;
  /* 15 statt 20 Pixel: die dreizeilige Wortmarke bestimmt die Hoehe der
     klebenden Kopfzeile. Sie ist damit weiterhin die groesste Schrift im
     Kopf. */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.055em;
}

/* "Caroline Pupp" steht im Kopf nicht sichtbar - so ist es im Bestand, der
   Name steht im Fussbereich jeder Seite. Die Zeile bleibt im Markup stehen,
   damit der Textbestand der Seiten unveraendert bleibt; display:none nimmt
   sie sowohl aus dem Bild als auch aus dem Vorleseprogramm. */
.wortmarke-zusatz { display: none; }

.navigation {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--a3);
}

.navigation ul {
  display: flex;
  align-items: center;
  gap: var(--a3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation li { margin: 0; }

.navigation a {
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.navigation ul a:hover,
.navigation ul a[aria-current="page"] { border-bottom-color: var(--farbe-text); }

/* ---------------------------------------------------------------------------
   Instagram, rechts nach Kontakt.

   In Schwarz, also der Textfarbe des Kopfbereichs, nicht in den Markenfarben
   von Instagram: ein farbiges Logo waere der einzige bunte Punkt in einem Kopf
   aus Schrift und der lauteste Gegenstand der Seite. Das Zeichen ist
   eingebettetes SVG aus drei Formen, siehe _includes/form-instagram.njk.

   Der Klickbereich ist 44 mal 44 Pixel, das Zeichen darin 21. Links und rechts
   liegen also je 11.5 Pixel Luft INNERHALB des Verweises, und die kaemen
   sichtbar zum Abstand der Liste hinzu: gemessene 43.5 Pixel zu Kontakt, wo
   FAQ und Kontakt 32 auseinanderliegen. Die negativen Aussenabstaende betragen
   genau diese Luft. Damit steht das ZEICHEN 32 Pixel von Kontakt und 32 vom
   Knopf entfernt, und der Klickbereich bleibt 44 - das Mass, unter dem ein
   Ziel auf einem Telefon nicht mehr zuverlaessig zu treffen ist.

   Die 11.5 Pixel sind kein sechster Abstandswert. Sie sind der Ausgleich fuer
   den Innenabstand eines Kastens und stehen deshalb als Rechnung da, aus der
   sie folgen, und nicht als Zahl.
   --------------------------------------------------------------------------- */
.menue-instagram a {
  --zeichen: 21px;
  --klickziel: 44px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--klickziel);
  height: var(--klickziel);
  margin-inline: calc((var(--zeichen) - var(--klickziel)) / 2);
  border-bottom: 0;
  text-decoration: none;
}

/* Kein Rand unter dem Zeichen: die Menuepunkte daneben zeigen mit einem
   Unterstrich, wo man steht - bei einem Verweis nach draussen gibt es kein
   "hier stehen wir". */
.navigation .menue-instagram a:hover { border-bottom-color: transparent; }

/* Beim Ueberfahren wird das Zeichen etwas kraeftiger. Ein Kreis darunter waere
   ein zweiter Gegenstand; die Strichstaerke reicht. */
.instagram-zeichen { transition: stroke-width 200ms var(--bewegung-kurve); }
.menue-instagram a:hover .instagram-zeichen { stroke-width: 2.1; }

/* Der Termin-Knopf im Menue ist am Rechner ausgeblendet - dort steht er oben
   rechts im Kopfbereich. Sichtbar wird er erst, wenn das Menue zusammenklappt.
   Siehe den Block bei 1100 Pixeln. */
.menue-termin { display: none; }

.menuknopf {
  display: none;
  padding: var(--a1) var(--a2);
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid rgba(28, 25, 23, 0.25);
  border-radius: 6px;
  cursor: pointer;
}

/* ===========================================================================
   Schaltflaechen. Gruen mit dunklem Text: 5.72:1.
   =========================================================================== */
.knopf {
  display: inline-block;
  padding: var(--a2) var(--a3);
  font-size: 17px;
  font-weight: 600;
  /* Ausdruecklich gesetzt, nicht geerbt: eine Schaltflaeche kann ein <a> oder
     ein <button> sein, und der Browser gibt einem <button> von sich aus einen
     anderen Zeilenabstand. Auf Workshops stand der Calendly-Knopf dadurch
     10px flacher als die beiden Verweis-Knoepfe daneben. */
  line-height: 1.6;
  color: var(--farbe-text);
  background: var(--farbe-gruen);
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  transition: transform 420ms var(--bewegung-kurve);
}

.knopf:hover { transform: translateY(-2px); }

/* Zweite Stufe: derselbe Knopf in Pink. Er markiert den Weg, der auf einer
   Seite NICHT der Hauptweg ist - etwa "Mehr über mich" neben "Termin
   vereinbaren". Pink mit dunklem Text: 7.39:1. */
.knopf-zweit { background: var(--farbe-pink); }

/* Auf einer gruenen Flaeche waere ein gruener Knopf unsichtbar. Dort steht er
   cremeweiss: 17.1:1 zum Text, und er hebt sich vom Grund ab. */
.tafel-gruen .knopf,
.spur .knopf { background: var(--farbe-hell); }

/* Nach dem Verkleinern der Wortmarke war dieser Knopf der hoechste Gegenstand
   im Kopf und bestimmte dessen Hoehe: gemessene 57.6 Pixel gegen 51.8 der
   dreizeiligen Wortmarke. Sein Innenabstand oben und unten geht deshalb eine
   Stufe tiefer, von 16 auf 8. Quer bleibt er so breit wie zuvor - eine flache
   Pille liest sich im Kopf ohnehin ruhiger als eine hohe. */
.knopf-kopf {
  flex: 0 0 auto;
  padding: var(--a1) var(--a3);
  font-size: 16px;
  white-space: nowrap;
}

/* Nur auf schmalen Bildschirmen sichtbar, siehe unten. */
.knopf-mobil { display: none; }

/* ===========================================================================
   STARTSEITE - Hero mit Bildausschnitt und Welle wie auf der Live-Seite.

   Ein Unterschied zum Bestand, mit Absicht: dort steht der Claim WEISS auf
   dem Flieder, gemessen 1.52:1 - genau der Kontrastfehler, den die Startseite
   heute hat. Hier steht er im dunklen Bestandsschwarz: auf Flieder 11.48:1.
   =========================================================================== */
.oberteil { background: transparent; }

.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--a3);
  background: var(--farbe-flieder);
}

/* Bild und Welle liegen zusammen in einem Feld. Dadurch sitzt die Welle mit
   ihrer Unterkante immer genau am unteren Bildrand, unabhaengig von dessen
   Hoehe. Der Bestand rechnet das ueber einen festen Abstand von 34px aus, der
   bei jeder Hoehenaenderung nachgezogen werden muss. */
.hero-bildfeld {
  position: relative;
  line-height: 0;
}

/* Seitenverhaeltnis statt fester Hoehe. Der Bestand stand auf 526px am
   grossen und 440px am kleinen Bildschirm - also einem voellig anderen
   Ausschnitt: am Rechner Schulter und Nacken, auf dem Telefon die ganze
   Person. 1120 zu 526 ist das Mass, das der Ausschnitt am Rechner hatte. */
.hero-bildfeld img {
  width: 100%;
  aspect-ratio: 1120 / 526;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Ein Pixel tiefer als der Bildrand: bei bottom:0 blieb je nach Zoomstufe
   eine haarfeine graue Linie stehen, der Bildrand unter der Welle. */
.hero-bildfeld::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 0;
  padding-bottom: var(--wellentiefe);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C53 0 53 100 100 100L0 100Z' fill='%23dccaf3'/%3E%3C/svg%3E");
  content: "";
}

.hero-inhalt {
  position: absolute;
  z-index: 2;
  right: var(--a3);
  bottom: var(--a4);
  left: var(--a3);
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: 42.5px;
}

/* ===========================================================================
   Einleitung - Text und Bild nebeneinander. Wird ausser auf der Startseite
   auch auf Ueber mich, Angebot und Workshops verwendet.
   =========================================================================== */
/* Innenabstand 32 statt 64 an den Seiten: mit 64 blieben von der Blockbreite
   nur noch 62.5 Zeichen je Zeile uebrig, gefordert sind 65 bis 75. Der
   Block-Aufbau kostet Breite an zwei Stellen - am Rand zum Fenster und
   innen -, das muss die Lesespalte nicht auch noch bezahlen. */
.einleitung {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--a4);
  max-width: var(--seitenbreite);
  margin: 0 auto;
  padding: var(--a4) var(--a3);
  background: var(--farbe-weiss);
}

/* Die Einleitung, wenn sie INNERHALB einer Tafel steht statt fuer sich (seit
   11.08.2026 auf der Angebotsseite). Sie behaelt ihr Raster aus Text und Bild,
   gibt aber alles ab, was die Tafel schon mitbringt: eigene Flaeche, eigene
   Breite, eigener Rand. Sonst staende ein weisser Kasten im weissen Kasten. */
.einleitung-in-tafel {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
}

.einleitung-in-tafel + .karten { margin-top: var(--a4); }

.einleitung-text { max-width: var(--lesebreite); }

/* Die Groesse steht hier und nicht an der Ueberschriftstufe: auf der
   Startseite und auf Ueber mich ist diese Zeile ein h2, auf Workshops ein h1.
   Ohne die Angabe stand sie dort auf 49px und brach in zwei Zeilen um. */
.einleitung-titel { margin-bottom: var(--a2); font-size: var(--gr-h2); }

.einleitung-knopf { margin-top: var(--a3); }

.einleitung-bild {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
}

.einleitung-bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Bild links, Text rechts. Auf Ueber mich und Workshops steht das Portrait
   auf der anderen Seite als auf der Startseite. */
.einleitung-bildlinks { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.einleitung-bildlinks .einleitung-bild { order: -1; }

/* Grosses Bild. Neben dem Bild steht hier ein langer Text statt eines kurzen,
   und die Zeile wird dadurch doppelt so hoch. Mit dem Mass der Startseite -
   festes Seitenverhaeltnis 4:5, senkrecht zentriert - sass das Portrait
   verloren in der Mitte einer hohen leeren Spalte.

   Das Bild waechst auf die Hoehe der Zeile mit, statt auf ein festes
   Seitenverhaeltnis. Dafuer muss die Zeile stretch statt center sein, sonst
   hat das Bild keine Hoehe, an der es sich ausrichten koennte. Die Flaeche
   waechst dadurch von gemessenen 367x459 auf 367x700, also um die Haelfte -
   und vor allem steht das Bild jetzt von Kante zu Kante im Block, statt
   darin zu schwimmen.

   Die SPALTE bleibt bewusst so schmal wie auf der Startseite. Ein erster
   Versuch mit 1.15 statt 1.7 zu 1 machte das Bild breiter und die
   Textspalte von 625 auf 531 Pixel schmal - gemessene 50 bis 64 Zeichen je
   Zeile statt 66 bis 74. Die Breite des Bildes ist hier nicht zu haben,
   ohne den Text dafuer zu bezahlen. */
.einleitung-gross { align-items: stretch; }

.einleitung-gross .einleitung-bild { height: 100%; }

.einleitung-gross .einleitung-bild img {
  height: 100%;
  aspect-ratio: auto;
  /* Der Ausschnitt sitzt etwas ueber der Mitte: das Gesicht steht im oberen
     Drittel des Originals und faellt sonst aus dem Bild. */
  object-position: 50% 35%;
}

/* ===========================================================================
   Schwerpunkte (Startseite)

   Laufband: steht still. Die elf Stichworte stehen als ruhiges Feld aus
   Marken - eine Zeile, die nie aufhoert sich zu bewegen, ist nur lesbar, wenn
   man wartet, bis das gesuchte Wort vorbeikommt.
   =========================================================================== */
.schwerpunkte-inhalt {
  max-width: var(--seitenbreite);
  margin: 0 auto;
  padding: var(--a4) var(--a3);
  background: var(--farbe-weiss);
}

.schwerpunkte-inhalt > h2 {
  margin-bottom: var(--a3);
  text-align: center;
}

.stichwortfeld {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--a1);
  margin: 0 auto var(--a4);
  padding: 0;
  max-width: 46em;
  list-style: none;
}

.stichwortfeld li {
  margin: 0;
  padding: var(--a1) var(--a2);
  font-size: 16px;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-text);
  border-radius: 999px;
}

.spuren {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

/* Alle drei Spalten haben denselben Innenabstand links, auch die erste - sie
   zeigt nur keine Linie. */
.spur {
  padding: 0 var(--a3);
  border-left: 1px solid var(--farbe-text);
}

.spur:first-child { border-left-color: transparent; }

.spur-text p { text-align: justify; hyphens: auto; }

.spur h3 { margin-bottom: var(--a2); }

/* --- Die drei Fotos einzeln ausgerichtet ---------------------------------
   Der Ausschnitt ist quadratisch. Damit sind 67 statt 50 Prozent des
   hochformatigen Originals zu sehen - noetig, damit bei "Sexuelle Gesundheit"
   der Fuss ganz ins Bild passt UND die Muschel nahe der Mitte bleibt.

   Die gruene Flaeche hinter dem Bild ist als Schatten gezeichnet und nicht
   als Pseudo-Element: der Bildrahmen hat overflow:hidden, damit das
   verschobene Bild darin beschnitten wird - das haette ein Pseudo-Element,
   das nach aussen ragt, gleich mit abgeschnitten. Die Breite muss um den
   Versatz schrumpfen, sonst ragt das Bild in der letzten Spalte 16px ueber
   deren rechten Rand hinaus. */
.spur-bild {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  width: calc(100% - var(--a2));
  margin: var(--a2) 0 var(--a3) var(--a2);
  border-radius: 12px;
  box-shadow: calc(-1 * var(--a2)) calc(-1 * var(--a2)) 0 0 var(--farbe-gruen);
}

.spur-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Koerper: etwas tiefer gesetzt. */
.spur:nth-child(1) .spur-bild img { object-position: 50% 4%; }

/* Beziehungen: waagerecht verschoben, damit die Muschel aus der rechten
   Bildhaelfte in die Mitte rueckt. Das geht nur ueber die Breite - mit
   object-position allein waere hier nichts zu machen, ein Hochformat in einem
   breiten Ausschnitt wird nur oben und unten beschnitten. */
.spur:nth-child(2) .spur-bild img {
  width: 145%;
  max-width: none;
  margin-left: -43%;
  object-position: 50% 6%;
}

/* Sexuelle Gesundheit: hoeher angesetzt, damit der Fuss oben vollstaendig im
   Bild steht. */
.spur:nth-child(3) .spur-bild img { object-position: 50% 20%; }

/* ===========================================================================
   TAFELN - der Grundbaustein aller Seiten.

   Jeder Abschnitt ist ein eigener Block mit abgerundeten Ecken auf dem
   cremeweissen Grund. Getrennt wird nicht durch Naehte, sondern dadurch, dass
   zwischen den Bloecken der Grund durchscheint. Was zusammengehoert, sitzt
   sichtbar in einem Kasten - so sieht man die Gliederung einer Seite auf
   einen Blick, auch ohne zu lesen.

   Sie enden nicht buendig am Fensterrand, sonst waere die Rundung an den
   Aussenkanten nicht zu sehen.
   =========================================================================== */
.hero,
.einleitung,
.schwerpunkte-inhalt,
.tafel,
.fuss-inhalt {
  max-width: var(--seitenbreite);
  width: calc(100% - var(--a4));
  margin-right: auto;
  margin-left: auto;
  border-radius: 28px;
}

.tafel {
  padding: var(--a4) var(--a3);
  background: var(--farbe-weiss);
}

/* Eine Tafel fuer Seiten, die nur aus Text bestehen: Soli, Impressum,
   Datenschutz. Sie ist so breit wie die Lesespalte plus Innenabstand.

   Auf der vollen Seitenbreite stand dort der Text links in der Lesespalte und
   die rechte Haelfte der Tafel blieb leer - ueber zwei Bildschirmhoehen
   hinweg. Eine Tafel soll den Inhalt fassen, nicht Platz um ihn herum
   reservieren. */
.tafel-schmal { max-width: 46rem; }

/* Farbige Tafeln. Beide tragen dunklen Text: Flieder 11.48:1, Gruen 5.72:1. */
.tafel-flieder { background: var(--farbe-flieder); }
.tafel-gruen { background: var(--farbe-gruen); }

/* Abstand zwischen den Tafeln. Er sitzt oben, damit die erste Tafel direkt
   unter dem Kopfbereich anschliessen kann, wenn sie das soll. */
.einleitung,
.schwerpunkte-inhalt,
.tafel { margin-top: var(--a3); }

/* Eine Tafel, die den ersten Bildschirm eroeffnet, braucht den Abstand nach
   oben nicht: der Kopfbereich bringt seinen eigenen mit. */
main > :first-child,
.oberteil > :first-child { margin-top: 0; }

.tafel > h2,
.tafel > h1 { margin-bottom: var(--a3); }

/* Fliesstext bleibt in der Lesespalte, auch wenn die Tafel breiter ist. */
.lesespalte { max-width: var(--lesespalte); }

/* Zwei Spalten, wo der Inhalt es traegt: eine Ueberschrift links, die
   Eintraege rechts. Auf schmalen Bildschirmen stehen sie untereinander.

   Das Verhaeltnis ist seit dem 11.08.2026 1:3 statt 1:2. Die Ueberschrift
   braucht nicht mehr als ein Wort Breite ("Weiterbildungen"), die Eintraege
   dagegen jede Stelle, die zu holen ist: bei 1:2 brach der laengste von
   ihnen um, bei 1:3 stehen alle neun auf je einer Zeile. */
.tafel-zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--a3);
}

.tafel-zweispaltig > h2,
.tafel-zweispaltig > h3 { margin-bottom: 0; }

/* Zwei solche Gruppen auf derselben Tafel, etwa Ausbildungen und
   Weiterbildungen: die zweite braucht Luft nach oben, sonst laufen die
   Eintraege der einen in die Ueberschrift der anderen. */
.tafel-zweispaltig-folge { margin-top: var(--a4); }

/* Zwei Gruppen auf derselben weissen Tafel, getrennt durch eine einfache
   Linie statt durch zwei Farbflaechen. Eine ganze Tafel in Farbe wog auf
   dieser Seite schwerer als alles andere und stach aus dem Rest der Website
   heraus; die Farbe sitzt jetzt nur noch an den Jahreszahlen. */
.tafel-zweispaltig-getrennt {
  margin-top: var(--a4);
  padding-top: var(--a4);
  border-top: 1px solid rgba(28, 25, 23, 0.25);
}

/* ===========================================================================
   Die Jahresmarke in der Zeitleiste.

   Die Farbe sitzt als FLAECHE mit dunklem Text darauf, nicht als Textfarbe.
   Als Textfarbe waeren die Jahreszahlen auf Weiss nicht lesbar: Flieder
   ergibt dort 1.52:1, Gruen 3.06:1, gefordert sind 4.5. Genau daher kamen
   neun der elf Kontrastfehler, die diese Seite im Bestand hatte. Als Marke
   stimmt beides: dunkel auf Flieder 11.48:1, dunkel auf Gruen 5.72:1.

   Ausbildungen tragen Flieder, Weiterbildungen Gruen. Damit sind die beiden
   Gruppen schon am Rand auseinanderzuhalten, ohne dass man die Ueberschrift
   sucht.
   =========================================================================== */
.jahr {
  display: inline-block;
  padding: 2px var(--a2);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.jahr-flieder { background: var(--farbe-flieder); }
.jahr-gruen { background: var(--farbe-gruen); }

/* Bei den Publikationen steht die Jahreszahl ohne Flaeche. Dort gibt es nur
   eine Gruppe - eine Marke haette nichts zu unterscheiden und waere blosse
   Verzierung. */
.jahr-schlicht { padding: 0; background: none; }

/* ===========================================================================
   KARTEN - gleichartige Bloecke nebeneinander.

   Ohne eigene Flaeche, nur durch einen feinen Strich getrennt: dieselbe
   Loesung wie bei den Schwerpunkten der Startseite. Drei Farbkaesten
   nebeneinander waeren drei schwere Bloecke; der Strich reicht.
   =========================================================================== */
.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a3);
}

.karten-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Eine Spalte. Nicht "eine Karte weniger nebeneinander", sondern der Fall,
   in dem in der Karte laufender Text steht: bei zwei Spalten sind es
   gemessene 42 bis 57 Zeichen je Zeile, bei einer 65 bis 75. */
.karten-eins { grid-template-columns: minmax(0, 1fr); }

.karte {
  display: flex;
  flex-direction: column;
  padding: var(--a3);
  background: var(--farbe-hell);
  border-radius: 20px;
}

.karte h3 { margin-bottom: var(--a2); }
.karte h4 { margin-bottom: var(--a2); }

/* ===========================================================================
   Angebotskarten (Workshops) - drei nebeneinander.

   Zwei Dinge unterscheiden sie von der gewoehnlichen Karte:

   Der Fliesstext steht im Blocksatz MIT Silbentrennung. In einer Spalte von
   rund 245 Pixeln reisst Blocksatz ohne Trennung Loecher zwischen die
   Woerter; der Browser kennt die deutsche Trennung, weil im <html>
   lang="de-CH" steht.

   Die Schaltflaechen stehen auf einer Linie, unten in der Karte. Damit ist
   ihr Abstand zum letzten Satz zwangslaeufig verschieden - die drei Texte
   sind verschieden lang.

   Der Ausweg ist nicht, den Abstand gleich zu machen (dann stehen die
   Knoepfe auf drei Hoehen), sondern ihn zu erklaeren: ein feiner Strich
   trennt den Text von der Handlung. Damit liest sich der Zwischenraum als
   Fuss der Karte und nicht als Loch. Der Strich steht auf gleicher Hoehe
   wie die Knoepfe, und beides zusammen ergibt eine Zeile, die durch alle
   drei Karten laeuft.
   =========================================================================== */
.karten-angebot .kartentext p {
  text-align: justify;
  hyphens: auto;
}

/* Die Schaltflaechen stehen auf einer Linie, am Fuss der Karte. Weil die drei
   Texte verschieden lang sind, ist ihr Abstand zum letzten Satz
   zwangslaeufig verschieden - das ist der Preis dafuer, dass sie auf einer
   Hoehe stehen, und der ist es wert.

   Ein Trennstrich stand hier kurz und ist wieder weg: er erklaerte den
   Zwischenraum, machte die Karte aber schwerer, als sie sein muss. */
.karten-angebot .karte > :last-child { margin-top: auto; }

/* Die Buchungskarte traegt ihre Schaltflaeche in einem eigenen Absatz. Dessen
   Aussenabstand nach unten haette den Knopf dieser einen Karte gegen die
   beiden anderen verschoben. */
.karten-angebot .buchung p { margin: 0; }

/* Titel und Formatzeile hatten bis zum 10.08.2026 eine Mindesthoehe von drei
   bzw. zwei Zeilen. Das liess den Fliesstext in allen drei Karten auf derselben
   Linie beginnen - um den Preis, dass die Formatzeile bei den beiden kurzen
   Titeln zwei Zeilen unter ihrer Ueberschrift hing. Sie gehoert aber zu ihr und
   zu nichts anderem.

   Die Mindesthoehen sind weg. Was zusammengehoert, steht zusammen; was danach
   kommt, faengt in jeder Karte da an, wo ihr Titel endet. Die Schaltflaechen
   stehen weiterhin auf einer Linie am Kartenfuss - das erledigt margin-top:auto
   und nicht die Mindesthoehe. Der Abstand vom letzten Satz zum Knopf wird
   dadurch in den drei Karten verschieden gross. Das ist kein Loch, sondern der
   Fuss der Karte.

   Die Formatzeile ist zweizeilig ("Einzelsitzung |" / "Dauer: 90 Minuten") und
   bekommt dafuer einen engeren Zeilenabstand als der Fliesstext: die beiden
   Zeilen sind EINE Angabe und sollen nicht wie zwei Absaetze lesen. */
.karten-angebot .rahmen { line-height: 1.45; }

/* Mindestabstand zwischen dem letzten Satz und der Schaltflaeche. Ohne ihn
   klebte der Knopf in der laengsten Karte unmittelbar am Text: dort schiebt
   ihn "margin-top: auto" nicht mehr, weil kein Platz uebrig ist. */
.karten-angebot .kartentext { margin-bottom: var(--a3); }

/* Eine Karte, die ueber die volle Breite geht. Auf der Angebotsseite ist das
   die dritte: sie fuehrt die beiden Ansaetze zusammen und ist der Zielpunkt
   des Abschnitts, keine dritte Spalte neben zweien. */
.karte-breit { grid-column: 1 / -1; }

/* Auf einer farbigen Tafel braucht die Karte einen anderen Grund als den der
   Tafel, sonst ist sie keine Karte mehr. Beide tragen dunklen Text. */
.tafel-flieder .karte { background: var(--farbe-weiss); }
.tafel-gruen .karte { background: var(--farbe-hell); }

/* Die Zeile vor einer Aufzaehlung. Sie kuendigt an und gehoert zur Liste,
   deshalb steht sie dicht darueber. */
.listentitel { margin-bottom: var(--a1); font-weight: 700; }

/* Eine Schaltflaeche, die einen Abschnitt abschliesst, steht mittig unter
   ihm - nicht links, wo sie wie der Anfang der naechsten Zeile aussieht. */
.knopfzeile { margin-top: var(--a3); margin-bottom: 0; text-align: center; }

/* Zwischentitel innerhalb einer Tafel, unterhalb des ersten Fliesstextes. */
.zwischentitel { margin-top: var(--a3); margin-bottom: var(--a2); }

/* Verweis unter einer Kartenreihe, etwa "Mehr dazu erfahren? FAQs". */
/* Der Verweis auf die FAQ steht als sechste Zelle im Kartenraster, auf der
   freien Stelle neben der letzten Karte, und dort auf halber Hoehe. Ausserhalb
   des Rasters (schmaler Bildschirm, eine Spalte) faellt beides von selbst weg
   und er steht wieder unter den Karten. */
.mehr-erfahren {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

/* Der Waehrungshinweis sitzt unten in der rechten Preiskarte, kleiner als
   der Fliesstext und mit deutlichem Abstand zu den Preiszeilen. */
.preise-waehrung { margin-top: var(--a2); margin-bottom: 0; font-size: 16px; }

/* Die Schaltflaeche sass dort, wo der Text zufaellig endete - bei
   unterschiedlich langen Beschreibungen also auf drei verschiedenen Hoehen.
   Mit automatischem Abstand oberhalb des letzten Elements sitzt sie in allen
   Karten am selben Punkt, unten buendig. */
.karte > :last-child { margin-top: auto; }
.karte > p:last-child { margin-bottom: 0; }

/* Die Zeile ueber der Beschreibung, etwa "Einzelsitzung | Dauer: 90 Minuten".
   Sie nennt Format und Dauer und steht deshalb fett in derselben Groesse wie
   der Text darunter - nicht klein und grau: es ist eine Angabe, keine
   Fussnote. */
.rahmen { margin-bottom: var(--a2); font-weight: 700; }

/* Das Workshop-Foto steht zweimal im Markup: am Seitenende (Rechner) und im
   oberen Block nach dem Anfrage-Knopf (Telefon). Sichtbar ist immer genau
   eines. Hier die Grundstellung fuer breite Bildschirme; die Umschaltung steht
   im Block bei 900 Pixeln. */
.abschlussbild-oben { display: none; }

/* Ein Bild, das einen Abschnitt abschliesst. Es steht auf der Tafel und
   nimmt deren Rundung auf. */
.abschlussbild img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 20px;
}

/* ===========================================================================
   ZEITLEISTE - Jahr ueber dem Eintrag. Fuer Ausbildungen, Weiterbildungen und
   Publikationen auf Ueber mich.
   =========================================================================== */
.zeitleiste { margin: 0; }

.zeitleiste dt {
  margin-bottom: var(--a1);
  font-size: 16px;
}

/* Zwei Eintraege nebeneinander statt untereinander. Damit nutzt der Text die
   ganze Breite der Tafel und die Tafel wird halb so hoch - ohne dass die
   Zeilen unlesbar lang werden. Ueber die volle Breite in einer Spalte waeren
   es rund 135 Zeichen je Zeile.

   Ein <dl> laesst zwischen dt und dd kein Element zu, ausser <div>. Genau
   dafuer steht das <div> hier: es haelt Jahr und Eintrag als Paar zusammen,
   damit das Raster sie nicht auseinanderreisst. */
.zeitleiste-zweispaltig {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a4);
}

.zeitleiste-zweispaltig .zeitleiste-eintrag { min-width: 0; }
.zeitleiste-zweispaltig dd { max-width: none; margin-bottom: 0; }
.zeitleiste-zweispaltig .quelle { max-width: none; }

.zeitleiste dd {
  margin: 0 0 var(--a3);
  max-width: var(--lesespalte);
}

.zeitleiste dd:last-child { margin-bottom: 0; }

/* Ausbildungen und Weiterbildungen auf Ueber mich (seit 11.08.2026).

   Diese Liste ist kein Fliesstext, sondern ein Katalog: je Zeile eine
   Station. Die Lesespalte von 612 Pixeln, die fuer Fliesstext richtig ist,
   liess hier zwei von neun Eintraegen umbrechen - der Block bekam Loecher an
   willkuerlichen Stellen. Ohne die Begrenzung stehen sie auf einer Zeile und
   damit alle im selben Abstand. Auf schmalen Bildschirmen brechen sie
   weiterhin um, das ist dort richtig.

   Der Zeilenkorridor von 65 bis 75 Zeichen gilt bewusst nicht: er ist fuer
   laufenden Text gedacht, nicht fuer einzeilige Katalogeintraege. */
.zeitleiste-katalog dd {
  max-width: none;
  margin-bottom: var(--a3);
}

.zeitleiste-katalog dd:last-child { margin-bottom: var(--a3); }

/* Die Quellenangabe steht kleiner als der Fliesstext. Ihre Hoechstbreite ist
   deshalb eine andere: 34em heissen bei 16px 544 statt 612 Pixel. Ohne die
   eigene Angabe passten in dieselbe Spalte gemessene 99 Zeichen je Zeile -
   der Korridor gilt in Zeichen, nicht in Pixeln. */
.quelle { display: block; max-width: 34em; font-size: 16px; }

/* ===========================================================================
   PREISLISTE - Leistung links, Betrag rechts, dazwischen eine feine Linie.

   Kein Spaltenabstand zwischen Leistung und Betrag: sonst waere die Linie an
   der Luecke unterbrochen. Der Abstand kommt als Innenabstand des Betrags.
   =========================================================================== */
.preise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  row-gap: var(--a2);
  margin: 0 0 var(--a3);
}

.preise dt { padding-right: var(--a2); }
.preise dd { margin: 0; font-weight: 600; text-align: right; }

.preise dt:not(:first-of-type),
.preise dd:not(:first-of-type) {
  border-top: 1px solid rgba(28, 25, 23, 0.25);
  padding-top: var(--a2);
}

/* ===========================================================================
   HINWEISKASTEN - eine Aussage, die aus dem Fliesstext heraussteht.
   =========================================================================== */
.hinweis {
  max-width: var(--lesebreite);
  padding: var(--a2) var(--a3);
  border-left: 4px solid var(--farbe-text);
  background: var(--farbe-hell);
  border-radius: 0 12px 12px 0;
}

/* Auf einer cremeweissen Tafel waere ein cremeweisser Kasten unsichtbar. */
.tafel-flieder .hinweis,
.tafel-gruen .hinweis,
.karte .hinweis { background: var(--farbe-weiss); }

/* ===========================================================================
   ABLAUF - nummerierte Schritte (Angebotsseite).

   Die Ziffer steht als grosse Zahl ueber dem Schritt. Sie ist dunkler Text
   auf Flieder, nicht weisser: weiss auf Flieder ergab im Bestand 1.52:1.
   =========================================================================== */
/* Eine Spalte, nicht zwei. In zwei Spalten war der Schritttext gemessene 39
   bis 55 Zeichen je Zeile breit; gefordert sind 65 bis 75. Ausserdem ist ein
   Ablauf eine Reihenfolge - untereinander gelesen ist sie eine, nebeneinander
   muss man raten, ob links-rechts oder oben-unten gilt. */
.ablauf {
  display: grid;
  gap: var(--a2);
  margin: 0 0 var(--a3);
  padding: 0;
  list-style: none;
}

.ablauf > li {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  gap: var(--a3);
  margin: 0;
  padding: var(--a3);
  background: var(--farbe-flieder);
  border-radius: 20px;
}

.ablauf-nr {
  font-size: var(--gr-h2);
  font-weight: 700;
  line-height: 1.15;
}

.ablauf h3 { margin-bottom: var(--a2); }

/* Ueberschrift und Text stehen in derselben Spalte rechts der Ziffer. */
.ablauf h3,
.ablauf > li > p { grid-column: 2; max-width: var(--lesespalte); }

/* ===========================================================================
   AUFKLAPPFRAGEN (FAQ)

   <details> ist das eingebaute Aufklapp-Element des Browsers. Es braucht kein
   JavaScript, ist mit der Tastatur bedienbar und wird von Vorleseprogrammen
   als solches angesagt. Ohne JavaScript ist jede Frage zu oeffnen.
   =========================================================================== */
.faq { display: grid; gap: var(--a1); }

.faq details {
  background: var(--farbe-hell);
  border: 1px solid var(--farbe-text);
  border-radius: 12px;
}

.faq summary {
  position: relative;
  padding: var(--a2) var(--a5) var(--a2) var(--a3);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  position: absolute;
  top: 50%;
  right: var(--a3);
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-70%) rotate(45deg);
  transition: transform 200ms var(--bewegung-kurve);
}

.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }

/* ---------------------------------------------------------------------------
   Die Antwort faehrt auf, statt zu springen.

   Ganz ohne JavaScript. ::details-content ist der eingebaute Behaelter, den
   der Browser um alles ausser dem summary legt; interpolate-size erlaubt,
   auf den Schluesselwert auto zu uebergehen - ohne das laesst sich eine Hoehe
   von 0 auf "so hoch wie noetig" nicht weich fahren.

   content-visibility muss mit uebergehen und braucht dafuer allow-discrete,
   sonst waere der Inhalt waehrend der ganzen Bewegung noch versteckt und man
   saehe einen leeren Kasten aufgehen.

   Wo der Browser das nicht kennt, faellt die ganze Gruppe aus und die Antwort
   erscheint wie bisher sofort. Es geht nichts verloren, es wird nur nicht
   gefahren.
   --------------------------------------------------------------------------- */
:root { interpolate-size: allow-keywords; }

.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size var(--bewegung-dauer) var(--bewegung-kurve),
    content-visibility var(--bewegung-dauer) allow-discrete;
}

.faq details[open]::details-content { block-size: auto; }

.faq details > :not(summary) {
  margin-right: var(--a3);
  margin-left: var(--a3);
  max-width: var(--lesespalte);
}

.faq details > :last-child { margin-bottom: var(--a3); }

.faq-suche { display: block; max-width: 24em; margin-bottom: var(--a3); }

.faq-suche input {
  width: 100%;
  padding: var(--a1) var(--a2);
  border: 1px solid var(--farbe-text);
  border-radius: 999px;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font: inherit;
  font-size: 16px;
}

/* Die Zeile ueber der Ueberschrift, etwa "FAQ". Sie ordnet ein, bevor die
   Ueberschrift benennt. Als Versalie und mit weitem Buchstabenabstand, damit
   sie nicht mit einer zweiten Ueberschrift verwechselt wird. */
.ueberzeile {
  margin-bottom: var(--a1);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===========================================================================
   FORMULAR (Kontakt)
   =========================================================================== */
/* ===========================================================================
   Kontaktkopf: links Name, Mailadresse und der Ablauf, rechts das Formular.

   Die linke Spalte stand kurz fast leer - Ueberschrift, eine Mailadresse und
   darunter nichts, waehrend rechts ein Formular ueber die ganze Hoehe lief.
   Der Ablauf fuellt sie nicht nur, er beantwortet die Frage, die man beim
   Absenden hat: was passiert jetzt.
   =========================================================================== */
.kontakt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: var(--a4);
}

.kontakt-ident h1 { margin-bottom: var(--a3); }

/* --- Der Ablauf in vier Schritten ------------------------------------------
   Ein durchgehender Weg von oben nach unten: eine Linie, vier Marken, vier
   Beschriftungen.

   Die Linie ist EIN Element am <ol>, nicht vier Stuecke an den einzelnen
   Punkten. Vorher hatte jeder Punkt sein eigenes Stueck, dessen Hoehe sich
   aus seiner eigenen Zeilenzahl ergab - bei ungleich langen Beschriftungen
   blieben zwischen den Stuecken Luecken, und der Weg sah aus, als waere er
   an drei Stellen gerissen. Ein Strich, der eine Reihenfolge zeigt, darf
   nicht abreissen.

   Die vier Schritte verteilen sich ueber die Hoehe der Spalte
   (space-between), statt oben zu kleben. Damit fuellt der Weg die Flaeche
   neben dem Formular, anstatt ein Drittel davon zu benutzen und den Rest
   leer zu lassen.

   Die Marken sitzen ueber der Linie und decken sie an ihrer Stelle ab -
   deshalb liegt der Weg im Hintergrund und die Marken tragen einen eigenen
   Grund.
   --------------------------------------------------------------------------- */
.ablauf-kurz h2 { margin-bottom: var(--a3); font-size: var(--gr-h3); }

/* Die vier Schritte stehen dicht beieinander. Sie waren kurz ueber die ganze
   Spaltenhoehe verteilt, um die Flaeche neben dem Formular zu fuellen - dabei
   lagen zwischen zwei Marken vier Zeilen Luft, und der Weg war nicht mehr auf
   einen Blick zu erfassen. Ein Ablauf soll man sehen, nicht absuchen. Die
   Flaeche darunter darf leer bleiben. */
.ablauf-kurz ol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--a3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

/* Die durchgehende Linie. Sie beginnt und endet in der Mitte der ersten
   und der letzten Marke - 1.1em ist deren halbe Hoehe. */
.ablauf-kurz ol::before {
  position: absolute;
  top: 1.1em;
  bottom: 1.1em;
  left: calc(1.1em - 1px);
  width: 2px;
  background: var(--farbe-text);
  opacity: 0.25;
  content: "";
}

.ablauf-kurz li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--a3);
  margin: 0;
  font-weight: 600;
}

/* Die Marke mit der Schrittnummer. Der Zaehler zeichnet sie, nicht die
   eingebaute Nummerierung: die gaebe die fuehrende Null nicht her. Die Liste
   bleibt ein <ol>, ein Vorleseprogramm zaehlt also ohnehin selbst - deshalb
   ist die gezeichnete Ziffer fuer es ausgeblendet. */
.ablauf-kurz li::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-text);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Das Formular sitzt auf einer eigenen weissen Karte. Auf der
   fliederfarbenen Flaeche allein schwammen die Felder: weisse Kaesten auf
   Flieder, ohne etwas, das sie zusammenhaelt. */
.kontakt-formbereich {
  padding: var(--a3);
  background: var(--farbe-weiss);
  border-radius: 20px;
}

.kontakt-formbereich .formular { max-width: none; }

/* Auf weissem Grund braucht das Feld eine ruhigere Fuellung als auf Flieder,
   sonst verschwindet seine Umrandung im Weiss ringsum. */
.kontakt-formbereich .feld input,
.kontakt-formbereich .feld textarea { background: var(--farbe-hell); }

.formular-einleitung { margin-bottom: var(--a3); }

.formular { max-width: 32em; }

/* Der Stern an den Pflichtfeldern. Er steht in der Textfarbe, nicht in einer
   Signalfarbe: eine Farbe allein ist keine Auskunft, die jeder sieht. Was der
   Stern bedeutet, steht als Satz im Formular - fuer Vorleseprogramme sichtbar,
   im Bild ausserhalb. */
.pflicht { font-weight: 700; }

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

.pflicht-hinweis { position: absolute; left: -9999px; }

.feld { margin-bottom: var(--a2); }

.feld label { display: block; margin-bottom: var(--a1); font-size: 16px; font-weight: 600; }

.feld input,
.feld textarea {
  width: 100%;
  padding: var(--a1) var(--a2);
  border: 1px solid var(--farbe-text);
  border-radius: 12px;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font: inherit;
  font-size: 16px;
}

.feld textarea { min-height: 8em; resize: vertical; }

.feld-einwilligung label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--a2);
  align-items: start;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.feld-einwilligung input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--farbe-gruen);
}

.formular button[type="submit"] { width: 100%; }
.formular button[type="submit"]:disabled { opacity: 0.75; cursor: progress; }

.formular-meldung { margin-top: var(--a2); font-size: 16px; }
.formular-meldung:empty { display: none; }

.formular-meldung.gut,
.formular-meldung.schlecht {
  padding: var(--a2);
  border-radius: 12px;
  background: var(--farbe-weiss);
}

.formular-meldung.schlecht { border: 2px solid var(--farbe-text); font-weight: 600; }

/* ===========================================================================
   BUCHUNGSFENSTER (Workshops, Calendly mit Zwei-Klick-Schutz)

   Vor dem Klick wird nichts von calendly.com geladen: kein Skript, kein
   iframe, kein Vorabruf. Die Adresse steht nur als Datenattribut im Markup.
   =========================================================================== */
.buchung-fenster {
  width: min(920px, 94vw);
  max-width: none;
  height: min(760px, 88vh);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
}

.buchung-fenster::backdrop { background: rgba(28, 25, 23, 0.55); }

.buchung-fenster-kopf {
  display: flex;
  gap: var(--a2);
  align-items: center;
  justify-content: space-between;
  padding: var(--a2) var(--a3);
  border-bottom: 1px solid rgba(28, 25, 23, 0.25);
}

.buchung-fenster-kopf h2 { margin: 0; font-size: var(--gr-h3); }

.buchung-schliessen {
  padding: var(--a1) var(--a2);
  border: 1px solid var(--farbe-text);
  border-radius: 999px;
  background: var(--farbe-hell);
  color: var(--farbe-text);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.buchung-schliessen:hover { background: var(--farbe-flieder); }
.buchung-fenster-inhalt { height: calc(100% - 89px); }
.buchung-fenster-inhalt iframe { width: 100%; height: 100%; border: 0; }

/* ===========================================================================
   BILDERREIHE (Kontakt) und VERBANDSGRAFIKEN (Ueber mich)
   =========================================================================== */
/* ===========================================================================
   Der Ortsabschnitt auf der Kontaktseite.

   Die Anschrift steht nicht mehr als dritter Absatz im Fliesstext, sondern
   als eigene Karte rechts daneben - eine Adresse sucht man, man liest sie
   nicht. Die Stellung im Raster ist ausdruecklich angegeben, damit die
   Reihenfolge im Markup unveraendert bleiben kann: Einleitung, Adresse,
   Zugaenglichkeit, in genau dieser Folge liest ein Vorleseprogramm.
   =========================================================================== */
.ort-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--a3) var(--a4);
}

.ort-einleitung { grid-column: 1; grid-row: 1; max-width: var(--lesespalte); margin-bottom: 0; }
.ort-zugang { grid-column: 1; grid-row: 2; max-width: var(--lesespalte); margin-bottom: 0; }

/* Die Adresskarte, ruhig gesetzt: cremeweiss mit einem feinen Strich.

   Sie stand kurz als fliederfarbene Karte auf einer gruenen Flaeche. Zwei
   Farben und ein Versatz fuer drei Zeilen Anschrift waren mehr Aufwand, als
   die Anschrift traegt - und auf einer Seite, die ohnehin eine grosse
   Farbflaeche oben hat, ein dritter Ton zu viel. */
.ort-karte {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: var(--a3);
  font-weight: 700;
  background: var(--farbe-hell);
  border: 1px solid rgba(28, 25, 23, 0.25);
  border-radius: 20px;
  font-style: normal;
  line-height: 1.8;
  white-space: nowrap;
}

/* ===========================================================================
   Bilderreihe.

   Drei Blickwinkel auf dieselbe Praxis, schlicht gesetzt. Sie sassen kurz
   versetzt auf einer gruenen Flaeche wie die Fotos der Startseite - dort
   traegt jedes Foto einen eigenen Abschnitt, hier gehoeren die drei
   zusammen und sollen als Reihe gelesen werden, nicht als drei Marken.

   Beim Ueberfahren hebt sich das Bild um zwei Pixel und der Ausschnitt
   faehrt langsam heran. Beides nur ueber transform, also ohne neues Layout -
   daraus kann kein Layout-Sprung entstehen. Bei prefers-reduced-motion
   bleibt beides aus, siehe unten.
   =========================================================================== */
.bilderreihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a3);
  margin-top: var(--a4);
}

.bilderreihe figure {
  overflow: hidden;
  border-radius: 12px;
  transition: transform var(--bewegung-dauer) var(--bewegung-kurve);
}

/* Quadratische Kacheln, seit dem 10.08.2026. Vorher 4:5 hochkant.

   Der Grund ist die Mischung der Aufnahmen: das Schaufenster ist hochkant,
   die beiden Raumaufnahmen sind querformat (1.174 und 1.304). In einer
   4:5-Kachel waren von den Raeumen nur 68 und 61 Prozent der Breite zu
   sehen - der Raum war nicht mehr zu erkennen, nur noch ein Ausschnitt.

   Gemessen bei den moeglichen Verhaeltnissen:

     Kachel   Raum 1   Raum 2   Wand ueber und unter dem Schaufenster
     4:5       68%      61%     397px
     9:10      77%      69%     351px
     1:1       85%      77%     212px
     6:5      100%      92%       2px

   1:1 ist der Punkt, an dem die Raeume wieder als Raeume lesbar sind und das
   Schaufenster noch Wand hat. Bei 6:5 waeren die Raeume vollstaendig zu
   sehen, das Fenster stuende dann aber randlos in der Kachel. */
.bilderreihe img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 640ms var(--bewegung-kurve);
}

/* --- Wo die beiden Querformate angeschnitten werden ------------------------
   Beide sind breiter als die quadratische Kachel, der Browser schneibt also
   Breite weg. WO er das tut, entscheidet object-position, und das ist hier
   keine Geschmacksfrage: in beiden Aufnahmen stehen die Sessel aussermittig.

   Die Angaben haengen am DATEINAMEN und nicht an der Stelle in der Reihe. Sie
   sind fuer diese beiden Aufnahmen gerechnet; setzt Caroline ueber /admin ein
   anderes Bild ein, soll ein fremder Ausschnitt nicht mitwandern.

   zwei stuehle (1600x1363): sichtbar sind 1363 Spalten, Spielraum 237. Der
   linke Sessel beginnt bei Spalte 110, der rechte endet bei 1330. Mittig
   gesetzt begann der Ausschnitt bei 118 - der linke Sessel wurde also um 8
   Pixel angeschnitten, waehrend rechts 33 Pixel Luft blieben. Bei Versatz
   38.5, also 16 Prozent des Spielraums, steht links wie rechts genau 72
   Pixel Abstand zwischen Sessel und Bildrand. */
.bilderreihe img[src$="praxis-zwei-stuehle.jpg"] { object-position: 16% 50%; }

/* zwei stuehle links (1600x1227): sichtbar sind 1227 Spalten, Spielraum 373.
   Der Sessel im Vordergrund beginnt bei Spalte 25, also fast an der Kante der
   Datei. Mehr Luft links als diese 25 Pixel gibt die Aufnahme nicht her -
   deshalb steht der Ausschnitt ganz links, bei 0. Weiter nach rechts zu
   ruecken hiesse, den Sessel anzuschneiden. */
.bilderreihe img[src$="praxis-zwei-stuehle-links.jpg"] { object-position: 0% 50%; }

.bilderreihe figure:hover { transform: translateY(-2px); }
.bilderreihe figure:hover img { transform: scale(1.05); }

/* Die Verbandsgrafiken stehen auf derselben Tafel wie die Publikationen, mit
   einem feinen Strich als Trennung. Eine eigene Tafel dafuer waere ein
   ganzer Block fuer drei Bilder gewesen. */
.verbaende-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a4);
  margin: var(--a4) 0 0;
  padding: var(--a4) 0 0;
  border-top: 1px solid rgba(28, 25, 23, 0.25);
  list-style: none;
}

.verbaende-reihe li { margin: 0; }
.verbaende-reihe img { max-width: 100%; height: auto; }

/* ===========================================================================
   RECHTSTEXTE - Impressum und Datenschutz. Eine einzige Lesespalte.
   =========================================================================== */
.rechtstext { max-width: var(--lesespalte); }

/* Die Tabelle im Datenschutz-Abschnitt "Bekanntgabe ins Ausland". Der Wortlaut
   gibt vier Spalten vor, das laesst sich nicht als Fliesstext abbilden. Kein
   Schmuck: nur die Trennlinien, die eine Tabelle zum Lesen braucht.

   Die Huelle darf waagerecht rollen. Vier Spalten mit Behoerdennamen passen auf
   einem Telefon nicht nebeneinander; ohne die Huelle schoebe die Tabelle die
   ganze Seite auf und der Ueberlauf laege bei 375 Pixeln nicht mehr bei null. */
.tabellenhuelle {
  overflow-x: auto;
  margin: var(--a3) 0;
}

.rechtstabelle {
  border-collapse: collapse;
  min-width: 34rem;
  font-size: 16px;
  text-align: left;
}

.rechtstabelle th,
.rechtstabelle td {
  padding: var(--a1) var(--a2) var(--a1) 0;
  border-bottom: 1px solid rgba(28, 25, 23, 0.25);
  vertical-align: top;
}

/* ---------------------------------------------------------------------------
   Die drei Beitragsstufen auf der Soli-Seite, seit dem 10.08.2026 als
   Preisbloecke.

   Die Machart ist die des Preisblocks der Angebotsseite und dort schon
   entschieden: feine Umrandung, keine Farbe, Leistung links, Betrag rechts,
   dazwischen eine Linie. Drei gleichrangige Karten, weil es drei
   gleichrangige Formate sind - nichts daran ist hervorzuheben.

   Der Gewinn ist nicht Optik. Die Betraege stehen dadurch spaltenweise
   untereinander auf gleicher Hoehe: die ermaessigte Zeile aller drei Formate
   liegt auf einer Linie, die regulaere darunter, die solidarische darunter.
   Genau so vergleicht man Preise. In der Aufzaehlung davor lagen zwischen
   45 EUR und 60 EUR fuenf Zeilen Text.

   Die Tafel gibt dafuer ihre schmale Fassung auf (46rem). Sie war richtig,
   solange hier nur Fliesstext stand; drei Karten in 46rem waeren je 220 Pixel
   breit. Der Fliesstext behaelt seine Lesespalte.
   --------------------------------------------------------------------------- */
.soli-stufen { margin-top: var(--a3); }

/* Die Ueberschrift der Karte ist im Markup ein h2 - sie gliedert die Seite
   unter der einen h1. Ihre Groesse ist die dritte Stufe: drei Karten
   nebeneinander tragen keine 35 Pixel. Groesse und Stufe sind zwei
   verschiedene Dinge. */
.soli-karte h2 {
  margin-bottom: 0;
  font-size: var(--gr-h3);
  letter-spacing: -0.01em;
}

/* Die Dauer ist eine Naeherbestimmung des Formats, keine zweite Angabe - also
   klein und dicht unter dem Namen, genau wie .preis-dauer im Preisblock der
   Angebotsseite. */
.soli-dauer {
  margin: var(--a1) 0 var(--a2);
  font-size: 16px;
}

/* Die Beitragszeilen tragen kein zusaetzliches Gewicht. Im Preisblock der
   Angebotsseite steht links eine Leistung und rechts ihr Preis; hier stehen
   links drei Stufen desselben Preises. Sie fett zu setzen hiesse, drei
   Ueberschriften uebereinander zu stellen. */
.soli-karte .preis-name { font-weight: 400; }

.soli-schluss { margin-top: var(--a4); }
.soli-schluss p + p { margin-top: var(--a2); }
.rechtstext h2 { margin-top: var(--a4); margin-bottom: var(--a2); font-size: var(--gr-h3); }
.rechtstext h3 { margin-top: var(--a3); margin-bottom: var(--a1); font-size: var(--gr-text); }
.rechtstext > :first-child { margin-top: 0; }

.adresse { font-style: normal; }

/* ===========================================================================
   Eingebettete Formen (SVG)

   Kreis und Schnittflaeche im Ansatz-Abschnitt der Angebotsseite. Kein
   Symbolzeichensatz, keine Bibliothek, keine Bilddatei. Im SVG steht kein
   Text; jede Beschriftung steht als echtes HTML daneben. Es bewegt sich
   nichts, also gibt es auch bei prefers-reduced-motion nichts abzuschalten.

   Hier stand bis zum 09.08.2026 zusaetzlich die Gestaltung der drei
   Entwurfsvarianten unter /entwurf-angebot-a, -b und -c. Die Wahl ist
   gefallen, die Entwurfsseiten sind weg - und mit ihnen rund 120 Zeilen, die
   niemand mehr angesprochen hat. Eine davon war schaedlich: sie setzte
   dieselbe Spaltenbreite wie die gewaehlte Fassung, nur mit einem anderen
   Wert, und gewann je nach Reihenfolge.
   =========================================================================== */
.formbild { margin: 0; }
.formbild svg { display: block; width: 100%; height: auto; }


/* ===========================================================================
   ANGEBOTSSEITE
   =========================================================================== */

/* --- Themenfelder ---------------------------------------------------------
   Fuenf Karten in Flieder auf weisser Tafel. Sie waren cremeweiss auf Weiss
   und damit kaum vom Grund zu unterscheiden - der ganze Block verschwand
   zwischen dem Bild darueber und dem Ansatz darunter. Flieder mit dunklem
   Text: 11.48:1.

   Die Titel stehen auf Ueberschriftsgroesse drei, obwohl sie im Markup h2
   sind: fuenf Karten nebeneinander tragen keine 35px. Groesse und Stufe sind
   zwei verschiedene Dinge - die Stufe sagt, wie der Text gegliedert ist, die
   Groesse, wie viel Platz er hat.
   --------------------------------------------------------------------------- */
.karte-flieder { background: var(--farbe-flieder); }
.themenfelder .karte h2 { margin-bottom: var(--a2); font-size: var(--gr-h3); }

/* Der Text bleibt an seiner Ueberschrift. Ohne diese Zeile greift die
   allgemeine Kartenregel "letztes Kind nach unten" - im Raster sind alle
   Karten gleich hoch, und die kuerzeste Karte bekam dadurch ein Loch
   zwischen Ueberschrift und Text: bei "Uebergaenge & Veraenderungen"
   gemessene 45 statt 16 Pixel. Die Haltungskarten im gruenen Block loesen
   es seit dem 09.08.2026 genauso. */
.themenfelder .karte > :last-child { margin-top: 0; }

/* --- Ansatz: drei vollbreite Baender --------------------------------------- */
.baender { display: grid; gap: var(--a3); }

/* Die Spaltenbreite ist die Bildbreite des SVG in Pixeln: 140 Einheiten zu
   140px, 220 zu 220px. Dadurch ist eine Einheit im Bild genau ein Pixel auf
   dem Schirm - und ein Kreis im dritten Band ist exakt so gross wie der
   einzelne in den beiden Baendern darueber. Zwei Formen, die dasselbe
   bedeuten, muessen dasselbe Mass haben. */
.band {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: var(--a4);
  padding: var(--a3);
  background: var(--farbe-weiss);
  border-radius: 20px;
}

.band-text { max-width: var(--lesespalte); }
.band h3 { margin-bottom: var(--a2); }
/* Der Kernsatz eroeffnet den Block. Er stand auf Ueberschriftsgroesse drei
   (25px) und beherrschte damit die beiden oberen Baender, waehrend das dritte
   ohne Kernsatz auskam - die drei sahen nicht wie drei Teile einer Reihe aus.
   Jetzt Textgroesse mit mehr Gewicht: er hebt sich ab, ohne den Block zu
   uebernehmen. */
.band-kernsatz { font-weight: 600; }

/* Das dritte Band ist der Zielpunkt des Abschnitts. Es traegt einen feinen
   Rand in Pink - derselbe Ton wie die Schnittflaeche in seiner Grafik - und
   etwas mehr Innenabstand. Zwei ruhige Signale statt einer weiteren
   Farbflaeche: die Tafel darunter ist schon fliederfarben, ein dritter
   Farbwert im selben Abschnitt waere einer zu viel.

   Die Form darin ist breiter als die einzelnen Kreise, weil zwei darin
   liegen. */
.band-ziel {
  grid-template-columns: 220px minmax(0, 1fr);
  padding: var(--a4) var(--a3);
  border: 2px solid var(--farbe-pink);
}

/* --- Haltung: fuenf Karten auf gruener Tafel ------------------------------
   Der einzige gruene Abschnitt der Seite. Vorher waren es fuenf umrandete
   Kaesten auf Weiss - sie standen nebeneinander, ohne dass etwas sie
   zusammengehalten haette. Die Flaeche macht aus fuenf Aussagen eine Haltung.

   Der Hinweiskasten darunter traegt beide Aussagen, die nicht sagen, WIE
   gearbeitet wird, sondern woran sich die Arbeit misst und wo sie aufhoert.
   --------------------------------------------------------------------------- */
/* Der Titel hatte bis zum 11.08.2026 zwei Zeilen Mindesthoehe, damit der Text
   in allen fuenf Karten auf derselben Linie beginnt. Der Preis dafuer war ein
   Loch unter jedem einzeiligen Titel - bei "Selbstbestimmung" und
   "Vertraulich" gemessene 45 statt 16 Pixel. Caroline hat genau das
   angemerkt. Der Text steht jetzt unter seinem Titel und nicht auf einer
   gedachten Linie mit den Nachbarn.

   Und kein "margin-top: auto" am letzten Element: die allgemeine Kartenregel
   schiebt es an den Fuss, damit Schaltflaechen auf einer Linie stehen. Hier
   ist das letzte Element der Text selbst, und der gehoert unter seinen
   Titel. */
.haltung-bereich .karte h3 { font-size: var(--gr-h3); }
.haltung-bereich .karte > :last-child { margin-top: 0; }

/* Die Abgrenzung am Ende der Seite. Eine eigene Tafel mit dem kraeftigen
   Strich des Hinweiskastens - ohne Farbflaeche, damit sie nicht wie ein
   weiteres Angebot aussieht. */
.abgrenzung {
  border-left: 4px solid var(--farbe-text);
  border-radius: 0 28px 28px 0;
}

/* Die Ueberschrift dieses Blocks. Bewusst klein gehalten: sie ordnet den Block
   ein, sie eroeffnet kein neues Kapitel. Fett und eine Spur groesser als der
   Text darunter, mehr braucht es nicht - deshalb nicht --gr-h2, sondern die
   dritte Stufe. */
.abgrenzung-titel {
  margin-bottom: var(--a3);
  font-size: var(--gr-h3);
}

.abgrenzung p { max-width: var(--lesespalte); }
.abgrenzung p + p { margin-top: var(--a3); }

/* --- Preiskarten -----------------------------------------------------------
   Drei gleichrangige Karten mit feiner Umrandung, ohne Farbe.

   Das Erstgespraech stand kurz als gruene Flaeche ueber der vollen Breite.
   Damit sah es aus wie ein Angebot, das hervorgehoben werden soll - dabei ist
   es einfach der erste Termin und steht gleichwertig neben den anderen
   Posten. Wer eine Zeile faerbt, sagt etwas ueber sie; hier war nichts zu
   sagen.
   --------------------------------------------------------------------------- */
.karte-umrandet {
  background: none;
  border: 1px solid rgba(28, 25, 23, 0.25);
}

.preisliste { margin: 0; padding: 0; list-style: none; }

.preisliste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a2);
  margin: 0;
  padding: var(--a2) 0;
}

.preisliste li + li { border-top: 1px solid rgba(28, 25, 23, 0.25); }

.preis-name { font-weight: 600; }

/* Die Dauer steht klein unter der Leistung. Sie ist eine Naeherbestimmung,
   keine zweite Leistung. */
.preis-dauer { display: block; font-size: 16px; font-weight: 400; margin-bottom: 0; }

.preis-betrag { white-space: nowrap; font-weight: 700; }

/* Eine Notiz zu einem einzelnen Posten, etwa wozu das Erstgespraech dient.
   Sie steht unmittelbar unter der Liste und nicht am Kartenfuss: die
   allgemeine Kartenregel schiebt das letzte Element nach unten, damit
   Schaltflaechen auf einer Linie stehen - hier ist das letzte Element aber
   keine Schaltflaeche, sondern ein Nachsatz, und der gehoert an seinen
   Posten. */
.preis-notiz { margin: var(--a2) 0 0; font-size: 16px; }
.karte-umrandet > :last-child { margin-top: 0; }

.preis-fuss { margin-top: var(--a3); }
.preis-fuss p + p { margin-top: var(--a2); }

@media (max-width: 900px) {
  .band,
  .band-ziel { grid-template-columns: minmax(0, 1fr); }

  .band,
  .band-ziel { gap: var(--a3); padding: var(--a2); }
  .band .formbild { max-width: 140px; }
  .band-kernsatz { font-size: var(--gr-text); font-weight: 600; }

}

/* ===========================================================================
   Fussbereich
   =========================================================================== */
.fuss {
  padding: var(--a3) var(--a3) var(--a4);
  background: var(--farbe-hell);
}

.fuss-inhalt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a3);
  width: calc(100% - var(--a2));
  padding: var(--a3);
  background: var(--farbe-hell);
  font-size: 16px;
}

.fuss p { margin: 0 0 var(--a1); }
.fuss p:last-child { margin-bottom: 0; }

.fuss-name { font-weight: 700; letter-spacing: 0.04em; }

.fuss-flaggen { display: flex; gap: var(--a1); margin-top: var(--a1); }
.fuss-flaggen img { width: 32px; height: auto; border-radius: 3px; }

/* ===========================================================================
   BEWEGUNG

   Grundsatz: der sichtbare Zustand ist der Normalzustand. Ohne JavaScript
   steht die ganze Seite lesbar da, es wird nur nichts eingeblendet. Erst ein
   Skript setzt die Klasse "bewegung" auf <html> und schaltet damit ueberhaupt
   erst den versteckten Ausgangszustand ein.
   =========================================================================== */
html.bewegung body {
  animation: seite-auf 320ms var(--bewegung-kurve) both;
}

/* Beginnt bei 5 Prozent, nicht bei null. Der Browser zaehlt ein Zeichnen
   nicht als Inhalt, wenn eine darueberliegende Ebene auf Deckkraft exakt 0
   steht; Lighthouse brach daran mit "die Seite hat nichts gezeichnet" ab.
   Sichtbar ist der Unterschied zwischen 0 und 5 Prozent am Anfang einer
   320-ms-Kurve nicht. */
@keyframes seite-auf {
  from { opacity: 0.05; }
  to { opacity: 1; }
}

html.bewegung [data-auf] {
  opacity: 0;
  transform: translateY(var(--bewegung-versatz));
  transition:
    opacity var(--bewegung-dauer) var(--bewegung-kurve),
    transform var(--bewegung-dauer) var(--bewegung-kurve);
  will-change: opacity, transform;
}

html.bewegung [data-auf].ist-da {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--bewegung-kurve);
}

/* ===========================================================================
   Der Kopfbereich klappt frueher zusammen als der Rest der Seite: bei 1100px,
   nicht erst bei 900.

   Grund, gemessen: Wortmarke, sechs Menuepunkte und der Termin-Knopf brauchen
   nebeneinander rund 1100px. Bei 950px Fensterbreite ragte der Knopf 99px
   ueber den rechten Rand hinaus und die ganze Seite liess sich waagerecht
   schieben. Aufgefallen ist das erst am 09.08.2026 - die vier ueblichen
   Pruefbreiten sind 375, 768, 1280 und 1920, und genau zwischen 768 und 1280
   faellt dieser Bereich durch.

   Alles andere - Raster, Abstaende, Schriftgroessen - wechselt weiterhin bei
   900px. Der Kopfbereich hat seine eigene Grenze, weil er als einziger eine
   feste Mindestbreite hat.
   =========================================================================== */
@media (max-width: 1100px) {
  .menuknopf { display: block; order: 2; margin-left: auto; }

  .kopf-inhalt {
    flex-wrap: wrap;
    gap: var(--a2);
    padding: var(--a2);
  }

  .wortmarke { flex: 0 0 auto; }
  .wortmarke-name { font-size: 14px; }

  /* Der Knopf steht dann nicht mehr im Kopfbereich, sondern im Menue, unter
     Kontakt. Dadurch sitzt das Menuezeichen oben rechts in der Ecke, statt in
     eine zweite Zeile zu rutschen.

     Die Ausnahme ist die Startseite: dort steht er weiterhin sichtbar unter dem
     Hero, siehe .knopf-mobil. Er ist die einzige Handlungsaufforderung im
     ersten Bildschirm, und das Menue muss man dafuer nicht erst oeffnen. Auf
     den uebrigen acht Seiten stand er bis zum 10.08.2026 als eigener Streifen
     unter dem Kopfbereich und war dort das Erste, was man sah - noch vor der
     Ueberschrift der Seite. */
  .knopf-kopf { display: none; }

  .knopf-mobil {
    display: block;
    margin: 0;
    padding: var(--a3) var(--a2) 0;
    text-align: center;
  }

  .navigation { display: none; order: 4; flex-basis: 100%; }
  .navigation.ist-offen { display: block; }
  .navigation ul { flex-direction: column; align-items: flex-start; gap: var(--a2); padding: var(--a2) 0; }

  /* --- Die Reihenfolge im aufgeklappten Menue -----------------------------
     Kontakt, dann Instagram, dann der Termin-Knopf.

     Geordnet wird das hier und nicht im Markup, und das ist keine
     Bequemlichkeit: am Rechner MUSS Instagram unmittelbar nach Kontakt stehen,
     dort ist der Termin-Knopf ausgeblendet. Eine Reihenfolge im Markup gilt
     fuer beide Breiten und kann nur eine der beiden richtig bedienen. Die
     Liste ist hier eine Spalte, und order ordnet innerhalb dieser Spalte um:
     die sechs Menuepunkte behalten 0, Instagram bekommt 1, der Knopf 2.

     Der Preis: fuer Tastatur und Vorlesehilfen bleibt die Abfolge des Markups,
     also Termin vor Instagram. Bei den zwei letzten Punkten einer Liste ist das
     zu vertreten. Waere es die Reihenfolge der Menuepunkte selbst, waere es das
     nicht. */
  .menue-instagram { order: 1; }
  .menue-termin { order: 2; }

  .menue-termin {
    display: block;
    /* Der PUNKT streckt sich auf die Menuebreite, der KNOPF darin nicht. Die
       Trennlinie gehoert zum Punkt, und eine Linie, die einen Abschnitt
       abtrennt, muss durchlaufen: ohne diese Zeile ist der Punkt nur so breit
       wie der Knopf, die Linie endet mitten im Menue und sieht aus, als
       unterstreiche sie das Instagram-Zeichen darueber. Gemessen Linie 311
       Pixel, Knopf 213, beide beginnen bei 32. */
    align-self: stretch;
    margin-top: var(--a2);
    padding-top: var(--a2);
    border-top: 1px solid rgba(28, 25, 23, 0.15);
  }

  /* Der Knopf im Menue hat genau die Groesse des Knopfes unter dem Hero der
     Startseite: gemessen beide 213 mal 59 Pixel. Das ist nicht nachgemessen
     eingetragen, sondern folgt daraus, dass hier NICHTS zur Regel .knopf
     hinzukommt - eine eigene Groesse waere eine zweite Stelle, die bei jeder
     kuenftigen Aenderung am Knopf mitgezogen werden muss.

     Die eine noetige Zeile setzt keine Groesse, sondern nimmt eine Regel
     zurueck: .navigation a gibt jedem Verweis im Menue einen unsichtbaren Rand
     von 2 Pixeln unten, aus dem der Unterstrich des aktuellen Punktes wird.
     Auf einer Pille gibt es keinen aktuellen Punkt, und die 2 Pixel machten den
     Knopf 61 statt 59 hoch. */
  .menue-termin .knopf { border-bottom: 0; }

  /* Instagram linksbuendig wie die Menuepunkte darueber, und auf demselben
     Abstand: 16 Pixel unter Kontakt, so wie Kontakt 16 unter FAQ steht.

     Der Ausgleich fuer den Innenabstand wandert von quer auf senkrecht. Ohne
     Innenabstand waere der Klickbereich nur 21 Pixel hoch, also unter dem Mass,
     das auf einem Telefon zuverlaessig zu treffen ist. Er behaelt seine 44
     Pixel und wird um die Luft, die er innen hat, aus dem Fluss der Liste
     genommen. Sichtbar 16, greifbar 44. */
  .menue-instagram a {
    justify-content: flex-start;
    margin-inline: 0;
    margin-block: calc((var(--zeichen) - var(--klickziel)) / 2);
    padding: 0;
  }

  /* Das aufgeklappte Menue haengt an einer klebenden Kopfzeile. Auf einem
     niedrigen Fenster - Telefon im Querformat, acht Punkte samt Knopf - waere
     sein unteres Ende sonst nicht erreichbar: die Seite dahinter scrollt, das
     Menue nicht mit. Es bekommt darum seine eigene Hoehe und rollt in sich. */
  .navigation.ist-offen {
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Die Kopfzeile ist hier 80 Pixel hoch statt 84. */
  html { scroll-padding-top: calc(80px + var(--a2)); }
}

/* ===========================================================================
   Schmale Bildschirme. Es wird eine Stufe im Abstandssatz tiefer gegriffen,
   nicht dazwischen gerechnet.
   =========================================================================== */
@media (max-width: 900px) {
  :root {
    --gr-h1: 35px;
    --gr-h2: 28px;
    --gr-h3: 22px;
  }

  .hero h1 { font-size: 31px; }

  /* Die Hoehe der Fliederflaeche haengt am Text, nicht an der Fensterbreite.
     Sie ist so hoch wie der Claim plus ein fester Abstand oben und unten.

     Vorher stand hier aspect-ratio: 1120 / 352.7. Das war aus der Welle
     hergeleitet - Fliederflaeche = Fotohoehe minus Wellentiefe, damit die
     beiden Wellenenden gleich weit von oben und unten entfernt sind. Die
     Rechnung stimmt, aber sie bindet die Hoehe an die Breite, waehrend der
     Claim in Zeilenstufen springt. Gemessen ueber den schmalen Bereich, Luft
     ober- und unterhalb des Claims je Seite:

         Hero  320px   3 Zeilen     0px   - der Text fuellte den Kasten ganz
         Hero  343px   2 Zeilen    19px
         Hero  480px   2 Zeilen    40px
         Hero  899px   1 Zeile    124px   - fast das Vierfache des Textes

     Unten klebte der Claim also an der Kante, oben schwamm er in Flieder.
     Mit dem Textmass sind es ueberall 16px, bei jeder Zeilenzahl.

     Preis dieser Aenderung: die Wellenenden sind nicht mehr gleich weit von
     oben und unten entfernt. Das faellt an der geschwungenen Kante nicht auf,
     der ungleiche Rand um den Claim fiel auf. */
  .hero-inhalt {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--a2);
  }

  /* Kein Innenabstand unten am Hero: die Fliederflaeche soll genau so hoch
     sein wie das Foto, ein zusaetzlicher Abstand wuerde sie hoeher machen. */
  .hero { padding-bottom: 0; }

  .hero,
  .einleitung,
  .schwerpunkte-inhalt,
  .tafel {
    width: calc(100% - var(--a3));
    border-radius: 20px;
  }

  .einleitung {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a3);
    padding: var(--a3) var(--a2);
  }

  /* --- Erst das Bild, dann der Text ---------------------------------------
     Auf Workshops, Angebot und Ueber mich steht am Rechner ein grosses Foto
     neben dem Einleitungstext. Untereinander gelesen stand bis zum 10.08.2026
     ueberall der Text zuerst - eine Seite begann also mit vier Absaetzen, und
     das Foto kam nach dem ersten Bildschirm.

     Das Foto steht jetzt oben. Es ist auf diesen drei Seiten das Erste, was die
     Seite zu sagen hat, und auf einem Telefon ist der erste Bildschirm alles,
     was man sicher hat.

     Nur .einleitung-gross: die Startseite traegt diese Klasse nicht. Dort steht
     ueber der Einleitung schon das Hero-Foto, und zwei Fotos unmittelbar
     hintereinander waeren der Seitenanfang. */
  .einleitung-gross .einleitung-bild { order: -1; }
  .einleitung-text { max-width: none; }

  .schwerpunkte-inhalt,
  .tafel { padding: var(--a3) var(--a2); }

  .tafel-zweispaltig-getrennt { margin-top: var(--a3); padding-top: var(--a3); }

  /* Nebeneinander wird untereinander: bei 375px waeren zwei Spalten je rund
     150px breit. */
  .zeitleiste-zweispaltig { grid-template-columns: minmax(0, 1fr); gap: var(--a3); }

  /* Das grosse Portrait bekommt seine Hoehe auf schmalen Bildschirmen wieder
     aus dem Seitenverhaeltnis: untereinander gibt es keine Zeile mehr, an
     deren Hoehe es sich ausrichten koennte, und ohne Angabe waere das Bild
     so hoch wie das Original.

     4:3 statt 4:5. Ueber die ganze Fensterbreite ist ein 4:5-Bild bei 375
     Pixeln 420 Pixel hoch - mehr als die Haelfte des Bildschirms, bevor ein
     Wort gelesen ist. Als erstes Element der Seite ist das zu viel. */
  .einleitung-gross .einleitung-bild img { height: auto; aspect-ratio: 4 / 3; }

  /* --- Die beiden Portraits zeigen die Person ganz ------------------------
     Bis zum 10.08.2026 war auf Ueber mich und Angebot der Kopf abgeschnitten.
     Die Ursache lag nicht am Format, sondern an object-position: 50% 35% weiter
     oben - richtig fuer die hohe, schmale Spalte am Rechner, falsch fuer einen
     Querstreifen auf dem Telefon.

     Nachgerechnet fuer Ueber mich (caroline-031.jpg, 1066x1600) bei 375 Pixeln
     Fenster: Bildspalte 311 Pixel, Faktor 0.2917, sichtbar bei 4:3 also 799 der
     1600 Bildzeilen. 35 Prozent von (1600 - 799) heisst: der Ausschnitt beginnt
     bei Bildzeile 281. Der Kopf beginnt bei 120. Also 161 Zeilen zu tief -
     genau das, was zu sehen war.

     1:1 statt 4:3 zeigt 1066 statt 799 Bildzeilen, ein Drittel mehr. Das ist
     das "Herauszoomen": echtes Zoomen geht bei object-fit:cover nicht, der
     Faktor haengt an der Breite der Spalte. Was geht, ist ein hoeheres Fenster,
     und das zeigt mehr von der Person, ohne sie kleiner zu machen. 311 statt
     233 Pixel Hoehe, weiterhin deutlich unter den 389 von 4:5.

     Der Ausschnitt haengt am DATEINAMEN und nicht an der Seite: die Zahlen
     gehoeren zu diesen beiden Aufnahmen. Setzt Caroline ueber /admin ein anderes
     Foto ein, soll ein Ausschnitt, der fuer ein fremdes Bild gerechnet wurde,
     nicht mitwandern. */
  .einleitung-gross .einleitung-bild img[src$="caroline-031.jpg"],
  .einleitung-gross .einleitung-bild img[src$="angebot-img-4358.jpg"] {
    aspect-ratio: 1 / 1;
  }

  /* Ueber mich: sichtbar sind die Bildzeilen 60 bis 1126, vom Haaransatz mit
     etwas Luft darueber bis unter das Knie. 11% von (1600 - 1066) = 60. */
  .einleitung-gross .einleitung-bild img[src$="caroline-031.jpg"] {
    object-position: 50% 11%;
  }

  /* Angebot (angebot-img-4358.jpg, 1200x1600): Faktor 0.2592, bei 1:1 sind 1200
     Bildzeilen zu sehen. Der Kopf beginnt bei 190, der Ausschnitt soll bei etwa
     90 anfangen: 90 von (1600 - 1200) sind 22.5%. */
  .einleitung-gross .einleitung-bild img[src$="angebot-img-4358.jpg"] {
    object-position: 50% 22%;
  }

  /* --- Workshops: das zweite Foto schliesst den oberen Block ab -----------
     Es steht im oberen Block, unmittelbar nach dem Anfrage-Knopf, statt am Ende
     der Seite. Auf dem Telefon liegt die ganze Seite untereinander: vier
     Absaetze Einleitung, dann drei Angebote als hohe Karten, dann ein Bild -
     ueber tausend Woerter in einem Zug und ein Foto, das niemand mehr sieht.

     Sichtbar ist immer genau eines der beiden; display:none nimmt das andere
     auch aus dem Vorleseprogramm.

     Der Abstand nach oben ist derselbe, den der Knopf nach oben hat: am Knopf
     steht margin-top: var(--a3), der Absatz darueber bringt 16 Pixel mit,
     benachbarte Aussenabstaende fallen zusammen - es bleiben die 32 des
     groesseren. Genau diese 32 stehen hier. */
  .abschlussbild-unten { display: none; }
  .abschlussbild-oben { display: block; margin-top: var(--a3); }

  /* Der Ausschnitt: die Haende sitzen in der Mitte.

     workshop-dsc-0143.jpg ist 1600x1071, also 1.494 breit zu hoch. Bei 16:9
     (1.778) ist das Fenster BREITER als das Bild - waagerecht wird deshalb gar
     nichts beschnitten, und object-position hat in Querrichtung keine Wirkung.
     Die Haende standen links der Mitte, rechts lag ein Viertel leerer
     Hallenboden mit einer gelben Linie, die den Blick nach rechts zog.

     4:3 (1.333) ist schmaler als das Bild. Erst dadurch entsteht ein
     waagerechter Spielraum von 171 Bildspalten, und erst dadurch lassen sich
     die Haende ueberhaupt verschieben. Sie liegen bei Bildspalte 730 von 1600;
     15% von 171 heisst Ausschnitt ab Spalte 26, Fenstermitte bei 740.

     Senkrecht ist bei 4:3 nichts zu stellen: das Bild wird auf die Hoehe
     gerechnet und ist vollstaendig zu sehen. */
  .abschlussbild-oben img {
    aspect-ratio: 4 / 3;
    object-position: 15% 50%;
  }

  .stichwortfeld { margin-bottom: var(--a3); }

  /* Die drei Fotos der Beratungsschwerpunkte. Am Rechner stehen sie in drei
     Spalten und sind je rund 271 Pixel breit. Untereinander nahmen sie bis zum
     10.08.2026 die ganze Spaltenbreite ein - bei 375 Pixeln Fenster also ein
     Quadrat von 295 Pixeln, das mit seinem Text zusammen ueber eine
     Bildschirmhoehe hinausging. Man sah nie Bild und Ueberschrift zugleich.

     78 Prozent der Spalte. Gemessen bei 375 Pixeln: 243 statt 295 Pixel, also
     17.6 Prozent kleiner in der Kante und 32 Prozent in der Flaeche. Der Wert
     ist aus der Messung zurueckgerechnet; 82 Prozent waren es zuerst, das ergab
     nur 13.6.

     Die gruene Flaeche dahinter ist als Schatten desselben Kastens gezeichnet
     und schrumpft dadurch von sich aus mit. Ihr Versatz bleibt bei 16 Pixeln,
     weil er das Verhaeltnis wahrt, das er am Rechner hat: dort 16 auf 271, hier
     16 auf 243. Auf 8 gesetzt waere er kein Versatz mehr, sondern ein gruener
     Saum.

     Auto-Raender statt eines festen linken Abstands: der Kasten steht in der
     Mitte der Spalte, und die gruene Flaeche hat links wie oben Luft. */
  .spur-bild {
    width: 78%;
    margin: var(--a2) auto var(--a3);
  }

  .spuren { grid-template-columns: minmax(0, 1fr); gap: var(--a3); }
  .spur {
    padding: var(--a3) 0 0;
    border-left: 0;
    border-top: 1px solid var(--farbe-text);
  }
  .spur:first-child { border-top-color: transparent; padding-top: 0; }
  .spur-text p { text-align: left; }

  .karten,
  .karten-zwei,
  .ablauf,
  .bilderreihe,
  .kontakt-kopf,
  .ort-oben,
  .tafel-zweispaltig { grid-template-columns: minmax(0, 1fr); }

  /* Untereinander statt nebeneinander: die Stellung im Raster muss mit weg,
     sonst stuende die Adresskarte weiterhin in einer zweiten Spalte, die es
     gar nicht mehr gibt. Die Reihenfolge ist dann wieder die des Markups -
     Einleitung, Adresse, Zugaenglichkeit.

     nowrap faellt hier weg. Auf breiten Bildschirmen haelt es die Adresse in
     den Zeilen, die im Text stehen; bei 375px ragte damit "(Eingang an der
     Davidsbodenstrasse)" ueber den Fensterrand und die ganze Seite liess
     sich waagerecht schieben. */
  .ort-einleitung,
  .ort-zugang,
  .ort-karte { grid-column: auto; grid-row: auto; }

  .ort-karte {
    margin: 0 0 0 var(--a2);
    padding: var(--a2);
    white-space: normal;
  }

  .karte { padding: var(--a2); }
  .faq summary { padding: var(--a2) var(--a4) var(--a2) var(--a2); font-size: 17px; }
  .faq summary::after { right: var(--a2); }
  .faq details > :not(summary) { margin-right: var(--a2); margin-left: var(--a2); }
  .faq details > :last-child { margin-bottom: var(--a2); }

  .verbaende-reihe { gap: var(--a3); }

  .fuss { padding: var(--a2) var(--a2) var(--a3); }
  .fuss-inhalt {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a3);
    width: calc(100% - var(--a2));
    padding: var(--a3) var(--a2);
  }
}

/* ---------------------------------------------------------------------------
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.bewegung body { animation: none; }

  html.bewegung [data-auf] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Die Uebergaenge auf 0.001ms zu setzen genuegt hier nicht: eine
     Verschiebung beim Ueberfahren ist auch dann eine Bewegung, wenn sie
     sofort geschieht. Sie faellt deshalb ganz weg. Die Fotos bleiben
     sichtbar, nur ruhig. */
  .bilderreihe figure:hover,
  .bilderreihe figure:hover img,
  .knopf:hover { transform: none; }

  @view-transition { navigation: none; }
}