/* Anmeldedienst — im Vorgo-Brand (Eigentümer, 25.10.2026): Farben, Schrift und Zeichen aus
   Vorgo ERP, siehe ..\..\marken\README.md und die Zeichenfläche „Vorgo Brand". Hell wie das ERP;
   keine fremden Schriften, Figtree liegt unter /schrift/. */
@font-face {
  font-family: "Figtree";
  src: url("/schrift/figtree.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
:root {
  --aktion: #00a369; --aktion-dunkel: #007a4f; --aktion-tief: #005c3b;
  --betont: #57709c; --betont-tief: #3f5478; --betont-hell: #e6ebf3;
  --schrift: #212529; --leise: #6c757d; --leise-2: #565e66;
  --leiste: #0b0b0b; --leiste-nav: #343434; --leiste-schrift: #f1f1f1;
  --grund: #f2f6f6; --flaeche: #ffffff; --rand: #dfe4e4; --feldrand: #949f9f;
  --fehler: #b02a37; --fehler-hell: #fbeaec; --gut-hell: #dcf3ea;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--schrift); font: 14px/1.5 "Figtree", Arial, sans-serif; }
a { color: var(--aktion-dunkel); }
a:hover { color: var(--aktion-tief); }
code { font-family: var(--mono); font-size: .92em; }

/* Kopfleiste wie im ERP (Eigentümer, 25.10.2026: „schwarze Leiste, Icons und Bilder gleiche
   Größe wie beim vorgo-erp"; Maße aus ..\..\..\ERP\web\stil.css): 51 px hoch, 20 px Rand,
   volle Breite, oben haftend. Zeichen 32 px, Schriftzug Figtree 800 in 31,5 px, Symbolknöpfe
   32 × 32 mit 18-px-Symbol in rgb(222,222,222), beim Überfahren #343434. */
.leiste { background: var(--leiste); color: var(--leiste-schrift); position: sticky; top: 0; z-index: 30; }
.leiste-innen { height: 51px; padding: 0 20px; display: flex; align-items: center; gap: 24px; }
.marke { display: flex; align-items: center; gap: 8px; color: #ffffff; text-decoration: none; font-size: 31.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.marke:hover { color: #ffffff; }
.marke img { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.leiste nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.leiste nav a { color: rgb(222, 222, 222); text-decoration: none; font-size: 15px; padding: 0 10px; height: 32px; display: flex; align-items: center; border-radius: 4px; white-space: nowrap; }
.leiste nav a:hover { color: #ffffff; background: var(--leiste-nav); }
.ich { display: flex; align-items: center; gap: 10px; margin-left: auto; color: rgb(222, 222, 222); font-size: 14px; white-space: nowrap; }
.knopf-abmelden { width: 32px; height: 32px; border-radius: 4px; color: rgb(222, 222, 222); display: inline-flex; align-items: center; justify-content: center; }
.knopf-abmelden svg { width: 18px; height: 18px; }
.knopf-abmelden:hover { color: #ffffff; background: var(--leiste-nav); }

/* Inhalt über die ganze Breite (Eigentümer, 25.10.2026) */
main.inhalt { padding: 2rem 20px 4rem; }
h1 { font-size: 2.125rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 1.25rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .6rem; }
h2.abschnitt, .abschnitt { font-size: .94rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--betont); margin: 0 0 .9rem; }
.unterzeile { margin: -.75rem 0 2.25rem; font-size: 1rem; color: var(--leise-2); }
.gruppe { margin-bottom: 2.25rem; }

/* Formulare */
form.schmal { display: grid; gap: .9rem; max-width: 28rem; }
form.zeile { display: inline-block; margin: 0 .5rem .5rem 0; }
label { display: grid; gap: .35rem; color: var(--leise); font-size: 1rem; }
label.haken { display: flex; gap: .5rem; align-items: center; color: var(--schrift); }
input, select { font: inherit; font-size: 1rem; min-height: 3rem; padding: 0 .75rem; border: 1px solid var(--feldrand); border-radius: 4px; background: var(--flaeche); color: var(--schrift); }
input[type="checkbox"] { min-height: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--aktion); }
input:focus, select:focus { outline: 2px solid var(--aktion); outline-offset: 1px; border-color: var(--aktion); }
button { font: inherit; font-size: 1.05rem; font-weight: 600; min-height: 3rem; padding: 0 1.25rem; border: 0; border-radius: 4px; background: var(--aktion); color: #ffffff; cursor: pointer; justify-self: start; }
button:hover { background: var(--aktion-dunkel); }
button:focus-visible { outline: 2px solid var(--aktion-tief); outline-offset: 2px; }
button.klein { min-height: 2.25rem; padding: 0 .75rem; font-size: .9rem; }

.meldung { padding: .7rem .9rem; border-radius: 4px; background: var(--fehler-hell); color: var(--fehler); border: 1px solid #f1c2c8; }
.meldung.gut { background: var(--gut-hell); color: var(--aktion-tief); border-color: #b5e4d1; }
.klein { color: var(--leise); font-size: .93rem; }
.geheim code { display: block; padding: .8rem; background: var(--flaeche); border: 1px dashed var(--feldrand); border-radius: 4px; overflow-wrap: anywhere; }

/* Tabellen (Verwaltung, Protokoll) */
/* Die Hülle scrollt, die Tabelle selbst bleibt eine Tabelle und füllt die Breite. Vorher stand
   display:block an der Tabelle — dann nimmt sie nur so viel Platz wie ihr Inhalt. */
.tabelle { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { background: var(--grund); font-weight: 600; color: var(--leise-2); }
tr.aus td { color: var(--leise); text-decoration: line-through; }

/* Anwendungen (Entwurf „Anwendung: Portal") */
ul.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
ul.kacheln a { display: flex; align-items: center; gap: .9rem; padding: 1rem; min-height: 4.75rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px; text-decoration: none; color: var(--schrift); }
ul.kacheln a:hover { border-color: var(--aktion); box-shadow: 0 2px 8px rgba(33, 37, 41, .06); }
ul.kacheln img { flex: none; display: block; }
.kachel-text { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; flex-grow: 1; min-width: 0; }
.kachel-text strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.kachel-text .abzeichen { margin-top: .3rem; }
.kachel-text .klein { font-size: .8rem; }
/* Stufen wie im Portal-Entwurf: PROD grün, TEST orange */
.abzeichen.stufe-prod { background: var(--gut-hell); color: var(--aktion-tief); }
.abzeichen.stufe-test { background: #fdf0e1; color: #8a3f05; }
.kachel-text code { font-size: .78rem; color: var(--leise); }
.abzeichen { font-family: var(--mono); font-size: .75rem; padding: .2rem .45rem; border-radius: 4px; background: var(--betont-hell); color: var(--betont-tief); white-space: nowrap; }

/* Anmeldung als Karte in der Mitte (Entwurf „Anwendung: Anmeldung") */
main.mitte { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.75rem; padding: 3rem 1rem; }
.wortmarke { display: flex; align-items: center; gap: 1.1rem; font-size: 3rem; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.wortmarke img { display: block; }
.karte { width: 100%; max-width: 33.75rem; padding: 2.25rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px; box-shadow: 0 2px 8px rgba(33, 37, 41, .06); }
.karte h1 { margin: 0 0 1.4rem; font-size: 1.625rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--betont); }
.karte form { display: grid; gap: 1.1rem; }
.karte button { justify-self: stretch; margin-top: .6rem; min-height: 3.125rem; font-size: 1.2rem; }
.karte > .klein { margin: 1.25rem 0 0; }
.karte .meldung { margin-top: 0; }

ol.schritte li { margin-bottom: 1.5rem; }
.qr svg { display: block; margin: .75rem 0; max-width: 100%; height: auto; }
:target { scroll-margin-top: 1rem; }

@media (max-width: 60rem) {
  .marke { font-size: 22px; }
  .ich > span { display: none; }
}
@media (max-width: 40rem) {
  .wortmarke { font-size: 2.25rem; }
  .wortmarke img { width: 44px; height: 44px; }
  .karte { padding: 1.5rem; }
  h1 { font-size: 1.75rem; }
}