/* Strandgut – Front-end Interaktions-Layer & Section-Styles (Chunk C). Gilt projektweit laut CLAUDE.md: - jede Section mit leichtem Fade-in - Bilder mit leichtem Zoom bei Mouseover */ /* ---------- Section Fade-in ---------- opacity:0 nur wenn JS aktiv ist (.has-js wird per Inline-Script im gesetzt) – ohne JS bleiben Inhalte sichtbar. */ .has-js .fade-in-section { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .has-js .fade-in-section.is-visible { opacity: 1; transform: none; } /* ---------- Preset-Fix: textColor "base" ---------- Der Palette-Slug "text" erzeugt die Preset-Klasse .has-text-color – dieselbe Klasse, die WP zusätzlich als generischen Marker auf jeden Block mit Textfarbe setzt. Sie steht im Global-Styles-Stylesheet nach .has-base-color und färbt daher alle textColor:"base"-Blöcke dunkelblau. Re-Assert mit höherer Spezifität, damit "base" wieder Weiß rendert. */ .has-text-color.has-base-color { color: var(--wp--preset--color--base) !important; } /* ---------- Vertikale Abstände zwischen den Sections ---------- Jede Section bringt ihr eigenes Padding mit; der zusätzliche 24px-Block-Gap des Root-Layouts summierte sich darauf und machte den Weißraum zu groß (Besprechung 11.08.). Ab hier ist allein das Section-Padding maßgeblich. Ausnahmen mit eigenem Margin (z. B. .buch-monats) setzen !important. */ .wp-site-blocks > main, .wp-site-blocks > footer, .entry-content.wp-block-post-content > * { margin-block-start: 0; } .site-logo-link { display: inline-flex; align-items: center; line-height: 0; } .site-logo-svg { width: clamp(210px, 24vw, 300px); height: auto; display: block; } /* dünne „|"-Trenner zwischen den Nav-Items (mittig im Abstand). Nur in der Desktop-Leiste und nur zwischen den Punkten der obersten Ebene: „is-menu-open" sitzt am __responsive-container, nicht an .wp-block-navigation selbst – deshalb muss hier auf den Container geprüft werden. */ .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after { content: "|"; margin-inline-start: var(--wp--preset--spacing--40); color: var(--wp--preset--color--light-blue); font-weight: 400; pointer-events: none; } /* Navigation laut IDML: Montserrat Medium 18 px, aktiver Punkt SemiBold. */ .site-header .wp-block-navigation { font-family: var(--wp--preset--font-family--montserrat); font-weight: 500; } .site-header .wp-block-navigation-item__content { text-decoration: none; transition: color 0.18s ease; } .site-header .wp-block-navigation-item__content:hover, .site-header .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--primary); } /* aktiver Seiten-Zustand (z. B. „Home") in hellerem Blau */ .site-header .wp-block-navigation-item__content.is-current, .site-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--primary); font-weight: 600; } /* im mobilen Overlay keine Trenner */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after { content: none; } /* ---------- Navigations-Dropdown (Besprechung 11.08.) ---------- Struktur laut 260618_Strandgut_Website_Struktur: „Buchhandlung & Laden“ klappt die Unterseiten auf. Optik wie die hellblauen Kästen im Diagramm. Das schwebende Panel gilt nur für die Desktop-Leiste – im mobilen Overlay klappt das Untermenü eingerückt in der Liste auf (Regeln weiter unten). */ .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { min-width: 280px; padding-block: var(--wp--preset--spacing--30); border: 0; background-color: var(--wp--preset--color--surface); box-shadow: 0 8px 24px rgba(0, 61, 130, 0.14); } /* Unterpunkte laut Struktur-Diagramm in Open Sans 16px (die Hauptebene bleibt Montserrat 18px). Die Größe schlägt die vom Navigations-Block vererbte Preset-Klasse .has-lead-font-size auf den

. */ .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item { font-family: var(--wp--preset--font-family--open-sans); font-size: var(--wp--preset--font-size--base); font-weight: 400; } .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50); color: var(--wp--preset--color--text); } /* Pfeil „→“ wie im Struktur-Diagramm vor jedem Unterpunkt. */ .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label::before { content: "→"; margin-inline-end: 0.5em; color: var(--wp--preset--color--primary); } .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--primary); } /* im Dropdown keine „|“-Trenner (schlägt die Trenner-Regel der Hauptebene) */ .site-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child)::after { content: none; } /* „Weiterführende Links“ steht im Diagramm etwas abgesetzt. */ .site-header .wp-block-navigation__submenu-container .nav-submenu-spaced { margin-top: var(--wp--preset--spacing--30); } /* ---------- Mobiles Menü-Overlay ---------- Im geöffneten Overlay stapelt WP die Einträge untereinander. Da die Leiste rechtsbündig ausgerichtet ist (items-justified-right), klebten die Einträge ohne Innenabstand am rechten Rand. Hier linksbündig mit Rand setzen. !important, weil der Navigations-Block seine Ausrichtung über --navigation-layout-justification-setting mit gleicher Spezifität setzt. */ .wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50) 20px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; justify-content: flex-start; gap: var(--wp--preset--spacing--30); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding-left: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--30); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0; } /* Footer-Spalten: Link-Text in Dunkelblau wie im Layout (Korrekturen 3); Impressum/Datenschutz (.footer-legal) bleiben im helleren Link-Blau. */ .site-footer .wp-block-column p:not(.footer-legal) a { color: var(--wp--preset--color--text); transition: color 0.18s ease; } .site-footer .wp-block-column p:not(.footer-legal) a:hover, .site-footer .wp-block-column p:not(.footer-legal) a:focus-visible { color: var(--wp--preset--color--primary); } /* zentriertes Logo im Footer */ .site-footer__logo { margin-block: var(--wp--preset--spacing--20) 0; } .site-footer__logo-img { width: clamp(200px, 30vw, 250px); margin-inline: auto; } /* ---------- Galerie-Mouseover: blauer Schleier + eingekreistes Plus ---------- Referenz: Ansichten_Seiten/MO/galerie-mouse-over.png (Besprechung 11.08.). Farbe und Deckkraft sind aus der Vorlage gemessen (rgb(36,139,197) @ 84 %). Gilt für die Galerie über dem Footer und für die Seite „Bildergalerie“. */ .gruesse__slider figure.wp-block-image, .bildergalerie__gallery figure.wp-block-image { position: relative; } .gruesse__slider figure.wp-block-image::before, .bildergalerie__gallery figure.wp-block-image::before { content: ""; position: absolute; inset: 0; z-index: 2; background-color: rgba(36, 139, 197, 0.84); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* Kreis (border) mit Plus aus zwei weißen Balken – ohne zusätzliche Grafik. */ .gruesse__slider figure.wp-block-image::after, .bildergalerie__gallery figure.wp-block-image::after { content: ""; position: absolute; z-index: 3; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; box-sizing: border-box; border: 2px solid #fff; border-radius: 9999px; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 22px 2px, 2px 22px; background-position: center, center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .gruesse__slider figure.wp-block-image:hover::before, .gruesse__slider figure.wp-block-image:hover::after, .gruesse__slider figure.wp-block-image:focus-within::before, .gruesse__slider figure.wp-block-image:focus-within::after, .bildergalerie__gallery figure.wp-block-image:hover::before, .bildergalerie__gallery figure.wp-block-image:hover::after, .bildergalerie__gallery figure.wp-block-image:focus-within::before, .bildergalerie__gallery figure.wp-block-image:focus-within::after { opacity: 1; } /* ---------- Bild-Zoom bei Hover ---------- Utility-Klasse für Cover-Hintergründe und normale Bilder. */ .zoom-on-hover { overflow: hidden; } .zoom-on-hover img, .zoom-on-hover .wp-block-cover__image-background { transition: transform 0.6s ease; } .zoom-on-hover:hover img, .zoom-on-hover:focus-within img, .zoom-on-hover:hover .wp-block-cover__image-background, .zoom-on-hover:focus-within .wp-block-cover__image-background { transform: scale(1.06); } /* ---------- Buttons: Mouse-Over → Hellblau (Korrekturen 3) ---------- Gold-Buttons (Default-Stil aus theme.json) wechseln bei Hover/Fokus zu Hellblau (primary) mit weißer Schrift — Referenz: Layout-MO-Ansichten. !important nötig, weil explizite Preset-Hintergründe/-Textfarben (.has-accent-background-color etc.) selbst !important setzen. */ .wp-block-button__link { transition: background-color 0.18s ease, color 0.18s ease; } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--base) !important; } /* ---------- Eyebrow-Label ---------- Laut IDML sind die Eyebrows keine Kapitälchen, sondern Montserrat SemiBold 22 px in Satzschreibung mit mitlaufender Trennlinie (Besprechung 11.08.). */ .eyebrow { font-weight: 600; margin-bottom: 0 !important; } /* ---------- Hero ---------- */ .hero-card { box-sizing: border-box; width: min(440px, 100%); /* !important, um das constrained-Layout (margin: auto !important) zu überschreiben und die Karte rechtsbündig zu halten */ margin-left: auto !important; /* nach rechts schieben (innerhalb alignwide) */ margin-right: 0 !important; box-shadow: 0 8px 28px rgba(0, 61, 130, 0.16); } @media (max-width: 781px) { .hero-cover { min-height: 460px !important; } .hero-card { width: 100%; margin-left: 0; } } /* ---------- Eyebrow mit Trennlinie (Willkommen) ---------- */ .eyebrow, .eyebrow-rule { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); letter-spacing: 0; } .eyebrow::after, .eyebrow-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: 0.45; } /* ---------- Goldener Zitat-Kasten ---------- IDML: Zitat Montserrat SemiBold 38 px, Quelle Montserrat SemiBold 22 px – die Quelle läuft in der letzten Zeile mit (Besprechung 11.08.). */ .quote-band { border: 0; font-style: normal; } .quote-band p { display: inline; margin: 0; } .quote-band cite { display: inline; margin-left: 0.4em; font-family: var(--wp--preset--font-family--montserrat); font-style: normal; font-weight: 600; font-size: var(--wp--preset--font-size--x-large); white-space: nowrap; } /* ---------- Drei Karten ---------- Karten gleicher Höhe, Bild bündig oben, Button unten ausgerichtet. */ /* Karten liegen über der hellblauen Fläche der folgenden Section („Buch des Monats" greift per negativem Margin hinter die Karten). */ .karten { position: relative; z-index: 1; } .karten .wp-block-column { display: flex; } .karte { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--wp--custom--radius--sm); box-shadow: var(--wp--custom--shadow--card); } /* WP gibt Gruppen mit Hintergrund ein Default-Padding – hier 0, damit das Bild bündig sitzt (die innere Box hat eigenes Padding). */ .karte.has-background { padding: 0; } /* Bild bündig an Oberkante & Seiten der Karte */ .karte .karte__img { margin: 0; width: 100%; } .karte .karte__img img { display: block; width: 100%; } .karte .karte__body { flex: 1 1 auto; } /* Button ans Karten-Ende schieben → einheitliche Optik bei unterschiedlich langem Text */ .karte .karte__cta { margin-top: auto; } /* Hover der Karten-Buttons: siehe generische Button-Hover-Regel (→ primary). */ /* ---------- Buch des Monats ---------- */ /* Hellblaue Fläche, die nach oben hinter die Karten greift (wie im Layout): negativer Margin zieht die Section unter die Karten, das größere Padding-Top hält den Inhalt unterhalb der Karten. !important nötig, um das Layout-blockGap bzw. das Inline-Padding des Blocks zu schlagen. */ .buch-monats { background-color: #EBF4F9; margin-top: -240px !important; padding-top: 230px !important; } .buch-monats__cover { max-width: 420px; margin-inline: auto; } .buch-monats__cover img { width: 100%; height: auto; } /* Textlink mit Pfeil – etwas kräftiger als Fließtext-Links */ .text-link-arrow a { font-weight: 600; } .text-link-arrow a:hover, .text-link-arrow a:focus-visible { text-decoration: underline; } /* ---------- Grüße aus Juliusruh (Bilderreihe) ---------- */ /* Heading nutzt .eyebrow-rule (dünne mitlaufende Linie), soll hier aber nicht in Versalien stehen → Navy-Heading mit Trennlinie. */ .gruesse .eyebrow-rule { letter-spacing: -0.01em; } /* ---- Slider (Swiper) ---- Quelle ist ein editierbarer Core-Gallery-Block (.gruesse__gallery); JS baut daraus zur Laufzeit einen Swiper. Ohne JS bleibt es eine normale Galerie. */ .gruesse__slider { position: relative; } /* Galerie-Track: Swiper steuert Breiten/Abstände, daher Core-Gallery-Reste neutral. */ .gruesse__slider .gruesse__gallery { gap: 0; margin: 0; } .gruesse__slider .swiper-slide { margin: 0; height: auto; } /* Bilder füllen die Slide randscharf im 3:2-Format. */ .gruesse__slider .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; } /* Ohne JS (Fallback): Core-Gallery zeigt sich als normale Bilderreihe. */ .gruesse__gallery .wp-block-image img { border-radius: 0; } /* Seitliche, runde Navigations-Buttons (über den Bildrändern, wie im Layout). */ .gruesse__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--wp--custom--radius--full, 9999px); background: rgba(255, 255, 255, 0.92); color: var(--wp--preset--color--heading); box-shadow: 0 2px 10px rgba(23, 37, 63, 0.18); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease; } .gruesse__nav:hover, .gruesse__nav:focus-visible { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); outline: none; } .gruesse__nav--prev { left: 12px; } .gruesse__nav--next { right: 12px; } /* Swiper blendet bei deaktivierten Buttons (Anfang/Ende, kein Loop) aus. */ .gruesse__nav.swiper-button-disabled { opacity: 0; pointer-events: none; } /* Pagination-Dots zentriert unter dem Slider. */ .gruesse__dots.swiper-pagination { position: static; margin-top: var(--wp--preset--spacing--40); display: flex; justify-content: center; gap: 10px; } .gruesse__dots .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 !important; background: var(--wp--preset--color--light-blue); opacity: 0.6; transition: opacity 0.18s ease, background-color 0.18s ease; } .gruesse__dots .swiper-pagination-bullet-active { background: var(--wp--preset--color--primary); opacity: 1; } /* „Hier geht's zur gesamten Bildergalerie“ rechtsbündig unter die Reihe */ .gruesse__more { text-align: right; } /* ---------- Zitatband (vollbreiter Abschluss) ---------- */ /* Zitat auf ~zwei zentrierte Zeilen begrenzen, wie im Layout. */ .zitatband__text { max-width: 26ch; margin-inline: auto; } .gruesse:has(+ .zitatband) { padding-bottom: var(--wp--preset--spacing--50); } /* ==================================================================== Unterseite „Buchhandlung & Laden“ ==================================================================== */ /* ---------- Hero (Bücherregal + goldene Zitatkarte) ---------- */ .buch-hero__card { box-sizing: border-box; width: min(460px, 100%); /* !important, um das constrained-Layout (margin: auto !important) zu überschreiben und die Karte rechtsbündig zu halten */ margin-left: auto !important; /* nach rechts (innerhalb alignwide) */ margin-right: 0 !important; box-shadow: 0 8px 28px rgba(0, 61, 130, 0.16); } .buch-hero__card p { margin-block: 0; } @media (max-width: 781px) { .buch-hero { min-height: 360px !important; } .buch-hero__card { width: 100%; margin-left: 0; } } /* ---------- Öffnungszeiten-Band ---------- */ /* Das Band schließt ohne Lücke direkt an einen davorstehenden Hero (Cover) an. */ .wp-block-cover + .oeffnungszeiten { margin-block-start: 0; } .oeffnungszeiten__line { margin-block: 0; } .oeffnungszeiten__sep { opacity: 0.55; margin-inline: 0.35em; } @media (max-width: 600px) { .oeffnungszeiten__times { display: block; margin-top: var(--wp--preset--spacing--20); } .oeffnungszeiten__sep { display: none; } } /* ---------- Aktuelle Veranstaltungen / Event-Bänder ---------- */ .aktuelles > h1 { margin-top: 0; } .event-karte { box-shadow: 0 2px 10px rgba(0, 61, 130, 0.05); } .event-karte__ort { text-transform: none; letter-spacing: 0.01em; } .event-karte__titel { line-height: 1.1; } .event-karte__datum { color: var(--wp--preset--color--text); } .event-karte__sub, .event-karte__note { color: var(--wp--preset--color--text); } .event-karte__text { margin-block: 0; max-width: 70ch; } /* ---------- Sortiment-Liste ---------- */ .buch-sortiment__list { padding-left: 1.1em; } .buch-sortiment__list li { margin-bottom: var(--wp--preset--spacing--20); line-height: 1.55; } /* ---------- Team-Grid ---------- */ .buch-team__grid { gap: var(--wp--preset--spacing--50); } .team-karte { height: 100%; position: relative; } /* Kinder auf volle Kartenbreite strecken, damit die zentrierten Texte unter dem Foto auch mittig sitzen (WP-Container setzt flex-start). */ .wp-block-group.team-karte { align-items: stretch; } /* Zitat als Mouse-Over-Overlay über dem Foto: deckt exakt die 3/4-Bildfläche ab und blendet bei Hover/Fokus auf der Karte ein. !important gegen die Preset-Klasse .has-primary-background-color. */ .team-karte .team-karte__quote { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 3 / 4; z-index: 2; display: flex; flex-direction: column; justify-content: center; background-color: rgba(0, 161, 235, 0.85) !important; background-color: color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent) !important; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; /* Bild-Zoom darunter bleibt aktiv */ } .team-karte:hover .team-karte__quote, .team-karte:focus-within .team-karte__quote { opacity: 1; } .team-karte__quote p { margin-block: 0; line-height: 1.4; } .team-karte__img { margin: 0; width: 100%; } .team-karte__img img { display: block; width: 100%; } .team-karte__rule { width: 100%; /* dünne Linie über die volle Kartenbreite (wie im Layout) */ border: 0; height: 2px; margin-block: 0; margin-inline: auto; opacity: 0.8; } .team-karte__more { margin-top: auto; /* „mehr lesen“ an den Karten-Boden */ } .buch-team__divider { border: 0; height: 1px; opacity: 0.5; margin-top: var(--wp--preset--spacing--70); } /* Läuft auf 80 % der Breite des Team-Grids (alignwide = wideSize, auf schmalen Screens 80 % der verfügbaren Breite). */ .buch-team__cta-text { max-width: min(calc(var(--wp--style--global--wide-size) * 0.8), 80%); margin-inline: auto; color: #002F63; /* etwas dunkler als Preset "text" (#003D82) */ } /* ==================================================================== Unterseite „Strandkorbverleih“ ==================================================================== */ /* ---------- Hero (ohne Karte) ---------- */ @media (max-width: 781px) { .skv-hero { min-height: 360px !important; } } /* ---------- Strandkorbvermietung + Lageplan ---------- */ /* Weiße „Karten“-Box um die Lageplan-Grafik. */ .skv-lageplan { box-shadow: var(--wp--custom--shadow--card); } .skv-lageplan__img { margin: 0; } .skv-lageplan__img img { display: block; width: 100%; height: auto; } .skv-lageplan__caption a { font-weight: 600; } .skv-lageplan__caption a:hover, .skv-lageplan__caption a:focus-visible { text-decoration: underline; } /* Buttons in der rechten Spalte: gleiche Breite, linksbündig. */ .skv-vermietung .wp-block-buttons { align-items: stretch; } .skv-vermietung .wp-block-button { width: min(320px, 100%); } .skv-vermietung .wp-block-button .wp-block-button__link { display: block; width: 100%; text-align: center; } .skv-vermietung .wp-block-button.is-style-outline .wp-block-button__link:hover, .skv-vermietung .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } /* Hover des goldenen Reservierungs-Buttons: generische Button-Hover-Regel (→ primary). */ /* ---------- Reservierungsformular (statisches HTML) ---------- */ .skv-form { max-width: 100%; } /* Das Formular soll die volle Content-Breite nutzen (Besprechung 11.08.). .skv-form ist eine „constrained“ Gruppe – WP begrenzt deren direkte Kinder sonst auf contentSize (768px) und zentriert sie; hier aufheben, damit das CF7-Formular so breit läuft wie die übrigen alignwide-Blöcke. */ .skv-form.wp-block-group > * { max-width: none; } .skv-form__title { color: var(--wp--preset--color--heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 600; line-height: 1.2; margin: 0 0 var(--wp--preset--spacing--20); } .skv-form__intro { color: var(--wp--preset--color--text); font-weight: 600; margin: 0 0 var(--wp--preset--spacing--50); } .skv-form__fieldset { border: 0; margin: 0; padding: 0; } .skv-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); } .skv-form__field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .skv-form__field--full { grid-column: 1 / -1; } .skv-form__field label, .skv-form__group-label { color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--base); font-weight: 400; } .skv-form__field label span[aria-hidden="true"], .skv-form__group-label span[aria-hidden="true"] { color: var(--wp--preset--color--orange); margin-left: 1px; } .skv-form input, .skv-form textarea { font-family: inherit; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--text); background-color: var(--wp--preset--color--surface-3); border: 1px solid transparent; border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--40); width: 100%; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .skv-form textarea { resize: vertical; min-height: 7em; } .skv-form input:focus, .skv-form textarea:focus { outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px rgba(0, 130, 205, 0.18); } .skv-form__dates { display: flex; gap: var(--wp--preset--spacing--40); } .skv-form__date { flex: 1 1 0; display: block; } .skv-form__hint { color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--base); margin: var(--wp--preset--spacing--40) 0 0; } .skv-form__hint span[aria-hidden="true"] { color: var(--wp--preset--color--orange); } .skv-form__actions { margin-top: var(--wp--preset--spacing--50); } .skv-form__submit { font-family: inherit; font-size: var(--wp--preset--font-size--base); font-weight: 600; color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--accent); border: 0; border-radius: var(--wp--custom--radius--sm); padding: 12px 28px; cursor: pointer; transition: background-color 0.2s ease; } .skv-form__submit:hover, .skv-form__submit:focus-visible { background-color: var(--wp--preset--color--primary); } @media (max-width: 781px) { .skv-form__grid { grid-template-columns: 1fr; } } /* ---------- Contact Form 7 inside .skv-form ---------- */ /* CF7 wraps each field in a

; reset its default margins so the grid governs spacing. */ .skv-form .wpcf7-form p { margin: 0; } .skv-form .skv-form__field { margin: 0; } /* CF7 labels wrap the input (label text + asterisk +
+ input). Keep the label text and asterisk inline; the
drops the input to its own line. */ .skv-form .skv-form__field label, .skv-form .skv-form__date { display: block; } /* Space between the label line and the input it wraps. */ .skv-form .skv-form__field label br + .wpcf7-form-control-wrap, .skv-form .skv-form__date br + .wpcf7-form-control-wrap { margin-top: var(--wp--preset--spacing--20); } /* Form controls (CF7 wraps inputs in ). */ .skv-form .wpcf7-form-control-wrap { display: block; } .skv-form .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; } /* Golden submit, regardless of CF7's own .wpcf7-submit styling. */ .skv-form input.wpcf7-submit.skv-form__submit { width: auto; color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--accent); } .skv-form input.wpcf7-submit.skv-form__submit:hover, .skv-form input.wpcf7-submit.skv-form__submit:focus-visible { background-color: var(--wp--preset--color--primary); } /* Date pair: each date sits in its own .skv-form__date label. */ .skv-form .skv-form__dates { display: flex; gap: var(--wp--preset--spacing--40); } .skv-form .skv-form__date { flex: 1 1 0; } /* Response output + validation feedback. */ .skv-form .wpcf7-response-output { margin: var(--wp--preset--spacing--40) 0 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--sm); font-size: var(--wp--preset--font-size--base); } .skv-form .wpcf7-not-valid-tip { color: var(--wp--preset--color--orange); font-size: var(--wp--preset--font-size--small); font-weight: 600; margin-top: var(--wp--preset--spacing--20); } .skv-form .wpcf7-not-valid { border-color: var(--wp--preset--color--orange); } .skv-form .wpcf7-spinner { margin: 0 0 0 var(--wp--preset--spacing--30); } /* ---------- Zwei-Spalten-Bildblock ---------- */ .skv-bildblock__text { max-width: 46ch; margin-left: auto; } /* ---------- Kontakt-Seite ---------- */ .kontakt-kopf__intro { max-width: 60ch; } .kontakt-info__label { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .kontakt-info__line { margin: 0; line-height: 1.7; } .kontakt-info__line a { font-weight: 600; } /* Karte / Anfahrt */ .kontakt-karte__map { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden; box-shadow: 0 2px 16px rgba(23, 37, 63, 0.1); } .kontakt-karte__map iframe { display: block; width: 100%; height: 100%; border: 0; } .kontakt-karte__more { margin: var(--wp--preset--spacing--40) 0 0; font-size: var(--wp--preset--font-size--base); } @media (max-width: 781px) { .kontakt-karte__map { aspect-ratio: 4 / 3; } } /* ==================================================================== Unterseite „Über uns / Team“ ==================================================================== */ /* ---------- Überschrift-Zeile mit Zurück-Link ---------- */ .ueber-uns__head { gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--20); } .ueber-uns__head .ueber-uns__back { margin: 0; white-space: nowrap; } /* ---------- Personen-Block (Foto + Bio) ---------- */ .ueber-uns__person { align-items: flex-start; } .ueber-uns__img { margin: 0; width: 100%; } .ueber-uns__img img { display: block; width: 100%; } .ueber-uns__text h2 { line-height: 1.2; } /* ---------- Bildunterschriften unter dem Foto ---------- */ .team-bio__captions { margin-inline: auto; } .team-bio__caption { margin-block: 0; line-height: 1.5; } .team-bio__caption .team-bio__value { font-weight: 400; } .team-bio__rule { border: 0; height: 1px; width: 100%; opacity: 0.5; margin-block: var(--wp--preset--spacing--30); } /* ==================================================================== Unterseite „Buchvorstellungen“ ==================================================================== */ /* ---------- Seitenkopf (H1 + Intro) ---------- H1 + Intro bündig mit der linken Kante der wide-Buchblöcke darunter (Korrekturen 3): constrained-Default (contentSize) auf wideSize weiten. section-Präfix schlägt WPs Layout-Regel (.wp-container-X > :where(...)). */ section.buchvorstellungen-kopf > * { max-width: var(--wp--style--global--wide-size); } .buchvorstellungen-kopf__intro { color: var(--wp--preset--color--text); } /* ---------- Einzelne Buchvorstellung ---------- */ .buchvorstellung__cover { max-width: 360px; /* Cover linksbündig an der wide-Kante — fluchtet mit dem Seitenkopf (Korrekturen 3; überschreibt das Zentrieren aus .buch-monats__cover). */ margin-inline: 0; } /* Format-/Preis-Zeile etwas ruhiger als Fließtext */ .buchvorstellung__format { color: var(--wp--preset--color--text); line-height: 1.7; } /* ---------- „Ältere Beiträge“ ---------- */ .buchvorstellungen-aelter__link a { text-decoration: none; line-height: 1.2; } .buchvorstellungen-aelter__link a:hover, .buchvorstellungen-aelter__link a:focus-visible { text-decoration: underline; } .buchvorstellungen-aelter__arrow { display: inline-block; margin-top: var(--wp--preset--spacing--10); font-size: 1.6em; line-height: 1; text-decoration: none; } /* Mobile: Spalten stacken, Cover oben (greift bereits über WP-Default <781px, hier nur die Cover-Zentrierung absichern). */ @media (max-width: 781px) { .buchvorstellung__cover { margin-inline: auto; } } /* ==================================================================== Unterseite „Bildergalerie“ ==================================================================== */ /* ---------- Seitenkopf (H1 + Intro auf hellblauem Band) ---------- Das hellblaue Band schließt ohne weißen Zwischenraum an den Hero an (Besprechung 11.08.) – der Block-Gap des Root-Layouts wird aufgehoben. */ .wp-block-cover + .bildergalerie-kopf { margin-block-start: 0; } /* ---------- 12er-Bilder-Grid (Core-Grid, quadratische Kacheln) ---------- */ .bildergalerie__grid { gap: var(--wp--preset--spacing--30); } /* Einheitliche, quadratische Kacheln – Bild füllt die Zelle randscharf */ .bildergalerie__grid .wp-block-image { margin: 0; height: 100%; } .bildergalerie__grid .wp-block-image img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* ---------- Editierbare Galerie (Core-Gallery-Block) ---------- Bilder werden im Backend über die Mediathek gepflegt (beliebige Anzahl). Wir überschreiben das Flex-Layout des Gallery-Blocks durch ein responsives Grid (wie zuvor das statische Grid: auto, min. 15rem, quadratische Kacheln). */ /* !important überschreibt das vom Core-Gallery-Block erzwungene Flex-Layout. */ figure.bildergalerie__gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--wp--preset--spacing--30); } .bildergalerie__gallery figure.wp-block-image { margin: 0; width: 100% !important; /* Grid-Zelle füllen statt Core-Flex-Breite */ overflow: hidden; /* Zoom-on-hover: Bild beschneiden */ border-radius: 0; } .bildergalerie__gallery figure.wp-block-image img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; transition: transform 0.6s ease; } .bildergalerie__gallery figure.wp-block-image:hover img, .bildergalerie__gallery figure.wp-block-image:focus-within img { transform: scale(1.06); } /* ---------- „Mehr Bilder laden“ ---------- */ .bildergalerie-mehr__link a { text-decoration: none; line-height: 1.2; } .bildergalerie-mehr__link a:hover, .bildergalerie-mehr__link a:focus-visible { text-decoration: underline; } .bildergalerie-mehr__arrow { display: inline-block; margin-top: var(--wp--preset--spacing--10); font-size: 1.6em; line-height: 1; text-decoration: none; } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { .has-js .fade-in-section { opacity: 1; transform: none; transition: none; } .zoom-on-hover img, .zoom-on-hover .wp-block-cover__image-background { transition: none; } .team-karte .team-karte__quote { transition: none; } .zoom-on-hover:hover img, .zoom-on-hover:hover .wp-block-cover__image-background { transform: none; } .bildergalerie__gallery .wp-block-image img { transition: none; } .bildergalerie__gallery .wp-block-image:hover img { transform: none; } .gruesse__slider figure.wp-block-image::before, .gruesse__slider figure.wp-block-image::after, .bildergalerie__gallery figure.wp-block-image::before, .bildergalerie__gallery figure.wp-block-image::after { transition: none; } } /* ==================================================================== Lightbox für die Grüße-Galerie (Korrekturen 3) Vollfenster-Overlay, Markup wird in strandgut.js erzeugt; blättern per Pfeil-Buttons, Tastatur oder Swipe. ==================================================================== */ .sg-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 22, 47, 0.94); } .sg-lightbox[hidden] { display: none; } /* Seite hinter dem Overlay nicht mitscrollen lassen. */ body.sg-lightbox-open { overflow: hidden; } .sg-lightbox__swiper { width: 100%; height: 100%; } .sg-lightbox .swiper-slide { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: clamp(16px, 5vmin, 56px); } .sg-lightbox .swiper-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45); } /* Buttons in derselben runden Optik wie die Slider-Pfeile (.gruesse__nav). */ .sg-lightbox__close, .sg-lightbox__nav { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--wp--custom--radius--full, 9999px); background: rgba(255, 255, 255, 0.92); color: var(--wp--preset--color--heading); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .sg-lightbox__close:hover, .sg-lightbox__close:focus-visible, .sg-lightbox__nav:hover, .sg-lightbox__nav:focus-visible { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); outline: none; } .sg-lightbox__close { top: 16px; right: 16px; } .sg-lightbox__nav--prev, .sg-lightbox__nav--next { top: 50%; transform: translateY(-50%); } .sg-lightbox__nav--prev { left: 16px; } .sg-lightbox__nav--next { right: 16px; } /* Bildzähler „2 / 4" unten mittig. */ .sg-lightbox__count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; letter-spacing: 0.06em; } /* Klickbare Galerie-Bilder signalisieren die Großansicht. */ .gruesse__gallery img, .bildergalerie__gallery img, .skv-lageplan__img img { cursor: zoom-in; } /* Bei nur einem Bild (Lageplan) blendet Swiper die Pfeile aus. */ .sg-lightbox__nav.swiper-button-disabled, .sg-lightbox__nav[hidden] { opacity: 0; pointer-events: none; }