/* Wichteln – alles sieht aus wie mit Buntstift auf liniertes Collegeblock-Papier gemalt.
   Die wackeligen Rahmen, Linien und Knöpfe zeichnet rough.js (siehe app.js → skizziere),
   die Buntstift-Körnung kommt vom SVG-Filter #buntstift in index.html. */

:root {
  --papier: #fbfbf7;
  --lineatur: #a9c3e3;
  --randlinie: #e48a8a;
  --tinte: #3a3c46;          /* Graphit */
  --tinte-weich: #6b6d78;
  --rot: #cf4438;
  --tanne: #3b8650;
  --gold: #e3a82b;
  --blau: #2f5c9e;

  --schrift-hand: "Kalam", "Comic Sans MS", cursive;
  --schrift-marker: "Gochi Hand", "Kalam", cursive;

  --zeile: 32px;                       /* Abstand der Linien */
  --rand-x: clamp(22px, 6vw, 84px);    /* rote Randlinie */
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--tinte);
  font-family: var(--schrift-hand);
  font-size: 1.25rem;
  line-height: 1.45;
  background-color: var(--papier);
  /* Collegeblock: rote Randlinie, leichtes Papierkorn, oben ein freier Streifen, dann blaue Linien */
  background-image:
    linear-gradient(90deg, transparent calc(var(--rand-x) - 1px), var(--randlinie) calc(var(--rand-x) - 1px), var(--randlinie) calc(var(--rand-x) + 1px), transparent calc(var(--rand-x) + 1px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .32 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--papier), var(--papier)),
    linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), var(--lineatur) calc(var(--zeile) - 1px));
  background-size: 100% 100%, 240px 240px, 100% calc(var(--zeile) * 3), 100% var(--zeile);
  background-repeat: no-repeat, repeat, no-repeat, repeat;
  overflow-x: hidden;
}

::selection { background: rgba(227, 168, 43, .35); }

a { color: inherit; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: 3px; }

:focus-visible { outline: 3px dashed var(--tinte); outline-offset: 5px; border-radius: 4px; }

.deko { position: absolute; pointer-events: none; user-select: none; mix-blend-mode: multiply; }
.deko-zweig { width: clamp(160px, 24vw, 330px); top: 4px; left: calc(var(--rand-x) - 30px); transform: rotate(8deg); }
.deko-sterne { width: clamp(80px, 11vw, 150px); top: 18px; right: clamp(8px, 4vw, 60px); transform: rotate(-8deg); }

main {
  position: relative; /* bewusst ohne z-index: sonst sieht mix-blend-mode die Linien nicht */
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 110px) var(--gutter) 80px;
  /* Inhalt bleibt rechts der roten Randlinie, auch auf dem Handy */
  padding-left: max(var(--gutter), calc(var(--rand-x) + 16px - max(0px, (100vw - 1080px) / 2)));
}

/* ---------- Skizzen-Ebene ---------- */

[data-sketch] { position: relative; isolation: isolate; }
.sk {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  overflow: visible;
  pointer-events: none;
  z-index: -1;
  filter: url(#buntstift);
}

/* ---------- Typografie ---------- */

h1, h2, h3 { font-family: var(--schrift-marker); font-weight: 400; line-height: 1.1; margin: 0; filter: url(#buntstift-text); }
h2 { color: var(--blau); }

.kopf { text-align: center; margin-bottom: clamp(28px, 5vw, 56px); }
.kopf h1 {
  display: inline-block;
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  padding: 0 .15em .12em;
  transform: rotate(-1.5deg);
}
.kopf .von { margin: 0 0 .1em; font-size: 1.35rem; color: var(--tinte-weich); transform: rotate(-1deg); }
.kopf .fakten { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 2.2em; margin: 1.1em 0 0; padding: 0; list-style: none; font-size: 1.3rem; }
.kopf .fakten li { padding: 0 .45em; }
.kopf .fakten b { font-weight: 700; }
.kopf .unterzeile { max-width: 34ch; margin: 1em auto 0; font-size: 1.4rem; }

h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: .35em; }

.leise { color: var(--tinte-weich); font-weight: 300; }
.klein { font-size: 1.05rem; }

/* ---------- Bühne: Zettel + Topf ---------- */

.buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}
.buehne > .topf-platz { order: 2; }
.buehne > .seite { order: 1; }

@media (max-width: 760px) {
  .buehne { grid-template-columns: minmax(0, 1fr); }
  .buehne > .topf-platz { order: 1; }
  .buehne > .seite { order: 2; }
}

/* ---------- Papier-Zettel ---------- */

.zettel {
  padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 40px) clamp(24px, 4vw, 34px);
  transform: rotate(-1.6deg);
  max-width: 470px;
  justify-self: end;
  width: 100%;
}
.zettel.schief-rechts { transform: rotate(1.2deg); }
@media (max-width: 760px) { .zettel { justify-self: center; } }



.zettel p { margin: 0 0 .8em; }
.zettel p:last-child { margin-bottom: 0; }

/* ---------- Formulare ---------- */

.feld { display: block; margin-bottom: 1.15em; }
.feld > span { display: block; font-weight: 700; font-size: 1.2rem; }
.feld > span small { font-weight: 300; font-size: .95rem; color: var(--tinte-weich); }
.feld .linie { position: relative; isolation: isolate; display: block; }

input, textarea {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.45rem;
  color: var(--tinte);
  padding: .15em .1em .1em;
  border-radius: 0;
  resize: vertical;
}
textarea { min-height: 2.6em; line-height: 1.35; font-size: 1.3rem; }
input::placeholder, textarea::placeholder { color: rgba(58, 60, 70, .38); }
input:focus, textarea:focus { outline: none; }
.feld .linie:focus-within { background: rgba(227, 168, 43, .13); }

.feld > .hinweis { font-size: 1rem; color: var(--tinte-weich); margin: .35em 0 0; font-weight: 300; }

.fehler { color: var(--rot); font-weight: 700; margin: .7em 0 0; min-height: 0; }
.fehler:empty { display: none; }

/* ---------- Knöpfe ---------- */

.knopf {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--schrift-marker);
  font-size: 1.6rem;
  color: var(--tinte);
  padding: .45em 1.1em .4em;
  cursor: pointer;
  line-height: 1.1;
  touch-action: manipulation;
  transition: transform .15s;
}
.knopf:hover { transform: rotate(-1deg) scale(1.03); }
.knopf:active { transform: scale(.97); }
.knopf[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.knopf.gross { font-size: clamp(1.7rem, 4vw, 2.1rem); padding: .5em 1.3em .45em; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8em 1em; align-items: center; margin-top: .4em; }

.textknopf {
  appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--rot);
  text-underline-offset: 4px; font-size: 1.1rem;
}
.textknopf.rot { color: var(--rot); }

details > summary {
  cursor: pointer;
  list-style: none;
  text-decoration: underline wavy var(--tanne);
  text-underline-offset: 4px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "✎ "; }
details[open] > summary { margin-bottom: .2em; }

/* ---------- Links zum Kopieren ---------- */

.linkzeile { display: flex; gap: .6em; align-items: center; margin: .3em 0 1em; }
.linkzeile code {
  flex: 1;
  min-width: 0;
  font-family: var(--schrift-hand);
  font-size: 1.02rem;
  padding: .35em .6em;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.linkzeile .knopf { font-size: 1.2rem; padding: .35em .8em; flex: none; }

/* ---------- Der Topf ---------- */

.topf-platz { display: flex; flex-direction: column; align-items: center; }

.topf {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 811 / 625;
}
.topf-bild { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; mix-blend-mode: multiply; }

/* Die Öffnung: alles darin wird an der vorderen Topfkante abgeschnitten,
   so verschwinden Zettel und Hand „im“ Topf. Werte aus der Zeichnung vermessen. */
.topf-mund {
  position: absolute;
  z-index: 2;
  left: 13.9%;
  width: 72%;
  top: -260%;
  height: 298.1%;
  overflow: hidden;
  border-bottom-left-radius: 50% 5.6%;
  border-bottom-right-radius: 50% 5.6%;
  pointer-events: none;
}
.topf-boden { position: absolute; left: 0; right: 0; bottom: 0; height: 12.78%; }

.topf-zettel {
  position: absolute;
  width: 15%;
  user-select: none;
}

.hand {
  position: absolute;
  left: 36%;
  width: 28%;
  aspect-ratio: 344 / 1125;
  bottom: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
  transform: translateY(0);
  visibility: hidden;
}
.hand img { position: absolute; top: 0; left: 0; width: 100%; }
.hand img.mit { visibility: hidden; }
.hand.haelt img.mit { visibility: visible; }
.hand.haelt img.leer { visibility: hidden; }

.topf-zahl {
  filter: url(#buntstift-text);
  margin: .4em 0 0;
  font-family: var(--schrift-marker);
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  transform: rotate(-2deg);
  text-align: center;
}

.flieger {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  left: 0;
  top: 0;
  will-change: transform;
}

/* ---------- Liste der Namen ---------- */

.liste { margin-top: clamp(48px, 8vw, 90px); }
.liste-kopf { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.namen {
  list-style: none;
  margin: .5em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.6em;
  font-size: 1.5rem;
}
.namen li { display: inline-flex; align-items: center; gap: .3em; }
.namen li:nth-child(3n+1) { transform: rotate(-2deg); }
.namen li:nth-child(3n+2) { transform: rotate(1.5deg) translateY(3px); }
.namen li:nth-child(3n) { transform: rotate(-.5deg) translateY(-2px); }
.namen .haken { width: 26px; height: 22px; flex: none; }
.namen .ich { font-weight: 700; }
.namen .weg {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--rot);
  font: inherit; font-family: var(--schrift-marker); font-size: 1.3rem; line-height: 1; padding: 0 .2em;
}
.leer-text { font-size: 1.35rem; margin: .4em 0 0; }

/* ---------- Gastgeber-Zettel ---------- */

.gastgeber { margin-top: clamp(48px, 8vw, 90px); display: flex; justify-content: center; }
.gastgeber .zettel { max-width: 640px; justify-self: center; transform: rotate(.8deg); }
.bestaetigen { margin-top: .6em; }

/* ---------- Auflösung ---------- */

.aufloesung { text-align: center; }
.aufloesung .du-beschenkst { margin: 0; font-size: 1.35rem; }
.aufloesung .wer {
  filter: url(#buntstift-text);
  font-family: var(--schrift-marker);
  font-size: clamp(2.8rem, 8vw, 4.4rem);
  line-height: 1.05;
  margin: .1em 0 .25em;
  color: var(--rot);
  overflow-wrap: anywhere;
}
.aufloesung .wunsch { font-size: 1.3rem; margin: 0 auto 1em; max-width: 30ch; }
.aufloesung .wunsch b { display: block; font-weight: 700; font-size: 1.1rem; }
.aufloesung .geschenk { mix-blend-mode: multiply; width: 92px; position: absolute; right: -26px; bottom: -34px; transform: rotate(9deg); }
.zugeklappt .wer, .zugeklappt .wunsch { filter: blur(14px); user-select: none; }

/* ---------- Startseite ---------- */

.meine-toepfe { margin-top: clamp(48px, 8vw, 90px); }
.meine-toepfe ul { list-style: none; padding: 0; margin: .4em 0 0; display: flex; flex-wrap: wrap; gap: .4em 2em; font-size: 1.4rem; }

.noscript { text-align: center; padding: 120px 16px; font-size: 1.6rem; }

.laden { text-align: center; padding: 20vh 0; font-family: var(--schrift-marker); font-size: 2rem; }

.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
  body { font-size: 1.15rem; }
  .deko-zweig { left: -70px; }
  .kopf .fakten { gap: .2em 1.4em; font-size: 1.15rem; }
  .namen { font-size: 1.35rem; gap: .4em 1.2em; }
}

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