/* ========================================================================== TimberVetProof – Stylesheet Aufbau: 1. Variablen 2. Basis 3. Layout 4. Kopfbereich 5. Inhalte 6. Fußzeile 7. Responsive Die Farb- und Schriftwerte stammen aus dem Elementor-Kit der bisherigen WordPress-Seite (eqf-web.fehrware.de) und sind hier 1:1 übernommen. ========================================================================== */ /* Die @font-face-Regeln stehen in fonts.css und werden im separat eingebunden, damit beide Dateien parallel laden. */ /* 1. Variablen ============================================================ */ :root { /* Farben des Elementor-Kits */ --c-primary: #804126; /* h1, Fußzeile */ --c-secondary: #b26a40; /* h2, Links */ --c-tan: #d3a15b; /* h3, h6 */ --c-accent: #97b911; /* h4, Buttons */ --c-text: #4d4d4d; /* Fließtext, h5, Hauptmenü */ --c-lang: #a58b57; /* Sprachumschalter */ /* Oberfläche */ --c-bg: #ffffff; --c-bg-soft: #f7f7f7; /* Hintergrund der Fußzeile */ --c-line: #e3e3e3; --c-divider: #676767; /* Trennstriche im Hauptmenü */ --c-text-soft: #6f6f6f; --c-band-brown:#634f3c; /* brauner Vollbreitenstreifen */ /* Typografie */ --font-sans: "Exo 2", "Segoe UI", system-ui, -apple-system, sans-serif; --font-alt: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-base: 16px; --fw-base: 500; --lh-base: 1.5; /* Menü und Sprachumschalter skalieren im Original mit der Fensterbreite (1.2vw bzw. 1.3vw); die Grenzen verhindern Extreme. */ --fs-nav: clamp(14px, 1.23vw, 21px); --fs-lang: clamp(15px, 1.3vw, 23px); --fs-footer: clamp(13px, 1.1vw, 19px); /* Maße – Inhaltsbreite 1140 px wie im Original, plus seitlicher Innenabstand, damit auf schmalen Fenstern nichts am Rand klebt. */ --container: 1180px; --radius: 2px; /* Kopfbild: auf allen Seiten identisch */ --hero-height: 370px; --fs-hero-title: clamp(30px, 4.6vw, 59px); } /* 2. Basis =============================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--c-secondary); text-decoration: none; } a:hover, a:focus { color: var(--c-primary); } /* Größen, Gewicht und Abstände wie im Hello-Elementor-Reset der alten Seite */ h1, h2, h3, h4, h5, h6 { margin: .5rem 0 1rem; font-family: var(--font-sans); font-weight: 500; line-height: 1.2; } h1 { color: var(--c-primary); font-size: 2.5rem; } h2 { color: var(--c-secondary); font-size: 2rem; } h3 { color: var(--c-tan); font-size: 1.75rem; } h4 { color: var(--c-accent); font-size: 1.5rem; } h5 { color: var(--c-text); font-size: 1.25rem; } h6 { color: var(--c-tan); font-size: 1rem; } /* Das Elementor-Kit setzt den Absatzabstand auf 0; Abstände entstehen ausschließlich zwischen den Bausteinen. */ p { margin: 0; } hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.5rem 0; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .visually-hidden { 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; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6em 1em; background: var(--c-accent); color: #fff; } .skip-link:focus { left: 0; color: #fff; } /* 3. Layout ============================================================== */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } main { display: block; } /* 4. Kopfbereich ========================================================= */ .site-header { background: #fff; } /* Höhe, Innenabstände und Logogröße sind an der bisherigen Seite ausgemessen: Header 86 px hoch, Logo 107 px breit ab x = 32 px, Menü exakt in der Seitenmitte, Sprachumschalter rechts mit 60 px Abstand zum Rand. */ .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 86px; padding: 0 60px 0 22px; } /* Logo -------------------------------------------------------------------- */ .logo { display: flex; align-items: center; flex: 0 0 auto; padding: 10px; } .logo img { display: block; width: clamp(96px, 8.4vw, 150px); height: auto; } /* Hauptmenü --------------------------------------------------------------- */ /* Absolut zentriert, damit das Menü – wie im Original – in der Seitenmitte steht und nicht zwischen Logo und Sprachumschalter verrutscht. */ .site-nav { position: absolute; left: 50%; transform: translateX(-50%); margin-top: 2px; display: flex; justify-content: center; } .nav-list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; } .nav-item { display: flex; align-items: center; } /* Trennstrich zwischen den Menüpunkten */ .nav-item + .nav-item::before { content: ""; align-self: center; width: 1px; height: 1em; background: var(--c-divider); } .nav-link { display: block; position: relative; padding: 13px 20px; color: var(--c-text); font-size: var(--fs-nav); font-weight: 500; white-space: nowrap; } .nav-link:hover, .nav-link:focus { color: var(--c-text); } /* Unterstrich des aktiven Punktes, beim Überfahren wächst er aus der Mitte */ .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; background: var(--c-text); transform: scaleX(0); transition: transform .3s ease; } .nav-link:hover::after, .nav-link:focus::after, .nav-link.is-active::after { transform: scaleX(1); } /* Sprachumschalter -------------------------------------------------------- */ .lang-switch { flex: 0 0 auto; /* im Original sitzt der Umschalter ein paar Pixel tiefer als das Logo */ margin-top: 7px; } .lang-details { position: relative; } .lang-current { display: flex; align-items: center; gap: 10px; color: var(--c-lang); font-size: var(--fs-lang); font-weight: 500; cursor: pointer; list-style: none; user-select: none; } .lang-current::-webkit-details-marker { display: none; } .lang-current::marker { content: ""; } .lang-current:hover { color: var(--c-primary); } .flag { display: block; width: 20px; height: 15px; flex: 0 0 auto; border-radius: 3px; } .lang-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 170px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .09); } .lang-option { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--c-lang); font-size: 1rem; font-weight: 500; } .lang-option:hover, .lang-option:focus { background: #d9d9d9; color: var(--c-primary); } .lang-option.is-active { color: var(--c-primary); } /* Menü-Button (nur mobil sichtbar) ---------------------------------------- */ .nav-toggle { display: none; order: 3; width: 44px; height: 44px; margin-left: 6px; padding: 0; background: none; border: 0; cursor: pointer; } .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 26px; height: 3px; margin: 0 auto; border-radius: 2px; background: var(--c-text); transition: transform .18s ease, opacity .18s ease; } .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: relative; } .nav-toggle-icon::before { top: -8px; } .nav-toggle-icon::after { top: 5px; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-5px) rotate(-45deg); } /* 5. Inhalte ============================================================= */ .page { padding-bottom: 60px; } /* Abstand zwischen den Bausteingruppen einer Seite */ .page > .container { margin: 44px auto; } .page > .container:first-child { margin-top: 40px; } .page > .container + .container { margin-top: 0; } .page-title { margin-top: 0; } .rte > *:last-child { margin-bottom: 0; } .rte a { text-decoration: underline; } /* Absätze innerhalb eines Textblocks stehen direkt untereinander (wie im Original); Luft entsteht zwischen den Blöcken. */ .rte + .rte, .rte + .figure, .rte + .list, .rte + .cta-wrap, .rte + .button-row, .list + .rte, .figure + .rte { margin-top: 20px; } /* Hilfsklassen für einzelne Bausteine (Feld "class" im JSON) */ .center { text-align: center; } .narrow { max-width: 62%; margin-inline: auto; } /* Gruppe: fasst mehrere Blöcke zusammen (Einrückung, farbiger Kasten …) */ .group > * + * { margin-top: 20px; } /* Zwischen Gruppen deutlich mehr Luft als innerhalb einer Gruppe. Die Außenabstände benachbarter Gruppen fallen zusammen (44 px, nicht 88). */ .container > .group { margin-block: 44px; } .container > .group:first-child { margin-top: 0; } /* Eingerückter Textblock wie auf der EQF-Timber-Seite */ .indent { margin-left: 24px; } /* Senkrechte Punktlinie links */ .dotted { padding-left: 24px; border-left: 6px dotted var(--c-text); } /* Farbig hinterlegte Kästen */ .box { padding: 3%; border-radius: 5px; } .box-rose { background: #faf5f1; } .box-beige { background: #f3eee6; padding: 2%; } .box-olive { background: #eef0ca; } .box-sand { background: #e6cca7; border-radius: 15px; text-align: center; } /* Textfarben ganzer Abschnitte (Überschriften eingeschlossen) */ .tone-brown, .tone-brown h1, .tone-brown h2, .tone-brown h3, .tone-brown h4, .tone-brown h5, .tone-brown h6 { color: #683925; } .tone-black, .tone-black h1, .tone-black h2, .tone-black h3, .tone-black h4, .tone-black h5, .tone-black h6 { color: #000; } /* Überschriftengrößen abseits der Standardstufen */ .heading-lead { font-size: 24px; font-weight: 600; color: var(--c-primary); } .heading-primary { color: var(--c-primary); } .heading-sub { font-size: 19px; font-weight: 600; } .heading-note { font-size: 1rem; font-weight: 500; color: #261f1c; } /* Fußnote unter einem Abschnitt */ .footnote { color: var(--c-secondary); font-style: italic; } /* Fließtextseiten (Impressum, Datenschutz): hier bekommen auch Absätze innerhalb eines Textblocks Luft, sonst kleben die Zeilen aneinander. */ .prose .rte p + p { margin-top: .9rem; } .prose .rte ul, .prose .rte ol { margin-top: .6rem; } .prose .rte li { margin-bottom: .3em; } /* Zweitschrift (im Original „Roboto Flex“) */ .text-alt { font-family: var(--font-alt); font-weight: 400; color: #535251; } /* Zitat mit senkrechtem Strich */ .rte.quote { padding-left: 8px; border-left: 2px solid var(--c-primary); font-style: italic; } /* Kleiner zentrierter Hinweis in Großbuchstaben (Förderhinweis) */ .rte.note { padding: 0 5%; text-align: center; font-size: 13px; text-transform: uppercase; } .list { margin: 0; padding-left: 1.3em; } .list li { margin-bottom: .3em; } .figure { --img-scale: 100%; margin: 0; text-align: center; } .figure img { display: block; width: var(--img-scale); margin-inline: auto; } .figure.rounded img { border-radius: 12px; } .figure.shadow img { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .figure.left img { margin-inline: 0; } /* Leichtes Wachsen beim Überfahren mit der Maus (wie im Original) */ .figure.zoom img { transition: transform .3s ease; } .figure.zoom:hover img { transform: scale(1.04); } .figure figcaption { margin-top: .6em; font-family: var(--font-alt); font-weight: 400; color: var(--c-tan); font-size: .9rem; } .columns { display: grid; gap: 20px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-center { align-items: center; } .columns .column > * + * { margin-top: 20px; } .section { padding: 56px 0; } .section.bg-soft { background: var(--c-bg-soft); } .section.band-grey { background: #ededed; } /* Nummerierter Ablaufschritt (Prüfportal-Seite) */ .rte.step { padding: 16px 20px; background: #ebd7bb; border-radius: 13px; } /* Brauner Vollbreitenstreifen */ .section.band-brown { background: var(--c-band-brown); color: #fff; } .section.band-brown .rte, .section.band-brown p { color: #fff; } .section.band-brown h2 { color: var(--c-tan); } .spacer-s { height: 20px; } .spacer-m { height: 40px; } .spacer-l { height: 80px; } .cta-wrap { margin: 20px 0; } /* Buttons ---------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 26px; border-radius: 26px; background: var(--c-accent); color: #fff; font-family: var(--font-alt); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background-color .2s ease; } .button:hover, .button:focus { color: #fff; } .button-icon { width: .5em; height: .9em; flex: 0 0 auto; fill: currentColor; } .button-primary, .button-accent { background: var(--c-accent); } .button-primary:hover, .button-primary:focus, .button-accent:hover, .button-accent:focus { background: #7c980a; } .button-ghost { background: #7d7d7d9e; } .button-ghost:hover, .button-ghost:focus { background: #010201ad; } .button-tan { background: var(--c-tan); } .button-tan:hover, .button-tan:focus { background: #c08c3c; } .button-dark { background: var(--c-text); } .button-dark:hover, .button-dark:focus { background: #2f2f2f; } .button-secondary { background: var(--c-secondary); border-radius: 11px; } .button-secondary:hover, .button-secondary:focus { background: var(--c-primary); } .button-sand { background: #ebd7bb; color: var(--c-text); border-radius: 7px; font-weight: 600; box-shadow: 2px 5px 13px -1px rgba(0, 0, 0, .5); } .button-sand:hover, .button-sand:focus { background: var(--c-tan); color: var(--c-text); } .button-full { display: flex; width: 100%; border-radius: 6px; } .button-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; } /* Kopfbild --------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; height: var(--hero-height); overflow: hidden; } .hero-image, .hero-overlay { position: absolute; inset: 0; } .hero-image { background-position: center center; background-size: cover; } .hero-overlay { background: var(--c-text); opacity: .47; } .hero-inner { position: relative; color: #fff; } .hero-kicker { margin: 0 0 6px; color: #f4f4f4; font-size: 1rem; } .hero-title { margin: 0; color: #fff; font-size: var(--fs-hero-title); font-weight: 500; line-height: 1.15; } .hero-title b, .hero-title strong { font-weight: 700; } .hero-subtitle { margin: 6px 0 0; color: #e3e3e3; font-size: 1rem; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; } /* Karten mit Nummer ------------------------------------------------------ */ .cards { display: grid; gap: 24px; margin: 28px auto 0; } .cards-2 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-4 { grid-template-columns: repeat(4, 1fr); } .card { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 20px; background: #fff; border-top: 3px solid; border-radius: 10px; box-shadow: 2px 2px 2px 2px rgba(157, 157, 157, .35); } .card-tan { border-color: var(--c-tan); } .card-accent { border-color: var(--c-accent); } .card-dark { border-color: var(--c-text); } .card-number { margin: 0; font-size: 2.8em; font-weight: 700; line-height: 1.1; } .card-tan .card-number { color: var(--c-tan); } .card-accent .card-number { color: var(--c-accent); } .card-dark .card-number { color: var(--c-text); } .card-title { font-weight: 700; } .card .button { margin-top: auto; } /* Aufklappbare Abschnitte ------------------------------------------------ */ .accordion { display: flex; flex-direction: column; gap: 12px; } .accordion-item { border: 1px solid #dcdcdc; border-radius: 4px; background: #fff; } .accordion-title { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px; color: var(--c-primary); font-size: 25px; font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; } .accordion-title::-webkit-details-marker { display: none; } .accordion-title::marker { content: ""; } .accordion-title:hover { color: var(--c-secondary); } /* Plus, das beim Aufklappen zum Minus wird */ .accordion-icon { position: relative; width: 21px; height: 21px; flex: 0 0 auto; align-self: center; } .accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: currentColor; transform: translateY(-50%); transition: opacity .15s ease; } .accordion-icon::after { transform: translateY(-50%) rotate(90deg); } .accordion-item[open] .accordion-icon::after { opacity: 0; } .accordion-body { padding: 0 20px 18px 53px; } .accordion-body > * + * { margin-top: 16px; } /* Verschachtelte Listen in den Aufklapptexten */ .accordion-body ul { margin: 0; padding-left: 1.2em; } .accordion-body > ul > li { margin-bottom: .5em; } .accordion-body ul ul { margin-top: .3em; padding-left: 1.3em; } .accordion-body ul ul li { margin-bottom: .3em; } .accordion-body li { line-height: 1.5; } /* Logoreihe -------------------------------------------------------------- */ .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 64px; margin: 24px 0 0; } .logo-item img { display: block; width: 100%; height: auto; } /* Reihe kleiner Partnerlogos (EQF-Timber-Seite): alle gleich hoch, gleichmäßig über die Breite verteilt */ .logos.partners { display: grid; grid-template-columns: repeat(8, 1fr); gap: 24px; margin-top: 20px; } .logos.partners .logo-item { display: flex; align-items: center; justify-content: center; height: 72px; max-width: none; } .logos.partners .logo-item img { width: auto; max-width: 100%; max-height: 72px; } /* Logos fliegen beim ersten Sichtbarwerden von links/rechts ein (main.js schaltet dafür "js-armed", dann "in-view" frei). Ohne JavaScript bleiben sie einfach an ihrem Platz sichtbar. */ .logos.fly-in.js-armed .logo-item { opacity: 0; transform: translateX(-32px); transition: opacity .5s ease, transform .5s ease; } .logos.fly-in.js-armed .logo-item:nth-child(even) { transform: translateX(32px); } .logos.fly-in.js-armed .logo-item:nth-child(1) { transition-delay: 0ms; } .logos.fly-in.js-armed .logo-item:nth-child(2) { transition-delay: 60ms; } .logos.fly-in.js-armed .logo-item:nth-child(3) { transition-delay: 120ms; } .logos.fly-in.js-armed .logo-item:nth-child(4) { transition-delay: 180ms; } .logos.fly-in.js-armed .logo-item:nth-child(5) { transition-delay: 240ms; } .logos.fly-in.js-armed .logo-item:nth-child(6) { transition-delay: 300ms; } .logos.fly-in.js-armed .logo-item:nth-child(7) { transition-delay: 360ms; } .logos.fly-in.js-armed .logo-item:nth-child(8) { transition-delay: 420ms; } .logos.fly-in.in-view .logo-item { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .logos.fly-in.js-armed .logo-item { opacity: 1; transform: none; } } /* Anklickbare Schaubilder (Lightbox) ------------------------------------- */ .lightbox-trigger { display: block; cursor: zoom-in; } .lightbox-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: rgba(0, 0, 0, .82); opacity: 0; transition: opacity .2s ease; } .lightbox-overlay.is-open { opacity: 1; } .lightbox-overlay img { display: block; max-width: 90vw; max-height: 82vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); } .lightbox-caption { max-width: 90vw; margin: 16px 0 0; color: #fff; font-size: .95rem; text-align: center; } .lightbox-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; padding: 0; background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255, 255, 255, .24); } @media (prefers-reduced-motion: reduce) { .lightbox-overlay { transition: none; } } /* 6. Fußzeile ============================================================ */ .site-footer { margin-top: 40px; padding: 22px 0; background: var(--c-bg-soft); color: var(--c-primary); font-size: var(--fs-footer); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; } .footer-nav ul { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; } .footer-nav a { color: var(--c-primary); } .footer-nav a:hover, .footer-nav a:focus { color: var(--c-secondary); } .copyright { margin: 0; } /* Im Original steht das Copyright links, die Links rechts */ .footer-inner .copyright { order: 1; } .footer-inner .footer-nav { order: 2; } /* Nach-oben-Button ------------------------------------------------------- */ .back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: var(--c-primary); border: 0; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); color: #fff; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, background-color .2s ease; } .back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .back-to-top:hover, .back-to-top:focus-visible { background: var(--c-secondary); } .back-to-top svg { width: 22px; height: 22px; fill: currentColor; } @media (max-width: 900px) { .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .2s ease; } } /* 7. Responsive ========================================================== */ @media (max-width: 1024px) { :root { --fs-nav: 16px; --fs-lang: 16px; --fs-footer: 15px; } .nav-link { padding: 13px 12px; } } @media (max-width: 900px) { .header-inner { flex-wrap: wrap; justify-content: flex-start; min-height: 0; padding: 8px 14px; } .logo { flex: 0 0 auto; padding: 4px; } .logo img { width: auto; height: 42px; } .nav-toggle { display: block; } .lang-switch { order: 2; margin-left: auto; margin-top: 0; } .site-nav { position: static; transform: none; order: 4; flex: 1 0 100%; display: none; justify-content: flex-start; padding: 0; border-top: 1px solid var(--c-line); margin-top: 6px; } .site-nav.is-open { display: block; } .nav-list { display: block; padding: 4px 0 8px; } .nav-item { display: block; } .nav-item + .nav-item::before { display: none; } .nav-link { padding: 11px 4px; font-size: 17px; } .nav-link::after { left: 4px; right: auto; width: 32px; } :root { --hero-height: 260px; } .page { padding-bottom: 48px; } .page > .container { margin: 32px auto; } .section { padding: 40px 0; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.4rem; } .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); } /* Einrückungen kosten auf schmalen Fenstern zu viel Platz */ .indent { margin-left: 0; } .dotted { padding-left: 14px; border-left-width: 4px; } .box { padding: 20px; } .box-beige { padding: 18px; } .container > .group { margin-block: 32px; } .logos.partners { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr !important; } .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; } .footer-inner { justify-content: flex-start; } .logos.partners { grid-template-columns: repeat(3, 1fr); } /* Auf schmalen Fenstern nutzen Bilder die volle Breite; das überschreibt auch ein im JSON gesetztes "scale". */ .figure img { width: 100%; } .logos { gap: 24px 32px; } .narrow { max-width: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }