/* prepper.team/szenarien — Krisenstab-Übung für Gemeinden (ergänzt site.css) */

.sz .held { padding-bottom: 28px; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 800px) { .sz .held { grid-template-columns: 1fr; } .sz .held-bild { max-width: 520px; } }
.sz .held-text .ueber { text-align: left; }
.sz .held p.unter { max-width: 600px; }
.sz .band { padding-bottom: 28px; }

/* ── Lagewand-Vorschau (HTML-Attrappe, kein Screenshot) ── */
.lagewand { background: #0b0f15; border: 1px solid var(--rand); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgb(0 0 0 / .5); font-size: 12px; }
.lw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--rand); }
.lw-kopf b { font-size: 12.5px; }
.lw-uhr { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.lw-uhr span { color: var(--warn); font-weight: 700; }
.lw-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.lw-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rand); color: var(--fg-2); background: var(--bg-3); font-size: 11px; white-space: nowrap; }
.lw-chip.ok { border-color: rgb(53 192 122 / .5); color: var(--ok); }
.lw-chip.wartet { border-color: rgb(245 165 36 / .5); color: var(--warn); }
.lw-koerper { display: grid; grid-template-columns: 1.15fr .85fr; }
@media (max-width: 640px) { .lw-koerper { grid-template-columns: 1fr; } }
.lw-karte { position: relative; min-height: 250px; background:
  radial-gradient(260px 140px at 62% 45%, rgb(74 158 255 / .10), transparent 70%),
  repeating-linear-gradient(0deg, transparent 0 22px, rgb(255 255 255 / .025) 22px 23px),
  repeating-linear-gradient(90deg, transparent 0 22px, rgb(255 255 255 / .025) 22px 23px),
  #10161f; }
.lw-karte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lw-marker { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--rand); font-size: 12px; box-shadow: 0 2px 8px rgb(0 0 0 / .5); }
.lw-marker::after { content: ""; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--gefahr); border: 1px solid #0b0f15; }
.lw-marker.strom::after { background: var(--ok); }
.lw-marker.sos { background: rgb(240 75 75 / .2); border-color: var(--gefahr); animation: lwPuls 1.6s infinite; }
.lw-marker.sos::after { display: none; }
@keyframes lwPuls { 0%, 100% { box-shadow: 0 0 0 0 rgb(240 75 75 / .45); } 50% { box-shadow: 0 0 0 8px rgb(240 75 75 / 0); } }
.lw-fahrt { position: absolute; left: 34%; top: 60%; font-size: 13px; animation: lwFahrt 6s ease-in-out infinite; }
@keyframes lwFahrt { 0%, 15% { left: 34%; top: 60%; } 85%, 100% { left: 70%; top: 32%; } }
.lw-seite { border-left: 1px solid var(--rand); padding: 10px 12px; display: grid; gap: 9px; align-content: start; }
@media (max-width: 640px) { .lw-seite { border-left: 0; border-top: 1px solid var(--rand); } }
.lw-block .lw-ueber { font-weight: 700; margin-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 5px; }
.lw-zeile { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; color: var(--fg-2); }
.lw-balken { height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.lw-balken i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.lw-balken i.warn { background: var(--warn); }
.lw-balken i.gefahr { background: var(--gefahr); }
.lw-ereignis { border: 1px solid rgb(245 165 36 / .45); background: rgb(245 165 36 / .08); border-radius: 10px; padding: 7px 9px; color: var(--fg); }
.lw-ereignis small { display: block; color: var(--fg-2); margin-top: 2px; }
.lw-bedarf { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--rand); color: var(--fg-2); }
.lw-bedarf:last-child { border-bottom: 0; }
.lw-bedarf b { color: var(--gefahr); font-weight: 600; white-space: nowrap; }
.lw-hinweis { text-align: center; font-size: 12.5px; color: var(--fg-3); margin-top: 10px; }

/* ── Rollen ── */
.rollen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .rollen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rollen { grid-template-columns: 1fr; } }
.rollen .karte { padding: 18px; }
.rollen .karte .icon { width: 40px; height: 40px; font-size: 20px; margin-bottom: 10px; }
.rollen .karte h3 { font-size: 15.5px; }
.rollen .karte p { font-size: 13.2px; }

/* ── Ereignis-Zeitleiste ── */
.zeitleiste { position: relative; max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.zeit { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; }
.zeit .std { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--akzent); font-size: 13px; padding-top: 12px; text-align: right; }
.zeit .txt { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 14px; padding: 11px 15px; }
.zeit .txt b { display: block; font-size: 14.5px; }
.zeit .txt span { font-size: 13.2px; color: var(--fg-2); }
.zeit.verborgen .txt { border-style: dashed; }
.zeit.verborgen .txt b::after { content: " · nur wer sucht, findet es"; font-weight: 500; font-size: 12px; color: var(--warn); }
[data-lang="en"] .zeit.verborgen .txt b::after { content: " · only found by those who look"; }

/* ── Kennzahlen / Lernen ── */
.lernen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 800px) { .lernen { grid-template-columns: 1fr; } }
.lernen .karte { --tint: rgb(53 192 122 / .14); }

/* ── Ablauf: Schritte breiter ── */
.sz .schritte { max-width: 760px; }

/* ── Für wen ── */
.zielgruppen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 900px) { .zielgruppen { grid-template-columns: repeat(2, 1fr); } }
.zielgruppen .karte { padding: 16px; text-align: center; }
.zielgruppen .karte .icon { margin: 0 auto 10px; }
.zielgruppen .karte h3 { font-size: 15px; }
.zielgruppen .karte p { font-size: 12.8px; }

/* ── Angebot ── */
.angebot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .angebot { grid-template-columns: 1fr; } }
.angebot .karte { display: flex; flex-direction: column; }
.angebot .karte.hervor { border-color: rgb(74 158 255 / .6); box-shadow: 0 0 0 1px rgb(74 158 255 / .3), 0 16px 40px rgb(74 158 255 / .12); }
.angebot .tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); background: rgb(74 158 255 / .12); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.angebot .preis { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 2px 0 2px; }
.angebot .preis small { font-size: 13px; font-weight: 500; color: var(--fg-3); }
.angebot ul { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 7px; flex: 1; }
.angebot li { font-size: 13.6px; color: var(--fg-2); padding-left: 22px; position: relative; }
.angebot li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.angebot li.aus { color: var(--fg-3); }
.angebot li.aus::before { content: "–"; color: var(--fg-3); }
.angebot .knopf { justify-content: center; }

/* ── Datenschutz / Technik ── */
.technik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .technik { grid-template-columns: 1fr; } }
.technik ul { margin: 8px 0 0 18px; font-size: 13.8px; color: var(--fg-2); display: grid; gap: 5px; }
.technik li b { color: var(--fg); }

/* ── FAQ ── */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.faq details { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 14px; padding: 0 18px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 650; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 15px; font-size: 14px; color: var(--fg-2); }

/* ── Schluss-CTA ── */
.sz-schluss { text-align: center; background: linear-gradient(135deg, rgb(43 111 216 / .16), rgb(53 192 122 / .10)); border: 1px solid var(--rand); border-radius: 22px; padding: 38px 24px; }
.sz-schluss h2 { margin-bottom: 8px; }
.sz-schluss p { color: var(--fg-2); max-width: 620px; margin: 0 auto 20px; font-size: 15.5px; }
.sz-schluss .knoepfe { justify-content: center; }

.hinweis-amt { max-width: 760px; margin: 22px auto 0; font-size: 12.8px; color: var(--fg-3); text-align: center; line-height: 1.6; }

/* ── v2: Drei Szenarien ── */
.szenarien { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .szenarien { grid-template-columns: 1fr; } }
.szenarien .karte { display: flex; flex-direction: column; }
.szenarien .karte .icon { width: 48px; height: 48px; font-size: 24px; }
.szenarien .zahlen { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.szenarien .zahlen span { font-size: 12px; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--rand); border-radius: 999px; padding: 3px 10px; }
.szenarien .zahlen b { color: var(--fg); }
.szenarien ul { margin: 0 0 0 18px; font-size: 13.4px; color: var(--fg-2); display: grid; gap: 4px; }
.szenarien .karte.blackout { --tint: rgb(245 165 36 / .16); }
.szenarien .karte.hochwasser { --tint: rgb(74 158 255 / .18); }
.szenarien .karte.reaktor { --tint: rgb(53 192 122 / .16); }

/* ── v2: Übungsleitung / Echt ── */
.leitung { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .leitung { grid-template-columns: 1fr; } }
.leitung .karte { --tint: rgb(245 165 36 / .14); }
.einwurf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.einwurf-chips span { font-size: 12.5px; color: var(--fg-2); background: var(--bg-3); border: 1px dashed var(--rand); border-radius: 999px; padding: 4px 11px; }
.echt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .echt { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .echt { grid-template-columns: 1fr; } }
.echt .karte { padding: 18px; --tint: rgb(240 75 75 / .13); }
.echt .karte .icon { width: 40px; height: 40px; font-size: 20px; margin-bottom: 10px; }
.echt .karte h3 { font-size: 15.5px; }
.echt .karte p { font-size: 13.2px; }
.echt .karte q { font-style: italic; color: var(--fg); quotes: "„" "“"; }
[data-lang="en"] .echt .karte q { quotes: "“" "”"; }

/* ── v2: Lagezeile in der Attrappe ── */
.lw-lage { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--rand); font-size: 11.5px; color: var(--fg-2); background: rgb(255 255 255 / .02); }
.lw-lage b { color: var(--fg); font-weight: 600; }
.lw-lage .rot { color: var(--gefahr); }
.lw-lage .gruen { color: var(--ok); }