/*
 * Seezeit · Fokusring, Knöpfe, Textaktionen und Navigation (Paket 1.3).
 *
 * Quellen: KNOEPFE.md (Rollen, Geometrie, Zustände, Fokus), BRIEF.md 3 (Komponenten) und 7 (Kriterien 1 bis 4).
 * Die Farben der Knopfrollen liefert die erzeugte Variante (css/variations/seezeit_extern.css):
 *   .btn-primary            Orange  = Abschluss-Aktion (Starten, Absenden, Speichern, Übernehmen)
 *   .btn-outline-secondary  Weiß mit 1 px Dunkelblau = Sekundär (Zurück)
 * Hier stehen die Geometrie, Weiter (Gelb) und die Textaktionen.
 *
 * Spezifität: Die Zustandsregeln des Elternthemes (z. B. ".btn-primary:hover { box-shadow: ... }", bis 0,4,0) würden die
 * Kante der Knöpfe sonst abschalten. Die Regeln dieser Datei beginnen deshalb mit #dynamicReloadContainer (Umschlag
 * aller Umfrageseiten inklusive der Meldungsfenster), das gibt 1,x,x ohne !important.
 * Ausgenommen sind die Antwortflächen (.btn-check + label.btn, Paket 1.4), die Textaktionen, der versteckte
 * Sprachknopf der Willkommensseite (.ls-language-changer-item, im Elterntheme display: none) und versteckte Knöpfe.
 */

/* ========================================================================== Fokusring */
/* Ein Ring für jedes Bedienelement: 3 px Dunkelblau, 2 px Abstand (KNOEPFE.md 3). Das Elterntheme schaltet den Umriss
   an vielen Stellen ab (z. B. ".btn:focus { outline: 0 }", Spezifität 0,2,0). ":root :focus-visible" hat dieselbe
   Spezifität und steht später im Dokument; ein !important ist deshalb nicht nötig. */
:root :focus-visible {
  outline: 3px solid var(--kern-color-action-default);
  outline-offset: 2px;
  /* beim Anspringen per Tab bleibt der ganze Ring im Fenster, auch am unteren Seitenrand */
  scroll-margin: var(--kern-space-8);
}

/* ========================================================================== Knöpfe: Geometrie */
/* Höhe mindestens 48 px, Beschriftung fett (700), Radius 4 px. Die Kante unten ist ein Inset-Schatten statt eines
   Rahmens: Beim Drücken springt nichts. */
#dynamicReloadContainer .btn:not(label, .btn-link, .ls-saveaction, .ls-loadaction, .ls-clearaction, .ls-language-changer-item, [hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kern-space-8);
  min-width: 44px;
  min-height: 48px;
  max-width: 100%;
  padding: var(--kern-space-8) var(--kern-space-24);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--kern-radius-l);
  font-size: var(--kern-font-size-16);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: inset 0 calc(-1 * var(--kern-edge-w)) 0 var(--color-edge-control);
}
/* schmale Fenster: weniger Polster, damit auch bei großem Textzoom ein Wort wie "Absenden" nicht mitten im Wort umbricht */
@media (max-width: 400px) {
  #dynamicReloadContainer .btn:not(label, .btn-link, .ls-saveaction, .ls-loadaction, .ls-clearaction, .ls-language-changer-item, [hidden]) {
    padding-left: var(--kern-space-16);
    padding-right: var(--kern-space-16);
  }
}
/* gefüllte Knöpfe: Kante aus der eigenen Familie (abgedunkelt) und Umgebungsschatten */
#dynamicReloadContainer .btn-primary:not(label, .btn-link, .ls-saveaction, .ls-loadaction, .ls-clearaction, .ls-language-changer-item, [hidden]) {
  box-shadow: inset 0 calc(-1 * var(--kern-edge-w)) 0 var(--color-edge-filled), var(--kern-shadow-raised);
}
/* kompakt (KNOEPFE.md .btn--small): Panelfüße, Karten */
#dynamicReloadContainer .btn-sm:not(label, .btn-link, .ls-saveaction, .ls-loadaction, .ls-clearaction, .ls-language-changer-item, [hidden]) {
  min-height: 44px;
  padding: var(--kern-space-8) var(--kern-space-16);
  font-size: var(--kern-font-size-14);
}
/* gedrückt: 2 px nach unten, die Kante verschwindet */
#dynamicReloadContainer .btn:not(label, .btn-link, .ls-saveaction, .ls-loadaction, .ls-clearaction, .ls-language-changer-item, [hidden]):active:not(:disabled):not(.disabled) {
  transform: translateY(2px);
  box-shadow: none;
}
/* deaktiviert: Neutralfläche (Farben aus der Variante), gedämpfte Schrift, keine Kante, kein Schatten, kein Versatz */
#dynamicReloadContainer .btn:not(label, .btn-link, .ls-saveaction, .ls-loadaction, .ls-clearaction, .ls-language-changer-item, [hidden]):is(:disabled, .disabled, [disabled]) {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity: 1;
}

/* ========================================================================== Weiter (Gelb) */
/* "Weiter" in einem begonnenen Ablauf ist die Fortschritts-Aktion (Gelb): .ls-move-next-btn mit value="movenext".
   Auf der Willkommensseite startet derselbe Knopf die Umfrage und ist deshalb Orange (Abschluss-Aktion); erkannt am
   Willkommensblock im selben Formular. Browser ohne :has() zeigen dort Gelb; es bleibt eine gefüllte Aktion.
   Absenden (value="movesubmit") ist .btn-primary und damit Orange. */
.ls-move-next-btn[value="movenext"] {
  --sz-fill: var(--color-action-progress);
  --sz-fill-hover: var(--color-action-progress-hover);
}
#limesurvey:has(#welcome-container) .ls-move-next-btn[value="movenext"] {
  --sz-fill: var(--color-action-commit);
  --sz-fill-hover: var(--color-action-commit-hover);
}
.ls-move-next-btn[value="movenext"]:not(:disabled):not(.disabled) {
  background-color: var(--sz-fill);
  border-color: var(--sz-fill);
  color: var(--color-action-on-fill);
}
.ls-move-next-btn[value="movenext"]:not(:disabled):not(.disabled):is(:hover, :focus, :active) {
  background-color: var(--sz-fill-hover);
  border-color: var(--sz-fill-hover);
}

/* ========================================================================== Textaktionen */
/* Nebenwege ohne Fläche und Kontur (KNOEPFE.md .linkish): "Später fortsetzen" und "Antworten löschen". Beschriftung 600,
   unterstrichen, Ziel mindestens 44 px hoch. Ohne JavaScript stehen sie als Zeile unter der Navigation; mit
   JavaScript liegt "Später fortsetzen" als Zeile im Kopfzeilenmenü (seezeit-kopf.css). */
#dynamicReloadContainer .btn.ls-saveaction,
#dynamicReloadContainer .btn.ls-loadaction,
#dynamicReloadContainer .btn.ls-clearaction,
#dynamicReloadContainer .btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-size: var(--kern-font-size-16);
  font-weight: 600;
  line-height: 1.4;
  color: var(--kern-color-action-default);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#dynamicReloadContainer .btn.ls-saveaction:is(:hover, :focus, :active),
#dynamicReloadContainer .btn.ls-loadaction:is(:hover, :focus, :active),
#dynamicReloadContainer .btn-link:is(:hover, :focus, :active) {
  color: var(--color-link-hover);
  background: none;
  border: 0;
  box-shadow: none;
}
/* "Antworten löschen" ist destruktiv: Fehlerrot (KNOEPFE.md 2, Regel 4) */
#dynamicReloadContainer .btn.ls-clearaction {
  color: var(--kern-color-feedback-danger);
}
#dynamicReloadContainer .btn.ls-clearaction:is(:hover, :focus, :active) {
  color: var(--kern-color-feedback-danger-hover);
  background: none;
  border: 0;
  box-shadow: none;
}

/* "Antworten löschen" mit JavaScript (Theme-Option "Show 'Clear all' button" = Ja): Zeile im Kopfzeilenmenü und Bestätigungsfenster
   (#clear-all-modal). Zerstörerische Aktionen nutzen die Fehlerfarbe, nie die Markenfarbe (KNOEPFE.md 2, Regel 4). Das Elterntheme
   macht "Löschen" im Fenster zum .btn-primary (Orange); hier wird es zur gefüllten Gefahr-Aktion, Schrift Weiß (6,8:1 auf #b02228). */
#survey-nav #main-dropdown .nav-link.ls-link-clearall {
  color: var(--kern-color-feedback-danger);
}
#survey-nav #main-dropdown .nav-link.ls-link-clearall:is(:hover, :focus, :active) {
  color: var(--kern-color-feedback-danger-hover);
}
#clear-all-modal .btn-primary:not(:disabled):not(.disabled) {
  color: var(--kern-color-white);
  background-color: var(--kern-color-feedback-danger);
  border-color: var(--kern-color-feedback-danger);
}
#clear-all-modal .btn-primary:not(:disabled):not(.disabled):is(:hover, :focus, :active) {
  color: var(--kern-color-white);
  background-color: var(--kern-color-feedback-danger-hover);
  border-color: var(--kern-color-feedback-danger-hover);
}

/* ========================================================================== Navigation */
/* Im Fluss am Seitenende der Karte, keine feste Leiste (BRIEF.md 3; Kriterium 14). Trennlinie nach oben,
   Zurück links, Weiter / Absenden / Starten rechts. Bei Platzmangel (320 px, Textzoom) bricht die Zeile um. */
#navigator-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kern-space-12) var(--kern-space-16);
  margin: var(--kern-space-24) 0 0;
  padding: var(--kern-space-24) 0 0;
  border-top: 1px solid var(--kern-color-layout-border);
}
/* Abstand nach oben (Paket 1.5). Das Elterntheme gibt dem Element die Klasse .space-col, und "#main-col .space-col"
   (seezeit-basis.css: kein Rasterabstand in der Karte) setzte den Außenabstand auf 0: Auf der Willkommensseite lag die Navigation
   dicht am Anonymitätshinweis; dort stehen jetzt 32 px. Nach den Fragen einer Gruppe gibt die letzte Frage 48 px (Abstand zwischen
   Fragen) darunter mit; die Gruppe ist ein Flex-Element, ihr Rand klappt nicht mit dem der Navigation zusammen, deshalb dort 0. */
#main-col #navigator-container {
  margin-top: var(--kern-space-32);
}
#main-col .group-outer-container + #navigator-container {
  margin-top: 0;
}
/* Karte je Frage (Standard seit Paket 1.5b, seezeit-basis.css Abschnitt 6): Die Navigation steht auf dem Sand unter der letzten
   Fragenkarte, ohne Trennlinie (die Karte endet davor). Zur Karte liegen 24 px (Handy) bzw. 32 px: der Kartenabstand, den die Karte
   selbst mitbringt, plus 8 px. In der Fassung "Eine Karte" und auf Seiten ohne Fragen (Willkommen) gilt oben die Linie in der Karte. */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) #navigator-container {
  margin-top: var(--kern-space-8);
  padding-top: 0;
  border-top: 0;
}
#navigator-container > [class*="col-"] {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  padding: 0;
}
/* die Aktion rechts bleibt rechts, auch wenn links nichts steht (Format "alles auf einer Seite": nur Absenden) */
#navigator-container > :last-child {
  margin-left: auto;
}
/* Zeile mit Textaktionen und Fragenindex ohne JavaScript (.ls-js-hidden) */
#main-col .row.ls-js-hidden {
  margin-top: var(--kern-space-16);
}
#main-col .clearall-saveall-wrapper {
  flex-wrap: wrap;
  column-gap: var(--kern-space-24);
}