/*
 * Glas-Optik nach der Bildvorlage: farbiger Grund, Karten aus hellem Glas.
 * Rein optisch – kein Template, kein JavaScript hängt davon ab.
 *
 * Abschalten: in assets/app.js die Zeile `import './styles/glas.css';` entfernen.
 */

:root {
    /* Weiche Farbflächen des Hintergrunds */
    --glas-beige: #ece1cf;
    --glas-rosa: #eec9ca;
    --glas-blau: #cfdcee;
    --glas-grund: #eeeaf2;

    /* Karten: Weiß mit Durchblick */
    --glas-karte: rgba(255, 255, 255, .58);
    --glas-kante: rgba(255, 255, 255, .75);
    --glas-schatten: 0 1.5rem 3rem rgba(90, 70, 130, .10);
}

/* Der farbige Grund liegt fest hinter der Seite, damit er beim Scrollen ruhig bleibt */
body {
    background-color: var(--glas-grund);
    background-image:
        radial-gradient(60rem 40rem at 8% 4%, var(--glas-beige) 0%, transparent 60%),
        radial-gradient(50rem 40rem at 6% 96%, var(--glas-rosa) 0%, transparent 62%),
        radial-gradient(60rem 45rem at 96% 30%, var(--glas-blau) 0%, transparent 60%),
        radial-gradient(40rem 30rem at 70% 100%, #ded0ec 0%, transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Karten: helles Glas auf dem farbigen Grund, weicher Rand statt Linie */
.card {
    background-color: var(--glas-karte);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    border: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: 0 .5rem 1.25rem rgba(90, 70, 130, .05);
}

/* Kacheln: ausgewählte deutlich violett, übrige wie die anderen Karten */
.kachel {
    transition: background-color .15s, box-shadow .15s, border-color .15s;
}
.kachel.border-white {
    border-color: rgba(255, 255, 255, .6) !important;
}
.kachel:not(.border-primary):hover {
    background-color: rgba(255, 255, 255, .8);
    box-shadow: 0 .75rem 1.5rem rgba(90, 70, 130, .09);
}
.kachel.border-primary {
    background-color: rgba(111, 66, 193, .10) !important;
    border-color: rgba(111, 66, 193, .35) !important;
}

/* Kopfzeile: Bedienelemente als weiche Pillen wie im Entwurf */
header .btn-link,
header .form-select,
header .btn {
    border-radius: 999px !important;
}
header .form-select,
header .btn-dark {
    background-color: rgba(255, 255, 255, .75);
    border-color: rgba(255, 255, 255, .8);
    box-shadow: 0 .25rem .75rem rgba(90, 70, 130, .06);
}
header .btn-dark {
    color: var(--bs-body-color);
}
header .btn-dark:hover,
header .btn-dark.show,
header .btn-dark:active {
    background-color: #fff;
    color: var(--bs-body-color);
}
/* Gesperrt (z. B. Pfeil ohne weitere Daten): blass statt dunkel */
header .btn-dark.disabled,
header .btn-dark:disabled {
    background-color: rgba(255, 255, 255, .45);
    border-color: rgba(255, 255, 255, .6);
    color: var(--bs-secondary-color);
    box-shadow: none;
}
header nav > .btn-link {
    width: 2.75rem;
    height: 2.75rem;
    background-color: rgba(255, 255, 255, .75);
    box-shadow: 0 .25rem .75rem rgba(90, 70, 130, .06);
}
header nav > .btn-link:hover {
    background-color: #fff;
}

/* Tabelle ohne eigene Fläche – die Karte darunter trägt die Farbe */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(120, 100, 160, .12);
}
.table > :not(caption) > * > * {
    background-color: transparent;
}

/* Ausklappmenü und Meldungen im selben Material */
.dropdown-menu {
    background-color: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(1.25rem);
    backdrop-filter: blur(1.25rem);
    border: 1px solid var(--glas-kante);
    border-radius: 1rem;
    box-shadow: var(--glas-schatten);
}
.modal-content {
    background-color: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
    border: 1px solid var(--glas-kante);
    border-radius: 1.25rem;
}

/* Listen (z. B. Rang-Erfassung) tragen keine eigene weiße Fläche –
   sonst stehen weiße Blöcke auf dem getönten Glas des Fensters */
.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: rgba(120, 100, 160, .15);
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, .5);
}

/* Fortschritts- und Verlaufsbalken auf hellem Glas statt Grau */
.buybox-balken {
    --bs-progress-bg: rgba(120, 100, 160, .12);
    border-radius: 999px;
}