/* Ads-Cockpit: Farben und Schrift wie website-renovierung.de */
@font-face { font-family: 'Archivo'; src: url('archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
    --anthrazit: #293133; --anthrazit-tief: #1f2527;
    --gelb: #f7b500; --gelb-kante: #b98700; --gelb-hauch: #fff3cc;
    --gruen: #008351; --gruen-hauch: #e3f3ea;
    --rot: #b3261e; --rot-hauch: #fbe9e7;
    --kalk: #f1f2ef; --weiss: #fff; --beton: #5b6468; --linie: #d4d8d5;
    --schrift: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: 16px; line-height: 1.5; color: var(--anthrazit); background: var(--kalk); }
h1, h2, p { margin: 0; }
h2 { font-size: 1.35rem; font-weight: 750; font-stretch: 92%; line-height: 1.2; }
a { color: inherit; }
.wrap { width: min(1100px, 100% - 2rem); margin: 0 auto; }
main.wrap { padding: 1.25rem 0 4rem; display: grid; gap: 1.25rem; }

/* Kopf */
.kopf { background: var(--anthrazit); color: var(--weiss); }
.kopf-zeile { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0; }
.kopf-stand { margin-left: auto; font-size: 0.85rem; color: #c4cbcd; }
.marke { display: flex; align-items: center; gap: 0.55rem; font-weight: 750; font-stretch: 92%; font-size: 1.1rem; }
.marke-zeichen { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--anthrazit-tief) 50%, var(--gelb) 50%); box-shadow: inset 0 0 0 1.5px var(--gelb); }
.kopf .knopf-leise { color: var(--weiss); border-color: #6b767b; }

/* Knöpfe */
.knopf { font: inherit; font-weight: 700; background: var(--gelb); color: var(--anthrazit); border: 0; border-bottom: 3px solid var(--gelb-kante); border-radius: 6px; padding: 0.7rem 1.2rem; cursor: pointer; }
.knopf-leise { font: inherit; font-size: 0.85rem; font-weight: 600; background: transparent; border: 1.5px solid var(--linie); border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; color: var(--anthrazit); }
.knopf:focus-visible, .knopf-leise:focus-visible, .stand:focus-visible, summary:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.karte { background: var(--weiss); border-radius: 10px; box-shadow: 0 1px 0 var(--linie); }
.anmelde-karte { width: min(360px, 100%); padding: 1.75rem; display: grid; gap: 0.75rem; }
.anmelde-karte h1 { font-size: 1.6rem; font-stretch: 92%; }
.anmelde-karte input { font: inherit; padding: 0.65rem 0.75rem; border: 2px solid var(--anthrazit); border-radius: 6px; }
.hinweis-fehler { color: var(--rot); font-weight: 600; font-size: 0.92rem; }

/* Ampel: Farbe + Zeichen + Text */
.ampel { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: 10px; background: var(--weiss); border-left: 6px solid var(--beton); }
.ampel-zeichen { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--weiss); background: var(--beton); }
.ampel-titel { font-weight: 750; font-stretch: 92%; font-size: 1.15rem; }
.ampel-satz { color: #3d4649; margin-top: 0.15rem; }
.ampel-gruen { border-color: var(--gruen); } .ampel-gruen .ampel-zeichen { background: var(--gruen); }
.ampel-gelb { border-color: var(--gelb); } .ampel-gelb .ampel-zeichen { background: var(--gelb); color: var(--anthrazit); }
.ampel-rot { border-color: var(--rot); } .ampel-rot .ampel-zeichen { background: var(--rot); }

/* Kennzahlen-Kacheln */
.kacheln { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 820px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel { background: var(--weiss); border-radius: 10px; padding: 1rem 1.1rem; }
.kachel-name { font-size: 0.88rem; font-weight: 600; color: var(--beton); }
.kachel-wert { font-size: 1.7rem; font-weight: 700; font-stretch: 92%; line-height: 1.2; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.kachel-wert small { font-size: 0.95rem; font-weight: 600; color: var(--beton); }
.kachel-gross .kachel-wert { font-size: 2.4rem; }
.kachel-abo { box-shadow: inset 0 0 0 2px var(--gelb); }
.kachel-zusatz { font-size: 0.85rem; color: var(--beton); margin-top: 0.2rem; }
.meter { height: 10px; border-radius: 5px; background: var(--gelb-hauch); margin-top: 0.5rem; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--gelb-kante); border-radius: 5px; }

/* Blöcke */
.block { background: var(--weiss); border-radius: 10px; padding: 1.25rem; display: grid; gap: 0.75rem; }
.block-text { color: var(--beton); max-width: 46rem; }
.leer { color: var(--beton); font-style: italic; }
.block-todo { box-shadow: inset 0 0 0 2px var(--gelb); }
.todo { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; font-weight: 560; }

/* Anfragen */
.anfragen { display: grid; gap: 0.75rem; }
.anfrage { border: 1.5px solid var(--linie); border-left-width: 6px; border-radius: 8px; padding: 0.85rem 1rem; display: grid; gap: 0.45rem; }
.anfrage.status-neu { border-left-color: var(--gelb); }
.anfrage.status-gebaut { border-left-color: var(--anthrazit); }
.anfrage.status-abo { border-left-color: var(--gruen); background: var(--gruen-hauch); }
.anfrage.status-abgesagt, .anfrage.status-ungeeignet { opacity: 0.75; }
.anfrage-kopf { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; justify-content: space-between; }
.anfrage-titel { font-weight: 700; font-size: 1.08rem; overflow-wrap: anywhere; }
.anfrage-meta, .anfrage-person { font-size: 0.9rem; color: var(--beton); overflow-wrap: anywhere; }
.stati { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.stand { font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.6rem; min-height: 2.1rem; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--weiss); cursor: pointer; color: var(--anthrazit); }
.stand[aria-pressed="true"] { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--weiss); }
.stand-abo[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); }
.stand-neu[aria-pressed="true"] { background: var(--gelb); border-color: var(--gelb-kante); color: var(--anthrazit); }
.anfrage-mehr summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--beton); }
.notiz { display: grid; gap: 0.35rem; margin-top: 0.5rem; justify-items: start; }
.notiz label { font-size: 0.85rem; font-weight: 600; }
.notiz textarea { font: inherit; width: 100%; padding: 0.5rem; border: 1.5px solid var(--linie); border-radius: 6px; }
.check { white-space: pre-wrap; font: 0.82rem/1.45 ui-monospace, Consolas, monospace; background: var(--kalk); padding: 0.6rem; border-radius: 6px; margin: 0.5rem 0 0; }

/* Trichter */
.trichter { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stufe { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--linie); }
.stufe-zahl { font-size: 1.6rem; font-weight: 700; font-stretch: 92%; text-align: right; font-variant-numeric: tabular-nums; }
.stufe-name { font-weight: 700; }
.stufe-erkl, .stufe-ziel { font-size: 0.88rem; color: var(--beton); }
.stufe-quote { font-weight: 650; font-size: 0.92rem; margin-top: 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.urteil-zeichen { width: 1.3rem; height: 1.3rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.78rem; font-weight: 800; color: var(--weiss); background: var(--beton); }
.urteil-gut .urteil-zeichen { background: var(--gruen); }
.urteil-schwach .urteil-zeichen { background: var(--rot); }
.urteil-schwach { color: var(--rot); }
.urteil-gut { color: var(--gruen); }

/* Motive */
.motive { display: grid; gap: 0.75rem; }
@media (min-width: 820px) { .motive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.motiv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; border: 1.5px solid var(--linie); border-radius: 8px; padding: 0.75rem; align-items: start; }
.motiv img { width: 96px; height: auto; border-radius: 4px; display: block; }
.motiv-pausiert, .motiv-aus { opacity: 0.6; }
.motiv-kopf { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.motiv-id { font-weight: 700; }
.motiv-status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 4px; background: var(--kalk); }
.motiv-live .motiv-status { background: var(--gruen-hauch); color: var(--gruen); }
.motiv-winkel { font-size: 0.88rem; color: var(--beton); }
.motiv-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem 0.75rem; margin: 0.5rem 0 0; }
.motiv-zahlen dt { font-size: 0.75rem; color: var(--beton); }
.motiv-zahlen dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.motiv-kommentar { font-size: 0.88rem; margin-top: 0.5rem; padding-left: 0.6rem; border-left: 3px solid var(--gelb); }

/* Säulen: eine Reihe, max. 24px breit, 4px runde Oberkante, Grundlinie unten */
.saeulen { display: flex; align-items: stretch; gap: 2px; height: 200px; padding-top: 1.2rem; overflow-x: auto; }
.saeule { flex: 1 0 14px; display: grid; grid-template-rows: 1fr auto; justify-items: center; }
.saeule-flaeche { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1.5px solid var(--anthrazit); }
.saeule-balken { display: block; width: min(24px, 100%); min-height: 2px; background: var(--anthrazit); border-radius: 4px 4px 0 0; }
.saeule:hover .saeule-balken { background: var(--gelb-kante); }
.saeule-anfragen { font-size: 0.75rem; font-weight: 700; line-height: 1; margin-bottom: 3px; color: var(--anthrazit); }
.saeule-tag { font-size: 0.68rem; color: var(--beton); padding-top: 0.2rem; }

.tabelle-auf summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--beton); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--linie); }
th:first-child, td:first-child { text-align: left; }

/* Logbuch */
.logbuch { list-style: none; margin: 0; padding: 0; display: grid; }
.log { padding: 0.75rem 0; border-top: 1px solid var(--linie); }
.log-kopf { font-size: 0.82rem; color: var(--beton); display: flex; gap: 0.6rem; }
.log-art { font-weight: 700; }
.log-massnahme .log-art, .log-motiv .log-art { color: var(--anthrazit); }
.log-text { margin-top: 0.15rem; white-space: pre-line; }

/* Begriffe */
.begriffe { display: grid; gap: 0.6rem; margin: 0; }
@media (min-width: 820px) { .begriffe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 2rem; } }
.begriffe dt { font-weight: 700; }
.begriffe dd { margin: 0; color: var(--beton); font-size: 0.92rem; }

@media (max-width: 480px) {
    .kopf-stand { display: none; }
    .kachel-gross .kachel-wert { font-size: 2rem; }
    .stufe { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; }
    .stufe-zahl { font-size: 1.3rem; }
    .motiv-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (forced-colors: active) { .saeule-balken, .meter span { background: CanvasText; } }
.demo-hinweis { background: var(--gelb-hauch); border: 2px dashed var(--gelb-kante); border-radius: 8px; padding: 0.7rem 1rem; font-weight: 600; font-size: 0.92rem; }

.reserve summary { cursor: pointer; font-weight: 650; color: var(--beton); margin-bottom: 0.6rem; }
.loeschen { display: grid; gap: 0.45rem; justify-items: start; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--linie); font-size: 0.85rem; }
.loeschen label { display: flex; gap: 0.45rem; align-items: flex-start; }
.loeschen input[type="checkbox"] { margin-top: 0.2rem; }
.knopf-loeschen { font: inherit; font-size: 0.85rem; font-weight: 650; background: var(--weiss); color: var(--rot); border: 1.5px solid var(--rot); border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; }
.knopf-loeschen:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.hinweis-ok { background: var(--gruen-hauch); border-radius: 6px; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.92rem; }