@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');

/* =========================================================
   FRITTENBUDE-BBS
   KONSOLIDIERTER CSS-STAND
   Desktop = bestehende Gestaltung
   Mobile  = eigene responsive Struktur
   ========================================================= */


/* =========================================================
   1. GRUNDLAGEN
   ========================================================= */

:root {
    --red: #b90025;
    --red-dark: #270006;

    --gold: #ffd400;
    --orange: #ff7a00;
    --green: #00ff88;

    --neon-red: #ff0033;
    --neon-cyan: #00ffff;
    --neon-violet: #cc00ff;
    --neon-green: #00ff66;
    --neon-orange: #ff6600;
    --neon-blue: #0066ff;

    --page-bg: #050001;
    --panel-bg: #050505;
    --panel-bg-light: #11131a;

    --site-width: 1450px;
    --content-side: 260px;

    --radius: 12px;
    --transition: .25s ease;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #020202,
            #120006
        );

    color: white;

    font-family:
        'Share Tech Mono',
        monospace;

    overflow-x: hidden;
}

img {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   2. SEITE
   ========================================================= */

.site {
    width: min(var(--site-width), 100%);
    max-width: var(--site-width);

    min-height: 100vh;

    margin: 0 auto;

    background: rgba(0, 0, 0, .55);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   3. HEADER
   ========================================================= */

.terminal-bar {
    width: 100%;
    height: 60px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    padding: 0 32px;

    background:
        linear-gradient(
            180deg,
            #c9002d,
            #a90020
        );

    border-bottom: 2px solid var(--gold);

    font-family:
        'Share Tech Mono',
        monospace;

    font-size: 18px;

    letter-spacing: 2px;
}

.terminal-left {
    color: white;
}

.terminal-title {
    color: white;
    font-weight: bold;
    text-align: center;
}

.terminal-right {
    color: #00ff99;
    text-align: right;
}

.online-dot {
    color: #00ff99;

    text-shadow:
        0 0 8px #00ff99,
        0 0 18px #00ff99;
}

.live-date {
    color: #00ff88;

    text-shadow:
        0 0 5px #00ff88,
        0 0 15px #00ff88;
}

.live-time {
    color: #00ccff;

    text-shadow:
        0 0 5px #00ccff,
        0 0 15px #00ccff;
}


/* =========================================================
   4. HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;
    height: 500px;

    display: grid;

    grid-template-columns:
        260px
        minmax(500px, 1fr)
        260px;

    align-items: center;
    justify-items: center;

    padding: 30px;

    background:
        radial-gradient(
            circle,
            rgba(255, 180, 0, .15),
            transparent 45%
        );
}

.hero-sign {
    display: flex;

    justify-content: center;
    align-items: center;
}

.hero-sign img {
    display: block;

    width: 620px;
    max-width: 90%;

    filter:
        drop-shadow(0 0 25px #ff9900)
        drop-shadow(0 0 50px #ff0033);

    animation:
        neonFloat 4s ease-in-out infinite;
}

@keyframes neonFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.fries {
    display: flex;

    justify-content: center;
    align-items: center;
}

.fries img {
    display: block;

    width: 240px;

    filter:
        drop-shadow(0 0 20px #ffd400);

    animation:
        floatFries 5s ease-in-out infinite;
}

.fries.left img {
    transform: rotate(-5deg);
}

.fries.right img {
    transform:
        scaleX(-1)
        rotate(-5deg);
}

@keyframes floatFries {
    0% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-8px) rotate(-5deg);
    }

    100% {
        transform: translateY(0) rotate(-5deg);
    }
}

.fries.right img {
    animation-name: floatFriesRight;
}

@keyframes floatFriesRight {
    0% {
        transform:
            scaleX(-1)
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            scaleX(-1)
            translateY(-8px)
            rotate(-5deg);
    }

    100% {
        transform:
            scaleX(-1)
            translateY(0)
            rotate(-5deg);
    }
}


/* =========================================================
   5. STATUS
   ========================================================= */

.status {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    border:
        1px solid #665000;

    border-radius: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #080808,
            #160006,
            #080808
        );
}

.status-box {
    min-height: 140px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 35px;

    text-align: center;

    font-size: 20px;

    line-height: 1.5;

    border-right:
        1px solid #332900;
}

.status-box:last-child {
    border-right: 0;
}

.status-title {
    margin-bottom: 10px;

    color: var(--gold);

    font-family:
        Orbitron,
        monospace;

    font-size: 18px;
}


/* =========================================================
   6. CONTENT
   ========================================================= */

.content {
    width: 100%;

    display: grid;

    grid-template-columns:
        var(--content-side)
        minmax(0, 1fr)
        var(--content-side);

    gap: 20px;

    padding: 20px;

    margin-top: 18px;

    flex: 1;
}


/* =========================================================
   7. PANELS
   ========================================================= */

.panel {
    min-width: 0;
    min-height: 100%;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            var(--panel-bg-light),
            var(--panel-bg)
        );

    border:
        1px solid #7c0018;

    border-radius: var(--radius);

    box-shadow:
        0 0 20px rgba(255, 0, 60, .15);

    font-size: 18px;
}

.panel h2 {
    margin-top: 0;

    text-align: center;

    font-family:
        Orbitron,
        sans-serif;

    font-size:
        clamp(
            32px,
            3vw,
            48px
        );

    color: var(--gold);

    text-shadow:
        0 0 15px orange;
}

.panel h3 {
    color: var(--gold);

    font-size: 20px;

    border-bottom:
        1px solid #442;

    padding-bottom: 15px;
}

.panel p {
    margin: 0;

    padding: 15px;

    border-bottom:
        1px solid #222;

    font-size: 18px;

    transition:
        color var(--transition),
        text-shadow var(--transition),
        border-color var(--transition);
}

.panel img {
    display: block;
    width: 100%;

    filter:
        drop-shadow(0 0 18px #ff9900);
}


/* =========================================================
   8. CARDS
   ========================================================= */

.cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.card {
    min-width: 0;
    min-height: 170px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

    background:
        rgba(0, 0, 0, .45);

    border:
        1px solid #850020;

    border-radius: 10px;

    font-size: 20px;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.card-title {
    margin-bottom: 15px;

    color: white;

    font-family:
        Orbitron,
        sans-serif;

    font-size: 26px;

    letter-spacing: 2px;
}

.arrow {
    float: right;

    margin-left: auto;

    color: var(--orange);
}


/* =========================================================
   9. KARTEN — 6 NEONFARBEN
   ========================================================= */

.cards .card:nth-child(1):hover {
    border-color: var(--neon-red);

    box-shadow:
        0 0 10px var(--neon-red),
        0 0 30px var(--neon-red);
}

.cards .card:nth-child(2):hover {
    border-color: var(--neon-cyan);

    box-shadow:
        0 0 10px var(--neon-cyan),
        0 0 30px var(--neon-cyan);
}

.cards .card:nth-child(3):hover {
    border-color: var(--neon-violet);

    box-shadow:
        0 0 10px var(--neon-violet),
        0 0 30px var(--neon-violet);
}

.cards .card:nth-child(4):hover {
    border-color: var(--neon-green);

    box-shadow:
        0 0 10px var(--neon-green),
        0 0 30px var(--neon-green);
}

.cards .card:nth-child(5):hover {
    border-color: var(--neon-orange);

    box-shadow:
        0 0 10px var(--neon-orange),
        0 0 30px var(--neon-orange);
}

.cards .card:nth-child(6):hover {
    border-color: var(--neon-blue);

    box-shadow:
        0 0 10px var(--neon-blue),
        0 0 30px var(--neon-blue);
}

.cards .card:hover {
    transform:
        translateY(-5px)
        scale(1.01);

    background:
        rgba(0, 0, 0, .55);
}


/* =========================================================
   10. LINKES MENÜ — GLEICHE 6 FARBEN
   ========================================================= */

.panel p:nth-of-type(1):hover {
    color: var(--neon-red);

    text-shadow:
        0 0 8px var(--neon-red),
        0 0 20px var(--neon-red);
}

.panel p:nth-of-type(2):hover {
    color: var(--neon-cyan);

    text-shadow:
        0 0 8px var(--neon-cyan),
        0 0 20px var(--neon-cyan);
}

.panel p:nth-of-type(3):hover {
    color: var(--neon-violet);

    text-shadow:
        0 0 8px var(--neon-violet),
        0 0 20px var(--neon-violet);
}

.panel p:nth-of-type(4):hover {
    color: var(--neon-green);

    text-shadow:
        0 0 8px var(--neon-green),
        0 0 20px var(--neon-green);
}

.panel p:nth-of-type(5):hover {
    color: var(--neon-orange);

    text-shadow:
        0 0 8px var(--neon-orange),
        0 0 20px var(--neon-orange);
}

.panel p:nth-of-type(6):hover {
    color: var(--neon-blue);

    text-shadow:
        0 0 8px var(--neon-blue),
        0 0 20px var(--neon-blue);
}


/* =========================================================
   11. FOOTER
   ========================================================= */

.site-footer {
    width: 100%;

    margin-top: auto;

    padding: 18px;

    text-align: center;

    color: #00ff88;

    font-size: 14px;

    border-top:
        1px solid #d00032;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 255, 136, .08),
            transparent
        );

    letter-spacing: 1px;
}


/* =========================================================
   12. TABLET / KLEINER DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .hero {
        grid-template-columns:
            180px
            minmax(0, 1fr)
            180px;
    }

    .hero-sign img {
        width: 520px;
    }

    .fries img {
        width: 170px;
    }

    .content {
        grid-template-columns:
            220px
            minmax(0, 1fr)
            220px;

        gap: 15px;

        padding: 15px;
    }

    .panel {
        padding: 20px;
    }

    .card {
        padding: 20px;
    }
}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .site {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
    }

    /* HEADER */

    .terminal-bar {
        width: 100%;
        height: auto;
        min-height: 0;

        display: block;

        padding: 12px 10px 16px;

        font-size: 14px;
        line-height: 1.3;

        text-align: center;

        overflow: visible;
    }

    .terminal-left,
    .terminal-title,
    .terminal-right {
        width: 100%;
        min-width: 0;

        display: block;

        position: static;
        float: none;
        transform: none;

        margin: 0;
        padding: 0;

        text-align: center;

        white-space: normal;
        overflow-wrap: anywhere;

        line-height: 1.3;
    }

    .terminal-left {
        margin-bottom: 8px;

        white-space: nowrap;
        overflow: visible;

        font-size: 12px;
        line-height: 1.3;
    }

    .terminal-left .live-name,
    .terminal-left .live-sep,
    .terminal-left .live-date,
    .terminal-left .live-time {
        display: inline;
        white-space: nowrap;
    }

    .terminal-left .live-date {
        margin-left: 4px;
    }

    .terminal-left .live-time {
        margin-left: 4px;

        color: #00ccff;

        text-shadow:
            0 0 5px #00ccff,
            0 0 15px #00ccff;
    }

    .terminal-title {
        margin-bottom: 8px;
    }

    .terminal-right {
        margin-bottom: 0;
    }

    /* HERO */

    .hero {
        height: 300px;

        display: grid;

        grid-template-columns:
            90px
            minmax(0, 1fr)
            90px;

        padding: 15px;

        overflow: hidden;
    }

    .hero-sign img {
        width: 280px;
        max-width: 70vw;
    }

    .fries img {
        width: 90px;
    }

    /* STATUS */

    .status {
        grid-template-columns: 1fr;

        border-radius: 12px;
    }

    .status-box {
        width: 100%;

        min-height: 90px;

        padding: 18px;

        border-right: 0;

        border-bottom:
            1px solid #332900;
    }

    .status-box:last-child {
        border-bottom: 0;
    }

    /* CONTENT */

    .content {
        display: flex;

        flex-direction: column;

        gap: 15px;

        padding: 15px;

        margin-top: 15px;
    }

    .panel {
        width: 100%;
        min-height: 0;

        padding: 20px;
    }

    .panel h2 {
        font-size: 32px;
    }

    /* CARDS */

    .cards {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .card {
        min-height: 140px;

        padding: 20px;
    }

    .card-title {
        font-size: 22px;
    }
}


/* =========================================================
   14. KLEINE GERÄTE
   ========================================================= */

@media (max-width: 600px) {

    .terminal-bar {
        font-size: 13px;

        letter-spacing: 1px;
    }

    .hero {
        height: 260px;

        grid-template-columns:
            65px
            minmax(0, 1fr)
            65px;

        padding: 10px;
    }

    .hero-sign img {
        width: 230px;
        max-width: 72vw;
    }

    .fries img {
        width: 65px;
    }

    .status-title {
        font-size: 16px;
    }

    .status-box {
        min-height: 80px;

        padding: 14px;

        font-size: 17px;
    }

    .content {
        padding: 10px;

        gap: 10px;
    }

    .panel {
        padding: 16px;
    }

    .panel h2 {
        font-size: 28px;
    }

    .panel h3 {
        font-size: 18px;
    }

    .panel p {
        padding: 13px;

        font-size: 17px;
    }

    .card {
        min-height: 125px;

        padding: 18px;

        font-size: 18px;
    }

    .card-title {
        font-size: 20px;
    }

    .site-footer {
        padding: 15px 10px;

        font-size: 12px;
    }
}


/* =========================================================
   15. SEHR KLEINE GERÄTE
   ========================================================= */

@media (max-width: 480px) {

    .terminal-left {
        font-size: 12px;
        letter-spacing: 1px;
    }



    .terminal-bar {
        padding: 10px 8px;

        font-size: 12px;
    }

    .hero {
        height: 220px;

        grid-template-columns:
            50px
            minmax(0, 1fr)
            50px;

        padding: 5px;
    }

    .hero-sign img {
        width: 190px;
        max-width: 72vw;
    }

    .fries img {
        width: 55px;
    }

    .status-box {
        min-height: 72px;

        padding: 12px;

        font-size: 15px;
    }

    .status-title {
        margin-bottom: 6px;

        font-size: 14px;
    }

    .content {
        padding: 8px;

        gap: 8px;
    }

    .panel {
        padding: 14px;
    }

    .panel h2 {
        font-size: 24px;
    }

    .panel p {
        padding: 12px;

        font-size: 16px;
    }

    .cards {
        gap: 10px;
    }

    .card {
        min-height: 115px;

        padding: 15px;

        font-size: 17px;
    }

    .card-title {
        font-size: 18px;

        letter-spacing: 1px;
    }
}

/* =========================================================
   MOBILE HERO + STATUS FINAL
   Desktop bleibt vollständig unverändert.
   Bestehende Farbwelt bleibt vollständig erhalten.
   ========================================================= */

@media (max-width: 900px) {

    /* ---------- MOBILE HERO ---------- */

    .hero {
        height: 260px;
        min-height: 260px;

        grid-template-columns:
            75px
            minmax(0, 1fr)
            75px;

        padding: 10px;

        overflow: hidden;
    }

    .hero-sign {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-sign img {
        width: 270px;
        max-width: 72vw;
        height: auto;
    }

    .fries {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }

    .fries img {
        width: 75px;
        max-width: 100%;
        height: auto;
    }


    /* ---------- MOBILE STATUS ---------- */

    .status {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;

        border-radius: 12px;
        overflow: hidden;
    }

    .status-box {
        width: auto;
        min-width: 0;
        min-height: 105px;

        padding: 15px 10px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;

        border-right: 1px solid #332900;
        border-bottom: 1px solid #332900;

        font-size: 17px;
        line-height: 1.45;

        overflow: hidden;
    }

    .status-box:nth-child(2n) {
        border-right: 0;
    }

    /* Letzte Box über die komplette Breite */
    .status-box:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0;
    }

    .status-title {
        margin-bottom: 7px;

        font-size: 16px;
        line-height: 1.25;

        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 600px) {

    .hero {
        height: 235px;
        min-height: 235px;

        grid-template-columns:
            65px
            minmax(0, 1fr)
            65px;

        padding: 8px;
    }

    .hero-sign img {
        width: 240px;
        max-width: 70vw;
    }

    .fries img {
        width: 65px;
    }

    .status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-box {
        min-height: 95px;
        padding: 13px 8px;

        font-size: 16px;
    }

    .status-title {
        font-size: 15px;
        margin-bottom: 6px;
    }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {

    .hero {
        height: 220px;
        min-height: 220px;

        grid-template-columns:
            50px
            minmax(0, 1fr)
            50px;

        padding: 5px;
    }

    .hero-sign img {
        width: 190px;
        max-width: 70vw;
    }

    .fries img {
        width: 55px;
    }

    .status-box {
        min-height: 88px;
        padding: 11px 6px;

        font-size: 15px;
        line-height: 1.35;
    }

    .status-title {
        font-size: 14px;
        margin-bottom: 5px;
    }
}


/* MOBILE CLOCK OVERFLOW FIX */

/* MOBILE CLOCK OVERFLOW FIX
   Desktop bleibt vollständig unangetastet.
*/

@media (max-width: 600px) {

    .terminal-bar {
        width: 100%;
        max-width: 100%;
        overflow: hidden;

        padding-left: 6px;
        padding-right: 6px;

        box-sizing: border-box;
    }

    .terminal-left {
        width: 100%;
        max-width: 100%;

        display: block;

        margin: 0 0 8px 0;
        padding: 0;

        text-align: center;

        white-space: nowrap;
        overflow: hidden;

        font-size: clamp(9px, 2.6vw, 11px);
        line-height: 1.25;
        letter-spacing: 0.5px;
    }

    .terminal-left .live-name,
    .terminal-left .live-sep,
    .terminal-left .live-date,
    .terminal-left .live-time {
        display: inline;
        white-space: nowrap;
    }

    .terminal-left .live-date {
        margin-left: 3px;
    }

    .terminal-left .live-time {
        margin-left: 3px;

        color: #00ccff;

        text-shadow:
            0 0 5px #00ccff,
            0 0 15px #00ccff;
    }
}


@media (max-width: 480px) {

    .terminal-bar {
        padding-left: 4px;
        padding-right: 4px;
    }

    .terminal-left {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

}

/* DESKTOP STATUS ALIGNMENT */

/* DESKTOP STATUS ALIGNMENT
   Statusbereich bündig mit dem Content.
   Mobile bleibt vollständig unangetastet.
*/

@media (min-width: 1101px) {

    .status {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;

        border-radius: 12px;
        overflow: hidden;
    }

}

/* =========================================
   SERVER UPTIME - LIVE COLORS
   ========================================= */

.server-uptime {
    white-space: nowrap;
}

.uptime-days {
    color: #ff3030;
    text-shadow:
        0 0 5px #ff3030,
        0 0 12px #ff3030;
    margin-left: 4px;
}

.uptime-hours {
    color: #00ccff;
    text-shadow:
        0 0 5px #00ccff,
        0 0 15px #00ccff;
    margin-left: 4px;
}

.uptime-minutes {
    color: #ffe600;
    text-shadow:
        0 0 5px #ffe600,
        0 0 12px #ffe600;
    margin-left: 4px;
}


/* =========================================================
   MOBILE SERVER UPTIME FIX
   Nur Mobile – Desktop bleibt unverändert
========================================================= */

@media (max-width: 600px) {

    .server-uptime {
        display: block;

        width: 100%;
        max-width: 100%;

        margin-top: 4px;

        white-space: normal;
        text-align: center;

        line-height: 1.45;
    }

    .server-uptime::first-line {
        white-space: nowrap;
    }

    .uptime-days,
    .uptime-hours,
    .uptime-minutes {
        display: inline-block;

        margin-left: 3px;

        white-space: nowrap;
    }

    .uptime-days {
        color: #ff3030;

        text-shadow:
            0 0 5px #ff3030,
            0 0 12px #ff3030;
    }

    .uptime-hours {
        color: #00ccff;

        text-shadow:
            0 0 5px #00ccff,
            0 0 15px #00ccff;
    }

    .uptime-minutes {
        color: #ffe600;

        text-shadow:
            0 0 5px #ffe600,
            0 0 12px #ffe600;
    }

}