/* ═══════════════════════════════════════════════════════ 24FLEX – MULTI-THEME STYLESHEET 6 Farbthemen – Wechsel per: ┌─────────┬──────────────────────────────┐ │ blue │ Navy & Blau (Standard) │ │ warm │ Beige & Amber │ │ forest │ Dunkelgrün & Gold │ │ slate │ Kühles Dunkelgrau & Blau │ │ pearl │ Weiß & Hellgrau │ │ carbon │ Anthrazit & Weiß │ └─────────┴──────────────────────────────┘ ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap'); /* ─── THEME: BLUE (Navy/Blau – Standard) ─── */ :root, [data-theme="blue"] { --bg: #0a1628; --bg-mid: #0f1e35; --bg-card: #111f38; --bg-deep: #060e1c; --primary: #1a5cff; --primary-lt: #3a7bff; --primary-glow:rgba(26,92,255,.35); --accent: #00d4ff; --text: #ffffff; --text-mid: #aec0d4; --text-soft: #7a8fa8; --border: rgba(26,92,255,.15); --card-bg: rgba(255,255,255,.04); --card-border: rgba(26,92,255,.14); --card-hover: rgba(26,92,255,.1); --input-bg: rgba(255,255,255,.05); --input-border:rgba(26,92,255,.2); --footer-bg: #060e1c; --footer-text: rgba(255,255,255,.35); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(10,22,40,.9); --nav-scrolled:rgba(6,14,28,.97); --orb-color: rgba(26,92,255,.35); --orb-color2: rgba(0,212,255,.15); --grid-color: rgba(26,92,255,.05); --ticker-bg: #1a5cff; --scroll-line: rgba(26,92,255,.7); --step-bg: rgba(26,92,255,.1); --step-border: rgba(26,92,255,.3); --step-color: #1a5cff; --hero-bg-start:#0a1628; --hero-bg-end: #0f1e35; --section-alt: #0f1e35; --section-base:#0a1628; --soc-bg: rgba(255,255,255,.06); --soc-border: rgba(255,255,255,.1); --cursor-color:#1a5cff; --cursor-ring: rgba(26,92,255,.55); } /* ─── THEME: WARM (Beige/Amber) ─── */ [data-theme="warm"] { --bg: #faf6f0; --bg-mid: #f2ebe0; --bg-card: #fffcf8; --bg-deep: #1c1409; --primary: #d4830a; --primary-lt: #e8980f; --primary-glow:rgba(212,131,10,.3); --accent: #b85c00; --text: #1c1409; --text-mid: #6b4f38; --text-soft: #9c7e68; --border: rgba(212,131,10,.15); --card-bg: rgba(255,255,255,.85); --card-border: rgba(212,131,10,.12); --card-hover: rgba(212,131,10,.06); --input-bg: #f2ebe0; --input-border:rgba(212,131,10,.2); --footer-bg: #1c1409; --footer-text: rgba(255,255,255,.35); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(250,246,240,.92); --nav-scrolled:rgba(250,246,240,.98); --orb-color: rgba(212,131,10,.2); --orb-color2: rgba(212,131,10,.1); --grid-color: rgba(212,131,10,.055); --ticker-bg: #d4830a; --scroll-line: rgba(212,131,10,.7); --step-bg: rgba(212,131,10,.1); --step-border: rgba(212,131,10,.3); --step-color: #d4830a; --hero-bg-start:#faf6f0; --hero-bg-end: #f2ebe0; --section-alt: #f2ebe0; --section-base:#faf6f0; --soc-bg: rgba(255,255,255,.08); --soc-border: rgba(255,255,255,.12); --cursor-color:#d4830a; --cursor-ring: rgba(212,131,10,.55); } /* ─── THEME: FOREST (Dunkelgrün/Gold) ─── */ [data-theme="forest"] { --bg: #0d1f10; --bg-mid: #112614; --bg-card: #142d18; --bg-deep: #080f09; --primary: #4caf50; --primary-lt: #66bb6a; --primary-glow:rgba(76,175,80,.3); --accent: #ffd54f; --text: #ffffff; --text-mid: #a5c8a8; --text-soft: #6a9b6e; --border: rgba(76,175,80,.18); --card-bg: rgba(255,255,255,.03); --card-border: rgba(76,175,80,.15); --card-hover: rgba(76,175,80,.08); --input-bg: rgba(255,255,255,.05); --input-border:rgba(76,175,80,.2); --footer-bg: #080f09; --footer-text: rgba(255,255,255,.35); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(13,31,16,.92); --nav-scrolled:rgba(8,15,9,.97); --orb-color: rgba(76,175,80,.3); --orb-color2: rgba(255,213,79,.12); --grid-color: rgba(76,175,80,.05); --ticker-bg: #2e7d32; --scroll-line: rgba(76,175,80,.7); --step-bg: rgba(76,175,80,.1); --step-border: rgba(76,175,80,.3); --step-color: #4caf50; --hero-bg-start:#0d1f10; --hero-bg-end: #112614; --section-alt: #112614; --section-base:#0d1f10; --soc-bg: rgba(255,255,255,.05); --soc-border: rgba(255,255,255,.1); --cursor-color:#4caf50; --cursor-ring: rgba(76,175,80,.55); } /* ─── THEME: SLATE (Kühles Dunkelgrau) ─── */ [data-theme="slate"] { --bg: #1a1d23; --bg-mid: #20242d; --bg-card: #262b36; --bg-deep: #10121a; --primary: #5b8dee; --primary-lt: #7aa3f5; --primary-glow:rgba(91,141,238,.28); --accent: #94b8ff; --text: #e8ecf4; --text-mid: #9aa3b8; --text-soft: #6b748a; --border: rgba(91,141,238,.15); --card-bg: rgba(255,255,255,.035); --card-border: rgba(255,255,255,.08); --card-hover: rgba(91,141,238,.07); --input-bg: rgba(255,255,255,.05); --input-border:rgba(91,141,238,.2); --footer-bg: #10121a; --footer-text: rgba(255,255,255,.3); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(26,29,35,.92); --nav-scrolled:rgba(16,18,26,.97); --orb-color: rgba(91,141,238,.2); --orb-color2: rgba(148,184,255,.1); --grid-color: rgba(91,141,238,.04); --ticker-bg: #3a5fbb; --scroll-line: rgba(91,141,238,.65); --step-bg: rgba(91,141,238,.1); --step-border: rgba(91,141,238,.28); --step-color: #5b8dee; --hero-bg-start:#1a1d23; --hero-bg-end: #20242d; --section-alt: #20242d; --section-base:#1a1d23; --soc-bg: rgba(255,255,255,.05); --soc-border: rgba(255,255,255,.09); --cursor-color:#5b8dee; --cursor-ring: rgba(91,141,238,.5); } /* ─── THEME: PEARL (Weiß / Hellgrau) ─── */ [data-theme="pearl"] { --bg: #ffffff; --bg-mid: #f4f6f9; --bg-card: #ffffff; --bg-deep: #1a1d23; --primary: #2563eb; --primary-lt: #3b82f6; --primary-glow:rgba(37,99,235,.2); --accent: #1d4ed8; --text: #0f172a; --text-mid: #334155; --text-soft: #64748b; --border: rgba(0,0,0,.08); --card-bg: #ffffff; --card-border: rgba(0,0,0,.07); --card-hover: rgba(37,99,235,.04); --input-bg: #f8fafc; --input-border:rgba(0,0,0,.12); --footer-bg: #0f172a; --footer-text: rgba(255,255,255,.35); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(255,255,255,.92); --nav-scrolled:rgba(255,255,255,.98); --orb-color: rgba(37,99,235,.12); --orb-color2: rgba(37,99,235,.06); --grid-color: rgba(37,99,235,.04); --ticker-bg: #2563eb; --scroll-line: rgba(37,99,235,.5); --step-bg: rgba(37,99,235,.08); --step-border: rgba(37,99,235,.25); --step-color: #2563eb; --hero-bg-start:#ffffff; --hero-bg-end: #f4f6f9; --section-alt: #f4f6f9; --section-base:#ffffff; --soc-bg: rgba(255,255,255,.08); --soc-border: rgba(255,255,255,.12); --cursor-color:#2563eb; --cursor-ring: rgba(37,99,235,.45); } /* ─── THEME: CARBON (Anthrazit / Dunkel-Grau) ─── */ [data-theme="carbon"] { --bg: #111111; --bg-mid: #1a1a1a; --bg-card: #222222; --bg-deep: #080808; --primary: #e0e0e0; --primary-lt: #f5f5f5; --primary-glow:rgba(224,224,224,.15); --accent: #ffffff; --text: #f0f0f0; --text-mid: #a0a0a0; --text-soft: #666666; --border: rgba(255,255,255,.1); --card-bg: rgba(255,255,255,.03); --card-border: rgba(255,255,255,.08); --card-hover: rgba(255,255,255,.05); --input-bg: rgba(255,255,255,.05); --input-border:rgba(255,255,255,.12); --footer-bg: #080808; --footer-text: rgba(255,255,255,.3); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(17,17,17,.92); --nav-scrolled:rgba(8,8,8,.97); --orb-color: rgba(200,200,200,.08); --orb-color2: rgba(255,255,255,.05); --grid-color: rgba(255,255,255,.03); --ticker-bg: #2a2a2a; --scroll-line: rgba(255,255,255,.4); --step-bg: rgba(255,255,255,.07); --step-border: rgba(255,255,255,.18); --step-color: #e0e0e0; --hero-bg-start:#111111; --hero-bg-end: #1a1a1a; --section-alt: #1a1a1a; --section-base:#111111; --soc-bg: rgba(255,255,255,.05); --soc-border: rgba(255,255,255,.09); --cursor-color:#e0e0e0; --cursor-ring: rgba(255,255,255,.35); } /* ═══════════════════════════════════════════ BASE STYLES (theme-neutral) ═══════════════════════════════════════════ */ /* ── Global headline font – alle Seiten einheitlich (forest: Bebas Neue) ── */ h1, h2, h3, h4, .sec-title, .logo, .page-hero h1, .bereich-header-text h2, .wert-card h3, .timeline-item h3, .fakt-num, .div-name, .stat-num, #cta h2, .portrait-badge h4, .kt-text h3, .coming-soon-box h3 { font-family: var(--headline-font); } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; cursor: none; transition: background .4s, color .4s; } /* ── CUSTOM CURSOR ── */ #cur { position: fixed; z-index: 9999; pointer-events: none; width: 10px; height: 10px; background: var(--cursor-color); border-radius: 50%; transform: translate(-50%,-50%); transition: width .3s, height .3s, background .3s; will-change: left, top; } #curR { position: fixed; z-index: 9998; pointer-events: none; width: 34px; height: 34px; border: 1.5px solid var(--cursor-ring); border-radius: 50%; transform: translate(-50%,-50%); transition: width .35s, height .35s, border-color .3s; will-change: left, top; } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: flex; align-items: center; justify-content: space-between; padding: 1rem 5vw; background: var(--nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); transition: background .4s, padding .3s, box-shadow .3s; } nav.scrolled { background: var(--nav-scrolled); box-shadow: 0 4px 30px rgba(0,0,0,.12); padding: .7rem 5vw; } .logo { font-family: var(--headline-font); font-size: 1.85rem; letter-spacing: 1px; color: var(--text); text-decoration: none; display: flex; align-items: center; } .logo .lx { color: var(--primary); font-style: var(--headline-style); } .logo .ltag { font-family: 'DM Sans', sans-serif; font-size: .56rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--text-soft); margin-left: .7rem; padding: .18rem .55rem; border: 1px solid var(--border); border-radius: 4px; font-style: normal; } nav ul { list-style: none; display: flex; align-items: center; gap: 2rem; } nav ul a { text-decoration: none; color: var(--text-soft); font-size: .87rem; font-weight: 400; transition: color .2s; position: relative; } nav ul a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1.5px; background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform .3s; } nav ul a:hover { color: var(--text); } nav ul a:hover::after, nav ul a.active::after { transform: scaleX(1); transform-origin: left; } nav ul a.active { color: var(--text); font-weight: 500; } .nav-cta { background: var(--primary) !important; color: #fff !important; padding: .5rem 1.4rem !important; border-radius: 7px; font-weight: 500 !important; box-shadow: 0 4px 18px var(--primary-glow); transition: transform .2s, box-shadow .2s !important; } .nav-cta::after { display: none !important; } .nav-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px var(--primary-glow) !important; background: var(--primary-lt) !important; } .ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .ham span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; } .mob-menu { display: none; flex-direction: column; background: var(--bg-mid); border-top: 1px solid var(--border); position: fixed; top: 62px; left: 0; right: 0; z-index: 299; box-shadow: 0 8px 32px rgba(0,0,0,.15); max-height: calc(100vh - 62px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mob-menu a { padding: 1rem 5vw; color: var(--text-soft); text-decoration: none; font-size: .92rem; border-bottom: 1px solid var(--border); transition: color .2s, background .2s; flex-shrink: 0; } .mob-menu a:hover { color: var(--text); background: var(--card-hover); } .mob-menu.open { display: flex; } /* Landscape: kompaktere Menüpunkte damit alles sichtbar/scrollbar */ @media(max-height: 500px) { .mob-menu { top: 52px; max-height: calc(100vh - 52px); } .mob-menu a { padding: .65rem 5vw; font-size: .88rem; } } /* ── TICKER ── */ .ticker-wrap { display:none; background: var(--ticker-bg); overflow: hidden; padding: .65rem 0; } .ticker-wrap.ready { display:block; } .ticker { display: flex; gap: 3rem; animation: tick 28s linear infinite; width: max-content; } .ticker span { font-size: .72rem; font-weight: 500; color: #fff; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: .8rem; } .ticker span::after { content: '✦'; opacity: .55; font-size: .6rem; } @keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ── SECTIONS ── */ section { padding: 7rem 5vw; transition: background .4s; } .sec-inner { max-width: 1160px; margin: 0 auto; } .eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); margin-bottom: .9rem; } .sec-title { font-family: var(--headline-font); font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 900; line-height: 1; color: var(--text); letter-spacing: -.5px; } .sec-title .hl { color: var(--primary); font-style: var(--headline-style); } .sec-sub { font-size: .98rem; color: var(--text-soft); line-height: 1.8; font-weight: 300; max-width: 560px; margin-top: 1rem; } /* ── REVEAL ── */ .rv { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; } .rv2 { opacity:0; transform:translateY(28px); transition:opacity .65s .12s ease, transform .65s .12s ease; } .rv3 { opacity:0; transform:translateY(28px); transition:opacity .65s .24s ease, transform .65s .24s ease; } .rv.vis,.rv2.vis,.rv3.vis { opacity:1; transform:translateY(0); } /* ── BUTTONS ── */ .btn-p { display:inline-flex; align-items:center; gap:.5rem; background:var(--primary); color:#fff; padding:.9rem 2.2rem; border-radius:8px; font-size:.95rem; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:0 6px 24px var(--primary-glow); transition:transform .25s, box-shadow .25s, background .2s; } .btn-p:hover { background:var(--primary-lt); transform:translateY(-3px); box-shadow:0 12px 36px var(--primary-glow); } .btn-p .arr { transition:transform .25s; } .btn-p:hover .arr { transform:translateX(5px); } .btn-g { display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--text); padding:.9rem 2.2rem; border-radius:8px; font-size:.95rem; font-weight:400; text-decoration:none; border:1.5px solid var(--border); transition:border-color .25s, background .25s; } .btn-g:hover { border-color:var(--primary); background:var(--card-hover); } /* ── SERVICE CARDS ── */ .svc { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 1rem 1.1rem; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; } .svc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--svc-color, var(--primary)); transform:scaleX(0); transform-origin:left; transition:transform .4s; } .svc:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.1); border-color:var(--primary); } .svc:hover::before { transform:scaleX(1); } .svc-ico { width:34px; height:34px; border-radius:8px; background:var(--card-hover); border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; font-size:.95rem; margin-bottom:.6rem; } .svc h3 { font-family:var(--headline-font); font-size:.95rem; color:var(--text); margin-bottom:.25rem; font-weight:700; letter-spacing:.5px; } .svc p { font-size:.8rem; color:var(--text-soft); line-height:1.55; } /* ── TRAITS ── */ .trait { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:1.1rem 1.3rem; display:flex; align-items:center; gap:.75rem; transition:border-color .3s, transform .3s, box-shadow .3s; } .trait:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.1); } .trait-ico { font-size:1.3rem; width:38px; height:38px; border-radius:8px; background:var(--card-hover); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .trait h4 { font-size:.9rem; font-weight:500; color:var(--text); margin-bottom:.1rem; } .trait p { font-size:.76rem; color:var(--text-soft); } /* ── DIVISION PILLS ── */ .div-pill { font-size:.65rem; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; padding:.22rem .72rem; border-radius:50px; border:1px solid; } .dp-clean { background:rgba(26,92,255,.1); color:#1a5cff; border-color:rgba(26,92,255,.25); } .dp-facility { background:rgba(0,184,148,.1); color:#00b894; border-color:rgba(0,184,148,.25); } .dp-garden { background:rgba(46,204,113,.1); color:#2ecc71; border-color:rgba(46,204,113,.25); } .dp-bau { background:rgba(230,126,34,.1); color:#e67e22; border-color:rgba(230,126,34,.25); } .dp-soon { background:var(--card-bg); color:var(--text-soft); border-color:var(--border); } /* ── GALLERY ── */ .gal-item { border-radius:14px; overflow:hidden; position:relative; cursor:default; border:1px solid var(--card-border); transition:transform .35s, box-shadow .35s; } .gal-item:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.15); } .gal-bg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:4rem; transition:transform .5s; } .gal-item:hover .gal-bg { transform:scale(1.08); } .gal-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 50%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem; opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; } .gal-item:hover .gal-overlay { opacity:1; transform:translateY(0); } .gal-overlay h4 { font-family:var(--headline-font); font-size:1.1rem; color:#fff; margin-bottom:.2rem; font-weight:700; } .gal-overlay p { font-size:.78rem; color:rgba(255,255,255,.7); } .gal-shine { position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%); transform:translateX(-100%); transition:transform .5s; } .gal-item:hover .gal-shine { transform:translateX(100%); } /* ── CONTACT ITEMS ── */ .ki { display:flex; align-items:flex-start; gap:.9rem; padding:1.1rem 1.4rem; background:var(--card-bg); border-radius:11px; border:1px solid var(--card-border); transition:border-color .25s, transform .25s; text-decoration:none; color:inherit; cursor:pointer; } .ki:hover { border-color:var(--primary); transform:translateX(5px); } .ki-ico { width:38px; height:38px; min-width:38px; background:var(--card-hover); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.95rem; border:1px solid var(--card-border); } .ki h4 { font-size:.68rem; color:var(--text-soft); letter-spacing:1px; text-transform:uppercase; margin-bottom:.15rem; } .ki p, .ki span { font-size:.9rem; color:var(--text); } .ki a { color:var(--primary); text-decoration:none; font-size:.9rem; transition:color .2s; } .ki a:hover { color:var(--accent); } /* Force theme colors on anchor-ki — override browser link defaults */ a.ki, a.ki:link, a.ki:visited { color:var(--text) !important; text-decoration:none !important; } a.ki h4 { color:var(--text-soft) !important; } a.ki span { color:var(--text) !important; font-size:.9rem; } /* ── FORM ── */ .cform { display:flex; flex-direction:column; gap:1.1rem; } .frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .ff { display:flex; flex-direction:column; gap:.38rem; } .ff label { font-size:.7rem; color:var(--text-soft); letter-spacing:.5px; text-transform:uppercase; font-weight:500; } .ff input,.ff select,.ff textarea { background:var(--input-bg); border:1.5px solid var(--input-border); border-radius:8px; padding:.82rem 1rem; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.92rem; outline:none; transition:border-color .2s, box-shadow .2s; } .ff input:focus,.ff select:focus,.ff textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); } .ff input::placeholder,.ff textarea::placeholder { color:var(--text-soft); opacity:.5; } .ff select option { background:var(--bg-mid); color:var(--text); } .ff textarea { resize:vertical; min-height:115px; } .fsub { background:var(--primary); color:#fff; border:none; border-radius:8px; padding:.9rem 2rem; font-family:'DM Sans',sans-serif; font-size:.93rem; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:transform .25s, box-shadow .25s, background .2s; box-shadow:0 4px 18px var(--primary-glow); } .fsub:hover { background:var(--primary-lt); transform:translateY(-2px); box-shadow:0 10px 30px var(--primary-glow); } .fsub .sarr { transition:transform .25s; } .fsub:hover .sarr { transform:translateX(4px); } /* ── WHATSAPP FLOAT ── */ .wa-float { position:fixed; bottom:2rem; right:2rem; z-index:400; width:58px; height:58px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(37,211,102,.4); text-decoration:none; transition:transform .3s, box-shadow .3s; animation:waPulse 3s ease-in-out infinite; } .wa-float:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 12px 36px rgba(37,211,102,.6); animation:none; } .wa-float svg { width:30px; height:30px; fill:#fff; } .wa-tip { position:absolute; right:70px; bottom:50%; transform:translateY(50%); background:var(--bg-deep); color:var(--text); font-size:.78rem; font-weight:500; white-space:nowrap; padding:.4rem .9rem; border-radius:6px; border:1px solid var(--border); opacity:0; pointer-events:none; transition:opacity .25s; } .wa-float:hover .wa-tip { opacity:1; } @keyframes waPulse { 0%,100%{box-shadow:0 6px 24px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.3)} 50%{box-shadow:0 6px 24px rgba(37,211,102,.4),0 0 0 14px rgba(37,211,102,0)} } /* ── PAGE HERO (Unterseiten) ── */ .page-hero { min-height:42vh; display:flex; align-items:flex-end; padding:9rem 5vw 4rem; position:relative; overflow:hidden; background:var(--bg-mid); } .page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px); background-size:50px 50px; } /* P1: Dünner Trennbalken unter dem Header – wie die Linie bei "So läuft es ab" */ .page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--primary-glow),var(--primary-lt),var(--primary-glow),transparent); opacity:.75; z-index:3; } /* ── Hintergrundbild für Unterseiten-Hero ────────────────────────── Bild ablegen als img/header-leistungen.png (bzw. -kontakt / -ueber-uns) Sobald die Datei vorhanden ist, wird sie automatisch angezeigt. */ .ph-bg-img { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 30%; background-repeat:no-repeat; opacity:.45; } .ph-bg-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.45) 100%); } .ph-bg-leistungen { background-image:url('../img/header-leistungen.png'); } .ph-bg-kontakt { background-image:url('../img/header-kontakt.png'); } .ph-bg-ueber { background-image:url('../img/header-ueber-uns.png'); } .ph-bg-karriere { background-image:url('../img/header-karriere.png'); } .ph-bg-impressum { background-image:url('../img/header-impressum.png'); } .ph-bg-datenschutz { background-image:url('../img/header-datenschutz.png'); } .ph-bg-agb { background-image:url('../img/header-agb.png'); } /* Secure & Car Clean Bereichsfarben (leistungen.html) */ .bh-secure .bereich-icon-wrap { background:rgba(142,68,173,.1); border-color:rgba(142,68,173,.3); } .bh-carclean .bereich-icon-wrap { background:rgba(192,57,43,.1); border-color:rgba(192,57,43,.3); } .bh-secure h2 span { color:#8e44ad; font-style:var(--headline-style); } .bh-carclean h2 span { color:#c0392b; font-style:var(--headline-style); } .fc-secure { background:#8e44ad; } .fc-carclean { background:#c0392b; } .btn-sm-clean { background:#1a5cff; color:#fff; box-shadow:0 4px 14px rgba(26,92,255,.32); } .btn-sm-clean:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(26,92,255,.45); background:#3a7bff; } .btn-sm-facility { background:#00b894; color:#fff; box-shadow:0 4px 14px rgba(0,184,148,.3); } .btn-sm-facility:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,184,148,.42); background:#00d4aa; } .btn-sm-garden { background:#2ecc71; color:#fff; box-shadow:0 4px 14px rgba(46,204,113,.3); } .btn-sm-garden:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(46,204,113,.4); background:#48e88b; } .btn-sm-winterdienst { background:#5b8dee; color:#fff; box-shadow:0 4px 14px rgba(91,141,238,.3); } .btn-sm-winterdienst:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(91,141,238,.42); background:#7aa3f5; } .btn-sm-concierge { background:#9b59b6; color:#fff; box-shadow:0 4px 14px rgba(155,89,182,.3); } .btn-sm-concierge:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(155,89,182,.42); background:#b07cc6; } .btn-sm-bau { background:#e67e22; color:#fff; box-shadow:0 4px 14px rgba(230,126,34,.3); } .btn-sm-bau:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(230,126,34,.42); background:#f08030; } .btn-sm-secure { background:#8e44ad; color:#fff; box-shadow:0 4px 14px rgba(142,68,173,.3); } .btn-sm-secure:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(142,68,173,.42); background:#a055c8; } .btn-sm-carclean { background:#c0392b; color:#fff; box-shadow:0 4px 14px rgba(192,57,43,.3); } .btn-sm-carclean:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(192,57,43,.38); background:#d44535; } .ph-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; width:500px; height:500px; background:radial-gradient(circle,var(--orb-color),transparent 70%); top:-150px; right:-100px; animation:fl1 14s ease-in-out infinite; } .page-hero-inner { position:relative; z-index:2; width:100%; max-width:1160px; margin:0 auto; } /* Stronger text-shadow so titles stay legible over any background image */ .page-hero h1, .page-hero p { text-shadow:0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); } /* Stronger bottom gradient on hero images so text at the bottom is always readable */ .ph-bg-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.65) 100%); } /* Also make the hero sub-text on index readable */ .hero-sub { text-shadow:0 2px 12px rgba(0,0,0,.45); } .breadcrumb { display:flex; align-items:center; gap:.5rem; margin-bottom:1.2rem; font-size:.78rem; color:var(--text-soft); } .breadcrumb a { color:var(--primary); text-decoration:none; transition:color .2s; } .breadcrumb a:hover { color:var(--accent); } .breadcrumb span { opacity:.5; } .page-hero h1 { font-family:var(--headline-font); font-size:clamp(3rem,6vw,5.5rem); font-weight:900; line-height:1; color:var(--text); letter-spacing:-1px; } .page-hero h1 .hl { color:var(--primary); font-style:var(--headline-style); } .page-hero p { font-size:1rem; color:var(--text-mid); line-height:1.75; max-width:540px; margin-top:1rem; font-weight:300; } /* ── FOOTER ── */ footer { background:var(--footer-bg); padding:4rem 5vw 2.5rem; border-top:none; position:relative; transition:background .4s; } footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--primary-glow),var(--primary-lt),var(--primary-glow),transparent); opacity:.75; } .ftop { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.07); } .fbrand .logo { display:block; margin-bottom:.8rem; color:#fff; } .fbrand .tagline { font-size:.78rem; color:rgba(255,255,255,.38); line-height:1.65; max-width:220px; margin-top:.5rem; } .fdivs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; } .fdiv-tag { font-size:.63rem; font-weight:500; letter-spacing:1px; padding:.18rem .6rem; border-radius:50px; text-transform:uppercase; } .fdt-c { background:rgba(26,92,255,.18); color:#6ca0ff; border:1px solid rgba(26,92,255,.25); } .fdt-f { background:rgba(0,184,148,.15); color:#00d4aa; border:1px solid rgba(0,184,148,.2); } .fdt-g { background:rgba(46,204,113,.12); color:#5ee88a; border:1px solid rgba(46,204,113,.18); } .fdt-b { background:rgba(230,126,34,.12); color:#f0a060; border:1px solid rgba(230,126,34,.18); } .fcol h4 { font-size:.67rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1.2rem; } .fcol ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; } .fcol a { text-decoration:none; color:rgba(255,255,255,.42); font-size:.85rem; transition:color .2s; } .fcol a:hover { color:rgba(255,255,255,.85); } .social-row { display:flex; gap:.55rem; margin-top:1.3rem; } .soc-btn { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--soc-bg); border:1px solid var(--soc-border); text-decoration:none; cursor:pointer; transition:background .25s, border-color .25s, transform .25s; } .soc-btn svg { width:18px; height:18px; fill:rgba(255,255,255,.55); transition:fill .2s; } .soc-btn:hover { transform:translateY(-3px); } .soc-btn:hover svg { fill:#fff; } .soc-wa:hover { background:rgba(37,211,102,.25); border-color:rgba(37,211,102,.5); } .soc-fb:hover { background:rgba(24,119,242,.25); border-color:rgba(24,119,242,.5); } .soc-li:hover { background:rgba(10,102,194,.25); border-color:rgba(10,102,194,.5); } .soc-mail:hover{ background:rgba(212,131,10,.25); border-color:rgba(212,131,10,.5); } .soc-ph:hover { background:rgba(46,204,113,.25); border-color:rgba(46,204,113,.5); } .fbot { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; flex-wrap:wrap; gap:1rem; } .fbot p,.fbot a { font-size:.74rem; color:rgba(255,255,255,.25); } .fbot a { text-decoration:none; transition:color .2s; } .fbot a:hover { color:rgba(255,255,255,.6); } .fbot-links { display:flex; gap:1.5rem; } /* ── LEGAL ── */ .legal-content { max-width:800px; margin:0 auto; line-height:1.85; } .legal-content h2 { font-family:var(--headline-font); font-size:1.5rem; font-weight:700; color:var(--text); margin:2.5rem 0 .8rem; border-left:3px solid var(--primary); padding-left:.9rem; } .legal-content h3 { font-size:1rem; font-weight:500; color:var(--text); margin:1.5rem 0 .5rem; } .legal-content p { color:var(--text-soft); margin-bottom:1rem; font-size:.95rem; } .legal-content ul { color:var(--text-soft); padding-left:1.5rem; margin-bottom:1rem; font-size:.95rem; } .legal-content ul li { margin-bottom:.4rem; } .legal-content a { color:var(--primary); text-decoration:none; } .legal-content a:hover { text-decoration:underline; } .legal-placeholder { background:var(--card-hover); border:1.5px dashed var(--border); border-radius:14px; padding:2rem; margin:1.5rem 0; } .legal-placeholder p { color:var(--text-soft); font-style:italic; margin:0; } /* ── TABS ── */ .tabs-wrap { display:flex; gap:.45rem; margin:2.5rem 0; background:var(--card-hover); border-radius:10px; padding:.38rem; width:fit-content; flex-wrap:wrap; } .tab { padding:.55rem 1.5rem; border-radius:8px; font-size:.83rem; font-weight:500; border:none; cursor:pointer; transition:all .3s; background:transparent; color:var(--text-soft); font-family:'DM Sans',sans-serif; } .tab.active { background:var(--primary); color:#fff; box-shadow:0 4px 18px var(--primary-glow); } .spanel { display:none; } .spanel.on { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; } /* ── STATS ── */ .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:900px; margin:0 auto; text-align:center; } .stat-item { padding:2rem; } .stat-num { font-family:var(--headline-font); font-size:4.2rem; font-weight:900; line-height:1; letter-spacing:-1px; color:var(--text); } .stat-num span { color:var(--primary); } .stat-lbl { font-size:.72rem; color:var(--text-soft); letter-spacing:1.5px; text-transform:uppercase; margin-top:.5rem; } /* ── REVIEWS ── */ .reviews-scroll { display:flex; gap:1.4rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--primary) transparent; margin-top:3rem; } .reviews-scroll::-webkit-scrollbar { height:4px; } .reviews-scroll::-webkit-scrollbar-track { background:transparent; } .reviews-scroll::-webkit-scrollbar-thumb { background:var(--primary); border-radius:2px; } .rcard { min-width:290px; max-width:320px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:1.8rem; scroll-snap-align:start; flex-shrink:0; transition:transform .3s,border-color .3s,box-shadow .3s; } .rcard:hover { transform:translateY(-5px); border-color:var(--primary); box-shadow:0 16px 45px rgba(0,0,0,.1); } .rcard-stars { color:var(--primary); font-size:.9rem; letter-spacing:3px; margin-bottom:.8rem; } .rcard-div { display:inline-block; margin-bottom:.8rem; } .rcard p { font-size:.88rem; color:var(--text-soft); line-height:1.72; font-style:italic; margin-bottom:1.2rem; } .rcard-author { font-weight:500; font-size:.87rem; color:var(--text); } .rcard-role { font-size:.75rem; color:var(--text-soft); } /* ── ANIMATIONS ── */ @keyframes fl1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.07)} } @keyframes fl2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px) scale(1.1)} } @keyframes fl3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,-20px)} 66%{transform:translate(-15px,25px)} } @keyframes fup { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } @keyframes ping { 75%,100%{transform:scale(2);opacity:0} } @keyframes progress-pulse { 0%{width:15%} 50%{width:55%} 100%{width:15%} } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} } @keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} } @keyframes gridDrift { 0%{background-position:0 0} 100%{background-position:50px 50px} } /* ── RESPONSIVE ── */ @media(max-width:1024px) { .ftop { grid-template-columns:1fr 1fr; } .stats-grid { grid-template-columns:repeat(2,1fr); } .spanel.on { grid-template-columns:repeat(2,1fr); } .frow { grid-template-columns:1fr; } } @media(max-width:1100px) { nav ul { gap:1.2rem; } nav ul a { font-size:.82rem; } .nav-cta { padding:.42rem 1rem !important; font-size:.82rem !important; } } @media(max-width:900px) { nav ul { display:none; } .ham { display:flex; } } @media(max-width:768px) { section { padding:5rem 5vw; } } @media(max-width:480px) { .ftop { grid-template-columns:1fr; } .fbot { flex-direction:column; align-items:flex-start; } .spanel.on { grid-template-columns:1fr; } } /* ─── THEME: DARKBROWN (Dunkelbraun / Gold) ─── */ [data-theme="darkbrown"] { --bg: #0e0804; --bg-mid: #1a1008; --bg-card: #231508; --bg-deep: #070402; --primary: #c8860a; --primary-lt: #e09a14; --primary-glow:rgba(200,134,10,.32); --accent: #f0b840; --text: #f5ead8; --text-mid: #c4a87a; --text-soft: #8a7050; --border: rgba(200,134,10,.18); --card-bg: rgba(255,255,255,.03); --card-border: rgba(200,134,10,.14); --card-hover: rgba(200,134,10,.07); --input-bg: rgba(255,255,255,.05); --input-border:rgba(200,134,10,.22); --footer-bg: #070402; --footer-text: rgba(255,255,255,.3); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(14,8,4,.9); --nav-scrolled:rgba(7,4,2,.97); --orb-color: rgba(200,134,10,.25); --orb-color2: rgba(240,184,64,.12); --grid-color: rgba(200,134,10,.05); --ticker-bg: #7a4f00; --scroll-line: rgba(200,134,10,.65); --step-bg: rgba(200,134,10,.1); --step-border: rgba(200,134,10,.3); --step-color: #c8860a; --hero-bg-start:#0e0804; --hero-bg-end: #1a1008; --section-alt: #1a1008; --section-base:#0e0804; --soc-bg: rgba(255,255,255,.05); --soc-border: rgba(255,255,255,.1); --cursor-color:#c8860a; --cursor-ring: rgba(200,134,10,.5); } /* ─── THEME: LIGHTGREY (Hellgrau / Anthrazit) ─── */ [data-theme="lightgrey"] { --bg: #f2f4f7; --bg-mid: #e5e8ee; --bg-card: #ffffff; --bg-deep: #1e2530; --primary: #3d4f6b; --primary-lt: #526080; --primary-glow:rgba(61,79,107,.2); --accent: #2c3a52; --text: #1a2030; --text-mid: #3d4f6b; --text-soft: #6b7a92; --border: rgba(0,0,0,.09); --card-bg: #ffffff; --card-border: rgba(0,0,0,.08); --card-hover: rgba(61,79,107,.05); --input-bg: #f8f9fb; --input-border:rgba(0,0,0,.13); --footer-bg: #1e2530; --footer-text: rgba(255,255,255,.3); --headline-font:'Bebas Neue', sans-serif; --headline-style:normal; --nav-bg: rgba(242,244,247,.93); --nav-scrolled:rgba(242,244,247,.99); --orb-color: rgba(61,79,107,.12); --orb-color2: rgba(61,79,107,.06); --grid-color: rgba(61,79,107,.05); --ticker-bg: #3d4f6b; --scroll-line: rgba(61,79,107,.5); --step-bg: rgba(61,79,107,.08); --step-border: rgba(61,79,107,.25); --step-color: #3d4f6b; --hero-bg-start:#f2f4f7; --hero-bg-end: #e5e8ee; --section-alt: #e5e8ee; --section-base:#f2f4f7; --soc-bg: rgba(255,255,255,.08); --soc-border: rgba(255,255,255,.12); --cursor-color:#3d4f6b; --cursor-ring: rgba(61,79,107,.45); } /* ═══════════════════════════════════════════════════════ SHARED PAGE COMPONENTS (moved from inline styles) ═══════════════════════════════════════════════════════ */ /* ── Sections ── */ .s-alt { background:var(--section-alt); } .s-base { background:var(--section-base); } /* ── Hero (index) ── */ .hero { min-height:75vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:7rem 5vw 4.5rem; text-align:center; background:linear-gradient(160deg,var(--bg) 0%,var(--bg-mid) 100%); } /* Same thin line as page-hero::after */ .hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--primary-glow),var(--primary-lt),var(--primary-glow),transparent); opacity:.75; z-index:3; pointer-events:none; } .hero::before { content:''; position:absolute; inset:0; z-index:1; background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px); background-size:50px 50px; animation:gridDrift 30s linear infinite; opacity:.45; } .hero-bg-img { position:absolute; inset:0; z-index:0; background:url('../img/header.png') center 30%/cover no-repeat; opacity:.55; } .hero-bg-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.30) 100%); } .orb { position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; z-index:2; opacity:.55; } .orb1 { width:600px; height:600px; background:radial-gradient(circle,var(--orb-color),transparent 70%); top:-180px; right:-180px; animation:fl1 16s ease-in-out infinite; } .orb2 { width:400px; height:400px; background:radial-gradient(circle,var(--orb-color2),transparent 70%); bottom:-100px; left:-80px; animation:fl2 19s ease-in-out infinite; } .hero-inner { position:relative; z-index:3; max-width:900px; } .hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:var(--card-hover); border:1px solid var(--border); color:var(--accent); padding:.38rem 1.1rem; border-radius:50px; font-size:.72rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; margin-bottom:2rem; opacity:0; animation:fup .7s .15s ease forwards; } .bdot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:blink 2s ease-in-out infinite; } .hero h1 { font-family:var(--headline-font); font-size:clamp(4rem,9vw,8rem); font-weight:900; line-height:.95; letter-spacing:-2px; color:var(--text); margin-bottom:1.5rem; opacity:0; animation:fup .85s .25s ease forwards; } .hero h1 em { color:var(--primary); font-style:var(--headline-style); } .hero-sub { font-size:1.1rem; color:var(--text-soft); line-height:1.78; max-width:560px; margin:0 auto 2.8rem; font-weight:300; opacity:0; animation:fup .85s .4s ease forwards; } .hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.5rem; opacity:0; animation:fup .85s .52s ease forwards; } .scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--text-soft); font-size:.66rem; letter-spacing:2px; text-transform:uppercase; z-index:2; opacity:0; animation:fup .8s 1s ease forwards; } .scroll-hint::after { content:''; width:1px; height:38px; background:linear-gradient(to bottom,var(--scroll-line),transparent); animation:pulse 2s ease-in-out infinite; } /* ── Über-Section (index) ── */ .ueber-grid { display:grid; grid-template-columns:2fr 0.6fr; gap:3rem; align-items:center; margin-top:3rem; } .traits { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; } .person-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; max-width:200px; margin-left:auto; box-shadow:0 10px 30px rgba(0,0,0,.15),0 0 0 1px var(--primary-glow); transition:transform .4s,box-shadow .4s; } .person-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.2),0 0 0 1px var(--primary); } .person-img-wrap { position:relative; overflow:hidden; aspect-ratio:4/5; background:linear-gradient(135deg,var(--bg-mid),var(--bg-card)); } .img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--bg-mid),var(--bg-card)); font-size:5rem; transition:transform .5s; } .img-ph img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s,filter .5s; filter:saturate(.92) contrast(1.02); } .person-card:hover .img-ph img { transform:scale(1.04); filter:saturate(1) contrast(1.04); } .person-img-wrap::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(160deg,var(--primary-glow) 0%,transparent 45%,rgba(0,0,0,.18) 100%); mix-blend-mode:soft-light; } .person-img-wrap::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.25) 100%); } .person-overlay { position:absolute; inset:0; z-index:4; background:linear-gradient(to top,rgba(0,0,0,.88),transparent 60%); display:flex; align-items:flex-end; padding:.9rem 1rem; opacity:0; transition:opacity .4s; } .person-card:hover .person-overlay { opacity:1; } .person-overlay h3 { font-family:var(--headline-font); font-size:1rem; color:#fff; font-weight:700; } .person-overlay p { font-size:.65rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.5px; margin-top:.15rem; } .person-info { padding:1rem 1.2rem; } .person-info h3 { font-family:var(--headline-font); font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.15rem; overflow-wrap:break-word; word-break:break-word; hyphens:auto; } .person-role { font-size:.72rem; color:var(--primary); letter-spacing:.5px; text-transform:uppercase; overflow-wrap:break-word; word-break:break-word; hyphens:auto; line-height:1.4; } .person-desc { color:var(--text-soft); font-size:.82rem; line-height:1.65; margin-top:.5rem; font-weight:300; overflow-wrap:break-word; word-break:break-word; } /* ── Bereiche-Grid (index) ── */ .divisions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; margin-top:3rem; } .div-card { border-radius:22px; overflow:hidden; border:1.5px solid var(--card-border); background:var(--bg-card); transition:transform .35s,box-shadow .35s; box-shadow:0 2px 12px rgba(0,0,0,.12); } .div-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,.25); } .div-img { position:relative; aspect-ratio:16/9; overflow:hidden; } .div-img .ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:0; transition:transform .5s; position:relative; z-index:0; background-size:cover; background-position:center; background-repeat:no-repeat; } .div-card:hover .div-img .ph { transform:scale(1.07); } .div-img .ph::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; } .div-hover-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; opacity:0; transform:scale(.96); transition:opacity .35s,transform .35s; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .div-card:hover .div-hover-overlay { opacity:1; transform:scale(1); } /* "Im Aufbau" badge inside overlay for bald-bereiche */ .hov-aufbau { font-size:.65rem !important; font-weight:600 !important; letter-spacing:1.5px; text-transform:uppercase; color:#fff !important; background:rgba(0,0,0,.45) !important; border:1px solid rgba(255,255,255,.4) !important; padding:.22rem .72rem !important; border-radius:50px !important; } .hov-tag { font-size:.7rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.35); padding:.28rem .8rem; border-radius:50px; } .hov-btn { font-size:.82rem; font-weight:500; color:#fff; background:var(--primary); padding:.5rem 1.3rem; border-radius:6px; text-decoration:none; transition:background .2s; } .hov-btn:hover { background:var(--primary-lt); } .div-body { padding:1.4rem; overflow-wrap:break-word; word-break:break-word; hyphens:auto; } .div-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; } .div-name { font-family:var(--headline-font); font-size:1.3rem; font-weight:700; overflow-wrap:break-word; word-break:break-word; } .div-name .dn-brand { color:var(--text); } .div-desc { font-size:.87rem; color:var(--text-soft); line-height:1.72; margin-bottom:1.2rem; overflow-wrap:break-word; word-break:break-word; hyphens:auto; } .div-tags { display:flex; flex-wrap:wrap; gap:.4rem; } .div-tag { font-size:.71rem; color:var(--text-soft); background:var(--card-hover); border:1px solid var(--card-border); border-radius:50px; padding:.2rem .7rem; } /* Bereichs-Bildfarben */ .dc-clean .div-img .ph { background-color:#b0c8ff; background-image:url('../img/bereich_reinigung.png'); } .dc-clean .div-img .ph::after { background:linear-gradient(160deg,rgba(26,92,255,.35) 0%,rgba(0,0,0,.30) 100%); } .dc-clean .div-hover-overlay { background:rgba(26,92,255,.55); } .dc-clean .div-name { color:#1a5cff; } .dc-clean:hover { box-shadow:0 20px 60px rgba(26,92,255,.22); } .dc-facility .div-img .ph { background-color:#98e8d4; background-image:url('../img/bereich_facility.png'); } .dc-facility .div-img .ph::after { background:linear-gradient(160deg,rgba(0,184,148,.32) 0%,rgba(0,0,0,.30) 100%); } .dc-facility .div-hover-overlay { background:rgba(0,184,148,.55); } .dc-facility .div-name { color:#00b894; } .dc-facility:hover { box-shadow:0 20px 60px rgba(0,184,148,.20); } .dc-garden .div-img .ph { background-color:#6abf69; background-image:url('../img/bereich_gartenpflege.png'); } .dc-garden .div-img .ph::after { background:linear-gradient(160deg,rgba(46,204,113,.32) 0%,rgba(0,0,0,.30) 100%); } .dc-garden .div-hover-overlay { background:rgba(46,204,113,.55); } .dc-garden .div-name { color:#2ecc71; } .dc-garden:hover { box-shadow:0 20px 60px rgba(46,204,113,.18); } .dc-bau .div-img .ph { background-color:#f8c890; background-image:url('../img/bereich_bauwesen.png'); } .dc-bau .div-img .ph::after { background:linear-gradient(160deg,rgba(230,126,34,.32) 0%,rgba(0,0,0,.30) 100%); } .dc-bau .div-hover-overlay { background:rgba(230,126,34,.55); } .dc-bau .div-name { color:#e67e22; } .dc-bau:hover { box-shadow:0 20px 60px rgba(230,126,34,.18); } .dc-winterdienst .div-img .ph { background-color:#5b9ef5; background-image:url('../img/bereich_winterdienst.png'); } .dc-winterdienst .div-img .ph::after { background:linear-gradient(160deg,rgba(91,141,238,.35) 0%,rgba(0,0,0,.30) 100%); } .dc-winterdienst .div-hover-overlay { background:rgba(91,141,238,.55); } .dc-winterdienst .div-name { color:#5b8dee; } .dc-winterdienst:hover { box-shadow:0 20px 60px rgba(91,141,238,.22); } .dc-concierge .div-img .ph { background-color:#c084e8; background-image:url('../img/bereich_concierge.png'); } .dc-concierge .div-img .ph::after { background:linear-gradient(160deg,rgba(155,89,182,.35) 0%,rgba(0,0,0,.30) 100%); } .dc-concierge .div-hover-overlay { background:rgba(155,89,182,.55); } .dc-concierge .div-name { color:#9b59b6; } .dc-concierge:hover { box-shadow:0 20px 60px rgba(155,89,182,.20); } .dc-secure .div-img .ph { background-color:#d7b8f0; background-image:url('../img/bereich_secure.png'); } .dc-secure .div-img .ph::after { background:linear-gradient(160deg,rgba(142,68,173,.35) 0%,rgba(0,0,0,.30) 100%); } .dc-secure .div-hover-overlay { background:rgba(142,68,173,.55); } .dc-secure .div-name { color:#8e44ad; } .dc-secure:hover { box-shadow:0 20px 60px rgba(142,68,173,.20); } .dc-carclean .div-img .ph { background-color:#f5c0b8; background-image:url('../img/bereich_carclean.png'); } .dc-carclean .div-img .ph::after { background:linear-gradient(160deg,rgba(192,57,43,.35) 0%,rgba(0,0,0,.30) 100%); } .dc-carclean .div-hover-overlay { background:rgba(192,57,43,.55); } .dc-carclean .div-name { color:#c0392b; } .dc-carclean:hover { box-shadow:0 20px 60px rgba(192,57,43,.18); } /* Footer-Tags extra */ .fdt-sc { background:rgba(142,68,173,.18); color:#c39bd3; border:1px solid rgba(142,68,173,.25); } .fdt-cc { background:rgba(192,57,43,.15); color:#f1948a; border:1px solid rgba(192,57,43,.22); } .fdt-wd { background:rgba(91,141,238,.18); color:#9db8f5; border:1px solid rgba(91,141,238,.25); } .fdt-co { background:rgba(155,89,182,.18); color:#cc99e8; border:1px solid rgba(155,89,182,.25); } /* ── Steps (index) ── */ .steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin-top:3.5rem; } .steps::before { content:''; position:absolute; top:2.6rem; left:calc(12.5% + 26px); right:calc(12.5% + 26px); height:1.5px; background:linear-gradient(90deg,transparent,var(--border),transparent); } .step { padding:1.5rem; text-align:center; } .step-circ { width:52px; height:52px; border-radius:50%; background:var(--step-bg); border:1.5px solid var(--step-border); display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; font-family:var(--headline-font); font-size:1.5rem; font-weight:900; color:var(--step-color); transition:all .35s; } .step:hover .step-circ { background:var(--primary); color:#fff; box-shadow:0 8px 24px var(--primary-glow); transform:scale(1.1); border-color:var(--primary); } .step h3 { font-size:.9rem; font-weight:500; color:var(--text); margin-bottom:.5rem; } .step p { font-size:.8rem; color:var(--text-soft); line-height:1.65; } /* ── CTA (index) ── */ #cta { text-align:center; padding:6rem 5vw; } .cta-inner { max-width:600px; margin:0 auto; } #cta h2 { font-family:var(--headline-font); font-size:clamp(2.5rem,5vw,4rem); font-weight:900; color:var(--text); letter-spacing:-.5px; margin-bottom:1rem; } #cta h2 em { color:var(--primary); font-style:var(--headline-style); } #cta p { color:var(--text-soft); font-size:1rem; line-height:1.75; font-weight:300; margin-bottom:2.5rem; } /* ── Kontakt-Grid ── */ .kontakt-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:4rem; align-items:center; margin-top:3rem; } .k-items { display:flex; flex-direction:column; gap:.9rem; margin-top:1.5rem; } /* ══════════════════════════════════════════════════ NOTICE / ANGEBOTS-BANNER ══════════════════════════════════════════════════ */ .notice-bar { display:none; align-items:center; justify-content:center; gap:1rem; padding:.7rem 5vw; position:relative; font-size:.84rem; font-weight:400; flex-wrap:wrap; text-align:center; } .notice-bar.nb-angebot { background:linear-gradient(90deg,#7a4f00,#c8860a,#7a4f00); color:#fff5d6; } .notice-bar.nb-hinweis { background:linear-gradient(90deg,#0a2a6e,#1a5cff,#0a2a6e); color:#dde8ff; } .notice-bar.nb-aktion { background:linear-gradient(90deg,#0a3d1f,#2ecc71,#0a3d1f); color:#d4f5e2; } .notice-bar.nb-wichtig { background:linear-gradient(90deg,#6e0a0a,#e74c3c,#6e0a0a); color:#ffdede; } .notice-bar.visible { display:flex; } .notice-title { font-weight:700; letter-spacing:.3px; white-space:nowrap; } .notice-text { opacity:.92; line-height:1.4; } .notice-link { display:inline-flex; align-items:center; background:rgba(255,255,255,.22); color:inherit; padding:.28rem .9rem; border-radius:50px; text-decoration:none; font-weight:600; font-size:.8rem; border:1px solid rgba(255,255,255,.3); white-space:nowrap; transition:background .2s; } .notice-link:hover { background:rgba(255,255,255,.35); } .notice-close { position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:inherit; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; transition:background .2s; } .notice-close:hover { background:rgba(255,255,255,.3); } /* ══════════════════════════════════════════════════ BEREICHS-MULTI-PICKER (bpicker) ══════════════════════════════════════════════════ */ .bpicker { position:relative; } .bpicker-trigger { display:flex; align-items:center; justify-content:space-between; padding:.82rem 1rem; border:1.5px solid var(--input-border); border-radius:8px; background:var(--input-bg); color:var(--text); cursor:pointer; font-size:.92rem; font-family:'DM Sans',sans-serif; transition:border-color .2s,box-shadow .2s; user-select:none; min-height:48px; } .bpicker-trigger:hover,.bpicker.open .bpicker-trigger { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); } .bpicker-label { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--text-soft); } .bpicker-label.has-value { color:var(--text); } .bpicker-badge { background:var(--primary); color:#fff; font-size:.68rem; font-weight:700; padding:.18rem .55rem; border-radius:50px; margin-right:.5rem; display:none; } .bpicker-badge.visible { display:inline-block; } .bpicker-arrow { font-size:.72rem; color:var(--text-soft); transition:transform .25s; flex-shrink:0; } .bpicker.open .bpicker-arrow { transform:rotate(180deg); } .bpicker-panel { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--bg-mid); border:1.5px solid var(--border); border-radius:14px; z-index:400; box-shadow:0 16px 48px rgba(0,0,0,.35); overflow:hidden; } .bpicker.open .bpicker-panel { display:flex; flex-direction:column; } .bpicker-tiles { display:grid; grid-template-columns:1fr 1fr; gap:0; } .bp-tile { display:flex; align-items:center; gap:.65rem; padding:.72rem .9rem; cursor:pointer; border:none; background:transparent; border-bottom:1px solid var(--border); border-right:1px solid var(--border); transition:background .18s; text-align:left; font-family:'DM Sans',sans-serif; } .bp-tile:nth-child(even) { border-right:none; } .bp-tile:last-child:nth-child(odd) { grid-column:1/-1; border-right:none; } .bp-tile:hover,.bp-tile.selected { background:var(--card-hover); } .bp-tile-ico { width:32px; height:32px; min-width:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; border:1.5px solid transparent; transition:border-color .2s,background .2s; } .bp-tile.selected .bp-tile-ico { border-color:currentColor; } .bp-tile-info { flex:1; min-width:0; } .bp-tile-name { font-size:.82rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bp-tile-status { font-size:.68rem; color:var(--text-soft); margin-top:.06rem; } .bp-tile-check { width:18px; height:18px; min-width:18px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.65rem; color:#fff; transition:background .18s,border-color .18s; } .bp-tile.selected .bp-tile-check { background:var(--primary); border-color:var(--primary); } .bp-clean .bp-tile-ico { background:rgba(26,92,255,.1); color:#1a5cff; } .bp-facility .bp-tile-ico { background:rgba(0,184,148,.1); color:#00b894; } .bp-garden .bp-tile-ico { background:rgba(46,204,113,.1); color:#2ecc71; } .bp-bau .bp-tile-ico { background:rgba(230,126,34,.1); color:#e67e22; } .bp-secure .bp-tile-ico { background:rgba(142,68,173,.1); color:#8e44ad; } .bp-carclean .bp-tile-ico { background:rgba(192,57,43,.1); color:#c0392b; } .bp-clean.selected .bp-tile-name { color:#1a5cff; } .bp-facility.selected .bp-tile-name { color:#00b894; } .bp-garden.selected .bp-tile-name { color:#2ecc71; } .bp-bau.selected .bp-tile-name { color:#e67e22; } .bp-secure.selected .bp-tile-name { color:#8e44ad; } .bp-carclean.selected .bp-tile-name { color:#c0392b; } .bpicker-footer { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-top:1px solid var(--border); background:var(--bg-card); } .bpicker-count { font-size:.8rem; color:var(--text-soft); } .bpicker-count strong { color:var(--text); } .bpicker-confirm { background:var(--primary); color:#fff; border:none; border-radius:7px; padding:.48rem 1.2rem; font-size:.82rem; font-weight:500; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .2s,transform .2s; } .bpicker-confirm:hover { background:var(--primary-lt); transform:translateY(-1px); } .bpicker-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300; backdrop-filter:blur(2px); } .bpicker-backdrop.visible { display:block; } /* ══════════════════════════════════════════════════ RESPONSIVE – Vollständig ══════════════════════════════════════════════════ */ @media(max-width:1024px) { .ueber-grid { grid-template-columns:1fr; } .kontakt-grid { grid-template-columns:1fr; gap:3rem; } .divisions-grid { grid-template-columns:1fr 1fr; } .stats-grid { grid-template-columns:repeat(2,1fr); gap:1rem; } .steps { grid-template-columns:repeat(2,1fr); overflow:hidden; } .steps::before { display:none; } .frow { grid-template-columns:1fr 1fr; } .ueber-grid .person-card { max-width:220px; margin:0 auto; width:100%; } } @media(max-width:900px) { nav ul { display:none; } .ham { display:flex; } section { padding:4rem 5vw; } .hero { padding:7rem 5vw 4rem; } .hero h1 { font-size:clamp(3rem,12vw,5.5rem); letter-spacing:-1px; } .hero-sub { font-size:.95rem; } .hero-actions { flex-direction:column; align-items:center; gap:.75rem; } .hero-actions a { width:100%; max-width:320px; justify-content:center; } .ueber-grid { gap:2.5rem; } .traits { grid-template-columns:1fr 1fr; gap:.8rem; } .ueber-grid .person-card { max-width:200px; margin:0 auto; width:100%; } .stats-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; } .stat-num { font-size:3.2rem; } .divisions-grid { grid-template-columns:1fr; gap:1.2rem; } .div-body { padding:1.2rem; } .div-name { font-size:1.15rem; } .div-img { aspect-ratio:16/7; } .steps { grid-template-columns:1fr 1fr; gap:1rem; } .k-items { gap:.7rem; } .frow { grid-template-columns:1fr; } .bpicker-panel { position:fixed; bottom:0; left:0; right:0; top:auto; border-radius:18px 18px 0 0; border-bottom:none; box-shadow:0 -8px 40px rgba(0,0,0,.4); z-index:400; } .ftop { grid-template-columns:1fr 1fr; gap:2rem; } .fbot { flex-direction:column; align-items:flex-start; gap:.8rem; } } @media(max-width:480px) { .hero { padding:6rem 4vw 3.5rem; } .hero h1 { font-size:clamp(2.8rem,14vw,4.5rem); } .scroll-hint { display:none; } .traits { grid-template-columns:1fr; } .stats-grid { grid-template-columns:1fr 1fr; } .stat-item { padding:1.2rem .8rem; } .stat-num { font-size:2.8rem; } .stat-lbl { font-size:.65rem; } .div-img { aspect-ratio:16/8; } .div-body { padding:1.2rem; } .steps { grid-template-columns:1fr; } .cform { gap:.9rem; } .fsub { width:100%; justify-content:center; } .bpicker-tiles { grid-template-columns:1fr; } .bp-tile:last-child:nth-child(odd) { grid-column:auto; } .ftop { grid-template-columns:1fr; gap:2rem; } .fbot-links { flex-wrap:wrap; gap:1rem; } } /* ═══════════════════════════════════════════════════════ WIDGETS – Rückruf / Sofortanfrage / Terminbuchung Buttons in der Nav-Leiste, Panel öffnet nach unten ═══════════════════════════════════════════════════════ */ #widgetNavBar { display: flex; align-items: center; gap: .4rem; margin-left: .5rem; flex-shrink: 0; } .wl-btn { display: inline-flex; align-items: center; gap: .35rem; background: var(--card-hover); color: var(--text-soft); border: 1px solid var(--border); border-radius: 6px; padding: .38rem .85rem; font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; } .wl-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .wl-label { display: inline; } @media(max-width:1100px) { .wl-label { display:none; } } @media(max-width:900px) { #widgetNavBar { display:none; } } /* Widget links in mob-menu are added by JS */ /* ── Panels – öffnen unter der Nav ── */ #widgetPanels { position: fixed; top: 62px; right: 1.5rem; z-index: 460; width: 320px; max-width: calc(100vw - 3rem); } @media(max-width:768px) { #widgetPanels { top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; max-width: 100%; } .wpanel { border-radius: 14px; } } .wpanel { display: none; flex-direction: column; background: var(--bg-card); border: 1px solid var(--card-border); border-radius: 0 0 14px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.22); overflow: hidden; animation: wpSlideIn .25s ease; } .wpanel.open { display: flex; } @keyframes wpSlideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} } .wpanel-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; background: var(--primary); color: #fff; font-weight: 600; font-size: .9rem; } .wpanel-close { background: none; border: none; color: rgba(255,255,255,.75); cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; transition: color .2s; } .wpanel-close:hover { color: #fff; } .wpanel-sub { font-size: .8rem; color: var(--text-soft); padding: .7rem 1.2rem .2rem; } .wpanel-form { display: flex; flex-direction: column; gap: .65rem; padding: .6rem 1.2rem 1.2rem; } .wpanel-ff { display: flex; flex-direction: column; gap: .28rem; } .wpanel-ff label { font-size: .67rem; color: var(--text-soft); letter-spacing: .5px; text-transform: uppercase; } .wpanel-ff input, .wpanel-ff textarea { background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: 7px; padding: .55rem .8rem; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .86rem; outline: none; transition: border-color .2s; resize: none; } .wpanel-ff input:focus, .wpanel-ff textarea:focus { border-color: var(--primary); } .wpanel-ff input::placeholder, .wpanel-ff textarea::placeholder { color: var(--text-soft); opacity: .5; } .wpanel-submit { background: var(--primary); color: #fff; border: none; border-radius: 7px; padding: .65rem 1rem; font-family: 'DM Sans', sans-serif; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .2s; margin-top: .2rem; } .wpanel-submit:hover { background: var(--primary-lt); } /* ── Neue Bereichs-Pill-Farben ── */ .dp-winterdienst { background:rgba(91,141,238,.1); color:#5b8dee; border-color:rgba(91,141,238,.25); } .dp-concierge { background:rgba(155,89,182,.1); color:#9b59b6; border-color:rgba(155,89,182,.25); } @media(max-width:480px) { #widgetPanels { right: .5rem; width: calc(100vw - 1rem); } } /* Nav – landscape mobile: kompakter */ @media(max-width:900px) and (orientation:landscape) { nav { padding:.5rem 4vw; } .mob-menu { top:52px; } } /* ── SERVICEGEBIET ── */ .sg-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.1rem 1rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; transition: border-color .25s, transform .25s, box-shadow .25s; } .sg-tile:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); } .sg-plz { font-family: var(--headline-font); font-size: 1.1rem; font-weight: 700; color: var(--primary); letter-spacing: .5px; } .sg-ort { font-size: .78rem; color: var(--text-soft); line-height: 1.4; } .sg-tile-plus { border-style: dashed; opacity: .75; } .sg-tile-plus .sg-plz { font-size: 1.5rem; } /* ═══════════════════════════════════════════════════════ HERO SLIDESHOW – Ken Burns + Crossfade ═══════════════════════════════════════════════════════ */ /* ── Slideshow-Container (ersetzt hero-bg-img) ── */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* ── Einzelner Slide ── */ .hero-slide { position: absolute; inset: 0; opacity: 0; background-size: cover; background-repeat: no-repeat; will-change: transform, opacity; transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Dunkler Overlay auf jedem Slide */ .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.48) 100% ); } /* Aktiver Slide */ .hero-slide.hs-active { opacity: 1; } /* ── Ken Burns Varianten ── */ .hero-slide.hs-active.kb1 { animation: kb1 9s ease-in-out forwards; } .hero-slide.hs-active.kb2 { animation: kb2 9s ease-in-out forwards; } .hero-slide.hs-active.kb3 { animation: kb3 9s ease-in-out forwards; } .hero-slide.hs-active.kb4 { animation: kb4 9s ease-in-out forwards; } .hero-slide.hs-active.kb5 { animation: kb5 9s ease-in-out forwards; } .hero-slide.hs-active.kb6 { animation: kb6 9s ease-in-out forwards; } /* Auslaufender Slide behält seinen Zoom während er ausblendet */ .hero-slide.hs-leaving.kb1 { animation: kb1 9s ease-in-out forwards; animation-play-state: paused; } .hero-slide.hs-leaving.kb2 { animation: kb2 9s ease-in-out forwards; animation-play-state: paused; } .hero-slide.hs-leaving.kb3 { animation: kb3 9s ease-in-out forwards; animation-play-state: paused; } .hero-slide.hs-leaving.kb4 { animation: kb4 9s ease-in-out forwards; animation-play-state: paused; } .hero-slide.hs-leaving.kb5 { animation: kb5 9s ease-in-out forwards; animation-play-state: paused; } .hero-slide.hs-leaving.kb6 { animation: kb6 9s ease-in-out forwards; animation-play-state: paused; } @keyframes kb1 { 0%{transform:scale(1.0) translate(0%,0%)} 100%{transform:scale(1.10) translate(-1.5%,1%)} } @keyframes kb2 { 0%{transform:scale(1.10) translate(-2%,0%)} 100%{transform:scale(1.0) translate(0%,1.5%)} } @keyframes kb3 { 0%{transform:scale(1.05) translate(1%,-1%)} 100%{transform:scale(1.12) translate(-1%,0.5%)} } @keyframes kb4 { 0%{transform:scale(1.08) translate(0%,1.5%)} 100%{transform:scale(1.0) translate(-1%,-0.5%)} } @keyframes kb5 { 0%{transform:scale(1.0) translate(-1%,0%)} 100%{transform:scale(1.10) translate(1%,-1%)} } @keyframes kb6 { 0%{transform:scale(1.12) translate(1%,-1%)} 100%{transform:scale(1.0) translate(-0.5%,1%)} } /* ── Slide-Indikatoren (Punkte unten im Hero) ── */ .hero-dots { position: absolute; bottom: 6rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: .5rem; align-items: center; } .hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); border: 1.5px solid rgba(255,255,255,.5); cursor: pointer; transition: background .3s, transform .3s, width .3s; } .hero-dot.active { background: var(--primary); border-color: var(--primary); width: 20px; border-radius: 3px; } /* ── Fortschrittsbalken ── */ .hero-progress { position: absolute; bottom: 0; left: 0; height: 2.5px; background: var(--primary); z-index: 6; width: 0%; box-shadow: 0 0 8px var(--primary-glow); transition: none; } .hero-progress.running { transition: width linear; }