/* UmgebLETTERt – gemeinsamer Stil für Start, Roetgen, Online und Unterlagen */
:root {
  --papier: #F6F1E6;
  --papier-tief: #EFE8D9;
  --text: #221F1B;
  --text-zweit: #6C665C;
  --haarlinie: #CFC6B4;
  --terrakotta: #B24A2E;

  /* Farben der drei Bereiche */
  --roetgen: #B24A2E;
  --roetgen-flaeche: #F3E1D8;
  --online: #3C5A73;
  --online-flaeche: #DFE6EC;
  --unterlagen: #4F6B5B;
  --unterlagen-flaeche: #E0E8DF;

  /* Farben der drei Themen */
  --ton-1: #A66A28;
  --ton-2: #4F6B5B;
  --ton-3: #3C5A73;

  --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-text: "EB Garamond", Georgia, "Times New Roman", serif;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --mass: 52rem;
  --akzent: var(--terrakotta);
  --akzent-flaeche: var(--papier-tief);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #18160F;
    --papier-tief: #211E16;
    --text: #EFE8D8;
    --text-zweit: #A39B8E;
    --haarlinie: #3B362B;
    --terrakotta: #DE7854;
    --roetgen: #DE7854;
    --roetgen-flaeche: #2B1D16;
    --online: #8FB0C6;
    --online-flaeche: #172129;
    --unterlagen: #8DB39D;
    --unterlagen-flaeche: #18231C;
    --ton-1: #D79A4E;
    --ton-2: #8DB39D;
    --ton-3: #8FB0C6;
  }
}
:root[data-theme="dark"] {
  --papier: #18160F;
  --papier-tief: #211E16;
  --text: #EFE8D8;
  --text-zweit: #A39B8E;
  --haarlinie: #3B362B;
  --terrakotta: #DE7854;
  --roetgen: #DE7854;
  --roetgen-flaeche: #2B1D16;
  --online: #8FB0C6;
  --online-flaeche: #172129;
  --unterlagen: #8DB39D;
  --unterlagen-flaeche: #18231C;
  --ton-1: #D79A4E;
  --ton-2: #8DB39D;
  --ton-3: #8FB0C6;
}

/* Jede Seite trägt ihre Bereichsfarbe */
body.bereich-roetgen { --akzent: var(--roetgen); --akzent-flaeche: var(--roetgen-flaeche); }
body.bereich-online { --akzent: var(--online); --akzent-flaeche: var(--online-flaeche); }
body.bereich-unterlagen { --akzent: var(--unterlagen); --akzent-flaeche: var(--unterlagen-flaeche); }

* { box-sizing: border-box; }

body {
  background: var(--papier);
  color: var(--text);
  font-family: var(--serif-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.huelle {
  max-width: var(--mass);
  margin-inline: auto;
  padding-inline: max(16px, 4vw);
}

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.rubrik {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-zweit);
  margin: 0;
}
.rubrik.farbig { color: var(--akzent); }

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.75rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.4rem 1.1rem;
  border-bottom: 1px solid var(--haarlinie);
}
.marke-oben {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.marke-oben span { font-weight: 600; color: var(--terrakotta); }
.kopfleiste nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.kopfleiste nav a {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-zweit);
  text-decoration: none;
  padding: 0.35rem 0 3px;
  border-bottom: 2px solid transparent;
}
.kopfleiste nav a.n-roetgen { --f: var(--roetgen); }
.kopfleiste nav a.n-online { --f: var(--online); }
.kopfleiste nav a.n-unterlagen { --f: var(--unterlagen); }
.kopfleiste nav a.n-brief { --f: var(--terrakotta); }
.kopfleiste nav a:hover,
.kopfleiste nav a:focus-visible,
.kopfleiste nav a[aria-current="page"] { color: var(--f); border-bottom-color: var(--f); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf {
  margin-top: 1.6rem;
  background: var(--akzent-flaeche);
  border-top: 4px solid var(--akzent);
  padding: 2rem clamp(1.1rem, 4vw, 2.2rem) 2.1rem;
}
.seitenkopf h1 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0.7rem 0 0;
  text-wrap: balance;
}
.seitenkopf .unterzeile {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text-zweit);
  margin: 0.8rem 0 0;
  max-width: 40ch;
}

/* ---------- Aufschlag der Startseite ---------- */
.aufschlag { padding-block: 3rem 2.2rem; }
.aufschlag h1 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 8vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0.9rem 0 0;
  text-wrap: balance;
}
.aufschlag .anriss {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  margin: 1.1rem 0 0;
  max-width: 36ch;
  text-wrap: balance;
}

/* ---------- Drei Wege auf der Startseite ---------- */
.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  gap: 1.1rem;
  margin-top: 2.4rem;
}
.weg {
  --f: var(--terrakotta);
  --fl: var(--papier-tief);
  display: flex;
  flex-direction: column;
  background: var(--fl);
  border-top: 4px solid var(--f);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.weg.w-roetgen { --f: var(--roetgen); --fl: var(--roetgen-flaeche); }
.weg.w-online { --f: var(--online); --fl: var(--online-flaeche); }
.weg.w-unterlagen { --f: var(--unterlagen); --fl: var(--unterlagen-flaeche); }
.weg .bildleiste {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  padding: 1.3rem 1.4rem 0;
  min-height: 8.6rem;
}
.weg .bildleiste .buch { width: 4.6rem; }
.weg .bildleiste .buch.mini { width: 3.8rem; font-size: 0.5rem; }
.weg.w-roetgen .buch-platzhalter { --b: var(--roetgen); }
.weg.w-online .buch-platzhalter { --b: var(--online); }
.weg .text { padding: 1.1rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.weg .rubrik { color: var(--f); }
.weg h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.42rem;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.weg p { margin: 0; font-size: 1.01rem; color: var(--text-zweit); max-width: none; }
.weg .termin { color: var(--text); font-weight: 500; }
.weg .weiter {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f);
}
.weg:hover .weiter,
.weg:focus-visible .weiter { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Buchcover ---------- */
.buch {
  display: block;
  aspect-ratio: 2 / 3;
  width: 100%;
  box-shadow: 0 2px 10px rgba(34, 31, 27, 0.2);
  background: var(--papier);
}
img.buch { object-fit: cover; height: auto; }
.buch-platzhalter {
  --b: var(--akzent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.7em 0.6em;
  background: var(--b);
  color: #FBF7EE;
  font-size: 0.8rem;
  overflow: hidden;
}
.buch-platzhalter .t {
  font-family: var(--serif-display);
  font-weight: 600;
  line-height: 1.12;
  font-size: 1em;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.buch-platzhalter .a {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.weg .buch-platzhalter { font-size: 0.62rem; }

/* ---------- Abschnitte ---------- */
section { padding-block: 3rem; border-top: 1px solid var(--haarlinie); }
section.ohne-linie { border-top: 0; }
.abschnitt-kopf { margin-bottom: 1.7rem; }
.abschnitt-kopf h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.65rem, 4.4vw, 2.2rem);
  line-height: 1.15;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}
.abschnitt-kopf .unterzeile {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-zweit);
  margin: 0.6rem 0 0;
  max-width: 48ch;
}

/* ---------- Buch im Mittelpunkt (Roetgen, Online) ---------- */
.buchblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 1.4rem 1.6rem;
  align-items: start;
}
@media (min-width: 40rem) { .buchblock { grid-template-columns: minmax(0, 1fr) 10rem; } }
.buchblock h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.12;
  margin: 0.55rem 0 0;
}
.buchblock .autor { font-style: italic; color: var(--text-zweit); margin: 0.35rem 0 0; font-size: 1.08rem; }
.buchblock .meta { font-size: 0.95rem; color: var(--text-zweit); margin: 0.2rem 0 0; }
.buchtext { margin-top: 1.4rem; }
.frage-buch {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.4;
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--akzent);
  max-width: 40ch;
}

/* ---------- Eckdaten ---------- */
.eckdaten {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.6rem;
  background: var(--akzent-flaeche);
  padding: 1.3rem 1.4rem;
}
@media (min-width: 32rem) {
  .eckdaten { grid-template-columns: 9rem 1fr; gap: 0.6rem 1.6rem; }
}
.eckdaten dt {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
  padding-top: 0.45em;
}
.eckdaten dd { margin: 0 0 0.75rem; }
@media (min-width: 32rem) { .eckdaten dd { margin-bottom: 0; } }
.eckdaten .betont { font-weight: 600; }

.merksatz {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  border-left: 3px solid var(--akzent);
  padding: 0.1rem 0 0.1rem 1.2rem;
  margin: 0;
  max-width: 46ch;
}

/* ---------- Anmeldung ---------- */
.mitmachen {
  border-top: 4px solid var(--akzent);
  background: var(--akzent-flaeche);
  padding: 1.6rem clamp(1.1rem, 4vw, 1.8rem);
}
.mitmachen h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.8rem;
}
.knopf {
  display: inline-block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FBF7EE;
  background: var(--akzent);
  padding: 0.95rem 1.4rem;
  text-decoration: none;
  margin-top: 0.4rem;
}
.knopf:hover, .knopf:focus-visible { filter: brightness(1.1); }
.klein { font-size: 0.95rem; color: var(--text-zweit); margin-top: 1rem; }

/* ---------- Leitfrage (Online) ---------- */
.leitfrage { text-align: center; padding: 0.4rem 0; }
.leitfrage .frage {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.25;
  margin: 0.8rem auto 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* ---------- Ablauf in drei Schritten ---------- */
.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.6rem;
}
.schritt { border-top: 1px solid var(--haarlinie); padding-top: 0.9rem; }
.schritt .zahl {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--terrakotta);
  margin: 0;
}
.schritt h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0.35rem 0 0.4rem;
}
.schritt p { margin: 0; font-size: 1rem; color: var(--text-zweit); max-width: none; }

/* ---------- Themen mit Download ---------- */
.themenliste { display: grid; gap: 1.6rem; }
.thema {
  --ton: var(--unterlagen);
  background: var(--papier-tief);
  border-top: 4px solid var(--ton);
  padding: 1.5rem clamp(1.1rem, 4vw, 1.8rem) 1.7rem;
}
.thema .nummer {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ton);
  margin: 0;
}
.thema h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 4.4vw, 1.8rem);
  line-height: 1.2;
  margin: 0.4rem 0 0.4rem;
}
.thema > p { color: var(--text-zweit); margin-bottom: 1.3rem; }
.regal {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.regal li { font-size: 0.95rem; line-height: 1.35; }
.regal .buch-platzhalter { --b: var(--ton); font-size: clamp(0.62rem, 2.2vw, 0.85rem); }
.regal .titel { display: block; font-weight: 500; margin-top: 0.6rem; }
.regal .meta { display: block; color: var(--text-zweit); font-size: 0.88rem; margin-top: 0.15rem; }
a.laden {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FBF7EE;
  background: var(--ton);
  padding: 0.95rem 1.3rem;
  text-decoration: none;
}
:root[data-theme="dark"] a.laden { color: #18160F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.laden { color: #18160F; } }
a.laden span { opacity: 0.8; letter-spacing: 0.1em; }
a.laden:hover, a.laden:focus-visible { filter: brightness(1.08); }

/* ---------- Acht Seiten ---------- */
.blaetter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}
.blatt { border-top: 1px solid var(--haarlinie); padding-top: 0.9rem; }
.blatt .seite {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0;
}
.blatt h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.25;
  margin: 0.35rem 0 0.4rem;
}
.blatt p { margin: 0; font-size: 0.98rem; color: var(--text-zweit); max-width: none; }

ul.themen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  max-width: 46ch;
}
ul.themen li {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.08rem;
  border-bottom: 1px solid var(--haarlinie);
  padding-bottom: 0.55rem;
}

/* ---------- Mail-Link ---------- */
a.post {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------- Der Brief ---------- */
.brief {
  background: var(--text);
  color: var(--papier);
  padding: 2rem clamp(1.1rem, 4vw, 2.2rem) 2.1rem;
  margin-block: 1rem 0;
}
.brief .rubrik { color: #E7A88F; }
:root[data-theme="dark"] .brief .rubrik { color: var(--terrakotta); }
.brief h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  line-height: 1.15;
  margin: 0.5rem 0 0.7rem;
}
.brief p { color: inherit; opacity: 0.92; }
.brief .danach { font-size: 0.95rem; opacity: 0.8; margin-top: 1.3rem; max-width: 54ch; }
.brief a { color: inherit; }
.brief-hinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  background: var(--papier-tief);
  border-left: 4px solid var(--terrakotta);
  padding: 1.2rem 1.4rem;
}
.brief-hinweis p { margin: 0; }
.brief-hinweis a.post { color: var(--terrakotta); }

:where(.sib-form-message-panel) { display: none; }
#brief .sib-form { font-family: var(--serif-text); color: inherit; }
#brief .sib-form,
#brief .sib-form-container,
#brief #sib-container {
  max-width: none; background: transparent; border: 0; padding: 0; margin: 0; text-align: left;
}
#brief .sib-form-block { padding: 0; }
#brief .form__entry { margin-bottom: 1.2rem; }
#brief .entry__label {
  display: block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 1.2rem 0 0.5rem;
}
#brief input.input {
  width: 100%;
  max-width: 26rem;
  font-family: var(--serif-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: #221F1B;
  background: #FBF7EE;
  border: 0;
  border-radius: 0;
  padding: 0.85rem 0.95rem;
}
#brief .sib-optin .entry__label,
#brief .entry__specification { display: none; }
#brief .entry__choice label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.98rem;
  line-height: 1.55;
  cursor: pointer;
  max-width: 50ch;
  opacity: 0.9;
}
#brief .entry__choice input[type="checkbox"] {
  flex: none; width: 1.1rem; height: 1.1rem; margin: 0.3rem 0 0; accent-color: #DE7854;
}
#brief .entry__choice a { border-bottom: 1px solid currentColor; text-decoration: none; }
#brief .sib-form-block__button {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FBF7EE;
  background: #B24A2E;
  border: 0;
  border-radius: 0;
  padding: 1rem 1.9rem;
  cursor: pointer;
}
#brief .sib-form-block__button:hover { filter: brightness(1.1); }
#brief .sib-form-block__button .sib-icon { display: none; }
#brief .entry__error {
  display: block;
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #F0B49C;
  background: transparent;
  border: 0;
  padding: 0.4rem 0 0;
}
#brief .sib-form-message-panel {
  font-size: 1rem;
  line-height: 1.55;
  color: #221F1B;
  background: #FBF7EE;
  border: 0;
  border-left: 3px solid #B24A2E;
  border-radius: 0;
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
  max-width: none;
}
#brief .sib-form-message-panel .sib-icon { display: none; }
#brief .input--hidden { position: absolute; left: -9999px; }

/* ---------- Fuß ---------- */
footer {
  border-top: 1px solid var(--haarlinie);
  margin-top: 3rem;
  padding-block: 1.6rem 3.5rem;
  color: var(--text-zweit);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
}
footer .marke-klein { font-family: var(--serif-display); font-weight: 500; color: var(--text); margin: 0; }
footer .marke-klein span { color: var(--terrakotta); }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
footer nav a { text-decoration: none; border-bottom: 1px solid var(--haarlinie); }
footer nav a:hover, footer nav a:focus-visible { color: var(--terrakotta); border-bottom-color: var(--terrakotta); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Gebunden und Taschenbuch ---------- */
dl.ausgaben {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--text-zweit);
}
dl.ausgaben dt {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0.35rem;
}
dl.ausgaben dd { margin: 0.05rem 0 0; }
dl.ausgaben.gross { font-size: 0.95rem; margin-top: 0.7rem; }
dl.ausgaben.gross dt { font-size: 0.62rem; margin-top: 0.5rem; }

/* ---------- Hinweis auf die Buchhandlung Lesezeichen ---------- */
.laden-hinweis {
  margin-top: 3rem;
  background: var(--papier-tief);
  border: 1px solid var(--haarlinie);
  border-top: 4px solid var(--terrakotta);
  padding: 1.7rem clamp(1.1rem, 4vw, 2rem) 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
}
.laden-hinweis .laden-text { flex: 1 1 26rem; min-width: 0; }
.laden-hinweis .rubrik { color: var(--terrakotta); }
.laden-hinweis h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4.4vw, 1.75rem);
  line-height: 1.2;
  margin: 0.5rem 0 0.7rem;
}
.laden-hinweis p { margin-bottom: 0; }
a.laden-knopf {
  flex: 0 0 auto;
  display: inline-block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FBF7EE;
  background: #B24A2E;
  padding: 1rem 1.4rem;
  text-decoration: none;
}
a.laden-knopf:hover, a.laden-knopf:focus-visible { filter: brightness(1.1); }
.laden-hinweis + footer { margin-top: 2rem; }