:root { --forest:#2e5b34; --forest-dark:#173a28; --ink:#1e2b24; --muted:#647069; --paper:#f8faf6; --panel:#fff; --line:#dce3d9; --mist:#edf2e9; --blue:#1677b7; --red:#d33b36; --sun:#f6c65b; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; }
.skip-link { position:fixed; z-index:2000; top:8px; left:8px; padding:10px 14px; color:#fff; background:var(--forest-dark); border-radius:4px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px #0b6fb3; }
main a:not(.button):not(.tour-card),.legal-content a { color:var(--forest); text-decoration-line:underline; text-decoration-thickness:.1em; text-underline-offset:.18em; }
.button { display:inline-flex; align-items:center; width:max-content; padding:11px 16px; border:2px solid transparent; border-radius:5px; color:var(--forest-dark); background:var(--sun); text-decoration:none; font-weight:800; }.button:hover { background:#ffd36d; }.button:active { transform:translateY(1px); }
.topbar { position:sticky; top:0; z-index:1000; min-height:64px; display:flex; align-items:center; gap:24px; padding:10px clamp(16px,4vw,64px); background:color-mix(in srgb,var(--paper) 92%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:9px; color:var(--forest-dark); text-decoration:none; font-weight:800; font-size:1.1rem; }
.brand span { display:grid; place-items:center; width:30px; height:30px; background:var(--sun); border-radius:5px; }
nav { display:flex; gap:clamp(12px,3vw,28px); margin-left:auto; } nav a { color:var(--muted); text-decoration:none; font-size:.92rem; } nav a:hover,nav a:focus-visible,nav a[aria-current="page"] { color:var(--forest); text-decoration:underline; text-underline-offset:.28em; }
.header-actions { display:flex; gap:8px; }.icon-button { width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:5px; color:var(--forest); background:var(--panel); cursor:pointer; }.icon-button:hover { background:var(--mist); }
.hero { position:relative; min-height:570px; display:grid; align-items:end; overflow:hidden; background:linear-gradient(125deg,#547053,#9eaf76); }
.hero-photo { position:absolute; inset:0; background-position:center; background-size:cover; }.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,31,20,.8),rgba(14,31,20,.25) 72%); }.hero-content { position:relative; width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:86px 0 68px; color:#fff; }.kicker { margin:0 0 10px; color:#d7e7c8; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.kicker.forest { color:var(--forest); }
h1,h2,h3,p { margin-top:0; } h1 { max-width:760px; margin-bottom:14px; font-size:clamp(2.7rem,6vw,5.8rem); line-height:.98; letter-spacing:0; } h1 span { display:block; font-size:.63em; font-weight:500; line-height:1.1; margin-top:10px; } h2 { margin-bottom:16px; font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.05; letter-spacing:0; } h3 { margin-bottom:6px; font-size:1rem; }
.hero-date { margin-bottom:22px; font-size:1.1rem; }.weather { display:flex; flex-wrap:wrap; gap:9px 18px; align-items:center; font-size:.94rem; }.weather strong { color:#fff; }.weather span { color:#e9eee3; }
.tour-status { display:inline-flex; align-items:center; width:max-content; margin:0 0 16px; padding:6px 11px; border-radius:999px; font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.tour-status-completed { color:#173a28; background:#d8edcf; }.tour-status-planned { color:#513d08; background:#f6c65b; }
[hidden] { display:none !important; }
.section-wrap { width:min(1180px,calc(100% - 32px)); margin:0 auto; }.tour-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:clamp(32px,6vw,78px); padding:86px 0 70px; }.facts-sidebar { border-top:4px solid var(--forest); }.facts { display:grid; grid-template-columns:repeat(2,1fr); margin:26px 0; border-top:1px solid var(--line); }.facts div { padding:13px 5px 13px 0; border-bottom:1px solid var(--line); }.facts dt { color:var(--muted); font-size:.78rem; }.facts dd { margin:1px 0 0; font-weight:750; font-size:1.03rem; }.side-notes { display:grid; gap:16px; }.side-notes section { padding:15px; border-left:3px solid var(--sun); background:var(--mist); }.side-notes p { margin:0; color:var(--muted); font-size:.92rem; }
.main-content,.content-section { min-width:0; }.main-content { display:grid; gap:54px; }.section-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }.section-header h2 { margin-bottom:0; }.track-toggle { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.88rem; font-weight:700; white-space:nowrap; }.track-toggle input { accent-color:var(--red); }.track-toggle input:disabled { cursor:not-allowed; }
#map { height:min(63vw,540px); min-height:360px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--mist); }.photo-marker { display:grid; place-items:center; width:28px; height:28px; border:2px solid #fff; border-radius:50%; color:#fff; background:var(--forest); box-shadow:0 2px 7px rgba(0,0,0,.28); font-size:.78rem; font-weight:800; }.map-status { margin:10px 0 0; color:var(--muted); font-size:.83rem; }
.transport-section { padding-top:2px; }.transport-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.transport-grid article { padding:18px; border:1px solid var(--line); background:var(--panel); }.transport-grid span { display:block; margin-bottom:8px; color:var(--blue); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.transport-grid strong { font-size:1.1rem; }.transport-grid p { margin:5px 0 0; color:var(--muted); }.transport-grid b { margin:0 7px; color:var(--blue); }
.profile-section { padding:78px 0; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.profile-meta { margin:0; color:var(--muted); font-size:.9rem; }.profile { min-height:240px; border:1px solid var(--line); background:linear-gradient(#fff,#f4f7f1); }.profile svg { display:block; width:100%; height:auto; }.profile-area { fill:#dcebd9; }.profile-line { fill:none; stroke:var(--forest); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }.profile-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }.profile-label { fill:var(--muted); font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:12px; }.profile-label-bottom { font-size:11px; }.profile-point line { stroke:#a9b7a7; }.profile-point circle { fill:var(--forest); stroke:#fff; stroke-width:2; }.profile-point text { fill:#fff; font-size:12px; font-weight:bold; text-anchor:middle; }.profile-missing { min-height:240px; display:grid; place-content:center; gap:8px; padding:28px; text-align:center; color:var(--muted); }.profile-missing strong { color:var(--ink); }
.gallery-section { padding:84px 0; }.section-intro { max-width:520px; margin-bottom:26px; color:var(--muted); }.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.gallery-card { min-width:0; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--panel); }.gallery-image-button { display:block; width:100%; padding:0; border:0; color:inherit; background:transparent; cursor:zoom-in; }.gallery-card img,.photo-placeholder { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }.photo-placeholder { display:grid; place-items:center; background:linear-gradient(145deg,#d5e0ca,#aebc9c); color:#fff; font-size:2rem; font-weight:800; }.gallery-card figcaption { display:grid; grid-template-columns:25px 1fr; gap:8px; align-items:start; padding:11px; font-size:.88rem; }.gallery-card figcaption > span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:var(--forest); font-size:.72rem; font-weight:800; }.gallery-card small { grid-column:2; color:var(--muted); font-size:.75rem; }
.notes-section { padding:76px 0; background:#edf2e9; }.notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,8vw,130px); align-items:center; }.highlights { display:grid; gap:11px; margin:0; padding:0; list-style:none; }.highlights li { position:relative; padding-left:22px; }.highlights li::before { content:""; position:absolute; top:.58em; left:0; width:8px; height:8px; border-radius:50%; background:var(--forest); } blockquote { margin:0; padding:28px 0 28px 25px; border-left:4px solid var(--sun); color:var(--forest-dark); font-family:Georgia,serif; font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.36; }
footer { display:flex; justify-content:space-between; gap:18px; padding:25px clamp(16px,4vw,64px); color:#e4eee0; background:var(--forest-dark); font-size:.88rem; } footer span:first-child { font-weight:800; } footer a { color:inherit; }.footer-links { display:flex; flex-wrap:wrap; gap:16px; }.lightbox { width:min(1000px,calc(100% - 32px)); max-height:90vh; padding:16px; color:#fff; border:0; background:#172019; }.lightbox::backdrop { background:rgba(0,0,0,.72); }.lightbox img { display:block; width:100%; max-height:75vh; object-fit:contain; }.lightbox p { margin:12px 4px 0; }.lightbox-close { position:absolute; top:5px; right:6px; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.7); cursor:pointer; font-size:1.5rem; }.load-error { width:min(720px,calc(100% - 32px)); margin:120px auto; color:var(--muted); }
.legal-page { min-height:calc(100vh - 132px); }.legal-content { max-width:780px; padding-top:80px; padding-bottom:90px; }.legal-content h1 { margin-bottom:38px; color:var(--forest-dark); font-size:clamp(2.5rem,6vw,4.8rem); }.legal-content h2 { margin-top:42px; font-size:1.55rem; }.legal-content p,.legal-content address { color:var(--muted); }.legal-content address { font-style:normal; }.legal-updated { margin-top:48px; font-size:.9rem; }.gpx-download { font-weight:750; }
.dark { --paper:#172019; --panel:#1e2a21; --ink:#edf4e9; --muted:#b5c2b4; --line:#3b4b3e; --mist:#27362a; color-scheme:dark; }.dark .hero { background:#405a42; }.dark .profile { background:linear-gradient(#1e2a21,#172019); }.dark .profile-area { fill:#34563a; }.dark .notes-section { background:#243127; }.dark .photo-placeholder { background:linear-gradient(145deg,#405b40,#63755c); }.dark .icon-button { color:#d8e9d4; }.dark .brand { color:#edf4e9; }.dark .kicker.forest,.dark main a:not(.button):not(.tour-card),.dark .tour-card-meta span,.dark .tour-card-link { color:#b9d8b4; }.dark .transport-grid span { color:#71b8e6; }.dark blockquote { color:#dcebd9; }.dark .leaflet-container a { color:#0078a8; }
@media (max-width:760px) { .topbar { gap:10px; }.topbar nav { display:none; }.header-actions { margin-left:auto; }.hero { min-height:520px; }.hero-content { padding-bottom:44px; }.weather { display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; }.weather strong { grid-column:1/-1; }.tour-layout { grid-template-columns:1fr; padding-top:52px; }.facts-sidebar { display:grid; grid-template-columns:1fr 1.3fr; gap:18px; }.facts-sidebar > .kicker,.facts-sidebar > h2 { grid-column:1; }.facts { grid-column:2; grid-row:1/3; margin:0; }.side-notes { grid-column:1/-1; }.section-header { align-items:start; flex-direction:column; gap:10px; }.transport-grid,.notes-grid { grid-template-columns:1fr; }.gallery { grid-template-columns:repeat(2,1fr); }.profile-section,.gallery-section,.notes-section { padding:52px 0; } }
@media (max-width:430px) { .facts-sidebar { display:block; }.facts { margin:20px 0; }.gallery { grid-template-columns:1fr; } footer { flex-direction:column; } #map { min-height:310px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media print { .topbar,.header-actions,.hero-photo,.hero-shade,.track-toggle,.leaflet-control-container,.map-status { display:none !important; } body { background:#fff; color:#000; font-size:10pt; }.hero { min-height:170px; background:#fff; color:#000; }.hero-content { padding:20px 0; color:#000; }.hero-content .kicker,.hero-date,.weather span,.weather strong { color:#000; }.tour-layout { padding:28px 0; }.profile-section,.gallery-section,.notes-section { padding:28px 0; background:#fff; }.gallery { grid-template-columns:repeat(3,1fr); }.gallery-card { break-inside:avoid; } #map { height:360px; } footer { color:#000; background:#fff; border-top:1px solid #000; } }

.export-map .topbar,.export-map .hero,.export-map .facts-sidebar,.export-map .transport-section,.export-map .profile-section,.export-map .gallery-section,.export-map .notes-section,.export-map footer { display:none; }
.export-map .tour-layout { display:block; width:1200px; padding:28px 34px; }
.export-map #map { height:650px; }
.export-profile .topbar,.export-profile .hero,.export-profile .tour-layout,.export-profile .gallery-section,.export-profile .notes-section,.export-profile footer { display:none; }
.export-profile .profile-section { width:1200px; padding:34px; }
.export-profile .profile-section .section-wrap { width:100%; }

.landing-hero { position:relative; min-height:620px; display:grid; align-items:end; overflow:hidden; background:#365b39; }.landing-hero-image { position:absolute; inset:0; background:url("tours/magglingen-twann/assets/05D771E6-1DD7-4A13-9FAB-C93C76797906.jpeg") center 58%/cover; }.landing-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,35,21,.84),rgba(15,35,21,.24) 74%); }.landing-hero-content { position:relative; width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:96px 0 72px; color:#fff; }.landing-hero-content h1 { max-width:700px; }.landing-hero-content > p:not(.kicker) { max-width:560px; margin-bottom:28px; color:#edf4e9; font-size:1.12rem; }.landing-section { padding:88px 0; }.landing-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:26px; }.landing-heading h2 { margin-bottom:0; }.tour-count { margin:0; color:var(--muted); font-weight:700; }.tour-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.tour-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:6px; color:inherit; background:var(--panel); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }.tour-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(24,46,30,.12); }.tour-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }.tour-card-content { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:20px; }.tour-card-content h3 { margin-bottom:9px; font-size:1.35rem; line-height:1.14; }.tour-card-content > p:not(.kicker) { margin-bottom:18px; color:var(--muted); }.tour-card-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }.tour-card-meta span { padding:4px 8px; border:1px solid var(--line); border-radius:4px; color:var(--forest); font-size:.8rem; font-weight:750; }.tour-card-link { margin-top:19px; color:var(--forest); font-weight:800; }.tour-card-link b { margin-left:5px; }.landing-note { padding:62px 0; border-top:1px solid var(--line); background:var(--mist); }.landing-note-grid { display:grid; grid-template-columns:190px minmax(0,640px); gap:40px; }.landing-note-grid p:last-child { margin:0; color:var(--muted); font-size:1.12rem; }
.tour-card { position:relative; }.tour-card-planned { border-style:dashed; background:color-mix(in srgb,var(--panel) 86%,#f6c65b); }.tour-card-planned img { filter:saturate(.72); }.tour-status-badge { position:absolute; z-index:2; top:14px; left:14px; padding:6px 10px; border:2px solid #fff; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.18); font-size:.72rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }.tour-status-badge.tour-status-completed { color:#fff; background:var(--forest); }.tour-status-badge.tour-status-planned { color:#513d08; background:var(--sun); }
@media (max-width:760px) { .landing-hero { min-height:540px; }.landing-hero-content { padding-bottom:52px; }.landing-heading { align-items:start; flex-direction:column; gap:6px; }.tour-list { grid-template-columns:1fr; }.landing-note-grid { grid-template-columns:1fr; gap:8px; }.landing-note { padding:48px 0; } }