/* Quelle: ungeheuer-schlau.de – Nutzung siehe Impressum */
/* ==========================================================================
   Ungeheuer Schlau – Stylesheet
   --------------------------------------------------------------------------
   1. Schriften   2. Grundwerte   3. Tischplatte
   4. Blätter (mit Flecken)   5. Balken-Überschriften   6. Text
   7. Polaroid    8. Spiel-Eintrag, Zettel-Links   9. Unterschrift
  10. Monsterarm (Sprachen)   11. Fähnchen und Bleistift (Menü)
  12. Monster, Funkeln   13. Bausteine (Limo-Zettel, Listen, Knopf)
  14. Fußzeile   15. Bewegung reduzieren
   ========================================================================== */


/* 1. Schriften ------------------------------------------------------------- */

@font-face {
  font-family: "Crafty Girls";
  src: url("../schriften/crafty-girls.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Flavors";
  src: url("../schriften/flavors.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Mea Culpa";
  src: url("../schriften/mea-culpa.woff2") format("woff2");
  font-display: swap;
}


/* 2. Grundwerte ------------------------------------------------------------ */

:root {
  --s: calc(40 / 53);                 /* Maßstab des Blatt-Bildes            */
  --holz: #c99c68;                    /* helles, warmes Honig-Holz */
  --holz-text: #4a2f1c;               /* Schrift auf dem Holz      */
  --tinte: #1b2b6b;                   /* Füller-Dunkelblau                    */
  --tinte-weich: #4a5687;
  --balken: #1c2140;
  --balken-text: #f6eedb;
  --koenigsblau: #1f46b5;
  --gold: #f5b82e;
  --rot: #d9474f;
  --zettel-gelb: #fff1a3;

  --schrift: "Crafty Girls", "Segoe Print", "Comic Sans MS", cursive;
  --schrift-titel: "Flavors", "Segoe Print", "Comic Sans MS", cursive;
  --schrift-unterschrift: "Mea Culpa", "Segoe Script", "Brush Script MT", cursive;

  --fs: 21px;                         /* Fließtext                            */
  --rand: calc(94px * var(--s));      /* rote Randlinie                       */
  --innen-l: calc(var(--rand) + 22px);
  --innen-r: 34px;

  /* Menü unten: Bleistift und Fähnchen */
  --b-hoch: 46px;                     /* Bleistift (Bildhöhe mit Schatten)     */
  --f-breit: 92px;                    /* Breite eines Fähnchens                */
  --f-abstand: 12px;
  --f-hoch: 60px;                     /* so weit schaut es über den Stift      */
  --f-aktiv: 72px;                    /* ... das Fähnchen der aktuellen Seite  */
  --f-innen: 9px;
  --f-symbol: 26px;
  --f-wort: 17px;
  --monster-h: 64px;                  /* Monster auf dem aktuellen Fähnchen    */

  --riss-oben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpolygon points='0.0,3.1 5.2,2.7 10.7,4.2 13.6,0.6 20.3,2.1 23.9,6.4 28.8,5.5 33.7,4.3 36.9,4.3 43.8,3.6 50.0,4.5 52.8,5.0 58.2,2.3 60.9,5.6 65.8,4.8 72.6,4.8 79.8,2.9 86.3,3.2 93.4,5.7 96.4,1.4 100.0,6.2 104.7,4.2 108.7,3.5 113.1,2.6 118.5,4.0 120.0,3.1 120.0,7.0 0.0,7.0' fill='black'/%3E%3C/svg%3E");
  --riss-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpolygon points='0.0,3.9 7.3,5.7 13.3,5.9 17.1,0.6 20.6,2.7 25.4,3.8 30.4,5.3 37.0,5.9 40.7,6.3 44.5,4.0 51.6,4.2 54.6,4.9 62.1,6.1 67.7,4.2 73.5,4.4 79.4,3.5 85.2,1.1 90.6,5.6 93.4,0.9 98.4,5.3 105.6,3.0 111.7,1.3 115.7,4.3 120.0,3.9 120.0,0.0 0.0,0.0' fill='black'/%3E%3C/svg%3E");
  --riss-links: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 120' preserveAspectRatio='none'%3E%3Cpolygon points='3.1,0.0 4.6,5.9 1.7,12.7 1.4,16.3 4.9,20.0 3.7,23.1 2.3,26.7 5.5,31.3 0.6,36.9 1.4,40.8 5.3,47.6 5.4,54.1 6.1,60.4 2.1,66.8 3.4,73.6 3.9,79.9 2.7,84.5 2.4,89.2 5.4,92.2 6.4,98.7 3.8,104.7 1.4,110.9 3.2,116.8 3.1,120.0 7.0,120.0 7.0,0.0' fill='black'/%3E%3C/svg%3E");
  --riss-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 120' preserveAspectRatio='none'%3E%3Cpolygon points='3.9,0.0 2.7,5.9 5.2,10.8 1.7,17.3 3.5,22.4 6.4,26.1 3.0,30.4 1.8,33.3 5.1,36.9 0.6,39.6 1.3,45.8 6.2,51.4 3.5,55.5 0.8,58.6 5.5,63.0 5.7,69.6 3.8,76.7 4.4,82.0 5.3,86.9 1.3,89.6 1.9,93.2 0.7,96.8 2.0,103.7 3.0,110.1 5.7,116.2 3.9,120.0 0.0,120.0 0.0,0.0' fill='black'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  :root {
    --s: calc(32 / 53);
    --fs: 18px;
    --innen-l: calc(var(--rand) + 14px);
    --innen-r: 18px;
    --b-hoch: 36px;
    --f-breit: min(70px, calc((100vw - 40px) / 5));
    --f-abstand: 5px;
    --f-hoch: 50px;
    --f-aktiv: 58px;
    --f-innen: 7px;
    --f-symbol: 20px;
    --f-wort: 14px;
    --monster-h: 48px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

.unsichtbar {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 3. Tischplatte ------------------------------------------------------------ */

html {
  background: var(--holz);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  /* unten Platz für Bleistift und Fähnchen, die fest am Bildschirmrand liegen */
  padding: 64px 14px calc(var(--b-hoch) + var(--f-aktiv) + 28px);
  font-family: var(--schrift);
  color: var(--tinte);
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 244 222 / .35), transparent 70%),
    url("../bilder/holz.webp") 0 0 / 900px 450px,   /* Maserung als fertiges Bild: schont alte Handys */
    var(--holz);
}

@media (max-width: 640px) {
  body { padding-top: 48px; padding-left: 8px; padding-right: 8px; }
}

.huelle {
  overflow-x: hidden;
  overflow-x: clip;
  margin: 0 -14px;
  padding: 0 14px;
}

@media (max-width: 640px) {
  .huelle { margin: 0 -8px; padding: 0 8px; }
}

.sprung {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--zettel-gelb);
  color: var(--tinte);
  font: 20px var(--schrift);
}
.sprung:focus { top: 8px; }




/* 4. Blätter ------------------------------------------------------------------
   Jedes Blatt besteht aus Kopf, einem Mittelteil, der sich beliebig oft
   wiederholt, und dem Fuß mit den runden Ecken. Damit nicht alle Blätter gleich
   aussehen, hat jedes eigene Flecken (Aufkleber, siehe unten), eine etwas andere
   Breite, Lage und Papierstruktur (--kv verschiebt das Muster um ganze Linien). */

.blatt {
  --o: calc(248px * var(--s));
  --u: calc(192px * var(--s));
  --k: calc(477px * var(--s));
  --l: calc(276px * var(--s));
  --r: calc(127px * var(--s));
  --kopf-l: url("../bilder/blatt/blatt-kopf-l.webp");
  --kopf-m: url("../bilder/blatt/blatt-kopf-m.webp");
  --kopf-r: url("../bilder/blatt/blatt-kopf-r.webp");
  --breite: min(var(--blatt-max, 900px), 100vw - 28px);
  position: relative;
  display: flow-root;
  width: var(--breite);
  margin: 0 auto;
  translate: var(--blatt-x, 0px) 0;
  rotate: var(--blatt-dreh, 0deg);
}

@media (max-width: 640px) {
  .blatt { --breite: calc(100vw - 16px); --blatt-x: 0px; }
}

.blatt + .blatt { margin-top: 56px; }

@media (max-width: 640px) {
  .blatt + .blatt { margin-top: 40px; }
}

.papier {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: var(--o) 0 calc(var(--u) - 70px * var(--s));
  pointer-events: none;
  filter: brightness(var(--hell, 1.07)) sepia(var(--alt, .06)) drop-shadow(0 2px 2px rgb(60 30 0 / .25)) drop-shadow(0 16px 22px rgb(60 30 0 / .3));
  background:
    var(--kopf-l) left top / var(--l) calc(var(--o) + 1px) no-repeat border-box,
    var(--kopf-r) right top / var(--r) calc(var(--o) + 1px) no-repeat border-box,
    var(--kopf-m) calc(var(--l) - 1px) top / calc(100% - var(--l) - var(--r) + 2px) calc(var(--o) + 1px) no-repeat border-box,
    url("../bilder/blatt/blatt-ul.webp") left bottom / var(--l) calc(var(--u) + 1px) no-repeat border-box,
    url("../bilder/blatt/blatt-ur.webp") right bottom / var(--r) calc(var(--u) + 1px) no-repeat border-box,
    url("../bilder/blatt/blatt-um.webp") calc(var(--l) - 1px) bottom / calc(100% - var(--l) - var(--r) + 2px) calc(var(--u) + 1px) no-repeat border-box,
    url("../bilder/blatt/blatt-ml.webp") left var(--kv, 0px) / var(--l) var(--k) repeat-y content-box,
    url("../bilder/blatt/blatt-mr.webp") right var(--kv, 0px) / var(--r) var(--k) repeat-y content-box,
    url("../bilder/blatt/blatt-mm.webp") calc(var(--l) - 1px) var(--kv, 0px) / calc(100% - var(--l) - var(--r) + 2px) var(--k) repeat-y content-box;
}

/* Flecken: Kaffee, Tinte, Knick … aus dem Original-Blatt ausgeschnitten und
   mit „multiply“ aufs Papier gelegt – wie echte Flecken, die durchscheinen. */
.flecken {
  position: absolute;                 /* bewusst ohne z-index: sonst kann */
  inset: 3px 2px 4px;                 /* „multiply“ nicht mit dem Papier mischen */
  overflow: hidden;                   /* nur auf dem Papier, nie auf dem Holz */
  border-radius: calc(44px * var(--s));
  pointer-events: none;
}

.fleck {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: calc(var(--fw) * var(--s) * var(--fg, 1));
  height: auto;
  rotate: var(--fd, 0deg);
  mix-blend-mode: multiply;
  opacity: var(--fo, 1);
}

/* Knick am linken Blattrand: immer bündig an der Kante */
.fleck-knick { left: 0; }


/* 5. Balken-Überschriften ------------------------------------------------------
   Ein dunkler Streifen quer über den ganzen Bildschirm, jeder etwas anders
   gedreht. Oben bleibt Platz für Blattkante und ein paar Linien. */

.balken {
  position: relative;
  z-index: 2;
  /* etwas breiter als der Bildschirm: Die Blätter sind gedreht und würden
     den Balken sonst an einer Seite vom Rand wegziehen */
  width: calc(100vw + 120px);
  margin: var(--balken-oben, 96px) 0 0 calc(50% - 50vw - 60px);
  rotate: var(--dreh, -1.5deg);
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / .35)) drop-shadow(0 10px 12px rgb(0 0 0 / .25));
}

@media (max-width: 640px) {
  .balken { --balken-oben: 66px; }
}

.balken-band {
  display: block;
  padding: 18px var(--innen-r) 14px calc((100vw - var(--breite)) / 2 + 60px + var(--innen-l) + var(--balken-einzug, 0px));
  margin: 0;
  font: 400 clamp(30px, 5.4vw, 54px)/1.05 var(--schrift-titel);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--balken-text);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / .18)),
    var(--balken);
  -webkit-mask:
    var(--riss-oben) 0 0 / 120px 7px repeat-x,
    var(--riss-unten) 37px 100% / 120px 7px repeat-x,
    linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 12px) no-repeat;
  mask:
    var(--riss-oben) 0 0 / 120px 7px repeat-x,
    var(--riss-unten) 37px 100% / 120px 7px repeat-x,
    linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 12px) no-repeat;
}

@media (max-width: 640px) {
  .balken-band { padding-top: 14px; padding-bottom: 11px; }
}


/* 6. Text ---------------------------------------------------------------------- */

.inhalt {
  position: relative;
  z-index: 1;
  padding: 30px var(--innen-r) 64px var(--innen-l);
  font: 400 var(--fs)/1.72 var(--schrift);
  color: var(--tinte);
  -webkit-text-stroke: .018em currentColor;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 640px) {
  .inhalt { padding-top: 22px; padding-bottom: 48px; }
}

.inhalt p { margin: 0 0 .7em; }
.inhalt p:last-child { margin-bottom: 0; }

.inhalt a:not([class]) {
  color: var(--koenigsblau);
  text-decoration: underline wavy 1px;
  text-underline-offset: 4px;
}


/* 7. Polaroid ------------------------------------------------------------------ */

.mit-foto {
  --fb: 250px;
  --fl: -24px;
  --ft: -46px;
}

@media (max-width: 900px) {
  .mit-foto { --fb: 190px; --ft: -36px; }
}

@media (max-width: 640px) {
  .mit-foto { --fb: 128px; --fl: -6px; --ft: -26px; }
}

.foto {
  position: absolute;
  z-index: 3;                         /* liegt über dem Balken */
  left: var(--fl);
  top: var(--ft);
  width: var(--fb);
  rotate: -4deg;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / .3)) drop-shadow(0 14px 16px rgb(0 0 0 / .3));
}

.foto img { display: block; width: 100%; height: auto; }

/* Balken-Schrift beginnt rechts neben dem Foto */
.mit-foto .balken { --balken-einzug: calc(var(--fl) + var(--fb) * .92 - var(--innen-l)); }

/* Platzhalter, damit der Text unter dem Balken am Foto vorbeifließt */
.foto-platz {
  float: left;
  width: calc(var(--fl) + var(--fb) * .9 - var(--innen-l));
  height: var(--foto-rest, 40px);
  margin-right: 18px;
}


/* 8. Spiel-Eintrag ---------------------------------------------------------------- */

.spiele-liste {
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
}

.spiel {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  grid-template-areas: "bild titel" "bild text";
  grid-template-rows: auto 1fr;
  gap: 4px 34px;
  margin-bottom: 1.6em;
}

.spiel-bild { grid-area: bild; align-self: start; }
.spiel-titel { grid-area: titel; }
.spiel-text { grid-area: text; }

.spiel-titel {
  margin: 0;
  font: 400 clamp(26px, 3.4vw, 34px)/1.1 var(--schrift-titel);
  color: var(--tinte);
  -webkit-text-stroke: 0;
}

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--tinte-weich);
}

.hinweis svg {
  flex: none;
  width: 38px;
  height: 26px;
  margin-top: 4px;
  color: var(--tinte);
}

@media (max-width: 700px) {
  .spiel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titel" "bild" "text";
    gap: 10px;
  }
  .hinweis svg { rotate: 90deg; width: 30px; }
}

/* Bilder und Zettel mit Risskante und Klebestreifen */
.riss {
  --z: 7px;
  position: relative;
  display: block;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25)) drop-shadow(0 6px 8px rgb(0 0 0 / .25));
  rotate: var(--dreh, -2deg);
}

.riss-innen,
.riss > img {
  position: relative;
  display: block;
  -webkit-mask:
    var(--riss-oben) var(--rv, 0px) 0 / 120px var(--z) repeat-x,
    var(--riss-unten) calc(var(--rv, 0px) * -1) 100% / 120px var(--z) repeat-x,
    var(--riss-links) 0 var(--rv, 0px) / var(--z) 120px repeat-y,
    var(--riss-rechts) 100% calc(var(--rv, 0px) * 2) / var(--z) 120px repeat-y,
    linear-gradient(#000 0 0) 50% 50% / calc(100% - 2 * var(--z) + 2px) calc(100% - 2 * var(--z) + 2px) no-repeat;
  mask:
    var(--riss-oben) var(--rv, 0px) 0 / 120px var(--z) repeat-x,
    var(--riss-unten) calc(var(--rv, 0px) * -1) 100% / 120px var(--z) repeat-x,
    var(--riss-links) 0 var(--rv, 0px) / var(--z) 120px repeat-y,
    var(--riss-rechts) 100% calc(var(--rv, 0px) * 2) / var(--z) 120px repeat-y,
    linear-gradient(#000 0 0) 50% 50% / calc(100% - 2 * var(--z) + 2px) calc(100% - 2 * var(--z) + 2px) no-repeat;
}

.riss-innen img,
.riss > img { display: block; width: 100%; height: auto; }

/* Klebestreifen */
.riss::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  left: var(--klebe-x, 50%);
  width: min(42%, 104px);
  height: 24px;
  translate: -50% 0;
  rotate: var(--klebe-dreh, -5deg);
  background: linear-gradient(rgb(255 255 255 / .25), rgb(255 255 255 / 0)), rgb(244 238 214 / .62);
  box-shadow: 0 1px 2px rgb(0 0 0 / .14);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 97% 18%, 100% 34%, 96% 52%, 100% 70%, 97% 86%, 100% 100%, 0 100%, 3% 80%, 0 62%, 4% 44%, 0 26%);
}

/* Spielebild – Klick startet das Spiel. Aufbau (fürs Handy optimiert):
   Der Rahmen mit Schatten bleibt unbewegt; Glanz und Glimmerstern liegen
   darüber und werden nur verschoben/skaliert – das schafft auch ein altes Handy. */
a.spiel-bild {
  --z: 7px;
  position: relative;
  display: block;
  rotate: var(--dreh, -2deg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: translate .2s;
}

.spiel-bild .riss { rotate: 0deg; }

a.spiel-bild:active { translate: 0 2px; }
a.spiel-bild:focus-visible { outline: 3px dashed var(--koenigsblau); outline-offset: 8px; }

@media (hover: hover) {
  a.spiel-bild:hover { translate: 0 -3px; }
}

/* wandernder Glanz: ein heller Streifen, der ab und zu über das Bild huscht */
.glanz-feld {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}

.glanz {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 75%;
  background: linear-gradient(90deg,
    rgb(255 250 230 / 0) 0%, rgb(255 250 230 / .04) 15%, rgb(255 250 230 / .14) 30%,
    rgb(255 250 230 / .28) 42%, rgb(255 252 240 / .34) 50%, rgb(255 250 230 / .28) 58%,
    rgb(255 250 230 / .14) 70%, rgb(255 250 230 / .04) 85%, rgb(255 250 230 / 0) 100%);
  transform: translateX(-110%) skewX(-15deg);
  animation: glanz 5s 1s ease-in-out infinite;
}

@keyframes glanz {
  0% { transform: translateX(-120%) skewX(-15deg); }
  45%, 100% { transform: translateX(160%) skewX(-15deg); }
}

/* Links als heller Zettel mit Risskanten und Tesastreifen (z. B. „Mehr Spiele“) */
.zettel-link {
  --z: 6px;
  --dreh: 2.5deg;
  --klebe-x: 30%;
  --klebe-dreh: 7deg;
  display: inline-block;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--tinte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.zettel-link .riss-innen {
  padding: 16px 30px 12px;
  background:
    repeating-linear-gradient(transparent 0 25px, rgb(120 130 210 / .35) 25px 26px) 0 6px,
    #fdfcf6;
  font: 400 calc(var(--fs) * 1.05)/1.3 var(--schrift);
  -webkit-text-stroke: .02em currentColor;
}

.zettel-link:focus-visible { outline: 3px dashed var(--koenigsblau); outline-offset: 6px; }
.zettel-link:active { translate: 0 2px; }

@media (hover: hover) {
  .zettel-link:hover { --dreh: 0deg; translate: 0 -2px; }
}

.link-zeile { margin: 1.4em 0 .6em; text-align: center; }


/* 9. Gruß und Unterschrift -------------------------------------------------------- */

.gruss { margin-top: 1.2em; }

.unterschrift {
  display: inline-block;
  margin: .55em 0 0 .3em;
  font: 400 calc(var(--fs) * 2.6)/1.2 var(--schrift-unterschrift);
  color: #e2207a;                     /* Pink wie Gelstift */
  -webkit-text-stroke: 0;
  white-space: nowrap;
  rotate: -8deg;
  transform-origin: 0 70%;
}


/* 10. Monsterarm: Sprachauswahl ----------------------------------------------------
   Ein Monsterarm hängt rechts oben ins Bild und hält ein Schild mit der
   aktuellen Sprache. Antippen: Er rutscht herunter, und darunter baumeln
   an Bindfäden die Schilder der anderen Sprachen.
   Maße beziehen sich auf das Bild (506 × 970 px); das Schild ist um 7,5° gedreht. */

.arm {
  --ab: 150px;                        /* Breite des Arm-Bildes */
  --zu: -24px;                        /* Lage, wenn zu        */
  --auf: 70px;                        /* Lage, wenn geöffnet  */
  position: absolute;
  top: 0;
  right: clamp(4px, 5vw, 70px);
  z-index: 60;
  width: var(--ab);
  translate: 0 var(--zu);
  /* Zuklappen: erst falten sich die Schilder hoch, dann gleitet der Arm langsam nach oben */
  transition: translate 1s cubic-bezier(.45, 0, .25, 1) .55s;
}

.arm-knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 0;
  will-change: transform;
  animation: baumeln 6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.arm-knopf { z-index: 2; }            /* Arm + DEU-Schild liegen vor den anderen Schildern */

.arm-bild { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }

/* Der Arm geht nach oben endlos weiter (Fell-Kachel), damit er auch
   heruntergerutscht noch von oben ins Bild hängt */
.arm-knopf::before {
  content: "";
  position: absolute;
  left: calc(205 / 506 * 100%);
  width: calc(110 / 506 * 100%);
  bottom: calc(100% - var(--ab) * 40 / 506);
  height: 420px;
  background: url("../bilder/monsterarm-fell.webp") center bottom / 100% auto repeat-y;
  -webkit-mask: linear-gradient(#000 calc(100% - var(--ab) * 40 / 506), transparent);
  mask: linear-gradient(#000 calc(100% - var(--ab) * 40 / 506), transparent);
  pointer-events: none;
}

/* Beschriftung auf dem gehaltenen Schild */
.schild-text {
  position: absolute;
  left: 51%;
  top: 80.5%;
  translate: -50% -50%;
  rotate: 7.5deg;
  display: grid;
  justify-items: center;
  color: var(--tinte);
  pointer-events: none;
}

.schild-kuerzel { font: 400 calc(var(--ab) * .24)/1 var(--schrift-titel); letter-spacing: .04em; }
.schild-name { margin-top: 2px; font: 400 calc(var(--ab) * .09)/1 var(--schrift); -webkit-text-stroke: .02em currentColor; }

.arm-knopf:focus-visible { outline: none; }
.arm-knopf:focus-visible .schild-text { outline: 3px dashed var(--koenigsblau); outline-offset: calc(var(--ab) * .1); border-radius: 4px; }

@keyframes baumeln {
  0%, 70%, 100% { rotate: 0deg; }
  76% { rotate: 4deg; }
  84% { rotate: -3deg; }
  91% { rotate: 1.5deg; }
}

/* die anderen Sprachen: kleinere Schilder an Bindfäden */
.sprachschilder {
  position: absolute;
  left: 51%;
  top: calc(var(--ab) * 970 / 506 * .955);
  margin: 0;
  padding: 0;
  list-style: none;
  translate: -50% 0;
  z-index: 1;
  visibility: hidden;
  transition: visibility 0s linear 1.6s;
}

/* oberes Schild liegt vor dem unteren: FRA rutscht beim Zuklappen hinter ENG */
.sprachschilder li:nth-child(1) { z-index: 2; }
.sprachschilder li:nth-child(2) { z-index: 1; }

.sprachschilder li {
  position: relative;
  margin-top: 16px;
  opacity: 0;
  translate: 0 -46px;
  rotate: 0deg;
  transition: opacity .45s ease-in .1s, translate .55s cubic-bezier(.5, 0, .7, .4), rotate .55s;
}

/* Zuklappen von unten nach oben: FRA zuerst, dann ENG */
.sprachschilder li:nth-child(2) { transition-delay: 0s; rotate: 10deg; }
.sprachschilder li:nth-child(1) { transition-delay: .25s; }

.sprachschilder li::before {          /* Bindfaden */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 20px;
  background: #6b5a44;
}

.sprachschilder a {
  display: grid;
  justify-items: center;
  width: calc(var(--ab) * .62);
  padding: 7px 6px 6px;
  color: var(--tinte);
  text-decoration: none;
  background: linear-gradient(160deg, #fbf8f2, #ece6dc);
  border: 2px solid #6b5a4e;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgb(0 0 0 / .25), 0 8px 12px -5px rgb(0 0 0 / .45);
  rotate: var(--k, -4deg);
}

.sprachschilder li:nth-child(2) a { --k: 3deg; }
.sprachschilder .schild-kuerzel { font-size: calc(var(--ab) * .17); }
.sprachschilder .schild-name { font-size: calc(var(--ab) * .075); }
.sprachschilder a:focus-visible { outline: 3px dashed var(--koenigsblau); outline-offset: 3px; }

@media (hover: hover) {
  .sprachschilder a:hover { --k: 0deg; }
}

/* geöffnet: erst rutscht der Arm herunter, dann fallen die Schilder nacheinander */
.arm.offen { translate: 0 var(--auf); transition: translate .7s cubic-bezier(.3, 1.3, .5, 1) 0s; }
.arm.offen .arm-knopf { animation: none; }
.arm.offen .sprachschilder { visibility: visible; transition-delay: 0s; }
.arm.offen .sprachschilder li {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  transition: opacity .3s ease-out, translate .6s cubic-bezier(.3, 1.4, .5, 1), rotate .6s;
}
.arm.offen .sprachschilder li:nth-child(1) { transition-delay: .35s; }
.arm.offen .sprachschilder li:nth-child(2) { transition-delay: .5s; }

/* gewählte Sprache: Schild leuchtet kurz auf */
.sprachschilder a.gewaehlt { animation: gewaehlt .45s ease-out; background: var(--zettel-gelb); }

@keyframes gewaehlt {
  0% { scale: 1; }
  40% { scale: 1.15; }
  100% { scale: 1; }
}

@media (max-width: 640px) {
  .arm { --ab: 104px; --zu: -66px; --auf: 0px; right: 4px; }
}


/* 11. Menü: Fähnchen hinter dem liegenden Bleistift -----------------------------
   Fest am unteren Bildschirmrand liegt ein Bleistift quer über die ganze Breite.
   Dahinter stecken die Fähnchen und schauen oben heraus: Symbol und Wort.
   Das Fähnchen der aktuellen Seite ist höher, und auf ihm wippt ihr Monster.
   Fürs Handy bewusst schlicht: feste Größen, keine Filter, und bewegt wird nur
   das Monster (per transform) – so wandert die Leiste ruhig mit, wenn der
   Browser seine Adressleiste ein- und ausblendet. */

.leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: calc(var(--b-hoch) + var(--f-aktiv));
  pointer-events: none;
  transform: translateZ(0);           /* eine eigene, fertig gemalte Ebene */
}

/* der Bleistift: linkes Ende, gekacheltes Mittelstück, Spitze */
.bleistift {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--b-hoch) * -.06);   /* Unterkante des Stifts = Bildschirmrand */
  z-index: 2;
  display: flex;
  height: var(--b-hoch);
  user-select: none;
}

.bleistift img { flex: none; width: auto; height: 100%; }

.bleistift-mitte {
  flex: 1;
  margin: 0 -1px;
  background: url("../bilder/bleistift/mitte.webp") 0 0 / auto 100%;
  background-repeat: round no-repeat;  /* immer ganze Stücke: keine Naht */
}

.fahnen {
  position: absolute;
  left: 50%;
  bottom: calc(var(--b-hoch) * .5);
  z-index: 1;                         /* hinter dem Bleistift */
  display: flex;
  align-items: flex-end;
  gap: var(--f-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
  translate: -50% 0;
}

.fahne {
  position: relative;
  width: var(--f-breit);
  rotate: var(--kipp, 0deg);
  transform-origin: 50% 100%;
  pointer-events: auto;
}

.fahne > a,
.fahne > button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: calc(var(--f-hoch) + var(--b-hoch) * .5);   /* unten steckt es hinter dem Stift */
  margin: 0;
  padding: var(--f-innen) 2px 0;
  border: 0;
  border-radius: 7px 7px 0 0;
  color: #fff;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 35%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / .16)),
    var(--farbe);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .16), 0 2px 5px rgb(0 0 0 / .3);
  translate: 0 var(--hoch, 0px);
  transition: translate .3s cubic-bezier(.3, 1.5, .5, 1);
  -webkit-tap-highlight-color: transparent;
}

/* Ziernaht oben, wie aufgenäht */
.fahne > :is(a, button)::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 4px;
  border-top: 1.5px dashed rgb(255 255 255 / .5);
}

.fahne .symbol { width: var(--f-symbol); height: var(--f-symbol); flex: none; }

.fahne-wort {
  font: 400 var(--f-wort)/1.05 var(--schrift-titel);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgb(0 0 0 / .4), 0 0 3px rgb(0 0 0 / .35);
}

.fahne > :is(a, button):focus-visible { outline: 3px dashed var(--tinte); outline-offset: 3px; }

@media (hover: hover) {
  .fahne:not(.aktiv) > :is(a, button):hover { --hoch: -8px; }
}

.fahne:not(.aktiv) > :is(a, button):is(:active, .leuchtet) { --hoch: -8px; }

/* aktuelle Seite: höheres Fähnchen mit heller Kante, darauf ihr Monster */
.fahne.aktiv > a {
  height: calc(var(--f-aktiv) + var(--b-hoch) * .5);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6), 0 2px 6px rgb(0 0 0 / .35);
}

.fahne.aktiv > a,
.fahne-monster { animation: rausrutschen .7s .15s cubic-bezier(.3, 1.5, .5, 1) both; }

@keyframes rausrutschen {
  from { translate: 0 calc(var(--f-aktiv) * .7); }
  to { translate: 0 0; }
}

.fahne-monster {
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: calc(var(--f-aktiv) + var(--b-hoch) * .5 - 6px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.fahne-monster-wippt {
  transform-origin: 50% 100%;
  animation: wippen 2.6s ease-in-out infinite;
  will-change: transform;
}

.fahne-monster .monster {
  width: auto;
  height: var(--monster-h);
  pointer-events: auto;
  transform-origin: 50% 100%;
}

@keyframes wippen {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg) translateY(-2px); }
}

/* Videos: „Kommt bald!“ */
.bald {
  position: absolute;
  left: 50%;
  bottom: calc(var(--f-hoch) + var(--b-hoch) * .5 + 14px);
  z-index: 5;
  padding: 7px 12px 5px;
  font: 400 18px/1 var(--schrift-titel);
  white-space: nowrap;
  color: var(--tinte);
  background: var(--zettel-gelb);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .25), 0 8px 12px -5px rgb(0 0 0 / .5);
  translate: -50% 8px;
  rotate: -4deg;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, translate .35s cubic-bezier(.3, 1.6, .5, 1);
}

.fahne.zeigt-bald .bald { opacity: 1; translate: -50% 0; }
.fahne.zeigt-bald > button { --hoch: -8px; }

@media (max-width: 640px) {
  .bald { font-size: 16px; }
}


/* Monster auf dem Blatt – in den Textdateien per [MONSTER name …]:
   am rechten (oder linken) Rand, und der Text fließt daran vorbei … */
.monster-bild {
  float: right;
  width: 140px;
  margin: -6px 0 6px 18px;
  transform-origin: 50% 100%;
}

.monster-bild.monster-links { float: left; margin: -6px 18px 6px 0; }
.monster-bild.monster-gross { width: 220px; }
.monster-bild.schuftet { animation: schuften 3.2s ease-in-out infinite; }

@media (max-width: 640px) {
  .monster-bild { width: 104px; }
  .monster-bild.monster-gross { width: 150px; }
}

/* … oder groß unten rechts auf dem Blatt (wie das Krawatten-Monster) */
.mit-monster-unten .inhalt { padding-bottom: 210px; }

.monster-unten {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 26px;
  width: 190px;
  transform-origin: 50% 100%;
}

@media (max-width: 640px) {
  .mit-monster-unten .inhalt { padding-bottom: 170px; }
  .monster-unten { width: 150px; right: 14px; bottom: 18px; }
}

/* NOTE: leiser, kleiner Hinweis */
.klein { color: var(--tinte-weich); }

/* Zwischentitel: SMALL und SMALLER */
.zwischentitel {
  margin: 1.3em 0 .3em;
  font: 400 clamp(22px, 2.8vw, 28px)/1.15 var(--schrift-titel);
  color: var(--tinte);
  -webkit-text-stroke: 0;
}

.zwischentitel-klein {
  margin: 1em 0 .2em;
  font: 400 clamp(19px, 2.2vw, 22px)/1.2 var(--schrift-titel);
  color: var(--tinte);
  -webkit-text-stroke: 0;
}

.inhalt > :is(.zwischentitel, .zwischentitel-klein):first-child { margin-top: 0; }

/* Diese Bausteine beginnen immer unterhalb eines Monsters am Rand */
:is(.zettel-reihe, .spiele-liste, .link-zeile, .knopf-zeile, .zwischentitel) { clear: both; }

/* Blatt ohne Balken-Überschrift: Platz für den Blattkopf lassen */
.ohne-balken .inhalt { padding-top: calc(var(--o) * .62); }


/* 12. Monster, Funkeln ---------------------------------------------------------- */

.monster {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.monster.wackeln { animation: wackeln .7s ease-in-out; }

@keyframes wackeln {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-9deg) translateY(-6px); }
  40% { transform: rotate(7deg); }
  60% { transform: rotate(-5deg) translateY(-3px); }
  80% { transform: rotate(3deg); }
}

.gespiegelt { scale: -1 1; }

/* Monster, das beim Scrollen von rechts aufs letzte Blatt kommt */
.gucki {
  position: absolute;
  z-index: 4;
  right: -40px;
  bottom: 18px;
  width: 120px;
  pointer-events: none;
}

.gucki-rahmen {
  will-change: transform;
  transform-origin: 70% 100%;
  translate: calc(var(--raus, 1) * var(--raus-weg, 115%)) 0;
  rotate: calc(-6deg - var(--raus, 1) * 8deg);
  transition: translate .45s ease-out, rotate .45s ease-out;
}

.gucki.von-allein .gucki-rahmen { transition: translate 2.2s cubic-bezier(.3, 1.1, .5, 1), rotate 2.2s ease-in-out; }
.gucki img { width: 100%; pointer-events: auto; transform-origin: 50% 100%; }

@media (max-width: 640px) {
  .gucki { right: -28px; width: 90px; bottom: 12px; }
}

.funkeln { position: relative; }

.stern {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--g, 18px);
  height: var(--g, 18px);
  color: var(--gold);
  pointer-events: none;
  scale: 0;
  animation: funkeln var(--dauer, 3.4s) var(--d, 0s) ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgb(255 214 90 / .9));
}

/* Glimmerstern auf dem Spielebild: ein einziger, additiv gemischt (plus-lighter),
   der jedes Mal an einer anderen, zufälligen Stelle aufblitzt (seite.js) */
.spiel-bild .glimmer {
  --g: 58px;
  z-index: 3;
  margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);   /* x/y = Mitte des Sterns */
  color: #fff;
  will-change: transform;
  animation: funkeln-oft 2.8s ease-in-out infinite;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgb(255 190 60));
}

@keyframes funkeln-oft {
  0%, 30%, 100% { scale: 0; rotate: 0deg; }
  45% { scale: 1.2; rotate: 25deg; }
  58% { scale: .65; rotate: 40deg; }
  70% { scale: 1; rotate: 55deg; }
  86% { scale: 0; rotate: 75deg; }
}

@keyframes funkeln {
  0%, 62%, 100% { scale: 0; rotate: 0deg; }
  74% { scale: 1; rotate: 50deg; }
  84% { scale: .55; rotate: 80deg; }
  92% { scale: .85; rotate: 100deg; }
}

.funke {
  position: fixed;
  z-index: 100;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  color: var(--gold);
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgb(255 214 90 / .9));
}


/* 13. Bausteine: schuftendes Monster, Limo-Zettel, Listen, Highscore-Knopf ---- */

/* Monster mit „schuftet“: hebt ab und zu tief Luft holend an */
@keyframes schuften {
  0%, 60%, 100% { transform: scale(1, 1); }
  66% { transform: scale(1.04, .95); }
  72% { transform: scale(.97, 1.04) translateY(-4px); }
  80% { transform: scale(1, 1); }
}

/* Mit Limo bedanken: bunte Klebezettel ([ZETTEL …]) */
.zettel-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 640px;
  margin: 1.2em auto 1.4em;
}

.zettel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px 20px;
  color: var(--tinte);
  text-align: center;
  text-decoration: none;
  -webkit-text-stroke: 0;
  background: var(--farbe);
  border-radius: 2px 2px 3px 18px / 2px 2px 3px 8px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .15), 0 12px 14px -9px rgb(0 0 0 / .55);
  rotate: var(--dreh);
  -webkit-tap-highlight-color: transparent;
  /* Zurückdrehen später und langsamer als das Hindrehen –
     so bewegen sich zwei Zettel nie im Gleichtakt */
  transition: rotate .6s .1s ease-out, translate .6s .1s ease-out;
}

.zettel:nth-child(1) { --farbe: #fff1a3; --dreh: -2.5deg; }
.zettel:nth-child(2) { --farbe: #ffd9b5; --dreh: -1deg; }
.zettel:nth-child(3) { --farbe: #cfe6ff; --dreh: 1.5deg; }

.zettel:active { rotate: 0deg; translate: 0 2px; }
.zettel:focus-visible { outline: 3px dashed var(--koenigsblau); outline-offset: 5px; }

@media (hover: hover) {
  .zettel:hover { rotate: 0deg; translate: 0 -3px; transition-duration: .25s; transition-delay: 0s; }
}

.zettel svg { width: min(100%, 96px); height: 84px; color: var(--tinte); overflow: visible; }
.zettel-name { margin-top: 8px; font: 400 26px/1.05 var(--schrift-titel); }
.zettel-preis { margin-top: 6px; font: 400 34px/1 var(--schrift-titel); color: var(--koenigsblau); }

@media (max-width: 640px) {
  .zettel-reihe { gap: 10px; }
  .zettel { padding: 12px 4px 14px; }
  .zettel svg { height: 64px; }
  .zettel-name { font-size: 18px; }
  .zettel-preis { font-size: 23px; }
}

/* Dampf über dem Kaffee, Bläschen in der Limo, klopfendes Herz */
.dampf path { animation: dampf 3s ease-in-out infinite; }
.dampf path:nth-child(2) { animation-delay: -1s; }
.dampf path:nth-child(3) { animation-delay: -2s; }

@keyframes dampf {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.blasen circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: blubbern var(--dauer, 2.8s) var(--verz, 0s) ease-in infinite;
}

@keyframes blubbern {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  12% { opacity: 1; }
  45% { transform: translate(1.6px, -21px) scale(.85); }
  75% { transform: translate(-1.2px, -38px) scale(1); opacity: 1; }
  100% { opacity: 0; transform: translate(.6px, -50px) scale(1.15); }
}

.herz-schlag { transform-origin: 60px 60px; animation: herz 1.6s ease-in-out infinite; }

@keyframes herz {
  0%, 60%, 100% { transform: scale(1); }
  70% { transform: scale(1.1); }
  80% { transform: scale(.98); }
  88% { transform: scale(1.06); }
}

/* Listen (Zeilen mit „- “ am Anfang) */
.liste { margin: 0 0 .7em; padding-left: 1.2em; list-style: none; }
.liste li { position: relative; }
.liste li::before { content: "–"; position: absolute; left: -1em; color: var(--tinte-weich); }

.knopf-zeile { margin: .6em 0 .3em; }
.loeschen-status { min-height: 1.7em; color: #2f7a46; }


/* 14. Fußzeile: Impressum & Datenschutz schweben über der Tischplatte ------------- */

.tisch-fuss { max-width: 900px; margin: 40px auto 0; }

.tisch-fuss ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tisch-fuss a {
  position: relative;
  display: inline-block;
  padding: 4px;
  font: 400 22px/1.2 var(--schrift-titel);
  color: var(--holz-text);
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(255 240 215 / .6);
  animation: schweben 5.5s ease-in-out infinite;
}

.tisch-fuss li:nth-child(2) a { animation-delay: -2.7s; }
.tisch-fuss a:focus-visible { outline: 3px dashed var(--holz-text); outline-offset: 4px; }

@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}


/* 15. Bewegung reduzieren -------------------------------------------------------
   Bis zur finalen Version auskommentiert, damit alle Animationen zu sehen sind.

AUS-ANFANG
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stern { display: none; }
}
AUS-ENDE */