/* Sidebar */
.seitenleiste {
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--divider-color);
    background: var(--sidebar-surface);
    transition: background-color var(--theme-transition);
}

.seitenleiste__kopf {
    padding: var(--space-3);
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
}

.seitenleiste__marke {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-decoration: none;
    height: var(--target-min);
    display: flex;
    align-items: center;
}

.seitenleiste__marke:hover {
    color: var(--text-primary);
}

.seitenleiste__marke .logo {
    --logo-groesse: 1.75rem;
}

/* Logo: Zeichen und Wortmarke. --logo-groesse ist die Kantenlänge des Zeichens; Abstand und Höhe der Wortmarke folgen daraus. */
.logo {
    --logo-groesse: 2rem;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--logo-groesse) * 0.23);
    color: var(--text-primary);
}

.logo__zeichen {
    flex: none;
    width: var(--logo-groesse);
    height: var(--logo-groesse);
    fill: url(#logo-verlauf);
}

.logo__von {
    stop-color: var(--logo-von);
}

.logo__bis {
    stop-color: var(--logo-bis);
}

.logo__wort {
    flex: none;
    height: calc(var(--logo-groesse) * 0.592);
    aspect-ratio: 3653.2 / 733;
    fill: currentColor;
}

.logo__box {
    fill: var(--accent);
}

.logo--weiss {
    color: var(--text-on-accent);
}

.logo--weiss .logo__zeichen,
.logo--weiss .logo__box {
    fill: currentColor;
}

.seitenleiste__liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-2);
}

.seitenleiste__schliessen {
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--duration-control), background-color var(--duration-control);
}

.seitenleiste__schliessen:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.seitenleiste__schliessen:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}


/* Navigation Group */
.navigationsgruppe {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--divider-color);
}

.navigationsgruppe--ohne-titel {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.navigationsgruppe--ohne-titel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigationsgruppe[open] .navigationsgruppe__zeichen {
    transform: rotate(180deg);
}

.navigationsgruppe__titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--target-min);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color var(--duration-control), background-color var(--duration-control);
}

.navigationsgruppe__titel:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.navigationsgruppe__titel:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.navigationsgruppe__titel::-webkit-details-marker {
    display: none;
}

.navigationsgruppe__zeichen {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: none;
    transition: transform var(--duration-control);
}

@media (prefers-reduced-motion: reduce) {
    .navigationsgruppe__zeichen {
        transition: none;
    }
}

/* Navigation group list */
.navigationsgruppe > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigationsgruppe ul,
.seitenleiste__einstellungen ul {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) / 2);
}


/* Navigation Point */
.navigationspunkt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--space-2) + var(--space-1) / 2);
    min-height: var(--target-nav);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: color var(--duration-control), background-color var(--duration-control);
}

.navigationspunkt:hover,
.navigationspunkt.zeige-hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.navigationspunkt:focus-visible,
.navigationspunkt.zeige-fokus {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.navigationspunkt[aria-current="page"] {
    background: var(--glass-surface-hover);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.navigationspunkt[aria-current="page"] .symbol {
    color: var(--accent);
}

.navigationspunkt .symbol {
    width: var(--icon-size-nav);
    height: var(--icon-size-nav);
    flex: none;
}

.navigationspunkt span {
    flex: 1;
}

/* Ein Modul mit Unterpunkten ist nur der Ort: Symbol im Akzent und kräftiger, aber ohne Fläche – die trägt kein
   Unterpunkt, er wird an der Führungslinie markiert. */
.navigationspunkt[aria-current="true"] {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.navigationspunkt[aria-current="true"] .symbol {
    color: var(--accent);
}

.navigationspunkt__zeichen {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: none;
    color: var(--text-muted);
    transition: transform var(--duration-control);
}

.navigationspunkt[aria-current] .navigationspunkt__zeichen {
    transform: rotate(180deg);
}

/* Die Führungslinie steht unter der Mitte des Modulsymbols, die Unterpunkte beginnen bündig mit dem Modulnamen. */
.seitenleiste .navigationsunterpunkte {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) / 2);
    margin: calc(var(--space-1) / 2) 0 var(--space-2) calc(var(--space-3) + var(--icon-size-nav) / 2 - 1px);
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--divider-color);
}

.navigationspunkt:not([aria-current]) + .navigationsunterpunkte {
    display: none;
}

.navigationsunterpunkt {
    display: flex;
    align-items: center;
    min-height: var(--target-nav);
    margin-left: -1px;
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--icon-size-nav) / 2 + var(--space-2) + var(--space-1) / 2 + 1px);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    transition: color var(--duration-control), background-color var(--duration-control);
}

.navigationsunterpunkt:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.navigationsunterpunkt:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: calc(var(--focus-ring-width) * -1);
}

.navigationsunterpunkt[aria-current] {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 2px 0 0 var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .navigationspunkt__zeichen {
        transition: none;
    }
}

/* Der Modulname über dem Seitentitel; auf Unterseiten mit übergeordneter Seite steht davor der Knopf zurück. */
.ueberzeile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ueberzeile:has(.knopf) {
    margin-bottom: var(--space-3);
}

/* Der Seitenkopf rückt seinen Titel ein; die Überzeile ohne Knopf steht deshalb bündig und dicht über dem Titel. */
.ueberzeile:not(:has(.knopf)) + .seitenkopf {
    padding-top: 0;
}

.ueberzeile:not(:has(.knopf)):has(+ .seitenkopf:not(.seitenkopf--einstellungen)) {
    padding-inline-start: var(--space-4);
}

@media (max-width: 479px) {
    .ueberzeile:not(:has(.knopf)):has(+ .seitenkopf:not(.seitenkopf--einstellungen)) {
        padding-inline-start: var(--space-3);
    }
}

/* User Menu */
.benutzermenue {
    position: relative;
    margin-top: auto;
    border-top: 1px solid var(--divider-color);
    padding-top: var(--space-3);
}

.benutzermenue__knopf {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--target-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--duration-control), background-color var(--duration-control);
}

.benutzermenue__knopf:hover {
    background: var(--bg-elevated);
}

.benutzermenue__knopf:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.benutzermenue__knopf::-webkit-details-marker {
    display: none;
}

.benutzermenue__initialen {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--accent-surface);
    color: var(--text-on-accent);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    flex: none;
}

.benutzermenue__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.benutzermenue__wert {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benutzermenue__untertitel {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benutzermenue__zeichen {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: none;
    color: var(--text-secondary);
    transition: transform var(--duration-control);
}

.benutzermenue[open] .benutzermenue__zeichen {
    transform: rotate(180deg);
}

/* Das Menü sitzt am unteren Rand der Leiste und öffnet deshalb nach oben. */
.benutzermenue__liste {
    position: absolute;
    bottom: 100%;
    left: var(--space-2);
    right: var(--space-2);
    z-index: 10;
    padding: var(--space-1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    margin-bottom: var(--space-2);
}

.benutzermenue__zeile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    text-align: left;
    transition: color var(--duration-control), background-color var(--duration-control);
}

.benutzermenue__zeile:hover,
.benutzermenue__zeile.zeige-hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.benutzermenue__zeile:focus-visible,
.benutzermenue__zeile.zeige-fokus {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.benutzermenue__zeile .symbol {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: none;
}

/* Menu Trigger (small screens) */
.menue-ausloeser {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--duration-control), background-color var(--duration-control);
}

.menue-ausloeser:hover {
    background: var(--bg-elevated);
}

.menue-ausloeser:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Menu Scrim/Curtain */
.menue-schleier {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-backdrop);
    z-index: 999;
}

/* Application Grid */
.anwendung {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100%;
}

.inhalt {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    background: var(--bg-primary);
    padding: var(--space-6);
    /* Versteckte Texte (absolut positioniert) bleiben so im scrollenden Inhalt, statt die ganze Seite zu verlängern. */
    position: relative;
}

.inhalt > * + .abschnittskopf {
    margin-top: var(--space-7);
}

/* Page Header */
.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.seitenkopf > div:first-child {
    flex: 1;
}

.seitenkopf h1 {
    margin-bottom: var(--space-1);
}

.seitenkopf p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.seitenkopf__aktion {
    flex: none;
}

/* Page Header with Title and Help */
.seitenkopf__titel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.seitenkopf__titel h1 {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.seitenkopf__titel + p {
    margin-top: var(--space-1);
}

/* Detail Header */
.seitenkopf--detail {
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
}

/* Section Header */
.abschnittskopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.abschnittskopf h2 {
    margin-bottom: var(--space-1);
}

.abschnittskopf h2::before {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background: var(--accent);
    margin-right: var(--space-2);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    position: relative;
    top: -0.05em;
}

.abschnittskopf__text {
    flex: 1;
}

.abschnittskopf__text p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.abschnittsaktion {
    flex: none;
}

/* Responsive adjustments */

/* Wahlzeilen: Radio und Checkbox */

.wahlzeile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--target-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--duration-control), background-color var(--duration-control);
}

.wahlzeile input[type="radio"],
.wahlzeile input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: calc((1lh - 1rem) / 2);
    accent-color: var(--accent-surface);
    cursor: pointer;
    flex-shrink: 0;
}

.wahlzeile input[type="radio"]:checked ~ .wahlzeile__label,
.wahlzeile input[type="checkbox"]:checked ~ .wahlzeile__label {
    color: var(--text-primary);
}

.wahlzeile input:checked {
    border-color: var(--input-border);
}

.wahlzeile:has(input:checked) {
    border-color: var(--input-border);
    background: var(--bg-elevated);
}

.wahlzeile:has(input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.wahlzeile + .wahlzeile {
    margin-top: var(--space-2);
}

/* Schalter und Schalterzeile */

.schalterzeile {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: flex-start;
}

.schalterzeile > div {
    flex: 1 1 18rem;
}

.schalterzeile__name {
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.schalter {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--space-3);
    height: var(--target-min);
    padding: 0 var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--duration-control), background-color var(--duration-control);
}

.schalter:has(input:checked) {
    border-color: var(--glass-border-strong);
    background: var(--glass-surface-soft);
}

.schalter input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    clip-path: inset(50%);
}

.schalter__bahn {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    background: var(--neutral-bg);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-full);
    transition: background-color var(--duration-control);
}

.schalter:has(input:checked) .schalter__bahn {
    background: var(--accent-surface);
    border-color: var(--accent-surface);
}

.schalter__knebel {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--text-secondary);
    border-radius: var(--radius-full);
    transition: left var(--duration-control), background-color var(--duration-control);
}

.schalter:has(input:checked) .schalter__knebel {
    left: 23px;
    background: var(--text-on-accent);
}

/* Beide Wörter liegen in derselben Zelle; das längere bestimmt die Breite, sichtbar ist nur das gültige. */
.schalter__wort {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.schalter__wort--an,
.schalter:has(input:checked) .schalter__wort--aus {
    visibility: hidden;
}

.schalter:has(input:checked) .schalter__wort--an {
    visibility: visible;
}

.schalter:has(input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Bestandsliste */

.zeilenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  overflow: hidden;
}

.zeilenliste > li + li {
  border-top: 1px solid var(--divider-color);
}

.zeile {
  display: grid;
  grid-template-columns: auto minmax(10rem, 2fr);
  grid-auto-columns: minmax(5rem, 1fr);
  grid-auto-flow: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--target-min);
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--duration-control);
}

.zeile:hover:not(:disabled),
.zeile.zeige-hover {
  background: var(--bg-elevated-hover);
}

.zeile:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.zeile__kuerzel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-muted);
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.zeile__kuerzel--gross {
  width: 3.25rem;
  height: 3.25rem;
}

.zeile__haupt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.zeile__name {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.zeile__unter {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.zeile__feld {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.zeile__feld--rechts {
  justify-content: flex-end;
}

.zeile--ohne-kuerzel {
  grid-template-columns: minmax(10rem, 2fr);
}

/* Suchzeile */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Ohne Suchfeld steht die Filterklappe dort, wo sie neben dem Suchfeld stünde: rechts. */
.filterleiste--ohne-suche {
  justify-content: flex-end;
}

.filterleiste__suche {
  flex: 1 1 20rem;
  position: relative;
  display: flex;
  align-items: center;
}

.filterleiste__suche .symbol {
  position: absolute;
  left: var(--space-4);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
  color: var(--text-secondary);
}

.filterleiste__suche input {
  width: 100%;
  height: var(--target-min);
  padding: 0 var(--space-4) 0 calc(var(--icon-size-sm) + var(--space-4) * 2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color var(--duration-control), background-color var(--duration-control);
}

.filterleiste__suche input:hover {
  border-color: var(--input-border-hover);
}

.filterleiste__suche input:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: transparent;
}

.filterleiste__suche input::placeholder {
  color: var(--text-muted);
}

/* Filterklappe */

.filterklappe {
  position: relative;
}

.filterklappe__knopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--duration-control), background-color var(--duration-control);
  list-style: none;
  user-select: none;
}

.filterklappe__knopf:hover {
  background: var(--bg-elevated-hover);
}

.filterklappe__knopf:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.filterklappe[open] > .filterklappe__knopf {
  border-color: var(--accent);
}

.filterklappe__knopf .symbol {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
}

.filterklappe__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 50%;
  background: var(--accent-muted);
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.filterklappe__tafel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  max-width: calc(100vw - 2 * var(--space-4));
  width: max(22rem, 100%);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass-fallback);
  box-shadow: var(--glass-shadow);
}

.filterklappe__fuss {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider-color);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.filterklappe__fuss a {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--font-size-base);
  transition: color var(--duration-control);
}

.filterklappe__fuss a:hover {
  color: var(--accent-hover);
}

/* Filtergruppe */

.filtergruppe {
  border: none;
  margin: 0;
  padding: 0;
  margin-bottom: var(--space-4);
}

.filtergruppe:last-of-type {
  margin-bottom: 0;
}

.filtergruppe legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* Die Schalter der Ansicht in der Filtertafel: zwei Spalten, der Name steht über seinem Schalter. */
.filtergruppe__schalter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}

.filtergruppe__schalter .schalterzeile {
  flex-direction: column;
  gap: var(--space-1);
}

.filtergruppe__schalter .schalterzeile > div {
  flex: none;
}

.filtergruppe__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Filterknopf */

.filterknopf {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filterknopf input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.filterknopf > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-family: inherit;
  white-space: nowrap;
  transition: border-color var(--duration-control), background-color var(--duration-control), color var(--duration-control);
}

.filterknopf input:checked + span {
  border-color: var(--accent);
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: var(--font-weight-medium);
}

.filterknopf input:focus-visible + span {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.filterknopf input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Trefferzahl */

.trefferzahl {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}

/* Blätterleiste */

.blaettern {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
}

.blaettern__stand {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* === KENNZAHLEN (aus STYLE-GUIDE-FLAECHEN.md) === */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.kennzahl {
  flex: 1 1 calc((100% - 4 * var(--space-4)) / 5);
  min-width: min(11.25rem, 100%);
  min-height: 3.9375rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--accent-muted);
  border-left: 3px solid var(--accent);
  border: 1px solid var(--accent-muted);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}

.kennzahl__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kennzahl__wert {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

a.kennzahl--verweis {
  text-decoration: none;
  transition: border-color var(--duration-control);
}

a.kennzahl--verweis:hover {
  border-color: var(--accent);
}

a.kennzahl--verweis:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Statistik-Kacheln: Rangliste mit eigenem Zeitraum */

.statistikkacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.vergleichswahl .filtergruppe {
  margin: 0;
  padding: 0;
  border: 0;
}

.statistikkachel__hinweis {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.statistikkacheln--summen {
  margin-bottom: var(--space-4);
}

.statistikkachel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.statistikkachel__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.statistikkachel__text {
  min-width: 0;
}

.statistikkachel__text h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
}

.statistikkachel__text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.zeitraumklappe {
  flex-shrink: 0;
}

.zeitraumklappe .filterklappe__knopf {
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.zeitraumklappe__tafel {
  width: 24rem;
  max-width: calc(100vw - 2 * var(--space-4));
}

.zeitraumwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.zeitraumwahl .filterknopf > span {
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
}

.zeitraumklappe__eigen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider-color);
}

.zeitraumklappe__eigen .feld {
  min-width: 0;
  margin: 0;
}

.zeitraumklappe__eigen input {
  width: 100%;
  min-width: 0;
}

.zeitraumklappe__eigen .knopf {
  grid-column: 1 / -1;
  width: 100%;
}

.zeitraumklappe__tafel:not(:has(input[value="eigen"]:checked)) .zeitraumklappe__eigen {
  display: none;
}

/* Rangliste: liegende Balken mit Namen links und Prozentachse unten; das teuerste Fahrzeug reicht bis 100 %.
   Die Zeilen teilen sich die Spalten der Liste, damit alle Balken denselben Maßstab haben. Die senkrechten Linien
   sind der Hintergrund jeder Bahn und laufen, weil die Zeilen lückenlos stehen, durch. */
.statistikkachel--breit {
  margin-bottom: var(--space-5);
}

/* Das Diagramm liegt schon auf der Fläche der Kachel. */
.statistikkachel .diagramm {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.rangliste {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.rangliste__zeilen {
  --rangliste-linie: var(--divider-color);
  display: grid;
  grid-template-columns: fit-content(10rem) minmax(4rem, 1fr);
  column-gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rangliste__zeile,
.rangliste__achse {
  display: contents;
}

.rangliste__name {
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.rangliste__bahn {
  display: flex;
  align-items: center;
  height: 2.25rem;
  border-right: 1px solid var(--rangliste-linie);
  background-image: linear-gradient(to right, var(--rangliste-linie) 1px, transparent 1px);
  background-size: 25% 100%;
}

.rangliste__balken {
  display: block;
  width: 100%;
  height: 1.375rem;
  overflow: visible;
}

.rangliste__balken rect {
  fill: var(--accent);
  transition: opacity var(--duration-control);
}

.rangliste__balken rect:hover {
  opacity: 0.8;
}

.rangliste__striche {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* „Als Tabelle zeigen“ steht immer unten links, gleich wie viele Fahrzeuge die Liste hat. */
.rangliste .diagramm__tabelle {
  margin-top: auto;
}

@media (max-width: 639px) {
  .rangliste__zeilen {
    grid-template-columns: fit-content(6rem) minmax(3rem, 1fr);
    column-gap: var(--space-2);
  }

  .rangliste__striche span:nth-child(even) {
    visibility: hidden;
  }

  .statistikkachel__kopf {
    flex-wrap: wrap;
  }

  .zeitraumklappe__tafel {
    right: auto;
    left: 0;
  }
}

/* Kalender (LISTEN 8) */

.kalender {
  margin-bottom: var(--space-5);
}

.kalender__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.kalender__mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.kalender__monat {
  margin: 0;
  text-align: center;
}

.kalender__blaettern {
  display: flex;
  min-width: var(--target-min);
}

.kalender__blaettern--vor {
  justify-content: flex-end;
}

/* Die Klappe am Monatsnamen erbt Schließen und Tafel von der Filterklappe; nur Knopf und Inhalt sind eigen. */

.monatswahl__knopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--duration-control);
}

.monatswahl__knopf::-webkit-details-marker {
  display: none;
}

.monatswahl__knopf:hover {
  background: var(--bg-elevated-hover);
}

.monatswahl__knopf:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.monatswahl__knopf .symbol {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform var(--duration-control);
}

.monatswahl[open] > .monatswahl__knopf .symbol {
  transform: rotate(180deg);
}

.monatswahl__tafel {
  left: 50%;
  right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 30rem;
  max-width: calc(100vw - 2 * var(--space-4));
  transform: translateX(-50%);
}

.monatswahl__fuss {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider-color);
}

.monatswahl__monate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rechts vom Strich rollen alle Jahre im selben Raster wie die Monate; sichtbar sind wie dort vier Reihen. */
.monatswahl__jahre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 2px;
  height: calc(4 * var(--target-min) + 6px);
  margin: 0;
  padding: 0 0 0 var(--space-3);
  border-left: 1px solid var(--divider-color);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.monatswahl__jahr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--space-1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--duration-control);
}

.monatswahl__jahr:hover {
  background: var(--bg-elevated-hover);
}

.monatswahl__jahr:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.monatswahl__jahr[aria-current] {
  background: var(--accent-muted);
  font-weight: var(--font-weight-bold);
}

.monatswahl__monat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--duration-control);
}

.monatswahl__monat:hover {
  background: var(--bg-elevated-hover);
}

.monatswahl__monat:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.monatswahl__monat[aria-current] {
  background: var(--accent-muted);
  font-weight: var(--font-weight-bold);
}

.kalender__raster {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  overflow: hidden;
}

.kalender__raster th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.kalender__raster thead th {
  border-bottom: 1px solid var(--divider-color);
}

.kalender__raster .kalender__woche {
  width: 3.25rem;
  padding-left: var(--space-2);
  padding-right: var(--space-1);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.kalender__raster tbody th {
  border-top: 1px solid var(--divider-color);
  vertical-align: top;
}

.kalender__tag {
  height: 7rem;
  padding: var(--space-1);
  vertical-align: top;
  border-top: 1px solid var(--divider-color);
  border-left: 1px solid var(--divider-color);
  overflow-wrap: break-word;
}

.kalender__tag--leer {
  background: var(--bg-secondary);
}

.kalender__tag--heute {
  background: var(--accent-muted);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.kalender__zahl {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.kalender__heute {
  margin-left: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kalender__termine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.kalender__termin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: background-color var(--duration-control);
}

.kalender__termin:hover {
  background: var(--bg-elevated-hover);
}

.kalender__termin:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.kalender__name {
  font-weight: var(--font-weight-medium);
}

.kalender__betrag {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.kalender__summe {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.kalender__liste {
  display: none;
}

.kalender__tagesblock + .kalender__tagesblock {
  margin-top: var(--space-4);
}

.kalender__tagkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
}

.kalender__tagsumme {
  margin-left: auto;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Detailfenster */

.dialogfenster {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100vw - 3rem));
    max-height: calc(100vh - 3rem);
    padding: 0;
    margin: 0;
    border: 1px solid var(--glass-border-strong);
    border-top-width: 3px;
    border-top-color: var(--accent);
    border-radius: var(--radius-lg);
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    background-color: var(--glass-fallback);
    box-shadow: var(--glass-shadow-strong), var(--glass-highlight);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    font-family: var(--font-sans);
}

.dialogfenster[open] {
    opacity: 1;
    animation: dialogfenster-einblenden var(--duration-fade) ease-out;
}

@media (prefers-reduced-motion: no-preference) {
    .dialogfenster {
        opacity: 0;
    }
}

@keyframes dialogfenster-einblenden {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialogfenster::backdrop {
    background: var(--bg-backdrop-strong);
    backdrop-filter: blur(3px);
}

/* Fensterkopf, Titel, Schliessen */

.dialogfenster__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--glass-divider);
}

.dialogfenster__titel {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin: 0;
}

.dialogfenster__schliessen {
    flex-shrink: 0;
    width: var(--target-min);
    height: var(--target-min);
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-control), color var(--duration-control);
}

.dialogfenster__schliessen:hover:not(:disabled),
.dialogfenster__schliessen.zeige-hover {
    background-color: var(--glass-surface-hover);
}

.dialogfenster__schliessen:active:not(:disabled),
.dialogfenster__schliessen.zeige-aktiv {
    background-color: var(--glass-surface-strong);
}

.dialogfenster__schliessen:focus-visible,
.dialogfenster__schliessen.zeige-fokus {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.dialogfenster__schliessen:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Fensterinhalt */

.dialogfenster__inhalt {
    overflow-y: auto;
    padding: var(--space-5);
    color: var(--text-primary);
}

.dialogfenster__inhalt h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.dialogfenster__inhalt h2::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent);
    margin-right: var(--space-3);
    vertical-align: 0.15em;
}

/* Reiterband und Reiter */

.reiterband {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--divider-color);
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.reiterband::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, var(--bg-elevated));
    pointer-events: none;
}

.dialogfenster .reiterband {
    position: sticky;
    top: 0;
    background: var(--glass-surface);
    z-index: 1;
}

.reiterband__reiter {
    display: inline-flex;
    align-items: center;
    height: var(--target-min);
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    border-bottom: 2px solid transparent;
    margin: 0 var(--space-1);
    transition: color var(--duration-control), border-color var(--duration-control);
}

.reiterband__reiter:hover:not([aria-current="page"]),
.reiterband__reiter.zeige-hover:not([aria-current="page"]) {
    color: var(--text-primary);
}

.reiterband__reiter[aria-current="page"],
.reiterband__reiter.zeige-aktuell {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    border-bottom-color: var(--accent);
}

.reiterband__reiter:focus-visible,
.reiterband__reiter.zeige-fokus {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* Aktionsleiste */

.dialogfenster__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--glass-divider);
}

.dialogfenster__aktionen-links {
    margin-right: auto;
}

.dialogfenster__stand {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
    display: flex;
    align-items: center;
}

.dialogfenster__stand:not([hidden]) {
    display: flex;
}

.dialogfenster__stand[hidden] {
    display: none;
}

/* Gefahrbereich */

.gefahrbereiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

.gefahrbereich {
    padding: var(--space-5);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
}

.gefahrbereich h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--danger-text);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.gefahrbereich h3::before {
    content: none !important;
}

.gefahrbereich p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.gefahrbereich .knopf {
    margin-top: var(--space-3);
}

/* Responsive */

/* Anmeldeseite: Anmelden, Einladung einlösen und Kennwort vergessen in einer Karte. zugang.js setzt data-zugang, das Blatt
   fährt dann einmal quer darüber; mitten im Weg deckt es die ganze Karte ab, genau dann tauschen die Seiten. Maße in cqw sind
   Anteile der Kartenbreite. Breit liegt das Blatt in Ruhe auf der freien Hälfte, schmal wartet es neben der Karte.
   „Kennwort vergessen“ ist die gespiegelte Einladung: Das Blatt geht rechts hinaus und wischt von links herein (.vonlinks),
   zurück dieselbe Bewegung rückwärts (.nachlinks). Das geht nicht mit einem Übergang, darum Keyframes. */
.anmeldung {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 72rem;
    min-height: 85dvh;
    margin-inline: auto;
    padding: var(--space-8) var(--space-4);
}

.anmeldung:focus {
    outline: none;
}

.zugang {
    --dauer: 700ms;
    --schraege: 9cqw;
    --rechts-ruht: 50cqw;
    --links-ruht: calc(-50cqw - 2 * var(--schraege));
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 42rem;
    overflow: hidden;
    container-type: inline-size;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.zugang__seite {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
}

.zugang__seite[data-seite="einladung"] {
    grid-column: 2;
}

.zugang:not([data-zugang="anmelden"]) [data-seite="anmelden"],
.zugang:not([data-zugang="einladung"]) [data-seite="einladung"],
.zugang:not([data-zugang="kennwort"]) [data-seite="kennwort"] {
    visibility: hidden;
}

.zugang__kopf {
    display: none;
    padding: var(--space-5) var(--space-5) var(--space-7);
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-5)), 0 100%);
}

.zugang__kopf .logo {
    --logo-groesse: 1.75rem;
    margin-bottom: var(--space-3);
}

.zugang__kopftitel {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.zugang__kopftext {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-on-accent-secondary);
}

.zugang__kopftext a {
    font-weight: var(--font-weight-semibold);
    color: var(--text-on-accent);
    text-underline-offset: 4px;
}

.zugang__inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8);
}

/* Felder nicht über die ganze Spalte, sonst werden sie zu breit. */
.zugang__inhalt > * {
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
}

.zugang h1 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    outline: none;
}

.zugang__titelzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.zugang__titelzeile h1 {
    margin-bottom: 0;
}

.zugang__schritt {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.zugang__absatz {
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.zugang__fehler {
    margin-bottom: var(--space-4);
}

.zugang__bleiben {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--target-small);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.zugang__bleiben input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent-surface);
    cursor: pointer;
}

.zugang__knopf {
    width: 100%;
}

.zugang__verweis {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
}

.zugang__verweis a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-underline-offset: 4px;
}

.zugang__verweis a:hover {
    text-decoration: underline;
}

.zugang__konto {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.zugang__konto strong {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.zugang__bestaetigt {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.zugang__codeok {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: var(--accent-gradient);
    color: var(--text-on-accent);
}

.zugang__codeok .symbol {
    width: 0.75rem;
    height: 0.75rem;
}

/* Das Blatt reicht über die Karte hinaus; sichtbar ist nur sein Teil mit der Schräge. */
.zugang__blatt {
    position: absolute;
    inset-block: 0;
    left: 0;
    z-index: 1;
    width: calc(100cqw + 2 * var(--schraege));
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    clip-path: polygon(0 0, calc(100% - var(--schraege)) 0, 100% 100%, var(--schraege) 100%);
    transform: translateX(var(--rechts-ruht));
}

.zugang[data-zugang="einladung"] .zugang__blatt {
    transform: translateX(var(--links-ruht));
}

.zugang__text {
    position: absolute;
    inset-block: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    width: calc(50cqw - var(--schraege));
    padding-inline: var(--space-9);
    font-size: var(--font-size-sm);
    color: var(--text-on-accent-secondary);
}

.zugang__text:is([data-text="anmelden"], [data-text="kennwort"]) {
    left: var(--schraege);
}

.zugang__text[data-text="einladung"] {
    left: calc(50cqw + 2 * var(--schraege));
}

.zugang:not([data-zugang="anmelden"]) [data-text="anmelden"],
.zugang:not([data-zugang="einladung"]) [data-text="einladung"],
.zugang:not([data-zugang="kennwort"]) [data-text="kennwort"] {
    opacity: 0;
    visibility: hidden;
}

.zugang__text .logo {
    --logo-groesse: 2.25rem;
    margin-bottom: var(--space-2);
}

.zugang__leitsatz {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-on-accent);
}

.zugang__frage {
    margin-top: var(--space-4);
}

.zugang__wechsel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--on-accent-border);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-on-accent);
    text-decoration: none;
    transition: background-color var(--duration-control);
}

.zugang__wechsel:hover {
    background: var(--on-accent-hover);
}

.zugang__wechsel:focus-visible {
    outline-color: var(--text-on-accent);
}

.zugang__wechsel .symbol {
    width: 1rem;
    height: 1rem;
}

.zugang.bewegt .zugang__seite {
    transition: visibility 0s linear calc(var(--dauer) / 2);
}

.zugang.bewegt .zugang__blatt {
    transition: transform var(--dauer) cubic-bezier(0.65, 0, 0.35, 1);
}

.zugang.bewegt .zugang__text {
    transition: opacity 250ms ease calc(var(--dauer) * 0.55), visibility 0s;
}

.zugang.bewegt:not([data-zugang="anmelden"]) [data-text="anmelden"],
.zugang.bewegt:not([data-zugang="einladung"]) [data-text="einladung"],
.zugang.bewegt:not([data-zugang="kennwort"]) [data-text="kennwort"] {
    transition: opacity 200ms ease, visibility 0s linear var(--dauer);
}

.zugang:is(.vonlinks, .nachlinks) {
    --dauer: 1000ms;
}

.zugang.bewegt:is(.vonlinks, .nachlinks) .zugang__blatt {
    transition: none;
    animation: zugang-vonlinks var(--dauer) both;
}

.zugang.bewegt.nachlinks .zugang__blatt {
    animation-direction: reverse;
}

/* Auf halber Zeit deckt das Blatt die ganze Karte ab. */
@keyframes zugang-vonlinks {
    0% {
        transform: translateX(var(--rechts-ruht));
        animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    }
    25% {
        transform: translateX(100cqw);
    }
    25.01% {
        transform: translateX(calc(-100cqw - 2 * var(--schraege)));
        animation-timing-function: linear;
    }
    50% {
        transform: translateX(calc(-1 * var(--schraege)));
        animation-timing-function: cubic-bezier(0, 0, 0.35, 1);
    }
    100% {
        transform: translateX(var(--rechts-ruht));
    }
}

/* Code aus der Mail: Mit .bereit (zugang.js) liegt das echte Feld unsichtbar über sechs Kästchen. Jede Ziffer springt in ihr
   Kästchen, das nächste leuchtet mit Schreibmarke. Beim Prüfen läuft eine Welle durch, danach werden die Kästchen nacheinander
   grün (.richtig) oder schütteln sich rot (.falsch); .fehler hält das Rot nach dem Austausch ohne Bewegung. */
.codefeld {
    position: relative;
}

.codefeld__kaesten {
    display: none;
}

.codefeld.bereit .codefeld__kaesten {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2);
}

.codefeld.bereit .codefeld__eingabe {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    opacity: 0;
    font-size: 16px;
    caret-color: transparent;
    cursor: text;
}

.codefeld__kasten {
    display: grid;
    place-items: center;
    height: 3.25rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    transition: border-color 150ms ease, box-shadow 200ms ease, background-color 250ms ease, color 250ms ease;
}

.codefeld__kasten.aktiv {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring), 0 0 16px var(--accent-glow);
    animation: codefeld-glut 1.6s ease-in-out infinite;
}

.codefeld__kasten.aktiv:empty::after {
    content: "";
    width: 2px;
    height: 1.5rem;
    border-radius: 1px;
    background: var(--accent);
    animation: codefeld-marke 1s steps(1) infinite;
}

.codefeld__ziffer {
    display: inline-block;
    animation: codefeld-ziffer 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.codefeld.pruefen .codefeld__kasten {
    border-color: var(--accent);
    animation: codefeld-welle 900ms ease-in-out infinite;
}

.codefeld.richtig .codefeld__kasten {
    border-color: var(--accent-surface);
    background-color: var(--accent-surface);
    color: var(--text-on-accent);
    box-shadow: 0 10px 24px -10px var(--accent-shadow);
    animation: codefeld-richtig 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.codefeld:is(.pruefen, .richtig) .codefeld__kasten:nth-child(2) {
    animation-delay: 80ms;
    transition-delay: 80ms;
}

.codefeld:is(.pruefen, .richtig) .codefeld__kasten:nth-child(3) {
    animation-delay: 160ms;
    transition-delay: 160ms;
}

.codefeld:is(.pruefen, .richtig) .codefeld__kasten:nth-child(4) {
    animation-delay: 240ms;
    transition-delay: 240ms;
}

.codefeld:is(.pruefen, .richtig) .codefeld__kasten:nth-child(5) {
    animation-delay: 320ms;
    transition-delay: 320ms;
}

.codefeld:is(.pruefen, .richtig) .codefeld__kasten:nth-child(6) {
    animation-delay: 400ms;
    transition-delay: 400ms;
}

.codefeld:is(.falsch, .fehler) .codefeld__kasten {
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-ring);
}

.codefeld:is(.falsch, .fehler) .codefeld__kasten.aktiv:empty::after {
    background: var(--danger);
}

.codefeld.falsch .codefeld__kaesten {
    animation: codefeld-schuetteln 420ms ease;
}

@keyframes codefeld-ziffer {
    from {
        opacity: 0;
        transform: translateY(0.6rem) scale(0.4);
        filter: blur(4px);
    }
}

@keyframes codefeld-glut {
    50% {
        box-shadow: 0 0 0 4px var(--accent-ring-strong), 0 0 26px var(--accent-glow-strong);
    }
}

@keyframes codefeld-marke {
    50% {
        opacity: 0;
    }
}

@keyframes codefeld-welle {
    0%, 60%, 100% {
        transform: none;
    }
    30% {
        transform: translateY(-0.35rem);
    }
}

@keyframes codefeld-richtig {
    40% {
        transform: translateY(-0.4rem) scale(1.08);
    }
}

@keyframes codefeld-schuetteln {
    20% {
        transform: translateX(-0.5rem);
    }
    40% {
        transform: translateX(0.4rem);
    }
    60% {
        transform: translateX(-0.25rem);
    }
    80% {
        transform: translateX(0.15rem);
    }
}

/* Knopf unter dem Codefeld: Passt der Code, weicht die Schrift und ein Haken zeichnet sich. */
.codeknopf {
    position: relative;
}

.codeknopf__text {
    transition: opacity 150ms ease, transform 150ms ease;
}

.codeknopf[aria-busy="true"] .codeknopf__text {
    opacity: 0.7;
}

.codeknopf__haken {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    translate: -50% -50%;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

.codeknopf.erfolg .codeknopf__text {
    opacity: 0;
    transform: translateY(-0.5rem);
}

.codeknopf.erfolg .codeknopf__haken {
    opacity: 1;
    animation: codeknopf-haken 420ms ease-out 180ms forwards;
}

@keyframes codeknopf-haken {
    to {
        stroke-dashoffset: 0;
    }
}

/* Schritte: Der alte gleitet hinaus, der neue herein, der Haken neben „Code bestätigt“ springt auf. */
.schritt-weg {
    animation: schritt-weg 220ms ease-in forwards;
}

.schritt-neu {
    animation: schritt-neu 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.schritt-neu .zugang__codeok {
    animation: codeok 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}

.schritt-da .zugang__codeok {
    animation: codeok 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes schritt-weg {
    to {
        opacity: 0;
        transform: translateX(-1.5rem);
    }
}

@keyframes schritt-neu {
    from {
        opacity: 0;
        transform: translateX(1.5rem);
    }
}

@keyframes codeok {
    from {
        transform: scale(0);
    }
}

/* Kennwort vergessen: Beim Wechsel stehen alter und neuer Schritt auf einem Band nebeneinander (zugang.js bewegt es). */
.schritt-band {
    display: flex;
    flex: 1 1 auto;
    contain: inline-size;
}

.schritt-band > * {
    flex: 0 0 100%;
    min-width: 0;
}

/* Ohne Bewegung stünde der Haken sonst nie gezeichnet da. */
@media (prefers-reduced-motion: reduce) {
    .codeknopf.erfolg .codeknopf__haken {
        stroke-dashoffset: 0;
    }
}

/* Kennwortregeln: zugang.js hakt sie beim Tippen ab; die letzte prüft erst der Server. */
.kennwortregeln {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.kennwortregeln li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--duration-fade);
}

.kennwortregeln li.erfuellt {
    color: var(--accent);
}

.kennwortregeln__zeichen {
    display: grid;
    flex: none;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-full);
    color: transparent;
    transition: background-color var(--duration-fade), border-color var(--duration-fade), color var(--duration-fade);
}

.kennwortregeln__zeichen .symbol {
    width: 0.625rem;
    height: 0.625rem;
}

.kennwortregeln__zeichen--offen {
    border-style: dashed;
}

.erfuellt .kennwortregeln__zeichen {
    border-color: transparent;
    background: var(--accent-gradient);
    color: var(--text-on-accent);
}

/* Rechtewahl: je Modul eine Feldgruppe, nebeneinander, solange Platz ist */
.rechtewahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-4);
}

.rechtewahl__gruppe + .rechtewahl__gruppe {
    margin-top: 0;
}

.formular {
    max-width: 44rem;
}

/* Im Detailfenster nutzt das Formular die volle Breite des Fensters. */
.dialogfenster .formular {
    max-width: none;
}

.formular > .aktionsgruppe {
    margin-top: var(--space-6);
}

.rechtewahl__gruppe legend {
    border-bottom: none;
    margin-bottom: var(--space-2);
    padding-bottom: 0;
}

/* Einstellungen der Plattform: fester Punkt über dem Benutzermenü, scrollt nicht mit der Navigationsliste */
.seitenleiste__einstellungen {
    flex: none;
    padding: var(--space-2);
    border-top: 1px solid var(--divider-color);
}

.seitenleiste__einstellungen ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.seitenleiste__einstellungen + .benutzermenue {
    margin-top: 0;
}

.seitenkopf--einstellungen h1 {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.einstellungen__karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

.einstellungen__karten > .aktionsgruppe,
.einstellungskarte--breit {
    grid-column: 1 / -1;
}

/* Einstellungskarte */
.einstellungskarte {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.einstellungskarte__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3) var(--space-4);
}

.einstellungskarte__kopf:not(:last-child) {
    margin-bottom: var(--space-5);
}

.einstellungskarte__symbol {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-bg);
    color: var(--text-secondary);
}

.einstellungskarte__text {
    flex: 1 1 14rem;
}

.einstellungskarte__titel {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.einstellungskarte__text p {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.einstellungskarte__aktion {
    flex: none;
}

/* Die Karte trägt den Titel schon; die Legende der Feldgruppe darin bleibt nur für Vorlesegeräte. */
.einstellungskarte__inhalt > fieldset > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.einstellungskarte__inhalt > .feld:last-child {
    margin-bottom: 0;
}

/* Titel bündig mit Reitern und Karten, wie die Karten ohne eigenen Einzug */
.seitenkopf--einstellungen {
    padding-inline: 0;
}

/* Detailfenster: Was die Seite ohne Skript zum Weitergehen braucht, übernehmen im Fenster Titel, X und Aktionsleiste. */
.dialogfenster:not([open]) {
    display: none;
}

.dialogfenster__inhalt .seitenkopf,
.dialogfenster__inhalt .ueberzeile,
.dialogfenster__inhalt .aktionsgruppe,
.dialogfenster__inhalt [data-dialogsenden],
.dialogfenster__inhalt [data-dialogabbrechen] {
    display: none;
}

.dialogfenster__inhalt .einstellungskarte__titel {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

.dialogfenster__inhalt .einstellungskarte__titel::before {
    content: none;
}

/* Eine Spalte aus mehreren Karten untereinander, damit rechts nichts in die nächste Rasterzeile rutscht */
.einstellungen__spalte {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Die gestapelten Karten teilen sich die Höhe der Nachbarkarte, damit beide Spalten unten bündig enden. */
.einstellungen__spalte > .einstellungskarte {
    flex: 1 1 0;
}

/* Formularraster: mehrere Felder nebeneinander, auf schmalen Bildschirmen untereinander */
.formularraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0 var(--space-4);
}

.formularraster--server {
    grid-template-columns: minmax(min(100%, 16rem), 3fr) minmax(7rem, 1fr) minmax(min(100%, 12rem), 1.5fr);
}

.formularraster--drei {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Mailbereich: ein Absender oder ein Empfängerbereich innerhalb einer Einstellungskarte */
.mailbereich + .mailbereich {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--divider-color);
}

.mailbereich__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.mailbereich__kopf h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mailbereich__test {
    margin-left: auto;
}

.mailbereich .feldhinweis {
    margin-bottom: var(--space-4);
}

.mailbereich ul {
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.mailbereich--empfaenger {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-3) var(--space-5);
}

.mailbereich--empfaenger .mailbereich__kopf {
    margin-bottom: var(--space-2);
}

.mailbereich__eingabe {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.mailbereich__eingabe .feld {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Der Knopf steht auf Höhe des Eingabefelds, nicht auf Höhe der Beschriftung. */
.mailbereich__eingabe .knopf {
    margin-top: calc(var(--font-size-sm) * var(--line-height-base) + var(--space-1));
}

/* CMS: Kacheln der Übersicht. Maße, Schrift und Symbolstrich sind 1:1 aus dem CMS des SH-Halbleitershops übernommen,
   die Farben aus den Tokens, damit beide Schemata stimmen. */
.cms-uebersicht {
    container-type: inline-size;
}

.cms-kacheln {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

a.cms-kachel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-control), background-color var(--duration-control);
}

a.cms-kachel:hover {
    border-color: var(--accent);
}

a.cms-kachel:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.cms-kachel__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cms-kachel__symbol {
    flex: none;
    width: 2rem;
    height: 2rem;
    color: var(--accent);
    stroke-width: 1.75;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.cms-kachel__stand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--text-muted);
}

.cms-kachel__punkt {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--border-color);
}

.cms-kachel__punkt--an {
    background: var(--success);
}

.cms-kachel__titel {
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
}

.cms-kachel__fuss {
    margin-top: auto;
    font-size: 12px;
    color: var(--text-muted);
}

a.cms-kachel--akzent {
    border-color: var(--accent-surface);
    background: var(--accent-surface);
    color: var(--text-on-accent);
}

a.cms-kachel--akzent:hover {
    border-color: var(--accent-surface-hover);
    background: var(--accent-surface-hover);
}

.cms-kachel--akzent .cms-kachel__symbol {
    color: inherit;
}

.cms-kachel--akzent .cms-kachel__titel {
    font-weight: 800;
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

.cms-kachel--akzent .cms-kachel__fuss {
    color: var(--text-on-accent-secondary);
}

/* CMS-Seiten: Karten, Knöpfe, Felder und Menü 1:1 wie im CMS des SH-Halbleitershops, Farben aus den Tokens.
   Die Breiten richten sich wie dort nach der Seite selbst (Container), nicht nach dem Fenster. */
.cms {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cms-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.cms-titel h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.cms-titel__zusatz {
    font-size: 12.5px;
    color: var(--text-muted);
}

.cms-titel__zusatz a {
    color: var(--accent);
    text-decoration: none;
}

.cms-titel__zusatz a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.cms-karte {
    position: relative;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-elevated);
}

.cms-karte--geaendert {
    border-color: var(--warning);
    box-shadow: 0 0 0 1px var(--warning);
}

.cms-karte__ungespeichert {
    position: absolute;
    top: -0.75rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: var(--radius-full);
    background: var(--warning);
    color: var(--bg-elevated);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cms-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cms-kopf__symbol {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-muted);
    color: var(--accent);
}

.cms-kopf__symbol svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.cms-kopf__text {
    flex: 1 1 0;
    min-width: 0;
}

.cms-kopf h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.cms-kopf h2::before {
    content: none;
}

.cms-kopf p {
    margin: 0.125rem 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.cms-label,
.cms-unter {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cms-felder {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cms-eingabe {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color var(--duration-control), box-shadow var(--duration-control);
}

textarea.cms-eingabe {
    height: auto;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    line-height: 1.625;
    resize: vertical;
}

.cms-eingabe:hover {
    border-color: var(--text-muted);
}

.cms-eingabe:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.cms-feld--fehler .cms-eingabe {
    border-color: var(--danger);
}

.cms-fehler {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--danger);
}

.cms-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 11px 13px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-primary);
    font-size: 0.75rem;
    line-height: 1.625;
    color: var(--text-muted);
}

.cms-hinweis svg {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 1px;
}

.cms-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 11px 1rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-control), border-color var(--duration-control), color var(--duration-control);
}

.cms-knopf:hover {
    text-decoration: none;
}

.cms-knopf:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.cms-knopf:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cms-knopf--primaer {
    border-color: var(--accent-surface);
    background: var(--accent-surface);
    color: var(--text-on-accent);
}

.cms-knopf--primaer:hover:not(:disabled) {
    border-color: var(--accent-surface-hover);
    background: var(--accent-surface-hover);
    color: var(--text-on-accent);
}

.cms-knopf--sekundaer,
.cms-knopf--grau {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.cms-knopf--sekundaer:hover:not(:disabled),
.cms-knopf--grau:hover:not(:disabled) {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.cms-knopf--klein {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}

.cms-knopf--klein:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.cms-knopf--klein,
.cms-knopf--grau {
    padding: 0.5rem 1rem;
    font-size: 12.5px;
}

.cms-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.625rem;
    padding-top: 0.25rem;
}

.cms-gespeichert {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.5rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
}

.cms-gespeichert svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.4;
}

.cms-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.cms-status::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--danger);
}

.cms-status--ok {
    color: var(--success);
}

.cms-status--ok::before {
    background: var(--success);
}

.cms-status--vorgemerkt {
    color: var(--text-primary);
}

.cms-status--vorgemerkt::before {
    background: var(--warning);
}

.cms-ergebnis {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--success);
}

.cms-ergebnis--fehler {
    color: var(--danger);
}

.cms-datei {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.cms-datei::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.cms-datei:hover::file-selector-button {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* Import & Export in den Einstellungen: je Modul eine Karte im Stil des CMS. Der Hinweis rückt nach unten, damit Karten
   einer Rasterzeile trotz verschieden langer Inhalte gleich enden. */
.austausch-karte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.austausch-karte .cms-kopf {
    margin-bottom: 0;
}

.austausch-karte .cms-hinweis {
    margin-top: auto;
}

.austausch__wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.austausch__wahl .cms-datei {
    flex: 1;
    min-width: 12rem;
}

.austausch-vorschau .cms-aktionen {
    margin-top: 1.25rem;
}

/* Menü der Mails */
.cms-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-elevated);
}

.cms-nav__gruppe {
    display: block;
    padding: 14px 12px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cms-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.375;
    color: var(--text-primary);
    text-decoration: none;
}

.cms-nav a:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.cms-nav a[aria-current="page"] {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.cms-nav a svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.cms-nav__name {
    flex: 1;
    min-width: 0;
}

.cms-nav__punkt {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--warning);
}

.cms-nav__legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.5rem;
    padding: 0.75rem 0.75rem 0.125rem;
    border-top: 1px solid var(--divider-color);
    font-size: 11.5px;
    color: var(--text-muted);
}

.cms-nav__legende span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* E-Mail-Texte */
.cms-mail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.cms-mail__formular {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.cms-mail__karte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cms-mail__karte .cms-kopf {
    margin-bottom: 0;
}

.cms-platzhalter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cms-platzhalter > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12px;
    color: var(--text-muted);
}

.cms-platzhalter .cms-unter {
    margin: 0 0.25rem 0 0;
}

.cms code.cms-code {
    padding: 0.125rem 0.5rem;
    border-radius: 6px;
    background: var(--neutral-bg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}

.cms-mail__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--divider-color);
}

.cms-mail__test {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.cms-mail__test > div:empty {
    display: none;
}

.cms-mail__bausteine {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
}

.cms-mail__notiz {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.cms-vorschau {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.cms-vorschau .cms-kopf {
    margin-bottom: 0;
}

.cms-mailkopf {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.25rem 0.625rem;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
}

.cms-mailkopf dt {
    padding-top: 0.125rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cms-mailkopf dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.cms-mailkopf__von {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.cms-mailkopf__betreff {
    font-weight: 600;
}

.cms-mailkopf--zeile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cms-mailkopf--zeile .cms-unter {
    margin: 0;
}

/* Feste Starthöhe, bis cms.js die Höhe der Mail kennt */
.mailvorschau {
    display: block;
    width: 100%;
    height: 56rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #eef0f4;
}

.mailvorschau--klein {
    height: 300px;
}

/* Bearbeitungs-Info */
.cms-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.cms-info__text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 14px;
}

.cms-info__abschnitt {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cms-info h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.cms-info h3.cms-info__akzent {
    color: var(--accent);
}

.cms-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.625;
    color: var(--text-muted);
}

.cms-info ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-info li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cms-info li > span:last-child {
    padding-top: 0.125rem;
}

.cms-info__zusatz {
    color: var(--text-muted);
}

.cms-marke {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
}

.cms-marke--cms {
    background: var(--accent-surface);
    color: var(--text-on-accent);
}

.cms-faelle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.cms-faelle > div {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cms-fall h4 {
    margin: 0 0 0.375rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.cms-fall p {
    margin: 0;
    font-size: 13px;
    line-height: 1.625;
    color: var(--text-muted);
}

.cms-textfassung {
    max-height: 460px;
    margin: 0;
    overflow: auto;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.625;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Markdown-Hilfe und das Ergebnis von Markdown außerhalb einer Mail */
.cms-markdown {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cms-markdown__absatz {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.cms-markdown__absatz code {
    font-family: var(--font-mono);
}

.cms-markdown__zeilen {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.cms-markdown__kopf {
    display: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cms-markdown__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.cms-markdown__name {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 600;
}

.cms-markdown__name span {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.cms-markdown__eingabe {
    margin: 0;
    padding: 0.625rem;
    border-radius: 8px;
    background: var(--bg-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.markdown > :first-child {
    margin-top: 0;
}

.markdown > :last-child {
    margin-bottom: 0;
}

.markdown p,
.markdown ul,
.markdown ol {
    margin: 0.5rem 0;
}

.markdown ul,
.markdown ol {
    padding-left: 1.5rem;
}

.markdown ul {
    list-style: disc;
}

.markdown ol {
    list-style: decimal;
}

.markdown h2 {
    margin: 1rem 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.markdown h2::before {
    content: none;
}

.markdown h3 {
    margin: 0.75rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.markdown strong {
    font-weight: 600;
}

.markdown em {
    font-style: italic;
}

.markdown code {
    font-family: var(--font-mono);
    font-size: 13px;
}

.markdown hr {
    margin: 0.75rem 0;
    border: 0;
    border-top: 1px solid var(--text-muted);
}

/* Logo & Icon */
.marke {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.marke__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding-bottom: 1.5rem;
}

.marke__laden {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.marke__info--icon {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--divider-color);
}

.marke__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.marke__titel {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.marke__datei,
.marke__original {
    font-size: 12px;
    color: var(--text-muted);
}

.marke__original {
    flex-basis: 100%;
}

.marke__vorschau {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.marke figure {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.marke figcaption,
.marke__bildunterschrift {
    font-size: 11px;
    color: var(--text-muted);
}

.marke__flaeche {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
    padding: 1rem;
    border-radius: 10px;
}

.marke__flaeche--hell {
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: #14181f;
}

.marke__flaeche--dunkel {
    background: #101012;
    color: #f4f3ef;
}

.marke__flaeche img,
.marke__flaeche .logo--bild {
    max-width: 100%;
    max-height: 3.5rem;
    width: auto;
    height: auto;
}

.marke__flaeche .logo {
    --logo-groesse: 2.25rem;
    color: inherit;
}

.marke__mail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
    color: var(--text-muted);
}

.marke__mailflaeche img.marke__farbig {
    border-radius: 6px;
}

.marke__mailflaeche {
    display: inline-flex;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #009966, #006045);
}

.marke__liste {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
    font-size: 13px;
    color: var(--text-primary);
}

.marke__liste li::marker {
    color: var(--text-muted);
}

.marke__verwendung {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.marke__verwendung .cms-unter {
    margin: 0;
}

.marke__icons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
}

.marke__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.marke__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem 0 0.625rem;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: var(--bg-primary);
    font-size: 12px;
    color: var(--text-primary);
}

.marke__app {
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.marke__app--rund {
    border-radius: var(--radius-full);
}

.marke__wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.marke__wahl .cms-datei {
    flex: 1;
    min-width: 220px;
}

.marke__meldung {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danger);
}

.marke__meldung--ok {
    color: var(--text-muted);
}

.marke__hinweis {
    margin: 0;
    font-size: 12px;
    line-height: 1.625;
    color: var(--text-muted);
}

.marke__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* Ein hochgeladenes Logo ist ein Bild; auf Akzentflächen wird es wie das eigene Logo weiß */
.logo--bild {
    display: block;
    align-self: flex-start;
    width: auto;
    height: var(--logo-groesse);
    max-width: 100%;
    object-fit: contain;
}

.logo--bild.logo--weiss {
    filter: brightness(0) invert(1);
}

/* Ein Logo ohne durchsichtigen Hintergrund bliebe weiß nur ein Rechteck; auf Akzentflächen steht es deshalb farbig. */
.logo--bild.logo--farbig {
    border-radius: var(--radius-sm);
}