/* =========================================================================== MeisterOrga - Heller Darstellungsmodus =========================================================================== */ /* --- 1. Die Farbwerte ---------------------------------------------------- */ /* Alles mit dunklem Geruest: oeffentliche Seiten UND Anmeldeseite. */ [data-theme="light"] body.auth { /* Sagt dem Browser, in welcher Grundhelligkeit die Seite gebaut ist - davon haengen Bildlaufleisten und Systemelemente ab. */ color-scheme: light; /* Gruende: Weiss fuer Karten, ein Hauch Grau fuer die Flaeche darunter. Nicht umgekehrt - eine weisse Flaeche mit grauen Karten wirkt wie ein unfertiges Formular. */ --au-bg-0: #f4f7fb; --au-bg-1: #ffffff; --au-bg-2: #e9f0f9; /* Schrift: Anthrazit statt Schwarz. Reines Schwarz auf Weiss ist hart und ermuedet beim Lesen laengerer Abschnitte. */ --au-ink: #131c2b; /* 16,5:1 auf Weiss */ --au-ink-soft: #44556c; /* 8,1:1 - Fliesstext */ --au-ink-muted: #5c6d85; /* 5,7:1 - Platzhalter, Beiwerk */ --au-ink-faint: #6b7b91; /* 4,6:1 - Kleingedrucktes */ /* Auf dem leicht grauen Grund der Fusszeile faellt jeder Wert um rund einen Punkt ab - deshalb steht --au-ink-muted dunkler, als es auf reinem Weiss noetig waere: dort 5,7:1, in der Fusszeile 4,7:1. */ --au-accent: #2f6fe0; /* zurzeit ungenutzt, siehe login.css */ --au-accent-soft: #1b5fce; /* 5,9:1 - Verweise und Symbole */ --au-accent-ink: #10408f; /* 9,0:1 - beim Ueberfahren */ --au-link-hover: #10408f; --au-accent-2: #0f9b78; --au-on-accent: #ffffff; /* Flaechen. Im dunklen Modus sind das durchscheinende Weisstoene, die den Grund aufhellen; hier sind es gedeckte Grautoene, die ihn abstufen. */ --au-glass: #ffffff; --au-glass-strong: #ffffff; --au-veil: #fbfcfe; --au-shine: rgba(27, 95, 206, .07); --au-hover-bg: rgba(19, 28, 43, .055); --au-chip-bg: #f1f4f9; --au-panel-bg: #f7f9fc; /* Eingabefelder heben sich vom weissen Kartengrund ab und werden beim Hineinklicken weiss - die Bewegung geht zum Hellen, nicht zum Dunklen. */ --au-field: #f1f5fa; --au-field-focus: #ffffff; --au-autofill: #ffffff; --au-line: #dae1ea; --au-line-soft: #e7ecf3; --au-line-hover: #b7c3d3; --au-line-mid: #c2ccdb; --au-line-strong: #a9b7ca; /* Schatten: dieselbe Form, aber viel weniger Deckkraft und ein blaeulich gebrochenes Grau statt Schwarz. Schwarz mit 30 Prozent auf Weiss sieht nach Schmutz aus, nicht nach Tiefe. */ --au-shadow-card: rgba(23, 38, 61, .09); --au-shadow-lift: rgba(23, 38, 61, .12); --au-shadow-figur: rgba(23, 38, 61, .20); --au-shadow-deep: rgba(23, 38, 61, .16); /* Die weichen Lichtpunkte im Hintergrund bleiben, aber stark zurueckgenommen: Auf dunklem Grund geben sie Tiefe, auf hellem Grund wuerden sie die Flaeche einfaerben. */ --au-glow-a: rgba(61, 139, 255, .13); --au-glow-b: rgba(47, 212, 196, .09); --au-glow-c: rgba(97, 160, 255, .10); --au-grid: rgba(23, 38, 61, .045); /* Meldungen: satte, dunkle Schrift auf zartem Grund. */ --au-danger: #c62828; --au-danger-bg: rgba(198, 40, 40, .07); --au-danger-ln: rgba(198, 40, 40, .28); --au-ok: #0f8a68; --au-caps: #8a5300; --au-alert-error-ink: #8e1f1f; --au-alert-info-ink: #12457f; --au-alert-success-ink: #0b5943; --au-cc-bg-a: rgba(255, 255, 255, .99); --au-cc-bg-b: rgba(247, 250, 253, .99); /* Die Anmeldekarte traegt im dunklen Modus einen sehr weiten, fast schwarzen Schatten - sie schwebt ueber dem Grund. Hell bleibt die Form, nur viel leiser. */ --au-shadow-karte-a: rgba(23, 38, 61, .15); --au-shadow-karte-b: rgba(23, 38, 61, .10); /* Die weisse Lichtkante an der Oberkante der Karte hat auf einer weissen Karte nichts mehr zu zeichnen. */ --au-glanz: transparent; --au-glyph: #2f6fe0; /* Die Kontur, die den silbernen Teil des Logos vom hellen Grund abgrenzt. Begruendung siehe login.css bei --au-logo-kontur. */ --au-logo-kontur: drop-shadow(0 0 .5px rgba(13, 26, 48, .95)) drop-shadow(0 0 1px rgba(13, 26, 48, .7)) drop-shadow(0 0 2.5px rgba(13, 26, 48, .35)); } /* Nur die oeffentlichen Seiten. */ [data-theme="light"] body.pub { /* Kopfleiste, Fusszeile und aufgeklapptes Menue. Die Kopfleiste bleibt halbdurchsichtig, damit der Inhalt weiterhin sichtbar darunter durchlaeuft - dieselbe Wirkung wie im dunklen Modus. */ --pub-chrome: rgba(255, 255, 255, .82); --pub-chrome-alt: #edf1f7; --pub-chrome-menu: rgba(255, 255, 255, .98); --pub-on-accent: #ffffff; --pub-accent-rgb: 27, 95, 206; /* Abzeichen "Empfohlen" - ein Ton tiefer als im dunklen Modus. Das ganz helle Mint (#4fe0b0) sitzt hier auf einer WEISSEN Karte und verlaere dort seine Kontur; #2bbd91 bleibt hellgruen, hebt sich aber ab. */ --pub-tag-bg: #2bbd91; /* Die farbige Haelfte der Ueberschrift. Grosse Schrift braucht 3:1; beide Werte liegen darueber. */ --pub-hero-ink: #2f74e0; --pub-hero-a: #3f86f0; --pub-hero-b: #14418f; --pub-shot-a: #eef2f8; --pub-shot-b: #e2e8f1; --pub-shot-leiste: rgba(19, 28, 43, .035); --pub-shot-punkt: rgba(19, 28, 43, .13); /* Grund der grossen Bildansicht: im dunklen Modus ein dunkles Glas, hier ein helles. */ --pub-lb-overlay: rgba(238, 242, 248, .92); --pub-todo-ink: #8a5300; --pub-todo-bg: rgba(255, 176, 80, .20); --pub-todo-line: rgba(186, 122, 20, .55); } /* --- 2. Ausnahmen -------------------------------------------------------- */ /* Der Fokusrahmen */ [data-theme="light"] .pub .pub-btn:focus-visible, [data-theme="light"] .pub .pub-nav__links > a:focus-visible, [data-theme="light"] .pub .pub-thema:focus-visible, [data-theme="light"] .pub .pub-social__link:focus-visible, [data-theme="light"] .pub .pub-card--link:focus-visible, [data-theme="light"] .pub .pub-faq__frage:focus-visible { outline-color: var(--au-accent-soft); } /* Die blaue Schaltflaeche */ [data-theme="light"] .pub .pub-btn--primary, [data-theme="light"] .auth .au-submit { box-shadow: 0 14px 30px -14px rgba(27, 95, 206, .55), inset 0 1px 0 rgba(255, 255, 255, .26); } [data-theme="light"] .pub .pub-btn--primary:hover, [data-theme="light"] .auth .au-submit:hover { box-shadow: 0 20px 40px -14px rgba(27, 95, 206, .62), inset 0 1px 0 rgba(255, 255, 255, .3); } /* In der Kopfleiste sitzt dieselbe Schaltflaeche kompakter; ihr Schatten faellt entsprechend kuerzer aus. */ [data-theme="light"] .pub .pub-nav__links .pub-btn--primary { box-shadow: 0 10px 22px -12px rgba(27, 95, 206, .55), inset 0 1px 0 rgba(255, 255, 255, .26); } /* Der zurueckhaltende Begleiter der blauen Schaltflaeche */ [data-theme="light"] .pub .pub-btn--ghost, [data-theme="light"] .auth .auth-card__register a { background: rgba(27, 95, 206, .06); border-color: rgba(27, 95, 206, .30); } [data-theme="light"] .pub .pub-btn--ghost:hover, [data-theme="light"] .auth .auth-card__register a:hover { background: rgba(27, 95, 206, .11); border-color: rgba(27, 95, 206, .48); } /* Karten heben sich beim Ueberfahren durch einen blauen Rahmen hervor - derselbe Gedanke, nur im dunkleren Ton. */ [data-theme="light"] .pub .pub-card:hover { border-color: rgba(27, 95, 206, .34); } [data-theme="light"] .pub .pub-card--link:hover, [data-theme="light"] .pub .pub-card--link:focus-visible { border-color: rgba(27, 95, 206, .34); box-shadow: 0 18px 44px var(--au-shadow-lift), 0 0 0 1px rgba(27, 95, 206, .14); } /* Flaechen mit sehr wenig Farbe: der Hinweis zum vergessenen Passwort, die Meldungen und der Rahmen des Cookie-Hinweises. Neun bis zehn Prozent tragen auf weissem Grund nicht. */ [data-theme="light"] .auth .au-hint { background: rgba(27, 95, 206, .06); border-color: rgba(27, 95, 206, .26); } [data-theme="light"] .auth .au-alert--info { background: rgba(27, 95, 206, .07); border-color: rgba(27, 95, 206, .28); } [data-theme="light"] .auth .au-alert--success { background: rgba(15, 138, 104, .08); border-color: rgba(15, 138, 104, .30); } [data-theme="light"] .auth .cc__karte { border-color: rgba(27, 95, 206, .22); } /* Der weiche blaue Schein unter der freigestellten Figur auf "Ueber uns". Auf hellem Grund darf er nicht leuchten, sondern muss tragen. */ [data-theme="light"] .pub .pub-ueber__figur img { filter: drop-shadow(0 14px 30px rgba(27, 95, 206, .20)); } /* Das Logo */ [data-theme="light"] .pub .pub-nav__brand .brandlogo, [data-theme="light"] .pub .pub-foot__brand .brandlogo { filter: var(--au-logo-kontur) drop-shadow(0 1px 2px rgba(13, 26, 48, .2)); }