/* ======================================================================
   NETZ – Transponderantrag / NETZ Transponder Request
   Vollstaendiges Indico-Konferenzstylesheet (Deutsch / English)
   Version: 5.1 | 29.10.2026

   Diese Datei ersetzt ALLE frueheren NETZ-CSS-Dateien vollstaendig.
   NICHT unter ein altes Stylesheet anhaengen.

   GETESTETE GRUNDLAGE: Indico 3.3.x Vorlagenstruktur (Konferenz).
   Die vom Benutzer erstellten Formularfelder bleiben zweisprachig.

   WICHTIG ZUM DOWNLOAD:
   Der Standard-Link "Get ticket" / "Ticket herunterladen" laedt
   Indicos TICKET-Vorlage herunter – nicht automatisch einen Antrag.
   Die Ticketvorlage muss die Antragsdaten und ein Unterschriftsfeld
   enthalten, bevor der Button sachlich "Formular herunterladen" heissen
   sollte. CSS aendert nur die Beschriftung, NICHT die heruntergeladene Datei.

   WICHTIG ZUR SPRACHE/BARRIEREFREIHEIT:
   Sprachabhaengige CSS-Texte sind eine rein visuelle Anpassung.
   Die Originaltexte bleiben im HTML (z.B. fuer Screenreader) vorhanden.
   Fuer eine vollstaendige, barrierefreie Loesung muessen die
   Indico-Vorlagen serverseitig angepasst werden.
   ====================================================================== */

/* 1 | Farben und bestehendes NETZ-Konferenzdesign ----------------------- */
:root {
  --conf-theme-header-bg: #1a64a0;
  --conf-theme-header-border-bottom: #0f4c80;
  --conf-theme-header-text: white;

  --conf-theme-subtitle-bg: #f5faff;
  --conf-theme-subtitle-border: #d5e4f1;
  --conf-theme-subtitle-text: #24425a;

  --conf-theme-menu-bg: #f6f6f6;
  --conf-theme-menu-border: #ccc;
  --conf-theme-menu-link: #275c86;
  --conf-theme-menu-selected: #bd891a;
  --conf-theme-menu-selected-bg: #dadada;
  --conf-theme-menu-selected-border: #d0d0d0;
  --conf-theme-hover-bg: #e0e0e0;
  --conf-theme-hover-color: var(--conf-theme-menu-link);
  --conf-theme-title-sprite-bg: transparent;
  --conf-theme-announcement-sprite-bg: transparent;
  --conf-theme-announcement-border-top: 1px solid var(--conf-theme-announcement-border);
  --conf-theme-announcement-border-bottom: none;

  --conf-theme-support-bg: #f6f6f6;
  --conf-theme-support-border: #ccc;
  --conf-theme-support-header-bg: #1a64a0;
  --conf-theme-support-header-text: #f3f3f3;
  --conf-theme-support-text: #aaa;

  --conf-theme-sprite-image: url('/images/conf/sprites_blue.png');

  --conf-theme-announcement-bg: #f5faff;
  --conf-theme-announcement-border: #c2d6e7;
  --conf-theme-announcement-text: #0f283d;
}

/* 2 | Datum, Ort und Zeitzone im Startseitenbereich ausblenden ---------- */
.datePlace {
  display: none !important;
}

#main-content.conferenceDetails .infogrid > .infoline.date,
#main-content.conferenceDetails .infogrid > .infoline.location {
  display: none !important;
}

/* 3 | Dateianhaenge und Sicherheitsordnungen nur auf der Startseite ---- */
/* Dateianhaenge bleiben gespeichert und als direkte Links erreichbar. */
#main-content.conferenceDetails .infogrid > .infoline.material.material-list {
  display: none !important;
}

/* 4 | Startseite: Antragsbalken (offene Registrierung) ------------------ */
/* Titel "Anmeldung" visuell durch "Transponderantrag" ersetzen. */
.action-box.highlight:has(> .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"])
  > .section > .icon-ticket + .text > .label {
  font-size: 0 !important;
}

.action-box.highlight:has(> .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"])
  > .section > .icon-ticket + .text > .label::after {
  content: "Transponderantrag";
  font-size: 14px !important;
  line-height: 1.4;
  font-weight: 700;
}

/* Alte Startseitenbeschreibung ersetzen. */
.action-box.highlight:has(> .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"])
  > .section > .icon-ticket + .text > div:not(.label) {
  font-size: 0 !important;
}

.action-box.highlight:has(> .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"])
  > .section > .icon-ticket + .text > div:not(.label)::after {
  content: "Bitte füllen Sie das Antragsformular vollständig aus.";
  display: block;
  font-size: 14px !important;
  line-height: 1.45;
  font-weight: 400;
}

/* Startseiten-Button: funktionierende Hoehe und Indico-Pfeil behalten. */
.action-box.highlight > .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 142px;
  min-height: 22px;
  box-sizing: content-box;
  padding: 7px 31px 7px 13px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  white-space: nowrap;
  color: transparent !important;
  background: #2997c9 !important;
  border: 1px solid #2385b5 !important;
  border-radius: 3px;
  text-shadow: none !important;
  box-shadow: none;
}

/* Beim Indico-next-Button liegt der rechte Pfeil auf ::after.
   Der linke Ersatztext kommt deshalb auf ::before. */
.action-box.highlight > .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"]::before {
  content: "Jetzt ausfüllen" !important;
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  display: block;
  margin: 0 !important;
  padding: 0;
  color: #fff !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.4 !important;
  white-space: nowrap;
  text-indent: 0;
  pointer-events: none;
}

.action-box.highlight > .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"]::after {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  pointer-events: none;
}

.action-box.highlight > .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"]:hover,
.action-box.highlight > .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"]:focus-visible {
  background: #197ea9 !important;
  border-color: #176f95 !important;
}

/* 5 | Formularseite UND Abschlussseite: orange "Anmeldung" verbergen --- */
/* Die Abschlussseite hat KEIN #registration-form-submission-container!
   Deshalb erfassen wir sowohl das offene Formular als auch die
   Erfolgsbox. Der Untertitel "Antrag Transponder" bleibt sichtbar. */
.conference-page:has(#registration-form-submission-container) header .title-with-actions > h2#main-content,
.conference-page:has(.action-box.accept > .section > .icon-quill) header .title-with-actions > h2#main-content,
.conference-page:has(#registration-form-submission-container) header h2#main-content,
.conference-page:has(.action-box.accept > .section > .icon-quill) header h2#main-content {
  display: none !important;
}

/* 6 | Abschlussseite: Erfolgsmeldung, nur Status "complete" ------------ */
/* Der CSS-Selektor basiert auf dem Indico-Template
   registration_summary.html (action-box.accept, icon-quill, label).
   Status "pending", "rejected" und "withdrawn" bleiben unangetastet. */
.conference-page .action-box.accept > .section > .icon-quill + .text > .label {
  font-size: 0 !important;
  line-height: 0 !important;
}

.conference-page .action-box.accept > .section > .icon-quill + .text > .label::after {
  content: "Ihr Antrag wurde eingereicht";
  display: block;
  font-size: 17px !important;
  line-height: 1.4 !important;
  font-weight: 700;
}

/* Gut lesbarer Hinweis direkt in der gruenen Erfolgsmeldung. */
.conference-page .action-box.accept > .section > .icon-quill + .text::after {
  content: "Bitte laden Sie das Formular herunter, lassen Sie es von Ihrer Arbeitsgruppenleitung unterschreiben und vereinbaren Sie anschließend einen Termin zur Abholung des Transponders. Weitere Informationen erhalten Sie per E-Mail.";
  display: block;
  margin-top: 12px;
  max-width: 76ch;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 400;
  color: #215a37;
  white-space: normal;
}

/* 7 | Abschlussseite: "Get ticket" als "Formular herunterladen" ------- */
/* Indicos Ticket-Icon sitzt auf ::before; deshalb nutzen wir fuer
   die neue sichtbare Beschriftung ::after statt ::before. */
.conference-page .action-box.accept > .section > .toolbar a.i-button.accept.icon-ticket {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 9px;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 14px !important;
  font-size: 0 !important; /* Originaltext im Layout verbergen */
  line-height: 1.4 !important;
  white-space: nowrap;
}

/* Urspruengliches Ticket-Icon sichtbar halten. */
.conference-page .action-box.accept > .section > .toolbar a.i-button.accept.icon-ticket::before {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Sichtbarer Ersatztext mit eigener Schriftgroesse. */
.conference-page .action-box.accept > .section > .toolbar a.i-button.accept.icon-ticket::after {
  content: "Formular herunterladen" !important;
  display: inline-block;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  white-space: nowrap;
}

/* 8 | Englisch: Startseite, Formulartitel, Abschlussseite --------------- */
/* Die folgenden Regeln greifen bei html lang="en" / "en-GB" / "en_US". */
html[lang^="en"] .action-box.highlight:has(> .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"])
  > .section > .icon-ticket + .text > .label::after {
  content: "Transponder request" !important;
}

html[lang^="en"] .action-box.highlight:has(> .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"])
  > .section > .icon-ticket + .text > div:not(.label)::after {
  content: "Please complete the request form in full." !important;
}

html[lang^="en"] .action-box.highlight > .section > .toolbar > a.i-button.next.highlight[href$="/registrations/"]::before {
  content: "Fill out form" !important;
}

/* Der individuell angelegte Indico-Formularname ist deutsch.
   Auf dem offenen Formular UND auf der Abschlussseite nur optisch
   als Englisch darstellen. */
html[lang^="en"] .conference-page:has(#registration-form-submission-container)
  header .subtitle-container > h3,
html[lang^="en"] .conference-page:has(.action-box.accept > .section > .icon-quill)
  header .subtitle-container > h3 {
  font-size: 0 !important;
}

html[lang^="en"] .conference-page:has(#registration-form-submission-container)
  header .subtitle-container > h3::after,
html[lang^="en"] .conference-page:has(.action-box.accept > .section > .icon-quill)
  header .subtitle-container > h3::after {
  content: "NETZ Transponder Request";
  display: block;
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1.3;
}

html[lang^="en"] .conference-page .action-box.accept > .section > .icon-quill + .text > .label::after {
  content: "Your form has been submitted" !important;
}

html[lang^="en"] .conference-page .action-box.accept > .section > .icon-quill + .text::after {
  content: "Please download the form, have it signed by your research group leader, and then arrange an appointment to collect your transponder. Further information will be sent to you by email." !important;
}

html[lang^="en"] .conference-page .action-box.accept > .section > .toolbar a.i-button.accept.icon-ticket::after {
  content: "Download form" !important;
}

/* 9 | Linke Navigation im Englischen (zwei Menuepunkte) ---------------- */
/* Die zwei DE-Menuepunkte werden weiterhin DIREKT in Indico verwaltet.
   Die englische Sicht ist eine rein visuelle Ueberlagerung.
   Diese Regeln greifen nur bei genau zwei Hauptmenuepunkten. */
html[lang^="en"] .conf_leftMenu #outer:has(> li:nth-child(2):last-child) > li:nth-child(1) > a,
html[lang^="en"] .conf_leftMenu #outer:has(> li:nth-child(2):last-child) > li:nth-child(2) > a {
  font-size: 0 !important;
}

html[lang^="en"] .conf_leftMenu #outer:has(> li:nth-child(2):last-child) > li:nth-child(1) > a::after {
  content: "Home";
  font-size: 24px !important;
  line-height: 1.4;
}

html[lang^="en"] .conf_leftMenu #outer:has(> li:nth-child(2):last-child) > li:nth-child(2) > a::after {
  content: "Fill out form";
  font-size: 24px !important;
  line-height: 1.4;
}

/* 10 | Antragsformular: "Register" / "Registrieren" ersetzen ----------- */
/* Nur der Absende-Button des oeffentlichen Antragsformulars.
   Andere Buttons, Indico-Kontoanmeldung und Verwaltung bleiben unberuehrt.
   Semantic UIs ::after-Ladeanzeige bleibt waehrend des Sendens erhalten,
   da die folgenden Regeln nur fuer Buttons ohne .loading gelten.
   Wie bei den uebrigen Beschriftungen ist dies ein visueller Ersatz. */
.conference-page #registration-form-submission-container button[type="submit"]:not(.loading) {
  font-size: 0 !important;
  line-height: 1.4 !important;
  min-width: 180px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 10px 18px !important;
  white-space: nowrap;
}

.conference-page #registration-form-submission-container button[type="submit"]:not(.loading)::after {
  content: "Antrag absenden" !important;
  display: inline-block;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  transform: none;
  animation: none;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.4 !important;
  white-space: nowrap;
  pointer-events: none;
}

html[lang^="en"] .conference-page #registration-form-submission-container button[type="submit"]:not(.loading)::after {
  content: "Submit application" !important;
}

/* Ende der vollstaendigen CSS-Datei. */