/* Stil „Sticker“ (gewählt 15.10.2026): hell, verspielt. Tinte-Kanten mit hartem Versatz-Schatten, Polaroid, Stempel „Jüchen“, Punktraster. */
.stil-sticker {
  --grund: radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--si) 24%, transparent) 1.3px, transparent 1.7px) 0 0 / 22px 22px, var(--hell);
  --text: var(--nacht);
  --text-leise: var(--leise);
  --link: var(--si);
  --fokus: var(--si);
  --radius: 16px;
  --tinte: 2px solid var(--nacht);
  --hart: 4px 4px 0 var(--nacht);
  --kasten-bg: var(--si);
  --kasten-text: #fff;
  --pille-bg: #fff;
  --pille-text: var(--nacht);
  --pille-rand: var(--tinte);
  --pille-schatten: 3px 3px 0 var(--nacht);
  --chip-bg: #fff;
  --chip-text: var(--nacht);
  --chip-rand: var(--tinte);
  --chip-schatten: 3px 3px 0 var(--nacht);
  --chip-an-bg: var(--si);
  --chip-an-text: #fff;
  --chip-an-rand: var(--tinte);
  --tafel-bg: #fff;
  --tafel-text: var(--nacht);
  --tafel-rand: var(--tinte);
  --tafel-schatten: 6px 6px 0 var(--nacht);
  --knopf-bg: var(--si);
  --knopf-text: #fff;
  --knopf-rand: var(--tinte);
  --knopf2-bg: #fff;
  --knopf2-text: var(--nacht);
  --knopf2-rand: var(--tinte);
  --knopf-schatten: var(--hart);
  --count-bg: var(--si);
  --count-text: #fff;
  --count-rand: var(--tinte);
  --count-schatten: 6px 6px 0 var(--nacht);
  --weg-bg: #fff;
  --weg-text: var(--nacht);
  --weg-rand: var(--tinte);
  --weg-schatten: var(--hart);
  --form-bg: #fff;
  --form-text: var(--nacht);
  --form-rand: var(--tinte);
  --form-schatten: 6px 6px 0 var(--nacht);
  --feld-rand: var(--nacht);
  --fehler-text: var(--fehler);
  --teilen-rand: var(--nacht);
}
/* Polaroid + Stempel */
.stil-sticker .foto {
  width: 72%; margin: .5rem 0 1.8rem .4rem; padding: .6rem .6rem 2.4rem; background: #fff;
  border: var(--tinte); border-radius: 6px; box-shadow: 6px 6px 0 var(--nacht); transform: rotate(-3deg);
}
.stil-sticker .foto img { aspect-ratio: 4 / 5; border-radius: 2px; } /* ganzer Ausschnitt wie auf bastiweyers.de, nie reinzoomen */
/* Hinweis wie eine Polaroid-Beschriftung im unteren Rand, links (rechts sitzt der Stempel) */
.stil-sticker .ki-hinweis { position: absolute; left: .8rem; bottom: .55rem; margin: 0; color: var(--leise); }
.stil-sticker .stempel {
  display: block; position: absolute; right: -2.6rem; bottom: 3.4rem; margin: 0; transform: rotate(-12deg);
  font: 700 1.6rem/1 Zilla, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: var(--si);
  border: 4px solid var(--si); border-radius: 10px; padding: .3rem .7rem; background: rgb(255 255 255 / .9);
}
/* Überschrift: großer Satz in Tinte, Marker auf „einfach.“, kleiner Kasten als Etikett */
.stil-sticker .buehne h1 .klein { display: inline-block; transform: rotate(-2deg); margin-bottom: .5rem; border: var(--tinte); box-shadow: 3px 3px 0 var(--nacht); }
.stil-sticker .buehne h1 .gross { background: none; color: var(--nacht); padding: 0; font-size: clamp(2.5rem, 1.7rem + 3.6vw, 3.1rem); line-height: 1.1; }
.stil-sticker mark { background: linear-gradient(transparent 58%, var(--tint) 58%); color: inherit; padding: 0 .06em; }
.stil-sticker section > .kasten { transform: rotate(-1.5deg); border: var(--tinte); box-shadow: 3px 3px 0 var(--nacht); }
.stil-sticker .pillen li:nth-child(odd) { transform: rotate(-1.2deg); }
.stil-sticker .pillen li:nth-child(even) { transform: rotate(1deg); }
.stil-sticker .pillen-klein li:nth-child(n) { transform: none; }
/* Gedrückt = Schatten weg, das Element rutscht in die Fläche */
.stil-sticker .themen-wahl label:active, .stil-sticker .zeiten label:active,
.stil-sticker .knopf:active, .stil-sticker .weg:active { transform: translate(3px, 3px); box-shadow: none; }
.stil-sticker .weg:hover { box-shadow: 6px 6px 0 var(--nacht); }
.stil-sticker .thema-tafel { transform: rotate(-.6deg); }
.stil-sticker .countdown { transform: rotate(.8deg); outline: 2px dashed rgb(255 255 255 / .55); outline-offset: -10px; }
.stil-sticker .countdown .knopf.haupt { background: #fff; color: var(--si); }
.stil-sticker .countdown :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  /* Der eine inszenierte Moment: der Stempel „Jüchen“ knallt einmal aufs Polaroid */
  .stil-sticker .stempel { animation: stempel-drauf .45s var(--schwung) .5s both; }
  @keyframes stempel-drauf {
    from { opacity: 0; transform: rotate(-12deg) scale(2.4); }
    70% { opacity: 1; transform: rotate(-12deg) scale(.92); }
  }
  .stil-sticker .auftakt li { animation-name: sticker-rein; }
  @keyframes sticker-rein { from { opacity: 0; transform: translateY(-.8rem) rotate(-8deg) scale(1.08); } }
}

/* 16.10.2026: Polaroid als kleines Bild rechts neben der Überschrift. Hinweis unter dem Bild statt im Rand (zu schmal). */
.stil-sticker .buehne-kopf .foto { width: auto; margin: .3rem 0 0; padding: .4rem .4rem .5rem; box-shadow: 4px 4px 0 var(--nacht); transform: rotate(3deg); }
.stil-sticker .buehne-kopf .ki-hinweis { position: static; margin: .35rem 0 0; font-size: .875rem; line-height: 1.25; }
.stil-sticker .buehne-kopf .stempel { right: auto; left: -1.4rem; bottom: 2.6rem; font-size: 1rem; border-width: 3px; padding: .2rem .45rem; }
.stil-sticker .buehne-kopf h1 .gross { font-size: clamp(2.05rem, 1.4rem + 3vw, 2.7rem); }
.stil-sticker .leiste { --leiste-bg: var(--hell); --leiste-rand: var(--tinte); }
.stil-sticker .online { box-shadow: 4px 4px 0 var(--nacht); transform: rotate(-.6deg); }
.stil-sticker .video-bild { box-shadow: 5px 5px 0 var(--nacht); transform: rotate(-1deg); }
.stil-sticker .video-bild .ki-hinweis { position: static; margin: .45rem 0 0; }