/* ============================================================= BLUE BREEZE — Cinematic Mediterranean Luxury Experience Art direction: Mediterranean quiet luxury Palette + fonts inherited from the established brand. ============================================================= */ /* ---------- Fonts (local, self-contained) ---------- */ @font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113;} @font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/marcellus-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/marcellus-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113;} /* ---------- Design tokens ---------- */ :root{ --navy:#16283d; --navy-deep:#101c2b; --navy-mid:#132234; --sand:#f6f1e9; --sand-2:#f4efe6; --sand-3:#eae0cd; --shell:#e9dcc6; --gold:#bfa163; --gold-soft:#cdb47f; --gold-deep:#a5854a; --taupe:#8a7f66; --ink-soft:#6b6350; --olive:#5c5648; --line:rgba(22,40,61,0.14); --serif:'Marcellus',Georgia,serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif; --ease:cubic-bezier(.6,.01,.05,1); --pad-x:clamp(22px,6vw,110px); --shadow-lift:0 26px 70px -30px rgba(16,28,43,.55); } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-stopped{overflow:hidden;} body{ margin:0;background:var(--sand-2);color:var(--navy); font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.05vw,17px); line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;} picture{display:contents;} a{color:var(--gold-deep);text-decoration:none;transition:color .3s var(--ease);} a:hover{color:var(--navy);} ::selection{background:var(--gold);color:#fff;} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.06;letter-spacing:-.01em;color:var(--navy);} p{margin:0;} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;} /* ---------- Typographic scale ---------- */ .kicker{font-family:var(--sans);font-weight:400;font-size:clamp(11px,.86vw,13px); letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);} .display{font-size:clamp(52px,11vw,168px);line-height:.92;letter-spacing:-.02em;} .h-xl{font-size:clamp(34px,5.4vw,74px);} .h-lg{font-size:clamp(30px,4.4vw,56px);} .h-md{font-size:clamp(24px,2.8vw,38px);} .lead{font-size:clamp(17px,1.5vw,22px);line-height:1.6;color:var(--ink-soft);font-weight:300;} .body-muted{color:var(--ink-soft);font-weight:300;} .eyebrow{display:inline-flex;align-items:center;gap:12px;} .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.8;} /* ---------- Layout helpers ---------- */ section{position:relative;} .wrap{max-width:1320px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);} .pad-y{padding-top:clamp(84px,11vw,168px);padding-bottom:clamp(84px,11vw,168px);} .grid{display:grid;gap:clamp(28px,4vw,72px);} .on-navy{background:var(--navy-mid);color:var(--sand);} .on-navy h1,.on-navy h2,.on-navy h3{color:var(--sand);} .on-navy .lead,.on-navy .body-muted{color:rgba(246,241,233,.72);} .on-sand3{background:var(--sand-3);} .center{text-align:center;} .maxw-680{max-width:680px;} .maxw-560{max-width:560px;} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px; font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase; padding:16px 30px;border-radius:2px;cursor:pointer;border:1px solid transparent; transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);} .btn-gold{background:var(--gold);color:var(--navy);} .btn-gold:hover{background:var(--gold-soft);color:var(--navy);transform:translateY(-2px);} .btn-ghost{background:transparent;color:var(--navy);border-color:var(--line);} .btn-ghost:hover{background:var(--navy);color:var(--sand);border-color:var(--navy);} .on-navy .btn-ghost,.hero .btn-ghost{color:var(--sand);border-color:rgba(246,241,233,.35);} .on-navy .btn-ghost:hover,.hero .btn-ghost:hover{background:var(--sand);color:var(--navy);border-color:var(--sand);} .btn-lg{padding:19px 40px;} /* ============================================================= HEADER / NAV ============================================================= */ .site-header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center; justify-content:space-between;padding:20px var(--pad-x); transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);} .site-header.scrolled{background:rgba(246,241,233,.9);backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line);padding:14px var(--pad-x);} .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:20px;letter-spacing:.02em; color:var(--sand);transition:color .5s var(--ease);} .scrolled .brand{color:var(--navy);} /* Echte Bildmarke statt eines gesetzten Punkts. Quelle ist 256px, angezeigt werden 34px - damit steht sie auch auf hochaufloesenden Schirmen sauber. Eigenproportion 1:1, keine Transform, keine Animation. */ .brand-mark{display:block;width:34px;height:34px;flex:0 0 auto;object-fit:contain; transition:filter .5s var(--ease); filter:drop-shadow(0 1px 6px rgba(8,16,28,.45));} .scrolled .brand-mark{filter:drop-shadow(0 1px 4px rgba(22,40,61,.18));} @media(max-width:700px){ .brand-mark{width:29px;height:29px;} .brand{gap:9px;font-size:18px;} } .nav-links{display:flex;align-items:center;gap:clamp(20px,2.3vw,34px);} .nav-links a{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase; color:rgba(246,241,233,.82);position:relative;padding:4px 0;} .scrolled .nav-links a{color:var(--olive);} .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease);} .nav-links a:hover{color:var(--gold);} .scrolled .nav-links a:hover{color:var(--navy);} .nav-links a:hover::after{width:100%;} .nav-cta{border:1px solid rgba(246,241,233,.4);padding:9px 20px !important;border-radius:2px;color:var(--sand) !important;} .scrolled .nav-cta{border-color:var(--gold);color:var(--gold-deep) !important;} .nav-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--navy) !important;} .menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:70;} .menu-btn span{width:26px;height:1.5px;background:var(--sand);transition:transform .4s var(--ease),opacity .3s;} .scrolled .menu-btn span{background:var(--navy);} .mobile-nav{position:fixed;inset:0;z-index:65;background:var(--navy-deep);color:var(--sand); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;} .mobile-nav.open{opacity:1;visibility:visible;} .mobile-nav a{font-family:var(--serif);font-size:clamp(26px,7vw,40px);color:var(--sand);} .mobile-nav a:hover{color:var(--gold);} .mobile-nav .close{position:absolute;top:24px;right:28px;font-size:38px;font-family:var(--serif);background:none;border:none;color:var(--sand);cursor:pointer;} /* Mit dem Punkt "Straende" ist die Kopfzeile ein Glied laenger. Ohne den engeren Abstand bricht sie schon ab 1180 px um; gemessen wandert die Bruchstelle damit auf rund 1100 px, also praktisch dorthin zurueck, wo sie vorher lag (1060 px). */ @media(max-width:1240px){.nav-links{gap:clamp(12px,1.45vw,24px);}} @media(max-width:920px){.nav-links{display:none;}.menu-btn{display:flex;}} /* ============================================================= HERO — the opening frame of a film ============================================================= */ .hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--navy-deep);} .hero-stage{position:absolute;inset:0;will-change:transform;} .hero-stage{background:var(--navy-deep);} .hero-stage picture{position:absolute;inset:0;} .hero-img{position:absolute;inset:-8% -4%;width:108%;height:116%;object-fit:cover; transform:scale(1.06);will-change:transform;filter:saturate(.9) contrast(1.05) brightness(.97);} .hero-grade{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(16,28,43,.5) 0%,rgba(16,28,43,0) 30%,rgba(191,161,99,.12) 78%,rgba(16,28,43,.2) 100%); mix-blend-mode:soft-light;} .hero-veil{position:absolute;inset:0; background: radial-gradient(120% 90% at 50% 6%,rgba(16,28,43,0) 26%,rgba(16,28,43,.55) 100%), linear-gradient(180deg,rgba(16,28,43,.5) 0%,rgba(16,28,43,.26) 40%,rgba(16,28,43,.4) 70%,rgba(16,28,43,.9) 100%);} .hero-scrim{position:absolute;inset:0;z-index:2; background:radial-gradient(64% 44% at 50% 72%,rgba(10,18,28,.52) 0%,rgba(10,18,28,0) 72%);} .hero-grain{position:absolute;inset:0;z-index:2;opacity:.38;mix-blend-mode:overlay;pointer-events:none;} .hero-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:0 24px;} .hero .kicker{color:var(--gold-soft);letter-spacing:.22em;margin-bottom:16px; text-shadow:0 1px 3px rgba(8,16,28,.62),0 2px 24px rgba(8,16,28,.55);} /* Bauhinweis: frueher eine leuchtende Pille mit pulsierendem Punkt ueber dem Logo. Das zog den Blick vor die Marke und wirkte wie ein Aufkleber. Jetzt steht der Hinweis als ruhige Zeile unter dem Beschreibungstext - dieselbe Information, nur an der Stelle, an der man sie liest. */ .hero-note{margin:clamp(12px,1.4vw,18px) auto 0;font-family:var(--sans);font-weight:300; font-size:clamp(10.5px,.82vw,12px);letter-spacing:.2em;text-transform:uppercase; color:rgba(246,241,233,.55);text-shadow:0 1px 10px rgba(8,16,28,.5); text-wrap:balance;} .hero-descriptor{color:rgba(246,241,233,.9);font-family:var(--sans);font-weight:300; font-size:clamp(14px,1.25vw,17px);line-height:1.6;max-width:600px;margin:16px auto 0; text-shadow:0 2px 18px rgba(0,0,0,.45);} .hero-textlink{display:inline-flex;align-items:center;gap:6px;color:var(--sand);font-family:var(--sans); font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(246,241,233,.4); padding-bottom:3px;transition:color .3s var(--ease),border-color .3s var(--ease);} .hero-textlink:hover{color:var(--gold-soft);border-color:var(--gold);} /* ---- Hero-Logo als Bildmarke (ersetzt den getippten Wortmarken-Titel) ---- */ /* Eine Variable traegt die Logobreite. Der Lichtgrund rechnet daran mit, deshalb passt er in jedem Breakpoint zum Logo - vorher war er an den Viewport gebunden und hat die halbe Buehne ueberstrahlt. */ .hero-logo{--logo-w:min(clamp(270px,36vw,560px),43vh); position:relative;display:flex;justify-content:center;margin:0;line-height:0;} .hero-logo-mask{display:block;overflow:hidden;} .hero-logo-mask picture{display:block;will-change:transform;} /* Bildmarke: feste Eigenproportion (760x873 im Markup), nur die Breite wird gesteuert. Keine Transform, kein object-fit, kein Zuschnitt. */ .hero-logo img{display:block;width:var(--logo-w);height:auto;max-width:100%; filter:contrast(1.06) saturate(1.04) drop-shadow(0 6px 18px rgba(8,16,28,.16));} /* Lichtgrund: knapper Lichtteppich direkt unter der Marke. Die Wortmarke ist tiefblau und braucht hellen Grund - aber nur dort, wo sie steht. */ .hero-logo-glow{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);pointer-events:none;z-index:-1; width:calc(var(--logo-w) * 1.58);height:calc(var(--logo-w) * 1.70); background:radial-gradient(ellipse at center, rgba(249,246,240,.90) 0%, rgba(249,246,240,.82) 30%, rgba(248,244,237,.58) 48%, rgba(247,242,235,.30) 64%, rgba(246,241,233,.10) 80%, transparent 92%); filter:blur(8px);} @media(max-width:700px){ .hero-logo{--logo-w:min(56vw,232px);} .hero .kicker{margin-bottom:9px;} .hero-note{margin-top:9px;font-size:10px;letter-spacing:.14em;line-height:1.5;} .hero-sub{margin-top:8px;} .hero-descriptor{margin-top:9px;} .hero-cta{margin-top:16px;gap:14px;} } .hero-sub{color:rgba(246,241,233,.9);font-family:var(--serif);font-size:clamp(18px,2.2vw,30px); margin-top:clamp(18px,2.2vw,30px);letter-spacing:.01em;} .hero-meta{margin-top:20px;font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase; color:rgba(246,241,233,.62);} .hero-cta{margin-top:clamp(30px,4vw,46px);display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:center;} /* ============================================================= SCROLL-ZEICHEN — Wort, Fortschrittsschiene, Pfeil Steht fest am unteren Rand und begleitet die ganze Seite. In der Buehne laeuft das Segment als Einladung in Schleife; danach steht es dort, wo man auf der Seite steht. Erst wenn der Fuss erreicht ist, blendet das Zeichen weich aus. Zwei Farbfassungen: .on-dark fuer Fotos und die navyfarbenen Abschnitte, sonst die dunkle Fassung fuer die hellen Baender. ============================================================= */ .hero-scroll{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:46; display:flex;flex-direction:column;align-items:center;gap:8px; font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase; pointer-events:none;transition:opacity .7s var(--ease); --hs-ink:rgba(22,40,61,.70);--hs-track:rgba(22,40,61,.18);--hs-mark:var(--gold-deep);} .hero-scroll.on-dark{--hs-ink:rgba(246,241,233,.80);--hs-track:rgba(246,241,233,.22);--hs-mark:var(--gold);} /* Kein Grund, keine Flaeche, kein Schein - nur Schrift, Schiene und Pfeil. Die Lesbarkeit traegt allein die Farbfassung plus ein enger Schriftschatten, der auf Fotos greift und auf Flaechen unsichtbar bleibt. */ .hs-word{color:var(--hs-ink);transition:color .5s var(--ease); text-shadow:0 0 3px rgba(246,241,233,.55);} .hero-scroll.on-dark .hs-word{text-shadow:0 0 4px rgba(8,16,28,.75);} .hero-scroll .rail{position:relative;width:1px;height:44px;overflow:hidden; background:var(--hs-track);transition:background .5s var(--ease);} .hero-scroll .rail i{position:absolute;left:0;width:100%;height:38%;top:0; background:var(--hs-mark);box-shadow:0 0 9px rgba(191,161,99,.55); animation:railRun 2.6s var(--ease) infinite;} @keyframes railRun{0%{transform:translateY(-110%);}100%{transform:translateY(300%);}} /* Ausserhalb der Buehne wird aus der Einladung die Fortschrittsmarke */ html.past-hero .hero-scroll .rail i{animation:none;transform:none; height:30%;top:calc(var(--pp,0) * 70%);transition:top .14s linear;} .hs-arrow{width:7px;height:7px;border-right:1px solid var(--hs-mark); border-bottom:1px solid var(--hs-mark);transform:rotate(45deg); animation:hsBob 2.6s var(--ease) infinite;transition:border-color .5s var(--ease);} @keyframes hsBob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.55;} 50%{transform:rotate(45deg) translate(2px,2px);opacity:1;}} /* Das Zeichen bleibt bis zum Schluss stehen. Am Fuss hoert nur die Bewegung auf - es gibt dort nichts mehr, worauf der Pfeil zeigen koennte, aber die Anzeige selbst verschwindet nicht. */ html.at-end .hs-arrow{animation:none;opacity:.5;} html.at-end .hero-scroll .rail i{box-shadow:none;} /* Auf schmalen Schirmen ist in der Buehne kein Platz fuer die stehende Form - dort steht schon der Textlink und darunter die Buchungsleiste. Also liegt das Zeichen dort flach in der Luecke zwischen beiden: Wort und Pfeil nebeneinander, ohne Schiene. Nach der Buehne richtet es sich wieder auf und zeigt den Fortschritt wie auf dem Desktop. */ @media(max-width:900px){ .hero-scroll{bottom:70px;font-size:9px;gap:6px;} .hero-scroll .rail{height:32px;} html:not(.past-hero) .hero-scroll{flex-direction:row;align-items:center;gap:8px; bottom:calc(var(--bar-h,64px) + 8px);} html:not(.past-hero) .hero-scroll .rail{display:none;} html:not(.past-hero) .hs-arrow{width:6px;height:6px;} } @media(prefers-reduced-motion:reduce){ .hero-scroll .rail i,.hs-arrow{animation:none;} .hs-arrow{opacity:.8;} } /* ============================================================= FILM — one dominant scene transforming on scroll (journey) ============================================================= */ .film{position:relative;background:var(--navy-deep);} .film-stage{position:sticky;top:0;height:100vh;overflow:hidden;} .film-scene{position:absolute;inset:0;opacity:0;} .film-scene .scene-img,.film-scene picture{position:absolute;inset:0;width:100%;height:100%;} .film-scene .scene-img{object-fit:cover;transform:scale(1.08);will-change:transform;} /* Zwei echte Aufnahmen je Szene: Tag liegt unten, Abend blendet beim Scrollen darueber. Beide sitzen in derselben Ebene, damit Zoom und Wischer sie gemeinsam bewegen - sonst wandern sie gegeneinander. */ .scene-media{overflow:hidden;} /* picture ist per Voreinstellung display:contents - dann greift keine Deckkraft darauf. Deshalb hier ausdruecklich als Block. */ .scene-media > img,.scene-media > picture{position:absolute;inset:0;width:100%;height:100%;display:block;} .scene-media picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .scene-media > img{object-fit:cover;} .scene-media .sc-night{opacity:0;} .film-scene .scene-veil{position:absolute;inset:0;z-index:4; background:linear-gradient(90deg,rgba(16,28,43,.58) 0%,rgba(16,28,43,.20) 44%,rgba(16,28,43,0) 74%), linear-gradient(0deg,rgba(16,28,43,.46) 0%,rgba(16,28,43,0) 42%);} /* Tageszeit je Szene. Zwei Ebenen, beide von GSAP gescrubbt: .scene-day 1 -> 0 kuehles Tageslicht, hebt die Schatten an .scene-grade 0 -> 1 Abend: warmer Horizont unten, tiefes Navy oben Jede neue Szene startet wieder bei Tag. */ .film-scene .scene-day{position:absolute;inset:0;z-index:2;opacity:1;pointer-events:none; mix-blend-mode:screen; background:linear-gradient(180deg,rgba(146,194,236,.18) 0%,rgba(255,248,230,.10) 52%,rgba(120,172,216,.15) 100%);} .film-scene .scene-grade{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none; background:linear-gradient(0deg,rgba(214,124,58,.22) 0%,rgba(214,124,58,.08) 26%,rgba(214,124,58,0) 46%), linear-gradient(180deg,rgba(22,36,64,.36) 0%,rgba(14,24,42,.60) 58%,rgba(10,18,32,.76) 100%);} .film-caption{position:absolute;z-index:4;left:var(--pad-x);bottom:clamp(72px,12vh,140px);max-width:620px;color:var(--sand);} .film-index{font-family:var(--serif);font-size:clamp(13px,1vw,15px);letter-spacing:.4em;color:var(--gold-soft);} .film-chapter{font-family:var(--serif);font-size:clamp(40px,7vw,104px);line-height:.95;color:var(--sand);margin:16px 0 14px;letter-spacing:-.02em;} .film-line{font-size:clamp(16px,1.4vw,20px);color:rgba(246,241,233,.82);font-weight:300;max-width:460px;} .film-progress{position:absolute;z-index:4;right:var(--pad-x);top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:14px;} .film-progress .tick{width:1px;height:26px;background:rgba(246,241,233,.28);position:relative;} .film-progress .tick.active{background:var(--gold);} .film-grain{position:absolute;inset:0;z-index:5;opacity:.26;mix-blend-mode:overlay;pointer-events:none;} @media(max-width:720px){ .film-caption{left:22px;right:22px;bottom:132px;} .film-scene .scene-veil{background:linear-gradient(0deg,rgba(16,28,43,.74) 0%,rgba(16,28,43,.10) 55%,rgba(16,28,43,.34) 100%);} .film-progress{display:none;} } /* ---------- Reveal primitives (GSAP-driven, with CSS fallback) ---------- */ [data-reveal]{opacity:0;transform:translateY(38px);} .no-js [data-reveal],html.reduced [data-reveal]{opacity:1 !important;transform:none !important;} .reveal-line{display:block;overflow:hidden;} .reveal-line > *{display:block;} /* ============================================================= EDITORIAL SECTIONS ============================================================= */ .section-head{max-width:760px;} .section-head .h-lg{margin-top:18px;} .section-head .lead{margin-top:22px;} /* Arrival split */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,90px);align-items:center;} .split.rev{grid-template-columns:.95fr 1.05fr;} .figure{position:relative;overflow:hidden;border-radius:2px;} .figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);} .figure .cap{position:absolute;left:16px;bottom:14px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--sand);background:rgba(14,25,40,.62);padding:6px 12px;border-radius:2px;backdrop-filter:blur(4px);} .figure.parallax img{height:118%;transform:translateY(-6%); transition:filter .7s cubic-bezier(.3,0,.3,1);} /* kein transform-Uebergang: GSAP schreibt ihn pro Frame */ @media(max-width:840px){.split,.split.rev{grid-template-columns:1fr;}} /* stat row */ .stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,58px);margin-top:clamp(34px,4vw,52px);} .stat .n{font-family:var(--serif);font-size:clamp(34px,4vw,52px);color:var(--navy);line-height:1;} .on-navy .stat .n{color:var(--sand);} .stat .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-top:8px;} /* rhythm cards */ .rhythm{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px);margin-top:clamp(40px,5vw,64px);} .rhythm .item .num{font-family:var(--serif);font-size:22px;color:var(--gold-deep);} .rhythm .item h3{font-size:19px;margin:12px 0 8px;} @media(max-width:860px){.rhythm{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.rhythm{grid-template-columns:1fr;}} /* suite trio */ .trio{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,26px);margin-top:clamp(40px,5vw,64px);} .trio .tall{grid-row:span 2;} .trio .card{position:relative;overflow:hidden;border-radius:2px;background:var(--navy);min-height:260px;} .trio .card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.2s var(--ease);} .trio .card:hover img{transform:scale(1.05);} .trio .card .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px; background:linear-gradient(0deg,rgba(12,22,36,.92) 0%,rgba(12,22,36,.74) 42%,rgba(12,22,36,.28) 78%,transparent 100%); color:var(--sand);text-shadow:0 1px 12px rgba(8,16,28,.45);} .trio .card .meta h3{color:var(--sand);font-size:clamp(20px,2vw,26px);} .trio .card .meta p{color:rgba(246,241,233,.8);font-size:13.5px;margin-top:7px;} @media(max-width:760px){.trio{grid-template-columns:1fr;}.trio .tall{grid-row:auto;}} /* gallery grid */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,13vw,200px); gap:clamp(10px,1.1vw,14px);grid-auto-flow:dense;margin-top:clamp(40px,5vw,64px);} .gallery figure{margin:0;position:relative;overflow:hidden;border-radius:2px;cursor:pointer;grid-column:span 1;grid-row:span 1;} .gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2;} .gallery figure:nth-child(6){grid-column:span 2;grid-row:span 2;} .gallery figure:nth-child(9){grid-column:span 2;grid-row:span 1;} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter 1s var(--ease);} .gallery figure:hover img{transform:scale(1.05);} /* Helligkeit steuert jetzt die Tageslicht-Ebene (--dl-f) */ @media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);} .gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 2;grid-row:span 2;} .gallery figure:nth-child(9){grid-column:span 1;grid-row:span 1;}} @media(max-width:520px){.gallery{grid-template-columns:1fr;grid-auto-rows:220px;} .gallery figure,.gallery figure:nth-child(1),.gallery figure:nth-child(6),.gallery figure:nth-child(9){grid-column:span 1;grid-row:span 1;}} /* location */ .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;} .loc-facts{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:30px;} .loc-facts .cell{background:var(--sand-2);padding:22px 24px;} .loc-facts .cell .t{font-family:var(--serif);font-size:19px;color:var(--navy);} .loc-facts .cell .s{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin-top:6px;} .pull-quote{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.3;color:var(--navy);margin-top:34px;padding-left:24px;border-left:2px solid var(--gold);} @media(max-width:840px){.loc-grid{grid-template-columns:1fr;}} /* amenities */ .amen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(246,241,233,.12); border:1px solid rgba(246,241,233,.12);border-radius:2px;overflow:hidden;margin-top:clamp(40px,5vw,60px);} .amen .cell{background:var(--navy-mid);padding:clamp(24px,2.6vw,34px);min-height:150px;} .amen .cell .ic{font-family:var(--serif);font-size:26px;color:var(--gold-soft);} .amen .cell h3{color:var(--sand);font-size:18px;margin:16px 0 8px;} .amen .cell p{color:rgba(246,241,233,.66);font-size:13px;} .amen .cell .tag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold); border:1px solid rgba(191,161,99,.5);padding:3px 8px;border-radius:100px;display:inline-block;margin-left:8px;vertical-align:middle;} @media(max-width:900px){.amen{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.amen{grid-template-columns:1fr;}} /* fitness feature */ .fitness-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;} .feature-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px;} .feature-list li{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--ink-soft);} .feature-list li::before{content:"";width:22px;height:22px;border-radius:50%;flex:0 0 auto; background:var(--gold);color:var(--navy);display:inline-flex;} .badge{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-deep);border:1px solid var(--line);padding:8px 16px;border-radius:100px;} @media(max-width:840px){.fitness-grid{grid-template-columns:1fr;}} /* build / scrub video */ .build-media{position:relative;border-radius:2px;overflow:hidden;margin-top:clamp(40px,5vw,60px);background:#000;} .build-media video{width:100%;display:block;} .build-stills{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);margin-top:18px;} .build-stills figure{margin:0;position:relative;overflow:hidden;border-radius:2px;} .build-stills img{width:100%;height:100%;object-fit:cover;} .build-stills .cap{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);background:rgba(16,28,43,.5);padding:5px 10px;border-radius:2px;} /* hosts */ .hosts-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center;} .hosts-quote{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.32;color:var(--navy);} .sign{margin-top:26px;font-family:var(--serif);font-size:20px;color:var(--navy);} .sign span{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-top:6px;} @media(max-width:840px){.hosts-grid{grid-template-columns:1fr;}} /* trust cards */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px);margin-top:clamp(40px,5vw,60px);} .trust .item{text-align:center;} .trust .item .ic{font-family:var(--serif);font-size:40px;color:var(--gold);line-height:1;} .trust .item h3{font-size:20px;margin:14px 0 8px;} .trust .item p{font-size:14px;color:var(--ink-soft);} @media(max-width:860px){.trust{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.trust{grid-template-columns:1fr;}} /* faq */ .faq-list{max-width:820px;margin:clamp(40px,5vw,56px) auto 0;} .faq-item{border-top:1px solid rgba(246,241,233,.16);} .faq-item:last-child{border-bottom:1px solid rgba(246,241,233,.16);} .faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px; padding:24px 0;font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);color:var(--sand);list-style:none;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item .plus{font-family:var(--sans);font-weight:300;font-size:26px;color:var(--gold);transition:transform .4s var(--ease);flex:0 0 auto;} .faq-item[open] .plus{transform:rotate(45deg);} .faq-item .ans{padding:0 0 26px;color:rgba(246,241,233,.72);font-size:15px;max-width:680px;} /* guarantee */ .guarantee{background:var(--sand-2);text-align:center;} .guarantee .seal{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);display:inline-flex; align-items:center;justify-content:center;color:var(--gold-deep);font-family:var(--serif);font-size:26px;margin-bottom:8px;} /* booking */ .book{position:relative;overflow:hidden;background:var(--navy-deep);} .book-bg{position:absolute;inset:0;z-index:0;} .book-bg img{width:100%;height:100%;object-fit:cover;opacity:.28;} .book-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,28,43,.7),rgba(16,28,43,.92));} .book-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;} .book-price{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);color:var(--sand);} .book-price small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px;} .bookform{background:var(--sand);border:1px solid rgba(191,161,99,.28);border-radius:2px;padding:clamp(28px,3vw,42px);box-shadow:var(--shadow-lift);} .bookform .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;} .bookform label{display:block;margin-top:18px;} .bookform label:first-child,.bookform .row label{margin-top:0;} .bookform .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);} .bookform input,.bookform select,.bookform textarea{width:100%;margin-top:9px;padding:14px 4px; border:none;border-bottom:1px solid rgba(22,40,61,.28);border-radius:0;background:transparent; font-family:var(--sans);font-size:15.5px;font-weight:300;color:var(--navy);transition:border-color .35s var(--ease);appearance:none;-webkit-appearance:none;} .bookform input::placeholder,.bookform textarea::placeholder{color:rgba(90,86,72,.55);} .bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:none;border-bottom-color:var(--gold);} .bookform textarea{resize:vertical;min-height:56px;} .bookform input[type=date]{color:var(--navy);} .select-wrap{position:relative;} .select-wrap::after{content:"";position:absolute;right:6px;top:60%;width:8px;height:8px;border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:translateY(-50%) rotate(45deg);pointer-events:none;} .bookform button{width:100%;margin-top:26px;} .form-note{margin-top:16px;font-size:12px;line-height:1.6;color:var(--ink-soft);text-align:center;} @media(max-width:860px){.book-grid{grid-template-columns:1fr;}.bookform .row{grid-template-columns:1fr;}} /* footer */ .site-footer{background:var(--navy-deep);color:rgba(246,241,233,.7);padding:clamp(60px,7vw,96px) var(--pad-x) 40px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(30px,4vw,60px);} .foot-grid h4{color:var(--sand);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans);margin-bottom:18px;} .foot-grid a{color:rgba(246,241,233,.7);display:block;padding:5px 0;font-size:14px;} .foot-grid a:hover{color:var(--gold);} .foot-brand .b{font-family:var(--serif);font-size:26px;color:var(--sand);} .foot-bottom{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid rgba(246,241,233,.14); display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;letter-spacing:.04em;color:rgba(246,241,233,.5);} @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1/-1;}} /* sound toggle */ .sound-btn{position:fixed;left:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:10px; padding:11px 17px;background:rgba(19,34,52,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(191,161,99,.55);border-radius:100px;color:var(--sand);cursor:pointer; font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase; transition:opacity .3s,border-color .3s,transform .3s;box-shadow:0 8px 26px rgba(0,0,0,.22);} .sound-btn:hover{transform:translateY(-2px);border-color:var(--gold);} .sound-btn .eq{display:inline-flex;gap:2px;align-items:flex-end;height:13px;} .sound-btn .eq i{width:2px;height:5px;background:var(--gold-soft);display:block;border-radius:2px;} .sound-btn.playing .eq i{animation:eq .9s var(--ease) infinite;} .sound-btn.playing .eq i:nth-child(2){animation-delay:.15s;} .sound-btn.playing .eq i:nth-child(3){animation-delay:.3s;} .sound-btn.playing .eq i:nth-child(4){animation-delay:.45s;} @keyframes eq{0%,100%{height:4px;}50%{height:13px;}} /* lightbox */ .lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,18,28,.94);display:none;align-items:center;justify-content:center;} .lightbox.open{display:flex;} .lightbox img{max-width:90vw;max-height:86vh;object-fit:contain;border-radius:2px;} .lightbox button{position:absolute;background:rgba(246,241,233,.1);border:1px solid rgba(246,241,233,.25); color:var(--sand);width:50px;height:50px;border-radius:50%;font-family:var(--serif);font-size:26px;cursor:pointer;transition:background .25s;} .lightbox button:hover{background:var(--gold);color:var(--navy);} .lb-close{top:22px;right:26px;} .lb-prev{left:clamp(12px,3vw,40px);top:50%;transform:translateY(-50%);} .lb-next{right:clamp(12px,3vw,40px);top:50%;transform:translateY(-50%);} /* scroll progress bar */ .scroll-bar{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:90;width:0;} /* reduced motion */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;transition-duration:.06s !important;} .hero-img{transform:none;} } /* ---------- no-JS / cinematic content-visibility safety ---------- */ .no-js .film,.no-js .film-stage{height:auto !important;} .no-js .film-stage{position:static !important;} .no-js .film-scene{position:relative !important;opacity:1 !important;height:66vh;clip-path:none !important;} .no-js .film-scene .scene-img{transform:none !important;} .no-js .film-scene .scene-grade,.no-js .film-scene .scene-day{display:none !important;} .no-js .film .reveal{opacity:1 !important;transform:none !important;} .no-js .film-progress{display:none;} /* ---------- language switcher ---------- */ .bb-langsw{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans); font-size:12px;letter-spacing:.12em;color:rgba(246,241,233,.6);} .scrolled .nav-links .bb-langsw{color:rgba(92,86,72,.6);} .bb-langsw .sep{opacity:.5;} .bb-langsw span[role=button]{cursor:pointer;transition:color .3s var(--ease); color:rgba(246,241,233,.82);} .scrolled .nav-links .bb-langsw span[role=button]{color:var(--olive);} .bb-langsw span[role=button]:hover{color:var(--gold);} .bb-langsw span[role=button].active{color:var(--gold);font-weight:600;} .bb-langsw.dark{font-size:19px;letter-spacing:.1em;gap:12px;margin-top:10px;color:rgba(246,241,233,.5);} .bb-langsw.dark span[role=button]{color:rgba(246,241,233,.85);} .bb-langsw.dark span[role=button].active{color:var(--gold);} /* ---------- booking AJAX success panel ---------- */ .booksuccess{display:none;background:var(--sand);border:1px solid rgba(191,161,99,.4);border-radius:2px; padding:clamp(30px,4vw,50px);text-align:center;box-shadow:var(--shadow-lift);} .booksuccess.show{display:block;} .booksuccess .seal{width:56px;height:56px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-deep); display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;} .booksuccess h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);color:var(--navy);} .booksuccess p{margin-top:12px;color:var(--ink-soft);} /* ---------- Was in der Direktbuchung enthalten ist ---------- Nach dem Vorbild der Verfuegbarkeits-Spalte bei Booking: die Zusagen stehen direkt neben dem Preis, nicht irgendwo in den AGB. Der gruene Haken ist bewusst uebernommen - Gaeste lesen ihn als "das ist zugesagt". Alle vier Punkte stammen woertlich aus den eigenen AGB (§4, §3, §5). */ .book-assure{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid rgba(191,161,99,.3); display:grid;gap:11px;} .book-assure li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start; font-family:var(--sans);font-size:13.5px;font-weight:300;line-height:1.5;color:var(--navy);} .book-assure li::before{content:"";width:15px;height:9px;margin-top:5px; border-left:1.8px solid #3f7a55;border-bottom:1.8px solid #3f7a55; transform:rotate(-45deg);transform-origin:center;} .book-assure li b{font-weight:400;} .book-assure li.is-quiet{color:var(--ink-soft);} .book-assure li.is-quiet::before{border-color:var(--gold-deep);} @media(max-width:600px){ .book-assure{margin-top:16px;padding-top:14px;gap:9px;} .book-assure li{font-size:12.5px;} } /* ---------- Buchen oder anfragen: der Schieber unter der Karte ---------- Frueher stand hier eine mailto-Zeile. Ein Mailprogramm aufzureissen ist fuer einen Gast, der gerade buchen will, ein Bruch - und der Weg zur persoenlichen Anfrage war zu leise. Jetzt stehen beide Wege gleichwertig nebeneinander, sichtbar unter der Karte. */ .book-panel{display:flex;flex-direction:column;} .book-switch{display:none;margin-top:18px;padding:5px; border:1px solid rgba(191,161,99,.45);border-radius:2px; background:rgba(16,28,43,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .book-switch.show{display:grid;grid-template-columns:1fr 1fr;gap:5px;} .book-switch button{padding:14px 10px;border:none;border-radius:1px;cursor:pointer; background:transparent;color:rgba(246,241,233,.72); font-family:var(--sans);font-size:11.5px;font-weight:300;letter-spacing:.16em; text-transform:uppercase;line-height:1.3; transition:background .32s var(--ease),color .32s var(--ease);} .book-switch button:hover{color:var(--sand);} .book-switch button.is-on{background:var(--gold);color:var(--navy);font-weight:400;} .book-switch button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;} @media(max-width:600px){ .book-switch button{font-size:10.5px;letter-spacing:.12em;padding:13px 8px;} } /* ---------- Direktbuchung: Rahmen fuer die Smoobu Booking Engine ---------- Das Buchungstool laeuft in einem fremden iframe und bringt seine eigene, helle Gestaltung mit. Daran wird nichts manipuliert - das verbietet der Browser zu Recht und bricht bei jeder Aenderung bei Smoobu. Stattdessen bekommt es hier eine eigene helle Karte im Blue-Breeze-Rahmen, damit es auf dem dunklen Grund wie ein gewolltes Modul wirkt und nicht wie ein hineinkopierter Fremdkoerper. */ .smoobu-card{background:var(--sand);border:1px solid rgba(191,161,99,.28);border-radius:2px; padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-lift);} .smoobu-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--taupe);margin:0 0 18px;} /* Platz reservieren, damit beim Laden nichts springt. */ #apartmentIframeAll{min-height:96px;} #apartmentIframeAll iframe{width:100%;max-width:100%!important;border:0;display:block; min-height:96px;} /* Boden, falls die Hoehenmeldung des Fensters spinnt */ .smoobu-laden{display:flex;gap:6px;justify-content:center;align-items:center;height:96px;margin:-96px 0 0;} .smoobu-laden span{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.35; animation:smoobuPuls 1.2s var(--ease) infinite;} .smoobu-laden span:nth-child(2){animation-delay:.18s;} .smoobu-laden span:nth-child(3){animation-delay:.36s;} /* [hidden] allein reicht nicht: die Klassenregel oben mit display:flex ist staerker als die Browserregel fuer hidden. */ .smoobu-laden[hidden]{display:none;} /* Faellt die Buchungsmaschine aus, soll kein leerer Platzhalter stehen bleiben. */ .smoobu-card.hat-fehler #apartmentIframeAll{min-height:0;} @keyframes smoobuPuls{0%,100%{opacity:.25;transform:translateY(0);}50%{opacity:.9;transform:translateY(-4px);}} .smoobu-fb{text-align:center;padding:8px 0 4px;} .smoobu-fb p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:18px;} .smoobu-aside{margin-top:18px;font-size:12px;line-height:1.6;color:var(--ink-soft);text-align:center;} .smoobu-aside a{color:var(--gold-deep);border-bottom:1px solid rgba(191,161,99,.5);} .smoobu-aside a:hover{color:var(--navy);border-bottom-color:var(--navy);} @media(max-width:600px){ .smoobu-card{padding:18px 14px;} .smoobu-eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:14px;} } /* ---------- sticky mobile booking bar ---------- */ .mobile-book-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:58; align-items:center;justify-content:space-between;gap:14px; padding:13px 20px calc(13px + env(safe-area-inset-bottom)); background:rgba(16,28,43,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(191,161,99,.4);color:var(--sand); font-family:var(--sans);font-size:12px;letter-spacing:.06em;box-shadow:0 -10px 30px rgba(0,0,0,.3);} .mobile-book-bar span:first-child{color:rgba(246,241,233,.72);text-transform:uppercase;letter-spacing:.14em;font-size:11px;} .mobile-book-bar .cta{background:var(--gold);color:var(--navy);padding:11px 22px;border-radius:2px; letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;} @media(max-width:920px){ .mobile-book-bar{display:flex;} .sound-btn{bottom:76px;} .hero-veil{background: radial-gradient(120% 90% at 50% 6%,rgba(16,28,43,0) 20%,rgba(16,28,43,.6) 100%), linear-gradient(180deg,rgba(16,28,43,.55) 0%,rgba(16,28,43,.34) 42%,rgba(16,28,43,.5) 72%,rgba(16,28,43,.94) 100%);} } /* ---- render disclosure: architect visualisations (legal/trust) ---- */ .render-note{position:absolute;z-index:5;font-family:var(--sans);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:rgba(246,241,233,.74);background:rgba(16,28,43,.38); padding:5px 11px;border-radius:2px;backdrop-filter:blur(4px);pointer-events:none; right:var(--pad-x);bottom:28px;} .figure .cap.right{left:auto;right:16px;} @media(max-width:700px){ /* auf Mobile oben rechts unter den Header — sonst kollidiert es mit dem Scroll-Hinweis */ .render-note{right:12px;top:74px;bottom:auto;font-size:9px;letter-spacing:.13em;padding:4px 9px;} .film-stage .render-note{top:auto;bottom:12px;} .figure .cap.right{position:static;display:block;margin-top:8px;background:none;color:var(--muted);padding:0;} } @media(prefers-reduced-motion:reduce){.render-note{backdrop-filter:none;}} /* Hero: auf niedrigen Viewports Inhalt anheben, sonst ueberlappt die CTA-Zeile den Scroll-Hinweis */ /* Hero auf flachen Desktop-Viewports (Laptops) vertikal zusammenziehen */ @media(min-width:701px) and (max-height:1100px){ .hero-logo{--logo-w:min(clamp(265px,35vw,530px),38.5vh);} } @media(min-width:701px) and (max-height:920px){ .hero-logo{--logo-w:min(clamp(255px,34vw,500px),35.5vh);} } @media(min-width:701px) and (max-height:900px){ .hero-sub{margin-top:clamp(6px,1vw,12px);} .hero-descriptor{margin-top:9px;} .hero-cta{margin-top:clamp(14px,1.8vw,22px);} .hero .kicker{margin-bottom:10px;} } @media(min-width:701px) and (max-height:860px){ .hero-logo{--logo-w:min(clamp(240px,31vw,450px),34vh);} .hero-scroll .rail{height:34px;} } @media(min-width:701px) and (max-height:760px){ .hero-logo{--logo-w:min(clamp(200px,25vw,360px),27.5vh);} .hero-descriptor{font-size:13.5px;margin-top:8px;line-height:1.5;} .hero-sub{margin-top:6px;font-size:clamp(17px,1.9vw,24px);} .hero-cta{margin-top:12px;} .hero .kicker{margin-bottom:6px;} .hero-note{margin-top:7px;font-size:9.5px;letter-spacing:.12em;} } /* Custom Cursor: Geometrie liegt inline im JS (cache-fest). Hier nur, was das Stylesheet leisten muss: nativen Zeiger ausblenden. */ html.bb-cursor-on, html.bb-cursor-on *{cursor:none !important;} .btn,.nav-cta,.hero-textlink,.bs-tick{transition:transform .5s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);} @media(hover:none),(pointer:coarse){ html.bb-cursor-on,html.bb-cursor-on *{cursor:auto !important;} .bb-cur-ring,.bb-cur-dot,.bb-cur-trail{display:none !important;} } @media(prefers-reduced-motion:reduce){ .bb-cur-ring,.bb-cur-dot,.bb-cur-trail{display:none !important;} } /* ============================================================= REEL — Drohnenflug als gepinnte Vollbild-Sequenz ============================================================= */ /* ---------- Drohnenflug ---------- Das Meer liegt im Video ganz oben - ein schmales blaues Band in den obersten fuenf bis zehn Prozent des Bildes. Genau dieses Band war verschwunden, und zwar durch vier Beschnitte gleichzeitig, die sich addierten: die fest stehende Kopfzeile lag mit rund 70 px darueber, der Ausschnitt (clip-path) nahm oben nochmal bis zu 14 % weg, der Zoom war auf die Bildmitte verankert und schnitt oben weitere 8 % ab, und object-fit deckelte bei breiten Fenstern von oben und unten gleichermassen. Uebrig blieb Baustelle ohne Horizont. Die Regel jetzt: oben wird nichts mehr weggenommen. Die Buehne beginnt UNTER der Kopfzeile, der Ausschnitt oeffnet von den Seiten und von unten, und der Zoom waechst vom oberen Rand nach unten. Damit ist das Meer die letzte Zeile, die geopfert wuerde - und nicht mehr die erste. */ :root{--hdr-h:72px;} /* ---------- Drohnenflug ---------- Zwei Auftritte, und der Bildschirm entscheidet, welcher. Der Film hat das Format der Datei (1024x576 = 16:9). Auf einem breiten Bildschirm fuellt er fast die ganze Hoehe - dort lohnt sich der gepinnte Auftritt. Auf einem Telefon waere derselbe Film ein 220 px hohes Band, das mitten im Leeren steht, waehrend man 150 vh daran vorbeiscrollt. Also wird nur gepinnt, wenn das Fenster breit genug liegt; sonst steht der Film ruhig im Textfluss. Was in beiden Faellen gilt: es wird NICHTS beschnitten. Der Rahmen deckt sich exakt mit dem Bild. Im Video liegt das Meer als Band in den obersten 5 bis 12 Prozent - jeder Beschnitt oben, jeder Zoom ueber 1.0 und jede seitliche Blende trifft als Erstes den Horizont. */ .reel{position:relative;margin:clamp(40px,6vw,90px) 0;} .reel-stage{position:relative;display:grid;place-items:center;} .reel-film{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:3px;} .reel-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 0;display:block;} /* Der Schleier war oben am dunkelsten - dort, wo das Meer liegt. Jetzt traegt er nur unten, wo die Bildunterschrift steht. */ .reel-scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(16,28,43,0) 0%,rgba(16,28,43,0) 52%,rgba(16,28,43,.18) 72%,rgba(16,28,43,.78) 100%);} /* Der Rahmen lief frueher quer durch den Horizont. Die obere Kante ist jetzt offen. */ .reel-frame{position:absolute;inset:clamp(10px,1.6vw,20px);border:1px solid rgba(191,161,99,.34); border-top:none;pointer-events:none;} .reel-copy{position:absolute;left:0;right:0;bottom:clamp(16px,3vw,50px);text-align:center;padding:0 24px;} .reel-cap{font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase; color:rgba(246,241,233,.9);text-shadow:0 1px 12px rgba(8,14,22,.7);} /* Gepinnt nur, wenn der Film den Bildschirm auch fuellt. Das Seitenmass ist dafuer das ehrlichere Mass als die Breite allein: bei 13/10 ist ein 16:9-Film mindestens vier Fuenftel so hoch wie der verfuegbare Raum. */ @media (min-aspect-ratio: 13/10) and (min-width: 1000px){ .reel{height:230vh;} .reel-stage{position:sticky;top:var(--hdr-h);height:calc(100vh - var(--hdr-h));overflow:hidden;} /* Ein- und Austritt: der Ausschnitt oeffnet und schliesst NUR an der Unterkante. Oben und an den Seiten wird zu keinem Zeitpunkt etwas weggenommen - auch nicht fuer einen Sekundenbruchteil. */ /* Die Breite wird so gedeckelt, dass die Hoehe in den Raum unter der Kopfzeile passt. Ueber max-height zu gehen waere der naheliegende Weg und der falsche: der Browser kuerzt dann nur die Hoehe, die Breite bleibt stehen, das Seitenmass kippt - und object-fit schneidet prompt oben und unten ab. Auf einem 1920x1080-Schirm war der Kasten dadurch 1.90 statt 1.78 breit, und der Horizont war wieder weg. */ .reel-film{max-width:calc((100vh - var(--hdr-h)) * 16 / 9); clip-path:inset(0 0 var(--reel-inset,0%) 0 round 3px);will-change:clip-path;} } html.no-js .reel,html.reduced .reel{height:auto;margin:32px 0;} html.no-js .reel-stage,html.reduced .reel-stage{position:relative;top:0;height:auto;} html.no-js .reel-film,html.reduced .reel-film{clip-path:none;} /* Kicker mit aufziehender Goldlinie (Fortschritt kommt aus GSAP via --rule) */ .kicker.eyebrow{position:relative;} .kicker.eyebrow::after{content:"";position:absolute;left:0;bottom:-8px;height:1px; width:var(--rule,100%);max-width:64px;background:linear-gradient(90deg,var(--gold),transparent);} .section-head.center .kicker.eyebrow::after{left:50%;transform:translateX(-50%);} /* Masken-Aufzug darf nichts abschneiden */ .section-head h2{will-change:clip-path;} .trio .card,.g-item,.rhythm .item{will-change:transform,opacity;} html.reduced .section-head h2,html.no-js .section-head h2{clip-path:none !important;} html.reduced .figure,html.no-js .figure{clip-path:none !important;} /* Sehr kleine Telefone: der Scroll-Hinweis hat keinen Platz mehr neben der CTA. Auf Touch ist er ohnehin entbehrlich — Wischen ist die naheliegende Geste. */ /* Sehr kurze Telefone: die Buehne war hier schon vorher zu voll - der Aufruf reichte unter die Buchungsleiste. Enger gesetzt passt alles uebereinander, und das Scroll-Zeichen findet seinen Platz darunter. */ @media(max-width:700px) and (max-height:800px){ .hero-scroll{bottom:82px;} .hero-scroll .rail{height:26px;} .hero-logo{--logo-w:min(40vw,160px);} .hero .kicker{margin-bottom:6px;} .hero-sub{margin-top:2px;font-size:clamp(15px,4.4vw,20px);} .hero-descriptor{margin-top:6px;font-size:12.5px;line-height:1.45;} .hero-note{margin-top:6px;font-size:9px;letter-spacing:.1em;} .hero-cta{margin-top:14px;gap:12px;} .hero-cta .btn-lg{padding:12px 22px;font-size:11.5px;} } /* ============================================================= BUILD STORY — sechs Bauphasen, waagerecht schiebbar Bewusst KEIN gepinntes Scroll-Hijacking: die Seite scrollt normal weiter, die Phasen schiebt man selbst zur Seite. ============================================================= */ .bs{background:var(--sand);} .bs-layout{margin-top:clamp(32px,4.5vw,64px);} /* Leiste 01-06 als Navigation ueber dem Band */ .bs-rail{display:flex;gap:6px;align-items:center;margin-bottom:clamp(18px,2.4vw,30px);flex-wrap:wrap;} .bs-tick{appearance:none;background:none;border:0;padding:8px 14px;border-radius:100px; font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:rgba(22,40,61,.42); border:1px solid rgba(22,40,61,.14);transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);} .bs-tick:hover{color:var(--navy);border-color:rgba(191,161,99,.6);} .bs-tick.on{color:var(--sand);background:var(--navy);border-color:var(--navy);} /* Das Band selbst */ .bs-phases{display:flex;gap:clamp(20px,2.6vw,44px);overflow-x:auto;overflow-y:hidden; padding-bottom:14px;margin:0 calc(var(--pad-x) * -1);padding-inline:var(--pad-x); scrollbar-width:none;-ms-overflow-style:none;cursor:grab;} .bs-phases::-webkit-scrollbar{display:none;} .bs-phases.dragging{cursor:grabbing;} .bs-phase{flex:0 0 min(88vw,940px);display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,2.6vw,40px);align-items:start;} .bs-copy{position:static;} .bs-label{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);display:flex;align-items:center;gap:12px;} .bs-now{display:inline-block;padding:4px 10px;border-radius:100px;background:var(--navy);color:var(--sand); font-size:9.5px;letter-spacing:.16em;} .bs-title{font-family:var(--serif);font-weight:400;color:var(--navy);letter-spacing:-.01em; font-size:clamp(22px,2.4vw,34px);line-height:1.1;margin-top:14px;} .bs-text{color:var(--muted);font-family:var(--sans);font-weight:300;font-size:clamp(14px,1vw,15.5px); line-height:1.7;margin-top:14px;} .bs-hero{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:16/10;} .bs-hero img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;} .bs-hero figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--sans);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--sand);background:rgba(16,28,43,.46); padding:6px 12px;border-radius:2px;backdrop-filter:blur(4px);} .bs-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);gap:10px;margin-top:10px;} .bs-thumb{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3;margin:0;} .bs-thumb img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;} /* Hinweis, dass man schieben kann */ .bs-hint{display:flex;align-items:center;gap:10px;margin:2px 0 clamp(22px,3vw,36px);font-family:var(--sans); font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);} /* Der Hinweis zeigt die Richtung: eine goldene Marke laeuft nach rechts durch die Linie, dahinter zwei Winkel, die im selben Takt nachziehen. */ .bs-hint .line{position:relative;width:64px;height:1px;overflow:hidden; background:linear-gradient(90deg,rgba(191,161,99,.28),rgba(191,161,99,.06));} .bs-hint .line::after{content:"";position:absolute;top:0;left:0;height:100%;width:38%; background:var(--gold);box-shadow:0 0 8px rgba(191,161,99,.8); animation:bsRunRight 1.9s var(--ease) infinite;} @keyframes bsRunRight{0%{transform:translateX(-110%);}60%{transform:translateX(270%);}100%{transform:translateX(270%);}} .bs-hint .chev{display:inline-flex;gap:3px;margin-left:-4px;color:var(--gold);} .bs-hint .chev i{display:block;width:5px;height:5px;border-top:1px solid currentColor; border-right:1px solid currentColor;transform:rotate(45deg);opacity:.25; animation:bsChev 1.9s var(--ease) infinite;} .bs-hint .chev i:nth-child(2){animation-delay:.14s;} .bs-hint .chev i:nth-child(3){animation-delay:.28s;} @keyframes bsChev{0%,100%{opacity:.18;transform:rotate(45deg) translate(0,0);} 40%{opacity:1;transform:rotate(45deg) translate(1.5px,-1.5px);}} @media(prefers-reduced-motion:reduce){ .bs-hint .line::after,.bs-hint .chev i{animation:none;} .bs-hint .line::after{transform:none;} } @media(max-width:900px){ .bs-phase{flex-basis:86vw;grid-template-columns:1fr;} .bs-grid{grid-auto-columns:minmax(72px,1fr);} } /* ============================================================= AUFWERTUNG DER RESTLICHEN SEKTIONEN ============================================================= */ /* ---- Galerie: gewebte Sequenz statt gleichmaessigem Raster ---- */ .gallery figure{will-change:transform;} .gallery figure::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(16,28,43,0) 55%,rgba(16,28,43,.42) 100%); opacity:0;transition:opacity .7s var(--ease);} .gallery figure:hover::after{opacity:1;} .gallery figure::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; border:1px solid rgba(191,161,99,0);transition:border-color .6s var(--ease);} .gallery figure:hover::before{border-color:rgba(191,161,99,.55);} .gallery img{transform-origin:center;} /* ---- Zitat in der Lage-Sektion: eigenes Gewicht ---- */ .pull-quote{position:relative;font-family:var(--serif);font-weight:400;color:var(--navy); font-size:clamp(19px,1.7vw,25px);line-height:1.5;margin-top:clamp(26px,3vw,40px); padding-left:clamp(22px,2.4vw,34px);border-left:1px solid rgba(191,161,99,.5);} .pull-quote::before{content:"\201C";position:absolute;left:-2px;top:-.35em;font-size:2.6em; line-height:1;color:rgba(191,161,99,.34);} /* ---- Fakten-Zellen: Linien ziehen sich, Zahl tritt hervor ---- */ .loc-facts .cell{position:relative;transition:background .5s var(--ease);} .loc-facts .cell:hover{background:var(--sand-3,var(--sand-2));} .loc-facts .cell::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px; background:var(--gold);transform:scaleX(var(--fact,0));transform-origin:left;} /* ---- Anreise: nummerierte Etappen mit durchlaufender Linie ---- */ #getting-here .grid{position:relative;} #getting-here .grid > div{position:relative;padding-top:46px;} #getting-here .grid > div::before{counter-increment:route;content:"0" counter(route); position:absolute;top:16px;left:0;font-family:var(--sans);font-size:11px;letter-spacing:.24em; color:var(--gold);line-height:1;} #getting-here .grid{counter-reset:route;} #getting-here .grid::before{content:"";position:absolute;top:0;left:0;height:1px;width:100%; background:linear-gradient(90deg,var(--gold),rgba(191,161,99,.18)); transform:scaleX(var(--route,0));transform-origin:left;} /* ---- Ausstattung: Zellen heben sich, Zeichen glimmt ---- */ .amen .cell{position:relative;transition:background .55s var(--ease),transform .55s var(--ease);} .amen .cell:hover{background:#1b3049;transform:translateY(-4px);} .amen .cell .ic{display:inline-block;transition:transform .6s var(--ease),color .6s var(--ease);} .amen .cell:hover .ic{transform:translateY(-2px) scale(1.12);color:var(--gold);} /* ---- FAQ: ruhiges Aufklappen (Hoehe wird per JS animiert) ---- */ .faq-item{overflow:hidden;} .faq-item > summary{cursor:pointer;list-style:none;transition:color .4s var(--ease);} .faq-item > summary::-webkit-details-marker{display:none;} .faq-item .plus{display:inline-block;transition:transform .5s var(--ease),color .4s var(--ease);} .faq-item[open] .plus{transform:rotate(45deg);color:var(--gold);} .faq-item .ans{overflow:hidden;} /* ---- Buchung: Felder bekommen Fokus-Charakter ---- */ .bookform input,.bookform select,.bookform textarea{transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);} .bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:none; border-color:var(--gold);box-shadow:0 0 0 3px rgba(191,161,99,.18);} /* ---- Tastaturbedienung sichtbar machen (galt bisher nirgends) ---- */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;} /* ============================================================= RAUMGEFUEHL — Kippen, Tiefenversatz, wandernder Lichtreflex Die Zwischenebene .tilt-in traegt die Rotation, damit sie sich nicht mit den Scroll-Animationen auf demselben Element beisst. ============================================================= */ .tilt-host{perspective:1000px;} .tilt-in{position:relative;display:block;width:100%;height:100%; transform-style:preserve-3d;will-change:transform;} /* Bildinhalt sitzt hinten, Beschriftung tritt hervor */ .tilt-in > picture,.tilt-in > img{transform:translateZ(0);} .tilt-front{transform:translateZ(26px);} .tilt-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3; background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.20), rgba(255,255,255,.07) 42%, transparent 68%); mix-blend-mode:soft-light;} /* Galeriekacheln kippen zurueckhaltender, sie liegen dicht beieinander */ .gallery figure{perspective:900px;} .gallery figure .tilt-sheen{background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.24), rgba(255,255,255,.06) 45%, transparent 70%);} /* Karten der Suite: Textblock schwebt deutlicher vor dem Bild */ .trio .card .meta.tilt-front{transform:translateZ(34px);} @media(hover:none),(pointer:coarse){ .tilt-in{transform:none !important;} .tilt-sheen{display:none;} } @media(prefers-reduced-motion:reduce){ .tilt-in{transform:none !important;} .tilt-sheen{display:none;} } /* ============================================================= TAGESLICHT / ABENDLICHT AUF DRUCK Die Flaechen liegen im Tageslicht. Klick oder Fingerdruck loest einen goldenen Pulsschlag aus und faerbt das Bild ruhig in den Abend; beim Loslassen kehrt der Tag zurueck. Die Filterstufe haengt an der Variable --dl-f, damit ein einziger Uebergang auf filter beide Zustaende verbindet. ============================================================= */ /* Wo eine echte Abendaufnahme vorliegt, uebernimmt sie den Wechsel und die Farbstufen bleiben zurueckhaltend - sonst wuerde doppelt abgedunkelt. */ .dl-host .dl-night{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;opacity:0;z-index:1;transform:translateZ(0); transition:opacity .7s cubic-bezier(.3,0,.3,1);} .dl-host.dl-press .dl-night{opacity:1;transition:opacity 2.1s cubic-bezier(.42,0,.4,1);} .dl-host.has-night{--dl-f:brightness(1.04) saturate(1.02) contrast(1);} .dl-host.has-night:hover{--dl-f:brightness(1.08) saturate(1.03) contrast(1);} .dl-host.has-night.dl-press,.dl-host.has-night.dl-press:hover{ --dl-f:brightness(.94) saturate(.96) contrast(1.02);} .dl-host.has-night.dl-press .dl-dusk{opacity:.42;} .dl-host{--dl-f:brightness(1.08) saturate(1.04) contrast(.98);} .dl-host:hover{--dl-f:brightness(1.14) saturate(1.06) contrast(.98);} /* muss nach :hover stehen - gleiche Spezifitaet, Druck gewinnt ueber Reihenfolge */ .dl-host.dl-press,.dl-host.dl-press:hover{--dl-f:brightness(.62) saturate(.86) contrast(1.08);} /* Eindunkeln laeuft lang und gleichmaessig, die Rueckkehr in den Tag kurz - Loslassen soll sich wie Loslassen anfuehlen. Zwei Regeln, weil die Dauer je Richtung von der Klasse abhaengt. */ .dl-host img{filter:var(--dl-f);-webkit-touch-callout:none; transition:filter .7s cubic-bezier(.3,0,.3,1);} .dl-host.dl-press img{transition:filter 2.1s cubic-bezier(.42,0,.4,1);} .dl-dusk{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; transform:translateZ(1px);transition:opacity .7s cubic-bezier(.3,0,.3,1),box-shadow .5s var(--ease); background:linear-gradient(0deg,rgba(214,124,58,.20) 0%,rgba(214,124,58,.06) 30%,rgba(214,124,58,0) 54%), linear-gradient(180deg,rgba(22,36,64,.32) 0%,rgba(13,23,40,.62) 100%);} .dl-host.dl-press .dl-dusk{opacity:1;box-shadow:inset 0 0 0 1px rgba(191,161,99,.45); transition:opacity 2.1s cubic-bezier(.42,0,.4,1),box-shadow .5s var(--ease);} /* Lichtpunkt, der dem Zeiger folgt. Kein Ring, keine Welle - ein weicher Schein, der die Stelle waermer macht, an der man das Bild beruehrt. Position kommt ueber --px/--py (reine Zahlen) als translate3d, damit die Bewegung im Compositor bleibt; das Atmen laeuft ueber die eigenstaendige scale-Eigenschaft und ueberschreibt die Verschiebung dadurch nicht. */ .dl-beat{position:absolute;left:0;top:0;width:190px;height:190px; margin:-95px 0 0 -95px;border-radius:50%; z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen; transform:translate3d(calc(var(--px,0) * 1px), calc(var(--py,0) * 1px), 8px); background:radial-gradient(circle closest-side, rgba(255,247,232,.30) 0%, rgba(232,206,152,.19) 34%, rgba(191,161,99,.07) 62%, transparent 82%); transition:opacity .55s var(--ease);will-change:transform,opacity;} .dl-host.dl-press .dl-beat{opacity:1;animation:dlBreath 2.8s var(--ease) infinite;} @keyframes dlBreath{0%,100%{scale:.92;}50%{scale:1.10;}} @media(prefers-reduced-motion:reduce){ /* Funktion bleibt, nur ohne Puls und mit sehr kurzem, ruhigem Uebergang */ .dl-beat{display:none !important;} .dl-host img,.dl-host.dl-press img{transition:filter .2s linear;} .dl-beat{animation:none !important;} .dl-dusk,.dl-host.dl-press .dl-dusk, .dl-host .dl-night,.dl-host.dl-press .dl-night{transition:opacity .2s linear;} } /* ============================================================= FORTSCHRITTSANZEIGE — laeuft ueber die gesamte Seite mit Ersetzt den Hero-Hinweis, der nach dem ersten Bildschirm weg war. ============================================================= */ .scroll-rail{position:fixed;right:clamp(16px,2vw,30px);top:50%;transform:translateY(-50%); z-index:88;display:flex;flex-direction:column;align-items:center;gap:12px; font-family:var(--sans);font-size:10px;letter-spacing:.2em; color:var(--navy);opacity:0;transition:opacity .6s var(--ease);pointer-events:none; mix-blend-mode:difference;} .scroll-rail.on{opacity:.75;} .scroll-rail .sr-line{position:relative;width:1px;height:min(34vh,260px); background:currentColor;opacity:.28;overflow:hidden;} .scroll-rail .sr-line i{position:absolute;left:0;top:0;width:100%;height:100%; background:var(--gold);transform:scaleY(var(--p,0));transform-origin:top;} .scroll-rail .sr-num{font-variant-numeric:tabular-nums;} .scroll-rail .sr-total{opacity:.45;font-variant-numeric:tabular-nums;} @media(max-width:900px){ .scroll-rail{display:none;} } html.reduced .scroll-rail .sr-line i,html.no-js .scroll-rail{transition:none;} /* Abschlussphase: geplante Termine */ .bs-plan{background:transparent;color:var(--gold);border:1px solid rgba(191,161,99,.55);} .bs-dates{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;} .bs-dates li{display:flex;flex-direction:column;gap:3px;padding-left:16px;position:relative;} .bs-dates li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%; background:var(--gold);} .bs-dates .d{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);color:var(--navy);} .bs-dates .l{font-family:var(--sans);font-size:13px;color:var(--muted);} /* Zahlungsmittel in der Direktbuchen-Sektion */ .pay{margin-top:clamp(34px,4vw,52px);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;} .pay-label{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);} .pay-marks{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;} /* Originalzeichen von PayPal und Visa. Unterschiedliche Seitenverhaeltnisse, deshalb wird jedes einzeln auf eine optisch gleiche Groesse gesetzt statt auf dieselbe Hoehe - sonst wirkt Visa doppelt so gross. */ .pay-mark{display:block;width:auto;background:#fff;border:1px solid var(--line);border-radius:3px; padding:10px 18px;box-sizing:content-box;object-fit:contain; box-shadow:0 6px 18px rgba(22,40,61,.06);transition:transform .5s var(--ease),box-shadow .5s var(--ease);} .pay-mark[alt="PayPal"]{height:40px;padding:8px 16px;} .pay-mark[alt="Visa"]{height:22px;padding:17px 20px;} .pay-mark:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,40,61,.10);} .pay-note{font-family:var(--sans);font-weight:300;font-size:13px;color:var(--muted);max-width:46ch;} /* Feldhinweise im Buchungsformular. Sie ersetzen die Sprechblase des Browsers, die auf dem iPhone haeufig unsichtbar bleibt. */ .bookform .has-err input,.bookform .has-err textarea,.bookform .has-err select{ border-color:#b4553f;box-shadow:0 1px 0 0 #b4553f;} .bookform .field-err{margin-top:7px;font-family:var(--sans);font-size:12.5px; font-weight:400;letter-spacing:.02em;color:#b4553f;} /* Die ganze Zeile soll sich wie ein Schalter anfuehlen, nicht nur das Kalendersymbol am Rand. */ .bookform input[type=date]{cursor:pointer;} .bookform input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;} /* ---------- Direktbuchung in der Breite ---------- Solange der Gast anfragt, bleibt die Sektion zweispaltig: links der Text, rechts das Formular. Sobald er auf "Jetzt direkt buchen" umschaltet, wird aus der schmalen Spalte eine Flaeche ueber fast die volle Breite. Der Grund ist nicht Geschmack: das Buchungstool von Smoobu ordnet Anreise, Abreise, Personen und Suche selbst nebeneinander an, sobald es genug Platz hat - nachgemessen ab etwa 1100 px legt es die Felder in eine Zeile (Hoehe faellt von rund 500 px auf 109 px). In der schmalen Spalte (510 px) stapelt es. Wir aendern also nichts im fremden Fenster, wir geben ihm Platz. Die Zusage "Direkt buchen. Immer zur besten Rate." rueckt dabei nach oben und bleibt beim Buchen im Blick, statt daneben zu verschwinden. */ .book.is-wide .wrap{max-width:1560px;} .book.is-wide .book-grid{grid-template-columns:1fr;gap:clamp(28px,3.4vw,52px);align-items:start;} .book.is-wide .section-head{max-width:none; display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end; /* Nur zwischen den Spalten Luft. Ein gemeinsames gap wuerde auch zwischen Kicker, Titel und Zeile wirken - der Kopf fiele auseinander. */ column-gap:clamp(24px,4vw,72px);row-gap:0;} .book.is-wide .section-head .book-preisblock{grid-column:2;grid-row:1/span 3;align-self:end; margin-top:0;text-align:right;} .book.is-wide .section-head .book-price{white-space:nowrap;} .book.is-wide .section-head .lead{max-width:62ch;} .book.is-wide .smoobu-card{padding:clamp(24px,2.4vw,38px) clamp(26px,3vw,46px);} /* Der Schieber soll in der Breite nicht zu einem Balken ueber 1500 px werden. */ .book.is-wide .book-switch.show{max-width:520px;margin-left:auto;margin-right:auto;width:100%;} /* Unter der Suche: Schlafmoeglichkeiten und Zusagen nebeneinander. */ .book-foot{display:grid;gap:20px;} .book.is-wide .book-foot{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,3.4vw,64px);align-items:start;} .book-foot .book-assure{margin-top:0;} .book.is-wide .book-foot .book-assure{grid-template-columns:1fr 1fr;gap:11px clamp(18px,2vw,32px);} /* ---------- Schlafmoeglichkeiten ---------- Sechs Gaeste sind bei 79 m2 keine Selbstverstaendlichkeit. Wer die Personenzahl waehlt, soll vorher sehen, worauf diese Personen schlafen - zwei Doppelbetten in getrennten Schlafzimmern und eine Schlafcouch im Wohnbereich. Steht das erst im Kleingedruckten, ist es eine Ueberraschung bei der Anreise. */ .book-sleep{margin-top:20px;padding-top:18px;border-top:1px solid rgba(191,161,99,.3);} .book.is-wide .book-sleep{margin-top:0;} .book-sleep-h{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--taupe);margin:0 0 14px;} .book-sleep ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;} .book-sleep li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:baseline; font-family:var(--sans);font-size:13.5px;font-weight:300;line-height:1.5;color:var(--navy); padding-bottom:10px;border-bottom:1px solid rgba(22,40,61,.1);} .book-sleep li:last-child{border-bottom:none;padding-bottom:0;} .book-sleep li .n{font-family:var(--serif);font-size:15px;color:var(--gold-deep);} .book-sleep li .w{color:var(--ink-soft);font-size:12.5px;white-space:nowrap;} .book-sleep li b{font-weight:400;} /* Schmale Fenster: das Buchungstool stapelt dort ohnehin, also zurueck in die ruhige einspaltige Ordnung. */ @media(max-width:1024px){ .book.is-wide .section-head{grid-template-columns:1fr;align-items:start;} .book.is-wide .section-head .book-preisblock{grid-column:1;grid-row:auto;text-align:left;margin-top:22px;} .book.is-wide .book-foot{grid-template-columns:1fr;} .book.is-wide .book-foot .book-assure{grid-template-columns:1fr;} } @media(max-width:600px){ .book-sleep{margin-top:16px;padding-top:14px;} .book-sleep li{font-size:12.5px;grid-template-columns:20px 1fr;} .book-sleep li .w{grid-column:2;white-space:normal;} } /* ---------- Eroeffnungstermin ueber der Suche ---------- Das Buchungsfenster von Smoobu kennt den 01.07.2027 nicht und schlaegt beim Oeffnen heute und morgen vor. Wer das nicht weiss, sucht fuer naechste Woche und bekommt wortlos "nicht verfuegbar". Die Zeile steht deshalb ueber der Suche, nicht darunter. */ .smoobu-ab{margin:-8px 0 18px;padding:9px 12px;border-left:2px solid var(--gold); background:rgba(191,161,99,.09); font-family:var(--sans);font-size:12.5px;font-weight:300;line-height:1.5;color:var(--navy);} .smoobu-ab:empty{display:none;} @media(max-width:600px){ .smoobu-ab{font-size:11.5px;margin-bottom:14px;padding:8px 10px;} } /* ---------- Preisuebersicht pro Nacht ---------- Das Buchungsfenster von Smoobu zeigt im Datumswaehler keine Preise; im Portal gibt es dafuer keine Einstellung, und in das fremde iframe kommt man nicht hinein. Diese Uebersicht steht deshalb daneben und wird aus derselben Quelle gespeist wie die Buchung (preis.php -> Smoobu-API). Sie bucht nichts - sie erklaert den Preis, bevor der Gast darunter sucht. Seit dem 16.09.2026 steht sie VOR der Smoobu-Box. Die Trennlinie gehoert damit unter das Gitter - zwischen Preisuebersicht und Suche - statt darueber, sonst haengt sie direkt unter dem Hinweis "Buchbar ab". */ .kalender{margin:6px 0 24px;padding-bottom:22px; border-bottom:1px solid rgba(191,161,99,.3);} .kalender[hidden]{display:none;} .kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;} .kal-titel{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--taupe);margin:0;} .kal-nav{display:flex;gap:6px;} .kal-nav button{width:30px;height:30px;border:1px solid rgba(191,161,99,.45);border-radius:1px; background:transparent;color:var(--gold-deep);font-size:16px;line-height:1;cursor:pointer; transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);} .kal-nav button:hover:not(:disabled){background:var(--gold);color:var(--navy);} .kal-nav button:disabled{opacity:.3;cursor:default;} .kal-nav button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;} .kal-gitter{display:grid;gap:clamp(18px,2.4vw,38px);grid-template-columns:1fr;} .book.is-wide .kal-gitter{grid-template-columns:1fr 1fr;} .kal-monat-h{font-family:var(--serif);font-size:16px;color:var(--navy);margin:0 0 10px;} .kal-wt,.kal-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;} .kal-wt span{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--taupe);text-align:center;padding-bottom:6px;} /* Jede Zelle traegt Tag und Preis. Der Preis ist der Grund, warum es dieses Raster gibt - er steht deshalb nicht kleiner als noetig. */ .kal-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; min-height:58px;padding:5px 2px;border:1px solid transparent;border-radius:1px; background:rgba(22,40,61,.035);font-family:var(--sans);cursor:pointer; transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);} .kal-tag.is-leer{background:transparent;cursor:default;} /* Belegte und gesperrte Naechte: kein Preis, nicht anklickbar, und mit einem feinen Strich als "nicht zu haben" gekennzeichnet. Ohne den Strich sieht ein leeres Feld aus wie ein Pflegefehler statt wie eine Belegung. */ .kal-tag.is-zu{cursor:default;color:rgba(22,40,61,.3); background:repeating-linear-gradient(135deg, rgba(22,40,61,.05) 0 5px, transparent 5px 10px);} .kal-n{font-size:12.5px;font-weight:300;color:var(--navy);line-height:1.1;} .kal-tag.is-zu .kal-n{color:rgba(22,40,61,.28);} /* Frei, aber als Abreise zu frueh: der Mindestaufenthalt zur gewaehlten Anreise ist noch nicht erreicht. Bewusst OHNE Schraffur - die steht fuer "belegt". Hier ist der Tag zu haben, nur nicht als Abreisetag. */ .kal-tag.is-kurz{opacity:.34;cursor:not-allowed;} .kal-tag.is-kurz:hover{background:rgba(22,40,61,.035);border-color:transparent;} .kal-p{font-size:10.5px;font-weight:300;color:var(--gold-deep);line-height:1.1;white-space:nowrap;} button.kal-tag:hover{background:rgba(191,161,99,.2);border-color:rgba(191,161,99,.5);} /* Auswahl schlaegt Hover. Ohne die hoehere Spezifitaet gewinnt button.kal-tag:hover (0,2,1) gegen .kal-tag.is-bis (0,2,0) - der gerade angeklickte Tag verlor dann seine goldene Markierung, solange der Zeiger noch darauf stand. */ button.kal-tag.is-drin{background:rgba(191,161,99,.16);} button.kal-tag.is-von,button.kal-tag.is-bis, button.kal-tag.is-von:hover,button.kal-tag.is-bis:hover{background:var(--gold);border-color:var(--gold);} .kal-tag.is-von .kal-n,.kal-tag.is-bis .kal-n{color:var(--navy);font-weight:400;} .kal-tag.is-von .kal-p,.kal-tag.is-bis .kal-p{color:rgba(22,40,61,.75);} button.kal-tag:focus-visible{outline:2px solid var(--gold-soft);outline-offset:1px;} .kal-summe{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(22,40,61,.12); display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:baseline;} .kal-summe.is-leise{display:block;font-family:var(--sans);font-size:12px;font-weight:300; line-height:1.6;color:var(--ink-soft);} .kal-summe.is-warn{display:block;font-family:var(--sans);font-size:12.5px;color:#8a4b2a;} .kal-teil{display:flex;flex-direction:column;gap:3px;} .kal-teil-zeile{display:flex;align-items:baseline;gap:9px;} .kal-teil b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--navy);line-height:1;} /* Der Portalpreis direkt neben der eigenen Zahl. Der Unterschied gehoert dorthin, wo die Zahl steht - eine Ersparnis allein am Ende der Zeile ueberliest man. */ .kal-teil s{font-family:var(--serif);font-size:15px;line-height:1; color:rgba(22,40,61,.42);text-decoration:line-through; text-decoration-thickness:1px;text-decoration-color:rgba(138,75,42,.6);} .kal-teil small{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--taupe);} .kal-warn{flex-basis:100%;margin:4px 0 0;font-family:var(--sans);font-size:12px;color:#8a4b2a;} @media(max-width:600px){ .kalender{margin:4px 0 18px;padding-bottom:16px;} .kal-tag{min-height:42px;} .kal-p{font-size:9.5px;} .kal-teil b{font-size:19px;} .kal-teil s{font-size:13px;} .kal-teil-zeile{gap:7px;} } .kal-fuss{margin:12px 0 0;font-family:var(--sans);font-size:11.5px;font-weight:300; line-height:1.6;color:var(--ink-soft);} /* ---------- Preis mit Begruendung ---------- Eine Zahl allein sagt nicht, warum sie gut ist. Direkt unter dem Preis steht deshalb, was derselbe Aufenthalt auf den Buchungsportalen kostet. Bewusst ohne Logos und ohne die Namen der Portale: fremde Marken auf der eigenen Seite sind markenrechtlich heikel (§14 MarkenG, §6 UWG), und die Prozentzahlen stammen aus den eigenen Kanalaufschlaegen in Smoobu - sie sind nachpruefbar und tragen die Aussage allein. */ .book-preisblock{margin-top:26px;} .book-vergleich{margin-top:20px;padding-top:16px; border-top:1px solid rgba(191,161,99,.32); max-width:340px;} /* Die Trennlinie gehoert unter die Preiskachel. Ist die Kachel versteckt (js/preis.js, AB_PREIS = false), haengt sie oben frei in der Luft - dann faellt sie mit weg. Kommt der Preis zurueck, kommt sie von selbst wieder. */ #book .book-price[hidden] + .book-vergleich{border-top:0;padding-top:0;margin-top:0;} .book.is-wide .section-head .book-vergleich{margin-left:auto;} @media(max-width:1024px){.book.is-wide .section-head .book-vergleich{margin-left:0;}} .bv-k{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-soft);margin:0 0 8px;} .bv-z{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1; color:var(--sand);margin:0;} .bv-s{font-family:var(--sans);font-size:12.5px;font-weight:300; color:rgba(246,241,233,.66);margin:6px 0 0;} .bv-q{font-family:var(--sans);font-size:12px;font-weight:300;line-height:1.6; color:rgba(246,241,233,.5);margin:12px 0 0;} @media(max-width:600px){ .book-vergleich{margin-top:16px;padding-top:14px;max-width:none;} .bv-z{font-size:22px;} .bv-q{font-size:11.5px;} } /* ---------- Portalpreis und Ersparnis ---------- Unter jedem Direktpreis steht derselbe Tag zum teuersten Portalpreis, durchgestrichen. Das ist kein fremder Preis, sondern unser eigener Preis auf dem Portal - deshalb darf er so gezeigt werden, und deshalb ist er belegbar. */ .kal-po{font-size:9.5px;font-weight:300;line-height:1.1;white-space:nowrap; color:rgba(22,40,61,.42);text-decoration:line-through; text-decoration-thickness:1px;text-decoration-color:rgba(138,75,42,.55);} .kal-tag.is-von .kal-po,.kal-tag.is-bis .kal-po{color:rgba(22,40,61,.55);} .kal-teil.is-spar b{color:var(--gold-deep);} .kal-teil.is-spar small{color:var(--gold-deep);} .kal-spar-note{flex-basis:100%;margin:6px 0 0;font-family:var(--sans);font-size:11.5px; font-weight:300;line-height:1.6;color:var(--ink-soft);} @media(max-width:600px){ .kal-tag{min-height:54px;} .kal-po{font-size:8.5px;} .kal-spar-note{font-size:11px;} } /* ---------- Vorschau-Markierung ---------- Erscheint nur, wenn die Direktbuchung ueber ?smoobu=1 vorab sichtbar gemacht wurde. Am 02.09. wurde ein Vorschaustand fuer den Live-Stand gehalten, weil der Schalter in der Browsersitzung haengen blieb - ohne Markierung ist beides nicht zu unterscheiden. */ #bb-vorschau{position:fixed;left:0;right:0;bottom:0;z-index:9000; padding:9px 14px;text-align:center; background:#8a4b2a;color:#fff; font-family:var(--sans);font-size:11.5px;font-weight:400; letter-spacing:.14em;text-transform:uppercase; pointer-events:none;} @media(max-width:600px){ #bb-vorschau{font-size:10px;letter-spacing:.1em;padding:7px 10px;bottom:64px;} } /* ---------- Film-Journey: Kapitelschrift in Masken ---------- Jede Zeile sitzt in einem Rahmen mit overflow:hidden, der Text faehrt dahinter hervor statt einzublenden. Reines transform - kein Layout, kein Neuzeichnen, auch auf dem Telefon fluessig. Die Rahmen entstehen erst zur Laufzeit (experience.js); ohne JavaScript bleibt der Text normal stehen. */ .film-caption .msk{display:block;overflow:hidden;padding-bottom:.08em;} .film-caption .msk-i{display:block;will-change:transform;} .film-caption{will-change:transform;} /* Der Auftritt gehoert der Maske. Ohne das haette die alte reveal-Regel die Zeilen schon vorher unsichtbar gemacht und der Auftritt liefe ins Leere. */ .film-caption .reveal{opacity:1;transform:none;} /* ---------- Kapitelziffer an der Fortschrittsleiste ---------- Eine mitzaehlende Zahl gibt der Journey Ordnung: der Gast sieht, wo er steht und wie viel noch kommt. */ .film-num{display:block;font-family:var(--serif);font-size:clamp(26px,2.6vw,40px); line-height:1;color:var(--sand);opacity:.9;margin-bottom:14px; letter-spacing:.02em;font-variant-numeric:tabular-nums;will-change:transform;} .film-progress{align-items:flex-end;} @media(max-width:860px){ .film-num{font-size:22px;margin-bottom:10px;} } /* Ohne JavaScript und bei reduzierter Bewegung nichts Halbfertiges zeigen. */ .no-js .film-num{display:none;} @media (prefers-reduced-motion: reduce){ .film-caption .msk-i{transform:none !important;} .film-caption{transform:none !important;} } /* ---------- Kapitelname Wort fuer Wort ---------- .wsrc traegt den Originaltext und bleibt im DOM - daran haengt die Uebersetzung, und Screenreader lesen ihn. Sichtbar ist die Ebene .wlay aus einzelnen Woertern, die nach jedem Sprachwechsel neu entsteht. */ .film-chapter{position:relative;} .film-chapter .wsrc{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;} .film-chapter .wlay{display:block;} .film-chapter .wmsk{display:inline-block;overflow:hidden;vertical-align:bottom; padding-bottom:.1em;padding-right:.02em;} .film-chapter .wtxt{display:inline-block;will-change:transform;transform-origin:0 100%;} /* ---------- Kinobalken ---------- Zwei schmale Streifen, die beim Eintritt in die Journey auffahren und am Ende wieder zugehen. Sie machen aus einer Bilderfolge einen Film. */ .film-bar{position:absolute;left:0;right:0;height:0;z-index:6; background:var(--navy-deep);pointer-events:none;will-change:height;} .film-bar-top{top:0;} .film-bar-bottom{bottom:0;} .no-js .film-bar{display:none;} @media (prefers-reduced-motion: reduce){ .film-bar{display:none;} .film-chapter .wtxt{transform:none !important;} } /* Der Hero schliesst sich am Ende zu einem Spalt - dafuer braucht die Buehne einen eigenen Kompositionslayer, sonst ruckelt der Verschluss. */ .hero-stage{will-change:clip-path;} .hero-img{will-change:transform,filter;} @media (prefers-reduced-motion: reduce){ .hero-stage{clip-path:none !important;} .hero-img{filter:none !important;} } /* ===================================================================== BUCHUNGSBEREICH — auf das Niveau der Journey gehoben --------------------------------------------------------------------- Ausgangslage: die Journey ist ein Film, der Buchungsbereich war ein Formular. Beides auf einer Seite liest sich, als haetten zwei Buros daran gearbeitet. Dieser Block schliesst die Luecke - mit denselben Mitteln wie die Journey: Masken statt Einblendungen, ein Wisch statt eines Auftauchens, reine transform- und clip-path-Bewegung. Nichts hiervon aendert Text. Die Uebersetzung haengt an exakten Zeichenketten - eine geaenderte Ueberschrift wuerde die deutsche und griechische Fassung stillschweigend zerreissen. ===================================================================== */ /* ---------- Masken allgemein ---------- Bisher galten diese Regeln nur in der Journey. Die Auftritte dort und hier sollen dieselben sein, also gehoert die Mechanik nach oben. Die engeren Journey-Regeln bleiben bestehen und gewinnen wie bisher. */ .msk{display:block;overflow:hidden;padding-bottom:.08em;} .msk-i{display:block;will-change:transform;} .wsrc{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;} .wlay{display:block;} .wmsk{display:inline-block;overflow:hidden;vertical-align:bottom; padding-bottom:.1em;padding-right:.02em;} .wtxt{display:inline-block;will-change:transform;transform-origin:0 100%;} /* ---------- Der Hintergrund darf wieder da sein ---------- Vorher: Bild auf 28 % Deckkraft unter einem fast undurchsichtigen Verlauf - uebrig blieb ein brauner Schleier, der nichts zeigte und nichts trug. Jetzt traegt der Verlauf die Lesbarkeit dort, wo Text steht (links), und laesst das Bild dort atmen, wo keiner steht. */ .book-bg img{opacity:.5;will-change:transform;} .book-bg::after{background: radial-gradient(120% 86% at 86% 6%, rgba(191,161,99,.15), transparent 58%), linear-gradient(102deg, rgba(16,28,43,.95) 0%, rgba(16,28,43,.9) 36%, rgba(16,28,43,.66) 70%, rgba(16,28,43,.52) 100%);} @media(max-width:860px){ /* Schmal steht der Text ueber dem ganzen Bild, nicht daneben - also muss der Verlauf von oben nach unten tragen. */ .book-bg img{opacity:.42;} .book-bg::after{background: radial-gradient(110% 60% at 70% 2%, rgba(191,161,99,.13), transparent 60%), linear-gradient(180deg, rgba(16,28,43,.93) 0%, rgba(16,28,43,.88) 46%, rgba(16,28,43,.94) 100%);} } /* Eine feine Linie oben, wie der Anschnitt eines Buchkapitels. */ .book::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,rgba(191,161,99,.45),transparent);} /* ---------- Preis und Vergleich: eine klare Rangfolge ---------- Vorher standen beide Zahlen in derselben Schrift, fast gleich gross und gleich hell - der Blick musste sich entscheiden und blieb an der falschen haengen. Unser Preis ist jetzt die groesste Zahl der Seite, der Portalaufschlag daneben ruhig und praezise. */ #book .book-price{font-size:clamp(42px,5vw,66px);line-height:.94;letter-spacing:-.015em;} #book .book-price small{margin-bottom:12px;} #book .bv-z{font-size:clamp(19px,1.7vw,23px);color:rgba(246,241,233,.74); letter-spacing:.01em;font-variant-numeric:tabular-nums;} #book .book-vergleich{margin-top:22px;padding-top:18px;} @media(max-width:600px){ #book .book-price{font-size:clamp(38px,12vw,48px);} #book .bv-z{font-size:19px;} } /* ---------- Das Formular als gefasstes Objekt ---------- Eine cremefarbene Flaeche ist noch kein Objekt. Zwei Dinge machen den Unterschied: eine Haarlinie, die die Flaeche fasst, und zwei Eckwinkel, die sie im Raum verankern - dasselbe Vokabular wie die Kinobalken der Journey, nur still. */ .bookform{position:relative; box-shadow:var(--shadow-lift),inset 0 0 0 1px rgba(191,161,99,.16);} .bookform::before,.bookform::after{content:"";position:absolute;width:22px;height:22px; pointer-events:none;opacity:.55;} .bookform::before{top:13px;left:13px; border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);} .bookform::after{bottom:13px;right:13px; border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);} /* Engerer Takt. Vorher trug das Formular auf dem Telefon ueber 1.200 px Hoehe fuer sechs Felder - das liest sich als Behoerdenbogen, nicht als Reservierung. */ .bookform label{margin-top:15px;} .bookform .row{gap:16px;margin-top:15px;} .bookform input,.bookform select,.bookform textarea{margin-top:7px;padding:12px 2px;} .bookform textarea{min-height:46px;height:46px; transition:height .45s var(--ease),border-color .35s var(--ease);} .bookform textarea:focus{height:104px;} /* Die Unterlinie faehrt beim Fokus von links ein, statt nur die Farbe zu wechseln. Ein Detail, das man nicht benennt und trotzdem bemerkt. */ .bookform label{position:relative;} .bookform label::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0; background:var(--gold);transition:width .5s var(--ease);pointer-events:none;} .bookform label:focus-within::after{width:100%;} /* Die Schaltflaeche bekommt einen Lichtstreif, der einmal darueber laeuft - dieselbe Idee wie der Wisch zwischen zwei Szenen. */ .bookform button{position:relative;overflow:hidden;margin-top:24px; letter-spacing:.16em;} .bookform button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transform:translateX(0);transition:transform .85s var(--ease);pointer-events:none;} .bookform button:hover::after{transform:translateX(360%);} .form-note{margin-top:14px;font-size:11.5px;letter-spacing:.02em; color:rgba(90,86,72,.8);} /* ---------- Auftritt ---------- Ausgangszustaende. Sie stehen im CSS und nicht im Skript, damit nichts sichtbar springt, bevor GSAP laeuft. Ohne JavaScript oder bei reduzierter Bewegung greift die Regel darunter und alles steht sofort. */ .book-panel .bookform{clip-path:inset(0 0 100% 0);} .no-js .book-panel .bookform,html.reduced .book-panel .bookform{clip-path:none !important;} @media (prefers-reduced-motion: reduce){ .book-panel .bookform{clip-path:none !important;} .bookform button::after{display:none;} .book-bg img{transform:none !important;} } /* ---------- Schmale Ansicht: Luft rausnehmen ---------- */ @media(max-width:860px){ .book-grid{gap:clamp(26px,6vw,40px);} #book .book-preisblock{margin-top:20px;} .bookform{padding:clamp(24px,6vw,32px) clamp(20px,5vw,28px);} .bookform::before{top:10px;left:10px;} .bookform::after{bottom:10px;right:10px;} } /* ===================================================================== ANFRAGEKALENDER (js/anfrage.js) --------------------------------------------------------------------- Eigener Belegungskalender im Buchungsbereich. Er steht dort, wo bis zum 14.09.2026 das Fenster von Smoobu stand, und uebernimmt dessen Aufgabe fuer die Zeit ohne Zahlungsanbieter: Belegung zeigen, Zeitraum waehlen lassen, anfragen - nicht buchen. Gestaltung wie das Formular daneben: helle Sandkarte auf dem dunklen Buchungsbereich, goldene Kante, gleiche Typografie. Der Kalender soll nicht wie ein Fremdkoerper wirken, sondern wie die erste Haelfte desselben Formulars. ===================================================================== */ .anfrage{background:var(--sand);border:1px solid rgba(191,161,99,.28);border-radius:2px; padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow-lift);position:relative; animation:anf-auf .7s var(--ease) both;} @keyframes anf-auf{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} html.reduced .anfrage{animation:none;} /* Bewusst OHNE die goldenen Ecken des Formulars: zwei Karten uebereinander mit denselben Ecken sind unruhig, und die untere Ecke lag genau auf dem Knopf "Anfragen". Die Karten gehoeren ueber Rahmen, Grund und Typografie zusammen - das reicht. */ .anf-eyebrow{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-deep);margin:0 0 18px;} .anf-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;} .anf-titel{margin:0;flex:1;} .anf-nav button{appearance:none;background:transparent;border:1px solid rgba(191,161,99,.35); color:var(--navy);width:36px;height:36px;border-radius:2px;cursor:pointer; font-size:17px;line-height:1;display:grid;place-items:center; transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);} .anf-nav button:hover:not(:disabled){background:rgba(191,161,99,.14);border-color:var(--gold);} .anf-nav button:disabled{opacity:.22;cursor:default;} .anf-monate{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,34px);} @media(min-width:720px){.anf-monate{grid-template-columns:1fr 1fr;}} .anf-monat-h{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);color:var(--navy); margin:0 0 12px;text-align:center;letter-spacing:.01em;} .anf-wochentage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px;} .anf-wochentage span{text-align:center;font-family:var(--sans);font-size:10.5px;font-weight:400; letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);} .anf-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;} .anf-leer{display:block;} /* Eine Nacht. Quadratisch, damit die Spalten unabhaengig von der Schriftgroesse ausgerichtet bleiben. */ .anf-tag{appearance:none;background:transparent;border:0;padding:0;cursor:pointer; aspect-ratio:1/1;display:grid;place-items:center;position:relative; font-family:var(--sans);font-size:clamp(13px,1.05vw,14.5px);font-weight:300; color:var(--navy);border-radius:2px; transition:background .25s var(--ease),color .25s var(--ease);} .anf-tag:hover:not(:disabled){background:rgba(191,161,99,.16);} /* Ausserhalb des Fensters: da war nie etwas zu holen, also auch kein Hinweis - nur still zurueckgenommen. */ .anf-tag.ist-aus{color:rgba(22,40,61,.2);cursor:default;} /* Belegt. Der Strich ist wichtiger als die Farbe: er ist auch dann eindeutig, wenn jemand Farben schlecht unterscheidet. */ .anf-tag.ist-belegt{color:rgba(22,40,61,.28);cursor:default;} .anf-tag.ist-belegt::after{content:"";position:absolute;left:22%;right:22%;top:50%; height:1px;background:rgba(22,40,61,.34);transform:rotate(-16deg);} /* Belegte Nacht, auf der aber abgereist werden darf - wer am 24. abreist, stoert die Buchung nicht, die am 24. anreist. */ .anf-tag.ist-nur-ab{cursor:pointer;color:rgba(22,40,61,.55);} .anf-tag.ist-schwebe{background:rgba(191,161,99,.16);} .anf-tag.ist-drin{background:rgba(191,161,99,.2);} .anf-tag.ist-an,.anf-tag.ist-ab,.anf-tag.ist-schwebe-ende{ background:var(--gold);color:var(--navy);font-weight:400;} .anf-tag.ist-an{border-top-right-radius:0;border-bottom-right-radius:0;} .anf-tag.ist-ab{border-top-left-radius:0;border-bottom-left-radius:0;} /* --------------------------------------------------------------------- Tagespreise im Raster --------------------------------------------------------------------- Aufbau wie auf den Buchungsportalen: Tageszahl, darunter der Preis pro Nacht, darunter derselbe Preis beim teuersten Portal, durchgestrichen. Die Klasse "hat-preise" setzt js/anfrage.js erst, wenn preis.php wirklich Preise geliefert hat - ohne Schluessel bleibt das schlanke Raster von vorher stehen, statt dass leere Zeilen Platz reservieren. */ .anfrage.hat-preise .anf-tag{aspect-ratio:auto;min-height:58px;padding:6px 2px 5px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;} .anf-tag .at-nr{line-height:1.1;} .anfrage.hat-preise .anf-tag .at-nr{font-size:clamp(12px,1vw,13.5px);} .anf-tag .at-p{font-family:var(--sans);font-size:clamp(9.5px,.8vw,11px);font-weight:400; line-height:1.15;color:var(--navy);white-space:nowrap;} .anf-tag .at-alt{font-family:var(--sans);font-size:clamp(8.5px,.72vw,9.5px);font-weight:300; line-height:1.15;color:var(--taupe);white-space:nowrap; text-decoration:line-through;text-decoration-thickness:1px;} /* Auf der goldenen Auswahl braucht der kleine Text mehr Kontrast. */ .anf-tag.ist-an .at-p,.anf-tag.ist-ab .at-p,.anf-tag.ist-schwebe-ende .at-p{color:var(--navy);} .anf-tag.ist-an .at-alt,.anf-tag.ist-ab .at-alt,.anf-tag.ist-schwebe-ende .at-alt{color:rgba(22,40,61,.62);} /* Belegte Naechte tragen keinen Preis. Der Diagonalstrich der schlanken Ansicht saesse in der hohen Zelle unter der Zahl im Leeren - also hier die Zahl selbst durchstreichen. */ .anfrage.hat-preise .anf-tag.ist-belegt::after{display:none;} .anfrage.hat-preise .anf-tag.ist-belegt .at-nr{text-decoration:line-through; text-decoration-thickness:1px;text-decoration-color:rgba(22,40,61,.45);} /* Mit drei Zeilen je Zelle brauchen die Monate mehr Breite. */ .book.is-wide .anfrage.hat-preise .anf-monat{max-width:440px;} .anfrage.hat-preise .anf-gitter{gap:3px;} .anf-legende{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:20px 0 0; font-family:var(--sans);font-size:12px;font-weight:300;color:var(--ink-soft);} .anf-legende span{display:inline-flex;align-items:center;gap:8px;} .anf-legende .lg-frei::before,.anf-legende .lg-belegt::before{content:"";width:13px;height:13px; border-radius:2px;flex:0 0 auto;} .anf-legende .lg-frei::before{background:rgba(191,161,99,.28);} .anf-legende .lg-belegt::before{background:rgba(22,40,61,.12); background-image:linear-gradient(-16deg,transparent 45%,rgba(22,40,61,.4) 45%,rgba(22,40,61,.4) 55%,transparent 55%);} /* Wenn die Belegung nicht erreichbar war, steht hier ehrlich, dass sie persoenlich bestaetigt wird - lieber das als ein Kalender, der so tut, als waere alles frei. */ .anf-legende .lg-offen{color:var(--gold-deep);} .anf-wahl{margin-top:22px;padding-top:20px;border-top:1px solid rgba(191,161,99,.25); display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;} .anf-zeitraum{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:300;color:var(--ink-soft);} .anf-zeitraum.is-da{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);color:var(--navy);} .anf-wahl-text{min-width:0;} .anf-cta{flex:0 0 auto;} /* --------------------------------------------------------------------- Preis unter dem Kalender --------------------------------------------------------------------- Kommt aus preis-anfrage.php und damit aus Smoobu. Die Summe steht gross, der Nachtpreis und die Anzahlung leise daneben - der Gast entscheidet nach der Summe, prueft aber am Nachtpreis. */ .anf-preis{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; font-family:var(--sans);font-size:13px;font-weight:300;color:var(--ink-soft);} .anf-preis .ap-summe{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);color:var(--navy); line-height:1.05;} /* Der durchgestrichene Portalpreis. Er steht VOR dem eigenen Preis, so wie auf den Portalen selbst - erst die Zahl, die man kennt, dann die bessere. Der Strich liegt auf halber Hoehe und ist deutlich genug, um ohne Farbe zu funktionieren. */ .anf-preis .ap-alt{font-family:var(--serif);font-size:clamp(17px,1.6vw,21px); color:var(--taupe);text-decoration:line-through;text-decoration-thickness:1px; text-decoration-color:rgba(138,127,102,.75);line-height:1.05;} .anf-preis .ap-je::before,.anf-preis .ap-anz::before{content:"·";margin-right:14px;opacity:.5;} .anf-preis .ap-je:first-child::before,.anf-preis .ap-anz:first-child::before{content:none;margin:0;} /* Die Ersparnis bekommt eine eigene Zeile - sie ist das Argument, nicht eine Fussnote neben drei anderen Zahlen. */ .anf-preis .ap-sparen{flex-basis:100%;margin-top:2px;color:var(--gold-deep);font-size:13px;} /* Zwischenzustand und ehrliche Absagen: leiser als eine Zahl, aber lesbar. */ .anf-preis.ist-still{color:var(--taupe);font-size:13px;} .anf-preis.ist-warnung{color:var(--gold-deep);} /* Derselbe Preis noch einmal im Anfragefenster, direkt unter dem Zeitraum. */ .af-preis{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; font-family:var(--sans);font-size:13px;font-weight:300;color:var(--ink-soft);} .af-preis .afp-summe{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);color:var(--gold-deep); line-height:1.05;} .af-preis .afp-alt{font-family:var(--serif);font-size:clamp(16px,1.5vw,19px); color:var(--taupe);text-decoration:line-through;text-decoration-thickness:1px; text-decoration-color:rgba(138,127,102,.75);line-height:1.05;} .af-preis .afp-je::before,.af-preis .afp-anz::before{content:"·";margin-right:14px;opacity:.5;} .af-preis .afp-sparen{flex-basis:100%;margin-top:2px;color:var(--gold-deep);font-size:13px;} .af-preis.ist-still{color:var(--taupe);} .anf-cta:disabled{opacity:.4;cursor:default;transform:none;} .anf-cta:disabled:hover{background:var(--gold);transform:none;} @media(max-width:520px){ .anf-wahl{flex-direction:column;align-items:stretch;} .anf-cta{width:100%;} } /* --------------------------------------------------------------------- Breite Ansicht: der Kalender bekommt die ganze Flaeche --------------------------------------------------------------------- js/anfrage.js setzt .is-wide auf #book. Die Regeln dafuer stehen weiter oben (sie stammen aus der Zeit der Buchungsmaschine und gelten unveraendert): Ueberschrift und Preisvergleich nebeneinander, darunter eine Flaeche ueber fast die volle Breite. Hier nur, was der Kalender zusaetzlich braucht. */ .book.is-wide .anfrage{padding:clamp(26px,2.4vw,40px) clamp(28px,3vw,48px);} .book.is-wide .anf-monate{gap:clamp(24px,2.6vw,44px);} /* Die Tage sind quadratisch. Ohne Begrenzung wuerde bei drei Monaten auf 1560 px jede Spalte rund 430 px breit - die Zellen waeren dann 60 px hoch und der Kalender ueber 700 px lang. Die Monate bekommen deshalb eine Hoechstbreite und stehen mittig in ihrer Spalte. */ .book.is-wide .anf-monat{max-width:330px;margin-inline:auto;width:100%;} .book.is-wide .anf-wahl{margin-top:26px;padding-top:24px;} /* --------------------------------------------------------------------- Das Anfragefenster --------------------------------------------------------------------- Es liegt ueber der Seite, dort wo der Blick nach dem Klick ohnehin ist. Ein Formular unter dem Kalender waere in der breiten Ansicht eine schmale Spalte in einer weiten Flaeche gewesen - und der Gast haette nach dem Klick erst scrollen muessen, um zu sehen, dass etwas passiert ist. */ .anf-fenster{position:fixed;inset:0;z-index:2000;display:grid;place-items:center; padding:clamp(16px,3vw,40px);} /* display:grid schlaegt die eingebaute Regel [hidden]{display:none}. Ohne diese Zeile liegt das geschlossene Fenster unsichtbar ueber der ganzen Seite und faengt jeden Klick ab - dieselbe Falle wie bei .bookform .row weiter unten. */ .anf-fenster[hidden]{display:none;} .af-hg{position:absolute;inset:0;background:rgba(16,28,43,.72); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;transition:opacity .32s var(--ease);} .anf-fenster.is-auf .af-hg{opacity:1;} .af-karte{position:relative;z-index:1;width:min(1080px,100%);max-height:calc(100vh - clamp(32px,6vw,80px)); overflow-y:auto;-webkit-overflow-scrolling:touch; background:var(--sand);border:1px solid rgba(191,161,99,.3);border-radius:2px; padding:clamp(28px,3vw,52px) clamp(24px,3.2vw,56px); box-shadow:0 40px 120px rgba(16,28,43,.45); opacity:0;transform:translateY(18px) scale(.985); transition:opacity .34s var(--ease),transform .34s var(--ease);} .anf-fenster.is-auf .af-karte{opacity:1;transform:none;} html.reduced .af-hg,html.reduced .af-karte{transition:none;} .af-zu{position:absolute;top:12px;right:14px;appearance:none;background:transparent;border:0; font-size:26px;line-height:1;color:var(--taupe);cursor:pointer;padding:6px 10px; transition:color .3s var(--ease);} .af-zu:hover{color:var(--navy);} .af-kicker{margin:0;font-family:var(--sans);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-deep);} .af-h{margin:10px 0 0;font-family:var(--serif);font-size:clamp(24px,2.8vw,36px);color:var(--navy); font-weight:400;line-height:1.12;} .af-hin{margin:12px 0 0;max-width:62ch;font-family:var(--sans);font-size:14.5px;font-weight:300; line-height:1.7;color:var(--ink-soft);} .af-koerper{margin-top:clamp(22px,2.4vw,34px);} /* Das Formular im Fenster: die Felder nebeneinander statt uebereinander. Die Marken (.f-guests und so weiter) setzt js/anfrage.js beim Oeffnen - ueber die Stellung im DOM zu gehen waere zerbrechlich gewesen. */ .af-koerper .bookform{background:transparent;border:0;box-shadow:none;padding:0; display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,2fr); column-gap:clamp(20px,2.4vw,40px);row-gap:clamp(16px,1.8vw,24px);align-items:start;} .af-koerper .bookform::before,.af-koerper .bookform::after{display:none;} .af-koerper .bookform > *{margin-top:0;} .af-koerper .bookform .f-guests{grid-column:1;} .af-koerper .bookform .f-kontakt{grid-column:2;margin-top:0;} .af-koerper .bookform .f-msg{grid-column:1/-1;} .af-koerper .bookform .f-send{grid-column:1;width:100%;margin-top:4px;} .af-koerper .bookform .f-note{grid-column:2;align-self:center;margin:4px 0 0;text-align:left;} .af-koerper .bookform textarea{min-height:56px;height:56px;} .af-koerper .bookform textarea:focus{height:104px;} .af-koerper .booksuccess{margin:0;} /* Schmal: wieder untereinander. Nebeneinander waeren die Felder hier schmaler als die Tastatur, die sie befuellt. */ @media(max-width:760px){ .af-karte{padding:clamp(24px,5vw,34px) clamp(20px,5vw,30px);} .af-koerper .bookform{grid-template-columns:1fr;row-gap:16px;} .af-koerper .bookform .f-guests, .af-koerper .bookform .f-kontakt, .af-koerper .bookform .f-send, .af-koerper .bookform .f-note{grid-column:1;} .af-koerper .bookform .f-kontakt{grid-template-columns:1fr;gap:16px;} .af-koerper .bookform .f-note{text-align:center;} } /* Solange das Fenster offen ist, soll die Seite darunter nicht mitlaufen. */ html.af-offen,html.af-offen body{overflow:hidden;} /* .bookform .row setzt display:grid und schlaegt damit die eingebaute Regel [hidden]{display:none}. Ohne diese Zeile blieben die beiden Datumsfelder sichtbar und von Hand befuellbar - genau die Luecke, durch die am 14.09.2026 eine Anfrage fuer einen vergebenen Zeitraum kam. */ .bookform .row[hidden]{display:none;} /* ============================================================= STRAENDE — waagerechtes Band, 17.09.2026 ------------------------------------------------------------- Nutzt bewusst die Bausteine der Baugeschichte (.bs-rail, .bs-hint, .bs-phases, .bs-phase, .bs-copy, .bs-hero). Hier steht nur, was sich unterscheidet: die Windregel-Karte, Panels ohne Foto, Hinweiskaesten im Panel, der Quellennachweis unter dem Bild und der Vergleich, der auf dem Telefon zu Karten wird. ============================================================= */ .bb{background:var(--sand);} /* ---- Die eine Entscheidung am Morgen ---- */ .bb-wind{background:var(--navy);color:var(--sand);border-radius:3px; padding:clamp(22px,2.6vw,36px);margin-top:clamp(26px,3vw,40px);max-width:760px;} .bb-wind-kicker{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);margin:0 0 14px;} .bb-wind dl{margin:0;} .bb-wind-row{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0; border-top:1px solid rgba(246,241,233,.16);} .bb-wind-row:first-of-type{border-top:0;padding-top:0;} .bb-wind dt{font-family:var(--serif);font-size:clamp(17px,1.4vw,20px);color:#fff;} .bb-wind dd{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(13.5px,1vw,15px); color:rgba(246,241,233,.72);} .bb-wind-go{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);color:var(--gold-soft);} .bb-wind-go::before{content:"\2192\00a0";} .bb-wind-foot{margin:16px 0 0;font-family:var(--sans);font-weight:300; font-size:clamp(13px,.95vw,14.5px);line-height:1.65;color:rgba(246,241,233,.6);} @media(min-width:620px){ .bb-wind-row{grid-template-columns:1fr auto;align-items:baseline;gap:20px;} .bb-wind-go{text-align:right;} } /* ---- Laufende Nummer im Panel ---- Die Leiste zaehlt 01 bis 07, die Panels taten es nicht - man sah also nicht, bei welchem der sieben man gerade ist. Die Baugeschichte macht es mit "Phase 01" vor; hier steht die blosse Ziffer vor Kueste und Entfernung. .bs-label ist ein Flex-Element, die Ziffer setzt sich also von selbst davor; der kurze Strich trennt sie von der Ortsangabe. */ .bs-label .bb-nr{font-weight:500;color:var(--gold);position:relative;padding-right:14px;} .bs-label .bb-nr::after{content:"";position:absolute;right:0;top:50%;width:8px;height:1px; background:rgba(191,161,99,.55);} /* ---- Panel: Untertitel, Hinweiskaesten, Quellennachweis ---- */ .bb-sub{font-family:var(--sans);font-weight:500;font-size:clamp(13px,1vw,14.5px); letter-spacing:.02em;color:var(--gold-deep);margin-top:8px;} .bb-warn,.bb-tip{font-family:var(--sans);font-weight:300;font-size:clamp(13px,.95vw,14.5px); line-height:1.65;margin-top:16px;padding:12px 16px;border-left:2px solid;border-radius:2px;} .bb-warn{border-left-color:#b2573c;background:rgba(178,87,60,.07);color:#6b4436;} .bb-tip{border-left-color:var(--gold);background:rgba(191,161,99,.1);color:var(--olive);} .bb-warn strong,.bb-tip strong{font-weight:500;} .bb-credit{font-family:var(--sans);font-size:10.5px;letter-spacing:.03em;color:var(--taupe); margin-top:8px;} .bb-credit a{color:var(--taupe);text-decoration:underline;} /* Bilder unter CC BY-SA werden nicht beschnitten - auch nicht per object-fit. 4:3 ist das Originalverhaeltnis der Datei, contain sichert es zusaetzlich ab. */ .bs-hero.frei{aspect-ratio:4/3;background:var(--sand-3);} .bs-hero.frei img{object-fit:contain;} /* ---- Panel ohne Foto ---- Zu Kalogria, Spathies und Trani Ammouda gibt es kein rechtefreies Bild mit belegtem Aufnahmeort. Statt irgendeiner Bucht traegt das Panel dann eine grosse Ziffer - ehrlicher und ruhiger als ein beliebiges Stimmungsfoto. */ .bs-phase.bb-solo{grid-template-columns:minmax(0,1fr) auto;align-items:center;} .bb-ziffer{font-family:var(--serif);font-size:clamp(90px,11vw,190px);line-height:.8; color:rgba(22,40,61,.07);margin:0;user-select:none;letter-spacing:-.04em;} @media(max-width:900px){ .bs-phase.bb-solo{grid-template-columns:1fr;} .bb-ziffer{display:none;} } /* ---- Was unter dem Band steht ---- */ .bb-after{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px); margin-top:clamp(40px,5vw,72px);} @media(min-width:900px){.bb-after{grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,80px);}} .bb-h3{font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);color:var(--navy);} .bb-lead{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1vw,15.5px); line-height:1.7;color:var(--muted,var(--ink-soft));margin-top:12px;} .bb-liste{list-style:none;padding:0;margin:18px 0 0;} .bb-liste li{font-family:var(--sans);font-weight:300;font-size:clamp(13.5px,1vw,15px); line-height:1.7;color:var(--ink-soft);padding:12px 0;border-top:1px solid rgba(22,40,61,.1);} .bb-liste li:first-child{border-top:0;padding-top:0;} .bb-liste strong{font-weight:500;color:var(--navy);} /* ---- Abschluss-Aktion: der Weg in den vollstaendigen Strandfuehrer ---- Vorher ein schmaler Textlink in Gold auf Sand - er ist uebersehen worden. Jetzt eine eigene Zeile unter beiden Spalten, mittig, als Flaeche. */ .bb-cta-wrap{margin-top:clamp(38px,4.6vw,64px);text-align:center;} .bb-cta{display:inline-flex;align-items:center;justify-content:center;gap:14px; max-width:min(92vw,560px);text-align:center; font-family:var(--sans);font-weight:400;font-size:clamp(13px,1.05vw,15px); letter-spacing:.05em;line-height:1.45; padding:17px clamp(24px,3vw,40px);border-radius:2px; background:var(--navy);color:var(--sand);border:1px solid var(--navy); box-shadow:0 14px 34px rgba(22,40,61,.16); transition:background .4s var(--ease),color .4s var(--ease), border-color .4s var(--ease),transform .4s var(--ease);} .bb-cta::after{content:"\2192";font-size:1.1em;line-height:1; transition:transform .4s var(--ease);} .bb-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--navy); transform:translateY(-2px);} .bb-cta:hover::after{transform:translateX(5px);} .bb-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;} @media(max-width:480px){.bb-cta{width:100%;max-width:none;padding:16px 20px;}} /* ---- Vergleich: auf dem Telefon Karten statt vier Spalten ---- Eine Tabelle mit vier Spalten ist auf 360 px nicht lesbar, und waagerechtes Scrollen waere hier keine Loesung, sondern eine Ausrede. */ .bb-vgl{width:100%;border-collapse:collapse;margin-top:20px; font-family:var(--sans);font-weight:300;font-size:clamp(13px,.95vw,14.5px);} .bb-vgl th,.bb-vgl td{text-align:left;padding:10px 12px; border-bottom:1px solid rgba(22,40,61,.1);vertical-align:top;color:var(--ink-soft);} .bb-vgl th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--taupe);font-weight:400;} .bb-vgl td strong{font-weight:500;color:var(--navy);} @media(max-width:640px){ .bb-vgl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .bb-vgl,.bb-vgl tbody,.bb-vgl tr,.bb-vgl td{display:block;width:100%;} .bb-vgl tr{background:var(--sand);border-radius:3px;padding:14px 16px;margin:0 0 12px; box-shadow:0 8px 26px rgba(22,40,61,.05);} .bb-vgl td{border:0;padding:5px 0;display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline;} .bb-vgl td:first-child{display:block;font-family:var(--serif);font-size:18px;color:var(--navy); padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid rgba(22,40,61,.1);} .bb-vgl td:first-child strong{font-weight:400;} .bb-vgl td[data-label]::before{content:attr(data-label);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--taupe);} } /* ============================================================= DER GUIDE — Menue in der Kopfzeile und Teaser auf der Startseite 17.09.2026 ------------------------------------------------------------- Das Menue kommt ohne JavaScript aus: :hover und :focus-within reichen. Damit gibt es an einer Stelle, die auf jeder Seite steht, nichts, was ein fehlgeschlagenes Skript kaputtmachen koennte - und Tastaturbedienung funktioniert nebenbei mit. ============================================================= */ .nav-hut{position:relative;display:inline-block;} .nav-hut-knopf::before{content:"";position:absolute;left:-14px;right:-14px;top:-10px;bottom:-16px;} /* Der Pfeil ist ein eigenes Element und kein ::after - das ::after gehoert hier schon dem goldenen Unterstrich aller Navigationspunkte, und der soll bleiben. */ .nav-hut-knopf .pf{display:inline-block;width:5px;height:5px;margin-left:8px; vertical-align:2px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg);opacity:.8;transition:transform .3s var(--ease);} .nav-hut:hover .nav-hut-knopf .pf,.nav-hut:focus-within .nav-hut-knopf .pf{transform:rotate(225deg);} .nav-klapp{position:absolute;top:calc(100% + 14px);left:50%;z-index:70; transform:translateX(-50%) translateY(8px); min-width:min(88vw,560px);background:var(--sand);border-radius:3px; padding:26px 30px 20px;box-shadow:0 30px 70px -24px rgba(8,16,26,.55); display:grid;grid-template-columns:1fr 1fr;gap:18px 34px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease);} .nav-hut:hover .nav-klapp,.nav-hut:focus-within .nav-klapp{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);} .nav-klapp h4{font-family:var(--serif);font-weight:400;font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--taupe);margin:0 0 10px;} .nav-klapp ul{list-style:none;padding:0;margin:0;} .nav-klapp li{margin:0 0 7px;} .nav-links .nav-klapp a{font-family:var(--sans);font-size:14.5px;font-weight:300;letter-spacing:.01em; text-transform:none;color:var(--navy) !important;padding:0;} .nav-links .nav-klapp a::after{display:none;} .nav-links .nav-klapp a:hover{color:var(--gold-deep) !important;} .nav-klapp .nav-bald{font-family:var(--sans);font-size:14.5px;font-weight:300;color:#a9a191;} /* Aus CSS erzeugter Text ist kein Textknoten und wuerde von der Uebersetzung nicht erreicht - derselbe Fehler wie einst bei "SHALLOW ENTRY". Deshalb kommt das Wort aus data-label. */ .nav-klapp .nav-bald::after{content:" (" attr(data-label) ")";font-size:11.5px;letter-spacing:.04em;} .nav-alle{grid-column:1/-1;border-top:1px solid var(--line);padding-top:13px;margin:2px 0 0;} .nav-links .nav-alle a{font-size:11.5px !important;letter-spacing:.16em !important; text-transform:uppercase !important;color:var(--gold-deep) !important;} .nav-alle a::after{content:" \2192";} /* Mobile Navigation: kein gequetschtes Mega-Menue, sondern eine eingerueckte Liste unter dem Guide-Eintrag. */ .mn-sub{display:flex;flex-direction:column;gap:11px;margin:-6px 0 6px;padding-left:18px; border-left:1px solid rgba(246,241,233,.18);} .mobile-nav .mn-sub a{font-size:15px !important;letter-spacing:.04em !important; text-transform:none !important;color:rgba(246,241,233,.62) !important;} .mobile-nav .mn-sub a:hover{color:var(--gold) !important;} /* ---- Discover Nikiti: das Kartenraster ---- */ .dn-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px); margin-top:clamp(34px,4vw,56px);} @media(min-width:620px){.dn-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1000px){.dn-grid{grid-template-columns:repeat(4,1fr);}} .dn-karte{display:flex;flex-direction:column;background:var(--sand);border-radius:3px;overflow:hidden; box-shadow:0 14px 44px -22px rgba(22,40,61,.4); transition:transform .55s var(--ease),box-shadow .55s var(--ease);} .dn-karte:hover{transform:translateY(-4px);box-shadow:0 26px 60px -24px rgba(22,40,61,.5);} .dn-bild{display:block;} /* height:auto ist hier nicht kosmetisch. Das height-Attribut im Markup (gegen Layoutspruenge) wirkt als Praesentationshinweis und setzt eine feste Hoehe - und solange eine feste Hoehe steht, ignoriert der Browser aspect-ratio. Ohne diese Zeile stehen die Karten 1067 px hoch. */ .dn-bild img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;} /* Ohne belegtes Foto: eine typografische Flaeche. Lieber gar kein Bild als eine beliebige Bucht - dieselbe Regel wie im Strandband. */ .dn-platz{display:grid;place-items:center;aspect-ratio:3/2;background:var(--navy);} .dn-platz span{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);letter-spacing:.04em; color:rgba(191,161,99,.5);} .dn-innen{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;} .dn-kat{font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase; color:var(--taupe);margin:0 0 8px;} .dn-titel{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.25; margin:0 0 9px;color:var(--navy);} .dn-titel a{color:var(--navy);} .dn-titel a:hover{color:var(--gold-deep);} .dn-text{font-family:var(--sans);font-weight:300;font-size:clamp(13.5px,.95vw,14.5px);line-height:1.65; color:var(--ink-soft);margin:0 0 18px;} .dn-weiter{margin-top:auto;font-family:var(--sans);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-deep);} .dn-weiter::after{content:" \2192";transition:transform .4s var(--ease);display:inline-block;} .dn-karte:hover .dn-weiter::after{transform:translateX(4px);} /* Die Kopfzeile brach zwischen 900 und 1150 px zweizeilig um - schon vor dem Guide-Eintrag, in allen drei Sprachen. Eine zweizeilige Kopfzeile schiebt den Inhalt nach unten und sieht nach Versehen aus. In diesem Band entfallen deshalb zwei Eintraege: "The Journey" fuehrt zum Film, an dem man ohnehin vorbeiscrollt, und FAQ steht zusaetzlich in der Fusszeile. Beide bleiben in der mobilen Navigation vollstaendig. */ @media(max-width:1150px){ .nav-links .nur-breit{display:none;} .nav-links{gap:clamp(11px,1.5vw,20px);} } /* Zwischen 921 und 1000 px blieb die deutsche Fassung zweizeilig - "Direkt buchen" ist breiter als "Book Direct". Dort entfaellt zusaetzlich die Galerie; ab 920 px uebernimmt ohnehin das mobile Menue, in dem alle Eintraege vollstaendig stehen. */ @media(max-width:1000px){.nav-links .nur-mittel{display:none;}} /* Griechisch ist in der Kopfzeile deutlich breiter als Englisch: "Συχνές Ερωτήσεις" gegen "FAQ", "Απευθείας κράτηση" gegen "Book Direct". Die Leiste brach deshalb bis 1600 px zweizeilig um - und zwar schon lange vor dem Guide-Eintrag. Weil js/i18n.js die Sprache an das html-Element schreibt, laesst sich das ohne Skript loesen: auf Griechisch entfallen dieselben Eintraege einfach frueher. */ @media(max-width:1600px){html[lang="el"] .nav-links .nur-breit{display:none;}} @media(max-width:1200px){html[lang="el"] .nav-links .nur-mittel{display:none;}} /* Zwischen 921 und 999 px reicht auch das nicht mehr. Statt die Leiste dort weiter auszuduennen, uebernimmt auf Griechisch das mobile Menue einfach achtzig Pixel frueher - dort steht ohnehin alles. */ @media(max-width:1000px){ html[lang="el"] .nav-links{display:none;} html[lang="el"] .menu-btn{display:flex;} }