/* Nerven – gemeinsames Aussehen: Karton, Klebeband, Zettel, Stempel */

@font-face {
  font-family: "Saira Stencil One";
  src: url("../fonts/saira-stencil-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --karton: #C79D6C; --rille: rgba(120, 82, 40, .10);
  --text: #2B2117; --text-leise: #46341F;
  --tape: rgba(236, 214, 166, .92); --tape-text: #2B2117;
  --schatten: rgba(70, 45, 15, .30);
  --zettel: #FFF8E1; --zettel-text: #2B2117; --stempel: #A9312A;
  --knopf: #2B2117; --knopf-text: #FFF3DE; --fokus: #1E5BA8;

  /* Zeichenfarben: bleiben in Hell und Dunkel gleich, weil Zeichnungen auf dem hellen Zettel liegen */
  --tinte: #2B2117; --papier: #FFF8E1; --klebeband: #ECD6A6;
  --rot: #A9312A; --pappe: #C79D6C; --warngelb: #F0B429;

  --schrift-titel: "Saira Stencil One", Impact, "Arial Narrow", sans-serif;
  --schrift-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --karton: #3E2F22; --rille: rgba(0, 0, 0, .20);
    --text: #F2E5D1; --text-leise: #C9B497;
    --tape: rgba(214, 190, 140, .90);
    --schatten: rgba(0, 0, 0, .50);
    --zettel: #F4E9CC; --stempel: #E7776B;
    --knopf: #F2E5D1; --knopf-text: #2B2117; --fokus: #8DB8F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --karton: #3E2F22; --rille: rgba(0, 0, 0, .20);
  --text: #F2E5D1; --text-leise: #C9B497;
  --tape: rgba(214, 190, 140, .90);
  --schatten: rgba(0, 0, 0, .50);
  --zettel: #F4E9CC; --stempel: #E7776B;
  --knopf: #F2E5D1; --knopf-text: #2B2117; --fokus: #8DB8F0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; background: var(--karton); }
body {
  height: 100%; height: 100dvh; margin: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background-color: var(--karton);
  background-image: repeating-linear-gradient(90deg, var(--rille) 0 2px, transparent 2px 9px);
  color: var(--text);
  font-family: var(--schrift-text);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* Klebeband mit Titel */
/* Der Kopf schneidet das überstehende Klebeband ab, damit sich die Seite nie seitlich schieben lässt */
.kopf { width: 100%; max-width: 540px; align-self: center; overflow: hidden; padding: 14px 0 10px; }
.band {
  margin: 0 -10px;
  padding: 12px 28px 13px;
  background: var(--tape);
  transform: rotate(-1.2deg);
  box-shadow: 0 2px 6px var(--schatten);
  clip-path: polygon(0 8%, 2% 0, 4% 10%, 6% 0, 100% 0, 98% 12%, 100% 25%, 98% 40%, 100% 55%, 98% 70%, 100% 85%, 98% 100%, 0 100%, 2% 88%, 0 75%, 2% 60%, 0 45%, 2% 30%, 0 18%);
}
.band h1 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: clamp(26px, 7.5vw, 44px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--tape-text);
}

/* Knöpfe */
button.knopf {
  min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 2px solid var(--knopf);
  background: var(--knopf); color: var(--knopf-text);
  font: 600 16px/1 var(--schrift-text);
  cursor: pointer;
}
button.knopf.leise { background: transparent; color: var(--text); }
button.knopf.rund {
  width: 48px; height: 48px; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
button.knopf:focus-visible, a:focus-visible, .kachel:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
button.knopf:active { transform: scale(.97); }
button.knopf:disabled { opacity: .55; cursor: default; }

/* Zettel mit Spruch (erscheint über allem, Antippen schließt) */
.zettel {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--zettel-unten, 84px));
  width: min(86vw, 360px);
  padding: 20px 20px 16px;
  background: var(--zettel); color: var(--zettel-text);
  font-family: var(--schrift-hand);
  font-size: 27px; line-height: 1.15; font-weight: 500;
  white-space: pre-line;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
  transform: translate(-50%, 16px) rotate(-2deg);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}
.zettel::before {
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 90px; height: 22px;
  transform: translateX(-50%) rotate(3deg);
  background: var(--tape);
}
/* Der Zettel fängt keine Fingertipps ab, damit man darunter weiterspielen kann */
.zettel.da { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }

/* Einstellungen als Zettel */
dialog.blatt {
  width: min(88vw, 360px); padding: 0; margin: auto;
  border: 0;
  background: var(--zettel); color: var(--zettel-text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .40);
  transform: rotate(-1deg);
}
dialog.blatt::backdrop { background: rgba(20, 12, 4, .55); }
.blatt-inhalt { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 18px; }
.blatt h2 { margin: 0; font-family: var(--schrift-titel); font-weight: 400; font-size: 26px; line-height: 1.1; }
.blatt .knopf { width: 100%; background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.blatt .knopf.leise { background: transparent; color: var(--tinte); }
.blatt-hinweis { margin: 0; min-height: 1.3em; font-family: var(--schrift-hand); font-size: 22px; line-height: 1.1; color: var(--rot); }
.blatt-klein { margin: 0; font-size: 13px; line-height: 1.35; color: #5A4632; }

/* Seiten der Module: Zurück-Knopf, Kopf, Leiste, Bühne, untere Knopfreihe */
.zurueck {
  position: fixed; z-index: 10;
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--tinte); border-radius: 50%;
  background: var(--papier); color: var(--tinte);
  box-shadow: 0 2px 6px var(--schatten);
}
.zurueck svg { width: 22px; height: 22px; }
.zurueck:active { transform: scale(.94); }
body.modul .band { padding-left: 70px; }
body.modul .band h1 { font-size: clamp(22px, 6.4vw, 30px); }

.leiste { width: 100%; max-width: 520px; align-self: center; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 18px 0; }
.stempel {
  font-family: var(--schrift-titel); font-size: 15px; line-height: 1.1;
  color: var(--stempel);
  border: 2px solid var(--stempel); border-radius: 4px;
  padding: 4px 8px 3px;
  transform: rotate(-4deg);
  opacity: .85;
}
.zaehler { text-align: right; line-height: 1.1; }
.zaehler .gross { font-size: 22px; font-weight: 700; }
.zaehler .klein { font-size: 13px; color: var(--text-leise); }

.buehne { position: relative; flex: 1; min-height: 0; width: calc(100% - 24px); max-width: 496px; align-self: center; margin: 10px 0 8px; }
.unten { width: 100%; max-width: 520px; align-self: center; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 14px 14px; }
button.knopf.winkt { animation: winken 1.2s ease-in-out 2; }
@keyframes winken { 0%, 100% { transform: none; } 25% { transform: rotate(-3deg) scale(1.05); } 75% { transform: rotate(3deg) scale(1.05); } }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.konfetti-leinwand { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

@media (prefers-reduced-motion: reduce) {
  button.knopf.winkt { animation: none; }
  .zettel { transition: opacity .2s linear; }
  button.knopf:active { transform: none; }
}