/* ========================================================================== basis.css – Designsystem der Sektionen Wird von jeder Sektionsdatei (sektionen/*.html) geladen. Umschaltung über Attribute am : data-schrift = klar | ruhig | elegant | kraeftig | freundlich data-palette = anthrazit | tanne | marine | sand | bordeaux | schiefer ========================================================================== */ @import url("schriften.css"); /* ---------- Schrift-Paarungen ---------- */ :root, html[data-schrift="klar"] { --f-display: "Manrope", system-ui, sans-serif; --f-body: "Source Sans 3", system-ui, sans-serif; --w-display: 700; --ls-display: -0.02em; --lh-display: 1.05; } html[data-schrift="ruhig"] { --f-display: "Fraunces", Georgia, serif; --f-body: "Nunito Sans", system-ui, sans-serif; --w-display: 500; --ls-display: -0.01em; --lh-display: 1.1; } html[data-schrift="elegant"] { --f-display: "Cormorant Garamond", Georgia, serif; --f-body: "Jost", system-ui, sans-serif; --w-display: 500; --ls-display: 0; --lh-display: 1.08; } html[data-schrift="kraeftig"] { --f-display: "Archivo", system-ui, sans-serif; --f-body: "IBM Plex Sans", system-ui, sans-serif; --w-display: 800; --ls-display: -0.03em; --lh-display: 0.98; } html[data-schrift="freundlich"] { --f-display: "Outfit", system-ui, sans-serif; --f-body: "Karla", system-ui, sans-serif; --w-display: 600; --ls-display: -0.015em; --lh-display: 1.1; } /* ---------- Paletten ---------- --c-bg Seitenhintergrund --c-bg-alt abgesetzte Flächen (Karten, Streifen) --c-ink Fließtext --c-ink-soft gedämpfter Text --c-line Linien/Ränder --c-primary Hauptfarbe (Buttons, Akzente) + --c-on-primary --c-dark dunkle Fläche (Footer, dunkle Heros) + --c-on-dark */ :root, html[data-palette="anthrazit"] { --c-bg: #ffffff; --c-bg-alt: #f3f3f2; --c-ink: #17181a; --c-ink-soft: #5b5e63; --c-line: #dcdcda; --c-primary: #1f2226; --c-on-primary: #ffffff; --c-dark: #17181a; --c-on-dark: #f5f5f4; } html[data-palette="tanne"] { --c-bg: #fbfaf7; --c-bg-alt: #eef1ec; --c-ink: #1b2620; --c-ink-soft: #5a6660; --c-line: #d6dbd4; --c-primary: #2f5d45; --c-on-primary: #ffffff; --c-dark: #1b2620; --c-on-dark: #eef1ec; } html[data-palette="marine"] { --c-bg: #ffffff; --c-bg-alt: #eef2f7; --c-ink: #121a2b; --c-ink-soft: #55607a; --c-line: #d3d9e4; --c-primary: #1c3a6b; --c-on-primary: #ffffff; --c-dark: #121a2b; --c-on-dark: #eef2f7; } html[data-palette="sand"] { --c-bg: #faf7f1; --c-bg-alt: #f0eadf; --c-ink: #2a2520; --c-ink-soft: #6b6259; --c-line: #dcd3c6; --c-primary: #8a5a2b; --c-on-primary: #ffffff; --c-dark: #2a2520; --c-on-dark: #f0eadf; } html[data-palette="bordeaux"] { --c-bg: #ffffff; --c-bg-alt: #f6f1f2; --c-ink: #1f1517; --c-ink-soft: #66585b; --c-line: #e0d6d8; --c-primary: #6e1e2b; --c-on-primary: #ffffff; --c-dark: #1f1517; --c-on-dark: #f6f1f2; } html[data-palette="schiefer"] { --c-bg: #f7f8f9; --c-bg-alt: #e9ecef; --c-ink: #1d2126; --c-ink-soft: #5f6771; --c-line: #d0d5db; --c-primary: #c8102e; --c-on-primary: #ffffff; --c-dark: #1d2126; --c-on-dark: #f7f8f9; } /* ---------- Maße ---------- */ :root { --max: 1200px; --gutter: clamp(20px, 5vw, 64px); --sp-section: clamp(56px, 9vw, 128px); --radius: 4px; --fs-body: clamp(16px, 1.05vw, 18px); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.55; color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; } img, video, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--ls-display); line-height: var(--lh-display); text-wrap: balance; } h1 { font-size: clamp(40px, 5.6vw, 72px); } h2 { font-size: clamp(30px, 3.6vw, 48px); } h3 { font-size: clamp(20px, 1.6vw, 24px); } p { margin: 0; } p + p { margin-top: 1em; } a { color: inherit; } button { font: inherit; } :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Bausteine ---------- */ .container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .section { padding-block: var(--sp-section); } .section--alt { background: var(--c-bg-alt); } .section--dark { background: var(--c-dark); color: var(--c-on-dark); } .eyebrow { display: inline-block; margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary); } .section--dark .eyebrow { color: var(--c-on-dark); opacity: 0.7; } .lead { font-size: clamp(18px, 1.3vw, 21px); color: var(--c-ink-soft); max-width: 60ch; } .section--dark .lead { color: var(--c-on-dark); opacity: 0.8; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1.5px solid var(--c-primary); border-radius: var(--radius); background: var(--c-primary); color: var(--c-on-primary); font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; } .btn:hover { filter: brightness(1.12); } .btn--ghost { background: transparent; color: var(--c-primary); } .btn--ghost:hover { background: var(--c-primary); color: var(--c-on-primary); filter: none; } .section--dark .btn--ghost { border-color: var(--c-on-dark); color: var(--c-on-dark); } .section--dark .btn--ghost:hover { background: var(--c-on-dark); color: var(--c-dark); } /* Platzhalter für KI-Bilder: wird durch ersetzt, sobald Bilder da sind */ .ph { position: relative; overflow: hidden; background: var(--c-bg-alt); border: 1px dashed var(--c-line); display: grid; place-items: center; color: var(--c-ink-soft); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .ph--16-9 { aspect-ratio: 16 / 9; } .ph--4-5 { aspect-ratio: 4 / 5; } .ph--1-1 { aspect-ratio: 1 / 1; }