/* =========================================================================
   POS Mini-Checks - Designsystem
   Grundlage: LP-Weinrot als einzige UI-Akzentfarbe, Migros-Orange bleibt
   der Kundenmarke vorbehalten, Statusfarben ausschliesslich für Ergebnisse.
   ========================================================================= */

:root {
    /* Flächen und Linien - warm getönte Neutraltöne, Chroma bewusst niedrig */
    --canvas: #f7f5f4;
    --surface: #ffffff;
    --surface-2: #fbfaf9;
    --surface-3: #f2efee;
    --line: #e9e4e3;
    --line-strong: #d8d1cf;

    /* Schrift */
    --ink: #1c1719;
    --ink-2: #4c4245;
    --ink-3: #7d7376;
    --ink-4: #a49a9c;

    /* Marke */
    --wine: #8c1230;
    --wine-2: #a51a3b;
    --wine-3: #6d0d25;
    --wine-tint: #faeff2;
    --kunde: #ff6600;

    /* Status - nie ohne Zahl oder Label daneben */
    --gut: #2e7d52;
    --gut-flaeche: #e9f3ed;
    --warn: #ac7016;
    --warn-flaeche: #faf2e2;
    --schlecht: #b32b22;
    --schlecht-flaeche: #faeae8;

    --radius: 10px;
    --radius-s: 7px;
    --schatten: 0 1px 2px rgba(28, 23, 25, .05), 0 12px 28px -18px rgba(28, 23, 25, .28);
    --rail: 248px;

    --serif: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
    --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--wine);
    text-decoration: none;
}

a:hover {
    color: var(--wine-3);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.02em;
}

.zahl {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Grundraster */

.schale {
    display: flex;
    min-height: 100vh;
}

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

.seite {
    padding: 28px 32px 56px;
    max-width: 1560px;
    width: 100%;
}

/* ------------------------------------------------------------- Navigation */

.rail {
    width: var(--rail);
    flex: 0 0 var(--rail);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.rail-marke {
    display: block;
    padding: 20px 20px 18px;
}

.rail-marke img {
    display: block;
    width: 100%;
    height: auto;
}

.kundenkarte {
    margin: 0 16px 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface-2);
}

.kundenkarte .kunde {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--kunde);
    line-height: 1;
}

.kundenkarte .welle {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-3);
}

.rail-gruppe {
    padding: 0 16px;
    margin-bottom: 18px;
}

.rail-gruppe h4 {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 0 10px 8px;
}

.rail-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-s);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.rail-link:hover {
    background: var(--surface-3);
    color: var(--ink);
    text-decoration: none;
}

.rail-link.aktiv {
    background: var(--wine-tint);
    color: var(--wine);
    font-weight: 600;
}

.rail-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: .75;
}

.rail-link.aktiv svg {
    opacity: 1;
}

.rail-fuss {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--wine);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.rail-fuss .name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-fuss .rolle {
    font-size: 11px;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------- Kopfbar */

.kopfbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 60px;
    padding: 0 32px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.brotkrumen {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    min-width: 0;
}

.brotkrumen a {
    color: var(--ink-3);
}

.brotkrumen a:hover {
    color: var(--wine);
}

.brotkrumen .jetzt {
    color: var(--ink);
    font-weight: 600;
}

.brotkrumen .teiler {
    color: var(--ink-4);
}

.kopfbar .rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* -------------------------------------------------------------- Bedienung */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.knopf:hover {
    border-color: var(--ink-4);
    color: var(--ink);
    text-decoration: none;
}

.knopf.haupt {
    background: var(--wine);
    border-color: var(--wine);
    color: #fff;
}

.knopf.haupt:hover {
    background: var(--wine-3);
    border-color: var(--wine-3);
    color: #fff;
}

.knopf.still {
    border-color: transparent;
    background: transparent;
    padding-inline: 10px;
}

.knopf.still:hover {
    background: var(--surface-3);
}

.knopf svg {
    width: 15px;
    height: 15px;
}

.feld {
    height: 36px;
    padding: 0 32px 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237d7376'%3E%3Cpath d='M4.5 6.2 8 9.7l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px;
}

input.feld {
    padding-right: 11px;
    background-image: none;
}

.feld:focus-visible,
.knopf:focus-visible,
.segment button:focus-visible {
    outline: 2px solid var(--wine-2);
    outline-offset: 1px;
}

.feldgruppe {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.feldgruppe > label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.segment {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface-3);
}

.segment button {
    height: 28px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.segment button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(28, 23, 25, .12);
}

.suche {
    position: relative;
    display: flex;
    align-items: center;
}

.suche svg {
    position: absolute;
    left: 10px;
    width: 15px;
    height: 15px;
    color: var(--ink-4);
    pointer-events: none;
}

.suche input {
    padding-left: 32px;
    min-width: 220px;
}

/* -------------------------------------------------------------- Bausteine */

.karte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.karte-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.karte-kopf h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-family: var(--sans);
}

.karte-kopf .beischrift {
    font-size: 12px;
    color: var(--ink-3);
}

.karte-kopf .rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.marke-punkt {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 9px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 5px;
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.chip.gut { background: var(--gut-flaeche); color: var(--gut); }
.chip.warn { background: var(--warn-flaeche); color: var(--warn); }
.chip.schlecht { background: var(--schlecht-flaeche); color: var(--schlecht); }

.kundenzeichen {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--kunde);
}

/* Statusfarben werden nur zusammen mit der Zahl gezeigt. */
.wert-gut { color: var(--gut); }
.wert-warn { color: var(--warn); }
.wert-schlecht { color: var(--schlecht); }
.wert-normal { color: var(--ink); }

/* --------------------------------------------------------------- Seitenkopf */

.seiten-kopf {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.seiten-kopf h1 {
    font-size: 30px;
    line-height: 1.1;
}

.seiten-kopf .unter {
    margin-top: 5px;
    font-size: 14px;
    color: var(--ink-3);
}

.seiten-kopf .werkzeuge {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.raster {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.raster.zwei {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 1320px) {
    .raster.zwei {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------- Kennzahlen */

.kennzahl-band {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
}

.kennzahl-band > div {
    background: var(--surface);
    padding: 20px 24px;
}

.kennzahl-titel {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.kennzahl-gross {
    font-family: var(--serif);
    font-size: 54px;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    margin-top: 10px;
}

.kennzahl-mittel {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    margin-top: 10px;
}

.kennzahl-zeile {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 5px 0;
}

.kennzahl-zeile dt {
    color: var(--ink-3);
}

.kennzahl-zeile dd {
    margin: 0;
    font-weight: 600;
}

/* ----------------------------------------------------------------- Balken */

.meter {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-3);
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--wine);
}

.meter > span.gut { background: var(--gut); }
.meter > span.warn { background: var(--warn); }
.meter > span.schlecht { background: var(--schlecht); }

/* Zielmarke im Balken - eine feine Kerbe bei 95 %. */
.meter.mit-ziel::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 95%;
    width: 1px;
    background: var(--ink-4);
    opacity: .55;
}

.balkenliste {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 14px;
}

.balken {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 7px 8px;
    border-radius: 6px;
    color: inherit;
}

a.balken:hover {
    background: var(--surface-2);
    text-decoration: none;
}

.balken .marke {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.balken .marke small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-3);
}

.balken .wert {
    text-align: right;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.balken .neben {
    text-align: right;
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.karte-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-3);
}

.filterleiste {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.filterleiste .rechts {
    margin-left: auto;
}

/* ------------------------------------------------------- Berichtsstreifen */

.streifen {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 18px 24px;
    margin-bottom: 18px;
}

.streifen-liste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

.streifen-liste > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.streifen-liste dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

.streifen-liste dd {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

@media (max-width: 1320px) {
    .streifen {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .streifen-liste {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.drillpfad {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--ink-3);
}

.drillpfad .jetzt {
    color: var(--ink);
    font-weight: 600;
}

.drillpfad .teiler {
    color: var(--ink-4);
}

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

.tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tabelle thead th {
    position: sticky;
    top: 60px;
    z-index: 5;
    background: var(--surface-2);
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
    white-space: nowrap;
}

.tabelle thead th.num {
    text-align: right;
}

.tabelle tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 14px;
}

.tabelle tbody td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

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

.tabelle tbody tr.klickbar {
    cursor: pointer;
}

.tabelle tbody tr.klickbar:hover td {
    background: var(--surface-2);
}

.tabelle tbody tr.gruppe td {
    background: var(--surface-2);
    padding-top: 14px;
    padding-bottom: 9px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.zeile-titel {
    font-weight: 600;
    line-height: 1.3;
}

.zeile-unter {
    display: block;
    font-weight: 400;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.35;
}

.erfuellung {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.erfuellung .meter {
    width: 68px;
    flex: 0 0 68px;
}

.erfuellung .wert {
    width: 44px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lupe {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
}

.lupe:hover {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--wine);
}

.leer {
    padding: 48px 16px;
    text-align: center;
    color: var(--ink-3);
}

/* ------------------------------------------------------------------ Karte */

.karte-flaeche {
    display: block;
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, #fbfaf9 0%, #f4f1ef 100%);
}

.karte-land {
    fill: #efeae8;
    stroke: #cfc6c4;
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.karte-see {
    fill: #dfe6ea;
    stroke: #c9d3d8;
    stroke-width: .6;
}

.standort {
    cursor: pointer;
}

.standort .halo {
    fill: currentColor;
    opacity: 0;
    transition: opacity .15s ease, r .15s ease;
}

.standort .punkt {
    fill: currentColor;
    stroke: #fff;
    stroke-width: 2.5;
    transition: r .15s ease;
}

.standort .marke {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    fill: var(--ink);
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 4;
    stroke-linejoin: round;
}

.standort .anteil {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    fill: currentColor;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 4;
    stroke-linejoin: round;
}

.standort:hover .halo,
.standort.hervor .halo {
    opacity: .22;
}

.standort:hover .punkt,
.standort.hervor .punkt {
    r: 9;
}

.standort-gut { color: var(--gut); }
.standort-normal { color: var(--wine); }
.standort-warn { color: var(--warn); }
.standort-schlecht { color: var(--schlecht); }

.legende {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-3);
}

.legende span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legende i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.standortliste {
    display: flex;
    flex-direction: column;
}

.standortzeile {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 84px 48px;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    color: inherit;
}

.standortzeile:last-child {
    border-bottom: 0;
}

.standortzeile:hover,
.standortzeile.hervor {
    background: var(--surface-2);
}

.standortzeile .code {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
}

.standortzeile .ort {
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standortzeile .ort small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-3);
}

.standortzeile .anteil {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Detailansicht */

.detail .modal-dialog {
    max-width: 1080px;
}

.detail .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(28, 23, 25, .5);
}

.detail-kopf {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--line);
}

.detail-kopf h2 {
    font-size: 24px;
    letter-spacing: -.03em;
}

.detail-kopf .unter {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-3);
}

.detail-koerper {
    padding: 22px 26px 28px;
    background: var(--canvas);
}

.ring-wert {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.galerie-haupt {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: contain;
    padding: 8px;
    border-radius: var(--radius-s);
    background: var(--surface-3);
}

.galerie-streifen {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.galerie-streifen img {
    width: 76px;
    height: 56px;
    object-fit: contain;
    background-color: var(--surface-3);
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--surface-3);
    cursor: pointer;
}

.galerie-streifen img.aktiv {
    border-color: var(--wine);
    box-shadow: 0 0 0 2px var(--wine-tint);
}

.artikelliste {
    display: flex;
    flex-direction: column;
}

.artikelzeile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}

.artikelzeile:last-child {
    border-bottom: 0;
}

.artikelzeile .name {
    flex: 1;
    min-width: 0;
}

.facing {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
}

.facing .balkenpaar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 56px;
}

.facing .balkenpaar i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
}

.facing .balkenpaar i.ist {
    background: var(--wine);
}

.faltung > summary {
    cursor: pointer;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    list-style: none;
}

.faltung > summary::-webkit-details-marker {
    display: none;
}

.faltung > summary::before {
    content: "▸";
    display: inline-block;
    width: 14px;
    color: var(--ink-4);
}

.faltung[open] > summary::before {
    content: "▾";
}

/* ------------------------------------------------------------- Zustaende */

.lade-schleier {
    position: relative;
    transition: opacity .15s ease;
}

.lade-schleier.laedt {
    opacity: .45;
}

@media (max-width: 1100px) {
    .rail {
        display: none;
    }

    .kennzahl-band {
        grid-template-columns: minmax(0, 1fr);
    }

    .seite {
        padding: 20px 16px 40px;
    }

    .kopfbar {
        padding: 0 16px;
    }
}