/* ══════════════════════════════════════════════════════════════════════
   Verwaltung — zweites Blatt
   angelegt 08.10.2026, auf die Sprache der Brokerfläche gebracht 21.10.2026

   Wird NACH site.css und admin.css geladen und überschreibt beide. Ohne
   diese Datei sieht die Verwaltung aus wie vorher; das ist der Sinn des
   Umschalters oben rechts. Eine Gestaltung, die man nicht zurücknehmen
   kann, ist keine Gestaltung, sondern eine Entscheidung für alle.

   ── Was sich am 21.10.2026 geändert hat ──

   Dieselben Marken wie `bk2.css`. Bis dahin hatte die Verwaltung ihre
   eigene Palette (Bronze, Sand) und die Brokerfläche eine neue (Petrol,
   Schiefer). Wer zwischen beiden wechselte, wechselte das Haus. Jetzt sind
   es zwei Räume desselben Hauses: gleiche Farben, gleiche Rundungen,
   gleiche Schatten, gleiche Zeichen.

   **Aber nicht dieselben Masse.** Die Brokerfläche ist für jemanden gebaut,
   der im Verkaufsgespräch auf ein Telefon tippt — 17 px Schrift, 46 px
   hohe Felder, eine Frage je Bildschirm. Hier sitzt jemand mit einer Maus
   vor einer Tabelle mit 28 Wohnungen und vergleicht Zahlen. Dichte ist
   hier richtig: 15 px Schrift, 38 px hohe Felder, Tabellen bleiben
   Tabellen. Gleiche Sprache, anderer Satz.

   Die Wege stehen links statt oben. Vorher trug die Kopfleiste zwei Reihen
   — Bereiche oben, Seiten des Bereichs darunter —, und welche Seiten es in
   einem Bereich gibt, sah man erst, nachdem man ihn geöffnet hatte. Links
   steht alles zugleich da.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Marken ─────────────────────────────────────────────────────────────
   Die Werte sind aus bk2.css übernommen, nicht neu gemischt. Ändert sich
   dort eine Farbe, gehört sie hier nachgezogen — zwei Dateien mit
   demselben Grün sind eine Quelle zu viel, aber eine Datei für beide
   Flächen wäre eine Abhängigkeit, die es nicht gibt: Die Verwaltung lädt
   bk2.css nicht, weil sie deren Masse nicht will. */
body.admin{
  --vw-grund:#F2F5F7;
  --vw-flaeche:#FFFFFF;
  --vw-flaeche-2:#F7FAFB;
  --vw-flaeche-3:#ECF1F4;

  --vw-tinte:#0E1419;
  --vw-tinte-2:#36424F;
  --vw-gedaempft:#68768A;

  --vw-linie:#DDE5EB;
  --vw-linie-2:#EDF2F5;

  --vw-akzent:#0E7C73;
  --vw-akzent-2:#0B655E;
  --vw-akzent-hell:#15AFA3;
  --vw-akzent-weich:#E2F3F1;

  --vw-gold:#8A6534;
  --vw-gold-weich:#F6EFE5;
  --vw-gut:#13835A;
  --vw-gut-weich:#E3F4EC;
  --vw-achtung:#B26B04;
  --vw-achtung-weich:#FBF0DD;
  --vw-gefahr:#C32F2F;
  --vw-gefahr-weich:#FBEAEA;

  /* Eine Skala, vier Stufen. Mehr braucht eine Verwaltungsoberfläche nicht,
     und weniger zwingt zu Ausnahmen. */
  --vw-1:6px;
  --vw-2:12px;
  --vw-3:20px;
  --vw-4:32px;

  --vw-radius:12px;
  --vw-radius-sm:8px;
  --vw-rund:999px;

  --vw-kopf:52px;    /* Höhe der oberen Leiste */
  --vw-seite:236px;  /* Breite der Seitenspalte */
  --vw-feld:38px;    /* Höhe eines Bedienelements */

  --vw-schatten:0 1px 2px rgba(14,20,25,.04), 0 12px 28px -20px rgba(14,20,25,.28);
  --vw-fokus:0 0 0 3px rgba(14,124,115,.28);

  /* ── Die Marken aus site.css, hier umgelegt ──
     Die dreissig Verwaltungsseiten greifen an hunderten Stellen direkt in
     `style="..."` auf die Marken der Website zu: `var(--s3)` für einen
     Abstand, `var(--muted)` für einen leisen Satz, `var(--st-free)` für
     eine Statusfarbe. Diese Stellen hier einzeln umzuschreiben hiesse,
     dreissig Dateien anzufassen und dabei eine zu vergessen.

     Stattdessen bekommen die Marken **innerhalb der Verwaltung** neue
     Werte. Jede Inline-Angabe folgt damit von selbst, und die öffentliche
     Website behält ihre: Die Regel hängt an `body.admin`, und das Frontend
     trägt diese Klasse nicht. */
  --ground:var(--vw-grund);
  --surface:var(--vw-flaeche);
  --sunk:var(--vw-flaeche-3);
  --sand:var(--vw-flaeche-2);

  --ink:var(--vw-tinte);
  --ink-2:var(--vw-tinte-2);
  --muted:var(--vw-gedaempft);

  --line:var(--vw-linie);
  --line-2:var(--vw-linie-2);

  /* Bronze war der alte Akzent. Er bleibt als Marke bestehen, zeigt aber
     jetzt auf das Petrol — sonst stünden auf einer Seite zwei Akzente,
     je nachdem ob die Farbe aus dem Blatt oder aus einem style-Attribut
     kommt. Das Gold bleibt dem Gold vorbehalten (Stufen, Auszeichnungen). */
  --bronze:var(--vw-akzent-2);
  --bronze-2:var(--vw-akzent);
  --bronze-soft:var(--vw-akzent-weich);
  --sea:var(--vw-akzent);
  --sea-soft:var(--vw-akzent-weich);

  /* Semantik Bestand: frei, reserviert, verkauft. */
  --st-free:var(--vw-gut);      --st-free-bg:var(--vw-gut-weich);
  --st-res:var(--vw-achtung);   --st-res-bg:var(--vw-achtung-weich);
  --st-sold:var(--vw-akzent-2); --st-sold-bg:var(--vw-akzent-weich);

  /* Dieselbe Abstandsskala wie `--vw-*`, damit ein `var(--s3)` im
     style-Attribut nicht neben einem `var(--vw-3)` im Blatt steht und
     beide etwas anderes meinen. */
  --s1:var(--vw-1); --s2:var(--vw-2); --s3:var(--vw-3);
  --s4:var(--vw-4); --s5:44px; --s6:64px;

  --radius:var(--vw-radius-sm);
  --shadow-sm:var(--vw-schatten);
  --shadow:var(--vw-schatten);
}

body.admin{
  margin:0;
  background:var(--vw-grund);
  color:var(--vw-tinte);
  font-family:'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.admin *{box-sizing:border-box}

body.admin h1{font-size:1.5rem; font-weight:600; letter-spacing:-.02em; margin:0}
body.admin h2{font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin:0}
body.admin h3{font-size:.95rem; font-weight:600; margin:0}
body.admin a{color:var(--vw-akzent-2)}

/* Fokus sichtbar. Wer mit der Tastatur arbeitet, muss sehen, wo er steht —
   und die Standardringe der Browser verschwinden auf farbigem Grund. */
body.admin :is(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--vw-akzent); outline-offset:2px;
}

/* ══ Rahmen ═════════════════════════════════════════════════════════════
 *
 * Oben eine schmale Leiste mit dem Zeichen, dem Seitentitel und dem Konto.
 * Links die Wege, alle zugleich sichtbar. Beide hängen fest am Fenster:
 * Eine klebende Leiste stünde im Fluss und liefe gegen die Spalte, sobald
 * über ihr etwas eingeschoben wird — derselbe Fehler, der am 21.10.2026 in
 * der Brokerfläche den ersten Weg hinter der Leiste verschwinden liess.
 */
.vw2__kopf{
  position:fixed; top:0; left:0; right:0; z-index:40;
  height:var(--vw-kopf); display:flex; align-items:center; gap:var(--vw-2);
  padding:0 var(--vw-3);
  background:var(--vw-flaeche); border-bottom:1px solid var(--vw-linie);
}
/* Das Zeichen in der Tintenfassung: dunkle Buchstaben, durchsichtiger
   Grund. Die gelieferte Datei hat weiße Buchstaben auf #141F1C und sähe
   hier aus wie ein aufgeklebtes Schild. */
.vw2__marke{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.vw2__marke img{height:16px; width:auto; display:block}
.vw2__marke span{
  font-size:.64rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vw-gedaempft);
}
.vw2__titel{
  flex:1 1 auto; min-width:0; font-weight:600; font-size:.98rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-left:var(--vw-2);
}
.vw2__rechts{display:flex; align-items:center; gap:var(--vw-2); margin-left:auto}
.vw2__rechts a{
  color:var(--vw-gedaempft); text-decoration:none; font-size:.86rem;
  white-space:nowrap;
}
.vw2__rechts a:hover{color:var(--vw-akzent)}
.vw2__ich{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 5px; border-radius:var(--vw-rund);
  background:var(--vw-akzent-weich); color:var(--vw-akzent-2) !important;
  font-weight:600; font-size:.84rem;
}
/* Der Sprachwähler in der Leiste ist ein Sonderfall: Die Regel weiter
   unten gibt jedem Auswahlfeld volle Breite, hier soll es klein bleiben. */
.vw2__rechts .sprachform select{
  width:auto; min-height:30px; padding:5px 9px; font-size:.84rem;
  border-radius:var(--vw-radius-sm);
}
.vw2__ich i{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--vw-akzent); color:#fff; font-style:normal;
  font-size:.68rem; font-weight:700;
}

/* ── Die Wege, links ── */
.vw2__spalte{
  position:fixed; top:var(--vw-kopf); bottom:0; left:0; z-index:30;
  width:var(--vw-seite); overflow:auto;
  background:var(--vw-flaeche); border-right:1px solid var(--vw-linie);
  padding:var(--vw-3) var(--vw-2) var(--vw-4);
}
.vw2__gruppe{
  margin:var(--vw-3) 0 var(--vw-1); padding:0 10px;
  font-size:.64rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vw-gedaempft);
}
.vw2__gruppe:first-child{margin-top:0}
.vw2__gruppe svg{flex:0 0 auto; width:14px; height:14px; color:var(--vw-gedaempft)}
/* Die Punkte einer Gruppe rücken unter deren Wort ein, nicht unter dessen
   Zeichen — sonst stehen Wort und Punkte auf zwei verschiedenen Kanten. */
.vw2__weg--tief{padding-left:30px}
.vw2__weg{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; margin-bottom:1px; min-height:36px;
  border-radius:var(--vw-radius-sm); text-decoration:none;
  color:var(--vw-tinte-2); font-size:.92rem; font-weight:500;
}
.vw2__weg:hover{background:var(--vw-flaeche-3)}
.vw2__weg[aria-current]{
  background:var(--vw-akzent-weich); color:var(--vw-akzent-2); font-weight:600;
}
.vw2__weg svg{flex:0 0 auto; color:var(--vw-gedaempft); width:17px; height:17px}
.vw2__weg[aria-current] svg{color:var(--vw-akzent)}

/* Der Rumpf. Oben Luft für die Leiste — sie hängt fest am Fenster und
   nimmt im Fluss keinen Platz mehr ein, also muss der Rumpf ihn freihalten. */
.adminwrap{
  margin:0 0 0 var(--vw-seite); max-width:none;
  padding:calc(var(--vw-kopf) + var(--vw-3)) var(--vw-4) var(--vw-4);
}

/* ── Schmale Geräte ──
   Unter 900 px wird aus der Spalte ein waagerecht scrollender Streifen
   unter der Kopfleiste — dieselben Wege, dieselbe Reihenfolge, nur
   nebeneinander. Kein Aufklappmenü: Das bräuchte entweder JavaScript oder
   ein zweites Mal dasselbe Markup im Dokument, und beides wäre teurer als
   ein Streifen, den man wischt. Die Gruppennamen entfallen dort; die
   Zeichen tragen die Bedeutung weiter.

   900 px ist die Grenze, weil ein iPad quer (1024) die Spalte bekommen
   soll und hochkant (768) den Streifen. */
@media (max-width:899px){
  .vw2__spalte{
    position:static; width:auto; overflow:visible;
    border-right:0; border-bottom:1px solid var(--vw-linie);
    display:flex; gap:var(--vw-1); overflow-x:auto;
    padding:9px var(--vw-3); margin-top:var(--vw-kopf);
    scrollbar-width:thin;
  }
  .vw2__gruppe{display:none}
  .vw2__weg{
    flex:0 0 auto; min-height:34px; margin:0; font-size:.86rem;
    border:1px solid var(--vw-linie); border-radius:var(--vw-rund);
  }
  .vw2__weg[aria-current]{border-color:var(--vw-akzent)}
  .adminwrap{margin-left:0; padding:var(--vw-3) var(--vw-3) var(--vw-4)}
  .vw2__titel{display:none}

  /* Die Leiste trägt sonst mehr, als auf 800 px hineingeht — gemessen am
     21.10.2026 lief sie rechts aus dem Bild. Drei Verweise sind dort
     entbehrlich: die beiden Blicke nach aussen und die Blattwahl. Das
     Konto und das Abmelden bleiben, weil das eine sagt, wer man ist, und
     das andere der Weg hinaus ist. */
  .vw2__leise{display:none}
  .vw2__marke span{display:none}
}

@media (max-width:559px){
  /* Noch enger: Der Kreis mit den Initialen genügt, der Name dahinter
     steht ohnehin auf der Profilseite. */
  .vw2__ich{padding:0; background:none; gap:0; font-size:0}
  .vw2__ich i{width:28px; height:28px; font-size:.7rem}
}

/* ══ Seitenkopf ═════════════════════════════════════════════════════════ */
.adminhead{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--vw-2);
  justify-content:space-between; margin-bottom:var(--vw-3);
}
.adminhead h1{font-size:1.65rem}
body.admin .eyebrow{
  font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vw-gedaempft); margin:0 0 3px;
}
body.admin .lede{color:var(--vw-gedaempft); font-size:.95rem; margin:4px 0 0}
.adminhead__right{display:flex; flex-wrap:wrap; gap:var(--vw-2); align-items:center}
body.admin .small{font-size:.84rem; color:var(--vw-gedaempft); line-height:1.5}
body.admin .link{color:var(--vw-akzent-2); font-weight:500}

/* ══ Tafeln ═════════════════════════════════════════════════════════════
   Luft statt Linien: Das alte Blatt trennte mit Rahmen. Das ist dicht, aber
   laut — jeder Rahmen ist ein Strich, den das Auge lesen muss. */
body.admin .panel{
  background:var(--vw-flaeche); border:1px solid var(--vw-linie);
  border-radius:var(--vw-radius); box-shadow:var(--vw-schatten);
  margin-bottom:var(--vw-3); overflow:hidden;
}
body.admin .panel__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--vw-2); padding:var(--vw-2) var(--vw-3);
  border-bottom:1px solid var(--vw-linie-2); background:none;
}
body.admin .panel__head h2{font-size:1rem}
body.admin .panel__body{padding:var(--vw-3)}

/* ══ Kennzahlen ═════════════════════════════════════════════════════════ */
body.admin .kpis{
  display:grid; gap:var(--vw-2); margin-bottom:var(--vw-3);
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
body.admin .kpi{
  background:var(--vw-flaeche); border:1px solid var(--vw-linie);
  border-radius:var(--vw-radius); box-shadow:var(--vw-schatten);
  padding:var(--vw-2) var(--vw-3); text-decoration:none; color:inherit;
  display:block;
}
body.admin a.kpi:hover{border-color:var(--vw-akzent-hell)}
body.admin .kpi u{
  display:block; text-decoration:none;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--vw-gedaempft);
}
body.admin .kpi b{
  display:block; font-size:1.7rem; font-weight:600; letter-spacing:-.025em;
  line-height:1.15; margin:2px 0 1px;
}
body.admin .kpi i{display:block; font-style:normal; font-size:.82rem; color:var(--vw-gedaempft)}
body.admin .kpi--free b{color:var(--vw-gut)}
body.admin .kpi--res b{color:var(--vw-achtung)}
body.admin .kpi--sold b{color:var(--vw-akzent-2)}

/* Zahlen mit festen Ziffernbreiten. Beträge in Tabellen richten sich sonst
   nicht aneinander aus, und eine Spalte Geld, die flattert, ist schwer zu
   vergleichen. */
body.admin .num, body.admin td.num, body.admin .kpi b{
  font-variant-numeric:tabular-nums;
}

/* ══ Raster ═════════════════════════════════════════════════════════════ */
body.admin .grid{display:grid; gap:var(--vw-3); grid-template-columns:1fr}
@media (min-width:760px){
  body.admin .grid--2, body.admin .grid--3, body.admin .grid--4{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (min-width:1180px){
  body.admin .grid--3{grid-template-columns:repeat(3, 1fr)}
  body.admin .grid--4{grid-template-columns:repeat(4, 1fr)}
}

/* ══ Tabellen ═══════════════════════════════════════════════════════════
   Ruhige Tabellen: keine Zebrastreifen. Sie sollen das Auge führen,
   erzeugen aber ein Muster, das mit dem Inhalt konkurriert. Stattdessen
   feine Trennlinien und eine deutliche Zeile unter dem Zeiger. */
body.admin .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:0}
body.admin table{width:100%; border-collapse:collapse; font-size:.9rem}
body.admin thead th{
  text-align:left; padding:10px var(--vw-3); white-space:nowrap;
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vw-gedaempft); background:var(--vw-flaeche-2);
  border-bottom:1px solid var(--vw-linie);
}
body.admin tbody td{
  padding:11px var(--vw-3); border-bottom:1px solid var(--vw-linie-2);
  vertical-align:middle;
}
body.admin tbody tr:last-child td{border-bottom:0}
body.admin tbody tr:nth-child(even){background:none}
body.admin tbody tr:hover{background:var(--vw-flaeche-2)}
body.admin th.num, body.admin td.num{text-align:right}
body.admin table a{color:var(--vw-akzent-2); font-weight:500}

/* ══ Marken ═════════════════════════════════════════════════════════════
   Nie Farbe allein: Der Punkt davor und das Wort tragen die Bedeutung mit.
   Rot-Grün-Schwäche betrifft jeden zwölften Mann. */
body.admin .tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--vw-rund);
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  background:var(--vw-flaeche-3); color:var(--vw-tinte-2);
}
body.admin .tag::before{
  content:''; width:5px; height:5px; border-radius:50%; background:currentColor;
}
body.admin .tag--verfuegbar{color:var(--vw-gut); background:var(--vw-gut-weich)}
body.admin .tag--reserviert{color:var(--vw-achtung); background:var(--vw-achtung-weich)}
body.admin .tag--verkauft{color:var(--vw-akzent-2); background:var(--vw-akzent-weich)}
body.admin .tag--zurueck{color:var(--vw-gedaempft); background:var(--vw-flaeche-3)}

/* ══ Knöpfe ═════════════════════════════════════════════════════════════
   Der volle trägt die Haupthandlung. Kein Anheben beim Zeigen: Ein Knopf,
   der sich bewegt, zieht Aufmerksamkeit auf sich, die der Inhalt braucht. */
body.admin .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--vw-feld); padding:0 var(--vw-3);
  border:0; border-radius:var(--vw-rund); cursor:pointer;
  background:var(--vw-akzent); color:#fff;
  font:inherit; font-size:.88rem; font-weight:600; letter-spacing:0;
  text-transform:none; text-decoration:none; white-space:nowrap;
}
body.admin .btn:hover{background:var(--vw-akzent-2); transform:none; filter:none}
body.admin .btn--sm{min-height:32px; padding:0 14px; font-size:.8rem}
body.admin .btn--ghost{
  background:var(--vw-flaeche); color:var(--vw-tinte);
  border:1px solid var(--vw-linie);
}
body.admin .btn--ghost:hover{background:var(--vw-flaeche-3); border-color:var(--vw-linie)}
body.admin .btn--danger{background:var(--vw-gefahr); color:#fff}
body.admin .btn--danger:hover{background:#A82727}
body.admin .btn--block{display:flex; width:100%}
body.admin .btn[disabled]{opacity:.45; pointer-events:none}

/* ══ Formular ═══════════════════════════════════════════════════════════ */
body.admin .field{display:flex; flex-direction:column; gap:5px}
body.admin .field > label, body.admin .field__lab{
  font-size:.8rem; font-weight:600; color:var(--vw-tinte-2);
}
body.admin .input,
body.admin input[type="text"], body.admin input[type="email"],
body.admin input[type="tel"], body.admin input[type="number"],
body.admin input[type="date"], body.admin input[type="search"],
body.admin input[type="password"], body.admin select, body.admin textarea{
  width:100%; min-height:var(--vw-feld); padding:8px 11px;
  font:inherit; font-size:.92rem;
  border:1px solid var(--vw-linie); border-radius:var(--vw-radius-sm);
  background:var(--vw-flaeche); color:var(--vw-tinte);
}
body.admin textarea{min-height:88px; line-height:1.45; resize:vertical}
body.admin .input:hover, body.admin select:hover, body.admin textarea:hover{
  border-color:var(--vw-gedaempft);
}
body.admin input[type="checkbox"], body.admin input[type="radio"]{
  width:auto; min-height:0; accent-color:var(--vw-akzent);
}
body.admin .checks{display:flex; flex-wrap:wrap; gap:var(--vw-2) var(--vw-3)}
body.admin .checks label{display:inline-flex; align-items:center; gap:7px; font-size:.9rem}

/* ══ Filter ═════════════════════════════════════════════════════════════ */
body.admin .filter{
  background:var(--vw-flaeche); border:1px solid var(--vw-linie);
  border-radius:var(--vw-radius); box-shadow:var(--vw-schatten);
  padding:var(--vw-3); margin-bottom:var(--vw-3);
}
body.admin .filter__grid{
  display:grid; gap:var(--vw-2);
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
body.admin .filter__foot{
  display:flex; flex-wrap:wrap; gap:var(--vw-2); align-items:center;
  margin-top:var(--vw-3); padding-top:var(--vw-3);
  border-top:1px solid var(--vw-linie-2);
}
body.admin .filter__count{font-size:.88rem; color:var(--vw-gedaempft); margin-right:auto}
body.admin .filter__count b{color:var(--vw-tinte); font-weight:600; font-variant-numeric:tabular-nums}

/* ══ Hinweise ═══════════════════════════════════════════════════════════ */
body.admin .notice{
  border:1px solid transparent; border-radius:var(--vw-radius-sm);
  padding:10px var(--vw-3); margin-bottom:var(--vw-3); font-size:.92rem;
  background:var(--vw-gut-weich); color:var(--vw-gut); border-color:#C7E6D7;
}
body.admin .notice--warn{
  background:var(--vw-achtung-weich); color:var(--vw-achtung); border-color:#F0DCB6;
}
body.admin .notice--info{
  background:var(--vw-akzent-weich); color:var(--vw-akzent-2); border-color:#BFE4E0;
}

/* ══ Zeilenwerkzeuge, Seitenzahlen, Protokoll ═══════════════════════════ */
body.admin .rowactions{display:flex; flex-wrap:wrap; gap:var(--vw-2); align-items:center}
body.admin .rowactions a{color:var(--vw-akzent-2); text-decoration:none; font-size:.86rem; font-weight:500}
body.admin .rowactions a:hover{text-decoration:underline}
body.admin .rowactions a + a{border-left:1px solid var(--vw-linie); padding-left:var(--vw-2)}

body.admin .pager{display:flex; flex-wrap:wrap; gap:var(--vw-1); align-items:center}
body.admin .pager__step, body.admin .pager__num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 9px;
  border:1px solid var(--vw-linie); border-radius:var(--vw-radius-sm);
  background:var(--vw-flaeche); color:var(--vw-tinte-2);
  text-decoration:none; font-size:.86rem; font-weight:500;
}
body.admin .pager__num[aria-current]{
  background:var(--vw-akzent); border-color:var(--vw-akzent); color:#fff;
}

body.admin .log{list-style:none; margin:0; padding:0}
body.admin .log li{
  display:flex; flex-wrap:wrap; gap:var(--vw-2);
  padding:9px 0; border-bottom:1px solid var(--vw-linie-2); font-size:.88rem;
}
body.admin .log li:last-child{border-bottom:0}
body.admin .log time{color:var(--vw-gedaempft); flex:0 0 auto; font-variant-numeric:tabular-nums}
body.admin .log b{font-weight:600}

/* ══ Vermarktungsbalken ═════════════════════════════════════════════════ */
body.admin .bar{
  display:flex; height:12px; border-radius:var(--vw-rund);
  background:var(--vw-flaeche-3); overflow:hidden;
}
body.admin .bar span{display:block; height:100%}
body.admin .bar span + span{box-shadow:inset 2px 0 0 var(--vw-flaeche)}
body.admin .bar__free{background:var(--vw-gut)}
body.admin .bar__res{background:var(--vw-achtung)}
body.admin .bar__sold{background:var(--vw-akzent)}
body.admin .barkey{
  display:flex; flex-wrap:wrap; gap:var(--vw-1) var(--vw-3);
  margin-top:var(--vw-2); font-size:.82rem; color:var(--vw-gedaempft);
}
body.admin .barkey b{color:var(--vw-tinte); font-weight:600}

/* ══ Anmeldung ══════════════════════════════════════════════════════════ */
body.admin .login{
  min-height:100vh; display:grid; place-items:center; padding:var(--vw-4) var(--vw-3);
  background:var(--vw-grund);
}
body.admin .login__box{
  width:100%; max-width:380px;
  background:var(--vw-flaeche); border:1px solid var(--vw-linie);
  border-radius:var(--vw-radius); box-shadow:var(--vw-schatten);
  padding:var(--vw-4) var(--vw-3);
}
body.admin .login__box h1{font-size:1.35rem; margin-top:var(--vw-3)}
body.admin .login__marke{height:21px; width:auto; display:block}

/* ══ Netzbaum ═══════════════════════════════════════════════════════════
   Die Geometrie steht in admin.css. Hier nur die Farben — und ausdrücklich
   Linien statt Schatten: Die Struktur lebt von den Verbindungslinien, und
   gegen einen weichen Schatten verschwinden sie. Gesehen habe ich das erst
   im Vergleich beider Blätter nebeneinander (08.10.2026). */
body.admin .baum__ast::before{border-left-color:var(--vw-linie); border-left-width:2px}
body.admin .baum__ast::after{border-top-color:var(--vw-linie); border-top-width:2px}
body.admin .baum__karte{
  border:1px solid var(--vw-linie); border-radius:var(--vw-radius-sm);
  background:var(--vw-flaeche); box-shadow:var(--vw-schatten);
  padding:var(--vw-2) 14px;
}
body.admin .baum__ast--master > .baum__karte{border-left:3px solid var(--vw-gold)}
body.admin .baum__ast--broker > .baum__karte{border-left:3px solid var(--vw-linie)}
body.admin .baum__wurzel{
  border-radius:var(--vw-radius); padding:14px 16px;
  background:var(--vw-akzent); color:#fff; border:0;
}
body.admin .baum__wurzel .baum__rolle{color:var(--vw-akzent-weich)}
body.admin .baum__wurzel .baum__zahlen{color:rgba(255,255,255,.82); font-size:.84rem}

/* ══ Drucken ════════════════════════════════════════════════════════════
   Die Leisten sind Bedienelemente und gehören nicht aufs Papier; der Rumpf
   bekommt dort die ganze Breite. */
@media print{
  .vw2__kopf, .vw2__spalte, .adminhead__right, .rowactions{display:none}
  .adminwrap{margin:0; padding:0}
  body.admin .panel{box-shadow:none; break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  body.admin *{animation:none !important; transition:none !important}
}

/* ══ Schmale Geräte ═════════════════════════════════════════════════════ */
@media (max-width:720px){
  body.admin .kpi{padding:var(--vw-2)}
  body.admin .kpi b{font-size:1.4rem}
  body.admin thead th, body.admin tbody td{padding:9px 10px}
  body.admin .adminhead h1{font-size:1.35rem}
}