/* ================================================================ hero-styles.css - Hero-Slider + Buttons (Schritt 2) ================================================================ VERSION: 2 Liegt unter: /site/templates/styles/hero-styles.css Einbinden in _main.php im , NACH header-styles.css: ================================================================ */ /* ---------------- Buttons ---------------- Stehen hier, weil sie im Hero zuerst gebraucht werden. Werden spaeter auch von anderen Sections mitbenutzt. */ .btn{ display:inline-block; font-family:'Barlow',sans-serif; font-size:14px;font-weight:500; letter-spacing:.03em; padding:12px 24px;border-radius:2px; transition:all .35s var(--ease); cursor:pointer; } .btn-solid{background:var(--accent);color:var(--navy);} .btn-solid:hover{background:var(--accent-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-2);} .btn-dark{background:var(--navy);color:#fff;} .btn-dark:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:var(--shadow-2);} .btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff;} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);} .btn-ghost-dark{border:1px solid var(--navy);color:var(--navy);} .btn-ghost-dark:hover{background:var(--navy);color:#fff;transform:translateY(-2px);} /* ---------------- Typografie-Helfer ---------------- .script und h1-h4-Reset stehen jetzt GLOBAL in header-styles.css - sie werden auf fast jeder Seite gebraucht (Termine, Galerie, Speisekarte, Pauschalfeiern ...), nicht nur auf der Startseite. Seit dem bedingten Laden der Stylesheets waere die geschwungene Schrift hier sonst ueberall weg, wo hero-styles.css nicht mitgeladen wird. ---------------------------------------------------- */ /* ================= HERO SLIDER ================= */ .hero{ position:relative; height:76vh;min-height:500px; overflow:hidden; background:var(--navy); } .slide{ position:absolute;inset:0; opacity:0; transition:opacity 1.1s var(--ease); } .slide.active{opacity:1;} .slide img{ width:100%;height:100%; object-fit:cover; transform:scale(1.08); transition:transform 7.5s linear; } .slide.active img{transform:scale(1);} /* ---------------- Textbox ---------------- */ .hero-textbox{ position:absolute;z-index:5; left:40px;right:40px;bottom:64px; max-width:480px; background:var(--navy-deep);color:#fff; padding:36px 40px 40px; box-shadow:0 20px 46px rgba(0,0,0,.35); opacity:0;transform:translateY(56px); pointer-events:none; transition:opacity .9s var(--ease),transform .9s var(--ease); } .slide.active .hero-textbox{ opacity:1;transform:translateY(0);pointer-events:auto; } .hero-textbox .script{ font-size:30px; color:var(--accent); display:inline-block; } .hero-textbox h1{ font-family:'Oswald',sans-serif; font-weight:600;text-transform:uppercase; font-size:clamp(30px,4vw,44px); line-height:1.06;letter-spacing:.01em; margin:8px 0 16px; } .hero-textbox p{ font-weight:300;font-size:16px; color:#D5D8DF;line-height:1.6;margin:0; } .hero-cta{ margin-top:24px; display:flex;gap:14px;flex-wrap:wrap; } /* ---------------- Navigation / Zaehler ---------------- */ .hero-nav{ position:absolute;right:40px;bottom:36px;z-index:6; display:flex;align-items:center;gap:16px;color:#fff; } .hero-count{font-size:14px;letter-spacing:.04em;color:#C6CAD4;} .hero-count b{color:var(--accent);font-weight:600;} .hero-arrow{ width:42px;height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer;color:#fff; font-size:17px; background:rgba(41,46,58,.35); transition:all .3s var(--ease); } .hero-arrow:hover{ background:var(--accent);color:var(--navy);border-color:var(--accent); } .hero-progress{ position:absolute;bottom:0;left:0; height:2px;background:var(--accent); z-index:7;width:0; } /* ================= RESPONSIVE ================= */ @media(max-width:980px){ .hero{height:300px;min-height:300px;} .hero-textbox{display:none;} } @media(max-width:640px){ .hero-nav{display:none;} }