/* Gestaltung der Inhaltsseiten (31.08.2026).
 *
 * Eigene Datei statt Inline-CSS je Seite: Drei Seiten teilen dasselbe
 * Aussehen, und eine vierte kommt vermutlich dazu. Drei Kopien desselben
 * Blocks waeren die Stelle, an der spaeter genau zwei davon geaendert werden.
 *
 * Die Rechtsseiten (agb, datenschutz, impressum, widerruf) bleiben bewusst
 * unangetastet: Die sind hell und schlicht, weil sie gelesen und nicht
 * verkauft werden. Diese Seiten hier gehoeren zur Startseite - dieselbe
 * Bildwelt "Nachtfest", dieselben Schriften, damit ein Besucher aus der
 * Google-Suche nicht auf einer fremd wirkenden Seite landet.
 *
 * Schriftgroessen: ausschliesslich Stufen der Leiter aus DESIGN.md
 * ("The Ramp-Has-No-Exceptions Rule" - ein Literal ist immer ein Fehler).
 * Die Leiter ist hier wiederholt, weil diese Seiten das Stylesheet der
 * Startseite nicht laden; die Werte sind zeichengleich uebernommen.
 */

/* ---------- Schriften, selbst gehostet (wie auf der Startseite) ---------- */
@font-face {
  font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/gloock-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/karla-latin.woff2') format('woff2');
}

:root {
  --nacht: #0E121A;
  --karte: #161C27;
  --linie: #28313F;
  --creme: #F4F0E6;
  --text: #C3C9D4;
  --gedaempft: #8590A2;
  --messing: #C9A227;
  --messing-hell: #E8C766;
  --auf-messing: #14180F;

  /* Schriftleiter, siehe DESIGN.md */
  --fs-klein: .84rem;
  --fs-kompakt: .94rem;
  --fs-basis: 1rem;
  --fs-lead: 1.12rem;
  --fs-titel-s: 1.3rem;
  --fs-titel: 1.5rem;
  --fs-titel-fluid: clamp(1.4rem, 2.8vw, 1.9rem);
  --fs-headline: clamp(2rem, 4.6vw, 3.1rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font-family: 'Karla', -apple-system, system-ui, sans-serif;
  font-size: var(--fs-basis);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- Kopfzeile ---------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 24px;
  border-bottom: 1px solid var(--linie);
}
/* Wortmarke als Bild, wie auf der Startseite: eigenes Zeichen im G, eigene
   Schrift - beides liesse sich mit Gloock nicht nachstellen. */
.marke { display: flex; align-items: center; text-decoration: none; }
.marke img { height: 20px; width: auto; display: block; }
.zurueck { color: var(--messing); text-decoration: none; font-size: var(--fs-klein); }
.zurueck:hover { text-decoration: underline; }

/* ---------- Fliesstext ---------- */
main { padding: 52px 0 72px; }

h1 {
  font-family: 'Gloock', Georgia, serif; font-weight: 400;
  font-size: var(--fs-headline); line-height: 1.06;
  color: var(--creme); margin: 0 0 18px; letter-spacing: -.01em;
}
.vorspann {
  font-size: var(--fs-lead); line-height: 1.65; color: var(--creme);
  margin: 0 0 38px;
}
h2 {
  font-family: 'Gloock', Georgia, serif; font-weight: 400;
  font-size: var(--fs-titel-fluid); line-height: 1.15;
  color: var(--creme); margin: 46px 0 14px;
}
h3 {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: var(--fs-basis);
  color: var(--creme); margin: 28px 0 6px;
}
p { margin: 0 0 15px; }
a { color: var(--messing-hell); }
strong { color: var(--creme); font-weight: 700; }

ul { margin: 0 0 18px; padding: 0; list-style: none; }
ul li { position: relative; padding-left: 22px; margin: 0 0 9px; }
/* Der Punkt ist gezeichnet statt als Listenpunkt gesetzt: Nur so laesst er
   sich in Messing faerben, ohne das ganze <li> einzufaerben. */
ul li::before {
  content: ''; position: absolute; left: 2px; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--messing);
}

/* ---------- Schritte ---------- */
.schritte { counter-reset: schritt; margin: 26px 0 30px; }
.schritt { position: relative; padding-left: 56px; margin: 0 0 24px; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Gloock', Georgia, serif; font-size: var(--fs-basis);
  color: var(--auf-messing);
  background: linear-gradient(135deg, var(--messing-hell), var(--messing));
}
.schritt h3 { margin: 0 0 4px; }
.schritt p { margin: 0; }

/* ---------- Fragen ---------- */
.frage { border-top: 1px solid var(--linie); padding: 20px 0 4px; }
.frage:last-of-type { border-bottom: 1px solid var(--linie); margin-bottom: 34px; }
.frage h3 {
  margin: 0 0 6px; font-size: var(--fs-titel-s);
  font-family: 'Gloock', Georgia, serif; font-weight: 400; line-height: 1.3;
}

/* ---------- Aufforderung ---------- */
.aufruf {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 16px; padding: 30px 28px; margin: 46px 0 0;
}
.aufruf h2 { margin: 0 0 8px; }
.aufruf p { margin: 0 0 20px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: var(--fs-kompakt);
  padding: 13px 26px; border-radius: 999px; border: none;
  text-decoration: none; color: var(--auf-messing);
  background: linear-gradient(135deg, var(--messing-hell), var(--messing));
  transition: transform .24s cubic-bezier(.2,.7,.3,1), filter .24s ease;
}
.knopf:hover { transform: translateY(-1px); filter: brightness(1.05); }
.knopf.leise {
  background: none; color: var(--messing-hell);
  border: 1px solid var(--linie);
}

/* ---------- Verwandte Seiten ---------- */
.weiter { margin: 44px 0 0; padding: 24px 0 0; border-top: 1px solid var(--linie); }
.weiter h2 { font-size: var(--fs-titel-s); margin: 0 0 10px; }

/* ---------- Fusszeile ---------- */
/* Hier steht die vollstaendige Marke samt Claim: In der Kopfzeile waere der
   Claim in Schriftgroesse 6 gelandet und niemand haette ihn gelesen. */
.fuss-logo { display: block; width: 168px; height: auto; margin: 0 0 16px; }
.fuss {
  border-top: 1px solid var(--linie); margin-top: 56px;
  padding: 26px 24px 40px; font-size: var(--fs-klein); color: var(--gedaempft);
}
.fuss .wrap { padding: 0; }
.fuss a { color: var(--gedaempft); text-decoration: none; margin-right: 16px; }
.fuss a:hover { color: var(--messing-hell); text-decoration: underline; }
.fuss p { margin: 14px 0 0; }

@media (max-width: 560px) {
  main { padding: 38px 0 56px; }
  .aufruf { padding: 24px 20px; }
}