/* ==========================================================================
   Naturheilpraxis Martina Pohlmann – Stylesheet
   Aufbau: 1 Grundlagen · 2 Bausteine · 3 Kopf & Navigation · 4 Kopfbereiche
           5 Abschnitte · 6 Fuß · 7 Bewegung · 8 Druck
   ========================================================================== */

/* ---------------------------------------------------------------- 1 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.25; text-wrap: balance; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-tief); text-decoration: none; }
a:where(:not(.knopf):not(.blank)) {
  border-bottom: 1px solid var(--gold-zart);
  transition: color var(--sanft), border-color var(--sanft);
}
a:where(:not(.knopf):not(.blank)):hover { color: var(--apricot-tief); border-color: var(--apricot-tief); }

:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; border-radius: 1px; }

.huelle { width: 100%; max-width: var(--breite-inhalt); margin: 0 auto; padding: 0 var(--rand); }
.huelle--schmal { max-width: var(--breite-schmal); }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sprungmarke {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  background: var(--weiss); color: var(--gold-tief); padding: .8rem 1.4rem;
  border: 1px solid var(--gold); font-size: .85rem;
}
.sprungmarke:focus { top: .8rem; }

/* ---------------------------------------------------------------- 2 Bausteine */
.versal {
  font-family: var(--schrift-versal); font-weight: 300;
  letter-spacing: var(--sperrung-weit); text-transform: uppercase;
}
.schreib { font-family: var(--schrift-schreib); font-weight: 400; line-height: .92; color: var(--gold); }
.vorzeile {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .8rem;
  letter-spacing: var(--sperrung-weit); text-transform: uppercase; color: var(--gold-tief);
  margin: 0 0 .9rem;
}
.hinleitung { font-size: 1.06em; color: var(--tinte-zart); max-width: var(--breite-text); }
.zart { color: var(--tinte-zart); }

/* Abschnittstitel: Schreibschrift-Zeile über gesperrter Versalzeile */
.titel { margin-bottom: var(--raum-l); }
.titel--mitte { text-align: center; }
.titel--mitte .titel-zeile { margin-inline: auto; }
/* Die Schreibschrift-Zeile sitzt innerhalb der Überschrift, damit Suchmaschinen
   und Vorlesehilfen den vollen Satz erfassen. Darum hier die Versal-Vorgaben
   der Überschrift ausdrücklich zurücknehmen. */
h1 .s, h2 .s {
  display: block; font-family: var(--schrift-schreib); font-weight: 400;
  color: var(--gold); line-height: .92;
  text-transform: none; letter-spacing: .01em;
}
.titel h2 .s { font-size: clamp(2rem, 4.4vw, 2.9rem); }
.titel h2, .titel h3 {
  font-family: var(--schrift-versal); font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  letter-spacing: var(--sperrung-weit); text-transform: uppercase;
  margin-top: .15rem; overflow-wrap: break-word;
}
.titel-zeile { width: 84px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--apricot-tief)); margin-top: 1.2rem; }

/* Knöpfe */
.knopf {
  display: inline-block; font-family: var(--schrift-versal); font-weight: 400;
  font-size: .78rem; letter-spacing: var(--sperrung-mittel); text-transform: uppercase;
  padding: .95rem 1.9rem; border: 1px solid var(--gold); color: var(--gold-tief);
  background: transparent; cursor: pointer;
  transition: background var(--sanft), color var(--sanft), border-color var(--sanft);
}
.knopf:hover { background: var(--gold); color: var(--weiss); border-color: var(--gold); }
.knopf--gefuellt { background: var(--gold); color: var(--weiss); }
.knopf--gefuellt:hover { background: var(--gold-tief); border-color: var(--gold-tief); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--raum-m); }

/* Karten */
.karten { display: grid; gap: var(--raum-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
/* Für vier Karten: 2x2 statt 3+1 mit einzelner Karte in der letzten Reihe */
.karten--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); }
.karte {
  background: var(--weiss); border: 1px solid var(--gold-zart);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  transition: transform var(--ruhig), box-shadow var(--ruhig);
}
.karte:hover { box-shadow: var(--schatten-zart); }
.karte .zeichen { width: 34px; color: var(--gold); opacity: .75; margin-bottom: 1.1rem; }
.karte--mitte { text-align: center; }
.karte--mitte .zeichen { margin-inline: auto; }
.karte h3 {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .85rem;
  letter-spacing: var(--sperrung-mittel); text-transform: uppercase; margin-bottom: .8rem;
}
.karte p { font-size: .95rem; color: var(--tinte-zart); }

/* ---- Karte als Verweis ----
   Die ganze Kachel ist anklickbar. Der Verweis steht trotzdem nur in der
   Überschrift; sein ::after legt sich über die ganze Karte und fängt den
   Klick ab. Damit heißt der Link im Vorlesegerät wie die Überschrift, und
   es gibt genau einen Link je Kachel – nicht drei nebeneinander.

   Der Preis: Über der Karte lässt sich kein Text mehr markieren. Bei drei
   Zeilen Kurzbeschreibung ist das zu verschmerzen.

   Der Fokusrahmen muss vom Verweis auf die ::after-Fläche umziehen, sonst
   läge er nur um die Überschrift und nicht um das, was man anklickt. */
.karte--verweis { position: relative; }
/* Die Haarlinie unter Verweisen kommt aus der globalen Regel als
   border-bottom, nicht als text-decoration – sie muss hier ausdrücklich weg,
   sonst sähe die Überschrift wie ein Textlink aus. Dass die Kachel klickt,
   zeigt statt dessen der goldene Rahmen beim Darüberfahren. */
.karte--verweis h3 a { color: inherit; text-decoration: none; border-bottom: 0; }
.karte--verweis h3 a:hover { color: inherit; }
.karte--verweis h3 a::after { content: ""; position: absolute; inset: 0; }
.karte--verweis:hover { border-color: var(--gold); }
.karte--verweis h3 a:focus-visible { outline: none; }
.karte--verweis h3 a:focus-visible::after {
  outline: 2px solid var(--gold-tief); outline-offset: 3px;
}

/* ---- Eckdaten am Kopf eines Seminars ----
   Termin, Dauer, Ort und Kosten stehen weiterhin vollständig in der Tabelle am
   Ende des Seminars. Diese Zeile nimmt das Wichtigste vorweg: Wer wissen will,
   wann etwas stattfindet, soll dafür nicht bis ans Ende scrollen.

   Bewusst keine runden Ecken und keine Fläche mit Farbe – das wären Knöpfe, und
   anklickbar ist hier nichts. Nur eine Haarlinie, wie an den Karten auch. */
.eckdaten {
  list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
  margin: var(--raum-m) 0; padding: 0;
}
.eckdaten li {
  padding: .3rem .75rem; border: 1px solid var(--gold-zart); background: var(--weiss);
  font-family: var(--schrift-versal); font-size: .72rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  color: var(--tinte); margin: 0;
}
/* Nur der feststehende Termin wird hervorgehoben – er ist die eine Angabe,
   auf die es ankommt. Stünde alles in Apricot, hieße das gar nichts mehr. */
.eckdaten .eckdaten--fest { background: var(--apricot); border-color: var(--apricot-tief); }

/* ---- Planetenzeichen in der Seminarliste ----
   Dieselbe Bildkarte wie im Strukturogramm-Rad: zehn Kacheln nebeneinander,
   Reihenfolge 0-9. Die Karte ist ein farbiges Bild und lässt sich nicht
   umfärben; deshalb dient sie als MASKE, und die Farbe kommt aus der Fläche
   darunter. Wo Masken fehlen, bleibt das goldene Bild stehen – lieber gold als
   gar kein Zeichen. Genauso gelöst wie .lg-sym in strukturogramm.css. */
/* Kein inline-flex: Dessen Grundlinie richtet sich nach dem ersten Feld – dem
   Zeichen – und dadurch rutschte das „und" zwischen den Namen sichtbar nach
   unten. Als inline-block sitzt das Zeichen auf der Grundlinie der Schrift,
   und die ganze Zeile steht wieder gerade. */
.pn { white-space: nowrap; }
.pz {
  display: inline-block; vertical-align: -.15em; margin-right: .25em;
  width: .95em; height: .95em;
  background-image: url("../img/planeten.png");
  background-size: 1000% 100%; background-repeat: no-repeat;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
@supports (mask-image: url("../img/planeten.png")) or (-webkit-mask-image: url("../img/planeten.png")) {
  .pz {
    background-image: none; background-color: var(--gold-tief);
    -webkit-mask-image: url("../img/planeten.png"); mask-image: url("../img/planeten.png");
    -webkit-mask-size: 1000% 100%; mask-size: 1000% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}
/* Kachel 0 bis 9. Der Wert ist nr/9 in Prozent – bei zehn Kacheln steht die
   letzte auf 100%, nicht auf 90%. */
.pz-0 { background-position: 0 0;        -webkit-mask-position: 0 0;        mask-position: 0 0; }
.pz-1 { background-position: 11.111% 0;  -webkit-mask-position: 11.111% 0;  mask-position: 11.111% 0; }
.pz-2 { background-position: 22.222% 0;  -webkit-mask-position: 22.222% 0;  mask-position: 22.222% 0; }
.pz-3 { background-position: 33.333% 0;  -webkit-mask-position: 33.333% 0;  mask-position: 33.333% 0; }
/* Der Mond wird um 180 Grad gedreht: abnehmender Mond, wie im Strukturogramm
   und in der Legende. Sonst stünden auf der Website zwei verschiedene Monde. */
.pz-4 { background-position: 44.444% 0;  -webkit-mask-position: 44.444% 0;  mask-position: 44.444% 0;
        transform: rotate(180deg); }
.pz-5 { background-position: 55.556% 0;  -webkit-mask-position: 55.556% 0;  mask-position: 55.556% 0; }
.pz-6 { background-position: 66.667% 0;  -webkit-mask-position: 66.667% 0;  mask-position: 66.667% 0; }
.pz-7 { background-position: 77.778% 0;  -webkit-mask-position: 77.778% 0;  mask-position: 77.778% 0; }
.pz-8 { background-position: 88.889% 0;  -webkit-mask-position: 88.889% 0;  mask-position: 88.889% 0; }
.pz-9 { background-position: 100% 0;     -webkit-mask-position: 100% 0;     mask-position: 100% 0; }

/* ---- Kleines Bild im Seminarkasten ----
   Zwei Spalten statt eines umflossenen Bildes: Die Datentabelle darunter ist
   ein Raster und weicht einem Float aus, statt sich danebenzulegen – das
   Ergebnis wäre nicht vorhersagbar. Unterhalb von 720px steht das Bild unter
   dem Text; nebeneinander bliebe für beides zu wenig Platz. */
.termin-satz { display: grid; gap: var(--raum-m); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .termin-satz {
    grid-template-columns: 1fr clamp(180px, 22vw, 260px);
    gap: var(--raum-l); align-items: start;
  }
}
/* Auch gestapelt bleibt das Bild klein und rechtsbündig – ohne Begrenzung
   wüchse es unterhalb von 720px auf die volle Kastenbreite und wäre dann alles
   andere als eine Randnotiz. */
.termin-bild {
  margin: 0 0 0 auto; width: 100%; max-width: clamp(170px, 50vw, 260px);
}
.termin-bild img { width: 100%; height: auto; display: block; }

/* Zarte Listen */
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
.liste li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg);
}
.liste--zwei { columns: 2; column-gap: var(--raum-l); }
@media (max-width: 640px) { .liste--zwei { columns: 1; } }
.liste--eng li { margin-bottom: .3rem; }

/* Bild + Text */
.duo { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--gedreht .duo-bild { order: 2; }
  /* Lange Kapitel: Text oben beginnen lassen, das Bild begleitet ihn ruhig */
  .duo--oben { align-items: start; }
  .duo--oben .duo-bild { position: sticky; top: calc(76px + var(--raum-m)); }
}
.duo-bild { position: relative; }
.duo-bild img { width: 100%; box-shadow: var(--schatten-bild); }

/* ---- Zarte Winkel an den Bildecken ----
   Vier feine Goldwinkel, knapp außerhalb der Bildkante. Sie hängen am
   Rahmen des einzelnen Bildes, nicht an der Spalte – sonst säßen sie falsch,
   wenn in einer Spalte zwei Bilder untereinander stehen.

   Zwei Winkel entstehen am Rahmen, zwei am <picture> darin; zusätzliche
   Elemente im Quelltext braucht es dafür nicht.

   Wichtig: Alle vier sind positioniert und werden in Quelltextreihenfolge
   gezeichnet – ohne z-index läge der erste hinter dem Bild und wäre unsichtbar. */
.bildrahmen {
  --eck-ab: -12px;
  --eck-laenge: clamp(24px, 3vw, 40px);
  display: block; position: relative;
}
.bildrahmen picture { display: block; position: relative; }

.bildrahmen::before, .bildrahmen::after,
.bildrahmen picture::before, .bildrahmen picture::after {
  content: ''; position: absolute; pointer-events: none; z-index: 2;
  width: var(--eck-laenge); height: var(--eck-laenge);
  border: 0 solid var(--gold);
}
.bildrahmen::before         { top: var(--eck-ab); left: var(--eck-ab); border-top-width: 1px; border-left-width: 1px; }
.bildrahmen::after          { bottom: var(--eck-ab); right: var(--eck-ab); border-bottom-width: 1px; border-right-width: 1px; }
.bildrahmen picture::before { top: var(--eck-ab); right: var(--eck-ab); border-top-width: 1px; border-right-width: 1px; }
.bildrahmen picture::after  { bottom: var(--eck-ab); left: var(--eck-ab); border-bottom-width: 1px; border-left-width: 1px; }

/* Zitat */
.zitat {
  max-width: 56ch; margin: 0 auto; text-align: center;
  font-family: var(--schrift-serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.55;
}
.zitat p { margin-bottom: .8rem; }
.zitat cite {
  display: block; font-family: var(--schrift-versal); font-style: normal;
  font-size: .78rem; letter-spacing: var(--sperrung-mittel); text-transform: uppercase;
  color: var(--gold-tief); margin-top: 1.4rem;
}

/* Trenner mit Strukturogramm */
.trenner { display: flex; align-items: center; gap: 1.2rem; color: var(--gold); margin: var(--raum-l) 0; }
.trenner::before, .trenner::after { content: ''; flex: 1; height: 1px; background: var(--gold-zart); }
.trenner svg { width: 26px; opacity: .7; flex: none; }

/* Hinweis / Platzhalter */
.hinweis { background: var(--apricot-hell); border-left: 2px solid var(--gold); padding: 1.3rem 1.6rem; }
.hinweis .marke {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .78rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase;
  color: var(--gold-tief); display: block; margin-bottom: .5rem;
}
.platzhalter { border: 1px dashed var(--apricot-tief); background: #FFFCF8; padding: 1.3rem 1.6rem; }
/* Noch offene Stellen in den Rechtstexten sichtbar halten, bis sie gefüllt sind */
.luecke {
  background: var(--apricot-hell); color: var(--gold-tief);
  padding: .1em .35em; border-bottom: 1px dashed var(--apricot-tief);
  font-size: .95em;
}
.platzhalter .marke { color: var(--apricot-tief); margin-bottom: .75rem; }

/* Sprungnavigation (Behandlungsmethoden) */
.sprungnav { border-top: 1px solid var(--gold-zart); border-bottom: 1px solid var(--gold-zart); padding: var(--raum-m) 0; }
.sprungnav ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: kap;
}
.sprungnav li { counter-increment: kap; }
.sprungnav a {
  display: flex; gap: .8rem; align-items: baseline; border: 0;
  font-family: var(--schrift-versal); font-size: .78rem; letter-spacing: var(--sperrung-eng);
  text-transform: uppercase; color: var(--tinte);
}
.sprungnav a::before { content: counter(kap, decimal-leading-zero); color: var(--gold); font-size: .68rem; }
.sprungnav a:hover { color: var(--gold-tief); }

/* Termin-Karten */
.termin { border: 1px solid var(--gold-zart); background: var(--weiss); padding: clamp(1.6rem, 3vw, 2.6rem); }
.termin + .termin { margin-top: var(--raum-l); }
.termin h2 {
  font-family: var(--schrift-versal); font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: var(--sperrung-eng);
  text-transform: uppercase; margin-bottom: .5rem;
}
/* Schreibschrift-Unterzeile der Seminare. Corinthia läuft sehr klein,
   deshalb deutlich größer gesetzt als der Zahlenwert vermuten lässt. */
.termin .unterzeile {
  font-family: var(--schrift-schreib); color: var(--gold);
  font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: .95;
  margin-top: .2rem; margin-bottom: 1.1rem;
}
.daten { margin: var(--raum-m) 0 0; display: grid; gap: .4rem 1.4rem; grid-template-columns: max-content 1fr; font-size: .95rem; }
.daten dt { font-family: var(--schrift-versal); font-size: .76rem; letter-spacing: var(--sperrung-eng); text-transform: uppercase; color: var(--gold-tief); padding-top: .35em; }
.daten dd { margin: 0; }
@media (max-width: 560px) {
  .daten { grid-template-columns: 1fr; gap: 0; }
  .daten dt { padding-top: .8rem; }
}

/* ---------------------------------------------------------------- 3 Kopf & Navigation */
.kopfleiste {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 249, 243, .94);
  border-bottom: 1px solid var(--gold-zart);
}
@supports (backdrop-filter: blur(6px)) { .kopfleiste { backdrop-filter: blur(8px); } }
.kopfleiste .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }

/* Wortmarke als SVG – das Original-Logo, nicht als Schrift nachgebaut */
.marke { border: 0; line-height: 1; display: block; flex: none; }
.marke img { width: clamp(168px, 17vw, 232px); height: auto; display: block; }

.hauptnav ul { list-style: none; display: flex; gap: clamp(.9rem, 1.7vw, 1.7rem); margin: 0; padding: 0; }
.hauptnav a {
  border: 0; font-family: var(--schrift-versal); font-weight: 400; font-size: .74rem;
  letter-spacing: var(--sperrung-eng); text-transform: uppercase; color: var(--tinte-zart);
  padding-bottom: .25rem; border-bottom: 1px solid transparent;
  white-space: nowrap;   /* sonst quetscht die Reihe lange Punkte mehrzeilig zusammen */
  transition: color var(--sanft), border-color var(--sanft);
}
.hauptnav a:hover { color: var(--gold-tief); }
.hauptnav a[aria-current="page"] { color: var(--gold-tief); border-bottom-color: var(--gold); }

.nav-schalter { display: none; }

@media (max-width: 1180px) {
  .nav-schalter {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 10px; background: none;
    border: 1px solid var(--gold-zart); cursor: pointer;
  }
  .nav-schalter span { display: block; height: 1px; background: var(--tinte); transition: transform var(--sanft), opacity var(--sanft); }
  .nav-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .hauptnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--creme); border-bottom: 1px solid var(--gold-zart);
    display: none; padding: var(--raum-m) var(--rand) var(--raum-l);
  }
  .hauptnav[data-offen="ja"] { display: block; }
  .hauptnav ul { flex-direction: column; gap: 0; }
  .hauptnav li + li { border-top: 1px solid rgba(227, 210, 176, .55); }
  .hauptnav a { display: block; padding: .95rem 0; font-size: .78rem; border-bottom: 0; }
  .hauptnav a[aria-current="page"] { border-bottom: 0; }

  /* Ein einziger Menüpunkt (strukturogramm.com) braucht keinen Menüknopf:
     er bleibt wie auf dem Desktop rechts neben der Marke stehen. */
  .hauptnav--einzeln { display: block; position: static; background: none; border: 0; padding: 0; }
  .hauptnav--einzeln a { display: inline-block; padding: 0 0 .25rem; font-size: .74rem; border-bottom: 1px solid transparent; }
  .hauptnav--einzeln a[aria-current="page"] { border-bottom-color: var(--gold); }
}

/* ---------------------------------------------------------------- 4 Kopfbereiche */
.schleier { position: absolute; color: var(--gold); pointer-events: none; z-index: 0; will-change: transform; }

/* Markenband über dem Kopfbereich der Startseite – wie ein Briefkopf.
   Die Wortmarke ist hier die H1; der Text steht als Alternativtext dahinter. */
.markenband {
  background: var(--creme); text-align: center;
  padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
  border-bottom: 1px solid var(--gold-zart);
}
.marke-gross { margin: 0 auto; max-width: min(640px, 78%); }
.marke-gross img { display: block; width: 100%; height: auto; }
.markenband .unter {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .74rem;
  /* Sperrung mitwachsen lassen, sonst bricht die Zeile auf schmalen
     Bildschirmen mitten in „seit 1992“ um. */
  letter-spacing: clamp(.12em, 1.4vw, var(--sperrung-weit));
  text-transform: uppercase; color: var(--gold-tief); margin: 1.2rem 0 0;
}

/* Startseite */
.buehne {
  position: relative; overflow: hidden;
  background:
    radial-gradient(115% 85% at 88% 8%, rgba(241, 204, 172, .5) 0%, rgba(250, 230, 213, .26) 45%, transparent 74%),
    linear-gradient(158deg, var(--creme) 0%, #FCF4EA 52%, var(--apricot-hell) 100%);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem);
}
.buehne .schleier { right: -13%; bottom: -30%; width: min(620px, 90%); opacity: .13; }
.buehne .huelle { position: relative; z-index: 1; }
.buehne-innen { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .buehne-innen { grid-template-columns: 1.02fr .98fr; } }
.buehne-schreib { font-size: var(--t-akzent); margin-bottom: .1rem; }
.buehne-h2 {
  font-family: var(--schrift-versal); font-weight: 250;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  letter-spacing: var(--sperrung-mittel); text-transform: uppercase;
  overflow-wrap: break-word;
}
.buehne p.leit { margin-top: var(--raum-m); max-width: 40ch; color: var(--tinte-zart); font-size: 1.06em; }
.buehne-bild { position: relative; }
.buehne-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%; box-shadow: var(--schatten-bild); }

/* Unterseiten */
.seitenkopf {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(172deg, var(--creme) 0%, #FCF5EC 60%, var(--apricot-hell) 100%);
  padding: clamp(2.8rem, 6vw, 4.8rem) 0 clamp(2.6rem, 5vw, 4rem);
}
.seitenkopf .schleier { top: -22%; left: 50%; transform: translateX(-50%); width: min(560px, 100%); opacity: .12; }
.seitenkopf .huelle { position: relative; z-index: 1; }
.seitenkopf h1 .s { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin-bottom: -.08rem; }
.seitenkopf h1 {
  font-family: var(--schrift-versal); font-weight: 250;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  letter-spacing: var(--sperrung-weit); text-transform: uppercase;
  overflow-wrap: break-word;
}
.seitenkopf p { margin: var(--raum-m) auto 0; max-width: 58ch; color: var(--tinte-zart); }

/* ---- Emblem im Seitenkopf (Seminare) ----
   Das Rad steht über dem Titel, nicht dahinter: Der Text bliebe sonst auf
   einem Gewirr aus Linien und farbigen Zahlen stehen, und beides verlöre.
   Die Ränder des Bildes laufen transparent aus, es braucht deshalb weder
   Rahmen noch Fläche – es liegt einfach auf dem Creme des Kopfes.

   Der Kopf bekommt oben weniger Abstand, weil das Bild selbst mit viel Luft
   beginnt; sonst stünde der Titel zu weit unten. */
.seitenkopf--emblem { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.kopf-emblem {
  display: block; margin: 0 auto clamp(.3rem, 1.2vw, .9rem);
  width: clamp(170px, 26vw, 270px); height: auto;
}


/* Lange deutsche Versal-Überschriften auf schmalen Bildschirmen:
   Sperrung mitwachsen lassen und, falls nötig, korrekt trennen –
   statt einen einzelnen Buchstaben in die nächste Zeile zu schieben. */
.buehne-h2, .seitenkopf h1, .titel h2, .kapitel h2, .termin h2 {
  letter-spacing: clamp(.13em, .9vw, var(--sperrung-weit));
  hyphens: auto;
  -webkit-hyphens: auto;
}
.kapitel h2, .termin h2 { letter-spacing: clamp(.11em, .7vw, var(--sperrung-mittel)); }

/* ---------------------------------------------------------------- 5 Abschnitte */
.abschnitt { position: relative; padding: var(--raum-abschnitt) 0; }
.abschnitt--tief { background: var(--creme-tief); }
.abschnitt--apricot { background: linear-gradient(180deg, var(--creme) 0%, var(--apricot-hell) 100%); }
.abschnitt--schmal { padding: clamp(3rem, 6vw, 5rem) 0; }

.kapitel { scroll-margin-top: 100px; }
.kapitel + .kapitel { margin-top: var(--raum-abschnitt); }
.kapitel h2 {
  font-family: var(--schrift-versal); font-weight: 300;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  letter-spacing: var(--sperrung-mittel); text-transform: uppercase;
  overflow-wrap: break-word;
}
.textblock h3 {
  font-family: var(--schrift-text); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .01em; margin: var(--raum-l) 0 .5rem;
}
.textblock > h3:first-child { margin-top: 0; }
.kapitel-kopf { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: var(--raum-m); }
.kapitel-kopf .nr { font-family: var(--schrift-versal); font-size: .72rem; letter-spacing: .18em; color: var(--gold); flex: none; }
.textblock { max-width: var(--breite-text); }
.textblock > * + * { margin-top: 1.15em; }

/* Kontakt */
.kontaktkarte { background: var(--weiss); border: 1px solid var(--gold-zart); padding: clamp(1.8rem, 3.4vw, 3rem); }
.kontaktzeile { display: grid; gap: .3rem 1.5rem; grid-template-columns: max-content 1fr; font-size: 1rem; }
.kontaktzeile dt { font-family: var(--schrift-versal); font-size: .76rem; letter-spacing: var(--sperrung-eng); text-transform: uppercase; color: var(--gold-tief); padding-top: .45em; }
.kontaktzeile dd { margin: 0; }
@media (max-width: 560px) {
  .kontaktzeile { grid-template-columns: 1fr; }
  .kontaktzeile dt { padding-top: .9rem; }
}
.adresse { font-style: normal; }

/* ---------------------------------------------------------------- 6 Fuß */
.seitenfuss { background: #F4E8D8; padding: var(--raum-abschnitt) 0 var(--raum-l); position: relative; overflow: hidden; }
.seitenfuss .trenner { margin-top: 0; }
.fuss-gitter { display: grid; gap: var(--raum-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.seitenfuss h2 {
  font-family: var(--schrift-versal); font-weight: 400; font-size: .78rem;
  letter-spacing: var(--sperrung-mittel); text-transform: uppercase; color: var(--gold-tief);
  margin-bottom: 1rem;
}
.fuss-logo { width: min(260px, 100%); height: auto; display: block; margin-bottom: .7rem; }
.seitenfuss .beruf { font-family: var(--schrift-versal); font-size: .66rem; letter-spacing: var(--sperrung-weit); text-transform: uppercase; color: var(--tinte-zart); display: block; }
.seitenfuss ul { list-style: none; margin: 0; padding: 0; }
.seitenfuss li { margin-bottom: .45rem; }
.seitenfuss .adresse { font-size: .95rem; }
.seitenfuss a { border-bottom-color: transparent; color: var(--tinte); font-size: .95rem; }
.seitenfuss a:hover { color: var(--gold-tief); border-bottom-color: var(--gold); }
/* Telefon und E-Mail im Fuß als Link erkennbar lassen */
.seitenfuss .adresse a { border-bottom-color: var(--gold-zart); color: var(--gold-tief); }
.fuss-schluss {
  margin-top: var(--raum-l); padding-top: var(--raum-m);
  border-top: 1px solid rgba(190, 154, 85, .28);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--tinte-zart);
}
.fuss-schluss ul { display: flex; gap: 1.4rem; }
.fuss-schluss li { margin: 0; }

/* ---------------------------------------------------------------- 7 Bewegung */
.rein { opacity: 0; transform: translateY(24px); }
.js .rein { transition: opacity var(--ruhig), transform var(--ruhig); }
.rein.da { opacity: 1; transform: none; }
html:not(.js) .rein { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .schleier { will-change: auto; }      /* kein Parallax auf Mobilgeräten */
}
@media (prefers-reduced-motion: reduce) {
  .rein, .js .rein { opacity: 1 !important; transform: none !important; transition: none !important; }
  .karte, .knopf, a { transition: none !important; }
  .schleier { transform: none !important; }
}

/* ------------------------------------------------- 7b Mindestgröße mobil
   Untergrenze 14 px (0,875 rem) auf schmalen Bildschirmen, Stand 07.10.2026.
   Die kleinen Versalzeilen (Vorzeilen, Knöpfe, Beschriftungen, Fußzeile)
   sind am Rechner als zarte Großbuchstaben zwischen 0,66 und 0,85 rem
   gesetzt; auf dem Telefon landen sie damit bei 10,6 bis 13,6 px. Hier
   werden sie alle auf 0,875 rem gehoben. Am Rechner ändert sich nichts.
   Steht bewusst NACH allen anderen Regeln, auch nach der Menü-Query bei
   1180 px, damit die gleiche Spezifität hier gewinnt.
   Nicht angehoben: .sprungmarke (nur per Tastatur sichtbar) und Blatt 2 der
   Strukturogramm-Seite (siehe strukturogramm.css). */
@media (max-width: 620px) {
  .vorzeile, .knopf, .karte h3, .eckdaten li, .zitat cite, .hinweis .marke,
  .sprungnav a, .sprungnav a::before, .daten dt, .kontaktzeile dt,
  .hauptnav a, .markenband .unter, .kapitel-kopf .nr,
  .seitenfuss h2, .seitenfuss .beruf, .fuss-schluss { font-size: .875rem; }
  /* Die weite Sperrung der Berufszeile macht sie bei 14 px breiter als die
     Fußspalte - etwas enger, damit sie einzeilig bleibt. */
  .seitenfuss .beruf { letter-spacing: var(--sperrung-mittel); }
  /* Die Unterzeile der Startseite passt bei 14 px nicht mehr in eine Zeile.
     Statt eines zufälligen Umbruchs mit hängendem Punkt: der Trenner wird
     zum unsichtbaren Zeilenumbruch, "seit 1992" steht als eigene Zeile. */
  .markenband .unter { letter-spacing: var(--sperrung-eng); }
  .markenband .unter-trenner { display: block; height: 0; overflow: hidden; }
}

/* ---------------------------------------------------------------- 8 Druck */
@media print {
  .kopfleiste, .nav-schalter, .seitenfuss nav, .schleier, .knopf { display: none !important; }
  .bildrahmen::before, .bildrahmen::after,
  .bildrahmen picture::before, .bildrahmen picture::after { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding: 1rem 0; }
  a { color: #000; border: 0; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* Beispielzeichnung im Strukturogramm-Kasten. Eine Strichzeichnung auf Weiss -
   sie bekommt eine eigene helle Flaeche, damit sie sich vom Kartenton abhebt. */
.stru-beispiel {
  margin: var(--raum-m) 0;
  background: var(--weiss);
  border: 1px solid var(--gold-zart);
  padding: .6rem;
}
.stru-beispiel img { display: block; width: 100%; height: auto; }