/* Verwaltung — funktional, dieselbe Palette, dichter gesetzt. */

body.admin{background:var(--ground); font-size:15.5px}

.adminbar{
  position:sticky; top:0; z-index:50;
  background:var(--console); color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);
}
.adminbar__in{
  max-width:1400px; margin-inline:auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
}
.adminbar .brand__mark{color:#F2EFE7; font-size:1.18rem}
.adminbar__tag{
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-2); border:1px solid var(--line-dark); border-radius:20px; padding:3px 10px;
}
.adminnav{display:flex; gap:var(--s3); list-style:none; margin-left:var(--s3); flex-wrap:wrap}
.adminnav a{
  font-size:.88rem; color:var(--on-dark-2); text-decoration:none;
  padding:6px 0; border-bottom:1px solid transparent;
}
.adminnav a:hover{color:#F2EFE7}
.adminnav a[aria-current="page"]{color:#F2EFE7; border-bottom-color:var(--bronze-2)}
.adminbar__right{margin-left:auto; display:flex; align-items:center; gap:var(--s3); font-size:.85rem; color:var(--on-dark-3)}
.adminbar__right a{color:var(--on-dark-2)}

/* ── Zweite Navigationsebene (06.10.2026) ──
   Die Bereiche stehen oben, ihre Seiten hier darunter. Etwas heller abgesetzt,
   damit erkennbar bleibt, dass es eine Ebene tiefer ist — und nicht eine
   zweite Reihe gleichrangiger Punkte, was genau das Problem war, das die
   Umstellung behebt. */
.adminbar__zweite{
  background:var(--console-2, rgba(255,255,255,.05));
  border-top:1px solid var(--line-dark);
}
.adminnav--zweite{
  max-width:1400px; margin-inline:auto; margin-left:auto; margin-right:auto;
  padding:0 var(--gutter); gap:var(--s4);
}
.adminnav--zweite a{font-size:.84rem; padding:8px 0}
/* Der aktive Bereich oben wird markiert, aber zurückhaltender als die aktive
   Seite unten: Sonst konkurrieren zwei Markierungen um dieselbe Aufmerksamkeit. */
.adminnav a[aria-current="true"]{color:#F2EFE7}

.adminwrap{max-width:1400px; margin-inline:auto; padding:var(--s5) var(--gutter) var(--s6)}
.adminhead{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-end; margin-bottom:var(--s4)}
.adminhead h1{font-size:clamp(1.8rem,3vw,2.4rem)}
.adminhead__right{margin-left:auto; display:flex; gap:var(--s2); flex-wrap:wrap}

/* Kennzahlen */
.kpis{display:grid; gap:1px; background:var(--line-2); grid-template-columns:repeat(2,1fr); margin-bottom:var(--s5); border:1px solid var(--line-2)}
@media(min-width:900px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface); padding:var(--s3)}
.kpi u{display:block; text-decoration:none; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
/* Zahlen durchgehend in der Grotesk, mit gleicher Laufweite pro Ziffer. */
.kpi b{
  display:block; margin-top:8px;
  font-family:var(--display); font-size:1.9rem; font-weight:600;
  line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums lining-nums;
}
.admin table td,.admin table th{font-family:var(--sans); font-variant-numeric:tabular-nums lining-nums}
.admin table td b{font-family:var(--display); font-weight:600; letter-spacing:-.01em}
.kpi i{display:block; margin-top:5px; font-style:normal; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums}
.kpi--free b{color:var(--st-free)}
.kpi--res b{color:var(--st-res)}
.kpi--sold b{color:var(--st-sold)}

/* Balken */
.bar{display:flex; height:9px; border-radius:20px; overflow:hidden; background:var(--line-2); margin-top:var(--s2)}
.bar span{display:block}
.bar__free{background:var(--st-free)}
.bar__res{background:var(--st-res)}
.bar__sold{background:var(--st-sold)}
.barkey{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s2); font-size:.82rem; color:var(--muted)}
.barkey b{color:var(--ink); font-variant-numeric:tabular-nums}
.barkey i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px}

.panel{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); margin-bottom:var(--s4)}
.panel__head{
  display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;
  padding:var(--s3); border-bottom:1px solid var(--line-2);
}
.panel__head h2{font-size:1.32rem}
.panel__head .btn{margin-left:auto}
.panel__body{padding:var(--s3)}
.panel table{min-width:0; background:transparent}
.panel table th, .panel table td{padding:10px 14px}

/* Bestandstabelle */
.grid{display:grid; gap:var(--s2); grid-template-columns:1fr}
@media(min-width:700px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.grid--6{grid-template-columns:repeat(6,1fr)}}

.statusform{display:inline-flex; gap:6px; align-items:center}
.statusform select{
  padding:6px 26px 6px 9px; font-size:.82rem; border-radius:2px;
  border:1px solid var(--line); background:var(--ground); color:var(--ink);
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
/* Kein display:flex auf der Zelle — das nimmt sie aus dem Tabellenlayout
   heraus und die Links rutschen aus ihrer Zeile. */
.rowactions{text-align:right; white-space:nowrap}
.rowactions a{
  display:inline-block; font-size:.82rem; color:var(--bronze);
  text-decoration:none; white-space:nowrap;
}
.rowactions a + a{margin-left:var(--s2)}
.rowactions a:hover{text-decoration:underline}

.btn--danger{background:transparent; border-color:color-mix(in srgb, #9B3B2E 55%, transparent); color:#9B3B2E}
.btn--danger:hover{background:color-mix(in srgb, #9B3B2E 10%, transparent); filter:none}
:root[data-theme="dark"] .btn--danger{color:#E08373; border-color:color-mix(in srgb,#E08373 45%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--danger{color:#E08373; border-color:color-mix(in srgb,#E08373 45%,transparent)}}

/* Anmeldung */
.login{min-height:100dvh; display:grid; place-items:center; padding:var(--s4); background:var(--console)}
.login__box{
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:var(--s5) var(--s4); box-shadow:var(--shadow-lg);
}
.login__box h1{font-size:1.9rem; margin-bottom:var(--s1)}
.login__box .small{margin-bottom:var(--s4)}

/* Audit */
.log{list-style:none; font-size:.88rem}
.log li{display:grid; grid-template-columns:auto 1fr; gap:var(--s3); padding:9px 0; border-bottom:1px solid var(--line-2)}
.log li:last-child{border-bottom:0}
.log time{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.log b{font-weight:500}

/* Interessenten- und Angebotsdetail: Inhalt links, Randspalte rechts. */
.leadgrid{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media(min-width:1080px){.leadgrid{grid-template-columns:minmax(0,1fr) 340px; align-items:start}}
.leadgrid > * > .panel:last-child{margin-bottom:0}

a.kpi{color:inherit; transition:background .2s ease}
a.kpi:hover{background:var(--sunk)}

.seedhint{
  background:var(--bronze-soft); border:1px solid color-mix(in srgb, var(--bronze) 34%, transparent);
  border-radius:var(--radius); padding:var(--s3); margin-bottom:var(--s4); font-size:.92rem;
}
.seedhint b{display:block; margin-bottom:4px}

/* Verlaufsdiagramm der Seitenaufrufe */
.verlauf{
  display:flex; align-items:flex-end; gap:2px;
  height:110px; padding:0; margin:0;
}
.verlauf__bar{
  flex:1 1 0; min-width:2px; background:var(--st-free);
  border-radius:1px 1px 0 0; opacity:.85;
}
.verlauf__bar:hover{opacity:1}

/* ── Sprachumschalter in der Kopfleiste ──
   Dieselbe Form in Verwaltung und Brokerfläche. Bewusst schlicht: ein Feld,
   das sich der dunklen Leiste unterordnet, statt eines Knopfes, der mit der
   Navigation um Aufmerksamkeit ringt. */
.sprachform{display:flex; align-items:center; margin:0}
.sprachform select{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:1px solid var(--on-dark-line, rgba(255,255,255,.22));
  border-radius:6px; color:var(--on-dark-2); font:inherit; font-size:.85rem;
  padding:4px 24px 4px 9px; cursor:pointer; line-height:1.3;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b9c2bd' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.sprachform select:hover{color:var(--on-dark); border-color:rgba(255,255,255,.4)}
.sprachform select:focus-visible{outline:2px solid var(--gold, #c9a063); outline-offset:2px}
/* Die Klappliste selbst zeichnet das System — dort gilt die helle Schrift
   nicht, sonst stünde Weiss auf Weiss. */
.sprachform option{color:#15201d; background:#fff}

/* ── Netzbaum und Fortschritt (08.10.2026) ──
   AIXCO wünschte einen „visual organizational tree showing the complete
   broker network". Gezeichnet mit Rahmen und Pseudo-Elementen statt mit
   einer Grafikbibliothek: Der Baum hat drei Ebenen, und drei Ebenen trägt
   CSS ohne fremden Code — der dann mitgepflegt und mitgeladen werden müsste. */
.baum__wurzel{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:12px 14px; border-radius:10px;
  background:var(--console); color:var(--on-dark);
}
.baum__wurzel b{font-size:1.05rem}
.baum__wurzel .baum__rolle{color:var(--on-dark-bronze)}
.baum__wurzel .baum__zahlen{color:var(--on-dark-2); font-size:.84rem}

.baum{list-style:none; margin:0 0 0 22px; padding:0; position:relative}
.baum .baum{margin-left:26px}
.baum__ast{position:relative; padding:10px 0 0 26px}
/* Die Linien: senkrecht am Rand, waagerecht zur Karte. */
.baum__ast::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  border-left:1px solid var(--line);
}
.baum__ast:last-child::before{bottom:calc(100% - 28px)}
.baum__ast::after{
  content:""; position:absolute; left:0; top:28px; width:18px;
  border-top:1px solid var(--line);
}
.baum__karte{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface);
}
.baum__rolle{
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.baum__name{font-weight:700; text-decoration:none; color:var(--ink)}
.baum__name:hover{color:var(--bronze)}
.baum__zahlen{font-size:.84rem; color:var(--ink-2); margin-left:auto}
.baum__prov{font-size:.84rem; color:var(--sea, var(--bronze))}
/* Die Ebene färbt den linken Rand — so erkennt man die Rolle am Rand der
   Karte, ohne die Beschriftung lesen zu müssen. */
.baum__ast--master > .baum__karte{border-left:3px solid var(--bronze-2)}
.baum__ast--broker > .baum__karte{border-left:3px solid var(--line-2)}

.fortschritt{
  margin-top:8px; height:6px; border-radius:3px;
  background:var(--sunk); overflow:hidden;
}
.fortschritt span{display:block; height:100%; background:var(--bronze-2); border-radius:3px}

/* ── Tabellen auf schmalen Geräten (08.10.2026) ──
   Bei Tabletbreite quetschten sich die Spalten: Beträge brachen mitten in
   der Zahl um („$ 69.⏎077"), und die Provisionsverteilung wurde zum
   Fliesstextknäuel. Der Rahmen `.tablewrap` kann zwar scrollen, aber die
   Tabelle schrumpfte stattdessen auf seine Breite.

   Eine Mindestbreite zwingt sie zum Scrollen — das ist auf einem Tablet die
   richtige Lösung: lieber wischen als raten. Und Zahlen, Daten und Marken
   brechen gar nicht mehr um; eine Spalte Geld, die umbricht, lässt sich
   nicht mehr vergleichen.

   Gefunden beim Nachsehen, nicht beim Bauen. AIXCO testet auf Tablets. */
/* Kein `min-width` auf die Tabelle: Das liess nicht den Rahmen scrollen,
   sondern die ganze Seite, und die Zellen rutschten aus dem Bild. Erst der
   Blick auf beide Blätter nebeneinander hat das gezeigt.

   Was bleibt und hilft: Beträge, Daten und Zustandsmarken brechen nicht mehr
   mitten im Wert um („$ 69.⏎077"). Fliesstext darf weiter umbrechen — er
   soll es sogar. */
.tablewrap{max-width:100%; overflow-x:auto}
td.num, th.num, td .tag, td time{white-space:nowrap}