/*
 * Bußgeldrechner – Seitenstil (nur auf bussgeldrechner.php geladen).
 * Optik an die Startseite angelehnt (weiche Karten-Schatten, gelbe CTA #FFF200).
 * Responsiv bis 320 px (rules.md § 9).
 */

.bgr_wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 4px;
    text-align: center;
}

.bgr_label {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin: 0 0 10px;
}

.bgr_intro {
    font-size: 0.98em;
    color: #555;
    line-height: 1.7;
    margin: 0 0 10px;
}

.bgr_lang_note {
    font-size: 0.85em;
    color: #8a8a8a;
    margin: 0 0 22px;
}

/* ---- Rechner-Container ---- */
#bgr {
    margin: 0 auto;
    min-height: 160px;
}

.bgr_card {
    background: linear-gradient(135deg, #ffffff 0%, #fdfdfc 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    box-shadow: 8px 8px 20px rgba(190, 185, 175, 0.35), -8px -8px 20px rgba(255, 255, 255, 0.9);
    padding: 28px 26px;
    text-align: left;
}

.bgr_frage_text {
    font-size: 1.2em;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 6px;
}

.bgr_frage_hinweis {
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    margin: 0 0 18px;
}

/* ---- Auswahl-Optionen ---- */
.bgr_optionen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.bgr_option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    min-height: 48px;
    padding: 13px 18px;
    border: 2px solid #ececec;
    border-radius: 12px;
    background: #fafafa;
    color: #1a1a1a;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.bgr_option:hover {
    border-color: #FFF200;
    background: #fffde6;
    transform: translateY(-1px);
}

.bgr_option:active { transform: translateY(0); }
.bgr_option:focus-visible { outline: 3px solid #ffe000; outline-offset: 2px; }

/* ---- Zahl-/Text-Eingabe ---- */
.bgr_eingabe_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.bgr_input {
    flex: 1 1 160px;
    min-width: 0;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px;
    border: 2px solid #ececec;
    border-radius: 12px;
    font-size: 1.05em;
    background: #fff;
    color: #1a1a1a;
}

.bgr_input:focus { outline: none; border-color: #FFF200; }
.bgr_input_fehler { border-color: #DB4437; background: #fdf0ef; }
.bgr_einheit { color: #555; font-weight: 600; }

/* ---- Knöpfe ---- */
.bgr_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
    padding: 12px 26px;
    border: none;
    border-radius: 999px;
    background: #FFF200;
    color: #1a1a1a;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.bgr_btn:hover { transform: translateY(-2px); background: #ffe000; }
.bgr_btn:active { transform: translateY(0); }
.bgr_btn:focus-visible { outline: 3px solid #ffe000; outline-offset: 2px; }

.bgr_btn_secondary {
    background: #f0f0f0;
    color: #333;
    text-transform: none;
    font-weight: 700;
    box-shadow: none;
    border: 1px solid #e0e0e0;
}
.bgr_btn_secondary:hover { background: #e8e8e8; }

.bgr_restart_row { margin-top: 20px; text-align: center; }

/* ---- Laden / Fehler ---- */
.bgr_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #666;
    padding: 40px 10px;
    font-size: 1em;
}

.bgr_spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #eee;
    border-top-color: #FFF200;
    border-radius: 50%;
    animation: bgr_spin 0.8s linear infinite;
}

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

.bgr_error {
    background: #fdf0ef;
    border: 1px solid #f3c9c5;
    border-radius: 16px;
    padding: 24px;
    color: #a3271e;
    text-align: center;
}
.bgr_error p { margin: 0 0 16px; }

/* ---- Ergebnis ---- */
.bgr_ergebnis { border-top: 4px solid #FFF200; }

.bgr_res_label {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin: 0 0 6px;
}

.bgr_res_tatbestand {
    font-size: 1.25em;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
    margin: 0 0 18px;
}

.bgr_facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 20px;
}

.bgr_fact {
    flex: 1 1 120px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
}

.bgr_fact_wert { display: block; font-size: 1.35em; font-weight: 800; color: #1a1a1a; line-height: 1.2; }
.bgr_fact_label { display: block; font-size: 0.8em; color: #8a8a8a; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

.bgr_fact_haupt { background: #fffde6; border-color: #ffe98a; }
.bgr_fact_haupt .bgr_fact_wert { color: #7a5b00; }

.bgr_res_details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 18px;
    margin: 0 0 18px;
    font-size: 0.95em;
}
.bgr_res_details dt { color: #777; }
.bgr_res_details dd { margin: 0; color: #222; font-weight: 600; }

.bgr_res_sub { font-weight: 700; color: #333; margin: 16px 0 6px; }

.bgr_res_liste { margin: 0 0 8px; padding-left: 20px; color: #444; line-height: 1.6; }
.bgr_res_liste li { margin-bottom: 4px; }
.bgr_res_hinweise { color: #666; font-size: 0.92em; }

/* ---- Pflicht-Hinweis (API) ---- */
.bgr_api_hinweis {
    margin: 16px 0 0;
    font-size: 0.82em;
    color: #8a8a8a;
    line-height: 1.6;
    text-align: center;
}

/* ---- Dauerhafter Pflicht-Hinweis (statisch auf der Seite) ---- */
.bgr_pflicht {
    margin: 26px 0 0;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 0.85em;
    color: #7a5b00;
    line-height: 1.6;
    text-align: left;
}

/* ---- Fortschrittsbalken + Schrittzähler ---- */
.bgr_progress { margin: 0 0 18px; text-align: left; }
.bgr_progress_label { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #7a5b00; margin-bottom: 6px; }
.bgr_progress_track { height: 8px; background: #ececec; border-radius: 999px; overflow: hidden; }
.bgr_progress_fill { height: 100%; width: 0; background: #FFF200; border-radius: 999px; transition: width 0.35s ease; }

/* ---- Übersicht der bisherigen Antworten ---- */
.bgr_summary { margin: 0 0 18px; background: #faf9f5; border: 1px solid #ececec; border-radius: 14px; padding: 12px 16px; text-align: left; }
.bgr_summary_title { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 6px; }
.bgr_summary_row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #efeee9; }
.bgr_summary_row:first-of-type { border-top: none; }
/* Icon zur Antwort (gleiche Quellen wie die Auswahl-Boxen). Feste Größe mit
   !important gegen die globale Regel ".article_1_row img{width:100%}". */
.bgr_summary_icon { flex: 0 0 auto; height: 26px !important; width: auto !important; max-width: 44px; object-fit: contain; border-radius: 0 !important; display: block; }
.bgr_summary_text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bgr_summary_frage { font-size: 0.8em; color: #888; line-height: 1.35; }
.bgr_summary_antwort { font-weight: 700; color: #222; line-height: 1.35; overflow-wrap: anywhere; }
.bgr_summary_edit { flex: 0 0 auto; min-height: 36px; background: #fff; border: 1px solid #e0d9b0; color: #7a5b00; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 0.85em; cursor: pointer; transition: background 0.2s ease; }
.bgr_summary_edit:hover { background: #fffde6; }
.bgr_summary_edit:focus-visible { outline: 3px solid #ffe000; outline-offset: 2px; }

/* zuvor gewählte Option beim Zurückspringen hervorheben */
.bgr_option_active { border-color: #FFF200; background: #fffde6; }

/* Zurück-Zeile unter den Eingaben */
.bgr_nav_row { margin-top: 16px; }

/* ---- Verkehrszeichen IN der Options-Box (Bild + Klartext, mit Sternchen) ---- */
/* Der Options-Text; bei Schildern steht die Übersicht direkt darunter im SELBEN Kasten. */
.bgr_option_text { display: block; }
.bgr_option_mit_zeichen { padding-bottom: 12px; }

/* Kopfzeile einer Option: optionales Icon (Ortstafel, Fahrzeug …) + Text nebeneinander. */
.bgr_option_head { display: flex; align-items: center; }
.bgr_option_head .bgr_option_text { flex: 1 1 auto; min-width: 0; }
/* height/width mit !important gegen die globale Regel ".article_1_row img{width:100%}". */
.bgr_option_icon { flex: 0 0 auto; height: 30px !important; width: auto !important; max-width: 56px; object-fit: contain; border-radius: 0 !important; margin-right: 14px; display: block; }

/* Hochgestelltes Sternchen hinter einer Zeichen-Nennung im Text (Verweis nach unten). */
.bgr_zeichen_stern { color: #b8860b; font-weight: 800; font-size: 0.8em; margin-left: 1px; }

/* Schild-Übersicht: Fußnoten-Zeilen „* [Bild] Zeichen NNN – Name". */
.bgr_zeichen_legende {
    display: flex; flex-direction: column; gap: 10px;
    margin: 12px 0 0; padding: 12px 14px;
    background: #ffffff; border: 1px solid #ececec; border-radius: 10px;
}
.bgr_option_mit_zeichen .bgr_zeichen_legende { background: #fffdf5; border-color: #efe6c4; }
.bgr_option:hover .bgr_zeichen_legende { border-color: #ffe082; }
.bgr_zeichen_item { display: flex; align-items: center; gap: 10px; text-align: left; }
.bgr_zeichen_stern_zeile { flex: 0 0 auto; align-self: flex-start; color: #b8860b; font-weight: 800; line-height: 1.2; }
/* height/width mit !important, um die globale Regel ".article_1_row img{width:100%}" (start.css) zu überstimmen */
.bgr_zeichen_img { height: 42px !important; width: auto !important; max-width: 120px; flex: 0 0 auto; border-radius: 0 !important; display: block; }
.bgr_zeichen_name { flex: 1 1 auto; min-width: 0; font-size: 0.9em; font-weight: 500; color: #444; line-height: 1.35; overflow-wrap: anywhere; }
.bgr_zeichen_ergebnis { margin-top: 12px; }

/* ---- Kategorie-Baum (Startauswahl) ---- */
.bgr_baum { margin-top: 18px; }
.bgr_baum_nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bgr_baum_pfad { font-size: 0.9em; font-weight: 700; color: #7a5b00; }
.bgr_baum_grid { display: flex; flex-direction: column; gap: 12px; }
.bgr_baum_leaf, .bgr_baum_zweig {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    text-align: left; min-height: 52px; padding: 14px 18px;
    border: 2px solid #ececec; border-radius: 12px; background: #fafafa;
    color: #1a1a1a; font-size: 1.02em; font-weight: 700; cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.bgr_baum_leaf:hover, .bgr_baum_zweig:hover { border-color: #FFF200; background: #fffde6; transform: translateY(-1px); }
.bgr_baum_leaf:active, .bgr_baum_zweig:active { transform: translateY(0); }
.bgr_baum_leaf:focus-visible, .bgr_baum_zweig:focus-visible { outline: 3px solid #ffe000; outline-offset: 2px; }
/* Zweige (führen tiefer) optisch leicht abgesetzt + Pfeil rechts. */
.bgr_baum_zweig { background: #fffdf0; border-color: #f0e6c0; }
.bgr_baum_zweig:hover { background: #fffbe0; }
.bgr_baum_zweig_label { flex: 1 1 auto; }
.bgr_baum_pfeil { flex: 0 0 auto; margin-left: 10px; font-size: 1.4em; line-height: 1; color: #b8860b; }
/* Icon vor der Kachel (StVO-Schild oder eigenes SVG). !important schlägt die globale
   Regel ".article_1_row img{width:100%}" (start.css), sonst wird das Icon breitgezogen. */
.bgr_baum_icon { flex: 0 0 auto; width: 30px !important; height: 30px !important; object-fit: contain; border-radius: 0 !important; margin-right: 14px; display: block; }
.bgr_baum_leaf_text { flex: 1 1 auto; min-width: 0; }
@media screen and (max-width: 360px) {
    .bgr_baum_icon { width: 26px !important; height: 26px !important; margin-right: 11px; }
}

/* ---- Responsiv (rules.md § 9) ---- */
@media screen and (max-width: 650px) {
    .bgr_card { padding: 22px 18px; border-radius: 16px; }
    .bgr_frage_text { font-size: 1.1em; }
    .bgr_res_tatbestand { font-size: 1.12em; }
    .bgr_facts { gap: 10px; }
    .bgr_fact { flex: 1 1 100%; }
}

@media screen and (max-width: 360px) {
    .bgr_card { padding: 18px 14px; }
    .bgr_btn { width: 100%; }
    .bgr_eingabe_row { flex-direction: column; align-items: stretch; }
    /* In der Spalten-Anordnung darf die 160px-Basis NICHT zur Höhe werden
       (sonst wird das Zahlenfeld unnötig hoch) – Höhe wieder inhaltsbasiert. */
    .bgr_eingabe_row .bgr_input { flex: 0 0 auto; width: 100%; }
    .bgr_eingabe_row .bgr_btn { width: 100%; }
    .bgr_res_details { grid-template-columns: 1fr; gap: 2px; }
    .bgr_res_details dt { margin-top: 8px; }
    .bgr_summary_row { flex-wrap: wrap; }
    .bgr_summary_edit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bgr_option, .bgr_btn { transition: none; }
    .bgr_spinner { animation-duration: 1.6s; }
}