/*
 * Seezeit · Kopfzeile, Menü, Fragenindex, Sprachwahl und Fortschritt (Paket 1.3).
 *
 * Aufbau des Elternthemes (subviews/header/nav_bar.twig): header#survey-nav > .container-fluid > Logo und
 * #navbar-menu (Knopf #navbar-toggler, Liste #main-dropdown). JavaScript (theme.js, NavbarScripts) ersetzt den Inhalt
 * von #main-dropdown beim Wechsel in die Unterlisten (Sprache, Fragenindex); die Regeln stützen sich deshalb auf
 * #main-dropdown und nicht auf #language-dropdown oder #index-dropdown (qa/m0/inventar.md, Abschnitt 2).
 * Das Sprachlabel selbst bleibt unverändert (Meilenstein M2).
 */

/* ========================================================================== Kopfzeile */
/* Weiß, Logo links, Menü rechts. Im Fluss und nicht fest (BRIEF.md 3; Kriterium 14), mit feiner Unterkante statt Schatten.
   Die Fläche setzt das Elterntheme per !important auf Weiß; das passt. */
#survey-nav.navbar {
  position: static;
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--kern-color-layout-border);
  box-shadow: none;
}
#survey-nav > .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kern-space-16);
  width: 100%;
  max-width: calc(var(--sz-content-max) + 2 * var(--sz-gutter));
  margin: 0 auto;
  padding: var(--kern-space-16) var(--sz-gutter);
}
@media (max-width: 550px) {
  #survey-nav > .container-fluid {
    padding-top: var(--kern-space-12);
    padding-bottom: var(--kern-space-12);
  }
}

/* Logo: 152 px, bis 550 px 128 px (Bildgröße in px, damit der Textzoom es nicht aufbläht) */
#survey-nav .navbar-brand {
  margin: 0;
  padding: 0;
}
#survey-nav .logo {
  display: block;
  width: 152px;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  padding: 0;
  object-fit: contain;
}
@media (max-width: 550px) {
  #survey-nav .logo {
    width: 128px;
  }
}

/* ========================================================================== Menüknopf (öffnet Sprachwahl und Fragenindex) */
/* Sichtbare Kontur in Eingabefarbe #486a7c; Ziel mindestens 44 x 44 px. Zustände: normal, Hover, Fokus (Ring in seezeit-aktionen.css),
   gedrückt, geöffnet. */
#survey-nav #navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--kern-space-8);
  line-height: 1;
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-m);
}
#survey-nav #navbar-toggler .ri-more-fill {
  font-size: 1.5rem;
  line-height: 1;
}
#survey-nav #navbar-toggler:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--kern-color-action-default);
}
#survey-nav #navbar-toggler:active {
  transform: translateY(2px);
}
/* geöffnet: dunkle Kontur und Hover-Fläche, auch ohne Zeiger */
#survey-nav #navbar-toggler[aria-expanded="true"],
#survey-nav #navbar-toggler.show {
  background-color: var(--color-surface-hover);
  border-color: var(--kern-color-action-default);
}

/* ========================================================================== Menü (geöffnet) */
/* Fläche wie eine Karte der Ebene +2: Kontur, kräftigere Unterkante, Radius */
#survey-nav #main-dropdown {
  min-width: min(16rem, calc(100vw - 2 * var(--sz-gutter)));
  max-width: calc(100vw - 2 * var(--sz-gutter));
  padding: var(--kern-space-8) 0;
  font-size: var(--kern-font-size-16);
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--kern-color-layout-border);
  border-bottom: 3px solid var(--kern-color-layout-edge);
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-raised);
}
#survey-nav a {
  text-decoration: none;
}

/* Abschnittsköpfe des Menüs ("Sprache auswählen", "Umfrageoptionen"): kleine gedämpfte Versalien, 14 px */
#survey-nav #main-dropdown .dropdown-header {
  padding: var(--kern-space-12) var(--kern-space-16) var(--kern-space-4);
  font-size: var(--kern-font-size-14);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--kern-color-layout-text-muted);
  white-space: normal;
}
#survey-nav #main-dropdown .dropdown-divider {
  height: 0;
  margin: var(--kern-space-8) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--kern-color-layout-border);
  opacity: 1;
}

/* Zeilen: Sprachwahl, Zurück, Fragenindex, "Später fortsetzen". Mindestens 44 px hoch, ganze Zeile klickbar. */
#survey-nav #main-dropdown li > a,
#survey-nav #main-dropdown .dropdown-item,
#survey-nav #main-dropdown .nav-link {
  display: flex;
  align-items: center;
  gap: var(--kern-space-8);
  min-height: 44px;
  padding: var(--kern-space-8) var(--kern-space-16);
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.4;
  color: var(--kern-color-layout-text-default);
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Das Elterntheme verkleinert die Zeilen bis 768 px Breite per !important auf 0,7 em (12,8 px). Das ist zu klein zum
   Lesen und Treffen; nur !important mit gleicher Spezifität weiter hinten im Dokument nimmt es zurück. */
@media (max-width: 768px) {
  #survey-nav #main-dropdown li a {
    font-size: var(--kern-font-size-16) !important;
  }
}
/* Hover, Fokus und gedrückt: Text bleibt dunkelblau (das Elterntheme färbt Menütext bei Hover mit der Link-Hover-Farbe).
   Die Fläche bei Hover und Fokus liefert das Elterntheme per !important als Ghost-Hover Neutral-100 (KNOEPFE.md); sie
   bleibt. Gedrückt zeigt dieselbe Fläche, nicht das Orange des Auswahlmarkers, das Bootstrap für .dropdown-item:active setzt. */
#survey-nav #main-dropdown li > a:hover,
#survey-nav #main-dropdown .dropdown-item:hover,
#survey-nav #main-dropdown .nav-link:hover,
#survey-nav #main-dropdown li > a:focus,
#survey-nav #main-dropdown .dropdown-item:focus,
#survey-nav #main-dropdown .nav-link:focus {
  color: var(--kern-color-layout-text-default);
}
#survey-nav #main-dropdown li > a:active,
#survey-nav #main-dropdown .dropdown-item:active,
#survey-nav #main-dropdown .nav-link:active {
  color: var(--kern-color-layout-text-default);
  background-color: var(--kern-color-neutral-100);
}
/* der Ring liegt innen, damit er im scrollenden Menü nicht abgeschnitten wird */
#survey-nav #main-dropdown :focus-visible {
  outline-offset: -3px;
}
/* Pfeil der Sprachzeile: rechts, vertikal zentriert */
#survey-nav #main-dropdown .dropdown-toggle {
  position: relative;
  padding-right: var(--kern-space-48);
}
#survey-nav #main-dropdown .dropdown-toggle::after {
  top: 50%;
  right: var(--kern-space-12);
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
}
#survey-nav #main-dropdown .back-link::before {
  left: 0;
  margin-right: 0;
  font-size: 1.25rem;
}

/* ========================================================================== Fragenindex im Menü */
/* Zeilen des Listengruppen-Aufbaus des Elterntheme (li.list-group-item > a.dropdown-item) ohne doppeltes Polster.
   Die aktuelle Gruppe ist deaktiviert (a.disabled) und wird fett auf stiller Fläche dargestellt. Den Status
   (noch offen, Fehler) zeigt der Abschnitt "Status im Fragenindex" weiter unten als Symbol mit Text. */
#survey-nav #main-dropdown .list-group-item {
  padding: 0;
  background: none;
  border: 0;
}
#survey-nav #main-dropdown .list-group-item a.disabled,
#survey-nav #main-dropdown .index-item-current a {
  font-weight: 800;
  opacity: 1;
  color: var(--kern-color-layout-text-default);
  background-color: var(--kern-color-neutral-050);
}
/* Das Elterntheme markiert den Status mit einem 8 px breiten Balken links (a.index-warning, a.index-danger) und gibt allen
   anderen Zeilen einen durchsichtigen Rand gleicher Breite. Ein Seitenbalken gehört nicht zu den Mustern der Seezeit-Vorgaben
   (Signaturkante ist die Unterkante); beides entfällt, alle Zeilen beginnen gleich. */
#survey-nav #main-dropdown .list-group-item a.index-warning,
#survey-nav #main-dropdown .list-group-item a.index-danger,
#survey-nav #main-dropdown .list-group-item a:not(.index-danger):not(.index-warning) {
  border-left: 0;
}

/* ========================================================================== Fragenindex ohne JavaScript */
/* Ohne JavaScript steht der Index als Block unter der Navigation (div.index-wrapper > div.list-group > Überschrift und
   Knopfzeilen, subviews/navigation/question_index_buttons.twig). Gleiche Zeilen wie im Menü: mindestens 48 px hoch, der Status
   als Symbol mit Text unter dem Namen (Abschnitt "Status im Fragenindex"), die aktuelle Gruppe fett auf stiller Fläche. */
.index-wrapper .list-group {
  gap: var(--kern-space-8);
  border-radius: 0;
}
.index-wrapper .list-group > .list-group-item:first-child {
  padding: 0;
  background: none;
  border: 0;
}
.index-wrapper .list-group-item-heading {
  margin: 0;
  font-size: var(--kern-font-size-14);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kern-color-layout-text-muted);
}
.index-wrapper button.list-group-item {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--kern-space-8) var(--kern-space-16);
  font-size: var(--kern-font-size-16);
  font-weight: 600;
  line-height: 1.4;
  color: var(--kern-color-layout-text-default);
  text-align: left;
  background-color: var(--color-surface-active);
  border: 1px solid var(--kern-color-layout-border);
  border-radius: var(--kern-radius-l);
}
.index-wrapper button.list-group-item:hover:not(:disabled):not(.disabled) {
  background-color: var(--color-surface-hover);
}
.index-wrapper button.list-group-item:disabled,
.index-wrapper button.list-group-item.disabled {
  font-weight: 800;
  color: var(--kern-color-layout-text-default);
  background-color: var(--kern-color-neutral-050);
  opacity: 1;
}

/* ========================================================================== Status im Fragenindex */
/* Gilt für den Index im Menü (a.index-warning, a.index-danger) und für den Index ohne JavaScript (button.list-group-item-warning,
   -danger). Der Status steht als Symbol mit kurzem Text in einer Zeile unter dem Namen der Gruppe, nicht als Seitenbalken und
   nicht allein durch Farbe (KOMPONENTEN.md: Farbe trägt nie allein). Noch offen: Dunkelblau, leerer Kreis. Fehler: Fehlerrot,
   gefüllter Kreis mit Ausrufezeichen. Sind beide gesetzt, gewinnt der Fehler (steht weiter hinten). Beantwortete Gruppen tragen
   keine Marke. Das Symbol ist ein Zeichen der Schrift Remix Icon (vom Elterntheme geladen), der Text steht in der Seitenschrift
   (die Schrift springt je Zeichen). Der Text ist zugleich der Name für Screenreader: Nach dem Schrägstrich steht der
   Alternativtext ohne Symbol; wo das nicht unterstützt wird, gilt die Zeile davor.
   Wortlaut vorläufig: Ohne Twig-Überschreibung lässt sich kein übersetzter Text ausgeben, daher Deutsch als Standard und Englisch
   nach lang. Der Index wird in M2 neu gestaltet; dort kommt der Text aus gT(). */
#survey-nav #main-dropdown .list-group-item a.index-warning,
#survey-nav #main-dropdown .list-group-item a.index-danger {
  flex-wrap: wrap;
  row-gap: 0;
}
#survey-nav #main-dropdown .list-group-item a.index-warning::after,
#survey-nav #main-dropdown .list-group-item a.index-danger::after,
.index-wrapper button.list-group-item-warning::after,
.index-wrapper button.list-group-item-danger::after {
  display: block;
  flex: 0 0 100%;
  font-family: remixicon, var(--bs-font-sans-serif);
  font-synthesis: none;
  font-size: var(--kern-font-size-14);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
#survey-nav #main-dropdown .list-group-item a.index-warning::after,
.index-wrapper button.list-group-item-warning::after {
  color: var(--kern-color-layout-text-default);
  content: "\00eb7d\0000a0\0000a0Noch offen";
  content: "\00eb7d\0000a0\0000a0Noch offen" / "Noch offen";
}
#survey-nav #main-dropdown .list-group-item a.index-warning:lang(en)::after,
.index-wrapper button.list-group-item-warning:lang(en)::after {
  content: "\00eb7d\0000a0\0000a0Still open";
  content: "\00eb7d\0000a0\0000a0Still open" / "Still open";
}
#survey-nav #main-dropdown .list-group-item a.index-danger::after,
.index-wrapper button.list-group-item-danger::after {
  color: var(--kern-color-feedback-danger);
  content: "\00eca0\0000a0\0000a0Fehler";
  content: "\00eca0\0000a0\0000a0Fehler" / "Fehler";
}
#survey-nav #main-dropdown .list-group-item a.index-danger:lang(en)::after,
.index-wrapper button.list-group-item-danger:lang(en)::after {
  content: "\00eca0\0000a0\0000a0Error";
  content: "\00eca0\0000a0\0000a0Error" / "Error";
}

/* ========================================================================== Fortschritt */
/* Orange Füllung auf heller Spur (BRIEF.md 3, U12). Die Füllung hat allein zu wenig Kontrast, deshalb steht der Wert
   zusätzlich als dunkelblauer Text über dem Balken. Der Satz ("Du hast 22 % dieser Umfrage fertiggestellt.") steht schon im
   Markup des Elterntheme: als title (Server-HTML, also auch ohne JavaScript) und, sobald Bootstrap den Tooltip aufbaut,
   als data-bs-original-title. Er erscheint hier als erzeugter Inhalt vor dem Balken; die Screenreader-Fassung in
   .visually-hidden und role="progressbar" mit aria-valuenow bleiben unberührt. */
.top-container {
  width: 100%;
  max-width: calc(var(--sz-content-max) + 2 * var(--sz-gutter));
  margin: 0 auto;
  padding: var(--sz-gutter-top) var(--sz-gutter) 0;
}
.top-container .ls-progress-container {
  padding: 0;
}
#progressbar-top::before {
  content: attr(title);
  display: block;
  margin: 0 0 var(--kern-space-8);
  font-size: var(--kern-font-size-14);
  font-weight: 600;
  line-height: 1.4;
  color: var(--kern-color-layout-text-default);
}
#progressbar-top[data-bs-original-title]::before {
  content: attr(data-bs-original-title);
}
.top-container .progress {
  height: 8px;
  margin: 0;
  border-radius: var(--kern-radius-l);
}
.top-container .progress-bar {
  min-width: 0;
}

/* ========================================================================== Sprachwahl in der Karte (Willkommensseite, Registrierung, Zugangscode) */
/* Beschriftung und Auswahl mit Kontur #486a7c (Eingabekontur), mindestens 44 px hoch. Der Sprachwechsel selbst
   (Formular, Werte, Absenden per JavaScript) bleibt unverändert. Der Selektor "#main-col .form-change-lang" trifft die Seiten in der
   Karte; die Sprachwahl im Menü der Kopfzeile (li.form-change-lang) liegt außerhalb. Bis Paket 1.4 galt er nur für das Formular der
   Willkommensseite (#firstpage-changelang, gleiche Spezifität); die Seiten für die Registrierung und den Zugangscode zeigten sie
   sonst mit Elternmaßen (Beschriftung 18 px fett, Pfeil neben dem Feld). */
#main-col .form-change-lang {
  align-items: center;
  gap: var(--kern-space-8) var(--kern-space-12);
  margin: 0 0 var(--kern-space-24);
  padding: 0;
}
#main-col .form-change-lang > [class*="col-"] {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
#main-col .form-change-lang .control-label {
  margin: 0;
  padding: 0;
  font-size: var(--kern-font-size-14);
  font-weight: 400;
  line-height: 1.4;
  color: var(--kern-color-layout-text-muted);
}
#lang-select {
  position: relative;
  max-width: 100%;
  background-color: transparent;
}
#lang-select #language-changer-select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: var(--kern-space-8) var(--kern-space-48) var(--kern-space-8) var(--kern-space-12);
  font-size: var(--kern-font-size-16);
  font-weight: 600;
  line-height: 1.4;
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-m);
}
#lang-select #language-changer-select:focus {
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-m);
  padding: var(--kern-space-8) var(--kern-space-48) var(--kern-space-8) var(--kern-space-12);
}
/* das Elterntheme schaltet den Umriss dieses Feldes bei :focus-visible ab (Spezifität 1,2,0) */
#lang-select #language-changer-select:focus-visible {
  outline: 3px solid var(--kern-color-action-default);
  outline-offset: 2px;
}
/* Ein Auswahlfeld bricht nicht um. Der Sprachname ist derzeit lang ("Deutsch (Du) - Deutsch (Du-Form)", Meilenstein M2
   kürzt ihn); bei 320 px Breite bekäme das Feld sonst einen Überlauf. Schmale Laufweite (Cehora SZ hat die Achse
   wdth 62 bis 125 %) und weniger Polster lassen den ganzen Namen im Feld stehen. */
@media (max-width: 359px) {
  #lang-select #language-changer-select,
  #lang-select #language-changer-select:focus {
    padding-left: var(--kern-space-8);
    padding-right: var(--kern-space-32);
    font-stretch: 80%;
  }
}
/* Pfeil der Auswahl: rechts im Feld (das Elterntheme setzt ihn relativ mit right: 16px; höhere Spezifität nötig) */
#main-col #lang-select::after {
  position: absolute;
  top: 50%;
  right: var(--kern-space-12);
  z-index: 11;
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}