/* Sichtbarer Fokus-Ring, konsistent auf allen interaktiven Elementen */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 2px; } /* Sticky Header – reines CSS, kein JS-Scroll-Listener */ .sdash-site-header { position: sticky; top: 0; z-index: 100; background-color: var(--wp--preset--color--background); border-bottom: 1px solid var(--wp--preset--color--neutral); } /* * Startseite: Header schwebt transparent über dem Bild-Hero (Bild bis hinter * die Navigation sichtbar) und bekommt beim Herunterscrollen automatisch * einen weißen Hintergrund. Die Sichtbarkeitsprüfung übernimmt ein winziges, * abhängigkeitsfreies Skript (assets/js/sticky-header.js), das nur die * Klasse "sdash-scrolled" an togglet – kein Animations-Framework, * keine Bibliothek. Ohne JavaScript bleibt der Header schlicht transparent. */ body.home .sdash-site-header { position: fixed; inset-inline: 0; top: 0; background-color: transparent; border-bottom-color: transparent; transition: background-color 200ms ease, border-color 200ms ease; } /* * Der Header-Wrapper kollabiert durch position:fixed auf 0 Hoehe. Der * normale Block-Gap-Abstand zwischen Header und Main (24px) bleibt dadurch * als sichtbare Luecke ganz oben stehen, bevor das Hero-Bild beginnt. */ body.home main { margin-top: 0; } body.home .sdash-site-header .wp-block-navigation-item > a { color: var(--wp--preset--color--background); transition: color 200ms ease; } body.home.sdash-scrolled .sdash-site-header { background-color: var(--wp--preset--color--background); border-bottom-color: var(--wp--preset--color--neutral); } body.home.sdash-scrolled .sdash-site-header .wp-block-navigation-item > a { color: var(--wp--preset--color--primary); } /* * Die aufklappenden Untermenüs (Leistungen, Branchen) haben immer ein * helles Panel als Hintergrund – unabhängig vom Scroll-Status des * transparenten Headers. Die Off-White-Einfärbung oben für den * Vor-Scroll-Zustand würde die Untermenü-Links auf hellem Grund * unlesbar machen, deshalb hier unabhängig vom Scroll-Status auf * Rauschwarz zurücksetzen. */ body.home .sdash-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a { color: var(--wp--preset--color--primary); } /* Bild-Hero (Startseite): volle Breite und Höhe, Bild reicht bis hinter die Navigation */ .sdash-hero--image { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-size: cover; background-position: center; } .sdash-hero__content { padding: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--md); } .sdash-hero--image .is-style-outline .wp-block-button__link { border-color: var(--wp--preset--color--background); color: var(--wp--preset--color--background); } .sdash-hero--image .is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--primary); } .sdash-site-header .wp-block-navigation-item.sdash-nav-cta > a { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md); border-radius: var(--wp--custom--radius--md); font-weight: 600; text-decoration: none; } .sdash-site-header .wp-block-navigation-item.sdash-nav-cta > a:hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); } /* Footer – nutzt dasselbe Preußischblau wie die dunklen Leistungen-Zeilen */ .sdash-site-footer { background-color: #0c2340; padding-top: var(--wp--preset--spacing--2xl); padding-bottom: var(--wp--preset--spacing--lg); } /* Schlanke Variante ohne Lass-uns-reden-Sektion (z. B. /kontakt/, das bereits sein eigenes ausführliches Formular hat) – braucht deutlich weniger Abstand nach oben. */ .sdash-site-footer--minimal { padding-top: var(--wp--preset--spacing--lg); } .sdash-footer-nav a { color: inherit; text-decoration: none; opacity: 0.75; } .sdash-footer-nav a:hover { text-decoration: underline; opacity: 1; } /* * Überschriften erben sonst die globale Primärfarbe (Rauschwarz) und wären * auf dem Rauschwarz-Footer unlesbar – hier explizit auf die geerbte * Off-White-Textfarbe des Footers zurücksetzen. */ .sdash-site-footer h2, .sdash-site-footer h3 { color: var(--wp--preset--color--background); } .sdash-footer-contact { padding-top: var(--wp--preset--spacing--lg); padding-bottom: var(--wp--preset--spacing--xl); } .sdash-footer-contact-list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--sm); margin-top: var(--wp--preset--spacing--md); } .sdash-footer-contact-item { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); } .sdash-footer-contact-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--wp--custom--radius--md); background-color: rgba(255, 255, 255, 0.1); color: var(--wp--preset--color--secondary); } .sdash-footer-contact-label { display: block; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; } .sdash-footer-contact-item a { color: inherit; text-decoration: none; } .sdash-footer-contact-item a:hover { text-decoration: underline; } .sdash-footer-form { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--lg); } .sdash-site-footer a { color: var(--wp--preset--color--background); } .sdash-footer-cta { max-width: 640px; margin-inline: auto; text-align: center; padding-bottom: var(--wp--preset--spacing--xl); } .sdash-footer-columns { border-top: 1px solid rgba(250, 248, 244, 0.2); padding-top: var(--wp--preset--spacing--lg); } /* CTA-Block-Pattern */ .sdash-cta-block { text-align: center; } /* Leistungs-Grid */ .sdash-service-card, .sdash-blog-teaser .wp-block-post { border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--md); transition: transform 200ms ease, box-shadow 200ms ease; } .sdash-service-card:hover, .sdash-service-card:focus-within, .sdash-blog-teaser .wp-block-post:hover, .sdash-blog-teaser .wp-block-post:focus-within { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(23, 21, 18, 0.3); } .sdash-service-card a, .sdash-blog-teaser .wp-block-post a { text-decoration: none; } /* Neueste Blog-Beiträge (Startseite) */ .sdash-blog-teaser .wp-block-post > * { margin-top: 0; margin-bottom: var(--wp--preset--spacing--xs); } .sdash-blog-teaser .wp-block-post > *:last-child { margin-bottom: 0; } /* * Leistungen-Übersicht (alternierend hell/dunkel, /leistungen/). Die * dunklen Zeilen nutzen bewusst ein Preußischblau statt des Primär-Tokens * (Rauschwarz) – wirkt edler. Derselbe Farbton wird auch für den * Footer verwendet (siehe unten), sonst bleibt er auf diese Komponente * beschränkt. */ .sdash-leistung-row--dark { background-color: #0c2340; } /* Hintergrund über volle Seitenbreite, Text bleibt als zentrierte Spalte (wie Hero) */ .sdash-leistung-row__content { padding-left: var(--wp--preset--spacing--md); padding-right: var(--wp--preset--spacing--md); } .sdash-leistung-row__eyebrow { margin-bottom: var(--wp--preset--spacing--sm); } .sdash-leistung-row__eyebrow-label { margin: 0; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .sdash-leistung-row__rule { flex: 1; height: 0; border: none; border-top: 1px solid currentColor; opacity: 0.35; margin: 0; } .sdash-leistung-row__subline { font-style: italic; } .sdash-leistung-row__eyebrow-label, .sdash-leistung-row__subline, .sdash-leistung-row__link a { color: var(--wp--preset--color--secondary); } .sdash-leistung-row__link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; } .sdash-leistung-row__link a span { transition: transform 200ms ease; } .sdash-leistung-row__link a:hover span { transform: translateX(4px); } .sdash-leistung-row--dark .sdash-leistung-row__eyebrow-label, .sdash-leistung-row--dark .sdash-leistung-row__subline, .sdash-leistung-row--dark .sdash-leistung-row__link a { color: var(--wp--preset--color--accent); } /* FAQ-Accordion */ .sdash-faq-accordion { padding-top: var(--wp--preset--spacing--xl); padding-bottom: var(--wp--preset--spacing--xl); } /* Prozess-Schritte */ .sdash-process-step__number { font-size: 2rem; font-weight: 700; line-height: 1; margin-bottom: 0; } .sdash-process-step h3 { margin-top: var(--wp--preset--spacing--xs); } /* Stats-Sektion */ .sdash-stat { text-align: center; } .sdash-stat__number { font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; color: var(--wp--preset--color--primary); line-height: 1; margin-bottom: var(--wp--preset--spacing--xs); } /* Referenz-Teaser (Startseite) */ .sdash-referenz-teaser .sdash-service-card img { width: 100%; height: auto; display: block; margin-bottom: var(--wp--preset--spacing--xs); } /* Portfolio-Hover-Karte (/referenzen/) – siehe blocks/referenz-bento-grid/style.css */ /* Kontaktseite */ .sdash-contact-sidebar { border-left: 1px solid var(--wp--preset--color--neutral); padding-left: var(--wp--preset--spacing--md); } .wpcf7-form p label { display: block; font-weight: 600; margin-bottom: var(--wp--preset--spacing--xs); } .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { width: 100%; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--base); padding: var(--wp--preset--spacing--xs); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--radius--sm); background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--primary); } .wpcf7-form textarea { min-height: 8rem; } .wpcf7-form .wpcf7-submit { width: auto; background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--background); border: none; font-weight: 600; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md); cursor: pointer; } .wpcf7-form .wpcf7-not-valid-tip { color: #cc1818; font-size: var(--wp--preset--font-size--small); font-weight: 400; } .wpcf7-response-output { border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--sm); margin-top: var(--wp--preset--spacing--sm); } /* * Mobile: dezenter horizontaler Rand für Header, Hauptcontent und Footer, * damit Content (v. a. Cards und andere Elemente mit Border) nicht direkt * am Bildschirmrand klebt. Full-bleed-Sektionen (Bild-Hero, alternierende * Leistungen-Übersicht) bleiben davon ausgenommen und brechen weiterhin * bis zum Rand aus. */ @media (max-width: 599px) { .sdash-site-header > .wp-block-group, main.wp-block-group, .sdash-site-footer > * { padding-left: 10px; padding-right: 10px; } main.wp-block-group > .alignfull { margin-left: -10px; margin-right: -10px; } }