/* =====================================================================
   Bitwolt – DESIGNSYSTEM (zentral)
   Future = Dark (Default) | Classic = Light (Override)
   -----------------------------------------------------
   NUR Look & Feel (Farben, Boxen, Buttons, Titel).
   Layout (Grids/Abstände/Breiten) liegt in den Seiten-CSS.
   Diese Datei IMMER als LETZTES laden.
   ===================================================================== */


/* ========== Minimal-Base (keine Typo-Overrides) ========== */
html, body { margin: 0; }
header, main, footer, .page { position: relative; z-index: 1; } /* über Video */


/* ========== Tokens – Future/Dark (Default) ========== */
:root{
  /* Brand */
  --accent-blue: #05B9F2;
  --accent-volt: #B9DB1B;

  /* Text/Surfaces */
  --surface-text: #EAF6FF;
  --text-muted:   rgba(255,255,255,.72);

  --surface-bg:     rgba(15,15,25,.86);
  --surface-border: rgba(255,255,255,.12);
  --surface-shadow: 0 6px 26px rgba(0,0,0,.32);

  /* Card/Box */
  --card-bg:     rgba(10,16,29,.92);
  --card-text:   #FFFFFF;
  --card-border: rgba(255,255,255,.18);
  --card-shadow: 0 10px 28px rgba(0,0,0,.35);

  /* Buttons */
  --btn-primary-bg:           #08BDF3;
  --btn-primary-text:         #071018;
  --btn-primary-border:       #079ED0;
  --btn-primary-bg-hover:     #077FAA;
  --btn-primary-border-hover: #066F93;
  --btn-primary-bg-active:    #066E92;
  --btn-primary-ring:         #B9DB1B;

  --btn-ghost-text:           #EAF6FF;
  --btn-ghost-border:         #05B9F2;
  --btn-ghost-text-hover:     #FFFFFF;
  --btn-ghost-border-hover:   #07A7DC;
  --btn-ghost-bg-hover:       rgba(5,185,242,.12);
}

/* ========== Classic/Light Override ========== */
html[data-design="classic"]{
  --surface-text: #0B1220;
  --text-muted:   rgba(11,18,32,.70);

  --surface-bg:     #F6F9FC;
  --surface-border: #DFE7F1;
  --surface-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);

  --card-bg:     #FFFFFF;
  --card-text:   #0B1220;
  --card-border: #E6EBF2;
  --card-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);

  --btn-primary-bg:           #05B9F2;
  --btn-primary-text:         #071018;
  --btn-primary-border:       #079ED0;
  --btn-primary-bg-hover:     #0ABEF7;
  --btn-primary-border-hover: #07A7DC;
  --btn-primary-bg-active:    #08A9DB;
  --btn-primary-ring:         #0B61F6;

  --btn-ghost-text:           #071018;
  --btn-ghost-border:         #05B9F2;
  --btn-ghost-text-hover:     #041019;
  --btn-ghost-border-hover:   #079ED0;
  --btn-ghost-bg-hover:       rgba(5,185,242,.10);
}


/* ========== Hintergrund / Video (nur Future zeigt Video) ========== */
#bgVideo { display: none !important; }
html[data-design="future"] #bgVideo{
  display:block !important;
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none;
}
html[data-design="future"] body { background: transparent; }

/* Classic: statischer Bildhintergrund + Wrapper transparent */
html[data-design="classic"] #bgVideo { display:none !important; }
html[data-design="classic"] body{
  background: #0a0a0a url("../pictures/hintergrund_classic.svg")
              center / cover no-repeat fixed !important;
}
/* Wrapper transparent halten, damit der Body-BG überall sichtbar bleibt */
html[data-design="classic"] .page,
html[data-design="classic"] .subpage,
html[data-design="classic"] .page-shell,
html[data-design="classic"] .startscreen,
html[data-design="classic"] .surface{
  background: transparent !important;
}


/* ========== Titel & Untertitel (außerhalb von Boxen) ========== */
.title{
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 900; letter-spacing: .04em;
  color: var(--surface-text) !important; /* Lesbarkeit erzwingen */
}
.subtitle{
  color: var(--surface-text) !important;
  opacity: .95;
}
/* Classic: kein Glow/Filter */
html[data-design="classic"] .title,
html[data-design="classic"] .subtitle{
  text-shadow: none !important;
  filter: none !important;
}


/* ========== Buttons (Basis + Varianten) ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; font-weight:800; line-height:1;
  padding:.75rem 1.1rem; text-decoration:none; cursor:pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .06s;
  user-select:none; border:1px solid transparent;
}
.btn:focus{ outline: 2px solid var(--btn-primary-ring); outline-offset:2px; }
.btn--primary{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
}
.btn--primary:hover{
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border-hover);
}
.btn--primary:active{ background: var(--btn-primary-bg-active); }

.btn--ghost{
  background: transparent;
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover{
  color: var(--btn-ghost-text-hover);
  border-color: var(--btn-ghost-border-hover);
  background: var(--btn-ghost-bg-hover);
}


/* ========== Box (Standardkarte) ========== */
.box{
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 16px;
  position: relative; z-index: 1; /* über Video */
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.box :where(h1,h2,h3,h4,h5,h6,p,li,small,span,strong,em){ color: var(--card-text); }

/* --- Interaktions-Modifier (opt-in, nur wenn im HTML gesetzt) --- */
.box--lift:hover{
  transform: translateY(-2px);
}
html[data-design="future"] .box--lift:hover{
  transform: translateY(-4px) scale(1.01);
}
html[data-design="future"] .box--glow:hover{
  box-shadow:
    var(--card-shadow),
    0 10px 28px rgba(5,185,242,.28),
    0 0 24px rgba(5,185,242,.18);
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--card-border));
}
html[data-design="classic"] .box--glow:hover{
  box-shadow: 0 8px 22px rgba(16,24,40,.18);
}
.box--click{ cursor: pointer; }
.box--click:active{ transform: translateY(0); filter: brightness(.98); }
.box--static,
.box--static:hover{
  transform: none !important;
  box-shadow: var(--card-shadow) !important;
  border-color: var(--card-border) !important;
}


/* ========== Tabelle (Card-Zellen) ========== */
.table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.table thead th{
  color: var(--surface-text);
  text-align:left; font-weight:900;
}
.table tbody td{
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  padding: 12px 16px;
}
.table tbody tr td:first-child{ border-radius:12px 0 0 12px; }
.table tbody tr td:last-child { border-radius:0 12px 12px 0; }


/* ========== Content-Links (Buttons sind ausgenommen) ========== */
main a:not(.btn){
  color: var(--accent-blue);
  text-decoration: underline; text-underline-offset: 2px;
}
main a:not(.btn):hover{ color:#079EDB; }


/* ========== Theme Toggle (token-basiert) ========== */
/* ===== Design-Toggle (Future/Classic) – einheitlicher Look, crisp, 3D ===== */

.bw-design-switch{
  /* feste, dunkle Optik (nicht vom Theme überschrieben) */
  --switch-h: 30px;
  --switch-w: 74px;

  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--switch-h);
  width: var(--switch-w);
  padding: 2px;
  border-radius: 999px;

  /* immer dunkel, leichter 3D-Track */
  background:
    linear-gradient(180deg, rgba(21,29,45,.96), rgba(10,14,22,.96));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -3px 8px rgba(0,0,0,.35),
    0 6px 18px rgba(0,0,0,.32);

  /* Interaktion */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bw-design-switch:focus-visible{
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -3px 8px rgba(0,0,0,.35),
    0 0 0 4px color-mix(in srgb, var(--accent-blue) 28%, transparent),
    0 6px 18px rgba(0,0,0,.32);
}

.bw-design-switch__opt{
  position: relative;
  z-index: 2;
  flex: 1 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--switch-h) - 4px);
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  /* Icons/Emoji knackig rendern */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transform: translateZ(0); /* verhindert subpixel-blur */
  color: var(--surface-text); /* bleibt gut lesbar */
  cursor: pointer;
}

.bw-design-switch__thumb{
  position: absolute;
  z-index: 1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;

  /* 3D-Thumb mit subtiler Glanzkante */
  background:
    radial-gradient(110% 100% at 30% 20%, #34d3ff 0%, #05B9F2 42%, #089ad2 100%);
  box-shadow:
    0 10px 22px rgba(5,185,242,.35),
    inset 0 -8px 12px rgba(0,0,0,.35),
    inset 0 3px 5px rgba(255,255,255,.22);

  transition: transform .18s ease, box-shadow .18s ease, translate .18s ease;
  will-change: transform, translate;
}

.bw-design-switch:hover .bw-design-switch__thumb{
  transform: scale(1.04);
}

.bw-design-switch:active .bw-design-switch__thumb{
  transform: scale(0.98);
}



/* Position der Thumb je Modus (Klasse wird von deinem JS gesetzt) */
.bw-design-switch.is-classic .bw-design-switch__thumb{
  transform: translateX(100%); /* plus Hover/Active kommt oben drauf */
}

/* Optional: aktive Seite (Text/Icon) auf dem Thumb etwas dunkler für Lesbarkeit */
.bw-design-switch.is-future  .bw-design-switch__opt--future,
.bw-design-switch.is-classic .bw-design-switch__opt--classic{
  color: #071018; /* kontrastreich auf dem blauen Thumb */
}

/* ––– (optional) noch etwas Glow im Future-Modus ––– */
html[data-design="future"] .bw-design-switch{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -3px 8px rgba(0,0,0,.35),
    0 0 28px color-mix(in srgb, var(--accent-blue) 18%, transparent),
    0 6px 18px rgba(0,0,0,.32);
}

/* Wichtig: Track NICHT im Classic-Theme umlackieren */
html[data-design="classic"] .bw-design-switch{
  background: linear-gradient(180deg, rgba(21,29,45,.96), rgba(10,14,22,.96)) !important;
  border-color: rgba(0,0,0,.25) !important;
}



/* ========== Footer (token-basiert) ========== */
.site-footer{
  background: var(--surface-bg);
  color: var(--surface-text);
}
.site-footer a{ color: var(--accent-blue); }
.site-footer a:hover{ color:#FFD600; }


/* ========== Utilities ========== */
.text-muted{ color: var(--text-muted) !important; }


/* ========== Kompatibilität (Legacy-Klassen) ==========
   Kann gelöscht werden, sobald alles auf .box / .btn umgestellt ist. */
.card{
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 16px;
  position: relative; z-index:1;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card :where(h1,h2,h3,h4,h5,h6,p,li,small,span,strong,em){ color: var(--card-text); }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; font-weight:800; line-height:1;
  padding:.75rem 1.1rem; text-decoration:none; cursor:pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .06s;
  user-select:none; border:1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
}
.btn-primary:hover{ background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border-hover); }
.btn-primary:active{ background: var(--btn-primary-bg-active); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; font-weight:800; line-height:1;
  padding:.75rem 1.1rem; text-decoration:none; cursor:pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .06s;
  user-select:none; border:1px solid var(--btn-ghost-border);
  background: transparent; color: var(--btn-ghost-text);
}
.btn-ghost:hover{
  color: var(--btn-ghost-text-hover);
  border-color: var(--btn-ghost-border-hover);
  background: var(--btn-ghost-bg-hover);
}




/* === Guthaben-Box – Tokens & Komponente =============================== */
:root{
  --guthaben-bg:      var(--card-bg);
  --guthaben-border:  color-mix(in srgb, var(--accent-blue) 45%, transparent);
  --guthaben-shadow:  var(--card-shadow);
  --guthaben-radius:  14px;
  --guthaben-title:   var(--card-text);
  --guthaben-value:   var(--accent-volt);
  --guthaben-note:    var(--accent-blue);
}
html[data-design="classic"]{
  --guthaben-bg:     var(--card-bg);
  --guthaben-border: var(--card-border);
  --guthaben-shadow: var(--card-shadow);
}

/* Komponente (kann alternativ zur bestehenden summary-box genutzt werden) */
.guthaben-box{
  background: var(--guthaben-bg);
  color: var(--guthaben-title);
  border: 2px solid var(--guthaben-border);
  box-shadow: var(--guthaben-shadow);
  border-radius: var(--guthaben-radius);
  padding: 22px 24px;
  min-width: 210px; max-width: 330px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.guthaben-title{ font-weight:700; font-size:1.02rem; margin-bottom:.4rem; }
.guthaben-value{ color: var(--guthaben-value); font-weight:800; font-size: clamp(20px,3.2vw,28px); }
.guthaben-note{  color: var(--guthaben-note);  font-weight:600; font-size:.95rem; }



/* BG-Video nie antappbar / keine iOS-Callouts */
.bg-layer, #bgVideo{
  pointer-events: none !important;
  -webkit-touch-callout: none;
}
#bgVideo::-webkit-media-controls{ display: none !important; }


/* === Utilities for CSP-safe styling (replacing inline styles) === */
.is-hidden{ display:none !important; }
.w-0{ width:0% !important; }
.text-primary{ color:#05B9F2 !important; }