/* ============================================================
   ardda Abschleppdienst – eigenes Design (Präfix as-)
   Ruhig und professionell: Anthrazit + Signal-Gelb
   ============================================================ */
:root {
    --as-bg: #f4f5f7;
    --as-surface: #ffffff;
    --as-ink: #16181d;
    --as-ink-2: #4a505c;
    --as-muted: #7a8190;
    --as-line: #e3e6eb;
    --as-side: #15171c;
    --as-side-ink: #c9ced8;
    --as-accent: #f5b400;
    --as-accent-ink: #1b1600;
    --as-ok: #1f8a4c;
    --as-err: #c0362c;
    --as-radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.as-body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--as-bg);
    color: var(--as-ink);
    font-size: 15px;
    line-height: 1.5;
}
a { color: inherit; }

.as-app { display: flex; min-height: 100vh; }

/* --- Seitenleiste --- */
.as-side {
    width: 248px; flex: 0 0 248px;
    background: var(--as-side); color: var(--as-side-ink);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.as-brand { display: block; padding: 22px 22px 14px; text-decoration: none; }
.as-brand-mark { display: block; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.as-brand-sub { display: inline-block; margin-top: 4px; background: var(--as-accent); color: var(--as-accent-ink);
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 4px; }
.as-firma { display: flex; align-items: center; gap: 10px; padding: 10px 22px 18px; border-bottom: 1px solid #262a33;
    font-size: 13px; color: #fff; font-weight: 600; }
.as-firma img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 6px; }
.as-nav { display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; flex: 1; }
.as-nav a { text-decoration: none; padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.as-nav a:hover { background: #20242c; color: #fff; }
.as-nav a.is-active { background: var(--as-accent); color: var(--as-accent-ink); }
.as-side-foot { padding: 14px 22px 22px; border-top: 1px solid #262a33; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.as-side-foot a { text-decoration: none; }
.as-side-foot a:hover { color: #fff; }

/* --- Hauptbereich --- */
.as-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-top { display: flex; align-items: center; gap: 14px; padding: 18px 32px; background: var(--as-surface); border-bottom: 1px solid var(--as-line); }
.as-top h1 { margin: 0; font-size: 20px; font-weight: 800; flex: 1; }
.as-burger { display: none; border: 1px solid var(--as-line); background: #fff; border-radius: 8px; padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.as-probe { text-decoration: none; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #fff6d6; color: #6b4e00; }
.as-probe.is-knapp { background: #fde2df; color: var(--as-err); }
.as-content { padding: 28px 32px 60px; max-width: 1100px; width: 100%; }

.as-flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; }
.as-flash-ok { background: #e3f4ea; color: var(--as-ok); }
.as-flash-error { background: #fde2df; color: var(--as-err); }

.as-card { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 22px 24px; margin-bottom: 18px; }
.as-card h3 { margin: 0 0 12px; font-size: 17px; }
.as-card h4 { margin: 20px 0 10px; font-size: 14px; color: var(--as-ink-2); }
.as-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a7000; }
.as-muted { color: var(--as-muted); font-size: 14px; }

.as-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
    background: var(--as-side); color: #fff; border-radius: var(--as-radius); padding: 26px 28px; margin-bottom: 18px; }
.as-hero h2 { margin: 0 0 6px; font-size: 26px; }
.as-hero p { margin: 0; color: var(--as-side-ink); }
.as-hero .as-eyebrow { color: var(--as-accent); }
.as-hero-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.as-hero .as-muted { color: var(--as-side-ink); }
.as-pill { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: #2a2f39; }
.as-pill.is-on { background: var(--as-accent); color: var(--as-accent-ink); }

.as-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.as-kpi { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 16px 18px; }
.as-kpi span { display: block; font-size: 13px; color: var(--as-muted); font-weight: 600; }
.as-kpi strong { font-size: 28px; font-weight: 800; }

.as-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.as-steps a { font-weight: 600; }
.as-steps li.is-done a { color: var(--as-ok); text-decoration: line-through; }

/* --- Formulare --- */
.as-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.as-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--as-ink-2); grid-column: span 2; }
.as-grid label.as-span2 { grid-column: span 2; }
.as-grid input { font: inherit; font-weight: 500; color: var(--as-ink); padding: 11px 12px; border: 1px solid var(--as-line); border-radius: 8px; background: #fff; }
.as-grid input:focus { outline: 2px solid var(--as-accent); border-color: var(--as-accent); }
.as-grid label.as-check { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--as-ink); }
.as-check input { width: 18px; height: 18px; }

.as-arten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.as-art { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--as-line); border-radius: 10px; padding: 12px; cursor: pointer; }
.as-art input { margin-top: 3px; width: 18px; height: 18px; }
.as-art strong { display: block; font-size: 14px; }
.as-art small { color: var(--as-muted); font-size: 12.5px; }

.as-actions { display: flex; align-items: center; gap: 18px; margin: 4px 0 22px; }
.as-btn { display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 800; text-decoration: none;
    background: var(--as-accent); color: var(--as-accent-ink); padding: 12px 22px; border-radius: 10px; }
.as-btn:hover { filter: brightness(.95); }
.as-btn:disabled { background: #e3e6eb; color: var(--as-muted); cursor: not-allowed; }
.as-btn-ghost { background: #fff; border: 1px solid var(--as-line); color: var(--as-ink); }
.as-link { color: var(--as-ink-2); font-weight: 600; }

.as-logo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.as-logo { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--as-line); border-radius: 10px; background: #fff; }
.as-logo-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.as-bald { text-align: left; }
.as-bald h2 { margin: 0 0 8px; }

/* --- Abo --- */
.as-pakete { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 14px; }
.as-paket { position: relative; background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 24px; }
.as-paket.is-empfohlen { border: 2px solid var(--as-accent); }
.as-paket h3 { margin: 0 0 6px; }
.as-paket ul { padding-left: 18px; margin: 12px 0 20px; color: var(--as-ink-2); }
.as-preis strong { font-size: 32px; font-weight: 800; }
.as-paket-badge { position: absolute; top: -12px; right: 18px; background: var(--as-accent); color: var(--as-accent-ink);
    font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }

/* --- Mobil --- */
@media (max-width: 900px) {
    .as-side { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
    .as-side.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .as-burger { display: inline-block; }
    .as-top { padding: 14px 16px; }
    .as-content { padding: 18px 16px 50px; }
    .as-kpis { grid-template-columns: repeat(2, 1fr); }
    .as-grid { grid-template-columns: 1fr; }
    .as-grid label, .as-grid label.as-span2 { grid-column: auto; }
    .as-arten, .as-pakete { grid-template-columns: 1fr; }
    .as-hero-status { align-items: flex-start; }
}

/* --- Phase 2: Listen, Tabellen, Formulare --- */
.as-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.as-toolbar .as-muted { margin: 0; }
.as-suche input { font: inherit; padding: 10px 14px; border: 1px solid var(--as-line); border-radius: 10px; min-width: 280px; background: #fff; }
.as-hinweis { background: #fffaf0; border-color: #f3dfae; color: #5b4400; font-size: 14px; }
.as-leer p { margin: 0 0 6px; }

.as-grid select, .as-grid textarea { font: inherit; font-weight: 500; color: var(--as-ink); padding: 11px 12px; border: 1px solid var(--as-line); border-radius: 8px; background: #fff; }
.as-grid textarea { resize: vertical; }
.as-grid label.as-full { grid-column: 1 / -1; }

.as-table-card { padding: 0; overflow-x: auto; }
.as-card-kopf { padding: 18px 22px 0; }
.as-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.as-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--as-muted); font-weight: 700; padding: 14px 16px; border-bottom: 1px solid var(--as-line); white-space: nowrap; }
.as-table td { padding: 12px 16px; border-bottom: 1px solid var(--as-line); vertical-align: middle; }
.as-table tr:last-child td { border-bottom: 0; }
.as-table td small { display: block; color: var(--as-muted); font-size: 12.5px; }
.as-table tr.is-inaktiv td { opacity: .5; }
.as-table td.is-rot { color: var(--as-err); font-weight: 700; }
.as-table td.is-gelb { color: #9a6700; font-weight: 700; }
.as-td-aktion { white-space: nowrap; text-align: right; }
.as-td-aktion a, .as-td-aktion button { font: inherit; font-size: 13px; font-weight: 700; color: var(--as-ink-2); background: none; border: 0; cursor: pointer; padding: 4px 6px; text-decoration: underline; }
.as-td-aktion form { display: inline; }
.as-r { text-align: right; }
.as-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.as-status, .as-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef0f3; color: var(--as-ink-2); white-space: nowrap; }
.as-status-frei, .as-status-f-bereit { background: #e3f4ea; color: var(--as-ok); }
.as-status-im_einsatz, .as-status-f-im_einsatz { background: #fff3cc; color: #7a5a00; }
.as-status-werkstatt, .as-status-f-pause, .as-status-f-bereitschaft { background: #e8eefc; color: #2b4ea2; }
.as-status-ausser_dienst { background: #fde2df; color: var(--as-err); }
.as-tag-polizei { background: #e2ebfb; color: #1d4b99; }
.as-tag-versicherung, .as-tag-schutzbrief { background: #efe6fb; color: #5b2a9e; }
.as-tag-werkstatt { background: #e6f5f3; color: #11695d; }
.as-tag-behoerde, .as-tag-hausverwaltung { background: #f1efe9; color: #5c5446; }

.as-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.as-chips a { text-decoration: none; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--as-line); color: var(--as-ink-2); }
.as-chips a span { color: var(--as-muted); font-weight: 600; margin-left: 4px; }
.as-chips a.is-active { background: var(--as-side); color: #fff; border-color: var(--as-side); }
.as-chips a.is-active span { color: var(--as-accent); }

.as-inline { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.as-inline:hover { border-color: var(--as-line); }
.as-inline:focus { border-color: var(--as-accent); outline: 2px solid var(--as-accent); background: #fff; }
.as-preis-feld { display: inline-flex; align-items: center; gap: 6px; }
.as-zahl { width: 110px; text-align: right; font-weight: 700; border-color: var(--as-line); background: #fff; }
.as-preis-tabelle th:first-child, .as-preis-tabelle td:first-child { width: 60px; text-align: center; }
.as-preis-tabelle input[type=checkbox] { width: 18px; height: 18px; }
.as-sticky { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--as-bg) 30%); padding: 18px 0 12px; margin: 0; }

@media (max-width: 900px) {
    .as-suche, .as-suche input { width: 100%; min-width: 0; }
    .as-td-aktion { text-align: left; }
}

/* --- Posteingang --- */
.as-postfach { list-style: none; margin: 0; padding: 0; }
.as-postfach li { border-bottom: 1px solid var(--as-line); }
.as-postfach li:last-child { border-bottom: 0; }
.as-postfach a { display: grid; grid-template-columns: 220px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; }
.as-postfach a:hover { background: #fafbfc; }
.as-postfach li.is-neu .as-pf-name, .as-postfach li.is-neu .as-pf-text { font-weight: 800; color: var(--as-ink); }
.as-pf-name { font-weight: 700; }
.as-pf-text { color: var(--as-ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-pf-zeit { color: var(--as-muted); font-size: 13px; }
.as-badge { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--as-accent); color: var(--as-accent-ink); font-size: 12px; font-weight: 800; text-align: center; }
.as-nav a .as-badge { margin-left: 6px; }
.as-chat { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.as-msg { max-width: 75%; background: #f1f3f6; border-radius: 12px; padding: 10px 14px; align-self: flex-start; }
.as-msg.is-ich { background: #fff3cc; align-self: flex-end; }
.as-msg p { margin: 0 0 4px; white-space: pre-wrap; }
.as-msg small { color: var(--as-muted); font-size: 12px; }
.as-msg img { max-width: 260px; border-radius: 8px; display: block; margin-bottom: 6px; }
.as-antwort textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--as-line); border-radius: 10px; resize: vertical; }
.as-antwort .as-actions { justify-content: space-between; margin: 12px 0 0; }
@media (max-width: 900px) {
    .as-postfach a { grid-template-columns: 1fr auto; }
    .as-pf-text { grid-column: 1 / -1; grid-row: 2; }
    .as-msg { max-width: 90%; }
}

/* --- Öffentliches Profil /abschlepp/:id (Präfix asp-) --- */
.asp { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #16181d; background: #f4f5f7; padding-bottom: 50px; }
.asp-hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; background: #15171c; }
.asp-hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.asp-hero-inhalt { position: relative; max-width: 960px; width: 100%; margin: 0 auto; padding: 60px 16px 36px; color: #fff; }
.asp-logo { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px; margin-bottom: 14px; }
.asp-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f5b400; }
.asp-hero h1 { margin: 0 0 14px; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
.asp-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.asp-badge { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.14); }
.asp-badge.is-247 { background: #f5b400; color: #1b1600; }
.asp-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.asp-btn { display: inline-block; text-decoration: none; font-weight: 800; padding: 14px 22px; border-radius: 12px; font-size: 16px; }
.asp-btn-notruf { background: #f5b400; color: #1b1600; }
.asp-btn-hell { background: #fff; color: #16181d; }
.asp-inhalt { max-width: 960px; margin: 24px auto 0; padding: 0 16px; display: grid; gap: 16px; }
.asp-karte { background: #fff; border: 1px solid #e3e6eb; border-radius: 14px; padding: 22px 24px; }
.asp-karte h2 { margin: 0 0 14px; font-size: 20px; }
.asp-arten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.asp-arten li { border: 1px solid #e3e6eb; border-radius: 10px; padding: 12px 14px; }
.asp-arten strong { display: block; }
.asp-arten span { color: #7a8190; font-size: 14px; }
.asp-text { white-space: pre-wrap; margin: 0; line-height: 1.7; }
.asp-kontakt { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0 0 16px; }
.asp-kontakt dt { color: #7a8190; font-weight: 700; }
.asp-kontakt dd { margin: 0; }
.asp-hinweis { background: #fffaf0; border: 1px solid #f3dfae; color: #5b4400; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 0; }
@media (max-width: 700px) {
    .asp-arten { grid-template-columns: 1fr; }
    .asp-kontakt { grid-template-columns: 1fr; }
    .asp-btn { width: 100%; text-align: center; }
}

/* --- Phase 3: Einsätze, Disposition --- */
.as-mt { margin-top: 14px; }
.as-klein { font-size: 12.5px; }
.as-btn-klein { padding: 8px 14px; font-size: 13px; }
.as-btn.is-aktiv { background: #1f8a4c; color: #fff; border-color: #1f8a4c; }
.as-st { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.as-st-rot { background: #fde2df; color: #b42318; }
.as-st-gelb { background: #fff3cc; color: #7a5a00; }
.as-st-blau { background: #e2ebfb; color: #1d4b99; }
.as-st-gruen { background: #e3f4ea; color: #1f8a4c; }
.as-st-grau { background: #eef0f3; color: #4a505c; }
.as-st-gross { font-size: 13px; padding: 5px 12px; }
.as-klickbar tbody tr { cursor: pointer; }
.as-klickbar tbody tr:hover td { background: #fafbfc; }
.as-kurz { max-width: 260px; }

.as-arten-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.as-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.as-wahl span { display: inline-block; padding: 10px 14px; border: 1px solid var(--as-line); border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; background: #fff; }
.as-wahl input:checked + span { background: var(--as-side); color: #fff; border-color: var(--as-side); }
.as-wahl input:focus-visible + span { outline: 2px solid var(--as-accent); }
.as-teil { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--as-line); }
.as-ja-nein { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; grid-column: span 2; }
.as-ja-nein legend { font-size: 13px; font-weight: 700; color: var(--as-ink-2); margin-bottom: 4px; }
.as-ja-nein label { display: flex; gap: 8px; align-items: center; }
.as-ort { position: relative; }
.as-vorschlag { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: #fff; border: 1px solid var(--as-line); border-radius: 10px; box-shadow: 0 16px 36px -16px rgba(0,0,0,.35); overflow: hidden; }
.as-vorschlag div { padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 500; }
.as-vorschlag div:hover { background: #fff8e1; }
.as-karte { height: 320px; border-radius: 10px; border: 1px solid var(--as-line); margin-top: 12px; z-index: 0; }
.as-karte-gross { height: 420px; margin: 0 0 16px; }
.as-pin { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45); }
.as-pin-gelb { background: #f5b400; } .as-pin-gruen { background: #1f8a4c; } .as-pin-rot { background: #d92d20; }
.as-pin-blau { background: #2563eb; } .as-pin-dunkel { background: #15171c; }
.as-kalk td { padding: 8px 4px; }
.as-kalk small { display: block; color: var(--as-muted); }
.as-kalk-summe td { font-weight: 800; border-top: 2px solid var(--as-ink); }
.as-summe { font-size: 18px; margin: 10px 0 4px; }

.as-einsatz-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.as-einsatz-kopf > div:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.as-einsatz-art { font-size: 18px; }
.as-zwei { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.as-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.as-dl dt { color: var(--as-muted); font-weight: 700; }
.as-dl dd { margin: 0; }
.as-warnung { background: #fde2df; color: #b42318; border-radius: 8px; padding: 10px 12px; font-weight: 700; margin: 12px 0 0; }
.as-text { white-space: pre-wrap; margin: 0; }
.as-stack { display: flex; flex-direction: column; gap: 10px; }
.as-stack select, .as-stack input { font: inherit; padding: 10px 12px; border: 1px solid var(--as-line); border-radius: 8px; background: #fff; }
.as-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.as-fotos a { text-decoration: none; }
.as-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.as-fotos span { font-size: 11.5px; color: var(--as-muted); }
.as-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.as-verlauf div { margin-top: 3px; color: var(--as-ink-2); }

.as-dispo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.as-dispo-block h3 { margin-bottom: 10px; }
.as-dispo-karte { display: block; border: 1px solid var(--as-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; text-decoration: none; color: inherit; background: #fff; }
a.as-dispo-karte:hover { border-color: var(--as-accent); }
.as-dispo-karte.is-offen { border-left: 4px solid #d92d20; }
.as-dispo-karte p { margin: 6px 0 0; font-size: 14px; }
.as-dk-kopf { display: flex; gap: 8px; align-items: center; text-decoration: none; color: inherit; }
.as-dk-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.as-dk-form select { font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--as-line); border-radius: 8px; flex: 1; min-width: 120px; }
.as-ressourcen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.as-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: #b5bac4; }
.as-punkt-bereit, .as-punkt-fz-frei { background: #1f8a4c; }
.as-punkt-im_einsatz, .as-punkt-fz-im_einsatz { background: #f5b400; }
.as-punkt-pause, .as-punkt-bereitschaft, .as-punkt-fz-werkstatt { background: #2563eb; }
.as-punkt-fz-ausser_dienst { background: #d92d20; }

@media (max-width: 1000px) {
    .as-zwei, .as-dispo { grid-template-columns: 1fr; }
    .as-ja-nein { grid-column: auto; }
    .as-dl { grid-template-columns: 1fr; }
    .as-dl dt { margin-top: 6px; }
}
a.as-kpi { text-decoration: none; color: inherit; }
a.as-kpi:hover { border-color: var(--as-accent); }
.as-kpi.is-alarm { border-color: #d92d20; background: #fff6f5; }
.as-kpi.is-alarm strong { color: #b42318; }
.as-h { margin: 0; font-size: 17px; }
.as-side-foot a.is-aktiv { color: var(--as-accent); font-weight: 700; }
.as-kopf-aktion { display: flex; gap: 8px; flex-wrap: wrap; }
.as-schaeden { margin: 0; padding-left: 20px; font-size: 14px; }
.as-sigs { display: flex; gap: 14px; flex-wrap: wrap; }
.as-sigs figure { margin: 0; }
.as-sigs img { height: 80px; max-width: 220px; border: 1px solid var(--as-line); border-radius: 8px; background: #fff; display: block; }
.as-sigs figcaption { font-size: 12.5px; color: var(--as-muted); margin-top: 4px; }
/* Sofort-Alarm (Zentrale) */
.as-alarm-balken { background: #b42318; color: #fff; }
.as-alarm-balken a { display: block; padding: 12px 32px; color: #fff; text-decoration: none; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.2); }
.as-alarm-balken a:hover { background: #912018; }
.as-alarm-status { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
.as-alarm-status li { padding: 6px 10px; border-radius: 8px; background: #eef0f3; color: var(--as-muted); font-weight: 600; }
.as-alarm-status li.is-an { background: #e3f4ea; color: var(--as-ok); }
.as-alarm-status li.is-rot { background: #fde2df; color: var(--as-err); }
.as-alarm-mini { font-size: 12.5px; font-weight: 700; color: #7a5a00; margin-top: 6px !important; }
.as-alarm-mini.is-rot { color: var(--as-err); }
.as-push-knopf { font: inherit; font-size: 12.5px; text-align: left; background: #20242c; color: var(--as-accent); border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.as-push-knopf:disabled { color: #7ec79b; cursor: default; }
@media (max-width: 900px) { .as-alarm-balken a { padding: 12px 16px; } }
/* Rechnungen */
.as-pos-tabelle td { padding: 6px 8px; }
.as-pos-tabelle .as-zahl { width: 100px; }
.as-einheit { width: 110px; }
.as-x { font: inherit; font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--as-line); background: #fff; color: var(--as-err); cursor: pointer; }
.as-pos-tabelle tfoot select { font: inherit; padding: 8px 10px; border: 1px solid var(--as-line); border-radius: 8px; margin-right: 8px; max-width: 100%; }
.as-bezug { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--as-ink-2); }
.as-datev { display: flex; gap: 8px; align-items: center; }
.as-datev input { font: inherit; padding: 9px 10px; border: 1px solid var(--as-line); border-radius: 8px; }
.as-grid label small { font-weight: 500; }
.as-btn-puls { box-shadow: 0 0 0 4px rgba(245,180,0,.35); }
/* Personal */
.as-urlaub-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--as-line); flex-wrap: wrap; font-size: 14px; }
.as-urlaub-zeile small { display: block; color: var(--as-muted); }
.as-urlaub-liste { margin: 14px 0 0; padding-left: 18px; font-size: 14px; }
.as-urlaub-liste .as-link, .as-zeile-form .as-link { background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.as-zeile-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 8px 0; }
.as-zeile-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--as-ink-2); }
.as-zeile-form input { font: inherit; padding: 8px 10px; border: 1px solid var(--as-line); border-radius: 8px; }
.as-zeile-form .as-grow { flex: 1; min-width: 200px; }
.as-notiz-zeile td { padding-top: 0 !important; border-top: 0 !important; }
/* Verwahrplatz */
.as-kpi-klein { font-size: 17px !important; }
.as-sig-flaeche { display: block; width: 100%; height: 170px; border: 2px solid var(--as-ink); border-radius: 10px; background: #fff; touch-action: none; }
.as-zeile2 { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.as-zeile2 input { font: inherit; padding: 10px 12px; border: 1px solid var(--as-line); border-radius: 8px; }
details.as-card summary { cursor: pointer; }
/* Auswertungen: eine Reihe je Diagramm, Balken mit 4px-Rundung oben, 2px Abstand */
.as-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 8px; border-bottom: 1px solid var(--as-line); }
.as-chart-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.as-chart-col:hover { background: rgba(21,23,28,.04); }
.as-chart-bar { display: block; width: 100%; max-width: 28px; margin: 0 auto; background: #2a5bd7; border-radius: 4px 4px 0 0; }
.as-chart-col:hover .as-chart-bar { background: #1c47b3; }
.as-chart-col:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--as-side); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 8px; border-radius: 6px; z-index: 5; pointer-events: none; }
.as-chart-achse { display: flex; justify-content: space-between; font-size: 12px; color: var(--as-muted); margin-top: 6px; }
.as-hbar { display: grid; grid-template-columns: 170px 1fr 40px; gap: 10px; align-items: center; font-size: 14px; padding: 5px 0; }
.as-hbar small { grid-column: 3; color: var(--as-muted); display: none; }
.as-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-hbar-spur { height: 10px; background: #eef0f3; border-radius: 0 4px 4px 0; overflow: hidden; }
.as-hbar-spur span { display: block; height: 100%; background: #2a5bd7; border-radius: 0 4px 4px 0; }
.as-hbar strong { text-align: right; }
@media (prefers-color-scheme: dark) { .as-chart-bar, .as-hbar-spur span { background: #2a5bd7; } }
@media (max-width: 700px) { .as-hbar { grid-template-columns: 110px 1fr 36px; } }
.as-card.is-blass { opacity: .6; }
.as-beleg-mini { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
/* Öffentliche Anfrage */
.asp-anfrage { max-width: 640px; }
.asp-anfrage h1 { margin: 0 0 14px; font-size: 26px; }
.asp-anfrage h2 { font-size: 17px; margin: 22px 0 10px; }
.asp-eyebrow-dunkel { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a7000; }
.asp-voll { display: block; width: 100%; text-align: center; margin: 10px 0; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.asp-btn-dunkel { background: #15171c; color: #fff; }
.asp-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: #4a505c; margin-top: 12px; }
.asp-form input, .asp-form select, .asp-form textarea { font: inherit; font-size: 16px; font-weight: 500; color: #16181d; padding: 12px; border: 2px solid #e3e6eb; border-radius: 10px; background: #fff; }
.asp-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.asp-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asp-wahl label { margin: 0; }
.asp-wahl input { position: absolute; opacity: 0; }
.asp-wahl span { display: flex; align-items: center; min-height: 52px; padding: 10px 12px; border: 2px solid #e3e6eb; border-radius: 10px; font-weight: 700; color: #16181d; }
.asp-wahl input:checked + span { background: #15171c; color: #fff; border-color: #15171c; }
.asp-wahl input:focus-visible + span { outline: 2px solid #f5b400; }
.asp-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; }
.asp-check input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.asp-klein { font-size: 13px; color: #7a8190; margin: 6px 0 0; }
.asp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.asp-danke h1 { font-size: 28px; }
@media (max-width: 600px) { .asp-zwei, .asp-wahl { grid-template-columns: 1fr; } }
/* Abo-Buchung */
label.as-paket { cursor: pointer; display: block; }
.as-paket-wahl { position: absolute; top: 18px; left: 18px; width: 20px; height: 20px; }
label.as-paket h3 { padding-left: 30px; }
label.as-paket:has(.as-paket-wahl:checked) { border: 2px solid var(--as-side); box-shadow: 0 0 0 3px rgba(245,180,0,.35); }
.as-preis small { font-size: 13px; color: var(--as-muted); }
.as-lesemodus { display: block; background: #fde2df; color: #b42318; font-weight: 800; padding: 10px 32px; text-decoration: none; }
.as-check a { text-decoration: underline; }
/* Werbeseite */
.asw-hero { min-height: 480px; }
.asw-hero h1 { font-size: clamp(30px, 5.5vw, 52px); max-width: 780px; }
.asw-lead { font-size: 18px; max-width: 640px; color: #e6e8ec; margin: 0 0 22px; }
.asw-inhalt { max-width: 1080px; }
.asw-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.asw-raster h2 { font-size: 18px; margin: 0 0 8px; }
.asw-raster p { margin: 0; color: #4a505c; line-height: 1.6; }
.asw-schritte ol { padding-left: 20px; line-height: 1.8; }
.asw-faq { border-top: 1px solid #e3e6eb; padding: 12px 0; }
.asw-faq summary { font-weight: 700; cursor: pointer; }
.asw-faq p { color: #4a505c; margin: 8px 0 0; }
@media (max-width: 900px) { .asw-raster { grid-template-columns: 1fr; } }
/* Kalender */
.as-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.as-tag { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 10px; min-height: 180px; }
.as-tag.is-heute { border: 2px solid var(--as-accent); }
.as-tag h3 { font-size: 14px; margin: 0 0 8px; }
.as-kal-eintrag { display: block; text-decoration: none; border: 1px solid var(--as-line); border-left: 4px solid #2a5bd7; border-radius: 8px; padding: 7px 8px; margin-bottom: 8px; font-size: 13px; }
.as-kal-eintrag.as-kal-geplant { border-left-color: var(--as-accent); }
.as-kal-eintrag strong, .as-kal-eintrag span, .as-kal-eintrag small { display: block; }
.as-kal-eintrag small { color: var(--as-muted); }
.as-kal-eintrag .as-st { display: inline-block; margin-top: 4px; }
@media (max-width: 1100px) { .as-woche { grid-template-columns: 1fr; } .as-tag { min-height: 0; } }