/* =========================================================
   RACEDAYS 26
   Design angelehnt an den Veranstaltungsflyer
   ========================================================= */

:root {
    /* RaceDays Grundfarben */
    --bg: #1d1d21;
    --bg-deep: #17171a;

    --surface: #2d2d39;
    --surface-2: #333340;
    --surface-hover: #393946;

    --text: #ffffff;
    --text-soft: #e6e6ea;
    --muted: #aaaab4;

    /* Flyer-Akzente */
    --primary: #cc302b;
    --primary-hover: #e03a34;
    --primary-dark: #a9211e;

    --blue: #47a4c6;
    --blue-light: #68b8d4;

    /* Status */
    --success: #43b879;
    --success-soft: #213d31;

    --warning: #e5a343;
    --warning-soft: #443724;

    --danger: #d63b35;
    --danger-soft: #462827;

    --border: #3c3c48;
    --border-light: #4a4a58;

    --ring: #5bb7d7;

    --shadow-sm:
        0 3px 10px rgba(0, 0, 0, 0.18);

    --shadow-md:
        0 10px 30px rgba(0, 0, 0, 0.25);

    --shadow-lg:
        0 20px 50px rgba(0, 0, 0, 0.35);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --max-width: 1160px;
}


/* =========================================================
   BASIS
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    color: var(--text);

    background: var(--bg);

    font-family:
        "Trebuchet MS",
        "Avenir Next",
        Avenir,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.55;

    -webkit-font-smoothing: antialiased;
}

body {
    position: relative;

    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(73, 73, 90, 0.20),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #25252b 0%,
            #1d1d21 45%,
            #18181b 100%
        );

    overflow-x: hidden;
}


/* Dezente Speed-Linien wie auf dem Flyer */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.30;

    background:
        repeating-linear-gradient(
            100deg,
            transparent 0,
            transparent 42px,
            rgba(109, 109, 130, 0.12) 44px,
            rgba(109, 109, 130, 0.12) 48px,
            transparent 50px,
            transparent 78px
        );
}


/* =========================================================
   HEADER
   ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 100;

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

    gap: 1rem;

    min-height: 72px;

    padding:
        0.85rem
        max(1rem, calc((100% - var(--max-width)) / 2));

    background:
        rgba(29, 29, 33, 0.96);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.18);
}


/* Rote RaceDays Linie */

header::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -3px;

    width: 115px;
    height: 6px;

    background: var(--primary);

    border-radius: 0 99px 99px 0;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 900;

    letter-spacing: -0.025em;

    text-decoration: none;

    text-transform: uppercase;
}


.brand::before {
    content: "R";

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #e03933,
            #aa221e
        );

    border-radius: 10px;

    font-size: 1.1rem;
    font-weight: 950;

    box-shadow:
        0 6px 18px rgba(204, 48, 43, 0.35);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {
    display: flex;
    align-items: center;

    gap: 0.25rem;

    flex-wrap: wrap;
}

nav a {
    display: inline-flex;
    align-items: center;

    min-height: 42px;

    padding: 0.55rem 0.8rem;

    color: #d7d7de;

    border-radius: 9px;

    font-size: 0.90rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 150ms ease,
        background 150ms ease;
}

nav a:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.07);
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    width:
        min(
            calc(100% - 2rem),
            var(--max-width)
        );

    margin: 0 auto;

    padding:
        1.4rem
        0
        4rem;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    max-width: 850px;

    padding:
        clamp(2.5rem, 7vw, 5.5rem)
        0
        clamp(2rem, 5vw, 3.4rem);
}


/* roter Geschwindigkeitsbalken */

.hero::before {
    content: "";

    display: block;

    width: 80px;
    height: 8px;

    margin-bottom: 1.6rem;

    background: var(--primary);

    border-radius: 999px;

    box-shadow:
        35px 0 0 -2px var(--primary),
        68px 0 0 -3px var(--primary);
}


.eyebrow {
    margin:
        0
        0
        0.65rem;

    color: var(--blue);

    font-size: 0.82rem;

    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.hero h1 {
    max-width: 850px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            2.35rem,
            9vw,
            4.8rem
        );

    font-weight: 950;

    letter-spacing: -0.065em;

    line-height: 0.92;

    text-transform: uppercase;
}


.hero p:not(.eyebrow) {
    max-width: 650px;

    margin:
        1.2rem
        0
        0;

    color: #c4c4cc;

    font-size:
        clamp(
            1rem,
            2.5vw,
            1.15rem
        );

    line-height: 1.65;
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3 {
    color: #ffffff;

    letter-spacing: -0.03em;
}

h2 {
    margin:
        1.9rem
        0
        1rem;

    font-size:
        clamp(
            1.4rem,
            4vw,
            1.85rem
        );

    font-weight: 900;
}

h3 {
    margin:
        0.8rem
        0
        0.45rem;

    font-size: 1.35rem;

    font-weight: 900;
}


/* =========================================================
   TAGESFILTER
   ========================================================= */

.filters {
    display: flex;

    gap: 0.55rem;

    margin: 0 -0.25rem;

    padding:
        0.25rem
        0.25rem
        1.5rem;

    overflow-x: auto;

    scrollbar-width: none;
}

.filters::-webkit-scrollbar {
    display: none;
}


.day {
    flex: 0 0 auto;

    min-height: 48px;

    padding:
        0.72rem
        1.15rem;

    color: #d4d4db;

    background:
        #292933;

    border:
        1px solid
        #3b3b47;

    border-radius:
        999px;

    font-size: 0.91rem;

    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;

    transition:
        all
        170ms
        ease;
}


.day:hover {
    color: #ffffff;

    background:
        #33333e;

    border-color:
        #50505d;
}


.day.active {
    color: #ffffff;

    background:
        var(--primary);

    border-color:
        var(--primary);

    box-shadow:
        0
        7px
        20px
        rgba(204, 48, 43, 0.32);
}


/* =========================================================
   CARDS
   ========================================================= */

.grid,
.admin-list {
    display: grid;

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

    gap: 1rem;
}


.card,
.summary,
.form,
.empty,
.stats > div {
    color: var(--text);

    background:
        linear-gradient(
            145deg,
            #30303b,
            #292933
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-md);
}


/* Schichtkarte */

.card {
    position: relative;

    padding: 1.2rem;

    overflow: hidden;

    border-left:
        5px solid
        var(--area, var(--blue));

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}


/* dunkler Lichtverlauf */

.card::after {
    content: "";

    position: absolute;

    right: -85px;
    top: -85px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    pointer-events: none;
}


.card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0
        15px
        35px
        rgba(0, 0, 0, 0.32);
}


.card-head {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 0.8rem;

    margin-bottom:
        0.5rem;
}


/* =========================================================
   PILL / BEREICH
   ========================================================= */

.pill {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding:
        0.35rem
        0.7rem;

    color: var(--blue-light);

    background:
        rgba(67, 156, 190, 0.10);

    border:
        1px solid
        rgba(67, 156, 190, 0.22);

    border-radius:
        999px;

    font-size: 0.75rem;

    font-weight: 900;
}


/* =========================================================
   STATUS
   ========================================================= */

.status {
    display: inline-flex;

    align-items: center;

    gap: 0.38rem;

    min-height: 30px;

    padding:
        0.36rem
        0.65rem;

    border-radius:
        999px;

    font-size:
        0.76rem;

    font-weight:
        900;

    white-space:
        nowrap;
}


.status.free {
    color:
        #77dca0;

    background:
        rgba(
            52,
            164,
            98,
            0.14
        );
}


.status.free::before {
    content: "";

    width: 7px;
    height: 7px;

    background:
        #49c87d;

    border-radius:
        50%;
}


.status.full {
    color:
        #c4c4cb;

    background:
        #3b3b45;
}


.status.full::before {
    content: "";

    width: 7px;
    height: 7px;

    background:
        #8f8f99;

    border-radius:
        50%;
}


.status.warn {
    color:
        #ffc66f;

    background:
        rgba(
            218,
            142,
            41,
            0.15
        );
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.card p {
    margin:
        0.55rem
        0;

    color:
        #ddddE3;

    line-height:
        1.55;
}


.card b {
    color:
        #ffffff;
}


.card .muted {
    margin-top:
        0.8rem;

    padding-top:
        0.65rem;

    color:
        #a5a5af;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );
}


.muted,
small {
    color:
        var(--muted);
}


small {
    display:
        block;

    font-size:
        0.82rem;

    line-height:
        1.45;

    font-weight:
        500;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        49px;

    padding:
        0.78rem
        1.18rem;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #dc3933,
            #bc2723
        );

    border:
        0;

    border-radius:
        12px;

    box-shadow:
        0
        7px
        18px
        rgba(
            204,
            48,
            43,
            0.25
        );

    font-size:
        0.93rem;

    font-weight:
        900;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform
        150ms
        ease,
        filter
        150ms
        ease,
        box-shadow
        150ms
        ease;
}


.card > .button {
    width:
        100%;

    margin-top:
        0.75rem;
}


.button:hover:not(:disabled) {
    filter:
        brightness(1.08);

    transform:
        translateY(-1px);

    box-shadow:
        0
        9px
        24px
        rgba(
            204,
            48,
            43,
            0.35
        );
}


.button:active:not(:disabled) {
    transform:
        translateY(0);
}


.button.secondary {
    color:
        #ffffff;

    background:
        #3a3a47;

    border:
        1px solid
        #4c4c59;

    box-shadow:
        none;
}


.button.secondary:hover:not(:disabled) {
    background:
        #454553;
}


.button.danger {
    background:
        #a82521;

    box-shadow:
        none;
}


.button:disabled {
    color:
        #888892;

    background:
        #393941;

    box-shadow:
        none;

    cursor:
        not-allowed;
}


/* =========================================================
   FORMULARE
   ========================================================= */

.form {
    display:
        grid;

    gap:
        1.2rem;

    width:
        100%;

    max-width:
        650px;

    padding:
        clamp(
            1rem,
            4vw,
            1.6rem
        );
}


.form.compact {
    margin-bottom:
        1.3rem;
}


label {
    display:
        grid;

    gap:
        0.45rem;

    color:
        #ececf0;

    font-size:
        0.91rem;

    font-weight:
        800;
}


input,
select,
textarea {
    width:
        100%;

    min-height:
        50px;

    padding:
        0.75rem
        0.85rem;

    color:
        #ffffff;

    background:
        #222229;

    border:
        1px solid
        #4a4a56;

    border-radius:
        11px;

    outline:
        none;

    color-scheme:
        dark;

    transition:
        border-color
        150ms
        ease,
        box-shadow
        150ms
        ease,
        background
        150ms
        ease;
}


input:hover,
select:hover,
textarea:hover {
    border-color:
        #656573;
}


input:focus,
select:focus,
textarea:focus {
    background:
        #26262e;

    border-color:
        var(--blue);

    box-shadow:
        0
        0
        0
        4px
        rgba(
            71,
            164,
            198,
            0.15
        );
}


textarea {
    min-height:
        115px;

    resize:
        vertical;
}


::placeholder {
    color:
        #74747e;
}


/* =========================================================
   ZUSAMMENFASSUNG
   ========================================================= */

.summary {
    max-width:
        650px;

    margin:
        1rem
        0;

    padding:
        1.25rem
        1.4rem;

    border-left:
        5px solid
        var(--blue);
}


.summary b {
    color:
        var(--blue-light);

    font-size:
        1.1rem;
}


/* =========================================================
   INLINE
   ========================================================= */

.inline {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.6rem;

    margin-top:
        0.9rem;
}


.inline select {
    flex:
        1
        1
        220px;
}


/* =========================================================
   MELDUNGEN
   ========================================================= */

.alert {
    max-width:
        760px;

    margin:
        1rem
        0;

    padding:
        1rem
        1.1rem;

    border-radius:
        14px;

    border:
        1px solid
        transparent;

    font-size:
        0.93rem;

    line-height:
        1.55;
}


.alert.error {
    color:
        #ffaaa6;

    background:
        #432725;

    border-color:
        #70403c;
}


.alert.success {
    color:
        #82dca6;

    background:
        #21392d;

    border-color:
        #315a43;
}


.alert.warn {
    color:
        #ffd18a;

    background:
        #403525;

    border-color:
        #675137;
}


/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.stats {
    display:
        grid;

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

    gap:
        0.8rem;

    margin:
        1.3rem
        0
        2rem;
}


.stats > div {
    position:
        relative;

    padding:
        1.2rem;

    overflow:
        hidden;
}


/* roter Marker wie Flyer */

.stats > div::before {
    content: "";

    position:
        absolute;

    left:
        0;

    top:
        22px;

    width:
        5px;

    height:
        44px;

    background:
        var(--primary);

    border-radius:
        0
        8px
        8px
        0;
}


.stats b {
    display:
        block;

    color:
        #ffffff;

    font-size:
        clamp(
            1.7rem,
            7vw,
            2.45rem
        );

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        -0.045em;
}


.stats span {
    display:
        block;

    margin-top:
        0.45rem;

    color:
        var(--blue);

    font-size:
        0.82rem;

    font-weight:
        850;
}


/* =========================================================
   SUCCESS
   ========================================================= */

.success {
    max-width:
        680px;

    margin:
        1.5rem
        auto;

    padding:
        clamp(
            1.5rem,
            6vw,
            3rem
        );

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #30303b,
            #292933
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    border-radius:
        25px;

    box-shadow:
        var(--shadow-lg);

    text-align:
        center;
}


.success::before {
    content:
        "✓";

    display:
        grid;

    place-items:
        center;

    width:
        66px;

    height:
        66px;

    margin:
        0
        auto
        1.25rem;

    color:
        #ffffff;

    background:
        var(--primary);

    border-radius:
        50%;

    box-shadow:
        0
        10px
        30px
        rgba(
            204,
            48,
            43,
            0.32
        );

    font-size:
        1.9rem;

    font-weight:
        950;
}


.success h1 {
    margin-bottom:
        0.5rem;
}


.success > p {
    color:
        #bdbdc5;
}


/* =========================================================
   EMPTY
   ========================================================= */

.empty {
    padding:
        2rem
        1.25rem;

    color:
        var(--muted);

    text-align:
        center;

    border-style:
        dashed;
}


/* =========================================================
   DETAILS
   ========================================================= */

details {
    margin:
        1rem
        0
        1.5rem;
}


details summary {
    width:
        fit-content;

    list-style:
        none;
}


details summary::-webkit-details-marker {
    display:
        none;
}


details[open] summary {
    margin-bottom:
        1rem;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline:
        3px
        solid
        var(--ring);

    outline-offset:
        3px;
}


[hidden] {
    display:
        none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 599px) {

    header {
        min-height:
            64px;

        padding:
            0.7rem
            1rem;
    }


    header::after {
        width:
            75px;

        height:
            5px;
    }


    .brand {
        font-size:
            0.96rem;
    }


    .brand::before {
        width:
            34px;

        height:
            34px;

        border-radius:
            8px;
    }


    header nav {
        width:
            100%;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        scrollbar-width:
            none;
    }


    header nav::-webkit-scrollbar {
        display:
            none;
    }


    nav a {
        flex:
            0
            0
            auto;

        white-space:
            nowrap;
    }


    main {
        width:
            calc(100% - 1.5rem);

        padding-top:
            0.8rem;
    }


    .hero {
        padding-top:
            2.3rem;
    }


    .hero h1 {
        font-size:
            clamp(
                2.4rem,
                14vw,
                3.7rem
            );
    }


    .card-head {
        flex-direction:
            column;

        gap:
            0.55rem;
    }


    .status {
        align-self:
            flex-start;
    }


    .form .button,
    .inline .button {
        width:
            100%;
    }


    .inline select {
        flex-basis:
            100%;
    }
}


/* =========================================================
   TABLET + DESKTOP
   ========================================================= */

@media (min-width: 700px) {

    main {
        padding-top:
            2rem;
    }


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

        gap:
            1.15rem;
    }


    .card {
        padding:
            1.35rem;
    }


    .stats {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap:
            1rem;
    }
}


@media (min-width: 1050px) {

    .grid {
        gap:
            1.3rem;
    }


    .card {
        min-height:
            250px;

        display:
            flex;

        flex-direction:
            column;
    }


    .card > .button {
        margin-top:
            auto;
    }
}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}
/* =========================================================
   ÖFFENTLICHE NAVIGATION
   ========================================================= */

.public-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* Kuchen-Aktion */

.public-nav .cake-nav {
    position: relative;

    min-height: 46px;

    padding: 0.65rem 1rem;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #54b7d6,
        #328dac
    );

    border: 1px solid #64bfdc;
    border-radius: 12px;

    box-shadow:
        0 6px 18px rgba(71, 164, 198, 0.28);

    font-weight: 900;

    text-decoration: none;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}


.public-nav .cake-nav:hover {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #61c2e0,
        #389aba
    );

    transform: translateY(-1px);

    box-shadow:
        0 9px 24px rgba(71, 164, 198, 0.38);
}


.public-nav .cake-nav:active {
    transform: translateY(0);
}


/* Admin bewusst zurückhaltender */

.public-nav .admin-nav {
    min-height: 46px;

    padding: 0.65rem 0.9rem;

    color: #b8b8c1;

    background: transparent;

    border: 1px solid #4b4b58;
    border-radius: 12px;

    font-size: 0.86rem;
    font-weight: 750;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}


.public-nav .admin-nav:hover {
    color: #ffffff;

    background: #34343f;

    border-color: #676775;
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 599px) {

    .public-nav {
        display: grid;

        width: 100%;

        grid-template-columns:
            1fr auto;

        gap: 0.5rem;
    }


    /* Kuchen bekommt auf dem Handy bewusst viel Platz */

    .public-nav .cake-nav {
        min-height: 50px;

        width: 100%;

        justify-content: center;

        font-size: 0.92rem;
    }


    .public-nav .admin-nav {
        min-width: 75px;

        min-height: 50px;

        justify-content: center;
    }


    /* Datenschutz wird kleiner darunter platziert */

    .public-nav > a[href="/privacy"] {
        grid-column: 1 / -1;

        min-height: 32px;

        padding: 0.25rem 0.4rem;

        color: #8f8f99;

        font-size: 0.76rem;
    }
}
/* Admin-Bearbeitungsformulare */
.check{display:flex;grid-template-columns:none;flex-direction:row;align-items:center;gap:.65rem;padding:.7rem .8rem;background:rgba(255,255,255,.04);border:1px solid var(--border,#3c3c48);border-radius:11px}.check input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;min-height:20px;accent-color:var(--primary,#cc302b)}.admin-list .form{max-width:none;box-shadow:none;background:transparent;border:0;padding:0}.admin-list .card{min-height:0}
/* Tages- und Bereichsfilter sowie klarere Schichtkarten */
.shift-filters{margin:0 0 1.4rem;padding:1rem;background:linear-gradient(145deg,#30303b,#292933);border:1px solid rgba(255,255,255,.07);border-radius:22px;box-shadow:var(--shadow-md)}.filter-group+.filter-group{margin-top:1rem}.filter-label{display:block;margin-bottom:.45rem;color:var(--blue,#47a4c6);font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.shift-filters .filters{padding:.1rem 0 .25rem;margin:0}.filter-chip{flex:0 0 auto;min-height:44px;padding:.62rem .95rem;color:#d4d4db;background:#24242c;border:1px solid #454552;border-radius:999px;font-weight:800;white-space:nowrap;cursor:pointer}.filter-chip:hover{color:#fff;border-color:#696978}.filter-chip.active{color:#fff;background:var(--primary,#cc302b);border-color:var(--primary,#cc302b);box-shadow:0 6px 18px rgba(204,48,43,.25)}.area-filter{border-left:5px solid var(--filter-color,#47a4c6)}.area-filter.active{background:var(--filter-color,#47a4c6);border-color:var(--filter-color,#47a4c6)}.filter-result{margin:.75rem 0 0;color:var(--muted,#aaaab4);font-size:.86rem}.filter-result strong{color:#fff}.shift-grid{align-items:stretch}.shift-card{min-height:0!important}.shift-card[hidden]{display:none!important}.shift-identity{margin:.9rem 0 1rem;padding:1rem;background:rgba(0,0,0,.14);border-radius:15px}.shift-identity h2{margin:.15rem 0;font-size:1.45rem}.shift-date{margin:0!important;color:var(--blue-light,#68b8d4)!important;font-weight:850}.shift-time{margin:.35rem 0 0!important;color:#fff!important;font-size:1.45rem;font-weight:950;letter-spacing:-.03em}.shift-duration{margin:.2rem 0 0!important;color:var(--muted,#aaaab4)!important;font-size:.85rem}.shift-note{margin:.75rem 0;padding:.75rem .85rem;color:#eee;background:rgba(71,164,198,.1);border-left:4px solid var(--blue,#47a4c6);border-radius:10px}.shift-people{font-size:.92rem}.signup-summary .summary-label{display:block;margin-bottom:.35rem;color:var(--muted,#aaaab4);font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.signup-summary h2{margin:.2rem 0 .6rem;color:var(--blue-light,#68b8d4);font-size:1.65rem}.signup-summary p{margin:.25rem 0}.signup-summary .summary-time{color:#fff;font-size:1.5rem;font-weight:950}.shift-empty{grid-column:1/-1}@media(min-width:750px){.shift-filters{padding:1.25rem 1.4rem}.filter-group{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:.75rem}.filter-group+.filter-group{margin-top:.75rem}.filter-label{margin:0}.shift-filters .filters{min-width:0}}

/* =========================================================
   KAFFEE & KUCHEN: 1 PERSON BENÖTIGT, 2. PERSON OPTIONAL
   ========================================================= */

.status.needed {
    color: #ffffff;
    background: var(--primary, #cf312b);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.status.needed::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 50%;
}

.status.optional {
    color: #9be3b8;
    background: rgba(67, 184, 121, 0.13);
    border: 1px solid rgba(85, 200, 131, 0.28);
}

.status.optional::before {
    content: "✓";
    font-weight: 950;
}

.optional-helper-info {
    margin: 0.8rem 0;
    padding: 0.8rem 0.9rem;
    color: #d9f1f9;
    background: rgba(74, 168, 201, 0.10);
    border: 1px solid rgba(74, 168, 201, 0.20);
    border-left: 4px solid var(--blue, #4aa8c9);
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.optional-helper-info strong {
    color: #ffffff;
}

/* =========================================================
   MOBILE PREMIUM OPTIMIERUNG
   320-699 px, auf Touch-Bedienung und den RaceDays-Flyer abgestimmt
   ========================================================= */

@media (max-width: 699px) {
    :root {
        --mobile-edge: 14px;
        --mobile-radius: 18px;
    }

    html {
        scroll-padding-top: 145px;
        -webkit-text-size-adjust: 100%;
    }

    body {
        background:
            radial-gradient(circle at 92% 4%, rgba(71, 164, 198, 0.10), transparent 18rem),
            linear-gradient(180deg, #24242a 0%, #1c1c20 43%, #161618 100%);
    }

    body::before {
        opacity: 0.22;
    }

    header {
        position: sticky;
        top: 0;
        gap: 0.65rem;
        min-height: 0;
        padding: 0.68rem var(--mobile-edge) 0.72rem;
        background: rgba(28, 28, 33, 0.97);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
    }

    header::after {
        width: 70px;
        height: 4px;
        bottom: -2px;
    }

    .brand {
        min-height: 38px;
        gap: 0.55rem;
        font-size: 0.93rem;
    }

    .brand::before {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 0.95rem;
    }

    .public-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        gap: 0.45rem;
    }

    .public-nav .cake-nav,
    .public-nav .admin-nav,
    .public-nav .admin-nav-button {
        min-height: 48px;
        border-radius: 12px;
    }

    .public-nav .cake-nav {
        width: 100%;
        padding: 0.66rem 0.82rem;
        justify-content: center;
        font-size: 0.86rem;
    }

    .public-nav .admin-nav,
    .public-nav .admin-nav-button {
        min-width: 74px;
        padding: 0.62rem 0.72rem;
        justify-content: center;
        font-size: 0.78rem;
    }

    .public-nav > a[href="/privacy"],
    .public-nav .privacy-nav {
        display: none;
    }

    main {
        width: calc(100% - (var(--mobile-edge) * 2));
        padding: 0.75rem 0 3.25rem;
    }

    .hero {
        padding: 1.75rem 0 1.45rem;
    }

    .hero::before {
        width: 52px;
        height: 5px;
        margin-bottom: 1rem;
        box-shadow: 27px 0 0 -1px var(--primary), 52px 0 0 -2px var(--primary);
    }

    .eyebrow {
        margin-bottom: 0.45rem;
        font-size: 0.67rem;
        line-height: 1.35;
        letter-spacing: 0.105em;
    }

    .hero h1 {
        max-width: 355px;
        font-size: clamp(2.15rem, 11.5vw, 3.15rem);
        line-height: 0.95;
        letter-spacing: -0.055em;
    }

    .hero p:not(.eyebrow) {
        margin-top: 0.8rem;
        font-size: 0.92rem;
        line-height: 1.52;
    }

    .shift-filters {
        margin: 0 0 1rem;
        padding: 0.9rem;
        border-radius: var(--mobile-radius);
        box-shadow: 0 9px 25px rgba(0, 0, 0, 0.24);
    }

    .filter-group + .filter-group {
        margin-top: 0.85rem;
    }

    .filter-label {
        margin-bottom: 0.42rem;
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    .shift-filters .filters {
        display: flex;
        gap: 0.42rem;
        margin: 0 -0.9rem 0 0;
        padding: 0 0.9rem 0.18rem 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chip,
    .day {
        min-height: 43px;
        padding: 0.58rem 0.8rem;
        border-radius: 12px;
        font-size: 0.77rem;
        scroll-snap-align: start;
    }

    .area-filter {
        border-left-width: 4px;
    }

    .filter-result {
        margin-top: 0.58rem;
        font-size: 0.75rem;
    }

    .cake-callout {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0.72rem;
        margin: 0 0 1rem;
        padding: 0.9rem;
        border-left-width: 5px;
        border-radius: var(--mobile-radius);
    }

    .cake-callout-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 1.28rem;
    }

    .cake-callout-kicker {
        font-size: 0.61rem;
    }

    .cake-callout h2 {
        margin: 0.05rem 0 0;
        font-size: 1.08rem;
        line-height: 1.15;
    }

    .cake-callout-content > p:last-child {
        margin-top: 0.25rem;
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .cake-button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 48px;
        margin-top: 0.08rem;
    }

    .grid,
    .admin-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.82rem;
    }

    .shift-card,
    .card {
        border-radius: var(--mobile-radius);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    }

    .shift-card {
        padding: 0.95rem;
    }

    .shift-card .card-head,
    .card-head {
        flex-direction: row;
        align-items: center;
        gap: 0.42rem;
        margin-bottom: 0.55rem;
    }

    .pill,
    .status {
        min-height: 28px;
        padding: 0.32rem 0.55rem;
        font-size: 0.67rem;
    }

    .status {
        margin-left: auto;
    }

    .shift-identity {
        margin: 0 0 0.72rem;
        padding: 0.8rem 0.82rem;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.18);
    }

    .shift-date {
        font-size: 0.74rem;
    }

    .shift-identity h2 {
        margin: 0.12rem 0 0.18rem;
        font-size: 1.16rem;
        line-height: 1.15;
    }

    .shift-time {
        margin-top: 0.2rem !important;
        font-size: 1.43rem !important;
        line-height: 1.05;
    }

    .shift-duration {
        margin-top: 0.25rem !important;
        font-size: 0.72rem !important;
    }

    .shift-note,
    .optional-helper-info {
        margin: 0.62rem 0;
        padding: 0.68rem 0.72rem;
        border-radius: 10px;
        font-size: 0.78rem;
        line-height: 1.42;
    }

    .card .muted,
    .shift-people {
        font-size: 0.78rem;
        line-height: 1.42;
    }

    .card .muted {
        margin-top: 0.55rem;
        padding-top: 0.52rem;
    }

    .card > .button,
    .shift-card > .button {
        width: 100%;
        min-height: 50px;
        margin-top: 0.68rem;
        padding: 0.75rem 0.8rem;
        border-radius: 12px;
        font-size: 0.88rem;
    }

    .summary,
    .signup-summary,
    .form {
        border-radius: var(--mobile-radius);
    }

    .summary,
    .signup-summary {
        margin: 0.8rem 0;
        padding: 0.95rem;
    }

    .signup-summary .summary-label {
        font-size: 0.67rem;
    }

    .signup-summary h2 {
        margin: 0.2rem 0 0.4rem;
        font-size: 1.35rem;
    }

    .signup-summary .summary-time {
        font-size: 1.35rem;
    }

    .form {
        gap: 0.95rem;
        padding: 1rem;
    }

    label {
        gap: 0.4rem;
        font-size: 0.83rem;
    }

    input,
    select,
    textarea {
        min-height: 52px;
        padding: 0.78rem 0.82rem;
        border-radius: 12px;
        font-size: 16px;
    }

    textarea {
        min-height: 108px;
    }

    small {
        font-size: 0.74rem;
        line-height: 1.42;
    }

    .button {
        min-height: 50px;
        padding: 0.75rem 0.88rem;
        border-radius: 12px;
        font-size: 0.87rem;
    }

    .form .button,
    .inline .button {
        width: 100%;
    }

    .inline {
        gap: 0.5rem;
    }

    .inline select {
        flex-basis: 100%;
    }

    .alert {
        margin: 0.72rem 0;
        padding: 0.82rem 0.88rem;
        border-radius: 12px;
        font-size: 0.81rem;
    }

    .success {
        margin: 0.75rem 0;
        padding: 1.2rem 1rem;
        border-radius: var(--mobile-radius);
    }

    .success::before {
        width: 54px;
        height: 54px;
        margin-bottom: 0.9rem;
        font-size: 1.5rem;
    }

    .success h1 {
        margin-top: 0;
        font-size: 1.72rem;
    }

    .success > .button,
    .success .alert .button {
        width: 100%;
        margin-top: 0.5rem;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        margin: 0.9rem 0 1.25rem;
    }

    .stats > div {
        min-width: 0;
        padding: 0.88rem 0.72rem 0.82rem 0.93rem;
        border-radius: 15px;
    }

    .stats > div::before {
        top: 17px;
        width: 4px;
        height: 34px;
    }

    .stats b {
        font-size: 1.62rem;
    }

    .stats span {
        font-size: 0.7rem;
    }

    .admin-list .card {
        min-height: 0;
        padding: 0.9rem;
    }

    .admin-list .form {
        padding: 0;
    }

    .check {
        padding: 0.7rem;
        font-size: 0.79rem;
    }

    header .admin-nav {
        width: 100%;
        flex-wrap: nowrap;
        gap: 0.35rem;
        margin-right: calc(var(--mobile-edge) * -1);
        padding-right: var(--mobile-edge);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    header .admin-nav::-webkit-scrollbar {
        display: none;
    }

    header .admin-nav a {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0.55rem 0.7rem;
        font-size: 0.75rem;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .site-footer {
        margin-top: 0.5rem;
        padding: 1.05rem var(--mobile-edge) 1.7rem;
        gap: 0.5rem;
        font-size: 0.73rem;
    }
}

@media (max-width: 359px) {
    :root {
        --mobile-edge: 10px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .pill,
    .status {
        padding-inline: 0.46rem;
        font-size: 0.61rem;
    }

    .shift-time {
        font-size: 1.3rem !important;
    }

    .public-nav .cake-nav {
        font-size: 0.8rem;
    }
}

@media (min-width: 430px) and (max-width: 699px) {
    :root {
        --mobile-edge: 18px;
    }

    .hero h1 {
        max-width: 400px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .day:hover,
    .filter-chip:hover,
    .button:hover:not(:disabled),
    .public-nav .cake-nav:hover {
        transform: none;
    }

    .button,
    .day,
    .filter-chip,
    nav a {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =========================================================
   MOBILE HEADER + ZURUECK-LINK FIX
   ========================================================= */

/* Alle einfachen Zurueck-Links im Hauptinhalt deutlich sichtbar */
main > a[href="/"],
main > a[href="/admin/shifts"],
.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    margin: 0 0 1rem;
    padding: 0.62rem 0.82rem;
    color: #ffffff;
    background: #383844;
    border: 1px solid #585866;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

main > a[href="/"]:hover,
main > a[href="/admin/shifts"]:hover,
.back-link:hover {
    color: #ffffff;
    background: #454552;
    border-color: #747482;
}

@media (max-width: 699px) {
    /* Header bleibt bewusst EINZEILIG und niedrig. */
    header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.45rem;
        min-height: 56px;
        padding: 0.5rem var(--mobile-edge);
    }

    header::after {
        width: 58px;
        height: 3px;
    }

    .brand {
        min-width: 0;
        min-height: 38px;
        gap: 0.45rem;
        font-size: 0.84rem;
        white-space: nowrap;
        overflow: hidden;
    }

    .brand::before {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
        border-radius: 8px;
    }

    .brand-main {
        font-size: 0.93rem;
    }

    .brand-sub {
        display: none;
    }

    /* Oeffentliche Navigation rechts neben dem Logo statt darunter */
    header .public-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
        width: auto;
        min-width: 0;
        overflow: visible;
    }

    header .public-nav .cake-nav {
        width: auto;
        min-height: 40px;
        padding: 0.55rem 0.66rem;
        border-radius: 10px;
        font-size: 0.75rem;
        white-space: nowrap;
        box-shadow: 0 5px 14px rgba(71, 164, 198, 0.22);
    }

    header .public-nav .admin-nav,
    header .public-nav .admin-nav-button {
        min-width: 0;
        min-height: 40px;
        padding: 0.55rem 0.58rem;
        border-radius: 10px;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    header .public-nav > a[href="/privacy"],
    header .public-nav .privacy-nav {
        display: none;
    }

    /* Adminbereich: ebenfalls nur eine kompakte Zeile */
    header .admin-nav {
        width: auto;
        max-width: min(58vw, 330px);
        margin: 0;
        padding: 0 0 0.18rem;
        gap: 0.3rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    header .admin-nav a {
        min-height: 38px;
        padding: 0.48rem 0.62rem;
        border-radius: 9px;
        font-size: 0.71rem;
    }

    main {
        padding-top: 0.65rem;
    }

    main > a[href="/"],
    main > a[href="/admin/shifts"],
    .back-link {
        min-height: 42px;
        margin: 0.15rem 0 0.8rem;
        padding: 0.58rem 0.72rem;
        color: #ffffff !important;
        background: #383844;
        border-color: #5b5b69;
        font-size: 0.79rem;
    }
}

@media (max-width: 389px) {
    /* Auf sehr schmalen Handys wird der Kuchentext gekuerzt dargestellt. */
    header {
        gap: 0.3rem;
    }

    .brand::before {
        width: 28px;
        height: 28px;
    }

    .brand-main {
        font-size: 0.86rem;
    }

    header .public-nav .cake-nav {
        max-width: 108px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-inline: 0.55rem;
        font-size: 0.7rem;
    }

    header .public-nav .admin-nav,
    header .public-nav .admin-nav-button {
        padding-inline: 0.5rem;
        font-size: 0.68rem;
    }
}

/* =========================================================
   ÖFFENTLICHE HELFERÜBERSICHT
   Tabellen auf Desktop, Karten auf Smartphones
   ========================================================= */

.overview-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.62rem 0.85rem;
    color: #ffffff;
    background: #383844;
    border: 1px solid #555563;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 850;
    text-decoration: none;
}

.overview-nav:hover {
    color: #ffffff;
    background: #454552;
    border-color: #6c6c79;
}

.home-overview-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(145deg, #30303b, #292933);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-left: 5px solid var(--blue, #47a4c6);
    border-radius: 17px;
    box-shadow: var(--shadow-sm);
}

.home-overview-link strong,
.home-overview-link span {
    display: block;
}

.home-overview-link strong {
    color: #ffffff;
    font-size: 0.95rem;
}

.home-overview-link span {
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.home-overview-link .button {
    flex: 0 0 auto;
}

.overview-hero {
    max-width: 850px;
    padding: clamp(2rem, 6vw, 4.2rem) 0 1.5rem;
}

.overview-hero h1 {
    margin: 0;
    font-size: clamp(2.2rem, 8vw, 4.3rem);
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.overview-hero > p:not(.eyebrow) {
    max-width: 700px;
    margin: 1rem 0 0;
    color: #c5c5cd;
    font-size: 1rem;
    line-height: 1.6;
}

.overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.15rem;
}

.overview-category-nav {
    position: sticky;
    top: 73px;
    z-index: 30;
    display: flex;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
    padding: 0.6rem;
    overflow-x: auto;
    background: rgba(29, 29, 33, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    scrollbar-width: none;
}

.overview-category-nav::-webkit-scrollbar {
    display: none;
}

.overview-category-nav a {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.82rem;
    color: #e4e4e9;
    background: #292932;
    border: 1px solid #444450;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.overview-category-nav a:hover {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.overview-sections {
    display: grid;
    gap: 1.25rem;
}

.overview-section {
    scroll-margin-top: 145px;
    overflow: hidden;
    background: linear-gradient(145deg, #30303b, #292933);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-top: 6px solid var(--area, var(--blue));
    border-radius: 22px;
    box-shadow: var(--shadow-md);
}

.overview-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.overview-kicker {
    margin: 0 0 0.18rem;
    color: var(--blue-light);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.overview-section-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.45rem;
    text-transform: uppercase;
}

.overview-shift-count {
    flex: 0 0 auto;
    padding: 0.4rem 0.65rem;
    color: #d8d8df;
    background: #23232a;
    border: 1px solid #444450;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.overview-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.helper-overview-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
    table-layout: fixed;
}

.helper-overview-table th,
.helper-overview-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.helper-overview-table th {
    color: var(--blue-light);
    background: rgba(0, 0, 0, 0.13);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.helper-overview-table th:nth-child(1) { width: 23%; }
.helper-overview-table th:nth-child(2) { width: 20%; }
.helper-overview-table th:nth-child(3) { width: 32%; }
.helper-overview-table th:nth-child(4) { width: 25%; }

.helper-overview-table tbody tr:last-child td {
    border-bottom: 0;
}

.helper-overview-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.overview-time {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
}

.overview-note {
    display: block;
    margin-top: 0.28rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.overview-name-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.overview-name-list li {
    padding: 0.34rem 0.55rem;
    color: #ffffff;
    background: #3b3b47;
    border: 1px solid #4d4d5a;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 750;
}

.overview-empty-name {
    color: #8f8f99;
    font-size: 0.79rem;
    font-style: italic;
}

.helper-overview-table .status {
    white-space: normal;
    line-height: 1.3;
}

@media (max-width: 699px) {
    header .public-nav {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    header .overview-nav {
        min-height: 40px;
        padding: 0.52rem 0.6rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .home-overview-link {
        align-items: stretch;
        flex-direction: column;
        gap: 0.7rem;
        padding: 0.85rem;
        border-radius: 15px;
    }

    .home-overview-link .button {
        width: 100%;
    }

    .overview-hero {
        padding: 1.6rem 0 1.1rem;
    }

    .overview-hero h1 {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

    .overview-hero > p:not(.eyebrow) {
        margin-top: 0.75rem;
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .overview-actions .button {
        width: 100%;
    }

    .overview-category-nav {
        top: 58px;
        margin-bottom: 0.85rem;
        padding: 0.45rem;
        border-radius: 13px;
    }

    .overview-category-nav a {
        min-height: 40px;
        padding: 0.5rem 0.7rem;
        font-size: 0.72rem;
    }

    .overview-sections {
        gap: 0.9rem;
    }

    .overview-section {
        scroll-margin-top: 122px;
        border-radius: 17px;
        border-top-width: 5px;
    }

    .overview-section-head {
        padding: 0.85rem 0.9rem;
    }

    .overview-section-head h2 {
        font-size: 1.12rem;
    }

    .overview-shift-count {
        font-size: 0.65rem;
    }

    .overview-table-wrap {
        overflow: visible;
    }

    .helper-overview-table,
    .helper-overview-table tbody,
    .helper-overview-table tr,
    .helper-overview-table td {
        display: block;
        width: 100%;
    }

    .helper-overview-table {
        table-layout: auto;
    }

    .helper-overview-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .helper-overview-table tr {
        padding: 0.8rem 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    }

    .helper-overview-table tr:last-child {
        border-bottom: 0;
    }

    .helper-overview-table td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.38rem 0;
        border: 0;
        font-size: 0.8rem;
    }

    .helper-overview-table td::before {
        content: attr(data-label);
        color: var(--blue-light);
        font-size: 0.64rem;
        font-weight: 900;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .overview-time {
        font-size: 0.93rem;
    }

    .overview-name-list {
        gap: 0.28rem;
    }

    .overview-name-list li {
        padding: 0.3rem 0.48rem;
        font-size: 0.72rem;
    }

    .helper-overview-table .status {
        justify-self: start;
        margin-left: 0;
        font-size: 0.65rem;
    }
}

@media (max-width: 389px) {
    header .public-nav .overview-nav {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .helper-overview-table td {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 0.55rem;
    }
}

/* =========================================================
   MOBILE HEADER FIX – KEINE ÜBERLAGERUNG
   ========================================================= */
@media (max-width:699px){
 header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem;min-height:54px;padding:.48rem var(--mobile-edge,14px)}
 header .public-nav{display:flex;align-items:center;justify-content:flex-end;gap:.32rem;width:auto;min-width:0}
 header .public-nav .overview-nav,header .public-nav .admin-nav-button{min-height:39px;min-width:0;padding:.5rem .58rem;border-radius:10px;font-size:.69rem;white-space:nowrap}
 header .public-nav>a[href="/privacy"],header .public-nav .privacy-nav{display:none}
}
@media (max-width:389px){
 header{gap:.25rem;padding-inline:9px}
 .brand-main{font-size:.82rem}
 .brand::before{width:27px;height:27px}
 header .public-nav .overview-nav,header .public-nav .admin-nav-button{min-height:37px;padding-inline:.44rem;font-size:.64rem}
}

/* =========================================================
   VOR-/NACHNAME, NAMENSSUCHE UND KALENDERDOWNLOAD
   ========================================================= */

.name-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.person-search-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr);
    gap: 1.2rem;
    align-items: end;
    margin: 0 0 1.2rem;
    padding: 1.15rem;
    background: linear-gradient(145deg, #30303b, #292933);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-left: 6px solid var(--blue, #47a4c6);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.person-search-copy h2 {
    margin: 0.14rem 0 0.35rem;
    font-size: 1.35rem;
}

.person-search-copy > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.person-search-form {
    min-width: 0;
}

.person-search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
}

.person-search-controls input {
    min-width: 0;
}

.calendar-download {
    min-width: 190px;
}

.person-search-result {
    min-height: 1.3em;
    margin: 0.45rem 0 0;
    color: var(--blue-light, #68b8d4);
    font-size: 0.76rem;
    font-weight: 750;
}

.helper-overview-table tr[hidden],
.overview-section[hidden] {
    display: none !important;
}

@media (max-width: 699px) {
    .name-fields,
    .person-search-panel,
    .person-search-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .name-fields {
        gap: 0.95rem;
    }

    .person-search-panel {
        gap: 0.85rem;
        padding: 0.9rem;
        border-left-width: 5px;
        border-radius: 17px;
    }

    .person-search-copy h2 {
        font-size: 1.12rem;
    }

    .person-search-copy > p:last-child {
        font-size: 0.78rem;
    }

    .calendar-download {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   ADMIN – BEREICHE & KALENDERINFOS
   ========================================================= */

.area-admin-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.area-admin-card {
    position: relative;

    border-top:
        6px solid
        var(--area, var(--blue));
}

.area-admin-card .form {
    max-width: none;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;
}

.area-admin-heading {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    margin-bottom: 0.4rem;
}

.area-admin-heading h2 {
    margin: 0;

    font-size: 1.35rem;
}

.area-admin-color {
    width: 14px;
    height: 14px;

    flex: 0 0 auto;

    background:
        var(--area, var(--blue));

    border-radius: 50%;

    box-shadow:
        0 0 0 4px
        rgba(255, 255, 255, 0.05);
}

.area-admin-card textarea {
    min-height: 120px;
}


/* Smartphone */

@media (max-width: 699px) {

    .area-admin-list {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 0.8rem;
    }

    .area-admin-card {
        padding: 0.9rem;

        border-top-width: 5px;
    }

    .area-admin-heading h2 {
        font-size: 1.12rem;
    }

    .area-admin-card textarea {
        min-height: 105px;
    }

    .area-admin-card .button {
        width: 100%;
    }
}
/* =========================================================
   HELFERÜBERSICHT – DIREKT FÜR SCHICHT EINTRAGEN
   ========================================================= */

.helper-overview-table th:nth-child(1) {
    width: 19%;
}

.helper-overview-table th:nth-child(2) {
    width: 17%;
}

.helper-overview-table th:nth-child(3) {
    width: 26%;
}

.helper-overview-table th:nth-child(4) {
    width: 20%;
}

.helper-overview-table th:nth-child(5) {
    width: 18%;
}

.overview-signup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0.62rem 0.8rem;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #dc3933,
            #bc2723
        );

    border: 1px solid transparent;
    border-radius: 11px;

    box-shadow:
        0 6px 16px
        rgba(204, 48, 43, 0.24);

    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.15;

    text-align: center;
    text-decoration: none;

    transition:
        background 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.overview-signup-button:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #e6433c,
            #ca2d28
        );

    box-shadow:
        0 8px 20px
        rgba(204, 48, 43, 0.34);

    transform: translateY(-1px);
}

.overview-signup-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0.55rem 0.68rem;

    color: #a6a6af;
    background: #393941;

    border: 1px solid #484852;
    border-radius: 10px;

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;

    text-align: center;
}


/* Smartphone */

@media (max-width: 699px) {

    .helper-overview-table td[data-label="Aktion"] {
        display: block;

        padding-top: 0.65rem;
    }

    .helper-overview-table td[data-label="Aktion"]::before {
        display: none;
    }

    .overview-signup-button,
    .overview-signup-disabled {
        width: 100%;
        min-height: 48px;

        padding: 0.72rem 0.85rem;

        border-radius: 12px;

        font-size: 0.85rem;
    }

    .overview-signup-button:hover {
        transform: none;
    }
}


/* Touchgeräte */

@media (hover: none) and (pointer: coarse) {

    .overview-signup-button:hover {
        transform: none;
    }

    .overview-signup-button {
        -webkit-tap-highlight-color: transparent;
    }
}
/* =========================================================
   FINALER MARKEN-, STATUS-, FOOTER- UND MOBILE-POLISH
   ========================================================= */

/* CVJM-Logo aus demselben Ordner wie app.css */
.brand::before {
    content: "" !important;
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    background-image: url("cvjm_Logo.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
}

/* Freie Plätze gehören zur positiven Information, nicht zur roten Hauptaktion */
.status.free,
.helper-overview-table .status.free {
    color: #dff7ff !important;
    background: linear-gradient(
        135deg,
        rgba(71, 164, 198, 0.22),
        rgba(71, 164, 198, 0.12)
    ) !important;
    border: 1px solid rgba(104, 184, 212, 0.42) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.status.free::before,
.helper-overview-table .status.free::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--blue-light, #68b8d4) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(104, 184, 212, 0.12);
}

/* Auch "Besetzung steht" bleibt im ruhigen positiven Grün */
.status.optional {
    color: #b7f0cc !important;
    background: rgba(67, 184, 121, 0.15) !important;
    border-color: rgba(85, 200, 131, 0.35) !important;
}

/* =========================================================
   FOOTER – PASSEND ZUM RACEDAYS-FLYER
   Nutzt das vorhandene Markup aus index.php.
   ========================================================= */

.site-footer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: min(calc(100% - 2rem), var(--max-width));
    margin: 0 auto 1.3rem;
    padding: 1.2rem 1.35rem;
    color: #b9b8c1;
    background:
        linear-gradient(145deg, rgba(48, 48, 59, 0.98), rgba(36, 36, 44, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-top: 5px solid var(--primary);
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.27);
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -80px;
    width: 210px;
    height: 210px;
    background: rgba(71, 164, 198, 0.075);
    border-radius: 50%;
    pointer-events: none;
}

.site-footer > span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.site-footer > span::before {
    content: "";
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: #ffffff url("cvjm_Logo.png") center / contain no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.22);
}

.site-footer nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.site-footer nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    color: #d8d7de;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.site-footer nav a:hover {
    color: #ffffff;
    background: rgba(71, 164, 198, 0.13);
    border-color: rgba(104, 184, 212, 0.35);
}

/* =========================================================
   MOBILE FINAL – KOMPAKT, DAUMENFREUNDLICH, OHNE ÜBERLAGERUNG
   ========================================================= */

@media (max-width: 699px) {
    html {
        scroll-padding-top: 66px;
    }

    header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 58px !important;
        padding: 0.48rem 0.7rem !important;
        gap: 0.35rem !important;
    }

    .brand {
        min-width: 0;
        min-height: 40px;
        gap: 0.45rem !important;
        overflow: hidden;
    }

    .brand::before {
        width: 38px !important;
        height: 38px !important;
        border-width: 1px;
        border-radius: 9px !important;
    }

    .brand-main {
        overflow: hidden;
        font-size: 0.86rem !important;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-sub {
        display: none !important;
    }

    header .public-nav {
        display: flex !important;
        width: auto !important;
        min-width: 0;
        gap: 0.28rem !important;
        overflow: visible;
    }

    header .public-nav .overview-nav,
    header .public-nav .admin-nav-button {
        min-height: 40px !important;
        padding: 0.48rem 0.52rem !important;
        border-radius: 9px !important;
        font-size: 0.65rem !important;
        white-space: nowrap;
    }

    header .public-nav .privacy-nav,
    header .public-nav > a[href="/privacy"] {
        display: none !important;
    }

    main {
        width: calc(100% - 1.25rem) !important;
        padding-top: 0.65rem !important;
        padding-bottom: 2.5rem !important;
    }

    .hero,
    .overview-hero {
        padding-top: 1.45rem !important;
        padding-bottom: 1.15rem !important;
    }

    .hero h1,
    .overview-hero h1 {
        font-size: clamp(2rem, 11vw, 2.8rem) !important;
        line-height: 0.96 !important;
    }

    .shift-filters,
    .person-search-panel,
    .home-overview-link,
    .cake-callout {
        border-radius: 16px !important;
    }

    .card,
    .shift-card,
    .overview-section,
    .form,
    .summary,
    .signup-summary {
        border-radius: 17px !important;
    }

    .status.free,
    .helper-overview-table .status.free {
        font-size: 0.64rem !important;
        line-height: 1.25;
        white-space: normal;
    }

    .helper-overview-table td[data-label="Aktion"] {
        padding-top: 0.6rem !important;
    }

    .overview-signup-button,
    .overview-signup-disabled {
        min-height: 48px !important;
        width: 100%;
    }

    .site-footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
        width: calc(100% - 1.25rem);
        margin-bottom: 0.65rem;
        padding: 1rem;
        border-top-width: 4px;
        border-radius: 17px;
    }

    .site-footer > span {
        gap: 0.65rem;
        font-size: 0.78rem;
    }

    .site-footer > span::before {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .site-footer nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.45rem;
    }

    .site-footer nav a {
        width: 100%;
        min-height: 44px;
        padding: 0.55rem 0.6rem;
        font-size: 0.73rem;
    }
}

@media (max-width: 374px) {
    header {
        padding-inline: 0.5rem !important;
    }

    .brand::before {
        width: 34px !important;
        height: 34px !important;
    }

    .brand-main {
        font-size: 0.78rem !important;
    }

    header .public-nav .overview-nav,
    header .public-nav .admin-nav-button {
        min-height: 37px !important;
        padding-inline: 0.42rem !important;
        font-size: 0.61rem !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .site-footer nav a:hover,
    .overview-signup-button:hover,
    .button:hover:not(:disabled) {
        transform: none !important;
    }
}