/* /Alternative3/Components/RetroBild.razor.rz.scp.css */
/* Bild-Knopf = Glasplatte (Rand mit Kantenlicht, beim Darüberfahren Bernstein-Glühen) */
.r-bild[b-8vd945xmzv] {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    background: rgba(14, 16, 22, 0.55);
    border: 1px solid rgba(215, 255, 240, 0.42);
    border-radius: 3px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

span.r-bild[b-8vd945xmzv] { cursor: default; }

.r-bild:hover[b-8vd945xmzv],
.r-bild:focus-visible[b-8vd945xmzv] {
    transform: translateY(-3px);
    border-color: rgba(255, 170, 60, 0.9);
    box-shadow: 0 0 18px rgba(255, 170, 60, 0.45), 0 18px 34px rgba(0, 0, 0, 0.45);
    outline: none;
}

span.r-bild:hover[b-8vd945xmzv] { transform: none; border-color: rgba(215, 255, 240, 0.42); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* Galerie-Raster: füllt die Zelle */
.r-bild-voll[b-8vd945xmzv] { width: 100%; }

.r-bild img[b-8vd945xmzv],
.r-fenster-inhalt img[b-8vd945xmzv] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.06) saturate(0.95);
    transition: filter 0.3s ease, scale 0.4s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* Klicks/Rechtsklicks landen auf der Schutzschicht, nie auf dem Bild */
}

.r-bild:hover img[b-8vd945xmzv] { filter: contrast(1.1) saturate(1.05) brightness(1.06); scale: 1.04; }
span.r-bild:hover img[b-8vd945xmzv] { filter: contrast(1.06) saturate(0.95); scale: 1; }

/* unsichtbare Schutzschicht über dem Bild */
.r-glas[b-8vd945xmzv] {
    position: absolute;
    inset: 0;
    display: block;
    background: transparent;
}

/* Text-Link, der das Bild öffnet */
.r-textlink[b-8vd945xmzv] {
    color: #bcd8ff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 170, 60, 0.7);
    text-underline-offset: 3px;
}

.r-textlink:hover[b-8vd945xmzv] { color: #ffb347; }

/* Großansicht: Glasfenster über abgedunkelter, unscharfer Seite */
.r-fenster[b-8vd945xmzv] {
    position: fixed;
    inset: 0;
    z-index: 10001; /* über dem Design-Umschalter (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(8, 10, 14, 0.84);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: r-ein-b-8vd945xmzv 0.25s ease-out both;
}

@keyframes r-ein-b-8vd945xmzv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.r-fenster-box[b-8vd945xmzv] {
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(20, 23, 30, 0.9);
    border: 1px solid rgba(215, 255, 240, 0.4);
    border-radius: 4px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 28px rgba(255, 170, 60, 0.25);
    padding: 8px;
}

.r-fenster-titel[b-8vd945xmzv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.r-fenster-titel button[b-8vd945xmzv] {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.r-fenster-titel button:hover[b-8vd945xmzv] {
    background: #ffb347;
    color: #101216;
    border-color: #ffb347;
}

.r-fenster-inhalt[b-8vd945xmzv] {
    position: relative;
    overflow: hidden;
    line-height: 0;
    background: #000;
    border-radius: 2px;
}

.r-fenster-inhalt img[b-8vd945xmzv] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 110px);
    margin: 0 auto;
    object-fit: contain;
    filter: none;
}
/* /Alternative4/Pages/Welt.razor.rz.scp.css */
.w4-viewport[b-n7i4z68fz4] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #05060a;
    user-select: none;
    -webkit-user-select: none;
}

.w4-canvas[b-n7i4z68fz4],
.w4-ersatz[b-n7i4z68fz4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.w4-ersatz[b-n7i4z68fz4] {
    background-size: cover;
    background-position: center;
}

.kein-webgl .w4-canvas[b-n7i4z68fz4] {
    display: none;
}

.w4-zurueck[b-n7i4z68fz4] {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 50;
    font-family: 'Bangers', cursive, sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #000;
    background: #00f0ff;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.w4-zurueck:hover[b-n7i4z68fz4] {
    background: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000;
}

.w4-pfeil[b-n7i4z68fz4] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 45;
    width: 56px;
    height: 90px;
    font-size: 24px;
    color: #00f0ff;
    background: #0f172a;
    border: 3px solid #000;
    box-shadow: 5px 5px 0 #000;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.w4-pfeil:hover[b-n7i4z68fz4] {
    background: #00f0ff;
    color: #000;
}

.w4-links[b-n7i4z68fz4] { left: 24px; }
.w4-rechts[b-n7i4z68fz4] { right: 24px; }

.w4-raum[b-n7i4z68fz4] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    font-family: 'Bangers', cursive, sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(15, 23, 42, 0.8);
    border: 3px solid #000;
    border-radius: 6px;
    padding: 6px 16px;
    pointer-events: none;
    white-space: nowrap;
}

/* Holzrahmen des Setzkastens um die Ansicht */
.w4-kasten[b-n7i4z68fz4] {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    border: 26px solid #5a3a1e;
    border-image: linear-gradient(135deg, #7a5230, #3e2812 50%, #6a4526) 1;
    box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, 0.55), inset 0 0 0 4px #2a1a0a;
}
/* /Alternative/Components/AufbauSeite.razor.rz.scp.css */
/* „Im Aufbau“-Seite (Sichtschutz von Alternative 1) */
.aufbau[b-v1undjch7k] { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.karte[b-v1undjch7k] {
    position: relative;
    width: min(560px, 100%);
    padding: 48px clamp(24px, 5vw, 56px) 44px;
    text-align: center;
    background: linear-gradient(180deg, #1d2024, #16181b);
    border: 1px solid rgba(201, 205, 211, 0.22);
    border-radius: 3px;
}
.linie[b-v1undjch7k] { position: absolute; left: 50%; top: 0; width: 64px; height: 3px; margin-left: -32px; background: #e9ebee; }
.kicker[b-v1undjch7k] { margin: 0 0 14px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #e9ebee; }
h1[b-v1undjch7k] { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.text[b-v1undjch7k] { margin: 16px 0 28px; color: #a9acb2; }
.form[b-v1undjch7k] { text-align: left; }
.form label[b-v1undjch7k] { display: block; margin-bottom: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a9acb2; }
.eingabe[b-v1undjch7k] { display: flex; gap: 10px; }
.eingabe input[b-v1undjch7k] {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    background: #0b0d0f;
    border: 1px solid rgba(201, 205, 211, 0.48);
    border-radius: 2px;
    color: #f2f3f5;
    font: inherit;
}
.eingabe input:focus[b-v1undjch7k] { outline: none; border-color: #e9ebee; }
.eingabe button[b-v1undjch7k] {
    padding: 0 22px;
    background: #e9ebee;
    border: 0;
    border-radius: 2px;
    color: #0d0e10;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}
.eingabe button:disabled[b-v1undjch7k] { opacity: 0.5; cursor: not-allowed; }
.fehler[b-v1undjch7k] { margin: 12px 0 0; color: #ff9f8f; font-weight: 600; }
/* /Components/ArcadeNamePrompt.razor.rz.scp.css */
.arcade-backdrop[b-omjgoj2kc0] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    outline: none;
    padding: 16px;
    animation: arcadeFadeIn-b-omjgoj2kc0 0.22s ease-out;
}

@keyframes arcadeFadeIn-b-omjgoj2kc0 {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.arcade-modal[b-omjgoj2kc0] {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: radial-gradient(circle at 50% 20%, #1a1a2e 0%, #0d0d1a 100%);
    border: 3px solid #ff007f;
    border-radius: 16px;
    box-shadow: 0 0 35px rgba(255, 0, 127, 0.45), 0 0 10px rgba(0, 240, 255, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 24px 20px;
    text-align: center;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* CRT Scanlines */
.arcade-scanlines[b-omjgoj2kc0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
    background-size: 100% 4px;
    opacity: 0.45;
    z-index: 2;
}

.arcade-badge[b-omjgoj2kc0] {
    display: inline-block;
    background: linear-gradient(90deg, #ff007f, #ffb300);
    color: #fff;
    font-weight: 900;
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.6);
    margin-bottom: 8px;
    text-transform: uppercase;
    animation: badgePulse-b-omjgoj2kc0 1.4s infinite alternate;
}

@keyframes badgePulse-b-omjgoj2kc0 {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.04); filter: brightness(1.2); }
}

.arcade-title[b-omjgoj2kc0] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    margin: 4px 0 10px 0;
}

.arcade-score-display[b-omjgoj2kc0] {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    margin: 0 auto 16px auto;
    width: fit-content;
}

.score-label[b-omjgoj2kc0] {
    font-size: 0.78rem;
    color: #a0a0c0;
    letter-spacing: 1px;
}

.score-value[b-omjgoj2kc0] {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffde59;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 0 0 8px rgba(255, 222, 89, 0.7);
}

.arcade-instruction[b-omjgoj2kc0] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #d1d5db;
    margin: 10px 0;
}

/* 3-Slot Row */
.arcade-slots-row[b-omjgoj2kc0] {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 16px 0;
}

.arcade-slot-col[b-omjgoj2kc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.arcade-slot-col.active-slot .arcade-char-box[b-omjgoj2kc0] {
    border-color: #00f0ff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.8), inset 0 0 10px rgba(0, 240, 255, 0.3);
    transform: scale(1.08);
}

.arcade-arrow-btn[b-omjgoj2kc0] {
    background: #252542;
    border: 1px solid #4a4a75;
    color: #00f0ff;
    width: 44px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.arcade-arrow-btn:hover[b-omjgoj2kc0] {
    background: #00f0ff;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.arcade-char-box[b-omjgoj2kc0] {
    width: 60px;
    height: 72px;
    background: #0a0a14;
    border: 3px solid #ff007f;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
    transition: all 0.18s ease;
}

.arcade-char[b-omjgoj2kc0] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Schnellwahl Presets */
.arcade-presets[b-omjgoj2kc0] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.preset-btn[b-omjgoj2kc0] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover[b-omjgoj2kc0] {
    background: #ff007f;
    color: #fff;
    border-color: #ff007f;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.5);
}

.arcade-error[b-omjgoj2kc0] {
    color: #ff4757;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.arcade-actions[b-omjgoj2kc0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.arcade-btn[b-omjgoj2kc0] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.arcade-btn.cancel[b-omjgoj2kc0] {
    background: #2b2b40;
    color: #a0a0c0;
    border: 1px solid #454566;
}

.arcade-btn.cancel:hover[b-omjgoj2kc0] {
    background: #3c3c58;
    color: #fff;
}

.arcade-btn.submit[b-omjgoj2kc0] {
    background: linear-gradient(135deg, #00f0ff, #0077ff);
    color: #050c18;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.5);
}

.arcade-btn.submit:hover:not(:disabled)[b-omjgoj2kc0] {
    background: linear-gradient(135deg, #4ef5ff, #298dff);
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.8);
    transform: translateY(-1px);
}

.arcade-btn:disabled[b-omjgoj2kc0] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .arcade-modal[b-omjgoj2kc0] {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .arcade-title[b-omjgoj2kc0] {
        font-size: 1.15rem;
    }

    .arcade-input[b-omjgoj2kc0] {
        font-size: 1.4rem;
        letter-spacing: 4px;
        padding: 6px 10px;
    }

    .arcade-btn[b-omjgoj2kc0] {
        min-height: 44px;
    }
}


/* ---- Handy / Touch: große Ziele, Textfeld, Aktionsleiste immer sichtbar ---- */
.arcade-textfeld[b-omjgoj2kc0] {
    display: block;
    width: 8.5ch;
    margin: 4px auto 6px;
    padding: 6px 10px;
    text-align: center;
    font: 900 1.9rem/1.2 'Courier New', Courier, monospace;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #fff;
    background: #0a0a14;
    border: 3px solid #00f0ff;
    border-radius: 10px;
    outline: none;
}

.arcade-modal[b-omjgoj2kc0] { max-height: calc(100dvh - 24px); overflow-y: auto; }
.arcade-actions-fest[b-omjgoj2kc0] { position: sticky; bottom: -24px; padding: 10px 0 2px; background: linear-gradient(180deg, transparent, #0d0d1a 35%); z-index: 3; }

@media (pointer: coarse), (max-width: 640px) {
    .arcade-arrow-btn[b-omjgoj2kc0] { width: 64px; height: 48px; font-size: 1.1rem; }
    .arcade-char-box[b-omjgoj2kc0] { width: 64px; height: 76px; }
    .preset-btn[b-omjgoj2kc0] { min-height: 44px; min-width: 56px; font-size: 0.95rem; }
    .arcade-slots-row[b-omjgoj2kc0] { gap: 10px; }
    .arcade-btn[b-omjgoj2kc0] { min-height: 48px; }
}
/* /Components/BildPille.razor.rz.scp.css */
/* ========================================================
   RAINEROS RETRO BILD-PILLE
   Klassische Pille-Form (border-radius: 999px) mit authentischem
   RainerOS 3D-Bezel (#c0c0c0), versenkter CRT-Bildschirm-Optik,
   geätzten Trennlinien, Digital-Zähler und Tastendruck-Haptik.
   ======================================================== */
.pille[b-vqdnq4857a] {
    --akzent: #38bdf8;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.9rem, 2.6vw, 1.7rem);
    width: 100%;
    max-width: none;
    min-height: clamp(104px, 15vh, 148px);
    padding: 0 clamp(1.6rem, 4.2vw, 2.8rem) 0 clamp(1.4rem, 3.6vw, 2.4rem);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 999px;

    /* Authentischer RainerOS 3D-Rahmen (#c0c0c0 Bezel) */
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;

    color: #ffffff;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    animation: pille-ein-b-vqdnq4857a 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
    user-select: none;
    -webkit-user-select: none;
}

/* Ohne Nummer: zentriert und gleichmäßig ausgeleuchtet */
.pille.ohne-nr[b-vqdnq4857a] {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(1rem, 2.8vh, 2rem) clamp(1.6rem, 4.2vw, 2.8rem);
}

.pille.ohne-nr .text[b-vqdnq4857a] {
    width: 100%;
    margin: 0 auto;
}

/* Hover & Fokus */
.pille:hover[b-vqdnq4857a],
.pille:focus-visible[b-vqdnq4857a] {
    transform: translateY(-2px);
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        3px 3px 0 #000000,
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040;
    outline: none;
}

/* RainerOS Tastendruck: Relief invertieren, Inhalt um 1px versetzen */
.pille:active[b-vqdnq4857a] {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: 
        inset 2px 2px 0 #000000,
        inset 3px 3px 0 #808080,
        inset -1px -1px 0 #ffffff;
    transform: translate(1px, 1px);
}

/* Bild: leicht nach innen versetzt, sodass der RainerOS-Bezel als Rahmen sichtbar bleibt */
.bild[b-vqdnq4857a] {
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    z-index: -2;
    background: var(--bild, none) center / cover no-repeat;
    transform: scale(1.02);
    filter: saturate(0.95);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pille:hover .bild[b-vqdnq4857a],
.pille:focus-visible .bild[b-vqdnq4857a] {
    transform: scale(1.08);
}

/* Schleier: versenkter 90er CRT-Bildschirm mit Scanlines und Abdunklung für 100% Lesbarkeit */
.schleier[b-vqdnq4857a] {
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    z-index: -1;
    /* Versenkte Kante um das Bild (Sunken Bevel) */
    box-shadow: 
        inset 2px 2px 0 #000000,
        inset 3px 3px 0 #404040,
        inset -1px -1px 0 rgba(255, 255, 255, 0.4);
    background:
        /* Subtile 90er CRT-Scanlines */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.22) 0px,
            rgba(0, 0, 0, 0.22) 1px,
            transparent 1px,
            transparent 3px
        ),
        /* Akzent-Schimmer unten */
        linear-gradient(0deg, color-mix(in srgb, var(--akzent) 24%, transparent) 0%, transparent 40%),
        /* Kontrastverlauf links dunkel für Text, rechts Foto sichtbar */
        linear-gradient(90deg, 
            rgba(6, 12, 28, 0.94) 0%, 
            rgba(6, 12, 28, 0.82) 36%, 
            rgba(6, 12, 28, 0.35) 72%, 
            rgba(6, 12, 28, 0.55) 100%
        );
}

.pille.ohne-nr .schleier[b-vqdnq4857a] {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.22) 0px,
            rgba(0, 0, 0, 0.22) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(0deg, color-mix(in srgb, var(--akzent) 24%, transparent) 0%, transparent 42%),
        radial-gradient(ellipse at center, rgba(6, 12, 28, 0.78) 0%, rgba(6, 12, 28, 0.62) 55%, rgba(6, 12, 28, 0.86) 100%);
}

/* Digital-Zähler im RainerOS Statusbar-Stil: 3D-geätzte Trennlinie und leuchtender Retro-Font */
.nr[b-vqdnq4857a] {
    padding-right: clamp(1rem, 2.8vw, 1.8rem);
    border-right: 1px solid #808080;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.65); /* Geätzte 3D-Kerbe */
    font-family: "Courier New", Consolas, "Lucida Console", monospace;
    font-size: clamp(2.2rem, 5.8vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--akzent, #38bdf8);
    text-shadow: 
        0 0 10px var(--akzent, #38bdf8),
        1px 1px 0 #000000,
        2px 2px 0 #000000;
    -webkit-text-stroke: 0;
    transition: text-shadow 0.2s ease;
}

.pille:hover .nr[b-vqdnq4857a] {
    text-shadow: 
        0 0 16px var(--akzent, #38bdf8),
        1px 1px 0 #000000,
        2px 2px 0 #000000;
}

.text[b-vqdnq4857a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    text-align: center;
}

/* Kicker: RainerOS Typografie mit geätzten 3D-Trennlinien */
.kicker[b-vqdnq4857a] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: clamp(0.68rem, 1.5vw, 0.8rem);
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akzent, #38bdf8);
    text-shadow: 1px 1px 0 #000000, 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.kicker[b-vqdnq4857a]::before,
.kicker[b-vqdnq4857a]::after {
    content: "";
    flex: none;
    width: 1.8rem;
    height: 2px;
    background: transparent;
    border-top: 1px solid #808080;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    transition: width 0.25s ease;
}

.pille:hover .kicker[b-vqdnq4857a]::before,
.pille:hover .kicker[b-vqdnq4857a]::after {
    width: 2.8rem;
}

/* Titel: Kräftiger 90s Header mit hartem 3D-Schatten */
.titel[b-vqdnq4857a] {
    font-family: Arial, "Arial Black", "MS Sans Serif", Tahoma, sans-serif;
    font-size: clamp(1.15rem, 2.8vw, 1.7rem);
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
    color: #ffffff;
    letter-spacing: 0.3px;
    text-shadow: 
        2px 2px 0 #000000,
        1px 1px 0 #000000;
}

@keyframes pille-ein-b-vqdnq4857a {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pille[b-vqdnq4857a], .bild[b-vqdnq4857a], .kicker[b-vqdnq4857a]::before, .kicker[b-vqdnq4857a]::after {
        animation: none;
        transition: none;
    }
}

@media (max-width: 560px) {
    .pille[b-vqdnq4857a] {
        min-height: 92px;
        gap: 0.8rem;
        padding: 0 1.2rem 0 1rem;
        border-width: 2px;
    }
    .bild[b-vqdnq4857a],
    .schleier[b-vqdnq4857a] {
        inset: 3px;
    }
    .nr[b-vqdnq4857a] {
        padding-right: 0.8rem;
        font-size: 1.9rem;
    }
    .kicker[b-vqdnq4857a] {
        font-size: 0.65rem;
    }
    .kicker[b-vqdnq4857a]::before, .kicker[b-vqdnq4857a]::after {
        width: 1rem;
    }
    .titel[b-vqdnq4857a] {
        font-size: 1.1rem;
    }
}
/* /Components/HighscoreBoard.razor.rz.scp.css */
/* RainerOS Window Frame */
.hs-win-frame[b-02ubcldtxd] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680px;
    height: 640px;
    max-height: 90vh;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.45);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
    margin: 0 auto;
    overflow: hidden;
}

/* RainerOS Titlebar */
.hs-win-titlebar[b-02ubcldtxd] {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    font-weight: bold;
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    height: 26px;
    flex-shrink: 0;
}

.hs-win-title[b-02ubcldtxd] {
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.hs-win-controls[b-02ubcldtxd] {
    display: flex;
    gap: 2px;
}

.hs-win-btn[b-02ubcldtxd] {
    width: 18px;
    height: 18px;
    background: #c0c0c0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    padding: 0;
}

.hs-win-btn:active[b-02ubcldtxd] {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

/* Hypermodern Cyber-Glassmorphism Stage ("Easter Egg") */
.hs-cyber-stage[b-02ubcldtxd] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 0%, #151828 0%, #080911 100%);
    color: #f3f4f6;
    overflow: hidden;
    padding: 16px 18px 12px 18px;
}

/* Ambient glow accents */
.hs-ambient-glow[b-02ubcldtxd] {
    position: absolute;
    top: -80px;
    left: 20%;
    width: 60%;
    height: 160px;
    background: radial-gradient(ellipse, rgba(0, 240, 255, 0.15) 0%, rgba(255, 0, 128, 0.1) 50%, transparent 80%);
    pointer-events: none;
    filter: blur(40px);
    z-index: 0;
}

/* Header */
.hs-header[b-02ubcldtxd] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    z-index: 1;
}

.hs-badge-retro[b-02ubcldtxd] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #00f0ff;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.hs-headline[b-02ubcldtxd] {
    margin: 2px 0 0 0;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, #ffffff, #a5b4fc, #ff007f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hs-refresh-btn[b-02ubcldtxd] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.15s ease;
}

.hs-refresh-btn:hover:not(:disabled)[b-02ubcldtxd] {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.hs-refresh-btn.spinning[b-02ubcldtxd] {
    opacity: 0.6;
    cursor: wait;
}

/* Tabs: Nav carousel row with left/right buttons & centered active game */
.hs-nav-carousel-row[b-02ubcldtxd] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    z-index: 1;
}

.hs-nav-arrow-btn[b-02ubcldtxd] {
    flex-shrink: 0;
    width: 36px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: #00f0ff;
    font-size: 0.95rem;
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.18s ease;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.18);
    padding: 0;
}

.hs-nav-arrow-btn:hover[b-02ubcldtxd] {
    background: rgba(0, 240, 255, 0.2);
    border-color: #00f0ff;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.55);
    transform: scale(1.06);
}

.hs-nav-arrow-btn:active[b-02ubcldtxd] {
    transform: scale(0.95);
    background: rgba(0, 240, 255, 0.35);
}

/* Center Stage: Ausgewählter Bereich steht immer zentriert in der Mitte */
.hs-nav-center-stage[b-02ubcldtxd] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 22, 0.85);
    padding: 6px 14px 7px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.12) inset, 0 2px 8px rgba(0, 0, 0, 0.4);
    min-width: 0;
}

.hs-nav-active-pill[b-02ubcldtxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    animation: pillFade-b-02ubcldtxd 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pillFade-b-02ubcldtxd {
    from { opacity: 0.3; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.hs-nav-active-pill .tab-icon[b-02ubcldtxd] {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7));
}

.hs-nav-dots[b-02ubcldtxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.hs-nav-dot[b-02ubcldtxd] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hs-nav-dot:hover[b-02ubcldtxd] {
    background: rgba(0, 240, 255, 0.6);
    transform: scale(1.25);
}

.hs-nav-dot.active[b-02ubcldtxd] {
    width: 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, #00f0ff, #ff007f);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.75);
}

/* Meta info */
.hs-game-meta[b-02ubcldtxd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
}

.meta-title-row[b-02ubcldtxd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-name[b-02ubcldtxd] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f8fafc;
}

.meta-rule[b-02ubcldtxd] {
    font-size: 0.74rem;
    color: #94a3b8;
    font-style: italic;
}

/* Content Panel & List */
.hs-content-panel[b-02ubcldtxd] {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    z-index: 1;
}

.hs-content-panel[b-02ubcldtxd]::-webkit-scrollbar {
    width: 6px;
}

.hs-content-panel[b-02ubcldtxd]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.hs-content-panel[b-02ubcldtxd]::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.3);
    border-radius: 4px;
}

.hs-list[b-02ubcldtxd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Leaderboard Cards */
.hs-row-card[b-02ubcldtxd] {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.hs-row-card:hover[b-02ubcldtxd] {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.06);
}

/* Podium Styles */
.hs-row-card.podium-gold[b-02ubcldtxd] {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.14) 0%, rgba(20, 24, 38, 0.6) 100%);
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.2);
}

.hs-row-card.podium-gold .player-name[b-02ubcldtxd] {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.hs-row-card.podium-silver[b-02ubcldtxd] {
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.12) 0%, rgba(20, 24, 38, 0.6) 100%);
    border: 1px solid rgba(226, 232, 240, 0.45);
    box-shadow: 0 0 14px rgba(226, 232, 240, 0.15);
}

.hs-row-card.podium-silver .player-name[b-02ubcldtxd] {
    color: #f1f5f9;
}

.hs-row-card.podium-bronze[b-02ubcldtxd] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(20, 24, 38, 0.6) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

.hs-row-card.podium-bronze .player-name[b-02ubcldtxd] {
    color: #fbbf24;
}

/* Columns */
.hs-rank-col[b-02ubcldtxd] {
    width: 44px;
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.rank-badge[b-02ubcldtxd] {
    color: #94a3b8;
    font-family: 'Courier New', Courier, monospace;
}

.hs-player-col[b-02ubcldtxd] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.player-name[b-02ubcldtxd] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
}

.player-date[b-02ubcldtxd] {
    font-size: 0.68rem;
    color: #64748b;
}

.hs-score-col[b-02ubcldtxd] {
    display: flex;
    align-items: center;
}

.score-pill[b-02ubcldtxd] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: 900;
    color: #00f0ff;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 240, 255, 0.25);
}

/* Empty & Loading States */
.hs-loading[b-02ubcldtxd], .hs-empty-state[b-02ubcldtxd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    text-align: center;
    color: #94a3b8;
    gap: 10px;
}

.hs-spinner[b-02ubcldtxd] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 240, 255, 0.2);
    border-top-color: #00f0ff;
    border-radius: 50%;
    animation: spin-b-02ubcldtxd 0.8s linear infinite;
}

@keyframes spin-b-02ubcldtxd {
    to { transform: rotate(360deg); }
}

.empty-icon[b-02ubcldtxd] {
    font-size: 2.6rem;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4));
}

.hs-empty-state h4[b-02ubcldtxd] {
    margin: 4px 0;
    color: #f1f5f9;
}

.hs-empty-state p[b-02ubcldtxd] {
    font-size: 0.82rem;
    max-width: 300px;
    margin: 0;
}

/* Footer Bar */
.hs-footer-bar[b-02ubcldtxd] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    color: #64748b;
    z-index: 1;
}

.hs-hint[b-02ubcldtxd] {
    color: #00f0ff;
}

@media (max-width: 600px) {
    .hs-win-frame[b-02ubcldtxd] {
        width: 100%;
        height: 100%;
        max-height: 94vh;
        border: none;
    }

    .hs-win-titlebar[b-02ubcldtxd] {
        min-height: 28px;
    }

    .hs-win-btn[b-02ubcldtxd] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }

    .hs-nav-arrow-btn[b-02ubcldtxd] {
        width: 42px;
        height: 44px;
        font-size: 1.1rem;
    }

    .hs-headline[b-02ubcldtxd] {
        font-size: 1.2rem;
    }

    .refresh-text[b-02ubcldtxd] {
        display: none;
    }

    .meta-rule[b-02ubcldtxd] {
        display: none;
    }

    .player-name[b-02ubcldtxd] {
        font-size: 1.1rem;
    }

    .score-pill[b-02ubcldtxd] {
        font-size: 0.95rem;
    }
}
/* /Components/LemmyCasinoSlot.razor.rz.scp.css */
/* Lemmy-Casino: 5-Walzen Automat im RainerOS-Chassis */
.casino-chassis[b-phtj5f88x3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 10px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    max-width: 100%;
    width: 440px;
    margin: auto;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.casino-win-header[b-phtj5f88x3] {
    width: 100%;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.casino-win-btns[b-phtj5f88x3] {
    display: flex;
    gap: 2px;
}

.casino-win-btn[b-phtj5f88x3] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.casino-cabinet[b-phtj5f88x3] {
    position: relative;
    width: 100%;
    background: #18181b;
    border: 3px solid #ca8a04;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 0 16px rgba(0,0,0,0.8), 0 0 10px rgba(234, 179, 8, 0.4);
}

.casino-top-marquee[b-phtj5f88x3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4px 8px;
    background: linear-gradient(180deg, #451a03 0%, #1c1917 100%);
    border: 1px solid #eab308;
    border-radius: 4px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.marquee-title[b-phtj5f88x3] {
    color: #facc15;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px #eab308;
}

.marquee-lights[b-phtj5f88x3] {
    font-size: 0.85rem;
}

/* LED Stats */
.casino-led-row[b-phtj5f88x3] {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 6px;
    margin-bottom: 10px;
}

.casino-led-card[b-phtj5f88x3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #09090b;
    border: 1px solid #3f3f46;
    padding: 4px 8px;
    border-radius: 4px;
    flex: 1;
}

.led-label[b-phtj5f88x3] {
    font-size: 0.62rem;
    font-weight: bold;
    color: #a1a1aa;
    letter-spacing: 0.05em;
}

.led-val[b-phtj5f88x3] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15rem;
    font-weight: 900;
}

.led-val.gold[b-phtj5f88x3] { color: #facc15; text-shadow: 0 0 6px #eab308; }
.led-val.green[b-phtj5f88x3] { color: #22c55e; text-shadow: 0 0 6px #22c55e; }
.led-val.pink[b-phtj5f88x3] { color: #ec4899; text-shadow: 0 0 6px #ec4899; }

/* Reels Stage */
.casino-reels-stage[b-phtj5f88x3] {
    position: relative;
    width: 100%;
    background: #000000;
    border: 2px solid #ca8a04;
    border-radius: 6px;
    padding: 8px 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.casino-payline[b-phtj5f88x3] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(234, 179, 8, 0.4);
    pointer-events: none;
    z-index: 2;
}

.casino-reels-row[b-phtj5f88x3] {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.casino-reel-box[b-phtj5f88x3] {
    width: 58px;
    height: 64px;
    background: #27272a;
    border: 2px solid #52525b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 6px #000000;
}

.casino-reel-box.spinning[b-phtj5f88x3] {
    animation: reelBlur-b-phtj5f88x3 0.08s infinite alternate;
}

@keyframes reelBlur-b-phtj5f88x3 {
    from { transform: translateY(-3px); filter: blur(1px); }
    to { transform: translateY(3px); filter: blur(1.5px); }
}

.casino-reel-box.hit-reel[b-phtj5f88x3] {
    border-color: #facc15;
    box-shadow: 0 0 10px #facc15, inset 0 0 8px #facc15;
    animation: reelGlow-b-phtj5f88x3 0.5s infinite alternate;
}

@keyframes reelGlow-b-phtj5f88x3 {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}

.reel-img[b-phtj5f88x3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-fallback[b-phtj5f88x3] {
    font-size: 1.8rem;
}

/* Status message */
.casino-message-box[b-phtj5f88x3] {
    width: 100%;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #4ade80;
    font-size: 0.82rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.casino-message-box.msg-jackpot[b-phtj5f88x3] {
    color: #facc15;
    font-size: 0.92rem;
    animation: flashJackpot-b-phtj5f88x3 0.4s infinite alternate;
}

.casino-message-box.msg-super[b-phtj5f88x3] {
    color: #f43f5e;
    font-size: 0.88rem;
}

.casino-message-box.msg-win[b-phtj5f88x3] {
    color: #22c55e;
}

@keyframes flashJackpot-b-phtj5f88x3 {
    from { text-shadow: 0 0 8px #facc15; }
    to { text-shadow: 0 0 2px #ca8a04; }
}

/* Controls */
.casino-controls[b-phtj5f88x3] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.casino-spin-btn[b-phtj5f88x3] {
    width: 100%;
    background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%);
    color: #000000;
    font-weight: 900;
    font-size: 0.95rem;
    padding: 8px 16px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
}

.casino-sub-controls[b-phtj5f88x3] {
    display: flex;
    gap: 6px;
    width: 100%;
}

.casino-hs-btn[b-phtj5f88x3], .casino-save-btn[b-phtj5f88x3] {
    flex: 1;
    background: #1f2937;
    color: #f3f4f6;
    border: 1px solid #4b5563;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.casino-hs-btn:hover[b-phtj5f88x3] {
    background: #374151;
    color: #facc15;
    border-color: #facc15;
}

.casino-save-btn:hover[b-phtj5f88x3] {
    background: #374151;
    color: #4ade80;
    border-color: #4ade80;
}

.casino-spin-btn:active:not(:disabled)[b-phtj5f88x3] {
    transform: translateY(2px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.casino-spin-btn:disabled[b-phtj5f88x3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Overlay für Ruhmeshalle */
.casino-modal-backdrop[b-phtj5f88x3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10040;
    padding: 12px;
}

.casino-modal-inner[b-phtj5f88x3] {
    width: 100%;
    max-width: 680px;
}

.casino-paytable[b-phtj5f88x3] {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 0.66rem;
    color: #a1a1aa;
    text-align: center;
    flex-wrap: wrap;
}

.casino-paytable b[b-phtj5f88x3] {
    color: #facc15;
}

/* God Mode */
.casino-overlay[b-phtj5f88x3] {
    position: absolute;
    inset: 12px;
    background: rgba(9, 9, 11, 0.96);
    border: 2px solid #facc15;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-align: center;
    z-index: 10;
}

.god-icon[b-phtj5f88x3] {
    font-size: 2.2rem;
    margin-bottom: 6px;
}

.god-title[b-phtj5f88x3] {
    color: #facc15;
    font-weight: 900;
    margin: 0 0 6px 0;
    text-shadow: 0 0 8px #facc15;
}

.god-desc[b-phtj5f88x3] {
    color: #e4e4e7;
    font-size: 0.82rem;
    margin: 0 0 12px 0;
}

.god-btn[b-phtj5f88x3] {
    background: #facc15;
    color: #000000;
    font-weight: 900;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 480px) {
    .casino-chassis[b-phtj5f88x3] {
        width: 100%;
        padding: 6px;
    }
    .casino-win-header[b-phtj5f88x3] {
        min-height: 28px;
    }
    .casino-win-btn[b-phtj5f88x3] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }
    .casino-cabinet[b-phtj5f88x3] {
        padding: 8px 6px;
    }
    .casino-reel-box[b-phtj5f88x3] {
        width: clamp(38px, 13vw, 46px);
        height: clamp(44px, 15vw, 52px);
    }
    .casino-reels-row[b-phtj5f88x3] {
        gap: 4px;
    }
    .casino-spin-btn[b-phtj5f88x3] {
        min-height: 44px;
    }
    .casino-hs-btn[b-phtj5f88x3], .casino-save-btn[b-phtj5f88x3] {
        min-height: 38px;
    }
}
/* /Components/LemmyCatchMe.razor.rz.scp.css */
/* ========================================================
   Lemmy-Catch-Me: 90er Arcade-Reflexspiel im RainerOS-Chassis
   ======================================================== */
.whack-chassis[b-tg2sffhwoh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 12px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    max-width: 100%;
    margin: auto;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

/* Standalone Window Header (für /home) */
.whack-win-header[b-tg2sffhwoh] {
    width: 100%;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.whack-win-btns[b-tg2sffhwoh] {
    display: flex;
    gap: 2px;
}

.whack-win-btn[b-tg2sffhwoh] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

/* Scoreboard */
.whack-scoreboard[b-tg2sffhwoh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 6px 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.whack-stat-box[b-tg2sffhwoh] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.whack-stat-label[b-tg2sffhwoh] {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #000080;
}

.whack-led-display[b-tg2sffhwoh] {
    background: #000000;
    color: #22c55e;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.35rem;
    font-weight: 900;
    padding: 2px 8px;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #000000;
    letter-spacing: 1px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.whack-led-display.time-bonus[b-tg2sffhwoh] {
    background: #064e3b;
    color: #86efac;
    text-shadow: 0 0 6px #22c55e;
}

.whack-led-display.time-danger[b-tg2sffhwoh] {
    color: #ef4444;
    animation: flashDanger-b-tg2sffhwoh 0.5s infinite alternate;
}

@keyframes flashDanger-b-tg2sffhwoh {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

.whack-center-badge[b-tg2sffhwoh] {
    text-align: center;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whack-status-text[b-tg2sffhwoh] {
    font-size: 0.8rem;
    font-weight: bold;
    color: #4b5563;
}

.whack-combo-badge[b-tg2sffhwoh] {
    font-size: 0.82rem;
    font-weight: 900;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    padding: 2px 6px;
    border-radius: 2px;
}

.whack-tempo-badge[b-tg2sffhwoh] {
    font-size: 0.78rem;
    font-weight: 900;
    color: #7c2d12;
    background: #ffedd5;
    border: 1px solid #ea580c;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

/* Spielfeld (6 Kisten, 3 Spalten x 2 Zeilen) */
.whack-grid[b-tg2sffhwoh] {
    display: grid;
    grid-template-columns: repeat(3, clamp(85px, 26vw, 130px));
    grid-template-rows: repeat(2, clamp(95px, 28vw, 140px));
    gap: 8px;
    background: #808080;
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 8px;
    box-sizing: border-box;
    justify-content: center;
}

/* Kisten-Loch */
.whack-hole[b-tg2sffhwoh] {
    position: relative;
    background: #3e2723;
    border: 2px solid;
    border-color: #2e1c18 #5d4037 #5d4037 #2e1c18;
    box-shadow: inset 2px 2px 4px #000000;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.whack-box-rim[b-tg2sffhwoh] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(180deg, #1f1412 0%, #3e2723 100%);
    z-index: 1;
}

/* Lemmy Katze */
.whack-cat-wrapper[b-tg2sffhwoh] {
    position: absolute;
    bottom: -100%;
    left: 10%;
    right: 10%;
    height: 80%;
    transition: transform 0.12s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.whack-cat-wrapper.popped[b-tg2sffhwoh] {
    transform: translateY(-90%);
}

.whack-cat-wrapper.hit[b-tg2sffhwoh] {
    animation: catHit-b-tg2sffhwoh 0.18s ease-in-out;
}

@keyframes catHit-b-tg2sffhwoh {
    0% { transform: translateY(-90%) scale(1); }
    50% { transform: translateY(-90%) scale(1.15) rotate(6deg); }
    100% { transform: translateY(0) scale(0.9); }
}

.whack-cat-img[b-tg2sffhwoh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    background: #000000;
}

.whack-cat-fallback[b-tg2sffhwoh] {
    font-size: 2.2rem;
}

.whack-hit-effect[b-tg2sffhwoh] {
    position: absolute;
    top: -12px;
    background: #facc15;
    color: #000000;
    font-weight: 900;
    font-size: 0.72rem;
    padding: 2px 6px;
    border: 1px solid #ca8a04;
    box-shadow: 1px 1px 0 #000000;
    white-space: nowrap;
    animation: floatUp-b-tg2sffhwoh 0.4s ease-out forwards;
    display: flex;
    gap: 4px;
    align-items: center;
}

.whack-bonus-tag[b-tg2sffhwoh] {
    background: #15803d;
    color: #ffffff;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 0.65rem;
}

@keyframes floatUp-b-tg2sffhwoh {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-18px); }
}

/* Kisten-Front */
.whack-box-front[b-tg2sffhwoh] {
    position: relative;
    background: linear-gradient(180deg, #8d6e63 0%, #6d4c41 100%);
    border-top: 2px solid #a1887f;
    padding: 3px 2px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.whack-box-label[b-tg2sffhwoh] {
    font-size: 0.62rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 0 #000000;
}

/* Steuerungsleiste */
.whack-bottom-bar[b-tg2sffhwoh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 6px;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-sizing: border-box;
}

.whack-start-btn[b-tg2sffhwoh],
.whack-cancel-btn[b-tg2sffhwoh],
.whack-hs-btn[b-tg2sffhwoh],
.whack-again-btn[b-tg2sffhwoh] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-weight: bold;
    font-size: 0.84rem;
    padding: 4px 12px;
    cursor: pointer;
}

.whack-btn-group[b-tg2sffhwoh] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.whack-start-btn:active[b-tg2sffhwoh],
.whack-cancel-btn:active[b-tg2sffhwoh],
.whack-hs-btn:active[b-tg2sffhwoh],
.whack-again-btn:active[b-tg2sffhwoh] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

.whack-ziel-info[b-tg2sffhwoh] {
    font-size: 0.74rem;
    color: #1e293b;
}

/* Ergebnis-Karte */
.whack-result-card[b-tg2sffhwoh] {
    margin-top: 10px;
    padding: 8px 12px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid;
    background: #fdf4ff;
    border-color: #c084fc;
}

.whack-result-actions[b-tg2sffhwoh] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.whack-result-title[b-tg2sffhwoh] {
    display: block;
    font-weight: 900;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.whack-result-title.win[b-tg2sffhwoh] {
    color: #7e22ce;
}

.whack-result-title.try-again[b-tg2sffhwoh] {
    color: #9333ea;
}

.whack-result-desc[b-tg2sffhwoh] {
    margin: 2px 0;
    font-size: 0.82rem;
    color: #4b5563;
}

.whack-unlocked-text[b-tg2sffhwoh] {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: #15803d;
}

/* Modal Overlay für Ruhmeshalle */
.whack-modal-backdrop[b-tg2sffhwoh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10040;
    padding: 12px;
}

.whack-modal-inner[b-tg2sffhwoh] {
    width: 100%;
    max-width: 680px;
}

/* Smartphone */
@media (max-width: 640px) {
    .whack-chassis[b-tg2sffhwoh] {
        padding: 6px;
        width: 100%;
        max-width: 100%;
    }

    .whack-win-header[b-tg2sffhwoh] {
        min-height: 28px;
    }

    .whack-win-btn[b-tg2sffhwoh] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }

    .whack-grid[b-tg2sffhwoh] {
        grid-template-columns: repeat(3, clamp(78px, 26vw, 120px));
        grid-template-rows: repeat(2, clamp(86px, 28vw, 130px));
        gap: 6px;
    }

    .whack-bottom-bar[b-tg2sffhwoh] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 6px;
    }

    .whack-btn-group[b-tg2sffhwoh] {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }

    .whack-start-btn[b-tg2sffhwoh],
    .whack-cancel-btn[b-tg2sffhwoh],
    .whack-hs-btn[b-tg2sffhwoh] {
        flex: 1;
        min-height: 40px;
    }
}
/* /Components/LemmyKloMiner.razor.rz.scp.css */
.km-chassis[b-v1th8pqf8h] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    background: linear-gradient(180deg, #161024 0%, #0d0818 100%);
    border: 2px solid rgba(251, 191, 36, 0.55);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 28px rgba(245, 158, 11, 0.18);
    overflow: hidden;
    color: #f8fafc;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    user-select: none;
}

.km-win-header[b-v1th8pqf8h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(90deg, #78350f 0%, #b45309 55%, #451a03 100%);
    border-bottom: 2px solid #fbbf24;
}

.km-win-title[b-v1th8pqf8h] {
    font-weight: 700;
    font-size: 0.88rem;
    color: #fef3c7;
    letter-spacing: 0.5px;
}

.km-win-btns[b-v1th8pqf8h] {
    display: flex;
    gap: 6px;
}

.km-win-btn[b-v1th8pqf8h] {
    background: rgba(15, 23, 42, 0.65);
    color: #fef3c7;
    border: 1px solid rgba(251, 191, 36, 0.6);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.82rem;
    cursor: pointer;
}

.km-win-btn.close:hover[b-v1th8pqf8h] {
    background: #ef4444;
    border-color: #ffffff;
    color: #ffffff;
}

/* Scoreboard oben */
.km-scoreboard[b-v1th8pqf8h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(9, 6, 18, 0.92);
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
}

.km-stat-box[b-v1th8pqf8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #07040e;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 8px;
    padding: 4px 12px;
    min-width: 96px;
}

.km-stat-label[b-v1th8pqf8h] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fbbf24;
}

.km-led-display[b-v1th8pqf8h] {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.45rem;
    font-weight: 700;
    color: #fef08a;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.65);
}

.km-led-display.bonus[b-v1th8pqf8h] {
    color: #34d399;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.9);
}

.km-led-display.danger[b-v1th8pqf8h] {
    color: #f87171;
    animation: kmPulse-b-v1th8pqf8h 0.6s infinite alternate;
}

.km-center-status[b-v1th8pqf8h] {
    flex: 1;
    text-align: center;
    padding: 0 6px;
}

.km-title-badge[b-v1th8pqf8h] {
    font-weight: 700;
    font-size: 0.92rem;
    color: #fbbf24;
    letter-spacing: 0.8px;
}

.km-hint-badge[b-v1th8pqf8h] {
    font-size: 0.82rem;
    color: #bae6fd;
}

.km-combo-badge[b-v1th8pqf8h] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #ec4899);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.84rem;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.65);
}

.km-event-badge[b-v1th8pqf8h] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid #fbbf24;
    color: #fef08a;
    font-weight: 600;
    font-size: 0.82rem;
}

/* 3D-Bühne */
.km-stage-wrap[b-v1th8pqf8h] {
    position: relative;
    width: 100%;
    height: clamp(300px, 50vh, 430px);
    background: #0b0716;
    overflow: hidden;
}

.km-canvas[b-v1th8pqf8h] {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    outline: none;
}

/* Stink-Klumpen Abspreng-Knopf */
.km-blast-btn[b-v1th8pqf8h] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    padding: 9px 18px;
    border-radius: 999px;
    border: 2px solid #bef264;
    background: linear-gradient(90deg, #4d7c0f, #15803d);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(132, 204, 22, 0.85);
    animation: kmPulse-b-v1th8pqf8h 0.45s infinite alternate;
}

/* Live-Toast bei gewonnener Foto-Kapsel */
.km-live-photo-toast[b-v1th8pqf8h] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.92);
    border: 2px solid #f472b6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}

.km-live-photo-toast img[b-v1th8pqf8h] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #fbbf24;
}

.km-live-photo-toast div[b-v1th8pqf8h] {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
}

.km-live-photo-toast strong[b-v1th8pqf8h] {
    color: #f472b6;
}

/* Start- und Ergebnis-Overlay */
.km-overlay[b-v1th8pqf8h] {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(9, 6, 20, 0.76);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.km-start-card[b-v1th8pqf8h],
.km-result-card[b-v1th8pqf8h] {
    max-width: 520px;
    width: 100%;
    background: rgba(20, 14, 36, 0.96);
    border: 2px solid #f59e0b;
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
}

.km-card-kicker[b-v1th8pqf8h] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fb923c;
    margin-bottom: 4px;
}

.km-start-card h3[b-v1th8pqf8h],
.km-result-title[b-v1th8pqf8h] {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fef08a;
}

.km-start-card p[b-v1th8pqf8h] {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #e2e8f0;
}

.km-legend-row[b-v1th8pqf8h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
}

.km-legend-row span[b-v1th8pqf8h] {
    font-size: 0.75rem;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-radius: 999px;
    padding: 3px 10px;
    color: #fde68a;
}

.km-main-start-btn[b-v1th8pqf8h] {
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid #fef08a;
    background: linear-gradient(90deg, #f59e0b, #ea580c);
    color: #090d16;
    font-weight: 800;
    font-size: 0.94rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.65);
    transition: transform 0.15s ease;
}

.km-main-start-btn:hover[b-v1th8pqf8h] {
    transform: translateY(-2px) scale(1.03);
}

.km-result-score[b-v1th8pqf8h] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fbbf24;
    margin: 4px 0;
}

.km-result-sub[b-v1th8pqf8h] {
    font-size: 0.86rem;
    color: #cbd5e1;
    margin: 0 0 10px;
}

.km-result-hint[b-v1th8pqf8h] {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 0 0 12px;
}

.km-won-photos-box[b-v1th8pqf8h] {
    background: rgba(236, 72, 153, 0.14);
    border: 1px solid rgba(244, 114, 182, 0.5);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

.km-won-headline[b-v1th8pqf8h] {
    display: block;
    font-weight: 700;
    font-size: 0.86rem;
    color: #fbcfe8;
    margin-bottom: 8px;
}

.km-won-thumbs[b-v1th8pqf8h] {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.km-won-thumb[b-v1th8pqf8h] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #fbbf24;
}

.km-result-actions[b-v1th8pqf8h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.km-sec-btn[b-v1th8pqf8h],
.km-album-btn[b-v1th8pqf8h] {
    padding: 9px 15px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.km-sec-btn[b-v1th8pqf8h] {
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid #38bdf8;
    color: #e0f2fe;
}

.km-album-btn[b-v1th8pqf8h] {
    background: rgba(244, 114, 182, 0.2);
    border: 1px solid #f472b6;
    color: #fce7f3;
}

/* Fußleiste */
.km-bottom-bar[b-v1th8pqf8h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(9, 6, 18, 0.95);
    border-top: 1px solid rgba(251, 191, 36, 0.3);
}

.km-btn-group[b-v1th8pqf8h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.km-action-btn[b-v1th8pqf8h],
.km-cancel-btn[b-v1th8pqf8h],
.km-hs-btn[b-v1th8pqf8h],
.km-album-nav-btn[b-v1th8pqf8h] {
    padding: 7px 13px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
}

.km-action-btn[b-v1th8pqf8h] {
    background: #fbbf24;
    border: 1px solid #fef08a;
    color: #0f172a;
}

.km-cancel-btn[b-v1th8pqf8h] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fecaca;
}

.km-hs-btn[b-v1th8pqf8h] {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #f1f5f9;
}

.km-album-nav-btn[b-v1th8pqf8h] {
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid #f59e0b;
    color: #fef3c7;
}

.km-ziel-info[b-v1th8pqf8h] {
    font-size: 0.8rem;
    color: #cbd5e1;
}

.km-modal-backdrop[b-v1th8pqf8h] {
    position: fixed;
    inset: 0;
    z-index: 120000;
    background: rgba(5, 2, 12, 0.82);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.km-modal-inner[b-v1th8pqf8h] {
    max-width: 94vw;
    max-height: 90vh;
    overflow: auto;
}

@keyframes kmPulse-b-v1th8pqf8h {
    from { transform: translateX(-50%) scale(1); }
    to { transform: translateX(-50%) scale(1.05); }
}
/* /Components/LemmyOrakelGame.razor.rz.scp.css */
/* Lemmys Orakel - RainerOS Chassis */
.orakel-chassis[b-e9aat4wpje] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 10px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    max-width: 100%;
    width: 380px;
    margin: auto;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.orakel-win-header[b-e9aat4wpje] {
    width: 100%;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.orakel-win-btns[b-e9aat4wpje] {
    display: flex;
    gap: 2px;
}

.orakel-win-btn[b-e9aat4wpje] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.orakel-card-body[b-e9aat4wpje] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #2e1065;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 14px 10px;
    box-sizing: border-box;
    color: #ffffff;
}

.orakel-subline[b-e9aat4wpje] {
    font-size: 0.76rem;
    color: #c4b5fd;
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.3;
}

.orakel-ball-wrap[b-e9aat4wpje] {
    margin-bottom: 14px;
}

.orakel-crystal-ball[b-e9aat4wpje] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e9d5ff 0%, #a855f7 40%, #581c87 100%);
    box-shadow: 0 0 20px #a855f7, inset -5px -5px 12px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.ball-icon[b-e9aat4wpje] {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
}

.ball-thinking[b-e9aat4wpje] {
    animation: pulseBall-b-e9aat4wpje 0.6s infinite alternate;
}

@keyframes pulseBall-b-e9aat4wpje {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.08); filter: brightness(1.3); }
}

.orakel-answer-box[b-e9aat4wpje] {
    width: 100%;
    min-height: 80px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #7c3aed;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 12px;
}

.orakel-thinking-text[b-e9aat4wpje] {
    color: #e9d5ff;
    font-size: 0.85rem;
    font-style: italic;
}

.orakel-idle-text[b-e9aat4wpje] {
    color: #a78bfa;
    font-size: 0.78rem;
}

.prophecy-text[b-e9aat4wpje] {
    color: #fef08a;
    font-size: 0.92rem;
    font-weight: bold;
    margin: 0 0 6px 0;
    line-height: 1.35;
}

.prophecy-snack[b-e9aat4wpje] {
    color: #c4b5fd;
    font-size: 0.75rem;
}

.orakel-btn[b-e9aat4wpje] {
    background: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 0.88rem;
    padding: 8px 16px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    width: 100%;
}

.orakel-btn:active:not(:disabled)[b-e9aat4wpje] {
    transform: translateY(2px);
    box-shadow: none;
}

.orakel-btn:disabled[b-e9aat4wpje] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .orakel-chassis[b-e9aat4wpje] {
        width: 100%;
        padding: 6px;
    }
    .orakel-win-header[b-e9aat4wpje] {
        min-height: 28px;
    }
    .orakel-win-btn[b-e9aat4wpje] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }
    .orakel-btn[b-e9aat4wpje] {
        min-height: 44px;
    }
}
/* /Components/LemmySweeper.razor.rz.scp.css */
/* ========================================================
   Lemmy-Sweeper: Authentisches RainerOS 3D-Retro-Design
   ======================================================== */
.sweeper-chassis[b-zme2zzwx94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 12px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    max-width: 100%;
    margin: auto;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

/* Standalone Window Header (für /home) */
.sweeper-win-header[b-zme2zzwx94] {
    width: 100%;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.sweeper-win-btns[b-zme2zzwx94] {
    display: flex;
    gap: 2px;
}

.sweeper-win-btn[b-zme2zzwx94] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

/* Toolbar */
.sweeper-toolbar[b-zme2zzwx94] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    padding: 4px 6px;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    font-size: 0.78rem;
    box-sizing: border-box;
}

.sweeper-diff-select[b-zme2zzwx94] {
    display: flex;
    gap: 12px;
}

.sweeper-radio-label[b-zme2zzwx94] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #000000;
}

.sweeper-mode-btn[b-zme2zzwx94] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 3px 8px;
    cursor: pointer;
}

.sweeper-mode-btn:active[b-zme2zzwx94],
.sweeper-mode-btn.flag-active[b-zme2zzwx94] {
    border-color: #808080 #ffffff #ffffff #808080;
    background: #e0e0e0;
    box-shadow: inset 1px 1px 0 #000000;
}

/* Spielfeld-Rahmen */
.sweeper-board-frame[b-zme2zzwx94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 6px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
}

/* Header-Bar (Zähler - Katze - Timer) */
.sweeper-header-bar[b-zme2zzwx94] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 4px 6px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

/* 7-Segment LED Counter */
.sweeper-led-counter[b-zme2zzwx94] {
    background: #000000;
    color: #ff0000;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 2px 6px;
    border: 1px solid #808080;
    min-width: 48px;
    text-align: right;
    box-shadow: inset 1px 1px 0 #000000;
    line-height: 1;
}

/* Zentraler Katzen-Button */
.sweeper-face-btn[b-zme2zzwx94] {
    width: 36px;
    height: 36px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
}

.sweeper-face-btn:active[b-zme2zzwx94] {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: none;
    transform: translate(1px, 1px);
}

/* Grid */
.sweeper-grid[b-zme2zzwx94] {
    display: grid;
    gap: 0;
    background: #808080;
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-sizing: border-box;
    padding: 0;
}

/* Zelle */
.sweeper-cell[b-zme2zzwx94] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.sweeper-cell.revealed[b-zme2zzwx94] {
    background: #c0c0c0;
    border: 1px solid #7b7b7b;
    cursor: default;
}

.sweeper-cell.lemmy-hit[b-zme2zzwx94] {
    background: #ff5252;
}

.sweeper-cell.unrevealed:active[b-zme2zzwx94] {
    border-color: #808080 #ffffff #ffffff #808080;
}

.sweeper-lemmy-img[b-zme2zzwx94] {
    width: 85%;
    height: 85%;
    object-fit: cover;
    border-radius: 2px;
}

.sweeper-lemmy-bomb[b-zme2zzwx94] {
    font-size: 1.1rem;
}

.sweeper-flag-icon[b-zme2zzwx94] {
    font-size: 1rem;
}

/* Zahlen-Farben */
.z-1[b-zme2zzwx94] { color: #0000ff; }
.z-2[b-zme2zzwx94] { color: #008000; }
.z-3[b-zme2zzwx94] { color: #ff0000; }
.z-4[b-zme2zzwx94] { color: #000080; }
.z-5[b-zme2zzwx94] { color: #800000; }
.z-6[b-zme2zzwx94] { color: #008080; }
.z-7[b-zme2zzwx94] { color: #000000; }

/* Gewinn / Verlust Banner */
.sweeper-win-banner[b-zme2zzwx94],
.sweeper-lose-banner[b-zme2zzwx94] {
    margin-top: 10px;
    padding: 8px 12px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid;
}

.sweeper-win-banner[b-zme2zzwx94] {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

.sweeper-lose-banner[b-zme2zzwx94] {
    background: #fee2e2;
    border-color: #f87171;
    color: #b91c1c;
}

.sweeper-win-badge[b-zme2zzwx94],
.sweeper-lose-badge[b-zme2zzwx94] {
    display: inline-block;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.sweeper-win-text[b-zme2zzwx94],
.sweeper-lose-text[b-zme2zzwx94] {
    margin: 2px 0 6px;
    font-size: 0.82rem;
}

.sweeper-unlocked-notice[b-zme2zzwx94] {
    margin: 4px 0 8px;
    font-size: 0.88rem;
    color: #15803d;
}

.sweeper-again-btn[b-zme2zzwx94] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-weight: bold;
    font-size: 0.82rem;
    padding: 4px 14px;
    cursor: pointer;
}

.sweeper-again-btn:active[b-zme2zzwx94] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

.sweeper-win-actions[b-zme2zzwx94] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.sweeper-tools-right[b-zme2zzwx94] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sweeper-hs-btn[b-zme2zzwx94] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 3px 8px;
    cursor: pointer;
}

.sweeper-hs-btn:hover[b-zme2zzwx94] {
    background: #e0e0e0;
}

.sweeper-hs-btn:active[b-zme2zzwx94] {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #000000;
}

/* Modal Overlay für Ruhmeshalle */
.sweeper-modal-backdrop[b-zme2zzwx94] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10040;
    padding: 12px;
}

.sweeper-modal-inner[b-zme2zzwx94] {
    width: 100%;
    max-width: 680px;
}

/* Animation */
.slide-up[b-zme2zzwx94] {
    animation: slideUp-b-zme2zzwx94 0.25s ease-out;
}

@keyframes slideUp-b-zme2zzwx94 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Smartphone-Optimierung */
@media (max-width: 640px) {
    .sweeper-chassis[b-zme2zzwx94] {
        padding: 6px;
        width: 100%;
        max-width: 100%;
    }

    .sweeper-win-header[b-zme2zzwx94] {
        min-height: 28px;
    }

    .sweeper-win-btn[b-zme2zzwx94] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }

    .sweeper-toolbar[b-zme2zzwx94] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .sweeper-diff-select[b-zme2zzwx94] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sweeper-radio-label[b-zme2zzwx94] {
        padding: 3px 6px;
        font-size: 0.8rem;
    }

    .sweeper-tools-right[b-zme2zzwx94] {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }

    .sweeper-mode-btn[b-zme2zzwx94], .sweeper-hs-btn[b-zme2zzwx94] {
        flex: 1;
        text-align: center;
        min-height: 38px;
    }
}
/* /Components/LemmyZoomiesGame.razor.rz.scp.css */
/* Lemmy Zoomies Jagd - RainerOS Chassis & Arcade Spiel */
.zoomies-chassis[b-ppjcczpi8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 10px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    max-width: 100%;
    width: 440px;
    margin: auto;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.zoomies-win-header[b-ppjcczpi8n] {
    width: 100%;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.zoomies-win-btns[b-ppjcczpi8n] {
    display: flex;
    gap: 2px;
}

.zoomies-win-btn[b-ppjcczpi8n] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.zoomies-scoreboard[b-ppjcczpi8n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 6px 10px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.zoomies-stat-box[b-ppjcczpi8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zoomies-stat-label[b-ppjcczpi8n] {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #000080;
}

.zoomies-led-display[b-ppjcczpi8n] {
    background: #000000;
    color: #22c55e;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.35rem;
    font-weight: 900;
    padding: 2px 8px;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #000000;
    letter-spacing: 1px;
    line-height: 1;
}

.zoomies-led-display.time-danger[b-ppjcczpi8n] {
    color: #ef4444;
    animation: flashDanger-b-ppjcczpi8n 0.5s infinite alternate;
}

@keyframes flashDanger-b-ppjcczpi8n {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

.zoomies-center-badge[b-ppjcczpi8n] {
    text-align: center;
    min-height: 24px;
    display: flex;
    align-items: center;
}

.zoomies-status-text[b-ppjcczpi8n] {
    font-size: 0.8rem;
    font-weight: bold;
    color: #4b5563;
}

.zoomies-combo-badge[b-ppjcczpi8n] {
    font-size: 0.82rem;
    font-weight: 900;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    padding: 2px 6px;
    border-radius: 2px;
}

/* Arena Spielfeld */
.zoomies-arena-field[b-ppjcczpi8n] {
    position: relative;
    width: 100%;
    height: 320px;
    background: #111827;
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    overflow: hidden;
    cursor: crosshair;
    box-sizing: border-box;
}

.zoomies-start-screen[b-ppjcczpi8n],
.zoomies-end-screen[b-ppjcczpi8n] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(17, 24, 39, 0.94);
    padding: 16px;
    text-align: center;
    color: #ffffff;
    z-index: 10;
}

.zoomies-intro-icon[b-ppjcczpi8n],
.zoomies-trophy[b-ppjcczpi8n] {
    font-size: 2.5rem;
    margin-bottom: 6px;
}

.zoomies-intro-title[b-ppjcczpi8n],
.zoomies-end-title[b-ppjcczpi8n] {
    color: #facc15;
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0 0 6px 0;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}

.zoomies-intro-desc[b-ppjcczpi8n] {
    font-size: 0.82rem;
    color: #d1d5db;
    max-width: 280px;
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.zoomies-end-score[b-ppjcczpi8n] {
    font-size: 0.95rem;
    margin: 4px 0 8px 0;
}

.zoomies-rank-badge[b-ppjcczpi8n] {
    background: #374151;
    color: #38bdf8;
    border: 1px solid #0284c7;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.zoomies-action-btn[b-ppjcczpi8n] {
    background: #facc15;
    color: #000000;
    font-weight: 900;
    font-size: 0.88rem;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    padding: 6px 14px;
    cursor: pointer;
}

.zoomies-action-btn:active[b-ppjcczpi8n] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
}

/* Ziele */
.zoomies-target[b-ppjcczpi8n] {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zoomTarget-b-ppjcczpi8n 0.16s ease-out;
}

@keyframes zoomTarget-b-ppjcczpi8n {
    from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.zoomies-target img[b-ppjcczpi8n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #facc15;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}

.zoomies-emoji[b-ppjcczpi8n] {
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.zoomies-fx[b-ppjcczpi8n] {
    position: absolute;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 0.85rem;
    pointer-events: none;
    animation: fxFloat-b-ppjcczpi8n 0.6s ease-out forwards;
    white-space: nowrap;
}

.zoomies-fx.cat[b-ppjcczpi8n] { color: #facc15; text-shadow: 0 0 6px #000; }
.zoomies-fx.gold[b-ppjcczpi8n] { color: #22c55e; text-shadow: 0 0 6px #000; font-size: 0.95rem; }
.zoomies-fx.bad[b-ppjcczpi8n] { color: #ef4444; text-shadow: 0 0 6px #000; }

@keyframes fxFloat-b-ppjcczpi8n {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to { opacity: 0; transform: translate(-50%, -90px); }
}

.zoomies-footer[b-ppjcczpi8n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    padding: 4px 6px;
    background: #d4d0c8;
    border: 1px solid #808080;
    box-sizing: border-box;
}

.zoomies-hint[b-ppjcczpi8n] {
    font-size: 0.68rem;
    color: #374151;
}

.zoomies-cancel-btn[b-ppjcczpi8n] {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 6px;
    cursor: pointer;
}

.zoomies-screen-btns[b-ppjcczpi8n] {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.zoomies-hs-btn[b-ppjcczpi8n] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    font-size: 0.85rem;
    font-weight: 900;
    padding: 6px 14px;
    cursor: pointer;
}

.zoomies-hs-btn:hover[b-ppjcczpi8n] {
    background: #e0e0e0;
}

.zoomies-hs-btn:active[b-ppjcczpi8n] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

/* Modal Overlay für Ruhmeshalle */
.zoomies-modal-backdrop[b-ppjcczpi8n] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10040;
    padding: 12px;
}

.zoomies-modal-inner[b-ppjcczpi8n] {
    width: 100%;
    max-width: 680px;
}

@media (max-width: 480px) {
    .zoomies-chassis[b-ppjcczpi8n] {
        width: 100%;
        padding: 6px;
    }
    .zoomies-win-header[b-ppjcczpi8n] {
        min-height: 28px;
    }
    .zoomies-win-btn[b-ppjcczpi8n] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }
    .zoomies-arena-field[b-ppjcczpi8n] {
        height: clamp(230px, 42vh, 300px);
    }
    .zoomies-screen-btns[b-ppjcczpi8n] {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }
    .zoomies-action-btn[b-ppjcczpi8n], .zoomies-hs-btn[b-ppjcczpi8n] {
        width: 100%;
        min-height: 42px;
    }
}
/* /Components/MobilWaechter.razor.rz.scp.css */
.mw-sperre[b-uph8hp32rw] {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #14161a;
    font-family: 'Poppins', system-ui, sans-serif;
}

.mw-karte[b-uph8hp32rw] {
    max-width: 420px;
    width: 100%;
    padding: 28px 24px;
    border-radius: 18px;
    background: #1f2229;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8eaee;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.mw-badge[b-uph8hp32rw] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    background: rgba(255, 255, 255, 0.1);
}

.mw-titel[b-uph8hp32rw] {
    margin: 14px 0 8px;
    font-size: 1.35rem;
}

.mw-text[b-uph8hp32rw] {
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #b9bec8;
}

.mw-btn[b-uph8hp32rw] {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    background: #d9dce2;
    color: #14161a;
    font-weight: 600;
    text-decoration: none;
}
/* /Components/PandaLuckSlot.razor.rz.scp.css */
/* Panda Luck - RainerOS Chassis */
.panda-chassis[b-apsdmchw62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 10px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    max-width: 100%;
    width: 420px;
    margin: auto;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.panda-win-header[b-apsdmchw62] {
    width: 100%;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.panda-win-btns[b-apsdmchw62] {
    display: flex;
    gap: 2px;
}

.panda-win-btn[b-apsdmchw62] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 0.72rem;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.panda-cabinet[b-apsdmchw62] {
    position: relative;
    width: 100%;
    background: #030a03;
    border: 2px solid #ca8a04;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: inset 0 0 16px rgba(0,0,0,0.9), 0 0 12px rgba(250, 204, 21, 0.3);
}

.panda-top-header[b-apsdmchw62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #3f3f46;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.panda-title[b-apsdmchw62] {
    color: #facc15;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px #ca8a04;
}

.panda-coins-badge[b-apsdmchw62] {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.82rem;
}

.coins-num[b-apsdmchw62] {
    color: #facc15;
    font-size: 1.1rem;
    font-weight: 900;
}

.panda-stats-row[b-apsdmchw62] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.stat-pill[b-apsdmchw62] {
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.72rem;
    display: flex;
    gap: 4px;
    align-items: center;
}

.stat-pill.green[b-apsdmchw62] {
    border: 1px solid #22c55e;
    color: #4ade80;
}

.stat-pill.pink[b-apsdmchw62] {
    border: 1px solid #ec4899;
    color: #f472b6;
}

/* Reels */
.panda-reels-box[b-apsdmchw62] {
    display: flex;
    justify-content: center;
    gap: 6px;
    background: #0a140a;
    padding: 10px 6px;
    border: 1px solid #eab308;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: inset 0 0 10px #000000;
}

.panda-reel[b-apsdmchw62] {
    width: 48px;
    height: 54px;
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.panda-reel.spinning[b-apsdmchw62] {
    animation: pandaReelBlur-b-apsdmchw62 0.08s infinite alternate;
}

@keyframes pandaReelBlur-b-apsdmchw62 {
    from { transform: translateY(-2px); filter: blur(1px); }
    to { transform: translateY(2px); filter: blur(1px); }
}

.panda-reel.hit[b-apsdmchw62] {
    border: 2px solid #facc15;
    background: #fef08a;
    box-shadow: 0 0 10px #facc15;
}

.panda-message[b-apsdmchw62] {
    text-align: center;
    min-height: 24px;
    font-size: 0.82rem;
    font-weight: bold;
    color: #4ade80;
    margin-bottom: 8px;
}

.panda-message.msg-jackpot[b-apsdmchw62] {
    color: #facc15;
    font-size: 0.95rem;
    animation: flashGold-b-apsdmchw62 0.4s infinite alternate;
}

.panda-message.msg-super[b-apsdmchw62] {
    color: #f43f5e;
    font-size: 0.88rem;
}

.panda-message.msg-win[b-apsdmchw62] {
    color: #22c55e;
}

@keyframes flashGold-b-apsdmchw62 {
    from { text-shadow: 0 0 8px #facc15; }
    to { text-shadow: 0 0 2px #ca8a04; }
}

.panda-actions[b-apsdmchw62] {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panda-spin-btn[b-apsdmchw62] {
    width: 100%;
    background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%);
    color: #000000;
    font-weight: 900;
    font-size: 0.92rem;
    padding: 8px 16px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.panda-sub-actions[b-apsdmchw62] {
    display: flex;
    gap: 6px;
    width: 100%;
}

.panda-hs-btn[b-apsdmchw62], .panda-save-btn[b-apsdmchw62] {
    flex: 1;
    background: #0f2310;
    color: #f3f4f6;
    border: 1px solid #166534;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.panda-hs-btn:hover[b-apsdmchw62] {
    background: #14532d;
    color: #facc15;
    border-color: #facc15;
}

.panda-save-btn:hover[b-apsdmchw62] {
    background: #14532d;
    color: #4ade80;
    border-color: #4ade80;
}

.panda-spin-btn:active:not(:disabled)[b-apsdmchw62] {
    transform: translateY(2px);
    box-shadow: none;
}

.panda-spin-btn:disabled[b-apsdmchw62] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Overlay für Ruhmeshalle */
.panda-modal-backdrop[b-apsdmchw62] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10040;
    padding: 12px;
}

.panda-modal-inner[b-apsdmchw62] {
    width: 100%;
    max-width: 680px;
}

.panda-paytable[b-apsdmchw62] {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 0.68rem;
    color: #a1a1aa;
    text-align: center;
    flex-wrap: wrap;
}

.panda-paytable .gold[b-apsdmchw62] {
    color: #facc15;
}

/* God Mode */
.panda-god-overlay[b-apsdmchw62] {
    position: absolute;
    inset: 10px;
    background: rgba(3, 10, 3, 0.96);
    border: 2px solid #facc15;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-align: center;
    z-index: 10;
}

.god-heading[b-apsdmchw62] {
    color: #facc15;
    font-weight: 900;
    margin: 0 0 6px 0;
    text-shadow: 0 0 8px #ca8a04;
}

.god-text[b-apsdmchw62] {
    color: #ffffff;
    font-size: 0.85rem;
    margin: 0 0 12px 0;
}

.god-confirm-btn[b-apsdmchw62] {
    background: #facc15;
    color: #000000;
    font-weight: 900;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 480px) {
    .panda-chassis[b-apsdmchw62] {
        width: 100%;
        padding: 6px;
    }
    .panda-win-header[b-apsdmchw62] {
        min-height: 28px;
    }
    .panda-win-btn[b-apsdmchw62] {
        width: 28px;
        height: 24px;
        font-size: 0.85rem;
    }
    .panda-cabinet[b-apsdmchw62] {
        padding: 8px 6px;
    }
    .panda-reel[b-apsdmchw62] {
        width: clamp(38px, 13vw, 46px);
        height: clamp(44px, 15vw, 52px);
        font-size: clamp(1.3rem, 5vw, 1.6rem);
    }
    .panda-reels-box[b-apsdmchw62] {
        gap: 4px;
        padding: 8px 4px;
    }
    .panda-spin-btn[b-apsdmchw62] {
        min-height: 44px;
    }
    .panda-hs-btn[b-apsdmchw62], .panda-save-btn[b-apsdmchw62] {
        min-height: 38px;
    }
}
/* /Components/RainerOsRahmen.razor.rz.scp.css */
/* RainerOS-Rahmen um den Seitenbereich. Nur Desktop (ab 641 px); auf dem Handy bleibt alles wie bisher.
   Maße müssen zu den Variablen in MainLayout.razor.css passen: oben 32 px (Rand 4 + Titelleiste 26 + Fuge 2),
   unten 40 px (Taskleiste 36 + Rand 4), seitlich 4 px. */
.ros-rahmen[b-301o1emgz5], .w95-rahmen[b-301o1emgz5] {
    display: none;
}

@media (min-width: 641px) {
    .ros-rahmen[b-301o1emgz5], .w95-rahmen[b-301o1emgz5] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2000;
        pointer-events: none; /* die Seite darunter bleibt bedienbar – nur Titelleiste und Taskleiste fangen Klicks */
        font-family: Tahoma, Verdana, Geneva, sans-serif;
    }

    /* Fensterrand mit 3D-Kante */
    .ros-fenster[b-301o1emgz5], .w95-fenster[b-301o1emgz5] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 36px;
        box-sizing: border-box;
        border: 4px solid #c0c0c0;
        box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, inset 0 0 0 1px #dfdfdf;
    }

    .ros-titel[b-301o1emgz5], .w95-titel[b-301o1emgz5] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 26px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 3px 0 4px;
        color: #ffffff;
        background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
        outline: 2px solid #c0c0c0; /* Fuge zum Inhalt */
        pointer-events: auto;
        user-select: none;
    }

    .ros-titel-links[b-301o1emgz5], .w95-titel-links[b-301o1emgz5] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .ros-titel-text[b-301o1emgz5], .w95-titel-text[b-301o1emgz5] {
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ros-logo[b-301o1emgz5], .w95-flagge[b-301o1emgz5] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .ros-knoepfe[b-301o1emgz5], .w95-knoepfe[b-301o1emgz5] {
        display: flex;
        gap: 2px;
    }

    .ros-knopf[b-301o1emgz5], .w95-knopf[b-301o1emgz5] {
        width: 20px;
        height: 18px;
        padding: 0;
        display: grid;
        place-items: center;
        font: 700 12px/1 Tahoma, sans-serif;
        color: #000000;
        background: #c0c0c0;
        border: 2px solid;
        border-color: #ffffff #404040 #404040 #ffffff;
        box-shadow: inset -1px -1px 0 #808080;
        cursor: pointer;
    }

    .ros-knopf:active[b-301o1emgz5], .w95-knopf:active[b-301o1emgz5] {
        border-color: #404040 #ffffff #ffffff #404040;
        box-shadow: inset 1px 1px 0 #808080;
    }

    .ros-schliessen[b-301o1emgz5], .w95-schliessen[b-301o1emgz5] {
        margin-left: 2px;
    }

    /* Taskleiste unten */
    .ros-taskleiste[b-301o1emgz5], .w95-taskleiste[b-301o1emgz5] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 36px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 3px 4px;
        background: #c0c0c0;
        border-top: 2px solid #ffffff;
        box-shadow: 0 -1px 0 #dfdfdf;
        pointer-events: auto;
    }

    .ros-start[b-301o1emgz5], .w95-start[b-301o1emgz5] {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 26px;
        padding: 0 8px;
        box-sizing: border-box;
        color: #000000;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        background: #c0c0c0;
        border: 2px solid;
        border-color: #ffffff #404040 #404040 #ffffff;
        box-shadow: inset -1px -1px 0 #808080;
    }

    .ros-start:active[b-301o1emgz5], .w95-start:active[b-301o1emgz5] {
        border-color: #404040 #ffffff #ffffff #404040;
    }

    .ros-trenner[b-301o1emgz5], .w95-trenner[b-301o1emgz5] {
        width: 2px;
        height: 24px;
        border-left: 1px solid #808080;
        border-right: 1px solid #ffffff;
    }

    /* Aufgabenschaltfläche: gedrückt (= Fenster ist offen) */
    .ros-aufgabe[b-301o1emgz5], .w95-aufgabe[b-301o1emgz5] {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 26px;
        max-width: 280px;
        padding: 0 10px;
        box-sizing: border-box;
        font: 700 12px/1 Tahoma, sans-serif;
        color: #000000;
        background: repeating-conic-gradient(#c0c0c0 0% 25%, #ffffff 0% 50%) 0 0 / 2px 2px;
        border: 2px solid;
        border-color: #404040 #ffffff #ffffff #404040;
        cursor: pointer;
    }

    .ros-aufgabe-text[b-301o1emgz5], .w95-aufgabe-text[b-301o1emgz5] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ros-tray[b-301o1emgz5], .w95-tray[b-301o1emgz5] {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 26px;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 12px;
        color: #000000;
        border: 1px solid;
        border-color: #808080 #ffffff #ffffff #808080;
    }
}
/* /Dokumentation/Pages/DokumentationIndex.razor.rz.scp.css */
/* -------------------------------------------------------------
   3D-Dokumentation Domino-Parcours
   Ästhetik: Cyber-Comic / Graphic-Novel (High Contrast, Ink Lines)
   ------------------------------------------------------------- */

.doku-viewport[b-ybd05x5zq3] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0a0b10;
    color: #e2e8f0;
    font-family: 'Rajdhani', sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* 3D WebGL Canvas */
.doku-canvas[b-ybd05x5zq3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    touch-action: none;
    z-index: 1;
}

/* -------------------------------------------------------------
   Top Header HUD
   ------------------------------------------------------------- */
.doku-top-hud[b-ybd05x5zq3] {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.doku-nav-btn[b-ybd05x5zq3] {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(12, 16, 26, 0.88);
    border: 2px solid #00e5ff;
    color: #00e5ff;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 229, 255, 0.25);
    transition: all 0.2s ease;
}

.doku-nav-btn:hover[b-ybd05x5zq3] {
    background: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.5);
    transform: translateY(-2px);
}

.doku-title-box[b-ybd05x5zq3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.doku-tag[b-ybd05x5zq3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffea00;
    letter-spacing: 0.16em;
    background: rgba(10, 14, 22, 0.7);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 234, 0, 0.4);
}

.doku-tag-dot[b-ybd05x5zq3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffea00;
    box-shadow: 0 0 8px #ffea00;
}

.doku-main-title[b-ybd05x5zq3] {
    margin: 4px 0 0;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
}

.doku-stats-box[b-ybd05x5zq3] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.doku-stat-pill[b-ybd05x5zq3] {
    background: rgba(12, 16, 26, 0.88);
    border: 2px solid rgba(255, 234, 0, 0.5);
    padding: 6px 14px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(8px);
}

.stat-num[b-ybd05x5zq3] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffea00;
    line-height: 1;
}

.stat-lbl[b-ybd05x5zq3] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94a3b8;
}

.doku-home-btn[b-ybd05x5zq3] {
    width: 40px;
    height: 40px;
    background: rgba(12, 16, 26, 0.88);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.doku-home-btn:hover[b-ybd05x5zq3] {
    border-color: #ff7700;
    color: #ff7700;
    box-shadow: 0 0 15px rgba(255, 119, 0, 0.4);
    transform: translateY(-2px);
}

/* -------------------------------------------------------------
   Inspektion Comic-Info-Card (Gestochen scharf & lesbar)
   ------------------------------------------------------------- */
.doku-comic-card[b-ybd05x5zq3] {
    position: absolute;
    bottom: 110px;
    right: 24px;
    width: 440px;
    max-width: calc(100vw - 48px);
    background: rgba(10, 14, 22, 0.94);
    border: 2px solid #ff7700;
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
    z-index: 30;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 119, 0, 0.25);
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.doku-comic-card.compact-card[b-ybd05x5zq3] {
    transform: scale(0.92);
    opacity: 0.88;
}

/* Comic-Eckwinkel */
.comic-card-edge[b-ybd05x5zq3] {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #ffea00;
    border-style: solid;
}
.comic-card-edge.tl[b-ybd05x5zq3] { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.comic-card-edge.tr[b-ybd05x5zq3] { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.comic-card-edge.bl[b-ybd05x5zq3] { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.comic-card-edge.br[b-ybd05x5zq3] { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }

.comic-card-header[b-ybd05x5zq3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 8px;
}

.commit-badge[b-ybd05x5zq3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.commit-nr[b-ybd05x5zq3] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffea00;
    letter-spacing: 0.05em;
}

.commit-hash[b-ybd05x5zq3] {
    font-family: monospace;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    color: #94a3b8;
}

.comic-card-meta[b-ybd05x5zq3] {
    font-size: 0.85rem;
    color: #94a3b8;
    display: flex;
    gap: 16px;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.comic-card-title[b-ybd05x5zq3] {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.comic-card-desc[b-ybd05x5zq3] {
    font-size: 0.98rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0 0 1.2rem;
}

.comic-card-stepper[b-ybd05x5zq3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stepper-btn[b-ybd05x5zq3] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    padding: 6px 14px;
    border-radius: 5px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stepper-btn:hover:not(:disabled)[b-ybd05x5zq3] {
    background: rgba(255, 119, 0, 0.2);
    border-color: #ff7700;
    color: #ffffff;
}

.stepper-btn:disabled[b-ybd05x5zq3] {
    opacity: 0.3;
    cursor: not-allowed;
}

.stepper-count[b-ybd05x5zq3] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
}

/* -------------------------------------------------------------
   Bottom HUD Bar
   ------------------------------------------------------------- */
.doku-bottom-hud[b-ybd05x5zq3] {
    position: absolute;
    bottom: 24px;
    left: 20px;
    right: 20px;
    z-index: 20;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.hud-bar[b-ybd05x5zq3] {
    pointer-events: auto;
    background: rgba(10, 14, 22, 0.92);
    border: 2px solid rgba(0, 229, 255, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 229, 255, 0.2);
}

.hud-main-btn[b-ybd05x5zq3] {
    background: linear-gradient(135deg, #00e5ff, #0099ff);
    color: #060a12;
    border: none;
    border-radius: 8px;
    padding: 12px 26px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-main-btn:hover[b-ybd05x5zq3] {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.9);
}

.hud-main-btn.is-running[b-ybd05x5zq3] {
    background: linear-gradient(135deg, #ff7700, #ff3300);
    box-shadow: 0 0 20px rgba(255, 119, 0, 0.6);
    color: #ffffff;
}

.hud-main-btn.is-running:hover[b-ybd05x5zq3] {
    box-shadow: 0 0 30px rgba(255, 119, 0, 0.9);
}

.hud-btn[b-ybd05x5zq3] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.hud-btn:hover[b-ybd05x5zq3] {
    background: rgba(255, 255, 255, 0.16);
    border-color: #ffffff;
    color: #ffffff;
}

.hud-jump-nav[b-ybd05x5zq3] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hud-mini-btn[b-ybd05x5zq3] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hud-mini-btn:hover:not(:disabled)[b-ybd05x5zq3] {
    background: #00e5ff;
    color: #050810;
    border-color: #00e5ff;
}

.hud-mini-btn:disabled[b-ybd05x5zq3] {
    opacity: 0.3;
    cursor: not-allowed;
}

.hud-step-label[b-ybd05x5zq3] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffea00;
    padding: 0 6px;
}

/* -------------------------------------------------------------
   Grand Finale Modal (Monolith Aktivierung)
   ------------------------------------------------------------- */
.doku-finish-backdrop[b-ybd05x5zq3] {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 12, 0.85);
    backdrop-filter: blur(10px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn-b-ybd05x5zq3 0.4s ease;
}

.doku-finish-card[b-ybd05x5zq3] {
    position: relative;
    background: #0a0d14;
    border: 3px solid #ffea00;
    border-radius: 16px;
    padding: 2.8rem 2.4rem;
    max-width: 580px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 60px rgba(255, 234, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.9);
    animation: zoomUp-b-ybd05x5zq3 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.finish-badge[b-ybd05x5zq3] {
    display: inline-block;
    background: #ffea00;
    color: #06080e;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    padding: 4px 14px;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.finish-title[b-ybd05x5zq3] {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 1.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(255, 234, 0, 0.5);
}

.finish-monolith-frame[b-ybd05x5zq3] {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 1.5rem;
    border: 3px solid #00e5ff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.4);
}

.finish-portrait[b-ybd05x5zq3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.finish-tag[b-ybd05x5zq3] {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #00e5ff;
    color: #060911;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.06em;
}

.finish-desc[b-ybd05x5zq3] {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 0 2rem;
}

.finish-actions[b-ybd05x5zq3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finish-btn[b-ybd05x5zq3] {
    width: 100%;
    padding: 13px 20px;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.finish-btn.primary[b-ybd05x5zq3] {
    background: linear-gradient(135deg, #00e5ff, #0099ff);
    color: #060911;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.finish-btn.primary:hover[b-ybd05x5zq3] {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.8);
}

.finish-btn.secondary[b-ybd05x5zq3] {
    background: linear-gradient(135deg, #ff7700, #ff5500);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 119, 0, 0.4);
}

.finish-btn.secondary:hover[b-ybd05x5zq3] {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 119, 0, 0.8);
}

.finish-btn.tertiary[b-ybd05x5zq3] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
}

.finish-btn.tertiary:hover[b-ybd05x5zq3] {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* -------------------------------------------------------------
   Loader Overlay
   ------------------------------------------------------------- */
.doku-loader-overlay[b-ybd05x5zq3] {
    position: absolute;
    inset: 0;
    background: #0a0b10;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.doku-spinner[b-ybd05x5zq3] {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(0, 229, 255, 0.2);
    border-top-color: #00e5ff;
    border-radius: 50%;
    animation: spin-b-ybd05x5zq3 0.8s linear infinite;
}

.doku-loader-text[b-ybd05x5zq3] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #00e5ff;
    letter-spacing: 0.14em;
}

/* Keyframes */
@keyframes spin-b-ybd05x5zq3 {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-ybd05x5zq3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomUp-b-ybd05x5zq3 {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* -------------------------------------------------------------
   Mobile Optimierung
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .doku-top-hud[b-ybd05x5zq3] {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .doku-main-title[b-ybd05x5zq3] {
        font-size: 1.1rem;
    }

    .doku-tag[b-ybd05x5zq3] {
        display: none;
    }

    .doku-comic-card[b-ybd05x5zq3] {
        bottom: 85px;
        left: 10px;
        right: 10px;
        width: auto;
        padding: 1.1rem;
        max-height: 45vh;
        overflow-y: auto;
    }

    .doku-bottom-hud[b-ybd05x5zq3] {
        bottom: 12px;
        left: 10px;
        right: 10px;
    }

    .hud-bar[b-ybd05x5zq3] {
        width: 100%;
        justify-content: space-between;
        padding: 8px 10px;
        gap: 6px;
    }

    .hud-main-btn[b-ybd05x5zq3] {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .hud-btn .btn-text[b-ybd05x5zq3] {
        display: none;
    }

    .hud-step-label[b-ybd05x5zq3] {
        display: none;
    }
}

/* Hinweis in Pause / Bereitschaft: Steine anklicken oder blättern */
.hud-hint[b-ybd05x5zq3] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    padding: 5px 14px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #ffe9bf;
    background: rgba(20, 12, 6, 0.72);
    border: 1px solid rgba(255, 210, 120, 0.45);
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

/* Handy: im Lauf nur Kopfzeile und Titel, damit die Ego-Fahrt sichtbar bleibt */
@media (max-width: 767.98px) {
    .doku-comic-card.compact-card .comic-card-desc[b-ybd05x5zq3],
    .doku-comic-card.compact-card .comic-card-stepper[b-ybd05x5zq3],
    .doku-comic-card.compact-card .comic-card-meta[b-ybd05x5zq3] {
        display: none;
    }
}

/* Finale: Knöpfe auf der Vorderseite des umgefallenen Monolithen (Größe und Lage setzt doku-domino.js) */
.doku-finale-stein[b-ybd05x5zq3] {
    position: absolute;
    z-index: 40;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    --stein-b: 300px;
}

.finale-knoepfe[b-ybd05x5zq3] {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--stein-b) * 0.035);
    width: 70%;
    margin-bottom: calc(var(--stein-b) * 0.07);
}

.finale-btn[b-ybd05x5zq3] {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: calc(var(--stein-b) * 0.062);
    padding: calc(var(--stein-b) * 0.03) calc(var(--stein-b) * 0.04);
    color: #f3d98a;
    background: linear-gradient(#3a2818, #241810);
    border: 2px solid #c9a24a;
    border-radius: calc(var(--stein-b) * 0.03);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 230, 160, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.finale-btn:hover[b-ybd05x5zq3] {
    transform: translateY(-2px);
    filter: brightness(1.2);
}
/* /Intro2/Pages/Intro2.razor.rz.scp.css */
.intro-viewport[b-wrpldkea65] {
    position: fixed;
    inset: 0;                      /* füllt den sichtbaren Bereich (bei fixed ohne 100vh: Adressleisten am Handy schneiden nichts ab) */
    background: #030712;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    --iv-links: max(18px, env(safe-area-inset-left, 0px));
    --iv-unten: max(18px, env(safe-area-inset-bottom, 0px));
    --iv-oben: max(16px, env(safe-area-inset-top, 0px));
    font-family: 'Rajdhani', sans-serif;
    color: #f3f4f6;
}

.intro-canvas[b-wrpldkea65] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    touch-action: none;            /* Wischen/Tippen auf der Bühne gehört dem Intro (Hover-Effekte, Free View), nicht dem Seiten-Scroll */
}

/* ---------- Schwarzblende (Fade-in) ---------- */
.intro-fade-black[b-wrpldkea65] {
    position: absolute;
    inset: 0;
    background: #030712;
    z-index: 30;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Raketen-Partikel Canvas für Schrift-Explosionen ---------- */
.intro-rocket-canvas[b-wrpldkea65] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 31;
    pointer-events: none;
}

/* ---------- Pause-Knopf (Comic-Stil, dezent) ---------- */
.intro-pause-wrap[b-wrpldkea65] {
    position: absolute;
    left: var(--iv-links, 18px);
    bottom: var(--iv-unten, 18px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.intro-pause-btn[b-wrpldkea65] {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #f8fafc;
    background: #0b1220;
    box-shadow: 3px 3px 0 #38bdf8, 0 0 14px rgba(56, 189, 248, 0.25);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0.78;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.intro-pause-btn[b-wrpldkea65] { touch-action: manipulation; }

@media (hover: hover) {
.intro-pause-btn:hover[b-wrpldkea65] {
    opacity: 1;
    transform: translate(-1px, -1px) rotate(-6deg) scale(1.07);
    box-shadow: 4px 4px 0 #38bdf8, 0 0 18px rgba(56, 189, 248, 0.45);
}
}

.intro-pause-btn:active[b-wrpldkea65] {
    transform: translate(2px, 2px) scale(0.96);
    box-shadow: 1px 1px 0 #38bdf8;
}

.intro-pause-btn:focus-visible[b-wrpldkea65] {
    outline: 3px solid #facc15;
    outline-offset: 3px;
}

.intro-pause-btn svg[b-wrpldkea65] {
    width: 20px;
    height: 20px;
    fill: #f8fafc;
    stroke: none;
}

.intro-pause-btn .ip-play[b-wrpldkea65] { display: none; margin-left: 2px; }
.intro-pause-wrap.pausiert .ip-pause[b-wrpldkea65] { display: none; }
.intro-pause-wrap.pausiert .ip-play[b-wrpldkea65] { display: block; }
.intro-pause-wrap.pausiert .intro-pause-btn[b-wrpldkea65] { opacity: 1; box-shadow: 3px 3px 0 #facc15, 0 0 14px rgba(250, 204, 21, 0.35); }

.intro-pause-btn.pop[b-wrpldkea65] { animation: introPausePop-b-wrpldkea65 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }

@keyframes introPausePop-b-wrpldkea65 {
    0% { transform: scale(0.8) rotate(-12deg); }
    60% { transform: scale(1.18) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Comic-Schild über dem Knopf, nur bei Pause */
.intro-pause-schild[b-wrpldkea65] {
    position: absolute;
    left: 54px;
    bottom: 10px;
    white-space: nowrap;
    font-family: 'Bangers', 'Impact', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    color: #111827;
    background: #facc15;
    border: 3px solid #111827;
    border-radius: 6px;
    padding: 0 10px 1px;
    box-shadow: 3px 3px 0 #111827;
    transform: rotate(-5deg) scale(0);
    transform-origin: 20% 100%;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.15s ease;
}

/* Himmel-Knopf: Wolke; aus = durchgestrichen und blasser */
.intro-himmel-btn .ih-strich[b-wrpldkea65] { display: none; }
.intro-himmel-btn.aus[b-wrpldkea65] { opacity: 0.55; }
.intro-himmel-btn.aus .ih-strich[b-wrpldkea65] { display: block; }
.intro-himmel-btn.aus .ih-wolke[b-wrpldkea65] { fill: #94a3b8; }

/* Musik-Credit: unten mittig, leise ein- und wieder ausgeblendet */
.intro-musik-credit[b-wrpldkea65] {
    position: absolute;
    left: 50%;
    bottom: max(26px, env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 150px);
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    z-index: 39;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.78);
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.intro-musik-credit.an[b-wrpldkea65] { animation: introMusikCredit-b-wrpldkea65 7s ease-in-out 1.2s both; }

@keyframes introMusikCredit-b-wrpldkea65 {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    18% { opacity: 1; transform: translate(-50%, 0); }
    78% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Vollbild-Knopf: oben links; das Commit-Fenster rückt darunter */
.intro-voll-btn[b-wrpldkea65] { position: absolute; top: var(--iv-oben, 16px); left: var(--iv-links, 16px); z-index: 41; }
.intro-voll-btn svg[b-wrpldkea65] { fill: none; }
.intro-voll-btn .iv-aus[b-wrpldkea65] { display: none; }
.intro-voll-btn.an .iv-an[b-wrpldkea65] { display: none; }
.intro-voll-btn.an .iv-aus[b-wrpldkea65] { display: block; }
.intro-voll-btn.an[b-wrpldkea65] { opacity: 1; box-shadow: 3px 3px 0 #facc15, 0 0 14px rgba(250, 204, 21, 0.35); }

/* Ton-Knopf: Lautsprecher mit Wellen; aus = durchgestrichen und blasser */
.intro-ton-btn .it-strich[b-wrpldkea65] { display: none; }
.intro-ton-btn.aus[b-wrpldkea65] { opacity: 0.55; }
.intro-ton-btn.aus .it-strich[b-wrpldkea65] { display: block; }
.intro-ton-btn.aus .it-wellen[b-wrpldkea65] { display: none; }
.intro-ton-btn.aus .it-lautsprecher[b-wrpldkea65] { fill: #94a3b8; }

.intro-x-btn svg[b-wrpldkea65] { fill: none; }

/* 2×-Knopf: aus = blass, an = gelb wie das Pause-Schild */
.intro-tempo-btn span[b-wrpldkea65] { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.05rem; letter-spacing: 0.03em; color: #f8fafc; line-height: 1; }
.intro-tempo-btn.an[b-wrpldkea65] { opacity: 1; background: #facc15; box-shadow: 3px 3px 0 #111827, 0 0 14px rgba(250, 204, 21, 0.45); }
.intro-tempo-btn.an span[b-wrpldkea65] { color: #111827; }
@media (hover: hover) { .intro-x-btn:hover[b-wrpldkea65] { box-shadow: 4px 4px 0 #f43f5e, 0 0 18px rgba(244, 63, 94, 0.45); transform: translate(-1px, -1px) rotate(6deg) scale(1.07); } }
.intro-x-btn[b-wrpldkea65] { box-shadow: 3px 3px 0 #f43f5e, 0 0 14px rgba(244, 63, 94, 0.25); }

.intro-pause-wrap.pausiert .intro-x-btn[b-wrpldkea65] { box-shadow: 3px 3px 0 #f43f5e, 0 0 14px rgba(244, 63, 94, 0.25); opacity: 0.78; }

.intro-pause-wrap.pausiert .intro-pause-schild[b-wrpldkea65] { transform: rotate(-5deg) scale(1); opacity: 1; }

/* Free-View-Hinweis: mittig unten, nur bei Pause; pulsiert bis zum ersten Ziehen, danach ruhig */
.intro-freeview[b-wrpldkea65] {
    position: fixed;
    left: 50%;
    bottom: 22px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    padding: 2px 14px 3px;
    border: 3px solid #f8fafc;
    border-radius: 8px;
    background: #0b1220;
    box-shadow: 3px 3px 0 #38bdf8, 0 0 14px rgba(56, 189, 248, 0.3);
    transform: translateX(-50%) rotate(2deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1) 0.08s, opacity 0.15s ease;
}

.intro-freeview b[b-wrpldkea65] { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 0.1em; color: #38bdf8; }
.intro-freeview i[b-wrpldkea65] { font-family: 'Orbitron', sans-serif; font-style: normal; font-size: 0.68rem; letter-spacing: 0.1em; color: #e2e8f0; text-transform: uppercase; }

.intro-pause-wrap.pausiert .intro-freeview[b-wrpldkea65] { transform: translateX(-50%) rotate(2deg) scale(1); opacity: 1; animation: introFreeviewPuls-b-wrpldkea65 1.8s ease-in-out 0.4s infinite; }
.intro-pause-wrap.pausiert.blick-benutzt .intro-freeview[b-wrpldkea65] { animation: none; opacity: 0.8; transform: translateX(-50%) rotate(2deg) scale(0.92); }

@keyframes introFreeviewPuls-b-wrpldkea65 {
    0%, 100% { box-shadow: 3px 3px 0 #38bdf8, 0 0 14px rgba(56, 189, 248, 0.3); }
    50% { box-shadow: 3px 3px 0 #38bdf8, 0 0 26px rgba(56, 189, 248, 0.75); }
}

@media (max-width: 767.98px) {
    .intro-freeview[b-wrpldkea65] { bottom: 78px; padding: 1px 10px 2px; }
    .intro-freeview b[b-wrpldkea65] { font-size: 1rem; }
    .intro-freeview i[b-wrpldkea65] { font-size: 0.58rem; }
}

/* ---------- Loader ---------- */
.intro-loader-overlay[b-wrpldkea65] {
    position: absolute;
    inset: 0;
    background: #030712;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 50;
}

.intro-spinner[b-wrpldkea65] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(56, 189, 248, 0.2);
    border-top-color: #38bdf8;
    animation: spin-b-wrpldkea65 0.9s linear infinite;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.intro-loader-text[b-wrpldkea65] {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #38bdf8;
}

@keyframes spin-b-wrpldkea65 {
    to { transform: rotate(360deg); }
}



/* ---------- Mitlaufendes Commit-Fenster (Comic-Rahmen, Walzenzähler) ---------- */
.intro-commit[b-wrpldkea65] {
    --acc: #00f0ff;
    position: absolute;
    top: calc(var(--iv-oben, 16px) + 54px);
    left: var(--iv-links, 16px);
    z-index: 38;
    width: 270px;
    padding: 0 0 8px;
    border: 3px solid #f8fafc;
    border-radius: 10px;
    background: rgba(11, 18, 32, 0.9);
    box-shadow: 4px 4px 0 var(--acc), 0 0 18px rgba(0, 0, 0, 0.45);
    color: #f8fafc;
    pointer-events: none;
    opacity: 0;
    transform: translate(-14px, -8px) rotate(-1.5deg) scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.8s ease;
}

.intro-commit.an[b-wrpldkea65] { opacity: 1; transform: none; }

.ic-kopf[b-wrpldkea65] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-bottom: 3px solid #f8fafc;
    background: var(--acc);
    transition: background 0.8s ease;
}

.ic-kopf i[b-wrpldkea65] { width: 8px; height: 8px; border-radius: 50%; background: #0b1220; opacity: 0.75; }
.ic-kopf b[b-wrpldkea65] { margin-left: auto; font-family: 'Bangers', 'Impact', sans-serif; font-size: 1rem; letter-spacing: 0.12em; font-weight: 400; color: #0b1220; }

.ic-zaehler[b-wrpldkea65] { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px 0; }
.ic-nr[b-wrpldkea65] { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.1rem; color: var(--acc); transition: color 0.8s ease; }
.ic-walze[b-wrpldkea65] { display: inline-flex; gap: 2px; padding: 1px 4px; border-radius: 5px; background: #020617; box-shadow: inset 0 0 0 2px rgba(248, 250, 252, 0.25); }
.ic-ziffer[b-wrpldkea65] { display: block; height: 1.7rem; overflow: hidden; font-family: 'Orbitron', monospace; font-weight: 900; font-size: 1.45rem; line-height: 1.7rem; width: 1.05ch; }
.ic-band[b-wrpldkea65] { display: block; transform: translateY(calc(var(--d, 0) * -1.7rem)); transition: transform 0.16s ease-out; }
.ic-band b[b-wrpldkea65] { display: block; height: 1.7rem; font-weight: 900; text-align: center; }
.ic-ziffer.null[b-wrpldkea65] { opacity: 0.22; }
.ic-von[b-wrpldkea65] { margin-left: auto; font-family: 'Orbitron', monospace; font-size: 0.72rem; color: #94a3b8; }

.ic-meta[b-wrpldkea65] { display: flex; justify-content: space-between; padding: 2px 12px 0; font-family: 'Courier New', monospace; font-size: 0.72rem; color: #94a3b8; }
.ic-hash[b-wrpldkea65] { color: var(--acc); transition: color 0.8s ease; }

.ic-reel[b-wrpldkea65] { margin: 4px 12px 0; height: 3.75em; overflow: hidden; font-size: 0.74rem; line-height: 1.25; -webkit-mask-image: linear-gradient(rgba(0,0,0,0.3), #000 33%, #000 66%, rgba(0,0,0,0.3)); mask-image: linear-gradient(rgba(0,0,0,0.3), #000 33%, #000 66%, rgba(0,0,0,0.3)); }
.ic-reel-in p[b-wrpldkea65] { margin: 0; height: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #64748b; }
.ic-reel-in p:nth-child(2)[b-wrpldkea65] { color: #f8fafc; font-weight: 700; }
/* Meilenstein-Pause: Titel des gezeigten Fensters in der Akzentfarbe */
.intro-commit.sonder .ic-reel-in p:nth-child(2)[b-wrpldkea65] { color: var(--acc); text-shadow: 0 0 10px var(--acc); letter-spacing: 0.02em; }

.ic-balken[b-wrpldkea65] { margin: 6px 12px 0; height: 6px; border-radius: 3px; background: rgba(248, 250, 252, 0.15); overflow: hidden; }
.ic-balken i[b-wrpldkea65] { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: left; transform: scaleX(0); transition: transform 0.2s linear, background 0.8s ease; }

@media (max-width: 767.98px) {
    .intro-commit[b-wrpldkea65] { top: auto; bottom: 14px; left: 78px; right: 14px; width: auto; }
    .ic-reel[b-wrpldkea65] { height: 2.5em; }
    .ic-reel-in p:first-child[b-wrpldkea65] { display: none; }
    .ic-meta[b-wrpldkea65] { display: none; }
}

/* ---------- Smartphones / Tablets: Hochformat und niedrige Querformat-Höhen ---------- */
@media (max-width: 767.98px) {
    .intro-musik-credit[b-wrpldkea65] { font-size: 0.72rem; letter-spacing: 0.14em; bottom: calc(var(--iv-unten, 18px) + 140px); max-width: calc(100vw - 40px); }
    .intro-freeview[b-wrpldkea65] { left: calc(50% + 28px); max-width: calc(100vw - 100px); white-space: normal; flex-wrap: wrap; justify-content: center; }
    .intro-pause-wrap[b-wrpldkea65] { gap: 9px; }
}

/* niedrige Höhe (Handy quer) oder Touch-Querformat: Knöpfe in einer Reihe, damit sie den Commit-Kasten nicht überlappen */
@media (max-height: 520px), (pointer: coarse) and (orientation: landscape) {
    .intro-pause-wrap[b-wrpldkea65] { flex-direction: row; align-items: center; gap: 8px; }
    .intro-pause-schild[b-wrpldkea65] { left: auto; right: -92px; bottom: 54px; }
    .intro-commit[b-wrpldkea65] { top: var(--iv-oben, 16px); left: calc(var(--iv-links, 16px) + 54px); right: auto; bottom: auto; width: 220px; }
    .ic-reel[b-wrpldkea65] { height: 2.5em; }
    .ic-reel-in p:first-child[b-wrpldkea65] { display: none; }
    .ic-meta[b-wrpldkea65] { display: none; }
    .intro-musik-credit[b-wrpldkea65] { bottom: calc(var(--iv-unten, 18px) + 54px); }
}
/* /Intro/Pages/Intro.razor.rz.scp.css */
.intro-viewport[b-arlfmlldsg] {
    position: fixed;
    inset: 0;                      /* füllt den sichtbaren Bereich (bei fixed ohne 100vh: Adressleisten am Handy schneiden nichts ab) */
    background: #030712;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    --iv-links: max(18px, env(safe-area-inset-left, 0px));
    --iv-unten: max(18px, env(safe-area-inset-bottom, 0px));
    --iv-oben: max(16px, env(safe-area-inset-top, 0px));
    font-family: 'Rajdhani', sans-serif;
    color: #f3f4f6;
}

.intro-canvas[b-arlfmlldsg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    touch-action: none;            /* Wischen/Tippen auf der Bühne gehört dem Intro (Hover-Effekte, Free View), nicht dem Seiten-Scroll */
}

/* ---------- Schwarzblende (Fade-in) ---------- */
.intro-fade-black[b-arlfmlldsg] {
    position: absolute;
    inset: 0;
    background: #030712;
    z-index: 30;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Raketen-Partikel Canvas für Schrift-Explosionen ---------- */
.intro-rocket-canvas[b-arlfmlldsg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 31;
    pointer-events: none;
}

/* ---------- Pause-Knopf (Comic-Stil, dezent) ---------- */
.intro-pause-wrap[b-arlfmlldsg] {
    position: absolute;
    left: var(--iv-links, 18px);
    bottom: var(--iv-unten, 18px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.intro-pause-btn[b-arlfmlldsg] {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #f8fafc;
    background: #0b1220;
    box-shadow: 3px 3px 0 #38bdf8, 0 0 14px rgba(56, 189, 248, 0.25);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0.78;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.intro-pause-btn[b-arlfmlldsg] { touch-action: manipulation; }

@media (hover: hover) {
.intro-pause-btn:hover[b-arlfmlldsg] {
    opacity: 1;
    transform: translate(-1px, -1px) rotate(-6deg) scale(1.07);
    box-shadow: 4px 4px 0 #38bdf8, 0 0 18px rgba(56, 189, 248, 0.45);
}
}

.intro-pause-btn:active[b-arlfmlldsg] {
    transform: translate(2px, 2px) scale(0.96);
    box-shadow: 1px 1px 0 #38bdf8;
}

.intro-pause-btn:focus-visible[b-arlfmlldsg] {
    outline: 3px solid #facc15;
    outline-offset: 3px;
}

.intro-pause-btn svg[b-arlfmlldsg] {
    width: 20px;
    height: 20px;
    fill: #f8fafc;
    stroke: none;
}

.intro-pause-btn .ip-play[b-arlfmlldsg] { display: none; margin-left: 2px; }
.intro-pause-wrap.pausiert .ip-pause[b-arlfmlldsg] { display: none; }
.intro-pause-wrap.pausiert .ip-play[b-arlfmlldsg] { display: block; }
.intro-pause-wrap.pausiert .intro-pause-btn[b-arlfmlldsg] { opacity: 1; box-shadow: 3px 3px 0 #facc15, 0 0 14px rgba(250, 204, 21, 0.35); }

.intro-pause-btn.pop[b-arlfmlldsg] { animation: introPausePop-b-arlfmlldsg 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }

@keyframes introPausePop-b-arlfmlldsg {
    0% { transform: scale(0.8) rotate(-12deg); }
    60% { transform: scale(1.18) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Comic-Schild über dem Knopf, nur bei Pause */
.intro-pause-schild[b-arlfmlldsg] {
    position: absolute;
    left: 54px;
    bottom: 10px;
    white-space: nowrap;
    font-family: 'Bangers', 'Impact', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    color: #111827;
    background: #facc15;
    border: 3px solid #111827;
    border-radius: 6px;
    padding: 0 10px 1px;
    box-shadow: 3px 3px 0 #111827;
    transform: rotate(-5deg) scale(0);
    transform-origin: 20% 100%;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.15s ease;
}

/* Himmel-Knopf: Wolke; aus = durchgestrichen und blasser */
.intro-himmel-btn .ih-strich[b-arlfmlldsg] { display: none; }
.intro-himmel-btn.aus[b-arlfmlldsg] { opacity: 0.55; }
.intro-himmel-btn.aus .ih-strich[b-arlfmlldsg] { display: block; }
.intro-himmel-btn.aus .ih-wolke[b-arlfmlldsg] { fill: #94a3b8; }

/* Musik-Credit: unten mittig, leise ein- und wieder ausgeblendet */
.intro-musik-credit[b-arlfmlldsg] {
    position: absolute;
    left: 50%;
    bottom: max(26px, env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 150px);
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    z-index: 39;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.78);
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.intro-musik-credit.an[b-arlfmlldsg] { animation: introMusikCredit-b-arlfmlldsg 7s ease-in-out 1.2s both; }

@keyframes introMusikCredit-b-arlfmlldsg {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    18% { opacity: 1; transform: translate(-50%, 0); }
    78% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Vollbild-Knopf: oben links; das Commit-Fenster rückt darunter */
.intro-voll-btn[b-arlfmlldsg] { position: absolute; top: var(--iv-oben, 16px); left: var(--iv-links, 16px); z-index: 41; }
.intro-voll-btn svg[b-arlfmlldsg] { fill: none; }
.intro-voll-btn .iv-aus[b-arlfmlldsg] { display: none; }
.intro-voll-btn.an .iv-an[b-arlfmlldsg] { display: none; }
.intro-voll-btn.an .iv-aus[b-arlfmlldsg] { display: block; }
.intro-voll-btn.an[b-arlfmlldsg] { opacity: 1; box-shadow: 3px 3px 0 #facc15, 0 0 14px rgba(250, 204, 21, 0.35); }

/* Ton-Knopf: Lautsprecher mit Wellen; aus = durchgestrichen und blasser */
.intro-ton-btn .it-strich[b-arlfmlldsg] { display: none; }
.intro-ton-btn.aus[b-arlfmlldsg] { opacity: 0.55; }
.intro-ton-btn.aus .it-strich[b-arlfmlldsg] { display: block; }
.intro-ton-btn.aus .it-wellen[b-arlfmlldsg] { display: none; }
.intro-ton-btn.aus .it-lautsprecher[b-arlfmlldsg] { fill: #94a3b8; }

.intro-x-btn svg[b-arlfmlldsg] { fill: none; }

/* 2×-Knopf: aus = blass, an = gelb wie das Pause-Schild */
.intro-tempo-btn span[b-arlfmlldsg] { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.05rem; letter-spacing: 0.03em; color: #f8fafc; line-height: 1; }
.intro-tempo-btn.an[b-arlfmlldsg] { opacity: 1; background: #facc15; box-shadow: 3px 3px 0 #111827, 0 0 14px rgba(250, 204, 21, 0.45); }
.intro-tempo-btn.an span[b-arlfmlldsg] { color: #111827; }
@media (hover: hover) { .intro-x-btn:hover[b-arlfmlldsg] { box-shadow: 4px 4px 0 #f43f5e, 0 0 18px rgba(244, 63, 94, 0.45); transform: translate(-1px, -1px) rotate(6deg) scale(1.07); } }
.intro-x-btn[b-arlfmlldsg] { box-shadow: 3px 3px 0 #f43f5e, 0 0 14px rgba(244, 63, 94, 0.25); }

.intro-pause-wrap.pausiert .intro-x-btn[b-arlfmlldsg] { box-shadow: 3px 3px 0 #f43f5e, 0 0 14px rgba(244, 63, 94, 0.25); opacity: 0.78; }

.intro-pause-wrap.pausiert .intro-pause-schild[b-arlfmlldsg] { transform: rotate(-5deg) scale(1); opacity: 1; }

/* Free-View-Hinweis: mittig unten, nur bei Pause; pulsiert bis zum ersten Ziehen, danach ruhig */
.intro-freeview[b-arlfmlldsg] {
    position: fixed;
    left: 50%;
    bottom: 22px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    padding: 2px 14px 3px;
    border: 3px solid #f8fafc;
    border-radius: 8px;
    background: #0b1220;
    box-shadow: 3px 3px 0 #38bdf8, 0 0 14px rgba(56, 189, 248, 0.3);
    transform: translateX(-50%) rotate(2deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1) 0.08s, opacity 0.15s ease;
}

.intro-freeview b[b-arlfmlldsg] { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 0.1em; color: #38bdf8; }
.intro-freeview i[b-arlfmlldsg] { font-family: 'Orbitron', sans-serif; font-style: normal; font-size: 0.68rem; letter-spacing: 0.1em; color: #e2e8f0; text-transform: uppercase; }

.intro-pause-wrap.pausiert .intro-freeview[b-arlfmlldsg] { transform: translateX(-50%) rotate(2deg) scale(1); opacity: 1; animation: introFreeviewPuls-b-arlfmlldsg 1.8s ease-in-out 0.4s infinite; }
.intro-pause-wrap.pausiert.blick-benutzt .intro-freeview[b-arlfmlldsg] { animation: none; opacity: 0.8; transform: translateX(-50%) rotate(2deg) scale(0.92); }

@keyframes introFreeviewPuls-b-arlfmlldsg {
    0%, 100% { box-shadow: 3px 3px 0 #38bdf8, 0 0 14px rgba(56, 189, 248, 0.3); }
    50% { box-shadow: 3px 3px 0 #38bdf8, 0 0 26px rgba(56, 189, 248, 0.75); }
}

@media (max-width: 767.98px) {
    .intro-freeview[b-arlfmlldsg] { bottom: 78px; padding: 1px 10px 2px; }
    .intro-freeview b[b-arlfmlldsg] { font-size: 1rem; }
    .intro-freeview i[b-arlfmlldsg] { font-size: 0.58rem; }
}

/* ---------- Loader ---------- */
.intro-loader-overlay[b-arlfmlldsg] {
    position: absolute;
    inset: 0;
    background: #030712;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 50;
}

.intro-spinner[b-arlfmlldsg] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(56, 189, 248, 0.2);
    border-top-color: #38bdf8;
    animation: spin-b-arlfmlldsg 0.9s linear infinite;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.intro-loader-text[b-arlfmlldsg] {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #38bdf8;
}

@keyframes spin-b-arlfmlldsg {
    to { transform: rotate(360deg); }
}



/* ---------- Mitlaufendes Commit-Fenster (Comic-Rahmen, Walzenzähler) ---------- */
.intro-commit[b-arlfmlldsg] {
    --acc: #00f0ff;
    position: absolute;
    top: calc(var(--iv-oben, 16px) + 54px);
    left: var(--iv-links, 16px);
    z-index: 38;
    width: 270px;
    padding: 0 0 8px;
    border: 3px solid #f8fafc;
    border-radius: 10px;
    background: rgba(11, 18, 32, 0.9);
    box-shadow: 4px 4px 0 var(--acc), 0 0 18px rgba(0, 0, 0, 0.45);
    color: #f8fafc;
    pointer-events: none;
    opacity: 0;
    transform: translate(-14px, -8px) rotate(-1.5deg) scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.8s ease;
}

.intro-commit.an[b-arlfmlldsg] { opacity: 1; transform: none; }

.ic-kopf[b-arlfmlldsg] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-bottom: 3px solid #f8fafc;
    background: var(--acc);
    transition: background 0.8s ease;
}

.ic-kopf i[b-arlfmlldsg] { width: 8px; height: 8px; border-radius: 50%; background: #0b1220; opacity: 0.75; }
.ic-kopf b[b-arlfmlldsg] { margin-left: auto; font-family: 'Bangers', 'Impact', sans-serif; font-size: 1rem; letter-spacing: 0.12em; font-weight: 400; color: #0b1220; }

.ic-zaehler[b-arlfmlldsg] { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px 0; }
.ic-nr[b-arlfmlldsg] { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.1rem; color: var(--acc); transition: color 0.8s ease; }
.ic-walze[b-arlfmlldsg] { display: inline-flex; gap: 2px; padding: 1px 4px; border-radius: 5px; background: #020617; box-shadow: inset 0 0 0 2px rgba(248, 250, 252, 0.25); }
.ic-ziffer[b-arlfmlldsg] { display: block; height: 1.7rem; overflow: hidden; font-family: 'Orbitron', monospace; font-weight: 900; font-size: 1.45rem; line-height: 1.7rem; width: 1.05ch; }
.ic-band[b-arlfmlldsg] { display: block; transform: translateY(calc(var(--d, 0) * -1.7rem)); transition: transform 0.16s ease-out; }
.ic-band b[b-arlfmlldsg] { display: block; height: 1.7rem; font-weight: 900; text-align: center; }
.ic-ziffer.null[b-arlfmlldsg] { opacity: 0.22; }
.ic-von[b-arlfmlldsg] { margin-left: auto; font-family: 'Orbitron', monospace; font-size: 0.72rem; color: #94a3b8; }

.ic-meta[b-arlfmlldsg] { display: flex; justify-content: space-between; padding: 2px 12px 0; font-family: 'Courier New', monospace; font-size: 0.72rem; color: #94a3b8; }
.ic-hash[b-arlfmlldsg] { color: var(--acc); transition: color 0.8s ease; }

.ic-reel[b-arlfmlldsg] { margin: 4px 12px 0; height: 3.75em; overflow: hidden; font-size: 0.74rem; line-height: 1.25; -webkit-mask-image: linear-gradient(rgba(0,0,0,0.3), #000 33%, #000 66%, rgba(0,0,0,0.3)); mask-image: linear-gradient(rgba(0,0,0,0.3), #000 33%, #000 66%, rgba(0,0,0,0.3)); }
.ic-reel-in p[b-arlfmlldsg] { margin: 0; height: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #64748b; }
.ic-reel-in p:nth-child(2)[b-arlfmlldsg] { color: #f8fafc; font-weight: 700; }
/* Meilenstein-Pause: Titel des gezeigten Fensters in der Akzentfarbe */
.intro-commit.sonder .ic-reel-in p:nth-child(2)[b-arlfmlldsg] { color: var(--acc); text-shadow: 0 0 10px var(--acc); letter-spacing: 0.02em; }

.ic-balken[b-arlfmlldsg] { margin: 6px 12px 0; height: 6px; border-radius: 3px; background: rgba(248, 250, 252, 0.15); overflow: hidden; }
.ic-balken i[b-arlfmlldsg] { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: left; transform: scaleX(0); transition: transform 0.2s linear, background 0.8s ease; }

@media (max-width: 767.98px) {
    .intro-commit[b-arlfmlldsg] { top: auto; bottom: 14px; left: 78px; right: 14px; width: auto; }
    .ic-reel[b-arlfmlldsg] { height: 2.5em; }
    .ic-reel-in p:first-child[b-arlfmlldsg] { display: none; }
    .ic-meta[b-arlfmlldsg] { display: none; }
}

/* ---------- Smartphones / Tablets: Hochformat und niedrige Querformat-Höhen ---------- */
@media (max-width: 767.98px) {
    .intro-musik-credit[b-arlfmlldsg] { font-size: 0.72rem; letter-spacing: 0.14em; bottom: calc(var(--iv-unten, 18px) + 140px); max-width: calc(100vw - 40px); }
    .intro-freeview[b-arlfmlldsg] { left: calc(50% + 28px); max-width: calc(100vw - 100px); white-space: normal; flex-wrap: wrap; justify-content: center; }
    .intro-pause-wrap[b-arlfmlldsg] { gap: 9px; }
}

/* niedrige Höhe (Handy quer) oder Touch-Querformat: Knöpfe in einer Reihe, damit sie den Commit-Kasten nicht überlappen */
@media (max-height: 520px), (pointer: coarse) and (orientation: landscape) {
    .intro-pause-wrap[b-arlfmlldsg] { flex-direction: row; align-items: center; gap: 8px; }
    .intro-pause-schild[b-arlfmlldsg] { left: auto; right: -92px; bottom: 54px; }
    .intro-commit[b-arlfmlldsg] { top: var(--iv-oben, 16px); left: calc(var(--iv-links, 16px) + 54px); right: auto; bottom: auto; width: 220px; }
    .ic-reel[b-arlfmlldsg] { height: 2.5em; }
    .ic-reel-in p:first-child[b-arlfmlldsg] { display: none; }
    .ic-meta[b-arlfmlldsg] { display: none; }
    .intro-musik-credit[b-arlfmlldsg] { bottom: calc(var(--iv-unten, 18px) + 54px); }
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
/* Eigenständiger Vollbild-Bereich ohne Menü (Projekte, Scolaris, Webanalyse, Games, Start-Animation …):
   dunkler Grund, damit nie ein weißer Rand sichtbar wird, falls eine Seite nicht die ganze Höhe füllt. */
.empty-layout[b-anrjj2moxv] {
    min-height: 100vh;
    background-color: #050905;
    overflow: visible;   /* nichts fängt den Seitenscroll ab */
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ========================================================
   Grundlayout & Retro-Hintergrund-Variablen
   Standard-Werte & Farbwelten passend zu den Menü-Buttons:
   - Über mich: Deep Blue / Navy (#2c3b63)
   - Events: Burgundy / Weinrot (#6f3c40)
   - Hobbies: Pine Green / Tannengrün (#2b4a43)
   - Lemmy: Deep Purple / Violett (#3d3053)
   - Social: Warm Amber / Goldbraun (#816430)
   - Gästebuch: Teal / Petrol (#436c75)
   - Projekte: Steel Slate / Schiefergrau (#565e65)
   - Impressum: Terracotta / Warm Bronze (#a96b4c)
   ======================================================== */
.page[b-0wnlbct0w3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--retro-bg-base, #060b14);
    isolation: isolate; /* eigener Stapel: der Hintergrund (z-index -1) liegt hinter allem Inhalt */
    transition: background-color 0.4s ease;

    /* Fallback-Werte */
    --retro-bg-base: #060b14;
    --retro-accent-glow: rgba(44, 59, 99, 0.55);
    --retro-accent-secondary: rgba(56, 189, 248, 0.22);
    --retro-grid-color: rgba(56, 189, 248, 0.045);
}

/* 1. Über mich (Button: btn_aboutme -> Marineblau #2c3b63) */
.page.sektion-aboutme[b-0wnlbct0w3] {
    --retro-bg-base: #050a16;
    --retro-accent-glow: rgba(44, 59, 99, 0.75);
    --retro-accent-secondary: rgba(56, 189, 248, 0.25);
    --retro-grid-color: rgba(56, 189, 248, 0.045);
}

/* 2. Events (Button: btn_event -> Weinrot #6f3c40) */
.page.sektion-events[b-0wnlbct0w3] {
    --retro-bg-base: #140508;
    --retro-accent-glow: rgba(111, 60, 64, 0.75);
    --retro-accent-secondary: rgba(225, 29, 72, 0.22);
    --retro-grid-color: rgba(244, 63, 94, 0.045);
}

/* 3. Hobbies (Button: btn_hobbies -> Tannengrün #2b4a43) */
.page.sektion-hobbies[b-0wnlbct0w3] {
    --retro-bg-base: #04120e;
    --retro-accent-glow: rgba(43, 74, 67, 0.75);
    --retro-accent-secondary: rgba(16, 185, 129, 0.22);
    --retro-grid-color: rgba(52, 211, 153, 0.045);
}

/* 4. Lemmy (Button: btn_lemmy -> Deep Purple #3d3053) */
.page.sektion-lemmy[b-0wnlbct0w3] {
    --retro-bg-base: #0d0616;
    --retro-accent-glow: rgba(61, 48, 83, 0.8);
    --retro-accent-secondary: rgba(168, 85, 247, 0.22);
    --retro-grid-color: rgba(192, 132, 252, 0.045);
}

/* 5. Social (Button: btn_social -> Warm Amber #816430) */
.page.sektion-social[b-0wnlbct0w3] {
    --retro-bg-base: #150d03;
    --retro-accent-glow: rgba(129, 100, 48, 0.75);
    --retro-accent-secondary: rgba(245, 158, 11, 0.22);
    --retro-grid-color: rgba(251, 191, 36, 0.045);
}

/* 6. Gästebuch (Button: btn_gaestebuch -> Petrol / Teal #436c75) */
.page.sektion-gaestebuch[b-0wnlbct0w3] {
    --retro-bg-base: #041216;
    --retro-accent-glow: rgba(67, 108, 117, 0.75);
    --retro-accent-secondary: rgba(6, 182, 212, 0.22);
    --retro-grid-color: rgba(34, 211, 238, 0.045);
}

/* 7. Projekte (Button: btn_projekte -> Schiefergrau #565e65) */
.page.sektion-projekte[b-0wnlbct0w3] {
    --retro-bg-base: #0b0e12;
    --retro-accent-glow: rgba(86, 94, 101, 0.75);
    --retro-accent-secondary: rgba(148, 163, 184, 0.22);
    --retro-grid-color: rgba(203, 213, 225, 0.045);
}

/* 8. Impressum (Button: btn_impressum -> Warm Bronze / Terracotta #a96b4c) */
.page.sektion-impressum[b-0wnlbct0w3] {
    --retro-bg-base: #170a04;
    --retro-accent-glow: rgba(169, 107, 76, 0.75);
    --retro-accent-secondary: rgba(249, 115, 22, 0.22);
    --retro-grid-color: rgba(251, 146, 60, 0.045);
}

/* ========================================================
   Basis Retro-Hintergrund für alle Unterseiten:
   - CRT-Scanlines
   - Feines Cyber-Matrix-Raster (32px x 32px) in Akzentfarbe
   - 90er Dither / Pixel-Stippling
   - Farbliche Lichtflächen passend zum aktiven Nav-Button
   - Sanfte Rand-Vignette
   ======================================================== */
.page-schleier[b-0wnlbct0w3] {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: background 0.4s ease;
    background:
        /* Subtile CRT-Scanlines */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2) 0px,
            rgba(0, 0, 0, 0.2) 1px,
            transparent 1px,
            transparent 4px
        ),
        /* Feines Retro-Cyber-Raster (32px x 32px) getönt in der Seiten-Akzentfarbe */
        linear-gradient(var(--retro-grid-color, rgba(255, 255, 255, 0.035)) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--retro-grid-color, rgba(255, 255, 255, 0.035)) 1px, transparent 1px) 0 0 / 32px 32px,
        /* 90er Dither / Pixel-Stippling */
        radial-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 16px 16px,
        /* Haupt-Akzentfläche oben links (Farbe des aktiven Menü-Buttons) */
        radial-gradient(ellipse 70vw 50vh at 15% 15%, var(--retro-accent-glow, rgba(44, 59, 99, 0.5)), transparent 72%),
        /* Sekundäre Akzentfläche unten rechts */
        radial-gradient(ellipse 60vw 45vh at 85% 82%, var(--retro-accent-secondary, rgba(56, 189, 248, 0.2)), transparent 70%),
        /* Sanfte Rand-Vignette */
        radial-gradient(125% 105% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.75) 100%),
        /* Basis-Verlauf in den getönten Schwarzton der Seite */
        linear-gradient(168deg, var(--retro-bg-base, #060b14) 0%, rgba(3, 5, 8, 0.95) 100%);
}

.page.home-page .page-schleier[b-0wnlbct0w3] {
    display: none; /* RainerOS-Startseite bleibt unverändert */
}

main[b-0wnlbct0w3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ========================================================
   Mobile Einstellungen (unter 641px)
   ======================================================== */
@media (max-width: 640.98px) {
    /* Die Sidebar nimmt mobil keinen Platz ein */
    .sidebar[b-0wnlbct0w3] {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        z-index: 1000;
    }

    /* Platzhalter für den schwebenden Burger-Button */
    .top-row[b-0wnlbct0w3] {
        height: 4rem; /* Leicht vergrößert für den neuen Button */
        display: block; /* Flex entfernt, da Burger-Btn fixed ist */
        position: sticky;
        top: 0;
        z-index: 90;
    }

        .top-row.header-glass[b-0wnlbct0w3] {
            background-color: rgba(0, 0, 0, 0.35) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

    article.content[b-0wnlbct0w3] {
        flex: 1;
        padding: 1.25rem 0.5rem; /* schmale Seitenränder auf dem Handy */
        overflow-x: hidden;
    }
}

/* ========================================================
   Desktop Einstellungen (ab 641px)
   ======================================================== */
@media (min-width: 641px) {
    .page[b-0wnlbct0w3] {
        flex-direction: row;
    }

    .sidebar[b-0wnlbct0w3] {
        width: 144px; /* schmale Leiste: Buttons untereinander */
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        z-index: 100;
    }

    /* Auf dem PC wird die obere Leiste komplett ausgeblendet */
    .top-row[b-0wnlbct0w3] {
        display: none !important;
    }

    article.content[b-0wnlbct0w3] {
        flex: 1;
        padding: 3rem 3.5rem !important;
        box-sizing: border-box;
        max-width: calc(1400px + 7rem); /* Inhalt (ohne Seitenrand) maximal 1400 px breit – gleiche Breite auf allen Seiten dieses Bereichs */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow-x: hidden;
    }

    .page.sektion-lemmy article.content[b-0wnlbct0w3] {
        padding: 1.5rem 1.75rem !important;
        max-width: min(1560px, calc(100% - 1.5rem));
    }
}

@media (min-width: 901px) {
    .page.sektion-gaestebuch[b-0wnlbct0w3] {
        height: 100vh;
        height: 100dvh;
        overflow: hidden !important;
    }

    .page.sektion-gaestebuch main[b-0wnlbct0w3] {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    .page.sektion-gaestebuch article.content[b-0wnlbct0w3] {
        padding: 0.5rem 1rem !important;
        max-width: min(1500px, calc(100% - 1rem));
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden !important;
        box-sizing: border-box;
    }
}

/* ========================================================
   STARTSEITE: Desktop 100vh, Mobil Liste ohne sichtbaren Scrollbalken
   RainerOS Retro-Hintergrund (#018574) nur auf der Startseite
   ======================================================== */
.page.home-page[b-0wnlbct0w3] {
    background-color: #018574 !important;
    background-image: none !important;
}

@media (min-width: 681px) {
    .home-page[b-0wnlbct0w3] {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden !important;
    }

    .home-page main[b-0wnlbct0w3] {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }

    .home-page article.content[b-0wnlbct0w3] {
        padding: 0 !important;
        max-width: 100% !important;
        flex: 1;
        height: 100%;
        overflow: hidden !important;
    }
}

@media (max-width: 680.98px) {
    .home-page[b-0wnlbct0w3] {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        overflow-y: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .home-page[b-0wnlbct0w3]::-webkit-scrollbar {
        display: none;
    }

    .home-page main[b-0wnlbct0w3] {
        width: 100%;
        min-height: 100%;
        height: auto;
        overflow: visible !important;
    }

    .home-page article.content[b-0wnlbct0w3] {
        padding: 0 !important;
        max-width: 100% !important;
        flex: 1;
        min-height: 100%;
        height: auto;
        overflow: visible !important;
    }
}

.home-page .sidebar[b-0wnlbct0w3] {
    display: none !important;
}

.home-page .top-row[b-0wnlbct0w3] {
    display: none !important;
}

/* ========================================================
   GPU-beschleunigte Seiten-Animationen
   ======================================================== */
/* WICHTIG: "backwards" statt "forwards" und kein will-change: ein stehengebliebenes transform/filter macht den Inhalt zum
   Bezugsrahmen für position:fixed – Fenster wie die PIN-Abfrage (AboutMe) deckten dann nur den Inhalt statt den Bildschirm ab. */
.slow-cool-fade[b-0wnlbct0w3] {
    animation: slowFadeIn-b-0wnlbct0w3 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes slowFadeIn-b-0wnlbct0w3 {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: scale(0.97) translateY(8px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1) translateY(0);
    }
}

.slow-slide-left-to-right[b-0wnlbct0w3] {
    animation: slowSlideLeftToRight-b-0wnlbct0w3 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes slowSlideLeftToRight-b-0wnlbct0w3 {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

/* ========================================================
   Blazor Error UI
   ======================================================== */
#blazor-error-ui[b-0wnlbct0w3] {
    background: #2b1d1d;
    color: #f8d7da;
    border-top: 1px solid #842029;
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    font-size: 0.9rem;
}

    #blazor-error-ui .reload[b-0wnlbct0w3] {
        color: #fff;
        text-decoration: underline;
        margin-left: 0.5rem;
    }

    #blazor-error-ui .dismiss[b-0wnlbct0w3] {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.75rem;
        font-size: 1.1rem;
    }

/* ========================================================
   RainerOS-Fenster um den Bereich (nur Desktop): Titelleiste oben, Taskleiste unten, Rand seitlich.
   Die Maße gehören zu Components/RainerOsRahmen.razor.css. Die Variablen sind für Unterseiten nutzbar
   (z. B. Knöpfe, die unten/oben am Fensterrand kleben).
   ======================================================== */
@media (min-width: 641px) {
    .page.w95[b-0wnlbct0w3] {
        --w95-oben: 32px;
        --w95-unten: 40px;
        --w95-rand: 4px;
        box-sizing: border-box;
        padding: var(--w95-oben) var(--w95-rand) var(--w95-unten);
    }

    /* Das linke Nav-Menü sitzt unter RainerOS fest im Fensterrahmen und scrollt nicht mit */
    .page.w95 .sidebar[b-0wnlbct0w3] {
        position: fixed;
        left: var(--w95-rand);
        top: var(--w95-oben);
        width: 144px;
        height: calc(100vh - var(--w95-oben) - var(--w95-unten));
        height: calc(100dvh - var(--w95-oben) - var(--w95-unten));
        z-index: 1000;
    }

    .page.w95 main[b-0wnlbct0w3] {
        margin-left: 144px;
        width: calc(100% - 144px);
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ========================================================
   Menü der Standard-Ansicht
   Handy: Menü-Knopf + „Zurück“ in der oberen Leiste, Menü als Vollbild
   Desktop (ab 641px): feste Seitenleiste mit Kopf (Name + Zurück) und Button-Raster
   ======================================================== */

/* Versteckte System-Checkbox */
.navbar-toggler[b-jcn956eyph] {
    display: none;
}

/* ---------- Handy: Menü-Knopf im RainerOS-Stil ---------- */
.burger-icon-btn[b-jcn956eyph] {
    position: fixed;
    top: 0.8rem;
    left: 1rem;
    z-index: 1100;
    width: 38px;
    height: 38px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000080;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

    .burger-icon-btn svg[b-jcn956eyph] {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    .burger-icon-btn:active[b-jcn956eyph] {
        border-color: #808080 #ffffff #ffffff #808080;
        transform: translate(1px, 1px);
        box-shadow: none;
    }

/* ---------- Handy: „Zurück“ neben dem Menü-Knopf ---------- */
.nav-zurueck-mobil[b-jcn956eyph] {
    position: fixed;
    top: 0.8rem;
    left: calc(1rem + 38px + 0.6rem);
    z-index: 1100;
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    border-radius: 3px;
    color: #000080;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

    .nav-zurueck-mobil:active[b-jcn956eyph] {
        border-color: #808080 #ffffff #ffffff #808080;
        transform: translate(1px, 1px);
        box-shadow: none;
    }

/* ========================================================
   Handy: Vollbild-Menü
   ======================================================== */
.nav-overlay[b-jcn956eyph] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 1050;
    background: 
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02) 0px,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(180deg, rgba(16, 24, 38, 0.98) 0%, rgba(10, 16, 26, 0.98) 50%, rgba(6, 10, 18, 0.98) 100%) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    display: flex;
    flex-direction: column;
}

    .nav-overlay.open[b-jcn956eyph] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* Kopf des Menüs */
.nav-kopf[b-jcn956eyph] {
    padding: 0.85rem 1.25rem;
    border-bottom: 2px solid;
    border-color: #404040 #ffffff #ffffff #404040;
    background: rgba(10, 16, 26, 0.6);
}

.nav-marke[b-jcn956eyph] {
    display: none; /* nur Desktop */
}

.nav-kopf-zeile[b-jcn956eyph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nav-zurueck[b-jcn956eyph] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #c0c0c0;
    color: #000080;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    border-radius: 3px;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.1s ease;
}

    .nav-zurueck:hover[b-jcn956eyph],
    .nav-zurueck:active[b-jcn956eyph] {
        border-color: #808080 #ffffff #ffffff #808080;
        transform: translate(1px, 1px);
        box-shadow: none;
    }

.nav-schliessen[b-jcn956eyph] {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    border-radius: 3px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.1s ease;
}

    .nav-schliessen:active[b-jcn956eyph] {
        border-color: #808080 #ffffff #ffffff #808080;
        transform: translate(1px, 1px);
        box-shadow: none;
    }

/* ---------- Kacheln (die Buttons): Handy einspaltig ---------- */
.nav-tile-grid[b-jcn956eyph] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 14px 84px; /* unten Platz, damit der Design-Umschalter nichts verdeckt */
    overflow-y: auto;
    flex: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .nav-tile-grid[b-jcn956eyph]::-webkit-scrollbar {
        display: none;
    }

.nav-tile[b-jcn956eyph] {
    box-sizing: border-box;
    width: 100%;
    max-width: clamp(220px, 72vw, 290px);
    margin: 0;
    padding: 3px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    border-radius: 3px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

    .nav-tile img[b-jcn956eyph] {
        width: 100%;
        height: auto;
        max-height: 95px;
        object-fit: contain;
        border-radius: 0;
        opacity: 0.96;
        display: block;
        transition: opacity 0.2s;
    }

    .nav-tile:hover[b-jcn956eyph] {
        transform: translateY(-2px);
        box-shadow: 2px 2px 0 #000000;
        border-color: #ffffff #808080 #808080 #ffffff;
    }

        .nav-tile:hover img[b-jcn956eyph] {
            opacity: 1;
        }

    .nav-tile:active[b-jcn956eyph] {
        border-color: #808080 #ffffff #ffffff #808080;
        transform: translate(1px, 1px);
        box-shadow: none;
    }

    .nav-tile:focus-visible[b-jcn956eyph] {
        outline: 2px solid #000080;
        outline-offset: 1px;
    }

    /* aktuelle Seite */
    .nav-tile.active[b-jcn956eyph] {
        border-color: #808080 #ffffff #ffffff #808080;
        background: #dfdfdf;
        outline: 2px solid #000080;
        outline-offset: 1px;
        box-shadow: inset 1px 1px 0 #000000, 0 0 10px rgba(0, 0, 128, 0.5);
    }

        .nav-tile.active img[b-jcn956eyph] {
            opacity: 1;
        }

/* Große Handys / kleine Tablets (420px–640px): zweispaltig im Vollbild-Menü */
@media (min-width: 420px) and (max-width: 640.98px) {
    .nav-tile-grid[b-jcn956eyph] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-content: start;
        gap: 12px;
        padding: 16px 16px 84px;
    }

    .nav-tile[b-jcn956eyph] {
        max-width: 100%;
        padding: 8px;
    }
}

/* ========================================================
   DESKTOP (ab 641px): feste Seitenleiste
   ======================================================== */
@media (min-width: 641px) {
    .burger-icon-btn[b-jcn956eyph],
    .nav-zurueck-mobil[b-jcn956eyph],
    .nav-schliessen[b-jcn956eyph] {
        display: none !important;
    }

    .nav-overlay[b-jcn956eyph] {
        position: static;
        width: 100%;
        height: 100%; /* füllt die Seitenleiste (deren Höhe setzt MainLayout) */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        /* Eigener Retro-Konsolen-Hintergrund für die Navbar: */
        background: 
            /* Feine vertikale Rillen / Console Pinstripes */
            repeating-linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.025) 0px,
                rgba(255, 255, 255, 0.025) 1px,
                transparent 1px,
                transparent 4px
            ),
            /* Subtiler blauer Glanz von oben (RainerOS Active Titlebar Hauch) */
            linear-gradient(
                180deg,
                rgba(0, 0, 128, 0.4) 0%,
                rgba(16, 132, 208, 0.15) 18%,
                transparent 45%
            ),
            /* Tiefer industrieller Chassis-Grundton */
            linear-gradient(
                180deg,
                rgba(18, 26, 40, 0.98) 0%,
                rgba(11, 17, 26, 0.98) 50%,
                rgba(6, 10, 18, 0.98) 100%
            ) !important;
        /* 3D-Trennkante zum Inhaltsbereich */
        border-right: 2px solid;
        border-color: #808080 #ffffff #ffffff #808080;
        box-shadow: 
            2px 0 0 #000000,
            inset 1px 0 0 rgba(255, 255, 255, 0.15),
            6px 0 24px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    /* Kopf: Name + „Zurück“ */
    .nav-kopf[b-jcn956eyph] {
        padding: 14px 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: transparent;
        border-bottom: 2px solid;
        border-color: #404040 #ffffff #ffffff #404040;
        box-shadow: 0 1px 0 #000000;
    }

    .nav-marke[b-jcn956eyph] {
        display: block;
        color: #ffffff;
        background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
        border: 2px solid;
        border-color: #ffffff #808080 #808080 #ffffff;
        box-shadow: 1px 1px 0 #000000;
        padding: 5px 6px;
        font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000000;
        user-select: none;
        transition: filter 0.15s ease, transform 0.1s ease;
    }

        .nav-marke:hover[b-jcn956eyph] {
            filter: brightness(1.15);
            transform: translateY(-1px);
        }

        .nav-marke:active[b-jcn956eyph] {
            border-color: #808080 #ffffff #ffffff #808080;
            transform: translate(1px, 1px);
        }

    /* Desktop: kein „Zurück“-Knopf in der Seitenleiste (Handy behält ihn) */
    .nav-kopf-zeile[b-jcn956eyph] {
        display: none;
    }

    .nav-zurueck[b-jcn956eyph] {
        flex: 1;
        justify-content: center;
        padding: 7px 8px;
        gap: 5px;
        font-size: 0.72rem;
        line-height: 1.2;
        text-align: center;
    }

    /* Buttons: eine Spalte untereinander (Größe der Buttons wie vorher: ca. 120 px breit, eigenes Seitenverhältnis) */
    .nav-tile-grid[b-jcn956eyph] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        align-items: stretch;
        justify-items: stretch;
        gap: 10px;
        padding: 14px 12px 18px;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(56, 189, 248, 0.35) transparent;
    }

    .nav-tile[b-jcn956eyph] {
        width: 100%;
        max-width: 100%;
        padding: 2px;
        box-sizing: border-box;
        border-radius: 2px;
        background: #c0c0c0;
        border: 2px solid;
        border-color: #ffffff #808080 #808080 #ffffff;
        box-shadow: 1px 1px 0 #000000;
        transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
    }

        .nav-tile img[b-jcn956eyph] {
            max-height: none;
            border-radius: 0;
            display: block;
            width: 100%;
            opacity: 0.96;
        }

        .nav-tile:hover[b-jcn956eyph] {
            transform: translateY(-2px);
            box-shadow: 2px 2px 0 #000000;
            border-color: #ffffff #808080 #808080 #ffffff;
        }

        .nav-tile:active[b-jcn956eyph] {
            border-color: #808080 #ffffff #ffffff #808080;
            transform: translate(1px, 1px);
            box-shadow: none;
        }

        .nav-tile.active[b-jcn956eyph] {
            border-color: #000080;
            outline: 2px solid #000080;
            outline-offset: 1px;
            box-shadow: 0 0 10px rgba(0, 0, 128, 0.6), inset 1px 1px 0 #000000;
        }
}

/* ========================================================
   HANDY-MENÜ: Das Bild füllt den ganzen Button aus (kein Rand, kein Leerraum um das Bild).
   Die Bilder haben ein Seitenverhältnis von etwa 2,2 : 1 – der Button hat dasselbe, damit nichts abgeschnitten wird.
   ======================================================== */
@media (max-width: 640.98px) {
    .nav-tile[b-jcn956eyph] {
        padding: 0;
        overflow: hidden;
        aspect-ratio: 2.2 / 1;
        max-width: clamp(230px, 80vw, 330px);
    }

    .nav-tile img[b-jcn956eyph] {
        display: block;
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        border-radius: inherit;
    }
}

@media (min-width: 420px) and (max-width: 640.98px) {
    .nav-tile[b-jcn956eyph] {
        max-width: 100%;
    }
}
/* /LemmyCode/Components/LcAufgabe.razor.rz.scp.css */
.aufgabe[b-wap24ea6xo] {
    background: var(--lc-panel);
    border: 1px solid var(--lc-akzent-rand);
    border-radius: 10px;
    box-shadow: var(--lc-schatten);
    padding: 18px 20px;
}

.kopf[b-wap24ea6xo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.kennung[b-wap24ea6xo] {
    font: 600 0.7rem var(--lc-titel);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-text-3);
}

.art[b-wap24ea6xo] {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lc-gelb-hell);
    border: 1px solid var(--lc-akzent-rand);
    color: var(--lc-gelb);
    font-weight: 600;
}

h2[b-wap24ea6xo] {
    margin: 8px 0 10px;
    font: 700 1.2rem var(--lc-titel);
    letter-spacing: 1px;
    color: var(--lc-akzent);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.text[b-wap24ea6xo] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--lc-text);
}

.hilfen[b-wap24ea6xo] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.hilfe[b-wap24ea6xo] {
    min-height: 34px;
    padding: 4px 14px;
    border: 1px solid var(--lc-linie-2);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.95);
    color: var(--lc-text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.hilfe:hover[b-wap24ea6xo] {
    border-color: var(--lc-blau);
    background: rgba(14, 165, 233, 0.22);
    color: #fff;
}

.hilfe.offen[b-wap24ea6xo] {
    border-color: #fcd34d;
    background: var(--lc-akzent-verlauf);
    color: var(--lc-akzent-text);
    font-weight: 600;
}

.box[b-wap24ea6xo] {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.box p[b-wap24ea6xo] {
    margin: 0 0 8px;
}

.box pre[b-wap24ea6xo] {
    margin: 0;
    font-family: var(--lc-mono);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.theorie[b-wap24ea6xo] {
    background: var(--lc-blau-hell);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: var(--lc-text);
}

.theorie pre[b-wap24ea6xo] {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--lc-feld);
    color: #7dd3fc;
}

.tipp[b-wap24ea6xo] {
    background: var(--lc-gelb-hell);
    border: 1px solid var(--lc-akzent-rand);
    color: var(--lc-text);
}

.loesung[b-wap24ea6xo] {
    background: var(--lc-feld);
    border: 1px dashed var(--lc-linie-2);
    color: #86efac;
}

.uebernehmen[b-wap24ea6xo] {
    margin-top: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(56, 189, 248, 0.7);
    border-radius: 6px;
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.art.ausgabe[b-wap24ea6xo] {
    background: var(--lc-blau-hell);
    border-color: rgba(56, 189, 248, 0.45);
    color: #7dd3fc;
}

.art.fehler[b-wap24ea6xo] {
    background: var(--lc-rot-hell);
    border-color: rgba(248, 113, 113, 0.5);
    color: var(--lc-rot);
}

.text[b-wap24ea6xo] {
    white-space: pre-line;
}
/* /LemmyCode/Components/LcReferenz.razor.rz.scp.css */
/* Belegsatz: dunkles Fenster (Notenblatt-Optik) mit einem hellen, gedruckt wirkenden Blatt darin */
.beleg-hintergrund[b-qzj24ia0c6] {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 6, 14, 0.75);
    backdrop-filter: blur(3px);
}

.beleg-fenster[b-qzj24ia0c6] {
    display: flex;
    flex-direction: column;
    width: min(940px, 100%);
    max-height: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: var(--lc-panel);
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    outline: none;
    animation: beleg-auf-b-qzj24ia0c6 0.22s ease-out;
}

/* Nur Bewegung, keine Deckkraft: bleibt die Animation hängen (z. B. Hintergrund-Tab), ist das Fenster trotzdem sichtbar */
@keyframes beleg-auf-b-qzj24ia0c6 {
    from { transform: translateY(14px) scale(0.98); }
    to { transform: none; }
}

.beleg-leiste[b-qzj24ia0c6] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 18px;
    background: rgba(251, 191, 36, 0.07);
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.beleg-leiste-titel[b-qzj24ia0c6] {
    font: 700 0.9rem var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-akzent);
}

.beleg-leiste-hinweis[b-qzj24ia0c6] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--lc-text-3);
}

.beleg-zu[b-qzj24ia0c6] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--lc-linie-2);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.95);
    color: var(--lc-text);
    cursor: pointer;
}

.beleg-zu:hover[b-qzj24ia0c6] {
    border-color: var(--lc-blau);
    background: rgba(14, 165, 233, 0.22);
}

.beleg-scroll[b-qzj24ia0c6] {
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(251, 191, 36, 0.06), transparent 70%),
        #0a1020;
}

/* ---------- Das Blatt ---------- */
.blatt[b-qzj24ia0c6] {
    max-width: 820px;
    margin: 0 auto;
    padding: 34px 40px 22px;
    background: #fdfdf9;
    color: #111;
    font-family: Arial, "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.blatt-kopf[b-qzj24ia0c6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid #111;
}

.blatt-art[b-qzj24ia0c6] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #555;
}

.blatt-kopf h2[b-qzj24ia0c6] {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.blatt-kasten[b-qzj24ia0c6] {
    padding: 6px 12px;
    border: 1.5px solid #111;
    font-size: 12px;
    text-align: right;
    line-height: 1.35;
}

.blatt-kasten strong[b-qzj24ia0c6] {
    font-size: 15px;
}

section[b-qzj24ia0c6] {
    margin-bottom: 16px;
    break-inside: avoid;
}

h3[b-qzj24ia0c6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    border-bottom: 1px solid #999;
}

.nr[b-qzj24ia0c6] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #111;
    font-size: 11px;
}

.syntax[b-qzj24ia0c6] {
    margin: 0 0 6px;
    padding: 9px 12px;
    background: #f2f2ec;
    border-left: 3px solid #111;
    font-family: "Courier New", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #111;
    white-space: pre-wrap;
    overflow-x: auto;
}

.syntax i[b-qzj24ia0c6],
code i[b-qzj24ia0c6] {
    font-style: italic;
    color: #444;
}

code[b-qzj24ia0c6] {
    font-family: "Courier New", Consolas, monospace;
    font-size: 12.5px;
    color: #111;
}

table[b-qzj24ia0c6] {
    width: 100%;
    border-collapse: collapse;
}

.notation table td[b-qzj24ia0c6] {
    padding: 4px 8px;
    border: 1px solid #bbb;
    font-size: 12.5px;
    vertical-align: top;
}

.notation table td:nth-child(odd)[b-qzj24ia0c6] {
    width: 14%;
    background: #f2f2ec;
    white-space: nowrap;
}

.liste td[b-qzj24ia0c6] {
    padding: 3px 8px;
    border-bottom: 1px solid #d4d4cc;
    vertical-align: top;
}

.liste td:first-child[b-qzj24ia0c6] {
    width: 44%;
    font-family: "Courier New", Consolas, monospace;
    font-size: 12.5px;
    white-space: nowrap;
}

.zwei[b-qzj24ia0c6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.zwei h3 + .liste[b-qzj24ia0c6],
.zwei .anm + h3[b-qzj24ia0c6] {
    margin-top: 0;
}

.zwei .anm + h3[b-qzj24ia0c6] {
    margin-top: 14px;
}

.zwei .liste td:first-child[b-qzj24ia0c6] {
    width: 52%;
}

.anm[b-qzj24ia0c6] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #444;
}

.anm.warn[b-qzj24ia0c6] {
    padding: 5px 9px;
    border: 1px solid #111;
    background: #fff8e1;
    color: #111;
}

.blatt-fuss[b-qzj24ia0c6] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 6px;
    border-top: 1px solid #111;
    font-size: 10.5px;
    color: #555;
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .beleg-hintergrund[b-qzj24ia0c6] {
        padding: 0;
    }

    .beleg-fenster[b-qzj24ia0c6] {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .beleg-leiste-hinweis[b-qzj24ia0c6] {
        display: none;
    }

    .beleg-zu[b-qzj24ia0c6] {
        margin-left: auto;
    }

    .beleg-scroll[b-qzj24ia0c6] {
        padding: 10px;
    }

    .blatt[b-qzj24ia0c6] {
        padding: 20px 16px 14px;
        font-size: 13px;
    }

    .blatt-kopf h2[b-qzj24ia0c6] {
        font-size: 19px;
    }

    .zwei[b-qzj24ia0c6] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .liste td:first-child[b-qzj24ia0c6] {
        white-space: normal;
    }

    /* Schreibweise: statt 4 Spalten je Zeile zwei Paare untereinander */
    .notation tr[b-qzj24ia0c6] {
        display: grid;
        grid-template-columns: 34% 1fr;
    }

    .notation table td:nth-child(odd)[b-qzj24ia0c6] {
        width: auto;
        white-space: normal;
    }
}
/* /LemmyCode/Components/LcTestfaelle.razor.rz.scp.css */
/* Rechte Spalte: Testfälle als Karten, darunter die Konsole (Terminal-Optik) */
.lc-panel[b-36m8gq39kh] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 16px 24px 22px;
}

.block-kopf[b-36m8gq39kh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.block-titel[b-36m8gq39kh] {
    font: 700 0.78rem var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-akzent);
}

.zahl[b-36m8gq39kh] {
    font-size: 0.78rem;
    color: var(--lc-text-2);
}

.zahl.alle[b-36m8gq39kh] {
    color: var(--lc-gruen);
    font-weight: 700;
}

.erklaerung[b-36m8gq39kh] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--lc-text-2);
}

.tests[b-36m8gq39kh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.test[b-36m8gq39kh] {
    background: var(--lc-panel);
    border: 1px solid var(--lc-linie);
    border-left: 4px solid var(--lc-linie-2);
    border-radius: 8px;
    overflow: hidden;
}

.test.gelaufen[b-36m8gq39kh] {
    border-left-color: var(--lc-blau);
}

.test.ok[b-36m8gq39kh] {
    border-color: rgba(52, 211, 153, 0.4);
    border-left-color: var(--lc-gruen);
}

.test.nein[b-36m8gq39kh] {
    border-color: rgba(248, 113, 113, 0.4);
    border-left-color: #f87171;
}

.test-kopf[b-36m8gq39kh] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--lc-linie);
}

.test-nr[b-36m8gq39kh] {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--lc-gelb-hell);
    border: 1px solid var(--lc-akzent-rand);
    color: var(--lc-akzent);
    font: 700 0.66rem var(--lc-titel);
}

.aufruf[b-36m8gq39kh] {
    flex: 1;
    min-width: 0;
    font: 0.82rem/1.45 var(--lc-mono);
    color: #7dd3fc;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.symbol[b-36m8gq39kh] {
    flex: none;
    font-weight: 700;
}

.ok .symbol[b-36m8gq39kh] {
    color: var(--lc-gruen);
}

.nein .symbol[b-36m8gq39kh] {
    color: #f87171;
}

.gelaufen .symbol[b-36m8gq39kh] {
    color: var(--lc-blau);
}

.werte[b-36m8gq39kh] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    align-items: baseline;
    padding: 8px 10px;
}

.label[b-36m8gq39kh] {
    font: 700 0.62rem var(--lc-titel);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-text-3);
}

.werte pre[b-36m8gq39kh] {
    margin: 0;
    font: 0.84rem/1.45 var(--lc-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--lc-text);
}

.werte .soll[b-36m8gq39kh] {
    color: var(--lc-akzent);
}

.werte .leer[b-36m8gq39kh] {
    color: var(--lc-text-3);
}

.ok .ist[b-36m8gq39kh] {
    color: #a7f3d0;
}

.nein .ist[b-36m8gq39kh] {
    color: #fecaca;
}

.werte .fehler[b-36m8gq39kh] {
    color: var(--lc-rot);
}

/* ---------- Konsole ---------- */
.konsole[b-36m8gq39kh] {
    min-height: 120px;
    max-height: 420px;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: #04070d;
    border: 1px solid var(--lc-linie);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
    font: 0.85rem/1.5 var(--lc-mono);
    color: #d1fae5;
}

.zeile[b-36m8gq39kh] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.zeile[b-36m8gq39kh]::before {
    content: "› ";
    color: #3f6f5a;
}

.zeile.fehler[b-36m8gq39kh] {
    margin-top: 4px;
    color: var(--lc-rot);
}

.zeile.fehler[b-36m8gq39kh]::before,
.zeile.gekuerzt[b-36m8gq39kh]::before {
    content: "";
}

.zeile.gekuerzt[b-36m8gq39kh] {
    color: var(--lc-text-3);
    font-style: italic;
}

.konsole .leer[b-36m8gq39kh] {
    color: var(--lc-text-3);
    font-family: var(--lc-schrift);
    font-size: 0.84rem;
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .lc-panel[b-36m8gq39kh] {
        padding: 14px 12px 24px;
    }

    .konsole[b-36m8gq39kh] {
        max-height: 300px;
    }
}
/* /LemmyCode/Components/LcUebungsListe.razor.rz.scp.css */
.liste[b-afe5lyuy56] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 12px 24px;
}

.kapitel h3[b-afe5lyuy56] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0 6px;
    font: 700 0.66rem var(--lc-titel);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-akzent);
}

.kapitel-nr[b-afe5lyuy56] {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--lc-gelb-hell);
    border: 1px solid var(--lc-akzent-rand);
    color: var(--lc-akzent);
    font-size: 0.66rem;
}

.kapitel-titel[b-afe5lyuy56] {
    flex: 1;
}

.kapitel-zahl[b-afe5lyuy56] {
    font-family: var(--lc-schrift);
    font-weight: 600;
    color: var(--lc-text-3);
    text-transform: none;
}

.kapitel ul[b-afe5lyuy56] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eintrag[b-afe5lyuy56] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--lc-text);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.eintrag:hover[b-afe5lyuy56] {
    background: var(--lc-hover);
}

.eintrag.aktiv[b-afe5lyuy56] {
    background: var(--lc-gelb-hell);
    box-shadow: inset 3px 0 0 var(--lc-akzent);
    color: var(--lc-akzent);
    font-weight: 600;
}

.eintrag.aktiv .marke[b-afe5lyuy56] {
    border-color: var(--lc-akzent);
    color: var(--lc-akzent);
}

.marke[b-afe5lyuy56] {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--lc-linie-2);
    font-size: 0.7rem;
    color: var(--lc-text-2);
}

.eintrag.geloest .marke[b-afe5lyuy56] {
    border-color: var(--lc-gruen);
    background: var(--lc-gruen);
    color: #052e1f;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.eintrag-titel[b-afe5lyuy56] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eintrag-titel[b-afe5lyuy56] {
    flex: 1;
}

.art-zeichen[b-afe5lyuy56] {
    flex: none;
    font-size: 0.75rem;
    opacity: 0.75;
}
/* /LemmyCode/Pages/LemmyCodeSeite.razor.rz.scp.css */
/* LemmyCode – gleiche Optik und gleicher Aufbau wie LemmySQL (SQL-Checker/Pages/SqlChecker.razor.css):
   dunkles Navy, Bernstein-Akzent, Cyan für Hinweise, Orbitron-Titel. Farben als Variablen für alle Lc-Bausteine. */
.lmc[b-ppjtri2vk3] {
    --lc-grund: #070b14;
    --lc-panel: #0f1729;
    --lc-flaeche: #111a2e;
    --lc-feld: #0a1020;
    --lc-hover: rgba(56, 189, 248, 0.12);
    --lc-zebra: rgba(255, 255, 255, 0.025);
    --lc-linie: rgba(148, 163, 184, 0.18);
    --lc-linie-2: rgba(148, 163, 184, 0.55);
    --lc-text: #eef3fa;
    --lc-text-2: #b9c5d6;
    --lc-text-3: #7c8aa0;
    --lc-blau: #38bdf8;
    --lc-blau-hell: rgba(56, 189, 248, 0.13);
    --lc-gruen: #34d399;
    --lc-gruen-hell: rgba(16, 185, 129, 0.15);
    --lc-rot: #fca5a5;
    --lc-rot-hell: rgba(220, 38, 38, 0.16);
    --lc-gelb: #fbbf24;
    --lc-gelb-hell: rgba(251, 191, 36, 0.12);
    --lc-akzent: #fbbf24;
    --lc-akzent-rand: rgba(251, 191, 36, 0.3);
    --lc-akzent-verlauf: linear-gradient(180deg, #fbbf24, #d97706);
    --lc-akzent-text: #1a1204;
    --lc-schatten: 0 10px 30px rgba(0, 0, 0, 0.45);
    --lc-schrift: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --lc-titel: "Orbitron", "Segoe UI", sans-serif;
    --lc-mono: Consolas, "Cascadia Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --lc-links: 270px;

    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    color: var(--lc-text);
    font-family: var(--lc-schrift);
    color-scheme: dark;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
    background:
        radial-gradient(60vmax 40vmax at 90% 0%, rgba(245, 158, 11, 0.10), transparent 70%),
        radial-gradient(50vmax 40vmax at 0% 100%, rgba(14, 165, 233, 0.10), transparent 70%),
        var(--lc-grund);
}

.lmc.liste-zu[b-ppjtri2vk3] {
    --lc-links: 46px;
}

.lmc :is(button, summary, [tabindex]):focus-visible[b-ppjtri2vk3] {
    outline: 3px solid var(--lc-blau);
    outline-offset: 2px;
}

/* ---------- Kopfleiste ---------- */
.leiste[b-ppjtri2vk3] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(7, 11, 20, 0.6);
    border-bottom: 1px solid var(--lc-akzent-rand);
}

.lc-zurueck[b-ppjtri2vk3] {
    min-height: 38px;
    padding: 0.3rem 1rem;
    color: #7dd3fc;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.6);
    border-radius: 6px;
    font: 600 0.78rem var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lc-zurueck:hover[b-ppjtri2vk3] {
    color: #fff;
    border-color: var(--lc-blau);
    background: rgba(14, 165, 233, 0.16);
}

.marke[b-ppjtri2vk3] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
    margin-right: auto;
}

.logo[b-ppjtri2vk3] {
    font: 700 clamp(1rem, 1.6vw, 1.4rem) var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-akzent);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    white-space: nowrap;
}

.untertitel[b-ppjtri2vk3] {
    font-size: 0.85rem;
    color: var(--lc-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knopf-leiste[b-ppjtri2vk3] {
    min-height: 38px;
    padding: 0.3rem 0.8rem;
    color: var(--lc-text);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--lc-linie-2);
    border-radius: 8px;
    font: 600 0.88rem var(--lc-schrift);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.knopf-leiste:hover[b-ppjtri2vk3] {
    color: #fff;
    border-color: var(--lc-blau);
    background: rgba(14, 165, 233, 0.22);
}

.knopf-leiste.aktiv[b-ppjtri2vk3] {
    color: var(--lc-akzent-text);
    background: var(--lc-akzent-verlauf);
    border-color: #fcd34d;
}

.knopf-leiste.aktiv:hover[b-ppjtri2vk3] {
    color: #000;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
}

.liste-knopf[b-ppjtri2vk3] {
    display: none;
}

/* ---------- Werkzeuge oben rechts: Fortschritt · Syntax-Farben · Vollbild · Referenz ---------- */
.werkzeuge[b-ppjtri2vk3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trenner[b-ppjtri2vk3] {
    width: 1px;
    align-self: stretch;
    margin: 2px 2px;
    background: linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.45), transparent);
}

.fortschritt-anzeige[b-ppjtri2vk3] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 190px;
    padding: 6px 12px 7px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--lc-akzent-rand);
    border-radius: 10px;
    box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.06);
}

.fa-oben[b-ppjtri2vk3] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1;
}

.fa-label[b-ppjtri2vk3] {
    font: 700 0.62rem var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-text-3);
}

.fa-zahl[b-ppjtri2vk3] {
    font-size: 0.82rem;
    color: var(--lc-text-2);
}

.fa-zahl strong[b-ppjtri2vk3] {
    font: 700 0.95rem var(--lc-titel);
    color: var(--lc-akzent);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

.fa-prozent[b-ppjtri2vk3] {
    margin-left: auto;
    font: 700 0.72rem var(--lc-titel);
    color: var(--lc-text);
}

.fa-balken[b-ppjtri2vk3] {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.fa-balken span[b-ppjtri2vk3] {
    position: relative;
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: 3px;
    background: var(--lc-akzent-verlauf);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
    transition: width 0.4s ease;
    overflow: hidden;
}

/* Glanz, der durch den gefüllten Teil wandert */
.fa-balken span[b-ppjtri2vk3]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent) -40px 0 / 40px 100% no-repeat;
    animation: lc-balken-glanz-b-ppjtri2vk3 2.6s ease-in-out infinite;
}

@keyframes lc-balken-glanz-b-ppjtri2vk3 {
    from { background-position: -40px 0; }
    to { background-position: calc(100% + 40px) 0; }
}

/* Kippschalter Prüfungsmodus (an, Standard: Editor ohne Farben) ↔ Kiddymodus (aus: bunte Syntax-Farben) */
.schalter-rahmen[b-ppjtri2vk3] {
    position: relative;
}

.schalter[b-ppjtri2vk3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0.25rem 0.85rem 0.25rem 0.5rem;
    color: var(--lc-text-2);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--lc-linie-2);
    border-radius: 8px;
    font: 600 0.88rem var(--lc-schrift);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.schalter:hover[b-ppjtri2vk3] {
    color: #fff;
    border-color: var(--lc-blau);
}

.schalter-spur[b-ppjtri2vk3] {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.5);
    transition: background 0.25s, border-color 0.25s;
}

.schalter-knopf[b-ppjtri2vk3] {
    position: absolute;
    top: 2px;
    left: 2px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}

.schalter-text[b-ppjtri2vk3] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.schalter-titel[b-ppjtri2vk3] {
    font-weight: 700;
}

.schalter-unter[b-ppjtri2vk3] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--lc-text-3);
}

/* Prüfungsmodus: Bernstein, Knopf rechts mit Doktorhut */
.schalter.an[b-ppjtri2vk3] {
    color: var(--lc-text);
    border-color: var(--lc-akzent-rand);
}

.schalter.an .schalter-titel[b-ppjtri2vk3] {
    color: var(--lc-akzent);
}

.schalter.an .schalter-spur[b-ppjtri2vk3] {
    background: var(--lc-akzent-verlauf);
    border-color: #fcd34d;
}

.schalter.an .schalter-knopf[b-ppjtri2vk3] {
    transform: translateX(20px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

/* Kiddymodus: Regenbogen-Spur, Teddy links, Schrift im Regenbogen */
.schalter.kiddy[b-ppjtri2vk3] {
    border-color: rgba(244, 114, 182, 0.55);
}

.schalter.kiddy .schalter-spur[b-ppjtri2vk3] {
    background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6);
    border-color: rgba(255, 255, 255, 0.5);
}

.schalter.kiddy .schalter-knopf[b-ppjtri2vk3] {
    transform: translateX(0) rotate(-12deg);
}

.schalter.kiddy:hover .schalter-knopf[b-ppjtri2vk3] {
    transform: translateX(0) rotate(12deg) scale(1.1);
}

.schalter.kiddy .schalter-titel[b-ppjtri2vk3] {
    background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Sprechblase mit Spruch nach dem Umschalten */
.spruch[b-ppjtri2vk3] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: max-content;
    max-width: 290px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--lc-panel);
    border: 1px solid rgba(251, 191, 36, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 14px rgba(251, 191, 36, 0.2);
    color: var(--lc-text);
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
    animation: lc-spruch-b-ppjtri2vk3 3.2s ease forwards;
}

.spruch[b-ppjtri2vk3]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 28px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: inherit;
    border-top: inherit;
    transform: rotate(45deg);
}

.spruch.kiddy[b-ppjtri2vk3] {
    border-color: rgba(244, 114, 182, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 16px rgba(244, 114, 182, 0.3);
}

@keyframes lc-spruch-b-ppjtri2vk3 {
    0% { opacity: 0; transform: translateY(-6px) scale(0.9); }
    10% { opacity: 1; transform: translateY(0) scale(1.03); }
    16% { transform: scale(1); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}

/* Vollbild und Belegsatz (Symbol + Text) */
.vollbild-knopf[b-ppjtri2vk3],
.beleg-knopf[b-ppjtri2vk3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.beleg-knopf[b-ppjtri2vk3] {
    color: var(--lc-akzent);
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(245, 158, 11, 0.12);
}

.beleg-knopf:hover[b-ppjtri2vk3] {
    color: var(--lc-akzent-text);
    background: var(--lc-akzent-verlauf);
    border-color: #fcd34d;
}

.vollbild-knopf svg[b-ppjtri2vk3],
.beleg-knopf svg[b-ppjtri2vk3] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zaehler[b-ppjtri2vk3] {
    margin-left: 4px;
    color: var(--lc-text-2);
}

.status[b-ppjtri2vk3] {
    margin: 40px auto;
    color: var(--lc-text-2);
}

.status.fehler[b-ppjtri2vk3] {
    color: var(--lc-rot);
}

/* ---------- 3 Bereiche ---------- */
.raster[b-ppjtri2vk3] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--lc-links) minmax(0, 1fr) var(--lc-rechts-breite, 380px);
}

.links[b-ppjtri2vk3],
.mitte[b-ppjtri2vk3],
.rechts[b-ppjtri2vk3] {
    min-height: 0;
    overflow-y: auto;
}

.links[b-ppjtri2vk3] {
    background: rgba(15, 23, 42, 0.86);
    border-right: 1px solid var(--lc-akzent-rand);
}

/* ---------- Übungsliste einklappen ---------- */
.liste-kopf[b-ppjtri2vk3] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    background: rgba(15, 23, 42, 0.97);
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.liste-titel[b-ppjtri2vk3] {
    font: 700 0.78rem var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-akzent);
}

.einklappen[b-ppjtri2vk3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0.2rem 0.75rem;
    color: var(--lc-akzent);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 999px;
    font: 600 0.8rem var(--lc-schrift);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.einklappen:hover[b-ppjtri2vk3] {
    color: var(--lc-akzent-text);
    background: var(--lc-akzent-verlauf);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.einklappen-pfeil[b-ppjtri2vk3] {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    animation: lc-pfeil-links-b-ppjtri2vk3 1.8s ease-in-out infinite;
}

/* Eingeklappt: schmale Schiene wie im Notenblatt-Designer */
.schiene[b-ppjtri2vk3] {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 14px 2px;
    color: var(--lc-akzent);
    background:
        linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.10) 50%, transparent) 0 -200px / 100% 200px no-repeat,
        transparent;
    border: 0;
    cursor: pointer;
    animation: lc-schiene-licht-b-ppjtri2vk3 3.5s ease-in-out infinite alternate;
    transition: background-color 0.15s, color 0.15s;
}

.schiene:hover[b-ppjtri2vk3] {
    color: #fff;
    background-color: rgba(251, 191, 36, 0.16);
}

.schiene-text[b-ppjtri2vk3] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 700 0.82rem var(--lc-titel);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
    white-space: nowrap;
}

.schiene-zahl[b-ppjtri2vk3] {
    padding: 3px 4px;
    border: 1px solid var(--lc-akzent-rand);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--lc-text-2);
}

.schiene-pfeil[b-ppjtri2vk3] {
    font-size: 1.2rem;
    line-height: 1;
    animation: lc-pfeil-rechts-b-ppjtri2vk3 1.8s ease-in-out infinite;
}

.liste-zu .schiene[b-ppjtri2vk3] {
    display: flex;
}

.liste-zu .liste-inhalt[b-ppjtri2vk3] {
    display: none;
}

.liste-zu .links[b-ppjtri2vk3] {
    overflow: hidden;
}

@keyframes lc-pfeil-links-b-ppjtri2vk3 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

@keyframes lc-pfeil-rechts-b-ppjtri2vk3 {
    0%, 100% { transform: translateX(0); opacity: 0.75; }
    50% { transform: translateX(4px); opacity: 1; }
}

@keyframes lc-schiene-licht-b-ppjtri2vk3 {
    from { background-position: 0 -200px, 0 0; }
    to { background-position: 0 calc(100% + 200px), 0 0; }
}

.rechts[b-ppjtri2vk3] {
    position: relative;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.86);
    border-left: 1px solid var(--lc-akzent-rand);
}

/* Testfälle/Konsole scrollen selbst, damit der Ziehgriff am Rand stehen bleibt */
.rechts[b-ppjtri2vk3]  > .lc-panel {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}

.lc-griff[b-ppjtri2vk3] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 12px;
    cursor: col-resize;
    touch-action: none;
}

/* Kante: schwach leuchtende Linie (ohne Animation) */
.lc-griff[b-ppjtri2vk3]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: rgba(251, 191, 36, 0.22);
    transition: width 0.15s, box-shadow 0.15s;
}

/* Griffstück in der Mitte: Bernstein-Pille mit Rillen (ohne Animation) */
.lc-griff[b-ppjtri2vk3]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;
    z-index: 1;
    width: 8px;
    height: 64px;
    margin-top: -32px;
    border-radius: 4px;
    background:
        radial-gradient(circle, rgba(26, 18, 4, 0.85) 1.1px, transparent 1.5px) center 4px / 8px 7px repeat-y,
        linear-gradient(180deg, #fde68a, #fbbf24 40%, #d97706);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
    transition: transform 0.15s, height 0.15s, margin-top 0.15s;
}

.lc-griff:hover[b-ppjtri2vk3]::after,
.lc-griff.zieht[b-ppjtri2vk3]::after {
    width: 3px;
    background-color: rgba(251, 191, 36, 0.7);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
}

.lc-griff:hover[b-ppjtri2vk3]::before,
.lc-griff.zieht[b-ppjtri2vk3]::before {
    height: 84px;
    margin-top: -42px;
    transform: scaleX(1.2);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.85);
}


.mitte[b-ppjtri2vk3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 32px;
}

/* Alle Karten der Mitte (auch die Aufgabe aus SqlcAufgabe → ::deep) gleich breit wie die Spalte */
.mitte > *[b-ppjtri2vk3],
.mitte[b-ppjtri2vk3]  > .aufgabe {
    box-sizing: border-box;
    flex: none;
    width: 100%;
}

/* ---------- Editor ---------- */
.editor-karte[b-ppjtri2vk3] {
    background: var(--lc-panel);
    border: 1px solid var(--lc-akzent-rand);
    border-radius: 10px;
    box-shadow: var(--lc-schatten);
    overflow: hidden;
}

.editor-kopf[b-ppjtri2vk3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(251, 191, 36, 0.07);
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.editor-kopf > span:first-child[b-ppjtri2vk3] {
    font: 700 0.8rem var(--lc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lc-akzent);
}

.kuerzel[b-ppjtri2vk3] {
    font-size: 0.8rem;
    color: var(--lc-text-3);
}

/* CodeMirror im dunklen Notenblatt-Stil */
.editor[b-ppjtri2vk3]  .CodeMirror {
    height: auto;
    min-height: 150px;
    background: var(--lc-feld);
    color: var(--lc-text);
    font-family: var(--lc-mono);
    font-size: 15px;
    line-height: 1.5;
}

.editor[b-ppjtri2vk3]  .CodeMirror-scroll {
    min-height: 150px;
    max-height: 320px;
}

.editor[b-ppjtri2vk3]  .CodeMirror-gutters {
    background: #080d1a;
    border-right: 1px solid var(--lc-linie);
}

.editor[b-ppjtri2vk3]  .CodeMirror-linenumber {
    color: #4b5a72;
}

.editor[b-ppjtri2vk3]  .CodeMirror-cursor {
    border-left: 2px solid var(--lc-akzent);
}

.editor[b-ppjtri2vk3]  .CodeMirror-selected {
    background: rgba(56, 189, 248, 0.22);
}

.editor[b-ppjtri2vk3]  .CodeMirror-focused .CodeMirror-selected {
    background: rgba(56, 189, 248, 0.3);
}

.editor[b-ppjtri2vk3]  .CodeMirror-matchingbracket {
    color: var(--lc-akzent);
    text-decoration: underline;
}

.editor[b-ppjtri2vk3]  .cm-keyword {
    color: #7dd3fc;
    font-weight: 700;
}

.editor[b-ppjtri2vk3]  .cm-builtin,
.editor[b-ppjtri2vk3]  .cm-type {
    color: #c4b5fd;
}

.editor[b-ppjtri2vk3]  .cm-string {
    color: #86efac;
}

.editor[b-ppjtri2vk3]  .cm-number {
    color: var(--lc-akzent);
}

.editor[b-ppjtri2vk3]  .cm-operator {
    color: #f9a8d4;
}

.editor[b-ppjtri2vk3]  .cm-comment {
    color: var(--lc-text-3);
    font-style: italic;
}

.knoepfe[b-ppjtri2vk3] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}

.knopf[b-ppjtri2vk3] {
    min-height: 40px;
    padding: 0.3rem 1rem;
    color: var(--lc-text);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--lc-linie-2);
    border-radius: 8px;
    font: 600 0.92rem var(--lc-schrift);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.knopf:hover:not(:disabled)[b-ppjtri2vk3] {
    color: #fff;
    border-color: var(--lc-blau);
    background: rgba(14, 165, 233, 0.22);
}

/* Prüfen = Hauptaktion in Bernstein */
.knopf.haupt[b-ppjtri2vk3] {
    color: var(--lc-akzent-text);
    background: var(--lc-akzent-verlauf);
    border-color: #fcd34d;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

.knopf.haupt:hover:not(:disabled)[b-ppjtri2vk3] {
    color: #000;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    border-color: #fde68a;
}

/* Ausführen = Cyan */
.knopf.zweit[b-ppjtri2vk3] {
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(14, 165, 233, 0.14);
}

.knopf.leise[b-ppjtri2vk3] {
    color: var(--lc-text-2);
    font-weight: 500;
}

.knopf:disabled[b-ppjtri2vk3] {
    opacity: 0.45;
    cursor: not-allowed;
}

.knoepfe .leise[b-ppjtri2vk3] {
    margin-left: auto;
}

.knopf.klein[b-ppjtri2vk3] {
    min-height: 34px;
    padding: 0.25rem 0.8rem;
    font-size: 0.85rem;
}

/* ---------- Meldungen ---------- */
.meldung[b-ppjtri2vk3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
}

.meldung.ok[b-ppjtri2vk3] {
    background: var(--lc-gruen-hell);
    color: #a7f3d0;
    border: 1px solid rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.15);
}

.meldung.ok strong[b-ppjtri2vk3] {
    color: var(--lc-gruen);
}

.meldung.ok .knopf[b-ppjtri2vk3] {
    margin-left: auto;
}

.meldung.nein[b-ppjtri2vk3] {
    background: var(--lc-rot-hell);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.6);
}

.meldung.nein strong[b-ppjtri2vk3] {
    color: #f87171;
}

.meldung.info[b-ppjtri2vk3] {
    background: var(--lc-blau-hell);
    color: var(--lc-text);
    border: 1px solid rgba(56, 189, 248, 0.45);
}

/* ---------- Ausgabe vorhersagen: Antwortfeld ---------- */
.antwort-karte[b-ppjtri2vk3] {
    background: var(--lc-panel);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 10px;
    box-shadow: var(--lc-schatten);
    overflow: hidden;
}

.antwort-karte .editor-kopf[b-ppjtri2vk3] {
    background: var(--lc-blau-hell);
    border-bottom-color: rgba(56, 189, 248, 0.35);
}

.antwort-karte .editor-kopf > span:first-child[b-ppjtri2vk3] {
    color: #7dd3fc;
}

.antwort[b-ppjtri2vk3] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 130px;
    padding: 10px 14px;
    resize: vertical;
    border: 0;
    outline: none;
    background: var(--lc-feld);
    color: var(--lc-text);
    font: 15px/1.5 var(--lc-mono);
}

.antwort[b-ppjtri2vk3]::placeholder {
    color: var(--lc-text-3);
}

/* Gegebener Code (nur lesen) */
.editor[b-ppjtri2vk3]  .CodeMirror.nur-lesen {
    background: #0c1426;
}

.editor[b-ppjtri2vk3]  .CodeMirror.nur-lesen .CodeMirror-cursor {
    display: none;
}

.nur-lesen-hinweis[b-ppjtri2vk3] {
    padding: 2px 8px;
    border: 1px solid var(--lc-linie-2);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--lc-text-2);
}

/* Knopf „←“ zum Einfügen des Zuweisungspfeils */
.kopf-rechts[b-ppjtri2vk3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pfeil-knopf[b-ppjtri2vk3] {
    min-width: 34px;
    min-height: 28px;
    padding: 0 8px;
    color: var(--lc-akzent);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 6px;
    font: 700 1rem var(--lc-mono);
    cursor: pointer;
}

.pfeil-knopf:hover[b-ppjtri2vk3] {
    color: var(--lc-akzent-text);
    background: var(--lc-akzent-verlauf);
}

.blaettern[b-ppjtri2vk3] {
    display: flex;
    justify-content: space-between;
}

/* Schmalere Desktop-Fenster: rechter Bereich bleibt Spalte, wird aber höchstens 36 % breit */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .raster[b-ppjtri2vk3] {
        grid-template-columns: var(--lc-links) minmax(0, 1fr) min(var(--lc-rechts-breite, 380px), 36vw);
    }
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .leiste[b-ppjtri2vk3] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .marke[b-ppjtri2vk3] {
        order: 3;
        flex: 1 1 170px;   /* zu breit für den Rest der 1. Zeile → eigene Zeile mit Schalter/Vollbild */
        flex-direction: column;
        gap: 2px;
    }

    .werkzeuge[b-ppjtri2vk3] {
        display: contents;
    }

    .fortschritt-anzeige[b-ppjtri2vk3],
    .trenner[b-ppjtri2vk3],
    .knopf-text[b-ppjtri2vk3] {
        display: none;
    }

    .liste-knopf[b-ppjtri2vk3] {
        order: 1;
    }

    .schalter[b-ppjtri2vk3],
    .vollbild-knopf[b-ppjtri2vk3],
    .beleg-knopf[b-ppjtri2vk3] {
        order: 4;
        padding-inline: 0.55rem;
    }

    .schalter-unter[b-ppjtri2vk3] {
        display: none;
    }

    .schalter-rahmen[b-ppjtri2vk3] {
        order: 4;
    }

    .spruch[b-ppjtri2vk3] {
        max-width: 240px;
    }

    /* längerer Untertitel als bei LemmySQL: umbrechen statt neben den Schalter laufen */
    .untertitel[b-ppjtri2vk3] {
        font-size: 0.78rem;
        white-space: normal;
    }

    .lc-zurueck[b-ppjtri2vk3] {
        padding: 0.3rem 0.6rem;
        font-size: 0.68rem;
        letter-spacing: 1px;
    }

    .knopf-leiste[b-ppjtri2vk3] {
        padding: 0.3rem 0.55rem;
        font-size: 0.82rem;
    }

    .liste-knopf[b-ppjtri2vk3] {
        display: inline-block;
        margin-left: auto;
    }

    .raster[b-ppjtri2vk3] {
        display: block;
        overflow-y: auto;
    }

    .links[b-ppjtri2vk3] {
        display: none;
    }

    .einklappen[b-ppjtri2vk3],
    .liste-zu .schiene[b-ppjtri2vk3] {
        display: none;
    }

    .liste-zu .liste-inhalt[b-ppjtri2vk3] {
        display: block;
    }

    .links.offen[b-ppjtri2vk3] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        overflow-y: auto;
        border: 0;
        background: var(--lc-panel);
    }

    /* Testfälle und Konsole stehen auf dem Handy einfach unter der Aufgabe */
    .rechts[b-ppjtri2vk3] {
        overflow: visible;
        border-left: 0;
        border-top: 1px solid var(--lc-akzent-rand);
    }

    .rechts[b-ppjtri2vk3]  > .lc-panel {
        height: auto;
        overflow: visible;
    }

    .mitte[b-ppjtri2vk3] {
        overflow: visible;
        padding: 12px 12px 16px;
        gap: 12px;
    }

    .kuerzel[b-ppjtri2vk3] {
        display: none;
    }

    .editor[b-ppjtri2vk3]  .CodeMirror {
        font-size: 14px;
    }

    .knoepfe .leise[b-ppjtri2vk3] {
        margin-left: 0;
    }

    .knopf[b-ppjtri2vk3] {
        flex: 1;
        padding: 10px 8px;
    }

    .lc-griff[b-ppjtri2vk3] {
        display: none;
    }
}
/* /LemmyDiagramm/Components/LdAufgabe.razor.rz.scp.css */
.ld-aufgabe[b-84gpf9itvm] {
    background: var(--ld-flaeche, #111a2e);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.18));
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ld-kopf[b-84gpf9itvm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

.ld-kennung[b-84gpf9itvm] {
    color: var(--ld-text-3, #7c8aa0);
}

.ld-art[b-84gpf9itvm] {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ld-art.bauen[b-84gpf9itvm] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.ld-art.ergaenzen[b-84gpf9itvm] {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.ld-art.korrigieren[b-84gpf9itvm] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.ld-aufgabe h2[b-84gpf9itvm] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--ld-text, #eef3fa);
}

.ld-szenario[b-84gpf9itvm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--ld-text-2, #b9c5d6);
    line-height: 1.5;
}

.ld-szenario-text[b-84gpf9itvm] {
    margin: 0;
}

.ld-aufgabe-text[b-84gpf9itvm] {
    margin: 0;
    color: var(--ld-text, #eef3fa);
}

.ld-hilfen[b-84gpf9itvm] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ld-hilfe[b-84gpf9itvm] {
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.25));
    color: var(--ld-text-2, #b9c5d6);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ld-hilfe:hover[b-84gpf9itvm], .ld-hilfe.offen[b-84gpf9itvm] {
    border-color: var(--ld-blau, #38bdf8);
    color: var(--ld-blau, #38bdf8);
    background: var(--ld-hover, rgba(56, 189, 248, 0.12));
}

.ld-box[b-84gpf9itvm] {
    border-radius: 6px;
    padding: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ld-box.theorie[b-84gpf9itvm] {
    background: rgba(56, 189, 248, 0.08);
    border-left: 3px solid #38bdf8;
    color: var(--ld-text-2, #b9c5d6);
}

.ld-box.theorie pre[b-84gpf9itvm] {
    background: var(--ld-feld, #0a1020);
    padding: 8px;
    border-radius: 4px;
    margin-top: 8px;
    color: #e2e8f0;
    font-family: ui-monospace, monospace;
}

.ld-box.tipp[b-84gpf9itvm] {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    color: #fde68a;
}

.ld-box.loesung[b-84gpf9itvm] {
    background: rgba(52, 211, 153, 0.08);
    border-left: 3px solid #34d399;
    color: var(--ld-text-2, #b9c5d6);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-loesung-hinweis[b-84gpf9itvm] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ld-text-3, #7c8aa0);
}

.ld-uebernehmen[b-84gpf9itvm] {
    align-self: flex-start;
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid #34d399;
    color: #34d399;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.ld-uebernehmen:hover[b-84gpf9itvm] {
    background: #34d399;
    color: #070b14;
}
/* /LemmyDiagramm/Components/LdDiagramm.razor.rz.scp.css */
.ld-diagramm-huelle[b-rnrejw4blh] {
    position: relative;
    width: 100%;
    min-height: 380px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ld-diagramm-leer[b-rnrejw4blh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: var(--ld-text-3, #7c8aa0);
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
    padding: 30px;
}

.ld-svg[b-rnrejw4blh] {
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   KIDDYMODUS (Dunkles Cyber-Theme)
   ========================================================================== */
.ld-diagramm-huelle.kiddy[b-rnrejw4blh] {
    background: #080d1a;
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
}

.ld-diagramm-huelle.kiddy .ld-lebenslinie-spur[b-rnrejw4blh] {
    stroke: rgba(148, 163, 184, 0.45);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.ld-diagramm-huelle.kiddy .ld-akteur-kopf[b-rnrejw4blh],
.ld-diagramm-huelle.kiddy .ld-akteur-koerper[b-rnrejw4blh],
.ld-diagramm-huelle.kiddy .ld-akteur-arme[b-rnrejw4blh],
.ld-diagramm-huelle.kiddy .ld-akteur-beine[b-rnrejw4blh] {
    stroke: #38bdf8;
    stroke-width: 2;
    fill: #0c192c;
}

.ld-diagramm-huelle.kiddy .ld-objekt-kasten[b-rnrejw4blh] {
    fill: #0f1c32;
    stroke: #38bdf8;
    stroke-width: 1.5;
}

.ld-diagramm-huelle.kiddy .ld-kopf-text[b-rnrejw4blh] {
    fill: #f0f6fc;
    font-size: 13px;
    font-weight: 600;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

.ld-diagramm-huelle.kiddy .ld-kopf-text.unterstrichen[b-rnrejw4blh] {
    text-decoration: underline;
}

.ld-diagramm-huelle.kiddy .ld-aktivierungsbalken[b-rnrejw4blh] {
    fill: #142845;
    stroke: #38bdf8;
    stroke-width: 1.5;
}

.ld-diagramm-huelle.kiddy .ld-pfeil-linie[b-rnrejw4blh] {
    stroke: #34d399;
    stroke-width: 2;
}

.ld-diagramm-huelle.kiddy .ld-pfeil-linie.gestrichelt[b-rnrejw4blh] {
    stroke-dasharray: 5 4;
    stroke: #93c5fd;
}

.ld-diagramm-huelle.kiddy .ld-spitze-sync[b-rnrejw4blh] {
    fill: #34d399;
    stroke: #34d399;
}

.ld-diagramm-huelle.kiddy .ld-spitze-offen[b-rnrejw4blh] {
    stroke: #93c5fd;
    stroke-width: 1.8;
}

.ld-diagramm-huelle.kiddy .ld-nachricht-text[b-rnrejw4blh] {
    fill: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    font-family: ui-monospace, monospace;
}

.ld-diagramm-huelle.kiddy .ld-frag-rahmen[b-rnrejw4blh] {
    fill: rgba(30, 41, 59, 0.4);
    stroke: #f59e0b;
    stroke-width: 1.5;
}

.ld-diagramm-huelle.kiddy .ld-frag-kopf[b-rnrejw4blh] {
    fill: #b45309;
    stroke: #f59e0b;
}

.ld-diagramm-huelle.kiddy .ld-frag-typ[b-rnrejw4blh] {
    fill: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ld-diagramm-huelle.kiddy .ld-frag-bed[b-rnrejw4blh] {
    fill: #fcd34d;
    font-size: 11px;
    font-style: italic;
}

.ld-diagramm-huelle.kiddy .ld-frag-trenner[b-rnrejw4blh] {
    stroke: #f59e0b;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.ld-diagramm-huelle.kiddy .ld-destroy-kreuz[b-rnrejw4blh] {
    stroke: #ef4444;
    stroke-width: 3.5;
}

/* ==========================================================================
   PRÜFUNGSMODUS (Schwarz-Weiß auf Papier wie IHK)
   ========================================================================== */
.ld-diagramm-huelle.pruefung[b-rnrejw4blh] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ld-diagramm-huelle.pruefung .ld-lebenslinie-spur[b-rnrejw4blh] {
    stroke: #000000;
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
}

.ld-diagramm-huelle.pruefung .ld-akteur-kopf[b-rnrejw4blh],
.ld-diagramm-huelle.pruefung .ld-akteur-koerper[b-rnrejw4blh],
.ld-diagramm-huelle.pruefung .ld-akteur-arme[b-rnrejw4blh],
.ld-diagramm-huelle.pruefung .ld-akteur-beine[b-rnrejw4blh] {
    stroke: #000000;
    stroke-width: 1.5;
    fill: #ffffff;
}

.ld-diagramm-huelle.pruefung .ld-objekt-kasten[b-rnrejw4blh] {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 1.5;
}

.ld-diagramm-huelle.pruefung .ld-kopf-text[b-rnrejw4blh] {
    fill: #000000;
    font-size: 13px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.ld-diagramm-huelle.pruefung .ld-kopf-text.unterstrichen[b-rnrejw4blh] {
    text-decoration: underline;
}

.ld-diagramm-huelle.pruefung .ld-aktivierungsbalken[b-rnrejw4blh] {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 1.2;
}

.ld-diagramm-huelle.pruefung .ld-pfeil-linie[b-rnrejw4blh] {
    stroke: #000000;
    stroke-width: 1.5;
}

.ld-diagramm-huelle.pruefung .ld-pfeil-linie.gestrichelt[b-rnrejw4blh] {
    stroke-dasharray: 4 3;
}

.ld-diagramm-huelle.pruefung .ld-spitze-sync[b-rnrejw4blh] {
    fill: #000000;
    stroke: #000000;
}

.ld-diagramm-huelle.pruefung .ld-spitze-offen[b-rnrejw4blh] {
    stroke: #000000;
    stroke-width: 1.5;
}

.ld-diagramm-huelle.pruefung .ld-nachricht-text[b-rnrejw4blh] {
    fill: #000000;
    font-size: 12px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.ld-diagramm-huelle.pruefung .ld-frag-rahmen[b-rnrejw4blh] {
    fill: none;
    stroke: #000000;
    stroke-width: 1.2;
}

.ld-diagramm-huelle.pruefung .ld-frag-kopf[b-rnrejw4blh] {
    fill: #e2e8f0;
    stroke: #000000;
    stroke-width: 1;
}

.ld-diagramm-huelle.pruefung .ld-frag-typ[b-rnrejw4blh] {
    fill: #000000;
    font-size: 11px;
    font-weight: 700;
}

.ld-diagramm-huelle.pruefung .ld-frag-bed[b-rnrejw4blh] {
    fill: #000000;
    font-size: 11px;
    font-weight: 600;
}

.ld-diagramm-huelle.pruefung .ld-frag-trenner[b-rnrejw4blh] {
    stroke: #000000;
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
}

.ld-diagramm-huelle.pruefung .ld-destroy-kreuz[b-rnrejw4blh] {
    stroke: #000000;
    stroke-width: 3;
}
/* /LemmyDiagramm/Components/LdEditor.razor.rz.scp.css */
.ld-editor[b-kn2th1yb08] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ld-bereich[b-kn2th1yb08] {
    background: var(--ld-flaeche, #111a2e);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.18));
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ld-bereich-kopf[b-kn2th1yb08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ld-bereich-kopf h3[b-kn2th1yb08] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ld-blau, #38bdf8);
}

.ld-hinweis-anzahl[b-kn2th1yb08] {
    font-size: 0.8rem;
    color: var(--ld-text-3, #7c8aa0);
}

.ld-linien-liste[b-kn2th1yb08] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ld-linie-chip[b-kn2th1yb08] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie-2, rgba(148, 163, 184, 0.4));
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.85rem;
    color: var(--ld-text, #eef3fa);
}

.ld-linie-chip.akteur[b-kn2th1yb08] {
    border-color: #38bdf8;
}

.ld-linie-art[b-kn2th1yb08] {
    font-size: 0.75rem;
    color: var(--ld-text-3, #7c8aa0);
}

.ld-chip-loeschen[b-kn2th1yb08] {
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
    line-height: 1;
}

.ld-chip-loeschen:hover[b-kn2th1yb08] {
    color: #ef4444;
}

.ld-neue-linie-form[b-kn2th1yb08] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ld-input[b-kn2th1yb08], .ld-select[b-kn2th1yb08] {
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.2));
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--ld-text, #eef3fa);
    font-size: 0.85rem;
}

.ld-input:focus[b-kn2th1yb08], .ld-select:focus[b-kn2th1yb08] {
    outline: none;
    border-color: var(--ld-blau, #38bdf8);
}

.ld-knopf-hinzufuegen[b-kn2th1yb08] {
    background: var(--ld-blau-hell, rgba(56, 189, 248, 0.15));
    border: 1px solid var(--ld-blau, #38bdf8);
    color: var(--ld-blau, #38bdf8);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ld-knopf-hinzufuegen:hover[b-kn2th1yb08] {
    background: var(--ld-blau, #38bdf8);
    color: #070b14;
}

.ld-knopf-hinzufuegen.ld-gross[b-kn2th1yb08] {
    width: 100%;
    padding: 8px;
    text-align: center;
}

/* NACHRICHTENFOLGE */
.ld-nachrichten-liste[b-kn2th1yb08] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-nachricht-zeile[b-kn2th1yb08] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.2));
    border-radius: 6px;
    padding: 8px 10px;
}

.ld-schritt-nr[b-kn2th1yb08] {
    font-weight: 700;
    color: var(--ld-blau, #38bdf8);
    font-size: 0.9rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.ld-feld-gruppe[b-kn2th1yb08] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ld-feld-gruppe.ld-feld-text[b-kn2th1yb08] {
    flex: 1;
}

.ld-label[b-kn2th1yb08] {
    font-size: 0.7rem;
    color: var(--ld-text-3, #7c8aa0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ld-select-schmal[b-kn2th1yb08] {
    background: var(--ld-panel, #0f1729);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.25));
    border-radius: 4px;
    padding: 4px 6px;
    color: var(--ld-text, #eef3fa);
    font-size: 0.8rem;
}

.ld-input-text[b-kn2th1yb08] {
    width: 100%;
    background: var(--ld-panel, #0f1729);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.25));
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--ld-text, #eef3fa);
    font-size: 0.85rem;
    font-family: ui-monospace, monospace;
}

.ld-zeile-aktionen[b-kn2th1yb08] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ld-aktion-knopf[b-kn2th1yb08] {
    background: transparent;
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.25));
    color: var(--ld-text-2, #b9c5d6);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
}

.ld-aktion-knopf:hover:not(:disabled)[b-kn2th1yb08] {
    background: var(--ld-hover, rgba(56, 189, 248, 0.12));
    border-color: var(--ld-blau, #38bdf8);
}

.ld-aktion-knopf:disabled[b-kn2th1yb08] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ld-aktion-knopf.loeschen:hover[b-kn2th1yb08] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

/* FRAGMENTE */
.ld-fragmente-liste[b-kn2th1yb08] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ld-fragment-chip[b-kn2th1yb08] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ld-feld, #0a1020);
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.85rem;
}

.ld-frag-badge[b-kn2th1yb08] {
    background: #b45309;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.ld-frag-info[b-kn2th1yb08] {
    color: #fcd34d;
}

.ld-neues-fragment-form[b-kn2th1yb08] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ld-schritte-range[b-kn2th1yb08] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ld-text-2, #b9c5d6);
}

.ld-input-nr[b-kn2th1yb08] {
    width: 50px;
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.2));
    border-radius: 4px;
    padding: 4px;
    color: #fff;
    text-align: center;
}

.ld-leer-meldung[b-kn2th1yb08] {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ld-text-3, #7c8aa0);
    margin: 4px 0;
}

@media (max-width: 900px) {
    .ld-nachricht-zeile[b-kn2th1yb08] {
        flex-wrap: wrap;
    }
    .ld-feld-gruppe.ld-feld-text[b-kn2th1yb08] {
        width: 100%;
    }
}
/* /LemmyDiagramm/Components/LdReferenz.razor.rz.scp.css */
.ld-referenz-hintergrund[b-y1300syxu7] {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 15, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ld-referenz-dialog[b-y1300syxu7] {
    background: var(--ld-panel, #0f1729);
    border: 1px solid var(--ld-linie-2, rgba(148, 163, 184, 0.35));
    border-radius: 12px;
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.ld-dialog-kopf[b-y1300syxu7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.18));
}

.ld-dialog-kopf h2[b-y1300syxu7] {
    margin: 0;
    font-size: 1.15rem;
    color: var(--ld-text, #eef3fa);
}

.ld-dialog-kopf p[b-y1300syxu7] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--ld-text-3, #7c8aa0);
}

.ld-dialog-schliessen[b-y1300syxu7] {
    background: transparent;
    border: none;
    color: var(--ld-text-2, #b9c5d6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.ld-dialog-schliessen:hover[b-y1300syxu7] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.ld-dialog-inhalt[b-y1300syxu7] {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ld-ref-abschnitt h3[b-y1300syxu7] {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ld-blau, #38bdf8);
    border-bottom: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.18));
    padding-bottom: 4px;
}

.ld-ref-tabelle[b-y1300syxu7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ld-ref-zeile[b-y1300syxu7] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.15));
    border-radius: 6px;
    padding: 10px 14px;
}

.ld-ref-kuerzel[b-y1300syxu7] {
    width: 140px;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ld-text, #eef3fa);
    font-family: ui-monospace, monospace;
}

.ld-ref-desc[b-y1300syxu7] {
    flex: 1;
    font-size: 0.85rem;
    color: var(--ld-text-2, #b9c5d6);
    line-height: 1.4;
}

.ld-ref-desc strong[b-y1300syxu7] {
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.ld-ref-desc p[b-y1300syxu7] {
    margin: 0;
}

.ld-ref-desc code[b-y1300syxu7] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: ui-monospace, monospace;
}

.ld-dialog-fuss[b-y1300syxu7] {
    padding: 14px 20px;
    border-top: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.18));
    display: flex;
    justify-content: flex-end;
}

.ld-knopf-schliessen[b-y1300syxu7] {
    background: var(--ld-blau, #38bdf8);
    color: #070b14;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
}

.ld-knopf-schliessen:hover[b-y1300syxu7] {
    background: #7dd3fc;
}
/* /LemmyDiagramm/Components/LdUebungsListe.razor.rz.scp.css */
.ld-liste[b-2kutjli94o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 10px;
    overflow-y: auto;
}

.ld-kapitel[b-2kutjli94o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ld-kapitel h3[b-2kutjli94o] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ld-blau, #38bdf8);
    padding: 4px 6px;
}

.ld-kapitel-nr[b-2kutjli94o] {
    background: rgba(56, 189, 248, 0.15);
    color: var(--ld-blau, #38bdf8);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.75rem;
}

.ld-kapitel-titel[b-2kutjli94o] {
    flex: 1;
}

.ld-kapitel-zahl[b-2kutjli94o] {
    color: var(--ld-text-3, #7c8aa0);
    font-size: 0.75rem;
    font-weight: 400;
}

.ld-kapitel ul[b-2kutjli94o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ld-eintrag[b-2kutjli94o] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--ld-text-2, #b9c5d6);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ld-eintrag:hover[b-2kutjli94o] {
    background: var(--ld-hover, rgba(56, 189, 248, 0.1));
    color: var(--ld-text, #eef3fa);
}

.ld-eintrag.aktiv[b-2kutjli94o] {
    background: var(--ld-blau-hell, rgba(56, 189, 248, 0.15));
    border-color: var(--ld-blau, #38bdf8);
    color: #fff;
    font-weight: 600;
}

.ld-eintrag.geloest .ld-marke[b-2kutjli94o] {
    background: #10b981;
    color: #fff;
    font-weight: 700;
}

.ld-marke[b-2kutjli94o] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ld-feld, #0a1020);
    border: 1px solid var(--ld-linie, rgba(148, 163, 184, 0.3));
    color: var(--ld-text-3, #7c8aa0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ld-eintrag-titel[b-2kutjli94o] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-art-zeichen[b-2kutjli94o] {
    font-size: 0.75rem;
    opacity: 0.6;
}
/* /LemmyDiagramm/Pages/LemmyDiagrammSeite.razor.rz.scp.css */
.ld-seite[b-ajr79r467j] {
    --ld-grund: #070b14;
    --ld-panel: #0f1729;
    --ld-flaeche: #111a2e;
    --ld-feld: #0a1020;
    --ld-hover: rgba(56, 189, 248, 0.12);
    --ld-linie: rgba(148, 163, 184, 0.18);
    --ld-linie-2: rgba(148, 163, 184, 0.55);
    --ld-text: #eef3fa;
    --ld-text-2: #b9c5d6;
    --ld-text-3: #7c8aa0;
    --ld-blau: #38bdf8;
    --ld-blau-hell: rgba(56, 189, 248, 0.13);
    --ld-gruen: #34d399;
    --ld-gruen-hell: rgba(16, 185, 129, 0.15);
    --ld-rot: #fca5a5;
    --ld-rot-hell: rgba(220, 38, 38, 0.16);
    --ld-amber: #f59e0b;
    --ld-rechts-breite: 480px;

    position: fixed;
    inset: 0;
    background: var(--ld-grund);
    color: var(--ld-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}

/* KOPFLEISTE */
.ld-leiste[b-ajr79r467j] {
    background: var(--ld-panel);
    border-bottom: 1px solid var(--ld-linie);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    min-height: 56px;
}

.ld-zurueck[b-ajr79r467j] {
    background: transparent;
    border: 1px solid var(--ld-linie);
    color: var(--ld-text-2);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ld-zurueck:hover[b-ajr79r467j] {
    border-color: var(--ld-blau);
    color: #fff;
    background: var(--ld-hover);
}

.ld-marke[b-ajr79r467j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ld-logo[b-ajr79r467j] {
    font-family: "Orbitron", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ld-untertitel[b-ajr79r467j] {
    font-size: 0.75rem;
    color: var(--ld-text-3);
}

.ld-werkzeuge[b-ajr79r467j] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ld-trenner[b-ajr79r467j] {
    width: 1px;
    height: 24px;
    background: var(--ld-linie);
}

/* FORTSCHRITT */
.ld-fortschritt-anzeige[b-ajr79r467j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.ld-fa-oben[b-ajr79r467j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ld-text-2);
}

.ld-fa-zahl strong[b-ajr79r467j] {
    color: var(--ld-gruen);
}

.ld-fa-prozent[b-ajr79r467j] {
    color: var(--ld-text-3);
}

.ld-fa-balken[b-ajr79r467j] {
    height: 4px;
    background: var(--ld-feld);
    border-radius: 2px;
    overflow: hidden;
}

.ld-fa-balken span[b-ajr79r467j] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ld-blau), var(--ld-gruen));
    transition: width 0.3s ease;
}

/* SCHALTER MODUS */
.ld-schalter-rahmen[b-ajr79r467j] {
    position: relative;
    display: flex;
    align-items: center;
}

.ld-schalter[b-ajr79r467j] {
    background: var(--ld-feld);
    border: 1px solid var(--ld-linie);
    border-radius: 20px;
    padding: 3px 10px 3px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ld-schalter:hover[b-ajr79r467j] {
    border-color: var(--ld-blau);
}

.ld-schalter-spur[b-ajr79r467j] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-schalter-text[b-ajr79r467j] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.ld-schalter-titel[b-ajr79r467j] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ld-text);
}

.ld-schalter-unter[b-ajr79r467j] {
    font-size: 0.65rem;
    color: var(--ld-text-3);
}

.ld-spruch[b-ajr79r467j] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--ld-panel);
    border: 1px solid var(--ld-blau);
    color: var(--ld-blau);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    animation: ld-verblassen-b-ajr79r467j 2.5s forwards;
}

@keyframes ld-verblassen-b-ajr79r467j {
    0% { opacity: 0; transform: translateY(-4px); }
    15% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.ld-knopf-leiste[b-ajr79r467j] {
    background: transparent;
    border: 1px solid var(--ld-linie);
    color: var(--ld-text-2);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ld-knopf-leiste:hover[b-ajr79r467j], .ld-knopf-leiste.aktiv[b-ajr79r467j] {
    border-color: var(--ld-blau);
    color: #fff;
    background: var(--ld-hover);
}

.ld-zaehler[b-ajr79r467j] {
    background: rgba(56, 189, 248, 0.15);
    color: var(--ld-blau);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
}

/* RASTER */
.ld-raster[b-ajr79r467j] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* SEITENLEISTE */
.ld-links[b-ajr79r467j] {
    width: 280px;
    background: var(--ld-panel);
    border-right: 1px solid var(--ld-linie);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.2s ease, margin-left 0.2s ease;
    overflow: hidden;
}

.ld-seite.liste-zu .ld-links[b-ajr79r467j] {
    width: 40px;
}

.ld-seite.liste-zu .ld-liste-inhalt[b-ajr79r467j] {
    display: none;
}

.ld-schiene[b-ajr79r467j] {
    display: none;
    background: transparent;
    border: none;
    color: var(--ld-text-3);
    cursor: pointer;
    padding: 12px 6px;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ld-seite.liste-zu .ld-schiene[b-ajr79r467j] {
    display: flex;
}

.ld-schiene-text[b-ajr79r467j] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.ld-liste-inhalt[b-ajr79r467j] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ld-liste-kopf[b-ajr79r467j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ld-linie);
}

.ld-liste-titel[b-ajr79r467j] {
    font-weight: 700;
    font-size: 0.9rem;
}

.ld-einklappen[b-ajr79r467j] {
    background: transparent;
    border: none;
    color: var(--ld-text-3);
    font-size: 0.8rem;
    cursor: pointer;
}

.ld-einklappen:hover[b-ajr79r467j] {
    color: #fff;
}

/* MITTE (SPLIT-VIEW) */
.ld-mitte[b-ajr79r467j] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.ld-spalte-links[b-ajr79r467j] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ld-spalte-rechts[b-ajr79r467j] {
    width: var(--ld-rechts-breite);
    background: var(--ld-panel);
    border-left: 1px solid var(--ld-linie);
    display: flex;
    position: relative;
    flex-shrink: 0;
}

.ld-griff[b-ajr79r467j] {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 20;
    transition: background 0.15s ease;
}

.ld-griff:hover[b-ajr79r467j], .ld-griff.zieht[b-ajr79r467j] {
    background: var(--ld-blau);
}

.ld-diagramm-karte[b-ajr79r467j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ld-diagramm-leiste[b-ajr79r467j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ld-linie);
    background: var(--ld-flaeche);
}

.ld-diagramm-titel[b-ajr79r467j] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ld-text);
}

.ld-diagramm-format[b-ajr79r467j] {
    font-size: 0.75rem;
    color: var(--ld-text-3);
}

/* AKTIONEN */
.ld-aktionen-leiste[b-ajr79r467j] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ld-haupt-knopf[b-ajr79r467j] {
    flex: 1;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.15s ease;
}

.ld-haupt-knopf:hover[b-ajr79r467j] {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5);
}

.ld-leiser-knopf[b-ajr79r467j] {
    background: transparent;
    border: 1px solid var(--ld-linie);
    color: var(--ld-text-2);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ld-leiser-knopf:hover[b-ajr79r467j] {
    border-color: var(--ld-text-2);
    color: #fff;
}

/* ERGEBNIS-BOX */
.ld-ergebnis-box[b-ajr79r467j] {
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ld-ergebnis-box.ok[b-ajr79r467j] {
    background: var(--ld-gruen-hell);
    border: 1px solid var(--ld-gruen);
}

.ld-ergebnis-box.fehler[b-ajr79r467j] {
    background: var(--ld-rot-hell);
    border: 1px solid #ef4444;
}

.ld-ergebnis-titel[b-ajr79r467j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ld-ergebnis-titel h4[b-ajr79r467j] {
    margin: 0;
    font-size: 0.95rem;
    color: #fff;
}

.ld-ergebnis-liste-block[b-ajr79r467j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ld-ergebnis-unter[b-ajr79r467j] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ld-text-3);
}

.ld-ergebnis-liste[b-ajr79r467j] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

.ld-ergebnis-liste.fehler li[b-ajr79r467j] {
    color: #fca5a5;
}

.ld-ergebnis-liste.ok li[b-ajr79r467j] {
    color: #6ee7b7;
}

.ld-status[b-ajr79r467j] {
    padding: 40px;
    text-align: center;
    color: var(--ld-text-3);
    font-size: 1rem;
}

.ld-status.fehler[b-ajr79r467j] {
    color: #fca5a5;
}

@media (max-width: 1024px) {
    .ld-mitte[b-ajr79r467j] {
        flex-direction: column;
        overflow-y: auto;
    }
    .ld-spalte-rechts[b-ajr79r467j] {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--ld-linie);
    }
    .ld-griff[b-ajr79r467j] {
        display: none;
    }
}
/* /Pages/AboutMe.razor.rz.scp.css */
/* ========================================================
   Hilfsklassen (Bootstrap ist in dieser App nicht eingebunden – die hier verwendeten Namen werden deshalb selbst definiert;
   sie stehen am Dateianfang, damit die Regeln der Seite weiter unten sie überschreiben)
   ======================================================== */
.d-flex[b-xe4hq0sl3r] { display: flex; }
.d-block[b-xe4hq0sl3r] { display: block; }
.flex-column[b-xe4hq0sl3r] { flex-direction: column; }
.flex-wrap[b-xe4hq0sl3r] { flex-wrap: wrap; }
.align-items-center[b-xe4hq0sl3r] { align-items: center; }
.justify-content-center[b-xe4hq0sl3r] { justify-content: center; }
.justify-content-between[b-xe4hq0sl3r] { justify-content: space-between; }
.gap-2[b-xe4hq0sl3r] { gap: 0.5rem; }
.gap-3[b-xe4hq0sl3r] { gap: 1rem; }
.w-100[b-xe4hq0sl3r] { width: 100%; }
.mx-auto[b-xe4hq0sl3r] { margin-left: auto; margin-right: auto; }
.m-0[b-xe4hq0sl3r] { margin: 0; }
.mb-0[b-xe4hq0sl3r] { margin-bottom: 0; }
.mb-1[b-xe4hq0sl3r] { margin-bottom: 0.25rem; }
.mb-2[b-xe4hq0sl3r] { margin-bottom: 0.5rem; }
.mb-3[b-xe4hq0sl3r] { margin-bottom: 1rem; }
.mb-4[b-xe4hq0sl3r] { margin-bottom: 1.5rem; }
.mt-3[b-xe4hq0sl3r] { margin-top: 1rem; }
.mt-4[b-xe4hq0sl3r] { margin-top: 1.5rem; }
.p-3[b-xe4hq0sl3r] { padding: 1rem; }
.px-3[b-xe4hq0sl3r] { padding-left: 1rem; padding-right: 1rem; }
.py-1[b-xe4hq0sl3r] { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-3[b-xe4hq0sl3r] { padding-top: 1rem; padding-bottom: 1rem; }
.py-4[b-xe4hq0sl3r] { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt-2[b-xe4hq0sl3r] { padding-top: 0.5rem; }
.ps-2[b-xe4hq0sl3r] { padding-left: 0.5rem; }
.ps-3[b-xe4hq0sl3r] { padding-left: 1rem; }
.position-relative[b-xe4hq0sl3r] { position: relative; }
.text-center[b-xe4hq0sl3r] { text-align: center; }
.text-start[b-xe4hq0sl3r] { text-align: left; }
.text-uppercase[b-xe4hq0sl3r] { text-transform: uppercase; }
.text-decoration-none[b-xe4hq0sl3r], .text-decoration-none:hover[b-xe4hq0sl3r] { text-decoration: none; }
.fw-medium[b-xe4hq0sl3r] { font-weight: 500; }
.fw-semibold[b-xe4hq0sl3r] { font-weight: 600; }
.fw-bold[b-xe4hq0sl3r] { font-weight: 700; }
.fst-italic[b-xe4hq0sl3r] { font-style: italic; }
.lh-base[b-xe4hq0sl3r] { line-height: 1.5; }
.lh-lg[b-xe4hq0sl3r] { line-height: 1.9; }
.small[b-xe4hq0sl3r] { font-size: 0.875em; }
.rounded-4[b-xe4hq0sl3r] { border-radius: 1rem; }
.rounded-pill[b-xe4hq0sl3r] { border-radius: 50rem; }
.text-info[b-xe4hq0sl3r] { color: #38bdf8; }
.text-light[b-xe4hq0sl3r] { color: #f1f5f9; }
.text-success[b-xe4hq0sl3r] { color: #4ade80; }
.text-secondary[b-xe4hq0sl3r] { color: #94a3b8; }
.border-top[b-xe4hq0sl3r] { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.border-top.border-opacity-25[b-xe4hq0sl3r] { border-top-color: rgba(255, 255, 255, 0.25); }

.title-poppins[b-xe4hq0sl3r] {
    font-family: 'Poppins', sans-serif !important;
}

/* Container mit flexibler Anpassung für alle Bildschirme */
.about-container[b-xe4hq0sl3r] {
    width: 100%;
    min-height: 100vh;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================================
   DUNKLE HAUPT-SEKTIONEN (HERO, PROFIL & BERUFSERFAHRUNG)
   ======================================================== */
.profile-header[b-xe4hq0sl3r],
.section-card-effect[b-xe4hq0sl3r] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 58, 138, 0.68) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.5rem !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding: 2.25rem !important;
    transition: all 0.3s ease;
}

.profile-header[b-xe4hq0sl3r] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3.5rem !important;
}

.section-card-effect:hover[b-xe4hq0sl3r] {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.15) !important;
    transform: translateY(-2px);
}

.inner-profile-box[b-xe4hq0sl3r] {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 1.25rem !important;
    padding: 2rem 1.5rem !important;
}

/* ========================================================
   ARBEITSZEUGNISSE CYBER-HUB SEKTION
   ======================================================== */
.cyber-doc-section[b-xe4hq0sl3r] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(17, 24, 39, 0.9) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-top: 4px solid #38bdf8 !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 1.5rem !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    padding: 2.25rem !important;
}

/* CYBER-DOC CARDS */
.cyber-doc-card[b-xe4hq0sl3r] {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-decoration: none !important;
    overflow: hidden;
}

    .cyber-doc-card[b-xe4hq0sl3r]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #38bdf8, transparent);
        opacity: 0.3;
        transition: opacity 0.35s ease;
    }

    .cyber-doc-card:hover[b-xe4hq0sl3r] {
        transform: translateY(-6px) scale(1.02);
        border-color: #38bdf8 !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.3) !important;
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    }

        .cyber-doc-card:hover[b-xe4hq0sl3r]::before {
            opacity: 1;
        }

.doc-tag[b-xe4hq0sl3r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 4px 12px;
    border-radius: 50rem;
    margin-bottom: 1rem;
    width: fit-content;
}

.doc-heading[b-xe4hq0sl3r] {
    font-size: 1.22rem !important;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.doc-sub[b-xe4hq0sl3r] {
    font-size: 0.95rem !important;
    color: #94a3b8 !important;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.doc-footer[b-xe4hq0sl3r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #38bdf8 !important;
}

.cyber-doc-card:hover .doc-footer[b-xe4hq0sl3r] {
    color: #7dd3fc !important;
}

.doc-lock-pill[b-xe4hq0sl3r] {
    font-size: 0.8rem !important;
    color: #4ade80 !important;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 2px 10px;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

/* ========================================================= */

.section-title-pill[b-xe4hq0sl3r] {
    display: inline-block !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0.35) 100%) !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
    padding: 10px 28px !important;
    border-radius: 50rem !important;
    font-size: clamp(1.18rem, 2.7vw, 1.42rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    margin-bottom: 1.75rem !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.mb-section[b-xe4hq0sl3r] {
    margin-bottom: 4rem !important;
}

/* DEDIZIERTER BILD + NAMEN CONTAINER */
.avatar-profile-container[b-xe4hq0sl3r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.85rem;
    width: 100%;
}

.profile-name-under-avatar[b-xe4hq0sl3r] {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* FLÜSSIGE SCHRIFTGRÖSSEN */
.custom-name-size[b-xe4hq0sl3r] {
    font-size: clamp(1.6rem, 4.2vw, 2.2rem) !important;
}

.custom-subtitle-size[b-xe4hq0sl3r] {
    font-size: clamp(1.1rem, 2.8vw, 1.35rem) !important;
}

.custom-motto-size[b-xe4hq0sl3r] {
    font-size: clamp(1.05rem, 2.8vw, 1.28rem) !important;
}

.custom-meta-size[b-xe4hq0sl3r] {
    font-size: clamp(0.95rem, 2.2vw, 1.15rem) !important;
    position: relative;
    z-index: 10;
}

    .custom-meta-size span[b-xe4hq0sl3r] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid rgba(56, 189, 248, 0.3);
        padding: 6px 16px;
        border-radius: 50rem;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all 0.25s ease;
    }

        .custom-meta-size span:hover[b-xe4hq0sl3r] {
            border-color: #38bdf8;
            color: #38bdf8 !important;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
            transform: translateY(-2px);
        }

.custom-profile-text[b-xe4hq0sl3r] {
    font-size: clamp(1.12rem, 2.6vw, 1.28rem) !important;
    line-height: 1.75;
}

/* STATUS BADGE */
.cyber-status-pill[b-xe4hq0sl3r] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(15, 23, 42, 0.85) 100%);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    padding: 8px 22px;
    border-radius: 50rem;
    font-size: clamp(1rem, 2.4vw, 1.15rem) !important;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
    backdrop-filter: blur(10px);
}

.pulse-dot[b-xe4hq0sl3r] {
    width: 10px;
    height: 10px;
    background-color: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: pulseAnimation-b-xe4hq0sl3r 2s infinite;
    flex-shrink: 0;
}

@keyframes pulseAnimation-b-xe4hq0sl3r {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

/* PROFILBILD-CONTAINER */
.profile-avatar-wrapper[b-xe4hq0sl3r] {
    position: relative;
    width: clamp(145px, 32vw, 180px);
    height: clamp(180px, 40vw, 225px);
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid #38bdf8;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.35);
    background: #0f172a;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease;
    margin: 0 auto;
    user-select: none;
}

    .profile-avatar-wrapper:hover[b-xe4hq0sl3r] {
        transform: scale(1.03);
        border-color: #7dd3fc;
    }

        .profile-avatar-wrapper:hover .image-overlay-hint[b-xe4hq0sl3r] {
            opacity: 1;
        }

.image-overlay-hint[b-xe4hq0sl3r] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.85);
    color: #38bdf8;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    padding: 6px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.profile-avatar[b-xe4hq0sl3r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    pointer-events: none;
}

.motto-box[b-xe4hq0sl3r] {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 1rem !important;
    padding: 1.4rem !important;
}

.info-grid[b-xe4hq0sl3r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.inner-info-box[b-xe4hq0sl3r] {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 1rem !important;
}

/* CYBER-AKZENT ÜBERSCHRIFTEN (ZENTRIERT & MIT ABSTAND) */
.custom-heading-size[b-xe4hq0sl3r] {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(0.95rem, 2.2vw, 1.12rem) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto 1.2rem auto !important;
    padding: 6px 28px !important;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0) 0%, rgba(56, 189, 248, 0.2) 50%, rgba(15, 23, 42, 0) 100%);
    border-bottom: 2px solid #38bdf8 !important;
    border-radius: 8px;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    box-shadow: 0 6px 15px -6px rgba(56, 189, 248, 0.5);
}

/* PILL-EINTRÄGE (ZENTRIERT, EINHEITLICH & MIT ABSTAND) */
.tech-pill[b-xe4hq0sl3r], .strength-pill[b-xe4hq0sl3r] {
    font-size: clamp(0.95rem, 2.2vw, 1.12rem) !important;
    font-weight: 600;
    width: 100%;
    max-width: 260px;
    text-align: center;
    margin: 0 auto 0.65rem auto !important;
    padding: 8px 18px !important;
    border-radius: 50rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    box-sizing: border-box;
}

.tech-pill[b-xe4hq0sl3r] {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

    .tech-pill:hover[b-xe4hq0sl3r] {
        color: #ffffff;
        background: rgba(56, 189, 248, 0.25);
        border-color: #38bdf8;
        box-shadow: 0 0 18px rgba(56, 189, 248, 0.5), inset 0 0 10px rgba(56, 189, 248, 0.3);
        transform: translateY(-2px) scale(1.03);
    }

.strength-pill[b-xe4hq0sl3r] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

    .strength-pill:hover[b-xe4hq0sl3r] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.2);
        transform: translateY(-2px) scale(1.03);
    }

.btn-chic-pill[b-xe4hq0sl3r] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 10px 22px;
    border-radius: 50rem;
    font-size: clamp(1.02rem, 2.4vw, 1.15rem) !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-chic-pill:hover[b-xe4hq0sl3r] {
        background: #38bdf8;
        color: #0f172a;
        border-color: #38bdf8;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
    }

/* ========================================================
   TIMELINE & BULLETS MIT EINRÜCKUNG VOM INNENRAND
   ======================================================== */
.timeline[b-xe4hq0sl3r] {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    position: relative;
    padding-left: 3.5rem !important;
}

    .timeline[b-xe4hq0sl3r]::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 15px;
        bottom: 15px;
        width: 2px;
        background: rgba(56, 189, 248, 0.4);
    }

.timeline-dot[b-xe4hq0sl3r] {
    position: absolute;
    left: -33px;
    top: 24px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #38bdf8;
    border: 3px solid #0f172a;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

.badge-time[b-xe4hq0sl3r] {
    display: inline-block;
    background: rgba(56, 189, 248, 0.12);
    backdrop-filter: blur(10px);
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 50rem;
    padding: 5px 16px;
    font-size: 0.98rem !important;
    font-weight: 600;
}

.timeline-card[b-xe4hq0sl3r] {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 1rem !important;
    padding: 1.6rem !important;
}

    .timeline-card h3[b-xe4hq0sl3r] {
        font-size: clamp(1.2rem, 2.8vw, 1.45rem) !important;
        color: #ffffff !important;
    }

    .timeline-card h4[b-xe4hq0sl3r] {
        font-size: clamp(1.05rem, 2.4vw, 1.2rem) !important;
        color: #38bdf8 !important;
    }

    .timeline-card p[b-xe4hq0sl3r], .timeline-card ul li[b-xe4hq0sl3r] {
        font-size: clamp(1.02rem, 2.3vw, 1.15rem) !important;
        line-height: 1.65;
        color: #f8fafc !important;
    }

    .timeline-card ul[b-xe4hq0sl3r] {
        margin-left: 1.75rem !important;
        padding-left: 0.5rem !important;
        margin-top: 0.75rem !important;
    }

    .timeline-card li[b-xe4hq0sl3r] {
        margin-left: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }

/* Scroll Animationen */
.scroll-element[b-xe4hq0sl3r] {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

    .scroll-element.visible[b-xe4hq0sl3r] {
        opacity: 1;
        transform: translateY(0);
    }

/* Rückfall ohne Einblend-Skript: alles sofort sichtbar */
.alles-sichtbar .scroll-element[b-xe4hq0sl3r] {
    opacity: 1;
    transform: none;
}

/* unsichtbare Schutzschicht über dem Profilbild (kein "Bild speichern") */
.profile-avatar-glas[b-xe4hq0sl3r] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
}

/* Nach-oben-Knopf: schlichtes Glas-Quadrat im Stil des Designs, erscheint erst nach etwas Scrollen */
.scroll-top-wrapper[b-xe4hq0sl3r] {
    position: fixed;
    right: clamp(14px, 2vw, 28px);
    bottom: calc(clamp(14px, 2vw, 28px) + var(--w95-unten, 0px)); /* über der RainerOS-Taskleiste */
    z-index: 1080;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-top-wrapper.sichtbar[b-xe4hq0sl3r] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.btn-scroll-top[b-xe4hq0sl3r] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
    color: #cfe8ff;
    background: rgba(12, 20, 44, 0.72);
    border: 1px solid rgba(148, 197, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn-scroll-top:hover[b-xe4hq0sl3r],
.btn-scroll-top:focus-visible[b-xe4hq0sl3r] {
    transform: translateY(-3px);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(56, 189, 248, 0.35);
    outline: none;
}

.btn-scroll-top:active[b-xe4hq0sl3r] { transform: translateY(0) scale(0.96); }

.scroll-top-icon[b-xe4hq0sl3r] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ========================================================
   PIN-ABFRAGE FÜR DIE DOKUMENTE (dezent, passend zum dunklen Karten-Layout)
   ======================================================== */
.pin-overlay[b-xe4hq0sl3r] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn-b-xe4hq0sl3r 0.2s ease;
}

.pin-box[b-xe4hq0sl3r] {
    width: 100%;
    max-width: 360px;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: pinEinblenden-b-xe4hq0sl3r 0.22s ease-out;
}

.pin-symbol[b-xe4hq0sl3r] {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.pin-titel[b-xe4hq0sl3r] {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #e2e8f0;
}

.pin-text[b-xe4hq0sl3r] {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #94a3b8;
}

.pin-feld[b-xe4hq0sl3r] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    text-align: center;
    font-size: 1.35rem;
    letter-spacing: 0.35em;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.65rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pin-feld[b-xe4hq0sl3r]::placeholder {
    letter-spacing: 0.1em;
    font-size: 1rem;
    color: #64748b;
}

.pin-feld:focus[b-xe4hq0sl3r] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.pin-fehler[b-xe4hq0sl3r] {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: #fca5a5;
}

.pin-knoepfe[b-xe4hq0sl3r] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.pin-knopf[b-xe4hq0sl3r] {
    flex: 1;
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #f8fafc;
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    border: 1px solid rgba(125, 211, 252, 0.45);
    border-radius: 0.65rem;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.pin-knopf:hover[b-xe4hq0sl3r] {
    filter: brightness(1.1);
}

.pin-knopf:active[b-xe4hq0sl3r] {
    transform: translateY(1px);
}

.pin-knopf-zweit[b-xe4hq0sl3r] {
    color: #cbd5e1;
    background: transparent;
    border-color: rgba(148, 163, 184, 0.4);
}

.pin-knopf-zweit:hover[b-xe4hq0sl3r] {
    background: rgba(148, 163, 184, 0.12);
    filter: none;
}

@keyframes pinEinblenden-b-xe4hq0sl3r {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn-b-xe4hq0sl3r {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* SMARTPHONE-CHECK (RESPONSIVE) */
@media (max-width: 768px) {
    .profile-header[b-xe4hq0sl3r], .section-card-effect[b-xe4hq0sl3r], .cyber-doc-section[b-xe4hq0sl3r] {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }

    .inner-profile-box[b-xe4hq0sl3r] {
        padding: 1.25rem 1rem !important;
    }

    .info-grid[b-xe4hq0sl3r] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mb-section[b-xe4hq0sl3r] {
        margin-bottom: 2.5rem !important;
    }

    .timeline[b-xe4hq0sl3r] {
        padding-left: 3rem !important;
        gap: 2rem;
    }

    .timeline-dot[b-xe4hq0sl3r] {
        left: -28px;
    }

    .timeline-card ul[b-xe4hq0sl3r] {
        margin-left: 1rem !important;
        padding-left: 0.25rem !important;
    }
}

/* ========================================================
   DESKTOP-LAYOUT: Inhalt füllt den Bereich (bis 1400 px, mittig); alle Abschnitte stehen untereinander
   und sind gleich breit
   ======================================================== */
.about-inhalt[b-xe4hq0sl3r] {
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
    align-items: start;
}

.about-inhalt > .profile-header[b-xe4hq0sl3r],
.about-inhalt > .mb-section[b-xe4hq0sl3r] {
    margin-bottom: 0 !important;
}

/* ========================================================
   ÜBERARBEITUNG: Kopfbereich, Pillen, Aktionsknöpfe, Zeugnis-Raster – für Smartphone, Tablet und Desktop
   ======================================================== */

/* Kopfbereich: Foto/Name und Text untereinander, mittig (Desktop: siehe unten nebeneinander) */
.kopf .inner-profile-box .row[b-xe4hq0sl3r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
}

.kopf .inner-profile-box .row > div[b-xe4hq0sl3r] {
    width: 100%;
    align-items: center;
    text-align: center;
}

.kopf .inner-profile-box .row > div:last-child[b-xe4hq0sl3r] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.cyber-status-pill[b-xe4hq0sl3r] {
    max-width: 100%;
    text-align: left;
    font-size: clamp(0.92rem, 2.2vw, 1.1rem) !important;
    line-height: 1.3;
}

.motto-box[b-xe4hq0sl3r] { text-align: center; }

/* Tech-Stack und Stärken: Pillen laufen in Reihen (nicht jede in eigener Zeile) */
.kopf .inner-info-box > div:last-child[b-xe4hq0sl3r] {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.kopf .tech-pill[b-xe4hq0sl3r],
.kopf .strength-pill[b-xe4hq0sl3r] {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 7px 1rem !important;
}

.kopf .custom-heading-size[b-xe4hq0sl3r] {
    max-width: 100%;
    text-align: center;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Fakten-Zeile (Ort, Geburtstag, Sprachen) mittig und umbrechend */
.kopf .custom-meta-size[b-xe4hq0sl3r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* Aktionsknöpfe (E-Mail, Zeugnisse, Socials): mittig, ohne Unterstreichung */
.aktionen[b-xe4hq0sl3r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.aktionen .btn-chic-pill[b-xe4hq0sl3r],
.aktionen .btn-chic-pill:hover[b-xe4hq0sl3r] {
    text-decoration: none;
    justify-content: center;
}

/* Überschrift-Pillen der Abschnitte */
.section-title-pill[b-xe4hq0sl3r] {
    max-width: 100%;
    text-align: center;
}

.sek-profil .section-title-pill[b-xe4hq0sl3r],
.sek-lebenslauf .section-title-pill[b-xe4hq0sl3r] {
    display: block !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.cyber-doc-section > .d-flex[b-xe4hq0sl3r] { justify-content: center; text-align: center; }

/* Zeugnis-Karten als Raster (Karten gleich hoch, nichts überlappt) */
.cyber-doc-section .row > .col[b-xe4hq0sl3r] {
    display: flex;
    min-width: 0;
}

.cyber-doc-section .cyber-doc-card[b-xe4hq0sl3r] {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 190px;
    gap: 1rem;
    box-sizing: border-box;
}

/* Zeugnis-Karten als Raster */
.cyber-doc-section .row[b-xe4hq0sl3r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .cyber-doc-section .row[b-xe4hq0sl3r] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .cyber-doc-section .row[b-xe4hq0sl3r] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Smartphone */
@media (max-width: 560px) {
    .aktionen[b-xe4hq0sl3r] { flex-direction: column; align-items: stretch; }
    .aktionen .btn-chic-pill[b-xe4hq0sl3r] { width: 100%; box-sizing: border-box; }

    .profile-header[b-xe4hq0sl3r], .section-card-effect[b-xe4hq0sl3r], .cyber-doc-section[b-xe4hq0sl3r] { padding: 1rem !important; }
    .inner-profile-box[b-xe4hq0sl3r] { padding: 1rem 0.75rem !important; }
    .timeline-card[b-xe4hq0sl3r] { padding: 1.1rem !important; }
    .section-title-pill[b-xe4hq0sl3r] { padding: 8px 20px !important; margin-bottom: 1.25rem !important; }
    .custom-profile-text[b-xe4hq0sl3r] { text-align: left; }
}

@media (min-width: 992px) {
    .text-lg-start[b-xe4hq0sl3r] { text-align: left; }
}

/* Desktop: Foto links, Name/Untertitel/Status rechts */
@media (min-width: 1100px) {
    .kopf .inner-profile-box .row[b-xe4hq0sl3r] {
        grid-template-columns: auto minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: center;
        justify-items: stretch;
        padding: 0 clamp(1rem, 3vw, 3rem);
        text-align: left;
    }

    .kopf .inner-profile-box .row > div[b-xe4hq0sl3r] { width: auto; }
    .kopf .inner-profile-box .row > div:last-child[b-xe4hq0sl3r] { align-items: flex-start; text-align: left; }
    .kopf .profile-avatar-wrapper[b-xe4hq0sl3r] { width: 220px; height: 275px; }
    .kopf .custom-name-size[b-xe4hq0sl3r] { font-size: clamp(2rem, 2.6vw, 2.6rem) !important; }
    .kopf .custom-subtitle-size[b-xe4hq0sl3r] { font-size: clamp(1.2rem, 1.7vw, 1.5rem) !important; }
}
/* /Pages/AnimationStart.razor.rz.scp.css */
/* ===================================================================
   GESICHT AUS GLAS - vier Teile werden nacheinander zusammengesaugt
   Reihenfolge: links oben -> rechts oben -> links unten -> rechts unten
   Die linke Seite ist etwas schneller als die rechte.
   =================================================================== */

.animation-container[b-lpzyg83mq6] {
    --ease-suck: cubic-bezier(0.62, 0, 0.92, 0.42); /* beschleunigt stark = "saugen" */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 5vw, 90px);
    background: #6d6e70;
}

/* ---------- Hintergrund: Beton (GPU-beschleunigte WebP-Kacheln statt teurem Live-feTurbulence) ---------- */
.concrete[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 56% at 50% 38%, rgba(255, 248, 235, 0.22), transparent 72%),
        url("alternative3/beton_grob.webp?v=2") 0 0 / 512px 512px repeat,
        url("alternative3/beton_fein.webp?v=2") 0 0 / 300px 300px repeat,
        linear-gradient(160deg, #8a8c90, #55575b);
    contain: strict;
    will-change: transform;
}

.vignette[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

/* ---------- Bühne ---------- */
.stage-wrap[b-lpzyg83mq6] {
    --mx: 0;
    --my: 0;
    position: relative;
    height: min(84vh, 112vw);
    margin-bottom: 5vh;
    z-index: 2;
    aspect-ratio: 1841 / 2130;
}

.puzzle-stage[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    /* Gesicht insgesamt horizontal leicht gestaucht (nur per CSS, Bilder unveraendert) */
    scale: var(--face-squeeze, 0.93) 1;
}

/* ---------- Sog im Zentrum ---------- */
.vortex[b-lpzyg83mq6] {
    position: absolute;
    left: 64.3%;
    top: 51%;
    width: 90%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(120,190,255,0.35), transparent 30%, rgba(255,210,150,0.25), transparent 60%, rgba(120,190,255,0.3), transparent);
    -webkit-mask: radial-gradient(circle, transparent 8%, #000 30%, transparent 68%);
    mask: radial-gradient(circle, transparent 8%, #000 30%, transparent 68%);
    filter: blur(10px);
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation: vortexLife-b-lpzyg83mq6 4.9s ease-in-out 0.1s forwards;
    pointer-events: none;
}

@keyframes vortexLife-b-lpzyg83mq6 {
    0%   { opacity: 0;   transform: scale(0.4) rotate(0deg); }
    20%  { opacity: 0.9; }
    80%  { opacity: 0.9; transform: scale(1)   rotate(-540deg); }
    100% { opacity: 0;   transform: scale(0.3) rotate(-760deg); }
}

/* Schockwellen beim Einrasten */
.ring[b-lpzyg83mq6] {
    position: absolute;
    left: 64.3%;
    top: 51%;
    width: 24%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 30px rgba(130,190,255,0.7), inset 0 0 30px rgba(130,190,255,0.4);
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    pointer-events: none;
    animation: ringBurst-b-lpzyg83mq6 0.9s ease-out forwards;
}
.ring.r1[b-lpzyg83mq6] { animation-delay: 1.30s; }
.ring.r2[b-lpzyg83mq6] { animation-delay: 2.40s; }
.ring.r3[b-lpzyg83mq6] { animation-delay: 3.20s; }
.ring.r4[b-lpzyg83mq6] { animation-delay: 4.30s; width: 32%; }

@keyframes ringBurst-b-lpzyg83mq6 {
    0%   { opacity: 0.9; transform: scale(0.2); }
    100% { opacity: 0;   transform: scale(3.4); }
}

/* ---------- Die vier klickbaren Teile ---------- */
.puzzle-btn[b-lpzyg83mq6] {
    --fx: 0vmax; --fy: 0vmax; --fr: 0deg;   /* Startpunkt weit weg */
    --dur: 1.2s; --delay: 0s;
    --depth: 14;                            /* Parallax-Tiefe */
    --px: -1.6%; --py: -1.2%; --pr: -1.2deg;/* Versatz der Glasplatte */
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
    animation: suckIn-b-lpzyg83mq6 var(--dur) var(--ease-suck) var(--delay) forwards;
}

/* Positionen in % der Bühne (aus den bearbeiteten Bildern berechnet) */
.puzzle-btn.tl[b-lpzyg83mq6] { left: -6.69%; top: 0; width: 71%; height: 51.41%;
    --fx: -95vmax; --fy: -70vmax; --fr: -50deg; --dur: 1.0s; --delay: 0.3s; --depth: 10; --px: -3%; --py: -3%; --pr: -2deg; }
.puzzle-btn.tr[b-lpzyg83mq6] { left: 64.31%; top: 24.55%; width: 30.36%; height: 26.85%;
    --fx: 95vmax;  --fy: -75vmax; --fr: 55deg;  --dur: 1.3s; --delay: 1.1s; --depth: 10; --px: 3%; --py: -3%; --pr: 2deg; }
.puzzle-btn.bl[b-lpzyg83mq6] { z-index: 2; left: 23.03%; top: 51.41%; width: 41.28%; height: 48.59%;
    --fx: -100vmax; --fy: 65vmax; --fr: 40deg;  --dur: 1.0s; --delay: 2.2s; --depth: 22; --px: -3%; --py: 3%; --pr: -2deg; }
.puzzle-btn.br[b-lpzyg83mq6] { z-index: 1; left: 64.31%; top: 51.41%; width: 36.07%; height: 48.59%;
    --fx: 100vmax; --fy: 70vmax; --fr: -45deg;  --dur: 1.3s; --delay: 3.0s; --depth: 22; --px: 3%; --py: 3%; --pr: 2deg; }

/* Das Zusammensaugen: Spirale nach innen, dabei immer schneller,
   unscharf bei hoher Geschwindigkeit, kurzer Aufprall am Ende. */
@keyframes suckIn-b-lpzyg83mq6 {
    0% {
        opacity: 0;
        transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(2.4);
        filter: blur(22px) brightness(1.5);
    }
    12% { opacity: 1; }
    45% {
        transform: translate(calc(var(--fx) * 0.32 + var(--fy) * 0.16), calc(var(--fy) * 0.32 - var(--fx) * 0.16))
                   rotate(calc(var(--fr) * 0.35)) scale(1.6);
        filter: blur(12px) brightness(1.25);
    }
    80% {
        opacity: 1;
        transform: translate(calc(var(--fx) * 0.05), calc(var(--fy) * 0.05)) rotate(calc(var(--fr) * 0.04)) scale(1.1);
        filter: blur(6px) brightness(1.15);
    }
    90% {
        transform: translate(0, 0) rotate(0deg) scale(0.955);   /* Einschlag: leicht gestaucht */
        filter: blur(0) brightness(1.5);
    }
    95% { transform: scale(1.015); filter: brightness(1.15); }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: none;
    }
}

.depth[b-lpzyg83mq6] {
    display: block;
    position: absolute;
    inset: 0;
    transform: translate(calc(var(--mx) * var(--depth) * 0.6px), calc(var(--my) * var(--depth) * 0.4px)) scale(var(--hs, 1));
    transition: scale 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    pointer-events: none;
}

.float[b-lpzyg83mq6] {
    display: block;
    position: absolute;
    inset: 0;
    animation: idleFloat-b-lpzyg83mq6 6s ease-in-out 5.2s infinite;
}
.puzzle-btn.tr .float[b-lpzyg83mq6] { animation-delay: 5.6s; animation-duration: 7s; }
.puzzle-btn.bl .float[b-lpzyg83mq6] { animation-delay: 5.9s; animation-duration: 6.5s; }
.puzzle-btn.br .float[b-lpzyg83mq6] { animation-delay: 6.2s; animation-duration: 7.5s; }

@keyframes idleFloat-b-lpzyg83mq6 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(0.35%, -0.8%) rotate(0.25deg); }
}

/* Glasplatte hinter dem Bildausschnitt (wie im Referenzbild leicht versetzt) */
.plate[b-lpzyg83mq6] {
    position: absolute;
    inset: -2.5%;
    transform: translate(var(--px), var(--py)) rotate(var(--pr));
    border: 1px solid rgba(215, 255, 240, 0.55);
    border-radius: 2px;
    background:
        linear-gradient(125deg, rgba(190,240,225,0.20) 0%, rgba(255,255,255,0.04) 35%, rgba(150,200,255,0.10) 100%);
    box-shadow:
        0 30px 60px rgba(0,0,0,0.38),
        inset 0 0 0 1px rgba(255,255,255,0.10),
        inset 2px 2px 0 rgba(255,255,255,0.25),
        inset -2px -2px 0 rgba(120,190,170,0.25);
    opacity: 0;
    animation: plateIn-b-lpzyg83mq6 0.7s ease-out forwards;
    pointer-events: none;
}
.puzzle-btn.tl .plate[b-lpzyg83mq6] { animation-delay: 1.30s; }
.puzzle-btn.tr .plate[b-lpzyg83mq6] { animation-delay: 2.40s; }
/* Schemenhafte Motive hinter dem Glas (je Design): NERD = Diagonale mit Band, RainerOS = Retro-Fenster, STANDARD = Noir/Beton, BUSINESS = Messing-Raster.
   Halbtransparent, damit der Hintergrund der Seite durchscheint; die Platte behält ihren normalen Glasverlauf. */
.puzzle-btn.tl .plate[b-lpzyg83mq6]::before,
.puzzle-btn.tr .plate[b-lpzyg83mq6]::before,
.puzzle-btn.bl .plate[b-lpzyg83mq6]::before,
.puzzle-btn.br .plate[b-lpzyg83mq6]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    opacity: 0.42;
    pointer-events: none;
}
.puzzle-btn.tl .plate[b-lpzyg83mq6]::before { background-image: url('images/kachel/motiv_tl.webp'); }
.puzzle-btn.tr .plate[b-lpzyg83mq6]::before { background-image: url('images/kachel/motiv_tr.webp'); }
.puzzle-btn.bl .plate[b-lpzyg83mq6]::before { background-image: url('images/kachel/motiv_bl.webp'); }
.puzzle-btn.br .plate[b-lpzyg83mq6]::before { background-image: url('images/kachel/motiv_br.webp'); }
.puzzle-btn.bl .plate[b-lpzyg83mq6] { animation-delay: 3.20s; }
.puzzle-btn.br .plate[b-lpzyg83mq6] { animation-delay: 4.30s; }

@keyframes plateIn-b-lpzyg83mq6 {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.img-mask-wrapper[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    will-change: filter;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
    transition: filter 0.25s ease;
}

.puzzle-btn img[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    filter: var(--tone, brightness(1));
    transition: filter 0.3s ease, scale 0.3s ease;
}

/* Lichtreflex, der ueber die Glasflaeche wandert (folgt der Bildform per Maske) */
.sheen[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
    background-size: 280% 100%;
    background-position: 130% 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    animation: sheenSweep-b-lpzyg83mq6 1.3s ease-in-out forwards;
}
.puzzle-btn.tl .sheen[b-lpzyg83mq6] { animation-delay: 1.35s; }
.puzzle-btn.tr .sheen[b-lpzyg83mq6] { animation-delay: 2.45s; }
.puzzle-btn.bl .sheen[b-lpzyg83mq6] { animation-delay: 3.25s; }
.puzzle-btn.br .sheen[b-lpzyg83mq6] { animation-delay: 4.35s; }

@keyframes sheenSweep-b-lpzyg83mq6 {
    0%   { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

/* Beschriftung beim Hover */
.piece-label[b-lpzyg83mq6] {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translate(-50%, 10px);
    padding: 8px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.8rem, 1.6vmin, 1.15rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 20, 40, 0.55);
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(6px);
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.puzzle-btn.tr .piece-label[b-lpzyg83mq6] { bottom: 14%; }
.puzzle-btn.tl .piece-label[b-lpzyg83mq6] { left: 70%; bottom: 8%; }

/* ---------- Hover / Fokus / Klick ---------- */
.puzzle-btn:hover[b-lpzyg83mq6], .puzzle-btn:focus-visible[b-lpzyg83mq6] {
    --hs: 1.02;
    z-index: 25 !important;
}
.puzzle-btn:hover img[b-lpzyg83mq6], .puzzle-btn:focus-visible img[b-lpzyg83mq6] {
    filter: var(--tone, brightness(1)) brightness(1.08) saturate(1.1);
}
.puzzle-btn:hover .img-mask-wrapper[b-lpzyg83mq6], .puzzle-btn:focus-visible .img-mask-wrapper[b-lpzyg83mq6] {
    filter: drop-shadow(0 0 14px var(--glow, rgba(120,190,255,0.85))) drop-shadow(0 14px 24px rgba(0,0,0,0.45));
}
.puzzle-btn:hover .plate[b-lpzyg83mq6], .puzzle-btn:focus-visible .plate[b-lpzyg83mq6] {
    border-color: rgba(255,255,255,0.95);
    box-shadow: 0 0 40px var(--glow-soft, rgba(120,190,255,0.55)), 0 30px 60px rgba(0,0,0,0.4), inset 0 0 30px var(--glow-soft, rgba(180,230,255,0.25));
}
.puzzle-btn:hover .piece-label[b-lpzyg83mq6], .puzzle-btn:focus-visible .piece-label[b-lpzyg83mq6] {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* HOMEPAGE (bl): feste Beschriftung als aufgeklebter Kreppband-Streifen mit Filzstift-Schrift (Collage-Look, passend zum Foto, ohne Effekte) */
.puzzle-btn.bl .piece-label[b-lpzyg83mq6],
.puzzle-btn.bl:hover .piece-label[b-lpzyg83mq6],
.puzzle-btn.bl:focus-visible .piece-label[b-lpzyg83mq6] {
    left: 34%;
    bottom: 9%;
    transform: translate(-50%, 0) rotate(-3deg);
    opacity: 1;
    padding: 0.5em 1.6em 0.55em;
    font-family: 'Segoe Print', 'Bradley Hand ITC', 'Comic Sans MS', 'Segoe UI', cursive;
    font-size: clamp(1.05rem, 1.9vmin, 1.45rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #191714;
    text-shadow: none;
    background:
        repeating-linear-gradient(90deg, rgba(120, 100, 60, 0.07) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #ece4cf 0%, #ddd3b9 100%);
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 100% 0, 98% 22%, 100% 45%, 97% 70%, 100% 100%, 8% 100%, 5% 88%, 3% 100%, 0 92%, 2% 50%);
    box-shadow: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    transition: none;
}

/* NERD: feste Beschriftung als Badge, gerade, auf dem Motiv (immer sichtbar, kein Hover-Effekt) */
.puzzle-btn.tl .piece-label[b-lpzyg83mq6],
.puzzle-btn.tl:hover .piece-label[b-lpzyg83mq6],
.puzzle-btn.tl:focus-visible .piece-label[b-lpzyg83mq6] {
    left: 30%;
    bottom: 22%;
    transform: translate(-50%, 50%);
    opacity: 1;
    padding: 0.42em 1.3em 0.42em 1em;
    font-family: 'Arial Black', 'Segoe UI Black', Impact, sans-serif;
    font-size: clamp(1.15rem, 2.1vmin, 1.6rem);
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1;
    color: #fff;
    background: #0a0a0c;
    border: 0;
    border-left: 8px solid #ff2614;
    backdrop-filter: none;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
    transition: none;
}
.puzzle-btn.tl .piece-label[b-lpzyg83mq6]::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: #ff2614;
}

/* RainerOS: fester Schriftzug wie auf dem Boot-Bildschirm (ohne Flagge, kleines „RainerSoft“, „Rainer“ fett schwarz + „OS“ schlank weiß,
   „Internet Edition“); sitzt oben rechts im Kachel-Motiv und ragt ein Stück über die Glatze */
.puzzle-btn.tr .piece-label[b-lpzyg83mq6],
.puzzle-btn.tr:hover .piece-label[b-lpzyg83mq6],
.puzzle-btn.tr:focus-visible .piece-label[b-lpzyg83mq6] {
    left: 64%;
    top: 36%;
    bottom: auto;
    transform: translate(-50%, -50%);
    opacity: 1;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(0.9rem, 1.95vmin, 1.55rem);
    transition: none;
}
.os-logo[b-lpzyg83mq6] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 4px 8px rgba(0, 20, 50, 0.45));
}
.os-titel[b-lpzyg83mq6] { display: inline-flex; flex-direction: column; align-items: stretch; }
.os-rs[b-lpzyg83mq6] {
    align-self: flex-start;
    margin: 0 0 -0.25em 0.1em;
    font-family: 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.7em;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 40, 90, 0.7);
    line-height: 1;
}
.os-zeile[b-lpzyg83mq6] { display: flex; align-items: baseline; justify-content: center; gap: 0.1em; }
.os-rainer[b-lpzyg83mq6] {
    font-family: 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: #050505;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
    line-height: 1;
}
.os-os[b-lpzyg83mq6] {
    font-family: 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-style: normal;
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 0 1px #000, 0 0 3px rgba(0, 0, 0, 0.55);
    line-height: 1;
}
.os-edition[b-lpzyg83mq6] {
    margin-top: -0.1em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #050505;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
    line-height: 1.1;
}

/* 3D-Wohnung (br): Beschriftung immer sichtbar, ohne eigenen Hovereffekt */
.puzzle-btn.br .piece-label[b-lpzyg83mq6],
.puzzle-btn.br:hover .piece-label[b-lpzyg83mq6],
.puzzle-btn.br:focus-visible .piece-label[b-lpzyg83mq6] {
    left: 50%;
    bottom: 8%;
    transform: translate(-50%, 0);
    opacity: 1;
    transition: none;
    border-radius: 4px;
}
.puzzle-btn.br.wohn-laedt .piece-label[b-lpzyg83mq6] {
    opacity: 1;
    transform: translate(-50%, 0);
}
.puzzle-btn.br .wohn-lade[b-lpzyg83mq6] {
    display: block;
    height: 3px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
}
.puzzle-btn.br .wohn-lade-fill[b-lpzyg83mq6] {
    display: block;
    height: 100%;
    background: #fff;
    transition: width 0.25s ease;
}
.puzzle-btn.br .wohn-prozent[b-lpzyg83mq6] {
    display: block;
    font-size: 0.65em;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 2px;
}

/* Prüfungsvorbereitung-Knopf (statt „Raum betreten“): kühles Blau */
.alt5-glass-btn.pv-btn.laedt[b-lpzyg83mq6] {
    border-color: #38bdf8;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.45);
}
.alt5-glass-btn.pv-btn .alt5-glass-fill[b-lpzyg83mq6] {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.45));
}
.alt5-glass-btn.pv-btn:hover[b-lpzyg83mq6] {
    border-color: #38bdf8;
}
.puzzle-btn:active[b-lpzyg83mq6] { --hs: 0.985; }

.puzzle-btn.clicked .float[b-lpzyg83mq6] { animation: clickPulse-b-lpzyg83mq6 0.55s ease-in forwards; }
.puzzle-stage:has(.clicked) .puzzle-btn:not(.clicked)[b-lpzyg83mq6] {
    opacity: 0.3;
    filter: blur(3px) grayscale(0.6);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Hero-Morphing Übergang: Kachel wird von Klon übernommen */
.puzzle-btn.morph-source[b-lpzyg83mq6] {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Rest der Startseite löst sich elegant im Hintergrund auf */
.animation-container.morphing-active .puzzle-btn:not(.morph-source)[b-lpzyg83mq6] {
    opacity: 0 !important;
    filter: blur(12px) grayscale(0.6) !important;
    transform: scale(0.9) !important;
    transition: opacity 0.45s ease-out, filter 0.45s ease-out, transform 0.45s ease-out !important;
}

.animation-container.morphing-active .intro[b-lpzyg83mq6],
.animation-container.morphing-active .intro-sub[b-lpzyg83mq6],
.animation-container.morphing-active .intro-alt5-wrap[b-lpzyg83mq6],
.animation-container.morphing-active .vortex[b-lpzyg83mq6],
.animation-container.morphing-active .ring[b-lpzyg83mq6],
.animation-container.morphing-active .start-footer-bar[b-lpzyg83mq6] {
    opacity: 0 !important;
    filter: blur(8px) !important;
    transition: opacity 0.4s ease-out, filter 0.4s ease-out !important;
}

@keyframes clickPulse-b-lpzyg83mq6 {
    0%   { transform: scale(1);    filter: brightness(1); }
    35%  { transform: scale(1.08); filter: brightness(1.6) saturate(1.3); }
    100% { transform: scale(1.4);  filter: brightness(2.2) blur(8px); opacity: 0; }
}

/* ---------- Finaler Lichtblitz, wenn alles sitzt ---------- */
.final-flash[b-lpzyg83mq6] {
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.65), transparent 60%);
    opacity: 0;
    pointer-events: none;
    animation: finalFlash-b-lpzyg83mq6 1.2s ease-out 4.4s forwards;
}
@keyframes finalFlash-b-lpzyg83mq6 {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Startseiten-Intro: Name + Frage ---------- */
.intro[b-lpzyg83mq6] {
    position: relative;
    z-index: 3;
    width: max-content;
    max-width: 44vw;
    margin-bottom: 5vh;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.intro > *[b-lpzyg83mq6] { opacity: 0; animation: introIn-b-lpzyg83mq6 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
.intro-kicker[b-lpzyg83mq6] {
    margin: 0 0 14px;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    animation-delay: 0.2s !important;
}
.intro-name[b-lpzyg83mq6] {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 0.95;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    animation-delay: 0.45s !important;
}
.intro-name .first[b-lpzyg83mq6] {
    font-weight: 200;
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    letter-spacing: 0.18em;
}
.intro-name .last[b-lpzyg83mq6] {
    font-weight: 800;
    font-size: clamp(2rem, 3.8vw, 4.2rem);
    letter-spacing: 0.04em;
    width: max-content;
    padding-right: 0.1em;
    white-space: nowrap;
    background: linear-gradient(100deg, #fff 30%, #bcd8ff 60%, #fff 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,0.5));
    animation: nameShine-b-lpzyg83mq6 5s ease-in-out 1.5s infinite;
}
@keyframes nameShine-b-lpzyg83mq6 { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.intro-line[b-lpzyg83mq6] {
    width: 0;
    height: 3px;
    margin: 22px 0;
    background: linear-gradient(90deg, #7ab8ff, rgba(255,255,255,0.9));
    box-shadow: 0 0 14px rgba(122,184,255,0.8);
    opacity: 1 !important;
    animation: lineGrow-b-lpzyg83mq6 1.1s ease-out 0.9s forwards !important;
}
@keyframes lineGrow-b-lpzyg83mq6 { to { width: min(22vw, 260px); } }

/* Frage erscheint erst, wenn das Gesicht zusammengesetzt ist */
.intro-question[b-lpzyg83mq6] {
    margin: 0 0 12px;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 2.3rem);
    font-weight: 600;
    animation-delay: 4.6s !important;
}
.intro-sub[b-lpzyg83mq6] {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    line-height: 1.7;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.88);
    animation-delay: 5.1s !important;
}

/* ---------- Neuer Einladungs-Block Alternative 5 (Desktop) ---------- */
.intro-alt5-wrap[b-lpzyg83mq6] {
    margin: 14px 0 0;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    gap: 12px;
    animation: introIn-b-lpzyg83mq6 0.9s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: 5.1s !important;
    opacity: 0;
}

.intro-buttons-row[b-lpzyg83mq6] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.intro-3d-btn[b-lpzyg83mq6] {
    border-color: rgba(56, 189, 248, 0.45);
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0.08) 50%, rgba(0, 0, 0, 0.25) 100%),
        linear-gradient(to bottom, rgba(56, 189, 248, 0.15), rgba(0, 0, 0, 0.3));
    color: #e0f2fe;
}

.intro-3d-btn:hover[b-lpzyg83mq6] {
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.55), inset 0 0 14px rgba(56, 189, 248, 0.3);
    transform: translateY(-2px);
}

.intro-fill[b-lpzyg83mq6] {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.45), rgba(14, 165, 233, 0.75)) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.75) !important;
}

.intro-3d-btn.laedt[b-lpzyg83mq6] {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.45) !important;
    cursor: wait !important;
}

.intro-3d-btn.ist-bereit[b-lpzyg83mq6] {
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    animation: introBereitPuls-b-lpzyg83mq6 2.2s infinite ease-in-out !important;
}

@keyframes introBereitPuls-b-lpzyg83mq6 {
    0%, 100% {
        box-shadow:
            0 0 18px rgba(56, 189, 248, 0.5),
            inset 0 0 12px rgba(56, 189, 248, 0.3);
    }
    50% {
        box-shadow:
            0 0 32px rgba(56, 189, 248, 0.8),
            inset 0 0 18px rgba(56, 189, 248, 0.5);
    }
}

.intro-alt5-text[b-lpzyg83mq6] {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.88rem, 1.2vw, 1.1rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
    display: block;
    width: fit-content;
}

/* ---------- 3D-Glas-Kachel-Button im Design der Puzzle-Kacheln ---------- */
.alt5-glass-btn[b-lpzyg83mq6] {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.20) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.24));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        inset 2px 2px 0 rgba(255, 255, 255, 0.26),
        inset -2px -2px 0 rgba(120, 190, 170, 0.25);
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease,
                color 0.28s ease;
    user-select: none;
}

/* Transparenter Hintergrund ohne Bild */
.alt5-glass-plate[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    border-radius: 4px;
}

/* Diagonales Streiflicht / Glanz der Kachel (wie .sheen bei den Kacheln) */
.alt5-glass-sheen[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
    background-size: 280% 100%;
    background-position: 130% 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: background-position 0.8s ease-in-out;
}

.alt5-glass-btn:hover .alt5-glass-sheen[b-lpzyg83mq6] {
    background-position: -30% 0;
}

/* Hover-Effekt: Kachel hebt sich leicht an, Kanten leuchten */
.alt5-glass-btn:hover[b-lpzyg83mq6] {
    transform: translateY(-2.5px);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 2px 2px 0 rgba(255, 255, 255, 0.40),
        inset -2px -2px 0 rgba(251, 146, 60, 0.35),
        0 0 24px rgba(251, 146, 60, 0.35);
}

.alt5-glass-btn:active[b-lpzyg83mq6] {
    transform: translateY(-0.5px);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.4),
        inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* Lade-Fortschrittsbalken hinter dem Text */
.alt5-glass-fill[b-lpzyg83mq6] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.35), rgba(245, 158, 11, 0.65));
    box-shadow: 0 0 16px rgba(251, 146, 60, 0.7);
    pointer-events: none;
    transition: width 0.22s ease-out;
    border-radius: 4px;
}

/* Zustand: Ladevorgang aktiv */
.alt5-glass-btn.laedt[b-lpzyg83mq6] {
    border-color: #fb923c;
    box-shadow: 0 0 22px rgba(251, 146, 60, 0.45);
    cursor: wait;
}

/* Zustand: Bereit zum Betreten (Pulsierender Cyber-Glow) */
.alt5-glass-btn.ist-bereit[b-lpzyg83mq6] {
    border-color: #fb923c;
    color: #fff7ed;
    animation: alt5BereitPuls-b-lpzyg83mq6 2.2s infinite ease-in-out;
}

@keyframes alt5BereitPuls-b-lpzyg83mq6 {
    0%, 100% {
        box-shadow:
            0 0 18px rgba(251, 146, 60, 0.45),
            inset 0 0 12px rgba(251, 146, 60, 0.25),
            inset 2px 2px 0 rgba(255, 255, 255, 0.35);
    }
    50% {
        box-shadow:
            0 0 32px rgba(251, 146, 60, 0.8),
            inset 0 0 22px rgba(251, 146, 60, 0.45),
            inset 2px 2px 0 rgba(255, 255, 255, 0.55);
        border-color: #fdba74;
    }
}

.alt5-glass-label[b-lpzyg83mq6] {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.85rem, 1.15vw, 1.02rem);
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}
@keyframes introIn-b-lpzyg83mq6 {
    from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@media (max-width: 900px) {
    .animation-container[b-lpzyg83mq6] { flex-direction: column; justify-content: flex-start; gap: 0; padding-top: 4vh; }
    .intro-alt5-wrap[b-lpzyg83mq6] { display: none !important; }
    .intro[b-lpzyg83mq6] { width: auto; max-width: 95vw; text-align: center; margin: 0; }
    .intro-name[b-lpzyg83mq6] { align-items: center; font-size: clamp(2.2rem, 8vw, 3.5rem); }
    .intro-name .first[b-lpzyg83mq6] { font-weight: 300; }
    .intro-name .last[b-lpzyg83mq6] { font-weight: 800; line-height: 0.9; }
    .intro-line[b-lpzyg83mq6] { margin: 8px auto; width: 40px; }
    .intro-kicker[b-lpzyg83mq6] { margin-bottom: 4px; font-size: 0.9rem; }
    
    .intro-question[b-lpzyg83mq6] { margin-top: 0; font-size: 1rem; }
    .stage-wrap[b-lpzyg83mq6] { height: min(50vh, 90vw); margin-top: 2vh; margin-bottom: 8vh; }
}

.btn-bar[b-lpzyg83mq6] {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 100;
}

.ctl-btn[b-lpzyg83mq6] {
    background: rgba(0,0,0,0.35);
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 7px 22px;
    font-size: 0.85rem;
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}
.ctl-btn:hover[b-lpzyg83mq6] {
    background-color: #ffffff;
    color: #000000;
}


/* ---------- Komplette Flaeche klickbar ----------
   Der Button selbst faengt alle Klicks ab (inkl. Glasplatte und etwas Rand),
   die Kinder reagieren nicht selbst. Dadurch gibt es keine "toten" Stellen. */
.puzzle-btn[b-lpzyg83mq6] {
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
}
.puzzle-btn[b-lpzyg83mq6]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
}
.puzzle-btn .depth[b-lpzyg83mq6],
.puzzle-btn .float[b-lpzyg83mq6],
.puzzle-btn .plate[b-lpzyg83mq6],
.puzzle-btn img[b-lpzyg83mq6],
.puzzle-btn .sheen[b-lpzyg83mq6],
.puzzle-btn .piece-label[b-lpzyg83mq6] {
    pointer-events: none;
}


/* =====================================================================
   LOOK: "Cinematic Noir" – alle vier Kacheln teilen dieselbe Bildsprache
   (tiefe Schatten, weiches Streiflicht, Lichtkante), jede hat ihre eigene
   Akzentfarbe als Kantenlicht:
   tl = NERD          -> Cyan
   tr = RainerOS (früher Short&Stacked) -> Amber
   bl = Standard      -> reines Weiss / Schwarz
   br = BUSINESS      -> Stahlblau  (+ Name wie ins Glas geaetzt)
   ===================================================================== */
.puzzle-btn.tl[b-lpzyg83mq6] { --tone: contrast(1.1) saturate(0.9);                 --rim: rgba(0,230,255,0.85);   --glow: rgba(0,230,255,0.85);   --glow-soft: rgba(0,230,255,0.35); }
.puzzle-btn.tr[b-lpzyg83mq6] { --tone: contrast(1.1) saturate(1.0) sepia(0.08);     --rim: rgba(255,170,60,0.85);  --glow: rgba(255,170,60,0.85);  --glow-soft: rgba(255,170,60,0.35); }
.puzzle-btn.bl[b-lpzyg83mq6] { --tone: contrast(1.14) saturate(0.85);               --rim: rgba(255,255,255,0.8);  --glow: rgba(255,255,255,0.75); --glow-soft: rgba(255,255,255,0.3); }
.puzzle-btn.br[b-lpzyg83mq6] { --tone: contrast(1.08) saturate(1.0);                --rim: rgba(255,200,120,0.85); --glow: rgba(255,190,100,0.85); --glow-soft: rgba(255,180,80,0.35); }

/* Nur das Bild im Business-Button skalieren */
.puzzle-btn.br img[b-lpzyg83mq6] {
    scale: 1.1; /* HIER WERT ANPASSEN (z. B. 0.85 für noch kleiner, 1.1 für größer) */
}

.fx[b-lpzyg83mq6] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    animation: fxIn-b-lpzyg83mq6 1.4s ease forwards;
}
.fx[b-lpzyg83mq6]::before, .fx[b-lpzyg83mq6]::after { content: ""; position: absolute; inset: 0; transition: opacity 0.4s ease; }
.puzzle-btn.tl .fx[b-lpzyg83mq6] { animation-delay: 1.5s; }
.puzzle-btn.tr .fx[b-lpzyg83mq6] { animation-delay: 2.6s; }
.puzzle-btn.bl .fx[b-lpzyg83mq6] { animation-delay: 3.4s; }
.puzzle-btn.br .fx[b-lpzyg83mq6] { animation-delay: 4.5s; }
@keyframes fxIn-b-lpzyg83mq6 { to { opacity: 1; } }

/* Schatten (Vignette) – Lichtzentrum je Kachel passend zum Motiv */
.fx[b-lpzyg83mq6]::before {
    mix-blend-mode: multiply;
    background:
        radial-gradient(ellipse var(--vw, 75%) var(--vh, 62%) at var(--vx, 60%) var(--vy, 40%), rgba(0,0,0,0) 22%, rgba(0,0,0,var(--vd, 0.85)) 100%),
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,var(--vb, 0.6)) 100%);
    animation: noirBreath-b-lpzyg83mq6 9s ease-in-out infinite alternate;
}
.puzzle-btn.tl[b-lpzyg83mq6] { --vx: 48%; --vy: 42%; --vw: 85%; --vh: 75%; --vd: 0.75; --vb: 0.45; }
.puzzle-btn.tr[b-lpzyg83mq6] { --vx: 40%; --vy: 55%; --vw: 90%; --vh: 85%; --vd: 0.55; --vb: 0.35; }
.puzzle-btn.bl[b-lpzyg83mq6] { --vx: 72%; --vy: 36%; --vw: 70%; --vh: 58%; --vd: 0.95; --vb: 0.85; }
.puzzle-btn.br[b-lpzyg83mq6] { --vx: 30%; --vy: 36%; --vw: 78%; --vh: 62%; --vd: 0.8;  --vb: 0.6; }
@keyframes noirBreath-b-lpzyg83mq6 { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Kantenlicht in Akzentfarbe + wanderndes Streiflicht */
.fx[b-lpzyg83mq6]::after {
    mix-blend-mode: screen;
    background:
        linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.32) 50%, transparent 58%),
        linear-gradient(var(--ra, 90deg), var(--rim) 0%, transparent 22%);
    background-size: 300% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 130% 0, 0 0;
    opacity: 0.55;
    animation: streak-b-lpzyg83mq6 8s ease-in-out 5s infinite;
}
.puzzle-btn.tl[b-lpzyg83mq6] { --ra: 60deg; }    /* Licht von links oben */
.puzzle-btn.tr[b-lpzyg83mq6] { --ra: 230deg; }   /* von rechts oben */
.puzzle-btn.bl[b-lpzyg83mq6] { --ra: 90deg; }    /* von links */
.puzzle-btn.br[b-lpzyg83mq6] { --ra: 270deg; }   /* von rechts */
.puzzle-btn.tr .fx[b-lpzyg83mq6]::after { animation-delay: 6.2s; }
.puzzle-btn.bl .fx[b-lpzyg83mq6]::after { animation-delay: 7.4s; }
.puzzle-btn.br .fx[b-lpzyg83mq6]::after { animation-delay: 8.6s; }
@keyframes streak-b-lpzyg83mq6 { 0% { background-position: 130% 0, 0 0; } 35%, 100% { background-position: -30% 0, 0 0; } }

.puzzle-btn:hover .fx[b-lpzyg83mq6]::after { opacity: 0.9; }
.puzzle-btn:hover .fx[b-lpzyg83mq6]::before { opacity: 0.8; }

/* Der alte Glanz wird durch das Streiflicht ersetzt */
.puzzle-btn .sheen[b-lpzyg83mq6] { opacity: 0.6; }



/* Die Start-Animation (Teile fliegen ins Bild) läuft bewusst immer – auch wenn Windows/Browser „Animationen reduzieren“ meldet
   (früher schaltete eine prefers-reduced-motion-Regel sie dann komplett ab). */

/* ---------- Footer Bar (Blazor Info & Projekte) ---------- */
.start-footer-bar[b-lpzyg83mq6] {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 100;
    pointer-events: none; /* Let clicks pass through empty space */
    opacity: 0;
    animation: fadeInFooter-b-lpzyg83mq6 2s forwards;
    animation-delay: 2s;
}

.blazor-badge[b-lpzyg83mq6] {
    pointer-events: auto;
    display: inline-block;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    border-left: 4px solid #5c2d91; /* Blazor Purple */
    backdrop-filter: blur(5px);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: background 0.25s ease, transform 0.25s ease;
}

.blazor-badge:hover[b-lpzyg83mq6],
.blazor-badge:focus-visible[b-lpzyg83mq6] {
    background: rgba(0, 0, 0, 0.55);
    transform: translateY(-2px);
}

.blazor-badge strong[b-lpzyg83mq6] {
    color: #fff;
}

@keyframes fadeInFooter-b-lpzyg83mq6 {
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .start-footer-bar[b-lpzyg83mq6] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        bottom: 10px;
        width: 100%;
        left: 0;
        right: 0;
    }
    .blazor-badge[b-lpzyg83mq6] {
        text-align: center;
        border-left: none;
        border-top: 3px solid #5c2d91;
        font-size: 0.8rem;
        padding: 6px 15px;
        width: 90%;
    }
}


.mobile-only[b-lpzyg83mq6] { display: none !important; }
@media (max-width: 900px) {
    .desktop-only[b-lpzyg83mq6] { display: none !important; }
    .mobile-only[b-lpzyg83mq6] { display: block !important; }
}

/* Smartphone: Badges in den Kacheln NERD (tl) und RainerOS (tr) verkleinern, damit sie im Button bleiben */
@media (max-width: 767.98px) {
    .puzzle-btn.tl .piece-label[b-lpzyg83mq6],
    .puzzle-btn.tl:hover .piece-label[b-lpzyg83mq6],
    .puzzle-btn.tl:focus-visible .piece-label[b-lpzyg83mq6] {
        left: 24%;
        bottom: 30%;
        transform: translate(-50%, 50%) scale(0.48);
        transform-origin: center center;
    }

    .puzzle-btn.tr .piece-label[b-lpzyg83mq6],
    .puzzle-btn.tr:hover .piece-label[b-lpzyg83mq6],
    .puzzle-btn.tr:focus-visible .piece-label[b-lpzyg83mq6] {
        left: 48%;
        top: 34%;
        transform: translate(-50%, -50%) scale(0.40);
        transform-origin: center center;
    }

    .puzzle-btn.bl .piece-label[b-lpzyg83mq6],
    .puzzle-btn.bl:hover .piece-label[b-lpzyg83mq6],
    .puzzle-btn.bl:focus-visible .piece-label[b-lpzyg83mq6] {
        left: 38%;
        bottom: 9%;
        transform: translate(-50%, 0) scale(0.6);
        transform-origin: center center;
    }

    
}


/* Beim Betreten der Wohnung wird die Startseite weich unscharf und transparent (der Beton der Seite bleibt), danach schwenkt die Wohnung aus der Unschärfe herein */
.animation-container.alt5-verlassen[b-lpzyg83mq6] {
    transition: opacity 0.85s ease, filter 0.85s ease, transform 0.85s cubic-bezier(0.4, 0, 0.6, 1);
    opacity: 0;
    filter: blur(22px);
    transform: scale(1.05) translateX(-3%);
}

/* ===================================================================
   SOFORT-START: Wenn die Animation bereits 1x gelaufen ist,
   öffnet sich die Seite direkt ohne Wartezeit im fertigen Zustand.
   =================================================================== */
.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .puzzle-btn[b-lpzyg83mq6] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .plate[b-lpzyg83mq6] {
    animation: none !important;
    opacity: 1 !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .sheen[b-lpzyg83mq6] {
    display: none !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .fx[b-lpzyg83mq6] {
    animation: none !important;
    opacity: 1 !important;
}

.animation-container.anim-done .vortex[b-lpzyg83mq6],
.animation-container.anim-done .ring[b-lpzyg83mq6],
.animation-container.anim-done .final-flash[b-lpzyg83mq6] {
    display: none !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .intro > *[b-lpzyg83mq6],
.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .intro-question[b-lpzyg83mq6],
.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .intro-sub[b-lpzyg83mq6],
.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .intro-alt5-wrap[b-lpzyg83mq6] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .intro-name .last[b-lpzyg83mq6] {
    animation: nameShine-b-lpzyg83mq6 5s ease-in-out infinite !important;
    animation-delay: 0s !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .intro-line[b-lpzyg83mq6] {
    animation: none !important;
    width: min(22vw, 260px) !important;
    opacity: 1 !important;
}

.animation-container.anim-done:not(.morphing-active):not(.alt5-verlassen) .start-footer-bar[b-lpzyg83mq6] {
    animation: none !important;
    opacity: 1 !important;
}

.animation-container.anim-done .float[b-lpzyg83mq6],
.animation-container.anim-done .puzzle-btn.tr .float[b-lpzyg83mq6],
.animation-container.anim-done .puzzle-btn.bl .float[b-lpzyg83mq6],
.animation-container.anim-done .puzzle-btn.br .float[b-lpzyg83mq6] {
    animation-delay: 0s !important;
}

/* Smartphone: Fußzeile fest am unteren Rand der sichtbaren Fläche (dvh statt vh, sonst schneidet die Browserleiste sie ab) */
@media (max-width: 767.98px) {
    .animation-container[b-lpzyg83mq6] {
        height: 100dvh;
    }
    .start-footer-bar[b-lpzyg83mq6] {
        bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

/* ===================================================================
   VORLADEN DER TEXTUREN & RUCKELFREIER START
   Erst wird ausschließlich der Hintergrund dargestellt. Im Hintergrund
   werden alle Texturen geladen und im GPU-Speicher dekomprimiert.
   Sobald .anim-gestartet gesetzt wird, startet die Animation vollkommen flüssig.
   =================================================================== */

.animation-container:not(.anim-gestartet) .vortex[b-lpzyg83mq6],
.animation-container:not(.anim-gestartet) .ring[b-lpzyg83mq6],
.animation-container:not(.anim-gestartet) .puzzle-btn[b-lpzyg83mq6],
.animation-container:not(.anim-gestartet) .final-flash[b-lpzyg83mq6],
.animation-container:not(.anim-gestartet) .intro > *[b-lpzyg83mq6],
.animation-container:not(.anim-gestartet) .intro-alt5-wrap[b-lpzyg83mq6],
.animation-container:not(.anim-gestartet) .start-footer-bar[b-lpzyg83mq6] {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.animation-container:not(.anim-gestartet) .intro-line[b-lpzyg83mq6] {
    animation: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* /Pages/Auswertung.razor.rz.scp.css */
/* Prüfungs-Auswertung (Scolaris) in LemmySQL-Optik – Grundbausteine po-… in wwwroot/css/pruefung-optik.css */
.aw-seite[b-afdkfueuui] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px clamp(12px, 3vw, 30px) 32px;
}

.aw-zurueck[b-afdkfueuui] {
    align-self: flex-start;
}

.aw-spalten[b-afdkfueuui] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.aw-spalte[b-afdkfueuui] {
    flex: 1;
    min-width: 300px;
}

.aw-erstes[b-afdkfueuui] {
    margin-top: 0;
}

.aw-speichern[b-afdkfueuui] {
    min-height: 46px;
    margin-top: 18px;
}

.aw-kopf-titel[b-afdkfueuui] {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
}

/* Verlauf: Grün ab 50 %, sonst Rot (gleiche Schwelle wie bisher) */
.aw-eintrag[b-afdkfueuui] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--po-flaeche);
    border: 1px solid var(--po-linie);
    border-left: 5px solid var(--po-gruen);
    border-radius: 8px;
}

.aw-eintrag.nicht-bestanden[b-afdkfueuui] {
    border-left-color: var(--po-rot);
}

.aw-eintrag-zeile[b-afdkfueuui] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.aw-prozent[b-afdkfueuui] {
    font-weight: 700;
    color: var(--po-gruen);
}

.nicht-bestanden .aw-prozent[b-afdkfueuui] {
    color: var(--po-rot);
}

.aw-punkte[b-afdkfueuui] {
    font-size: 0.88rem;
    color: var(--po-text-3);
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .aw-seite[b-afdkfueuui] {
        padding: 12px 12px 24px;
    }

    .aw-spalte[b-afdkfueuui] {
        min-width: 100%;
    }
}
/* /Pages/Biebpardy.razor.rz.scp.css */
/* Scoped styles for Biebpardy.razor */
/* /Pages/DbEntries.razor.rz.scp.css */
/* DB-Einträge (Scolaris) in LemmySQL-Optik – Grundbausteine po-… in wwwroot/css/pruefung-optik.css */
.db-entries-wrapper[b-o3ynrnpgo6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100vh;
    height: 100dvh;
    padding: 20px clamp(12px, 3vw, 30px) 32px;
    overflow-y: auto;
}

.db-entries-wrapper > *[b-o3ynrnpgo6] {
    width: 100%;
    max-width: 1060px;
    margin-inline: auto;
}

.db-zurueck[b-o3ynrnpgo6] {
    align-self: flex-start;
    width: auto;
    margin-inline: max(0px, calc((100% - 1060px) / 2));
}

.db-filter-label[b-o3ynrnpgo6] {
    margin-top: 0;
}

.db-filter[b-o3ynrnpgo6] {
    max-width: 360px;
    margin-bottom: 18px;
}

.db-gruppen[b-o3ynrnpgo6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-gruppe[b-o3ynrnpgo6] {
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid var(--po-akzent-rand);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.db-gruppe:hover[b-o3ynrnpgo6] {
    border-color: var(--po-akzent);
}

.db-gruppe.offen[b-o3ynrnpgo6] {
    border-color: var(--po-akzent);
    background: rgba(251, 191, 36, 0.08);
    box-shadow: inset 3px 0 0 var(--po-akzent);
}

.db-gruppe-zeile[b-o3ynrnpgo6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.db-gruppe-titel[b-o3ynrnpgo6] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--po-akzent);
}

.db-anzahl[b-o3ynrnpgo6] {
    font-weight: 500;
    color: var(--po-text-2);
}

.db-gruppe-aktionen[b-o3ynrnpgo6] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.db-aendern[b-o3ynrnpgo6] {
    color: var(--po-akzent);
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(245, 158, 11, 0.12);
}

.db-pfeil[b-o3ynrnpgo6] {
    color: var(--po-akzent);
}

.db-eintraege[b-o3ynrnpgo6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 18px;
    padding-left: 14px;
    border-left: 2px solid var(--po-akzent-rand);
}

.db-eintrag[b-o3ynrnpgo6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--po-flaeche);
    border: 1px solid var(--po-linie);
    border-radius: 8px;
}

.db-werte[b-o3ynrnpgo6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.db-schluessel[b-o3ynrnpgo6] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--po-text-3);
}

.db-schluessel:not(:first-child)[b-o3ynrnpgo6] {
    margin-left: 10px;
}

.db-wert[b-o3ynrnpgo6] {
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    color: var(--po-text);
}

.db-eintrag-aktionen[b-o3ynrnpgo6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .db-entries-wrapper[b-o3ynrnpgo6] {
        padding: 12px 12px 24px;
    }

    .db-eintraege[b-o3ynrnpgo6] {
        margin-left: 4px;
        padding-left: 10px;
    }

    .db-eintrag-aktionen[b-o3ynrnpgo6] {
        width: 100%;
    }

    .db-eintrag-aktionen .po-knopf[b-o3ynrnpgo6] {
        flex: 1;
    }
}
/* /Pages/DbEntryDetail.razor.rz.scp.css */
/* Frage-Details (Scolaris) in LemmySQL-Optik – Grundbausteine po-… in wwwroot/css/pruefung-optik.css */
.detail-seite[b-ovrsjjsjzv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px clamp(12px, 3vw, 30px) 32px;
}

.detail-aktionen[b-ovrsjjsjzv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.detail-knoepfe[b-ovrsjjsjzv] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-id[b-ovrsjjsjzv] {
    padding: 4px 10px;
    border: 1px solid var(--po-linie-2);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--po-text-2);
}

.detail-spalten[b-ovrsjjsjzv] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.detail-spalte[b-ovrsjjsjzv] {
    flex: 1;
    min-width: 300px;
}

.detail-mitte[b-ovrsjjsjzv] {
    text-align: center;
}

/* Prüfungsbilder auf weißem Grund, damit Scans lesbar bleiben */
.detail-bild[b-ovrsjjsjzv] {
    display: block;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .detail-seite[b-ovrsjjsjzv] {
        padding: 12px 12px 24px;
    }

    .detail-spalte[b-ovrsjjsjzv] {
        min-width: 100%;
    }
}
/* /Pages/DigitalisierungTool.razor.rz.scp.css */
.sidebar[b-sjj7onpbcq] { display: none !important; }
    .top-row[b-sjj7onpbcq] { display: none !important; }
/* /Pages/EventDetails.razor.rz.scp.css */
.event-detail-container[b-uozip98jzc] {
    width: 100%;
    min-height: 100vh;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

.event-content-wrapper[b-uozip98jzc] {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Hauptkasten (Hero Card): RainerOS Retro-Rahmen (analog zu BildPille Bezel) */
.event-hero-card[b-uozip98jzc] {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;
    border-radius: 18px;
    padding: 6px;
    box-sizing: border-box;
}

.event-hero-inner[b-uozip98jzc] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 12px;
    padding: clamp(1.8rem, 3.5vw, 3rem);
    box-sizing: border-box;
}

/* Header-Bereich */
.event-header-grid[b-uozip98jzc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 2rem;
}

.event-title-area[b-uozip98jzc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.event-location-badge[b-uozip98jzc] {
    margin-left: 30px;
    display: inline-block;
    color: #38bdf8;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.event-title[b-uozip98jzc] {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Datum-Pille im Retro-Bezel-Stil */
.event-time-pill[b-uozip98jzc] {
    margin-top: 10px;
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #000000;
    color: #000080;
    padding: 6px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
}

/* Rechter Bereich: Nur der Zurück-Button im RainerOS-Tasten-Look */
.event-meta-area[b-uozip98jzc] {
    display: flex;
    align-items: flex-start;
}

.btn-back-pill[b-uozip98jzc] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn-back-pill:hover[b-uozip98jzc] {
        background: #dfdfdf;
        color: #000080;
        transform: translateY(-1px);
        box-shadow: 2px 2px 0 #000000;
    }

    .btn-back-pill:active[b-uozip98jzc] {
        border-color: #808080 #ffffff #ffffff #808080;
        box-shadow: inset 1px 1px 0 #000000;
        transform: translate(1px, 1px);
    }

/* Beschreibung im versenkten Retro-Panel */
.event-description-box[b-uozip98jzc] {
    background: rgba(10, 15, 30, 0.75);
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 8px;
    padding: 1.8rem;
    margin-bottom: 2.5rem;
}

.event-desc-text[b-uozip98jzc] {
    font-size: 1.15rem;
    color: #ffffff;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}

/* Galerie-Bereich */
.gallery-title[b-uozip98jzc] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.image-grid[b-uozip98jzc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
    margin-top: 1rem;
}

/* Bild-Wrapper mit overflow: visible für den 30% Zoom */
.image-wrapper[b-uozip98jzc] {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: visible;
    border-radius: 1.5rem;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Vorschaubild (object-fit: contain, damit nichts abgeschnitten wird) */
.protected-img[b-uozip98jzc] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hover-Effekt: 30% grösser und ploppt nach oben hinaus */
.image-wrapper:hover[b-uozip98jzc] {
    z-index: 100;
}

    .image-wrapper:hover .protected-img[b-uozip98jzc] {
        transform: scale(1.3);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.5);
        background: rgba(30, 41, 59, 0.95);
    }

.protection-overlay[b-uozip98jzc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
}

/* Responsive Anpassungen für Handys */
@media (max-width: 768px) {
    .event-detail-container[b-uozip98jzc] {
        padding: 1.5rem 1rem;
    }

    .event-hero-card[b-uozip98jzc] {
        padding: 4px;
        border-radius: 12px;
    }

    .event-hero-inner[b-uozip98jzc] {
        padding: 1.4rem 1rem;
        border-radius: 8px;
    }

    .event-header-grid[b-uozip98jzc] {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .event-title[b-uozip98jzc] {
        font-size: 1.8rem;
    }
}
/* /Pages/Events.razor.rz.scp.css */
/* =========================================================
   INTRO-VIDEO: oben auf der Seite, startet nicht automatisch
   ========================================================= */
.intro-karte[b-62b4yw33yx] {
    width: min(100%, 640px);
    margin: 0 auto clamp(1.2rem, 3vh, 2rem);
    padding: 0 0.75rem;
    box-sizing: border-box;
}

.intro-kicker[b-62b4yw33yx] {
    margin: 0 0 0.5rem 0.25rem;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #38bdf8;
    text-shadow: 1px 1px 0 #000000;
}

.intro-rahmen[b-62b4yw33yx] {
    background: #c0c0c0;
    padding: 4px;
    border-radius: 10px;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;
}

.intro-video[b-62b4yw33yx] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 42vh;
    object-fit: contain;
    background: #000000;
    border-radius: 6px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    -webkit-user-select: none;
    user-select: none;
}

/* =========================================================
   EVENTS: Liste der Foto-Pillen (BildPille) – gleicher Aufbau wie bei den Hobbies
   ========================================================= */
.events-container[b-62b4yw33yx] {
    padding: clamp(1rem, 3vh, 2rem) 0;
    width: 100%;
    box-sizing: border-box;
}

.events-list[b-62b4yw33yx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.9rem, 2.4vh, 1.6rem);
    width: 100%;
}


/* Animationen */
.slide-in-stagger[b-62b4yw33yx] {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideIn-b-62b4yw33yx 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1[b-62b4yw33yx] { animation-delay: 0.2s; }
.delay-2[b-62b4yw33yx] { animation-delay: 0.4s; }
.delay-3[b-62b4yw33yx] { animation-delay: 0.6s; }
.delay-4[b-62b4yw33yx] { animation-delay: 0.8s; }
.delay-5[b-62b4yw33yx] { animation-delay: 1.0s; }
.delay-6[b-62b4yw33yx] { animation-delay: 1.2s; }
.delay-7[b-62b4yw33yx] { animation-delay: 1.4s; }

@keyframes slideIn-b-62b4yw33yx {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* SMARTPHONE & LANDSCAPE ANPASSUNG */
@media (max-width: 768px) {
    .events-container[b-62b4yw33yx] {
        padding: 1rem 0.5rem;
    }
}
/* /Pages/Gaestebuch.razor.rz.scp.css */
/* ==========================================================================
   ROCK-POSTER THEME // SMOKY GRAY BLUR WRAPPER & ALFA SLAB FONT
   ========================================================================== */

:root[b-hjqtqm2mfx] {
    --rock-black: #050505;
    --rock-white: #f5f5f0;
    --rock-red: #cc0000;
    --rock-darkgray: #201e1e; /* Die innere Konzertplakat-Box */
    --rock-border: #ffffff;
}

[b-hjqtqm2mfx]::selection {
    background: var(--rock-red);
    color: var(--rock-white);
}

/* Der Hauptwrapper: RainerOS Retro-Rahmen (analog zu BildPille Bezel) */
.motorhead-wrapper[b-hjqtqm2mfx] {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;
    border-radius: 14px;
    padding: 6px;
    max-width: 1400px;
    margin: 1.5rem auto;
    font-family: 'Special Elite', monospace;
    color: var(--rock-white) !important;
    box-sizing: border-box;
}

    .motorhead-wrapper *[b-hjqtqm2mfx] {
        color: inherit;
    }

/* Das Konzertplakat-Design im versenkten Innenbereich */
.concert-poster[b-hjqtqm2mfx] {
    max-width: none;
    margin: 0 auto;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 8px;
    background-color: var(--rock-darkgray);
    padding: 1rem;
    box-sizing: border-box;
    color: var(--rock-white);
}

/* Der innere Rahmen-Effekt */
.poster-inner-border[b-hjqtqm2mfx] {
    border: 2px dashed rgba(255, 255, 255, 0.4);
    padding: 1.5rem;
}

/* Header Bereich */
.poster-header[b-hjqtqm2mfx] {
    text-align: center;
    border-bottom: 5px solid var(--rock-red);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

/* Die neue, erwachsene und fette Rock-Schriftart ('Alfa Slab One') */
.band-logo-text[b-hjqtqm2mfx] {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(2.5rem, 6.5vw, 4.8rem);
    letter-spacing: 2px;
    color: var(--rock-white) !important;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 4px 4px 0px var(--rock-red);
    word-break: break-word;
}

.tour-sub[b-hjqtqm2mfx] {
    font-family: 'Special Elite', monospace;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    letter-spacing: 4px;
    color: var(--rock-red) !important;
    font-weight: bold;
    margin-top: 0.8rem;
}

.loud-divider[b-hjqtqm2mfx] {
    font-family: 'Special Elite', monospace;
    font-size: clamp(0.8rem, 1.8vw, 1.2rem);
    color: var(--rock-white) !important;
    margin-top: 1rem;
    letter-spacing: 3px;
    font-weight: bold;
}

/* Grid Layout */
.poster-grid[b-hjqtqm2mfx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.poster-section h2[b-hjqtqm2mfx] {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.5rem;
    background-color: var(--rock-red);
    color: var(--rock-white) !important;
    padding: 0.4rem 1rem;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid var(--rock-white);
    text-shadow: none;
}

/* Formular */
.rock-form[b-hjqtqm2mfx] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.rock-field label[b-hjqtqm2mfx] {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    color: var(--rock-white) !important;
    letter-spacing: 1px;
}

/* Eingabefelder: Schwarzer Text auf weißem Grund für optimale Lesbarkeit */
.rock-input[b-hjqtqm2mfx], .rock-textarea[b-hjqtqm2mfx] {
    width: 100%;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 3px solid var(--rock-border);
    padding: 0.8rem 1rem;
    font-family: 'Special Elite', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
}

    .rock-input:focus[b-hjqtqm2mfx], .rock-textarea:focus[b-hjqtqm2mfx] {
        border-color: var(--rock-red);
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: 0 0 10px rgba(204, 0, 0, 0.8);
    }

.rock-btn[b-hjqtqm2mfx] {
    background-color: var(--rock-red);
    color: var(--rock-white) !important;
    font-family: 'Alfa Slab One', serif;
    font-size: 1.6rem;
    letter-spacing: 1px;
    border: 3px solid var(--rock-white);
    padding: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.1s ease, background-color 0.1s ease;
    box-shadow: 4px 4px 0px var(--rock-white);
    margin-top: 0.5rem;
    width: 100%;
}

    .rock-btn:hover:not(:disabled)[b-hjqtqm2mfx] {
        background-color: #ff1111;
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--rock-white);
    }

    .rock-btn:disabled[b-hjqtqm2mfx] {
        background-color: #444;
        color: #888 !important;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Setlist / Log-Anzeige */
.setlist-scroll[b-hjqtqm2mfx] {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

    .setlist-scroll[b-hjqtqm2mfx]::-webkit-scrollbar {
        width: 8px;
    }

    .setlist-scroll[b-hjqtqm2mfx]::-webkit-scrollbar-track {
        background: #111111;
        border: 1px solid var(--rock-border);
    }

    .setlist-scroll[b-hjqtqm2mfx]::-webkit-scrollbar-thumb {
        background: var(--rock-red);
    }

.setlist-items[b-hjqtqm2mfx] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.gig-card[b-hjqtqm2mfx] {
    background-color: #141212;
    border: 2px solid var(--rock-white);
    border-left: 8px solid var(--rock-red);
    padding: 1rem;
    box-sizing: border-box;
    color: var(--rock-white);
}

.gig-meta[b-hjqtqm2mfx] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #ffaaaa !important;
    margin-bottom: 0.4rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.gig-author[b-hjqtqm2mfx],
.gig-author *[b-hjqtqm2mfx] {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.2rem;
    color: var(--rock-white) !important;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.gig-msg[b-hjqtqm2mfx] {
    font-size: 1.2rem;
    color: #f0f0f0 !important;
    line-height: 1.4;
    word-break: break-word;
}

/* Alerts */
.rock-alert[b-hjqtqm2mfx] {
    padding: 0.8rem;
    margin-bottom: 1.2rem;
    font-weight: bold;
    border: 3px solid;
    font-size: 1.1rem;
    box-sizing: border-box;
}

    .rock-alert.success[b-hjqtqm2mfx] {
        background-color: #0b290b;
        border-color: #22ff22;
        color: #22ff22 !important;
    }

    .rock-alert.error[b-hjqtqm2mfx] {
        background-color: #2e0808;
        border-color: var(--rock-red);
        color: #ff5555 !important;
    }

.poster-footer[b-hjqtqm2mfx] {
    text-align: center;
    margin-top: 2.5rem;
    border-top: 2px dashed #555;
    padding-top: 1rem;
    color: #cccccc !important;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* Media Queries */
@media (max-width: 900px) {
    .poster-grid[b-hjqtqm2mfx] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .motorhead-wrapper[b-hjqtqm2mfx] {
        padding: 1rem 0.5rem;
        margin: 0.5rem 0; /* Seitenrand kommt einheitlich aus dem Seiten-Layout */
    }

    .concert-poster[b-hjqtqm2mfx] {
        padding: 0.5rem;
    }

    .poster-inner-border[b-hjqtqm2mfx] {
        padding: 1rem;
    }


    .rock-privacy-box[b-hjqtqm2mfx] {
        margin: 1rem 0;
    }

    .rock-privacy-link[b-hjqtqm2mfx] {
        color: #94a3b8;
        font-size: 0.85rem;
        text-decoration: none;
        transition: all 0.2s ease;
        display: inline-block;
    }

        .rock-privacy-link:hover[b-hjqtqm2mfx] {
            color: #38bdf8;
            text-decoration: underline;
            text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
        }
}

/* ==========================================================================
   DESKTOP 1-PAGE MODE (ab 901px): Das gesamte Plakat passt ohne Scrollbalken
   in den Bildschirm. Die Setlist-Logs scrollen eigenständig im rechten Bereich.
   ========================================================================== */
@media (min-width: 901px) {
    .motorhead-wrapper[b-hjqtqm2mfx] {
        height: 100%;
        max-height: calc(100vh - var(--w95-oben, 32px) - var(--w95-unten, 40px) - 1.2rem);
        max-height: calc(100dvh - var(--w95-oben, 32px) - var(--w95-unten, 40px) - 1.2rem);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding: 5px;
        box-sizing: border-box;
    }

    .concert-poster[b-hjqtqm2mfx] {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        box-sizing: border-box;
        min-height: 0;
        overflow: hidden;
    }

    .poster-inner-border[b-hjqtqm2mfx] {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.75rem 1.25rem;
        box-sizing: border-box;
        min-height: 0;
        overflow: hidden;
    }

    .poster-header[b-hjqtqm2mfx] {
        padding-bottom: 0.5rem;
        margin-bottom: 0.65rem;
        border-bottom: 3px solid var(--rock-red);
        flex-shrink: 0;
    }

    .band-logo-text[b-hjqtqm2mfx] {
        font-size: clamp(1.8rem, 3.2vw, 2.75rem);
        line-height: 1.05;
    }

    .tour-sub[b-hjqtqm2mfx] {
        font-size: clamp(0.7rem, 1.1vw, 0.9rem);
        margin-top: 0.25rem;
        letter-spacing: 2px;
    }

    .loud-divider[b-hjqtqm2mfx] {
        font-size: clamp(0.65rem, 0.95vw, 0.8rem);
        margin-top: 0.25rem;
        letter-spacing: 1.5px;
    }

    .poster-grid[b-hjqtqm2mfx] {
        flex: 1 1 0;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        overflow: hidden;
    }

    .poster-section[b-hjqtqm2mfx] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .poster-section h2[b-hjqtqm2mfx] {
        font-size: 1.1rem;
        padding: 0.25rem 0.6rem;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .rock-form[b-hjqtqm2mfx] {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.4rem;
    }

    .rock-field[b-hjqtqm2mfx] {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }

    .rock-field-msg[b-hjqtqm2mfx] {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .rock-field label[b-hjqtqm2mfx] {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }

    .rock-input[b-hjqtqm2mfx] {
        padding: 0.4rem 0.65rem;
        font-size: 0.95rem;
    }

    .rock-textarea[b-hjqtqm2mfx] {
        flex: 1 1 0;
        min-height: 60px;
        padding: 0.4rem 0.65rem;
        font-size: 0.95rem;
        resize: none;
    }

    .rock-privacy-box[b-hjqtqm2mfx] {
        margin: 0.15rem 0 !important;
        font-size: 0.8rem;
    }

    .rock-privacy-link[b-hjqtqm2mfx] {
        color: #94a3b8;
        font-size: 0.85rem;
        text-decoration: none;
        transition: all 0.2s ease;
        display: inline-block;
    }

    .rock-privacy-link:hover[b-hjqtqm2mfx] {
        color: #38bdf8;
        text-decoration: underline;
        text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    }

    .rock-btn[b-hjqtqm2mfx] {
        font-size: 1.15rem;
        padding: 0.45rem;
        margin-top: 0.2rem;
        flex-shrink: 0;
    }

    .rock-alert[b-hjqtqm2mfx] {
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.4rem;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* Setlist Box & interner Scrollbereich */
    .setlist-box[b-hjqtqm2mfx] {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .setlist-scroll[b-hjqtqm2mfx] {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        padding-right: 0.4rem;
    }

    .setlist-items[b-hjqtqm2mfx] {
        gap: 0.65rem;
    }

    .gig-card[b-hjqtqm2mfx] {
        padding: 0.6rem 0.8rem;
    }

    .gig-meta[b-hjqtqm2mfx] {
        font-size: 0.75rem;
        margin-bottom: 0.2rem;
    }

    .gig-author[b-hjqtqm2mfx] {
        font-size: 0.95rem;
        margin-bottom: 0.2rem;
    }

    .gig-msg[b-hjqtqm2mfx] {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .poster-footer[b-hjqtqm2mfx] {
        margin-top: 0.5rem;
        padding-top: 0.35rem;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
}
/* /Pages/GamesOverview.razor.rz.scp.css */
/* Reset & Root Setup für ARCADE ROOM */
.sidebar[b-3m3htafcqr] { display: none !important; }
.top-row[b-3m3htafcqr] { display: none !important; }

html[b-3m3htafcqr], body[b-3m3htafcqr] {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: #05020c !important;
    font-family: 'Press Start 2P', 'VT323', monospace;
    -webkit-font-smoothing: antialiased;
}

.page[b-3m3htafcqr], main[b-3m3htafcqr], article.content[b-3m3htafcqr] {
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    max-width: 100% !important;
}

/* Gesamter Bildschirm-Container */
.arcade-screen[b-3m3htafcqr] {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: radial-gradient(circle at 50% 25%, #1d0f38 0%, #0d061c 55%, #05020c 100%);
    overflow: hidden;
    user-select: none;
}

/* CRT Scanlines & Ambient Mood */
.arcade-scanlines[b-3m3htafcqr] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.28) 50%,
        rgba(0, 0, 0, 0.28)
    );
    background-size: 100% 4px;
    opacity: 0.75;
}

.arcade-ambient-light[b-3m3htafcqr] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 350px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 0, 128, 0.18) 0%, rgba(0, 240, 255, 0.12) 40%, transparent 80%);
    pointer-events: none;
    z-index: 1;
}

/* Oberste Leiste (Header / Nav) */
.arcade-topbar[b-3m3htafcqr] {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    background: linear-gradient(180deg, rgba(10, 4, 22, 0.95) 0%, rgba(10, 4, 22, 0.6) 80%, transparent 100%);
    border-bottom: 1px solid rgba(255, 0, 128, 0.25);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}

.arcade-back-btn[b-3m3htafcqr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0d0618;
    color: #00f0ff;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    padding: 10px 18px;
    border: 2px solid #00f0ff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4), inset 0 0 6px rgba(0, 240, 255, 0.2);
    transition: all 0.2s ease;
}

.arcade-back-btn:hover[b-3m3htafcqr] {
    background: #00f0ff;
    color: #05020c;
    transform: translate(-2px, -2px);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.8), 3px 3px 0 #ff007f;
}

.btn-arrow[b-3m3htafcqr] {
    font-size: 12px;
}

.arcade-branding[b-3m3htafcqr] {
    text-align: center;
}

.arcade-title[b-3m3htafcqr] {
    margin: 0;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(18px, 2.8vw, 30px);
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 
        0 0 8px #ff007f, 
        0 0 18px #ff007f, 
        0 0 32px #ff007f,
        3px 3px 0 #00f0ff;
    animation: neonPulse-b-3m3htafcqr 3s infinite alternate ease-in-out;
}

@keyframes neonPulse-b-3m3htafcqr {
    0% {
        text-shadow: 0 0 8px #ff007f, 0 0 16px #ff007f, 0 0 28px #ff007f, 3px 3px 0 #00f0ff;
    }
    100% {
        text-shadow: 0 0 12px #ff00a0, 0 0 24px #ff00a0, 0 0 45px #ff00a0, -3px -3px 0 #00f0ff;
    }
}

.arcade-subtitle[b-3m3htafcqr] {
    margin: 6px 0 0;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(8px, 0.85vw, 11px);
    color: #00ffcc;
    text-shadow: 0 0 6px rgba(0, 255, 204, 0.6);
    letter-spacing: 1px;
}

.arcade-top-status[b-3m3htafcqr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.arcade-coin-badge[b-3m3htafcqr] {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #ffe600;
    background: rgba(255, 230, 0, 0.12);
    border: 1px solid #ffe600;
    padding: 6px 12px;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(255, 230, 0, 0.8);
    box-shadow: 0 0 10px rgba(255, 230, 0, 0.3);
    animation: coinBlink-b-3m3htafcqr 1.4s infinite steps(2, start);
}

@keyframes coinBlink-b-3m3htafcqr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.arcade-free-play[b-3m3htafcqr] {
    font-size: 9px;
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
    letter-spacing: 1px;
}

/* 3D Perspektiv-Gitterboden */
.arcade-stage-floor[b-3m3htafcqr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44%;
    perspective: 320px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.floor-grid[b-3m3htafcqr] {
    position: absolute;
    inset: -20% -40%;
    transform: rotateX(62deg);
    transform-origin: bottom center;
    background-image: 
        linear-gradient(rgba(0, 240, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 128, 0.25) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 98%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 98%);
}

.floor-glow[b-3m3htafcqr] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 0, 128, 0.22) 0%, rgba(0, 240, 255, 0.12) 50%, transparent 80%);
}

/* Hauptbühne mit den 6 Automaten */
.arcade-lineup-stage[b-3m3htafcqr] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 16px 22px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ff007f rgba(13, 6, 28, 0.8);
}

.arcade-lineup-stage[b-3m3htafcqr]::-webkit-scrollbar {
    height: 8px;
}
.arcade-lineup-stage[b-3m3htafcqr]::-webkit-scrollbar-track {
    background: rgba(13, 6, 28, 0.8);
}
.arcade-lineup-stage[b-3m3htafcqr]::-webkit-scrollbar-thumb {
    background: #ff007f;
    border-radius: 4px;
}

.arcade-lineup[b-3m3htafcqr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(6px, 1.2vw, 18px);
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

/* Einzelner Automat */
.arcade-unit[b-3m3htafcqr] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    outline: none;
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28), filter 0.25s ease;
    flex: 0 1 auto;
}

.arcade-unit:hover[b-3m3htafcqr],
.arcade-unit:focus-visible[b-3m3htafcqr] {
    transform: translateY(-16px) scale(1.035);
}

/* Bild des Automaten */
.unit-cabinet-wrap[b-3m3htafcqr] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 3;
}

.unit-img[b-3m3htafcqr] {
    height: clamp(260px, 49vh, 460px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.85));
    transition: filter 0.25s ease;
}

/* Individueller Neon-Glow pro Automat bei Hover */
.unit-lemweep:hover .unit-img[b-3m3htafcqr],
.unit-lemweep:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #ff8c00) drop-shadow(0 0 35px rgba(255, 140, 0, 0.55)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-catchme:hover .unit-img[b-3m3htafcqr],
.unit-catchme:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #00e5ff) drop-shadow(0 0 35px rgba(0, 229, 255, 0.55)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-zoomies:hover .unit-img[b-3m3htafcqr],
.unit-zoomies:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #ff00aa) drop-shadow(0 0 35px rgba(255, 0, 170, 0.55)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-klominer:hover .unit-img[b-3m3htafcqr],
.unit-klominer:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #f59e0b) drop-shadow(0 0 35px rgba(245, 158, 11, 0.6)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-lemmycasino:hover .unit-img[b-3m3htafcqr],
.unit-lemmycasino:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 35px rgba(255, 215, 0, 0.55)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-pandaluck:hover .unit-img[b-3m3htafcqr],
.unit-pandaluck:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #00ff88) drop-shadow(0 0 35px rgba(0, 255, 136, 0.55)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-biebpardy:hover .unit-img[b-3m3htafcqr],
.unit-biebpardy:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #ff7700) drop-shadow(0 0 35px rgba(255, 119, 0, 0.6)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

.unit-highscores:hover .unit-img[b-3m3htafcqr],
.unit-highscores:focus-visible .unit-img[b-3m3htafcqr] {
    filter: drop-shadow(0 0 16px #b845ff) drop-shadow(0 0 35px rgba(184, 69, 255, 0.55)) drop-shadow(0 15px 22px rgba(0, 0, 0, 0.95));
}

/* Sockel-Label & Start-Knopf unter dem Automaten */
.unit-pedestal[b-3m3htafcqr] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 4;
    width: 100%;
}

.pedestal-name[b-3m3htafcqr] {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(9px, 0.9vw, 12px);
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    white-space: nowrap;
}

.pedestal-sub[b-3m3htafcqr] {
    font-size: clamp(7px, 0.75vw, 9px);
    color: #8f92ad;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pedestal-play-btn[b-3m3htafcqr] {
    margin-top: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(8px, 0.75vw, 10px);
    padding: 6px 12px;
    border: 2px solid #332052;
    border-radius: 4px;
    background: #110722;
    color: #ffe600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.arcade-unit:hover .pedestal-play-btn[b-3m3htafcqr],
.arcade-unit:focus-visible .pedestal-play-btn[b-3m3htafcqr] {
    border-color: #ffe600;
    background: #ffe600;
    color: #05020c;
    box-shadow: 0 0 14px rgba(255, 230, 0, 0.8), 2px 2px 0 #ff007f;
    transform: translateY(-2px);
}

.unit-biebpardy:hover .pedestal-play-btn[b-3m3htafcqr],
.unit-biebpardy:focus-visible .pedestal-play-btn[b-3m3htafcqr] {
    border-color: #ff8800;
    background: #ff8800;
    color: #05020c;
    box-shadow: 0 0 14px rgba(255, 136, 0, 0.85), 2px 2px 0 #8b4513;
}

/* Bodenschatten-Ellipse */
.unit-floor-shadow[b-3m3htafcqr] {
    position: absolute;
    bottom: 34px;
    width: 85%;
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, transparent 75%);
    border-radius: 50%;
    z-index: 1;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.arcade-unit:hover .unit-floor-shadow[b-3m3htafcqr],
.arcade-unit:focus-visible .unit-floor-shadow[b-3m3htafcqr] {
    transform: scale(1.15) translateY(4px);
    opacity: 0.65;
}

/* Floating Game Window Modal */
.arcade-modal-backdrop[b-3m3htafcqr] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(5, 2, 12, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    animation: modalFadeIn-b-3m3htafcqr 0.2s ease-out;
}

@keyframes modalFadeIn-b-3m3htafcqr {
    from { opacity: 0; }
    to { opacity: 1; }
}

.arcade-modal-container[b-3m3htafcqr] {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    max-height: 94vh;
    border-radius: 8px;
    box-shadow: 
        0 0 35px rgba(255, 0, 128, 0.45),
        0 0 70px rgba(0, 240, 255, 0.25),
        0 20px 50px rgba(0, 0, 0, 0.9);
    border: 3px solid #ff007f;
    background: #080314;
    overflow: hidden;
    animation: modalPopIn-b-3m3htafcqr 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes modalPopIn-b-3m3htafcqr {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.arcade-modal-bar[b-3m3htafcqr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(90deg, #1b0a33 0%, #290d4e 50%, #15062a 100%);
    border-bottom: 2px solid #ff007f;
}

.arcade-modal-title[b-3m3htafcqr] {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 1.1vw, 13px);
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
    letter-spacing: 1px;
}

.arcade-modal-close-btn[b-3m3htafcqr] {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 6px 12px;
    background: #ff0055;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.6);
    transition: all 0.15s ease;
}

.arcade-modal-close-btn:hover[b-3m3htafcqr] {
    background: #ffffff;
    color: #ff0055;
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
}

.arcade-modal-content[b-3m3htafcqr] {
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: #000000;
}

/* Responsive Anpassung für Tablets & Handys */
@media (max-width: 960px) {
    .arcade-topbar[b-3m3htafcqr] {
        padding: 10px 14px;
    }
    
    .arcade-title[b-3m3htafcqr] {
        font-size: 16px;
    }

    .arcade-subtitle[b-3m3htafcqr] {
        display: none;
    }

    .arcade-top-status[b-3m3htafcqr] {
        display: none;
    }

    .arcade-lineup-stage[b-3m3htafcqr] {
        align-items: center;
        justify-content: flex-start;
        padding: 0 20px 20px;
        scroll-snap-type: x mandatory;
    }

    .arcade-lineup[b-3m3htafcqr] {
        width: max-content;
        gap: 16px;
    }

    .arcade-unit[b-3m3htafcqr] {
        scroll-snap-align: center;
    }

    .unit-img[b-3m3htafcqr] {
        height: clamp(240px, 48vh, 360px);
    }
}
/* /Pages/Hobbies.razor.rz.scp.css */
/* Liste der Foto-Pillen (BildPille) – gleicher Aufbau wie bei den Events */
.hobbies-container[b-5fc16yxhlx] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px - var(--w95-oben, 0px) - var(--w95-unten, 0px)); /* ohne unnötigen Scrollbalken im RainerOS-Fenster */
    width: 100%;
    max-width: 100vw;
    padding: clamp(1rem, 3vh, 2rem) 0;
    box-sizing: border-box;
    overflow-x: hidden;
    touch-action: manipulation;
}

.hobbies-list[b-5fc16yxhlx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.9rem, 2.4vh, 1.6rem);
    width: 100%;
}
/* /Pages/HobbyDetail.razor.rz.scp.css */
.hobby-detail-container[b-o2mo9rmwaw] {
    width: 100%;
    min-height: 100vh;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

.hobby-content-wrapper[b-o2mo9rmwaw] {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Hauptkasten (Hero Card): RainerOS Retro-Rahmen (analog zu BildPille Bezel) */
.hobby-hero-card[b-o2mo9rmwaw] {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;
    border-radius: 18px;
    padding: 6px;
    box-sizing: border-box;
}

.hobby-hero-inner[b-o2mo9rmwaw] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 12px;
    padding: clamp(1.8rem, 3.5vw, 3rem);
    box-sizing: border-box;
}

/* Header-Bereich */
.hobby-header-grid[b-o2mo9rmwaw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 2rem;
}

.hobby-title-area[b-o2mo9rmwaw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hobby-subtitle-badge[b-o2mo9rmwaw] {
    display: inline-block;
    color: #38bdf8;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hobby-title[b-o2mo9rmwaw] {
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Datum-Pille im Retro-Bezel-Stil */
.hobby-time-pill[b-o2mo9rmwaw] {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #000000;
    color: #000080;
    padding: 6px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
}

/* Zurück-Button im RainerOS-Tasten-Look */
.btn-back-pill[b-o2mo9rmwaw] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
}

    .btn-back-pill:hover[b-o2mo9rmwaw] {
        background: #dfdfdf;
        color: #000080;
        transform: translateY(-1px);
        box-shadow: 2px 2px 0 #000000;
    }

    .btn-back-pill:active[b-o2mo9rmwaw] {
        border-color: #808080 #ffffff #ffffff #808080;
        box-shadow: inset 1px 1px 0 #000000;
        transform: translate(1px, 1px);
    }

/* Beschreibung im versenkten Retro-Panel */
.hobby-description-box[b-o2mo9rmwaw] {
    background: rgba(10, 15, 30, 0.75);
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 8px;
    padding: 1.8rem;
    margin-bottom: 2.5rem;
}

.hobby-desc-text[b-o2mo9rmwaw] {
    font-size: 1.15rem;
    color: #ffffff;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}

/* =========================================================
   DER CYBER MUSIC PLAYER
   ========================================================= */
@keyframes gradientShift-b-o2mo9rmwaw {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.cyber-player-showcase[b-o2mo9rmwaw] {
    position: relative;
    background: linear-gradient(-45deg, #0f172a, #1e3a8a, #0f172a, #0284c7);
    background-size: 400% 400%;
    animation: gradientShift-b-o2mo9rmwaw 10s ease infinite;
    border-radius: 1.5rem;
    padding: 3px;
    box-shadow: 0 15px 35px rgba(2, 132, 199, 0.3);
}

.player-inner-glow[b-o2mo9rmwaw] {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 1.4rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Equalizer */
.equalizer-container[b-o2mo9rmwaw] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
}

.eq-bar[b-o2mo9rmwaw] {
    width: 6px;
    background: #38bdf8;
    border-radius: 3px;
    animation: eqBounce-b-o2mo9rmwaw 1s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

    .eq-bar:nth-child(1)[b-o2mo9rmwaw] {
        animation-delay: 0.1s;
    }

    .eq-bar:nth-child(2)[b-o2mo9rmwaw] {
        animation-delay: 0.4s;
    }

    .eq-bar:nth-child(3)[b-o2mo9rmwaw] {
        animation-delay: 0.2s;
    }

    .eq-bar:nth-child(4)[b-o2mo9rmwaw] {
        animation-delay: 0.5s;
    }

@keyframes eqBounce-b-o2mo9rmwaw {
    0%, 100% {
        height: 10px;
    }

    50% {
        height: 35px;
    }
}

.now-playing-label[b-o2mo9rmwaw] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 2px;
    margin-bottom: 0.2rem;
    opacity: 0.8;
}

.track-title-neon[b-o2mo9rmwaw] {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.track-counter[b-o2mo9rmwaw] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.player-controls[b-o2mo9rmwaw] {
    display: flex;
    gap: 10px;
}

.btn-cyber-control[b-o2mo9rmwaw] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cyber-control.active[b-o2mo9rmwaw],
    .btn-cyber-control:hover[b-o2mo9rmwaw] {
        background: rgba(56, 189, 248, 0.2);
        border-color: #38bdf8;
        color: #38bdf8;
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
    }

.cyber-audio-element[b-o2mo9rmwaw] {
    height: 40px;
    border-radius: 50rem;
    filter: invert(90%) hue-rotate(180deg) brightness(1.2) contrast(1.1);
    opacity: 0.9;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
}

    .cyber-audio-element:hover[b-o2mo9rmwaw] {
        opacity: 1;
    }

/* =========================================================
   MEDIEN-GALERIE
   ========================================================= */
.gallery-title[b-o2mo9rmwaw] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.media-grid[b-o2mo9rmwaw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
    margin-top: 1rem;
}

.media-wrapper[b-o2mo9rmwaw] {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: visible;
    border-radius: 1.5rem;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.protected-media-img[b-o2mo9rmwaw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.protected-media-video[b-o2mo9rmwaw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    background-color: #000;
}

.media-wrapper:hover[b-o2mo9rmwaw] {
    z-index: 100;
}

    .media-wrapper:hover .protected-media-img[b-o2mo9rmwaw],
    .media-wrapper:hover .protected-media-video[b-o2mo9rmwaw] {
        transform: scale(1.3);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.5);
        background: rgba(30, 41, 59, 0.95);
    }

.protected-media-video[b-o2mo9rmwaw]::-webkit-media-controls-timeline,
.protected-media-video[b-o2mo9rmwaw]::-webkit-media-controls-time-remaining-display,
.protected-media-video[b-o2mo9rmwaw]::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

.protection-overlay[b-o2mo9rmwaw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
}

.video-wrapper .protection-overlay[b-o2mo9rmwaw] {
    display: none;
}

/* RESPONSIVE ANPASSUNGEN (BEINHALTET AUDIO-PLAYER-FIX) */
@media (max-width: 768px) {
    .hobby-detail-container[b-o2mo9rmwaw] {
        padding: 1.5rem 1rem;
    }

    .hobby-hero-card[b-o2mo9rmwaw] {
        padding: 4px;
        border-radius: 12px;
    }

    .hobby-hero-inner[b-o2mo9rmwaw] {
        padding: 1.4rem 1rem;
        border-radius: 8px;
    }

    .hobby-header-grid[b-o2mo9rmwaw] {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .hobby-title[b-o2mo9rmwaw] {
        font-size: 2.2rem;
    }

    /* PLAYER OPTIMIERUNG FÜR SMARTPHONES */
    .player-inner-glow[b-o2mo9rmwaw] {
        padding: 1.25rem 1rem !important;
    }

    .track-title-neon[b-o2mo9rmwaw] {
        font-size: 1.35rem !important;
        word-break: break-word;
    }

    .equalizer-container[b-o2mo9rmwaw] {
        width: 30px;
        height: 30px;
    }

    .player-controls[b-o2mo9rmwaw] {
        width: 100%;
        justify-content: center;
    }

    .btn-cyber-control[b-o2mo9rmwaw] {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
    }

    .cyber-audio-element[b-o2mo9rmwaw] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ========================================================
   RAINEROS RETRO DESIGN FÜR DIE HOMEPAGE (/home)
   Hintergrundfarbe: #018574 (authentisches RainerOS Teal)
   ======================================================== */

.win95-desktop[b-idj9y9th93] {
    position: relative;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    background-color: #018574 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 1.4vh, 14px) clamp(8px, 1.8vw, 18px) 38px clamp(8px, 1.8vw, 18px);
    overflow: hidden !important;
    box-sizing: border-box;
    touch-action: manipulation;
}

/* ========================================================
   DESKTOP ICONS AUF DER ARBEITSFLÄCHE
   ======================================================== */
.win95-desktop-icon-area[b-idj9y9th93] {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1;
}

.win95-desktop-icon[b-idj9y9th93] {
    width: 74px;
    background: transparent;
    border: 1px dotted transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 3px 2px;
    box-sizing: border-box;
    outline: none;
}

.win95-desktop-icon:hover[b-idj9y9th93],
.win95-desktop-icon:focus[b-idj9y9th93] {
    border-color: #ffffff;
}

.win95-desktop-icon-img[b-idj9y9th93] {
    font-size: 32px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}

.win95-desktop-icon-label[b-idj9y9th93] {
    color: #ffffff;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000;
    word-break: break-word;
    padding: 1px 4px;
    border-radius: 2px;
}

.win95-desktop-icon:active .win95-desktop-icon-label[b-idj9y9th93] {
    background: #000080;
}

/* ========================================================
   RAINEROS ANWENDUNGS-FENSTER
   ======================================================== */

/* Minimiert: Fenster ist weg, nur der Taskleisten-Eintrag bleibt (Klick darauf holt es zurück) */
.win95-window.minimiert[b-idj9y9th93] {
    display: none;
}

/* Vollbild: füllt den ganzen Desktop über der Taskleiste (32px); Taskleiste (z 100) und Katze (z 105) bleiben sichtbar */
.win95-window.maximiert[b-idj9y9th93] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 32px;
    width: auto;
    max-width: none;
    margin: 0;
    z-index: 90;
}

.win95-window.maximiert .win95-client-area[b-idj9y9th93] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Der Design-Umschalter (S/B/N/R, fest oben rechts) liegt im Vollbild über der Titelleiste:
   die Fensterknöpfe rücken deshalb links daneben */
@media (min-width: 681px) {
    .win95-window.maximiert .win95-titlebar[b-idj9y9th93] {
        padding-right: 262px;
    }
}

.win95-window[b-idj9y9th93] {
    position: relative;
    z-index: 10;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    width: 100%;
    max-width: 1060px;
    display: flex;
    flex-direction: column;
    margin: auto 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* Titelleiste (Active Navy Gradient) */
.win95-titlebar[b-idj9y9th93] {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    padding: 2px 3px 2px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    box-sizing: border-box;
}

.win95-titlebar-left[b-idj9y9th93] {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.win95-title-flag[b-idj9y9th93] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.win95-titlebar-text[b-idj9y9th93] {
    color: #ffffff;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win95-titlebar-buttons[b-idj9y9th93] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.win95-title-btn[b-idj9y9th93] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    width: 16px;
    height: 14px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    outline: none;
    color: #000000;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
}

.win95-title-btn:active[b-idj9y9th93] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

.win95-title-btn.btn-close[b-idj9y9th93] {
    font-size: 11px;
}

/* Menüleiste */
.win95-menubar[b-idj9y9th93] {
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    padding: 2px 6px;
    display: flex;
    gap: 14px;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000000;
    box-sizing: border-box;
}

.win95-menu-item[b-idj9y9th93] {
    cursor: pointer;
    padding: 1px 4px;
    /* ist jetzt ein <button> (Tastatur-bedienbar): Browser-Aussehen entfernen */
    background: transparent;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
}

.win95-menu-item:hover[b-idj9y9th93],
.win95-menu-item.aktiv[b-idj9y9th93] {
    background: #000080;
    color: #ffffff;
}

/* Aufklappmenüs der Menüleiste */
.win95-menu-wrap[b-idj9y9th93] {
    position: relative;
}

.win95-dropdown[b-idj9y9th93] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    min-width: 190px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000;
    padding: 2px;
    box-sizing: border-box;
    animation: win95MenuOpen-b-idj9y9th93 0.1s ease-out;
}

.win95-dropdown-kopf[b-idj9y9th93] {
    padding: 4px 8px 3px;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #808080;
    border-bottom: 1px solid #808080;
    box-shadow: 0 1px 0 #ffffff;
    margin-bottom: 2px;
    text-transform: none;
}

/* Fenster-Inhaltsbereich (Versenkter 3D-Rahmen) */
.win95-client-area[b-idj9y9th93] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    margin: 3px;
    padding: clamp(8px, 1.4vh, 16px) clamp(10px, 1.8vw, 20px);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Titelbereich */
.win95-header-section[b-idj9y9th93] {
    text-align: center;
    margin-bottom: clamp(6px, 1.2vh, 14px);
}

.win95-headline[b-idj9y9th93] {
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-size: clamp(1.4rem, 3.5vw, 2.3rem);
    color: #000080;
    text-shadow: 1px 1px 0 #ffffff;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.win95-subline[b-idj9y9th93] {
    font-family: Tahoma, 'MS Sans Serif', Geneva, sans-serif;
    font-size: clamp(0.82rem, 1.5vw, 0.98rem);
    color: #333333;
    margin-top: 3px;
}

/* ========================================================
   DIE UNVERÄNDERTEN 8 BUTTONS IM RASTER
   ======================================================== */
.home-buttons-grid[b-idj9y9th93] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 1.2vmin, 14px);
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    justify-items: center;
    align-items: center;
}

.home-btn-card[b-idj9y9th93] {
    position: relative;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1553 / 710;
    display: block;
    text-decoration: none;
    outline: none;
}

/* Retro 3D-Button Rahmen für die Kacheln */
.cyber-glass-inner[b-idj9y9th93] {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1553 / 710;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cyber-glass-inner img[b-idj9y9th93] {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: fill;
    border-radius: 0;
    opacity: 0.96;
}

/* Hover- & Klick-Verhalten */
.home-btn-card:hover .cyber-glass-inner[b-idj9y9th93] {
    transform: translateY(-2px);
    box-shadow: 2px 2px 0 #000000;
    border-color: #ffffff #808080 #808080 #ffffff;
}

.home-btn-card:active .cyber-glass-inner[b-idj9y9th93] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

/* ========================================================
   FENSTER-STATUSLEISTE
   ======================================================== */
.win95-statusbar[b-idj9y9th93] {
    display: flex;
    gap: 3px;
    padding: 2px 3px 3px;
    background: #c0c0c0;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: 11px;
}

.win95-sb-panel[b-idj9y9th93] {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 2px 6px;
    color: #222222;
    white-space: nowrap;
}

/* ========================================================
   RAINEROS TASKLEISTE AM UNTEREN BILDSCHIRMRAND
   ======================================================== */
.win95-taskbar[b-idj9y9th93] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    box-shadow: inset 0 1px 0 #dfdfdf;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px;
    z-index: 100;
    box-sizing: border-box;
}

/* Start-Button */
.win95-start-button[b-idj9y9th93] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    height: 24px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.08s ease;
}

.win95-start-button:active[b-idj9y9th93],
.win95-start-button.active[b-idj9y9th93] {
    border-color: #808080 #ffffff #ffffff #808080;
    background: #e0e0e0;
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 0 #000000;
}

.win95-start-logo[b-idj9y9th93] {
    width: 14px;
    height: 14px;
}

.win95-start-caption[b-idj9y9th93] {
    line-height: 1;
}

/* ========================================================
   RAINEROS STARTMENÜ (Popup über der Taskleiste)
   ======================================================== */
.win95-start-backdrop[b-idj9y9th93] {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: transparent;
}

.win95-start-menu[b-idj9y9th93] {
    position: absolute;
    bottom: 32px;
    left: 2px;
    z-index: 120;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000, 4px 4px 12px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    animation: win95MenuOpen-b-idj9y9th93 0.12s ease-out;
}

@keyframes win95MenuOpen-b-idj9y9th93 {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Vertikaler blauer Seitenstreifen "RainerOS" */
.win95-start-sidebar[b-idj9y9th93] {
    background: linear-gradient(180deg, #000080 0%, #1084d0 100%);
    width: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.win95-sidebar-text[b-idj9y9th93] {
    color: #ffffff;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.win95-sidebar-sub[b-idj9y9th93] {
    font-style: italic;
    margin-left: 2px;
    color: #c0c0c0;
}

/* Inhalt des Startmenüs rechts */
.win95-start-content[b-idj9y9th93] {
    display: flex;
    flex-direction: column;
    padding: 3px 2px;
    min-width: 210px;
    box-sizing: border-box;
}

.win95-menu-row[b-idj9y9th93] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 8px;
    text-decoration: none;
    color: #000000;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    font-size: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.05s ease, color 0.05s ease;
}

.win95-menu-row:hover[b-idj9y9th93] {
    background: #000080;
    color: #ffffff;
}

.win95-menu-icon[b-idj9y9th93] {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.win95-menu-row.win95-has-submenu[b-idj9y9th93] {
    position: relative;
}

.win95-submenu-arrow[b-idj9y9th93] {
    font-size: 9px;
    margin-left: auto;
    color: #555555;
    padding-left: 8px;
}

.win95-menu-row:hover .win95-submenu-arrow[b-idj9y9th93] {
    color: #ffffff;
}

.win95-start-submenu[b-idj9y9th93] {
    position: absolute;
    left: 100%;
    bottom: -4px;
    min-width: 190px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000, 4px 4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    padding: 3px 2px;
    z-index: 130;
    animation: win95MenuOpen-b-idj9y9th93 0.1s ease-out;
}

.win95-menu-divider[b-idj9y9th93] {
    height: 2px;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
    margin: 4px 4px;
}

.win95-menu-row.shutdown[b-idj9y9th93] {
    margin-top: 2px;
}

/* Aktives Programm in der Taskleiste */
.win95-task-list[b-idj9y9th93] {
    display: flex;
    flex: 1;
    margin: 0 6px;
    gap: 4px;
    overflow: hidden;
}

.win95-task-item[b-idj9y9th93] {
    background: #e0e0e0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #000000;
    height: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win95-task-icon[b-idj9y9th93] {
    font-size: 12px;
}

/* System Tray rechts */
.win95-systray[b-idj9y9th93] {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    color: #000000;
    height: 24px;
    box-sizing: border-box;
    white-space: nowrap;
}

.win95-tray-icon[b-idj9y9th93] {
    font-size: 11px;
}

.win95-tray-counter[b-idj9y9th93] {
    color: #000080;
    font-weight: bold;
}

.win95-tray-clock[b-idj9y9th93] {
    font-weight: bold;
}

/* ========================================================
   ANIMATIONEN (Einflug beim Desktop-Reveal)
   ======================================================== */
.system-boot-element[b-idj9y9th93] {
    opacity: 0;
    animation: win95WindowOpen-b-idj9y9th93 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pop-in[b-idj9y9th93] {
    opacity: 0;
    animation: win95ButtonPop-b-idj9y9th93 0.15s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes win95WindowOpen-b-idj9y9th93 {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes win95ButtonPop-b-idj9y9th93 {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================================
   RESPONSIVES VERHALTEN (Smartphones & kleine Höhen)
   ======================================================== */
@media (max-width: 680px) {
    .win95-desktop[b-idj9y9th93] {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        max-height: none;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
        padding: 58px 6px 42px 6px; /* oben Platz für den Design-Umschalter (am Handy oben rechts) */
        justify-content: flex-start;
        touch-action: pan-y; /* Nur vertikales Scrollen erlauben; Pinch-Zoom und horizontales Driften blockieren */
    }

    .win95-window[b-idj9y9th93] {
        order: 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        margin: 0 0 12px 0;
        touch-action: pan-y;
    }

    .home-buttons-grid[b-idj9y9th93],
    .home-btn-card[b-idj9y9th93],
    .cyber-glass-inner[b-idj9y9th93],
    .win95-desktop-icon[b-idj9y9th93],
    .win95-start-button[b-idj9y9th93],
    .win95-taskbar[b-idj9y9th93] {
        touch-action: manipulation; /* Doppeltipp-Zoom deaktivieren */
    }

    /* Desktop-Icons (Lemmys Orakel) mobil unter den Buttons / dem Hauptfenster platziert */
    .win95-desktop-icon-area[b-idj9y9th93] {
        position: static;
        order: 2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        margin: 6px auto 26px auto;
        width: 100%;
        z-index: 10;
    }

    .win95-desktop-icon[b-idj9y9th93] {
        width: 84px;
        padding: 4px 6px;
    }

    .win95-desktop-icon-img[b-idj9y9th93] {
        font-size: 36px;
        width: 42px;
        height: 42px;
        margin-bottom: 4px;
    }

    .win95-desktop-icon-label[b-idj9y9th93] {
        font-size: 11px;
    }

    /* Handy: das Fenster füllt ohnehin die Breite – "Vollbild" ändert dort nichts am Aufbau */
    .win95-window.maximiert[b-idj9y9th93] {
        position: static;
        width: 100%;
    }

    .win95-menubar[b-idj9y9th93] {
        display: none; /* Auf kleinen Smartphones Menüleiste ausblenden */
    }

    .win95-client-area[b-idj9y9th93] {
        padding: 10px 8px;
    }

    /* 2-spaltiges Grid auf Handys */
    .home-buttons-grid[b-idj9y9th93] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .win95-task-title[b-idj9y9th93] {
        display: none; /* Nur Icon in Taskleiste */
    }

    .win95-tray-counter[b-idj9y9th93] {
        display: none; /* Kleinerer Tray auf Mobilgeräten */
    }
}

@media (max-height: 520px) {
    .win95-desktop[b-idj9y9th93] {
        padding: 4px 6px 36px 6px;
    }

    .win95-client-area[b-idj9y9th93] {
        padding: 6px;
    }

    .win95-headline[b-idj9y9th93] {
        font-size: 1.2rem !important;
    }

    .win95-subline[b-idj9y9th93] {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }

    .home-buttons-grid[b-idj9y9th93] {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }
}

/* ========================================================
   16-BIT RETRO DESKTOP-KATZE (Walking & Sleeping)
   ======================================================== */
.win95-cat-walker[b-idj9y9th93] {
    position: absolute;
    bottom: 30px; /* Sitzt exakt auf der oberen Kante der 32px Taskleiste */
    left: 100vw;
    width: 48px;
    height: 48px;
    z-index: 105;
    pointer-events: auto;
    cursor: pointer;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Die Katze wird per JavaScript bewegt (hero-morph.js, initWin95Cat): läuft, bleibt stehen, springt, schläft am Start-Button ein.
   Ziel: left 75px (Handy 55px) direkt neben dem Start-Button. */

/* Sprung: die Katze hüpft nach oben und landet wieder */
.win95-cat-walker.jumping .win95-cat-sprite[b-idj9y9th93] {
    animation: catHop-b-idj9y9th93 0.85s cubic-bezier(0.3, 0, 0.45, 1);
}

@keyframes catHop-b-idj9y9th93 {
    0% { transform: translateY(0); }
    45% { transform: translateY(-46px); }
    100% { transform: translateY(0); }
}

.win95-cat-walker.sleeping[b-idj9y9th93],
.win95-cat-walker.awake[b-idj9y9th93] {
    left: 75px;
}

.win95-cat-sprite[b-idj9y9th93] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.45));
}

/* Zzz Animation beim Schlafen */
.win95-cat-zzz[b-idj9y9th93] {
    position: absolute;
    top: -10px;
    right: 2px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000000;
    opacity: 0;
    pointer-events: none;
}

.win95-cat-walker.sleeping .win95-cat-zzz[b-idj9y9th93] {
    animation: catZzzFloat-b-idj9y9th93 2.6s infinite ease-in-out;
}

@keyframes catZzzFloat-b-idj9y9th93 {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6);
    }
    40% {
        opacity: 0.95;
        transform: translate(5px, -8px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(10px, -18px) scale(1.2);
    }
}

/* Miau Sprechblase beim Klick */
.win95-cat-miau[b-idj9y9th93] {
    position: absolute;
    top: -16px;
    left: -2px;
    background: #ffffcc;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: 1px 1px 0 #000000;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.win95-cat-walker.awake .win95-cat-miau[b-idj9y9th93],
.win95-cat-walker.talk .win95-cat-miau[b-idj9y9th93] {
    opacity: 1;
}

@media (max-width: 680px) {
    .win95-cat-walker[b-idj9y9th93] {
        width: 38px;
        height: 38px;
        bottom: 30px;
    }

    .win95-cat-sprite[b-idj9y9th93] {
        width: 38px;
        height: 38px;
    }

    @keyframes catHop-b-idj9y9th93 {
        0% { transform: translateY(0); }
        45% { transform: translateY(-38px); }
        100% { transform: translateY(0); }
    }

    .win95-cat-walker.sleeping[b-idj9y9th93],
    .win95-cat-walker.awake[b-idj9y9th93] {
        left: 55px;
    }
}

/* ========================================================
   FLOATING WINDOWS (Explorer & Notepad Editor)
   ======================================================== */
.win95-floating-window[b-idj9y9th93] {
    position: fixed;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 0 #000000, 6px 6px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: win95Popup-b-idj9y9th93 0.14s ease-out;
    user-select: none;
    -webkit-user-select: none;
}

@keyframes win95Popup-b-idj9y9th93 {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dateiexplorer Dimensionen & Position */
.win95-explorer-window[b-idj9y9th93] {
    top: clamp(25px, 7vh, 55px);
    left: clamp(14px, 6vw, 65px);
    width: min(650px, 94vw);
    height: min(420px, 75vh);
    z-index: 150;
}

/* Notepad Dimensionen & leicht versetzte Position */
.win95-notepad-window[b-idj9y9th93] {
    top: clamp(45px, 12vh, 90px);
    left: clamp(24px, 10vw, 120px);
    width: min(580px, 92vw);
    height: min(400px, 72vh);
    z-index: 180;
}

/* Spielfenster: Zentriert und schwebend über dem Desktop */
.win95-game-floating-window[b-idj9y9th93] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 32px; /* Taskleiste bleibt unten frei und nutzbar */
    z-index: 10020; /* Über ThemeSlider (9999) und Arbeitsfläche */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(6px, 1.8vh, 16px) 6px;
    background: rgba(0, 0, 0, 0.62);
    /* KEIN backdrop-filter/transform hier: sonst wird dieses scrollende Fenster zum Bezugsrahmen für position: fixed
       und das Highscore-Eintragsfenster liegt am Handy außerhalb des sichtbaren Bereichs */
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    animation: win95GameFadeIn-b-idj9y9th93 0.15s ease-out;
}

@keyframes win95GameFadeIn-b-idj9y9th93 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Adressleiste im Explorer */
.win95-addressbar[b-idj9y9th93] {
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    box-sizing: border-box;
}

.win95-addr-label[b-idj9y9th93] {
    color: #444;
}

.win95-addr-input[b-idj9y9th93] {
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 2px 6px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #000;
}

.win95-addr-icon[b-idj9y9th93] {
    font-size: 13px;
}

.win95-btn-up[b-idj9y9th93] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000;
    padding: 1px 6px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.win95-btn-up:active[b-idj9y9th93] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

/* Explorer 2-Spalten Body */
.win95-explorer-body[b-idj9y9th93] {
    display: flex;
    flex: 1;
    min-height: 0;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    margin: 3px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Verzeichnisbaum links */
.win95-tree-pane[b-idj9y9th93] {
    width: 180px;
    border-right: 2px solid #c0c0c0;
    background: #ffffff;
    padding: 6px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    overflow-y: auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

.win95-tree-item[b-idj9y9th93],
.win95-tree-subitem[b-idj9y9th93] {
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.win95-tree-subitem[b-idj9y9th93] {
    padding-left: 14px;
}

.win95-tree-subitem.disabled[b-idj9y9th93] {
    cursor: default;
    opacity: 0.65;
}

.win95-tree-pane .selected-tree[b-idj9y9th93] {
    background: #000080;
    color: #ffffff;
    padding: 0 4px;
}

/* Dateiansicht rechts */
.win95-file-pane[b-idj9y9th93] {
    flex: 1;
    background: #ffffff;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 16px;
    overflow-y: auto;
    box-sizing: border-box;
}

.win95-file-item[b-idj9y9th93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 110px;
    padding: 6px 4px;
    cursor: pointer;
    border: 1px dotted transparent;
    border-radius: 2px;
}

.win95-file-item:hover[b-idj9y9th93] {
    background: #e8f0fe;
    border-color: #7090d0;
}

.win95-file-item.disabled[b-idj9y9th93] {
    cursor: default;
    opacity: 0.6;
}

.win95-file-icon[b-idj9y9th93] {
    font-size: 34px;
    line-height: 1;
}

.win95-file-name[b-idj9y9th93] {
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #000;
    margin-top: 4px;
    word-break: break-word;
}

.win95-file-type[b-idj9y9th93] {
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 9px;
    color: #777;
    margin-top: 1px;
}

/* Notepad Arbeitsbereich (Editor) */
.win95-notepad-body[b-idj9y9th93] {
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    margin: 3px;
    padding: 12px 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    user-select: text;
    -webkit-user-select: text;
}

.win95-ascii-text[b-idj9y9th93] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    line-height: 1.25;
    color: #000000;
    margin: 0;
    white-space: pre;
    tab-size: 4;
}

.win95-notepad-copyright[b-idj9y9th93] {
    text-align: right;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #000080;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px dashed #c0c0c0;
}

@media (max-width: 680px) {
    .win95-explorer-window[b-idj9y9th93],
    .win95-notepad-window[b-idj9y9th93] {
        top: 8px;
        left: 4px;
        right: 4px;
        width: calc(100% - 8px);
        max-width: calc(100vw - 8px);
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
        overflow-x: hidden;
    }

    .win95-game-floating-window[b-idj9y9th93] {
        padding: 4px;
        bottom: 32px;
    }

    .win95-tree-pane[b-idj9y9th93] {
        width: 130px;
        font-size: 10px;
    }

    .win95-ascii-text[b-idj9y9th93] {
        font-size: 8px;
    }

    /* Touch-freundliche Menü-Ziele für Startmenü (mindestens 44px) */
    .win95-start-menu[b-idj9y9th93] {
        max-width: calc(100vw - 8px);
    }

    .win95-start-content .win95-menu-row[b-idj9y9th93] {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .win95-start-submenu[b-idj9y9th93] {
        position: static;
        left: auto;
        bottom: auto;
        margin: 4px 0 4px 18px;
        box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    }

    .win95-start-submenu .win95-menu-row[b-idj9y9th93] {
        min-height: 40px;
        padding: 6px 10px;
    }
}



/* /Pages/Impressum.razor.rz.scp.css */
/* Hauptcontainer, um den Rahmen mittig zu platzieren */
.impressum-container[b-c96q7k35fa] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 2.5rem 0;
    background-color: transparent;
    box-sizing: border-box;
}

/* RainerOS Retro-Rahmen (analog zu BildPille Bezel) */
.papyrus-scroll[b-c96q7k35fa] {
    position: relative;
    width: 100%;
    max-width: 1400px;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;
    border-radius: 14px;
    padding: 6px;
    margin: 1.5rem 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #1e293b;
}

.papyrus-scroll[b-c96q7k35fa]::before,
.papyrus-scroll[b-c96q7k35fa]::after {
    display: none !important;
}

/* Versenktes RainerOS-Textfeld */
.scroll-content[b-c96q7k35fa] {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 8px;
    padding: clamp(1.8rem, 4vw, 3.5rem);
    color: #1e293b;
    box-sizing: border-box;
}

/* Typografie */
.scroll-title[b-c96q7k35fa] {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    text-align: center;
    color: #000080;
    margin-bottom: 0.8rem;
    font-family: Arial, "Arial Black", Tahoma, sans-serif;
    letter-spacing: 1px;
}

.legal-section[b-c96q7k35fa] {
    margin-bottom: 2rem;
}

.legal-section h2[b-c96q7k35fa] {
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #000080;
    font-family: Arial, Tahoma, sans-serif;
}

.legal-section p[b-c96q7k35fa] {
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 0.9rem;
    color: #1e293b;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.legal-section strong[b-c96q7k35fa] {
    font-weight: 700;
    color: #0f172a;
}

/* Elegante Trennlinie */
.ink-divider[b-c96q7k35fa] {
    border: 0;
    height: 2px;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
    background: transparent;
    margin: 2rem 0;
}

/* Links im Text (Email etc.) */
.ink-link[b-c96q7k35fa] {
    color: #0000cd;
    text-decoration: underline;
    font-weight: 600;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

.ink-link:hover[b-c96q7k35fa] {
    color: #ff0000;
}

/* Unterschriftsbereich */
.scroll-footer[b-c96q7k35fa] {
    text-align: right;
    margin-top: 2.5rem;
    font-style: italic;
    font-size: 1rem;
    color: #475569;
}

/* Responsive Anpassungen für Smartphones */
@media (max-width: 768px) {
    .impressum-container[b-c96q7k35fa] {
        padding: 1.5rem 0;
        min-height: 0;
    }

    .papyrus-scroll[b-c96q7k35fa] {
        padding: 4px;
        margin: 1rem 0;
        border-radius: 10px;
    }

    .scroll-content[b-c96q7k35fa] {
        padding: 1.4rem 1rem;
        border-radius: 6px;
        overflow-wrap: anywhere;
    }

    .scroll-title[b-c96q7k35fa] {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .ink-divider[b-c96q7k35fa] {
        margin: 1.2rem 0;
    }

    .legal-section[b-c96q7k35fa] {
        margin-bottom: 1.2rem;
    }

    .legal-section h2[b-c96q7k35fa] {
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }

    .legal-section p[b-c96q7k35fa] {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 0.7rem;
    }

    .scroll-footer[b-c96q7k35fa] {
        margin-top: 1.8rem;
        font-size: 0.92rem;
    }
}
/* /Pages/Lemmy.razor.rz.scp.css */
/* ========================================================
   Lemmys interaktive Zone: Windows-95-Dialogfenster mit Tabs
   ======================================================== */
.lemmy-page-container[b-jx40mk3dwo] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(0.5rem, 1.5vh, 1.25rem) 0.5rem 3rem;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overflow-x: hidden;
}

/* Das Windows-95-Dialogfenster */
.lemmy-dialog-window[b-jx40mk3dwo] {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 3px 3px 0 #000000;
    padding: 3px;
    box-sizing: border-box;
}

/* Titelleiste */
.lemmy-title-bar[b-jx40mk3dwo] {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    color: #ffffff;
    padding: 3px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}

.lemmy-title-text[b-jx40mk3dwo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lemmy-title-icon[b-jx40mk3dwo] {
    font-size: 0.95rem;
}

.lemmy-title-controls[b-jx40mk3dwo] {
    display: flex;
    gap: 3px;
}

.win-btn[b-jx40mk3dwo] {
    background: #c0c0c0;
    color: #000000;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    width: 18px;
    height: 16px;
    font-size: 0.72rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.win-btn:active[b-jx40mk3dwo] {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: none;
    transform: translate(1px, 1px);
}

.win-btn-close[b-jx40mk3dwo] {
    font-weight: 900;
}

/* Tab-Leiste (Eigenschaften-Reiter) */
.lemmy-tabs-header[b-jx40mk3dwo] {
    display: flex;
    gap: 4px;
    padding: 8px 6px 0 6px;
    border-bottom: 2px solid #808080;
    overflow-x: auto;
    scrollbar-width: none;
}

.lemmy-tabs-header[b-jx40mk3dwo]::-webkit-scrollbar {
    display: none;
}

.lemmy-tab-btn[b-jx40mk3dwo] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-bottom: none;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    position: relative;
    top: 2px;
    border-radius: 4px 4px 0 0;
    transition: background 0.1s ease;
}

.lemmy-tab-btn:hover[b-jx40mk3dwo] {
    background: #d4d0c8;
}

.lemmy-tab-btn.tab-active[b-jx40mk3dwo] {
    background: #c0c0c0;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-right: 3px solid #808080;
    padding-bottom: 8px;
    z-index: 2;
    top: 1px;
    box-shadow: 0 -2px 0 #dfdfdf inset;
}

.tab-icon[b-jx40mk3dwo] {
    font-size: 1rem;
}

/* Dialog-Inhaltsbereich */
.lemmy-dialog-body[b-jx40mk3dwo] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-top: none;
    padding: 14px;
    box-sizing: border-box;
    min-height: 480px;
}

/* ========================================================
   REITER 1: FOTO-ALBUM
   ======================================================== */
.album-tab-pane[b-jx40mk3dwo] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Album-Info-Karte */
.album-info-card[b-jx40mk3dwo] {
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 10px 14px;
    box-sizing: border-box;
}

.album-info-top[b-jx40mk3dwo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.album-heading[b-jx40mk3dwo] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #000080;
}

.album-sub[b-jx40mk3dwo] {
    margin: 3px 0 0;
    font-size: 0.8rem;
    color: #27272a;
}

.album-stats-badge[b-jx40mk3dwo] {
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.74rem;
}

.stat-row b[b-jx40mk3dwo] {
    color: #000080;
}

/* 90s Fortschrittsbalken */
.album-progress-wrap[b-jx40mk3dwo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.album-progress-bar[b-jx40mk3dwo] {
    width: 100%;
    height: 18px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 2px;
    box-sizing: border-box;
}

.album-progress-fill[b-jx40mk3dwo] {
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #000080 0px,
        #000080 10px,
        #c0c0c0 10px,
        #c0c0c0 12px
    );
    transition: width 0.4s ease;
}

.album-progress-text[b-jx40mk3dwo] {
    font-size: 0.74rem;
    font-weight: bold;
    color: #000080;
    text-align: right;
}

/* Foto-Raster */
.album-grid[b-jx40mk3dwo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

/* Album-Karten */
.album-card[b-jx40mk3dwo] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

.album-card.unlocked:hover[b-jx40mk3dwo] {
    transform: translateY(-2px);
    box-shadow: 2px 2px 0 #000000;
    border-color: #ffffff #000080 #000080 #ffffff;
}

/* Freigeschaltetes Foto (100% ohne Farbfilter, gestochen scharf) */
.album-photo-btn[b-jx40mk3dwo] {
    position: relative;
    background: #000000;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
}

.album-photo-img[b-jx40mk3dwo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Bewusst KEINE Farbfilter für maximale Bildschärfe und Echtheit */
    filter: none !important;
    transition: transform 0.2s ease;
}

.album-photo-btn:hover .album-photo-img[b-jx40mk3dwo] {
    transform: scale(1.04);
}

.album-zoom-badge[b-jx40mk3dwo] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.album-photo-btn:hover .album-zoom-badge[b-jx40mk3dwo] {
    opacity: 1;
}

/* Gesperrte Karte */
.album-card.locked[b-jx40mk3dwo] {
    background: #d4d0c8;
    opacity: 0.88;
}

.album-locked-placeholder[b-jx40mk3dwo] {
    aspect-ratio: 1 / 1;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    box-sizing: border-box;
}

.album-lock-icon[b-jx40mk3dwo] {
    font-size: 1.8rem;
    filter: grayscale(1);
    opacity: 0.7;
}

.album-locked-title[b-jx40mk3dwo] {
    font-size: 0.76rem;
    font-weight: bold;
    color: #4b5563;
}

.album-locked-hint[b-jx40mk3dwo] {
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
}

/* Card-Footer */
.album-card-footer[b-jx40mk3dwo] {
    padding: 4px 2px 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
}

.album-card-title[b-jx40mk3dwo] {
    font-weight: bold;
    color: #000000;
}

.album-card-status.ok[b-jx40mk3dwo] {
    color: #15803d;
    font-weight: 700;
}

.album-card-footer.locked[b-jx40mk3dwo] {
    justify-content: center;
}

.album-card-hint[b-jx40mk3dwo] {
    font-size: 0.64rem;
    color: #6b7280;
    text-align: center;
}

/* ========================================================
   REITER 2 & 3: SPIEL-TABS
   ======================================================== */
.game-tab-pane[b-jx40mk3dwo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.game-instruction-banner[b-jx40mk3dwo] {
    width: 100%;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
}

.banner-title[b-jx40mk3dwo] {
    font-weight: 900;
    font-size: 0.92rem;
    color: #000080;
}

.banner-text[b-jx40mk3dwo] {
    font-size: 0.78rem;
    color: #1f2937;
}

.game-wrapper[b-jx40mk3dwo] {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Fußleiste */
.lemmy-dialog-footer[b-jx40mk3dwo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 6px 4px;
    border-top: 2px solid #ffffff;
    margin-top: 4px;
    font-size: 0.74rem;
}

.footer-hint[b-jx40mk3dwo] {
    color: #4b5563;
}

.win-btn-action[b-jx40mk3dwo] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-weight: bold;
    font-size: 0.78rem;
    padding: 4px 12px;
    cursor: pointer;
}

.win-btn-action:active[b-jx40mk3dwo] {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: none;
    transform: translate(1px, 1px);
}

/* ========================================================
   LIGHTBOX-MODAL: Originalansicht ohne Filter
   ======================================================== */
.lemmy-lightbox-backdrop[b-jx40mk3dwo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lemmy-lightbox-window[b-jx40mk3dwo] {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 4px 4px 0 #000000;
    max-width: min(92vw, 760px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 3px;
    box-sizing: border-box;
    animation: modalPop-b-jx40mk3dwo 0.18s ease-out;
}

@keyframes modalPop-b-jx40mk3dwo {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-body[b-jx40mk3dwo] {
    background: #000000;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-height: 65vh;
}

.lightbox-img[b-jx40mk3dwo] {
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
    display: block;
    filter: none !important;
}

.lightbox-footer[b-jx40mk3dwo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px 2px;
}

.win-btn-nav[b-jx40mk3dwo],
.win-btn-close-action[b-jx40mk3dwo] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 4px 10px;
    cursor: pointer;
}

.win-btn-nav:active[b-jx40mk3dwo],
.win-btn-close-action:active[b-jx40mk3dwo] {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: none;
    transform: translate(1px, 1px);
}

.lightbox-counter[b-jx40mk3dwo] {
    font-size: 0.82rem;
    font-weight: bold;
    color: #000080;
}

/* ========================================================
   GEWINN-TOAST
   ======================================================== */
.lemmy-win-toast[b-jx40mk3dwo] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2100;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 3px 3px 0 #000000;
    padding: 3px;
    max-width: 320px;
    box-sizing: border-box;
}

.toast-header[b-jx40mk3dwo] {
    background: linear-gradient(90deg, #15803d 0%, #22c55e 100%);
    color: #ffffff;
    padding: 2px 6px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toast-close[b-jx40mk3dwo] {
    background: transparent;
    border: none;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.toast-body[b-jx40mk3dwo] {
    display: flex;
    gap: 8px;
    padding: 8px 6px;
    align-items: center;
}

.toast-thumb[b-jx40mk3dwo] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #000000;
}

.toast-info[b-jx40mk3dwo] {
    font-size: 0.76rem;
    flex: 1;
}

.toast-info b[b-jx40mk3dwo] {
    color: #15803d;
}

.toast-info p[b-jx40mk3dwo] {
    margin: 2px 0 6px;
    color: #000000;
}

.toast-view-btn[b-jx40mk3dwo] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 #000000;
    font-weight: bold;
    font-size: 0.72rem;
    padding: 2px 8px;
    cursor: pointer;
}

.toast-view-btn:active[b-jx40mk3dwo] {
    border-color: #808080 #ffffff #ffffff #808080;
    transform: translate(1px, 1px);
    box-shadow: none;
}

/* Animationen */
.slide-fade[b-jx40mk3dwo] {
    animation: slideFade-b-jx40mk3dwo 0.2s ease-out;
}

@keyframes slideFade-b-jx40mk3dwo {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up[b-jx40mk3dwo] {
    animation: slideUp-b-jx40mk3dwo 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-jx40mk3dwo {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   RESPONSIVES DESIGN: Smartphone (< 640px)
   ======================================================== */
@media (max-width: 640px) {
    .lemmy-page-container[b-jx40mk3dwo] {
        padding: 0.25rem 0.25rem 4rem;
        touch-action: pan-y;
        max-width: 100vw;
    }

    .lemmy-dialog-body[b-jx40mk3dwo] {
        padding: 8px 6px;
    }

    .lemmy-tabs-header[b-jx40mk3dwo] {
        padding: 4px 2px 0 2px;
        gap: 2px;
    }

    .lemmy-tab-btn[b-jx40mk3dwo] {
        padding: 5px 8px;
        font-size: 0.74rem;
        gap: 3px;
    }

    .album-grid[b-jx40mk3dwo] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .album-info-top[b-jx40mk3dwo] {
        flex-direction: column;
    }

    .album-stats-badge[b-jx40mk3dwo] {
        width: 100%;
        box-sizing: border-box;
    }

    .lemmy-dialog-footer[b-jx40mk3dwo] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .lemmy-win-toast[b-jx40mk3dwo] {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}
/* /Pages/Programme.razor.rz.scp.css */
/* ==========================================================================
   PROGRAMME 3D ROOM - LIVE-3D NATUR-PANORAMA (three.js)
   Szene: wwwroot/js/programme-szene.js • Steuerung: wwwroot/js/programme-3d.js
   ========================================================================== */

:host[b-8yev1rlr9e] {
    display: block;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

.cube-viewport[b-8yev1rlr9e] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #161824 0%, #0c0e17 65%, #05060a 100%);
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Rajdhani', sans-serif;
    color: #ffffff;
}

/* Comic-Halbton-Raster Overlay & Vignette */
.comic-halftone-overlay[b-8yev1rlr9e] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background-image: radial-gradient(rgba(0, 240, 255, 0.05) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.6;
}

.comic-vignette[b-8yev1rlr9e] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 20, 35, 0.45) 100%);
}

/* ==========================================================================
   MINIMALISTISCHES HUD (FEST STEHEND)
   ========================================================================== */
.hud-topbar[b-8yev1rlr9e] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-start;   /* „Bereich schließen“ links */
    align-items: center;
    padding: 16px 28px;
    pointer-events: none;
}

.hud-topbar > *[b-8yev1rlr9e] {
    pointer-events: auto;
}

.hud-back-btn[b-8yev1rlr9e] {
    font-family: 'Bangers', cursive;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: #000000;
    background: #00f0ff;
    border: 3px solid #000000;
    box-shadow: 4px 4px 0px #000000;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hud-back-btn:hover[b-8yev1rlr9e] {
    background: #ffffff;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #000000;
}

.hud-back-btn:active[b-8yev1rlr9e] {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

.btn-arrow[b-8yev1rlr9e] {
    font-size: 13px;
}

@keyframes badgePulse-b-8yev1rlr9e {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

/* Links/rechts schauen: Randknöpfe */
.hud-nav-arrow[b-8yev1rlr9e] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 45;
    width: 56px;
    height: 90px;
    background: #0f172a;
    border: 3px solid #000000;
    box-shadow: 5px 5px 0px #000000;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    color: #00f0ff;
}

.arrow-symbol[b-8yev1rlr9e] {
    font-size: 24px;
}

.arrow-left[b-8yev1rlr9e] {
    left: 24px;
}

.arrow-right[b-8yev1rlr9e] {
    right: 24px;
}

.arrow-left:hover[b-8yev1rlr9e] {
    background: #00f0ff;
    color: #000000;
    transform: translateY(-50%) translateX(-4px) scale(1.05);
    box-shadow: 7px 7px 0px #000000;
}

.arrow-right:hover[b-8yev1rlr9e] {
    background: #00f0ff;
    color: #000000;
    transform: translateY(-50%) translateX(4px) scale(1.05);
    box-shadow: 7px 7px 0px #000000;
}

/* Hochschauen-Knopf oben mittig (ersetzt die frühere Titelleiste) */
.hud-hoch-btn[b-8yev1rlr9e] {
    min-width: 140px;
    justify-content: center;
    font-size: 20px;
    letter-spacing: 2px;
    padding: 10px 24px;
}

/* Himmelsansicht: großer Zurück-Knopf mittig im Bild */
.himmel-ui[b-8yev1rlr9e] {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: himmelEin-b-8yev1rlr9e 0.8s ease 0.6s both;
}

.himmel-ui .hud-back-btn[b-8yev1rlr9e] {
    pointer-events: auto;
    font-size: 30px;
    letter-spacing: 3px;
    padding: 18px 44px;
    border-width: 4px;
    box-shadow: 7px 7px 0px #000000;
}

@keyframes himmelEin-b-8yev1rlr9e {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   LIVE-SZENE (Canvas) & KARTEN
   ========================================================================== */
.welt-canvas[b-8yev1rlr9e] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Ersatz ohne WebGL: Wandbild als Hintergrund */
.welt-ersatz[b-8yev1rlr9e] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.kein-webgl .welt-canvas[b-8yev1rlr9e] {
    display: none;
}

/* Mit WebGL setzt programme-3d.js Position/Deckkraft jeder Karte (Transform je Frame) */
.welt-karten[b-8yev1rlr9e] {
    position: absolute;
    left: 50%;
    top: calc(50% + 28px);
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 24px 28px;
    /* mit WebGL setzt programme-3d.js --ks (Einpassen ins Fenster); die Karten bleiben immer mittig */
    transform: translate(-50%, -50%) scale(var(--ks, 1));
    transition: opacity 0.7s ease, visibility 0s linear 0s;
    pointer-events: none;
}

/* Himmelsansicht: Karten ausgeblendet */
.welt-karten.ist-weg[b-8yev1rlr9e] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

/* ==========================================================================
   CEL-SHADED FLOATING INFOKARTE DES GEWÄHLTEN PROGRAMMS
   ========================================================================== */
.comic-infocard[b-8yev1rlr9e] {
    position: relative;
    width: 420px;
    background: #090c16;
    border: 4px solid #000000;
    box-shadow: 10px 10px 0px #000000;
    border-radius: 14px;
    padding: 22px;
    pointer-events: auto;
    cursor: default;
    display: flex;
    flex-direction: column;   /* Start-Knopf sitzt in jeder Zeile auf gleicher Höhe (unten) */
}

.infocard-body[b-8yev1rlr9e] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@keyframes infocardSlideUp-b-8yev1rlr9e {
    from { transform: translateY(30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.infocard-header[b-8yev1rlr9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #000000;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.infocard-badge[b-8yev1rlr9e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 4px;
    border: 2px solid #000000;
    box-shadow: 2px 2px 0px #000000;
    background: #05070c;
}

.badge-pulse[b-8yev1rlr9e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: badgePulse-b-8yev1rlr9e 1.4s infinite ease-in-out;
}

.infocard-sub[b-8yev1rlr9e] {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    color: #64748b;
    letter-spacing: 1.2px;
}

.infocard-title-row[b-8yev1rlr9e] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.infocard-icon[b-8yev1rlr9e] {
    font-size: 32px;
}

.infocard-title[b-8yev1rlr9e] {
    font-family: 'Bangers', cursive;
    font-size: 34px;
    margin: 0;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-shadow: 3px 3px 0px #000000;
    line-height: 1;
}

.infocard-desc[b-8yev1rlr9e] {
    font-size: 14px;
    line-height: 1.45;
    color: #cbd5e1;
    margin: 0 0 14px 0;
}

.infocard-tags[b-8yev1rlr9e] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.tag[b-8yev1rlr9e] {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    background: #141b2d;
    border: 2px solid #000000;
    box-shadow: 2px 2px 0px #000000;
    border-radius: 4px;
    color: #e2e8f0;
    letter-spacing: 0.8px;
}

.infocard-action[b-8yev1rlr9e] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 14px;
}

.comic-launch-btn[b-8yev1rlr9e] {
    font-family: 'Bangers', cursive;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 28px;
    border: 4px solid #000000;
    box-shadow: 6px 6px 0px #000000;
    border-radius: 8px;
    cursor: pointer;
    color: #000000;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    transition: transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.15s ease, filter 0.15s ease;
}

.comic-launch-btn:hover[b-8yev1rlr9e] {
    transform: translate(-3px, -3px) scale(1.03);
    box-shadow: 9px 9px 0px #000000;
    filter: brightness(1.15);
}

.comic-launch-btn:active[b-8yev1rlr9e] {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px #000000;
}

.btn-icon[b-8yev1rlr9e] {
    font-size: 16px;
}

/* Farbvarianten der Infokarte */
.comic-infocard.emerald[b-8yev1rlr9e] { border-color: #10b981; }
.comic-infocard.emerald .infocard-title[b-8yev1rlr9e] { color: #10b981; }
.comic-infocard.emerald .badge-pulse[b-8yev1rlr9e] { background: #10b981; }
.emerald-btn[b-8yev1rlr9e] { background: #10b981; }
.emerald-btn:hover[b-8yev1rlr9e] { background: #34d399; }

.comic-infocard.magenta[b-8yev1rlr9e] { border-color: #ff007f; }
.comic-infocard.magenta .infocard-title[b-8yev1rlr9e] { color: #ff007f; }
.comic-infocard.magenta .badge-pulse[b-8yev1rlr9e] { background: #ff007f; }
.magenta-btn[b-8yev1rlr9e] { background: #ff007f; color: #ffffff; }
.magenta-btn:hover[b-8yev1rlr9e] { background: #ff3399; }

.comic-infocard.orange[b-8yev1rlr9e] { border-color: #f59e0b; }
.comic-infocard.orange .infocard-title[b-8yev1rlr9e] { color: #f59e0b; }
.comic-infocard.orange .badge-pulse[b-8yev1rlr9e] { background: #f59e0b; }
.orange-btn[b-8yev1rlr9e] { background: #f59e0b; }
.orange-btn:hover[b-8yev1rlr9e] { background: #fbbf24; }

.comic-infocard.cyan[b-8yev1rlr9e] { border-color: #38bdf8; }
.comic-infocard.cyan .infocard-title[b-8yev1rlr9e] { color: #38bdf8; }
.comic-infocard.cyan .badge-pulse[b-8yev1rlr9e] { background: #38bdf8; }
.cyan-btn[b-8yev1rlr9e] { background: #38bdf8; }
.cyan-btn:hover[b-8yev1rlr9e] { background: #7dd3fc; }

.comic-infocard.pink[b-8yev1rlr9e] { border-color: #f472b6; }
.comic-infocard.pink .infocard-title[b-8yev1rlr9e] { color: #f472b6; }
.comic-infocard.pink .badge-pulse[b-8yev1rlr9e] { background: #f472b6; }
.pink-btn[b-8yev1rlr9e] { background: #f472b6; }
.pink-btn:hover[b-8yev1rlr9e] { background: #f9a8d4; }

.comic-infocard.neon[b-8yev1rlr9e] { border-color: #ff33ff; }
.comic-infocard.neon .infocard-title[b-8yev1rlr9e] { color: #ff33ff; }
.comic-infocard.neon .badge-pulse[b-8yev1rlr9e] { background: #ff33ff; }
.neon-btn[b-8yev1rlr9e] { background: #ff33ff; }
.neon-btn:hover[b-8yev1rlr9e] { background: #ff80ff; }

.comic-infocard.sunset[b-8yev1rlr9e] { border-color: #fb923c; }
.comic-infocard.sunset .infocard-title[b-8yev1rlr9e] { color: #fb923c; }
.comic-infocard.sunset .badge-pulse[b-8yev1rlr9e] { background: #fb923c; }
.sunset-btn[b-8yev1rlr9e] { background: #fb923c; }
.sunset-btn:hover[b-8yev1rlr9e] { background: #fdba74; }

.comic-infocard.lime[b-8yev1rlr9e] { border-color: #a3e635; }
.comic-infocard.lime .infocard-title[b-8yev1rlr9e] { color: #a3e635; }
.comic-infocard.lime .badge-pulse[b-8yev1rlr9e] { background: #a3e635; }
.lime-btn[b-8yev1rlr9e] { background: #a3e635; }
.lime-btn:hover[b-8yev1rlr9e] { background: #bef264; }

.comic-infocard.yellow[b-8yev1rlr9e] { border-color: #facc15; }
.comic-infocard.yellow .infocard-title[b-8yev1rlr9e] { color: #facc15; }
.comic-infocard.yellow .badge-pulse[b-8yev1rlr9e] { background: #facc15; }
.yellow-btn[b-8yev1rlr9e] { background: #facc15; }
.yellow-btn:hover[b-8yev1rlr9e] { background: #fde047; }

/* ==========================================================================
   RESPONSIVE ANPASSUNGEN
   ========================================================================== */
@media (max-width: 900px) {
    .hud-topbar[b-8yev1rlr9e] {
        padding: 12px 16px;
    }

    .welt-karten[b-8yev1rlr9e] {
        gap: 16px 18px;
    }

    .hud-nav-arrow[b-8yev1rlr9e] {
        width: 44px;
        height: 70px;
    }

    .comic-infocard[b-8yev1rlr9e] {
        width: 340px;
        padding: 16px;
    }

    .infocard-title[b-8yev1rlr9e] {
        font-size: 26px;
    }

    .infocard-desc[b-8yev1rlr9e] {
        font-size: 12px;
    }

    .comic-launch-btn[b-8yev1rlr9e] {
        font-size: 16px;
        padding: 10px 20px;
    }

    .himmel-ui .hud-back-btn[b-8yev1rlr9e] {
        font-size: 22px;
        padding: 14px 28px;
    }
}

/* Websites-/Programme-Ansicht: Zurück-Knopf oben mittig */
.hud-websites-zurueck[b-8yev1rlr9e] {
    position: absolute;
    top: 16px;
    left: 50%;                       /* „Zurück“ in der Mitte */
    transform: translateX(-50%);
    z-index: 55;
}
.hud-websites-zurueck:hover[b-8yev1rlr9e] { transform: translate(calc(-50% - 2px), -2px); }
.hud-websites-zurueck:active[b-8yev1rlr9e] { transform: translate(calc(-50% + 2px), 2px); }

/* Websites-Ansicht: vier quadratische Karten je Zeile (gleiches Design wie die großen Karten), Symbol + Überschrift + kurze Beschreibung; ganze Karte klickbar */
.welt-karten.kompakt[b-8yev1rlr9e] {
    grid-template-columns: repeat(4, auto);
    gap: 20px 22px;
}

.welt-karten.kompakt .comic-infocard[b-8yev1rlr9e] {
    width: 250px;
    height: 250px;
    padding: 18px 18px 16px;
    box-shadow: 7px 7px 0px #000000;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.welt-karten.kompakt .comic-infocard:hover[b-8yev1rlr9e] {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px #000000;
}

.welt-karten.kompakt .infocard-header[b-8yev1rlr9e],
.welt-karten.kompakt .infocard-tags[b-8yev1rlr9e],
.welt-karten.kompakt .infocard-action[b-8yev1rlr9e] {
    display: none;
}

.welt-karten.kompakt .infocard-title-row[b-8yev1rlr9e] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.welt-karten.kompakt .infocard-icon[b-8yev1rlr9e] {
    font-size: 40px;
    line-height: 1;
}

.welt-karten.kompakt .infocard-title[b-8yev1rlr9e] {
    font-size: 27px;
    line-height: 1.05;
}

.welt-karten.kompakt .infocard-desc[b-8yev1rlr9e] {
    font-size: 12.5px;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .welt-karten.kompakt[b-8yev1rlr9e] {
        grid-template-columns: repeat(2, auto);
    }

    .welt-karten.kompakt .comic-infocard[b-8yev1rlr9e] {
        width: 200px;
        height: 200px;
        padding: 14px;
    }

    .welt-karten.kompakt .infocard-icon[b-8yev1rlr9e] { font-size: 30px; }
    .welt-karten.kompakt .infocard-title[b-8yev1rlr9e] { font-size: 22px; }
    .welt-karten.kompakt .infocard-desc[b-8yev1rlr9e] { font-size: 11px; -webkit-line-clamp: 4; }
}


/* Menü ausblenden/einblenden: oben rechts */
.hud-menue-btn[b-8yev1rlr9e] {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 55;
}
/* /Pages/Projekte.razor.rz.scp.css */
.projects-universe[b-wcnc5b7odt] {
    background-color: #000000;
    min-height: 100vh;
    padding: 60px 20px 80px;
    font-family: 'Rajdhani', sans-serif;
    color: #e0e0e0;
    position: relative;
    touch-action: pan-y;
}

/* Container */
.projects-container[b-wcnc5b7odt] {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Header */
.glitch-title[b-wcnc5b7odt] {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #4AF626, 0 0 20px #4AF626;
    margin-bottom: 5px;
    letter-spacing: 2px;
}
.subtitle[b-wcnc5b7odt] {
    font-size: 1.2rem;
    color: #4AF626;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Grid */
.project-grid[b-wcnc5b7odt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Cards */
.cyber-card[b-wcnc5b7odt] {
    background: rgba(10, 20, 10, 0.8);
    border: 1px solid rgba(74, 246, 38, 0.3);
    border-radius: 4px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.active-card[b-wcnc5b7odt] {
    cursor: pointer;
}
.active-card:hover[b-wcnc5b7odt] {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 15px rgba(74, 246, 38, 0.3);
    border-color: #4AF626;
}

/* Animated Borders for Active Card */
.card-borders span[b-wcnc5b7odt] {
    position: absolute;
    background: #4AF626;
    transition: all 0.3s;
}
.border-top[b-wcnc5b7odt] { top: 0; left: 0; width: 0; height: 2px; }
.border-right[b-wcnc5b7odt] { top: 0; right: 0; width: 2px; height: 0; }
.border-bottom[b-wcnc5b7odt] { bottom: 0; right: 0; width: 0; height: 2px; }
.border-left[b-wcnc5b7odt] { bottom: 0; left: 0; width: 2px; height: 0; }

.active-card:hover .border-top[b-wcnc5b7odt] { width: 100%; }
.active-card:hover .border-right[b-wcnc5b7odt] { height: 100%; transition-delay: 0.1s; }
.active-card:hover .border-bottom[b-wcnc5b7odt] { width: 100%; transition-delay: 0.2s; }
.active-card:hover .border-left[b-wcnc5b7odt] { height: 100%; transition-delay: 0.3s; }

/* Status Badges */
.status-badge[b-wcnc5b7odt] {
    position: absolute;
    top: -10px;
    right: 15px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}
.online[b-wcnc5b7odt] {
    background: #113311;
    color: #4AF626;
    border: 1px solid #4AF626;
    box-shadow: 0 0 10px rgba(74, 246, 38, 0.2);
}
.pulse[b-wcnc5b7odt] {
    width: 6px;
    height: 6px;
    background: #4AF626;
    border-radius: 50%;
    animation: blink-b-wcnc5b7odt 1.5s infinite;
}
@keyframes blink-b-wcnc5b7odt {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px #4AF626; }
    50% { opacity: 0.4; box-shadow: none; }
}

/* Content */
.icon-box[b-wcnc5b7odt] {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    color: #4AF626;
}

.card-title[b-wcnc5b7odt] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 10px;
}
.card-desc[b-wcnc5b7odt] {
    font-size: 1rem;
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 70px;
}

/* Tech Stack */
.tech-stack[b-wcnc5b7odt] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.tech-stack span[b-wcnc5b7odt] {
    font-size: 0.8rem;
    background: rgba(74, 246, 38, 0.1);
    color: #4AF626;
    padding: 3px 8px;
    border: 1px solid rgba(74, 246, 38, 0.3);
    border-radius: 2px;
}

/* Buttons */
.launch-btn[b-wcnc5b7odt] {
    width: 100%;
    background: transparent;
    color: #4AF626;
    border: 1px solid #4AF626;
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.active-card:hover .launch-btn:not(.preload-btn)[b-wcnc5b7odt] {
    background: #4AF626;
    color: #000;
    box-shadow: 0 0 15px rgba(74, 246, 38, 0.5);
}

/* Ladebalken-Button für Alternative 4 & 5 („LADEN?“ -> füllt sich mit anderer Farbe -> „STARTEN [▶]“) */
.launch-btn.preload-btn[b-wcnc5b7odt] {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.55);
    border-color: var(--btn-farbe, #ffc27a);
    color: var(--btn-farbe, #ffc27a);
    z-index: 1;
}

.launch-btn.preload-btn .preload-fill[b-wcnc5b7odt] {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: linear-gradient(90deg, #10b981, var(--fill-farbe, #4AF626));
    transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.launch-btn.preload-btn .preload-label[b-wcnc5b7odt] {
    position: relative;
    z-index: 2;
    letter-spacing: 0.06em;
}

.launch-btn.preload-btn:hover:not(.ist-bereit):not(.laedt)[b-wcnc5b7odt] {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.launch-btn.preload-btn.laedt[b-wcnc5b7odt] {
    border-color: var(--fill-farbe, #4AF626);
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    cursor: progress;
}

.launch-btn.preload-btn.ist-bereit[b-wcnc5b7odt] {
    border-color: var(--fill-farbe, #4AF626);
    color: #041206;
    box-shadow: 0 0 18px rgba(74, 246, 38, 0.45);
}

.launch-btn.preload-btn.ist-bereit:hover[b-wcnc5b7odt] {
    filter: brightness(1.1);
    box-shadow: 0 0 24px rgba(74, 246, 38, 0.7);
}

/* Diagonales Absperrband „UNDER CONSTRUCTION“ für Alternative 4 */
.under-construction-card[b-wcnc5b7odt] {
    position: relative;
    overflow: hidden;
}

.absperrband-wrap[b-wcnc5b7odt] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 25;
}

.absperrband[b-wcnc5b7odt] {
    position: absolute;
    top: 36px;
    right: -60px;
    width: 290px;
    padding: 6px 0;
    background: repeating-linear-gradient(
        -45deg,
        #facc15 0px,
        #facc15 16px,
        #111111 16px,
        #111111 32px
    );
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 12px rgba(250, 204, 21, 0.45);
    transform: rotate(28deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.absperrband-text[b-wcnc5b7odt] {
    background: #09090b;
    color: #facc15;
    font-family: 'Orbitron', 'Impact', sans-serif;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding: 3px 12px;
    border: 1px solid #facc15;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

/* Beta-Tag für Alternative 5 „At Home“ */
.btn-beta-tag[b-wcnc5b7odt] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 4px;
    background: #fb923c;
    color: #000000;
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.6);
    vertical-align: middle;
    line-height: 1.2;
    text-shadow: none;
}

.launch-btn.preload-btn.ist-bereit .btn-beta-tag[b-wcnc5b7odt] {
    background: #041206;
    color: #4AF626;
    border: 1px solid #4AF626;
    box-shadow: 0 0 8px rgba(74, 246, 38, 0.6);
}

/* Schließen-Knopf (genutzt vom In-Progress-Fenster) */
.pin-modal-close[b-wcnc5b7odt] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: 1px solid rgba(250, 204, 21, 0.4);
    color: #facc15;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pin-modal-close:hover[b-wcnc5b7odt] {
    background: #facc15;
    color: #000;
    box-shadow: 0 0 10px #facc15;
}


/* „Zurück“ links, Aktionen („Login“, „Start“) rechts */
.projects-back-nav[b-wcnc5b7odt] { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 1000; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px; }
.projects-nav-actions[b-wcnc5b7odt] { display: inline-flex; align-items: center; gap: 10px; }
.cyber-back-btn[b-wcnc5b7odt] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; line-height: 1.2; text-decoration: none; cursor: pointer; background: rgba(0,0,0,0.5); border: 1px solid var(--neon-cyan, #0ff); color: var(--neon-cyan, #0ff); text-transform: uppercase; font-family: 'Orbitron', sans-serif; letter-spacing: 2px; transition: all 0.3s ease; }
.cyber-back-btn svg[b-wcnc5b7odt] { width: 1.1em; height: 1.1em; flex: none; }
.cyber-back-btn:focus-visible[b-wcnc5b7odt] { outline: 2px solid #fff; outline-offset: 2px; }
.cyber-back-btn:hover[b-wcnc5b7odt] { background: var(--neon-cyan, #0ff); color: #000; box-shadow: 0 0 15px var(--neon-cyan, #0ff); }

@media (max-width: 576px) {
    .projects-universe[b-wcnc5b7odt] { padding-top: 76px; }
    .projects-back-nav[b-wcnc5b7odt] { top: 14px; left: 14px; right: 14px; gap: 6px; }
    .projects-nav-actions[b-wcnc5b7odt] { gap: 6px; }
    .cyber-back-btn[b-wcnc5b7odt] { padding: 7px 10px; font-size: 0.72rem; letter-spacing: 1px; gap: 5px; }
}

.projects-universe[b-wcnc5b7odt] {
    animation: projekte-ein-b-wcnc5b7odt 1.1s cubic-bezier(0.25, 0.6, 0.2, 1) 0.05s backwards;
}

@keyframes projekte-ein-b-wcnc5b7odt {
    from { opacity: 0; transform: translateX(6vw); }
    to { opacity: 1; transform: none; }
}

/* In-Progress-Übersicht (Fenster über der Projektseite) */
.ip-overlay[b-wcnc5b7odt] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(2, 6, 14, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ip-panel[b-wcnc5b7odt] {
    width: min(1200px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #090c16;
    border: 2px solid rgba(250, 204, 21, 0.55);
    border-radius: 12px;
    padding: 20px 24px 28px;
}

.ip-kopf[b-wcnc5b7odt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #facc15;
}

.ip-kopf h2[b-wcnc5b7odt] {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    margin: 0;
}

.ip-zu[b-wcnc5b7odt] {
    position: static;
}

.ip-grid[b-wcnc5b7odt] {
    margin-top: 20px;
}
/* /Pages/ProjekteDetail.razor.rz.scp.css */
.detail-container[b-qj2hjudbmo] {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 10%, rgba(56, 189, 248, 0.08) 0%, rgba(2, 6, 23, 0.95) 100%);
    font-family: 'Poppins', sans-serif;
}

.font-mono[b-qj2hjudbmo] {
    font-family: 'JetBrains Mono', monospace !important;
}

/* Glassmorphism Card Container */
.card-glass[b-qj2hjudbmo] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 58, 138, 0.45) 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

.btn-back-cyber[b-qj2hjudbmo] {
    background: rgba(15, 23, 42, 0.6);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 8px 18px;
    border-radius: 50rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .btn-back-cyber:hover[b-qj2hjudbmo] {
        background: #38bdf8;
        color: #0f172a;
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
        transform: translateX(-3px);
    }

/* Header Elements */
.badge-accent[b-qj2hjudbmo] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 4px 12px;
    border-radius: 50rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.badge-status[b-qj2hjudbmo] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    padding: 4px 12px;
    border-radius: 50rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.detail-title[b-qj2hjudbmo] {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    background: linear-gradient(135deg, #ffffff 0%, #38bdf8 60%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.4rem;
}

.detail-subtitle[b-qj2hjudbmo] {
    color: #94a3b8;
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0;
}

/* Action Buttons */
.cyber-action-btn[b-qj2hjudbmo] {
    text-decoration: none !important;
    padding: 10px 22px;
    border-radius: 50rem;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .cyber-action-btn.primary[b-qj2hjudbmo] {
        background: #38bdf8;
        color: #0f172a;
        border: 1px solid #38bdf8;
        box-shadow: 0 4px 15px rgba(56, 189, 248, 0.35);
    }

        .cyber-action-btn.primary:hover[b-qj2hjudbmo] {
            background: #7dd3fc;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
        }

    .cyber-action-btn.secondary[b-qj2hjudbmo] {
        background: rgba(34, 197, 94, 0.2);
        color: #4ade80;
        border: 1px solid rgba(34, 197, 94, 0.5);
    }

        .cyber-action-btn.secondary:hover[b-qj2hjudbmo] {
            background: #22c55e;
            color: #0f172a;
            transform: translateY(-2px);
        }

    .cyber-action-btn.outline[b-qj2hjudbmo] {
        background: transparent;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

        .cyber-action-btn.outline:hover[b-qj2hjudbmo] {
            border-color: #38bdf8;
            color: #38bdf8;
            transform: translateY(-2px);
        }

/* Sections & Typography */
.section-title[b-qj2hjudbmo] {
    font-size: 1.15rem;
    color: #38bdf8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.85rem;
}

.text-light-desc[b-qj2hjudbmo] {
    color: #cbd5e1;
    font-size: 0.98rem;
}

.tech-badge-detail[b-qj2hjudbmo] {
    background: rgba(15, 23, 42, 0.7);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 6px 14px;
    border-radius: 50rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.feature-list[b-qj2hjudbmo] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .feature-list li[b-qj2hjudbmo] {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.6rem;
        color: #e2e8f0;
        font-size: 0.95rem;
    }

        .feature-list li[b-qj2hjudbmo]::before {
            content: '▹';
            position: absolute;
            left: 0;
            color: #38bdf8;
            font-weight: bold;
        }

/* Visual Box & Terminal */
.visual-box[b-qj2hjudbmo] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.visual-img[b-qj2hjudbmo] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.terminal-box[b-qj2hjudbmo] {
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.terminal-bar[b-qj2hjudbmo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot[b-qj2hjudbmo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .dot.red[b-qj2hjudbmo] {
        background: #ef4444;
    }

    .dot.yellow[b-qj2hjudbmo] {
        background: #eab308;
    }

    .dot.green[b-qj2hjudbmo] {
        background: #22c55e;
    }

.terminal-title[b-qj2hjudbmo] {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 6px;
}
/* /Pages/ScolarisApp.razor.rz.scp.css */
/* Scolaris – Prüfungsgenerator in LemmySQL-Optik (Grundbausteine po-… in wwwroot/css/pruefung-optik.css)
   Aufbau: .scolaris-layout (Vollbild, scrollt nur wenn das Fenster zu klein ist) → .scolaris-container: Leiste · Titel · Hauptteil (zwei Fenster) · Zähler.
   Alles passt bei normalen Bildschirmhöhen auf eine Seite; die Abstände wachsen/schrumpfen mit der Fensterhöhe. */

.scolaris-layout[b-hliev1hyvi] {
    height: 100vh;
    height: 100dvh;
    padding: clamp(10px, 2.2vh, 26px) clamp(12px, 3vw, 30px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

.scolaris-container[b-hliev1hyvi] {
    max-width: 1060px;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 20px);
    margin: 0 auto;
}

.sc-pfeil[b-hliev1hyvi] {
    font-size: 11px;
    transition: transform 0.2s;
}

.po-zurueck:hover .sc-pfeil[b-hliev1hyvi] {
    transform: translateX(-3px);
}

/* ---------- Login ---------- */
.sc-login-seite[b-hliev1hyvi] {
    align-items: center;
}

.sc-login[b-hliev1hyvi] {
    width: 420px;
    max-width: 100%;
}

.sc-login-kopf[b-hliev1hyvi] {
    justify-content: center;
    font-size: 0.95rem;
    padding: 14px 16px;
}

.sc-login .po-panel-inhalt[b-hliev1hyvi] {
    padding: 20px 26px 26px;
}

.sc-login-feld .po-label[b-hliev1hyvi] {
    margin-top: 0;
}

.sc-login-feld[b-hliev1hyvi] {
    margin-bottom: 16px;
}

.sc-login-feld-letztes[b-hliev1hyvi] {
    margin-bottom: 24px;
}

.sc-login-knopf[b-hliev1hyvi] {
    min-height: 46px;
    font-size: 1rem;
}

.sc-login-zurueck[b-hliev1hyvi] {
    margin-top: 12px;
}

/* ---------- Titel ---------- */
.scolaris-header[b-hliev1hyvi] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-section[b-hliev1hyvi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(100%, 720px);
}

/* ---------- Hauptteil: zwei Fenster ---------- */
.scolaris-main[b-hliev1hyvi] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(12px, 2.4vw, 28px);
    align-items: start;
    align-content: center;   /* bei hohen Fenstern mittig zwischen Titel und Zähler */
    flex: 1;
    width: 100%;
}

/* Werkzeuge: wie die Einträge auf /pruefungsvorbereitung */
.button-grid[b-hliev1hyvi] {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.6vh, 12px);
    padding: clamp(12px, 2vh, 18px);
}

.scolaris-btn-wide[b-hliev1hyvi] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: clamp(54px, 9vh, 72px);
    padding: 10px 16px;
    color: var(--po-text);
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid var(--po-akzent-rand);
    border-radius: 10px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.scolaris-btn-wide:hover[b-hliev1hyvi] {
    border-color: var(--po-akzent);
    background: rgba(251, 191, 36, 0.08);
}

.scolaris-btn-wide .btn-icon[b-hliev1hyvi] {
    flex: none;
    width: 34px;
    font-size: 22px;
    text-align: center;
}

.scolaris-btn-wide .btn-text[b-hliev1hyvi] {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: var(--po-akzent);
}

.scolaris-btn-wide .btn-text small[b-hliev1hyvi] {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--po-text-2);
}

.btn-pfeil[b-hliev1hyvi] {
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--po-akzent);
    transition: transform 0.15s;
}

.scolaris-btn-wide:hover .btn-pfeil[b-hliev1hyvi] {
    transform: translateX(3px);
}

/* Prüfung erzeugen */
.sc-formular[b-hliev1hyvi] {
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 2vh, 18px);
}

.sc-formular .po-label:first-child[b-hliev1hyvi] {
    margin-top: 0;
}

.picker-row[b-hliev1hyvi] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
}

.generate-btn[b-hliev1hyvi] {
    height: clamp(46px, 7vh, 56px);
    margin-top: clamp(12px, 2vh, 18px);
    font-size: 1rem;
    letter-spacing: 0.04em;
}

/* ---------- Zähler ---------- */
.scolaris-footer[b-hliev1hyvi] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding-top: 4px;
}

.counter-section[b-hliev1hyvi] {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 8px 20px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--po-akzent-rand);
    border-radius: 10px;
}

.counter-title[b-hliev1hyvi] {
    font: 700 0.68rem var(--po-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--po-text-3);
}

.counter-value[b-hliev1hyvi] {
    font: 700 clamp(24px, 4vh, 34px) var(--po-titel);
    color: var(--po-akzent);
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

/* ---------- Schmale Fenster: ein Fenster unter dem anderen ---------- */
@media (max-width: 800px) {
    .scolaris-main[b-hliev1hyvi] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .sc-login .po-panel-inhalt[b-hliev1hyvi] {
        padding: 16px;
    }
}
/* /Pages/Social.razor.rz.scp.css */
/* ========================================================
   DIE CYBER-KARTE
   ======================================================== */
.cyber-terminal-card[b-splgaahz60] {
    position: relative;
    width: 100%;
    /* 750px Inhalt + Polsterung (5rem) + Rand – nie breiter als die Seite (vorher ragte die Karte bei schmalen Fenstern rechts heraus) */
    max-width: min(1400px, calc(100% - 5rem - 2px));
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 
        2px 2px 0 #000000,
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #404040;
    border-radius: 18px;
    padding: 6px;
    overflow: hidden;
    font-family: 'Rajdhani', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Animiertes Raster IN der Karte */
.cyber-grid-bg[b-splgaahz60] {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background-image: linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    transform: perspective(300px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: gridMove-b-splgaahz60 8s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes gridMove-b-splgaahz60 {
    0% {
        transform: perspective(300px) rotateX(60deg) translateY(0) translateZ(-200px);
    }

    100% {
        transform: perspective(300px) rotateX(60deg) translateY(30px) translateZ(-200px);
    }
}

/* Inhalts-Ebene über dem Raster im versenkten Bildschirm */
.cyber-content-layer[b-splgaahz60] {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(3, 7, 18, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 2px 2px 0 #000000;
    border-radius: 12px;
    padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.2rem, 3vw, 2.4rem);
    box-sizing: border-box;
    overflow: hidden;
}

/* ========================================================
   GLITCH HEADER
   ======================================================== */
.cyber-glitch-title[b-splgaahz60] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 2px 2px 0px #0ea5e9, -2px -2px 0px #f43f5e;
    letter-spacing: 2px;
}

.cyber-divider[b-splgaahz60] {
    height: 2px;
    width: 60px;
    background: #0ea5e9;
    margin: 8px auto;
    box-shadow: 0 0 10px #0ea5e9;
}

.cyber-subtitle[b-splgaahz60] {
    color: #38bdf8;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0;
}

/* ========================================================
   ECHTES CSS GRID (Hier passiert die Magie!)
   ======================================================== */
.cyber-grid-layout[b-splgaahz60] {
    display: grid;
    /* Spalte 1: 240px breit (Video), Spalte 2: Nimmt den restlichen Platz (Buttons) */
    grid-template-columns: 240px 1fr;
    /* 3 gleich große Reihen */
    grid-template-rows: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
    align-items: center; /* Zentriert die Elemente vertikal in ihrer Grid-Zelle */
}

/* Die Video-Zelle überspannt alle 3 Reihen */
.cyber-video-cell[b-splgaahz60] {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========================================================
   HOLOGRAMM VIDEO
   ======================================================== */
.holo-video-container[b-splgaahz60] {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.holo-ring[b-splgaahz60] {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(56, 189, 248, 0.4);
    pointer-events: none;
}

.ring-1[b-splgaahz60] {
    width: 100%;
    height: 100%;
    animation: rotateRing-b-splgaahz60 15s linear infinite;
}

.ring-2[b-splgaahz60] {
    width: 115%;
    height: 115%;
    border: 1px solid rgba(244, 63, 94, 0.3);
    animation: rotateRing-b-splgaahz60 20s linear infinite reverse;
}

@keyframes rotateRing-b-splgaahz60 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.video-core[b-splgaahz60] {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
    background: #000;
}

.silly-video-box[b-splgaahz60] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.2) sepia(0.3) hue-rotate(180deg);
}

.scanline-overlay[b-splgaahz60] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient( 0deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 4px );
    pointer-events: none;
}

.system-status-text[b-splgaahz60] {
    font-family: monospace;
    color: #f43f5e;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.blink-text[b-splgaahz60] {
    animation: blink-b-splgaahz60 2s infinite;
}

@keyframes blink-b-splgaahz60 {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.3;
    }
}

/* ========================================================
   CYBER-PLATES (Die Social Links)
   ======================================================== */
.cyber-plate[b-splgaahz60] {
    box-sizing: border-box; /* 100% Breite inkl. Polsterung – sonst ragt jede Kachel rechts aus ihrer Spalte */
    /* Landen automatisch in Spalte 2, durch den Grid-Flow in die 3 Reihen */
    grid-column: 2 / 3;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.8rem 1rem;
    text-decoration: none;
    overflow: hidden;
    clip-path: polygon(0 0, 95% 0, 100% 25%, 100% 100%, 5% 100%, 0 75%);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.plate-circuit-line[b-splgaahz60] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #475569;
    transition: all 0.3s ease;
}

.plate-icon-box[b-splgaahz60] {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 1rem;
    margin-left: 0.5rem;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.icon-text[b-splgaahz60], .github-svg[b-splgaahz60] {
    transform: rotate(-45deg);
    font-size: 1.1rem;
    font-weight: 700;
    color: #94a3b8;
}

.github-svg[b-splgaahz60] {
    width: 20px;
    height: 20px;
}

.plate-content[b-splgaahz60] {
    flex-grow: 1;
}

.plate-label[b-splgaahz60] {
    display: block;
    color: #64748b;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.plate-title[b-splgaahz60] {
    color: #e2e8f0;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* ========================================================
   HOVER-EFFEKTE
   ======================================================== */
.cyber-plate:hover[b-splgaahz60] {
    background: rgba(15, 23, 42, 0.95);
    transform: translateX(6px);
}

    .cyber-plate:hover .plate-icon-box[b-splgaahz60] {
        transform: rotate(0deg) scale(1.05);
    }

    .cyber-plate:hover .icon-text[b-splgaahz60], .cyber-plate:hover .github-svg[b-splgaahz60] {
        transform: rotate(0deg);
    }

/* LINKEDIN GLOW */
.linkedin-plate:hover[b-splgaahz60] {
    border-color: #0a66c2;
    box-shadow: inset 0 0 15px rgba(10, 102, 194, 0.2);
}

    .linkedin-plate:hover .plate-circuit-line[b-splgaahz60] {
        background: #0a66c2;
        box-shadow: 0 0 15px #0a66c2;
    }

    .linkedin-plate:hover .plate-title[b-splgaahz60] {
        color: #0a66c2;
        text-shadow: 0 0 10px rgba(10, 102, 194, 0.5);
    }

    .linkedin-plate:hover .icon-text[b-splgaahz60] {
        color: #0a66c2;
    }

/* GITHUB GLOW */
.github-plate:hover[b-splgaahz60] {
    border-color: #ffffff;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.15);
}

    .github-plate:hover .plate-circuit-line[b-splgaahz60] {
        background: #ffffff;
        box-shadow: 0 0 15px #ffffff;
    }

    .github-plate:hover .plate-title[b-splgaahz60] {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    .github-plate:hover .github-svg[b-splgaahz60] {
        color: #ffffff;
    }

/* YOUTUBE GLOW */
.youtube-plate:hover[b-splgaahz60] {
    border-color: #ff0000;
    box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.2);
}

    .youtube-plate:hover .plate-circuit-line[b-splgaahz60] {
        background: #ff0000;
        box-shadow: 0 0 15px #ff0000;
    }

    .youtube-plate:hover .plate-title[b-splgaahz60] {
        color: #ff0000;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }

    .youtube-plate:hover .icon-text[b-splgaahz60] {
        color: #ff0000;
    }

/* ========================================================
   TERMINAL ABORT BUTTON
   ======================================================== */
.cyber-abort-btn[b-splgaahz60] {
    display: inline-block;
    color: #64748b;
    text-decoration: none;
    font-family: monospace;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}

.btn-bracket[b-splgaahz60] {
    color: #0ea5e9;
    font-weight: bold;
    transition: all 0.2s ease;
}

.cyber-abort-btn:hover[b-splgaahz60] {
    color: #f43f5e;
    text-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
}

    .cyber-abort-btn:hover .btn-bracket[b-splgaahz60] {
        color: #f43f5e;
        padding: 0 6px;
    }

/* ========================================================
   RESPONSIVE (Handy)
   ======================================================== */
@media (max-width: 768px) {
    .cyber-terminal-card[b-splgaahz60] {
        padding: 4px;
        max-width: 100%;
        border-radius: 12px;
    }

    /* Auf dem Handy bricht das Grid um, alles untereinander! */
    .cyber-grid-layout[b-splgaahz60] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .cyber-video-cell[b-splgaahz60] {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        margin-bottom: 1.5rem; /* Abstand nach unten zu den Buttons */
    }

    .cyber-plate[b-splgaahz60] {
        box-sizing: border-box; /* sonst 100% Breite + Polsterung = ragt rechts aus dem Bild */
        grid-column: 1 / 2; /* Buttons rutschen in die erste Spalte unter das Video */
        clip-path: polygon(0 0, 92% 0, 100% 25%, 100% 100%, 8% 100%, 0 75%);
    }

        .cyber-plate:hover[b-splgaahz60] {
            transform: translateY(-5px);
        }
}
/* /Pages/Webanalyse.razor.rz.scp.css */
/* ========================================================
   Webanalyse – oben das Gesamtbild, darunter jedes Design für sich
   ======================================================== */
.analytics-universe[b-bblgph8s7s] {
    background-color: #050905;
    min-height: 100vh;
    padding: 40px 16px 80px;
    font-family: 'Rajdhani', sans-serif;
    color: #e0e0e0;
    position: relative;
    overflow-x: hidden;
}

/* Hintergrund */
.cyber-grid[b-bblgph8s7s] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(74, 246, 38, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 246, 38, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
    pointer-events: none;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(3);
    animation: gridMove-b-bblgph8s7s 20s linear infinite;
}

@keyframes gridMove-b-bblgph8s7s {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0) scale(3); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(30px) scale(3); }
}

.neon-glow[b-bblgph8s7s] {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(74, 246, 38, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.top-left[b-bblgph8s7s] { top: -200px; left: -200px; }
.bottom-right[b-bblgph8s7s] { bottom: -200px; right: -200px; }

.analytics-container[b-bblgph8s7s] {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* ---------- Leiste oben ---------- */
.top-nav-bar[b-bblgph8s7s] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

.nav-btn[b-bblgph8s7s] {
    background: rgba(10, 20, 10, 0.8);
    border: 1px solid #4AF626;
    color: #4AF626;
    padding: 9px 18px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(74, 246, 38, 0.15);
    transition: all 0.25s ease;
}

    .nav-btn:hover:not(:disabled)[b-bblgph8s7s] {
        background: #4AF626;
        color: #050905;
        box-shadow: 0 0 20px rgba(74, 246, 38, 0.5);
    }

    .nav-btn:disabled[b-bblgph8s7s] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ---------- Kopf ---------- */
.seiten-kopf[b-bblgph8s7s] {
    text-align: center;
    margin-bottom: 32px;
}

.live-badge[b-bblgph8s7s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(74, 246, 38, 0.12);
    border: 1px solid #4AF626;
    color: #4AF626;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.pulse[b-bblgph8s7s] {
    width: 8px;
    height: 8px;
    background: #4AF626;
    border-radius: 50%;
    box-shadow: 0 0 10px #4AF626;
    animation: pulseAnim-b-bblgph8s7s 1.5s infinite;
}

@keyframes pulseAnim-b-bblgph8s7s {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

.seiten-titel[b-bblgph8s7s] {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.9rem, 6vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 12px #4AF626, 0 0 25px rgba(74, 246, 38, 0.6);
    letter-spacing: 2px;
    margin: 0 0 8px;
}

.untertitel[b-bblgph8s7s] {
    font-size: 1.05rem;
    color: #9ca3af;
    margin: 0;
}

/* ---------- Lade-/Fehlermeldung ---------- */
.meldung[b-bblgph8s7s] {
    text-align: center;
    padding: 48px 16px;
    color: #38bdf8;
    font-weight: 700;
}

    .meldung.fehler[b-bblgph8s7s] {
        color: #f87171;
        border: 1px solid rgba(248, 113, 113, 0.4);
        border-radius: 12px;
        background: rgba(127, 29, 29, 0.15);
    }

.spinner[b-bblgph8s7s] {
    width: 38px;
    height: 38px;
    margin: 0 auto 14px;
    border: 3px solid rgba(56, 189, 248, 0.25);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: drehen-b-bblgph8s7s 0.9s linear infinite;
}

@keyframes drehen-b-bblgph8s7s {
    to { transform: rotate(360deg); }
}

/* ---------- Blöcke (Gesamt + je Design) ---------- */
.block[b-bblgph8s7s] {
    margin-bottom: 32px;
    padding: 22px;
    background: rgba(10, 18, 10, 0.78);
    border: 1px solid rgba(74, 246, 38, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.block-titel[b-bblgph8s7s] {
    margin: 0 0 14px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}

/* ---------- Gesamt: Kennzahlen ---------- */
.kpi-raster[b-bblgph8s7s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.kpi[b-bblgph8s7s] {
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 0;
}

    .kpi.gross[b-bblgph8s7s] {
        grid-column: 1 / -1;
        text-align: center;
        padding: 20px;
        border-color: rgba(74, 246, 38, 0.4);
    }

.kpi-label[b-bblgph8s7s] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9ca3af;
}

.kpi-wert[b-bblgph8s7s] {
    margin: 4px 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
}

.kpi.gross .kpi-wert[b-bblgph8s7s] {
    font-size: clamp(2.4rem, 9vw, 3.6rem);
}

.kpi-wert.klein-text[b-bblgph8s7s] {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.kpi-info[b-bblgph8s7s] {
    font-size: 0.95rem;
    color: #94a3b8;
}

.gruen[b-bblgph8s7s] { color: #4AF626; text-shadow: 0 0 10px rgba(74, 246, 38, 0.5); }
.cyan[b-bblgph8s7s] { color: #38bdf8; text-shadow: 0 0 10px rgba(56, 189, 248, 0.5); }
.lila[b-bblgph8s7s] { color: #c084fc; text-shadow: 0 0 10px rgba(192, 132, 252, 0.5); }
.gold[b-bblgph8s7s] { color: #facc15; text-shadow: 0 0 10px rgba(250, 204, 21, 0.5); }
.pink[b-bblgph8s7s] { color: #ff2d95; text-shadow: 0 0 10px rgba(255, 45, 149, 0.5); }

/* Casinos */
.casinos[b-bblgph8s7s] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mini-raster[b-bblgph8s7s] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
    text-align: center;
}

    .mini-raster div[b-bblgph8s7s] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .mini-raster span[b-bblgph8s7s] {
        font-size: 0.75rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #9ca3af;
    }

    .mini-raster b[b-bblgph8s7s] {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.35rem;
        overflow-wrap: anywhere;
    }

/* Verteilung */
.verteilung[b-bblgph8s7s] {
    margin-top: 6px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.verteilung-balken[b-bblgph8s7s] {
    display: flex;
    height: 14px;
    margin: 10px 0 12px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

    .verteilung-balken span[b-bblgph8s7s] {
        display: block;
        height: 100%;
        min-width: 4px;
    }

.legende[b-bblgph8s7s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: #cbd5e1;
}

    .legende li[b-bblgph8s7s] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .legende i[b-bblgph8s7s] {
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }

    .legende b[b-bblgph8s7s] {
        color: #fff;
    }

/* ---------- Ein Design ---------- */
.design[b-bblgph8s7s] {
    --akzent: #4AF626;
    border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
    border-left: 5px solid var(--akzent);
}

.design-kopf[b-bblgph8s7s] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.design .block-titel[b-bblgph8s7s] {
    margin-bottom: 2px;
    color: var(--akzent);
}

.design-untertitel[b-bblgph8s7s] {
    margin: 0;
    color: #9ca3af;
}

.design-summe[b-bblgph8s7s] {
    text-align: right;
}

    .design-summe b[b-bblgph8s7s] {
        display: block;
        font-family: 'Orbitron', sans-serif;
        font-size: 1.8rem;
        color: #fff;
        line-height: 1.1;
    }

    .design-summe span[b-bblgph8s7s] {
        font-size: 0.85rem;
        color: #94a3b8;
    }

.leer[b-bblgph8s7s] {
    margin: 0;
    padding: 8px 0;
    color: #94a3b8;
    font-style: italic;
}

.seiten-liste[b-bblgph8s7s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.seite-zeile[b-bblgph8s7s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rang[b-bblgph8s7s] {
    flex: none;
    width: 40px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}

    .rang.gold[b-bblgph8s7s] { color: #facc15; text-shadow: none; }
    .rang.silber[b-bblgph8s7s] { color: #cbd5e1; }
    .rang.bronze[b-bblgph8s7s] { color: #fb923c; }

.seite-info[b-bblgph8s7s] {
    flex: 1;
    min-width: 0;
}

.seite-kopf[b-bblgph8s7s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 5px;
}

.seite-name[b-bblgph8s7s] {
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .seite-name:hover[b-bblgph8s7s] {
        color: var(--akzent);
    }

.seite-zahlen[b-bblgph8s7s] {
    flex: none;
    white-space: nowrap;
    color: #fff;
}

    .seite-zahlen b[b-bblgph8s7s] {
        font-family: 'Orbitron', sans-serif;
        font-size: 1rem;
    }

    .seite-zahlen small[b-bblgph8s7s] {
        margin-left: 6px;
        font-size: 0.85rem;
        color: #94a3b8;
    }

.balken[b-bblgph8s7s] {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.balken-fuell[b-bblgph8s7s] {
    height: 100%;
    background: var(--akzent);
    border-radius: 4px;
    box-shadow: 0 0 8px var(--akzent);
    transition: width 0.6s ease;
}

.fuss[b-bblgph8s7s] {
    text-align: center;
    margin-top: 24px;
    font-size: 0.85rem;
    color: #64748b;
}

/* ---------- Smartphone ---------- */
@media (max-width: 576px) {
    .analytics-universe[b-bblgph8s7s] {
        padding: 24px 8px 60px;
    }

    .block[b-bblgph8s7s] {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .design-kopf[b-bblgph8s7s] {
        align-items: flex-start;
    }

    .design-summe[b-bblgph8s7s] {
        text-align: left;
    }

    .rang[b-bblgph8s7s] {
        width: 30px;
        font-size: 0.7rem;
    }

    .seite-zeile[b-bblgph8s7s] {
        gap: 8px;
    }

    .seite-name[b-bblgph8s7s] {
        font-size: 1rem;
        display: inline-block;
        padding: 7px 0; /* größere Tippfläche (vorher nur ca. 23px hoch) */
    }

    .kpi-wert[b-bblgph8s7s] {
        font-size: 1.7rem;
    }

    .mini-raster b[b-bblgph8s7s] {
        font-size: 1.1rem;
    }
}
/* /Pages/Websites.razor.rz.scp.css */
.projects-universe[b-yc7nj7y7gc] {
    background-color: #050905;
    min-height: 100vh;
    padding: 60px 20px;
    font-family: 'Rajdhani', sans-serif;
    color: #e0e0e0;
    position: relative;
    overflow: hidden;
}

/* Background Effects */
.cyber-grid[b-yc7nj7y7gc] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(74, 246, 38, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 246, 38, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
    pointer-events: none;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(3);
    animation: gridMove-b-yc7nj7y7gc 20s linear infinite;
}

@keyframes gridMove-b-yc7nj7y7gc {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0) scale(3); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(30px) scale(3); }
}

.neon-glow[b-yc7nj7y7gc] {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(74, 246, 38, 0.1) 0%, rgba(0,0,0,0) 70%);
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.top-left[b-yc7nj7y7gc] { top: -200px; left: -200px; }
.bottom-right[b-yc7nj7y7gc] { bottom: -200px; right: -200px; }

/* Container */
.projects-container[b-yc7nj7y7gc] {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Header */
.glitch-title[b-yc7nj7y7gc] {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #4AF626, 0 0 20px #4AF626;
    margin-bottom: 5px;
    letter-spacing: 2px;
}
.subtitle[b-yc7nj7y7gc] {
    font-size: 1.2rem;
    color: #4AF626;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Grid */
.project-grid[b-yc7nj7y7gc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Cards */
.cyber-card[b-yc7nj7y7gc] {
    background: rgba(10, 20, 10, 0.8);
    border: 1px solid rgba(74, 246, 38, 0.3);
    border-radius: 4px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.active-card[b-yc7nj7y7gc] {
    cursor: pointer;
}
.active-card:hover[b-yc7nj7y7gc] {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 15px rgba(74, 246, 38, 0.3);
    border-color: #4AF626;
}

.locked-card[b-yc7nj7y7gc] {
    opacity: 0.7;
    background: rgba(10, 10, 10, 0.8);
    border-color: #333;
    user-select: none;
}

/* Animated Borders for Active Card */
.card-borders span[b-yc7nj7y7gc] {
    position: absolute;
    background: #4AF626;
    transition: all 0.3s;
}
.border-top[b-yc7nj7y7gc] { top: 0; left: 0; width: 0; height: 2px; }
.border-right[b-yc7nj7y7gc] { top: 0; right: 0; width: 2px; height: 0; }
.border-bottom[b-yc7nj7y7gc] { bottom: 0; right: 0; width: 0; height: 2px; }
.border-left[b-yc7nj7y7gc] { bottom: 0; left: 0; width: 2px; height: 0; }

.active-card:hover .border-top[b-yc7nj7y7gc] { width: 100%; }
.active-card:hover .border-right[b-yc7nj7y7gc] { height: 100%; transition-delay: 0.1s; }
.active-card:hover .border-bottom[b-yc7nj7y7gc] { width: 100%; transition-delay: 0.2s; }
.active-card:hover .border-left[b-yc7nj7y7gc] { height: 100%; transition-delay: 0.3s; }

/* Status Badges */
.status-badge[b-yc7nj7y7gc] {
    position: absolute;
    top: -10px;
    right: 15px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}
.online[b-yc7nj7y7gc] {
    background: #113311;
    color: #4AF626;
    border: 1px solid #4AF626;
    box-shadow: 0 0 10px rgba(74, 246, 38, 0.2);
}
.pulse[b-yc7nj7y7gc] {
    width: 6px;
    height: 6px;
    background: #4AF626;
    border-radius: 50%;
    animation: blink-b-yc7nj7y7gc 1.5s infinite;
}
@keyframes blink-b-yc7nj7y7gc {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px #4AF626; }
    50% { opacity: 0.4; box-shadow: none; }
}

.offline[b-yc7nj7y7gc] {
    background: #222;
    color: #777;
    border: 1px solid #444;
}

/* Content */
.icon-box[b-yc7nj7y7gc] {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    color: #4AF626;
}
.locked-card .icon-box[b-yc7nj7y7gc] {
    color: #555;
}

.card-title[b-yc7nj7y7gc] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 10px;
}
.card-desc[b-yc7nj7y7gc] {
    font-size: 1rem;
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 70px;
}

/* Tech Stack */
.tech-stack[b-yc7nj7y7gc] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.tech-stack span[b-yc7nj7y7gc] {
    font-size: 0.8rem;
    background: rgba(74, 246, 38, 0.1);
    color: #4AF626;
    padding: 3px 8px;
    border: 1px solid rgba(74, 246, 38, 0.3);
    border-radius: 2px;
}

/* Buttons */
.launch-btn[b-yc7nj7y7gc] {
    width: 100%;
    background: transparent;
    color: #4AF626;
    border: 1px solid #4AF626;
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.active-card:hover .launch-btn:not(.preload-btn)[b-yc7nj7y7gc] {
    background: #4AF626;
    color: #000;
    box-shadow: 0 0 15px rgba(74, 246, 38, 0.5);
}

.launch-btn.preload-btn[b-yc7nj7y7gc] {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.55);
    border-color: var(--btn-farbe, #ffc27a);
    color: var(--btn-farbe, #ffc27a);
    z-index: 1;
}

.launch-btn.preload-btn .preload-fill[b-yc7nj7y7gc] {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: linear-gradient(90deg, #10b981, var(--fill-farbe, #4AF626));
    transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.launch-btn.preload-btn .preload-label[b-yc7nj7y7gc] {
    position: relative;
    z-index: 2;
    letter-spacing: 0.06em;
}

.launch-btn.preload-btn:hover:not(.ist-bereit):not(.laedt)[b-yc7nj7y7gc] {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.launch-btn.preload-btn.laedt[b-yc7nj7y7gc] {
    border-color: var(--fill-farbe, #4AF626);
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    cursor: progress;
}

.launch-btn.preload-btn.ist-bereit[b-yc7nj7y7gc] {
    border-color: var(--fill-farbe, #4AF626);
    color: #041206;
    box-shadow: 0 0 18px rgba(74, 246, 38, 0.45);
}

.launch-btn.preload-btn.ist-bereit:hover[b-yc7nj7y7gc] {
    filter: brightness(1.1);
    box-shadow: 0 0 24px rgba(74, 246, 38, 0.7);
}

/* Diagonales Absperrband „UNDER CONSTRUCTION“ für Alternative 4 */
.under-construction-card[b-yc7nj7y7gc] {
    position: relative;
    overflow: hidden;
}

.absperrband-wrap[b-yc7nj7y7gc] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 25;
}

.absperrband[b-yc7nj7y7gc] {
    position: absolute;
    top: 36px;
    right: -60px;
    width: 290px;
    padding: 6px 0;
    background: repeating-linear-gradient(
        -45deg,
        #facc15 0px,
        #facc15 16px,
        #111111 16px,
        #111111 32px
    );
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 12px rgba(250, 204, 21, 0.45);
    transform: rotate(28deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.absperrband-text[b-yc7nj7y7gc] {
    background: #09090b;
    color: #facc15;
    font-family: 'Orbitron', 'Impact', sans-serif;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding: 3px 12px;
    border: 1px solid #facc15;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

/* Beta-Tag für Alternative 5 „At Home“ */
.btn-beta-tag[b-yc7nj7y7gc] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 4px;
    background: #fb923c;
    color: #000000;
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.6);
    vertical-align: middle;
    line-height: 1.2;
    text-shadow: none;
}

.launch-btn.preload-btn.ist-bereit .btn-beta-tag[b-yc7nj7y7gc] {
    background: #041206;
    color: #4AF626;
    border: 1px solid #4AF626;
    box-shadow: 0 0 8px rgba(74, 246, 38, 0.6);
}

/* PIN Modal für gesperrte Bereiche */
.pin-modal-overlay[b-yc7nj7y7gc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pin-fade-in-b-yc7nj7y7gc 0.22s ease-out;
}

.pin-modal-card[b-yc7nj7y7gc] {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: rgba(15, 23, 18, 0.96);
    border: 1px solid #facc15;
    border-radius: 8px;
    box-shadow: 0 0 35px rgba(250, 204, 21, 0.25), 0 20px 40px rgba(0, 0, 0, 0.8);
    padding: 30px;
    font-family: 'Orbitron', sans-serif;
    color: #f1f5f9;
}

.pin-modal-close[b-yc7nj7y7gc] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: 1px solid rgba(250, 204, 21, 0.4);
    color: #facc15;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pin-modal-close:hover[b-yc7nj7y7gc] {
    background: #facc15;
    color: #000;
    box-shadow: 0 0 10px #facc15;
}

.pin-modal-header[b-yc7nj7y7gc] {
    text-align: center;
    margin-bottom: 22px;
}

.pin-modal-icon[b-yc7nj7y7gc] {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 8px;
}

.pin-modal-header h3[b-yc7nj7y7gc] {
    color: #facc15;
    font-size: 1.3rem;
    margin: 0 0 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pin-modal-header p[b-yc7nj7y7gc] {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
}

.pin-modal-body[b-yc7nj7y7gc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pin-input[b-yc7nj7y7gc] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(250, 204, 21, 0.5);
    border-radius: 4px;
    color: #facc15;
    font-family: 'Orbitron', monospace;
    font-size: 1.15rem;
    letter-spacing: 0.25em;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pin-input:focus[b-yc7nj7y7gc] {
    border-color: #facc15;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}

.pin-fehler[b-yc7nj7y7gc] {
    color: #ef4444;
    font-size: 0.85rem;
    text-align: center;
    margin: -4px 0 0;
    font-family: system-ui, -apple-system, sans-serif;
}

.pin-modal-aktionen[b-yc7nj7y7gc] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.pin-btn[b-yc7nj7y7gc] {
    flex: 1;
    padding: 11px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.pin-btn.primary[b-yc7nj7y7gc] {
    background: #facc15;
    color: #000;
    border: 1px solid #facc15;
}

.pin-btn.primary:hover:not(:disabled)[b-yc7nj7y7gc] {
    background: #fef08a;
    box-shadow: 0 0 15px #facc15;
}

.pin-btn.primary:disabled[b-yc7nj7y7gc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pin-btn.secondary[b-yc7nj7y7gc] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.pin-btn.secondary:hover[b-yc7nj7y7gc] {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

@keyframes pin-fade-in-b-yc7nj7y7gc {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.back-btn[b-yc7nj7y7gc] {
    background: transparent;
    color: #aaa;
    border: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}
.back-btn:hover[b-yc7nj7y7gc] {
    color: #fff;
    text-shadow: 0 0 8px #fff;
}

/* Locked Card Progress */
.progress-bar-container[b-yc7nj7y7gc] {
    width: 100%;
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar[b-yc7nj7y7gc] {
    height: 100%;
    background: #555;
}
.progress-text[b-yc7nj7y7gc] {
    font-size: 0.8rem;
    color: #666;
    display: block;
    margin-top: 5px;
    font-family: 'Orbitron', sans-serif;
}

.projects-back-nav[b-yc7nj7y7gc] { position: absolute; top: 20px; left: 20px; z-index: 1000; }
.cyber-back-btn[b-yc7nj7y7gc] { background: rgba(0,0,0,0.5); border: 1px solid var(--neon-cyan, #0ff); color: var(--neon-cyan, #0ff); text-transform: uppercase; font-family: 'Orbitron', sans-serif; letter-spacing: 2px; transition: all 0.3s ease; }
.cyber-back-btn:hover[b-yc7nj7y7gc] { background: var(--neon-cyan, #0ff); color: #000; box-shadow: 0 0 15px var(--neon-cyan, #0ff); }
/* /Pruefungsvorbereitung/Pages/Pruefungsvorbereitung.razor.rz.scp.css */
/* Prüfungsvorbereitung IHK – 3D-Bühne & 2D-Ansicht */
.pv[b-mcc7x8rslz] {
    min-height: 100vh;
    min-height: 100dvh;
    color: #eef3fa;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: #050711;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

.pv.modus-3d[b-mcc7x8rslz] {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

/* ==========================================================================
   KOPFLEISTE
   ========================================================================== */
.pv-kopf[b-mcc7x8rslz] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(7, 11, 20, 0.85);
    backdrop-filter: blur(10px);
    z-index: 50;
    flex-shrink: 0;
}

.pv-zurueck[b-mcc7x8rslz] {
    min-height: 38px;
    padding: 0.35rem 1.1rem;
    color: #7dd3fc;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.55);
    border-radius: 6px;
    font: 600 0.85rem "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pv-zurueck:hover[b-mcc7x8rslz] {
    color: #fff;
    border-color: #38bdf8;
    background: rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}

.pv-titel-block[b-mcc7x8rslz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pv-logo[b-mcc7x8rslz] {
    margin: 0;
    font-family: "Orbitron", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pv-kopf p[b-mcc7x8rslz] {
    margin: 0;
    font-size: 0.78rem;
    color: #94a3b8;
}

.pv-leiste-rechts[b-mcc7x8rslz] {
    margin-left: auto;
}

.pv-umschalter[b-mcc7x8rslz] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #fbbf24;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pv-umschalter:hover[b-mcc7x8rslz] {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.35);
}

/* ==========================================================================
   3D-BÜHNE & KANVAS
   ========================================================================== */
.pv-3d-huelle[b-mcc7x8rslz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: pv-einblenden-b-mcc7x8rslz 0.9s ease-out;
}

@keyframes pv-einblenden-b-mcc7x8rslz {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pv-canvas[b-mcc7x8rslz] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Schwebender Hinweis (Stage 1: Übersicht) */
.pv-3d-tipp[b-mcc7x8rslz] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(11, 17, 32, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.82rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: pv-auftauchen-b-mcc7x8rslz 0.8s ease-out;
}

.pv-tipp-puls[b-mcc7x8rslz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: pv-pulsieren-b-mcc7x8rslz 1.8s infinite;
}

@keyframes pv-pulsieren-b-mcc7x8rslz {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

@keyframes pv-auftauchen-b-mcc7x8rslz {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   HUD-DETAILKARTE (Stage 2: Detail-Fokus)
   ========================================================================== */
.pv-hud-karte[b-mcc7x8rslz] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(10, 16, 31, 0.88);
    backdrop-filter: blur(16px);
    border: 2px solid rgba(251, 191, 36, 0.65);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.75),
        0 0 30px rgba(251, 191, 36, 0.25);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 40;
    animation: pv-hud-rein-b-mcc7x8rslz 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pv-hud-rein-b-mcc7x8rslz {
    from { opacity: 0; transform: translate(-50%, 30px) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.pv-hud-kopf[b-mcc7x8rslz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pv-hud-titel-zeile[b-mcc7x8rslz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pv-hud-symbol[b-mcc7x8rslz] {
    font-size: 2.2rem;
    line-height: 1;
}

.pv-hud-titel-zeile h3[b-mcc7x8rslz] {
    margin: 0;
    font-family: "Orbitron", sans-serif;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: 0.03em;
}

.pv-hud-sub[b-mcc7x8rslz] {
    font-size: 0.75rem;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.pv-hud-stepper[b-mcc7x8rslz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pv-step-btn[b-mcc7x8rslz] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pv-step-btn:hover[b-mcc7x8rslz] {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
    color: #38bdf8;
}

.pv-step-btn.schliessen:hover[b-mcc7x8rslz] {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #ef4444;
}

.pv-hud-beschreibung[b-mcc7x8rslz] {
    margin: 0;
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.5;
}

.pv-hud-aktionen[b-mcc7x8rslz] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pv-hud-start[b-mcc7x8rslz] {
    flex: 1;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #7c3aed 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45);
    transition: all 0.2s ease;
    letter-spacing: 0.04em;
}

.pv-hud-start:hover[b-mcc7x8rslz] {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.65);
}

.pv-hud-abbrechen[b-mcc7x8rslz] {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #94a3b8;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pv-hud-abbrechen:hover[b-mcc7x8rslz] {
    border-color: #fff;
    color: #fff;
}

/* ==========================================================================
   KLASSISCHE 2D-LISTE (FALLBACK)
   ========================================================================== */
.pv-inhalt[b-mcc7x8rslz] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 48px;
    width: 100%;
}

.pv-liste[b-mcc7x8rslz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-modul[b-mcc7x8rslz] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    color: inherit;
    text-align: left;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pv-modul:hover[b-mcc7x8rslz] {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
}

.pv-symbol[b-mcc7x8rslz] {
    flex: none;
    font-size: 1.8rem;
}

.pv-text[b-mcc7x8rslz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pv-titel[b-mcc7x8rslz] {
    font-weight: 600;
    font-size: 1.05rem;
    color: #f1f5f9;
}

.pv-beschreibung[b-mcc7x8rslz] {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.4;
}

.pv-pfeil[b-mcc7x8rslz] {
    margin-left: auto;
    color: #f59e0b;
    font-size: 1.2rem;
}

.pv-folgt[b-mcc7x8rslz] {
    text-align: center;
    padding: 12px;
    color: #64748b;
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .pv-hud-karte[b-mcc7x8rslz] {
        bottom: 16px;
        padding: 16px;
        width: 94%;
    }
    .pv-hud-symbol[b-mcc7x8rslz] {
        font-size: 1.8rem;
    }
    .pv-hud-titel-zeile h3[b-mcc7x8rslz] {
        font-size: 1.1rem;
    }
    .pv-hud-start[b-mcc7x8rslz] {
        padding: 10px 14px;
        font-size: 0.88rem;
    }
}
/* /SQL-Checker/Components/SqlcAufgabe.razor.rz.scp.css */
.aufgabe[b-wte7vljyc5] {
    background: var(--sqlc-panel);
    border: 1px solid var(--sqlc-akzent-rand);
    border-radius: 10px;
    box-shadow: var(--sqlc-schatten);
    padding: 18px 20px;
}

.kopf[b-wte7vljyc5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.kennung[b-wte7vljyc5] {
    font: 600 0.7rem var(--sqlc-titel);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sqlc-text-3);
}

.art[b-wte7vljyc5] {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sqlc-gelb-hell);
    border: 1px solid var(--sqlc-akzent-rand);
    color: var(--sqlc-gelb);
    font-weight: 600;
}

h2[b-wte7vljyc5] {
    margin: 8px 0 10px;
    font: 700 1.2rem var(--sqlc-titel);
    letter-spacing: 1px;
    color: var(--sqlc-akzent);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.text[b-wte7vljyc5] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--sqlc-text);
}

.hilfen[b-wte7vljyc5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.hilfe[b-wte7vljyc5] {
    min-height: 34px;
    padding: 4px 14px;
    border: 1px solid var(--sqlc-linie-2);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.95);
    color: var(--sqlc-text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.hilfe:hover[b-wte7vljyc5] {
    border-color: var(--sqlc-blau);
    background: rgba(14, 165, 233, 0.22);
    color: #fff;
}

.hilfe.offen[b-wte7vljyc5] {
    border-color: #fcd34d;
    background: var(--sqlc-akzent-verlauf);
    color: var(--sqlc-akzent-text);
    font-weight: 600;
}

.box[b-wte7vljyc5] {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.box p[b-wte7vljyc5] {
    margin: 0 0 8px;
}

.box pre[b-wte7vljyc5] {
    margin: 0;
    font-family: var(--sqlc-mono);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.theorie[b-wte7vljyc5] {
    background: var(--sqlc-blau-hell);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: var(--sqlc-text);
}

.theorie pre[b-wte7vljyc5] {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sqlc-feld);
    color: #7dd3fc;
}

.tipp[b-wte7vljyc5] {
    background: var(--sqlc-gelb-hell);
    border: 1px solid var(--sqlc-akzent-rand);
    color: var(--sqlc-text);
}

.loesung[b-wte7vljyc5] {
    background: var(--sqlc-feld);
    border: 1px dashed var(--sqlc-linie-2);
    color: #86efac;
}

.uebernehmen[b-wte7vljyc5] {
    margin-top: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(56, 189, 248, 0.7);
    border-radius: 6px;
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
/* /SQL-Checker/Components/SqlcBelegsatz.razor.rz.scp.css */
/* Belegsatz: dunkles Fenster (Notenblatt-Optik) mit einem hellen, gedruckt wirkenden Blatt darin */
.beleg-hintergrund[b-cnrpwnnj3t] {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 6, 14, 0.75);
    backdrop-filter: blur(3px);
}

.beleg-fenster[b-cnrpwnnj3t] {
    display: flex;
    flex-direction: column;
    width: min(940px, 100%);
    max-height: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: var(--sqlc-panel);
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    outline: none;
    animation: beleg-auf-b-cnrpwnnj3t 0.22s ease-out;
}

/* Nur Bewegung, keine Deckkraft: bleibt die Animation hängen (z. B. Hintergrund-Tab), ist das Fenster trotzdem sichtbar */
@keyframes beleg-auf-b-cnrpwnnj3t {
    from { transform: translateY(14px) scale(0.98); }
    to { transform: none; }
}

.beleg-leiste[b-cnrpwnnj3t] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 18px;
    background: rgba(251, 191, 36, 0.07);
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.beleg-leiste-titel[b-cnrpwnnj3t] {
    font: 700 0.9rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
}

.beleg-leiste-hinweis[b-cnrpwnnj3t] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--sqlc-text-3);
}

.beleg-zu[b-cnrpwnnj3t] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--sqlc-linie-2);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.95);
    color: var(--sqlc-text);
    cursor: pointer;
}

.beleg-zu:hover[b-cnrpwnnj3t] {
    border-color: var(--sqlc-blau);
    background: rgba(14, 165, 233, 0.22);
}

.beleg-scroll[b-cnrpwnnj3t] {
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(251, 191, 36, 0.06), transparent 70%),
        #0a1020;
}

/* ---------- Das Blatt ---------- */
.blatt[b-cnrpwnnj3t] {
    max-width: 820px;
    margin: 0 auto;
    padding: 34px 40px 22px;
    background: #fdfdf9;
    color: #111;
    font-family: Arial, "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.blatt-kopf[b-cnrpwnnj3t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid #111;
}

.blatt-art[b-cnrpwnnj3t] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #555;
}

.blatt-kopf h2[b-cnrpwnnj3t] {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.blatt-kasten[b-cnrpwnnj3t] {
    padding: 6px 12px;
    border: 1.5px solid #111;
    font-size: 12px;
    text-align: right;
    line-height: 1.35;
}

.blatt-kasten strong[b-cnrpwnnj3t] {
    font-size: 15px;
}

section[b-cnrpwnnj3t] {
    margin-bottom: 16px;
    break-inside: avoid;
}

h3[b-cnrpwnnj3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    border-bottom: 1px solid #999;
}

.nr[b-cnrpwnnj3t] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #111;
    font-size: 11px;
}

.syntax[b-cnrpwnnj3t] {
    margin: 0 0 6px;
    padding: 9px 12px;
    background: #f2f2ec;
    border-left: 3px solid #111;
    font-family: "Courier New", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #111;
    white-space: pre-wrap;
    overflow-x: auto;
}

.syntax i[b-cnrpwnnj3t],
code i[b-cnrpwnnj3t] {
    font-style: italic;
    color: #444;
}

code[b-cnrpwnnj3t] {
    font-family: "Courier New", Consolas, monospace;
    font-size: 12.5px;
    color: #111;
}

table[b-cnrpwnnj3t] {
    width: 100%;
    border-collapse: collapse;
}

.notation table td[b-cnrpwnnj3t] {
    padding: 4px 8px;
    border: 1px solid #bbb;
    font-size: 12.5px;
    vertical-align: top;
}

.notation table td:nth-child(odd)[b-cnrpwnnj3t] {
    width: 14%;
    background: #f2f2ec;
    white-space: nowrap;
}

.liste td[b-cnrpwnnj3t] {
    padding: 3px 8px;
    border-bottom: 1px solid #d4d4cc;
    vertical-align: top;
}

.liste td:first-child[b-cnrpwnnj3t] {
    width: 44%;
    font-family: "Courier New", Consolas, monospace;
    font-size: 12.5px;
    white-space: nowrap;
}

.zwei[b-cnrpwnnj3t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.zwei h3 + .liste[b-cnrpwnnj3t],
.zwei .anm + h3[b-cnrpwnnj3t] {
    margin-top: 0;
}

.zwei .anm + h3[b-cnrpwnnj3t] {
    margin-top: 14px;
}

.zwei .liste td:first-child[b-cnrpwnnj3t] {
    width: 52%;
}

.anm[b-cnrpwnnj3t] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #444;
}

.anm.warn[b-cnrpwnnj3t] {
    padding: 5px 9px;
    border: 1px solid #111;
    background: #fff8e1;
    color: #111;
}

.blatt-fuss[b-cnrpwnnj3t] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 6px;
    border-top: 1px solid #111;
    font-size: 10.5px;
    color: #555;
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .beleg-hintergrund[b-cnrpwnnj3t] {
        padding: 0;
    }

    .beleg-fenster[b-cnrpwnnj3t] {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .beleg-leiste-hinweis[b-cnrpwnnj3t] {
        display: none;
    }

    .beleg-zu[b-cnrpwnnj3t] {
        margin-left: auto;
    }

    .beleg-scroll[b-cnrpwnnj3t] {
        padding: 10px;
    }

    .blatt[b-cnrpwnnj3t] {
        padding: 20px 16px 14px;
        font-size: 13px;
    }

    .blatt-kopf h2[b-cnrpwnnj3t] {
        font-size: 19px;
    }

    .zwei[b-cnrpwnnj3t] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .liste td:first-child[b-cnrpwnnj3t] {
        white-space: normal;
    }

    /* Schreibweise: statt 4 Spalten je Zeile zwei Paare untereinander */
    .notation tr[b-cnrpwnnj3t] {
        display: grid;
        grid-template-columns: 34% 1fr;
    }

    .notation table td:nth-child(odd)[b-cnrpwnnj3t] {
        width: auto;
        white-space: normal;
    }
}
/* /SQL-Checker/Components/SqlcErDiagramm.razor.rz.scp.css */
.er[b-jx9l5b3je6] {
    display: block;
    width: 100%;
    height: auto;
}

.linie[b-jx9l5b3je6] {
    fill: none;
    stroke: #5b6b85;
    stroke-width: 1.5;
}

.kard[b-jx9l5b3je6] {
    font: 600 11px var(--sqlc-schrift);
    fill: var(--sqlc-blau);
}

.kasten[b-jx9l5b3je6] {
    fill: var(--sqlc-feld);
    stroke: rgba(251, 191, 36, 0.45);
}

.kasten-kopf[b-jx9l5b3je6] {
    fill: #d99a14;
}

.kasten-name[b-jx9l5b3je6] {
    font: 700 11px var(--sqlc-schrift);
    fill: var(--sqlc-akzent-text);
    text-anchor: middle;
}

.kasten-zeile[b-jx9l5b3je6] {
    font: 11px var(--sqlc-mono);
    fill: var(--sqlc-text);
}

tspan.pk[b-jx9l5b3je6] {
    fill: var(--sqlc-gelb);
    font-weight: 700;
}

tspan.fk[b-jx9l5b3je6] {
    fill: var(--sqlc-blau);
    font-weight: 700;
}
/* /SQL-Checker/Components/SqlcErgebnisTabelle.razor.rz.scp.css */
.ergebnis[b-ye2pp7hsk4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--sqlc-panel);
    border: 1px solid var(--sqlc-linie);
    border-top: 3px solid var(--sqlc-linie-2);
    border-radius: 10px;
    box-shadow: var(--sqlc-schatten);
    overflow: hidden;
}

.ergebnis.soll[b-ye2pp7hsk4] {
    border-color: var(--sqlc-akzent-rand);
    border-top-color: var(--sqlc-akzent);
}

.ergebnis.richtig[b-ye2pp7hsk4] {
    border-color: rgba(52, 211, 153, 0.4);
    border-top-color: var(--sqlc-gruen);
}

.ergebnis.falsch[b-ye2pp7hsk4] {
    border-color: rgba(248, 113, 113, 0.4);
    border-top-color: #f87171;
}

.titel[b-ye2pp7hsk4] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 14px;
    font: 700 0.74rem var(--sqlc-titel);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sqlc-text);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--sqlc-linie);
}

.soll .titel[b-ye2pp7hsk4] {
    color: var(--sqlc-akzent);
}

.richtig .titel[b-ye2pp7hsk4] {
    color: var(--sqlc-gruen);
}

.falsch .titel[b-ye2pp7hsk4] {
    color: #f87171;
}

.anzahl[b-ye2pp7hsk4] {
    font: 400 0.78rem var(--sqlc-schrift);
    letter-spacing: 0;
    text-transform: none;
    color: var(--sqlc-text-2);
}

.leer[b-ye2pp7hsk4] {
    margin: 0;
    padding: 14px;
    font-size: 0.85rem;
    color: var(--sqlc-text-2);
}

.fehler[b-ye2pp7hsk4] {
    margin: 0;
    padding: 14px;
    font-size: 0.88rem;
    color: var(--sqlc-rot);
    background: var(--sqlc-rot-hell);
}

.rahmen[b-ye2pp7hsk4] {
    max-height: 360px;
    overflow: auto;
}

table[b-ye2pp7hsk4] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sqlc-mono);
    font-size: 0.8rem;
}

th[b-ye2pp7hsk4] {
    position: sticky;
    top: 0;
    padding: 6px 10px;
    background: #141d35;
    color: #7dd3fc;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--sqlc-linie);
}

td[b-ye2pp7hsk4] {
    padding: 5px 10px;
    color: var(--sqlc-text);
    white-space: nowrap;
    border-bottom: 1px solid var(--sqlc-linie);
}

tbody tr:nth-child(even) td[b-ye2pp7hsk4] {
    background: var(--sqlc-zebra);
}

td.null[b-ye2pp7hsk4] {
    color: var(--sqlc-text-3);
    font-style: italic;
}
/* /SQL-Checker/Components/SqlcSchema.razor.rz.scp.css */
.schema[b-soetav096k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.kopf[b-soetav096k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kopf h3[b-soetav096k] {
    margin: 0;
    font: 700 0.85rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
}

.zu[b-soetav096k] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--sqlc-text-2);
    cursor: pointer;
}

.zu:hover[b-soetav096k] {
    background: var(--sqlc-hover);
    color: #fff;
}

.reiter[b-soetav096k] {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #334155;
}

.reiter button[b-soetav096k] {
    flex: 1;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    min-height: 34px;
    color: var(--sqlc-text);
    font: 700 0.85rem var(--sqlc-schrift);
    cursor: pointer;
}

.reiter button:hover:not(.aktiv)[b-soetav096k] {
    background: rgba(56, 189, 248, 0.14);
}

.reiter button.aktiv[b-soetav096k] {
    color: var(--sqlc-akzent-text);
    background: var(--sqlc-akzent-verlauf);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* ---------- ER-Diagramm ---------- */
.er-knopf[b-soetav096k] {
    position: relative;
    display: block;
    width: 100%;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: zoom-in;
}

.er-knopf:hover[b-soetav096k] {
    border-color: var(--sqlc-akzent-rand);
    background: rgba(251, 191, 36, 0.05);
}

.lupe[b-soetav096k] {
    position: absolute;
    right: 8px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sqlc-akzent-verlauf);
    color: var(--sqlc-akzent-text);
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s;
}

.er-knopf:hover .lupe[b-soetav096k],
.er-knopf:focus-visible .lupe[b-soetav096k] {
    opacity: 1;
}

/* ---------- Vergrößertes Fenster ---------- */
.gross-hintergrund[b-soetav096k] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 6, 14, 0.72);
    backdrop-filter: blur(3px);
}

.gross-fenster[b-soetav096k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(1280px, 100%);
    max-height: 100%;
    padding: 18px 22px;
    border-radius: 12px;
    background:
        radial-gradient(50vmax 30vmax at 100% 0%, rgba(245, 158, 11, 0.08), transparent 70%),
        var(--sqlc-panel);
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    outline: none;
    cursor: default;
}

.gross-kopf[b-soetav096k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gross-kopf h3[b-soetav096k] {
    margin: 0;
    font: 700 1rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.gross-inhalt[b-soetav096k] {
    min-height: 0;
    overflow: auto;
}

/* Diagramm so groß wie möglich, ohne über die Fensterhöhe hinauszuragen (Seitenverhältnis 640 : 440) */
.gross-inhalt[b-soetav096k]  .er {
    width: min(100%, calc((100vh - 180px) * 640 / 440));
    margin-inline: auto;
}

.legende[b-soetav096k] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sqlc-text-2);
}

/* ---------- Tabellenliste ---------- */
.tabellen[b-soetav096k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

details[b-soetav096k] {
    border: 1px solid var(--sqlc-linie);
    border-radius: 8px;
    background: var(--sqlc-flaeche);
}

details[open][b-soetav096k] {
    border-color: var(--sqlc-akzent-rand);
}

summary[b-soetav096k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.t-name[b-soetav096k] {
    font-family: var(--sqlc-mono);
    font-weight: 600;
    color: var(--sqlc-akzent);
}

.t-zahl[b-soetav096k] {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--sqlc-text-3);
}

.sicht[b-soetav096k] {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--sqlc-hover);
    color: var(--sqlc-text-2);
}

details ul[b-soetav096k] {
    list-style: none;
    margin: 0;
    padding: 0 10px 8px;
}

details li[b-soetav096k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.78rem;
    border-top: 1px solid var(--sqlc-linie);
}

.s-name[b-soetav096k] {
    font-family: var(--sqlc-mono);
    color: var(--sqlc-text);
}

.s-name.ist-pk[b-soetav096k] {
    text-decoration: underline;
}

.s-typ[b-soetav096k] {
    color: var(--sqlc-text-3);
    font-size: 0.72rem;
}

span.pk[b-soetav096k],
span.fk[b-soetav096k] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

span.pk[b-soetav096k] {
    background: var(--sqlc-gelb-hell);
    color: var(--sqlc-gelb);
}

span.fk[b-soetav096k] {
    background: var(--sqlc-blau-hell);
    color: var(--sqlc-blau);
}

/* ✕ im Schema-Kopf nur auf dem Handy (am Desktop ist das Schema fest) */
.kopf > .zu[b-soetav096k] {
    display: none;
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .kopf > .zu[b-soetav096k] {
        display: inline-block;
    }

    .gross-hintergrund[b-soetav096k] {
        padding: 8px;
    }

    .gross-fenster[b-soetav096k] {
        padding: 12px;
    }

    /* Diagramm in lesbarer Größe, seitlich wischen */
    .gross-inhalt[b-soetav096k]  .er {
        width: 820px;
        max-width: none;
    }
}
/* /SQL-Checker/Components/SqlcUebungsListe.razor.rz.scp.css */
.liste[b-zrtb66szlr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 12px 24px;
}

.kapitel h3[b-zrtb66szlr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0 6px;
    font: 700 0.66rem var(--sqlc-titel);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
}

.kapitel-nr[b-zrtb66szlr] {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--sqlc-gelb-hell);
    border: 1px solid var(--sqlc-akzent-rand);
    color: var(--sqlc-akzent);
    font-size: 0.66rem;
}

.kapitel-titel[b-zrtb66szlr] {
    flex: 1;
}

.kapitel-zahl[b-zrtb66szlr] {
    font-family: var(--sqlc-schrift);
    font-weight: 600;
    color: var(--sqlc-text-3);
    text-transform: none;
}

.kapitel ul[b-zrtb66szlr] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eintrag[b-zrtb66szlr] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--sqlc-text);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.eintrag:hover[b-zrtb66szlr] {
    background: var(--sqlc-hover);
}

.eintrag.aktiv[b-zrtb66szlr] {
    background: var(--sqlc-gelb-hell);
    box-shadow: inset 3px 0 0 var(--sqlc-akzent);
    color: var(--sqlc-akzent);
    font-weight: 600;
}

.eintrag.aktiv .marke[b-zrtb66szlr] {
    border-color: var(--sqlc-akzent);
    color: var(--sqlc-akzent);
}

.marke[b-zrtb66szlr] {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--sqlc-linie-2);
    font-size: 0.7rem;
    color: var(--sqlc-text-2);
}

.eintrag.geloest .marke[b-zrtb66szlr] {
    border-color: var(--sqlc-gruen);
    background: var(--sqlc-gruen);
    color: #052e1f;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.eintrag-titel[b-zrtb66szlr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /SQL-Checker/Pages/SqlChecker.razor.rz.scp.css */
/* LemmySQL (SQL-Checker) – Optik wie der Notenblatt-Designer (dunkles Navy, Bernstein-Akzent, Cyan für Hinweise, Orbitron-Titel).
   Farben als Variablen für alle Sqlc-Bausteine; der Aufbau (3 Bereiche) ist unverändert. */
.sqlc[b-6kugl3ydkp] {
    --sqlc-grund: #070b14;
    --sqlc-panel: #0f1729;
    --sqlc-flaeche: #111a2e;
    --sqlc-feld: #0a1020;
    --sqlc-hover: rgba(56, 189, 248, 0.12);
    --sqlc-zebra: rgba(255, 255, 255, 0.025);
    --sqlc-linie: rgba(148, 163, 184, 0.18);
    --sqlc-linie-2: rgba(148, 163, 184, 0.55);
    --sqlc-text: #eef3fa;
    --sqlc-text-2: #b9c5d6;
    --sqlc-text-3: #7c8aa0;
    --sqlc-blau: #38bdf8;
    --sqlc-blau-hell: rgba(56, 189, 248, 0.13);
    --sqlc-gruen: #34d399;
    --sqlc-gruen-hell: rgba(16, 185, 129, 0.15);
    --sqlc-rot: #fca5a5;
    --sqlc-rot-hell: rgba(220, 38, 38, 0.16);
    --sqlc-gelb: #fbbf24;
    --sqlc-gelb-hell: rgba(251, 191, 36, 0.12);
    --sqlc-akzent: #fbbf24;
    --sqlc-akzent-rand: rgba(251, 191, 36, 0.3);
    --sqlc-akzent-verlauf: linear-gradient(180deg, #fbbf24, #d97706);
    --sqlc-akzent-text: #1a1204;
    --sqlc-schatten: 0 10px 30px rgba(0, 0, 0, 0.45);
    --sqlc-schrift: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --sqlc-titel: "Orbitron", "Segoe UI", sans-serif;
    --sqlc-mono: Consolas, "Cascadia Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --sqlc-links: 270px;

    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    color: var(--sqlc-text);
    font-family: var(--sqlc-schrift);
    color-scheme: dark;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
    background:
        radial-gradient(60vmax 40vmax at 90% 0%, rgba(245, 158, 11, 0.10), transparent 70%),
        radial-gradient(50vmax 40vmax at 0% 100%, rgba(14, 165, 233, 0.10), transparent 70%),
        var(--sqlc-grund);
}

.sqlc.liste-zu[b-6kugl3ydkp] {
    --sqlc-links: 46px;
}

.sqlc :is(button, summary, [tabindex]):focus-visible[b-6kugl3ydkp] {
    outline: 3px solid var(--sqlc-blau);
    outline-offset: 2px;
}

/* ---------- Kopfleiste ---------- */
.leiste[b-6kugl3ydkp] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(7, 11, 20, 0.6);
    border-bottom: 1px solid var(--sqlc-akzent-rand);
}

.sqlc-zurueck[b-6kugl3ydkp] {
    min-height: 38px;
    padding: 0.3rem 1rem;
    color: #7dd3fc;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.6);
    border-radius: 6px;
    font: 600 0.78rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sqlc-zurueck:hover[b-6kugl3ydkp] {
    color: #fff;
    border-color: var(--sqlc-blau);
    background: rgba(14, 165, 233, 0.16);
}

.marke[b-6kugl3ydkp] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
    margin-right: auto;
}

.logo[b-6kugl3ydkp] {
    font: 700 clamp(1rem, 1.6vw, 1.4rem) var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    white-space: nowrap;
}

.untertitel[b-6kugl3ydkp] {
    font-size: 0.85rem;
    color: var(--sqlc-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knopf-leiste[b-6kugl3ydkp] {
    min-height: 38px;
    padding: 0.3rem 0.8rem;
    color: var(--sqlc-text);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--sqlc-linie-2);
    border-radius: 8px;
    font: 600 0.88rem var(--sqlc-schrift);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.knopf-leiste:hover[b-6kugl3ydkp] {
    color: #fff;
    border-color: var(--sqlc-blau);
    background: rgba(14, 165, 233, 0.22);
}

.knopf-leiste.aktiv[b-6kugl3ydkp] {
    color: var(--sqlc-akzent-text);
    background: var(--sqlc-akzent-verlauf);
    border-color: #fcd34d;
}

.knopf-leiste.aktiv:hover[b-6kugl3ydkp] {
    color: #000;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
}

.liste-knopf[b-6kugl3ydkp] {
    display: none;
}

/* ---------- Werkzeuge oben rechts: Fortschritt · Syntax-Farben · Vollbild · Schema ---------- */
.werkzeuge[b-6kugl3ydkp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trenner[b-6kugl3ydkp] {
    width: 1px;
    align-self: stretch;
    margin: 2px 2px;
    background: linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.45), transparent);
}

.fortschritt-anzeige[b-6kugl3ydkp] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 190px;
    padding: 6px 12px 7px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--sqlc-akzent-rand);
    border-radius: 10px;
    box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.06);
}

.fa-oben[b-6kugl3ydkp] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1;
}

.fa-label[b-6kugl3ydkp] {
    font: 700 0.62rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-text-3);
}

.fa-zahl[b-6kugl3ydkp] {
    font-size: 0.82rem;
    color: var(--sqlc-text-2);
}

.fa-zahl strong[b-6kugl3ydkp] {
    font: 700 0.95rem var(--sqlc-titel);
    color: var(--sqlc-akzent);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

.fa-prozent[b-6kugl3ydkp] {
    margin-left: auto;
    font: 700 0.72rem var(--sqlc-titel);
    color: var(--sqlc-text);
}

.fa-balken[b-6kugl3ydkp] {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.fa-balken span[b-6kugl3ydkp] {
    position: relative;
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: 3px;
    background: var(--sqlc-akzent-verlauf);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
    transition: width 0.4s ease;
    overflow: hidden;
}

/* Glanz, der durch den gefüllten Teil wandert */
.fa-balken span[b-6kugl3ydkp]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent) -40px 0 / 40px 100% no-repeat;
    animation: sqlc-balken-glanz-b-6kugl3ydkp 2.6s ease-in-out infinite;
}

@keyframes sqlc-balken-glanz-b-6kugl3ydkp {
    from { background-position: -40px 0; }
    to { background-position: calc(100% + 40px) 0; }
}

/* Kippschalter Prüfungsmodus (an, Standard: Editor ohne Farben) ↔ Kiddymodus (aus: bunte Syntax-Farben) */
.schalter-rahmen[b-6kugl3ydkp] {
    position: relative;
}

.schalter[b-6kugl3ydkp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0.25rem 0.85rem 0.25rem 0.5rem;
    color: var(--sqlc-text-2);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--sqlc-linie-2);
    border-radius: 8px;
    font: 600 0.88rem var(--sqlc-schrift);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.schalter:hover[b-6kugl3ydkp] {
    color: #fff;
    border-color: var(--sqlc-blau);
}

.schalter-spur[b-6kugl3ydkp] {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.5);
    transition: background 0.25s, border-color 0.25s;
}

.schalter-knopf[b-6kugl3ydkp] {
    position: absolute;
    top: 2px;
    left: 2px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}

.schalter-text[b-6kugl3ydkp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.schalter-titel[b-6kugl3ydkp] {
    font-weight: 700;
}

.schalter-unter[b-6kugl3ydkp] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--sqlc-text-3);
}

/* Prüfungsmodus: Bernstein, Knopf rechts mit Doktorhut */
.schalter.an[b-6kugl3ydkp] {
    color: var(--sqlc-text);
    border-color: var(--sqlc-akzent-rand);
}

.schalter.an .schalter-titel[b-6kugl3ydkp] {
    color: var(--sqlc-akzent);
}

.schalter.an .schalter-spur[b-6kugl3ydkp] {
    background: var(--sqlc-akzent-verlauf);
    border-color: #fcd34d;
}

.schalter.an .schalter-knopf[b-6kugl3ydkp] {
    transform: translateX(20px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

/* Kiddymodus: Regenbogen-Spur, Teddy links, Schrift im Regenbogen */
.schalter.kiddy[b-6kugl3ydkp] {
    border-color: rgba(244, 114, 182, 0.55);
}

.schalter.kiddy .schalter-spur[b-6kugl3ydkp] {
    background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6);
    border-color: rgba(255, 255, 255, 0.5);
}

.schalter.kiddy .schalter-knopf[b-6kugl3ydkp] {
    transform: translateX(0) rotate(-12deg);
}

.schalter.kiddy:hover .schalter-knopf[b-6kugl3ydkp] {
    transform: translateX(0) rotate(12deg) scale(1.1);
}

.schalter.kiddy .schalter-titel[b-6kugl3ydkp] {
    background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Sprechblase mit Spruch nach dem Umschalten */
.spruch[b-6kugl3ydkp] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: max-content;
    max-width: 290px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--sqlc-panel);
    border: 1px solid rgba(251, 191, 36, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 14px rgba(251, 191, 36, 0.2);
    color: var(--sqlc-text);
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
    animation: sqlc-spruch-b-6kugl3ydkp 3.2s ease forwards;
}

.spruch[b-6kugl3ydkp]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 28px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: inherit;
    border-top: inherit;
    transform: rotate(45deg);
}

.spruch.kiddy[b-6kugl3ydkp] {
    border-color: rgba(244, 114, 182, 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 16px rgba(244, 114, 182, 0.3);
}

@keyframes sqlc-spruch-b-6kugl3ydkp {
    0% { opacity: 0; transform: translateY(-6px) scale(0.9); }
    10% { opacity: 1; transform: translateY(0) scale(1.03); }
    16% { transform: scale(1); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}

/* Vollbild und Belegsatz (Symbol + Text) */
.vollbild-knopf[b-6kugl3ydkp],
.beleg-knopf[b-6kugl3ydkp] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.beleg-knopf[b-6kugl3ydkp] {
    color: var(--sqlc-akzent);
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(245, 158, 11, 0.12);
}

.beleg-knopf:hover[b-6kugl3ydkp] {
    color: var(--sqlc-akzent-text);
    background: var(--sqlc-akzent-verlauf);
    border-color: #fcd34d;
}

.vollbild-knopf svg[b-6kugl3ydkp],
.beleg-knopf svg[b-6kugl3ydkp] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zaehler[b-6kugl3ydkp] {
    margin-left: 4px;
    color: var(--sqlc-text-2);
}

.status[b-6kugl3ydkp] {
    margin: 40px auto;
    color: var(--sqlc-text-2);
}

.status.fehler[b-6kugl3ydkp] {
    color: var(--sqlc-rot);
}

/* ---------- 3 Bereiche ---------- */
.raster[b-6kugl3ydkp] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--sqlc-links) minmax(0, 1fr) var(--sqlc-schema-breite, 380px);
}

/* Am Desktop steht das Schema fest – kein Knopf zum Ein-/Ausblenden */
.schema-knopf[b-6kugl3ydkp] {
    display: none;
}

.links[b-6kugl3ydkp],
.mitte[b-6kugl3ydkp],
.rechts[b-6kugl3ydkp] {
    min-height: 0;
    overflow-y: auto;
}

.links[b-6kugl3ydkp] {
    background: rgba(15, 23, 42, 0.86);
    border-right: 1px solid var(--sqlc-akzent-rand);
}

/* ---------- Übungsliste einklappen ---------- */
.liste-kopf[b-6kugl3ydkp] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    background: rgba(15, 23, 42, 0.97);
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.liste-titel[b-6kugl3ydkp] {
    font: 700 0.78rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
}

.einklappen[b-6kugl3ydkp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0.2rem 0.75rem;
    color: var(--sqlc-akzent);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 999px;
    font: 600 0.8rem var(--sqlc-schrift);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.einklappen:hover[b-6kugl3ydkp] {
    color: var(--sqlc-akzent-text);
    background: var(--sqlc-akzent-verlauf);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.einklappen-pfeil[b-6kugl3ydkp] {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    animation: sqlc-pfeil-links-b-6kugl3ydkp 1.8s ease-in-out infinite;
}

/* Eingeklappt: schmale Schiene wie im Notenblatt-Designer */
.schiene[b-6kugl3ydkp] {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 14px 2px;
    color: var(--sqlc-akzent);
    background:
        linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.10) 50%, transparent) 0 -200px / 100% 200px no-repeat,
        transparent;
    border: 0;
    cursor: pointer;
    animation: sqlc-schiene-licht-b-6kugl3ydkp 3.5s ease-in-out infinite alternate;
    transition: background-color 0.15s, color 0.15s;
}

.schiene:hover[b-6kugl3ydkp] {
    color: #fff;
    background-color: rgba(251, 191, 36, 0.16);
}

.schiene-text[b-6kugl3ydkp] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 700 0.82rem var(--sqlc-titel);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
    white-space: nowrap;
}

.schiene-zahl[b-6kugl3ydkp] {
    padding: 3px 4px;
    border: 1px solid var(--sqlc-akzent-rand);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--sqlc-text-2);
}

.schiene-pfeil[b-6kugl3ydkp] {
    font-size: 1.2rem;
    line-height: 1;
    animation: sqlc-pfeil-rechts-b-6kugl3ydkp 1.8s ease-in-out infinite;
}

.liste-zu .schiene[b-6kugl3ydkp] {
    display: flex;
}

.liste-zu .liste-inhalt[b-6kugl3ydkp] {
    display: none;
}

.liste-zu .links[b-6kugl3ydkp] {
    overflow: hidden;
}

@keyframes sqlc-pfeil-links-b-6kugl3ydkp {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

@keyframes sqlc-pfeil-rechts-b-6kugl3ydkp {
    0%, 100% { transform: translateX(0); opacity: 0.75; }
    50% { transform: translateX(4px); opacity: 1; }
}

@keyframes sqlc-schiene-licht-b-6kugl3ydkp {
    from { background-position: 0 -200px, 0 0; }
    to { background-position: 0 calc(100% + 200px), 0 0; }
}

.rechts[b-6kugl3ydkp] {
    position: relative;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.86);
    border-left: 1px solid var(--sqlc-akzent-rand);
}

/* Das Schema scrollt selbst, damit der Ziehgriff am Rand stehen bleibt */
.rechts[b-6kugl3ydkp]  > .schema {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}

.sqlc-griff[b-6kugl3ydkp] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 12px;
    cursor: col-resize;
    touch-action: none;
}

/* Kante: schwach leuchtende Linie (ohne Animation) */
.sqlc-griff[b-6kugl3ydkp]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: rgba(251, 191, 36, 0.22);
    transition: width 0.15s, box-shadow 0.15s;
}

/* Griffstück in der Mitte: Bernstein-Pille mit Rillen (ohne Animation) */
.sqlc-griff[b-6kugl3ydkp]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;
    z-index: 1;
    width: 8px;
    height: 64px;
    margin-top: -32px;
    border-radius: 4px;
    background:
        radial-gradient(circle, rgba(26, 18, 4, 0.85) 1.1px, transparent 1.5px) center 4px / 8px 7px repeat-y,
        linear-gradient(180deg, #fde68a, #fbbf24 40%, #d97706);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
    transition: transform 0.15s, height 0.15s, margin-top 0.15s;
}

.sqlc-griff:hover[b-6kugl3ydkp]::after,
.sqlc-griff.zieht[b-6kugl3ydkp]::after {
    width: 3px;
    background-color: rgba(251, 191, 36, 0.7);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
}

.sqlc-griff:hover[b-6kugl3ydkp]::before,
.sqlc-griff.zieht[b-6kugl3ydkp]::before {
    height: 84px;
    margin-top: -42px;
    transform: scaleX(1.2);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.85);
}


.mitte[b-6kugl3ydkp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 32px;
}

/* Alle Karten der Mitte (auch die Aufgabe aus SqlcAufgabe → ::deep) gleich breit wie die Spalte */
.mitte > *[b-6kugl3ydkp],
.mitte[b-6kugl3ydkp]  > .aufgabe {
    box-sizing: border-box;
    flex: none;
    width: 100%;
}

/* ---------- Editor ---------- */
.editor-karte[b-6kugl3ydkp] {
    background: var(--sqlc-panel);
    border: 1px solid var(--sqlc-akzent-rand);
    border-radius: 10px;
    box-shadow: var(--sqlc-schatten);
    overflow: hidden;
}

.editor-kopf[b-6kugl3ydkp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(251, 191, 36, 0.07);
    border-bottom: 1px solid rgba(251, 191, 36, 0.22);
}

.editor-kopf > span:first-child[b-6kugl3ydkp] {
    font: 700 0.8rem var(--sqlc-titel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sqlc-akzent);
}

.kuerzel[b-6kugl3ydkp] {
    font-size: 0.8rem;
    color: var(--sqlc-text-3);
}

/* CodeMirror im dunklen Notenblatt-Stil */
.editor[b-6kugl3ydkp]  .CodeMirror {
    height: auto;
    min-height: 150px;
    background: var(--sqlc-feld);
    color: var(--sqlc-text);
    font-family: var(--sqlc-mono);
    font-size: 15px;
    line-height: 1.5;
}

.editor[b-6kugl3ydkp]  .CodeMirror-scroll {
    min-height: 150px;
    max-height: 320px;
}

.editor[b-6kugl3ydkp]  .CodeMirror-gutters {
    background: #080d1a;
    border-right: 1px solid var(--sqlc-linie);
}

.editor[b-6kugl3ydkp]  .CodeMirror-linenumber {
    color: #4b5a72;
}

.editor[b-6kugl3ydkp]  .CodeMirror-cursor {
    border-left: 2px solid var(--sqlc-akzent);
}

.editor[b-6kugl3ydkp]  .CodeMirror-selected {
    background: rgba(56, 189, 248, 0.22);
}

.editor[b-6kugl3ydkp]  .CodeMirror-focused .CodeMirror-selected {
    background: rgba(56, 189, 248, 0.3);
}

.editor[b-6kugl3ydkp]  .CodeMirror-matchingbracket {
    color: var(--sqlc-akzent);
    text-decoration: underline;
}

.editor[b-6kugl3ydkp]  .cm-keyword {
    color: #7dd3fc;
    font-weight: 700;
}

.editor[b-6kugl3ydkp]  .cm-builtin,
.editor[b-6kugl3ydkp]  .cm-type {
    color: #c4b5fd;
}

.editor[b-6kugl3ydkp]  .cm-string {
    color: #86efac;
}

.editor[b-6kugl3ydkp]  .cm-number {
    color: var(--sqlc-akzent);
}

.editor[b-6kugl3ydkp]  .cm-operator {
    color: #f9a8d4;
}

.editor[b-6kugl3ydkp]  .cm-comment {
    color: var(--sqlc-text-3);
    font-style: italic;
}

.knoepfe[b-6kugl3ydkp] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}

.knopf[b-6kugl3ydkp] {
    min-height: 40px;
    padding: 0.3rem 1rem;
    color: var(--sqlc-text);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--sqlc-linie-2);
    border-radius: 8px;
    font: 600 0.92rem var(--sqlc-schrift);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.knopf:hover:not(:disabled)[b-6kugl3ydkp] {
    color: #fff;
    border-color: var(--sqlc-blau);
    background: rgba(14, 165, 233, 0.22);
}

/* Prüfen = Hauptaktion in Bernstein */
.knopf.haupt[b-6kugl3ydkp] {
    color: var(--sqlc-akzent-text);
    background: var(--sqlc-akzent-verlauf);
    border-color: #fcd34d;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

.knopf.haupt:hover:not(:disabled)[b-6kugl3ydkp] {
    color: #000;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    border-color: #fde68a;
}

/* Ausführen = Cyan */
.knopf.zweit[b-6kugl3ydkp] {
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(14, 165, 233, 0.14);
}

.knopf.leise[b-6kugl3ydkp] {
    color: var(--sqlc-text-2);
    font-weight: 500;
}

.knopf:disabled[b-6kugl3ydkp] {
    opacity: 0.45;
    cursor: not-allowed;
}

.knoepfe .leise[b-6kugl3ydkp] {
    margin-left: auto;
}

.knopf.klein[b-6kugl3ydkp] {
    min-height: 34px;
    padding: 0.25rem 0.8rem;
    font-size: 0.85rem;
}

/* ---------- Meldungen ---------- */
.meldung[b-6kugl3ydkp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
}

.meldung.ok[b-6kugl3ydkp] {
    background: var(--sqlc-gruen-hell);
    color: #a7f3d0;
    border: 1px solid rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.15);
}

.meldung.ok strong[b-6kugl3ydkp] {
    color: var(--sqlc-gruen);
}

.meldung.ok .knopf[b-6kugl3ydkp] {
    margin-left: auto;
}

.meldung.nein[b-6kugl3ydkp] {
    background: var(--sqlc-rot-hell);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.6);
}

.meldung.nein strong[b-6kugl3ydkp] {
    color: #f87171;
}

.meldung.info[b-6kugl3ydkp] {
    background: var(--sqlc-blau-hell);
    color: var(--sqlc-text);
    border: 1px solid rgba(56, 189, 248, 0.45);
}

/* ---------- Ergebnisse ---------- */
.ergebnisse[b-6kugl3ydkp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.mobil-reiter[b-6kugl3ydkp] {
    display: none;
}

.blaettern[b-6kugl3ydkp] {
    display: flex;
    justify-content: space-between;
}

/* Schmalere Desktop-Fenster: Schema bleibt als Spalte, wird aber höchstens 36 % breit */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .raster[b-6kugl3ydkp] {
        grid-template-columns: var(--sqlc-links) minmax(0, 1fr) min(var(--sqlc-schema-breite, 380px), 36vw);
    }

    .ergebnisse[b-6kugl3ydkp] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
    .leiste[b-6kugl3ydkp] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .marke[b-6kugl3ydkp] {
        order: 3;
        flex: 1 1 170px;   /* zu breit für den Rest der 1. Zeile → eigene Zeile mit Schalter/Vollbild */
        flex-direction: column;
        gap: 2px;
    }

    .werkzeuge[b-6kugl3ydkp] {
        display: contents;
    }

    .fortschritt-anzeige[b-6kugl3ydkp],
    .trenner[b-6kugl3ydkp],
    .knopf-text[b-6kugl3ydkp] {
        display: none;
    }

    .liste-knopf[b-6kugl3ydkp] {
        order: 1;
    }

    .werkzeuge > .knopf-leiste:last-child[b-6kugl3ydkp] {
        order: 2;
    }

    .schalter[b-6kugl3ydkp],
    .vollbild-knopf[b-6kugl3ydkp],
    .beleg-knopf[b-6kugl3ydkp] {
        order: 4;
        padding-inline: 0.55rem;
    }

    .schalter-unter[b-6kugl3ydkp] {
        display: none;
    }

    .schalter-rahmen[b-6kugl3ydkp] {
        order: 4;
    }

    .spruch[b-6kugl3ydkp] {
        max-width: 240px;
    }

    .untertitel[b-6kugl3ydkp] {
        font-size: 0.78rem;
    }

    .sqlc-zurueck[b-6kugl3ydkp] {
        padding: 0.3rem 0.6rem;
        font-size: 0.68rem;
        letter-spacing: 1px;
    }

    .knopf-leiste[b-6kugl3ydkp] {
        padding: 0.3rem 0.55rem;
        font-size: 0.82rem;
    }

    .liste-knopf[b-6kugl3ydkp] {
        display: inline-block;
        margin-left: auto;
    }

    .schema-knopf[b-6kugl3ydkp] {
        display: inline-block;
    }

    .raster[b-6kugl3ydkp] {
        display: block;
        overflow-y: auto;
    }

    .links[b-6kugl3ydkp] {
        display: none;
    }

    .einklappen[b-6kugl3ydkp],
    .liste-zu .schiene[b-6kugl3ydkp] {
        display: none;
    }

    .liste-zu .liste-inhalt[b-6kugl3ydkp] {
        display: block;
    }

    .links.offen[b-6kugl3ydkp] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        overflow-y: auto;
        border: 0;
        background: var(--sqlc-panel);
    }

    .rechts[b-6kugl3ydkp] {
        display: none;
    }

    .rechts.offen[b-6kugl3ydkp] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        border: 0;
        background: var(--sqlc-panel);
    }

    .mitte[b-6kugl3ydkp] {
        overflow: visible;
        padding: 12px 12px 24px;
        gap: 12px;
    }

    .kuerzel[b-6kugl3ydkp] {
        display: none;
    }

    .editor[b-6kugl3ydkp]  .CodeMirror {
        font-size: 14px;
    }

    .knoepfe .leise[b-6kugl3ydkp] {
        margin-left: 0;
    }

    .knopf[b-6kugl3ydkp] {
        flex: 1;
        padding: 10px 8px;
    }

    .mobil-reiter[b-6kugl3ydkp] {
        display: flex;
        gap: 4px;
        padding: 3px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid #334155;
    }

    .mobil-reiter button[b-6kugl3ydkp] {
        flex: 1;
        min-height: 38px;
        padding: 7px;
        border: 0;
        border-radius: 8px;
        background: none;
        color: var(--sqlc-text);
        font: 700 0.9rem var(--sqlc-schrift);
        cursor: pointer;
    }

    .mobil-reiter button.aktiv[b-6kugl3ydkp] {
        color: var(--sqlc-akzent-text);
        background: var(--sqlc-akzent-verlauf);
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    }

    .ergebnisse[b-6kugl3ydkp] {
        display: block;
    }

    .sqlc-griff[b-6kugl3ydkp] {
        display: none;
    }

    .ergebnisse.zeige-soll[b-6kugl3ydkp]  > .ergebnis:nth-child(2),
    .ergebnisse.zeige-ist[b-6kugl3ydkp]  > .ergebnis:nth-child(1) {
        display: none;
    }
}