als auch verschachtelten Gruppen `has-global-padding` und * `is-layout-constrained`. Dadurch addieren sich Innenabstände und jede * Ebene zentriert auf eine andere Breite -> wandernde, „weird" Text- * Einzuege. Wir neutralisieren das verschachtelte Padding und fuehren * den horizontalen Einzug an genau EINER Stelle: dem Sektions-Inhalt. * ------------------------------------------------------------------ */ /* main + post-content geben KEINEN eigenen horizontalen Einzug vor. */ .hs-immo > main, .hs-immo main.wp-block-group, .hs-immo .wp-block-post-content { max-width: none; padding-inline: 0; } /* Short-Page-Layout: kurze Seiten füllen den Viewport bis zum Footer, * damit der Footer nicht direkt unter wenig Inhalt klebt. Der Inhalt * bleibt oben ausgerichtet (kein vertikales Zentrieren der Heros). */ .hs-immo > main, .hs-immo main.wp-block-group { min-height: calc(100vh - 320px); padding-bottom: var(--hs-space-sm); } /* verschachteltes globales Padding deaktivieren – nur unsere Container * steuern den Einzug (verhindert doppelte/dreifache Einrueckung). */ .hs-immo main .has-global-padding, .hs-immo .wp-block-post-content.has-global-padding { padding-inline: 0; } .hs-immo main .has-global-padding > .alignfull { margin-inline: 0; width: 100%; } /* Vertikaler Rhythmus */ .hs-immo .hs-section { padding-block: var(--hs-space-md); } .hs-immo .hs-section--sm { padding-block: var(--hs-space-sm); } .hs-immo .hs-section--lg { padding-block: var(--hs-space-lg); } .hs-immo .hs-section + .hs-section { padding-top: 0; } /* DIE Fluchtlinie: jeder direkte Sektions-Inhalt sitzt auf 1180px + Gutter. * Komponenten mit eigenem inneren Layout (Hero, CTA-Band, contact-strip, * Footer) sind ausgenommen – die regeln ihre Breite selbst. */ .hs-immo .hs-section > :not(.alignfull):not(.hs-hero):not(.hs-cta-band):not(.hs-contact-strip), .hs-immo .wp-block-post-content > :not(.alignfull):not(.hs-section):not(.hs-hero):not(.hs-cta-band):not(.hs-contact-strip), .hs-immo .hs-inner { max-width: var(--hs-container-default); margin-inline: auto; padding-inline: var(--hs-gutter); box-sizing: border-box; } .hs-immo .alignwide { max-width: var(--hs-container-wide); margin-inline: auto; } .hs-immo .alignfull { max-width: 100%; } /* Single-Objektseite: zweispaltiges Layout (Details | Anfrageformular) * robust stabilisieren. Ohne diese Regel konnte die rechte Spalte auf eine * sehr schmale Breite kollabieren, wodurch das Anfrageformular extrem lang * gestreckt wurde. Wir erzwingen ein sauberes Flex-Verhältnis und Umbruch * erst auf schmalen Viewports. Greift nur im Single-Listing-Template. */ .hs-immo .hs-listing-single .wp-block-columns, .hs-immo main .wp-block-columns:has(.hs-inquiry) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } /* !important nötig: die Spalten tragen inline 'flex-basis:62%/38%', das sonst * unsere Breiten überschreibt. So bekommt die Detailspalte den Hauptteil und * die Formularspalte eine feste, sinnvolle Breite – unabhängig davon, ob der * alignwide-Container voll ausbricht. */ .hs-immo .hs-listing-single .wp-block-columns > .wp-block-column:first-child, .hs-immo main .wp-block-columns:has(.hs-inquiry) > .wp-block-column:first-child { min-width: 0; flex: 1 1 420px !important; } /* Die Formularspalte (zweite, schmalere) bekommt eine sinnvolle Mindest- * und Maximalbreite, damit das Formular nicht zur Endlos-Säule wird. */ .hs-immo .hs-listing-single .wp-block-columns > .wp-block-column:last-child, .hs-immo main .wp-block-columns:has(.hs-inquiry) > .wp-block-column:last-child { min-width: 0; flex: 1 1 340px !important; max-width: 460px; } @media (max-width: 781px) { .hs-immo .hs-listing-single .wp-block-columns > .wp-block-column:first-child, .hs-immo .hs-listing-single .wp-block-columns > .wp-block-column:last-child, .hs-immo main .wp-block-columns:has(.hs-inquiry) > .wp-block-column:first-child, .hs-immo main .wp-block-columns:has(.hs-inquiry) > .wp-block-column:last-child { flex-basis: 100% !important; max-width: none; } } /* Single-Objektseite: durchgehender Seitenabstand. Die Inhaltsblöcke der * Detailseite (Hero, Bild, Spalten, ähnliche Objekte) sitzen auf einer * gemeinsamen Fluchtlinie mit seitlichem Gutter – sonst kleben Überschriften * und Texte besonders auf dem Handy direkt am Rand. */ .hs-immo .hs-listing-single > .wp-block-group:not(.alignfull), .hs-immo .hs-listing-single > .wp-block-post-featured-image, .hs-immo .hs-listing-single > .wp-block-columns, .hs-immo .hs-listing-single > .wp-block-post-title { max-width: var(--hs-container-wide); margin-inline: auto; padding-inline: var(--hs-gutter); box-sizing: border-box; width: 100%; } /* Seiten-H1 (post-title) als integrierter Seitenkopf: * gleiche Fluchtlinie wie der Content (1180 + Gutter), ruhiger Abstand * darunter. Verhindert, dass die H1 zentriert „aus dem Layout" schwebt. */ .hs-immo > main > .wp-block-post-title, .hs-immo main.wp-block-group > .wp-block-post-title { max-width: var(--hs-container-default); margin-inline: auto; margin-bottom: 0; padding-inline: var(--hs-gutter); box-sizing: border-box; } /* Spacer direkt nach der H1 dezenter halten (Seitenkopf zum Inhalt) */ .hs-immo > main > .wp-block-post-title + .wp-block-spacer, .hs-immo main.wp-block-group > .wp-block-post-title + .wp-block-spacer { height: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; } /* Text-Container (Lesebreite 760) – zentriert, eine Linie */ .hs-immo .hs-prose, .hs-immo .hs-section__head, .hs-immo .hs-section__lead, .hs-immo .wp-block-post-content > p, .hs-immo .wp-block-post-content > h2, .hs-immo .wp-block-post-content > h3, .hs-immo .wp-block-post-content > ul, .hs-immo .wp-block-post-content > ol { max-width: var(--hs-container-text); margin-inline: auto; } /* ------------------------------------------------------------------ * * 4. TYPOGRAFIE – klare Hierarchie, AA-Kontrast * ------------------------------------------------------------------ */ .hs-immo { color: var(--hs-color-text); font-size: var(--hs-font-body); line-height: var(--hs-line-body); } .hs-immo p { font-size: var(--hs-font-body); line-height: var(--hs-line-body); } /* Lesebreite nur fuer echten Fliesstext (nicht in Karten, Spalten, * Hero, CTA – dort folgt der Absatz der Container-/Kartenbreite). */ .hs-immo .hs-prose p, .hs-immo .hs-section__lead { max-width: var(--hs-measure); } .hs-immo h1, .hs-immo h2, .hs-immo h3, .hs-immo h4 { color: var(--hs-color-text); hyphens: none; overflow-wrap: break-word; word-break: normal; text-wrap: balance; } .hs-immo h1 { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.2rem); line-height: 1.08; font-weight: 700; margin: 0 0 0.5em; } .hs-immo h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1.15; font-weight: 700; margin: 0 0 0.4em; } .hs-immo h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.25; font-weight: 600; margin: 0 0 0.4em; } .hs-immo h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; } /* Eyebrow – kleine Vorzeile über Überschriften */ .hs-immo .hs-eyebrow { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-color-accent); margin: 0 0 0.75rem; } /* Lead / Einleitungstext */ .hs-immo .hs-section__lead, .hs-immo .hs-lead { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.6; color: var(--hs-color-soft); } /* Fließtext-Farbabstufung */ .hs-immo .hs-text-soft { color: var(--hs-color-soft); } /* Links im Text */ .hs-immo .entry-content a, .hs-immo .hs-prose a { color: var(--hs-color-accent); text-underline-offset: 0.15em; } .hs-immo .entry-content a:hover { color: var(--hs-color-accent-hover); } /* ------------------------------------------------------------------ * * 5. BUTTONS – ein System, AA-Kontrast in allen Zuständen * Primary: Weinrot/weiß | Secondary: hell/Weinrot+Rand | Ghost: nur ruhig * ------------------------------------------------------------------ */ .hs-immo .wp-block-button__link, .hs-immo .hs-btn, .hs-immo .hs-contact-strip__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.9rem 1.75rem; border-radius: var(--hs-radius-pill); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .hs-immo .wp-block-button__link svg, .hs-immo .hs-btn svg { width: var(--hs-icon-md); height: var(--hs-icon-md); flex: none; } /* Primary (Default) – Weinrot auf hell, weißer Text (AA 7:1+) */ .hs-immo .wp-block-button:not(.is-style-outline) .wp-block-button__link, .hs-immo .hs-btn--primary, .hs-immo .hs-contact-strip__button { background: var(--hs-color-accent); color: var(--hs-color-on-accent); } .hs-immo .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .hs-immo .hs-btn--primary:hover, .hs-immo .hs-contact-strip__button:hover { background: var(--hs-color-accent-hover); color: var(--hs-color-on-accent); transform: translateY(-2px); box-shadow: var(--hs-shadow-lift); } .hs-immo .wp-block-button:not(.is-style-outline) .wp-block-button__link:active, .hs-immo .hs-btn--primary:active { background: var(--hs-color-accent-hover); transform: translateY(0); } /* Secondary / Outline – heller Grund, Weinrot-Text, klarer Rand */ .hs-immo .is-style-outline .wp-block-button__link, .hs-immo .hs-btn--secondary { background: var(--hs-color-surface); color: var(--hs-color-accent); border-color: var(--hs-color-accent); } .hs-immo .is-style-outline .wp-block-button__link:hover, .hs-immo .hs-btn--secondary:hover { background: var(--hs-color-accent); color: var(--hs-color-on-accent); border-color: var(--hs-color-accent); transform: translateY(-2px); } /* Buttons auf dunklem Grund (Hero/CTA-Band): Sekundär hell umkehren. * Im Hero zusätzlich leicht gefüllt, damit der Text auch über helleren * Bildpartien sicher lesbar bleibt (kein reiner Transparent-Button). */ .hs-immo .hs-on-dark .is-style-outline .wp-block-button__link, .hs-immo .hs-cta-band .is-style-outline .wp-block-button__link { background: transparent; color: var(--hs-color-on-accent); border-color: var(--hs-color-on-accent); } .hs-immo .hs-hero .is-style-outline .wp-block-button__link { background: rgba(45, 17, 22, 0.45); color: var(--hs-color-on-accent); border-color: rgba(255, 248, 239, 0.85); backdrop-filter: blur(2px); } .hs-immo .hs-on-dark .is-style-outline .wp-block-button__link:hover, .hs-immo .hs-hero .is-style-outline .wp-block-button__link:hover, .hs-immo .hs-cta-band .is-style-outline .wp-block-button__link:hover { background: var(--hs-color-on-accent); color: var(--hs-color-accent); border-color: var(--hs-color-on-accent); } /* Primärbutton (Telefon) auf dem weinroten CTA-Band invers hervorheben: * heller Grund, weinroter Text – sonst geht das Akzent-auf-Akzent unter. */ .hs-immo .hs-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--hs-color-on-accent); color: var(--hs-color-accent); border: 1px solid var(--hs-color-on-accent); font-weight: 700; box-shadow: 0 6px 20px rgba(45, 17, 22, 0.28); } .hs-immo .hs-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #fffdf9; color: var(--hs-color-accent); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(45, 17, 22, 0.34); } /* ------------------------------------------------------------------ * * 6. KARTEN – EIN System (Radius 16 / ein Schatten / ein Hover / ein Padding) * ------------------------------------------------------------------ */.hs-immo .hs-card, .hs-immo .hs-area-card, .hs-immo .hs-service-card, .hs-immo .hs-value-card, .hs-immo .hs-card-feature, .hs-immo .hs-card-listing, .hs-immo .hs-trust .wp-block-column { display: flex; flex-direction: column; background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); box-shadow: var(--hs-shadow-card); overflow: hidden; height: 100%; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .hs-immo .hs-card:hover, .hs-immo .hs-area-card:hover, .hs-immo .hs-service-card:hover, .hs-immo .hs-value-card:hover, .hs-immo .hs-card-feature:hover, .hs-immo .hs-card-listing:hover, .hs-immo .hs-trust .wp-block-column:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-lift); border-color: var(--hs-color-accent-soft); } /* Leistungs-Karten (hs/service-cards): Spaltenraster mit Abstand. Drei * gleich breite Karten auf Desktop, sauberer Umbruch auf schmalen Schirmen. * Ersetzt den blockGap des früheren Patterns, der beim dynamischen Block * sonst fehlt (Karten klebten ohne Abstand aneinander). */ .hs-immo .hs-service-cards__cols { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 1.2rem + 1vw, 2rem); align-items: stretch; } .hs-immo .hs-service-cards__cols > .wp-block-column { margin: 0; /* Core-Column-Margins zurücksetzen (Grid steuert Abstand). */ } * Greift sowohl auf die alte img-Klasse (hs-*-card__media) als auch – seit * der Umstellung auf valide core/image-Blöcke – auf das innerhalb des * figure-Wrappers (hs-*-card__media-wrap). So bleibt die Optik identisch, * ohne dass die eine zusätzliche (Block-invalidierende) Klasse braucht. */ .hs-immo .hs-card__media, .hs-immo .hs-area-card__media, .hs-immo .hs-service-card__media, .hs-immo .hs-area-card__media-wrap img, .hs-immo .hs-service-card__media-wrap img, .hs-immo .hs-card-listing__media { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 240px; object-fit: cover; margin: 0; } /* Editierbare Bild-Blöcke (wp:image) erzeugen einen

-Wrapper. * Diese Wrapper sollen keine zusätzlichen Abstände/Rahmen einführen – * die Optik kommt weiterhin von den Bild-Klassen darin. */ .hs-immo .hs-area-card__media-wrap, .hs-immo .hs-service-card__media-wrap, .hs-immo .hs-portrait-wrap { margin: 0; padding: 0; width: 100%; } .hs-immo .hs-area-card__media-wrap > a, .hs-immo .hs-area-card__media-wrap img, .hs-immo .hs-service-card__media-wrap img { display: block; width: 100%; } /* Bild-Wrapper der Listing-Karte: trägt Badge (position) und begrenzt das * Bild. Ohne diese Regel hatte der span keine Höhe/kein Kontext. */ .hs-immo .hs-card__media { position: relative; overflow: hidden; } /* Platzhalter, wenn (noch) kein Beispielbild gesetzt ist: ruhige, warme * Fläche aus den bestehenden Tokens statt leerem Weiß. Keine neue Farbe. */ .hs-immo .hs-card__image--placeholder { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 240px; background: linear-gradient(135deg, var(--hs-color-accent-soft) 0%, var(--hs-color-bg) 100%); } /* Echtes Beitragsbild auf der Karte: gleiche Proportion und Höhe wie der * Platzhalter, damit es nicht über die Karte hinausläuft. Ohne diese Regel * wurde das volle Bild (z. B. 683px hoch) ungekürzt angezeigt. */ .hs-immo .hs-card__image { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; max-height: 240px; object-fit: cover; object-position: center; } .hs-immo .hs-card__media { max-height: 240px; } /* Status-Badge auf der Karte (z. B. „verfügbar"). Vorher ungestylt, daher * erschien der Text wie ein Link. Pill in Markenfarbe, Text invers. */ /* Karten-Badge: absolut über dem Bild positioniert (Überlagerung). */ .hs-immo .hs-card__badge { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 1; } /* Badge-Grundoptik (gilt für Karten- und Inline-Badge gleichermaßen). */ .hs-immo .hs-card__badge, .hs-immo .hs-badge { display: inline-block; padding: 0.3rem 0.75rem; font-size: 0.78rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-decoration: none; border-radius: var(--hs-radius-pill); background: var(--hs-color-accent); color: var(--hs-color-on-accent); box-shadow: var(--hs-shadow-card); } /* Status-Varianten: „vermietet"/„verkauft" dezenter (gedeckt), „verfügbar" * in Markenrot. Nutzt bestehende Text-/Border-Tokens, keine neue Farbe. */ .hs-immo .hs-badge--vermietet, .hs-immo .hs-badge--verkauft { background: var(--hs-color-text); color: var(--hs-color-on-accent); } /* Karten-Body – ein Padding (24px Desktop / 20px Mobile), füllt Resthöhe. * !important nötig, weil die Layout-Neutralisierung (has-global-padding -> * padding-inline:0) sonst das horizontale Card-Padding entfernt. */ .hs-immo .hs-card__body, .hs-immo .hs-area-card__body, .hs-immo .hs-card-feature__body, .hs-immo .hs-trust .wp-block-column { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.6rem; padding: 1.5rem !important; max-width: none !important; margin-inline: 0 !important; } /* Portfolio-Karten (Startseite): gesamten Inhalt zentrieren, damit Titel, * Text und Link einheitlich mittig stehen statt Titel zentriert/Rest links. */ .hs-immo .hs-area-card__body { text-align: center; align-items: center; } /* Karten-Titel – konsistente Größe (kein 42px-Ausreißer) */ .hs-immo .hs-card__title, .hs-immo .hs-area-card__title, .hs-immo .hs-value-card__title, .hs-immo .hs-card-feature__title, .hs-immo .hs-service-card .hs-value-card__title { font-size: 1.3rem; line-height: 1.3; font-weight: 600; margin: 0 0 0.5rem; } /* Karten-Text */ .hs-immo .hs-card__excerpt, .hs-immo .hs-area-card__text, .hs-immo .hs-value-card__text, .hs-immo .hs-card-feature__text { color: var(--hs-color-soft); line-height: 1.6; margin: 0; max-width: 100%; } /* Karten-CTA/Mehr-Link unten bündig */ .hs-immo .hs-card__cta, .hs-immo .hs-area-card__more, .hs-immo .hs-card-feature__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--hs-color-accent); text-decoration: none; } .hs-immo .hs-card__cta:hover, .hs-immo .hs-area-card__more:hover { text-decoration: underline; } /* Karten-Raster: gleiche Höhen erzwingen */ .hs-immo .hs-section .wp-block-columns { align-items: stretch; } .hs-immo .hs-section .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; } /* Portrait+Text-Split (Kurzvorstellung): Bild und Text sauber verbunden. * Beide Spalten oben bündig, Portrait nicht vertikal weggerückt. * Robust ohne :has – direkt an der vertikal-zentrierten Spaltengruppe. */ .hs-immo .hs-section .wp-block-columns.are-vertically-aligned-center { align-items: start; } .hs-immo .wp-block-column.is-vertically-aligned-center { align-self: start; justify-content: flex-start; } .hs-immo .wp-block-column .hs-portrait, .hs-immo .wp-block-column .hs-portrait-wrap { margin-top: 0; } /* Icon-Kopf in Karten (Werte/Leistungen ohne Bild) */ .hs-immo .hs-value-card__icon, .hs-immo .hs-service-card__icon, .hs-immo .hs-service-card__icon-group, .hs-immo .hs-trust__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 14px; background: var(--hs-color-accent-soft); color: var(--hs-color-accent); } .hs-immo .hs-value-card__icon .hs-icon, .hs-immo .hs-service-card__icon .hs-icon, .hs-immo .hs-service-card__icon-group .hs-icon, .hs-immo .hs-trust__icon .hs-icon { width: 26px; height: 26px; } /* ------------------------------------------------------------------ * * 6b. ICONS – Lucide Outline, currentColor, einheitliche Größen * ------------------------------------------------------------------ */ .hs-icon { display: inline-block; width: var(--hs-icon-md); height: var(--hs-icon-md); flex: none; vertical-align: middle; stroke: currentColor; stroke-width: var(--hs-stroke); stroke-linecap: round; stroke-linejoin: round; fill: none; } .hs-icon--sm { width: var(--hs-icon-sm); height: var(--hs-icon-sm); } .hs-icon--lg { width: var(--hs-icon-lg); height: var(--hs-icon-lg); } .hs-iconrow { display: flex; align-items: center; gap: 0.6rem; } .hs-iconrow .hs-icon { color: var(--hs-color-accent); flex: 0 0 auto; } /* Region-Hinweis (Kompass) klar als eigene Zeile unter der Adresse, * mit etwas mehr Luft – sonst stehen Pin und Kompass am Desktop zu eng. */ .hs-immo .hs-region-note { margin-top: 1.25rem !important; } /* Häkchen-Liste (SVG-Maske statt ✓-Glyph) */ .hs-immo .hs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; } .hs-immo .hs-checks li { position: relative; padding-left: 2.1rem; color: var(--hs-color-text); line-height: 1.55; max-width: 100%; } .hs-immo .hs-checks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: var(--hs-icon-md); height: var(--hs-icon-md); background-color: var(--hs-color-accent); -webkit-mask: var(--hs-check-mask) center / contain no-repeat; mask: var(--hs-check-mask) center / contain no-repeat; } /* ------------------------------------------------------------------ * * 7. KOMPONENTEN * ------------------------------------------------------------------ */ /* --- 7a. HERO (Foto-Hero der Startseite) --- */ .hs-immo .hs-hero:has(.hs-hero__inner), .hs-immo .hs-hero--slider { position: relative; display: flex; align-items: center; /* Volle Viewport-Höhe (dvh = dynamische Höhe, korrekt auf Mobilgeräten), * abzüglich der Header-Höhe, damit der Hero exakt unter der Navigation * beginnt und den Bildschirm füllt – ohne Lücke darüber. */ min-height: calc(100dvh - var(--hs-header-h, 96px)); border-radius: 0; overflow: hidden; background-size: cover; background-position: center; } /* Oberen Abstand vor dem Hero entfernen: steht der Hero als erstes Element * im Seiteninhalt, soll er direkt an die (fixierte) Navigation anschließen. * Die Lücke entstand durch den Block-Gap (margin-top am ersten Kind) und das * obere Padding von main/post-content. Beides hier gezielt auf 0. */ .hs-immo main > .hs-hero:first-child, .hs-immo .wp-block-post-content > .hs-hero:first-child, .hs-immo main > .wp-block-post-content:first-child > .hs-hero:first-child { margin-top: 0 !important; } .hs-immo main:has(> .hs-hero:first-child), .hs-immo main:has(> .wp-block-post-content:first-child > .hs-hero:first-child), .hs-immo .wp-block-post-content:has(> .hs-hero:first-child) { padding-top: 0 !important; margin-top: 0 !important; } /* dunkler, warm-weinroter Verlauf für Textlesbarkeit (AA auf Foto) */ .hs-immo .hs-hero:has(.hs-hero__inner)::before, .hs-immo .hs-hero--slider::before { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(45, 17, 22, 0.78) 0%, rgba(45, 17, 22, 0.58) 42%, rgba(45, 17, 22, 0.26) 72%, rgba(45, 17, 22, 0.10) 100%); z-index: 1; } /* Hero-Slider: gestapelte Bild-Ebenen, die langsam überblenden. Sie liegen * UNTER dem Verlauf (::before, z-index 1) und unter dem Inhalt (z-index 2). * Optik des Heros bleibt identisch – nur das eine Standbild wird durch sanft * wechselnde Bilder ersetzt. Reduzierte Bewegung wird respektiert. */ .hs-immo .hs-hero--slider .hs-hero__slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hs-immo .hs-hero--slider .hs-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation-name: hs-hero-fade; animation-timing-function: linear; animation-iteration-count: infinite; } /* Sichtbarkeitsfenster: jedes Bild ist etwa 1/n des Zyklus sichtbar, mit * weicher Überblendung an den Rändern. Da die Gesamtdauer = n × 6s im Markup * gesetzt wird, ergibt sich das Fenster aus dem Verhältnis. Wir definieren das * Keyframe großzügig (kurzes Ein-/Ausblenden, lange Pause) – die Staffelung * über animation-delay sorgt für den nahtlosen Wechsel bei 2–4 Bildern. */ @keyframes hs-hero-fade { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } } /* Hinweis: Der Hero-Bildwechsel bleibt auch bei „reduzierter Bewegung“ * aktiv (sehr langsame, reine Opazitäts-Überblendung ohne Bewegung). Die * entsprechende Ausnahme steht im prefers-reduced-motion-Block weiter unten. */ .hs-immo .hs-hero__inner { position: relative; z-index: 1; max-width: var(--hs-container-default); margin-inline: auto; /* !important nötig: WordPress nullt bei verschachteltem has-global-padding * das innere padding-inline (.has-global-padding :where(... > .has-global-padding)). * Sonst kleben H1/Lead/Buttons am linken Viewport-Rand (v.a. mobil). */ padding-inline: var(--hs-gutter) !important; padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); width: 100%; } .hs-immo .hs-hero__content { max-width: 40rem; text-align: left; margin-left: 0 !important; margin-right: auto !important; } /* Hero-Texte linksbündig an EINER Kante – robust, auch wenn der * __content-Wrapper im DOM fehlt (greift direkt auf die Hero-Kinder). * Überschreibt die generische constrained-Zentrierung (margin:auto). */ .hs-immo .hs-hero__inner > .hs-eyebrow, .hs-immo .hs-hero__inner > h1, .hs-immo .hs-hero__inner > .wp-block-heading, .hs-immo .hs-hero__inner > .hs-hero__lead, .hs-immo .hs-hero__inner > p, .hs-immo .hs-hero__inner > .wp-block-buttons, .hs-immo .hs-hero__content > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 40rem; text-align: left; } .hs-immo .hs-hero h1 { color: var(--hs-color-on-accent); margin-top: 0; max-width: 18ch; /* Hero-Überschrift kompakter; die kurze Schlagzeile passt so in max. 2 Zeilen * und lässt den Hero-Bildern mehr Raum. */ font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.1; /* Lange Wörter nicht mitten im Wort trennen – * sie rücken komplett in die nächste Zeile statt das „g“ abzuschneiden. */ overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* Kleines Herz-Icon direkt hinter dem Wort „Herz“: sichtbares Symbol in der * Markenfarbe (Weinrot), das wie ein Logo-Akzent neben dem Wort steht. */ .hs-immo .hs-hero__heart-word { white-space: nowrap; } .hs-immo .hs-hero__heart-icon { display: inline-block; width: 0.72em; height: 0.72em; margin-left: 0.18em; vertical-align: baseline; position: relative; top: 0.02em; } .hs-immo .hs-hero__heart-icon svg { width: 100%; height: 100%; display: block; fill: #e63946; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); } /* Eyebrow hell nur im Foto-Hero (dunkler Grund). Im Text-Hero unten gesetzt. */ .hs-immo .hs-hero:has(.hs-hero__inner) .hs-eyebrow, .hs-immo .hs-hero--slider .hs-eyebrow { color: var(--hs-color-accent-soft); } .hs-immo .hs-hero__lead { color: #f6e9e7; font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem); line-height: 1.5; margin-bottom: 1.6rem; max-width: 34rem; } .hs-immo .hs-hero .wp-block-buttons, .hs-immo .hs-hero__actions { display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 0.85rem 1rem !important; row-gap: 0.85rem !important; column-gap: 1rem !important; --wp--style--block-gap: 1rem; margin-top: 2rem; } /* --- WhatsApp-Button im Hero: gedämpftes Grün, an die warme Marke angepasst. * Gleiche Pillenform/Größe wie die übrigen Hero-Buttons; ruhiges, leicht * entsättigtes Grün mit weicher Kontur statt knalligem WhatsApp-Grün. --- */ .hs-immo .hs-hero__wa .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.55em; background: #4f8a6b; border: 1px solid #4f8a6b; color: #ffffff; box-shadow: 0 6px 18px rgba(31, 71, 51, 0.28); } .hs-immo .hs-hero__wa .wp-block-button__link:hover, .hs-immo .hs-hero__wa .wp-block-button__link:focus { background: #41785b; border-color: #41785b; color: #ffffff; } .hs-immo .hs-hero__wa-icon { display: inline-flex; width: 1.15em; height: 1.15em; opacity: 0.95; } .hs-immo .hs-hero__wa-icon svg { width: 100%; height: 100%; fill: currentColor; } /* WhatsApp-Icon in Textzeilen (Kontaktseite, Footer): dezent grün getönt. */ .hs-immo .hs-iconrow--whatsapp .hs-icon { color: #4f8a6b; } .hs-immo .hs-footer__contact a[href*="wa.me"] { /* greift via Eltern-li-Icon */ } .hs-immo .hs-footer__contact li:has(a[href*="wa.me"]) .hs-icon { color: #7fc8a0; } /* --- 7b. TEXT-HERO auf Unterseiten (ruhige Karte, kein Foto) --- */ .hs-immo .hs-hero:not(:has(.hs-hero__inner)) { background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); padding-inline: clamp(1.5rem, 1rem + 3vw, 3rem); max-width: var(--hs-container-default); margin-inline: auto; } .hs-immo .hs-hero:not(:has(.hs-hero__inner)) h1, .hs-immo .hs-hero:not(:has(.hs-hero__inner)) h2 { color: var(--hs-color-text); } /* Konsistente linksbündige Ausrichtung – keine gemischte Zentrierung. * Alle Kinder auf dieselbe Achse, gleiche Lesebreite. */ .hs-immo .hs-hero:not(:has(.hs-hero__inner)) > * { max-width: var(--hs-container-text); margin-inline: 0; text-align: left; } .hs-immo .hs-hero:not(:has(.hs-hero__inner)) .hs-eyebrow { text-align: left; color: var(--hs-color-accent); } /* --- 7b2. PAGEHEAD-BANNER (Landing-Seiten mit Foto-Hintergrund) --- * Foto + dunkler Verlauf, damit Eyebrow und H1 sicher lesbar bleiben. */ .hs-immo .hs-pagehead { position: relative; border-radius: var(--hs-radius-lg); overflow: hidden; background-size: cover; background-position: center; min-height: 240px; display: flex; align-items: center; } .hs-immo .hs-pagehead::before { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(45,17,22,0.82) 0%, rgba(45,17,22,0.5) 60%, rgba(45,17,22,0.3) 100%); } .hs-immo .hs-pagehead__inner { position: relative; z-index: 1; max-width: var(--hs-container-default); width: 100%; margin-inline: auto; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) var(--hs-gutter); box-sizing: border-box; } .hs-immo .hs-pagehead__inner > * { max-width: 36rem; } .hs-immo .hs-pagehead h1 { color: var(--hs-color-on-accent); margin: 0; hyphens: none; } .hs-immo .hs-pagehead__eyebrow { color: var(--hs-color-accent-soft) !important; margin-bottom: 0.5rem; } /* ===================================================================== * EINHEITLICHES PAGE-HERO-SYSTEM * Ein konsistenter Seiteneinstieg für alle Unterseiten. Eine Basis, * vier Typen-Modifier (standard, image/landing, contact, legal). * Gleiche Achse (Content-Fluchtlinie), gleiche Abstände, gleiche * Eyebrow-/H1-/Lead-Systematik. Genau EIN Einstieg pro Seite. * ===================================================================== */ .hs-immo .hs-page-hero { /* Auf die Header-Fluchtlinie bringen: WordPress' constrained-Layout * der .entry-content zwängt Kinder sonst auf contentSize (760px) und * zentriert sie mit !important – dadurch saß der Hero-Text weit rechts * statt bündig unter Logo/Navigation. Wir brechen auf die gleiche * Breite + denselben Gutter wie der Header aus, linksbündig. */ max-width: var(--hs-container-default) !important; margin-inline: auto !important; padding-inline: var(--hs-gutter) !important; padding-top: clamp(2.5rem, 2rem + 3vw, 4rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-sizing: border-box; } /* Inhalt linksbündig auf einer Lesebreite – an der linken Container-Kante */ .hs-immo .hs-page-hero > * { max-width: var(--hs-container-text); margin-inline: 0 !important; } .hs-immo .hs-page-hero .hs-eyebrow, .hs-immo .hs-page-hero .wp-block-post-terms.hs-eyebrow, .hs-immo .hs-page-hero__eyebrow { color: var(--hs-color-accent); margin-bottom: 0.6rem; display: block; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; font-weight: 600; } /* Breadcrumb innerhalb des Page-Hero: ohne Extra-Padding, links bündig */ .hs-immo .hs-page-hero .hs-breadcrumbs { padding: 0 0 0.4rem !important; margin-bottom: 0.4rem; } .hs-immo .hs-page-hero h1, .hs-immo .hs-page-hero .wp-block-post-title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.12; color: var(--hs-color-text); margin: 0; hyphens: none; word-break: normal; overflow-wrap: normal; } .hs-immo .hs-page-hero__lead { color: var(--hs-color-soft); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.6; margin: 1rem 0 0; } /* Typ: kompakter Legal-Hero – weniger Höhe, schmaler Container */ .hs-immo .hs-page-hero--legal { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-bottom: clamp(1rem, 0.75rem + 1vw, 1.5rem); max-width: var(--hs-container-text); } .hs-immo .hs-page-hero--legal h1, .hs-immo .hs-page-hero--legal .wp-block-post-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem); } /* Typ: Bild-Hero (Landing) nutzt weiter .hs-pagehead (oben definiert), * aber mit derselben vertikalen Rhythmik darüber/darunter. */ /* Empty-Card (Objekte/kurze Seiten): hochwertige Card auf der * Content-Fluchtlinie – keine isoliert mittig schwebende Box. */ .hs-immo .hs-empty-card { max-width: var(--hs-container-default) !important; margin-inline: auto; padding: clamp(2rem, 1.5rem + 2vw, 3rem); background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); box-sizing: border-box; text-align: left; } /* Section-Wrapper der Empty-Card nicht auf Lesebreite einschränken. */ .hs-immo .hs-section:has(> .hs-empty-card), .hs-immo .hs-section > .hs-empty-card { max-width: var(--hs-container-default); } .hs-immo .hs-empty-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hs-color-accent-soft); color: var(--hs-color-accent); margin-bottom: 1rem; } .hs-immo .hs-empty-card__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); margin: 0 0 0.6rem; color: var(--hs-color-text); } .hs-immo .hs-empty-card__text { color: var(--hs-color-soft); line-height: 1.6; margin: 0 0 1.5rem; max-width: 52ch; } .hs-immo .hs-empty-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } /* Die Buttons liegen hier OHNE .wp-block-button-Wrapper direkt im Flexrow, * daher greifen die generischen Button-Regeln nicht. Hier explizit stylen, * sonst erscheinen sie als rote Flächen ohne lesbaren Text. */ .hs-immo .hs-empty-card__actions .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; background: var(--hs-color-accent); color: var(--hs-color-on-accent); border: 1px solid var(--hs-color-accent); border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; } .hs-immo .hs-empty-card__actions .wp-block-button__link:hover { background: var(--hs-color-accent-hover); transform: translateY(-2px); } /* Zweiter Button als Outline (heller Grund, weinroter Text) */ .hs-immo .hs-empty-card__actions .wp-block-button__link.is-style-outline { background: var(--hs-color-surface); color: var(--hs-color-accent); border-color: var(--hs-color-accent); } .hs-immo .hs-empty-card__actions .wp-block-button__link.is-style-outline:hover { background: var(--hs-color-accent); color: var(--hs-color-on-accent); } .hs-immo .hs-empty-card__trust { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hs-color-border); } .hs-immo .hs-empty-card__trust-item { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--hs-color-soft); font-size: 0.95rem; font-weight: 500; } .hs-immo .hs-empty-card__trust-item svg { color: var(--hs-color-accent); flex: 0 0 auto; } /* --- 7e2. REFERENZ-KARTEN (Beispiel-Referenzen aus dem CPT) --- */ .hs-immo .hs-references-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.25rem, 1rem + 1vw, 2rem); margin-top: 1rem; } .hs-immo .hs-reference-card { background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); overflow: hidden; box-shadow: var(--hs-shadow-card, 0 2px 12px rgba(60,42,33,0.06)); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .hs-immo .hs-reference-card:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-soft, 0 6px 24px rgba(60,42,33,0.10)); } .hs-immo .hs-reference-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; } .hs-immo .hs-reference-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .hs-immo .hs-reference-card__badge { position: absolute; left: 0.85rem; bottom: 0.85rem; background: var(--hs-color-accent); color: var(--hs-color-on-accent); font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; } .hs-immo .hs-reference-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .hs-immo .hs-reference-card__title { font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--hs-color-text); } .hs-immo .hs-reference-card__text { color: var(--hs-color-soft); line-height: 1.6; margin: 0; font-size: 0.95rem; } .hs-immo .hs-reference-card__quote { margin: 0.5rem 0 0; padding: 0.85rem 1rem; background: var(--hs-color-bg); border-left: 3px solid var(--hs-color-accent); border-radius: 0 var(--hs-radius-sm, 8px) var(--hs-radius-sm, 8px) 0; } .hs-immo .hs-reference-card__quote p { margin: 0; font-style: italic; color: var(--hs-color-text); font-size: 0.95rem; } .hs-immo .hs-reference-card__author { display: block; margin-top: 0.5rem; font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--hs-color-accent); } /* Typ: Kontakt-Hero – H1 + Subheadline, kompakter Einstieg ohne leere * Fläche oben. Erste Section auf der Kontaktseite rückt nach oben. */ .hs-immo .hs-contact-hero__title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.12; margin: 0; color: var(--hs-color-text); } .hs-immo .hs-contact-hero__subtitle { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 600; color: var(--hs-color-accent); margin: 0.35rem 0 0.8rem; } .hs-immo .hs-content-contact > .hs-section:first-child, .hs-immo main .hs-section:first-child { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); } /* --- 7c. SECTION-HEADER (einheitliches Muster) --- */ .hs-immo .hs-section__head { text-align: center; margin-bottom: var(--hs-space-sm); max-width: var(--hs-container-text); margin-inline: auto; } .hs-immo .hs-section__head > * { margin-inline: auto; } .hs-immo .hs-section__head .hs-eyebrow { text-align: center; } .hs-immo .hs-section__head h2 { margin-bottom: 0.5rem; text-align: center; } .hs-immo .hs-section__head .hs-section__lead, .hs-immo .hs-section__head p { margin-inline: auto; text-align: center; } /* --- 7d. PORTRAIT Sonja Hertel – vollständig sichtbar, kein harter Crop --- */ .hs-immo .hs-portrait, .hs-immo .hs-portrait img, .hs-immo .hs-portrait-wrap img, .hs-immo .hs-split__media, .hs-immo .hs-intro__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; /* Kopf/Schultern sicher im Bild */ border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-lift); background: var(--hs-color-accent-soft); } .hs-immo .hs-portrait-placeholder { border: none; background: var(--hs-color-accent-soft); aspect-ratio: 4 / 5; border-radius: var(--hs-radius-lg); } /* --- 7e. SPLIT (Text + Bild nebeneinander) --- */ .hs-immo .hs-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; max-width: var(--hs-container-default); margin-inline: auto; padding-inline: var(--hs-gutter); } .hs-immo .hs-split__body h2 { margin-top: 0; } /* Variante mit Bild rechts: Reihenfolge der Grid-Spalten tauschen, damit * Bild-Text-Sektionen abwechslungsreich wirken. Spaltenbreiten gespiegelt * (Text etwas breiter, Bild etwas schmaler – wie die Grundvariante). */ .hs-immo .hs-split--media-right { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } /* --- 7e-bis. SPLIT als native core/columns (editierbar). * Wenn der Split aus wp:columns besteht, übernimmt dessen Flex-Layout die * Anordnung. Diese Regeln spiegeln nur Optik & Abstände der Grid-Variante: * Text vertikal zentriert, Bild mit Rundung + Schatten. */ .hs-immo .hs-split.wp-block-columns { display: flex; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; max-width: var(--hs-container-default); margin-inline: auto; padding-inline: var(--hs-gutter); } .hs-immo .hs-split.wp-block-columns .hs-split__body { flex: 1 1 55%; } .hs-immo .hs-split.wp-block-columns .hs-split__media-col { flex: 1 1 45%; } .hs-immo .hs-split__media-col .wp-block-image, .hs-immo .hs-split__media-col figure { margin: 0; } .hs-immo .hs-split__media-block img, .hs-immo .hs-split__media-col img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-lift); background: var(--hs-color-accent-soft); } @media (max-width: 781px) { .hs-immo .hs-split.wp-block-columns { flex-direction: column; } .hs-immo .hs-split.wp-block-columns .hs-split__body, .hs-immo .hs-split.wp-block-columns .hs-split__media-col { flex: 1 1 100%; width: 100%; } } /* --- 7f. TRUST-BAR (Vertrauenspunkte mit Icons) --- * Kein erzwungenes 4-Spalten-Layout: die WP-Columns würden auf ~134px * quetschen und Wörter zerstückeln. Stattdessen Grid mit Mindestbreite * 260px -> auf Desktop 2x2, auf großen Breiten 4er, mobil 1-spaltig. */ .hs-immo .hs-trust .wp-block-columns { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: stretch; } /* Bei genau 4 Karten: ruhiges, durchgehendes 2×2-Raster, das die volle * Sektionsbreite nutzt – damit es exakt mit den anderen Blöcken (Karten, * Accordion, FAQ) auf derselben Fluchtlinie links und rechts abschließt. */ @media (min-width: 600px) { .hs-immo .hs-trust--count-4 .wp-block-columns { grid-template-columns: repeat(2, 1fr); } } /* FAQ-Liste: gleiche Fluchtlinie wie alle anderen Inhaltsblöcke. */ .hs-immo .hs-faq-list { width: 100%; } /* Bei genau 2 Karten nebeneinander statt unnötig breit. */ @media (min-width: 600px) { .hs-immo .hs-trust--count-2 .wp-block-columns { grid-template-columns: repeat(2, 1fr); } } .hs-immo .hs-trust .wp-block-column { flex: initial !important; width: auto !important; text-align: left; padding: 1.75rem !important; hyphens: none; } .hs-immo .hs-trust .wp-block-column h3 { margin-top: 0; font-size: 1.2rem; hyphens: none; word-break: normal; overflow-wrap: break-word; } .hs-immo .hs-trust .wp-block-column p { hyphens: none; word-break: normal; overflow-wrap: break-word; } /* --- 7f3. ACCORDION (Leistungen-Detailbereiche, ruhig gruppiert) --- */ .hs-immo .hs-accordion-group { max-width: var(--hs-container-default); margin-inline: auto; padding-inline: var(--hs-gutter); display: flex; flex-direction: column; gap: 1rem; box-sizing: border-box; } .hs-immo .hs-accordion { background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); overflow: hidden; } .hs-immo .hs-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font-size: 1.2rem; font-weight: 600; color: var(--hs-color-text); transition: background-color 0.2s ease; } .hs-immo .hs-accordion__summary::-webkit-details-marker { display: none; } .hs-immo .hs-accordion__summary:hover { background: var(--hs-color-bg); } .hs-immo .hs-accordion__title { hyphens: none; word-break: normal; overflow-wrap: normal; } /* Plus-/Minus-Icon (reines CSS, kein Bild) */ .hs-immo .hs-accordion__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; } .hs-immo .hs-accordion__icon::before, .hs-immo .hs-accordion__icon::after { content: ""; position: absolute; background: var(--hs-color-accent); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .hs-immo .hs-accordion__icon::before { top: 9px; left: 0; width: 20px; height: 2px; } .hs-immo .hs-accordion__icon::after { top: 0; left: 9px; width: 2px; height: 20px; } .hs-immo .hs-accordion[open] .hs-accordion__icon::after { transform: scaleY(0); opacity: 0; } /* Body: klarer Abstand zwischen Header und Inhalt (Top-Padding + feine Trennlinie). */ .hs-immo .hs-accordion__body { padding: 1.5rem; border-top: 1px solid var(--hs-color-border); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem 1.5rem; } /* Sanftes Auf-/Zuklappen: Höhe via grid-rows animieren (JS setzt .is-animating). * Ohne JS bleibt das native

-Verhalten unverändert. */ .hs-immo .hs-accordion.is-enhanced > .hs-accordion__body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /*

versteckt Nicht-summary-Inhalt ohne [open] nativ. * Im enhanced-Modus übernimmt das CSS die Sichtbarkeit, damit die * Schließen-Animation läuft (sonst springt der Inhalt sofort weg). */ .hs-immo .hs-accordion.is-enhanced:not([open]) > .hs-accordion__body-wrap { content-visibility: visible; } .hs-immo .hs-accordion.is-enhanced[open] > .hs-accordion__body-wrap { grid-template-rows: 1fr; } .hs-immo .hs-accordion.is-enhanced > .hs-accordion__body-wrap > .hs-accordion__body { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; } .hs-immo .hs-accordion.is-enhanced[open] > .hs-accordion__body-wrap > .hs-accordion__body { opacity: 1; transform: none; } .hs-immo .hs-accordion__item-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--hs-color-text); hyphens: none; word-break: normal; overflow-wrap: normal; } .hs-immo .hs-accordion__item-text { margin: 0; color: var(--hs-color-soft); line-height: 1.6; font-size: 0.95rem; } @media (max-width: 600px) { .hs-immo .hs-accordion__summary { padding: 1rem 1.25rem; font-size: 1.1rem; } .hs-immo .hs-accordion__body { padding: 1.25rem; grid-template-columns: 1fr; } } /* --- 7f2. PROZESS-SCHRITTE (Ablauf „01/02/03/04") --- * Vier Schritte stehen auf Desktop in EINER Zeile (4 gleiche Spalten), * brechen darunter kontrolliert auf 2x2 und dann 1 Spalte. So bleibt der * Ablauf als Reihe lesbar, ohne dass eine einzelne Spalte „abfällt". */ .hs-immo .hs-process, .hs-immo .wp-block-columns.hs-process.is-layout-flex, .hs-immo .wp-block-columns:has(.hs-step-number) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.75rem 2rem !important; align-items: start; max-width: var(--hs-container-default) !important; margin-inline: auto !important; } .hs-immo .hs-process > .wp-block-column, .hs-immo .wp-block-columns:has(.hs-step-number) > .wp-block-column { flex: initial !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } .hs-immo .hs-step-number { margin-bottom: 0.25rem; } /* Schritt-Titel: dürfen umbrechen statt zu überlappen (kein Zerstückeln). */ .hs-immo .hs-process h3, .hs-immo .hs-process p, .hs-immo .wp-block-columns:has(.hs-step-number) h3, .hs-immo .wp-block-columns:has(.hs-step-number) h4, .hs-immo .wp-block-columns:has(.hs-step-number) p { hyphens: none; word-break: normal; overflow-wrap: break-word; } /* Tablet: 2x2 */ @media (max-width: 900px) { .hs-immo .hs-process, .hs-immo .wp-block-columns.hs-process.is-layout-flex, .hs-immo .wp-block-columns:has(.hs-step-number) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Mobil: gestapelt */ @media (max-width: 560px) { .hs-immo .hs-process, .hs-immo .wp-block-columns.hs-process.is-layout-flex, .hs-immo .wp-block-columns:has(.hs-step-number) { grid-template-columns: 1fr !important; } } /* --- 7g. CTA-BAND (Weinrot, hoher Kontrast) --- */ .hs-immo .hs-cta-band { background: linear-gradient(135deg, var(--hs-color-accent) 0%, #6f1d2b 100%); color: var(--hs-color-on-accent); border-radius: var(--hs-radius-lg); padding: clamp(2.5rem, 2rem + 3vw, 4rem); /* einheitlicher Innenabstand erzwingen (sonst nullt WP das has-global-padding) */ padding-inline: clamp(1.5rem, 1rem + 4vw, 4rem) !important; text-align: center; max-width: var(--hs-container-default); margin-inline: auto; } .hs-immo .hs-cta-band h2 { color: var(--hs-color-on-accent); } /* Text und Buttons teilen dieselbe Lesebreite und Achse – bündig untereinander */ .hs-immo .hs-cta-band h2, .hs-immo .hs-cta-band p { max-width: 34rem; margin-inline: auto; } .hs-immo .hs-cta-band p { color: #f3dedb; } .hs-immo .hs-cta-band .wp-block-buttons { justify-content: center; margin-top: 1.5rem; max-width: 34rem; margin-inline: auto; } /* --- 7h. CONTACT-STRIP (nie leer, ruhige Optik) --- */ .hs-immo .hs-contact-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); background: var(--hs-color-accent-soft); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); max-width: var(--hs-container-default); margin-inline: auto; } .hs-immo .hs-contact-strip__body { flex: 1 1 22rem; } .hs-immo .hs-contact-strip__heading { font-size: 1.5rem; margin: 0 0 0.5rem; color: var(--hs-color-text); } .hs-immo .hs-contact-strip__text { margin: 0 0 1.25rem; color: var(--hs-color-soft); } .hs-immo .hs-contact-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; } .hs-immo .hs-contact-strip__item { display: flex; flex-direction: column; } .hs-immo .hs-contact-strip__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-color-accent); } .hs-immo .hs-contact-strip__item a, .hs-immo .hs-contact-strip__address { color: var(--hs-color-text); } .hs-immo .hs-contact-strip__action { flex: 0 0 auto; } /* --- 7i. EMPTY-STATE (einladend, nicht wie Fehler) --- */ .hs-immo .hs-listing-grid__empty, .hs-immo .hs-empty-state { max-width: var(--hs-container-default); margin: 0 auto; padding: clamp(2.5rem, 2rem + 3vw, 3.5rem) clamp(1.75rem, 1.25rem + 3vw, 3rem); text-align: left; background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-card); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .hs-immo .hs-listing-grid__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 0.5rem; border-radius: 50%; background: var(--hs-color-accent-soft); color: var(--hs-color-accent); } .hs-immo .hs-listing-grid__empty-icon svg { width: 30px; height: 30px; } .hs-immo .hs-listing-grid__empty-text { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.6; color: var(--hs-color-soft); max-width: 52ch; } .hs-immo .hs-listing-grid__empty-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; margin: 0; } /* --- 7j. FORMULAR (einheitlich, AA) --- */ .hs-immo .hs-contact-form { box-sizing: border-box; } .hs-immo input, .hs-immo textarea, .hs-immo select, .hs-immo .hs-contact-form input, .hs-immo .hs-contact-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; border-radius: var(--hs-radius-sm); border: 1px solid var(--hs-color-border); padding: 0.85rem 1rem; font-size: 1rem; font-family: inherit; color: var(--hs-color-text); background: var(--hs-color-surface); } .hs-immo .hs-contact-form__field { margin-bottom: 1.25rem; } .hs-immo .hs-contact-form label { font-weight: 600; display: block; margin-bottom: 0.4rem; } .hs-immo .hs-contact-form__field--checkbox, .hs-immo .hs-contact-form__consent { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; } .hs-immo .hs-contact-form input[type="checkbox"] { width: auto; min-width: 18px; max-width: 18px; margin-top: 0.2rem; flex: none; } .hs-immo .hs-contact-form__field--checkbox label { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 400; } /* --- 7k. FOOTER (dunkel, AA-Text) --- */ .hs-immo .hs-footer { background: var(--hs-color-footer-bg); color: var(--hs-color-footer-text); padding-block: var(--hs-space-sm); } .hs-immo .hs-footer h3, .hs-immo .hs-footer .wp-block-site-title { color: var(--hs-color-on-accent); } .hs-immo .hs-footer p, .hs-immo .hs-footer li, .hs-immo .hs-footer .wp-block-navigation a { color: var(--hs-color-footer-text); } .hs-immo .hs-footer a { color: var(--hs-color-footer-text); text-decoration: none; } .hs-immo .hs-footer a:hover { color: #ffffff; text-decoration: underline; } .hs-immo .hs-footer__logo { display: inline-block; background: #fff; border-radius: var(--hs-radius-md); padding: 1rem 1.25rem; margin-bottom: 1rem; } /* Footer-Spalten: ausgewogenere Verteilung. Der alignwide-Container ist sehr * breit (1400px), wodurch die drei Spalten sonst weit auseinandergezogen * wirken. Wir begrenzen die Inhaltsbreite und verteilen gleichmäßig. */ .hs-immo .hs-footer__cols { max-width: var(--hs-container-default); margin-inline: auto; gap: clamp(2rem, 1.5rem + 3vw, 4rem) !important; align-items: start; } .hs-immo .hs-footer__cols .hs-footer__col { flex-basis: auto !important; flex: 1 1 0 !important; } /* Die Logo-Spalte etwas breiter als die beiden Textspalten. */ .hs-immo .hs-footer__cols .hs-footer__col:first-child { flex: 1.3 1 0 !important; } /* Mobil: Footer-Spalten untereinander stapeln. Ohne diese Regel zwang * flex:1 1 0 die drei Spalten auch auf schmalen Schirmen in eine Reihe – * dadurch brach z. B. die E-Mail-Adresse senkrecht Zeichen für Zeichen um. */ @media (max-width: 781px) { .hs-immo .hs-footer__cols { display: flex !important; flex-direction: column !important; gap: 2rem !important; } .hs-immo .hs-footer__cols .hs-footer__col, .hs-immo .hs-footer__cols .hs-footer__col:first-child { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } .hs-immo .hs-footer__logo img { display: block; width: 100%; max-width: 140px; height: auto; } /* Großes Footer-Logo (vollständiges Logo statt Wappen). */ .hs-immo .hs-footer__logo--large img { max-width: 220px; } /* Kleines rotes Herz-Icon im Footer-Text – identisch zum Hero. */ .hs-immo .hs-footer__heart-icon { display: inline-block; width: 0.92em; height: 0.92em; margin: 0 0.06em; vertical-align: baseline; position: relative; top: 0.08em; } .hs-immo .hs-footer__heart-icon svg { width: 100%; height: 100%; display: block; fill: #e63946; } .hs-immo .hs-footer__tagline { line-height: 1.55; } .hs-immo .hs-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.95rem; } .hs-immo .hs-footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; } .hs-immo .hs-footer__contact li > span, .hs-immo .hs-footer__contact li > a { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .hs-immo .hs-footer__contact .hs-icon { color: var(--hs-color-accent-soft); margin-top: 0.1rem; flex: 0 0 auto; } .hs-immo .hs-footer__bottom { margin-top: var(--hs-space-sm); padding-top: 1.5rem; border-top: 1px solid rgba(255,248,239,0.14); font-size: 0.875rem; } /* Website-Credit im Footer auf hellem Weinrot lesbar halten (erbt sonst eine * dunkle Schriftfarbe aus dem Block-Standard). */ .hs-immo .hs-footer .hs-site-credit, .hs-immo .hs-footer .hs-site-credit a { color: var(--hs-color-footer-text); opacity: 0.9; } .hs-immo .hs-footer .hs-site-credit a:hover { color: #ffffff; } /* --- 7l. HEADER --- */ /* Fixierter Header: läuft beim Scrollen zuverlässig mit – unabhängig von * overflow-Eigenschaften der Vorfahren (position:sticky bricht, sobald ein * Vorfahre overflow gesetzt hat; fixed ist hier robuster). Der Body bekommt * per JS einen passenden padding-top, damit der Inhalt nicht darunter rutscht. */ .hs-immo .wp-block-template-part:has(> .hs-header), .hs-immo header.wp-block-template-part:first-child, .hs-immo .wp-block-template-part.hs-header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .hs-immo .hs-header { background: rgba(250, 246, 243, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(45,17,22,0.06); transition: box-shadow 0.2s ease, background-color 0.2s ease; } /* Etwas kräftigerer Schatten, sobald gescrollt wird (per JS-Klasse). */ .hs-immo .hs-header.is-scrolled { box-shadow: 0 6px 24px rgba(45,17,22,0.10); background: rgba(250, 246, 243, 0.97); } /* Bei geöffnetem Mobil-Menü den backdrop-filter abschalten: Er macht den * Header sonst zum Containing-Block für das position:fixed-Overlay, das * dadurch nur Header-Höhe bekäme und abgeschnitten wirkt. */ .hs-immo .hs-header:has(.wp-block-navigation__responsive-container.is-menu-open), .hs-immo .hs-header.hs-menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Eingeloggt: WordPress-Adminbar steht über dem fixierten Header. */ .admin-bar .hs-immo .wp-block-template-part:has(> .hs-header), .admin-bar .hs-immo .wp-block-template-part.hs-header-fixed, body.admin-bar .hs-immo header.wp-block-template-part:first-child { top: 32px; } @media (max-width: 782px) { .admin-bar .hs-immo .wp-block-template-part:has(> .hs-header), .admin-bar .hs-immo .wp-block-template-part.hs-header-fixed, body.admin-bar .hs-immo header.wp-block-template-part:first-child { top: 46px; } } /* Globales Padding des

neutralisieren – nur __inner gibt den * Gutter vor, damit Logo/CTA exakt auf der Content-Fluchtlinie sitzen. */ .hs-immo .hs-header.has-global-padding, .hs-immo header.hs-header { padding-inline: 0; } .hs-immo .hs-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: nowrap; max-width: var(--hs-container-default); margin-inline: auto; padding-inline: var(--hs-gutter); } .hs-immo .hs-header__logo { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; } .hs-immo .hs-header__logo img, .hs-immo .hs-header__logo svg { height: clamp(40px, 3vw, 52px); width: auto; display: block; } .hs-immo .hs-header .wp-block-navigation a { color: var(--hs-color-text); font-weight: 500; } .hs-immo .hs-header .wp-block-navigation a:hover { color: var(--hs-color-accent); } /* === Desktop-Flyout für Untermenüs ================================== */ @media (min-width: 782px) { .hs-immo .hs-header .wp-block-navigation .has-child { position: relative; } /* WordPress' eigenen Submenu-Pfeil (SVG) als Indikator nutzen und drehen. * Kein zusätzlicher CSS-Pfeil -> verhindert die doppelten Pfeile. */ .hs-immo .hs-header .wp-block-navigation .has-child .wp-block-navigation__submenu-icon { transition: transform 0.2s ease; margin-left: 0.3rem; } .hs-immo .hs-header .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-icon, .hs-immo .hs-header .wp-block-navigation .has-child:focus-within .wp-block-navigation__submenu-icon { transform: rotate(180deg); } /* Flyout-Panel: WordPress' Defaults (height/width/opacity:0) gezielt * überschreiben und als weiße Karte unter dem Elternpunkt positionieren. */ .hs-immo .hs-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; transform: translateY(8px) !important; width: max-content !important; min-width: 220px !important; height: auto !important; margin: 0 !important; padding: 0.5rem !important; background: var(--hs-color-surface) !important; border: 1px solid var(--hs-color-border) !important; border-radius: var(--hs-radius-md) !important; box-shadow: 0 14px 40px rgba(45,17,22,0.16) !important; opacity: 0 !important; visibility: hidden !important; overflow: visible !important; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important; z-index: 100 !important; } /* Unsichtbare Hover-Brücke zwischen Elternpunkt und Panel. */ .hs-immo .hs-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; top: -0.7rem; left: 0; right: 0; height: 0.7rem; } /* Einblenden bei Hover/Fokus. */ .hs-immo .hs-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .hs-immo .hs-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: translateY(0) !important; } /* Untermenü-Einträge als ruhige, vertikale Liste. */ .hs-immo .hs-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block !important; width: 100% !important; } .hs-immo .hs-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 0.55rem 0.85rem !important; border-radius: var(--hs-radius-sm); white-space: nowrap; color: var(--hs-color-text); transition: background-color 0.15s ease, color 0.15s ease; } .hs-immo .hs-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--hs-color-accent-soft); color: var(--hs-color-accent); } /* WordPress rendert im Submenu für jeden Eintrag KEINEN weiteren Pfeil – * sicherheitshalber etwaige verschachtelte Icons im Panel ausblenden. */ .hs-immo .hs-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none; } } @media (prefers-reduced-motion: reduce) { .hs-immo .hs-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { transition: none !important; } .hs-immo .hs-header .wp-block-navigation .has-child .wp-block-navigation__submenu-icon { transition: none; } } /* Sticky Telefon-Leiste (mobil) */ .hs-immo .hs-phonebar, .hs-phonebar { display: none; } /* ------------------------------------------------------------------ * * 8. SEITEN-SPEZIFIKA * ------------------------------------------------------------------ */ /* Rechtliche Seiten – schmaler Lesecontainer */ .hs-immo .hs-legal .wp-block-post-content, .hs-immo .hs-legal > .wp-block-post-title { max-width: var(--hs-container-text); margin-inline: auto; } .hs-immo .hs-legal .wp-block-post-content > * { max-width: 100%; } .hs-immo .hs-legal p, .hs-immo .hs-legal li { font-size: 1.0625rem; line-height: 1.75; max-width: 100%; } .hs-immo .hs-legal h2 { margin-top: 2.5rem; } .hs-immo .hs-legal h3 { margin-top: 1.75rem; } /* 404 */ .hs-immo .hs-404, .hs-immo .error-404 { max-width: var(--hs-container-text); margin-inline: auto; text-align: center; padding-block: var(--hs-space-md); } .hs-immo .hs-404 .wp-block-buttons { justify-content: center; } /* Objekt-Listing-Grid: ruhige Abstände. * Das Grid liegt auf __list (nicht auf dem Wrapper!), sonst landet der * Empty-State in einer schmalen Grid-Spalte statt zentriert. */ .hs-immo .hs-listing-grid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.25rem, 1rem + 1vw, 2rem); } .hs-immo .hs-listing-grid { display: block; } /* Detailseite (Exposé) – Key-Facts ruhig */ .hs-immo .hs-listing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .hs-immo .hs-listing-facts__item { background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); padding: 1.1rem 1.25rem; } /* ------------------------------------------------------------------ * * 9. RESPONSIVE * ------------------------------------------------------------------ */ /* --- Tablet (<= 1024px) --- */ @media (max-width: 1024px) { .hs-immo .hs-split { gap: 2.5rem; } } /* --- Tablet schmal (<= 781px): stapeln --- */ @media (max-width: 781px) { .hs-immo .hs-split { grid-template-columns: 1fr; gap: 1.75rem; } .hs-immo .hs-portrait, .hs-immo .hs-portrait-wrap, .hs-immo .hs-split__media { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; } /* Columns sauber stapeln, kein Overflow durch gap/margin */ .hs-immo .hs-section .wp-block-columns { flex-direction: column; gap: 1.25rem; max-width: 100%; } .hs-immo .hs-section .wp-block-column { flex-basis: 100% !important; width: 100%; max-width: 100%; margin: 0; } .hs-immo .hs-contact-strip { flex-direction: column; align-items: flex-start; } /* Buttons volle Breite, gut tippbar */ .hs-immo .wp-block-button { width: 100%; } .hs-immo .wp-block-button__link, .hs-immo .hs-contact-strip__button { width: 100%; min-height: 50px; } /* Header: Logo kompakter, Telefon-CTA aus (Sticky-Bar übernimmt) */ .hs-immo .hs-header__logo img, .hs-immo .hs-header__logo svg { height: 40px; } .hs-immo .hs-header__cta { display: none; } /* Burger-Overlay: Menüpunkte linksbündig mit Innenabstand. * Die Navigation steht auf justifyContent:"right" (gut für Desktop), * im geöffneten Vollbild-Overlay drückt das die gestapelten Punkte aber * an den rechten Rand, wo sie abgeschnitten werden. Hier auf flex-start * zurückholen und gleichmäßigen Abstand geben. */ .hs-immo .wp-block-navigation__responsive-container.is-menu-open { /* WICHTIG: Der fixierte Header trägt backdrop-filter, was ihn zum * Containing-Block für position:fixed-Kinder macht. Dadurch würde das * Overlay nur die Höhe des Headers einnehmen und abgeschnitten wirken. * Mit !important + Viewport-Maßen erzwingen wir echtes Vollbild. */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; overflow-y: auto !important; z-index: 100000 !important; padding: clamp(1.25rem, 5vw, 2rem) !important; } /* Adminbar-Offset im eingeloggten Zustand, damit das Overlay nicht unter * der WordPress-Leiste beginnt. */ .admin-bar .hs-immo .wp-block-navigation__responsive-container.is-menu-open { top: 46px !important; height: calc(100dvh - 46px) !important; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { text-align: left; } /* Burger-Menü hochwertiger gestalten: großzügige Tippflächen, klare * Hierarchie, dezente Trennlinien zwischen den Hauptpunkten. */ .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--hs-color-border); } .hs-immo .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:last-child { border-bottom: 0; } /* Hauptpunkte: größer, kräftiger, mehr Luft. */ .hs-immo .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 1.3rem !important; font-weight: 600; color: var(--hs-color-text); padding: 0.9rem 0 !important; width: 100%; } /* Elternpunkte mit Untermenü: Pfeil rechts ausrichten. */ .hs-immo .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content { display: flex !important; align-items: center; justify-content: space-between; width: 100%; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { margin-left: auto; color: var(--hs-color-accent); } /* Untermenüs: eingerückt unter dem Elternpunkt, dezente Akzent-Linie. */ .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: block !important; opacity: 1 !important; visibility: visible !important; position: static !important; transform: none !important; width: 100% !important; height: auto !important; margin: 0 0 0.75rem 0.25rem !important; padding: 0.25rem 0 0.25rem 1rem !important; border: 0 !important; border-left: 2px solid var(--hs-color-accent) !important; box-shadow: none !important; background: transparent !important; min-width: 0 !important; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before, .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::after { display: none !important; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0 !important; } .hs-immo .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.55rem 0 !important; font-size: 1.05rem !important; font-weight: 400; color: var(--hs-color-soft); } /* Sticky Telefon-Leiste unten */ .hs-phonebar { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--hs-color-accent); box-shadow: 0 -4px 16px rgba(58,22,28,0.2); } .hs-phonebar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.85rem; color: var(--hs-color-on-accent); font-weight: 600; text-decoration: none; } .hs-phonebar .hs-icon { color: var(--hs-color-on-accent); } /* Platz für die fixe Leiste schaffen */ .hs-immo .hs-footer { padding-bottom: calc(var(--hs-space-sm) + 56px); } /* Hero nicht zu hoch */ .hs-immo .hs-hero:has(.hs-hero__inner), .hs-immo .hs-hero--slider { min-height: auto; } .hs-immo .hs-hero__content { max-width: 100%; } /* Hero mobil: spürbarer Seitenabstand, damit der Text nicht am Rand klebt, * und etwas kompaktere vertikale Polsterung. */ .hs-immo .hs-hero__inner { padding-inline: 1.5rem !important; padding-block: clamp(2.5rem, 2rem + 6vw, 4rem) !important; } /* Überschrift mobil etwas kleiner und mit Silbentrennung, damit lange * Wörter wie „Kompetenz" nicht über die Kante ragen. */ .hs-immo .hs-hero h1 { max-width: 100%; overflow-wrap: break-word; hyphens: auto; } /* Volle Textbreite */ .hs-immo p, .hs-immo li { max-width: 100%; } } /* --- Mobile (<= 480px): Feinschliff --- */ @media (max-width: 480px) { .hs-immo .hs-header__logo img, .hs-immo .hs-header__logo svg { height: 36px; } .hs-immo h1 { font-size: clamp(2rem, 8vw, 2.6rem); } .hs-immo .hs-listing-grid__list { grid-template-columns: 1fr; } /* Card-Padding mobil 20px (Desktop 24px) */ .hs-immo .hs-card__body, .hs-immo .hs-area-card__body, .hs-immo .hs-card-feature__body, .hs-immo .hs-trust .wp-block-column { padding: 1.25rem !important; } } /* --- Reduzierte Bewegung respektieren --- */ /* ------------------------------------------------------------------ * * 10. SANFTE EINBLEND-ANIMATIONEN (Scroll-Reveal, progressive enhancement) * JS vergibt .hs-reveal an Sektionen/Karten und schaltet bei Sichtbarkeit * .is-visible. Ohne JS bleibt alles sofort sichtbar (kein FOUC). * ------------------------------------------------------------------ */ .hs-immo .hs-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .hs-immo .hs-reveal.is-visible { opacity: 1; transform: none; } /* Gestaffeltes Erscheinen von Karten/Items innerhalb einer Sektion */ .hs-immo .hs-reveal.is-visible .hs-card, .hs-immo .hs-reveal.is-visible .hs-area-card, .hs-immo .hs-reveal.is-visible .hs-trust .wp-block-column, .hs-immo .hs-reveal.is-visible .hs-process__step { animation: hs-rise-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .hs-immo .hs-reveal.is-visible :nth-child(2) > .hs-card, .hs-immo .hs-reveal.is-visible .hs-card:nth-child(2) { animation-delay: 0.08s; } .hs-immo .hs-reveal.is-visible .hs-card:nth-child(3) { animation-delay: 0.16s; } .hs-immo .hs-reveal.is-visible .hs-card:nth-child(4) { animation-delay: 0.24s; } @keyframes hs-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ * * 10b. WAPPEN-ÜBERGANG (hs-crest) – Emblem zwischen Hero und Vorstellung. * Großzügiger Weißraum, feine Zierlinien links/rechts, Wappen mittig. * Beim Hereinscrollen: Wappen skaliert sanft auf und steigt leicht herein, * die Zierlinien fahren aus der Mitte aus, ein feiner Lichtschimmer zieht * einmalig über das Emblem. Subtiler Dauer-Schwebeeffekt danach. * ------------------------------------------------------------------ */ .hs-immo .hs-crest { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); background: transparent; overflow: hidden; } .hs-immo .hs-crest__inner { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 0.5rem + 3vw, 3rem); max-width: 760px; margin-inline: auto; padding-inline: var(--hs-gutter, 1.25rem); } /* Feine Zierlinien – Verlauf, der zum Wappen hin kräftiger wird. */ .hs-immo .hs-crest__rule { flex: 1 1 auto; height: 1px; max-width: 220px; transform: scaleX(0); transform-origin: var(--hs-rule-origin, center); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .hs-immo .hs-crest__rule--left { --hs-rule-origin: right; background: linear-gradient(90deg, transparent, var(--hs-color-accent, #96293a)); opacity: 0.45; } .hs-immo .hs-crest__rule--right { --hs-rule-origin: left; background: linear-gradient(270deg, transparent, var(--hs-color-accent, #96293a)); opacity: 0.45; } /* Wappen-Träger – sanfter Hof + Schwebe nach dem Erscheinen. */ .hs-immo .hs-crest__badge { position: relative; display: inline-flex; flex: 0 0 auto; padding: 0.4rem; border-radius: 50%; opacity: 0; transform: translateY(16px) scale(0.92); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; } .hs-immo .hs-crest__badge::before { /* Weicher, runder Lichthof hinter dem Wappen. */ content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient( closest-side, rgba(150, 41, 58, 0.10), transparent 72% ); z-index: 0; } .hs-immo .hs-crest__img { position: relative; z-index: 1; display: block; width: clamp(76px, 60px + 5vw, 116px); height: auto; filter: drop-shadow(0 8px 20px rgba(60, 16, 24, 0.18)); } /* Lichtschimmer, der einmalig über das Wappen zieht (nach dem Reveal). */ .hs-immo .hs-crest__badge::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: linear-gradient( 115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62% ); background-size: 250% 250%; background-position: 120% 0; opacity: 0; pointer-events: none; } /* --- Sichtbar-Zustand (vom Reveal-JS gesetzt) --- */ .hs-immo .hs-crest.is-visible .hs-crest__rule { transform: scaleX(1); } .hs-immo .hs-crest.is-visible .hs-crest__badge { opacity: 1; transform: none; animation: hs-crest-float 6s ease-in-out 1.1s infinite; } .hs-immo .hs-crest.is-visible .hs-crest__badge::after { animation: hs-crest-sheen 1.4s ease-out 0.5s 1 both; } @keyframes hs-crest-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes hs-crest-sheen { 0% { opacity: 0; background-position: 120% 0; } 18% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } } /* --- Reduzierte Bewegung respektieren --- */ @media (prefers-reduced-motion: reduce) { .hs-immo * { transition: none !important; animation: none !important; } .hs-immo .hs-card:hover, .hs-immo .wp-block-button__link:hover { transform: none !important; } /* Reveals sofort sichtbar – nie unsichtbar steckenbleiben */ .hs-immo .hs-reveal { opacity: 1 !important; transform: none !important; } /* Wappen-Übergang ohne Bewegung sofort vollständig zeigen. */ .hs-immo .hs-crest__badge { opacity: 1 !important; transform: none !important; } .hs-immo .hs-crest__rule { transform: scaleX(1) !important; } .hs-immo .hs-crest__badge::after { display: none !important; } /* Ausnahme: Der Hero-Bildwechsel ist eine sehr langsame, ruhige * Überblendung ohne Bewegung (nur Opazität). Sie bleibt erlaubt, damit * der Slider auch bei aktivierter Systemeinstellung „Bewegung reduzieren“ * (häufig am Desktop) sichtbar wechselt. */ .hs-immo .hs-hero--slider .hs-hero__slide { animation-name: hs-hero-fade !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; } .hs-immo .hs-accordion.is-enhanced > .hs-accordion__body-wrap { transition: none !important; } } /* ===================================================================== * MOBILE SEITEN- & SEKTIONSABSTÄNDE – VEREINHEITLICHT (<= 600px) * Ein einheitlicher vertikaler Rhythmus für alle Seiten und Hero-Typen. * Vorher: Hero-Top 32/44/72, Hero-Bottom 16/24/72, Sections 48/72 gemischt. * Nachher: Hero-Top 40, Hero-Bottom 24, Section 48, einheitlich. * Spät platziert -> überschreibt vorherige clamp-Werte ohne !important-Flut. * ===================================================================== */ @media (max-width: 600px) { /* Alle Hero-Typen: gleicher oberer/unterer Abstand */ .hs-immo .hs-page-hero { padding-top: 40px; padding-bottom: 24px; } .hs-immo .hs-page-hero--legal { padding-top: 40px; padding-bottom: 16px; } .hs-immo .hs-pagehead__inner { padding-top: 40px; padding-bottom: 40px; } /* Erste Section / Hero direkt unter dem Header: einheitlicher Top-Gap */ .hs-immo main .hs-section:first-child, .hs-immo .hs-content-contact > .hs-section:first-child { padding-top: 40px; } /* Kontakt-Hero (Split) bündig zum Header wie die anderen Heros */ .hs-immo main > .hs-section:first-child:has(.hs-split) { padding-top: 40px; } /* Sektions-Rhythmus: einheitlich 48px, kein Sprung auf 72 */ .hs-immo .hs-section { padding-block: 48px; } .hs-immo .hs-section--sm { padding-block: 32px; } .hs-immo .hs-section--lg { padding-block: 56px; } /* aufeinanderfolgende Sektionen kein doppelter Abstand */ .hs-immo .hs-section + .hs-section { padding-top: 0; } /* Unterer Seitenabschluss vor dem Footer einheitlich */ .hs-immo > main, .hs-immo main.wp-block-group { padding-bottom: 48px; } /* Empty-Card-Abstand zum Hero einheitlich */ .hs-immo .hs-section:has(> .hs-empty-card) { padding-top: 8px; } } /* === Google-Bewertungen ============================================== */ /* Sterne */ .hs-immo .hs-stars { display: inline-flex; gap: 0.1em; line-height: 1; } .hs-immo .hs-star { color: #e6c200; font-size: 1.05em; } .hs-immo .hs-star.is-half { position: relative; color: var(--hs-color-border); } .hs-immo .hs-star.is-half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #e6c200; } .hs-immo .hs-star:not(.is-full):not(.is-half) { color: var(--hs-color-border); } /* Bewertungs-Sektion */ .hs-immo .hs-reviews { max-width: var(--hs-container-default); margin-inline: auto; width: 100%; box-sizing: border-box; } .hs-immo .hs-reviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); background: var(--hs-color-surface); box-shadow: var(--hs-shadow-card); } .hs-immo .hs-reviews__score { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .hs-immo .hs-reviews__rating-num { font-size: 1.8rem; font-weight: 700; color: var(--hs-color-accent); line-height: 1; } .hs-immo .hs-reviews__count { color: var(--hs-color-soft); font-size: 0.95rem; } .hs-immo .hs-reviews__google-link { color: var(--hs-color-accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .hs-immo .hs-reviews__google-link:hover { text-decoration: underline; } /* Karten-Grid */ .hs-immo .hs-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .hs-immo .hs-review-card { margin: 0; padding: 1.25rem 1.35rem; background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); box-shadow: var(--hs-shadow-card); display: flex; flex-direction: column; gap: 0.7rem; } .hs-immo .hs-review-card__top { display: flex; align-items: center; gap: 0.7rem; } .hs-immo .hs-review-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .hs-immo .hs-review-card__avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--hs-color-accent-soft); color: var(--hs-color-accent); font-weight: 700; } .hs-immo .hs-review-card__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .hs-immo .hs-review-card__author { font-weight: 600; color: var(--hs-color-text); } .hs-immo .hs-review-card__date { font-size: 0.82rem; color: var(--hs-color-soft); } .hs-immo .hs-review-card__glogo { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #4285F4; background: #fff; border: 1px solid var(--hs-color-border); font-family: Arial, sans-serif; } .hs-immo .hs-review-card__text { margin: 0; color: var(--hs-color-text); font-size: 0.96rem; line-height: 1.55; } /* Hero-Rating-Badge */ .hs-immo .hs-rating-badge { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 0.4rem 0.85rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--hs-radius-pill); text-decoration: none; backdrop-filter: blur(4px); } .hs-immo .hs-rating-badge__num { font-weight: 700; color: #fff; } .hs-immo .hs-rating-badge .hs-stars { font-size: 0.95em; } .hs-immo .hs-rating-badge__count { color: rgba(255,255,255,0.92); font-size: 0.85rem; } .hs-immo .hs-rating-badge:hover { background: rgba(255,255,255,0.2); } /* === Cookie-/Consent-Banner ========================================== */ .hs-cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999; max-width: 960px; margin-inline: auto; background: var(--hs-color-surface, #fff); border: 1px solid var(--hs-color-border, #ecdfdc); border-radius: var(--hs-radius-lg, 22px); box-shadow: 0 12px 40px rgba(45,17,22,0.22); padding: 1.5rem 1.75rem; } .hs-cookie[hidden] { display: none; } .hs-cookie__inner { display: flex; flex-direction: column; gap: 1.1rem; } .hs-cookie__content { min-width: 0; } .hs-cookie__title { margin: 0 0 0.35rem; font-weight: 700; color: var(--hs-color-text, #3a2328); font-size: 1.05rem; } .hs-cookie__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--hs-color-soft, #6e5359); max-width: 70ch; } .hs-cookie__text a { color: var(--hs-color-accent, #96293A); } .hs-cookie__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; } .hs-cookie__btn { cursor: pointer; border-radius: var(--hs-radius-pill, 999px); padding: 0.6rem 1.25rem; font-size: 0.92rem; font-weight: 600; border: 1px solid var(--hs-color-accent, #96293A); transition: background .15s, color .15s; } /* Beide Optionen optisch gleichrangig (kein „Dark Pattern“). */ .hs-cookie__btn--decline { background: transparent; color: var(--hs-color-accent, #96293A); } .hs-cookie__btn--decline:hover { background: var(--hs-color-accent-soft, #ead7d4); } .hs-cookie__btn--accept { background: var(--hs-color-accent, #96293A); color: var(--hs-color-on-accent, #fff8ef); } .hs-cookie__btn--accept:hover { background: #7c1f30; } .hs-cookie__btn:focus-visible { outline: 2px solid var(--hs-color-accent, #96293A); outline-offset: 2px; } /* „Cookie-Einstellungen“ als fester Link in der Footer-Zeile (neben * Impressum/Datenschutz). Erbt die Footer-Link-Optik; kein schwebender Button. */ .hs-immo .hs-cookie-settings-link { cursor: pointer; } @media (max-width: 600px) { .hs-cookie__actions { width: 100%; } .hs-cookie__btn { flex: 1 1 auto; text-align: center; } } /* === FAQ-Aufklapper: sanfte Animation (analog Akkordeon) ============= */ /* Box-Styling der FAQ-Karten: einheitlich, unabhängig von inline-Styles. * (Die Leistungsseite hatte Padding über Inline-Styles, die Objektseiten * nicht – dadurch wirkten Letztere flach. Hier zentral lösen.) */ .hs-immo details.hs-card { background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-md); padding: 1.15rem 1.4rem; margin-bottom: 0.9rem; box-shadow: var(--hs-shadow-card); } .hs-immo details.hs-card:last-child { margin-bottom: 0; } /* Summary: Pfeil-Marker statt nativem Dreieck, klickbar, mit Hover. */ .hs-immo details.hs-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--hs-color-text); position: relative; } .hs-immo details.hs-card > summary::-webkit-details-marker { display: none; } /* Chevron als reines CSS-Element rechts. */ .hs-immo details.hs-card > summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-right: 2px solid var(--hs-color-accent); border-bottom: 2px solid var(--hs-color-accent); transform: rotate(45deg); transform-origin: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-right: 0.2rem; } .hs-immo details.hs-card[open] > summary::after { transform: rotate(-135deg); } .hs-immo details.hs-card > summary:hover { color: var(--hs-color-accent); } /* Sanftes Auf-/Zuklappen über grid-template-rows (nur im enhanced-Modus). */ .hs-immo details.hs-card.is-faq-enhanced > .hs-faq__body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .hs-immo details.hs-card.is-faq-enhanced:not([open]) > .hs-faq__body-wrap { content-visibility: visible; } .hs-immo details.hs-card.is-faq-enhanced[open] > .hs-faq__body-wrap { grid-template-rows: 1fr; } .hs-immo details.hs-card.is-faq-enhanced > .hs-faq__body-wrap > .hs-faq__body { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; } .hs-immo details.hs-card.is-faq-enhanced[open] > .hs-faq__body-wrap > .hs-faq__body { opacity: 1; transform: none; } /* Etwas Luft zwischen Frage und Antwort. */ .hs-immo details.hs-card.is-faq-enhanced > .hs-faq__body-wrap > .hs-faq__body { padding-top: 0.85rem; } @media (prefers-reduced-motion: reduce) { .hs-immo details.hs-card.is-faq-enhanced > .hs-faq__body-wrap, .hs-immo details.hs-card.is-faq-enhanced > .hs-faq__body-wrap > .hs-faq__body, .hs-immo details.hs-card > summary::after { transition: none; } } /* === Vollbreites Unterseiten-Banner (Bild oben, Breadcrumb drauf) ==== */ .hs-immo .hs-page-banner { position: relative; width: 100%; min-height: clamp(220px, 30vw, 380px); background-size: cover; background-position: center; display: flex; align-items: flex-end; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); } /* Sanfter dunkler Verlauf unten für die Breadcrumb-Lesbarkeit. */ .hs-immo .hs-page-banner__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(45,17,22,0.62) 0%, rgba(45,17,22,0.30) 28%, rgba(45,17,22,0.05) 55%, rgba(45,17,22,0) 80%); pointer-events: none; } .hs-immo .hs-page-banner__inner { position: relative; z-index: 1; width: 100%; max-width: var(--hs-container-default); margin-inline: auto; padding: 0 var(--hs-gutter) clamp(1rem, 0.75rem + 1vw, 1.5rem); } .hs-immo .hs-page-banner__crumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.1rem; color: #fff8ef; font-size: 0.9rem; font-weight: 500; /* Dezente dunkle Pille hinter dem Breadcrumb: sorgt für sichere * Lesbarkeit auf hellen wie dunklen Bildstellen (Textschatten allein * reichte auf hellem Himmel/Fassaden nicht). */ background: rgba(45, 17, 22, 0.55); padding: 0.4rem 0.85rem; border-radius: var(--hs-radius-pill, 999px); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .hs-immo .hs-page-banner__crumbs a { color: #fff8ef; text-decoration: none; } /* Beim Hover NUR unterstreichen, Farbe bleibt gleich – dadurch immer lesbar. */ .hs-immo .hs-page-banner__crumbs a:hover, .hs-immo .hs-page-banner__crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .hs-immo .hs-page-banner__sep { opacity: 0.65; margin-inline: 0.25rem; } /* Wenn ein Banner vorausgeht, braucht der darauffolgende Page-Hero oben * keinen großen Abstand mehr (Titel beginnt direkt unter dem Bild). */ .hs-immo .hs-page-banner + .hs-page-hero { padding-top: 0 !important; } /* Den eingebauten Breadcrumb-Teil im Page-Hero ausblenden, wenn ein Banner * den Breadcrumb bereits trägt (verhindert Doppelung). */ .hs-immo .hs-page-banner + .hs-page-hero .hs-breadcrumbs { display: none; } /* === Fachpartner-Karten ============================================= */ .hs-immo .hs-partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.25rem, 1rem + 1vw, 2rem); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .hs-immo .hs-partner-card { display: flex; flex-direction: column; background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); overflow: hidden; box-shadow: var(--hs-shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hs-immo .hs-partner-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(45,17,22,0.14); } .hs-immo .hs-partner-card__media { background: var(--hs-color-bg); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 1rem; border-bottom: 1px solid var(--hs-color-border); } .hs-immo .hs-partner-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--hs-radius-sm); } .hs-immo .hs-partner-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.35rem 1.4rem 1.5rem; flex: 1 1 auto; } .hs-immo .hs-partner-card__tag { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hs-color-accent); } .hs-immo .hs-partner-card__name { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--hs-color-text); } .hs-immo .hs-partner-card__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--hs-color-soft); flex: 1 1 auto; } .hs-immo .hs-partner-card__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--hs-color-accent); text-decoration: none; overflow-wrap: anywhere; } .hs-immo .hs-partner-card__link span { transition: transform 0.2s ease; } .hs-immo .hs-partner-card__link:hover { text-decoration: underline; } .hs-immo .hs-partner-card__link:hover span { transform: translateX(3px); } /* === Vorteils-Karten mit Icon (Objektseiten) ======================== */ .hs-immo .hs-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 0.75rem + 1vw, 1.6rem); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .hs-immo .hs-benefit { background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); padding: 1.5rem 1.4rem; box-shadow: var(--hs-shadow-card); } .hs-immo .hs-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--hs-radius-md); background: var(--hs-color-accent-soft); color: var(--hs-color-accent); margin-bottom: 1rem; } .hs-immo .hs-benefit__icon .hs-icon { width: 1.5rem; height: 1.5rem; } .hs-immo .hs-benefit__title { margin: 0 0 0.4rem; font-size: 1.15rem; font-weight: 600; color: var(--hs-color-text); line-height: 1.3; } .hs-immo .hs-benefit__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--hs-color-soft); } /* === Ablauf-Schritte (nummeriert) =================================== */ .hs-immo .hs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); counter-reset: hs-step; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .hs-immo .hs-step { position: relative; background: var(--hs-color-surface); border: 1px solid var(--hs-color-border); border-radius: var(--hs-radius-lg); padding: 2.5rem 1.4rem 1.5rem; box-shadow: var(--hs-shadow-card); } .hs-immo .hs-step::before { counter-increment: hs-step; content: counter(hs-step, decimal-leading-zero); position: absolute; top: 1.1rem; left: 1.4rem; font-size: 1.4rem; font-weight: 700; color: var(--hs-color-accent); line-height: 1; } .hs-immo .hs-step__title { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 600; color: var(--hs-color-text); line-height: 1.3; } .hs-immo .hs-step__text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--hs-color-soft); } /* === Zielgruppen-Chips ============================================== */ .hs-immo .hs-chips { list-style: none; margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; } .hs-immo .hs-chips--center { justify-content: center; } .hs-immo .hs-chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; background: var(--hs-color-accent-soft); color: var(--hs-color-accent); border-radius: var(--hs-radius-pill); font-size: 0.95rem; font-weight: 500; } .hs-immo .hs-chips li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hs-color-accent); flex: 0 0 auto; }