/* ==========================================================================
 * GPG Händlerportal - gemeinsame Gestaltungsebene
 * ==========================================================================
 *
 * WAS DAS IST
 * Eine Schicht, die die wiederkehrenden Muster des Portals trifft und
 * dadurch alle Seiten auf einmal hebt - ohne dass eine einzige Vorlage
 * angefasst wird. Zurückrollen heißt: diese Datei abschalten.
 *
 * WARUM ES SO GEBAUT IST
 * Das Tailwind-Blatt des Portals ist vorkompiliert und lässt sich nicht neu
 * bauen. Alles, was nicht zufällig darin steht, muss von Hand geschrieben
 * werden. Und ein Umbau von zwanzig Vorlagen wäre bei laufendem Betrieb
 * zwanzig einzelne Risiken.
 *
 * LADEREIHENFOLGE
 * Diese Datei kommt NACH gpg-dark.css. Sie setzt bewusst fast nur Form -
 * Größen, Abstände, Rundungen - und kaum Farbe. Damit trägt gpg-dark.css
 * unverändert weiter, und der dunkle Modus bleibt heil.
 *
 * WAS SIE NICHT ANFASST
 *   - Schatten an Karten. gpg-dark.css überschreibt .shadow-* mit
 *     !important; eine Regel hier würde nur im Hellen greifen und den
 *     dunklen Modus wieder sechsstufig zurücklassen.
 *   - Hintergrundfarben an der Blätterung. Die aktive Seitenzahl bekommt
 *     ihre Farbe über Alpine; eine Regel hier würde die Markierung tilgen.
 *   - .rounded-full pauschal. Darunter sind 8px-Punkte, der 56px-Support-
 *     Knopf und runde Symbolflächen.
 *   - templates/pdf.php. Das ist reines mPDF ohne HTML und ohne Stilvorlage
 *     - die Garantiedokumente erreicht kein Portal-CSS. Geprüft.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 1. DIE GRÖSSE DES GANZEN PORTALS - EINE EINZIGE ZAHL
 *
 * Zwei Dinge stecken hier drin.
 *
 * ERSTENS: Das WordPress-Theme schreibt für den Seitenkörper eine
 * MITWACHSENDE Größe vor - live gemessen 19,7 Pixel bei 756 Pixeln
 * Fensterbreite und 22 Pixel bei 1427. Jedes Element ohne eigene
 * Größenklasse erbt das; in templates/ sind das rund 1.242 Stück, darunter
 * die Menüpunkte der Seitenleiste (die größte Schrift im ganzen Portal,
 * größer als jede Überschrift), die Blätter-Knöpfe und der Absendeknopf des
 * Garantieantrags. Zwei Browser mit verschieden breiten Fenstern zeigten
 * dadurch verschieden große Schrift - ein Teil dessen, was sich anfühlte
 * wie "Chrome ist näher als Firefox".
 *
 * ZWEITENS: Tailwind rechnet fast alles in rem, also relativ zu dieser einen
 * Zahl. Sie hier zu ändern skaliert das GESAMTE Portal gleichmäßig -
 * Schrift, Abstände, Seitenleiste, Zeilenhöhen. Dasselbe Ergebnis wie
 * Browser-Zoom, nur für alle gleich und ohne dass jemand etwas einstellt.
 *
 *     100%  wie ursprünglich
 *      85%  spürbar ruhiger
 *      80%  entspricht Firefox auf 80 %
 *      80%  eingestellt - 75 % war im Betrieb zu klein
 *
 * Bei 80 % ist die Seitenleiste 205 statt 256 Pixel breit; das sind 51 Pixel
 * mehr für die Tabellen. 75 % waren einmal eingestellt und im Betrieb zu
 * klein: Die kleinste Schrift des Portals (text-xs) lag dann bei 9 Pixeln.
 * Bei 80 % sind es 9,6 - immer noch knapp, aber tragbar.
 *
 * Der Browser-Zoom wirkt zusätzlich: Strg und Plus vergrößert weiterhin.
 * -------------------------------------------------------------------------- */
html {
    font-size: 80%;
}

/*
 * Auf dem Handy bleibt es bei 100 Prozent.
 *
 * Die Verkleinerung ist für Bildschirme gedacht, auf denen Platz verschenkt
 * wird. Auf einem Telefon gilt das Gegenteil: Dort schrumpfen mit der
 * Grundgröße auch alle Tippflächen. Nachgemessen am Support-Knopf des
 * Dashboards - er lag bei 80 Prozent nur noch bei 26 Pixeln und damit knapp
 * über der Grenze von 24, ab der man zuverlässig trifft. Ein Fingerbreit
 * ändert sich nicht mit der Bildschirmgröße.
 */
@media (max-width: 640px) {
    html { font-size: 100%; }
}

body {
    font-size: .9375rem;   /* skaliert mit - bei 80 % sind das 12 Pixel */
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
 * 2. SATZSPIEGEL
 *
 * Der Inhaltsbereich hat heute keinerlei Breitenbegrenzung. Auf einem
 * 2560px-Schirm läuft er über rund 2270px - eine Tabellenzeile wird dort
 * unlesbar breit. Umgekehrt fressen auf einem 375px-Handy die festen 32px
 * Rand je Seite ein Sechstel der Fläche.
 *
 * Eigenes CSS ist zwingend: max-w-5xl, -6xl, -7xl, sm:p-4 und xl:p-10
 * fehlen alle im gebauten Tailwind. Die größte gebaute Stufe ist max-w-4xl
 * (896px) - zu eng für die zwölf- und fünfzehnspaltigen Tabellen.
 *
 * width:100% gehört dazu, sonst schrumpft flex-1 bei kurzem Inhalt zusammen.
 * -------------------------------------------------------------------------- */
main.flex-1.p-8 {
    width: 100%;
    padding: 2rem;         /* unverändert 32px - siehe unten */
}
@media (max-width: 640px) { main.flex-1.p-8 { padding: 1rem; } }

/*
 * ZWEITER ANLAUF, 1.3.7. Hier stand zuerst
 *
 *     max-width: 84rem; margin-inline: auto;
 *     @media (min-width:1280px) { padding: 2.5rem 3rem; }
 *
 * Beides ist wieder draußen, aus zwei Gründen:
 *
 * 1. Der größere Innenabstand hat den Inhalt spürbar nach rechts und unten
 *    geschoben - 48 statt 32 Pixel seitlich, 40 statt 32 oben. Genau das ist
 *    im laufenden Betrieb aufgefallen ("die Tabellen sind etwas nach rechts
 *    unten verschoben"). Auf einem Werkzeug, in dem den ganzen Tag breite
 *    Tabellen gelesen werden, ist Breite mehr wert als Luft am Rand.
 *
 * 2. margin-inline:auto greift an einem Flex-Kind mit flex-1 gar nicht - die
 *    automatischen Ränder lösten sich zu 0 auf. Die Begrenzung hätte also
 *    nicht zentriert, sondern den übrigen Platz einfach rechts liegen
 *    gelassen. Ein Versuch, das über padding-inline nachzubauen, scheitert
 *    daran, dass sich Prozentwerte beim Innenabstand auf den Elternblock
 *    beziehen - die Rechnung ginge um die Breite der Seitenleiste daneben.
 *
 * Damit läuft der Inhalt auf sehr breiten Schirmen wieder über die volle
 * Fläche. Das ist ein bewusster Tausch: In einem Datenwerkzeug ist das
 * normal, und eine Begrenzung ohne saubere Zentrierung wäre schlechter als
 * keine. Wer täglich auf 2560 Pixel arbeitet, soll sich melden - dann
 * bekommt der Inhaltsbereich eine eigene Hülle im Markup, und dann geht
 * auch echtes Zentrieren.
 *
 * Die Verkleinerung auf schmalen Schirmen bleibt: Dort fraßen die festen
 * 32 Pixel je Seite ein Sechstel der Fläche.
 */


/* --------------------------------------------------------------------------
 * 2b. DIE FUSSLEISTE WIRD SCHLANKER
 *
 * Version, Impressum und Datenschutz nahmen 53 Pixel Höhe. Zusammen mit der
 * Kopfzeile (56) und dem Polster (64) sind das 173 von 703 Pixeln - ein
 * Viertel des Fensters ging für Rahmen drauf, bevor der erste Inhalt kam.
 *
 * Die Leiste hängt direkt an der Portalhülle, nicht in main - deshalb der
 * Selektor über den Elternteil.
 * -------------------------------------------------------------------------- */
.min-h-screen > .w-full.py-4.border-t {
    padding-block: .5rem;
    font-size: .78rem;
}


/* --------------------------------------------------------------------------
 * 2c. DIE TABELLE DARF DEN RAND MITBENUTZEN
 *
 * Die Garantieliste hat zwölf Spalten und braucht 1539 Pixel. Auf einem
 * 1427er Notebook stehen ihr 1041 zur Verfügung - es fehlen also fast 500.
 *
 * Die Tabellenkarte hängt direkt an main. Sie darf jetzt 24 der 32 Pixel
 * Außenpolster überlappen und gibt innen 8 Pixel ab: zusammen 64 Pixel mehr
 * für die Spalten, ohne dass die Karte am Rand klebt.
 *
 * :has() wird von allen aktuellen Browsern verstanden. Wo nicht, wird die
 * Regel schlicht übersprungen - dann bleibt es beim bisherigen Stand.
 * -------------------------------------------------------------------------- */
main.flex-1.p-8 > .bg-white.border.border-gray-200:has(> .gpg-tabellenrahmen) {
    margin-inline: -1.5rem;
    padding-inline: .5rem;
}
@media (max-width: 640px) {
    /* Auf dem Handy gibt es nichts zu holen - dort steht die Kartenansicht. */
    main.flex-1.p-8 > .bg-white.border.border-gray-200:has(> .gpg-tabellenrahmen) {
        margin-inline: 0;
        padding-inline: 1rem;
    }
}


/* --------------------------------------------------------------------------
 * 3. RUNDUNGSLEITER
 *
 * Portalweit sind sieben Stufen im Einsatz: rounded 67x, rounded-md 41x,
 * rounded-lg 112x, rounded-xl 63x, rounded-2xl 19x, rounded-3xl 2x,
 * rounded-full 87x. Der Sprung von 4px auf 24px ist der Hauptgrund, warum
 * das Portal zusammengestückelt wirkt.
 *
 * gpg-dark.css setzt nirgends border-radius - diese Regeln tragen in beiden
 * Modi identisch. rounded-full bleibt ausgeschlossen.
 * -------------------------------------------------------------------------- */
.rounded,
.rounded-md   { border-radius: 8px; }
.rounded-lg   { border-radius: 10px; }
.rounded-xl   { border-radius: 14px; }
.rounded-2xl  { border-radius: 16px; }
.rounded-3xl  { border-radius: 20px; }


/* --------------------------------------------------------------------------
 * 4. EIN KARTENKÖRPER FÜR ALLE KARTEN
 *
 * 55 Elemente tragen bg-white + border + border-gray-200. Davon sind 38
 * echte Karten und 17 etwas anderes: fünf Filterfelder, vier Knöpfe, die
 * runde Glocke, ihre Klappliste, das Support-Chat-Fenster, zwei
 * Vorschlagslisten, zwei Verwalter-Überlagerungen, ein Vorschaurahmen.
 *
 * Die saubere Unterscheidung ist ein p-*: alle 38 Karten haben eines, die
 * Nicht-Karten haben keines - außer der Klappliste (p-3) und dem
 * Dreipunktmenü (p-1), die beide zusätzlich absolute tragen.
 *
 * ACHTUNG, hier steckt eine Falle: [class*=" p-"] verlangt ein führendes
 * Leerzeichen. Bei sieben Karten steht p-6 bzw. p-4 GANZ VORN in der
 * Klassenliste - die hätte der Selektor verfehlt. Deshalb die zweite
 * Fassung mit [class^="p-"].
 *
 * Absichtlich KEIN Schatten: gpg-dark.css überschreibt .shadow-* mit
 * !important. Eine Schattenregel hier wäre hell einheitlich und dunkel
 * wieder sechsstufig.
 * -------------------------------------------------------------------------- */
/*
 * DRITTER ANLAUF, 1.3.9. Hier stand zuerst zusätzlich border-radius:16px,
 * um alle Karten auf eine Rundung zu bringen. Das ist wieder draußen, weil
 * die Zählung "55 Elemente, davon 38 Karten" nur für das RUHENDE Markup
 * galt. Alpine hängt zur Laufzeit Klassen an:
 *
 *   - Die rund 20 Auswahl-Kacheln des Garantieantrags bekommen im NICHT
 *     gewählten Zustand woertlich 'border-gray-200 bg-white' angehängt und
 *     tragen ohnehin p-3 - der Selektor griff also. Beim Anklicken tauscht
 *     Alpine auf 'border-[#00a49a] bg-[#00a49a]/10', der Selektor greift
 *     nicht mehr, und die Rundung fiel von 16 auf 10 Pixel. Die gewählte
 *     Kachel hatte sichtbar eckigere Ecken als ihre Nachbarn, und der
 *     Effekt wanderte beim Umwählen mit.
 *   - Das Dreipunkt-Menü und die Info-Klappe der Händlerliste sowie vier
 *     Kästen im Detailfenster wurden ebenfalls mitgenommen.
 *
 * Die Rundungsleiter aus Abschnitt 3 ordnet die Karten ohnehin schon auf
 * drei saubere Stufen (10/14/16) statt der früheren sechs. Das reicht, und
 * es überrascht nirgends.
 *
 * :not(label) schützt zusätzlich den Rahmen der Auswahl-Kacheln: Der
 * Kartenselektor wiegt (0,6,0) und schlug damit sowohl Tailwinds
 * hover:border-[#00a49a]/60 als auch die eigene Hover-Regel weiter unten -
 * beim Überfahren einer Kachel passierte gar nichts mehr. Eine echte Karte
 * geht dadurch nicht verloren: In den Vorlagen gibt es kein einziges
 * <label> mit bg-white.
 */
.bg-white.border.border-gray-200[class*=" p-"]:not(.absolute):not(.fixed):not(label),
.bg-white.border.border-gray-200[class^="p-"]:not(.absolute):not(.fixed):not(label) {
    border-color: #e7ecec;
}

/* Das Support-Chat-Fenster schwebt auf JEDER Seite und trägt dasselbe
   Muster. Es hat zwar kein p-*, fällt also ohnehin heraus - aber das ist
   Glück, nicht Absicht. Deshalb ausdrücklich. */
#gpg-support-chat .rounded-2xl,
.w-\[380px\].h-\[500px\] { border-radius: 16px; }


/* --------------------------------------------------------------------------
 * 5. SEITENLEISTE
 *
 * Fünf im Markup benutzte Klassen sind im gebauten Tailwind gar nicht
 * enthalten und wirken deshalb nicht: ring-1, ring-black/5,
 * hover:-translate-y-0.5, [&_svg]:mr-0 und border-b-2.
 *
 * Der sichtbare Schaden: Das Zeichen im 36px-Kästchen der Shop-Karte behält
 * sein mr-3 und sitzt 12px links aus der Mitte. In der Mobilleiste steht
 * jedes Zeichen 6px neben seiner Beschriftung. Und der aktive Punkt der
 * Mobilleiste hat gar keine Markierung.
 * -------------------------------------------------------------------------- */
aside nav.space-y-1 > a {
    font-size: .9375rem;
    padding: .5rem .75rem;
}
aside > div.bg-white  { padding-block: 1rem; }   /* Logo stieß oben an die Kante */
aside > div, aside > nav { margin-bottom: 1.15rem; }

/*
 * Die Seitenleiste bekommt einen eigenen Rollbalken - das ist gewollt.
 *
 * Ein Verwalter hat neun Menüpunkte; auf einem 759px hohen Fenster ragen
 * sie 163px über den unteren Rand hinaus. Vorher scrollte deshalb die ganze
 * Seite, der Inhalt lief also mit weg. Jetzt scrollt nur die Leiste.
 *
 * Der Balken muss dünn sein: In Standardbreite nimmt er 15 der 256 Pixel
 * weg, und dann bricht "Händlernr.: ..." im Nutzerkasten um. Mit 6px sind
 * es 246 statt 241 - das reicht. Live nachgemessen.
 */
aside {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
aside::-webkit-scrollbar       { width: 6px; }
aside::-webkit-scrollbar-track { background: transparent; }
aside::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 999px; }

/*
 * Die Menüleiste für schmale Fenster war unbenutzbar.
 *
 * Elf Punkte auf 741 Pixel: Die Beschriftungen berührten sich mit exakt 0
 * Pixel Abstand - "DashboardGarantienHändler..." als ein Wortband.
 * Nachgemessen, und zwar mit UND ohne diese Ebene: Der Fehler war schon
 * vorher da, justify-around hat bei elf Punkten schlicht nichts mehr zu
 * verteilen.
 *
 * Jetzt behält jeder Punkt seine natürliche Breite, und die Leiste lässt
 * sich seitwärts wischen. Der Rollbalken bleibt unsichtbar - auf einem
 * Handy wischt man ohnehin.
 */
nav.lg\:hidden {
    justify-content: flex-start;
    gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
nav.lg\:hidden::-webkit-scrollbar { display: none; }
nav.lg\:hidden > a { flex: 0 0 auto; padding-inline: .5rem; }

/* Ersatz für die nicht gebauten ring-* und hover:-translate-y-0.5 */
aside .space-y-2 > a {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .05);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
aside .space-y-2 > a:hover { transform: translateY(-2px); }

/* Ersatz für [&_svg]:mr-0 - NUR dort, wo das Zeichen zentriert stehen soll.
   Im senkrechten Menü braucht es sein mr-3 weiterhin. */
aside .space-y-2 svg,
nav.lg\:hidden svg { margin-right: 0; }

/* Ersatz für border-b-2: der aktive Punkt der Mobilleiste */
nav.lg\:hidden a[aria-current="page"] { box-shadow: inset 0 -2px 0 #fff; }


/* --------------------------------------------------------------------------
 * 6. TABELLENRHYTHMUS
 *
 * 39 Datenzellen und 39 Kopfzellen auf vier Seiten; bei 15 Einträgen je
 * Seite rund 500 sichtbare Zellen.
 *
 * Der Zeilenwechsel ging bisher gar nicht - odd: und even: fehlen im
 * gebauten Tailwind. Und 18 von 34 Spaltenköpfen zeigen einen Zeigefinger,
 * obwohl sie nicht sortieren; cursor-default fehlt ebenfalls.
 *
 * Der Ausschluss bg-amber ist zwingend: Die Händlerliste färbt geänderte
 * Zeilen bernstein, im Dashboard sind ALLE Zeilen bernstein. nth-child
 * schlägt eine einzelne Klasse.
 * -------------------------------------------------------------------------- */
.gpg-table-cell { padding: .6875rem 1rem; }

.gpg-table-head th {
    padding: .625rem 1rem;
    letter-spacing: .045em;
    font-weight: 600;
    cursor: default;
}
.gpg-table-head th[data-sort],
.gpg-table-head .gpg-sortknopf { cursor: pointer; }

.gpg-table tbody tr:nth-child(2n):not([class*="bg-amber"]) { background: #fafbfb; }
html[data-gpg-theme="dunkel"] .gpg-table tbody tr:nth-child(2n):not([class*="bg-amber"]) {
    background: rgba(255, 255, 255, .022);
}

/* Die Sortier-Dreiecke der Ticketliste haben den Umbau nie bekommen -
   .sort-icon steht nur in den beiden anderen Listen. */
.sort-icon { font-size: 10px; opacity: .75; }


/* --------------------------------------------------------------------------
 * 7. BLÄTTERUNG UND FILTERLEISTE AUF EINE LINIE
 *
 * Die auffälligste Bruchstelle im Portal: Die Blätter-Knöpfe tragen keine
 * Größenklasse und erben deshalb die 18-22px des Themes, während drei
 * Zentimeter darüber alle Filterelemente exakt 32px hoch sind. Es ist der
 * einzige Ort, an dem Ziffern in Überschriftengröße stehen.
 *
 * AUF KEINEN FALL background setzen: Die aktive Seitenzahl bekommt ihre
 * Farbe über Alpine (:class="p === page ? 'bg-[#00a49a] text-white' : ...").
 * Ein Kennungs-Selektor schlägt eine einfache Klasse - die Markierung der
 * aktuellen Seite verschwände.
 * -------------------------------------------------------------------------- */
#gpg-guarantee-pagination button,
#gpg-admin-pagination button {
    font-size: .875rem;
    min-width: 2rem;
    height: 2rem;
    padding-inline: .625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border-color: #d8dedd;
    line-height: 1;
}
#gpg-admin-pagination input[type="number"] {
    height: 2rem;
    border-radius: .5rem;
    border-color: #d8dedd;
}
/* Diese 13 Elemente tragen im dunklen Modus hellgraue Rahmen - gpg-dark.css
   kennt keine Regel für das nackte .border. */
html[data-gpg-theme="dunkel"] #gpg-guarantee-pagination button,
html[data-gpg-theme="dunkel"] #gpg-admin-pagination button,
html[data-gpg-theme="dunkel"] #gpg-admin-pagination input[type="number"] {
    border-color: rgba(255, 255, 255, .18);
}


/* --------------------------------------------------------------------------
 * 8. EINE ABZEICHENFORM FÜR ALLE STATUSANZEIGEN
 *
 * 33 Pillen in allen vier Bereichen. Weil das Garantie-Abzeichen in jeder
 * Tabellenzeile UND in jeder Handy-Karte steht, sind das bei 15 Einträgen
 * rund 30 sichtbare Abzeichen je Aufruf - aus neun verschiedenen
 * Polster/Gewicht-Kombinationen.
 *
 * KEIN padding-inline setzen: Der Selektor mischt reine Kennzeichen mit
 * zwei echten Knöpfen (die 40px hohen Support-Knöpfe im Dashboard).
 * :not(.border) nimmt die Abzeichen mit eigenem Rahmen heraus.
 * Die Farbpaare kommen aus PHP - eine Farbregel hier ginge ins Leere.
 * -------------------------------------------------------------------------- */
/*
 * padding-block:0 ist wieder draußen (1.3.9).
 *
 * Der Kommentar oben warnte davor, padding-inline zu setzen, weil in diesem
 * Selektor zwei echte Knöpfe stecken - und hat dann die SENKRECHTE
 * vergessen. padding-block:0 wiegt (0,4,0) und schlug das py-2 der beiden
 * Support-Knöpfe auf dem Dashboard: Aus 36 Pixel Höhe wurden 22. In der
 * gedrückten Pille füllte das 16-Pixel-Briefsymbol fast die ganze Höhe, und
 * auf dem Handy lag die Trefferfläche unter der 24-Pixel-Grenze.
 *
 * min-height:22px allein schadet keinem der beiden - es hebt nur an, es
 * drückt nicht. Die Abzeichen behalten ihr eigenes Polster.
 */
.inline-flex.items-center.rounded-full:not(.border) {
    min-height: 22px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
 * 9. DIE AUSWAHL SICHTBAR MACHEN
 *
 * Die 14 Schalter tragen text-[#00a49a] - das wirkt nur mit dem
 * Tailwind-forms-Zusatz, und accent-* ist im gebauten CSS nicht vorhanden.
 * Die Punkte erscheinen deshalb im Systemblau von Windows mitten in einer
 * türkisen Oberfläche.
 *
 * Die :has()-Regel behebt zugleich die schwerste Lücke des dunklen Modus:
 * bg-[#00a49a]/10 (20 Vorkommen) und die border-[#00a49a]-Familie (22
 * Vorkommen) haben in gpg-dark.css KEINE Regel - wer dunkel arbeitet, sieht
 * nicht, was er gewählt hat.
 *
 * :not(:has(input:disabled)) ist zwingend - sechs Kacheln sind gesperrt.
 * Und hier KEIN padding anfassen: Die Fahrzeugtyp-Kacheln tragen h-full,
 * neuer Innenabstand verzöge die ganze Rasterzeile.
 * -------------------------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
    accent-color: #00a49a;
    width: 1.05rem;
    height: 1.05rem;
}

label.p-3.rounded-lg.border:has(input:checked) {
    border-color: #00a49a;
    background: rgba(0, 164, 154, .08);
    box-shadow: inset 0 0 0 1px #00a49a;
}
label.p-3.rounded-lg.border:not(:has(input:disabled)):hover { border-color: #00a49a; }

/*
 * Im dunklen Modus mit !important - anders geht es hier nicht.
 *
 * Nachgemessen: Eine gewählte Garantie-Form war im Dunkeln praktisch nicht
 * mehr von den übrigen zu unterscheiden. Alpine hängt bei Auswahl
 * 'border-[#6ee7b7] bg-[#6ee7b7]/20' an, und gpg-dark.css überschreibt
 * genau diese beiden mit !important - übrig blieb eine Flächentönung von
 * 1,29 zu 1, also unterhalb dessen, was auf einem Notebook bei Tageslicht
 * noch auffällt. Der Händler konnte nicht mehr sagen, was ausgewählt ist.
 *
 * !important gegen !important ist unschön, aber die Alternative wäre, den
 * Auswahl-Zustand im Dunkeln unsichtbar zu lassen. Der Ring liegt zusätzlich
 * innen, damit er auch dann trägt, wenn die Rahmenfarbe überschrieben wird.
 */
html[data-gpg-theme="dunkel"] label.p-3.rounded-lg.border:has(input:checked) {
    border-color: #2ad8ce !important;
    background: rgba(42, 216, 206, .16) !important;
    box-shadow: inset 0 0 0 2px #2ad8ce !important;
}


/* --------------------------------------------------------------------------
 * 10. BESCHRIFTUNG UND FEHLERZEILE ALS PAAR
 *
 * Heute ist die Beschriftung 14px/500 in Grau-700, der Feldinhalt 16px in
 * Grau-800 - die Beschriftung ist also kleiner UND blasser als das, was sie
 * beschriftet. Und ihr Abstand zum Feld ist dreimal verschieden geregelt:
 * 0px im Profil, 4px im Antrag, 8px auf der Passwortseite.
 *
 * :not(:empty) ist nötig - eine Fehlerzeile im Antrag ist dauerhaft leer
 * und bekäme sonst dauerhaft Abstand.
 * -------------------------------------------------------------------------- */
label[for^="gpg-feld-"] {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: .01em;
    margin-bottom: .25rem;
}
html[data-gpg-theme="dunkel"] label[for^="gpg-feld-"] { color: #a4b3b2; }

label[for^="gpg-feld-"] > span.text-xs.text-gray-500 { font-weight: 500; opacity: .8; }

p.text-sm.font-medium.text-red-600:not(:empty) { margin-top: .375rem; }
/* Die drei Fehlerzeilen oben rechts im Abschnittskopf sind davon ausgenommen. */
.flex.items-start.justify-between > p.text-red-600 { margin-top: 0; }


/* --------------------------------------------------------------------------
 * 10b. DIE KNOPF-RANGFOLGE
 *
 * Die Bestandsaufnahme zaehlte 174 knopfartige Elemente in 106 verschiedenen
 * Klassenketten. Der Absendeknopf des Garantieantrags war flach, der
 * "Weiter"-Knopf daneben trug einen Verlauf - kein Betrachter konnte am
 * Aussehen ablesen, welcher Knopf der wichtige ist.
 *
 * Drei Stufen, als ZUSATZKLASSEN vergeben:
 *   gpg-knopf--haupt    die eine Haupthandlung der Seite (Petrol-Verlauf)
 *   gpg-knopf--neben    Begleiter: Zurueck, Abbrechen, Zuruecksetzen
 *   gpg-knopf--warnung  Gefaehrliches: Loeschen, Stornieren
 *
 * Die alten Klassen bleiben im Markup stehen. Dadurch gilt: Schalter aus =
 * exakt das alte Aussehen. Diese Regeln muessen deshalb kraeftig genug
 * sein, die alten Hintergruende zu ueberstimmen - daher die !important an
 * den Flaechen.
 * -------------------------------------------------------------------------- */
.gpg-knopf--haupt,
.gpg-knopf--neben,
.gpg-knopf--warnung {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.2;
    transition: filter .3s cubic-bezier(.32, .72, 0, 1), background-color .3s cubic-bezier(.32, .72, 0, 1);
}
.gpg-knopf--haupt {
    background: linear-gradient(135deg, #00857d, #00a49a) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(0, 96, 90, .6);
}
.gpg-knopf--haupt:hover { filter: brightness(1.07); }

.gpg-knopf--neben {
    background: #f3f6f6 !important;
    color: #374151 !important;
    border: 1px solid #d8dedd !important;
    box-shadow: none;
}
.gpg-knopf--neben:hover { background: #e9efee !important; }

.gpg-knopf--warnung {
    background: #fdf1f1 !important;
    color: #b91c1c !important;
    border: 1px solid #f3c1c1 !important;
}
.gpg-knopf--warnung:hover { background: #fbe4e4 !important; }

html[data-gpg-theme="dunkel"] .gpg-knopf--neben {
    background: #26343a !important;
    color: #cdd8d7 !important;
    border-color: rgba(255, 255, 255, .2) !important;
}
html[data-gpg-theme="dunkel"] .gpg-knopf--neben:hover { background: #2e3f46 !important; }
html[data-gpg-theme="dunkel"] .gpg-knopf--warnung {
    background: rgba(150, 36, 36, .18) !important;
    color: #ffb4b4 !important;
    border-color: rgba(240, 130, 130, .35) !important;
}


/* --------------------------------------------------------------------------
 * 11. KLASSEN, DIE IM MARKUP STEHEN, ABER NIE GEBAUT WURDEN
 *
 * Das sind keine Schönheitsfragen - diese Stellen sind heute schlicht
 * kaputt, weil die Klasse im fertigen Tailwind fehlt.
 * -------------------------------------------------------------------------- */

/* dashboard.php:289 - die zwei Support-Kennzahlen stapeln sich übereinander,
   weil grid-cols-2 ohne Vorsatz nicht gebaut ist (nur sm:, md:, lg:). */
.grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* dashboard.php:227 - max-h-[70vh] fehlt, das Neuigkeiten-Fenster wächst
   über den Bildschirm hinaus. */
#gpg-news-modal-content { max-height: 70vh; overflow-y: auto; }

/* Sechs Stellen kleben aneinander, weil die Zwischenstufen fehlen. */
.gap-0\.5 { gap: .125rem; }
.gap-1\.5 { gap: .375rem; }
.gap-2\.5 { gap: .625rem; }
.gap-y-1  { row-gap: .25rem; }

/* Einzelne fehlende Maße */
.p-1\.5   { padding: .375rem; }
.h-2\.5   { height: .625rem; }
.w-2\.5   { width: .625rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .375rem; }

/* Fünf Links ohne Unterstreichung beim Überfahren */
.hover\:underline:hover { text-decoration-line: underline; }

/* dashboard.php:337 - weißer Rahmen auf weißem Grund. Hell unsichtbar,
   dunkel plötzlich sichtbar, weil gpg-dark .border-white auf
   rgba(255,255,255,.15) setzt. */
.border.border-white.bg-white { border-color: transparent; }


/* --------------------------------------------------------------------------
 * 12. ZWEI LÜCKEN, DIE KEIN DESIGN SIND, SONDERN AUSFÄLLE
 * -------------------------------------------------------------------------- */

/* Zwischen 768 und 1023px zeigt das Portal WEDER die Seitenleiste NOCH den
   Nutzerstreifen - dort gibt es keinen Namen, keine Händlernummer und
   keinen Abmelde-Knopf. Tablet quer und kleines Notebook fallen genau in
   dieses Loch. */
@media (max-width: 1023px) {
    .mobile-userbox { display: flex !important; }
}

/* Der Flex-Aufbau für "beim Scrollen bleibt der Rahmen stehen" ist bereits
   richtig gebaut (min-h-0 an der Zeile, overflow-y-auto an main) - es fehlt
   nur die feste Höhe. */
.min-h-screen { height: 100dvh; }
@supports not (height: 100dvh) {
    .min-h-screen { height: 100vh; }
}