/* ==========================================================================
   Ernährungsberatung und -therapie Stina Götmann
   Zentrale Stildatei
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCHRIFT
   Aktuell wird eine Systemschrift verwendet. Sie sieht auf allen Geräten gut
   aus und muss nicht geladen werden.

   Wenn du später Poppins nutzen möchtest (die Schrift vom Flyer):
   1. Poppins bei fonts.google.com herunterladen
   2. Die Dateien poppins-regular.woff2, poppins-medium.woff2 und
      poppins-semibold.woff2 in den Ordner /schriften/ legen
   3. Die folgenden @font-face-Blöcke einkommentieren (die Zeichen entfernen)
   4. In der Variable --schrift unten "Poppins" an den Anfang setzen

@font-face {
  font-family: "Poppins";
  src: url("schriften/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("schriften/poppins-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("schriften/poppins-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
-------------------------------------------------------------------------- */

:root {
  /* Farben aus dem Logo */
  --petrol: #3E6B7A;
  --petrol-dunkel: #2F525E;
  --petrol-hell: #EDF3F5;
  --senf: #E8B23C;
  --senf-dunkel: #C6942A;
  --salbei: #8AAE84;
  --salbei-hell: #F1F5F0;
  --graublau: #6E8894;

  /* Textfarben */
  --text: #2B3A40;
  --text-leise: #5C6E76;

  /* Flächen */
  --weiss: #FFFFFF;
  --sand: #FAF8F4;
  --linie: #E4E9EB;
  --linie-kraeftig: #9DB3BC;   /* nur für den Abschluss des Kopfbereichs */

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breite: 1080px;
  --radius: 14px;
}

/* --------------------------------------------------------------------------
   GRUNDLAGEN
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--senf);
  outline-offset: 2px;
}

h1, h2, h3 {
  color: var(--petrol);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: 1.15rem; margin-top: 1.8em; }

h2:first-child,
h3:first-child { margin-top: 0; }

p { margin: 0 0 1.1em; }

ul { padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.inhalt {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.schmal {
  max-width: 720px;
}

/* 820 px ist der eine Umbruchpunkt des Layouts. Aufmacher, schmale Textspalte,
   Navigation, Kacheln und der Block "Gut zu wissen" schalten alle hier um,
   damit es nur zwei Zustände gibt und keine Mischformen dazwischen.
   Neue Umbruchpunkte bitte auf denselben Wert legen. */

/* Ab Desktopbreite bleibt die Spalte so breit wie die übrigen Abschnitte,
   nur ihr Inhalt wird auf Lesebreite begrenzt. Dadurch fluchtet der Text mit
   den breiten Abschnitten, mit dem Logo und mit der Navigation. Vorher stand
   er mittig, und die linke Kante der Seite sprang beim Scrollen hin und her. */
@media (min-width: 820px) {
  .schmal { max-width: var(--breite); }
  .schmal > * { max-width: 720px; }

  /* Ausnahme: Die Kästen mit Handlungsaufruf stehen mittig. Sie sind keine
     Fließtextblöcke, sondern etwas zum Anklicken, und dürfen sich deshalb
     bewusst von der linken Kante lösen. Reine Hinweiskästen im Fließtext
     bleiben dagegen linksbündig, sie gehören zum Text darüber. */
  .schmal > .hinweis-mittig,
  .schmal > .check-innen {
    margin-left: auto;
    margin-right: auto;
  }
}

.abschnitt {
  padding: 3.5rem 0;
}

.abschnitt-sand { background: var(--sand); }
.abschnitt-hell { background: var(--petrol-hell); }

/* --------------------------------------------------------------------------
   KOPFBEREICH
   -------------------------------------------------------------------------- */

/* Die Striche im Kopfbereich stehen in einem festen Verhältnis von 6 zu 2:
   der Petrol-Balken oben ist dreimal so stark wie die Linie unten, und der
   Rahmen des Menüknopfs ist genauso stark wie diese Linie. Vorher waren es
   drei verschiedene Stärken (6, 2 und 1), das wirkte unruhig. */
.kopf {
  /* Schmaler Petrol-Balken am Seitenanfang, greift die waagerechten
     Balken der Visitenkarte auf */
  border-top: 6px solid var(--petrol);
  /* Kräftiger als die übrigen Linien, damit sich der Kopfbereich
     deutlich vom Inhalt darunter absetzt */
  border-bottom: 2px solid var(--linie-kraeftig);
  background: var(--weiss);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.marke {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--petrol);
}

/* Logo mit Schriftzug. Die Höhe steuert die Größe, die Breite ergibt sich
   aus dem Seitenverhältnis der Datei (etwa 3,9 zu 1). Der Praxisname steht
   im Logo selbst, daneben gibt es deshalb keinen weiteren Textblock. */
.marke img {
  width: auto;
  height: 72px;
}

@media (max-width: 520px) {
  .marke img { height: 52px; }
}

/* Menü-Schalter für kleine Bildschirme. Rahmen 2 px in Blaugrau, also
   dieselbe Stärke und dieselbe Farbe wie der Abschluss des Kopfbereichs. */
.menue-schalter {
  display: block;
  background: none;
  border: 2px solid var(--linie-kraeftig);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  color: var(--petrol);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
}

.menue-schalter:hover {
  border-color: var(--petrol);
  background: var(--petrol-hell);
}

.navigation {
  display: none;
  padding-bottom: 1rem;
}

.navigation.offen {
  display: block;
}

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

.navigation li {
  margin: 0;
  border-top: 1px solid var(--linie);
}

.navigation a {
  display: block;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}

.navigation a:hover,
.navigation a.aktiv {
  color: var(--petrol);
}

@media (min-width: 820px) {
  .menue-schalter { display: none; }

  .navigation {
    display: block !important;
    /* Abstand, damit der Senf-Unterstrich des aktiven Menüpunkts
       die Linie unter dem Kopfbereich nicht berührt */
    padding-bottom: 0.85rem;
  }

  .navigation ul {
    display: flex;
    gap: 1.6rem;
  }

  .navigation li { border-top: none; }

  .navigation a {
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
  }

  .navigation a.aktiv {
    border-bottom-color: var(--senf);
  }
}

/* --------------------------------------------------------------------------
   AUFMACHER
   -------------------------------------------------------------------------- */

.aufmacher {
  background: var(--weiss);
  padding: 2.5rem 0 3rem;
}

.aufmacher-raster {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 820px) {
  .aufmacher {
    padding: 4rem 0 4.5rem;
  }

  .aufmacher-raster {
    grid-template-columns: 1fr 42%;
    gap: 3.5rem;
  }
}

/* Die Breitenangabe hält die Überschrift auf wenigen Zeilen. "balance"
   verteilt die Wörter gleichmäßig darauf, sonst bleibt schnell ein einzelnes
   Wort in der letzten Zeile stehen. */
.aufmacher h1 {
  max-width: 19ch;
  text-wrap: balance;
}

.aufmacher-zeile {
  font-size: 1.1rem;
  color: var(--text-leise);
  max-width: 40ch;
  margin-bottom: 1.8rem;
}

/* Rundes Porträt, passend zur runden Form des Logos, mit hellem Ring in der
   Petrol-Abstufung. Keine order-Angabe: das Foto folgt der Reihenfolge im
   HTML und steht damit auf schmalen Bildschirmen unter dem Text. Überschrift,
   Unterzeile und die Schaltfläche sind so ohne Scrollen sichtbar. */
.aufmacher-bild img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 8px solid var(--petrol-hell);
  object-fit: cover;
  /* Der Ausschnitt greift weiter oben ins Foto, sonst sitzt das Gesicht im
     oberen Drittel des Kreises statt in der Mitte. */
  object-position: center 25%;
}

/* Auf schmalen Bildschirmen wird das Foto ein rundes Porträt, passend zur
   runden Form des Logos. So bleibt der Aufmacher kompakt. */
@media (max-width: 819px) {
  /* Die Abstände des Desktoplayouts wirken hier zu groß, weil die Inhalte
     darüber und darunter viel kürzer sind. */
  .abschnitt { padding: 2rem 0; }

  /* Das Foto ist hier klein und rund, deshalb braucht es darunter auch nur
     wenig Luft. Die großen Abstände stammen vom Desktoplayout, wo das Bild
     mehr als doppelt so hoch ist. */
  .aufmacher { padding-bottom: 1.25rem; }

  .aufmacher-bild {
    max-width: 210px;
    margin: 0 auto;
  }

  /* Der Ring wird bei der kleinen Fassung dünner, sonst wirkt er zu breit */
  .aufmacher-bild img {
    border-width: 5px;
  }

  /* Die Schaltfläche steht mittig, genau über dem runden Foto darunter. Beide
     bilden dadurch eine gemeinsame Achse. Vorher stand der Knopf links und das
     Foto mittig, was wie ein Versehen aussah. Der Fließtext darüber bleibt
     linksbündig, denn er ist Text und kein Handlungsaufruf. Gilt für alle
     Aufmacher, also Startseite und Über mich. */
  .aufmacher .knopf {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   SCHALTFLÄCHEN
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-block;
  background: var(--senf);
  color: #33261A;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: background 0.15s ease;
}

.knopf:hover { background: var(--senf-dunkel); }

.knopf-hell {
  background: var(--weiss);
  color: var(--petrol);
}

.knopf-hell:hover { background: #F0EDE7; }

/* Die Unterstreichung folgt den Zeilen statt als Strich unter dem ganzen
   Block zu liegen. Bei zweizeiligen Beschriftungen sieht das gewollt aus. */
.weiter {
  font-weight: 500;
  color: var(--petrol);
  text-decoration: underline;
  text-decoration-color: var(--senf);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.weiter:hover { color: var(--petrol-dunkel); }

/* Vergrößert die Fläche, auf der ein Fingertipp den Link trifft, ohne dass
   sich am Layout etwas verschiebt. Der sichtbare Text bleibt gleich groß,
   nur das Ziel wird von rund 19 auf gut 45 Pixel Höhe gebracht. */
.weiter {
  position: relative;
}

.weiter::before {
  content: "";
  position: absolute;
  inset: -13px 0;
}

/* --------------------------------------------------------------------------
   LEITSATZ
   -------------------------------------------------------------------------- */

.leitsatz {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 600;
  color: var(--petrol);
  border-left: 4px solid var(--senf);
  padding-left: 1.1rem;
  margin: 1.8rem 0 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   KARTEN
   -------------------------------------------------------------------------- */

.karten {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Vier Kacheln, deshalb zwei mal zwei statt einer Reihe. Nebeneinander
   würden die Überschriften auf drei Zeilen brechen. */
@media (min-width: 820px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
}

.karte {
  position: relative;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: 0 3px 14px rgba(43, 58, 64, 0.13);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease;
}

.karte:hover {
  box-shadow: 0 5px 20px rgba(43, 58, 64, 0.19);
}

/* Die ganze Kachel ist anklickbar, nicht nur der Link am Ende. Der Link
   legt sich unsichtbar über die gesamte Fläche. */
.karte .weiter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.karte:focus-within {
  outline: 3px solid var(--senf);
  outline-offset: 3px;
}

/* Deutlicher Sprung zwischen Überschrift und Text, sonst verschwimmt beides */
.karte h3 {
  margin-top: 0;
  margin-bottom: 0.55em;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
}

.karte p {
  color: var(--text-leise);
  font-size: 0.98rem;
  flex-grow: 1;
}


.karte-strich {
  /* span ist von sich aus inline, dann greifen Breite und Höhe nicht. In den
     Kacheln fällt das nicht auf, weil sie Flex-Elemente sind. Außerhalb schon,
     etwa bei den Grundsätzen auf der Seite "Über mich". */
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 1.1rem;
}

.strich-petrol { background: var(--petrol); }
.strich-senf { background: var(--senf); }
.strich-salbei { background: var(--salbei); }
.strich-graublau { background: var(--graublau); }

/* --------------------------------------------------------------------------
   HINWEISBLOCK
   -------------------------------------------------------------------------- */

.hinweis {
  background: var(--salbei-hell);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  margin: 2rem 0;
}

.hinweis p:last-child { margin-bottom: 0; }

/* Steht der Hinweisblock allein im Abschnitt, addiert sich sein Außenabstand
   mit dem des Abschnitts zu einer sehr großen Lücke. */
.abschnitt .inhalt > .hinweis:only-child {
  margin-top: 0;
  margin-bottom: 0;
}

.wissenswert {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.8rem;
}

@media (min-width: 820px) {
  .wissenswert { grid-template-columns: repeat(3, 1fr); }
}

.wissenswert h3 {
  margin: 0 0 0.4em;
  font-size: 1.02rem;
}

.wissenswert p {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   ZITAT MIT FOTO
   -------------------------------------------------------------------------- */

.zitat-block {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin: 2.5rem 0;
}

@media (min-width: 700px) {
  .zitat-block { grid-template-columns: 180px 1fr; }
}

.portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--petrol-hell);
}

.zitat {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--petrol);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   TABELLE
   -------------------------------------------------------------------------- */

.preise {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.preise th,
.preise td {
  text-align: left;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.preise td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 500;
  color: var(--petrol);
}

/* --------------------------------------------------------------------------
   WERDEGANG
   -------------------------------------------------------------------------- */

.werdegang {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.werdegang li {
  border-left: 2px solid var(--linie);
  padding: 0 0 1.4rem 1.3rem;
  position: relative;
  margin: 0;
}

.werdegang li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--senf);
}

.werdegang li:last-child { padding-bottom: 0; }

.werdegang-zeit {
  display: block;
  font-weight: 600;
  color: var(--petrol);
}

.werdegang-text {
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   FORMULAR
   -------------------------------------------------------------------------- */

.formular {
  margin-top: 1.5rem;
}

.feld {
  margin-bottom: 1.1rem;
}

.feld label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.feld input,
.feld textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--weiss);
}

.feld textarea {
  min-height: 150px;
  resize: vertical;
}

.pflicht {
  color: var(--text-leise);
  font-weight: 400;
  font-size: 0.9rem;
}

.zustimmung {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}

.zustimmung input {
  width: auto;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

/* Feld gegen automatische Eintragungen - für Besucher nicht sichtbar */
.honigtopf {
  position: absolute;
  left: -9999px;
}

.meldung {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.meldung-gut {
  background: var(--salbei-hell);
  border-left: 4px solid var(--salbei);
}

.meldung-fehler {
  background: #FDF2E7;
  border-left: 4px solid var(--senf-dunkel);
}

/* --------------------------------------------------------------------------
   KONTAKTANGABEN
   -------------------------------------------------------------------------- */

.kontaktliste {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.kontaktliste li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}

.kontaktliste li:first-child { border-top: 1px solid var(--linie); }

.kontakt-titel {
  display: block;
  font-weight: 600;
  color: var(--petrol);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   FUSSBEREICH
   -------------------------------------------------------------------------- */

.fuss {
  background: var(--petrol-dunkel);
  color: rgba(255, 255, 255, 0.85);
  padding: 2.5rem 0 2rem;
  margin-top: 4rem;
  font-size: 0.95rem;
}

.fuss a {
  color: var(--weiss);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.fuss a:hover { border-bottom-color: var(--senf); }

.fuss-raster {
  display: grid;
  gap: 1.8rem;
}

@media (min-width: 700px) {
  .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; }
}

.fuss h2 {
  color: var(--weiss);
  font-size: 1.05rem;
  margin: 0 0 0.7em;
}

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

/* Im Fußbereich bleiben die Abstände bewusst eng. Größere Trefferflächen
   bräuchten mehr Luft zwischen den Einträgen, und der Block wirkt dann
   auseinandergezogen. */
.fuss li { margin-bottom: 0.5em; }

.fuss-schluss {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   RECHTSTEXTE
   -------------------------------------------------------------------------- */

.rechtstext {
  font-size: 1rem;
}

.rechtstext h2 { font-size: 1.3rem; }
.rechtstext h3 { font-size: 1.05rem; }

.rechtstext .hervorgehoben {
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   SCHLUSSZITAT
   Abgesetztes Zitat am Ende einer Seite
   -------------------------------------------------------------------------- */

.schlusszitat {
  margin: 4rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.55;
  color: var(--petrol);
  font-weight: 500;
  text-align: center;
}

/* Weiterführender Link in Karten: etwas mehr Abstand */
.karte p:last-child {
  margin-top: 0.9rem;
  margin-bottom: 0;
  flex-grow: 0;
}

/* --------------------------------------------------------------------------
   NÄHRSTOFFCHECK
   Eigenständiges Zusatzangebot, deshalb bewusst nicht in der Kachelreihe der
   Leistungen, sondern weiter unten als abgesetzter Kasten.
   -------------------------------------------------------------------------- */

.check-innen {
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
}

.check-innen h2 {
  margin-top: 0;
  font-size: 1.35rem;
}

.check-innen p:last-child {
  margin-bottom: 0;
}

/* Zweiter Kontaktweg unter der Schaltfläche, bewusst leiser gesetzt */
.kontakt-alternative {
  font-size: 0.95rem;
  color: var(--text-leise);
  margin-top: 1.2rem;
  margin-bottom: 0;
}

/* Hinweisblock zentriert */
.hinweis-mittig {
  text-align: center;
}

.hinweis-mittig p:first-child {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   ÜBER MICH
   -------------------------------------------------------------------------- */

/* Kleine Zeile über der Überschrift im Aufmacher. Sie benennt die Seite,
   damit die Überschrift selbst eine Aussage sein kann und nicht nur ein
   Etikett ("Über mich"). */
.ueberzeile {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graublau);
}

/* Drei Grundsätze nebeneinander. Wie die Leistungskacheln der Startseite,
   aber ohne Rahmen und ohne Verweis: Hier ist nichts anzuklicken. */
.saeulen {
  display: grid;
  gap: 1.8rem;
  margin-top: 2rem;
}

@media (min-width: 820px) {
  .saeulen { grid-template-columns: repeat(3, 1fr); }
}

.saeule h3 {
  margin: 0 0 0.5em;
  font-size: 1.08rem;
  color: var(--petrol);
}

.saeule p {
  margin: 0;
  color: var(--text-leise);
}

/* Zitat ohne Foto: Das Porträt steht auf dieser Seite schon im Aufmacher.
   Statt des Bildes trägt das Zitat links den senfgelben Strich. */
.zitat-frei {
  margin: 2.5rem 0 0;
  padding-left: 1.4rem;
  border-left: 4px solid var(--senf);
}

/* Steht das Zitat allein in einem Abschnitt, braucht es oben keinen
   zusätzlichen Abstand: Der Abschnitt bringt ihn schon mit. */
.abschnitt .inhalt > .zitat-frei:only-child {
  margin-top: 0;
}

/* "und -therapie" darf nicht umbrechen. Ein geschütztes Leerzeichen allein
   genügt nicht: Der Browser bricht auch nach einem Bindestrich um, und dann
   steht "und -" am Zeilenende und sieht aus wie eine Silbentrennung. */
.zusammen {
  white-space: nowrap;
}

/* Einleitungssatz unter einer Überschrift, vor einer Reihe oder Liste.
   Etwas größer als Fließtext, damit er als Hinführung erkennbar ist. */
.einleitung {
  font-size: 1.08rem;
  color: var(--text-leise);
  max-width: 62ch;
  margin-bottom: 0;
}

/* Kurzer Satz zwischen Unterzeile und Schaltfläche im Aufmacher. Er sagt,
   was hinter der Schaltfläche wartet, und bleibt deshalb eine Zeile kurz. */
.aufmacher-anlauf {
  font-size: 1rem;
  color: var(--text-leise);
  max-width: 40ch;
  margin-bottom: 1.2rem;
}

/* Überschrift im Hinweiskasten am Seitenende */
.hinweis h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   LEISTUNGEN
   -------------------------------------------------------------------------- */

/* Schnellzugriff im Aufmacher. Die Seite ist lang, deshalb soll man mit einem
   Klick beim eigenen Thema sein. Als Kacheln, nicht als kleine Pillen: Vorher
   wirkten sie wie hingeworfen und wurden übersehen.

   Das Raster arbeitet mit Flexbox statt mit festen Spalten. Bei fünf Einträgen
   geht kein Spaltenraster sauber auf, es bliebe immer ein einzelner Nachzügler
   in der letzten Reihe. So teilen sich die beiden Kacheln der zweiten Reihe
   die volle Breite, und auf dem Handy steht jede für sich. */

.sprungziele {
  margin-top: 2rem;
}

.sprungziele-titel {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graublau);
}

.sprungziele-raster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sprungziele-raster a {
  flex: 1 1 200px;
  position: relative;
  padding: 0.9rem 2.4rem 0.9rem 1.1rem;
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}

/* Pfeil nach unten: Er sagt, dass der Klick auf dieser Seite nach unten
   springt und nicht auf eine andere Seite führt. */
.sprungziele-raster a::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--senf);
  border-bottom: 2px solid var(--senf);
  transform: rotate(45deg);
}

.sprungziele-raster a:hover {
  border-color: var(--petrol);
  background: var(--petrol-hell);
}

/* Auf schmalen Bildschirmen steht jede Kachel allein in ihrer Zeile. */
@media (max-width: 819px) {
  .sprungziele-raster a { flex: 1 1 100%; }
}

/* Themenliste in den Leistungsabschnitten. Punkte in Senf wie beim
   Werdegang, damit die Seiten zusammengehören. */
.themen {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.4em;
}

.themen li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6em;
}

.themen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--senf);
}

/* Der farbige Strich über der Abschnittsüberschrift greift die Farbe der
   zugehörigen Kachel auf der Startseite auf. Die Überschrift bringt sonst
   ihren eigenen Abstand nach oben mit, dann klafft eine Lücke. */
.abschnitt .karte-strich {
  margin-bottom: 1.3rem;
}

.karte-strich + h2 {
  margin-top: 0;
}

/* Ein angesprungener Abschnitt soll nicht direkt am oberen Fensterrand
   kleben, sondern etwas Luft darüber behalten. */
:target {
  scroll-margin-top: 1.5rem;
}

/* Deutsche Komposita wie "Nährwertberechnungsprogramm" oder
   "Notwendigkeitsbescheinigung" passen auf schmalen Handys nicht in eine
   Zeile und schieben dann die ganze Seite nach rechts. Silbentrennung löst
   das sauber, der Umbruch mitten im Wort bleibt die Notbremse.
   Überschriften bleiben ungetrennt, dort sieht eine Trennung unruhig aus. */
p, li, dd, blockquote {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Absatz zur fachlichen Arbeitsweise. Hebt sich vom Fließtext ab, sieht aber
   anders aus als die Hinweiskästen: keine Fläche über die ganze Breite,
   sondern ein Petrol-Strich links. So ist erkennbar, dass hier etwas anderes
   steht als im Text davor, ohne dass zwei Kästen aufeinanderstoßen. */
.fachlich {
  border-left: 4px solid var(--petrol);
  background: var(--petrol-hell);
  padding: 1rem 1.2rem;
  margin: 1.8rem 0;
  font-size: 0.98rem;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   ABLAUF UND KOSTEN
   -------------------------------------------------------------------------- */

/* Nummerierte Schritte. Die Zahl steht in einem Petrol-Kreis links, damit die
   Reihenfolge auf einen Blick erkennbar ist. Die eigene Nummerierung ersetzt
   die des Browsers, deshalb list-style: none und ein Zähler. */
.schritte {
  list-style: none;
  counter-reset: schritt;
  padding-left: 0;
  margin: 1.8rem 0 0;
}

.schritte > li {
  counter-increment: schritt;
  position: relative;
  padding-left: 3.4rem;
  padding-bottom: 1.8rem;
  margin-bottom: 0;
}

.schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--petrol);
  color: var(--weiss);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Senkrechte Linie zwischen den Punkten, damit es als Abfolge lesbar ist */
.schritte > li::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 2.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--linie);
}

.schritte > li:last-child { padding-bottom: 0; }
.schritte > li:last-child::after { display: none; }

.schritte h3 {
  margin: 0.25rem 0 0.4em;
  font-size: 1.08rem;
}

.schritte p {
  margin: 0;
  color: var(--text-leise);
}

/* Folgt einem Schritt noch ein zweiter Absatz, etwa ein Downloadlink, braucht
   er etwas Luft. Ohne diese Regel klebt der Link am Fließtext darüber. */
.schritte p + p {
  margin-top: 0.7rem;
}

/* Überschrift über einer Preistabelle */
.tabellen-titel {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--petrol);
  padding-bottom: 0.4rem;
  font-size: 1.08rem;
}

/* Erläuterung unter einem Tabelleneintrag, leiser als die Leistung selbst */
.zusatz {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.93rem;
  color: var(--text-leise);
  font-weight: 400;
}

.zusatz-block {
  font-size: 0.95rem;
  color: var(--text-leise);
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   RECHTSTEXTE
   -------------------------------------------------------------------------- */

/* Platzhalter, die vor dem Livegang gefüllt werden müssen. Bewusst auffällig,
   damit sie niemand übersieht. Nach dem Ausfüllen die Klasse entfernen. */
.luecke {
  border: 2px dashed #C0392B;
  background: #FDF3F2;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1rem 0 1.5rem;
}

.luecke p {
  margin: 0;
  font-size: 0.97rem;
}

.luecke strong { color: #A93226; }

/* Auf sehr schmalen Bildschirmen dürfen auch Überschriften getrennt werden.
   Sonst schiebt ein langes Wort wie "Berufshaftpflichtversicherung" die ganze
   Seite nach rechts. Auf normalen Breiten bleiben Überschriften ungetrennt,
   dort sieht eine Trennung unruhig aus. */
@media (max-width: 420px) {
  h1, h2, h3 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Wert, der noch bestätigt werden muss. Fällt im Text auf, ohne ihn zu
   zerreißen. Nach dem Eintragen die Auszeichnung entfernen. */
.pruefen {
  background: #FDF3F2;
  border-bottom: 2px dashed #C0392B;
  padding: 0 0.2em;
}

/* Kursüberschrift, die zugleich ein Link zur Anmeldeseite ist. Sie soll wie
   eine Überschrift aussehen und trotzdem erkennbar klickbar sein. Deshalb
   bleibt die Textfarbe, und der senfgelbe Strich darunter zeigt die Klickbarkeit
   an. Der Pfeil markiert, dass der Link auf eine fremde Seite führt. */
.kurs-titel a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--senf);
  padding-bottom: 2px;
}

.kurs-titel a::after {
  content: " \2197";
  font-weight: 400;
  color: var(--senf);
}

.kurs-titel a:hover,
.kurs-titel a:focus-visible {
  color: #9A6B10;
}

/* Schmales Bildband über die volle Inhaltsbreite. Es steht für sich, trägt
   keine Bildunterschrift und illustriert bewusst keinen Text: Es soll der
   Seite Luft und Farbe geben, mehr nicht. Deshalb ist das Bild stark
   angeschnitten, ein Hochformat-Ausschnitt würde wie eine Abbildung wirken.
   Die runden Ecken sind dieselben wie an den Kacheln.

   Achtung: Weil das Band nichts behauptet, steht die Kennzeichnung des
   KI-Bildes im Impressum und nicht darunter. Sobald ein Band eine
   Bildunterschrift bekommt, die einen bestimmten Ort nennt, ändert sich
   diese Einschätzung. Siehe CLAUDE.md. */
.bildband {
  margin: 0;
}

.bildband img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  /* Der Ausschnitt liegt weit unten im Bild. So sind Notizbuch und Stift mit
     im Band, und das passt zur Kontaktseite besser als Fenster und Wand. */
  object-position: center 88%;
  border-radius: 14px;
  display: block;
}

@media (max-width: 819px) {
  .bildband img { height: 170px; }
}

/* Bildunterschrift unter einem Foto, leise gesetzt. Wird derzeit nicht
   verwendet, bleibt aber für den Fall einer Kennzeichnung nach Artikel 50
   der KI-Verordnung stehen. Wann die nötig ist, steht in der CLAUDE.md. */
.bildhinweis {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--text-leise);
  /* Linksbündig, damit die Zeile mit der Bildkante und mit allen anderen
     Texten der Seite fluchtet. Mittig gesetzt bräche sie diese Kante. */
  text-align: left;
  line-height: 1.4;
}

/* Kleiner Codeschnipsel im Fließtext, etwa "https://" in der
   Datenschutzerklärung */
code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--petrol-hell);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* Zusatz und Hinweis am Formularfeld. Der Zusatz steht im Label und erklärt,
   warum ein Feld freiwillig ist. Der Hinweis steht unter dem Feld. */
.feld-zusatz {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-leise);
}

.feld-hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--text-leise);
}

/* Eingabefelder sollen erkennbar sein, wenn man sie ausfüllt */
.feld input:focus,
.feld textarea:focus {
  border-color: var(--petrol);
}

/* Pflichtfeld-Markierung: Der Text steht für Screenreader lesbar im Label,
   sichtbar wird daraus ein Sternchen. So bleibt das Feld für alle klar,
   ohne dass dreimal "Pflichtfeld" im Formular steht. */
.pflicht {
  font-size: 0;
}

.pflicht::before {
  content: "*";
  font-size: 1rem;
  color: var(--senf-dunkel);
  font-weight: 600;
}