/*
 * Handgeschriebene Ergaenzungen zum vorkompilierten Portal-CSS.
 *
 * Schwerpunkt ist das Unterschriftsfeld, dazu kommen einzelne Klassen, die
 * Tailwind nicht mitbringt. Der Dateiname ist historisch - inhaltlich gehoert
 * hier alles hinein, was an mehreren Stellen gebraucht wird und im fertigen
 * CSS fehlt.
 *
 * Eigene Datei, weil das Feld an ZWEI Stellen vorkommt: im Garantieantrag und
 * im Haendlerprofil. Vorher standen die Regeln im Stilblock des Antrags - im
 * Profil fehlten sie damit vollstaendig. Die Folgen waren nicht kosmetisch:
 * ohne Hoehenangabe wurde die Flaeche riesig, ohne hellen Grund war der dunkle
 * Strich kaum zu sehen, und ohne touch-action scrollte das Tablet weg, statt
 * den Strich zu zeichnen.
 *
 * Die Klassen kommen im fertigen Portal-CSS nicht vor (Tailwind ist
 * vorkompiliert), deshalb sind sie hier von Hand geschrieben.
 *
 * @since 1.4.0
 */

.gpg-unterschrift-feld {
    position: relative;
    /* Weiss - auch im dunklen Modus. Man unterschreibt auf hellem Grund, und
       das Bild wandert unveraendert aufs Papier: Eine dunkle Flaeche haette
       dort einen schwarzen Kasten ergeben. */
    background: #ffffff;
    border: 1px solid #cfdcda;
    border-radius: 12px;
    height: 190px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(15, 34, 32, .06);
}

.gpg-unterschrift-flaeche {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    /* Wischen und Zoomen abschalten - sonst scrollt das Tablet beim
       Unterschreiben weg, statt den Strich zu zeichnen. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    /* Verhindert die blaue Auswahlmarkierung beim Wischen unter iOS. */
    -webkit-tap-highlight-color: transparent;
}

/* Die Linie, auf der unterschrieben wird - wie auf einem Formular. */
.gpg-unterschrift-linie {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 42px;
    border-bottom: 1px solid #d6e0df;
    pointer-events: none;
}

.gpg-unterschrift-hinweis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    font-size: 12px;
    color: #93a5a3;
    pointer-events: none;
}

/*
 * Im dunklen Modus bleibt die Flaeche hell, aber der Rahmen braucht mehr
 * Kontrast - sonst verschwindet der Kasten im Hintergrund und man sieht nicht,
 * wo man unterschreiben kann.
 */
[data-gpg-theme="dunkel"] .gpg-unterschrift-feld {
    border-color: #46605c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}

/* Auf kleinen Bildschirmen etwas flacher - sonst fuellt das Feld den halben
   Bildschirm und der Knopf darunter geraet ausser Sicht. */
@media (max-width: 640px) {
    .gpg-unterschrift-feld { height: 150px; }
    .gpg-unterschrift-linie { left: 18px; right: 18px; bottom: 36px; }
}


/*
 * Ein zurueckhaltender Knopf.
 *
 * Diese Klasse wurde benutzt, aber nie definiert - in keiner der vier
 * Stildateien. Tailwind nimmt <button> Hintergrund und Rahmen weg, also stand
 * an den Stellen nur blasser Text mitten im Absatz: "Ansehen" beim
 * Fahrzeugbestand, "Neu zeichnen" und "Verwerfen" im Profil. Der Zugang zum
 * Fahrzeugbestand war damit praktisch unsichtbar.
 *
 * Sie steht HIER und nicht in gpg-gestaltung.css: Jene Datei haengt am
 * Feature-Flag "design", das im Auslieferungszustand aus ist - der Knopf waere
 * dann wieder unsichtbar.
 */
.gpg-knopf-leise {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: die uebliche Mindestgroesse fuer Finger auf dem Tablet. */
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cfdcda;
    border-radius: 10px;
    background: #ffffff;
    color: #00776f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.gpg-knopf-leise:hover { background: #f2faf9; border-color: #a9c6c2; }
.gpg-knopf-leise:focus-visible {
    outline: 2px solid #00a49a;
    outline-offset: 2px;
}

[data-gpg-theme="dunkel"] .gpg-knopf-leise {
    background: #162326;
    border-color: #35474b;
    color: #4fd1c5;
}
[data-gpg-theme="dunkel"] .gpg-knopf-leise:hover {
    background: #1b2c30;
    border-color: #46605c;
}


/*
 * Die Unterschriftslinie im dunklen Modus.
 *
 * Sie war dort praktisch unsichtbar: Ein helles Grau auf weissem Grund geht in
 * einem abgedunkelten Fenster unter, und damit fehlte der einzige Anhaltspunkt,
 * WO unterschrieben werden soll.
 */
[data-gpg-theme="dunkel"] .gpg-unterschrift-linie {
    border-bottom-color: #b9c9c7;
}

/*
 * Die Datei-Auswahl im Profil.
 *
 * Am Markup standen sieben file:-Klassen - keine einzige davon existiert im
 * vorkompilierten Tailwind (nachgeprueft). Das Feld sah damit aus wie der
 * nackte Browser-Standard, mitten in einem sonst durchgestalteten Formular.
 */
.gpg-datei-feld {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #374151;
}
.gpg-datei-feld::file-selector-button {
    margin-right: 12px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: #e9f5f4;
    color: #00776f;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.gpg-datei-feld::file-selector-button:hover { background: #d9edeb; }

[data-gpg-theme="dunkel"] .gpg-datei-feld { color: #b9c6c5; }
[data-gpg-theme="dunkel"] .gpg-datei-feld::file-selector-button {
    background: #13302e;
    color: #4fd1c5;
}

/*
 * Genug Flaeche fuer den Finger.
 *
 * Ankreuzfelder sind 16 Pixel gross - am Tablet trifft man die nur mit Glueck.
 * Die Klasse vergroessert den anklickbaren Bereich der ganzen Zeile, ohne das
 * Aussehen zu veraendern.
 */
.gpg-tippziel {
    min-height: 44px;
    align-items: center;
}

/* Eine Zeile im Fahrzeugbestand: hoch genug fuer den Finger, mit sichtbarer
   Rueckmeldung beim Antippen - sonst weiss man nicht, ob der Tipp ankam. */
.gpg-fahrzeug {
    min-height: 56px;
    -webkit-tap-highlight-color: rgba(0, 164, 154, .15);
}
.gpg-fahrzeug:active { background: #e9f5f4; }
[data-gpg-theme="dunkel"] .gpg-fahrzeug:active { background: #16323099; }
.gpg-fahrzeug:focus-visible {
    outline: 2px solid #00a49a;
    outline-offset: -2px;
}


/* ===================================================================
 * Klassen, die im Markup benutzt, aber nie definiert wurden.
 *
 * Gefunden bei der Abschlusspruefung von 1.4.0 - die meisten stammen aus
 * frueheren Fassungen. Tailwind ist vorkompiliert; wer eine eigene Klasse
 * schreibt, ohne sie zu definieren, bekommt schlicht nichts. Die Elemente
 * standen deshalb unformatiert im Formular, ohne dass es jemandem auffiel.
 *
 * Sie stehen HIER und nicht in gpg-gestaltung.css: Jene Datei haengt am
 * Feature-Flag "design", das im Auslieferungszustand aus ist.
 * =================================================================== */

/* Die Einheit "km" im Eingabefeld, rechts neben der Zahl. */
.gpg-feld-mit-einheit { padding-right: 68px; }
.gpg-feld-einheit {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: #6b7280;
}
[data-gpg-theme="dunkel"] .gpg-feld-einheit { color: #8b9a99; }

/* Rueckmeldung waehrend des Tippens der Fahrgestellnummer. */
.gpg-vin-hinweis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}
.gpg-vin-hinweis__gut   { color: #047857; }
.gpg-vin-hinweis__offen { color: #6b7280; }
.gpg-vin-hinweis__warn  { color: #b45309; }
[data-gpg-theme="dunkel"] .gpg-vin-hinweis        { color: #8b9a99; }
[data-gpg-theme="dunkel"] .gpg-vin-hinweis__gut   { color: #34d399; }
[data-gpg-theme="dunkel"] .gpg-vin-hinweis__warn  { color: #fbbf24; }

/* Ein Feld, das aus der Fahrzeugdatenbank uebernommen wurde: gesperrt,
   aber entsperrbar. Die Markierung macht sichtbar, dass der Wert nicht
   vom Haendler stammt. */
.gpg-feld-uebernommen {
    background: #f3f7f6;
    color: #4b5563;
    cursor: default;
}
.gpg-uebernommen-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}
.gpg-uebernommen-knopf {
    border: 0;
    background: transparent;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 600;
    color: #00776f;
    text-decoration: underline;
    cursor: pointer;
}
.gpg-uebernommen-knopf:hover { color: #005f59; }
[data-gpg-theme="dunkel"] .gpg-feld-uebernommen  { background: #16232699; color: #b9c6c5; }
[data-gpg-theme="dunkel"] .gpg-uebernommen-zeile { color: #8b9a99; }
[data-gpg-theme="dunkel"] .gpg-uebernommen-knopf { color: #4fd1c5; }

/* Strasse breiter als Hausnummer - im vierspaltigen Adressraster. */
@media (min-width: 768px) {
    .gpg-adr-breit  { grid-column: span 3 / span 3; }
    .gpg-adr-schmal { grid-column: span 1 / span 1; }
}

/* Kurzes Aufblinken eines fehlenden Pflichtfelds, nachdem die Meldeliste
   dorthin gesprungen ist. */
.gpg-field-missing {
    animation: gpg-blinken 1.6s ease-out;
    border-color: #dc2626 !important;
}
@keyframes gpg-blinken {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    15%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, .28); }
    60%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
}

/* Der Knopf neben einem Feld - bisher nur in gpg-gestaltung.css, die im
   Auslieferungszustand gar nicht geladen wird. */
.gpg-knopf--neben {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 36px;
    border: 1px solid #cfdcda;
    border-radius: 10px;
    background: #ffffff;
    color: #00776f;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.gpg-knopf--neben:hover { background: #f2faf9; }
[data-gpg-theme="dunkel"] .gpg-knopf--neben {
    background: #162326; border-color: #35474b; color: #4fd1c5;
}

/* Zwei Tailwind-Klassen, die nicht mitkompiliert wurden. */
.gpg-hausfarbe { color: #00776f; }
[data-gpg-theme="dunkel"] .gpg-hausfarbe { color: #4fd1c5; }
.gpg-schrift-normal { font-weight: 400; }

/* --- Steuerliche Erläuterung zur Garantiezusage (seit 1.4.0) --------- */
/*
 * <details>/<summary> nativ, aber ohne das browsereigene Dreieck: Es sieht
 * in jedem Browser anders aus und passt zu keinem.
 */
.gpg-steuer {
    margin-top: 12px;
    border-top: 1px solid #eef1f1;
    padding-top: 10px;
}
.gpg-steuer__frage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #00776f;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.gpg-steuer__frage::-webkit-details-marker { display: none; }
.gpg-steuer__frage::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .18s;
}
.gpg-steuer[open] .gpg-steuer__frage::before { transform: rotate(90deg); }
.gpg-steuer__frage:hover { color: #005f59; }
.gpg-steuer__frage:focus-visible { outline: 2px solid #00a49a; outline-offset: 3px; border-radius: 3px; }

.gpg-steuer__inhalt {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafbfb;
    font-size: 13px;
    line-height: 1.55;
    color: #4b5563;
}
.gpg-steuer__inhalt p { margin: 0 0 9px; }
.gpg-steuer__inhalt p:last-child { margin-bottom: 0; }
.gpg-steuer__inhalt ul { margin: 0 0 9px; padding-left: 20px; }
.gpg-steuer__inhalt li { margin-bottom: 4px; }
.gpg-steuer__inhalt strong { color: #111827; }

.gpg-steuer__merkblatt {
    font-weight: 600;
    color: #00776f;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gpg-steuer__merkblatt:hover { color: #005f59; }

.gpg-steuer__vorbehalt {
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
}

html[data-gpg-theme="dunkel"] .gpg-steuer { border-top-color: #2f4746; }
html[data-gpg-theme="dunkel"] .gpg-steuer__frage,
html[data-gpg-theme="dunkel"] .gpg-steuer__merkblatt { color: #5eead4; }
html[data-gpg-theme="dunkel"] .gpg-steuer__inhalt {
    background: #111827;
    border-color: #374151;
    color: #c3d2d1;
}
html[data-gpg-theme="dunkel"] .gpg-steuer__inhalt strong { color: #f3f4f6; }
html[data-gpg-theme="dunkel"] .gpg-steuer__vorbehalt { border-top-color: #374151; color: #9ca3af; }

/* --- Ersatz für Tailwind-Klassen, die im fertigen CSS fehlen (1.4.0) --- */
/*
 * Wörtlich geprüft, jeweils 0 Treffer in assets/dist/css/tailwind.css:
 * h-2.5, w-2.5, bg-amber-200, hover:bg-amber-300, gap-1.5, pt-1, space-y-1.5.
 * Die Klassen wirken also nicht - was sie leisten sollten, steht hier.
 */
.gpg-fehlerpunkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: #ef4444;
}

.gpg-knopf-hinweis {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #d97706;
    border-radius: 6px;
    background: #fcd34d;
    color: #78350f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s;
}
.gpg-knopf-hinweis:hover { background: #fbbf24; }
.gpg-knopf-hinweis:focus-visible { outline: 2px solid #92400e; outline-offset: 2px; }

/* --- Hinweis im Abschluss-Schritt (seit 1.4.0) ----------------------- */
/*
 * Bernstein, nicht rot: Die Garantie IST angelegt und gültig. Rot würde
 * aussehen, als sei der ganze Vorgang gescheitert.
 */
.gpg-abschluss-hinweis {
    margin: 0 auto;
    max-width: 34rem;
    padding: 14px 18px;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    background: #fffbeb;
    text-align: left;
}
.gpg-abschluss-hinweis__titel {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
}
.gpg-abschluss-hinweis ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 13.5px;
    line-height: 1.5;
    color: #78350f;
}
.gpg-abschluss-hinweis li { margin-bottom: 4px; }
.gpg-abschluss-hinweis li:last-child { margin-bottom: 0; }

html[data-gpg-theme="dunkel"] .gpg-abschluss-hinweis {
    background: #422006;
    border-color: #92400e;
}
html[data-gpg-theme="dunkel"] .gpg-abschluss-hinweis__titel { color: #fde68a; }
html[data-gpg-theme="dunkel"] .gpg-abschluss-hinweis ul { color: #fcd34d; }

/* --- Die Wahl des Unterschriftswegs: zwei Karten (seit 1.4.0) -------- */
/*
 * Zwei gleich große, anklickbare Karten statt zweier Radiozeilen. Die
 * Radioknöpfe selbst sind unsichtbar, bleiben aber im Dokument und
 * fokussierbar: Tabulatortaste und Pfeiltasten funktionieren wie bei
 * jeder Radiogruppe, und Bildschirmvorleser lesen die Beschriftung vor.
 */
.gpg-uweg-wahl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .gpg-uweg-wahl { grid-template-columns: 1fr; }
}

.gpg-uweg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px 16px;
    border: 2px solid #d7dede;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.gpg-uweg:hover { border-color: #00a49a; }
.gpg-uweg:focus-within { outline: 2px solid #00776f; outline-offset: 2px; }

.gpg-uweg--gewaehlt {
    border-color: #00a49a;
    background: #f0fbfa;
    box-shadow: 0 4px 14px rgba(0, 164, 154, .16);
}
/* Haken oben rechts auf der gewählten Karte */
.gpg-uweg--gewaehlt::after {
    content: "\2713";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #00a49a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* Unsichtbar, aber fokussierbar - display:none nähme die Tastatur weg. */
.gpg-uweg-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gpg-uweg-marke {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #00a49a, #00d1c8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 164, 154, .35);
}

.gpg-uweg-bild {
    width: 96px;
    height: 56px;
    color: #00a49a;
}
.gpg-uweg--papier .gpg-uweg-bild { color: #93a3a2; }

.gpg-uweg-titel {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}
.gpg-uweg-text {
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    max-width: 24em;
}

html[data-gpg-theme="dunkel"] .gpg-uweg {
    background: #1f2937;
    border-color: #374151;
}
html[data-gpg-theme="dunkel"] .gpg-uweg--gewaehlt {
    border-color: #00a49a;
    background: #10201f;
}
html[data-gpg-theme="dunkel"] .gpg-uweg-titel { color: #f3f4f6; }
html[data-gpg-theme="dunkel"] .gpg-uweg-text { color: #9ca3af; }
html[data-gpg-theme="dunkel"] .gpg-uweg--papier .gpg-uweg-bild { color: #6b7280; }

/* --- Hinweis auf die hinterlegbare Händler-Unterschrift (seit 1.4.1) -- */
.gpg-hsig-tipp {
    margin: 4px 0 0;
    padding: 10px 14px;
    border: 1px solid #d7e5e4;
    border-radius: 10px;
    background: #f4fbfa;
    font-size: 12.5px;
    line-height: 1.55;
    color: #4b5563;
}
.gpg-hsig-tipp a {
    font-weight: 700;
    color: #00776f;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gpg-hsig-tipp a:hover { color: #005f59; }
html[data-gpg-theme="dunkel"] .gpg-hsig-tipp {
    background: #10201f;
    border-color: #2f4746;
    color: #c3d2d1;
}
html[data-gpg-theme="dunkel"] .gpg-hsig-tipp a { color: #5eead4; }

/* --- Der Ändern-Knopf im Detailfenster (seit 1.5.3) ----------------- */
/*
 * Vorher war das ein graues Stift-Sinnbild unmittelbar neben dem grauen
 * Schließen-Kreuz: gleiche Farbe, gleiche Form, gleiche Größe. Es wurde
 * für einen zweiten Schließen-Knopf gehalten und blieb ungenutzt, bis
 * jemand nach einer Änderungsmöglichkeit fragte, die längst da war.
 *
 * Die Hausfarbe steht hier von Hand, weil das vorkompilierte Tailwind
 * keine Hintergrundklasse dafür kennt und nicht neu gebaut werden kann.
 */
.gpg-detail-aendern {
    background: linear-gradient(90deg, #00a49a, #00d1c8);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
}
.gpg-detail-aendern:hover {
    filter: brightness(1.06);
    box-shadow: 0 2px 8px rgba(0, 164, 154, .35);
}
.gpg-detail-aendern:focus-visible {
    outline: 2px solid #00776f;
    outline-offset: 2px;
}
.gpg-detail-aendern svg { width: 1rem; height: 1rem; }
html[data-gpg-theme="dunkel"] .gpg-detail-aendern {
    background: linear-gradient(90deg, #0d8f86, #12b3aa);
}