/* ============================================================================ InflamAI — Stylesheet fuer die App-Rechtstexte (app.inflamai.org) Baut auf css/tokens.css (unveraendert aus der Marketing-Site uebernommen). Eigenstaendig: keine CDN-Aufrufe, keine externen Schriften, kein Tracking. Bewusst schmal gehalten — hier laeuft nur Fliesstext, kein Marketing. ========================================================================== */ :root { --maxw: 1080px; --maxw-read: 74ch; --gutter: clamp(20px, 5vw, 44px); --fs-hero: clamp(1.8rem, 3vw + 0.8rem, 2.5rem); --topbar-h: 60px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html { -webkit-tap-highlight-color: rgba(232, 168, 56, 0.18); } /* Kein overflow-x auf : das erzeugt einen eigenen Scroll-Container und legt position:sticky in mehreren Browsern still — Kopfleiste und Sprungleiste wuerden mitscrollen statt zu kleben. */ /* Sprungziele duerfen nicht unter der klebenden Leiste landen. */ [id] { scroll-margin-top: calc(var(--topbar-h) + 18px); } /* --- Layout ---------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); } .skiplink { position: fixed; left: -9999px; top: 10px; z-index: 300; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 700; } .skiplink:focus-visible { left: 12px; } /* --- Kopfleiste ------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 80; background: var(--nav-bg); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--hairline); } .topbar__row { display: flex; align-items: center; gap: 14px; min-height: var(--topbar-h); } .brand { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-primary); text-decoration: none; } .brand__mark { width: 28px; height: 28px; border-radius: 8px; display: block; margin-right: 9px; } .brand b { color: var(--accent-text); font-weight: 800; } .brand__tag { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-tertiary); margin-left: 10px; padding: 3px 8px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); } .topbar__spacer { flex: 1; } .topbar__tools { display: flex; align-items: center; gap: 8px; } .iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hairline); background: transparent; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; transition: color var(--dur-fast), background var(--dur-fast); } @media (hover: hover) { .iconbtn:hover { color: var(--text-primary); background: var(--surface-card); } } /* --- Sprachwahl ------------------------------------------------------------- */ .langbar { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 4px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); overflow: hidden; } .langbar__icon { color: var(--text-tertiary); font-size: 15px; margin: 0 4px 0 6px; } .langbar a { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; color: var(--text-tertiary); text-decoration: none; padding: 8px 9px; border-radius: var(--radius-pill); transition: color var(--dur-fast), background var(--dur-fast); } @media (hover: hover) { .langbar a:hover { color: var(--text-primary); background: var(--surface-card); } } .langbar a[aria-current="true"] { background: var(--ember-amber-15); color: var(--accent-text); } /* Auf dem Telefon reicht die Breite nicht fuer Marke + Merker + fuenf Sprachkuerzel + Umschalter. Erst faellt Beiwerk weg (Merker, Weltkugel), dann darf die Sprachleiste selbst schrumpfen und in sich scrollen — so wird die Seite nie breiter als das Fenster, egal wie viele Sprachen dazukommen. */ .langbar { flex: 0 1 auto; min-width: 0; } @media (max-width: 640px) { :root { --topbar-h: 56px; } .topbar__row { gap: 10px; } .brand__tag { display: none; } .langbar__icon { display: none; } .langbar { padding: 0 3px; overflow-x: auto; scrollbar-width: none; } .langbar::-webkit-scrollbar { display: none; } .langbar a { padding: 8px 7px; font-size: 12.5px; } } @media (max-width: 400px) { .brand { font-size: 16px; } .brand__mark { width: 24px; height: 24px; margin-right: 7px; } .langbar a { padding: 8px 5px; } } /* iPhone SE und aehnlich schmal: fuenf Sprachkuerzel passen sonst um wenige Pixel nicht neben Marke und Umschalter. */ @media (max-width: 360px) { .topbar__row { gap: 8px; } .langbar a { padding: 8px 4px; font-size: 12px; } } /* --- Kopfbereich der Seite --------------------------------------------------- */ .head { padding-block: clamp(36px, 6vw, 64px) clamp(20px, 3vw, 30px); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px; } .eyebrow i { font-size: 14px; } .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: 1.1; letter-spacing: -0.018em; margin: 0; } .lead { font-size: clamp(1rem, 1.1vw + 0.5rem, 1.14rem); line-height: 1.6; color: var(--text-secondary); margin: 14px 0 0; max-width: 62ch; } .meta { margin: 18px 0 0; font-size: 13px; color: var(--text-tertiary); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--accent-text); background: var(--ember-amber-12); border: 1px solid var(--ember-amber-30); border-radius: var(--radius-pill); padding: 5px 12px; } .notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; background: var(--ember-amber-12); border: 1px solid var(--ember-amber-30); border-radius: var(--radius-lg); padding: 14px 18px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; } .notice i { color: var(--accent-text); font-size: 18px; margin-top: 1px; flex: 0 0 auto; } .notice strong { color: var(--text-primary); } /* --- Inhaltsverzeichnis (klebend) -------------------------------------------- */ .toc { position: sticky; top: var(--topbar-h); z-index: 60; background: var(--nav-bg); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-block: 1px solid var(--hairline); margin-top: clamp(20px, 3vw, 32px); } .toc__row { display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-block: 10px; -webkit-overflow-scrolling: touch; } .toc__label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-tertiary); flex: 0 0 auto; padding-right: 4px; } .toc a { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; text-decoration: none; color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 8px 14px; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); } .toc a i { font-size: 15px; color: var(--accent-text); } @media (hover: hover) { .toc a:hover { color: var(--text-primary); border-color: var(--ember-amber-30); } } .toc a.is-current { background: var(--ember-amber-15); border-color: var(--ember-amber-30); color: var(--accent-text); } /* --- Dokumente ---------------------------------------------------------------- */ .doc { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--separator); } .doc:first-of-type { border-top: none; } .doc__num { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 8px; } .doc__num i { font-size: 15px; } .prose { max-width: var(--maxw-read); } .prose h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; font-size: clamp(1.45rem, 2.2vw + 0.6rem, 1.95rem); line-height: 1.18; margin: 12px 0 0; } .prose h2 { font-size: clamp(1.12rem, 1.1vw + 0.7rem, 1.3rem); margin: 38px 0 0; font-weight: 700; } .prose h3 { font-size: clamp(1rem, 0.7vw + 0.72rem, 1.1rem); margin: 26px 0 0; font-weight: 700; color: var(--text-primary); } .prose p, .prose li { color: var(--text-secondary); font-size: 15.5px; line-height: 1.68; margin: 12px 0; } .prose ul { margin: 12px 0; padding-left: 22px; } .prose li { margin: 7px 0; } .prose li::marker { color: var(--ember-amber); } .prose strong { color: var(--text-primary); } .prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; overflow-wrap: anywhere; } /* Anschrift und Registerangaben stehen im Quelltext als je eigener Absatz. Ohne diese Regel klafft mitten in der Adresse ein Absatzabstand. */ .prose p.tight { margin: 3px 0; } .prose p.tight + p:not(.tight) { margin-top: 14px; } .prose p.version { color: var(--text-tertiary); font-size: 13.5px; margin-top: 22px; } /* Abschnittsuebersicht je Dokument */ .outline { margin: 20px 0 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-card); max-width: var(--maxw-read); } .outline > summary { cursor: pointer; list-style: none; padding: 13px 18px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 9px; } .outline > summary::-webkit-details-marker { display: none; } .outline > summary::after { content: "\e03e"; font-family: "Phosphor-Bold"; font-size: 13px; color: var(--text-tertiary); margin-left: auto; transition: transform var(--dur-fast); } .outline[open] > summary::after { transform: rotate(180deg); } .outline__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; padding: 0 18px 16px; margin: 0; list-style: none; } .outline__list li { margin: 0; } .outline__list a { display: block; padding: 6px 0; font-size: 13.5px; color: var(--text-secondary); text-decoration: none; line-height: 1.45; } @media (hover: hover) { .outline__list a:hover { color: var(--accent-text); } } .toplink { display: inline-flex; align-items: center; gap: 7px; margin-top: 30px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-decoration: none; } .toplink i { display: inline-block; transform: rotate(180deg); font-size: 12px; } @media (hover: hover) { .toplink:hover { color: var(--accent-text); } } /* --- Startseite ----------------------------------------------------------------- */ .langgrid { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 760px; } .langgrid a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-standard); } @media (hover: hover) { .langgrid a:hover { border-color: var(--ember-amber-30); transform: translateY(-1px); } } .langgrid .code { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 1px; color: var(--accent-text); background: var(--ember-amber-12); border-radius: var(--radius-sm); padding: 6px 9px; flex: 0 0 auto; } .langgrid .name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; } .langgrid .sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; } /* --- Fuss ------------------------------------------------------------------------ */ .foot { border-top: 1px solid var(--hairline); background: var(--bg-secondary); padding-top: 26px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); margin-top: clamp(40px, 6vw, 72px); } .foot__row { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; align-items: center; color: var(--text-tertiary); font-size: 12.5px; line-height: 1.6; } .foot a { color: var(--text-secondary); text-decoration: none; } @media (hover: hover) { .foot a:hover { color: var(--accent-text); } } /* --- Druck / PDF ------------------------------------------------------------------ Tester und Store-Pruefer sichern diese Seiten als PDF. Bildschirm-Chrome (Leisten, Umschalter, Sprunglinks) faellt weg, der Text bekommt Serifenmass und Seitenumbrueche fallen zwischen die Dokumente statt mitten hinein. */ @page { margin: 16mm 14mm; } @media print { /* Die Farb-Tokens muessen hier zwingend auf Hell zurueckfallen. Wer im Dunkelmodus druckt, bekommt sonst weisse Ueberschriften auf weissem Papier — im PDF fehlen dann Titel und Vorspann scheinbar ganz. */ :root, :root[data-theme="dark"] { --maxw: 100%; --maxw-read: 100%; --gutter: 0px; --bg-page: #fff; --bg-secondary: #fff; --bg-tertiary: #fff; --surface-card: #fff; --surface-elevated: #fff; --surface-default: #fff; --text-primary: #000; --text-secondary: #1a1a1a; --text-tertiary: #444; --accent-text: #000; --paper: #fff; --nav-bg: #fff; --hairline: #999; --separator: #bbb; --border-subtle: #ddd; --ember-amber-12: transparent; --ember-amber-15: transparent; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } html, body { background: #fff; color: #000; } .topbar, .toc, .langbar, .iconbtn, .skiplink, .toplink, .foot__theme { display: none !important; } /* Im Druck immer aufgeklappt: eine zugeklappte

waere im PDF einfach weg — und mit ihr die Uebersicht ueber 26 Abschnitte. */ .outline { border: none; background: transparent; break-inside: avoid; } .outline > summary { padding-left: 0; } .outline > summary::after { content: ""; } .outline:not([open]) > .outline__list { display: grid; } .outline__list { padding-left: 0; } .outline__list a { color: #1a1a1a; } .head { padding-block: 0 12px; } .doc { padding-block: 20px; break-before: page; border-top: none; } .doc:first-of-type { break-before: auto; } .prose h1, .prose h2, .prose h3 { break-after: avoid; color: #000; } .prose p, .prose li { color: #1a1a1a; font-size: 10.5pt; line-height: 1.5; orphans: 3; widows: 3; } .prose a { color: #000; text-decoration: none; } /* Ein PDF hat keine anklickbaren Verweise auf Papier — Ziel ausschreiben. */ .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; } .notice { border: 1pt solid #999; background: transparent; color: #1a1a1a; } .notice i { display: none; } .badge { border: 1pt solid #999; color: #000; background: transparent; } .eyebrow, .doc__num { color: #000; } .foot { border-top: 1pt solid #999; background: transparent; margin-top: 24px; } }