/* AI4Cert - eigene Styles. Bootstrap 5.3 liegt unter css/bootstrap/, Telerik-Theme kommt aus dem Paket. */

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

h1:focus {
    outline: none;
}

/* Fix 13.09.2026 (Testfeedback Fernand Schroell): auf schmalen Bildschirmen/100% Zoom wurde ein
   Telerik-Grid (z. B. beim Mitarbeiter/Firma anlegen) breiter als der Bildschirm, ohne dass eine
   horizontale Scrollleiste erschien - Pflichtfelder rechts (auch in der Bearbeiten-/Neu-Zeile)
   waren dadurch nicht erreichbar. Sicherheitsnetz fuer alle Grids der Anwendung: eigene
   horizontale Scrollleiste, falls die interne Breitenberechnung des Grids das aus irgendeinem
   Grund nicht selbst uebernimmt. Global (nicht scoped), damit es fuer jedes Grid greift.
*/
.k-grid {
    overflow-x: auto;
}

/* Seitenkopf: h3 plus erklaerende Zeile, wie in PPS_Schreml (CLAUDE.md, Konvention Seitenlayout) */
.seite-titel {
    margin-bottom: .25rem;
}

.seite-erklaerung {
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Formular-Validierung (aus dem Template, unveraendert) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Hier ist ein Fehler aufgetreten. Bitte Seite neu laden.";
    }

/* Grid-Werkzeugleiste in einer Zeile (aus PPS_Schreml uebernommen): Buttons und Suchfeld
   nebeneinander, nichts waechst auf volle Breite. */
.tb-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    .tb-row > * {
        flex: 0 0 auto;
        width: auto;
    }

    .tb-row .k-searchbox .k-input {
        width: 16rem;
        min-width: 12rem;
    }

/* Seite /wozu: das eine Blatt. Volle Breite und linksbuendig wie ueberall, aber Zeilen nicht
   endlos lang, sonst liest das niemand. */
.wozu {
    max-width: 62rem;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.55;
}

    .wozu h4 {
        margin-top: 1.75rem;
    }

    /* Themenseiten: h1/h2/h3 fuer Google, Optik wie h4/h5 auf /wozu. */
    .wozu h1 {
        font-size: 1.5rem;
        font-weight: 500;
    }

    .wozu h2 {
        font-size: 1.5rem;
        font-weight: 500;
        margin-top: 1.75rem;
    }

    .wozu h3 {
        font-size: 1.25rem;
        font-weight: 500;
        margin-top: 1.25rem;
    }

    .wozu h5 {
        margin-top: 1.25rem;
    }

    .wozu ol li {
        margin-bottom: .4rem;
    }

.wozu-zitat {
    margin: 1rem 0;
    padding: .6rem 1rem;
    border-left: 4px solid #2f6fd6;
    background: #f3f7fd;
    font-size: 1.1rem;
}

/* Landingpage (Start.razor) - Inhalt max. 1.250 px, 17 px Text, ein Hauptknopf (11.09.2026) */
.start {
    max-width: 1250px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
    font-size: 17px;
    line-height: 1.6;
    color: #2b3640;
}

    .start h1 {
        font-size: 2.6rem;
        font-weight: 800;
        line-height: 1.15;
        color: #1e2a38;
        margin-bottom: 1rem;
    }

    .start h2 {
        font-size: 1.7rem;
        font-weight: 700;
        color: #1e2a38;
        margin-bottom: .9rem;
    }

    .start h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #1e2a38;
        margin-bottom: .5rem;
    }

    .start h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1e2a38;
        margin: .6rem 0 .3rem;
    }

    .start p {
        max-width: 42rem;
    }

.start-klein {
    font-size: .95rem;
    color: #5b6773;
}

/* Hero */
.start-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center;
    padding: 1.5rem 0 2.5rem;
}

.start-lead {
    font-size: 1.2rem;
    color: #3a4650;
}

/* 17.09.2026: abgesetzter Preishinweis unter der Haekchen-Liste (Johann) */
.start-preishinweis {
    font-size: .95rem;
    margin: -.4rem 0 1.5rem;
}

    .start-preishinweis a { color: #5b6773; text-decoration: underline; }

.start-vorteile {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 1.5rem;
}

    .start-vorteile li {
        padding-left: 1.7rem;
        position: relative;
        margin-bottom: .35rem;
    }

        .start-vorteile li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #2f6fd6;
            font-weight: 700;
        }

.start-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Vorschau Sammelnachweis (Beispiel) */
.start-vorschau {
    background: linear-gradient(160deg, #f3f8fe 0%, #e6f0fc 100%);   /* dezentes Blau aus der 4 (#2F80ED) */
    border: 1px solid #c9dcf5;
    border-radius: .8rem;
    box-shadow: 0 1rem 2.5rem rgba(30, 42, 56, .12);
    padding: 1.25rem 1.5rem;
    /* 18.09.2026 (Johann): nicht mehr schraeg - transform: rotate(-2.5deg) entfernt */
    margin-right: 2.5rem;   /* etwas nach links, damit rechts Luft bleibt (Johann, 11.09.2026) */
}

.start-vorschau-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    color: #5b6773;
    margin-bottom: .8rem;
}

    .start-vorschau-kopf img {
        height: 28px;
    }

.start-vorschau-betrieb {
    font-weight: 700;
    font-size: 1.15rem;
    color: #1e2a38;
    margin-bottom: .8rem;
}

.start-vorschau-zahlen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

    .start-vorschau-zahlen div {
        background: #f3f7fd;
        border-radius: .5rem;
        padding: .6rem .5rem;
        text-align: center;
    }

    .start-vorschau-zahlen b {
        display: block;
        font-size: 1.4rem;
        color: #2f6fd6;
        line-height: 1.2;
    }

    .start-vorschau-zahlen span {
        font-size: .8rem;
        color: #5b6773;
    }

.start-vorschau-liste {
    width: 100%;
    font-size: .9rem;
    border-collapse: collapse;
}

    .start-vorschau-liste td {
        padding: .35rem .2rem;
        border-top: 1px solid #eef2f6;
    }

    .start-vorschau-liste .ok { color: #1d7d45; font-weight: 600; text-align: right; }
    .start-vorschau-liste .offen { color: #9a6b00; text-align: right; }

.start-vorschau-fuss {
    margin-top: .8rem;
    font-size: .78rem;
    color: #8a96a3;
    letter-spacing: .02em;
}
.start-vorschau-fuss a {
    color: #2F80ED;
    text-decoration: none;
    border-bottom: 1px dotted #2F80ED;
}
.start-vorschau-fuss a:hover {
    color: #1F5F8B;
    border-bottom-style: solid;
}

/* Die Karte erzaehlt den Ablauf (18.09.2026, Johann: "Langweilig war gestern").
   Sieben Szenen in der Sammelnachweis-Karte, reines CSS. Eine Schleife = 64 s: Szene 1 laeuft 16 s
   (Mitarbeiter erscheinen nacheinander, dann bestehen fuenf nacheinander), Szenen 2-7 je 8 s.
   Alle Szenen haengen an derselben Schleifenlaenge mit versetztem negativem Delay, so bleiben sie
   im Takt. Szene 1 (Sammelnachweis) bleibt im Textfluss und gibt die Hoehe vor, die uebrigen liegen
   absolut darueber. Maus auf der Karte haelt alles an (zum Lesen). */
.start-story {
    position: relative;
    overflow: hidden;
}

    .start-story .sz {
        animation: sz-blende 64s linear infinite;
    }

    .start-story .sz1 { position: relative; animation-name: sz-blende-lang; }

    /* Szenen 2-7 haben denselben Rahmen wie Szene 1: Kopfzeile mit Logo und "n / 7" oben,
       Punktreihe unten, Inhalt dazwischen mittig (18.09.2026, Johann: zu viel freie Flaeche). */
    .start-story .sz:not(.sz1) {
        position: absolute;
        inset: 0;
        padding: 1.25rem 1.5rem;
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
    }

    .start-story .sz-inhalt {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .start-story .sz-punkte {
        display: flex;
        justify-content: center;
        gap: .45rem;
        margin-top: .9rem;
    }

        .start-story .sz-punkte i {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            background: #c9dcf5;
        }

        .start-story .sz-punkte i.an {
            background: #2f6fd6;
        }

    /* Szene n (n>=2) beginnt bei 16 + (n-2)*8 s */
    .start-story .sz2 { animation-delay: -48s; }
    .start-story .sz3 { animation-delay: -40s; }
    .start-story .sz4 { animation-delay: -32s; }
    .start-story .sz5 { animation-delay: -24s; }
    .start-story .sz6 { animation-delay: -16s; }
    .start-story .sz7 { animation-delay: -8s; }

    .start-story:hover .sz, .start-story:hover .sz *,
    .start-story:focus-within .sz, .start-story:focus-within .sz * {
        animation-play-state: paused;
    }

/* Szenen 2-7: 8 s = 12,5 % der Schleife; 0,8 s einblenden, 0,6 s ausblenden */
@keyframes sz-blende {
    0%      { opacity: 0; visibility: hidden; }
    1.25%   { opacity: 1; visibility: visible; }
    11.56%  { opacity: 1; visibility: visible; }
    12.50%  { opacity: 0; visibility: hidden; }
    100%    { opacity: 0; visibility: hidden; }
}

/* Szene 1: 16 s = 25 % der Schleife */
@keyframes sz-blende-lang {
    0%      { opacity: 0; visibility: hidden; }
    1.25%   { opacity: 1; visibility: visible; }
    24.40%  { opacity: 1; visibility: visible; }
    25.00%  { opacity: 0; visibility: hidden; }
    100%    { opacity: 0; visibility: hidden; }
}

/* Szene 1 im Detail: Zeilen r1..r8 erscheinen ab 0,6 s alle 0,45 s (Zaehler m0..m8), danach bestehen
   w1..w5 ab 6 s alle 1,2 s (kurzes gruenes Aufleuchten, Zaehler c0..c5); drei bleiben rot "offen".
   .alt/.neu und die Ziffern liegen jeweils in derselben Rasterzelle uebereinander. */
.start-story .wechsel, .start-story .zaehler {
    display: grid;
}

    .start-story .wechsel > span, .start-story .zaehler > span {
        grid-area: 1 / 1;
    }

    .start-story .start-vorschau-liste td.wechsel > span {
        justify-self: end;
    }

    /* die Ziffern in der Kachel behalten Groesse und Blau (sonst greift .start-vorschau-zahlen span) */
    .start-story .start-vorschau-zahlen b.zaehler > span {
        font-size: inherit;
        color: inherit;
        line-height: inherit;
        opacity: 0;
    }

    .start-story .start-vorschau-liste .offen { color: #b02a37; }   /* rot, solange nicht bestanden (Johann) */
    .start-story .start-vorschau-liste td { padding: .28rem .2rem; font-size: .88rem; }
    .start-story .start-vorschau-liste tr { opacity: 0; }
    .start-story .wechsel .neu { opacity: 0; }

    .start-story tr.r1 { animation: sz1-r1 64s linear infinite; }
    .start-story tr.r2 { animation: sz1-r2 64s linear infinite; }
    .start-story tr.r3 { animation: sz1-r3 64s linear infinite; }
    .start-story tr.r4 { animation: sz1-r4 64s linear infinite; }
    .start-story tr.r5 { animation: sz1-r5 64s linear infinite; }
    .start-story tr.r6 { animation: sz1-r6 64s linear infinite; }
    .start-story tr.r7 { animation: sz1-r7 64s linear infinite; }
    .start-story tr.r8 { animation: sz1-r8 64s linear infinite; }
    .start-story .w1 .alt { animation: sz1-w1-alt 64s linear infinite; }
    .start-story .w1 .neu { animation: sz1-w1-neu 64s linear infinite; }
    .start-story .w2 .alt { animation: sz1-w2-alt 64s linear infinite; }
    .start-story .w2 .neu { animation: sz1-w2-neu 64s linear infinite; }
    .start-story .w3 .alt { animation: sz1-w3-alt 64s linear infinite; }
    .start-story .w3 .neu { animation: sz1-w3-neu 64s linear infinite; }
    .start-story .w4 .alt { animation: sz1-w4-alt 64s linear infinite; }
    .start-story .w4 .neu { animation: sz1-w4-neu 64s linear infinite; }
    .start-story .w5 .alt { animation: sz1-w5-alt 64s linear infinite; }
    .start-story .w5 .neu { animation: sz1-w5-neu 64s linear infinite; }
    .start-story .zaehler .m0 { animation: sz1-m0 64s linear infinite; }
    .start-story .zaehler .m1 { animation: sz1-m1 64s linear infinite; }
    .start-story .zaehler .m2 { animation: sz1-m2 64s linear infinite; }
    .start-story .zaehler .m3 { animation: sz1-m3 64s linear infinite; }
    .start-story .zaehler .m4 { animation: sz1-m4 64s linear infinite; }
    .start-story .zaehler .m5 { animation: sz1-m5 64s linear infinite; }
    .start-story .zaehler .m6 { animation: sz1-m6 64s linear infinite; }
    .start-story .zaehler .m7 { animation: sz1-m7 64s linear infinite; }
    .start-story .zaehler .m8 { animation: sz1-m8 64s linear infinite; }
    .start-story .zaehler .c0 { animation: sz1-c0 64s linear infinite; }
    .start-story .zaehler .c1 { animation: sz1-c1 64s linear infinite; }
    .start-story .zaehler .c2 { animation: sz1-c2 64s linear infinite; }
    .start-story .zaehler .c3 { animation: sz1-c3 64s linear infinite; }
    .start-story .zaehler .c4 { animation: sz1-c4 64s linear infinite; }
    .start-story .zaehler .c5 { animation: sz1-c5 64s linear infinite; }

@keyframes sz1-r1 { 0%, 0.44% { opacity: 0; background: transparent; } 0.94% { opacity: 1; background: transparent; } 9.07% { opacity: 1; background: transparent; } 9.38% { opacity: 1; background: #d9f2e3; } 12.38% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r2 { 0%, 1.14% { opacity: 0; background: transparent; } 1.64% { opacity: 1; background: transparent; } 10.95% { opacity: 1; background: transparent; } 11.25% { opacity: 1; background: #d9f2e3; } 14.25% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r3 { 0%, 1.84% { opacity: 0; background: transparent; } 2.34% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r4 { 0%, 2.55% { opacity: 0; background: transparent; } 3.05% { opacity: 1; background: transparent; } 12.82% { opacity: 1; background: transparent; } 13.12% { opacity: 1; background: #d9f2e3; } 16.12% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r5 { 0%, 3.25% { opacity: 0; background: transparent; } 3.75% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r6 { 0%, 3.95% { opacity: 0; background: transparent; } 4.45% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r7 { 0%, 4.66% { opacity: 0; background: transparent; } 5.16% { opacity: 1; background: transparent; } 14.70% { opacity: 1; background: transparent; } 15.00% { opacity: 1; background: #d9f2e3; } 18.00% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-r8 { 0%, 5.36% { opacity: 0; background: transparent; } 5.86% { opacity: 1; background: transparent; } 16.57% { opacity: 1; background: transparent; } 16.88% { opacity: 1; background: #d9f2e3; } 19.88% { opacity: 1; background: transparent; } 24.40% { opacity: 1; background: transparent; } 25.00% { opacity: 0; background: transparent; } 100% { opacity: 0; background: transparent; } }
@keyframes sz1-w1-alt { 0%, 9.07% { opacity: 1; } 9.38% { opacity: 0; } 24.40% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-w1-neu { 0%, 9.07% { opacity: 0; } 9.38% { opacity: 1; } 24.40% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-w2-alt { 0%, 10.95% { opacity: 1; } 11.25% { opacity: 0; } 24.40% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-w2-neu { 0%, 10.95% { opacity: 0; } 11.25% { opacity: 1; } 24.40% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-w3-alt { 0%, 12.82% { opacity: 1; } 13.12% { opacity: 0; } 24.40% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-w3-neu { 0%, 12.82% { opacity: 0; } 13.12% { opacity: 1; } 24.40% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-w4-alt { 0%, 14.70% { opacity: 1; } 15.00% { opacity: 0; } 24.40% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-w4-neu { 0%, 14.70% { opacity: 0; } 15.00% { opacity: 1; } 24.40% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-w5-alt { 0%, 16.57% { opacity: 1; } 16.88% { opacity: 0; } 24.40% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-w5-neu { 0%, 16.57% { opacity: 0; } 16.88% { opacity: 1; } 24.40% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m0 { 0%, 0.64% { opacity: 1; } 0.94% { opacity: 0; } 24.80% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-m1 { 0%, 0.64% { opacity: 0; } 0.94% { opacity: 1; } 1.34% { opacity: 1; } 1.64% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m2 { 0%, 1.34% { opacity: 0; } 1.64% { opacity: 1; } 2.04% { opacity: 1; } 2.34% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m3 { 0%, 2.04% { opacity: 0; } 2.34% { opacity: 1; } 2.75% { opacity: 1; } 3.05% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m4 { 0%, 2.75% { opacity: 0; } 3.05% { opacity: 1; } 3.45% { opacity: 1; } 3.75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m5 { 0%, 3.45% { opacity: 0; } 3.75% { opacity: 1; } 4.15% { opacity: 1; } 4.45% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m6 { 0%, 4.15% { opacity: 0; } 4.45% { opacity: 1; } 4.86% { opacity: 1; } 5.16% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m7 { 0%, 4.86% { opacity: 0; } 5.16% { opacity: 1; } 5.56% { opacity: 1; } 5.86% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-m8 { 0%, 5.56% { opacity: 0; } 5.86% { opacity: 1; } 24.80% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-c0 { 0%, 9.07% { opacity: 1; } 9.38% { opacity: 0; } 24.80% { opacity: 0; } 25.00% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sz1-c1 { 0%, 9.07% { opacity: 0; } 9.38% { opacity: 1; } 10.95% { opacity: 1; } 11.25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-c2 { 0%, 10.95% { opacity: 0; } 11.25% { opacity: 1; } 12.82% { opacity: 1; } 13.12% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-c3 { 0%, 12.82% { opacity: 0; } 13.12% { opacity: 1; } 14.70% { opacity: 1; } 15.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-c4 { 0%, 14.70% { opacity: 0; } 15.00% { opacity: 1; } 16.57% { opacity: 1; } 16.88% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sz1-c5 { 0%, 16.57% { opacity: 0; } 16.88% { opacity: 1; } 24.80% { opacity: 1; } 25.00% { opacity: 0; } 100% { opacity: 0; } }

/* Textstufen in den Szenen 2-7 */
/* 18.09.2026 (Johann): Szenen 2-7 luftiger - groessere Abstaende zwischen den Zeilen */
.start-story .sz-titel {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5b6773;
    margin-bottom: 1.4rem;
}

.start-story .sz-titel-gross {
    font-size: 1.35rem;
    letter-spacing: .06em;
    color: #c8102e;
    text-align: center;
    margin-bottom: .8rem;
}

.start-story .sz-gross {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
    color: #1e2a38;
    margin-bottom: 1.2rem;
}

.start-story .sz-text {
    font-size: 1.08rem;
    line-height: 1.5;
    color: #1e2a38;
    margin-bottom: 1.1rem;
}

.start-story .sz-klein {
    font-size: .9rem;
    line-height: 1.5;
    color: #5b6773;
    margin-bottom: 0;
}

.start-story .sz2 .sz-gross,
.start-story .sz2 .sz-klein { text-align: center; }
.start-story .sz2 .sz-gross { font-size: 1.2rem; margin-bottom: 1rem; }

.start-story .sz7 .start-vorschau-fuss { margin-top: 1.4rem; }

/* Szene 2: Stoppschild wie an der Strasse - Inline-SVG in Start.razor (Achteck, weisser Rand);
   18.09.2026 von clip-path auf SVG umgestellt, weil das Schild bei Johann nicht passte. */
.start-story .stop-schild {
    display: block;
    width: 4.6rem;
    height: 4.6rem;
    margin: 0 auto 1.2rem;
}

/* Szene 5: ca. 3,3 s nach Szenenbeginn schlaegt die Karte Alarm - rote Flaeche pulst viermal langsam
   (ca. 1 Hz, bewusst kein Flackern) und bleibt dann stehen bis zum Szenenende. */
.start-story .sz-alarm {
    position: absolute;
    inset: 0;
    padding: 1.25rem 1.5rem;
    background: #c4666c;   /* 18.09.2026 (Johann): sanfteres Rot statt #b02a37 */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 0;
    animation: sz5-alarm 64s linear infinite;
    animation-delay: -24s;
}

    .start-story .sz-alarm-titel {
        font-size: 1.9rem;
        font-weight: 900;
        letter-spacing: .06em;
        line-height: 1.1;
        margin-bottom: 1.1rem;
    }

    .start-story .sz-alarm-text {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: .9rem;
    }

    .start-story .sz-alarm-klein {
        font-size: .9rem;
        opacity: .9;
    }

@keyframes sz5-alarm {
    0%, 4.96%  { opacity: 0; }
    5.16%      { opacity: 1; }
    6.09%      { opacity: .15; }
    7.03%      { opacity: 1; }
    7.97%      { opacity: .15; }
    8.91%     { opacity: 1; }
    11.56%     { opacity: 1; }
    12.50%    { opacity: 0; }
    100%      { opacity: 0; }
}

/* Hinweis in jeder Szene ueber der Punktreihe (18.09.2026, Johann); nur wo es eine Maus gibt,
   auf Touch-Geraeten und bei reduced-motion weg */
.start-vorschau-hinweis {
    display: none;
    margin: 1rem 0 0;
    text-align: center;
    font-size: .78rem;
    color: #8a96a3;
}

@media (hover: hover) and (pointer: fine) {
    .start-vorschau-hinweis { display: block; }
    .start-story .sz-punkte { margin-top: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .start-vorschau-hinweis { display: none; }
}

/* Wer Bewegung abgeschaltet hat (Windows: "Animationen anzeigen" aus), sieht nur Szene 1, unbewegt,
   im Endstand: alle acht Zeilen, fuenf bestanden, Zaehler 8 und 5 */
@media (prefers-reduced-motion: reduce) {
    .start-story .sz, .start-story .sz *, .start-story .sz-alarm {
        animation: none !important;
    }
    .start-story .sz:not(.sz1) { display: none; }
    .start-story .start-vorschau-liste tr { opacity: 1; }
    .start-story .wechsel .alt { opacity: 0; }
    .start-story .wechsel .neu { opacity: 1; }
    .start-story .zaehler .m8, .start-story .zaehler .c5 { opacity: 1; }
}

/* Drei Zielgruppen */
.start-drei {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1rem 0 3rem;
}

.start-karte {
    background: #fff;
    border: 1px solid #e3eaf0;
    border-radius: .8rem;
    padding: 1.6rem 1.6rem 1.2rem;
    box-shadow: 0 .4rem 1.2rem rgba(30, 42, 56, .06);
}

    .start-karte p { margin-bottom: 0; }

    /* 17.09.2026: Leitsatz sichtbar, Rest hinter "Weiterlesen" (details/summary) */
    .start-karte-lead { font-weight: 600; color: #1F3B4D; }
    .start-karte-mehr { margin-top: .6rem; }
    .start-karte-mehr summary { cursor: pointer; color: #0d6efd; font-size: .95rem; }
    .start-karte-mehr summary:hover { text-decoration: underline; }
    .start-karte-mehr p { margin-top: .6rem; }

.start-karte-icon {
    font-size: 1.8rem;
    margin-bottom: .5rem;
}

/* Vier Schritte */
.start-ablauf {
    margin-bottom: 3rem;
}

.start-schritte {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.start-schritt {
    background: #f8fafc;
    border: 1px solid #e3eaf0;
    border-radius: .8rem;
    padding: 1.2rem 1.3rem;
}

    .start-schritt p { margin-bottom: 0; font-size: .98rem; }

.start-nr {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #2f6fd6;
    color: #fff;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

/* Die Frage */
.start-frage {
    background: #f3f7fd;
    border-left: 5px solid #2f6fd6;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 3rem;
}

.start-frage-label {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #2f6fd6;
    font-weight: 600;
    margin-bottom: .3rem;
}

.start-frage-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e2a38;
    margin-bottom: .4rem;
}

.start-frage-wer {
    font-size: .9rem;
    color: #5b6773;
}

/* Einordnung + Preise */
.start-zwei {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.start-ehrlich, .start-preise {
    background: #f8fafc;
    border: 1px solid #e3eaf0;
    border-radius: .8rem;
    padding: 1.5rem 1.7rem;
}

    .start-ehrlich p { margin-bottom: 0; }

.start-preistabelle td {
    padding: .3rem .8rem .3rem 0;
    vertical-align: baseline;
}

.start-preis {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2f6fd6;
    white-space: nowrap;
}

/* Kontakt */
.start-kontakt {
    padding-top: 2rem;
    border-top: 1px solid #dfe8f0;
}

/* 16.09.2026: "Jetzt anfangen" laeuft ueber die volle Breite statt der 42rem, die .start p sonst
   allen Absaetzen gibt - als schmale Spalte unter den breiten Kaesten wirkte es unruhig (Johann). */
.start-kontakt p {
    max-width: none;
}

@media (max-width: 991px) {
    .start-hero, .start-drei, .start-schritte, .start-zwei {
        grid-template-columns: 1fr;
    }
    .start h1 { font-size: 2rem; }
    .start-vorschau { transform: none; margin-right: 0; }
}

/* Impressum, Datenschutz */
.rechtlich {
    max-width: 62rem;
    margin: 0 auto;
    line-height: 1.55;
    color: #3a4650;
}

    .rechtlich h5 {
        margin-top: 1.5rem;
        color: #1e2a38;
    }

/* DTS-Logo statt des Textes "DTS Bayern" (Johann, 10.09.2026): klein in Fusszeilen, gross auf
   Impressum und Landingpage. Dateien: wwwroot/logo/dts_kompakt.png, dts_voll.png */
.dts-logo-klein {
    height: 20px;
    width: auto;
    vertical-align: -4px;
    margin-left: 4px;
}

.dts-logo {
    height: 120px;
    width: auto;
    max-width: 100%;
}

/* Pruefung Teil A (Pruefung.razor): eine Frage pro Bildschirm, grosse Klickflaechen, Uhr rechts */
.pruefung-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pruefung-uhr {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1e2a38;
    background: #f3f7fd;
    border: 1px solid #dfe8f0;
    border-radius: .5rem;
    padding: .3rem .9rem;
}

.pruefung-uhr-knapp {
    color: #b02a37;
    background: #fdf3f4;
    border-color: #f1c2c7;
}

.pruefung-frage {
    max-width: 62rem;
}

.pruefung-fragetext {
    font-size: 1.15rem;
    line-height: 1.5;
    color: #1e2a38;
    margin-bottom: 1rem;
}

.pruefung-optionen {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pruefung-option {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid #cfd8e0;
    border-radius: .5rem;
    font-size: 1rem;
    line-height: 1.45;
    color: #1e2a38;
    cursor: pointer;
}

    .pruefung-option:hover {
        border-color: #2f6fd6;
        background: #f7faff;
    }

    .pruefung-option.gewaehlt {
        border-color: #2f6fd6;
        background: #eaf2fd;
        box-shadow: inset 4px 0 0 #2f6fd6;
    }

.pruefung-option-mark {
    flex: 0 0 auto;
    color: #2f6fd6;
    font-size: 1.1rem;
}

.pruefung-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 62rem;
}

.pruefung-punkte {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    flex: 1 1 auto;
}

.pruefung-punkt {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid #cfd8e0;
    background: #fff;
    color: #6c757d;
    font-size: .8rem;
    cursor: pointer;
}

    .pruefung-punkt.beantwortet {
        background: #e6f4ea;
        border-color: #7cc48f;
        color: #1e5631;
    }

    .pruefung-punkt:not(.beantwortet) {
        background: #fff4e5;
        border-color: #f0b86e;
        color: #8a5a00;
    }

    .pruefung-punkt.aktiv {
        outline: 2px solid #2f6fd6;
        outline-offset: 1px;
    }



/* ---- Pruefung Teil B (Komponente TeilB) ---- */
.teilb-block {
    border: 1px solid #d9e2e8;
    border-radius: .5rem;
    padding: .8rem 1rem;
    margin-bottom: .8rem;
    background: #fff;
}

.teilb-material { background: #fbfcfd; }
.teilb-auftrag { border-left: 4px solid #2f6fd6; }
.teilb-prompt { background: #f5f7fa; }
.teilb-ausgabe { background: #fffdf5; border-color: #ecdfb0; }

.teilb-titel {
    font-weight: 600;
    color: #1f3a48;
    margin-bottom: .3rem;
}

.teilb-text { line-height: 1.5; }

.teilb-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    margin: 0;
}

.teilb-schritt {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e2a38;
    margin-bottom: .6rem;
}

.teilb-eingabe { font-size: 1rem; line-height: 1.5; }

.teilb-grenze {
    border: 1px dashed #b7c7d3;
    border-radius: .5rem;
    padding: 1rem;
    background: #f7fafc;
}

.teilb-grenze-link { font-size: .95rem; }
.teilb-warten { max-width: 62rem; }
.teilb-details summary { cursor: pointer; font-weight: 600; }

.teilb-hinweis {
    color: #3a4a58;
    line-height: 1.5;
    margin-bottom: .6rem;
}

.teilb-stand {
    margin: .5rem 0 1.25rem;
}

.teilb-stand-zeile {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .5rem 0;
    border-bottom: 1px solid #eef2f6;
}

    .teilb-stand-zeile.fertig { color: #6c757d; }
    .teilb-stand-zeile.fertig .start-nr { background: #1d7d45; }

/* Betroffenheits-Check (/betroffenheit): einfache Ja/Nein-Fragen, Ergebnis clientseitig */
.check-frage {
    margin-bottom: 1.1rem;
}

.check-antworten {
    display: flex;
    gap: 1.5rem;
}

    .check-antworten label {
        cursor: pointer;
    }

.check-ergebnis {
    margin-top: 1.5rem;
    padding: 1.1rem 1.4rem;
    background: #f3f7fd;
    border-left: 4px solid #2f6fd6;
    border-radius: .3rem;
}

/* Kurze Vorteile-Liste auf /jetzt-starten, gleiches Haekchen-Muster wie .start-vorteile */
.check-vorteile {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}

    .check-vorteile li {
        padding-left: 1.7rem;
        position: relative;
        margin-bottom: .35rem;
    }

        .check-vorteile li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #2f6fd6;
            font-weight: 700;
        }

/* ---------------------------------------------------------------------------
   Einspruchsseite (/einsprueche), neu aufgebaut 14.09.2026.
   Drei nummerierte Schritte statt sieben gleich aussehender Kaesten: Der Blick
   soll von oben nach unten laufen und an jeder Stelle wissen, was zu tun ist.
   Deshalb bekommt jeder Schritt eine Nummer, die Begruendung des Mitarbeiters
   ein Zitat-Format und die Auswirkung der Entscheidung einen eigenen Balken.
   --------------------------------------------------------------------------- */

.eins-schritt {
    border-top: 1px solid #e3eaf0;
    padding: 1.1rem 0 .2rem;
}

.eins-schritt-kopf {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e2a38;
    margin-bottom: .4rem;
}

.eins-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #2f6fd6;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    flex: 0 0 auto;
}

/* Warum-Text je Schritt. Bewusst am Schritt und nicht nur im Seitenkopf: Wer
   mitten auf der Seite steht, liest den Seitenkopf nicht noch einmal. */
.eins-hinweis {
    color: #5b6773;
    font-size: .92rem;
    line-height: 1.5;
    margin-bottom: .7rem;
    max-width: 70rem;
}

/* Der Einspruchstext selbst - das Wichtigste auf der Seite. */
.eins-zitat {
    border-left: 4px solid #2f6fd6;
    background: #f4f8fd;
    padding: .9rem 1.1rem;
    margin: 0 0 .8rem;
    font-size: 1.02rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.eins-fakten {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    font-size: .92rem;
    color: #3a4a58;
}

/* Ablauf in Schritt 2: senkrechte Linie, damit die Reihenfolge sichtbar ist. */
.eins-ablauf {
    border-left: 2px solid #e3eaf0;
    padding-left: 1rem;
}

.eins-stufe { margin-bottom: 1rem; }

.eins-stufe-titel {
    font-weight: 600;
    color: #1e2a38;
    margin-bottom: .3rem;
}

.eins-klein summary {
    cursor: pointer;
    font-size: .9rem;
    color: #2f6fd6;
}

/* Ein Bereich in Schritt 3: vergebene Punkte, Rasterzeile, KI-Begruendung und
   die neue Punktzahl gehoeren zusammen in einen Block. */
.eins-bereich {
    border: 1px solid #e3eaf0;
    border-radius: .5rem;
    padding: .8rem 1rem;
    margin-bottom: .8rem;
    background: #fff;
}

.eins-bereich-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.2rem;
    margin-bottom: .5rem;
}

.eins-bereich-name { font-weight: 600; color: #1e2a38; }
.eins-bereich-punkte { color: #5b6773; font-size: .92rem; }
.eins-bereich-neu { margin-left: auto; font-size: .92rem; }

.eins-raster {
    background: #f7fafc;
    border-radius: .4rem;
    padding: .6rem .8rem;
    font-size: .92rem;
    line-height: 1.5;
}

.eins-ki {
    font-size: .88rem;
    color: #3a4a58;
    line-height: 1.5;
    margin-top: .5rem;
}

/* Was die Entscheidung bewirkt - die Frage, um die es dem Mitarbeiter geht. */
.eins-auswirkung {
    border: 1px solid #e3c58a;
    background: #fdf8ec;
    border-radius: .5rem;
    padding: .8rem 1rem;
    font-size: .95rem;
    line-height: 1.5;
}

.eins-auswirkung-gut {
    border-color: #9bcfa8;
    background: #f1f9f3;
}

.eins-entschieden {
    border: 1px solid #e3eaf0;
    border-radius: .5rem;
    padding: .8rem 1rem;
    background: #f7fafc;
}