/* ========================================================================== SPORT 2000 Knitel Warth - Premium Design System Typografie: SPORT 2000 Bold (Display) + Inter (Text) Motion: expo-out Easing, nur transform/opacity, GPU-freundlich ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- */ @font-face{font-family:S2K;src:url(../fonts/sport2000-bold.woff2) format("woff2"),url(../fonts/sport2000-bold.woff) format("woff");font-weight:700;font-display:swap} @font-face{font-family:S2K;src:url(../fonts/sport2000-regular.woff2) format("woff2"),url(../fonts/sport2000-regular.woff) format("woff");font-weight:400;font-display:swap} @font-face{font-family:Inter;src:url(../fonts/inter-regular.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Inter;src:url(../fonts/inter-medium.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Inter;src:url(../fonts/inter-bold.woff2) format("woff2");font-weight:700;font-display:swap} /* --- Tokens --------------------------------------------------------------- */ :root{ --red:#c41230; --red-lit:#e4173a; /* Alpine-warme Grundtöne statt neutralem Schwarz/Weiß: jeder Ton bekommt einen deutlichen Gelb-/Braunstich (R weit über B statt umgekehrt) — dieselbe Helligkeit wie zuvor, nur die Farbtemperatur wandert von "kühl/clean" Richtung Holz/Hütte. Der Kontrast warme Innenwelt vs. kühle Piste (Schnee-Fotos bleiben natürlich kühl) ist das eigentliche Alpine-Gefühl. Rot bleibt unverändert, das ist CI-Farbe. --gold ist KEIN zweiter Akzent (siehe CLAUDE.md, "Rot ist die einzige Akzentfarbe") — nur Deko-Wärme in Verläufen/Glanzlichtern, nie auf Buttons/Links/CTAs. */ --ink:#0f0b08; --ink-2:#1c150d; --ink-3:#261c10; --paper:#f8f1e4; --paper-2:#f1e6d2; --paper-3:#e3d2b0; --grey:#9c8b6e; --grey-d:#6b5a41; --line:rgba(255,230,190,.16); --line-d:rgba(60,35,5,.1); --gold:#b8874f; --display:S2K,"Arial Narrow",sans-serif; --text:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --pad:clamp(20px,5vw,72px); --max:1440px; --nav-h:72px; } /* --- Reset ---------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* [hidden] muss immer gewinnen — sonst schlaegt jede eigene display:flex/grid- Regel (gleiche Spezifitaet, aber nach dem UA-Stylesheet geladen) das Attribut, und ein "verstecktes" Element bleibt sichtbar und faengt sogar Klicks ab. Ist schon dreimal in diesem Projekt passiert (News-Fenster, Dashboard) — darum hier ein fuer alle Mal global erzwungen. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--text);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,picture,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4,p,figure,ul,table{margin:0} ul{list-style:none;padding:0} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--red-lit);outline-offset:3px} /* --- Layout --------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .wrap-narrow{max-width:960px} section{position:relative} /* Warmer Glanzschein statt flacher Fläche — wie fernes Kaminlicht, das von den Ecken hereinzieht. Rein dekorativ (siehe --gold-Hinweis oben), läuft auf jeder .dark-Sektion site-weit mit. */ .dark{ background: radial-gradient(1200px 760px at 6% -12%,rgba(184,135,79,.09),transparent 55%), radial-gradient(900px 640px at 100% 112%,rgba(184,135,79,.06),transparent 55%), var(--ink); color:#fff; } .soft{background:var(--paper-2)} .pt{padding-top:clamp(80px,12vw,180px)} .pb{padding-bottom:clamp(80px,12vw,180px)} .pt-s{padding-top:clamp(48px,6vw,90px)} .pb-s{padding-bottom:clamp(48px,6vw,90px)} /* --- Typografie ----------------------------------------------------------- */ .display{ font-family:var(--display);font-weight:700; text-transform:uppercase;line-height:.86;letter-spacing:-.01em; margin:0; } .d1{font-size:clamp(3.2rem,11.5vw,11rem)} .d2{font-size:clamp(2.6rem,7.5vw,6.4rem)} .d3{font-size:clamp(2rem,4.6vw,4rem)} .d4{font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:.95} .eyebrow{ font-family:var(--text);font-weight:700; font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--red);display:flex;align-items:center;gap:.75em; } .eyebrow::before{content:"";width:28px;height:2px;background:currentColor;display:block;flex:0 0 auto} .dark .eyebrow{color:var(--red-lit)} .lead{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;color:var(--grey-d);max-width:56ch} .dark .lead{color:#b6b6bd} .body{font-size:1.0625rem;line-height:1.7;color:var(--grey-d);max-width:62ch} .dark .body{color:#b8a781} .small{font-size:.875rem;color:var(--grey);line-height:1.6} .mt-1{margin-top:.8em}.mt-2{margin-top:1.6em}.mt-3{margin-top:2.6em}.mt-4{margin-top:4em} /* --- Buttons -------------------------------------------------------------- */ .btn{ --bg:var(--red);--fg:#fff; position:relative;display:inline-flex;align-items:center;gap:.7em; padding:1.05em 2.1em;border-radius:100px; background:var(--bg);color:var(--fg); font-weight:700;font-size:.95rem; overflow:hidden;isolation:isolate; transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease); will-change:transform; } .btn::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--red-lit);transform:scaleX(0);transform-origin:left; transition:transform .6s var(--ease); } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(196,18,48,.7)} .btn:hover::before{transform:scaleX(1)} .btn .arw{transition:transform .5s var(--ease)} .btn:hover .arw{transform:translateX(5px)} .btn-ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)} .dark .btn-ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)} .btn-ghost::before{background:var(--ink)} .dark .btn-ghost::before{background:#fff} .btn-ghost:hover{--fg:#fff;box-shadow:inset 0 0 0 1.5px transparent} .dark .btn-ghost:hover{--fg:var(--ink)} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .tlink{ display:inline-flex;align-items:center;gap:.55em;position:relative; font-weight:700;font-size:.95rem;padding-bottom:.35em; } .tlink::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:2px; background:var(--red);transform:scaleX(0);transform-origin:right; transition:transform .6s var(--ease); } .tlink:hover::after{transform:scaleX(1);transform-origin:left} .tlink .arw{transition:transform .5s var(--ease)} .tlink:hover .arw{transform:translateX(5px)} /* --- Navigation ----------------------------------------------------------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h); display:flex;align-items:center; transition:transform .6s var(--ease); will-change:transform; } .nav::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(15,11,8,.7);backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border-bottom:1px solid var(--line); opacity:0;transition:opacity .5s var(--ease); } .nav.solid::before{opacity:1} .nav.up{transform:translateY(-104%)} /* --- PWA-Installationshinweis, oben (assets/js/pwa.js) -------------------- */ .pwa-banner{ position:fixed;top:0;left:0;right:0;z-index:101; display:flex;align-items:center;gap:12px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; background:rgba(15,11,8,.94);backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line); transform:translateY(-100%);transition:transform .5s var(--ease); } .pwa-banner.in{transform:translateY(0)} .pwa-banner img{width:38px;height:38px;border-radius:10px;flex:0 0 auto} .pwa-banner .txt{flex:1 1 auto;min-width:0} .pwa-banner .txt b{display:block;font-size:.86rem;color:#fff} .pwa-banner .txt span{display:block;font-size:.76rem;color:#9c9ca3;margin-top:1px} .pwa-banner button.install{ flex:0 0 auto;padding:.55em 1.1em;border-radius:999px;background:var(--red); color:#fff;font-size:.82rem;font-weight:600;white-space:nowrap; } .pwa-banner button.install:hover{background:var(--red-lit)} .pwa-banner button.close{ flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center; color:#9c8b6e; } .pwa-banner button.close svg{width:16px;height:16px} .pwa-banner button.close:hover{color:#fff} @media (prefers-reduced-motion:reduce){.pwa-banner{transition:none}} @media (min-width:761px){.pwa-banner{display:none!important}} /* --- Cookie-Hinweis, unten (assets/js/cookiebanner.js) --------------------- */ .cookie-banner{ position:fixed;left:0;right:0;bottom:0;z-index:160; display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px; padding:16px 20px calc(env(safe-area-inset-bottom) + 16px); background:rgba(15,11,8,.94);backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-top:1px solid var(--line); transform:translateY(100%);transition:transform .5s var(--ease); } .cookie-banner.in{transform:translateY(0)} .cookie-banner p{flex:1 1 320px;font-size:.86rem;line-height:1.6;color:#c4c4ca} .cookie-banner .aktionen{display:flex;align-items:center;gap:16px;flex:0 0 auto} .cookie-banner .mehr{font-size:.82rem;color:#9c9ca3;text-decoration:underline;text-underline-offset:.2em;transition:color .3s var(--ease)} .cookie-banner .mehr:hover{color:#fff} .cookie-banner .ok{ flex:0 0 auto;padding:.6em 1.4em;border-radius:999px;background:var(--red); color:#fff;font-size:.84rem;font-weight:600;white-space:nowrap;border:1px solid var(--red); } .cookie-banner .ok:hover{background:var(--red-lit);border-color:var(--red-lit)} .cookie-banner .ablehnen{ flex:0 0 auto;padding:.6em 1.4em;border-radius:999px;background:transparent; color:#c4c4ca;font-size:.84rem;font-weight:600;white-space:nowrap; border:1px solid var(--line);transition:border-color .3s var(--ease),color .3s var(--ease); } .cookie-banner .ablehnen:hover{border-color:#fff;color:#fff} @media (prefers-reduced-motion:reduce){.cookie-banner{transition:none}} .nav-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad); display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:12px;color:#fff} .brand img{width:34px;height:34px} .brand span{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.02em; text-transform:uppercase;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)} .nav-links a{ position:relative;color:#fff;font-weight:500;font-size:.92rem;padding:.4em 0;opacity:.82; transition:opacity .4s var(--ease); } .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--red-lit); transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease); } .nav-links a:hover{opacity:1} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} .nav-links a.on{opacity:1} .nav-links a.on::after{transform:scaleX(1)} .nav-cta{padding:.72em 1.4em;font-size:.85rem} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#fff} .burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative; transition:background .3s} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px; background:currentColor;transition:transform .5s var(--ease)} .burger span::before{top:-7px} .burger span::after{top:7px} .nav.open .burger span{background:transparent} .nav.open .burger span::before{transform:translateY(7px) rotate(45deg)} .nav.open .burger span::after{transform:translateY(-7px) rotate(-45deg)} .drawer{ position:fixed;inset:0;z-index:99;background:var(--ink); display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; padding:calc(var(--nav-h) + 18px) var(--pad) 28px; clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease); pointer-events:none; } .drawer.open{clip-path:inset(0 0 0 0);pointer-events:auto} /* Ambientes Glimmen, langsam wandernd — reiner Hintergrundschmuck, daher aria-hidden und ausserhalb des Tab-Flusses. */ .drawer::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(560px 420px at 12% -8%, rgba(196,18,48,.16), transparent 60%), radial-gradient(480px 380px at 108% 32%, rgba(196,18,48,.1), transparent 65%); opacity:0;transition:opacity 1.1s var(--ease) .2s; } .drawer.open::before{opacity:1;animation:drawer-drift 16s var(--ease-io) infinite alternate} @keyframes drawer-drift{to{transform:translateY(3%) scale(1.06)}} .drawer-search{ display:flex;align-items:center;gap:.7em;width:100%; padding:.85em 1.1em;border-radius:999px;border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);color:#9a9aa3;font-size:.92rem; opacity:0;transform:translateY(20px); transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .35s var(--ease),background .35s var(--ease); } .drawer.open .drawer-search{opacity:1;transform:none;margin-top:0} .drawer-search:hover,.drawer-search:focus-visible{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07);color:#fff;outline:none} .drawer-search svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2} .drawer-search kbd{ margin-left:auto;font-family:var(--text);font-size:.72rem;color:#6f6f78; border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:.15em .5em; } .drawer-nav{display:flex;flex-direction:column;margin-top:22px} .d-row{ position:relative;display:flex;align-items:baseline;gap:.5em; border-top:1px solid rgba(255,255,255,.08); opacity:0;transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease); } .d-row:last-child{border-bottom:1px solid rgba(255,255,255,.08)} .drawer.open .d-row{opacity:1;transform:none} .d-num{ flex:0 0 auto;padding-top:.62em;font-family:var(--text);font-size:.7rem; font-weight:600;letter-spacing:.08em;color:var(--red-lit); font-variant-numeric:tabular-nums; } .d-row>a{ display:flex;align-items:center;flex:1 1 auto;gap:.5em;padding:.55em 0; font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.5rem,7.2vw,2.1rem);line-height:1.1;color:#fff; transition:color .3s var(--ease); } .d-row>a:hover{color:var(--red-lit)} .d-row.on>a{color:var(--red-lit)} .d-chevbtn{ flex:0 0 auto;width:40px;height:40px;margin-left:-6px; display:flex;align-items:center;justify-content:center; background:none;border:none;color:#9c8b6e; transition:color .3s var(--ease); } .d-chevbtn:hover,.d-chevbtn:focus-visible{color:#fff;outline:none} .d-chevbtn .chev{width:16px;height:16px;transition:transform .5s var(--ease)} .d-chevbtn[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--red-lit)} .d-chevbtn[aria-expanded="true"]{color:var(--red-lit)} .d-group{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)} .d-group.expanded{grid-template-rows:1fr} .d-group>.subnav{min-height:0;overflow:hidden} .d-group .subnav a{ display:block;padding:.5em 0 .5em 1.9em;font-family:var(--text);font-weight:500; font-size:1rem;color:#9a9aa2;opacity:0;transform:translateX(-10px); transition:color .3s var(--ease),opacity .45s var(--ease),transform .45s var(--ease); } .d-group.expanded .subnav a{opacity:1;transform:none} .d-group .subnav a:hover{color:#fff} .d-group.expanded .subnav a:nth-child(1){transition-delay:.06s} .d-group.expanded .subnav a:nth-child(2){transition-delay:.11s} .d-group.expanded .subnav a:nth-child(3){transition-delay:.16s} .d-group.expanded .subnav a:nth-child(4){transition-delay:.21s} .d-group.expanded .subnav a:nth-child(5){transition-delay:.26s} .drawer .meta{margin-top:2.4em;color:#9c8b6e;font-size:.9rem} /* --- Hero ----------------------------------------------------------------- */ .hero{height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:#fff} .hero-media{position:absolute;inset:0;overflow:hidden} /* --pos steuert den Bildausschnitt: im Hochformat wird seitlich stark beschnitten, das Motiv soll dabei im Bild bleiben. */ .hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%); transform:scale(1.14);will-change:transform} .hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(15,11,8,.62) 0%,rgba(15,11,8,.2) 30%,rgba(15,11,8,.3) 52%,rgba(15,11,8,.92) 100%), linear-gradient(90deg,rgba(15,11,8,.5) 0%,rgba(15,11,8,0) 62%); } .hero-in{ position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end; padding-bottom:clamp(76px,13vh,148px); } .hero h1{color:#fff;text-shadow:0 2px 60px rgba(15,11,8,.45)} /* padding/margin gleichen aus, dass line-height < 1 die Ober- und Unterlaengen sonst an der overflow-Maske abschneidet */ .line{display:block;overflow:hidden;padding-block:.1em;margin-block:-.1em} .line i{display:block;font-style:normal;transform:translateY(115%);transition:transform 1.25s var(--ease)} .in .line i,.hero.in .line i{transform:none} .line:nth-child(2) i{transition-delay:.09s} .line:nth-child(3) i{transition-delay:.18s} .hero-foot{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px; margin-top:clamp(24px,4vh,44px); opacity:0;transform:translateY(24px); transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s; } .hero.in .hero-foot{opacity:1;transform:none} .hero-foot .lead{color:rgba(255,255,255,.88);max-width:38ch} /* --- Google-Bewertungs-Badge (hotel.html, index.html) ---------------------- */ .gbewertung{ display:inline-flex;align-items:center;gap:10px; padding:.5em 1em .5em .65em;border-radius:999px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); color:#fff;font-size:.84rem;margin-top:20px; transition:background .3s var(--ease),border-color .3s var(--ease); } .gbewertung:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32)} .gbewertung svg{width:19px;height:19px;flex:0 0 auto} .gbewertung b{font-weight:700} .gbewertung .sterne{color:var(--red-lit);font-weight:700;margin-left:.4em} .gbewertung .pfeil{margin-left:.35em;opacity:.65} .scroll-cue{ position:absolute;left:50%;bottom:24px;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:10px; font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55); opacity:0;transition:opacity 1s var(--ease) .9s; } .hero.in .scroll-cue{opacity:1} .scroll-cue b{display:block;width:1px;height:42px; background:linear-gradient(rgba(255,255,255,.75),transparent); animation:cue 2.4s var(--ease-io) infinite} @keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* --- Schneefall im Hero-Bild (Klasse .hero-snow auf .hero/.phero, opt-in, erzeugt von app.js) -------------------------------------------------- */ .hs-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2} .hs-layer i{ position:absolute;top:-8%;left:var(--x);width:var(--size);height:var(--size); border-radius:50%;background:rgba(255,255,255,var(--op)); animation:hs-fall var(--dur) linear infinite;animation-delay:var(--delay); will-change:transform; } @keyframes hs-fall{ 0%{transform:translate3d(0,0,0);opacity:0} 6%{opacity:1} 92%{opacity:1} 100%{transform:translate3d(var(--drift),115vh,0);opacity:0} } @media (max-width:640px){.hs-layer i:nth-child(n+20){display:none}} /* Breite, aber flache Fenster (Laptop-Bildschirm, verkleinertes Browserfenster). Die Titelgroesse haengt an der Fensterbreite (11.5vw). Ist das Fenster gleichzeitig niedrig, wird der Textblock hoeher als der Hero — .hero-in richtet nach unten aus, der Ueberhang laeuft also nach OBEN aus dem Kasten: die Ueberschrift schiebt sich unter die Kopfleiste, die Zeile darueber rutscht ganz aus dem Bild. Deshalb ist die Groesse hier zusaetzlich an die Fensterhoehe gekoppelt. Nur ab 761px Breite noetig — schmale Geraete sind wegen des kleinen vw-Werts nie betroffen. */ @media (min-width:761px) and (max-height:860px){ .hero .d1{font-size:clamp(3.2rem,min(11.5vw,19vh),11rem)} .hero-in{padding-bottom:clamp(56px,9vh,148px)} } @media (min-width:761px) and (max-height:700px){ .hero .d1{font-size:clamp(2.4rem,min(11.5vw,15vh),11rem)} .hero-in{padding-bottom:clamp(40px,6vh,148px)} .hero-foot{margin-top:clamp(14px,2vh,44px)} } /* Dasselbe fuer die Unterseiten-Heros. Die sind wegen der kleineren Schrift deutlich unempfindlicher und kippen erst unter ~470px Fensterhoehe — dann aber genauso: die Brotkrume rutscht unter die Kopfleiste. Bei 620px liegt der Wert noch fast auf dem bisherigen (99px statt 102px), der Uebergang faellt also nicht auf. */ @media (min-width:761px) and (max-height:620px){ .phero .d2{font-size:clamp(2rem,min(7.5vw,16vh),6.4rem)} .phero .wrap{padding-bottom:clamp(28px,5vh,84px)} } /* --- Haeufige Fragen (Akkordeon) -------------------------------------- */ .faq{display:flex;flex-direction:column} .faq-item{border-top:1px solid var(--line)} .faq-item:last-child{border-bottom:1px solid var(--line)} .faq-q{ display:flex;align-items:center;justify-content:space-between;gap:1.2em; width:100%;padding:1.15em 0;text-align:left; font-family:var(--text);font-weight:600;font-size:1.02rem;color:var(--ink); } .dark .faq-q{color:#fff} .faq-q .chev{width:11px;height:11px;flex:0 0 auto;color:var(--grey);transition:transform .45s var(--ease)} .faq-q[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--red)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)} .faq-a.expanded{grid-template-rows:1fr} .faq-a>div{min-height:0;overflow:hidden} .faq-a p{padding-bottom:1.3em;color:var(--grey-d);line-height:1.65;max-width:60ch} .dark .faq-a p{color:#b8a781} /* --- Reveal --------------------------------------------------------------- */ [data-reveal]{opacity:0;transform:translateY(34px); transition:opacity 1s var(--ease),transform 1s var(--ease)} [data-reveal].in{opacity:1;transform:none} [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease)} [data-reveal="clip"].in{clip-path:inset(0 0 0 0)} [data-reveal="scale"]{opacity:0;transform:scale(1.05); transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)} [data-reveal="scale"].in{opacity:1;transform:none} /* Kraeftiger Auftritt fuer grosse Kennzahlen: waechst leicht aus dem Unscharfen heraus, statt nur aufzusteigen — mehr Wucht fuer wenige, grosse Zahlen (vgl. die Statistik-Kacheln auf der Startseite). */ [data-reveal="pop"]{opacity:0;transform:scale(.82) translateY(18px);filter:blur(6px); transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)} [data-reveal="pop"].in{opacity:1;transform:none;filter:blur(0)} /* Wort-fuer-Wort aufhellender Text */ .statement{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.7rem,4.3vw,3.5rem);line-height:1.12;letter-spacing:-.005em} .statement w{display:inline-block;color:var(--paper-3);transition:color .45s linear} .dark .statement w{color:#2b2b30} .statement w.on{color:var(--ink)} .dark .statement w.on{color:#fff} .statement w.hl.on{color:var(--red)} .dark .statement w.hl.on{color:var(--red-lit)} /* --- Stats ---------------------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)} .stat{padding-top:26px;border-top:1px solid var(--line)} .stat .n{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.2vw,4.4rem); line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat .n u{text-decoration:none;color:var(--red-lit);font-size:.4em;vertical-align:.4em;margin-left:.12em} .stat .l{margin-top:.8em;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#9c8b6e} /* --- Sticky-Stage --------------------------------------------------------- */ .stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:start} .stage-media{position:sticky;top:calc(var(--nav-h) + 4vh);height:min(74vh,740px); border-radius:20px;overflow:hidden;background:var(--ink-2)} .stage-media figure{position:absolute;inset:0;margin:0;opacity:0; transition:opacity 1s var(--ease),transform 1.6s var(--ease);transform:scale(1.04)} .stage-media figure.on{opacity:1;transform:none} .stage-media img{width:100%;height:100%;object-fit:cover} .stage-steps{display:flex;flex-direction:column;gap:clamp(60px,14vh,150px);padding:11vh 0} .step{opacity:.26;transition:opacity .7s var(--ease);cursor:pointer} .step.on{opacity:1} .step .idx{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--red-lit); letter-spacing:.12em} .step h3{margin:.55em 0 .6em;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:.98} /* --- Split ---------------------------------------------------------------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center} .split.flip .split-media{order:2} .split-media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)} .split-media img{width:100%;height:118%;object-fit:cover;will-change:transform} .split-copy>*+*{margin-top:1.5em} /* --- Full-bleed ----------------------------------------------------------- */ .bleed{height:min(88vh,880px);min-height:480px;overflow:hidden;display:grid;place-items:center; text-align:center;color:#fff} .bleed-media{position:absolute;inset:0;overflow:hidden} /* top:-13% statt zentrierendem transform: der Bild-Parallax in app.js setzt sein eigenes translate3d direkt auf style.transform und wuerde eine CSS-Zentrierung darueber sonst ersetzen. Ohne top-Versatz haengt das um 26% ueberstehende Bild nur unten ueber, oben gar nicht — jeder Parallax- Schub nach unten legt dann den Seitenhintergrund am oberen Rand frei. */ .bleed-media img{position:absolute;top:-13%;left:0;width:100%;height:126%;object-fit:cover;will-change:transform} .bleed-media::after{content:"";position:absolute;inset:0;background:rgba(15,11,8,.44)} .bleed .wrap{position:relative} .bleed .eyebrow{justify-content:center;color:#fff} .bleed .lead{margin-inline:auto;color:rgba(255,255,255,.85)} /* --- Horizontale Galerie -------------------------------------------------- */ .hrail-outer{height:260vh} .hrail{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden} .hrail-track{display:flex;gap:clamp(14px,2vw,26px);padding-inline:var(--pad);will-change:transform} .hcard{position:relative;flex:0 0 auto;width:clamp(255px,29vw,420px);aspect-ratio:3/4; border-radius:18px;overflow:hidden;background:var(--ink-2)} .hcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .hcard:hover img{transform:scale(1.05)} .hcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;color:#fff; background:linear-gradient(transparent,rgba(15,11,8,.88)); font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.28rem;line-height:1} .hcard .sub{display:block;font-family:var(--text);font-weight:400;text-transform:none; font-size:.85rem;color:#c2c2c9;margin-top:.6em;line-height:1.5} /* --- Karten --------------------------------------------------------------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.6vw,20px)} .card{ position:relative;padding:clamp(26px,2.6vw,36px);border-radius:18px; background:var(--ink-2);border:1px solid var(--line);overflow:hidden; transition:transform .7s var(--ease),border-color .5s var(--ease),background .5s var(--ease); } .card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26);background:var(--ink-3)} .card .tier{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.4rem;line-height:1} .card .stars{color:var(--red-lit);font-size:.8rem;letter-spacing:.2em;margin-top:.6em} .card .price{margin-top:1.4em;font-family:var(--display);font-weight:700;font-size:2.8rem;line-height:.9; font-variant-numeric:tabular-nums} .card .price s{text-decoration:none;font-size:.4em;vertical-align:.55em;color:var(--grey);margin-right:.14em} .card .per{font-size:.78rem;color:var(--grey);letter-spacing:.1em;text-transform:uppercase;margin-top:.75em} .card ul{margin-top:1.5em;padding-top:1.3em;border-top:1px solid var(--line)} .card li{font-size:.92rem;color:#b8a781;padding:.42em 0 .42em 1.35em;position:relative} .card li::before{content:"";position:absolute;left:0;top:1.02em;width:7px;height:1.5px;background:var(--red-lit)} .card.hi{background:linear-gradient(165deg,#2a0a13,#1c150d 62%);border-color:rgba(196,18,48,.42)} .card .flag{position:absolute;top:18px;right:18px;font-size:.64rem;letter-spacing:.16em; text-transform:uppercase;color:#fff;background:var(--red);padding:.42em .8em;border-radius:99px} /* --- Oeffnungszeiten / Kontakt -------------------------------------------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)} .hours{border-top:1px solid var(--line)} .hours li{display:flex;justify-content:space-between;gap:20px;padding:.95em 0; border-bottom:1px solid var(--line);font-size:.98rem} .hours .d{color:#c9c9d0;display:flex;align-items:center} .hours .t{text-align:right;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap} .hours li.now .d::after{content:"heute";margin-left:.8em;font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--red-lit);border:1px solid rgba(228,23,58,.45); border-radius:99px;padding:.25em .65em} .seg,.pricetoggle{display:inline-flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.07);margin-bottom:26px} .seg button,.pricetoggle button{padding:.6em 1.6em;border-radius:99px;font-size:.85rem;font-weight:500;color:#b8a781; cursor:pointer;transition:color .4s var(--ease),background .4s var(--ease)} .seg button.on,.pricetoggle button.on{background:#fff;color:var(--ink);font-weight:700} .contact-line{display:flex;align-items:baseline;justify-content:space-between;gap:24px; padding:1.15em 0;border-bottom:1px solid var(--line)} .contact-line .k{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#9c8b6e; white-space:nowrap} .contact-line .v{font-size:1.05rem;text-align:right} .contact-line a.v{transition:color .35s var(--ease)} .contact-line a.v:hover{color:var(--red-lit)} /* --- Marquee -------------------------------------------------------------- */ .marquee{overflow:hidden;border-block:1px solid var(--line);padding:24px 0;display:flex} .marquee-in{display:flex;align-items:center;gap:52px;padding-right:52px; animation:mq 40s linear infinite;flex:0 0 auto} .marquee i{font-style:normal;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:1.4rem;color:#2f2f35;white-space:nowrap;display:flex;align-items:center;gap:52px} .marquee i::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto} @keyframes mq{to{transform:translateX(-50%)}} /* --- Markenwand: zwei gegenlaeufige, endlos scrollende Reihen ------------- Das Scrollen selbst treibt jetzt assets/js/marquee.js per rAF ueber scrollLeft an (nicht mehr die CSS-Animation) — dadurch laesst sich mit der Maus daran ziehen wie bei einem nativen Scrollbereich, und auf dem Handy scrollt es zusaetzlich ganz normal per Fingerwisch. */ .brandmarquee{display:flex;flex-direction:column;gap:18px} .brandmarquee-row{ overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scrollbar-width:none;cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .brandmarquee-row::-webkit-scrollbar{display:none} .brandmarquee-row.bm-ziehend{cursor:grabbing;scroll-snap-type:none} .brandmarquee-track{display:flex;gap:18px;width:max-content} .brandmarquee-row.bm-ziehend .brand-tile{pointer-events:none} .brand-tile{flex:0 0 auto;width:clamp(128px,15vw,176px);aspect-ratio:16/9;border-radius:16px; background:#fff;display:grid;place-items:center;padding:18px 24px; box-shadow:0 22px 44px -26px rgba(0,0,0,.7);transition:transform .5s var(--ease)} .brand-tile:hover{transform:translateY(-4px)} .brand-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} /* Marken, von denen es offiziell nur ein weisses Logo gibt — auf der weissen Kachel waeren die unsichtbar. Die Kachel bekommt deshalb die Hausfarbe der Marke, so wie der Hersteller sein Logo selbst einsetzt. Wert von vmilch.at selbst abgenommen, nicht geraten (gleiche Loesung wie frueher bei den seither wieder entfernten Marken Milka/Corny, siehe CLAUDE.md). */ .brand-tile.bt-vmilch{background:#005086} /* --- Footer --------------------------------------------------------------- */ .footer{background:var(--ink);color:#fff;padding-top:clamp(60px,8vw,110px)} .footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(28px,5vw,72px); padding-bottom:clamp(40px,6vw,80px)} .footer h3{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#9c8b6e;margin-bottom:1.5em} .footer-nav li{padding:.42em 0} .footer-nav a{color:#c9c9d0;font-size:.98rem;transition:color .35s var(--ease)} .footer-nav a:hover{color:#fff} .footer-bar{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center; padding:26px 0 34px;border-top:1px solid var(--line);font-size:.84rem;color:#71717a} .footer-bar nav{display:flex;gap:24px} .footer-bar a:hover{color:#fff} .social{display:flex;gap:10px;margin-top:24px} .social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff; border:1px solid var(--line); transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)} .social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)} .social svg{width:17px;height:17px;fill:currentColor} /* --- Seiten-Hero ---------------------------------------------------------- */ .phero{height:min(74svh,720px);min-height:440px;overflow:hidden;background:var(--ink);color:#fff; display:flex;align-items:flex-end} .phero .hero-media::after{ background:linear-gradient(180deg,rgba(15,11,8,.72),rgba(15,11,8,.3) 45%,rgba(15,11,8,.84))} .phero .wrap{position:relative;padding-bottom:clamp(40px,7vh,84px);width:100%} .crumb{display:flex;gap:.6em;align-items:center;font-size:.8rem;color:rgba(255,255,255,.62); margin-bottom:1.5em} .crumb a{transition:color .35s var(--ease)} .crumb a:hover{color:#fff} /* --- Preistabellen -------------------------------------------------------- */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)} .ptable{width:100%;border-collapse:collapse;font-size:.93rem;font-variant-numeric:tabular-nums; min-width:760px} .ptable caption{text-align:left;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:1.35rem;padding-bottom:.9em;color:#fff} .ptable th,.ptable td{padding:.85em 1em;text-align:right;border-bottom:1px solid var(--line)} .ptable th:first-child,.ptable td:first-child{text-align:left;white-space:nowrap} .ptable thead th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#9c8b6e;font-weight:500} .ptable tbody tr{transition:background .35s var(--ease)} .ptable tbody tr:hover{background:rgba(255,255,255,.045)} .ptable .tier{font-family:var(--display);font-weight:700;text-transform:uppercase} /* Schmale Preisliste mit nur zwei Spalten (Leistung/Preis, z. B. Skiservice): die feste Mindestbreite der grossen Tagestabellen waere hier nur leerer Raum, und die erste Spalte muss umbrechen duerfen. */ .ptable.compact{min-width:0} .ptable.compact td:first-child{white-space:normal;color:#c9c9d0} .ptable.compact td:last-child{font-weight:700;color:#fff;white-space:nowrap} /* --- Fortschrittsbalken --------------------------------------------------- */ .prog{position:fixed;top:0;left:0;height:2px;background:var(--red-lit);z-index:101;width:0} /* --- Responsive ----------------------------------------------------------- */ @media (max-width:1000px){ .stage,.split,.grid2,.footer-top{grid-template-columns:1fr} .split.flip .split-media{order:0} .stage-media{position:relative;top:0;height:min(52vh,440px)} .stage-steps{padding:0;gap:52px} .step{opacity:1} .split-media{aspect-ratio:16/11} .stats{grid-template-columns:repeat(2,1fr);gap:28px} .hrail-outer{height:auto} .hrail{position:relative;height:auto;padding-block:8px;overflow-x:auto;scroll-snap-type:x mandatory} .hrail-track{transform:none !important} .hcard{scroll-snap-align:center} } @media (max-width:760px){ body{font-size:16px} .nav-links,.nav-cta{display:none} .burger{display:flex} .hero-media img{object-position:var(--pos-m,var(--pos,50% 50%))} .hero{min-height:0} .scroll-cue{display:none} .cards{grid-template-columns:1fr} .hero-foot{flex-direction:column;align-items:flex-start} .footer-bar{flex-direction:column;align-items:flex-start} .contact-line{flex-direction:column;gap:.3em} .contact-line .v{text-align:left} } /* --- Reduced Motion ------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important} [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important} .line i{transform:none} .statement w{color:inherit !important} .step{opacity:1} .hero-foot,.scroll-cue{opacity:1;transform:none} } /* ========================================================================== Ergaenzungen: Schneeflocken-Rating, Hotel-Dropdown, Buchungsanfrage ========================================================================== */ /* --- Schneeflocken statt Sterne ------------------------------------------ */ .stars{color:var(--red-lit);font-size:.92rem;letter-spacing:.32em;margin-top:.55em;line-height:1} .ptable .tier em{font-style:normal;color:var(--red-lit);margin-left:.5em;font-size:.9em;letter-spacing:.16em} /* --- Navigation mit Untermenue ------------------------------------------- */ .nav-item{position:relative;display:flex;align-items:center} .nav-item>a{display:inline-flex;align-items:center;gap:.4em} .nav-item>a .chev{width:9px;height:9px;flex:0 0 auto;transition:transform .45s var(--ease)} .nav-item:hover>a .chev,.nav-item:focus-within>a .chev{transform:rotate(180deg)} .sub{ position:absolute;top:100%;left:50%;transform:translate(-50%,10px); width:min(660px,88vw);padding-top:14px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s; } .nav-item:hover .sub,.nav-item:focus-within .sub{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) } .sub-in{ display:grid;grid-template-columns:1fr 216px;gap:8px;padding:14px; border-radius:18px;border:1px solid var(--line); background:rgba(17,17,19,.9);backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%); box-shadow:0 30px 70px -30px rgba(0,0,0,.85); } .sub-links{display:flex;flex-direction:column;gap:2px} .sub-links a{ display:block;padding:12px 14px;border-radius:11px;opacity:1; transition:background .35s var(--ease),transform .35s var(--ease); } .sub-links a::after{display:none} .sub-links a:hover{background:rgba(255,255,255,.07);transform:translateX(3px)} .sub-links b{display:block;font-size:.95rem;font-weight:700;color:#fff} .sub-links span{display:block;font-size:.82rem;color:#9a9aa2;margin-top:.2em} .sub-card{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--ink-2)} .sub-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} /* Grundschleier ueber dem Foto, sonst steht die Bildunterschrift je nach Bildausschnitt auf hellem Himmel. */ .sub-card::after{content:"";position:absolute;inset:0;background:rgba(15,11,8,.38)} .sub-card figcaption{ position:absolute;inset:auto 0 0 0;z-index:1;padding:16px 14px 14px; background:linear-gradient(rgba(15,11,8,0),rgba(15,11,8,.88) 38%,rgba(15,11,8,.97)); font-size:.78rem;line-height:1.4;color:#eee0c4;text-shadow:0 1px 8px rgba(0,0,0,.6) } .sub-card b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:1.05rem;color:var(--red-lit);line-height:1} /* Untermenue-Eintraege in der mobilen Schublade */ .drawer .subnav{margin:-.2em 0 .8em;padding-left:2px} .drawer .subnav a{ font-family:var(--text);font-weight:500;text-transform:none; font-size:1.05rem;line-height:1.5;padding:.16em 0;color:#9a9aa2; } .drawer .subnav a:hover{color:#fff} /* --- Rabatt-Band ---------------------------------------------------------- */ .perk{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px); padding:clamp(24px,3vw,38px);border-radius:20px; background:linear-gradient(100deg,#2a0a13,#1c150d 68%); border:1px solid rgba(196,18,48,.4); } .perk .big{ font-family:var(--display);font-weight:700;line-height:.85; font-size:clamp(3rem,7vw,5.4rem);color:var(--red-lit); } .perk .txt{flex:1 1 320px} .perk h3{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.3rem,2.4vw,2rem);line-height:1} .perk p{margin-top:.7em;color:#b8a781;font-size:.98rem;max-width:52ch} /* --- Buchungsanfrage ------------------------------------------------------ */ .book{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(20px,3vw,40px);align-items:start} .book-panel{padding:clamp(22px,2.6vw,34px);border-radius:20px; background:var(--ink-2);border:1px solid var(--line)} .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px} .f{display:flex;flex-direction:column;gap:.5em} .f-full{grid-column:1 / -1} .f>span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9c8b6e} .f input,.f select,.f textarea{ width:100%;padding:.85em 1em;border-radius:11px; background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff; font-family:var(--text);font-size:.98rem; transition:border-color .35s var(--ease),background .35s var(--ease); } .f textarea{resize:vertical;min-height:96px;line-height:1.55} .f input:focus,.f select:focus,.f textarea:focus{ outline:none;border-color:var(--red-lit);background:rgba(255,255,255,.08)} /* :user-invalid statt :invalid — sonst sind leere Pflichtfelder schon rot, bevor der Besucher sie ueberhaupt angefasst hat. */ .f input:user-invalid,.f textarea:user-invalid{border-color:rgba(228,23,58,.65)} .f select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,#9c8b6e 50%), linear-gradient(135deg,#9c8b6e 50%,transparent 50%); background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%; background-size:6px 6px,6px 6px;background-repeat:no-repeat} .f input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer} .check{display:flex;gap:.75em;align-items:flex-start;grid-column:1 / -1; padding:.9em 1em;border-radius:11px;background:rgba(196,18,48,.1); border:1px solid rgba(196,18,48,.32);font-size:.93rem;color:#eee0c4;cursor:pointer} .check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--red);margin-top:.1em} .err{color:#ff6b83;font-size:.85rem;margin-top:1em;min-height:1.2em} /* Zusammenfassung */ .sum{position:sticky;top:calc(var(--nav-h) + 20px);padding:clamp(22px,2.6vw,32px); border-radius:20px;background:linear-gradient(165deg,#2a0a13,#1c150d 62%); border:1px solid rgba(196,18,48,.4)} .sum h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.25rem;line-height:1} .sum-rows{margin-top:1.4em} .sum-row{display:flex;justify-content:space-between;gap:14px;padding:.62em 0; border-bottom:1px solid var(--line);font-size:.94rem;color:#b8a781} .sum-row b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums;text-align:right} .sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px; margin-top:1.1em;padding-top:1.1em;border-top:1px solid rgba(255,255,255,.25)} .sum-total span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9c8b6e} .sum-total b{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:.9; font-variant-numeric:tabular-nums} .sum .btn{width:100%;justify-content:center;margin-top:1.4em} .sum .btn-ghost{margin-top:8px} /* E-Mail-Vorschau: hier laesst sich die Schrift tatsaechlich bestimmen */ .mailview{margin-top:clamp(20px,3vw,32px)} .mailview summary{cursor:pointer;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase; color:#9c8b6e;padding:.6em 0;transition:color .35s var(--ease)} .mailview summary:hover{color:#fff} .mailview pre{ margin:.8em 0 0;padding:clamp(18px,2.2vw,26px);border-radius:14px; background:#0e0e10;border:1px solid var(--line);color:#d6d6dc; font-family:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono","Segoe UI Mono", "Roboto Mono","Liberation Mono",Menlo,Consolas,monospace; font-size:.86rem;line-height:1.72;white-space:pre-wrap;word-break:break-word; font-variant-ligatures:none;tab-size:2; } .mailview .ok{color:#5ad18b} @media (max-width:1000px){ .book{grid-template-columns:1fr} .sum{position:relative;top:0} .sub{display:none} } @media (max-width:760px){ .fields{grid-template-columns:1fr} .perk{flex-direction:column;align-items:flex-start} } /* ========================================================================== Ergaenzungen: Videothek, eingebettete Fremdsysteme, Karte, News ========================================================================== */ /* --- Videothek ------------------------------------------------------------ */ .vtek{display:grid;grid-template-columns:1fr 300px;gap:clamp(16px,2vw,26px);align-items:start} .vstage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--ink-2)} .vstage img,.vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover} .vstage .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,8,.15),rgba(15,11,8,.7))} .vstage .play{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:clamp(64px,7vw,86px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center;background:var(--red);color:#fff; box-shadow:0 18px 44px -14px rgba(196,18,48,.9); transition:transform .5s var(--ease),background .4s var(--ease); } .vstage:hover .play{transform:scale(1.08);background:var(--red-lit)} .vstage .play svg{width:26px;height:26px;fill:currentColor;margin-left:3px} .vstage figcaption{ position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.2vw,28px); pointer-events:none; } .vstage figcaption b{ display:block;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.05;color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6); } .vstage figcaption span{display:block;margin-top:.45em;font-size:.85rem;color:#c2c2c9} .vlist{display:flex;flex-direction:column;gap:10px} .vitem{ display:grid;grid-template-columns:106px 1fr;gap:12px;align-items:center; padding:8px;border-radius:12px;text-align:left;width:100%; border:1px solid transparent; transition:background .4s var(--ease),border-color .4s var(--ease); } .vitem:hover{background:rgba(255,255,255,.06)} .vitem[aria-current="true"]{background:rgba(196,18,48,.14);border-color:rgba(196,18,48,.45)} .vitem .thumb{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--ink-3)} .vitem .thumb img{width:100%;height:100%;object-fit:cover} .vitem b{display:block;font-size:.88rem;font-weight:700;color:#fff;line-height:1.3} .vitem span{display:block;font-size:.76rem;color:#9c8b6e;margin-top:.25em} /* --- Bildergalerie --------------------------------------------------------- Bewusst KEIN schmaler Seiten-Streifen wie bei der Videothek (die passt fuer acht Filme, aber nicht fuer 29 Fotos — 106px breite Vorschaubilder waren bei so vielen Kacheln nicht mehr zu erkennen). Stattdessen: Buehne oben, darunter ein Kachel-Raster, das sich unabhaengig von der Fensterbreite von selbst in die passende Spaltenzahl legt (kein eigener Media-Query-Umbruch noetig, der zwischen zwei CSS-Dateien auseinanderlaufen kann). ---------- */ .gtek{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)} .gstage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--ink-2); scroll-margin-top:calc(var(--nav-h) + 20px)} .gstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gstage .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,11,8,.78))} .gstage figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.2vw,28px);pointer-events:none} .gstage figcaption b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.05;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)} .gstage figcaption span{display:block;margin-top:.45em;font-size:.85rem;color:#c2c2c9} .gnav{ position:absolute;top:50%;translate:0 -50%;z-index:3; width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(15,11,8,.55);color:#fff; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:background .3s var(--ease),transform .3s var(--ease); } .gnav:hover{background:var(--red)} .gnav:active{transform:scale(.92)} .gnav.prev{left:14px} .gnav.next{right:14px} .gnav svg{width:20px;height:20px} .glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} .gitem{ display:flex;flex-direction:column;gap:10px; padding:10px;border-radius:14px;text-align:left;width:100%; border:1px solid transparent; transition:background .4s var(--ease),border-color .4s var(--ease); } .gitem:hover{background:rgba(255,255,255,.06)} .gitem[aria-current="true"]{background:rgba(196,18,48,.14);border-color:rgba(196,18,48,.45)} .gitem .thumb{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--ink-3)} .gitem .thumb img{width:100%;height:100%;object-fit:cover} .gitem b{display:block;font-size:.9rem;font-weight:700;color:#fff;line-height:1.3} .gitem span{display:block;font-size:.78rem;color:#9c8b6e;margin-top:.2em} /* --- Eingebettete Fremdsysteme (Verleih, Check-in, Tickets) --------------- */ .embed{ position:relative;border-radius:20px;overflow:hidden;background:#fff; border:1px solid var(--line);min-height:clamp(520px,74vh,860px); } .embed iframe{display:block;width:100%;height:clamp(520px,74vh,860px);border:0} .embed-facade{ position:absolute;inset:0;display:grid;place-items:center;text-align:center; padding:var(--pad);background:var(--ink-2); } .embed-facade .inner{max-width:46ch} .embed-facade h3{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1;color:#fff} .embed-facade p{margin-top:1em;color:#b8a781;font-size:.96rem;line-height:1.65} .embed-facade .btn{margin-top:1.8em} .embed-note{margin-top:1em;font-size:.82rem;color:var(--grey)} .embed-note a{color:var(--red-lit)} .tabs{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:99px; background:rgba(255,255,255,.07);margin-bottom:22px;width:max-content;max-width:100%} .tabs button{padding:.7em 1.5em;border-radius:99px;font-size:.88rem;font-weight:500; color:#b8a781;white-space:nowrap;transition:color .4s var(--ease),background .4s var(--ease)} .tabs button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:700} /* --- Karte ---------------------------------------------------------------- */ .mapwrap{position:relative;border-radius:20px;overflow:hidden;background:var(--ink-2); aspect-ratio:16/9;min-height:320px;border:1px solid var(--line)} .mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .mapfacade{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px; background: radial-gradient(120% 100% at 50% 0%,rgba(196,18,48,.14),transparent 60%), var(--ink-2)} /* display:block ist noetig — an einem inline-span greifen width/height nicht, das SVG wuerde die ganze Kachel fluten. */ .mapfacade .pin{display:block;width:44px;height:44px;margin:0 auto .9em;color:var(--red-lit)} .mapfacade .pin svg{width:100%;height:100%;fill:currentColor} .mapfacade b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:1.35rem;color:#fff;line-height:1.05} .mapfacade p{margin-top:.6em;font-size:.9rem;color:#b8a781;max-width:40ch} .mapfacade .btn{margin-top:1.4em} /* --- News ----------------------------------------------------------------- */ /* Feste Spaltenzahl statt auto-fit: sonst bleibt bei drei Meldungen je nach Fensterbreite eine Spalte leer. */ .news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)} @media (max-width:1100px){.news{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.news{grid-template-columns:1fr}} .newscard{ display:flex;flex-direction:column;border-radius:18px;overflow:hidden; background:var(--ink-2);border:1px solid var(--line); transition:transform .7s var(--ease),border-color .5s var(--ease)} .newscard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26)} .newscard .pic{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);cursor:pointer} .newscard .pic img{width:100%;height:100%;object-fit:cover; transition:transform 1.2s var(--ease)} .newscard:hover .pic img{transform:scale(1.05)} .newscard .body-in{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1} .newsmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.7em; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9c8b6e} .newsmeta .tag{color:var(--red-lit);border:1px solid rgba(228,23,58,.4); border-radius:99px;padding:.3em .8em;letter-spacing:.1em} .newscard h3{margin:.9em 0 .5em;font-family:var(--display);font-weight:700; text-transform:uppercase;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.05;color:#fff} /* Die Ueberschrift ist ein