/* Notenbank Styles – Catppuccin (https://catppuccin.com) Drei Flavors via . Komponenten verwenden direkt die Catppuccin-Töne als --ctp-* (Base, Mantle, Crust, Surface0–2, Overlay0–2, Subtext0/1, Text + Akzentfarben wie mauve, red, yellow, flamingo, sapphire, teal). Abgeleitete Tönungen als --tint-. Der frühere --rp-*-Rollen-Layer wurde entfernt (Light/Latte als Referenz vereinheitlicht). */ /* ===== Latte (hell, Standard) ===== */ :root, :root[data-theme="latte"] { --ctp-rosewater: #dc8a78; --ctp-flamingo: #dd7878; --ctp-pink: #ea76cb; --ctp-mauve: #8839ef; --ctp-red: #d20f39; --ctp-maroon: #e64553; --ctp-peach: #fe640b; --ctp-yellow: #df8e1d; --ctp-green: #40a02b; --ctp-teal: #179299; --ctp-sky: #04a5e5; --ctp-sapphire: #209fb5; --ctp-blue: #1e66f5; --ctp-lavender: #7287fd; --ctp-text: #57534a; --ctp-subtext1: #66625a; --ctp-subtext0: #78736a; --ctp-overlay2: #8a8479; --ctp-overlay1: #9c9588; --ctp-overlay0: #ada597; --ctp-surface2: #c6bdac; --ctp-surface1: #d8d1c2; --ctp-surface0: #e7e0d2; --ctp-base: #faf6ee; --ctp-mantle: #f2ede3; --ctp-crust: #ece6dc; --on-akzent: var(--ctp-base); } /* ===== Frappé (dunkel) ===== */ :root[data-theme="frappe"] { --ctp-rosewater: #f2d5cf; --ctp-flamingo: #eebebe; --ctp-pink: #f4b8e4; --ctp-mauve: #ca9ee6; --ctp-red: #e78284; --ctp-maroon: #ea999c; --ctp-peach: #ef9f76; --ctp-yellow: #e5c890; --ctp-green: #a6d189; --ctp-teal: #81c8be; --ctp-sky: #99d1db; --ctp-sapphire: #85c1dc; --ctp-blue: #8caaee; --ctp-lavender: #babbf1; --ctp-text: #c6d0f5; --ctp-subtext1: #b5bfe2; --ctp-subtext0: #a5adce; --ctp-overlay2: #949cbb; --ctp-overlay1: #838ba7; --ctp-overlay0: #737994; --ctp-surface2: #626880; --ctp-surface1: #51576d; --ctp-surface0: #414559; --ctp-base: #303446; --ctp-mantle: #292c3c; --ctp-crust: #232634; --on-akzent: var(--ctp-base); } /* ===== Mocha (sehr dunkel) ===== */ :root[data-theme="mocha"] { --ctp-rosewater: #f5e0dc; --ctp-flamingo: #f2cdcd; --ctp-pink: #f5c2e7; --ctp-mauve: #cba6f7; --ctp-red: #f38ba8; --ctp-maroon: #eba0ac; --ctp-peach: #fab387; --ctp-yellow: #f9e2af; --ctp-green: #a6e3a1; --ctp-teal: #94e2d5; --ctp-sky: #89dceb; --ctp-sapphire: #74c7ec; --ctp-blue: #89b4fa; --ctp-lavender: #b4befe; --ctp-text: #cdd6f4; --ctp-subtext1: #bac2de; --ctp-subtext0: #a6adc8; --ctp-overlay2: #9399b2; --ctp-overlay1: #7f849c; --ctp-overlay0: #6c7086; --ctp-surface2: #585b70; --ctp-surface1: #45475a; --ctp-surface0: #313244; --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b; --on-akzent: var(--ctp-base); } /* Abgeleitete Töne (passen sich automatisch der Variante an) */ :root, :root[data-theme] { --akzent: var(--ctp-mauve); --tint-mauve: color-mix(in srgb, var(--ctp-mauve) 14%, transparent); --tint-blue: color-mix(in srgb, var(--ctp-blue) 14%, transparent); --tint-rosewater: color-mix(in srgb, var(--ctp-rosewater) 24%, transparent); --tint-green: color-mix(in srgb, var(--ctp-green) 16%, transparent); --tint-sapphire: color-mix(in srgb, var(--ctp-sapphire) 12%, transparent); --tint-teal: color-mix(in srgb, var(--ctp-teal) 16%, transparent); --tint-red: color-mix(in srgb, var(--ctp-red) 14%, transparent); --tint-yellow: color-mix(in srgb, var(--ctp-yellow) 18%, transparent); --tint-flamingo: color-mix(in srgb, var(--ctp-flamingo) 18%, transparent); --tint-peach: color-mix(in srgb, var(--ctp-peach) 14%, transparent); --tint-hover: color-mix(in srgb, var(--ctp-text) 7%, transparent); --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --radius: var(--r-md); /* Alt-Alias → mittlerer Radius */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } /* IBM Plex (selbst gehostet, OFL, latin) – woff2 in public/fonts/ */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); } * { box-sizing: border-box; } /* Touch: keine Tipp-Verzögerung/kein Doppeltipp-Zoom auf Bedienelementen, kein grauer Tipp-Blitz (iOS) */ button, a, .tab, .asv-wert, .fld-badge, .mzelle, th.lkopf, td.nzelle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: var(--font-sans); background: var(--ctp-crust); color: var(--ctp-text); font-size: 15px; } ::selection { background: color-mix(in srgb, var(--ctp-overlay2) 28%, transparent); } .laden { padding: 40px; text-align: center; color: var(--ctp-overlay1); } /* Topbar */ .topbar { background: var(--ctp-mantle); color: var(--ctp-text); display: flex; align-items: center; gap: 10px; padding: 0 20px; height: 52px; border-bottom: 1px solid var(--ctp-surface1); } .topbar .logo { font-weight: 700; font-size: 17px; cursor: pointer; white-space: nowrap; } .topbar .spacer { flex: 1; } .topbar a, .topbar .tblink { color: var(--ctp-subtext0); text-decoration: none; cursor: pointer; font-size: 14px; padding: 9px 12px; border-radius: 99px; } .topbar a:hover, .topbar .tblink:hover { background: var(--tint-blue); color: var(--ctp-blue); } .tb-menu { position: relative; display: flex; } .tb-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: var(--r-md); padding: 4px; min-width: 150px; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .tb-dropdown[hidden] { display: none; } .tb-item { background: none; border: 0; text-align: left; cursor: pointer; color: var(--ctp-text); font-size: 14px; padding: 11px 12px; border-radius: var(--r-sm); } .tb-item:hover { background: var(--tint-blue); color: var(--ctp-blue); } .tb-sj { background: var(--ctp-base); color: var(--ctp-text); border: 1px solid var(--ctp-surface1); border-radius: var(--r-md); padding: 7px 10px; font-size: 16px; height: 40px; cursor: pointer; margin-left: 4px; } .tb-sj:hover { border-color: var(--ctp-blue); } /* Verwaltungs-Reiter: gleiche randlose Mantle-Bänder wie die Kurs-Tabs (.kurspanel). Aktionsspalte rechtsbündig. */ table.asv td:has(.zeilen-akt) { text-align: right; } .badge-aktiv { background: var(--tint-blue); color: var(--ctp-blue); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; } input.feld-fehler { border-color: var(--ctp-red); } .container { max-width: 1280px; margin: 0 auto; padding: 20px; } .container.breit { max-width: none; } h1 { font-size: 22px; margin: 8px 0 16px; } /* Kurskopf: farbiges Fach-Icon (ohne Hintergrund) + Name/Meta + Klassen-Badges rechts */ .kurskopf { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; } .kurskopf .kko-icon { flex: 0 0 auto; display: flex; align-items: center; color: var(--ctp-blue); } .kurskopf .kko-icon svg { width: 32px; height: 32px; display: block; } .kko-text { min-width: 0; } .kko-name { font-size: 22px; font-weight: 600; line-height: 1.2; } .kko-meta { color: var(--ctp-overlay1); font-size: 13px; margin-top: 3px; } .kko-badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; } h2 { font-size: 17px; margin: 20px 0 10px; } h3 { font-size: 15px; margin: 14px 0 8px; } /* Buttons */ button, .btn { font: inherit; font-size: 14px; border: 1px solid var(--ctp-surface1); background: var(--ctp-base); color: var(--ctp-text); padding: 9px 16px; border-radius: var(--radius); cursor: pointer; } button:hover { background: var(--ctp-surface1); } button.primaer { background: var(--ctp-blue); border-color: var(--ctp-blue); color: var(--on-akzent); } button.primaer:hover { background: color-mix(in srgb, var(--ctp-blue) 85%, var(--ctp-text)); } button.gefahr { color: var(--ctp-red); border-color: color-mix(in srgb, var(--ctp-red) 40%, transparent); } button.gefahr:hover { background: var(--tint-red); } button.klein { padding: 6px 10px; font-size: 13px; border-radius: var(--r-sm); } button:disabled { opacity: .5; cursor: default; } /* Formulare */ input, select, textarea { font: inherit; font-size: 16px; /* ≥16px: verhindert iOS-Safari-Autozoom beim Fokussieren */ border: 1px solid var(--ctp-surface1); border-radius: var(--radius); padding: 7px 10px; background: var(--ctp-surface0); color: var(--ctp-text); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--ctp-blue); outline-offset: -1px; } input::placeholder, textarea::placeholder { color: var(--ctp-overlay1); } label { font-size: 13px; color: var(--ctp-subtext0); display: block; margin-bottom: 3px; } .feld { margin-bottom: 12px; } .zeile { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .zeile .feld { margin-bottom: 0; } /* Zweispaltiges Formular-Gitter: gleiche Spaltenbreiten + gleichmäßige Abstände */ .feld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } .feld-grid .feld { margin-bottom: 0; } .feld-grid .feld-halb { grid-column: 1; } .feld-grid input, .feld-grid select, .feld-grid .pillgruppe { width: 100%; box-sizing: border-box; } .feld-grid .pillgruppe button { flex: 1; } /* Notenskalen-Verwaltung (kompaktes Karten-Raster) */ .skalen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-bottom: 12px; } .skala-karte { background: var(--ctp-base); border: 1px solid var(--ctp-surface0); border-radius: var(--r-lg); padding: 12px; } .skala-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .skala-kopf .sk-name { flex: 1; min-width: 0; font-weight: 500; padding: 5px 8px; } .skala-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .sk-zelle { position: relative; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: var(--r-sm); padding: 6px 4px 7px; text-align: center; } .sk-zelle .g-note, .sk-zelle .g-ab { width: 100%; border: 0; background: transparent; padding: 1px 0; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .sk-zelle .g-note { font-weight: 600; color: var(--ctp-mauve); font-size: 16px; } .sk-zelle .g-ab { color: var(--ctp-subtext0); font-size: 16px; } /* beide ≥16px: kein iOS-Autozoom */ .sk-zelle .g-note:focus, .sk-zelle .g-ab:focus { outline: 2px solid var(--ctp-blue); outline-offset: -1px; border-radius: var(--r-sm); } .sk-zelle .g-ab::-webkit-inner-spin-button, .sk-zelle .g-ab::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sk-zelle .g-ab { -moz-appearance: textfield; appearance: textfield; } /* Löschknopf immer sichtbar (früher hover-only – am Touch unerreichbar, am Desktop schwer auffindbar) */ .sk-zelle-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 1; border-radius: 99px; background: var(--ctp-surface1); border: 1px solid var(--ctp-surface0); color: var(--ctp-subtext0); display: inline-flex; align-items: center; justify-content: center; } .sk-zelle-del:hover { background: var(--ctp-red); border-color: var(--ctp-red); color: var(--on-akzent); } .sk-zelle-add { display: flex; align-items: center; justify-content: center; min-height: 46px; font-size: 18px; color: var(--ctp-overlay1); background: transparent; border: 1px dashed var(--ctp-surface1); border-radius: var(--r-sm); } .sk-zelle-add:hover { background: var(--ctp-surface0); color: var(--ctp-text); } /* Aktionsspalte in Verwaltungs-Tabellen (Bearbeiten/Löschen als Icon-Buttons) */ .zeilen-akt { display: inline-flex; gap: 6px; align-items: center; } /* Karten / Listen */ .karte { background: var(--ctp-mantle); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px; } .kursliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } /* ---------- Hilfe-Seite ---------- Gegliederter Fließtext mit Outline; Akzentfarbe je Gruppe über --hk. */ .hilfe { max-width: 760px; } /* Schnellstart */ .hilfe-schnellstart { margin: 16px 0 4px; padding: 16px 20px 14px; background: color-mix(in srgb, var(--ctp-blue) 8%, var(--ctp-mantle)); border: 1px solid var(--ctp-surface1); border-left: 3px solid var(--ctp-blue); border-radius: var(--r-lg); } .hilfe-schnellstart h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ctp-blue); margin: 0 0 10px; } .hilfe-schnellstart ol { margin: 0; padding-left: 20px; } .hilfe-schnellstart li { font-size: 13.5px; line-height: 1.6; color: var(--ctp-text); margin: 5px 0; padding-left: 4px; } .hilfe-schnellstart b { color: color-mix(in srgb, var(--ctp-blue) 72%, var(--ctp-text)); } /* Outline / Inhaltsverzeichnis */ .hilfe-outline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 4px; } .hilfe-outline a { display: inline-block; padding: 3px 11px; border-radius: 99px; text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--hk); background: color-mix(in srgb, var(--hk) 12%, transparent); } .hilfe-outline a:hover { background: color-mix(in srgb, var(--hk) 22%, transparent); } /* Themengruppe */ .hilfe-abschnitt { scroll-margin-top: 16px; margin-top: 30px; } .hilfe-gruppe { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--hk); margin: 0 0 6px; } .hilfe-gruppe::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--hk); } .hilfe-gruppe::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--hk) 25%, transparent); } /* Unterabschnitt + Fließtext */ .hilfe-h3 { font-size: 15px; margin: 18px 0 4px; color: var(--hk); } .hilfe-abschnitt p { font-size: 13.5px; line-height: 1.7; color: var(--ctp-text); margin: 6px 0; max-width: 70ch; } .hilfe-abschnitt b { color: color-mix(in srgb, var(--hk) 72%, var(--ctp-text)); } .hilfe kbd { display: inline-block; padding: 0 6px; border-radius: var(--r-sm); border: 1px solid var(--ctp-surface2); border-bottom-width: 2px; background: var(--ctp-base); font-family: var(--font-mono); font-size: 11.5px; line-height: 18px; color: var(--ctp-text); white-space: nowrap; } .kurskarte { cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; margin: 0; } .kurskarte:hover { border-color: var(--ctp-blue); box-shadow: 0 2px 12px color-mix(in srgb, var(--ctp-blue) 18%, transparent); } .kk-head { display: flex; gap: 14px; align-items: center; } .kk-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--ctp-text); } .kk-icon svg { width: 32px; height: 32px; display: block; } .kk-text { min-width: 0; } .kk-text .kname { font-weight: 600; font-size: 16px; } .kk-text .kmeta { color: var(--ctp-overlay1); font-size: 13px; margin-top: 4px; } .kk-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .kk-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .kk-badge.kl-a { background: var(--tint-mauve); color: var(--ctp-mauve); } .kk-badge.kl-b { background: var(--tint-teal); color: var(--ctp-teal); } .kk-badge.kl-c { background: var(--tint-flamingo); color: var(--ctp-flamingo); } .kk-badge.kl-d { background: var(--tint-sapphire); color: var(--ctp-sapphire); } .kk-badge.kl-x { background: var(--tint-blue); color: var(--ctp-blue); } /* Statuszeile unten in der Kurskarte: Kurs-Ø links, offene Noten rechts */ .kk-status { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ctp-surface1); font-size: 13px; } .kk-status .kk-schnitt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--ctp-overlay1); } .kk-status .kk-fehlt { color: var(--ctp-peach); } .kk-status .kk-voll { color: var(--ctp-overlay1); } /* Tabs (Reiter, verbunden mit der Aktionsleiste darunter) */ .tabs { display: flex; justify-content: center; gap: 4px; margin: 16px 0 0; flex-wrap: wrap; position: relative; z-index: 1; } .tabs .tab { padding: 10px 16px; cursor: pointer; border: 1px solid transparent; background: none; color: var(--ctp-subtext0); border-radius: var(--r-md) var(--r-md) 0 0; margin: 0; display: inline-flex; align-items: center; gap: 7px; } .tabs-icon .tab svg { width: 24px; height: 24px; display: block; flex: 0 0 auto; } .tabs-icon .tab.nur-icon { padding: 11px 14px; } .tabs-icon .tab-luecke { flex: 0 0 24px; } .tabs .tab:hover { color: var(--ctp-text); background: color-mix(in srgb, var(--ctp-surface0) 60%, transparent); } /* Aktiver Reiter: gleiche Fläche wie .tableiste, nahtlos nach unten verbunden */ .tabs .tab.aktiv { color: var(--ctp-blue); font-weight: 600; background: var(--ctp-mantle); border-color: var(--ctp-surface1); border-bottom-color: var(--ctp-mantle); border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: -1px; } .tabs .tab.aktiv:hover { color: var(--ctp-blue); background: var(--ctp-mantle); } /* Aktive Lasche klappt beim Tab-Wechsel auf: Label schiebt sich aus dem Icon heraus + Fade */ .tab-label { display: inline-block; white-space: nowrap; overflow: hidden; } .tabs .tab.aktiv .tab-label { animation: tab-label-auf .38s ease-out both; } @keyframes tab-label-auf { from { max-width: 0; opacity: 0; transform: translateX(-4px); } to { max-width: 140px; opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tabs .tab.aktiv .tab-label { animation: none; } } /* Aktionsleiste je Tab – dockt randlos an den aktiven Reiter an */ .tableiste { background: var(--ctp-mantle); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); padding: 9px 12px; margin-bottom: 14px; } /* Tabellen-Tabs: Aktionsleiste + Tabelle(n) gemeinsam in einem Band über die volle Breite. Band = mantle-Fläche OHNE eigenen Rahmen (nur Top-Naht für den Reiter) → nur die Tabelle ist gerahmt, keine doppelte Linie mehr. Tabelle(n) sind im Band eingerückt. */ .kurspanel { background: var(--ctp-mantle); border: 0; border-top: 1px solid var(--ctp-surface1); border-bottom: 1px solid var(--ctp-surface1); border-radius: 0; padding: 0 20px 40px; margin: 0 -20px 14px; } /* Inhalt der Tabellen-Tabs: zentrierte Spalte, so breit wie die Tabelle. Leiste füllt sie (Export/Drucken landen so am rechten Tabellenrand), Tabelle scrollt bei Überbreite. */ .kurspanel-inner { width: max-content; max-width: 100%; margin: 0 auto; } /* Werkzeugleiste: mittig ausrichten (nicht flex-end wie die Formular-.zeile) – so fluchten Pills, Feld und Icon-Buttons unabhängig von kleinen Höhenunterschieden. */ .zeile.panel-bar { align-items: center; } .kurspanel-inner > .panel-bar { width: 100%; padding: 20px 0 0; margin: 0; } .kurspanel-inner > .tabelle-wrap { margin: 20px auto 0; width: max-content; max-width: 100%; } .kurspanel-inner > .gruppe-titel { margin: 18px 0 6px; } .kurspanel-inner > p { margin: 12px 0 0; } /* Statistik (ohne Inner-Wrapper): Leiste zentriert via panel-bar */ .kurspanel > .panel-bar { padding: 20px 0 0; margin: 0 auto; width: max-content; max-width: 100%; } /* Direkte .karte im Band (nur noch Einstellungs-Tab): base-Hintergrund, hebt sich vom Mantle ab */ .kurspanel > .karte { margin: 20px 0 0; background: var(--ctp-base); } /* Einstellungen-Tab: Karten zentriert im Band (keine panel-bar, Formular-Layout) */ .kurspanel > .karte.einstellungen-karte { max-width: 680px; margin: 20px auto 0; } /* Einstellungen-Tab – Raster-Layout (einheitliche Feldhöhen, klare Linien, gleiche Abstände) */ .es-karte { padding: 18px 20px; } .es-karte h3 { margin: 0 0 12px; } .es-block { border-top: 1px solid var(--ctp-surface1); margin-top: 18px; padding-top: 14px; } .es-sektion { font-size: 12px; color: var(--ctp-overlay1); margin: 0 0 10px; } .es-grid { display: grid; gap: 12px; } .es-grid.cols-2 { grid-template-columns: 1fr 1fr; } .es-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .es-feld { display: flex; flex-direction: column; min-width: 0; } .es-feld > label { font-size: 12px; color: var(--ctp-subtext0); margin: 0 0 4px; } .es-feld > input, .es-feld > select { height: 40px; box-sizing: border-box; width: 100%; } .es-feld.gedimmt { opacity: .45; } .es-gewicht { display: flex; align-items: center; gap: 14px; height: 40px; } .es-gewicht-label { font-size: 13px; color: var(--ctp-subtext0); white-space: nowrap; } .es-gewicht input[type=range] { flex: 1; min-width: 0; padding: 0; background: transparent; border: 0; } .es-gewicht-wert { min-width: 96px; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; } .es-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 13.5px; color: var(--ctp-text); } .es-check input { width: auto; height: auto; padding: 0; } .es-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 12px; border-top: 1px solid var(--ctp-surface1); margin-top: 18px; padding-top: 14px; } .es-fuss .ok { margin: 0; } @media (max-width: 560px) { .es-grid.cols-2, .es-grid.cols-3 { grid-template-columns: 1fr; } .es-gewicht { flex-wrap: wrap; height: auto; } .es-gewicht-wert { min-width: 0; } } /* Notizen-Tab: Liste als zentrierte Spalte im Band */ .notizen-liste { max-width: 720px; margin: 0 auto; } .notizen-liste > .karte { margin: 12px 0 0; background: var(--ctp-base); } .notizen-liste > .karte:first-child { margin-top: 20px; } .notizen-leer { margin-top: 20px; text-align: center; } /* Erster Tab (Noten) aktiv: obere linke Ecke eckig, damit Reiter- und Leistenkante eine durchgehende Linie bilden */ #tab-inhalt.erster-tab > .tableiste, #tab-inhalt.erster-tab > .karte, #tab-inhalt.erster-tab > .kurspanel { border-top-left-radius: 0; } /* Pill-Umschalter (Halbjahr, Bericht-Modus) – Track mit Innenrahmen, aktives Segment eingerückt */ .pillgruppe { display: inline-flex; gap: 2px; background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-radius: var(--r-md); padding: 3px; height: 40px; box-sizing: border-box; align-items: center; } .pillgruppe button { border: none; background: none; color: var(--ctp-subtext0); padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; align-self: stretch; } .pillgruppe button:hover { color: var(--ctp-text); background: color-mix(in srgb, var(--ctp-surface0) 60%, transparent); } .pillgruppe button.aktiv { color: var(--ctp-rosewater); font-weight: 600; } /* Trennlinie zwischen Werkzeugleisten-Gruppen (Halbjahr | Ansicht | Hinzufügen) */ .panel-bar .tl-trenner { width: 1px; align-self: stretch; background: var(--ctp-surface1); margin: 2px 2px; } /* Icon-Buttons (Toolbar) */ button.ikon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); } button.ikon svg { width: 20px; height: 20px; } button.ikon.kat-s-btn { background: var(--ctp-base); color: var(--ctp-mauve); } button.ikon.kat-s-btn:hover { background: var(--ctp-surface1); } button.ikon.kat-m-btn { background: var(--ctp-base); color: var(--ctp-teal); } button.ikon.kat-m-btn:hover { background: var(--ctp-surface1); } /* FLD-Spalten-Umschalter (kein Pill, mit Aktiv-Zustand wenn Spalte sichtbar) */ /* Toggle-Buttons (FLD-Spalte, Dezimal, Gruppierung) – wie die Pill: crust-Track mit eingerückter Füllung im Aktiv-Zustand (3px transparenter Rand = Track-Rahmen). */ button.fld-btn, button.gruppe-btn { height: 40px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ctp-surface1); border-radius: var(--r-md); background: var(--ctp-base); color: var(--ctp-text); } button.fld-btn svg, button.gruppe-btn svg { width: 16px; height: 16px; } button.fld-btn:hover, button.gruppe-btn:hover { background: var(--ctp-surface1); } button.fld-btn.aktiv, button.gruppe-btn.aktiv { color: var(--ctp-blue); font-weight: 600; } /* Gruppierungs-Durchschalter (Symbol-only): blau = FLD, grün = Klasse */ button.gruppe-btn.gruppe-fld { color: var(--ctp-blue); } button.gruppe-btn.gruppe-klasse { color: var(--ctp-green); } /* Notentabelle */ .tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); scrollbar-width: thin; scrollbar-color: var(--ctp-surface1) transparent; } /* Scrollbalken immer sichtbar (macOS blendet ihn sonst aus – man sieht nicht, dass die Tabelle scrollt) */ .tabelle-wrap::-webkit-scrollbar { height: 10px; } .tabelle-wrap::-webkit-scrollbar-track { background: var(--ctp-surface0); border-radius: 0 0 var(--r-lg) var(--r-lg); } .tabelle-wrap::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 5px; border: 2px solid var(--ctp-surface0); } .tabelle-wrap table { border-style: hidden; } /* äußere Zellränder aus – sonst doppelt 1px mit dem Wrap-Rahmen */ table.noten { border-collapse: collapse; width: max-content; font-size: 14px; table-layout: fixed; background: var(--ctp-base); --kt-s: transparent; --kt-m: transparent; --kt-e: transparent; } /* Feste Spaltenbreiten (table-layout: fixed) – Breite unabhängig vom Zellinhalt, kein Springen. Name schmaler, wenn Nachnamen ausgeblendet sind. */ table.noten col.kol-name { width: 180px; } table.noten col.kol-name.schmal { width: 104px; } table.noten col.kol-fld { width: 44px; } table.noten col.kol-s, table.noten col.kol-m { width: 66px; } table.noten col.kol-e { width: 72px; } table.noten col.kol-akt { width: 116px; } table.noten td.kol-akt-zelle { background: var(--ctp-base); } table.noten td.kol-akt-zelle { padding-top: 2px; padding-bottom: 2px; } table.noten td.kol-akt-zelle .zeilen-akt { display: flex; gap: 4px; align-items: center; justify-content: center; } table.noten td.kol-akt-zelle .klein { padding: 5px 8px; font-size: 12.5px; } table.noten th.akt-kopf { background: var(--ctp-base); color: var(--ctp-subtext0); } /* lange Titel/Namen kürzen statt umbrechen (voller Text per Tooltip) */ table.noten td.name, table.noten th.name-kopf, table.noten th.lkopf { overflow: hidden; text-overflow: ellipsis; } table.noten th, table.noten td { border: 0; padding: 4px 6px; text-align: center; white-space: nowrap; } /* höhere Daten- und Kopfzeilen (~42px – Tippfläche für Touch, ganze Zelle klickbar) */ table.noten tbody td, table.noten thead th { padding-top: 12px; padding-bottom: 12px; } table.noten th { background: var(--ctp-base); font-weight: 600; font-size: 14px; } /* Kategorie-Farben: schriftlich = Iris, mündlich = Pine, Endnote = Love */ table.noten th.kat-s { background: var(--kt-s); color: var(--ctp-mauve); } table.noten th.kat-m { background: var(--kt-m); color: var(--ctp-teal); } /* Kategorie-Band (zweite, obere Kopfzeile, getönt mit farbigem Text) */ table.noten tr.kat-band th.kband { font-size: 14px; padding: 8px 6px; } table.noten th.kband-s { background: var(--kt-s); color: var(--ctp-mauve); } table.noten th.kband-m { background: var(--kt-m); color: var(--ctp-teal); } table.noten th.kband-e { background: var(--kt-e); color: var(--ctp-maroon); } table.noten td.name { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--ctp-base); padding-left: 12px; } table.noten th.name-kopf { padding-left: 12px; } /* Rowspan-Köpfe (Name, FLD, Endnote) unten ausrichten → auf Höhe der Leistungsnamen */ table.noten thead th.name-kopf, table.noten thead th.fld-kopf, table.noten thead th.kband-e { vertical-align: bottom; } table.noten td.fld { background-color: var(--ctp-base); } /* Zahlen in den Tabellen: IBM Plex Mono mit gleichbreiten Ziffern (Namen bleiben Sans) */ table.noten td:not(.name), table.noten td:not(.name) input, .spiegel .bcount, .spiegel .blabel { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Zebra: jede zweite Datenzeile dezent abdunkeln (Bild-Layer, damit Zell-/Spaltentönungen erhalten bleiben) */ table.noten tbody tr:nth-child(odd) td { background-image: linear-gradient(color-mix(in srgb, var(--ctp-text) 4%, transparent), color-mix(in srgb, var(--ctp-text) 4%, transparent)); } /* Zeilen-Hover: als Bild-Layer, damit Zell-Hintergründe (Endnote, Status …) erhalten bleiben */ table.noten tbody tr:hover td { background-image: linear-gradient(var(--tint-hover), var(--tint-hover)); } table.noten th.lkopf { cursor: pointer; min-width: 60px; } table.noten th.lkopf:hover { background: var(--ctp-surface1); } table.noten td.schnitt { background: var(--ctp-base); font-weight: 600; } /* Durchschnittszellen in der Kategorie-Farbe (wie der Header) */ table.noten td.schnitt.kat-s { background-color: var(--kt-s); color: var(--ctp-mauve); } table.noten td.schnitt.kat-m { background-color: var(--kt-m); color: var(--ctp-teal); } table.noten td.endnote { background: var(--kt-e); color: var(--ctp-maroon); font-weight: 700; } table.noten td.ganzjahr { background: color-mix(in srgb, var(--ctp-maroon) 24%, transparent); color: var(--ctp-maroon); font-weight: 700; } table.noten .inaktiv td { opacity: .45; } .fld-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 99px; cursor: pointer; } .fld-E { background: var(--tint-blue); color: var(--ctp-blue); } .fld-G { background: var(--tint-green); color: var(--ctp-green); } .fld-A { background: var(--tint-yellow); color: var(--ctp-yellow); } .fld-leer { background: var(--ctp-surface1); color: var(--ctp-overlay1); } /* FLD-Wechsel zum 2. HJ (fld2 ≠ fld): Peach-Punkt am Badge, Details im Tooltip */ .fld-wechsel { position: relative; } .fld-wechsel::after { content: ''; position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 99px; background: var(--ctp-peach); border: 1.5px solid var(--ctp-base); } /* Förderbedarf-Badge hinter dem Namen (Kürzel L/S/V) */ .foerder-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--tint-flamingo); color: var(--ctp-flamingo); vertical-align: middle; } /* Gruppen-Überschriften (Gruppierung nach Klasse/FLD) */ h3.gruppe-titel { margin: 18px 0 6px; color: var(--ctp-blue); } /* ===== Aufgabenweise Bewertung einer Klassenarbeit (#/kurs//aufgaben/) ===== */ /* Marker im Leistungs-Spaltenkopf des Noten-Tabs: Leistung wird aufgabenweise bewertet */ th.lkopf .a-marker { font-family: var(--font-mono); font-size: 11px; color: var(--ctp-sapphire); background: var(--tint-sapphire); border-radius: 99px; padding: 1px 5px; } /* Spaltenbreiten (table-layout: fixed wie die Notentabelle) */ table.aufgaben col.kol-a { width: 72px; } table.aufgaben col.kol-sum { width: 88px; } table.aufgaben col.kol-pct { width: 80px; } table.aufgaben col.kol-note { width: 60px; } /* Aufgaben-Kopf: Nr + Kompetenz-Badge, darunter Maxima (je FLD) */ table.aufgaben th.a-kopf { cursor: pointer; vertical-align: bottom; } table.aufgaben th.a-kopf:hover { background: var(--ctp-surface1); } table.aufgaben .a-nr { font-weight: 700; font-size: 13px; } table.aufgaben .a-max { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--ctp-overlay1); margin-top: 2px; } table.aufgaben .k-badge { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 99px; font-size: 10px; font-weight: 700; background: var(--tint-sapphire); color: var(--ctp-sapphire); margin-left: 4px; } /* Punktzellen: sichtbares Eingabefeld (anders als die Overlay-Zellen im Noten-Tab – hier gibt es nur Punkte) */ td.a-zelle { padding: 0 !important; } td.a-zelle input { width: 100%; min-height: 42px; border: 0; border-radius: 0; background: transparent; text-align: center; font-size: 16px; color: var(--ctp-text); } td.a-zelle input::placeholder { color: var(--ctp-surface1); } td.a-zelle input:focus { outline: 2px solid var(--ctp-blue); outline-offset: -2px; background: var(--ctp-base); } td.a-zelle.p-ueber { background: var(--tint-yellow); } td.a-gesperrt { color: var(--ctp-overlay1); background-color: var(--ctp-mantle) !important; } /* Ergebnis-Spalten rechts */ table.aufgaben th.a-summe-kopf, table.aufgaben td.a-summe { border-left: 1px solid var(--ctp-surface0); } table.aufgaben td.a-summe { font-weight: 600; } table.aufgaben td.a-summe .a-von { color: var(--ctp-overlay1); font-weight: 400; font-size: 11px; } table.aufgaben td.a-summe.leer { color: var(--ctp-overlay1); font-weight: 400; } table.aufgaben td.a-pct { color: var(--ctp-subtext0); font-size: 12.5px; } table.aufgaben td.a-note { font-weight: 700; font-size: 15px; } /* Fußzeile: Ø-Punkte + Ø-% je Aufgabe */ table.aufgaben tfoot td { border-top: 1px solid var(--ctp-surface0); background: var(--ctp-base); font-size: 12px; color: var(--ctp-subtext0); padding-top: 8px; padding-bottom: 8px; } table.aufgaben td.a-fuss-label { font-family: var(--font-sans); font-weight: 600; text-align: left; padding-left: 12px; } table.aufgaben .a-fuss-pct { display: block; font-weight: 700; } /* Kompetenz-Erreichung (Balken unter der Tabelle) */ .kw-block { margin: 18px auto 0; width: 100%; max-width: 760px; } .kw-titel { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ctp-overlay1); } .kw-zeile { display: grid; grid-template-columns: minmax(200px, 320px) 1fr 110px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 13.5px; } .kw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kw-spur { height: 14px; border-radius: var(--r-sm); background: var(--ctp-surface0); overflow: hidden; } .kw-fill { height: 100%; border-radius: var(--r-sm); } .kw-wert { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ctp-subtext0); text-align: right; } /* Modal-Felder: einheitliche Höhe (40px wie die Pillgruppen) – Datumsfelder haben sonst eine browserabhängig leicht abweichende Eigenhöhe gegenüber Textfeldern */ #modal-root .modal input:not([type=checkbox]):not([type=radio]), #modal-root .modal select { height: 40px; } /* Dialog „Leistung bearbeiten": Abschnitte (Einordnung · Bewertung · Aufgaben) */ .modal .abschnitt { border-top: 1px solid var(--ctp-surface0); margin-top: 16px; padding-top: 12px; } .modal .ab-titel { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--ctp-overlay1); margin: 0 0 10px; } /* Kategorie-Pills in Kategoriefarbe (aktiv) */ .pillgruppe button.aktiv[data-kat="schriftlich"] { color: var(--ctp-mauve); } .pillgruppe button.aktiv[data-kat="muendlich"] { color: var(--ctp-teal); } .pillgruppe button:disabled { opacity: .45; cursor: default; } /* Max-Punkte je FLD: Badge-Beschriftung über zentrierten Mono-Feldern */ .max-grid { display: flex; gap: 10px; align-items: flex-end; } .max-grid[hidden] { display: none; } /* display:flex würde das hidden-Attribut sonst überstimmen */ .max-zelle { flex: 1; min-width: 0; text-align: center; } .max-zelle .fldb { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; margin-bottom: 4px; } .max-zelle input { width: 100%; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Aufgaben-Statuskarte im Leistungs-Dialog */ .aufg-karte { display: flex; align-items: center; gap: 12px; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface0); border-radius: var(--r-md); padding: 10px 14px; } .aufg-karte .ak-text { flex: 1; min-width: 0; } .aufg-karte .ak-text b { display: block; } .aufg-karte .ak-text span { font-size: 12.5px; color: var(--ctp-subtext0); } .aufg-karte .sigma { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--ctp-sapphire); background: var(--tint-sapphire); border-radius: 99px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* Kompetenz-Auswahl im Aufgaben-Dialog (gruppiert nach Thema) */ .komp-liste { border: 1px solid var(--ctp-surface0); border-radius: var(--r-md); background: var(--ctp-mantle); padding: 10px 12px; max-height: 220px; overflow: auto; } .komp-thema { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ctp-peach); margin: 8px 0 4px; } .komp-thema:first-child { margin-top: 0; } label.komp-wahl { display: flex; gap: 8px; align-items: center; padding: 3px 0; cursor: pointer; font-size: 14px; } /* Bericht: kompaktes „Blatt" (base-Karte auf dem Band) – Kopf, Themen inkl. Kompetenzen (2 Spalten), dann Noten+ASV in EINER Tabelle mit Gruppenzeilen. */ .bericht-blatt { width: max-content; max-width: 100%; margin: 12px auto 0; background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); padding: 16px 20px; overflow-x: auto; } /* Kopf/Themen/Fuß richten sich in der Breite nach der Tabelle: width 0 + min-width 100% → sie tragen selbst nicht zur max-content-Breite des Blatts bei, die Tabelle bestimmt sie */ .b-kopf, .b-themen, .b-fuss, .bem-block { width: 0; min-width: 100%; box-sizing: border-box; } .b-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 2px solid var(--akzent); padding-bottom: 8px; } .b-kurs { font-size: 18px; font-weight: 700; color: var(--akzent); } .b-modus { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--akzent); color: var(--on-akzent); font-size: 11px; font-weight: 600; vertical-align: 2px; margin-left: 10px; } .b-unter { margin-top: 3px; color: var(--ctp-subtext0); font-size: 13px; } .b-rechts { text-align: right; color: var(--ctp-subtext0); font-size: 13px; line-height: 1.5; white-space: nowrap; } .b-rechts b { color: var(--ctp-text); } h3.b-abschnitt { font-size: 14px; letter-spacing: .2px; color: var(--akzent); margin: 14px 0 6px; font-weight: 700; } /* zwei Spalten als Grid statt CSS-columns – Multicol bricht im Chrome-Druck auf eine Spalte zusammen */ .b-themen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 28px; align-items: start; padding: 2px 8px; } .b-thema { break-inside: avoid; } .bt-titel { font-weight: 600; font-size: 13px; } .bt-hj { color: var(--ctp-overlay1); font-size: 11px; font-weight: 400; } .b-thema ul { margin: 2px 0 0; padding-left: 2px; font-size: 12px; color: var(--ctp-subtext0); list-style: none; } .b-thema li { display: flex; gap: 6px; } /* Marker als eigene Spanne (::marker rendert zu klein/blass): ✓ grün fett, ○ gedämpft */ .bk-m { flex: none; width: 15px; text-align: center; font-weight: 700; } .bk-m.erledigt { color: var(--ctp-green); } .bk-m.offen { color: var(--ctp-overlay1); } /* Feste Spaltenbreiten (wie Notentabelle): table-layout fixed, Breiten über */ table.bericht { border-collapse: collapse; table-layout: fixed; width: auto; font-size: 13px; } table.bericht col.bk-name { width: 140px; } /* FLD ausgeblendet: Namensspalte um die FLD-Breite verbreitern → Tabellenbreite bleibt konstant */ table.bericht.fld-aus col.bk-name { width: 184px; } table.bericht col.bk-fld { width: 44px; } table.bericht col.bk-n { width: 46px; } table.bericht col.bk-t { width: 12px; } table.bericht col.bk-a { width: 32px; } table.bericht col.bk-fs { width: 58px; } /* Fehlstunden im Bericht: "12 (3)" – Zusatz (unentschuldigt) gedämpft */ table.bericht td.b-fs { white-space: nowrap; } /* Fehlzeiten über 30 % (gesamt) rot hervorheben */ table.bericht td.b-fs-hoch { color: var(--ctp-red); font-weight: 600; } /* Endnote schlechter als 4− rot hervorheben */ table.bericht td.b-note-rot { color: var(--ctp-red); } .b-fs-u { color: var(--ctp-overlay1); font-size: 11px; } table.bericht th, table.bericht td { padding: 4px 8px; border-bottom: 1px solid var(--ctp-surface0); text-align: left; white-space: nowrap; } table.bericht thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ctp-subtext0); border-bottom: 1.5px solid var(--ctp-surface2); } table.bericht th.zahl, table.bericht td.zahl, table.bericht th.b-asv, table.bericht td.b-asv, table.bericht th.b-fld, table.bericht td.b-fld { text-align: center; } table.bericht td.zahl, table.bericht td.b-asv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } table.bericht td.name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } table.bericht .fld-badge { padding: 1px 8px; font-size: 11px; cursor: default; } .b-exakt { color: var(--ctp-overlay1); font-size: 10.5px; margin-left: 4px; font-weight: 400; } th.b-trenn, td.b-trenn { border-bottom: none; width: 12px; padding: 0; } /* ASV-Werte: alle mit derselben festen Fläche – die Änderungs-Tönung (ggü. 1. HJ, Tooltip zeigt den alten Wert) ändert dadurch weder Breite noch Ausrichtung */ table.bericht th.b-asv, table.bericht td.b-asv { padding-left: 2px; padding-right: 2px; } table.bericht td.b-asv > span { display: inline-block; min-width: 24px; padding: 1px 0; border-radius: var(--r-sm); } td.b-geaendert > span { background: var(--tint-yellow); } .b-legende-tint { background: var(--tint-yellow); padding: 0 6px; border-radius: var(--r-sm); } tr.b-gruppe td { background: var(--ctp-mantle); font-weight: 700; font-size: 12px; color: var(--ctp-subtext0); } /* Bemerkungen als eigener Abschnitt unter der Tabelle (nach Klasse gegliedert, folgt der Tabellen-Gruppierung) */ .bem-block { margin-top: 2px; } .bem-klasse { background: var(--ctp-mantle); font-weight: 700; font-size: 12px; color: var(--ctp-subtext0); padding: 3px 8px; border-radius: var(--r-sm); margin: 10px 0 2px; } .bem-klasse:first-child { margin-top: 0; } .bem-liste { display: grid; grid-template-columns: 150px 1fr; gap: 0 16px; font-size: 12.5px; } .bem-liste .bl-name { font-weight: 600; color: var(--ctp-text); padding: 6px 0 6px 8px; border-bottom: 1px solid var(--ctp-surface0); overflow: hidden; text-overflow: ellipsis; } .bem-liste .bl-text { color: var(--ctp-subtext0); padding: 6px 0; border-bottom: 1px solid var(--ctp-surface0); line-height: 1.5; } .b-fuss { display: flex; justify-content: space-between; gap: 24px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--ctp-surface0); color: var(--ctp-overlay1); font-size: 11px; } .b-fuss span { margin-right: 12px; } .druck-titel { display: none; font-weight: 700; font-size: 14px; margin: 0 0 8px; } @media print { .druck-titel { display: block; } } /* Noten-Zellen */ td.nzelle { padding: 0 !important; min-width: 60px; position: relative; } td.nzelle input { border: none; border-radius: 0; width: 100%; min-width: 58px; text-align: center; padding: 5px 2px; background: transparent; color: var(--ctp-text); } td.nzelle input:focus { outline: 2px solid var(--ctp-blue); outline-offset: -2px; background: var(--ctp-base); } td.nzelle .nhinweis { position: absolute; top: 0; right: 2px; font-size: 9px; color: var(--ctp-yellow); } /* Punkte über dem (FLD-)Maximum: gültig (Zusatzpunkte), aber sichtbar – Tippfehler-Schutz */ td.nzelle.p-ueber { background: var(--tint-yellow); } /* Note-Anzeige: oben in Punkte-Zellen sowie in Ø-/Endnote-Zellen */ table.noten .nnote { display: block; font-size: 16px; line-height: 1.1; } td.nzelle .nnote { color: var(--ctp-text); padding-top: 12px; padding-bottom: 12px; } /* Punkte-Zelle einzeilig: normal nur die Note; das Punktefeld liegt unsichtbar darüber und wird erst beim Fokus sichtbar (Klick = Punkte eintragen, danach wieder die Note). */ td.nzelle input.ppunkte, td.nzelle input[data-typ="wert"] { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; } td.nzelle input.ppunkte { padding: 0 2px; text-align: center; } td.nzelle input.ppunkte::placeholder, td.nzelle input[data-typ="wert"]::placeholder { color: transparent; } td.nzelle input.ppunkte:focus, td.nzelle input[data-typ="wert"]:focus { color: var(--ctp-text); caret-color: var(--ctp-blue); background: var(--ctp-base); z-index: 2; } td.nzelle input.ppunkte:focus::placeholder, td.nzelle input[data-typ="wert"]:focus::placeholder { color: var(--ctp-overlay1); } td.nzelle:focus-within .nnote { display: none; } /* kleiner Exaktwert unter der Note (Ø-/Endnote-Zellen) */ table.noten .sexakt { font-size: 11px; color: var(--ctp-overlay1); } /* Note in Ø-/Endnote-Zellen mit fester Breite (2 Zeichen, linksbündig): Ziffer steht so in jeder Zeile an gleicher Stelle, das Tendenzzeichen sitzt im reservierten Platz dahinter. */ table.noten .znum { display: inline-block; width: 2ch; text-align: left; font-size: 16px; } /* Noten auf die Zellmitte ausrichten – die einstellige Note steht mittig, das Tendenzzeichen (+/−) ragt nach rechts, sodass die Ziffern aller Zeilen exakt untereinander stehen. Gilt für Note-Anzeigen (Punkte-, Ø- und Endnote-Zellen) und das Noten-Eingabefeld. */ table.noten .nnote, td.nzelle input[data-typ="wert"] { text-align: left; padding-left: calc(50% - 0.5ch); padding-right: 0; } /* Namens-Spaltenkopf: Sortierung + Augen-Toggle */ /* Tippflächen unsichtbar vergrößert: Padding + Ausgleichs-Margin, Layout bleibt */ th.name-kopf .sort-name { cursor: pointer; padding: 10px 4px; margin: 0 -4px; } th.name-kopf .sort-name:hover { text-decoration: underline; color: var(--ctp-blue); } th.name-kopf .auge { cursor: pointer; padding: 10px 6px; margin: 0 -6px 0 0; } th.name-kopf .auge:hover { opacity: .7; } .hinweis { color: var(--ctp-overlay1); font-size: 13px; } /* Leerer Zustand (z.B. Mitarbeit ohne Spalten): zentriert, mit direkter Aktion */ .leer-state { text-align: center; padding: 40px 20px 44px; } .leer-state .ls-titel { font-weight: 600; margin: 0 0 6px; } .leer-state .hinweis { margin: 0 0 16px; } .fehler { color: var(--ctp-red); font-size: 13.5px; margin: 8px 0; } .warnung { color: var(--ctp-yellow); font-size: 13.5px; margin: 8px 0; } .warnung .hinweis { color: var(--ctp-overlay1); } .ok { color: var(--ctp-green); font-size: 13.5px; margin: 8px 0; } /* Schüler-Neu-Dialog: lokal erfasste Einträge vor dem Speichern */ .neu-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .neu-liste li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface0); border-radius: var(--r-sm); font-size: 13.5px; } .neu-liste li .klein { margin-left: auto; } /* ASV */ table.asv { border-collapse: collapse; width: max-content; font-size: 14px; background: var(--ctp-base); } table.asv th, table.asv td { border: 1px solid var(--ctp-surface1); padding: 8px; text-align: center; } table.asv th { background: var(--ctp-base); font-size: 14px; } table.asv td.name { text-align: left; font-weight: 500; } /* Notentabellen-Look für die interaktiven/Listen-Tabellen (Bericht behält sein gerahmtes Design) */ table.asv:not(.bericht) th, table.asv:not(.bericht) td { border: 0; padding: 12px 8px; white-space: nowrap; } table.asv:not(.bericht) th { font-weight: 600; } table.asv:not(.bericht) th:first-child { text-align: left; padding-left: 12px; } table.asv:not(.bericht) td.name { position: sticky; left: 0; background: var(--ctp-base); padding-left: 12px; } table.asv:not(.bericht) tbody tr:nth-child(odd) td { background-image: linear-gradient(color-mix(in srgb, var(--ctp-text) 4%, transparent), color-mix(in srgb, var(--ctp-text) 4%, transparent)); } table.asv:not(.bericht) tbody tr:hover td { background-image: linear-gradient(var(--tint-hover), var(--tint-hover)); } /* Σ-Stunden-Feld in der ASV-Leiste (Gesamtstunden des HJ für Fehlstunden-%) – als einheitliche 40px-Pille wie die übrigen Leisten-Buttons (Rahmen, base-BG, r-md) */ .stunden-feld { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; box-sizing: border-box; padding: 0 6px 0 12px; border: 1px solid var(--ctp-surface1); border-radius: var(--r-md); background: var(--ctp-base); font-size: 13px; color: var(--ctp-subtext0); white-space: nowrap; } .stunden-feld:focus-within { border-color: var(--ctp-blue); } .stunden-feld input { width: 46px; height: 30px; padding: 0 4px; text-align: center; border: 1px solid var(--ctp-surface1); border-radius: var(--r-sm); background: var(--ctp-surface0); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .stunden-feld input:focus { outline: none; } /* Fehlstunden-Eingabe im ASV-Tab (ganzzahlig, schmal, mono) */ td.asv-fehl input { width: 56px; border: none; background: transparent; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--ctp-text); } td.asv-fehl input:focus { outline: 2px solid var(--ctp-blue); border-radius: var(--r-sm); } .asv-wert { cursor: pointer; user-select: none; font-weight: 700; min-width: 44px; display: inline-block; padding: 8px 6px; border-radius: var(--r-sm); } .asv-wert:hover { background: var(--ctp-surface1); } /* ASV-Tab (07/2026): an Noten-/Mitarbeit-Design angeglichen – feste Spaltenbreiten, Kategorieband im Kopf, Chips wie im Mitarbeit-Tab, Bemerkung als stilles Feld (Rahmen erst beim Fokus). */ table.asv-tab { table-layout: fixed; } table.asv-tab col.kol-name { width: 180px; } table.asv-tab col.kol-name.schmal { width: 104px; } table.asv-tab col.kol-asv { width: 60px; } table.asv-tab col.kol-fs { width: 64px; } table.asv-tab col.kol-bem { width: 240px; } table.asv-tab tr.kat-band th.kband { font-size: 14px; padding: 8px 6px; } table.asv-tab th.kband-asv { color: var(--ctp-teal); } table.asv-tab th.kband-fs { color: var(--ctp-peach); } table.asv-tab thead th.name-kopf, table.asv-tab thead th.bem-kopf { vertical-align: bottom; } table.asv-tab th.bem-kopf { text-align: left; padding-left: 12px; } /* Bemerkung: in der Tabelle einzeilig (fixe Zeilenhöhe, rechter Fade als Abschneide-Hinweis), beim Fokus als Overlay mehrzeilig aufgeklappt – absolut positioniert, verschiebt die Zeile nicht. */ td.asv-bem { position: relative; vertical-align: middle; } td.asv-bem textarea { width: 100%; border: none; background: transparent; color: var(--ctp-text); font: inherit; font-size: 14px; line-height: 1.4; padding: 6px 4px; resize: none; display: block; box-sizing: border-box; height: calc(1.4em + 12px); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); } td.asv-bem textarea::placeholder { color: var(--ctp-surface2); } td.asv-bem textarea:focus { position: absolute; left: 0; right: 0; top: 0; z-index: 5; min-height: calc(1.4em + 12px); max-height: calc(1.4em * 5 + 12px); white-space: pre-wrap; overflow-y: auto; background: var(--ctp-base); border-radius: var(--r-sm); outline: 2px solid var(--ctp-blue); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); -webkit-mask-image: none; mask-image: none; } .asv-mm { color: var(--ctp-maroon); } .asv-m { color: var(--ctp-peach); } .asv-p { color: var(--ctp-teal); } .asv-pp { color: var(--ctp-green); } .asv-leer { color: var(--ctp-surface1); } td.asv-geaendert .asv-wert { box-shadow: inset 0 0 0 1.5px var(--ctp-blue); } /* Themen-Tab: Karten-Layout – ein Block pro Thema mit Kopf, Kompetenz-Zone und Notiz-Fußstreifen */ .themen-liste { width: 760px; max-width: 100%; margin: 20px auto 0; display: grid; gap: 14px; } .thema-karte { background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); overflow: hidden; } .tk-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; } .tk-zeitraum { font-family: var(--font-mono); font-size: 12px; background: var(--tint-sapphire); color: var(--ctp-sapphire); padding: 4px 10px; border-radius: 99px; white-space: nowrap; } .tk-titel { font-size: 15px; font-weight: 600; color: var(--ctp-peach); } .tk-akt { margin-left: auto; display: flex; align-items: center; gap: 8px; } .tk-koerper { border-top: 1px solid var(--ctp-surface0); padding: 12px 16px; } .tk-notiz { background: var(--tint-sapphire); color: var(--ctp-sapphire); padding: 8px 16px; font-size: 12.5px; display: flex; gap: 10px; align-items: baseline; } .tk-notiz-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; flex: none; } .thema-l { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--kt-s); color: var(--ctp-mauve); white-space: nowrap; } .thema-l.kat-m { background: var(--kt-m); color: var(--ctp-teal); } /* Kompetenzen: abhakbare Unterpunkte eines Themas */ .k-zaehler { font-size: 11px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 99px; background: var(--ctp-surface0); color: var(--ctp-subtext0); vertical-align: middle; } .k-zaehler.fertig { background: var(--tint-green); color: var(--ctp-green); } ul.k-liste { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 7px; font-size: 13px; } ul.k-liste li { display: flex; align-items: center; gap: 10px; white-space: normal; } .k-check { width: 22px; height: 22px; flex: none; border: 1px solid var(--ctp-surface1); border-radius: var(--r-sm); background: var(--ctp-base); color: var(--ctp-green); font-size: 13px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; } .k-check:hover { border-color: var(--ctp-overlay0); } .k-check.an { background: var(--tint-green); border-color: var(--ctp-green); } .k-text.an { color: var(--ctp-subtext0); } .k-del { border: none; background: none; color: var(--ctp-overlay0); cursor: pointer; padding: 2px 4px; font-size: 12px; opacity: 0; } ul.k-liste li:hover .k-del, .k-del:focus-visible { opacity: 1; } .k-del:hover { color: var(--ctp-red); } .k-neu input { border: none; background: transparent; font-size: 12.5px; padding: 4px 0 0; width: 100%; min-width: 220px; } .k-neu input::placeholder { color: var(--ctp-overlay0); } /* Mitarbeit-Raster */ .mzelle { text-align: center; cursor: pointer; } .mzelle:focus { outline: none; } .mzelle:focus .asv-wert { box-shadow: 0 0 0 2px var(--ctp-blue); } .ma-kopf { cursor: pointer; } .ma-kopf:hover { background: var(--ctp-surface1); } .ma-schnitt { text-align: center; } /* Chip-Darstellung (Mitarbeit + ASV-Tab): jede Stufe in gleich großem, getöntem Feld (Spez. .asv-wert. schlägt :hover) */ .mitarbeit .asv-wert, .asv-tab .asv-wert { width: 44px; min-width: 0; padding: 8px 0; text-align: center; border-radius: var(--r-sm); } .mitarbeit .asv-wert.asv-mm, .asv-tab .asv-wert.asv-mm { background: color-mix(in srgb, var(--ctp-maroon) 15%, transparent); } .mitarbeit .asv-wert.asv-m, .asv-tab .asv-wert.asv-m { background: color-mix(in srgb, var(--ctp-peach) 17%, transparent); } .mitarbeit .asv-wert.asv-leer, .asv-tab .asv-wert.asv-leer { color: var(--ctp-subtext0); background: color-mix(in srgb, var(--ctp-overlay0) 16%, transparent); } .mitarbeit .asv-wert.asv-p, .asv-tab .asv-wert.asv-p { background: var(--tint-teal); } .mitarbeit .asv-wert.asv-pp, .asv-tab .asv-wert.asv-pp { background: var(--tint-green); } .ma-schnitt .asv-wert { cursor: default; } .ma-note { font-family: var(--font-mono); font-weight: 600; } /* Statistik – Karten-Raster (kompakte Karten, nach Note gefärbter Notenspiegel) */ .stat-raster { width: 100%; margin: 18px 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .stat-karte { width: 100%; max-width: 620px; background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); padding: 14px 16px 16px; } .stat-karte .sk-leer { margin: 8px 0 0; } .sk-kopf { display: flex; align-items: center; gap: 8px; } .sk-titel { font-size: 15px; font-weight: 600; color: var(--ctp-mauve); } .sk-hint { font-size: 11.5px; color: var(--ctp-overlay1); } .sk-spacer { flex: 1; } .sk-anzahl { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ctp-mauve); background: var(--tint-mauve); padding: 2px 9px; border-radius: 99px; white-space: nowrap; } .sk-linie { height: 1px; background: var(--ctp-surface1); margin: 11px 0 13px; } .sk-koerper { display: flex; gap: 20px; align-items: flex-start; } .sk-kennzahlen { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; } .sk-schnitt { display: flex; align-items: baseline; gap: 8px; } .sk-schnitt-label { font-size: 12px; color: var(--ctp-subtext0); } .sk-schnitt-wert { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1; } .sk-kz-zeile { display: flex; gap: 18px; flex-wrap: wrap; } .sk-kz { display: flex; flex-direction: column; gap: 2px; } .sk-kz-label { font-size: 11px; color: var(--ctp-overlay1); } .sk-kz-wert { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--ctp-text); } .sk-kz-wert .hinweis { font-family: var(--font-sans); } .sk-pill { font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--ctp-text) 8%, transparent); padding: 1px 7px; border-radius: 99px; } .sk-quote { display: flex; flex-direction: column; gap: 4px; } .sk-quote-spur { height: 6px; background: var(--ctp-surface0); border-radius: 99px; overflow: hidden; } .sk-quote-fill { height: 100%; border-radius: 99px; } .sk-spiegel { display: flex; align-items: flex-end; gap: 6px; } .sk-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 24px; } .sk-bcount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; height: 14px; } .sk-bspur { width: 100%; height: 70px; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--ctp-text) 4%, transparent); border-radius: var(--r-sm) var(--r-sm) 0 0; } .sk-bfill { width: 100%; min-height: 2px; border-radius: var(--r-sm) var(--r-sm) 0 0; } .sk-blabel { font-family: var(--font-mono); font-size: 12px; color: var(--ctp-subtext0); } /* Modal */ /* Fehlerbanner (fehlgeschlagene Aktionen, siehe zeigeFehler in app.js) */ #fehler-banner { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 90px); background: var(--ctp-red); color: var(--ctp-base); padding: 10px 18px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; max-width: min(90vw, 560px); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); z-index: 100; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; } #fehler-banner.sichtbar { opacity: 1; transform: translate(-50%, 0); } #modal-root .schleier { position: fixed; inset: 0; background: color-mix(in srgb, var(--ctp-mantle) 45%, rgba(0,0,0,.45)); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 50; overflow-y: auto; } #modal-root .modal { background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-radius: var(--r-lg); padding: 22px; width: 100%; max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,.3); } #modal-root .modal.gross { max-width: 760px; } #modal-root .modal h2 { margin-top: 0; } .modal-aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .modal-aktionen .links { margin-right: auto; } /* Login */ .login-box { max-width: 380px; margin: 80px auto; } /* Druck: immer hell, unabhängig vom Theme */ @media print { /* ausgewogener Seitenrand – oben war sonst zu knapp */ @page { margin: 16mm 12mm; } :root, :root[data-theme] { --ctp-text: #1e2030; --ctp-subtext0: #55576b; --ctp-overlay1: #8a8a96; --ctp-surface1: #c4c4cc; --ctp-surface0: #e2e2e6; --ctp-base: #ffffff; --ctp-mantle: #f5f5f5; --ctp-red: #d20f39; --ctp-yellow: #c98a1a; --ctp-flamingo: #cf6f6f; --ctp-pink: #c44aad; --ctp-maroon: #c0444f; --ctp-sapphire: #1f8fa3; --ctp-teal: #157f76; --ctp-mauve: #7a3fc0; --ctp-blue: #1e66f5; --ctp-green: #40a02b; --on-akzent: #ffffff; } .topbar, .tabs, .kein-druck, button, .nhinweis { display: none !important; } body { background: #fff; font-size: 11px; } .container { max-width: none; padding: 0; } .kurspanel { border: none; padding: 0; margin: 0; background: none; } .kurspanel-inner { width: auto; max-width: none; } .kurspanel-inner > .tabelle-wrap { margin: 0; width: auto; max-width: none; } .tabelle-wrap { border: none; overflow: visible; } .tabelle-wrap table { border-style: none; } /* im Druck äußere Zellränder wieder zeigen (Wrap-Rahmen fehlt) */ table.noten, table.asv { font-size: 10px; } td.nzelle input { padding: 2px; } /* Touch-Maße im Druck zurücknehmen – Ausdrucke bleiben so kompakt wie vor der Touch-Optimierung */ table.noten tbody td, table.noten thead th { padding-top: 8px; padding-bottom: 8px; } table.asv:not(.bericht) th, table.asv:not(.bericht) td { padding: 8px; } /* Bericht als A4-Blatt: Karte auflösen, kompakte Maße, Themen/Gruppen nicht umbrechen */ /* wie am Bildschirm: die Tabelle bestimmt die Blattbreite (Kopf/Themen/Fuß bündig) */ /* Kurs-Kopfzeile im Bericht-Druck weg – das Bericht-Blatt trägt die Kopfdaten selbst */ body:has(.bericht-blatt) .kurskopf { display: none !important; } .bericht-blatt { border: none; border-radius: 0; padding: 0; margin: 0 auto; width: max-content; max-width: 100%; overflow: visible; } table.bericht { font-size: 10px; } table.bericht th, table.bericht td { padding: 2px 5px; } /* enge feste Spalten: kompakt wie am Bildschirm, statt die A4-Breite zu füllen (~150mm) */ table.bericht col.bk-name { width: 120px; } table.bericht.fld-aus col.bk-name { width: 160px; } table.bericht col.bk-fld { width: 40px; } table.bericht col.bk-n { width: 40px; } table.bericht col.bk-t { width: 16px; } table.bericht col.bk-a { width: 26px; } table.bericht col.bk-fs { width: 44px; } .bem-liste { font-size: 9.5px; grid-template-columns: 110px 1fr; } .bem-klasse { font-size: 9.5px; break-after: avoid; } .b-kurs { font-size: 16px; } .b-modus { background: none; color: var(--akzent); border: 1px solid var(--akzent); } .b-unter, .b-rechts { font-size: 11px; } .bt-titel { font-size: 11px; } .b-thema ul { font-size: 9.5px; } .b-themen { gap: 4px 8mm; } .b-fuss { font-size: 8.5px; } .b-thema, tr.b-gruppe { break-inside: avoid; } /* Seiten-h1 wäre doppelt zum Blatt-Kopf (nur im Bericht-Tab ausblenden) */ .container:has(.bericht-blatt) > h1 { display: none; } /* FLD-Badges und ASV-Symbole im Druck ohne Farbe (Änderungs-Tönung bleibt) */ table.bericht .fld-badge { font-size: 10px; padding: 0; background: none; color: var(--ctp-text); } table.bericht .asv-mm, table.bericht .asv-m, table.bericht .asv-p, table.bericht .asv-pp { color: var(--ctp-text); } /* ASV-Fläche in die schmale Druckspalte (22px) einpassen */ table.bericht td.b-asv > span { min-width: 18px; } table.noten .nnote { font-size: 14px; } td.nzelle .nnote { padding-top: 8px; padding-bottom: 8px; } table.noten col.kol-fld { width: 36px; } table.noten col.kol-s, table.noten col.kol-m { width: 58px; } table.noten col.kol-e { width: 64px; } .fld-badge { font-size: 11px; padding: 1px 6px; } .asv-wert { min-width: 36px; padding: 2px 6px; } .mitarbeit .asv-wert { width: 34px; padding: 3px 0; } }