:root {
    --bg: #eef1eb;
    --panel: #f7f5ee;
    --txt: #283029;
    --accent: #2f7650;
    --accent-light: #4d936b;
    --btn-bg: #d9e1da;
    --border: #c7d0c8;
    --muted: #687169;
    --header-height: 58px;
    --footer-height: 40px;
    --max-width: none;
    --app-width: 1100px;
    --outer-bg: #d7e0d8;
}

        * {
            box-sizing: border-box;
        }

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

        body {
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            background: var(--outer-bg);
            color: var(--txt);
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;
        }

        button,
        input,
        select {
            font: inherit;
        }

        button {
            -webkit-tap-highlight-color: transparent;
        }
		
		

       .seiten-layout {
    width: min(94vw, calc(100dvh - 32px));
    height: calc(100dvh - 32px);
    margin: 16px auto;

    background: var(--bg);
    box-shadow: 0 0 24px rgba(28, 48, 34, 0.14);
}

@media (max-width: 700px) {
    .seiten-layout {
        width: 100%;
        height: 100dvh;
        margin: 0;
        box-shadow: none;
    }
}

        /* ==================================================
           PROGRAMMKOPF
           ================================================== */

        .programmkopf {
            position: relative;
            z-index: 100;

            display: flex;
            align-items: center;
            justify-content: space-between;

            min-height: var(--header-height);
            padding: 10px 16px;

            background: #254d3a;
            border-bottom: 1px solid #1c3a2c;
            box-shadow: 0 2px 8px rgba(25, 50, 35, 0.18);
        }

        .programmkopf h1 {
            margin: 0;
            color: #f4f1e7;
            font-size: 19px;
            font-weight: 600;
            line-height: 1.2;
        }

        /* ==================================================
           HAUPTBEREICH
           ================================================== */

        main {
            min-height: 0;
            overflow: hidden;
            padding: 10px 10px 8px;
        }

        .seitenrahmen {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0 auto;
        }

        #menueInhalt {
            display: none;
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: auto;
        }

        #menueInhalt.hm-sichtbar {
            display: block;
        }

        #programmAnsicht {
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        .programm-raster {
            display: grid;
            grid-template-rows:
                152px
                minmax(220px, 1fr)
                92px;
            gap: 8px;

            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        /*
         * Anmeldung und Gruppenbereich teilen sich denselben
         * oberen Platz. Dadurch verändert ein Wechsel zwischen
         * Gast- und angemeldetem Zustand nicht die Höhe des
         * Textbereichs.
         */
        .oberer-statusbereich {
            width: 100%;
            height: 152px;
            min-height: 152px;
            overflow: hidden;
        }

        .oberer-statusbereich > .content-card {
            width: 100%;
        }

        .content-card {
            width: 100%;
            margin: 0;
            padding: 14px;

            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 3px 12px rgba(34, 56, 40, 0.10);
        }

        /* ==================================================
           ANMELDUNG
           ================================================== */

        #anmeldeBereich {
            flex: 0 0 auto;
        }

        .anmelde-zeile {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }

        .form-input {
            width: 100%;
            min-width: 0;
            height: 42px;
            margin: 0;
            padding: 8px 10px;

            background: #fbfaf5;
            color: var(--txt);

            border: 1px solid #b8c3ba;
            border-radius: 8px;
            font-size: 15px;
        }

        .form-input:focus,
        .gruppen-auswahl:focus,
        .gruppen-user-id:focus,
        .input-nummer:focus {
            border-color: var(--accent-light);
            outline: 3px solid rgba(77, 147, 107, 0.20);
        }

        .code-input {
            text-align: center;
            font-size: 19px;
            font-weight: bold;
            letter-spacing: 4px;
        }

        .btn-primary {
            min-height: 42px;
            padding: 9px 12px;

            background: var(--accent);
            color: #ffffff;

            border: 0;
            border-radius: 8px;

            font-size: 14px;
            font-weight: bold;
            white-space: nowrap;
            cursor: pointer;
        }

  .btn-primary {
    min-height: 52px;
    padding: 10px 18px;

    background: #245f3d;
    color: #ffffff;

    border: 3px solid #173d2a;
    border-radius: 9px;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

        .btn-verify {
            width: 100%;
            margin-top: 8px;
            background: var(--accent);
            color: #ffffff;
        }

        #stufeCode {
            display: none;
        }

        .code-hinweis {
            margin: 0 0 8px;
            color: var(--accent-light);
            font-size: 13px;
            text-align: center;
        }

        .status-meldung {
            display: none;
            margin-top: 8px;
            padding: 9px 10px;

            border-radius: 8px;

            font-size: 13px;
            line-height: 1.4;
            text-align: left;
        }

        .status-meldung.erfolg {
            display: block;
            color: #245b39;
            background: #e1efe5;
            border: 1px solid #2e7d32;
        }

        .status-meldung.fehler {
            display: block;
            color: #8a2424;
            background: #f7e3e3;
            border: 1px solid #c62828;
        }

        /* ==================================================
           ANGEMELDETER BEREICH
           ================================================== */

        #angemeldeterBereich {
            display: none;
        }

        #angemeldeterBereich.sichtbar {
            display: block;
        }

        .gruppen-zeile {
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(100px, 40%);
            gap: 7px;
            align-items: center;
        }

        .gruppen-auswahl,
        .gruppen-user-id {
            width: 100%;
            min-width: 0;
            height: 40px;
            padding: 7px 9px;

            background: #fbfaf5;
            color: var(--txt);

            border: 1px solid #b8c3ba;
            border-radius: 8px;
        }

        #rankingAnzeige {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            margin-top: 8px;
            padding: 6px 8px;

            color: var(--muted);
            font-size: 13px;
            line-height: 1.35;
            text-align: center;
            visibility: hidden;
        }

        #rankingAnzeige.sichtbar {
            visibility: visible;
        }

        /* ==================================================
           FLEXIBLER TEXTBEREICH
           ================================================== */

        .text-karte {
            display: flex;
            width: 100%;
            height: 100%;
            min-height: 0;
            max-height: none;
            overflow: hidden;
        }

        #textAnzeige {
            display: flex;
            flex: 1 1 auto;
            align-items: center;
            justify-content: center;

            width: 100%;
            height: 100%;
            min-height: 0;
            max-height: none;
            padding: 8px 10px;
            overflow-y: auto;
            overscroll-behavior: contain;

            font-size: 18px;
            line-height: 1.55;
            text-align: center;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            scrollbar-gutter: stable;
        }

        /* ==================================================
           UNTERE BEDIENFLÄCHE
           ================================================== */

        .untere-bedienflaeche {
            display: grid;
            grid-template-rows: 42px 42px;
            gap: 8px;
            width: 100%;
            height: 92px;
            min-height: 92px;
            overflow: hidden;
        }

        .navigation-controls {
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                76px
                minmax(0, 1fr);
            gap: 8px;
            width: 100%;
        }

   .btn-nav {
    min-height: 52px;

    background: #f4f1e7;
    color: #173d2a;

    border: 3px solid #2f7650;
    border-radius: 9px;

    font-size: 30px;
    font-weight: 900;

    cursor: pointer;
}

        .btn-nav:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .input-nummer {
            width: 100%;
            min-width: 0;

            background: #fbfaf5;
            color: var(--txt);

            border: 1px solid #b8c3ba;
            border-radius: 8px;

            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .voting-section {
            visibility: hidden;
            height: 42px;
        }

        .voting-section.sichtbar {
            visibility: visible;
        }

        .voting-buttons {
            display: flex;
            gap: 7px;
            width: 100%;
            height: 42px;
        }

        .btn-vote {
            flex: 1;
            min-width: 0;
            padding: 8px 4px;

            color: #ffffff;

            border: 0;
            border-radius: 8px;

            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
        }

        .btn-pro {
            background: #2e7d32;
        }

        .btn-abstain {
            background: #f57c00;
        }

        .btn-contra {
            background: #c62828;
        }

        /* ==================================================
           FOOTER
           ================================================== */

        .seitenfuss {
            position: relative;
            z-index: 200;

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

            min-height: var(--footer-height);
            padding: 4px 10px;

            background: #254d3a;
            border-top: 1px solid #1c3a2c;
        }

        .seitenfuss .impressum-link {
            display: inline-block;
            padding: 5px 10px;

            background: transparent !important;
            color: #f4f1e7 !important;

            border: 0 !important;

            font-size: 13px;
            line-height: 1.2;
            text-decoration: underline;
            cursor: pointer;
        }

        .seitenfuss .impressum-link:hover,
        .seitenfuss .impressum-link:focus-visible {
            color: #d5eadc !important;
            outline: 2px solid #d5eadc;
            outline-offset: 2px;
        }

        /* ==================================================
           HANDY
           ================================================== */

        @media (max-width: 500px) {
            :root {
                --header-height: 54px;
                --footer-height: 36px;
            }

            .programmkopf {
                padding: 8px 11px;
            }

            .programmkopf h1 {
                font-size: 17px;
            }

            main {
                padding: 7px 7px 6px;
            }

            .programm-raster {
                grid-template-rows:
                    146px
                    minmax(180px, 1fr)
                    90px;
                gap: 6px;
            }

            .untere-bedienflaeche {
                height: 90px;
                min-height: 90px;
                grid-template-rows: 42px 42px;
                gap: 6px;
            }

            .oberer-statusbereich {
                height: 146px;
                min-height: 146px;
            }

            .content-card {
                padding: 10px;
                border-radius: 8px;
            }

            .anmelde-zeile {
                grid-template-columns: minmax(0, 1fr);
                gap: 6px;
            }

            .btn-primary {
                width: 100%;
            }

            .gruppen-zeile {
                grid-template-columns:
                    minmax(0, 1fr)
                    minmax(94px, 42%);
            }

            .gruppen-auswahl,
            .gruppen-user-id {
                font-size: 14px;
            }

            #textAnzeige {
                padding: 7px 8px;
                font-size: 17px;
            }

            .voting-buttons {
                gap: 5px;
            }

            .btn-vote {
                padding: 8px 2px;
                font-size: 12px;
            }
        }

        @media (max-height: 620px) {
            .content-card {
                padding-top: 8px;
                padding-bottom: 8px;
            }

            .ranking-anzeige {
                margin-top: 4px;
            }

            #textAnzeige {
                font-size: 16px;
                line-height: 1.4;
            }
        }

@media (min-width: 800px) {
    main {
        padding: 16px 18px 14px;
    }

    .programm-raster {
        grid-template-rows:
            164px
            minmax(260px, 1fr)
            104px;
        gap: 12px;
    }

    .oberer-statusbereich {
        height: 164px;
        min-height: 164px;
    }

    .untere-bedienflaeche {
        height: 104px;
        min-height: 104px;
        grid-template-rows: 46px 46px;
        gap: 12px;
    }

    .navigation-controls,
    .voting-buttons {
        gap: 12px;
    }

    .btn-nav,
    .voting-section,
    .voting-buttons {
        min-height: 46px;
        height: 46px;
    }

    #textAnzeige {
        padding: 20px 26px;
        font-size: 20px;
        line-height: 1.65;
    }

    .content-card {
        padding: 18px;
    }

    .programmkopf h1 {
        font-size: 23px;
    }
}

/* Helles Erscheinungsbild des eingebundenen Hamburger-Menüs */
.hm-button:hover,
.hm-button:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
    outline-color: #d5eadc !important;
}

.hm-ansicht {
    color: var(--txt) !important;
}

.hm-kopf {
    border-bottom-color: var(--border) !important;
}

.hm-titel {
    color: var(--accent) !important;
}

.hm-schliessen {
    background: #edf1eb !important;
    color: #283029 !important;
    border-color: #b8c3ba !important;
}

.hm-schliessen:hover,
.hm-schliessen:focus-visible {
    background: #dce6de !important;
    outline-color: var(--accent) !important;
}

.hm-auswahl {
    background: #e4e9e3 !important;
    color: #283029 !important;
    border-color: #c2cbc3 !important;
}

.hm-auswahl:hover,
.hm-auswahl:focus-visible,
.hm-auswahl.hm-offen {
    background: #cfe0d3 !important;
    color: #1f4e34 !important;
}

.hm-einschub,
.hm-inhalt {
    background: #f5f3ec !important;
    color: #283029 !important;
    border-color: #c7d0c8 !important;
}

.hm-inhalt h1,
.hm-inhalt h2,
.hm-inhalt h3 {
    color: var(--accent) !important;
}

.hm-inhalt input,
.hm-inhalt select,
.hm-inhalt textarea {
    background: #fbfaf5 !important;
    color: #283029 !important;
    border-color: #b8c3ba !important;
}

.hm-inhalt details {
    background: #edf1eb !important;
    border-color: #c7d0c8 !important;
}

.hm-inhalt summary {
    color: #283029 !important;
}