/* Öffentliches Preisrechner-Widget. Schlank, responsiv, iframe-tauglich (embed-Modus
   ohne .kopf/.huelle-Seiten-Chrome, siehe preisrechner.php). Nutzt die Marken-Tokens
   aus app.css (Verkehrsblau/Signalgelb, Oswald/IBM Plex Sans), das auf derselben Seite
   geladen wird. Nur Preisrechner-eigene Bausteine stehen hier. */

/* Die body.fk-embed-Regeln stehen seit dem 25.08.2026 in embed.css - sie gelten
   fuer BEIDE oeffentlichen Ansichten. PreisrechnerShortcode::assets() laedt sie. */

.pr-hero { padding-bottom: 1.1rem; }
.pr-huelle { padding-top: 1.5rem; }

.pr-widget {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    box-sizing: border-box;
    display: grid;
    gap: 1.1rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gr);
    box-shadow: var(--schatten);
    padding: 1.5rem;
}
.pr-widget * { box-sizing: border-box; }

/* Im embed=1-Modus füllt das Widget das iframe: kein Card-Rand/Schatten nötig,
   die einbettende Seite liefert den Rahmen. */
.pr-widget-embed {
    max-width: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    /* Leicht gestrafft gegenüber der Card-Ansicht: im iframe zählt jede vertikale
       Höhe, die einbettende Seite liefert ohnehin ihren eigenen Rand. */
    padding: .9rem;
    gap: .85rem;
}

/* Im Embed sitzt der Rechner immer auf der Web-Präsenz der Fahrschule selbst
   (eigene Homepage via Generator oder eigene Website via Einbettungs-Code) — der
   Fahrschulname wäre dort doppelt. Deshalb die Namenszeile im Embed ausblenden;
   der Direktaufruf (nicht-embed) behält sie zur Einordnung. */
.pr-widget-embed .pr-marke-name { display: none; }

.pr-marke-name {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .01em;
    color: var(--ink);
}

/* ================= Felder (Klasse / Regler) ================= */

.pr-feld { display: grid; gap: .5rem; }

.pr-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-weich);
}

.pr-label-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.pr-stunden-wert {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--blau);
    font-variant-numeric: tabular-nums;
}

.pr-select {
    /* Inhaltsbreit statt über die ganze Zeile: kurze Klassenkürzel (B, BE, A)
       sollen den Regler nicht unnötig lang machen. Deckel bei voller Breite. */
    width: auto;
    min-width: 8rem;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
    /* Mehr Zeilenhöhe + Mindesthöhe, damit der gewählte Buchstabe nicht klippt. */
    font: 500 1rem/1.4 var(--body);
    min-height: 2.9rem;
    color: var(--ink);
    background: var(--karte)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234A525E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E")
        no-repeat right .85rem center / 1rem;
    border: 1.5px solid var(--linie-satt);
    border-radius: var(--radius);
    padding: .6rem 2.4rem .6rem .9rem;
    cursor: pointer;
    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pr-select:hover { border-color: var(--blau); }
.pr-select:focus-visible {
    outline: none;
    border-color: var(--blau);
    box-shadow: 0 0 0 3px var(--blau-hell);
}

/* ================= Regler (Übungsstunden) ================= */

.pr-regler {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--blau) var(--pr-fuellstand, 40%), var(--linie) var(--pr-fuellstand, 40%));
    cursor: pointer;
}
.pr-regler::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--karte);
    border: 3px solid var(--blau);
    box-shadow: 0 1px 3px rgba(20,24,31,.25);
    cursor: pointer;
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.pr-regler::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pr-regler::-webkit-slider-thumb:active { transform: scale(0.97); }
.pr-regler::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--karte);
    border: 3px solid var(--blau);
    box-shadow: 0 1px 3px rgba(20,24,31,.25);
    cursor: pointer;
    transition: transform 160ms var(--ease-out);
}
.pr-regler::-moz-range-thumb:hover { transform: scale(1.12); }
.pr-regler::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}
.pr-regler:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; border-radius: 999px; }

/* ================= Kostenaufstellung ================= */

.pr-posten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.pr-posten-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    font-size: .92rem;
}
.pr-posten-label { color: var(--ink-weich); }
.pr-posten-betrag {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.pr-gesamt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding-top: .9rem;
    border-top: 2px solid var(--blau-hell);
}
.pr-gesamt-label {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pr-gesamt-betrag {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--blau-tief);
    font-variant-numeric: tabular-nums;
}

.pr-hinweis {
    margin: 0;
    font-size: .78rem;
    color: var(--ink-weich);
}

/* ================= CTA ================= */

.pr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--gelb);
    text-decoration: none;
    border-radius: 11px;
    padding: .85rem 1.5rem;
    box-shadow: 0 1px 2px rgba(20,24,31,.14), 0 10px 22px -6px rgba(200,142,0,.5);
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.pr-cta:hover { background: #ffbf14; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,24,31,.16), 0 16px 30px -8px rgba(200,142,0,.6); }
.pr-cta:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 2px rgba(20,24,31,.18); }
.pr-cta:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

/* ================= Leerzustand ================= */

.pr-leer { text-align: center; color: var(--ink-weich); font-size: .92rem; }

/* ================= Marken-Verweis ================= */

.pr-marke {
    margin: 0;
    padding-top: .8rem;
    border-top: 1px solid var(--linie);
    text-align: center;
    font-size: .72rem;
    color: var(--linie-satt);
}
.pr-marke a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pr-marke a:hover { color: var(--ink-weich); }
.pr-marke a:focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 380px) {
    .pr-widget { padding: 1.1rem; gap: .9rem; }
    .pr-gesamt-betrag { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-select, .pr-regler::-webkit-slider-thumb, .pr-regler::-moz-range-thumb, .pr-cta {
        transition: none;
    }
}