trotzdem den Block-Gap-Abstand nach oben – das erzeugt einen hellen Streifen ueber dem Hero. Abschalten: der Inhalt beginnt in diesem Theme immer buendig unter dem Header. */ .wp-site-blocks > main { margin-block-start: 0; } /* Gemeinsame Bausteine ---------------------------------------------------- */ .wp-block-heading strong { color: var(--chs-accent-600); font-weight: inherit; } /* Kicker / Label ------------------------------------------------------------ Kurzes Label mit Stahl-Strich davor. Farbe: accent-600 auf hellem Grund (WCAG-AA), heller Ton auf dunklen Flaechen. Tracking bewusst moderat. */ .is-style-chs-kicker { font-family: var(--wp--preset--font-family--display) !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; line-height: 1.2 !important; color: var(--chs-accent-600) !important; margin-bottom: 0.9rem !important; display: flex; align-items: center; gap: 0.7rem; } .is-style-chs-kicker::before { content: ""; width: 22px; height: 3px; background: currentColor; flex: none; } .has-text-align-center .is-style-chs-kicker, .is-style-chs-kicker.has-text-align-center { justify-content: center; } /* Dunkle Flaechen: hellerer Akzentton (Kontrast + Wirkung). */ .chs-hero .is-style-chs-kicker, .chs-footer .is-style-chs-kicker, .has-ink-background-color .is-style-chs-kicker, .has-steel-900-background-color .is-style-chs-kicker { color: #ff8a5f !important; } /* Panel ------------------------------------------------------------------- */ .is-style-chs-panel { border: 1px solid var(--chs-line); background: var(--wp--preset--color--white); } /* Haken-Liste ----------------------------------------------------------------- */ .is-style-chs-checks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; } .is-style-chs-checks li { position: relative; padding-left: 2.1rem; line-height: 1.5; } .is-style-chs-checks li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 1.35rem; height: 1.35rem; background: var(--chs-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 5.4 20 6.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 5.4 20 6.8z'/%3E%3C/svg%3E") center / contain no-repeat; } .has-ink-background-color .is-style-chs-checks li::before, .has-steel-900-background-color .is-style-chs-checks li::before { background: var(--chs-accent); } /* ========================================================================= HEADER (Grund-Layout – Sticky/Transparent-Verhalten: siehe frontend.css) ========================================================================= */ .chs-header__bar { max-width: var(--wp--style--global--wide-size); margin-inline: auto; width: 100%; gap: 1.5rem; } .chs-header__logo img, .chs-header .wp-block-site-logo img { width: 168px; height: auto; transition: width 0.3s var(--chs-ease); filter: brightness(0) invert(1); } /* Navigation – Grundfarben (Interaktion/Unterstreichung: frontend.css) */ .chs-nav { flex: 1 1 auto; } .chs-nav .wp-block-navigation__container { gap: 1.9rem; } .chs-nav a, .chs-nav .wp-block-navigation-item__content { color: #fff; } .chs-nav .wp-block-navigation-item { position: relative; } /* CTA-Button rechts */ .chs-header .chs-header__cta { flex: none; margin: 0; } .chs-header .chs-header__cta .wp-block-button__link { padding: 0.7rem 1.4rem; font-size: 0.95rem; letter-spacing: 0.05em; } /* ========================================================================= HERO (Startseite + Unterseiten) ========================================================================= */ .chs-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(88vh, 780px); padding-top: calc(var(--chs-header-h) + 4rem); padding-bottom: 4.5rem; padding-inline: clamp(1.25rem, 5vw, 3rem); } .chs-hero.chs-hero--sub { min-height: min(64vh, 540px); padding-top: calc(var(--chs-header-h) + 3rem); } .chs-hero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; } .chs-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .chs-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wp--preset--gradient--hero-veil); pointer-events: none; } .chs-hero__inner { position: relative; z-index: 2; margin-top: auto; width: 100%; max-width: var(--wp--style--global--wide-size); margin-inline: auto; text-shadow: 0 2px 30px rgba(8, 10, 12, 0.7), 0 1px 3px rgba(8, 10, 12, 0.5); } /* Hero-Inhalt linksbuendig statt zentriert. Doppel-Klasse, damit die Regel die Core-Zentrierung von .is-layout-constrained > * unabhaengig von der Ladereihenfolge schlaegt. */ .chs-hero .chs-hero__inner > * { margin-left: 0; margin-right: 0; max-width: 52rem; } .chs-hero .is-style-chs-kicker { text-shadow: 0 1px 3px rgba(8, 10, 12, 0.9); } .chs-hero h1.chs-hero__title { overflow-wrap: break-word; hyphens: auto; font-size: clamp(2.4rem, 5.5vw, 4.4rem); } .chs-hero p.chs-hero__lead { font-size: 1.2rem; color: #f0ede9; overflow-wrap: break-word; } @media (max-width: 782px) { .chs-hero { min-height: min(78vh, 620px); padding-top: calc(var(--chs-header-h) + 2rem); padding-bottom: 3rem; } .chs-hero.chs-hero--sub { min-height: 62vh; padding-top: calc(var(--chs-header-h) + 2.5rem); } .chs-hero h1.chs-hero__title { font-size: clamp(1.7rem, 6.4vw, 2.3rem); } .chs-hero p.chs-hero__lead { font-size: 1.05rem; } } /* Vertrauensleiste */ .chs-trust { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.95rem; color: #f0ede9; } .chs-trust span { display: inline-flex; align-items: center; gap: 1.4rem; } .chs-trust span::after { content: "/"; color: var(--chs-accent); } .chs-trust span:last-child::after { display: none; } /* ========================================================================= BILDKACHELN (Leistungen-Grid) ========================================================================= */ .chs-tiles.wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .chs-tiles.wp-block-columns > .wp-block-column { margin: 0; min-width: 0; display: flex; } .chs-tile { position: relative; overflow: hidden; isolation: isolate; width: 100%; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; } .chs-tile__bg { position: absolute; inset: 0; margin: 0; z-index: 0; } .chs-tile__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .chs-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wp--preset--gradient--hero-veil); pointer-events: none; } .chs-tile__inner { position: relative; z-index: 2; width: 100%; } .chs-tile__title { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.02; font-size: 1.55rem; margin: 0; overflow-wrap: break-word; } .chs-tile__link { margin: 0.55rem 0 0; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; } .chs-tile__link a { color: #fff; text-decoration: none; } /* Ganze Kachel klickbar (im Editor entschaerft – siehe editor.css) */ .chs-tile__link a::after { content: ""; position: absolute; inset: 0; z-index: 3; } @media (max-width: 900px) { .chs-tiles.wp-block-columns { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .chs-tiles.wp-block-columns { grid-template-columns: 1fr; } } /* ========================================================================= "WARUM CHS" – Feature-Grid ========================================================================= */ .chs-features.wp-block-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--chs-line); border: 1px solid var(--chs-line); margin-top: var(--wp--preset--spacing--40); } .chs-features.wp-block-columns > .wp-block-column.chs-feature { background: var(--chs-steel-900); padding: 2.1rem 1.9rem; margin: 0; } .chs-feature__icon { width: 46px; height: 46px; margin: 0 0 1.1rem; } .chs-feature__icon img { width: 100%; height: 100%; display: block; } .chs-feature h3, .chs-feature h4 { font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 0.55rem; color: #fff; } .chs-feature p { margin: 0; color: #c3c8ce; font-size: 0.97rem; line-height: 1.55; } @media (max-width: 900px) { .chs-features.wp-block-columns { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .chs-features.wp-block-columns { grid-template-columns: 1fr; } } /* ========================================================================= PRODUKT-BLOCK (Spalten mit Bild + Text) ========================================================================= */ .chs-mt.wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; } .chs-mt.wp-block-columns > .wp-block-column.chs-mt__media { display: flex; align-self: stretch; } .chs-mt__media .wp-block-image { margin: 0; width: 100%; display: flex; } .chs-mt__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; } .chs-mt.wp-block-columns > .wp-block-column.chs-mt__text { align-self: center; } @media (max-width: 781px) { .chs-mt.wp-block-columns { flex-wrap: wrap; gap: 1.5rem; } .chs-mt.wp-block-columns > .wp-block-column { flex-basis: 100% !important; } .chs-mt.wp-block-columns > .wp-block-column.chs-mt__media { order: -1; } .chs-mt__media img { min-height: 240px; } } /* ========================================================================= CTA-BAND ========================================================================= */ .chs-cta.wp-block-cover, .chs-cta.wp-block-group { overflow: hidden; } .chs-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto; } .chs-cta__phone { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1; color: #fff; text-decoration: none; white-space: nowrap; } /* ========================================================================= GALERIE (Referenzen) ========================================================================= */ .wp-block-gallery.chs-gallery { gap: 0.75rem; } .chs-gallery .wp-block-image { overflow: hidden; background: var(--chs-steel-900); } .chs-gallery .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } @media (max-width: 782px) { .wp-block-gallery.chs-gallery { gap: 0.5rem; } .chs-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc(50% - 0.25rem); } } @media (max-width: 460px) { .chs-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100%; } } /* ========================================================================= FOOTER ========================================================================= */ .chs-footer__grid { margin-inline: auto; } .chs-footer a { color: #fff; text-decoration: none; } .chs-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .chs-footer__links a { color: var(--chs-steel-400); } .chs-footer__bottom p { margin: 0; color: var(--chs-steel-400); } .chs-footer__logo img { filter: brightness(0) invert(1); opacity: 0.92; } @media (max-width: 800px) { .chs-footer__grid { flex-wrap: wrap; } .chs-footer__grid .wp-block-column { flex-basis: 100% !important; } } /* ========================================================================= SEKTIONS-RHYTHMUS & HELFER ========================================================================= */ .chs-section { padding-block: var(--wp--preset--spacing--60); } .chs-section--tight { padding-block: var(--wp--preset--spacing--50); } .chs-lead { font-size: 1.2rem; line-height: 1.6; color: var(--chs-steel-700); } .has-ink-background-color .chs-lead, .has-steel-900-background-color .chs-lead { color: #d7d3cd; } @media (max-width: 782px) { /* Vertrauensleiste kompakt, ohne haengende Trenner */ .chs-trust { gap: 0.35rem 1rem; font-size: 0.8rem; letter-spacing: 0.12em; } .chs-trust span { gap: 1rem; } .chs-trust span::after { display: none; } /* Kontakt-Band stapeln */ .chs-cta__inner { gap: 1.5rem; } .chs-cta__phone { font-size: clamp(1.75rem, 8vw, 2.6rem); } /* Feature-Kacheln etwas kompakter */ .chs-features.wp-block-columns > .wp-block-column.chs-feature { padding: 1.7rem 1.4rem; } /* Bildkacheln etwas niedriger */ .chs-tile { min-height: 320px; } /* Section-Ueberschriften nicht zu wuchtig */ .wp-block-group h2.wp-block-heading { line-height: 1.08; } }