/* ================================================================
   TEAM · Paket C „Inhalt im G0-Stil“ – Computer (app.html) · C 2026-11-05 · ?v=1 ab team.js v280
   Martin 04.11.2026: „TEAM kann auch auf Schrift und Designelemente, Grafiken, Boxen etc. wie in LandLord umgestellt werden“ –
   der Inhalt aller Seiten trägt die Werte und Bausteine der gemeinsamen Gestaltung G0 (assets/gestaltung/gemeinsam.css, --g-*),
   so wie Backoffice und LandLord schon aussehen. Der RAHMEN bleibt TEAM: Kopfleiste, Navigation links, dunkles Salbei, Figtree.
   Regeln:
   · Diese Datei führt KEINE eigenen Farb- oder Schriftwerte (Familie, Schriftgröße) – nur var(--g-…). Abstände, Gewichte und Laufweiten stehen
     wie in G0 selbst als Zahl. Fehlt ein Wert, kommt er in gemeinsam.css.
   · Eigene Ebene NACH team.css · team-design.css · team-doc.css · team-desktop-e7.css · team-redaktion.css · gemeinsam.css ·
     bruecke-team.css; abschaltbar durch Entfernen des <link> in app.html (dann gilt wieder Etappe 7).
   · Wirkt nur mit <html class="g-bruecke"> (wie die TEAM-Brücke); Bedienwege, Klickziele, Kennungen und Fachlogik unverändert.
   · Startseite bleibt ab 1200 × 700 px auf einer Bildschirmseite (T8, 12.10 in team-desktop-e7.css).
   · Leaflet, OnlyOffice-Inneres, Dokumente-Editor (team-doc.*) und der Flora-Block (mit agroserv geteilt) bleiben unberührt.
   Gliederung: 1 Werte (auch Werkzeuge und Redaktion) · 2 Schrift und Titel · 3 Rahmen der Werkzeuge · 4 Bausteine im Inhalt · 5 Start
   Feste Farben in team.css, team-design.css und team-desktop-e7.css zeigen an Ort und Stelle auf G0 (bauen/farben.py) – nicht hier.
   ================================================================ */

/* ── 1 · Werte: TEAM-Variablen zeigen auf G0 (was schon gleich ist, verbindet bruecke-team.css) ── */
:root.g-bruecke:not(.g-team-handy) {
  --bg: var(--g-grund); --ground: var(--g-grund); --surface2: var(--g-flaeche-2); --hover: var(--g-hover);
  --border: var(--g-linie); --border1: var(--g-linie); --border2: var(--g-linie-2);
  --text: var(--g-text); --text2: var(--g-text-2); --text3: var(--g-text-3);
  --accent-s: var(--g-akzent-s); --sage-l: var(--g-akzent-s);
  --danger: var(--g-alert);
  --r-karte: var(--g-r-karte); --r-feld: var(--g-r-feld); --e7-blatt-r: var(--g-r-blatt);
  --e7-ocker: var(--g-warn); --e7-ocker-s: var(--g-warn-s);
  --e7-ziegel: var(--g-alert); --e7-ziegel-s: var(--g-alert-s);
  --e7-himmel: var(--g-info); --e7-himmel-s: var(--g-info-s);
  --e7-sh-1: none;                                   /* Karten wie Backoffice: Rand statt Schatten */
  /* Schrift im Inhalt: Systemschrift, Titel ebenfalls (G0 --g-schrift-ueberschrift am Computer) */
  --e7-sans: var(--g-schrift);
  --e7-serif: var(--g-schrift-ueberschrift);
}
/* Werkzeuge (Backoffice, Personal, LandLord) und ihre Fenster: die letzten Abweichungen von G0 */
:root.g-bruecke :is(#app-shell, .bo-modal-bg, .mini-date-ov, .bow-pin-modal, #bo-firma-menu, #hrWorkModal, .hr-emp-overlay, .pk-measure-box, .emp-loesch) {
  --text3: var(--g-text-3); --bar: var(--g-rahmen); --ground: var(--g-grund);
}
/* Redaktion: Warnung mit G0-Kontrast */
:root.g-bruecke :is(#red-shell, #red-dr, .r2-frage-ov, .r2-menue) { --r2-warn: var(--g-warn); }

/* ── 2 · Schrift: Inhalt Systemschrift 13 px (G0), Rahmen Figtree ── */
:root.g-bruecke body { font-family: var(--g-schrift); }
/* Rahmen: Kopfleiste, Navigation, Anmeldung, Dokumente-Menü der Kopfleiste behalten Figtree und Source Serif */
:root.g-bruecke :is(.topbar, .bar, .login-overlay) {
  --e7-sans: var(--g-schrift-rahmen); --e7-serif: var(--g-schrift-titel); font-family: var(--g-schrift-rahmen);
}
/* Seitentitel (bisher Buchschrift 22–28 px) → G0-Seitentitel 20 px */
:root.g-bruecke :is(#v-projekte .pj-title, #v-chat .ch-kopf h2, #v-kalender .cal-title, #v-mail #mail-ltitle, #v-notizen .notes-list-title,
  .fx-kopf .finder-toolbar-title, #v-einstellungen .set-kopf-text h1, .fl-welcome-name) {
  font-family: var(--g-schrift-ueberschrift); font-size: var(--g-gr-titel); font-weight: 650; letter-spacing: -.01em;
}
:root.g-bruecke :is(#v-kalender .cal-mini-head > span, #v-chat .ch-leer-titel, #v-notizen .notes-leer-titel, #v-einstellungen .set-pane > h2) {
  font-family: var(--g-schrift-ueberschrift); font-weight: 650; letter-spacing: -.01em;
}

/* weitere Titel der Etappe 7 (Projekte-Übersicht, Notizen, Chat-Kopf) → G0-Größen; Notiz-Blatt (Editor) bleibt Dokument in Source Serif */
:root.g-bruecke :is(.e7-pk-kopf h1, .nz-h1, .nz-ordner-kopf h2) { font-size: var(--g-gr-titel); font-weight: 650; letter-spacing: -.01em; }
:root.g-bruecke :is(.e7-pk-koerper h3, .e7-pk-neu b, .nz-leer h3, .nz-frage h3, #v-chat .ch-kopf-text b) { font-size: var(--g-gr-fenster); font-weight: 650; }
:root.g-bruecke :is(.e7-pk-archiv h3, #v-projekte .pj-side-card .e7-sk-kopf h4, #v-projekte .e7-ueber-karte h4) { font-size: var(--g-gr-betont); font-weight: 650; }
:root.g-bruecke :is(.nz-pm, #v-notizen .nz-titel) { --e7-serif: var(--g-schrift-titel); }

/* ── 3 · Rahmen der Werkzeuge: Leiste wie die TEAM-Kopfleiste (dunkles Salbei mit Feld-Zeichnung) ── */
:root.g-bruecke #app-shell :is(.tool-back-bar, #lm-topbar) {
  background: var(--g-rahmen-verlauf), url('/assets/gestaltung/leiste_feld.webp') center / cover no-repeat var(--g-rahmen);
  background-blend-mode: normal, luminosity; color: var(--g-rahmen-text);
}
:root.g-bruecke #app-shell :is(.tool-back-bar, #lm-topbar) { font-family: var(--g-schrift-rahmen); }

/* ── 4 · Bausteine im Inhalt (TEAM-Klassen tragen G0-Werte; Selektoren mit gleicher Spezifität wie in team-design/e7) ── */
/* Karten: weiß, Rand, 12 px, ohne Schatten */
:root.g-bruecke :is(.nd-karte, .nd-kpi, .nd .dash-tool, #v-projekte .pj-post, #v-projekte .pj-side-card) {
  background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); box-shadow: none;
}
/* Kartenkopf: Titel 14,5 px fett (G0 g-karte-titel), Link rechts als Textlink */
:root.g-bruecke .nd-kh h3 { font-size: var(--g-gr-betont); font-weight: 650; letter-spacing: 0; }
:root.g-bruecke .nd-mehr { padding: 3px 0; border-radius: 0; font-size: var(--g-gr-neben); font-weight: 600; color: var(--g-akzent-d); background: none; }
:root.g-bruecke .nd-kh:hover .nd-mehr { background: none; text-decoration: underline; }
:root.g-bruecke .e7-kh-meta { font-size: var(--g-gr-klein); color: var(--g-text-3); }
/* Abschnitt-Überschrift („Bereiche“) als Versal-Beschriftung (G0 g-abschnitt-titel) */
:root.g-bruecke #home-shell .nd-ueber h2 { font-family: var(--g-schrift); font-size: var(--g-gr-versal); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--g-text-3); }
/* Zähler-Chips (Bereiche, Projekte) wie G0 g-chip */
:root.g-bruecke .nd .dash-kpi {
  height: 22px; padding: 0 9px; border: 0; border-radius: var(--g-r-voll); background: var(--g-hover); color: var(--g-text-2);
  font-size: var(--g-gr-versal); font-weight: 650; line-height: 1;
}
:root.g-bruecke .nd .dash-kpi b { font-weight: 700; color: var(--g-text); }
:root.g-bruecke .nd .dash-kpi.warn { background: var(--g-warn-s); color: var(--g-warn); border: 0; }
:root.g-bruecke .nd .dash-kpi.warn b { color: var(--g-warn); }
:root.g-bruecke .nd .dash-kpi .led.g { background: var(--g-ok-f); }
:root.g-bruecke .nd .dash-kpi .led.a { background: var(--g-warn-f); }

/* ── 5 · Start: Seitenkopf wie G0 (weiß, Gruß als Seitentitel), Wetter als Karte, Kennzahlen als Kacheln (g-kpi) ── */
:root.g-bruecke #home-shell .nd-hero {
  background: var(--g-flaeche); color: var(--g-text); border-bottom: 1px solid var(--g-linie); border-radius: 0;
  align-items: center; padding: 14px max(var(--g-rand), calc((100% - 1720px) / 2)) 14px;
}
:root.g-bruecke #home-shell .nd-hero-datum { font-size: var(--g-gr-klein); font-weight: 600; letter-spacing: .06em; color: var(--g-text-3); text-shadow: none; }
:root.g-bruecke #home-shell .nd-hero-datum b { color: var(--g-text-2); }
:root.g-bruecke #home-shell .nd-hero-gruss {
  margin: 3px 0 2px; font-family: var(--g-schrift-ueberschrift); font-size: var(--g-gr-held); font-weight: 650; letter-spacing: -.01em; line-height: 1.2;
  color: var(--g-text); text-shadow: none;
}
:root.g-bruecke #home-shell .nd-hero-tag { font-family: var(--g-schrift); font-size: var(--g-gr-text); color: var(--g-text-2); text-shadow: none; }
:root.g-bruecke #home-shell .nd-hero-tag b { color: var(--g-text); font-weight: 650; }
:root.g-bruecke #home-shell .nd-hero-aktionen { margin-top: 12px; gap: 8px; }
/* Schnellaktionen als G0-Knöpfe (g-knopf, erste = g-primaer) */
:root.g-bruecke #home-shell .nd-hero .dash-btn {
  height: var(--g-feld-h); padding: 0 14px; gap: 6px; border: 1px solid var(--g-linie-2); border-radius: var(--g-r-feld);
  background: var(--g-flaeche); color: var(--g-text); font-size: var(--g-gr-basis); font-weight: 500;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
:root.g-bruecke #home-shell .nd-hero .dash-btn:hover { background: var(--g-flaeche); border-color: var(--g-text-3); }
:root.g-bruecke #home-shell .nd-hero .dash-btn.primary { background: var(--g-akzent); border-color: var(--g-akzent); color: var(--g-text-inv); font-weight: 600; }
:root.g-bruecke #home-shell .nd-hero .dash-btn.primary:hover { background: var(--g-akzent-d); border-color: var(--g-akzent-d); }
:root.g-bruecke #home-shell .nd-hero .dash-btn svg { width: 15px; height: 15px; }
/* Wetter als weiße Karte im Seitenkopf */
:root.g-bruecke #home-shell .nd-wetter {
  align-self: center; background: var(--g-flaeche-2); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); color: var(--g-text);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
:root.g-bruecke #home-shell .nd-w-kopf { color: var(--g-text-3); }
:root.g-bruecke #home-shell .nd-w-cog { background: var(--g-hover); color: var(--g-text-2); }
:root.g-bruecke #home-shell .nd-w-cog:hover { background: var(--g-linie); }
:root.g-bruecke #home-shell .nd-w-klein { color: var(--g-text-2); }
:root.g-bruecke #home-shell .nd-w-icon { color: var(--g-akzent-d); }
:root.g-bruecke #home-shell .nd-w-stunden > div { background: var(--g-flaeche); border: 1px solid var(--g-linie); color: var(--g-text-2); }
:root.g-bruecke #home-shell .nd-w-stunden .wi { color: var(--g-akzent-d); }
:root.g-bruecke #home-shell .nd-w-stunden b { color: var(--g-text); }
:root.g-bruecke #home-shell .nd-w-hinweis.ok { background: var(--g-ok-s); color: var(--g-ok); }
:root.g-bruecke #home-shell .nd-w-hinweis.warn { background: var(--g-warn-s); color: var(--g-warn); }
:root.g-bruecke #home-shell .nd-w-hinweis.neutral { background: var(--g-hover); color: var(--g-text-2); }
:root.g-bruecke #home-shell .nd-w-leer { color: var(--g-text-2); }
:root.g-bruecke #home-shell .nd-w-leer b { color: var(--g-text); }
/* das Blatt liegt nicht mehr über dem Titelbild: Grund wie Backoffice */
:root.g-bruecke #home-shell .e7-bogen { margin-top: 0; border-radius: 0; background: var(--g-grund); }
/* Kennzahlen: einzelne Kacheln (G0 g-kpi: Symbolfeld, Zahl, Versal-Beschriftung) */
:root.g-bruecke #home-shell .nd-kpis { gap: 12px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
:root.g-bruecke #home-shell .nd-kpi { gap: 12px; padding: 10px 14px; background: var(--g-flaeche); border: 1px solid var(--g-linie); border-radius: var(--g-r-karte); }
:root.g-bruecke #home-shell .nd-kpi + .nd-kpi { border-left: 1px solid var(--g-linie); }
:root.g-bruecke #home-shell .nd-kpi-ic { width: 34px; height: 34px; border-radius: 10px; }
:root.g-bruecke #home-shell .nd-kpi-ic svg { width: 17px; height: 17px; }
:root.g-bruecke #home-shell .nd-kpi-ic.warn { background: var(--g-warn-s); color: var(--g-warn); }
:root.g-bruecke #home-shell .nd-kpi-ic.rot { background: var(--g-alert-s); color: var(--g-alert); }
:root.g-bruecke #home-shell .nd-kpi-t b { font-size: var(--g-gr-zahl); font-weight: 700; line-height: 1.15; color: var(--g-text); }
:root.g-bruecke #home-shell .nd-kpi-t small { margin-top: 1px; font-size: var(--g-gr-versal); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-text-3); }
@media (hover: hover) {
  :root.g-bruecke #home-shell .nd-kpi:hover { background: var(--g-flaeche-2); border-color: var(--g-linie-2); }
  :root.g-bruecke #home-shell .nd-kpi + .nd-kpi:hover { border-left-color: var(--g-linie-2); }
}
/* Karten der Startseite: Kopf über die volle Breite mit Trennlinie (G0 g-karte-kopf) */
:root.g-bruecke #home-shell .nd-kh { margin: 0 -14px; padding: 11px 14px 10px; border-bottom: 1px solid var(--g-linie); }
:root.g-bruecke #home-shell .nd-karte { padding: 0 14px 14px; }
:root.g-bruecke #home-shell :is(.e7-zeilen, .e7-woche, .dash-notes-list) { margin-top: 0; }
:root.g-bruecke #home-shell .e7-woche { border-top: 0; }
@media (min-width: 1200px) {
  :root.g-bruecke #home-shell .nd-hero { padding-top: 12px; padding-bottom: 12px; }
  :root.g-bruecke #home-shell .nd-hero-gruss { font-size: var(--g-gr-held); margin: 2px 0 1px; }
  :root.g-bruecke #home-shell .nd-hero-tag { font-size: var(--g-gr-basis); }
  :root.g-bruecke #home-shell .nd-hero-aktionen { margin-top: 10px; }
  :root.g-bruecke #home-shell .nd-hero .dash-btn { height: var(--g-feld-h); padding: 0 13px; font-size: var(--g-gr-basis); }
  :root.g-bruecke #home-shell .e7-bogen { padding-top: 14px; }
  :root.g-bruecke #home-shell .nd-kpi { padding: 8px 14px; }
  :root.g-bruecke #home-shell .nd-kpi-t b { font-size: var(--g-gr-fenster); }
  :root.g-bruecke #home-shell .t8-zeile > .nd-karte { padding: 0 12px 10px; }
  :root.g-bruecke #home-shell .t8-zeile .nd-kh { margin: 0 -12px; padding: 9px 14px 8px; }
  :root.g-bruecke #home-shell .t8-zeile .nd-kh h3 { font-size: var(--g-gr-betont); }
  :root.g-bruecke #home-shell .t8-zeile .nd-mehr { font-size: var(--g-gr-klein); }
  :root.g-bruecke #home-shell .nd-ueber h2 { font-size: var(--g-gr-versal); }
  :root.g-bruecke #home-shell .nd .dash-tool h3 { font-size: var(--g-gr-betont); }
}
/* Bereiche: Kachel wie G0-Karte */
:root.g-bruecke #home-shell .nd .dash-tool h3 { font-family: var(--g-schrift-ueberschrift); font-size: var(--g-gr-betont); font-weight: 650; letter-spacing: 0; }
:root.g-bruecke #home-shell .nd .dash-tool:hover { border-color: var(--g-linie-2); box-shadow: none; transform: none; }
/* niedrige Fenster (1366 × 768, 1280 × 720): Seitenkopf und Kennzahlen flacher, Kartenzeilen dürfen niedriger werden –
   so überdeckt die Zeile „Bereiche“ die Karten nicht mehr (war schon in T8 bei 768 px so) und nichts rollt */
@media (min-width: 1200px) and (max-height: 820px) {
  :root.g-bruecke #home-shell .nd-hero { padding-top: 8px; padding-bottom: 8px; }
  :root.g-bruecke #home-shell .nd-hero-datum { font-size: var(--g-gr-versal); }
  :root.g-bruecke #home-shell .nd-hero-gruss { margin: 1px 0 0; }
  :root.g-bruecke #home-shell .nd-hero-aktionen { margin-top: 7px; }
  :root.g-bruecke #home-shell .nd-hero .dash-btn { height: var(--g-knopf-klein-h); padding: 0 10px; border-radius: var(--g-r-klein); font-size: var(--g-gr-neben); }
  :root.g-bruecke #home-shell .nd-wetter { padding: 7px 11px 8px; }
  :root.g-bruecke #home-shell .e7-bogen { padding-top: 10px; padding-bottom: 10px; }
  :root.g-bruecke #home-shell .nd-kpis { margin-bottom: 10px; }
  :root.g-bruecke #home-shell .nd-kpi { padding: 5px 12px; }
  :root.g-bruecke #home-shell .nd-kpi-ic { width: 30px; height: 30px; }
  :root.g-bruecke #home-shell .t8-zeile { min-height: 150px; }
  :root.g-bruecke #home-shell .nd-ueber { margin-top: 10px; margin-bottom: 6px; }
}