/* ==========================================================================
 * Die neue Fassung der Academy.
 *
 * Diese Datei liegt ueber style.css und schaltet sich nur zu, wenn jemand sie
 * anfordert (?neu=1). Sie aendert kein Markup - sie setzt die Werte um, auf
 * denen das alte Stylesheet ohnehin schon aufbaut, und raeumt danach die
 * Stellen nach, die daran vorbeigingen.
 *
 * Schritt 1 Schrift . 2 Farbleitern . 3 Raster . 4 Bausteine . 5 Zustaende
 * Der Umbau der Navigation zur linken Schiene ist Schritt 6 und braucht
 * Markup - er steckt nicht hier drin.
 * ======================================================================== */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(/fonts/geist-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: 'Geist'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(/fonts/geist-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: 'Geist Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url(/fonts/geist-mono-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: 'Geist Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url(/fonts/geist-mono-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 {
  /* --- Schritt 2: die Leitern ------------------------------------------ */
  --n0:#ffffff; --n25:#fafcfc; --n50:#f4f7f7; --n100:#ebeff0; --n200:#dee4e5;
  --n300:#c7d0d2; --n400:#9aa6a9; --n500:#738185; --n600:#566468; --n700:#3d4a4d;
  --n800:#273134; --n900:#131a1c;

  --a50:#e7f3f5; --a100:#c9e5e9; --a200:#9bcfd7; --a300:#63b2bd; --a400:#2f93a0;
  --a500:#14707f; --a600:#0f5b68; --a700:#0c4854; --a800:#093740;

  /* --- die Namen, auf die style.css zugreift --------------------------- */
  --akzent: var(--a500);
  --akzent-dunkel: var(--a600);
  --akzent-mittel: var(--a400);
  --akzent-hell: var(--a50);
  --akzent-blass: var(--a200);

  --gefahr:#c62828; --gefahr-dunkel:#911f1f; --gefahr-hell:#fdedec;
  --gruen:#1a7f4b;  --gruen-hell:#ecf6f0;

  --text: var(--n900); --text-mittel: var(--n700); --text-schwach: var(--n500);
  --linie: var(--n200); --linie-stark: var(--n300);
  --flaeche: var(--n0); --flaeche-leise: var(--n25); --hintergrund: var(--n50);

  /* --- Schritt 3: Raster und Rundung ----------------------------------- */
  --rand: 1rem;
  --radius: 8px; --radius-klein: 5px; --radius-winzig: 3px;

  --schatten: 0 1px 2px rgba(16,24,28,.05);
  --schatten-hoch: 0 16px 32px -12px rgba(16,24,28,.22), 0 2px 6px rgba(16,24,28,.06);
  --ring: 0 0 0 3px rgba(20,112,127,.22);

  --schrift: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Schritt 1: Schrift --------------------------------------------------- */
body { font-family: var(--schrift); font-size: 14px; line-height: 1.5; }
.mono, code, kbd, pre { font-family: var(--schrift-mono); }

h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

/* Alles, was in Spalten steht, bekommt Tabellenziffern. */
table, .kennzahl, .wert, .zahl, .rechts, .mono { font-variant-numeric: tabular-nums; }

/* --- Schritt 4: die Bausteine -------------------------------------------- */

/*
 * Schilder statt Pillen. Ein Etikett traegt ein Wort - es ist ein Schild,
 * kein Knopf. Rund bleibt, was rund gemeint ist: Gesichter, Haken, der
 * Schieber eines Schalters, die rote Zahl am Reiter, Fortschrittsbalken.
 */
.marke-etikett, .k-art, .k-inhouse, .k-anzahl, .kursart-marke, .kunde-schild,
.k-stadtkasten, .chat-reaktion, .chat-zaehler, .team-ungelesen, .ab-fremdmarke,
.bp-l, .k-frei-name, .verf-wunsch, .nutzer-link {
  border-radius: var(--radius-winzig);
}

.marke-etikett {
  min-height: 20px; padding: 0 6px; font-size: 11px; font-weight: 500;
  border-color: var(--linie);
}

/* Knoepfe: eine Hoehe, ein Gewicht, ruhigerer Uebergang. */
.knopf {
  min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500;
  border-radius: var(--radius-klein);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.knopf.klein { min-height: 26px; padding: 0 8px; font-size: 12px; }
.knopf.sekundaer { color: var(--n700); border-color: var(--n300); }
.knopf.sekundaer:hover { background: var(--n25); border-color: var(--n400); color: var(--n900); }
.knopf:active { transform: translateY(.5px); }

/* Felder: dieselbe Hoehe wie ein Knopf, ruhiger Fokus. */
input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=number], input[type=url], input[type=file], input[type=search],
input[type=date], input[type=time], input[type=week], input[type=month],
input[type=datetime-local], input[type=tel], select, textarea {
  min-height: 32px; padding: 0 8px; font-size: 13px;
  border-radius: var(--radius-klein); border-color: var(--n300);
}
textarea { padding: 6px 8px; min-height: 72px; line-height: 1.5; }
.feld > select { min-height: 32px; }
label { font-size: 12px; font-weight: 450; color: var(--n600); margin-bottom: 4px; }

/* Karten und Rahmen: die Haarlinie traegt, nicht der Schatten. */
.karte, .tabellenrahmen, .liste, .kennzahl, .kurskarte {
  border-color: var(--linie); box-shadow: var(--schatten);
}
.karte { padding: 16px var(--rand); }
.kennzahl { padding: 12px var(--rand) 14px; min-height: 84px; }
.kennzahl .wert { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.kennzahl .bezeichnung { font-size: 12px; }

/* --- Tabellen ------------------------------------------------------------ */
table { font-size: 13px; }
th, td { padding: 0 12px; height: 42px; }
th:first-child, td:first-child { padding-left: var(--rand); }
th:last-child,  td:last-child  { padding-right: var(--rand); }
th {
  height: 32px; font-size: 12px; font-weight: 500; color: var(--n500);
  background: var(--n25); border-bottom: 1px solid var(--n200);
}
.tabellenrahmen thead tr { height: 32px; }
.tabellenrahmen tbody tr { height: 42px; }
.tabellenrahmen tbody tr:hover > td { background: var(--n25); }

/* Die dichten Tabellen bleiben dicht. */
.tl-tabelle th, .tl-tabelle td { height: auto; padding: 5px 8px; }

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf { border-bottom-color: var(--linie); }
.kopf-innen { min-height: 52px; }
.marke { font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.navigation a { font-size: 13px; font-weight: 450; padding: 6px 10px; border-radius: var(--radius-klein); }
.navigation a.aktiv { background: var(--a50); color: var(--a600); font-weight: 500; }
.unterleiste a { font-size: 13px; font-weight: 450; }
.unterleiste.dritte a { font-size: 12px; }
.nav-rot { background: #c62828; font-weight: 600; font-size: 10px; }

/* --- Kalender ------------------------------------------------------------ */
.k-spalte-kopf { font-size: 12px; }
.k-karte { font-size: 12px; border-radius: var(--radius-winzig); }
.k-art { font-size: 10px; font-weight: 600; letter-spacing: .02em;
         background: none; padding: 0; color: var(--kf, var(--kf-rest)); }
.k-ort { font-size: 13px; font-weight: 500; }
.kalender-termin { border-radius: var(--radius-winzig); font-size: 12px; }
.k-anzahl { font-size: 11px; }

/* --- Schritt 5: Zustaende ------------------------------------------------ */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.listenzeile { transition: background-color .12s ease; }
.knopf:focus-visible, input:focus-visible, select:focus-visible { box-shadow: var(--ring); }

/* Ein Gerüst statt „wird geholt …" - greift ueberall, wo eine Ansicht das
   neue Kennzeichen setzt; die alten Textmeldungen bleiben, bis eine Ansicht
   umgestellt ist. */
.skelett {
  background: linear-gradient(90deg, var(--n100) 25%, var(--n200) 37%, var(--n100) 63%);
  background-size: 400% 100%; animation: neu-wandern 1.4s ease infinite;
  border-radius: var(--radius-winzig);
}
@keyframes neu-wandern { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.leer { color: var(--n500); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- Dialoge ------------------------------------------------------------- */
.dialog { border-radius: var(--radius); box-shadow: var(--schatten-hoch); }
.dialog-hintergrund { background: rgba(8,14,16,.5); }
.dialog-fuss { background: var(--n25); }

/* ==========================================================================
 * Schritt 6: die linke Schiene
 *
 * Ohne Markup zu aendern. `#app` wird zum Raster: die Kopfzeile steht links
 * und ueber die volle Hoehe, der Inhalt rechts daneben. Innen loest sich die
 * Kopfzeile von einer Zeile in eine Spalte auf - Marke oben, Reiter darunter,
 * die beiden Unterleisten als eingerueckte Listen, das Konto unten.
 *
 * Alles, was dafuer noetig ist, steht schon im Dokument. Es wird nur anders
 * angeordnet.
 * ======================================================================== */

@media (min-width: 861px) {
  /*
   * Nur dort, wo es wirklich eine Kopfzeile gibt - die Anmeldeseite hat
   * keine, und ihre Karte wuerde sonst in die 236 Pixel breite Spalte
   * gequetscht. Der Kundenbereich bleibt ebenfalls aussen vor: Er hat seine
   * eigene dunkle Leiste und ist eine andere Anwendung fuer andere Leute.
   */
  body:not(.kundenbereich) #app:has(> .kopf) {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--n900);
  }

  body:not(.kundenbereich) .kopf {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: var(--n900); border-bottom: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 14px 10px 10px;
    scrollbar-width: thin;
  }

  /* Aus der Zeile wird eine Spalte. */
  body:not(.kundenbereich) .kopf-innen {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    max-width: none; margin: 0; padding: 0; min-height: 0;
    gap: 2px;
  }
  body:not(.kundenbereich) .navigation-zeile { display: flex; flex-direction: column; gap: 2px; }

  /*
   * Die alte Kopfzeile ist eine Zeile: waagerecht schiebbar, mit `margin-left:
   * auto`, einer Maske an den Raendern und `width: 100%` an Stellen, die sich
   * auf eine ganz andere Breite bezogen. In einer Spalte ergibt davon nichts
   * mehr Sinn - ein `margin-left: auto` schiebt dort nach rechts statt nach
   * hinten, und genau das hat die Reiter neben die Schiene gestellt.
   *
   * Deshalb hier kein Nachbessern an einzelnen Werten, sondern ein sauberer
   * Schnitt: In der Schiene ist alles ein schlichter Block, und nur die
   * Punkte selbst sind wieder Zeilen.
   */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .kopf-innen,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation-zeile,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste-innen {
    display: block; width: auto; max-width: none; min-width: 0;
    margin: 0; padding: 0; overflow: visible; order: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation { margin-top: 10px; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste { margin: 2px 0 6px; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste.dritte { margin-top: 0; }
  body:not(.kundenbereich) .navigation {
    flex-direction: column; align-items: stretch;
    margin: 10px 0 0; gap: 1px; flex: 0 0 auto;
  }

  /*
   * Die Marke oben, als Kopf der Schiene - einfarbig weiss, ohne Scheibe.
   *
   * Dafuer liegt eine eigene Fassung des Zeichens bereit
   * (img/zeichen-weiss.png). Ein Filter haette es nicht getan: Die Grafik
   * besteht aus dunklen, hellen und *weissen* Kacheln, und ein Umfaerben
   * macht daraus einen weissen Klumpen ohne Muster. In der weissen Fassung
   * sind die Tuerkiskacheln weiss und die ehemals weissen zu Luecken
   * geworden - auf dunklem Grund bleibt das Mosaik damit lesbar.
   */
  body:not(.kundenbereich) .marke {
    color: #fff; padding: 2px 6px 14px; gap: 11px;
    font-size: 14.5px; font-weight: 600; letter-spacing: -.02em;
  }
  body:not(.kundenbereich) .marke-zeichen {
    content: url(/img/zeichen-weiss.png);
    width: 32px; height: 32px; border-radius: 0;
    background: none; padding: 0; box-shadow: none;
  }

  /* Die Reiter: Zeilen statt Pillen. */
  body:not(.kundenbereich) .navigation a, .unterleiste a, .nav-mehr-knopf, .kopf-schnell {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 7px 8px; border-radius: 5px;
    color: #aebbbe; font-size: 13px; font-weight: 450;
    text-decoration: none; border: 0; background: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .12s ease, color .12s ease;
  }
  body:not(.kundenbereich) .navigation a:hover, .unterleiste a:hover,
  body:not(.kundenbereich) .nav-mehr-knopf:hover, .kopf-schnell:hover { background: rgba(255,255,255,.05); color: #e6eded; }
  body:not(.kundenbereich) .navigation > a.aktiv {
    background: rgba(255,255,255,.09); color: #fff; font-weight: 500;
  }

  /* Die Unterleisten werden zu eingerueckten Listen unter dem Bereich. */
  body:not(.kundenbereich) .unterleiste, .unterleiste.dritte {
    background: none; border: 0; padding: 0;
  }
  body:not(.kundenbereich) .unterleiste-innen {
    flex-direction: column; align-items: stretch;
    max-width: none; margin: 0; padding: 0; gap: 1px;
  }
  body:not(.kundenbereich) .unterleiste a {
    padding-left: 30px; font-size: 12.5px;
    box-shadow: none; margin: 0;
  }
  body:not(.kundenbereich) .unterleiste a::before {
    content: ''; position: absolute; left: 17px; width: 1px; height: 100%;
    background: rgba(255,255,255,.1);
  }
  body:not(.kundenbereich) .unterleiste a { position: relative; }
  body:not(.kundenbereich) .unterleiste a.aktiv, .unterleiste.dritte a.aktiv {
    color: #fff; font-weight: 500; background: rgba(255,255,255,.06); box-shadow: none;
  }
  body:not(.kundenbereich) .unterleiste.dritte a { padding-left: 42px; font-size: 12px; }
  body:not(.kundenbereich) .unterleiste.dritte a::before { left: 30px; }

  /* Die rote Zahl rutscht ans Ende der Zeile. */
  body:not(.kundenbereich) .navigation a .nav-rot, .nav-mehr-knopf .nav-rot {
    margin-left: auto; margin-right: 0;
  }

  /* Konto und Abmelden ganz unten. */
  body:not(.kundenbereich) .nutzer-chip {
    order: 9; margin-top: auto; padding: 10px 0 0 0;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.08);
    color: #fff; gap: 6px;
  }
  body:not(.kundenbereich) .nutzer-link { flex: 1 1 auto; color: #e6eded; padding: 5px 8px; border-radius: 5px; }
  body:not(.kundenbereich) .nutzer-link:hover { background: rgba(255,255,255,.06); }
  body:not(.kundenbereich) .nutzer-name { font-size: 13px; }
  body:not(.kundenbereich) .nutzer-chip .knopf.sekundaer {
    background: none; border-color: rgba(255,255,255,.18); color: #aebbbe;
    min-height: 28px;
  }
  body:not(.kundenbereich) .nutzer-chip .knopf.sekundaer:hover { background: rgba(255,255,255,.08); color: #fff; }

  body:not(.kundenbereich) .kopf-schnell { order: 8; border: 0; }
  body:not(.kundenbereich) .kopf-schnell-wort {
    position: static; width: auto; height: auto; clip-path: none;
  }
  body:not(.kundenbereich) .nav-mehr { display: none; }

  /* Der Inhalt rechts. */
  body:not(.kundenbereich) #ansicht {
    grid-column: 2; grid-row: 1; min-width: 0;
    background: var(--hintergrund);
  }
  body:not(.kundenbereich) .inhalt { max-width: 1240px; padding: 22px 26px 64px; }
}

@media (min-width: 861px) {
  /*
   * Konto und Aufgaben ans untere Ende der Schiene.
   *
   * Beide stehen im Dokument mitten in der Kopfzeile - vor den Unterleisten.
   * Eine Spalte kann das nicht umsortieren, also werden sie aus dem Fluss
   * genommen und unten angeheftet. Die Schiene bekommt dafuer unten Platz.
   */
  body:not(.kundenbereich) .kopf { position: relative; }
  /* Muss Spalte sein, sonst greifen weder `order` noch `margin-top: auto` -
     der Block-Reset weiter oben hat daraus sonst wieder einen Block gemacht. */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .kopf-innen {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; flex: 1 1 auto;
  }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .marke { order: 1; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation-zeile { order: 2; }

  /*
   * Angeheftet war bei kurzer Liste richtig und bei langer falsch: Auf einem
   * flachen Bildschirm mit vielen Bereichen legte sich der Fuss ueber die
   * Reiter, die darunter durchliefen. `margin-top: auto` tut beides - es
   * schiebt ihn nach unten, solange Platz ist, und laesst ihn sonst einfach
   * am Ende der Liste stehen.
   */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .nutzer-chip {
    order: 3; position: static;
    margin: auto 0 0; padding: 12px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  body:not(.kundenbereich) .nutzer-link { min-width: 0; }
  body:not(.kundenbereich) .nutzer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  body:not(.kundenbereich) .kopf-schnell {
    position: static; width: auto; margin: 6px 0 0;
  }

  /* Die Unterleisten schliessen direkt an die Bereiche an. */
  body:not(.kundenbereich) .unterleiste.zweite { margin-top: 4px; }
  body:not(.kundenbereich) .unterleiste-innen { padding: 0; }
}


/* ==========================================================================
 * Schritt 2, erster Teil: Symbole in der Navigation.
 *
 * Als Maske aus dem Stylesheet, nicht als Zeichen im Markup - so bekommt die
 * Schiene ihre Symbole, ohne dass eine einzige Ansicht angefasst werden muss.
 * Sie nehmen die Farbe der Zeile an und wechseln mit ihr.
 *
 * Die 283 Emoji in den Ansichten selbst bleiben davon unberuehrt; die sind
 * Handarbeit und kommen als naechstes.
 * ======================================================================== */


  body:not(.kundenbereich) .navigation > a::before {
    content: ''; width: 16px; height: 16px; flex: 0 0 auto;
    background-color: currentColor; opacity: .85;
    /*
     * Ein Ring als Rueckfall. Ohne ihn stuende dort, wo kein Symbol
     * hinterlegt ist, ein ausgefuelltes Viereck - und schmal gestellt waere
     * das der einzige Hinweis auf den Punkt.
     */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%228%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%228%22/%3E%3C/svg%3E");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  body:not(.kundenbereich) .navigation > a.aktiv::before { opacity: 1; }

  body:not(.kundenbereich) .navigation > a[href="#/admin/kalender"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2217%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2217%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/kurse"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2217%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2217%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/meine-kurse"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2217%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2217%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/kasse"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2220%22%20height=%2212%22%20rx=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222.5%22/%3E%3Cpath%20d=%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2220%22%20height=%2212%22%20rx=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222.5%22/%3E%3Cpath%20d=%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/kasse"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2220%22%20height=%2212%22%20rx=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222.5%22/%3E%3Cpath%20d=%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2220%22%20height=%2212%22%20rx=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222.5%22/%3E%3Cpath%20d=%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/abrechnung"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%202v20l2-1.5L8%2022l2-1.5L12%2022l2-1.5L16%2022l2-1.5L20%2022V2l-2%201.5L16%202l-2%201.5L12%202l-2%201.5L8%202%206%203.5z%22/%3E%3Cpath%20d=%22M8%208h8M8%2012h8M8%2016h5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%202v20l2-1.5L8%2022l2-1.5L12%2022l2-1.5L16%2022l2-1.5L20%2022V2l-2%201.5L16%202l-2%201.5L12%202l-2%201.5L8%202%206%203.5z%22/%3E%3Cpath%20d=%22M8%208h8M8%2012h8M8%2016h5%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/abrechnung"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%202v20l2-1.5L8%2022l2-1.5L12%2022l2-1.5L16%2022l2-1.5L20%2022V2l-2%201.5L16%202l-2%201.5L12%202l-2%201.5L8%202%206%203.5z%22/%3E%3Cpath%20d=%22M8%208h8M8%2012h8M8%2016h5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%202v20l2-1.5L8%2022l2-1.5L12%2022l2-1.5L16%2022l2-1.5L20%2022V2l-2%201.5L16%202l-2%201.5L12%202l-2%201.5L8%202%206%203.5z%22/%3E%3Cpath%20d=%22M8%208h8M8%2012h8M8%2016h5%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/schluessel"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%202l-2%202m-7.6%207.6a5.5%205.5%200%201%201-7.8%207.8%205.5%205.5%200%200%201%207.8-7.8zm0%200L15.5%207.5m0%200l3%203L22%207l-3-3%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%202l-2%202m-7.6%207.6a5.5%205.5%200%201%201-7.8%207.8%205.5%205.5%200%200%201%207.8-7.8zm0%200L15.5%207.5m0%200l3%203L22%207l-3-3%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/schluessel"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%202l-2%202m-7.6%207.6a5.5%205.5%200%201%201-7.8%207.8%205.5%205.5%200%200%201%207.8-7.8zm0%200L15.5%207.5m0%200l3%203L22%207l-3-3%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%202l-2%202m-7.6%207.6a5.5%205.5%200%201%201-7.8%207.8%205.5%205.5%200%200%201%207.8-7.8zm0%200L15.5%207.5m0%200l3%203L22%207l-3-3%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/tickets"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%209a2%202%200%200%201-2%202H6l-4%204V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202z%22/%3E%3Cpath%20d=%22M18%209h2a2%202%200%200%201%202%202v11l-4-4h-6a2%202%200%200%201-2-2v-1%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%209a2%202%200%200%201-2%202H6l-4%204V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202z%22/%3E%3Cpath%20d=%22M18%209h2a2%202%200%200%201%202%202v11l-4-4h-6a2%202%200%200%201-2-2v-1%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/tickets"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%228%22%20y=%222%22%20width=%228%22%20height=%224%22%20rx=%221%22/%3E%3Cpath%20d=%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2M12%2011h4M12%2016h4M8%2011h.01M8%2016h.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%228%22%20y=%222%22%20width=%228%22%20height=%224%22%20rx=%221%22/%3E%3Cpath%20d=%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2M12%2011h4M12%2016h4M8%2011h.01M8%2016h.01%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/chat"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/aufgaben"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2218%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%207v10M12%207v6M16%207v8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2218%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%207v10M12%207v6M16%207v8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/verzeichnis"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2021v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2021v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/dozenten"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2021v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M22%2021v-2a4%204%200%200%200-3-3.9M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/teilnehmer"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M5%2021a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M5%2021a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/eigene-teilnehmer"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M5%2021a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M5%2021a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/analysen"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v16a2%202%200%200%200%202%202h16M7%2016l4-5%204%203%205-7%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v16a2%202%200%200%200%202%202h16M7%2016l4-5%204%203%205-7%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/auswertung"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v16a2%202%200%200%200%202%202h16M7%2016l4-5%204%203%205-7%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v16a2%202%200%200%200%202%202h16M7%2016l4-5%204%203%205-7%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/inhouse"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22/%3E%3Cpath%20d=%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2M10%206h4M10%2010h4M10%2014h4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22/%3E%3Cpath%20d=%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2M10%206h4M10%2010h4M10%2014h4%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/inhouse"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22/%3E%3Cpath%20d=%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2M10%206h4M10%2010h4M10%2014h4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22/%3E%3Cpath%20d=%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2M10%206h4M10%2010h4M10%2014h4%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/anfragen"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22/%3E%3Cpath%20d=%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2M10%206h4M10%2010h4M10%2014h4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22/%3E%3Cpath%20d=%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2M10%206h4M10%2010h4M10%2014h4%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/passfotos"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2213%22%20r=%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2213%22%20r=%223%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/passfotos"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2213%22%20r=%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2213%22%20r=%223%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/dokumente"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/dokumente"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/dokumentation"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/dokumentation"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d=%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/standorte"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/standorte"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/standortmanagement"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2210%22%20r=%223%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d=%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d=%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/schulungen"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d=%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d=%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/einarbeitung"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d=%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d=%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/feedback"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202%203.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202%203.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/feedback"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202%203.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202%203.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/kursbewertungen"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202%203.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202%203.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021l1.2-6.9-5-4.9%206.9-1z%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/verfuegbarkeit"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/admin/verfuegbarkeit"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v5l3.5%202%22/%3E%3C/svg%3E"); }
  body:not(.kundenbereich) .navigation > a[href="#/profil"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M5%2021a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M5%2021a7%207%200%200%201%2014%200%22/%3E%3C/svg%3E"); }

/* ==========================================================================
 * Die Unterpunkte stehen jetzt im selben `nav` wie ihr Bereich (app.js,
 * `alsSpalte`). Damit sitzen sie dort, wo sie hingehoeren - direkt unter dem
 * Bereich, zu dem sie gehoeren, statt hinter allen Reitern.
 * ======================================================================== */

@media (min-width: 861px) {
  body:not(.kundenbereich) .navigation > .unterleiste {
    display: block; width: 100%; margin: 2px 0 6px;
  }
  body:not(.kundenbereich) .navigation > .unterleiste.dritte { margin-top: 0; }

  /* Ein Bereich mit offener Liste bleibt als Kopf der Gruppe erkennbar. */
  body:not(.kundenbereich) .navigation > a.aktiv:has(+ .unterleiste) {
    margin-bottom: 2px;
  }
}

/* ==========================================================================
 * Schritt 6 auf dem Handy: die Schiene klappt ueber den Inhalt.
 *
 * Eine feste Spalte von 236 Pixeln nimmt auf einem Telefon zwei Drittel des
 * Bildes. Also liegt sie dort daneben und kommt auf Wunsch herein - mit
 * einem Schleier darueber, damit klar ist, dass der Inhalt wartet.
 * ======================================================================== */

.schienen-schalter, .handyleiste { display: none; }

/* ==========================================================================
 * Die Seitenleiste auf- und zuklappen.
 *
 * Am grossen Bildschirm ist sie 236 Pixel breit. Wer eine breite Tabelle vor
 * sich hat, will diese 236 Pixel manchmal fuer den Inhalt haben - aber nicht
 * die Navigation verlieren. Deshalb wird sie nicht weggeschoben, sondern
 * schmal: 62 Pixel, nur noch die Symbole. Sie bleiben an derselben Stelle,
 * in derselben Reihenfolge, und ein Klick auf denselben Schalter stellt
 * alles zurueck. Der Zustand haelt ueber Seitenwechsel hinweg (localStorage).
 *
 * Auf schmalen Geraeten aendert das nichts: Dort faehrt die Schiene wie
 * bisher ueber den Inhalt, und dieser Schalter ist ausgeblendet.
 * ======================================================================== */

.schiene-schalter { display: none; }

@media (min-width: 861px) {
  body:not(.kundenbereich) .schiene-schalter {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 14px; right: 8px; z-index: 2;
    width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 6px;
    background: none; cursor: pointer;
    opacity: .5;
    transition: opacity .12s ease, background-color .12s ease;
  }
  body:not(.kundenbereich) .schiene-schalter:hover {
    opacity: 1; background: rgba(255,255,255,.08);
  }
  body:not(.kundenbereich) .schiene-schalter:focus-visible {
    opacity: 1; outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px;
  }
  /* Ein Fenster mit abgeteilter Spalte - dasselbe Bild in beide Richtungen. */
  .schiene-schalter-zeichen {
    width: 17px; height: 17px;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2218%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M9%203v18%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2218%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M9%203v18%22/%3E%3C/svg%3E");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  body:not(.kundenbereich) #app.schiene-schmal .schiene-schalter-zeichen { transform: scaleX(-1); }

  /*
   * Der Schalter sitzt absolut in der Schiene. `position: sticky` an der
   * Schiene ist bereits ein Bezugsrahmen - es braucht daneben kein
   * zusaetzliches `relative`.
   */

  /* Platz fuer den Schalter neben der Marke. */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .marke { padding-right: 40px; }

  /* --- zugeklappt --------------------------------------------------------- */

  /*
   * Die Regeln der breiten Schiene stehen auf `#app:has(> .kopf) > .kopf` und
   * sind damit spezifischer als ein blosses `#app.schiene-schmal`. Der
   * zugeklappte Zustand schreibt deshalb denselben Vorspann - sonst gewinnt
   * die breite Fassung, und die Unterleisten blieben stehen.
   */
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf {
    padding: 10px 7px 10px;
    align-items: stretch;
  }

  /*
   * Der Text verschwindet ueber die Schriftgroesse, nicht ueber `display`:
   * Er steht als blosser Textknoten im Verweis, ohne eigene Huelle, und
   * waere sonst nicht zu fassen. Symbol, Zahl und Namenskuerzel setzen ihre
   * Groesse selbst wieder und bleiben dadurch stehen.
   */
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .navigation > a,
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .kopf-schnell,
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .nutzer-link {
    font-size: 0; gap: 0;
    justify-content: center;
    padding-left: 0; padding-right: 0;
    position: relative;
  }
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .navigation > a::before {
    margin: 0; width: 18px; height: 18px; opacity: 1;
  }

  /* Die rote Zahl wird zum Punkt in der Ecke - Platz fuer Ziffern ist keiner. */
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .navigation a .nav-rot {
    position: absolute; top: 3px; right: 9px;
    margin: 0; padding: 0;
    width: 8px; height: 8px; min-width: 0;
    border-radius: 50%;
    font-size: 0; line-height: 0;
    border: 2px solid var(--n900);
  }

  /* Unterleisten, Schriftzug und Abmelden haben schmal keinen Platz. */
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .unterleiste,
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .marke > span,
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .nutzer-name,
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .nutzer-chip .knopf.sekundaer,
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .kopf-schnell-wort {
    display: none;
  }

  /* Die Marke wird zum Zeichen allein, mittig ueber den Punkten. */
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .marke {
    display: flex; justify-content: center;
    gap: 0; padding: 2px 0 12px; font-size: 0;
  }
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .marke-zeichen {
    width: 28px; height: 28px; margin: 0;
  }
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .nutzer-chip {
    justify-content: center;
  }

  /* Der Schalter rutscht unter das Zeichen, sobald daneben kein Platz mehr ist. */
  body:not(.kundenbereich) #app:has(> .kopf).schiene-schmal > .kopf .schiene-schalter {
    position: static; margin: 0 auto 6px; order: -1;
  }
}


@media (max-width: 860px) {
  body:not(.kundenbereich) #app:has(> .kopf) { background: var(--hintergrund); }

  /*
   * Geschoben wird ueber `left`, nicht ueber `transform`.
   *
   * Der Schalter steht im Dokument innerhalb der Schiene. Ein `transform` am
   * Elternteil macht daraus den Bezugsrahmen fuer alles, was darin `fixed`
   * steht - der Schalter waere mit hinausgefahren und nicht mehr erreichbar
   * gewesen. Mit `left` bleibt er, wo er hingehoert.
   */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf {
    position: fixed; top: 0; bottom: 0; left: -264px; z-index: 60;
    width: 264px; max-width: 84vw;
    background: var(--n900); color: #aebbbe;
    display: flex; flex-direction: column;
    padding: 14px 10px 20px; overflow-y: auto;
    transition: left .2s ease, box-shadow .2s ease;
    box-shadow: none; border: 0;
  }
  body:not(.kundenbereich) #app:has(> .kopf).schiene-offen > .kopf {
    left: 0; box-shadow: 0 0 40px rgba(0,0,0,.5);
  }

  /* Der Schleier ueber dem Inhalt. */
  #app:has(> .kopf)::after {
    content: ''; position: fixed; inset: 0; z-index: 55;
    background: rgba(8,14,16,.5); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  body:not(.kundenbereich) #app:has(> .kopf).schiene-offen::after {
    opacity: 1; pointer-events: auto;
  }

  /* Innen wie am grossen Bildschirm: eine Spalte. */
  body:not(.kundenbereich) .kopf-innen {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    max-width: none; margin: 0; padding: 0; min-height: 0; gap: 2px;
  }
  body:not(.kundenbereich) .navigation-zeile { display: flex; flex-direction: column; gap: 2px; }

  /*
   * Die alte Kopfzeile ist eine Zeile: waagerecht schiebbar, mit `margin-left:
   * auto`, einer Maske an den Raendern und `width: 100%` an Stellen, die sich
   * auf eine ganz andere Breite bezogen. In einer Spalte ergibt davon nichts
   * mehr Sinn - ein `margin-left: auto` schiebt dort nach rechts statt nach
   * hinten, und genau das hat die Reiter neben die Schiene gestellt.
   *
   * Deshalb hier kein Nachbessern an einzelnen Werten, sondern ein sauberer
   * Schnitt: In der Schiene ist alles ein schlichter Block, und nur die
   * Punkte selbst sind wieder Zeilen.
   */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .kopf-innen,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation-zeile,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste,
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste-innen {
    display: block; width: auto; max-width: none; min-width: 0;
    margin: 0; padding: 0; overflow: visible; order: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation { margin-top: 10px; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste { margin: 2px 0 6px; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .unterleiste.dritte { margin-top: 0; }
  body:not(.kundenbereich) .navigation {
    flex-direction: column; align-items: stretch; margin: 10px 0 0;
    gap: 1px; overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  body:not(.kundenbereich) .navigation a.nachrangig { display: flex; }
  body:not(.kundenbereich) .nav-mehr { display: none; }

  body:not(.kundenbereich) .marke { color: #fff; padding: 2px 6px 14px; gap: 11px; font-size: 14.5px; }
  body:not(.kundenbereich) .marke span { display: inline; font-size: 14.5px; }
  body:not(.kundenbereich) .marke-zeichen {
    content: url(/img/zeichen-weiss.png);
    width: 32px; height: 32px; border-radius: 0; background: none; padding: 0;
  }

  body:not(.kundenbereich) .navigation a, body:not(.kundenbereich) .unterleiste a,
  body:not(.kundenbereich) .kopf-schnell {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 8px; border-radius: 5px; color: #aebbbe;
    font-size: 14px; font-weight: 450; text-decoration: none;
    border: 0; background: none; white-space: nowrap;
  }
  body:not(.kundenbereich) .navigation > a.aktiv {
    background: rgba(255,255,255,.09); color: #fff; font-weight: 500;
  }
  body:not(.kundenbereich) .unterleiste, body:not(.kundenbereich) .unterleiste.dritte {
    background: none; border: 0; padding: 0; display: block; width: 100%;
  }
  body:not(.kundenbereich) .unterleiste-innen {
    flex-direction: column; align-items: stretch; max-width: none;
    margin: 0; padding: 0; gap: 1px; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  body:not(.kundenbereich) .unterleiste a { padding-left: 30px; position: relative; box-shadow: none; }
  body:not(.kundenbereich) .unterleiste a::before {
    content: ''; position: absolute; left: 17px; width: 1px; height: 100%;
    background: rgba(255,255,255,.1);
  }
  body:not(.kundenbereich) .unterleiste.dritte a { padding-left: 42px; }
  body:not(.kundenbereich) .unterleiste.dritte a::before { left: 30px; }
  body:not(.kundenbereich) .unterleiste a.aktiv {
    color: #fff; font-weight: 500; background: rgba(255,255,255,.06); box-shadow: none;
  }
  body:not(.kundenbereich) .navigation a .nav-rot,
  body:not(.kundenbereich) .unterleiste a .nav-rot { margin-left: auto; }

  /*
   * Anders als am grossen Bildschirm kleben sie hier nicht unten: Die Liste
   * ist auf dem Handy oft laenger als das Bild, und ein angehefteter Fuss
   * legte sich dann ueber die Reiter, die gerade darunter durchlaufen.
   */
  /*
   * `flex-wrap: nowrap` ist hier das Entscheidende: Die alte Kopfzeile setzt
   * `wrap`, damit die Reiter in einer zweiten Zeile weiterlaufen. In einer
   * Spalte heisst dasselbe Wort etwas anderes - was nicht in die Hoehe passt,
   * bricht in eine zweite *Spalte* daneben um. Genau so standen Marke und
   * Konto ploetzlich rechts neben der Schiene, sobald die Liste laenger war
   * als das Bild.
   */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .kopf-innen {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  }
  /* Die alte Zeile setzt an mehreren Kindern `margin-left: auto`; in einer
     Spalte schiebt das nach rechts statt nach hinten. */
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .kopf-innen > * {
    margin-left: 0; margin-right: 0; align-self: stretch; max-width: 100%;
  }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .marke { order: 1; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .navigation-zeile { order: 2; }
  body:not(.kundenbereich) #app:has(> .kopf) > .kopf .nutzer-chip { order: 3; }
  body:not(.kundenbereich) .nutzer-chip {
    position: static; order: 3;
    margin: 18px 0 0; padding: 12px 0 0; border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08); color: #fff;
    display: flex; align-items: center; gap: 8px;
  }
  body:not(.kundenbereich) .nutzer-link { flex: 1 1 auto; color: #e6eded; min-width: 0; }
  body:not(.kundenbereich) .nutzer-name {
    display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body:not(.kundenbereich) .nutzer-chip .knopf.sekundaer {
    background: none; border-color: rgba(255,255,255,.18); color: #aebbbe;
  }
  body:not(.kundenbereich) .kopf-schnell { position: static; order: 3; margin-top: 4px; }
  body:not(.kundenbereich) .kopf-schnell-wort { position: static; width: auto; height: auto; clip-path: none; }

  /*
   * Die Kopfleiste: klebt oben, traegt links das Menue und daneben die Marke.
   * Sie steht ausserhalb der Schiene - deshalb faehrt sie nicht mit weg, und
   * es gibt auf jeder Seite einen sichtbaren Ort, an dem die Navigation liegt.
   */
  .handyleiste {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 50;
    height: 52px; padding: 0 12px;
    background: var(--flaeche); border-bottom: 1px solid var(--linie);
  }
  .handyleiste-marke {
    display: flex; align-items: center; gap: 9px;
    text-decoration: none; color: var(--text);
    font-size: 14px; font-weight: 600; letter-spacing: -.02em;
    min-width: 0; overflow: hidden;
  }
  .handyleiste-marke img { width: 26px; height: 26px; flex: 0 0 auto; }
  .handyleiste-marke span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  body:not(.kundenbereich) .schienen-schalter {
    display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
    width: 38px; height: 38px; padding: 0 9px; flex: 0 0 auto;
    border: 1px solid var(--linie); border-radius: 6px;
    background: var(--flaeche); cursor: pointer;
  }
  body:not(.kundenbereich) .schienen-schalter:active { background: var(--n100); }
  body:not(.kundenbereich) .schienen-schalter span {
    display: block; height: 2px; flex: 0 0 2px; width: 100%;
    background: var(--n800); border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
  }
  body:not(.kundenbereich) #app.schiene-offen .schienen-schalter span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  body:not(.kundenbereich) #app.schiene-offen .schienen-schalter span:nth-child(2) { opacity: 0; }
  body:not(.kundenbereich) #app.schiene-offen .schienen-schalter span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Die Leiste steht im Fluss - der Inhalt braucht keinen Zuschlag. */
  body:not(.kundenbereich) #ansicht .inhalt { padding-top: 18px; }
}

/* ==========================================================================
 * Gleiche Zeilenhoehe in allen Listen.
 *
 * Die Unruhe kam aus den Zellen, nicht aus der Tabelle: Eine Personenzelle
 * traegt Name und Mailadresse untereinander, eine Zelle mit Schaltflaeche
 * traegt einen 26 Pixel hohen Knopf, eine mit Kreis einen 30er. Jede davon
 * hat die Zeile anders hoch gemacht - in „Zugaenge" und „Auswertung" sah man
 * das am deutlichsten, weil dort alle drei nebeneinander stehen.
 *
 * Deshalb: eine feste Hoehe fuer die Zeile, und die drei Bausteine darin so
 * bemessen, dass sie hineinpassen.
 * ======================================================================== */

.tabellenrahmen tbody tr { height: 48px; }
.tabellenrahmen thead tr { height: 34px; }

/* Der Kreis mit den Anfangsbuchstaben. */
.tabellenrahmen td .avatar,
.tabellenrahmen td .kreis { width: 28px; height: 28px; font-size: 11px; }

/* Zweizeilige Zellen: Name oben, Nebenauskunft darunter - zusammen 32 Pixel,
   plus Innenrand ergibt genau die Zeilenhoehe. */
.tabellenrahmen td .klein,
.tabellenrahmen td .schwach { line-height: 1.35; }
.tabellenrahmen td > span[style*="font-weight:600"],
.tabellenrahmen td .name { line-height: 1.35; }

/* Schaltflaechen in der Zelle: 28 Pixel, damit die Zeile nicht waechst. */
.tabellenrahmen td .knopf.klein { min-height: 28px; padding: 0 9px; font-size: 12px; }
.tabellenrahmen td .marke-etikett { min-height: 20px; }

/* Die dichten Tabellen bleiben ausgenommen - sie sind mit Absicht enger. */
.tl-tabelle tbody tr, .fb-tabelle tbody tr { height: auto; }

/* ==========================================================================
 * Die Schaltflaechen, die etwas anlegen.
 *
 * „+ Kurs anlegen", „+ Zugang anlegen", „+ Uebergabe": ueberall dieselbe
 * Handlung, bisher in drei Groessen. Jetzt eine Hoehe, ein Gewicht, und das
 * Pluszeichen mit etwas Luft dahinter, damit es als Zeichen liest und nicht
 * als Teil des Wortes.
 * ======================================================================== */

.titelzeile .knopf, .reihe > .knopf { min-height: 32px; }
.titelzeile .knopf.klein, .reihe > .knopf.klein { min-height: 28px; }
.knopf { letter-spacing: -.005em; word-spacing: .12em; }

/* Ein Knopf, der allein am rechten Rand steht, bekommt keinen Mindestabstand
   von irgendwoher - die Zeile ordnet ihn. */
.titelzeile .reihe-ende { gap: 8px; }


/* ==========================================================================
 * Listen mit Ordnern - die Schulungsverwaltung und alles, was so gebaut ist.
 *
 * Woran man eine gebastelte Oberflaeche erkennt, stand hier in Reinform:
 *
 *   - Jede Zeile eine eigene weisse Karte, mit Luft dazwischen. Sechs
 *     Schulungen wurden so zu sechs Objekten statt zu einer Liste.
 *   - Vier gleich laute Schaltflaechen in jeder Zeile, „Loeschen" darunter -
 *     die gefaehrlichste Handlung so gross wie die haeufigste.
 *   - Ein tuerkis eingefaerbtes Band als Ordnerkopf.
 *   - Sinnbilder aus der Zeichentabelle.
 *
 * Dagegen: ein durchgehender Block je Ordner, Haarlinien statt Luecken, eine
 * laute Handlung und der Rest leise, und Symbole aus dem Satz.
 * ======================================================================== */

/* --- Der Ordner als ein Block ------------------------------------------- */
.ordner {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.ordner + .ordner { margin-top: 12px; }

.ordner-kopf {
  background: var(--n25);
  border: 0; border-bottom: 1px solid var(--linie);
  border-radius: 0;
  margin: 0; padding: 9px var(--rand);
  gap: 10px; min-height: 42px;
}
.ordner-kopf .titel {
  font-weight: 600; font-size: 12.5px; color: var(--text-mittel);
  letter-spacing: .01em;
}
.ordner-kopf .klein { font-size: 11.5px; }

/* Das Sinnbild wird ein Symbol. Der Text dahinter bleibt fuer Vorleser
   stehen, ist aber auf null gesetzt. */
.ordner-symbol {
  font-size: 0; width: 16px; height: 16px; flex: 0 0 auto;
  background-color: var(--text-schwach);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h4l2%203h8a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h4l2%203h8a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202z%22/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Die Liste im Ordner traegt keinen eigenen Rahmen mehr. */
.ordner .liste { border: 0; border-radius: 0; background: none; box-shadow: none; }

/* --- Die Zeile ---------------------------------------------------------- */
.listenzeile {
  min-height: 48px; padding: 8px var(--rand);
  gap: 10px; border-bottom: 1px solid var(--linie);
}
.listenzeile:last-child { border-bottom: 0; }
.listenzeile .titel { font-weight: 550; font-size: 13.5px; }
.listenzeile .klein { font-size: 12px; line-height: 1.4; }

/* Der Griff: Punkte statt Blindenschrift, und nur dort sichtbar, wo man
   ihn auch benutzen kann. */
.zieh-griff {
  font-size: 0; width: 14px; height: 16px; flex: 0 0 auto; padding: 0;
  background-color: var(--n300);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%226%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%229%22%20cy=%2212%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%229%22%20cy=%2218%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215%22%20cy=%226%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215%22%20cy=%2212%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215%22%20cy=%2218%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%226%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%229%22%20cy=%2212%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%229%22%20cy=%2218%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215%22%20cy=%226%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215%22%20cy=%2212%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215%22%20cy=%2218%22%20r=%221.4%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .4; transition: opacity .12s ease;
}
.listenzeile:hover .zieh-griff { opacity: 1; }

/* --- Die Handlungen ----------------------------------------------------- */

/*
 * Eine laute, der Rest leise. Der gefuellte Knopf ist der uebliche Weg;
 * „Freigeben" und „Bearbeiten" sind Text, und „Loeschen" kommt erst zum
 * Vorschein, wenn die Maus auf der Zeile steht. Ohne Maus steht es
 * dauerhaft da - dort gibt es kein Ueberfahren.
 */
.listenzeile .reihe .knopf.sekundaer,
.ordner-kopf .reihe .knopf.sekundaer {
  background: none; border-color: transparent; color: var(--text-schwach);
  padding: 0 8px;
}
.listenzeile .reihe .knopf.sekundaer:hover,
.ordner-kopf .reihe .knopf.sekundaer:hover {
  background: var(--n100); border-color: transparent; color: var(--text);
}
.listenzeile .reihe .knopf.gefahr,
.ordner-kopf .reihe .knopf.gefahr {
  background: none; border-color: transparent; color: var(--text-schwach);
  padding: 0 8px;
}
.listenzeile .reihe .knopf.gefahr:hover,
.ordner-kopf .reihe .knopf.gefahr:hover {
  background: var(--gefahr-hell); border-color: transparent; color: var(--gefahr);
}
/*
 * „Loeschen" bleibt sichtbar - nur leise.
 *
 * Erst hatte ich es hinter das Ueberfahren gelegt, wie es dichte Werkzeuge
 * gern tun. Aber was man nicht sieht, ist fuer den, der es sucht, nicht da;
 * genau diese Erfahrung hat das Menue auf dem Handy schon gekostet. Also
 * steht es da, in derselben Farbe wie die uebrigen Handlungen, und wird erst
 * rot, wenn die Maus darauf liegt. Laut ist es dann, wenn es zaehlt.
 */
.listenzeile .reihe .knopf.gefahr,
.ordner-kopf .reihe .knopf.gefahr { opacity: .75; }
.listenzeile:hover .reihe .knopf.gefahr,
.ordner-kopf:hover .reihe .knopf.gefahr,
.listenzeile .reihe .knopf.gefahr:focus-visible { opacity: 1; }

/* --- Die Zustandsschilder ----------------------------------------------- */
.ordner .listenzeile .marke-etikett {
  background: none; border-color: transparent; color: var(--text-schwach);
  padding: 0; min-height: 0; font-weight: 500;
}
.ordner .listenzeile .marke-etikett.gruen { color: var(--gruen); }
.ordner .listenzeile .marke-etikett.rot { color: var(--gefahr); }
.ordner .listenzeile .marke-etikett.gelb { color: #a97406; }
.ordner .listenzeile .marke-etikett.akzent {
  background: var(--a50); border-color: var(--a100); color: var(--akzent-dunkel);
  padding: 0 6px; min-height: 20px;
}

/* --- Der Kopf der Seite -------------------------------------------------- */

/*
 * Titel und Handlungen in einer Zeile. Vorher nahm der Titelblock die volle
 * Breite, die Knoepfe rutschten in eine zweite Zeile und standen dort
 * rechts unter nichts.
 */
.titelzeile { align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.titelzeile > div:first-child { flex: 1 1 auto; min-width: 0; }
.titelzeile > div:first-child > .schwach { max-width: 72ch; font-size: 13px; margin: 2px 0 0; }
.titelzeile .reihe-ende { flex: 0 0 auto; margin-left: auto; }