/* =========================================================================
   Hackathon-Event im lozi-Look — deep ink, azure accent, JetBrains Mono.
   Wird als Event-Stylesheet in Indico hinterlegt (setup-branding.py) und
   greift nur auf den Event-Seiten, nicht in der Indico-Verwaltung.

   Schriften liegen selbst gehostet unter /pwa/fonts/ — bewusst nicht über
   Google Fonts, weil das auf einer öffentlichen Anmeldeseite die IP-Adressen
   der Besuchenden an einen Dritten überträgt.
   ========================================================================= */

@font-face {
  font-family: "Dax Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Dax Pro"), local("DaxPro-Regular"), local("Dax Pro Regular"), local("Dax-Regular"),
       url(/pwa/fonts/DaxPro-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Dax Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Dax Pro Medium"), local("DaxPro-Medium"), local("Dax-Medium"),
       url(/pwa/fonts/DaxPro-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "Dax Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Dax Pro Bold"), local("DaxPro-Bold"), local("Dax-Bold"),
       url(/pwa/fonts/DaxPro-Bold.woff2) format("woff2");
}
/* Das Zeichenraster der Achterbahn. Keine Textschrift: Sie trägt genau die
   Zeichen, aus denen die Szene besteht — Schienen, Blöcke, Ziffern, Sterne —,
   und zwar alle auf einer Laufweite. Ohne sie holt sich der Browser jedes
   Rahmenzeichen aus einer anderen Schrift, die Spalten werden unterschiedlich
   breit und die Schienen reißen auseinander. Geschnitten aus JetBrains Mono
   (SIL Open Font License), Quelle und Erklärung in
   apps/lozi/dashboard/src/styles/00-fonts.css. */
@font-face {
  font-family: 'Coaster Grid';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/pwa/fonts/jetbrains-mono-400-grid.woff2) format('woff2');
}

:root {
  --lozi-bg: #000000;
  --lozi-panel: #000000;
  --lozi-card: rgba(255, 255, 255, 0.05);
  --lozi-card2: rgba(255, 255, 255, 0.09);
  --lozi-line: rgba(255, 255, 255, 0.14);
  --lozi-line2: rgba(255, 255, 255, 0.28);
  --lozi-text: #ffffff;
  --lozi-text2: #d9d9d9;
  --lozi-muted: #969696;
  --lozi-accent: #ff003a;
  --lozi-accent2: #ff003a;
  --lozi-good: #ffffff;
  --lozi-warn: #ff003a;
  --lozi-mono: "Dax Pro", Arial, Helvetica, sans-serif;
  --lozi-sans: "Dax Pro", Arial, Helvetica, sans-serif;
  --lozi-titel: "Dax Pro", Arial, Helvetica, sans-serif;
  --lozi-gitter: "Coaster Grid", ui-monospace, Menlo, monospace;
}

body {
  background: var(--lozi-bg) !important;
  color: var(--lozi-text) !important;
  font-family: var(--lozi-mono) !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Fließtext in der Prosa-Schrift, damit lange Absätze lesbar bleiben. */
.page-content p,
.event-description p,
.message-box p,
.infoline .text {
  font-family: var(--lozi-sans);
}

#outer-content, #content, .item-container, .page-content,
.conference-page, .main-content, .flexrow > .content {
  background: transparent !important;
  color: var(--lozi-text);
}

a, a:visited { color: var(--lozi-accent); }
a:hover { color: var(--lozi-accent2); }

h1, h2, h3, h4, .header-data h1 {
  color: var(--lozi-text) !important;
  font-family: var(--lozi-titel);
  letter-spacing: -0.01em;
}

/* Kopfbereich des Events: dunkles Panel mit feiner Trennlinie statt
   Indico-Blau. Das Logo bekommt eine helle Fläche, weil es schwarze
   Konturen hat, die auf dunklem Grund verschwinden würden. */
.conference-header, .event-header, #header, .header {
  background: var(--lozi-panel) !important;
  border-bottom: 1px solid var(--lozi-line);
  color: var(--lozi-text) !important;
}

/* Derselbe Kopfbereich, wie ihn Indico auf den Konferenzseiten wirklich baut.

   Seine Farben kommen nicht aus einem Stylesheet, sondern als `style`-Attribut
   am Element — Indico setzt dort die Kopfzeilenfarben, die am Event in der
   Datenbank stehen (Layout → Kopfzeile, gesetzt von setup-branding.py). Ein
   Inline-Stil schlägt jede Regel; nur `!important` kommt darüber.

   Deshalb steht die Farbe jetzt an zwei Stellen. Das ist Absicht: Die Werte in
   der Datenbank ändert man nur mit einem Skriptlauf, das Stylesheet kommt mit
   dem nächsten Deploy. Zieht hier eine Farbe um, folgt die Datenbank beim
   nächsten `setup-branding.py` — bis dahin gewinnt trotzdem, was hier steht. */
.confheader,
.confTitleBox,
.confSubTitleBox {
  background: var(--lozi-panel) !important;
  border-color: var(--lozi-line) !important;
}

.conference-title-link,
.confSubTitle {
  color: var(--lozi-text) !important;
}

.conference-header img, .event-logo img, #conf-logo, .header-logo img {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* Karten, Boxen, Tabellen */
.regform-section, .form-group, .i-box, .info-box, .message-box,
.registration-summary, .event-service-row, .item, .infoline {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 10px;
  color: var(--lozi-text2) !important;
}

.infoline.location .place,
.infoline.location .address {
  color: var(--lozi-text) !important;
}

.i-box .i-box-header, .regform-section-title, .ui.segment {
  background: var(--lozi-card2) !important;
  color: var(--lozi-text) !important;
  border-color: var(--lozi-line) !important;
}

/* Eingabefelder: dunkel, aber mit klarem Kontrast — Lesbarkeit geht hier
   vor Gestaltung, ein unleserliches Anmeldeformular kostet Anmeldungen. */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], textarea, select,
.ui.input > input, .ui.form input, .ui.form textarea, .ui.selection.dropdown {
  background: #000000 !important;
  color: var(--lozi-text) !important;
  border: 1px solid var(--lozi-line2) !important;
  border-radius: 8px !important;
  font-family: var(--lozi-mono) !important;
}

input::placeholder, textarea::placeholder { color: var(--lozi-muted) !important; }

input:focus, textarea:focus, select:focus, .ui.form input:focus {
  border-color: var(--lozi-accent) !important;
  outline: 1px solid var(--lozi-accent);
  outline-offset: 1px;
}

label, .ui.form label, .form-field-description, .field-description {
  color: var(--lozi-text2) !important;
}

/* Buttons: Akzentfarbe für die Hauptaktion, dezent für den Rest. */
.i-button, .ui.button, button.ui.button {
  background: var(--lozi-card2) !important;
  color: var(--lozi-text) !important;
  border: 1px solid var(--lozi-line2) !important;
  border-radius: 8px !important;
  font-family: var(--lozi-mono) !important;
}

.i-button.highlight, .ui.primary.button, .ui.button.primary,
input[type="submit"], button[type="submit"] {
  background: var(--lozi-accent) !important;
  border-color: var(--lozi-accent) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.i-button.highlight:hover, .ui.primary.button:hover, button[type="submit"]:hover {
  background: var(--lozi-accent2) !important;
}

/* Zugang zur Verwaltung.

   Indico verlinkt den Verwaltungsbereich einer Konferenz nur ueber einen
   randlosen Stift (a.icon-edit -> /event/<id>/manage/) in der Symbolleiste
   ganz oben. Durch den Kasten, den die .i-button-Regel oben allen Symbolen
   gibt, sieht er aus wie die uebrigen und war praktisch nicht zu finden.
   Deshalb Akzentfarbe und ein Wort dazu.

   Wer den Stift ueberhaupt zu sehen bekommt, entscheidet Indico serverseitig:
   CHECK_ACTION_PERMISSIONS = True in der indico.conf blendet ihn fuer alle
   aus, die das Event nicht verwalten duerfen. */
.event-page-header a.i-button.icon-edit {
  background: var(--lozi-accent) !important;
  border-color: var(--lozi-accent) !important;
  color: #ffffff !important;
  font-weight: 600;
  /* Indico bemisst Symbol-Schaltflaechen quadratisch — fuer die Beschriftung
     muss die Breite mitwachsen. */
  width: auto !important;
  min-width: 0 !important;
  padding-right: 0.8em !important;
  text-decoration: none !important;
}

.event-page-header a.i-button.icon-edit::after {
  content: "Verwaltung";
  margin-left: 0.45em;
}

.event-page-header a.i-button.icon-edit:hover {
  background: var(--lozi-accent2) !important;
  border-color: var(--lozi-accent2) !important;
}

/* Kopfleiste fuer Besuchende ganz weg.

   Die Leiste bedient den Indico-Betrieb, nicht den Hackathon: Haus und
   Kategoriepfeil fuehren auf die leere Indico-Startseite, der Theme-Umschalter
   betrifft nur Zeitplan-Ansichten, Zeitzone und Sprache sind bei einem
   Praesenz-Event auf Deutsch gegenstandslos. Vorher blieb wenigstens der
   Anmelde-Pfeil stehen und hielt die graue Leiste am Leben; der sitzt jetzt in
   der Navigationsleiste (siehe _lozi_nav.html), also kann sie ganz gehen.

   Der :has()-Test erkennt am vorhandenen Anmelde-Pfeil (a.icon-enter), dass
   niemand eingeloggt ist. Wer eingeloggt ist, hat keinen — fuer die Orga bleibt
   die Leiste also stehen, samt Stift in den Bearbeitungsmodus.

   Zwei Einschraenkungen, die dazugehoeren: Ein Konto ohne Verwaltungsrechte
   sieht die Leiste ebenfalls (es hat auch keinen Anmelde-Pfeil) — nur eben
   ohne Stift, denn den blendet Indico serverseitig aus. Und kennt ein Browser
   :has() nicht, bleibt die Leiste stehen; sie stoert dann, aber nichts geht
   kaputt. Das hier ist Kosmetik, kein Zugriffsschutz. */
.event-page-header:has(a.i-button.icon-enter) {
  display: none !important;
}

/* Hinweisboxen (die Info-Box mit Discord/ntfy-Links) */
.message-box.info, .ui.info.message {
  background: rgba(255, 0, 58, 0.10) !important;
  border: 1px solid rgba(255, 0, 58, 0.35) !important;
  color: var(--lozi-text) !important;
}
.message-box.success, .ui.success.message {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.message-box.warning, .ui.warning.message {
  background: rgba(255, 0, 58, 0.10) !important;
  border-color: rgba(255, 0, 58, 0.35) !important;
}

table, .i-table { color: var(--lozi-text2); }
th { color: var(--lozi-muted) !important; border-color: var(--lozi-line) !important; }
td { border-color: var(--lozi-line) !important; }

hr { border-color: var(--lozi-line); }

footer, .footer, #footer {
  background: var(--lozi-panel) !important;
  color: var(--lozi-muted) !important;
  border-top: 1px solid var(--lozi-line);
}

/* Logo: Indico liefert es in Originalgröße aus — auf Kopfzeilenmaß bringen. */
img.confLogo,
.confLogoBox {
  display: none !important;
}

/* Linke Event-Navigation (Übersicht / Anmeldung).

   `.conference-title-link` stand hier lange mit in der Liste und gehört nicht
   dazu: Das ist die Umrandung des Veranstaltungstitels im Kopfbereich, kein
   Menüpunkt. Sie bekam dadurch die Kartenfarbe und lag als hellerer Kasten um
   Logo und Titel. Ihre Farbe steht jetzt oben beim Kopfbereich. */
.menuConfTitle,
.menuConfTitle a,
.event-menu-heading {
  background: var(--lozi-card) !important;
  color: var(--lozi-text2) !important;
  border-color: var(--lozi-line) !important;
  font-family: var(--lozi-mono);
}

.menuConfTitle a:hover {
  background: var(--lozi-card2) !important;
  color: var(--lozi-text) !important;
}

.menuConfTitle.selected,
.menuConfTitle.menuConfSelected,
.menuConfTitle.selected a {
  background: var(--lozi-card2) !important;
  color: var(--lozi-accent) !important;
  border-left: 2px solid var(--lozi-accent) !important;
}

/* Suchfeld im Kopfbereich */
.conference-title-bar input,
#outer-header input[type="search"] {
  background: #000000 !important;
  color: var(--lozi-text) !important;
  border: 1px solid var(--lozi-line2) !important;
}

/* ---------------------------------------------------------------------------
   Anmeldeformular (React). Die Klassennamen sind CSS-Module mit generierten
   Hashes (…__header-wrapper___U6gJN) — deshalb Teilstring-Selektoren, die
   auch nach einem Indico-Update noch greifen.
   --------------------------------------------------------------------------- */

.i-box,
.regform-section,
[class*="regform-module__form-item"] {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line) !important;
  box-shadow: none !important;
}

/* Sektionsköpfe: standen hell auf weiß und waren praktisch unlesbar. */
.i-box-header,
[class*="regform-module__header-wrapper"] {
  background: var(--lozi-card2) !important;
  border-bottom: 1px solid var(--lozi-line) !important;
}

.i-box-header,
.i-box-header .title,
.i-box-header h2,
.i-box-header h3,
[class*="regform-module__header-wrapper"],
[class*="regform-module__header-wrapper"] h2,
[class*="regform-module__header-wrapper"] h3,
[class*="regform-module__description"] {
  color: var(--lozi-text) !important;
}

[class*="regform-module__field"] label,
[class*="regform-module__description"] {
  color: var(--lozi-text2) !important;
}

/* Semantic-UI-Meldungen (Info-Box mit Discord/ntfy, Erfolgsmeldungen) */
.ui.message {
  background: rgba(255, 0, 58, 0.10) !important;
  border: 1px solid rgba(255, 0, 58, 0.35) !important;
  box-shadow: none !important;
  color: var(--lozi-text) !important;
}
.ui.message .header,
.ui.message p,
.ui.message li,
.ui.message strong { color: var(--lozi-text) !important; }
.ui.message a { color: var(--lozi-accent) !important; }

.ui.success.message {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Radio- und Checkbox-Beschriftungen */
.ui.radio.checkbox label,
.ui.checkbox label,
.ui.radio.checkbox + label {
  color: var(--lozi-text) !important;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after { color: var(--lozi-accent) !important; }

/* Infozeilen auf der Übersichtsseite ("Anmeldephase läuft", Datum) */
.event-service-row, .action-box, .i-box.only-message {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line) !important;
  color: var(--lozi-text2) !important;
}
.event-service-row .title, .action-box .title { color: var(--lozi-text) !important; }

/* Indicos eigene Hinweisboxen heißen info-message-box (nicht ui.message) —
   das ist die Box mit den Discord- und ntfy-Links. */
.info-message-box,
.success-message-box,
.warning-message-box,
.message-box {
  background: rgba(255, 0, 58, 0.10) !important;
  border: 1px solid rgba(255, 0, 58, 0.35) !important;
  border-radius: 10px;
  box-shadow: none !important;
}

.info-message-box .message-text,
.info-message-box .message-text p,
.info-message-box .message-text strong,
.message-box .message-text,
.message-box .message-text p {
  color: var(--lozi-text) !important;
}

.info-message-box .message-text a,
.message-box .message-text a { color: var(--lozi-accent) !important; }

.success-message-box {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Literale in gepflegten Texten: die ntfy-Serveradresse und das Thema, die man
   in der App abtippen muss.

   Indicos Stock-CSS legt `.editor-output pre, .editor-output code` auf
   `background-color: #f5f5f5` — gedacht für ein helles Layout. Hier steht
   damit die geerbte helle Schrift auf fast weißem Grund, also praktisch
   unlesbar. Das Feld schreit nach einem Chip statt nach einer Fläche.

   Die Schriftart wird nicht gesetzt: `body` steht ohnehin schon auf
   --lozi-mono, ein zweites Mal Monospace bringt hier keinen Unterschied.

   Ohne `anywhere` bricht die Adresse nicht, sondern schiebt am Handy die
   ganze Spalte breiter — sie hat keine Leerzeichen, an denen umbrochen
   werden könnte. */
.editor-output code,
.editor-output pre,
.message-text code,
.info-message-box code {
  background: var(--lozi-card2) !important;
  color: var(--lozi-text) !important;
  border: 1px solid var(--lozi-line2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

/* Beschriftung von Auswahlgruppen (Radio-Buttons) — stand zu dunkel. */
[class*="regform-module"] label,
[class*="regform-module"] legend,
fieldset legend,
.ui.form .grouped.fields > label {
  color: var(--lozi-text) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   Mobil nutzbar machen. Indicos Konferenz-Layout setzt .confTitle,
   .confSubTitleContent und #confSectionsBox auf feste 950px — auf dem Handy
   führt das zu horizontalem Scrollen. Da die Seite als App auf dem
   Home-Bildschirm landet, wird das hier aufgebrochen.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .confTitle,
  .confSubTitleContent,
  #confSectionsBox {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Menü und Inhalt untereinander statt nebeneinander */
  #confSectionsBox { display: block !important; }
  .conf-menu, #outer-menu-bar, .menu-column, .conference-menu {
    width: 100% !important;
    float: none !important;
    margin-bottom: 16px;
  }
  .content-column, .conference-content, .item-container {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  img.confLogo { max-height: 96px; }
  .confTitle h1, .header-data h1 { font-size: 1.5rem !important; }

  /* Eingabefelder auf volle Breite — Standard sind feste Pixelbreiten. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], textarea, select, .ui.input, .ui.input > input {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Grundsätzlich: nichts darf breiter als der Bildschirm werden. */
html, body { max-width: 100%; overflow-x: hidden; }
img, table { max-width: 100%; }

/* Konkrete Layout-Container von Indicos Konferenzseite: .conf_leftMenu steht
   links und ist gefloatet, .confBodyBox trägt den Inhalt. Auf schmalen
   Bildschirmen beides untereinander. */
@media (max-width: 900px) {
  .conf_leftMenu {
    width: 100% !important;
    float: none !important;
    position: static !important;
    margin: 0 0 16px 0 !important;
  }
  .confBodyBox {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .mainContent {
    width: auto !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }
}

/* ---------------------------------------------------------------------------
   Zeitplan (Theme "Indico style")

   Greift NUR, wenn der Zeitplan des Events auf ein statisches Theme steht
   (Layout -> Zeitplan-Theme). Die Vorgabe fuer Conference-Events ist "kein
   Theme": Dann zeichnet altes JavaScript den Zeitplan in ein Raster von fest
   verdrahteten 710 px Breite, mit absolut positionierten Bloecken, deren
   Groesse im Skript ausgerechnet und als style-Attribut gesetzt wird. Dagegen
   kommt kein Stylesheet an, und am Handy ist es unbenutzbar.

   Das statische Theme rendert stattdessen serverseitig eine Liste — und die
   laesst sich vollstaendig gestalten.

   Die Klassennamen stammen aus events/timetable/display/indico/*.html:
   .day-list > li > .day-header + ul.meeting-timetable > li.timetable-item,
   darin .timetable-time und .timetable-item-body. Verschachtelte Punkte einer
   Session liegen in ul.meeting-sub-timetable und tragen .nested.
   --------------------------------------------------------------------------- */

/* Der Rahmen, den das Theme um alles legt. */
.event-wrapper {
  background: transparent !important;
  color: var(--lozi-text) !important;
}

.event-wrapper .event-header {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 0.9rem !important;
  padding: 1.1rem 1.25rem !important;
  color: var(--lozi-text) !important;
}

.event-wrapper .event-header h1,
.event-wrapper .event-header .event-title h1 {
  font-family: var(--lozi-sans) !important;
  color: var(--lozi-text) !important;
}

.event-wrapper .event-header .details,
.event-wrapper .event-header .event-date {
  color: var(--lozi-muted) !important;
  font-family: var(--lozi-mono) !important;
  font-size: 0.85rem !important;
}

.event-sub-header {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 0.9rem !important;
  color: var(--lozi-text2) !important;
}

/* Tagesueberschrift: links statt mittig, in der Monospace als Ankerpunkt.
   Das Original setzt sie zentriert in 1.7em Kapitaelchen — bei fuenf Tagen
   untereinander zerfaellt die Seite damit in fuenf Plakate. */
.day-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.day-header {
  margin: 2.25rem 0 0.75rem !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.day-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lozi-line);
}

.day-header .day-title {
  display: inline-block !important;
  font-family: var(--lozi-mono) !important;
  font-variant: normal !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--lozi-accent2) !important;
  padding: 0 !important;
}

.day-header .js-go-to-day {
  color: var(--lozi-muted) !important;
}

/* Die Tageskarte. Das Original: weiss, runde Ecken, kraeftiger Schlagschatten. */
.meeting-timetable {
  background: var(--lozi-card2) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 0.9rem !important;
  box-shadow: none !important;
  padding: 0.35rem 1rem 0.35rem 0 !important;
  font-family: var(--lozi-sans) !important;
}

.meeting-timetable,
.meeting-sub-timetable {
  list-style: none !important;
}

/* Ein Programmpunkt. */
.meeting-timetable .timetable-item {
  display: flex !important;
  align-items: flex-start !important;
  border-top: 1px solid var(--lozi-line) !important;
}

.meeting-timetable > .timetable-item:first-child {
  border-top: 0 !important;
}

.meeting-timetable .timetable-item:not(:first-child) {
  margin-top: 0 !important;
}

/* Die Zeit. Das Original macht daraus ein blaues "Ribbon" mit Schatten, das
   links aus der Karte herausragt. Hier steht sie schlicht in der Monospace —
   untereinander bilden die Ziffern dann eine saubere Spalte. */
.timetable-time {
  flex-shrink: 0 !important;
  width: 8.5rem !important;
  padding: 0.95rem 0.9rem 0.95rem 1rem !important;
  line-height: 1.4 !important;
  font-family: var(--lozi-mono) !important;
  font-size: 0.82rem !important;
  color: var(--lozi-muted) !important;
  border: 0 !important;
  margin: 0 !important;
}

.timetable-time .start-time,
.timetable-time.top-level .start-time,
.timetable-time.nested .start-time {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
  color: var(--lozi-text) !important;
}

.timetable-time .start-time::before,
.timetable-time .start-time::after {
  display: none !important;   /* die Ribbon-Spitze aus dem Original */
}

.timetable-time .end-time {
  color: var(--lozi-muted) !important;
}

/* Inhalt rechts der Zeit. */
.timetable-item-body {
  flex: auto !important;
  min-width: 0 !important;
  padding: 0.85rem 0 0.9rem !important;
  margin-left: 0 !important;
}

.timetable-item-body:not(:first-child) {
  margin-left: 0 !important;
}

.timetable-item-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.6rem !important;
}

.timetable-item-header .timetable-title {
  font-family: var(--lozi-sans) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  padding-top: 0 !important;
  color: var(--lozi-text) !important;
  flex: auto !important;
}

.meeting-timetable .timetable-item .timetable-duration {
  flex-shrink: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-family: var(--lozi-mono) !important;
  font-size: 0.75rem !important;
  color: var(--lozi-muted) !important;
}

.meeting-timetable .timetable-item .timetable-duration::before {
  color: var(--lozi-muted) !important;
  margin-right: 0.25em !important;
}

/* Beschreibungstexte. */
.item-description,
.item-description.contrib-description,
.item-description.session-description,
.item-description.break-description {
  padding: 0.3rem 0 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: var(--lozi-text2) !important;
}

.item-description p {
  margin: 0 0 0.5em !important;
}

.item-description p:last-child {
  margin-bottom: 0 !important;
}

.item-description a {
  color: var(--lozi-accent) !important;
  /* Der Export bringt inline gesetzte Farben aus dem Vorjahressystem mit
     (style="color:rgb(4,103,221)"), die auf Dunkel nicht lesbar sind.
     Ein Attribut schlaegt eine Klasse — dagegen hilft nur !important. */
  text-decoration: underline !important;
  text-underline-offset: 0.15em !important;
  background: none !important;
}

/* Eine Session: der Arbeitstag als Klammer um seine Punkte. Sie bekommt eine
   Akzentkante, damit auf einen Blick klar ist, was zusammengehoert. */
.timetable-item.timetable-block > .timetable-item-body {
  border-left: 2px solid var(--lozi-accent) !important;
  padding-left: 0.9rem !important;
}

.timetable-item.timetable-block > .timetable-item-body > .timetable-item-header .timetable-title {
  color: var(--lozi-accent2) !important;
  font-size: 1.02rem !important;
}

/* Die Punkte innerhalb der Session. */
.meeting-sub-timetable {
  margin: 0.6rem 0 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--lozi-line) !important;
}

.meeting-sub-timetable .timetable-item {
  border-top: 1px solid var(--lozi-line) !important;
}

.meeting-sub-timetable > .timetable-item:first-child {
  border-top: 0 !important;
}

.meeting-sub-timetable .timetable-time {
  width: 5.5rem !important;
  padding-left: 0 !important;
  border-right: 0 !important;
}

.meeting-sub-timetable .timetable-title {
  font-weight: 500 !important;
  font-size: 0.92rem !important;
}

.meeting-sub-timetable .timetable-item-body {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Pausen (Indicos eigener Eintragstyp). Die Agenda nutzt sie derzeit nicht —
   Mahlzeiten kommen als normale Punkte aus dem Export. Die Regeln stehen hier,
   damit es nicht bricht, falls jemand spaeter eine Pause eintraegt. */
.timetable-item.timetable-break .timetable-title,
.timetable-time.break,
.timetable-time.break .end-time {
  color: var(--lozi-muted) !important;
}

.timetable-item.timetable-break .timetable-title {
  text-align: left !important;
  font-weight: 500 !important;
}

/* Am Handy passt keine Zeitspalte neben den Text. Zeit nach oben, Titel
   darunter — die Karte bleibt lesbar statt auf 40 % Breite zu schrumpfen. */
@media (max-width: 42rem) {
  .meeting-timetable {
    padding-right: 0.85rem !important;
  }

  .meeting-timetable .timetable-item,
  .meeting-sub-timetable .timetable-item {
    display: block !important;
    padding-left: 0.85rem !important;
  }

  .timetable-time,
  .meeting-sub-timetable .timetable-time {
    width: auto !important;
    display: block !important;
    padding: 0.8rem 0 0 !important;
  }

  .timetable-item-body,
  .meeting-sub-timetable .timetable-item-body {
    padding-top: 0.15rem !important;
  }

  .timetable-item.timetable-block > .timetable-item-body {
    padding-left: 0.7rem !important;
  }

  .meeting-sub-timetable {
    padding-left: 0 !important;
  }

  .timetable-item-header {
    flex-wrap: wrap !important;
  }
}

/* ---------------------------------------------------------------------------
   Die Seiten, in die der Zeitplan verlinkt

   Ohne diesen Abschnitt fuehrte jeder Klick im Zeitplan aus dem lozi-Look
   heraus auf eine weisse Indico-Seite. Zusammen mit dem Zeitplan bilden sie
   den Weg, den Teilnehmende tatsaechlich gehen: Zeitplan -> Beitragsliste ->
   einzelner Beitrag / Session.

   Klassen aus events/contributions/display/* und events/sessions/display/*.
   --------------------------------------------------------------------------- */

/* ---- Beitragsliste (/event/<id>/contributions/) ---- */

.contribution-list .contribution-list-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contribution-list .contribution-row {
  background: var(--lozi-card2) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 0.75rem !important;
  padding: 0.9rem 1.1rem !important;
  margin-bottom: 0.6rem !important;
}

.contribution-list .contrib-title,
.contribution-list .contrib-title .value {
  font-family: var(--lozi-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--lozi-text) !important;
  background: none !important;
}

.contribution-list .contrib-title a {
  color: var(--lozi-text) !important;
  text-decoration: none !important;
}

.contribution-list .contrib-title a:hover {
  color: var(--lozi-accent2) !important;
}

/* Die laufende Nummer tritt zurueck — sie ist ein Ordnungsmerkmal, kein Titel. */
.contribution-list .contrib-id {
  font-family: var(--lozi-mono) !important;
  font-size: 0.82em !important;
  color: var(--lozi-muted) !important;
  margin-right: 0.15em !important;
}

.contribution-list .contrib-time,
.contribution-list .contrib-session {
  font-family: var(--lozi-mono) !important;
  font-size: 0.8rem !important;
  color: var(--lozi-muted) !important;
  margin-top: 0.2rem !important;
}

.contribution-list .contrib-time::before,
.contribution-list .contrib-session::before {
  color: var(--lozi-muted) !important;
}

.contribution-list .description,
.contribution-list .description p {
  color: var(--lozi-text2) !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}

.contribution-list .description a,
.contribution-list .description-link,
.contribution-list .description-link-text {
  color: var(--lozi-accent) !important;
}

/* Werkzeugleiste ueber der Liste (Suchfeld, Filter, Zaehler). */
.page-content .toolbar .i-button.label,
.page-content .toolbar #filtering-state {
  background: var(--lozi-card2) !important;
  border-color: var(--lozi-line2) !important;
  color: var(--lozi-text2) !important;
}

.page-content .toolbar #search-input {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line2) !important;
  color: var(--lozi-text) !important;
}

.page-content .toolbar #search-input::placeholder {
  color: var(--lozi-muted) !important;
}

/* ---- Einzelner Beitrag und Session ---- */

/* Indico gliedert diese Seiten in <section>-Bloecke ohne eigene Klasse. */
.page-content > section {
  background: var(--lozi-card2) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 0.75rem !important;
  padding: 1rem 1.15rem !important;
  margin-bottom: 0.85rem !important;
}

.page-content > section > .header .header-row h3,
.page-content > section > .header h3 {
  font-family: var(--lozi-sans) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: var(--lozi-accent2) !important;
  margin: 0 0 0.35rem !important;
  border: 0 !important;
}

.page-content .description,
.page-content .description p,
.page-content .generic-data {
  color: var(--lozi-text2) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

.page-content .description a {
  color: var(--lozi-accent) !important;
}

.page-content table.other-fields,
.page-content table.other-fields td,
.page-content table.other-fields th {
  background: none !important;
  border-color: var(--lozi-line) !important;
  color: var(--lozi-text2) !important;
}

/* Anhaenge — auch der Leerzustand, der sonst grau auf weiss stand. */
.page-content .attachments-box,
.page-content .attachments-box .empty {
  background: none !important;
  color: var(--lozi-muted) !important;
}

.page-content .i-box.no-padding,
.page-content .i-box-content {
  background: none !important;
  border: 0 !important;
}

/* ---- Reste im Zeitplan ---- */

/* Die Verwaltungsknoepfe, die Indico Manager:innen in jeden Eintrag haengt.
   Fuer Besuchende sind sie nicht da; fuer die Orga sollen sie nicht leuchten. */
.timetable-item-actions .i-button {
  background: var(--lozi-card) !important;
  border-color: var(--lozi-line2) !important;
  color: var(--lozi-text2) !important;
}

.timetable-item-body:not(:hover) > .timetable-item-header .timetable-item-actions .manage-button:not(.selected) .i-button {
  background: var(--lozi-card) !important;
  border-color: var(--lozi-line) !important;
}

.timetable-item-details,
.session-details,
.timetable-item-details td,
.session-details td {
  background: none !important;
  border-color: var(--lozi-line) !important;
  color: var(--lozi-text2) !important;
}

/* Das Tagesmenue hinter dem Kalendersymbol der Tagesueberschrift. */
.days-dropdown,
.i-dropdown.days-dropdown {
  background: var(--lozi-card2) !important;
  border: 1px solid var(--lozi-line2) !important;
}

.days-dropdown a {
  color: var(--lozi-text2) !important;
}

.days-dropdown a:hover {
  background: var(--lozi-card) !important;
  color: var(--lozi-accent2) !important;
}

/* ---------------------------------------------------------------------------
   Navigationsleiste

   Das Markup kommt aus templates/core/events/display/_lozi_nav.html und steht
   auf allen Event-Seiten — auch auf der Tagesordnung, wo Indicos eigenes Menü
   gar nicht erst entsteht. Warum eine eigene Leiste noetig war, steht dort.

   Indicos linkes Menue wird hier ausgeblendet: Zwei Menues nebeneinander waeren
   der eigentliche Fehler. Es floatet mit 200 px links, `.confBodyBox` haelt
   dafuer 230 px Rand frei (Conf_Basic.scss) — beides muss weg, sonst bleibt
   eine leere Spalte stehen.
   --------------------------------------------------------------------------- */

.conf_leftMenu {
  display: none !important;
}

.confBodyBox {
  margin-left: 0 !important;
}

.lozi-nav {
  /* Klebt oben fest. Sollte ein Vorfahre `overflow` setzen und `sticky` damit
     wirkungslos machen, scrollt die Leiste einfach mit — wie bisher, nichts
     bricht. */
  position: sticky;
  top: 0;
  z-index: 40;

  margin: 0 auto 1.25rem;
  max-width: 950px;          /* dieselbe Breite wie #confSectionsBox */
  padding: 0.35rem 0;
  background: var(--lozi-bg);
  border-bottom: 1px solid var(--lozi-line);
}

.lozi-nav-liste {
  display: flex;
  gap: 0.25rem;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;          /* lieber schieben als umbrechen */
  scrollbar-width: none;
}

.lozi-nav-liste::-webkit-scrollbar {
  display: none;
}

.lozi-nav-punkt {
  /* Indicos Listen-Regeln aus dem Legacy-CSS treffen sonst auch diese hier. */
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  list-style: none !important;
}

.lozi-nav-link {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  font-family: var(--lozi-sans) !important;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--lozi-text2) !important;
  background: none !important;
}

.lozi-nav-link:hover,
.lozi-nav-link:focus-visible {
  background: var(--lozi-card2) !important;
  color: var(--lozi-text) !important;
}

/* Der aktive Punkt: Farbe und Gewicht, sonst nichts.
   Vorher trug er zusaetzlich eine Flaeche und eine eingerueckte Kante — die
   legte sich um die abgerundete Ecke und sah aus wie ein blauer Schimmer.
   Das Schriftgewicht ersetzt sie: Es ist auch dann ein Unterschied, wenn
   jemand die Farbe nicht unterscheiden kann, und `aria-current="page"` in der
   Vorlage sagt es Screenreadern ohnehin. */
.lozi-nav-aktiv,
.lozi-nav-aktiv:hover {
  background: none !important;
  box-shadow: none !important;
  color: var(--lozi-accent2) !important;
  font-weight: 600;
}

/* Am Handy unten festnageln — dort ist der Daumen, und oben ist der Platz
   ohnehin knapp. `fixed` statt `sticky`, das haengt an keinem Vorfahren. */
@media (max-width: 48rem) {
  .lozi-nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    max-width: none;
    margin: 0;
    padding: 0.2rem 0.4rem;
    padding-bottom: calc(0.2rem + env(safe-area-inset-bottom, 0px));
    background: var(--lozi-bg);
    border-top: 1px solid var(--lozi-line2);
    border-bottom: 0;
    box-shadow: 0 -0.4rem 1.2rem rgba(0, 0, 0, 0.35);
  }

  .lozi-nav-liste {
    justify-content: space-between;
  }

  .lozi-nav-link {
    padding: 0.55rem 0.5rem;
    font-size: 0.82rem;
  }

    /* Platz fuer die Leiste, sonst verdeckt sie die letzte Zeile der Seite.
     Der Hinweis "Hackathon als App" rueckt mit nach oben. */
  body:has(.lozi-nav) {
    padding-bottom: 3.5rem;
  }

  body:has(.lozi-nav) .lozi-install {
    bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------------------
   Nachbesserungen am Zeitplan-Theme und an der Beitragsliste
   --------------------------------------------------------------------------- */

/* Das Zeitplan-Theme setzt `.event-wrapper { width: 1000px }` — ein fester
   Wert aus einer Zeit vor Mobilgeraeten. Auf einem 390-px-Telefon steht die
   Seite damit tausend Pixel breit im Viewport: Man sieht einen Ausschnitt, in
   dem alles riesig wirkt, und muss quer scrollen. `max-width` statt `width`
   laesst sie schrumpfen, ohne am Desktop etwas zu aendern.

   Der obere Aussenabstand faellt weg, weil er die Navigationsleiste um 18 px
   tiefer setzte als auf den Konferenz-Seiten — beim Wechsel auf die
   Tagesordnung sprang die Leiste dadurch sichtbar nach unten. Den Abstand
   bringt jetzt die Leiste selbst mit, und der ist auf beiden Seiten derselbe. */
.event-wrapper {
  width: auto !important;
  max-width: 1000px;
  margin-top: 0 !important;
}

@media (max-width: 64rem) {
  .event-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 0.85rem;
  }
}

/* Beitragsliste: Indico kuerzt lange Beschreibungen auf 4,2 em und blendet den
   Rest mit `linear-gradient(transparent, white)` aus. Auf dunklem Grund ist das
   ein weisser Schleier ueber jedem Eintrag.

   Der Verlauf bleibt — er zeigt an, dass der Text weitergeht, und ohne ihn
   braeche die Beschreibung mitten in der Zeile ab. Er blendet nur in die Farbe
   der Karte aus statt nach Weiss. */
.contribution-list .description::before {
  background: linear-gradient(transparent 0.4em, var(--lozi-card2) 4.2em) !important;
}

/* Beim Ueberfahren zog Indico einen blauen Rahmen um den Eintrag. Eine feine
   helle Kante sagt dasselbe, ohne zu leuchten. */
.contribution-list .contribution-row:hover {
  border-color: var(--lozi-line2) !important;
}

/* Auf den Konferenz-Seiten steht die Leiste ausserhalb des Inhalts und richtet
   sich an dessen 950 px aus. Im Zeitplan-Theme liegt sie innerhalb von
   `.event-wrapper` — dort waere sie mit eigener Maximalbreite um 25 px
   eingerueckt gegenueber dem, was darunter steht. Sie nimmt deshalb die
   Breite des Wrappers an. */
.event-wrapper > .lozi-nav {
  max-width: none;
}

/* Der Anmelde-Punkt sitzt rechts, abgesetzt von den Inhaltsseiten: Er fuehrt
   nicht in den Hackathon, sondern ins System. */
.lozi-nav-anmelden {
  margin-left: auto !important;
}

.lozi-nav-anmelden .lozi-nav-link {
  color: var(--lozi-muted) !important;
}

.lozi-nav-anmelden .lozi-nav-link:hover,
.lozi-nav-anmelden .lozi-nav-link:focus-visible {
  color: var(--lozi-text) !important;
}

/* Am Handy verteilt die Leiste die Punkte gleichmaessig; ein automatischer
   linker Rand wuerde das kippen. Stattdessen eine feine Trennlinie. */
@media (max-width: 48rem) {
  .lozi-nav-anmelden {
    margin-left: 0 !important;
    border-left: 1px solid var(--lozi-line);
  }
}

/* ---------------------------------------------------------------------------
   „Datum/Zeit" auf der Übersicht — vorerst aus

   Der Kasten zeigt `Beginnt 23.11.2026, 07:00` und `Endet 27.11.2026, 14:30`.
   Beides sind die Ränder des Zeitplans, und 07:00 ist der Aufbau durch das
   Org-Team — für Besuchende liest sich das wie eine Aufforderung, um sieben da
   zu sein. Die genauen Zeiten sollen erst mit dem Programm veröffentlicht
   werden; der Zeitraum steht ohnehin schon in der Kopfzeile („23.–27. Nov.
   2026") und im Text.

   `:not(.condensed)` ist kein Feinschliff: Dieselbe Klasse `.infoline.date`
   trägt auf der Anmeldeseite der Kasten „Anmeldephase läuft / Frist
   06.11.2026" (`_regform_info.html`, dort in `.infogrid.condensed`). Ohne die
   Ausnahme verschwände die Anmeldefrist mit.

   Bewusst über CSS und nicht durch eine eigene Vorlage: In Indicos
   `display/conference.html` steckt der Kasten mitten in `{% block content %}`
   und hat keinen eigenen Block — ihn dort herauszunehmen hieße, die ganze
   Vorlage abzuschreiben, und die liefe nach dem nächsten Update auseinander.

   Damit steht er weiterhin im Quelltext der Seite, nur nicht im Bild. Wer die
   Zeiten wirklich nicht ausliefern will, muss sie am Event ändern — und dort
   ist jede Zeit sichtbar, auch eine ausgedachte.

   Wenn das Programm veröffentlicht wird: diesen Abschnitt löschen, fertig.
   --------------------------------------------------------------------------- */

.infogrid:not(.condensed) .infoline.date {
  display: none;
}

/* ---------------------------------------------------------------------------
   Der Infokasten (Datum, Ort, Material) am Handy

   Indico setzt `.infoline { float: left; width: 50% }` — zwei Spalten
   nebeneinander, egal wie breit der Schirm ist. Auf einem Telefon quetscht das
   ein 2-rem-Symbol und zwei Datumszeilen in 180 px. Untereinander ist es
   dieselbe Information in lesbar.
   --------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .infogrid .infoline {
    float: none !important;
    width: 100% !important;
    margin-top: 0.5rem;
  }

  .infogrid .infoline .icon {
    font-size: 1.4rem !important;
  }

  /* "Beginnt" links, die Uhrzeit rechts — die beiden Zeilen bilden dann eine
     Spalte, an der das Auge entlanglaeuft, statt mitten im Satz umzubrechen.
     Nur Absaetze mit Beschriftung; der Zeitzonen-Hinweis bleibt, wie er ist. */
  .infogrid .infoline.date .text p:has(.label) {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* iOS zoomt beim Antippen in ein Eingabefeld, dessen Schrift kleiner als 16 px
   ist — und bleibt danach zu nah dran. 16 px unterbindet das; es ist kein
   Schoenheitswert, sondern die Schwelle, die Safari prueft. Betrifft auf den
   Event-Seiten vor allem das Anmeldeformular. */
@media (max-width: 48rem) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   Auswahlfelder (`ind-select`)

   Im Anmeldeformular stand die T-Shirt-Größe als weißer Kasten mit schwarzer
   Schrift zwischen lauter dunklen Feldern. Der Grund: Indico 3.3 baut
   Auswahllisten nicht mehr aus einem `<select>`, sondern aus einem eigenen
   Element `<ind-select>` mit `.caption` als sichtbarem Kasten und einer Liste
   unter `[role=listbox]`. Die Regel für Eingabefelder weiter oben trifft davon
   nichts — sie kennt nur `select` und die Semantic-UI-Klassen, und das echte
   `<select>` liegt hier unsichtbar daneben.

   Die aufgeklappte Liste hängt in einem `<dialog>` und steht damit in der
   Top-Layer des Browsers, also außerhalb jedes Elternelements. Farben von dort
   zu erben geht nicht; sie müssen hier stehen.

   Der Fehlerzustand behält seine eigene Farbe. Ein rot umrandetes Feld ist die
   einzige Rückmeldung, die das Formular beim Absenden gibt — die dunkel
   mitzufärben hieße, sie zu verlieren.
   --------------------------------------------------------------------------- */

.ui.form ind-select .caption,
ind-select .caption {
  background: #000000 !important;
  color: var(--lozi-text) !important;
  border: 1px solid var(--lozi-line2) !important;
  border-radius: 8px !important;
  font-family: var(--lozi-mono) !important;
}

.ui.form ind-select:focus-visible .caption,
ind-select:focus-visible .caption,
.ui.form ind-select .caption:focus {
  border-color: var(--lozi-accent) !important;
}

.ui.form .field.error ind-select .caption {
  background: rgba(255, 0, 58, 0.1) !important;
  border-color: rgba(255, 0, 58, 0.55) !important;
  color: #ff003a !important;
}

ind-select [role="listbox"] {
  background: var(--lozi-card2) !important;
  border: 1px solid var(--lozi-line2) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
}

ind-select [role="option"] {
  color: var(--lozi-text2) !important;
  font-family: var(--lozi-mono) !important;
}

ind-select [role="option"]:not([aria-selected]):hover {
  background: var(--lozi-card) !important;
  color: var(--lozi-text) !important;
}

ind-select [aria-selected] {
  background: rgba(255, 0, 58, 0.18) !important;
  color: var(--lozi-text) !important;
}

/* Das Suchfeld über langen Listen. */
ind-select .option-filter input {
  background: #000000 !important;
  color: var(--lozi-text) !important;
  border: 1px solid var(--lozi-line2) !important;
}

/* ---------------------------------------------------------------------------
   Der Hinweiskasten „Anmeldung läuft"

   Indico faerbt Symbol, Beschriftung und Rahmen dieses Kastens mit seinem
   eigenen Cyan (#09c) — der letzte blaue Fleck auf der Uebersicht, nachdem
   alles andere auf den Akzent umgezogen ist. Er faellt auf, weil er direkt
   neben dem Anmeldeknopf steht.
   --------------------------------------------------------------------------- */

.action-box.highlight {
  border-color: rgba(255, 0, 58, 0.35) !important;
  background: rgba(255, 0, 58, 0.08) !important;
}

.action-box.highlight .section > .icon,
.action-box.highlight .section .text .label {
  color: var(--lozi-accent) !important;
}

/* ---------------------------------------------------------------------------
   Die Achterbahn im Kopf der Uebersicht

   Das Markup steht in templates/core/events/display/_lozi_achterbahn.html und
   nur dort — die Szene erscheint auf einer einzigen Seite. Gezeichnet wird sie
   aus /pwa/coaster.js, und das kommt aus derselben Quelle wie die Achterbahn
   auf der Coming-Soon-Seite und im Dashboard (coaster/eight.ts, eingesetzt von
   deploy/build-coaster.mjs). Es gibt also keine zweite Abschrift des Bildes.

   Sie steht links, Logo und Titel rechts daneben — dasselbe Bild wie auf den
   Motiven des Werbematerials.

   ─── Warum das über eine Überlagerung geht und nicht im Fluss ───

   In Indicos Kopfbereich hineinzukommen ginge nur, indem man dessen Vorlage
   abschreibt: Der ganze Kopf steht in einem einzigen `{% block page %}`, es
   gibt darin keinen Unterblock, und der einzige Einhängepunkt
   (`template_hook('conference-header')`) ist Plugins vorbehalten. Eine
   abgeschriebene Vorlage liefe nach dem nächsten Indico-Update auseinander,
   ohne dass es jemand merkt.

   Deshalb hängt die Szene vor dem Kopfbereich, nimmt aber keine Höhe ein
   (`height: 0`) und liegt als eigene Ebene darüber. Den Platz dafür schafft
   ein linker Innenabstand an `.confTitle` — Indicos eigenem Kasten, der Logo
   und Titel trägt. Beide Werte kommen aus derselben Variablen, sie können
   also nicht auseinanderlaufen.

   Bleibt das Skript aus oder fehlt die Rasterschrift, ist die Ebene leer und
   nur der Innenabstand bleibt stehen — der Kopfbereich rückt dann etwas ein,
   sonst passiert nichts.

   ─── Das Maß ───

   Die Zellenbreite ist das Maß der ganzen Szene: eine Spalte ist 0,6 und eine
   Zeile 1,13 davon. Sie ungleich zu skalieren reißt die Schienen auseinander,
   deshalb hängt beides an derselben Schriftgröße — und Breite wie Höhe des
   Kopfbereichs rechnen mit denselben 84 Spalten und 41 Zeilen.

   Die Größe kommt zuerst, der Kopfbereich richtet sich danach. Andersherum
   war es schon einmal, und das war der Fehler: In die vorhandenen 223 Pixel
   gequetscht war die Acht ein Fleck und der Wagen dreizehn Pixel breit —
   nicht zu erkennen. Die Szene bekommt deshalb ihre Höhe, und `.confTitleBox`
   bekommt eine Mindesthöhe daraus. Logo und Titel stehen daneben, senkrecht
   mittig.
   --------------------------------------------------------------------------- */

:root {
  /* 7 px je Zelle: die Szene wird damit 353 auf 324 Pixel — dieselbe
     Größenordnung wie im Entwurf, in der die Acht als Acht lesbar ist und der
     Wagen als Wagen. */
  --lozi-zelle: clamp(3px, 0.4vw, 4.6px);
  /* 84 Spalten à 0,6 Zellen, plus Luft zum Logo. */
  --lozi-bahn-breite: calc(50.4 * var(--lozi-zelle) + 0.75rem);
  /* 41 Zeilen à 1,13 Zellen, plus Luft oben und unten. */
  --lozi-bahn-hoehe: calc(46.33 * var(--lozi-zelle) + 2.5rem);
}

.lozi-bahn-band {
  position: relative;
  /* Nimmt keine Höhe ein: Die Szene liegt über dem Kopfbereich, nicht davor. */
  height: 0;
  z-index: 2;
  /* Sie ist Verzierung — der Titel darunter bleibt anklickbar. */
  pointer-events: none;
}

.lozi-bahn {
  /* Dieselbe Spalte wie `.confTitle` darunter, damit die Szene an derselben
     Kante beginnt wie das Logo ohne den Innenabstand begänne. */
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}

/* Senkrecht mittig in der Höhe, die der Kopfbereich von der Szene bekommen
   hat — dieselbe Rechnung, deshalb dieselbe Variable. */
.lozi-bahn-buehne {
  position: absolute;
  top: 1.25rem;
  left: 0;
}

/* Der Platz für die Szene. Indicos Kasten ist 950 px breit und global auf
   `border-box` gestellt, der Innenabstand schiebt den Inhalt also nach innen,
   statt den Kasten zu verbreitern.

   Der Geschwister-Selektor und nicht `.confTitle` allein: Den Innenabstand
   soll nur bekommen, wo die Szene auch steht. Das Anmeldeformular hat
   denselben Kopfbereich, aber keine Achterbahn — dort wäre er eine Einrückung
   ohne Grund. `~` und nicht `+`, weil zwischen beiden noch die zwei
   `<script>`-Elemente der Szene stehen. */
.lozi-bahn-band ~ .conf .confTitle {
  padding-left: var(--lozi-bahn-breite);
  /* Der Kopfbereich richtet sich nach der Szene, nicht umgekehrt. */
  min-height: var(--lozi-bahn-hoehe);
  /* Logo und Titel stehen senkrecht mittig neben der Acht statt oben zu
     kleben. `.confTitle` trägt nur die eine Überschrift, es gibt hier also
     nichts, was ein Flexkasten durcheinanderbringen könnte. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(var(--lozi-bahn-hoehe) * 0.12);
}

.lozi-bahn-band ~ .conf .confTitle h1,
.lozi-bahn-band ~ .conf .confTitle .conference-title-link {
  font-size: clamp(1.6rem, 2.6vw, 2.6rem) !important;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}

.lozi-bahn-bild,
.lozi-bahn-wagen {
  margin: 0 !important;
  font-family: var(--lozi-gitter);
  font-size: var(--lozi-zelle);
  line-height: 1.13;
  white-space: pre;
  user-select: none;
  /* Und das hier ist kein Feinschliff, sondern die Bedingung, unter der die
     Szene überhaupt zusammenhält.

     `body` setzt `letter-spacing: -0.01em` — gut für Fließtext, tödlich für
     ein Zeichenraster: Jedes Zeichen rückt ein Stück nach links, und die
     Spalte ist damit schmaler als die Zelle, mit der die Szene rechnet. Im
     Raster fällt das kaum auf, weil alle Zeilen gleich schrumpfen. Der Wagen
     aber ist ein eigenes, um 45 Grad gedrehtes Stück von fünf Zeichen; seine
     Hälften `▙▄` und `▄▟` liefen dadurch auseinander und lagen als zwei
     Winkel neben der Schiene statt als Wanne darauf.

     `normal` und nicht `0`: Die Schrift soll ihre eigene Laufweite behalten,
     nicht eine von uns verordnete. In soon.html steht deshalb gar kein
     `letter-spacing` — dort erbt die Szene keins. */
  letter-spacing: normal;
}

/* Wagen und Fahrgast liegen als eigenes Stueck ueber dem Raster und drehen
   sich um ihren Punkt auf der Schiene. Ins Raster geschrieben ginge das nicht:
   Eine Spalte ist halb so breit wie eine Zeile hoch, derselbe Wagen kaeme
   aufrecht doppelt so gross heraus wie flach. */
.lozi-bahn-wagen {
  position: absolute;
  top: 0;
  left: 0;
  /* Erst sichtbar, wenn die Szene ihn gesetzt hat — sonst stuende er beim
     ersten Bild in der Ecke. */
  visibility: hidden;
  pointer-events: none;
}

/* Die Wanne verdeckt die Schiene, ueber die sie faehrt. */
.lozi-bahn-wagen .tub {
  background: var(--lozi-bg);
}

/* ---- Die Szene gegen Indicos eigenes CSS abdichten --------------------

   Die Klassennamen, die `render()` vergibt, sind kurz und allgemein: `cart`,
   `rider`, `badge`, `star`, `rail`, `tie`, `tub`. Auf einer eigenen Seite wie
   soon.html ist das kein Problem — dort gibt es nichts sonst. Hier liegen sie
   in einer Anwendung mit tausenden Regeln, und eine davon heißt:

       span.badge { padding: .1em .4em; margin-left: .5em; font-size: .8em; … }

   Indicos blaue Plakette. Die Acht auf dem Wagen ist ein
   `<span class="badge tub">` und hat sich das Polster mitgenommen: 7,84 statt
   4,20 Pixel breit. Und weil `frameOf` in coaster/eight.ts die Zellenbreite am
   Wagenstück misst — mit gutem Grund, aus der Schriftgröße gerechnet käme sie
   falsch heraus, solange die Schrift lädt —, wurde aus 4,2 eine 5,4, und der
   Wagen saß ein Viertel der Bahnbreite neben der Schiene.

   Deshalb hier keine Einzelkorrektur, sondern eine Wand: Jedes Zeichen der
   Szene ist Text auf einem Raster und nichts sonst. Was von außen Polster,
   Rand, Schriftgröße oder Laufweite mitbringt, wird abgeräumt, bevor die
   Farbregeln darunter greifen. Das hält auch dem nächsten Indico-Update stand,
   das eine weitere Regel auf `.star` oder `.rail` legt.

   `background` steht bewusst ohne `!important`: Die Wanne braucht ihre eigene
   Fläche, und ihre Regel steht weiter unten. */
.lozi-bahn-bild span,
.lozi-bahn-wagen span {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  white-space: inherit !important;
  vertical-align: baseline !important;
  box-shadow: none !important;
  background: none;
}

/* Die Farben der Szene stehen so in ihrer Quelle und werden hier nicht
   nachgefaerbt: Sie sind der Grund, aus dem der Akzent dieser Seite ueberhaupt
   violett ist. Uebernommen aus soon.html. */
.lozi-bahn .b0 { color: #ffffff; }
.lozi-bahn .b1 { color: #ffffff; }
.lozi-bahn .b2 { color: #d9d9d9; }
.lozi-bahn .b3 { color: #d9d9d9; }
.lozi-bahn .b4 { color: #bebebe; }

.lozi-bahn .rail { opacity: 0.95; }
.lozi-bahn .tie  { opacity: 0.55; }

.lozi-bahn .g0 { color: #fff; opacity: 1; text-shadow: 0 0 7px #fff9, 0 0 18px rgba(255, 0, 58, 0.8), 0 0 34px rgba(255, 0, 58, 0.5); }
.lozi-bahn .g1 { color: #ffffff; opacity: 1; text-shadow: 0 0 8px rgba(255, 0, 58, 0.65), 0 0 20px rgba(255, 0, 58, 0.25); }
.lozi-bahn .g2 { color: #d9d9d9; opacity: 1; text-shadow: 0 0 7px rgba(255, 0, 58, 0.3); }
.lozi-bahn .g3 { color: #bebebe; opacity: 0.95; }
.lozi-bahn .g4 { color: #969696; opacity: 0.6; }

.lozi-bahn .cart  { color: #ff003a; opacity: 1; text-shadow: 0 0 9px #ff003a, 0 0 22px rgba(255, 0, 58, 0.4); }
.lozi-bahn .rider { color: #ffffff; opacity: 1; text-shadow: 0 0 9px #fff, 0 0 20px rgba(255, 0, 58, 0.5); }
/* Die Acht bleibt unfett — `font: inherit` oben räumt auch die Strichstärke
   ab. Die Rasterschrift gibt es ohnehin nur in einem Schnitt, und bei sieben
   Pixeln macht das Leuchten die Arbeit. */
.lozi-bahn .badge { color: #ff003a; opacity: 1; text-shadow: 0 0 10px #ff003a; }
.lozi-bahn .star  { color: #969696; }
.lozi-bahn .pylon { color: #969696; }

.lozi-bahn .cloud     { color: rgba(255, 255, 255, 0.22); }
.lozi-bahn .cloud-lit { color: rgba(255, 0, 58, 0.6); }

/* Am Handy ist der Kopfbereich ohnehin knapp, und die Szene waere dort so
   klein, dass von der Acht nur ein Fleck bliebe. */
/* Unter 1024 px hat der 950 breite Titelkasten keine Luft mehr: Die Szene
   nähme dort ein Viertel der Breite und der Titel bräche daneben um. Sie
   verschwindet, und mit ihr der Innenabstand — der Kopfbereich steht dann
   genau so da wie vor der Änderung. Verzierung, die am Handy im Weg wäre,
   gehört weg. */
@media (max-width: 64rem) {
  :root {
    --lozi-zelle: clamp(3px, 1.5vw, 7px);
  }

  .lozi-bahn-band {
    height: auto;
    padding: 1rem 0 0;
  }

  .lozi-bahn {
    margin: 0;
  }

  .lozi-bahn-buehne {
    position: relative;
    top: 0;
    width: calc(50.4 * var(--lozi-zelle));
    height: calc(46.33 * var(--lozi-zelle));
    margin: 0 auto;
  }

  .lozi-bahn-band ~ .conf .confTitle {
    padding-left: 0;
    padding-bottom: 0;
    min-height: 0;
    display: block;
    text-align: center;
  }

  .lozi-bahn-band ~ .conf .confTitle h1,
  .lozi-bahn-band ~ .conf .confTitle .conference-title-link {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   Datum und Ort am Handy

   `.confSubTitleContent` ist eine `.flexrow` und die steht auf `nowrap`:
   Datum, Adresse und das Suchfeld bleiben nebeneinander, egal wie schmal der
   Schirm ist. Auf einem 390er Telefon bleiben der Adresse dadurch rund 110 px,
   und „BWI GmbH, Karl-Legien-Str. 192, 53117 Bonn" bricht über sechs Zeilen um.

   Die Zeile bekommt deshalb die volle Breite und schickt das Suchfeld darunter.
   Nichts verschwindet, es steht nur untereinander.
   --------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .confSubTitleContent.flexrow {
    flex-flow: row wrap;
    gap: 0.5rem;
  }

  .confSubTitleContent > .confSubTitle {
    flex: 1 0 100%;
  }
}

.lozi-nav-zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.5rem;
}
.lozi-nav-zeile .lozi-nav-liste {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lozi-nav-logo {
  flex: none;
  /* Rechts, so verlangt es der BWI-Styleguide. */
  margin-left: auto;
  display: block;
  line-height: 0;
}
.lozi-nav-logo img {
  display: block;
  height: 4.5rem;
  width: auto;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
@media (max-width: 48rem) {
  .lozi-nav-logo { display: none; }
  .lozi-nav-zeile { padding: 0; }
}