@media (max-width: 980px) {
    .hamburger {
        display: inline-block;
    }

    .hauptnavigation {
        position: fixed;
        top: 86px;
        right: 20px;
        flex-direction: column;
        align-items: stretch;
        width: min(320px, calc(100vw - 40px));
        transform: scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: 0.22s ease;
        background: rgba(7, 10, 26, 0.85);
        z-index: 9999;
    }

    .hauptnavigation.is-open {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
        z-index: 9999;
    }

    .nav-link,
    .sprachwahl,
    .sprachwahl select {
        width: 100%;
        text-align: center;
    }

    .sternzeichen-bereich {
        min-height: 170px;
        margin-top: 18px;
    }

    .haupttitel {
        font-size: clamp(42px, 10vw, 72px);
    }
}

@media (max-width: 680px) {
    .kopfbereich {
        align-items: center;
        padding: 14px 16px 12px;
    }

    .marke__name {
        font-size: clamp(22px, 5.5vw, 30px);
    }

    .marke__claim {
        font-size: 11px;
        max-width: 180px;
        margin-top: 3px;
        opacity: 0.85;
    }

    /* v4v99msg: Claim auf Willkommen-Seite ZEIGEN (war: display:none) */
    body[data-seite="willkommen"] .marke__claim {
        display: block;
        font-size: 10px;
        opacity: 0.75;
        max-width: 160px;
        line-height: 1.3;
    }

    .buehne {
        padding-top: 10px;
    }

    .sternbild-canvas {
        width: min(96vw, 560px);
    }

    .zentrum {
        padding-top: 12px;
    }

    .einleitung {
        max-width: 92vw;
    }

    .admin-panel {
        width: 100vw;
        padding: 18px 14px 24px;
    }

    .farb-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .buehne--formular,
    .buehne--info,
    .buehne--willkommen {
        padding-bottom: 110px;
    }

    .formular-karte,
    .info-karte {
        width: calc(100% - 24px);
        padding: 22px 18px;
        border-radius: 22px;
    }

    .footer-links {
        bottom: 12px;
        font-size: 13px;
    }

    .haupttitel {
        font-size: clamp(42px, 11vw, 74px);
    }

    /* 3v80m FIX: Zusammengeführt aus doppeltem @media-Block */
    .buehne--formular,
    .buehne--info {
        align-items: flex-start;
        padding-top: 18px;
    }

    .formular-titel {
        font-size: clamp(34px, 9vw, 54px);
    }

    .register-formular input[type="email"],
    .register-formular input[type="text"],
    .register-formular input[type="password"] {
        font-size: 16px;
        padding: 14px 16px;
    }
}

@media (max-width: 680px) {
    .buehne--formular,
    .buehne--info,
    .buehne--willkommen {
        min-height: auto;
        padding-bottom: 92px;
    }

    .formular-karte,
    .info-karte {
        width: calc(100% - 16px);
        padding: 20px 16px;
    }

    .passwort-zeile {
        gap: 8px;
    }

    .passwort-toggle {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }

    .checkbox-zeile {
        align-items: flex-start;
    }

    .haupttitel {
        font-size: clamp(44px, 12vw, 64px);
        line-height: 1.02;
    }

    .einleitung {
        font-size: 15px;
        line-height: 1.5;
    }

    .aktionsbereich {
        margin-top: 28px;
    }

    .sternzeichen-info {
        margin-top: 24px;
    }
}


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

    .placeholder-aktionen {
        flex-direction: column;
    }
}

@media (max-width: 980px){
  .admin-daten-grid{grid-template-columns:1fr}
  .admin-benutzer-kopf{align-items:flex-start}
}


/* am_3v8m */
@media (max-width: 980px) {
  .formular-karte, .formular-karte--kompakt { width: min(94vw, 520px); padding: 4px 6px 18px; }
  body[data-seite="login"] .formular-titel--login { font-size: clamp(46px, 12vw, 66px); }
  body[data-seite="registrieren"] .formular-titel--register { font-size: clamp(42px, 11vw, 60px); }
  .buehne--formular { min-height: calc(100dvh - 96px); padding-top: 18px; }
  .admin-oberflaeche { width: calc(100vw - 18px); }
  .admin-tabelle-wrap { overflow-x:auto; }
  .kopfbereich { padding: 14px 12px 0; }
}

@media (max-width: 980px) {
  .admin-oberflaeche--transparent { padding: 14px; border-radius: 18px; }
  .admin-werkzeugleiste { flex-direction: column; align-items: stretch; }
  .admin-actions { width: 100%; }
  .admin-btn-small { flex: 1 1 140px; }
}


/* am_3v38m – Mobile Willkommen + Footer Fix */
/* 4v92: overflow:clip statt hidden → fixed-positionierte Elemente (Hamburger-Nav)
   werden nicht mehr weggeklipt. Samsung Internet, Chrome Mobile, Firefox Mobile fix. */
@media (max-width: 680px) {
  html, body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-seite="willkommen"] {
    min-height: 100dvh;
    /* overflow:clip verhindert Scroll ohne fixed-Elemente zu klippen */
    overflow: clip;
  }

  .buehne.buehne--willkommen {
    min-height: calc(100dvh - 80px);
    padding-top: 20px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .sternzeichen-bereich {
    min-height: 188px;
    margin-top: 4px;
    margin-bottom: 14px;
    align-items: center;
  }

  .sternbild-canvas {
    width: min(96vw, 620px);
    max-height: 250px;
    margin: 0 auto;
    display: block;
  }

  .zentrum {
    max-width: 94vw;
    padding-top: 4px;
  }

  .haupttitel,
  .haupttitel.schwebend,
  body[data-seite="willkommen"] .haupttitel {
    font-size: clamp(28px, 9vw, 52px);
    line-height: 1.1;
    margin: 0 0 14px;
    padding: 0 6px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    /* v4v99msg: Lila→Weiß statt blau */
    background: linear-gradient(135deg, #c084fc 0%, #e0aaff 35%, #ffffff 70%, #d8b4fe 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 9s ease-in-out infinite, schwebenTitel 8s ease-in-out infinite;
  }

  .untertitel-rotation,
  .einleitung {
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    line-height: 1.55;
    padding: 0 8px;
  }

  .aktionsbereich {
    margin-top: 24px;
    margin-bottom: 18px;
  }

  .footer-links {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.2;
    padding: 12px 10px 14px;
    background: linear-gradient(to top, rgba(4, 3, 14, 0.96) 68%, rgba(4, 3, 14, 0.75) 84%, transparent 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .footer-links a {
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }

  .footer-links span {
    opacity: 0.72;
  }
}


@media (max-width: 980px) {
    .benutzer-untermenue-wrap {
        padding: 0 12px;
        margin-top: 10px;
        justify-content: stretch;
    }

    .benutzer-untermenue {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* v4v99msg: Mobile Untermenü – Kachel-Grid wie Bild 3 */
@media (max-width: 680px) {
    .benutzer-untermenue-wrap {
        padding: 0 12px;
        margin-top: 8px;
        margin-bottom: 4px;
    }

    .benutzer-untermenue {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        padding: 14px;
        background: rgba(10, 12, 35, 0.72);
        border: 1px solid rgba(142, 156, 255, 0.14);
        border-radius: 22px;
        backdrop-filter: blur(12px);
    }

    .benutzer-untermenue .nav-link {
        width: 100%;
        text-align: center;
        padding: 14px 10px;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(200, 215, 255, 0.85);
        transition: all 0.18s ease;
    }

    .benutzer-untermenue .nav-link.is-active {
        background: rgba(140, 100, 255, 0.18);
        border-color: rgba(160, 120, 255, 0.45);
        color: #e0c4ff;
        font-weight: 700;
    }

    .benutzer-untermenue .nav-link:hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(160, 130, 255, 0.30);
    }

    /* Nachrichten-Link: volle Breite über beide Spalten */
    .benutzer-untermenue .nav-link[href*="nachrichten"] {
        grid-column: 1 / -1;
    }
}

/* ── v3v57m Admin Mobile ── */
@media (max-width: 980px) {
    .admin-pin-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .admin-pin-bar input[type="password"] {
        width: 90px;
    }
}

@media (max-width: 680px) {
    .admin-tabelle-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-tabelle th,
    .admin-tabelle td {
        font-size: 11px;
        padding: 6px 8px;
    }
    .admin-action-stack {
        gap: 5px;
    }
    .admin-action-btn {
        font-size: .78rem;
        padding: 6px 8px;
        min-height: 32px;
    }
    .admin-bilder-button {
        display: block;
        margin: 6px 0 0 0 !important;
        text-align: center;
    }
    .overflow-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ══════════════════════════════════════════════════════════════════
   3v84m – Samsung S24 Mobile Optimierungen (360-412px viewport)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 430px) {

    /* Astro-Seite: Kacheln 2-spaltig auf kleinen Screens */
    .astro-nav-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .astro-nav-kachel {
        padding: 12px 8px !important;
    }
    .astro-nav-kachel span { font-size: 22px !important; }
    .astro-nav-kachel strong { font-size: 12px !important; }
    .astro-nav-kachel small { font-size: 10px !important; }

    /* Astro-Kacheln (Sonne, Mond, Aszendent, China) */
    .astro-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .astro-kachel { padding: 14px 10px !important; }
    .astro-kachel-symbol { font-size: 28px !important; }
    .astro-kachel-wert { font-size: 16px !important; }

    /* Sub-Tab Navigation scrollbar auf Mobile */
    .sub-tab-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }
    .sub-tab-nav::-webkit-scrollbar { display: none !important; }
    .sub-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* Galerie-Raster: 2 Spalten auf S24 */
    .galerie-raster {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Profil-Layout: 1 Spalte */
    .profil-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Formular-Karte volle Breite */
    .formular-karte {
        width: calc(100% - 12px) !important;
        padding: 16px 12px !important;
        border-radius: 16px !important;
    }

    /* Elemente Tabelle: kleinere Balken */
    .astro-tabelle td, .astro-tabelle th {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

    /* Astro-Grid-2 → 1 Spalte */
    .astro-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Partner-Form: vertikal */
    .partner-form {
        flex-direction: column !important;
    }
    .input-feld {
        width: 100% !important;
        min-width: unset !important;
    }

    /* v4v99msg: Benutzer-Untermenü – Kacheln statt scrollen */
    .benutzer-untermenue {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-wrap: unset !important;
        overflow-x: visible !important;
        gap: 8px !important;
        padding-bottom: 0 !important;
    }
    .benutzer-untermenue .nav-link {
        white-space: normal !important;
        flex-shrink: unset !important;
        font-size: 13px !important;
        padding: 12px 8px !important;
        text-align: center !important;
    }

    /* Score-Kacheln: 2 Spalten */
    .astro-kacheln {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* S24 Ultra (411px genau) */
@media (max-width: 412px) {
    .haupttitel {
        font-size: clamp(36px, 11vw, 50px) !important;
    }
    .formular-titel {
        font-size: clamp(30px, 11vw, 46px) !important;
    }
    .astro-seiten-titel {
        font-size: clamp(26px, 10vw, 40px) !important;
    }
}

/* ============================================================
   3v90m: Dashboard – Fullscreen Desktop + Samsung S24 Mobile
   ============================================================ */

/* Desktop: Dashboard Card nutzt volle Breite */
.dashboard-karte {
    width: min(1440px, calc(100% - 20px)) !important;
    max-width: none !important;
    padding: 20px 24px !important;
}

/* Desktop: Main-Grid optimal für breite Bildschirme */
@media (min-width: 1300px) {
    .dashboard-main-grid {
        grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important;
        gap: 28px !important;
    }
    .dashboard-strip-track {
        gap: 18px !important;
    }
    .dashboard-usercard {
        width: 220px !important;
    }
}

@media (min-width: 1600px) {
    .dashboard-karte {
        padding: 24px 32px !important;
    }
    .dashboard-main-grid {
        grid-template-columns: 380px minmax(0, 1fr) !important;
        gap: 32px !important;
    }
    .dashboard-usercard {
        width: 240px !important;
    }
}

/* ============================================================
   Samsung S24 / kleine Smartphones (max 430px)
   ============================================================ */
@media (max-width: 430px) {
    .dashboard-karte {
        width: calc(100% - 8px) !important;
        padding: 12px 10px !important;
        border-radius: 16px !important;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .dashboard-hero-card {
        position: static !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .dashboard-hero-avatar {
        max-width: 200px !important;
        margin: 10px auto 12px !important;
    }

    .dashboard-username {
        font-size: 20px !important;
    }

    .dashboard-mini-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .dashboard-mini-box {
        padding: 10px 12px !important;
        font-size: 13px !important;
        min-height: auto !important;
    }

    .dashboard-section-card {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .dashboard-filter-menu {
        gap: 6px !important;
    }

    .dashboard-filter-menu .btn {
        padding: 7px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }

    .dashboard-usercard {
        width: 160px !important;
        padding: 10px !important;
    }

    .dashboard-user-meta strong {
        font-size: 14px !important;
    }

    .dashboard-score-pill {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }

    /* Questionnaire kompakter */
    .dashboard-questionnaire-card {
        padding: 12px !important;
    }

    /* Aktions-Buttons volle Breite */
    .aktionsbereich {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .aktionsbereich .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Astro-Seiten mobil */
    .astro-seiten-titel {
        font-size: clamp(26px, 9vw, 42px) !important;
    }

    .sub-tab-nav {
        gap: 5px !important;
    }
    .sub-tab {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* China-Karten mobil */
    .china-alle-zeichen {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .china-zeichen-karte {
        padding: 10px 6px !important;
    }
    .china-zeichen-karte .emoji {
        font-size: 24px !important;
    }
}