/* Vector Aero Teilnehmerportal — Oberflaeche wie VAMS.
   Alle Werte kommen aus _tokens.css, damit beide Programme gleich aussehen. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--t-schrift); background: var(--t-seite); color: var(--t-navy);
  font-size: var(--t-gr-text); line-height: 1.45; min-height: 100vh;
}
a { color: var(--t-blau); }

.kopf {
  background: var(--t-weiss); border-bottom: 1px solid var(--t-rand);
  display: flex; align-items: center; gap: 14px; padding: 10px 26px 12px;
  position: relative;
}
.kopf .marke-wort-link { display: block; line-height: 0; }
.kopf .marke-wort { height: 42px; width: auto; display: block; }
.kopf .wer { margin-left: auto; text-align: right; line-height: 1.25; }
.kopf .wer b { display: block; font-size: var(--t-gr-text); font-weight: var(--t-fett-halb); }
.kopf .wer span { font-size: 13px; color: var(--t-text-zweit); }
.kopf .abmelden {
  margin-left: 16px; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 9px;
  background: var(--t-seite); color: var(--t-icon); text-decoration: none;
  font-size: 14px; font-weight: var(--t-fett-mittel); white-space: nowrap;
}
.kopf .abmelden svg { width: 19px; height: 19px; }
.kopf .abmelden:hover { background: var(--t-blau); color: var(--t-weiss); }
/* Farbband ueber die ganze Hoehe des Kopfes. Es beginnt dort, wo die
   Wortmarke endet, und laeuft bis zum rechten Rand (AM, 28.10.2026):
   grau, dunkelblau, hellblau. Name und Knopf stehen auf dem hellblauen Teil,
   darum dort weisse Schrift. Der senkrechte Streifen ist entfallen. */
.kopf { padding-bottom: 12px; }
.kopf::after {
  content: ""; position: absolute; left: var(--band-start, 430px); right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg,
    var(--t-marke-grau) 0%, var(--t-marke-grau) 20%,
    var(--t-blau) 20%, var(--t-blau) 55%,
    var(--t-navy) 55%, var(--t-navy) 100%);
  z-index: 0;
}
.kopf > * { position: relative; z-index: 1; }
.kopf .wer b { color: var(--t-weiss); }
.kopf .wer span { color: rgba(255, 255, 255, .85); }
/* Zweitrangiges Mittel: nur Rand, beim Zeigen gefuellt (AM, 28.10.2026) */
.kopf .abmelden {
  background: none; color: var(--t-blau);
  border: 1.5px solid var(--t-blau);
}
.kopf .abmelden:hover { background: var(--t-blau); color: var(--t-weiss); }

main { position: relative; padding: 26px; max-width: 1180px; margin: 0 auto; }
main::before {
  content: ""; position: absolute; top: 0; right: 0; width: min(1400px, 100%); height: 300px;
  background: url("../img/hero_triebwerk.webp") no-repeat right top;
  background-size: 1400px 300px; pointer-events: none; z-index: 0;
}
.seite-kopf, .karte, .hinweis { position: relative; z-index: 2; }

h1 {
  font-size: var(--t-gr-titel); font-weight: var(--t-fett-halb);
  letter-spacing: -1px; line-height: 1.12;
}
h1::after {
  content: ""; display: block; width: 78px; height: 4px; border-radius: 2px;
  background: var(--t-blau); margin: 10px 0 12px;
}
h2 { font-size: var(--t-gr-abschnitt); font-weight: var(--t-fett-halb); }
.unter { color: var(--t-text-zweit); max-width: 760px; margin-bottom: 20px; }

.karte {
  background: var(--t-weiss); border: 1px solid var(--t-rand);
  border-radius: var(--t-radius-karte); box-shadow: 0 1px 3px rgba(10, 27, 68, .06);
  margin-bottom: 18px; overflow: hidden;
}
.karte-kopf {
  padding: 18px 24px; border-bottom: 1px solid var(--t-rand);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.karte-rumpf { padding: 18px 24px; }

.bloecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.block {
  display: block; text-decoration: none; color: inherit; background: var(--t-weiss);
  border: 1px solid var(--t-rand); border-radius: var(--t-radius-karte);
  padding: 26px; transition: box-shadow var(--t-uebergang), transform var(--t-uebergang);
  position: relative; z-index: 2;
}
.block:hover { box-shadow: 0 8px 24px rgba(10, 27, 68, .12); transform: translateY(-2px); }
.block .zeichen {
  width: 52px; height: 52px; border-radius: 14px; background: var(--t-blau);
  color: var(--t-weiss); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.block .zeichen svg { width: 26px; height: 26px; }
.block h2 { margin-bottom: 6px; }
.block p { color: var(--t-text-zweit); font-size: 15px; }
.block .stand { margin-top: 14px; font-size: 14px; font-weight: var(--t-fett-mittel); }

table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--t-seite); color: var(--t-text-zweit); text-align: left;
  font-size: var(--t-gr-tab-kopf); font-weight: var(--t-fett-halb);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 12px; border-bottom: 1px solid var(--t-rand);
}
/* Zellen stehen auf halber Hoehe der Zeile: in einer Zeile mit Knopf und Feld
   sprang der Text sonst nach oben weg (AM, 28.10.2026). Lange Fliesstexte -
   die Zeilen des Logbuchs - bleiben oben ausgerichtet, dort ist der Anfang
   des Satzes die Bezugslinie. */
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--t-rand);
  font-size: var(--t-gr-tab-text); vertical-align: middle; }
.tab-oben tbody td { vertical-align: top; }
/* Was in einer Zelle steht, teilt deren Hoehe: Knopf, Feld und Text in einer
   Linie, kein zusaetzlicher Abstand durch die Form. */
tbody td .reihe { align-items: center; margin: 0; flex-wrap: nowrap; }
tbody td form { margin: 0; }
tbody td .knopf, tbody td input[type=text] { height: 34px; }
tbody tr:hover { background: var(--t-seite); }
.mono { font-family: var(--t-schrift-fest); }
.klein { font-size: 13px; color: var(--t-text-zweit); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--t-radius-klein);
  border: 1px solid var(--t-rand); background: var(--t-weiss); color: var(--t-navy);
  font: inherit; font-size: 14px; font-weight: var(--t-fett-mittel);
  cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--t-hover); }
.knopf-haupt { background: var(--t-aktiv); border-color: var(--t-aktiv); color: var(--t-weiss); }
.knopf-haupt:hover { background: var(--t-blau); border-color: var(--t-blau); }
input[type=text], input[type=password], input[type=date], input[type=number],
textarea, select {
  height: 38px; padding: 0 12px; border: 1px solid var(--t-rand);
  border-radius: var(--t-radius-klein); font: inherit; font-size: 15px;
  background: var(--t-weiss); color: var(--t-navy); width: 100%;
}
textarea { height: auto; padding: 10px 12px; min-height: 80px; }
label { display: block; font-size: 13px; color: var(--t-text-zweit); margin-bottom: 4px; }
.reihe { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.reihe > * { margin: 0; }

.zeichen-stand {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: var(--t-gr-status); font-weight: var(--t-fett-mittel);
}
.stand-offen { background: #FEF3C7; color: #92400E; }
.stand-fertig { background: var(--t-gruen-grund); color: var(--t-gruen); }

.meldung { padding: 12px 16px; border-radius: var(--t-radius-klein); margin-bottom: 14px;
  position: relative; z-index: 2; }
.meldung-success { background: var(--t-gruen-grund); color: var(--t-gruen); }
.meldung-error { background: #FEE2E2; color: #B91C1C; }
.meldung-info { background: var(--t-hover); color: var(--t-navy); }

.fuss { text-align: center; color: var(--t-text-zweit); font-size: 12px; padding: 26px; }

.anmeldung { max-width: 420px; margin: 8vh auto; }
.anmeldung .karte-rumpf > * + * { margin-top: 14px; }

canvas.unterschrift {
  border: 1px dashed var(--t-rand); border-radius: var(--t-radius-klein);
  background: var(--t-weiss); touch-action: none; width: 100%; height: 180px;
}
@media (max-width: 720px) {
  main { padding: 16px; }
  .kopf { padding: 10px 16px 12px; --band-start: 170px; }
  h1 { font-size: 30px; }
}

/* Reiter wie der Modulstreifen in VAMS: graue Leiste, dunkler aktiver Block. */
.reiter {
  display: flex; gap: 2px; background: var(--t-reiter); border-radius: var(--t-radius-klein);
  padding: 3px; margin-bottom: 16px; position: relative; z-index: 2; width: fit-content;
}
.reiter a {
  padding: 7px 16px; border-radius: 6px; font-size: 14px; text-decoration: none;
  color: var(--t-text-zweit); font-weight: var(--t-fett-mittel);
}
.reiter a:hover { background: var(--t-reiter-auf); color: var(--t-navy); }
.reiter a.an { background: var(--t-reiter-an); color: var(--t-weiss); }

/* Uhr der Pruefung: gut lesbar, aber ohne Unruhe. Sie zeigt nur an - das Ende
   setzt der Server. */
.uhr {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: var(--t-seite); border: 1px solid var(--t-rand);
  border-radius: 999px; padding: 6px 16px;
}
.uhr-wort { font-size: 12px; color: var(--t-text-zweit); text-transform: uppercase;
  letter-spacing: .06em; }
.uhr-zahl { font-size: 22px; font-weight: var(--t-fett-mittel); color: var(--t-navy);
  font-variant-numeric: tabular-nums; }
.uhr-knapp { border-color: #F59E0B; background: #FEF3C7; }
.uhr-knapp .uhr-zahl { color: #92400E; }

/* Kapitelband im Bogen - derselbe Schnitt wie die Abschnitte auf dem
   gedruckten Fragebogen VA MTO-018C. */
.kapitel {
  background: var(--t-seite); border-top: 1px solid var(--t-rand);
  border-bottom: 1px solid var(--t-rand);
  padding: 8px 22px; font-size: 13px; font-weight: var(--t-fett-mittel);
  color: var(--t-navy); text-transform: uppercase; letter-spacing: .04em;
}

/* Sperrschirm waehrend der Pruefung: deckt den Bogen zu, sobald die Seite den
   Vordergrund verloren hat. Er haelt niemanden auf, er macht sichtbar, dass
   es bemerkt wurde. */
.schleuse {
  position: fixed; inset: 0; z-index: 50; background: rgba(10, 27, 68, .92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.schleuse[hidden] { display: none; }
.schleuse-kasten {
  background: var(--t-weiss); border-radius: var(--t-radius); padding: 28px 32px;
  max-width: 520px;
}
.schleuse-kasten h2 { margin: 0 0 10px; }
.schleuse-kasten p { color: var(--t-navy); font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.stand-warnung { background: #FEE2E2; color: #B91C1C; }

/* Anwesenheitstafel: die Prueflinge untereinander, die Tage nebeneinander.
   Die Spalten der Tage bleiben schmal, der Name haelt die linke Kante. */
.tafel-anwesenheit th, .tafel-anwesenheit td { padding-left: 8px; padding-right: 8px; }
.tafel-anwesenheit thead th { white-space: nowrap; }
.tafel-anwesenheit tbody td:first-child,
.tafel-anwesenheit thead th:first-child { position: sticky; left: 0; background: #FFF; }
.tafel-anwesenheit tbody tr:hover td { background: var(--t-seite); }
.tafel-anwesenheit input[type=checkbox] { cursor: pointer; }

/* Wasserzeichen ueber dem Bogen: blass, schraeg, nicht anklickbar. Es haelt
   kein Bildschirmfoto auf, aber jede Aufnahme traegt, von wem sie stammt. */
.wasserzeichen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  display: flex; flex-wrap: wrap; align-content: space-around;
  justify-content: space-around; transform: rotate(-24deg); z-index: 1;
}
.wasserzeichen span {
  color: rgba(10, 27, 68, .038); font-size: 14px; white-space: nowrap;
  font-weight: var(--t-fett-mittel);
}
.karte { position: relative; }
.karte form, .karte .karte-rumpf, .karte .karte-kopf { position: relative; z-index: 2; }

/* Verlaesst die Pruefung den Vordergrund, wird der Bogen unleserlich: was
   danach aufgenommen wird, zeigt keine Fragen mehr. Ein Bildschirmfoto selbst
   kann eine Seite nicht verhindern - das kann nur ein verwaltetes Geraet oder
   ein Pruefungsbrowser. */
body.verwischt main > .karte { filter: blur(14px); }
.schleuse { backdrop-filter: blur(6px); }

.knopf[disabled] { opacity: .45; cursor: default; }
.knopf-haupt[disabled]:hover { background: var(--t-aktiv); border-color: var(--t-aktiv); }

.uhr-gross .uhr-zahl { font-size: 30px; }

/* Beschriftung im Band: sie sitzt auf dem hellblauen Abschnitt, deshalb
   dieselben Anteile wie im Farbverlauf (20 / 35 / Rest). */
.kopf .band-text {
  position: absolute; left: var(--band-start, 430px); right: 0; top: 0; bottom: 0;
  display: flex; z-index: 1; pointer-events: none;
}
.kopf .band-text span:nth-child(1) { flex: 0 0 20%; }
.kopf .band-text span:nth-child(2) { flex: 0 0 35%; }
.kopf .band-text span:nth-child(3) {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  color: var(--t-weiss); font-size: 26px; font-weight: var(--t-fett-halb);
  letter-spacing: .02em; white-space: nowrap;
}

/* Kurze Angaben - Nummer, Kapitel, Art, Datum, Kennzeichen - stehen mittig,
   Kopf und Inhalt in derselben Flucht. Fliesstext (Aufgabe, Verweis, Name)
   bleibt linksbuendig (AM, 28.10.2026). */
th.mitte, td.mitte { text-align: center; }
/* Ziffern gleich breit: Nummern, Daten und Zaehler stehen dann in jeder Zeile
   untereinander, ohne dass dafuer eine zweite Schrift noetig waere. */
tbody td { font-variant-numeric: tabular-nums; }
th.rechts, td.rechts { text-align: right; }

/* Rueckweg zur Startseite. Steht ueber dem Inhalt, nicht im Kopf: im Kopf
   wurde er uebersehen (AM, 30.10.2026). */
.zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--t-rand); border-radius: 999px;
  color: var(--t-text-zweit); text-decoration: none;
  font-size: 14px; font-weight: var(--t-fett-mittel); background: #fff;
}
.zurueck svg { width: 15px; height: 15px; }
.zurueck:hover { border-color: var(--t-blau); color: var(--t-blau); }

/* Kachel ohne offene Aufgabe: sie bleibt sichtbar, tritt aber zurueck. */
.block-ruhend { opacity: .72; }
.block-ruhend:hover { opacity: 1; }

/* Anhalt ueberzogen: die Uhr zaehlt hoch und faellt auf. Gesperrt wird nichts,
   aber der Pruefling soll es sehen und der Assessor auch (AM, 30.10.2026). */
.uhr-ueber { border-color: #DC2626; background: #FEE2E2; }
.uhr-ueber .uhr-zahl { color: #991B1B; }
.uhr-ueber .uhr-wort { color: #991B1B; }

/* Bewertungstafel VA MTO-017: feste Aufteilung, damit die Spalten der Skala in
   jeder Gruppe an derselben Stelle stehen. Ohne das richtet sich jede Tafel
   nach ihrem laengsten Punkt und die Saeulen springen von Gruppe zu Gruppe
   (AM, 30.10.2026). */
.tafel-noten { table-layout: fixed; width: 100%; }
.tafel-noten th:first-child, .tafel-noten td:first-child { width: 34%; }
.tafel-noten th:not(:first-child), .tafel-noten td:not(:first-child) {
  width: 13.2%; text-align: center;
}
/* Bei schmalem Schirm darf die Tafel nicht gequetscht werden: dann schiebt sie
   sich waagerecht, der Rahmen hat dafuer schon overflow-x. */
@media (max-width: 720px) {
  .tafel-noten { min-width: 560px; }
}