@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-style: normal;
    src: url('/FrameworkResources/fonts/Roboto-regular/Roboto-regular.woff2') format('woff2'), url('/FrameworkResources/fonts/Roboto-regular/Roboto-regular.woff') format('woff'), url('/FrameworkResources/fonts/Roboto-regular/Roboto-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/FrameworkResources/fonts/Material-Icons/MaterialIcons-Regular.woff2') format('woff2'), url('/FrameworkResources/fonts/Material-Icons/MaterialIcons-Regular.woff') format('woff'), url('/FrameworkResources/fonts/Material-Icons/MaterialIcons-Regular.ttf') format('truetype');
}

:root {
    --ke-green: #43A047;
    --ke-green-dark: #357a38;
    --ke-green-light: #66BB6A;
    --ke-ink: #16191d;
    --ke-text: #58616b;
    --ke-muted: #939ba4;
    --ke-line: #e5e9ed;
    --ke-field: #f7f9fa;
    --ke-card: #ffffff;
    --ke-err: #d64545;
    --ke-radius: 16px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
    color: var(--ke-text);
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    margin: 0;
    min-height: 100vh;
    /* weiss wie die umgebende Website - die Seite laeuft im iframe */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

/* Login-Formular: Body ist Flex-Container, daher kein absolutes Zentrieren mehr.
   Auf weissem Grund keine Karte mehr - kein Rahmen, kein Schatten, damit die
   Seite nahtlos in die umgebende Website uebergeht. */
div.center {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    width: 100%;
    max-width: 360px;
    height: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 0 0;
    text-align: left;
    animation: ke-rise .45s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ke-rise {
    from { opacity: 0; transform: translateY(10px) scale(.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

table {
    font-size: 14px;
    color: var(--ke-text);
    width: 100%;
    border-collapse: collapse;
}

/* Tabellenlayout aufloesen: Label und Feld stehen im HTML nebeneinander,
   sollen aber untereinander stehen -> Zellen als Bloecke rendern. */
table, table tbody, table tr, table td { display: block; width: 100% !important; }

/* Label-Zellen (im HTML per inline-style rechtsbuendig) */
table td[style*="text-align:right"] {
    text-align: left !important;
    padding: 0 0 7px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    color: var(--ke-ink);
    white-space: nowrap;
}
/* Abstand zwischen den Feldgruppen */
table td[style*="text-align:right"] { padding-top: 18px; }

/* Logo */
table td[align="center"] { text-align: center !important; }
table td[align="center"] img {
    width: auto !important;
    max-width: 190px;
    height: auto;
    padding-bottom: 8px !important;
}

td input {
    border: 1px solid #dbe1e6;
    border-radius: 10px;
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    background: var(--ke-field);
    text-align: left;
    color: var(--ke-ink);
    font-family: inherit;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

td input::placeholder { color: var(--ke-muted); }

td input:hover { border-color: #d3dade; }

input:focus {
    outline: none;
    border: 1px solid var(--ke-green) !important;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(67, 160, 71, .16);
}

/* Anmelden-Button */
.ke-btn {
    display: block;
    width: 100%;
    margin: 26px 0 2px;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--ke-green);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background-color .15s ease, transform .06s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px -6px rgba(67,160,71,.5);
}
.ke-btn:hover {
    background: var(--ke-green-dark);
    box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 10px 22px -6px rgba(67,160,71,.6);
}
.ke-btn:active { transform: translateY(1px); }
.ke-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(67,160,71,.4); }

/* Meldung (info) - nur sichtbar, wenn Text vorhanden ist */
.ke-info { display: none; }
.ke-info:not(:empty) {
    display: block;
    margin-top: 18px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(214, 69, 69, .22);
    background: rgba(214, 69, 69, .07);
    color: var(--ke-err);
    font-size: 13px;
    font-weight: 400 !important;
    text-align: left !important;
    line-height: 1.45;
}

/* Zelle der Meldung soll ohne Text keinen Platz belegen */
td:has(> .ke-info:empty) { display: none !important; }

.copyright {
    padding-top: 24px !important;
    margin-top: 22px;
    border-top: 1px solid var(--ke-line);
    color: var(--ke-muted);
    font-size: 11px;
    line-height: 1.7;
    text-align: center !important;
}

a:link, a:active, a:visited {
    text-decoration: none;
    color: var(--ke-text);
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
a:hover { color: var(--ke-green); border-bottom-color: var(--ke-green); }

/* Autofill nicht blau einfaerben */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--ke-field) inset;
    -webkit-text-fill-color: var(--ke-ink);
    caret-color: var(--ke-ink);
}

/* 1x1-Pixel Default-Submit (df1) darf kein Layout erzeugen */
#df1 { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
    body { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    div.center { animation: none; }
    * { transition: none !important; }
}