/* RUHRWERT Brandbook 11/2022: Identitätsblau #0F1D2E nur für Flächen, NIE für Schrift.
   Akzent Magenta #E20074 (Entscheidung Ruhrwert, abweichend vom Brandbook-Gelb). Arial für Digitales.
   Signet im Kreis unten rechts. Grautöne wie im Brandbook (#F1F2F2).
   Aufbau angelehnt an moderne Ticket-Systeme: Seitenleiste, ruhige Karten, Personen als Kürzel. */
:root {
  --blau: #0F1D2E; --blau-2: #1a2a3e; --magenta: #E20074; --magenta-dunkel: #B8005E; --magenta-hell: #fdeef6;
  --watermelon: #E9465F; --webblau: #275DA8; --webgruen: #93C88B;
  --bg: #F1F2F2; --flaeche: #fff; --text: #111418; --leise: #5f6670; --linie: #e4e6e9; --linie-2: #eef0f2;
  --rot: #D92D20; --rot-hell: #FDECEA; --gelb: #F2B600; --gelb-text: #8a6500; --gelb-hell: #FFF6DB;
  --gruen: #3E9B4F; --gruen-hell: #EAF6EC;
  --radius: 10px; --radius-klein: 6px;
  --schatten: 0 1px 2px rgba(15,29,46,.05), 0 1px 3px rgba(15,29,46,.07);
  --schatten-hoch: 0 4px 14px rgba(15,29,46,.12);
  --leiste: 236px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* ausgeblendet bleibt ausgeblendet, auch bei display-Regeln */
body { margin: 0; font: 14.5px/1.5 Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--webblau); text-decoration: none; }
a:hover { color: var(--magenta); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; color: #000; font-weight: 700; letter-spacing: -.01em; }
main > h1 { margin-bottom: 1.1rem; }
h2 { font-size: .98rem; margin: 0 0 .75rem; color: #000; font-weight: 700; }
h3 { font-size: .85rem; margin: 0 0 .5rem; color: #000; }
b { font-weight: 700; }
.sym { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Grundgerüst: Seitenleiste + Inhalt ---------- */
.mit-leiste { padding-left: var(--leiste); }
.haupt { min-height: 100vh; display: flex; flex-direction: column; }
main { max-width: 1480px; width: 100%; margin: 0 auto; padding: 1.75rem 2rem 3rem; flex: 1; }

.leiste { position: fixed; inset: 0 auto 0 0; width: var(--leiste); background: var(--blau); color: #fff;
          display: flex; flex-direction: column; padding: 1.1rem .8rem .8rem; z-index: 10; }
.leiste a { color: #fff; }
.leiste .marke { display: flex; flex-direction: column; gap: .35rem; padding: .2rem .55rem 1.2rem; }
.leiste .marke img { width: 150px; }
.leiste .marke span { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: #9fb0c4; }
.leiste .neu { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 .2rem 1rem; padding: .55rem; }
.leiste nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.leiste nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: var(--radius-klein);
                color: #c9d3df; position: relative; }
.leiste nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.leiste nav a.aktiv { background: rgba(255,255,255,.1); color: #fff; font-weight: 700; }
.leiste nav a.aktiv::before { content: ""; position: absolute; left: -.8rem; top: 7px; bottom: 7px; width: 3px;
                              border-radius: 0 3px 3px 0; background: var(--magenta); }
.leiste nav a span { flex: 1; }
.leiste nav b { font-size: .75rem; font-weight: 700; background: rgba(255,255,255,.12); color: #fff;
                padding: .05rem .5rem; border-radius: 999px; }
.leiste nav b.warn { background: var(--magenta); }
.leiste .gruppe { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #7f90a5; padding: 1.1rem .65rem .35rem; }
.leiste .ich { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
               border-top: 1px solid rgba(255,255,255,.1); padding: .8rem .4rem 0; font-size: .85rem; }
.leiste .ich > a { color: #9fb0c4; display: flex; padding: .3rem; border-radius: var(--radius-klein); }
.leiste .ich > a:hover { color: #fff; background: rgba(255,255,255,.08); }

@media (max-width: 900px) {
  .mit-leiste { padding-left: 0; }
  .leiste { position: sticky; top: 0; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1rem; }
  .leiste .marke { padding: 0; } .leiste .marke img { width: 110px; } .leiste .marke span { display: none; }
  .leiste .neu { margin: 0 0 0 auto; padding: .35rem .7rem; order: 2; }
  .leiste .ich { order: 3; border: 0; padding: 0; } .leiste .ich .person > span:last-child { display: none; }
  .leiste nav { order: 4; flex-direction: row; flex-basis: 100%; overflow-x: auto; }
  .leiste nav a { white-space: nowrap; padding: .4rem .6rem; } .leiste nav a.aktiv::before { display: none; }
  .leiste .gruppe { display: none; }
  main { padding: 1.25rem 1rem 2.5rem; }
}

.fuss { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .8rem 2rem;
        color: var(--leise); font-size: .75rem; }
.fuss img { width: 30px; height: 30px; }

/* ---------- Seitenkopf ---------- */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.seitenkopf h1 { display: flex; align-items: center; gap: .6rem; }
.seitenkopf p { margin: .35rem 0 0; }
.vorzeile { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--magenta); font-weight: 700; margin: 0 0 .3rem !important; }
.brotkrumen { margin: 0 0 .4rem; color: var(--leise); font-size: .85rem; }
.brotkrumen a { color: var(--leise); } .brotkrumen a:hover { color: var(--magenta); }
.anzahl { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--leise); background: var(--linie-2);
          padding: .05rem .5rem; border-radius: 999px; line-height: 1.5; }
.anzahl.gross { font-size: .9rem; padding: .1rem .6rem; }

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem;
         margin-bottom: 1rem; box-shadow: var(--schatten); }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: -.1rem 0 .4rem; }
.karte-kopf h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; align-items: start; }
.raster.zwei { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 1100px) { .raster.zwei, .raster { grid-template-columns: 1fr; } }
.raster > .karte, .raster > div > .karte:last-child { margin-bottom: 0; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.leise { color: var(--leise); }
.klein { font-size: .82rem; }
.fehler { color: var(--rot); background: var(--rot-hell); padding: .6rem .85rem; border-radius: var(--radius-klein); }
.ok { color: #22672f; background: var(--gruen-hell); padding: .6rem .85rem; border-radius: var(--radius-klein); border: 1px solid #cfe8d4; }
.text { white-space: pre-wrap; }
.mehr { display: inline-block; margin-top: .4rem; font-size: .85rem; font-weight: 700; }
.leer-hinweis { color: var(--leise); background: #fafbfb; border: 1px dashed var(--linie); border-radius: var(--radius-klein);
                padding: .9rem; text-align: center; margin: .3rem 0; }

.knopf { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #cfd3d8; background: var(--flaeche); color: #000;
         padding: .45rem .95rem; border-radius: var(--radius-klein); font: inherit; cursor: pointer; line-height: 1.3;
         box-shadow: 0 1px 1px rgba(15,29,46,.04); }
.knopf:hover { border-color: #9aa3ad; color: #000; }
.knopf.primaer { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf.akzent { background: var(--magenta); border-color: var(--magenta); color: #fff; font-weight: 700; }
.knopf.akzent:hover, .knopf.primaer:hover { background: var(--magenta-dunkel); border-color: var(--magenta-dunkel); color: #fff; }
.knopf.klein { padding: .3rem .7rem; font-size: .85rem; }
.knopf .sym { width: 16px; height: 16px; }

/* Personen-Kürzel */
.person { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
          font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: #8a94a0; flex: none; }
.avatar.f0 { background: var(--webblau); } .avatar.f1 { background: #2E8C83; } .avatar.f2 { background: #7A5AA6; }
.avatar.f3 { background: #C2410C; } .avatar.f4 { background: #4D7C2A; } .avatar.f5 { background: var(--magenta-dunkel); }
.person.leer .avatar { background: #fff; color: var(--leise); border: 1.5px dashed #b6bcc4; }
.person.leer > span:last-child { color: var(--leise); }
.leiste .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.15); }

/* ---------- Ampel ---------- */
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; }
.ampel.rot { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.ampel.gelb { background: var(--gelb); box-shadow: 0 0 0 3px var(--gelb-hell); }
.ampel.gruen { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell); }
.ampel.aus { background: #c9cdd2; }
.ampel-karte .zeile { margin-bottom: .8rem; align-items: flex-start; }
.ampel-karte h2 { margin: 0; }
.balken { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--linie-2); }
.balken a { display: block; min-width: 6px; transition: filter .15s; }
.balken a:hover { filter: brightness(1.12); }
.balken .rot { background: var(--rot); } .balken .gelb { background: var(--gelb); } .balken .gruen { background: var(--gruen); }
.ampel-zahlen { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: .9rem; }
.ampel-zahlen a { display: flex; align-items: center; gap: .55rem; color: var(--text); padding: .2rem 0; }
.ampel-zahlen a:hover { color: var(--magenta); }
.ampel-zahlen b { font-size: 1.35rem; }
.ampel-regeln { font-size: .85rem; position: relative; }
.ampel-regeln summary { cursor: pointer; color: var(--webblau); list-style: none; }
.ampel-regeln summary::-webkit-details-marker { display: none; }
.ampel-regeln summary::before { content: "ⓘ "; }
.ampel-regeln-text { position: absolute; right: 0; top: 1.6rem; width: 380px; max-width: 80vw; z-index: 5; background: #fff;
                     border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-hoch); padding: .6rem 1rem; }
.ampel-regeln ul { list-style: none; padding: 0; margin: .3rem 0; }
.ampel-regeln li { margin: .45rem 0; display: flex; gap: .6rem; align-items: baseline; }
.ampel-hinweis { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem; border-radius: var(--radius-klein); margin: .6rem 0; font-size: .9rem; }
.ampel-hinweis .ampel { box-shadow: none; }
.ampel-hinweis.rot { background: var(--rot-hell); color: var(--rot); }
.ampel-hinweis.gelb { background: var(--gelb-hell); color: var(--gelb-text); }
.ampel-hinweis.gruen { background: var(--gruen-hell); color: var(--gruen); }
.zaehler { display: inline-flex; gap: .3rem; }
.zaehler .z { min-width: 1.9em; text-align: center; padding: .05rem .45rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.zaehler .z.rot { background: var(--rot-hell); color: var(--rot); }
.zaehler .z.gelb { background: var(--gelb-hell); color: var(--gelb-text); }
.zaehler .z.gruen { background: var(--gruen-hell); color: var(--gruen); }
a.z:hover { filter: brightness(.95); }

/* Kennzahl-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .85rem 1.1rem;
          color: var(--text); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: .2rem; transition: box-shadow .15s, border-color .15s; }
.kachel span { color: var(--leise); font-size: .8rem; }
.kachel b { font-size: 1.6rem; line-height: 1.15; color: #000; }
.kachel b small { font-size: .8rem; font-weight: 400; color: var(--leise); }
.kachel.warn b { color: var(--rot); }
a.kachel:hover { border-color: #cfd3d8; box-shadow: var(--schatten-hoch); color: var(--text); }

/* ---------- Listen und Tabellen ---------- */
.kurzliste { list-style: none; margin: 0; padding: 0; }
.kurzliste li { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .5rem; margin: 0 -.5rem;
                border-bottom: 1px solid var(--linie-2); border-radius: var(--radius-klein); }
.kurzliste li:hover { background: #fafbfb; }
.kurzliste li .ampel { margin-top: .4rem; }
.kurzliste li:last-child { border-bottom: 0; }
.kurzliste .inhalt { flex: 1; min-width: 0; }
.titel { display: block; color: var(--text); font-weight: 700; }
.titel:hover { color: var(--magenta); }
.meta { display: flex; flex-wrap: wrap; gap: .3rem .55rem; align-items: center; font-size: .78rem; color: var(--leise); margin-top: .25rem; }
.meta .grund { font-style: italic; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.liste th { text-align: left; font-size: .72rem; color: var(--leise); font-weight: 700; background: #f8f9fa;
            text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; z-index: 1; }
.liste th, .liste td { padding: .65rem .8rem; border-bottom: 1px solid var(--linie-2); vertical-align: top; }
.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr:hover td { background: #fcf5f9; }
.liste tr.erledigt td { opacity: .55; }
.liste td:first-child .ampel { margin-top: .4rem; }
.liste th.schmal { width: 28px; }
.liste .titel { display: inline; font-weight: 400; font-size: .95rem; }
.liste td > .leise.klein { margin-top: .15rem; }
.schlicht td { padding: .45rem 0; border-bottom: 1px solid var(--linie-2); }
.schlicht tr:last-child td { border-bottom: 0; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Kennzeichnungen */
.prio, .status, .art, .faellig { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 999px;
                                font-size: .72rem; white-space: nowrap; line-height: 1.5; }
.prio.p10 { background: #f1f3f5; color: var(--leise); }
.prio.p20 { background: #eef1f5; color: #475467; }
.prio.p30 { background: var(--magenta-hell); color: var(--magenta-dunkel); font-weight: 700; }
.prio.p40, .prio.p50 { background: var(--magenta); color: #fff; font-weight: 700; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.s-neu { background: #e9f0fa; color: var(--webblau); }
.status.s-in_bearbeitung { background: #fff3e0; color: #9a4b00; }
.status.s-wartet { background: #f3eefa; color: #6b4a99; }
.status.s-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.art.a-rent { background: #e9f0fa; color: var(--webblau); }
.art.a-weg { background: #edf6eb; color: #3f7a36; }
.art.a-sev { background: #fdf0e6; color: #9a4b00; }
.faellig { background: #f1f3f5; color: var(--text); }
.faellig.ueber { background: var(--rot-hell); color: var(--rot); font-weight: 700; }

/* ---------- Filter und Formulare ---------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; background: var(--flaeche);
          border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem; box-shadow: var(--schatten); }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid #cfd3d8; border-radius: var(--radius-klein);
                          background: #fff; color: var(--text); max-width: 100%; }
.filter select, .filter input { padding: .35rem .55rem; font-size: .88rem; background-color: #fafbfb; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px var(--magenta-hell); }
.filter input[name=q] { min-width: 280px; flex: 1; max-width: 420px;
  padding-left: 2rem; background: #fafbfb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6670' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .6rem center / 15px; }
.formular label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; font-size: .82rem; color: var(--leise); font-weight: 700; }
.formular label input, .formular label select, .formular label textarea { color: var(--text); width: 100%; font-weight: 400; }
.formular label .klein, .formular label .leise { font-weight: 400; }
.formular.breit { max-width: 920px; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.haken-label { flex-direction: row !important; align-items: center; }
.haken-label input { width: auto !important; }
form.inline { display: flex; gap: .5rem; }
form.inline input { flex: 1; }

/* ---------- Aufgabe ---------- */
.checkliste { list-style: none; padding: 0; margin: 0 0 .75rem; }
.checkliste li { padding: .3rem 0; border-bottom: 1px solid var(--linie-2); }
.checkliste li.ok { color: var(--leise); text-decoration: line-through; background: none; border-width: 0 0 1px; border-radius: 0; padding: .3rem 0; }
.checkliste form { display: inline; }
.haken { background: none; border: 0; font-size: 1.15rem; cursor: pointer; padding: 0 .2rem; color: var(--magenta); }
.kommentar { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--linie-2); }
.kommentar > div { flex: 1; min-width: 0; }
.kommentar .text { margin-top: .2rem; }
#kommentare .formular { margin-top: .8rem; }
#kommentare textarea { width: 100%; margin-bottom: .5rem; }
.verlauf { list-style: none; padding: 0; margin: 0; font-size: .84rem; max-height: 460px; overflow-y: auto; }
.verlauf li { padding: .35rem 0 .55rem 1rem; margin-left: 6px; position: relative; border-left: 2px solid var(--linie); }
.verlauf li::before { content: ""; position: absolute; left: -7px; top: .6rem; width: 8px; height: 8px;
                      border-radius: 50%; background: #fff; border: 2px solid #b6bcc4; }

/* ---------- Board ---------- */
.umschalter { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: #e3e6e9; }
.umschalter a { padding: .3rem .95rem; color: var(--leise); border-radius: var(--radius-klein); font-size: .88rem; }
.umschalter a.aktiv { background: #fff; color: #000; font-weight: 700; box-shadow: var(--schatten); }
.board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 1rem; overflow-x: auto; align-items: start; }
.spalte { background: #e8eaec; border-radius: var(--radius); padding: .6rem; min-height: 200px; }
.spalte h3 { display: flex; align-items: center; gap: .5rem; padding: .25rem .3rem .6rem; margin: 0; font-size: .88rem; }
.spalte h3 .anzahl { background: #fff; }
.punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.punkt.s-neu { background: var(--webblau); } .punkt.s-in_bearbeitung { background: #E08A00; }
.punkt.s-wartet { background: #7A5AA6; } .punkt.s-erledigt { background: var(--gruen); }
.spalte.ziel { outline: 2px dashed var(--magenta); outline-offset: -2px; background: var(--magenta-hell); }
.bkarte { background: #fff; border-radius: 8px; padding: .65rem .75rem .6rem; margin-bottom: .55rem; box-shadow: var(--schatten);
          border: 1px solid var(--linie); border-left: 3px solid var(--linie); cursor: grab; transition: box-shadow .15s, transform .15s; }
.bkarte:hover { box-shadow: var(--schatten-hoch); transform: translateY(-1px); }
.bkarte .vorzeile { font-size: .7rem; letter-spacing: .03em; color: var(--leise); text-transform: none; font-weight: 400; margin-bottom: .15rem !important; }
.bkarte .titel { font-size: .9rem; line-height: 1.35; font-weight: 400; }
.bkarte .fusszeile { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .5rem; }
.bkarte .meta { margin: 0; }
.bkarte .avatar { width: 22px; height: 22px; font-size: .6rem; }
.bkarte .ampel { box-shadow: none; width: 8px; height: 8px; }
.rand-rot { border-left-color: var(--rot) !important; } .rand-gelb { border-left-color: var(--gelb) !important; }
.rand-gruen { border-left-color: var(--gruen) !important; } .rand-aus { border-left-color: #c9cdd2 !important; }
.tipp { margin-top: .8rem; }

/* ---------- Login ---------- */
.login-seite { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 80% 110%, #1d3350 0%, var(--blau) 60%);
               display: flex; align-items: center; justify-content: center; overflow: hidden; }
.login-seite::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--magenta); }
.login { width: 380px; max-width: calc(100% - 32px); position: relative; z-index: 1; text-align: center; }
.login-logo { width: 300px; max-width: 100%; margin-bottom: 1.75rem; }
.login .karte { text-align: left; padding: 1.6rem 1.6rem 1.4rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); border: 0; }
.login h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.login label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-size: .82rem; color: var(--leise); font-weight: 700; }
.login button { width: 100%; justify-content: center; padding: .6rem; }

/* Sammel-Aktion über gefilterte Liste */
.sammel { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; background: #fff; border: 1px solid var(--linie);
          border-left: 4px solid var(--magenta); border-radius: var(--radius); padding: .65rem .95rem; margin-bottom: 1rem;
          font-size: .88rem; box-shadow: var(--schatten); }
.sammel .haken-label { display: flex; gap: .35rem; align-items: center; color: var(--leise); }
.sammel select { padding: .3rem .5rem; font-size: .88rem; }

/* ---------- Trello-Board: Karten, Labels, Mitglieder, Schnellanlage, Fenster ---------- */
.board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); padding-bottom: .5rem; }
.spalte { display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.spalte .karten { overflow-y: auto; min-height: 40px; padding: 2px 2px 0; margin: 0 -2px; flex: 1; }
.spalten-titel { flex: 1; }
.bkarte.zieht { opacity: .4; transform: rotate(2deg); }
.bkarte .labels { margin-bottom: .35rem; }
.bkarte .abzeichen { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; font-size: .74rem; color: var(--leise); }
.bkarte .abzeichen > span { display: inline-flex; align-items: center; gap: .2rem; }
.bkarte .abzeichen .sym { width: 14px; height: 14px; }
.bkarte .abzeichen .fertig { background: var(--gruen); color: #fff; border-radius: 4px; padding: 0 .3rem; }
.bkarte .faellig { padding: .02rem .35rem; border-radius: 4px; }
.karte-neu { display: flex; align-items: center; gap: .35rem; width: 100%; border: 0; background: none; color: var(--leise);
             padding: .45rem .5rem; border-radius: var(--radius-klein); font: inherit; font-size: .88rem; cursor: pointer; margin-top: .2rem; }
.karte-neu:hover { background: rgba(15,29,46,.07); color: #000; }
.karte-neu .sym { width: 16px; height: 16px; }
form.schnell { margin-top: .3rem; }
form.schnell textarea { width: 100%; resize: vertical; box-shadow: var(--schatten); border-color: var(--linie); margin-bottom: .4rem; }
.neue-spalte { background: rgba(232,234,236,.6); border: 2px dashed #d3d7db; min-height: 0; gap: .5rem; align-self: start; }
.neue-spalte input { width: 100%; }
.phasen-nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
             background: var(--blau); color: #fff; font-size: .72rem; font-weight: 700; flex: none; }

.labels { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.label { display: inline-block; background: var(--f); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.5;
         padding: 0 .45rem; border-radius: 4px; min-width: 36px; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.label.gross { font-size: .8rem; padding: .15rem .6rem; min-width: 90px; }
.label.waehlbar { border: 0; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; padding: .25rem .65rem; opacity: .35; }
.label.waehlbar.an { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--f); }
.label.waehlbar:hover { opacity: .8; }

.mitglieder { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.mitglieder .avatar { width: 24px; height: 24px; font-size: .6rem; box-shadow: 0 0 0 2px #fff; margin-left: -6px; }
.mitglieder .avatar:last-child { margin-left: 0; }
.mitglieder .avatar.mehr { background: #e3e6e9; color: var(--leise); }
.beteiligte-mini { display: inline-flex; gap: 2px; margin-left: .3rem; vertical-align: middle; }
.beteiligte-mini .avatar { width: 20px; height: 20px; font-size: .55rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips form { display: contents; }
.chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--linie); background: #fafbfb; border-radius: 999px;
        padding: .15rem .65rem .15rem .2rem; font: inherit; font-size: .82rem; cursor: pointer; color: var(--leise); }
.chip .avatar { width: 22px; height: 22px; font-size: .58rem; filter: grayscale(1) opacity(.5); }
.chip.an { background: #fff; border-color: var(--blau); color: #000; font-weight: 700; }
.chip.an .avatar { filter: none; }
.chip:hover { border-color: #9aa3ad; }

.fenster-hg { position: fixed; inset: 0; background: rgba(15,29,46,.55); z-index: 50; display: flex; align-items: flex-start;
              justify-content: center; padding: 3vh 1rem; }
.fenster-hg[hidden] { display: none; }
.fenster-rahmen { position: relative; width: min(1100px, 100%); height: 94vh; background: var(--bg); border-radius: 12px;
                  box-shadow: 0 30px 80px rgba(0,0,0,.4); overflow: hidden; }
.fenster-rahmen iframe { width: 100%; height: 100%; border: 0; }
.fenster-zu { position: absolute; top: .6rem; right: .7rem; z-index: 2; border: 0; background: #fff; width: 34px; height: 34px;
              border-radius: 50%; cursor: pointer; font-size: 1rem; box-shadow: var(--schatten); }
.fenster-zu:hover { background: var(--magenta); color: #fff; }
body.fenster main { padding: 1.4rem 1.6rem 2rem; }
body.fenster .raster.zwei { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); }
body.fenster h1 { padding-right: 2.5rem; font-size: 1.35rem; }

/* ---------- Teilaufgaben, Schnellzeilen ---------- */
.teile { list-style: none; margin: 0 0 .6rem; padding: 0; }
.teile li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--linie-2); flex-wrap: wrap; }
.teile li > a { flex: 1; color: var(--text); }
.teile li > a:hover { color: var(--magenta); }
.teile li.erledigt > a { text-decoration: line-through; color: var(--leise); }
.teile form { display: inline; }
.schnellzeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.schnellzeile input[name=titel] { flex: 1; min-width: 200px; }
.schnellzeile select, .schnellzeile input[type=date] { font-size: .85rem; padding: .35rem .5rem; }
.fortschritt { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--linie-2); overflow: hidden; vertical-align: middle; }
.fortschritt > span { display: block; height: 100%; background: var(--gruen); border-radius: 999px; }
.fortschritt-zeile { display: inline-flex; align-items: center; gap: .45rem; color: var(--leise); }
.knopf.gefahr { color: var(--rot); }
.knopf.gefahr:hover { border-color: var(--rot); background: var(--rot-hell); color: var(--rot); }

/* ---------- Projekte ---------- */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.1rem; overflow-x: auto; }
.reiter a { padding: .5rem .9rem; color: var(--leise); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter a.aktiv { color: #000; font-weight: 700; border-bottom-color: var(--magenta); }
.projekt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.projekt-karte { display: flex; flex-direction: column; gap: .5rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
                 padding: 1rem 1.15rem; box-shadow: var(--schatten); color: var(--text); transition: box-shadow .15s; }
.projekt-karte:hover { box-shadow: var(--schatten-hoch); color: var(--text); }
.projekt-karte h2 { margin: .1rem 0 0; font-size: 1.05rem; }
.projekt-karte p { margin: 0; }
.projekt-karte .fortschritt { flex: 1; }
.projekt-karte .fortschritt-zeile { display: flex; }
.pstatus { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; vertical-align: middle; }
.ps-aktiv { background: var(--gruen-hell); color: var(--gruen); } .ps-geplant { background: #e9f0fa; color: var(--webblau); }
.ps-pausiert { background: var(--gelb-hell); color: var(--gelb-text); } .ps-abgeschlossen { background: #eef0f2; color: var(--leise); }
.seitenkopf h1 .pstatus { font-size: .78rem; }
.leer-hinweis.gross { padding: 2rem; max-width: 640px; margin: 2rem auto; background: #fff; }
.projekt-ziel { color: var(--leise); }
.struktur-kopf { margin-bottom: .6rem; }
.phase { padding-top: .9rem; }
.phase-kopf { display: flex; align-items: center; gap: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linie-2); margin-bottom: .3rem; }
.phase-kopf .phasen-nr { width: 28px; height: 28px; font-size: .85rem; }
.phase-titel { flex: 1; }
.phase-titel h2 { margin: 0; }
.phase-menue { position: relative; }
.phase-menue summary { list-style: none; cursor: pointer; padding: .1rem .55rem; border-radius: var(--radius-klein); font-size: 1.2rem; line-height: 1; color: var(--leise); }
.phase-menue summary::-webkit-details-marker { display: none; }
.phase-menue summary:hover { background: var(--linie-2); }
.phase-menue .menue { position: absolute; right: 0; top: 2rem; z-index: 5; width: 340px; background: #fff; border: 1px solid var(--linie);
                      border-radius: var(--radius); box-shadow: var(--schatten-hoch); padding: .9rem; display: grid; gap: .6rem; }
.baum { list-style: none; margin: 0; padding: 0; }
.baum > li { padding: .55rem 0; border-bottom: 1px solid var(--linie-2); }
.baum-zeile { display: flex; gap: .7rem; align-items: flex-start; }
.baum-zeile .ampel { margin-top: .4rem; }
.baum-zeile .inhalt { flex: 1; min-width: 0; }
.baum-zeile .titel { display: inline; }
.baum .teile { margin: .35rem 0 0 1.6rem; padding-left: .8rem; border-left: 2px solid var(--linie); font-size: .9rem; }
.baum .teile li:last-child { border-bottom: 0; }
details.mini { margin: .25rem 0 0 1.6rem; font-size: .82rem; }
details.mini summary { cursor: pointer; color: var(--leise); list-style: none; display: inline-block; }
details.mini summary::-webkit-details-marker { display: none; }
details.mini summary:hover { color: var(--magenta); }
details.mini form { margin-top: .4rem; }
.neu-aufgabe { margin-top: .8rem; }
.neue-phase { background: #fff; border: 2px dashed #d3d7db; border-radius: var(--radius); padding: .7rem; }

/* ---------- Labels-Seite ---------- */
.label-zeile { display: grid; grid-template-columns: 120px 1fr 130px 40px auto auto; gap: .6rem; align-items: center;
               padding: .45rem 0; border-bottom: 1px solid var(--linie-2); }
.label-zeile.neu { border-bottom: 0; grid-template-columns: 120px 1fr 130px 40px auto; }
@media (max-width: 700px) { .label-zeile, .label-zeile.neu { grid-template-columns: 1fr 1fr; } }

/* ---------- Vorlagen ---------- */
.ps-vorlage { background: var(--blau); color: #fff; }
.projekt-karte.vorlage { border-top: 3px solid var(--blau); }
.projekt-karte.vorlage h2 a { color: #000; } .projekt-karte.vorlage h2 a:hover { color: var(--magenta); }
.frist { display: inline-flex; align-items: center; background: #eef1f5; color: #2b3a4d; border-radius: 999px; padding: .05rem .5rem;
         font-size: .74rem; font-weight: 700; white-space: nowrap; }
.stichtag-chip { background: var(--blau); color: #fff; border-radius: 999px; padding: .08rem .6rem; font-size: .76rem; font-weight: 700; }
.ampel-hinweis.vorlage { background: #e9edf3; color: #1b2a3c; }
.vorlagen-wahl { border-left: 4px solid var(--magenta); padding-bottom: .4rem; }
.vorlagen-wahl label { margin-bottom: .4rem; }
.spalten.stichtag { background: #f7f8fa; border-radius: var(--radius-klein); padding: .7rem .8rem 0; margin-bottom: .85rem; }

/* ---------- Zeitplan (Gantt) ---------- */
.gantt { display: grid; grid-template-columns: 320px minmax(0, 1fr); background: #fff; border: 1px solid var(--linie);
         border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.gantt-kopf { height: 52px; border-bottom: 1px solid var(--linie); background: #f8f9fa; position: relative;
              font-size: .72rem; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.gantt-namen { border-right: 1px solid var(--linie); position: relative; z-index: 2; background: #fff; }
.gantt-namen > .gantt-kopf { display: flex; align-items: flex-end; padding: 0 .8rem .45rem; }
.gantt-name { height: var(--zeile); display: flex; align-items: center; gap: .45rem; padding: 0 .7rem 0 1.4rem;
              border-bottom: 1px solid var(--linie-2); font-size: .84rem; white-space: nowrap; overflow: hidden; }
.gantt-name.phase { background: #f4f5f7; padding-left: .8rem; font-size: .86rem; }
.gantt-name.teil { padding-left: 2.4rem; color: var(--leise); }
.gantt-name a { color: var(--text); overflow: hidden; text-overflow: ellipsis; flex: 1; }
.gantt-name a:hover { color: var(--magenta); }
.gantt-name .ampel { box-shadow: none; width: 8px; height: 8px; }
.gantt-name .avatar { width: 20px; height: 20px; font-size: .55rem; }
.gantt-scroll { overflow-x: auto; }
.gantt-zeit { position: relative; }
.gantt-zeit .monate, .gantt-zeit .wochen { position: relative; height: 26px; }
.gantt-zeit .monate span { position: absolute; top: 6px; padding-left: 6px; border-left: 1px solid #cfd3d8; color: #000; white-space: nowrap; }
.gantt-zeit .wochen span { position: absolute; top: 6px; padding-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap; }
.gantt-flaeche { position: relative; }
.gantt-flaeche .we { position: absolute; top: 0; bottom: 0; width: calc(var(--px) * 2); background: #f6f7f8; }
.gantt-flaeche .wl { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--linie-2); }
.phasen-band { position: absolute; left: 0; right: 0; height: var(--zeile); background: rgba(15,29,46,.035); }
.linie { position: absolute; top: 0; bottom: 0; border-left: 2px solid; z-index: 3; pointer-events: none; }
.linie span { position: absolute; top: -1px; left: 3px; font-size: .66rem; font-weight: 700; color: #fff; padding: 0 .35rem; border-radius: 3px; white-space: nowrap; }
.linie.heute { border-color: var(--magenta); } .linie.heute span { background: var(--magenta); }
.linie.stichtag { border-color: var(--blau); border-left-style: dashed; } .linie.stichtag span { background: var(--blau); top: 16px; }
.pfeile { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.pfeile path { fill: none; stroke: #6b7480; stroke-width: 1.5; }
.pfeile path.konflikt { stroke: var(--rot); stroke-dasharray: 4 3; }
.gbalken { position: absolute; height: 20px; margin-top: 8px; border-radius: 5px; z-index: 2; cursor: grab; min-width: 6px;
           box-shadow: 0 1px 2px rgba(15,29,46,.2); user-select: none; }
.gbalken.phase { height: 8px; margin-top: 14px; background: var(--blau); cursor: default; border-radius: 2px; opacity: .8; }
.gbalken.teil { height: 14px; margin-top: 11px; opacity: .85; }
.gbalken.s-neu { background: #6e9bd6; } .gbalken.s-in_bearbeitung { background: #E89A2C; }
.gbalken.s-wartet { background: #9b7cc4; } .gbalken.s-erledigt { background: #8fc79a; }
.gbalken.rot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rot); }
.gbalken.konflikt { outline: 2px dashed var(--rot); outline-offset: 2px; }
.gbalken.zieht { opacity: .7; cursor: grabbing; }
.gbalken .gtext { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: .74rem; color: #fff;
                  white-space: nowrap; overflow: hidden; max-width: calc(100% - 16px); text-overflow: ellipsis; pointer-events: none; }
.gbalken .gtext.aussen { left: calc(100% + 6px); max-width: none; color: var(--text); }
/* Griff sitzt außen am rechten Rand – so lassen sich auch eintägige Balken noch verschieben */
.gbalken .griff { position: absolute; right: -9px; top: -2px; bottom: -2px; width: 9px; cursor: ew-resize; border-radius: 0 4px 4px 0; }
.gbalken .griff:hover, .gbalken:hover .griff { background: rgba(15,29,46,.25); }
.gbalken .gtext.aussen { left: calc(100% + 13px); }
.legende { display: inline-flex; align-items: center; gap: .3rem; margin-left: .8rem; }
.lg { display: inline-block; width: 14px; height: 0; border-top: 2px solid; }
.lg.heute { border-color: var(--magenta); } .lg.stichtag { border-color: var(--blau); border-top-style: dashed; }
.lg.konflikt { border-color: var(--rot); border-top-style: dashed; }
@media (max-width: 900px) { .gantt { grid-template-columns: 180px minmax(0, 1fr); } }

/* ---------- Abhängigkeiten, Anhänge, Gefahrenzone ---------- */
.blockiert { display: inline-flex; align-items: center; gap: .2rem; background: var(--rot-hell); color: var(--rot);
             border-radius: 4px; padding: 0 .35rem; font-weight: 700; }
.blockiert-mini { color: var(--rot); font-size: .8rem; }
#abhaengigkeiten h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin: .6rem 0 .2rem; }
#abhaengigkeiten .teile form { display: inline; }
.anhaenge { list-style: none; margin: 0 0 .7rem; padding: 0; }
.anhaenge li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--linie-2); }
.anhaenge li form { display: inline; }
.anhaenge .inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anhaenge .inhalt a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhaenge .vorschau img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); display: block; }
.datei-symbol { width: 48px; height: 48px; border-radius: 6px; background: #eef1f5; color: #2b3a4d; display: inline-flex;
                align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; flex: none; }
.ablage { display: block; position: relative; border: 2px dashed #cfd3d8; border-radius: var(--radius); padding: .9rem;
          text-align: center; color: var(--leise); cursor: pointer; }
.ablage:hover, .ablage.drueber { border-color: var(--magenta); background: var(--magenta-hell); color: #000; }
.ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage .sym { vertical-align: -3px; }
.gefahrenzone { border-color: #f3c7c3; }

/* ---------- Kalender ---------- */
.kal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .kal { grid-template-columns: 1fr; } .kal-seite { display: none; } }
.kal-seite { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.kal-seite > .knopf { justify-content: center; }
.mini { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem; box-shadow: var(--schatten); }
.mini-kopf { display: flex; justify-content: space-between; align-items: center; padding: 0 .3rem .4rem; font-size: .88rem; }
.mini-kopf a { color: var(--leise); padding: 0 .4rem; font-size: 1.1rem; }
.mini table { width: 100%; text-align: center; font-size: .78rem; }
.mini th { color: var(--leise); font-weight: 400; padding: .15rem 0; }
.mini td a { display: block; padding: .22rem 0; border-radius: 50%; color: var(--text); width: 26px; margin: 0 auto; }
.mini td a:hover { background: var(--linie-2); }
.mini td a.fremd { color: #b6bcc4; }
.mini td a.heute { background: var(--magenta); color: #fff; font-weight: 700; }
.mini td a.gewaehlt:not(.heute) { box-shadow: inset 0 0 0 1.5px var(--blau); font-weight: 700; }
.kal-filter label { font-size: .82rem; color: var(--leise); display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.kal-filter select { font-size: .85rem; }
.kal-legende { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--leise); }
.kal-legende span { display: flex; align-items: center; gap: .45rem; }
.kal-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; font-style: normal; }
.kal-legende i.faellig-i, .kal-legende i.stichtag-i { width: auto; height: auto; color: var(--text); font-size: .75rem; }
.kal-seite > a.klein { display: flex; align-items: center; gap: .35rem; }
.kal-seite .sym { width: 15px; height: 15px; }

.kal-leiste { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.kal-leiste h1 { font-size: 1.3rem; flex: 1; min-width: 220px; }
.kal-pfeile { display: inline-flex; gap: .2rem; }
.kal-pfeile .knopf { padding: .3rem .65rem; font-size: 1rem; }

/* Chips (ganztägig, Monat, Team) */
.kal-chip { display: flex; align-items: center; gap: .3rem; background: color-mix(in srgb, var(--f) 14%, #fff); color: #1b2533;
            border-left: 3px solid var(--f); border-radius: 4px; padding: .1rem .4rem; font-size: .74rem; line-height: 1.45;
            margin-bottom: 2px; cursor: pointer; overflow: hidden; white-space: nowrap; }
.kal-chip:hover { background: color-mix(in srgb, var(--f) 24%, #fff); }
.kal-chip .kal-text { overflow: hidden; text-overflow: ellipsis; }
.kal-chip b { font-weight: 700; flex: none; }
.kal-chip.faellig { background: #fff; border: 1px solid color-mix(in srgb, var(--f) 45%, #fff); border-left: 3px solid var(--f); }
.kal-chip.stichtag { background: var(--blau); color: #fff; border-left-color: var(--magenta); cursor: pointer; }
.kal-typ { font-size: .7rem; flex: none; }
.ablage-tag.ziel { background: var(--magenta-hell) !important; outline: 2px dashed var(--magenta); outline-offset: -2px; }

/* Woche */
.kal-woche { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.kw-kopf, .kw-ganz, .kw-raster { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.kw-kopf > div { padding: .5rem .5rem .4rem; border-left: 1px solid var(--linie-2); font-size: .8rem; color: var(--leise); }
.kw-kopf > div:first-child { border: 0; }
.kw-kopf b { font-size: 1.25rem; color: #000; margin-left: .2rem; }
.kw-kopf .heute b { background: var(--magenta); color: #fff; border-radius: 50%; display: inline-flex; width: 32px; height: 32px;
                    align-items: center; justify-content: center; font-size: 1rem; }
.kw-kopf .heute span { color: var(--magenta); font-weight: 700; }
.kw-ganz { border-top: 1px solid var(--linie); border-bottom: 2px solid var(--linie); background: #fafbfb; }
.kw-ganz > div { min-height: 34px; padding: 3px; border-left: 1px solid var(--linie-2); }
.kw-ganz .kw-zeit { border: 0; color: var(--leise); text-align: right; padding: .5rem .4rem 0 0; font-size: .66rem; }
.kw-scroll { height: calc(100vh - 290px); min-height: 420px; overflow-y: auto; }
.kw-raster { position: relative; height: calc(var(--stunde) * 24); }
.kw-zeit { position: relative; }
.kw-raster > .kw-zeit span { position: absolute; right: .4rem; transform: translateY(-50%); font-size: .68rem; color: var(--leise); }
.kw-raster > .kw-zeit span:first-child { display: none; }
.kw-tag { position: relative; border-left: 1px solid var(--linie-2); cursor: cell;
          background-image: linear-gradient(to bottom, var(--linie-2) 1px, transparent 1px),
                            linear-gradient(to bottom, transparent calc(var(--stunde) / 2), #f6f7f8 calc(var(--stunde) / 2), #f6f7f8 calc(var(--stunde) / 2 + 1px), transparent calc(var(--stunde) / 2 + 1px));
          background-size: 100% var(--stunde); }
.kw-tag.we, .kw-ganz .we, .km-tag.we { background-color: #fafafa; }
.kw-tag.heute { background-color: #fff8fc; }
.jetzt { position: absolute; left: -1px; right: 0; border-top: 2px solid var(--magenta); z-index: 4; pointer-events: none; }
.jetzt::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); }
.kw-termin { position: absolute; z-index: 2; background: color-mix(in srgb, var(--f) 16%, #fff); border-left: 3px solid var(--f);
             border-radius: 5px; padding: .15rem .35rem; font-size: .74rem; line-height: 1.3; overflow: hidden; cursor: grab;
             box-shadow: 0 0 0 1px #fff; display: flex; flex-direction: column; color: #1b2533; }
.kw-termin:hover { background: color-mix(in srgb, var(--f) 26%, #fff); z-index: 3; }
.kw-termin b { font-weight: 700; font-size: .7rem; }
.kw-termin small { color: var(--leise); font-size: .68rem; }
.kw-termin .kal-link { color: var(--gruen); }
.kw-termin.zieht { opacity: .75; box-shadow: var(--schatten-hoch); cursor: grabbing; z-index: 5; }
.kw-griff { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }

/* Monat */
.kal-monat { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.km-kopf, .km-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.km-kopf div { padding: .45rem .55rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise);
               font-weight: 700; background: #f8f9fa; border-bottom: 1px solid var(--linie); }
.km-tag { min-height: 118px; padding: .3rem .35rem; border-right: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); cursor: cell; }
.km-tag.fremd { background: #fafbfb; } .km-tag.fremd .km-nr { color: #b6bcc4; }
.km-nr { display: inline-block; font-size: .8rem; color: var(--text); margin-bottom: .2rem; padding: 0 .3rem; border-radius: 999px; }
.km-tag.heute .km-nr { background: var(--magenta); color: #fff; font-weight: 700; }
.km-mehr { font-size: .72rem; color: var(--leise); padding-left: .3rem; }

/* Agenda */
.kal-agenda .karte { padding: .8rem 1.1rem; }
.kal-agenda h2.heute { color: var(--magenta); }
.ag-liste { list-style: none; margin: 0; padding: 0; }
.ag-eintrag { display: flex; align-items: center; gap: .8rem; padding: .5rem .4rem; border-top: 1px solid var(--linie-2); cursor: pointer; border-radius: var(--radius-klein); }
.ag-eintrag:hover { background: #fafbfb; }
.ag-zeit { width: 150px; flex: none; font-size: .82rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.ag-farbe { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.ag-eintrag .inhalt { flex: 1; min-width: 0; }

/* Team */
.kal-team { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow-x: auto; }
.kal-team table { table-layout: fixed; min-width: 900px; }
.kal-team th, .kal-team td { border-bottom: 1px solid var(--linie-2); border-left: 1px solid var(--linie-2); padding: .35rem; vertical-align: top; }
.kal-team thead th { font-size: .78rem; color: var(--leise); background: #f8f9fa; text-align: left; }
.kal-team thead th.heute { color: var(--magenta); }
.kal-team tbody th { width: 190px; text-align: left; font-weight: 400; font-size: .85rem; border-left: 0; }
.kal-team td { height: 64px; cursor: cell; }
.kal-team td.heute { background: #fff8fc; } .kal-team td.we { background: #fafafa; }

/* Termin-Seite, Termin-Zeilen */
.termin-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .5rem; flex: none; }
h1 .termin-punkt { vertical-align: 3px; }
.termin-zeile { display: flex; align-items: center; gap: .7rem; padding: .5rem .4rem; border-top: 1px solid var(--linie-2);
                color: var(--text); border-radius: var(--radius-klein); }
.termin-zeile:hover { background: #fafbfb; color: var(--text); }
.termin-zeile > span:nth-child(2) { flex: 1; }
.termin-zeile .termin-punkt { margin: 0; }
.formular .ganztags { justify-content: flex-start; padding-top: 1.6rem; }
.spalten.zeiten { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.teilnehmer { margin: -.4rem 0 .85rem; }
.teilnehmer .chip input { display: none; }
.teilnehmer .chip { font-weight: 400; }
.abo-link { display: flex; gap: .5rem; margin: .6rem 0; }
.abo-link input { flex: 1; font-family: Consolas, monospace; font-size: .8rem; }
.hinweis-box { background: var(--gelb-hell); border-radius: var(--radius-klein); padding: .6rem .8rem; color: #5c4400; }
.anleitung { padding-left: 1.2rem; margin: 0; } .anleitung li { margin-bottom: .55rem; }

/* ---------- Dashboard (Übersicht) ---------- */
.schnellzugriff { display: flex; gap: .5rem; flex-wrap: wrap; }
.dash .karte, .kpi { border-color: #e8eaed; box-shadow: 0 1px 2px rgba(15,29,46,.04); }
.karte-unter { margin: .1rem 0 0; font-size: .76rem; color: #8a929c; }
.dash .karte { padding: 1.15rem 1.3rem 1.2rem; }
.dash .karte-kopf { align-items: flex-start; margin-bottom: 1rem; }
.dash h2 { font-size: .95rem; letter-spacing: -.005em; }
.dash h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; margin: 1.2rem 0 .55rem; color: #8a929c; }

/* Kennzahlen */
.kpi-leiste { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 1300px) { .kpi-leiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kpi-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: .85rem 1rem .8rem; color: var(--text);
       display: flex; flex-direction: column; gap: .2rem; transition: box-shadow .15s, border-color .15s; min-width: 0; }
.kpi:hover { box-shadow: 0 6px 18px rgba(15,29,46,.08); border-color: #dfe2e6; color: var(--text); }
.kpi-titel { font-size: .74rem; color: #6b7480; font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.kpi-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.kpi-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; min-height: 38px; }
.kpi-wert { font-size: 1.85rem; line-height: 1.05; color: #0b1320; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi.warn .kpi-wert { color: var(--rot); }
.kpi-spark { width: 46%; max-width: 92px; height: 32px; flex: none; overflow: visible; }
.kpi-unter { font-size: .72rem; color: #8a929c; line-height: 1.35; }
.kpi-unter .delta { display: inline-block; background: #eef3fa; color: #2c5788; font-weight: 700; border-radius: 999px;
                    padding: 0 .4rem; margin-right: .15rem; font-variant-numeric: tabular-nums; }

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
.dash > .karte { margin: 0; min-width: 0; }
.d3 { grid-column: span 3; } .d4 { grid-column: span 4; } .d6 { grid-column: span 6; } .d8 { grid-column: span 8; }
@media (max-width: 1300px) { .d3 { grid-column: span 6; } .d4 { grid-column: span 6; } .d8, .d6 { grid-column: span 12; } }
@media (max-width: 800px) { .dash > .karte { grid-column: span 12; } }

/* Liniendiagramm */
.lc { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 220px 22px; }
.lc-y { position: relative; }
.lc-y span { position: absolute; right: 8px; transform: translateY(-50%); font-size: .68rem; color: #9aa1aa; font-variant-numeric: tabular-nums; }
.lc-flaeche { position: relative; }
.lc-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-linie { position: absolute; left: 0; right: 0; border-top: 1px dashed #e9ecef; }
.lc-linie.basis { border-top: 1px solid #d8dce1; }
.lc-spalte { position: absolute; top: 0; bottom: 0; outline: none; z-index: 2; }
.lc-spalte::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid #c7ccd3; opacity: 0; }
.lc-spalte:hover::before, .lc-spalte:focus::before { opacity: 1; }
.lc-punkt { position: absolute; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
            background: #fff; border: 2px solid var(--f); opacity: 0; box-shadow: 0 0 0 2px #fff; }
.lc-spalte:hover .lc-punkt, .lc-spalte:focus .lc-punkt { opacity: 1; }
.lc-x { position: relative; }
.lc-x span { position: absolute; top: 6px; transform: translateX(-50%); font-size: .68rem; color: #9aa1aa; white-space: nowrap; }
.lc-x span:first-child { transform: none; } .lc-x span:last-child { transform: translateX(-100%); }
.viz-legende { display: flex; gap: 1rem; font-size: .74rem; color: #6b7480; flex-wrap: wrap; padding-top: .15rem; }
.viz-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.viz-legende i { display: inline-block; flex: none; }
.viz-legende i.lg-linie { width: 14px; height: 3px; border-radius: 2px; background: var(--f); }
.viz-legende i.lg-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.viz-tabelle { margin-top: .9rem; font-size: .78rem; }
.viz-tabelle summary { cursor: pointer; color: #8a929c; }
.tabelle-scroll { overflow-x: auto; margin-top: .4rem; }
.tabelle-scroll td { white-space: nowrap; padding: .25rem .4rem; }

/* Ring */
.ring-block { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; justify-content: center; padding: .2rem 0 .3rem; }
.ring { width: 156px; height: 156px; flex: none; }
.ring-seg { transition: stroke-width .15s; cursor: pointer; }
.ring-seg:hover { stroke-width: 18; }
.ring-zahl { font-size: 28px; font-weight: 700; fill: #0b1320; letter-spacing: -.5px; }
.ring-text { font-size: 11px; fill: #8a929c; }
.ring text { pointer-events: none; }
.ring-legende { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.ring-legende a { display: grid; grid-template-columns: 10px 1fr auto 3.2em; align-items: center; gap: .55rem; padding: .45rem .2rem;
                  border-bottom: 1px solid #f0f2f4; color: var(--text); font-size: .85rem; }
.ring-legende li:last-child a { border-bottom: 0; }
.ring-legende a:hover { color: var(--magenta); }
.ring-legende i { width: 10px; height: 10px; border-radius: 3px; }
.ring-legende b { font-variant-numeric: tabular-nums; }
.ring-legende em { font-style: normal; color: #8a929c; font-size: .76rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Schlanke Balken */
.hb { display: flex; flex-direction: column; gap: .75rem; }
.hb-zeile { display: flex; flex-direction: column; gap: .3rem; color: var(--text); }
a.hb-zeile:hover { color: var(--text); } a.hb-zeile:hover .hb-label { color: var(--magenta); }
.hb-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .8rem; }
.hb-label { color: #3a434e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.hb-label:hover { color: var(--magenta); }
.hb-kopf b { font-size: .8rem; color: #0b1320; font-variant-numeric: tabular-nums; }
.hb-spur { display: block; height: 6px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.hb-spur > span { display: block; height: 100%; background: var(--f); border-radius: 999px; }
.hb-spur > .hb-stapel { display: flex; gap: 2px; background: none; border-radius: 999px; overflow: hidden; }
.hb-stapel a { display: block; height: 100%; background: var(--f); min-width: 3px; }
.hb-stapel a:hover, a.hb-zeile:hover .hb-spur > span { filter: brightness(1.1); }
.abdeckung { display: flex; flex-direction: column; gap: .3rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid #f0f2f4; }

/* Schlanke Säulen */
.vb { display: flex; gap: .4rem; height: 210px; padding-top: .2rem; }
.vb-spalte { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; outline: none; min-width: 0; }
.vb-spalte b { font-size: .78rem; color: #0b1320; font-variant-numeric: tabular-nums; }
.vb-spur { flex: 1; width: 100%; max-width: 30px; background: #eef1f4; border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.vb-spur > span { display: block; width: 100%; background: var(--f); border-radius: 8px; }
.vb-spalte:hover .vb-spur > span, .vb-spalte:focus .vb-spur > span { filter: brightness(1.1); }
.vb-spalte small { font-size: .66rem; color: #8a929c; text-align: center; line-height: 1.2; white-space: nowrap; }

.viz-tip { position: fixed; z-index: 60; background: #0f1d2e; color: #fff; font-size: .76rem; line-height: 1.5; padding: .45rem .65rem;
           border-radius: 8px; pointer-events: none; box-shadow: 0 8px 24px rgba(15,29,46,.25); white-space: pre-line; }

/* Bereiche */
.bereiche-kopf { margin: .5rem 0 .7rem; flex-wrap: wrap; }
.bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.bereich { display: flex; align-items: flex-start; gap: .7rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
           padding: .8rem .9rem; color: var(--text); box-shadow: var(--schatten); }
a.bereich:hover { box-shadow: var(--schatten-hoch); color: var(--text); border-color: #cfd3d8; }
.bereich.geplant { background: #fafbfb; box-shadow: none; border-style: dashed; }
.bereich-sym { width: 34px; height: 34px; border-radius: 8px; background: var(--blau); color: #fff; display: flex;
               align-items: center; justify-content: center; flex: none; }
.bereich.geplant .bereich-sym { background: #e3e6e9; color: var(--leise); }
.bereich-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bereich-text span { font-size: .78rem; color: var(--leise); }
.bstatus { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .45rem; border-radius: 999px; flex: none; }
.bstatus.live { background: var(--gruen-hell); color: var(--gruen); }
.bstatus.geplant { background: #eef0f2; color: var(--leise); }
.gefahrenzone h2 { color: var(--rot); }

/* ---------- Objekt: Stammdaten, Einheiten ---------- */
.kpi-leiste.objekt-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpi-leiste.objekt-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.objekt-kpi .kpi-wert { font-size: 1.6rem; }
.stammdaten { display: grid; grid-template-columns: 140px 1fr; gap: .55rem 1rem; margin: 0; font-size: .9rem; }
.stammdaten dt { color: #6b7480; font-size: .8rem; padding-top: .1rem; }
.stammdaten dd { margin: 0; }
.kontakt-zeile { display: flex; flex-direction: column; gap: .1rem; padding: .55rem 0; border-bottom: 1px solid var(--linie-2); }
.kontakt-zeile:last-child { border-bottom: 0; }
.iban { font-family: Consolas, "Courier New", monospace; font-size: .85rem; letter-spacing: .02em; }
.einheit-art { display: inline-block; font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; background: #eef1f5; color: #3a434e; }
.einheit-art.g-wohnen { background: #e9f0fa; color: #2c5788; }
.einheit-art.g-gewerbe { background: #fdf0e6; color: #9a4b00; }
.einheit-art.g-stellplatz { background: #f1f3f5; color: #5f6670; }
.leer-chip { display: inline-block; font-size: .74rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
             background: var(--rot-hell); color: var(--rot); }
tr.leer-zeile td { background: #fffafa; }
.kommend { color: #2c5788; margin-top: .15rem; }
.verlauf-mini { font-size: .76rem; margin-top: .2rem; }
.verlauf-mini summary { cursor: pointer; color: #8a929c; }
.verlauf-mini ul { margin: .25rem 0 0; padding-left: 1rem; color: #3a434e; }
.zahl-links { font-variant-numeric: tabular-nums; color: #6b7480; }
.liste td.zahl { white-space: nowrap; }

.erreichbar { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .76rem; margin-top: .15rem; }
.erreichbar a { color: #2c5788; white-space: nowrap; }
.tabellen-suche { min-width: 260px; font-size: .85rem; padding: .35rem .6rem; }
.vertrag-zeile { border-bottom: 1px solid var(--linie-2); }
.vertrag-zeile:last-child { border-bottom: 0; }
.vertrag-zeile > summary { display: flex; align-items: center; gap: .7rem; padding: .7rem .2rem; cursor: pointer; list-style: none; flex-wrap: wrap; }
.vertrag-zeile > summary::-webkit-details-marker { display: none; }
.vertrag-zeile > summary:hover { background: #fafbfb; }
.vertrag-zeile[open] > summary { border-bottom: 1px dashed var(--linie); margin-bottom: .8rem; }
.vertrag-zeile.bald > summary { box-shadow: inset 3px 0 0 var(--rot); padding-left: .6rem; }
.vertrag-rechts { margin-left: auto; display: flex; gap: 1rem; font-size: .82rem; }
.vertrag-kat { font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #eef1f5; color: #3a434e; }
.vertrag-kat.k-versicherung { background: #e9f0fa; color: #2c5788; }
.vertrag-kat.k-wartung { background: #fdf0e6; color: #9a4b00; }
.vertrag-kat.k-versorger { background: #edf6eb; color: #3f7a36; }
.vertrag-kat.k-dienstleister { background: #f3eefa; color: #6b4a99; }
.neu-block > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; color: #2c5788; }
.neu-block > summary::-webkit-details-marker { display: none; }
.neu-block[open] > summary { margin-bottom: .9rem; }
.neu-block .sym, .vertrag-zeile .sym { width: 15px; height: 15px; vertical-align: -3px; }

/* ---------- Objektliste ---------- */
.objekt-tabelle small { color: #8a929c; font-size: .7rem; }
.objekt-tabelle tfoot td { background: #f8f9fa; border-top: 2px solid var(--linie); border-bottom: 0; }
.voll { color: var(--gruen); font-weight: 700; }
.rot-text { color: var(--rot); }
.gruppen-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 .6rem; }
.gruppen-kopf h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.gruppen-summe { font-size: .82rem; color: #6b7480; }
.objekt-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.objekt-kachel { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 1rem 1.1rem .9rem; color: var(--text);
                 display: flex; flex-direction: column; gap: .35rem; transition: box-shadow .15s; border-top: 3px solid #3b6ea8; }
.objekt-kachel.mit-leer { border-top-color: var(--rot); }
.objekt-kachel:hover { box-shadow: 0 6px 18px rgba(15,29,46,.08); color: var(--text); }
.objekt-kachel h3 { margin: 0; font-size: 1rem; }
.objekt-kachel p { margin: 0; }
.ok-kopf { display: flex; justify-content: space-between; align-items: center; }
.ok-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .5rem 0; padding: .6rem 0;
             border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
.ok-zahlen div { display: flex; flex-direction: column; }
.ok-zahlen b { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok-zahlen span { font-size: .68rem; color: #8a929c; }
.ok-fuss { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; }
.objekt-karte { padding: 0; overflow: hidden; }
#karte { height: calc(100vh - 360px); min-height: 460px; }
.kpunkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.kpunkt.ok { background: #3b6ea8; } .kpunkt.leer { background: var(--rot); }

/* ---------- Objektakte (Stil prometriq / onOffice) ---------- */
.akte-kopf { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.4rem; background: #fff; border: 1px solid #e8eaed;
             border-radius: 12px; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(15,29,46,.04); }
@media (max-width: 900px) { .akte-kopf { grid-template-columns: 1fr; } }
.akte-bild { position: relative; min-height: 210px; background: #e9edf2; }
.akte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.akte-bild .karten-bild { filter: saturate(.75); }
.bild-hinweis { position: absolute; left: .5rem; bottom: .4rem; font-size: .62rem; color: #3a434e; background: rgba(255,255,255,.8); padding: 0 .3rem; border-radius: 3px; }
.bild-leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa1aa; }
.bild-leer .sym { width: 56px; height: 56px; stroke-width: 1.2; }
.foto-form { position: absolute; right: .6rem; top: .6rem; }
.foto-knopf { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; background: rgba(255,255,255,.92); color: #1b2533;
              padding: .25rem .6rem; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); opacity: 0; transition: opacity .15s; }
.akte-bild:hover .foto-knopf, .akte-bild:focus-within .foto-knopf, .akte-bild:not(:has(img)) .foto-knopf { opacity: 1; }
.foto-knopf input { display: none; }
.foto-knopf .sym { width: 14px; height: 14px; }
.akte-titel { padding: 1rem 1.3rem 1.1rem 0; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
@media (max-width: 900px) { .akte-titel { padding: 0 1rem 1rem; } }
.akte-leiste { display: flex; justify-content: space-between; align-items: center; }
.akte-leiste .brotkrumen { margin: 0; }
.blaettern { display: inline-flex; align-items: center; gap: .5rem; }
.blaettern a, .blaettern > span:not(.leise) { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
                border: 1px solid #e3e6e9; border-radius: 6px; font-size: .7rem; color: #3a434e; }
.blaettern > span:not(.leise) { color: #d0d4d9; }
.blaettern a:hover { border-color: var(--magenta); color: var(--magenta); }
.akte-titel h1 { font-size: 1.55rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kopf-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem 1.2rem; padding: .7rem 0;
               border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
@media (max-width: 1200px) { .kopf-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kopf-felder div { display: flex; flex-direction: column; min-width: 0; }
.kopf-felder .breit { grid-column: span 2; }
.kopf-felder span { font-size: .7rem; color: #8a929c; }
.kopf-felder b { font-size: .88rem; font-weight: 400; color: #0b1320; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akte-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }

.akte-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .akte-raster { grid-template-columns: 1fr; } }
.akte-raster .karte { margin-bottom: 1rem; }
.merkmal-suche { font-size: .82rem; padding: .3rem .6rem; min-width: 180px; }
.merkmal-tabelle { width: 100%; font-size: .86rem; }
.merkmal-tabelle th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #8a929c;
                      padding: .4rem .5rem; border-bottom: 1px solid #e8eaed; }
.merkmal-tabelle th:nth-child(3), .merkmal-tabelle td:nth-child(3) { width: 60px; }
.merkmal-tabelle td { padding: .42rem .5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.merkmal-tabelle td:first-child { color: #3a434e; width: 38%; padding-left: 1.4rem; }
.gruppe-zeile td { background: #f6f7f9; padding: 0 !important; }
.gruppe-schalter { border: 0; background: none; width: 100%; text-align: left; padding: .45rem .6rem; font: inherit; font-weight: 700;
                   font-size: .8rem; color: #1b2533; cursor: pointer; }
.merkmal-gruppe.zu .merkmal-zeile { display: none; }
.bearbeiten-form fieldset { border: 0; border-top: 1px solid #eef0f2; margin: 0 0 .6rem; padding: .6rem 0 0; }
.bearbeiten-form legend { font-weight: 700; font-size: .8rem; color: #1b2533; padding-right: .5rem; }
.zeilen-feld { display: grid !important; grid-template-columns: 38% minmax(0, 1fr); align-items: center; gap: .8rem !important;
               margin-bottom: .45rem !important; font-weight: 400 !important; }
.zeilen-feld > span { color: #3a434e; font-size: .84rem; }
.zeilen-feld input, .zeilen-feld select, .zeilen-feld textarea { padding: .35rem .55rem; font-size: .88rem; }
.karte-lage { padding: 0; overflow: hidden; }
#lagekarte { height: 300px; }
.karte-lage > a { display: block; padding: .5rem .9rem; }

/* Kacheln mit Bild (Objektliste) */
.objekt-kachel { padding: 0; overflow: hidden; }
.objekt-kachel .kachel-bild { height: 130px; background: #e9edf2 center / cover no-repeat; position: relative; }
.objekt-kachel .kachel-bild.karte-bild { filter: saturate(.75); }
.objekt-kachel .kachel-inhalt { padding: .8rem 1rem .8rem; display: flex; flex-direction: column; gap: .35rem; }

/* Objektakte: Haus-Symbol im Kopf, Bildkarte rechts */
.akte-kopf { grid-template-columns: 120px minmax(0, 1fr); }
.akte-symbol { display: flex; align-items: center; justify-content: center; background: #eef3fa; color: #3b6ea8; }
.akte-symbol.a-weg { background: #edf6eb; color: #3f7a36; }
.akte-symbol .sym { width: 52px; height: 52px; stroke-width: 1.3; }
@media (max-width: 900px) { .akte-kopf { grid-template-columns: 1fr; } .akte-symbol { height: 70px; } }
.karte-bild { padding: 0; overflow: hidden; }
.karte-bild .objekt-foto { display: block; width: 100%; height: 240px; object-fit: cover; }
.karte-bild .streetview { display: block; width: 100%; height: 260px; border: 0; }
.bild-platzhalter { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
                    background: repeating-linear-gradient(135deg, #f4f6f8 0 12px, #eef1f4 12px 24px); color: #9aa1aa; font-size: .82rem; }
.bild-platzhalter .sym { width: 44px; height: 44px; stroke-width: 1.2; }
.bild-leiste { display: flex; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; border-top: 1px solid #f0f2f4; }
.bild-leiste label { cursor: pointer; }
.bild-leiste .sym { width: 14px; height: 14px; }

.filter-inline { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-inline select { font-size: .85rem; padding: .35rem .55rem; }

.ordner-pfad { font-family: Consolas, "Courier New", monospace; font-size: .8rem; word-break: break-all; margin-right: .4rem; }

/* Board: Ziehen wie bei Trello */
.bkarte { touch-action: none; }
.bkarte.fliegt { position: fixed; z-index: 1000; margin: 0; pointer-events: none; transform: rotate(3deg) scale(1.02);
                 box-shadow: 0 14px 32px rgba(15,29,46,.28); transition: transform .12s ease; }
.bkarte.fliegt.landet { transform: none; box-shadow: var(--schatten); transition: left .16s ease, top .16s ease, transform .16s ease, box-shadow .16s ease; }
.karten-platz { background: rgba(15,29,46,.10); border-radius: 8px; margin-bottom: .55rem; }
.spalte { transition: background-color .15s ease; }
.spalte.ueber { background: #dfe3e8; }
body.am-ziehen, body.am-ziehen * { cursor: grabbing !important; user-select: none !important; }

/* ---------- Projekt-Strukturansicht ---------- */
.phasen-streifen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: .6rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: .2rem; }
.ps-schritt { display: flex; gap: .6rem; align-items: flex-start; background: #fff; border: 1px solid #e8eaed; border-radius: 10px;
              padding: .65rem .8rem; color: var(--text); box-shadow: 0 1px 2px rgba(15,29,46,.04); position: relative; }
.ps-schritt:hover { border-color: #cfd3d8; color: var(--text); }
.ps-schritt.fertig { background: #f6fbf7; }
.ps-nr { width: 24px; height: 24px; border-radius: 50%; background: var(--blau); color: #fff; font-size: .75rem; font-weight: 700;
         display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ps-schritt.fertig .ps-nr { background: var(--gruen); }
.ps-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.ps-text b { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-text small { font-size: .7rem; color: #8a929c; }
.ps-text .fortschritt { width: 100%; height: 4px; }
.struktur-kopf .zeile { gap: .4rem; }
.phase { padding: .2rem 0 .4rem; overflow: visible; }
.phase .phase-kopf { padding: .7rem 1.1rem .7rem .6rem; margin: 0; border-bottom: 1px solid #f0f2f4; }
.phase-schalter { border: 0; background: none; cursor: pointer; color: #8a929c; font-size: .9rem; width: 22px; padding: 0; transition: transform .15s; }
.phase.zu .phase-schalter { transform: rotate(-90deg); }
.phase.zu .phase-inhalt { display: none; }
.phase.zu .phase-kopf { border-bottom: 0; }
.phase-inhalt { padding: 0 1.1rem .6rem; }
.struktur-tabelle { width: 100%; font-size: .87rem; }
.struktur-tabelle th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #9aa1aa;
                       font-weight: 700; padding: .55rem .5rem .35rem; border-bottom: 1px solid #f0f2f4; }
.struktur-tabelle th:nth-child(2), .struktur-tabelle td:nth-child(2) { width: 110px; }
.struktur-tabelle th:nth-child(3), .struktur-tabelle td:nth-child(3) { width: 150px; }
.struktur-tabelle th:nth-child(4), .struktur-tabelle td:nth-child(4) { width: 110px; }
.struktur-tabelle th:nth-child(5), .struktur-tabelle td:nth-child(5) { width: 190px; }
.struktur-tabelle td { padding: .45rem .5rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.aufgabe-zeile:hover td, .teil-zeile:hover td { background: #fafbfc; }
.aufgabe-zeile.erledigt .titel, .teil-zeile.erledigt a { color: #9aa1aa; text-decoration: line-through; }
.az-titel { display: flex; align-items: center; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.az-titel .titel { font-weight: 400; }
.az-titel .ampel { box-shadow: none; width: 8px; height: 8px; }
.az-titel.teil { padding-left: 2.3rem; gap: .3rem; }
.az-titel.teil form { display: inline; }
.az-titel.teil a { color: var(--text); }
.teil-schalter { border: 0; background: #eef1f4; color: #3a434e; width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
                 font-size: .7rem; padding: 0; flex: none; }
.teil-schalter.offen { background: var(--blau); color: #fff; }
.teil-luecke { width: 20px; flex: none; }
.teil-zeile td { background: #fcfcfd; font-size: .84rem; }
.az-teile { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.az-teile .fortschritt { width: 60px; }
.teil-neu { opacity: 0; transition: opacity .12s; padding: .1rem .45rem; font-size: .74rem; }
.aufgabe-zeile:hover .teil-neu, .teil-neu:focus { opacity: 1; }
.teil-formular td { background: #f7f9fc; padding: .6rem .5rem .6rem 2.8rem; }
.aufgabe-neu-knopf { display: flex; align-items: center; gap: .35rem; border: 0; background: none; color: #6b7480; font: inherit;
                     font-size: .85rem; padding: .55rem .4rem; cursor: pointer; border-radius: 6px; margin-top: .3rem; }
.aufgabe-neu-knopf:hover { background: #f3f5f7; color: #000; }
.aufgabe-neu-knopf .sym { width: 15px; height: 15px; }
.phase .neu-aufgabe { margin-top: .5rem; }
.phase-leer { padding: .8rem .2rem 0; margin: 0; }
tr.blinkt td { animation: blinkt 1.6s ease; }
@keyframes blinkt { 0%, 40% { background: var(--magenta-hell); } 100% { background: transparent; } }
@media (max-width: 900px) { .struktur-tabelle th:nth-child(n+4), .struktur-tabelle td:nth-child(n+4) { display: none; } }

/* ---------- Kontakte (zentrale Suche) ---------- */
.kontakt-suche { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.kontakt-suche input[type=search] { flex: 1 1 320px; font-size: 1.05rem; padding: .65rem .9rem; border-radius: 10px; }
.kontakt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.kontakt-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
                 padding: .85rem 1rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; border-top: 3px solid #c9ced5; }
.kontakt-karte.r-mieter { border-top-color: var(--magenta); }
.kontakt-karte.r-eigentuemer { border-top-color: #3b6ea8; }
.kontakt-karte.r-beirat { border-top-color: #8a6bb8; }
.kontakt-karte.r-dienstleister { border-top-color: #2e8b6e; }
.kontakt-karte.r-ehemalig { opacity: .8; }
.kontakt-karte header { display: flex; gap: .65rem; align-items: center; min-width: 0; }
.kk-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--linie-2); color: #3a434e; font-weight: 700; font-size: .8rem;
             display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kk-name { display: flex; flex-direction: column; min-width: 0; }
.kk-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rolle { font-size: .75rem; color: var(--leise); }
.kk-objekt { display: flex; gap: .4rem; align-items: center; color: var(--text); font-size: .88rem; font-weight: 700; }
.kk-objekt:hover { color: var(--magenta); }
.kk-objekt .sym { width: 15px; height: 15px; flex: none; }
.kk-objekt small { font-weight: 400; color: var(--leise); }
.kk-einheiten { display: flex; flex-wrap: wrap; gap: .3rem; }
.kk-einheiten span { font-size: .74rem; background: #f3f5f7; border-radius: 5px; padding: .1rem .45rem; }
.kk-wege { display: flex; flex-direction: column; gap: .2rem; font-size: .86rem; min-width: 0; }
.kk-wege a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-wege a:hover { color: var(--magenta); }
.kk-wege small { color: var(--leise); }
.kontakt-karte footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto;
                        padding-top: .5rem; border-top: 1px solid var(--linie-2); }
.kk-aktionen { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.kk-offen { font-size: .78rem; font-weight: 700; color: var(--magenta); }
.kk-name a { color: var(--text); }
.kk-name a:hover { color: var(--magenta); }
.kk-rolle-zeile { display: flex; flex-direction: column; gap: .3rem; }

/* ---------- Kontakt-Akte ---------- */
.person-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto); gap: 1.2rem; align-items: center;
               background: #fff; border: 1px solid #e8eaed; border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1rem;
               box-shadow: var(--schatten); }
.pk-avatar { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
             font-size: 1.3rem; font-weight: 700; background: var(--magenta-hell); color: var(--magenta-dunkel); }
.pk-avatar.r-eigentuemer { background: #eef3fa; color: #2c5585; }
.pk-avatar.r-beirat { background: #f3eefa; color: #5d4485; }
.pk-avatar.r-dienstleister { background: #eaf6f1; color: #23664f; }
.pk-titel h1 { margin: .1rem 0 .4rem; }
.pk-titel .brotkrumen { margin: 0; }
.pk-rollen { display: flex; gap: .35rem; flex-wrap: wrap; }
.pk-chip { font-size: .74rem; background: #f3f5f7; border-radius: 20px; padding: .15rem .6rem; color: #3a434e; }
.pk-wege { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.pk-wege a { color: var(--text); }
.pk-wege a:hover { color: var(--magenta); }
.pk-wege small { color: var(--leise); }
@media (max-width: 900px) { .person-kopf { grid-template-columns: auto minmax(0, 1fr); } .pk-wege { grid-column: 1 / -1; } }
.art-wahl { display: flex; flex-wrap: wrap; gap: .35rem; }
.art-wahl label { cursor: pointer; }
.art-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.art-wahl span { display: inline-block; font-size: .82rem; padding: .3rem .7rem; border: 1px solid var(--linie); border-radius: 20px; background: #fff; }
.art-wahl input:checked + span { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.art-wahl input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.erfassen textarea { width: 100%; margin: .7rem 0 .85rem; }
.art-wahl { margin-bottom: .1rem; }
.formular label.haken-zeile { flex-direction: row; gap: .5rem; align-items: center; font-size: .88rem; color: var(--text); font-weight: 400; }
.formular label.haken-zeile input { width: auto; margin: 0; }
.zs-text a { color: var(--text); font-weight: 700; }
.zs-text a:hover { color: var(--magenta); }
.zeitstrahl { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--linie-2); }
.zeitstrahl li { position: relative; padding: 0 0 1rem .6rem; }
.zs-punkt { position: absolute; left: -1.55rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: #c9ced5;
            border: 2px solid #fff; box-shadow: 0 0 0 1px #c9ced5; }
.zs-anruf_ein .zs-punkt, .zs-anruf_aus .zs-punkt { background: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.zs-email .zs-punkt, .zs-brief .zs-punkt { background: #3b6ea8; box-shadow: 0 0 0 1px #3b6ea8; }
.zs-nutzung .zs-punkt { background: #fff; box-shadow: 0 0 0 1px #9aa1aa; }
.zs-kopf { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.zs-kopf b { font-size: .88rem; }
.zs-loeschen { margin-left: auto; }
.zs-loeschen button { border: 0; background: none; color: #b5bbc3; cursor: pointer; font-size: 1rem; }
.zs-loeschen button:hover { color: var(--rot); }
.zs-text { margin: .2rem 0 0; font-size: .88rem; white-space: pre-line; }
.zs-aufgabe { display: inline-flex; gap: .4rem; align-items: center; margin-top: .3rem; font-size: .84rem; color: var(--text);
              background: #f6f7f9; border-radius: 6px; padding: .2rem .55rem; }
.zs-aufgabe.erledigt { text-decoration: line-through; color: var(--leise); }
.pk-rolle { display: flex; flex-direction: column; gap: .2rem; padding: .6rem 0; border-bottom: 1px solid var(--linie-2); }
.pk-rolle:last-child { border-bottom: 0; }
.pk-einheit { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; background: #f6f7f9; border-radius: 6px; padding: .25rem .55rem; }
.pk-einheit b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-aufgabe { display: flex; gap: .45rem; align-items: center; padding: .35rem 0; color: var(--text); font-size: .87rem; border-bottom: 1px solid var(--linie-2); }
.pk-aufgabe .pk-t { flex: 1; min-width: 0; }
.pk-aufgabe:hover { color: var(--magenta); }
.pk-unter { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #9aa1aa; margin: .9rem 0 .2rem; }

/* ---------- Kontaktpflege & Handwerker ---------- */
.pk-aktionen { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.pk-aktionen form.inline, .pk-rolle form.inline { display: inline-flex; }
.pk-chip.gewerk { background: #eaf6f1; color: #23664f; font-weight: 700; }
.pk-weg { font-size: .82rem; color: var(--leise); }
.pk-weg b { color: var(--text); }
.pk-zuordnen { margin-top: .6rem; }
.pk-zuordnen summary { cursor: pointer; font-size: .85rem; color: var(--leise); font-weight: 700; }
.pk-zuordnen summary:hover { color: var(--magenta); }
.pk-zuordnen .formular { margin-top: .6rem; }
.link-knopf { border: 0; background: none; padding: 0 0 0 .3rem; color: var(--leise); text-decoration: underline; cursor: pointer; font: inherit; }
.link-knopf:hover { color: var(--rot); }
.merkmale { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .25rem; }
.merkmal { font-size: .72rem; background: var(--gelb-hell); color: #5c4400; border-radius: 20px; padding: .1rem .55rem; }
a.merkmal:hover { background: #ffeab0; color: #5c4400; }
.sterne { color: var(--gelb); letter-spacing: .05em; font-size: .9em; white-space: nowrap; }
.sterne span { color: #dfe2e6; }
h1 .sterne { font-size: 1rem; vertical-align: middle; }
.merkmal-vorschlaege { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.5rem 0 .85rem; }
.merkmal-chip { border: 1px dashed #d6dade; background: #fff; border-radius: 20px; font-size: .75rem; padding: .15rem .55rem; cursor: pointer; color: var(--leise); }
.merkmal-chip:hover { border-color: var(--magenta); color: var(--magenta); }
.hw-gruppe { padding-bottom: .5rem; }
.hw-tabelle { width: 100%; font-size: .88rem; border-collapse: collapse; }
.hw-tabelle th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #9aa1aa; font-weight: 700;
                 padding: .5rem .5rem .35rem; border-bottom: 1px solid #f0f2f4; }
.hw-tabelle td { padding: .55rem .5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.hw-tabelle tr:last-child td { border-bottom: 0; }
.hw-tabelle td:first-child { width: 30%; }
.hw-tabelle a { color: var(--text); }
.hw-tabelle a:hover { color: var(--magenta); }
.hw-name { font-weight: 700; }
.hw-objekt { display: block; }
@media (max-width: 900px) { .hw-tabelle th:nth-child(n+4), .hw-tabelle td:nth-child(n+4) { display: none; } }
.person-kopf ~ .raster .formular > textarea { width: 100%; margin-bottom: .6rem; }
.hw-tabelle { table-layout: fixed; }
.hw-tabelle th:nth-child(1) { width: 28%; } .hw-tabelle th:nth-child(2) { width: 10%; } .hw-tabelle th:nth-child(3) { width: 25%; }
.hw-tabelle th:nth-child(4) { width: 19%; } .hw-tabelle th:nth-child(5) { width: 8%; } .hw-tabelle th:nth-child(6) { width: 10%; }
.hw-tabelle td { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Serienbriefe & Vorlagen ---------- */
.schritt { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--magenta); color: #fff; font-size: .75rem;
           align-items: center; justify-content: center; margin-right: .3rem; vertical-align: 2px; }
.serien-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.serien-filter select, .serien-filter input { font-size: .86rem; padding: .4rem .6rem; }
.serien-filter input[type=search] { flex: 1 1 180px; }
.serien-liste { max-height: 360px; overflow-y: auto; border: 1px solid var(--linie-2); border-radius: var(--radius-klein); }
.serien-tabelle th { position: sticky; top: 0; background: #fff; z-index: 1; }
.serien-tabelle th:nth-child(1) { width: 36px; } .serien-tabelle th:nth-child(2) { width: 28%; } .serien-tabelle th:nth-child(3) { width: 30%; }
.serien-tabelle th:nth-child(4) { width: 14%; } .serien-tabelle th:nth-child(5) { width: auto; }
.weg { white-space: nowrap; }
.weg.post { color: #5c4400; }
.weg.fehlt { color: var(--rot); font-weight: 700; }
.platzhalter { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: -.4rem 0 .6rem; }
.serien-form .formular textarea { font-family: inherit; line-height: 1.5; }
.brief-vorschau { background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 1.4rem 1.5rem; min-height: 360px;
                  box-shadow: 0 2px 8px rgba(15,29,46,.06); font-size: .88rem; line-height: 1.5; }
.bv-anschrift { margin-bottom: 1.6rem; font-size: .86rem; }
.bv-betreff { font-weight: 700; margin: 0 0 1rem; }
.bv-text { white-space: pre-line; }
.serien-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: .8rem; }
.serien-aktionen .knopf { margin-bottom: .5rem; }
.serien-aktionen .sym { width: 16px; height: 16px; }
.anleitung { padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; }
.mail-gruppen { display: flex; flex-direction: column; gap: .5rem; }
.mail-gruppe { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.post-liste { columns: 2 260px; padding-left: 1.1rem; font-size: .88rem; }
.post-liste a { color: var(--text); }
.vorlage-zeile { display: flex; flex-direction: column; padding: .55rem .4rem; border-bottom: 1px solid var(--linie-2); color: var(--text); border-radius: 6px; }
.vorlage-zeile:hover, .vorlage-zeile.aktiv { background: var(--magenta-hell); color: var(--text); }
.name-zeile { grid-template-columns: 140px minmax(0, 1fr); }

/* ---------- Mietinteressenten ---------- */
.interessenten-board { grid-auto-columns: minmax(250px, 1fr); }
.punkt.i-anfrage { background: var(--webblau); } .punkt.i-besichtigung { background: var(--magenta); }
.punkt.i-unterlagen { background: #E08A00; } .punkt.i-zusage { background: #7A5AA6; }
.punkt.i-vertrag { background: var(--gruen); } .punkt.i-absage { background: #9aa1aa; }
.ikarte { display: flex; flex-direction: column; gap: .3rem; color: var(--text); }
.ikarte:hover { color: var(--text); }
.ik-einheit { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--leise); }
.ik-einheit .sym { width: 13px; height: 13px; flex: none; }
.ik-fakten { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .76rem; align-items: center; }
.ik-fakten .sym { width: 12px; height: 12px; }
.ik-fakten .warn, .einheit-fakten .warn { color: var(--rot); font-weight: 700; }
.ik-termin { background: var(--magenta-hell); color: var(--magenta-dunkel); border-radius: 4px; padding: 0 .35rem; font-weight: 700; }
.ik-termin.vorbei { background: #f0f2f4; color: var(--leise); font-weight: 400; }
.ik-alter { font-size: .72rem; color: #9aa1aa; }
.ik-alter.lange { color: #8a6500; font-weight: 700; }
a.karte-neu { text-decoration: none; }
.interessent-filter { margin-bottom: 1rem; align-items: center; }
.interessent-filter select { max-width: 520px; }
.leer-ohne { margin-top: 1rem; }
.leer-ohne .kk-einheiten a { font-size: .78rem; background: #f3f5f7; border-radius: 5px; padding: .15rem .5rem; color: var(--text); }
.leer-ohne .kk-einheiten a:hover { background: var(--magenta-hell); }
.hinweis-box.zeile { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.status-leiste { display: flex; list-style: none; padding: 0; margin: .4rem 0 1rem; gap: 0; flex-wrap: wrap; }
.status-leiste li { position: relative; padding: .4rem .9rem .4rem 1.3rem; background: #eef0f2; color: var(--leise); font-size: .82rem;
                    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); margin-right: -4px; }
.status-leiste li:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: .9rem; border-radius: 6px 0 0 6px; }
.status-leiste li.erreicht { background: #dcefe0; color: #22672f; }
.status-leiste li.aktiv { background: var(--magenta); color: #fff; font-weight: 700; }
.status-leiste li.absage { background: #6b7480; }
.anhang-zeile { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--linie-2); font-size: .88rem; }
.anhang-zeile a { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-zeile .sym { width: 14px; height: 14px; }
.hochladen { display: flex; gap: .5rem; align-items: center; margin: .7rem 0 .3rem; flex-wrap: wrap; font-size: .85rem; }
.einheit-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: .3rem 0 0; }
.vergeben { border-left: 3px solid var(--magenta); }
.loeschen-zeile { text-align: right; margin-top: .4rem; }
.leer-aktionen { white-space: nowrap; }
.leer-aktionen .kk-offen { margin-right: .4rem; }
.kontakt-karte.r-interessent { border-top-color: #E08A00; }
.pk-avatar.r-interessent { background: #fff3e0; color: #8a5300; }
.text-link { color: var(--text); }
.text-link:hover { color: var(--magenta); }
.leer-ohne summary { cursor: pointer; list-style: none; }
.leer-ohne summary::-webkit-details-marker { display: none; }
.leer-ohne summary h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.leer-ohne summary h2::before { content: "▸"; color: var(--leise); font-size: .9rem; }
.leer-ohne[open] summary h2::before { content: "▾"; }
.leer-ohne[open] summary { margin-bottom: .7rem; }
.vorlagen-suche { width: 100%; margin: .2rem 0 .6rem; }
.vorlagen-gruppe { border-bottom: 1px solid var(--linie-2); }
.vorlagen-gruppe summary { cursor: pointer; padding: .5rem .2rem; font-weight: 700; font-size: .9rem; display: flex; gap: .4rem; align-items: center; }
.vorlagen-gruppe .vorlage-zeile { margin-left: .6rem; }