@import '_content/MaderInnovations.Modules.Assessment.Contracts/MaderInnovations.Modules.Assessment.Contracts.bundle.scp.css';

/* /Pages/Rider/MySessionDetail.razor.rz.scp.css */
.cl-sitzcheck-section[b-ndtpek1ykl] {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.cl-sitzcheck-title[b-ndtpek1ykl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
    color: var(--cl-gold-light, #e8b84b);
}

.cl-sitzcheck-grid[b-ndtpek1ykl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* CompetencyCheck token mapping moved to Cavallearn.Client/wwwroot/css/cavallearn.css
   (global, unscoped) so it applies across Blazor scope boundaries reliably. */

.cl-sitzcheck-compare-toggle[b-ndtpek1ykl] {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.5rem;
}

.cl-sitzcheck-compare-btn[b-ndtpek1ykl] {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(200, 149, 42, 0.4);
    color: var(--cl-gold-light, #e8b84b);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.cl-sitzcheck-compare-btn:hover[b-ndtpek1ykl] {
    background: rgba(200, 149, 42, 0.1);
    border-color: var(--cl-gold);
    transform: translateY(-1px);
}

.cl-sitzcheck-section[b-ndtpek1ykl]  .cc-cmp {
    margin-top: 0.75rem;
}
/* /Pages/Rider/SitzCheckWizardPage.razor.rz.scp.css */
.cl-back-link[b-l12luqjk1v] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--cl-gold-light, #e8b84b);
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.cl-sitzcheck-wizard[b-l12luqjk1v] {
    margin-top: 0.5rem;
}

/* CompetencyCheck token mapping moved to Cavallearn.Client/wwwroot/css/cavallearn.css
   (global, unscoped) so it applies across Blazor scope boundaries reliably. */
/* /Shared/EinwilligungKaestchen.razor.rz.scp.css */
/* Bau 36 (A) — Scoped CSS zum Einwilligungs-Kaestchen. Muster wie
   EmpfehlungsHinweis: der Baustein bringt sein Aussehen selbst mit und fasst
   keine bestehende Klasse an.

   ANDERS ALS DER EMPFEHLUNGS-HINWEIS IST DIESER KASTEN NICHT RUHIG. Er ist die
   Bedingung fuer den naechsten Schritt; wer ihn uebersieht, steht vor einem
   ausgegrauten Knopf ohne erkennbaren Grund. Genau das ist im Klicktest
   passiert. Ungesetzt traegt er deshalb den Gold-Rahmen der Marke, gesetzt
   faellt er ins Gruene zurueck und tritt in den Hintergrund. */

.cl-einwilligung[b-m1je58hz0t] {
    margin: 0 0 .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--cl-gold);
    border-radius: var(--cl-radius, .5rem);
    background: rgba(255, 255, 255, .04);
}

.cl-einwilligung--ok[b-m1je58hz0t] {
    border-color: rgba(63, 179, 127, .55);
}

.cl-einwilligung__zeile[b-m1je58hz0t] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    cursor: pointer;
}

/* Fingerkuppengroesse — das Kaestchen wurde am Handy nicht getroffen. */
.cl-einwilligung__zeile input[type="checkbox"][b-m1je58hz0t] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
}

.cl-einwilligung__titel[b-m1je58hz0t] {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--cl-text);
}

.cl-einwilligung__text[b-m1je58hz0t] {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    opacity: .8;
    overflow-wrap: anywhere;
}

.cl-einwilligung__grund[b-m1je58hz0t] {
    margin: .45rem 0 0 1.7rem;
    font-size: .76rem;
    opacity: .75;
}
/* /Shared/EmpfehlungsHinweis.razor.rz.scp.css */
/* CL-C8 / CL-C9 — Scoped CSS zum Hinweis-Baustein.
   Bewusst scoped statt in cavallearn.css: der Baustein bringt sein Aussehen
   selbst mit und fasst keine bestehende Klasse an.

   Ruhig, aber nicht versteckt: geringer Kontrast zum Umfeld, volle Lesbarkeit
   ohne Aufklappen. Bei 360px darf nichts springen — deshalb flex mit
   umbrechendem Text und ein Icon fester Groesse, das nicht schrumpft. */

.cl-hinweis[b-fvmznttqhe] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
}

.cl-hinweis__icon[b-fvmznttqhe] {
    flex: 0 0 auto;
    margin-top: .1rem;
    opacity: .75;
}

.cl-hinweis__text[b-fvmznttqhe] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    opacity: .8;
    /* Lange Fachwoerter duerfen bei 360px nicht aus dem Kasten laufen. */
    overflow-wrap: anywhere;
}