/* ========================================================================== Vista City — Gemeinsamer Rahmen aller Unterseiten Jede Seite setzt nur data-page im ; Farbton und Kopfmuster leiten sich daraus ab. So bleibt die Familie sichtbar, ohne dass die Seiten austauschbar wirken. ========================================================================== */ .pagehero { position: relative; padding-block: clamp(9rem, 7rem + 7vw, 15rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); } /* Kopfmuster: nur ein knapper Farbanriss unten links statt eines flächigen Farbnebels. Große weiche Farbwolken hinter jeder Ueberschrift sind das auffälligste Merkmal generischer Vorlagen. */ .pagehero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 90% at 0% 100%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 68%); } .pagehero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(0deg, var(--line) 1px, transparent 1px); background-size: 4.5rem 4.5rem; mask-image: linear-gradient(180deg, #000 0%, transparent 88%); opacity: 0.9; } .pagehero__inner { display: grid; gap: clamp(1rem, 2vw, 1.6rem); max-width: 58rem; } .pagehero__title { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); } .pagehero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; } /* Brotkrumen */ .crumbs { display: flex; align-items: center; gap: 0.55rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .crumbs a { transition: color var(--dur-fast) linear; } .crumbs a:hover { color: var(--accent); } .crumbs span[aria-hidden] { opacity: 0.45; } /* --- Abschnitt -------------------------------------------------------------- Gehört zu den gemeinsamen Bausteinen, nicht zur Startseite: .section wird auch auf Features, Galerie und Roadmap verwendet. Solange die Regel nur in sections.css stand, hatten diese Seiten gar keinen Innenabstand — Inhalte klebten direkt am Seitenkopf und am folgenden Abschnitt. ---------------------------------------------------------------------------- */ .section { padding-block: var(--space-section); } .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); } .section__head { display: grid; gap: clamp(1rem, 2vw, 1.75rem); max-width: 62rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); } .section__title { font-size: var(--text-h2); text-wrap: balance; } .section__title em { font-style: normal; } /* --- Schrittkette ------------------------------------------------------------ Wiederverwendbar: Wiki nutzt sie für den Einstieg, das Regelwerk für die Eskalationsstufen. Die Trennlinien machen die Reihenfolge sichtbar, ohne dass Pfeile nötig wären. ---------------------------------------------------------------------------- */ .chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; } .chain__step { position: relative; display: grid; gap: 0.4rem; align-content: start; padding: 1.25rem 1.5rem 1.25rem 0; } /* Trennlinie zwischen den Schritten, am letzten entfällt sie. */ .chain__step + .chain__step { padding-left: 1.5rem; border-left: 1px solid var(--line); } .chain__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; color: var(--accent); } .chain__title { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.01em; text-transform: uppercase; } .chain__text { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; } .chain__text b { color: var(--ink); } /* --- Hilfe ------------------------------------------------------------------ */ .helpbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-md); background: var(--surface); } .helpbar h2 { font-family: var(--font-display); font-size: var(--text-h3); letter-spacing: var(--track-tight); text-transform: uppercase; } .helpbar p { margin-top: 0.5rem; max-width: 60ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; } /* --- Hilfeleiste ------------------------------------------------------------- */ .helpbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-md); background: var(--surface); } .helpbar h2 { font-family: var(--font-display); font-size: var(--text-h3); letter-spacing: var(--track-tight); text-transform: uppercase; } .helpbar p { margin-top: 0.5rem; max-width: 60ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; } @media (max-width: 56rem) { .chain__step + .chain__step { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .chain__step { padding-inline: 0; } .helpbar { grid-template-columns: 1fr; } } /* --- Karten --------------------------------------------------------------- */ .card { position: relative; display: grid; gap: 0.75rem; padding: clamp(1.25rem, 2vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: transform var(--dur-mid) var(--ease-out-expo), border-color var(--dur-mid) linear, box-shadow var(--dur-mid) var(--ease-out-expo); } /* Kein Anheben und kein Leuchten: beides sieht auf jeder Karte gleich aus. Stattdessen eine Akzentkante links, die einfährt. */ .card--link { overflow: hidden; } .card--link::before { content: ''; position: absolute; inset-block: 0; left: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-mid) var(--ease-out-expo); } .card--link:hover::before { transform: scaleY(1); } .card--link:hover { border-color: var(--line-hi); background: var(--surface-hi); } .card__title { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.05; letter-spacing: var(--track-tight); text-transform: uppercase; } .card__text { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; } /* --- Fließtext ----------------------------------------------------------- */ .prose { max-width: var(--maxw-text); color: var(--ink-soft); } .prose > * + * { margin-top: 1.15rem; } .prose h2 { margin-top: 3rem; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.08; letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--ink); scroll-margin-top: 7rem; } .prose h3 { margin-top: 2rem; font-size: var(--text-lg); font-weight: 700; color: var(--ink); scroll-margin-top: 7rem; } .prose p { line-height: 1.75; } .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; } .prose ul, .prose ol { display: grid; gap: 0.6rem; padding-left: 1.25rem; } .prose ul li { list-style: none; position: relative; } .prose ul li::before { content: ''; position: absolute; left: -1.1rem; top: 0.68em; width: 0.4rem; height: 0.4rem; rotate: 45deg; background: var(--accent); } .prose ol { list-style: decimal; } .prose ol li::marker { color: var(--accent); font-weight: 700; } .prose code { padding: 0.15em 0.45em; border-radius: var(--r-sm); background: color-mix(in oklab, var(--accent) 12%, transparent); font-family: var(--font-mono); font-size: 0.9em; color: var(--ink); } .prose blockquote { padding: 1rem 1.35rem; border-left: 3px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: color-mix(in oklab, var(--accent) 8%, transparent); color: var(--ink); } /* Hinweiskasten */ .callout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.15rem 1.35rem; border: 1px solid color-mix(in oklab, var(--callout-color, var(--accent)) 40%, transparent); border-radius: var(--r-md); background: color-mix(in oklab, var(--callout-color, var(--accent)) 10%, transparent); font-size: var(--text-sm); line-height: 1.65; color: var(--ink); } .callout__icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--r-pill); background: var(--callout-color, var(--accent)); color: var(--ink-on-accent); font-size: 0.8rem; font-weight: 700; } .callout--warn { --callout-color: var(--state-warn); } .callout--crit { --callout-color: var(--state-crit); } .callout--info { --callout-color: var(--state-info); } /* --- Suche / Filterleiste ------------------------------------------------- */ .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .search { position: relative; flex: 1 1 16rem; min-width: 12rem; } .search input { width: 100%; padding: 0.85rem 1rem 0.85rem 2.85rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear; } .search input::placeholder { color: var(--ink-mute); } .search input:focus { outline: none; border-color: color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); } .search svg { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.05rem; height: 1.05rem; color: var(--ink-mute); pointer-events: none; } .pill { padding: 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear; } .pill:hover { color: var(--ink); border-color: var(--line-hi); } .pill[aria-pressed='true'] { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); } /* Wird sichtbar, wenn ein Filter nichts übrig lässt. */ .noresults { display: none; padding: clamp(2rem, 5vw, 4rem); border: 1px dashed var(--line-hi); border-radius: var(--r-lg); text-align: center; color: var(--ink-mute); } .noresults.is-visible { display: block; } /* --- Platzhalter für noch fehlendes Bildmaterial ------------------------- */ .media-missing { display: grid; place-content: center; gap: 0.5rem; min-height: 100%; padding: 1rem; text-align: center; border: 1px dashed color-mix(in oklab, var(--accent) 40%, transparent); border-radius: inherit; background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--accent) 18%, transparent) 0 10px, transparent 10px 20px), var(--surface-hi); color: var(--ink-mute); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .media-missing code { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0; text-transform: none; color: var(--accent); } /* --- Schlussaufruf -------------------------------------------------------- */ .outro { position: relative; padding-block: clamp(6rem, 4rem + 9vw, 13rem); border-top: 1px solid var(--line); overflow: hidden; text-align: center; background: radial-gradient(70% 100% at 50% 100%, color-mix(in oklab, var(--accent-2) 30%, transparent), transparent 70%), var(--bg); } .outro__inner { position: relative; display: grid; gap: 2rem; justify-items: center; } .outro__title { font-size: var(--text-h2); text-wrap: balance; } .outro__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }