/* Die Google-Fonts werden bewusst NICHT hier per @import geladen, sondern direkt im von App.razor verlinkt (inkl. preconnect). Ein @import zwingt den Browser, erst app.css vollständig zu laden, bevor er die Schrift-URL überhaupt entdeckt – das kostet eine komplette zusätzliche Render-Blocking-Runde. */ /* ══ PALETTE ════════════════════════════════════════════════════════════ */ :root { --gold: #C89B3C; --gold-dark: #A07B28; --gold-light: #F8F3EC; --violet: #4B216A; --violet-dark: #371652; --violet-soft: #8A5CA8; --lotus: #D9A0BF; --rose-light: #E8C8D8; --cream: #F8F3EC; --ivory: #F0EAE0; --text-1: #2E1F3A; --text-2: #6A5D67; /* Legacy names */ --color-gold: #C89B3C; --color-violet: #4B216A; --color-lotus-rose: #D9A0BF; --color-light-rose: #E8C8D8; --color-cream: #F8F3EC; --color-ivory: #F0EAE0; --color-light-gold: #F8F3EC; --color-text-primary: #2E1F3A; --color-text-secondary: #6A5D67; } /* ══ BASE ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Kein sichtbarer Rahmen um Überschriften nach einem Seitenwechsel. in Routes.razor setzt den Fokus auf die erste Überschrift (Screenreader und Tastatur springen so an den Seitenanfang). Der Browser zeichnet dafür einen Fokusrahmen um den Profilnamen, der erst beim nächsten Klick wieder verschwindet. Die Regel greift ausschließlich bei Elementen, die nur programmatisch fokussierbar sind (tabindex="-1") – Links, Schaltflächen und Eingabefelder behalten ihren Fokusrahmen. */ [tabindex="-1"]:focus { outline: none; box-shadow: none; } html, body { margin: 0; padding: 0; height: 100%; background: var(--cream); color: var(--text-1); font-family: 'Montserrat', 'Inter', sans-serif; font-size: 16px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', 'Playfair Display', serif; color: var(--violet); font-weight: 600; line-height: 1.25; margin: 0; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--violet); } p { margin: 0; } button { cursor: pointer; font-family: inherit; } img { max-width: 100%; display: block; } /* ══ THEME WRAPPER ═══════════════════════════════════════════════════════ EmptyLayout erzeugt einen
Wrapper. display:contents macht ihn layoutneutral – Kinder verhalten sich so als wären sie direkte Kinder des Elternelements. */ .laluz-theme-light, .laluz-theme-dark { display: contents; } /* ══ NAVIGATION hn ══════════════════════════════════════════════════════ */ .hn { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: 72px; padding: 0 2.5rem; background: rgba(248,243,236,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(75,33,106,0.07); gap: 2rem; } .hn__brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; } .hn__icon { font-size: 1.3rem; color: var(--gold); line-height: 1; } .hn__name { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--violet); letter-spacing: 0.01em; } .hn__dot { color: var(--gold); } .hn__links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.25rem; } .hn__link { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); padding: 0.4rem 0.9rem; border-radius: 6px; transition: color .2s, background .2s; text-decoration: none; /* Mehrwortige Einträge („Über LaLuz") sollen nie umbrechen – die Leiste wird stattdessen enger, wenn der Platz knapp wird. */ white-space: nowrap; } @media (min-width: 769px) and (max-width: 1400px) { /* Ab acht Einträgen wird die Desktop-Leiste eng: Innenabstände etwas kleiner, damit alle Links einzeilig nebeneinander passen. */ .hn { padding: 0 1.5rem; gap: 1rem; } .hn__link { padding: 0.4rem 0.55rem; letter-spacing: 0.06em; } } .hn__link:hover { color: var(--violet); background: rgba(75,33,106,0.06); } .hn__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .hn__theme { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: var(--text-2); transition: background .2s, color .2s; } .hn__theme:hover { background: rgba(75,33,106,0.08); color: var(--violet); } .hn__cta { display: inline-flex; align-items: center; padding: 0.55rem 1.4rem; background: var(--gold); color: #fff !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 50px; text-decoration: none; transition: background .2s, box-shadow .2s; } .hn__cta:hover { background: var(--gold-dark); color: #fff !important; box-shadow: 0 4px 18px rgba(200,155,60,0.35); } /* ══ HERO hh ════════════════════════════════════════════════════════════ */ .hh { display: grid; grid-template-columns: 55% 45%; min-height: calc(100vh - 72px); background: radial-gradient(ellipse 65% 55% at 78% 35%, rgba(217,160,191,0.22) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 15% 80%, rgba(246,240,228,0.7) 0%, transparent 55%), var(--cream); } /* — Linke Spalte — */ .hh__left { display: flex; flex-direction: column; justify-content: center; padding: 5rem 3rem 5rem 5rem; gap: 1.75rem; max-width: 640px; justify-self: end; width: 100%; } .hh__eyebrow { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0; } .hh__title { font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: 700; color: var(--text-1); line-height: 1.1; font-family: 'Cormorant Garamond', serif; } .hh__title-em { color: var(--violet); font-style: italic; font-weight: 400; } .hh__desc { font-size: 1.05rem; color: var(--text-2); line-height: 1.75; max-width: 460px; } .hh__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .hh__btn { display: inline-flex; align-items: center; padding: 0.85rem 2.2rem; background: var(--text-1); color: var(--cream); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: none; border-radius: 50px; transition: background .2s, transform .15s, box-shadow .2s; } .hh__btn:hover { background: var(--violet); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(75,33,106,0.2); } .hh__link { font-size: 0.92rem; font-weight: 500; color: var(--violet); text-decoration: none; transition: color .2s; } .hh__link:hover { color: var(--gold); } /* — Rechte Spalte (Karten-Decoration) — */ .hh__right { position: relative; overflow: hidden; } /* ══ FLOATING CARDS hk ══════════════════════════════════════════════════ */ .hk { position: absolute; inset: 0; } .hk__back-gold { position: absolute; width: 38%; aspect-ratio: 0.65; left: 8%; top: 14%; background: linear-gradient(145deg, #D4A862 0%, #C9A15A 55%, #B8843A 100%); border-radius: 22px; transform: rotate(-9deg); box-shadow: 0 28px 72px rgba(200,155,60,0.35); } .hk__back-violet { position: absolute; width: 38%; aspect-ratio: 0.65; right: 7%; top: 9%; background: linear-gradient(145deg, #7A3585 0%, #5A235F 55%, #3D1540 100%); border-radius: 22px; transform: rotate(7deg); box-shadow: 0 28px 72px rgba(75,33,106,0.32); } .hk__front { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: 54%; max-width: 230px; background: #fff; border-radius: 18px; padding: 1.25rem 1.5rem; box-shadow: 0 16px 56px rgba(75,33,106,0.16); display: flex; flex-direction: column; gap: 0.6rem; z-index: 2; } .hk__cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .hk__name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--text-1); line-height: 1.3; } .hk__dot { width: 8px; height: 8px; border-radius: 50%; background: #3DA562; display: block; } .hk__dot--red { background: #E05252; } .hk__small { position: absolute; bottom: 18%; right: 5%; width: 40%; max-width: 165px; background: #1E1228; border-radius: 16px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; z-index: 3; } .hk__small .hk__cat { color: var(--lotus); } .hk__small .hk__name { color: #F0EBF5; font-size: 0.92rem; } .hk__badge { position: absolute; top: 11%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; background: #fff; border-radius: 50px; padding: 0.5rem 1.2rem; box-shadow: 0 6px 24px rgba(0,0,0,0.12); white-space: nowrap; z-index: 4; } .hk__badge-num { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 700; color: var(--violet); } .hk__badge-txt { font-size: 0.72rem; color: var(--text-2); } /* ══ SEARCH hs ══════════════════════════════════════════════════════════ */ .hs { position: relative; width: 100%; } .hs__bar { display: flex; align-items: center; height: 56px; background: #fff; border: 1.5px solid rgba(75,33,106,0.16); border-radius: 50px; padding: 0 6px 0 1.25rem; gap: 0.5rem; box-shadow: 0 2px 16px rgba(75,33,106,0.08); transition: border-color .2s, box-shadow .2s; width: 100%; } .hs__bar--on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,155,60,0.18); } .hs__icon { flex-shrink: 0; color: var(--text-2); opacity: 0.55; } .hs__input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: var(--text-1); caret-color: var(--gold); min-width: 0; } .hs__input::placeholder { color: var(--text-2); opacity: 0.55; } .hs__btn { flex-shrink: 0; height: 44px; padding: 0 1.5rem; background: var(--gold); color: #fff; border: none; border-radius: 50px; font-size: 0.82rem; font-weight: 600; transition: background .2s; } .hs__btn:hover { background: var(--gold-dark); } .hs__drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid rgba(75,33,106,0.12); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(75,33,106,0.14); z-index: 200; } .hs__opt { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; cursor: pointer; transition: background .15s; } .hs__opt:hover, .hs__opt--on { background: var(--gold-light); } .hs__opt-icon { color: var(--text-2); opacity: 0.4; flex-shrink: 0; } .hs__opt-name { font-size: 0.9rem; color: var(--text-1); font-weight: 500; } .hs__opt-city { font-size: 0.77rem; color: var(--text-2); } .hs__opt-ok { margin-left: auto; font-size: 0.78rem; color: var(--gold); font-weight: 700; } .hs__all { padding: 0.75rem 1.25rem; font-size: 0.84rem; color: var(--violet); font-weight: 500; cursor: pointer; border-top: 1px solid rgba(75,33,106,0.07); text-align: center; transition: background .15s; } .hs__all:hover { background: var(--gold-light); } /* ══ LAYOUT UTIL cx ═════════════════════════════════════════════════════ */ .cx { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; } /* ══ SECTIONS sc ════════════════════════════════════════════════════════ */ .sc { padding: 5rem 0; background: var(--cream); } .sc--white { background: #fff; } .sc--ivory { background: var(--ivory); } .sc--gold { background: var(--gold-light); } .sc__hd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; gap: 1rem; } .sc__hd--c { flex-direction: column; align-items: center; text-align: center; } .sc__t { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--violet); } .sc__s { font-size: 1rem; color: var(--text-2); margin-top: 0.5rem; } .sc__more { font-size: 0.85rem; font-weight: 600; color: var(--gold); white-space: nowrap; flex-shrink: 0; text-decoration: none; } .sc__more:hover { color: var(--violet); } .sc__empty { color: var(--text-2); font-size: 0.95rem; padding: 2rem 0; } /* ══ CATEGORY GRID cg ══════════════════════════════════════════════════ */ .cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; } .cg__item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.5rem 0.75rem; background: #fff; border-radius: 16px; border: 1px solid rgba(75,33,106,0.08); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; } .cg__item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(200,155,60,0.15); border-color: rgba(200,155,60,0.3); } .cg__glyph { font-size: 1.6rem; color: var(--gold); line-height: 1; } .cg__name { font-size: 0.76rem; font-weight: 600; text-align: center; color: var(--text-1); line-height: 1.3; } /* ══ RESULTS GRID sg ════════════════════════════════════════════════════ */ .sg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .sg--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .sg--4 { grid-template-columns: repeat(4, 1fr); } /* ══ CTA SECTION hc ═════════════════════════════════════════════════════ */ .hc { background: linear-gradient(135deg, var(--violet) 0%, #3D1540 100%); padding: 5rem 0; } .hc__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hc__title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; line-height: 1.3; margin-bottom: 1rem; } .hc__body { color: rgba(255,255,255,0.72); font-size: 1rem; line-height: 1.75; margin-bottom: 2rem; } .hc__btn { display: inline-flex; align-items: center; padding: 0.9rem 2.5rem; background: var(--gold); color: #fff !important; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 50px; text-decoration: none; transition: background .2s, box-shadow .2s, transform .15s; } .hc__btn:hover { background: var(--gold-dark); color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,155,60,0.4); } .hc__free-note { margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.75); } .hc__free-note a { color: var(--gold); text-decoration: underline; } .hc__pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; /* alle Anbieterkarten gleiche Höhe */ } .pk { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.75rem 1.5rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; position: relative; text-decoration: none; transition: background .2s, border-color .2s, transform .15s; } .pk:hover { background: rgba(255,255,255,0.12); border-color: rgba(200,155,60,0.35); transform: translateY(-3px); } .pk--top { background: rgba(200,155,60,0.15); border-color: rgba(200,155,60,0.45); } .pk--top:hover { background: rgba(200,155,60,0.22); } .pk__badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.9rem; border-radius: 50px; letter-spacing: 0.06em; white-space: nowrap; } .pk__name { font-weight: 700; color: #fff; font-size: 1.05rem; font-family: 'Cormorant Garamond', serif; } .pk__price { font-size: 1.4rem; color: var(--gold); font-weight: 700; font-family: 'Cormorant Garamond', serif; line-height: 1.2; } .pk__price small { font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.45); } .pk__desc { font-size: 0.76rem; color: rgba(255,255,255,0.5); } .pk__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .pk__list li { font-size: 0.79rem; color: rgba(255,255,255,0.6); padding-left: 1.1em; position: relative; line-height: 1.4; } .pk__list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 0.72rem; } .pk__cta { margin-top: auto; padding-top: 0.75rem; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; } .pk__cta--gold { color: var(--gold); } /* ── Suchprofil: vom Anbieter-Bereich abgetrennt ──────────────────────── */ .hc__search { margin-top: 3rem; } .hc__sep { display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,0.55); font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 1.5rem; } .hc__sep::before, .hc__sep::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.15); } .pk-search { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 1.75rem 2rem; text-decoration: none; transition: background .2s, border-color .2s, transform .15s; } .pk-search:hover { background: rgba(255,255,255,0.09); border-color: rgba(200,155,60,0.3); transform: translateY(-2px); } .pk-search__main { flex: 1; min-width: 240px; } .pk-search__name { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #fff; font-size: 1.2rem; display: block; } .pk-search__desc { color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.5; margin: 0.3rem 0 0.6rem; max-width: 48ch; } .pk-search__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; } .pk-search__list li { font-size: 0.78rem; color: rgba(255,255,255,0.6); padding-left: 1.1em; position: relative; } .pk-search__list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 0.72rem; } .pk-search__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; white-space: nowrap; } .pk-search__price { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--gold); font-size: 1.4rem; } .pk-search__price small { font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.45); } @media (max-width: 640px) { .pk-search__aside { align-items: flex-start; } /* Features nebeneinander statt untereinander */ .pk-search__list { gap: 0.4rem 0.9rem; } .pk-search__list li { font-size: 0.72rem; } } /* ══ FOOTER ft ══════════════════════════════════════════════════════════ */ .ft { background: #1A0E22; padding: 4rem 0 2rem; } .ft__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; margin-bottom: 3rem; } .ft__logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: #F8F3EC; } .ft__logo span { color: var(--gold); } .ft__claim { font-size: 0.85rem; color: rgba(255,255,255,0.38); margin-top: 0.5rem; line-height: 1.5; } .ft__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .ft__col { display: flex; flex-direction: column; gap: 0.6rem; } /* Spaltentitel im Fussbereich. Ausgezeichnet als H2, damit die Gliederung der Seite keine Ebene ueberspringt (H1 -> H4); das Aussehen bleibt die kleine Versalzeile. */ .ft__col-title { font-family: 'Montserrat', sans-serif; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; } .ft__col a { font-size: 0.87rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color .2s; } .ft__col a:hover { color: var(--gold); } .ft__copy { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.06); text-align: center; font-size: 0.76rem; color: rgba(255,255,255,0.22); } /* ══ MUDBLAZOR + MAIN LAYOUT OVERRIDES ═══════════════════════════════════ */ .laluz-appbar { background-color: #fff !important; border-bottom: 1px solid var(--rose-light); } .laluz-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--violet) !important; letter-spacing: 0.02em; } .laluz-logo span { color: var(--gold); } .nav-link-laluz { color: var(--text-1) !important; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; padding: 0 0.75rem !important; transition: color .2s; } .nav-link-laluz:hover, .nav-link-laluz.active { color: var(--gold) !important; } /* ══ LANGUAGE SWITCHER ════════════════════════════════════════════════════ */ .language-switcher { display: flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; } .language-switcher a { padding: 0.25rem 0.5rem; border-radius: 4px; color: var(--text-2); text-decoration: none; transition: background .2s, color .2s; } .language-switcher a:hover, .language-switcher a.active { background: rgba(75,33,106,0.08); color: var(--violet); } /* ══ PROVIDER CARD (MudBlazor) ════════════════════════════════════════════ */ .provider-card { background: var(--ivory) !important; border-radius: 16px !important; border: 1px solid rgba(75,33,106,0.08) !important; transition: transform .2s, box-shadow .2s !important; overflow: hidden; } .provider-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(75,33,106,0.12) !important; } /* Hervorgehobene Darstellung in der Suche - ab Leuchtkraft (Zeile der Paket- uebersicht auf /pakete, entschieden von IPackageLimitService.IsHighlightedInSearch). Bewusst zurueckhaltend: ein warmer Goldrahmen und ein sanfter Schein, kein zweites Farbschema und kein groesserer Kasten - die Karte soll ruhig bleiben und sich nur klar vom Grundeintrag abheben. */ .provider-card--highlight { border-color: rgba(200,155,60,0.45) !important; box-shadow: 0 6px 20px rgba(200,155,60,0.14) !important; background: linear-gradient(180deg, var(--gold-light), var(--ivory)) !important; } .provider-card--highlight:hover { box-shadow: 0 14px 36px rgba(200,155,60,0.22) !important; } /* Zusaetzliche Sichtbarkeit - nur Strahlkraft. Zum Goldrahmen kommt eine feine Lichtkante am oberen Rand. */ .provider-card--spotlight { border-color: rgba(200,155,60,0.6) !important; position: relative; } .provider-card--spotlight::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--lotus), var(--gold)); z-index: 1; } /* Kennzahlenzeile ueber der Schaltflaeche: laufende Termine und sichtbare Neuigkeiten. Bewusst als ruhige Textzeile mit feiner Trennlinie statt als bunte Chips - sie ist ein Hinweis, kein Siegel. */ .pc-activity { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid rgba(75,33,106,0.08); } .pc-activity__item { display: inline-flex; align-items: center; gap: .3rem; font-size: 0.78rem; font-weight: 600; color: var(--text-2); white-space: nowrap; } .laluz-theme-dark .pc-activity { border-top-color: rgba(255,255,255,0.10); } .laluz-theme-dark .pc-activity__item { color: rgba(255,255,255,0.62); } .laluz-theme-dark .provider-card--highlight { border-color: rgba(200,155,60,0.4) !important; background: linear-gradient(180deg, rgba(200,155,60,0.10), rgba(255,255,255,0.02)) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; } /* Bildflaeche der Karten. Vorher: 200 px hoch (also rund 2:1) mit object-fit: cover. Profilbilder liegen aber als Quadrat auf der Platte (400 x 400, ImageKind.Profile) - in einer 2:1- Flaeche schnitt cover damit etwa die Haelfte der Hoehe weg, bei Portraits also regelmaessig den Kopf. Auf der Profilseite fiel das nicht auf, weil das Bild dort im Kreis bzw. im Bildbetrachter vollstaendig zu sehen ist. Jetzt: quadratische Flaeche und contain statt cover. Fuer Anbieter- und Ortsbilder passt das Quadrat genau, es entstehen keine Raender. Weicht ein Bild doch ab (Ortsbilder werden von Hand eingetragen), wird es eingepasst statt beschnitten - der ruhige Hintergrund faengt den Rest auf. aspect-ratio statt fester Hoehe: Die Flaeche waechst mit der Spaltenbreite, statt auf dem Handy unverhaeltnismaessig flach zu werden. */ .provider-card__image { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; background: var(--gold-light); display: block; } /* Termin-Bilder liegen im Bannerformat (1600 x 500, ImageKind.Header). Eine quadratische Flaeche waere hier zu drei Vierteln leer. */ .provider-card__image--wide { aspect-ratio: 16 / 5; } .provider-card__image-placeholder { width: 100%; aspect-ratio: 1 / 1; height: auto; background: linear-gradient(135deg, var(--gold-light), var(--ivory)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--gold); opacity: 0.6; } .provider-card__image-placeholder--wide { aspect-ratio: 16 / 5; } .laluz-theme-dark .provider-card__image { background: #2C1F33; } .chip-category { background: var(--gold-light) !important; color: var(--violet) !important; font-size: 0.72rem !important; font-weight: 600 !important; border-radius: 50px !important; } /* ══ DARK THEME OVERRIDES ════════════════════════════════════════════════ */ .laluz-theme-dark .hn { background: rgba(26,14,34,0.96); border-bottom-color: rgba(255,255,255,0.06); } .laluz-theme-dark .hn__name { color: #F8F3EC; } .laluz-theme-dark .hn__link { color: rgba(255,255,255,0.55); } .laluz-theme-dark .hn__link:hover { color: #fff; background: rgba(255,255,255,0.07); } .laluz-theme-dark .hn__theme { color: rgba(255,255,255,0.45); } .laluz-theme-dark .hn__theme:hover { background: rgba(255,255,255,0.08); color: #fff; } .laluz-theme-dark .hh { background: #130B18; } .laluz-theme-dark .hh__title { color: #EAE0F0; } .laluz-theme-dark .hh__desc { color: rgba(234,224,240,0.55); } .laluz-theme-dark .hh__link { color: var(--lotus); } .laluz-theme-dark .hs__bar { background: #2C1F33; border-color: rgba(255,255,255,0.1); box-shadow: none; } .laluz-theme-dark .hs__input { color: #EAE0F0; } .laluz-theme-dark .hs__input::placeholder { color: rgba(234,224,240,0.3); } .laluz-theme-dark .hs__drop { background: #2C1F33; border-color: rgba(255,255,255,0.1); } .laluz-theme-dark .hs__opt:hover, .laluz-theme-dark .hs__opt--on { background: rgba(200,155,60,0.1); } .laluz-theme-dark .hs__opt-name { color: #EAE0F0; } .laluz-theme-dark .hs__all { color: var(--lotus); } .laluz-theme-dark .hh__btn { background: #EAE0F0; color: #1A0E22; } .laluz-theme-dark .sc { background: #130B18; } .laluz-theme-dark .sc--white { background: #1A0E22; } .laluz-theme-dark .sc--ivory { background: #1E1228; } .laluz-theme-dark .sc--gold { background: #1A0E22; } .laluz-theme-dark .sc__t { color: var(--lotus); } .laluz-theme-dark .sc__s { color: rgba(234,224,240,0.45); } .laluz-theme-dark .cg__item { background: #2C1F33; border-color: rgba(255,255,255,0.06); } .laluz-theme-dark .cg__name { color: #EAE0F0; } .laluz-theme-dark .hk__front { background: #2C1F33; } .laluz-theme-dark .hk__name { color: #EAE0F0; } .laluz-theme-dark .hk__badge { background: #2C1F33; } .laluz-theme-dark .hk__badge-num { color: var(--lotus); } .laluz-theme-dark .hk__badge-txt { color: rgba(234,224,240,0.45); } /* ══ FILTER-ZEILE hf ════════════════════════════════════════════════════ */ .hf { display: flex; align-items: center; background: #fff; border: 1.5px solid rgba(75,33,106,0.12); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(75,33,106,0.06); width: 100%; } .hf__field { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; height: 50px; flex-shrink: 0; } .hf__field--grow { flex: 1; } .hf__ico { color: var(--text-2); opacity: 0.45; flex-shrink: 0; } .hf__sel { border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--text-1); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 1.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236A5D67'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 10px 6px; } .hf__sel:disabled { opacity: 0.38; cursor: not-allowed; } .hf__sel--sm { max-width: 100px; } .hf__input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: var(--text-1); caret-color: var(--gold); min-width: 0; } .hf__input::placeholder { color: var(--text-2); opacity: 0.55; } .hf__clear { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(75,33,106,0.08); color: var(--text-2); flex-shrink: 0; transition: background .15s; } .hf__clear:hover { background: rgba(75,33,106,0.16); color: var(--violet); } .hf__divider { width: 1px; height: 24px; background: rgba(75,33,106,0.1); flex-shrink: 0; } .hf__go { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 3px; border: none; border-radius: 10px; background: var(--gold); color: #fff; flex-shrink: 0; transition: background .2s; } .hf__go:hover { background: var(--gold-dark); } /* — Aktive Filter-Tags — */ .hf-tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .hf-tag { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--gold-light); border: 1px solid rgba(200,155,60,0.3); border-radius: 50px; padding: 0.3rem 0.6rem 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 500; color: var(--text-1); } .hf-tag button { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: rgba(75,33,106,0.1); color: var(--text-2); font-size: 0.85rem; line-height: 1; padding: 0; transition: background .15s; } .hf-tag button:hover { background: rgba(75,33,106,0.22); } .hf-tags__clear { font-size: 0.76rem; font-weight: 500; color: var(--text-2); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color .15s; margin-left: 0.25rem; } .hf-tags__clear:hover { color: var(--violet); } /* — Dark Theme — */ .laluz-theme-dark .hf { background: #2C1F33; border-color: rgba(255,255,255,0.08); } .laluz-theme-dark .hf__sel, .laluz-theme-dark .hf__input { color: #EAE0F0; } .laluz-theme-dark .hf__input::placeholder, .laluz-theme-dark .hf__sel::placeholder { color: rgba(234,224,240,0.3); } .laluz-theme-dark .hf__divider { background: rgba(255,255,255,0.08); } .laluz-theme-dark .hf-tag { background: rgba(200,155,60,0.1); border-color: rgba(200,155,60,0.2); color: #EAE0F0; } /* ══ SEARCH PAGE sp ════════════════════════════════════════════════════ */ /* Aktiver Nav-Link auf der Suchseite */ .hn__link--active { color: var(--violet) !important; } /* Suchkopf-Bereich */ .sp-head { background: radial-gradient(ellipse 70% 120% at 100% 50%, rgba(217,160,191,0.14) 0%, transparent 60%), var(--cream); padding: 2.5rem 0 2rem; border-bottom: 1px solid rgba(75,33,106,0.07); } /* Breadcrumb */ .sp-bread { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-2); margin-bottom: 1.25rem; } .sp-bread a { color: var(--text-2); text-decoration: none; transition: color .15s; } .sp-bread a:hover { color: var(--gold); } .sp-bread span[aria-hidden] { opacity: 0.4; } /* Seitentitel */ .sp-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: var(--text-1); margin-bottom: 1.5rem; line-height: 1.2; } .sp-title em { color: var(--violet); font-style: italic; font-weight: 400; } /* Suchleiste auf der Suchseite – etwas kompakter */ .sp-hs .hs__bar { height: 52px; } /* Filterzeile auf der Suchseite – etwas kleiner */ .sp-head .hf { margin-top: 0.75rem; } /* Filter-Row mit Kategorie-Chips */ .sp-filter-row { margin-top: 1.25rem; overflow: hidden; } .sp-cats { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .sp-cat { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; background: transparent; border: 1.5px solid rgba(75,33,106,0.14); border-radius: 50px; font-size: 0.76rem; font-weight: 600; color: var(--text-2); white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .sp-cat:hover { background: rgba(75,33,106,0.06); border-color: rgba(75,33,106,0.3); color: var(--violet); } .sp-cat--on { background: var(--violet); border-color: var(--violet); color: #fff; } .sp-cat--on:hover { background: var(--violet-dark); border-color: var(--violet-dark); color: #fff; } /* Ergebnis-Meta-Zeile */ .sp-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(75,33,106,0.07); gap: 1rem; } .sp-count { font-size: 0.88rem; color: var(--text-2); } .sp-count strong { color: var(--text-1); font-weight: 700; } .sp-count em { color: var(--violet); font-style: normal; } /* Gruppen-Überschriften in den Suchergebnissen (Spirituelle Anbieter / Orte) */ .sp-group-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; color: var(--violet); margin-bottom: 1.25rem; } .sp-group-title--spaced { margin-top: 2.5rem; } .sp-clear { font-size: 0.8rem; font-weight: 500; color: var(--text-2); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; transition: color .15s; } .sp-clear:hover { color: var(--violet); } /* Lade-Indikator */ .sp-loading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 0; color: var(--text-2); font-size: 0.9rem; } .sp-spinner { width: 36px; height: 36px; border: 3px solid rgba(200,155,60,0.2); border-top-color: var(--gold); border-radius: 50%; animation: sp-spin 0.8s linear infinite; } @keyframes sp-spin { to { transform: rotate(360deg); } } /* Leer-Zustand */ .sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5rem 1rem; gap: 1rem; } .sp-empty__icon { font-size: 3rem; color: var(--gold); opacity: 0.4; line-height: 1; } .sp-empty__title { font-size: 1.6rem; color: var(--violet); font-family: 'Cormorant Garamond', serif; font-weight: 600; } .sp-empty__body { font-size: 0.95rem; color: var(--text-2); max-width: 420px; line-height: 1.7; } .sp-empty__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 0.5rem; flex-wrap: wrap; justify-content: center; } /* — Dark Theme — */ .laluz-theme-dark .sp-head { background: #130B18; } .laluz-theme-dark .sp-title { color: #EAE0F0; } .laluz-theme-dark .sp-bread a, .laluz-theme-dark .sp-bread { color: rgba(234,224,240,0.4); } .laluz-theme-dark .sp-cat { border-color: rgba(255,255,255,0.1); color: rgba(234,224,240,0.55); } .laluz-theme-dark .sp-cat:hover { background: rgba(255,255,255,0.07); color: #EAE0F0; } .laluz-theme-dark .sp-cat--on { background: var(--violet); border-color: var(--violet); color: #fff; } .laluz-theme-dark .sp-meta { border-top-color: rgba(255,255,255,0.06); } .laluz-theme-dark .sp-count { color: rgba(234,224,240,0.5); } .laluz-theme-dark .sp-count strong { color: #EAE0F0; } .laluz-theme-dark .sp-empty__title { color: var(--lotus); } .laluz-theme-dark .sp-empty__body { color: rgba(234,224,240,0.5); } /* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .hh { grid-template-columns: 1fr; } .hh__left { max-width: 100%; justify-self: auto; padding: 4rem 2.5rem; } .hh__right { display: none; } .hc__inner { grid-template-columns: 1fr; gap: 2.5rem; } .ft__inner { grid-template-columns: 1fr; gap: 2rem; } .ft__cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hn { padding: 0 1.25rem; gap: 1rem; } .hn__links { display: none; } .hh__left { padding: 3rem 1.25rem; } .cx { padding: 0 1.25rem; } .sc { padding: 3rem 0; } .cg { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .sg { grid-template-columns: 1fr; } .sg--3 { grid-template-columns: 1fr; } .ft__cols { grid-template-columns: 1fr; } .hc__pkgs { display: none; } /* Filter: Umkreis auf Mobile ausblenden (Ort reicht) */ .hf__field:last-of-type { display: none; } .hf__divider:last-of-type { display: none; } } @media (max-width: 480px) { .hn__cta { display: none; } .hh__title { font-size: 2.2rem; } /* Filter: nur Ort auf Kleinstbildschirm */ .hf__field:first-child { display: none; } .hf__divider:first-of-type { display: none; } } /* ══ REGISTRIERUNG rg ═══════════════════════════════════════════════════ */ /* Schritt-Indikator */ .rg-steps { background: #fff; border-bottom: 1px solid rgba(75,33,106,0.07); padding: 1rem 0; } .rg-steps__inner { display: flex; align-items: center; justify-content: center; gap: 0; } .rg-step { display: flex; align-items: center; gap: 0.5rem; opacity: 0.35; transition: opacity .25s; } .rg-step--active { opacity: 1; } .rg-step--done { opacity: 0.7; } .rg-step__num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(75,33,106,0.25); font-size: 0.78rem; font-weight: 700; color: var(--text-2); background: #fff; } .rg-step--active .rg-step__num { background: var(--violet); border-color: var(--violet); color: #fff; } .rg-step--done .rg-step__num { background: var(--gold); border-color: var(--gold); color: #fff; } .rg-step__label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); } .rg-step--active .rg-step__label { color: var(--violet); } .rg-step__line { width: 3rem; height: 1px; background: rgba(75,33,106,0.15); margin: 0 0.5rem; } /* Sektion-Wrapper */ .rg-section { padding: 3.5rem 0 5rem; background: var(--cream); min-height: calc(100vh - 72px - 64px); } /* Breiten-Constraints */ .rg-narrow { max-width: 960px; margin: 0 auto; } .rg-narrow--sm { max-width: 540px; } /* Sektions-Kopf */ .rg-hd { margin-bottom: 2.5rem; } .rg-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: var(--text-1); margin: 0.5rem 0 0.75rem; line-height: 1.2; } .rg-sub { font-size: 1rem; color: var(--text-2); line-height: 1.6; } /* Paket-Grid */ .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; } .pkg-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.75rem 1.5rem; background: #fff; border: 2px solid rgba(75,33,106,0.1); border-radius: 20px; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s, transform .15s; } .pkg-card:hover { border-color: rgba(75,33,106,0.3); box-shadow: 0 8px 28px rgba(75,33,106,0.1); transform: translateY(-2px); } .pkg-card--on { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(200,155,60,0.18), 0 8px 28px rgba(200,155,60,0.15) !important; } .pkg-card--highlight { border-color: rgba(75,33,106,0.2); background: var(--ivory); } .pkg-card__check { position: absolute; top: 1rem; right: 1rem; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(75,33,106,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; background: transparent; transition: background .2s, border-color .2s; } .pkg-card--on .pkg-card__check { background: var(--gold); border-color: var(--gold); } .pkg-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--violet); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.2rem 0.75rem; border-radius: 50px; white-space: nowrap; } .pkg-card__name { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--violet); margin-top: 0.25rem; } .pkg-card__price { font-size: 1.8rem; font-weight: 700; color: var(--text-1); line-height: 1; } .pkg-card__price small { font-size: 0.85rem; font-weight: 400; color: var(--text-2); } .pkg-card__sub { font-size: 0.76rem; color: var(--text-2); margin-bottom: 0.75rem; } .pkg-card__features { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px solid rgba(75,33,106,0.07); padding-top: 0.75rem; width: 100%; } .pkg-card__features li { font-size: 0.82rem; color: var(--text-1); } .pkg-card__off { color: var(--text-2) !important; opacity: 0.5; } /* Kostenloser Eintrag im Registrierungs-Wizard: horizontal und bewusst anders als die drei Mitgliedschaftskarten – er ist keine Mitgliedschaft. */ .pkg-free { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 1rem; width: 100%; padding: 1.5rem; margin-bottom: 2.5rem; background: #fff; border: 2px solid rgba(75,33,106,0.1); border-left: 4px solid var(--gold); border-radius: 18px; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; } .pkg-free:hover { box-shadow: 0 8px 28px rgba(75,33,106,0.1); } .pkg-free--on { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(200,155,60,0.18), 0 8px 28px rgba(200,155,60,0.15) !important; } .pkg-free__main { display: flex; flex-direction: column; gap: 0.3rem; } .pkg-free__eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .pkg-free__name { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; color: var(--violet); line-height: 1.15; } .pkg-free__desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; } /* Mehrere Absaetze (Funke): etwas mehr Luft als der Spalten-gap hergibt. */ .pkg-free__desc + .pkg-free__desc { margin-top: .35rem; } .pkg-free__list { list-style: none; padding: 0.7rem 0 0; margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; border-top: 1px solid rgba(75,33,106,0.07); } .pkg-free__list li { font-size: 0.8rem; color: var(--text-1); } .pkg-free__aside { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; } .pkg-free__price { font-size: 1.9rem; font-weight: 700; color: var(--text-1); line-height: 1; } .pkg-free__price small { font-size: 0.9rem; font-weight: 400; color: var(--text-2); } .pkg-free--on .pkg-card__check { background: var(--gold); border-color: var(--gold); } /* Zwischenüberschrift über den drei Mitgliedschaften */ .rg-hd--sub { margin-bottom: 1.5rem; text-align: center; } .rg-title--sm { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--violet); margin-bottom: 0.4rem; } /* Formular */ .rg-form { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.75rem; } .rg-field { display: flex; flex-direction: column; gap: 0.35rem; } .rg-label { font-size: 0.85rem; font-weight: 600; color: var(--text-1); } .rg-hint-inline { font-weight: 400; color: var(--text-2); font-size: 0.78rem; } /* Kleine Textschaltfläche innerhalb eines Hinweises – etwa „Telefonnummer übernehmen" beim WhatsApp-Feld. Sieht wie ein Verweis aus, ist aber eine Schaltfläche: Sie ändert einen Formularwert und führt nicht zu einer anderen Seite. */ .rg-link-btn { background: none; border: 0; padding: 0; margin-left: 0.35rem; font: inherit; color: var(--gold); text-decoration: underline; cursor: pointer; } .rg-link-btn:hover { text-decoration: none; } .rg-input { width: 100%; min-width: 0; height: 48px; padding: 0 1rem; border: 1.5px solid rgba(75,33,106,0.16); border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 0.92rem; color: var(--text-1); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; } .rg-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,155,60,0.15); } .rg-input--err { border-color: #D94F4F !important; } .rg-pw-wrap { position: relative; } .rg-pw-wrap .rg-input { width: 100%; padding-right: 3rem; } /* Das Auge war zwar vorhanden, aber als 20 × 20 großes Symbol in Textgrau kaum als Schaltfläche zu erkennen – erst recht nicht per Daumen auf dem Handy. Jetzt ein klarer Klickbereich von 40 × 40 mit kräftigerer Farbe. */ .rg-pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: none; border-radius: 50%; color: var(--violet); font-size: 1rem; cursor: pointer; width: 40px; height: 40px; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .rg-pw-toggle:hover { color: var(--gold); background: rgba(200,155,60,.12); } .rg-pw-toggle:active { background: rgba(200,155,60,.2); } .laluz-theme-dark .rg-pw-toggle { color: rgba(234,224,240,.85); } .rg-field-err { font-size: 0.76rem; color: #D94F4F; } /* Begleittext und Bestätigung unter einem Formularfeld – gleiche Größe wie die Fehlermeldung, damit die Zeile beim Umschalten nicht springt. */ .rg-field-hint { display: block; margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.5; color: var(--text-2); } .rg-field-ok { display: block; margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.5; color: #3E8E5A; } .laluz-theme-dark .rg-field-ok { color: #7BC49A; } /* Empfehlungscode: gleichmäßige Zeichenbreite und weite Sperrung, damit SPIRIT-AQ4R beim Abtippen gut zu lesen ist. */ .rg-input--code { font-family: 'Consolas', 'SF Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; } .rg-check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.84rem; color: var(--text-2); cursor: pointer; line-height: 1.5; } .rg-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--gold); } .rg-check a { color: var(--gold); } /* Fehler-Box */ .rg-errors { background: rgba(217,79,79,0.08); border: 1px solid rgba(217,79,79,0.25); border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem; } .rg-errors p { font-size: 0.85rem; color: #D94F4F; margin: 0; line-height: 1.5; } /* Aktions-Zeile */ .rg-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } .rg-actions--c { justify-content: center; } .rg-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; background: var(--gold); color: #fff; border: none; border-radius: 50px; font-size: 0.88rem; font-weight: 600; transition: background .2s, transform .15s, box-shadow .2s; } .rg-btn-primary:hover:not(:disabled) { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(200,155,60,0.3); } .rg-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .rg-btn-secondary { display: inline-flex; align-items: center; padding: 0.85rem 1.5rem; background: transparent; color: var(--text-2); border: 1.5px solid rgba(75,33,106,0.15); border-radius: 50px; font-size: 0.88rem; font-weight: 500; transition: border-color .2s, color .2s; } .rg-btn-secondary:hover { border-color: var(--violet); color: var(--violet); } .rg-hint { font-size: 0.78rem; color: var(--text-2); margin: 0; } .rg-login-hint { text-align: center; font-size: 0.85rem; color: var(--text-2); margin-top: 1.5rem; } .rg-login-hint a { color: var(--gold); } /* Lade-Spinner im Button */ .rg-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: sp-spin .7s linear infinite; flex-shrink: 0; } /* Erfolgs-Schritt */ .rg-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 2rem 0; } .rg-success__icon { font-size: 4rem; color: var(--gold); line-height: 1; animation: rg-pop .4s ease-out; } @keyframes rg-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .rg-success__box { width: 100%; background: var(--ivory); border-radius: 16px; padding: 1.75rem; text-align: left; margin: 0.5rem 0 1rem; } .rg-success__box h3 { font-size: 1rem; font-weight: 700; color: var(--violet); margin-bottom: 1.25rem; font-family: 'Montserrat', sans-serif; } .rg-success__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .rg-success__list li { display: flex; align-items: flex-start; gap: 0.85rem; } .rg-success__num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--gold); color: #fff; border-radius: 50%; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .rg-success__list strong { font-size: 0.9rem; color: var(--text-1); display: block; margin-bottom: 0.15rem; } .rg-success__list p { font-size: 0.82rem; color: var(--text-2); margin: 0; } .rg-success__list em { color: var(--violet); font-style: normal; } /* Vertrauens-Grid */ .rg-trust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .rg-trust { padding: 1.5rem; background: var(--ivory); border-radius: 16px; border: 1px solid rgba(75,33,106,0.07); } .rg-trust__icon { font-size: 1.8rem; color: var(--gold); display: block; margin-bottom: 0.75rem; } .rg-trust h3 { font-family: 'Montserrat', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--violet); margin-bottom: 0.4rem; } .rg-trust p { font-size: 0.84rem; color: var(--text-2); line-height: 1.6; } /* Responsive */ @media (max-width: 768px) { .pkg-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .pkg-free { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .pkg-free__aside { flex-direction: row; align-items: center; justify-content: space-between; } .rg-steps__inner { gap: 0; } .rg-step__label { display: none; } } /* ══ PROFILWAHL rc ══════════════════════════════════════════════════════ */ .rc-choice { background: var(--cream); min-height: calc(100vh - 72px); } .rc-hd { text-align: center; margin-bottom: 3rem; } .rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; max-width: 900px; margin: 0 auto 2rem; } /* Basis-Karte */ .rc-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 2.25rem 2rem 1.75rem; border-radius: 24px; border: 2px solid rgba(75,33,106,0.1); text-decoration: none; color: var(--text-1); background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; } .rc-card:hover { transform: translateY(-4px); border-color: rgba(200,155,60,0.4); box-shadow: 0 16px 48px rgba(200,155,60,0.15); color: var(--text-1); } /* Lichtprofil – Gold-Akzent */ .rc-card--licht { background: var(--ivory); } .rc-card--licht .rc-card__glow { position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(200,155,60,0.18) 0%, transparent 70%); pointer-events: none; } /* Suchprofil – sanfter */ .rc-card--suche { background: #fff; } .rc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .rc-card__icon { font-size: 2rem; color: var(--gold); line-height: 1; } .rc-card__badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--violet); color: #fff; padding: 0.25rem 0.7rem; border-radius: 50px; } .rc-card__badge--soft { background: rgba(75,33,106,0.1); color: var(--violet); } .rc-card__title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 700; color: var(--violet); line-height: 1.1; } .rc-card__desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.65; } .rc-card__list { list-style: none; padding: 0; margin: 0.25rem 0; display: flex; flex-direction: column; gap: 0.45rem; } .rc-card__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-1); } .rc-card__list li svg { color: var(--gold); flex-shrink: 0; } .rc-card__note { color: var(--text-2) !important; font-style: italic; } .rc-card__note svg { color: var(--text-2) !important; } .rc-card__price { font-size: 1rem; color: var(--text-2); margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(75,33,106,0.07); } .rc-card__price strong { font-size: 1.5rem; color: var(--text-1); font-weight: 700; } .rc-card__price span { font-size: 0.82rem; } .rc-card__cta { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; background: var(--gold); color: #fff; border-radius: 12px; font-size: 0.88rem; font-weight: 600; margin-top: 0.25rem; transition: background .2s; } .rc-card:hover .rc-card__cta { background: var(--gold-dark); } .rc-card__cta--soft { background: rgba(75,33,106,0.08); color: var(--violet); } .rc-card:hover .rc-card__cta--soft { background: var(--violet); color: #fff; } .rc-note { text-align: center; font-size: 0.85rem; color: var(--text-2); margin-top: 0.5rem; } .rc-note a { color: var(--gold); } /* ── Suchprofil Feature-Box ─ */ .sp-feat-box { display: flex; flex-direction: column; gap: 1rem; background: var(--ivory); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.25rem; } .sp-feat { display: flex; align-items: flex-start; gap: 0.85rem; } .sp-feat__icon { font-size: 1.3rem; color: var(--gold); flex-shrink: 0; line-height: 1.3; } .sp-feat strong { font-size: 0.88rem; color: var(--text-1); display: block; margin-bottom: 0.1rem; } .sp-feat p { font-size: 0.8rem; color: var(--text-2); margin: 0; line-height: 1.5; } /* Preis-Pill */ .sp-price-pill { display: inline-flex; align-items: baseline; gap: 0.4rem; background: linear-gradient(135deg, var(--violet), #3D1540); color: #fff; padding: 0.6rem 1.4rem; border-radius: 50px; margin-bottom: 0.25rem; align-self: flex-start; } .sp-price-pill__val { font-size: 1.4rem; font-weight: 700; font-family: 'Cormorant Garamond', serif; } .sp-price-pill__per { font-size: 0.78rem; opacity: 0.75; } @media (max-width: 700px) { .rc-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } /* ══ PROFILWAHL – NEUE LAYOUT-STRUKTUR rc-group / rc-pkg ═══════════════ */ .rc-choice { background: var(--cream); min-height: calc(100vh - 72px); padding-bottom: 5rem; } .rc-hd { text-align: center; margin-bottom: 3.5rem; } /* Gruppen-Container */ .rc-group { max-width: 980px; margin: 0 auto 2.5rem; } .rc-group--suche { margin-bottom: 0; } .rc-group__hd { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .rc-group__icon { font-size: 1.5rem; color: var(--gold); line-height: 1; flex-shrink: 0; margin-top: 0.15rem; } .rc-group__icon--soft { color: var(--violet); opacity: 0.55; } .rc-group__title { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; color: var(--violet); line-height: 1.2; margin-bottom: 0.25rem; } .rc-group__sub { font-size: 0.86rem; color: var(--text-2); margin: 0; } .rc-group__note { font-size: 0.8rem; color: var(--text-2); text-align: center; margin-top: 1rem; opacity: 0.75; } /* 3-Spalten-Grid für Pakete */ .rc-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } /* Paket-Karte (als Link) */ .rc-pkg { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.75rem 1.5rem 1.5rem; background: #fff; border: 2px solid rgba(75,33,106,0.1); border-radius: 20px; text-decoration: none; color: var(--text-1); transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; } .rc-pkg:hover { transform: translateY(-4px); border-color: rgba(200,155,60,0.4); box-shadow: 0 16px 48px rgba(200,155,60,0.15); color: var(--text-1); } /* Highlighted (Leuchtkraft) */ .rc-pkg--top { border-color: var(--gold); background: linear-gradient(160deg, #fff 60%, var(--light-gold) 100%); box-shadow: 0 8px 32px rgba(200,155,60,0.12); } .rc-pkg--top:hover { box-shadow: 0 20px 56px rgba(200,155,60,0.22); } .rc-pkg__badge { position: absolute; top: 14px; right: 14px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; background: var(--gold); color: #fff; padding: 0.2rem 0.65rem; border-radius: 50px; } .rc-pkg__name { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--violet); line-height: 1.1; } .rc-pkg__claim { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-1); line-height: 1.4; margin-top: 0.3rem; } .laluz-theme-dark .rc-pkg__claim { color: rgba(234,224,240,0.9); } .rc-pkg__price { font-size: 1.65rem; font-weight: 700; color: var(--text-1); line-height: 1; margin-top: 0.25rem; } .rc-pkg__price small { font-size: 0.85rem; font-weight: 400; color: var(--text-2); } .rc-pkg__mo { font-size: 0.78rem; color: var(--text-2); margin-bottom: 0.5rem; } .rc-pkg__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; border-top: 1px solid rgba(75,33,106,0.07); padding-top: 0.85rem; } .rc-pkg__list li { font-size: 0.81rem; color: var(--text-1); } .rc-pkg__list li strong { color: var(--text-1); } .rc-pkg__off { color: var(--text-2) !important; opacity: 0.55; } .rc-pkg__cta { margin-top: 0.75rem; padding: 0.6rem 1rem; background: rgba(75,33,106,0.07); color: var(--violet); border-radius: 10px; font-size: 0.84rem; font-weight: 600; text-align: center; transition: background .2s, color .2s; } .rc-pkg:hover .rc-pkg__cta { background: var(--violet); color: #fff; } .rc-pkg__cta--gold { background: var(--gold); color: #fff; } .rc-pkg:hover .rc-pkg__cta--gold { background: var(--gold-dark); } /* Trennlinie */ .rc-divider { display: flex; align-items: center; gap: 1rem; max-width: 980px; margin: 0 auto 2.5rem; color: var(--text-2); font-size: 0.82rem; } .rc-divider::before, .rc-divider::after { content: ''; flex: 1; height: 1px; background: rgba(75,33,106,0.12); } .rc-divider span { padding: 0 0.5rem; white-space: nowrap; } /* Suchprofil-Karte */ .rc-suche { display: flex; align-items: stretch; gap: 0; background: #fff; border: 2px solid rgba(75,33,106,0.1); border-radius: 20px; text-decoration: none; color: var(--text-1); overflow: hidden; max-width: 980px; margin: 0 auto; transition: border-color .2s, box-shadow .2s; } .rc-suche:hover { border-color: rgba(75,33,106,0.3); box-shadow: 0 12px 40px rgba(75,33,106,0.1); color: var(--text-1); } .rc-suche__left { flex: 1; padding: 1.75rem 2rem; border-right: 1px solid rgba(75,33,106,0.08); } .rc-suche__right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.75rem 2.5rem; min-width: 220px; background: linear-gradient(160deg, var(--ivory) 0%, var(--cream) 100%); } .rc-suche__features { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; } .rc-suche__feat { display: flex; align-items: flex-start; gap: 0.85rem; } .rc-suche__feat > span { font-size: 1.15rem; color: var(--violet); opacity: 0.6; flex-shrink: 0; margin-top: 0.1rem; line-height: 1.3; } .rc-suche__feat strong { font-size: 0.86rem; color: var(--text-1); display: block; margin-bottom: 0.1rem; } .rc-suche__feat p { font-size: 0.79rem; color: var(--text-2); margin: 0; line-height: 1.5; } .rc-suche__free { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-2); background: rgba(75,33,106,0.04); border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0; } .rc-suche__free svg { flex-shrink: 0; color: var(--violet); opacity: 0.5; } /* „Gut zu wissen" – ruhiger Hinweiskasten unter den Leistungen. */ .rc-suche__note { background: rgba(75,33,106,0.04); border-radius: 10px; padding: 0.75rem 0.9rem; } .rc-suche__note strong { display: block; font-size: 0.8rem; color: var(--violet); margin-bottom: 0.25rem; } .rc-suche__note p { font-size: 0.78rem; color: var(--text-2); line-height: 1.6; margin: 0; } .laluz-theme-dark .rc-suche__note { background: rgba(255,255,255,0.05); } .laluz-theme-dark .rc-suche__note strong { color: var(--lotus, #D9A0BF); } .laluz-theme-dark .rc-suche__note p { color: rgba(234,224,240,0.85); } .rc-suche__price { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; } .rc-suche__val { font-size: 2.2rem; font-weight: 700; font-family: 'Cormorant Garamond', serif; color: var(--violet); line-height: 1; } .rc-suche__per { font-size: 0.8rem; color: var(--text-2); } .rc-suche__cancel { font-size: 0.72rem; color: var(--text-2); opacity: 0.7; } .rc-suche__cta { padding: 0.7rem 1.5rem; background: var(--violet); color: #fff; border-radius: 12px; font-size: 0.84rem; font-weight: 600; transition: background .2s; white-space: nowrap; } .rc-suche:hover .rc-suche__cta { background: #3D1540; } /* Responsive */ @media (max-width: 860px) { .rc-pkg-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } .rc-suche { flex-direction: column; } .rc-suche__left { border-right: none; border-bottom: 1px solid rgba(75,33,106,0.08); } .rc-suche__right { min-width: 0; } } /* ══════════════════════════════════════════════════════════════════════════ NEUE HOMEPAGE – MOCKUP-IMPLEMENTIERUNG ══════════════════════════════════════════════════════════════════════════ */ /* ── NAVIGATION nv (3-Spalten: Links | Logo | Rechts) ─────────────────── */ .nv { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 2.5rem; background: rgba(248,243,236,0.97); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(200,155,60,0.1); position: sticky; top: 0; z-index: 100; min-height: 80px; } .nv__left { display: flex; align-items: center; gap: 2rem; } .nv__right { display: flex; align-items: center; gap: 1.25rem; justify-content: flex-end; } .nv__link { font-family: 'Montserrat', sans-serif; font-size: 0.875rem; font-weight: 500; color: var(--text-1); text-decoration: none; transition: color .2s; white-space: nowrap; } .nv__link:hover { color: var(--gold); } .nv__logo { display: flex; align-items: center; justify-content: center; padding: 0.4rem; text-decoration: none; } .nv__logo img { height: 64px; width: auto; display: block; object-fit: contain; } .nv__cta { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; background: var(--gold); color: #fff; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 0.84rem; font-weight: 600; text-decoration: none; transition: background .2s; white-space: nowrap; } .nv__cta:hover { background: var(--gold-dark); color: #fff; } .nv__theme { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s; flex-shrink: 0; } .nv__theme:hover { background: rgba(200,155,60,0.1); color: var(--gold); } /* Nur für Screenreader und Crawler sichtbar – nimmt keinen Platz im Layout ein. Wird für Überschriften genutzt, deren Aussage bereits im Bild transportiert wird. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── HERO ───────────────────────────────────────────────────────────────── */ .hero { display: block; position: relative; background: var(--cream); /* Nur horizontal beschneiden (Logo/Bild), damit die nach unten aufklappenden Such-Dropdowns nicht am Hero-Rand abgeschnitten werden. `clip` erzwingt – anders als `hidden` – keine Beschneidung der vertikalen Achse. */ overflow-x: clip; padding: 0; margin: 0; } /* Die -Wrapper der Hero-Bilder erzeugen keine eigene Box – das bleibt damit direktes Kind von .hero und das Layout entspricht exakt dem ohne . */ .hero picture { display: contents; } /* Logo: vertikal mittig zwischen Bildoberkante und Statistik-Zeile */ .hero__logo-top { position: absolute; /* 2.35vw weniger als zuvor (3.5vw): genau der oben weggeschnittene Streifen. Sonst saesse das Logo gegenueber dem Motiv um diesen Betrag zu tief. */ top: 1.15vw; left: 50%; transform: translateX(calc(-50% - 1cm)); height: clamp(216px, 27vw, 432px); width: auto; z-index: 3; pointer-events: none; object-fit: contain; } /* Bild: oben und unten je 5 % beschnitten. Oben lag ein flacher, dunklerer Beigestreifen ueber dem Motiv, unten endete die Lilawelle in einem dunklen Balken mit harter Kante quer ueber die Seite - beides gehoert nicht zum Bildmotiv, sondern ist Rand. 1280 x 601 abzueglich 2 x 5 % ergibt das Seitenverhaeltnis unten; object-fit deckt die Box ab, der Rest wird beschnitten statt gestaucht. */ .hero__header-img { width: 100%; height: auto; /* 1280 x 601 abzueglich 5 % oben und 9 % unten. */ aspect-ratio: 1280 / 517; object-fit: cover; /* 36 %: von den 84 weggeschnittenen Zeilen liegen 30 oben, 54 unten. */ object-position: center 36%; /* Die Lilawelle laeuft unten aus, statt an einer Kante abzubrechen. Genau diese Kante war der Balken quer ueber die Seite: Ein beschnittenes Bild endet immer hart, egal wie viel man wegnimmt - nur ein Auslaufen nimmt ihm die Linie. Darunter liegt derselbe Cremeton, in den das Bild uebergeht. */ -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); display: block; } /* Content-Wrapper überlagert die untere Bildzone; Suche endet ca. 4 cm über Bildunterkante */ .hero__body { position: relative; z-index: 1; /* Zaehler und Suchleiste sitzen hoeher im Bild als zuvor. Der Wert ist kleiner als die urspruenglichen -19.5vw, weil das Bild oben und unten beschnitten ist: Der Block haengt an der Unterkante des Bildes und ruecken die 84 beschnittenen Zeilen ohnehin schon mit nach oben. Ohne diesen Ausgleich schoebe er sich ueber die Zeile „Verbinden. Heilen. Erwachen." des Logos. */ margin-top: -17vw; /* Der untere Abstand gehoert zur Verlaufsgeometrie und darf nicht angetastet werden: Die Farbstopps sind Prozentwerte der Elementhoehe. Wird das Element kuerzer, zieht sich der Cremeschleier ueber die untere Kante der Hero-Grafik und legt einen fahlen Streifen darueber, der dann hart abbricht. Der Satz darunter wird deshalb ueber sein eigenes negatives margin verschoben (siehe .hero__claim), nicht ueber diesen Wert hier. */ padding: 4vw 1.5rem 6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; /* Transparenz bis 72 % (deckt Stats, Suche und Chips ab), dann sanft zu Cream */ background: linear-gradient( to bottom, rgba(248,243,236,0) 0%, rgba(248,243,236,0) 72%, rgba(248,243,236,0.55) 85%, rgba(248,243,236,0.95) 95%, #F8F3EC 100% ); } .hero::before { display: none; } /* Schnellfilter-Chips unter der Suchleiste */ .hero__chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 720px; } .hero__chip { display: inline-flex; align-items: center; padding: 0.38rem 1rem; background: rgba(255,255,255,0.75); border: 1px solid rgba(200,155,60,0.28); border-radius: 50px; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--text-1); text-decoration: none; backdrop-filter: blur(8px); transition: background .18s, border-color .18s, color .18s; } .hero__chip:hover { background: rgba(200,155,60,0.15); border-color: rgba(200,155,60,0.55); color: var(--text-1); } /* (altes .hero__dot wird nicht mehr gebraucht – in SVG integriert) */ .hero__dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(200,155,60,0.2), 0 0 10px rgba(200,155,60,0.4); flex-shrink: 0; } .hero__dot--sm { width: 6px; height: 6px; } /* Pins sind jetzt in die SVG integriert – keine HTML-Pins mehr */ /* Hero Text */ .hero__content { position: relative; z-index: 1; max-width: 720px; } .hero__title { font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; color: var(--violet); line-height: 1.15; margin: 0 0 0.5rem; letter-spacing: 0.01em; outline: none; text-shadow: 0 1px 8px rgba(248,243,236,0.9), 0 0 20px rgba(248,243,236,0.6); } .hero__sub { font-size: clamp(0.95rem, 1.8vw, 1.1rem); color: var(--text-2); line-height: 1.65; margin: 0; max-width: 560px; margin-inline: auto; } /* Statistiken */ .hero__stats { position: relative; z-index: 1; display: flex; align-items: center; background: transparent; border: none; box-shadow: none; backdrop-filter: none; gap: 0; overflow: visible; } .hero__stat { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 2.5rem; color: var(--gold); } .hero__stat:first-child { border-left: none; } .hero__stat strong { display: block; font-size: 2rem; font-weight: 700; font-family: 'Cormorant Garamond', serif; color: var(--text-1); line-height: 1; } .hero__stat span { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-2); margin-top: 0.1rem; text-transform: uppercase; letter-spacing: 0.05em; } .hero__stat-sep { width: 1px; height: 40px; background: rgba(75,33,106,0.2); flex-shrink: 0; } /* Bereits vertreten in */ .hero__rep { position: relative; z-index: 1; font-size: 0.75rem; color: var(--text-2); margin: 0; line-height: 1.6; opacity: 0.85; } .hero__rep strong { color: var(--text-1); font-weight: 500; } /* ── SUCHLEISTE sb (3 Sektionen + Button) ──────────────────────────────── */ /* Satz im freien Bereich, unmittelbar ueber „Wege des Lichts“. Er traegt die Aussage der Startseite - deshalb groesser und fett. Der Abstand sitzt oben, nicht unten: Der Satz gehoert zu dem, was darunter folgt, und soll nicht wie ein Nachsatz an der Grafik kleben. Die Breite ist begrenzt, weil ein zentrierter Fliesstext ueber die volle Seitenbreite das Auge die Zeilenanfaenge nicht mehr finden laesst. */ .hero__claim { max-width: 860px; /* Einen halben Zentimeter hoeher. Verschoben wird der Satz selbst, nicht der Abstand darueber: Der Bereich, in den er hineinrueckt, ist bereits voll deckendes Cremeweiss, die Hero-Grafik bleibt unberuehrt. */ margin: -0.5cm auto 0; padding: 1rem 1.5rem 0; text-align: center; /* Dieselbe Schrift wie die Abschnittsüberschriften („Wege des Lichts“) und das Gold aus dem Hintergrundbild – der Satz gehört sichtbar zur Seite und nicht zum Fliesstext darunter. Genommen ist das dunklere Gold der Palette: Das helle #C89B3C ergibt auf dem Cremegrund nur etwa 2,4:1 Kontrast und ist damit selbst als große Schrift schwer zu lesen; #A07B28 liegt bei rund 3,4:1 und bleibt dieselbe Farbfamilie. */ font-family: 'Cormorant Garamond', serif; /* Einen typografischen Punkt kleiner als zuvor. Deshalb steht das -1pt in der Rechnung statt eines neuen glatten Werts: So bleibt ablesbar, dass es genau eine Stufe gegenueber 1.5rem/2rem ist. */ font-size: clamp(calc(1.5rem - 1pt), 3vw, calc(2rem - 1pt)); font-weight: 700; line-height: 1.35; color: var(--gold-dark, #A07B28); background: var(--cream); } /* Der Abschnitt darunter bringt seinen eigenen Abstand mit - zusammen waere es zu viel, und der Satz stuende wieder allein statt bei den Kategorien. */ .hero__claim + .wdl { padding-top: 2.5rem; } .sb { position: relative; z-index: 2; display: flex; align-items: stretch; background: #fff; border-radius: 20px; border: 1.5px solid rgba(200,155,60,0.2); box-shadow: 0 8px 48px rgba(58,44,53,0.12); width: 100%; max-width: 920px; } .sb__section { display: flex; flex-direction: column; justify-content: center; padding: 0.85rem 1.25rem; flex: 1; min-width: 0; } .sb__section--grow { flex: 1.4; } .sb__lbl { font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); opacity: 0.7; margin-bottom: 0.2rem; display: block; } .sb__inp-wrap { display: flex; align-items: center; gap: 0.5rem; } .sb__ico { color: var(--gold); flex-shrink: 0; opacity: 1; width: 20px; height: 20px; } .sb__arr { color: var(--gold); flex-shrink: 0; opacity: 0.8; margin-left: auto; pointer-events: none; width: 14px; height: 14px; } .sb__input { border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 0.88rem; color: var(--text-1); width: 100%; padding: 0; } .sb__input::placeholder { color: var(--text-2); opacity: 0.55; } .sb__input::-webkit-search-decoration, .sb__input::-webkit-search-cancel-button { -webkit-appearance: none; } .sb__sel { border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 0.88rem; color: var(--text-1); cursor: pointer; -webkit-appearance: none; appearance: none; width: 100%; padding: 0; } .sb__sep { width: 1px; background: rgba(75,33,106,0.09); margin: 0.75rem 0; flex-shrink: 0; } .sb__clear { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(106,93,103,0.12); color: var(--text-2); cursor: pointer; flex-shrink: 0; padding: 0; transition: background .15s; } .sb__clear:hover { background: rgba(106,93,103,0.22); } .sb__btn { flex-shrink: 0; background: var(--gold); color: #fff; border: none; border-radius: 0 18px 18px 0; padding: 0 3.25rem; font-family: 'Montserrat', sans-serif; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background .2s; white-space: nowrap; min-width: 160px; } .sb__btn:hover { background: var(--gold-dark); } /* Autocomplete Dropdown */ .sb__drop { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff; border: 1.5px solid rgba(200,155,60,0.18); border-radius: 18px; box-shadow: 0 20px 60px rgba(58,44,53,0.15); overflow: hidden; z-index: 50; } .sb__opt { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.4rem; cursor: pointer; transition: background .1s; color: var(--text-1); } .sb__opt:hover, .sb__opt--on { background: var(--gold-light); } .sb__opt svg { color: var(--text-2); flex-shrink: 0; opacity: 0.5; } .sb__opt-name { font-size: 0.88rem; font-weight: 500; color: var(--text-1); } .sb__opt-city { font-size: 0.76rem; color: var(--text-2); margin-top: 1px; } .sb__opt-ok { margin-left: auto; font-size: 0.72rem; color: var(--gold); font-weight: 700; } .sb__group { padding: 0.55rem 1.4rem 0.3rem; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); opacity: 0.7; } .sb__all { padding: 0.8rem 1.4rem; font-size: 0.82rem; color: var(--gold); font-weight: 600; cursor: pointer; border-top: 1px solid rgba(200,155,60,0.12); transition: background .1s; } .sb__all:hover { background: var(--gold-light); } /* ── 3 EINSTIEGSKARTEN ec (Spirituelle Anbieter | Orte | Angebote) ─────────────── */ .ec { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 380px; } .ec__card { position: relative; display: flex; align-items: flex-end; text-decoration: none; color: #fff; overflow: hidden; background-size: cover; background-position: center; transition: filter .3s; } .ec__card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,10,40,0.1) 0%, rgba(30,10,40,0.75) 100%); transition: opacity .3s; z-index: 1; } .ec__card:hover { filter: brightness(1.05); } .ec__card:hover::before { opacity: 0.9; } /* Gradient-Platzhalter bis echte Fotos verfügbar sind */ .ec__card--wb { background: linear-gradient(160deg, #3D1B45 0%, #5A235F 45%, #422040 100%); } .ec__card--orte { background: linear-gradient(160deg, #1C2E1C 0%, #2D5A35 45%, #1A2E20 100%); } .ec__card--angebote { background: linear-gradient(160deg, #2E1A0C 0%, #5A3D1B 45%, #C9A15A 100%); } .ec__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 2rem 1.75rem; width: 100%; } .ec__ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.28); margin-bottom: 0.25rem; backdrop-filter: blur(6px); color: #fff; } .ec__title { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; font-weight: 700; color: #fff; line-height: 1; margin: 0; } .ec__desc { font-size: 0.82rem; color: rgba(255,255,255,0.78); line-height: 1.5; margin: 0; } .ec__btn { display: inline-block; margin-top: 0.5rem; padding: 0.45rem 1.1rem; background: rgba(200,155,60,0.22); border: 1px solid rgba(200,155,60,0.5); color: #fff; border-radius: 8px; font-size: 0.78rem; font-weight: 600; backdrop-filter: blur(4px); transition: background .2s, border-color .2s; } .ec__card:hover .ec__btn { background: var(--gold); border-color: var(--gold); } /* ── ABSCHNITTSKOPF mit Dekorlinien sec-hd ──────────────────────────────── */ .sec-hd { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 0.25rem; } .sec-hd__rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,155,60,0.35), transparent); } .sec-hd__t { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 700; color: var(--text-1); white-space: nowrap; margin: 0; } /* ── WEGE DES LICHTS wdl ─────────────────────────────────────────────────── */ /* Foto-Karten Variante */ .wdl__grid--photo { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.75rem; margin-top: 2.5rem; } .wdl__item--photo { display: flex; flex-direction: column; align-items: stretch; text-decoration: none; border-radius: 14px; overflow: hidden; border: 1px solid rgba(200,155,60,0.14); background: var(--ivory); transition: transform .22s, box-shadow .22s, border-color .22s; } .wdl__item--photo:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(75,33,106,0.14); border-color: rgba(200,155,60,0.4); } .wdl__photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .wdl__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .wdl__item--photo:hover .wdl__photo img { transform: scale(1.07); } .wdl__photo--orte { background: linear-gradient(160deg, #3D6B4F 0%, #2A4A38 45%, #1C3327 100%); } /* Fallback-Glyph, wenn eine Kategorie kein Bild hat */ .wdl__photo-glyph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(255, 255, 255, 0.55); transition: transform .3s ease; } .wdl__item--photo:hover .wdl__photo-glyph { transform: scale(1.07); } .wdl__lbl--photo { font-size: 0.68rem; font-weight: 600; text-align: center; color: var(--text-1); line-height: 1.3; padding: 0.45rem 0.4rem 0.55rem; } @media (max-width: 1024px) { .wdl__grid--photo { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 640px) { .wdl__grid--photo { grid-template-columns: repeat(3, 1fr); } } .wdl { background: var(--cream); padding: 4.5rem 0 5rem; } .wdl__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.75rem; margin-top: 2.5rem; } .wdl__item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-2); padding: 1.1rem 0.4rem; border-radius: 16px; transition: background .2s, color .2s, transform .2s; text-align: center; } .wdl__item:hover { background: rgba(200,155,60,0.1); color: var(--violet); transform: translateY(-4px); } .wdl__ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(200,155,60,0.28); color: var(--gold); transition: border-color .2s, background .2s; } .wdl__ico svg { width: 24px; height: 24px; } .wdl__item:hover .wdl__ico { border-color: var(--gold); background: rgba(200,155,60,0.1); } .wdl__lbl { font-size: 0.68rem; font-weight: 500; line-height: 1.35; color: inherit; } /* ── WARUM LALUZ? wlz ────────────────────────────────────────────────────── */ .wlz { background: var(--ivory); padding: 5rem 0; } /* 2-Spalten-Wrapper: Text 60% | Foto 40% */ .wlz__wrap { display: grid; grid-template-columns: 3fr 2fr; gap: 4rem; align-items: center; } .wlz__left { display: flex; flex-direction: column; gap: 2rem; } .wlz__title { font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 700; color: var(--text-1); line-height: 1.15; margin: 0; } .wlz__reasons { display: flex; flex-direction: column; gap: 1.75rem; } /* Horizontale Reason-Zeile: Icon links | Text rechts */ .wlz__item { display: flex; align-items: flex-start; gap: 1.25rem; } .wlz__ico { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(200,155,60,0.1); border: 1.5px solid rgba(200,155,60,0.22); color: var(--gold); flex-shrink: 0; } .wlz__item h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text-1); margin: 0 0 0.35rem; } .wlz__item p { font-size: 0.88rem; color: var(--text-2); line-height: 1.65; margin: 0; } /* Rechte Spalte: warmes Portrait-Foto (Platzhalter) */ .wlz__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 24px 64px rgba(58,44,53,0.14); } .wlz__photo-inner { width: 100%; height: 100%; background: linear-gradient(160deg, #D4A070 0%, #C9956A 30%, #B07050 55%, #6B3E2A 100%); position: relative; } /* Footer-Logo & Brand */ .ft__brand { display: flex; align-items: flex-start; gap: 1rem; } .ft__logo-img { border-radius: 10px; object-fit: contain; flex-shrink: 0; } .ft__brand-text { display: flex; flex-direction: column; gap: 0.4rem; } .ft__social { display: flex; gap: 0.75rem; margin-top: 0.25rem; } .ft__soc { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); transition: background .2s, color .2s; text-decoration: none; } .ft__soc:hover { background: rgba(200,155,60,0.2); color: var(--gold); } /* ── DARK MODE für neue Elemente ──────────────────────────────────────────── */ .laluz-theme-dark .nv { background: rgba(22,14,27,0.97); border-bottom-color: rgba(200,155,60,0.15); } .laluz-theme-dark .nv__link { color: rgba(255,255,255,0.8); } .laluz-theme-dark .nv__link:hover { color: var(--gold); } .laluz-theme-dark .hero { background: #130B1A; } .laluz-theme-dark .hero__header-img { opacity: 0.7; mix-blend-mode: luminosity; } .laluz-theme-dark .hero__body { background: linear-gradient( to bottom, transparent 0%, rgba(19,11,26,0.15) 60%, rgba(19,11,26,0.80) 83%, #130B1A 96% ); } .laluz-theme-dark .hero__title { color: #D9A0BF; } .laluz-theme-dark .hero__sub { color: rgba(255,255,255,0.6); } .laluz-theme-dark .hero__claim { color: var(--gold); } .laluz-theme-dark .hero__stats { background: rgba(22,14,27,0.9); border-color: rgba(200,155,60,0.2); } .laluz-theme-dark .hero__stat strong { color: rgba(255,255,255,0.9); } .laluz-theme-dark .hero__stat span { color: rgba(255,255,255,0.5); } .laluz-theme-dark .hero__rep { color: rgba(255,255,255,0.45); } .laluz-theme-dark .hero__rep strong { color: rgba(255,255,255,0.7); } .laluz-theme-dark .hero__chip { background: rgba(30,18,36,0.7); border-color: rgba(200,155,60,0.2); color: rgba(255,255,255,0.8); } .laluz-theme-dark .hero__chip:hover { background: rgba(200,155,60,0.12); border-color: rgba(200,155,60,0.4); color: #fff; } .laluz-theme-dark .hero__map-svg { opacity: 0.55; } .laluz-theme-dark .sb { background: rgba(30,18,36,0.95); border-color: rgba(200,155,60,0.2); } .laluz-theme-dark .sb__input, .laluz-theme-dark .sb__sel { color: rgba(255,255,255,0.88); } .laluz-theme-dark .sb__input::placeholder { color: rgba(255,255,255,0.35); } .laluz-theme-dark .sb__lbl { color: rgba(255,255,255,0.4); } .laluz-theme-dark .sb__sep { background: rgba(200,155,60,0.12); } .laluz-theme-dark .sb__drop { background: #1E1221; border-color: rgba(200,155,60,0.18); } .laluz-theme-dark .sb__opt { color: rgba(255,255,255,0.85); } .laluz-theme-dark .sb__group { color: rgba(255,255,255,0.5); } .laluz-theme-dark .sb__opt:hover, .laluz-theme-dark .sb__opt--on { background: rgba(200,155,60,0.1); } .laluz-theme-dark .wdl { background: #160E1B; } .laluz-theme-dark .wdl__item { color: rgba(255,255,255,0.55); } .laluz-theme-dark .wdl__item:hover { background: rgba(200,155,60,0.1); color: rgba(255,255,255,0.9); } .laluz-theme-dark .wdl__lbl { color: inherit; } .laluz-theme-dark .wdl__item--photo { background: #1E1228; border-color: rgba(200,155,60,0.1); } .laluz-theme-dark .wdl__lbl--photo { color: rgba(255,255,255,0.75); } .laluz-theme-dark .sec-hd__t { color: rgba(255,255,255,0.9); } .laluz-theme-dark .wlz { background: #1A1020; } .laluz-theme-dark .wlz__title { color: rgba(255,255,255,0.9); } .laluz-theme-dark .wlz__ico { background: rgba(200,155,60,0.08); border-color: rgba(200,155,60,0.15); } .laluz-theme-dark .wlz__item h3 { color: rgba(255,255,255,0.9); } .laluz-theme-dark .wlz__item p { color: rgba(255,255,255,0.55); } .laluz-theme-dark .sc--ivory { background: #150D1A; } .laluz-theme-dark .sc--cream { background: #120A17; } /* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */ /* Tablet (≤ 1024px) */ @media (max-width: 1024px) { .nv { padding: 0 1.75rem; } .nv__left { gap: 1.5rem; } .nv__right { gap: 1rem; } .sb { max-width: 100%; } .wdl__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } .wlz__wrap { gap: 2.5rem; } .sg--4 { grid-template-columns: repeat(3, 1fr); } .hero__body { gap: 1.75rem; padding: 0 1.25rem 4rem; margin-top: -12vw; } .hero__logo-top { height: clamp(180px, 24vw, 330px); top: 4.65vw; } } /* Mobile (≤ 768px) */ @media (max-width: 768px) { /* Nav: Logo zentriert, links/rechts reduziert */ .nv { padding: 0 1rem; min-height: 68px; } .nv__left .nv__link:nth-child(n+3) { display: none; } .nv__right .nv__link { display: none; } .nv__logo img { height: 50px; } .nv__cta { font-size: 0.78rem; padding: 0.4rem 0.85rem; } /* Hero – Inhalt sitzt unter dem Bild (keine Überlappung auf Mobile), damit die Statistiken sauber zwischen Bild und Suchleiste stehen */ .hero__body { gap: 1.5rem; padding: 1.5rem 1rem 3rem; margin-top: 0; } /* Logo auf Mobile exakt mittig (kein 1cm-Versatz wie im Desktop) */ .hero__logo-top { height: clamp(156px, 33vw, 264px); top: 5vw; transform: translateX(-50%); } .hero__title { font-size: 1.4rem; } .hero__sub { font-size: 0.92rem; } /* Chips auf Mobile etwas kleiner */ .hero__chip { font-size: 0.72rem; padding: 0.32rem 0.8rem; } /* Statistiken */ .hero__stats { padding: 0; flex-wrap: wrap; width: 100%; } .hero__stat { flex: 1; flex-direction: column; align-items: center; padding: 0.85rem 1rem; gap: 0.3rem; } .hero__stat svg { display: none; } .hero__stat strong { font-size: 1.6rem; } .hero__stat-sep { width: 1px; height: 36px; } /* Suchleiste: gestapelt */ .sb { flex-direction: column; border-radius: 18px; max-width: 100%; } .sb__section { padding: 0.75rem 1.1rem; } .sb__sep { width: auto; height: 1px; margin: 0 1rem; } .sb__btn { border-radius: 0 0 16px 16px; padding: 0.9rem; font-size: 1rem; } .sb__drop { border-radius: 0 0 16px 16px; } /* 3 Karten: gestapelt */ .ec { grid-template-columns: 1fr; } .ec__card { min-height: 220px; } /* Kategorien: 4 Spalten */ .wdl__grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .wdl__ico { width: 44px; height: 44px; } .wdl__ico svg { width: 20px; height: 20px; } .wdl__lbl { font-size: 0.62rem; } .wdl { padding: 3.5rem 0 4rem; } /* Warum LaLuz – statt 2-spaltig: einspaltig */ .wlz__wrap { grid-template-columns: 1fr; gap: 2.5rem; } .wlz__photo { aspect-ratio: 16 / 9; max-height: 320px; } .wlz { padding: 3.5rem 0; } .wlz__title { font-size: 2rem; } /* 4-Spalten → 2-Spalten */ .sg--4 { grid-template-columns: repeat(2, 1fr); } /* CTA-Pakete → 1-spaltig */ .hc__pkgs { grid-template-columns: 1fr; } .hc__inner { grid-template-columns: 1fr; gap: 3rem; } /* Überschrift darf auf schmalen Geräten umbrechen statt abgeschnitten zu werden */ .sec-hd__t { font-size: 1.6rem; white-space: normal; text-align: center; } .sec-hd { gap: 1rem; } } /* Sehr klein (≤ 420px) */ @media (max-width: 420px) { .nv__left { display: none; } .nv { grid-template-columns: auto 1fr; } .nv__logo { justify-content: flex-start; } .hero__title { font-size: 1.2rem; } .hero__title { font-size: 1.15rem; } .wdl__grid { grid-template-columns: repeat(2, 1fr); } /* Zähler bleiben auch auf sehr kleinen Geräten nebeneinander */ .hero__stats { flex-direction: row; flex-wrap: nowrap; } .hero__stat { padding: 0.75rem 0.4rem; } .hero__stat strong { font-size: 1.3rem; } .hero__stat span { font-size: 0.62rem; } .hero__stat-sep { width: 1px; height: 32px; } .sg--4 { grid-template-columns: 1fr; } .sec-hd__t { font-size: 1.35rem; } } /* ══════════════════════════════════════════════════════════════════════════ HOMEPAGE REDESIGN – LAYOUT.JPEG UMSETZUNG ══════════════════════════════════════════════════════════════════════════ */ /* ── Hero Brand (Logo + Wordmark + Tagline) ─────────────────────────────── */ .hero__brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; } .hero__logo-img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: center top; opacity: 0.72; box-shadow: 0 8px 48px rgba(200,155,60,0.25), 0 0 0 6px rgba(248,243,236,0.6); } .hero__logo-wordmark { display: flex; flex-direction: column; align-items: center; gap: 0.18rem; } .hero__logo-name { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 700; color: var(--violet); line-height: 1; letter-spacing: 0.02em; } .hero__logo-name em { color: var(--gold); font-style: normal; } .hero__logo-sub { font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; color: var(--text-2); text-transform: uppercase; opacity: 0.8; } /* ── Wege des Lichts – Foto-Kacheln wdl__grid--photo ───────────────────── */ .wdl__grid--photo { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.85rem; margin-top: 2.5rem; } .wdl__item--photo { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-2); text-align: center; transition: color .2s, transform .2s; } .wdl__item--photo:hover { color: var(--violet); transform: translateY(-4px); } .wdl__photo { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 16px rgba(58,44,53,0.12); transition: box-shadow .3s; } .wdl__item--photo:hover .wdl__photo { box-shadow: 0 10px 30px rgba(58,44,53,0.22); } .wdl__photo-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .4s ease; } .wdl__item--photo:hover .wdl__photo-bg { transform: scale(1.07); } .wdl__lbl--photo { font-family: 'Montserrat', sans-serif; font-size: 0.67rem; font-weight: 600; line-height: 1.35; color: inherit; padding: 0 0.1rem; } /* Kategorie-Farbverläufe (Platzhalter bis echte Fotos vorhanden) */ .wdl__bg--heilung { background: linear-gradient(145deg, #E8C4A0 0%, #C49060 40%, #9A6038 100%); } .wdl__bg--schamanismus { background: linear-gradient(145deg, #90C080 0%, #5A8A48 40%, #386028 100%); } .wdl__bg--coaching { background: linear-gradient(145deg, #C0A8D8 0%, #9070B8 40%, #684898 100%); } .wdl__bg--intuition { background: linear-gradient(145deg, #C0B4E0 0%, #9880C8 40%, #7060A8 100%); } .wdl__bg--klang { background: linear-gradient(145deg, #E0D080 0%, #C8A840 40%, #A07820 100%); } .wdl__bg--koerper { background: linear-gradient(145deg, #90C0D0 0%, #5090A8 40%, #306888 100%); } .wdl__bg--rituale { background: linear-gradient(145deg, #D8A0A0 0%, #B86060 40%, #904040 100%); } .wdl__bg--veranst { background: linear-gradient(145deg, #DEB878 0%, #C9A15A 40%, #A07030 100%); } .wdl__bg--orte { background: linear-gradient(145deg, #B0D090 0%, #80A858 40%, #587838 100%); } /* ── Entdecke über 100 spirituelle Wege spw ────────────────────────────── */ .spw { background: var(--ivory); padding: 4.5rem 0 5rem; } .spw__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.5rem 1.25rem; margin-top: 2.5rem; margin-bottom: 2.25rem; } .spw__col-title { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1.5px solid rgba(200,155,60,0.22); } .spw__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .spw__list li { line-height: 1.45; } .spw__list a { font-size: 0.7rem; color: var(--text-2); text-decoration: none; transition: color .15s; } .spw__list a:hover { color: var(--gold); } /* Tag-Cloud */ .spw__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding-top: 1.5rem; border-top: 1px solid rgba(200,155,60,0.16); } .spw__tag { display: inline-flex; align-items: center; padding: 0.28rem 0.82rem; background: rgba(255,255,255,0.85); border: 1px solid rgba(200,155,60,0.22); border-radius: 50px; font-size: 0.73rem; font-weight: 500; color: var(--text-1); text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .spw__tag:hover { background: rgba(200,155,60,0.1); border-color: var(--gold); color: var(--violet); } .spw__tags-more { font-size: 0.73rem; font-weight: 600; color: var(--gold); text-decoration: none; margin-left: 0.25rem; white-space: nowrap; } .spw__tags-more:hover { color: var(--violet); } /* Abschnittskopf mit Link darunter */ .sec-hd-sub { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; margin-bottom: 2rem; } .sec-hd-sub p { margin: 0; font-size: 0.95rem; color: var(--text-2); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1200px) { .wdl__grid--photo { gap: 0.6rem; } .spw__grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1024px) { .wdl__grid--photo { grid-template-columns: repeat(5, 1fr); gap: 0.7rem; } .spw__grid { grid-template-columns: repeat(4, 1fr); } .hero__logo-img { width: 95px; height: 95px; } .hero__logo-name { font-size: 2.1rem; } } @media (max-width: 768px) { .wdl__grid--photo { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; } .spw__grid { grid-template-columns: repeat(2, 1fr); } .spw { padding: 3.5rem 0 4rem; } .hero__logo-img { width: 84px; height: 84px; } .hero__logo-name { font-size: 1.85rem; } } @media (max-width: 480px) { .wdl__grid--photo { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .hero__logo-img { width: 76px; height: 76px; } .hero__logo-name { font-size: 1.65rem; } .hero__logo-sub { font-size: 0.52rem; letter-spacing: 0.22em; } } /* ── Dark Mode ────────────────────────────────────────────────────────────── */ .laluz-theme-dark .hero__logo-img { box-shadow: 0 6px 36px rgba(200,155,60,0.2), 0 0 0 5px rgba(26,14,34,0.9); } .laluz-theme-dark .hero__logo-name { color: rgba(255,255,255,0.92); } .laluz-theme-dark .hero__logo-sub { color: rgba(255,255,255,0.5); } .laluz-theme-dark .wdl__item--photo { color: rgba(255,255,255,0.55); } .laluz-theme-dark .wdl__item--photo:hover { color: rgba(255,255,255,0.9); } .laluz-theme-dark .wdl__photo { box-shadow: 0 3px 16px rgba(0,0,0,0.3); opacity: 0.88; } .laluz-theme-dark .spw { background: #1A1020; } .laluz-theme-dark .spw__col-title { color: var(--lotus); } .laluz-theme-dark .spw__list a { color: rgba(255,255,255,0.48); } .laluz-theme-dark .spw__list a:hover { color: var(--gold); } .laluz-theme-dark .spw__tags { border-top-color: rgba(255,255,255,0.08); } .laluz-theme-dark .spw__tag { background: rgba(30,18,36,0.7); border-color: rgba(200,155,60,0.15); color: rgba(255,255,255,0.72); } .laluz-theme-dark .spw__tag:hover { background: rgba(200,155,60,0.1); border-color: rgba(200,155,60,0.4); color: rgba(255,255,255,0.9); } .laluz-theme-dark .sec-hd-sub p { color: rgba(255,255,255,0.45); } /* ══════════════════════════════════════════════════════════════════════════ REGISTRIERUNG – Felder nebeneinander & Rechnungsanschrift ══════════════════════════════════════════════════════════════════════════ */ .rg-field--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } /* PLZ schmal, Ort breit */ .rg-field--row-narrow { grid-template-columns: 120px minmax(0, 1fr); } /* min-width: 0 hebt die Vorgabe „mindestens so breit wie der Inhalt" auf – ohne sie kann ein Rasterfeld seine Spalte sprengen. */ .rg-field__col { display: flex; flex-direction: column; min-width: 0; } .rg-field__col--zip { min-width: 0; } /* Abschnitts-Trenner im Formular */ .rg-section-divider { display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 .25rem; color: var(--color-violet, #5A235F); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .rg-section-divider::before, .rg-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-light-rose, #E8C8D8); } .laluz-theme-dark .rg-section-divider { color: var(--lotus, #D9A0BF); } .laluz-theme-dark .rg-section-divider::before, .laluz-theme-dark .rg-section-divider::after { background: rgba(255,255,255,0.1); } @media (max-width: 480px) { .rg-field--row, .rg-field--row-narrow { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ PROVIDER LANDINGPAGE ══════════════════════════════════════════════════════════════════════════ */ /* Hero */ /* Vorschau-Leiste für den Profil-Eigentümer (noch nicht öffentlich) */ .pl-preview-bar { background: rgba(200,155,60,.12); border-bottom: 1px solid rgba(200,155,60,.35); color: var(--text-1); font-size: .88rem; text-align: center; padding: .7rem 1rem; } .pl-preview-bar a { color: var(--violet); font-weight: 600; margin-left: .5rem; } /* Titelbild-Banner oben auf der Profilseite */ /* Bannerbild in voller Höhe: Gezeigt wird genau das hochgeladene Bild, nicht ein Ausschnitt daraus. Deshalb kein festes Seitenverhältnis und kein object-fit: cover – die Höhe ergibt sich aus dem Bild selbst. Die Obergrenze verhindert nur, dass ein hochkant aufgenommenes Banner den ganzen Bildschirm einnimmt; greift sie, wird das Bild eingepasst (contain) und nicht beschnitten. */ .pl-header-banner { width: 100%; overflow: hidden; } .pl-header-banner img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; margin-inline: auto; } /* Galerie auf der Profilseite */ .pl-gallery { margin-top: 2rem; } .pl-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin-top: .75rem; } .pl-gallery__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; } /* Videos auf der Profilseite */ .pl-videos { margin-top: 2rem; } .pl-videos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: .75rem; } .pl-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; } .pl-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Individuelle Gestaltung durch den Anbieter (Akzentfarbe, Schriftart, -größe). Variablen --pl-accent / --pl-font / --pl-scale werden inline auf .pl-themed gesetzt. */ .pl-themed .pl-hero__name, .pl-themed .pl-sec-title, .pl-themed /* Der erste hinterlegte Kontaktweg ist die eigentliche Handlungsaufforderung des Profils. Auf dem Telefon entscheidet sich hier, ob jemand den Anbieter anspricht - vier gleich aussehende Zeilen lesen sich wie eine Liste, nicht wie eine Einladung. */ .pl-contact-link--primary { background: var(--gold, #C89B3C); color: #fff; font-weight: 600; } .pl-contact-link--primary svg { color: #fff; } .pl-contact-link--primary:hover { background: var(--gold-dark, #A07B28); color: #fff; } .pl-themed .pl-contact-link--primary { background: var(--pl-accent); } .pl-themed .pl-contact-link--primary svg { color: #fff; } .pl-contact-box__title { color: var(--pl-accent); font-family: var(--pl-font); } .pl-themed .pl-lead, .pl-themed .pl-desc { font-family: var(--pl-font); } .pl-themed .pl-contact-link svg { color: var(--pl-accent); } /* Schriftgröße über Skalierungsfaktor (Normal = 1 entspricht dem Standard) */ .pl-themed .pl-hero__name { font-size: calc(2.4rem * var(--pl-scale, 1)); } .pl-themed .pl-sec-title { font-size: calc(1.5rem * var(--pl-scale, 1)); } .pl-themed .pl-lead { font-size: calc(1.1rem * var(--pl-scale, 1)); } .pl-themed .pl-desc p { font-size: calc(1rem * var(--pl-scale, 1)); } .pl-hero { background: var(--ivory); border-bottom: 1px solid var(--light-rose); padding: 3rem 0 2.5rem; } .pl-hero__inner { display: flex; align-items: flex-start; gap: 2.5rem; } .pl-hero__img-wrap { flex-shrink: 0; } .pl-hero__img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 3px solid var(--light-gold); box-shadow: 0 4px 20px rgba(200,155,60,.15); } .pl-hero__img-placeholder { width: 160px; height: 160px; border-radius: 50%; background: var(--light-gold); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--gold); border: 3px solid rgba(200,155,60,.2); } .pl-hero__info { flex: 1; padding-top: .5rem; } .pl-hero__name { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 700; color: var(--violet); /* Luft nach unten: Mit den urspruenglichen .25rem sass die Kategorieuebersicht fast am Lichtnamen und der ganze Kopfbereich wirkte gedrungen. Der Lichtname ist die Ueberschrift des Profils - er braucht Abstand zu dem, was er anfuehrt. */ margin: .5rem 0 1rem; line-height: 1.15; } /* Kategorien im Profilkopf: Die Hauptkategorie ordnet ein und steht deshalb kräftiger; die Unterkategorien darunter sagen, was konkret angeboten wird. Die Gruppen laufen von links nach rechts und brechen erst um, wenn die Zeile nicht mehr reicht. Untereinander zieht schon eine dritte Hauptkategorie den Kopfbereich so in die Länge, dass das Profilbild daneben klein wirkt. */ .pl-hero__cats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1.75rem; margin: 0 0 .7rem; } /* Jede Gruppe bleibt zusammen: Eine Hauptkategorie darf nie ohne ihre Unterkategorien in der Zeile stehen. max-width verhindert, dass eine lange Aufzählung die ganze Breite belegt und die nächste Gruppe verdrängt. */ .pl-hero__cat { min-width: 0; max-width: 22rem; } .pl-hero__category { font-size: .95rem; font-weight: 700; color: var(--text-1, #3A2C35); margin: 0 0 .1rem; line-height: 1.3; } .pl-hero__subcats { font-size: .82rem; line-height: 1.5; color: var(--text-secondary); margin: 0; } /* Eigene Zeile fuer das Online-Kennzeichen unter dem Ort. */ .pl-hero__online { margin: .55rem 0 0; } /* „Mitglied seit": eine ruhige Schlusszeile im Kopfbereich, kleiner und blasser als der Ort - eine Angabe zur Einordnung, keine Auszeichnung. */ .pl-hero__since { margin: .55rem 0 0; font-size: .82rem; color: var(--text-secondary); opacity: .85; } .pl-hero__location { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--text-secondary); margin: 0 0 .5rem; } /* Badges */ .pl-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 2rem; margin-right: .4rem; margin-bottom: .4rem; letter-spacing: .02em; } .pl-badge--verified { background: rgba(75,33,106,.08); color: var(--violet); border: 1px solid rgba(75,33,106,.2); } .pl-badge--recommended { background: rgba(200,155,60,.12); color: #7a5c20; border: 1px solid rgba(200,155,60,.3); } .pl-badge--online { background: rgba(34,140,80,.08); color: #1a6b3a; border: 1px solid rgba(34,140,80,.2); } /* Body */ .pl-body { padding: 3rem 0 4rem; background: var(--cream); } .pl-body__inner { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; } .pl-lead { font-size: 1.1rem; color: var(--text-primary); line-height: 1.7; font-weight: 500; margin: 0 0 2rem; } .pl-sec-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--violet); margin: 0 0 .75rem; } .pl-desc p { line-height: 1.8; color: var(--text-secondary); } .pl-desc p + p { margin-top: 1rem; } /* Kategorien-Tags */ .pl-tags { margin-top: 2rem; } .pl-tags__list { display: flex; flex-wrap: wrap; gap: .6rem; } .pl-tag { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: var(--light-gold); border: 1px solid var(--light-rose); color: var(--text-primary); font-size: .85rem; font-weight: 500; } /* Bildergalerie */ .pl-gallery { margin-top: 2rem; } .pl-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; } .pl-gallery__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--light-rose); } /* Listenseiten-Kopf (z. B. /orte) */ .lp-head { background: var(--cream); padding: 3rem 0 2rem; } .lp-head__title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4vw, 3rem); color: var(--violet); margin: .25rem 0 .5rem; } .lp-head__sub { color: var(--text-secondary); max-width: 640px; line-height: 1.7; margin: 0; } /* Abschnittsueberschrift der Listenseiten. Sie gliedert die Seite fuer Suchmaschinen und KI-Crawler und soll dabei ruhig bleiben - die H1 darueber traegt die Seite. */ .lp-sec-title { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; color: var(--violet); margin: 0 0 .35rem; } .laluz-theme-dark .lp-sec-title { color: var(--lotus); } .lp-count { color: var(--text-secondary); font-size: .9rem; margin: 0 0 1.5rem; } .laluz-theme-dark .lp-head { background: #150d1c; } .laluz-theme-dark .lp-head__title { color: var(--lotus); } .laluz-theme-dark .lp-head__sub, .laluz-theme-dark .lp-count { color: rgba(255,255,255,0.55); } /* Sidebar / Kontakt */ .pl-contact-box { background: var(--ivory); border: 1px solid var(--light-rose); border-radius: 12px; padding: 1.5rem; } .pl-contact-box__title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--violet); margin: 0 0 1rem; } .pl-contact-link { display: flex; align-items: center; gap: .6rem; /* 44 px: kleinere Ziele trifft man auf dem Telefon nicht zuverlaessig. */ min-height: 44px; padding: .7rem .9rem; border-radius: 8px; background: var(--light-gold); color: var(--text-primary); text-decoration: none; font-size: .9rem; font-weight: 500; margin-bottom: .6rem; transition: background .15s, color .15s; } .pl-contact-link:hover { background: var(--gold); color: #fff; } .pl-contact-link svg { flex-shrink: 0; } .pl-back-link { margin-top: 1rem; text-align: center; } .pl-back-link a { font-size: .85rem; color: var(--text-secondary); text-decoration: none; } .pl-back-link a:hover { color: var(--violet); } /* Dark mode – Landing */ .laluz-theme-dark .pl-hero { background: #1E1228; border-color: rgba(255,255,255,0.06); } .laluz-theme-dark .pl-hero__img-placeholder { background: #2A1A36; color: var(--gold); } .laluz-theme-dark .pl-hero__name { color: var(--lotus); } .laluz-theme-dark .pl-hero__location, .laluz-theme-dark .pl-hero__since, .laluz-theme-dark .pl-hero__subcats { color: rgba(255,255,255,0.5); } .laluz-theme-dark .pl-hero__category { color: rgba(255,255,255,0.85); } .laluz-theme-dark .pl-badge--verified { background: rgba(200,155,60,0.1); color: var(--lotus); border-color: rgba(200,155,60,0.2); } .laluz-theme-dark .pl-badge--recommended { background: rgba(200,155,60,0.12); color: var(--gold); border-color: rgba(200,155,60,0.25); } .laluz-theme-dark .pl-badge--online { background: rgba(34,140,80,0.1); color: #5acd8c; border-color: rgba(34,140,80,0.2); } .laluz-theme-dark .pl-body { background: #150d1c; } .laluz-theme-dark .pl-lead { color: rgba(255,255,255,0.82); } .laluz-theme-dark .pl-sec-title { color: var(--lotus); } .laluz-theme-dark .pl-desc p { color: rgba(255,255,255,0.55); } .laluz-theme-dark .pl-contact-box { background: #1E1228; border-color: rgba(255,255,255,0.06); } .laluz-theme-dark .pl-contact-box__title { color: var(--lotus); } .laluz-theme-dark .pl-contact-link { background: rgba(200,155,60,0.08); color: rgba(255,255,255,0.75); } .laluz-theme-dark .pl-contact-link:hover { background: var(--gold); color: #fff; } .laluz-theme-dark .pl-back-link a { color: rgba(255,255,255,0.4); } .laluz-theme-dark .pl-back-link a:hover { color: var(--lotus); } .laluz-theme-dark .pl-tag { background: rgba(200,155,60,0.08); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.78); } .laluz-theme-dark .pl-gallery__img { border-color: rgba(255,255,255,0.08); } /* Responsiv – Landing */ @media (max-width: 768px) { .pl-hero__inner { flex-direction: column; gap: 1.5rem; } .pl-hero__img, .pl-hero__img-placeholder { width: 120px; height: 120px; } .pl-hero__name { font-size: 1.9rem; } /* Schmaler Bildschirm: engerer Abstand, und eine Gruppe darf die Breite ausnutzen, statt an einer festen Grenze umzubrechen. */ .pl-hero__cats { gap: .55rem 1.25rem; } .pl-hero__cat { max-width: 100%; } .pl-body__inner { grid-template-columns: 1fr; } .pl-sidebar { order: -1; } } /* ══════════════════════════════════════════════════════════════════════════ DASHBOARD ══════════════════════════════════════════════════════════════════════════ */ .db-section { padding: 3rem 0 5rem; background: var(--cream); min-height: 70vh; } .db-hd { margin-bottom: 2.5rem; } .db-title { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--violet); margin: .25rem 0 .5rem; } .db-sub { color: var(--text-secondary); font-size: .95rem; } /* Kachel-Grid */ .db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } .db-card { background: var(--ivory); border: 1px solid var(--light-rose); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .db-card__icon { font-size: 1.5rem; color: var(--gold); } .db-card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--violet); margin: 0; } .db-card__text { font-size: .85rem; color: var(--text-secondary); margin: 0; line-height: 1.5; } .db-card__badge { display: inline-block; margin-top: .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); background: rgba(200,155,60,.1); border: 1px solid rgba(200,155,60,.25); border-radius: 2rem; padding: .15rem .55rem; width: fit-content; } /* Hinweis-Box */ .db-notice { display: flex; align-items: flex-start; gap: 1rem; background: rgba(200,155,60,.07); border: 1px solid rgba(200,155,60,.25); border-radius: 10px; padding: 1.25rem 1.5rem; } .db-notice__icon { font-size: 1.4rem; color: var(--gold); flex-shrink: 0; } .db-notice strong { color: var(--violet); display: block; margin-bottom: .25rem; } .db-notice p { font-size: .88rem; color: var(--text-secondary); margin: 0; line-height: 1.6; } .db-notice a { color: var(--gold); } /* Dark mode */ .laluz-theme-dark .db-section { background: #150d1c; } .laluz-theme-dark .db-title { color: var(--lotus); } .laluz-theme-dark .db-sub { color: rgba(255,255,255,0.5); } .laluz-theme-dark .db-card { background: #1E1228; border-color: rgba(255,255,255,0.06); } .laluz-theme-dark .db-card__title { color: var(--lotus); } .laluz-theme-dark .db-card__text { color: rgba(255,255,255,0.5); } .laluz-theme-dark .db-notice { background: rgba(200,155,60,0.06); border-color: rgba(200,155,60,0.2); } .laluz-theme-dark .db-notice strong { color: var(--lotus); } .laluz-theme-dark .db-notice p { color: rgba(255,255,255,0.5); } /* Verlinkte Kachel */ .db-card--link { text-decoration: none; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; } .db-card--link:hover { border-color: var(--gold); box-shadow: 0 4px 18px rgba(200,155,60,.18); transform: translateY(-2px); } .db-card__arrow { margin-top: auto; font-size: 1.1rem; color: var(--gold); align-self: flex-end; } /* ══════════════════════════════════════════════════════════════════════════ PROFIL-SEITE pf ══════════════════════════════════════════════════════════════════════════ */ .pf-section { padding: 3rem 0 6rem; background: var(--cream); min-height: 70vh; } /* Einheitliche Arbeitsbreite für Dashboard, Mein Profil und Entdeckerprofil: 920 px Rahmen ergeben mit dem .cx-Innenabstand 840 px Inhalt – genau 75 % der vollen Rasterbreite (1120 px). Deutlich luftiger als die früheren 680 px, aber ohne die Formulare über die ganze Seite zu ziehen. Auf schmalen Displays greift die Begrenzung nicht, dort zählt allein .cx. */ .pf-wrap { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } /* Übersichtstabellen im Admin-Bereich brauchen die volle Breite des Rasters. */ .pf-wrap--wide { max-width: none; } /* Dieselbe Arbeitsbreite für Seiten, die ohne .pf-wrap direkt in .cx liegen (Dashboard-Kacheln, Entdeckerprofil-Kacheln). Steht bewusst nach .cx, damit die engere Vorgabe gewinnt. */ .cx--mid { max-width: 920px; } /* ── Schlagwörter: Bearbeitung im Profil und Anzeige öffentlich ─────── */ .pf-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .25rem; } .pf-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem .8rem; border-radius: 50px; background: var(--light-gold, #F6F0E4); border: 1px solid rgba(200,155,60,.35); color: var(--text-1); font-size: .84rem; } .pf-tag__del { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(75,33,106,.1); color: var(--text-2); font-size: .85rem; line-height: 1; cursor: pointer; } .pf-tag__del:hover { background: var(--violet); color: #fff; } .pf-tag-add { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; } .pf-tag-add .rg-input { flex: 1 1 240px; min-width: 0; } .pl-tags { margin-top: 2rem; } .pl-tags__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; } .pl-tag { display: inline-block; padding: .35rem .9rem; border-radius: 50px; background: var(--ivory, #F3EDE6); border: 1px solid rgba(75,33,106,.1); color: var(--text-1); font-size: .85rem; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .pl-tag:hover { background: var(--gold); border-color: var(--gold); color: #fff; } .laluz-theme-dark .pf-tag, .laluz-theme-dark .pl-tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(234,224,240,.9); } /* ── Suchkarte: Verifizierung und Paket ──────────────────────────────── */ /* Die Verifizierung ist das einzige persoenlich geprüfte Siegel und deshalb bewusst kräftiger als die übrigen Kennzeichen auf der Karte. */ .pc-verified { display: inline-flex; align-items: center; gap: .32rem; padding: .26rem .7rem; border-radius: 50px; background: var(--gold); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .03em; box-shadow: 0 2px 8px rgba(200,155,60,.35); } .pc-verified__mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--gold); font-size: .62rem; font-weight: 900; } .pc-pkg { display: inline-flex; align-items: center; padding: .24rem .62rem; border-radius: 50px; font-size: .7rem; font-weight: 600; background: rgba(75,33,106,.07); color: var(--text-2); } .pc-pkg--licht { background: rgba(200,155,60,.12); color: #8a6820; } .pc-pkg--leuchtkraft { background: rgba(200,155,60,.22); color: #6f5216; } .pc-pkg--strahlkraft { background: rgba(75,33,106,.12); color: var(--violet); } .laluz-theme-dark .pc-pkg { background: rgba(255,255,255,.08); color: rgba(234,224,240,.85); } .laluz-theme-dark .pc-pkg--licht, .laluz-theme-dark .pc-pkg--leuchtkraft { background: rgba(200,155,60,.2); color: #F0DFB4; } .laluz-theme-dark .pc-pkg--strahlkraft { background: rgba(217,160,191,.18); color: var(--lotus); } /* Entdeckerprofil: Name und E-Mail nebeneinander, solange Platz ist. */ .ep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; align-items: start; } /* Entdeckerprofil: E-Mail-Anzeige */ .ep-email { margin: .5rem 0 0; padding: .7rem 1rem; background: var(--ivory); border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: .95rem; color: var(--text-1); } .laluz-theme-dark .ep-email { background: rgba(255,255,255,.05); color: rgba(234,224,240,.9); } /* ── Bannerbilder: Verwaltung im Profil ─────────────────────────────── */ .pf-banners { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; } .pf-banner { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(75,33,106,.1); background: var(--ivory); } /* Vorschau im Formular zeigt dasselbe wie das Profil: das ganze Bild, keinen Ausschnitt. Sonst verspricht die Vorschau einen Bildausschnitt, den es auf der Profilseite nicht gibt. Die Obergrenze hält die Liste im Formular übersichtlich. */ .pf-banner img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; } .pf-banner__bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .55rem; background: rgba(255,255,255,.92); } .pf-banner__pos { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--violet); color: #fff; font-size: .72rem; font-weight: 700; } .pf-banner__tools { display: flex; gap: .3rem; } .pf-banner__btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(75,33,106,.15); background: #fff; color: var(--text-1); font-size: .85rem; line-height: 1; cursor: pointer; } .pf-banner__btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); } .pf-banner__btn:disabled { opacity: .35; cursor: not-allowed; } .pf-banner__btn--del:hover:not(:disabled) { border-color: #D94F4F; color: #D94F4F; } /* ── Bannerbilder: Überblendung auf der Landingpage ─────────────────── */ /* Reines CSS: Die Bilder liegen übereinander und werden nacheinander eingeblendet. Der Versatz je Bild kommt aus der Variablen --i, die Taktung aus der Zahl der Bilder (Klasse pl-banner--2 … --5). */ .pl-banner--slide { position: relative; } .pl-banner--slide img { position: absolute; inset: 0; width: 100%; /* Das erste Bild gibt dem Rahmen die Höhe (bleibt im Fluss, siehe unten). Die übrigen liegen darüber und werden in diese Höhe eingepasst – contain statt cover, damit auch ein abweichendes Format nichts verliert. */ height: 100%; object-fit: contain; opacity: 0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; } /* Das erste Bild bleibt im Fluss und gibt dem Rahmen seine Höhe – und zwar seine eigene, unbeschnittene. */ .pl-banner--slide img:first-child { position: relative; height: auto; } .pl-banner--2 img { animation-name: pl-banner-2; animation-duration: 12s; animation-delay: calc(var(--i) * 6s); } .pl-banner--3 img { animation-name: pl-banner-3; animation-duration: 18s; animation-delay: calc(var(--i) * 6s); } .pl-banner--4 img { animation-name: pl-banner-4; animation-duration: 24s; animation-delay: calc(var(--i) * 6s); } .pl-banner--5 img { animation-name: pl-banner-5; animation-duration: 30s; animation-delay: calc(var(--i) * 6s); } @keyframes pl-banner-2 { 0% { opacity: 1; } 42% { opacity: 1; } 50% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } } @keyframes pl-banner-3 { 0% { opacity: 1; } 28% { opacity: 1; } 33% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes pl-banner-4 { 0% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pl-banner-5 { 0% { opacity: 1; } 17% { opacity: 1; } 20% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } } /* Wer Bewegung reduziert haben möchte, sieht nur das erste Bannerbild. */ @media (prefers-reduced-motion: reduce) { .pl-banner--slide img { animation: none; opacity: 0; } .pl-banner--slide img:first-child { opacity: 1; } } .laluz-theme-dark .pf-banner { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } .laluz-theme-dark .pf-banner__bar { background: rgba(30,18,40,.92); } .laluz-theme-dark .pf-banner__btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(234,224,240,.9); } /* ── Admin: Registerleiste und Kennzahlen ───────────────────────────── */ .ad-tabs { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid rgba(75,33,106,.1); padding-bottom: .75rem; } .ad-tab { padding: .55rem 1.15rem; border: 1px solid rgba(75,33,106,.15); border-radius: 50px; background: #fff; color: var(--text-1); font-family: 'Montserrat', sans-serif; font-size: .88rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .ad-tab:hover { border-color: var(--gold); } .ad-tab--on { background: var(--violet); border-color: var(--violet); color: #fff; } .ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .ad-stat { padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--ivory); border: 1px solid rgba(75,33,106,.08); display: flex; flex-direction: column; gap: .3rem; } .ad-stat__val { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 700; color: var(--violet); line-height: 1; } .ad-stat__lbl { font-size: .8rem; color: var(--text-2); } .ad-stat--licht { border-left: 4px solid rgba(200,155,60,.5); } .ad-stat--leuchtkraft { border-left: 4px solid var(--gold); } .ad-stat--strahlkraft { border-left: 4px solid var(--violet); } .ad-stat--discoverer { border-left: 4px solid var(--lotus, #D9A0BF); } .laluz-theme-dark .ad-tab { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: rgba(234,224,240,.9); } .laluz-theme-dark .ad-tab--on { background: var(--violet-soft, #8A5CA8); color: #fff; } .laluz-theme-dark .ad-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); } .laluz-theme-dark .ad-stat__val { color: var(--lotus, #D9A0BF); } /* ── Admin: offene Paketwechsel ──────────────────────────────────────── */ .ad-changes { border-left: 4px solid var(--gold); } .ad-changes__count { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 50px; background: var(--gold); color: #fff; font-size: .75rem; font-weight: 700; } .ad-changes__list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; } .ad-change { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .9rem 1rem; background: var(--ivory); border: 1px solid rgba(75,33,106,.08); border-radius: 12px; } .ad-change__who { flex: 1 1 220px; min-width: 0; } .ad-change__who small { display: block; font-size: .74rem; color: var(--text-2); } .ad-change__pkgs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ad-change__arrow { color: var(--text-2); } .ad-change__actions{ display: flex; gap: .5rem; flex-wrap: wrap; } .ad-pkg__pending { color: var(--gold) !important; font-weight: 600; } .laluz-theme-dark .ad-change { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); } /* Paketkennzeichen in der Anbieterliste */ .ol-row__pkg { white-space: nowrap; } .ol-row__pkg small { display: block; font-size: .72rem; color: var(--text-2); margin-top: .2rem; } .ad-pkg { display: inline-block; padding: .18rem .6rem; border-radius: 50px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; } .ad-pkg--kostenlos { background: rgba(75,33,106,0.07); color: var(--text-2); } .ad-pkg--licht { background: rgba(200,155,60,0.12); color: #8a6820; } .ad-pkg--leuchtkraft { background: rgba(200,155,60,0.22); color: #6f5216; } .ad-pkg--strahlkraft { background: var(--gold); color: #fff; } .ol-row__date small { display: block; font-size: .72rem; color: var(--text-2); margin-top: .2rem; } .laluz-theme-dark .ad-pkg--kostenlos { background: rgba(255,255,255,0.08); color: rgba(234,224,240,0.8); } .laluz-theme-dark .ad-pkg--licht { background: rgba(200,155,60,0.18); color: #E8D6A8; } .laluz-theme-dark .ad-pkg--leuchtkraft { background: rgba(200,155,60,0.3); color: #F6E9C6; } .pf-center { display: flex; justify-content: center; padding: 5rem 0; } .pf-breadcrumb { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text-2); } .pf-breadcrumb a { color: var(--gold); font-weight: 500; } .pf-breadcrumb span::before { content: "/"; margin-right: .6rem; } .pf-hd { margin-bottom: .5rem; } .pf-title { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--violet); margin: .2rem 0 .4rem; } .pf-sub { color: var(--text-2); font-size: .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* Link von „Mein Profil" zum Zahlungsbereich */ .pf-package-link { display: inline-flex; align-items: center; margin-top: .9rem; } /* Bilder-Karte (Profilbild + Titelbild) */ .pf-img-grid { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; margin-top: 1.25rem; align-items: start; } .pf-img-field { display: flex; flex-direction: column; gap: .6rem; } .pf-img-preview { background: var(--light-gold); border: 1px solid var(--light-rose); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .pf-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-img-preview--square { aspect-ratio: 1 / 1; max-width: 200px; } .pf-img-preview--wide { aspect-ratio: 16 / 5; width: 100%; } .pf-img-placeholder { font-size: 2.5rem; color: var(--gold); opacity: .5; } .pf-upload-btn { cursor: pointer; align-self: start; position: relative; overflow: hidden; } /* Datei-Input unsichtbar, aber im Layout – nicht display:none, da mobile Browser (iOS Safari / Android) den Dateidialog sonst nicht öffnen. */ .pf-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 640px) { .pf-img-grid { grid-template-columns: 1fr; } .pf-img-preview--square { max-width: 100%; } } /* Galerie */ .pf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; margin-top: .9rem; } .pf-gallery__item { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--light-rose); } .pf-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-gallery__del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(58,44,53,.72); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pf-gallery__del:hover { background: rgba(58,44,53,.92); } .pf-gallery__add { aspect-ratio: 4 / 3; border: 1.5px dashed var(--gold); border-radius: 10px; background: var(--light-gold); color: var(--gold); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; position: relative; overflow: hidden; } .pf-gallery__add span { font-size: 1.6rem; line-height: 1; } .pf-gallery__add small { font-size: .72rem; color: var(--text-2); } .pf-gallery__add--busy { opacity: .6; cursor: default; } /* Videos (Dashboard) */ .pf-video-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.1rem; } .pf-video-item { display: flex; flex-direction: column; gap: .5rem; } .pf-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; } .pf-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .pf-video-del { align-self: start; background: none; border: 1px solid var(--light-rose); color: var(--text-2); border-radius: 8px; padding: .3rem .7rem; font-size: .8rem; cursor: pointer; } .pf-video-del:hover { border-color: var(--gold); color: var(--text-1); } /* Darstellung: Farb-Swatches */ .pf-swatches { display: flex; gap: .6rem; margin-top: .5rem; } .pf-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; } .pf-swatch--on { border-color: var(--text-primary); } .pf-badge { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 2rem; padding: .15rem .55rem; } .pf-badge--verified { background: rgba(200,155,60,.12); border: 1px solid rgba(200,155,60,.3); color: var(--gold); } .pf-badge--pending { background: rgba(75,33,106,.08); border: 1px solid rgba(75,33,106,.2); color: var(--violet); } /* Feedback-Hinweise */ .pf-notice { border-radius: 8px; padding: .9rem 1.2rem; font-size: .88rem; font-weight: 500; } .pf-notice--ok { background: rgba(60,160,100,.09); border: 1px solid rgba(60,160,100,.3); color: #276844; } .pf-notice--err { background: rgba(217,79,79,.08); border: 1px solid rgba(217,79,79,.3); color: #b63434; } /* Aufzählung innerhalb eines Hinweises – etwa die Folgen fehlender Pflichtangaben im Profil. Ohne eigene Regel klebte die Liste am Rand des Kastens. */ .pf-notice__list { margin: .5rem 0 .5rem 1.1rem; padding: 0; font-weight: 400; } .pf-notice__list li { margin: .2rem 0; } /* Karten */ .pf-card { background: var(--ivory); border: 1px solid rgba(75,33,106,.08); border-radius: 14px; padding: 1.75rem 2rem; } .pf-card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .25rem; } .pf-card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: var(--violet); margin: 0 0 .75rem; } .pf-card__head .pf-card__title { margin-bottom: 0; } /* Limit-Anzeige */ .pf-limit { font-size: .78rem; font-weight: 600; color: var(--gold); } /* Sprach-Tabs */ .pf-tabs { display: flex; gap: .3rem; border-bottom: 2px solid rgba(75,33,106,.1); margin-top: .5rem; } .pf-tab { padding: .55rem 1.1rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; border: none; background: none; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; } .pf-tab:hover { color: var(--violet); } .pf-tab--active { color: var(--violet); border-bottom-color: var(--violet); } .pf-tab__req { color: var(--gold); margin-left: .15rem; } .pf-lang-hint { font-size: .82rem; color: var(--text-2); margin-bottom: 1rem; line-height: 1.5; } /* Textarea */ .rg-textarea { resize: vertical; min-height: 4.5rem; font-family: 'Montserrat', sans-serif; line-height: 1.6; } /* Zeichenzähler */ .pf-charcount { font-size: .75rem; color: var(--text-2); text-align: right; margin-top: .15rem; } /* Kategorien-Grid */ .pf-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .75rem; } .pf-cat { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border: 1px solid rgba(75,33,106,.1); border-radius: 8px; cursor: pointer; font-size: .85rem; font-weight: 500; color: var(--text-1); background: var(--cream); transition: border-color .2s, background .2s; } .pf-cat input[type="checkbox"] { accent-color: var(--gold); flex-shrink: 0; } .pf-cat--on { border-color: var(--gold); background: rgba(200,155,60,.08); color: var(--violet); font-weight: 600; } .pf-cat:has(input:disabled) { opacity: .45; cursor: not-allowed; } /* Kategorien-Gruppen (Oberkategorie als Überschrift, Unterkategorien wählbar) */ .pf-cat-group { margin-top: 1.5rem; } .pf-cat-group:first-of-type { margin-top: 1rem; } .pf-cat-group__title { font-family: 'Montserrat', 'Inter', sans-serif; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--violet); margin: 0; padding-bottom: .4rem; border-bottom: 1px solid rgba(75,33,106,.12); } .laluz-theme-dark .pf-cat-group__title { color: var(--lotus); border-bottom-color: rgba(255,255,255,.12); } /* Online-Toggle */ .pf-toggle-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border: 1px solid rgba(75,33,106,.08); border-radius: 8px; background: var(--cream); cursor: pointer; } .pf-toggle-row input[type="checkbox"] { accent-color: var(--gold); width: 1.1rem; height: 1.1rem; flex-shrink: 0; } .pf-toggle-row strong { display: block; font-size: .9rem; color: var(--text-1); } .pf-toggle-row small { display: block; font-size: .78rem; color: var(--text-2); } /* Select */ .rg-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%236A5D67'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* Aktionsbereich */ .pf-actions { display: flex; align-items: center; gap: 1rem; padding-top: .5rem; } /* Lade-Spinner (Profil) */ .pf-spinner { width: 40px; height: 40px; border: 3px solid rgba(200,155,60,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Dark mode */ .laluz-theme-dark .pf-section { background: #150d1c; } .laluz-theme-dark .pf-title { color: var(--lotus); } .laluz-theme-dark .pf-sub { color: rgba(255,255,255,0.5); } .laluz-theme-dark .pf-card { background: #1E1228; border-color: rgba(255,255,255,.06); } .laluz-theme-dark .pf-card__title { color: var(--lotus); } .laluz-theme-dark .pf-tab { color: rgba(255,255,255,.5); } .laluz-theme-dark .pf-tab--active { color: var(--lotus); border-bottom-color: var(--lotus); } .laluz-theme-dark .pf-cat { background: #150d1c; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.85); } .laluz-theme-dark .pf-cat--on { border-color: var(--gold); background: rgba(200,155,60,.1); color: var(--lotus); } .laluz-theme-dark .pf-toggle-row { background: #150d1c; border-color: rgba(255,255,255,.08); } .laluz-theme-dark .pf-toggle-row strong { color: rgba(255,255,255,.9); } .laluz-theme-dark .pf-toggle-row small { color: rgba(255,255,255,.5); } .laluz-theme-dark .pf-notice--ok { background: rgba(60,160,100,.12); color: #5fcf8a; } .laluz-theme-dark .pf-notice--err { background: rgba(217,79,79,.12); color: #f4837e; } .laluz-theme-dark .db-card--link:hover { box-shadow: 0 4px 18px rgba(200,155,60,.1); } /* ══════════════════════════════════════════════════════════════════════════ ANGEBOTE-LISTE ol ══════════════════════════════════════════════════════════════════════════ */ /* Header-Bereich mit CTA */ .ol-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ol-btn-new { flex-shrink: 0; text-decoration: none; white-space: nowrap; } /* Leerer Zustand */ .ol-empty { text-align: center; padding: 4rem 2rem; background: var(--ivory); border: 1px dashed rgba(75,33,106,.15); border-radius: 14px; } .ol-empty__icon { font-size: 2.5rem; color: var(--gold); display: block; margin-bottom: 1rem; } .ol-empty h2 { font-size: 1.4rem; color: var(--violet); margin-bottom: .5rem; } .ol-empty p { color: var(--text-2); font-size: .92rem; max-width: 380px; margin: 0 auto; line-height: 1.6; } /* Tabelle */ .ol-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .ol-table thead tr { background: rgba(75,33,106,.04); border-bottom: 2px solid rgba(75,33,106,.08); } .ol-table th { padding: .75rem 1.25rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .ol-row { border-bottom: 1px solid rgba(75,33,106,.06); transition: background .15s; } .ol-row:last-child { border-bottom: none; } .ol-row:hover { background: rgba(200,155,60,.04); } .ol-row td { padding: .9rem 1.25rem; vertical-align: middle; } .ol-row__title strong { display: block; color: var(--text-1); font-weight: 600; margin-bottom: .15rem; } .ol-row__title small { display: block; font-size: .78rem; color: var(--text-2); } .ol-row__date { color: var(--text-2); white-space: nowrap; } .ol-row__none { color: rgba(106,93,103,.4); } /* Status-Badge */ .ol-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 2rem; padding: .2rem .65rem; white-space: nowrap; } .ol-badge--ok { background: rgba(60,160,100,.1); border: 1px solid rgba(60,160,100,.3); color: #276844; } .ol-badge--pending { background: rgba(200,155,60,.1); border: 1px solid rgba(200,155,60,.3); color: #8a6820; } /* Aktions-Buttons in Tabellenzeile – umbrechend, damit nichts abgeschnitten wird, wenn mehrere/lange Buttons (z. B. „Verifizierung aufheben") nicht in eine Zeile passen. */ .ol-row__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; } .ol-row__actions .ol-action-btn { margin-left: 0; } .ol-action-btn { display: inline-flex; align-items: center; padding: .35rem .75rem; font-size: .78rem; font-weight: 600; border-radius: 6px; border: 1px solid rgba(75,33,106,.15); background: none; color: var(--violet); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; margin-left: .4rem; font-family: inherit; } .ol-action-btn:hover { background: rgba(75,33,106,.06); border-color: var(--violet); color: var(--violet); } .ol-action-btn--del { color: #b63434; border-color: rgba(217,79,79,.2); } .ol-action-btn--del:hover { background: rgba(217,79,79,.06); border-color: rgba(217,79,79,.4); color: #b63434; } /* Lösch-Dialog */ .ol-dialog-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ol-dialog { background: var(--cream); border-radius: 16px; padding: 2rem 2.25rem; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .ol-dialog h3 { font-size: 1.35rem; color: var(--violet); margin-bottom: .75rem; } .ol-dialog p { font-size: .92rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.5rem; } .ol-dialog__actions { display: flex; gap: .75rem; justify-content: flex-end; } .ol-btn-delete { display: inline-flex; align-items: center; padding: .65rem 1.4rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; border-radius: 50px; border: none; background: #c0392b; color: #fff; cursor: pointer; transition: background .2s; font-family: inherit; } .ol-btn-delete:hover:not(:disabled) { background: #a93226; } .ol-btn-delete:disabled { opacity: .5; cursor: not-allowed; } /* Bild-Vorschau im Editor */ .ol-img-preview { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: .75rem; object-fit: cover; border: 1px solid rgba(75,33,106,.1); } /* Dark mode */ .laluz-theme-dark .ol-empty { background: #1E1228; border-color: rgba(255,255,255,.08); } .laluz-theme-dark .ol-empty h2 { color: var(--lotus); } .laluz-theme-dark .ol-empty p { color: rgba(255,255,255,.5); } .laluz-theme-dark .ol-table thead tr { background: rgba(255,255,255,.03); } .laluz-theme-dark .ol-row { border-color: rgba(255,255,255,.05); } .laluz-theme-dark .ol-row:hover { background: rgba(200,155,60,.05); } .laluz-theme-dark .ol-row__title strong { color: rgba(255,255,255,.9); } .laluz-theme-dark .ol-row__title small { color: rgba(255,255,255,.45); } .laluz-theme-dark .ol-row__date { color: rgba(255,255,255,.45); } .laluz-theme-dark .ol-badge--ok { color: #5fcf8a; } .laluz-theme-dark .ol-badge--pending { color: var(--gold); } .laluz-theme-dark .ol-action-btn { border-color: rgba(255,255,255,.1); color: var(--lotus); } .laluz-theme-dark .ol-action-btn:hover { background: rgba(255,255,255,.05); border-color: var(--lotus); } .laluz-theme-dark .ol-action-btn--del { color: #f4837e; border-color: rgba(244,131,126,.2); } .laluz-theme-dark .ol-dialog { background: #1E1228; } .laluz-theme-dark .ol-dialog h3 { color: var(--lotus); } /* ══════════════════════════════════════════════════════════════════════════ PAKET & ZAHLUNG pz ══════════════════════════════════════════════════════════════════════════ */ /* Aktuelles-Paket-Banner */ .pz-current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(135deg, rgba(75,33,106,.06) 0%, rgba(200,155,60,.06) 100%); border: 1px solid rgba(200,155,60,.2); border-radius: 14px; padding: 1.5rem 2rem; } .pz-current__info { display: flex; flex-direction: column; gap: .3rem; } .pz-current__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .pz-current__name { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; color: var(--violet); line-height: 1.1; } .pz-current__price { font-size: .88rem; color: var(--text-2); } .pz-current__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; } .pz-current__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } /* Feature-Liste */ .pz-features { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .45rem; } .pz-features li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text-1); } .pz-features__check { color: var(--gold); font-size: .9rem; flex-shrink: 0; } /* Paket-Auswahl-Grid */ .pz-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .pz-pkg { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.25rem; background: var(--cream); border: 2px solid rgba(75,33,106,.1); border-radius: 12px; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; font-family: inherit; } .pz-pkg:hover { border-color: var(--gold); } .pz-pkg--on { border-color: var(--gold); background: rgba(200,155,60,.06); box-shadow: 0 0 0 3px rgba(200,155,60,.15); } .pz-pkg--current { border-color: rgba(75,33,106,.25); } .pz-pkg__check { position: absolute; top: .75rem; right: .75rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid rgba(200,155,60,.4); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--gold); background: var(--cream); } .pz-pkg--on .pz-pkg__check { background: var(--gold); color: #fff; border-color: var(--gold); } .pz-pkg__ribbon { position: absolute; top: 0; left: 1rem; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); background: rgba(75,33,106,.08); border: 1px solid rgba(75,33,106,.15); border-top: none; padding: .15rem .55rem .2rem; border-radius: 0 0 6px 6px; } .pz-pkg__name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 700; color: var(--violet); margin-top: .75rem; } .pz-pkg__price { font-size: 1.3rem; font-weight: 700; color: var(--text-1); } .pz-pkg__price small { font-size: .75rem; font-weight: 400; color: var(--text-2); } .pz-pkg__features { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--text-2); } /* Zahlungsmethoden */ .pz-methods { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; } .pz-method { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--cream); border: 2px solid rgba(75,33,106,.1); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; font-family: inherit; } .pz-method:hover { border-color: var(--gold); } .pz-method--on { border-color: var(--gold); background: rgba(200,155,60,.06); } .pz-method__check { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid rgba(200,155,60,.4); display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: var(--gold); flex-shrink: 0; background: var(--cream); } .pz-method--on .pz-method__check { background: var(--gold); color: #fff; border-color: var(--gold); } .pz-method__icon { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .pz-method__icon-label { font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: var(--text-2); } .pz-method__info strong { display: block; font-size: .9rem; color: var(--text-1); font-weight: 600; } .pz-method__info small { display: block; font-size: .78rem; color: var(--text-2); } /* Banküberweisung-Karte */ .pz-bank-card { text-align: center; } .pz-bank-icon { font-size: 2.5rem; color: var(--gold); display: block; margin-bottom: .75rem; } .pz-bank-details { background: var(--cream); border: 1px solid rgba(75,33,106,.08); border-radius: 10px; overflow: hidden; margin-top: 1.5rem; text-align: left; } .pz-bank-row { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid rgba(75,33,106,.06); } .pz-bank-row:last-child { border-bottom: none; } .pz-bank-row--highlight { background: rgba(200,155,60,.07); } .pz-bank-label { font-size: .78rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; min-width: 120px; } .pz-bank-value { font-size: .9rem; color: var(--text-1); } .pz-bank-mono { font-family: 'Courier New', monospace; font-weight: 600; } /* Fehler-Badge in Zahlungshistorie */ .ol-badge--err { background: rgba(217,79,79,.1); border: 1px solid rgba(217,79,79,.3); color: #b63434; } /* Dark mode */ .laluz-theme-dark .pz-current { background: rgba(255,255,255,.02); border-color: rgba(200,155,60,.15); } .laluz-theme-dark .pz-current__name { color: var(--lotus); } .laluz-theme-dark .pz-pkg { background: #150d1c; border-color: rgba(255,255,255,.1); } .laluz-theme-dark .pz-pkg--on { background: rgba(200,155,60,.08); } .laluz-theme-dark .pz-pkg__name { color: var(--lotus); } .laluz-theme-dark .pz-pkg__check { background: #150d1c; } .laluz-theme-dark .pz-method { background: #150d1c; border-color: rgba(255,255,255,.1); } .laluz-theme-dark .pz-method--on { background: rgba(200,155,60,.08); } .laluz-theme-dark .pz-method__check { background: #150d1c; } .laluz-theme-dark .pz-method__info strong { color: rgba(255,255,255,.9); } .laluz-theme-dark .pz-method__info small { color: rgba(255,255,255,.5); } .laluz-theme-dark .pz-bank-details { background: #150d1c; border-color: rgba(255,255,255,.08); } .laluz-theme-dark .pz-bank-row { border-color: rgba(255,255,255,.05); } .laluz-theme-dark .pz-bank-row--highlight { background: rgba(200,155,60,.06); } .laluz-theme-dark .pz-bank-value { color: rgba(255,255,255,.85); } /* ── Admin: Kategorien-Verwaltung ─────────────────────────────────── */ .ck-sub-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; } .ck-sub-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 4.5rem auto; gap: .5rem; align-items: center; } /* Eingabefelder dürfen unter ihre intrinsische Mindestbreite schrumpfen, damit die Zeile (inkl. Reihenfolge + Löschen) nicht über die Karte hinausragt. */ .ck-sub-row > * { min-width: 0; } .ck-sub-row .ck-sub-order { text-align: center; } .ck-sub-add { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; } .ck-sub-add .rg-input { flex: 1 1 auto; } @media (max-width: 720px) { .ck-sub-row { grid-template-columns: 1fr 1fr; } .ck-sub-row .ck-sub-order { grid-column: 1; } } /* ── Admin: scrollbare Tabellenkarte ────────────────────────────────── Rundet die Ecken UND erlaubt horizontales Scrollen, damit breite Tabellen (z. B. mehrere Aktions-Buttons) auf schmalen Viewports nicht rechts abgeschnitten werden, sondern scrollbar bleiben. */ .ol-table-card { padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .ol-table-card .ol-table { min-width: 640px; } /* ── Profil: Social-Media-Links ───────────────────────────────────── */ .pl-social { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; } .pl-social__link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ivory, #F3EDE6); border: 1px solid rgba(75,33,106,.12); color: var(--violet, #5A235F); transition: background .15s, color .15s, border-color .15s, transform .15s; } .pl-social__link:hover { background: var(--gold, #C9A15A); border-color: var(--gold, #C9A15A); color: #fff; transform: translateY(-2px); } .laluz-theme-dark .pl-social__link { background: #2C1F33; border-color: rgba(255,255,255,.1); color: #EAE0F0; } .laluz-theme-dark .pl-social__link:hover { background: var(--gold, #C9A15A); color: #1A0E22; } /* ── Hero-Suche: runde Auswahlboxen (Kategorie & Umkreis) ───────────── Modernere, abgerundete „Pille" mit Luft um den Text (statt gequetscht). */ .sb__inp-wrap--select { background: var(--light-gold, #F6F0E4); border: 1px solid rgba(200,155,60,0.30); border-radius: 999px; padding: .5rem .55rem .5rem .9rem; gap: .5rem; } .sb__inp-wrap--select .sb__sel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .1rem 0; line-height: 1.4; } .sb__inp-wrap--select .sb__ico { width: 16px; height: 16px; } .sb__inp-wrap--select .sb__arr { opacity: 1; margin-right: .15rem; } .sb__sel:disabled { opacity: .45; cursor: not-allowed; } .sb__inp-wrap--select:focus-within { border-color: var(--gold, #C9A15A); box-shadow: 0 0 0 3px rgba(200,155,60,.15); } .laluz-theme-dark .sb__inp-wrap--select { background: rgba(200,155,60,.1); border-color: rgba(200,155,60,.25); } /* Auf Mobile sollen die Pillen komfortabel in voller Breite stehen */ @media (max-width: 768px) { .sb__inp-wrap--select { padding: .65rem .7rem .65rem 1rem; } .sb__inp-wrap--select .sb__sel { font-size: 1rem; } } /* ── Registrieren: Tab-Umschaltung (Spirituelle Anbieter / Suchprofil) ────── */ .rc-tabs { display: flex; gap: .5rem; justify-content: center; margin: 0 auto 2.5rem; background: var(--ivory, #F3EDE6); border: 1px solid rgba(75,33,106,.1); border-radius: 999px; padding: .4rem; max-width: 520px; } .rc-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border: none; background: transparent; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: .95rem; font-weight: 600; color: var(--text-2, #6A5D67); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; } .rc-tab__icon { font-size: 1rem; } .rc-tab:hover { color: var(--violet, #5A235F); } .rc-tab--active { background: var(--gold, #C9A15A); color: #fff; box-shadow: 0 4px 14px rgba(200,155,60,.3); } .laluz-theme-dark .rc-tabs { background: #2C1F33; border-color: rgba(255,255,255,.08); } .laluz-theme-dark .rc-tab { color: rgba(234,224,240,.6); } .laluz-theme-dark .rc-tab--active { color: #1A0E22; } @media (max-width: 560px) { .rc-tabs { max-width: 100%; } .rc-tab { padding: .7rem .75rem; font-size: .85rem; } .rc-tab__icon { display: none; } } /* ── NavBar: Hamburger & Mobil-Menü ───────────────────────────────── */ .hn__burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: none; cursor: pointer; color: var(--violet); border-radius: 8px; } .hn__burger:hover { background: rgba(75,33,106,0.06); } .hn__link--menuonly { display: none; } .hn__auth-btn { white-space: nowrap; } @media (max-width: 768px) { /* min-width:0 laesst den Markennamen schrumpfen, statt die Leiste auseinanderzudruecken. */ .hn__brand { margin-right: auto; min-width: 0; } .hn__burger { display: inline-flex; order: 3; } .hn__right { order: 2; gap: 0.4rem; } /* Zentrale Links als ausklappbares Panel unter der Leiste */ .hn__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: rgba(248,243,236,0.99); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(75,33,106,0.1); box-shadow: 0 12px 24px rgba(58,44,53,0.12); padding: 0.5rem; } .hn__links--open { display: flex; } .hn__links .hn__link { text-align: left; padding: 0.85rem 1rem; font-size: 0.85rem; border-radius: 8px; } .hn__link--menuonly { display: block; } } /* Schmale Geraete: Der Sprachwechsler wandert ins Menue. Bis 560 statt bis 480, weil Marke, Themenschalter, Sprachen, Anmelde-Schaltflaeche und Menuetaste in diesem Band zusammen breiter werden als der Bildschirm - die Seite liess sich dann seitlich verschieben. */ @media (max-width: 560px) { .hn__right .language-switcher { display: none; } } .laluz-theme-dark .hn__links { background: rgba(26,14,34,0.99); border-color: rgba(255,255,255,0.08); } .laluz-theme-dark .hn__burger { color: #EAE0F0; } .laluz-theme-dark .hn__burger:hover { background: rgba(255,255,255,0.07); } /* ── Über-uns-Seite ───────────────────────────────────────────────── */ .ab-hero { background: var(--ivory, #F3EDE6); padding: 3.5rem 0 2.5rem; border-bottom: 1px solid rgba(75,33,106,0.07); } .ab-hero__inner { max-width: 820px; margin: 0 auto; text-align: center; } .ab-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3rem); color: var(--violet, #5A235F); line-height: 1.15; margin: .5rem 0 1.25rem; } .ab-lead { font-size: 1.15rem; color: var(--text-2, #6A5D67); line-height: 1.6; max-width: 640px; margin: 0 auto; } .ab-section { padding: 3rem 0 4rem; background: var(--cream, #FAF8F5); } .ab-content { max-width: 760px; margin: 0 auto; } .ab-content p { font-size: 1.02rem; line-height: 1.8; color: var(--text-1, #3A2C35); margin-bottom: 1.25rem; } .ab-h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: var(--violet, #5A235F); margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(75,33,106,0.1); } .ab-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; } .laluz-theme-dark .ab-hero { background: #1E1228; border-color: rgba(255,255,255,0.06); } .laluz-theme-dark .ab-title { color: var(--lotus, #D9A0BF); } .laluz-theme-dark .ab-content p { color: rgba(234,224,240,0.85); } .laluz-theme-dark .ab-h2 { color: var(--lotus, #D9A0BF); border-color: rgba(255,255,255,0.1); } @media (max-width: 560px) { .ab-cta .rg-btn-primary, .ab-cta .rg-btn-secondary { flex: 1; text-align: center; } } /* ── Profil-Wizard: Schritt-für-Schritt ───────────────────────────── */ .pf-stepper { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .pf-stepper__item { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 1px solid rgba(75,33,106,0.12); background: var(--ivory, #F3EDE6); border-radius: 999px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: .8rem; font-weight: 600; color: var(--text-2, #6A5D67); transition: background .15s, color .15s, border-color .15s; } .pf-stepper__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(75,33,106,0.1); font-size: .78rem; flex-shrink: 0; } .pf-stepper__item:hover { border-color: var(--gold, #C9A15A); color: var(--violet, #5A235F); } .pf-stepper__item--active { background: var(--violet, #5A235F); border-color: var(--violet, #5A235F); color: #fff; } .pf-stepper__item--active .pf-stepper__num { background: rgba(255,255,255,0.25); color: #fff; } .pf-stepper__item--done { border-color: var(--gold, #C9A15A); color: var(--gold-dark, #a37f3e); } .pf-stepper__item--done .pf-stepper__num { background: var(--gold, #C9A15A); color: #fff; } /* Mobil zwei Schritte je Zeile, ab 600 px drei – so bleibt jeder Button gut treffbar, statt sieben Pillen ungleichmäßig umbrechen zu lassen. */ .pf-stepper__item { flex: 1 1 calc(50% - 0.2rem); } @media (min-width: 600px) { .pf-stepper__item { flex: 1 1 calc(33.333% - 0.27rem); } } /* Ab der Arbeitsbreite stehen alle sieben Schritte in einer Reihe und teilen den Platz gleichmäßig: „1 Texte · 2 Bilder · 3 Videos …" als eine Leiste. In 840 px Inhaltsbreite passen sie nur ohne Ziffernkreis – die Ziffer steht deshalb hier direkt vor der Beschriftung. */ @media (min-width: 900px) { .pf-stepper { flex-wrap: nowrap; gap: .35rem; } .pf-stepper__item { flex: 1 1 0; min-width: 0; justify-content: center; gap: .35rem; padding: .5rem .6rem; font-size: .75rem; } .pf-stepper__num { width: auto; height: auto; background: none; font-size: .75rem; opacity: .7; } /* Gleiche Spezifität wie die Basisregeln weiter oben, sonst bliebe hinter der Ziffer des aktiven bzw. erledigten Schritts ein Farbfleck stehen. */ .pf-stepper__item--active .pf-stepper__num, .pf-stepper__item--done .pf-stepper__num { background: none; color: inherit; } .pf-stepper__item--active .pf-stepper__num { opacity: 1; } .pf-stepper__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .pf-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; } .pf-wizard-nav__pos { font-size: .85rem; color: var(--text-2, #6A5D67); font-weight: 600; } .laluz-theme-dark .pf-stepper__item { background: #2C1F33; border-color: rgba(255,255,255,0.08); color: rgba(234,224,240,0.6); } .laluz-theme-dark .pf-stepper__item--active { background: var(--lotus, #D9A0BF); border-color: var(--lotus, #D9A0BF); color: #1A0E22; } .laluz-theme-dark .pf-stepper__num { background: rgba(255,255,255,0.12); } /* Auf schmalen Bildschirmen stand hier nur die Ziffer - "1 2 3 4 5 6 7" sagt niemandem, was ihn im Schritt erwartet. Die Beschriftung bleibt deshalb stehen; Platz dafuer entsteht durch den kleineren Ziffernvorsatz ohne Kreis, genau wie in der einreihigen Darstellung ab 900 px. Zwei Schritte je Zeile (Grundregel weiter oben) reichen fuer "Darstellung" und "Kategorien" aus. */ @media (max-width: 640px) { .pf-stepper { gap: .35rem; } .pf-stepper__item { justify-content: center; gap: .35rem; padding: .5rem .55rem; font-size: .76rem; } .pf-stepper__num { width: auto; height: auto; background: none; font-size: .76rem; opacity: .7; } .pf-stepper__item--active .pf-stepper__num, .pf-stepper__item--done .pf-stepper__num { background: none; color: inherit; } .pf-stepper__item--active .pf-stepper__num { opacity: 1; } .pf-stepper__lbl { white-space: nowrap; } .pf-wizard-nav { flex-direction: column-reverse; } .pf-wizard-nav .rg-btn-primary, .pf-wizard-nav .rg-btn-secondary { width: 100%; text-align: center; } } /* ── NiceSelect: modernes Dropdown (Ersatz für natives