/* Anmeldeseite Admin-Portal (A-2) -- Kopie aus lohnManagerWeb, Werte 1:1.
   .news traegt hier den Changelog (A-47, unten); die .themen-Regeln sind ungenutzt, bleiben aber fuer den Abgleich stehen.
   Urspruenglich: Anmeldeseite LohnManager Online, Entwurf vom 23.08.2026, Aenderung AE-92.
   Diese Datei gilt NUR fuer Login.cshtml und steht bewusst allein --
   vendors.min.css und styles.min.css sind dort nicht mehr eingebunden. */

* { box-sizing: border-box }

:root {
    --navy: #06154F;
    --teal: #1DC8C8;
    --teal-dk: #0a8a8a;
    --teal-soft: #eaf7f7;
    --teal-rand: #bfe6e6;
    --ink: #1d2433;
    --t2: #5a6478;
    --t3: #8a94a6;
    --line: #e9edf3;
    --bg2: #f6f8fb;
}

html { -webkit-text-size-adjust: 100% }

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    line-height: 1.55;
    min-height: 100vh;
    min-height: 100svh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

a { color: inherit }
img.logo { display: block; height: auto }
:focus-visible { outline: 2px solid var(--teal-dk); outline-offset: 2px }

/* ---- Aufbau: Anmeldung oben rechts, Themen Mitte links, Logo unten links ---- */

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 26px 22px 20px;
}

.pos {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box { width: 100%; max-width: 336px }
.top img { width: 118px; height: auto; display: block }

@media (min-width: 1000px) {
    main {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr auto;
        column-gap: 9%;
        padding: 44px 7% 34px;
        align-items: start;
    }

    .pos {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-content: flex-end;
        align-items: flex-start;
        flex: none;
    }

    .box { max-width: 348px; zoom: .75 }

    .news {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        max-width: 452px;
        margin: 0;
    }

    .top { grid-column: 1; grid-row: 3; align-self: end; margin-top: 0 }
    .top img { width: 150px }
}

/* Am Touchgeraet bleibt der Anmeldeblock in voller Groesse -- sonst liegen
   Felder und Knopf unter der Daumengrenze und die Eingabeschrift unter 16 px. */
@media (min-width: 1000px) and (pointer: coarse) {
    .box { zoom: 1 }
}

/* ---- Anmeldeblock ---- */

h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1.2;
}

.sub { margin: 6px 0 0; font-size: 14.5px; color: var(--t2) }

form { margin-top: 22px }

.f { margin-bottom: 14px }

label.fl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.ctl {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
    height: 50px;
    transition: border-color .12s, box-shadow .12s;
}

.ctl:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(29,200,200,.16);
}

.ctl input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 16px; /* darunter zoomt iOS-Safari beim Antippen hinein */
    color: var(--navy);
    padding: 0;
}

.ctl input::placeholder { color: #b6bfcc }

.eye {
    background: none;
    border: none;
    padding: 6px 2px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    white-space: nowrap;
}

.eye:hover { color: var(--teal-dk) }

.btn {
    width: 100%;
    height: 50px;
    margin-top: 8px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    background: var(--teal);
    color: var(--navy);
    transition: background .12s;
}

.btn:hover { background: #14b6b6 }
.btn[disabled] { opacity: .65; cursor: default }

/* Meldung bei fehlgeschlagener Anmeldung (Model.Info) */
.meldung {
    margin: 16px 0 0;
    padding: 2px 0 2px 12px;
    border-left: 3px solid #d64545;
    font-size: 13.5px;
    line-height: 1.5;
    color: #b3372e;
}

.dshinweis { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--t2) }
.dshinweis a { color: var(--teal-dk); text-decoration: none }
.dshinweis a:hover { text-decoration: underline }

/* ---- Themenbereich links ---- */

.news { margin-top: 32px }

.news .kick {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-dk);
}

.news .kick::after { content: ''; flex: 1; height: 1px; background: var(--line) }

.news ul { list-style: none; margin: 14px 0 0; padding: 0 }

.news li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.news li:last-child { border-bottom: none }

/* Datums-Pille -- nur noetig, falls der Bereich spaeter datierte Meldungen zeigt */
.news .d {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--teal-dk);
    background: var(--teal-soft);
    border-radius: 6px;
    padding: 5px 9px;
    white-space: nowrap;
    align-self: start;
}

.news b { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.35 }
.news span { display: block; font-size: 13px; color: var(--t2); line-height: 1.5; margin-top: 3px }

.themen li { grid-template-columns: auto 1fr; gap: 13px; align-items: start; padding: 15px 0 }
.themen .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--teal); margin-top: 7px; flex: none }
.themen li b { display: block; font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3 }
.themen li span:not(.mk) { display: block; font-size: 14px; line-height: 1.55; color: var(--t2); margin-top: 3px }

@media (min-width: 1000px) {
    .themen li b { font-size: 15.5px }
    .themen li span:not(.mk) { font-size: 14.5px; line-height: 1.6 }
}

/* ---- Fusszeile ---- */

footer {
    border-top: 1px solid var(--line);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}

.fin {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12.5px;
    color: var(--t3);
    max-width: 400px;
}

.fin a { text-decoration: none; font-weight: 600 }
.fin .c { margin-left: auto }

/* ---- Anhang je Eintrag (Ä-159) ----
   Zwei Formen, die sich bewusst auch in der Position unterscheiden:
   Der Textlink gehört zum Fließtext und steht links darunter, der
   Video-Badge ist ein Anhängsel am rechten Rand des Eintrags.
   Werte aus dem Entwurf von lohn.Consult, Nachtrag 2 vom 04.09.2026. */

/* Textlink -- video: false */
.themen .anhang {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--teal-dk);
    text-decoration: none;
}

.themen .anhang::after { content: ' \2192' }
.themen .anhang:hover { text-decoration: underline }

/* Video-Badge -- video: true. Die Umhüllung besorgt die rechte Ausrichtung. */
.themen .vz { text-align: right; margin-top: 8px }

.themen .vbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--navy);
    background: var(--teal-soft);
    border: 1px solid var(--teal-rand);
    border-radius: 999px;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}

.themen .vbadge:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.themen .vbadge .kreis {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--teal);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.themen .vbadge:hover .kreis { background: #fff }

/* Dreieck mit CSS gezeichnet statt als Zeichen ▶ (U+25B6): Das Zeichen wird auf
   manchen Systemen als farbiges Emoji gesetzt, das Dreieck sieht überall gleich aus. */
.themen .vbadge .kreis::before {
    content: '';
    width: 0;
    height: 0;
    margin-left: 1px;
    border-left: 4px solid #fff;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.themen .vbadge:hover .kreis::before { border-left-color: var(--teal-dk) }

/* ---- Letzte Änderungen als Zeitstrahl (A-47) ----
   Punkte wie auf der Changelog-Seite (A-32). Die Linie wächst von oben,
   jeder Eintrag erscheint, wenn sie ihn erreicht (--i aus dem Markup). */
.cl-strahl { position: relative; list-style: none; margin: 18px 0 0; padding: 0 }
.cl-strahl::before {
    content: ''; position: absolute; left: 4px; top: 6px; bottom: 4px; width: 2px;
    background: #e3e9f2; transform-origin: top; animation: cl-linie 1.2s linear both;
}
.news .cl-strahl li {
    position: relative; grid-template-columns: 10px 1fr; gap: 16px;
    padding: 0 0 20px; border-bottom: none;
    animation: cl-eintrag .45s ease-out both; animation-delay: calc(.1s + var(--i, 0) * .38s);
}
.news .cl-strahl li:last-child { padding-bottom: 0 }
.cl-strahl .cl-punkt {
    width: 10px; height: 10px; margin-top: 5px; border-radius: 50%;
    background: #fff; border: 2px solid var(--teal); position: relative; z-index: 1;
}
.cl-strahl li:first-child .cl-punkt { background: var(--teal) }
.cl-strahl li b { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; font-variant-numeric: tabular-nums }
.cl-strahl li span:not(.cl-punkt) { display: block; font-size: 14px; line-height: 1.55; color: var(--t2); margin-top: 4px }

@media (min-width: 1000px) {
    .cl-strahl li b { font-size: 15.5px }
    .cl-strahl li span:not(.cl-punkt) { font-size: 14.5px; line-height: 1.6 }
}

@keyframes cl-linie { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes cl-eintrag { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
    .cl-strahl::before, .news .cl-strahl li { animation: none }
}