/* nib — design tokens & layout Token-Quelle: RESEARCH.md (Abschnitt „Design-Tokens") v0.7: lokal gehostete Variable Fonts (Manrope Display / Inter Body) — kein Google-CDN (DSGVO). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-var-latin.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-var-latin.woff2") format("woff2"); } :root { /* Colors */ --asphalt: #31363f; --asphalt-soft: #4a4f59; /* borders / subtle dividers only */ --footer-text-soft: #abb0b8; /* AA-compliant text on --asphalt */ --tiefbau: #2e5b7a; --tiefbau-deep: #244b66; --ocker: #c49a49; /* surfaces / borders / banners */ --ocker-ink: #8b6a2a; /* AA-compliant text variant for light bg */ --hellgrau: #f4f6f7; --hellgrau-deep: #e6eaec; --text: #1e2329; --text-muted: #5a626d; --white: #ffffff; --line: #d8dde0; /* Typography — locally hosted variable fonts, system-ui as fallback */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; --font-display: "Manrope", var(--font-sans); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 6rem; /* Layout */ --container: 1120px; --container-narrow: 760px; --radius: 4px; } * { box-sizing: border-box; } html { font-size: 17px; scroll-behavior: smooth; } html { overflow-x: clip; /* prevent horizontal scroll without breaking position:sticky */ } body { margin: 0; font-family: var(--font-sans); line-height: 1.6; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; /* same — clip keeps sticky working, hidden would not */ overflow-wrap: break-word; /* break very long German compound words at narrow widths */ } img { max-width: 100%; height: auto; display: block; } a { color: var(--tiefbau); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { color: var(--tiefbau-deep); text-decoration-thickness: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--asphalt); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--space-3); font-weight: 700; hyphens: auto; /* German compound-word hyphenation, lang=de set on */ -webkit-hyphens: auto; } h1 { font-size: clamp(2rem, 4.5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: var(--space-6); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { margin: 0 0 var(--space-3); } .lead { font-size: 1.15rem; color: var(--text-muted); max-width: 60ch; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: var(--space-2); } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-4); } /* === Skip link (clip-path technique for reliable tab-order) === */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; color: var(--white); } .skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; clip: auto; overflow: visible; background: var(--asphalt); color: var(--white); padding: 0.85rem 1.25rem; z-index: 1000; font-weight: 600; text-decoration: none; border-bottom-right-radius: var(--radius); outline: 3px solid var(--ocker); outline-offset: 0; } /* === Focus visible (keyboard-only highlight) === */ :focus-visible { outline: 3px solid var(--ocker); outline-offset: 2px; border-radius: 2px; } .btn:focus-visible { outline-offset: 3px; } /* Suppress default :focus ring on click; keep for keyboard */ :focus:not(:focus-visible) { outline: none; } /* === WIP banner === */ .wip-banner { background: var(--ocker); color: var(--asphalt); text-align: center; font-size: 0.85rem; padding: var(--space-2) var(--space-3); font-weight: 600; letter-spacing: 0.02em; } /* === Header === */ .site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); gap: var(--space-4); } .brand { display: flex; align-items: baseline; gap: var(--space-2); text-decoration: none; color: var(--asphalt); } .brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--asphalt); } .brand-mark::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; background: var(--ocker); margin-left: 0.15em; vertical-align: 0.1em; } .brand-tag { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .nav-toggle { display: none; background: none; border: 1px solid var(--line); padding: 0.6rem 1rem; border-radius: var(--radius); cursor: pointer; font-size: 0.95rem; color: var(--asphalt); min-height: 44px; /* WCAG 2.5.5 tap target */ min-width: 44px; } .nav-toggle:hover { border-color: var(--asphalt); } .site-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-4); } .site-nav li { margin: 0; } .site-nav a { color: var(--asphalt); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: var(--space-2) 0; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--tiefbau); } .site-nav a.active { color: var(--tiefbau); border-bottom-color: var(--ocker); } @media (max-width: 760px) { /* Allow nav to wrap onto a second line below brand + toggle */ .site-header .container { flex-wrap: wrap; } .nav-toggle { display: block; } .site-nav { display: none; flex-basis: 100%; width: 100%; order: 3; } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; gap: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-3); } .site-nav a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--hellgrau-deep); } } /* === Hero === */ .hero { background: var(--hellgrau); padding: var(--space-7) 0 var(--space-7); border-bottom: 1px solid var(--hellgrau-deep); } .hero-inner { max-width: 60ch; } .hero h1 { margin-top: 0; } .hero .lead { font-size: 1.25rem; color: var(--text); } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 600; color: var(--tiefbau); margin-bottom: var(--space-3); } /* === Sections === */ .section { padding: var(--space-7) 0; } .section.alt { background: var(--hellgrau); } .section h2:first-child { margin-top: 0; } /* === Buttons === */ .btn { display: inline-block; padding: 0.85rem 1.5rem; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-primary { background: var(--tiefbau); color: var(--white); } .btn-primary:hover { background: var(--tiefbau-deep); color: var(--white); } .btn-secondary { background: transparent; color: var(--asphalt); border-color: var(--asphalt); } .btn-secondary:hover { background: var(--asphalt); color: var(--white); } .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); } /* === Cards === */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); } /* Wider variant: fewer, larger cards (project galleries) */ .card-grid.is-wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); transition: border-color 0.15s, transform 0.15s; } .card:hover { border-color: var(--tiefbau); } .card h3 { margin-top: 0; color: var(--tiefbau); font-size: 1.1rem; } .card p:last-child { margin-bottom: 0; } .card .meta { font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); } /* Project card variant */ .project-card .meta { color: var(--ocker-ink); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.8rem; } /* Card with a bleeding photo header */ .card-photo { display: block; width: calc(100% + 2 * var(--space-4)); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; } .draft-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ocker-ink); background: rgba(196, 154, 73, 0.12); border: 1px solid rgba(196, 154, 73, 0.4); border-radius: 999px; padding: 0.12rem 0.55rem; margin-left: 0.4rem; vertical-align: 0.05em; } .project-card .source { font-size: 0.78rem; color: var(--text-muted); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); } /* === Service module (leistungen page) === */ .service-module { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); } .service-module:last-child { border-bottom: none; } .service-module h2 { color: var(--tiefbau); font-size: 1.4rem; margin: 0 0 var(--space-3); margin-top: 0; } /* === Two-column layouts === */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; } @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: var(--space-5); } } /* === Forms (kontakt) === */ .form { display: grid; gap: var(--space-3); margin-top: var(--space-5); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .form label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--asphalt); margin-bottom: var(--space-1); } .form input, .form select, .form textarea { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--text); background: var(--white); } .form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--tiefbau); outline-offset: 1px; border-color: var(--tiefbau); } .form textarea { min-height: 8rem; resize: vertical; } .form .checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.9rem; line-height: 1.5; padding: 0.25rem 0; /* a bit more vertical breathing room around the inline link */ } .form .checkbox input { width: auto; margin-top: 0.2rem; } .form .checkbox a { padding: 0.15rem 0; display: inline-block; } .form-note { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--space-2); } /* === Contact info block === */ .contact-block { background: var(--hellgrau); border-left: 3px solid var(--ocker); padding: var(--space-4); border-radius: var(--radius); } .contact-block h2, .contact-block h3 { margin-top: 0; color: var(--asphalt); font-size: 1.15rem; } .contact-block dl { display: grid; grid-template-columns: 7.5rem 1fr; /* fits "Ansprechpartnerin" without ugly mid-word break */ gap: var(--space-2) var(--space-3); margin: 0; } @media (max-width: 480px) { .contact-block dl { grid-template-columns: 1fr; gap: 0.25rem; } .contact-block dt { margin-top: 0.5rem; } } .contact-block dt { font-weight: 600; color: var(--asphalt); hyphens: auto; -webkit-hyphens: auto; } .contact-block dd { margin: 0; } /* Stacked definition list for legal pages (Impressum): bold label, value below. */ .def-list { margin: 0 0 1.25rem; } .def-list dt { font-weight: 600; color: var(--asphalt); } .def-list dd { margin: 0 0 0.6rem; } .tbd { color: var(--text-muted); font-style: italic; } .tbd::before { content: "› TBD: "; font-style: normal; font-weight: 600; color: var(--ocker-ink); font-size: 0.85em; letter-spacing: 0.05em; } /* === Image slots === */ .hero-image { background: var(--asphalt); overflow: hidden; border-bottom: 1px solid var(--asphalt-soft); } .hero-image .image-slot, .hero-image img { aspect-ratio: 16 / 9; width: 100%; display: block; object-fit: cover; } .image-figure { margin: 0; } .image-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; } .image-figure figcaption { font-size: 0.82rem; color: var(--text-muted); margin-top: var(--space-2); } /* Wide technical-plan figure (no forced aspect ratio) */ .plan-figure { margin: var(--space-5) 0 var(--space-6); } .plan-figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .plan-figure figcaption { font-size: 0.82rem; color: var(--text-muted); margin-top: var(--space-2); } .image-slot { background: var(--hellgrau-deep); background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 14px, rgba(46, 91, 122, 0.08) 14px, rgba(46, 91, 122, 0.08) 16px ); border: 1px dashed var(--line); border-radius: var(--radius); display: grid; place-items: center; color: var(--text-muted); font-size: 0.82rem; text-align: center; padding: var(--space-4); position: relative; aspect-ratio: 3 / 2; } .image-slot::before { content: "Bild folgt"; display: block; font-weight: 600; color: var(--asphalt); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; } .image-slot[data-slot]::after { content: attr(data-slot); display: block; font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace; color: var(--text-muted); font-size: 0.72rem; margin-top: var(--space-2); word-break: break-all; } .hero-image .image-slot { border-radius: 0; border: none; aspect-ratio: 16 / 9; } /* === Quote / pull === */ .pull-quote { border-left: 4px solid var(--ocker); padding-left: var(--space-4); margin: var(--space-5) 0; font-size: 1.2rem; color: var(--asphalt); font-weight: 500; max-width: 50ch; } .quote-attribution { display: block; margin-top: var(--space-3); font-size: 0.88rem; font-weight: 400; font-style: normal; color: var(--text-muted); letter-spacing: 0.02em; } /* === Footer === */ .site-footer { background: var(--asphalt); color: var(--hellgrau); padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-8); } .site-footer h2, .site-footer h4 { color: var(--white); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; margin: 0 0 var(--space-3); font-weight: 700; line-height: 1.2; } .site-footer a { color: var(--hellgrau); text-decoration: none; } .site-footer a:hover { color: var(--ocker); text-decoration: underline; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-5); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 0; } .footer-grid li a { display: inline-block; padding: 0.5rem 0; /* WCAG 2.5.5 — gives ~44px tap target on mobile */ line-height: 1.4; } .footer-bottom { border-top: 1px solid var(--asphalt-soft); margin-top: var(--space-5); padding-top: var(--space-3); font-size: 0.82rem; color: var(--footer-text-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* === Utilities === */ .muted { color: var(--text-muted); } .small { font-size: 0.88rem; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* === Print === */ @media print { .site-header, .site-footer, .wip-banner, .nav-toggle { display: none; } body { background: white; color: black; } } /* === Visual hero (v0.7) — full-bleed image with overlay === */ .hero-vis { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 56vh, 620px); background: var(--asphalt); border-bottom: 4px solid var(--ocker); overflow: hidden; } .hero-vis.compact { min-height: clamp(360px, 44vh, 480px); } .hero-vis .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Keep a right-positioned subject (e.g. person) in frame when narrow viewports crop the 16:9 image */ .hero-vis .hero-bg--right { object-position: 76% center; } .hero-vis::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(24, 28, 34, 0.30) 0%, rgba(24, 28, 34, 0.45) 50%, rgba(24, 28, 34, 0.85) 100% ); } .hero-vis .hero-content { position: relative; z-index: 1; width: 100%; padding-top: var(--space-7); padding-bottom: var(--space-6); max-width: 62ch; } .hero-vis h1 { color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .hero-vis .lead { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .hero-vis .eyebrow { color: var(--ocker); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.85); } .btn-ghost:hover { background: var(--white); color: var(--asphalt); border-color: var(--white); } /* === Stat band === */ .stat-band { background: var(--asphalt); color: var(--white); padding: var(--space-5) 0; } .stat-band .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } @media (max-width: 760px) { .stat-band .container { grid-template-columns: 1fr 1fr; } } .stat .num { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.01em; color: var(--white); line-height: 1.15; } .stat .num em { font-style: normal; color: var(--ocker); } .stat .lbl { display: block; margin-top: var(--space-1); font-size: 0.85rem; color: var(--footer-text-soft); line-height: 1.45; } /* === Linked service cards + icons === */ .card-link { display: block; text-decoration: none; color: inherit; } .card-link:hover { color: inherit; } .card-link:hover .card { border-color: var(--tiefbau); transform: translateY(-2px); } .card-icon { width: 2rem; height: 2rem; color: var(--tiefbau); margin-bottom: var(--space-2); } .card-more { display: inline-block; margin-top: var(--space-3); font-size: 0.88rem; font-weight: 600; color: var(--tiefbau); } .card-link:hover .card-more { text-decoration: underline; text-underline-offset: 0.2em; } /* === Category chips (project cards) === */ .chip { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tiefbau); background: rgba(46, 91, 122, 0.07); border: 1px solid rgba(46, 91, 122, 0.28); border-radius: 999px; padding: 0.18rem 0.65rem; margin-bottom: var(--space-2); } /* === Pain grid (problem framing) === */ .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); } @media (max-width: 680px) { .pain-grid { grid-template-columns: 1fr; } } .pain { display: flex; gap: var(--space-3); align-items: flex-start; } .pain::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; margin-top: 0.5rem; border-radius: 2px; background: var(--ocker); transform: rotate(45deg); } .pain p { margin: 0; } .pain strong { color: var(--asphalt); } /* === Service meta grid (Für wen / Ablauf / Ergebnis) === */ .ls-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); } @media (max-width: 620px) { .ls-meta { grid-template-columns: 1fr; } } .ls-meta div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); } .section.alt .ls-meta div { background: var(--hellgrau); } .ls-meta dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tiefbau); margin-bottom: var(--space-1); } .ls-meta dd { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; } /* === Audience strip === */ .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); } @media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr; gap: var(--space-4); } } .audience { border-top: 3px solid var(--ocker); padding-top: var(--space-3); } .audience h3 { font-size: 1.05rem; margin-bottom: var(--space-2); } .audience p { margin: 0; color: var(--text-muted); font-size: 0.95rem; } /* === Process steps === */ .steps { list-style: none; counter-reset: step; padding: 0; margin: var(--space-5) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .steps.steps-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .steps, .steps.steps-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .steps, .steps.steps-3 { grid-template-columns: 1fr; } } .steps li { counter-increment: step; margin: 0; padding: var(--space-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); } .steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--ocker); color: var(--ocker-ink); font-family: var(--font-display); font-weight: 800; margin-bottom: var(--space-2); } .steps h3 { font-size: 1rem; margin-bottom: var(--space-1); } .steps p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* === History timeline === */ .history { list-style: none; padding: 0; margin: var(--space-5) 0 0; max-width: 60ch; } .history li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); margin: 0; } .history li:last-child { border-bottom: none; } .history .year { font-family: var(--font-display); font-weight: 800; color: var(--ocker-ink); letter-spacing: 0.01em; } .history p { margin: 0; } @media (max-width: 480px) { .history li { grid-template-columns: 1fr; gap: var(--space-1); } } /* === Service module anchors + media === */ .service-module { scroll-margin-top: 6rem; } .service-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); align-items: start; } @media (max-width: 760px) { .service-split { grid-template-columns: 1fr; } } .service-split .image-figure img { aspect-ratio: 4 / 3; } /* === Portrait TBD slot === */ .image-slot.portrait { aspect-ratio: 4 / 5; max-width: 300px; } .image-figure.portrait { max-width: 340px; } .image-figure.portrait img { aspect-ratio: 4 / 5; } /* === Client / Auftraggeber list === */ .clients { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); } .clients-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-4); } .client-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .client-list li { font-size: 0.85rem; color: var(--asphalt); background: var(--hellgrau); border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.85rem; } /* === Reduced motion === */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }