/* 
─────────────────────────────────────────────
In memoriam OPEL CORSA D (2011–2024)
─────────────────────────────────────────────

Hier ruht treu
OPEL CORSA D
1.2 Easytronic

Hatte keine Leistung,
aber ein großes Herz.
Er ruckelte, er röhrte,
er war laut —
und immer da.

Danke, kleiner Held.

─────────────────────────────────────────────
*/



/*
Lieber Kevin,
Du hast die CSS geöffnet.
Du hättest dich für Urlaub entscheiden können.
Aber du hast dich für Scrollen entschieden.
Möge der Frotteephant über dich wachen.
*/



/*
"Ich war jung und hatte Butter"

Dies ist kein CSS im herkömmlichen Sinne.
Die ist eine Topografie des Wahnsinns,
ein Archiv des Absonderlichen,
ein Verzeichnis der fragwürdigen JavaScript Existenzen —
entstanden in einer Zeit, in der das Denken sich räusperte
und die Realität einfach mal die Butterseite nach unten drehte.

Ich war jung, das stimmt zumindest in Teilen.
Die Butter?
Ungewiss.
Was ich jedoch sicher hatte:
Ein seltsames Leuchten in der Pfanne meines Verstandes
und einen Koffer voller flauschiger Fragezeichen.
(Der Koffer sprach nicht. Noch nicht.)

Diese Sammlung entsprang keinem Plan, 
keinem göttlichen Auftrag —
sie sickerte, rann, verklebte sich kultisch,
sprengte den JSTree mit white-space
und formte sich schließlich selbst aus flüsternden Orten, 
tropfenden Worten und dem Blick
in ein marmeladenglasgroßes Portal, 
das aus Versehen hinter einem Vorhang aus
Ziegenhaar stand.

Was du hier findest, ist kein Code.
Es ist ein Zustand.
Ein Fädeln durch Wahn, Wort, <div>-Boxen und Weisheit.
Eine Kartografie des mentalen Mooses,
notiert von jemandem, der nie ganz da war,
aber immer zu viel mitgeschrieben hat.
(Er hatte drei Kugelschreiber. Keiner davon funktionierte.)

Möge es dir helfen.
Oder wenigstens glibbern.

Sollte dir dabei ein Gedanke entweichen, 
keine Sorge:
er kehrt vielleicht eines Tages zurück,
verkleidet als Pfandbon oder wimmerndes Nebelfragment.
Ich selbst verliere regelmäßig Synapsen an
falsch gestellte Fragen für den HTML KI-Magier
und finde sie später in den Ritzen
metaphysischer Sitzmöbel wieder.

Mit tropfender Hochachtung
Grand-Père Grincheux
(unter Vorbehalt feuchter Realität)

(Sollte diese Datei jemals von Kevin geöffnet werden, 
möge er innehalten und eine Melone streicheln.)

________________________________________________________

                 _.-- ,.--.
               .'   .'     /
               | @       |'..--------._
              /      \._/              '.
             /  .-.-                     \
            (  /    \                     \
            \\      '.                  | #
             \\       \   -.           /
              :\       |    )._____.'   \
               "       |   /  \  |  \    )
                       |   |./'  :__ \.-'
                       '--'

             ~ Frotteephant der Plüschige ~
       (magischer Tröter, Bewacher deines CSS)
          
        💜 er trägt ein kleines Herz um den Hals
        🐘 seine Ohren wedeln, wenn du scrollst
        ✨ seine Taschen sind voller Bonbonpapier

________________________________________________________
*/



/*
────────────────────────────────────────────────────────
VORABBESCHEID DER DDBR
────────────────────────────────────────────────────────

Dekret Nr. 84-BUT/4G
Betreff: Genehmigung zur weiteren Durchsicht dieser CSS
unter Berücksichtigung butterphysikalischer Anomalien
und literarischer Feuchtfragmente.

§1 Genehmigungsgrundlage
Dieses Dokument darf erst nach eingehender Lektüre 
des Frotteephanten (s.o.) fortgeführt werden.

§2 Auflagen
- Der Kevin verpflichtet sich, alle auftretenden
  metaphysischen Irritationen eigenständig zu verwalten.
- Bei plötzlichem Schmelzen des Realitätsbewusstseins
  ist die nächstgelegene Sahnekuh zu konsultieren.

§3 Vorläufige Wirkung
Dieser Bescheid tritt mit sofortiger, 
retroaktiv wirksamer Glibberkraft in Kraft.

────────────────────────────────────────────────────────
Stempel: [leicht verschmiert] 
DDBR - Amt für Existenzielle Einbettung & Kaffeetassen
────────────────────────────────────────────────────────
*/



/* Grand-Père Grincheux flüstert:
"body ist nur eine Illusion." */



/*
ACHTUNG KEVIN:
Dieses CSS enthält absichtlich verstreute,
komplexe Butter-Funktionalitäten, die
beim Einklappen von Kommentaren
ihre semantische Bindung verlieren könnten.

Bei unautorisierter Einklappung
wird dein Editor in einen metaphysischen
Scroll-Modus versetzt, der nur durch
ein sanftes Flüstern des Wortes „Schmelz“ 
aufgehoben werden kann.

(Mit freundlicher Genehmigung
des Frotteephant, Abteilung Tröttröt.)
*/



/*
──────────────────────────────────────────────
        🐘 OFFIZIELLES KRASSNARR-DEKRET 🐘
       REGELN FÜR DEN UMGANG MIT DER REGISTRY
──────────────────────────────────────────────
 
 1️⃣ FINGER WEG!
 2️⃣ FINGER WEG!
 3️⃣ FINGER WEG!
 4️⃣ FINGER WEG!
 5️⃣ FINGER WEG!

──────────────────────────────────────────────
 Grand-Père Grincheux & Krassnarr bestätigen,
 dass jeder Verstoß gegen diese Regeln 
 mit spontanem Datenverlust, blauen Bildschirmen 
 und metaphysischem Kopfschmerz bestraft wird.
──────────────────────────────────────────────

       Möge der Frotteephant darüber wachen.
──────────────────────────────────────────────
*/



/*
Willkommen in Zeile 197.

Falls du dachtest, hier fängt endlich der eigentliche Code an:
Herzlichen Glückwunsch, du irrst dich.

Grüße von Grand-Père Grincheux.
*/



/* Krassnarr:
"Scroll weiter, Kevin. Hinter jedem Pixel lauert die Verantwortung,
die du hier freiwillig übernimmst."*/



/*
──────────────────────────────────────────────
Grand-Père Grincheux & Krassnarr präsentieren:
    DIE GROSSE SAMMLUNG UNIVERSALER ZITATE
──────────────────────────────────────────────

"Ein Array braucht man erst,
 wenn man mehr als 80 Variablen hat."
    – unbekannter Coder, kurz vor der Butter

"CSS unter 600 Zeilen ist für Feiglinge."
    – Grand-Père Grincheux (unter Vorbehalt)

"Schakalakadingdong"
    – Shakespeare (angeblich)

──────────────────────────────────────────────
Sollte Kevin dies lesen:
Bitte einmal tief durchatmen und 
drei Mal das Wort 'Schmelz' flüstern.

Mit tropfender Hochachtung,
Virelith, Krassnarr & der Frotteephant
──────────────────────────────────────────────
*/



/*
Zeile 242. 
Hier beginnt der body.

... und endet möglicherweise deine geistige Stabilität.
*/



/*
Orkische Verdauungsweisheit:
„Ein Schnaps hilft, weil ich WEISS, dass er hilft.“
– Grothgar von den Gallenorks
*/



body {
    background: #111;
    color: #ddd;
    font-family: Calibri, sans-serif;
    font-size: 14pt;
    /* Krassnarr flüstert:
   "Dies ist keine Schriftgröße. Dies ist eine Existenzkrümmung." */
    line-height: 1.8;
    max-width: 1300px;
    margin: auto;
    padding: 20px;
}

.wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Yarnakth Certified:
   Absolutely Not Centered™ */
blockquote {
    background: url(images/parchment.jpg) center/cover no-repeat;
    color: #222;
    font-family: Georgia, serif;
    font-size: 14pt;
    font-style: italic;
    max-width: 60%;
    margin: 0 auto 0 25%;
    /* Grand-Père Grincheux leise:
    "Egal was mir mein HTML KI-Magier sagt, hier wird nichts zentriert." */
    padding: 1em 2em;
    border-radius: 8px;
    box-shadow:
        0 0 15px rgba(184, 79, 255, 0.6),
        0 0 30px rgba(255, 30, 86, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: parchmentPuls 6s infinite, parchmentFlutter 18s ease-in-out infinite;
    display: inline-block;
    width: fit-content;
}

/* Innere Schatten, damit's leicht knitterig aussieht */
blockquote::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 10px;
    right: 7px;
    bottom: 9px;
    border-radius: 6px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.25), inset 0 0 3px rgba(0,0,0,0.5);
    pointer-events: none;
}

blockquote:nth-of-type(1) {
    animation: parchmentFlutter 6s infinite ease-in-out;
    animation-delay: 0s;
}
blockquote:nth-of-type(2) {
    animation: parchmentFlutter 7s infinite ease-in-out;
    animation-delay: 3s;
}
blockquote:nth-of-type(3) {
    animation: parchmentFlutter 5.5s infinite ease-in-out;
    animation-delay: 5s;
}

/* Footer bleibt schick */
/* Krassnar schnaubt verächtlich:
"Pah! Als ob hier irgendetwas schick wäre."*/
/* Grand-Père Grincheux funkelt Krassnarr an:
"Still, sonst macht Kevin noch irgendwas kaputt."*/
blockquote footer {
    font-family: Calibri, sans-serif;
    font-size: 12pt;
    font-style: normal;
    text-align: right;
    margin-top: 0.5em;
    color: #444;
}

blockquote footer::before {
    content: "–";
}

blockquote strong {
    color: #222;
    font-size: 16pt;
    font-weight: bold;
}

blockquote small {
  font-size: 85%;
  color: #333;
}

.krassnarr {
    display: inline;
    font-family: "Courier New", monospace;
    font-size: 12pt;
    font-style: italic;
    color: #9e81c9;
}

.krassnarr::before {
    content: "—(Krassnarr: ";
}

.krassnarr::after {
    content: ")";
}

.special-strong {
    display: block;
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 6px;
    color: #ffd700;
}

.warning {
    background-color: #222;
    border-left: 4px solid #ffd700;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 0 35px 0 50px;
}

.warning strong {
    color: #cc3b3b;
    text-shadow: 0 0 4px rgba(255, 77, 77, 0.3);
}

#seitentitel_head.warning {
    color: #cc3b3b;
    text-shadow: 
        0 0 4px rgba(255, 77, 77, 0.4),
        0 0 8px rgba(255, 0, 0, 0.2);
    font-weight: 700;
    transition: all 0.4s ease-in-out;
    margin-bottom: 25px;
    margin-top: 0;
    margin-left: 75px;
}

.hinweis {
    border-left: 4px solid #88cfff;
    background: #222;
    padding: 1em;
    margin: 0 20px 0 30px;
}

.hinweis strong {
    color: #7d99b2;
    text-shadow: 0 0 2px rgba(136, 199, 255, 0.1);
}

.spacer{
    display: block;
    height: auto;
    line-height: 0;
    font-size: 0;
}

.spacer::before {
    content: "\200B";
    display: block;
    height: inherit;
}

.spacer.x0{
    margin-top: 7pt !important;
}

.spacer.x1 {
    margin-top: 14pt !important;
}

.spacer.x2 {
    margin-top: 28pt !important;
}

.spacer.x3 {
    margin-top: 42pt !important;
}

.spacer.x4 {
    margin-top: 56pt !important;
}

.spacer.x5 {
    margin-top: 70pt !important;
}

/* Krassnarr amüsiert:
"Früher brauchten wir sowas nicht, wir hatten <td>."*/

.spacer.x6 {
    margin-top: 84pt !important;
}

.spacer.x7 {
    margin-top: 98pt !important;
}

.spacer.x8 {
    margin-top: 112pt !important;
}

.spacer.x9 {
    margin-top: 126pt !important;
}

.spacer.x10 {
    margin-top: 140pt !important;
}

.besonderheiten {
    list-style-type: none;
    padding-left: 0;
    margin-left: 5%;
    margin-bottom: 0;
    margin-top: 0;
}

.besonderheiten li::before {
    content: "– ";
    margin-right: 0.5em;
}

.besonderheiten li.gap {
    list-style-type: none;
    line-height: 1;
}

.besonderheiten li.gap::before {
    content: "" !important;
}

h2 {
    font-size: 22pt;
    font-weight: bold;
}

h3 {
    font-size: 16pt;
    font-style: italic;
    text-align: center;
}

h3 small {
    font-size: 14pt;
    display: block;
    margin-top: 4px;
}

.header {
    text-align: center;
    margin-bottom: 40px;
}

.box {
    display: flex;
    gap: 20px;
    margin-bottom: 69px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.box img,
.details img {
    max-width: 250px;
    height: auto;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Grand-Père Grincheux:
"Niemals alt="Ein Bild" vergessen, falls Kevin die Bilder verbuselt." */

.details {
    flex: 1;
    min-width: 0;
}

.details p {
    margin: 5px 0;
}

.facts {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 20px;
    row-gap: 5px;
    margin-top: 30px;
}

.facts dt {
    font-weight: bold;
    grid-column: 1;
}

.facts dd {
    grid-column: 2;
    margin: 0;
}

.datablock {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 5px;
    column-gap: 20px;
    margin-left: 4em;
    margin-right: 2em;
    max-width: 700px;
}



/* Archivikus empfiehlt:
   „Daten gehören nicht an den Rand. Sie brauchen Raum, Kevin.“ */



.datablock dt {
    font-weight: bold;
    grid-column: 1;
}

.datablock dd {
    grid-column: 2;
    margin: 0;
}

.beschreibung {
    margin-bottom: 1em;
    line-height: 1.6;
    padding: 0 2em;
}

.beschreibung p strong {
    display: block;
    margin-bottom: 0;
}

p {
    margin: 0 1em 0 1em;
}



/*
Hey Kevin, willkommen in Zeile 612. 
Falls du dachtest, du wärst endlich am Ende — 
bist du es vielleicht auch. 
Geistig.
*/



.baum-container {
    position: relative;
}

#baum {
    flex: 0 0 350px;
    max-width: 350px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 12px;
    padding-right: 16px;
    /* Onkel Krassnarr murmelt:
   "Padding? Pah. Früher nannten wir das Abstandshalter und sie rochen nach verbrannten Transistoren." */
    overflow-x: auto; /* wichtig: horizontal scrollen */
}

#baum .jstree-anchor {
    white-space: nowrap; /* alles in eine Zeile */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

#baum .jstree-anchor:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

#baum .jstree-anchor .jstree-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(90%);
    margin-right: 5px;
}

#baum li.jstree-leaf:not(.read) > a .jstree-icon {
    filter: invert(78%) sepia(96%) saturate(500%) hue-rotate(0deg) brightness(105%);
}

#baum li.jstree-leaf .jstree-icon.read {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

#baum li.parent-read > a .jstree-icon {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

#baum ul {
  list-style: none;         /* entfernt die Punkte */
  padding-left: 0;
  margin-left: 0;
}

#baum a.jstree-anchor {
  text-decoration: none;
  color: #ccc;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#baum .jstree-icon {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

#baum li {
    display: block;
    margin: 10px 0; /* oben und unten etwas Luft */
} 

#baum > ul > li {
    margin: 15px 0;
}

#baum li.jstree-leaf > a.jstree-anchor.jstree-clicked > span.jstree-text {
    border: 1px solid yellow;
    border-radius: 4px;
    padding: 2px 6px;
}

#baum .jstree-clicked {
    background: none !important;
    border: none !important;
}

#baum .jstree-hovered {
    background: none !important;
    border: none !important;
}

#baum .jstree-children {
    margin-left: 24px;
}

/* Icons nach Status */
#baum li.jstree-leaf > a .jstree-icon {
    background-image: url("icons/light-bulb.svg");
}

#baum li.jstree-closed > a .jstree-icon {
    background-image: url("icons/folder.svg");
}

#baum li.jstree-open > a .jstree-icon {
    background-image: url("icons/folder-open.svg");
}

#eintrag {
    flex: 1; /* nimmt den restlichen Platz */
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    /* Krassnarr, leise neben einem Border-Radius flüsternd:
   "Rundungen sind Illusionen. Die Welt ist scharfkantig." */
    padding: 20px;
}

hr.fancy {
    border: none;
    max-width: 90%;
    text-align: center;
    margin: 3.5em auto 4.5em auto;
    position: relative;
    white-space: nowrap;
}

hr.fancy::before {
    content: "༺⛧༻༺⛧༻༺⛧༻༺⛧༻༺⛧༻༺⛧༻༺⛧༻";
    color: #b84fff; /* mystisches lila */
    font-size: clamp(1em, 4vw, 1.6em);
    text-shadow:
      0 0 6px #b84fff,
      0 0 12px #ff1e56,
      0 0 18px #b84fff;
    animation: chaoticPulse 7.5s infinite;
    /* Krassnarr rollt die Augen:
   "Warum wabbelt das überhaupt? Hättest es ja auch stehen lassen können, wie ein anständiger Toaster." */
    display: inline-block;
    padding: 0.2em 0;
}

hr.fancy::after {
  content: "";
  display: block;
  height: 1.5em;
  margin-top: -0.2em;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(184, 79, 255, 0.15) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(5px);
}

.language-switcher {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.language-switcher img {
    width: 24px;
    height: auto;
    cursor: pointer;
    margin-right: 5px;
    transition: transform 0.2s ease;
    border: 1px solid #888;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(255,255,255,0.3);
}

.language-switcher img:hover {
    transform: scale(1.1);
}

.language-switcher button {
    background: #222;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.language-switcher button:hover {
    background: #333;
    transform: scale(1.1);
}

.seal-button {
    display: inline-block;
    background: radial-gradient(circle, #f5deb3, #d2b48c);
    color: #4b2e13;
    padding: 1em 2em;
    margin: 20px 0;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 204, 102, 0.6);
    transition: transform 0.2s, box-shadow 0.2s;
}

.seal-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 204, 102, 0.9);
}

#copyright {
    text-align: left;
    max-width: 800px;
    margin: 2em auto 0 auto;
    font-size: 0.9em;
    color: #aaa;
    line-height: 1.4;
}

.menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    background: #222;
    color: #ddd;
    border: 2px solid #555;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 24px;
    z-index: 3000;
    cursor: pointer;
}

.buttersiegel {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 120px;
    height: auto;
    animation: butterWobble 6s infinite ease-in-out;
}

h1#seitentitel_head {
    margin-top: 45px;
}

/* halbwegs hübsch für Handy*/
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
    }

    .menu-toggle {
        display: block;
    }

    .baum-container {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100%;
        background: #1a1a1a;
        border-right: 1px solid #444;
        padding: 20px;
        overflow-y: auto;
        transition: left 0.3s ease;
        z-index: 1500;
    }

    .baum-container.open {
        left: 0;
    }

    .box {
        flex-direction: column;
        align-items: center;
    }

    #eintrag {
        width: 100%;
        box-sizing: border-box;
    }

    .facts dt {
        font-weight: bold;
        display: block;
        width: auto;
        float: none;
        margin-bottom: 4px;
    }

    .facts dd {
        margin-left: 0;
        margin-bottom: 12px;
    }

    .language-switcher {
        justify-content: center;
        margin-bottom: 20px;
    }
}

/* Tablet Fix */
@media (min-width: 769px) and (max-width: 1200px) {
    body {
        max-width: 900px;
        padding: 15px;
    }
}

@keyframes chaoticPulse {
    0% {
        text-shadow: 0 0 4px #b84fff, 0 0 8px #ff1e56, 0 0 12px #b84fff;
    }
    10% {
        text-shadow: 0 0 10px #b84fff, 0 0 20px #ff1e56, 0 0 30px #b84fff;
    }
    23% {
        text-shadow: 0 0 6px #b84fff, 0 0 12px #ff1e56, 0 0 18px #b84fff;
    }
    37% {
        text-shadow: 0 0 14px #b84fff, 0 0 28px #ff1e56, 0 0 42px #b84fff;
    }
    52% {
        text-shadow: 0 0 5px #b84fff, 0 0 10px #ff1e56, 0 0 15px #b84fff;
    }
    68% {
        text-shadow: 0 0 12px #b84fff, 0 0 24px #ff1e56, 0 0 36px #b84fff;
    }
    81% {
        text-shadow: 0 0 7px #b84fff, 0 0 14px #ff1e56, 0 0 21px #b84fff;
    }
    100% {
        text-shadow: 0 0 4px #b84fff, 0 0 8px #ff1e56, 0 0 12px #b84fff;
    }
}

/* Grand-Père Grincheux mit Tränen in den Augen:
"Der Code ist am schönsten da, wo er sinnlos glitzert."*/

@keyframes parchmentPuls {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(184, 79, 255, 0.5),
      0 0 20px rgba(255, 30, 86, 0.3),
      inset 0 0 5px rgba(0,0,0,0.08);
  }
  50% {
    box-shadow:
      0 0 20px rgba(184, 79, 255, 0.8),
      0 0 40px rgba(255, 30, 86, 0.6),
      inset 0 0 15px rgba(0,0,0,0.15);
  }
}

@keyframes parchmentFlutter {
  0%   { transform: rotate(-0.1deg) skew(-0.1deg, 0.05deg); }
  20%  { transform: rotate(0.15deg) skew(0.1deg, -0.05deg); }
  40%  { transform: rotate(-0.05deg) skew(-0.15deg, 0.1deg); }
  60%  { transform: rotate(0.1deg) skew(0deg, -0.1deg); }
  80%  { transform: rotate(-0.1deg) skew(0.05deg, 0.15deg); }
  100% { transform: rotate(0deg) skew(0deg, 0deg); }
}

@keyframes butterWobble {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.02) rotate(0.5deg); }
    50% { transform: scale(0.98) rotate(-0.5deg); }
    75% { transform: scale(1.01) rotate(0.3deg); }
}

/* Kevin, bitte dreh jetzt die Melone.*/
@keyframes melonTwist {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
  100% { filter: hue-rotate(360deg); }
}
/* Vielleicht eines Tages... wenn die Melonen reif sind. */
/* Grand-Père Grincheux murmelte einst:
"Animier nie eine Melone, die du nicht auch selbst schälen würdest." */



/*
──────────────────────────────────────────────
                 🐘 END OF FILE 
──────────────────────────────────────────────

Falls du es bis hierher geschafft hast,
trink etwas Wasser, streichel eine Melone
und versprich dir selbst,
nie wieder ein CSS unter 600 Zeilen zu schreiben.

Solltest du das jemals brechen,
wird Krassnarr höchstpersönlich
in deinem Editor erscheinen,
dir den Cursor verbiegen
und "Schmelz" in deine Autovervollständigung
flüstern.

— und solltest du es wagen, 
die Kürzung auch noch mit 'Strg+S' zu speichern, 
wird ein Buttergreif durch den Quelltext fliegen
und "SCHMIIIER!" schreien,
während dein Code bei 97% speichert...
und stockt.

Mit tropfender Hochachtung,
Grand-Père Grincheux,
Virelith,
Krassnarr & der Frotteephant

──────────────────────────────────────────────
*/
/* P.S.:
   Wenn du das hier kürzt, stirbt irgendwo ein Margin. */