/* =====================================================================
   restkind.live · Aussehen
   Farben, Schriften und Abstände stehen ganz oben unter "SCHRAUBEN".
   Wer nur Texte ändern will, muss hier gar nichts anfassen.
   ===================================================================== */

/* ------------------------------- SCHRAUBEN ------------------------- */
:root{
  --schwarz:#000000;
  --rot:#fe0000;            /* das einzige Rot der Seite */
  --weiss:#e8e2da;          /* nie reines Weiß, das sticht auf Schwarz */
  --grau:#8f8880;
  --grau-dunkel:#3a3632;

  --breite:1120px;          /* maximale Textbreite */
  --luft:clamp(44px,5.2vw,76px);
  /* Ein Abstand für alles innerhalb eines Abschnitts: Überschrift zu
     Inhalt, Block zu Block. Zusammen mit --luft ergibt das einen
     gleichmäßigen Takt von oben bis unten. */
  --takt:clamp(1.2rem,2vw,1.7rem);
  --kopfhoehe:68px;   /* Abstand oben und unten in jedem Abschnitt (war 72 bis 140 px, zu viel Leere) */

  --kritzel:"restkind Kritzel Klein","restkind Kritzel",system-ui,sans-serif;
  --lauf:"restkind Rund",ui-rounded,ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
}

@font-face{
  font-family:"restkind Kritzel Klein";
  src:url("schrift/restkind-kritzel-klein.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"restkind Kritzel";
  src:url("schrift/restkind-kritzel.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"restkind Rund";
  src:url("schrift/restkind-rund.woff2") format("woff2");
  font-display:swap;
}

/* ------------------------------- Grundlage ------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Wenn ein Element das Attribut hidden traegt, ist es weg, egal welche
   display-Regel weiter unten steht. Ohne das hier blieb der leere
   Live-Streifen sichtbar, solange die Twitch-Abfrage nichts liefert. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--schwarz);color:var(--weiss);
  font-family:var(--lauf);font-size:clamp(18px,1.25vw,20.5px);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--weiss)}

/* Korn über allem, sehr leise, sonst wird die Schrift matschig */
#korn{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes treiben{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(1.04)}
}

/* ------------------------------- Bausteine ------------------------- */
.mitte{width:min(100% - 2.4rem,var(--breite));margin-inline:auto}
.eng{max-width:62ch}

section{position:relative;z-index:1;padding-block:var(--luft)}

h1,h2,h3{font-family:var(--kritzel);font-weight:400;line-height:1.02;margin:0;
  -webkit-text-stroke:.9px currentColor;paint-order:stroke fill}
h2{font-size:clamp(40px,7vw,76px);letter-spacing:.01em}
h3{font-size:clamp(24px,3vw,32px);letter-spacing:.01em;-webkit-text-stroke:.6px currentColor}
h2 .rot,h3 .rot{color:var(--rot)}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.gross{font-size:clamp(21px,2.2vw,26px);line-height:1.5}
.leise{color:var(--grau)}
.klein{font-size:.86rem;letter-spacing:.02em}

/* Der rote Bodenstrich, das verbindende Element über alle Assets */
.strich{width:100%;max-width:900px;margin:0;opacity:.95}
.strich.voll{max-width:none}
hr.strich-trenner{
  border:0;height:38px;margin:0;
  background:url("bilder/strich.svg") center/100% 100% no-repeat;opacity:.55;
}

/* Knöpfe */
.knopf{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--kritzel);font-size:clamp(19px,2vw,23px);
  -webkit-text-stroke:.5px currentColor;
  text-decoration:none;padding:.62em 1.15em;
  border:2px solid var(--rot);color:var(--weiss);background:transparent;
  transition:background .18s,color .18s,transform .18s;
}
.knopf:hover,.knopf:focus-visible{background:var(--rot);color:#fff;transform:translateY(-2px)}
.knopf.voll{background:var(--rot);color:#fff}
/* Beim Draufzeigen dreht sich der volle Knopf um, statt heller zu werden.
   Die Seite hat genau ein Rot, Zustaende zeigen sich ueber Umkehr. */
.knopf.voll:hover,.knopf.voll:focus-visible{background:transparent;color:var(--rot)}
.knopf.leise-knopf{border-color:var(--grau-dunkel)}
.knopf.leise-knopf:hover,.knopf.leise-knopf:focus-visible{background:var(--grau-dunkel);color:var(--weiss)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

/* ------------------------------- Kopfleiste ------------------------ */
#kopfbereich{position:fixed;top:0;left:0;right:0;z-index:50}
#kopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1.2rem,4vw,2.4rem);
  background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--grau-dunkel);
  transition:opacity .3s ease;
}
/* Ohne Knopf: die Marke steht links, das Menü in der Mitte. */
#kopf nav{margin-inline:auto}
#kopf img{width:34px}
#kopf nav{display:flex;gap:1.4rem;font-family:var(--kritzel);font-size:19px;
  -webkit-text-stroke:.4px currentColor}
/* Beim Draufzeigen wird der Menuepunkt rot und kritzeliger, dieselbe Idee
   wie bei den Kacheln unten: nicht heller, sondern mehrfach nachgezogen.
   Die zwei Kopien kommen aus data-wort und liegen leicht versetzt darueber. */
#kopf nav a{position:relative;text-decoration:none;color:var(--grau);
  transition:color .18s ease}
#kopf nav a::before,
#kopf nav a::after{
  content:attr(data-wort);position:absolute;left:0;top:0;white-space:nowrap;
  color:var(--rot);opacity:0;pointer-events:none;transition:opacity .18s ease;
}
#kopf nav a::before{transform:translate(.5px,-.6px) rotate(-.7deg);
  -webkit-text-stroke:.28px currentColor}
#kopf nav a::after {transform:translate(-.6px,.5px) rotate(.8deg);
  -webkit-text-stroke:.18px currentColor}
#kopf nav a:hover,#kopf nav a:focus-visible{color:var(--rot)}
#kopf nav a:hover::before,#kopf nav a:focus-visible::before{opacity:.7}
#kopf nav a:hover::after, #kopf nav a:focus-visible::after {opacity:.45}
#kopf .knopf{font-size:18px;padding:.4em .9em}

/* ---------- Menü fürs Handy -----------------------------------------
   Unter 860 px ist für sechs Menüpunkte kein Platz. Statt sie einfach
   verschwinden zu lassen, wandern sie hinter drei krumme Striche.
   Der Knopf sitzt rechts in der Kopfleiste, das Menü legt sich als
   ganze Fläche darüber. */
#menueknopf{
  display:none;background:none;border:0;padding:.25rem;cursor:pointer;
  width:42px;height:42px;line-height:0;color:var(--grau);
  transition:color .2s ease;
}
#menueknopf svg{width:100%;height:100%;display:block}
#menueknopf .zu{display:none}
#menueknopf[aria-expanded="true"]{color:var(--rot)}
#menueknopf[aria-expanded="true"] .auf{display:none}
#menueknopf[aria-expanded="true"] .zu{display:block}

#handymenue{
  position:fixed;inset:0;z-index:46;
  background:rgba(0,0,0,.96);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(90px,17vh,150px) 2rem clamp(70px,10vh,90px);
  animation:menueauf .22s ease-out;
}
#handymenue nav{display:flex;flex-direction:column;gap:clamp(.35rem,2.2vh,1.1rem)}
#handymenue a{
  font-family:var(--kritzel);font-size:clamp(32px,9.5vw,52px);line-height:1.06;
  color:var(--weiss);text-decoration:none;-webkit-text-stroke:.7px currentColor;
  padding:.12em 0;
}
#handymenue a:nth-child(odd){rotate:-1.3deg}
#handymenue a:nth-child(even){rotate:1deg}
#handymenue a:hover,#handymenue a:focus-visible,#handymenue a:active{color:var(--rot)}
@keyframes menueauf{from{opacity:0}to{opacity:1}}
body.menue-offen{overflow:hidden}

@media (max-width:860px){#menueknopf{display:block}}

/* ------------------------------- Kopfbild -------------------------- */
#oben{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  /* oben: Kopfleiste plus derselbe Abstand wie überall, unten der Takt */
  padding-block:calc(var(--kopfhoehe) + var(--luft)) var(--luft);overflow:hidden;
}
#oben .raster{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1rem,4vw,3rem);
  align-items:center;width:100%;
}
#oben .spalte{display:flex;flex-direction:column;justify-content:center}

#oben .wortmarke{width:min(620px,96%);height:auto;display:block}
#oben .satz{font-size:clamp(21px,2.5vw,30px);line-height:1.4;max-width:26ch;
  font-family:var(--kritzel);-webkit-text-stroke:.5px currentColor}
/* ---------- Das Kind, in Ebenen wie im OBS-Hintergrund ----------
   Reihenfolge im HTML: Rumpf, Arme (Knie, Schoß), Haube, Augen, Mund.
   Maße stammen aus restkind-hintergrund-animiert.html (497 × 655). */
#oben .figur{
  position:relative;justify-self:center;align-self:end;
  width:min(100%,clamp(230px,30vw,430px));aspect-ratio:497/655;
}
#oben .figur .kopfgruppe{filter:drop-shadow(0 16px 48px rgba(0,0,0,.9))}
#oben .figur img{position:absolute;width:auto;height:auto}
/* Die Hülle liegt deckungsgleich über der Figur, damit alle Prozentwerte
   darin weiter stimmen. Sie trägt das Atmen für Körper, Augen und Mund. */
#oben .figur .kopfgruppe{position:absolute;inset:0;transform-origin:50% 100%;
  animation:atmen 4.6s ease-in-out infinite}
#oben .figur .rumpf         {left:  0.00%;top:  0.00%;width:100.00%}
#oben .figur .arme-b        {left:  0.00%;top:  0.00%;width:100.00%}
#oben .figur .arme-c        {left:  0.00%;top:  0.00%;width:100.00%}
#oben .figur .haube         {left:  0.00%;top:  0.00%;width:100.00%}
#oben .figur .auge-l-auf    {left: 28.77%;top: 40.15%;width:14.08%}
#oben .figur .auge-r-auf    {left: 49.50%;top: 34.35%;width:16.30%}
#oben .figur .auge-l-halb   {left: 29.18%;top: 41.22%;width:13.68%}
#oben .figur .auge-r-halb   {left: 49.90%;top: 35.57%;width:15.90%}
#oben .figur .auge-l-gross  {left: 28.97%;top: 39.39%;width:13.68%}
#oben .figur .auge-r-gross  {left: 49.70%;top: 33.74%;width:15.90%}
#oben .figur .mund-normal   {left: 45.47%;top: 47.18%;width:15.49%}
#oben .figur .mund-grinsen  {left: 46.48%;top: 47.79%;width:13.48%}
#oben .figur .mund-verkniffen{left: 45.07%;top: 45.95%;width:15.69%}
#oben .figur .mund-breit    {left: 45.07%;top: 45.95%;width:15.90%}
#oben .figur .mund-zaehne   {left: 45.27%;top: 45.95%;width:15.69%}
#oben .figur .mund-lachen   {left: 45.07%;top: 45.95%;width:16.30%}
#oben .figur .mund-o        {left: 45.27%;top: 45.95%;width:15.49%}
#oben .figur .mund-schmoll  {left: 45.07%;top: 45.95%;width:16.10%}
/* Alle Gesichtsebenen starten unsichtbar, die Animation blendet sie ein. */
#oben .figur [class^="auge-"],
#oben .figur [class^="mund-"]{opacity:0}

@keyframes atmen{
  0%,100%{transform:scale(1) translateY(0)}
  50%    {transform:scale(1.006) translateY(-.3%)}}
/* Die Grimassenrunde dauert 34 Sekunden. Über die Hälfte davon schaut er
   einfach finster, das ist Absicht: Grimassen wirken nur, wenn sie selten
   sind. Die Prozentwerte sind Sekunden geteilt durch 34. Übernommen aus dem
   OBS-Hintergrund, damit Stream und Website denselben Kleinen zeigen. */
@keyframes m_normal{0%{opacity:0} 0.882%{opacity:1} 18.235%{opacity:1} 19.118%{opacity:0} 25%{opacity:0} 25.882%{opacity:1} 32.941%{opacity:1} 33.824%{opacity:0} 56.471%{opacity:0} 57.353%{opacity:1} 66.765%{opacity:1} 67.647%{opacity:0} 78.235%{opacity:0} 79.118%{opacity:1} 87.353%{opacity:1} 88.235%{opacity:0} 94.118%{opacity:0} 95%{opacity:1} 99.118%{opacity:1} 100%{opacity:0}}
@keyframes m_verkniffen{0%{opacity:0} 19.118%{opacity:0} 20%{opacity:1} 24.118%{opacity:1} 25%{opacity:0} 100%{opacity:0}}
@keyframes m_breit{0%{opacity:0} 33.824%{opacity:0} 34.706%{opacity:1} 38.824%{opacity:1} 39.706%{opacity:0} 100%{opacity:0}}
@keyframes m_zaehne{0%{opacity:0} 39.706%{opacity:0} 40.588%{opacity:1} 46.176%{opacity:1} 47.059%{opacity:0} 52.941%{opacity:0} 53.824%{opacity:1} 55.588%{opacity:1} 56.471%{opacity:0} 100%{opacity:0}}
@keyframes m_lachen{0%{opacity:0} 47.059%{opacity:0} 47.941%{opacity:1} 52.059%{opacity:1} 52.941%{opacity:0} 100%{opacity:0}}
@keyframes m_o{0%{opacity:0} 67.647%{opacity:0} 68.529%{opacity:1} 71.471%{opacity:1} 72.353%{opacity:0} 100%{opacity:0}}
@keyframes m_schmoll{0%{opacity:0} 72.353%{opacity:0} 73.235%{opacity:1} 77.353%{opacity:1} 78.235%{opacity:0} 100%{opacity:0}}
@keyframes m_grinsen{0%{opacity:0} 88.235%{opacity:0} 89.118%{opacity:1} 93.235%{opacity:1} 94.118%{opacity:0} 100%{opacity:0}}
/* Augen: offen, viermal je Runde ein Lidschlag von 0,22 s, und beim Lachen
   zusammengekniffen, beim kleinen O weit auf. */
@keyframes a_auf{0%{opacity:0} 0.147%{opacity:1} 6.912%{opacity:1} 7.059%{opacity:0} 7.706%{opacity:0} 7.853%{opacity:1} 31.618%{opacity:1} 31.765%{opacity:0} 32.412%{opacity:0} 32.559%{opacity:1} 46.912%{opacity:1} 47.059%{opacity:0} 52.941%{opacity:0} 53.088%{opacity:1} 63.382%{opacity:1} 63.529%{opacity:0} 64.176%{opacity:0} 64.324%{opacity:1} 67.5%{opacity:1} 67.647%{opacity:0} 78.235%{opacity:0} 78.382%{opacity:1} 82.794%{opacity:1} 82.941%{opacity:0} 83.588%{opacity:0} 83.735%{opacity:1} 99.853%{opacity:1} 100%{opacity:0}}
@keyframes a_halb{0%{opacity:0} 7.059%{opacity:0} 7.162%{opacity:1} 7.265%{opacity:0} 7.5%{opacity:0} 7.603%{opacity:1} 7.706%{opacity:0} 31.765%{opacity:0} 31.868%{opacity:1} 31.971%{opacity:0} 32.206%{opacity:0} 32.309%{opacity:1} 32.412%{opacity:0} 47.059%{opacity:0} 47.206%{opacity:1} 52.794%{opacity:1} 52.941%{opacity:0} 63.529%{opacity:0} 63.632%{opacity:1} 63.735%{opacity:0} 63.971%{opacity:0} 64.074%{opacity:1} 64.176%{opacity:0} 82.941%{opacity:0} 83.044%{opacity:1} 83.147%{opacity:0} 83.382%{opacity:0} 83.485%{opacity:1} 83.588%{opacity:0} 100%{opacity:0}}
@keyframes a_gross{0%{opacity:0} 67.647%{opacity:0} 67.794%{opacity:1} 78.088%{opacity:1} 78.235%{opacity:0} 100%{opacity:0}}

/* Ruhe B: Hände auf den Knien. Ruhe C: Hände im Schoß. */
#oben .figur .arme-b,#oben .figur .arme-c{display:none}
#oben .figur.ruhe-b .arme-b,#oben .figur.ruhe-c .arme-c{display:block}
/* Die Aktionen: Videos mit 220 px Bühne links neben der Figur, damit
   Sprühnebel, Flamme und Farbklecks ganz ins Bild passen (717 × 655).
   Solange eins läuft, ist die Ebenenfigur unsichtbar. */
#oben .figur video.aktion{position:absolute;left:-44.266%;top:0;width:144.266%;height:100%;
  object-fit:fill;visibility:hidden;pointer-events:none}
#oben .figur video.aktion.an{visibility:visible}
#oben .figur.spielt .kopfgruppe{visibility:hidden;animation:none}
/* Safari kann kein durchsichtiges WebM. Dort laufen MP4 auf Schwarz,
   und screen rechnet das Schwarz heraus. */
#oben .figur.ohne-alpha video.aktion{mix-blend-mode:screen}
#oben .figur .mund-normal    {animation:m_normal     34s linear infinite}
#oben .figur .mund-grinsen   {animation:m_grinsen    34s linear infinite}
#oben .figur .mund-verkniffen{animation:m_verkniffen 34s linear infinite}
#oben .figur .mund-breit     {animation:m_breit      34s linear infinite}
#oben .figur .mund-zaehne    {animation:m_zaehne     34s linear infinite}
#oben .figur .mund-lachen    {animation:m_lachen     34s linear infinite}
#oben .figur .mund-o         {animation:m_o          34s linear infinite}
#oben .figur .mund-schmoll   {animation:m_schmoll    34s linear infinite}
#oben .figur .auge-l-auf,
#oben .figur .auge-r-auf     {animation:a_auf        34s linear infinite}
#oben .figur .auge-l-halb,
#oben .figur .auge-r-halb    {animation:a_halb       34s linear infinite}
#oben .figur .auge-l-gross,
#oben .figur .auge-r-gross   {animation:a_gross      34s linear infinite}
/* Wer keine Bewegung will, sieht ihn finster und mit offenen Augen. */
@media (prefers-reduced-motion:reduce){
  #oben .figur [class^="auge-"],#oben .figur [class^="mund-"]{animation:none}
  #oben .figur .auge-l-auf,#oben .figur .auge-r-auf,
  #oben .figur .mund-normal{opacity:1}
}
#oben .boden{width:100%;height:42px;margin-top:-30px;position:relative;z-index:2}
@media (max-width:860px){
  #oben .raster{grid-template-columns:1fr;align-items:start;gap:2.4rem}
  #oben .raster > div{padding-bottom:0}
  /* Auf dem Handy sitzt das Kind klein rechts unten am Schriftzug, als
     hätte es sich dort hingesetzt. Die Bühne links für Sprühnebel und
     Flamme liegt dann über dem Schriftzug. */
  #oben .figur{width:min(44%,210px);justify-self:end;margin-top:clamp(-120px,-24vw,-60px);margin-right:2%}
  #oben .raster{gap:0}
  #oben{padding-block:calc(var(--kopfhoehe) + var(--luft)) var(--luft)}
}

/* ------------------------------- Abschnitte ------------------------ */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}

.merksatz{
  font-family:var(--kritzel);font-size:clamp(26px,3.6vw,42px);line-height:1.15;
  color:var(--rot);margin:2.2rem 0;max-width:20ch;-webkit-text-stroke:.8px currentColor;
}

/* Regeln */
#regeln{position:relative;background:var(--rot);color:#0a0a0a;overflow:hidden}
/* Das Kind mit der Haube steht rechts wie ein Siebdruck im Rot.
   Das Video ist schwarz auf weiß; multiply macht aus dem Weiß das Rot
   des Abschnitts, die Linien bleiben schwarz. Dadurch gibt es kein
   zweites Rot und keinen Kasten. Quelle: Dustins Midjourney-Clips,
   nur die ruhigen Stellen, zusammengeschnitten zu einer Schleife. */
#regeln .regelkind{
  position:absolute;right:8%;top:50%;transform:translateY(-50%);height:auto;aspect-ratio:448/564;
  /* so groß, dass sein Kopf so groß ist wie der des sitzenden Kinds oben
     (Figur clamp(230px,30vw,430px), Haube 56 % davon, hier 51 % breit) */
  width:clamp(252px,32.8vw,470px);
  mix-blend-mode:multiply;pointer-events:none;background:#fff;
}
#regeln .mitte{position:relative;z-index:1}
/* Schmaler als 1000 px: das Kind steht klein unten rechts neben den
   Sätzen, die Sätze machen ihm Platz. */
@media (max-width:1000px){
  /* unten rechts in der Lücke neben den beiden letzten Sätzen */
  #regeln .regelkind{height:auto;width:clamp(150px,38vw,330px);right:3%;top:auto;bottom:calc(var(--luft) - 18px);transform:none}
  #regeln .mitte .nachsatz{max-width:min(42ch,58%)}
}
#regeln h2{color:#000}
#regeln .liste{list-style:none;padding:0;margin:var(--takt) 0 0;
  font-family:var(--kritzel);font-size:clamp(26px,4vw,46px);line-height:1.28;color:#000;
  -webkit-text-stroke:.9px #000}
#regeln .liste li{margin-bottom:.1em}
#regeln p{color:#1a1a1a}
#regeln .nachsatz{margin-top:var(--takt);font-size:clamp(19px,2vw,24px);line-height:1.45;max-width:42ch}

/* Zeitplan */
#zeitplan .tage{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
#zeitplan .tag{
  border:2px solid var(--grau-dunkel);padding:1.1rem 1.6rem;min-width:170px;
}
#zeitplan .tag b{display:block;font-family:var(--kritzel);font-size:30px;font-weight:400;color:var(--weiss);
  -webkit-text-stroke:.6px currentColor}
#zeitplan .tag span{color:var(--rot);font-family:var(--kritzel);font-size:22px}
.offen{color:var(--grau);font-style:normal}

/* Links / dabei sein */
#dabei .karten{display:grid;gap:1rem;margin-top:var(--takt);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
#dabei .karte{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:.1rem;text-decoration:none;overflow:hidden;
  border:2px solid var(--grau-dunkel);padding:1.6rem 1.4rem 1.5rem;
  transition:border-color .2s,transform .2s,background .2s;
}
#dabei .karte .logo{width:56px;height:56px;color:#6d6862;margin-bottom:1.3rem;
  transition:color .2s,transform .25s}
#dabei .karte b{font-family:var(--kritzel);font-size:29px;font-weight:400;
  -webkit-text-stroke:.6px currentColor;line-height:1}

/* der kleine Kritzelpfeil, der beim Zeigen hereinkommt */
#dabei .karte::after{
  content:"";position:absolute;right:1.1rem;bottom:1.1rem;width:26px;height:26px;
  background:currentColor;color:var(--rot);opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.0%2049.8%20L30.0%2049.0%20L40.0%2048.8%20L50.0%2049.0%20L60.0%2048.6%20L70.0%2048.4%20L80.0%2049.7%22%20stroke-width%3D%223.2%22%20opacity%3D%221%22%2F%3E%3Cpath%20d%3D%22M20.0%2049.9%20L30.0%2049.4%20L40.0%2049.3%20L50.0%2048.9%20L60.0%2048.6%20L70.0%2048.4%20L80.0%2049.7%22%20stroke-width%3D%222.0%22%20opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M63.9%2034.1%20L70.9%2043.1%20L79.8%2050.2%20L80.0%2050.0%20L71.0%2057.0%20L63.7%2065.7%22%20stroke-width%3D%223.2%22%20opacity%3D%221%22%2F%3E%3Cpath%20d%3D%22M63.8%2034.2%20L70.9%2043.1%20L79.8%2050.2%20L79.8%2049.8%20L70.9%2056.9%20L63.8%2065.8%22%20stroke-width%3D%222.0%22%20opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.0%2049.8%20L30.0%2049.0%20L40.0%2048.8%20L50.0%2049.0%20L60.0%2048.6%20L70.0%2048.4%20L80.0%2049.7%22%20stroke-width%3D%223.2%22%20opacity%3D%221%22%2F%3E%3Cpath%20d%3D%22M20.0%2049.9%20L30.0%2049.4%20L40.0%2049.3%20L50.0%2048.9%20L60.0%2048.6%20L70.0%2048.4%20L80.0%2049.7%22%20stroke-width%3D%222.0%22%20opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M63.9%2034.1%20L70.9%2043.1%20L79.8%2050.2%20L80.0%2050.0%20L71.0%2057.0%20L63.7%2065.7%22%20stroke-width%3D%223.2%22%20opacity%3D%221%22%2F%3E%3Cpath%20d%3D%22M63.8%2034.2%20L70.9%2043.1%20L79.8%2050.2%20L79.8%2049.8%20L70.9%2056.9%20L63.8%2065.8%22%20stroke-width%3D%222.0%22%20opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
#dabei .karte:hover,#dabei .karte:focus-visible{
  border-color:var(--rot);transform:translateY(-4px);background:#0c0c0c}
#dabei .karte:hover .logo,#dabei .karte:focus-visible .logo{
  color:var(--rot);transform:rotate(-3deg) scale(1.06)}
#dabei .karte:hover::after,#dabei .karte:focus-visible::after{opacity:1;transform:translateX(0)}


/* Der Fernseher steht rechts neben dem Zeitplan, leicht schief wie
   hingestellt. Auf dem Handy kommt er klein unter den Text. */
.tvspalte{display:grid;place-items:center}
.tvspalte .tvrahmen{position:relative;display:block;width:min(380px,92%);transform:rotate(2.5deg);cursor:pointer}
.tvspalte .film{max-width:100%}
/* Rauschen nur auf der Bildröhre, nicht auf dem Gehäuse */
.tvrahmen .rauschen{position:absolute;left:14%;top:9%;width:64%;height:56%;border-radius:12%/16%;
  image-rendering:pixelated;mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity .08s}
.tvrahmen .rauschen.an{opacity:.85}


/* Kontakt */
#kontakt .zeile{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin-top:var(--takt)}
#kontakt a{color:var(--rot);text-decoration:none}
#kontakt a:hover{text-decoration:underline}

/* Fuß */
footer{
  position:relative;z-index:1;border-top:1px solid var(--grau-dunkel);
  padding:2.6rem 0 3.4rem;color:var(--grau);font-size:.9rem;
}
footer .reihe{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between}
footer a{color:var(--grau)}
footer nav{display:flex;flex-wrap:wrap;gap:1.4rem}
footer nav a{display:inline-block;padding:.4em 0}

/* Unterseiten (Impressum, Datenschutz) */
.text-seite{padding-block:clamp(110px,14vh,170px) var(--luft)}
.text-seite h1{font-size:clamp(38px,6vw,64px);margin-bottom:2rem}
.text-seite h2{font-size:clamp(24px,3vw,32px);margin:2.6rem 0 .8rem}
.text-seite .eng{max-width:70ch}
.text-seite a{color:var(--rot)}
.luecke{color:var(--rot);border-bottom:2px dashed var(--rot);font-family:var(--kritzel)}

/* --- Feinheiten, nachgereicht --- */

/* Wortmarke ist jetzt ein Vektor: sauber auf jedem Bildschirm */
#oben .wortmarke{filter:drop-shadow(0 0 60px rgba(254,0,0,.13))}


/* Chatbefehl steht wie ein Fundstück */
.befehl{
  font-family:var(--kritzel);color:var(--rot);
  font-size:clamp(24px,2.6vw,32px);-webkit-text-stroke:.6px currentColor;
  margin:.2em 0 .5em;
}

#zeitplan .nachtrag{margin-top:0;max-width:52ch}

/* Nur für Screenreader */
.nur-fuer-vorleser{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Die Gesichter im Hintergrund sind jetzt echte Zeichnungen und
   vertragen etwas mehr Präsenz als die generierten davor. */

#kopf .marke{display:flex}

/* =====================================================================
   Vierte Fassung: Filme, Randleiste, wackelnde Wortmarke, Gesichter
   ===================================================================== */

/* ---------- Filme ---------------------------------------------------
   Alle Videos haben schwarzen Grund. "screen" rechnet Schwarz weg,
   dadurch sitzen sie ohne Kasten auf der Seite, egal was darunter liegt. */
.film{
  display:block;width:100%;height:auto;
  mix-blend-mode:screen;background:#000;
  /* Der Schwarzwert der Videos ist nicht ganz schwarz. Kontrast drückt ihn
     nach unten, die weiche Maske löst die Kante des Rechtecks auf. */
  filter:contrast(1.14) brightness(.97);
  -webkit-mask-image:radial-gradient(118% 118% at 50% 50%,#000 60%,transparent 97%);
          mask-image:radial-gradient(118% 118% at 50% 50%,#000 60%,transparent 97%);
}
.kopfspalte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--takt)}
.kopfspalte .film{max-width:min(230px,60%)}
.dabei-kopf{display:flex;align-items:center;gap:clamp(1rem,4vw,2.6rem);flex-wrap:wrap}
.dabei-kopf .film{max-width:clamp(90px,11vw,150px)}

/* ---------- Wortmarke, die sich bewegt ------------------------------
   Der Schriftzug ist in acht Bündel zerlegt. Jedes kippt und wandert
   ein wenig für sich. Zusammen sieht es aus, als atme der Zug. */
#oben .wortmarke .b{transform-box:fill-box;transform-origin:50% 50%}
@keyframes zappeln{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%    {transform:translate(var(--bx,0),var(--by,0)) rotate(var(--br,0deg))}
}
#oben .wortmarke .b{animation:zappeln var(--bd,6s) ease-in-out var(--bv,0s) infinite}
.b-a{--bx:-7px; --by: 5px; --br:-1.4deg; --bd:6.4s;  --bv:0s}
.b-b{--bx: 6px; --by:-6px; --br: 1.7deg; --bd:5.2s;  --bv:.4s}
.b-c{--bx:-5px; --by:-8px; --br:-1.1deg; --bd:7.1s;  --bv:.9s}
.b-d{--bx: 8px; --by: 4px; --br: 1.9deg; --bd:5.8s;  --bv:.2s}
.b-e{--bx:-6px; --by: 7px; --br:-2.1deg; --bd:6.9s;  --bv:1.3s}
.b-f{--bx: 5px; --by:-5px; --br: 1.3deg; --bd:6.1s;  --bv:.7s}
.b-g{--bx:-9px; --by: 6px; --br:-1.6deg; --bd:7.6s;  --bv:1.7s}
.b-u{--bx: 4px; --by: 3px; --br: .8deg;  --bd:8.4s;  --bv:1.1s}

/* ---------- Leiste am Rand, dauerhaft ------------------------------- */
#rail{
  position:fixed;right:clamp(.6rem,1.6vw,1.5rem);top:50%;translate:0 -50%;
  z-index:45;display:flex;flex-direction:column;gap:.35rem;
  padding:.7rem .45rem;border:2px solid var(--grau-dunkel);
  background:rgba(0,0,0,.72);backdrop-filter:blur(5px);
  transition:opacity .3s ease,translate .3s ease;
}
#rail a{
  display:grid;place-items:center;width:46px;height:46px;color:#7a746e;
  transition:color .2s ease,transform .2s ease;
}
#rail a:hover,#rail a:focus-visible{color:var(--rot);transform:scale(1.1)}
#rail.weg{opacity:0;pointer-events:none;translate:26px -50%}

/* ---------- Logos: ruhig und wild übereinander ---------------------- */
.logohuelle{position:relative;display:block;width:100%;height:100%}
.logohuelle .logo{position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .18s ease}
.logohuelle .wild{opacity:0}
a:hover .logohuelle .ruhig,
a:focus-visible .logohuelle .ruhig{opacity:0}
a:hover .logohuelle .wild,
a:focus-visible .logohuelle .wild{opacity:1}

#dabei .karte .logohuelle{width:56px;height:56px;margin-bottom:1.3rem;
  color:#6d6862;transition:color .2s,transform .25s}
#dabei .karte:hover .logohuelle,
#dabei .karte:focus-visible .logohuelle{color:var(--rot);transform:rotate(-3deg) scale(1.07)}

/* ---------- Gesichter im Hintergrund --------------------------------
   Werden von seite.js in die Abschnitte gestreut, jedes genau einmal. */
.gesicht{
  position:absolute;z-index:0;pointer-events:none;opacity:.11;
  animation:treiben var(--gd,12s) ease-in-out var(--gv,0s) infinite;
}
section{position:relative}
section > .mitte,section > .innen{position:relative;z-index:1}
#regeln .gesicht{opacity:.13;filter:brightness(0)}
#regeln .gesicht.zuckt{opacity:.45!important}
@media (max-width:860px){.gesicht{opacity:.07}}

@media (max-width:860px){
  #rail{
    right:auto;left:0;bottom:0;top:auto;translate:0 0;width:100%;
    flex-direction:row;justify-content:center;gap:.4rem;
    border:0;border-top:1px solid var(--grau-dunkel);padding:.45rem;
  }
  #rail.weg{translate:0 26px}
  #rail a{width:52px;height:44px}
  #kopf nav.hauptmenue{display:none}
  .kopfspalte .film{max-width:min(220px,54%)}
  body{padding-bottom:60px}
}

@media (prefers-reduced-motion:reduce){
  .film{display:none}
  .kopfspalte::after{content:""}
}


/* ---------- was hier läuft ------------------------------------------
   Drei Zeilen, mehr nicht. Der Name links in Kritzelschrift, die
   Erklärung rechts im Lesetext, dieselbe Aufteilung wie in den Kacheln. */
#laeuft .sachen{list-style:none;padding:0;margin:var(--takt) 0 0;display:grid;gap:var(--takt)}
#laeuft .sachen li{
  display:grid;grid-template-columns:minmax(160px,.24fr) minmax(0,1fr);
  gap:clamp(.6rem,3vw,2.4rem);align-items:baseline;
  padding-bottom:var(--takt);border-bottom:1px solid var(--grau-dunkel);
}
#laeuft .sachen li:last-child{border-bottom:0;padding-bottom:0}
#laeuft .sachen b{
  font-family:var(--kritzel);font-weight:400;font-size:clamp(28px,3.4vw,40px);
  -webkit-text-stroke:.7px currentColor;line-height:1;color:var(--rot);
}
#laeuft .sachen span{font-size:clamp(18px,1.6vw,21px);color:var(--weiss)}
@media (max-width:640px){
  #laeuft .sachen li{grid-template-columns:1fr;gap:.4rem}
}

/* Der Zeitplan trägt jetzt einen Merksatz statt eines leeren Kastens. */
#zeitplan .merksatz{margin:var(--takt) 0}
#zeitplan .nachtrag{max-width:56ch;color:var(--grau)}


/* =====================================================================
   Die 404-Seite
   ===================================================================== */

/* ---------- 404 ------------------------------------------------------ */
#vierhundertvier{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1.6rem;
  padding:clamp(110px,16vh,180px) 1.4rem 4rem;
}
#vierhundertvier .zahl{
  font-family:var(--kritzel);font-size:clamp(84px,20vw,220px);line-height:.9;
  color:var(--rot);-webkit-text-stroke:1.4px currentColor;margin:0;
}
#vierhundertvier p{max-width:44ch;color:var(--grau)}
#vierhundertvier .kind404{position:relative;width:min(240px,52%)}
#vierhundertvier .kind404 video{opacity:.9;position:absolute;left:-44.266%;top:0;width:144.266%;height:100%;object-fit:fill;visibility:hidden;pointer-events:none}
#vierhundertvier .kind404 video.an{visibility:visible}
#vierhundertvier .kind404.ohne-alpha video{mix-blend-mode:screen}
#vierhundertvier img.figur404{width:100%;opacity:.9;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.9))}
#vierhundertvier .knopfreihe{margin-top:1rem}

/* Handy: die Kacheln klein im Zweierraster, Zeichen und Name mittig.
   Mit vier Plattformen ergibt das 2 x 2 statt 3 und eine einsame vierte. */
@media (max-width:600px){
  #dabei .karten{grid-template-columns:repeat(2,1fr);gap:.6rem}
  #dabei .karte{align-items:center;padding:1rem .4rem .9rem;gap:.5rem}
  #dabei .karte .logohuelle,#dabei .karte .logo{width:38px;height:38px;margin-bottom:0}
  #dabei .karte .logohuelle{margin-bottom:.35rem}
  #dabei .karte b{font-size:20px}
  #dabei .karte::after{display:none}
  .tvspalte .tvrahmen{width:min(240px,70%)}
}

/* ---------- Kind antippen ---------------------------------------------- */
#oben .figur{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- Regeln: Zeile für Zeile aufgesprüht ------------------------- */
#regeln .liste.spruehbereit li{position:relative;width:fit-content}
#regeln .liste.spruehbereit .zeile{display:inline-block;clip-path:inset(-20% 100% -20% 0)}
#regeln .liste.gesprueht .zeile{animation:zeile-spruehen .75s cubic-bezier(.4,.1,.6,1) calc(var(--i) * .45s) forwards}
#regeln .liste.spruehbereit li::after{
  content:"";position:absolute;top:-.3em;bottom:-.25em;left:0;width:1em;opacity:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2048%22%3E%3Ccircle%20cx%3D%2218.2%22%20cy%3D%2228.6%22%20r%3D%221.18%22%20fill-opacity%3D%220.30%22/%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2222.1%22%20r%3D%220.47%22%20fill-opacity%3D%220.58%22/%3E%3Ccircle%20cx%3D%2227.3%22%20cy%3D%2226.2%22%20r%3D%220.48%22%20fill-opacity%3D%220.31%22/%3E%3Ccircle%20cx%3D%228.3%22%20cy%3D%2231.7%22%20r%3D%220.55%22%20fill-opacity%3D%220.40%22/%3E%3Ccircle%20cx%3D%228.2%22%20cy%3D%228.3%22%20r%3D%221.09%22%20fill-opacity%3D%220.51%22/%3E%3Ccircle%20cx%3D%2222.1%22%20cy%3D%2223.6%22%20r%3D%221.43%22%20fill-opacity%3D%220.44%22/%3E%3Ccircle%20cx%3D%2222.2%22%20cy%3D%2227.5%22%20r%3D%220.77%22%20fill-opacity%3D%220.78%22/%3E%3Ccircle%20cx%3D%2223.9%22%20cy%3D%2234.8%22%20r%3D%221.17%22%20fill-opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%2223.0%22%20r%3D%220.47%22%20fill-opacity%3D%220.38%22/%3E%3Ccircle%20cx%3D%2216.9%22%20cy%3D%2215.4%22%20r%3D%220.78%22%20fill-opacity%3D%220.63%22/%3E%3Ccircle%20cx%3D%2214.3%22%20cy%3D%2226.2%22%20r%3D%221.35%22%20fill-opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%2220.3%22%20cy%3D%2235.8%22%20r%3D%221.03%22%20fill-opacity%3D%220.82%22/%3E%3Ccircle%20cx%3D%2219.3%22%20cy%3D%2216.6%22%20r%3D%221.58%22%20fill-opacity%3D%220.33%22/%3E%3Ccircle%20cx%3D%229.7%22%20cy%3D%2231.5%22%20r%3D%220.58%22%20fill-opacity%3D%220.57%22/%3E%3Ccircle%20cx%3D%2230.1%22%20cy%3D%2227.3%22%20r%3D%221.32%22%20fill-opacity%3D%220.62%22/%3E%3Ccircle%20cx%3D%2224.3%22%20cy%3D%2218.5%22%20r%3D%221.23%22%20fill-opacity%3D%220.64%22/%3E%3Ccircle%20cx%3D%2213.2%22%20cy%3D%2219.2%22%20r%3D%221.41%22%20fill-opacity%3D%220.86%22/%3E%3Ccircle%20cx%3D%229.8%22%20cy%3D%2226.2%22%20r%3D%220.47%22%20fill-opacity%3D%220.71%22/%3E%3Ccircle%20cx%3D%226.7%22%20cy%3D%221.3%22%20r%3D%221.39%22%20fill-opacity%3D%220.43%22/%3E%3Ccircle%20cx%3D%2212.2%22%20cy%3D%2232.8%22%20r%3D%220.43%22%20fill-opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%2221.7%22%20cy%3D%2227.9%22%20r%3D%220.47%22%20fill-opacity%3D%220.75%22/%3E%3Ccircle%20cx%3D%2223.6%22%20cy%3D%2228.9%22%20r%3D%220.87%22%20fill-opacity%3D%220.82%22/%3E%3Ccircle%20cx%3D%2226.7%22%20cy%3D%2228.8%22%20r%3D%221.06%22%20fill-opacity%3D%220.82%22/%3E%3Ccircle%20cx%3D%2225.9%22%20cy%3D%227.7%22%20r%3D%220.73%22%20fill-opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%2238.5%22%20r%3D%221.55%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2222.3%22%20cy%3D%2229.8%22%20r%3D%220.68%22%20fill-opacity%3D%220.57%22/%3E%3Ccircle%20cx%3D%2215.4%22%20cy%3D%2220.3%22%20r%3D%220.40%22%20fill-opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%2213.8%22%20cy%3D%2232.5%22%20r%3D%221.54%22%20fill-opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%2210.3%22%20cy%3D%2222.8%22%20r%3D%221.21%22%20fill-opacity%3D%220.29%22/%3E%3Ccircle%20cx%3D%2229.8%22%20cy%3D%2214.8%22%20r%3D%221.45%22%20fill-opacity%3D%220.77%22/%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2229.7%22%20r%3D%220.52%22%20fill-opacity%3D%220.66%22/%3E%3Ccircle%20cx%3D%2222.4%22%20cy%3D%2225.3%22%20r%3D%220.65%22%20fill-opacity%3D%220.36%22/%3E%3Ccircle%20cx%3D%2218.8%22%20cy%3D%2226.5%22%20r%3D%220.40%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2225.3%22%20cy%3D%2229.1%22%20r%3D%220.43%22%20fill-opacity%3D%220.82%22/%3E%3Ccircle%20cx%3D%2217.0%22%20cy%3D%2220.6%22%20r%3D%220.70%22%20fill-opacity%3D%220.48%22/%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%2227.5%22%20r%3D%221.42%22%20fill-opacity%3D%220.90%22/%3E%3Ccircle%20cx%3D%2212.1%22%20cy%3D%2226.2%22%20r%3D%220.50%22%20fill-opacity%3D%220.32%22/%3E%3Ccircle%20cx%3D%2217.0%22%20cy%3D%2229.9%22%20r%3D%221.39%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2237.0%22%20cy%3D%2227.2%22%20r%3D%221.03%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2218.4%22%20cy%3D%2223.4%22%20r%3D%221.03%22%20fill-opacity%3D%220.89%22/%3E%3Ccircle%20cx%3D%2227.1%22%20cy%3D%2213.5%22%20r%3D%220.71%22%20fill-opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%2237.4%22%20r%3D%221.04%22%20fill-opacity%3D%220.76%22/%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%2229.6%22%20r%3D%221.37%22%20fill-opacity%3D%220.89%22/%3E%3Ccircle%20cx%3D%2227.6%22%20cy%3D%2211.0%22%20r%3D%221.38%22%20fill-opacity%3D%220.73%22/%3E%3Ccircle%20cx%3D%2221.2%22%20cy%3D%2234.8%22%20r%3D%220.83%22%20fill-opacity%3D%220.27%22/%3E%3Ccircle%20cx%3D%2225.6%22%20cy%3D%2225.3%22%20r%3D%220.71%22%20fill-opacity%3D%220.70%22/%3E%3Ccircle%20cx%3D%2227.3%22%20cy%3D%2221.4%22%20r%3D%221.52%22%20fill-opacity%3D%220.89%22/%3E%3Ccircle%20cx%3D%2226.4%22%20cy%3D%2221.6%22%20r%3D%220.66%22%20fill-opacity%3D%220.40%22/%3E%3Ccircle%20cx%3D%2221.6%22%20cy%3D%2229.7%22%20r%3D%221.15%22%20fill-opacity%3D%220.84%22/%3E%3Ccircle%20cx%3D%2224.3%22%20cy%3D%2215.3%22%20r%3D%221.18%22%20fill-opacity%3D%220.77%22/%3E%3Ccircle%20cx%3D%2228.9%22%20cy%3D%2230.7%22%20r%3D%221.49%22%20fill-opacity%3D%220.76%22/%3E%3Ccircle%20cx%3D%2220.0%22%20cy%3D%2213.7%22%20r%3D%220.61%22%20fill-opacity%3D%220.76%22/%3E%3Ccircle%20cx%3D%2213.8%22%20cy%3D%2238.0%22%20r%3D%221.57%22%20fill-opacity%3D%220.51%22/%3E%3Ccircle%20cx%3D%226.2%22%20cy%3D%2236.7%22%20r%3D%221.27%22%20fill-opacity%3D%220.36%22/%3E%3Ccircle%20cx%3D%2222.8%22%20cy%3D%2227.7%22%20r%3D%221.49%22%20fill-opacity%3D%220.77%22/%3E%3Ccircle%20cx%3D%2228.0%22%20cy%3D%2237.4%22%20r%3D%221.58%22%20fill-opacity%3D%220.68%22/%3E%3Ccircle%20cx%3D%2214.8%22%20cy%3D%2233.2%22%20r%3D%220.56%22%20fill-opacity%3D%220.26%22/%3E%3Ccircle%20cx%3D%2230.0%22%20cy%3D%2221.6%22%20r%3D%221.03%22%20fill-opacity%3D%220.86%22/%3E%3Ccircle%20cx%3D%227.0%22%20cy%3D%2231.4%22%20r%3D%221.39%22%20fill-opacity%3D%220.39%22/%3E%3Ccircle%20cx%3D%2219.9%22%20cy%3D%2231.5%22%20r%3D%220.69%22%20fill-opacity%3D%220.63%22/%3E%3Ccircle%20cx%3D%2219.6%22%20cy%3D%2233.4%22%20r%3D%220.56%22%20fill-opacity%3D%220.84%22/%3E%3Ccircle%20cx%3D%2215.3%22%20cy%3D%2231.9%22%20r%3D%221.10%22%20fill-opacity%3D%220.84%22/%3E%3Ccircle%20cx%3D%226.3%22%20cy%3D%2233.6%22%20r%3D%221.00%22%20fill-opacity%3D%220.60%22/%3E%3Ccircle%20cx%3D%2218.7%22%20cy%3D%2223.7%22%20r%3D%220.93%22%20fill-opacity%3D%220.37%22/%3E%3Ccircle%20cx%3D%2232.5%22%20cy%3D%2224.4%22%20r%3D%220.61%22%20fill-opacity%3D%220.56%22/%3E%3Ccircle%20cx%3D%2218.6%22%20cy%3D%2212.7%22%20r%3D%220.79%22%20fill-opacity%3D%220.59%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2218.6%22%20r%3D%220.53%22%20fill-opacity%3D%220.61%22/%3E%3Ccircle%20cx%3D%2220.1%22%20cy%3D%2231.2%22%20r%3D%221.33%22%20fill-opacity%3D%220.58%22/%3E%3Ccircle%20cx%3D%229.1%22%20cy%3D%2218.2%22%20r%3D%221.49%22%20fill-opacity%3D%220.54%22/%3E%3Ccircle%20cx%3D%2213.7%22%20cy%3D%2217.1%22%20r%3D%221.01%22%20fill-opacity%3D%220.70%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
#regeln .liste.gesprueht li::after{animation:nebel-kante .75s cubic-bezier(.4,.1,.6,1) calc(var(--i) * .45s) forwards}
@keyframes zeile-spruehen{to{clip-path:inset(-20% -4% -20% 0)}}
@keyframes nebel-kante{
  0%{left:-.4em;opacity:0} 12%{opacity:.85} 85%{opacity:.7} 100%{left:calc(100% - .2em);opacity:0}}

/* ---------- Gesichter zucken, wenn man sie berührt ---------------------- */
.gesicht{transition:opacity .9s ease-out}
.gesicht.zuckt{opacity:.5!important;transition:opacity .06s;
  animation:treiben var(--gd,12s) ease-in-out var(--gv,0s) infinite,gesicht-zucken .45s steps(1,end) 1}
@keyframes gesicht-zucken{
  0%{translate:3px -2px;rotate:-4deg} 20%{translate:-4px 1px;rotate:5deg}
  40%{translate:2px 3px;rotate:-2deg} 60%{translate:-2px -3px;rotate:3deg}
  80%{translate:1px 1px;rotate:-1deg} 100%{translate:0 0;rotate:0deg}}

/* ---------- Menü: hier bin ich gerade ---------------------------------- */
#kopf nav a.aktiv{color:var(--rot)}
#kopf nav a.aktiv::before{opacity:.7}
#kopf nav a.aktiv::after{opacity:.45}
#handymenue a.aktiv{color:var(--rot)}

/* ---------- Das Versteck: Sprühnebel über alles ------------------------ */
.spruehnebel{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none;
  transition:opacity 2.6s ease-in}
.spruehnebel.weg{opacity:0}