/* mila-public.css — gemeinsame visuelle Basis fuer Public/Marketing/Legal. * * BEWUSST getrennt vom App-System: * - kein mila-ui.js, also kein data-shell, keine Sidebar, keine Bottom-Nav * - kein mila-themes.css, also keine Skins (Public bleibt eine feste Welt) * - kein mila-theme.css, damit keine App-Komponentenregel hier hineinwirkt * * Die Designsprache ist dieselbe wie in der App (ruhige Flaeche, ein Fokus, * Tiefe ueber Layer statt Glow, Motion nur als Feedback) — nur in einem * eigenen, ruhigeren Kontext. Es ist ausdruecklich KEINE dritte Sprache. * * Ersetzt den bis Phase 4D 4x wortgleich duplizierten Inline-Block der * Rechtsseiten sowie die Token-/Basis-Doppelung von start.html/produkt.html. */ :root{ --bg:#151922; --bg-soft:#1b2230; --bg-hard:#10141b; --card:#1b2230; --card-border:#313b4f; --text:#e8ecf3; --text-strong:#f4f7fb; --muted:#8a93a6; --soft-text:#c9d1d9; --blue:#3a72c4; --blue-hover:#4a83d8; --green:#6ee787; --red:#ff7b72; --yellow:#f2cc60; --radius:16px; --maxw:820px; /* Lesebreite fuer Fliesstext. 68 Zeichen ist die Spanne, in der das Auge die naechste Zeile ohne Suchbewegung findet — bei 820px Layoutbreite waeren es sonst ueber 100. */ --measure:68ch; } *{box-sizing:border-box} html{background:var(--bg);scroll-behavior:smooth} /* Der Verlauf liegt auf ; ohne Mindesthoehe endet er mit der Inhaltshoehe und hinterlaesst auf kurzen Seiten eine harte Kante. */ body{min-height:100vh} body{ margin:0;color:var(--text);line-height:1.65; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; background:radial-gradient(circle at top left, rgba(58,114,196,.16), transparent 34rem), var(--bg); } a{color:var(--blue-hover);text-decoration:none} a:hover{text-decoration:underline} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* ---- Kopfzeile ----------------------------------------------------------- Eine schmale Markenleiste, KEINE App-Navigation. Sie traegt bewusst nur Marke, Sprachumschalter und einen Rueckweg. */ .lh{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px); background:rgba(21,25,34,.72);border-bottom:1px solid rgba(255,255,255,.06)} .lh-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;min-height:60px; display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .brand{font-size:1.25rem;font-weight:800;letter-spacing:-.5px;color:var(--text-strong); flex:0 0 auto} .brand:hover{text-decoration:none} .brand span{color:var(--green)} .lh-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0} .back{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere} .back:hover{color:var(--text-strong);text-decoration:none} .lang-sel{background:transparent;color:var(--muted);border:1px solid var(--card-border); border-radius:8px;padding:5px 8px;font-size:.82rem;cursor:pointer} .lang-sel:hover{color:var(--text-strong);border-color:var(--muted)} .lang-sel option{background:var(--bg-soft);color:var(--text)} /* Tastaturbedienung sichtbar machen — auf den Rechtsseiten gab es bisher keinen Fokusring ausser dem Browser-Standard. */ a:focus-visible,button:focus-visible,select:focus-visible{ outline:2px solid var(--blue-hover);outline-offset:2px;border-radius:6px} /* ---- Dokumentflaeche ----------------------------------------------------- */ .lwrap{max-width:var(--maxw);margin:0 auto;padding:48px 24px 64px} .lwrap h1{font-size:clamp(1.7rem,4.2vw,2.1rem);color:var(--text-strong); margin:0 0 8px;letter-spacing:-.5px;line-height:1.2;overflow-wrap:break-word} .updated{color:var(--muted);font-size:.85rem;margin:0 0 28px;max-width:var(--measure); overflow-wrap:anywhere} /* Fliesstext auf Lesebreite begrenzen, Ueberschriften duerfen breiter stehen. Wirkt NUR von aussen — der Inhalt der uebersetzten Rechtstexte ist unberuehrt. */ .lbody{max-width:var(--measure)} .lbody h2{font-size:1.22rem;color:var(--text-strong);margin:38px 0 10px; line-height:1.3;letter-spacing:-.2px;overflow-wrap:break-word; scroll-margin-top:80px} .lbody h3{font-size:1.04rem;color:var(--text-strong);margin:24px 0 6px; line-height:1.35;overflow-wrap:break-word;scroll-margin-top:80px} .lbody h2+h3{margin-top:14px} /* anywhere statt break-word: Rechtstexte enthalten Formularlinien aus langen Binde-/Unterstrichketten und lange Behoerden-/URL-Bezeichner. break-word senkt die min-content-Breite nicht, anywhere schon — sonst schiebt eine einzige Kette die Seite bei 320px aus dem Bild. */ .lbody p,.lbody li{color:var(--soft-text);overflow-wrap:anywhere} .lbody p{margin:0 0 12px} .lbody ul,.lbody ol{padding-left:22px;margin:10px 0 14px} .lbody li{margin:5px 0} .lbody address{font-style:normal;color:var(--soft-text);line-height:1.85} .lbody strong{color:var(--text-strong)} .lbody a{overflow-wrap:anywhere} /* Tabellen in Rechtstexten duerfen die Seite nicht sprengen. */ .lbody table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse} .lbody td,.lbody th{padding:8px 12px;border:1px solid var(--card-border);vertical-align:top} /* Ruecklaufende Kompatibilitaet: bis Phase 4D lagen diese Regeln direkt auf .lwrap. Seiten ohne .lbody-Container werden weiterhin korrekt gesetzt. */ .lwrap>h2{font-size:1.22rem;color:var(--text-strong);margin:38px 0 10px} .lwrap>h3{font-size:1.04rem;color:var(--text-strong);margin:24px 0 6px} .lwrap>p,.lwrap>li{color:var(--soft-text)} .notice{background:rgba(242,204,96,.1);border:1px solid rgba(242,204,96,.3); color:var(--yellow);border-radius:12px;padding:14px 16px;font-size:.9rem; margin:24px 0;max-width:var(--measure);overflow-wrap:anywhere} /* ---- Inhaltsverzeichnis -------------------------------------------------- Wird zur Laufzeit aus den bereits gerenderten

erzeugt (siehe mila-public.js). Es liest das DOM und schreibt nichts in den Rechtstext — die sieben Sprachfassungen bleiben unberuehrt und bekommen ihr Verzeichnis automatisch in der jeweiligen Sprache. Gleiches Muster wie das Kapitelverzeichnis in skript.html (Phase 3D). / .ltoc{border:1px solid var(--card-border);background:var(--bg-soft); border-radius:14px;margin:0 0 32px;overflow:hidden} .ltoc>summary{cursor:pointer;padding:13px 16px;font-size:.8rem;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--muted); list-style:none;display:flex;align-items:center;gap:9px} .ltoc>summary::-webkit-details-marker{display:none} .ltoc>summary::after{content:"⌄";margin-left:auto;font-size:1.1rem;line-height:1; transition:transform .15s} .ltoc[open]>summary::after{transform:rotate(180deg)} .ltoc>summary:hover{color:var(--text-strong)} .ltoc ol{list-style:none;margin:0;padding:0 16px 14px; counter-reset:toc;column-gap:26px} .ltoc li{counter-increment:toc;margin:0;padding:0} .ltoc a{display:block;padding:6px 0 6px 30px;position:relative; color:var(--soft-text);font-size:.92rem;line-height:1.45; border-radius:6px;overflow-wrap:break-word} .ltoc a::before{content:counter(toc);position:absolute;left:0;top:6px; width:22px;text-align:right;color:var(--muted);font-size:.8rem;font-weight:700} .ltoc a:hover{color:var(--text-strong);text-decoration:none} .ltoc a.akt{color:var(--blue-hover);font-weight:600} .ltoc a.akt::before{color:var(--blue-hover)} / Ab zwei Spalten wird das Verzeichnis bei langen Dokumenten kompakt. / @media(min-width:900px){ .ltoc ol{columns:2} .ltoc li{break-inside:avoid} } / ---- Fussbereich --------------------------------------------------------- / .lfoot{max-width:var(--maxw);margin:0 auto;padding:24px; border-top:1px solid rgba(255,255,255,.07); color:var(--muted);font-size:.82rem; display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 14px} .lfoot a{color:var(--muted)} .lfoot a:hover{color:var(--text-strong)} .lfoot span{min-width:0;overflow-wrap:break-word} / ---- Texthaerte ---------------------------------------------------------- Gilt nur fuer die sieben Public-Seiten, die diese Datei laden. Kein Text darf die Seite aufspannen — geprueft mit +40 % laengeren Uebersetzungen in allen sieben Sprachen. / body h1,body h2,body h3,body h4,body p,body li,body a,body span,body div{ overflow-wrap:break-word} / Feste Spaltenbreiten duerfen den Container nie ueberschreiten. / body .foot-brand{max-width:min(300px,100%)} body .foot-grid,body .foot-cols,body .foot-bottom,body .hero-cta{min-width:0} body .foot-col{min-width:0} / Die Marketing-Kopfzeile ist eine Flex-Reihe fester Hoehe ohne Umbruch. Sobald Marke, Navigation, Sprachwahl und CTA nicht mehr nebeneinander passen — bei langen Uebersetzungen schon auf Tablets — muss sie umbrechen duerfen, statt die Seite aufzuspannen. / @media(max-width:820px){ body .nav{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px} body .nav-links{flex-wrap:wrap;gap:14px;min-width:0} } / ---- Mobil --------------------------------------------------------------- Nicht die zusammengestauchte Desktopansicht: engere Raender, kleinere Kopfzeile, Verzeichnis standardmaessig eingeklappt (siehe JS). / @media(max-width:640px){ .lh-in{padding:8px 16px;min-height:54px} .brand{font-size:1.12rem} .lwrap{padding:28px 16px 48px} .lbody h2{margin:30px 0 8px} .lfoot{padding:20px 16px} } @media(max-width:380px){ .lh-in{gap:8px} .back{font-size:.84rem} .lwrap{padding:24px 14px 40px} / .btn und .badge stehen auf den Marketing-/Uebersichtsseiten global auf white-space:nowrap und haben die Seite bei 320px aus dem Bild geschoben (vorbestehend, gemessen in 4D). Hier duerfen sie umbrechen. body-Praefix, damit die Regel den spaeter geladenen Seitenstil schlaegt. / body .btn{white-space:normal;line-height:1.25} body .badge{white-space:normal} body .doc{flex-wrap:wrap;gap:8px 12px} body .doc-name{min-width:0;flex:1 1 140px} } / ---- Druck --------------------------------------------------------------- Rechtstexte werden ausgedruckt und archiviert. */ @media print{ .lh,.ltoc,.lfoot{display:none !important} body{background:#fff;color:#111} .lwrap{max-width:none;padding:0} .lbody{max-width:none} .lbody p,.lbody li,.updated{color:#222} .lbody h1,.lbody h2,.lbody h3,.lwrap h1{color:#000} .notice{background:#fffbe8;color:#5a4a00;border-color:#c9b25e} }