/* ============================================================ tmsnateinfach – Marken-Override der Lernplattform (wird ZULETZT geladen) Gleiches Designsystem wie die Website (theme/lz/lz.css): Weiß und kühles Hellgrau, Navy für Text, Petrol als einziger Akzent, Hanken Grotesk. Untertests tragen ihre Farbe nur als Punkt oder Balken. Vollständig umkehrbar: brand.css-Link in metaEngine.php entfernen. ============================================================ */ :root{ --paper:#ffffff; --tint:#f5f7fa; --ink:#0f1b33; --ink-2:#4a5568; --muted:#64708a; --line:#e3e8ef; --line-2:#d3dae4; --accent:#0f6b6b; --accent-2:#0b5656; --accent-soft:#e6f2f1; --c-nw:#3b6fd8; --c-mednat:#c2417a; --c-quanti:#2f9e5b; --c-fakten:#1c8fb3; --c-text:#d27a1f; --c-diagr:#7d58c9; --c-arith:#1a9c8e; --display:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --shadow:0 1px 2px rgba(15,27,51,.05), 0 6px 20px rgba(15,27,51,.06); /* Alte Namen aus dem Indigo-Schema zeigen jetzt auf Petrol, damit Seiten, die noch darauf verweisen, nicht aus der Reihe fallen. */ --tms-indigo:#0f6b6b; --tms-indigo-mid:#2f8f8f; --tms-indigo-dark:#0b5656; --tms-indigo-faint:#e6f2f1; --tms-indigo-light:#cfe4e2; --tms-dark:#0f1b33; --bs-primary:#0f6b6b; --bs-primary-rgb:15,107,107; --bs-link-color:#0f6b6b; --bs-link-color-rgb:15,107,107; --bs-link-hover-color:#0b5656; --bs-link-hover-color-rgb:11,86,86; } /* ---- Dark Mode: Grundfarben auf die dunklen Entsprechungen legen ---- Sehr viele Regeln benutzen --ink, --ink-2, --muted, --line, --paper und --tint ohne eigene Dark-Variante. Ohne dieses Mapping stand dort dunkler Text auf dunklem Grund, etwa die Seitentitel (Kontrast 1,07) oder fette Stellen in den Einstiegsboxen (1,03). Die dunklen Werte stehen in style.css als --d-*. --accent bleibt unangetastet: Die Variable ist zugleich Flaechenfarbe fuer Knoepfe mit weisser Schrift, ein hellerer Ton wuerde die dort verschlechtern. Der Light Mode aendert sich durch nichts davon. */ :root[data-theme="dark"]{ --paper:var(--d-surf); --tint:var(--d-surf2); --ink:var(--d-tx); --ink-2:var(--d-tx2); --muted:#8e9aae; --line:var(--d-bd); --line-2:#38425a; --accent-soft:#1d3a3a; /* Markenfarbe als Textfarbe: aufgehellt, damit sie auf dunklem Grund lesbar bleibt. --accent selbst bleibt der dunkle Ton, es ist zugleich Flaechenfarbe. Im Light Mode ist --accent-tx nicht gesetzt, dort greift ueberall der bisherige Wert. */ --accent-tx:#4fb3b3; --accent-tx2:#67c2c2; /* Warnrot als Textfarbe, aufgehellt fuer dunklen Grund. */ --rot-tx:#e8846a; } body{ font-family:var(--body); color:var(--ink); } h1,h2,.h1,.h2{ font-family:var(--display); letter-spacing:-.02em; font-weight:700; } :root:not([data-theme="dark"]) body{ background-color:#fff; } a{ color:var(--accent-tx,#0f6b6b); } a:hover{ color:#0b5656; } /* Bootstrap-Buttons: Petrol, ruhige Ecken statt Pillen */ .btn{ border-radius:10px; } .btn-primary{ --bs-btn-bg:#0f6b6b; --bs-btn-border-color:#0f6b6b; --bs-btn-hover-bg:#0b5656; --bs-btn-hover-border-color:#0b5656; --bs-btn-active-bg:#0b5656; --bs-btn-active-border-color:#0b5656; --bs-btn-disabled-bg:#0f6b6b; --bs-btn-disabled-border-color:#0f6b6b; box-shadow:none; } .btn-outline-primary{ --bs-btn-color:#0f6b6b; --bs-btn-border-color:#0f6b6b; --bs-btn-hover-bg:#0f6b6b; --bs-btn-hover-border-color:#0f6b6b; --bs-btn-active-bg:#0b5656; --bs-btn-active-border-color:#0b5656; } .bg-primary{ background-color:#0f6b6b !important; } .text-primary{ color:var(--accent-tx,#0f6b6b) !important; } .border-primary{ border-color:#0f6b6b !important; } .form-control:focus,.form-select:focus,.form-check-input:focus{ border-color:#2f8f8f; box-shadow:0 0 0 .2rem rgba(15,107,107,.18); } .form-check-input:checked{ background-color:#0f6b6b; border-color:#0f6b6b; } .badge.bg-primary{ background-color:#0f6b6b !important; } .progress-bar{ background-color:#0f6b6b; } .nav-pills .nav-link.active,.nav-pills .show>.nav-link{ background-color:#0f6b6b; } /* ---- Kopfleiste: weiß mit feiner Linie wie die Navigation der Startseite (lz-nav) ---- */ :root{ --nav-color:#ffffff; } :root:not([data-theme="dark"]) nav{ background:#fff !important; } :root:not([data-theme="dark"]) .nav-wrapper{ background:rgba(255,255,255,.96) !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; backdrop-filter:blur(6px); } :root:not([data-theme="dark"]) .menu{ color:var(--ink) !important; } :root:not([data-theme="dark"]) .menu:hover{ background:var(--tint) !important; } :root:not([data-theme="dark"]) .nav-wortmarke{ font-family:var(--display) !important; font-weight:700 !important; color:var(--ink) !important; letter-spacing:-.02em !important; } :root:not([data-theme="dark"]) .nav-wortmarke b{ color:var(--accent-tx,var(--accent)); font-weight:700; } :root:not([data-theme="dark"]) .search{ background:var(--tint) !important; border:1px solid var(--line) !important; } :root:not([data-theme="dark"]) .search:hover{ background:#eef2f6 !important; } :root:not([data-theme="dark"]) .search:focus-within{ background:#fff !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(15,107,107,.14) !important; } :root:not([data-theme="dark"]) .search svg{ color:var(--muted) !important; } :root:not([data-theme="dark"]) .search input{ color:var(--ink) !important; } :root:not([data-theme="dark"]) .search input::placeholder{ color:var(--muted) !important; } :root:not([data-theme="dark"]) .search-hint{ color:var(--muted) !important; background:#fff !important; border:1px solid var(--line) !important; } :root:not([data-theme="dark"]) .search-mobile-btn{ color:var(--ink) !important; } :root:not([data-theme="dark"]) .news-bell{ color:var(--ink-2) !important; } :root:not([data-theme="dark"]) .news-bell:hover{ background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; } :root:not([data-theme="dark"]) .news-bell-badge{ box-shadow:0 0 0 2px #fff; } :root:not([data-theme="dark"]) .nav-help{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2) !important; font-size:14px; font-weight:600; padding:8px 10px; border-radius:9px; text-decoration:none; background:none !important; box-shadow:none !important; } :root:not([data-theme="dark"]) .nav-help:hover{ color:var(--accent-tx,var(--accent)) !important; background:var(--accent-soft) !important; } :root:not([data-theme="dark"]) .nav-help svg{ width:18px; height:18px; } :root:not([data-theme="dark"]) .user-menu-icon, :root:not([data-theme="dark"]) .user-menu-icon:focus, :root:not([data-theme="dark"]) .user-menu-icon:active{ background:var(--accent) !important; color:#fff !important; box-shadow:none !important; } :root:not([data-theme="dark"]) .user-menu-icon:hover{ background:var(--accent-2) !important; transform:none !important; box-shadow:none !important; } :root:not([data-theme="dark"]) .news-drawer-head h3{ font-family:var(--display); } :root:not([data-theme="dark"]) .news-drawer-head h3 svg{ color:var(--accent-tx,var(--accent)); } :root:not([data-theme="dark"]) .news-drawer-close:hover{ background:var(--accent-soft); border-color:#cfe4e2; color:var(--accent-tx,var(--accent)); } /* Diese Regeln aus style.css färben Wortmarke, Hilfe-Text und Avatar für die Navy-Leiste; gleiche Selektoren, neue Farben. */ :root:not([data-theme="dark"]) .nav-left a span, :root:not([data-theme="dark"]) .nav-left a span.nav-wortmarke{ color:var(--ink) !important; } :root:not([data-theme="dark"]) .nav-left a span.nav-wortmarke b{ color:var(--accent-tx,var(--accent)) !important; } :root:not([data-theme="dark"]) .message-menu .hilfe-text, :root:not([data-theme="dark"]) .message-menu .nav-help svg{ color:inherit !important; } :root:not([data-theme="dark"]) .user-menu-icon, :root:not([data-theme="dark"]) .user-menu-icon:hover, :root:not([data-theme="dark"]) .user-menu-icon:focus, :root:not([data-theme="dark"]) .user-menu-icon:active, :root:not([data-theme="dark"]) .user-menu-icon.show, :root:not([data-theme="dark"]) .user-menu-icon[aria-expanded="true"]{ background:var(--accent) !important; color:#fff !important; box-shadow:none !important; } :root:not([data-theme="dark"]) .user-menu-icon:hover{ background:var(--accent-2) !important; } /* Dasselbe im Dark Mode: Saemtliche Farbregeln des Avatars waren auf den Light Mode eingeschraenkt, im Dark setzte Bootstrap beim Klick und danach seine eigene Linkfarbe und der Buchstabe verlor sein Weiss. */ :root[data-theme="dark"] .user-menu-icon, :root[data-theme="dark"] .user-menu-icon:hover, :root[data-theme="dark"] .user-menu-icon:focus, :root[data-theme="dark"] .user-menu-icon:focus-visible, :root[data-theme="dark"] .user-menu-icon:active, :root[data-theme="dark"] .user-menu-icon.show, :root[data-theme="dark"] .user-menu-icon[aria-expanded="true"]{ background:var(--accent) !important; color:#fff !important; box-shadow:none !important; } :root[data-theme="dark"] .user-menu-icon:hover{ background:var(--accent-2) !important; } :root:not([data-theme="dark"]) .user-dropdown .ud-avatar{ background:var(--accent) !important; } .nav-left a{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; } .nav-left .lz-mark{ flex:none; display:block; } /* Logo im Kopf exakt wie die Marke der Startseite (.lz-brand in theme/lz/lz.css): Schrift sitzt auf dem Link, die Bildmarke hängt mit 1.3em daran (26px zu 20px). Dadurch bleibt das Verhältnis von Marke zu Schrift auch dann gleich, wenn die Wortmarke auf schmalen Geräten kleiner wird. display:flex statt inline-flex: als Inline-Element saß der Link auf der Grundlinie des umgebenden
, dessen Zeilenbox dadurch 33px statt 26px hoch war. Die Unterlänge lag unter dem Logo und schob es im Kopf nach oben. Der Selektor nennt zusätzlich .nav-left a, sonst gewinnt diese Regel oben mit ihrer höheren Spezifität und setzt inline-flex zurück. */ .nav-left a.nav-brand, .nav-brand{ display:flex; align-items:center; gap:.45em; font:700 20px/1 var(--display); letter-spacing:-.02em; text-decoration:none; color:var(--ink); white-space:nowrap; } .nav-left a.nav-brand .lz-mark, .nav-brand .lz-mark{ width:1.3em; height:1.3em; flex:none; display:block; } .nav-brand .nav-wortmarke{ font:inherit; letter-spacing:inherit; display:block; } /* ---- Ausklappbare Modul-Liste unter "Naturwiss. Kenntnisse" ---- Der Pfeil klappt nur auf, der Eintrag selbst öffnet weiter die Nat-Übersicht. In der eingeklappten Leiste ist beides verborgen, beim Darüberfahren wieder da. */ .sidebar-item.sb-has-sub{ position:relative; } .sb-sub-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:3; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; transition:background .12s, color .12s; } .sb-sub-toggle:hover{ background:var(--accent-soft); color:var(--accent-tx,var(--accent)); } .sb-sub-toggle i{ transition:transform .15s; } .sb-sub-toggle.open i{ transform:rotate(180deg); } /* Die Liste unter einem Untertest wird eingerückt und bekommt eine feine Linie links, damit sichtbar bleibt, dass sie zu dem Eintrag darüber gehört. */ .sb-sub{ display:none; padding:2px 0 6px; margin-left:34px; border-left:1px solid var(--line); } .sb-sub.open{ display:block; } .sb-sub-group{ font:600 10.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:12px 22px 6px 14px; } .sb-sub-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; cursor:pointer; font:500 13.5px/1.35 var(--body); color:var(--ink-2); padding:6px 18px 6px 14px; } .sb-sub-item:hover{ background:var(--accent-soft); color:var(--accent-tx,var(--accent)); } /* Die Modulleiste wird beim Öffnen eines Moduls neu aufgebaut. Ein kurzes Einblenden nimmt dem Wechsel die Härte, ohne ihn spürbar zu verzögern. */ #navigation_s .module{ animation:htmModulEin .16s ease-out both; } @keyframes htmModulEin{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ #navigation_s .module{ animation:none; } } /* Das Modul, in dem man gerade ist, bleibt im Hauptmenü markiert. */ .sb-sub-item.ist-hier{ background:var(--accent-soft); color:var(--accent-tx,var(--accent)); font-weight:600; } :root[data-theme="dark"] .sb-sub-item.ist-hier{ background:var(--d-surf2); color:#9fe3db; } .sb-sub-item.is-locked{ color:var(--muted); } /* Kachel wie bei den Modulen in der Modul-Ansicht, nur kleiner */ .sb-sub-ic{ flex:none; width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; position:relative; color:var(--c,var(--muted)); background:color-mix(in srgb, var(--c,var(--muted)) 12%, #fff); } .sb-sub-ic i, .sb-sub-ic svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:inherit; line-height:1; vertical-align:0 !important; } .sb-sub-item:hover .sb-sub-ic{ background:color-mix(in srgb, var(--c,var(--muted)) 20%, #fff); } :root[data-theme="dark"] .sb-sub-ic{ background:color-mix(in srgb, var(--c,var(--muted)) 22%, var(--d-surf)); } #navigation_p.close:not(:hover) .sb-sub, #navigation_p.close:not(:hover) .sb-sub-toggle{ display:none; } :root[data-theme="dark"] .sb-sub{ border-left-color:var(--d-bd); } :root[data-theme="dark"] .sb-sub-item{ color:var(--d-tx2); } :root[data-theme="dark"] .sb-sub-item:hover{ background:var(--d-surf2); color:#9fe3db; } :root[data-theme="dark"] .sb-sub-toggle{ color:var(--d-tx2); } :root[data-theme="dark"] .sb-sub-toggle:hover{ background:var(--d-surf2); color:#9fe3db; } /* ---- Seitenleiste: Gruppen, neutrale Symbole, Petrol nur im aktiven Zustand ---- */ .sidebar-group{ font:600 11.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:18px 22px 6px; } .sidebar-group:first-child{ padding-top:12px; } .sidebar .sidebar-button, .sidebar .accordion-button{ font-family:var(--body); font-size:15px; color:var(--ink-2); } #navigation_p .sidebar-item .tt-ic{ color:var(--muted) !important; font-size:15px; } .sidebar .sidebar-item{ border-radius:9px !important; } .sidebar .sidebar-item:hover{ background:var(--tint); border-color:transparent !important; } .sidebar .sidebar-item:hover .tt-ic{ color:var(--ink) !important; } .sidebar .sidebar-item.active{ background:var(--accent-soft); border-color:transparent !important; } .sidebar .sidebar-item.active .sidebar-button{ color:var(--accent-tx,var(--accent)); font-weight:600; } .sidebar .sidebar-item.active .tt-ic{ color:var(--accent-tx,var(--accent)) !important; } .sidebar .active:before{ background:var(--accent) !important; border-radius:0 3px 3px 0; } .sidebar .sidebar-item:first-child{ border-top-color:transparent !important; } .sidebar .sidebar-item.sidebar-vz{ background:var(--accent); } .sidebar .sidebar-item.sidebar-vz .sidebar-button, .sidebar .sidebar-item.sidebar-vz .tt-ic{ color:#fff !important; font-weight:600; } .sidebar .sidebar-item.sidebar-vz:hover{ background:var(--accent-2); } /* In der schmalen Symbolleiste haben die Gruppennamen keinen Platz. */ body:has(#navigation_s.opened) #navigation_p:not(:hover):not(.clickable) .sidebar-group{ height:1px !important; padding:0 !important; margin:10px 14px !important; width:32px; overflow:hidden; background:var(--line); color:transparent; font-size:0 !important; } :root[data-theme="dark"] .sidebar-group{ color:var(--d-mut); } :root[data-theme="dark"] .sidebar .sidebar-item.active{ background:rgba(15,107,107,.22); } :root[data-theme="dark"] .sidebar .sidebar-item.active .sidebar-button, :root[data-theme="dark"] .sidebar .sidebar-item.active .tt-ic{ color:#9fe3db !important; } :root[data-theme="dark"] .nav-help{ color:var(--d-tx2) !important; } :root[data-theme="dark"] .nav-help:hover{ background:var(--d-surf2); color:#9fe3db !important; } :root[data-theme="dark"] .nav-wortmarke{ color:var(--d-tx) !important; } :root[data-theme="dark"] .nav-wortmarke b{ color:#9fe3db; } :root[data-theme="dark"] nav, :root[data-theme="dark"] .nav-wrapper{ background:var(--d-surf) !important; border-bottom-color:var(--d-bd) !important; } :root[data-theme="dark"] .menu, :root[data-theme="dark"] .news-bell, :root[data-theme="dark"] .search-mobile-btn{ color:var(--d-tx2) !important; } :root[data-theme="dark"] .search{ background:var(--d-surf2) !important; border-color:var(--d-bd) !important; } :root[data-theme="dark"] .search input{ color:var(--d-tx) !important; } :root[data-theme="dark"] .search-hint{ background:var(--d-surf) !important; border-color:var(--d-bd) !important; } /* ---- Nur noch ein Scrollbereich ---- Vorher gab es zwei: Die Kopfleiste steht im Fluss (nav ist position:relative), und JS setzte .layer zusätzlich auf calc(100dvh - 65px). Zusammen war die Seite höher als der Bildschirm, der äußere Scrollbalken lief also ins Leere unter dem Inhalt. Jetzt ist #contentPage eine Spalte über die volle Fensterhöhe: Die Kopfleiste behält ihre Höhe, .layer bekommt den Rest und scrollt als einziger Bereich. Das height:auto hebt die Zuweisung aus dem JavaScript auf, die Seite selbst scrollt nicht mehr. */ html, body{ height:100%; } body{ overflow:hidden; background-color:#F9F9F9; } html{ background-color:#F9F9F9; } :root[data-theme="dark"] html, :root[data-theme="dark"] body{ background-color:var(--d-bg); } #contentPage{ flex-direction:column; height:100vh; height:100dvh; } #contentPage > nav{ flex:0 0 auto; } /* Höhe doppelt abgesichert: Unter der Flex-Spalte oben dient sie nur als Ausgangswert, ohne Flex (alte Browser, anderer Codepfad) hält sie den Bereich trotzdem auf Fensterhöhe. Das !important hebt die Zuweisung aus dem JavaScript auf, die in Safari als ungültiges "calc()" ankam und damit gar nicht griff. 67px ist die Höhe der Kopfleiste. */ .layer{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; height:calc(100vh - 67px) !important; height:calc(100dvh - 67px) !important; } #panel, .quick-view, .sidebar, .structure-body{ overscroll-behavior:contain; } /* ---- Der weiße Streifen unter dem Kapitel ---- .panel rechnete mit calc(100dvh - 116px): 65px Kopfleiste plus 51px für die feste Leiste am Fensterboden, die es nicht mehr gibt. Dazu kamen die Abstände von .w-900 (2em oben, 2em unten, 60px padding-bottom) und die 5px des Fortschrittsbalkens. In Summe war der Inhalt rund 80px höher als .layer, also der zweite Scrollbalken, und unter dem abgeschnittenen Panel blieb Weiß stehen. Statt fester Zahlen füllt .panel jetzt genau den Rest der Spalte. Gescrollt wird weiterhin im Panel, damit "Kapitel gelesen" und das Zurückspringen nach oben beim Abschnittswechsel weiter funktionieren. */ .layer:has(> #content > .panel){ display:flex; flex-direction:column; } .layer:has(> #content > .panel) > #content{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:0; margin-bottom:0; padding-bottom:0; } .layer > #content > .panel{ flex:1 1 auto; min-height:0; height:auto !important; } /* ---- Meldungen (Login und "Vollzugang freigeschaltet", beide .login-toast) ---- Oben mittig, direkt unter der Kopfleiste. Diese Regel stand vorher auf unten links und hat damit die v4-Regel aus style.css überschrieben, weil brand.css zuletzt lädt. */ .login-toast{ top:76px; bottom:auto; left:50%; right:auto; transform:translate(-50%,-18px); border-left-color:var(--accent); } .login-toast.show{ transform:translate(-50%,0); } .login-toast.hide{ transform:translate(-50%,-12px) !important; } /* Erscheinen beide gleichzeitig, rutscht die zweite darunter statt übereinander */ .login-toast ~ .login-toast{ top:146px; } @media (max-width:560px){ .login-toast{ top:72px; width:calc(100vw - 24px); max-width:420px; } .login-toast ~ .login-toast{ top:140px; } } /* ---- Logo-Wortmarke einheitlich dimensionieren ---- */ img[src*="logo.png"]{ height:34px !important; width:auto !important; max-width:100% !important; } :root[data-theme="dark"] img[src*="logo.png"]{ filter:brightness(0) invert(1); } /* ---- Seitenleiste kompakt: 13 Punkte ohne Scrollen auf einem Notebook ---- */ .sidebar{ overflow-y:auto !important; padding:2px 0 4px !important; } #navigation_p .sidebar-item{ margin:2px 10px !important; border-radius:10px !important; min-height:0 !important; } #navigation_p .sidebar-button, #navigation_p .accordion-button{ display:flex !important; align-items:center !important; height:48px !important; min-height:0 !important; padding:0 14px 0 50px !important; font-size:16.5px !important; line-height:1.2 !important; } /* Auf kleinen Bildschirmen (Notebook 768px) noch etwas enger */ @media (max-height:820px){ #navigation_p .sidebar-button, #navigation_p .accordion-button{ height:32px !important; font-size:14.5px !important; } .sidebar-group{ padding:8px 24px 2px !important; } } #navigation_p .sidebar-item .tt-ic{ left:15px !important; font-size:17px !important; width:20px; text-align:center; } .sidebar-group{ padding:22px 26px 8px !important; font-size:12px !important; line-height:1 !important; } .sidebar-group:first-child{ padding-top:10px !important; } .sidebar .wrapper{ min-height:0 !important; } /* ---- Eine Schrift für die ganze App: Hanken Grotesk. Formeln (KaTeX), Symbole und Code bleiben unberührt. ---- */ body, .sidebar-button, button, input, select, textarea, .btn, .form-control, .dropdown-menu{ font-family:var(--body) !important; } #content *:not(i):not([class*="fa-"]):not(.katex):not(.katex *):not(code):not(pre):not(kbd):not(svg):not(svg *), #panel *:not(i):not([class*="fa-"]):not(.katex):not(.katex *):not(code):not(pre):not(kbd):not(svg):not(svg *), .news-drawer *:not(i):not([class*="fa-"]):not(svg):not(svg *), .user-dropdown *:not(i):not([class*="fa-"]):not(svg):not(svg *){ font-family:var(--body) !important; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{ font-family:var(--display) !important; letter-spacing:-.015em; } /* ---- Desktop: Leiste 320px statt 360px, Menü-Symbol nur auf dem Handy ---- In Kapiteln überdeckt die Modulleiste (#navigation_s, 300px ab x=60) die Hauptleiste bis auf einen 60px-Streifen; dann bleibt der Inhaltsversatz bei 360px. */ /* Vorab-Zustand aus metaEngine.php: gilt nur, bis autoSidebar() die echten Klassen gesetzt hat. Ohne Übergang, damit beim Laden nichts auf- und wieder zuklappt. */ html.htm-sb-zu #navigation_p, html.htm-sb-zu #navigation_s, html.htm-sb-zu .layer, html.htm-sb-zu .sb-expand{ transition:none !important; } @media (min-width:1001px){ html.htm-sb-zu #navigation_p{ transform:translateX(-320px); } html.htm-sb-zu .layer.resize{ margin-left:0 !important; } } @media (min-width:1001px){ #navigation_p{ width:320px !important; } #navigation_p.close{ transform:translateX(-320px); } .layer.resize{ margin-left:320px !important; } #navigation_p .sidebar-button{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* In Modulen und Kapiteln ersetzt die Modulleiste die Hauptleiste komplett (keine Symbolspalte daneben): sie rückt an den linken Rand und nimmt dieselben 320px ein. Zurück ins Hauptmenü geht es über den Knopf links in der Kopfleiste, der setzt body.htm-hauptmenue und hebt diese Regeln für den Moment auf. */ body:has(#navigation_s.opened):not(.htm-hauptmenue) #navigation_p{ display:none !important; } body:has(#navigation_s.opened):not(.htm-hauptmenue) #navigation_s{ left:0 !important; width:320px !important; border-left:0 !important; } body:has(#navigation_s.opened) .layer.resize{ margin-left:320px !important; } /* Hauptmenü vorübergehend eingeblendet: Die Kapitelleiste tritt solange zurück. Mehr braucht es nicht, htmMenueUmschalten() nimmt #navigation_s die Klasse .opened ab, womit die Regeln für die schmale Symbolspalte von selbst nicht mehr greifen. */ body.htm-hauptmenue #navigation_s{ display:none !important; } .nav-button.fixed{ width:320px !important; } /* Einklappen per Menü-Symbol (toggleSidebar(true) in nav.php): Leiste fährt nach links heraus, der Inhalt rückt nach. Gilt für Haupt- und Modulleiste. */ body:has(#navigation_s.opened) #navigation_s.close{ transform:translateX(-320px); } body:has(#navigation_s.opened) #navigation_s{ transition:transform .2s cubic-bezier(.36,-0.01,0,.77); } /* Der Knopf links in der Kopfleiste blendet auf dem Desktop das Hauptmenü ein und aus. In Kapiteln liegt sonst nur die Kapitelleiste da und es gibt keinen Weg zurück ins Menü. Das Ein- und Ausklappen der Leiste selbst macht weiterhin .sb-toggle. */ .menu{ display:inline-flex !important; align-items:center; justify-content:center; } body:has(#navigation_p.close):not(:has(#navigation_s.opened)) .sb-expand, body:has(#navigation_s.opened.close) .sb-expand{ display:inline-flex; } .nav-left{ padding-left:14px !important; } } /* ---- Seitenleiste in Mint: Gruppen und Symbole in Petrol, aktiver Punkt auf Mint-Fläche ---- */ .sidebar-group{ color:var(--accent-tx,var(--accent)) !important; } #navigation_p .sidebar-item .tt-ic{ color:var(--accent-tx,var(--accent)) !important; opacity:.85; } .sidebar .sidebar-item:hover{ background:#f0f7f6; } .sidebar .sidebar-item:hover .tt-ic{ color:var(--accent-tx,var(--accent)) !important; opacity:1; } .sidebar .sidebar-item.active .tt-ic{ opacity:1; } /* style.css setzt Grau (#f1f3f5) bzw. Hellblau (#e6f2f1) mit !important; hier gleichziehen. */ #navigation_p .sidebar-item.active, #navigation_p .sidebar-item.active:not(.sidebar-primary), #navigation_p .sidebar-item.sidebar-primary.active{ background-color:var(--accent-soft) !important; } #navigation_p .sidebar-item.active .sidebar-button, #navigation_p .sidebar-item.active:not(.sidebar-primary) .sidebar-button, #navigation_p .sidebar-item.active .accordion-button{ color:var(--accent-tx,var(--accent)) !important; } #navigation_p{ background:#fafcfc !important; border-right-color:var(--line) !important; } :root[data-theme="dark"] .sidebar-group{ color:#9fe3db !important; } :root[data-theme="dark"] #navigation_p .sidebar-item .tt-ic{ color:#9fe3db !important; } :root[data-theme="dark"] .sidebar .sidebar-item:hover{ background:var(--d-surf2); } :root[data-theme="dark"] #navigation_p{ background:var(--d-surf) !important; } /* ---- Modulleiste (#navigation_s) und Kapitelliste: gleiche Sprache wie die Hauptleiste ---- */ #navigation_s .sidebar-item{ margin:2px 10px !important; border-radius:9px !important; } #navigation_s .sidebar-item.p-4{ padding:9px 12px !important; } #navigation_s .sidebar-item:hover{ background:var(--tint) !important; } #navigation_s .sidebar-item.active{ background:var(--accent-soft) !important; } #navigation_s .sidebar-item.active .card-title{ color:var(--accent-tx,var(--accent)) !important; } #navigation_s .sidebar-item.active .card-text{ color:var(--accent-tx,var(--accent)) !important; opacity:.8; } .modul-side-row{ gap:12px !important; } .modul-side-icon{ width:32px !important; height:32px !important; font-size:13px !important; color:var(--fc,var(--muted)) !important; background:color-mix(in srgb, var(--fc,var(--muted)) 12%, #fff) !important; } .sidebar-item.disabled .modul-side-icon{ --fc:var(--muted); opacity:.6; } .modul-side-text .card-title{ font:600 14.5px/1.3 var(--body) !important; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .modul-side-text .card-text{ font-size:12.5px !important; color:var(--muted); margin-top:1px !important; } #navigation_s .sidebar-item.disabled .card-title{ color:var(--muted); } :root[data-theme="dark"] .modul-side-icon{ background:color-mix(in srgb, var(--fc,var(--muted)) 22%, var(--d-surf)) !important; } :root[data-theme="dark"] #navigation_s .sidebar-item.active{ background:rgba(15,107,107,.22) !important; } :root[data-theme="dark"] #navigation_s .sidebar-item.active .card-title, :root[data-theme="dark"] #navigation_s .sidebar-item.active .card-text{ color:#9fe3db !important; } :root[data-theme="dark"] .modul-side-text .card-title{ color:var(--d-tx); } /* Kapitelliste in der Modulleiste */ .structure-body .structure-item:hover{ background:var(--tint) !important; } .structure-body .active{ background:var(--accent-soft) !important; } .active .structure-icon{ background:var(--accent) !important; border-color:var(--accent) !important; } .active .structure-icon svg{ color:#fff !important; } /* Untere Leiste (Zurück, voriges/nächstes Modul) */ .nav-button{ font-family:var(--body) !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.04em; color:var(--ink-2) !important; } .nav-button:hover:not(:disabled){ background:var(--tint) !important; color:var(--ink) !important; } .nav-button.fixed{ border-right-color:var(--line) !important; } .flex-grow-group .nav-button:nth-child(2){ border-left-color:var(--line) !important; } .mark-button, .nav-button.primary:not(:disabled){ background:var(--accent) !important; color:#fff !important; } .mark-button:hover, .nav-button.primary:not(:disabled):hover{ background:var(--accent-2) !important; color:#fff !important; } /* ============================================================ Kapitel-Ansicht (29.10.2026): Kapitelliste links + Lesetext rechts im lz-Stil. Blau/Grün/Schwarz aus style.css → Navy, Petrol, Hellgrau. ============================================================ */ /* ---- Kopf der Kapitelliste ---- */ /* Kopf der Kapitelleiste: Untertest klein und grau, darunter der Weg zurück, darunter das Modul als eigentlicher Anker. Vorher war der Zurück-Link das Auffälligste im Block. */ .structure-header{ background:#fff !important; color:var(--muted) !important; padding:14px 20px 12px !important; border-bottom:1px solid var(--line) !important; } .structure-header .header-text{ font-size:13.5px !important; font-weight:600; color:var(--ink) !important; line-height:1.35; } .structure-header .header-icon-small{ width:26px !important; height:26px !important; padding:0 !important; font-size:12px !important; } .structure-item.mint-host{ padding:16px 20px 18px !important; border-bottom:1px solid var(--line) !important; } /* Testteile: Zurueck-Knopf und Kapiteltitel bilden einen Block. Im Nat-Teil trennt eine Linie den Kopf mit der Modulzeile vom Kapitel darunter; hier gibt es keine Modulzeile, die Linie zerschnitte den Block ohne Grund. */ .structure-header.ist-testteil{ border-bottom:0 !important; } .structure-header .tt-guide-text{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; } :root[data-theme="dark"] .structure-header .tt-guide-text{ color:var(--d-tx); } /* Abstaende wie im Nat-Teil, nur ohne die Trennlinie: Der Kopf behaelt seinen unteren Innenabstand, der Kapitelblock seinen oberen. Ohne das sassen Guide-Zeile und Kapitelnummer fast aufeinander. */ .structure-item.mint-host.ist-testteil{ padding-top:16px !important; } .structure-item.mint-host .text-secondary{ font-size:12px !important; font-weight:600 !important; letter-spacing:.04em; text-transform:uppercase; color:var(--muted) !important; } .structure-item.mint-host h4{ font:700 18px/1.25 var(--display) !important; color:var(--ink) !important; letter-spacing:-.01em; } .mint-label{ color:var(--accent-tx,var(--accent)) !important; font-weight:700 !important; } .mint-dot{ background:#cfe4e2 !important; } .mint-dot.on{ background:var(--accent) !important; } .mint-info{ background:var(--accent) !important; } /* ---- Zeilen der Kapitelliste ---- */ .structure-body .structure-item.tablink{ padding:12px 18px 12px 20px !important; min-height:54px; border-bottom:1px solid var(--line) !important; border-left:none !important; color:var(--ink) !important; background:#fff; } .structure-body .structure-item.tablink:hover{ background:var(--tint) !important; } .structure-body .structure-item.tablink.active, .structure-body .structure-item.tablink.active:hover{ background:var(--accent-soft) !important; border-bottom-color:var(--line) !important; box-shadow:none !important; } .structure-body .structure-item:has(+ .active){ border-bottom-color:var(--line) !important; } .structure-body .tablink .structure-text{ margin-left:44px !important; font:500 15px/1.35 var(--body) !important; color:var(--ink) !important; } .structure-body .active .structure-text{ color:var(--accent-tx,var(--accent)) !important; font-weight:600 !important; } .structure-body .tablink .structure-icon{ left:18px !important; width:32px !important; height:32px !important; border:1px solid var(--line-2) !important; background:#fff !important; color:var(--muted) !important; font-size:13px; } .structure-body .tablink .structure-icon svg, .structure-body .tablink .structure-icon i{ color:var(--muted) !important; } .structure-body .active .structure-icon{ background:var(--accent) !important; border-color:var(--accent) !important; } .structure-body .active .structure-icon svg, .structure-body .active .structure-icon i{ color:#fff !important; } /* Zusammenfassung: gleiche Sprache, kein eigenes Grün */ .tablink.tablink-summary, .structure-body .tablink-summary:hover{ background:#fff !important; } .structure-body .tablink-summary.active{ background:var(--accent-soft) !important; } .tablink.tablink-summary .structure-icon{ border-color:var(--line-2) !important; background:#fff !important; } .tablink.tablink-summary .structure-icon svg, .tablink.tablink-summary .structure-icon i{ color:var(--accent-tx,var(--accent)) !important; } .tablink.tablink-summary .structure-text{ color:var(--ink) !important; font-weight:600 !important; } /* Erledigt-Kreis: dünn, erledigt = Petrol */ .structure-body .checkmark{ width:22px !important; height:22px !important; border:1.5px solid var(--line-2) !important; font-size:11px !important; } .structure-body .checkbox-wrapper input:checked + .checkmark{ background:var(--accent) !important; border-color:var(--accent) !important; transform:none !important; } .structure-body .checkbox-wrapper{ margin-left:8px !important; } /* Schnellübersicht unten */ .quick-view{ background:#fff !important; border-top:1px solid var(--line) !important; } /* Schnellübersicht füllt die Seitenleiste: die alten Werte (left:-60px, bottom:45px, 358px breit) stammten vom Layout mit Icon-Leiste und unterer Knopfleiste – im neuen Layout ragte sie links aus der Leiste heraus und ließ unten einen Streifen frei (30.10.2026). */ .quick-view{ left:0 !important; width:100% !important; bottom:0 !important; height:auto !important; max-height:46% !important; } .quick-view .list-group-item{ background:#fff !important; color:var(--ink-2) !important; font-size:14px; padding:9px 18px 9px 48px !important; border-color:var(--line) !important; } .quick-view .list-group-item i{ left:20px !important; color:var(--muted); } .quick-view .list-group-item:hover{ background:var(--tint) !important; } .quick-view .list-group-item.active{ background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; font-weight:600; } .quick-view .list-group-item.active i{ color:var(--accent-tx,var(--accent)); } /* ---- Werkzeugleiste und Fortschritt über dem Text ---- */ #chapterProgress{ background:var(--line) !important; } #chapterProgressBar{ background:var(--accent) !important; } #kapitelTools, #checkupTools{ border-bottom-color:var(--line) !important; box-shadow:none !important; } /* Auch die nicht gesetzten Werkzeuge bekommen einen dezenten grauen Kreis. Vorher standen sie ohne Fläche da, neben den petrolfarbenen Kreisen der aktiven wirkte die Leiste dadurch ungleich. Der Kreis ist nur eine Spur dunkler als das Papier, der aktive Zustand bleibt also klar der kräftigere. */ #kapitelTools .kt-btn, #checkupTools .kt-btn{ background:var(--tint) !important; color:var(--muted) !important; } #kapitelTools .kt-btn:hover, #checkupTools .kt-btn:hover{ background:var(--line) !important; color:var(--ink) !important; } #kapitelTools .kt-btn.active:not(.kt-pf-btn), #checkupTools .kt-btn.active{ background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; } #checkupTools .ct-timer{ color:var(--ink) !important; } /* ---- Lesetext ---- */ #panel .tabcontent{ max-width:720px; margin:36px auto 56px !important; padding:0 4px; font-size:17px; line-height:1.65; color:var(--ink); -webkit-font-smoothing:antialiased; } #panel .tabcontent h1, #panel .tabcontent h2{ font:700 26px/1.2 var(--display) !important; letter-spacing:-.02em; color:var(--ink); margin:0 0 .7em; padding-top:.15em; } #panel .tabcontent h3{ font:700 20px/1.3 var(--display) !important; color:var(--ink); margin:1.6em 0 .5em; } #panel .tabcontent h4, #panel .tabcontent h5{ font:600 17px/1.4 var(--display) !important; color:var(--ink); margin:1.4em 0 .4em; } #panel .tabcontent p{ margin:0 0 1.05em; } #panel .tabcontent ul, #panel .tabcontent ol{ margin:0 0 1.2em; padding-left:1.35em; } #panel .tabcontent li{ margin:.3em 0; padding-left:.2em; } #panel .tabcontent li::marker{ color:var(--accent-tx,var(--accent)); font-weight:700; } #panel .tabcontent strong, #panel .tabcontent b{ font-weight:700; color:var(--ink); } #panel .tabcontent a{ color:var(--accent-tx,var(--accent)); text-decoration:underline; text-underline-offset:2px; } #panel .tabcontent hr{ border:0; border-top:1px solid var(--line); margin:2em 0; } #panel .tabcontent blockquote{ margin:1.4em 0; padding:14px 18px; border-left:3px solid var(--accent); background:var(--tint); border-radius:0 10px 10px 0; } /* Bilder: eigene Fläche statt verloren im Fließtext; Vollbild-Knopf sitzt auf der Fläche, nicht auf dem Bild */ #panel .tabcontent img{ max-width:100%; height:auto; } /* Der Kasten sitzt am Wrapper selbst (nicht am

), weil in den Inhalten nach dem Bild meist

und Text im selben Absatz folgen – ein :only-child-Test griff dort nie. */ #panel .tabcontent .img-zoom-wrap{ position:relative; display:flex; justify-content:center; align-items:center; width:100%; max-width:100%; margin:1.5em 0; padding:28px 24px; background:var(--tint); border:1px solid var(--line); border-radius:12px; line-height:0; } #panel .tabcontent .img-zoom-wrap + br, #panel .tabcontent .img-zoom-wrap + br + br{ display:none; } #panel .tabcontent .img-zoom-wrap .img-zoom-btn{ top:auto; bottom:10px; right:10px; width:30px; height:30px; border-radius:8px; background:#fff; color:var(--ink-2); border:1px solid var(--line-2); backdrop-filter:none; } #panel .tabcontent .img-zoom-wrap .img-zoom-btn:hover{ background:#fff; color:var(--accent-tx,var(--accent)); border-color:var(--accent); } /* Tabellen */ #panel .tabcontent .table-scroll{ margin:1.5em 0; } #panel .tabcontent table{ border:1px solid var(--line) !important; border-radius:10px !important; overflow:hidden; font-size:calc(15.5px * var(--font-scale, 1)); margin:0 !important; } #panel .tabcontent th, #panel .tabcontent td{ padding:9px 14px !important; border:0 !important; border-bottom:1px solid var(--line) !important; vertical-align:top; } #panel .tabcontent thead, #panel .tabcontent table th{ background:var(--tint) !important; color:var(--ink-2); font-weight:600 !important; } #panel .tabcontent tr:last-child td{ border-bottom:0 !important; } /* Formeln etwas größer als der Text */ #panel .tabcontent .katex{ font-size:1.08em; } #panel .tabcontent .katex-display{ margin:1.2em 0; } /* Dunkelmodus: Farben, die oben fest gesetzt wurden, wieder freigeben */ :root[data-theme="dark"] #panel .tabcontent, :root[data-theme="dark"] #panel .tabcontent h1, :root[data-theme="dark"] #panel .tabcontent h2, :root[data-theme="dark"] #panel .tabcontent h3, :root[data-theme="dark"] #panel .tabcontent strong{ color:var(--d-tx); } :root[data-theme="dark"] #panel .tabcontent .img-zoom-wrap, :root[data-theme="dark"] #panel .tabcontent blockquote{ background:var(--d-surf2); border-color:var(--d-bd); } :root[data-theme="dark"] .structure-body .structure-item.tablink, :root[data-theme="dark"] .tablink.tablink-summary{ background:var(--d-bg) !important; color:var(--d-tx) !important; border-bottom-color:var(--d-bd) !important; } :root[data-theme="dark"] .structure-body .tablink .structure-text{ color:var(--d-tx) !important; } :root[data-theme="dark"] .structure-body .structure-item.tablink.active{ background:rgba(15,107,107,.22) !important; } /* Hover im Dark Mode: Die Regel fuer den Grundzustand darueber ist spezifischer als die allgemeine Hover-Regel und hat sie ueberschrieben, die Zeilen reagierten nicht. */ :root[data-theme="dark"] .structure-body .structure-item.tablink:hover{ background:var(--d-surf2) !important; } :root[data-theme="dark"] .structure-body .structure-item.tablink.active:hover{ background:rgba(15,107,107,.3) !important; } :root[data-theme="dark"] .structure-body .active .structure-text{ color:#9fe3db !important; } /* Dunkelmodus: Die Zeilen der Kapitel- und Check-up-Leiste stehen auf --d-bg, der Container darunter aber auf --d-surf. Unter dem letzten Eintrag blieb dadurch eine hellere Fläche stehen. Jetzt ist die ganze Spalte gleich dunkel. */ :root[data-theme="dark"] #navigation_s, :root[data-theme="dark"] #navigation_s .structure, :root[data-theme="dark"] #navigation_s .structure-body, :root[data-theme="dark"] #navigation_s .sidebar, :root[data-theme="dark"] #navigation_s .wrapper{ background:var(--d-bg) !important; } :root[data-theme="dark"] .structure-body .tablink .structure-icon{ background:var(--d-surf) !important; border-color:var(--d-bd) !important; } :root[data-theme="dark"] .structure-header, :root[data-theme="dark"] .quick-view, :root[data-theme="dark"] .quick-view .list-group-item{ background:var(--d-surf) !important; } /* Werkzeugleiste auf die 720-px-Textkante des Lesetexts einrücken */ #kapitelTools, #checkupTools{ padding-left:max(1em, calc((100% - 720px) / 2)) !important; padding-right:max(1em, calc((100% - 720px) / 2)) !important; } @media (max-width:1000px){ #kapitelTools, #checkupTools{ padding-left:1em !important; padding-right:1em !important; } } /* ---- Werkzeugleiste an den Inhaltsbereich binden ---- Die Leiste ist position:fixed und richtete sich damit am Fenster aus, der Text aber am Panel. Bei offener Modulleiste (320px) lagen beide um deren halbe Breite auseinander. Links deshalb auf die Kante des Inhaltsbereichs setzen, dann stimmt auch die Einrückung darunter wieder. */ @media (min-width:1001px){ /* Die Leiste spannt über das Fenster, die Einrückung setzt werkzeugLeisteAusrichten() in index.php anhand der gemessenen Textkante. Rechnen mit 50% ging hier schief, weil die Leiste fixed am Fenster hängt, der Text aber im Panel sitzt. */ #kapitelTools, #checkupTools{ left:0 !important; right:0 !important; width:auto !important; margin:0 !important; } } /* ---- Übungs-Block im Kapitel (29.10.2026): weiße Karte statt grauer Kasten ---- */ #panel .tabcontent.exercise-group > h4{ font:700 26px/1.2 var(--display) !important; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px !important; padding-right:120px; } #panel .exercise-group .exercise-navigation{ top:6px; right:0; padding:0; display:flex; gap:7px; } #panel .exercise-group .exercise-navigation button{ background:transparent !important; border:2px solid transparent !important; border-radius:100%; } #panel .exercise-group .exercise-navigation button div{ width:11px; height:11px; margin:1px; background:#fff; border:2px solid var(--line-2); transition:border-color .12s, background .12s; } #panel .exercise-group .exercise-navigation button:hover div{ border-color:var(--accent); } #panel .exercise-group .exercise-navigation button.focused{ border-color:var(--accent-soft) !important; } #panel .exercise-group .exercise-navigation button.focused div{ background:var(--accent); border-color:var(--accent); } #panel .exercise-group .exercise-navigation button.correct div{ background:#2eb872; border-color:#2eb872; } #panel .exercise-group .exercise-navigation button.incorrect div{ background:#e05252; border-color:#e05252; } /* Die Größe folgt dem Aa-Knopf, genau wie der Lesetext. Vorher stand hier ein fester Wert, Übungen blieben dadurch beim Vergrößern der Schrift unverändert. */ #panel .exercise-group .exercise{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 30px 28px; min-height:0; font-size:calc(17px * var(--font-scale, 1)); line-height:1.6; color:var(--ink); } #panel .exercise .small.text-secondary{ display:block; font-size:12px !important; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) !important; margin-bottom:8px; } #panel .exercise .text{ margin:0 0 6px; line-height:1.6; } #panel .exercise .text p{ margin:0 0 .9em; } /* Antwortmöglichkeiten */ #panel .exercise .radio{ margin-left:0; padding:7px 0; border-radius:10px; } #panel .exercise .radio:first-of-type{ padding-top:7px; } #panel .exercise .radio:last-of-type{ padding-bottom:7px; } #panel .exercise .radio .radio-symbol-i{ width:30px; height:30px; border:1.5px solid var(--line-2); color:var(--ink-2); font-size:14px; font-weight:600; transition:border-color .12s, background .12s, color .12s; } #panel .exercise .radio .radio-text{ margin-left:46px; color:var(--ink); } #panel .exercise .radio:hover .radio-symbol-o{ border-color:transparent; } #panel .exercise .radio:hover .radio-symbol-i{ border-color:var(--accent); color:var(--accent-tx,var(--accent)); } #panel .exercise .radio.selected .radio-symbol-o{ border-color:transparent; } #panel .exercise .radio.selected .radio-symbol-i{ background:var(--accent); border-color:var(--accent); color:#fff; } #panel .exercise .radio.is-valid .radio-symbol-i{ background:#2eb872; border-color:#2eb872; color:#fff; } #panel .exercise .radio.is-valid .radio-text{ color:#1b7a4d; font-weight:600; } #panel .exercise .radio.is-invalid .radio-symbol-i{ background:#e05252; border-color:#e05252; color:#fff; } #panel .exercise .radio.is-invalid .radio-text{ color:#b42323; } /* Lückentext-Felder und Auswahllisten */ #panel .exercise input[type=text]{ height:38px; padding:4px 10px; border:1px solid var(--line-2); border-radius:8px; font-size:16px; background:#fff; box-shadow:none; } #panel .exercise input[type=text]:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } #panel .exercise select.form-select{ border-color:var(--line-2); border-radius:8px; } #panel .exercise input.is-valid, #panel .exercise select.is-valid{ border-color:#2eb872 !important; background-image:none; } #panel .exercise input.is-invalid, #panel .exercise select.is-invalid{ border-color:#e05252 !important; background-image:none; } /* Knöpfe */ #panel .exercise .btn.check, #panel .exercise .btn.next{ padding:9px 18px; font-weight:600; font-size:15px; margin-top:18px !important; } #panel .exercise .btn.next{ background:#fff !important; color:var(--accent-tx,var(--accent)) !important; border-color:var(--accent) !important; } #panel .exercise .btn.next:hover{ background:var(--accent-soft) !important; } #panel .exercise .bookmark-btn, #panel .exercise .bm-flags{ margin-top:18px !important; } #panel .exercise .erklaerungBtn, #panel .exercise .stepByStepButton{ color:var(--accent-tx,var(--accent)) !important; font-weight:600; font-size:15px; margin-top:22px !important; margin-bottom:0 !important; } #panel .exercise .erklaerungBtn:hover, #panel .exercise .stepByStepButton:hover{ color:var(--accent-2) !important; text-decoration:underline !important; } /* Lösung */ #panel .exercise .erklaerung{ margin-top:18px; padding:18px 0 0; border-top:1px solid var(--line); font-size:16px; line-height:1.6; color:var(--ink-2); } #panel .exercise .erklaerung p{ margin:0 0 .8em; } #panel .exercise .step-wrapper{ align-items:flex-start; padding:8px 0; } #panel .exercise .step-index{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-tx,var(--accent)); padding:4px 0 0; width:96px; } #panel .exercise .step-text{ margin-left:96px; padding:0 0 0 16px; border-left:2px solid var(--accent-soft); } #panel .exercise .step-btn{ color:var(--accent-tx,var(--accent)) !important; font-weight:600; font-size:15px; padding-left:0; } @media (max-width:700px){ #panel .exercise-group .exercise{ padding:20px 18px 22px; } #panel .tabcontent.exercise-group > h4{ padding-right:90px; } } :root[data-theme="dark"] #panel .exercise-group .exercise{ background:var(--d-surf); border-color:var(--d-bd); color:var(--d-tx); } :root[data-theme="dark"] #panel .exercise .radio .radio-text, :root[data-theme="dark"] #panel .exercise .text{ color:var(--d-tx); } :root[data-theme="dark"] #panel .exercise .radio .radio-symbol-i{ border-color:var(--d-bd); color:var(--d-tx); } :root[data-theme="dark"] #panel .exercise-group .exercise-navigation button div{ background:var(--d-surf); border-color:var(--d-bd); } :root[data-theme="dark"] #panel .exercise .erklaerung{ border-color:var(--d-bd); color:var(--d-tx); } :root[data-theme="dark"] #panel .exercise input[type=text]{ background:var(--d-surf2); border-color:var(--d-bd); color:var(--d-tx); } /* ============================================================ Kapitel-Layout A (29.10.2026, ersetzt Layout C): Kapitelliste bleibt links, der Text bekommt Brotkrume, Titel, Meta-Zeile, Kästen und "Als Nächstes". Kopfblock liegt AUSSERHALB von .tabcontent, damit gespeicherte Markierungen ihre Textpositionen behalten. ============================================================ */ /* Brotkrume (ladeKapitel in index.php) */ #panel .kap-crumb{ max-width:720px; margin:6px auto 0; padding:0 4px; display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); } #panel .kap-crumb .kap-crumb-back{ flex:none; } #panel .kap-crumb .kap-crumb-kap{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4 !important; } #panel .kap-crumb .kap-crumb-kap::before{ content:"›"; margin-right:8px; color:var(--line-2); } #panel .kap-crumb .kap-crumb-back{ display:inline-flex; align-items:center; gap:8px; border:0; background:var(--tint); color:var(--ink-2); font:600 13px/1 var(--body); padding:8px 12px; border-radius:999px; cursor:pointer; } #panel .kap-crumb .kap-crumb-back:hover{ background:var(--accent-soft); color:var(--accent-tx,var(--accent)); } /* Kopfblock: Titel + Meta-Leiste (kapLayoutSync in index.php). Die Leiste ist ein Kasten mit Fächern; Trenner über den Gitterlinien-Trick (1px Lücke, Hintergrund = Linienfarbe), so bekommen umgebrochene Fächer auf dem Handy von selbst waagerechte Trenner. */ /* Feine Linie unter der Meta-Leiste, sie trennt den Kopf vom Lesetext. */ #panel .kap-head{ max-width:720px; margin:6px auto 0; padding:0 4px 16px; border-bottom:1px solid var(--line); } :root[data-theme="dark"] #panel .kap-head{ border-bottom-color:var(--d-bd); } #panel .kap-title{ font:700 34px/1.15 var(--display) !important; letter-spacing:-.025em; color:var(--ink); margin:6px 0 0; padding-top:20px; text-wrap:balance; } #panel .kap-meta{ display:flex; flex-wrap:wrap; gap:1px; margin-top:16px; font-size:13.5px; color:var(--ink-2); background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; } #panel .kap-meta > span{ flex:1 1 auto; display:inline-flex; align-items:center; padding:10px 16px; background:var(--tint); white-space:nowrap; } #panel .kap-meta span{ line-height:1.4 !important; } #panel .kap-meta i{ margin-right:6px; } /* Abschnittsleiste: Balken in der Untertest-Farbe (data-c der Brotkrume -> .kap-c-*) */ #panel .kap-pos{ display:inline-flex; align-items:center; gap:3px; } #panel .kap-pos > span{ margin-left:7px; } #panel .kap-seg{ display:block; width:14px; height:4px; border-radius:2px; background:var(--line-2); } #panel .kap-seg.on{ background:var(--c,var(--accent)); } #panel .kap-c-nw{--c:var(--c-nw)} #panel .kap-c-mednat{--c:var(--c-mednat)} #panel .kap-c-quanti{--c:var(--c-quanti)} #panel .kap-c-fakten{--c:var(--c-fakten)} #panel .kap-c-text{--c:var(--c-text)} #panel .kap-c-diagr{--c:var(--c-diagr)} #panel .kap-c-arith{--c:var(--c-arith)} #panel .tabcontent .kap-hidden{ display:none !important; } /* Die Größen hängen am Faktor --font-scale, den der Aa-Knopf setzt (applyFontScale in lernplan/index.php). Vorher standen hier feste 18px und 28px: Der Knopf setzte nur eine Prozentgröße auf #content, und eine absolute Größe im Kind ignoriert die. Der Knopf wirkte dadurch im Kapiteltext gar nicht. */ #panel .kap-crumb ~ .tabcontent{ margin-top:28px !important; font-size:calc(18px * var(--font-scale, 1)); } #panel .kap-crumb ~ .tabcontent h1, #panel .kap-crumb ~ .tabcontent h2{ font-size:calc(28px * var(--font-scale, 1)) !important; line-height:1.2 !important; } #panel .kap-crumb ~ .tabcontent > h3:first-child{ font-size:calc(28px * var(--font-scale, 1)) !important; line-height:1.2 !important; margin:0 0 .7em; } /* Kästen: Absätze, die mit "Beispiel:", "Tipp:", "Merke:" usw. beginnen (renderContent.js) */ #panel .tabcontent .callout{ margin:1.4em 0; padding:16px 20px; border-radius:12px; background:var(--tint); border:1px solid var(--line); } #panel .tabcontent .callout p{ margin:0; } #panel .tabcontent .callout p + p{ margin-top:.8em; } #panel .tabcontent .callout-tipp, #panel .tabcontent .callout-merke, #panel .tabcontent .callout-merksatz, #panel .tabcontent .callout-wichtig{ background:#fff; border-color:var(--accent-soft); border-left:3px solid var(--accent); } #panel .tabcontent .callout-achtung{ border-left:3px solid #d27a1f; background:#fff; } /* "Als Nächstes"-Karte am Ende des aktiven Abschnitts (kapLayoutSync) */ #panel .kap-next{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:40px; padding:18px 22px; border:1px solid var(--line); border-radius:14px; } #panel .kap-next-k{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } #panel .kap-next-n{ font-size:17px; font-weight:600; margin-top:2px; color:var(--ink); } #panel .kap-next-btn{ display:inline-flex; align-items:center; gap:8px; border:0; background:var(--accent); color:#fff; font:600 15px/1 var(--body); padding:12px 18px; border-radius:10px; cursor:pointer; white-space:nowrap; } #panel .kap-next-btn:hover{ background:var(--accent-2); } #panel .exercise-group .kap-next{ margin-top:24px; } /* Nur im Check-up hängt die Karte direkt am Panel und ist damit ein eigener Container neben der Aufgabenkarte. Sie braucht dort die Spaltenbreite des Inhalts, und die beiden Textzeilen brauchen ausdrücklich den normalen Fluss: Am Panel greifen Regeln aus style.css, die auf absolut positionierte Nachfahren zielen, sonst lägen "Als Nächstes" und der Name übereinander. Im Kapitel bleibt alles wie gehabt. */ #panel .kap-next.frei{ max-width:720px; margin:24px auto 56px !important; } #panel.hat-notizrand .kap-next.frei{ margin-left:calc(50% - 508px) !important; margin-right:0 !important; } /* :not(.kap-next-actions): Die Knopfleiste bleibt eine Zeile, nur der Textblock links wird zur Spalte. */ #panel .kap-next.frei > div:not(.kap-next-actions){ display:flex; flex-direction:column; align-items:flex-start; min-width:0; position:static !important; inset:auto !important; } #panel .kap-next.frei .kap-next-actions{ display:flex; flex-direction:row; align-items:center; gap:10px; flex:none; } #panel .kap-next.frei .kap-next-k, #panel .kap-next.frei .kap-next-n{ position:static !important; inset:auto !important; display:block; width:auto; float:none; line-height:1.3; } /* Getönter Grund: Die Karte ist Navigation und hebt sich damit vom weissen Inhalt ab. */ #panel .kap-next{ background:var(--tint); } :root[data-theme="dark"] #panel .kap-next{ background:var(--d-surf2); } /* Werkzeugleiste: so breit wie der Text */ @media (min-width:1001px){ body:has(#navigation_s.opened .mint-host) #kapitelTools{ width:720px !important; max-width:calc(100% - 2em); margin:0 auto !important; padding:8px 0 !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; } /* Untere Leiste durchgehend petrol */ body:has(#navigation_s.opened .mint-host) #menu_s{ background:var(--accent); box-shadow:none; } body:has(#navigation_s.opened .mint-host) #menu_s .nav-button{ background:var(--accent) !important; color:#fff !important; border-color:rgba(255,255,255,.18) !important; } body:has(#navigation_s.opened .mint-host) #menu_s .nav-button:hover:not(:disabled){ background:var(--accent-2) !important; color:#fff !important; } body:has(#navigation_s.opened .mint-host) #menu_s .nav-button:disabled{ color:rgba(255,255,255,.62) !important; } } :root[data-theme="dark"] #panel .kap-crumb .kap-crumb-back{ background:var(--d-surf2); color:var(--d-tx); } :root[data-theme="dark"] #panel .kap-meta{ background:var(--d-bd); border-color:var(--d-bd); color:var(--d-tx2); } :root[data-theme="dark"] #panel .kap-meta > span{ background:var(--d-surf2); } :root[data-theme="dark"] #panel .kap-seg{ background:var(--d-bd); } :root[data-theme="dark"] #panel .kap-seg.on{ background:var(--c,var(--accent)); } :root[data-theme="dark"] #panel .kap-title, :root[data-theme="dark"] #panel .kap-next-n{ color:var(--d-tx); } :root[data-theme="dark"] #panel .kap-next{ border-color:var(--d-bd); } :root[data-theme="dark"] #panel .tabcontent .callout{ background:var(--d-surf2); border-color:var(--d-bd); } /* Tabellen: so breit wie der Inhalt, Zellen brechen nur an Leerzeichen */ /* Auch Tabellen folgen dem Aa-Knopf, sonst bleiben sie als einziges Element im Lesetext bei ihrer festen Größe stehen. */ #panel .tabcontent table{ width:auto !important; max-width:100%; font-size:calc(15px * var(--font-scale, 1)); } #panel .tabcontent th, #panel .tabcontent td{ word-break:normal !important; overflow-wrap:normal !important; padding:8px 11px !important; } #panel .tabcontent .table-scroll{ border-radius:10px; } /* Untere Leiste im Kapitel auf dem Desktop ausblenden: die Karte am Textende übernimmt. Nur aus dem Bild geschoben, nicht display:none, weil kapLayoutSync die Knöpfe weiter abfragt. */ @media (min-width:1001px){ body:has(#navigation_s.opened .mint-host) #menu_s{ transform:translateY(110%); pointer-events:none; } body:has(#navigation_s.opened .mint-host) .panel{ height:calc(100vh - 65px) !important; height:calc(100dvh - 65px) !important; } body:has(#navigation_s.opened .mint-host) #navigation_s{ padding-bottom:0 !important; } } #panel .kap-next-actions{ display:flex; gap:10px; align-items:center; flex:none; } #panel .kap-prev-btn{ border:1px solid var(--line-2); background:#fff; color:var(--ink-2); font:600 15px/1 var(--body); padding:11px 16px; border-radius:10px; cursor:pointer; white-space:nowrap; } #panel .kap-prev-btn:hover{ border-color:var(--accent); color:var(--accent-tx,var(--accent)); } /* Schnellübersicht in der Karte, gleiche stille Form wie "Zurück" */ #panel .kap-quick-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); font:600 15px/1 var(--body); padding:11px 16px; border-radius:10px; cursor:pointer; white-space:nowrap; } #panel .kap-quick-btn:hover{ border-color:var(--accent); color:var(--accent-tx,var(--accent)); } :root[data-theme="dark"] #panel .kap-prev-btn, :root[data-theme="dark"] #panel .kap-quick-btn{ background:var(--d-surf2); border-color:var(--d-bd); color:var(--d-tx); } /* Formeln im Lesetext (29.10.2026): linksbündig im Textfluss statt zentriert, enger gesetzt. Absatz mit Formel bekommt eine feine Linie links, damit Beschriftung, Formel und Erklärung als ein Block gelesen werden. Zeilenumbrüche direkt um die Formel werden ausgeblendet (sie erzeugten die großen Lücken). */ #panel .tabcontent .katex-display{ text-align:left; margin:.55em 0 .65em; padding:.1em 0; } #panel .tabcontent .katex-display > .katex{ text-align:left; font-size:1.18em; } #panel .tabcontent br:has(+ .katex-display), #panel .tabcontent .katex-display + br{ display:none; } #panel .tabcontent p:has(> .katex-display){ padding-left:18px; border-left:3px solid var(--accent-soft); margin:1.2em 0 1.3em; } #panel .tabcontent p:has(> .katex-display:first-child:last-child){ padding-left:18px; } :root[data-theme="dark"] #panel .tabcontent p:has(> .katex-display){ border-left-color:rgba(15,107,107,.45); } /* KaTeX legt um Display-Formeln einen zusätzlichen ; Selektoren darauf angepasst */ #panel .tabcontent br:has(+ span > .katex-display), #panel .tabcontent span:has(> .katex-display) + br{ display:none; } #panel .tabcontent p:has(.katex-display){ padding-left:18px; border-left:3px solid var(--accent-soft); margin:1.2em 0 1.3em; } /* Feste Leiste am Fensterboden: umgekehrte Logik. Grundzustand ist unsichtbar, denn auf Übersichten und der Modulseite stand sonst ein leerer weißer Streifen, und beim Wechsel zwischen Modulen blitzte kurz "Vorheriges / Nächstes Modul" darin auf. Zurück ins Bild kommt sie nur, wo sie wirklich die Navigation trägt: beim Lesen eines Kapitels und in den Aufgaben. Beide bekommen ihre Knöpfe jetzt im Inhalt: die Karte "Als Nächstes" am Ende des Abschnitts (kapLayoutSync) und auf der Modulseite .mod-pager. Die Leiste ist deshalb auf jeder Breite und in jeder Ansicht aus dem Bild geschoben. Immer nur aus dem Bild geschoben, nie display:none: Die Knöpfe im Inhalt klicken auf #prevBtn / #nextBtn / #chapterBtn / #modulBtn in dieser Leiste, modNavSync() liest deren Sperrzustand aus und kapLayoutSync() prüft über offsetParent, welcher gerade gilt. Mit display:none wäre offsetParent null und die Karte im Inhalt würde nie gebaut. */ #menu_s{ transform:translateY(110%) !important; pointer-events:none !important; } #content .mod-pager{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 24px; } #content .mod-pager-group{ display:flex; gap:12px; margin-left:auto; } #content .mod-pager-btn.back{ color:var(--ink-2); } #content .mod-pager-btn.back:hover{ border-color:var(--accent); color:var(--accent-tx,var(--accent)); } @media (max-width:560px){ #content .mod-pager, #content .mod-pager-group{ flex-direction:column; align-items:stretch; width:100%; } #content .mod-pager-group{ margin-left:0; } #content .mod-pager-btn{ justify-content:center; } } #content .mod-pager-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); font:600 15px/1 var(--body); padding:12px 16px; border-radius:10px; cursor:pointer; } #content .mod-pager-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-tx,var(--accent)); } #content .mod-pager-btn.next{ background:var(--accent); border-color:var(--accent); color:#fff; } #content .mod-pager-btn.next:hover:not(:disabled){ background:var(--accent-2); border-color:var(--accent-2); color:#fff; } #content .mod-pager-btn:disabled{ opacity:.4; cursor:default; } :root[data-theme="dark"] #content .mod-pager-btn{ background:var(--d-surf2); border-color:var(--d-bd); color:var(--d-tx); } /* Modulleiste: Module nach Fach gruppiert (29.10.2026) */ #navigation_s .sidebar-group-fach{ display:flex; align-items:center; gap:8px; padding:20px 26px 8px !important; } #navigation_s .sidebar-group-fach:first-child{ padding-top:12px !important; } #navigation_s .sg-dot{ width:7px; height:7px; border-radius:50%; background:var(--fc, var(--muted)); flex:none; } /* Scrollleisten (29.10.2026): schmal und dezent in Seitenleisten, Kapitelliste und Lesefläche */ #navigation_p, #navigation_s, .sidebar, .structure-body, .panel, .layer, .quick-view, #content{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; } #navigation_p::-webkit-scrollbar, #navigation_s::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .structure-body::-webkit-scrollbar, .panel::-webkit-scrollbar, .layer::-webkit-scrollbar, .quick-view::-webkit-scrollbar, #content::-webkit-scrollbar{ width:6px; height:6px; } #navigation_p::-webkit-scrollbar-track, #navigation_s::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, .structure-body::-webkit-scrollbar-track, .panel::-webkit-scrollbar-track, .layer::-webkit-scrollbar-track, .quick-view::-webkit-scrollbar-track, #content::-webkit-scrollbar-track{ background:transparent; } #navigation_p::-webkit-scrollbar-thumb, #navigation_s::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .structure-body::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-thumb, .layer::-webkit-scrollbar-thumb, .quick-view::-webkit-scrollbar-thumb, #content::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:999px; border:1px solid #fff; } #navigation_p::-webkit-scrollbar-thumb:hover, #navigation_s::-webkit-scrollbar-thumb:hover, .structure-body::-webkit-scrollbar-thumb:hover, .panel::-webkit-scrollbar-thumb:hover, .layer::-webkit-scrollbar-thumb:hover{ background:var(--muted); } :root[data-theme="dark"] #navigation_p, :root[data-theme="dark"] #navigation_s, :root[data-theme="dark"] .structure-body, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .layer{ scrollbar-color:var(--d-bd) transparent; } :root[data-theme="dark"] .structure-body::-webkit-scrollbar-thumb, :root[data-theme="dark"] .panel::-webkit-scrollbar-thumb, :root[data-theme="dark"] #navigation_s::-webkit-scrollbar-thumb, :root[data-theme="dark"] .layer::-webkit-scrollbar-thumb{ background:var(--d-bd); border-color:var(--d-surf); } /* Modul-Icons (29.10.2026): getönter Kreis + Icon in Fachfarbe, wie .modul-side-icon in der Modulleiste */ .mod-icon, .header-icon{ color:var(--fc,var(--muted)) !important; background:color-mix(in srgb, var(--fc,var(--muted)) 12%, #fff) !important; box-shadow:none !important; } .mod-icon{ width:48px; height:48px; font-size:19px; } .mod-card.disabled .mod-icon{ --fc:var(--muted); } :root[data-theme="dark"] .mod-icon, :root[data-theme="dark"] .header-icon{ background:color-mix(in srgb, var(--fc,var(--muted)) 22%, var(--d-surf)) !important; } /* Kapitel-Zeilen in der Modul-Ansicht (29.10.2026): Ordner-Icon und Balken in der Fachfarbe (--fc steht auf .kap-list); erledigte Kapitel bleiben grün */ .kap-list .kap-icon{ color:var(--fc,#0f6b6b); background:color-mix(in srgb, var(--fc,#0f6b6b) 12%, #fff); } .kap-list .kap-progress-bar{ background:var(--fc,#0f6b6b); } :root[data-theme="dark"] .kap-list .kap-icon{ background:color-mix(in srgb, var(--fc,#0f6b6b) 22%, var(--d-surf)); } /* Untertest-Kopf (29.10.2026): ruhig wie das Dashboard – kein Blau, Petrol als einziger Akzent */ /* Zurück-Knopf überall als dieselbe graue Pille wie die Brotkrume im Kapitel (#panel .kap-crumb .kap-crumb-back). Vorher war er hier ein einfacher Textlink in Petrol, im Kapitel dagegen eine Pille, zwei Formen für dieselbe Handlung. */ .tt-zurueck{ display:inline-flex !important; align-items:center; gap:8px; background:var(--tint) !important; border:0 !important; padding:8px 12px !important; margin:0 0 18px !important; color:var(--ink-2) !important; font:600 13px/1 var(--body) !important; border-radius:999px !important; cursor:pointer; } .tt-zurueck i{ color:inherit !important; } .tt-zurueck:hover{ background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; text-decoration:none !important; } /* Im Kopf der Kapitelleiste bleibt er der schlichte Textlink in Petrol: Dort steht er zwischen zwei Zeilen Text, eine Pille würde den Block unruhig machen. */ .structure-header .tt-zurueck{ background:none !important; padding:0 !important; margin:0 0 10px !important; font-size:13px !important; color:var(--accent-tx,var(--accent)) !important; border-radius:0 !important; } .structure-header .tt-zurueck i{ color:var(--accent-tx,var(--accent)) !important; } .structure-header .tt-zurueck:hover{ background:none !important; color:var(--accent-2) !important; text-decoration:underline !important; text-underline-offset:3px; } :root[data-theme="dark"] .structure-header .tt-zurueck{ background:none !important; color:#9fe3db !important; } :root[data-theme="dark"] .tt-zurueck{ background:var(--d-surf2) !important; color:var(--d-tx) !important; } :root[data-theme="dark"] .tt-zurueck:hover{ background:rgba(15,107,107,.3) !important; color:#9fe3db !important; } .page-head{ align-items:center !important; padding:0 0 22px; border-bottom:1px solid var(--line); margin-bottom:26px !important; } .tt-chips{ margin-bottom:8px !important; gap:10px !important; } .page-eyebrow{ background:none !important; padding:0 !important; border-radius:0 !important; color:var(--muted) !important; font-size:12px !important; font-weight:700 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; } .tt-cat{ background:#fff !important; color:var(--ink-2) !important; border:1px solid var(--line-2); font-size:11.5px !important; font-weight:600 !important; letter-spacing:.3px !important; padding:2px 9px !important; line-height:1.5 !important; } .page-title{ font:700 clamp(24px,2.8vw,30px)/1.15 var(--display) !important; letter-spacing:-.022em !important; color:var(--ink) !important; margin:0 0 6px !important; } .page-sub{ color:var(--ink-2) !important; font-size:15px !important; } /* Fortschrittsring: 84px waren zu klein, "FORTSCHRITT" stieß innen an den Kreis. Jetzt 120px, Zahl und Wort im selben Verhältnis mitgewachsen. Der Ring selbst ist ein 120er viewBox, die Strichstärke 8 wird also genau als 8px gezeichnet. Auf schmalen Geräten steht er allein unter dem Titel und darf etwas größer sein. */ .php-ring-wrap{ width:120px !important; height:120px !important; } .php-ring-bg{ stroke:var(--line) !important; stroke-width:8 !important; } .php-ring-fill{ stroke:var(--accent) !important; stroke-width:8 !important; } .php-ring-center b{ font-size:24px !important; color:var(--ink) !important; font-variant-numeric:tabular-nums; } .php-ring-center span{ font-size:11px !important; letter-spacing:.6px; color:var(--muted) !important; } @media (max-width:700px){ .php-ring-wrap{ width:126px !important; height:126px !important; } .php-ring-center b{ font-size:25px !important; } .php-ring-center span{ font-size:11px !important; letter-spacing:.2px; } } /* --fc setzt die Seite je Untertest, sonst bleibt es beim Petrol der Marke. Die Farbe liegt in der Fläche, nicht im Rahmen: Ein farbiger Rand umreisst den Kasten hart und zieht den Blick auf die Kante statt auf den Text. Gilt für alle Untertests gleich. */ .est-box{ background:color-mix(in srgb, var(--fc,var(--accent)) 7%, #fff) !important; border:none !important; border-radius:14px !important; box-shadow:none !important; padding:18px 22px !important; } .est-box .est-h{ margin-bottom:8px !important; font-size:16px !important; color:var(--ink) !important; gap:10px !important; } /* Weisse Kachel auf getoenter Flaeche: Mit Farbe auf Farbe verschwaemme das Symbol. */ .est-box .est-ic{ width:30px !important; height:30px !important; border-radius:8px !important; font-size:13px !important; background:#fff !important; color:var(--fc,var(--accent)) !important; } .est-box p{ color:var(--ink-2) !important; font-size:15px !important; line-height:1.6 !important; } .est-box p strong{ color:var(--ink); } /* Wegweiser am Ende der Einstiegsbox: eigener Absatz, abgesetzt vom Text darueber. */ .est-box .tt-wege{ margin:14px 0 0 !important; padding-top:14px !important; border-top:1px solid color-mix(in srgb, var(--fc,var(--accent)) 16%, #fff) !important; } :root[data-theme="dark"] .est-box .tt-wege{ border-top-color:color-mix(in srgb, var(--fc,var(--accent)) 28%, var(--d-surf)) !important; } .ls-title i{ color:var(--muted) !important; } :root[data-theme="dark"] .tt-zurueck, :root[data-theme="dark"] .tt-zurueck i{ color:#9fe3db !important; } :root[data-theme="dark"] .page-head{ border-bottom-color:var(--d-bd); } :root[data-theme="dark"] .tt-cat{ background:var(--d-surf2) !important; border-color:var(--d-bd); color:var(--d-tx2) !important; } :root[data-theme="dark"] .est-box{ border:none !important; background:color-mix(in srgb, var(--fc,#9fe3db) 14%, var(--d-surf)) !important; } :root[data-theme="dark"] .est-box .est-ic{ background:color-mix(in srgb, var(--fc,var(--accent)) 26%, var(--d-surf)) !important; color:var(--fc,#9fe3db) !important; } :root[data-theme="dark"] .est-box p{ color:var(--d-tx2) !important; } /* Lesbarkeit (29.10.2026): Beschriftungen für automatische Kästen, Merksätze (renderContent.js) */ #panel .tabcontent .callout-auto::before, #panel .tabcontent .merksatz::before{ display:block; font:700 11.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-tx,var(--accent)); margin-bottom:8px; } #panel .tabcontent .callout-auto::before{ content:"Beispiel"; } #panel .tabcontent .merksatz::before{ content:"Merke"; } #panel .tabcontent .merksatz{ margin:1.4em 0; padding:16px 20px; border-radius:12px; background:#fff; border:1px solid var(--accent-soft); border-left:3px solid var(--accent); } #panel .tabcontent .merksatz strong{ font-weight:600; color:var(--ink); } #panel .tabcontent .callout-achtung::before{ color:#d27a1f; } :root[data-theme="dark"] #panel .tabcontent .merksatz{ background:var(--d-surf2); border-color:var(--d-bd); border-left-color:#9fe3db; } :root[data-theme="dark"] #panel .tabcontent .merksatz strong{ color:var(--d-tx); } /* Modulliste (Untertest-Seite): Karten nach Fach gruppiert wie die Modulleiste links (29.10.2026) */ .module .mod-group{ display:flex; align-items:center; gap:8px; margin:26px 0 10px; padding:0 2px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .module .mod-group:first-child{ margin-top:4px; } .module .mod-group .sg-dot{ width:7px; height:7px; border-radius:50%; background:var(--fc, var(--muted)); flex:none; } /* Nacharbeiten (29.10.2026): Seitenleisten-Zähler, Stapel-Seite, Runner in Petrol */ .sidebar .sidebar-button .na-count{ margin-left:auto; font:700 11.5px/1 var(--body); color:var(--accent-tx,var(--accent)); background:var(--accent-soft); border-radius:999px; padding:4px 8px; min-width:24px; text-align:center; font-variant-numeric:tabular-nums; } .sidebar .sidebar-item.active .na-count{ background:var(--accent); color:#fff; } .na-card{ border:1px solid var(--line); border-radius:14px; padding:22px 24px; background:#fff; margin-top:4px; } .na-card-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .na-big{ font:700 40px/1 var(--display); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; } .na-big-l{ color:var(--ink-2); font-size:15px; margin-top:6px; } .na-note{ margin:14px 0 0; font-size:13.5px; color:var(--muted); } .na-start i{ margin-left:6px; font-size:13px; } .na-list-h{ font:700 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:28px 0 10px; } .na-list{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .na-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; border-top:1px solid var(--line); } .na-row:first-child{ border-top:0; } .na-row-t b{ display:block; font-weight:600; color:var(--ink); font-size:15px; } .na-row-t span{ display:block; font-size:13px; color:var(--muted); margin-top:2px; } .na-row-n{ font:600 14px/1 var(--body); color:var(--ink-2); background:var(--tint); border-radius:999px; padding:6px 11px; font-variant-numeric:tabular-nums; } .na-empty{ text-align:center; padding:48px 20px; border:1px dashed var(--line-2); border-radius:14px; } .na-empty-ic{ width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent-tx,var(--accent)); display:inline-flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; } .na-empty h3{ font:700 20px/1.2 var(--display); color:var(--ink); margin:0 0 8px; } .na-empty p{ color:var(--ink-2); margin:0; max-width:420px; margin-inline:auto; } .fs-btn-primary{ background:var(--accent) !important; } .fs-btn-primary:hover{ background:var(--accent-2) !important; } .fs-tab.on{ color:var(--accent-tx,var(--accent)) !important; border-bottom-color:var(--accent) !important; } :root[data-theme="dark"] .na-card, :root[data-theme="dark"] .na-list{ background:var(--d-surf); border-color:var(--d-bd); } :root[data-theme="dark"] .na-row{ border-color:var(--d-bd); } :root[data-theme="dark"] .na-big, :root[data-theme="dark"] .na-row-t b, :root[data-theme="dark"] .na-empty h3{ color:var(--d-tx); } :root[data-theme="dark"] .na-row-n{ background:var(--d-surf2); color:var(--d-tx2); } :root[data-theme="dark"] .sidebar .sidebar-button .na-count{ background:rgba(15,107,107,.25); color:#9fe3db; } /* Anleitungen: mehr Struktur (29.10.2026). Zwischenüberschriften aus fetten Zeilen, "- Punkt"-Aufzählungen hängend; erzeugt in renderContent.js, Text unverändert */ #panel .tabcontent h3.h-auto{ font-size:18px !important; margin:1.8em 0 .55em; } #panel .tabcontent h3.h-auto b, #panel .tabcontent h3.h-auto strong{ font-weight:inherit; color:inherit; } #panel .tabcontent h1 + h3.h-auto, #panel .tabcontent h2 + h3.h-auto{ margin-top:.6em; } #panel .tabcontent p.dash-item{ position:relative; padding-left:1.35em; margin-bottom:.4em; } #panel .tabcontent p.dash-item .dash{ position:absolute; left:0; opacity:0; pointer-events:none; } #panel .tabcontent p.dash-item::before{ content:"\2022"; position:absolute; left:.25em; color:var(--accent-tx,var(--accent)); font-weight:700; } #panel .tabcontent p.dash-item + p:not(.dash-item){ margin-top:1.05em; } /* Leerzeilen (


, auch in ) tragen nichts, der Absatzabstand reicht */ #panel .tabcontent p.p-empty{ display:none; } /* Striche-Trennlinie aus dem Editor */ #panel .tabcontent p.text-rule{ font-size:0; line-height:0; height:0; border-top:1px solid var(--line); margin:2em 0; color:transparent; } /* Fragen-Runner in Petrol (29.10.2026): Blau aus style.css überschreiben */ .fs-run-fill{ background:var(--accent) !important; } .fs-opt.sel{ border-color:var(--accent) !important; background:var(--accent-soft) !important; } .fs-opt.sel .fs-opt-mark{ border-color:var(--accent) !important; background:var(--accent) !important; } .fs-solution{ background:#fff !important; border-left-color:var(--accent) !important; border:1px solid var(--line); border-left-width:3px !important; } .fs-nav-item.current{ border-color:var(--accent) !important; color:var(--accent-tx,var(--accent)) !important; background:var(--accent-soft) !important; box-shadow:0 0 0 3px rgba(15,107,107,.14) !important; } .fs-nav-dot.cur{ border-color:var(--accent) !important; } .fs-nav-title::before{ background:var(--accent) !important; } .fs-mode-opt.on{ color:var(--accent-tx,var(--accent)) !important; } .fs-mode-opt.on .fs-mode-dot{ background:var(--accent) !important; } .fs-pause:hover, .fs-pause-card svg{ color:var(--accent-tx,var(--accent)) !important; border-color:var(--accent) !important; } .fs-sel:focus, .fs-inp:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(15,107,107,.14) !important; } .fs-res-score, .fs-sess-open{ color:var(--accent-tx,var(--accent)) !important; } .fs-review-badge, .fs-badge, .fs-opt-badge{ color:var(--accent-tx,var(--accent)) !important; background:var(--accent-soft) !important; } .fs-count.on, .fs-adaptive .fs-count.on, .fs-start, .fs-start-primary, .fs-how-step .fs-how-n{ background:var(--accent) !important; border-color:var(--accent) !important; } .fs-start:hover{ background:var(--accent-2) !important; } .fs-diff.on, .fs-info-toggle.on, .fs-adv-toggle.on, .fs-adv-toggle.on .fs-adv-chev{ background:var(--accent-soft) !important; border-color:#cfe4e2 !important; color:var(--accent-tx,var(--accent)) !important; } .fs-t-row input{ accent-color:var(--accent) !important; } .fs-line, .fs-guide{ stroke:var(--accent) !important; } .fs-dot, .fs-hi{ fill:var(--accent) !important; } .fs-legend-dot{ background:var(--accent) !important; } .fs-hist-bar-fill{ background:var(--accent) !important; } /* Übungen-Block (Simulationen/Mini-Übung, _tt_train.php) in Petrol (29.10.2026): Blau/Lora aus style.css überschreiben */ .sim-title, .sim-list-title, .sim-time-row b{ font-family:var(--display) !important; color:var(--ink) !important; letter-spacing:-.01em; } .sim-card, .sim-list{ border-color:var(--line) !important; } .sim-head .sim-ic{ background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; } .sim-sub, .sim-list-sub, .sim-val, .sim-progress, .sim-time-row span{ color:var(--muted) !important; } .sim-sub strong{ color:var(--ink-2); } .sim-row label{ color:var(--ink-2) !important; } .sim-val b{ color:var(--accent-tx,var(--accent)) !important; } .sim-list-item{ border-bottom-color:var(--line) !important; } .sim-list-item:hover{ background:var(--tint) !important; } .sim-list-btn, .sim-start{ background:var(--accent) !important; color:#fff !important; border-radius:10px !important; } .sim-list-item:hover .sim-list-btn, .sim-start:hover{ background:var(--accent-2) !important; filter:none !important; transform:none !important; } .sim-list-btn-unlock{ background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; } .sim-list-locked:hover .sim-list-btn-unlock{ background:var(--accent) !important; color:#fff !important; } .sim-list-restart{ border-color:var(--line-2) !important; color:var(--ink-2) !important; } .sim-list-restart:hover{ border-color:var(--accent) !important; color:var(--accent-tx,var(--accent)) !important; } .sim-mode{ background:var(--tint) !important; } .sim-mode-opt{ color:var(--muted) !important; } .sim-mode-opt.active{ color:var(--accent-tx,var(--accent)) !important; background:#fff !important; box-shadow:0 1px 3px rgba(15,27,51,.08) !important; } /* Im Dark Mode blieb die gewaehlte Schaltflaeche weiss, die helle Schrift darauf war damit kaum zu lesen. */ :root[data-theme="dark"] .sim-mode-opt.active{ background:var(--d-surf) !important; box-shadow:none !important; } :root[data-theme="dark"] .sim-mode{ background:var(--d-bg) !important; } .sim-range{ background-image:linear-gradient(var(--accent),var(--accent)) !important; background-color:var(--line) !important; } .sim-range::-webkit-slider-thumb{ border-color:var(--accent) !important; box-shadow:0 1px 4px rgba(15,107,107,.30) !important; } .sim-range::-moz-range-thumb{ border-color:var(--accent) !important; box-shadow:0 1px 4px rgba(15,107,107,.30) !important; } .sim-range::-moz-range-progress{ background:var(--accent) !important; } .sim-time-row{ background:var(--tint) !important; } .sim-pool-select:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(15,107,107,.14) !important; } .sim-empty{ border-color:var(--line-2) !important; background:var(--tint) !important; color:var(--muted) !important; } .tt-anleitung-btn{ border-color:var(--line) !important; color:var(--ink) !important; } .tt-anleitung-btn i{ color:var(--accent-tx,var(--accent)) !important; } .tt-anleitung-btn:hover{ border-color:var(--accent) !important; background:var(--accent-soft) !important; color:var(--accent-tx,var(--accent)) !important; } /* Notizen + Testtag-Probe (29.10.2026) */ #hlRemove .hl-note-btn{ color:#fff; opacity:.85; cursor:pointer; display:inline-flex; align-items:center; padding:2px 4px; font-size:13px; } #hlRemove .hl-note-btn:hover{ opacity:1; transform:scale(1.1); } #hlRemove .hl-trenner{ width:1px; height:18px; background:rgba(255,255,255,.25); margin:0 4px; } /* Beide Leisten gleich hoch: Die Leiste beim Markieren war mit 8px Innenabstand und 9px Luecke hoeher und breiter als das Popover einer gesetzten Markierung, obwohl in beiden dieselben Farbfelder stehen. Jetzt gelten ueberall die Werte des Popovers. */ #hlToolbar, #smToolbar{ padding:6px 9px !important; gap:4px !important; border-radius:10px !important; } #hlToolbar .hl-trenner, #smToolbar .hl-trenner{ height:18px !important; margin:0 4px; } /* Farbfelder im Popover einer gesetzten Markierung: gleiche Groesse wie beim Markieren, die aktuelle Farbe traegt einen Haken. */ #hlRemove .hl-swatch{ width:22px; height:22px; border-radius:50%; cursor:pointer; margin:0 2px; border:2px solid rgba(255,255,255,.75); transition:transform .1s; display:inline-flex; align-items:center; justify-content:center; } #hlRemove .hl-swatch:hover{ transform:scale(1.15); } #hlRemove .hl-swatch.ist-an{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); } #hlRemove .hl-swatch.ist-an::after{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px; line-height:1; color:#1f2733; } /* Das kleine Stift-Zeichen hinter einer Markierung mit Notiz entfällt: Die Notiz steht als Karte am Rand, das Zeichen war nur zusätzliches Rauschen im Text. */ .hl.hl-has-note::after{ content:none; } #hlNote{ position:absolute; z-index:1000; display:none; width:320px; max-width:calc(100vw - 16px); background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:10px; box-shadow:0 8px 28px rgba(15,27,51,.14); } #hlNote textarea{ width:100%; min-height:80px; border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; font:14px/1.5 var(--body); color:var(--ink); resize:vertical; } #hlNote .hl-note-row{ display:flex; gap:8px; margin-top:8px; } #hlNote button{ border:1px solid var(--line-2); background:#fff; color:var(--ink-2); font:600 13px var(--body); padding:7px 12px; border-radius:8px; cursor:pointer; } #hlNote .hl-note-save{ background:var(--accent); border-color:var(--accent); color:#fff; } .tp-teaser{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:0 0 22px; cursor:pointer; background:#fff; } .tp-teaser:hover{ border-color:var(--accent); } .tp-teaser-ic{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-tx,var(--accent)); display:inline-flex; align-items:center; justify-content:center; flex:none; } .tp-teaser-t{ min-width:0; flex:1; } .tp-teaser-t b{ display:block; font-weight:600; color:var(--ink); font-size:15px; } .tp-teaser-t span{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; } .tp-teaser-go{ font:600 14px var(--body); color:var(--accent-tx,var(--accent)); white-space:nowrap; } :root[data-theme="dark"] #hlNote, :root[data-theme="dark"] #hlNote textarea, :root[data-theme="dark"] #hlNote button, :root[data-theme="dark"] .tp-teaser{ background:var(--d-surf); border-color:var(--d-bd); color:var(--d-tx); } /* Simulationsseite: ganzer Test + Untertest-Karten in Testreihenfolge (29.10.2026) */ .simu-full{ display:flex; align-items:center; gap:18px; background:#fff; border:1px dashed var(--line-2); border-radius:14px; padding:18px 22px; } .simu-full-text{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; } .simu-full-text b{ font-family:var(--display); font-size:16px; color:var(--ink); } .simu-full-text span{ font-size:14px; line-height:1.55; color:var(--muted); } .simu-badge{ flex:none; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-tx,var(--accent)); background:var(--accent-soft); border-radius:20px; padding:5px 11px; } .simu-intro{ margin:-6px 0 16px; font-size:14px; color:var(--muted); } .simu-list{ display:flex; flex-direction:column; gap:14px; } .simu-ut{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 22px 6px; } .simu-ut-head{ display:flex; align-items:center; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--line); } .simu-ut-ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; background:color-mix(in srgb, var(--fc) 12%, #fff); color:var(--fc); } .simu-ut-text{ flex:1; min-width:0; } .simu-ut-title{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); } .simu-ut-sub{ font-size:13px; color:var(--muted); margin-top:2px; } .simu-ut-link{ flex:none; font-size:13.5px; font-weight:600; color:var(--accent-tx,var(--accent)); cursor:pointer; text-decoration:none; white-space:nowrap; } .simu-ut-link:hover{ color:var(--accent-2); text-decoration:underline; text-underline-offset:2px; } .simu-ut .sim-list-items{ padding:2px 0 6px; } .simu-ut .sim-list-item:last-child{ border-bottom:none !important; } .simu-ut-empty{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0 12px; font-size:14px; color:var(--muted); } .simu-ut-empty a{ color:var(--accent-tx,var(--accent)); font-weight:600; cursor:pointer; white-space:nowrap; } .simu-ut-empty a:hover{ text-decoration:underline; text-underline-offset:2px; } /* Naturwissenschaften: aufklappbare Liste aller Module mit direktem Weg ins Check-up. Das Auf- und Zuklappen macht ein onclick direkt am Knopf, weil dieses Panel per innerHTML eingefügt wird und