/* catherine-avak.de
   Grundlage: gestaltung.md (abgenommen 11.11.2026) und die Messwerte von avak.de (quelle-avak/layout/).
   Raster, Größen und Abstände wie auf avak.de, neu sind nur Farben und Schriften.
   Alle Werte, die sich später verschieben lassen sollen, stehen als Variablen in :root. */

/* ---------- Schriften: eigene Dateien, kein externer Dienst ---------- */
@font-face { font-family: "Karmina"; src: url("../fonts/Karmina/Karmina-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Karmina"; src: url("../fonts/Karmina/Karmina-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Evoque Heavy"; src: url("../fonts/EvoqueHeavy/font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Farben */
  --flaeche: #DDF0F3;
  --text: #1E1E1C;
  --signal: #EF3100;
  --link: var(--signal);         /* Links samt Pfeil in Signal, 3,5 : 1 (Entscheidung Catherine 11.11.2026) */
  --gedaempft: #5B6B73;          /* aktiver Menüpunkt */
  --dunkel: #1E1E1C;             /* dunkle Sektionen */
  --text-auf-dunkel: #FFFFFF;
  --linie: #1E1E1C;
  --linie-liste: #FFFFFF;         /* Linien zwischen den Klärungen (Catherine 12.11.2026) */
  --linie-liste-staerke: 3px;     /* 1 px Weiß verschwindet auf dem Hellblau */
  --flaeche-artikel: #FFFFFF;     /* Hintergrund der sechs Artikelseiten (Catherine 12.11.2026) */
  --schleier: rgba(30, 30, 28, 0.45);

  /* Schriften */
  --schrift-text: "Karmina", Georgia, serif;
  --schrift-titel: "Evoque Heavy", Georgia, serif;
  --schrift-zweit: var(--schrift-text);   /* ehemals kursive Elemente: Karmina aufrecht, hier austauschbar */
  --zweit-gewicht: 400;

  /* Raster (avak.de bei 1440 px) */
  --seite: 1000px;
  --satz: 800px;
  --rand: 32px;

  /* Abstände */
  --kopf-oben: 22px;
  --kopf-unten: 20px;            /* Kopf 72 px hoch, Collagenband beginnt bei 72 px wie auf avak.de */
  --menue-hoch: 0px;             /* Menü steht auf der Grundlinie der Wortmarke (Catherine 11.11.2026) */
  --oben: 148px;                 /* Kopf bis H1, H1 steht bei 220 px wie auf avak.de */
  --oben-start: 148px;
  --absatz: 15px;
  --absatz-weit: 32px;           /* nach Pfeil-Links und zwischen den Adressblöcken im Impressum */
  --vor-fuss: 200px;
  --vor-fuss-kurz: 150px;        /* Artikel und Klärungen enden mit einer Linie */
  --band-oben: 46px;
  --band-unten: 56px;
  --collage-hoehe: 450px;

  /* Hover wie auf avak.de: Farbe wechselt, Laufweite wächst */
  --hover-laufweite: 0.04em;
  --hover-laufweite-titel: 0.02em;

  /* Größen Desktop */
  --t-text: 22px;  --z-text: 1.5;   /* 22 statt 20 px: Karmina hat eine um 8 % kleinere x-Höhe als Literata. Zeilenabstand 1,5 aus dem Regler-Panel */
  --t-h1: 50px;    --t-h1-start: 70px;
  --t-unterzeile: 32px;
  --t-h2: 28px;                  /* Überschriften im selben Maß vergrößert wie der Lesetext (11.11.2026) */
  --t-h3: 26px;                  /* Bold */
  --t-h4: 24px;
  --t-weiter-titel: 26px;        /* Titel beim Weiterblättern (Evoque) */
  --t-klein: 16.5px;             /* Menü, Brotkrumen, Fuß (Regler-Panel 11.11.2026) */
  --t-wortmarke: 20px;
  --t-weiter: 17px;              /* „zum nächsten/vorigen Artikel“ */
  --t-nr: 64px;
  --t-eintrag: 30px;
  --t-teaser: 24px;              /* +9 % gegenüber avak.de (Wunsch Catherine 11.11.2026) */
  --t-teaser-unten: 24px;        /* Regler-Panel 11.11.2026 */
  --t-praxis: 33px;
  --t-frage: 22.5px;
  --t-muschel: 323px;
  --t-portraet: 284px;
  --pfeil-gross: 30px;
  --pfeil-liste: 44px;           /* große Pfeile auf „Ihre Fragen“ */

  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* ---------- Grundlagen ---------- */
.s-artikel { --flaeche: var(--flaeche-artikel); }   /* Artikel ganz auf Weiß, samt Kopf und Handy-Menü */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--flaeche); color: var(--text);
  font-family: var(--schrift-text); font-size: var(--t-text); line-height: var(--z-text);
  letter-spacing: 0.01em; font-kerning: normal; font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
/* Links ohne Unterstreichung. Beim Überfahren: dunkle Links werden Signal, Links in Signal werden gedämpft,
   dazu wächst die Laufweite (gemessen auf avak.de) */
a { color: inherit; text-decoration: none; transition: color .2s ease-in-out, letter-spacing .3s ease; }
a:hover { color: var(--signal); letter-spacing: var(--hover-laufweite); }
/* Links mitten im Fließtext: nur Farbwechsel. Mehr Laufweite würde den Absatz neu umbrechen lassen,
   der Link spränge unter der Maus weg (art.by-avak.de auf Über mich, Entscheidung 11.11.2026) */
main p a:not(.pfeil-link):hover, main li a:hover { letter-spacing: inherit; }
a.signal, .pfeil-link { color: var(--link); }
a.signal:hover, .pfeil-link:hover { color: var(--gedaempft); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
p, li { hyphens: auto; -webkit-hyphens: auto; }
/* Überschriften ohne Trennung (auch nicht an weichen Trennstellen aus dem Text), nur die H1 darf an solchen Stellen trennen,
   damit lange Wörter wie „Datenschutzerklärung“ auf dem Handy passen. Letzte Zeilen ausgeglichen, keine Einzelwörter. */
h1 { hyphens: manual; -webkit-hyphens: manual; }
h2, h3, h4, .unterzeile, .teaser, summary, .richtung { hyphens: none; -webkit-hyphens: none; }
h1, h2, h3, h4, .unterzeile { text-wrap: balance; }
p, li, .teaser, summary, .richtung { text-wrap: pretty; }
.tr { hyphens: manual; -webkit-hyphens: manual; }   /* Wörter mit fester Trennstelle (bau/seiten_bauen.py, TRENNSTELLEN) */
.nobr { white-space: nowrap; }                       /* Adressen wie art.by-avak.de nicht am Bindestrich umbrechen */
p { margin: 0 0 var(--absatz); }
strong { font-weight: 700; }
.kap { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
span.kap { hyphens: none; -webkit-hyphens: none; }   /* Abkürzungen wie DSGVO nicht trennen */

.huelle { max-width: calc(var(--seite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.satz { max-width: var(--satz); }

.sprung { position: absolute; left: var(--rand); top: -60px; background: var(--text); color: var(--flaeche); padding: 8px 14px; font-size: var(--t-klein); z-index: 30; }
.sprung:focus { top: 8px; }


/* ---------- Pfeile (gezeichnete Form von avak.de, Strich 2,5, runde Enden) ---------- */
.pfeil-link::before, .pfeil-gross, summary::before {
  content: ""; display: inline-block; flex: none; background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat;
}
.pfeil-zeile { margin: -10px 0 var(--absatz-weit); }
.pfeil-link { display: inline-flex; gap: 10px; align-items: baseline; line-height: 1.5; }
.pfeil-link::before { width: 0.8em; height: 0.8em; align-self: center; }
.pfeil-gross { width: var(--pfeil-gross); height: var(--pfeil-gross); color: var(--text); transition: color .2s ease-in-out; }
.pfeil-gross:hover, .eintrag:has(h2 a:hover) .pfeil-gross, .blaettern div:has(h2 a:hover) .pfeil-gross { color: var(--signal); }

/* ---------- Kopf ---------- */
.kopf-innen { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--kopf-oben); padding-bottom: var(--kopf-unten); }
.wortmarke { font-family: var(--schrift-titel); font-size: var(--t-wortmarke); line-height: 1.5; letter-spacing: 0.01em; }
.wortmarke:hover { color: inherit; letter-spacing: 0.01em; }
.menue ul { list-style: none; margin: var(--menue-hoch) 0 0; padding: 0; display: flex; gap: 20px; font-size: var(--t-klein); line-height: 1.9; }
.menue a[aria-current] { color: var(--gedaempft); }
.menue-knopf, .menue-zu { display: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.menue-schleier { display: none; }

/* ---------- Überschriften ---------- */
h1 { font-family: var(--schrift-titel); font-weight: 400; font-size: var(--t-h1); line-height: 1; letter-spacing: 0.01em; margin: 0 0 10px; }
.unterzeile { font-family: var(--schrift-zweit); font-weight: var(--zweit-gewicht); font-size: var(--t-unterzeile); line-height: 1.4; margin: 0 0 var(--absatz); }
main h2 { font-weight: 700; font-size: var(--t-h2); line-height: 1.4; margin: 40px 0 13px; }
main h3 { font-family: var(--schrift-text); font-weight: 700; font-size: var(--t-h3); line-height: 1.3; margin: 36px 0 12px; }
main h4 { font-family: var(--schrift-zweit); font-weight: var(--zweit-gewicht); font-size: var(--t-h4); line-height: 1.3; margin: 33px 0 11px; }
main h2 + h3, main h3 + h4 { margin-top: 0; }
.unterzeile + h2 { margin-top: 40px; }

/* ---------- Seiten ---------- */
.seite { padding-top: var(--oben); padding-bottom: var(--vor-fuss); }
.seite.start { padding-top: var(--oben-start); }
.seite.artikel { padding-top: 0; padding-bottom: var(--vor-fuss-kurz); }
.seite.klaerungen { padding-bottom: var(--vor-fuss-kurz); }

/* Startseite: H1 und Unterzeile links, Muschel rechts */
.kopf-mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.start .kopf-mit-bild { margin-bottom: 90px; }
.start h1 { font-size: var(--t-h1-start); line-height: 1; margin-bottom: 26px; }
.start .unterzeile { margin: 0; max-width: 645px; }
.muschel { width: var(--t-muschel); }
.einstieg .punkt { margin-bottom: 6px; }
.einstieg .pfeil-zeile { margin: 0 0 var(--absatz-weit); }

/* Über mich: Porträt rechts neben der H1, Absätze mit weitem Abstand */
.ueber-mich .kopf-mit-bild { align-items: start; margin-bottom: 37px; }
.ueber-mich .unterzeile { margin: 0; }
.portraet { width: var(--t-portraet); }
.satz.weit p:last-child { margin-bottom: 0; }
.recht ul { margin-bottom: var(--absatz); }
.impressum p { margin-bottom: var(--absatz-weit); }
.recht h1 { margin-bottom: 25px; }
.recht h2 { margin-top: 39px; }
.recht h1 + h2 { margin-top: 0; }
.recht ul { padding-left: 40px; }
.recht a { overflow-wrap: anywhere; }

/* Dunkle Sektionen über die volle Breite */
.band-dunkel { background: var(--dunkel); color: var(--text-auf-dunkel); margin: var(--band-oben) 0 var(--band-unten); }
.band-bild img { width: 100%; }
.band-text { padding: 45px 0 50px; margin: 25px 0 60px; }
.band-text h2 { margin-top: 0; }
.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: var(--satz); margin-top: var(--absatz-weit); }
.galerie img { width: 100%; }

/* Ihre Fragen: Übersicht der Klärungen */
.klaerungen-kopf { padding-bottom: 38px; }
.klaerungen-kopf .unterzeile { margin: 0; }
.liste { border-top: var(--linie-liste-staerke) solid var(--linie-liste); }
.eintrag { border-bottom: var(--linie-liste-staerke) solid var(--linie-liste); }
.eintrag-innen { display: grid; grid-template-columns: 126px minmax(0, 744px) 1fr; padding-top: 20px; padding-bottom: 26px; }
.eintrag .nr { font-family: var(--schrift-titel); color: var(--signal); font-size: var(--t-nr); line-height: 1; margin: 4px 0 0; letter-spacing: 0; }
.eintrag h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: var(--t-eintrag); line-height: 1.4; margin: 0; }
.eintrag .teaser { font-family: var(--schrift-text); font-weight: 700; font-size: var(--t-text); line-height: 1.3; margin: 0 0 11px; }   /* Textgröße, fett (Catherine 12.11.2026) */
.eintrag-text p:last-child { margin-bottom: 0; }
.eintrag h2 a:hover, .blaettern h2 a:hover { letter-spacing: var(--hover-laufweite-titel); }
.eintrag .pfeil-gross { justify-self: end; width: var(--pfeil-liste); height: var(--pfeil-liste); margin-top: 0; }

.fragen { padding: 100px 0 80px; }   /* ohne Linie über dem Fuß (Catherine 12.11.2026) */
.fragen h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: var(--t-praxis); line-height: 1.4; margin: 0 0 20px; }
details { margin: 0 0 25px; }
summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--schrift-text); font-weight: 700; font-size: var(--t-frage); line-height: 1.4; transition: color .2s ease-in-out; }
summary::-webkit-details-marker { display: none; }
summary::before { width: 1.05em; height: 1.05em; margin-top: 0.175em; /* mittig auf der ersten Zeile (Zeilenhöhe 1,4em) */ transform: rotate(90deg); transition: transform .2s ease; }
details[open] summary::before { transform: rotate(-90deg); }
summary:hover { color: var(--signal); }
.antwort { padding: 12px 0 6px calc(1.05em + 6px); }
.antwort p:last-child { margin-bottom: 0; }

/* Artikel: Collage als Band, Brotkrumen, Weiterblättern zwischen zwei Linien */
.collage { height: var(--collage-hoehe); background-position: center; background-size: auto 100%; background-repeat: repeat-x; background-color: var(--dunkel); }
.krumen { font-size: var(--t-klein); line-height: 1.6; padding-top: 14px; padding-bottom: 105px; }
.artikel h1 { margin-bottom: 26px; }
.artikel-text h2 { margin-top: 39px; margin-bottom: 16px; }
.artikel-text .pfeil-zeile { margin-bottom: 0; }
.blaettern { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-top: 50px; }
/* Beide Spalten haben dieselbe Ordnung: Zeile 1 Richtung und Pfeil (gleich hoch), darunter Titel und Teaser.
   align-content: start verhindert, dass die kürzere Spalte ihre Zeilen auseinanderzieht. */
.blaettern-innen { display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding-top: 22px; padding-bottom: 28px; }
.blaettern .richtung { font-family: var(--schrift-zweit); font-weight: var(--zweit-gewicht); font-size: var(--t-weiter); line-height: 1.4; margin: 0; }
.blaettern h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: var(--t-weiter-titel); line-height: 1.3; margin: 14px 0 6px; }
.blaettern .teaser { font-family: var(--schrift-zweit); font-weight: var(--zweit-gewicht); font-size: var(--t-teaser-unten); line-height: 1.3; margin: 0; }
.blaettern .zurueck, .blaettern .vor { display: grid; grid-template-rows: var(--pfeil-gross) auto auto; align-content: start; align-items: center; max-width: 500px; }
.blaettern h2, .blaettern .teaser { align-self: start; }
.blaettern .zurueck { grid-column: 1; padding-right: 40px; grid-template-columns: 83px 1fr; grid-template-areas: "pfeil richtung" "titel titel" "teaser teaser"; }
.blaettern .vor { grid-column: 2; grid-template-columns: 1fr auto; grid-template-areas: "richtung pfeil" "titel titel" "teaser teaser"; }
.blaettern .richtung { grid-area: richtung; }
.blaettern .pfeil-gross { grid-area: pfeil; }
.blaettern .zurueck .pfeil-gross { transform: rotate(180deg); }
.blaettern h2 { grid-area: titel; }
.blaettern .teaser { grid-area: teaser; }

/* ---------- Fuß ---------- */
.fuss { padding-bottom: 32px; font-size: var(--t-klein); line-height: 1.6; }
.fuss ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fuss .signal { color: var(--link); }
.fuss .notiz { font-family: var(--schrift-zweit); font-weight: var(--zweit-gewicht); margin: 0; }

/* ---------- Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Zwischengrößen ---------- */
@media (max-width: 1080px) {
  .eintrag-innen { grid-template-columns: 110px minmax(0, 1fr) 60px; }
}

/* ---------- Handy (avak.de bei 390 px) ---------- */
@media (max-width: 760px) {
  :root {
    --t-text: 18px; --z-text: 1.45;   /* kurze Zeilen, engerer Zeilenabstand (Catherine 11.11.2026) */
    --absatz: 12px;
    --t-klein: 16px;
    --pfeil-liste: 34px;
    --t-h1: 32px; --t-h1-start: 41px;
    --t-unterzeile: 28px;
    --t-h2: 21px; --t-h3: 19.5px; --t-h4: 19px; --t-weiter-titel: 19px;
    --t-wortmarke: 17px;
    --t-weiter: 15px;
    --t-nr: 40px; --t-eintrag: 28px; --t-teaser: 20.5px; --t-teaser-unten: 20.5px;
    --t-praxis: 26px; --t-frage: 19px;
    --t-muschel: 300px; --t-portraet: 250px;
    --pfeil-gross: 26px;
    --kopf-oben: 22px; --kopf-unten: 14px; --menue-hoch: 0px;
    --oben: 46px; --oben-start: 76px;
    --vor-fuss: 120px; --vor-fuss-kurz: 100px;
    --band-oben: 36px; --band-unten: 40px;
    --collage-hoehe: 330px;
  }
  .kopf-innen { align-items: baseline; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-klein); }
  .menue-knopf svg { fill: currentColor; }
  .menue {
    position: fixed; top: 0; right: 0; bottom: 0; width: 60%; max-width: 320px; z-index: 20;
    background: var(--flaeche); padding: 20px 32px 32px; overflow-y: auto;
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
  }
  .menue-offen .menue { transform: none; visibility: visible; transition: transform .25s ease; }
  .menue-zu { display: block; margin-left: auto; padding: 4px; }
  .menue ul { flex-direction: column; gap: 0; margin-top: 30px; font-size: 18px; line-height: 1.6; }
  .menue a { display: block; padding: 17px 0; line-height: 26px; }
  .menue-schleier { display: block; position: fixed; inset: 0; background: var(--schleier); z-index: 19; }
  .menue-schleier[hidden] { display: none; }

  .kopf-mit-bild { grid-template-columns: 1fr; gap: 32px; }
  .start .kopf-mit-bild { margin-bottom: 60px; }
  .start .unterzeile { line-height: 1.3; }
  .ueber-mich .kopf-mit-bild { gap: 34px; margin-bottom: 28px; }
  .galerie { grid-template-columns: 1fr; gap: 20px; }
  .band-text { padding: 40px 0 40px; }
  .recht ul { padding-left: 24px; }

  .eintrag-innen { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 28px; }
  .eintrag .nr { margin: 0 0 10px; }
  .eintrag-innen { grid-template-columns: 1fr auto; }
  .eintrag .nr { grid-column: 1; grid-row: 1; }
  .eintrag .pfeil-gross { grid-column: 2; grid-row: 1; align-self: center; }
  .eintrag-text { grid-column: 1 / -1; grid-row: 2; }
  .fragen { padding: 70px 0 60px; }
  .krumen { padding-bottom: 50px; }
  .artikel h1 { margin-bottom: 20px; }
  .artikel-text h2 { margin-top: 28px; }

  .blaettern-innen { grid-template-columns: 1fr; gap: 34px; }
  .blaettern .vor { grid-column: 1; }
  .blaettern .zurueck { grid-template-columns: 50px 1fr; }
}