@font-face { font-family: 'BundesSans'; src: url('/fonts/BundesSansWeb-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'BundesSans'; src: url('/fonts/BundesSansWeb-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: 'BundesSans'; src: url('/fonts/BundesSansWeb-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: 'BundesSans'; src: url('/fonts/BundesSansWeb-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: block; }
:root {
  font-family: 'BundesSans', system-ui, sans-serif;
  
  
  --primaer-dunkel: #333f85;
  --primaer: #4552a6;
  --primaer-hell: #eaecf8;
  --primaer-rand: #cfd4ee;
  --text: #1b2733;
}

body { margin: 0; display: grid; min-height: 100vh; place-items: center; background: var(--primaer-hell); color: var(--text); overflow-wrap: break-word; max-width: 100vw; overflow-x: hidden; }
main { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 1px 4px rgba(60,52,128,.15); min-width: 320px; border-top: 4px solid var(--primaer); box-sizing: border-box; }
main.breit { min-width: unset; width: 100%; max-width: 900px; }
main.login-box { width: 100%; max-width: 420px; box-sizing: border-box; }
.login-logo { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 0 1.25rem; -webkit-user-drag: none; user-select: none; }
.login-marke { margin: 0; text-align: left; font-size: 1.9rem; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.login-marke-lang { margin: .15rem 0 1.5rem; text-align: left; font-size: 1rem; color: #5a6b7a; }
.login-box h1 { text-align: left; font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }
.rechtstext-box { width: 100%; max-width: 760px; box-sizing: border-box; }
.rechtstext-fuss { position: fixed; right: 1rem; bottom: .6rem; font-size: .8rem; text-align: right; }
.rechtstext-fuss a { color: var(--primaer-dunkel); margin-left: 1rem; }
.zwei-faktor-hinweis { margin: 0 0 1rem; padding: .6rem .9rem; background: #fff6d9; color: #6b5200; border: 1px solid #f0d98a; border-radius: 6px; }
.zwei-faktor-hinweis a { color: var(--primaer-dunkel); font-weight: 600; }
h1 { color: var(--primaer-dunkel); }
a { color: var(--primaer); }
a:hover { color: var(--primaer-dunkel); }
label { display: block; margin-top: 1rem; font-weight: 600; color: var(--primaer-dunkel); }

input, select, textarea {
  width: 100%; padding: .7rem .85rem; margin-top: .25rem; box-sizing: border-box; font-family: inherit;
  border: 1px solid var(--primaer-rand); border-radius: 4px; font-size: 1.05rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaer); outline-offset: 1px; }

input:read-only, textarea:read-only { background: var(--primaer-hell); cursor: default; }
input:read-only:focus, textarea:read-only:focus { outline: none; }

input[type="date"], input[type="time"], input[type="number"] { width: auto; max-width: 10rem; }

.checkbox-label {
  display: inline-flex; align-items: center; gap: .4rem; margin: .25rem 1.5rem .25rem 0;
  font-weight: 400; color: inherit;
}

input[type="checkbox"] { width: auto; margin-top: 0; }

input[type="radio"] { width: auto; margin-top: 0; }
button {
  margin-top: 1.5rem; padding: .6rem 1.4rem; cursor: pointer;
  background: var(--primaer); color: #fff; border: none; border-radius: 4px; font-size: 1rem;
  font-family: inherit;
}
button:hover { background: var(--primaer-dunkel); }

button:disabled { background: var(--primaer-rand); color: #7c88b8; cursor: not-allowed; }
button:disabled:hover { background: var(--primaer-rand); }

.knopf-leiste { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.knopf-leiste a {
  display: inline-block; padding: .5rem 1rem; background: var(--primaer); color: #fff;
  border-radius: 4px; text-decoration: none; font-size: .95rem;
}
.knopf-leiste a:hover { background: var(--primaer-dunkel); color: #fff; }
.error { color: #b00020; background: #fdecea; padding: .5rem .75rem; border-radius: 4px; }

.pflicht-stern { color: #b00020; font-weight: 700; }
.pflicht-legende { font-size: .85rem; color: #5a6b7a; }
.erfolg { color: #1e7e34; background: #e6f4ea; padding: .5rem .75rem; border-radius: 4px; }

table { width: 100%; border-collapse: collapse; margin-top: 1rem; table-layout: fixed; }

th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--primaer-rand); overflow-wrap: break-word; }
th { background: var(--primaer-hell); color: var(--primaer-dunkel); }

.status { padding: .15rem .5rem; border-radius: 4px; font-weight: 600; text-decoration: none; }
.status-aktiv { background: #e6f4ea; color: #1e7e34; }
.status-inaktiv { background: #fdecea; color: #b00020; }
.status-warnung { background: #fff8e1; color: #8a6100; }
.inline-form { margin: 0; }

.inline-form button { margin-top: .5rem; padding: .3rem .7rem; font-size: .9rem; }
.ampel ul { margin: .5rem 0 0; padding-left: 1.25rem; }
svg { max-width: 100%; height: auto; }
.schwarzes-brett-liste { list-style: none; padding: 0; }
.schwarzes-brett-liste li { padding: .75rem 0; border-bottom: 1px solid var(--primaer-rand); }
.schwarzes-brett-liste .meta { color: #5a6b7a; font-size: .85rem; margin: .25rem 0 0; }
.hinweis { color: #5a6b7a; font-size: .9rem; }

.sb-zeile-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.sb-zeile-fuss .meta { margin: 0; }
.sb-zeile-fuss > .inline-form, .sb-zeile-fuss > p.hinweis { margin: 0 0 0 auto; }


.wasserzeichen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3rem 4rem;
  padding: 1rem;
  transform: rotate(-30deg) scale(1.4);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  z-index: 999;
  color: var(--text);
  font-size: .95rem;
  white-space: nowrap;
}


.hilfe-thema { margin-bottom: .6rem; border: 1px solid var(--primaer-rand); border-radius: 4px; padding: .5rem .75rem; }
.hilfe-thema summary { cursor: pointer; font-weight: 600; color: var(--primaer-dunkel); }
.hilfe-thema p { margin: .5rem 0 0; }
.hilfe-suche { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hilfe-suche label { margin-top: 0; }
.hilfe-suche input { width: auto; min-width: 220px; }
.hilfe-suche button { margin-top: 0; }


.aufklappbereich { margin-bottom: 1rem; border: 1px solid var(--primaer-rand); border-radius: 4px; padding: .5rem .75rem; }
.aufklappbereich > summary { cursor: pointer; font-weight: 600; color: var(--primaer-dunkel); }

summary.aufklapp-erklaerung {
  display: flex; align-items: center; gap: .75rem; cursor: pointer; list-style: none;
  font-weight: 400; color: var(--text);
}
summary.aufklapp-erklaerung::-webkit-details-marker { display: none; }
.aufklapp-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: .4rem; background: var(--primaer); color: #fff; border-radius: 4px; line-height: 0;
}
.aufklapp-symbol svg { width: 18px; height: 18px; }
summary.aufklapp-erklaerung:hover .aufklapp-symbol { background: var(--primaer-dunkel); }

.aufklapp-unterabschnitt { margin-top: 1.5rem; border-top: 1px solid var(--primaer-rand); padding-top: 1rem; }


.feld-zeile { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.feld-zeile label { margin-top: 0; }
.feld-info { margin: 0; font-size: .85rem; }
.feld-info summary {
  cursor: pointer; list-style: none; 
}
.feld-info summary::-webkit-details-marker { display: none; }
.feld-info[open] { flex-basis: 100%; margin-top: .3rem; }
.feld-info p { margin: .3rem 0 0; color: #5a6b7a; }
.info-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--primaer); color: #fff; font-size: .75rem; font-weight: 700;
  font-style: normal;
}
.feld-info summary:hover .info-symbol { background: var(--primaer-dunkel); }

.umbruch-lang { word-break: break-all; }


html { margin: 0; padding: 0; }

body.mit-kopfleiste { display: block; justify-items: normal; margin: 0; min-height: 100vh; background: var(--primaer-hell); }
.kopfleiste {
  background: var(--primaer); color: #fff;
  display: flex; align-items: center; flex-wrap: wrap;
  padding: .6rem 1.5rem; gap: 1.5rem;
  width: 100%; box-sizing: border-box;
}
.kopfleiste .marke {
  
  font-weight: 700; font-size: 1.8rem; letter-spacing: .04em; color: #fff;
  text-decoration: none; border-radius: 4px; padding: .2rem .5rem; margin: -.2rem -.5rem;
}
.kopfleiste .marke:hover { background: rgba(255,255,255,.15); color: #fff; }
.kopf-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; flex: 1; }

.kopf-nav a {
  color: #fff; text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: .2rem; font-size: .78rem; padding: .35rem .5rem;
  border-radius: 4px; position: relative; line-height: 1.1; white-space: nowrap;
}
.kopf-nav a:hover { background: rgba(255,255,255,.15); color: #fff; }
.kopf-nav a[aria-current="page"] { background: rgba(255,255,255,.25); color: #fff; font-weight: 600; }
.kopf-nav .nav-icon { width: 22px; height: 22px; }
.kopf-nav .abzeichen {
  position: absolute; top: -3px; right: -4px; background: #fff; color: var(--primaer-dunkel);
  border-radius: 999px; font-size: .65rem; font-weight: 700; padding: 0 .35rem; line-height: 1.4;
}

.nav-abzeichen-rahmen {
  position: absolute; top: -6px; right: -8px;
  width: 1.5rem; height: 1.1rem; border: 0; background: transparent; overflow: hidden;
}

.nav-abzeichen-body {
  display: flex; align-items: center; justify-content: center;
  justify-items: normal; margin: 0; padding: 0; height: 100vh; box-sizing: border-box;
  background: transparent;
}

.abzeichen-eigenstaendig {
  background: #fff; color: var(--primaer-dunkel);
  border-radius: 999px; font-size: .65rem; font-weight: 700; padding: 0 .35rem; line-height: 1.4;
}
.kopf-rechts { display: flex; align-items: center; gap: .75rem; }
.kopf-rechts a, .kopf-rechts button.icon-button {
  color: #fff; background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-size: .72rem; padding: .3rem; font-family: inherit; text-decoration: none;
}
.kopf-rechts a:hover, .kopf-rechts button.icon-button:hover { color: #fff; opacity: .8; }
.kopf-rechts .nav-icon { width: 20px; height: 20px; }

.kopf-rechts a.kopf-benutzer,
.kopf-benutzer { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }


.kopf-titelzeile {
  background: var(--primaer); color: #fff; padding: .6rem 1.5rem;
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem;
}
/* Lange Titel (z. B. Ereignisnamen bis 200 Zeichen, Schritt 115): vollständig anzeigen und umbrechen - auch
   innerhalb langer Wörter ohne Leerzeichen -, über so viele Zeilen wie nötig (Entwicklerentscheidung: nichts
   kürzen, nichts ausblenden). min-width 0 erlaubt dem Flex-Element zu schrumpfen, sonst würde der Balken
   nach rechts gesprengt statt umzubrechen. */
.kopf-titelzeile h1 {
  margin: 0; color: #fff; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere;
}

.kopf-titelzeile-links { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; flex: 1 1 0; min-width: 0; }

/* Dokumentationseinträge (Schritt 116): Liste unveränderlicher Beiträge; Text behält Zeilenumbrüche, lange
   Wörter brechen um. Dieselbe Textregel gilt für die Beschreibungsspalte des Übungsverlaufs. */
.dok-eintraege { margin: .5rem 0 1rem; padding-left: 1.4rem; }
.dok-eintrag { margin-bottom: .75rem; }
.dok-eintrag-kopf { margin: 0; font-size: .85rem; color: #5a6b7a; }
.dok-eintrag-text, .verlauf-beschreibung { white-space: pre-wrap; overflow-wrap: anywhere; }
.dok-eintrag-text { margin: .15rem 0 0; }
.dok-unterlabel { display: block; margin-top: .6rem; }

.kopf-titel-zusatz { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; font-size: .85rem; font-weight: 400; }
.kopf-titel-zusatz .status { font-size: .8rem; padding: .1rem .5rem; }

.kopf-titelzeile-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }

.auto-aktualisierung { margin: 0; font-size: .8rem; color: #fff; opacity: .9; display: flex; align-items: center; gap: .5rem; }
.auto-aktualisierung form { margin: 0; }
.auto-aktualisierung button {
  margin: 0; padding: .1rem .5rem; font-size: .75rem; background: rgba(255,255,255,.2);
}
.auto-aktualisierung button:hover { background: rgba(255,255,255,.35); }

.auto-aktualisierung button.icon-button-only { padding: .25rem; }
.auto-aktualisierung .icon-button-only svg { width: 14px; height: 14px; }

.auto-aktualisierung-kompakt { color: var(--text); opacity: 1; font-size: .85rem; }
.auto-aktualisierung-kompakt button.icon-button-only {
  padding: .4rem; background: var(--primaer);
}
.auto-aktualisierung-kompakt button.icon-button-only:hover { background: var(--primaer-dunkel); }
.auto-aktualisierung-kompakt .icon-button-only svg { width: 16px; height: 16px; }

.kopf-titelzeile-rechts .ampel { font-size: .8rem; text-align: right; }
.kopf-titelzeile-rechts .ampel ul { margin: .3rem 0 0; padding-left: 1.1rem; text-align: left; }
.kopf-titelzeile-rechts .ampel a { color: #fff; text-decoration: underline; }
.kopf-titelzeile-rechts .ampel a:hover { opacity: .8; }
.ampel .status { margin-right: .4rem; }

.kopf-inhalt { width: 100%; padding: 1.5rem; box-sizing: border-box; }


body.kopf-vollhoehe { display: flex; flex-direction: column; align-items: stretch; height: 100vh; overflow: hidden; }
body.kopf-vollhoehe .kopf-fest { flex: 0 0 auto; }

body.kopf-vollhoehe .kopf-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

body.kopf-vollhoehe .ereignisse-fixiert { position: static; flex: 0 0 auto; }

body.kopf-vollhoehe .ereignisse-tabelle { flex: 1 1 auto; max-height: none; }

body.kopf-vollhoehe .nach-oben { display: none; }


.kopf-fest { position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.nach-oben {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--primaer); color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 500;
}
.nach-oben:hover, .nach-oben:focus-visible { background: var(--primaer-dunkel); }


.sb-eingang-rahmen {
  width: 100%; height: 22rem; box-sizing: border-box;
  border: 1px solid var(--primaer-rand); border-radius: 8px;
  background: #fff;
}

.sb-fragment-body { display: block; justify-items: normal; margin: 0; padding: 1rem; box-sizing: border-box; }

.ben-inhalt-rahmen {
  width: 100%; height: 30rem; box-sizing: border-box;
  border: 1px solid var(--primaer-rand); border-radius: 8px;
  background: #fff;
}
.ben-fragment-body { display: block; justify-items: normal; margin: 0; padding: 1rem; box-sizing: border-box; }
.nach-oben svg { width: 1.5rem; height: 1.5rem; }


.register-tabs { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .75rem 0 1.5rem; border-bottom: 1px solid var(--primaer-rand); padding-bottom: 0; }
.register-tabs a {
  padding: .6rem 0; text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
  font-size: .85rem; color: var(--text); border-bottom: 2px solid transparent;
}
.register-tabs a[aria-current="page"] { color: var(--primaer); font-weight: 700; border-bottom-color: var(--primaer); }


.register-tabs.unter-reiter { margin: 0 0 1rem; padding-bottom: 0; font-size: .8rem; gap: 1rem; }
.register-tabs.unter-reiter a { padding: .3rem 0; }


.details-aktionen { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }

.status-mit-hinweisen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.details-spalte { display: flex; flex-direction: column; gap: 1.25rem; }
.details-feld label { display: block; margin-bottom: .3rem; font-weight: 600; color: var(--primaer-dunkel); font-size: .9rem; }
.details-feld-doppelt { display: flex; gap: 1.25rem; }
.details-feld-doppelt > div { flex: 1; }
.details-feld-doppelt > div > label { display: block; margin-bottom: .3rem; font-weight: 600; color: var(--primaer-dunkel); font-size: .9rem; }

.feld-bedingt-verschieben { opacity: .45; }
form:has(input[name="option"][value="verschieben"]:checked, input[name="taktische_zeit_option"][value="setzen"]:checked) .feld-bedingt-verschieben { opacity: 1; }
@media (max-width: 700px) {
  .details-grid { grid-template-columns: 1fr; }
}


.funktion-zeile { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: nowrap; margin-top: .75rem; margin-bottom: 1rem; }
.funktion-zeile > div { margin-top: 0; }
.funktion-zeile label { margin-top: 0; }
.funktion-bezeichnung { flex: 1 1 300px; min-width: 0; }
.funktion-kuerzel { flex: 0 1 140px; min-width: 0; }

.kommunikationsweg-zeile .funktion-kuerzel textarea { opacity: .5; background: var(--primaer-rand); }
.kommunikationsweg-zeile:has(option[value="sonstige"]:checked) .funktion-kuerzel textarea { opacity: 1; background: #fff; }


textarea.feld-einzeilig {
  resize: vertical; overflow: auto; height: auto; min-height: 0; line-height: 1.3;
}

.kontakt-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: start; }

@media (max-width: 700px) {
  .kontakt-spalten { grid-template-columns: 1fr; }
}

.feld-mehrzeilig { resize: vertical; }


.fk-zeile { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--primaer-rand); flex-wrap: wrap; }
.fk-zeile > input[type="checkbox"] { margin-top: .4rem; }

.fk-zeile > button.icon-button-only { margin-top: .1rem; }
.fk-details { flex: 0 1 500px; margin-bottom: 0; max-width: 100%; }
.fk-name-hinzufuegen { margin-top: .5rem; }


button.icon-button-only {
  margin-top: 0; padding: .4rem; display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex-shrink: 0;
}
.icon-button-only svg { width: 18px; height: 18px; }

a.icon-button-only {
  padding: .4rem; display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex-shrink: 0; background: var(--primaer); color: #fff; border: none; border-radius: 4px;
  text-decoration: none;
}
a.icon-button-only:hover { background: var(--primaer-dunkel); color: #fff; }

summary.icon-button-only {
  padding: .4rem; display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex-shrink: 0; background: var(--primaer); color: #fff; border: none; border-radius: 4px;
  cursor: pointer; list-style: none; width: fit-content;
}
summary.icon-button-only::-webkit-details-marker { display: none; }
summary.icon-button-only:hover { background: var(--primaer-dunkel); }



.fk-toolbar { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.fk-toolbar .inline-form { display: flex; align-items: center; gap: .5rem; margin: 0; }
.fk-toolbar input[type="text"] { margin-top: 0; width: auto; min-width: 12rem; }

.person-zeile-header { margin-top: 2rem; margin-bottom: .75rem; }
.person-zeile-header h3 { margin: 0; }

.fk-toolbar-mit-filter { align-items: flex-start; }

.fk-toolbar-rechts { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.fk-inline-rename { display: flex; align-items: center; gap: .4rem; }
.fk-inline-rename input[type="text"] { width: auto; flex: 1 1 auto; min-width: 6rem; margin-top: 0; }


.icon-button-only:disabled { background: var(--primaer-rand); color: #7c88b8; cursor: not-allowed; }
.icon-button-only:disabled:hover { background: var(--primaer-rand); }

.anhang-toolbar { justify-content: space-between; }
.anhang-toolbar-links, .anhang-toolbar-rechts { display: flex; gap: .5rem; }


.kontakt-zeile { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--primaer-rand); }
.kontakt-zeile .inline-form { margin: 0; }


.details-feld-mit-knopf { display: flex; align-items: flex-start; gap: .5rem; }
.details-feld-mit-knopf textarea { flex: 1; }
.details-feld-mit-knopf .inline-form, .details-feld-mit-knopf > .icon-button-only { margin: .25rem 0 0; }


.drehbuch-karte {
  background: #fff; border: 1px solid var(--primaer-rand); border-radius: 8px;
  padding: 1.25rem 1.5rem 1.5rem; margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(60,52,128,.08);
}
.drehbuch-karte > h2:first-child { margin-top: 0; }


.filterwerte-box {
  max-height: 14rem; overflow-y: auto; border: 1px solid var(--primaer-rand);
  border-radius: 4px; padding: .5rem .75rem; margin-top: .5rem; background: #fff;
  scrollbar-width: thin;
}
.filterwerte-box .aufklappbereich { margin-bottom: .5rem; }
.filterwerte-box .aufklappbereich:last-child { margin-bottom: 0; }

.filterwerte-box::-webkit-scrollbar { width: 8px; }
.filterwerte-box::-webkit-scrollbar-thumb { background: var(--primaer-rand); border-radius: 4px; }


.tabelle-scroll { overflow-x: auto; margin-top: 1rem; }
.tabelle-scroll table { width: auto; min-width: 100%; table-layout: auto; margin-top: 0; }
.tabelle-scroll th, .tabelle-scroll td { white-space: nowrap; }




.zeile-fett td { font-weight: 700; }


.sortier-form { margin: 0; }
.sortier-button {
  margin: 0; padding: 0; background: transparent; border: none; color: inherit;
  font: inherit; font-weight: 600; cursor: pointer; text-align: left; width: 100%;
}

.sortier-button:hover, .sortier-button:focus-visible, .sortier-button:active {
  background: transparent; color: inherit; text-decoration: underline;
}


.filter-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .25rem 1.25rem; align-items: end; margin-top: .5rem;
}
.filter-feld { margin-top: .75rem; }
.filter-feld label { margin-top: 0; }
.filter-feld input, .filter-feld select { margin-top: .25rem; }

.filter-feld-checkbox { display: flex; align-items: center; }

.drehbuch-live-hinweise { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.drehbuch-live-hinweis { display: inline-flex; align-items: center; gap: .4rem; }
.drehbuch-live-hinweis .nav-abzeichen-inline-rahmen {
  display: inline-block; width: 1.6rem; height: 1.2rem; border: 0; overflow: hidden; vertical-align: middle;
}

.taktische-zeit-live-rahmen {
  display: inline-block; width: 25rem; height: 1.8rem; border: 0; overflow: hidden; vertical-align: middle;
}

.taktische-zeit-body { justify-content: flex-start !important; }
.taktische-zeit-abzeichen { color: #fff; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }


.ereignisse-fixiert {
  position: sticky; top: 8.7rem; z-index: 400;
  background: var(--primaer-hell); margin: -1.5rem -1.5rem 0; padding-left: 1.5rem; padding-right: 1.5rem;
  box-shadow: 0 4px 6px -4px rgba(0,0,0,.15);
}

.ereignisse-fixiert .drehbuch-register-zeile { border-bottom: none; }



.drehbuch-register-zeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem;
  border-bottom: 1px solid var(--primaer-rand); padding-bottom: 1.5rem;
}
.drehbuch-register-zeile .register-tabs { margin: 0; border-bottom: none; padding-bottom: 0; }

.kopf-inhalt > .drehbuch-register-zeile {
  position: sticky; top: 8.7rem; z-index: 400;
  margin-top: -1.5rem; margin-left: -1.5rem; margin-right: -1.5rem;
  padding-left: 1.5rem; padding-right: 1.5rem;
  background: var(--primaer-hell); box-shadow: 0 4px 6px -4px rgba(0,0,0,.15);
}


.drehbuch-register-zeile > .fk-toolbar { margin-bottom: 0; margin-left: auto; }


.fk-toolbar > .aufklappbereich { margin-bottom: 0; border: none; padding: 0; }
.fk-toolbar > .aufklappbereich[open] {
  border: 1px solid var(--primaer-rand); border-radius: 4px; padding: .5rem .75rem; background: #fff;
}

.ereignisse-pager { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: 0; }
.ereignisse-pager .inline-form button { margin-top: 0; padding: .4rem .75rem; }
.ereignisse-pager button.seite-aktuell { background: var(--primaer-dunkel); font-weight: 700; }
.seiten-ausgelassen { padding: 0 .25rem; color: #5a6b7a; }


.ereignisse-pager-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 1rem 0; padding-right: 4.5rem; }
.ereignisse-pager-zeile p.hinweis { margin: 0 0 0 auto; }

.seiten-pro-seite-form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.seiten-pro-seite-form label { display: inline; margin-top: 0; font-weight: 400; }
.seiten-pro-seite-form select { width: auto; margin-top: 0; }
.seiten-pro-seite-form button { margin-top: 0; }






.ereignisse-tabelle { max-height: calc(100vh - 21.5rem); min-height: 20rem; overflow-y: auto; }
.ereignisse-tabelle table { border-collapse: separate; border-spacing: 0; }
.ereignisse-tabelle thead th { position: sticky; top: 0; z-index: 300; }

.auswahl-kopf { text-align: center; }
.auswahl-kopf form { display: inline-block; margin: 0; }

.checkbox-knopf {
  width: 1.1rem; height: 1.1rem; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--primaer-rand); border-radius: 3px;
  color: var(--primaer-dunkel); cursor: pointer;
}
.checkbox-knopf:hover { border-color: var(--primaer); }
.checkbox-knopf svg { width: .8rem; height: .8rem; }

.checkbox-knopf-markiert { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.checkbox-knopf-markiert:hover { background: var(--primaer-dunkel); border-color: var(--primaer-dunkel); }
.ereignisse-tabelle thead th:first-child { min-width: 2.2rem; }



.popup-nachricht {
  position: fixed; right: 1.5rem; bottom: 5rem; z-index: 600;
  max-width: 22rem; border-radius: 6px; padding: .6rem 2.2rem .6rem .9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.popup-nachricht:not([open]) { display: none; }
.popup-nachricht p { margin: 0; }
.popup-fehler { background: #fdecea; color: #b00020; }
.popup-erfolg { background: #e6f4ea; color: #1e7e34; }

.popup-schliessen {
  position: absolute; top: .3rem; right: .5rem; width: 1.4rem; height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; cursor: pointer; list-style: none;
  border-radius: 3px; color: inherit; opacity: .75;
}
.popup-schliessen::-webkit-details-marker { display: none; }
.popup-schliessen:hover { opacity: 1; background: rgba(0,0,0,.08); }


.startseite-taktische-zeit-zeile { margin: 1.5rem 0; }
.home-taktische-zeit-rahmen {
  
  display: block; width: 100%; min-width: 0; height: 10rem; border: 4px solid var(--primaer-dunkel);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(60,52,128,.2);
}


.home-taktische-zeit-seite { display: block; justify-items: normal; height: 100vh; margin: 0; box-sizing: border-box; }

.home-taktische-zeit-body {
  display: flex; flex-direction: row; align-items: center;
  height: 100%; box-sizing: border-box; gap: 1rem;
  background: var(--primaer); color: #fff; padding: .5rem 2rem;
}
.home-taktische-zeit-links, .home-taktische-zeit-rechts {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center;
}
.home-taktische-zeit-links { align-items: flex-start; text-align: left; gap: .2rem; }
.home-taktische-zeit-rechts { align-items: flex-end; text-align: right; }

.home-taktische-zeit-mitte {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
}

.home-taktische-zeit-marke { font-weight: 700; font-size: 2.3rem; letter-spacing: .08em; opacity: .85; }

.home-taktische-zeit-drehbuchname {
  max-width: 100%; font-weight: 700; font-size: 1.9rem; line-height: 1.2;
  overflow-wrap: break-word; word-break: break-word;
}
.home-taktische-zeit-label { font-size: 1.2rem; letter-spacing: .03em; opacity: .85; }

.home-taktische-zeit-uhrzeit { font-size: 4.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-taktische-zeit-datum { font-size: 1.3rem; opacity: .85; }

.home-taktische-zeit-rechts .status { font-size: 1.5rem; padding: .6rem 1.3rem; }

.home-taktische-zeit-leer { color: var(--primaer-dunkel); }

.startseite-hero { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin: 1.5rem 0; }

.startseite-bild-karte {
  margin: 0; background: #fff; border: 1px solid var(--primaer-rand); border-radius: 10px;
  padding: .6rem; box-shadow: 0 2px 8px rgba(60,52,128,.12);
  display: flex; align-items: center; justify-content: center;
  
  min-width: 0;
}


.startseite-bild {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 16rem; border-radius: 6px;
  pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}


.home-willkommen-zeile { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .3rem 1.5rem; }
.home-willkommen-zeile p { margin: 0; }


.home-produkt-hinweis { text-align: right; margin: 2rem 0 .5rem; font-size: .85rem; color: var(--text); opacity: .7; }


.fk-toolbar-trenner { width: 1px; align-self: stretch; background: var(--primaer-rand); margin: 0 .2rem; }

.fk-toolbar-gruppe {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem; border: 1px solid var(--primaer-rand); border-radius: 8px;
  background: var(--primaer-hell);
}
.fk-toolbar-gruppe select { margin-top: 0; }