/* ==========================================================================
   Nachhilfe mit Herz – Website-Stil
   Baut auf tokens.css (Farben, Schriften, Abstände) und fonts/fonts.css auf.
   Reihenfolge im <head>: fonts.css → tokens.css → site.css

   Faustregeln der Marke:
   - Viel Papier (Weiß). Tinte für Text. Brombeere für Marke, Knöpfe, Links.
   - Fensterlicht (Gelb) höchstens für EIN Wort pro Fläche (<mark class="nmh-marker">).
   - Haarlinien statt Kästen. Schatten nur für echte Gegenstände (Abreißzettel).
   - Bewegung kurz, einmalig, nur per CSS. Bei „Bewegung reduzieren“ steht alles still.
   ========================================================================== */

/* ---------- 1. Grundlagen ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: 5.5rem;
}
/* Handy: feste Kontaktleiste unten darf den Fokus nicht verdecken (WCAG 2.4.11) */
@media (max-width: 59.99em) {
  html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--text-m);
  font-weight: var(--gewicht-text);
  line-height: var(--zeile-text);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto; /* Bricolage: optische Größe passt sich der Schriftgröße an (opsz 12–96) */
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-titel);
  line-height: var(--zeile-titel);
  letter-spacing: var(--laufweite-titel);
  margin: 0;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.35rem + 3.4vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 3rem); }
h3 { font-size: var(--text-xl); line-height: var(--zeile-zwischen); font-weight: 600; }

p, ul, ol, dl, blockquote, figure { margin: 0; }
p + p { margin-top: var(--abstand-4); }
p { text-wrap: pretty; }

strong, b { font-weight: var(--gewicht-stark); }

a {
  color: var(--farbe-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dauer-sofort) linear, text-decoration-thickness var(--dauer-kurz) var(--kurve-standard);
}
a:hover { color: var(--farbe-link-hover); text-decoration-thickness: 2px; }

::selection { background: var(--nmh-malvenbluete); color: var(--nmh-tinte); }

:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}
.flaeche-abend :focus-visible,
.fuss :focus-visible,
.streifen :focus-visible { outline-color: var(--farbe-fokus-dunkel); }

/* Ziffern: im Fließtext, in Adressen und in der Fußzeile wie der Text drumherum (nie einzeln fett).
   Bricolage halbfett nur für alleinstehende Nummern (Knöpfe) bzw. mit .z--stark. */
.z { font-variant-numeric: tabular-nums; white-space: nowrap; }
.knopf .z, .z--stark { font-family: var(--schrift-titel); font-weight: 650; letter-spacing: 0.005em; }

/* Zwei Fassungen eines Textes: groß (Computer) und klein (Handy) */
.nur-klein { display: none; }
@media (max-width: 59.99em) {
  .nur-gross { display: none !important; }
  .nur-klein { display: revert; }
}

/* Nur für Vorleseprogramme */
.nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprung-Link zum Inhalt */
.sprung {
  position: absolute; left: var(--abstand-4); top: -10rem; z-index: 100;
  background: var(--nmh-brombeere); color: var(--nmh-papier);
  padding: var(--abstand-3) var(--abstand-5); border-radius: var(--radius-knopf);
  font-weight: 700; text-decoration: none;
}
.sprung:focus { top: var(--abstand-4); color: var(--nmh-papier); outline-color: var(--nmh-fensterlicht); }

/* ---------- 2. Raster ---------------------------------------------------- */
.rahmen {
  width: 100%;
  max-width: calc(76rem + 2 * var(--seitenrand));
  margin-inline: auto;
  padding-inline: var(--seitenrand);
}
.abschnitt { padding-block: var(--abstand-abschnitt); }
.abschnitt--eng { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.abschnitt:not([class*="flaeche-"]) + .abschnitt:not([class*="flaeche-"]) { padding-top: 0; }
.trenner { border: 0; border-top: 1px solid var(--farbe-linie); margin: 0; }

.flaeche-nebel { background: var(--nmh-flussnebel); }
.flaeche-malve { background: var(--nmh-malvenbluete); }
.flaeche-abend { background: var(--nmh-tinte); color: var(--nmh-papier); }

.textbreite { max-width: var(--textbreite); }

/* Kopf eines Abschnitts: links Überschrift, rechts Einleitung (ab Tablet) */
.kopfzeile { display: grid; gap: var(--abstand-4) var(--abstand-7); margin-bottom: clamp(2rem, 1.4rem + 2.6vw, 4rem); }
.kopfzeile .einleitung { color: var(--farbe-text-leise); font-size: var(--text-l); line-height: 1.45; max-width: 34rem; }
@media (min-width: 60em) {
  .kopfzeile { grid-template-columns: 7fr 5fr; align-items: end; }
}

/* Zweispaltig: Überschrift links (klebt beim Scrollen), Inhalt rechts */
.zweispaltig { display: grid; gap: var(--abstand-6) var(--abstand-8); }
@media (min-width: 60em) {
  .zweispaltig { grid-template-columns: 4fr 7fr; }
  .zweispaltig > .zweispaltig__kopf { position: sticky; top: 6.5rem; align-self: start; }
}
.zweispaltig__kopf .einleitung { margin-top: var(--abstand-4); color: var(--farbe-text-leise); font-size: var(--text-l); line-height: 1.45; }

/* Kleine Versalzeile über Überschriften */
.etikett {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 650;
  font-size: var(--text-xs);
  line-height: 1.35;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  color: var(--nmh-brombeere);
  margin-bottom: var(--abstand-4);
  -webkit-hyphens: manual; hyphens: manual;
}
.flaeche-abend .etikett { color: var(--nmh-fensterlicht); }

.leise { color: var(--farbe-text-leise); }
.klein { font-size: var(--text-s); line-height: 1.5; }

/* ---------- 3. Knöpfe ---------------------------------------------------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: center; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3rem; padding: 0.7rem 1.2rem;
  border: 2px solid var(--farbe-knopf); border-radius: var(--radius-knopf);
  background: var(--farbe-knopf); color: var(--farbe-knopf-text);
  font-family: var(--schrift-text); font-size: 1.0625rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center;
  -webkit-hyphens: manual; hyphens: manual;
  transition: background-color var(--dauer-sofort) linear, border-color var(--dauer-sofort) linear, color var(--dauer-sofort) linear;
  touch-action: manipulation;
}
.knopf:hover { background: var(--farbe-knopf-hover); border-color: var(--farbe-knopf-hover); color: var(--nmh-papier); text-decoration: none; }
.knopf:active { background: var(--farbe-knopf-hover); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--umriss { background: transparent; color: var(--nmh-brombeere); }
.knopf--umriss:hover { background: var(--nmh-malvenbluete); border-color: var(--nmh-brombeere); color: var(--nmh-brombeere-dunkel); }
.knopf--leise { background: transparent; color: var(--nmh-tinte); border-color: var(--nmh-feldrand); }
.knopf--leise:hover { background: var(--nmh-flussnebel); border-color: var(--nmh-tinte); color: var(--nmh-tinte); }
.flaeche-abend .knopf--umriss { color: var(--nmh-papier); border-color: var(--nmh-papier); }
.flaeche-abend .knopf--umriss:hover { background: var(--nmh-papier); color: var(--nmh-tinte); }

/* Textlink mit Pfeil */
.pfeillink {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 2.75rem;
  font-weight: 700; text-decoration: none; color: var(--nmh-brombeere);
  -webkit-hyphens: manual; hyphens: manual;
}
.pfeillink span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.pfeillink svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dauer-kurz) var(--kurve-standard); }
.pfeillink:hover svg { transform: translateX(3px); }
.pfeillink:hover span { text-decoration-thickness: 2px; }

/* ---------- 4. Eröffnungs-Streifen & Kopfzeile --------------------------- */
.streifen { background: var(--nmh-tinte); color: var(--nmh-papier); font-size: var(--text-s); line-height: 1.45; }
.streifen .rahmen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.9rem; padding-block: 0.55rem; }
.streifen__herz { width: 1.05rem; height: 1.05rem; flex: none; }
.streifen a { color: var(--nmh-papier); font-weight: 700; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.6rem; }
.streifen a:hover { color: var(--nmh-fensterlicht); }
.streifen b { color: var(--nmh-fensterlicht); font-weight: 700; }

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / 0.97);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); min-height: 4.25rem; }
.kopf__logo { display: flex; align-items: center; min-height: 2.75rem; flex: none; }
.kopf__logo img, .kopf__logo svg { width: clamp(11rem, 9rem + 6vw, 14.25rem); height: auto; }

.menue-knopf {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 0.9rem;
  border: 2px solid var(--nmh-tinte); border-radius: var(--radius-knopf);
  background: var(--nmh-papier); color: var(--nmh-tinte);
  font: 700 1rem/1 var(--schrift-text); text-decoration: none; cursor: pointer;
}
.menue-knopf:hover { background: var(--nmh-flussnebel); color: var(--nmh-tinte); }
.menue-knopf__striche { width: 1.1rem; height: 0.75rem; position: relative; }
.menue-knopf__striche::before, .menue-knopf__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dauer-kurz) var(--kurve-standard), top var(--dauer-kurz) var(--kurve-standard);
}
.menue-knopf__striche::before { top: 0; }
.menue-knopf__striche::after { top: calc(100% - 2px); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { top: calc(50% - 1px); transform: rotate(-45deg); }

.nav { display: none; }
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--nmh-tinte); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--nmh-brombeere); }
.nav a[aria-current="page"] { color: var(--nmh-brombeere); }
.nav a.knopf, .nav a.knopf:hover { color: var(--nmh-papier); }
.nav a.knopf--umriss { color: var(--nmh-brombeere); }
.nav a.knopf--umriss:hover { color: var(--nmh-brombeere-dunkel); }

/* Handy & Tablet: aufklappendes Menü */
@media (max-width: 67.99em) {
  .js .nav.ist-offen {
    display: block; position: fixed; inset: var(--kopf-hoehe, 4.25rem) 0 0 0; z-index: 39;
    background: var(--nmh-papier); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--abstand-4) var(--seitenrand) calc(var(--abstand-8) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--farbe-linie);
  }
  .nav__liste > li { border-bottom: 1px solid var(--farbe-linie); }
  .nav__liste a { display: flex; align-items: center; min-height: 3.5rem; font-family: var(--schrift-titel); font-size: 1.375rem; font-weight: 650; }
  .nav__unter { list-style: none; margin: 0 0 var(--abstand-3); padding: 0 0 0 var(--abstand-5); }
  .nav__unter a { min-height: 3rem; font-family: var(--schrift-text); font-size: 1.125rem; font-weight: 600; }
  .nav__faecher-titel { display: block; padding-top: var(--abstand-4); font-family: var(--schrift-titel); font-size: 1.375rem; font-weight: 650; }
  .nav__faecher-titel a { min-height: 2.75rem; }
  .nav__knopf { display: none; }
  .nav__kontakt { display: grid; gap: var(--abstand-3); margin-top: var(--abstand-6); }
  .nav__kontakt .knopf { width: 100%; }
  html.menue-offen { overflow: hidden; }
}

/* Computer: Navigation in einer Zeile */
@media (min-width: 68em) {
  .menue-knopf { display: none; }
  .nav { display: flex; align-items: center; gap: var(--abstand-6); }
  .nav__liste { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.2vw, 1.75rem); }
  .nav__liste > li { position: relative; }
  .nav__liste > li > a, .nav__faecher-titel > a {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; font-size: 1rem;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.55rem) / 0 2px no-repeat;
    transition: background-size var(--dauer-kurz) var(--kurve-standard), color var(--dauer-sofort) linear;
  }
  .nav__liste > li > a:hover, .nav__faecher-titel > a:hover,
  .nav__liste > li > a[aria-current="page"] { background-size: 100% 2px; }
  .nav__faecher-titel > a::after {
    content: ""; width: 0.45rem; height: 0.45rem; margin-left: 0.15rem; margin-top: -0.2rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  }
  .nav__unter {
    list-style: none; margin: 0; padding: var(--abstand-3) 0;
    position: absolute; left: -1.25rem; top: 100%; min-width: 15.5rem;
    background: var(--nmh-papier); border: 1px solid var(--farbe-linie); border-top: 2px solid var(--nmh-brombeere);
    box-shadow: var(--schatten-papier);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--dauer-kurz) var(--kurve-standard), transform var(--dauer-kurz) var(--kurve-standard), visibility 0s linear var(--dauer-kurz);
  }
  .nav__unter a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; font-weight: 600; }
  .nav__unter a:hover { background: var(--nmh-flussnebel); }
  .nav__faecher:hover .nav__unter, .nav__faecher:focus-within .nav__unter {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .nav__faecher.ist-zu .nav__unter { opacity: 0; visibility: hidden; }
  .nav__kontakt { display: none; }
  .nav__knopf { display: inline-flex; min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 1rem; }
  .nav__knopf.knopf { color: var(--nmh-papier); }
}

/* Brotkrumen */
.krumen { padding-top: var(--abstand-5); font-size: var(--text-s); }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
.krumen li { display: flex; align-items: center; gap: 0.5rem; }
.krumen li + li::before { content: "›"; color: var(--farbe-text-leise); }
.krumen a { color: var(--farbe-text-leise); display: inline-flex; align-items: center; min-height: 2.75rem; }
.krumen a:hover { color: var(--nmh-brombeere); }
.krumen [aria-current] { color: var(--nmh-tinte); }

/* ---------- 5. Startseite: Kopfbereich ----------------------------------- */
.held { padding-block: clamp(1.5rem, 0.8rem + 2.4vw, 3rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.held__raster { display: grid; gap: var(--abstand-7) var(--abstand-8); }
@media (min-width: 60em) { .held__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
@media (max-width: 59.99em) { .held__raster { gap: var(--abstand-6); } }
.held__seite { display: flex; flex-direction: column; }
@media (min-width: 60em) { .held__seite .rhein { order: -1; } }

.held h1 { font-size: inherit; }
.held__ort { display: block; margin-bottom: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); }
.held__satz {
  display: block;
  font-size: clamp(2.9rem, 1.15rem + 5.4vw, 5.75rem);
  font-weight: 760;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--nmh-tinte);
}
.held__unterzeile { margin-top: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); font-size: var(--text-l); line-height: 1.45; max-width: 34rem; font-weight: 600; }
.held__text { margin-top: var(--abstand-4); max-width: 34rem; color: var(--farbe-text-leise); }
.held .knoepfe { margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.held__neben { margin-top: var(--abstand-4); }

/* Handy: Knöpfe volle Breite (große, gleich breite Tippflächen) */
@media (max-width: 39.99em) {
  .knoepfe .knopf { flex: 1 1 100%; }
}

/* Termine-Liste (Tag der offenen Tür, Unterrichtsstart, Zeiten) */
.termine { border-top: 2px solid var(--nmh-tinte); }
.termine__zeile { display: grid; grid-template-columns: 7.25rem 1fr; gap: 0.25rem var(--abstand-4); padding-block: 0.9rem; border-bottom: 1px solid var(--farbe-linie); align-items: baseline; }
.termine dt { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.125rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.termine dd { margin: 0; line-height: 1.45; }
.termine dd .leise { display: block; font-size: var(--text-s); }
.termine__titel { font-family: var(--schrift-titel); font-weight: 650; font-size: var(--text-xs); letter-spacing: var(--laufweite-label); text-transform: uppercase; color: var(--farbe-text-leise); margin-bottom: var(--abstand-3); display: block; }
.termine-block { max-width: 30rem; }
.inhalt .termine-block, .zeiten + .termine-block { margin-top: var(--abstand-6); }

/* Rheinlinie mit Herz am Laden. Positionen in % des Bildes (viewBox 0 125 1000 674.6). */
.rhein { position: relative; }
.rhein__bild { position: relative; max-width: 32.5rem; }
.rhein__bild img { width: 100%; }
.rhein__ort {
  /* Linie von „Mondorf“ bis an die Kerbe des Herzens (x 469, y 543) */
  position: absolute; left: 46.9%; bottom: 38%; padding-bottom: 10.5%;
  font-family: var(--schrift-titel); font-weight: 650; font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.0625rem); line-height: 1.25;
  color: var(--nmh-brombeere); padding-left: 0.6rem; border-left: 1px solid var(--nmh-brombeere);
  -webkit-hyphens: manual; hyphens: manual;
}
.rhein__ort span { display: block; font-family: var(--schrift-text); font-weight: 400; color: var(--farbe-text-leise); font-size: 0.875rem; }
.rhein__fluss { position: absolute; left: 11%; top: 29%; font-style: italic; font-size: 0.875rem; color: var(--nmh-rheingruen); }
.rhein__sieg { position: absolute; left: 80%; top: 61%; font-style: italic; font-size: 0.8125rem; color: var(--nmh-rheingruen); }
.rhein__faehre { position: absolute; right: 56%; top: 83%; font-size: 0.875rem; line-height: 1.2; color: var(--nmh-rheingruen); white-space: nowrap; }
.rhein__quelle { font-size: 0.6875rem; line-height: 1.4; color: var(--farbe-text-leise); margin-top: var(--abstand-2); }
@media (max-width: 59.99em) {
  .rhein { margin-top: var(--abstand-5); }
  .rhein__bild { max-width: 20.75rem; } /* ca. 14rem hoch */
}

/* Randnotiz in Handschrift (nur kurze Notizen, nie Adresse, Zeiten, Preise).
   Der Pfeil zeigt nach links unten auf die erste Zeile „Tag der offenen Tür“. */
.held__termine { position: relative; margin-top: 3.4rem; }
.randnotiz {
  position: absolute; right: 0; top: -2.75rem; display: flex; align-items: flex-start; gap: 0.25rem;
  transform: rotate(-2deg); transform-origin: right bottom;
  font-family: var(--schrift-hand); font-size: 1.3rem; line-height: 1.2; color: var(--nmh-brombeere); white-space: nowrap;
  -webkit-hyphens: manual; hyphens: manual;
}
.randnotiz__pfeil { width: 2.5rem; height: 1.95rem; flex: none; margin-top: 0.45rem; }
@media (max-width: 39.99em) {
  .held__termine { margin-top: 3.1rem; }
  .randnotiz { font-size: 1.15rem; top: -2.55rem; }
  .randnotiz__pfeil { width: 2.2rem; height: 1.75rem; }
}

/* Kurz-Fakten: Haarlinien statt Herzen (das Herz bleibt Logo, Streifen und Karte vorbehalten) */
.fakten { list-style: none; margin: 0; padding: var(--abstand-3) 0; border-top: 1px solid var(--farbe-linie); border-bottom: 1px solid var(--farbe-linie); display: grid; }
.fakten li { font-weight: 600; padding-block: 0.55rem; }
.fakten li + li { border-top: 1px solid var(--farbe-linie); }
@media (min-width: 40em) {
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--abstand-3); padding-block: var(--abstand-5); }
  .fakten li, .fakten li + li { border-top: 0; padding: 0 var(--abstand-5); border-left: 1px solid var(--farbe-linie); }
  .fakten li:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 68em) {
  .fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fakten li:nth-child(2n+1) { border-left: 1px solid var(--farbe-linie); padding-left: var(--abstand-5); }
  .fakten li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

/* Herzhaken-Liste (nur dort, wo wirklich etwas abgehakt wird) */
.haken { list-style: none; padding: 0; margin: 0; }
.haken > li { position: relative; padding-left: 1.85rem; }
.haken > li + li { margin-top: var(--abstand-3); }
.haken > li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 1.2rem; height: 1.2rem;
  background: url("../img/signet-klein.svg") center / contain no-repeat;
}
.flaeche-abend .haken > li::before { background-image: url("../img/signet-klein-gelb.svg"); }

/* Liste mit Haarlinien */
.linien { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--farbe-linie); }
.linien > li { padding-block: var(--abstand-4); border-bottom: 1px solid var(--farbe-linie); }
.linien > li > strong:first-child { display: block; font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1875rem; line-height: 1.3; margin-bottom: 0.15rem; }

/* ---------- 6. Fächer mit Fach-Zeichen ---------------------------------- */
.faecher { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--abstand-6); }
@media (min-width: 40em) { .faecher { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .faecher { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fach { align-content: start; position: relative; border-top: 1px solid var(--nmh-tinte); padding: var(--abstand-5) 0 var(--abstand-6); display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 var(--abstand-4); }
.fach__zeichen {
  font-family: var(--schrift-titel); font-weight: 650; color: var(--nmh-brombeere);
  font-size: clamp(3.75rem, 2.6rem + 4.6vw, 7.5rem); line-height: 1; height: 1.02em; letter-spacing: -0.01em; display: block; font-stretch: 94%;
  grid-row: 1 / span 5; margin-bottom: var(--abstand-4);
  -webkit-hyphens: manual; hyphens: manual;
  transition: transform var(--dauer-mittel) var(--kurve-papier), color var(--dauer-sofort) linear;
}
@media (min-width: 40em) { .fach { grid-template-columns: 1fr; } .fach__zeichen { grid-row: auto; } }
.fach h3 { font-size: var(--text-xl); }
.fach__detail { color: var(--farbe-text-leise); font-size: var(--text-s); margin-top: 0.15rem; }
.fach p { margin-top: var(--abstand-3); }
.fach .pfeillink { margin-top: var(--abstand-3); }
.fach .pfeillink::after { content: ""; position: absolute; inset: 0; }
.fach:hover .fach__zeichen { transform: translateY(-4px); color: var(--nmh-brombeere-dunkel); }
@supports selector(:has(*)) {
  .fach:has(.pfeillink:focus-visible) { outline: 3px solid var(--farbe-fokus); outline-offset: 4px; }
  .fach .pfeillink:focus-visible { outline: none; }
}
/* Handy: schmalere Zeichen-Spalte, Nebenzeile in Lesegröße */
@media (max-width: 39.99em) {
  .fach { grid-template-columns: 4rem 1fr; }
  .fach__zeichen { font-size: 3.25rem; }
  .fach__detail { font-size: var(--text-m); }
}

/* Fach-Zeichen im Seitenkopf der Unterseiten */
.zeichen-gross {
  font-family: var(--schrift-titel); font-weight: 650; color: var(--nmh-brombeere);
  font-size: clamp(6rem, 3rem + 13vw, 15rem); line-height: 0.82; letter-spacing: -0.01em; font-stretch: 94%;
  -webkit-hyphens: manual; hyphens: manual;
}
.seitenkopf__bild--latein { display: flex; flex-direction: column; gap: var(--abstand-5); }
.seitenkopf__bild--latein .zeichen-gross { font-size: clamp(5rem, 3rem + 7vw, 9.5rem); line-height: 0.9; }

/* ---------- 7. „Für dich“-Kasten (Du-Ansprache) -------------------------- */
.fuer-dich { background: var(--nmh-malvenbluete); border-radius: var(--radius-papier); padding: clamp(1.5rem, 1rem + 2.4vw, 3rem); display: grid; gap: var(--abstand-5) var(--abstand-8); margin-top: var(--abstand-8); }
@media (min-width: 60em) { .fuer-dich { grid-template-columns: 7fr 5fr; align-items: center; } }
.fuer-dich h3 { font-size: var(--text-2xl); }
.fuer-dich__text { margin-top: var(--abstand-3); max-width: 36rem; }
.fuer-dich .knoepfe { margin-top: var(--abstand-5); }
.fuer-dich__eltern { margin-top: var(--abstand-4); font-size: var(--text-s); color: var(--farbe-text-leise); }
.fuer-dich__notiz { font-family: var(--schrift-titel); font-weight: 650; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.6; color: var(--nmh-tinte); -webkit-hyphens: manual; hyphens: manual; }
.fuer-dich__notiz small { display: block; font-family: var(--schrift-text); font-weight: 400; font-size: var(--text-s); line-height: 1.4; color: var(--farbe-text-leise); margin-top: var(--abstand-2); }

/* Einfügezeichen mit „noch“ in Handschrift */
.einfuegen { position: relative; display: inline-block; width: 0.32em; height: 1em; vertical-align: baseline; }
.einfuegen ins {
  position: absolute; left: 50%; bottom: 0.72em; transform: translateX(-50%) rotate(-5deg);
  font-family: var(--schrift-hand); font-weight: 400; font-size: 0.72em; line-height: 1; color: var(--nmh-brombeere);
  text-decoration: none; white-space: nowrap;
}
.einfuegen::after {
  content: ""; position: absolute; left: 50%; bottom: -0.02em; width: 0.42em; height: 0.3em; margin-left: -0.21em;
  border-left: 2px solid var(--nmh-brombeere); border-top: 2px solid var(--nmh-brombeere);
  transform: rotate(45deg) translate(0.05em, 0.05em); transform-origin: center; border-radius: 1px 0 0 0;
}

/* ---------- 8. Prüfungen ------------------------------------------------- */
.pruefungen { display: grid; gap: var(--abstand-7) var(--abstand-8); }
@media (min-width: 60em) { .pruefungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pruefung { border-top: 1px solid var(--nmh-tinte); padding-top: var(--abstand-5); }
.pruefung__name { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(3rem, 2.1rem + 3.6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.01em; color: var(--nmh-brombeere); margin-bottom: var(--abstand-4); -webkit-hyphens: manual; hyphens: manual; }
.pruefung p { max-width: 32rem; }

/* ---------- 9. Weitere Angebote (Zeilen) --------------------------------- */
.angebote { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nmh-tinte); }
.angebot { display: grid; gap: var(--abstand-2) var(--abstand-6); padding-block: var(--abstand-5); border-bottom: 1px solid var(--farbe-linie); position: relative; }
@media (min-width: 48em) { .angebot { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); align-items: baseline; } .angebot h3 { grid-row: span 2; } .angebot .pfeillink { grid-column: 2; justify-self: start; } }
.angebot h3 { font-size: var(--text-xl); display: flex; align-items: baseline; gap: var(--abstand-3); flex-wrap: wrap; }
.angebot p { color: var(--farbe-text-leise); }
.angebot .pfeillink::after { content: ""; position: absolute; inset: 0; }
.angebot:has(.pfeillink):hover h3 { color: var(--nmh-brombeere); }
.marke-bald {
  display: inline-block; font-family: var(--schrift-titel); font-weight: 650; font-size: var(--text-xs); letter-spacing: var(--laufweite-label); text-transform: uppercase;
  color: var(--nmh-tinte); border: 1px solid var(--nmh-tinte); padding: 0.1rem 0.5rem; border-radius: var(--radius-rund); line-height: 1.4; vertical-align: middle;
}

/* ---------- 10. BuT ------------------------------------------------------ */
.but { display: grid; gap: var(--abstand-6) var(--abstand-8); }
@media (min-width: 60em) { .but { grid-template-columns: 5fr 6fr; } }
.fester-satz { font-weight: 600; font-size: var(--text-l); line-height: 1.45; margin-top: var(--abstand-5); max-width: 30rem; padding-left: var(--abstand-4); border-left: 3px solid var(--nmh-brombeere); }
.but__text p + p, .but__text ul { margin-top: var(--abstand-4); }
.but .knoepfe { margin-top: var(--abstand-5); }

/* ---------- 11. Ablauf (echte Reihenfolge, deshalb mit Nummern) ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--abstand-6); counter-reset: schritt; }
@media (min-width: 60em) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schritt { counter-increment: schritt; position: relative; padding: 0 0 var(--abstand-6) 3.5rem; }
.schritt::before {
  content: counter(schritt); position: absolute; left: 0; top: -0.1rem;
  font-family: var(--schrift-titel); font-weight: 650; font-size: 2rem; line-height: 1; color: var(--nmh-brombeere);
  font-variant-numeric: tabular-nums;
}
.schritt::after { content: ""; position: absolute; left: 0.62rem; top: 2.5rem; bottom: 0.6rem; width: 1px; background: var(--farbe-linie); }
.schritt:last-child::after { display: none; }
@media (min-width: 60em) {
  .schritt { padding: var(--abstand-6) 0 0; border-top: 1px solid var(--nmh-tinte); }
  .schritt::before { position: static; display: block; font-size: clamp(2.5rem, 1.6rem + 2vw, 3.5rem); margin-bottom: var(--abstand-4); }
  .schritt::after { display: none; }
}
.schritt h3 { font-size: 1.3125rem; }
.schritt p { margin-top: var(--abstand-2); color: var(--farbe-text-leise); }
.schritt__extra { display: inline-block; margin-top: var(--abstand-3); font-weight: 700; color: var(--nmh-tinte); }

/* ---------- 12. Kosten (im Ablauf) und Pakete ---------------------------- */
.kosten { display: grid; gap: var(--abstand-3) var(--abstand-8); margin-top: var(--abstand-8); padding-top: var(--abstand-6); border-top: 1px solid var(--nmh-tinte); }
@media (min-width: 60em) { .kosten { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.kosten .etikett { margin-bottom: var(--abstand-3); }
.kosten__titel { font-size: var(--text-2xl); font-weight: 650; }
.kosten__satz { font-family: var(--schrift-titel); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.3; color: var(--nmh-brombeere); max-width: 36rem; }
.kosten__text p { max-width: var(--textbreite); }
.kosten__text p + p { margin-top: var(--abstand-4); }
.pakete-block { margin-top: var(--abstand-6); }
.preise { display: grid; gap: var(--abstand-6) var(--abstand-8); }
@media (min-width: 60em) { .preise { grid-template-columns: 7fr 5fr; align-items: start; } }
.preise__satz { font-family: var(--schrift-titel); font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; max-width: 32rem; margin-top: var(--abstand-5); color: var(--nmh-brombeere); }
.preise__hinweise { border-top: 1px solid var(--nmh-tinte); }
.preise__hinweise p { padding-block: var(--abstand-4); border-bottom: 1px solid var(--farbe-linie); margin: 0; }
.pakete { list-style: none; margin: var(--abstand-7) 0 0; padding: 0; display: grid; gap: var(--abstand-5); }
@media (min-width: 48em) { .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .pakete { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.paket { border-top: 2px solid var(--nmh-brombeere); padding-top: var(--abstand-4); }
.paket h3 { font-size: 1.375rem; }
.paket__preis { font-family: var(--schrift-titel); font-weight: 700; font-size: 2rem; line-height: 1.1; margin-block: var(--abstand-3); }
.paket ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-s); }
.paket li { padding-block: 0.35rem; border-bottom: 1px solid var(--farbe-linie); }

/* BuT als ruhige Karte im Abschnitt „Weitere Angebote“ */
.but-karte { margin-top: var(--abstand-7); background: var(--nmh-flussnebel); border-radius: var(--radius-papier); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }
.but-karte .etikett { margin-bottom: var(--abstand-3); }
.but-karte__titel { font-size: var(--text-xl); }
.but-karte .fester-satz { margin-top: var(--abstand-4); }
.but-karte p + p { margin-top: var(--abstand-4); }
.but__gut-zu-wissen { margin-top: var(--abstand-5); }

/* ---------- 13. Über Habib ----------------------------------------------- */
.person { display: grid; gap: var(--abstand-7) var(--abstand-8); }
@media (min-width: 60em) { .person { grid-template-columns: 5fr 7fr; align-items: start; } }
.person__text h2 { margin-bottom: var(--abstand-3); }
.person__unterzeile { font-size: var(--text-l); line-height: 1.45; font-weight: 600; margin-bottom: var(--abstand-5); max-width: 34rem; }
.person__text p { max-width: var(--textbreite); }
.person .knoepfe { margin-top: var(--abstand-5); }

.leitbild { margin-top: var(--abstand-7); padding-left: var(--abstand-5); border-left: 3px solid var(--nmh-brombeere); max-width: 40rem; }
.leitbild p { font-style: italic; font-size: var(--text-l); line-height: 1.5; }
.leitbild footer { margin-top: var(--abstand-3); font-size: var(--text-s); color: var(--farbe-text-leise); }
/* Leitbild als Großsatz über die ganze Breite (Startseite) – bewusster Rhythmuswechsel */
.leitbild--band { max-width: none; margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding: clamp(2rem, 1.4rem + 2.6vw, 4rem) 0 0; border-left: 0; border-top: 1px solid var(--nmh-tinte); }
.leitbild--band p {
  font-family: var(--schrift-titel); font-style: normal; font-weight: 600; font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3.5rem);
  line-height: 1.18; letter-spacing: -0.005em; max-width: 60rem; color: var(--nmh-tinte); text-wrap: balance;
  -webkit-hyphens: manual; hyphens: manual;
}
.leitbild--band footer { margin-top: var(--abstand-5); font-size: var(--text-m); }

/* Foto-Platzhalter: ruhige Schrift-Karte, bis ein echtes Foto da ist */
.foto { margin: 0; width: min(100%, 22rem); }
.foto__flaeche {
  aspect-ratio: 1 / 1; border-radius: var(--radius-papier); overflow: hidden; background: var(--nmh-malvenbluete);
  display: flex; align-items: center; justify-content: center;
}
.foto__name { font-family: var(--schrift-titel); font-weight: 760; font-size: clamp(3.5rem, 2.2rem + 4vw, 5.5rem); line-height: 1; letter-spacing: -0.005em; color: var(--nmh-brombeere); -webkit-hyphens: manual; hyphens: manual; }
.foto img { width: 100%; height: auto; border-radius: var(--radius-papier); }
@media (max-width: 59.99em) {
  .foto { width: 100%; }
  .foto__flaeche { aspect-ratio: auto; height: 11rem; }
}
.foto figcaption, .bildtext {
  font-family: var(--schrift-hand); font-size: 1.25rem; line-height: 1.3; color: var(--nmh-brombeere);
  margin-top: var(--abstand-3); transform: rotate(-1deg); transform-origin: left center;
}

/* ---------- 14. Standort ------------------------------------------------- */
.standort-kurz { display: grid; gap: var(--abstand-4) var(--abstand-8); }
@media (min-width: 60em) { .standort-kurz { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.standort-kurz .person__unterzeile { margin-bottom: 0; }
.standort-kurz p { max-width: var(--textbreite); }
.standort-kurz p + p { margin-top: var(--abstand-4); }
.standort { display: grid; gap: var(--abstand-7) var(--abstand-8); }
@media (min-width: 60em) { .standort { grid-template-columns: 7fr 5fr; align-items: start; } }
.karte { margin: 0; background: var(--nmh-flussnebel); border-radius: var(--radius-papier); padding: clamp(0.75rem, 0.4rem + 1.4vw, 1.75rem); }
.karte img { width: 100%; }
.karte figcaption { font-size: 0.8125rem; color: var(--farbe-text-leise); margin-top: var(--abstand-3); }
.adresse { font-style: normal; font-family: var(--schrift-titel); font-weight: 650; font-size: var(--text-xl); line-height: 1.3; margin-top: var(--abstand-5); }
.adresse span { display: block; font-family: var(--schrift-text); font-weight: 400; font-size: var(--text-m); color: var(--farbe-text-leise); }
.standort .termine, .standort .zeiten { margin-top: var(--abstand-6); }
.standort .knoepfe { margin-top: var(--abstand-5); }
.orte { font-weight: 600; }

/* ---------- 15. Fragen (aufklappbar) ------------------------------------- */
.fragen { border-top: 1px solid var(--nmh-tinte); }
.frage { border-bottom: 1px solid var(--farbe-linie); }
.frage summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-4);
  min-height: 3.5rem; padding-block: var(--abstand-4);
  font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1875rem; line-height: 1.35;
  -webkit-hyphens: manual; hyphens: manual;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border-radius: 50%;
  background:
    linear-gradient(var(--nmh-brombeere), var(--nmh-brombeere)) center / 0.75rem 2px no-repeat,
    linear-gradient(var(--nmh-brombeere), var(--nmh-brombeere)) center / 2px 0.75rem no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--nmh-brombeere);
  transition: transform var(--dauer-mittel) var(--kurve-standard);
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { color: var(--nmh-brombeere); }
.frage__antwort { padding-bottom: var(--abstand-5); max-width: 40rem; padding-right: 2.5rem; }
.frage__antwort p + p { margin-top: var(--abstand-3); }
@supports (interpolate-size: allow-keywords) {
  .fragen { interpolate-size: allow-keywords; }
  .frage::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer-mittel) var(--kurve-standard), content-visibility var(--dauer-mittel) allow-discrete; }
  .frage[open]::details-content { block-size: auto; }
}

/* ---------- 16. Kontakt-Schluss + Abreißzettel (Signature-Moment) -------- */
.kontakt-schluss { display: grid; gap: var(--abstand-8) var(--abstand-8); }
@media (min-width: 60em) { .kontakt-schluss { grid-template-columns: 7fr 5fr; align-items: center; } }
.kontakt-schluss h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem); }
.kontakt-schluss__unter { margin-top: var(--abstand-4); font-size: var(--text-l); line-height: 1.45; max-width: 34rem; }
.kontakt-schluss .knoepfe { margin-top: var(--abstand-6); }
.kontakt-schluss__klein { margin-top: var(--abstand-5); font-size: var(--text-s); color: var(--farbe-text-leise); }
.kontakt-schluss__zettel { justify-self: start; width: 100%; max-width: 28rem; padding-top: var(--abstand-4); }
/* Startseite: Zettel groß und als Haupt-Kontaktweg */
.kontakt-schluss--zettel { grid-template-areas: "kopf" "zettel" "fuss"; gap: var(--abstand-6) var(--abstand-8); }
.kontakt-schluss__kopf { grid-area: kopf; }
.kontakt-schluss--zettel .kontakt-schluss__zettel { grid-area: zettel; }
.kontakt-schluss__fuss { grid-area: fuss; }
.kontakt-schluss__fuss .knoepfe { margin-top: 0; }
.kontakt-schluss__mail { font-weight: 600; }
@media (min-width: 60em) {
  .kontakt-schluss--zettel { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "kopf zettel" "fuss zettel"; align-items: start; }
  .kontakt-schluss--zettel .kontakt-schluss__kopf { align-self: end; }
  .kontakt-schluss--zettel .kontakt-schluss__zettel { justify-self: end; }
}
@media (max-width: 59.99em) {
  .kontakt-schluss--zettel .kontakt-schluss__zettel { justify-self: center; padding-top: var(--abstand-3); }
  .kontakt-schluss--zettel .kontakt-schluss__klein { margin-top: var(--abstand-3); }
}

/* Abreißzettel „Nummer zum Mitnehmen“ – reines HTML + CSS, JavaScript nur fürs Abreißen */
.zettel { --linie: #B9AEB4; --streifen: 9rem; width: 100%; color: var(--nmh-tinte); }
.zettel__blatt {
  position: relative; border-radius: var(--radius-papier);
  background: linear-gradient(var(--nmh-papier), var(--nmh-papier)) top / 100% calc(100% - var(--streifen)) no-repeat;
  filter: drop-shadow(0 1px 1px rgb(35 26 34 / 0.10)) drop-shadow(0 8px 10px rgb(35 26 34 / 0.14));
  padding: 1.35rem 1.25rem 0; transform: rotate(-0.6deg); transform-origin: 50% 0.2rem;
}
.zettel__nadel { position: absolute; top: -0.45rem; left: 50%; width: 0.95rem; height: 0.95rem; margin-left: -0.475rem; border-radius: 50%; background: var(--nmh-brombeere); box-shadow: 0 2px 3px rgb(35 26 34 / 0.3), inset -2px -2px 0 rgb(0 0 0 / 0.15); }
.zettel__kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.zettel__logo { width: 10.5rem; }
.zettel__qr { width: 4.25rem; height: 4.25rem; }
.zettel__qrtext { font-size: 0.6875rem; color: var(--farbe-text-leise); text-align: center; margin-top: 0.2rem; }
@media (max-width: 47.99em) { .zettel__qrbox { display: none; } } /* den eigenen Bildschirm kann man nicht scannen */
.zettel__titel { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.75rem; line-height: 1.08; margin: 0.9rem 0 0.45rem; }
.zettel__faecher { font-weight: 700; }
.zettel__stufen { font-size: 0.9rem; color: var(--farbe-text-leise); margin: 0.15rem 0 1rem; }
.zettel__streifen { list-style: none; margin: 0 -1.25rem; padding: 0; display: flex; border-top: 1px dashed var(--linie); }
.zettel__streifen li { flex: 1; border-left: 1px dashed var(--linie); min-width: 0; }
.zettel__streifen li:first-child { border-left: 0; }
.zettel__streifen a {
  display: flex; align-items: center; justify-content: center; height: var(--streifen); background: var(--nmh-papier);
  text-decoration: none; color: var(--nmh-tinte); transform-origin: 50% 0;
  font-family: var(--schrift-titel); font-weight: 600; font-size: 0.9375rem; line-height: 1.25;
  transition: transform var(--dauer-kurz) var(--kurve-papier), box-shadow var(--dauer-kurz) var(--kurve-papier);
  -webkit-hyphens: manual; hyphens: manual;
}
.zettel__v { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-align: center; }
.zettel__v > span { display: block; }
.zettel__v > span + span { color: var(--nmh-brombeere); }
/* Darüberfahren: Streifen hebt sich leicht und kippt (oben festgehalten, unten frei) */
.zettel__streifen a:hover { transform: translateY(-3px) rotate(-3.5deg); box-shadow: 0 6px 10px -6px rgb(35 26 34 / 0.35); }
.zettel__streifen a:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: -3px; border-radius: 0; }
.zettel__streifen li.ist-weg { border-left-color: transparent; }
.zettel__streifen li.ist-weg + li { border-left-color: transparent; }
.zettel__streifen li.ist-weg a { visibility: hidden; }
.zettel__streifen li.reisst a { visibility: visible; animation: abreissen var(--dauer-lang) var(--kurve-raus) forwards; }
.zettel__unten { font-size: 0.9375rem; color: var(--farbe-text-leise); margin: 1rem 0.25rem 0; line-height: 1.6; }
.zettel__unten a { font-weight: 700; display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.zettel__leer { font-family: var(--schrift-hand); color: var(--nmh-brombeere); font-size: 1.25rem; line-height: 1.3; margin: 0.75rem 0.25rem 0; }
.zettel__notiz { font-family: var(--schrift-hand); color: var(--nmh-brombeere); font-size: 1.2rem; line-height: 1.2; text-align: right; margin: 0.6rem 0.25rem 0; transform: rotate(-2deg); transform-origin: right center; }
.zettel.pendelt .zettel__blatt { animation: pendeln var(--dauer-lang) ease-in-out 1; }

@keyframes abreissen {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  35%  { transform: translateY(6px) rotate(-6deg); opacity: 1; }
  100% { transform: translateY(70px) rotate(-14deg); opacity: 0; }
}
/* Ein ruhiger Pendelschwung: jede Strecke weich (ease-in-out), das Nachschwingen steckt in den Winkeln */
@keyframes pendeln {
  0%   { transform: rotate(-0.6deg); animation-timing-function: ease-in-out; }
  25%  { transform: rotate(-2.6deg); animation-timing-function: ease-in-out; }
  55%  { transform: rotate(0.8deg);  animation-timing-function: ease-in-out; }
  80%  { transform: rotate(-1deg);   animation-timing-function: ease-in-out; }
  100% { transform: rotate(-0.6deg); }
}

/* ---------- 17. Unterseiten ---------------------------------------------- */
.seitenkopf { padding-block: clamp(1.25rem, 0.8rem + 2vw, 2.5rem) clamp(2.5rem, 1.6rem + 4vw, 5rem); }
.seitenkopf__raster { display: grid; gap: var(--abstand-6) var(--abstand-8); margin-top: clamp(1.25rem, 0.8rem + 2vw, 3rem); }
@media (min-width: 60em) { .seitenkopf__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.seitenkopf__unter { margin-top: var(--abstand-5); font-size: var(--text-l); line-height: 1.45; font-weight: 600; max-width: 36rem; }
.seitenkopf__text { margin-top: var(--abstand-4); max-width: 36rem; color: var(--farbe-text-leise); }
.seitenkopf .knoepfe { margin-top: var(--abstand-6); }
.seitenkopf__bild { justify-self: start; }
@media (min-width: 60em) { .seitenkopf__bild { justify-self: end; } }

/* Sprung-Links innerhalb einer Seite */
.sprungmarken { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-5); list-style: none; padding: 0; }
.sprungmarken a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.95rem;
  border: 1px solid var(--nmh-feldrand); border-radius: var(--radius-rund); color: var(--nmh-tinte);
  text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.sprungmarken a:hover { border-color: var(--nmh-brombeere); color: var(--nmh-brombeere); background: var(--nmh-malvenbluete); }

/* Inhaltsblöcke */
.inhalt > * + * { margin-top: var(--abstand-5); }
.inhalt h3 { margin-top: var(--abstand-7); }
.inhalt h3:first-child { margin-top: 0; }
.inhalt h3 + p, .inhalt h3 + ul { margin-top: var(--abstand-3); }
.inhalt p, .inhalt ul, .inhalt ol { max-width: var(--textbreite); }
.inhalt ul:not([class]) { padding-left: 1.2rem; }
.inhalt ul:not([class]) li + li { margin-top: var(--abstand-2); }

.stufen { display: grid; gap: 0 var(--abstand-6); border-top: 1px solid var(--nmh-tinte); }
@media (min-width: 48em) { .stufen { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.stufe { padding-block: var(--abstand-5); border-bottom: 1px solid var(--farbe-linie); }
@media (min-width: 48em) { .stufe { border-bottom: 0; } }
.stufe h3 { font-size: 1.3125rem; margin-bottom: var(--abstand-2); }
.stufe p { color: var(--farbe-text-leise); }

.hinweis { background: var(--nmh-flussnebel); border-radius: var(--radius-papier); padding: var(--abstand-5) var(--abstand-5); max-width: 40rem; }
.hinweis .etikett { margin-bottom: var(--abstand-2); color: var(--nmh-rheingruen); }
.flaeche-nebel .hinweis { background: var(--nmh-papier); }

.zitatzeile { font-family: var(--schrift-titel); font-weight: 650; font-size: var(--text-xl); line-height: 1.3; max-width: 32rem; }

/* Latein-Formen als kleine Tafel */
.formen { border-top: 2px solid var(--nmh-tinte); width: 100%; max-width: 22rem; }
.formen table { border-collapse: collapse; width: 100%; }
.formen caption { text-align: left; font-family: var(--schrift-titel); font-weight: 650; font-size: var(--text-xs); letter-spacing: var(--laufweite-label); text-transform: uppercase; color: var(--farbe-text-leise); padding: var(--abstand-3) 0; caption-side: bottom; }
.formen th, .formen td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--farbe-linie); font-weight: 400; }
.formen th { font-family: var(--schrift-titel); font-weight: 650; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; color: var(--nmh-tinte); }
.formen th b { color: var(--nmh-brombeere); font-weight: 700; }
.formen td { color: var(--farbe-text-leise); font-size: var(--text-s); text-align: right; }

/* Fadenbild */
.fadenbild { margin: 0; max-width: 24rem; width: 100%; }
.fadenbild img { width: 100%; }
.fadenbild figcaption { margin-top: var(--abstand-3); font-size: var(--text-s); color: var(--farbe-text-leise); max-width: 22rem; }
.fadenbild figcaption strong { display: block; font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1875rem; color: var(--nmh-tinte); }

/* Formel-Tafel (Ausbildung & Beruf) */
.formel { font-family: var(--schrift-titel); font-weight: 650; font-size: clamp(2rem, 1rem + 3.4vw, 3.75rem); white-space: nowrap; line-height: 1.05; color: var(--nmh-brombeere); letter-spacing: 0; -webkit-hyphens: manual; hyphens: manual; }
.formel small { white-space: normal; display: block; font-family: var(--schrift-text); font-weight: 400; font-size: var(--text-s); color: var(--farbe-text-leise); margin-top: var(--abstand-3); letter-spacing: 0; }

/* Kontaktwege (Kontaktseite) */
.wege { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nmh-tinte); }
.weg { display: grid; gap: var(--abstand-3) var(--abstand-6); padding-block: var(--abstand-5); border-bottom: 1px solid var(--farbe-linie); }
@media (min-width: 48em) {
  .weg { grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; }
  .weg .knopf { min-width: 13.5rem; justify-self: end; }
}
.weg__art { font-family: var(--schrift-titel); font-weight: 650; font-size: var(--text-xs); letter-spacing: var(--laufweite-label); text-transform: uppercase; color: var(--farbe-text-leise); }
.weg__wert { font-family: var(--schrift-titel); font-weight: 650; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.2; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }
.weg__wert small { display: block; font-family: var(--schrift-text); font-weight: 400; font-size: var(--text-s); color: var(--farbe-text-leise); margin-top: 0.2rem; }

.zeiten { border-top: 1px solid var(--nmh-tinte); max-width: 30rem; }
.zeiten div { display: flex; justify-content: space-between; gap: var(--abstand-4); padding-block: 0.8rem; border-bottom: 1px solid var(--farbe-linie); }
.zeiten dt { font-weight: 700; }
.zeiten dd { margin: 0; font-family: var(--schrift-titel); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Rechtstexte */
.recht > * { max-width: 44rem; }
.seitenkopf + .abschnitt--recht { padding-top: 0; }
.recht h2 { font-size: var(--text-xl); margin-top: var(--abstand-7); margin-bottom: var(--abstand-3); }
.recht h2:first-child { margin-top: 0; }
.recht p + p, .recht ul { margin-top: var(--abstand-3); }
.recht ul { padding-left: 1.2rem; }
.recht address { font-style: normal; }

/* 404 */
.verloren__liste { columns: 2 14rem; column-gap: var(--abstand-6); margin-top: var(--abstand-5); }
.verloren__liste li { break-inside: avoid; }

/* ---------- 18. Fußzeile ------------------------------------------------- */
.fuss { background: var(--nmh-tinte); color: var(--nmh-papier); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--abstand-6); font-size: var(--text-s); line-height: 1.6; }
.fuss a { color: var(--nmh-papier); }
.fuss a:hover { color: var(--nmh-fensterlicht); }
.fuss__oben { display: grid; gap: var(--abstand-7) var(--abstand-6); }
@media (min-width: 40em) { .fuss__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em) { .fuss__oben { grid-template-columns: 3.2fr 2.6fr 2.6fr 2.4fr 2.2fr; } }
.fuss__logo { width: 11.5rem; }
.fuss__leitsatz { margin-top: var(--abstand-4); font-family: var(--schrift-titel); font-weight: 650; font-size: 1.25rem; line-height: 1.25; }
.fuss h2 { font-family: var(--schrift-titel); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--laufweite-label); text-transform: uppercase; color: var(--nmh-fensterlicht); margin-bottom: var(--abstand-3); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss address { font-style: normal; }
.fuss__kontakt a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss__zeiten { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem var(--abstand-4); }
.fuss__zeiten dt { font-weight: 700; }
.fuss__zeiten dd { margin: 0; }
.fuss__seiten ul { columns: 2; column-gap: var(--abstand-5); }
.fuss__seiten li { break-inside: avoid; }
@media (min-width: 68em) {
  .fuss__oben { grid-template-columns: 3.2fr 2.6fr 2.6fr 2.4fr; }
  .fuss__seiten { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / 0.2); padding-top: var(--abstand-4); }
  .fuss__seiten ul { columns: auto; display: flex; flex-wrap: wrap; gap: 0 var(--abstand-5); }
}
@media (pointer: fine) and (min-width: 68em) {
  .fuss li a, .fuss__kontakt a { min-height: 2rem; }
}
.fuss__unten { margin-top: var(--abstand-8); padding-top: var(--abstand-4); border-top: 1px solid rgb(255 255 255 / 0.2); display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); justify-content: space-between; align-items: center; }
.fuss__unten ul { display: flex; gap: var(--abstand-5); }
.fuss .leise { color: rgb(255 255 255 / 0.78); }

/* ---------- 19. Feste Leiste am Handy ------------------------------------ */
.handyleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-2);
  padding: 0.5rem var(--seitenrand) calc(0.5rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.98); border-top: 1px solid var(--farbe-linie);
}
.handyleiste .knopf { min-height: 3rem; padding-inline: 0.5rem; }
body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
@media (min-width: 60em) {
  .handyleiste { display: none; }
  body { padding-bottom: 0; }
}
html.menue-offen .handyleiste { display: none; }

/* ---------- 20. Entwurfs-Ansicht (Adresse mit ?entwurf aufrufen) ---------
   Offene Punkte sind im Code mit class="offen" bzw. data-platzhalter markiert.
   Normal unsichtbar, in der Entwurfs-Ansicht gelb hervorgehoben.            */
.offen { display: none; }
.entwurf .offen {
  display: inline; background: #FFF1B8; color: #231A22; outline: 1px dashed #857B81; outline-offset: 1px;
  font-family: var(--schrift-text); font-weight: 600; font-size: 0.85em; font-style: normal; padding: 0 0.25em; border-radius: 2px;
}
.entwurf div.offen, .entwurf p.offen { display: block; margin-top: var(--abstand-3); padding: 0.4rem 0.6rem; }
[data-platzhalter][hidden] { display: none !important; }
.entwurf [data-platzhalter][hidden] { display: block !important; outline: 2px dashed #857B81; outline-offset: 6px; }
.entwurf ul[data-platzhalter][hidden] { display: grid !important; }
.entwurf-hinweis { display: none; }
.entwurf .entwurf-hinweis {
  display: block; position: fixed; left: 0.75rem; bottom: 5rem; z-index: 60; max-width: 19rem;
  background: #FFF1B8; color: #231A22; border: 1px solid #857B81; padding: 0.6rem 0.8rem; font-size: 0.8125rem; line-height: 1.4; border-radius: 4px;
}
@media (min-width: 60em) { .entwurf .entwurf-hinweis { bottom: 0.75rem; } }

/* ---------- 20b. Ergänzungen ------------------------------------------- */
.knoepfe--abstand { margin-top: var(--abstand-6); }
.trenner--abschnitt { margin-bottom: var(--abstand-abschnitt); }
.person__mehr { margin-top: var(--abstand-5); }
.pakete__steuer { margin-top: var(--abstand-4); }
.bewertungen { margin-top: var(--abstand-8); border-top: 1px solid var(--nmh-tinte); padding-top: var(--abstand-5); }
.bewertung { margin-top: var(--abstand-4); }
.flaeche-nebel .karte { background: var(--nmh-papier); }

/* Abendfläche (dunkel): Farben umstellen */
.flaeche-abend .kopfzeile .einleitung, .flaeche-abend .einleitung { color: rgb(255 255 255 / 0.82); }
.flaeche-abend .nmh-marker { background: none; color: var(--nmh-fensterlicht); padding: 0; }
.flaeche-abend .pruefung { border-top-color: rgb(255 255 255 / 0.55); }
.flaeche-abend .pruefung__name { color: var(--nmh-papier); }
.flaeche-abend p { color: rgb(255 255 255 / 0.9); }
.flaeche-abend a:not(.knopf) { color: var(--nmh-papier); }

/* Checkliste als echter Zettel (BuT-Seite) */
.checkliste {
  background: var(--nmh-papier); box-shadow: var(--schatten-papier); border-radius: var(--radius-papier);
  padding: var(--abstand-5) var(--abstand-5) var(--abstand-4); width: 100%; max-width: 21rem; transform: rotate(1.2deg);
}
.checkliste__titel { font-family: var(--schrift-hand); color: var(--nmh-brombeere); font-size: 1.375rem; line-height: 1.2; margin-bottom: var(--abstand-3); }
.checkliste ol { list-style: none; margin: 0; padding: 0; }
.checkliste li { position: relative; padding: 0.7rem 0 0.7rem 2.1rem; border-top: 1px solid var(--farbe-linie); line-height: 1.4; }
.checkliste li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 1.15rem; height: 1.15rem; border: 2px solid var(--nmh-feldrand); border-radius: 3px; }
.checkliste li.ist-erledigt::before { border-color: transparent; background: url("../img/signet-klein.svg") center / 1.25rem no-repeat; }
.checkliste__klein { font-size: 0.8125rem; color: var(--farbe-text-leise); margin-top: var(--abstand-3); }

/* Seitenkopf mit zwei großen Fach-Zeichen */
.zeichen-paar { display: flex; gap: 0.12em; align-items: baseline; }
.zeichen-paar span + span { color: var(--nmh-tinte); }

/* Lücken in Rechtstexten: immer sichtbar, bis sie ausgefüllt sind */
.luecke { background: #FFF1B8; color: var(--nmh-tinte); outline: 1px dashed var(--nmh-feldrand); padding: 0 0.2em; border-radius: 2px; }

/* Großes Leitbild (Über Habib) */
.leitbild--gross { max-width: 58rem; margin-top: 0; border-left-color: rgb(255 255 255 / 0.5); padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.leitbild--gross p { font-family: var(--schrift-titel); font-style: normal; font-weight: 600; font-size: clamp(1.6rem, 1.05rem + 2.4vw, 3rem); line-height: 1.25; color: var(--nmh-papier); -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty; }
.leitbild--gross footer { color: rgb(255 255 255 / 0.78); font-size: var(--text-m); margin-top: var(--abstand-5); }

.seitenkopf__zettel { width: 100%; max-width: 26rem; }
@media (min-width: 60em) { .seitenkopf__raster--kontakt { align-items: start; } .seitenkopf__zettel { margin-top: 3rem; } }
.seitenkopf__raster--person .seitenkopf__bild { width: 100%; }
@media (min-width: 60em) { .seitenkopf__raster--person { align-items: start; } .seitenkopf__raster--person .seitenkopf__bild { width: min(100%, 22rem); } .seitenkopf__raster--person .foto { width: 100%; } }
.verloren__notiz { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }

.etikett__zeichen { text-transform: none; font-size: 1.3em; letter-spacing: 0; }
.nw { white-space: nowrap; }
.zeichen-gross--zeile { white-space: nowrap; font-size: clamp(5rem, 2rem + 8.4vw, 10.5rem); }
.wege { margin-top: var(--abstand-6); }
.formen { max-width: 26rem; }

/* Kurse/Hinweise in der Entwurfs-Ansicht */
.entwurf li.offen { display: list-item; }

/* ---------- 21. Bewegung reduzieren -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .zettel__streifen a:hover { transform: none; }
  .fach:hover .fach__zeichen { transform: none; }
}

/* ---------- 22. Druck ---------------------------------------------------- */
@media print {
  .streifen, .kopf nav, .menue-knopf, .handyleiste, .sprung, .zettel__streifen { display: none !important; }
  .kopf { position: static; }
  body { padding: 0; }
  a { color: inherit; }
}