/* CBData Solutions — cbdata-solutions.de Alle Farben, Groessen, Abstaende und Radien kommen aus design-system/. Diese Datei enthaelt nur noch Layout und Seitenbausteine. Fonts lokal gehostet (DSGVO) — das Designsystem verlangt das ausdruecklich. */ @import "../design-system/styles.css"; @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-tight-latin.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/newsreader-italic-latin.woff2') format('woff2'); } /* Newsreader upright wird aus der Italic-Variablen nicht abgedeckt — Fließtext in Newsreader nutzt die System-Serif als Fallback nur, wenn die Datei fehlt. Deshalb zusätzlich die aufrechte Variante: */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/newsreader-latin.woff2') format('woff2'); } /* Keine eigenen Farbwerte mehr: alles kommt aus tokens/colors.css und tokens/products.css. Der Markenkontext steht als data-brand="cb" am , danach loesen var(--brand), var(--brand-dark) und var(--brand-ink) auf Petrol auf. Die Produktkarten setzen ihren eigenen Kontext. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--surface-page); font-family: var(--font-ui); color: var(--text-body); -webkit-font-smoothing: antialiased; } a { color: inherit; } /* ---------- Zugaenglichkeit ---------- */ /* Nur fuer Screenreader: im Bild unsichtbar, aber vorlesbar. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sprungmarke: erscheint erst, wenn jemand mit Tab hineinkommt. */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--navy); color: var(--on-navy); font-family: var(--font-ui); font-weight: var(--weight-semi); font-size: var(--ui); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); text-decoration: none; transition: top var(--duration) var(--ease); } .skip-link:focus { top: var(--space-4); } /* Der sichtbare Fokus kommt jetzt aus tokens/effects.css (2px Petrol plus weicher Ring) und gilt dort global. Die eigene Regel von vorher ist entfallen — zwei Fokusdefinitionen nebeneinander waeren genau der Einzelfall, den das Regelwerk verhindern will. */ /* Wer im Betriebssystem "Bewegung reduzieren" gewaehlt hat, bekommt keine Ueberblendungen und kein springendes Scrollen. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Bausteine ---------- */ /* Inhalt laeuft auf grossen Bildschirmen nicht auseinander: Hintergruende bleiben vollbreit, der Inhalt ist auf 1240px begrenzt. */ .shell { max-width: var(--content-max); margin: 0 auto; } .kicker { display: flex; align-items: center; gap: var(--space-3); font-size: var(--kicker); font-weight: var(--weight-semi); letter-spacing: var(--kicker-ls); text-transform: uppercase; margin-bottom: var(--space-5); } .kicker::before { content: ""; width: 26px; height: 1.5px; background: currentColor; display: inline-block; flex: none; } .pill { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-weight: var(--weight-semi); font-size: var(--ui); padding: var(--space-4) var(--space-5); border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; transition: filter var(--duration) var(--ease); } .pill:hover { filter: brightness(.95); } .pill--primary { background: var(--brand); color: var(--brand-ink); } .pill--ghost { color: var(--on-navy); border: 1px solid var(--line-on-navy); padding: var(--space-4) var(--space-5); } /* ---------- Hero ---------- */ .hero { position: relative; background: linear-gradient(180deg, var(--navy-lift), var(--navy) 78%); padding: var(--space-9) var(--section-padding-x) var(--section-padding-y); overflow: hidden; } .hero__inner { position: relative; max-width: 760px; } .hero .kicker { color: var(--brand); } .hero h1 { margin: 0 0 var(--space-5); font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--display-1); line-height: var(--display-1-lh); letter-spacing: var(--display-1-ls); color: var(--on-navy); } .hero__sub { margin: 0 0 var(--space-7); font-family: var(--font-prose); font-size: var(--lead); line-height: var(--lead-lh); color: var(--on-navy-soft); max-width: var(--measure); } .hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; } /* ---------- Sektionen allgemein ---------- */ .section { padding: var(--section-padding-y) var(--section-padding-x); } .section h2 { margin: 0 0 var(--space-8); font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--display-2); line-height: var(--display-2-lh); letter-spacing: var(--display-2-ls); color: var(--text-heading); max-width: 640px; } .section .kicker { color: var(--brand-dark); margin-bottom: var(--space-5); } /* ---------- Produkte ---------- */ .produkte { background: var(--cream); } .produkte__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } /* Jede Karte setzt ihren eigenen Markenkontext ueber data-brand im HTML. Ab hier arbeitet alles mit var(--brand) und var(--brand-ink) — die vier Produktfarben stehen nur noch in tokens/products.css. */ .card { background: var(--brand-surface); border-radius: var(--radius-card); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; min-height: 420px; position: relative; } /* Regelwerk: "Produkte, die noch nicht live sind, bekommen eine gestrichelte Kontur in ihrer Markenfarbe." */ .card--kommend { border: 1px dashed var(--brand); } .card__chip { background: var(--brand); color: var(--brand-ink); width: 40px; height: 40px; border-radius: var(--radius-chip); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-black); font-family: var(--font-display); font-size: 18px; /* keine Entsprechung in der Skala, siehe SKALA-ABWEICHUNGEN */ margin-bottom: var(--space-5); } /* Auf dunklem Grund traegt die helle Markenfarbe die Schrift. Die dunkle Tonstufe (--brand-dark) gilt laut Regelwerk fuer Schrift auf HELLEM Grund; auf Navy faellt sie unter AA. */ .card__label { color: var(--brand); font-size: var(--kicker); font-weight: var(--weight-semi); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-3); } .card p { color: var(--on-navy-soft); } .card h3 .signature { color: var(--brand); } /* KOLLISION — siehe design-system/KOLLISIONEN.md. Indigo #5b6dff erreicht auf Navy nur 4,18:1 und faellt damit unter AA. Diese Karte behaelt deshalb ihren bisherigen helleren Ton, bis eine helle Tonstufe fuer KI-Klug im Token-Satz ergaenzt ist. */ [data-brand="kl"] .card__label, [data-brand="kl"] .card__status, [data-brand="kl"] h3 .signature { color: #8b96e0; } .card h3 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--heading); color: var(--on-navy); line-height: var(--heading-lh); } .card p { margin: 0 0 var(--space-6); font-family: var(--font-prose); font-size: var(--prose-small); line-height: var(--prose-small-lh); flex: 1; } .card__cta { background: var(--brand); color: var(--brand-ink); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-weight: var(--weight-semi); font-size: var(--ui); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); text-decoration: none; align-self: flex-start; transition: filter var(--duration) var(--ease); } .card__cta:hover { filter: brightness(.95); } .card__badge { position: absolute; top: var(--space-5); right: var(--space-5); font-size: var(--kicker); font-weight: var(--weight-semi); letter-spacing: .08em; text-transform: uppercase; /* KOLLISION — bewusst unveraendert gelassen, siehe design-system/KOLLISIONEN.md. Das Regelwerk verlangt farbige Schrift in --brand-dark. Indigo hat auf Navy weder in --kl-accent (4,18:1) noch in --kl-accent-dark (1,4:1) genug Kontrast. Diese beiden Werte sind selbst gemischt und in keinem Token — sie bleiben stehen, bis du entschieden hast, was hier gilt. */ color: #7683c9; background: rgba(91,109,255,.14); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); } .card__status { color: var(--brand); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-weight: var(--weight-semi); font-size: var(--ui); align-self: flex-start; } /* ---------- Über uns ---------- */ .ueber { background: var(--cream-2); } .ueber__grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--space-8); align-items: center; } .ueber h2 { margin: 0 0 var(--space-5); font-size: var(--display-2); line-height: var(--display-2-lh); } .ueber p { margin: 0; font-family: var(--font-prose); font-size: var(--prose); line-height: var(--prose-lh); color: var(--text-body); max-width: var(--measure); } .ueber__figure { margin: 0; } .ueber__foto { border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-media); aspect-ratio: 4 / 5; } .ueber__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .ueber__caption { margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--ui-small); color: var(--text-muted); text-align: right; } /* ---------- Vor Ort (Ehrenamt, Slider) ---------- */ .vorort { background: var(--cream); } .vorort__grid { display: grid; grid-template-columns: 0.9fr 1fr; gap: var(--space-8); align-items: center; } .vorort p { margin: 0 0 var(--space-4); font-family: var(--font-prose); font-size: var(--prose); line-height: var(--prose-lh); color: var(--text-body); max-width: var(--measure); } .vorort h2 { margin-bottom: var(--space-5); font-size: var(--display-2); line-height: var(--display-2-lh); } .slider { position: relative; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-media); aspect-ratio: 3 / 2; background: var(--navy); } .slider__slide { position: absolute; inset: 0; opacity: 0; /* visibility nimmt die inaktiven Fotos aus Tastatur- und Screenreader- Reihenfolge heraus; ohne das werden alle vier Bildunterschriften vorgelesen. */ visibility: hidden; transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease); } .slider__slide.is-active { opacity: 1; visibility: visible; } .slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .slider__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-7) var(--space-5) var(--space-4); /* Regelwerk, Abschnitt Bilder: "Text auf Bild nur mit abdunkelnder Ebene (Verlauf von unten, 92 % → 10 % Navy)". */ background: linear-gradient(0deg, color-mix(in srgb, var(--navy) 92%, transparent) 0%, color-mix(in srgb, var(--navy) 10%, transparent) 100%); color: var(--on-navy); font-family: var(--font-ui); font-size: var(--ui-small); font-weight: var(--weight-medium); } .slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--radius-pill); border: none; /* Vorher halbdurchsichtig. Das Regelwerk laesst Transparenz nur als Hauchlinie auf Dunkel zu — deshalb jetzt eine volle Navy-Flaeche. */ background: var(--navy); color: var(--on-navy); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter var(--duration) var(--ease); } .slider__nav:hover { filter: brightness(.95); } /* Tippflaeche auf 44x44 vergroessert, ohne den Knopf sichtbar zu veraendern. */ .slider__nav::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; } .slider__nav--prev { left: 14px; } .slider__nav--next { right: 14px; } .slider__dots { position: absolute; bottom: var(--space-4); right: var(--space-5); display: flex; gap: 7px; } .slider__dot { position: relative; width: 8px; height: 8px; border-radius: var(--radius-pill); border: none; padding: 0; background: var(--on-navy-soft); cursor: pointer; } /* Der Punkt bleibt 8px klein, die Tippflaeche wird 24px gross. */ .slider__dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: var(--radius-pill); } .slider__dot.is-active { background: var(--cream); } /* ---------- Werte ---------- */ .werte { padding: var(--space-9) var(--section-padding-x); background: var(--surface-inverse); } .werte__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-on-navy); border: 1px solid var(--line-on-navy); border-radius: var(--radius-tile); overflow: hidden; } .werte__tile { background: var(--navy); padding: var(--space-6) var(--space-5); } .werte__tile svg { color: var(--accent-on-dark); margin-bottom: var(--space-4); } .werte__title { color: var(--on-navy); font-family: var(--font-ui); font-weight: var(--weight-semi); font-size: var(--ui); margin-bottom: var(--space-2); } .werte__desc { font-family: var(--font-prose); font-size: var(--prose-small); line-height: var(--prose-small-lh); color: var(--on-navy-soft); } /* ---------- Förderung ---------- */ .foerder { background: var(--surface-page); padding: var(--space-8) var(--section-padding-x); text-align: center; } .foerder img { max-width: 300px; width: 100%; height: auto; margin-bottom: var(--space-4); } .foerder p { margin: 0; font-family: var(--font-prose); font-size: var(--prose); line-height: var(--prose-lh); color: var(--text-body); } .foerder p a { color: var(--brand-dark); } /* ---------- Kontakt ---------- */ .kontakt { padding: var(--section-padding-y) var(--section-padding-x) var(--space-8); background: linear-gradient(180deg, var(--navy), var(--navy-deep)); text-align: center; } .kontakt h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--display-2); line-height: var(--display-2-lh); letter-spacing: var(--display-2-ls); color: var(--on-navy); } .kontakt h2 .signature { color: var(--accent-on-dark); } .kontakt p { margin: 0 0 var(--space-6); font-family: var(--font-prose); font-size: var(--prose); line-height: var(--prose-lh); color: var(--on-navy-soft); } .kontakt .pill--primary { padding: var(--space-4) var(--space-6); } /* ---------- Footer ---------- */ .footer { background: var(--navy-deep); border-top: 1px solid var(--line-on-navy); } .footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--section-padding-x) var(--space-7); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--line-on-navy); } .footer__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .footer__mark { width: 32px; height: 32px; border-radius: var(--radius-chip); background: var(--brand); display: flex; align-items: center; justify-content: center; color: var(--brand-ink); font-weight: var(--weight-bold); font-size: var(--ui); font-family: var(--font-display); } .footer__wordmark { color: var(--on-navy); font-weight: var(--weight-bold); font-size: 17px; font-family: var(--font-display); } .footer__claim { margin: 0; font-family: var(--font-prose); font-size: var(--prose-small); line-height: var(--prose-small-lh); color: var(--on-navy-soft); max-width: 300px; } .footer__head { font-size: var(--kicker); font-weight: var(--weight-semi); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: var(--space-4); } .footer__links { display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-ui); font-size: var(--ui); } .footer__links a { color: var(--on-navy-soft); text-decoration: none; transition: color var(--duration) var(--ease); } .footer__links a:hover { color: var(--on-navy); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-5); font-family: var(--font-ui); font-size: var(--ui-small); color: var(--on-navy-soft); } /* ---------- Rechtsseiten ---------- */ /* Markenzeile ueber Impressum und Datenschutz. Ohne sie standen die Seiten voellig ohne Absender da. Die Werte sind dieselben wie beim Markenblock in der Fusszeile — kein Logo, sondern Kuerzel-Chip plus Wortmarke, so wie es das Regelwerk unter "Iconography" festlegt. Die Breite folgt der Textspalte, damit die Marke ueber dem Text steht und nicht daneben. */ .kopf { background: var(--navy); } .kopf__inner { max-width: var(--measure); margin: 0 auto; padding: var(--space-5) var(--space-6); } .kopf__marke { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; } .kopf__zeichen { width: 32px; height: 32px; flex: none; border-radius: var(--radius-chip); background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--ui); } .kopf__name { color: var(--on-navy); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 17px; } .kopf__marke:hover { filter: brightness(.95); } .legal { max-width: var(--measure); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--section-padding-y); } .legal h1 { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--display-2); line-height: var(--display-2-lh); letter-spacing: var(--display-2-ls); color: var(--text-heading); margin: 0 0 var(--space-7); hyphens: auto; overflow-wrap: break-word; } .legal h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--heading); line-height: var(--heading-lh); color: var(--text-heading); margin: var(--space-7) 0 var(--space-3); } .legal p, .legal li { font-family: var(--font-prose); font-size: var(--prose); line-height: var(--prose-lh); color: var(--text-body); } .legal a { color: var(--brand-dark); } .legal__back { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-weight: var(--weight-semi); font-size: var(--ui); color: var(--brand-dark); text-decoration: none; margin-bottom: var(--space-7); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { :root { --section-padding-x: var(--space-7); } .hero h1 { font-size: var(--display-2); } .produkte__grid { grid-template-columns: repeat(2, 1fr); } .werte__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .vorort__grid { grid-template-columns: 1fr; gap: var(--space-7); } } @media (max-width: 720px) { :root { --section-padding-x: var(--space-5); } .section, .hero { padding-top: var(--space-8); padding-bottom: var(--space-8); } .hero h1 { font-size: var(--display-3); } .section h2 { font-size: var(--display-3); } .ueber__grid { grid-template-columns: 1fr; gap: var(--space-7); } .ueber h2, .kontakt h2, .vorort h2 { font-size: var(--display-3); } .produkte__grid { grid-template-columns: 1fr; } .card { min-height: 0; } .werte__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } /* "Datenschutzerklaerung" passt bei 375px in keiner Zeile. Eine Stufe kleiner plus Silbentrennung (lang="de" steht am ). */ .legal h1 { font-size: var(--display-3); } .footer__bottom { justify-content: center; text-align: center; } }