/* Hanna Sonnberg · Bastelseite /stern/
   Farben und Schriften aus dem Designsystem „Abend in Glöckelbach“ (Social-Media-Konzept, 31.10.2026, noch vorläufig).
   Hell und winterlich; Sterngold nur für Flächen und Linien, für Text das dunkle Gold. */

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --nacht: #1C2B48;
  --gold: #E2A93B;
  --gold-hell: #FBF0D6;
  --gold-dunkel: #8A5A0B;
  --schnee: #F5F7FA;
  --eis: #E6EEF7;
  --leise: #45546E;
  --linie: #D9E1EA;
  --weiss: #FFFFFF;

  --titel: "Baloo 2", "Trebuchet MS", sans-serif;
  --text: "Nunito", "Segoe UI", sans-serif;

  --rand: 20px;
  --breite: 1040px;
  --abstand: clamp(2.75rem, 8vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--schnee); color: var(--nacht); font: 400 1.0625rem/1.6 var(--text); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titel); line-height: 1.08; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--nacht); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--nacht); }
:focus-visible { outline: 3px solid var(--gold-dunkel); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold-hell); }

.sprung { position: absolute; left: var(--rand); top: -60px; background: var(--nacht); color: var(--weiss); padding: 10px 14px; z-index: 20; border-radius: 8px; }
.sprung:focus { top: 10px; }

.kopf { max-width: var(--breite); margin: 0 auto; padding: 18px var(--rand); }
.marke { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 1.25rem/1 var(--titel); }

main { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.aufmacher { display: grid; gap: 36px; padding: clamp(1.5rem, 6vw, 3.5rem) 0 var(--abstand); }
.kicker { margin: 0 0 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dunkel); }
h1 { font-size: clamp(2rem, 10vw, 3.75rem); font-weight: 800; margin-bottom: 18px; }
.am-stueck { white-space: nowrap; }
.einleitung { font-size: 1.1875rem; max-width: 34ch; }
.eckdaten { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 6px; color: var(--leise); }
.eckdaten li { display: flex; gap: 10px; align-items: baseline; }
.eckdaten li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: translateY(-1px); }

.knopf {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  background: var(--nacht); color: var(--weiss); text-decoration: none;
  font: 700 1.1875rem/1.2 var(--titel); padding: 16px 24px; border-radius: 12px;
  box-shadow: 0 3px 0 var(--gold-dunkel); transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.knopf:hover { color: var(--weiss); transform: translateY(-1px); box-shadow: 0 4px 0 var(--gold-dunkel); }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-dunkel); }
.knopf-info { font: 600 .875rem/1.2 var(--text); color: #C9D3E3; }
.druckhinweis { margin: 14px 0 0; font-size: .9375rem; color: var(--leise); max-width: 40ch; }

/* Zwei Blätter, leicht gegeneinander verdreht, wie auf dem Basteltisch */
.blaetter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; padding: 8px 4px 0; }
.blatt { display: block; background: var(--weiss); border-radius: 4px; box-shadow: 0 1px 2px rgba(28, 43, 72, .08), 0 10px 24px rgba(28, 43, 72, .10); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.blatt-1 { transform: rotate(-2deg); }
.blatt-2 { transform: rotate(1.5deg) translateY(18px); }
.blatt:hover { transform: rotate(0) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .blatt { transition: none; } }
.blatt img { border-radius: 4px; }

.abschnitt { border-top: 1px solid var(--linie); padding: var(--abstand) 0; max-width: 720px; }
.abschnitt h2, .buch h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); font-weight: 800; margin-bottom: 16px; }
.abschnitt > p { font-size: 1.125rem; }

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: 22px; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
.schritte li::before {
  content: counter(schritt); grid-row: span 2; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--weiss);
  display: grid; place-items: center; font: 800 1.375rem/1 var(--titel);
}
.schritte h3 { font-size: 1.3125rem; font-weight: 700; padding-top: 10px; margin-bottom: 4px; }
.schritte p { margin: 0; color: var(--leise); }

.trick { padding: 28px 24px; border: 2px dashed var(--gold); border-radius: 16px; background: var(--weiss); margin-bottom: var(--abstand); }
.trick p { margin: 0; }

.buch { background: var(--eis); border-radius: 16px; padding: clamp(28px, 6vw, 44px) clamp(22px, 5vw, 44px); margin-bottom: var(--abstand); max-width: 720px; }
.buch p:last-child { margin: 0; font-size: 1.125rem; }

.fuss { max-width: var(--breite); margin: 0 auto; padding: 24px var(--rand) 40px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .9375rem; color: var(--leise); }
.fuss p { margin: 0; }
.fuss a { color: var(--leise); }

@media (min-width: 860px) {
  :root { --rand: 40px; }
  .aufmacher { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .blaetter { gap: 20px; }
}