:root {
  --led-blau: #2452e0; --led-violett: #6a17d6; --led-magenta: #a81fe0; --led-eis: #bfe6ff; --led-tief: #1d0c36;
  --verlauf: linear-gradient(100deg, var(--led-blau) 0%, var(--led-violett) 54%, var(--led-magenta) 100%);
  --akzent: #6a17d6;            
  --akzent-hell: #7f33e6;
  --akzent-text: #5a14b8;       
  --akzent-strich: #7a1cf0;     
  --auf-akzent: #ffffff;
  --gruen-zart: #e7e1fb;        
  --scherbe: polygon(0 30%, 7% 0, 100% 0, 100% 56%, 92% 100%, 3% 100%);
}
.kopf, .mitlauf, .kopfleiste, .seitenkopf, .dunkel {
  --akzent-text: #cdb6ff;       
  --akzent-strich: #9d6bff;
  --akzent-hell: #cdb6ff;       
  --gruen-zart: #1b1440;
}
.taste {
  position: relative; isolation: isolate; background: none; box-shadow: none; color: #fff;
  min-height: 60px; padding: 0 30px 0 36px;
  transition: transform 180ms var(--raus);
}
.taste::before, .taste::after {
  content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--scherbe);
  transition: transform 180ms var(--raus), filter 180ms ease;
}
.taste::before { background: var(--led-tief); transform: translate(-6px, 7px); }
.taste::after { background: var(--verlauf); }
.taste-rand { color: var(--akzent-text); background: none; box-shadow: none; }
.taste-rand::before { background: var(--akzent-strich); }
.taste-rand::after { background: var(--flaeche-hell); }
.taste-dunkel { color: #2a0f52; background: none; box-shadow: none; }
.taste-dunkel::before { background: var(--led-tief); }
.taste-dunkel::after { background: #ffffff; }
.taste:active { transform: translate(-3px, 4px); }
.taste:active::before { transform: translate(-3px, 4px); }
@media (hover: hover) and (pointer: fine) {
  .taste:hover { background: none; transform: translate(2px, -2px); }
  .taste:hover::before { transform: translate(-8px, 9px); }
  .taste:hover::after { filter: brightness(1.12); }
  .taste-dunkel:hover::after { filter: brightness(0.96); }
}
.band { background: var(--verlauf); color: #fff; }
.band p { color: rgba(255, 255, 255, 0.94); }
.band .klein a { color: #fff; }
.band .klein a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.band a:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .taste, .taste::before, .taste::after { transition: none; }
}
:root {
  --seite: #0f0a12; --text: #f1ede4; --leise: #bdb4c6;
  --flaeche: #17101c; --flaeche-hell: #1f1527;
  --linie: rgba(241, 237, 228, 0.16);
  --violett-zart: #2b1242; --gruen-zart: #1b1440; --violett-tief: #2b1242;
  --akzent-text: #cdb6ff; --akzent-strich: #9d6bff; --akzent-hell: #cdb6ff;
  color-scheme: dark;
  --papier: #0f0a12; --papier-dunkel: #17101c; --tinte: #f1ede4; --text-muted: #bdb4c6;
}
.fuss-marke img, .site-footer .footer-logo img { filter: invert(1); }
.check-panel { background: var(--flaeche); }
.button-sekundaer::after { background: var(--flaeche-hell); }