/* ==========================================
   Datei-Pfad: /assets/css/kcc-gold.css
   NEU 18.10.2026 (Paket P2): zentrale Gold-Vorgabe, Teil 1 (Stil). Wird von inc/kcc-gold.php auf JEDER Seite ganz zuletzt im <head> geladen.
   Die Gold-Werte (--kcc-gold, --kcc-gold-rgb, --kcc-gold-light, --kcc-gold-dark, --kcc-gold-grad) kommen aus Admin → Einstellungen.
   ========================================== */
html { accent-color: var(--kcc-gold, #ebcb72); scrollbar-width: thin; scrollbar-color: var(--kcc-gold-dark, #b07f2a) rgba(0,0,0,.25); }
::selection { background: rgba(var(--kcc-gold-rgb, 235,203,114), .38); color: #fff; }
:focus-visible { outline-color: var(--kcc-gold, #ebcb72); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--kcc-gold-grad, linear-gradient(135deg,#f9e596,#ebcb72,#b07f2a)); border-radius: 10px; border: 2px solid rgba(0,0,0,.25); }

/* Kacheln (Paket P2, 18.10.2026): passt eine Zahl neben dem Symbol nicht in die Kachel, setzt assets/js/kcc-gold.js die Klasse
   "kcc-tile-stack" - dann steht das Symbol ueber der Zahl (bei allen Kacheln der Reihe gleich) und nichts wird abgeschnitten. */
.kcc-tile-stack { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding-left: 20px !important; padding-right: 20px !important; }
.kcc-tile-stack > * { min-width: 0; max-width: 100%; }
.kcc-tile-stack > div:not([class*="icon"]) { width: 100%; }
/* Kachel-Beschriftungen (Paket P2): lange Texte brechen um statt mit "..." abgeschnitten zu werden */
.kpi-card .kpi-label, .stat-card .stat-label { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
/* Waehrungszeichen (EUR / USD ...) in Kacheln (Paket P2, 18.10.2026): steht das Zeichen inline in Rot/Blau/Lila/Orange (z. B. "Verdiente Provision" unter Mitglied -> Analytics), wird es -
   wie die Zahl daneben - Gold. Graue Waehrungszeichen (#888) und gruene Preise bleiben unveraendert. */
.kpi-card .curr-symbol[style*="#ff6b6b" i], .kpi-card .curr-symbol[style*="#e74c3c" i], .kpi-card .curr-symbol[style*="#3498db" i], .kpi-card .curr-symbol[style*="#9b59b6" i], .kpi-card .curr-symbol[style*="#f39c12" i] { color: var(--kcc-gold, #ebcb72) !important; }

/* ==========================================================================
   Handy-Sicherheitsnetz (Paket P2, 18.10.2026)
   Ursache der rechts abgeschnittenen Inhalte am Handy: das Hauptfeld (.mbl-main-content) schneidet alles ab, was breiter ist als der Bildschirm
   (es gibt dort kein seitliches Scrollen). Breiter wurde es durch (1) Waehrungsleisten mit 5 Knoepfen, (2) Spalten mit "1fr" (= mindestens so breit
   wie der breiteste Inhalt), (3) Tabellen mit fester Mindestbreite ohne eigenen Scrollbereich, (4) Zeilen ohne Umbruch, (5) Rahmen mit Innenabstand
   ohne "border-box". Alles hier ist eine Ergaenzung - keine Seite verliert etwas; am PC aendert sich nichts (alle Regeln gelten nur bis 640 px bzw. 1024 px).
   ========================================================================== */
@media (max-width: 640px) {
    /* (1) Waehrungsleisten (EUR / USD / AED / CAD / TL ...) und Filterleisten: duerfen umbrechen, nie breiter als der Bildschirm */
    .controls-wrapper { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; align-items: stretch; }
    .currency-toggles, .curr-toggles { flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; box-sizing: border-box; }
    .curr-btn { flex: 1 1 auto; padding: 8px 12px; }
    .filter-bar { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; }
    .action-header > *, .roadmap-header > *, .mass-action-bar > * { min-width: 0; max-width: 100%; }
    .mass-action-bar > div { flex-wrap: wrap; }
    /* (2) Spalten duerfen schrumpfen (minmax(0,1fr)) - bei Seiten, die am Handy "1fr" nutzen */
    .grid-2, .mbl-grid-2, .split-grid, .grid-layout, .guide-layout, .chart-grid, .hub-grid, .top5-grid, .data-tables-grid, .cms-grid, .top-dashboard-grid, .news-list { grid-template-columns: minmax(0, 1fr) !important; }
    .grid-2 > *, .mbl-grid-2 > *, .split-grid > *, .grid-layout > *, .guide-layout > *, .chart-grid > *, .hub-grid > *, .top5-grid > *, .data-tables-grid > *, .cms-grid > *, .top-dashboard-grid > *, .news-list > * { min-width: 0; }
    /* (5) Rahmen mit Innenabstand, die "100 %" breit sind, werden mit dem Innenabstand zusammen gerechnet */
    .re-subnav, .hub-hero, .member-card-wrapper, .ty-container { box-sizing: border-box; max-width: 100%; }
    .hub-hero { padding-left: 20px; padding-right: 20px; }
    .hero-image-wrapper { overflow-x: clip; }
    /* Einzelfaelle */
    .duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dur-btn { padding: 16px 8px; font-size: 1.05rem; }
    .calc-box .btn-glow { white-space: normal; }
    .guide-panel { padding-left: 18px !important; padding-right: 18px !important; }
    h1.hero-title { font-size: clamp(1.6rem, 8.2vw, 3rem); overflow-wrap: anywhere; }
    h2.step-title { font-size: 1.45rem; flex-wrap: wrap; }
    .step-number { font-size: 4rem; right: 12px; }
    .stig-panel { padding: 24px 16px; }
    /* Hauptfeld, Kaesten, Knoepfe und Tab-Leisten rechnen den Innenabstand in ihre Breite ein (sonst ragten sie bei "Breite 100 %" rechts ueber den Rand) */
    .mbl-panel, .mbl-tabs, .tab-nav, .mbl-tabs-container, .chart-container, .btn-gold-solid, .btn-glow { box-sizing: border-box; max-width: 100%; }
    .btn-glow { padding-left: 24px; padding-right: 24px; }
    /* Tab-Leisten: lange Beschriftungen duerfen umbrechen, die Leiste darf in mehrere Zeilen laufen */
    .tab-nav { flex-wrap: wrap; }
    .tab-btn { white-space: normal; height: auto; min-height: 54px; padding-top: 8px; padding-bottom: 8px; }
    .mbl-tabs { flex-wrap: wrap; }
    .mbl-tab-btn { white-space: normal; }
    /* Zeilen aus Text + Betrag/Knoepfen (Listen, Karten) duerfen umbrechen */
    .data-item, .grid-item { flex-wrap: wrap; gap: 10px; }
    /* Bestellungen: Suchzeile und Massen-Aktion */
    form.table-controls > div { flex-wrap: wrap; min-width: 0; width: 100%; box-sizing: border-box; }
    .search-input { min-width: 0; flex: 1 1 140px; }
    #massActionForm > div[style*="display: flex"] { flex-wrap: wrap; box-sizing: border-box; }
    /* 2FA: Geheimcode + Kopieren-Knopf */
    .secret-box { flex-wrap: wrap; justify-content: center; box-sizing: border-box; max-width: 100%; }
    .secret-code { font-size: 1.1rem; letter-spacing: 1px; overflow-wrap: anywhere; }
    /* Launch-Countdown (Tage : Stunden : Minuten : Sekunden) im Mitglieder-Dashboard und Admin-Start passt auf jedes Handy */
    #launch-timer { gap: 6px !important; font-size: 1.9rem !important; max-width: 100%; }
    #launch-timer > div { min-width: 0; }
    #launch-timer > div > span:last-child { font-size: 0.6rem !important; }
}
@media (max-width: 640px) {
    div:has(> #launch-timer) { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; }
    div:has(> #launch-timer) > h3 { font-size: 1.15rem !important; }
}
@media (max-width: 380px) {
    #launch-timer { gap: 4px !important; font-size: 1.5rem !important; }
    #launch-timer > div > span:last-child { font-size: 0.5rem !important; }
}
@media (max-width: 1024px) {
    .mbl-main-content { box-sizing: border-box; max-width: 100%; }
}
@media (max-width: 1024px) {
    /* (3) Tabellen mit fester Mindestbreite bekommen einen eigenen Scrollbereich (seitlich wischen), statt vom Hauptfeld abgeschnitten zu werden */
    html body .table-responsive { overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 700px) {
    /* Diagramm-Flaechen (canvas) bleiben im Kasten: ohne diese Regel bleibt ein noch nicht gezeichnetes Diagramm 300 px breit und schiebt die Seite ueber den Bildschirmrand */
    .mbl-main-content canvas, .public-main-content canvas { max-width: 100%; }
    /* Preis-/Betragszeilen (Healthbox, Spenden ...) duerfen am Handy umbrechen, statt aus dem Kasten zu ragen */
    .hb-v-amount, .hb-v-amount .dynamic-price { overflow-wrap: anywhere; }
}
/* Notbremse des Skripts assets/js/kcc-gold.js: ueberlange Woerter duerfen als Letztes mitten im Wort umbrechen */
.kcc-wrap-any { overflow-wrap: anywhere !important; }
/* NEU 18.10.2026 (Paket P2) - Abschnitt 5 des Skripts assets/js/kcc-gold.js: PC (ab 1100 px) - Tabellen, die breiter waeren als ihr Kasten, passen sich an (nur dann, vom Skript gesetzt) */
table[data-kcc-tfit] { min-width: 0 !important; width: 100% !important; }
table[data-kcc-tfit] .kcc-wrapcell { white-space: normal !important; overflow-wrap: break-word; }
table[data-kcc-tfit] .kcc-anycell { white-space: normal !important; overflow-wrap: anywhere; }
table[data-kcc-tfit="3"] th, table[data-kcc-tfit="3"] td, table[data-kcc-tfit="4"] th, table[data-kcc-tfit="4"] td { padding-left: 10px !important; padding-right: 10px !important; }
table[data-kcc-tfit="3"], table[data-kcc-tfit="4"] { font-size: .92em; }
table[data-kcc-tfit="4"] th, table[data-kcc-tfit="4"] td { min-width: 0 !important; }
/* NEU 18.10.2026 (Paket P2): einzelne Zier-Stellen (KEIN Status, KEINE Warnung), die bisher in Rot standen - gezielt je Seite ueber die Seitenkennung am <body> (data-kcc-page, gesetzt von inc/kcc-gold.php) */
body[data-kcc-page="page-admin-packages"] div[style*="#e74c3c" i][style*="margin-bottom: 5px"] { color: var(--theme-primary, #ebcb72) !important; }
body[data-kcc-page="page-admin-fc-legal"] h3[style*="#ff6b6b" i],
body[data-kcc-page="page-admin-fc-landingpage-cms"] h3[style*="#ff6b6b" i],
body[data-kcc-page="page-user-fc-vault"] h3[style*="#ff6b6b" i] { color: var(--theme-primary, #ebcb72) !important; }
/* NEU 18.10.2026 (Paket P2d): Mega-Profil (Admin -> Benutzer -> Aktionen -> Mega-Profil oeffnen): Der Reiter "Team-Rechte & Freigaben" hat im Original eine orange Schriftfarbe fest im Tag;
   auf dem goldenen Aktiv-Hintergrund war er kaum lesbar. Der aktive Reiter bekommt wie alle anderen Reiter dunkle Schrift. */
.md-tab-btn.active, .md-tab-btn.active i { color: #000 !important; }