/* * Zahnarzt Reiden – Platzhalter * Ergänzende Styles zu theme.json: Sticky-Header-Zustände, Hero-Slider, * Footer-Layout, Zurück-nach-oben-Button, Rechtsseiten-Lesebreite. * Farb-/Schrift-Tokens kommen konsequent aus den WP-Presets (theme.json). */ :root { --zr-header-height: 155px; --zr-header-height-mobile: 88px; /* Einheitliche Inhaltsbreite für Zitat-, Erreichbarkeits-, Team- und Kompetenzen-Sektion: links/rechts identisch zum Header-Container (Logo-Start / rechter Rand der Kontakt-Icons), damit alle Sektionen optisch auf derselben Kante stehen. */ --zr-content-width: var(--wp--style--global--wide-size, 1200px); } /* --------------------------------------------------------------------- * Grundlegendes / Barrierefreiheit * ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Browser setzen auf standardmässig 8px Aussenabstand - das erzeugt sonst einen weissen Rand vor dem eigentlich randlosen Hero-Foto. */ html, body { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } a:focus-visible, button:focus-visible { outline: 2px solid var(--wp--preset--color--beige); outline-offset: 2px; } .skip-link { position: absolute; top: -100px; left: 0.5rem; z-index: 2000; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 0.75rem 1.25rem; border-radius: 0.25rem; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 0.5rem; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------- * Header (sticky, zwei Farbzustände) * ------------------------------------------------------------------- */ /* Standardzustand (alle Seiten ausser der Startseite ganz oben): solider weisser Header mit Navy-Logo/-Icons - es gibt hier kein dunkles Hero-Foto, das für Kontrast sorgt, darum NICHT transparent/weiss starten. */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 1000; background-color: var(--wp--preset--color--white); box-shadow: 0 2px 14px rgba(14, 45, 76, 0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Nur auf der Startseite (WP-Body-Klasse "home" - per DevTools bestätigt vorhanden, siehe body-Klassenliste), solange nicht gescrollt wurde: transparent über dem Hero-Foto, Logo/Icons in Weiss. */ body.home .site-header:not(.is-scrolled) { background-color: transparent; box-shadow: none; } /* Ursache des weissen Streifens: wird von WordPress automatisch in einen zusätzlichen

-Wrapper eingepackt, den wir nie selbst angelegt/gestylt haben (sichtbar erst per DevTools-Elementbaum). Dieser Wrapper bleibt im normalen Dokumentfluss stehen, obwohl unser eigener Header (.site-header) darin position:fixed ist und keinen Platz mehr beansprucht - je nach WordPress-Version/Block-Gap-Regel behält der Wrapper trotzdem etwas Eigenhöhe. display:contents nimmt ihm seine eigene Box vollständig weg; seine Kinder (unser Header) rendern dadurch so, als säßen sie direkt in .wp-site-blocks - ohne jede Nebenwirkung, da unser eigentlicher Header ohnehin fixed positioniert ist und seine Position nicht vom Eltern-Element abhängt. */ .wp-block-template-part { display: contents; } /* Nur für eingeloggte Admins sichtbar: WordPress schiebt die Seite unter der Admin-Leiste um deren Höhe nach unten - der fixierte Header muss dem folgen, sonst klafft für Admins eine Lücke zwischen Admin-Leiste und Hero-Foto. Besucher ohne Login sehen die Admin-Leiste gar nicht und damit auch keine Lücke. */ body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: var(--zr-content-width); margin: 0 auto; min-height: var(--zr-header-height); padding-inline: 1.5rem; } /* Bestätigt linksbündig (nicht zentriert) - deckt sich mit der einheitlichen Inhaltsbreite: Sektionen beginnen exakt dort, wo hier das Logo beginnt. */ .site-header__logo { margin: 0; line-height: 0; } .site-header__logo a { position: relative; display: inline-block; line-height: 0; } .site-header__logo-img { display: block; height: 147px; width: auto; transition: opacity 0.3s ease; } .site-header__logo-img--color { position: absolute; inset: 0; opacity: 1; } .site-header__logo-img--white { opacity: 0; } body.home .site-header:not(.is-scrolled) .site-header__logo-img--white { opacity: 1; } body.home .site-header:not(.is-scrolled) .site-header__logo-img--color { opacity: 0; } .site-header__contact { position: relative; display: flex; align-items: center; gap: 0.65rem; margin: 0; margin-inline-start: auto; z-index: 1; } .site-header__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); text-decoration: none; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.2s ease; } .site-header__icon svg { width: 17px; height: 17px; } .site-header__icon:hover { background-color: rgba(14, 45, 76, 0.08); } body.home .site-header:not(.is-scrolled) .site-header__icon { color: #fff; border-color: #fff; } body.home .site-header:not(.is-scrolled) .site-header__icon:hover { background-color: rgba(255, 255, 255, 0.15); } @media (max-width: 600px) { .site-header__inner { min-height: var(--zr-header-height-mobile); padding-inline: 1rem; } .site-header__logo-img { height: 80px; } .site-header__icon { width: 34px; height: 34px; } } /* Seiten ohne Vollbild-Hero: Platz für den fixierten Header reservieren. */ .site-main { padding-top: calc(var(--zr-header-height) + 2.5rem); padding-bottom: 3rem; } .site-main--legal { padding-bottom: 5rem; } /* WordPress' generische "constrained"-Regel (:where(.is-layout-constrained) > *) begrenzt Inhalte sonst auf theme.json's contentSize (760px) - hier stattdessen dieselbe einheitliche Breite wie auf der Startseite (--zr-content-width, = Header-Breite von Logo-Start bis Icon-Ende). Die generische Regel hat über :where() Spezifität 0, jeder normale Selektor gewinnt automatisch, kein !important nötig. */ .site-main--legal > * { max-width: var(--zr-content-width); } .site-main--legal h1 { margin-bottom: 2rem; } .legal-page__stand { margin-top: 2.5rem; font-size: var(--wp--preset--font-size--small); font-style: italic; opacity: 0.7; } .site-main--front { padding-top: 0; padding-bottom: 0; } @media (max-width: 600px) { .site-main { padding-top: calc(var(--zr-header-height-mobile) + 2rem); } } /* --------------------------------------------------------------------- * Hero-Slider * ------------------------------------------------------------------- */ /* Text sitzt bewusst unten im Container (justify-content: flex-end + padding-bottom), nicht vertikal zentriert: object-position:top (siehe unten) verankert das Bild oben, wodurch der sichtbare Bildausschnitt je nach Viewport-Seitenverhältnis unterschiedlich weit unten endet. Eine feste "Mitte" würde bei sehr breiten/kurzen Fenstern über die Köpfe wandern; unten ausgerichtet bleibt der Text zuverlässig unterhalb davon - unabhängig vom Seitenverhältnis. */ .hero-slider { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #fff; margin: 0; padding-bottom: 6rem; } @media (max-width: 600px) { .hero-slider { padding-bottom: 5rem; } } /* Weisser Streifen über dem Hero-Foto: die Entry-Content-Korrektur allein hat es laut Test nicht behoben, darum hier zusätzlich die komplette Vorfahren-Kette der Startseite (wp-site-blocks -> main -> entry-content) auf margin/padding-top: 0 geprüft und abgesichert - eines dieser Elemente trägt den ungewollten oberen Abstand, der die weisse Seitenfläche vor dem Hero-Foto sichtbar macht. */ body.home .wp-site-blocks, body.home main#main, body.home .entry-content, body.home .wp-block-post-content { margin-top: 0; padding-top: 0; } /* Die Slides sind normale, im Block-Editor austauschbare Bild-Blöcke (core/image) - hier nur absolut übereinandergelegt und per Opacity gekreuzblendet. Bild ersetzen = im Editor anklicken -> "Ersetzen". margin:0 ist wichtig: als Kind von .hero-slider (layout type "default") würde WordPress sonst automatisch den globalen Block-Gap-Abstand (1.5rem) als margin-top einfügen, was das Bild/Overlay nach unten verschiebt und oben eine unbeabsichtigte Lücke/helle Kante erzeugt. */ .hero-slider__slide { position: absolute; inset: 0; z-index: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; } .hero-slider__slide.is-active { opacity: 1; } .hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; /* Kompromiss zwischen "Kopf-Freiraum oben bleibt sichtbar" und "Handschlag unten bleibt sichtbar": nicht hart auf 0% (oben) gepinnt, sondern leicht nach unten verschoben (25%), damit bei sehr breiten/kurzen Fenstern nicht zu viel vom unteren Bildrand (mit dem Handschlag) weggeschnitten wird. */ object-position: center 25%; display: block; } /* Gleichmässige Navy-Abdunkelung über die GESAMTE Bildhöhe (nicht nur unten) für durchgängig guten Textkontrast - siehe margin:0-Hinweis oben, derselbe Block-Gap-Bug betraf auch dieses Element. */ .hero-slider__overlay { position: absolute; inset: 0; z-index: 1; margin: 0; background-color: rgba(14, 45, 76, 0.4); } /* Headline + Subline sind bewusst normale (nicht absolut positionierte) Flex-Kinder von .hero-slider - dessen Flexbox (siehe oben) zentriert sie dadurch automatisch vertikal UND horizontal, unabhängig vom Seitenverhältnis des Browserfensters. Kein Positionieren per Hand nötig. */ .hero-slider__headline, .hero-slider__subline { position: relative; z-index: 2; margin: 0; padding: 0 1.5rem; text-align: center; text-shadow: 0 1px 12px rgba(14, 45, 76, 0.45); } .hero-slider__headline { font-size: var(--wp--preset--font-size--xx-large); } .hero-slider__subline { margin-top: 1rem; font-size: var(--wp--preset--font-size--large); font-family: var(--wp--preset--font-family--heading); font-weight: 400; letter-spacing: 0.02em; line-height: 1.3; } @media (max-width: 600px) { .hero-slider__headline { font-size: var(--wp--preset--font-size--x-large); } } .hero-slider__dots { position: absolute; bottom: 2rem; inset-inline: 0; z-index: 2; margin: 0; display: flex; justify-content: center; gap: 0.6rem; } .hero-slider__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); background-color: transparent; cursor: pointer; transition: background-color 0.25s ease; } .hero-slider__dot.is-active { background-color: #fff; } /* --------------------------------------------------------------------- * Zitat-, Erreichbarkeits- und Team-Sektion * ------------------------------------------------------------------- */ /* Sektionen grenzen sich bewusst farblich voneinander ab: Zitat = Navy mit weisser Schrift, Erreichbarkeit = helles Beige, Team = Weiss. */ .quote-section { background-color: var(--wp--preset--color--navy); padding: 5rem 0; margin: 0; } .quote-section__text { max-width: var(--zr-content-width); margin: 0 auto; padding: 0 1.5rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 500; font-style: italic; line-height: 1.4; } .quote-section__cite { max-width: var(--zr-content-width); margin: 1rem auto 0; padding: 0 1.5rem; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.75); } .reachable-section { background-color: var(--wp--preset--color--beige-light); padding: 4rem 0; margin: 0; text-align: center; } .reachable-section > .reachable-section__eyebrow, .reachable-section > .reachable-section__headline, .reachable-section > .reachable-section__buttons { max-width: var(--zr-content-width); margin-inline: auto; padding-inline: 1.5rem; } /* Bewusst zurückhaltend, aber gut lesbar: die gewohnte Erreichbarkeit ist die Hauptaussage, der Website-Hinweis nur Beiwerk (siehe Headline unten) - "small" war zu klein, "medium" ist der Mittelweg. */ .reachable-section__eyebrow { font-size: var(--wp--preset--font-size--medium); letter-spacing: 0.02em; color: var(--wp--preset--color--beige); margin: 0 0 0.5rem; } /* Die Hauptaussage - gross und prominent. "sind wir" ist reiner grammatikalischer Füller zwischen den beiden Kernsätzen und daher bewusst kleiner gesetzt (siehe .reachable-section__filler unten). */ .reachable-section__headline { font-size: var(--wp--preset--font-size--x-large); font-weight: 600; color: var(--wp--preset--color--navy); line-height: 1.3; margin: 0 0 1.75rem; } .reachable-section__filler { font-size: 0.55em; font-weight: 400; } .reachable-section__buttons { margin: 0; } /* Einheitliche CTA-Buttons: Weiss mit Navy-Schrift, beim Hover Navy mit weisser Schrift - gilt für beide Buttons gleich, unabhängig von der Gutenberg-Stilvariante (gefüllt oder "is-style-outline"). */ .reachable-section__buttons .wp-block-button__link { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); border: 1.5px solid var(--wp--preset--color--navy); transition: background-color 0.25s ease, color 0.25s ease; } .reachable-section__buttons .wp-block-button__link:hover { background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .team-section { background-color: var(--wp--preset--color--white); max-width: var(--zr-content-width); margin-block: 0; margin-inline: auto; padding: 4rem 1.5rem 5rem; } .team-section h3 { margin-top: 0; margin-bottom: 0.75rem; } /* Zwei-Spalten-Layout (core/columns) ist selbst ein Kind des Flow-Layouts von .team-section - margin-block-start auf 0 setzen, siehe Bug-Hinweis oben; eigener Abstand stattdessen über margin-top. */ .team-section__columns { margin-block: 2.5rem !important; column-gap: 2.5rem; } .team-section__photo { margin: 0 0 1.25rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0.5rem; } .team-section__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Trennlinie über dem Team-Absatz, analog zur Linie über "Ihr Zahnarzt Reiden-Team" in der Kompetenzen-Sektion - hebt "das Team" nach den beiden Arzt-Texten optisch ab. */ .team-section__closing { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 0.5px solid rgba(14, 45, 76, 0.15); } @media (max-width: 781px) { .team-section__columns { margin-block: 2rem !important; } } /* --------------------------------------------------------------------- * Kompetenzen-Sektion * ------------------------------------------------------------------- */ /* Analog zur Zitat-Sektion: volle Bildschirmbreite, Navy-Hintergrund - bewusst KEINE eingerückte/abgerundete Card. */ .competence-section { background-color: var(--wp--preset--color--navy); padding: 4rem 0; margin: 0; } .competence-section__text, .competence-section__signoff { max-width: var(--zr-content-width); margin-inline: auto; padding-inline: 1.5rem; } .competence-section__text { margin-block: 0 1.25rem; line-height: 1.7; } .competence-section__signoff { margin-block: 2rem 0; padding-top: 1.5rem; padding-bottom: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.2); font-family: var(--wp--preset--font-family--heading); line-height: 1.6; } /* --------------------------------------------------------------------- * Footer * ------------------------------------------------------------------- */ .site-footer { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); border-top: 1px solid rgba(14, 45, 76, 0.1); margin-top: 5rem; } .site-footer__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; max-width: var(--zr-content-width); margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; } /* Grid-Spalten selbst sind ebenfalls Kinder eines WordPress-Flow-Layouts (siehe Bug-Hinweis oben) - ohne dieses Reset würde jede Spalte einen ungewollten oberen Aussenabstand bekommen und die Vertikal-Ausrichtung zu Spalte 3 (s. u.) verschieben. */ .site-footer__col { margin-block: 0; } /* Spalte 1 (Logo) vertikal mittig zur Spalte 3 (Adressblock) ausrichten - Grid-Zellen sind gleich hoch (Default-Verhalten von display:grid), die Zelle selbst also so hoch wie der höchste Inhalt (i. d. R. der mehrzeilige Adressblock); align-items:center zentriert das Logo darin. */ .site-footer__col--logo { display: flex; align-items: center; } .site-footer__col--logo img { max-width: 340px; width: 100%; height: auto; } /* Spalte 2: Social-Icons auf die unterste Zeile des Adressblocks (Spalte 3) ausrichten. Da Grid-Zellen gleich hoch sind, schiebt justify-content: flex-end die Icons an den unteren Rand der Zelle - deckt sich mit der letzten Zeile von Spalte 3, sofern diese (wie hier der Fall) die höchste Spalte ist. */ .site-footer__col--links { display: flex; flex-direction: column; justify-content: flex-end; } /* Horizontal zwischen Logo- und Adress-Spalte zentriert (siehe .site-footer__col--links: flex-column + justify-content:flex-end für die vertikale Ausrichtung zur untersten Zeile des Adressblocks). */ .site-footer__social { display: flex; justify-content: center; gap: 0.6rem; margin: 0; } /* Klein und einheitlich dezent in Navy (schwarz-weiss-artig) gehalten - die Praxis soll im Vordergrund stehen, nicht die Social-Media-Marken. */ .site-footer__social-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(14, 45, 76, 0.35); color: var(--wp--preset--color--navy); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .site-footer__social-icon svg { width: 14px; height: 14px; display: block; } /* Google-Icon als sauberes Text-Monogramm statt Icon-Font/Pfad - robuster in der Darstellung als ein selbst nachgebauter "G"-Logo-Pfad. */ .site-footer__social-icon--text { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; } .site-footer__social-icon:hover { background-color: rgba(14, 45, 76, 0.08); border-color: var(--wp--preset--color--navy); } .site-footer__legal { margin: 0 0 0.9rem; padding-top: 1.5rem; border-top: 0.5px solid rgba(14, 45, 76, 0.12); max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: 1.5rem; font-size: 0.8rem; letter-spacing: 0.02em; } .site-footer__legal a, .site-footer__col--contact a { color: var(--wp--preset--color--navy); text-decoration: none; } .site-footer__legal a:hover, .site-footer__col--contact a:hover { color: var(--wp--preset--color--beige); } .site-footer__col--contact p { margin: 0; line-height: 1.8; } .site-footer__copyright { margin: 0; padding-bottom: 2.25rem; font-size: 0.85rem; opacity: 0.7; } @media (max-width: 781px) { .site-footer__inner { grid-template-columns: 1fr; text-align: center; gap: 2.25rem; } .site-footer__social { justify-content: center; } .site-footer__col--logo img { margin-inline: auto; } } .back-to-top { position: fixed; inset-inline-end: 1.5rem; inset-block-end: 1.5rem; z-index: 900; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: none; border-radius: 50%; background-color: var(--wp--preset--color--navy); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease; } .back-to-top svg { width: 18px; height: 18px; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background-color: var(--wp--preset--color--beige); }