/* ============================================================================
   modern-theme.css  ·  FeedbackSchool — app-eigene Bausteine
   ----------------------------------------------------------------------------
   Was hier frueher stand (Knoepfe, Felder, Karten, Tabellen, Dialoge, Plaketten,
   Schrift) war eine zweite Lage ueber Bootstrap. Seit die Grundgestalt in
   css/framework.css steht, gibt es diese Lage nicht mehr: zwei Stylesheets, die
   dieselben Komponenten in unterschiedlicher Absicht anfassen, sind genau der
   Grund, aus dem die Oberflaeche uneinheitlich wirkte.

   Geblieben sind die Bausteine, die es nur in dieser Anwendung gibt: die
   KPI-Kacheln der Auswertung, der Segmentbalken, die auswaehlbare Karte des
   Einrichtungsassistenten und die weisse Karte auf dem Markenverlauf der
   Anmelde- und Onboarding-Seiten.
   ============================================================================ */

/* 9) KPI-Kacheln (Ergebnis-Übersicht) — rahmenlos, federleichte Tiefe, große Zahl
      im tiefen Markendunkel, kleines Versal-Label */
.kpi-tile {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    background-color: var(--surface);
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nav-section-label);
}

.kpi-value {
    font-weight: 700;
    color: var(--primary-strong);
    font-size: 2.25rem;
    line-height: 1.1;
    margin-top: 0.25rem;
}

/* 10) Gauge-Balken — kleine Lücken zwischen den Segmenten, leicht runder */
.gauge-segments {
    gap: 3px;
}

.gauge-segment {
    border-radius: var(--radius-sm);
}

/* 11) Auswählbare Karten (Setup-Wizard) — größerer Radius + dezente Ruhe-Elevation */
.card-selectable {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* 12) Onboarding/Login — weiße Karte auf dem Markenverlauf statt weißer Schrift
   direkt auf Grün. Opt-in über .fullpage-card am .fullpage-body der Formularseiten
   (Home bleibt Hero ohne Karte). Die inneren Overrides drehen die in app.css für den
   Verlauf gesetzten Hell-auf-Dunkel-Stile auf Dunkel-auf-Weiß zurück. */
.fullpage-card {
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 2rem;
}

.fullpage-card .form-label,
.fullpage-card .form-check-label {
    color: var(--gray-dark);
}

.fullpage-card .form-control {
    background-color: var(--surface-sunk);
    border: 1px solid var(--gray-border-light);
    color: var(--gray-dark);
}

.fullpage-card .form-control::placeholder {
    color: var(--gray-text-secondary);
}

.fullpage-card .form-control:focus {
    background-color: var(--surface);
    color: var(--gray-dark);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-soft);
}

.fullpage-card .input-group .btn-outline-secondary {
    background-color: var(--surface-sunk);
    border: 1px solid var(--gray-border-light);
    color: var(--gray-text-secondary);
}

.fullpage-card .input-group .btn-outline-secondary:hover {
    background-color: var(--nav-hover-bg);
    color: var(--primary-dark);
}

.fullpage-card .form-check-input {
    background-color: var(--surface);
    border-color: var(--gray-border-medium);
}

.fullpage-card .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    /* Weißer Schalter-Knopf auf grünem Track (SVG kann keine CSS-Variablen, siehe 4.4) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.fullpage-card .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.fullpage-card .btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

.fullpage-card .fullpage-hint,
.fullpage-card .form-text {
    color: var(--gray-text-secondary);
}

.fullpage-card .fullpage-link {
    color: var(--primary);
}

.fullpage-card .progress {
    background-color: var(--primary-light);
}

.fullpage-card .progress-bar {
    background-color: var(--primary);
}