/* ================================================================
TEAM · Etappe 7 „Feld und Papier am Computer“ – STUFE A „Aussehen“ (2026-10-17 (Etappe 7 A))
+ STUFE B „neue Inhalte“ (Abschnitt 12, 2026-10-17 (Etappe 7 B)) – ?v=2 ab team.js v263
+ PAKET C „Projekte anordnen“ (Abschnitt 13, 2026-10-19 (Paket C)) – ?v=3 ab team.js v264
+ PAKET D2 „Notizen neu“ (Abschnitt 14, 2026-10-21 (Paket D2)) – ?v=4 ab team.js v266
+ PAKET E „Rechtsklick-Menü“ (Abschnitt 15, 2026-10-21 (Paket E)) – gleiche ?v=4 (D2–E werden zusammen eingespielt)
Freigabe Martin 17.10.2026 (ENTSCHEIDUNGEN.md): Leiste und Navigation dunkel, Leinen, Keimling, „Flora fragen“ oben,
Ecken 18 px, Titelbild gezeichnetes Feld. Inhalte und Anordnung bleiben wie heute (Bild 08 „nach Stufe A“).
Eigene Ebene NACH team.css / team-design.css / team-doc.css – abschaltbar durch Entfernen des in app.html.
Werte = Handy-Etappe 6 (team-mobile-e6.css v1, live seit 17.10.).
Regeln:
· gleiche oder höhere Spezifität als team-design.css (dort hängt fast alles an IDs wie #v-projekte …)
· kein transform/filter/contain auf .body/.view/#home-shell – sonst sperren sie fixierte Kinder ein
(OnlyOffice-Vollbild #v-dokument.doc-fs, Dialoge)
· Backoffice und Personal (#app-shell und ihre Fenster) behalten die Systemschrift – Tabellen stehen auf Pixel genau
· Flora-Block (mit agroserv geteilt) nur von außen übersteuern, nie umbauen
· Leaflet, OnlyOffice-Inneres und Dokumente-Editor (team-doc.*) bleiben unberührt; kein Dunkelmodus (Stufe C)
Korrektur nach der Prüfung (2026-10-17 (Etappe 7 A)): Werkzeuge behalten Werte und Flora-Pille wie v261, Kurzmeldungen wieder
über der Chat-Eingabe, Start-Zähler (Ocker, Figtree), Projektnamen ganz lesbar, Hinweis-Blase mehrzeilig, Tastatur-Rahmen
an Aufgaben-Karten und im Suchfeld.
Gliederung: 1 Werte · 2 Schrift · 3 Rahmen · 4 Flora · 5 Start · 6 Projekte · 7 Chat · 8 Kalender · 9 übrige Bereiche ·
10 Maus und Tastatur (Bild 10) · 11 schmale Fenster · 12 Stufe B (Start, Projekte, Felder) ·
13 Paket C (Projekte anordnen: Sortierung, Ziehen, Anheften) · 14 Paket D2 (Notizen neu) ·
15 Paket E (Rechtsklick-Menü: gemeinsames Kontextmenü)
================================================================ */
/* ── 1 · Werte ───────────────────────────────────────────────────── */
:root {
--bg: #f4f1ea; /* Leinen statt kühlem Grau #f5f5f3 */
--surface2: #f9f7f2; /* Seitenleisten, Eingaben, Anhänge */
--hover: #efebe2;
--ground: #f4f1ea;
--border: #e6e2d9; --border1: #e6e2d9; --border2: #d5d0c4;
--text: #1f1e1c; /* 14,8 : 1 auf Leinen */
--text2: #5c5a54; /* 6,1 : 1 */
--text3: #6b6861; /* 4,9 : 1 statt #a0a099 (2,4 : 1) – auch die 40 Stellen in team.js folgen */
--accent-s: #e5eee7; --sage-l: #e5eee7;
--bar: #263a30; /* Rahmen dunkles Salbei statt #6b8470 (Weiß 12,1 : 1) – Zähler-Ringe; Werkzeuge siehe unten */
--r-karte: 18px; /* Frage 6: Karten 18 px … */
--r-feld: 11px; /* … Knöpfe und Felder 11 px */
--e7-blatt-r: 18px; /* Ecke des Leinen-Blatts im Rahmen */
--e7-sage-d: #3a5c4a;
--e7-kopf-hell: #9cc5ad; /* aktive Markierung im dunklen Rahmen */
--e7-ocker: #85590c; --e7-ocker-s: #f8eed8;
--e7-ziegel: #a03a27; --e7-ziegel-s: #f7e6e0;
--e7-himmel: #33639f; --e7-himmel-s: #e8effa;
--e7-badge: #e0a12b; --e7-badge-ink: #2b1e05;
--e7-fokus: #3a5c4a; /* Tastatur-Rahmen auf hellem Grund */
--e7-fokus-hell: #cfe6d8; /* Tastatur-Rahmen im dunklen Rahmen */
--e7-sh-1: 0 1px 2px rgba(38, 36, 30, .05);
--e7-sh-2: 0 8px 22px rgba(38, 36, 30, .08), 0 1px 3px rgba(38, 36, 30, .05);
--e7-serif: 'Source Serif 4', Georgia, serif;
--e7-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--e7-system: -apple-system, 'Segoe UI', BlinkMacSystemFont, sans-serif;
}
/* Werkzeuge (Backoffice, Personal, LandManager, AgroServ – #app-shell) und ihre Fenster behalten die Werte von v261:
„Nicht ändern: Backoffice, Personal“ (ENTSCHEIDUNGEN.md). Die neuen Werte oben gelten nur für TEAM.
Dieselbe Liste wie bei der Systemschrift (Abschnitt 2). 2026-10-17 (Etappe 7 A, Korrektur nach Prüfung) */
#app-shell, .bo-modal-bg, .mini-date-ov, .bow-pin-modal, #bo-firma-menu, #hrWorkModal, .hr-emp-overlay, .pk-measure-box, .emp-loesch {
--bg: #f5f5f3; --surface2: #faf9f7; --hover: #f0f0ed; --ground: #f2f5f1;
--border: #eaeae7; --border1: #eaeae7; --border2: #d8d8d4;
--text: #181816; --text2: #64645e; --text3: #a0a099;
--accent-s: #e8f2ec; --sage-l: #e8f2ec;
--bar: #6b8470; --r-karte: 12px; --r-feld: 9px;
}
/* Die Schriftfarbe erben sie vom body (dort gilt schon das neue --text) – daher hier der bisherige Wert, ohne Spezifität (:where),
damit eigene Farben der Werkzeuge (z. B. Messfeld der Pachtkarte) gewinnen */
:where(#app-shell, .bo-modal-bg, .mini-date-ov, .bow-pin-modal, #bo-firma-menu, #hrWorkModal, .hr-emp-overlay, .pk-measure-box, .emp-loesch) { color: var(--text); }
/* ── 2 · Schrift: Figtree für Text, Source Serif 4 für Titel (beide selbst gehostet, @font-face in team-doc.css) ── */
body, body.is-login .login-overlay { font-family: var(--e7-sans); }
.topbar :is(button, input), .bar button, #home-shell :is(button, input, select, textarea),
.view :is(button, input, select, textarea), #userMenu button, .notif-panel button, .set-modal-bg:not(#hrWorkModal) :is(button, input, select, textarea) { font-family: inherit; }
/* Backoffice und Personal: Systemschrift bleibt (feste Spaltenbreiten in px) – Rahmen, Fenster, Datumswahl, Betriebsmenü.
Nur die Behälter: Knöpfe/Felder darin erben wie bisher (font-family: inherit aus team.css) oder behalten die Browser-Schrift
(Korrektur nach Prüfung: so ist jedes Element wie in v261) */
#app-shell, .app-shell, .bo-modal-bg, .mini-date-ov, .bow-pin-modal, #bo-firma-menu, #hrWorkModal, .hr-emp-overlay, .pk-measure-box, .emp-loesch { font-family: var(--e7-system); }
/* Titel in der Buchschrift (wie am Handy: Gruß, Seitentitel, Projektnamen, Abschnitte, Monatstitel, Leer-Titel) */
.nd-hero-gruss, .nd-kh h3, .nd-ueber h2, .nd .dash-tool h3,
#v-projekte .pj-title, #v-chat .ch-kopf h2, #v-chat .ch-leer-titel,
#v-kalender .cal-title, #v-kalender .cal-mini-head > span,
#v-mail #mail-ltitle, #v-notizen .notes-list-title, #v-notizen .notes-leer-titel,
.fx-kopf .finder-toolbar-title, #v-einstellungen .set-kopf-text h1, #v-einstellungen .set-pane > h2, .fl-welcome-name, .login-title {
font-family: var(--e7-serif); font-weight: 600; letter-spacing: -.012em;
}
/* ── 3 · Rahmen: obere Leiste mit leiser Feld-Zeichnung, Navigation dunkel, Leinen-Blatt mit runder Ecke ── */
.topbar {
background: linear-gradient(90deg, rgba(38, 58, 48, .97) 0%, rgba(38, 58, 48, .9) 30%, rgba(38, 58, 48, .72) 64%, rgba(38, 58, 48, .58) 100%),
url('/assets/img/leiste_feld.webp') center / cover no-repeat var(--bar);
background-blend-mode: normal, luminosity;
}
.body { background: var(--bar); }
.bar { background: var(--bar); }
/* das Blatt: Start und jede Ansicht; das OnlyOffice-Vollbild (.doc-fs) bleibt eckig */
#home-shell, .body > .view:not(.doc-fs) { border-top-left-radius: var(--e7-blatt-r); }
.t-logo { color: #f3ecda; }
.t-tool, .bo-main-btn { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .12) !important; font-weight: 550 !important; }
.t-tool:hover, .bo-main-btn:hover { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .2) !important; }
.t-tool.on, .bo-main-btn.on { background: rgba(255, 255, 255, .22) !important; border-color: rgba(255, 255, 255, .26) !important; }
.t-search { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }
.t-search::placeholder { color: rgba(255, 255, 255, .78); }
.t-icon { color: #fff; }
.t-av { background: #4e7a64; border: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .26); color: #fff; font-weight: 650; }
.t-av:hover { background: #5b8a72; }
.bicon { position: relative; color: rgba(255, 255, 255, .8); }
.bicon .lbl { font-weight: 550; }
.bicon:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.bicon.on { background: rgba(255, 255, 255, .13); color: #fff; }
.bicon.on::after {
content: ''; position: absolute; left: -6px; top: 15px; bottom: 15px; width: 3px; border-radius: 0 3px 3px 0; background: var(--e7-kopf-hell);
}
.bar-sep { background: rgba(255, 255, 255, .14); }
/* Zähler: dunkle Ziffer auf Bernstein (7,2 : 1 statt 2,3 : 1 mit weißer Ziffer) */
.nbadge, .bicon .bb { background: var(--e7-badge) !important; color: var(--e7-badge-ink) !important; font-weight: 700; }
.nbadge { border-color: var(--bar); }
.bicon .bb { box-shadow: 0 0 0 2px var(--bar); }
/* ── 4 · Flora ── */
/* In der Navigation als Keimling (app.html: statt flora.png) – wie die Tab-Leiste am Handy */
.flora-pill { width: 64px; padding: 4px 0 6px; background: none; }
.flora-pill:hover { background: rgba(255, 255, 255, .08); }
.flora-pill.on { background: rgba(255, 255, 255, .13); }
.flora-keim {
width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff;
background: radial-gradient(120% 120% at 30% 20%, #2f7a4a 0%, #1e5631 55%, #164326 100%);
box-shadow: 0 0 0 2px rgba(156, 197, 173, .42), 0 6px 14px rgba(0, 0, 0, .22);
}
.flora-keim svg { width: 23px; height: 23px; display: block; }
.flora-pill-lbl { color: #cfe6d8; font-weight: 650; }
.flora-pill-pulse { top: 4px; right: 10px; box-shadow: 0 0 0 2px var(--bar); }
/* „Flora fragen“ oben in der Leiste statt der schwebenden Pille rechts unten (öffnet dasselbe Flora-Fenster).
Erscheint erst, wenn der Flora-Block die Anmeldung bestätigt hat (team.js setzt dann body.e7-flora-da) – wie die Pille. */
.t-flora {
display: none; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 4px; margin: 0 4px 0 2px; border-radius: 999px; cursor: pointer;
background: rgba(255, 255, 255, .1); border: 1px solid rgba(156, 197, 173, .38); color: #fff; font: 650 13px/1 var(--e7-sans); white-space: nowrap;
}
body.e7-flora-da .t-flora { display: inline-flex; }
.t-flora:hover { background: rgba(255, 255, 255, .18); border-color: rgba(156, 197, 173, .6); }
.t-flora .flora-keim { width: 26px; height: 26px; box-shadow: none; }
.t-flora .flora-keim svg { width: 16px; height: 16px; }
/* Die Pille des Flora-Blocks entfällt in TEAM (der Block setzt display per style-Attribut → !important nötig).
In den Werkzeugen (body.tool-mode: Backoffice, Personal, LandManager, AgroServ – dort ist die obere Leiste mit „Flora fragen“
ausgeblendet) bleibt die Pille wie bisher der Flora-Einstieg. Flora-Fenster, Sprachfenster und angedockte Leiste bleiben unverändert. */
body:not(.tool-mode) #fa-fab { display: none !important; }
/* Platz, der bisher für die Pille frei blieb (rechts unten), in der Chat-Eingabe wieder nutzen.
Kurzmeldungen bleiben, wo sie in v261 standen (84 px über dem Rand, team-design.css) – sonst lägen sie über Eingabe und Senden. */
#v-chat #teamPane .input-area { margin-right: max(20px, calc((100% - 760px) / 2)); }
#v-chat .chi-scroll { padding-bottom: 20px; }
/* ── 5 · Start ── */
/* Titelbild: gezeichnetes Feld in der Machart des Handys (Frage 7) statt Luftbild; Verlauf links dunkel für den Gruß */
.nd-hero {
background: linear-gradient(90deg, rgba(16, 30, 21, .86) 0%, rgba(16, 30, 21, .64) 38%, rgba(16, 30, 21, .22) 70%, rgba(16, 30, 21, .1) 100%),
url('/assets/img/titel_feld.webp') center 40% / cover no-repeat #3d5a40;
border-radius: var(--r-karte);
}
.nd-hero-gruss { font-size: clamp(32px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.015em; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.nd-hero-datum, .nd-hero-tag { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.nd-hero .dash-btn { border-radius: var(--r-feld); }
.nd-wetter { border-radius: var(--r-karte); }
.nd-w-grad { font-weight: 400; }
.nd-w-icon svg { width: 40px; height: 40px; }
.nd-kh > svg { display: none; } /* Abschnitt-Symbol weg: der Titel trägt jetzt die Buchschrift */
.nd-kh h3 { font-size: 18.5px; }
.nd-ueber h2 { font-size: 17px; color: var(--text); }
.nd .dash-tool h3 { font-size: 16.5px; }
/* Zähler-Chips der Karten „Projekte“ und „Bereiche“: Ziffer in Figtree statt der runden Systemschrift (ui-rounded), Warnung in Ocker
(#85590c auf #f8eed8, 5,3 : 1 statt 2,9 : 1 im alten Orange) */
.dash-kpi b { font-family: inherit; font-variant-numeric: tabular-nums; }
.nd .dash-kpi.warn { color: var(--e7-ocker); background: var(--e7-ocker-s); border-color: #ecd9b0; }
.nd .dash-kpi .led.a { background: var(--e7-ocker); }
/* Wetter auf dem Titelbild: Stundenziffern und Hinweis etwas kräftiger (über hellen Bildstellen sonst knapp unter 4,5 : 1) */
.nd-w-stunden > div { color: rgba(255, 255, 255, .92); }
.nd-w-hinweis.ok { background: rgba(14, 44, 26, .5); }
.nd-karte, .nd-kpi, .nd .dash-tool { border-radius: var(--r-karte); box-shadow: var(--e7-sh-1); }
.nd .dash-file, .nd .dash-note { border-radius: 12px; }
/* Ocker nur für Zustände, nicht als Schmuck (Belege-Kachel, Notiz-Symbol) */
.nd-kpi-ic.warn { background: var(--accent-s); color: var(--e7-sage-d); }
.nd-kpi-ic.blau { background: #ebe7dd; color: var(--text2); }
.nd-kpi-ic.ok { background: var(--accent-s); color: var(--e7-sage-d); }
.nd .dash-day.today { background: var(--e7-sage-d); }
.dash-note .nic { background: #ebe7dd; color: var(--text2); }
/* Dateityp-Kennzeichen (9 px) und Kürzel-Kreise mit weißer Schrift: dieselben Töne, nur so dunkel, dass sie ≥ 4,5 : 1 erreichen */
.dash-ext.pdf { color: var(--e7-ziegel); }
.dash-ext.doc { color: #2b5797; }
.dash-ext.xls { color: var(--e7-sage-d); }
.dash-ext.img { color: var(--e7-ocker); }
:is(.dash-ava, .mail-ava).g1 { background: #856b94; } :is(.dash-ava, .mail-ava).g2 { background: #597892; }
:is(.dash-ava, .mail-ava).g3 { background: #8e6f4c; } :is(.dash-ava, .mail-ava).g4 { background: #637b57; }
:is(.dash-ava, .mail-ava).g5 { background: #9c6666; } :is(.dash-ava, .mail-ava).g6 { background: #557c73; }
/* ── 6 · Projekte (Liste links bleibt die heutige Liste mit Namen) ── */
#v-projekte .pj-title { font-size: 26px; }
#v-projekte .pj-color-dot { border-radius: 11px; }
/* Reiter mit Unterstrich statt Pillen; Zahlen auch an Aufgaben und Meilensteine (team.js v262) */
#v-projekte .pj-tabs { gap: 24px; padding: 0 28px; }
#v-projekte .pj-tab {
position: relative; height: 44px; padding: 0; gap: 6px; border-radius: 0; background: none;
font-size: 14.5px; font-weight: 600; color: var(--text3);
}
#v-projekte .pj-tab:hover { background: none; color: var(--text); }
#v-projekte .pj-tab.on { background: none; color: var(--text); }
#v-projekte .pj-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: #4e7a64; }
#v-projekte .pj-tab > svg { display: none; }
#v-projekte .pj-tab-count { min-width: 0; height: auto; padding: 0; background: none; font-size: 12px; font-weight: 650; color: var(--text3); }
#v-projekte .pj-tab.on .pj-tab-count { background: none; color: var(--e7-sage-d); }
#v-projekte .pj-tab-sep { margin: 0 -8px; }
#v-projekte .pj-tab-add { height: 32px; padding: 0 11px 0 9px; border-radius: var(--r-feld); }
#v-projekte .pj-tab-add svg { display: block; }
/* × zum Entfernen eines Reiters erst beim Darüberfahren oder mit der Tastatur; nimmt keinen Platz in der Zeile ein */
#v-projekte .pj-tab-close { position: absolute; top: 50%; right: -19px; margin: -9px 0 0; opacity: 0; pointer-events: none; transition: opacity .12s; }
#v-projekte .pj-tab:hover .pj-tab-close, #v-projekte .pj-tab:focus-within .pj-tab-close, #v-projekte .pj-tab:focus-visible .pj-tab-close { opacity: 1; pointer-events: auto; }
#v-projekte .pj-post { border-radius: var(--r-karte); box-shadow: var(--e7-sh-1); }
#v-projekte .pj-post.pinned { box-shadow: var(--e7-sh-1); }
#v-projekte .pj-pin-badge { background: var(--e7-ocker-s); color: var(--e7-ocker); }
#v-projekte .pj-post-body a { color: #1f5fbf; text-decoration-color: rgba(31, 95, 191, .38); text-underline-offset: 2.5px; }
#v-projekte .pj-side-card { border-radius: var(--r-karte); }
/* Liste links: Name immer ganz (bricht notfalls in eine zweite Zeile um), Phase klein darunter – nichts abgeschnitten, nie Kacheln
ohne Namen (Martin 17.10.: „die Bilder alleine als Seitenleiste reichen nicht“). Pfeil, Farbpunkt, Einrückung, Klick unverändert. */
#v-projekte .pj-item {
display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center;
min-height: 36px; padding-top: 6px; padding-bottom: 6px;
}
#v-projekte .pj-item > .pj-caret, #v-projekte .pj-item > .pj-dot, #v-projekte .pj-item > .pj-name { grid-row: 1; }
/* Pfeil und Farbpunkt an der ersten Namenszeile (Zeilenhöhe 1,3 em), auch wenn ein langer Name umbricht */
#v-projekte .pj-item > .pj-dot { align-self: start; margin-top: calc(.65em - 4.5px); }
#v-projekte .pj-item > .pj-caret { align-self: start; margin-top: calc(.65em - 9px); }
#v-projekte .pj-item > .pj-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
#v-projekte .pj-item > .pj-meta { grid-row: 2; grid-column: 3; max-width: none; line-height: 1.25; }
/* Phase am gewählten Projekt und archivierte Projekte lesbar (≥ 4,5 : 1) */
#v-projekte .pj-item.on .pj-meta { color: var(--e7-sage-d); }
#v-projekte .pj-item.dim { opacity: 1; }
#v-projekte .pj-item.dim .pj-name { color: var(--text2); }
#v-projekte .pj-item.dim .pj-dot { opacity: .55; }
/* ── 7 · Chat ── */
#v-chat .ch-kopf h2 { font-size: 26px; }
#v-chat .ch-meld.blockiert { background: var(--e7-ocker-s); color: #5b4510; }
/* eigene Blase wie am Handy: dunkles Salbei, weiße Schrift (7,5 : 1) */
#teamMsgList .msg.me .bubble { background: var(--e7-sage-d); border-color: var(--e7-sage-d); color: #fff; }
#teamMsgList .msg.me .bubble a { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
/* ── 8 · Kalender: Sonntag normal (team.js: eigene Klasse sonntag-cell), nur Feiertage in Ziegel; Tage außerhalb voll lesbar ── */
#v-kalender .cal-title { font-size: 28px; }
#v-kalender .cal-month-cell.holiday-cell .cal-day-num { color: var(--e7-ziegel); }
#v-kalender .cal-event-chip.holiday, #v-kalender .cal-allday-event.holiday { color: var(--e7-ziegel) !important; }
#v-kalender .cal-week .cal-week-header > div:nth-child(8) .cwh-num { color: var(--text); }
#v-kalender .cal-week .cal-week-header > div:nth-child(8) .cwh-num.today { color: #fff; }
#v-kalender .cal-month-cell.other-mo .cal-event-chip { opacity: 1; }
#v-kalender .cal-month-cell.other-mo { background: #f8f6f0; }
#v-kalender .cal-month-cell.today .cal-day-num, #v-kalender .cal-week-header .cwh-num.today { background: var(--e7-sage-d); }
/* ── 9 · übrige Bereiche: nur Grund, Schrift, Ecken (Inhalte unverändert) ── */
#v-mail #mail-ltitle { font-size: 22px; }
#v-notizen .notes-list-title { font-size: 22px; }
.fx-kopf .finder-toolbar-title { font-size: 24px; }
#v-einstellungen .set-kopf-text h1 { font-size: 24px; }
.fl-welcome-name { font-size: 26px; }
#v-einstellungen .set-user-role-pill.admin { background: var(--e7-ocker-s); color: var(--e7-ocker); }
.fl-chip-db { color: var(--e7-sage-d); }
/* Glocke: „3 neu“ in Ocker (5,3 : 1 statt 4,2 : 1) */
.notif-panel .notif-titel em { color: var(--e7-ocker); background: var(--e7-ocker-s); }
/* ── 10 · Maus und Tastatur (Bild 10) ───────────────────────────────
Maus: Karten heben sich leicht (2 px), Rand dunkler, Name dunkler; Zeilen hellen auf; Knöpfe werden dunkler.
Tastatur: Rahmen 2,5 px dunkles Salbei – nur bei der Tab-Taste (:focus-visible), nie beim Klicken; im dunklen Rahmen hell.
Symbol-Knöpfe zeigen beim Darüberfahren oder mit der Tastatur, was sie tun (Hinweis-Blase .e7-tipp aus team.js). */
@media (hover: hover) {
.nd .dash-tool, .nd .dash-file, .nd .dash-note, .nd-kpi { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.nd .dash-tool:hover, .nd .dash-file:not(.up):hover, .nd .dash-note:hover {
transform: translateY(-2px); border-color: var(--border2); box-shadow: var(--e7-sh-2); background: var(--surface);
}
.nd .dash-tool:hover h3, .nd .dash-file:not(.up):hover .ft .n, .nd .dash-note:hover .nt .n { color: var(--e7-sage-d); }
.nd-kpi:hover { border-color: var(--border2); box-shadow: var(--e7-sh-2); }
.nd .dash-entry:hover, .nd .dash-chat:hover, .nd .dash-proj:hover { background: var(--surface2); }
/* nur TEAM – die Werkzeuge (Personal „Speichern“ ist auch .set-btn-primary) behalten ihr Verhalten; :where hält die Spezifität wie bisher */
:is(.pj-new-btn, .pj-post-send, .cal-new-btn, .ch-neu, .mail-compose-btn, .notes-new-btn, .notes-leer-neu, .fx-neu, .set-btn-primary, .fl-new-btn):where(:not(:is(#app-shell, .bo-modal-bg, #hrWorkModal, .hr-emp-overlay, .mini-date-ov) *)):hover {
background: var(--e7-sage-d); border-color: var(--e7-sage-d);
}
#chatEmpty .send:hover { background: var(--e7-sage-d); }
}
@media (prefers-reduced-motion: reduce) {
.nd .dash-tool:hover, .nd .dash-file:not(.up):hover, .nd .dash-note:hover { transform: none; }
}
/* Tastatur-Rahmen: niedrige Spezifität (:where), damit eigene Fokus-Ringe einzelner Bereiche (z. B. Chat-Kopf) bleiben */
:where(#home-shell, .view, #userMenu, .notif-panel, .set-modal-bg:not(#hrWorkModal), .login-overlay)
:where(button, a[href], summary, select, [role="button"], [tabindex]:not([tabindex="-1"])):where(:not(.tdoc-bearbeiten *)):focus-visible {
outline: 2.5px solid var(--e7-fokus); outline-offset: 2px;
}
:where(#home-shell, .view) :where(.dash-entry, .dash-chat, .dash-proj, .pj-item, .ci, .cal-agenda-event):focus-visible {
outline-offset: -3px; border-radius: 10px;
}
:where(.topbar, .bar) :where(button, a[href], [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 2.5px solid var(--e7-fokus-hell); outline-offset: 2px;
}
/* Suchfeld oben: derselbe helle Rahmen (vorher nur etwas heller hinterlegt – im dunklen Rahmen kaum zu sehen) */
.topbar .t-search:focus-visible { outline: 2.5px solid var(--e7-fokus-hell); outline-offset: 2px; }
/* Aufgaben-Karten (team.js: nach dem ersten Tab erreichbar) – Rahmen innen, damit ihn die Spalte nicht abschneidet */
#v-projekte .pj-task:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: -2px; }
/* bestehende Rahmen der Etappe 5 (2 px #4e7a64) auf denselben Wert bringen – gleiche Selektoren, diese Datei lädt später.
Bereiche mit eigenem Ring per box-shadow (Chat-Kopf, Senden, Einstellungen-Knöpfe) behalten ihn. */
#v-kalender button:focus-visible, #calModalOv button:focus-visible, #v-projekte button:focus-visible,
#v-mail button:focus-visible, #mail-compose button:focus-visible, #mail-accdlg button:focus-visible,
#v-notizen button:focus-visible, .notes-folder-dropdown button:focus-visible, .ni-pdf-dlg-box button:focus-visible,
.notif-panel .notif-seen:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 2px; }
#v-einstellungen .set-nav-btn:focus-visible, #userMenu .um-item:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: -3px; }
.t-logo:focus-visible { outline: 2.5px solid var(--e7-fokus-hell); outline-offset: 1px; }
.e7-tipp {
position: fixed; z-index: 10100; max-width: 300px; padding: 6px 10px; border-radius: 8px; pointer-events: none;
background: #2b2a27; color: #fff; font: 600 12px/1.3 var(--e7-sans); white-space: normal; overflow-wrap: break-word; /* lange Hinweise mehrzeilig, nie abgeschnitten */
box-shadow: 0 6px 16px rgba(20, 20, 18, .18); opacity: 0; transition: opacity .1s;
}
.e7-tipp.an { opacity: 1; }
/* ── 11 · schmale Fenster (1024–1280 px): „Flora fragen“ nur als Keimling, Reiter enger ── */
@media (max-width: 1180px) {
.t-flora { padding: 0 3px; gap: 0; font-size: 0; }
#v-projekte .pj-tabs { gap: 20px; padding: 0 20px; }
}
@media (max-width: 1100px) {
#v-projekte .pj-title { font-size: 23px; }
#v-chat .ch-kopf h2 { font-size: 23px; }
#v-kalender .cal-title { font-size: 24px; }
}
/* ================================================================
── 12 · STUFE B „neue Inhalte“ (2026-10-17 (Etappe 7 B)) ───────────────────────────────────────────
Startseite neu (Blatt über dem Titelbild, Zahlenzeile, „Als Nächstes fällig“, „Nächste 7 Tage“, Projekte mit Feld-Kachel),
Projektfelder, schmaler Projektkopf, Projekte-Übersicht, Liste links mit Feld-Kachel + Name in allen Reitern (nie Kacheln
ohne Namen, kein Einklappen – Martin 17.10.), Meilensteine neben den Beiträgen, Anhang-Kacheln. team.js v263 zeichnet die
Inhalte; alle Regeln hängen an TEAM-Bereichen (#home-shell, #v-projekte) – Werkzeuge, Leaflet, OnlyOffice, team-doc.* unberührt.
Gliederung: 12.1 Bausteine · 12.2 Start · 12.3 Projekte-Liste · 12.4 Übersicht · 12.5 Projektkopf · 12.6 Beiträge, Chat-Kopf ·
12.7 Rückmeldung · 12.8 schmale Fenster · 12.9 Korrektur nach Prüfung (Dokument als Blatt, Chat unten, Tastatur)
================================================================ */
/* ── 12.1 · Bausteine: Feld-Kachel, Zeilen, Fortschritt, Meilenstein-Chip, Links, Lade-Skelett ── */
.e7-fk { flex: none; display: inline-block; background: #ebe7dd center / cover no-repeat; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.e7-fk.s16 { width: 16px; height: 16px; border-radius: 5px; }
.e7-fk.s22 { width: 22px; height: 22px; border-radius: 6px; }
.e7-fk.s32 { width: 32px; height: 32px; border-radius: 9px; }
.e7-ic { width: 16px; height: 16px; flex: none; display: block; }
.e7-zeilen > * + * { border-top: 1px solid var(--border); }
.e7-zeile-t { flex: 1; min-width: 0; }
.e7-zeile-t b { display: block; font: 600 14px/1.35 var(--e7-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e7-zeile-t small { display: flex; align-items: center; gap: 6px; margin-top: 1px; font: 500 12.5px/1.35 var(--e7-sans); color: var(--text2); overflow: hidden; white-space: nowrap; }
.e7-zeile-t small .txt { overflow: hidden; text-overflow: ellipsis; }
.e7-fortschritt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.e7-spur { flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: #ebe7dd; overflow: hidden; }
.e7-spur i { display: block; height: 100%; min-width: 6px; border-radius: 3px; background: #4e7a64; }
.e7-fortschritt > span:last-child { font: 600 12.5px/1 var(--e7-sans); color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.e7-ms-chip {
display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; max-width: 100%; height: 28px; padding: 0 11px 0 9px;
border: 0; border-radius: 999px; background: var(--e7-ocker-s); color: var(--e7-ocker); font: 600 12.5px/1 var(--e7-sans); white-space: nowrap;
}
.e7-ms-chip .e7-ic { width: 14px; height: 14px; }
.e7-ms-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.e7-ms-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.e7-ms-chip.ueber { background: var(--e7-ziegel-s); color: var(--e7-ziegel); }
button.e7-ms-chip { cursor: pointer; }
.e7-link {
margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
font: 600 13px/1.2 var(--e7-sans); color: var(--e7-sage-d); white-space: nowrap;
}
.e7-link .e7-ic { width: 15px; height: 15px; }
.e7-link:hover { text-decoration: underline; text-underline-offset: 2.5px; }
.e7-leer { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; font: 500 13.5px/1.4 var(--e7-sans); color: var(--text2); }
.e7-leer > .e7-ic { width: 18px; height: 18px; color: var(--e7-sage-d); }
.e7-leer.fehler { color: var(--e7-ziegel); }
.e7-leer .e7-link { margin-left: auto; }
.e7-leer-text { margin: 0; font: 400 13.5px/1.5 var(--e7-sans); color: var(--text3); }
.e7-sk { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 16px; }
.e7-sk i { display: block; height: 12px; width: 82%; border-radius: 6px; background: #ebe7dd; }
.e7-sk i:nth-child(2) { width: 64%; } .e7-sk i:nth-child(3) { width: 72%; }
.e7-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── 12.2 · Startseite: Titelbild über die ganze Breite, das Leinen-Blatt legt sich darüber (wie am Handy) ── */
#home-shell .dash-wrap.nd { max-width: none; margin: 0; padding: 0; }
#home-shell .nd-hero {
min-height: 0; margin: 0; border-radius: 0; gap: 28px; align-items: flex-start;
padding: 22px max(32px, calc((100% - 1640px) / 2)) 46px;
}
#home-shell .nd-hero-text { gap: 0; max-width: 760px; padding-top: 2px; }
#home-shell .nd-hero-gruss { margin: 8px 0 6px; font-size: clamp(32px, 2.6vw, 38px); line-height: 1.08; }
#home-shell .nd-hero-tag { margin: 0; font: 500 15px/1.45 var(--e7-sans); color: rgba(255, 255, 255, .94); }
#home-shell .nd-hero-tag b { font-weight: 700; }
#home-shell .nd-hero-tag .e7-pkt { margin: 0 3px; opacity: .72; }
#home-shell .nd-hero-aktionen { margin-top: 16px; padding-top: 0; }
#home-shell .nd-wetter { width: 344px; padding: 12px 15px; }
/* Wetterkarte kompakter wie im Entwurf (Bild 01): Temperatur 40 px, Stunden als kleine Kacheln (Uhrzeit oben, Symbol + Grad daneben) –
das Titelbild wird dadurch so hoch wie im Entwurf; Inhalte und Symbole bleiben die der Stufe A */
#home-shell .nd-w-jetzt { gap: 10px; margin: 7px 0 8px; }
#home-shell .nd-w-grad { font-size: 40px; }
#home-shell .nd-w-icon svg { width: 36px; height: 36px; }
#home-shell .nd-w-stunden { gap: 5px; margin: 0; }
#home-shell .nd-w-stunden > div {
display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 4px; row-gap: 3px; padding: 5px 0 6px; border-radius: 8px;
}
#home-shell .nd-w-stunden > div > span:first-child { grid-column: 1 / -1; justify-self: center; line-height: 1; }
#home-shell .nd-w-stunden .wi svg { width: 14px; height: 14px; }
#home-shell .nd-w-stunden b { font-size: 12.5px; line-height: 1; }
#home-shell .nd-w-hinweis { margin-top: 7px; padding: 5px 9px; border-radius: 9px; }
#home-shell .nd-w-teil { white-space: nowrap; } /* „↑ 18° · ↓ 7°“ | „· gefühlt 14°“ – Umbruch nur zwischen den Teilen */
.e7-bogen {
position: relative; z-index: 1; margin-top: -22px; border-radius: 24px 24px 0 0; background: var(--bg);
padding: 18px max(28px, calc((100% - 1640px) / 2)) 34px;
}
/* Kennzahlen als eine schmale Zeile (eine Karte, Trennlinien) */
#home-shell .nd-kpis {
gap: 0; margin-bottom: 16px; grid-template-columns: repeat(var(--nd-kpi-n, 4), minmax(0, 1fr));
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-karte); box-shadow: var(--e7-sh-1); overflow: hidden;
}
#home-shell .nd-kpi { min-width: 0; gap: 12px; padding: 9px 16px; border: 0; border-radius: 0; box-shadow: none; background: none; }
#home-shell .nd-kpi + .nd-kpi { border-left: 1px solid var(--border); }
#home-shell .nd-kpi-ic { width: 32px; height: 32px; border-radius: 10px; }
#home-shell .nd-kpi-ic svg { width: 16px; height: 16px; }
#home-shell .nd-kpi-t { min-width: 0; }
#home-shell .nd-kpi-t b { font-size: 18px; }
#home-shell .nd-kpi-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home-shell .nd-kpi:focus-visible { outline-offset: -3px; }
/* Kartenkopf: Titel · leise Zahl · Link rechts */
.e7-kh-meta { min-width: 0; font: 500 12.5px/1.2 var(--e7-sans); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home-shell .e7-zeilen { margin: 0 -14px -14px; }
/* Als Nächstes fällig */
.e7-fz { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 6px 16px; }
.e7-haken {
width: 20px; height: 20px; flex: none; padding: 0; display: grid; place-items: center; cursor: pointer;
border-radius: 50%; border: 2px solid var(--border2); background: var(--surface); color: transparent; transition: background .12s, border-color .12s, color .12s;
}
.e7-haken .e7-ic { width: 11px; height: 11px; }
.e7-haken:hover { border-color: #4e7a64; color: #4e7a64; }
.e7-haken.an { background: #4e7a64; border-color: #4e7a64; color: #fff; }
.e7-haken.nur { cursor: default; border-style: dashed; }
.e7-fz .e7-zeile-t[onclick] { cursor: pointer; }
.e7-fz-meta { display: flex; align-items: center; gap: 14px; flex: none; font: 600 12.5px/1 var(--e7-sans); color: var(--text2); font-variant-numeric: tabular-nums; }
.e7-prio, .e7-fz-dat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.e7-prio { min-width: 50px; } .e7-fz-dat { min-width: 58px; }
.e7-prio .e7-ic, .e7-fz-dat .e7-ic { width: 15px; height: 15px; }
.e7-prio.ocker { color: var(--e7-ocker); } .e7-prio.ziegel { color: var(--e7-ziegel); } .e7-prio.himmel { color: var(--e7-himmel); }
.e7-fz-dat.ueber { color: var(--e7-ziegel); } .e7-fz-dat.heute { color: var(--e7-ocker); }
.e7-av { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #4e7a64; color: #fff; font: 650 10.5px/1 var(--e7-sans); }
.e7-av.leer { background: none; }
/* Nächste 7 Tage: kleine Woche, Termine direkt im Tag */
.e7-woche-karte { overflow: hidden; }
#home-shell .e7-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 -14px -14px; border-top: 1px solid var(--border); }
.e7-woche > .hm-widget-loading { grid-column: 1 / -1; }
.e7-tag { min-width: 0; min-height: 104px; padding: 8px 7px 10px; }
.e7-tag + .e7-tag { border-left: 1px solid var(--border); }
.e7-tag-kopf { display: flex; align-items: baseline; gap: 5px; margin: 0 0 7px 3px; }
.e7-tag-kopf small { font: 600 12px/1 var(--e7-sans); color: var(--text3); }
.e7-tag-kopf b { font: 650 15px/1 var(--e7-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.e7-tag.heute { background: var(--accent-s); }
.e7-tag.heute .e7-tag-kopf small, .e7-tag.heute .e7-tag-kopf b { color: var(--e7-sage-d); }
.e7-heute { margin-left: auto; font: 650 11px/1 var(--e7-sans); color: var(--e7-sage-d); }
.e7-ter {
display: block; width: 100%; margin: 0 0 5px; padding: 5px 7px 6px; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
background: color-mix(in srgb, var(--f, #4e7a64) 12%, #fff); box-shadow: inset 3px 0 0 var(--f, #4e7a64);
font: 600 12px/1.28 var(--e7-sans); color: var(--text); overflow-wrap: anywhere;
}
.e7-ter time { display: block; margin-bottom: 1px; font: 600 11.5px/1.2 var(--e7-sans); color: var(--text2); font-variant-numeric: tabular-nums; }
.e7-ter-mehr { display: block; margin: 0 3px; font: 600 11.5px/1.3 var(--e7-sans); color: var(--text2); }
/* Projekte (rechte Spalte) */
.e7-pz { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; cursor: pointer; }
.e7-weiter { display: flex; color: var(--text3); }
.e7-weiter .e7-ic { width: 17px; height: 17px; }
.e7-ms-chip.klein { height: 26px; padding: 0 10px 0 8px; }
/* Nachrichten: Kanäle mit Raute wie im Chat */
.nd .dash-ava.e7-raute { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-s); color: var(--e7-sage-d); }
.nd .dash-ava.e7-raute svg { width: 16px; height: 16px; }
/* Notizen als Zeilen statt Kärtchen */
#home-shell .dash-notes-list { gap: 0; margin: 0 -14px -14px; }
#home-shell .nd .dash-note { gap: 12px; min-height: 50px; padding: 7px 16px; border: 0; border-radius: 0; background: none; }
#home-shell .dash-notes-list > * + * { border-top: 1px solid var(--border); }
#home-shell .dash-note .nic { width: 32px; height: 32px; border-radius: 10px; }
#home-shell .dash-notes-list > .dash-ghost {
justify-content: flex-start !important; gap: 6px; margin: 0; padding: 11px 16px 12px; border-radius: 0 0 var(--r-karte) var(--r-karte);
border-left: 0; border-right: 0; border-bottom: 0; background: none; font-size: 13px; font-weight: 600; color: var(--e7-sage-d);
}
/* Bereiche: kompakte Karten (Symbol und Titel in einer Zeile) */
#home-shell .nd .dash-tool { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; column-gap: 10px; row-gap: 6px; padding: 14px 16px; }
#home-shell .nd .dash-tool .dash-tic { grid-column: 1; grid-row: 1; width: 32px; height: 32px; border-radius: 10px; }
#home-shell .nd .dash-tool .dash-tic svg { width: 17px; height: 17px; }
#home-shell .nd .dash-tool h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 17px; }
#home-shell .nd .dash-tool .desc, #home-shell .nd .dash-tool .dash-kpis { grid-column: 1 / -1; margin: 0; }
#home-shell .nd-ueber { margin: 22px 2px 10px; }
@media (hover: hover) {
#home-shell .nd-kpi:hover { background: var(--surface2); border-color: transparent; box-shadow: none; }
#home-shell .nd-kpi + .nd-kpi:hover { border-left-color: var(--border); }
.e7-fz:hover, .e7-pz:hover, #home-shell .nd .dash-note:hover { background: var(--surface2); }
#home-shell .nd .dash-note:hover { transform: none; box-shadow: none; border-color: transparent; }
.e7-fz .e7-zeile-t[onclick]:hover b, .e7-pz:hover .e7-zeile-t b { color: var(--e7-sage-d); }
.e7-ter:hover { background: color-mix(in srgb, var(--f, #4e7a64) 20%, #fff); }
button.e7-ms-chip:hover { background: #f3e3c2; }
}
/* ── 12.3 · Projekte: Liste links – in allen Reitern Feld-Kachel + Name (+ Phase, offene Aufgaben); kein Kachel-Modus ── */
/* 268 px nur in breiten Fenstern; bis 1200 px bleiben die 232 px aus team-design.css (Platz für Dokumente-Tabellen und Aufgaben-
Spalten) – die Namen stehen trotzdem ganz da, sie brechen notfalls in eine zweite Zeile um (Stufe A) */
@media (min-width: 1201px) { #v-projekte .pj-sidebar { width: 268px; } }
#v-projekte .e7-pj-sk { padding: 14px 10px; }
#v-projekte .e7-pj-keine { padding: 14px 10px; }
#v-projekte .pj-search input::placeholder { color: var(--text3); }
#v-projekte .pj-sec-header {
display: flex; align-items: center; gap: 6px; padding: 16px 10px 6px; letter-spacing: 0; text-transform: none;
font: 650 12.5px/1.2 var(--e7-sans); color: var(--text2);
}
#v-projekte .pj-sec-header small { margin-left: auto; font: 600 12px/1 var(--e7-sans); color: var(--text3); }
#v-projekte button.e7-sec-klapp { width: 100%; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; }
#v-projekte button.e7-sec-klapp .e7-ic { width: 15px; height: 15px; color: var(--text3); }
#v-projekte button.e7-sec-klapp:hover { background: var(--hover); color: var(--text); }
#v-projekte .pj-item { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 9px; min-height: 40px; border-radius: 10px; }
#v-projekte .pj-item > .pj-dot.e7-fk { grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; margin: 0; border-radius: 6px; }
#v-projekte .pj-item > .pj-name { font-weight: 600; }
#v-projekte .e7-pj-zahl {
grid-row: 1 / span 2; grid-column: 4; align-self: center; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center;
border-radius: 999px; background: #ebe7dd; font: 650 11.5px/1 var(--e7-sans); color: var(--text2); font-variant-numeric: tabular-nums;
}
#v-projekte .pj-item.on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--e7-sh-1); }
#v-projekte .pj-item.on .pj-name { color: var(--e7-sage-d); }
#v-projekte .pj-item.dim .pj-dot.e7-fk { opacity: 1; filter: saturate(.35); }
#v-projekte .pj-item.e7-pj-ueber { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; margin-bottom: 2px; }
#v-projekte .pj-item.e7-pj-ueber .e7-ic { width: 18px; height: 18px; color: var(--text2); }
#v-projekte .pj-item.e7-pj-ueber.on .e7-ic { color: var(--e7-sage-d); }
/* Übersicht: Unterprojekt-Knopf ruht, bis ein Projekt gewählt ist */
#v-projekte .pj-shell.e7-uebersicht .pj-new-sub-btn { opacity: .45; }
/* ── 12.4 · Projekte-Übersicht (Einstieg beim Klick auf „Projekte“): Kartenraster, Neues Projekt, Archiv eingeklappt ── */
#v-projekte .pj-shell.e7-uebersicht .pj-header, #v-projekte .pj-shell.e7-uebersicht .pj-tabs, #v-projekte .pj-shell.e7-uebersicht .pj-content { display: none; }
#v-projekte .e7-pj-uebersicht { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 30px 40px; background: var(--bg); }
#v-projekte .e7-pj-uebersicht[hidden] { display: none; }
.e7-pk-kopf { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.e7-pk-kopf h1 { margin: 0; font: 600 30px/1.12 var(--e7-serif); letter-spacing: -.012em; color: var(--text); }
.e7-pk-kopf p { margin: 5px 0 0; font: 500 13px/1.4 var(--e7-sans); color: var(--text2); }
.e7-pk-sort { margin-left: auto; display: flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--e7-sans); color: var(--text2); white-space: nowrap; }
.e7-pk-sort .e7-ic { width: 15px; height: 15px; color: var(--text3); }
.e7-pk-leer { margin: 0 0 16px; }
.e7-pk-fehler {
margin: 0 0 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-karte); box-shadow: var(--e7-sh-1);
}
.e7-pk.e7-pk-sk { min-height: 250px; cursor: default; }
.e7-pk.e7-pk-sk .e7-pk-banner { background: #ebe7dd; }
.e7-pk.e7-pk-sk .e7-pk-banner::after { content: none; }
.e7-pk.e7-pk-sk .e7-sk { padding: 18px 18px 0; }
.e7-pk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 18px; }
.e7-pk-raster.archiv { margin-top: 14px; }
.e7-pk {
display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-karte); box-shadow: var(--e7-sh-1);
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.e7-pk-banner { position: relative; height: 84px; flex: none; background: #3d5a40 center / cover no-repeat; }
.e7-pk-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .3)); }
.e7-pk-phase, .e7-pk-status {
position: absolute; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px;
font: 600 12px/1.2 var(--e7-sans); white-space: nowrap;
}
.e7-pk-phase { left: 14px; bottom: 11px; background: rgba(255, 255, 255, .93); color: var(--e7-sage-d); }
.e7-pk-status { right: 12px; top: 10px; background: rgba(20, 30, 24, .62); color: #fff; }
.e7-pk.archiv .e7-pk-banner { filter: saturate(.35); }
.e7-pk-koerper { flex: 1; display: flex; flex-direction: column; padding: 13px 18px 0; }
.e7-pk-koerper h3 { margin: 0; font: 600 21px/1.2 var(--e7-serif); letter-spacing: -.006em; color: var(--text); overflow-wrap: anywhere; }
.e7-pk-text {
margin: 5px 0 0; min-height: 41px; font: 400 14px/1.45 var(--e7-sans); color: var(--text2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.e7-pk-text.leer { color: var(--text3); }
.e7-pk-slot { margin-top: 13px; min-height: 18px; }
.e7-pk-ohne { display: flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--e7-sans); color: var(--text3); }
.e7-pk-ohne .e7-ic { width: 15px; height: 15px; }
.e7-pk-ms { display: flex; align-items: center; gap: 7px; min-height: 18px; margin-top: 10px; font: 500 13px/1.3 var(--e7-sans); color: var(--text2); white-space: nowrap; overflow: hidden; }
.e7-pk-ms .e7-ic { width: 15px; height: 15px; color: var(--e7-ocker); }
.e7-pk-ms b { color: var(--e7-ocker); font-weight: 700; font-variant-numeric: tabular-nums; }
.e7-pk-ms .txt { overflow: hidden; text-overflow: ellipsis; }
.e7-pk-ms.leer, .e7-pk-ms.leer .e7-ic { color: var(--text3); }
.e7-pk-ms.ueber .e7-ic, .e7-pk-ms.ueber b { color: var(--e7-ziegel); }
.e7-pk-fuss {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 15px; padding: 11px 18px 12px; border-top: 1px solid var(--border);
font: 500 13px/1.1 var(--e7-sans); color: var(--text2);
}
.e7-pk-fuss > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.e7-pk-fuss .e7-ic { width: 16px; height: 16px; color: var(--text3); }
.e7-pk-fuss b { font-weight: 650; color: var(--text); }
.e7-pk-fuss .e7-pk-oeffnen, .e7-pk-fuss .e7-pk-oeffnen .e7-ic { color: var(--e7-sage-d); font-weight: 600; }
.e7-pk-neu {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 250px; padding: 24px; cursor: pointer;
border: 1.5px dashed var(--border2); border-radius: var(--r-karte); background: none; color: var(--text2); text-align: center; font: inherit;
}
.e7-pk-neu-ic { width: 50px; height: 50px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 15px; background: var(--accent-s); color: var(--e7-sage-d); }
.e7-pk-neu-ic .e7-ic { width: 24px; height: 24px; }
.e7-pk-neu b { font: 600 19px/1.25 var(--e7-serif); color: var(--text); }
.e7-pk-neu > span:last-child { max-width: 240px; font: 400 13.5px/1.45 var(--e7-sans); }
.e7-pk-archiv {
display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 11px 18px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-karte); box-shadow: var(--e7-sh-1);
}
.e7-pk-archiv-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #ebe7dd; color: var(--text2); }
.e7-pk-archiv h3 { margin: 0; font: 600 17px/1.2 var(--e7-serif); color: var(--text); }
.e7-pk-archiv-namen { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 13px/1.4 var(--e7-sans); color: var(--text2); }
.e7-pk-archiv-namen > span { display: inline-flex; align-items: center; gap: 7px; }
.e7-pk-archiv-namen .e7-fk { filter: saturate(.35); }
@media (hover: hover) {
.e7-pk:not(.e7-pk-sk):hover { transform: translateY(-2px); border-color: var(--border2); box-shadow: var(--e7-sh-2); }
.e7-pk:hover h3 { color: var(--e7-sage-d); }
.e7-pk-neu:hover { border-color: #4e7a64; background: rgba(229, 238, 231, .45); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) { .e7-pk:hover { transform: none; } }
/* ── 12.5 · Schmaler Projektkopf (für alle Reiter gleich): Feld-Kachel, Name + Phase, Stand, Mitglieder, Einladen ── */
#v-projekte .pj-header { gap: 14px; padding: 18px 30px 6px; align-items: center; }
#v-projekte .pj-header-left { gap: 14px; }
#v-projekte .pj-color-dot.e7-fk { width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
#v-projekte .pj-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
#v-projekte .pj-title .e7-pj-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#v-projekte .e7-pj-phase {
flex: none; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px;
background: var(--accent-s); color: var(--e7-sage-d); font: 600 12px/1.2 var(--e7-sans); letter-spacing: 0;
}
#v-projekte .e7-pj-status.archiv { background: #ebe7dd; color: var(--text2); }
#v-projekte .e7-pj-status.pausiert { background: var(--e7-ocker-s); color: var(--e7-ocker); }
#v-projekte .pj-subtitle { gap: 6px; margin-top: 3px; font: 500 13px/1.35 var(--e7-sans); color: var(--text2); }
#v-projekte .pj-subtitle .pj-sub-sep { color: var(--text3); }
.e7-pj-stand { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.e7-pj-stand:empty { display: none; }
.e7-pj-stand .e7-fortschritt { width: 170px; }
.e7-pj-stand .e7-ms-chip { max-width: 330px; }
#v-projekte .pj-header-right { gap: 8px; padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--border); }
#v-projekte .pj-member-add.e7-einladen {
width: auto; height: 32px; margin-left: 4px; padding: 0 12px 0 10px; gap: 6px; border: 0; border-radius: 9px;
box-shadow: inset 0 0 0 1.5px var(--border2); background: var(--surface); color: var(--e7-sage-d); font: 650 13px/1 var(--e7-sans);
}
#v-projekte .pj-member-add.e7-einladen:hover { box-shadow: inset 0 0 0 1.5px #4e7a64; background: var(--accent-s); }
#v-projekte .pj-settings-btn { width: 32px; height: 32px; border-radius: 9px; }
#v-projekte .pj-tabs { padding: 0 30px; margin-top: 6px; }
/* ── 12.6 · Beiträge: Meilensteine neben den Beiträgen, Anhang-Kacheln, Schlusszeile ── */
#v-projekte .pj-feed-side { width: 312px; gap: 16px; }
#v-projekte .pj-side-card.e7-ms-karte, #v-projekte .pj-side-card.e7-ueber-karte { padding: 0; overflow: hidden; box-shadow: var(--e7-sh-1); }
#v-projekte .e7-sk-kopf { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px 6px; }
#v-projekte .pj-side-card .e7-sk-kopf h4, #v-projekte .e7-ueber-karte h4 {
margin: 0; font: 600 17px/1.25 var(--e7-serif); letter-spacing: -.004em; text-transform: none; color: var(--text);
}
#v-projekte .e7-ueber-karte h4 { padding: 13px 16px 6px; }
#v-projekte .e7-ueber-karte p { padding: 0 16px 14px; font: 400 13.5px/1.5 var(--e7-sans); color: var(--text2); }
#v-projekte .e7-ueber-karte p.e7-leer-text, #v-projekte .e7-ms-karte .e7-leer-text { color: var(--text3); }
#v-projekte .e7-ms-karte .e7-leer-text { padding: 0 16px 14px; }
#v-projekte .e7-ms-neu { margin: -6px 16px 14px; }
.e7-ms-zeile { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 50px; padding: 6px 16px; }
.e7-ms-zeile + .e7-ms-zeile { border-top: 1px solid var(--border); }
.e7-ms-zeile .dat { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 38px; border-radius: 10px; background: #ebe7dd; color: var(--text2); }
.e7-ms-zeile .dat b { font: 700 13px/1.1 var(--e7-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.e7-ms-zeile .dat small { font: 600 10.5px/1.15 var(--e7-sans); }
.e7-ms-zeile.naechster .dat, .e7-ms-zeile.naechster .dat b { background: var(--e7-ocker-s); color: var(--e7-ocker); }
.e7-ms-zeile.ueber .dat, .e7-ms-zeile.ueber .dat b { background: var(--e7-ziegel-s); color: var(--e7-ziegel); }
.e7-ms-zeile .e7-zeile-t b { font-size: 13.5px; }
.e7-ms-zeile .e7-zeile-t small { font-size: 12.5px; }
.e7-ms-zeile .wann { color: var(--e7-ocker); font-weight: 650; }
.e7-ms-zeile.ueber .wann { color: var(--e7-ziegel); }
.e7-sk-fuss { padding: 10px 16px 11px; border-top: 1px solid var(--border); font: 500 12.5px/1.35 var(--e7-sans); color: var(--text2); text-wrap: balance; }
#v-projekte .e7-anhaenge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
#v-projekte .e7-anhang {
display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px 9px 9px; cursor: pointer; text-align: left;
border: 1px solid var(--border); border-radius: 14px; background: var(--surface2); font: inherit; color: inherit;
}
#v-projekte .e7-anhang .e7-zeile-t b { font-size: 13.5px; }
#v-projekte .e7-anhang .e7-zeile-t b.e7-mitte { display: flex; text-overflow: clip; }
#v-projekte .e7-mitte > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-projekte .e7-mitte > span:last-child { flex: none; white-space: pre; }
.e7-typ {
width: 34px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 8px;
background: #ebe7dd; color: var(--text2); font: 700 10.5px/1 var(--e7-sans); letter-spacing: .02em;
}
.e7-typ.pdf { background: #f6e4df; color: var(--e7-ziegel); }
.e7-typ.w { background: #e7eef9; color: #2b5797; }
.e7-typ.x { background: var(--accent-s); color: var(--e7-sage-d); }
.e7-typ.p { background: var(--e7-ocker-s); color: var(--e7-ocker); }
.e7-typ.bild { background: var(--accent-s); color: var(--e7-sage-d); font-size: 9px; }
#v-projekte .e7-ende { margin: 2px 0 30px; text-align: center; font: 500 13px/1.4 var(--e7-sans); color: var(--text3); }
@media (hover: hover) {
#v-projekte .e7-anhang:hover { border-color: var(--border2); background: var(--surface); box-shadow: var(--e7-sh-1); }
#v-projekte .e7-anhang:hover .e7-zeile-t b { color: var(--e7-sage-d); }
}
/* Chat: Name im Kopf in der Buchschrift wie die übrigen Seitentitel (Bild 06) */
#v-chat .ch-kopf-text b { font-family: var(--e7-serif); font-size: 19px; font-weight: 600; letter-spacing: -.008em; }
/* ── 12.7 · Rückmeldung mit Knopf („Aufgabe erledigt · Rückgängig“, 5 s) ── */
.toast-wrap .toast.e7-toast-knopf { align-items: center; animation: gl-toast-rein .2s ease-out both, gl-toast-raus .25s ease-in 4.7s forwards; }
.e7-toast-knopf > span { flex: 1; min-width: 0; }
.e7-toast-knopf > button {
flex: none; margin: -4px -6px -4px 4px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
font: 650 13px/1 var(--e7-sans); color: var(--e7-sage-d);
}
.e7-toast-knopf > button:hover { background: var(--accent-s); }
@media (prefers-reduced-motion: reduce) { .toast-wrap .toast.e7-toast-knopf { animation: none; } }
/* ── 12.8 · schmale Fenster: Projektkopf zweizeilig ab 1320 px, Start einspaltig ab 1150 px, Beitragsspalte unten ab 1100 px ── */
@media (max-width: 1320px) {
/* die Knöpfe reichen hier über den Verlauf hinaus auf helle Bahnen des Felds – dunkler Glasgrund hält weiße Schrift ≥ 4,5 : 1 */
#home-shell .nd-hero .dash-btn:not(.primary) { background: rgba(16, 30, 21, .5); border-color: rgba(255, 255, 255, .38); }
#home-shell .nd-hero .dash-btn:not(.primary):hover { background: rgba(16, 30, 21, .62); }
#v-projekte .pj-header { flex-wrap: wrap; row-gap: 8px; }
.e7-pj-stand { order: 3; width: 100%; padding-left: 58px; }
.e7-pj-stand .e7-fortschritt { width: 150px; }
#home-shell .nd-hero-gruss { font-size: 35px; }
.e7-bogen { padding: 16px 24px 28px; }
#home-shell .nd-hero { padding: 18px 28px 42px; }
}
@media (max-width: 1150px) {
#home-shell .nd-hero { flex-direction: row; gap: 20px; }
#home-shell .nd-hero-gruss { font-size: 32px; }
#home-shell .nd-wetter { width: 304px; max-width: none; margin-left: auto; } /* 304: Wetterzeilen und Hinweis je in einer Zeile */
#home-shell .nd-w-stunden, #home-shell .nd-w-sonne { display: none; }
#home-shell .nd-raster { grid-template-columns: minmax(0, 1fr); }
#home-shell .nd-bereiche.dash-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#v-projekte .e7-pj-uebersicht { padding: 22px 22px 28px; }
}
@media (max-width: 1100px) {
/* wie im Entwurf: erst die Beiträge, darunter Meilensteine und „Über das Projekt“ nebeneinander – alles scrollt gemeinsam */
#v-projekte .pj-tab-pane[data-pane="posts"] { overflow-y: auto; }
#v-projekte .pj-tab-pane[data-pane="posts"] > .pj-feed { flex: none; overflow: visible; padding-bottom: 8px; }
#v-projekte .pj-feed-side { order: 2; flex: none; flex-direction: row; align-items: flex-start; width: auto; padding: 0 28px 40px; overflow: visible; }
#v-projekte .pj-feed-side > .pj-side-card { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 980px) {
#v-projekte .e7-anhaenge { grid-template-columns: minmax(0, 1fr); }
.e7-pk-sort { display: none; }
}
/* ── 12.9 · Korrektur nach Prüfung (2026-10-18) ── */
/* Dokumente-Leser als Papierblatt auf Leinen (Bild 05 des Entwurfs) – nur der Rahmen um den Leser (#pjWikiMain), das Innere
(team-doc.*) bleibt unberührt; bis 1200 px flach über die ganze Breite (dort zählt jede Spalte der Tabellen) */
@media screen and (min-width: 1201px) {
#v-projekte .pj-wiki-main.tdoc-main {
margin: 16px 24px 0 6px; border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: var(--e7-sh-2);
}
}
/* Statuszeile im Leser („Startseite des Projekts“) lesbar (≥ 4,5 : 1); Hinweise beim Bearbeiten behalten ihre Farben */
#v-projekte .tdoc-leiste:not(.tdoc-werkzeug) .tdoc-status:not(.ungespeichert):not(.fehler) { color: var(--text2); }
/* Chat: die Nachrichten stehen unten beim Eingabefeld (Bild 06); bei langem Verlauf wie bisher ganz normal scrollend */
#v-chat #teamMsgList > :first-child:not(.empty-state):not(.loading-center) { margin-top: auto; }
/* Tastatur: das fokussierte Element bleibt mit seinem Rahmen ganz im Bild (Startseite, Liste links, Übersicht) */
#home-shell, #v-projekte .pj-list, #v-projekte .e7-pj-uebersicht { scroll-padding-block: 16px; }
/* ================================================================
── 13 · PAKET C „Projekte anordnen“ (2026-10-19 (Paket C)) ───────────────────────────────────────────
Martin 19.10.: „man sollte die Projekte auch noch irgendwie anordnen können oder?!“ – Sortier-Auswahl in der Übersicht und
in der Liste links (eine Einstellung), gemeinsame Reihenfolge per Ziehen (Griff, Einfügemarke, Auto-Scroll) oder Tastatur
(Menü, Alt/⌥ + Pfeil), Anheften (Stecknadel). team.js v264 zeichnet die Teile; Regeln hängen an #v-projekte bzw. an eigenen
e7c-Klassen (Menü, Geist und Marke liegen am body). Werkzeuge, Leaflet, OnlyOffice, team-doc.* unberührt.
Korrektur nach der Prüfung: Geist = schmaler Chip über der Marke, Griff links kräftiger (≥ 3 : 1), Name rückt vom „…“ weg,
gesperrte Menüpunkte mit Begründung, „…“ im Projektkopf erst ab 1440 px.
Gliederung: 13.1 Sortier-Knopf · 13.2 Menü · 13.3 Karten der Übersicht · 13.4 Liste links (+ Stecknadel an der Kachel) ·
13.5 Ziehen · 13.6 Projektkopf · 13.7 schmale Fenster
================================================================ */
/* ── 13.1 · Sortier-Knopf (Übersicht oben rechts; Liste links unter der Suche – dieselbe Einstellung) ── */
.e7c-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.e7c-hinweis { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--e7-sans); color: var(--text2); white-space: nowrap; }
.e7c-hinweis .e7-ic { width: 15px; height: 15px; color: var(--e7-sage-d); }
.e7c-sortknopf {
display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 11px; flex: none;
border: 1px solid var(--border2); border-radius: var(--r-feld); background: var(--surface); color: var(--text2);
cursor: pointer; font: 500 13px/1 var(--e7-sans); white-space: nowrap; transition: border-color .12s, background .12s;
}
.e7c-sortknopf b { font-weight: 650; color: var(--text); }
.e7c-sortknopf .e7-ic { width: 16px; height: 16px; color: var(--e7-sage-d); }
.e7c-sortknopf > .e7-ic:last-child { width: 14px; height: 14px; color: var(--text2); }
.e7c-sortknopf:hover, .e7c-sortknopf[aria-expanded="true"] { border-color: var(--text3); color: var(--text); }
#v-projekte .e7c-sortzeile { padding: 0 10px 2px; } /* schmale Liste (232 px): genug Platz für „Gemeinsame Reihenfolge“ */
#v-projekte .e7c-sortknopf.klein {
width: 100%; height: 30px; gap: 6px; padding: 0 6px 0 9px; border-color: transparent; background: none; font-size: 12.5px;
}
#v-projekte .e7c-sortknopf.klein b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#v-projekte .e7c-sortknopf.klein > .e7-ic:last-child { margin-left: auto; }
#v-projekte .e7c-sortknopf.klein:hover, #v-projekte .e7c-sortknopf.klein[aria-expanded="true"] { background: var(--hover); border-color: transparent; }
/* ── 13.2 · Menü (Sortierung; Projekt: Anheften, Nach oben/unten, An den Anfang) ── */
.e7c-menue {
position: fixed; z-index: 10050; min-width: 248px; max-width: 330px; padding: 6px; box-sizing: border-box;
border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff);
box-shadow: 0 16px 38px rgba(38, 36, 30, .16), 0 2px 6px rgba(38, 36, 30, .08); font-family: var(--e7-sans);
}
.e7c-menue.sort { width: 318px; max-width: calc(100vw - 16px); }
.e7c-m-kopf { padding: 7px 10px 7px; font: 600 15px/1.3 var(--e7-serif); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e7c-mp {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px;
background: none; color: var(--text); text-align: left; cursor: pointer; font: 500 13.5px/1.3 var(--e7-sans);
}
.e7c-mp > .e7-ic { width: 17px; height: 17px; flex: none; color: var(--e7-sage-d); }
.e7c-mp:hover { background: var(--hover); }
.e7c-mp:focus { outline: none; }
.e7c-mp:focus-visible { background: var(--hover); box-shadow: inset 0 0 0 2px var(--e7-fokus); }
.e7c-mp[aria-disabled="true"] { color: var(--text2); cursor: default; }
.e7c-mp[aria-disabled="true"] > .e7-ic { color: var(--text3); }
.e7c-mp[aria-disabled="true"]:hover { background: none; }
.e7c-mp[aria-disabled="true"] .e7c-m-t b { font-weight: 500; }
.e7c-mp[aria-disabled="true"] kbd { background: none; box-shadow: inset 0 0 0 1px var(--border2); font-weight: 500; } /* ohne Füllung = gesperrt, Text bleibt ≥ 4,5 : 1 */
.e7c-m-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.e7c-m-t b { font-weight: 600; }
.e7c-m-t small { font: 400 12px/1.35 var(--e7-sans); color: var(--text2); }
.e7c-mp kbd { flex: none; padding: 4px 6px; border-radius: 5px; background: #ebe7dd; font: 600 11px/1 var(--e7-sans); color: var(--text2); }
.e7c-m-wahl { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--e7-sage-d); }
.e7c-m-wahl .e7-ic { width: 17px; height: 17px; }
.e7c-mp[aria-checked="true"] { background: var(--accent-s); }
.e7c-mp[aria-checked="true"] b { color: var(--e7-sage-d); }
.e7c-m-trenn { height: 1px; margin: 5px 8px; background: var(--border); }
.e7c-m-hinweis { display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 0; padding: 6px 10px 5px; font: 400 12px/1.4 var(--e7-sans); color: var(--text2); }
.e7c-m-hinweis .e7-ic { width: 14px; height: 14px; margin-top: 1px; flex: none; color: var(--e7-ocker); }
/* gesperrter Punkt angeklickt: warum (z. B. „steht schon ganz oben“) – leer unsichtbar */
.e7c-m-meldung { margin: 4px 4px 2px; padding: 7px 9px; border-radius: 9px; background: var(--e7-ocker-s); font: 500 12.5px/1.35 var(--e7-sans); color: #6b4708; }
.e7c-m-meldung:empty { display: none; }
/* ── 13.3 · Karten der Übersicht: Werkzeuge oben rechts im Feld (Griff nur in „Eigene Reihenfolge“), Status-Chip nach links ── */
.e7-pk-banner .e7-pk-status { right: auto; left: 12px; }
.e7c-pk-werkzeug { position: absolute; z-index: 2; top: 9px; right: 10px; display: flex; gap: 6px; }
.e7c-rund {
width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(255, 255, 255, .93); color: var(--text2); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
transition: opacity .12s, background .12s, color .12s;
}
.e7c-rund .e7-ic { width: 16px; height: 16px; }
.e7c-rund:hover { background: #fff; color: var(--text); }
.e7c-pk-werkzeug .e7c-nadel:not(.an) { opacity: 0; }
.e7-pk:hover .e7c-pk-werkzeug .e7c-nadel, .e7-pk:focus-within .e7c-pk-werkzeug .e7c-nadel { opacity: 1; }
.e7c-nadel.an { background: var(--e7-ocker-s); color: var(--e7-ocker); }
.e7c-nadel.an:hover { background: #fff; color: var(--e7-ocker); }
.e7c-griff.e7c-rund { cursor: grab; touch-action: none; color: var(--e7-sage-d); }
/* angeheftet, aber nur lesbar: Stecknadel nur als Zeichen (kein Knopf) */
.e7c-nadel.fest, .e7c-nadel.fest:hover { cursor: default; background: var(--e7-ocker-s); color: var(--e7-ocker); }
.e7-pk.e7c-an { border-color: #e6d3a6; }
@media (hover: none) { .e7c-pk-werkzeug .e7c-nadel:not(.an) { opacity: 1; } }
/* ── 13.4 · Liste links: Griff links (nur „Eigene Reihenfolge“), „…“ beim Darüberfahren; Stecknadel an der Feld-Kachel ── */
#v-projekte .pj-item > .e7c-griff {
position: absolute; top: 50%; left: -9px; width: 12px; height: 24px; margin-top: -12px; display: grid; place-items: center;
color: var(--text2); cursor: grab; touch-action: none; opacity: .85; transition: opacity .12s;
}
#v-projekte .pj-item > .e7c-griff .e7-ic { width: 14px; height: 14px; }
#v-projekte .pj-item[data-e7c-t="1"] > .e7c-griff { left: 2px; }
#v-projekte .pj-item[data-e7c-t="2"] > .e7c-griff { left: 16px; }
#v-projekte .pj-item[data-e7c-t="3"] > .e7c-griff, #v-projekte .pj-item[data-e7c-t="4"] > .e7c-griff { left: 30px; }
#v-projekte .pj-item:hover > .e7c-griff { opacity: 1; color: var(--e7-sage-d); }
#v-projekte .pj-item > .e7c-mehr {
position: absolute; top: 50%; right: 6px; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; padding: 0;
border: 0; border-radius: 8px; background: var(--surface); color: var(--text2); cursor: pointer; opacity: 0;
box-shadow: inset 0 0 0 1px var(--border2); transition: opacity .12s;
}
#v-projekte .pj-item > .e7c-mehr .e7-ic { width: 16px; height: 16px; }
#v-projekte .pj-item > .e7c-mehr:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text3); }
#v-projekte .pj-item:hover > .e7c-mehr, #v-projekte .pj-item:focus-within > .e7c-mehr, #v-projekte .pj-item > .e7c-mehr[aria-expanded="true"] { opacity: 1; }
#v-projekte .pj-item:hover > .e7-pj-zahl, #v-projekte .pj-item:focus-within > .e7-pj-zahl { visibility: hidden; }
/* Zeile ohne Aufgaben-Zahl: beim Darüberfahren (bzw. offenem Menü) rückt der Name vom „…“ weg – nichts wird verdeckt */
#v-projekte .pj-item.e7c-oz:is(:hover, :focus-within, .e7c-offen) > :is(.pj-name, .pj-meta) { margin-right: 18px; }
/* angeheftet: kleine Stecknadel in Ocker an der Feld-Kachel (Liste links, Startseite, Projektkopf) – nimmt dem Namen keinen Platz */
.e7-fk.e7c-an-kachel { position: relative; overflow: visible; }
.e7-fk.e7c-an-kachel::after {
content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%;
background: #f8eed8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385590c' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v4.5'/%3E%3Cpath d='M8.8 10.6V4.5h6.4v6.1l2.6 3.9H6.2z'/%3E%3Cpath d='M7.8 3h8.4'/%3E%3C/svg%3E") center / 10px no-repeat;
box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .18);
}
.e7-fk.s32.e7c-an-kachel::after { top: -5px; right: -5px; width: 16px; height: 16px; background-size: 11px; }
#v-projekte .pj-color-dot.e7c-an-kachel::after { top: -6px; right: -6px; width: 20px; height: 20px; background-size: 13px; }
/* ── 13.5 · Ziehen: Geist = schmaler Chip (Kachel + Name) neben dem Zeiger, deckend und ÜBER der Marke; Platz blass; Marke in Salbei ──
Außerhalb von Übersicht bzw. Liste: Chip blass mit „Loslassen bricht ab“, keine Marke. */
body.e7c-ziehen, body.e7c-ziehen * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
.e7c-zieht { opacity: .32; }
.e7c-geist {
position: fixed; left: 0; top: 0; z-index: 10046; pointer-events: none; box-sizing: border-box;
display: flex; align-items: center; gap: 9px; max-width: 290px; padding: 6px 14px 6px 7px;
border: 1px solid var(--border2); border-radius: 12px; background: var(--surface, #fff); color: var(--text);
box-shadow: 0 14px 34px rgba(38, 36, 30, .24), 0 3px 8px rgba(38, 36, 30, .12); font-family: var(--e7-sans);
}
.e7c-geist > .e7-fk { width: 26px; height: 26px; border-radius: 7px; }
.e7c-geist-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.e7c-geist-t b { font: 600 14px/1.25 var(--e7-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e7c-geist-t small { font: 500 12px/1.25 var(--e7-sans); white-space: nowrap; }
.e7c-geist-zahl { color: var(--e7-sage-d); }
.e7c-geist-ab { display: none; color: var(--text2); }
.e7c-geist.aus { opacity: .8; border-style: dashed; box-shadow: 0 6px 16px rgba(38, 36, 30, .14); }
.e7c-geist.aus .e7c-geist-ab { display: block; }
.e7c-geist.aus .e7c-geist-zahl { display: none; }
.e7c-marke { position: fixed; z-index: 10045; pointer-events: none; border-radius: 3px; background: #4e7a64; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 1px 4px rgba(38, 36, 30, .25); }
.e7c-marke::before, .e7c-marke::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #4e7a64; box-shadow: 0 0 0 1.5px #fff; }
.e7c-marke::before { left: -4px; top: -3px; }
.e7c-marke::after { right: -4px; top: -3px; }
.e7c-marke.senkrecht::before { left: -3px; top: -4px; }
.e7c-marke.senkrecht::after { left: -3px; right: auto; top: auto; bottom: -4px; }
/* ── 13.6 · Projektkopf („…“ vor dem Zahnrad, ab 1440 px; angeheftet = Stecknadel an der Kachel, Abschnitt 13.4) ── */
#v-projekte .e7c-kopf-mehr {
width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
border: 1px solid var(--border2); border-radius: 9px; background: var(--surface); color: var(--text2);
}
#v-projekte .e7c-kopf-mehr .e7-ic { width: 17px; height: 17px; }
#v-projekte .e7c-kopf-mehr:hover, #v-projekte .e7c-kopf-mehr[aria-expanded="true"] { border-color: var(--text3); color: var(--text); }
/* unter 1440 px kein „…“ im Kopf – der Projektname behält seinen Platz; Anheften/Anordnen über „…“ an der Zeile links */
@media (max-width: 1439.98px) { #v-projekte .e7c-kopf-mehr { display: none; } }
/* ── 13.7 · schmale Fenster: Hinweis zum Ziehen weg, Sortier-Knopf ohne „Sortierung:“ (Übersicht bis 980 px) ──
Liste links (232 px): „Sortierung:“ immer nur für Vorleseprogramme – sonst würde „Gemeinsame Reihenfolge“ gekürzt */
#e7cSortZeile .e7c-sk-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1150px) { .e7c-hinweis { display: none; } }
@media (max-width: 980px) { #pjUebersicht .e7c-sortknopf .e7c-sk-l { display: none; } }
/* ================================================================
── 14 · PAKET D2 „Notizen neu“ (2026-10-21 (Paket D2)) ───────────────────────────────────────────
Abgenommener Entwurf 19./20.10.2026 (team_editor/entwurf, Bilder 01–12): Ordner | Liste | Notiz als weißes Blatt, Titel in der
Buchschrift, ruhiger Editor-Baustein (Blase beim Markieren, „/“-Menü). Sortieren, Stecknadel, Ziehen und Menüs wie Paket C
(Abschnitt 13: e7c-sortknopf, e7c-menue, e7c-geist, e7c-marke). team.js v266 zeichnet alles unter #v-notizen (.nz-*);
Blase, „/“-Menü, Menüs, Rückfrage und Geist liegen am body (.eb-*, .nz-menue, .nz-schleier, .nz-geist).
Gliederung: 14.1 Gerüst · 14.2 Ordner · 14.3 Liste · 14.4 Blatt + Leiste · 14.5 Inhalt (Editor) · 14.6 Blase + „/“ ·
14.7 Menüs, Rückfrage, Ziehen · 14.8 Startseite · 14.9 schmale Fenster (unter 1150 px)
================================================================ */
:root {
--nz-such: #f6e2ae; /* Suchtreffer: Text #1f1e1c darauf 13 : 1 */
--nz-kreis: #958f83; /* Rand des leeren Häkchen-Kreises: 3,2 : 1 auf Weiß (Bedienelement ≥ 3 : 1) */
--nz-platzhalter: #6b6861; /* 5,6 : 1 auf Weiß */
--nz-platzhalter-titel: #8a857a; /* 3,7 : 1 – großer Titel (≥ 3 : 1 für großen Text) */
--nz-pop: 0 16px 38px rgba(38, 36, 30, .16), 0 2px 6px rgba(38, 36, 30, .08);
}
/* ── 14.1 · Gerüst ── */
#v-notizen .nz { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 216px 340px minmax(0, 1fr); background: var(--bg); font-family: var(--e7-sans); color: var(--text); }
#v-notizen .nz button { font-family: inherit; }
#v-notizen .nz :where(button, [tabindex], input, textarea):focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 2px; }
.nz .ic, .nz .e7-ic { flex: none; }
.nz-luft { flex: 1; }
.nz-laedt { padding: 28px 22px; font: 500 13.5px/1.4 var(--e7-sans); color: var(--text2); }
.nz-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-feld, 11px);
background: var(--surface); color: var(--text); font: 600 13.5px/1 var(--e7-sans); cursor: pointer; white-space: nowrap;
}
.nz-knopf .e7-ic { width: 16px; height: 16px; }
.nz-knopf.voll { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(38, 36, 30, .12); }
.nz-knopf.voll:hover { background: #456e59; }
.nz-knopf.rand { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border2); color: var(--text); }
.nz-knopf.rand:hover { box-shadow: inset 0 0 0 1px var(--text3); }
.nz-knopf.rot { background: var(--e7-ziegel); color: #fff; }
.nz-knopf.rand.rot { background: var(--surface); color: var(--e7-ziegel); box-shadow: inset 0 0 0 1px #e3b9ae; }
.nz-knopf.klein { height: 30px; padding: 0 12px 0 10px; font-size: 13px; }
.nz-knopf.gross { height: 42px; padding: 0 20px 0 16px; font-size: 14.5px; }
.nz-link { padding: 0; border: 0; background: none; color: var(--e7-sage-d); font: 600 13px/1.3 var(--e7-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.nz-leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 22px; }
.nz-leer .symbol { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-s); color: var(--e7-sage-d); margin-bottom: 4px; }
.nz-leer .symbol .e7-ic { width: 25px; height: 25px; }
.nz-leer.grau .symbol { background: #ebe7dd; color: var(--text2); }
.nz-leer h3 { margin: 0; font: 600 18px/1.25 var(--e7-serif); color: var(--text); }
.nz-leer p { margin: 0; max-width: 300px; font: 400 14px/1.5 var(--e7-sans); color: var(--text2); }
.nz-leer .nz-knopf { margin-top: 10px; }
.nz-leer .nz-link { margin-top: 4px; text-decoration: none; }
/* ── 14.2 · Ordner ── */
.nz-ordner { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--surface2); border-right: 1px solid var(--border); padding: 16px 0 12px; }
.nz-ordner-kopf { margin: 2px 18px 10px 20px; }
.nz-ordner-kopf h2 { margin: 0; font: 600 19px/1.2 var(--e7-serif); letter-spacing: -.006em; color: var(--text); }
.nz-o { position: relative; margin: 1px 10px; border-radius: 10px; }
.nz-o-haupt {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px 0 11px; border: 0; border-radius: 10px;
background: none; color: var(--text); font: 600 13.5px/1.25 var(--e7-sans); text-align: left; cursor: pointer;
}
.nz-o-haupt > .e7-ic { width: 18px; height: 18px; color: var(--text2); }
.nz-o-haupt .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-o-haupt small { flex: none; font: 600 12px/1 var(--e7-sans); color: var(--text3); }
.nz-o:hover .nz-o-haupt { background: rgba(255, 255, 255, .7); }
.nz-o.an .nz-o-haupt { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--e7-sh-1); color: var(--e7-sage-d); }
.nz-o.an .nz-o-haupt > .e7-ic { color: var(--e7-sage-d); }
.nz-o.ziel .nz-o-haupt { background: var(--accent-s); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--e7-sage-d); }
.nz-o.papierkorb .nz-o-haupt > .e7-ic { color: var(--text3); }
.nz-o-mehr {
position: absolute; top: 50%; right: 6px; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; padding: 0; border: 0;
border-radius: 7px; background: var(--surface); color: var(--text2); box-shadow: inset 0 0 0 1px var(--border2); cursor: pointer; opacity: 0;
}
.nz-o-mehr .e7-ic { width: 15px; height: 15px; }
.nz-o:hover .nz-o-mehr, .nz-o:focus-within .nz-o-mehr, .nz-o-mehr[aria-expanded="true"] { opacity: 1; }
.nz-o:is(:hover, :focus-within):has(.nz-o-mehr) .nz-o-haupt small { visibility: hidden; }
.nz-o-gruppe { margin: 16px 20px 5px 21px; font: 650 11.5px/1.2 var(--e7-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.nz-o-feld {
display: flex; align-items: center; gap: 10px; margin: 1px 10px; min-height: 38px; padding: 0 8px 0 11px; border-radius: 10px; background: var(--surface);
box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--accent-s);
}
.nz-o-feld > .e7-ic { width: 18px; height: 18px; color: var(--e7-sage-d); }
.nz-o-feld input { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; background: none; font: 600 13.5px/1.25 var(--e7-sans); color: var(--text); }
.nz-o-feld input::placeholder { color: var(--nz-platzhalter); font-weight: 500; }
#v-notizen .nz-o-feld input:focus-visible { outline: 0; }
.nz-neu-ordner {
display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 0 10px; min-height: 36px; border: 0; border-radius: 10px;
background: none; color: var(--e7-sage-d); font: 600 13px/1 var(--e7-sans); cursor: pointer; text-align: left;
}
.nz-neu-ordner .e7-ic { width: 17px; height: 17px; }
.nz-neu-ordner:hover { background: rgba(255, 255, 255, .7); }
/* ── 14.3 · Liste ── */
.nz-liste { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.nz-liste-kopf { padding: 14px 16px 6px 20px; }
.nz-titelzeile { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.nz-h1 { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; margin: 0; font: 600 23px/1.15 var(--e7-serif); letter-spacing: -.012em; white-space: nowrap; color: var(--text); }
.nz-h1 .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nz-h1 small { flex: none; font: 500 13px/1 var(--e7-sans); color: var(--text3); letter-spacing: 0; }
#v-notizen .nz-h1.klapp { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.nz-h1.klapp > .e7-ic { flex: none; align-self: center; width: 22px; height: 22px; padding: 3px; border-radius: 7px; color: var(--text2); }
.nz-h1.klapp[aria-expanded="true"] > .e7-ic { background: var(--accent-s); color: var(--e7-sage-d); }
.nz-suche {
display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 10px; padding: 0 8px 0 10px; border-radius: 10px; background: var(--surface);
border: 1px solid var(--border2); color: var(--text3);
}
.nz-suche > .e7-ic { width: 16px; height: 16px; }
.nz-suche input { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; outline: 0; background: none; font: 500 13.5px/1 var(--e7-sans); color: var(--text); }
.nz-suche input::placeholder { color: var(--nz-platzhalter); }
.nz-suche input::-webkit-search-cancel-button { display: none; }
#v-notizen .nz-suche input:focus-visible { outline: 0; }
.nz-suche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-s); }
.nz-suche-weg { width: 20px; height: 20px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #ebe7dd; color: var(--text2); cursor: pointer; }
.nz-suche-weg .e7-ic { width: 12px; height: 12px; }
.nz-bereich { display: flex; gap: 4px; margin-top: 9px; padding: 3px; border-radius: 10px; background: #ebe7dd; }
.nz-bereich[hidden], .nz-sortzeile[hidden], .nz-ziehhinweis[hidden], .nz-suche-weg[hidden] { display: none; }
.nz-bereich button { flex: 1; min-width: 0; padding: 7px 4px; border: 0; border-radius: 8px; background: none; font: 600 12.5px/1 var(--e7-sans); color: var(--text2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-bereich button.an { background: var(--surface); color: var(--e7-sage-d); box-shadow: var(--e7-sh-1), inset 0 0 0 1px var(--border); }
.nz-sortzeile { display: flex; align-items: center; gap: 8px; margin: 6px -8px 0 -9px; }
.nz-sortknopf.klein { flex: 1; min-width: 0; height: 30px; gap: 6px; padding: 0 8px 0 9px; border-color: transparent; background: none; font-size: 12.5px; }
.nz-sortknopf.klein b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nz-sortknopf.klein > .e7-ic:last-child { margin-left: auto; }
.nz-sortknopf.klein:hover, .nz-sortknopf.klein[aria-expanded="true"] { background: var(--hover); border-color: transparent; }
.nz-ziehhinweis { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font: 500 12px/1.2 var(--e7-sans); color: var(--text2); white-space: nowrap; }
.nz-ziehhinweis .e7-ic { width: 15px; height: 15px; color: var(--e7-sage-d); }
.nz-geloescht-hinweis { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font: 500 12.5px/1.45 var(--e7-sans); color: var(--text2); }
.nz-geloescht-hinweis b { color: var(--text); }
.nz-rolle { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 24px; }
.nz-meta { margin: 10px 20px 2px 21px; font: 500 12.5px/1.3 var(--e7-sans); color: var(--text3); }
.nz-gruppe { display: flex; align-items: center; gap: 6px; margin: 12px 20px 4px 21px; font: 650 12.5px/1.2 var(--e7-sans); color: var(--text2); }
.nz-gruppe .e7-ic { width: 14px; height: 14px; }
.nz-gruppe.pin { color: var(--e7-ocker); }
.nz-z { position: relative; display: flex; align-items: center; gap: 11px; margin: 0 10px; padding: 8px 11px 9px; border-radius: 12px; cursor: default; outline: 0; }
.nz-z + .nz-z::before { content: ''; position: absolute; left: 11px; right: 11px; top: 0; height: 1px; background: var(--border); }
.nz-z.an + .nz-z::before, .nz-z:hover + .nz-z::before, .nz-z.an::before, .nz-z:hover::before, .nz-z:focus-visible::before, .nz-z:focus-visible + .nz-z::before { display: none; }
.nz-z:hover { background: rgba(255, 255, 255, .62); }
.nz-z.an { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--e7-sh-1); }
#v-notizen .nz-z:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: -2px; }
.nz-z-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nz-z-t b { font: 600 14.5px/1.3 var(--e7-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-z-unter { margin-top: 1px; font: 500 13px/1.35 var(--e7-sans); color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-z-unter em { font-style: normal; color: var(--text); margin-right: 7px; }
.nz-z-unter i { font-style: normal; }
.nz-z-ort { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: 500 12px/1.2 var(--e7-sans); color: var(--text3); }
.nz-z-ort .e7-ic { width: 13px; height: 13px; }
.nz-z mark { background: var(--nz-such); color: var(--text); border-radius: 3px; padding: 0 1px; }
.nz-daumen { width: 42px; height: 42px; flex: none; border-radius: 9px; background: #ebe7dd center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.nz-daumen.pdf { display: grid; place-items: center; background: var(--e7-ziegel-s); color: var(--e7-ziegel); font: 700 10.5px/1 var(--e7-sans); letter-spacing: .03em; box-shadow: inset 0 0 0 1px rgba(160, 58, 39, .14); }
.nz-daumen.leer { display: grid; place-items: center; color: var(--text2); }
.nz-daumen.leer .e7-ic { width: 20px; height: 20px; }
.nz-fort { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent-s); color: var(--e7-sage-d); font: 650 11.5px/1 var(--e7-sans); }
.nz-fort .e7-ic { width: 12px; height: 12px; }
/* Maus über einer Zeile (oder Tastatur): Stecknadel und „…“ rechts statt Mini-Bild/Stand – wie Paket C */
.nz-schnell { display: none; flex: none; gap: 4px; }
.nz-z:hover .nz-schnell, .nz-z:focus-visible .nz-schnell, .nz-z.menue-offen .nz-schnell, .nz-z:focus-within .nz-schnell { display: flex; }
.nz-z:is(:hover, :focus-visible, .menue-offen, :focus-within) :is(.nz-daumen, .nz-fort) { display: none; }
.nz-schnell button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: var(--surface); color: var(--text2); box-shadow: inset 0 0 0 1px var(--border2); cursor: pointer; }
.nz-schnell button .e7-ic { width: 16px; height: 16px; }
.nz-schnell button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text3); }
.nz-schnell .nz-nadel.an { color: var(--e7-ocker); background: var(--e7-ocker-s); box-shadow: inset 0 0 0 1px #e6d3a6; }
.nz-schnell .nz-mehr[aria-expanded="true"] { color: var(--text); box-shadow: inset 0 0 0 1px var(--text3); }
/* Griff in „Eigene Reihenfolge“ */
.nz-griff { position: absolute; left: -9px; top: 50%; width: 12px; height: 24px; margin-top: -12px; display: grid; place-items: center; color: var(--text2); cursor: grab; opacity: .85; touch-action: none; }
.nz-griff .e7-ic { width: 14px; height: 14px; }
.nz-z:hover .nz-griff, .nz-z:focus-visible .nz-griff { opacity: 1; color: var(--e7-sage-d); }
.nz-rolle .nz-z { touch-action: pan-y; }
.nz-z.weg .nz-z-unter em { color: var(--text2); }
.nz-zurueckholen { flex: none; }
.nz-zurueckholen .e7-ic { width: 15px; height: 15px; }
.nz-z.entwurf b { color: var(--text2); }
/* ── 14.4 · Blatt + Leiste ── */
.nz-papier {
position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 12px 12px 0 2px; background: var(--surface);
border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: var(--e7-sh-2); overflow: hidden;
}
.nz-papier.leer { justify-content: center; }
.nz-papier.leer .nz-leer { padding-bottom: 12vh; }
.nz-papier.leer .nz-leer h3 { font-size: 20px; }
.nz-leiste { display: flex; align-items: center; gap: 4px; height: 52px; flex: none; padding: 0 12px 0 14px; }
.nz-trenn { width: 1px; height: 20px; margin: 0 6px; background: var(--border); }
.nz-ordnerchip {
display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 9px; border: 0; border-radius: 9px; background: none;
font: 600 13px/1 var(--e7-sans); color: var(--text2); white-space: nowrap; cursor: pointer; max-width: 240px;
}
.nz-ordnerchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nz-ordnerchip .e7-ic { width: 16px; height: 16px; }
.nz-ordnerchip > .e7-ic:last-child { width: 14px; height: 14px; color: var(--text3); }
.nz-ordnerchip:hover:not(:disabled), .nz-ordnerchip[aria-expanded="true"] { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); }
.nz-ordnerchip:disabled { cursor: default; color: var(--text2); }
#nzStatusOrt { display: inline-flex; align-items: center; min-width: 0; }
.nz-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font: 500 12.5px/1 var(--e7-sans); color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nz-status .e7-ic { width: 15px; height: 15px; color: var(--accent); }
.nz-status .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-s); }
.nz-status.fehler { color: var(--e7-ziegel); font-weight: 600; }
.nz-status.fehler .e7-ic { color: var(--e7-ziegel); }
.nz-status.fehler .nz-link { color: var(--e7-ziegel); font-size: 12.5px; }
.nz-status.konflikt { color: var(--e7-ocker); font-weight: 600; }
.nz-status.konflikt .e7-ic { color: var(--e7-ocker); }
.nz-lk { width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--text2); cursor: pointer; }
.nz-lk .e7-ic { width: 19px; height: 19px; }
.nz-lk:hover:not(:disabled), .nz-lk[aria-expanded="true"] { background: var(--surface2); color: var(--text); }
.nz-lk:disabled { opacity: .45; cursor: default; }
.nz-lk.an { color: var(--e7-ocker); background: var(--e7-ocker-s); }
.nz-lk .aa { font: 600 16px/1 var(--e7-serif); letter-spacing: -.02em; }
.nz-lk .aa small { font: 600 12.5px/1 var(--e7-sans); }
.nz-lt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; flex: none; border: 0; border-radius: 9px; background: none; color: var(--text2); font: 600 13px/1 var(--e7-sans); white-space: nowrap; cursor: pointer; }
.nz-lt .e7-ic { width: 18px; height: 18px; }
.nz-lt > .e7-ic:last-child:not(:first-child) { width: 13px; height: 13px; color: var(--text3); }
.nz-lt:hover, .nz-lt[aria-expanded="true"] { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }
.nz-lt:disabled, .nz-lt:disabled:hover { opacity: .45; cursor: default; background: none; color: var(--text2); box-shadow: none; }
.nz-konflikt { margin: 0 14px 6px; padding: 11px 13px; border-radius: 12px; background: #fdf7e8; box-shadow: inset 0 0 0 1px #ecd9ae; font: 500 13px/1.45 var(--e7-sans); color: #5b4510; }
.nz-konflikt b { font-weight: 650; }
.nz-konflikt-x { display: block; margin-top: 3px; } /* Nachbesserung D2: Blatt gesperrt / Text gesichert */
.nz-papier.gesperrt .nz-pm, .nz-papier.gesperrt .nz-titel { cursor: default; }
.nz-knoepfe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.nz-geloescht-band { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 14px 6px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); font: 500 13px/1.4 var(--e7-sans); color: var(--text2); }
.nz-geloescht-band > .e7-ic { width: 17px; height: 17px; color: var(--text3); }
.nz-geloescht-band b { color: var(--text); font-weight: 650; }
.nz-rollbar { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.nz-blattinhalt { position: relative; max-width: 704px; margin: 0 auto; padding: 4px 40px 120px; }
.nz-datum { margin: 6px 0 20px; text-align: center; font: 500 12.5px/1.2 var(--e7-sans); color: var(--text3); }
#v-notizen .nz-titel {
display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: none;
font: 600 34px/1.15 var(--e7-serif); letter-spacing: -.014em; color: var(--text);
}
.nz-titel::placeholder { color: var(--nz-platzhalter-titel); }
#v-notizen .nz-titel:focus-visible { outline: 0; }
.nz-papier.nurlesen .nz-titel, .nz-papier.nurlesen .nz-inhalt { color: var(--text2); }
.nz-leerhilfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nz-leerhilfe[hidden] { display: none; }
.nz-leerhilfe button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 9px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); font: 600 13px/1 var(--e7-sans); color: var(--text2); cursor: pointer; }
.nz-leerhilfe button .e7-ic { width: 16px; height: 16px; color: var(--e7-sage-d); }
.nz-leerhilfe button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }
.nz-fehlt { margin: 6px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--e7-ziegel-s); color: #7a2a1b; font: 500 13px/1.45 var(--e7-sans); }
.nz-nurtext { white-space: pre-wrap; font: 400 16px/1.62 var(--e7-sans); color: var(--text2); }
/* ── 14.5 · Inhalt (Editor-Baustein) ── */
.nz-inhalt { color: var(--text); font: 400 16px/1.62 var(--e7-sans); }
.nz-pm { outline: 0; min-height: 3em; caret-color: var(--text); }
#v-notizen .nz .nz-pm:focus-visible, #v-notizen .nz .nz-pm:focus { outline: 0; }
.nz-pm > :first-child { margin-top: 0; }
.nz-pm p { margin: 0 0 .85em; }
.nz-pm p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--nz-platzhalter); pointer-events: none; }
.nz-pm strong { font-weight: 620; }
.nz-pm h1 { margin: 1.3em 0 .45em; font: 600 26px/1.2 var(--e7-serif); letter-spacing: -.01em; }
.nz-pm h2 { margin: 1.35em 0 .45em; font: 600 22px/1.25 var(--e7-serif); letter-spacing: -.006em; }
.nz-pm h3 { margin: 1.2em 0 .4em; font: 600 18px/1.3 var(--e7-serif); }
.nz-pm a { color: var(--e7-sage-d); text-decoration: underline; text-underline-offset: 2px; }
.nz-pm ul:not([data-type="taskList"]), .nz-pm ol { margin: 0 0 1em; padding-left: 1.45em; }
.nz-pm ul:not([data-type="taskList"]) li, .nz-pm ol li { margin: .3em 0; padding-left: .2em; }
.nz-pm li::marker { color: var(--text3); }
.nz-pm li > p { margin: 0; }
.nz-pm s { text-decoration-thickness: 1.5px; color: var(--text2); }
.nz-pm mark { background: var(--nz-such); color: inherit; border-radius: 3px; padding: 0 1px; }
.nz-pm code { padding: 1px 4px; border-radius: 4px; background: #f2f0eb; font: 400 .9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.nz-pm pre { margin: 0 0 1em; padding: 10px 12px; border-radius: 10px; background: #f2f0eb; white-space: pre-wrap; }
.nz-pm pre code { padding: 0; background: none; }
.nz-pm blockquote { margin: 0 0 1em; padding: 2px 0 2px 14px; border-left: 3px solid var(--border2); color: var(--text2); }
.nz-pm hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--border); }
.nz-pm hr.ProseMirror-selectednode { border-top-color: var(--accent); }
/* Checkliste: runde Häkchen wie im Entwurf (TipTap zeichnet label > input) */
.nz-pm ul[data-type="taskList"] { list-style: none; margin: .2em 0 1.05em; padding: 0; }
.nz-pm ul[data-type="taskList"] ul[data-type="taskList"] { margin: .2em 0 .2em 4px; }
.nz-pm ul[data-type="taskList"] > li { display: flex; align-items: flex-start; gap: 11px; margin: .38em 0; }
.nz-pm ul[data-type="taskList"] > li > label { flex: none; display: flex; margin-top: 2px; cursor: pointer; user-select: none; }
.nz-pm ul[data-type="taskList"] > li > label input {
appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; background: var(--surface) center / 13px no-repeat;
box-shadow: inset 0 0 0 1.6px var(--nz-kreis); cursor: pointer;
}
.nz-pm ul[data-type="taskList"] > li > label input:checked {
background-color: var(--accent); box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.nz-pm ul[data-type="taskList"] > li > label input:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 2px; }
.nz-pm ul[data-type="taskList"] > li > div { flex: 1; min-width: 0; }
.nz-pm ul[data-type="taskList"] > li > div > p { margin: 0; }
.nz-pm ul[data-type="taskList"] > li[data-checked="true"] > div { color: var(--text3); }
/* Tabelle wie Dokumente */
.nz-pm table { width: 100%; margin: 1.1em 0 1.4em; border-collapse: collapse; table-layout: auto; font: 400 14.5px/1.45 var(--e7-sans); }
.nz-pm .tableWrapper { overflow-x: auto; }
.nz-pm th, .nz-pm td { position: relative; padding: 8px 12px; border: 1px solid #e4e1d9; text-align: left; vertical-align: top; min-width: 40px; }
.nz-pm th { background: #f2f0eb; font-weight: 600; }
.nz-pm td > p, .nz-pm th > p { margin: 0; }
.nz-pm .selectedCell::after { content: ''; position: absolute; inset: 0; background: rgba(78, 122, 100, .12); pointer-events: none; }
/* Bild und Anhang */
.nz-pm .nz-bild { margin: 1.1em 0 1.3em; }
.nz-pm .nz-bild-rahmen { border-radius: 12px; overflow: hidden; line-height: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); width: fit-content; max-width: 100%; }
.nz-pm .nz-bild-rahmen img { display: block; max-width: 100%; height: auto; }
.nz-pm .nz-bild-fehlt { padding: 18px; line-height: 1.4; font: 500 13px/1.4 var(--e7-sans); color: var(--text2); background: var(--surface2); }
.nz-pm .nz-bildtext { margin-top: 7px; font: 500 13px/1.45 var(--e7-sans); color: var(--text3); }
.nz-pm .nz-bild.ProseMirror-selectednode .nz-bild-rahmen { box-shadow: 0 0 0 2.5px var(--accent); }
.nz-pm .nz-anhang { display: flex; align-items: center; gap: 12px; margin: 1em 0 1.2em; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); max-width: 460px; }
.nz-pm .nz-anhang.ProseMirror-selectednode { box-shadow: 0 0 0 2.5px var(--accent); }
.nz-pm .nz-anhang-typ { width: 38px; height: 44px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--e7-ziegel-s); color: var(--e7-ziegel); font: 700 10.5px/1 var(--e7-sans); letter-spacing: .03em; }
.nz-pm .nz-anhang-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nz-pm .nz-anhang-t b { font: 600 14px/1.3 var(--e7-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-pm .nz-anhang-t small { font: 500 12.5px/1.3 var(--e7-sans); color: var(--text3); }
.nz-pm .nz-anhang-auf { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 var(--e7-sans); color: var(--e7-sage-d); text-decoration: none; cursor: pointer; }
.nz-pm .nz-anhang-auf:hover { text-decoration: underline; }
.nz-pm .ProseMirror-gapcursor::after { border-top-color: var(--text); }
::highlight(nz-such) { background-color: var(--nz-such); color: var(--text); }
/* ── 14.6 · Blase beim Markieren + „/“-Menü (am body, position: fixed) ── */
.eb-blase {
position: fixed; z-index: 10060; display: flex; align-items: center; gap: 1px; padding: 4px; border-radius: 12px; background: var(--surface, #fff);
border: 1px solid var(--border); box-shadow: var(--nz-pop); white-space: nowrap; font-family: var(--e7-sans);
}
.eb-blase[hidden] { display: none; }
.eb-blase::after { content: ''; position: absolute; left: var(--spitze, 50%); bottom: -6px; width: 11px; height: 11px; margin-left: -5.5px; background: var(--surface, #fff);
border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.eb-blase.unten::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.eb-bk { min-width: 32px; height: 32px; padding: 0 7px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text); font: 650 14.5px/1 var(--e7-sans); cursor: pointer; }
.eb-bk .e7-ic { width: 18px; height: 18px; color: var(--text2); }
.eb-bk:hover { background: var(--hover); }
.eb-bk.an { background: var(--accent-s); color: var(--e7-sage-d); }
.eb-bk.an .e7-ic { color: var(--e7-sage-d); }
.eb-bk:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 1px; }
.eb-bk i { font-family: var(--e7-serif); }
.eb-bk u, .eb-bk s { font-weight: 500; text-underline-offset: 3px; }
.eb-wahl { display: inline-flex; gap: 5px; padding: 0 8px 0 10px; font: 600 13px/1 var(--e7-sans); color: var(--text2); }
.eb-wahl .e7-ic { width: 14px; height: 14px; color: var(--text3); }
.eb-tr { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.eb-art { position: absolute; left: 4px; top: calc(100% + 6px); min-width: 170px; padding: 5px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: var(--nz-pop); }
.eb-art-p { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font: 500 13.5px/1.2 var(--e7-sans); color: var(--text); cursor: pointer; }
.eb-art-p:hover { background: var(--hover); }
.eb-art-p.an { background: var(--accent-s); color: var(--e7-sage-d); font-weight: 600; }
.eb-link { display: flex; align-items: center; gap: 4px; }
.eb-link input { width: 230px; height: 30px; padding: 0 9px; border: 1px solid var(--border2); border-radius: 8px; font: 500 13px/1 var(--e7-sans); color: var(--text); outline: 0; }
.eb-link input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-s); }
.eb-wort { min-width: 0; padding: 0 9px; font: 600 12.5px/1 var(--e7-sans); color: var(--e7-sage-d); }
.eb-schraeg {
position: fixed; z-index: 10060; display: flex; flex-direction: column; width: 300px; overflow-y: auto; padding: 6px; border-radius: 14px;
background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: var(--nz-pop); font-family: var(--e7-sans);
}
.eb-schraeg[hidden] { display: none; }
.eb-schraeg.oben { box-shadow: 0 -12px 34px rgba(38, 36, 30, .14), 0 2px 7px rgba(38, 36, 30, .08); }
.eb-sm-kopf { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; font: 650 11.5px/1 var(--e7-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.eb-sm-kopf span:last-child { letter-spacing: 0; text-transform: none; font-weight: 500; }
.eb-sm { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 8px; border-radius: 9px; cursor: pointer; }
.eb-kach { width: 28px; height: 28px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); color: var(--text2); font: 650 12.5px/1 var(--e7-serif); }
.eb-kach .e7-ic { width: 16px; height: 16px; }
.eb-sm b { flex: 1; min-width: 0; font: 600 13.5px/1.25 var(--e7-sans); color: var(--text); white-space: nowrap; }
.eb-sm b small { margin-left: 6px; font: 500 12px/1 var(--e7-sans); color: var(--text3); }
.eb-sm kbd { flex: none; padding: 3px 5px; border-radius: 5px; background: none; box-shadow: inset 0 0 0 1px var(--border); font: 500 11px/1 var(--e7-sans); color: var(--text3); }
.eb-sm.an { background: var(--accent-s); }
.eb-sm.an .eb-kach { background: var(--surface); color: var(--e7-sage-d); box-shadow: inset 0 0 0 1px rgba(78, 122, 100, .3); }
.eb-sm-trenn { height: 1px; margin: 4px 8px; background: var(--border); flex: none; }
.eb-sm-leer { padding: 10px 8px; font: 500 13px/1.3 var(--e7-sans); color: var(--text2); }
.eb-sm-fuss { display: flex; gap: 12px; padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--border); font: 500 11.5px/1.2 var(--e7-sans); color: var(--text3); flex: none; }
.eb-sm-fuss kbd { margin-right: 3px; padding: 2px 5px; border-radius: 5px; background: #ebe7dd; font: 600 10.5px/1 var(--e7-sans); color: var(--text2); }
/* ── 14.7 · Menüs, Rückfrage, Ziehen ── */
.nz-menue { max-height: calc(100vh - 16px); overflow-y: auto; }
.nz-menue .e7c-mp > .e7-ic { width: 17px; height: 17px; flex: none; color: var(--e7-sage-d); }
/* 2026-10-21 (Paket E): rote Punkte, „›“ und Zurück der Notizen-Menüs kommen aus 15.1 (.tk-rot, .tk-m-weiter, .tk-m-zurueck – App.Kontext) */
.nz-menue .e7c-mp[aria-disabled="true"] small { color: var(--text2); }
.nz-menue .e7c-m-kopf { display: flex; align-items: center; gap: 6px; }
.nz-aa-menue { width: 260px; }
.nz-ordner-klapp { width: 270px; padding: 6px 0; }
.nz-ordner-klapp .nz-o { margin: 1px 6px; }
.nz-ordner-klapp .nz-o-gruppe { margin: 10px 16px 4px 17px; }
.nz-ordner-klapp .nz-neu-ordner { margin: 4px 8px 2px; }
.nz-ordner-klapp .e7c-m-trenn { margin: 6px 10px; }
.nz-ordner-klapp .nz-o-haupt:hover { background: var(--hover); }
.nz-ordner-klapp .nz-o.an .nz-o-haupt { background: var(--surface2); }
.nz-ordner-klapp .nz-o-feld { margin: 4px 8px; }
.nz-ordner-klapp .nz-o-feld input { font: 600 13.5px/1.25 var(--e7-sans); }
.nz-ordner-klapp :where(button):focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: -2px; }
.nz-schleier { position: fixed; inset: 0; z-index: 10070; display: grid; place-items: center; background: rgba(31, 30, 28, .22); }
.nz-frage { width: 360px; max-width: calc(100vw - 32px); padding: 18px 18px 16px; border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--border);
box-shadow: 0 22px 46px rgba(38, 36, 30, .2), 0 4px 10px rgba(38, 36, 30, .08); font-family: var(--e7-sans); }
.nz-frage h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--e7-serif); color: var(--text); }
.nz-frage p { margin: 0; font: 400 13.5px/1.5 var(--e7-sans); color: var(--text2); }
.nz-frage p b { color: var(--text); font-weight: 650; }
.nz-frage .nz-knoepfe { justify-content: flex-end; gap: 8px; margin-top: 16px; }
.nz-frage .nz-knopf { height: 36px; }
.nz-frage .nz-knopf .e7-ic { width: 15px; height: 15px; }
.nz-frage :where(button):focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 2px; }
.nz-geist > .e7-ic { width: 18px; height: 18px; margin-left: 4px; color: var(--text2); }
.nz-geist-ziel { color: var(--e7-sage-d); font-weight: 650 !important; }
.nz-geist.aus .nz-geist-ziel { display: none; }
/* ── 14.8 · Startseite, Karte „Notizen“ ── */
.nz-kh-zahl { margin-left: 8px; font: 500 13px/1 var(--e7-sans); color: var(--text3); white-space: nowrap; }
#home-shell .nd .dash-note.nz-hm { align-items: center; cursor: pointer; }
#home-shell .dash-note.nz-hm .nic { position: relative; display: grid; place-items: center; overflow: visible; }
#home-shell .dash-note.nz-hm .nic .e7-ic { width: 18px; height: 18px; }
.dash-note .nic.nz-hm-check { background: var(--accent-s); color: var(--e7-sage-d); }
.dash-note .nic.nz-hm-pdf { background: var(--e7-ziegel-s); color: var(--e7-ziegel); }
.dash-note .nic.nz-hm-pdf b { font: 700 10px/1 var(--e7-sans); letter-spacing: .03em; }
.dash-note .nic.nz-hm-an::after {
content: ''; position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%;
background: #f8eed8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385590c' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v4.5'/%3E%3Cpath d='M8.8 10.6V4.5h6.4v6.1l2.6 3.9H6.2z'/%3E%3Cpath d='M7.8 3h8.4'/%3E%3C/svg%3E") center / 10px no-repeat;
box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .18);
}
.dash-note.nz-hm .nt { min-width: 0; flex: 1; }
.dash-note.nz-hm .nt .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-hm-zeit { flex: none; margin-left: 8px; font: 500 12.5px/1 var(--e7-sans); color: var(--text2); font-variant-numeric: tabular-nums; }
.dash-note.nz-hm:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: -2px; }
/* ── 14.9 · schmale Fenster (unter 1150 px): zwei Spalten, Ordner am Listentitel; „Aa“ (Textart + Erdtöne) bleibt, „Checkliste“ nur als Zeichen ── */
@media (max-width: 1150px) {
#v-notizen .nz { grid-template-columns: 316px minmax(0, 1fr); }
#v-notizen .nz-ordner { display: none; }
.nz-liste-kopf { padding-left: 18px; }
.nz-leiste { gap: 2px; padding: 0 8px 0 10px; }
.nz-leiste #nzCheck { padding: 0 8px; }
.nz-leiste #nzCheck .nz-lt-t { display: none; }
.nz-trenn { margin: 0 4px; }
.nz-blattinhalt { padding: 4px 32px 120px; }
}
@media (max-width: 1150px) and (max-width: 1060px) {
.nz-ordnerchip { max-width: 150px; }
.nz-status { margin-left: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
.nz-z, .nz-o-haupt, .nz-schnell button { transition: background .12s, box-shadow .12s; }
}
/* ================================================================
15 · PAKET E „Rechtsklick-Menü“ (2026-10-21 (Paket E)) – gemeinsames Kontextmenü-Bauteil App.Kontext (team.js v266)
Dieselben Bausteine wie das Menü aus Abschnitt 13.2 (.e7c-menue, Paket C) und die Notizen-Menüs (14.7) – alle Menüs von
App.Kontext tragen .tk-menue (die Notizen zusätzlich .nz-menue). Markiert wird der Eintrag, dessen Menü offen ist (.tk-offen).
================================================================ */
/* ── 15.1 · Menü: höchstens Fensterhöhe (blättert dann), Kopf kürzt lange Namen, rote Punkte, Untermenü „›“, Zurück ── */
.tk-menue { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.tk-menue:focus { outline: none; } /* mit der Maus geöffnet: der Fokus liegt im Menü, noch kein Punkt hervorgehoben (wie ein Menü des Systems) */
.tk-menue .e7c-m-kopf { display: flex; align-items: center; gap: 6px; }
.tk-m-kopf-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-menue .e7c-mp.tk-rot, .tk-menue .e7c-mp.tk-rot > .e7-ic { color: var(--e7-ziegel); }
.tk-menue .e7c-mp[aria-disabled="true"] small { color: var(--text2); }
.tk-m-weiter { flex: none; color: var(--text3); display: grid; }
.tk-m-weiter .e7-ic { width: 15px; height: 15px; }
.tk-m-zurueck { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--text2); cursor: pointer; }
.tk-m-zurueck .e7-ic { width: 16px; height: 16px; }
.tk-m-zurueck:hover { background: var(--hover); }
.tk-m-zurueck:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 1px; }
/* ── 15.2 · Eintrag mit offenem Menü: leise markiert (wie beim Darüberfahren), Karten mit Salbei-Rand ── */
#v-files .fx-zeile.tk-offen, #v-files .fx-zk.tk-offen, #v-files .fx-okachel.tk-offen,
#v-projekte .pj-wiki-side-item.tk-offen, #v-projekte .pj-item.tk-offen { background: var(--hover); }
#v-files .fx-karte.tk-offen, #v-projekte .e7-pk.tk-offen, #v-projekte .pj-file.tk-offen { box-shadow: 0 0 0 2px var(--e7-sage-d); }
/* Notiz-Ordner mit offenem Menü (Nachbesserung 21.10.): wie beim Darüberfahren, „…“ sichtbar, die Zahl rückt zur Seite */
#nzOrdner .nz-o.tk-offen:not(.an) .nz-o-haupt { background: rgba(255, 255, 255, .7); }
#nzOrdner .nz-o.tk-offen .nz-o-mehr { opacity: 1; }
#nzOrdner .nz-o.tk-offen:has(.nz-o-mehr) .nz-o-haupt small { visibility: hidden; }
/* Projektdateien sind per Tastatur erreichbar (Kontextmenü-Taste / Umschalt+F10): sichtbarer Rahmen */
#v-projekte .pj-file:focus-visible { outline: 2.5px solid var(--e7-fokus); outline-offset: 2px; }
/* ── 12.10 · T8 2026-11-03: Startseite dichter, ab 1200 × 700 px auf einer Seite ohne Rollen ──
Wie „95 % Zoom“, aber über Abstände und Schriftgrößen (kein zoom/transform): Titelbild flacher (Gruß 28–32 px, Wetter in zwei Spalten),
Kennzahlen schmaler, Karten in zwei Zeilen (app.html .t8-raster: oben Als Nächstes fällig · Nächste 7 Tage · Zuletzt verwendet, unten
Projekte · Nachrichten · Notizen · Posteingang), Bereiche als eine Zeile. Ab 700 px Fensterhöhe füllt die Startseite genau das Fenster,
die Zeilen teilen sich den Rest und jede Karte rollt bei Bedarf in sich (Ziel 1440 × 900 und 1920 × 1080). Ausgeblendete Karten (Rolle,
kein Postfach) geben ihren Platz an die Nachbarn ab. Unter 1200 px Breite bzw. 700 px Höhe: wie bisher untereinander, die Seite rollt. */
#home-shell .nd-raster.t8-raster { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
#home-shell .t8-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#home-shell .t8-zeile > .e7-woche-karte { grid-column: 1 / -1; }
@media (max-width: 1150px) { #home-shell .t8-zeile { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) {
#home-shell .nd-hero { gap: 22px; padding: 14px max(28px, calc((100% - 1720px) / 2)) 34px; }
#home-shell .nd-hero-datum { font-size: 11.5px; }
#home-shell .nd-hero-gruss { margin: 4px 0 3px; font-size: clamp(28px, 2.1vw, 32px); }
#home-shell .nd-hero-tag { font-size: 14px; }
#home-shell .nd-hero-aktionen { margin-top: 10px; gap: 6px; }
#home-shell .nd-hero .dash-btn { height: 32px; padding: 0 12px; font-size: 13px; }
#home-shell .nd-hero .dash-btn svg { width: 15px; height: 15px; }
/* Wetter: Kopf, dann „jetzt“ links und Stunden rechts, Hinweis darunter – halbe Höhe, gleiche Angaben */
#home-shell .nd-wetter { width: min(540px, 44%); padding: 9px 12px 10px; }
#home-shell #hm-weather-body { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "kopf kopf" "jetzt stunden" "hinweis hinweis";
column-gap: 14px; align-items: center; }
#home-shell #hm-weather-body > .nd-w-kopf { grid-area: kopf; }
#home-shell #hm-weather-body > .nd-w-jetzt { grid-area: jetzt; margin: 4px 0 6px; gap: 8px; }
#home-shell #hm-weather-body > .nd-w-stunden { grid-area: stunden; margin: 4px 0 6px; }
#home-shell #hm-weather-body > .nd-w-hinweis { grid-area: hinweis; margin-top: 0; padding: 4px 9px; font-size: 12px; }
#home-shell #hm-weather-body > .nd-w-leer, #home-shell #hm-weather-body > .hm-widget-loading { grid-column: 1 / -1; }
#home-shell .nd-w-grad { font-size: 34px; }
#home-shell .nd-w-icon svg { width: 30px; height: 30px; }
#home-shell .nd-w-besch { font-size: 13.5px; }
#home-shell .nd-w-klein { font-size: 11.5px; }
#home-shell .nd-w-stunden > div { padding: 4px 0 5px; }
.e7-bogen { margin-top: -20px; padding: 12px max(24px, calc((100% - 1720px) / 2)) 14px; }
#home-shell .nd-kpis { margin-bottom: 12px; }
#home-shell .nd-kpi { gap: 10px; padding: 6px 14px; }
#home-shell .nd-kpi-ic { width: 28px; height: 28px; border-radius: 9px; }
#home-shell .nd-kpi-ic svg { width: 15px; height: 15px; }
#home-shell .nd-kpi-t b { font-size: 16px; }
#home-shell .nd-kpi-t small { font-size: 12px; }
/* Kartenzeilen: oben fällig : Woche : Dateien ≈ 4,6 : 6 : 2,4, unten vier gleich breite Karten */
#home-shell .nd-raster.t8-raster { gap: 12px; }
#home-shell .t8-zeile { display: flex; gap: 12px; align-items: stretch; }
#home-shell .t8-zeile > .nd-karte { flex: 1 1 0; min-width: 0; padding: 0 12px 10px; }
#home-shell .t8-oben > .e7-faellig-karte { flex-grow: 4.4; }
#home-shell .t8-oben > .e7-woche-karte { flex-grow: 5.8; }
#home-shell .t8-oben > .t8-k-dateien { flex-grow: 3; }
#home-shell .t8-zeile .nd-kh { padding: 9px 2px 6px; }
#home-shell .t8-zeile .nd-kh h3 { font-size: 16.5px; white-space: nowrap; }
#home-shell .t8-zeile .nd-mehr { font-size: 12px; white-space: nowrap; margin-left: auto; }
#home-shell .t8-zeile .e7-zeilen, #home-shell .t8-zeile .e7-woche { margin: 0 -12px -10px; }
#home-shell .t8-zeile .dash-notes-list { margin: 0 -12px -10px; }
.e7-fz { gap: 11px; min-height: 42px; padding: 4px 14px; }
.e7-fz-meta { gap: 10px; font-size: 12px; }
.e7-prio { min-width: 0; } .e7-fz-dat { min-width: 50px; }
.e7-pz { gap: 10px; min-height: 44px; padding: 4px 14px; }
.e7-tag { min-height: 0; padding: 6px 5px 8px; }
.e7-tag-kopf { margin: 0 0 5px 2px; }
.e7-ter { margin-bottom: 4px; padding: 4px 6px 5px; font-size: 11.5px; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.e7-ter time { font-size: 11px; }
#home-shell .nd .dash-chat, #home-shell .nd-mailzeile { padding: 6px 4px; }
#home-shell .nd .dash-note { min-height: 42px; padding: 5px 14px; }
#home-shell .dash-note .nic { width: 28px; height: 28px; border-radius: 9px; }
#home-shell .dash-notes-list > .dash-ghost { padding: 8px 14px 9px; }
/* Zuletzt verwendet: schmale Karte → Dateien untereinander */
#home-shell .t8-k-dateien .dash-files-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
#home-shell .t8-k-dateien .dash-file { padding: 7px 9px; }
/* Bereiche: eine Zeile, Symbol · Titel · Kennzahlen (die Beschreibung steht im jeweiligen Bereich) */
#home-shell .nd-ueber { margin: 12px 2px 8px; }
#home-shell .nd-ueber h2 { font-size: 16.5px; }
#home-shell .nd-bereiche.dash-tools { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* Kachel als umbrechende Zeile: passen die Kennzahlen nicht neben den Titel, rutschen sie darunter (nie abgeschnitten) */
#home-shell .nd .dash-tool { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; padding: 9px 14px; text-align: left; }
#home-shell .nd .dash-tool .dash-tic { width: 28px; height: 28px; flex: none; }
#home-shell .nd .dash-tool h3 { font-size: 15.5px; white-space: nowrap; }
#home-shell .nd .dash-tool .desc { display: none; }
#home-shell .nd .dash-tool .dash-kpis { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
#home-shell .nd .dash-tool .dash-kpi { white-space: nowrap; }
#home-shell .nd .dash-tool .arrow { display: none; }
}
@media (min-width: 1200px) and (min-height: 700px) {
/* eine Seite: Titelbild + Blatt füllen das Fenster, die beiden Kartenzeilen teilen sich den Rest, Karten rollen in sich */
#home-shell .dash-wrap.nd { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
#home-shell .nd-hero { flex: none; }
#home-shell .e7-bogen { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#home-shell .nd-kpis, #home-shell .nd-ueber, #home-shell .nd-bereiche { flex: none; }
#home-shell .nd-raster.t8-raster { flex: 1 1 auto; min-height: 0; }
#home-shell .t8-zeile { flex: 1 1 0; min-height: 190px; }
#home-shell .t8-oben { flex-grow: 1.08; }
#home-shell .t8-zeile > .nd-karte { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#home-shell .t8-zeile > .nd-karte > .nd-kh { flex: none; }
#home-shell .t8-zeile > .nd-karte > :not(.nd-kh) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#home-shell .t8-zeile > .nd-karte > .nd-mail-mehr { flex: none; }
#home-shell .t8-zeile .e7-woche { grid-template-rows: minmax(100%, max-content); } /* Tagesspalten (auch „heute“) reichen bis unten */
}