* bzw. ) und deshalb von sich aus fensterbreit – sie trägt nur keinen * eigenen Seitenrand. */ .kc-section--bleed, .kc-collage, .kc-cta-band, .kc-contact-band, .kc-site-footer { width: 100%; max-width: 100%; margin-inline: 0; padding-inline: 0; } /* Dunkle Flächen: Kontextfarben umschalten. */ .kc-section--dark, .kc-card--dark, .kc-cta-band, .kc-site-footer, .kc-placeholder--dark { --kc-fg: var(--kc-white); --kc-fg-muted: rgba(255, 255, 255, .72); --kc-fg-line: var(--kc-line-dark); --kc-surface: var(--kc-black); color: var(--kc-white); } /* Zwei Spalten */ .kc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-space-6); align-items: start; } .kc-split--wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .kc-split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } /* Raster */ .kc-grid { display: grid; gap: var(--kc-space-3); } .kc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kc-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kc-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Vertikaler Stapel */ .kc-stack { display: flex; flex-direction: column; gap: var(--kc-space-3); align-items: flex-start; } .kc-stack--tight { gap: var(--kc-space-1); } .kc-stack--loose { gap: var(--kc-space-5); } /* * Spaltensatz – gleich breite Spalten mit dünnen Trennlinien dazwischen, * ohne Karten und ohne Schatten (Nachtrag 12.2, z. B. die vier W-Fragen). * Die Spaltenzahl ergibt sich aus der Anzahl der Kinder, das Template muss * nichts zählen. */ .kc-colset { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; } .kc-colset__item { min-width: 0; padding-inline: clamp(16px, 1.6vw, 32px); } .kc-colset__item + .kc-colset__item { border-left: 1px solid var(--kc-fg-line); } .kc-colset__item:first-child { padding-inline-start: 0; } .kc-colset__item:last-child { padding-inline-end: 0; } /* ----------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .kc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kc-space-1); padding: 14px 26px; border: 1.5px solid transparent; border-radius: var(--kc-radius-pill); background: transparent; font-family: var(--kc-font-body); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .kc-btn__icon { display: inline-flex; flex: none; transition: transform .18s ease; } .kc-btn:hover .kc-btn__icon, .kc-btn:focus-visible .kc-btn__icon { transform: translateX(3px); } .kc-btn--primary { background: var(--kc-accent); border-color: var(--kc-accent); color: var(--kc-white); } .kc-btn--primary:hover, .kc-btn--primary:focus-visible { background: var(--kc-accent-dark); border-color: var(--kc-accent-dark); color: var(--kc-white); } .kc-btn--dark { background: var(--kc-black); border-color: var(--kc-black); color: var(--kc-white); } .kc-btn--dark:hover, .kc-btn--dark:focus-visible { background: var(--kc-accent); border-color: var(--kc-accent); color: var(--kc-white); } /* Sekundär: Rahmen in der Textfarbe des Umfelds (weiß auf Schwarz). */ .kc-btn--secondary { border-color: currentColor; color: var(--kc-fg); } .kc-btn--secondary:hover, .kc-btn--secondary:focus-visible { background: var(--kc-black); border-color: var(--kc-black); color: var(--kc-white); } .kc-section--dark .kc-btn--secondary:hover, .kc-section--dark .kc-btn--secondary:focus-visible, .kc-card--dark .kc-btn--secondary:hover, .kc-card--dark .kc-btn--secondary:focus-visible, .kc-cta-band .kc-btn--secondary:hover, .kc-cta-band .kc-btn--secondary:focus-visible, .kc-site-footer .kc-btn--secondary:hover, .kc-site-footer .kc-btn--secondary:focus-visible { background: var(--kc-white); border-color: var(--kc-white); color: var(--kc-black); } .kc-btn--ghost { background: var(--kc-card); color: var(--kc-black); } .kc-btn--ghost:hover, .kc-btn--ghost:focus-visible { background: var(--kc-accent-light); color: var(--kc-black); } /* Textlink im Button-Gewand (ohne Fläche). */ .kc-btn--link { padding: 0; border-color: transparent; color: var(--kc-accent); letter-spacing: .02em; } .kc-btn--link:hover, .kc-btn--link:focus-visible { color: var(--kc-accent-dark); } .kc-btn--block { display: flex; width: 100%; } /* ----------------------------------------------------------------------------- 6. Karten -------------------------------------------------------------------------- */ /* * Karten tragen den einen Kartenschatten und keinen Rahmen (CD 5.2/5.3): der * weiße Kartenkörper hebt sich über den Schatten von seinem Grund ab – auf * Weiß genauso wie auf Card-Grau. */ .kc-card { position: relative; display: flex; flex-direction: column; background: var(--kc-white); border-radius: var(--kc-radius-card); box-shadow: var(--kc-shadow); overflow: hidden; } /* Card-Grau ist eine Fläche, keine schwebende Karte – also ohne Schatten. */ .kc-card--flat { background: var(--kc-card); box-shadow: none; } .kc-card--dark { background: var(--kc-black); } .kc-card__body { display: flex; flex-direction: column; gap: var(--kc-space-2); padding: var(--kc-space-4); flex: 1 1 auto; } .kc-card__title { font-family: var(--kc-font-head); font-weight: 700; font-size: var(--kc-size-h4); line-height: 1.3; color: var(--kc-fg); } /* * Kartentitel bleiben schwarz, auch wenn sie verlinkt sind – Flieder ist laut CD * für Kicker, Buttons und echte Textlinks reserviert, nicht für Überschriften. */ .kc-card__title a { color: inherit; text-decoration: none; } .kc-card__title a:hover, .kc-card__title a:focus-visible { color: var(--kc-accent); } .kc-card__meta { font-size: var(--kc-size-micro); line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; color: var(--kc-accent); } .kc-card__footer { margin-top: auto; padding-top: var(--kc-space-2); } /* * Nur verlinkte Karten reagieren auf Hover: derselbe Schatten, etwas tiefer. * Kein zweiter Schatten daneben und kein Rahmen – das verbietet CD 5.3. */ .kc-card:has(a):hover { box-shadow: var(--kc-shadow-hover); } /* ----------------------------------------------------------------------------- 7. Listen, Fakten, Badges, Links -------------------------------------------------------------------------- */ .kc-link { color: var(--kc-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .kc-link:hover, .kc-link:focus-visible { color: var(--kc-accent-dark); } .kc-link-arrow { display: inline-flex; align-items: center; gap: var(--kc-space-1); font-size: 14px; font-weight: 600; color: var(--kc-accent); } .kc-link-arrow:hover, .kc-link-arrow:focus-visible { color: var(--kc-accent-dark); } /* Check-Liste: runder schwarzer Icon-Container mit weißem Haken (CD 4.5). */ .kc-checklist { display: grid; gap: var(--kc-space-3) var(--kc-space-5); list-style: none; margin: 0; padding: 0; } /* * Die Standard-Spaltenzahl steht mit Spezifität 0 in :where(). So kann sie * eine gleichzeitig gesetzte Layout-Klasse (.kc-grid--2, .kc-grid--3) nicht * aushebeln – unabhängig davon, welche Regel im Stylesheet weiter unten * steht. Der eigene Modifier .kc-checklist--2col greift weiterhin. */ :where(.kc-checklist) { grid-template-columns: minmax(0, 1fr); } .kc-checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-checklist__item { display: flex; align-items: flex-start; gap: var(--kc-space-2); font-size: var(--kc-size-body); line-height: 1.5; color: var(--kc-fg); } .kc-checklist__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--kc-black); color: var(--kc-white); } .kc-section--dark .kc-checklist__icon, .kc-card--dark .kc-checklist__icon { background: var(--kc-white); color: var(--kc-black); } /* Key-Facts-Zeile (Dauer / Teilnehmer / Ort) */ .kc-facts { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--kc-space-5); list-style: none; margin: 0; padding: 0; } .kc-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .kc-fact__icon { display: inline-flex; align-items: center; color: var(--kc-black); margin-bottom: 2px; } .kc-section--dark .kc-fact__icon, .kc-card--dark .kc-fact__icon { color: var(--kc-white); } .kc-fact__label { font-size: var(--kc-size-micro); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--kc-fg-muted); } .kc-fact__value { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--kc-fg); } /* * Fakt ohne Icon (Nachtrag 10.4): Die Key-Facts der Produkte kommen als * „Label | Wert" ohne Icon-Angabe. Statt ein Symbol zu erraten, markiert ein * kurzer Flieder-Strich den Fakt. */ .kc-fact--rule { min-width: 150px; padding-top: var(--kc-space-2); border-top: 2px solid var(--kc-accent); } /* Status-Badges. „Ausgebucht" bewusst grau, nicht rot (CD 2.1). */ .kc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid transparent; border-radius: var(--kc-radius-pill); font-size: var(--kc-size-micro); font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .kc-badge--free { background: var(--kc-accent-light); color: var(--kc-black); } /* * Weiß auf Flieder kommt bei 12 px nur auf 3,1 : 1 und fällt damit durch die * Kontrastanforderung. Tiefschwarz auf derselben Fläche erreicht 6,4 : 1 und * hält die Reihenfolge der Zustände: Frei in Flieder Hell, „nur noch …" in * Flieder, Ausgebucht in Grau – alle mit dunkler Schrift. */ .kc-badge--low { background: var(--kc-accent); color: var(--kc-black); } .kc-badge--full { background: var(--kc-card); border-color: var(--kc-line); color: var(--kc-grey); } /* ----------------------------------------------------------------------------- 8. Medien -------------------------------------------------------------------------- */ .kc-media { display: block; position: relative; overflow: hidden; margin: 0; border-radius: var(--kc-radius-tile); background: var(--kc-card); } /* * Ist die Bildfläche verlinkt, steht dieser Link zwischen Karte und Fläche. Er * reicht die Fläche unverändert weiter: Größe, Rundung und Seitenverhältnis * bleiben bei .kc-media, der Link nimmt sich keine eigene Höhe. */ .kc-media-link { display: block; } /* Seitenverhältnisse gelten auch für Platzhalterflächen. */ .kc-media--16-9 { aspect-ratio: 16 / 9; } .kc-media--4-3 { aspect-ratio: 4 / 3; } .kc-media--1-1 { aspect-ratio: 1 / 1; } .kc-media--3-4 { aspect-ratio: 3 / 4; } .kc-media--21-9 { aspect-ratio: 21 / 9; } /* Alle Fotos sind Schwarz-Weiß (CD 5.1). */ .kc-media__img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } /* CD-konforme Platzhalterfläche mit Quadrat-Motiv. */ .kc-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kc-space-2); position: relative; overflow: hidden; margin: 0; padding: var(--kc-space-3); aspect-ratio: 16 / 9; border-radius: var(--kc-radius-tile); background: var(--kc-card); color: var(--kc-black); text-align: center; } .kc-placeholder--dark { background: var(--kc-black); color: var(--kc-white); } /* * Das Vier-Quadrat-Motiv wird komplett aus Hintergrund-Verläufen gezeichnet, * damit es unabhängig von inneren Elementen funktioniert. */ .kc-placeholder__grid, .kc-tilegrid { flex: none; width: 56px; height: 56px; font-size: 0; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 24px 24px; background-position: 0 0, 32px 0, 0 32px, 32px 32px; background-repeat: no-repeat; } .kc-placeholder__grid { opacity: .22; } .kc-placeholder__label { font-size: var(--kc-size-micro); line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: currentColor; opacity: .7; max-width: 22ch; } /* Dekoratives schwarzes Quadrat (Logo-Motiv). Bleibt immer rechtwinklig. */ .kc-square { display: block; flex: none; width: 48px; height: 48px; background: var(--kc-black); } .kc-section--dark .kc-square, .kc-card--dark .kc-square { background: var(--kc-white); } /* Runder Icon-Container */ .kc-iconbox { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--kc-fg-line); border-radius: 50%; color: var(--kc-fg); background: transparent; } .kc-iconbox--dark { background: var(--kc-black); border-color: var(--kc-black); color: var(--kc-white); } .kc-iconbox--accent { background: var(--kc-accent); border-color: var(--kc-accent); color: var(--kc-white); } /* Icons sind Inline-SVG mit currentColor und schrumpfen nie. Die Kantenlänge kommt über --kc-icon-size aus kicrew_icon(). */ .kc-icon { --kc-icon-size: 24px; flex: none; display: inline-block; vertical-align: middle; width: var(--kc-icon-size); height: var(--kc-icon-size); } .kc-icon > svg { display: block; width: 100%; height: 100%; } /* ----------------------------------------------------------------------------- 9. Komponenten -------------------------------------------------------------------------- */ /* --- Kopfsektion mit randabfallendem Bild -------------------------------- */ /* * Der Text bleibt im Container, das Bild läuft rechts bis zum Fensterrand * (§5.7). Genutzt von template-parts/hero.php: Angebots- und Produktseiten und * allen Übersichtsseiten. Seiten ohne randabfallendes Bild nutzen .kc-page-hero * aus pages.css. */ .kc-hero { /* Das Bild läuft rechts aus dem Raster heraus – hier abschneiden, damit keine horizontale Scrollbar entsteht. */ overflow-x: hidden; border-bottom: 1px solid var(--kc-line); } @supports (overflow: clip) { .kc-hero { overflow-x: clip; } } .kc-hero__inner { display: grid; gap: var(--kc-space-4); } .kc-hero__text, .kc-hero__media { min-width: 0; } .kc-hero__square { margin-bottom: var(--kc-space-4); } .kc-hero__title { margin: var(--kc-space-1) 0 var(--kc-space-3); } /* Claim unter der Headline: Kopfschrift, aber deutlich kleiner als die H1. */ .kc-hero__subtitle { margin: 0; max-width: 24em; font-family: var(--kc-font-head); font-size: clamp(19px, 1.9vw, 26px); font-weight: 600; line-height: 1.3; color: var(--kc-black); } .kc-hero__lead { max-width: 62ch; } .kc-hero__subtitle + .kc-hero__lead, .kc-hero__lead + .kc-hero__lead { margin-top: var(--kc-space-3); } .kc-hero__facts { margin-top: var(--kc-space-5); } .kc-hero__action { margin-top: var(--kc-space-5); } /* * Bis 980px steht das Bild unter dem Text und läuft zu beiden Seiten bis zum * Fensterrand: die Sektion schneidet den Überhang ab. */ .kc-hero__media .kc-media { margin-inline: calc(-1 * var(--kc-gutter)); border-radius: 0; } /* Ohne Bild bleibt der Text auf angenehmer Lesebreite. */ .kc-hero--text .kc-hero__inner { max-width: 900px; margin-inline: auto; } @media (min-width: 980px) { .kc-hero__inner { /* Zwei gleich breite Spalten ohne Abstand: die Kante zwischen ihnen liegt damit exakt in der Fenstermitte – darauf stützen sich die 50vw unten. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; align-items: stretch; } .kc-hero__text { align-self: center; padding-right: var(--kc-space-6); } /* Der Container ist zentriert, seine Mitte ist also die Fenstermitte: 50vw ab der Spaltenkante endet genau am rechten Fensterrand. */ .kc-hero__media { width: 50vw; } /* Das Bild füllt die Zeilenhöhe und läuft randabfallend nach rechts aus. */ .kc-hero__media .kc-media { height: 100%; min-height: 420px; margin-inline: 0; aspect-ratio: auto; } .kc-hero__media .kc-media__img { height: 100%; object-fit: cover; } .kc-hero--text .kc-hero__inner { grid-template-columns: minmax(0, 1fr); } .kc-hero--text .kc-hero__text { padding-right: 0; } } /* --- Logo ---------------------------------------------------------------- */ /* * Das Logo ist eine Vektordatei (inc/template-tags.php). Gesteuert wird nur die * Breite: die Zeichnung darin ist 3,172 : 1, die Datei bringt ringsum den * Schutzraum mit. --kc-logo-width meint die Dateibreite; die sichtbare * Wortmarke ist rund 80 % davon und bleibt damit über den 120 px Mindestbreite * aus dem CD. */ .kc-logo { --kc-logo-width: 150px; display: inline-block; line-height: 0; } .kc-logo__img { display: block; width: var(--kc-logo-width); height: auto; } /* --- Breadcrumb --------------------------------------------------------- */ .kc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; padding-block: var(--kc-space-3) var(--kc-space-1); font-size: var(--kc-size-small); color: var(--kc-fg-muted); } .kc-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; margin: 0; padding: 0; } .kc-breadcrumb__item { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .kc-breadcrumb__item + .kc-breadcrumb__item::before { content: "\203A"; color: var(--kc-line); font-size: 15px; line-height: 1; } .kc-breadcrumb__item a:hover, .kc-breadcrumb__item a:focus-visible { color: var(--kc-accent); text-decoration: underline; text-underline-offset: 3px; } .kc-breadcrumb__item[aria-current] { color: var(--kc-fg); } /* --- Collage (volle Fensterbreite, ohne Abstände) ----------------------- */ /* * Die Spaltenzahl kommt aus der Anzahl der Flächen (template-parts/collage.php), * nicht als feste 4: bei einer abweichenden Auswahl bliebe sonst der Rest der * Bandbreite leer. Vorgesehen sind vier Bilder, die Vorgabewerte spiegeln das. */ .kc-collage { display: grid; grid-template-columns: repeat(var(--kc-collage-columns, 4), minmax(0, 1fr)); gap: 0; width: 100%; } .kc-collage__item { position: relative; overflow: hidden; height: clamp(160px, 15vw, 220px); } /* * Innerhalb der Collage geben die Kacheln die Höhe vor – Seitenverhältnis und * Radius der Medien-/Platzhalterflächen werden dafür aufgehoben. */ .kc-collage__item > .kc-media, .kc-collage__item > .kc-placeholder { height: 100%; aspect-ratio: auto; border-radius: 0; } /* --- Kontakt-CTA-Band --------------------------------------------------- */ /* * Der letzte Handlungsaufruf der Seite bekommt den Sektionsabstand wie jede * andere Sektion. Die Trennlinie unten setzt ihn vom gleich schwarzen Footer ab * – ohne sie lesen sich beide als eine Fläche. */ .kc-cta-band { background: var(--kc-black); padding-block: var(--kc-space-7); border-bottom: 1px solid var(--kc-line-dark); } .kc-cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--kc-space-5); } .kc-cta-band__title { font-family: var(--kc-font-head); font-weight: 700; font-size: clamp(24px, 1.1vw + 17px, 32px); line-height: 1.2; color: var(--kc-white); } .kc-cta-band__text { font-size: 15px; line-height: 1.6; color: var(--kc-fg-muted); } .kc-cta-band__action { display: flex; justify-content: flex-end; } /* --- Ansprechpartner-Band ---------------------------------------------- */ .kc-contact-band { background: var(--kc-card); padding-block: var(--kc-space-5); } .kc-contact-band__intro { margin-bottom: var(--kc-space-4); } .kc-contact-band__grid { display: grid; /* min() verhindert einen horizontalen Überlauf auf sehr schmalen Displays. */ grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--kc-space-6); } .kc-contact-card { display: grid; grid-template-columns: clamp(150px, 18vw, 240px) minmax(0, 1fr); align-items: end; gap: var(--kc-space-5); } /* * Das freigestellte Portrait sitzt unten auf der Bandkante auf: die negative * Außenkante entspricht genau der unteren Innenabstand des Bandes. */ .kc-contact-card__photo { align-self: end; filter: grayscale(1); } /* Das Foto behält seine natürliche Höhe – kein Zuschnitt, kein Rahmen. */ .kc-contact-card__photo > .kc-media { background: transparent; border-radius: 0; aspect-ratio: auto; } /* Ohne Foto bleibt die Platzhalterfläche mit ihrem Seitenverhältnis stehen. */ .kc-contact-card__photo > .kc-placeholder { border-radius: 0; } .kc-contact-card__photo .kc-media__img { height: auto; object-fit: contain; object-position: bottom center; } .kc-contact-card__body { align-self: center; padding-block: var(--kc-space-2); padding-left: var(--kc-space-5); border-left: 1px solid var(--kc-line); } .kc-contact-card__name { font-family: var(--kc-font-head); font-weight: 700; font-size: var(--kc-size-h3); line-height: 1.25; color: var(--kc-black); margin-bottom: var(--kc-space-3); } .kc-contact-card__role { font-size: var(--kc-size-small); color: var(--kc-grey); margin-bottom: var(--kc-space-3); } .kc-contact-card__row { display: flex; align-items: flex-start; gap: var(--kc-space-2); font-size: 15px; line-height: 1.5; color: var(--kc-black); /* Ohne min-width bleibt der Text auf seiner max-content-Breite und schiebt lange Themenlisten aus der Karte – auf der Produktseite bis 1024px. */ min-width: 0; } .kc-contact-card__row > * { min-width: 0; } .kc-contact-card__row + .kc-contact-card__row { margin-top: var(--kc-space-2); } .kc-contact-card__row .kc-icon { color: var(--kc-black); margin-top: 1px; } /* --- Crew-Karte -------------------------------------------------------- */ .kc-crew-card { display: flex; flex-direction: column; gap: var(--kc-space-2); } .kc-crew-card__photo { border-radius: var(--kc-radius-tile); overflow: hidden; background: var(--kc-card); margin-bottom: var(--kc-space-1); } .kc-crew-card__name { font-family: var(--kc-font-head); font-weight: 700; font-size: var(--kc-size-h4); line-height: 1.25; color: var(--kc-fg); } .kc-crew-card__role { font-size: var(--kc-size-micro); line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; color: var(--kc-accent); } .kc-crew-card__text { font-size: 15px; line-height: 1.6; color: var(--kc-fg-muted); } /* --- Terminlisten ----------------------------------------------------- */ .kc-termine { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .kc-termine__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-space-2) var(--kc-space-3); width: 100%; margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--kc-fg-line); background: transparent; font: inherit; color: inherit; text-align: left; transition: background-color .15s ease; } /* Klickbare Zeilen tragen data-kc-termin (siehe JS-Contract). */ .kc-termine__item[data-kc-termin] { cursor: pointer; } .kc-termine__item[data-kc-termin]:hover, .kc-termine__item[data-kc-termin]:focus-visible { background: var(--kc-accent-tint); } .kc-termine__date { display: flex; align-items: baseline; gap: var(--kc-space-1); font-weight: 600; color: var(--kc-fg); white-space: nowrap; } .kc-termine__time { font-size: 15px; color: var(--kc-fg-muted); white-space: nowrap; } .kc-termine__action { margin-left: auto; display: flex; align-items: center; gap: var(--kc-space-2); } /* * Tabellarische Variante: die Terminübersichten der Startseite und der * Angebots-Übersichtsseiten. Sechs Spalten, in jeder Zeile bündig. * * Die Spurbreiten trägt die Liste, jede Zeile teilt sie sich per `subgrid` – * so stehen die Spalten aller Zeilen bündig, statt dass jede Zeile für sich * rechnet und Status- und Aktionsspalte ausfransen. * * Die sechs Spalten sind inhaltsbreit (`auto`); `justify-content: space-between` * verteilt den Rest der Zeilenbreite zu gleichen Teilen zwischen sie. So sitzt * Datum bündig links, der Button bündig rechts und die Spalten dazwischen in * gleichmäßigen Abständen – ohne den leeren Block, den eine einzelne fr-Spur * hinterlässt. */ .kc-termin-list { display: grid; grid-template-columns: auto auto auto auto auto auto; justify-content: space-between; } .kc-termin-list .kc-termine__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-areas: "date time angebot ort status action"; align-items: center; gap: var(--kc-space-3) var(--kc-space-4); padding: var(--kc-space-3) 0; } /* Die letzte Zeile schließt die Liste ab, ohne Linie ins Leere. */ .kc-termin-list .kc-termine__item:last-child { border-bottom: 0; } /* * Die Datumsspalte bleibt inhaltsbreit: eine Mindestbreite würde die * gleichmäßige Verteilung der Spalten verzerren. */ .kc-termin-list .kc-termine__date { grid-area: date; min-width: 0; } .kc-termin-list .kc-termine__time { grid-area: time; } .kc-termine__angebot { grid-area: angebot; font-family: var(--kc-font-head); font-weight: 700; } .kc-termine__ort { grid-area: ort; font-size: var(--kc-size-small); color: var(--kc-fg-muted); } .kc-termine__status { grid-area: status; } .kc-termin-list .kc-termine__action { grid-area: action; justify-content: flex-end; min-width: 150px; } /* Der Button gibt die Breite der Aktionsspalte vor, sein Text bricht nicht um. */ .kc-termin-list .kc-termine__action .kc-btn { white-space: nowrap; } /* --- Logo-Bauchbinde (Nachtrag 12.1) ------------------------------------ */ /* * Durchlaufende Logo-Spur, reine CSS-Animation, kein JS. * * Erwartetes Markup: .kc-marquee > .kc-marquee__track, darin die Logo-Liste * ZWEIMAL hintereinander als .kc-marquee__item; die zweite Kopie trägt * aria-hidden="true". Die Animation verschiebt die Spur um genau die Hälfte * ihrer Breite – dadurch beginnt die zweite Kopie exakt dort, wo die erste * gestartet ist, und der Übergang ist unsichtbar. * * Die Dauer steuert das Template über --kc-marquee-duration (ca. 6 s pro * Logo); der Wert hier ist nur der Rückfall, falls sie nicht gesetzt wird. */ .kc-marquee { --kc-marquee-duration: 48s; --kc-marquee-gap: clamp(48px, 4vw, 64px); --kc-marquee-fade: clamp(24px, 6vw, 96px); position: relative; width: 100%; overflow: hidden; /* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten wirken. */ -webkit-mask-image: linear-gradient(to right, transparent, var(--kc-black) var(--kc-marquee-fade), var(--kc-black) calc(100% - var(--kc-marquee-fade)), transparent); mask-image: linear-gradient(to right, transparent, var(--kc-black) var(--kc-marquee-fade), var(--kc-black) calc(100% - var(--kc-marquee-fade)), transparent); } .kc-marquee__track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; animation: kc-marquee-scroll var(--kc-marquee-duration) linear infinite; } /* Zeigt jemand auf die Bauchbinde oder tabbt hinein, hält sie an. */ .kc-marquee:hover .kc-marquee__track, .kc-marquee:focus-within .kc-marquee__track { animation-play-state: paused; } /* * Der Abstand liegt als Innenabstand rechts an jedem Logo, nicht als gap: * nur so ist die halbe Spurbreite genau eine Kopie und die Spur läuft ohne * Sprung um. */ .kc-marquee__item { flex: none; display: flex; align-items: center; padding-inline-end: var(--kc-marquee-gap); } /* Logos in Graustufen, volle Deckkraft, Höhe 32–40px (CD 5.1). */ .kc-marquee__img { display: block; width: auto; height: clamp(32px, 2.6vw, 40px); max-width: none; object-fit: contain; filter: grayscale(1); } @keyframes kc-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* * Knopf „Nach oben“: hängt fixiert in der unteren rechten Ecke, bündig mit dem * Seitenrand des Containers (--kc-gutter), damit er auf der Fluchtlinie des * Inhalts sitzt. * * Flieder statt Schwarz: der Knopf schwebt über hellen wie über dunklen * Flächen – über dem Footer wäre ein schwarzer Kreis unsichtbar. Damit ist er * derselbe Knopf wie .kc-btn--primary, nur rund (CD 2.1). * * Ruhezustand ist unsichtbar: erst main.js (Modul 9) setzt --visible, sobald * genug gescrollt wurde. `visibility` nimmt ihn bis dahin auch aus der * Tab-Reihenfolge – ohne JavaScript erscheint er also gar nicht, und das ist * richtig, denn ohne JavaScript täte er nichts. */ .kc-scroll-top { position: fixed; right: var(--kc-gutter); bottom: var(--kc-gutter); z-index: 150; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--kc-accent); border-radius: 50%; background: var(--kc-accent); color: var(--kc-white); box-shadow: var(--kc-shadow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .kc-scroll-top--visible { opacity: 1; visibility: visible; transform: none; } .kc-scroll-top:hover, .kc-scroll-top:focus-visible { background: var(--kc-accent-dark); border-color: var(--kc-accent-dark); box-shadow: var(--kc-shadow-hover); } /* ----------------------------------------------------------------------------- 10. Header -------------------------------------------------------------------------- */ .kc-skip-link { position: absolute; top: -100px; left: var(--kc-space-2); z-index: 300; padding: 12px 20px; border-radius: var(--kc-radius-pill); background: var(--kc-black); color: var(--kc-white); font-size: 14px; font-weight: 600; transition: top .15s ease; } .kc-skip-link:focus { top: var(--kc-space-2); } .kc-site-header { position: sticky; top: 0; z-index: 200; background: var(--kc-white); border-bottom: 1px solid transparent; transition: border-color .18s ease, box-shadow .18s ease; } /* Ab 8px Scroll ergänzt das JS die Trennlinie und einen leichten Schatten. */ .kc-site-header--pinned { border-bottom-color: var(--kc-line); box-shadow: 0 8px 20px rgba(10, 10, 10, .06); } .kc-site-header__inner { display: flex; align-items: center; gap: var(--kc-space-3); min-height: var(--kc-header-height); } .kc-site-header__logo { flex: none; display: inline-flex; align-items: center; } .kc-site-header__cta { flex: none; margin-left: auto; padding: 11px 20px; font-size: 13px; } .kc-nav { flex: 1 1 auto; min-width: 0; } /* * Zweite Ausführung des CTA im Navigationspanel. Sie erscheint nur, wenn der * CTA im Header selbst zu wenig Platz hat (< 520px) – nie beide gleichzeitig. */ .kc-nav__cta { display: none; } .kc-nav__list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .kc-nav__item { display: block; } .kc-nav__link { position: relative; display: inline-flex; align-items: center; padding: 12px 0; font-size: var(--kc-size-small); font-weight: 500; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--kc-black); white-space: nowrap; } .kc-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--kc-black); opacity: 0; transition: opacity .15s ease; } .kc-nav__link:hover::after, .kc-nav__link:focus-visible::after { opacity: .35; } .kc-nav__item--active .kc-nav__link::after { opacity: 1; } .kc-nav-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--kc-line); border-radius: 50%; background: var(--kc-white); color: var(--kc-black); } .kc-nav-toggle__icon { display: inline-flex; align-items: center; justify-content: center; } .kc-nav-toggle__icon--close, .kc-nav-toggle[aria-expanded="true"] .kc-nav-toggle__icon--open { display: none; } .kc-nav-toggle[aria-expanded="true"] .kc-nav-toggle__icon--close { display: inline-flex; } /* Mobil: Navigation als Panel unter dem Header (Grenze exakt bei 1200px). */ @media (max-width: 1199.98px) { .kc-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: calc(100vh - var(--kc-header-offset)); overflow-y: auto; padding: var(--kc-space-2) var(--kc-gutter) var(--kc-space-4); background: var(--kc-white); border-top: 1px solid var(--kc-line); box-shadow: var(--kc-shadow); } .kc-nav.kc-nav--open, .kc-nav--open .kc-nav { display: block; } .kc-nav__item + .kc-nav__item { border-top: 1px solid var(--kc-line); } .kc-nav__link { padding: 14px 0; } .kc-site-header__cta { padding: 10px 16px; font-size: var(--kc-size-micro); } } /* Desktop ab 1200px: Navigation in einer Zeile. */ @media (min-width: 1200px) { .kc-nav-toggle { display: none; } .kc-nav { display: block; } .kc-nav__list { flex-direction: row; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.6vw, 30px); } .kc-site-header__cta { margin-left: var(--kc-space-4); } } /* * Zwischen 1200 und 1440px stehen sieben Menüpunkte und der CTA in einer Zeile – * Schriftgröße und Abstände werden dafür etwas enger. */ @media (min-width: 1200px) and (max-width: 1440px) { .kc-nav__list { gap: clamp(12px, 1.4vw, 20px); } .kc-nav__link { font-size: var(--kc-size-micro); letter-spacing: .05em; } .kc-site-header__cta { margin-left: var(--kc-space-3); padding: 10px 16px; font-size: var(--kc-size-micro); } } /* ----------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ .kc-site-footer { background: var(--kc-black); padding-block: var(--kc-space-6) var(--kc-space-3); } .kc-site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr; gap: var(--kc-space-4); align-items: stretch; } .kc-site-footer__col { min-width: 0; font-size: 14px; line-height: 1.7; color: var(--kc-fg-muted); } /* Dünne vertikale Trennlinien: vor Adresse, Social und Rechtliches. */ .kc-site-footer__col:nth-child(2), .kc-site-footer__col:nth-child(4), .kc-site-footer__col:nth-child(5) { padding-left: var(--kc-space-4); border-left: 1px solid var(--kc-line-dark); } .kc-site-footer .kc-list-plain { display: flex; flex-direction: column; gap: var(--kc-space-1); } .kc-site-footer__title { font-size: var(--kc-size-micro); font-family: var(--kc-font-body); font-weight: 400; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: var(--kc-space-2); } /* * Nur „Folge uns" hat Text über sich (Markenzeile in Spalte 1) und klebte * ohne Abstand daran. Die Spaltenüberschriften stehen am Spaltenanfang und * bleiben davon unberührt. */ * + .kc-site-footer__title { margin-top: var(--kc-space-3); } /* * Spalte 3 (Telefon/E-Mail/Web) hat keine eigene Überschrift, beginnt aber auf * derselben Höhe wie die Adresse in Spalte 2. */ .kc-site-footer__col--offset { padding-top: calc(var(--kc-size-micro) * 1.4 + var(--kc-space-2)); } .kc-site-footer__col a:hover, .kc-site-footer__col a:focus-visible { color: var(--kc-accent-light); } .kc-social { display: flex; flex-wrap: wrap; gap: var(--kc-space-1); list-style: none; margin: 0; padding: 0; } .kc-social__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; color: var(--kc-white); transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .kc-social__link:hover, .kc-social__link:focus-visible { background: var(--kc-white); border-color: var(--kc-white); color: var(--kc-black); } .kc-site-footer__bottom { margin-top: var(--kc-space-6); padding-top: var(--kc-space-3); border-top: 1px solid var(--kc-line-dark); font-size: var(--kc-size-micro); color: rgba(255, 255, 255, .55); } /* ----------------------------------------------------------------------------- 12. Formular-Grundstil (Layout und Meldungen: form.css) -------------------------------------------------------------------------- */ .kc-form { margin: 0; } .kc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kc-space-3) var(--kc-space-4); } .kc-field { display: flex; flex-direction: column; gap: var(--kc-space-1); min-width: 0; } .kc-field--full { grid-column: 1 / -1; } .kc-field__label { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--kc-fg); } .kc-field__req { color: var(--kc-accent); margin-left: 2px; } .kc-input, .kc-select, .kc-textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--kc-line); border-radius: var(--kc-radius-field); background: var(--kc-white); color: var(--kc-black); font-family: var(--kc-font-body); font-size: 16px; line-height: 1.5; transition: border-color .15s ease, box-shadow .15s ease; } .kc-input::placeholder, .kc-textarea::placeholder { color: #999999; } .kc-input:hover, .kc-select:hover, .kc-textarea:hover { border-color: #b3b3b3; } .kc-input:focus, .kc-select:focus, .kc-textarea:focus { outline: none; border-color: var(--kc-accent); box-shadow: 0 0 0 3px var(--kc-accent-glow); } .kc-select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; } .kc-textarea { min-height: 150px; resize: vertical; } .kc-checkfield { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--kc-space-2); font-size: 14px; line-height: 1.5; color: var(--kc-fg-muted); } .kc-checkfield__box { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid var(--kc-line); border-radius: 4px; background: var(--kc-white); background-repeat: no-repeat; background-position: center; cursor: pointer; } .kc-checkfield__box:checked { background-color: var(--kc-black); border-color: var(--kc-black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E"); } .kc-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kc-space-3); margin-top: var(--kc-space-4); } /* Meldungen */ .kc-notice { display: flex; align-items: flex-start; gap: var(--kc-space-2); padding: var(--kc-space-2) var(--kc-space-3); border: 1.5px solid var(--kc-line); border-radius: var(--kc-radius-card); background: var(--kc-white); font-size: 15px; line-height: 1.55; color: var(--kc-black); } .kc-notice--success { border-color: var(--kc-accent); background: var(--kc-accent-tint); } .kc-notice--error { border-color: var(--kc-black); background: var(--kc-card); font-weight: 600; } .kc-field--error .kc-input, .kc-field--error .kc-select, .kc-field--error .kc-textarea, .kc-field--error .kc-checkfield__box { border-width: 1.5px; border-color: var(--kc-black); } .kc-field__error { font-size: var(--kc-size-small); font-weight: 600; line-height: 1.4; color: var(--kc-black); } /* Honeypot – für Menschen unsichtbar, für Bots erreichbar. */ .kc-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ----------------------------------------------------------------------------- 13. Utilities -------------------------------------------------------------------------- */ .kc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .kc-center { text-align: center; margin-inline: auto; } .kc-nowrap { white-space: nowrap; } /* ----------------------------------------------------------------------------- 14. Responsive (Breakpoints 1800 / 1200 / 980 / 760 / 520, geprüft bis 360px) -------------------------------------------------------------------------- */ /* * Sehr breite Schirme (Nachtrag 10.1): der Text bleibt im Container, die * randabfallenden Flächen laufen weiter. Die Collage-Kacheln würden dabei * immer flacher wirken, deshalb dürfen sie hier höher werden. */ @media (min-width: 1800px) { .kc-collage__item { height: clamp(220px, 12vw, 300px); } } @media (max-width: 1199.98px) { .kc-site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; row-gap: var(--kc-space-5); } /* Rechtliches rutscht in die zweite Zeile und braucht dort keine Linie. */ .kc-site-footer__col:nth-child(5) { padding-left: 0; border-left: 0; } .kc-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* * Schmaler wird jede Terminzeile wieder ihr eigenes Raster (mehrzeilig), * deshalb gibt die Liste die geteilten Spuren auf – sonst zwängen deren * Mindestbreiten die Zeilen über den Rand. */ .kc-termin-list { grid-template-columns: minmax(0, 1fr); } .kc-termin-list .kc-termine__item { grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr) auto; grid-template-areas: "date time status" "angebot angebot action" "ort ort action"; } .kc-termin-list .kc-termine__action { align-items: center; } } @media (max-width: 980px) { .kc-section { padding-block: var(--kc-space-6); } .kc-section--tight { padding-block: var(--kc-space-5); } .kc-section--flush { padding-block: 0; } .kc-cta-band { padding-block: var(--kc-space-6); } .kc-split, .kc-split--wide-left, .kc-split--wide-right { grid-template-columns: minmax(0, 1fr); gap: var(--kc-space-5); } .kc-grid--4, .kc-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kc-cta-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--kc-space-3); } .kc-cta-band__action { justify-content: flex-start; margin-top: var(--kc-space-1); } .kc-facts { gap: var(--kc-space-4); } /* * Spaltensatz: vier Spalten werden zu zwei. Die linke Spalte verliert die * senkrechte Linie, ab der zweiten Reihe kommt eine waagerechte dazu. */ .kc-colset { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-colset__item { padding-block: var(--kc-space-3); } .kc-colset__item:nth-child(odd) { padding-inline-start: 0; border-left: 0; } .kc-colset__item:nth-child(-n+2) { padding-block-start: 0; } .kc-colset__item:nth-child(n+3) { border-top: 1px solid var(--kc-fg-line); } } @media (max-width: 760px) { .kc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-checklist--2col { grid-template-columns: minmax(0, 1fr); } .kc-collage { grid-template-columns: repeat(var(--kc-collage-columns-sm, 2), minmax(0, 1fr)); } .kc-form__grid { grid-template-columns: minmax(0, 1fr); } .kc-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-site-footer__col:nth-child(2), .kc-site-footer__col:nth-child(4), .kc-site-footer__col:nth-child(5) { padding-left: 0; border-left: 0; } .kc-site-footer__col--offset { padding-top: 0; } /* Portrait steht über den Kontaktdaten, die Linie wandert nach oben. */ .kc-contact-card { grid-template-columns: minmax(0, 1fr); gap: var(--kc-space-3); align-items: start; } .kc-contact-card__photo { margin-bottom: 0; max-width: 200px; } .kc-contact-card__body { padding-left: 0; padding-top: var(--kc-space-3); border-left: 0; border-top: 1px solid var(--kc-line); } .kc-contact-band { padding-block: var(--kc-space-5); } .kc-termine__action { margin-left: 0; width: 100%; } /* Datum und Zeit stapeln, der Button bekommt eine eigene Zeile. */ .kc-termin-list .kc-termine__item { grid-template-columns: minmax(auto, 1fr) auto; grid-template-areas: "date status" "time status" "angebot angebot" "ort ort" "action action"; row-gap: var(--kc-space-2); } /* Eigene Zeile: der Button steht links, ohne Mindestbreite. */ .kc-termin-list .kc-termine__action { justify-content: flex-start; min-width: 0; } /* * Mobil steht der Spaltensatz gestapelt und ohne Trennlinien – der Abstand * gliedert hier ausreichend. */ .kc-colset { grid-template-columns: minmax(0, 1fr); } .kc-colset__item { padding-inline: 0; } .kc-colset__item:first-child { padding-block-start: 0; } .kc-colset__item + .kc-colset__item { padding-block-start: var(--kc-space-3); border: 0; } } @media (max-width: 520px) { .kc-grid--2, .kc-grid--3, .kc-grid--4, .kc-grid--5, .kc-grid--6 { grid-template-columns: minmax(0, 1fr); } .kc-site-footer__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--kc-space-4); } .kc-facts { gap: var(--kc-space-3) var(--kc-space-4); } .kc-btn { padding: 13px 20px; } /* * Das Logo wird hier nicht kleiner: 150px Dateibreite sind rund 120px * sichtbare Wortmarke und damit die Mindestbreite aus dem CD. Platz dafür * schafft stattdessen der CTA, den unten das Navigationspanel übernimmt. */ /* Unter 520px trägt das Navigationspanel den CTA. */ .kc-site-header__cta { display: none; } .kc-nav__cta { display: flex; width: 100%; margin-top: var(--kc-space-3); } .kc-nav-toggle { margin-left: auto; } .kc-site-header__inner { gap: var(--kc-space-2); } .kc-collage__item { height: 150px; } } /* Bewegungsreduktion respektieren. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } /* * Bauchbinde: keine Bewegung, stattdessen ein horizontal scrollbarer * Streifen. „animation: none" setzt den Animationsnamen zurück, damit die * verkürzte Dauer der Regel oben nicht doch an das Ende der Spur springt. * Die weichen Kanten entfallen, weil sie am Scrollrand irritieren. */ .kc-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .kc-marquee__track { animation: none; transform: none; } /* Die zweite, nur dekorative Kopie der Logo-Liste wird nicht gebraucht. */ .kc-marquee__track > [aria-hidden="true"] { display: none; } }