/* Basis für die Website von Liebe mit Marie: Schriften lokal, Reset, Typografie nach Guide 2.2 und 2.7,
   Fokus-Zustände, Handy-Grundlinie (mobile-native). Stand 2026-10-28. Braucht tokens.css davor. */

/* Schriften lokal als woff2 (aus reference/marke/schriften/, OFL 1.1), kein Google-Fonts-Link */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/dm-serif-display-regular.a425915947.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/dm-serif-display-italic.890a0c3ed2.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/montserrat-400.26ce0c4e64.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/schriften/montserrat-600.d5fb96ef9f.woff2") format("woff2");
}
/* Montserrat 700 für die Buttons (seit Runde 20, im Stand nach Runde 24 hierher; vorher in R20_CSS) */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/schriften/montserrat-700.972bb304b2.woff2") format("woff2");
}
/* Ersatz für Montserrat, solange sie lädt (Runde 23, 2026-11-01): Helvetica Neue oder Arial auf die Breite von Montserrat gezogen, damit
   Absätze beim Schriftwechsel keine Zeile verlieren. Gemessen an 300 Zeichen Website-Text in Chrome: Montserrat ist 11,5 Prozent breiter als
   Helvetica Neue (Arial 12,3), halbfett 8,3, fett 10,3. DM Serif und Georgia sind gleich breit (99,5 Prozent), dafür braucht es keinen Ersatz. */
@font-face {
  font-family: "Montserrat Ersatz";
  font-weight: 400;
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT");
  size-adjust: 111.5%;
}
@font-face {
  font-family: "Montserrat Ersatz";
  font-weight: 600 700;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 109%;
}

/* Reset, knapp */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--abstand-5);
  background: var(--grund);
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--sans);
  font-size: var(--groesse-text);
  font-weight: 400;
  line-height: var(--zeile-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin-top: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Überschriften: DM Serif Display, nur groß, Hierarchie über Größe (Guide 2.1, 2.2) */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--schrift);
  text-wrap: balance;
  hyphens: manual;
}
h1, .h1 { font-size: var(--groesse-h1); line-height: var(--zeile-h1); margin-bottom: var(--abstand-3); }
h2, .h2 { font-size: var(--groesse-h2); line-height: var(--zeile-h2); margin-bottom: var(--abstand-3); }
h3, .h3 { font-size: var(--groesse-h3); line-height: var(--zeile-h3); margin-bottom: var(--abstand-2); }

/* Fließtext: linksbündig, kein Blocksatz, keine Silbentrennung, höchstens 620 px (Guide 2.7, Richtung 2) */
p, li, blockquote { max-width: var(--breite-text); hyphens: manual; }
p { margin-bottom: var(--abstand-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: normal; } /* kein kursives Akzentwort (Richtung 4); Kursiv nur im Zitat über .zitat */

.nebentext {
  font-size: var(--groesse-nebentext);
  line-height: var(--zeile-nebentext);
  color: var(--nebentext);
}

/* Aufzählungspunkte in Rose (Guide 2.7) */
ul:not([class]) { padding-left: 1.2em; }
ul:not([class]) li::marker { color: var(--akzent); }

/* Links im Fließtext: Guide 1.3 nennt Rose unterstrichen; Rose auf Creme hat 3,7:1 und reicht bei 18 px nicht.
   Vorschlag (Plan B, Korrektur 2): Schrift Bordeaux, Linie Rose. Entscheidung Marie offen. */
a { color: var(--schrift); text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* Fokus sichtbar an jedem Link, Button und Feld (Checkliste) */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: var(--radius); }

/* Sprunglink „Zum Inhalt“ */
.sprunglink {
  position: absolute; left: var(--rand); top: -100px;
  padding: var(--abstand-1) var(--abstand-2);
  background: var(--rose); color: var(--creme); font-weight: 600; z-index: 10;
}
.sprunglink:focus { top: var(--abstand-1); }

/* Bewegung nur, wenn die Nutzerin sie zulässt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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