/* ==========================================================================
   Landwirte-Portal — Design „Feldfrisch"
   Projekt: MR-Intern Portal V9
   Konzept: docs/impl/CLAUDE_CODE_PROMPT_LWPortal_Login_Schlagbearbeitung.md §4 D.3

   Grundsatz: SÄMTLICHE Farben stehen als CSS-Custom-Properties in diesem
   Block. In den Views steht NIE ein Hex-Wert — dort wird ausschließlich
   var(--lw-*) verwendet. Ein Theme ist damit ein alternativer Variablensatz
   über den Selektor [data-lw-theme="..."] und braucht keine Änderung am Markup.

   Das Portal nutzt bewusst NICHT das SmartAdmin-Sidebar-Framework: es ist
   mobil-first für Landwirte am Feld gedacht, nicht für den Bürotag.
   Basis ist reines Bootstrap 5 plus die Bausteine dieser Datei.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Farbtoken — Standardtheme „feldfrisch"
   -------------------------------------------------------------------------- */
:root,
[data-lw-theme="feldfrisch"] {
    --lw-bg: #FAFAF7;
    --lw-surface: #FFFFFF;
    --lw-border: #E6E4DC;
    --lw-primary: #27500A;
    --lw-primary-deep: #173404;
    --lw-primary-mid: #3B6D11;
    --lw-accent-bg: #EAF3DE;
    --lw-muted: #888780;
    --lw-warn: #BA7517;
    --lw-warn-bg: #FBF1E0;
    --lw-danger: #9B2C1E;
    --lw-danger-bg: #F8E9E7;
    --lw-text: #1E1E1B;
    --lw-on-primary: #FFFFFF;

    /* Form und Abstand */
    --lw-radius: 13px;
    --lw-radius-sm: 8px;
    --lw-gap: 1rem;
    --lw-shadow-soft: 0 1px 2px rgba(23, 52, 4, .04);
    --lw-focus-ring: 0 0 0 3px rgba(59, 109, 17, .25);

    /* Höhe der Bottom-Navigation (mobil) — auch als Innenabstand des Inhalts */
    --lw-bottomnav-h: 4rem;

    /* Höhe der klebenden Topbar. Alles, was sich UNTER ihr verankert — das
       Betriebs-Panel ab lg und der klebende Tabellenkopf der Adaptivtabelle —
       rechnet mit diesem Wert. Deshalb steht er genau einmal hier. */
    --lw-topbar-h: 3.4rem;

    /* Maximale Breite des Inhaltsbereichs. EINE Quelle für den Inhalt und die
       Topbar-Zeile darüber — sonst fluchten die beiden bei der nächsten
       Änderung nicht mehr. Die Stufen stehen weiter unten. */
    --lw-container-max: 960px;
}

/* Ab Notebook-Breite darf das Portal mehr Fläche nutzen: die Verwaltung und
   die wenigen Tablet-Nutzer sitzen vor breiten Schirmen, am Handy ändert sich
   dadurch nichts. */
@media (min-width: 992px) {
    :root,
    [data-lw-theme="feldfrisch"] {
        --lw-container-max: 1140px;
    }
}

@media (min-width: 1400px) {
    :root,
    [data-lw-theme="feldfrisch"] {
        --lw-container-max: 1320px;
    }
}

/* --------------------------------------------------------------------------
   2. Grundgerüst
   -------------------------------------------------------------------------- */
body.lw-body {
    background-color: var(--lw-bg);
    color: var(--lw-text);
    font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-text-size-adjust: 100%;
    /* Fangnetz für Fremddaten: Feldstück-, Betriebs- und Sortennamen aus der
       Lieferung sind gelegentlich ein einziges überlanges Wort. „break-word"
       bricht es NUR, wenn es sonst über den Rand liefe — auf die Breitenberechnung
       wirkt es nicht, normaler Fließtext bleibt also unangetastet. */
    overflow-wrap: break-word;
}

.lw-shell {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Zentrierter Inhaltsbereich. Die Breite ist gestuft (--lw-container-max):
   Handy unverändert, ab lg 1140px, ab xxl 1320px. Lesbare Zeilenlängen sind
   damit nicht mehr Sache der SEITE, sondern jedes BAUSTEINS — Fließtext und
   Formulare bekommen bei Bedarf .lw-schmal, Tabellen und Kartenraster nutzen
   die volle Breite. */
.lw-container {
    width: 100%;
    max-width: var(--lw-container-max);
    margin-inline: auto;
    padding: 1.25rem 1rem calc(var(--lw-bottomnav-h) + 1.5rem);
}

@media (min-width: 992px) {
    .lw-container {
        padding-bottom: 2.5rem;
    }
}

/* Schlanker Baustein innerhalb des breiten Containers: für Fließtext, Formulare
   und Kennwertlisten, die auf 1320px sonst auseinanderfallen (Beschriftung ganz
   links, Wert ganz rechts). Bewusst linksbündig — zentriert stünde der Block
   quer zur Topbar und zum Seitentitel. Am Handy wirkungslos. */
.lw-schmal {
    max-width: 44rem;
}

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

.lw-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--lw-primary-deep);
    margin-bottom: .25rem;
    /* Der Titel ist oft ein Feldstückname aus der Lieferung — mitunter ein
       einziges langes Wort, das sonst über den Rand hinausläuft. */
    overflow-wrap: anywhere;
}

.lw-page-sub {
    color: var(--lw-muted);
    font-size: .95rem;
    margin-bottom: 1.25rem;
}

.lw-section-title {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lw-muted);
    margin: 1.75rem 0 .65rem;
}

/* --------------------------------------------------------------------------
   3. Topbar
   -------------------------------------------------------------------------- */
.lw-topbar {
    background-color: var(--lw-surface);
    border-bottom: 1px solid var(--lw-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.lw-topbar-inner {
    max-width: var(--lw-container-max);
    margin-inline: auto;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.lw-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--lw-primary-deep);
    text-decoration: none;
    white-space: nowrap;
}

.lw-brand:hover {
    color: var(--lw-primary);
}

.lw-brand i {
    color: var(--lw-primary-mid);
}

/* Waagrechte Navigation der Topbar — erst ab lg sichtbar (mobil: Bottom-Nav) */
.lw-topnav {
    display: none;
    margin-left: auto;
    gap: .25rem;
}

@media (min-width: 992px) {
    .lw-topnav {
        display: flex;
    }
}

.lw-topnav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: var(--lw-radius-sm);
    color: var(--lw-muted);
    text-decoration: none;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.lw-topnav-link:hover {
    background-color: var(--lw-accent-bg);
    color: var(--lw-primary);
}

.lw-topnav-link.is-active {
    background-color: var(--lw-accent-bg);
    color: var(--lw-primary-deep);
}

/* --------------------------------------------------------------------------
   4. Betriebs-Umschalter (mobil Bottom-Sheet, ab lg Dropdown-Panel)
   -------------------------------------------------------------------------- */
.lw-betrieb-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    padding: .35rem .6rem;
    background-color: var(--lw-accent-bg);
    border: 1px solid var(--lw-border);
    border-radius: 999px;
    color: var(--lw-primary-deep);
    font-weight: 600;
    font-size: .9rem;
    max-width: 60vw;
    cursor: pointer;
    transition: border-color .2s ease;
}

@media (min-width: 992px) {
    .lw-betrieb-btn {
        margin-left: .75rem;
        max-width: 22rem;
    }
}

.lw-betrieb-btn:hover {
    border-color: var(--lw-primary-mid);
}

.lw-betrieb-btn:focus-visible {
    outline: none;
    box-shadow: var(--lw-focus-ring);
}

.lw-betrieb-btn-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lw-avatar {
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background-color: var(--lw-primary);
    color: var(--lw-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.lw-avatar.is-wartend {
    background-color: var(--lw-muted);
}

/* Overlay hinter dem Bottom-Sheet */
.lw-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 52, 4, .35);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.lw-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lw-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background-color: var(--lw-surface);
    border-top-left-radius: var(--lw-radius);
    border-top-right-radius: var(--lw-radius);
    border-top: 1px solid var(--lw-border);
    padding: .5rem 0 max(1rem, env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .22s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.lw-sheet.is-open {
    transform: translateY(0);
}

/* Ab lg wird aus dem Sheet ein an der Topbar verankertes Panel. */
@media (min-width: 992px) {
    .lw-sheet {
        position: absolute;
        left: auto;
        right: 1rem;
        top: var(--lw-topbar-h);
        bottom: auto;
        width: 26rem;
        max-height: 70vh;
        border: 1px solid var(--lw-border);
        border-radius: var(--lw-radius);
        box-shadow: 0 12px 32px rgba(23, 52, 4, .12);
        transform: translateY(-.5rem);
        opacity: 0;
        pointer-events: none;
    }

    .lw-sheet.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .lw-sheet-backdrop {
        background: transparent;
    }
}

.lw-sheet-griff {
    width: 2.5rem;
    height: .25rem;
    border-radius: 999px;
    background-color: var(--lw-border);
    margin: .35rem auto .75rem;
}

@media (min-width: 992px) {
    .lw-sheet-griff {
        display: none;
    }
}

.lw-sheet-titel {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lw-muted);
    padding: 0 1rem .5rem;
}

.lw-betrieb-zeile {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid var(--lw-border);
    text-align: left;
    color: var(--lw-text);
    cursor: pointer;
    transition: background-color .15s ease;
}

.lw-betrieb-zeile:hover {
    background-color: var(--lw-accent-bg);
}

.lw-betrieb-zeile[disabled] {
    cursor: default;
    color: var(--lw-muted);
}

.lw-betrieb-zeile[disabled]:hover {
    background: none;
}

.lw-betrieb-zeile-text {
    min-width: 0;
    flex: 1 1 auto;
}

/* Name und Kennzahlen je eine Zeile — als Inline-Spans liefen sie bei kurzen
   Namen zusammen („Hofer MariaLFBIS …"). */
.lw-betrieb-zeile-name,
.lw-betrieb-zeile-meta {
    display: block;
}

.lw-betrieb-zeile-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lw-betrieb-zeile-meta {
    font-size: .82rem;
    color: var(--lw-muted);
}

/* --------------------------------------------------------------------------
   5. Bottom-Navigation (nur mobil)
   -------------------------------------------------------------------------- */
.lw-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    background-color: var(--lw-surface);
    border-top: 1px solid var(--lw-border);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 992px) {
    .lw-bottomnav {
        display: none;
    }
}

.lw-bottomnav-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: var(--lw-bottomnav-h);
    padding: .4rem .25rem;
    color: var(--lw-muted);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: color .2s ease;
}

.lw-bottomnav-link i {
    font-size: 1.15rem;
}

.lw-bottomnav-link.is-active {
    color: var(--lw-primary);
}

/* --------------------------------------------------------------------------
   6. Karten
   -------------------------------------------------------------------------- */
.lw-card {
    background-color: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius);
    box-shadow: var(--lw-shadow-soft);
    padding: 1.15rem;
    margin-bottom: var(--lw-gap);
}

.lw-card-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--lw-primary-deep);
    margin-bottom: .85rem;
}

.lw-card-kopf i {
    color: var(--lw-primary-mid);
}

/* Kartenkopf mit Schalter rechts. Auf schmalen Geräten rutscht der Schalter
   unter den Titel, statt ihn zusammenzuquetschen. */
.lw-card-kopf-aktion {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.lw-card-titel {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Anklickbare Karte (Schlagliste, Modul-Kacheln) */
.lw-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.lw-card-link:hover {
    border-color: var(--lw-primary-mid);
    box-shadow: 0 4px 14px rgba(23, 52, 4, .07);
    color: inherit;
}

.lw-card-link:focus-visible {
    outline: none;
    box-shadow: var(--lw-focus-ring);
}

/* Zweispaltiges Kartenraster ab lg (Schlagliste) */
.lw-grid {
    display: grid;
    gap: var(--lw-gap);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .lw-grid-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Rasterzellen dürfen schmaler werden als ihr Inhalt. Ohne das gilt für
   Rasterzellen min-width:auto — eine lange Zeile schiebt dann die GANZE Seite
   seitwärts, statt im Rahmen umzubrechen oder zu scrollen. Am Handy ist das
   der Unterschied zwischen „passt" und „abgeschnitten". */
.lw-grid > * {
    min-width: 0;
}

.lw-grid .lw-card {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Kennwerte, Badges, Hinweise
   -------------------------------------------------------------------------- */
.lw-kv {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--lw-border);
}

.lw-kv:last-child {
    border-bottom: none;
}

/* Beide Seiten dürfen umbrechen — auch mitten im Wort. Feldstücknamen und
   Bezeichnungen aus der Lieferung sind manchmal ein einziges langes Wort; ohne
   das schiebt so ein Name am Handy die Seite seitwärts. */
.lw-kv-label,
.lw-kv-wert {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lw-kv-label {
    color: var(--lw-muted);
    font-size: .9rem;
}

.lw-kv-wert {
    font-weight: 600;
    text-align: right;
}

/* Zwischenüberschrift innerhalb einer Kennwertliste. Bewusst ohne eigene
   Trennlinie: die Zeile darüber bringt ihre schon mit. */
.lw-kv-gruppe {
    margin-top: .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lw-muted);
}

.lw-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background-color: var(--lw-accent-bg);
    color: var(--lw-primary-deep);
    white-space: nowrap;
}

.lw-badge-warn {
    background-color: var(--lw-warn-bg);
    color: var(--lw-warn);
}

.lw-badge-neutral {
    background-color: var(--lw-bg);
    color: var(--lw-muted);
    border: 1px solid var(--lw-border);
}

/* Mausplan (Feldverladung): Statuspunkt in der Datenfarbe des Status (--c,
   aus dem Statuskatalog). „Wird …"-Status sind schraffiert wie auf der Karte. */
.lw-maus-punkt {
    display: inline-block;
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

.lw-maus-punkt.ist-muster {
    background: repeating-linear-gradient(135deg, var(--c) 0 3px, var(--lw-surface) 3px 5px);
}

.lw-badge-maus {
    background-color: var(--lw-surface);
    color: var(--lw-text);
    border: 1px solid var(--lw-border);
}

.lw-maus-wert {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.lw-badge-liste {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.lw-hinweis {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border-radius: var(--lw-radius-sm);
    background-color: var(--lw-accent-bg);
    color: var(--lw-primary-deep);
    border: 1px solid var(--lw-border);
    margin-bottom: var(--lw-gap);
}

.lw-hinweis i {
    margin-top: .15rem;
}

/* Ohne diese Zeile bliebe ein [hidden]-Hinweis sichtbar: die Klassenregel
   display:flex schlägt das display:none des Browser-Standardstylesheets. */
.lw-hinweis[hidden] {
    display: none;
}

.lw-hinweis-warn {
    background-color: var(--lw-warn-bg);
    color: var(--lw-warn);
}

.lw-hinweis-fehler {
    background-color: var(--lw-danger-bg);
    color: var(--lw-danger);
}

.lw-leer {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--lw-muted);
}

.lw-leer i {
    font-size: 2rem;
    display: block;
    margin-bottom: .6rem;
    opacity: .6;
}

/* Schlichte Datentabelle (Lieferungen am Schlag). Bewusst ohne Bootstrap:
   das Landwirte-Portal führt seine eigene, ruhigere Bildsprache. Auf schmalen
   Geräten scrollt die Tabelle waagrecht IN ihrem Rahmen — die Seite selbst
   darf nie seitwärts wandern.

   Diese Regeln gelten ZUSÄTZLICH für .lw-adaptivtabelle — sie sind deren
   Rückfallebene ohne Container-Queries. Der Abschnitt „Adaptive Tabelle" weiter
   unten schaltet sie in modernen Browsern wieder ab. Bewusst in dieser
   Richtung: so steht der Verlaufsstapel genau einmal in dieser Datei. */
.lw-tabelle-wrap,
.lw-adaptivtabelle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Schattenkante rechts/links, solange in diese Richtung noch etwas zu holen
       ist. Am Handy blendet das System die Bildlaufleiste aus — ohne diesen
       Hinweis sieht die Tabelle schlicht abgeschnitten aus. Die beiden „local"-
       Verläufe wandern mit dem Inhalt und decken den Schatten am Ende zu. */
    background:
        linear-gradient(to right, var(--lw-surface) 40%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--lw-surface) 40%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(23, 52, 4, .16), rgba(23, 52, 4, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(23, 52, 4, .16), rgba(23, 52, 4, 0)) right center;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, .7rem 100%, .7rem 100%;
    background-attachment: local, local, scroll, scroll;
}

.lw-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.lw-tabelle th,
.lw-tabelle td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--lw-border);
    white-space: nowrap;
    text-align: left;
}

.lw-tabelle thead th {
    color: var(--lw-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.lw-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.lw-tabelle tfoot td {
    border-top: 2px solid var(--lw-border);
    border-bottom: none;
    font-weight: 600;
    color: var(--lw-primary-deep);
}

.lw-tabelle-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   7a. Adaptive Tabelle — EIN Markup, zwei Darstellungen
   --------------------------------------------------------------------------

   Verwendung ausschließlich über das Partial _LwAuswertungTabelle (siehe
   docs/impl/ANALYSE.md, „LW-Portal adaptive Tabellen"). Von Hand geschriebenes
   Markup pflegt die data-label-Attribute zwangsläufig doppelt.

   Umgeschaltet wird nach der CONTAINERbreite, nicht nach der Bildschirmbreite:
   dieselbe Tabelle steht am Handy über die ganze Seite und am Notebook in einer
   halben Spalte des lw-split. Ein Media-Query träfe im zweiten Fall die falsche
   Entscheidung. Schwelle 34rem — darunter reicht der Platz für die sechs
   Zahlenspalten der Lieferungen nicht mehr, ohne dass Kopfzeilen umbrechen.

   ZUGÄNGLICHKEIT: Im Kartenmodus wird aus tr/td ein Block-Layout. Manche
   Screenreader verlieren damit die Tabellensemantik. Das ist hier gewollt: Auf
   dem Handy IST die Beschriftung-Wert-Lesart die richtige, und ein zusätzlich
   versteckter thead („nur für Screenreader") läse jede Spaltenüberschrift ein
   zweites Mal vor. Der Kopf verschwindet deshalb schlicht per display: none.
   -------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
    .lw-adaptivtabelle {
        container-type: inline-size;

        /* Die Rückfallebene oben abschalten: Ein waagrecht scrollender Rahmen
           wäre ein Scroll-Vorfahr und nähme dem Tabellenkopf das Kleben. */
        overflow-x: visible;
        background: none;
    }

    /* Tabellenmodus: Der Kopf klebt UNTER der Topbar, nicht am Bildschirmrand —
       sonst schöbe er sich beim Blättern hinter sie. Deckende Fläche ist
       Pflicht, sonst scrollen die Zeilen sichtbar durch die Überschrift. In der
       Rückfallebene bleibt der Kopf bewusst unbeweglich: dort ist der Rahmen
       ein Scroll-Vorfahr, an dem Kleben nichts bewirkt. */
    .lw-adaptivtabelle thead th {
        position: sticky;
        top: var(--lw-topbar-h);
        z-index: 1;
        background-color: var(--lw-surface);
    }
}

/* --- Kartenmodus (Container < 34rem) --- */
@container (max-width: 34rem) {
    .lw-adaptivtabelle thead {
        display: none;
    }

    .lw-adaptivtabelle table,
    .lw-adaptivtabelle tbody,
    .lw-adaptivtabelle tfoot,
    .lw-adaptivtabelle tr {
        display: block;
    }

    /* Eine Karte je Zeile */
    .lw-adaptivtabelle tbody tr {
        border: 1px solid var(--lw-border);
        border-radius: var(--lw-radius-sm);
        padding: .35rem .75rem;
        margin-bottom: .6rem;
    }

    .lw-adaptivtabelle tbody tr:last-child {
        margin-bottom: 0;
    }

    /* Beschriftung/Wert wie .lw-kv. „anywhere" ist hier kein Schönheitswunsch,
       sondern das Fangnetz für Fremddaten: Es geht in die Mindestbreite ein und
       lässt die Zelle schmaler werden als ein überlanges Wort.

       Der Trenner sitzt OBEN, nicht unten: Blendet die Regel weiter unten eine
       leere Schlusszelle aus, bliebe sonst eine Linie ohne Zeile darunter
       zurück. tbody/tfoot stehen einzeln im Selektor, damit die Basisregeln der
       .lw-tabelle (Schlusszeile ohne Linie, 2px-Strich über dem Fuß) hier
       sicher überschrieben werden. */
    .lw-adaptivtabelle tbody td,
    .lw-adaptivtabelle tfoot td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem 0;
        border: none;
        border-top: 1px solid var(--lw-border);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .lw-adaptivtabelle tr td:first-child {
        border-top: none;
    }

    .lw-adaptivtabelle td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--lw-muted);
        font-size: .9rem;
        font-weight: 400;
    }

    /* Zellen ohne Spaltentitel (z. B. der Vorspann der Summenkarte) */
    .lw-adaptivtabelle td[data-label=""]::before {
        content: none;
    }

    /* Leere Zellen tragen im Kartenmodus nichts bei — im Tabellenmodus halten
       sie dagegen die Spalte. Das betrifft den Vorspann-Platzhalter ebenso wie
       eine Summenspalte ohne sinnvolle Summe (z. B. „Proben"). */
    .lw-adaptivtabelle td:empty {
        display: none;
    }

    .lw-adaptivtabelle td.lw-tabelle-zahl {
        text-align: right;
    }

    /* Die Summenkarte hebt sich ab — im Tabellenmodus macht das die Trennlinie
       darüber, die es im Block-Layout nicht mehr gibt. */
    .lw-adaptivtabelle tfoot tr {
        margin-top: .6rem;
        padding: .35rem .75rem;
        border: 1px solid var(--lw-border);
        border-radius: var(--lw-radius-sm);
        background-color: var(--lw-accent-bg);
        color: var(--lw-primary-deep);
        font-weight: 600;
    }
}

/* --------------------------------------------------------------------------
   7b. Schlagliste — eine Zeile je Schlag (Konzept Desktop-Shell, Phase 7)
       Schmal: Karte (Name + Fläche, darunter die Badges).
       Ab 52rem Containerbreite: Tabelle mit Kopfzeile; die Badge-Gruppen
       werden per display: contents zu Zellen. Container-, nicht Media-Query:
       entscheidend ist der Platz der Liste, nicht der des Fensters.
   -------------------------------------------------------------------------- */
/* Container ist der Rahmen: eine Container-Query gestaltet nur Nachfahren,
   nie den Container selbst — die Liste braucht in der Tabelle aber Rahmen. */
.lw-schlagliste-rahmen {
    container: lwschlagliste / inline-size;
    min-width: 0;
}

.lw-schlagliste {
    display: grid;
    gap: .75rem;
}

.lw-sz-kopf {
    display: none;
}

.lw-sz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "name flaeche pfeil"
        "zellen zellen zellen";
    gap: .5rem .75rem;
    align-items: start;
    padding: 1rem 1.15rem;
    background-color: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius);
    box-shadow: var(--lw-shadow-soft);
    color: var(--lw-text);
    text-decoration: none;
}

.lw-sz:hover {
    border-color: var(--lw-primary-mid);
}

.lw-sz:focus-visible {
    outline: none;
    box-shadow: var(--lw-focus-ring);
}

.lw-sz-name {
    grid-area: name;
    display: grid;
    min-width: 0;
}

.lw-sz-titel {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.lw-sz-flaeche {
    grid-area: flaeche;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--lw-muted);
}

.lw-sz-pfeil {
    grid-area: pfeil;
    margin-top: .2rem;
}

.lw-sz-zellen {
    grid-area: zellen;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}

.lw-sz-zelle {
    display: contents;
}

/* Platzhalter „–" nur in der Tabelle (dort hält er die Spalte lesbar). */
.lw-sz-leer {
    display: none;
}

@container lwschlagliste (min-width: 52rem) {
    .lw-schlagliste {
        gap: 0;
        background-color: var(--lw-surface);
        border: 1px solid var(--lw-border);
        border-radius: var(--lw-radius);
        box-shadow: var(--lw-shadow-soft);
        /* kein overflow: hidden — der Tabellenkopf soll kleben */
    }

    .lw-sz-kopf,
    .lw-sz {
        grid-template-columns: minmax(0, 2.1fr) 5.5rem minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(0, 2.2fr) 1rem;
        grid-template-areas: none;
        column-gap: 1rem;
        padding: .6rem 1.15rem;
    }

    .lw-sz-kopf {
        display: grid;
        position: sticky;
        top: var(--lw-topbar-h);
        z-index: 2;
        background-color: var(--lw-bg);
        border-bottom: 1px solid var(--lw-border);
        border-radius: var(--lw-radius) var(--lw-radius) 0 0;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--lw-muted);
    }

    .lw-sz {
        align-items: center;
        border: 0;
        border-bottom: 1px solid var(--lw-border);
        border-radius: 0;
        box-shadow: none;
    }

    .lw-sz:last-child {
        border-bottom: 0;
        border-radius: 0 0 var(--lw-radius) var(--lw-radius);
    }

    .lw-sz:hover {
        background-color: var(--lw-accent-bg);
    }

    .lw-sz-name,
    .lw-sz-flaeche,
    .lw-sz-pfeil {
        grid-area: auto;
    }

    .lw-sz-flaeche,
    .lw-sz-rechts {
        text-align: right;
    }

    .lw-sz-flaeche {
        color: var(--lw-text);
    }

    .lw-sz-pfeil {
        margin-top: 0;
    }

    .lw-sz-zellen {
        display: contents;
    }

    .lw-sz-zelle {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        min-width: 0;
    }

    .lw-sz-leer {
        display: inline;
        color: var(--lw-muted);
    }
}

/* Listen aus Karten (Reklamationen, Kehraufträge): am PC mehrere Spalten. */
@media (min-width: 992px) {
    .lw-grid-liste {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    }
}

/* --------------------------------------------------------------------------
   8. Formulare und Schaltflächen
   -------------------------------------------------------------------------- */
.lw-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--lw-primary-deep);
    margin-bottom: .3rem;
    display: block;
}

.lw-hilfe {
    font-size: .82rem;
    color: var(--lw-muted);
    margin-top: .25rem;
}

.lw-input,
.lw-select,
.lw-textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm);
    background-color: var(--lw-surface);
    color: var(--lw-text);
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.lw-input:focus,
.lw-select:focus,
.lw-textarea:focus {
    outline: none;
    border-color: var(--lw-primary-mid);
    box-shadow: var(--lw-focus-ring);
}

.lw-input[readonly],
.lw-input:disabled,
.lw-select:disabled,
.lw-textarea[readonly],
.lw-textarea:disabled {
    background-color: var(--lw-bg);
    color: var(--lw-muted);
}

.lw-input.is-fehler,
.lw-select.is-fehler {
    border-color: var(--lw-danger);
}

.lw-feldfehler {
    display: block;
    font-size: .82rem;
    color: var(--lw-danger);
    margin-top: .25rem;
}

.lw-feld {
    margin-bottom: 1rem;
}

/* Umschalter (Toggle) für die Ja/Nein-Angaben */
.lw-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--lw-border);
}

.lw-toggle:last-of-type {
    border-bottom: none;
}

.lw-toggle-text {
    min-width: 0;
}

.lw-toggle-titel {
    font-weight: 600;
}

.lw-toggle-hilfe {
    font-size: .82rem;
    color: var(--lw-muted);
}

.lw-schalter {
    flex: 0 0 auto;
    position: relative;
    width: 3.1rem;
    height: 1.75rem;
}

.lw-schalter input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.lw-schalter-spur {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-color: var(--lw-border);
    transition: background-color .2s ease;
    pointer-events: none;
}

.lw-schalter-spur::after {
    content: "";
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background-color: var(--lw-surface);
    box-shadow: 0 1px 3px rgba(23, 52, 4, .25);
    transition: transform .2s ease;
}

.lw-schalter input:checked + .lw-schalter-spur {
    background-color: var(--lw-primary-mid);
}

.lw-schalter input:checked + .lw-schalter-spur::after {
    transform: translateX(1.35rem);
}

.lw-schalter input:focus-visible + .lw-schalter-spur {
    box-shadow: var(--lw-focus-ring);
}

/* Kleine Fassung für Anzeige-Schalter in Kartenköpfen (kein Datenfeld) */
.lw-schalter-klein {
    width: 2.3rem;
    height: 1.3rem;
}

.lw-schalter-klein .lw-schalter-spur::after {
    top: .15rem;
    left: .15rem;
    width: 1rem;
    height: 1rem;
}

.lw-schalter-klein input:checked + .lw-schalter-spur::after {
    transform: translateX(1rem);
}

.lw-kartenschalter {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 500;
    color: var(--lw-muted);
}

.lw-kartenschalter-text {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.lw-kartenschalter i {
    color: var(--lw-muted);
}

.lw-schalter input:disabled + .lw-schalter-spur {
    opacity: .55;
}

.lw-schalter input:disabled {
    cursor: default;
}

.lw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border-radius: var(--lw-radius-sm);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.lw-btn:focus-visible {
    outline: none;
    box-shadow: var(--lw-focus-ring);
}

.lw-btn-primaer {
    background-color: var(--lw-primary);
    color: var(--lw-on-primary);
}

.lw-btn-primaer:hover {
    background-color: var(--lw-primary-deep);
    color: var(--lw-on-primary);
}

.lw-btn-primaer:disabled {
    background-color: var(--lw-muted);
    cursor: default;
}

.lw-btn-sekundaer {
    background-color: var(--lw-surface);
    border-color: var(--lw-border);
    color: var(--lw-primary-deep);
}

.lw-btn-sekundaer:hover {
    border-color: var(--lw-primary-mid);
    color: var(--lw-primary);
}

.lw-btn-block {
    width: 100%;
}

/* Aktionsleiste, die auf schmalen Geräten am Fuß der Seite haftet */
.lw-aktionen {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.lw-aktionen .lw-btn {
    flex: 1 1 12rem;
}

@media (min-width: 992px) {
    .lw-aktionen {
        justify-content: flex-end;
    }

    .lw-aktionen .lw-btn {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   9. Zweispaltiges Detaillayout ab lg (Karte/Stammdaten links, Eingabe rechts)
   -------------------------------------------------------------------------- */
.lw-split {
    display: grid;
    gap: var(--lw-gap);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 992px) {
    .lw-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Siehe .lw-grid: ohne min-width:0 sprengt die Lieferungstabelle die Spalte
   und damit die ganze Seite. */
.lw-split > * {
    min-width: 0;
}

.lw-split > div > .lw-card:last-child {
    margin-bottom: 0;
}

/* Kartenvorschau der Schlaggeometrie */
.lw-karte {
    height: 13rem;
    border-radius: var(--lw-radius-sm);
    border: 1px solid var(--lw-border);
    overflow: hidden;
    background-color: var(--lw-bg);
}

@media (min-width: 992px) {
    .lw-karte {
        height: 17rem;
    }
}

/* Signalfarbe der Betroffenheit — dieselbe wie auf der Karte der Verwaltung
   (Magenta kommt sonst nirgends vor und geht auf dem Orthofoto nicht unter).
   EINE Definition für Kartengeometrie und Fußnote. */
.lw-karte,
.lw-karte-fussnote {
    --lw-strom-farbe: #ff2d95;
}

.lw-karte-fussnote {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--lw-muted);
}

.lw-karte-fussnote i {
    color: var(--lw-strom-farbe);
}

/* Strommast auf der Karte — dieselbe Bildsprache wie in der Verwaltung:
   Orange auf dunkler Fassung, damit der Punkt auf dem Luftbild steht. */
.lw-mast-punkt {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff7a00;
    border: 2px solid #241a0e;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .65), 0 1px 3px rgba(0, 0, 0, .5);
    color: #241a0e;
    font-size: 8px;
    line-height: 12px;
    text-align: center;
}

/* Hinweis direkt unter einem Umschalter: enger angebunden als der
   Seitenhinweis, damit klar ist, worauf er sich bezieht. */
.lw-toggle-hinweis {
    margin: -.15rem 0 .55rem;
    padding: .6rem .75rem;
    font-size: .85rem;
}

/* --------------------------------------------------------------------------
   10. Öffentliche Seiten (Registrierung, Bestätigung)
   -------------------------------------------------------------------------- */
.lw-oeffentlich {
    max-width: 40rem;
    margin-inline: auto;
    padding: 2rem 1rem 3rem;
}

.lw-oeffentlich-kopf {
    text-align: center;
    margin-bottom: 1.75rem;
}

.lw-oeffentlich-kopf .lw-brand {
    font-size: 1.15rem;
    justify-content: center;
}

/* Wiederholbare Betriebszeile im Registrierungsformular */
.lw-betriebszeile {
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm);
    padding: .85rem;
    margin-bottom: .75rem;
    background-color: var(--lw-bg);
}

.lw-betriebszeile.is-fehler {
    border-color: var(--lw-danger);
    background-color: var(--lw-danger-bg);
}

.lw-betriebszeile-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.lw-betriebszeile-nr {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lw-muted);
}

.lw-zeile-entfernen {
    background: none;
    border: none;
    color: var(--lw-muted);
    padding: .2rem .4rem;
    border-radius: var(--lw-radius-sm);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.lw-zeile-entfernen:hover {
    color: var(--lw-danger);
    background-color: var(--lw-danger-bg);
}

.lw-fusszeile {
    flex-shrink: 0;
    border-top: 1px solid var(--lw-border);
    background-color: var(--lw-surface);
    padding: 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--lw-muted);
    margin-bottom: var(--lw-bottomnav-h);
}

@media (min-width: 992px) {
    .lw-fusszeile {
        margin-bottom: 0;
    }
}

.lw-fusszeile a {
    color: var(--lw-muted);
    text-decoration: underline;
}

.lw-fusszeile a:hover {
    color: var(--lw-primary);
}

/* --------------------------------------------------------------------------
   11. Ladeanzeige
   -------------------------------------------------------------------------- */
.lw-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lwDreh .7s linear infinite;
}

@keyframes lwDreh {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lw-spinner {
        animation-duration: 2s;
    }

    .lw-sheet,
    .lw-sheet-backdrop,
    .lw-card-link,
    .lw-schalter-spur::after {
        transition: none;
    }
}

/* Flex-/Rasterkind darf schmaler werden als sein Inhalt. Bootstrap bringt diese
   Hilfsklasse NICHT mit (nur .min-vw-*), die Views verwenden sie aber — ohne
   Definition lief sie ins Leere und lange Feldstücknamen sprengten die Karte. */
.min-w-0 {
    min-width: 0;
}

/* Sichtbar nur für Screenreader */
.lw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Passkeys im Profil (Phase PK)

   Eine Zeile je eingerichtetem Passkey: Name und Herkunftsdatum links, der
   Wegwerf-Knopf rechts. Bewusst keine Tabelle — es sind zwei bis drei Zeilen,
   und am Handy braucht eine Tabelle mehr Platz, als sie einbringt.
   --------------------------------------------------------------------------- */
.lw-passkey {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--lw-border);
}

.lw-passkey:last-child {
    border-bottom: none;
}

.lw-passkey-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}

.lw-passkey-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.lw-passkey-meta {
    color: var(--lw-muted);
    font-size: .85rem;
}

/* Mindestens 44 px Trefferfläche — der Knopf wird am Handy mit dem Daumen
   bedient. */
.lw-passkey-weg {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--lw-radius-sm);
    border: 1px solid var(--lw-border);
    background-color: transparent;
    color: var(--lw-danger);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.lw-passkey-weg:hover {
    background-color: var(--lw-danger-bg);
    border-color: var(--lw-danger);
}

.lw-passkey-weg:focus-visible {
    outline: none;
    box-shadow: var(--lw-focus-ring);
}

.lw-passkey-weg:disabled {
    opacity: .5;
    cursor: default;
}

/* --------------------------------------------------------------------------
   12. Desktop-Shell (Konzept KONZEPT_RGM_Mausplan_LWPortal_Desktop.md §7.1)

   Drei Stufen nach Breite, KEINE Geräteerkennung über den User-Agent:
     < 768 px     Handy: Topbar + Bottom-Navigation (unverändert)
     768–1199 px  Tablet/kleines Notebook: Topbar-Navigation ab 992 px
     ≥ 1200 px    Arbeitsplatz: Seitenleiste links, Topbar entfällt
   Dazu die Eingabeart: Mausbedienung (pointer: fine) bekommt ab 992 px eine
   kompaktere Dichte, Touch (auch Tablet im Traktor) behält die großen
   Trefferflächen.

   Seitentypen über die Klasse am <body> (ViewData["Seitentyp"] im Layout):
     lw-seite-lesen        schmal (Profil, Texte)
     lw-seite-uebersicht   Container-Breite (Standard)
     lw-seite-arbeitsplatz volle Breite und Höhe, eigener Bildlauf je Bereich
   -------------------------------------------------------------------------- */
:root {
    --lw-seitenleiste-b: 15rem;
    --lw-seitenleiste-schmal: 4.25rem;
}

/* Rahmen um Seitenleiste und Inhalt. Unter 1200 px eine Spalte (die Shell
   wächst wie bisher), ab 1200 px eine Zeile mit der Seitenleiste links. */
.lw-rahmen {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Unter 1200 px gibt es keine Seitenleiste — Topbar/Bottom-Nav übernehmen. */
.lw-seitenleiste {
    display: none;
}

/* Raster für Modul-Kacheln: so viele Spalten, wie sinnvoll Platz haben. */
.lw-grid-kacheln {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .lw-grid-kacheln {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    }
}

@media (min-width: 1200px) {
    :root,
    [data-lw-theme="feldfrisch"] {
        /* Ohne Topbar klebt alles, was an ihr hing (Tabellenköpfe, Sprungziele),
           am oberen Rand. EINE Stelle, alle Nutzer lesen den Wert. */
        --lw-topbar-h: 0px;
    }

    .lw-topbar {
        display: none;
    }

    .lw-rahmen {
        flex-direction: row;
        align-items: stretch;
    }

    .lw-rahmen > .lw-shell {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lw-container {
        padding: 1.75rem 2rem 2.5rem;
    }

    /* ---- Seitenleiste ---- */
    .lw-seitenleiste {
        display: flex;
        flex-direction: column;
        flex: 0 0 var(--lw-seitenleiste-b);
        width: var(--lw-seitenleiste-b);
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--lw-surface);
        border-right: 1px solid var(--lw-border);
        z-index: 1030;
    }

    .lw-sl-bereit .lw-seitenleiste {
        transition: flex-basis .2s ease, width .2s ease;
    }

    .lw-sl-marke {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: 1.1rem 1.2rem .6rem;
        font-weight: 700;
        color: var(--lw-primary-deep);
        text-decoration: none;
        white-space: nowrap;
    }

    .lw-sl-marke i {
        color: var(--lw-primary-mid);
        font-size: 1.2rem;
        width: 1.75rem;
        text-align: center;
    }

    .lw-sl-marke:hover {
        color: var(--lw-primary);
    }

    .lw-sl-kontext {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin: .35rem .75rem 1rem;
        padding: .55rem .6rem;
        border: 1px solid var(--lw-border);
        border-radius: var(--lw-radius-sm);
        background-color: var(--lw-accent-bg);
        color: var(--lw-primary-deep);
        text-align: left;
        min-width: 0;
        font: inherit;
    }

    button.lw-sl-kontext {
        cursor: pointer;
        transition: border-color .2s ease;
    }

    button.lw-sl-kontext:hover {
        border-color: var(--lw-primary-mid);
    }

    button.lw-sl-kontext:focus-visible {
        outline: none;
        box-shadow: var(--lw-focus-ring);
    }

    .lw-sl-kontext-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 auto;
        line-height: 1.3;
    }

    .lw-sl-kontext-name {
        font-weight: 600;
        font-size: .9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lw-sl-kontext-meta {
        font-size: .78rem;
        color: var(--lw-primary-mid);
    }

    /* minmax(0,1fr): sonst schiebt ein langer Modulname den Link über den Rand
       (Notiz „LW-Portal Raster-Überstand"). */
    .lw-sl-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
        padding: 0 .75rem;
    }

    .lw-sl-link {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .55rem .6rem;
        border-radius: var(--lw-radius-sm);
        color: var(--lw-muted);
        text-decoration: none;
        font-weight: 500;
        white-space: nowrap;
        transition: background-color .2s ease, color .2s ease;
    }

    .lw-sl-link i {
        width: 1.75rem;
        text-align: center;
        font-size: 1.05rem;
        flex: 0 0 auto;
    }

    .lw-sl-link:hover {
        background-color: var(--lw-accent-bg);
        color: var(--lw-primary);
    }

    .lw-sl-link:focus-visible {
        outline: none;
        box-shadow: var(--lw-focus-ring);
    }

    .lw-sl-link.is-active {
        background-color: var(--lw-accent-bg);
        color: var(--lw-primary-deep);
        font-weight: 600;
    }

    .lw-sl-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lw-sl-fuss {
        margin-top: auto;
        border-top: 1px solid var(--lw-border);
        padding: .6rem .75rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    .lw-sl-fuss .lw-sl-link {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lw-sl-einklappen {
        flex: 0 0 auto;
        width: 2.1rem;
        height: 2.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--lw-border);
        border-radius: var(--lw-radius-sm);
        background-color: var(--lw-surface);
        color: var(--lw-muted);
        cursor: pointer;
    }

    .lw-sl-einklappen:hover {
        color: var(--lw-primary);
        border-color: var(--lw-primary-mid);
    }

    .lw-sl-einklappen:focus-visible {
        outline: none;
        box-shadow: var(--lw-focus-ring);
    }

    /* ---- eingeklappt ---- */
    .lw-sl-schmal .lw-seitenleiste {
        flex-basis: var(--lw-seitenleiste-schmal);
        width: var(--lw-seitenleiste-schmal);
    }

    .lw-sl-schmal .lw-sl-text {
        display: none;
    }

    .lw-sl-schmal .lw-sl-marke,
    .lw-sl-schmal .lw-sl-link {
        justify-content: center;
        padding-inline: 0;
    }

    .lw-sl-schmal .lw-sl-kontext {
        justify-content: center;
        margin-inline: .5rem;
        padding-inline: 0;
    }

    .lw-sl-schmal .lw-sl-nav {
        padding-inline: .5rem;
    }

    .lw-sl-schmal .lw-sl-fuss {
        flex-direction: column;
        padding-inline: .5rem;
    }

    .lw-sl-schmal .lw-sl-fuss .lw-sl-link {
        width: 100%;
    }

    .lw-sl-schmal .lw-sl-einklappen i {
        transform: scaleX(-1);
    }

    /* Betriebs-Panel: hängt jetzt an der Seitenleiste statt an der Topbar. */
    .lw-sheet {
        position: fixed;
        left: calc(var(--lw-seitenleiste-b) + .5rem);
        right: auto;
        top: 4.25rem;
    }

    .lw-sl-schmal .lw-sheet {
        left: calc(var(--lw-seitenleiste-schmal) + .5rem);
    }

    /* ---- Seitentypen ---- */
    .lw-seite-lesen .lw-container {
        max-width: min(var(--lw-container-max), 54rem);
    }

    /* Arbeitsplatz: die Seite füllt den Bildschirm, gescrollt wird innen
       (Liste, Karte, Seitenbereich je für sich). */
    .lw-seite-arbeitsplatz .lw-rahmen {
        height: 100vh;
        overflow: hidden;
    }

    .lw-seite-arbeitsplatz .lw-shell {
        height: 100vh;
        overflow: hidden;
    }

    .lw-seite-arbeitsplatz .lw-container {
        max-width: none;
        height: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

/* ---- Dichte für Mausbedienung ab Notebook-Breite ----
   Handy und Touch-Tablet behalten die großen Felder; mit der Maus wirken sie
   am großen Bildschirm aufgebläht. */
@media (min-width: 992px) and (pointer: fine) {
    body.lw-body {
        font-size: .9375rem;
    }

    .lw-input,
    .lw-select,
    .lw-textarea {
        padding: .45rem .65rem;
        font-size: .9375rem;
    }

    .lw-btn {
        padding: .5rem .95rem;
        font-size: .9375rem;
    }

    .lw-card {
        padding: 1rem 1.1rem;
    }

    .lw-page-title {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lw-sl-bereit .lw-seitenleiste,
    .lw-sl-link {
        transition: none;
    }
}