/* Der magische Adventkalender · Nadja Trauner
   Coastal im Winter: Salzcreme wie frischer Schnee, Dämmerungs-Navy, Treibholz-Sand, Kerzen-Amber am Abend.
   Schriften: Fraunces und Figtree (SIL Open Font License, Lizenztexte daneben), Salzwind ist Nadjas eigene Schrift.
   Salzwind nur für Zahlen und kurze Wörter ab 28 px.
   Ruhe-Regeln: kein Rot, kein Schwarz, keine schnelle Bewegung, nichts blinkt, alles Wichtige auch ohne Lesen erkennbar. */
@font-face { font-family: "Fraunces"; src: url("/oeffentlich/schriften/Fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/oeffentlich/schriften/Fraunces-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/oeffentlich/schriften/Figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Salzwind"; src: url("/oeffentlich/schriften/Salzwind-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --grund: #F4EEE1;          /* Salzcreme */
  --flaeche: #FBF8F1;        /* Papier */
  --flaeche-2: #EFE7D6;      /* Sand, ruhige Felder */
  --tinte: #2E3E48;          /* Dämmerungs-Navy */
  --leise: #4C5A64;
  --linie: #DDD5C4;
  --tuer: #E0D0B2;           /* Treibholz-Sand */
  --tuer-rand: #C9B89A;
  --schnee: #FFFDF8;
  --akzent: #1F3A3D;         /* Blaue-Stunde-Nacht */
  --akzent-text: #F4EEE1;
  --ruhe: #6FA39B;           /* Handtuch-Teal */
  --ruhe-hell: #DCE7E2;
  --faden: #A6461F;          /* Rust, nur kleine Linien */
  --kerze: #EDAE52;          /* Amber, Licht */
  --kerze-schein: rgba(237, 174, 82, .45);
  --fokus: #1F3A3D;
  --schatten: 0 1px 2px rgba(46, 62, 72, .06), 0 14px 30px -20px rgba(46, 62, 72, .35);
  --rund: 18px; --rund-gross: 28px;
  --schrift-titel: "Fraunces", Georgia, serif;
  --schrift: "Figtree", "Avenir Next", system-ui, -apple-system, sans-serif;
  --schrift-salz: "Salzwind", "Fraunces", Georgia, serif;
  --korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .18  0 0 0 0 .24  0 0 0 0 .28  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
  color-scheme: light;
}
/* Abendlicht: ab 17 Uhr (Klasse vom Skript) oder wenn das Gerät dunkel eingestellt ist */
:root.abend {
  --grund: #1F3A3D; --flaeche: #25454A; --flaeche-2: #2A4B50; --tinte: #F4EEE1; --leise: #C9D3CC;
  --linie: #36585C; --tuer: #2F5357; --tuer-rand: #46696C; --schnee: #EAE3D3;
  --akzent: #EDAE52; --akzent-text: #1F3A3D; --ruhe-hell: #2C5052; --faden: #EDAE52; --fokus: #EDAE52;
  --kerze-schein: rgba(237, 174, 82, .32);
  --schatten: 0 1px 2px rgba(10, 25, 27, .25), 0 16px 34px -20px rgba(10, 25, 27, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--schrift);
  min-height: 100dvh; transition: background-color 2s ease, color 2s ease;
  -webkit-tap-highlight-color: transparent;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--korn); opacity: .05; z-index: 0; }
main, header, nav, footer, section { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 72; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 12px; }

.salz { font-family: var(--schrift-salz); font-weight: 400; letter-spacing: .02em; }
.leise { color: var(--leise); }

/* Große, weiche Knöpfe: mindestens 56 px, für kleine Finger */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--akzent); color: var(--akzent-text); font-weight: 600; font-size: 1.05rem; text-decoration: none;
  transition: transform .4s ease, background-color 1s ease;
}
.knopf:active { transform: scale(.97); }
.knopf.zart { background: var(--flaeche); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); }
.knopf svg { width: 24px; height: 24px; flex: none; }

.karte { background: var(--flaeche); border-radius: var(--rund-gross); box-shadow: var(--schatten); padding: 24px; }

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