/* bytebones.de — Webdesign mit Biss für Duisburg und Düsseldorf
   Farben aus der Markenrichtung (05.10.2026): Knochenweiß, Tinte, Glut.
   Gestaltungsidee: Tattoo-Flash-Bogen auf hellem Grund, dazwischen dunkle
   Flächen mit Punktnetz und Matrix-Text. Dicke Konturen, harte Schatten
   ohne Weichzeichner, leicht schief aufgeklebte Motive. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-standard-normal.woff2) format('woff2-variations');
}

:root {
  --knochen: #efe6d2;
  --knochen-hell: #f8f2e4;
  --tinte: #0e0e0e;
  --asche: #24262b;
  --glut: #f2a93b;
  --glut-dunkel: #a8640a;   /* Glut als Schrift auf Knochen (Kontrast 4,6:1) */
  --auf-glut: #0e0e0e;      /* Schrift auf Glut-Flächen; js/gimmicks.js stellt sie bei dunklen Wunschfarben auf Knochen */
  --staub: #b8ad97;         /* leise Schrift auf dunklem Grund */
  --rost: #5b5244;          /* leise Schrift auf Knochen */
  --kontur: 3px;
  --schatten: 6px 6px 0 var(--tinte);
  --rand: clamp(1rem, 4vw, 3rem);
  --breite: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* sonst gewinnt jedes display: inline-block/flex gegen hidden */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }   /* Platz für die feste Kopfzeile */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tinte);
  color: var(--knochen);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }   /* sonst zieht das height-Attribut schmal dargestellte Bilder in die Länge */
a { color: inherit; text-decoration: none; }   /* nie unterstreichen (User, 06.10.2026) */
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1; }
:focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--glut); color: var(--auf-glut); padding: .6rem 1rem; font-weight: 700;
}
.sprung:focus { top: 1rem; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopfleiste ---------- */
/* Feste Kopfzeile wie bei funck.gmbh: oben durchsichtig, nach 40 px Scrollweg eine dichte
   Fläche mit Glut-Kante (.ist-gescrollt, js/seite.js). Die Fläche liegt im ::before, weil
   backdrop-filter am Kopf selbst das Handymenü (position: fixed) in den Kopf einsperren würde. */
.kopf { position: fixed; inset: 0 0 auto; z-index: 20; padding: 1.1rem 0; transition: padding .25s; }
.kopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(14 14 14 / .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 3px 0 var(--glut);
  opacity: 0; transition: opacity .25s;
}
/* Beim Laden einmal von oben einschieben. Nur „backwards“: Nach dem Auftritt bleibt kein
   translate am Kopf stehen — sonst würde er zum Bezugsrahmen des festen Handymenüs. */
.js .kopf { animation: kopf-rein .7s cubic-bezier(.2, 1.25, .4, 1) .15s backwards; }
@keyframes kopf-rein { from { translate: 0 -120%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .kopf { animation: none; } }
.kopf.ist-gescrollt { padding: .55rem 0; }
.kopf.ist-gescrollt::before { opacity: 1; }
.menue-offen .kopf::before { opacity: 0; }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 90rem; }
/* Wortmarke: das „o“ ist der Schädel (Idee aus dem Firefly-Entwurf vom 06.10.2026) */
.marke {
  display: inline-flex; align-items: baseline; position: relative; z-index: 2;
  text-decoration: none; font-weight: 900; font-stretch: 70%; font-size: 1.85rem; letter-spacing: -.01em; line-height: 1;
}
.marke-o {
  width: .82em; height: .82em; margin: 0 -.04em; align-self: center; translate: 0 .06em;
  transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.marke:hover .marke-o { transform: rotate(-14deg) scale(1.15); }
.navi { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); font-weight: 650; font-size: 1.02rem; }
.navi a { padding: .3rem 0; transition: color .15s; }
.navi a:hover, .navi a[aria-current="page"] { color: var(--glut); }
.navi .navi-kontakt {
  padding: .45rem 1rem; border: 2px solid var(--knochen); border-bottom-width: 2px;
}
.navi .navi-kontakt:hover, .navi .navi-kontakt[aria-current="page"] { background: var(--glut); color: var(--auf-glut); border-color: var(--glut); }
.menue-knopf { display: none; }

@media (max-width: 52rem) {
  .menue-knopf {
    display: grid; place-items: center; position: relative; z-index: 2;
    width: 2.9rem; height: 2.9rem; background: none; border: 2px solid var(--knochen); color: var(--knochen); cursor: pointer;
  }
  .menue-striche, .menue-striche::before, .menue-striche::after {
    display: block; width: 1.3rem; height: 2px; background: currentColor; transition: transform .2s, opacity .2s;
  }
  .menue-striche { position: relative; }
  .menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; }
  .menue-striche::before { top: -7px; }
  .menue-striche::after { top: 7px; }
  .menue-offen .menue-striche { background: transparent; }
  .menue-offen .menue-striche::before { transform: translateY(7px) rotate(45deg); }
  .menue-offen .menue-striche::after { transform: translateY(-7px) rotate(-45deg); }
  .navi {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 1.5rem;
    background: var(--tinte); font-size: 2.4rem; font-weight: 900; font-stretch: 70%;
    visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
  }
  .menue-offen .navi { visibility: visible; opacity: 1; }
  .menue-offen { overflow: hidden; }
  .menue-offen .kopf { position: fixed; }
  .js .navi:not(:is(.menue-offen *)) a { pointer-events: none; }
  .menue-offen .navi a { pointer-events: auto; }
  .navi .navi-kontakt { border-width: 3px; padding: .3rem 1.2rem; }
}

/* ---------- Matrix-Text (js/matrix-text.js) und Auftritte ---------- */
.mx-wort { white-space: nowrap; }
.mx-z { position: relative; display: inline-block; }
.mx-z.wartet, .mx-z.rauscht { color: transparent; }
.mx-z.rauscht::after {
  content: attr(data-g); position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  color: var(--glut); font-stretch: 100%; font-weight: 700; text-shadow: 0 0 8px rgb(242 169 59 / .7);
}
.mx-z.faellt::after { animation: mx-fall .32s ease-out; }
.mx-z.fest { animation: mx-fest .6s ease-out; }
@keyframes mx-fall { from { transform: translate(-50%, -.9em); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes mx-fest { 0% { color: #fff; text-shadow: 0 0 10px var(--glut), 0 0 22px var(--glut); } 100% { text-shadow: none; } }
.js [data-auftritt] { opacity: 0; translate: 0 14px; transition: opacity .5s, translate .5s; }
.js [data-auftritt].ist-da { opacity: 1; translate: none; }

/* Einblenden beim Scrollen (js/seite.js). „translate“ statt „transform“,
   damit gedrehte Flash-Karten ihre Schräglage behalten. */
.js [data-zeigen] { opacity: 0; translate: 0 26px; transition: opacity .6s ease-out, translate .6s ease-out; }
.js [data-zeigen].ist-sichtbar { opacity: 1; translate: none; }
.js .flash > [data-zeigen]:nth-child(3n+2) { transition-delay: .08s; }
.js .flash > [data-zeigen]:nth-child(3n) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-zeigen], .js [data-auftritt] { opacity: 1; translate: none; transition: none; }
}

/* ---------- Kopfbereich der Startseite: Schädel aus Punkten ---------- */
.held {
  position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(60% 70% at 72% 50%, #1d1a15 0%, var(--tinte) 70%);
  cursor: crosshair;
}
.held-netz { position: absolute; inset: 0; width: 100%; height: 100%; }
.held .rahmen { position: relative; width: 100%; max-width: 90rem; padding-top: 7rem; padding-bottom: 5rem; pointer-events: none; }
.held .rahmen a, .held .rahmen button { pointer-events: auto; }
.held-inhalt { max-width: 38rem; cursor: auto; }
.held-titel {
  font-size: clamp(2.9rem, 6.6vw, 6rem); font-weight: 900; font-stretch: 62%; line-height: .95; letter-spacing: -.01em;
}
.slogan { margin: 0 0 1rem; color: var(--glut); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; font-stretch: 75%; }
.held-text { max-width: 30rem; margin-top: 1.5rem; font-size: 1.2rem; }
.held-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
@media (max-width: 56rem) {
  .held { align-items: flex-end; }
  .held .rahmen { padding-top: 46vh; padding-bottom: 3rem; }
}

/* Gedankenblase über dem Schädel (Lage setzt js/schaedel-netz.js). Zwei Denk-Kringel
   führen zum Schädel hinunter; .links spiegelt sie, wenn die Blase links sitzen muss. */
.gedankenblase {
  position: absolute; z-index: 2; cursor: pointer;
  padding: .95rem 1.6rem; border-radius: 50% / 46%;
  background: var(--knochen); color: var(--tinte);
  border: var(--kontur) solid var(--tinte); box-shadow: 4px 4px 0 var(--glut);
  font-weight: 900; font-stretch: 75%; font-size: 1.6rem; line-height: 1.1; white-space: nowrap;
  opacity: 0; scale: .4; transform-origin: 10% 100%;
  transition: opacity .3s, scale .45s cubic-bezier(.2, 1.6, .4, 1);
}
.gedankenblase.ist-da { opacity: 1; scale: 1; animation: blase-schweben 3.2s ease-in-out .6s infinite; }
.gedankenblase i {
  position: absolute; border-radius: 50%; background: var(--knochen); border: var(--kontur) solid var(--tinte);
}
.gedankenblase i:nth-of-type(1) { width: 1.05rem; height: 1.05rem; left: .6rem; bottom: -1.3rem; }
.gedankenblase i:nth-of-type(2) { width: .6rem; height: .6rem; left: -.1rem; bottom: -2.2rem; }
.gedankenblase.links { transform-origin: 90% 100%; }
.gedankenblase.links i:nth-of-type(1) { left: auto; right: .6rem; }
.gedankenblase.links i:nth-of-type(2) { left: auto; right: -.1rem; }
.gedankenblase.plopp { animation: blase-plopp .35s cubic-bezier(.2, 1.6, .4, 1), blase-schweben 3.2s ease-in-out .6s infinite; }
@keyframes blase-schweben { 50% { translate: 0 -6px; } }
@keyframes blase-plopp { from { scale: .7; } }
@media (prefers-reduced-motion: reduce) { .gedankenblase, .gedankenblase.ist-da, .gedankenblase.plopp { animation: none; transition: none; } }
@media (max-width: 56rem) { .gedankenblase { font-size: 1.05rem; padding: .55rem .95rem; } }

/* ---------- Einstieg (Startseite, zwischen Kopf und Videoband; Text auch für die Suche) ---------- */
.einstieg-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.einstieg { overflow: hidden; }
.einstieg .titel { font-size: clamp(2.4rem, 5.4vw, 4.4rem); position: relative; z-index: 0; }
/* Glut-Kreis hinter der Überschrift (Wunsch des Users), wächst beim Einblenden auf */
.einstieg .titel::before {
  content: ''; position: absolute; z-index: -1; left: -2.2rem; top: 50%; translate: 0 -50%;
  width: clamp(11rem, 22vw, 19rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--glut);
  transition: scale .6s cubic-bezier(.2, 1.5, .4, 1) .15s;
}
.js .einstieg .titel[data-zeigen]:not(.ist-sichtbar)::before { scale: 0; }
@media (max-width: 52rem) { .einstieg .titel::before { left: -1rem; } }
.einstieg-text p { color: var(--rost); font-size: 1.15rem; }
.einstieg-text p:first-child { color: var(--tinte); font-size: 1.3rem; line-height: 1.5; }
.einstieg-punkte { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.einstieg-punkte li {
  padding: .4rem .85rem; background: var(--tinte); color: var(--knochen);
  font-weight: 800; font-stretch: 85%; font-size: 1rem;
}
.einstieg-punkte li:nth-child(2) { transform: rotate(-1.5deg); }
.einstieg-punkte li:nth-child(3) { background: var(--glut); color: var(--auf-glut); transform: rotate(1deg); }
@media (max-width: 52rem) { .einstieg-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Videoband ---------- */
.band { position: relative; overflow: hidden; height: clamp(24rem, 72vh, 46rem); display: grid; place-items: center; isolation: isolate; }
.band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: -2; }
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(14 14 14 / .15) 30%, rgb(14 14 14 / .82) 75%); }
.band-text {
  margin: 0; justify-self: end; margin-right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  max-width: 32rem; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 900; font-stretch: 62%; line-height: .95; text-align: right;
}
.band-text span { display: block; }
.band-text span:last-child { color: var(--glut); }
.band .video-knopf { right: auto; left: var(--rand); }   /* rechts unten sitzt der Nach-oben-Knopf */
@media (max-width: 40rem) { .band .video-knopf { left: auto; right: var(--rand); top: 1rem; bottom: auto; } }   /* Handy: unten links steht der Text */
.js .band-text[data-zeigen] { opacity: 1; translate: none; }
.js .band-text[data-zeigen] span { opacity: 0; translate: 40px 0; transition: opacity .5s, translate .5s cubic-bezier(.2, 1.4, .4, 1); }
.js .band-text.ist-sichtbar span { opacity: 1; translate: none; }
.js .band-text.ist-sichtbar span:nth-child(2) { transition-delay: .15s; }
.js .band-text.ist-sichtbar span:nth-child(3) { transition-delay: .45s; }
@media (max-width: 40rem) {
  .band::after { background: linear-gradient(0deg, rgb(14 14 14 / .9) 10%, rgb(14 14 14 / 0) 60%); }
  .band-text { align-self: end; justify-self: start; text-align: left; margin: 0 var(--rand) 2.5rem; }
}

.video-knopf {
  position: absolute; right: var(--rand); bottom: 1.5rem; z-index: 3;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 2px solid var(--knochen); background: rgb(14 14 14 / .5); color: var(--knochen);
  display: grid; place-items: center; cursor: pointer;
}
.video-knopf svg { width: 1rem; height: 1rem; }
.video-knopf [hidden] { display: none; }   /* hidden wirkt auf SVG-Pfaden nicht von selbst */

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem; font: inherit; font-weight: 800; font-stretch: 85%; font-size: 1.05rem;
  text-decoration: none; cursor: pointer;
  background: var(--glut); color: var(--auf-glut);
  border: var(--kontur) solid var(--tinte); box-shadow: 4px 4px 0 var(--knochen);
  transition: translate .12s, box-shadow .12s;
}
.knopf:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--knochen); }
.knopf:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--knochen); }
.knopf-leise { font-weight: 800; font-stretch: 85%; color: var(--glut); padding: .85rem 0; }
.knopf-leise:hover { color: var(--knochen); }
.hell .knopf { box-shadow: 4px 4px 0 var(--tinte); }
.hell .knopf:hover { box-shadow: 6px 6px 0 var(--tinte); }
.hell .knopf:active { box-shadow: 1px 1px 0 var(--tinte); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.hell { background: var(--knochen); color: var(--tinte); }
.hell a:not(.knopf, .motiv-link):hover { color: var(--glut-dunkel); }
.motiv-link:hover { background: var(--glut); color: var(--auf-glut); }
.kontakt-adresse a { font-weight: 700; }
.kontakt-adresse a:hover { color: var(--glut-dunkel); }
.raster-punkte {
  background-image: radial-gradient(rgb(14 14 14 / .09) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
}
.titel {
  font-size: clamp(2.6rem, 7vw, 5.25rem); font-weight: 900; font-stretch: 62%;
  letter-spacing: -.01em; line-height: .92; max-width: 16ch;
}
.einleitung { max-width: 38rem; margin-top: 1.25rem; font-size: 1.2rem; }
.hell .einleitung { color: var(--rost); }
.weiter { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }

/* ---------- Flash-Bogen ---------- */
.flash {
  list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.motiv {
  background: var(--knochen-hell); color: var(--tinte);
  border: var(--kontur) solid var(--tinte); box-shadow: var(--schatten);
  padding: 1.6rem 1.5rem 1.5rem;
  transform: rotate(var(--schief, 0deg));
  transition: transform .2s, box-shadow .2s;
  /* Symbol, Überschrift, Text und Link stehen in Nachbarkarten auf gleicher Höhe */
  display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start;
}
.motiv:nth-child(3n+1) { --schief: -1.1deg; }
.motiv:nth-child(3n+2) { --schief: .7deg; }
.motiv:nth-child(3n) { --schief: -.4deg; }
.motiv:hover { transform: rotate(0deg) scale(1.02); box-shadow: 9px 9px 0 var(--tinte); }
@media (max-width: 40rem) { .motiv { --schief: 0deg !important; } }
.motiv-bild { width: 4.5rem; height: 4.5rem; margin-bottom: 1.1rem; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.motiv:hover .motiv-bild { transform: rotate(-8deg) scale(1.12); }
div.motiv-bild { width: 8.5rem; height: 8.5rem; margin: -.4rem 0 .9rem -.3rem; }
/* Firefly-Motive, von werkzeuge/medien.py freigestellt (durchsichtiger Grund) */
.motiv-bild img { width: 100%; height: 100%; object-fit: contain; }
.motiv h3 { font-size: 1.65rem; font-weight: 900; font-stretch: 70%; line-height: 1.05; margin-bottom: .6rem; }
.motiv p { margin: 0; color: var(--rost); font-size: 1.05rem; }
.motiv-link {
  justify-self: start; align-self: end; margin-top: 1.1rem;
  padding: .3rem .7rem; background: var(--tinte); color: var(--glut); font-weight: 800; font-stretch: 85%; transition: background .15s, color .15s;
}

/* ---------- Preise als Teaser (Startseite) ---------- */
.preis-kacheln {
  list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem;
}
.preis-kacheln a {
  display: grid; gap: .4rem; height: 100%; padding: 1.75rem 1.5rem; text-decoration: none;
  border: var(--kontur) solid var(--knochen); box-shadow: 6px 6px 0 var(--glut);
  transition: translate .15s, box-shadow .15s;
}
.preis-kacheln a:hover { translate: -3px -3px; box-shadow: 9px 9px 0 var(--glut); }
.preis-name { font-size: 1.4rem; font-weight: 900; font-stretch: 70%; }
.preis-betrag { font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 900; font-stretch: 62%; color: var(--glut); line-height: 1.05; }
.preis-klein { color: var(--staub); font-size: .98rem; }

/* ---------- Affe ---------- */
.affe { background: var(--asche); }
.affe .rahmen {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.affe-bild {
  border: var(--kontur) solid var(--knochen); box-shadow: 8px 8px 0 var(--glut); transform: rotate(-1.5deg);
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%;   /* quadratisch: Fragezeichen und Kopf bleiben, Beine fallen weg */
}
.affe-text p { max-width: 34rem; }
.affe-text .titel { margin-bottom: 1.5rem; }
.affe-text .gegenteil { color: var(--glut); font-weight: 800; font-stretch: 85%; font-size: 1.35rem; line-height: 1.3; margin-top: 1.6rem; }
@media (max-width: 52rem) {
  .affe .rahmen { grid-template-columns: minmax(0, 1fr); }
  .affe-bild { max-width: min(100%, 26rem); }
}

/* ---------- Kontaktstreifen und Kontaktseite ---------- */
.kontakt-streifen, .kontakt { background: var(--glut); color: var(--auf-glut); }
.kontakt-streifen { overflow: hidden; }   /* die hereingleitende Sprechblase darf keinen Querscroll erzeugen */
.kontakt-streifen .titel { max-width: 14ch; }
/* Kontaktstreifen: helle Sprechblase rechts, gleitet von rechts herein; Zipfel unten links */
.sprechblase {
  position: relative; margin-left: auto; width: min(100%, 40rem);
  padding: clamp(1.75rem, 4vw, 2.75rem); color: var(--tinte);
  background: var(--knochen-hell); border: var(--kontur) solid var(--tinte); border-radius: 2rem;
  box-shadow: 8px 8px 0 var(--tinte);
}
.sprechblase::before, .sprechblase::after {
  content: ''; position: absolute; left: 3rem; width: 0; height: 0; border-style: solid;
}
.sprechblase::before { bottom: -2.15rem; border-width: 2.15rem 2.6rem 0 0; border-color: var(--tinte) transparent transparent; }
.sprechblase::after { bottom: -1.55rem; left: calc(3rem + 3px); border-width: 1.6rem 1.9rem 0 0; border-color: var(--knochen-hell) transparent transparent; }
.kontakt-streifen .sprechblase .einleitung { color: var(--rost); }
.sprechblase .kontakt-wege { margin-top: 1.75rem; }
.kontakt-streifen .sprechblase .knopf { box-shadow: 4px 4px 0 var(--glut); }
.kontakt-streifen .sprechblase .knopf:hover { box-shadow: 6px 6px 0 var(--glut); }
.kontakt-streifen .sprechblase .knopf.zweit { background: var(--glut); color: var(--auf-glut); box-shadow: 4px 4px 0 var(--tinte); }
.js .sprechblase[data-zeigen] { translate: 120px 0; transition: opacity .5s, translate .7s cubic-bezier(.2, 1.35, .4, 1); }
.js .sprechblase[data-zeigen].ist-sichtbar { translate: none; }
/* Nur am PC: links ein Schädel, von dem die Sprechblase kommt (Wunsch des Users).
   Der Zipfel wandert dafür an die linke Kante und zeigt auf den Schädel; sobald die
   Blase da ist, „redet“ der Schädel kurz (wackelt ein paarmal). */
.sprecher { display: none; }
@media (min-width: 64rem) {
  .streifen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); gap: 4.5rem; align-items: center; }
  .sprecher {
    display: block; justify-self: end; width: min(100%, 17rem);
    filter: drop-shadow(8px 8px 0 var(--tinte)); transform-origin: 50% 85%;
  }
  .streifen-raster .sprechblase { margin-left: 0; }
  .streifen-raster .sprechblase::before { left: -2.75rem; bottom: auto; top: 42%; border-width: 1.35rem 2.75rem 1.35rem 0; border-color: transparent var(--tinte) transparent transparent; }
  .streifen-raster .sprechblase::after { left: -2.05rem; bottom: auto; top: calc(42% + .38rem); border-width: .97rem 2.1rem .97rem 0; border-color: transparent var(--knochen-hell) transparent transparent; }
  .js .streifen-raster:has(.sprechblase.ist-sichtbar) .sprecher { animation: sprecher-reden .28s ease-in-out .5s 6 alternate; }
}
@keyframes sprecher-reden { from { rotate: -4deg; } to { rotate: 4deg; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .sprecher { animation: none !important; } }
.kontakt .titel { max-width: 11ch; }
.kontakt-streifen .einleitung, .kontakt .einleitung { color: var(--auf-glut); }
.kontakt-wege { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.25rem; }
.kontakt-streifen .knopf, .kontakt .knopf { background: var(--tinte); color: var(--knochen); border-color: var(--tinte); box-shadow: 4px 4px 0 var(--knochen-hell); }
.kontakt-streifen .knopf:hover, .kontakt .knopf:hover { box-shadow: 6px 6px 0 var(--knochen-hell); }
.kontakt-streifen .knopf.zweit, .kontakt .knopf.zweit { background: var(--knochen-hell); color: var(--tinte); box-shadow: 4px 4px 0 var(--tinte); }
.kontakt-streifen .knopf.zweit:hover, .kontakt .knopf.zweit:hover { box-shadow: 6px 6px 0 var(--tinte); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; align-items: start; }
.kontakt-paket { display: inline-block; margin-bottom: 1.25rem; padding: .35rem .8rem; background: var(--tinte); color: var(--glut); font-weight: 800; font-stretch: 85%; }
.kontakt-adresse { color: var(--tinte); font-style: normal; font-size: 1.15rem; padding: 1.5rem; border: var(--kontur) solid var(--tinte); background: var(--knochen-hell); box-shadow: var(--schatten); }
.kontakt-name { font-size: 1.6rem; font-weight: 900; font-stretch: 70%; }
.kontakt-seite { display: grid; gap: 1.5rem; }
.kontakt-affe { border: var(--kontur) solid var(--tinte); box-shadow: var(--schatten); transform: rotate(1.2deg); max-width: min(100%, 24rem); }
@media (max-width: 52rem) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Unterseiten: Seitenkopf ---------- */
.seite-kopf { position: relative; padding: clamp(8rem, 16vw, 11rem) 0 clamp(3.5rem, 7vw, 5rem); overflow: hidden; isolation: isolate; }
.seite-kopf .titel { max-width: none; font-size: clamp(3.2rem, 10vw, 8rem); }
.seite-kopf .einleitung { color: var(--knochen); }
.mit-netz::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 60% at 85% 40%, rgb(242 169 59 / .14), transparent 70%),
    radial-gradient(rgb(239 230 210 / .12) 1.2px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
  animation: netz-wandern 40s linear infinite;
}
@keyframes netz-wandern { to { background-position: 0 0, 220px 110px; } }
@media (prefers-reduced-motion: reduce) { .mit-netz::before { animation: none; } }
.video-kopf { min-height: 75svh; display: flex; align-items: flex-end; }
.video-kopf video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: -2; }
.video-kopf::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--tinte) 0%, rgb(14 14 14 / .55) 45%, rgb(14 14 14 / .3) 100%); }
.video-kopf .rahmen { width: 100%; }
/* Breit: Schädel links frei lassen, Text rechts über der Tastatur */
@media (min-width: 64rem) {
  .video-kopf { align-items: center; min-height: 88svh; }
  .video-kopf::after { background: linear-gradient(to left, var(--tinte) 0%, rgb(14 14 14 / .85) 36%, rgb(14 14 14 / 0) 64%), linear-gradient(0deg, var(--tinte) 0%, rgb(14 14 14 / 0) 20%); }
  .video-kopf video { object-position: 20% 50%; }
  .video-kopf .rahmen { max-width: 90rem; }
  .video-kopf .rahmen > * { margin-left: auto; width: min(36rem, 44%); }
  .video-kopf .titel { font-size: clamp(3.2rem, 7vw, 6.5rem); }
}

/* ---------- Listen ---------- */
.listen { background: var(--tinte); }
.listen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 60rem) { .listen-raster { grid-template-columns: minmax(0, 1fr); } }
.listen-titel { font-size: 2rem; font-weight: 900; font-stretch: 65%; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: var(--kontur) solid var(--glut); }
.haken { list-style: none; margin: 0; padding: 0; }
.haken li { position: relative; padding: .35rem 0 .35rem 1.6rem; }
.haken li::before {
  content: ''; position: absolute; left: 0; top: .85rem; width: .6rem; height: .6rem;
  background: var(--glut); box-shadow: 2px 2px 0 var(--knochen); transform: rotate(45deg);
}
.haken.dunkel li::before { box-shadow: 2px 2px 0 var(--tinte); }
.hinweis { margin-top: 1.25rem; color: var(--staub); font-size: .98rem; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 52rem) { .zwei-spalten { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ablauf (echte Reihenfolge, daher nummeriert) ---------- */
.ablauf-abschnitt { padding-top: 0; }
.ablauf {
  list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--kontur) solid var(--tinte); counter-reset: schritt;
}
.ablauf li { counter-increment: schritt; padding: 1.5rem 1.25rem 0 0; }
.ablauf li + li { padding-left: 1.25rem; border-left: var(--kontur) solid var(--tinte); }
.ablauf li::before {
  content: counter(schritt); display: block; font-size: 4rem; font-weight: 900; font-stretch: 62%; line-height: 1;
  color: var(--glut-dunkel); margin-bottom: .75rem;
}
.js .ablauf[data-zeigen] { opacity: 1; translate: none; }
.js .ablauf[data-zeigen] li { opacity: 0; translate: 0 18px; transition: opacity .45s, translate .45s; }
.js .ablauf.ist-sichtbar li { opacity: 1; translate: none; }
.js .ablauf.ist-sichtbar li:nth-child(2) { transition-delay: .12s; }
.js .ablauf.ist-sichtbar li:nth-child(3) { transition-delay: .24s; }
.js .ablauf.ist-sichtbar li:nth-child(4) { transition-delay: .36s; }
.js .ablauf.ist-sichtbar li:nth-child(5) { transition-delay: .48s; }
.ablauf h3 { font-size: 1.5rem; font-weight: 900; font-stretch: 70%; margin-bottom: .5rem; }
.ablauf p { margin: 0; color: var(--rost); font-size: 1.02rem; }
@media (max-width: 60rem) {
  .ablauf { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ablauf li, .ablauf li + li { padding: 1.25rem 0 0; border-left: 0; border-top: var(--kontur) solid var(--tinte); display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; }
  .ablauf li + li { margin-top: 1.25rem; }
  .ablauf li::before { grid-row: span 2; margin: 0; font-size: 3.2rem; }
}

/* ---------- Preis-Reiter ---------- */
.preise-reiter { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.preise-reiter [role="tab"] {
  font: inherit; font-weight: 800; font-stretch: 80%; font-size: 1.1rem; cursor: pointer;
  padding: .6rem 1.1rem; background: var(--knochen-hell); color: var(--tinte);
  border: var(--kontur) solid var(--tinte); box-shadow: 3px 3px 0 var(--tinte); transition: translate .12s, box-shadow .12s, background .12s;
}
.preise-reiter [role="tab"]:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--tinte); }
.preise-reiter [aria-selected="true"] { background: var(--glut); color: var(--auf-glut); }
.preise-panel, .preise-reiter { display: none; }
.preise.ist-aktiv .preise-reiter { display: flex; }
.preise.ist-aktiv .preise-panel { display: grid; }
.preise.ist-aktiv .preise-tabelle { display: none; }
.preise-panel {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  border: var(--kontur) solid var(--tinte); box-shadow: 8px 8px 0 var(--tinte); background: var(--knochen-hell);
}
.preise-panel.wechselt .preise-inhalt, .preise-panel.wechselt .preise-preis > * { animation: panel-rein .35s ease-out both; }
.preise-panel.wechselt .preise-preis > *:nth-child(2) { animation-delay: .05s; }
@keyframes panel-rein { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .preise-panel.wechselt * { animation: none !important; } }
.preise-inhalt { padding: clamp(1.5rem, 4vw, 2.5rem); }
.preise-beliebt { display: inline-block; margin: 0 0 .75rem; padding: .2rem .6rem; background: var(--tinte); color: var(--glut); font-weight: 800; font-stretch: 85%; font-size: .95rem; transform: rotate(-2deg); }
.preise-titel { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; font-stretch: 65%; margin-bottom: .75rem; }
.preise-inhalt > p:not(.preise-beliebt) { color: var(--rost); }
.preise-preis {
  padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--tinte); color: var(--knochen);
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
}
.preise-umschalter { display: inline-flex; border: 2px solid var(--knochen); }
.preise-umschalter[hidden] { display: none; }
.preise-umschalter button {
  font: inherit; font-weight: 700; font-size: .95rem; padding: .45rem .9rem; cursor: pointer;
  background: none; color: var(--knochen); border: 0;
}
.preise-umschalter [aria-pressed="true"] { background: var(--knochen); color: var(--tinte); }
.preise-betrag { margin: .5rem 0 0; font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 900; font-stretch: 62%; line-height: 1; color: var(--glut); }
.preise-betrag small { font-size: 1.1rem; font-stretch: 85%; color: var(--knochen); }
.preise-notiz { margin: 0; color: var(--staub); }
.preise-monat { margin: 0 0 .75rem; font-size: 1rem; }
.preise-preis .knopf { margin-top: auto; }
.preise-mwst { margin: 1.75rem 0 0; color: var(--rost); }
.preise-tabelle { width: 100%; border-collapse: collapse; background: var(--knochen-hell); border: var(--kontur) solid var(--tinte); }
.preise-tabelle caption { text-align: left; font-weight: 900; font-stretch: 70%; font-size: 1.5rem; margin-bottom: .75rem; }
.preise-tabelle th, .preise-tabelle td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid rgb(14 14 14 / .2); }
@media (max-width: 52rem) { .preise-panel { grid-template-columns: minmax(0, 1fr); } }

.fragen { margin: clamp(2rem, 5vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2rem 3rem; }
.fragen dt { font-size: 1.5rem; font-weight: 900; font-stretch: 70%; margin-bottom: .5rem; }
.fragen dd { margin: 0; color: var(--knochen); }

/* ---------- Wer dahintersteckt ---------- */
.wer .rahmen {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.wer-bild { border: var(--kontur) solid var(--knochen); aspect-ratio: 1; width: 100%; object-fit: cover; object-position: 50% 72%; }
.wer-text p { max-width: 34rem; }
.wer-text .titel { margin-bottom: 1.5rem; }
.wer-text a { color: var(--glut); }
@media (max-width: 52rem) {
  .wer .rahmen { grid-template-columns: minmax(0, 1fr); }
  .wer-bild { max-width: min(100%, 26rem); order: -1; }
}

/* ---------- Fuß ---------- */
.fuss { padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; color: var(--staub); font-size: .98rem; border-top: var(--kontur) solid var(--glut); }
.fuss > .rahmen:first-child { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; }
.fuss-slogan { color: var(--glut); font-weight: 800; font-stretch: 75%; font-size: 1.2rem; margin: .75rem 0 .25rem; }
.fuss-spalte { display: flex; flex-direction: column; gap: .5rem; }
.fuss a { color: var(--knochen); text-decoration: none; }
.fuss a:hover { color: var(--glut); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(239 230 210 / .15); }
.fuss-unten p { margin: 0; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
@media (max-width: 48rem) { .fuss > .rahmen:first-child { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Rechtsseiten und Fehlerseite: sofort vollständig, ohne Auftritt ---------- */
.recht { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.recht .rahmen { max-width: calc(48rem + 2 * var(--rand)); margin-left: max(0px, calc((100vw - var(--breite)) / 2)); }
.recht h2 { font-size: 1.6rem; font-weight: 900; font-stretch: 70%; margin: 2.5rem 0 .75rem; }
.recht h2:first-child { margin-top: 0; }
.recht a { color: var(--glut); }
.recht .stand { color: var(--staub); margin-top: 3rem; }

.fehler { min-height: 100svh; display: grid; align-items: center; }
.fehler .rahmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; width: 100%; }
.fehler-zahl { font-size: clamp(6rem, 22vw, 14rem); font-weight: 900; font-stretch: 62%; line-height: .8; color: var(--glut); margin: 0; }
.fehler h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; font-stretch: 70%; margin: 1rem 0; }
@media (max-width: 48rem) { .fehler .rahmen { grid-template-columns: minmax(0, 1fr); padding-top: 6rem; padding-bottom: 3rem; } .fehler-bild { max-width: min(100%, 20rem); } }

/* ---------- Nach oben (erscheint nach dem ersten Bildschirm, js/seite.js) ---------- */
.nach-oben {
  position: fixed; right: var(--rand); bottom: 1.5rem; z-index: 30;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--glut); color: var(--auf-glut); border: var(--kontur) solid var(--tinte); box-shadow: 4px 4px 0 var(--knochen);
  opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .25s, visibility .25s, translate .25s, box-shadow .12s;
}
.nach-oben svg { width: 1.3rem; height: 1.3rem; }
.nach-oben.ist-da { opacity: 1; visibility: visible; translate: none; }
.nach-oben.ist-da:hover { translate: 0 -3px; box-shadow: 4px 7px 0 var(--knochen); }
.menue-offen .nach-oben { visibility: hidden; }

/* ---------- Gimmick-Menü am rechten Rand (js/gimmicks.js; Vorbild Demo-Leiste der Demoseiten) ---------- */
.gimmicks { position: fixed; top: 50%; right: 0; translate: 0 -50%; z-index: 25; display: flex; align-items: center; }
.gimmicks-lasche {
  writing-mode: vertical-rl; padding: 1rem .55rem; cursor: pointer;
  font: inherit; font-weight: 900; font-stretch: 75%; font-size: 1rem; letter-spacing: .02em;
  background: var(--glut); color: var(--auf-glut);
  border: var(--kontur) solid var(--tinte); border-right: 0; box-shadow: -4px 4px 0 var(--knochen);
  transition: padding .15s;
}
.gimmicks-lasche:hover { padding-right: .8rem; }
.gimmicks-lasche { display: flex; align-items: center; gap: .5rem; }
.gimmicks-zeichen { width: 1.5rem; height: 1.5rem; }
.gimmicks-feld {
  width: 0; overflow: hidden; opacity: 0; padding: 0;
  background: var(--tinte); color: var(--knochen);
  border: var(--kontur) solid var(--knochen); border-right: 0; box-shadow: -6px 6px 0 var(--glut);
  transition: width .25s, opacity .25s, padding .25s;
}
.gimmicks.ist-offen .gimmicks-feld { width: 16.5rem; opacity: 1; padding: 1.1rem 1.1rem 1rem; }
.gimmicks-feld > * { min-width: 14rem; }
.gimmicks-titel { margin: 0 0 .9rem; font-size: 1.5rem; font-weight: 900; font-stretch: 65%; color: var(--glut); }
.gimmicks-gruppe { margin-bottom: 1rem; }
.gimmicks-name { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 700; }
.gimmicks-reihe { display: flex; gap: .4rem; }
.gimmicks-reihe button, .gimmicks-regen, .gimmicks-zurueck {
  flex: 1; padding: .45rem .6rem; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700;
  background: none; color: var(--knochen); border: 2px solid rgb(239 230 210 / .35);
}
.gimmicks-reihe button:hover, .gimmicks-zurueck:hover { border-color: var(--knochen); }
.gimmicks-reihe [aria-pressed="true"] { background: var(--glut); color: var(--auf-glut); border-color: var(--glut); }
.gimmicks-regen { display: block; width: 100%; margin-bottom: .45rem; background: var(--glut); color: var(--auf-glut); border-color: var(--glut); font-weight: 900; }
.gimmicks-regen:hover { filter: brightness(1.1); }
.gimmicks-zurueck { display: block; width: 100%; border-style: dashed; }
.gimmicks-tipp { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid rgb(239 230 210 / .2); font-size: .82rem; color: var(--staub); }
.menue-offen .gimmicks { visibility: hidden; }
/* Handy: unten links nur ein kleiner Schädel-Knopf (so groß wie „Nach oben“), damit er
   keine Überschriften verdeckt; das Feld klappt darüber auf */
@media (max-width: 40rem) {
  .gimmicks { top: auto; bottom: 1.5rem; right: auto; left: var(--rand); translate: none; flex-direction: column-reverse; align-items: flex-start; }
  .gimmicks-lasche { writing-mode: horizontal-tb; width: 3rem; height: 3rem; padding: 0; justify-content: center; border: var(--kontur) solid var(--tinte); box-shadow: 4px 4px 0 var(--knochen); }
  .gimmicks-lasche:hover { padding: 0; }
  .gimmicks-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gimmicks-zeichen { width: 1.7rem; height: 1.7rem; }
  .gimmicks-feld { border: var(--kontur) solid var(--knochen); box-shadow: 6px 6px 0 var(--glut); margin-bottom: .6rem; }
  .gimmicks.ist-offen .gimmicks-feld { width: min(17rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; }
}
@media print { .gimmicks { display: none; } }

/* ---------- Spielereien ---------- */
.pixel-schaedel {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  image-rendering: pixelated; transition: opacity .2s;
}
.pixel-krumel { position: fixed; left: 0; top: 0; z-index: 9999; width: 4px; height: 4px; background: var(--glut); pointer-events: none; }
.regen { position: fixed; inset: 0; z-index: 9998; cursor: pointer; transition: opacity .6s; }
.regen.weg { pointer-events: none; }
.regen.weg { opacity: 0; }
.regen-vorn { z-index: 9998; }
.regen-stopp {
  position: fixed; left: 50%; bottom: 2rem; translate: -50% 0; z-index: 9999;
  display: flex; align-items: center; gap: .9rem; padding: .7rem 1.5rem .7rem 1.1rem; cursor: pointer;
  font: inherit; font-weight: 900; font-stretch: 80%; font-size: 1.25rem; text-align: left;
  background: var(--glut); color: var(--auf-glut); border: var(--kontur) solid var(--tinte); box-shadow: 5px 5px 0 var(--knochen);
  animation: stopp-rein .35s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .3s;
}
.regen-stopp-text { display: grid; gap: .1rem; }
.regen-stopp-text span { font-size: .85rem; font-weight: 600; font-stretch: 100%; opacity: .8; }
/* Pixel-Regenschirm: wackelt leicht, als prassle der Regen drauf */
.regen-schirm { width: 3.1rem; height: auto; flex: none; transform-origin: 50% 100%; animation: schirm-wackeln .5s ease-in-out infinite alternate; }
.regen-schirm .stoff { fill: var(--tinte); }
.regen-schirm .griff { fill: var(--knochen); stroke: var(--tinte); stroke-width: .25; }
.regen-stopp:hover .regen-schirm { animation-duration: .18s; }
@keyframes schirm-wackeln { from { rotate: -6deg; } to { rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) { .regen-schirm { animation: none; } }
.regen-stopp.weg { opacity: 0; }
@keyframes stopp-rein { from { translate: -50% 30px; opacity: 0; } }