/*
 * Klickwerkzeug „Welches Land zahlt zuerst?“ (Shortcode [landZahltZuerst], resources/views/cms/shortcodes/land-zahlt-zuerst.blade.php).
 * Gilt in beiden Designs: Farben, Abstände und Radien aus public/css/tokens.css (mit Ersatzwerten), Bedienflächen mindestens 48 px.
 * Alle Regeln beginnen mit „.ee-lz[data-land-zahlt-zuerst]“, damit sie die allgemeinen Text-Regeln von Theme und Design v2 sicher
 * überstimmen (Aufbau wie public/css/geschwister-check.css).
 */
.ee-lz[data-land-zahlt-zuerst] {
    --lz-rot: var(--ee-rot, #bd3122);
    --lz-rot-dunkel: var(--ee-rot-dunkel, #a52719);
    --lz-linie: var(--c-linie, #e1e1e1);
    --lz-text-2: var(--ee-grau-800, #5c5c5c);
    --lz-fokus: var(--c-fokus, #191919);
    display: block;
    box-sizing: border-box;
    max-width: 42rem;
    margin: 1.5rem 0;
    padding: 1.25rem 1rem;
    background: #fff;
    border: 1px solid var(--lz-linie);
    border-top: 4px solid var(--lz-rot);
    border-radius: var(--radius, 12px);
    box-shadow: var(--schatten, 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06));
    color: var(--c-text, #191919);
    font-family: var(--font, "Open Sans", Arial, sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    scroll-margin-top: 96px;
}
@media (min-width: 600px) {
    .ee-lz[data-land-zahlt-zuerst] { padding: 1.5rem 1.75rem; }
}
.ee-lz[data-land-zahlt-zuerst] *, .ee-lz[data-land-zahlt-zuerst] *::before, .ee-lz[data-land-zahlt-zuerst] *::after { box-sizing: border-box; }
.ee-lz[data-land-zahlt-zuerst] [hidden] { display: none !important; }
.ee-lz[data-land-zahlt-zuerst] p { margin: 0 0 .75rem; }
.ee-lz[data-land-zahlt-zuerst] :is(p, li, label, legend, span, strong, small) { color: inherit; }
.ee-lz[data-land-zahlt-zuerst] a { color: var(--c-link, #bd3122); text-decoration: underline; }
.ee-lz[data-land-zahlt-zuerst] a:hover, .ee-lz[data-land-zahlt-zuerst] a:active { color: var(--c-link-hover, #661c0b) !important; }

.ee-lz[data-land-zahlt-zuerst] .ee-lz__name { margin: 0 0 .5rem; font-size: var(--fs-h3, 1.25rem); font-weight: 600; line-height: 1.25; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__einleitung { margin: 0 0 1.25rem; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__ohne-js { padding: .75rem 1rem; background: #fdf8e1; border: 1px solid #f1e3a6; border-radius: var(--radius-s, 8px); }

/* Fragen */
.ee-lz[data-land-zahlt-zuerst] .ee-lz__frage { min-width: 0; margin: 0; padding: 0; border: 0; }
.ee-lz[data-land-zahlt-zuerst] legend { display: block; width: auto; margin: 0 0 .5rem; padding: 0; border: 0; color: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__hilfe { margin: 0 0 .75rem; color: var(--lz-text-2); font-size: .9375rem; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__antwort { margin: 0 0 .5rem; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__wahl {
    display: flex; align-items: center; gap: .75rem; min-height: 48px; margin: 0; padding: .5rem .875rem;
    background: #fff; border: 1px solid var(--lz-linie); border-radius: var(--radius-s, 8px); font-weight: 400; font-size: 1rem; line-height: 1.4; cursor: pointer;
}
.ee-lz[data-land-zahlt-zuerst] .ee-lz__wahl:hover { border-color: var(--ee-grau-500, #a9a9a9); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__wahl:has(input:checked) { border-color: var(--lz-rot); background: #fdf3f2; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__wahl input[type="radio"] { display: block; flex: none; width: 22px; height: 22px; margin: 0; opacity: 1; position: static; accent-color: var(--lz-rot); }
/* Theme (bisheriges Design) blendet echte Auswahlknöpfe aus und zeichnet einen Kreis vor das folgende span – hier nicht */
.ee-lz[data-land-zahlt-zuerst] .ee-lz__wahl input[type="radio"] + span { display: block; margin: 0; padding: 0; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__wahl input[type="radio"] + span::before { content: none; display: none; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__hilfe-antwort { display: block; margin: .375rem 0 .25rem; padding: 0 .875rem; color: var(--lz-text-2); font-size: .875rem; line-height: 1.45; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__fehler { margin: .75rem 0 0; color: var(--lz-rot-dunkel); font-size: .9375rem; font-weight: 600; }

/* Knöpfe */
.ee-lz[data-land-zahlt-zuerst] .ee-lz__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__knopf {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: .75rem 1.5rem;
    color: #fff; background: var(--lz-rot); border: 2px solid var(--lz-rot); border-radius: var(--radius-pill, 999px);
    font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.ee-lz[data-land-zahlt-zuerst] .ee-lz__knopf:hover { background: var(--lz-rot-dunkel); border-color: var(--lz-rot-dunkel); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__knopf--zweit { color: var(--lz-rot-dunkel); background: #fff; border-color: var(--ee-grau-300, #d9d9d9); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__knopf--zweit:hover { color: #fff; }
@media (max-width: 479px) {
    .ee-lz[data-land-zahlt-zuerst] .ee-lz__knopf { width: 100%; }
}

/* Fokus (Tastatur) */
.ee-lz[data-land-zahlt-zuerst] :is(input, button, a):focus-visible { outline: var(--fokus-breite, 3px) solid var(--lz-fokus); outline-offset: var(--fokus-abstand, 2px); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__ergebnis:focus { outline: none; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__ergebnis:focus-visible { outline: 3px solid var(--lz-fokus); outline-offset: 3px; }

/* Ergebnis */
.ee-lz[data-land-zahlt-zuerst] .ee-lz__karte { padding: 1rem; background: #f7f7f7; border-left: 4px solid var(--lz-rot); border-radius: var(--radius-s, 8px); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__dachzeile { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lz-rot-dunkel); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__titel { font-size: 1.125rem; line-height: 1.35; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__zwischen { margin: 1rem 0 .375rem; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__tun { margin: 0 0 .75rem; padding-left: 1.25rem; list-style: disc; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__tun li { margin: 0 0 .375rem; padding: 0; list-style: disc; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__tun li::before { content: none; display: none; }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__fundstelle { color: var(--lz-text-2); }
.ee-lz[data-land-zahlt-zuerst] .ee-lz__hinweis { padding: .75rem 0 0; border-top: 1px solid var(--lz-linie); color: var(--lz-text-2); font-size: .9375rem; }