/* Copyright (c) 2026 by spl · software programming laue */
/* Schriften (Vorschau 141/142, Vorbild Seite Projekte): genau vier Konstanten, auf die jede CSS-Datei verweist.
   Titel = Seitentitel · Überschrift = Abschnitte, Karten, Dialoge · Beschriftung = Großbuchstaben-Zeilen, Kreise, Logo · Text = Fließtext, Menü, Knöpfe. */
:root{--lb-font-title:'DM Sans',Arial,sans-serif;--lb-font-heading:'Barlow Condensed','Arial Narrow',sans-serif;--lb-font-label:Manrope,'DM Sans',sans-serif;--lb-font-text:'DM Sans',Arial,sans-serif}
/* Schalter für Farbschema und Textgröße (theme.js). Nur Tokens aus tokens.css; die Maße der Schalter bleiben bei jeder Textgröße gleich. */
.lb-view { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; }
.lb-view-panel { display: inline-flex; align-items: center; gap: 10px; }
.lb-view-set { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--lb-view-line); border-radius: 999px; }
.lb-view-btn {
  min-width: 30px; min-height: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--lb-view-text); cursor: pointer;
  font: 700 12px/1 var(--lb-font-text);
}
.lb-view-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-view-btn:hover { color: var(--lb-view-accent); }
.lb-view-btn[aria-pressed="true"] { border-color: var(--lb-view-accent); color: var(--lb-view-accent); background: rgb(var(--lb-view-accent-rgb) / .12); }
.lb-view-btn:focus-visible { outline: 2px solid var(--lb-view-accent); outline-offset: 2px; }
.lb-view .lb-view-trigger { display: none; border-color: var(--lb-view-line); }
.lb-view-size-small { font-size: 11px; }
.lb-view-size-normal { font-size: 14px; }
.lb-view-size-large { font-size: 18px; }
/* im Anmeldedialog: mittig unter der Sprachwahl */
.lb-login-body .lb-view { display: flex; justify-content: center; margin: .75rem 0 0; }
.lb-nav .lb-view { display: none; }
/* Filme: die eingebauten Bedienelemente des Browsers bleiben hell auf dunklem Bild, auch im hellen Farbschema */
video { color-scheme: dark; }
/* Kopfzeile 901–1100 px: nur "Aa", die Schalter klappen darunter auf */
@media (min-width: 901px) and (max-width: 1100px) {
  .lb-header-end > .lb-view { margin-left: 4px; }
  .lb-header-end > .lb-view .lb-view-trigger { display: inline-flex; }
  .lb-header-end > .lb-view .lb-view-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; padding: 10px; border: 1px solid var(--lb-view-line);
    border-radius: 10px; background: var(--lb-view-panel); box-shadow: 0 14px 34px rgb(var(--lb-black-rgb) / .35);
  }
  .lb-header-end > .lb-view.open .lb-view-panel { display: inline-flex; }
}
/* Menüform der Kopfzeile (bis 900 px, mit großer Schrift bis 1040 px, siehe shell.css): die Schalter stehen im aufgeklappten Menü */
@media (max-width: 900px) {
  .lb-header-end > .lb-view { display: none; }
  .lb-nav .lb-view { display: flex; justify-content: center; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--lb-view-line); }
}
@media (min-width: 901px) and (max-width: 1040px) {
  html[data-size="large"] .lb-header-end > .lb-view { display: none; }
  html[data-size="large"] .lb-nav .lb-view { display: flex; justify-content: center; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--lb-view-line); }
}
/* Bei großer Schrift darf kein langes Wort die Seite breiter machen als das Fenster (nur dort, damit Normal und Klein unverändert bleiben) */
html[data-size="large"] body { overflow-wrap: anywhere; }