/* Farben aus dem Styleguide des Betreibers (04.09.2026), nicht
   geschätzt: #717133 dunkles Oliv, #b9c400 Grün/Gelb, #878786/#575756
   Grau. Der Dateiname des Styleguides stand hier bis zum 23.09.2026 im
   Klartext - mit dem echten Firmennamen. Diese Datei wird auf JEDER Seite
   öffentlich ausgeliefert, auch ohne Anmeldung und auch im gesperrten
   Zustand; damit stand der Kundenname auf der Demo für jeden abrufbar
   (R01-DEMO-01). Die Farbwerte sind die Information, die hier gebraucht
   wird - der Dateiname war es nie. */
:root {
    --gp-dunkel: #717133;
    --gp-akzent: #b9c400;
    --gp-grau: #878786;
    --gp-dunkelgrau: #575756;
    --gp-hintergrund: #f7f7f2;
    --gp-weiss: #ffffff;
    --gp-fehler: #b3261e;
    --gp-erfolg: #3a6b1f;
}

* { box-sizing: border-box; }

/* `hidden` muss stärker sein als jede eigene display-Regel: die Vorgabe des
   Browsers (`[hidden] { display: none }`) hat dieselbe Spezifität wie eine
   Klassenregel und verliert gegen sie. Gemessen am 22.09.2026: ein über
   `hidden` ausgeblendetes `.gp-feld` (display:flex) blieb sichtbar. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--gp-hintergrund);
    color: #222;
}

.gp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gp-weiss);
    border-bottom: 3px solid var(--gp-akzent);
    padding: 10px 24px;
    flex-wrap: wrap;
}

.gp-logo img { height: 44px; display: block; }

.gp-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.gp-menu-toggle span { width: 24px; height: 2px; background: var(--gp-dunkel); display: block; }

#hauptnav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#hauptnav a {
    color: var(--gp-dunkelgrau);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}
#hauptnav a.aktiv { color: var(--gp-dunkel); border-bottom-color: var(--gp-akzent); font-weight: 600; }
#hauptnav a.gp-bald { color: #b6b6b0; cursor: default; }

.gp-inhalt { max-width: 1000px; margin: 0 auto; padding: 28px 20px 60px; }

h1 { color: var(--gp-dunkel); }

.gp-hinweis { color: var(--gp-dunkelgrau); font-size: 14px; }

.gp-kachelraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.gp-kachel {
    display: block;
    background: var(--gp-weiss);
    border: 1px solid #e3e3dc;
    border-radius: 10px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
}
.gp-kachel h2 { margin: 0 0 6px; font-size: 17px; color: var(--gp-dunkel); }
.gp-kachel p { margin: 0; font-size: 13px; color: var(--gp-grau); }
.gp-kachel-bald { opacity: 0.55; }

.gp-login-box {
    max-width: 360px;
    margin: 60px auto;
    background: var(--gp-weiss);
    border: 1px solid #e3e3dc;
    border-radius: 10px;
    padding: 28px;
}

.gp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid #e3e3dc; }
.gp-tabs a {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--gp-dunkelgrau);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.gp-tabs a.aktiv { color: var(--gp-dunkel); border-bottom-color: var(--gp-akzent); font-weight: 600; }

.gp-formular { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; max-width: 480px; }
.gp-feld { display: flex; flex-direction: column; gap: 4px; }
.gp-feld label { font-size: 13px; color: var(--gp-dunkelgrau); }
.gp-feld textarea { padding: 9px 10px; border: 1px solid #cfcfc6; border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; }
.gp-checkbox label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #222; }
.gp-checkbox input { width: auto; }
.gp-checkbox-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #222; }
.gp-checkbox-zeile input { width: auto; }

/* min-width:0 auf beiden Ebenen: ein <fieldset> hat von sich aus
   min-inline-size:min-content und schrumpft sonst nicht unter seinen
   Inhalt, und ein <select> ist so breit wie seine längste Option (hier:
   die Produktbezeichnungen). Zusammen ergab das 434 px Inhalt in einem
   375-px-Fenster - gemessen am 22.09.2026 im Auftragsformular. */
.gp-fieldset { border: 1px solid #e3e3dc; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gp-formular select, .gp-formular input, .gp-formular textarea { max-width: 100%; min-width: 0; }
.gp-fieldset legend { padding: 0 6px; font-size: 12px; color: var(--gp-dunkelgrau); text-transform: uppercase; letter-spacing: 0.03em; }

.gp-status { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.gp-status-eingang { background: #eceee6; color: var(--gp-dunkelgrau); }
.gp-status-disponiert { background: #fdead0; color: #8a5a10; }
.gp-status-in_ausfuehrung { background: #fdead0; color: #8a5a10; }
.gp-status-geliefert { background: #e2eefb; color: #1a5a96; }
.gp-status-rechnung_pruefung { background: #f9dce6; color: #9c2f57; }
.gp-status-abgeschlossen { background: #dcecd1; color: var(--gp-erfolg); }
.gp-status-storniert { background: #f6d4d1; color: var(--gp-fehler); }

.gp-dispo th, .gp-dispo td { text-align: center; white-space: nowrap; }
.gp-dispo td:first-child, .gp-dispo th:first-child { text-align: left; }
.gp-dispo-zelle input { width: 52px; text-align: center; padding: 3px; }
.gp-dispo-auslastung { font-size: 11px; color: var(--gp-dunkelgrau); margin-top: 2px; }
.gp-dispo-voll { color: var(--gp-fehler); font-weight: 600; }
.gp-feld input, .gp-feld select {
    padding: 9px 10px;
    border: 1px solid #cfcfc6;
    border-radius: 6px;
    font-size: 14px;
}

.gp-btn {
    background: var(--gp-dunkel);
    color: var(--gp-weiss);
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}
.gp-btn:hover { background: #5c5c29; }

.gp-btn-klein {
    background: none;
    border: 1px solid var(--gp-grau);
    color: var(--gp-dunkelgrau);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.gp-tabelle { width: 100%; border-collapse: collapse; margin-top: 12px; }
/* Unter 900px werden Tabellen zu Karten - kein Rollbereich mehr.
   Die Zwischenstufe vom 22.09.2026 (`display:block; overflow-x:auto`)
   hielt zwar die SEITE frei von Querlauf, verlagerte das Rollen aber in
   die Tabelle: auf /transportauftraege/<id> stand eine 770px breite
   Zeile in einem 375px-Fenster, auf /dispo sogar 942px. Wer am Telefon
   die Entladestellen durchsieht, schiebt dann jede Zeile einzeln hin und
   her. Dasselbe Muster wie bei den Übersichten (siehe unten): EIN Markup,
   zwei Darstellungen - ab 900px eine Tabelle, darunter Karten mit
   Feldbeschriftungen aus data-label. */
@media (max-width: 899px) {
    .gp-tabelle, .gp-tabelle tbody, .gp-tabelle tr, .gp-tabelle td { display: block; width: auto; }
    .gp-tabelle thead { display: none; }
    .gp-tabelle tr { background: var(--gp-weiss); border: 1px solid #e3e3dc; border-radius: 8px;
                     padding: 10px 12px; margin-bottom: 10px; }
    .gp-tabelle td { border-bottom: 0; padding: 2px 0; min-width: 0; overflow-wrap: anywhere; }
    /* Nur beschriftete Zellen bekommen ein Label. Eine Aktionsspalte ohne
       Überschrift (Knopf „Deaktivieren") soll keinen leeren Doppelpunkt
       tragen. */
    .gp-tabelle td[data-label]::before { content: attr(data-label) ": ";
                                         color: var(--gp-grau); font-size: 12px; }
    /* Eine leere Zelle verschwindet ganz, statt eine Zeile „Kontakt: " zu
       hinterlassen - auf einer Karte fällt so etwas sofort auf. */
    .gp-tabelle td:empty { display: none; }
    /* Das Dispo-Raster bringt seinen eigenen Rollbereich mit; als Karte
       braucht es ihn nicht mehr. */
    .gp-rollbereich { overflow-x: visible; }
    .gp-dispo-zelle { display: inline-block; margin-right: 8px; }
    .gp-dispo-auslastung { display: inline-block; }
}
/* Ab 900px bleibt das Raster eine Matrix - dort ist Rollen die richtige
   Antwort, weil 13 Kalenderwochen nebeneinander gehören. */
@media (min-width: 900px) {
    .gp-rollbereich { overflow-x: auto; }
}
.gp-tabelle th, .gp-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e3e3dc; font-size: 14px; }
.gp-tabelle th { color: var(--gp-dunkelgrau); font-weight: 600; }

.gp-flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.gp-flash-fehler { background: #fbe9e7; color: var(--gp-fehler); }
.gp-flash-erfolg { background: #eaf3e3; color: var(--gp-erfolg); }
.gp-flash-hinweis { background: #f0f0e8; color: var(--gp-dunkelgrau); }

@media (max-width: 720px) {
    .gp-menu-toggle { display: flex; }
    #hauptnav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px; }
    #hauptnav.offen { display: flex; }
}

/* ===================================================================
   Übersichten: Filterleiste, Liste ohne Querscrollen, Detailbereich
   ===================================================================
   Verbesserungspaket 09.2026, Punkte 1+2. Alex' Vorgabe: kein
   horizontales Scrollen auf KEINER Breite. Deshalb bewusst KEINE
   <table> mit overflow-x, sondern EIN Markup mit zwei Darstellungen:
   ab 900px ein Raster (liest sich wie eine Tabelle), darunter Karten
   mit Feldbeschriftungen aus data-label. Eine zweite, per display:none
   versteckte Mobilfassung wäre doppelte Pflege - der gerade unsichtbare
   Zweig veraltet unbemerkt. */

/* Übersichtsseiten dürfen breiter sein als der Lesetext-Standard von
   1000px, sonst bleibt für den Detailbereich rechts zu wenig übrig.
   Bewusst Opt-in je Seite statt global angehoben. */
body.gp-breit .gp-inhalt { max-width: 1400px; }

.gp-filter { background: var(--gp-weiss); border: 1px solid #e3e3dc; border-radius: 8px;
             padding: 14px 16px; margin-top: 12px; }
.gp-filter-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
/* min-width:0 ist Pflicht - ohne das wächst ein Flex-Kind über seinen
   Inhalt hinaus und erzeugt genau den Überlauf, der hier weg soll. */
.gp-filter .gp-feld { flex: 1 1 180px; min-width: 0; }
.gp-filter .gp-feld.gp-feld-breit { flex: 2 1 280px; }
.gp-filter .gp-feld.gp-feld-schmal { flex: 0 1 120px; }
.gp-bereich { display: flex; gap: 6px; align-items: center; min-width: 0; }
.gp-bereich input { min-width: 0; }
.gp-bereich span { color: var(--gp-grau); font-size: 13px; }

.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.gp-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef0e2;
           border: 1px solid #d8dcc4; color: var(--gp-dunkel); border-radius: 14px;
           padding: 3px 6px 3px 11px; font-size: 13px; max-width: 100%; }
.gp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-chip a { color: var(--gp-dunkelgrau); text-decoration: none; font-weight: 700;
             line-height: 1; padding: 2px 5px; border-radius: 10px; }
.gp-chip a:hover { background: #dde1c9; }
.gp-chip-alle { font-size: 13px; }

.gp-trefferzeile { display: flex; justify-content: space-between; align-items: baseline;
                   flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gp-treffer { color: var(--gp-dunkelgrau); font-size: 14px; }

.gp-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.gp-liste-kopf, .gp-zeile { display: block; }
.gp-zeile { border: 1px solid #e3e3dc; border-radius: 8px; background: var(--gp-weiss);
            padding: 12px 14px; margin-bottom: 10px; }
.gp-zeile[aria-current="true"] { border-color: var(--gp-akzent); box-shadow: 0 0 0 2px #e8ecc8; }
.gp-zelle { display: block; min-width: 0; overflow-wrap: anywhere; font-size: 14px; padding: 2px 0; }
.gp-zelle::before { content: attr(data-label) ": "; color: var(--gp-grau); font-size: 12px; }
.gp-liste-kopf { display: none; }

@media (min-width: 900px) {
    .gp-liste-kopf, .gp-zeile { display: grid; align-items: center; gap: 10px; }
    .gp-zeile { border-radius: 0; border: 0; border-bottom: 1px solid #e3e3dc; margin: 0;
                padding: 9px 10px; }
    .gp-zeile[aria-current="true"] { background: #f6f8ec; box-shadow: none;
                                     border-bottom-color: var(--gp-akzent); }
    .gp-liste-kopf { padding: 0 10px 6px; border-bottom: 2px solid #e3e3dc; }
    .gp-liste-kopf a, .gp-liste-kopf span { font-size: 13px; color: var(--gp-dunkelgrau);
                                            font-weight: 600; text-decoration: none; }
    .gp-liste-kopf a:hover { color: var(--gp-dunkel); }
    .gp-zelle { padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Auslassungspunkte sind fuer FREITEXT gedacht (Kunden-, Artikelnamen) -
       dort steht der volle Wert im Detailbereich daneben. Fuer Werte aus
       einer festen Liste ist Kuerzen dagegen sinnlos: aus „Abgeschlossen"
       wurde „Abgeschl…", und die Spalte war schlicht zu schmal (gemessen
       23.09.2026: 109 px Inhalt in 84 px Spalte). Solche Zellen brechen
       lieber um. */
    .gp-zelle-lose { white-space: normal; overflow: visible; text-overflow: clip; }
    .gp-zelle-lose .gp-status { white-space: normal; }
    /* Im Raster trägt der Kopf die Beschriftung, nicht jede Zelle. */
    .gp-zelle::before { content: none; }
    .gp-zelle-umbruch { white-space: normal; overflow-wrap: anywhere; }
}

/* Spaltenraster je Übersicht - eine Modifier-Klasse statt vier Listen. */
@media (min-width: 900px) {
    /* Art und Status tragen Werte aus einer festen Liste - die Spalten sind
       so breit, dass der laengste davon hineinpasst („Vermittlung",
       „Rechnung in Prüfung"), statt ihn zu kuerzen. */
    .gp-raster-auftraege { grid-template-columns: 92px 86px 1.2fr 1fr 1fr 78px 82px 104px 112px; }
    .gp-raster-auftraege.gp-mit-ek { grid-template-columns: 92px 86px 1.1fr 0.9fr 0.9fr 72px 72px 72px 96px 112px; }
    .gp-raster-kunden { grid-template-columns: 96px 1.4fr 1fr 1.2fr 110px; }
    .gp-raster-bestellungen { grid-template-columns: 120px 100px 1.4fr 110px 110px 130px; }
    .gp-raster-ta { grid-template-columns: 120px 1.2fr 1.1fr 150px 110px 120px; }
}

.gp-seiten { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.gp-seiten a, .gp-seiten span { font-size: 13px; padding: 5px 10px; border-radius: 6px;
                                text-decoration: none; color: var(--gp-dunkelgrau); }
.gp-seiten a { border: 1px solid #e3e3dc; }
.gp-seiten a:hover { border-color: var(--gp-akzent); }
.gp-seiten .gp-seite-aktiv { background: var(--gp-dunkel); color: var(--gp-weiss); }

.gp-leer { color: var(--gp-grau); font-size: 14px; padding: 20px 0; }

/* Rechter Detailbereich der Auftragsübersicht (Punkt 2).
   Unter 1100px nimmt er die volle Breite ein und legt sich über die
   Liste - auf einem Telefon ist eine zweispaltige Aufteilung sinnlos. */
.gp-mit-panel { display: block; }
.gp-listenspalte { min-width: 0; }

.gp-panel { background: var(--gp-weiss); border: 1px solid #e3e3dc; border-radius: 8px;
            padding: 16px 18px; margin-top: 12px; min-width: 0; }
.gp-panel[hidden] { display: none; }
.gp-panel-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gp-panel-kopf h2 { margin: 0; color: var(--gp-dunkel); font-size: 19px; }
.gp-panel-zu { text-decoration: none; color: var(--gp-dunkelgrau); font-size: 22px;
               line-height: 1; padding: 0 6px; border-radius: 6px; }
.gp-panel-zu:hover { background: #eceee6; }
.gp-panel h3 { font-size: 13px; color: var(--gp-grau); text-transform: uppercase;
               letter-spacing: 0.04em; margin: 18px 0 6px; font-weight: 600; }
.gp-panel-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.gp-panel-wert { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.gp-panel-liste { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
                  gap: 4px 12px; margin: 0; font-size: 14px; }
.gp-panel-liste dt { color: var(--gp-grau); font-size: 13px; }
.gp-panel-liste dd { margin: 0; overflow-wrap: anywhere; }
.gp-panel-transporte { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.gp-panel-transporte li { padding: 6px 0; border-bottom: 1px solid #f0f0e8; }
.gp-panel-transporte li:last-child { border-bottom: 0; }
.gp-panel-fuss { margin: 20px 0 0; }

@media (min-width: 1100px) {
    /* Zwei Spalten: die Liste behält ihre Breite, der Bereich scrollt
       eigenständig (Alex' Vorgabe) und bleibt beim Blättern stehen. */
    .gp-mit-panel { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px;
                    align-items: start; }
    .gp-panel { margin-top: 0; position: sticky; top: 16px;
                max-height: calc(100vh - 40px); overflow-y: auto; }
}

/* Auftragserfassung: Kundensuche, Kundenanlage, Historie, Marge
   (Verbesserungspaket Punkte 3, 5, 6, 7). */
.gp-kundenwahl, .gp-suchwahl { position: relative; }
.gp-gewaehlt { margin: 0 0 6px; font-size: 14px; }
.gp-gewaehlt span { font-weight: 600; color: var(--gp-dunkel); }
.gp-gewaehlt .gp-leer-wert { font-weight: 400; color: var(--gp-grau); }
.gp-kundenliste, .gp-suchliste { list-style: none; margin: 4px 0 0; padding: 0; max-height: 260px;
                  overflow-y: auto; border: 1px solid #cfcfc6; border-radius: 6px;
                  background: var(--gp-weiss); }
.gp-kundenliste[hidden], .gp-suchliste[hidden] { display: none; }
.gp-kundenliste li, .gp-suchliste li { padding: 7px 10px; cursor: pointer; font-size: 14px;
                     border-bottom: 1px solid #f0f0e8; display: flex;
                     justify-content: space-between; gap: 10px; align-items: baseline; }
.gp-kundenliste li:last-child, .gp-suchliste li:last-child { border-bottom: 0; }
.gp-kundenliste li:hover, .gp-suchliste li:hover { background: #f4f6ea; }
.gp-kundenliste li.gp-leer, .gp-suchliste li.gp-leer { cursor: default; color: var(--gp-grau); }
.gp-kundenliste li.gp-leer:hover, .gp-suchliste li.gp-leer:hover { background: none; }

.gp-nebenbereich { margin-top: 32px; padding-top: 20px; border-top: 2px solid #e3e3dc; max-width: 720px; }
.gp-historie { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.gp-historie li { padding: 6px 0; border-bottom: 1px solid #f0f0e8; }
.gp-historie li:last-child { border-bottom: 0; }

.gp-marge-ok { color: var(--gp-erfolg); font-weight: 600; }
.gp-marge-negativ { color: var(--gp-fehler); font-weight: 600; }
.gp-marge-offen { color: var(--gp-grau); }
.gp-warnung { color: #8a5a10; background: #fdead0; padding: 6px 10px; border-radius: 6px;
              font-size: 13px; margin: 6px 0; }

.gp-dialog { border: 1px solid #cfcfc6; border-radius: 10px; padding: 22px 24px;
             max-width: min(680px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,0.18); }
.gp-dialog::backdrop { background: rgba(40, 40, 30, 0.45); }
.gp-dialog h2 { margin-top: 0; color: var(--gp-dunkel); }
.gp-dialog h3 { font-size: 14px; color: var(--gp-dunkelgrau); margin: 18px 0 8px; }
.gp-dialog-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.gp-dialog-knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.gp-btn-schlicht { background: none; border: 1px solid #cfcfc6; border-radius: 6px;
                   padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--gp-dunkelgrau); }
.gp-btn-schlicht:hover { border-color: var(--gp-akzent); }

/* Entladestellen im Transportauftrag (Punkte 9/10): eine Zeile je Stelle,
   mit Kopfleiste zum Umsortieren und Entfernen. Absichtlich als Block und
   nicht als Tabelle - auf einem schmalen Gerät muss jede Stelle
   untereinander lesbar bleiben, ohne dass die Seite quer rollt. */
.gp-sendung { border: 1px solid #e3e3dc; border-radius: 8px; padding: 12px 14px;
              margin-bottom: 12px; background: var(--gp-weiss); min-width: 0;
              display: flex; flex-direction: column; gap: 12px; }
.gp-sendung-kopf { display: flex; justify-content: space-between; align-items: center;
                   gap: 10px; flex-wrap: wrap; }
.gp-sendung-kopf strong { color: var(--gp-dunkel); font-size: 14px; }
.gp-sendung-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-sendung-knoepfe button { padding: 3px 9px; font-size: 13px; }
.gp-sendung-knoepfe button[disabled] { opacity: 0.35; cursor: default; }

/* Positionszeile einer Bestellung: feste Spaltenanteile (2fr 2fr 1fr 1fr 1fr)
   ergaben bei 375 px 1071 px Inhalt - gemessen am 22.09.2026. Die Spalten
   brechen jetzt um, statt die Seite quer zu schieben. */
.gp-positionsraster { display: grid; gap: 8px; align-items: end; min-width: 0;
                      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 900px) {
    .gp-positionsraster { grid-template-columns: 2fr 2fr 1fr 1fr 1fr; }
}