/* ================================================================
   BandoV-Website – gemeinsame Grundlage (Startseite und Panel)
   Farben und Formen wie im Spiel (ui/web/bandov-stil.css): Weiß/Grau auf neutralem Schwarz,
   Hellblau nur für „aktiv“ und „wichtig“, Rot für Fehler. Weich, rund, leuchtend.
   Größen hängen an der Grundschrift (rem), die mit der Fensterbreite wächst: Handy bis 4K.
   ================================================================ */

@font-face { font-family: "Barlow Condensed"; src: url("schrift/BarlowCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("schrift/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("schrift/barlow-condensed-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("schrift/barlow-condensed-latin-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
    color-scheme: normal;
    --weiss: #FFFFFF;
    --hell: #EDEDED;
    --grau: #8E8E93;
    --dunkel: #1C1C1E;
    --schwarz: #0E0E10;
    --akzent: #5AAEFF;
    --akzent-hell: #A6D4FF;
    --akzent-rgb: 90, 174, 255;
    --rot: #E03A3A;
    --rot-rgb: 224, 58, 58;
    --gruen: #5BD38C;

    --flaeche-1: rgba(255, 255, 255, 0.035);
    --flaeche-2: rgba(255, 255, 255, 0.055);
    --flaeche-3: rgba(255, 255, 255, 0.08);
    --flaeche-4: rgba(255, 255, 255, 0.12);
    --linie: rgba(255, 255, 255, 0.1);
    --text-2: rgba(237, 237, 237, 0.78);

    --schrift: "Barlow Condensed", "Arial Narrow", sans-serif;
    --rund-gross: 1.6rem;
    --rund: 1.1rem;
    --rund-klein: 0.75rem;
    --pille: 999rem;
    --schatten: 0 1.2rem 3rem rgba(0, 0, 0, 0.45);
    --leuchten: 0 0 2.2rem rgba(var(--akzent-rgb), 0.28);
    --breite: min(92vw, 78rem);
    --knopf-h: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    /* 15 px am Handy, ~17,5 px bei 1920, ~25 px bei 3840 Pixel Breite */
    font-size: clamp(15px, 0.42vw + 9.5px, 26px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--schwarz);
    color: var(--hell);
    font-family: var(--schrift);
    font-weight: 500;
    font-size: 1.06rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; color: var(--weiss); letter-spacing: 0.01em; }
p { margin: 0; }

:focus-visible { outline: 0.14rem solid var(--akzent); outline-offset: 0.18rem; border-radius: 0.4rem; }

.nur-vorleser {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.springen {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: 0.6rem 1rem; border-radius: var(--pille); background: var(--weiss); color: var(--schwarz); font-weight: 700; text-decoration: none;
}
.springen:focus { top: 1rem; }

/* ---------- Symbole als Maske (Farbe = Textfarbe) ---------- */
.sym {
    display: inline-block; flex: none;
    width: 1.25em; height: 1.25em;
    background: currentColor;
    -webkit-mask: var(--bild) center / contain no-repeat;
    mask: var(--bild) center / contain no-repeat;
    vertical-align: -0.22em;
}

/* ---------- Überzeile und Titel ---------- */
.ueberzeile {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--grau);
}
.ueberzeile--akzent { color: var(--akzent); }

/* ---------- Knöpfe (Pillen) ---------- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    min-height: var(--knopf-h); padding: 0 1.35rem;
    border: 0.07rem solid var(--linie); border-radius: var(--pille);
    background: var(--flaeche-3); color: var(--weiss);
    font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
    cursor: pointer; transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.knopf:hover { background: var(--flaeche-4); border-color: rgba(255, 255, 255, 0.2); }
.knopf:active { transform: translateY(0.06rem); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.knopf--haupt {
    background: var(--akzent); border-color: transparent; color: #04121F;
    box-shadow: 0 0.4rem 1.6rem rgba(var(--akzent-rgb), 0.35);
}
.knopf--haupt:hover { background: var(--akzent-hell); box-shadow: 0 0.5rem 2rem rgba(var(--akzent-rgb), 0.5); }
.knopf--hell { background: var(--weiss); color: var(--schwarz); border-color: transparent; }
.knopf--hell:hover { background: var(--hell); }
.knopf--gefahr { background: rgba(var(--rot-rgb), 0.14); border-color: rgba(var(--rot-rgb), 0.4); color: #FFC9C9; }
.knopf--gefahr:hover { background: rgba(var(--rot-rgb), 0.24); }
.knopf--klein { min-height: 2.2rem; padding: 0 1rem; font-size: 0.92rem; }
.knopf--rund { width: var(--knopf-h); padding: 0; }

/* ---------- Plaketten ---------- */
.plakette {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.7rem; border-radius: var(--pille);
    background: var(--flaeche-3); color: var(--hell);
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.plakette--akzent { background: rgba(var(--akzent-rgb), 0.16); color: var(--akzent-hell); box-shadow: inset 0 0 0 0.07rem rgba(var(--akzent-rgb), 0.35); }
.plakette--gut { background: rgba(91, 211, 140, 0.13); color: #A8EBC3; }
.plakette--fehler { background: rgba(var(--rot-rgb), 0.16); color: #FFB4B4; }
.plakette--still { background: transparent; color: var(--grau); box-shadow: inset 0 0 0 0.07rem var(--linie); }

.punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--grau); flex: none; }
.punkt--an { background: var(--akzent); box-shadow: 0 0 0.6rem rgba(var(--akzent-rgb), 0.9); animation: pulsieren 2.4s ease-in-out infinite; }
.punkt--aus { background: var(--rot); }

@keyframes pulsieren { 50% { box-shadow: 0 0 1.1rem rgba(var(--akzent-rgb), 0.45); } }

/* ---------- Logo ---------- */
.marke { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marke img { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; object-fit: cover; box-shadow: 0 0.3rem 1.2rem rgba(var(--akzent-rgb), 0.25); }
.marke b { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.04em; color: var(--weiss); }
.marke small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grau); margin-top: -0.15rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}