/* =====================================================================
   SplitFlow — Darstellung "Neu" (Fassung 0.1.27)
   Überlagert bulma.min.css und app.css. Wird nur geladen, wenn in den
   Einstellungen die Darstellung "neu" gewählt ist. Die Darstellung
   "klassisch" bleibt unverändert (dann wird diese Datei nicht geladen).
   Stilableitung: cremefarbener Grund, helle Karten, dunkles Bordeaux,
   kleine gesperrte Großbuchstaben, abgerundete Formularelemente.
   ===================================================================== */

:root {
  --bg: #f7f2ed;
  --bg-soft: #fbf8f4;
  --card: #fffdfa;
  --band: #f4eae0;
  --line: #e8dcd0;
  --line-soft: #f1e8de;

  --ink: #2b2320;
  --ink-soft: #6f645c;
  --ink-mute: #9a8e86;

  --brand: #6b1f3a;
  --brand-dark: #53152c;
  --brand-soft: #8e3055;
  --brand-tint: #f6e9ee;

  --gold: #b8862a;
  --gold-soft: #e2b863;
  --green: #2f7d5b;
  --green-tint: #e4f1ea;
  --yellow: #a8791a;
  --yellow-tint: #fbefd4;
  --grey-tint: #efe8e1;
  --danger: #9b2b2b;
  --danger-tint: #fbe9e9;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(59, 42, 35, .04), 0 18px 34px -26px rgba(59, 42, 35, .38);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* ------------------------------------------------------------------ */
/* Grundfläche und Schrift                                             */
/* ------------------------------------------------------------------ */

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.title { color: var(--ink); }

h1.title {
  font-family: var(--serif);
  color: var(--brand);
  letter-spacing: -.01em;
}

.subtitle { color: var(--ink-soft); font-size: .95rem; font-weight: 400; }

.heading {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-mute);
}

.content { color: var(--ink); }
.content h1, .content h2, .content h3 { color: var(--brand); }
.has-text-grey { color: var(--ink-mute) !important; }
.has-text-danger { color: var(--danger) !important; }
.has-text-warning { color: var(--yellow) !important; }
.has-text-success { color: var(--green) !important; }
code { background: var(--grey-tint); color: var(--brand); border-radius: 6px; }

/* ------------------------------------------------------------------ */
/* Kopfleiste                                                          */
/* ------------------------------------------------------------------ */

.navbar.is-dark {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  min-height: 3.75rem;
}

.navbar.is-dark .navbar-item,
.navbar.is-dark .navbar-link {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .93rem;
}

.navbar.is-dark .navbar-item:hover,
.navbar.is-dark .navbar-link:hover,
.navbar.is-dark .navbar-item:focus,
.navbar.is-dark .navbar-link:focus {
  background: var(--grey-tint) !important;
  color: var(--ink) !important;
}

/* Programmname als Markenzeichen */
.navbar-brand .navbar-item.has-text-weight-bold {
  align-self: center;
  margin: .55rem .4rem .55rem 0;
  padding: .5rem .85rem;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--brand-soft), var(--brand-dark));
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}

.navbar-brand .navbar-item.has-text-weight-bold:hover {
  background: linear-gradient(160deg, var(--brand-soft), var(--brand-dark)) !important;
  color: #fff !important;
  filter: brightness(1.08);
}

/* Aktueller Menüpunkt: Unterstrich im Mockup-Stil */
.navbar-item.is-current > .navbar-link,
.navbar-item.is-current > .navbar-item {
  color: var(--brand) !important;
  box-shadow: inset 0 -2px 0 var(--brand);
}

.navbar.is-dark .navbar-dropdown {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .35rem;
  top: 3.5rem;
}

.navbar.is-dark .navbar-dropdown .navbar-item {
  border-radius: 8px;
  color: var(--ink-soft);
  font-weight: 500;
}

.navbar.is-dark .navbar-dropdown .navbar-item:hover {
  background: var(--grey-tint) !important;
  color: var(--ink) !important;
}

.navbar-dropdown .navbar-item.is-current {
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
  font-weight: 650;
}

.navbar-divider { background: var(--line); }

.navbar-end .navbar-item.is-current > .navbar-link { box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Kopfleiste der neuen Optik: Marke, Arbeitsbereich, Menü, Konto      */
/* (Aufbau und Maße wie im Entwurf docs/mockup-ui)                     */
/* ------------------------------------------------------------------ */

.navbar.is-dark.sf-kopf {
  align-items: center;
  min-height: 0;
  padding: .625rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.navbar.is-dark.sf-kopf .navbar-brand {
  align-items: center;
  gap: 18px;
  min-height: 0;
}

/* Markenzeichen: Kürzel des Programmnamens */
.navbar.is-dark.sf-kopf .sf-marke {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--brand-soft), var(--brand-dark));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  display: grid;
  place-items: center;
}

.navbar.is-dark.sf-kopf .sf-marke:hover,
.navbar.is-dark.sf-kopf .sf-marke:focus {
  background: linear-gradient(160deg, var(--brand-soft), var(--brand-dark)) !important;
  color: #fff !important;
  filter: brightness(1.08);
}

/* Arbeitsbereich: Firmenname aus den Einstellungen */
.navbar.is-dark.sf-kopf .sf-bereich {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 20px;
}

.navbar.is-dark.sf-kopf .sf-bereich strong { color: var(--ink); font-weight: 600; }
.navbar.is-dark.sf-kopf .sf-bereich svg { width: 15px; height: 15px; opacity: .7; }
.navbar.is-dark.sf-kopf .sf-bereich .sf-pfeil { width: 13px; height: 13px; margin-left: -1px; }

.navbar.is-dark.sf-kopf .sf-bereich:hover,
.navbar.is-dark.sf-kopf .sf-bereich:focus {
  background: var(--card) !important;
  color: var(--ink-soft) !important;
  border-color: var(--brand-soft);
}

/* Menü: rechts ausgerichtet, Einträge als abgerundete Flächen */
.navbar.is-dark.sf-kopf .navbar-start {
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.navbar.is-dark.sf-kopf .navbar-start > .navbar-item:not(.has-dropdown),
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-link {
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 21px;
  color: var(--ink-soft);
  position: relative;
}

/* Pfeil am Menueeintrag: eigener Platz rechts. Bulma zeichnet den Pfeil als
   ::after 1.125em vor dem rechten Rand; mit nur .75rem Innenabstand liegt er
   auf dem letzten Buchstaben des Textes. */
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-link {
  padding-right: 2.1rem;
}

.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown:hover,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown:focus,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown:focus-within {
  padding: 0;
  background: transparent !important;
  border-radius: 8px;
}

.navbar.is-dark.sf-kopf .navbar-start > .navbar-item:not(.has-dropdown):hover,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item:not(.has-dropdown):focus,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-link:hover,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-link:focus {
  background: var(--grey-tint) !important;
  color: var(--ink) !important;
}

.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.is-current,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.is-current > .navbar-link {
  color: var(--ink) !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* Unterstrich des aktuellen Menüpunkts, auf der Abschlusslinie der Leiste */
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.is-current::before,
.navbar.is-dark.sf-kopf .navbar-start > .navbar-item.is-current > .navbar-link::before {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: -11px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* Menuelisten der Kopfleiste mit der Maus: Der Kasten liegt immer im Baum
   (unsichtbar, ohne Mauszeiger) und wird beim Ueberfahren des Eintrags
   sichtbar. Ueber dem Kasten sitzt ein unsichtbarer Streifen in Breite der
   Liste, der die rund 19 px Luecke zwischen Eintrag und Liste ueberbrueckt -
   sonst faellt die Liste zu, bevor der Zeiger sie erreicht. Gilt nur fuer
   Maeuse und breite Fenster; im schmalen Fenster liegen die Listen im Fluss
   (siehe Abschnitt "Kleine Bildschirme"). */
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .navbar.is-dark.sf-kopf .navbar-item.has-dropdown > .navbar-dropdown {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .navbar.is-dark.sf-kopf .navbar-item.has-dropdown:hover > .navbar-dropdown,
  .navbar.is-dark.sf-kopf .navbar-item.has-dropdown:focus-within > .navbar-dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .navbar.is-dark.sf-kopf .navbar-item.has-dropdown > .navbar-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.35rem;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Rechte Seite: Glocke, Hilfe, Konto */
.navbar.is-dark.sf-kopf .sf-aktionen {
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.navbar.is-dark.sf-kopf .sf-knopf {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
}

.navbar.is-dark.sf-kopf .sf-knopf:hover,
.navbar.is-dark.sf-kopf .sf-knopf:focus {
  background: var(--card) !important;
  border-color: var(--brand-soft);
  color: var(--brand);
}

.navbar.is-dark.sf-kopf .sf-knopf svg { width: 17px; height: 17px; }

.navbar.is-dark.sf-kopf .sf-punkt {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}

.navbar.is-dark.sf-kopf .sf-konto { align-items: center; padding: 0; }

.navbar.is-dark.sf-kopf .sf-avatar {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  display: grid;
  place-items: center;
}

.navbar.is-dark.sf-kopf .sf-avatar:hover,
.navbar.is-dark.sf-kopf .sf-avatar:focus {
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
  border-color: var(--brand-soft);
}

.navbar.is-dark.sf-kopf .sf-konto .navbar-dropdown { top: 3.4rem; }

/* Arbeitsbereich-Pille: umschließt Haus-Symbol, Namen und Pfeil */
.navbar.is-dark.sf-kopf .sf-bereich-block,
.navbar.is-dark.sf-kopf .sf-bereich-block:hover,
.navbar.is-dark.sf-kopf .sf-bereich-block:focus,
.navbar.is-dark.sf-kopf .sf-bereich-block:focus-within {
  padding: 0;
  background: transparent !important;
}

.navbar.is-dark.sf-kopf .sf-bereich-block .navbar-dropdown { top: calc(100% + 1.25rem); }

.navbar.is-dark.sf-kopf .sf-hinweis {
  color: var(--ink-mute);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* Karten (box) und Kennzahlen                                         */
/* ------------------------------------------------------------------ */

.box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
}

.columns.is-vcentered > .column > .box,
.columns.is-multiline > .column > .box { height: 100%; }

.box .title { font-family: var(--sans); font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.box .heading { margin-bottom: .1rem; }
.box .heading + .title { margin-bottom: .15rem; }
.box .title.is-5 { font-size: 1.6rem; }
.box .subtitle.is-6 { color: var(--ink-mute); font-size: .85rem; margin-top: .1rem; }
.box .button.is-small { margin-top: .1rem; }

/* ------------------------------------------------------------------ */
/* Schaltflächen                                                       */
/* ------------------------------------------------------------------ */

.button {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
}

.button:hover { border-color: var(--brand-soft); color: var(--brand); }

.button.is-link,
.button.is-primary {
  background: linear-gradient(170deg, var(--brand-soft), var(--brand-dark));
  border-color: var(--brand-dark);
  color: #fff;
}

.button.is-link:hover,
.button.is-primary:hover { filter: brightness(1.07); color: #fff; border-color: var(--brand-dark); }

.button.is-light { background: var(--card); border-color: var(--line); color: var(--ink); }
.button.is-light:hover { background: var(--bg-soft); border-color: var(--brand-soft); color: var(--brand); }

.button.is-danger.is-light { background: #fdf5f5; border-color: #e6cfcf; color: var(--danger); }
.button.is-danger.is-light:hover { background: #fbe9e9; color: var(--danger); border-color: #dbb9b9; }
.button.is-danger:not(.is-light) { background: var(--danger); border-color: var(--danger); color: #fff; }

.button.is-white { background: var(--card); color: var(--ink); }
.button.is-small { border-radius: 9px; }
.button.is-fullwidth { justify-content: center; }

/* ------------------------------------------------------------------ */
/* Etiketten                                                           */
/* ------------------------------------------------------------------ */

.tag {
  border-radius: 999px;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .02em;
  height: 1.7em;
  padding: 0 .7em;
}

.tag.is-light { background: var(--grey-tint); color: var(--ink-soft); }
.tag.is-success { background: var(--green-tint); color: var(--green); }
.tag.is-warning { background: var(--yellow-tint); color: var(--yellow); }
.tag.is-info { background: var(--brand-tint); color: var(--brand); }
.tag.is-danger { background: var(--danger-tint); color: var(--danger); }
.tag.is-link { background: var(--brand-tint); color: var(--brand); }

/* ------------------------------------------------------------------ */
/* Tabellen                                                            */
/* ------------------------------------------------------------------ */

.table-container {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .5rem .9rem .3rem;
}

.table { background: transparent; }

.table th {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
  padding: .6rem .55rem;
}

.table td {
  border-bottom: 1px solid var(--line-soft);
  padding: .75rem .55rem;
  color: var(--ink);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table.is-hoverable tbody tr:hover { background: var(--bg-soft); }
.table a { color: var(--brand); }
.table a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Formulare                                                           */
/* ------------------------------------------------------------------ */

.label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-mute);
}

/* Aktionsknopf neben beschrifteten Feldern (Berichte, Berechnungen):
   Die Zeile ist mit is-vcentered mittig ausgerichtet; dadurch schrumpft die
   Knopfspalte auf die Knopfhoehe und der Knopf sitzt rund 11 px zu hoch
   gegenueber den Feldern (Etikett + Feld). Die Knopfspalte wird deshalb auf
   die volle Zeilenhoehe gestreckt und der Knopf darin unten gehalten - damit
   deckt er sich genau mit den Eingabefeldern. */
.columns.is-vcentered > .column.is-align-items-flex-end { align-self: stretch; }

/* Filterzeile, deren letzte Spalte nur einen Aktionsknopf ohne Etikett enthaelt
   (Seite Vertriebsdaten, Knopf "Filtern"): Diese Spalte ist rund 24 px
   niedriger als die Feldspalten (dort steht ein Etikett ueber dem Feld) und
   wird von der mittigen Ausrichtung der Zeile nach oben gezogen - der Knopf
   sitzt dadurch rund 11 px zu hoch. Die Spalte wird gestreckt und der Knopf
   darin unten gehalten, sodass Ober- und Unterkante mit den Feldern
   abschliessen.
   Die Regel greift nur in Zeilen, die ueberhaupt ein Eingabefeld enthalten:
   ohne Feld gibt es nichts auszurichten, und der Knopf soll dort nicht
   wandern (Seite Hilfe, Knopf "Zur Uebersicht"). Spalten mit Etikett
   (Kindzeilen der Song- und Partner-Karte) bleiben unberuehrt, weil dort kein
   Knopf direkt in der Spalte liegt. */
.columns.is-vcentered:has(> .column :is(select, input.input)) > .column:has(> .button:only-child) {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.input, .textarea, .select select {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

.input:focus, .textarea:focus, .select select:focus,
.input:focus-within, .select select:focus-within {
  border-color: var(--brand-soft);
  box-shadow: 0 0 0 3px rgba(107, 31, 58, .08);
}

.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--ink-mute); }
.help { color: var(--ink-mute); font-size: .8rem; }
.checkbox:hover { color: var(--brand); }
.field.has-addons .control .button { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.field.has-addons .control:first-child .input,
.field.has-addons .control:first-child .button { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

.file-cta, .file-name { border-color: var(--line); border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ */
/* Hinweise                                                            */
/* ------------------------------------------------------------------ */

.notification {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-soft);
  padding: 1rem 1.15rem;
}

.notification.is-success, .notification.is-success.is-light {
  background: var(--green-tint); border-color: #cfe4d8; color: var(--green);
}

.notification.is-warning, .notification.is-warning.is-light {
  background: var(--yellow-tint); border-color: #eeddb2; color: var(--yellow);
}

.notification.is-danger, .notification.is-danger.is-light {
  background: var(--danger-tint); border-color: #eccfcf; color: var(--danger);
}

.notification.is-info, .notification.is-info.is-light {
  background: var(--brand-tint); border-color: #edd8e1; color: #6d3a4f;
}

.notification .delete { background: rgba(43, 35, 32, .18); }

/* ------------------------------------------------------------------ */
/* Blätterleiste, Ebenen, Fußzeile                                     */
/* ------------------------------------------------------------------ */

.pagination-link, .pagination-next, .pagination-previous {
  border-color: var(--line);
  border-radius: 9px;
  color: var(--ink-soft);
  background: var(--card);
}

.pagination-link:hover, .pagination-next:hover, .pagination-previous:hover {
  border-color: var(--brand-soft);
  color: var(--brand);
}

.pagination-link.is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.level-item .tag.is-light { background: var(--grey-tint); }

footer.footer {
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------ */
/* Rohvorschau, Fortschritt und Sonderflächen                          */
/* ------------------------------------------------------------------ */

.vorschau-rahmen { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.vorschau thead th { background: var(--bg-soft); box-shadow: inset 0 -1px 0 var(--line); }

progress.progress, .progress {
  appearance: none;
  border: 0;
  background: var(--grey-tint);
  border-radius: 999px;
  height: 9px;
}

progress.progress::-webkit-progress-value { background: linear-gradient(90deg, var(--brand-dark), var(--brand-soft)); border-radius: 999px; }
progress.progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

.menu { background: transparent; }
.menu-list a { color: var(--ink-soft); border-radius: 9px; font-weight: 500; }
.menu-list a:hover { background: var(--grey-tint); color: var(--brand); }
.menu-list a.is-active { background: var(--brand); color: #fff; }
.menu-label { text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; color: var(--ink-mute); }

/* Anmeldeseite: Felder in einer Karte */
.anmelde-karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem 1.3rem;
  margin-top: 3rem;
}

/* ------------------------------------------------------------------ */
/* Kleine Bildschirme                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
  .navbar.is-dark .navbar-brand .navbar-item.has-text-weight-bold { margin-left: .5rem; }
  /* Neue Kopfleiste im schmalen Fenster: Marke in einer Zeile, Menü darunter */
  .navbar.is-dark.sf-kopf { padding: .5rem .75rem; }
  .navbar.is-dark.sf-kopf .navbar-start { margin-left: 0; padding: .35rem 0; gap: 2px; }
  .navbar.is-dark.sf-kopf .sf-aktionen {
    margin-left: 0;
    padding: .35rem 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item:not(.has-dropdown),
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-link {
    border-radius: 8px;
  }
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.is-current::before,
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.is-current > .navbar-link::before { display: none; }
  /* Menuegruppen und Arbeitsbereich klappen im schmalen Fenster erst auf Antippen auf,
     sonst waere die Leiste mehrere Bildschirmhoehen lang. */
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-dropdown,
  .navbar.is-dark.sf-kopf .sf-bereich-block .navbar-dropdown { display: none; }
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown:hover > .navbar-dropdown,
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown.is-active > .navbar-dropdown,
  .navbar.is-dark.sf-kopf .sf-bereich-block.is-active .navbar-dropdown,
  .navbar.is-dark.sf-kopf .sf-konto.is-active .navbar-dropdown { display: block; }
  .navbar.is-dark.sf-kopf .navbar-start > .navbar-item.has-dropdown > .navbar-dropdown,
  .navbar.is-dark.sf-kopf .sf-bereich-block .navbar-dropdown {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding-left: .75rem;
    background: transparent;
    max-width: 100%;
  }
  /* Kein waagerechter Ueberlauf im schmalen Fenster (Menues liegen hier im Fluss). */
  .navbar.is-dark.sf-kopf { overflow-x: clip; }
  h1.title { font-size: 1.5rem; }
  .box { padding: 1rem; }
  .table-container { padding: .35rem .5rem .2rem; }
  /* Breite Tabellen rollen im schmalen Fenster seitlich, statt die Seite zu spreizen. */
  .container > table.table, .table-container { display: block; max-width: 100%; overflow-x: auto; }
}