/*
 * Stil „Werkstatt" — Aufbau und Gestaltung der BVV-Homepage (Entwurf A
 * „Werkstatt" aus dem Projekt BVV-Homepage) als weiterer Stil neben Hell,
 * Dunkel und den Stilwelten, in vier Signalfarben: Rosé, Flieder, Türkis,
 * Pfirsich. Gewählt wird er im Dialog „Eigene Einstellungen"
 * (`modules/auth/ui/eigenesProfil.js`), der Wert steht in `data-theme`
 * (`werkstatt-rose` usw., siehe `app/theme.js`).
 *
 * Anders als Hell/Dunkel und die Stilwelten ändert er nicht nur Farben, sondern
 * den Aufbau: eine Kopfleiste oben mit den Hauptpunkten, die Unterpunkte des
 * aktiven Bereichs als zweite Zeile darunter, statt der Symbolschiene links.
 * Das DOM bleibt dabei dasselbe wie in `app/geruest.js` — die Umordnung
 * passiert ausschließlich hier: `.seitenleiste__nav` und `.nav-gruppe` werden
 * mit `display: contents` aufgelöst, damit Marke, Hauptpunkte und Benutzer in
 * einer Zeile stehen und `.nav-unter` (`order` und volle Breite) als zweite
 * Zeile darunter umbricht.
 *
 * Regeln (aus der BVV-Farbwelt übernommen):
 * - Genau eine Signalfarbe. `--w-signal` ist NIE Textfarbe (auf Weiß nur etwa
 *   1,5:1), sondern Fläche, Unterstreichung oder Markierung; Text darauf ist
 *   immer `--w-tinte`.
 * - Wo Salonika die Akzentfarbe als Linie, Diagrammfarbe oder Text braucht
 *   (`--akzent`, `--akzent-text`), bekommt es eine kräftigere Stufe derselben
 *   Farbe (`--w-tief`, `--w-tief-text`), die auf Weiß lesbar bleibt.
 * - Die Ampel bleibt Rot/Gelb/Grün und wechselt nie mit der Signalfarbe
 *   (Regel „Signal schlägt Stimmung" der Stilwelten gilt hier ebenfalls).
 * - Archivo Black hat nur einen Schnitt: Überschriften bleiben `font-weight: 400`,
 *   sonst verbreitert der Browser die Buchstaben. Beide Schriften liegen als
 *   Datei unter `../vendor/schriften/` (Lizenz dort), nie über Google Fonts.
 *
 * Alle Regeln stehen unter `:root:root[data-theme^="werkstatt-"]`. Die doppelte
 * Wurzel hebt die Spezifität bewusst über die Hover-Regeln der Symbolschiene in
 * `stil.css` (`.geruest:not([data-schiene="fest"]) .seitenleiste:hover …`), damit
 * diese hier nicht durchschlagen, ohne dass `!important` nötig wird.
 */

@font-face {
  font-family: "Archivo Black";
  src: url("../vendor/schriften/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../vendor/schriften/inter-variabel.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Ladebalken (nur der Start, siehe index.html): sonst unsichtbar, sichtbar erst im Stil „Werkstatt". */
.lader {
  display: none;
}

/* Ladezeile in Karten und Dialogen (`ladeZeile()`, shared/ui/seitenbausteine.js): die Schere erscheint nur im Stil „Werkstatt". */
.lade-zeile__schere {
  display: none;
}

:root:root[data-theme^="werkstatt-"] {
  color-scheme: light;

  /* ---- Farbvariante Rosé (Vorgabe) ---- */
  --w-tinte: #1c1217;
  --w-flaeche: #f7f0f1;
  --w-linie: #e3d7d9;
  --w-leise: #665a5e;
  --w-signal: #ff8fb5;
  --w-tief: #d6336c;
  --w-tief-text: #b0225a;

  --w-anzeige: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --w-rand: 24px;
  --w-bar-hoehe: 64px;

  /* ---- Auf die Tokens von stil.css abgebildet ---- */
  --grund: #ffffff;
  --flaeche: #ffffff;
  --flaeche-still: var(--w-flaeche);
  --leiste: #ffffff;
  --wochenende: var(--w-flaeche);
  --flaeche-schwebend: color-mix(in srgb, var(--w-signal) 22%, transparent);

  --text: var(--w-tinte);
  --text-leise: var(--w-leise);
  --text-still: var(--w-leise);

  --linie: var(--w-linie);
  --linie-kraeftig: color-mix(in srgb, var(--w-linie) 75%, var(--w-tinte));
  --kante-licht: transparent;

  --akzent: var(--w-tief);
  --akzent-dunkel: var(--w-tinte);
  --akzent-leise: color-mix(in srgb, var(--w-signal) 30%, #ffffff);
  --akzent-text: var(--w-tief-text);
  --akzent-schein: color-mix(in srgb, var(--w-signal) 55%, transparent);

  --licht-warm: transparent;
  --licht-kuehl: transparent;

  --gut: #1d7a46;
  --gut-leise: #e6f3eb;
  --mittel: #8a5d00;
  --mittel-leise: #fbf1dc;
  --schlecht: #b3261e;
  --schlecht-leise: #fbe9e7;

  --radius: 6px;
  --radius-klein: 4px;
  --knopf-radius: 6px;

  --schrift: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --schrift-zahl: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --schatten-farbe-nah: rgba(17, 17, 17, 0.06);
  --schatten-farbe-weit: rgba(17, 17, 17, 0.08);
  --schatten-farbe-tief: rgba(17, 17, 17, 0.22);
  /* Flach: Karten stehen über Linie und Signalkante, nicht über Schatten. */
  --schatten: 0 0 0 0 transparent;
  --schatten-hoch: 0 12px 32px var(--schatten-farbe-tief);
}

:root:root[data-theme="werkstatt-flieder"] {
  --w-tinte: #17131f;
  --w-flaeche: #f2f0f7;
  --w-linie: #dedae9;
  --w-leise: #5f5b6b;
  --w-signal: #b9a4ff;
  --w-tief: #7a5cf0;
  --w-tief-text: #5b3fd0;
}

:root:root[data-theme="werkstatt-tuerkis"] {
  --w-tinte: #101a19;
  --w-flaeche: #eef3f2;
  --w-linie: #d5e0de;
  --w-leise: #566462;
  --w-signal: #2ed3bd;
  --w-tief: #0f9a89;
  --w-tief-text: #0a7466;
}

:root:root[data-theme="werkstatt-pfirsich"] {
  --w-tinte: #1b1512;
  --w-flaeche: #f6f1ec;
  --w-linie: #e4dbd2;
  --w-leise: #675e56;
  --w-signal: #ff9d6a;
  --w-tief: #d9622b;
  --w-tief-text: #b04a1a;
}

:root:root[data-theme^="werkstatt-"] {
  /* ------------------------------------------------------------- Grund */

  & body {
    font-family: var(--schrift);
  }

  & :focus-visible {
    outline: 3px solid var(--w-signal);
    outline-offset: 2px;
  }

  & .geruest {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--grund);
  }

  & .geruest::before {
    display: none;
  }

  & .geruest > .meldung:not(.support-banner) {
    flex: none;
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
  }

  & .geruest .inhalt {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* --------------------------------------------- Kopfleiste (statt Schiene) */

  & .geruest .seitenleiste {
    position: relative;
    flex: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
    width: auto;
    padding: 0;
    background: var(--leiste);
    border-right: 0;
    border-bottom: 1px solid var(--w-linie);
    box-shadow: none;
    transition: none;
    z-index: 30;
  }

  /* Marke, Hauptpunkte und Benutzer teilen sich eine Zeile. */
  & .geruest .seitenleiste__nav,
  & .geruest .nav-gruppe {
    display: contents;
  }

  & .geruest .schiene__kopf {
    order: 0;
    min-height: var(--w-bar-hoehe);
    padding: 0;
    margin-left: var(--w-rand);
    overflow: visible;
  }

  & .geruest .schiene__feststellen,
  & .geruest .marke__zeichen,
  & .geruest .marke__zusatz,
  & .geruest .nav-symbol {
    display: none;
  }

  & .geruest .marke__knopf {
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  & .geruest .marke__text {
    display: block;
  }

  & .geruest .marke__name {
    font-family: var(--w-anzeige);
    font-weight: 400;
    font-size: 1.55rem;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--w-tinte);
    overflow: visible;
  }

  & .geruest .marke__name::after {
    content: "";
    display: inline-block;
    width: 0.28em;
    height: 0.28em;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--w-signal);
  }

  & .geruest .seitenleiste .schiene__nur-offen {
    opacity: 1;
  }

  /* Hauptpunkte: Text mit Unterstreichung, wie die Navigation der BVV-Seite. */
  & .geruest .nav-knopf {
    order: 1;
    width: auto;
    padding: 8px 0 5px;
    gap: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--w-tinte);
  }

  & .geruest .nav-knopf:hover {
    background: transparent;
    color: var(--w-tinte);
    border-bottom-color: var(--w-signal);
  }

  & .geruest .nav-knopf[aria-current="page"] {
    background: transparent;
    box-shadow: none;
    color: var(--w-tinte);
    font-weight: 700;
    border-bottom-color: var(--w-signal);
  }

  & .geruest .nav-label {
    flex: none;
    overflow: visible;
  }

  /* Unterpunkte: eigene Zeile in voller Breite unter der Kopfleiste. */
  & .geruest .seitenleiste .nav-unter {
    order: 10;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 26px;
    margin: 0;
    padding: 0 var(--w-rand);
    background: var(--w-flaeche);
    border-top: 1px solid var(--w-linie);
  }

  & .geruest .nav-unter .nav-knopf {
    order: 0;
    padding: 12px 0 9px;
    font-size: 14px;
  }

  & .geruest .nav-unter .nav-knopf:hover {
    border-bottom-color: var(--w-signal);
  }

  & .geruest .nav-unter .nav-knopf[aria-current="page"] {
    border-bottom-color: var(--w-tinte);
  }

  /* Suchfeld der Einstellungen sitzt ganz rechts in der Unterzeile. */
  & .geruest .nav-unter .nav-such {
    order: 20;
    margin-left: auto;
    max-width: 260px;
  }

  & .geruest .schiene__fuss {
    order: 5;
    margin: 0 var(--w-rand) 0 auto;
    padding: 0;
    border-top: 0;
  }

  & .geruest .benutzer__knopf {
    width: auto;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    font-weight: 600;
  }

  & .geruest .benutzer__knopf:hover {
    background: var(--flaeche-schwebend);
  }

  /* In der Kopfleiste ist nur der Avatar Platz; Name und Pfeil erst auf sehr breiten Bildschirmen. */
  & .geruest .seitenleiste .benutzer__name,
  & .geruest .seitenleiste .benutzer__pfeil {
    display: none;
  }

  & .geruest .seitenleiste .benutzer__name {
    font-size: 13.5px;
  }

  & .geruest .seitenleiste .avatar {
    width: 36px;
    height: 36px;
    background: var(--w-tinte);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
  }

  /* Das Benutzermenü klappt aus der Kopfleiste nach unten auf, nicht mehr nach oben. */
  & .geruest .schiene__fuss .menue,
  & .geruest .schiene__fuss .menue--hoch {
    top: calc(100% + 6px);
    bottom: auto;
    right: 0;
    left: auto;
  }

  /* ------------------------------------------------------------ Seitenkopf */

  & .seitenkopf {
    padding: 30px 44px 18px;
  }

  & .seitenkopf__pfad {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--w-leise);
  }

  & .seitenkopf__titel {
    margin: 4px 0 0;
    font-family: var(--w-anzeige);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    letter-spacing: -0.01em;
    line-height: 1.08;
  }

  /* Die Signalkante unter dem Titel, wie bei jeder Überschrift der BVV-Seite. */
  & .seitenkopf__titel::after {
    content: "";
    display: block;
    width: 84px;
    height: 10px;
    margin-top: 14px;
    background: var(--w-signal);
  }

  & .verlauf__knopf {
    border-radius: var(--radius);
  }

  /* Zurück/Vor stehen hinter dem Titel statt davor: So beginnen Titel und
     Inhalt an derselben linken Kante, und die Knöpfe schieben den Titel nicht ein. */
  & .seitenkopf__marke .verlauf {
    order: 2;
    align-self: flex-start;
    margin: 12px 0 0 8px;
  }

  /* Mit Pfadzeile darüber sitzt der Titel eine Zeile tiefer. */
  & .seitenkopf__marke:has(.seitenkopf__pfad:not(:empty)) .verlauf {
    margin-top: 30px;
  }

  /* ---------------------------------------------------- Überschriften, Zahlen */

  & h1,
  & h2,
  & h3,
  & .karte__titel,
  & .abschnitt-titel,
  & .dialog__titel {
    font-family: var(--w-anzeige);
    font-weight: 400;
    letter-spacing: -0.005em;
  }

  & .karte__titel {
    font-size: 1rem;
  }

  & .kennzahl__wert {
    font-family: var(--w-anzeige);
    font-weight: 400;
  }

  /* ---------------------------------------------------- Karten und Kacheln */

  & .karte {
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  /* Heben sich nur ab, wenn man sie anklicken kann. Große Behälterkarten mit
     Tabellen oder Formularen blieben sonst bei jedem Mausweg in Bewegung. */
  & a.karte:hover,
  & button.karte:hover,
  & .karte[role="button"]:hover,
  & .kachel:hover {
    transform: translateY(-3px);
    border-color: var(--linie);
    box-shadow: 0 10px 0 -4px var(--w-signal);
  }

  & .kachel {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  /* ---------------------------------------------------------------- Knöpfe */

  & .knopf {
    font-weight: 600;
  }

  & .knopf--haupt {
    background: var(--w-signal);
    border-color: var(--w-signal);
    color: var(--w-tinte);
    font-weight: 800;
    box-shadow: none;
  }

  & .knopf--haupt:hover:not(:disabled) {
    background: var(--w-tinte);
    border-color: var(--w-tinte);
    color: #ffffff;
    box-shadow: none;
  }

  & input[type="text"],
  & input[type="password"],
  & input[type="number"],
  & input[type="date"],
  & input[type="time"],
  & input[type="search"],
  & select,
  & textarea {
    border-color: var(--w-tinte);
    border-radius: var(--radius);
  }

  /* Aktive Umschalter, Reiter und Listenmarken: immer flache Signalfläche mit
     Tintentext. stil.css füllt sie sonst mit einem Verlauf von `--akzent` nach
     `--akzent-dunkel` (= Tinte) und weißer Schrift. */
  & .stufen button[aria-pressed="true"],
  & .reiter-knopf[aria-current="true"],
  & .akte-reiter__knopf[aria-current="true"] {
    background: var(--w-signal);
    border-color: var(--w-signal);
    color: var(--w-tinte);
    box-shadow: none;
  }

  & .mitarbeiter-eintrag--aktiv .mitarbeiter-eintrag__glyph {
    background: var(--w-signal);
    color: var(--w-tinte);
  }

  & .stilwelt-kachel[aria-pressed="true"] {
    border-color: var(--w-tinte);
    box-shadow: 0 0 0 1px var(--w-tinte);
  }

  /* ---------------------------------------------------------- Ladebalken */

  /*
   * Wie auf der BVV-Seite: Ein Balken wächst von links nach rechts, an seiner
   * Spitze läuft ein Kreis in der Signalfarbe mit. Statt des Schraubenschlüssels
   * ist das Symbol eine Schere, die im Takt schnippt (zwei Klingen, die sich
   * um denselben Drehpunkt schließen und öffnen). Signal ist hier Fläche, das
   * Symbol Tinte. Der Text bleibt für Screenreader im Dokument.
   */
  & .app-laedt {
    display: block;
    color: var(--w-tinte);
  }

  & .app-laedt__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Bleibt an derselben Stelle, auch nachdem main.js `app-laedt` schon entfernt hat. */
  & #app > .lader {
    --lader-kreis: 46px;
    display: block;
    width: min(300px, 70vw);
    margin: calc(50vh - 23px) auto 0;
  }

  & .lader__bahn {
    position: relative;
    height: var(--lader-kreis);
    animation: werkstatt-lader-ein 0.3s 0.2s ease-out both;
  }

  & .lader__bahn::before {
    content: "";
    position: absolute;
    inset: calc(50% - 4px) 0;
    border-radius: 4px;
    background: var(--w-linie);
  }

  & .lader__fuellung {
    position: absolute;
    left: 0;
    top: calc(50% - 4px);
    height: 8px;
    border-radius: 4px;
    background: var(--w-signal);
    animation: werkstatt-lader-fuellung 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  & .lader__kreis {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--lader-kreis);
    height: var(--lader-kreis);
    border-radius: 50%;
    background: var(--w-signal);
    color: var(--w-tinte);
    animation: werkstatt-lader-kreis 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  & .lader__kreis svg {
    width: 26px;
    height: 26px;
  }

  & .schere__a,
  & .schere__b {
    transform-origin: 12px 12px;
    transform-box: view-box;
  }

  & .schere__a {
    animation: werkstatt-schnipp-a 0.6s ease-in-out infinite;
  }

  & .schere__b {
    animation: werkstatt-schnipp-b 0.6s ease-in-out infinite;
  }

  /*
   * Ladezeile in Karten und Dialogen: dieselbe Schere im Signalkreis wie am
   * Ladebalken, ohne Balken. Der Text bleibt für Screenreader, wie beim Start.
   */
  & .lade-zeile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    margin: 0;
  }

  & .lade-zeile__schere {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--w-signal);
    color: var(--w-tinte);
  }

  & .lade-zeile__schere svg {
    width: 24px;
    height: 24px;
  }

  & .lade-zeile__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ------------------------------------------------- Schmale Bildschirme */

  /*
   * Bis 1240 px passen die Hauptpunkte nicht mehr in eine Zeile. Dort wird
   * die Leiste wie bisher am Handy zu einer Schublade von links, die der
   * Menüknopf im Seitenkopf öffnet — nur im Aussehen des Stils „Werkstatt".
   */
  @media (min-width: 1560px) {
    & .geruest .seitenleiste .benutzer__name,
    & .geruest .seitenleiste .benutzer__pfeil {
      display: block;
    }
  }

  @media (max-width: 1240px) {
    & .geruest .seitenleiste {
      position: fixed;
      inset: 0 auto 0 0;
      flex-flow: column nowrap;
      align-items: stretch;
      width: min(290px, 86vw);
      overflow-y: auto;
      background: #ffffff;
      border-right: 1px solid var(--w-linie);
      border-bottom: 0;
      box-shadow: none;
      transform: translateX(-100%);
      transition: transform 0.18s ease;
      z-index: 50;
    }

    & .geruest[data-menue="offen"] .seitenleiste {
      transform: translateX(0);
      box-shadow: var(--schatten-hoch);
    }

    & .geruest .seitenleiste__nav {
      display: block;
      flex: 1;
      padding: 6px 12px 14px;
    }

    & .geruest .nav-gruppe {
      display: block;
    }

    & .geruest .schiene__kopf {
      margin: 0;
      padding: 0 16px;
    }

    & .geruest .nav-knopf {
      display: flex;
      width: 100%;
      padding: 11px 12px;
      border-bottom: 0;
      border-left: 4px solid transparent;
    }

    & .geruest .nav-knopf:hover {
      background: var(--flaeche-schwebend);
      border-left-color: var(--w-signal);
    }

    & .geruest .nav-knopf[aria-current="page"] {
      background: var(--w-flaeche);
      border-left-color: var(--w-signal);
    }

    & .geruest .seitenleiste .nav-unter {
      display: block;
      flex: none;
      margin: 0 0 6px 12px;
      padding: 0;
      background: transparent;
      border-top: 0;
    }

    & .geruest .nav-unter .nav-knopf {
      padding: 8px 12px;
      font-size: 14px;
    }

    & .geruest .nav-unter .nav-knopf[aria-current="page"] {
      border-left-color: var(--w-tinte);
    }

    & .geruest .schiene__fuss {
      margin: 0;
      padding: 8px 12px;
      border-top: 1px solid var(--w-linie);
    }

    & .geruest .seitenleiste .benutzer__name,
    & .geruest .seitenleiste .benutzer__pfeil {
      display: block;
    }

    & .geruest .schiene__fuss .menue,
    & .geruest .schiene__fuss .menue--hoch {
      top: auto;
      bottom: calc(100% + 6px);
      left: 0;
      right: auto;
    }

    & .seitenkopf__umschalter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    & .seitenkopf {
      padding: 20px 20px 14px;
    }

    & .verlauf {
      display: none;
    }
  }

  @media (max-width: 860px) {
    & .seitenkopf {
      padding: 12px 14px 10px;
    }
  }
}

@keyframes werkstatt-lader-ein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Balkenspitze und Kreismitte bleiben deckungsgleich. */
@keyframes werkstatt-lader-fuellung {
  0% { width: 23px; }
  100% { width: calc(100% - 23px); }
}

@keyframes werkstatt-lader-kreis {
  0% { left: 0; }
  100% { left: calc(100% - 46px); }
}

/* Öffnen und Schließen der Klingen — drei Schnitte je Umlauf des Balkens. */
@keyframes werkstatt-schnipp-a {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); }
}

@keyframes werkstatt-schnipp-b {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
}

@media (prefers-reduced-motion: reduce) {
  :root:root[data-theme^="werkstatt-"] {
    & .karte,
    & .kachel {
      transition: none;
    }

    & .lader__bahn,
    & .lader__fuellung,
    & .lader__kreis,
    & .schere__a,
    & .schere__b {
      animation: none;
    }

    & .lader__fuellung {
      width: 50%;
    }

    & .lader__kreis {
      left: calc(50% - 23px);
    }
  }
}