@layer pages { /* ============================================================ JENNIQUE BEAUTY – pages/home.css Ausschließlich index.php (Startseite): Bewertungs-Karussell, Galerie-Grid 4×2, Über-mich-Preview, Vorher/Nachher-Teaser-Karussell, Hero-Stats, Trust-Punkte, Ablauf-5-Schritte, Hero-Badges. Das Hero-Vollbild (.hero-landing*) liegt NICHT hier, sondern in components.css - es wird von pages/standort.php (identisches Hero-Video/-Bild + Text-Layout) mitgenutzt, s. .ai/css-known-issues.md. Wird zusätzlich zu base.css + layout.css + components.css geladen. ============================================================ */ /* ============================================================ EINLEITUNG – kurzer Willkommenstext direkt unter dem Hero ============================================================ */ .intro-section { padding: clamp(3.5rem, 7vw, 5rem) 0; background: #F8EBF0; } .intro-description { width: 100%; max-width: 700px; margin: 0.35rem 0 2rem; text-align: left; } .intro-section p { max-width: 700px; color: var(--color-text-light); font-size: 1.05rem; line-height: 1.78; } /* Optionales Bild neben der Einleitung (admin/content.php -> Startseite -> Einleitung). Ohne Upload bleibt die Sektion wie zuvor einspaltig/zentriert (kein .intro-grid, s. index.php). Desktop: Bild rechts (2. Grid-Spalte folgt einfach der DOM-Reihenfolge Text->Bild). Mobil: Bild unter dem Text (dieselbe DOM-Reihenfolge, einspaltig gestapelt) - kein eigenes "order" noetig. Seitenverhaeltnis 4:5 wie die Galeriebilder (aspect-ratio statt fester Hoehe, damit die Breite variabler Spaltenbreiten mitwaechst). */ .intro-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3.5rem; align-items: start; } .intro-grid .intro-description, .intro-grid .intro-section p { max-width: none; /* Rechter Abstand zum Bild = derselbe Wert wie der Abstand vom Akzenttext zur Oberkante des Abschnitts (.intro-section padding-top), auf Wunsch - dieselbe clamp()-Formel wie dort, damit beide immer exakt gleich bleiben statt zufaellig uebereinzustimmen. */ padding-right: clamp(3.5rem, 7vw, 5rem); } .intro-image { width: 100%; /* noetig, damit aspect-ratio als Grid-Item verlaesslich greift - reines Grid-Stretch alleine reicht nicht */ border-radius: 5px; overflow: hidden; aspect-ratio: 4/5; background: var(--color-border); } .intro-image img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { .intro-grid { grid-template-columns: 1fr; gap: 2rem; } .intro-image { max-width: 360px; margin: 0 auto; } } /* ============================================================ BEWERTUNGEN – Auto-Slide-Karussell (faellt geometrisch auf ein statisches Grid zurueck, wenn alle Karten schon in den Viewport passen – siehe JS: needsSliding() misst scrollWidth vs. clientWidth). ============================================================ */ .reviews-lp { background: var(--color-background); padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3rem); } .reviews-slider-wrap { position: relative; width: min(1280px, calc(100% - 1rem)); margin: 0 auto; padding: 0 clamp(5.25rem, 7vw, 6.25rem); overflow: visible; } .reviews-slider-track { --reviews-slide-gap: 1.25rem; --reviews-slide-peek: clamp(4rem, 7vw, 7rem); /* position:relative macht den Track selbst zum offsetParent seiner Karten - ohne das berechnet der Browser offsetLeft relativ zu , was auf breiten Viewports (Track durch max-width zentriert, Rand zum Body) die komplette JS-Scroll-Navigation um genau diesen Rand verfaelscht. */ position: relative; display: flex; gap: var(--reviews-slide-gap); overflow-x: auto; /* Kein natives scroll-snap mehr - es kaempfte mit der eigenen JS- Positionierung (main.js: animateScrollLeft/resyncFromScroll), jede eigene Korrektur loeste ein neues natives Snap-Event aus, das wiederum die eigene Korrektur "korrigierte" usw. Ausrichtung laeuft jetzt ausschliesslich per JS (auch nach manuellem Wischen). */ -webkit-overflow-scrolling: touch; max-width: none; margin: 0; /* Seitliches Padding = Rand links/rechts der Reihe (Desktop 3er-Reihe; auf Mobil zusaetzlich noetig als Puffer fuers Zentrieren, siehe unten). */ padding: 0.25rem 1.5rem 1rem; scrollbar-width: none; } .reviews-slider-track::-webkit-scrollbar { display: none; } .reviews-slider-controls { position: absolute; top: 0; right: 0; left: 0; height: 100%; z-index: 3; display: block; width: 100%; margin: 0; pointer-events: none; } .reviews-slider-controls[hidden] { display: none; } .reviews-slider-controls .reviews-ctrl-btn { position: absolute; top: 50%; pointer-events: auto; transform: translateY(-50%); box-shadow: 0 0.5rem 1.4rem rgba(44, 26, 34, 0.13); } .reviews-slider-prev { left: clamp(0.35rem, 1vw, 0.85rem); } .reviews-slider-next { right: clamp(0.35rem, 1vw, 0.85rem); } .reviews-carousel-position { position: absolute; right: 0; bottom: -1.65rem; min-width: auto; color: var(--color-text-light); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; pointer-events: none; } .reviews-carousel-position[hidden] { display: none; } /* Zu wenige Karten fuer Slide-Notwendigkeit (JS: needsSliding()) -> zentriert statt am linken Rand haengend anzeigen. */ .reviews-slider-track.no-slide-needed { justify-content: center; } .review-slide { /* Alle Karten exakt gleich breit - keine Sonderregeln fuer erstes/letztes Element mehr (die machten das mittlere sonst breiter). */ flex: 0 0 calc((100% - var(--reviews-slide-peek) - (2 * var(--reviews-slide-gap))) / 2); min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9)), var(--color-surface); border: 1px solid rgba(214, 164, 176, 0.42); border-radius: 8px; padding: clamp(1.55rem, 2.2vw, 2.15rem); overflow: hidden; } .review-slide-stars { margin-bottom: clamp(1rem, 1.8vw, 1.35rem); text-align: center; font-size: 1.08rem; letter-spacing: 0.18em; } .review-slide-stars .star.filled { transition: filter 350ms ease, text-shadow 350ms ease; } .review-slide-text { position: relative; z-index: 1; max-width: 100%; font-size: 0.9rem; font-weight: 400; color: var(--color-text); line-height: 1.78; font-style: normal; margin: 0 0 clamp(1.35rem, 2vw, 1.75rem); padding: 0.15rem 0.1rem; flex: 1 1 auto; overflow-wrap: break-word; transform: translateY(0) scale(1); transform-origin: center; text-shadow: 0 0 0 rgba(44, 26, 34, 0); transition: transform 500ms cubic-bezier(0.2, 0, 0.2, 1), color 500ms cubic-bezier(0.2, 0, 0.2, 1), text-shadow 500ms cubic-bezier(0.2, 0, 0.2, 1); } .review-slide-text-layer { display: block; max-width: 100%; font: inherit; font-weight: 400; line-height: inherit; letter-spacing: inherit; overflow-wrap: inherit; white-space: normal; font-synthesis: none; } .review-slide-text-base { position: relative; z-index: 1; } .review-slide-text-strong { position: absolute; inset: 0.15rem 0.1rem auto; z-index: 2; color: var(--color-text-dark); opacity: 0; pointer-events: none; transition: none; } .review-slide-meta { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(214, 164, 176, 0.28); } .review-avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: rgba(214, 164, 176, 0.32); color: var(--color-primary); border: 1px solid rgba(214, 164, 176, 0.48); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.96rem; flex-shrink: 0; } /* min-width:0 + break-word: ein ungewoehnlich langer Kundenname (aus der Bewertungsverwaltung) soll innerhalb der schmalen 3-spaltigen Karte umbrechen statt sie seitlich aufzublaehen. */ .review-slide-name { font-size: 0.84rem; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: break-word; letter-spacing: 0.06em; text-transform: uppercase; } .review-slide .platform-tag { margin-left: auto; white-space: nowrap; border-radius: 999px; padding: 0.22rem 0.58rem; } @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .review-slide:hover .review-slide-text, .review-slide:focus-within .review-slide-text { color: var(--color-text-dark); text-shadow: 0 0.65rem 1.05rem rgba(44, 26, 34, 0.12); transform: translateY(-8px) scale(1); } .review-slide:hover .review-slide-text-strong, .review-slide:focus-within .review-slide-text-strong { opacity: 0.48; } .review-slide:hover .review-slide-stars .star.filled, .review-slide:focus-within .review-slide-stars .star.filled { filter: brightness(1.16); text-shadow: 0 0 0.7rem currentColor; } } @media (prefers-reduced-motion: reduce) { .review-slide-text { transition: transform 80ms cubic-bezier(0.2, 0, 0.2, 1), color 80ms cubic-bezier(0.2, 0, 0.2, 1), text-shadow 80ms cubic-bezier(0.2, 0, 0.2, 1); } } /* .reviews-controls/.reviews-ctrl-btn: nach assets/css/components.css verschoben (dort ueberall geladen, jetzt auch von der Ueber-mich-Seite mitgenutzt statt dupliziert - s. Kommentar dort). */ @media (max-width: 1100px) { .reviews-slider-track { --reviews-slide-peek: 0px; } .review-slide { flex: 0 0 calc((100% - var(--reviews-slide-gap)) / 2); min-width: 0; } } @media (max-width: 640px) { .reviews-slider-wrap { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; } .reviews-slider-controls { order: 2; position: static; display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: min(1160px, calc(100% - 3rem)); height: auto; margin: 0.55rem auto 0; pointer-events: auto; } .reviews-slider-controls[hidden] { display: none; } .reviews-slider-controls .reviews-ctrl-btn { position: static; transform: none; box-shadow: none; } .reviews-carousel-position { position: static; min-width: 3.75rem; text-align: center; } /* Mobil: 1 Karte pro Ansicht, per JS mittig eingerastet (main.js: isSingleUpView/targetPos) statt buendig am Rand. Das Track-Padding von oben bleibt bewusst bestehen - macht die Ruheposition (scrollLeft=0) der ersten Karte bereits identisch mit ihrer rechnerisch zentrierten Position, kein Scrollen in einen unmoeglichen Bereich noetig. */ .review-slide { flex: 0 0 100%; min-width: 0; } } /* ============================================================ GALERIE STARTSEITE (4×2 Grid, feste Größe) ============================================================ */ .gallery-home-section { padding: 5rem 0; background: #F8EBF0; } .gallery-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 2rem; } .gallery-home-item { position: relative; width: 100%; aspect-ratio: var(--gallery-thumb-width) / var(--gallery-thumb-height); overflow: hidden; border-radius: 6px; background: var(--color-border); border: none; padding: 0; cursor: pointer; display: block; } .gallery-home-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; } .gallery-home-item:hover img { transform: scale(1.06); } .gallery-home-overlay { position: absolute; inset: 0; background: rgba(44,26,34,0.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; } .gallery-home-item:hover .gallery-home-overlay, .gallery-home-item:focus-visible .gallery-home-overlay { opacity: 1; } .gallery-home-item.placeholder { background: var(--color-rose-light); display: flex; align-items: center; justify-content: center; } /* ============================================================ ÜBER MICH PREVIEW ============================================================ */ .about-preview-section { background: #F8EBF0; padding: clamp(3.5rem, 7vw, 5rem) 0; } .about-preview-grid { display: grid; /* minmax() statt fixem 420px: bleibt bis 1024px (danach Media Query weiter unten) auf 420px, kann bei knapperem Platz aber bis 280px mitschrumpfen statt die Textspalte zu quetschen. */ grid-template-columns: minmax(280px, 420px) 1fr; gap: 5rem; align-items: start; } .about-preview-img-wrap { border-radius: 8px; overflow: hidden; aspect-ratio: 4/5; background: var(--color-border); flex-shrink: 0; } .about-preview-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .about-preview-content { display: flex; flex-direction: column; justify-content: center; max-height: 100%; } .about-preview-name { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; } .about-preview-text { font-size: 1rem; color: var(--color-text-light); line-height: 1.78; margin-bottom: 1.75rem; } /* Startseiten-Teaser – Auto-Slide-Karussell, gleichgrosse Paare (kein Highlight mehr). Desktop 2 gleichzeitig sichtbar, Mobil 1. Faellt geometrisch auf "kein Sliden noetig" zurueck, wenn ohnehin alles passt (siehe JS needsSliding() im Bewertungs-/BA-Karussell-Modul). */ .ba-preview-section { display: flex; flex-direction: column; padding: clamp(3.5rem, 7vw, 5rem) 0; background: #F8EBF0; } .ba-carousel-toolbar { order: 3; display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: min(1160px, calc(100% - 3rem)); margin: 0.55rem auto 0; } .ba-carousel-toolbar[hidden] { display: none; } .ba-carousel-position { min-width: 3.75rem; text-align: center; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-light); } .ba-carousel-position[hidden] { display: none; } .ba-carousel-wrap { order: 2; position: relative; display: flex; flex-direction: column; width: min(1160px, 100%); margin: 0 auto; overflow: visible; } .ba-carousel-track { --ba-preview-gap: 1.5rem; --ba-preview-peek: 0px; /* position:relative macht den Track selbst zum offsetParent seiner Paare - siehe ausfuehrlicher Kommentar bei .reviews-slider-track. */ position: relative; display: flex; gap: var(--ba-preview-gap); overflow-x: auto; /* Kein natives scroll-snap mehr - siehe Kommentar bei .reviews-slider-track (kaempfte mit der eigenen JS-Positionierung). */ -webkit-overflow-scrolling: touch; max-width: none; margin: 0; /* Bewusst randlos (0 seitlich), auf Mobil UND Desktop: Container-Padding widerspricht der Formel "2 Karten + 1 Luecke = 100%" bei jeder Scroll-Position ausser den Raendern (Padding wird von der Prozent-Rechnung nur EINMAL global "verbraucht", nicht wiederkehrend pro sichtbarem Paar) - das war die Ursache dafuer, dass teilweise der Anfang eines dritten Paares zu sehen war. */ padding: 0.25rem 0 1rem; scrollbar-width: none; } .ba-carousel-track::-webkit-scrollbar { display: none; } .ba-carousel-track.no-slide-needed { justify-content: center; } .ba-carousel-track .ba-item { /* Alle Paare exakt gleich gross - keine Sonderregeln fuer erstes/letztes Element (die machten die mittleren sonst breiter/schmaler). */ flex: 0 0 calc((100% - var(--ba-preview-peek) - (2 * var(--ba-preview-gap))) / 2); min-width: 0; } .ba-carousel-track .ba-half { aspect-ratio: 4/5; } .ba-preview-caption { margin: 0.55rem 0 0; color: var(--color-text-light); font-size: 0.84rem; font-weight: 500; line-height: 1.35; text-align: center; } .ba-preview-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.85rem 1.25rem; margin-top: clamp(1.35rem, 2.4vw, 1.85rem); } .ba-preview-cta-container { order: 4; } .ba-preview-secondary-link { color: var(--color-text-light); font-size: 0.92rem; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(122, 90, 100, 0.28); text-underline-offset: 0.28em; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .ba-preview-secondary-link:hover, .ba-preview-secondary-link:focus-visible { color: var(--color-primary); text-decoration-color: currentColor; } @media (min-width: 700px) { .ba-carousel-wrap { width: min(1280px, calc(100% - 1rem)); padding: 0 clamp(5.25rem, 7vw, 6.25rem); } .ba-carousel-toolbar { position: absolute; top: 0; right: 0; left: 0; height: calc(100% - 1.9rem); z-index: 3; display: block; width: 100%; margin: 0; pointer-events: none; } .ba-carousel-wrap { order: 3; } .ba-carousel-toolbar .reviews-ctrl-btn { position: absolute; top: 50%; pointer-events: auto; transform: translateY(-50%); box-shadow: 0 0.5rem 1.4rem rgba(44, 26, 34, 0.13); } .ba-carousel-prev { left: clamp(0.35rem, 1vw, 0.85rem); } .ba-carousel-next { right: clamp(0.35rem, 1vw, 0.85rem); } .ba-carousel-position { position: absolute; right: 0; bottom: -1.65rem; min-width: auto; pointer-events: none; } .ba-carousel-track { --ba-preview-gap: clamp(1rem, 1.8vw, 1.5rem); --ba-preview-peek: clamp(54px, 7vw, 112px); } .ba-preview-actions { margin-top: clamp(2.25rem, 3vw, 2.65rem); } } @media (max-width: 699px) { .ba-carousel-toolbar { order: 3; } .ba-carousel-wrap { order: 2; } .ba-carousel-track .ba-item { flex: 0 0 100%; min-width: 0; } } /* Die frueher hier stehende .hero-stats-bar (nie von index.php genutzt) ist nach assets/css/pages/locations.css umgezogen und in .facts-bar umbenannt/neu gestaltet - einzige Verwenderin ist pages/standort.php, s. dort fuer den aktuellen Faktenleisten-Abschnitt. */ .trust-section { padding: clamp(3.5rem, 7vw, 5rem) 0; background: #F8EBF0; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .trust-item { padding: 1.75rem 1.5rem; background: #FFFFFF; border-radius: 0.75rem; border: 1px solid rgba(0,0,0,0.05); transition: box-shadow 0.2s ease; } .trust-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .trust-icon { font-size: 1.75rem; margin-bottom: 0.75rem; } .trust-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-dark); } .trust-item p { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.6; } @media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .trust-grid { grid-template-columns: 1fr; } } /* ============================================================ v4.1 – CONVERSION-UMBAU Hero-Badges · Ziel-Overline · Trust-Punkte · Ablauf · CTA-Bullets ============================================================ */ /* Leistungs-Karte – Ziel-Overline ("Für den natürlichen Alltagslook") */ .svc-card-goal { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.4rem; } .svc-card-title .svc-card-icon { font-size: 1.05rem; margin: 0; display: inline; } /* Warum Kundinnen wiederkommen – konkrete Punkte statt Buzzwords */ .trust-points { list-style: none; margin: clamp(1.85rem, 3vw, 2.45rem) auto 0; padding: 0; max-width: 1160px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.35rem); } .trust-point { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.15rem); min-height: 8.1rem; padding: clamp(1.15rem, 2.2vw, 1.55rem); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(199, 124, 146, 0.28); border-radius: 0.85rem; box-shadow: 0 0.7rem 1.8rem rgba(76, 34, 50, 0.055); color: var(--color-text-dark); line-height: 1.45; } .trust-point-check { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(199, 124, 146, 0.16); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.12rem; font-weight: 700; } .trust-point-copy { position: relative; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; padding-left: clamp(0.9rem, 1.4vw, 1.1rem); } .trust-point-copy::before { content: ""; position: absolute; left: 0; top: 0.1rem; bottom: 0.1rem; width: 1px; background: rgba(199, 124, 146, 0.24); } .trust-point-title { display: block; font-family: var(--font-display); font-size: clamp(1rem, 1.35vw, 1.18rem); color: var(--color-text-dark); line-height: 1.25; } .trust-point-detail { display: block; font-size: 0.9rem; color: var(--color-text-light); line-height: 1.5; } @media (max-width: 980px) { .trust-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .trust-points { grid-template-columns: 1fr; max-width: 31rem; } .trust-point { min-height: 0; } } @media (max-width: 420px) { .trust-point { align-items: flex-start; padding: 1.05rem; } .trust-point-check { width: 2rem; height: 2rem; font-size: 1rem; } } /* Abschluss-CTA – Einwand-Bullets */ .cta-bullets { list-style: none; margin: 1.1rem 0 1.9rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; } .cta-bullets li { color: rgba(255,255,255,0.95); font-size: 0.92rem; font-weight: 500; } /* ============================================================ RESPONSIVE (verschoben aus der ehemals zentralen RESPONSIVE-Sektion in style.css, zusammengefuehrt mit der jeweiligen Basisregel in dieser Datei) ============================================================ */ @media (max-width: 1024px) { .gallery-home-grid { grid-template-columns: repeat(2,1fr); } .about-preview-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } .about-preview-img-wrap { border-radius: 8px; } } @media (max-width: 700px) { /* Hero-Groesse/Padding/Schriftgroesse: siehe die spezifischeren Regeln bei .hero-landing / .hero-landing-title / .hero-landing-sub weiter oben - diese alten Werte hier standen NACH jenen Regeln im Stylesheet und gewannen dadurch im Cascade (gleiche Spezifitaet, spaetere Quellreihen- folge), unabhaengig davon was weiter oben beabsichtigt war. */ .gallery-home-grid { grid-template-columns: repeat(2,1fr); } /* Reihenfolge: Label+Ueberschrift -> Bild -> Text+Button (visuelle Reihenfolge; DOM bleibt Bild-zuerst fuer SEO/frühes Laden). .about-preview-content wird per display:contents "aufgeloest", damit seine Kinder (Label/Ueberschrift/Text/Button) einzeln im Grid neben dem Bild einsortiert werden koennen, statt als EIN Block komplett vor/nach dem Bild zu stehen. Grid-gap auf 0, da sonst der gleiche Abstand zwischen ALLEN aufgeloesten Elementen entstuende (z.B. zwischen Label und Ueberschrift) - Abstaende stattdessen gezielt per Margin. */ .about-preview-grid { grid-template-columns: 1fr; gap: 0; } .about-preview-content { display: contents; } .about-preview-content .label, .about-preview-content .about-preview-name { order: 1; } .about-preview-content .about-preview-name { margin-bottom: 1.25rem; } .about-preview-img-wrap { order: 2; max-height: none; width: 100%; max-width: 420px; margin: 0 auto 1.5rem; } .about-preview-content .about-preview-text, .about-preview-content .btn { order: 3; } .about-preview-content .btn { justify-self: center; } } @media (max-width: 480px) { .gallery-home-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) and (orientation: landscape) { .hero-landing { min-height: 300px; } } /* Alternierende Abschnitts-Hintergruende auf der Startseite (2026-07-14, auf Wunsch, nach erneuter Neusortierung: Einleitung -> Leistungen -> Vorher/Nachher -> Bewertungen -> Warum Kundinnen -> Ablauf -> Ueber mich -> FAQ -> Standort -> CTA), beginnend mit Rosa. .faq-preview-section faellt hier bewusst auf den Cream-Grundwert aus components.css zurueck (dort auch von pages/standort.php genutzt, Orts-FAQ bleibt unveraendert) - kein Override mehr noetig, da Cream an dieser Position ohnehin richtig ist. */ .intro-section, .ba-preview-section, .trust-section, .about-preview-section, .standort-section { background: #F8EBF0; } .services-lp, .reviews-lp, .ablauf-section, .faq-preview-section { background: var(--color-background); } } /* Ende @layer pages */