/* =========================================================================
   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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/pwa/fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/pwa/fonts/IBMPlexSans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/pwa/fonts/IBMPlexSans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/pwa/fonts/IBMPlexSans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/pwa/fonts/JetBrainsMono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --lozi-bg: #0a0c10;
  --lozi-panel: #0b0e13;
  --lozi-card: #0c0f14;
  --lozi-card2: #11141a;
  --lozi-line: rgba(255, 255, 255, 0.09);
  --lozi-line2: rgba(255, 255, 255, 0.15);
  --lozi-text: #eef2f7;
  --lozi-text2: #d3dae4;
  --lozi-muted: #9aa4b5;
  --lozi-accent: #5e9bff;
  --lozi-accent2: #8bb8ff;
  --lozi-good: #4ec98a;
  --lozi-warn: #e7b052;
  --lozi-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --lozi-sans: "IBM Plex Sans", system-ui, sans-serif;
}

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-mono);
  letter-spacing: -0.02em;
}

/* 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;
}

.conference-header img, .event-logo img, #conf-logo, .header-logo img {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}

/* 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;
}

.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: #0e1218 !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: #06121f !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: #06121f !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(94, 155, 255, 0.10) !important;
  border: 1px solid rgba(94, 155, 255, 0.35) !important;
  color: var(--lozi-text) !important;
}
.message-box.success, .ui.success.message {
  background: rgba(78, 201, 138, 0.10) !important;
  border-color: rgba(78, 201, 138, 0.35) !important;
}
.message-box.warning, .ui.warning.message {
  background: rgba(231, 176, 82, 0.10) !important;
  border-color: rgba(231, 176, 82, 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 {
  max-height: 132px;
  width: auto;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
}

/* Linke Event-Navigation (Übersicht / Anmeldung) */
.menuConfTitle,
.menuConfTitle a,
.event-menu-heading,
.conference-title-link {
  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: #0e1218 !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(94, 155, 255, 0.10) !important;
  border: 1px solid rgba(94, 155, 255, 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(78, 201, 138, 0.10) !important;
  border-color: rgba(78, 201, 138, 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(94, 155, 255, 0.10) !important;
  border: 1px solid rgba(94, 155, 255, 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(78, 201, 138, 0.10) !important;
  border-color: rgba(78, 201, 138, 0.35) !important;
}

/* 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-card);
    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);
  }
}

/* ---------------------------------------------------------------------------
   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;
  }
}