/* Website zu „Das Magische Radj“: Startseite mit Hilfe, Datenschutzerklärung, Impressum.
   Reines HTML und CSS, kein Build, kein JavaScript, nichts von fremden Servern. */

@font-face {
  font-family: 'Chewy'; font-weight: 400; font-display: swap;
  src: url('fonts/chewy-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn'; font-weight: 400; font-display: swap;
  src: url('fonts/vollkorn-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Vollkorn'; font-weight: 600; font-display: swap;
  src: url('fonts/vollkorn-latin-600-normal.woff2') format('woff2');
}

/* Farben wie in der App (src/style.css) */
:root {
  --wald: #0f2a1a;
  --laub: #2e6b3a;
  --krume: #fff6e3;
  --schnur: #f4ead2;
  --kruste: #e8a33d;
  --tinte: #1b1209;
  --display: 'Chewy', 'Comic Sans MS', system-ui, sans-serif;
  --text: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --rand: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
/* Der Waldton liegt auch auf html, damit beim Überscrollen auf dem Handy kein weißer Rand aufblitzt. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px;
  background: var(--wald); color-scheme: dark;
}
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--wald); color: var(--krume);
  font-family: var(--text); font-size: 18px; line-height: 1.55;
  /* Vollkorn setzt sonst Mediävalziffern, bei denen die 1 wie ein römisches I aussieht.
     Für Paragrafen und Absätze braucht es eindeutige Ziffern. */
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--kruste); outline-offset: 3px; border-radius: 4px; }

/* Solange noch Platzhalter im Text stehen, zeigt jede Seite von selbst einen Entwurfs-Hinweis.
   Er verschwindet, sobald das letzte Element mit der Klasse „offen“ ersetzt ist. */
.offen {
  background: var(--kruste); color: var(--tinte); padding: 0 .3em; border-radius: 4px; font-weight: 600;
  hyphens: manual; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body:has(.offen)::before {
  content: 'Entwurf: Die markierten Stellen sind noch auszufüllen.';
  display: block; padding: 8px var(--rand); text-align: center;
  background: var(--kruste); color: var(--tinte); font-weight: 600; font-size: 16px; line-height: 1.3;
}

/* Schrift mit Tintenrand, wie der Titel in der App */
.umrandet {
  font-family: var(--display); font-weight: 400; color: var(--krume);
  text-shadow:
    -3px -3px 0 var(--tinte), 3px -3px 0 var(--tinte), -3px 3px 0 var(--tinte), 3px 3px 0 var(--tinte),
    0 -3px 0 var(--tinte), 0 3px 0 var(--tinte), -3px 0 0 var(--tinte), 3px 0 0 var(--tinte),
    0 6px 14px rgba(0, 0, 0, .55);
}

/* ---------- Startseite: Lichtung mit Radj und Schnur ---------- */
.lichtung {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(40px, 9vh, 96px) var(--rand) clamp(56px, 10vh, 112px);
  background:
    linear-gradient(180deg, rgba(8, 18, 6, .5) 0%, rgba(8, 18, 6, .15) 35%, rgba(15, 42, 26, .6) 78%, var(--wald) 100%),
    url('img/wald.webp') center 35% / cover no-repeat, #1d2a14;
}
.lichtung h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(40px, 11vw, 76px); line-height: 1.05; letter-spacing: .5px; }
/* Wie in der App sitzt das Radj etwas links der Mitte, damit rechts Platz für die Schnur bleibt. */
.buehne {
  position: relative; width: min(68vw, 430px); translate: -5% 0;
  margin: clamp(28px, 6vh, 56px) auto clamp(22px, 5vh, 44px);
}
.laib {
  display: block; width: 100%;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(255, 214, 140, .25));
  animation: schweben 4.5s ease-in-out infinite;
}
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.spruch {
  margin: 0 auto; max-width: 22em; font-size: clamp(20px, 5vw, 24px); line-height: 1.35; font-weight: 600;
  text-shadow: 0 0 6px #000, 0 2px 4px #000;
}
.spruch + .spruch { margin-top: .6em; font-weight: 400; font-size: 18px; }

/* Die Zugschnur hängt wie in der App rechts neben dem Radj und läuft hinter dem Titel nach oben
   aus dem Bild. Reine Zierde. */
.zugschnur {
  position: absolute; left: calc(100% - 2px); bottom: 20%; width: 54px; height: 120vh;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.zugschnur::before {
  content: ''; flex: 1; width: 7px;
  background: linear-gradient(90deg, var(--tinte) 0 1.75px, var(--schnur) 1.75px 5.25px, var(--tinte) 5.25px);
}
.zugschnur svg { display: block; width: 54px; height: 62px; margin-top: -4px; overflow: visible; }

/* ---------- Kopf der Textseiten ---------- */
.kopf { padding: clamp(18px, 4vw, 32px) var(--rand) 0; }
.marke {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 44rem; margin: 0 auto;
  text-decoration: none;
}
.marke img { width: 76px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.marke span { font-size: clamp(26px, 6.5vw, 34px); line-height: 1.05; }
.kopf .marke { width: 100%; }

/* ---------- Zettel: der cremefarbene Bogen mit dem eigentlichen Text ---------- */
main { flex: 1; padding: clamp(18px, 4vw, 32px) var(--rand) 0; }
.lichtung + main { padding-top: 0; margin-top: clamp(-56px, -6vh, -32px); position: relative; }
.zettel {
  max-width: 44rem; margin: 0 auto; padding: clamp(22px, 5.5vw, 48px);
  background: var(--krume); color: var(--tinte);
  border: 4px solid var(--tinte); border-radius: 22px;
  overflow-wrap: break-word; hyphens: auto;
  /* Nur lange Wörter trennen, und nie nur zwei Buchstaben abspalten */
  hyphenate-limit-chars: 9 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
.zettel > :first-child { margin-top: 0; }
.zettel > :last-child { margin-bottom: 0; }
.zettel h1, .zettel .titel { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 9vw, 50px); line-height: 1.05; margin: 0 0 .35em; hyphens: manual; }
.zettel h2 { font-size: 1.4rem; font-weight: 600; line-height: 1.25; margin: 2.1em 0 .5em; }
.zettel h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: 1.6em 0 .3em; }
.zettel p, .zettel ul, .zettel ol, .zettel address { margin: 0 0 .9em; }
.zettel ul, .zettel ol { padding-left: 1.25em; }
.zettel li { margin-bottom: .3em; }
.zettel li::marker { color: var(--laub); }
.zettel a { color: var(--laub); font-weight: 600; }
.zettel address { font-style: normal; }
.zettel strong { font-weight: 600; }
.name { hyphens: none; }
.stand { font-size: 1rem; opacity: .8; }

.kurz {
  margin: 1.4em 0 0; padding: 16px 20px 6px;
  background: var(--schnur); border: 3px solid var(--tinte); border-radius: 14px;
}
.kurz h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; margin: 0 0 .5em; }

.inhalt { columns: 2 15em; column-gap: 2em; padding-left: 1.4em; }
.inhalt li { break-inside: avoid; }

/* Hilfe auf der Startseite: Frage fett, Antwort darunter */
.hilfe { margin: 0; }
.hilfe dt { font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin-top: 1.3em; }
.hilfe dd { margin: .2em 0 0; }

/* ---------- Fuß ---------- */
.fuss { padding: clamp(24px, 5vw, 40px) var(--rand) calc(clamp(24px, 5vw, 40px) + env(safe-area-inset-bottom, 0px)); }
.fuss nav { max-width: 44rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 28px; font-weight: 600; }
.fuss a[aria-current='page'] { text-decoration: none; opacity: .7; }

@media (max-width: 420px) {
  body { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .laib { animation: none; }
}
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  body:has(.offen)::before { border: 1px solid #000; background: none; }
  .kopf, .fuss, .zugschnur { display: none; }
  main { padding: 0; }
  .zettel { border: 0; border-radius: 0; padding: 0; max-width: none; background: none; }
  .zettel a { color: inherit; }
  .kurz { background: none; border-width: 1px; }
}