/* ==========================================================================
   Tools-Bereich – ergänzt stil.css. Gleiche Farben, gleiche Knöpfe.
   ========================================================================== */

/* --- Rahmen ---------------------------------------------------------------- */

.werkzeug { padding-block: 1.6rem clamp(3rem, 8vw, 5rem); }
.werkzeug--breit { width: min(100% - 2.5rem, 90rem); }

.werkzeug__titel { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: 0.4rem; }
.werkzeug__zusatz { max-width: var(--lesebreite); color: var(--tusche-hell); margin-bottom: 1.8rem; }

.pfad {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-bottom: 1.4rem; font-size: 0.9rem; color: var(--tusche-hell);
}
.pfad > * + *::before { content: "›"; padding-right: 0.5rem; color: #b6bfcc; }
.pfad a { color: var(--tusche-hell); }
.pfad a:hover { color: var(--stempel); }
.pfad span { color: var(--tusche); }

.kopf__konto { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem; padding-left: 0.6rem; border-left: 1px solid var(--linie); }
.abmelden { display: inline; margin: 0; }
.abmelden button { font-family: inherit; line-height: inherit; background: none; border: 0; cursor: pointer; }

/* --- Hinweise, Kennzahlen, Tabellen ---------------------------------------- */

.hinweis {
  max-width: var(--lesebreite); margin: 0 0 1.4rem; padding: 0.8rem 1rem;
  border-radius: var(--rundung-klein); background: var(--stempel-hell); color: var(--tusche);
  border: 1px solid #cdd9f5;
}
.hinweis--fehler { background: #fbeeee; border-color: #efcaca; color: #7d2626; }
.hinweis--gut { background: #eaf6ef; border-color: #c4e3d0; color: #1f5a38; }

.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.8rem;
  margin: 0 0 2rem; padding: 0;
}
.kennzahlen__paar {
  padding: 0.9rem 1.1rem; background: var(--karton);
  border: 1px solid var(--linie); border-radius: var(--rundung-klein);
}
.kennzahlen dt { color: var(--tusche-hell); font-size: 0.82rem; margin-bottom: 0.2rem; }
.kennzahlen dd { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tabellenrahmen { overflow-x: auto; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein); }
.tabelle, .balkenplan { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th, .balkenplan th {
  text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--tusche-hell);
  padding: 0.65rem 0.9rem; background: #f8f9fb; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.tabelle td, .balkenplan td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--wand-tief); vertical-align: middle; }
.tabelle tbody tr:last-child td, .balkenplan tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: #f8f9fb; }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eingerueckt { padding-left: 1.6rem; color: var(--tusche-hell); }
.balkenplan--abschnitt td { font-weight: 600; }
.balkenplan--abschnitt td.eingerueckt { font-weight: 400; }
.balkenplan__spur { position: relative; min-width: 14rem; width: 45%; }
.balken { position: absolute; top: 0.75rem; height: 0.55rem; border-radius: 3px; min-width: 3px; }

.konflikte { margin: 0; padding-left: 1.1rem; max-width: var(--lesebreite); }
.konflikte li { margin-bottom: 0.4rem; }

.ganglinie { width: 100%; height: auto; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein); }
.ganglinie .gitter { stroke: var(--linie); stroke-width: 0.5; }
.ganglinie .achse { fill: var(--tusche-hell); font-size: 11px; font-family: var(--schrift); }

.legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--tusche-hell); }
.legende li { display: flex; align-items: center; gap: 0.4rem; }
.legende__feld { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; }

.stand { white-space: pre-wrap; font-size: 0.85rem; background: var(--karton); border: 1px solid var(--linie); }

/* --- Formulare ------------------------------------------------------------- */

.formular { display: flex; flex-direction: column; gap: 0.9rem; max-width: 26rem; margin-bottom: 1.5rem; }
.formular label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; font-weight: 500; color: var(--tusche-hell); }
.formular label small { font-size: 0.78rem; font-weight: 400; }
.formular input, .formular select, .ablage input, .inline input, .feld input, .feld select {
  font: inherit; font-size: 0.95rem; color: var(--tusche); background: var(--karton);
  border: 1px solid #cfd6e0; border-radius: var(--rundung-klein); padding: 0.5rem 0.7rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.formular input:focus, .formular select:focus, .ablage input:focus, .inline input:focus,
.feld input:focus, .feld select:focus {
  outline: none; border-color: var(--stempel); box-shadow: 0 0 0 3px var(--stempel-hell);
}
.formular .formular__haken { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--tusche); font-weight: 400; }
.formular .knopf { align-self: flex-start; }
.formular--zeile { flex-direction: row; flex-wrap: wrap; align-items: end; max-width: none; }
.formular--zeile label { min-width: 11rem; }

.freigabeliste { border: 1px solid var(--linie); border-radius: var(--rundung-klein); padding: 0.8rem 1rem 1rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; background: var(--karton); }
.freigabeliste legend { font-size: 0.85rem; color: var(--tusche-hell); padding: 0 0.3rem; }
.freigabeliste small { color: var(--tusche-hell); }

.inline { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0.15rem 0.4rem 0.15rem 0; }
.inline input { font-size: 0.85rem; padding: 0.35rem 0.55rem; width: 11rem; }
.aktionen { white-space: normal; }
.knopf--klein { padding: 0.4rem 0.75rem; font-size: 0.85rem; }

/* --- Projektliste ---------------------------------------------------------- */

.ablage {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end;
  padding: 1.1rem 1.2rem; margin-bottom: 1.6rem;
  background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung);
}
.ablage__form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.ablage__feld { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--tusche-hell); }
.ablage__feld input[type=file] { padding: 0.35rem; }
.ausgaben { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.8rem; }
.schrittwahl { display: flex; gap: 0.5rem; align-items: end; }
.schrittwahl label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--tusche-hell); }
.schrittwahl select { font: inherit; border: 1px solid #cfd6e0; border-radius: var(--rundung-klein); padding: 0.4rem 0.6rem; }

.projektzeile__zugriff { font-size: 0.85rem; color: var(--stempel); }
.projektzeile__aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.2rem 1rem; }
.projektzeile__aktionen .knopf, .projektzeile__aktionen button { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

/* --- Baugrubensimulation --------------------------------------------------- */

.bg { display: grid; grid-template-columns: minmax(19rem, 24rem) 1fr; gap: 1.5rem; align-items: start; }
.bg__eingabe {
  /* kein innerer Rollbereich: das ganze Formular bleibt sichtbar */
  position: static;
  background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung);
  padding: 1rem 1.1rem 1.2rem;
}
.bg__ergebnis { min-width: 0; }

.gruppe { border: 0; border-top: 1px solid var(--wand-tief); margin: 0; padding: 0.9rem 0 0.3rem; }
.gruppe:first-of-type { border-top: 0; padding-top: 0.2rem; }
.gruppe > legend, .gruppe > summary {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tusche-hell); padding: 0; margin-bottom: 0.6rem; cursor: default;
}
details.gruppe > summary { cursor: pointer; list-style: none; }
details.gruppe > summary::-webkit-details-marker { display: none; }
details.gruppe > summary::after { content: " +"; color: var(--stempel); }
details.gruppe[open] > summary::after { content: " –"; }

.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.7rem; }
.feld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--tusche-hell); min-width: 0; }
.feld--voll { grid-column: 1 / -1; }
.feld input, .feld select { font-size: 0.92rem; padding: 0.42rem 0.6rem; width: 100%; }
.feld input.falsch { border-color: var(--fehler); box-shadow: 0 0 0 3px #fbe3e3; }
.feld--haken { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--tusche); font-size: 0.88rem; }
.feld--haken input { width: auto; }
.feld__einheit { color: #8a93a2; }

.bg__knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.bg__status { font-size: 0.82rem; color: var(--tusche-hell); margin-top: 0.7rem; min-height: 1.2em; }
.bg__status--fehler { color: var(--fehler); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.7rem; margin-bottom: 1.2rem; }
.kachel { background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein); padding: 0.8rem 1rem; min-width: 0; }
.kachel__wert { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kachel__name { display: block; font-size: 0.8rem; color: var(--tusche-hell); }
.kachel__zusatz { display: block; font-size: 0.78rem; color: var(--tusche-hell); margin-top: 0.15rem; }
.kachel--mb { box-shadow: inset 3px 0 0 #4f7a35; }
.kachel--ub { box-shadow: inset 3px 0 0 #b08a55; }
/* Kostenloser Zugang: gesperrte Ergebnisse, Ausgaben und Ansichten */
.kachel--gesperrt { grid-column: 1 / -1; border-style: dashed; background: var(--wand); }
.kachel--gesperrt .kachel__wert { font-size: 1rem; }
.reiter button.reiter--gesperrt { color: var(--tusche-hell); opacity: 0.72; }
.reiter button.reiter--gesperrt::after { content: " · Abo"; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; }
.hinweis--gesperrt { background: var(--wand); border-style: dashed; border-color: var(--linie); }
.ed-knopf--gesperrt { opacity: 0.55; cursor: help; }

.reiter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.reiter button {
  font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--tusche-hell);
}
.reiter button:hover { background: var(--wand-tief); color: var(--tusche); }
.reiter button[aria-selected=true] { background: var(--stempel-hell); color: var(--stempel); }

.skizze {
  background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung);
  padding: 0.6rem; margin-bottom: 1.2rem; position: relative;
}
.skizze svg { width: 100%; height: auto; display: block; }
.skizze--laedt::after {
  content: "wird gerechnet …"; position: absolute; top: 0.8rem; right: 1rem;
  font-size: 0.8rem; color: var(--tusche-hell); background: var(--karton); padding: 0.1rem 0.5rem; border-radius: 999px;
}

.bg__ausgaben { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.6rem; }

.uebernahme {
  border: 0; border-radius: var(--rundung); padding: 1.4rem 1.5rem; width: min(34rem, 94vw);
  box-shadow: 0 24px 60px -20px rgba(23, 28, 36, 0.45); color: var(--tusche);
}
.uebernahme::backdrop { background: rgba(23, 28, 36, 0.4); }
.uebernahme h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.uebernahme p { color: var(--tusche-hell); font-size: 0.92rem; }
.uebernahme .felder { margin: 1rem 0; }
.uebernahme menu { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 1.2rem 0 0; padding: 0; }

/* --- Schmale Bildschirme --------------------------------------------------- */

@media (max-width: 62rem) {
  .bg { grid-template-columns: 1fr; }
  .bg__eingabe { position: static; max-height: none; }
}
@media (max-width: 40rem) {
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .felder { grid-template-columns: 1fr; }
  .kopf__konto { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* --- Drohnenaufmaß ---------------------------------------------------------- */

.am-ablage { flex-direction: column; align-items: stretch; }
.am-ablage.ziel { border-color: var(--stempel); background: var(--stempel-hell); }
.am-fortschritt { margin-top: 0.6rem; }
.am-balken { height: 0.5rem; background: var(--wand-tief); border-radius: 999px; overflow: hidden; }
.am-balken div { height: 100%; width: 0; background: var(--stempel); transition: width 0.2s ease; }
.am-fehler { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; color: var(--fehler); }
.am-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.8rem; }
.am-bild { margin: 0; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein); overflow: hidden; position: relative; }
.am-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #1c2129; }
.am-bild figcaption { padding: 0.5rem 0.7rem 0.6rem; font-size: 0.8rem; color: var(--tusche-hell); display: flex; flex-direction: column; gap: 0.15rem; }
.am-bild figcaption b { color: var(--tusche); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-warn { color: #9a6a00; }
.am-weg { position: absolute; top: 0.4rem; right: 0.4rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0; background: rgba(23,28,36,0.65); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.am-weg:hover { background: var(--fehler); }

/* --- Tab-Editor: Liste ------------------------------------------------------ */
.tb-kuenstler { font-size: 0.85em; color: var(--tusche-hell); font-weight: 400; }
.ablage__wahl { font: inherit; font-size: 0.95rem; border: 1px solid #cfd6e0; border-radius: var(--rundung-klein); padding: 0.5rem 0.6rem; background: var(--karton); }

/* --- Bauablaufplaner: Projekte mit mehreren Standorten ---------------------- */
.ablage--drei { flex-wrap: wrap; }
.projektgruppe { background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein); margin-bottom: 1rem; overflow: hidden; }
.projektgruppe__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.8rem 1rem; background: var(--stempel-hell); border-bottom: 1px solid var(--linie); }
.projektgruppe__titel { font-weight: 650; font-size: 1.05rem; color: var(--tusche); text-decoration: none; }
.projektgruppe__titel:hover { color: var(--stempel); }
.projektgruppe__info { flex: 1; min-width: 12rem; font-size: 0.85rem; color: var(--tusche-hell); }
.projektgruppe__liste { margin: 0; border: 0; border-radius: 0; }
.projektgruppe__liste .projektzeile { padding-left: 1.6rem; }
.projektgruppe__leer { margin: 0; padding: 0.8rem 1rem; }
.projektzeile--kompakt .register__link { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; list-style: none; padding: 0; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--tusche-hell); }
.legende__farbe { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -0.1rem; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
.tabelle small { color: var(--tusche-hell); }
.tabelle .warnung { color: #b23b3b; font-weight: 600; }

/* --- Serverkarte in der Übersicht ------------------------------------------- */
.sv-zeit { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tusche-hell); margin-left: 0.6rem; }
.sv-temp dd { font-size: 1.5rem; }
.sv-temp[data-stufe="gut"] dd { color: #2e7d4f; }
.sv-temp[data-stufe="warm"] dd { color: #b7791f; }
.sv-temp[data-stufe="heiss"] dd { color: #b23b3b; }
.tb-details { margin-top: 0.6rem; }
.tb-details summary { cursor: pointer; font-size: 0.85rem; color: var(--tusche-hell); margin-bottom: 0.4rem; }

.am-mosaik { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.am-mosaik__stand { color: var(--tusche-hell); font-size: 0.9rem; }

.sv-diagramm { margin: 0.9rem 0 0.3rem; }
.sv-diagramm svg { width: 100%; height: 190px; display: block; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein); }
.sv-gitter { stroke: var(--linie); stroke-width: 1; }
.sv-achse { font-size: 10px; fill: var(--tusche-hell); }
.sv-linie { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.sv-linie--last { stroke: var(--stempel); }
.sv-linie--ram { stroke: #2e7d4f; }
.sv-linie--temp { stroke: #b23b3b; stroke-dasharray: 3 3; }
.sv-legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--tusche-hell); margin-top: 0.35rem; }
.sv-l::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 0.35rem; vertical-align: middle; }
.sv-l--last::before { background: var(--stempel); }
.sv-l--ram::before { background: #2e7d4f; }
.sv-l--temp::before { background: repeating-linear-gradient(90deg, #b23b3b 0 3px, transparent 3px 6px); }

.ablage__wahl { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--tusche-hell); margin-top: 0.4rem; }
.ablage__wahl input { margin-top: 0.2rem; }

/* --- Tonresonanz ------------------------------------------------------------- */
.rs { display: grid; grid-template-columns: minmax(18rem, 22rem) 1fr; gap: 1.5rem; align-items: start; }
.rs__form { background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1rem 1.1rem 1.2rem; }
.rs__form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.rs__form legend { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tusche-hell); margin-bottom: 0.4rem; }
.rs__form label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--tusche-hell); margin-bottom: 0.5rem; }
.rs__form select, .rs__form input[type=range] { width: 100%; }
.rs__form .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.rs__wert { float: right; color: var(--tusche); font-variant-numeric: tabular-nums; }
.rs__schalter { flex-direction: row !important; align-items: center; gap: 0.5rem !important; color: var(--tusche) !important; }
.rs__vorlagen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rs__vorlagen button { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
.rs__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.rs__knoepfe label { flex-direction: row; align-items: center; gap: 0.4rem; margin: 0; }
.rs__buehne { min-width: 0; }
.rs__buehne canvas { width: 100%; max-width: 900px; height: auto; aspect-ratio: 1 / 1; background: #0f1419; border-radius: var(--rundung); display: block; touch-action: none; cursor: grab; }
.rs__info { font-size: 0.9rem; color: var(--tusche-hell); margin: 0.6rem 0 0.2rem; font-variant-numeric: tabular-nums; }
@media (max-width: 56rem) { .rs { grid-template-columns: 1fr; } }

/* --- Musiktheorie --------------------------------------------------------- */
.mu__reiter { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; }
.mu__reiter button { border: 0; background: none; padding: 0.55rem 0.8rem; font-size: 0.9rem; color: var(--tusche-hell); border-bottom: 2px solid transparent; cursor: pointer; }
.mu__reiter button.aktiv { color: var(--stempel); border-bottom-color: var(--stempel); font-weight: 600; }
.mu__zweispaltig { display: grid; grid-template-columns: minmax(18rem, 32rem) 1fr; gap: 1.5rem; align-items: start; }
.mu__zirkel { width: 100%; max-width: 32rem; height: auto; }
.mu__zirkel .sektor { cursor: pointer; transition: fill 0.15s; }
.mu__zirkel text { pointer-events: none; font-family: system-ui, sans-serif; }
.mu__karte { background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1rem 1.2rem; }
.mu__karte h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.mu__karte dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.6rem 0; font-size: 0.92rem; }
.mu__karte dt { color: var(--tusche-hell); }
.mu__karte dd { margin: 0; }
.mu__karte .knopf { margin-top: 0.6rem; }
.mu__hinweis { color: var(--tusche-hell); font-size: 0.9rem; }
.mu__hinweis code { background: var(--wand-tief); padding: 0.05rem 0.3rem; border-radius: 4px; }
.mu__klaviatur { width: 100%; max-width: 44rem; height: auto; display: block; margin: 0.6rem 0; }
.mu__klaviatur .taste { cursor: pointer; }
.mu__griffbrett { width: 100%; max-width: 62rem; height: auto; display: block; margin: 0.8rem 0; }
.mu__zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0; }
.mu__zeile input[type=text] { flex: 1; min-width: 16rem; padding: 0.5rem 0.7rem; border: 1px solid var(--linie); border-radius: var(--rundung-klein); font: inherit; }
.mu__zeile--form label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--tusche-hell); }
.mu__zeile--form select, .mu__zeile--form input[type=number] { font: inherit; padding: 0.35rem 0.5rem; }
.mu__schalter { flex-direction: row !important; align-items: center; gap: 0.4rem !important; color: var(--tusche) !important; align-self: end; padding-bottom: 0.4rem; }
.mu__ergebnis { margin: 0.6rem 0; font-size: 0.95rem; }
.mu__ergebnis table { border-collapse: collapse; width: 100%; max-width: 40rem; }
.mu__ergebnis td, .mu__ergebnis th { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--linie); text-align: left; font-size: 0.9rem; }
.mu__ergebnis .balken { height: 8px; background: var(--stempel); border-radius: 4px; }
.mu__metronom { max-width: 32rem; }
.mu__bpm { display: flex; align-items: baseline; gap: 0.6rem; }
.mu__bpm span { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mu__bpm small { color: var(--tusche-hell); }
#mu-bpm { width: 100%; }
.mu__schlaege { display: flex; gap: 0.5rem; margin: 0.8rem 0; }
.mu__schlaege span { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--wand-tief); }
.mu__schlaege span.eins { border: 2px solid var(--stempel); }
.mu__schlaege span.an { background: var(--stempel); }
.mu__tempo-name { color: var(--tusche-hell); font-size: 0.9rem; }
.mu__stimmen { max-width: 30rem; }
.mu__zeiger { width: 100%; height: auto; display: block; }
.mu__note { font-size: 3rem; font-weight: 700; text-align: center; margin-top: -0.4rem; }
.mu__cent { text-align: center; color: var(--tusche-hell); font-variant-numeric: tabular-nums; min-height: 1.4rem; }
@media (max-width: 56rem) { .mu__zweispaltig { grid-template-columns: 1fr; } }


@media (max-width: 48rem) { .hh { grid-template-columns: 1fr; } .hh__form { grid-template-columns: 1fr; } }

/* --- Baugruben-Übersicht ------------------------------------------------------ */
.bg__speichern { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.6rem; }
.bg__gespeichert { font-size: 0.8rem; color: var(--tusche-hell); }
@media (max-width: 56rem) { .bgl__kopf { grid-template-columns: 1fr; } }

/* --- Songliste des Tab-Editors als Karten -------------------------------------- */
.tbl-karten { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; }
.tbl-karte { display: flex; flex-direction: column; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); box-shadow: var(--schatten); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.tbl-karte:hover { transform: translateY(-2px); border-color: #c5d2ec; box-shadow: 0 2px 4px rgba(23, 28, 36, 0.06), 0 16px 32px -16px rgba(36, 86, 196, 0.35); }
.tbl-karte__haupt { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem 0.8rem; text-decoration: none; color: inherit; flex: 1; }
.tbl-karte__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.tbl-karte__symbol { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 11px; background: linear-gradient(135deg, #e7edfb, #d7e2fb); color: var(--stempel); }
.tbl-karte__symbol svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tbl-karte__datum { font-size: 0.76rem; color: var(--tusche-hell); }
.tbl-karte__titel { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--tusche); line-height: 1.25; }
.tbl-karte__kuenstler { color: var(--tusche-hell); font-size: 0.88rem; }
.tbl-karte__daten { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.tbl-karte__daten span { font-size: 0.72rem; font-weight: 600; color: #3b4760; background: var(--wand); border: 1px solid var(--wand-tief); border-radius: 999px; padding: 0.15rem 0.55rem; }
.tbl-karte__zugriff { font-size: 0.74rem; color: var(--stempel); margin-top: 0.2rem; }
.tbl-karte__aktionen { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.7rem 1.1rem 0.9rem; border-top: 1px solid var(--wand-tief); background: #fbfcfe; }
.tbl-karte__aktionen .knopf { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.tbl-karte__aktionen form { margin-left: auto; }
.tbl-karte__weg:hover { color: var(--fehler); border-color: #e6b8b8; }


/* --- Haushaltsbuch -------------------------------------------------------------
   Zwei Personen, zwei Farben, überall gleich: Petrol und Ocker. Sonst Tinte und Weiß. */
.hb { --hb-p1: #0e6f74; --hb-p2: #c47f17; --hb-p2-text: #95600f; --hb-tinte: #1c2330; --hb-linie: #e5e8ed; --hb-matt: #687080; --hb-nebel: #f2f4f7;
      max-width: 66rem; margin: 0 auto; color: var(--hb-tinte); }
.hb svg { overflow: visible; }
.hb-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.7rem 1.5rem; margin: 0.4rem 0 1.5rem; }
.hb-kopf__monat { grid-row: span 2; }
.hb-personen, .hb-kopf__aktionen { justify-self: end; }
.hb-kopf__monat { display: flex; align-items: center; gap: 0.8rem; }
.hb-kopf__buch { margin: 0 0 0.1rem; font-size: 0.85rem; color: var(--hb-matt); }
.hb-kopf__titel { margin: 0; font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 750; min-width: 11ch; }
.hb-pfeil { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--hb-linie); color: var(--hb-tinte); background: #fff; transition: border-color 0.15s, background 0.15s; }
.hb-pfeil:hover { border-color: #c9cfd8; background: var(--hb-nebel); }
.hb-pfeil svg, .hb-loeschen svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-personen { display: inline-flex; gap: 0.2rem; padding: 0.25rem; background: var(--hb-nebel); border-radius: 999px; }
.hb-person { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 999px; text-decoration: none; color: var(--hb-matt); font-weight: 600; font-size: 0.9rem; }
.hb-person:hover { color: var(--hb-tinte); }
.hb-person--aktiv { background: #fff; color: var(--hb-tinte); box-shadow: 0 1px 2px rgba(20, 24, 33, 0.08), 0 3px 10px -5px rgba(20, 24, 33, 0.25); }
.hb-kopf__aktionen { display: flex; gap: 0.5rem; align-items: center; }
.hb-monatwahl { font: inherit; font-size: 0.88rem; padding: 0.45rem 0.6rem; border: 1px solid var(--hb-linie); border-radius: 9px; background: #fff; color: var(--hb-tinte); }
.hb-punkt { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; flex: none; }
.hb-punkt--1 { background: var(--hb-p1); }
.hb-punkt--2 { background: var(--hb-p2); }
.hb-meldung { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: #e9f4f4; color: #0b5357; font-size: 0.9rem; }

/* Wer überweist wem */
.hb-ausgleich { padding: 1.7rem 1.9rem 1.4rem; background: var(--hb-nebel); border-radius: 20px; margin-bottom: 1.2rem; }
.hb-ausgleich__satz { margin: 0 0 0.35rem; font-size: clamp(1.45rem, 3.4vw, 2.15rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.hb-ausgleich__satz strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-ausgleich__satz--leer { color: var(--hb-matt); font-weight: 650; }
.hb-ausgleich__hilfe { margin: 0 0 0.4rem; color: var(--hb-matt); }
.hb-name--1 { color: var(--hb-p1); }
.hb-name--2 { color: var(--hb-p2-text); }
.hb-waage { display: block; margin: 0.9rem 0 0.1rem; }
.hb-waage__marke { font-size: 11.5px; font-weight: 650; fill: var(--hb-tinte); }
.hb-waage__betrag { font-size: 12px; font-weight: 650; fill: var(--hb-matt); font-variant-numeric: tabular-nums; }
.hb-bilanz { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem 2rem; margin-top: 0.9rem; padding-top: 1.1rem; border-top: 1px solid #dde1e7; }
.hb-bilanz p { margin: 0; }
.hb-bilanz__name { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 650; color: var(--hb-matt); }
.hb-bilanz__zahl { margin-top: 0.15rem !important; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.hb-bilanz__zahl span { font-size: 0.84rem; font-weight: 500; color: var(--hb-matt); letter-spacing: 0; }
.hb-bilanz__anteil { margin-top: 0.1rem !important; font-size: 0.82rem; color: var(--hb-matt); }
.hb-bilanz__summe { text-align: right; }
.hb-bilanz__summe .hb-bilanz__name { justify-content: flex-end; }

/* Eintragen wie eine Zeile im Kassenbuch */
.hb-eintrag { display: grid; grid-template-columns: 9.6rem minmax(9rem, 1fr) 9.2rem 8rem 8.6rem auto; gap: 0.6rem; align-items: end;
  padding: 1rem 1.1rem; margin-bottom: 2.2rem; background: #fff; border: 1px solid var(--hb-linie); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 24, 33, 0.04); }
.hb-feld { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 650; color: var(--hb-matt); min-width: 0; }
.hb-feld > span:first-child { display: inline-flex; align-items: center; gap: 0.4rem; }
.hb-feld input, .hb-feld select { height: 2.62rem; font: inherit; font-size: 0.95rem; font-weight: 400; color: var(--hb-tinte); padding: 0.5rem 0.65rem; border: 1px solid #d4d9e1; border-radius: 10px; background: #fff; min-width: 0; width: 100%; box-sizing: border-box; }
.hb-feld input:focus, .hb-feld select:focus { outline: none; border-color: var(--stempel); box-shadow: 0 0 0 3px var(--stempel-hell); }
.hb-euro { position: relative; display: block; }
.hb-euro input { padding-right: 1.9rem; text-align: right; font-variant-numeric: tabular-nums; }
.hb-euro i { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--hb-matt); font-weight: 500; }
.hb-eintrag__knopf { height: 2.62rem; padding: 0 1.2rem; }
.hb-fremd { margin: 0 0 2rem; color: var(--hb-matt); }

/* Diagramme und Blöcke */
.hb-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.6rem; }
.hb-block { margin-bottom: 2.4rem; }
.hb-block h2 { margin: 0 0 0.15rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
.hb-block__hilfe { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--hb-matt); max-width: 34rem; }
.hb-gitter { stroke: #e8ebf0; stroke-width: 1; }
.hb-achse { font-size: 11px; fill: #7b8393; font-variant-numeric: tabular-nums; }
.hb-achse--wert { paint-order: stroke; stroke: var(--wand, #f4f6f9); stroke-width: 4px; stroke-linejoin: round; fill: #5f6776; }
.hb-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--hb-matt); }
.hb-legende > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hb-strich { display: inline-block; width: 1.3rem; border-top: 2px dashed var(--hb-tinte); }
.hb-kat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.hb-kat li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.3rem 0.9rem; align-items: baseline; }
.hb-kat__name { font-weight: 650; font-size: 0.92rem; }
.hb-kat__anteil { font-size: 0.8rem; color: var(--hb-matt); font-variant-numeric: tabular-nums; }
.hb-kat__betrag { min-width: 6.6rem; text-align: right; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.hb-kat__balken { grid-column: 1 / -1; display: block; }
.hb-jahr__band { fill: transparent; transition: fill 0.15s; }
.hb-jahr__monat:hover .hb-jahr__band { fill: #f2f4f7; }
.hb-jahr__monat--aktuell .hb-jahr__band { fill: #eef3f9; }
.hb-jahr__monat--aktuell .hb-jahr__name { fill: var(--hb-tinte); font-weight: 700; }

/* Ausgaben nach Tagen */
.hb-tage { list-style: none; margin: 0; padding: 0; }
.hb-tag { margin: 1.3rem 0 0.35rem; font-size: 0.82rem; font-weight: 650; color: var(--hb-matt); }
.hb-tage > li:first-child .hb-tag { margin-top: 0.4rem; }
.hb-posten { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hb-linie); }
.hb-zeile { display: grid; grid-template-columns: 7.8rem minmax(0, 1fr) 7.5rem 7rem 2rem; grid-template-areas: "kat text wer betrag x";
  gap: 0.9rem; align-items: center; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--hb-linie); }
.hb-zeile:hover { background: #fafbfc; }
.hb-kategorie { grid-area: kat; justify-self: start; font-size: 0.74rem; font-weight: 650; color: #4a5262; background: var(--hb-nebel); border-radius: 999px; padding: 0.18rem 0.6rem; white-space: nowrap; }
.hb-zeile__text { grid-area: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-zeile__wer { grid-area: wer; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; color: var(--hb-matt); }
.hb-zeile__betrag { grid-area: betrag; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.hb-loeschen, .hb-zeile__platz { grid-area: x; margin: 0; }
.hb-loeschen button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: #a2a9b4; cursor: pointer; }
.hb-loeschen button:hover { background: #fdeceb; color: #c0392b; }

/* Nettogehälter und Fuß */
.hb-netto__form { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: end; }
.hb-netto .hb-feld { width: 13rem; }
.hb-feld--anzeige output { padding: 0.55rem 0; font-size: 0.95rem; font-weight: 500; color: var(--hb-tinte); font-variant-numeric: tabular-nums; }
.hb-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--hb-linie); font-size: 0.8rem; color: var(--hb-matt); }
.hb-fuss form { margin: 0; }
.hb-abmelden { border: 0; background: none; padding: 0; font: inherit; color: var(--stempel); text-decoration: underline; cursor: pointer; }

/* Anmeldung */
.hb-anmelden { max-width: 24rem; margin: 3rem auto; padding: 2rem 2.1rem; background: #fff; border: 1px solid var(--hb-linie, #e5e8ed); border-radius: 20px; box-shadow: 0 2px 4px rgba(20, 24, 33, 0.04), 0 24px 48px -28px rgba(20, 24, 33, 0.35); }
.hb-anmelden h1 { margin: 0 0 0.3rem; font-size: 1.6rem; letter-spacing: -0.02em; }
.hb-anmelden p { margin: 0 0 1.4rem; color: #687080; }
.hb-anmelden form { display: flex; flex-direction: column; gap: 1rem; }
.hb-wer { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; border: 0; margin: 0; padding: 0; }
.hb-wer legend { font-size: 0.78rem; font-weight: 650; color: #687080; margin-bottom: 0.35rem; }
.hb-wer label { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem; border: 1px solid #d4d9e1; border-radius: 12px; cursor: pointer; font-weight: 650; }
.hb-wer label:has(input:checked) { border-color: var(--stempel); background: var(--stempel-hell); }
.hb-wer input { accent-color: var(--stempel); }

@media (max-width: 60rem) {
  .hb-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hb-eintrag { grid-template-columns: 1fr 1fr; }
  .hb-feld--text, .hb-eintrag__knopf { grid-column: 1 / -1; }
  .hb-bilanz { grid-template-columns: 1fr 1fr; }
  .hb-bilanz__summe { grid-column: 1 / -1; text-align: left; }
  .hb-bilanz__summe .hb-bilanz__name { justify-content: flex-start; }
}
@media (max-width: 40rem) {
  .hb-ausgleich { padding: 1.2rem 1.1rem 1rem; border-radius: 16px; }
  .hb-zeile { grid-template-columns: auto minmax(0, 1fr) auto 2rem; grid-template-areas: "text text betrag x" "kat wer wer x"; row-gap: 0.35rem; }
  .hb-kopf { grid-template-columns: minmax(0, 1fr); }
  .hb-kopf__monat { grid-row: auto; }
  .hb-personen, .hb-kopf__aktionen { justify-self: start; }
}


/* --- Baugrubensimulation: Übersicht und Einlese-Vorschau ----------------------------- */
.bgl-start { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; margin: 1rem 0 1.8rem; }
.bgl-karte { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1.1rem 1.1rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); }
.bgl-karte__titel { margin: 0 0 0.1rem; font-size: 1rem; }
.bgl-feld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--tusche-hell); }
.bgl-feld input, .bgl-feld select { font: inherit; font-weight: 400; color: var(--tusche); padding: 0.45rem 0.55rem; border: 1px solid var(--linie-dunkel, #c9d0da); border-radius: 8px; background: #fff; }
.bgl-karte .knopf { align-self: flex-start; }
.bgl-karte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.bgl-karte__hinweis { font-size: 0.8rem; color: var(--tusche-hell); }
.bgl-gruppe { margin: 0 0 1.6rem; }
.bgl-gruppe__titel { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.5rem; font-size: 1.05rem; }
.bgl-gruppe__titel small { font-size: 0.8rem; font-weight: 500; color: var(--tusche-hell); }
.bgl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.bgl-zeile { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto auto; gap: 0.5rem 1rem; align-items: center; padding: 0.7rem 0.9rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein, 10px); }
.bgl-zeile__name { font-weight: 700; font-size: 1rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgl-zeile__daten { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.85rem; color: var(--tusche-hell); font-variant-numeric: tabular-nums; }
.bgl-zeile__daten b { color: var(--tusche); }
.bgl-zeile__offen { font-style: italic; }
.bgl-zeile__bemerkung { color: var(--tusche); }
.bgl-zeile__zugriff { font-size: 0.78rem; color: var(--tusche-hell); white-space: nowrap; }
.bgl-zeile__aktionen { display: flex; align-items: center; gap: 0.35rem; }
.bgl-zeile__aktionen .knopf { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.bgl-loeschen { margin: 0; }
.bgl-loeschen__knopf { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--tusche-hell); font-size: 1.15rem; cursor: pointer; }
.bgl-loeschen__knopf:hover { background: #fdeceb; color: var(--fehler); }
.bgl-blattwahl { display: flex; align-items: end; gap: 0.6rem; margin: 0 0 1rem; }
.bgl-blattwahl .bgl-feld { min-width: 14rem; }
.bgl-spalten { margin: 0 0 1rem; padding: 0.8rem 1rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); font-size: 0.85rem; }
.bgl-spalten__titel { margin: 0 0 0.3rem; font-weight: 600; }
.bgl-spalten ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; color: var(--tusche-hell); }
.bgl-spalten ul b { color: var(--tusche); font-weight: 600; }
.bgl-spalten__rest { margin: 0.5rem 0 0; color: var(--tusche-hell); }
.bgl-tabelle td select { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.35rem; }
.bgl-tabelle__fehler td { background: #fdf3f2; }
.bgl-tabelle__grund { color: var(--fehler); }
.bgl-tabelle__hinweise { font-size: 0.8rem; color: #8a5a0a; }
.bgl-vorschau__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0 0; }
.bg__gespeichert { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--tusche-hell); }
@media (max-width: 60rem) {
  .bgl-start { grid-template-columns: 1fr; }
  .bgl-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .bgl-zeile__daten { grid-column: 1 / -1; }
  .bgl-zeile__zugriff { grid-column: 1; }
}

/* --- Rechenknoten ----------------------------------------------------------------- */
.rk-lampe { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #a9b0bb; flex: none; box-shadow: 0 0 0 3px rgba(169, 176, 187, 0.25); }
.rk-lampe--an { background: #2d8a5b; box-shadow: 0 0 0 3px rgba(45, 138, 91, 0.22); }
.rk-lampe--fehler { background: #b7791f; box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.25); }
.rk-lampe--aus { background: #d5dae1; box-shadow: none; }
.rk-zustand { padding: 1.1rem 1.2rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); }
.rk-zustand__kopf { display: flex; gap: 0.9rem; align-items: flex-start; }
.rk-zustand__kopf .rk-lampe { margin-top: 0.45rem; }
.rk-zustand__titel { margin: 0 0 0.2rem; font-size: 1.15rem; }
.rk-zustand__text { margin: 0; color: var(--tusche-hell); }
.rk-zustand__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.rk-zustand__knoepfe form { margin: 0; }
.rk-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.8rem 1rem; align-items: end; }
.rk-form input { font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--linie-dunkel, #c9d0da); border-radius: 8px; }
.rk-form__breit { grid-column: span 2; }
.rk-form__knoepfe { grid-column: 1 / -1; }
.rk-schluessel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; }
.rk-schritte { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 1.2rem; }
.rk-schritte h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.rk-schritte p { margin: 0 0 0.5rem; }
.rk-befehl { display: flex; gap: 0.6rem; align-items: flex-start; }
.rk-befehl pre { flex: 1; min-width: 0; margin: 0; padding: 0.7rem 0.9rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-size: 0.82rem; background: var(--wand-tief); border-radius: var(--rundung-klein); }
.rk-status { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: var(--wand-tief); }
.rk-status--fertig { background: #e3f3ea; color: #1f5a38; }
.rk-status--fehler, .rk-status--abgebrochen { background: #fbeeee; color: #7d2626; }
.rk-status--rechnen, .rk-status--hochladen, .rk-status--wecken, .rk-status--herunterladen { background: var(--stempel-hell); color: var(--stempel); }
.rk-kurz { display: flex; align-items: center; gap: 0.7rem; margin: 0; }

/* Orthofoto im Drohnenaufmaß */
.of [hidden], .rk-zustand [hidden] { display: none !important; }
.of-form { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: end; margin: 0.4rem 0 0.4rem; }
.of-form select, .of-form input { font: inherit; padding: 0.45rem 0.55rem; }
.of-form__klein input { width: 7rem; }
.of-stand { margin: 0.8rem 0 0; padding: 1rem 1.1rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); }
.of-schritte { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0 0 0.8rem; padding: 0; counter-reset: schritt; }
.of-schritte li { counter-increment: schritt; font-size: 0.85rem; color: var(--tusche-hell); padding-top: 0.45rem; border-top: 3px solid var(--wand-tief); }
.of-schritte li::before { content: counter(schritt) ". "; }
.of-schritte li.of-schritte--fertig { color: var(--tusche); border-top-color: #2d8a5b; }
.of-schritte li.of-schritte--jetzt { color: var(--tusche); font-weight: 600; border-top-color: var(--stempel); }
.of-balken { margin: 0.2rem 0 0.5rem; }
.of-text { margin: 0 0 0.6rem; font-variant-numeric: tabular-nums; }
.of-stand__knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; }
.of-protokoll summary { cursor: pointer; color: var(--tusche-hell); font-size: 0.85rem; padding: 0.4rem 0; }
.of-protokoll pre { max-height: 16rem; overflow: auto; margin: 0.3rem 0 0; padding: 0.6rem 0.8rem; font-size: 0.78rem; }
.of-ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 1.1fr); gap: 1.2rem; margin-top: 0.9rem; align-items: start; }
.of-vorschau { width: 100%; border-radius: var(--rundung-klein); border: 1px solid var(--linie); background: #fff; }
.of-ergebnis__rechts { display: flex; flex-direction: column; gap: 0.7rem; }
.of-kennwerte { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0; }
.of-kennwerte dt { font-size: 0.78rem; color: var(--tusche-hell); }
.of-kennwerte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.of-dateien { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.of-dateien li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.1rem; border-bottom: 1px solid var(--linie); }
.of-dateien span { color: var(--tusche-hell); font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.of-loeschen { margin: 0; }
@media (max-width: 48rem) {
  .of-ergebnis { grid-template-columns: 1fr; }
  .of-schritte { grid-template-columns: 1fr 1fr; }
  .rk-form__breit { grid-column: auto; }
}

/* --- Baugrubensimulation: überarbeitete Oberfläche ------------------------------------ */
.bgs-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 2.5rem; align-items: end; margin-bottom: 1.4rem; }
.bgs-kopf__ueber { margin: 0; font-size: 0.85rem; color: var(--tusche-hell); }
.bgs-kopf__titel { margin: 0; }
.bgs-kopf__text { margin: 0; color: var(--tusche-hell); font-size: 0.92rem; max-width: 46rem; }
.bgs-eingabe .gruppe { padding-top: 0.8rem; }
.bgs-riegel { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.3rem; font-size: 0.86rem; }
.bgs-riegel th { text-align: left; font-weight: 600; font-size: 0.74rem; color: var(--tusche-hell); padding: 0.15rem 0.3rem; border-bottom: 1px solid var(--linie); }
.bgs-riegel th:nth-child(n+3) { text-align: right; }
.bgs-riegel td { padding: 0.2rem 0.3rem; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.bgs-riegel td.zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--tusche-hell); }
.bgs-riegel td.bgs-riegel__aushub { color: var(--tusche); }
.bgs-riegel input { width: 5rem; text-align: right; padding: 0.3rem 0.45rem; font-size: 0.88rem; }
.bgs-riegel__fest { display: inline-block; width: 5rem; text-align: right; color: var(--tusche-hell); font-size: 0.82rem; }
.bgs-riegel__fuss input:disabled, .bgs-riegel__fuss .feld input:disabled { color: var(--tusche-hell); background: var(--wand-tief); cursor: not-allowed; }
.bgs-riegel tr.bgs-riegel--hervor td { background: var(--stempel-hell); }
.bgs-riegel tbody tr:hover td { background: var(--wand-tief); }
.bgs-riegel__fuss { display: flex; justify-content: space-between; align-items: end; gap: 0.8rem; flex-wrap: wrap; }
.bgs-riegel__alle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--tusche-hell); }
.bgs-riegel__alle input { width: 4.2rem; padding: 0.3rem 0.45rem; text-align: right; }
.bgs-schieber__zeile { display: grid; grid-template-columns: 1fr 5rem; gap: 0.6rem; align-items: center; }
.bgs-schieber__zeile input[type=range] { width: 100%; accent-color: var(--stempel); padding: 0; }
.bgs-schieber__zeile input:not([type=range]) { text-align: right; }
.bgs-nur-mitte[hidden], .bgs-nur-rechteck[hidden], .bgs-nur-riegel[hidden] { display: none !important; }
.bgs-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.6rem; font-size: 0.84rem; color: var(--tusche-hell); }
.bgs-leiste[hidden] { display: none !important; }
.bgs-haken { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; color: var(--tusche); }
.bgs-haken input { accent-color: var(--stempel); }
.bgs-klein { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.bgs-lese { flex: 1 1 100%; font-variant-numeric: tabular-nums; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; line-height: 1.35; }
.bgs-wahl { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; padding: 0.15rem; background: var(--karton); }
.bgs-wahl button { border: 0; background: none; padding: 0.3rem 0.75rem; border-radius: 999px; font: inherit; font-size: 0.82rem; color: var(--tusche-hell); cursor: pointer; }
.bgs-wahl button[aria-pressed=true] { background: var(--stempel-hell); color: var(--stempel); font-weight: 600; }
.bgs-skizze { touch-action: none; }
.bgs-plan { width: 100%; height: auto; max-height: 72vh; display: block; margin: 0 auto; cursor: grab; user-select: none; }
.bgs-plan:active { cursor: grabbing; }
.bgs-plan__riegel { cursor: pointer; transition: fill 0.12s; }
.bgs-plan__griff { cursor: default; }
.bgs-plan__griff--aktiv { cursor: move; }
.bgs-schnitt { width: 100%; height: auto; display: block; }
.bg__gespeichert--offen { color: var(--fehler); }
.bg__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.bgs-3d { width: 100%; display: block; border-radius: var(--rundung-klein); touch-action: none; cursor: grab; user-select: none; background: #f7f8fa; }
.bgs-3d:active { cursor: grabbing; }
.bgs-einfluss { width: 100%; height: auto; display: block; }
.bgs-einfluss__balken { cursor: pointer; }
.bgs-einfluss__balken:hover rect:not([fill=transparent]) { opacity: 0.8; }
.bgs-auswahl { font: inherit; font-size: 0.84rem; padding: 0.2rem 0.4rem; margin-left: 0.3rem; }
.kachel__delta { display: block; margin-top: 0.25rem; font-size: 0.74rem; color: var(--tusche-hell); }
.kachel__delta--mehr { color: #a0552d; }
.kachel__delta--weniger { color: #2f7a4a; }
@media (max-width: 60rem) {
  .bgs-kopf { grid-template-columns: 1fr; }
}

/* Projektmappe: Baugruben im Vergleich */
.gpd { margin-top: 1.2rem; }
.gpd__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--tusche-hell); }
.gpd__svg { width: 100%; height: auto; display: block; }
.gpd__balken rect, .gpd__balken circle, .gpd__balken line { transition: opacity 0.12s; }
.gpd__balken:hover rect, .gpd__balken:hover circle { opacity: 0.75; }
.gpd__balken text { pointer-events: none; }
.gpd__titel { font-size: 0.95rem; margin: 1rem 0 0.3rem; }

/* Baugruben-Übersicht: Diagramm je Projektmappe */
.bgl-diagramm { margin: 0 0 0.8rem; padding: 0.6rem 0.9rem 0.8rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung-klein, 10px); }
.bgl-diagramm summary { cursor: pointer; font-size: 0.86rem; color: var(--tusche-hell); }
.bgl-diagramm .gpd__leiste { margin-top: 0.6rem; }
.bgl-diagramm__svg svg { width: 100%; height: auto; display: block; }
.bgl-zeile--hervor { border-color: var(--stempel); box-shadow: 0 0 0 2px var(--stempel-hell); }

.bgl-arbeitsraum p { margin: 0 0 0.7rem; }
.bgl-arbeitsraum__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bgl-arbeitsraum__knoepfe form { margin: 0; }

/* Grundriss als technische Zeichnung: anklickbare Maße */
.bgs-mass { cursor: text; }
.bgs-mass:hover { fill: #2d6ea3; text-decoration: underline; }
.bgs-inline { position: absolute; z-index: 5; font: inherit; font-size: 0.9rem; padding: 0.1rem 0.35rem; border: 2px solid var(--stempel); border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Verbau im Grundriss */
.bgs-verbau__knoepfe { margin: 0.4rem 0 0.6rem; }
.bgs-verbau__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; }
.bgs-verbau__liste li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.6rem; background: var(--karton); border: 1px solid var(--linie); border-radius: 8px; }
.bgs-verbau__leer { color: var(--tusche-hell); font-style: italic; }
.bgs-verbau__loeschen { border: 0; background: none; color: var(--tusche-hell); font-size: 1.1rem; cursor: pointer; width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.bgs-verbau__loeschen:hover { background: #fdeceb; color: var(--fehler); }
.bgs-verbau { cursor: default; }
.bgs-verbau__griff { cursor: move; }
.bgs-verbau__mitte { cursor: grab; }
.bgs-skizze--zeichnen svg { cursor: crosshair; }
.bgl-konflikt__titel small { font-weight: 500; color: var(--tusche-hell); }
.bgl-konflikt__ziel td { background: #fff7e6; }
.bgl-konflikt__marke { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #ffe2b8; color: #7a4a00; font-size: 0.74rem; font-weight: 600; }
.bgl-konflikt__wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0 0.5rem; }

/* --- Benutzer und Gruppen ------------------------------------------------------------ */
.bv-sprung { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 1rem; font-size: 0.9rem; }
.bv-tabelle td { vertical-align: middle; }
.bv-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.bv-inline input[type=text], .bv-inline input[type=password], .bv-inline input:not([type]) { font: inherit; font-size: 0.86rem; padding: 0.3rem 0.45rem; border: 1px solid var(--linie-dunkel, #c9d0da); border-radius: 7px; }
.bv-klein { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.bv-ich { font-size: 0.72rem; color: var(--tusche-hell); margin-left: 0.3rem; }
.bv-rolle { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--wand-tief); }
.bv-rolle--admin { background: var(--stempel-hell); color: var(--stempel); }
.bv-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bv-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem 0.15rem 0.4rem; border: 1px solid var(--linie); border-radius: 999px; background: #fff; font-size: 0.82rem; cursor: pointer; }
.bv-chip:has(input:checked) { border-color: var(--stempel); background: var(--stempel-hell); }
.bv-chip input { margin: 0; }
.bv-gruppenwahl { gap: 0.35rem; }
.bv-aktionen { white-space: nowrap; }
.bv-x { width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: none; color: var(--tusche-hell); font-size: 1.1rem; cursor: pointer; vertical-align: middle; }
.bv-x:hover { background: #fdeceb; color: var(--fehler); }
.bv-untertitel { margin: 1.4rem 0 0.6rem; font-size: 1rem; }
.bv-neu { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.8rem 1rem; align-items: end; padding: 1rem 1.1rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); }
.bv-neu input, .bv-neu select { font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--linie-dunkel, #c9d0da); border-radius: 8px; background: #fff; }
.bv-neu__gruppen { grid-column: 1 / -1; }
.bv-gruppe { margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--karton); border: 1px solid var(--linie); border-radius: var(--rundung); }
.bv-gruppe__kopf { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) auto; gap: 0.6rem 1rem; align-items: end; margin-bottom: 0.9rem; }
.bv-gruppe__kopf input { font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--linie-dunkel, #c9d0da); border-radius: 8px; background: #fff; }
.bv-gruppe__zahl { font-size: 0.82rem; color: var(--tusche-hell); padding-bottom: 0.5rem; }
.bv-gruppe__koerper { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 1fr); gap: 1rem 1.5rem; align-items: start; }
.bv-matrix__rahmen { overflow-x: auto; }
.bv-matrix { border-collapse: collapse; width: 100%; font-size: 0.86rem; background: #fff; border-radius: var(--rundung-klein, 10px); overflow: hidden; }
.bv-matrix th, .bv-matrix td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid var(--linie); }
.bv-matrix tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.bv-matrix thead th { font-size: 0.78rem; color: var(--tusche-hell); font-weight: 600; background: var(--wand-tief); }
.bv-matrix input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; }
.bv-matrix input:disabled { opacity: 0.35; cursor: not-allowed; }
.bv-matrix__leer { color: var(--linie-dunkel, #c9d0da); }
.bv-matrix__alle { accent-color: var(--stempel); }
.bv-mitglieder .bv-chips { margin-top: 0.3rem; }
.bv-gruppe__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; }
.bv-rechteliste { margin: 0.4rem 0 0; padding-left: 1.2rem; line-height: 1.6; }
@media (max-width: 60rem) { .bv-gruppe__koerper { grid-template-columns: 1fr; } .bv-gruppe__kopf { grid-template-columns: 1fr; } }

/* --- Projekte, Standorte, Lizenz ------------------------------------------------ */
/* Hinweistexte unter Formularfeldern – auch auf Seiten ohne editor.css */
.ed-hinweistext { font-size: 0.82rem; line-height: 1.5; color: var(--tusche-hell); margin: 0.3rem 0; }
.karte--hervor { border-color: var(--stempel, #2d6ea3); box-shadow: 0 0 0 1px var(--stempel, #2d6ea3) inset; }
.karte--statisch { cursor: default; }
.karte--statisch:hover { transform: none; }
.ablage__hinweis { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--tusche-hell); }
.ablage__hinweis.warnung { color: #a33; }
.ablage__feld--schmal { max-width: 6rem; }
.pj-liste .pj { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.pj__link { flex: 1 1 24rem; }
.pj__name { font-size: 1.05rem; }
.pj__zugriff { color: var(--tusche-hell); }
.pj__aktionen { display: flex; gap: 0.4rem; align-items: center; }
.pj-umbenennen { margin: 0.6rem 0 1rem; }
.pj-umbenennen[hidden] { display: none; }
.pj-standorte { display: grid; gap: 1.2rem; align-items: start; }
.pj-lage { margin: 0; max-width: 44rem; }
.pj-lage svg { width: 100%; height: auto; display: block; border: 1px solid var(--linie); border-radius: 8px; }
.pj-lage svg a text { cursor: pointer; }
.pj-lage figcaption { font-size: 0.8rem; color: var(--tusche-hell); margin-top: 0.3rem; }
.pj-lage__stand { display: block; color: var(--tusche-hell); }
.pj-lage__stand:not(:empty) { margin-top: 0.25rem; }
.lage--bild .lage__linie { stroke: #ffd166; }
.lage--bild .lage__punkt { fill: #ffd166; stroke: #1c2330; }
.lage--bild .lage__strich { stroke: #ffffff; }
.lage--bild .lage__text { fill: #ffffff; stroke: #1c2330; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.pj-lage__stand--fehler { color: #a33; }
.pj-lage__neu { margin-left: 0.4rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.pj-tabelle td { vertical-align: top; }
.pj-tabelle td:nth-child(2) { min-width: 6.5rem; }
.pj-tabelle td small { white-space: normal; }
.pj-tabelle td.aktionen { white-space: nowrap; }
.pj-tabelle td:nth-child(4), .pj-tabelle td:nth-child(5) { min-width: 11rem; }
.pj-koord { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-neu { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr) 6rem minmax(12rem, 1fr) auto; gap: 0.6rem; align-items: end; }
@media (max-width: 900px) { .pj-neu { grid-template-columns: 1fr 1fr; } }
.pj-neu .ablage__hinweis { grid-column: 1 / -1; }
.pj-einlesen, .pj-hochladen { display: grid; gap: 0.5rem; margin-bottom: 0.8rem; }
.so-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.so-werkzeuge { margin: 1rem 0 1.5rem; }
.so-karte { display: flex; flex-direction: column; gap: 0.6rem; }
.so-karte--aktiv { border-color: var(--stempel, #2d6ea3); }
.so-karte__knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: auto; }
.so-hochladen { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.so-hochladen__feld { display: grid; gap: 0.2rem; font-size: 0.82rem; color: var(--tusche-hell); }
.so-form { display: grid; grid-template-columns: 2fr 1fr; gap: 0.8rem; align-items: end; }
.so-form__breit { grid-column: 1 / -1; }
.so-form small { display: block; color: var(--tusche-hell); font-weight: 400; }
.so-verschieben { margin-top: 1rem; }
.so-loeschen { margin-top: 1.4rem; }
.lz-angebote { margin-top: 0.8rem; }
.bv-gruppe__lizenz input { width: 8.5rem; }
.bv-gruppe__kopf { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) 7rem 10rem auto; }
.bv-protokoll { font-size: 0.78rem; background: var(--wand-tief); padding: 0.6rem 0.8rem; border-radius: 8px; overflow-x: auto; max-height: 16rem; }
.bg__standort { display: grid; gap: 0.15rem; }
.bg__standort small { color: var(--tusche-hell); }

/* --- Projekt-Abo (Projektseite) --------------------------------------------- */
.pj-abo__text { max-width: var(--lesebreite); }
.pj-abo__zahlen { margin-bottom: 1rem; }
.pj-abo__verwalten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 1rem; }
.pj-buchen { max-width: var(--lesebreite); margin: 0.4rem 0 1rem; padding: 1rem 1.1rem; background: var(--karton);
  border: 1px solid var(--linie); border-radius: var(--rundung); }
.pj-buchen__zahl { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; margin-bottom: 0.8rem; }
.pj-buchen__zahl input { width: 6rem; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--linie); border-radius: var(--rundung-klein); }
.pj-buchen__wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.pj-buchen__betrag { font-variant-numeric: tabular-nums; font-weight: 500; }
.pj-abo__hand { margin-top: 1rem; }
.pj-abo__hand summary { cursor: pointer; color: var(--tusche-hell); font-size: 0.9rem; }
.pj-lizenz { display: inline-block; font-size: 0.78rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--wand-tief); color: var(--tusche-hell); white-space: nowrap; }
.pj-lizenz--abo { background: #eaf6ef; color: #1f5a38; }
.pj-lizenz--aus { background: #fbeeee; color: #7d2626; }