/* =========================================================================== Villa Sunshine — Cape Coral Die Palette haengt an [data-daypart] auf . Sonst nichts aendern. =========================================================================== */ @font-face{font-family:"Bricolage";src:url("/assets/fonts/bricolage.woff2") format("woff2"); font-weight:200 800;font-display:swap} @font-face{font-family:"Instrument";src:url("/assets/fonts/instrument.woff2") format("woff2"); font-weight:400 700;font-display:swap} @font-face{font-family:"DMMono";src:url("/assets/fonts/dmmono.woff2") format("woff2"); font-weight:400 500;font-display:swap} :root{ --display:"Bricolage","Bricolage Grotesque",system-ui,sans-serif; --body:"Instrument","Instrument Sans",system-ui,sans-serif; --mono:"DMMono","DM Mono",ui-monospace,Menlo,monospace; --sky:#0E7C86; --deep:#06414A; --ink:#FFFDF8; --accent:#F5C542; --glow:0 0 0 rgba(0,0,0,0); --ink-soft:color-mix(in oklab,var(--ink) 62%,transparent); --ink-faint:color-mix(in oklab,var(--ink) 30%,transparent); --pane:color-mix(in oklab,var(--deep) 58%,transparent); --edge:color-mix(in oklab,var(--ink) 16%,transparent); --gut:clamp(1.25rem,5vw,3.5rem); --ease:cubic-bezier(.22,1,.36,1); --shift:background-color 2s var(--ease),color 2s var(--ease),border-color 2s var(--ease); } [data-daypart="dawn"] {--sky:#2E4A63;--deep:#16232F;--ink:#F2EDE6;--accent:#E8A87C} [data-daypart="day"] {--sky:#0E7C86;--deep:#06414A;--ink:#FFFDF8;--accent:#F5C542} [data-daypart="golden"]{--sky:#B33A22;--deep:#4A1A1F;--ink:#FFF3E4;--accent:#FF9E4F} [data-daypart="night"] {--sky:#0B1A2E;--deep:#050C16;--ink:#DCE6F0;--accent:#2BD9C4; --glow:0 0 28px color-mix(in oklab,#2BD9C4 45%,transparent)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;min-height:100svh; font-family:var(--body);font-size:clamp(.95rem,.9rem + .3vw,1.05rem);line-height:1.55; color:var(--ink);background:var(--deep); transition:var(--shift); overflow-x:hidden; } h1,h2,p{margin:0} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} /* --- Szene ---------------------------------------------------------------- */ .scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--deep); transition:var(--shift)} .scene__gen,.scene__photo{position:absolute;inset:-2%} .scene__gen svg{width:100%;height:100%;display:block} .scene__photo{background-size:cover;background-position:center;opacity:0; transition:opacity 1.2s var(--ease)} .scene__photo[data-loaded]{opacity:1} /* Liegt das Foto, wird die gezeichnete Szene darunter nicht mehr gebraucht — sie wuerde sonst nur weiter animieren. */ .scene__photo[data-loaded] + .scene__gen{display:none} /* Traegt den Text. Ohne die linke Abdunklung steht die Typo auf Mond- oder Sonnenhof und wird unlesbar. */ .scene__wash{position:absolute;inset:0; background: linear-gradient(to right,color-mix(in oklab,var(--deep) 72%,transparent) 0%, color-mix(in oklab,var(--deep) 34%,transparent) 42%,transparent 72%), radial-gradient(120% 80% at 50% 8%,transparent 0%,color-mix(in oklab,var(--deep) 45%,transparent) 82%), linear-gradient(to bottom,transparent 48%,color-mix(in oklab,var(--deep) 84%,transparent) 100%); transition:var(--shift)} @media (max-width:48rem){ /* Hochkant zeigt der Ausschnitt nur ein knappes Viertel der Bildbreite. Nach rechts verschoben bleibt der Leuchtturm im Bild — er ist das Motiv. */ .scene__photo{background-position:72% center} .scene__wash{background: linear-gradient(to right,color-mix(in oklab,var(--deep) 70%,transparent) 0%, color-mix(in oklab,var(--deep) 46%,transparent) 100%), linear-gradient(to bottom,transparent 42%,color-mix(in oklab,var(--deep) 86%,transparent) 100%)} .scene__photo[data-loaded] ~ .scene__wash{background: linear-gradient(to bottom,color-mix(in oklab,var(--deep) 70%,transparent) 0%, transparent 26%), linear-gradient(to right,color-mix(in oklab,var(--deep) 78%,transparent) 0%, color-mix(in oklab,var(--deep) 60%,transparent) 100%), linear-gradient(to bottom,transparent 34%,color-mix(in oklab,var(--deep) 90%,transparent) 100%)} } /* Fotos sind deutlich heller als die gezeichnete Szene — vor allem das Tagesbild. Ohne kraeftigeren Schleier steht die Typo auf hellem Himmel. */ .scene__photo[data-loaded] ~ .scene__wash{ background: /* Kopfbereich: traegt Ortsangabe, Uhrzeit und Sonnenbahn. Ohne diesen Verlauf verschwindet die feine Mono-Schrift auf dem hellen Morgenbild. */ linear-gradient(to bottom,color-mix(in oklab,var(--deep) 66%,transparent) 0%, transparent 28%), linear-gradient(to right,color-mix(in oklab,var(--deep) 86%,transparent) 0%, color-mix(in oklab,var(--deep) 54%,transparent) 45%,transparent 78%), linear-gradient(to bottom,transparent 38%,color-mix(in oklab,var(--deep) 90%,transparent) 100%)} .scene__rain{position:absolute;inset:0;width:100%;height:100%;opacity:.5} /* --- Kopfzeile ------------------------------------------------------------ */ .bar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center; gap:1rem;padding:1.15rem var(--gut) 0} .bar__place{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--ink-soft)} .bar__lang{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--ink-soft); border-bottom:1px solid var(--ink-faint);padding-bottom:2px;transition:color .3s} .bar__lang:hover{color:var(--accent)} main{position:relative;z-index:1;padding:0 var(--gut) clamp(3rem,10vw,6rem)} /* --- Hero ----------------------------------------------------------------- */ .hero{padding:clamp(2.5rem,11vh,6rem) 0 clamp(2rem,6vh,3rem);max-width:46rem} .dataline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; font-family:var(--mono);font-size:.8rem;letter-spacing:.06em} .dataline__sep{color:var(--ink-faint)} /* Faellt das Wetter aus, darf kein einsamer Trennpunkt stehen bleiben. */ .dataline:has(#tempNow[hidden]) .dataline__sep{display:none} .dataline__sky{color:var(--ink-soft)} .dataline__clock{font-variant-numeric:tabular-nums} .temp{font-family:var(--mono);font-variant-numeric:tabular-nums; border-bottom:1px dotted var(--ink-faint);transition:color .3s,border-color .3s} .temp:hover{color:var(--accent);border-bottom-color:var(--accent)} .temp--now{font-size:.8rem;letter-spacing:.06em} .sunpath{position:relative;margin:1.1rem 0 clamp(1.75rem,5vw,2.75rem);max-width:22rem} .sunpath svg{width:100%;height:46px;display:block;overflow:visible} .sunpath__arc{fill:none;stroke:var(--ink-faint);stroke-width:1; stroke-dasharray:100;stroke-dashoffset:100; animation:draw 1.4s var(--ease) .25s forwards} .sunpath__dot{fill:var(--accent);filter:drop-shadow(var(--glow));opacity:0; animation:pop .5s var(--ease) 1.35s forwards} .sunpath__end{position:absolute;top:2.6rem;display:flex;flex-direction:column;gap:.1rem; font-family:var(--mono);font-size:.6rem;letter-spacing:.1em; color:color-mix(in oklab,var(--ink) 48%,transparent)} .sunpath__end--l{left:0} .sunpath__end--r{right:0;text-align:right} .sunpath__end em{font-style:normal;text-transform:uppercase} .sunpath__end b{font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums} .hero__name{font-family:var(--display);font-weight:750; font-size:clamp(2.6rem,10vw,5.5rem);line-height:.94;letter-spacing:-.035em; text-wrap:balance} .hero__tag{margin-top:.9rem;max-width:26ch;font-size:clamp(1rem,.95rem + .5vw,1.3rem); color:var(--ink-soft);text-wrap:pretty} /* --- Abschnittsmarke ------------------------------------------------------ */ .eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.22em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem} /* --- Buchungskarten ------------------------------------------------------- */ .book{max-width:62rem} .book__grid{display:grid;gap:.6rem} .book__hint{margin-top:1rem;max-width:40ch;font-size:.85rem;color:var(--ink-faint)} .card{position:relative;overflow:hidden;display:flex;align-items:center;gap:.95rem;flex-wrap:wrap; padding:1.05rem 1.15rem;text-decoration:none;color:var(--ink); background:var(--pane);border:1px solid var(--edge);border-radius:14px; backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3); transition:border-color .35s,transform .35s var(--ease),background-color 2s var(--ease)} .card:hover{border-color:color-mix(in oklab,var(--accent) 55%,transparent);transform:translateY(-2px)} .card::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%; background:linear-gradient(100deg,transparent,color-mix(in oklab,var(--ink) 13%,transparent),transparent); transform:skewX(-14deg);pointer-events:none} .card:hover::after,.card:focus-visible::after{animation:sweep .75s var(--ease)} .card__dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--tint,var(--accent)); box-shadow:0 0 12px var(--tint,var(--accent))} .card__logo{flex:none;height:20px;width:auto;max-width:118px;object-fit:contain} .card__name{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.015em; flex:1 1 auto;min-width:0} /* Nur ein Entwicklungshinweis: er verschwindet, sobald in content.js echte Links stehen. Bis dahin gehoert er in eine eigene Zeile, sonst quetscht er auf dem Handy die Namen. */ .card__flag{order:9;flex:0 0 auto;white-space:nowrap; font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint);border:1px solid var(--ink-faint);border-radius:99px;padding:.1rem .45rem} .card__go{margin-left:auto;display:flex;align-items:center;gap:.4rem;flex:none; font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft); transition:color .3s} .card:hover .card__go{color:var(--accent)} .card__go svg{width:13px;height:13px;transition:transform .35s var(--ease)} .card:hover .card__go svg{transform:translateX(3px)} /* --- Belegungskalender ---------------------------------------------------- */ .stay{margin-top:clamp(2.5rem,8vw,4rem);max-width:62rem} .stay__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr); gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) .5rem;scrollbar-width:none} .stay__rail::-webkit-scrollbar{display:none} .month{scroll-snap-align:start;padding:1rem 1.1rem 1.2rem;border-radius:14px; background:var(--pane);border:1px solid var(--edge); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:background-color 2s var(--ease)} .month__name{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em; margin-bottom:.8rem} .month__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem; font-family:var(--mono);font-variant-numeric:tabular-nums} .month__wd{display:grid;place-items:center;height:1.5rem;font-size:.56rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint)} .day-cell{position:relative;isolation:isolate;display:grid;place-items:center; aspect-ratio:1;font-size:.72rem;border-radius:6px;color:var(--ink)} .day-cell.is-busy{color:color-mix(in oklab,var(--ink) 55%,transparent); background:color-mix(in oklab,var(--deep) 55%,transparent)} /* Diagonale statt Durchstreichen — und hinter der Zahl, sonst sieht man nicht mehr, WELCHER Tag belegt ist. */ .day-cell.is-busy::after{content:"";position:absolute;inset:18%;z-index:-1; background:linear-gradient(to top right,transparent 44%, color-mix(in oklab,var(--ink) 30%,transparent) 44% 56%,transparent 56%)} .day-cell.is-past{color:color-mix(in oklab,var(--ink) 16%,transparent)} .day-cell.is-today{outline:1px solid var(--accent);outline-offset:-1px;font-weight:500} .stay__legend{margin-top:.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem; font-size:.75rem;color:var(--ink-faint)} .legend{display:inline-flex;align-items:center;gap:.4rem} .legend__box{width:.85rem;height:.85rem;border-radius:4px;border:1px solid var(--edge)} .legend__box--busy{position:relative;background:color-mix(in oklab,var(--deep) 55%,transparent)} .legend__box--busy::after{content:"";position:absolute;inset:12%; background:linear-gradient(to top right,transparent 44%, color-mix(in oklab,var(--ink) 34%,transparent) 44% 56%,transparent 56%)} .stay__note{font-family:var(--mono);font-size:.65rem;letter-spacing:.04em} /* --- Vorhersage ----------------------------------------------------------- */ .forecast{margin-top:clamp(2.5rem,8vw,4rem);max-width:62rem} .forecast__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(4.6rem,1fr); gap:.4rem;overflow-x:auto;scroll-snap-type:x proximity; padding-bottom:.5rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut); scrollbar-width:none} .forecast__rail::-webkit-scrollbar{display:none} .forecast__note{margin-top:.7rem;font-size:.75rem;color:var(--ink-faint)} .day{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.45rem; padding:.8rem .3rem .9rem;border-radius:12px; background:color-mix(in oklab,var(--deep) 42%,transparent); border:1px solid transparent;transition:background-color 2s var(--ease),border-color .35s} .day--today{border-color:var(--edge);background:var(--pane)} .day__name{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-soft);white-space:nowrap} .day__icon{width:26px;height:26px;color:var(--accent)} .day__temps{display:flex;gap:.35rem;align-items:baseline;font-family:var(--mono);font-size:.78rem; font-variant-numeric:tabular-nums} .day__lo{color:var(--ink-faint)} .day__rain{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em; color:color-mix(in oklab,var(--accent) 78%,var(--ink))} .day__rain[hidden]{display:none} /* --- Lage ----------------------------------------------------------------- */ .locate{margin-top:clamp(3rem,10vw,5rem);max-width:62rem} .locate__grid{display:grid;gap:1.5rem} .locate__body{margin-top:1.25rem;max-width:46ch;color:var(--ink-soft);font-size:.95rem} .locate__attr{margin-top:.5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em} .locate__attr a{color:var(--ink-faint);text-decoration:none;transition:color .3s} .locate__attr a:hover{color:var(--ink-soft);text-decoration:underline} .locate__map{position:relative;border:1px solid var(--edge);border-radius:16px;overflow:hidden; background:color-mix(in oklab,var(--deep) 60%,transparent)} .map__tiles{display:grid;width:100%} /* OSM liefert helle Kacheln. Der Filter dreht sie ins Dunkle, damit die Karte nicht als weisser Block aus der Seite springt. */ .map__tiles img{display:block;width:100%;height:auto; filter:invert(1) hue-rotate(185deg) saturate(.45) brightness(.92) contrast(1.05)} .mark{position:absolute;transform:translate(-50%,-50%);z-index:2; display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%; background:var(--accent);color:var(--deep); font-family:var(--mono);font-size:.68rem;font-weight:500;line-height:1; box-shadow:0 0 0 3px color-mix(in oklab,var(--deep) 70%,transparent),var(--glow)} .mark--house{width:1.7rem;height:1.7rem;font-size:.76rem; outline:2px solid color-mix(in oklab,var(--accent) 45%,transparent);outline-offset:3px} .places{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} .place{display:flex;gap:.65rem;align-items:flex-start} .place__num{flex:none;display:grid;place-items:center;width:1.35rem;height:1.35rem; border-radius:50%;border:1px solid var(--edge); font-family:var(--mono);font-size:.65rem;color:var(--ink-soft);margin-top:.1rem} .place--house .place__num{background:var(--accent);color:var(--deep);border-color:transparent} .place__name{display:block;font-weight:600;font-size:.95rem} .place__name--link{color:inherit;text-decoration:none; border-bottom:1px solid var(--ink-faint);transition:color .3s,border-color .3s} .place__name--link:hover{color:var(--accent);border-bottom-color:var(--accent)} .place__meta{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em; color:var(--ink-faint);margin-top:.1rem} .walk{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--edge); font-size:.88rem;color:var(--ink-soft);max-width:34ch} .walk__lead{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem} .airports{list-style:none;margin:.45rem 0 0;padding:0; display:grid;grid-template-columns:auto 1fr auto;gap:.28rem .7rem;align-items:baseline} .airport{display:contents} .airport__code{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent)} .airport__city{font-size:.85rem;color:var(--ink-soft)} .airport__time{font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums; color:var(--ink-faint);text-align:right} /* --- Ladesequenz ---------------------------------------------------------- */ @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes draw{to{stroke-dashoffset:0}} @keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} @keyframes sweep{from{left:-45%}to{left:118%}} @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}} .dataline,.sunpath,.hero__name,.hero__tag,.book,.forecast,.locate{ animation:rise .8s var(--ease) backwards} .dataline{animation-delay:.1s} .sunpath{animation-delay:.2s} .hero__name{animation-delay:.32s} .hero__tag{animation-delay:.44s} .book{animation-delay:.56s} .forecast{animation-delay:.66s} .locate{animation-delay:.72s} .scene__gen,.scene__photo{animation:kenburns 64s linear infinite alternate} /* --- Ab Tablet ------------------------------------------------------------ */ @media (min-width:48rem){ .book__grid{grid-template-columns:repeat(2,1fr);gap:.7rem} .forecast__rail{grid-auto-columns:1fr;overflow-x:visible; margin-inline:0;padding-inline:0} .locate__grid{grid-template-columns:1.35fr 1fr;gap:2rem;align-items:start} } @media (min-width:64rem){ .book__grid{grid-template-columns:repeat(4,1fr)} .card{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1.3rem;min-height:9.5rem} .card__go{margin-left:0;margin-top:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important} .scene__gen,.scene__photo{animation:none} .sunpath__arc{stroke-dashoffset:0} .sunpath__dot{opacity:1} }