/* =============================================================================
   SynergyScope — Oberflaeche
   Aetheris GmbH i. G. · Linie Synergy · Stand 13.08.2026
   -----------------------------------------------------------------------------
   Diese Datei hat DREI Teile, und die Reihenfolge ist Absicht:

   TEIL A  Bruecke: die Variablennamen des Bau-Bestands auf --s360-* abbilden.
   TEIL B  Hilfsklassen: der Bestand laedt Tailwind vom CDN. Das ist hier
           verboten, also stehen die ~40 benutzten Klassen von Hand hier.
   TEIL C  Bauteile: Schale (Anmeldung, Leiste, Listen) und der Plan-Editor.

   ⚠️ WARUM TEIL A UEBERHAUPT EXISTIERT
   js/takeoff.js schreibt `style="color:var(--ink)"` und Aehnliches direkt ins
   Markup — an ueber 60 Stellen. Die Datei bleibt unveraendert (einzige erlaubte
   Aenderung: die pdf.js-Worker-Adresse). Diese Namen umzubenennen hiesse, den
   Editor anzufassen. Also werden sie hier EINMAL definiert und auf die
   Markentoken gelegt. Neuer Code benutzt --s360-* direkt.

   ⚠️ GOLD IST NIE FLIESSTEXT (BRAND.md § 3). #DEA51C erreicht auf Weiss nur
   2,2:1. Gold traegt hier Flaechen, Rahmen und Symbole. Wo der uebernommene
   Editor eine goldene SCHRIFT erwartet (--accent-deep), steht ein
   abgedunkeltes Gold; die gemessenen Werte stehen an der Stelle.

   ⚠️ GESPERRT NIE UEBER opacity (BRAND.md § 3). Der Bestand hat
   `#tk-save:disabled{opacity:.5}` — nachgemessen 2,6:1. Ersetzt durch eigene
   Farben; die Regel steht in TEIL C.

   ⚠️ DIE FARBEN IM PLAN BLEIBEN FACHLICH. Datenpunkte, Leitungen und Trassen
   faerbt der Nutzer je Gewerk; der Plan wird auf Wunsch entsaettigt, damit sie
   hervortreten. Hier wird deshalb NICHTS ueber den Planinhalt gelegt. Die Marke
   traegt den Rahmen: Kopfleiste, Werkzeugleiste, Knoepfe, Dialoge.
   ============================================================================= */


/* =============================================================================
   TEIL A — Bruecke zu den Namen des Bau-Bestands
   ============================================================================= */

:root {
  /* --- Schrift: Abweichung von den Markentoken, bewusst -------------------
     1. INTER STATT MANROPE. `--s360-schrift` fuehrt Manrope zuerst, im Buendel
        liegt aber nur Inter (assets/fonts/inter*.woff2). Manrope wurde also
        nirgends geladen und traf nur dort, wo sie zufaellig auf dem Rechner
        installiert ist — zwei Nutzer sahen zwei verschiedene Schriften, ohne
        dass es je aufgefallen waere. Ausgeliefert wird Inter, also steht Inter
        vorn.
     2. GRUNDMASS 16 px STATT 13 px. Die Linie setzt 13 px als Grundmass
        (SynergyProjects). Auf einem Baustellen-Notebook ist das die Groesse,
        bei der man sich vorbeugt. Die Treppe hier ist 13/14/15/16 — und 13 px
        ist die UNTERGRENZE fuer Zusatzangaben, nichts darunter. */
  --s360-schrift: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;
  --s360-groesse-xs: .875rem;    /* 14 — Untergrenze, nur Zusatzangaben */
  --s360-groesse-sm: .9375rem;   /* 15 — Nebentext, Tabellenzeilen */
  --s360-groesse-md: 1.0625rem;  /* 17 — Grundtext, Bedienelemente */

  /* Grund von EINGABEFELDERN und hellen Bedienflaechen (Reiter, Chips,
     Aufklappfenster des Editors). Eigener Name, weil er im Dunkelmodus NICHT
     der Kartengrund ist: ein Feld muss gegen die Karte, auf der es liegt,
     abgesetzt bleiben — sonst sieht man nur noch den Rahmen. */
  --sc-feld-grund: var(--s360-weiss);

  /* Rot für Zerstörendes. Im hellen Modus der Wert des Bestands
     (#c0392b, 5,0:1 auf Weiß), im Dunkelmodus aufgehellt — dort fällt
     derselbe Ton auf 3,1:1. */
  --sc-gefahr: #c0392b;

  /* Flaechen und Linien */
  --bg:            var(--s360-flaeche);
  --bg-elevated:   var(--s360-flaeche-karte);
  --surface:       var(--s360-flaeche-karte);
  --line:          var(--s360-linie);

  /* Schrift. --ink ist im Bestand das tiefe Blau fuer Ueberschriften und
     dunkle Flaechen -> hier das Logo-Navy. */
  --ink:           var(--s360-navy-900);
  --text:          var(--s360-text);
  --text-muted:    var(--s360-text-leise);
  --text-invert:   var(--s360-weiss);

  /* Akzent.
     --accent      = Flaeche/Rahmen/Symbol. Akzentgold, NIE als Schrift.
     --accent-deep = die Faelle, in denen der Editor eine goldene SCHRIFT
                     erwartet (Zaehler-Chip, Entwurfs-Marke, „FINAL"-Marke,
                     .acc-link). #8a640b ist Akzentgold abgedunkelt und
                     gemessen: 5,4:1 auf Weiss, 4,9:1 auf dem Seitengrund
                     #f6f5f2 — beides ueber der AA-Schwelle von 4,5:1.
                     #DEA51C (2,2:1) und selbst #b8860f (3,3:1) fielen hier
                     durch; #b8860f ist nur fuer die grosse Wortmarke belegt.
     --accent-tint = 14-%-Goldwaesche als Flaeche, entspricht --s360-gold-100. */
  --accent:        var(--s360-gold-500);
  --accent-deep:   #8a640b;
  --accent-tint:   var(--s360-gold-100);

  /* Form. Die Linie kennt 7/8/14/99 px — keine eigenen Werte erfinden. */
  --r-sm:  var(--s360-radius-sm);
  --r:     var(--s360-radius-lg);
  --r-lg:  var(--s360-radius-lg);

  --shadow-sm: 0 1px 3px rgba(1, 15, 44, .10);
  --shadow:    var(--s360-schatten);
  --shadow-lg: var(--s360-schatten-hoch);

  --ease: var(--s360-kurve);
}


/* =============================================================================
   TEIL B — Hilfsklassen (Ersatz fuer das Tailwind-CDN des Bestands)
   Nur die tatsaechlich benutzten. Nachgezaehlt aus takeoff.js und aus dem
   uebernommenen Markup; wer eine weitere braucht, ergaenzt sie hier.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; }   /* sonst rutscht zentrierter Inhalt beim Ansichtswechsel */

body {
  margin: 0;
  background: var(--s360-flaeche);
  color: var(--s360-text);
  font-family: var(--s360-schrift);
  font-size: var(--s360-groesse-md);
  line-height: var(--s360-zeilenhoehe);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: var(--s360-fett-halb); line-height: 1.25; }
p { margin: 0; }

/* ⚠️ !important ist hier kein Faulheitszeichen: `.hidden` konkurriert im
   uebernommenen Markup mit `.flex` (z. B. `class="hidden flex items-center"`
   an #tk-draw-actions). Ohne Vorrang gewinnt die spaetere Regel und das
   Element bleibt sichtbar. Genau diese Stelle ist im Bestand kommentiert. */
.hidden { display: none !important; }

.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.min-w-0 { min-width: 0; }
.shrink-0 { flex: none; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }

.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }

.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.p-2 { padding: .5rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }

/* takeoff.js benutzt space-y-3 fuer die Feldliste im Datenpunkt-Dialog. */
.space-y-3 > * + * { margin-top: .75rem; }

.text-xs { font-size: .875rem; }
.text-sm { font-size: .9375rem; }
.text-base { font-size: 1.0625rem; }
.text-2xl { font-size: 1.625rem; }
.font-semibold { font-weight: var(--s360-fett-halb); }
.underline { text-decoration: underline; }

/* Der Bestand schreibt die Tailwind-Kurzform mit eckigen Klammern ins Markup.
   Der Selektor muss deshalb genau so heissen — die Klammern maskiert. */
.text-\[var\(--text-muted\)\] { color: var(--text-muted); }


/* =============================================================================
   TEIL C1 — Bauteile: Knoepfe, Felder, Flaechen
   ============================================================================= */

.surf {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* .acc / .acc-link sind im Bestand die goldene Auszeichnung. Hier das
   abgedunkelte Gold (siehe TEIL A), damit sie lesbar bleiben. */
.acc { color: var(--accent-deep); }
/* ⚠️ `font: inherit` ist hier Pflicht, nicht Kosmetik: `.acc-link` sitzt auch
   auf <button>-Elementen, und ein Knopf ohne Angabe faellt auf die
   Browservorgabe von 13,3 px zurueck — die einzige Stelle, die nach dem
   Anheben der Schrift noch darunter lag (gemessen im laufenden Browser). */
.acc-link { color: var(--accent-deep); cursor: pointer; font: inherit; }
.acc-link:hover { color: var(--ink); }
.rest-done { color: var(--s360-gruen-500); font-weight: var(--s360-fett-halb); }

.rl {
  display: block;
  font-size: .9375rem;
  font-weight: var(--s360-fett-mittel);
  margin-bottom: 4px;
  color: var(--text);
}
.rr-sub { color: var(--text-muted); font-weight: var(--s360-fett-normal); }

.inp {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--sc-feld-grund);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  transition: border-color var(--s360-dauer), box-shadow var(--s360-dauer);
}
.inp:focus {
  outline: none;
  border-color: var(--s360-fokus);
  box-shadow: 0 0 0 3px var(--s360-fokus-hof);
}
.inp:disabled {
  /* Gesperrt ueber eigene Farben, nicht ueber Deckkraft (BRAND.md § 3). */
  background: var(--s360-gesperrt-grund);
  color: var(--s360-gesperrt-text);
  border-style: dashed;
  cursor: not-allowed;
}

.btn {
  --pad: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--pad);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: var(--s360-fett-halb);
  cursor: pointer;
  white-space: nowrap;
  background: var(--s360-flaeche-tief);
  color: var(--s360-text);
  user-select: none;
  transition: background var(--s360-dauer) var(--ease), border-color var(--s360-dauer);
}
.btn-sm { --pad: 6px 12px; font-size: .9375rem; }

/* Gold mit dunkler Schrift — die CTA-Paarung der Linie, 7,9:1. */
.btn-gold { background: var(--s360-akzent); color: var(--s360-text-auf-gold); }
.btn-gold:hover { background: var(--s360-akzent-hover); }

/* Navy mit weisser Schrift — 15,2:1. Der ruhige Zweitknopf.
   ⚠️ Im uebernommenen Markup traegt der BESTAETIGEN-Knopf in Dialogen
   `btn-primary` und mancher Nebenweg `btn-gold`. Die Rollen sind damit
   gegenueber BRAND.md § 4 an einigen Stellen getauscht. Beides sind gueltige
   Markenknoepfe; die Zuordnung geradezuziehen heisst, takeoff.js anzufassen,
   und das ist in E2 gesperrt. Offener Punkt, im Bericht vermerkt. */
.btn-primary, .btn-navy { background: var(--s360-knopf2-grund); color: var(--s360-knopf2-text); }
.btn-primary:hover, .btn-navy:hover { background: var(--s360-knopf2-grund-hover); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: var(--s360-flaeche-tief); }

.btn-danger { background: var(--s360-fehler); color: var(--s360-weiss); }
.btn-danger:hover { background: #b91c1c; }

.btn:focus-visible, .inp:focus-visible, .scope-navlink:focus-visible {
  outline: 2px solid var(--s360-fokus);
  outline-offset: 2px;
}

.btn:disabled {
  /* Gesperrt: eigene Farben statt Deckkraft. Sandflaeche, gestrichelter
     Rahmen, dunkleres Grau — 7,8:1 gemessen. */
  background: var(--s360-gesperrt-grund) !important;
  color: var(--s360-gesperrt-text) !important;
  border: 1px dashed var(--s360-gesperrt-rand) !important;
  cursor: not-allowed;
}


/* =============================================================================
   TEIL C2 — Schale: Anmeldung, Kopfleiste, Inhalt
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Schale: Seitennavigation links + schmale Kopfzeile
   -----------------------------------------------------------------------------
   ⚠️ WARUM DIE NAVIGATION LINKS STEHT (Sascha, 13.08.2026): die Punkte wachsen.
   Eine waagerechte Leiste traegt drei Woerter; senkrecht ist Platz nach unten,
   und ein Untermenue klappt zur Seite auf statt ueber den Inhalt.

   ⚠️ HIER KEIN transform/filter/backdrop-filter — jede dieser Eigenschaften
   macht das Element zum Bezugsrahmen fuer position:fixed, und der
   Vollflaechen-Editor haengt dann in der Seitenleiste statt am Fenster.

   ⚠️⚠️ WIEDERHERGESTELLT am 14.08.2026. Diese drei Bloecke (#scope-shell, die
   beiden Variablen, .scope-seite) sind beim Einbau des Markenzeichens
   verschwunden: ein Textersatz von `.scope-wortmarke` bis `.scope-seite-kopf`
   hat alles mitgenommen, was dazwischen stand. Sichtbar wurde es erst beim
   Nachmessen der Breiten — die FARBmessung blieb gruen, weil sie Farben prueft
   und keine Groessen. Lehre: einen Bereich nie ueber zwei fremde Selektoren
   aufspannen. */
#scope-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

:root {
  /* EIN Wert fuer den Abstand zur Navigation, benutzt von der Kopfzeile UND vom
     Inhalt. Zwei getrennte Angaben waeren die Stelle, an der Ueberschrift und
     Titel spaeter um ein paar Pixel gegeneinander verrutschen. */
  --sc-inhalt-luft: 56px;

  /* ⚠️⚠️ `--s360-abstand-5` GIBT ES IN DEN MARKENTOKEN NICHT (die Treppe geht
     1·2·3·4·6·8·12). Vier Stellen in dieser Datei benutzen ihn trotzdem — und
     eine ungueltige Variable macht die GANZE Kurzschreibweise ungueltig:
     `padding: 0 var(--s360-abstand-5)` an der Kopfzeile hat gar keinen
     Innenabstand erzeugt, das Kontomenue klebte am Rand. Hier ergaenzt und
     nicht in synergy-tokens.css: die Markendatei ist eine Kopie aus
     `synergy-brand` und liefe beim naechsten Abgleich still auseinander. */
  --s360-abstand-5: 1.25rem;
}

/* --- Markenzeichen ---------------------------------------------------------
   Das Logo ist fuer WEISSEN Grund freigestellt (BRAND.md § 3.4) und bringt
   seinen hellen Grund im Bild mit. Im Dunkelmodus bekommt es deshalb das
   Plaettchen der Linie — weisse Flaeche, Radius 8 px —, sonst saesse ein
   hellgrauer Kasten in einer dunklen Leiste. Genau so machen es Projects
   (`.kopfLogoBild`) und Time (`.st-logo-plate`). */
.scope-marke { display: inline-flex; align-items: center; text-decoration: none; }
/* 26 px statt 28: mit Knopf und Luecke lief die Kopfzeile der Leiste sonst
   um 2 px ueber (gemessen: 220 in 218). */
.scope-marke-voll { height: 26px; width: auto; display: block; }
.scope-marke-zeichen { height: 30px; width: 30px; display: none; }
.scope-marke-login { height: 46px; width: auto; display: block; margin-bottom: 10px; }

:root[data-theme="dark"] .scope-marke img,
:root[data-theme="dark"] .scope-marke-login {
  background: var(--s360-weiss);
  border-radius: var(--s360-radius-md, 8px);
  padding: 4px 7px;
}

/* Die alte Textmarke bleibt als Klasse bestehen: `takeoff.js` und die
   Rechtstextseiten setzen sie weiterhin. Nur die Anwendung selbst zeigt jetzt
   das Bild. */
.scope-wortmarke {
  font-size: 1.125rem;
  font-weight: var(--s360-fett-voll);
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
}
.scope-wortmarke > span { color: var(--accent-deep); }

/* ⚠️ WIEDERHERGESTELLT am 14.08.2026: diese Regel war beim Einbau des
   Markenzeichens mit weggefallen (ein Textersatz von `.scope-wortmarke` bis
   `.scope-seite-kopf` hat die dazwischenliegende Regel mitgenommen). Die
   Leiste stand danach 1425 px breit ueber der ganzen Seite — und die
   Farbmessung blieb trotzdem gruen, weil sie Farben prueft und keine Groessen.
   Merksatz: ein Bereichsersatz ueber zwei Selektoren nimmt alles mit, was
   dazwischen steht. */
.scope-seite {
  position: sticky;
  top: 0;
  z-index: 60;
  flex: none;
  width: var(--sc-seite-breite, 244px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  /* HELL, NICHT NAVY (Sascha, 14.08.2026). Dieselbe Flaeche wie eine Karte,
     damit die Leiste im Dunkelmodus von selbst mitschaltet; ein fest
     verdrahtetes Navy waere dort die hellste Flaeche im Bild.
     Die Geste der Linie bleibt: die goldene Kante, hier an der rechten Seite. */
  background: var(--s360-flaeche-karte);
  color: var(--s360-text);
  border-right: var(--s360-leiste-kante-dicke) solid var(--s360-leiste-kante);
  box-shadow: var(--shadow-sm);
  transition: width .16s var(--ease);
  overflow-y: auto;
}

.scope-seite-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 14px;
  min-height: 44px;
}

.scope-nav { display: flex; flex-direction: column; gap: 2px; }

/* Gruppenlabel — die „gesperrte Versalzeile" der Linie (Synergy-Time:
   `.stnav-grp`, 11 px, `letter-spacing: .14em`, versal).
   ⚠️ IN INTER, NICHT IN OSWALD (Sascha, 14.08.2026: „wir möchten Inter
   nutzen"). Oswald ist im Markentoken `--s360-schrift-schmal` vorgesehen und
   liegt in Synergy-Time auch als Datei bei — hier bewusst nicht: eine zweite
   Schriftfamilie fuer drei Zeilen kostet einen weiteren Download, und die
   Wirkung traegt bei Inter die Sperrung, nicht der Schnitt.
   ⚠️ 12 px statt 11: die Untergrenze dieser Oberflaeche ist 14 px, und eine
   gesperrte Versalzeile darf knapp darunter liegen (sie ist kein Fliesstext,
   und Versalien haben keine Unterlaenge) — aber nicht bei 11. */
.scope-nav-label {
  padding: 14px 10px 5px;
  font-size: .75rem;
  font-weight: var(--s360-fett-halb);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* ⚠️ NICHT `--s360-text-zart` (#a8a59d = 2,3:1 auf Weiss). Eine gesperrte
     Versalzeile ist zwar Auszeichnung, aber immer noch Text — Synergy-Time
     setzt seine Gruppenlabel auf #6b7280, also rund 4,8:1. */
  color: var(--s360-text-leise);
}
.scope-nav-label:first-child { padding-top: 4px; }
.scope-seite.schmal .scope-nav-label { display: none; }

.scope-nav-gruppe { position: relative; }

.scope-navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--s360-text-leise);
  font: inherit;
  font-size: var(--s360-groesse-sm);
  font-weight: var(--s360-fett-mittel);
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}
.scope-navlink:hover { color: var(--s360-text); background: var(--s360-flaeche-tief); }
.scope-navlink .sym { flex: none; }
.scope-navlink-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
                      text-overflow: ellipsis; }
/* Der Pfeil zeigt dauerhaft nach rechts — dorthin, wo das Menü aufgeht. Er
   dreht sich NICHT mehr beim Öffnen: eine Drehung nach unten würde ein
   Aufklappen nach unten ankündigen, das es nicht mehr gibt. */
.scope-navlink-pfeil { flex: none; opacity: .75; }

/* Aktiv wird ueber Schriftfarbe UND eine goldene Kante gezeigt, nicht nur ueber
   Farbe — Farbe allein ist kein zulaessiger Unterschied (WCAG 1.4.1). */
.scope-navlink.active { color: var(--ink); background: var(--s360-akzent-leise);
                        font-weight: var(--s360-fett-halb); }
.scope-navlink.active::after {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 3px;
  background: var(--s360-akzent);
  border-radius: 0 2px 2px 0;
}

/* --- Untermenue: FLYOUT NACH RECHTS ----------------------------------------
   ⚠ SASCHA, 14.08.2026: „Mit Flyout meinte ich in der Navigation Flyouts nach
   rechts, nicht nach unten." Die erste Fassung klappte in der breiten Leiste
   eine Liste UNTER dem Punkt auf und wurde nur in der Symbolleiste zum Flyout.
   Jetzt gilt EINE Form in beiden Breiten — das ist auch das ehrlichere
   Verhalten: die Punkte darunter bleiben stehen, wo sie sind, und die
   Navigation hüpft beim Öffnen nicht.

   Sichtbar bei Zeigerkontakt, bei Tastaturfokus UND über die Klasse `.offen`
   (Klick). Nur `:hover` wäre auf einem Tablet unerreichbar, nur `.offen` wäre
   für die Maus eine unnötige Klickstrecke. */
.scope-unter {
  display: none;
  flex-direction: column;
  gap: 1px;
  position: absolute;
  /* ⚠️ NICHT `left:100%`, sondern 100 % PLUS dem Weg nach draußen. Der Bezug ist
     die Gruppe INNERHALB der Leiste; deren rechte Kante liegt noch vor dem
     Innenabstand und der goldenen Kante. Gemessen: das Menü begann bei 230 px
     und legte sich über die Kante, die bei 244 px endet. */
  left: calc(100% + 20px);
  top: -6px;
  z-index: 80;
  min-width: 232px;
  padding: 6px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  /* Die goldene Kante der Linie — hier an der Anschlusskante zur Leiste. */
  border-left: 2px solid var(--s360-akzent);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}

/* ⚠ BRÜCKE ÜBER DEN SPALT. Das Flyout beginnt bei `left:100%`, aber der Zeiger
   verlässt auf dem Weg dorthin kurz beide Elemente, sobald ein Abstand oder ein
   Rahmen dazwischen liegt — das Menü flackert weg, bevor man es erreicht.
   Die unsichtbare Fläche links davor hält den Zeigerkontakt. */
.scope-unter::before {
  content: "";
  position: absolute;
  left: -22px; top: 0; bottom: 0;
  width: 22px;
}

.scope-nav-gruppe:hover > .scope-unter,
.scope-nav-gruppe:focus-within > .scope-unter,
.scope-nav-gruppe.offen > .scope-unter { display: flex; }

.scope-unterlink {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--s360-text-leise);
  font: inherit;
  font-size: var(--s360-groesse-xs);
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
}
.scope-unterlink:hover { color: var(--s360-text); background: var(--s360-flaeche-tief); }
.scope-unterlink.active { color: var(--ink); background: var(--s360-akzent-leise);
                          font-weight: var(--s360-fett-halb); }
.scope-unterlink .sc-zahl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--s360-groesse-xs);
  color: var(--s360-text-leise);
}

.scope-seite-fuss { margin-top: auto; padding: 8px 10px 0; }
.scope-seite-fuss a { color: var(--s360-text-leise); font-size: var(--s360-groesse-xs);
                      text-decoration: none; margin-right: 10px; }
.scope-seite-fuss a:hover { color: var(--s360-text); text-decoration: underline; }

/* --- Symbolleiste (eingeklappt) -------------------------------------------- */
.scope-seite.schmal { --sc-seite-breite: 64px; }
.scope-seite.schmal .scope-navlink-text,
.scope-seite.schmal .scope-navlink-pfeil,
.scope-seite.schmal .scope-marke-voll,
.scope-seite.schmal .scope-seite-fuss { display: none; }
.scope-seite.schmal .scope-marke-zeichen { display: block; }
.scope-seite.schmal .scope-seite-kopf { flex-direction: column; gap: 10px; }
.scope-seite.schmal .scope-navlink { justify-content: center; padding: 10px 0; }

/* --- Kopfzeile rechts ------------------------------------------------------ */
.scope-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.scope-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s360-abstand-3);
  min-height: 52px;
  padding: 0 var(--s360-abstand-5) 0 var(--sc-inhalt-luft);
  background: var(--s360-flaeche-karte);
  /* ⚠️ DIE GESTE DER LINIE, quer. Synergy-Time setzt sie zweimal:
     `.st-nav { border-bottom: 2px solid gold }` und den Fuß mit
     `border-top: 2px solid gold`; SynergyContacts markiert damit den aktiven
     Navigationspunkt. Hier stand bis zum 14.08.2026 nur eine graue Haarlinie —
     die einzige Stelle, an der SynergyScope die Familienzugehoerigkeit nicht
     gezeigt hat. */
  border-bottom: var(--s360-leiste-kante-dicke) solid var(--s360-leiste-kante);
}
.scope-topbar-titel {
  font-size: var(--s360-groesse-md);
  font-weight: var(--s360-fett-halb);
  color: var(--s360-text);
}
.scope-kopf-luft { flex: 1; }

.scope-ikonknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--s360-text-leise);
  cursor: pointer;
}
.scope-ikonknopf:hover { background: var(--s360-flaeche-tief); color: var(--s360-text); }

/* --- Kontomenue (oben rechts) ---------------------------------------------
   Aufklappen bei Zeigerkontakt UND bei Tastaturfokus. Nur `:hover` waere mit
   der Tastatur nicht erreichbar — und das Menue enthaelt das Abmelden. */
.scope-konto { position: relative; }
.scope-konto-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 5px 10px 5px 6px;
  color: var(--s360-text);
  font: inherit;
  font-size: var(--s360-groesse-sm);
  cursor: pointer;
}
.scope-konto-knopf:hover { background: var(--s360-flaeche-tief); }
.scope-konto-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }

.scope-konto-menue {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 90;
  min-width: 248px;
  padding: 6px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
/* ⚠️ Der Abstand oben ist 6 px, und das Menue liegt trotzdem ohne Luecke am
   Knopf: die Pseudo-Flaeche ueberbrueckt ihn. Ohne sie schliesst das Menue,
   sobald der Zeiger die 6 px quert — der klassische „Menue flackert weg". */
.scope-konto-menue::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px;
  height: 8px;
}
.scope-konto:hover .scope-konto-menue,
.scope-konto:focus-within .scope-konto-menue,
.scope-konto.offen .scope-konto-menue { display: block; }

.scope-menuepunkt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--s360-text);
  font: inherit;
  font-size: var(--s360-groesse-sm);
  text-align: left;
  text-decoration: none;
  padding: 9px 10px;
  cursor: pointer;
}
.scope-menuepunkt:hover { background: var(--s360-flaeche-tief); }
.scope-menuepunkt .sym { flex: none; color: var(--s360-text-leise); }
.scope-menuepunkt-zusatz { margin-left: auto; font-size: var(--s360-groesse-xs);
                           color: var(--s360-text-leise); }
.scope-menue-kopf {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--s360-linie);
  margin-bottom: 4px;
}
.scope-menue-kopf b { display: block; font-size: var(--s360-groesse-sm); }
.scope-menue-kopf span { font-size: var(--s360-groesse-xs); color: var(--s360-text-leise); }
.scope-menue-trenner { height: 1px; background: var(--s360-linie); margin: 4px 0; }

/* ⚠️ HIER KEIN backdrop-filter, KEIN filter, KEIN transform.
   Jede dieser Eigenschaften macht das Panel zum Bezugsrahmen fuer
   position:fixed — und dann liegt der Vollflaechen-Editor (#tk-editor.tk-fs)
   nicht mehr am Fenster, sondern im Panel. Der Bau-Bestand hat genau deshalb
   die Notbremse `body.tk-editing .content-panel{backdrop-filter:none}`; sie
   steht unten weiterhin drin, falls jemand hier spaeter Glas einbaut. */
.content-panel {
  /* Seit die Navigation links steht, ist das Panel kein schwebendes Blatt mehr,
     sondern die Arbeitsflaeche: kein Rahmen, kein Schatten, keine Zentrierung
     gegen eine Hausbreite — sonst entstuende neben der Leiste ein zweiter
     Rand und der Inhalt saesse aussermittig auf dem Schirm. */
  width: 100%;
  max-width: 1180px;
  margin: 0;
  padding: var(--s360-abstand-6) var(--s360-abstand-6) var(--s360-abstand-8)
           var(--sc-inhalt-luft);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Der Editor braucht mehr Platz als die Hausbreite; im Vollflaechen-Modus
   traegt er ohnehin position:fixed, aber davor soll das Panel nicht einschnueren. */
body.tk-editing .content-panel { max-width: none; margin: 0; padding: 0; border: none; box-shadow: none; }
body.tk-editing .scope-topbar { padding-left: var(--s360-abstand-5); }

/* --- Anmeldung ----------------------------------------------------------- */
.scope-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s360-abstand-6);
  /* Kein Hintergrundbild: der Bestand legt ein Blaupausen-Foto unter die
     Seite. Ein solches Bild gibt es fuer SynergyScope nicht, und es von
     irgendwo zu laden ist ausgeschlossen (Fremd-Host). Warmes Off-White mit
     einem Navy-Schimmer ist die Loesung der Linie. */
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--s360-navy-100), transparent),
    var(--s360-flaeche);
}
.scope-login-karte {
  width: 100%;
  max-width: 420px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-lg);
  box-shadow: var(--s360-schatten-hoch);
  padding: var(--s360-abstand-8);
}
.scope-login-claim {
  color: var(--s360-text-leise);
  font-size: .9375rem;
  margin: var(--s360-abstand-2) 0 var(--s360-abstand-6);
}
.scope-login-fuss {
  margin-top: var(--s360-abstand-6);
  padding-top: var(--s360-abstand-4);
  border-top: 1px solid var(--s360-linie);
  font-size: .875rem;
  color: var(--s360-text-leise);
}

/* --- Meldungen ----------------------------------------------------------- */
.scope-meldung { font-size: .9375rem; color: var(--s360-text-leise); min-height: 1.2em; }
.scope-meldung-fehler { color: var(--s360-fehler); }
.scope-meldung-ok { color: var(--s360-erfolg); }

/* --- Projektliste -------------------------------------------------------- */
.pr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.pr-row:first-child { border-top: none; }
.pr-row:hover { background: var(--s360-flaeche-tief); }
.pr-name { font-weight: var(--s360-fett-halb); color: var(--ink); }
.pr-del { color: var(--s360-fehler); border-color: var(--s360-fehler); }
.pr-del:hover { background: var(--s360-fehler-grund); border-color: var(--s360-fehler); }
.pr-archiv-marke {
  font-size: .875rem;
  font-weight: var(--s360-fett-voll);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--s360-gesperrt-grund);
  color: var(--s360-gesperrt-text);
  border: 1px solid var(--s360-gesperrt-rand);
  border-radius: var(--s360-radius-voll);
  padding: 1px 8px;
  vertical-align: 2px;
}
.scope-schalter { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }

/* --- Ablagefeld (Drag & Drop) -------------------------------------------- */
.files-dz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 22px 16px;
  margin: 18px 0;
  color: var(--text-muted);
  background: var(--s360-sand-50);
  font-size: 1.0625rem;
  text-align: center;
  transition: border-color var(--s360-dauer), background-color var(--s360-dauer), color var(--s360-dauer);
}
.files-dz:hover { border-color: var(--accent); color: var(--ink); }
.files-dz.dz-over { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.files-dz .files-dz-ic { font-size: 1.3rem; }

/* --- Globale Dialoge und Meldungsstreifen -------------------------------- */
.ui-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(1, 15, 44, .48);
}
.ui-karte {
  width: 100%;
  max-width: 440px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r-lg);
  box-shadow: var(--s360-schatten-hoch);
  padding: var(--s360-abstand-6);
}
.ui-busy-karte { max-width: 300px; display: flex; align-items: center; gap: 14px; }
.ui-spinner {
  width: 26px; height: 26px;
  flex: none;
  border: 3px solid var(--s360-linie);
  border-top-color: var(--s360-akzent);
  border-radius: 50%;
  animation: ui-dreh .8s linear infinite;
}
@keyframes ui-dreh { to { transform: rotate(360deg); } }
/* Wer „Bewegung reduzieren" gewaehlt hat, bekommt einen Puls statt der
   Drehung — ohne Anzeige waere „ist es haengengeblieben?" die Folge. */
@media (prefers-reduced-motion: reduce) {
  .ui-spinner { animation: ui-puls 1.4s ease-in-out infinite; border-top-color: var(--s360-linie); }
  @keyframes ui-puls { 50% { border-color: var(--s360-akzent); } }
}

/* Meldungsstreifen. z-index ueber allem, auch ueber dem Editor-Vollbild
   (#tk-editor.tk-fs liegt auf 90, die Editor-Dialoge auf 80). */
.ui-toasts {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
}
.ui-toast {
  background: var(--s360-navy-900);
  color: var(--s360-weiss);
  border-left: 4px solid var(--s360-akzent);
  border-radius: var(--r-sm);
  box-shadow: var(--s360-schatten-hoch);
  padding: 10px 14px;
  font-size: .9375rem;
  line-height: 1.45;
}
.ui-toast.success { border-left-color: var(--s360-gruen-500); }
.ui-toast.error { border-left-color: var(--s360-rot-500); }
.ui-toast.info { border-left-color: var(--s360-akzent); }
.ui-toast.out { opacity: 0; transition: opacity .3s; }


/* =============================================================================
   TEIL C3 — Plan-Editor
   Uebernommen aus ki-portal/frontend/index.html (166 Regeln), auf die Token
   der Linie gelegt. Klassennamen NICHT aendern — takeoff.js setzt sie.
   ============================================================================= */

.tk-divider { width: 1px; height: 20px; background: var(--line); display: inline-block; }

/* Werkzeug ist scharf: goldene Flaeche plus Umriss. Nicht nur Farbe. */
.tk-tool-on {
  background: var(--accent-tint) !important;
  outline: 2px solid var(--accent);
}

/* Zwischenspeichern: ruhig navy-umrandet, bei ungesicherten Aenderungen gruen
   vollflaechig. Der Farbwechsel ist die einzige Anzeige dafuer, dass Arbeit
   verloren gehen kann — deshalb kraeftig und nicht nur ein Punkt. */
#tk-save { background: var(--sc-feld-grund); color: var(--ink); border: 1.5px solid var(--ink); font-weight: var(--s360-fett-halb); }
#tk-save:hover { background: var(--s360-navy-100); }
#tk-save.tk-save-dirty { background: #1d8348; color: #fff; border-color: #1d8348; }
#tk-save.tk-save-dirty:hover { background: #19733f; }
/* ⚠️ Der Bestand hat hier `opacity:.5` — nachgemessen 2,6:1 und damit
   unlesbar. Eigene Farben, siehe .btn:disabled. Die Regel steht trotzdem
   nochmal explizit, weil #tk-save eine eigene Grundfarbe hat und sonst
   gewinnen wuerde. */
#tk-save:disabled, #tk-transfer:disabled {
  background: var(--s360-gesperrt-grund) !important;
  color: var(--s360-gesperrt-text) !important;
  border: 1px dashed var(--s360-gesperrt-rand) !important;
  cursor: not-allowed;
}

/* Vollbild-Knopf bewusst gruen und damit auffindbar: der Editor ist auf
   kleinen Schirmen ohne Vollbild kaum bedienbar. */
#tk-fs { background: #1d8348; color: #fff; border: 1.5px solid #1d8348; font-weight: var(--s360-fett-halb); }
#tk-fs:hover { background: #19733f; }
#tk-finish-top:hover { background: #19733f !important; }

/* ⚠️ Ohne diese Zeile gewinnt `.flex` gegen `.hidden` (gleiche Spezifitaet,
   spaeter definiert) und die Zeichnen-Knoepfe bleiben immer sichtbar. Steht so
   auch im Bestand — dort mit derselben Begruendung. */
#tk-draw-actions.hidden, #tk-finish-top.hidden, #tk-cancel-top.hidden { display: none !important; }

/* „Neues Aufmass"-Dialog. Liegt AUSSERHALB <main>; die Begruendung steht in
   index.html an der Stelle. */
#tk-new {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(1, 15, 44, .42);
  overflow: auto;
}
#tk-new.hidden { display: none !important; }

.tk-style-pop {
  position: absolute;
  top: 36px; left: 0;
  z-index: 40;
  background: var(--sc-feld-grund);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tk-style-pop.hidden { display: none; }
.tk-stg { display: flex; flex-direction: column; gap: 7px; }
.tk-stg-h {
  font-weight: var(--s360-fett-voll);
  font-size: .875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tk-stg label { display: flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--ink); }
.tk-stg input[type=number] { width: 64px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tk-stg input[type=color] { width: 42px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; }
.tk-stg-hint { font-size: .875rem; color: var(--text-muted); line-height: 1.4; }

.tk-sec-h {
  font-size: .875rem;
  font-weight: var(--s360-fett-voll);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 14px 14px 4px;
}
.tk-aufmass { border-bottom: 1px solid var(--line); }
.tk-aufmass .tk-row { border-top: none; }
.tk-num {
  background: var(--ink);
  /* ⚠️ NICHT fest weiss: `--ink` kehrt sich im Dunkelmodus um (helles Navy ->
     helle Schrift), und weiss auf hell ergab 1,19:1. Die Flaeche des
     Seitengrunds ist in beiden Modi der richtige Gegenpol zu --ink. */
  color: var(--s360-flaeche);
  font-size: .875rem;
  font-weight: var(--s360-fett-voll);
  border-radius: var(--s360-radius-voll);
  padding: 2px 9px;
  flex: none;
}
.tk-collapse {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--s360-radius-md);
  cursor: pointer;
  font: inherit;
  font-size: .9375rem;
  padding: 2px 8px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.tk-collapse:hover { border-color: var(--accent); }
.tk-cnt {
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-radius: var(--s360-radius-voll);
  padding: 0 7px;
  font-weight: var(--s360-fett-voll);
}
.tk-name { font-weight: var(--s360-fett-halb); color: var(--ink); cursor: text; }
.tk-name:hover { text-decoration: underline dotted; }

/* ⚠️ Der Bestand nimmt hier `opacity:.7`/`1` fuer den Ruhe- und Hover-Zustand
   des Loeschsymbols. Deckkraft ist hier durch Farbe ersetzt — dieselbe Wirkung,
   aber ein messbarer Kontrast im Ruhezustand. */
.tk-del { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--s360-text-leise); }
.tk-del:hover { color: var(--s360-fehler); }

.tk-plans { padding: 2px 14px 12px 52px; background: var(--s360-sand-50); }
.tk-plan-row { font-size: .9375rem; color: var(--text-muted); padding: 5px 0; border-top: 1px solid var(--line); }

#tk-list .tk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
#tk-list .tk-row:first-child { border-top: none; }

/* Zustandsmarken. „final" gruen gefuellt, „Entwurf" als goldener Chip —
   und weil Gold als Schrift nicht traegt, steht darin das dunkle Gold. */
.tk-badge-final {
  font-size: .875rem;
  font-weight: var(--s360-fett-voll);
  color: var(--s360-weiss);
  background: var(--s360-gruen-500);
  padding: 2px 8px;
  border-radius: var(--s360-radius-voll);
}
.tk-badge-draft {
  font-size: .875rem;
  font-weight: var(--s360-fett-voll);
  color: var(--accent-deep);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  padding: 2px 8px;
  border-radius: var(--s360-radius-voll);
}

/* --- Planleiste ---------------------------------------------------------- */
.tk-planbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 12px; }
.tk-planbar .lbl {
  font-size: .9375rem;
  font-weight: var(--s360-fett-voll);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-right: 2px;
}
.tk-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--s360-radius-voll);
  padding: 9px 18px;
  font-size: 1.0625rem;
  font-weight: var(--s360-fett-mittel);
  cursor: pointer;
  background: var(--sc-feld-grund);
  color: var(--ink);
  transition: transform .12s var(--ease), box-shadow .12s, border-color .12s;
}
.tk-plan-chip:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* Aktiv: goldener Rand, Goldwaesche UND fett — drei Merkmale, damit es nicht
   allein an der Farbe haengt. */
.tk-plan-chip.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  font-weight: var(--s360-fett-voll);
  box-shadow: var(--shadow-sm);
}
.tk-plan-chip .x { color: var(--s360-fehler); cursor: pointer; font-size: 1.125rem; }
.tk-plan-add {
  border: 1px dashed var(--line);
  border-radius: var(--s360-radius-voll);
  padding: 5px 12px;
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
  background: none;
  color: var(--accent-deep);
}
.tk-plan-add:hover { border-color: var(--accent); }

.tk-tr-opt { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; color: var(--ink); padding: 4px 0; }

/* --- Vorschau & Ausgabe -------------------------------------------------- */
.tk-pv-tab {
  border: 1px solid var(--line);
  border-radius: var(--s360-radius-md);
  padding: 4px 10px;
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
  background: var(--sc-feld-grund);
  color: var(--s360-text);
}
.tk-pv-tab.active { background: var(--ink); color: var(--s360-weiss); border-color: var(--ink); }
.tk-pv-table { border-collapse: collapse; font-size: .9375rem; width: 100%; table-layout: fixed; }
.tk-pv-table td {
  border: 1px solid var(--line);
  padding: 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kopfzeile der Vorschau: Goldwaesche als Flaeche, Text bleibt Textfarbe.
   ⚠️ Zahlen in einer Abrechnung sind Fliesstext — nie golden setzen. */
.tk-pv-table tr:first-child td { background: var(--accent-tint); font-weight: var(--s360-fett-halb); }
.tk-pv-table td { font-variant-numeric: tabular-nums; }
.tk-pv-th { position: relative; }
.tk-pv-grip { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; }
.tk-pv-grip:hover { background: var(--accent); }
.tk-pv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--s360-flaeche-tief);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* ⚠️ GEMESSENER BEFUND (13.08.2026): `--text-muted` (#6f6d67) auf dieser
     EINGESENKTEN Flaeche (sand-200, #ebe9e4) ergibt 4,26:1 — knapp unter den
     4,5:1, die kleiner Text braucht. Auf der weissen Karte waeren es 5,17:1;
     der Wert ist also nicht falsch gewaehlt, er passt nur auf DIESEM Grund
     nicht. Genau deshalb wird gegen die komponierte Flaeche gemessen und nicht
     gegen den Seitengrund.

     Betroffen waren vier Stellen („Ausrichtung:", beide Ausrichtungsknoepfe und
     „Prueffaehiges Aufmass"). Statt sie einzeln nachzuziehen, wird die
     Eigenschaft HIER umdefiniert: mehrere davon setzen `--text-muted` inline im
     Markup, und eine Klassenregel kaeme dagegen nur mit `!important` an. So
     erbt jeder kuenftige Text in dieser Leiste den passenden Wert mit.

     `--s360-grau-600` ist ein vorhandener Token der Palette, keine erfundene
     Farbe: 5,05:1 auf der eingesenkten Flaeche, und er bleibt in der
     Graufamilie — die Abstufung „leise gegen Text" bleibt also erhalten. */
  --text-muted: var(--s360-grau-600);
}
.tk-orient { display: inline-flex; border: 1px solid var(--line); border-radius: var(--s360-radius-md); overflow: hidden; }
.tk-orient button { padding: 5px 12px; font: inherit; font-size: .9375rem; background: transparent; border: none; color: var(--text-muted); cursor: pointer; }
.tk-orient button.active { background: var(--ink); color: var(--s360-weiss); }
.tk-pv-warn {
  background: var(--s360-warnung-grund);
  border: 1px solid var(--s360-warnung);
  color: #7a4b12;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   REB 23.003 — prüffähiges Aufmaß (DA11 / GAEB X31)
   Verdrahtet in js/reb-ausgabe.js.

   ⚠️ Alle Farbpaarungen hier sind GEMESSEN, hell und dunkel, und im
   Dunkelmodus gegen die KOMPONIERTE Fläche: der Kastengrund ist dort
   rgba(…, 0.14) über --s360-flaeche-tief (#151c2a), also tatsächlich #19363a
   bzw. #353329. Wer gegen die reine rgba-Farbe rechnet, misst eine Fläche,
   die niemand sieht.

     hell    Fließtext  #3f4652 auf gruen-100    8,66:1   auf warn-100  8,54:1
             Überschrift #0f5c2c auf gruen-100   7,39:1   (--s360-erfolg
                        wäre nur 4,57:1 — knapp, aber eben knapp)
             Fließtext  #3f4652 auf sand-200     7,83:1
     dunkel  Fließtext  --s360-text  auf ok-Grund 10,68:1  warn-Grund 10,51:1
             Überschrift --s360-erfolg           6,70:1   --s360-warnung 7,59:1

   ⚠️ Gold ist hier NIE Fließtext (#DEA51C auf Weiß = 2,2:1) und Gesperrtes
   nie über `opacity` — beides Hausregeln aus gemessenen Fehlschlägen.
   -------------------------------------------------------------------------- */
.tk-reb-bar { margin-top: 8px; }
.tk-reb-sel {
  font: inherit;
  font-size: .9375rem;
  padding: 4px 8px;
  color: var(--ink);
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--line);
  border-radius: var(--s360-radius-md);
}
.tk-reb-bericht {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #3f4652;
}
.tk-reb-info { background: var(--s360-flaeche-tief); }
.tk-reb-ok {
  background: var(--s360-erfolg-grund);
  border-color: var(--s360-erfolg);
}
.tk-reb-ok > b:first-child { color: #0f5c2c; }
.tk-reb-warn {
  background: var(--s360-warnung-grund);
  border-color: var(--s360-warnung);
}
.tk-reb-warn > b:first-child { color: #7a4b12; }
.tk-reb-zahlen { color: var(--text-muted); font-size: .9375rem; margin-top: 4px; }
.tk-reb-fehlt { margin-top: 6px; }
/* Die Tabelle der Abweichungen darf waagerecht rollen statt die Seite zu
   sprengen — ein LV kann viele Positionen haben. */
.tk-reb-tab {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: .9375rem;
}
.tk-reb-tab th, .tk-reb-tab td {
  text-align: left;
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tk-reb-tab th { color: var(--text-muted); font-weight: var(--s360-fett-halb); }

.s360-dunkel .tk-reb-bericht { color: var(--s360-text); }
.s360-dunkel .tk-reb-ok > b:first-child { color: var(--s360-erfolg); }
.s360-dunkel .tk-reb-warn > b:first-child { color: var(--s360-warnung); }

/* ⚠️ „→ Lexware Office" ausblenden.
   takeoff.js erzeugt diesen Knopf im Rechnungs-Reiter des Ausgabe-Hubs
   (Zeile 2899) und blendet ihn nach dem Erstellen einer Rechnung ein. Den
   zugehoerigen Endpunkt POST /api/takeoff/invoice/{id}/lexoffice gibt es in
   SynergyScope bewusst NICHT — begruendet im Kopf von
   backend/app/routers/takeoff.py. Der Knopf wuerde also zuverlaessig
   „Lexware Office: Not Found" melden. Ein Knopf, der immer scheitert, ist
   schlimmer als keiner; ihn zu entfernen hiesse takeoff.js anzufassen, und das
   ist gesperrt. XRechnung und ZUGFeRD daneben bleiben sichtbar — die Endpunkte
   gibt es. */
#tk-hinv-lex { display: none !important; }

/* ⚠️ Stempel bleibt zu — aber die Begruendung hat sich am 13.08.2026 geaendert.
   VORHER war die fremde Marke im Quelltext verdrahtet (`takeoff.js:2107`):
       _STAMP_SRC = "assets/Aetheris_Token_web.png"
       _STAMP_URL = "aetheris-bau.de"
   Ein SynergyScope-Kunde haette „aetheris-bau.de" auf seinen Plan gestempelt
   bekommen, also die Adresse eines ANDEREN Produkts auf ein Dokument, das er
   seinem Auftraggeber gibt. Dazu zwei 404 je Seitenaufruf auf das fehlende Bild,
   weil das Vorladen unabhaengig vom Knopf lief.

   JETZT kommt der Stempel von aussen (`window.SCOPE_STEMPEL = {bild, adresse}`)
   und ist leer: kein Vorladen, kein Zeichnen, keine 404, keine fremde Marke im
   Quelltext.

   Der Knopf bleibt trotzdem zu, jetzt aus zwei anderen Gruenden:
     1. SynergyScope hat noch kein eigenes Stempellogo (Saschas offener Punkt —
        „Scope" statt „Plan", das runde S-Zeichen ist wiederverwendbar).
     2. `synergy-scope.de` ist noch nicht registriert. Eine nicht registrierte
        Adresse auf ein Kundendokument zu stempeln waere schlechter als keine.
   Sobald beides steht, ist es ein Einzeiler in scope-app.js plus diese Zeile. */
#tk-stamp { display: none !important; }

/* --- Arbeitsflaeche: Palette + Buehne ------------------------------------ */
.tk-workspace { display: flex; gap: 12px; align-items: flex-start; }

/* Die Palette ist RAHMEN, nicht Planinhalt.
   ⚠️ FRÜHER NAVY, seit 14.08.2026 hell (Sascha: „das gilt auch für den
   Editor"). Der Bestand nimmt dafür ein Dunkelblau, damit die fachlichen
   Gewerkfarben hervortreten — sie tun das auf hellem Grund genauso, und die
   Palette steht direkt neben einem weißen Planblatt. Ein dunkler Streifen
   daneben war das lauteste Element im Bild, ohne die wichtigste Information zu
   tragen. */
.tk-palette {
  width: 190px;
  flex: none;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  color: var(--s360-text);
  border-radius: var(--r);
  padding: 10px;
  max-height: 74vh;
  overflow: auto;
}
.tk-pal-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--s360-linie);
  border-radius: 9px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 1.0625rem;
  background: var(--s360-flaeche);
  color: var(--s360-text);
  user-select: none;
}
.tk-pal-item:hover { border-color: var(--s360-akzent); }
.tk-pal-item.armed {
  outline: 2px solid var(--s360-akzent);
  border-color: var(--s360-akzent);
  background: rgba(222, 165, 28, .22);
}
.tk-pal-sym { flex: none; }
/* Der Ring trennt den Gewerkpunkt von der Fläche. Er war weiß (für Navy) und
   wäre auf heller Fläche unsichtbar -> Linienfarbe, die in beiden Modi trägt. */
.tk-pal-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--s360-linie-stark); }
.tk-pal-dot.line { border-radius: 3px; height: 6px; }
/* Dieselbe Auszeichnung wie die Gruppenlabel der Navigation — die Palette IST
   eine Navigation, nur im Editor. */
.tk-pal-h {
  color: var(--s360-text-leise) !important;
  font-size: .75rem;
  font-weight: var(--s360-fett-halb);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Die Gewerksymbole sind fuer weissen Grund gezeichnet -> weisses Plaettchen
   darunter, sonst verschwinden dunkle Striche im Navy. Dieselbe Loesung wie
   das Logo-Plaettchen der Linie. */
.tk-palette .tk-pal-item svg { background: var(--s360-weiss); border-radius: var(--s360-radius-md); padding: 2px; }
.tk-pal-empty { color: var(--s360-text-leise); font-size: .9375rem; line-height: 1.5; padding: 12px 4px; }

.tk-gwbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.tk-gw {
  flex: 1 1 auto;
  min-width: 46px;
  border: 1px solid var(--s360-linie);
  background: var(--s360-flaeche);
  color: var(--s360-text-leise);
  border-radius: var(--s360-radius-md);
  padding: 6px 4px;
  font: inherit;
  font-size: .875rem;
  font-weight: var(--s360-fett-voll);
  cursor: pointer;
}
.tk-gw.on { background: var(--s360-akzent); color: var(--s360-text-auf-gold); border-color: var(--s360-akzent); }

.tk-shapebar { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-shape {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--s360-radius-md);
  background: var(--sc-feld-grund);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.tk-shape svg { width: 20px; height: 20px; }
.tk-shape:hover { border-color: var(--accent); }
.tk-shape.on { border-color: var(--accent); background: var(--accent-tint); outline: 2px solid var(--accent); }

/* Die Buehne bleibt ein neutrales Grau. ⚠️ NICHT markenfarbig machen: der
   Plan wird auf Wunsch entsaettigt, damit farbige Markierungen hervortreten —
   ein blauer oder goldener Grund darunter zerstoert genau diese Lesbarkeit. */
.tk-stage {
  flex: 1;
  min-width: 0;
  height: 74vh;
  overflow: auto;
  background: #5b6472;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.tk-canvas-wrap { position: relative; width: max-content; margin: 0 auto; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
#tk-canvas { display: block; }
.tk-overlay { position: absolute; left: 0; top: 0; }
.tk-overlay .mk-pt { cursor: pointer; }
/* Beschriftungen im Plan: weiss mit dunklem Umriss. Traegt auf jedem Plan,
   hell oder dunkel — deshalb keine Markenfarbe. */
.tk-overlay text {
  font: 600 11px var(--s360-schrift);
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 3px;
  pointer-events: none;
}

/* --- Editor-Dialoge ----------------------------------------------------- */
.tk-modal {
  position: fixed;
  inset: 0;
  background: rgba(1, 15, 44, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 16px;
}
/* „Plan"-Dialoge sind verschiebbar und lassen den Plan sichtbar — deshalb
   ohne Abdunklung, aber mit kraeftigem Schatten. */
.tk-modal.tk-modal-plan { background: transparent; }
.tk-modal.tk-modal-plan .tk-modal-card { box-shadow: 0 18px 50px rgba(1, 15, 44, .45); }
.tk-modal-plan .tk-modal-card h3 { cursor: grab; user-select: none; position: relative; padding-left: 26px; }
.tk-modal-plan .tk-modal-card h3::before {
  content: "⠿";
  position: absolute;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.125rem;
  letter-spacing: -2px;
  line-height: 1;
}
.tk-modal-plan .tk-modal-card h3:active { cursor: grabbing; }
.tk-modal-card { width: 100%; max-width: 440px; padding: 22px; max-height: 88vh; overflow: auto; }

.tk-vtx-row { display: flex; align-items: center; gap: 8px; font-size: .9375rem; margin-bottom: 5px; }
.tk-vtx-row input { width: 84px; }

.tk-sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.tk-sym-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: var(--s360-radius-md);
  background: var(--sc-feld-grund);
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.1;
}
.tk-sym-opt:hover { border-color: var(--ink); }
.tk-sym-opt.sel { outline: 2px solid var(--accent); border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.tk-sym-opt svg { width: 26px; height: 26px; }

/* --- Vollflaechen-Modus ------------------------------------------------- */
/* takeoff.js setzt .tk-fs beim OEFFNEN jedes Aufmasses — der Editor ist immer
   ein Vollflaechen-Overlay, nicht nur nach Klick auf „Vollbild". */
#tk-editor.tk-fs {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--s360-sand-100);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tk-editor.tk-fs > * { flex: 0 0 auto; }
#tk-editor.tk-fs .tk-workspace { flex: 1 1 auto; min-height: 0; align-items: stretch; }
#tk-editor.tk-fs .tk-stage { height: auto; min-height: 0; }
#tk-editor.tk-fs .tk-palette { max-height: none; }
#tk-editor:fullscreen { background: var(--s360-sand-100); padding: 10px 14px; }

/* ⚠️ NOTBREMSE, nicht toter Code. Sollte .content-panel je einen
   backdrop-filter bekommen (Glas-Optik), waere es Bezugsrahmen fuer
   position:fixed und der Editor laege im Panel statt am Fenster. Diese Zeile
   nimmt den Filter, solange der Editor offen ist. Uebernommen aus dem
   Bau-Bestand, wo genau das passiert ist. */
body.tk-editing .content-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* --------------------------------------------------------------------------
   Rechtstext-Verweise: Tippziele
   ⚠️ GEMESSENER BEFUND (13.08.2026, im Browser bei 375 px): die vier Verweise
   waren 18 px hoch, „AGB" und „AVV" je 24 px breit. Auf einem Telefon trifft
   man sie kaum, und sie stehen dicht nebeneinander — ein Fehlgriff landet auf
   dem Nachbarn.

   WCAG 2.5.8 (Stufe AA) verlangt 24 x 24 CSS-Pixel; 44 x 44 ist Stufe AAA. Mit
   `padding: 7px 6px` sind es 32 px hoch und mindestens 36 px breit — die
   AA-Anforderung ist damit deutlich erfuellt, die AAA-Groesse ausdruecklich
   nicht. Das ist eine bewusste Entscheidung und keine Auslassung: eine Zeile
   mit vier Verweisen à 44 px Hoehe wuerde die Fusszeile zum Block machen.

   ⚠️ Ueber den Attributselektor und nicht ueber eine Klasse: die Verweise
   stehen an ZWEI Stellen (Anmeldekarte und Fusszeile) und ausserdem in den vier
   Rechtstextseiten, die aus `legal-daten.js` erzeugt werden. Eine Klasse muesste
   an jeder Stelle gepflegt werden — und wer eine vergisst, merkt es nicht.
   -------------------------------------------------------------------------- */
a[href$="impressum.html"],
a[href$="datenschutz.html"],
a[href$="agb.html"],
a[href$="avv.html"] {
  display: inline-block;
  padding: 7px 6px;
  /* Der Innenabstand darf die Zeile nicht auseinanderschieben: die negative
     Aussenkante holt die zusaetzliche Breite wieder herein, die Trefferflaeche
     bleibt gross. */
  margin: -7px -6px;
}


/* =============================================================================
   TEIL D — Planablage, Symbole, Dunkelmodus  (E2b)
   ============================================================================= */

/* --- Symbole (Lucide, aus js/icons.js) ------------------------------------
   Sie erben Farbe und optische Groesse vom Text daneben. `flex:none` verhindert
   das Zusammenquetschen in engen Zeilen — ein auf 12 px gestauchtes Symbol
   neben 16-px-Text sieht aus wie ein Ladefehler. */
.sym { display: inline-block; vertical-align: -.18em; flex: none; }

/* --- Kopf einer Ansicht ---------------------------------------------------- */
.sc-kopf { display: flex; align-items: flex-start; justify-content: space-between;
           flex-wrap: wrap; gap: var(--s360-abstand-3);
           margin-bottom: var(--s360-abstand-5); }
.sc-kopf h2 { display: flex; align-items: center; gap: 10px;
              font-size: 1.625rem; color: var(--s360-text); }
.sc-kopf h2 .sym { color: var(--accent-deep); }
.sc-kopf p { font-size: var(--s360-groesse-sm); color: var(--s360-text-leise);
             margin-top: 4px; max-width: 78ch; }

/* --- Ordnerkacheln --------------------------------------------------------- */
.sc-ordner-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--s360-abstand-3);
  margin-bottom: var(--s360-abstand-5);
}
.sc-ordner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: var(--s360-flaeche-karte);
  border: 1px solid var(--s360-linie);
  border-radius: var(--r);
  color: var(--s360-text);
  font: inherit;
  font-size: var(--s360-groesse-sm);
  text-align: left;
  cursor: pointer;
}
.sc-ordner:hover { border-color: var(--s360-akzent); background: var(--s360-flaeche-tief); }
.sc-ordner.aktiv { border-color: var(--s360-akzent); border-width: 2px; padding: 13px; }
.sc-ordner .sym { color: var(--s360-akzent); }
.sc-ordner-name { flex: 1; min-width: 0; font-weight: var(--s360-fett-halb);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ordner-zahl { font-size: var(--s360-groesse-xs); color: var(--s360-text-leise);
                  font-variant-numeric: tabular-nums; }

/* --- Listenzeile (Plaene, Aufmasse) ---------------------------------------- */
.sc-liste { background: var(--s360-flaeche-karte); border: 1px solid var(--s360-linie);
            border-radius: var(--r); overflow: hidden; }
.sc-zeile {
  display: flex;
  align-items: center;
  gap: var(--s360-abstand-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--s360-linie);
}
.sc-zeile:last-child { border-bottom: none; }
.sc-zeile:hover { background: var(--s360-flaeche-tief); }
.sc-zeile > .sym { color: var(--s360-text-leise); }
.sc-zeile-haupt { flex: 1; min-width: 0; }
.sc-zeile-name { font-size: var(--s360-groesse-sm); font-weight: var(--s360-fett-halb);
                 color: var(--s360-text); overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.sc-zeile-zusatz { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
                   margin-top: 3px; font-size: var(--s360-groesse-xs);
                   color: var(--s360-text-leise); }
.sc-zeile-zusatz .sym { color: var(--s360-text-zart); }
.sc-zeile-zusatz span { display: inline-flex; align-items: center; gap: 5px; }
.sc-zeile-tat { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; }

.sc-leer { padding: 22px 16px; font-size: var(--s360-groesse-sm);
           color: var(--s360-text-leise); }

/* --- Marke am Zustand ------------------------------------------------------
   Jede Marke traegt ein Symbol UND Text. Nur Farbe waere kein zulaessiger
   Unterschied (WCAG 1.4.1) — und „grau gegen gold" ist genau der Fall, den ein
   entspiegelter Baustellenschirm einebnet. */
.sc-marke {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 99px;
  font-size: var(--s360-groesse-xs);
  font-weight: var(--s360-fett-halb);
  white-space: nowrap;
}
.sc-marke-arbeit { background: var(--s360-akzent-leise); color: var(--accent-deep); }
.sc-marke-archiv { background: var(--s360-flaeche-tief); color: var(--s360-text-leise); }
.sc-marke-final  { background: var(--s360-erfolg-grund); color: var(--s360-erfolg); }

/* --- Ablagefeld fuer Plaene ------------------------------------------------ */
.sc-ablage {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px;
  margin-bottom: var(--s360-abstand-4);
  border: 1.5px dashed var(--s360-linie-stark);
  border-radius: var(--r);
  color: var(--s360-text-leise);
  font-size: var(--s360-groesse-sm);
  cursor: pointer;
}
.sc-ablage:hover, .sc-ablage.drueber { border-color: var(--s360-akzent);
                                       background: var(--s360-akzent-leise);
                                       color: var(--s360-text); }

/* =============================================================================
   Dunkelmodus
   -----------------------------------------------------------------------------
   Umgeschaltet wird NUR die semantische Ebene der Marke (Ebene 2 in
   synergy-tokens.css). Die Markenwerte selbst — Logo-Navy #032360 und
   Akzentgold #dea51c — bleiben unangetastet; sie gehoeren der Marke, nicht dem
   Modus.

   ⚠️ DER PLAN WIRD NICHT MITGEDUNKELT. Ein Bauplan ist ein Dokument: schwarz
   auf weiss gedruckt, der Nutzer faerbt Gewerke darauf ein und gibt das
   Ergebnis seinem Auftraggeber. Ein invertierter Plan waere kein Dunkelmodus,
   sondern ein anderes Dokument — und die gewaehlten Gewerkefarben laegen
   daneben. Die Leinwand behaelt deshalb ihren hellen Grund, wie ein Leuchttisch.

   ⚠️ `color-scheme` ist nicht Kosmetik: ohne die Zeile zeichnet der Browser
   Rollbalken, Auswahllisten und Datumsfelder weiter hell — mitten in einer
   dunklen Oberflaeche. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Flaechen: nicht schwarz, sondern abgedunkeltes Navy der Linie. Reines
     Schwarz unter weisser Schrift erzeugt Halos und ermuedet schneller. */
  --s360-flaeche:        #0d1424;
  --s360-flaeche-karte:  #141d31;
  --s360-flaeche-tief:   #1b2540;
  --s360-linie:          #2a3654;
  --s360-linie-stark:    #3c4a6e;

  /* Schrift: nicht #fff auf dunkel — 21:1 flimmert. #e7ecf5 liegt bei rund
     14:1 auf dem Seitengrund und ist ruhiger. */
  --s360-text:        #e7ecf5;
  --s360-text-leise:  #a8b4cc;
  --s360-text-zart:   #7c88a3;

  /* ⚠️⚠️ `--ink` MUSS MIT. Es ist die Bruecke aus TEIL A auf das Logo-Navy und
     steht an ueber 60 Stellen als `style="color:var(--ink)"` DIREKT IM MARKUP —
     also mit Vorrang vor jeder Regel in dieser Datei. Bliebe es Navy, waeren im
     Dunkelmodus ausgerechnet die Ueberschriften und Zeilennamen unsichtbar
     (#032360 auf #0d1424 = 1,2:1), waehrend der Fliesstext daneben stimmt.
     Genau so sah der erste Lauf dieser Etappe aus. */
  --ink: var(--s360-text);

  /* Eingabefelder liegen TIEFER als die Karte, nicht gleichauf: sonst ist ein
     Feld nur noch an seinem 1-px-Rahmen zu erkennen. */
  --sc-feld-grund: #0a1120;
  --sc-gefahr: #f87171;

  /* ⚠ PRIMITIVE, DIE DER EDITOR ALS FLÄCHE BENUTZT. Eigentlich schaltet der
     Dunkelmodus nur die semantische Ebene um — aber der übernommene Editor
     greift an fünf Stellen direkt auf die Sandtöne zu (`.files-dz`,
     `.tk-plans`, `#tk-editor:fullscreen` …). Ohne diese Zeilen bleiben genau
     jene Flächen hell, während die Schrift darauf aufhellt: das Ablagefeld
     stand mit 1,98:1 da. Gefunden von `scripts/kontrast-messen.js`, nicht von
     Hand — im Editor fällt eine helle Fläche unter dem Plan sonst niemandem
     auf, weil der Plan selbst hell IST. */
  /* Die Goldwaesche ist im hellen Modus eine FLAECHE (#fdf6e3) und traegt
     dunkle Schrift. Bliebe sie hell, stuenden im Dunkelmodus die aktive
     Plankachel und der Zaehler mit 1,1:1 da — heller Text auf hellem Grund.
     Gemessen, nicht vermutet. */
  --s360-gold-100: #2b2410;

  --s360-sand-50:  #111a2c;
  --s360-sand-100: #0d1424;
  --s360-sand-200: #1b2540;
  --s360-navy-100: #1b2540;

  /* Die Leiste ist im Dunkelmodus DUNKLER als der Inhalt, nicht heller: sonst
     leuchtet ausgerechnet die Navigation am staerksten. */
  --s360-leiste-grund: #070d1a;
  --s360-leiste-text-leise: #94a3bd;
  --s360-navy-200: #cdd8e8;
  --s360-navy-300: #a8b4cc;

  /* ⚠️ GOLD KEHRT SICH UM. Im hellen Modus ist Akzentgold als Schrift verboten
     (2,2:1) und wird durch #8a640b ersetzt (5,4:1). Auf dunklem Grund ist es
     genau andersherum: #dea51c erreicht rund 8:1, waehrend #8a640b auf 2,3:1
     faellt. Bliebe der Ersatzton stehen, waere jede goldene Beschriftung im
     Dunkelmodus unlesbar — und zwar nur dort, also genau die Sorte Fehler, die
     im hellen Modus nie auffaellt. */
  --accent-deep: var(--s360-gold-500);
  --s360-akzent-leise: rgba(222, 165, 28, .16);

  --s360-erfolg: #4ade80;
  --s360-warnung: #fbbf24;
  --s360-fehler:  #f87171;
  --s360-erfolg-grund: rgba(74, 222, 128, .18);
  --s360-warnung-grund: rgba(251, 191, 36, .18);
  --s360-fehler-grund: rgba(248, 113, 113, .18);

  --s360-gesperrt-grund: #1b2540;
  --s360-gesperrt-text:  #a8b4cc;
  --s360-gesperrt-rand:  #3c4a6e;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow:    0 2px 10px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .58);
}

/* Die Anmeldekarte setzt eigene helle Farben — sie muessen mit. */
:root[data-theme="dark"] .scope-login { background: var(--s360-flaeche); }
:root[data-theme="dark"] .scope-login-karte { background: var(--s360-flaeche-karte);
                                              border-color: var(--s360-linie); }
:root[data-theme="dark"] .scope-wortmarke-dunkel { color: var(--s360-text); }
:root[data-theme="dark"] .scope-wortmarke-dunkel > span { color: var(--s360-gold-500); }

/* Der Plan bleibt hell (Begruendung oben). */
:root[data-theme="dark"] #tk-canvas-wrap,
:root[data-theme="dark"] #tk-canvas-wrap canvas { background: #ffffff; }


/* --- Gefahr und Zustimmung: zwei Klassen statt fester Farben ---------------
   ⚠ GEFUNDEN MIT `scripts/kontrast-messen.js` (E2b, 13.08.2026): der Editor
   trug `style="color:#c0392b"` an sieben Knöpfen und einen fest hellgrünen
   Hinweiskasten (`#eaf7ee` mit `#14532d`) im Dialog „Neues Aufmaß". Im hellen
   Modus stimmt beides; im Dunkelmodus fiel das Rot auf 3,1:1 und der grüne
   Kasten auf **1,07:1** — unsichtbarer Text.
   Inline-Stile gewinnen gegen jede Regel in dieser Datei, deshalb reicht eine
   Themenfarbe hier NICHT: die Stile mussten aus dem Markup heraus. */
.sc-gefahr { color: var(--sc-gefahr) !important; }
.sc-gefahr-rand { border-color: var(--sc-gefahr) !important; }

.sc-hinweis-gruen {
  background: var(--s360-erfolg-grund);
  border: 1.5px solid var(--s360-erfolg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--s360-text);
}
.sc-hinweis-gruen-kopf { font-weight: var(--s360-fett-voll); color: var(--s360-erfolg);
                         margin-bottom: 8px; }


/* Warnband des flüchtigen Modus. Stand als Inline-Stil im Markup
   (`background:#fff4e5;color:#7a4b12`) und blieb damit im Dunkelmodus hell —
   die Knöpfe darin wurden unlesbar (gemessen 1,09:1). */
.sc-band-warnung {
  background: var(--s360-warnung-grund);
  border: 1px solid var(--s360-warnung);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: var(--s360-groesse-sm);
  color: var(--s360-text);
}
/* Der Zusatz unter den beiden Wahlmöglichkeiten im Dialog „Neues Aufmaß". */
.sc-hinweis-gruen-zusatz { font-size: var(--s360-groesse-sm); color: var(--s360-text-leise); }


/* ⚠️ ZWEI FARBEN AUS takeoff.js, DIE NUR IM DUNKELMODUS FALSCH SIND.
   `updateScaleLabel()` setzt die Maßstabsanzeige per `style.color` hart auf
   #a12a2a („kein Maßstab") bzw. #1d8348 („kalibriert") — ein Inline-Stil, der
   jede Regel schlägt. Auf hellem Grund stimmen beide (5,9:1 und 4,7:1), auf
   dunklem fällt das Rot auf 2,5:1. Gemessen mit scripts/kontrast-messen.js.

   Deshalb hier `!important`, und zwar NUR im Dunkelmodus: takeoff.js bleibt
   unverändert (245 kB Kopie aus dem Bau-Bestand), und im hellen Modus behält
   die Datei ihre eigenen Werte. Fällt die Kopie später weg, fällt auch das
   hier weg — der Kommentar sagt, wonach zu suchen ist.
   ⚠️ Der Maßstab ist keine Nebensache: ein unkalibrierter Plan liefert über
   `aggregate_lv` eine PLAUSIBLE falsche Menge (nur den Höhenversatz), keine
   Null. Diese Zeile muss lesbar sein.

   ⚠️⚠️ UND DER GRUND, WARUM DER ERSTE VERSUCH NICHT GRIFF: im
   `style`-Attribut steht NICHT der Hexwert, den takeoff.js zuweist. Der
   Browser schreibt ihn als `color: rgb(161, 42, 42);` zurück — ein Selektor
   auf `[style*="a12a2a"]` trifft nie. Die Messung hat es gemeldet, das Auge
   hätte es nicht: rot bleibt rot, nur unlesbar. */
:root[data-theme="dark"] #tk-scale-lbl[style*="161, 42, 42"] { color: #f87171 !important; }
:root[data-theme="dark"] #tk-scale-lbl[style*="29, 131, 72"] { color: #4ade80 !important; }