/* ============================================================ Workation Vrådal 2026 ============================================================ */ :root{ --paper:#f6f3ee; --surface:#fffdfa; --surface-2:#efeae2; --ink:#15191d; --ink-2:#3d474e; --muted:#6d7a82; --line:#e0d9cf; --line-2:#cfc6b9; --accent:#c0522a; --accent-soft:#f0dcd2; --fjord:#2b6079; --shadow:0 1px 2px rgba(20,24,28,.05),0 8px 28px -12px rgba(20,24,28,.16); --shadow-lg:0 2px 6px rgba(20,24,28,.06),0 24px 60px -20px rgba(20,24,28,.3); --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --r:14px; --r-sm:9px; --wrap:1180px; --ease:cubic-bezier(.22,.61,.36,1); } html[data-theme="dark"]{ --paper:#0d1216; --surface:#141b21; --surface-2:#1b242b; --ink:#eef2f5; --ink-2:#c2ced6; --muted:#8b9aa4; --line:#232f37; --line-2:#31404a; --accent:#e9784a; --accent-soft:#3a231a; --fjord:#6bb2cf; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.8); } *,*::before,*::after{box-sizing:border-box} /* overflow-x must live on : on it computes overflow-y to `auto`, which turns body into the scroll container and breaks window.scrollY — taking the progress bar, scroll-spy nav and anchor links with it. */ html{ scroll-behavior:smooth;scroll-padding-top:74px; -webkit-text-size-adjust:100%;overflow-x:hidden; } body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:16.5px;line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} /* Icon styling MUST stay scoped to .ic. As a bare `svg{}` rule this also hit Leaflet's overlay SVG — and because CSS beats presentation attributes it overrode every route's stroke and width, and stretched the overlay to 100%/100% so the paths no longer lined up with the map. */ .ic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} a{color:inherit} ::selection{background:var(--accent);color:#fff} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)} /* ── scroll progress ─────────────────────────────────────── */ .progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:60; background:linear-gradient(90deg,var(--accent),var(--fjord)); transition:width .1s linear; } /* ── nav ─────────────────────────────────────────────────── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;gap:24px; padding:14px clamp(20px,5vw,40px); background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; } .nav.is-stuck{border-bottom-color:var(--line)} .nav-brand{ display:flex;align-items:center;gap:10px;text-decoration:none; font-family:var(--serif);font-size:19px;letter-spacing:.01em;margin-right:auto; } .nav-brand em{font-style:normal;color:var(--muted)} .nav-mark{ width:11px;height:11px;border-radius:50%;flex:none; background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft); } .nav-links{display:flex;gap:26px} .nav-links a{ text-decoration:none;font-size:14px;color:var(--muted); padding:4px 0;position:relative;transition:color .2s; } .nav-links a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px; background:var(--accent);transition:right .3s var(--ease); } .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after,.nav-links a.is-on::after{right:0} .nav-links a.is-on{color:var(--ink)} .theme-toggle{ width:36px;height:36px;flex:none;border-radius:50%;padding:8px; border:1px solid var(--line);color:var(--muted); display:grid;place-items:center;transition:.2s; } .theme-toggle:hover{color:var(--ink);border-color:var(--line-2);transform:rotate(18deg)} .theme-toggle svg{position:absolute;width:19px;height:19px;transition:.3s var(--ease)} .i-moon{opacity:0;transform:scale(.5) rotate(-40deg)} html[data-theme="dark"] .i-sun{opacity:0;transform:scale(.5) rotate(40deg)} html[data-theme="dark"] .i-moon{opacity:1;transform:none} @media(max-width:820px){ .nav-links{display:none} } /* ── hero ────────────────────────────────────────────────── */ .hero{ position:relative;min-height:100svh;display:flex;align-items:flex-end; padding:120px 0 clamp(40px,7vh,72px);overflow:hidden;isolation:isolate; } .hero-media{position:absolute;inset:0;z-index:-2;background:#0b1114} .hero-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.6s var(--ease); } .hero-media img.is-on{opacity:1} .hero-scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(8,12,15,.55) 0%,rgba(8,12,15,.15) 32%,rgba(8,12,15,.72) 78%,rgba(8,12,15,.94) 100%), radial-gradient(120% 80% at 15% 100%,rgba(8,12,15,.6),transparent 60%); } .hero-inner{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px);width:100%;color:#fff} .hero-kicker{ font-size:12.5px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.72);margin:0 0 18px; display:flex;align-items:center;gap:12px; } .hero-kicker::before{content:"";width:38px;height:1px;background:rgba(255,255,255,.5)} .hero-title{ font-family:var(--serif);font-weight:400;margin:0; font-size:clamp(3.4rem,11vw,8.2rem);line-height:.92;letter-spacing:-.025em; text-shadow:0 2px 40px rgba(0,0,0,.35); } .hero-title span{font-style:italic;color:#f3c9a8} .hero-sub{ margin:22px 0 0;font-size:clamp(15px,2vw,17px);letter-spacing:.06em; color:rgba(255,255,255,.9); } .hero-lede{ margin:14px 0 0;max-width:48ch;font-size:16px;line-height:1.7; color:rgba(255,255,255,.74); } .hero-stats{ display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,54px); margin-top:clamp(30px,5vh,48px);padding-top:26px; border-top:1px solid rgba(255,255,255,.18); } .hs{min-width:74px} .hs-v{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);line-height:1;color:#fff} .hs-v small{font-size:.46em;letter-spacing:.04em;margin-left:3px;color:rgba(255,255,255,.7)} .hs-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.6);margin-top:8px} .hero-cue{ position:absolute;bottom:22px;left:50%;transform:translateX(-50%); width:38px;height:38px;color:rgba(255,255,255,.8);animation:bob 2.4s infinite; } @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}} /* ── sections ────────────────────────────────────────────── */ .section{padding:clamp(72px,11vh,132px) 0;position:relative} .section--alt{background:var(--surface-2)} .section--tight{padding:clamp(56px,8vh,92px) 0} .sec-head{margin-bottom:clamp(34px,5vh,54px);max-width:64ch} .sec-num{ font-family:var(--mono);font-size:12px;letter-spacing:.16em; color:var(--accent);display:block;margin-bottom:12px; } .sec-head h2{ font-family:var(--serif);font-weight:400;letter-spacing:-.02em; font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;margin:0; } .sec-note{margin:14px 0 0;color:var(--muted);font-size:15.5px;max-width:56ch} .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow); } /* ── crew ────────────────────────────────────────────────── */ .crew-grid{ display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); } .crew-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:24px 22px;position:relative;overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .crew-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c); } .crew-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .crew-av{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center; font-family:var(--serif);font-size:17px;letter-spacing:.02em; color:#fff;background:var(--c);margin-bottom:16px; } .crew-card h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em} .crew-role{margin:3px 0 12px;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--c);font-weight:600} .crew-note{margin:0;font-size:14.2px;color:var(--muted);line-height:1.6} .crew-card.is-empty{border-style:dashed;box-shadow:none;background:transparent} .crew-card.is-empty .crew-av{opacity:.5} .crew-data{list-style:none;margin:0;padding:0;display:grid;gap:5px} .crew-data li{font-size:13.8px;color:var(--muted);padding-left:15px;position:relative} .crew-data li::before{content:"";position:absolute;left:0;top:.62em; width:5px;height:5px;border-radius:50%;background:var(--c)} .crew-data b{color:var(--ink);font-weight:600} .crew-hint{margin:18px 0 0;font-size:14px;color:var(--muted);max-width:62ch; padding-left:14px;border-left:2px solid var(--line-2)} /* who was there */ .d-who{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:18px} .wchip{ display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px; border-radius:100px;background:var(--surface-2);font-size:13px; } .wchip i{ width:21px;height:21px;border-radius:50%;background:var(--c);color:#fff; display:grid;place-items:center;font-size:9.5px;font-style:normal;font-weight:600; } .d-who-ev{font-size:12.2px;color:var(--muted);font-style:italic;flex:1 1 220px} /* track endpoints */ .tp{width:12px;height:12px;border-radius:50%;border:3px solid #fff; background:var(--c);box-shadow:0 1px 5px rgba(0,0,0,.5)} .tp-b{border-radius:2px;transform:rotate(45deg)} /* focus mode: one route, everything else pushed back */ #map.is-focus .leaflet-tile{filter:saturate(.55) brightness(.92)} html[data-theme="dark"] #map.is-focus .leaflet-tile{filter:saturate(.5) brightness(.8)} .photo-pin--focus{border-color:var(--accent);width:15px;height:15px;cursor:pointer} .trk-tip{ background:var(--surface)!important;color:var(--ink)!important; border:1px solid var(--line)!important;border-radius:var(--r-sm)!important; box-shadow:var(--shadow)!important;font-size:12.6px!important;padding:7px 11px!important; } .trk-tip::before{display:none} .seg--map{width:100%} .seg--map button{flex:1;font-size:12.4px;padding:6px 10px} kbd{ font-family:var(--mono);font-size:.86em;padding:1px 6px;border-radius:5px; border:1px solid var(--line-2);background:var(--surface-2); } .cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:18px} .cardbox{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-sm);padding:14px 16px} .cardbox .k{display:block;font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted)} .cardbox .v{display:block;font-family:var(--serif);font-size:1.3rem;margin-top:6px} .cardbox .v small{font-size:.5em;color:var(--muted)} .cardbox .s{display:block;font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-top:3px} .badge--card{background:var(--fjord);color:#fff} .rules{ margin-top:22px;padding:24px 26px;border-radius:var(--r); background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--fjord); } .rules h4{ margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fjord); } .rules ul{margin:0;padding:0;list-style:none;display:grid;gap:9px} .rules li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-2)} .rules li::before{ content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px; border-radius:50%;border:1.5px solid var(--fjord); } /* ── map ─────────────────────────────────────────────────── */ .map-shell{ display:grid;grid-template-columns:314px 1fr;gap:18px; align-items:start; } @media(max-width:940px){ .map-shell{grid-template-columns:1fr} } .map-side{display:flex;flex-direction:column;gap:14px;min-width:0} .map-filters{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:18px; } .fl{ margin:0 0 10px;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); } .fl:not(:first-child){margin-top:18px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{ display:inline-flex;align-items:center;gap:7px; padding:6px 12px;border-radius:100px;font-size:13px; border:1px solid var(--line-2);color:var(--muted); transition:.18s var(--ease);white-space:nowrap; } .chip:hover{border-color:var(--ink-2);color:var(--ink)} .chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)} .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none} .chip.is-on .dot{box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 40%,transparent)} .chips--day .chip{padding:5px 10px;font-size:12.5px;font-family:var(--mono)} .map-list{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); max-height:474px;overflow-y:auto;overscroll-behavior:contain; } .mi{ display:flex;gap:13px;align-items:center;padding:13px 16px;width:100%; text-align:left;border-bottom:1px solid var(--line);transition:.16s; } .mi:last-child{border-bottom:0} .mi:hover{background:var(--surface-2)} .mi.is-on{background:var(--accent-soft)} .mi-ic{ width:32px;height:32px;flex:none;border-radius:9px;padding:7px; color:#fff;background:var(--c); } .mi-b{min-width:0;flex:1;display:block} .mi-t{display:block;font-size:14.4px;font-weight:550;letter-spacing:-.005em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mi-s{display:block;font-size:12.4px;color:var(--muted);font-family:var(--mono);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mi-badge{ font-size:11px;font-family:var(--mono);color:var(--muted); border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;flex:none; } .map-box{position:relative;border-radius:var(--r);overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow)} #map{height:min(74vh,620px);min-height:430px;background:var(--surface-2);z-index:1} @media(max-width:940px){ #map{height:64vh;min-height:380px} } .map-legend{ position:absolute;left:12px;bottom:12px;z-index:400; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(10px);border:1px solid var(--line); border-radius:var(--r-sm);padding:10px 13px; display:flex;flex-wrap:wrap;gap:5px 15px;max-width:calc(100% - 24px); box-shadow:var(--shadow); } .lg{display:flex;align-items:center;gap:7px;font-size:11.6px;color:var(--ink-2)} .lg i{width:15px;height:3px;border-radius:2px;background:var(--c);flex:none} .lg i.pin{width:9px;height:9px;border-radius:50%;border:2px solid var(--c);background:transparent} .lg i.pin--full{background:var(--c)} .lg--sep{border-left:1px solid var(--line);padding-left:15px} .map-reset{ position:absolute;right:12px;top:12px;z-index:400; width:34px;height:34px;padding:8px;border-radius:9px; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(10px);border:1px solid var(--line); color:var(--ink-2);box-shadow:var(--shadow);transition:.2s; } .map-reset:hover{color:var(--accent);transform:rotate(-90deg)} .map-wide{top:54px} .map-wide:hover{transform:none;color:var(--fjord)} /* leaflet overrides */ .leaflet-container{font-family:var(--sans);background:var(--surface-2)} .leaflet-popup-content-wrapper{ border-radius:var(--r-sm);box-shadow:var(--shadow-lg); background:var(--surface);color:var(--ink);border:1px solid var(--line); } .leaflet-popup-tip{background:var(--surface);border:1px solid var(--line)} .leaflet-popup-content{margin:13px 15px;font-size:13.6px;line-height:1.55} .leaflet-popup-content b{font-size:14.6px;letter-spacing:-.01em} .leaflet-popup-content .pm{ font-family:var(--mono);font-size:11.5px;color:var(--muted); display:block;margin-top:5px; } .leaflet-popup-close-button{color:var(--muted)!important} .leaflet-bar a{background:var(--surface);color:var(--ink);border-color:var(--line)} .leaflet-bar a:hover{background:var(--surface-2)} .leaflet-control-attribution{ background:color-mix(in srgb,var(--surface) 86%,transparent)!important; color:var(--muted)!important;font-size:10.5px!important; } .leaflet-control-attribution a{color:var(--muted)!important} /* the dark theme already swaps to CARTO dark_all — no extra dimming filter, it turns rural Telemark into a black rectangle */ .poi-pin{ width:19px;height:19px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg); border:2.5px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.4); background:var(--c); } /* an option from the guide, not somewhere the data says we went */ .poi-pin.is-plan{ background:transparent;border-color:var(--c);border-width:2.5px; box-shadow:0 1px 4px rgba(0,0,0,.25);opacity:.75; } .badge{ display:inline-block;margin-left:7px;padding:1px 7px;border-radius:100px; font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:600; vertical-align:middle; } .badge--b{background:var(--accent);color:#fff} .badge--p{background:var(--surface-2);color:var(--muted)} .pm--ev{color:var(--accent)!important} .plan-note{ margin:0 0 22px;padding:16px 20px;border-radius:var(--r); background:var(--surface-2);border-left:3px solid var(--muted); font-size:14.6px;color:var(--ink-2);line-height:1.6;max-width:74ch; } .tag--pic{background:color-mix(in srgb,var(--fjord) 14%,transparent);color:var(--fjord)} .poi-pin.star{width:23px;height:23px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent),0 2px 7px rgba(0,0,0,.4)} .photo-pin{ width:13px;height:13px;border-radius:50%; background:#fff;border:3px solid var(--fjord);box-shadow:0 1px 5px rgba(0,0,0,.35); } /* ── detail panel ────────────────────────────────────────── */ .detail{ margin-top:18px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:26px clamp(20px,3vw,30px);box-shadow:var(--shadow); animation:rise .38s var(--ease); } @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .d-top{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-bottom:22px} .d-ic{width:44px;height:44px;flex:none;border-radius:12px;padding:10px;color:#fff;background:var(--c)} .d-h{flex:1;min-width:200px} .d-h h3{margin:0;font-family:var(--serif);font-size:1.55rem;font-weight:400;letter-spacing:-.015em} .d-h p{margin:5px 0 0;font-size:13.4px;color:var(--muted);font-family:var(--mono)} .d-x{width:32px;height:32px;padding:8px;border-radius:8px;border:1px solid var(--line);color:var(--muted)} .d-x:hover{color:var(--accent);border-color:var(--accent)} .d-quote{ margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--accent); background:var(--accent-soft);border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:15px;font-style:italic;color:var(--ink-2);white-space:pre-line; } /* flex, not grid: the cell count varies per activity (8–11) and auto-fit left a stranded cell with a wide empty gap on the last row */ .d-grid{ display:flex;flex-wrap:wrap;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden; } .d-cell{background:var(--surface);padding:14px 16px;flex:1 1 128px;min-width:128px} .d-kudos{ font-size:12.4px;font-family:var(--mono);color:var(--muted); padding:6px 12px;border-radius:100px;background:var(--surface-2); } .d-kudos--pr{background:var(--accent-soft);color:var(--accent)} .d-cell .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .d-cell .v{font-family:var(--serif);font-size:1.34rem;margin-top:5px;letter-spacing:-.01em} .d-cell .v small{font-size:.56em;color:var(--muted);margin-left:2px} .d-foot{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center} .btn{ display:inline-flex;align-items:center;gap:8px;padding:9px 16px; border-radius:100px;font-size:13.6px;text-decoration:none; border:1px solid var(--line-2);color:var(--ink-2);transition:.2s var(--ease); } .btn:hover{border-color:var(--accent);color:var(--accent);transform:translateX(2px)} .btn svg{width:15px;height:15px} .d-shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px} .d-shots img{ width:74px;height:74px;object-fit:cover;border-radius:var(--r-sm); cursor:pointer;transition:.24s var(--ease);border:1px solid var(--line); } .d-shots img:hover{transform:scale(1.09) translateY(-2px);box-shadow:var(--shadow-lg)} /* ── timeline ────────────────────────────────────────────── */ .timeline{position:relative;display:grid;gap:14px} .timeline::before{ content:"";position:absolute;left:83px;top:16px;bottom:16px;width:1px; background:linear-gradient(180deg,transparent,var(--line-2) 8%,var(--line-2) 92%,transparent); } @media(max-width:700px){ .timeline::before{display:none} } .day{ display:grid;grid-template-columns:68px 1fr;gap:30px;align-items:start; position:relative; } @media(max-width:700px){ .day{grid-template-columns:1fr;gap:8px} } .day-date{text-align:right;padding-top:20px;position:relative} .day-dow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .day-num{font-family:var(--serif);font-size:2rem;line-height:1;margin-top:2px} .day-mon{font-size:11.5px;color:var(--muted);letter-spacing:.08em} @media(max-width:700px){ .day-date{text-align:left;display:flex;align-items:baseline;gap:9px;padding-top:0} .day-num{font-size:1.4rem} } .day-date::after{ content:"";position:absolute;right:-45px;top:28px;width:11px;height:11px; border-radius:50%;background:var(--paper);border:2px solid var(--line-2);z-index:1; } .section--alt .day-date::after{background:var(--surface-2)} .day.has-data .day-date::after{border-color:var(--accent);background:var(--accent)} .day.is-future .day-date::after{border-style:dashed} @media(max-width:700px){ .day-date::after{display:none} } .day-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;transition:.3s var(--ease); } .day-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .day.is-future .day-card{background:transparent;border-style:dashed;box-shadow:none} .day-card h3{margin:0;font-size:17.5px;font-weight:600;letter-spacing:-.012em; display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tag{ font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; padding:3px 9px;border-radius:100px;background:var(--accent-soft);color:var(--accent); } .tag--fix{background:color-mix(in srgb,var(--fjord) 15%,transparent);color:var(--fjord)} .tag--soon{background:var(--surface-2);color:var(--muted)} .day-card p{margin:9px 0 0;font-size:14.8px;color:var(--muted);line-height:1.62} .day-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px} .act-pill{ display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px; border-radius:100px;font-size:12.8px;border:1px solid var(--line); background:var(--surface);transition:.2s var(--ease); } .act-pill:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:var(--shadow)} .act-pill i{width:21px;height:21px;padding:4px;border-radius:50%;color:#fff;background:var(--c);flex:none} .act-pill b{font-weight:550} .act-pill span{color:var(--muted);font-family:var(--mono);font-size:11.6px} .day-shots{display:flex;gap:5px;margin-top:14px;flex-wrap:wrap} .day-shots img{ width:52px;height:52px;object-fit:cover;border-radius:7px;cursor:pointer; border:1px solid var(--line);transition:.22s var(--ease); } .day-shots img:hover{transform:scale(1.12);z-index:2;box-shadow:var(--shadow-lg)} .day-more{ font-size:12px;color:var(--muted);align-self:center;padding-left:5px; font-family:var(--mono); } /* ── stats ───────────────────────────────────────────────── */ .kpis{ display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;margin-bottom:22px; /* fixed column count: 8 KPIs divide evenly, auto-fit orphaned the last cell */ grid-template-columns:repeat(4,1fr); } @media(max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} } .kpi{background:var(--surface);padding:24px 22px;transition:background .3s} .kpi:hover{background:var(--surface-2)} .kpi-v{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1; letter-spacing:-.022em;color:var(--ink)} .kpi-v small{font-size:.42em;color:var(--muted);margin-left:3px;letter-spacing:0} .kpi-k{font-size:11px;letter-spacing:.15em;text-transform:uppercase; color:var(--muted);margin-top:11px} .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} @media(max-width:860px){ .chart-grid{grid-template-columns:1fr} } .chart-card{margin:0;padding:26px clamp(20px,3vw,28px)} .chart-card figcaption{margin-bottom:22px} .chart-card h3{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.012em} .chart-card figcaption p{margin:5px 0 0;font-size:13.6px;color:var(--muted)} .bar-row{display:grid;grid-template-columns:112px 1fr auto;gap:14px; align-items:center;margin-bottom:11px} .bar-row:last-child{margin-bottom:0} .bar-lab{font-size:13.4px;color:var(--ink-2);display:flex;align-items:center;gap:8px} .bar-lab i{width:19px;height:19px;padding:3.5px;border-radius:50%;color:#fff;background:var(--c);flex:none} .bar-track{height:9px;border-radius:100px;background:var(--surface-2);overflow:hidden} .bar-fill{height:100%;border-radius:100px;background:var(--c); width:0;transition:width 1.1s var(--ease)} .bar-val{font-family:var(--mono);font-size:12.4px;color:var(--muted); min-width:52px;text-align:right} .day-cols{display:flex;align-items:flex-end;gap:clamp(6px,1.6vw,14px);height:186px; padding-top:26px} .dc{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px; height:100%;justify-content:flex-end;position:relative} .dc-bar{ width:100%;max-width:46px;border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,transparent)); height:0;transition:height 1s var(--ease);position:relative;min-height:2px; } .dc.is-empty .dc-bar{background:var(--line-2);opacity:.55} .dc-v{position:absolute;top:-22px;left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:11.4px;color:var(--muted);white-space:nowrap} .dc-l{font-size:11.4px;color:var(--muted);font-family:var(--mono)} .dc:hover .dc-bar{filter:brightness(1.12)} /* ── week rhythm ─────────────────────────────────────────── */ .rhythm{display:grid;gap:5px} .rrow{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center} .rlab{font-size:12.4px;color:var(--muted);font-family:var(--mono);text-align:right} .rlab b{color:var(--ink);font-weight:600} .rrow.is-idle .rlab{opacity:.45} .rtrack{ position:relative;height:30px;border-radius:7px; background:var(--surface-2);overflow:hidden; } .rrow.is-idle .rtrack{background:transparent;border:1px dashed var(--line)} .rg{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.85} .rticks{position:absolute;inset:0} .rt{ position:absolute;top:3px;width:2px;height:5px;border-radius:1px; background:var(--fjord);opacity:.55; } .rb{ position:absolute;top:9px;height:18px;border-radius:5px;background:var(--c); display:flex;align-items:center;justify-content:center;padding:0; min-width:8px;transition:.18s var(--ease);color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); } .rb i{width:12px;height:12px;display:block;opacity:.95} .rb:hover{transform:scaleY(1.24);z-index:3;box-shadow:var(--shadow-lg)} .rrow--axis .rtrack{background:transparent;height:16px;overflow:visible} .rh{ position:absolute;top:0;transform:translateX(-50%); font-size:10.5px;color:var(--muted);font-family:var(--mono); } .rlegend{ display:flex;gap:18px;margin:16px 0 0;font-size:12px;color:var(--muted); } .rlegend span{display:flex;align-items:center;gap:7px} .rlegend i{display:block;border-radius:3px} .rlegend .k-b{width:16px;height:9px;background:var(--accent)} .rlegend .k-t{width:2px;height:9px;background:var(--fjord);border-radius:1px} @media(max-width:560px){ .rrow{grid-template-columns:44px 1fr;gap:8px} .rlab{font-size:11px} } .chart-card--wide{margin-top:0} .profile-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px} .ptab{ padding:6px 13px;border-radius:100px;font-size:12.8px; border:1px solid var(--line-2);color:var(--muted);transition:.18s; } .ptab:hover{color:var(--ink);border-color:var(--ink-2)} .ptab.is-on{background:var(--c);border-color:var(--c);color:#fff} .prof-wrap{position:relative} .prof-read{ position:absolute;top:0;right:0;font-family:var(--mono);font-size:12px; color:var(--muted);background:var(--surface);padding:3px 8px;border-radius:6px; border:1px solid var(--line);pointer-events:none;opacity:0;transition:opacity .2s; } .prof-read.is-on{opacity:1} /* ── gallery ─────────────────────────────────────────────── */ .chips--gal{margin-bottom:22px} .gallery{columns:4 232px;column-gap:12px} @media(max-width:640px){ .gallery{columns:2 130px;column-gap:8px} } .gi{ break-inside:avoid;margin-bottom:12px;position:relative; border-radius:var(--r-sm);overflow:hidden;cursor:pointer; background:var(--surface-2);display:block;width:100%;padding:0; transition:transform .34s var(--ease),box-shadow .34s var(--ease); } @media(max-width:640px){ .gi{margin-bottom:8px} } .gi img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)} .gi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);z-index:2} .gi:hover img{transform:scale(1.045)} .gi-meta{ position:absolute;inset:auto 0 0 0;padding:22px 12px 9px; background:linear-gradient(180deg,transparent,rgba(8,12,15,.82)); color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.02em; opacity:0;transform:translateY(6px);transition:.28s var(--ease); display:flex;justify-content:space-between;gap:8px; } .gi:hover .gi-meta{opacity:1;transform:none} .gi-gps{color:#ffd9b8} /* ── lightbox ────────────────────────────────────────────── */ .lb{ position:fixed;inset:0;z-index:100;display:grid;place-items:center; background:rgba(6,9,12,.94);backdrop-filter:blur(8px); animation:fade .26s var(--ease); } /* author display wins over the UA [hidden] rule, so restate it */ .lb[hidden],.detail[hidden]{display:none} @keyframes fade{from{opacity:0}to{opacity:1}} .lb-fig{margin:0;max-width:94vw;max-height:92vh;display:flex; flex-direction:column;align-items:center;gap:14px} .lb-fig img{ max-width:94vw;max-height:80vh;object-fit:contain;border-radius:5px; box-shadow:0 30px 90px rgba(0,0,0,.65);animation:pop .34s var(--ease); } @keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} .lb-fig figcaption{ color:rgba(255,255,255,.62);font-family:var(--mono);font-size:12.2px; text-align:center;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center; max-width:min(94vw,760px); } .lb-fig figcaption b{color:#fff;font-weight:500} /* a hand-written caption is the one line worth reading first, so it gets the whole row to itself instead of queueing behind the EXIF chips */ .lb-fig figcaption .lb-cap{flex-basis:100%;font-family:var(--sans); font-size:15px;line-height:1.45;font-weight:400} .lb-x{ position:absolute;top:18px;right:22px;font-size:34px;line-height:1; color:rgba(255,255,255,.62);width:44px;height:44px;transition:.2s; } .lb-x:hover{color:#fff;transform:rotate(90deg)} .lb-nav{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;padding:13px;border-radius:50%; color:rgba(255,255,255,.68);background:rgba(255,255,255,.07);transition:.2s; } .lb-nav:hover{background:rgba(255,255,255,.16);color:#fff} .lb-prev{left:18px} .lb-next{right:18px} @media(max-width:640px){ .lb-nav{width:42px;height:42px;padding:11px} .lb-prev{left:8px} .lb-next{right:8px} } /* ── guide ───────────────────────────────────────────────── */ .tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px; border-bottom:1px solid var(--line);padding-bottom:16px} .tab{ padding:8px 16px;border-radius:100px;font-size:14px; color:var(--muted);border:1px solid transparent;transition:.2s var(--ease); } .tab:hover{color:var(--ink);background:var(--surface-2)} .tab.is-on{background:var(--ink);color:var(--paper)} .pane{display:none;animation:rise .34s var(--ease)} .pane.is-on{display:block} .g-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .g-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;transition:.3s var(--ease); } .g-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .g-card h4{margin:0 0 8px;font-size:15.4px;font-weight:600;display:flex; align-items:center;gap:10px;letter-spacing:-.008em} .g-card h4 i{width:30px;height:30px;flex:none;padding:7px;border-radius:9px; background:var(--accent-soft);color:var(--accent)} .g-card p{margin:0;font-size:14.4px;color:var(--muted);line-height:1.62} .g-card .eff{ font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; color:var(--fjord);margin:0 0 7px; } .fixlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .fix{background:var(--surface);padding:18px 22px;display:grid; grid-template-columns:auto 168px 1fr;gap:18px;align-items:center} @media(max-width:760px){ .fix{grid-template-columns:auto 1fr;gap:10px} } .fix i{width:34px;height:34px;padding:8px;border-radius:10px; background:var(--accent-soft);color:var(--accent);flex:none} .fix-w{font-family:var(--mono);font-size:13px;color:var(--accent)} .fix-b b{display:block;font-size:15.2px;font-weight:600;letter-spacing:-.008em} .fix-b span{font-size:13.6px;color:var(--muted)} @media(max-width:760px){ .fix-w{grid-column:2} .fix-b{grid-column:2} } .wx-cases{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin-top:16px} .wx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px} .wx b{display:block;font-size:14.6px;margin-bottom:7px} .wx p{margin:0;font-size:14px;color:var(--muted);line-height:1.6} .wx-rule{ background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--r);padding:22px 24px;margin-bottom:16px; } .wx-rule b{color:var(--accent);display:block;font-size:11px;letter-spacing:.16em; text-transform:uppercase;margin-bottom:9px} .wx-rule p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);font-family:var(--serif)} /* ── der einkauf ─────────────────────────────────────────── */ .shop-sec{position:relative;overflow:hidden;isolation:isolate} .shop-bg{ position:absolute;inset:0 0 auto 0;height:clamp(280px,42vh,460px);z-index:-1; background-size:cover;background-position:center 38%;opacity:.16; filter:saturate(.8); -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,transparent 100%); } html[data-theme="dark"] .shop-bg{opacity:.2} .shop-hero{display:grid;grid-template-columns:minmax(260px,1.1fr) 2fr;gap:16px;margin-bottom:20px} @media(max-width:820px){ .shop-hero{grid-template-columns:1fr} } .sh-main{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:26px 28px;border-left:3px solid var(--accent);box-shadow:var(--shadow); } .sh-main .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} .sh-main .v{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.4rem); line-height:1;letter-spacing:-.03em;margin-top:10px} .sh-main .v small{font-size:.3em;color:var(--muted);margin-left:8px;letter-spacing:.04em} .sh-main .s{display:block;font-size:13.4px;color:var(--muted);margin-top:12px;line-height:1.6} .sh-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(122px,1fr))} .sh-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); padding:16px 18px;display:flex;flex-direction:column;justify-content:center; } .sh-card .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .sh-card .v{font-family:var(--serif);font-size:1.45rem;margin-top:5px;letter-spacing:-.015em} .sh-card .s{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:3px} .facts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-bottom:18px} .fact{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;position:relative;transition:.3s var(--ease); } .fact:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .fact i{display:block;width:32px;height:32px;padding:7px;border-radius:10px; background:var(--accent-soft);color:var(--accent);margin-bottom:14px} .fact h4{margin:0 0 7px;font-size:16px;font-weight:600;letter-spacing:-.012em} .fact p{margin:0;font-size:14.2px;color:var(--muted);line-height:1.6} .fact-v{ display:inline-block;margin-top:13px;font-family:var(--mono);font-size:12.4px; color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:100px; } .shop-cats{margin-bottom:18px} .bar-row--btn{width:100%;text-align:left;padding:3px 0;border-radius:7px; transition:.18s;cursor:pointer;border:0;background:none} .bar-row--btn:hover{background:var(--surface-2)} .bar-row--btn.is-off{opacity:.3} .rcpt-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center; justify-content:space-between;margin-bottom:16px} .rcpt-head h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.5rem} .rc-dot{display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--c);margin-right:9px;flex:none} .rc-lines li em{font-style:normal;font-size:11px;color:var(--muted);opacity:.7} .rc-lines li span{display:flex;align-items:center;min-width:0} /* ── belege ──────────────────────────────────────────────── */ .spend-head{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:20px} @media(max-width:620px){ .spend-head{grid-template-columns:1fr} } .spend-big{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;border-left:3px solid var(--accent); } .spend-big--muted{border-left-color:var(--muted)} .spend-big .k{display:block;font-size:11px;letter-spacing:.15em; text-transform:uppercase;color:var(--muted)} .spend-big .v{display:block;font-family:var(--serif);font-size:2.1rem; line-height:1.1;margin-top:8px;letter-spacing:-.02em} .spend-big .v small{font-size:.42em;color:var(--muted);margin-left:3px} .spend-big .s{display:block;font-size:13px;color:var(--muted);margin-top:6px;font-family:var(--mono)} .rcpts{display:grid;gap:12px} .rcpt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:20px 22px;transition:.25s var(--ease)} .rcpt:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .rcpt header{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between; align-items:baseline;margin-bottom:10px} .rcpt header b{font-size:16px;letter-spacing:-.01em} .rc-when{display:block;font-size:12.4px;color:var(--muted);font-family:var(--mono);margin-top:4px} .rc-tot{font-family:var(--serif);font-size:1.3rem;color:var(--accent);white-space:nowrap} .rc-note{margin:0 0 12px;font-size:14.4px;color:var(--ink-2);line-height:1.6} .rc-lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .rc-lines li{display:flex;justify-content:space-between;gap:14px; padding:6px 0;font-size:13.6px;color:var(--muted); border-bottom:1px solid var(--line)} .rc-lines li:last-child{border-bottom:0} .rc-lines b{font-family:var(--mono);font-size:12.8px;color:var(--ink-2);white-space:nowrap} .tag--pay{background:color-mix(in srgb,#7a9a3f 16%,transparent);color:#5f7a2c} html[data-theme="dark"] .tag--pay{color:#a9c96f} .budget-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px} .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:100px;overflow:hidden} .seg button{padding:7px 15px;font-size:13px;color:var(--muted);transition:.2s} .seg button.is-on{background:var(--ink);color:var(--paper)} .btab{width:100%;border-collapse:collapse;font-size:14.6px} .btab td{padding:12px 14px;border-bottom:1px solid var(--line)} .btab tr:hover td{background:var(--surface-2)} .btab td:last-child{text-align:right;font-family:var(--mono);font-size:13.6px;white-space:nowrap} .btab .tot td{font-weight:600;border-top:2px solid var(--line-2);border-bottom:0;font-size:16px} .btab .tot td:last-child{font-size:16px;color:var(--accent)} .btab .sub td{color:var(--muted);border-bottom:0} .budget-wrap{background:var(--surface);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .budget-note{margin:14px 0 0;font-size:13.4px;color:var(--muted)} .pack-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))} .pack{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px} .pack h4{margin:0 0 4px;font-size:15px;font-weight:600} .pack-bar{height:3px;border-radius:2px;background:var(--surface-2);margin:10px 0 16px;overflow:hidden} .pack-bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .5s var(--ease)} .pack label{ display:flex;gap:11px;align-items:flex-start;padding:7px 0; font-size:14.2px;color:var(--ink-2);cursor:pointer;line-height:1.5; } .pack input{ appearance:none;width:17px;height:17px;flex:none;margin-top:2px; border:1.5px solid var(--line-2);border-radius:5px;transition:.18s;position:relative; } .pack input:checked{background:var(--accent);border-color:var(--accent)} .pack input:checked::after{ content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg); } .pack input:checked+span{text-decoration:line-through;color:var(--muted)} .contacts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .ct{background:var(--surface);padding:15px 20px;display:flex;flex-wrap:wrap; gap:10px;justify-content:space-between;align-items:center} .ct:hover{background:var(--surface-2)} .ct b{font-size:14.4px;font-weight:550} .ct span{font-family:var(--mono);font-size:13.4px;color:var(--muted)} .ct.urgent{background:var(--accent-soft)} .ct.urgent b,.ct.urgent span{color:var(--accent)} .car-notes{display:grid;gap:12px;margin-top:16px} .cn{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--fjord); border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px} .cn b{display:block;font-size:14.4px;margin-bottom:5px} .cn p{margin:0;font-size:14px;color:var(--muted);line-height:1.6} /* ── footer ──────────────────────────────────────────────── */ .foot{padding:clamp(60px,9vh,100px) 0 46px;border-top:1px solid var(--line); background:var(--surface-2)} .foot-big{ font-family:var(--serif);font-size:clamp(1.9rem,5.6vw,3.4rem);margin:0; letter-spacing:-.024em;line-height:1.05; } .foot-sub{margin:20px 0 0;font-size:13.2px;color:var(--muted);line-height:1.9} .foot-sub b{color:var(--ink-2);font-weight:550} /* ── reveal ──────────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .rv{opacity:1;transform:none} } /* multi-colour swatch for the Aktivitäten layer chip */ .dot--multi{ background:conic-gradient(#f4703a 0 25%,#7a9a3f 0 50%,#3d8ea8 0 75%,#8a6bb0 0)!important; } .chip--plan{border-style:dashed} .rc-q{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent); background:var(--accent-soft);padding:1px 7px;border-radius:100px;margin-left:8px} .gal-more{display:flex;justify-content:center;margin-top:22px} .btn--more{padding:11px 24px;font-size:14px;border-color:var(--line-2)} .btn--more:hover{transform:none;border-color:var(--accent)} /* ── mobile nav ──────────────────────────────────────────── */ .nav-burger{display:none;width:38px;height:38px;flex:none;padding:9px; border:1px solid var(--line);border-radius:9px} .nav-burger span{display:block;height:1.7px;background:currentColor;border-radius:2px; margin:3.5px 0;transition:.25s var(--ease)} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.2px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)} @media(max-width:820px){ .nav-burger{display:block} .nav-links{ display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0; background:var(--surface);border-bottom:1px solid var(--line); padding:8px clamp(20px,5vw,40px) 18px;box-shadow:var(--shadow-lg); transform:translateY(-12px);opacity:0;pointer-events:none;transition:.24s var(--ease); } .nav-links.is-open{transform:none;opacity:1;pointer-events:auto} .nav-links a{padding:13px 0;font-size:16px;border-bottom:1px solid var(--line)} .nav-links a:last-child{border-bottom:0} .nav-links a::after{display:none} } /* exit the focus state without a keyboard */ .map-exit{ position:absolute;left:12px;top:12px;z-index:400; display:inline-flex;align-items:center;gap:7px;padding:9px 15px 9px 11px; border-radius:100px;font-size:13.4px;font-weight:550; background:var(--ink);color:var(--paper);box-shadow:var(--shadow-lg); } .map-exit svg{width:15px;height:15px} .map-exit:hover{transform:translateX(-2px)} .map-exit[hidden]{display:none} /* ── per-person table ────────────────────────────────────── */ .ptable{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .prow{display:grid;grid-template-columns:34px minmax(120px,1.4fr) repeat(5,1fr); gap:12px;align-items:center;background:var(--surface);padding:15px 18px} .pav{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff; display:grid;place-items:center;font-size:11px;font-weight:600} .pname{font-size:14.6px;font-weight:550;letter-spacing:-.008em} .pcell{display:flex;flex-direction:column;gap:2px} .pcell b{font-family:var(--serif);font-size:1.15rem;font-weight:400;letter-spacing:-.01em} .pcell i{font-style:normal;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} @media(max-width:760px){ .prow{grid-template-columns:30px 1fr 1fr 1fr;row-gap:14px} .pname{grid-column:2 / -1} .pav{grid-row:span 2} } /* ── mobile polish ───────────────────────────────────────── */ @media(max-width:700px){ .map-side{order:2} .map-box{order:1} .map-shell{display:flex;flex-direction:column} #map{height:58vh;min-height:340px} .map-list{max-height:300px} .map-legend{position:static;margin:0;border-radius:0;border-width:1px 0 0; box-shadow:none;backdrop-filter:none;background:var(--surface)} .chips .chip{padding:8px 14px;font-size:13.5px} /* larger touch targets */ .tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap;padding:9px 15px} .d-grid{flex-direction:column} .d-cell{min-width:0} .sh-main .v{font-size:2.2rem} .hero-stats{gap:18px 26px} .rcpt-head{align-items:flex-start;flex-direction:column} } /* ── Plan gegen Bons ─────────────────────────────────────── */ .pvr{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden} .pvr-row{background:var(--surface);padding:16px 18px;border-left:3px solid var(--line-2)} .pvr--miss{border-left-color:#c1568a} .pvr--gone{border-left-color:var(--muted)} .pvr--over{border-left-color:var(--accent)} .pvr--under{border-left-color:#3d8ea8} .pvr--hit{border-left-color:#7a9a3f} .pvr-h{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;margin-bottom:9px} .pvr-h b{font-size:15.2px;letter-spacing:-.008em} .pvr-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; padding:2px 9px;border-radius:100px;background:var(--surface-2);color:var(--muted)} .pvr--over .pvr-k{background:var(--accent-soft);color:var(--accent)} .pvr--hit .pvr-k{background:color-mix(in srgb,#7a9a3f 16%,transparent);color:#5f7a2c} .pvr-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:680px){ .pvr-cols{grid-template-columns:1fr;gap:10px} } .pvr-cols i{font-style:normal;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px} .pvr-cols p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)} /* ── auto: legs and the charging session ─────────────────── */ .legs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden} .leg{background:var(--surface);padding:14px 18px;display:grid;gap:3px 16px; grid-template-columns:64px minmax(0,1fr) auto;align-items:baseline; border-left:3px solid var(--line-2)} .leg--plan{border-left-color:var(--accent);opacity:.82} .leg-d{font-family:var(--mono);font-size:11.5px;color:var(--muted); letter-spacing:.04em} .leg-r{font-size:14.6px;letter-spacing:-.008em} .leg-r b{font-weight:600} .leg-k{font-family:var(--mono);font-size:13.4px;white-space:nowrap; justify-self:end;font-variant-numeric:tabular-nums} .leg-a{grid-column:3;font-family:var(--mono);font-size:10.5px;color:var(--muted); justify-self:end;white-space:nowrap} .leg-w{grid-column:2;font-size:12.8px;color:var(--muted);line-height:1.5} .leg-note{margin:14px 2px 0;font-size:12.8px;color:var(--muted);line-height:1.55} @media(max-width:640px){ .leg{grid-template-columns:1fr auto} .leg-d{grid-column:1} .leg-k{grid-column:2} .leg-r,.leg-w{grid-column:1/-1} .leg-a{grid-column:1/-1;justify-self:start} } .chg-head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline; margin-bottom:20px} .chg-head b{font-size:16px;letter-spacing:-.01em} .chg-head span{font-family:var(--mono);font-size:12px;color:var(--muted)} .chg-soc{position:relative;height:34px;border-radius:100px;background:var(--surface-2); border:1px solid var(--line);margin-bottom:22px} .chg-soc-fill{position:absolute;top:-1px;bottom:-1px;border-radius:100px; background:linear-gradient(90deg,#7a9a3f,#4f8f5a)} .chg-soc-a,.chg-soc-b{position:absolute;top:50%;transform:translateY(-50%); font-family:var(--mono);font-size:11.5px;color:var(--ink-2)} .chg-soc-a{left:12px} .chg-soc-b{right:12px} .chg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden} .chg-grid span{background:var(--surface);padding:16px 14px;display:block} .chg-grid b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1; font-weight:400} .chg-grid i{display:block;margin-top:7px;font-style:normal;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .chg-note{margin:16px 2px 0;font-size:13.4px;color:var(--muted);line-height:1.6} /* ── gallery tools ───────────────────────────────────────── */ .gal-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center; justify-content:space-between;margin-bottom:22px} .gal-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .chip--star{border-color:var(--accent);color:var(--accent)} .chip--star.is-on{background:var(--accent);border-color:var(--accent);color:#fff} .gal-hint{font-size:12px;color:var(--muted);max-width:34ch} .gi-star{position:absolute;top:8px;right:9px;z-index:2;color:#ffca7a; font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)} .gi-who{position:absolute;top:8px;left:9px;z-index:2;font-family:var(--mono); font-size:10px;letter-spacing:.06em;color:#fff;background:rgba(8,12,15,.6); padding:2px 7px;border-radius:100px;backdrop-filter:blur(4px)}