/* FUNDAMENT · gemeinsame Gestaltung für alle drei Seiten.
 * Wird NACH dem Seiten-Stylesheet geladen, danach die Charakter-Datei. */

/* === 1  Maße === */
:root {
  --schrift:        'PlusJakartaSans', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --handschrift:    'Satisfy', 'PlusJakartaSans', 'Plus Jakarta Sans', sans-serif; /* nie 'cursive': das wäre Comic Sans */

  --stufe-fein:     .875rem;                                    /* 14 px */
  --stufe-klein:    .9375rem;                                   /* 15 px */
  --stufe-text:     1.125rem;                                   /* 18 px */
  --stufe-hebung:   clamp(1.25rem, 1.15rem + .45vw, 1.4375rem); /* 20–23 px */
  --stufe-titel-3:  clamp(1.375rem, 1.25rem + .6vw, 1.625rem);  /* 22–26 px */
  --stufe-titel-2:  clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);   /* 28–42 px */
  --stufe-titel-1:  clamp(2.25rem, 1.5rem + 3.4vw, 4rem);       /* 36–64 px */
  --stufe-hand:     clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);    /* Handschrift */

  --zeile-text:     1.65;
  --zeile-titel:    1.15;

  --lesespalte:     36rem;   /* ≈ 62–68 Zeichen bei 18 px */
  --breite:         76rem;
  --rand:           clamp(1.25rem, .8rem + 2vw, 2.5rem);

  /* Abstände auf 8-px-Basis: Was zusammengehört, steht eng. */
  --a1: .5rem;  --a2: 1rem;  --a3: 1.5rem;  --a4: 2rem;
  --a5: 3rem;   --a6: 4.5rem; --a7: 7rem;
  --abschnitt-luft: clamp(4rem, 2.5rem + 5vw, 7.5rem);

  /* Alte Namen zeigen auf das neue Raster. */
  --luft-klein: var(--a3);
  --luft:       var(--a5);
  --luft-gross: var(--abschnitt-luft);

  --sanft: cubic-bezier(.2, .7, .2, 1);
}

/* === 2  Fließtext === */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--schrift);
  font-size: var(--stufe-text);
  font-weight: 400;              /* nicht 300 */
  line-height: var(--zeile-text);
  color: var(--tinte);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
p, li, dd, blockquote, figcaption, summary { text-wrap: pretty; }
main p, main li {
  hyphens: auto;                 /* braucht <html lang="de"> */
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
p { margin: 0 0 1em; max-width: var(--lesespalte); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
small, .leise, .beleg, .wagemut { font-size: var(--stufe-klein); line-height: 1.55; }

/* === 3  Titel: wenig Abstand nach unten, viel nach oben === */
h1, h2, h3, h4 {
  font-family: var(--schrift);
  line-height: var(--zeile-titel);
  text-wrap: balance;
  margin: 0 0 var(--a3);
  hyphens: manual;
}
h1 { font-size: var(--stufe-titel-1); letter-spacing: -.025em; }
h2 { font-size: var(--stufe-titel-2); letter-spacing: -.018em; }
h3 { font-size: var(--stufe-titel-3); letter-spacing: -.01em; margin-bottom: var(--a2); }
h4 { font-size: var(--stufe-text);    letter-spacing: 0;      margin-bottom: var(--a1); }
* + h2 { margin-top: var(--a6); }
* + h3 { margin-top: var(--a5); }
* + h4 { margin-top: var(--a4); }
.abschnitt > .spalte > h2:first-child,
.zweispalter-text > :first-child,
.lesespalte > :first-child,
.raum > :first-child { margin-top: 0; }

/* === 4  Gehobene Sätze === */
.leitsatz, blockquote { font-size: var(--stufe-hebung); line-height: 1.45; max-width: 32rem; }
blockquote { margin: var(--a5) 0; padding: 0 0 0 var(--a3); }
blockquote p { max-width: none; }
blockquote cite, blockquote footer {
  display: block; margin-top: var(--a2);
  font-size: var(--stufe-klein); font-style: normal; color: var(--dunkelgrau);
}

/* === 5  Abschnitte und Raster === */
.abschnitt { padding-block: var(--abschnitt-luft); }
.spalte { max-width: calc(var(--breite) + 2 * var(--rand)); padding-inline: var(--rand); }

/* Muster 1 Doppelseite: 7 : 5. Reihenfolge bleibt wie in den Seiten-Stylesheets. */
.zweispalter { display: flex; align-items: flex-start; gap: clamp(var(--a4), 1rem + 4vw, var(--a7)); }
.zweispalter > * { min-width: 0; }
.zweispalter > .zweispalter-text { flex: 5 1 0; max-width: var(--lesespalte); }
.zweispalter > :not(.zweispalter-text) { flex: 7 1 0; }
@media (min-width: 901px) {
  /* Das Bild läuft beim Lesen mit. */
  .zweispalter > :not(.zweispalter-text) { position: sticky; top: calc(var(--kopfhoehe, 5rem) + var(--a4)); }
}
/* Muster 2 Einstieg: 6 : 6. */
.zweispalter.text-zuerst > * { flex: 1 1 0; }
@media (max-width: 900px) {
  .zweispalter { flex-direction: column; align-items: stretch; gap: var(--a4); }
  .zweispalter > * { flex: none; }
  .zweispalter > .zweispalter-text { max-width: none; }
}

/* Muster 3 Lesestrecke: Titel links, Text rechts. */
@media (min-width: 901px) {
  .lesestrecke {
    display: grid;
    grid-template-columns: minmax(14rem, 5fr) minmax(0, 7fr);
    column-gap: clamp(var(--a4), 1rem + 4vw, var(--a7));
  }
  .lesespalte.lesestrecke { max-width: none; }
  .spalte-schmal.lesestrecke { max-width: calc(var(--breite) + 2 * var(--rand)); }
  .lesestrecke > * { grid-column: 2; max-width: var(--lesespalte); }
  .lesestrecke > h2:first-child,
  .lesestrecke > .sprungmarke:first-child + h2 {
    grid-column: 1; grid-row: 1 / span 40; align-self: start; max-width: 22rem; margin-top: 0;
  }
  /* Ohne Bild bleibt der Titel beim Lesen stehen. */
  .lesestrecke:not(:has(> figure, > .collage)) > h2:first-child {
    position: sticky; top: calc(var(--kopfhoehe, 5rem) + var(--a4));
  }
  .lesestrecke > .sprungmarke { grid-column: 1; }
  .lesestrecke > h2:first-child + * { margin-top: 0; }
  /* Muster 4: Bilder brechen aus, ganze Breite. */
  .lesestrecke > figure,
  .lesestrecke > .collage { grid-column: 1 / -1; max-width: none; justify-self: center; margin-block: var(--a6); }
}

/* === 6  Bilder === */
figure { margin: 0; }
figure img, .collage img { display: block; }
/* Sicherheitsnetz: übrig gebliebene Bildzeilen unsichtbar (die figcaption soll aus dem HTML raus). */
figcaption:not(.bildzeile-sichtbar) {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
figcaption.bildzeile-sichtbar {
  margin-top: var(--a1); font-size: var(--stufe-fein); line-height: 1.45;
  color: var(--dunkelgrau); max-width: var(--lesespalte);
}
.bild-allein { margin: var(--a6) auto; max-width: min(100%, 60rem); }
.bild-allein img { width: auto; max-width: 100%; max-height: 82vh; margin-inline: auto; }

/* === 7  Knöpfe und Links === */
a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
.knopf {
  font-family: var(--schrift); font-size: var(--stufe-klein); font-weight: 600; letter-spacing: .01em;
  padding: .8rem 1.5rem; min-height: 2.75rem;
  transition: background-color .25s var(--sanft), color .25s var(--sanft),
              border-color .25s var(--sanft), transform .25s var(--sanft);
}
.knopf:hover, .knopf:focus-visible { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }
.knopfreihe { gap: var(--a2) var(--a3); margin-top: var(--a4); }

/* === 8  Aufklapper === */
.aufklapp > summary { font-size: var(--stufe-text); font-weight: 600; padding-block: var(--a3); line-height: 1.4; }
.aufklapp > summary::before,
.aufklapp > summary::after { transition: transform .3s var(--sanft); }
.aufklapp-inhalt, .aufklapp > div { padding-bottom: var(--a4); }

/* === 9  Die Handschrift: nur für den Leitsatz === */
.handschrift, .fuss-leitsatz, .motto {
  font-family: var(--handschrift); font-size: var(--stufe-hand);
  font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.25; text-wrap: balance;
}

/* === 10  Ankommen (dazu ankommen.js) === */
@media (prefers-reduced-motion: no-preference) {
  .js-ankommen .ankommen {
    opacity: 0; transform: translateY(14px);
    transition: opacity .9s var(--sanft), transform .9s var(--sanft);
  }
  .js-ankommen .ankommen.ist-da { opacity: 1; transform: none; }
}

/* === 11  Kopf: dieselbe Kante wie der Inhalt === */
.kopf-innen, .kopfzeile, .kopf-claim, .fuss-innen {
  max-width: calc(var(--breite) + 2 * var(--rand)); padding-inline: var(--rand); margin-inline: auto;
}
.marke b, .marke > a:first-child, .marke a { font-size: var(--stufe-hebung); letter-spacing: -.01em; }
.marke span, .marke span a { font-size: var(--stufe-fein); }
.hauptmenue { font-size: var(--stufe-klein); }
.menue-schalter { font-size: var(--stufe-klein); }

/* === 12  Fuß === */
footer p, footer li { font-size: var(--stufe-klein); }
footer h2, footer h3 { margin-top: 0; }