/* ═══════════════════════════════════════════════ CIVITASAI – Editorial Design System Basis-CSS für alle Seiten (Konzept B) ═══════════════════════════════════════════════ */ /* Self-hosted Schriften (DSGVO: kein Drittanbieter-Request an Google). url() ist relativ zu dieser Stylesheet-Datei (Webroot), gilt daher für alle Seiten. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/dm-sans-300.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-400.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-400-italic.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-500.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/dm-sans-600.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-700.woff2') format('woff2'); } @font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-serif-display-400.woff2') format('woff2'); } @font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/dm-serif-display-400-italic.woff2') format('woff2'); } @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-mono-400.woff2') format('woff2'); } @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-mono-500.woff2') format('woff2'); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── TOKENS ── SSOT der Werte und ihrer zulaessigen Verwendung: C_PKA Team Knowledge/Guidelines/GL-003-design-system.md §2a. Kontrastangaben nach WCAG 2.1 gegen die drei Untergruende, auf denen die Site Text setzt: --bg #fafaf8 / --surface #ffffff / --bg2 #f3f2ef. Massgeblich ist immer der kleinste Wert (--bg2). Wer hier einen Wert aendert, aendert GL-003 §2a im selben Zug. */ :root { --bg: #fafaf8; /* Canvas */ --bg2: #f3f2ef; /* vertiefte Flaeche; dunkelster Textgrund der Site */ --surface: #ffffff; /* erhoehte Flaeche */ --border: #e5e2db; /* GLIEDERT NUR: Karten, Sektionen, Trennlinien, Tabellenlinien. 1,24 / 1,29 / 1,16 : 1 – rein dekorativ. Sobald eine Linie ein BEDIENELEMENT umschliesst, ist --border-control Pflicht (GL-003 §2f). */ --border-lt: #eeece8; /* feine Untertrennung – traegt nie Text, gliedert nur */ --border-control: #8e8a86; /* RUHERAHMEN JEDES BEDIENELEMENTS: input, select, textarea, Outline-/ Sekundaer-Buttons, klickbare Karten, Chips, Antwort-Buttons. 3,28 / 3,43 / 3,06 : 1 – erfuellt WCAG 1.4.11 (3:1). Pflicht, nicht Geschmack. Hover/aktiv geht DUNKLER: var(--text2), gewaehlt/fokussiert var(--primary). */ --border-strong: var(--border-control); /* Betonte Linie an NICHT bedienbarer Grafik: Akzent-Trennlinien, Indikatorpunkte, Icon-Striche, BPMN-Pool-/Lane-Rahmen. TRAEGT NIE TEXT. Heute wertgleich mit --border-control, aber eigene Rolle: wenn eine der beiden sich bewegt, bekommt --border-strong hier seinen eigenen Literalwert. */ --text: #1a1917; /* Fliesstext, Ueberschriften. 16,81 / 17,57 / 15,69 : 1 */ --text2: #57534e; /* sekundaerer Text, Nav, Labels. 7,30 / 7,63 / 6,81 : 1 */ --text3: #6e6a65; /* Captions, Footer, Meta, Platzhalter. 5,13 / 5,37 / 4,79 : 1 – AA-fest. Fuer nicht-textliche Marken NICHT dieses Token nehmen, sondern --border-strong. */ --red: #c0392b; /* Akzent/CTA. 5,20 / 5,44 / 4,86 : 1 */ --red-h: #e74c3c; /* nur Hover-Flaeche, traegt keinen Fliesstext */ --dark: #1a1917; /* Top-Bar, Nav-Button */ --green: #166534; /* Erfolg (Text, Icon, Fuellflaeche). 6,82 / 7,13 / 6,37 : 1. Auf --green-bg #f0fdf4 6,81:1, auf dem Mint #e8f5e9 6,34:1, Weiss auf --green 7,13:1 (Fuellung mit weisser Schrift). Geaendert 07.09.2026 von #15803d (4,48:1 auf --bg2, 4,46:1 auf #e8f5e9). */ --green-bg: #f0fdf4; /* nur Flaeche */ --green-bd: #bbf7d0; /* nur Rahmen */ --focus: var(--red); /* Fokusring-Farbe, siehe :focus-visible weiter unten */ /* Aliase für Lab-Maschinen – einzige Token-Quelle ist diese Datei */ --card: var(--surface); --primary: var(--red); --primary-h: #a93226; /* 6,34 / 6,62 / 5,92 : 1 */ --ok: var(--green); --warn: #92400e; /* Warnung/ausstehend. 6,78 / 7,09 / 6,33 : 1 – auch auf Amber-Tint #fef3c7 6,37:1 */ --shadow: 0 4px 14px rgba(0,0,0,0.08); } html { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; } body { min-height: 100vh; overflow-x: hidden; } /* ── TOP BAR ── */ .top-bar { background: var(--dark); color: rgba(255,255,255,.7); padding: 9px 24px; font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; } .live-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px #4ade80; display: inline-block; animation: pulse 2s infinite; flex-shrink: 0; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} } /* ── HEADER ── */ header { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 66px; } /* ── LOGO ── */ .logo { text-decoration: none; display: inline-flex; align-items: baseline; gap: 3px; } .logo-civitas { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.35rem; color: var(--text); line-height: 1; } .logo-ai { font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; color: #fff; background: var(--red); padding: 2px 6px; border-radius: 3px; letter-spacing: .05em; vertical-align: middle; position: relative; top: -1px; } nav { display: flex; gap: 28px; align-items: center; } nav a { color: var(--text2); text-decoration: none; font-size: .875rem; font-weight: 500; transition: color .2s; } nav a:hover, nav a.active { color: var(--text); } .btn-nav { background: var(--dark); color: #fff; border: none; cursor: pointer; padding: 9px 20px; border-radius: 6px; font-size: .85rem; font-weight: 600; font-family: inherit; letter-spacing: .01em; transition: background .2s; } .btn-nav:hover { background: #2c2a27; } /* ── MAIN CONTAINER ── */ .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } /* ── SECTION LABEL ── */ .section-head { display: flex; align-items: center; gap: 12px; padding: 44px 0 22px; border-bottom: 2px solid var(--text); margin-bottom: 0; } .section-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); } .badge { font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; } .badge-live { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bd); } .badge-soon { background: #fef3c7; color: var(--warn); border: 1px solid #fde68a; } .badge-locked { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; } /* ── BUTTONS ── */ .btn-primary { display: inline-block; background: var(--red); color: #fff; border: none; cursor: pointer; padding: 13px 26px; border-radius: 6px; font-size: .9rem; font-weight: 600; font-family: inherit; text-decoration: none; transition: background .2s, transform .15s; } .btn-primary:hover { background: var(--red-h); transform: translateY(-1px); } /* Bedienelement: der Rahmen IST die Grenze des Buttons, also --border-control (WCAG 1.4.11). Hover geht dunkler auf --text2 (6,81:1) — der Zustandswechsel bleibt so wahrnehmbar. */ .btn-outline { display: inline-block; background: transparent; color: var(--text); border: 1px solid var(--border-control); cursor: pointer; padding: 13px 26px; border-radius: 6px; font-size: .9rem; font-weight: 500; font-family: inherit; text-decoration: none; transition: border-color .2s, color .2s; } .btn-outline:hover { border-color: var(--text2); color: var(--text); } /* ── STATUS ── */ .status { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--green); } /* ── FOOTER ── */ footer { border-top: 2px solid var(--text); padding: 48px 32px 32px; background: var(--bg); margin-top: 80px; } .footer-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 32px; } .footer-brand { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.2rem; color: var(--text); margin-bottom: 8px; } .footer-brand em { color: var(--red); font-style: normal; } .footer-tagline { font-size: .82rem; color: var(--text3); line-height: 1.6; max-width: 280px; } .footer-col h4 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 14px; } .footer-col a { display: block; color: var(--text3); text-decoration: none; font-size: .875rem; margin-bottom: 9px; transition: color .2s; } .footer-col a:hover { color: var(--text); } .footer-bottom { max-width: 1120px; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--border-lt); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .75rem; color: var(--text3); } /* ═══════════════════════════════════════ MOBILE NAV (Hamburger) ═══════════════════════════════════════ */ .hamburger-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; z-index:110; } .hamburger-toggle span { display:block; width:22px; height:2px; background:var(--text); margin:5px 0; border-radius:1px; transition:.25s; } .hamburger-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════════ SKIP-LINK (Accessibility) Modernes visually-hidden Pattern. Für Tastaturnutzer per Tab erreichbar, aber nie im sichtbaren Layout. Nur bei :focus wird er als kleiner Button oben links eingeblendet. Stört das Design in keinem Zustand. Wird auf linearen Seiten (Startseite, lab/index) weggelassen. ═══════════════════════════════════════ */ .sr-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .sr-link:focus, .sr-link:focus-visible { position: fixed; top: 10px; left: 10px; width: auto; height: auto; padding: 8px 14px; overflow: visible; background: var(--text); color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; border-radius: 4px; z-index: 9999; } /* ═══════════════════════════════════════ FOKUSINDIKATOR (WCAG 2.4.7 / 1.4.11) — GL-003 §4b Ein Standard fuer die ganze Site. Gilt nur bei Tastaturbedienung (:focus-visible), erscheint also nicht beim Mausklick, und veraendert das Layout nicht (outline nimmt keinen Platz ein). Wer den Ring an einem Element unterdrueckt, setzt an derselben Stelle einen eigenen Indikator mit mindestens 3:1 gegen den Untergrund — ein blankes `outline: none` ist ab sofort ein Fehler, kein Stil. Farbe: --focus (= --red #c0392b), 5,20:1 auf --bg, 4,86:1 auf --bg2. Die Regel liest seit 07.09.2026 wieder var(--focus). Der frueher noetige Umweg ueber var(--red) ist erledigt: lab/erfahrungsmaschine/index.html heisst sein lokales Beiwerk-Token jetzt --focus-tint, der Namenskonflikt besteht nicht mehr. Wer --focus irgendwo lokal neu belegt, bricht diesen Ring — der Name ist reserviert (GL-003 §4b). ═══════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ═══════════════════════════════════════ MOBILE — shared breakpoints ═══════════════════════════════════════ */ @media (max-width: 768px) { /* Nav */ .nav-inner { padding: 0 16px; height: 58px; position:relative; } .hamburger-toggle { display:block; } nav { display:none; position:absolute; top:58px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); padding:12px 16px 20px; box-shadow:0 8px 24px rgba(0,0,0,.08); } header.menu-open nav { display:flex; flex-direction:column; gap:6px; } nav a { padding:10px 0; border-bottom:1px solid var(--border-lt); font-size:.95rem; } nav a:last-child { border-bottom:none; } .btn-nav { font-size: .8rem; padding: 8px 14px; } /* Container */ .container { padding: 0 16px; } /* Buttons */ .btn-primary, .btn-outline { padding: 12px 20px; font-size: .875rem; } /* Section heads */ .section-head { padding: 32px 0 16px; } /* Footer */ footer { padding: 40px 16px 24px; margin-top: 48px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-tagline { max-width: 100%; } .footer-bottom { flex-direction: column; gap: 4px; } } @media (max-width: 480px) { .btn-primary, .btn-outline { width: 100%; text-align: center; } } /* ═══════════════════════════════════════ BEWEGUNG REDUZIEREN (WCAG 2.3.3) — GL-003 §5b, Pflicht Gilt fuer die gesamte Site inkl. aller Lab-Maschinen: _base.css wird von jeder Produktivseite geladen, der Universalselektor greift daher auch auf Animationen aus _agent-base.css und aus Seiten-