:root{
    --bg:#0b0f19;
    --card:#121a2a;
    --card2:#0f1626;
    --text:#e9edf5;
    --muted:#b7c0d1;
    --accent:#7aa2ff;
    --accent2:#6ee7b7;
    --accent3:#c084fc;
    --border:rgba(255,255,255,.10);
    --shadow: 0 18px 50px rgba(0,0,0,.45);
    --radius: 18px;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    min-height:100vh;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(900px 500px at 20% 10%, rgba(122,162,255,.22), transparent 60%),
        radial-gradient(800px 500px at 80% 20%, rgba(110,231,183,.16), transparent 55%),
        radial-gradient(900px 700px at 60% 90%, rgba(192,132,252,.12), transparent 60%),
        var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.wrap{ width:min(1100px, 100%); }

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

h1{
    margin:0 0 12px;
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -0.02em;
}

header p{
    margin:0;
    color:var(--muted);
    font-size: 16px;
    line-height: 1.5;
}

.grid-top{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:20px;
    margin-top:30px;
}

@media (max-width: 900px){
    .grid-top{
        grid-template-columns: 1fr;
    }
}

.card{
    display:block;
    background: linear-gradient(180deg, var(--card), var(--card2));
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:28px;
    box-shadow: var(--shadow);
    text-decoration:none;
    color:inherit;
    transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}



.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding:8px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.08);
    margin-bottom:16px;
}


/* ---------- BADGES / PILLS ---------- */

.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    line-height:1;
    white-space:nowrap;
}

.pill::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background: var(--muted);
    opacity:.95;
}

/* Targets */
.pill-target-all::before{ background: var(--accent); }
.pill-target-handmade::before{ background: var(--accent2); }
.pill-target-b2b::before{ background: var(--accent3); }

/* Status */
.pill-status-draft{ opacity: .9; }
.pill-status-draft::before{ background: rgba(183,192,209,.9); }

.pill-status-scheduled::before{ background: rgba(250,204,21,.95); } /* gelb */

.pill-status-published::before{ background: var(--accent2); } /* grün */

.pill-status-archived{ opacity: .8; }
.pill-status-archived::before{ background: rgba(148,163,184,.95); } /* grau */


.dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background: var(--accent);
}

.dot.green{ background: var(--accent2); }
.dot.purple{ background: var(--accent3); }

.title{
    font-size:22px;
    margin:0 0 12px;
}

.desc{
    margin:0 0 20px;
    color:var(--muted);
    line-height:1.5;
}

.cta{
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.community-section{
    margin-top:30px;
}

.community-card{
    width:100%;
    background: linear-gradient(
        180deg,
        rgba(192,132,252,.18),
        var(--card2)
    );
}

footer{
    margin-top:40px;
    text-align:center;
    font-size:13px;
    color: rgba(183,192,209,.75);
}
.site-header__inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.site-nav{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:6px;
}

.nav-link{
    color: var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background: rgba(255,255,255,.06);
    transition: filter .2s ease, transform .2s ease, border-color .2s ease;
}

.nav-link:hover{
    filter: brightness(1.1);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.25);
}

.nav-button{
    cursor:pointer;
    font: inherit;
}




/* ---------- AUTH PAGES (Login/Register/Forgot) ---------- */

.auth-body{
    /* nutzt dein body styling, aber ohne wrap/header/footer */
}

.auth-wrap{
    width: min(520px, 100%);
}

.auth-card{
    background: linear-gradient(180deg, var(--card), var(--card2));
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:28px;
    box-shadow: var(--shadow);
}

.auth-title{
    margin:0 0 8px;
    font-size:22px;
}

.auth-subtitle{
    margin:0 0 20px;
    color: var(--muted);
    line-height:1.5;
    font-size:14px;
}

.form-row{
    margin-bottom:14px;
}

.form-label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    color: rgba(233,237,245,.9);
    font-weight:600;
}

.form-input{
    width:100%;
    padding:12px 14px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    outline:none;
}

.form-input:focus{
    border-color: rgba(122,162,255,.55);
    box-shadow: 0 0 0 3px rgba(122,162,255,.15);
}

.form-help{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}

.form-link{
    color: var(--text);
    text-decoration:none;
    border-bottom:1px dashed rgba(255,255,255,.25);
}

.form-link:hover{
    border-bottom-color: rgba(255,255,255,.6);
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 14px;
    border-radius:999px;
    border:1px solid rgba(122,162,255,.45);
    background: rgba(122,162,255,.18);
    color: var(--text);
    font-weight:700;
    cursor:pointer;
    width:100%;
}

.btn-primary:hover{
    filter: brightness(1.08);
    border-color: rgba(122,162,255,.75);
}

.alert{
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    border-radius: 12px;
    padding:12px 14px;
    color: var(--muted);
    margin-bottom:14px;
    font-size:14px;
}

.error{
    margin-top:8px;
    color: rgba(255,140,140,.95);
    font-size:13px;
}


/* ---------- Disabled Cards ---------- */

.card-disabled{
    pointer-events: none;
    opacity: .6;
    filter: grayscale(.2);
    cursor: not-allowed;
}

.card-disabled:hover{
    transform: none;
    filter: grayscale(.2);
    border-color: var(--border);
}

/* Coming Soon Label */
.coming-soon{
    margin-left:8px;
    font-size:11px;
    padding:4px 8px;
    border-radius:999px;
    background: rgba(255,255,255,.12);
    font-weight:700;
    letter-spacing:.02em;
}




















/* ---------- Help Button + Modal (angepasst an nav-link Style) ---------- */

.help-btn{
    /* optisch wie .nav-link */
    display:inline-flex;
    align-items:center;
    gap:8px;

    color: var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:14px;

    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background: rgba(255,255,255,.06);

    cursor:pointer;
    transition: filter .2s ease, transform .2s ease, border-color .2s ease;
}

.help-btn:hover{
    filter: brightness(1.1);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.25);
}

.help-btn:focus{
    outline: none;
    border-color: rgba(122,162,255,.55);
    box-shadow: 0 0 0 3px rgba(122,162,255,.15);
}

.help-btn__icon{
    width:20px;
    height:20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}

.help-btn__text{
    font-weight:600;
}

@media (max-width: 520px){
    .help-btn__text{ display:none; }
}

/* ---------- Modal Grundzustand: geschlossen ---------- */
.modal,
.modal-backdrop{
    display:none;
}

/* ---------- Backdrop ---------- */
.modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 60;
}

/* ---------- Modal Container ---------- */
.modal{
    position: fixed;
    inset: 0;
    z-index: 70;
    align-items:center;
    justify-content:center;
    padding: 18px;
}

/* ---------- Öffnen per Klasse ---------- */
.modal.is-open{ display:flex; }
.modal-backdrop.is-open{ display:block; }

/* ---------- Modal Card ---------- */
.modal-card{
    width: min(860px, 100%);
    background: linear-gradient(180deg, var(--card), var(--card2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;

    /* kleine "pop" Animation */
    transform: translateY(6px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

.modal.is-open .modal-card{
    transform: translateY(0);
    opacity: 1;
}

.modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--border);
}

.modal-title{
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}

.modal-subtitle{
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
}

.modal-close{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease, border-color .2s ease;
}

.modal-close:hover{
    filter: brightness(1.1);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.25);
}

.modal-close:focus{
    outline: none;
    border-color: rgba(122,162,255,.55);
    box-shadow: 0 0 0 3px rgba(122,162,255,.15);
}

.modal-body{
    padding: 16px 18px;
    max-height: min(70vh, 620px);
    overflow:auto;
}

/* ---------- Help Grid ---------- */
.help-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

@media (max-width: 780px){
    .help-grid{ grid-template-columns: 1fr; }
}

.help-item{
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}

.help-label{
    font-weight: 800;
    margin-bottom: 6px;
}

.help-text{
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.help-text ul{
    margin: 8px 0 0;
    padding-left: 18px;
}

.help-text code{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    padding: 2px 6px;
    border-radius: 8px;
    color: var(--text);
}

.modal-foot{
    padding: 12px 18px 18px;
    border-top: 1px solid var(--border);
    display:flex;
    justify-content:flex-end;
}




/* =========================
   Responsive Patch (add at end)
   ========================= */

/* 1) Allgemeine Skalierung: auf kleinen Screens weniger Padding */
@media (max-width: 900px){
    body{
        padding:18px;
        align-items:flex-start; /* wirkt auf Mobile oft angenehmer */
    }

    header{
        margin-bottom:22px;
    }

    header p{
        font-size:15px;
    }

    .card,
    .auth-card{
        padding:22px;
    }
}

/* 2) Tablet -> Mobile: Header/Nav sauber umbrechen */
@media (max-width: 720px){
    .site-header__inner{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .site-nav{
        margin-top:0;
        flex-wrap:wrap;
        gap:10px;
    }

    .nav-link,
    .help-btn{
        padding:10px 12px;
    }

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

/* 3) Kleine Phones: noch kompakter, Pills/Badges sollen umbrechen dürfen */
@media (max-width: 520px){
    body{
        padding:14px;
    }

    .card,
    .auth-card{
        padding:18px;
        border-radius:16px;
    }

    .badge{
        margin-bottom:12px;
    }

    /* Pills nicht mehr erzwingen "one-line" */
    .pill{
        white-space:normal;
    }

    .title{
        font-size:18px;
        margin-bottom:10px;
    }

    .desc{
        margin-bottom:16px;
        font-size:14px;
    }

    .cta{
        width:100%;
        justify-content:space-between;
    }

    /* Modal: mehr Platz ausnutzen */
    .modal{
        padding:12px;
    }

    .modal-card{
        width:100%;
        border-radius:16px;
    }

    .modal-body{
        max-height: 72vh;
        padding:14px;
    }

    .modal-head{
        padding:14px 14px 10px;
    }

    .modal-foot{
        padding:10px 14px 14px;
    }

    /* Formular: etwas kleiner */
    .form-input{
        padding:11px 12px;
        border-radius:12px;
    }
}

/* 4) Sehr kleine Screens: Buttons/Links werden “full width” */
@media (max-width: 380px){
    .nav-link,
    .help-btn{
        width:100%;
        justify-content:center;
    }

    .site-nav{
        flex-direction:column;
        align-items:stretch;
    }

    .badge,
    .pill{
        width:100%;
        justify-content:flex-start;
    }
}
/* =========================================================
   Admin Lists (Posts/Users/Subscribers) – unified responsive
   Usage:
   .admin-posts, .admin-users, .admin-subscribers  (wrapper)
   Each page uses:
   __head, __row, __filters (optional), __kpis (optional),
   __field, __label, __value, __actions
   ========================================================= */

/* wrappers */
.admin-posts,
.admin-users,
.admin-subscribers{
    margin-top:20px;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

/* filters (optional) */
.admin-posts__filters,
.admin-subscribers__filters{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:end;
}

/* KPIs (only posts uses) */
.admin-posts__kpis{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1.6fr;
    gap:12px;
    align-items:stretch;
}

/* heads */
.admin-posts__head,
.admin-users__head,
.admin-subscribers__head{
    display:grid;
    gap:12px;
    padding:10px 2px;
    color: var(--muted);
    font-size:13px;
}

/* rows */
.admin-posts__row,
.admin-users__row,
.admin-subscribers__row{
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    border-radius: 14px;
    padding:14px;
    display:grid;
    gap:12px;
    align-items:center;
}

/* Desktop column templates */
.admin-posts__head,
.admin-posts__row{ grid-template-columns: 1.3fr .6fr .7fr .7fr .7fr; }

.admin-users__head,
.admin-users__row{ grid-template-columns: 1.2fr 1.6fr .9fr; }

.admin-subscribers__head,
.admin-subscribers__row{ grid-template-columns: 1.2fr .5fr .6fr .7fr; }

/* actions (desktop) */
.admin-posts__actions,
.admin-users__actions,
.admin-subscribers__actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

/* ===== Breakpoints ===== */

/* KPI grid -> 2 cols */
@media (max-width: 900px){
    .admin-posts__kpis{
        grid-template-columns: 1fr 1fr;
    }
}

/* Convert tables into cards */
@media (max-width: 780px){
    .admin-posts,
    .admin-users,
    .admin-subscribers{
        padding: 0 10px;
    }

    /* hide heads */
    .admin-posts__head,
    .admin-users__head,
    .admin-subscribers__head{
        display:none;
    }

    /* rows become single-column cards */
    .admin-posts__row,
    .admin-users__row,
    .admin-subscribers__row{
        grid-template-columns: 1fr;
        gap:12px;
    }

    /* field rows with label/value */
    .admin-posts__field,
    .admin-users__field,
    .admin-subscribers__field{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        padding-top:10px;
        border-top:1px solid var(--border);
    }

    .admin-posts__label,
    .admin-users__label,
    .admin-subscribers__label{
        font-size:12px;
        color: var(--muted);
        min-width: 92px;
        flex: 0 0 auto;
        padding-top:2px;
    }

    .admin-posts__value,
    .admin-users__value,
    .admin-subscribers__value{
        flex: 1 1 auto;
        display:flex;
        justify-content:flex-end;
        flex-wrap:wrap;
        gap:8px;
        text-align:right;
    }

    /* pills wrap on mobile */
    .pill{ white-space:normal; }

    /* views layout (posts) */
    .admin-posts__views{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        justify-content:flex-end;
        color: var(--muted);
        font-size:13px;
    }
    .admin-posts__views b{
        color: var(--text);
        font-weight:800;
    }

    /* actions as 2-col grid */
    .admin-posts__actions,
    .admin-users__actions,
    .admin-subscribers__actions{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:10px;
        justify-content:stretch;
    }

    .admin-posts__actions .nav-link,
    .admin-posts__actions .nav-button,
    .admin-posts__actions form,
    .admin-users__actions .nav-link,
    .admin-users__actions .nav-button,
    .admin-users__actions form,
    .admin-subscribers__actions .nav-link,
    .admin-subscribers__actions .nav-button,
    .admin-subscribers__actions form{
        width:100%;
    }

    .admin-posts__actions .nav-link,
    .admin-posts__actions .nav-button,
    .admin-users__actions .nav-link,
    .admin-users__actions .nav-button,
    .admin-subscribers__actions .nav-link,
    .admin-subscribers__actions .nav-button{
        justify-content:center;
        text-align:center;
    }

    /* delete looks like danger */
    .admin-posts__actions .nav-button,
    .admin-users__actions .nav-button,
    .admin-subscribers__actions .nav-button{
        border-color: rgba(255,140,140,.35);
        background: rgba(255,140,140,.10);
    }

    /* filters stack full width */
    .admin-posts__filters,
    .admin-subscribers__filters{
        gap:10px;
    }
    .admin-posts__filters > *,
    .admin-subscribers__filters > *{
        width:100%;
    }
    .admin-posts__filters .btn-primary,
    .admin-subscribers__filters .btn-primary{
        width:100% !important;
    }
    .admin-posts__filters .nav-link,
    .admin-subscribers__filters .nav-link{
        width:100%;
        text-align:center;
        justify-content:center;
    }
}

/* KPI -> 1 col */
@media (max-width: 520px){
    .admin-posts__kpis{
        grid-template-columns: 1fr;
    }
}

/* actions -> single column on very small screens */
@media (max-width: 420px){
    .admin-posts__actions,
    .admin-users__actions,
    .admin-subscribers__actions{
        grid-template-columns: 1fr;
    }

    .admin-posts__label,
    .admin-users__label,
    .admin-subscribers__label{
        min-width: 78px;
    }
}
/* =========================
   Post Form responsive grids
   ========================= */

.post-form__head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:14px;
}

.post-form__grid-3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px;
}

.post-form__grid-2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px;
}

/* Tablet: 3 -> 2 columns */
@media (max-width: 900px){
    .post-form__grid-3{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* Mobile: alles untereinander + Hilfe Button full width */
@media (max-width: 600px){
    .post-form__head{
        flex-direction:column;
        align-items:stretch;
    }

    #postHelpOpen{
        width:100%;
        justify-content:center;
    }

    .post-form__grid-3,
    .post-form__grid-2{
        grid-template-columns: 1fr;
    }
}
/* =========================
   Dashboard responsive
   ========================= */

.dashboard{
    margin-top:20px;
}

/* Header card container */
.dashboard__header,
.dashboard__grid,
.dashboard__status{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

.dashboard__grid{
    margin-top:20px;
}

/* Header layout */
.dashboard__header-inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.dashboard__header-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* Pills in newsletter card */
.dashboard__pills{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

/* System status grid */
.dashboard__status{
    margin-top:20px;
}

.dashboard__status-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
    margin-top:10px;
}

.dashboard__status-item{
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    border-radius: 14px;
    padding:14px;
}

.dashboard__status-label{
    color: var(--muted);
    font-size:12px;
    margin-bottom:6px;
}

.dashboard__status-value{
    font-weight:700;
}

/* Breakpoints */
@media (max-width: 900px){
    .dashboard__status-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 520px){
    .dashboard__header-actions{
        width:100%;
    }

    .dashboard__header-actions .nav-link{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .dashboard__status-grid{
        grid-template-columns: 1fr;
    }
}
/* =========================
   Admin Posts – Desktop fix
   (Labels nur auf Mobile zeigen)
   ========================= */

@media (min-width: 781px){
    /* Field-Wrapper auf Desktop neutralisieren */
    .admin-posts__field{
        display:block;
        padding-top:0;
        border-top:0;
    }

    /* Labels nur für Mobile, auf Desktop ausblenden */
    .admin-posts__label{
        display:none;
    }

    /* Value wieder wie normale Zelle */
    .admin-posts__value{
        display:block;
        text-align:left;
    }

    /* Views links statt “rechts kleben” */
    .admin-posts__views{
        justify-content:flex-start;
    }
}
/* kleines Datum unter Status (statt Pill) */
.admin-posts__subtext{
    margin-top:6px;
    color: var(--muted);
    font-size:12px;
    line-height:1.3;
}

/* Desktop: in der Tabelle rechts/kompakt wirken lassen */
@media (min-width: 781px){
    .admin-posts__subtext{
        margin-top:6px;
        text-align:left; /* oder right, falls du’s lieber rechts hast */
    }
}

/* Mobile: passt sich dem Card-Layout an */
@media (max-width: 780px){
    .admin-posts__subtext{
        text-align:right;
    }
}
/* =========================
   Admin Subscribers – Desktop fix + Subtext
   ========================= */

.admin-subscribers__subtext{
    margin-top:6px;
    color: var(--muted);
    font-size:12px;
    line-height:1.3;
}

/* Desktop: field/label/value neutral (wie normale Tabellenzellen) */
@media (min-width: 781px){
    .admin-subscribers__field{
        display:block;
        padding-top:0;
        border-top:0;
    }

    .admin-subscribers__label{
        display:none;
    }

    .admin-subscribers__value{
        display:block;
        text-align:left;
    }

    .admin-subscribers__subtext{
        text-align:left;
    }
}

/* Mobile: label/value Layout bleibt (Card-Ansicht) */
@media (max-width: 780px){
    .admin-subscribers__subtext{
        text-align:right;
    }
}








/* =========================
   Header / Footer responsive
   ========================= */

/* Header wrapper (optional, falls du außen nicht schon begrenzt) */
.site-header{
    width:100%;
}

.site-header__inner{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

/* Nav form (Logout) ohne inline */
.nav-form{ display:inline; }

/* Footer base */
.site-footer{
    max-width:1100px;
    margin:40px auto 0;
    padding: 0 0; /* falls du global padding nutzt, kannst du hier 0 lassen */
}

.site-footer__card{
    padding:18px;
}

.site-footer__top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.site-footer__copy{
    color: rgba(183,192,209,.85);
    font-size:13px;
}

.site-footer__links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.site-footer__dev{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.site-footer__dev-left{
    color: var(--muted);
    font-size:12px;
}

.site-footer__dev-link{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
}

.site-footer__dev-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.site-footer__dev-meta{
    color: rgba(183,192,209,.6);
    font-size:11px;
}

.site-footer__version{
    font-size:11px;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--border);
    color: rgba(183,192,209,.7);
    background: rgba(255,255,255,.04);
}

/* ===== Mobile improvements ===== */
@media (max-width: 720px){
    .site-header__inner{
        flex-direction:column;
        align-items:stretch;
    }

    .site-nav{
        margin-top:0;
        flex-wrap:wrap;
        gap:10px;
    }
}

@media (max-width: 520px){
    /* Header: nav buttons full width (du hast dafür schon Regeln, das hier macht’s stabil) */
    .site-nav{
        flex-direction:column;
        align-items:stretch;
    }

    .nav-link,
    .help-btn{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .nav-form{
        display:block; /* Logout-Form nimmt volle Breite */
    }

    /* Footer: Links untereinander */
    .site-footer{
        padding: 0 10px;
    }

    .site-footer__links{
        width:100%;
    }

    .site-footer__links .nav-link{
        width:auto; /* im Footer lieber nebeneinander lassen */
    }
}

@media (max-width: 380px){
    /* Footer links full width bei sehr klein */
    .site-footer__links .nav-link{
        width:100%;
        justify-content:center;
    }
}

/* =========================
   Admin Users – Desktop fix
   (Labels nur auf Mobile zeigen)
   ========================= */

@media (min-width: 781px){
    .admin-users__field{
        display:block;
        padding-top:0;
        border-top:0;
    }

    .admin-users__label{
        display:none;
    }

    .admin-users__value{
        display:block;
        text-align:left;
    }
}
@media (min-width: 781px){
    .admin-users__actions{
        justify-content:flex-end;
        flex-wrap:nowrap;       /* verhindert 2 Zeilen */
        gap:10px;
    }
}
/* =========================
   Announcement News Bar
   ========================= */
/* =========================
   Announcement Bar (native UI)
   ========================= */

.announcement-bar{
    width:100%;
    margin: 10px 0 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(
        180deg,
        rgba(122,162,255,.14),
        rgba(15,22,38,.88)
    );
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    overflow:hidden;
}

.announcement-bar__inner{
    padding: 10px 14px;
}

.announcement-item{
    display:none;                 /* ✅ JS toggelt */
    align-items:center;
    gap:12px;
    line-height:1.35;
}

.announcement-item.is-active{
    display:flex;
}

/* Label wie Badge/Pill – aber “news-like” */
.announcement-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;

    border:1px solid rgba(122,162,255,.35);
    background: rgba(122,162,255,.16);
    color: var(--text);
    white-space:nowrap;
}

.announcement-label::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:999px;
    background: var(--accent2);
    box-shadow: 0 0 0 3px rgba(110,231,183,.12);
}

.announcement-text{
    flex:1;
    color: var(--text);
    font-size:14px;
}

.announcement-text b{
    font-weight:900;
}

.announcement-sep{
    color: rgba(183,192,209,.7);
    margin: 0 8px;
}

/* Link “wie nav-link, aber kleiner” */
.announcement-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    text-decoration:none;
    font-weight:700;
    font-size:13px;
    white-space:nowrap;
    transition: filter .2s ease, transform .2s ease, border-color .2s ease;
}

.announcement-link:hover{
    filter: brightness(1.08);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.25);
}

/* Mobile: alles sauber umbrechen */
@media (max-width: 720px){
    .announcement-item{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .announcement-link{
        width:100%;
        justify-content:center;
    }
}
/* =========================
   Admin Media – Preview + Grid
   ========================= */

.admin-media__head,
.admin-media__row{
    grid-template-columns: 1.6fr .9fr 1fr 1fr;
}

/* Thumbnail */
.media-thumb{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.media-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.media-thumb--file{
    font-weight:900;
    font-size:11px;
    color: var(--muted);
    letter-spacing:.06em;
}

/* Mobile override (wie bei dir “hard”) */
@media (max-width: 780px){
    .admin-media__head{ display:none !important; }
    .admin-media__row{ grid-template-columns: 1fr !important; }

    .admin-media__row .admin-posts__actions{
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap:10px !important;
    }

    @media (max-width: 420px){
        .admin-media__row .admin-posts__actions{
            grid-template-columns: 1fr !important;
        }
    }
}

/* ===== Dashboard: Badge Tag (BETA) ===== */
.badge-tag{
    margin-left:10px;
    font-size:10px;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    color: var(--text);
}

/* ===== Dashboard: Stats Row ===== */
.dashboard__stats-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
    margin-top:12px;
}

.dashboard__stats-item{
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    border-radius: 14px;
    padding:14px;
}

.dashboard__stats-label{
    color: var(--muted);
    font-size:12px;
    margin-bottom:6px;
}

.dashboard__stats-value{
    font-weight:900;
    font-size:24px;
    line-height:1;
}

.dashboard__stats-sub{
    margin-top:8px;
    color: rgba(183,192,209,.75);
    font-size:12px;
}

.dashboard__mini{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--border);
}

.dashboard__mini-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

@media (max-width: 900px){
    .dashboard__stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px){
    .dashboard__stats-grid{ grid-template-columns: 1fr; }
}