/* ============================================================ Casa Monte Bugaro — style.css Fünf Akte: Der Tag wandert beim Scrollen über die Seite. Token-System siehe Konzeptdokument, Abschnitt 3.2 ============================================================ */ /* ---------- Fonts (für Livegang self-hosten, siehe README) -- */ /* Eingebunden über im HTML: Young Serif, Instrument Serif, Figtree, Spline Sans Mono */ /* ---------- Tokens ------------------------------------------ */ :root{ --calce: #F5F1E6; --grano: #D8C08A; --cipresso: #3E4B36; --adria: #2F6273; --adria-hell:#7FB6C6; --tramonto: #C4703F; --notte: #101D22; --lucciola: #E8D98A; --ink: #26301F; --ink-soft: #5C6355; --bg: var(--calce); --surface: #FFFDF6; --line: rgba(62,75,54,.18); --accent: var(--adria); --accent-ink:#FFFFFF; --f-display:"Young Serif", Georgia, serif; --f-italic: "Instrument Serif", Georgia, serif; --f-body: "Figtree", system-ui, sans-serif; --f-mono: "Spline Sans Mono", ui-monospace, monospace; --w-max: 1180px; --radius: 14px; --shadow: 0 24px 60px -24px rgba(16,29,34,.35); } /* Akt-Umschaltung: JS setzt data-act auf */ body[data-act="2"]{ --bg:#FAF6EA; } body[data-act="3"]{ --bg:#39414B; --ink:#F1ECDD; --ink-soft:#B9BDAE; --surface:#434C57; --line:rgba(241,236,221,.16); --accent:var(--adria-hell); --accent-ink:#14232A; } body[data-act="4"]{ --bg:#37281F; --ink:#F5EBDA; --ink-soft:#C9B49E; --surface:#423227; --line:rgba(245,235,218,.15); --accent:#E09B63; --accent-ink:#2A1B12; } body[data-act="5"]{ --bg:var(--notte); --ink:#E7EFEA; --ink-soft:#9FB0A8; --surface:#182B31; --line:rgba(231,239,234,.14); --accent:var(--adria-hell); --accent-ink:#0F2128; } /* ---------- Basis ------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:5.2rem; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } ::selection{ background:var(--adria); color:#fff; } /* Dezentes Filmkorn über der ganzen Seite — macht Flächen "analog" */ body::before{ content:""; position:fixed; inset:0; z-index:45; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference){ body{ animation:pageIn .7s ease-out; } @keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } } } /* Hinweis-Banner (über content.json / Admin steuerbar) */ .notice-bar{ background:var(--grano); color:#3d3212; text-align:center; font-size:.88rem; font-weight:500; padding:.5rem 1.2rem; } body{ margin:0; font-family:var(--f-body); font-size:1.06rem; line-height:1.65; color:var(--ink); background:var(--bg); transition: background-color 1.2s ease, color 1.2s ease; -webkit-font-smoothing:antialiased; } img,video{ max-width:100%; height:auto; display:block; } a{ color:var(--accent); text-underline-offset:3px; } a:hover{ text-decoration-thickness:2px; } :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } h1,h2,h3{ font-family:var(--f-display); font-weight:400; line-height:1.08; margin:0 0 .5em; letter-spacing:-0.01em; } h1{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); } h2{ font-size:clamp(2rem, 4.2vw, 3.3rem); } h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); } h1 em, h2 em, .it{ font-family:var(--f-italic); font-style:italic; letter-spacing:0; } p{ margin:0 0 1em; max-width:65ch; } .lead{ font-size:clamp(1.15rem,1.8vw,1.35rem); color:var(--ink-soft); } .eyebrow{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:1.1rem; } .mono{ font-family:var(--f-mono); font-size:.9rem; } .wrap{ max-width:var(--w-max); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.5rem); } section{ padding-block:clamp(4.5rem,9vw,8.5rem); position:relative; } /* ---------- Buttons ----------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--f-body); font-weight:600; font-size:1rem; padding:.85rem 1.6rem; border-radius:999px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, background-color .3s, color .3s, border-color .3s; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--accent); color:var(--accent-ink); } .btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; } /* ---------- Header ------------------------------------------ */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:50; transition:background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s; color:#fff; } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.9rem; } .brand{ font-family:var(--f-display); font-size:1.25rem; color:inherit; text-decoration:none; letter-spacing:.01em; white-space:nowrap; } .brand small{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.22em; display:block; opacity:.75; text-transform:uppercase; } .site-nav{ display:flex; gap:1.4rem; align-items:center; } .site-nav a{ color:inherit; text-decoration:none; font-size:.94rem; font-weight:500; opacity:.9; } .site-nav a:hover{ opacity:1; text-decoration:underline; } .site-header .btn{ padding:.55rem 1.2rem; font-size:.92rem; } .site-header.scrolled{ background:color-mix(in srgb, var(--bg) 88%, transparent); color:var(--ink); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); } @media (max-width: 860px){ .site-nav{ display:none; } } /* ---------- Sonnenbogen (Signature) -------------------------- */ .sun-arc{ position:fixed; right:1.4rem; top:50%; transform:translateY(-50%); z-index:40; width:38px; height:230px; } .sun-arc svg{ overflow:visible; } .sun-arc .track{ stroke:var(--line); stroke-width:1.5; fill:none; transition:stroke 1.2s; } .sun-arc .sun{ fill:var(--accent); transition:fill 1.2s; } .sun-arc .act-dot{ fill:transparent; stroke:var(--ink-soft); stroke-width:1.2; cursor:pointer; transition:stroke 1.2s, fill .3s; } .sun-arc .act-dot:hover, .sun-arc .act-dot.active{ fill:var(--accent); stroke:var(--accent); } @media (max-width:1100px){ .sun-arc{ display:none; } } /* ---------- Szenerie: Horizont-Übergänge --------------------- */ .horizon{ color:var(--ink); line-height:0; transition:color 1.2s; } .horizon svg{ display:block; } /* ---------- AKT 1: Hero ------------------------------------- */ .hero{ min-height:100svh; padding:0; display:flex; align-items:flex-end; position:relative; overflow:clip; color:#fff; } .hero-media{ position:absolute; inset:0; z-index:-1; } .hero-media img{ width:100%; height:100%; object-fit:cover; transform-origin:center; } @media (prefers-reduced-motion: no-preference){ .hero-media img{ animation:heroZoom 36s ease-out forwards; } } @keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } } .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,20,18,.72) 0%, rgba(12,20,18,.25) 42%, rgba(12,20,18,.12) 100%); } .hero-media::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(55% 45% at 76% 14%, rgba(232,217,138,.32), transparent 70%); mix-blend-mode:screen; opacity:.7; } @media (prefers-reduced-motion: no-preference){ .hero-media::before{ animation:morningGlow 14s ease-in-out infinite alternate; } } @keyframes morningGlow{ from{ opacity:.45; } to{ opacity:.9; } } .hero-inner{ width:100%; padding-block:clamp(2.5rem,6vh,5rem); } .hero .eyebrow{ color:var(--lucciola); } .hero h1{ max-width:12ch; margin-bottom:.4em; text-wrap:balance; } .hero .lead{ color:rgba(255,255,255,.88); max-width:46ch; } .hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin:1.6rem 0 2.4rem; } .hero .btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff; } .factline{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; border-top:1px solid rgba(255,255,255,.28); padding-top:1.1rem; color:rgba(255,255,255,.85); list-style:none; margin:0; padding-left:0; padding-top:1.1rem; } /* ---------- Layout-Bausteine --------------------------------- */ .grid-2{ display:grid; gap:clamp(1.6rem,4vw,4rem); align-items:center; } @media (min-width:880px){ .grid-2{ grid-template-columns:1fr 1fr; } } .frame{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .frame img{ width:100%; height:100%; object-fit:cover; } .stack-imgs{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; } .stack-imgs .frame:first-child{ grid-column:1/-1; aspect-ratio:16/10; } .stack-imgs .frame{ aspect-ratio:4/3; } figcaption{ font-family:var(--f-mono); font-size:.75rem; color:var(--ink-soft); margin-top:.55rem; letter-spacing:.05em; } /* Schlafzimmer-Karten */ .rooms{ display:grid; gap:1.1rem; margin-top:2.6rem; } @media (min-width:760px){ .rooms{ grid-template-columns:repeat(3,1fr); } } .room{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.4rem 1.2rem; transition:background-color 1.2s, border-color 1.2s; } .room h3{ font-size:1.15rem; margin-bottom:.2rem; } .room .mono{ color:var(--ink-soft); font-size:.78rem; display:block; margin-bottom:.7rem; } .room ul{ margin:0; padding:0; list-style:none; font-size:.92rem; color:var(--ink-soft); } .room li{ padding:.28rem 0; border-top:1px dashed var(--line); } /* Feature-Zeilen (Garten) */ .features{ display:grid; gap:.2rem; margin-top:1.4rem; padding:0; list-style:none; max-width:46ch; } .features li{ display:flex; justify-content:space-between; gap:1.5rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.97rem; } .features li span:last-child{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-soft); text-align:right; } /* Zitate */ .quote{ font-family:var(--f-display); font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.25; max-width:24ch; margin:0; } .quote + .cite{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-soft); margin-top:1.2rem; display:block; letter-spacing:.06em; } .quote-band{ text-align:center; } .quote-band .quote{ margin-inline:auto; } /* Nebenhaus-Modul */ .annex{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.8rem); display:grid; gap:2rem; align-items:center; transition:background-color 1.2s, border-color 1.2s; } @media (min-width:880px){ .annex{ grid-template-columns:1.1fr 1fr; } } /* ---------- AKT 3: Drohnenflug ------------------------------- */ .flight-wrap{ height:260vh; } .flight-sticky{ position:sticky; top:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.6rem; padding-block:2rem; } .flight-head{ text-align:center; } .flight-frame{ width:var(--fw, 62%); max-width:1040px; border-radius:var(--fr, 26px); overflow:hidden; box-shadow:var(--shadow); will-change:width; } .flight-frame video, .flight-frame img{ width:100%; display:block; aspect-ratio:960/542; object-fit:cover; } .flight-cap{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; } @media (max-width:760px){ .flight-wrap{ height:auto; } .flight-sticky{ position:static; min-height:0; } .flight-frame{ width:100%; border-radius:var(--radius); } } .flight-frame{ position:relative; } .play-badge{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); background:rgba(16,29,34,.45); color:#fff; font-size:1.5rem; cursor:pointer; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; } .play-badge:hover{ background:rgba(16,29,34,.65); } /* ---------- AKT 4: Umgebung ---------------------------------- */ #umgebung::before{ content:""; position:absolute; inset:0 0 auto 0; height:min(46vh,420px); pointer-events:none; background: radial-gradient(52% 62% at 50% -12%, rgba(224,155,99,.24), transparent 72%), linear-gradient(180deg, rgba(196,112,63,.12), transparent 80%); } .map-svg{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:background-color 1.2s; } .map-svg text{ font-family:var(--f-mono); font-size:11px; fill:var(--ink); } .map-note{ margin-top:.7rem; } .distances{ list-style:none; margin:2rem 0 0; padding:0; font-family:var(--f-mono); font-size:.88rem; } .distances li{ display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line); gap:1rem; } .evenings{ display:grid; gap:1.1rem; margin-top:2.4rem; } @media (min-width:760px){ .evenings{ grid-template-columns:repeat(3,1fr); } } .evening{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:background-color 1.2s, border-color 1.2s; } .evening .frame{ border-radius:0; box-shadow:none; aspect-ratio:3/2; } .evening div{ padding:1.2rem 1.3rem 1.4rem; } .evening h3{ font-size:1.1rem; margin-bottom:.3rem; } .evening p{ font-size:.93rem; color:var(--ink-soft); margin:0; } /* Hunde */ .dog-list{ columns:2; gap:2.5rem; list-style:none; padding:0; margin:1.4rem 0 0; font-size:.97rem; } .dog-list li{ break-inside:avoid; padding:.45rem 0; border-bottom:1px solid var(--line); } @media (max-width:640px){ .dog-list{ columns:1; } } /* ---------- AKT 5: Nacht ------------------------------------- */ .night{ position:relative; overflow:clip; } .night::before{ /* Sternenhimmel, oben dichter, nach unten ausblendend */ content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(1.4px 1.4px at 11% 6%, rgba(231,239,234,.9), transparent 55%), radial-gradient(1.1px 1.1px at 27% 13%, rgba(231,239,234,.75), transparent 55%), radial-gradient(1.6px 1.6px at 41% 4%, rgba(231,239,234,.85), transparent 55%), radial-gradient(1px 1px at 55% 11%, rgba(231,239,234,.7), transparent 55%), radial-gradient(1.4px 1.4px at 66% 5%, rgba(231,239,234,.9), transparent 55%), radial-gradient(1px 1px at 74% 15%, rgba(231,239,234,.65), transparent 55%), radial-gradient(1.7px 1.7px at 86% 8%, rgba(231,239,234,.9), transparent 55%), radial-gradient(1.1px 1.1px at 94% 17%, rgba(231,239,234,.7), transparent 55%), radial-gradient(1.2px 1.2px at 18% 22%, rgba(231,239,234,.55), transparent 55%), radial-gradient(1px 1px at 48% 25%, rgba(231,239,234,.5), transparent 55%), radial-gradient(1.3px 1.3px at 81% 27%, rgba(231,239,234,.55), transparent 55%), radial-gradient(1px 1px at 34% 33%, rgba(231,239,234,.4), transparent 55%), radial-gradient(1.2px 1.2px at 63% 36%, rgba(231,239,234,.4), transparent 55%); -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 78%); mask-image:linear-gradient(180deg,#000 30%,transparent 78%); } .night::after{ /* Mondlicht */ content:""; position:absolute; inset:0 0 auto 0; height:60vh; pointer-events:none; background:radial-gradient(340px 300px at 84% -4%, rgba(127,182,198,.16), transparent 70%); } #fireflies{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; } .night > .wrap{ position:relative; z-index:1; } /* Bewertungen */ .score{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; } .score strong{ font-family:var(--f-display); font-size:3.4rem; line-height:1; } .score span{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-soft); } .reviews{ display:grid; gap:1.1rem; } @media (min-width:880px){ .reviews{ grid-template-columns:repeat(3,1fr); } } .review{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; transition:background-color 1.2s, border-color 1.2s; } .review p{ font-size:.96rem; margin-bottom:1rem; } .review .cite{ font-family:var(--f-mono); font-size:.76rem; color:var(--ink-soft); letter-spacing:.05em; } /* Preise */ .price-panel{ display:grid; gap:clamp(1.6rem,4vw,3.5rem); margin-top:2.4rem; } @media (min-width:880px){ .price-panel{ grid-template-columns:1.1fr 1fr; } } .price-big{ font-family:var(--f-display); font-size:clamp(2.6rem,5vw,4rem); line-height:1; } .price-big small{ font-family:var(--f-mono); font-size:.85rem; color:var(--ink-soft); display:block; margin-top:.6rem; letter-spacing:.06em; } .incl{ list-style:none; padding:0; margin:1.6rem 0 0; font-size:.96rem; } .incl li{ padding:.45rem 0 .45rem 1.6rem; position:relative; border-bottom:1px solid var(--line); } .incl li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; } .conditions{ font-family:var(--f-mono); font-size:.85rem; } .conditions dt{ color:var(--ink-soft); margin-top:.9rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; } .conditions dd{ margin:0.15rem 0 0; } details{ border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; margin-top:.8rem; background:var(--surface); transition:background-color 1.2s; } summary{ cursor:pointer; font-weight:600; font-size:.97rem; } details p, details ul{ font-size:.94rem; color:var(--ink-soft); margin-top:.7rem; } /* Belegungskalender */ .cal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.2rem,3vw,2rem); transition:background-color 1.2s, border-color 1.2s; } .cal-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; } .cal-legend{ display:flex; gap:1.4rem; font-size:.78rem; color:var(--ink-soft); } .cal-key{ display:inline-flex; align-items:center; gap:.45rem; } .cal-key i{ width:14px; height:14px; border-radius:4px; display:inline-block; } .k-free{ border:1px solid var(--line); background:color-mix(in srgb, var(--accent) 14%, transparent); } .k-booked{ background:var(--line); position:relative; } .k-booked::after{ content:""; position:absolute; left:2px; right:2px; top:50%; height:1px; background:var(--ink-soft); } .k-today{ border:1.5px solid var(--accent); } .cal-nav{ display:flex; gap:.5rem; } .cal-nav button{ font:inherit; font-size:1.25rem; line-height:1; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; transition:border-color .2s, color .2s, opacity .2s; } .cal-nav button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); } .cal-nav button:disabled{ opacity:.3; cursor:default; } .cal-months{ display:grid; gap:clamp(1.4rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(264px,1fr)); } .cal-month h3{ font-size:1.15rem; margin-bottom:.9rem; } .cal-month h3 span{ color:var(--ink-soft); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; margin-left:.5rem; } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .cal-dow{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); text-align:center; padding-bottom:.4rem; } .cal-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.82rem; border-radius:8px; position:relative; } .cal-day.free{ background:color-mix(in srgb, var(--accent) 12%, transparent); } .cal-day.booked{ color:var(--ink-soft); opacity:.5; } .cal-day.booked::after{ content:""; position:absolute; left:26%; right:26%; top:50%; height:1px; background:currentColor; } .cal-day.past{ opacity:.22; background:none; } .cal-day.past::after{ display:none; } .cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--accent); } .cal-foot{ margin-top:1.3rem; font-size:.74rem; color:var(--ink-soft); letter-spacing:.04em; } /* Formular */ .inquiry{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.6rem); transition:background-color 1.2s; } .inquiry form{ display:grid; gap:1rem; } @media (min-width:640px){ .inquiry form{ grid-template-columns:1fr 1fr; } .inquiry .full{ grid-column:1/-1; } } .inquiry label{ display:grid; gap:.35rem; font-size:.85rem; font-weight:600; } .inquiry input, .inquiry select, .inquiry textarea{ font:inherit; font-size:.98rem; padding:.7rem .85rem; border-radius:9px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color .2s, background-color 1.2s, color 1.2s; } .inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus{ border-color:var(--accent); outline:none; } .inquiry .check{ display:flex; gap:.6rem; align-items:flex-start; font-weight:400; font-size:.85rem; color:var(--ink-soft); } .inquiry .check input{ margin-top:.2rem; width:1.05rem; height:1.05rem; } .form-note{ font-size:.85rem; color:var(--ink-soft); margin:0; } /* Gastgeber */ .host{ display:flex; gap:1.6rem; align-items:center; margin-top:3rem; flex-wrap:wrap; } .host img{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } .host p{ margin:0; max-width:52ch; font-size:.97rem; } .host .mono{ color:var(--ink-soft); display:block; margin-top:.5rem; font-size:.78rem; } /* Galerie */ .gallery{ display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr); } @media (min-width:760px){ .gallery{ grid-template-columns:repeat(4,1fr); } } .gallery button{ padding:0; border:0; background:none; cursor:pointer; border-radius:var(--radius); overflow:hidden; } .gallery img{ aspect-ratio:1/1; object-fit:cover; width:100%; transition:transform .35s ease; } .gallery button:hover img{ transform:scale(1.04); } dialog.lightbox{ border:0; padding:0; background:rgba(10,16,15,.94); max-width:100vw; max-height:100vh; width:100%; height:100%; } dialog.lightbox::backdrop{ background:rgba(10,16,15,.9); } .lb-inner{ height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1rem; } .lb-inner img{ max-height:78svh; max-width:94vw; width:auto; border-radius:10px; } .lb-inner figcaption{ color:#cfd8d2; } .lb-nav{ display:flex; gap:.8rem; } .lb-nav button{ font:inherit; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:.55rem 1.2rem; cursor:pointer; } .lb-nav button:hover{ background:rgba(255,255,255,.2); } /* Footer */ footer{ border-top:1px solid var(--line); padding:2.5rem 0 3rem; font-size:.88rem; color:var(--ink-soft); } footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem 2.4rem; justify-content:space-between; align-items:center; } footer a{ color:inherit; } footer .mono{ font-size:.72rem; letter-spacing:.08em; } /* Reveals */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .hero-media img{ animation:none; } .btn:hover{ transform:none; } } /* Unterseiten (Impressum/Datenschutz) */ .legal{ padding-top:9rem; min-height:70vh; } .legal h1{ font-size:clamp(2rem,4vw,3rem); } .legal .todo{ background:#FFF3D6; border:1px dashed #C9A24B; color:#6b5310; padding: .9rem 1.1rem; border-radius:10px; font-size:.92rem; }