/* ============================================== K+K (Kunst + Krempel) — Bavaria Entertainment Tool-spezifische Styles ueber Pico CSS + Tinte (Bavaria Design System). Palette, Pico-Overrides, Dark-/Light-Tokens (--t-*) und die ds-Body- Komponenten liefert die kanonische static/css/bavaria-theme.css aus dem tinte-Repo (NACH pico.min.css, VOR dieser Datei eingebunden, Reihenfolge ist load-bearing). Hier nur Chrome (Header/Footer/Nav/Login/Flash) und die wenigen tool-eigenen Zusatz-Tokens. ============================================== */ :root { /* JetBrains Mono fuer Code/IDs, vom gemeinsamen Theme nicht geliefert. */ --f-mono: "JetBrains Mono", ui-monospace, monospace; /* Dunkleres Teal fuer Hover-/Active-Flaechen. */ --t-teal-dark: #00566b; /* Scroll-Schatten-Affordance (BENT-1883): Farbe des Rand-Fades an horizontal scrollbaren Containern (Nav, Tabellen). Overlay-Technik statt background- attachment, damit opake Kind-Hintergruende (Tab-Aktiv, Tabellen-Header/ Zebra) den Schatten nicht mehr verdecken. Dark-Mode etwas kraeftiger, weil der Fade auf dunklem Grund sonst kaum sichtbar ist. */ --kk-scroll-shadow: rgba(15, 29, 34, 0.22); --kk-scroll-shadow-breite: 16px; } :root[data-theme="dark"] { --t-teal-dark: var(--t-teal-light); --kk-scroll-shadow: rgba(0, 0, 0, 0.55); } body { background-color: var(--t-bg); color: var(--t-ink); font-family: var(--f-sans); } /* ======================================== HEADER (sticky, Card-BG: Brand + Logout, Tab-Bar) ======================================== */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--t-card); border-bottom: 1px solid var(--t-rule); margin-bottom: 0; } .site-header__inner { /* Eine Quelle fuer den Header-Innenabstand: die Full-bleed-Tab-Nav zieht ihr negatives Margin ueber genau dieses Token wieder heraus (siehe .tab-nav). Wichtig: als Custom Property vererbt, damit die schmale Variante im @media-Block unten nicht von der spaeter im File stehenden .tab-nav-Regel ueberschrieben werden kann (gleiche Spezifitaet, Quellreihenfolge gewinnt sonst; genau das erzeugte den Seiten-Overflow, BENT-2037). */ --kk-header-pad: 32px; max-width: 1400px; margin: 0 auto; padding: 0 var(--kk-header-pad); } .site-header__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 0 0; flex-wrap: wrap; } .page-main { max-width: 1400px; margin: 0 auto; padding: 24px 32px 60px; } @media (max-width: 640px) { /* Schmalerer Innenabstand; die Tab-Nav zieht ihn ueber --kk-header-pad automatisch nach (kein zweiter Ort, an dem 18px stehen muss). */ .site-header__inner { --kk-header-pad: 18px; } .page-main { padding: 18px 18px 40px; } } .brand-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--t-ink); transition: color .15s ease; } .brand-mark { display: inline-flex; flex-shrink: 0; } .brand-mark__svg { display: block; } .brand-text { display: flex; flex-direction: column; gap: 4px; } .brand-title { font-family: var(--f-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--t-ink); white-space: nowrap; } .brand-link:hover .brand-title, .brand-link:focus-visible .brand-title { color: var(--t-teal); } /* Öffentliches Grundgerüst (BENT-2863): dieselbe Kopfleiste, anderer Inhalt. Die Bildmarke ist hier kein Link (die interne Startseite ist von einer öffentlichen Seite aus nicht das Ziel), braucht aber dieselbe Ausrichtung wie `.brand-link`. Und ohne die Navigationsleiste darunter fehlt der Kopfleiste ihr unterer Innenabstand: `.site-header__top` setzt ihn bewusst nur oben, weil sonst die Tab-Leiste folgt. */ .brand-static { display: inline-flex; align-items: center; gap: 14px; color: var(--t-ink); } .site-header--public .site-header__top { padding-bottom: 18px; } /* Pico legt jedem `[role="group"]` volle Breite auf, und der Hell/Dunkel- Umschalter ist eine solche Gruppe. Im internen Kopf begrenzt ihn das Listenelement der Navigationsleiste, hier steht er frei und nähme sonst die ganze Zeile ein (am gerenderten Kopf gemessen: 1216 statt rund 120 px, und die Zeile brach dadurch um). */ .site-header--public .ds-theme-toggle { width: auto; flex: 0 0 auto; } .eyebrow { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-muted); line-height: 1; } .site-header__user { display: inline-flex; align-items: center; gap: 14px; } .user-role { font-size: 12px; letter-spacing: 0.04em; color: var(--t-ink-soft); white-space: nowrap; } .logout-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--t-rule); color: var(--t-ink-soft); font-size: 12px; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .logout-pill:hover, .logout-pill:focus-visible { border-color: var(--t-ink-soft); color: var(--t-ink); background: var(--t-bg); } /* ======================================== KOPFLEISTEN-SUCHE (BENT-1659) Globale Objekt-Suche als dauerhaftes Suchfeld im Header. Nutzt die bestehende Route suche.suche_anzeigen (GET, Feld q). Der fruehere Such-Tab in der Tab-Nav ist damit entfallen. ======================================== */ .header-search { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1 1 240px; max-width: 360px; } .header-search__input { flex: 1 1 auto; min-width: 0; margin: 0; height: 36px; padding: 0 12px; border: 1px solid var(--t-rule); border-radius: 999px; background: var(--t-bg); color: var(--t-ink); font-family: var(--f-sans); font-size: 13px; transition: border-color .15s, box-shadow .15s; } .header-search__input::placeholder { color: var(--t-muted); } .header-search__input:focus, .header-search__input:focus-visible { outline: none; border-color: var(--t-teal); box-shadow: 0 0 0 3px var(--t-teal-soft, rgba(0, 128, 128, 0.15)); } .header-search__btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--t-rule); border-radius: 999px; background: var(--t-card); color: var(--t-ink-soft); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .header-search__btn:hover, .header-search__btn:focus-visible { border-color: var(--t-teal); color: var(--t-teal); background: var(--t-bg); } @media (max-width: 640px) { /* Kopfzeile nicht sprengen: Suchfeld bricht unter Marke/Nutzer auf volle Breite um. */ .header-search { flex-basis: 100%; max-width: none; order: 3; } } /* ======================================== TAB-NAV ======================================== */ /* Full-bleed-Scrollreihe: horizontales Padding = Header-Innenabstand, plus negatives Margin gleicher Groesse zieht den overflow-Container bis an die Header-Kante. So bleibt der erste Tab bündig mit der Brand-Flucht, hat aber Puffer zur Clip-Kante und wird beim horizontalen Scrollen sauber abgeschnitten statt am Rand zu kleben (BENT-1602-Nachbesserung). Padding und negatives Margin kommen aus --kk-header-pad (gesetzt auf .site-header__inner, schmalere Variante im @media-Block oben). Vorher standen hier feste 32px; die 18px-Regel im @media-Block hatte dieselbe Spezifitaet, stand aber frueher im File und verlor darum die Quellreihenfolge. Auf schmalen Viewports wuchs die Nav dadurch um 2x14px ueber den Viewport hinaus und die ganze Seite bekam horizontalen Scroll (BENT-2037). */ .tab-nav { padding: 20px var(--kk-header-pad) 0; margin: 0 calc(-1 * var(--kk-header-pad)); overflow-x: auto; /* Scroll-Shadow-Affordance (BENT-1837, auf Overlay-Technik umgestellt in BENT-1883): der Rand-Fade signalisiert horizontal scrollbaren Inhalt. Die Schatten liegen als sticky Pseudo-Elemente UEBER dem Inhalt (siehe Block „SCROLL-SCHATTEN-OVERLAY" weiter unten) und werden nicht mehr vom aktiven Tab-Hintergrund verdeckt. Flex-Container, damit die Pseudo- Elemente als sticky Flex-Items am Rand haengen. */ display: flex; background-color: var(--t-card); } /* ul fuellt die volle Breite (grow), schrumpft aber NIE unter die Tab-Breite (shrink 0): sonst quetscht der Flex-Container die Reihe in den Container und .tab-nav scrollt nicht mehr, sondern schneidet Tabs ab. Seit BENT-3500 traegt die Leiste nur noch Tabs; der Hell-Dunkel-Umschalter sass bis dahin als letztes Element darin und war damit das erste, was ein Ueberlauf verschluckte. */ .tab-nav > ul { flex: 1 0 auto; } .tab-nav ul { list-style: none; padding: 0; margin: 0; display: flex; /* Kleinerer gap gleicht das neue horizontale Tab-Padding (10px je Seite) aus, sodass der Text-zu-Text-Abstand wie zuvor bei ~28px bleibt (BENT-1841). */ gap: 8px; align-items: center; } /* Pico setzt auf `nav ul:first-of-type` ein negatives margin-left (Spezifitaet 0,1,2), das den gesamten Tab-Streifen 7.5px nach links schob und das "S" von "Start" hinter die overflow-Clip-Kante zog. Der bisherige Reset `.tab-nav ul` (0,1,1) verlor gegen diese Regel; mit :first-of-type gleichgezogen. */ .tab-nav ul:first-of-type { margin-left: 0; } /* Tabs behalten auf schmalen Viewports ihre Breite; die Reihe scrollt horizontal im .tab-nav statt einzelne Tabs abzuschneiden (BENT-1602). */ .tab-nav li { flex-shrink: 0; } a.tab-btn { border-bottom: 2px solid transparent; /* Horizontales Padding, damit die aktive Hintergrund-Markierung (unten) Luft um den Text hat; Text-zu-Text-Abstand bleibt via kleinerem ul-gap stabil (BENT-1841). */ padding: 0 10px 14px; font-weight: 500; color: var(--t-muted); font-family: var(--f-sans); font-size: 14px; text-decoration: none; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 6px 6px 0 0; transition: color .15s, border-color .15s, background-color .15s; } a.tab-btn:hover, a.tab-btn:focus-visible { color: var(--t-ink); background: var(--t-teal-tint); } /* Aktiver Tab deutlich markiert (BENT-1841): kräftige Markenfarbe, fett, dickere Unterstrich-Linie und ein sanfter Hintergrund-Pill. Die dünne, kontrastarme Linie allein war beim Seitenwechsel kaum zu erkennen. Wirkt in Light und Dark, weil alle Werte aus den Theme-Tokens kommen. */ a.tab-btn.active, a.tab-btn.active:hover, a.tab-btn.active:focus-visible { color: var(--t-teal); font-weight: 700; border-bottom: 3px solid var(--t-teal); background: var(--t-teal-tint); } /* Werkzeuge der Kopfzeile: Rollenanzeige, Abmelden und der Hell-Dunkel- Umschalter (BENT-3500). Sie stehen zusammen am rechten Rand, damit der Umschalter nicht mehr am Ende der scrollenden Tab-Leiste haengt. Pico legt jedem `[role="group"]` volle Breite auf, und der Umschalter ist eine solche Gruppe: ohne die Breiten-Korrektur naehme er die ganze Zeile (dieselbe Falle wie im oeffentlichen Kopf, siehe `.site-header--public .ds-theme-toggle`). */ .site-header__werkzeuge { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .site-header__werkzeuge .ds-theme-toggle { width: auto; flex: 0 0 auto; } /* ======================================== SEKUNDÄR-NAVIGATION DISPOSITION (BENT-1872) ======================================== */ /* Tab-Leiste unter dem Seitentitel der Dispositions-Seiten (Aufzeichnungen · Expert:innen · Blockplanung · Drehplan). Kleinere Variante der Hauptnav; macht die zuvor versteckten Unterseiten überall sichtbar. Gleiches Scroll-Shadow- Muster wie .tab-nav/.ds-table-wrapper (BENT-1837/1838): auf schmalen Viewports scrollt die Leiste horizontal, der Rand-Fade signalisiert das. Kein JS. */ .ds-subtabs { display: flex; gap: 6px; align-items: center; margin: 0 0 1.5rem; padding-bottom: 2px; border-bottom: 1px solid var(--t-rule); overflow-x: auto; /* Scroll-Shadow-Overlay (BENT-1872, auf Overlay-Technik umgestellt in BENT-1883): gleicher Rand-Fade wie .tab-nav/.ds-table-wrapper, jetzt als sticky Pseudo-Elemente ueber dem Inhalt (Block „SCROLL-SCHATTEN-OVERLAY"). */ background-color: var(--t-bg); } .ds-subtab { flex-shrink: 0; white-space: nowrap; padding: 8px 12px 10px; margin-bottom: -1px; font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--t-muted); text-decoration: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; transition: color .15s, border-color .15s, background-color .15s; } .ds-subtab:hover, .ds-subtab:focus-visible { color: var(--t-ink); background: var(--t-teal-tint); } .ds-subtab--active, .ds-subtab--active:hover, .ds-subtab--active:focus-visible { color: var(--t-teal); font-weight: 700; border-bottom-color: var(--t-teal); background: var(--t-teal-tint); } /* ======================================== FOOTER ======================================== */ .site-footer { background-color: var(--t-card); color: var(--t-muted); margin-top: 3rem; padding: 20px 0; border-top: 1px solid var(--t-rule); font-size: 11px; } .site-footer__inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; } .footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--t-muted); } .footer-name { color: var(--t-ink-soft); font-weight: 500; } .footer-version { color: var(--t-faint); } .footer-links { display: flex; gap: 1.25rem; } .footer-links a { color: var(--t-muted); text-decoration: none; transition: color .15s ease; } .footer-links a:hover, .footer-links a:focus-visible { color: var(--t-teal); } .footer-copy small { color: var(--t-faint); font-size: 11px; } @media (max-width: 576px) { .footer-content { flex-direction: column; text-align: center; } } /* ======================================== FLASH-MELDUNGEN als schwebende Toasts (BENT-2042) Den Basis-Look der Meldung (.flash-error/-success/-warning/-info samt Praefix und .flash-dismiss) liefert das Design-System (tinte-base.css); hier liegt nur die Toast-Schicht: Position, Stapel, deckender Grund, Ein-/Ausblenden. Die frueher hier stehende Kopie der DS-Regeln ist bewusst entfallen (sie kannte .flash-warning nicht, Warnungen liefen dadurch ungestylt). Warum fixed: Die Meldungen standen oben in `page-main` und waren bei gescrollter Seite bzw. nach Anker-Redirects schlicht ausserhalb des Viewports; die Bestaetigung einer Aktion kam nie an. Als Toast erscheinen sie in jeder Scroll-Position. ======================================== */ .flash-toasts { position: fixed; /* Unter dem sticky Header. Die echte Header-Hoehe setzt flash-toasts.js als --kk-header-h; der Fallback traegt den ungescrollten Normalfall. */ top: calc(var(--kk-header-h, 116px) + 14px); right: 24px; /* Ueber dem sticky Header (z-index 20), aber unter der Lightbox (1000). */ z-index: 900; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 48px)); /* Der Stapel selbst faengt keine Klicks ab, nur die Toasts darin. */ pointer-events: none; } .flash-toast { pointer-events: auto; /* Abstand im Stapel kommt aus dem gap, nicht mehr aus dem DS-margin. */ margin: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10); transition: opacity .3s ease, transform .3s ease; /* Die Tint-Toene des DS sind im Dark Mode halbtransparent (rgba). Schwebend ueber dem Inhalt braucht der Toast eine deckende Grundflaeche, sonst scheint die Seite durch: Karten-Grund unten, Tint als Layer darueber. */ background-color: var(--t-card); } .flash-toast.flash-error { background-image: linear-gradient(var(--t-red-tint), var(--t-red-tint)); } .flash-toast.flash-success { background-image: linear-gradient(var(--t-green-tint), var(--t-green-tint)); } .flash-toast.flash-warning { background-image: linear-gradient(var(--t-amber-tint), var(--t-amber-tint)); } .flash-toast.flash-info { background-image: linear-gradient(var(--t-teal-hi-tint), var(--t-teal-hi-tint)); } /* Sanftes Ausblenden (Auto-Hide bei Erfolg/Hinweis). */ .flash-toast.is-leaving { opacity: 0; transform: translateY(-6px); } @media (max-width: 640px) { /* Schmale Viewports: volle Breite statt schmaler Saeule am Rand. */ .flash-toasts { top: calc(var(--kk-header-h, 116px) + 10px); right: 12px; left: 12px; width: auto; } } @media (prefers-reduced-motion: reduce) { .flash-toast { transition: none; } } /* ======================================== LOGIN-SEITE ======================================== */ .login-body { background: var(--t-bg); color: var(--t-ink); font-family: var(--f-sans); min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 32px; } .login-frame { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 28px; } .login-brand { display: flex; align-items: center; gap: 14px; } .login-wordmark { font-family: var(--f-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--t-ink); margin-bottom: 4px; } .login-card { background: var(--t-card); border: 1px solid var(--t-rule); border-radius: 12px; padding: 32px; } .login-headline { font-size: 32px; line-height: 1.1; margin: 0 0 8px; font-weight: 500; } .login-sub { font-size: 14px; color: var(--t-ink-soft); line-height: 1.55; margin: 0 0 20px; } .login-error { background: var(--t-red-tint); color: var(--t-red); border-left: 3px solid var(--t-red); padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 12px; } .login-form { display: flex; flex-direction: column; gap: 8px; } .login-label { font-size: 12px; font-weight: 600; color: var(--t-ink); margin: 4px 0 -2px; } .login-form input[type="password"] { padding: 10px 14px; border: 1px solid var(--t-rule); border-radius: 8px; font-family: var(--f-sans); font-size: 14px; background: var(--t-card); color: var(--t-ink); margin-bottom: 8px; } .login-form input[type="password"]:focus { border-color: var(--t-teal-hi); outline: none; } .login-cta { width: 100%; background: var(--t-teal); border: 1px solid var(--t-teal); color: #fff; font-family: var(--f-sans); font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s; } .login-cta:hover { background: var(--t-teal-dark); border-color: var(--t-teal-dark); } .login-footer { display: flex; justify-content: center; gap: 12px; font-size: 11px; color: var(--t-muted); } .login-footer a { color: var(--t-muted); text-decoration: none; } .login-footer a:hover { color: var(--t-teal); } .login-theme { display: flex; justify-content: center; } /* ---------------------------------------------------------------------- Foto-Upload: die Flaeche jeder Upload-Stelle ist seit BENT-3521 der kanonische Tinte-Baustein `drop-zone-pro` (static/css/tinte-base.css), die kompakte Dichte sein Modifikator `drop-zone-pro--compact` (BENT-3570). Das Markup dazu steht einmal in templates/_foto_dropzone.html. Tool-lokal bleibt hier genau eine Regel, und sie hat einen Grund: Die Referenzseite des Designsystems verbirgt ihr Datei-Feld mit `hidden`, und ein verborgenes Feld ist weder fokussierbar noch validierbar; das `required` des ersten Foto-Slots und die Pruefung des Browsers liefen damit ins Leere, und ohne JavaScript waere die Flaeche unbedienbar. Das Feld ist deshalb nur visuell verborgen (Klick auf das umschliessende Label oeffnet weiterhin den Dateidialog). Die frueheren tool-eigenen Regeln um die Klasse foto-dropzone sind ersatzlos entfallen: Sie waren die Grundform vor der Nachschaerfung vom 13.08.2026, und jetzt liest sie niemand mehr; eine stehen gebliebene Regel waere die Vorlage fuer das naechste eigene Muster. ---------------------------------------------------------------------- */ .drop-zone-pro .foto-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------- Fehlende Pflichtangabe im Bewerbungsformular (BENT-3269). Gesetzt von static/js/bewerbung-pflichtfelder.js, wenn ein Absenden wegen einer fehlenden Angabe zurueckgehalten wurde. Bewusst ein Umriss statt eines Rahmens: dieselbe Regel traegt Eingabefeld, Menue, Textbereich, die Foto-Flaeche (deren Datei-Feld visuell verborgen ist) und das Einwilligungs-Label, ohne dass jede Form ihre eigene braucht. Die Farbe traegt die Aussage nie allein, der Sammelkasten oben nennt jedes fehlende Feld im Klartext. ---------------------------------------------------------------------- */ .ds-feld-fehlt { outline: 2px solid var(--t-red); outline-offset: 3px; border-radius: 4px; } /* ---------------------------------------------------------------------- Merkmale-Tabelle im KI-Bericht (BENT): saubere Spaltenbreiten, damit die kurzen Spalten nicht zerquetscht werden und Ueberschriften nicht buchstabenweise umbrechen. Einschaetzung nimmt den Rest der Breite. ---------------------------------------------------------------------- */ .bericht-merkmale th { white-space: nowrap; } .bericht-merkmale td:first-child { white-space: nowrap; } /* Merkmal */ .bericht-merkmale td:nth-child(3) { white-space: nowrap; } /* Quelle */ .bericht-merkmale th:last-child, .bericht-merkmale td:last-child { white-space: nowrap; text-align: center; } /* Konfidenz */ .bericht-merkmale td:nth-child(2) { width: 100%; } /* Einschaetzung */ /* ====================================================================== K+K-eigene ds-Bausteine (BENT-1594, Hybrid-Option c) Die breit wiederverwendbaren Klassen (ds-btn*, ds-alert*, ds-hint, ds-form-group/-label/-actions) liefert das gemeinsame Tinte-Theme (static/css/bavaria-theme.css). Hier nur die K+K-spezifischen Reste, die in den Templates verwendet, aber nirgends definiert waren. ====================================================================== */ /* --- Override: .ds-btn margin-neutral (BENT-1657) --- Die Button-Basis lebt in der Tinte-Kopie (bavaria-theme.css) und setzt kein eigenes Margin, erbt also den Pico-Default margin-bottom: 0.75rem. In align-items:center-Flex-Leisten (.ds-actionbar, Mail-Zeile, PDF/Drucken) zentriert der Browser die Margin-Box, wodurch der sichtbare Button nach oben rutscht und die Leiste asymmetrisch wirkt. Design-System-Buttons sind margin-neutral, den Abstand macht der Container (gap/actionbar). KK-lokal neutralisieren statt die Tinte-Kopie anzufassen (siehe CLAUDE.md). Dauerhaft gehoert margin:0 in die .ds-btn-Basis im Tinte-Quell-Repo (separat). */ .ds-btn { margin: 0; } /* --- Pflichtfeld-Sternchen / optional-Marker im Bewerbungsformular --- */ .pflicht { color: var(--t-red); font-weight: 700; } .ds-optional { color: var(--t-muted); font-weight: 400; font-size: 0.85em; } /* --- Formular-Zeilen-Layouts (oeffentliches Bewerbungsformular) --- */ .ds-form-row { margin-bottom: 0.25rem; } .ds-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ds-form-row--foto { display: grid; grid-template-columns: 1fr minmax(10rem, auto); gap: 1rem; align-items: start; } @media (max-width: 600px) { .ds-form-row--2col, .ds-form-row--foto { grid-template-columns: 1fr; } } .ds-form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* --- Vollbreite Felder mit ds-Klasse (Pico stylt die Elemente selbst) --- */ .ds-select, .ds-textarea { width: 100%; } /* --- Fieldset mit Legende (Extraktions-Bestaetigung) --- */ .ds-fieldset { border: 1px solid var(--t-rule); border-radius: var(--be-radius); padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.5rem; } .ds-fieldset > legend { font-weight: 600; font-size: 0.9rem; color: var(--t-ink); padding: 0 0.4rem; } /* --- Die zwei Foto-Wege des Eingangs, unverwechselbar (BENT-3271) --- * * Objektfotos und Personenfoto standen als zwei gleich aussehende Felder * untereinander; dem Tool-Test der Redaktion (BENT-3267) ist deshalb zweimal * beinahe das Portraet an das Objekt gerutscht. Die Ueberschriften nennen jetzt * die Folge, die farbige Kante trennt die Gruppen auch auf einen Blick. Die * Farbe traegt die Aussage dabei nie allein (Regel aus BENT-2772): Der Wortlaut * der Legende sagt dasselbe. * * Vergeben ist die Farbe passend zum Bestand: Teal ist die Arbeitsfarbe des * Werkzeugs, Violett steht im Objektbericht bereits fuer die einreichende * Person (`.ds-herkunft--einreicher`). */ .ds-fotogruppe { border-left-width: 4px; } .ds-fotogruppe > legend { font-size: 0.95rem; line-height: 1.35; } .ds-fotogruppe--objekt { border-left-color: var(--t-teal); } .ds-fotogruppe--objekt > legend { color: var(--t-teal); } .ds-fotogruppe--person { border-left-color: var(--kk-violett); } .ds-fotogruppe--person > legend { color: var(--kk-violett); } /* --- Einwilligungs-Checkbox: Kaestchen neben mehrzeiligem Text --- */ .ds-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.6rem 0; font-size: 0.9rem; line-height: 1.5; cursor: pointer; } .ds-checkbox input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; } /* --- Info-Box (Foto-Typ-Hinweis im Bewerbungsformular) --- */ .ds-info-box { background: var(--t-teal-tint); border: 1px solid var(--t-rule); border-left: 3px solid var(--t-teal); border-radius: var(--be-radius); padding: 0.7rem 0.95rem; margin: 0.75rem 0; font-size: 0.88rem; color: var(--t-ink); } .ds-info-box[hidden] { display: none; } /* --- Warteseite: Ladekarte mit Spinner (Extraktion) --- */ .ds-loading-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; background: var(--t-card); border: 1px solid var(--t-rule); border-radius: var(--be-radius-lg); padding: 2.5rem 1.5rem; } .ds-spinner { width: 2.5rem; height: 2.5rem; border: 3px solid var(--t-rule); border-top-color: var(--t-teal); border-radius: 50%; animation: ds-spin 0.8s linear infinite; } /* Kleiner Inline-Spinner fuer Buttons/Banner (BENT-1877, Job-Feedback). */ .ds-spinner--inline { display: inline-block; width: 1em; height: 1em; border-width: 2px; vertical-align: -0.15em; margin-right: 0.35em; } @keyframes ds-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ds-spinner { animation-duration: 2s; } } /* --- Erfolgskarte (Bewerbung eingegangen) --- */ .ds-success-card { text-align: center; background: var(--t-card); border: 1px solid var(--t-rule); border-radius: var(--be-radius-lg); padding: 2.5rem 1.75rem; } /* Warteliste am Einwilligungs-Gate (BENT-2860/2873): Das Aufklapp-Panel der Zeilen-Variante steht im Fluss (siehe `.ds-actiondrop--row`), und ein Panel ohne Breitenbegrenzung spreizt darum die Aktionsspalte, bis die Objektspalte daneben auf wenige Zeichen zusammenfaellt. Die Spalte bekommt deshalb eine feste Breite und das Panel eine eigene; die Tabelle behaelt ihre Spaltenverteilung, ob der Aufklapper offen ist oder nicht. */ .ds-warteliste .ds-col-aktion { width: 15rem; } .ds-warteliste .ds-actiondrop__panel { width: 22rem; max-width: 100%; } /* Frisch ausgestellter Bestätigungslink (BENT-2864). Die Zeile wird nach dem Ausstellen hervorgehoben, damit man sie unter vielen Wartefällen wiederfindet; dieselbe Technik wie die Sprungmarke im Verfügbarkeits-Grid (BENT-2054), also reine Orientierungshilfe und kein Zustand der Bewerbung. */ .ds-warteliste tbody tr.is-fokus > td { background: var(--t-teal-hi-tint); } .ds-warteliste tbody tr.is-fokus > td:first-child { box-shadow: inset 3px 0 0 0 var(--t-teal); } /* Der Link selbst steht sichtbar da, nicht nur hinter „Link kopieren“: Solange der automatische Versand aus ist, ist die Übergabe von Hand der einzige Weg nach draußen, und ein Link, den man erst aufdecken muss, sieht aus wie einer, der schon unterwegs ist. `overflow-wrap` statt Kürzung, weil ein halber Link nicht trägt: Er muss vollständig markierbar bleiben. */ .ds-warteliste .ds-linkfrisch { margin-top: .6rem; } .ds-warteliste .ds-linkfrisch__url { display: block; margin-top: .4rem; font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; user-select: all; } /* `.ds-lead` bringt aus der vendorten Theme-Schicht `max-width: 62ch` mit (eine Lesebreite, richtig so), aber kein auto-Margin. In einer zentrierten Karte sitzt der Block deshalb am linken Rand, waehrend sein Text mittig steht: Die Zeilen brechen dann sichtbar frueher um als der Rest der Karte und der Umbruch wirkt zufaellig (BENT-2872). Der Block gehoert hier in die Mitte, die Lesebreite bleibt. Bewusst KK-lokal und eng auf die zentrierte Karte gefasst, statt in `bavaria-theme.css`: dort gilt die Regel fuer alle Tools, und linksbuendige Karten (`.ds-card`) sollen den Absatz weiterhin links haben. */ .ds-success-card .ds-lead { margin-inline: auto; } .ds-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--t-green-tint); color: var(--t-green); margin-bottom: 0.5rem; } /* --- Definitionsliste (Ruecklauf-Status) --- */ .ds-definition-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0.5rem 0 0; } .ds-definition-list dt { font-weight: 600; color: var(--t-muted); font-size: 0.85rem; } .ds-definition-list dd { margin: 0; } /* --- Ergebnis-Liste des Nachrichten-Eingangs (BENT-2040) --- Ein Eintrag pro Zeile. Vorher lief die Liste ueber .ds-definition-list, ein zweispaltiges Grid: die Eintraege quetschten sich nebeneinander, statt untereinander zu stehen. Darum eine eigene, bewusst einspaltige Karten-Liste. */ .ds-ergebnisliste { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; padding: 0; } .ds-ergebnisliste__item { border: 1px solid var(--t-rule); border-radius: var(--be-radius); padding: 0.8rem 1rem; background: var(--t-card); } .ds-ergebnisliste__titel { margin: 0 0 0.2rem; font-weight: 600; } .ds-ergebnisliste__satz { margin: 0 0 0.5rem; color: var(--t-muted); font-size: 0.9rem; } /* --- Tabelle mit Rahmen-Wrapper (Endauswahl, Verfuegbarkeit) --- */ .ds-table-wrapper { overflow-x: auto; border: 1px solid var(--t-rule); border-radius: var(--be-radius); /* Scroll-Shadow-Affordance (BENT-1838, auf Overlay-Technik umgestellt in BENT-1883): Fade am linken/rechten Tabellenrand, solange horizontal ungescrollter Inhalt folgt. Die Schatten liegen als sticky Pseudo-Elemente UEBER der Tabelle (Block „SCROLL-SCHATTEN-OVERLAY" weiter unten) und werden nicht mehr von Tabellen-Header/Zebra-/Hover-Hintergruenden verdeckt. Flex-Container, damit die Pseudo-Elemente als sticky Flex-Items am Tabellenrand haengen; die Tabelle bleibt das fuellende Flex-Item. */ display: flex; background-color: var(--t-card); } .ds-table-wrapper > .ds-table { /* fuellt die Wrapper-Breite, schrumpft aber nie unter die Spaltenbreite: bei Ueberlauf scrollt der Wrapper horizontal (statt Spalten zu quetschen). */ flex: 1 0 auto; } .ds-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.9rem; } /* ======================================== SCROLL-SCHATTEN-OVERLAY (BENT-1883) ---------------------------------------- Horizontal scrollbare Container (.tab-nav, .ds-subtabs, .ds-table-wrapper) zeigen am jeweiligen Rand einen Fade, solange dort ungescrollter Inhalt liegt. Robust gegen opake Kind-Hintergruende (anders als das alte background-attachment-Muster aus BENT-1837/1838, das der aktive Tab bzw. Tabellen-Header/Zebra verdeckten): die Schatten sind sticky Pseudo-Elemente UEBER dem Inhalt (z-index, pointer-events:none). Ihre Sichtbarkeit steuert static/js/scroll-shadow.js ueber die Klassen .is-scrollable-links / .is-scrollable-rechts. Voraussetzung: der Container ist ein Flex-Zeilen- container (die drei Container setzen display:flex). Kein background-attachment, damit auch Safari/iPad-Scrollcontainer verlaesslich rendern. ======================================== */ .tab-nav::before, .tab-nav::after, .ds-subtabs::before, .ds-subtabs::after, .ds-table-wrapper::before, .ds-table-wrapper::after { content: ""; position: sticky; flex: 0 0 var(--kk-scroll-shadow-breite); width: var(--kk-scroll-shadow-breite); align-self: stretch; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .15s ease; } /* Linker Rand-Schatten: haengt links, negatives Margin nach rechts hebt den Flex-Platzbedarf auf (Overlay statt Layout-Verschiebung). */ .tab-nav::before, .ds-subtabs::before, .ds-table-wrapper::before { order: -1; left: 0; margin-right: calc(-1 * var(--kk-scroll-shadow-breite)); background: linear-gradient(to right, var(--kk-scroll-shadow), transparent); } /* Rechter Rand-Schatten. */ .tab-nav::after, .ds-subtabs::after, .ds-table-wrapper::after { order: 1; right: 0; margin-left: calc(-1 * var(--kk-scroll-shadow-breite)); background: linear-gradient(to left, var(--kk-scroll-shadow), transparent); } .tab-nav.is-scrollable-links::before, .ds-subtabs.is-scrollable-links::before, .ds-table-wrapper.is-scrollable-links::before { opacity: 1; } .tab-nav.is-scrollable-rechts::after, .ds-subtabs.is-scrollable-rechts::after, .ds-table-wrapper.is-scrollable-rechts::after { opacity: 1; } .ds-table th, .ds-table td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--t-rule); } .ds-table th { font-weight: 600; color: var(--t-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .ds-table tbody tr:last-child td { border-bottom: none; } /* Klickbarer Zellen-Link (z. B. Themengebiet-Name -> Cockpit, BENT-1779): signalisiert per Farbe klar, dass die Zelle anklickbar ist. */ .ds-table-link { color: var(--t-teal); text-decoration: none; } .ds-table-link:hover, .ds-table-link:focus-visible { text-decoration: underline; } /* Bulk-Leiste ueber einer Tabelle (BENT-2050): Sammel-Aktion fuer markierte Zeilen, erster Fall „An Expert:in senden" im Endauswahl-Cockpit. Das Formular steht bewusst AUSSERHALB der Tabelle (ein
im waere ungueltiges HTML, BENT-2056); die Zeilen-Checkboxen binden per form="…"-Attribut daran. */ .ds-bulkbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--t-border, #d8d8d8); border-radius: 8px; background: var(--t-surface-2, transparent); } .ds-bulkbar .ds-label { margin: 0; white-space: nowrap; } .ds-bulkbar .ds-hint { flex: 1 1 16rem; margin: 0; } /* --- Sortier- und Filter-Erweiterung fuer ds-table (BENT-1776) --- */ .ds-table-filter { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; flex-wrap: wrap; } .ds-table-filter__input { width: 18rem; max-width: 100%; margin: 0; } .ds-table-filter__count { font-size: 0.8rem; color: var(--t-muted); } /* Sortierbare Kopfzelle: klickbar, mit Richtungs-Indikator. */ .ds-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .ds-th-sortable::after { content: "↕"; margin-left: 0.35em; opacity: 0.35; font-size: 0.9em; } .ds-th-sortable[aria-sort="ascending"]::after { content: "↑"; opacity: 0.9; } .ds-th-sortable[aria-sort="descending"]::after { content: "↓"; opacity: 0.9; } .ds-th-sortable:hover { color: var(--t-ink); } .ds-th-sortable:focus-visible { outline: 2px solid var(--t-teal); outline-offset: -2px; } /* Vom Filter ausgeblendete Zeilen. */ .ds-table tbody tr.ds-row-hidden { display: none; } /* ======================================== ENDAUSWAHL-COCKPIT: Spaltenbreiten (BENT-2231) ---------------------------------------- Das Cockpit hat neun Spalten und lief auf breiten Viewports trotzdem in horizontalen Scroll: die schmalen, im fruehen Prozess-Stadium fast leeren Inhalts-Spalten (Score, Relevanz, Pick, Votum, Status, Flags) spannten breite Spalten auf, waehrend die Objekt-Spalte so schmal blieb, dass Bezeichnungen ueber viele Zeilen umbrachen und die Aktionsspalte rechts abgeschnitten wurde. Fix: die schmalen Spalten auf Inhaltsbreite klemmen (width: 1% ist der Shrink-to-fit-Hinweis des auto-Table-Layouts, KEINE echte Prozentbreite), der frei werdende Platz faellt der Objekt-Spalte zu. Der Mobile-Scroll ueber den .ds-table-wrapper (BENT-2136 Punkt 3) bleibt unberuehrt: hier wird nur die Spaltenverteilung geregelt, nicht der Wrapper. Kein table-layout: fixed, damit die Zellen ihre Mindestbreite behalten und nichts gequetscht wird. */ .ds-cockpit .ds-col-check { width: 2rem; } .ds-cockpit .ds-col-eng { width: 1%; } /* Die Objekt-Spalte nimmt den frei werdenden Platz; die Mindestbreite haelt sie auch dann breit genug, wenn Aktions- und Inhalts-Spalten viel fordern. */ .ds-cockpit .ds-col-objekt { width: auto; min-width: 15rem; } /* Die Aktionsspalte bekommt eine feste, ausreichende Breite; der Button-Cluster bricht darin um (siehe unten), statt die Spalte auf seine Summenbreite aufzuspannen und rechts aus dem Bild zu laufen. */ .ds-cockpit .ds-col-aktion { width: 15rem; } /* Objektbezeichnung auf drei Zeilen klemmen (CSS line-clamp); der volle Text bleibt im title-Attribut des Links erreichbar. Ohne den Deckel triebe ein langer Titel die max-content-Breite der Objekt-Spalte hoch. overflow-wrap bricht zur Not auch ueberlange Einzelwoerter, damit kein Wort die Spalte sprengt. */ /* Der Text-Block der Objektzelle ist ein Flex-Kind neben dem Thumbnail; ohne min-width: 0 laesst er sich nicht unter seine Inhaltsbreite schrumpfen und der line-clamp der Bezeichnung greift nicht. */ .ds-cockpit-objektzelle { min-width: 0; } /* Das Thumbnail (der Foto-Link) darf NICHT schrumpfen, sonst wird das Bild zum schmalen Streifen gequetscht (statt zu schrumpfen soll der Text weichen, siehe min-width: 0 oben). Feste Kantenlaenge + object-fit: cover stecken am . */ .ds-cockpit .ds-col-objekt a.js-lightbox { flex: 0 0 auto; } .ds-cockpit-titel { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Der Entscheidungs-Button-Cluster (Auswaehlen, Reserve, Raus, Zuruecksetzen) darf umbrechen, statt in einer nicht umbrechenden Reihe die Aktionsspalte auf seine volle Summenbreite zu zwingen. Alle vier Slots bleiben erhalten (BENT-2135), sie wandern bei Bedarf nur in eine zweite Zeile. Nur im Cockpit angewandt. */ .ds-cockpit .ds-rowactions__cluster { flex-wrap: wrap; } /* Anordnung der Zeilen-Aktionen (BENT-2874). Drei Regeln, alle drei aus dem gemessenen Bild heraus, nicht aus Geschmack: 1. Der Cluster bricht in der 15rem-Spalte um (gewollt, BENT-2231). Beim Umbruch soll die zweite Reihe links anschliessen und nicht mittig schweben, sonst steht der „aktuell"-Slot allein in der Mitte und die Spalte wirkt zufaellig gesetzt. 2. Der Aufklapper ist ein Flex-Geschwister des Clusters und landete darum NEBEN ihm; sein Panel schob sich seitlich aus der Spalte. Mit voller Flex-Basis bekommt er eine eigene Zeile, das Panel oeffnet darunter. 3. Das Panel selbst braucht eine Breite, sonst spreizt es die Spalte (die Basis-Regel gibt ihm min-width: 20rem, die --row-Variante hebt das auf). */ .ds-cockpit .ds-rowactions { justify-content: flex-start; } .ds-cockpit .ds-rowactions__cluster { justify-content: flex-start; } .ds-cockpit .ds-rowactions .ds-actiondrop { flex: 0 0 100%; } .ds-cockpit .ds-actiondrop__panel { width: 100%; } /* ======================================== VERFUEGBARKEITS-GRID (.ds-vgrid, BENT-2039) ---------------------------------------- Das Experten-Grid der Aufzeichnungs-Detailseite hat pro Drehtag zwei Halbtags-Spalten; bei realistischen 5 Drehtagen sind das 10 Checkbox-Spalten plus Expert:in, Notiz und Speichern. Frueher war jede Spalte voll gepolstert (0.85rem links/rechts) und trug einen eigenen „Fr 15.10. VM"-Kopf, dazu je eine Spalte fuer Fachgebiet und Status: die Tabelle war damit breiter als jeder Monitor, die Speichern-Spalte fiel hinten aus dem Bild. Drei Massnahmen, damit 5 Drehtage auf 1440 px ohne horizontalen Scroll passen: (1) Fachgebiet, Status und die Aktions-Links stecken in der Expert:in-Zelle (zweizeilig), (2) der Drehtag steht einmal als Obertitel ueber seinen beiden VM/NM-Spalten, (3) die Checkbox-Spalten laufen auf Minimalbreite (schmales Padding, feste Breite). Der Wrapper bleibt horizontal scrollbar (Scroll-Schatten-Affordance) — das greift dann nur noch auf schmalen Viewports, nicht mehr am Arbeitsplatz. ======================================== */ .ds-vgrid { table-layout: auto; } /* Checkbox-/Halbtags-Spalten: so schmal wie moeglich. */ .ds-vgrid__slot { width: 2.75rem; padding-left: 0.2rem; padding-right: 0.2rem; text-align: center; white-space: nowrap; } .ds-vgrid thead .ds-vgrid__slot { font-size: 0.68rem; letter-spacing: 0.02em; padding-top: 0.25rem; padding-bottom: 0.4rem; } .ds-vgrid td.ds-vgrid__slot input[type="checkbox"] { margin: 0; } .ds-vgrid__ja { color: var(--t-green); } .ds-vgrid__nein { color: var(--t-muted); } /* Drehtag-Obertitel ueber seinem VM/NM-Paar. */ .ds-vgrid__tag { text-align: center; white-space: nowrap; padding-bottom: 0.25rem; border-left: 1px solid var(--t-rule); border-bottom: none; } .ds-vgrid__tag + .ds-vgrid__tag { border-left: 1px solid var(--t-rule); } /* Expert:in-Zelle traegt Name + Status-Badge und darunter Fachgebiet + Aktionen. */ .ds-vgrid__experte { min-width: 13rem; } .ds-vgrid__name { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .ds-vgrid__meta { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.15rem; font-size: 0.78rem; color: var(--t-muted); } .ds-vgrid__meta a { color: var(--t-teal); text-decoration: none; } .ds-vgrid__meta a:hover, .ds-vgrid__meta a:focus-visible { text-decoration: underline; } .ds-vgrid__fach { color: var(--t-muted); } /* Notiz bleibt schmal, fuellt aber die Restbreite ihrer Spalte. */ .ds-vgrid__notiz { width: 12rem; } .ds-vgrid__notiz-input { width: 100%; min-width: 6rem; margin: 0; font-size: 0.85rem; padding: 0.3rem 0.45rem; height: auto; } /* Speichern-Spalte: nur so breit wie der Button. */ .ds-vgrid__aktion { width: 1%; white-space: nowrap; text-align: right; } /* Zeile, auf die aus der Expert:innen-Liste gesprungen wurde (BENT-2054): Sprungmarke ist die Zeilen-ID (#experte-), scroll-margin haelt sie unter der Kopfleiste frei. Reine Orientierungshilfe, kein Zustand. */ .ds-vgrid__zeile { scroll-margin-top: 6rem; } .ds-vgrid tbody tr.is-fokus > td { background: var(--t-teal-hi-tint); } .ds-vgrid tbody tr.is-fokus > td:first-child { box-shadow: inset 3px 0 0 0 var(--t-teal); } /* ======================================== AUFZEICHNUNGS-AUSWAHL (.ds-azliste, BENT-2054) ---------------------------------------- Zwischenschritt des „Verfuegbarkeit"-Einstiegs aus der Expert:innen-Liste, wenn mehrere Aufzeichnungen zur Wahl stehen (bei genau einer springt die Route direkt durch). Fachlich passende Aufzeichnungen stehen oben. ======================================== */ .ds-azliste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; } /* Pico setzt den Marker am
  • , nicht an der