/* ============================================================================ Apple-Design-Tokens für Web — Basisschicht Gehört zum Skill `apple-web`. Reihenfolge: erst apple-colors.generated.css einbinden (Systemfarben, generiert), dann diese Datei. Herkunft der Werte: [HIG] aus developer.apple.com/design/human-interface-guidelines verifiziert (Typo-Skala, Tracking, 44 pt, Kontrastschwellen, Mindestgrößen) [UIKIT] Systemdefinition aus UIKit (semantische Label-/Fill-/Separator-Farben). Apple veröffentlicht diese Opazitäten nicht in der HIG-Seite; sie sind seit iOS 13 stabil. Bei Pixelgenauigkeit gegen Apple Design Resources prüfen — NICHT als HIG-verifiziert ausgeben. ============================================================================ */ /* (n5web) @import entfernt — apple-colors.generated.css wird im Layout als eigene Datei vor dieser geladen. Sonst unverändert aus Skill apple-web (Stand 17.09.2026). */ :root { /* --- Schrift [HIG] ------------------------------------------------------- San Francisco kommt ausschließlich über den System-Stack. SF darf laut Apple-Lizenz nicht als Webfont selbst gehostet werden. */ --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --font-serif: "New York", ui-serif, Georgia, serif; /* --- Dynamic-Type-Skala iOS/iPadOS, Größe "Large" [HIG] ------------------ 1 pt = 1 CSS px. In rem, damit die Schriftgröße des Browsers wirkt — das ist das Web-Äquivalent zu Dynamic Type. Basis 16px. Tracking aus Apples SF-Pro-Tabelle (1/1000 em). */ --text-large-title: 2.125rem; --lh-large-title: 2.5625rem; --ls-large-title: 0.012em; --text-title-1: 1.75rem; --lh-title-1: 2.125rem; --ls-title-1: 0.014em; --text-title-2: 1.375rem; --lh-title-2: 1.75rem; --ls-title-2: -0.012em; --text-title-3: 1.25rem; --lh-title-3: 1.5625rem; --ls-title-3: -0.023em; --text-headline: 1.0625rem; --lh-headline: 1.375rem; --ls-headline: -0.026em; --text-body: 1.0625rem; --lh-body: 1.375rem; --ls-body: -0.026em; --text-callout: 1rem; --lh-callout: 1.3125rem; --ls-callout: -0.020em; --text-subhead: 0.9375rem; --lh-subhead: 1.25rem; --ls-subhead: -0.016em; --text-footnote: 0.8125rem; --lh-footnote: 1.125rem; --ls-footnote: -0.006em; --text-caption-1: 0.75rem; --lh-caption-1: 1rem; --ls-caption-1: 0em; --text-caption-2: 0.6875rem; --lh-caption-2: 0.8125rem; --ls-caption-2: 0.006em; /* --- Semantische Textfarben [UIKIT] -------------------------------------- */ --label: rgb(0 0 0); --label-secondary: rgb(60 60 67 / 0.60); /* Apples Wert: 3,44:1 auf Weiss -> NUR fuer Beiwerk, nie fuer Text, den man lesen muss */ --label-secondary-text: rgb(60 60 67 / 0.71); /* 4,50:1 - fuer Fussnoten, Hinweise, Hilfetexte */ --label-tertiary: rgb(60 60 67 / 0.30); --label-quaternary: rgb(60 60 67 / 0.18); --separator: rgb(60 60 67 / 0.29); --separator-opaque: #C6C6C8; /* Flächen: "plain" = Seite weiß, Karten grau · "grouped" = Seite grau, Karten weiß. Pro Ansicht EINEN Satz wählen und dabei bleiben. [UIKIT] */ --bg: #FFFFFF; --bg-secondary: #F2F2F7; --bg-tertiary: #FFFFFF; --bg-grouped: #F2F2F7; --bg-grouped-secondary: #FFFFFF; --bg-grouped-tertiary: #F2F2F7; --fill: rgb(120 120 128 / 0.20); --fill-secondary: rgb(120 120 128 / 0.16); --fill-tertiary: rgb(118 118 128 / 0.12); --fill-quaternary: rgb(116 116 128 / 0.08); /* --- Maße [HIG] ---------------------------------------------------------- */ --hit-min: 44px; /* iOS/iPadOS/watchOS Minimum 44x44 pt */ --hit-min-desktop: 28px; /* macOS 28x28 pt */ --hit-gap: 8px; /* Mindestabstand zwischen Zielen */ /* --- Radien: Rollen, keine Groessenskala [HIG toolbars + SwiftUI ConcentricRectangle] Konzentrisch heisst: innerer und aeusserer Radius teilen den Mittelpunkt. Daraus folgt r_innen = r_aussen - abstand. Dafuer sind --pad-* da: sie halten Padding und Radius eines Containers zusammen, damit die Rechnung im CSS steht statt im Kopf. Details: references/geometrie.md */ --r-capsule: 999px; /* einzelner Button, Chip, Pille: Hoehe/2 */ --r-sheet: 20px; /* Sheet, Modal, grosser Container */ --pad-sheet: 24px; --r-card: 16px; /* Karte, Gruppe, Popover */ --pad-card: 12px; --r-field: 10px; /* Feld, kleiner Chip */ --pad-field: 12px; /* Innenebenen: aus Radius minus Abstand gerechnet, nie frei gewaehlt. */ --r-in-sheet: calc(var(--r-sheet) - var(--pad-sheet)); /* 0px -> eckig */ --r-in-card: calc(var(--r-card) - var(--pad-card)); /* 4px */ /* Altnamen, weiterhin gueltig */ --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 22px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --gutter: max(16px, env(safe-area-inset-left)); /* iOS-Seitenrand 16 pt */ --bar-height: 44px; /* Navigations-/Toolbar */ --measure: 70ch; /* Zeilenlänge */ /* --- Material (Liquid Glass / System-Materialien) ------------------------- */ --material-bg: rgb(255 255 255 / 0.72); --material-blur: saturate(180%) blur(20px); --material-border: rgb(255 255 255 / 0.55); --material-fallback: rgb(249 249 251 / 0.98); /* --- Akzent --------------------------------------------------------------- Drei Rollen, drei Tokens. Der haeufigste Apple-Web-Fehler ist, alle drei mit derselben Farbe zu bedienen: --accent Flaeche OHNE Text darauf (Badge, Fortschritt, Symbol) --accent-text Farbe fuer TEXT auf hellem Grund (Link, Plain-Button) --accent-fill Flaeche MIT weissem Text darauf (gefuellter Button) --accent-fill und --accent-text sind Apples kontraststarke Variante: weiss auf #0088FF ergibt nur 3,52:1, auf #1E6EF4 dagegen 4,57:1. */ --accent: var(--sys-blue); --accent-text: var(--sys-blue-text); --accent-fill: var(--sys-blue-text); /* --- Bewegung [HIG: Motion] ---------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --dur-fast: 0.2s; --dur-base: 0.3s; --dur-slow: 0.5s; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --label: rgb(255 255 255); --label-secondary: rgb(235 235 245 / 0.60); /* dunkel: 5,95:1 - unkritisch */ --label-secondary-text: rgb(235 235 245 / 0.60); --label-tertiary: rgb(235 235 245 / 0.30); --label-quaternary: rgb(235 235 245 / 0.18); --separator: rgb(84 84 88 / 0.65); --separator-opaque: #38383A; --bg: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --bg-grouped: #000000; --bg-grouped-secondary: #1C1C1E; --bg-grouped-tertiary: #2C2C2E; --fill: rgb(120 120 128 / 0.36); --fill-secondary: rgb(120 120 128 / 0.32); --fill-tertiary: rgb(118 118 128 / 0.24); --fill-quaternary: rgb(118 118 128 / 0.18); --material-bg: rgb(30 30 32 / 0.72); --material-border: rgb(255 255 255 / 0.12); --material-fallback: rgb(28 28 30 / 0.98); /* Im Dunkelmodus ist Apples kontraststarke Variante HELLER - als Flaeche unter weissem Text waere sie falsch (2,15:1). Dort traegt die normale Systemfarbe: weiss auf #0091FF = 3,15:1, was Apples Bold-Regel erfuellt. */ --accent-fill: var(--sys-blue); } } :root[data-theme="dark"] { --label: rgb(255 255 255); --label-secondary: rgb(235 235 245 / 0.60); --label-secondary-text: rgb(235 235 245 / 0.60); --label-tertiary: rgb(235 235 245 / 0.30); --label-quaternary: rgb(235 235 245 / 0.18); --separator: rgb(84 84 88 / 0.65); --separator-opaque: #38383A; --bg: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --bg-grouped: #000000; --bg-grouped-secondary: #1C1C1E; --bg-grouped-tertiary: #2C2C2E; --fill: rgb(120 120 128 / 0.36); --fill-secondary: rgb(120 120 128 / 0.32); --fill-tertiary: rgb(118 118 128 / 0.24); --fill-quaternary: rgb(118 118 128 / 0.18); --material-bg: rgb(30 30 32 / 0.72); --material-border: rgb(255 255 255 / 0.12); --material-fallback: rgb(28 28 30 / 0.98); --accent-fill: var(--sys-blue); } /* „Kontrast erhöhen" — Apples eigene barrierefreie Farben greifen über apple-colors.generated.css; hier die semantischen Ebenen nachziehen. */ @media (prefers-contrast: more) { :root:not([data-theme="dark"]) { --label-secondary: rgb(60 60 67 / 0.80); --label-tertiary: rgb(60 60 67 / 0.55); --separator: rgb(60 60 67 / 0.55); } :root[data-theme="dark"], :root:not([data-theme="light"]) { --label-secondary: rgb(235 235 245 / 0.85); --label-tertiary: rgb(235 235 245 / 0.60); } } /* ---------------------------------------------------------------- Grundlagen */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-text); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font-family: var(--font-display); font-size: var(--text-large-title); line-height: var(--lh-large-title); letter-spacing: var(--ls-large-title); font-weight: 700; margin: 0 0 var(--space-4); } h2 { font-family: var(--font-display); font-size: var(--text-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1); font-weight: 700; margin: var(--space-8) 0 var(--space-3); } h3 { font-size: var(--text-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); font-weight: 600; margin: var(--space-6) 0 var(--space-2); } p { margin: 0 0 var(--space-4); max-width: var(--measure); } small, .footnote { font-size: var(--text-footnote); line-height: var(--lh-footnote); letter-spacing: var(--ls-footnote); color: var(--label-secondary-text); } /* Trefferfläche: gilt für jedes Bedienelement. [HIG 44x44 pt] */ button, .btn, a.btn, [role="button"], input[type="submit"], input[type="button"] { min-height: var(--hit-min); min-width: var(--hit-min); padding: 0 var(--space-5); font: inherit; font-weight: 600; border: 0; border-radius: var(--r-capsule); /* HIG buttons: Kapselform bevorzugen */ background: var(--accent-fill); color: #FFFFFF; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-standard); } button:hover, .btn:hover { opacity: 0.85; } button:active, .btn:active { opacity: 0.7; } input, select, textarea { min-height: var(--hit-min); font: inherit; color: var(--label); background: var(--bg-grouped-secondary); border: 1px solid var(--separator-opaque); border-radius: var(--r-field); padding: 0 var(--space-3); } /* Fokus bleibt immer sichtbar. */ :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* Squircle nur als Zugabe: Chrome/Edge ab 139, Safari erst in der Technology Preview, Firefox gar nicht (Stand 17.09.2026). border-radius bleibt die Basis. */ @supports (corner-shape: squircle) { .card, .sheet, .group, button, .btn { corner-shape: squircle; } } /* Materialschicht — nur für funktionale Leisten (Header, Tab-Bar, Sidebar), nie für Karten oder Inhaltsflächen. */ .material { background: var(--material-bg); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); border-bottom: 0.5px solid var(--material-border); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .material { background: var(--material-fallback); } } @media (prefers-reduced-transparency: reduce) { .material { background: var(--material-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Safe Areas: Pflicht für alles, was fixiert ist. */ .bar-top { padding-top: env(safe-area-inset-top); min-height: var(--bar-height); } .bar-bottom { padding-bottom: env(safe-area-inset-bottom); min-height: var(--bar-height); } /* Bewegung respektiert die Systemeinstellung. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }