/* Unterseiten von surfeverywhere.info: Farben und Schrift wie die Startseite */
:root{
  --forest:#0f2809; --orange:#df7e3e; --ocean:#213d8d; --rose:#e499b4; --lagoon:#38847a;
  --paper:#ffffff; --ink:#10200c; --mist:#f3f6fb; --land:#d9e1ee;
  --display:"gelica","Fraunces","Cooper Black",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-variation-settings:"SOFT" 100}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Kopf: Farbfläche + Bild/Karte */
.top{display:grid;grid-template-columns:1fr 1fr;max-width:1280px;margin:0 auto}
.head{background:var(--c);color:var(--paper);padding:clamp(24px,5vw,64px) max(16px,4vw);display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:clamp(320px,42vw,560px)}
.back{font-weight:700;font-size:15px;text-decoration:none;opacity:.9;align-self:flex-start}
.back:hover,.back:focus-visible{opacity:1;text-decoration:underline}
.head h1{margin:0;font-weight:900;font-size:clamp(3rem,8.5vw,7rem);line-height:.92;font-variation-settings:"SOFT" 100,"opsz" 144;text-wrap:balance;overflow-wrap:anywhere}
.head .sub{margin:14px 0 0;font-weight:700;font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.3;max-width:34ch}
.side{position:relative;background:var(--mist);min-height:280px}
.side img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.side svg{width:100%;height:100%;display:block}

/* Karten */
.land{fill:var(--land);stroke:var(--paper);stroke-width:1;stroke-linejoin:round}
.dot{stroke:var(--paper);stroke-width:2.5;transition:r .2s}
a:hover > .dot,a:focus-visible > .dot{r:13}
.dot.focus{stroke-width:4}

/* Filter */
.filters{display:flex;flex-wrap:wrap;gap:10px;padding-block:28px 8px}
.chip{font:inherit;font-weight:800;font-size:15px;border:2.5px solid var(--c);background:var(--paper);color:var(--c);border-radius:999px;padding:8px 16px;cursor:pointer;font-variation-settings:"SOFT" 100,"opsz" 14}
.chip[aria-pressed="true"]{background:var(--c);color:var(--paper)}
.chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Wellen-Raster */
.waves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;padding-block:20px 56px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.art{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;display:flex;container-type:inline-size;color:var(--paper)}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.55))}
.art-name{position:relative;z-index:1;margin:auto;padding:0 8cqi;text-align:center;font-weight:900;font-size:15cqi;line-height:.95;text-wrap:balance;font-variation-settings:"SOFT" 100,"opsz" 144;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.has-photo .art-name{margin:auto 0 0;text-align:left;padding:0 7cqi 8cqi}
.art-go{position:absolute;z-index:1;left:0;right:0;bottom:7cqi;text-align:center;font-size:5cqi;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.card:hover .art-name,.card:focus-visible .art-name{transform:translateY(-4%)}
.card:hover .art-go,.card:focus-visible .art-go{opacity:1;transform:none}
.has-photo .art-go{display:none}
.card:focus-visible{outline:3px solid var(--c);outline-offset:4px}
.cap{display:flex;flex-direction:column;gap:6px}
.cap .place{font-weight:700;font-size:16px;font-variation-settings:"SOFT" 100,"opsz" 14}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12px;font-weight:700;border:1.5px solid currentColor;border-radius:999px;padding:2px 9px;opacity:.75}

/* Abschnitte */
.section-title{margin:0 0 18px;font-weight:900;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1;color:var(--c);font-variation-settings:"SOFT" 100,"opsz" 96}
.mapbox{background:var(--mist);margin-bottom:56px}
.mapbox svg{width:100%;height:auto;display:block}

/* Detailseite */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--paper);margin-block:40px 36px}
.fact{background:var(--mist);padding:20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fact dt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.fact dd{margin:0;font-weight:800;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.2;overflow-wrap:anywhere}
.fact dd.open{opacity:.45;font-weight:700}
.fact .swatch{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.4em;vertical-align:.05em}
.body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;margin-bottom:56px;align-items:start}
.text{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;font-weight:500;max-width:62ch;font-variation-settings:"SOFT" 100,"opsz" 18}
.text p{margin:0 0 1em}
.text .placeholder{opacity:.55}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--c);color:var(--paper);text-decoration:none;font-weight:800;font-size:16px;padding:12px 22px;border-radius:999px}
.btn:hover,.btn:focus-visible{filter:brightness(1.1)}
.coords{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:700;margin-top:18px}
.coords code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--mist);padding:4px 8px;border-radius:6px}
.coords button{font:inherit;font-size:14px;font-weight:800;border:2px solid var(--c);color:var(--c);background:var(--paper);border-radius:999px;padding:4px 12px;cursor:pointer}
.near{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:56px}
.near a{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:18px 20px 20px;background:var(--mist);border-top:6px solid var(--t)}
.near a:hover,.near a:focus-visible{background:#e8eef7}
.near .n{font-weight:900;font-size:22px;line-height:1.1;font-variation-settings:"SOFT" 100,"opsz" 48}
.near .p{font-weight:600;font-size:14px;opacity:.75}
.near .d{font-weight:800;font-size:15px;color:var(--t)}
.report{font-size:15px;font-weight:600;padding-bottom:48px;opacity:.75}
.missing{padding-block:80px;font-size:20px;font-weight:700}

/* Footer */
footer{background:var(--ocean);color:var(--paper);padding:30px max(16px,4vw);display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:center;text-align:center;font-weight:700;font-size:15px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
footer a{text-decoration:none;border-bottom:2px solid transparent}
footer nav a:not(:last-child)::after{content:"|";display:inline-block;margin:0 .55em;font-weight:400;opacity:.8}
footer a:hover{border-color:var(--paper)}

@media (max-width:900px){
  .waves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .body{grid-template-columns:1fr}
}
@media (max-width:640px){
  .top{grid-template-columns:1fr}
  .head{min-height:0}
  .side{aspect-ratio:4/3;min-height:0}
  .waves{grid-template-columns:1fr}
  .near{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Rechtliche Seiten */
.legal-head{background:var(--c);color:var(--paper)}
.legal-head .wrap{padding-block:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:28px}
.legal-head h1{margin:0;font-weight:900;font-size:clamp(2.6rem,7vw,5.5rem);line-height:.95;font-variation-settings:"SOFT" 100,"opsz" 144}
.legal{max-width:760px;padding-block:44px 64px;font-size:17px;line-height:1.6;font-weight:500;font-variation-settings:"SOFT" 100,"opsz" 18}
.legal h2{font-weight:900;font-size:1.45rem;line-height:1.15;margin:2em 0 .5em;color:var(--c);font-variation-settings:"SOFT" 100,"opsz" 48}
.legal h2:first-child{margin-top:0}
.legal p,.legal ul{margin:0 0 1em}
.legal dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 20px;margin:0 0 1em}
.legal dt{font-weight:800}
.legal dd{margin:0;overflow-wrap:anywhere}
.todo{background:#fff1a8;color:var(--ink);padding:0 4px;border-radius:3px;font-weight:700}
.legal .stand{font-size:14px;opacity:.65;margin-top:2.5em}
@media (max-width:520px){.legal dl{grid-template-columns:1fr}.legal dt{margin-top:8px}}

/* Fotocredits */
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 18px;margin:20px 0 8px}
.credits figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.credits img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--mist)}
.credits figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.3}
.credits strong{font-weight:800}
.credits .missing-credit{opacity:.45;font-weight:700}
.credits span{opacity:.7}
.photo-credit{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}
.credit-link{text-decoration:none;display:block;min-width:0}
.credit-link img{transition:opacity .2s}
.credit-link:hover img,.credit-link:focus-visible img{opacity:.85}
.credit-link:hover span,.credit-link:focus-visible span{text-decoration:underline}
.credit-link:focus-visible{outline:3px solid var(--c);outline-offset:4px}

[hidden]{display:none!important}