/* Apartment 422 – Santa Ponsa. Mobile first, keine externen Abhängigkeiten. */
:root{
  --bg:#fff; --card:#f6effb; --tile:#e9dcf5; --chip:#fff;
  --txt:#241d2b; --dim:#6b6075; --line:#e8e0ee;
  --acc:#7d4f9c; --tint:#e8dcf4; --bar:rgba(255,255,255,.82);
  --sh:0 1px 2px rgba(45,25,60,.06), 0 10px 24px -14px rgba(45,25,60,.20);
  --shx:0 2px 6px rgba(45,25,60,.08), 0 18px 36px -16px rgba(45,25,60,.30);
  --r:20px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f0b13; --card:#1c1622; --tile:#271d35; --chip:#3b2f4d;
        --txt:#f4f0f7; --dim:#a598b0; --line:#2d2436;
        --acc:#c9a7e6; --tint:#2b2038; --bar:rgba(15,11,19,.75);
        --sh:0 1px 2px rgba(0,0,0,.6); --shx:0 12px 30px rgba(0,0,0,.7);}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:400 17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc)}
.wrap{max-width:620px;margin:0 auto;padding:0 12px 40px}

/* Kopfzeile */
.bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;
  padding:10px 12px;font-weight:600;font-size:17px;
  background:var(--bar);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.bar a{display:flex;align-items:center;gap:3px;text-decoration:none;font-weight:400;margin-right:2px}
.bar a::before{content:"‹";font-size:26px;line-height:1;margin-top:-3px}

/* Hero */
.hero{position:relative;margin:12px 0 16px;border-radius:24px;overflow:hidden;box-shadow:var(--sh)}
.hero img{aspect-ratio:4/3;object-fit:cover;width:100%}
.hero div{
  position:absolute;inset:auto 0 0 0;padding:18px 14px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.68));
}
.hero h1{margin:0;font-size:clamp(27px,7.5vw,34px);letter-spacing:-.02em;line-height:1.15}
.hero p{margin:4px 0 0;font-size:15px;opacity:.9}

h1.page{font-size:clamp(27px,8vw,34px);letter-spacing:-.02em;margin:16px 0 5px}
.lead{color:var(--dim);margin:0 0 14px;font-size:16px}

/* Kacheln */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.tile{
  display:block;padding:13px;border-radius:var(--r);background:var(--tile);
  box-shadow:var(--sh);text-decoration:none;color:inherit;
  transition:transform .22s ease, box-shadow .22s ease;
}
.tile svg{width:26px;height:26px;stroke:var(--acc);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  background:var(--chip);border-radius:11px;padding:6px;box-sizing:content-box}
.tile b{display:block;margin:9px 0 1px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.tile span{display:block;font-size:13px;color:var(--dim);line-height:1.35}
.tile.wide{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.tile.wide b{margin:0}
@media (hover:hover){.tile:hover{transform:translateY(-3px);box-shadow:var(--shx)}}
.tile:active{transform:scale(.97)}

h2.sec{font-size:19px;letter-spacing:-.01em;margin:0 0 10px}
h2.sec span{font-weight:400;font-size:14px;color:var(--dim)}

/* Karten / Inhalte */
.card{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--sh);margin:0 0 11px}
.card h2{font-size:19px;letter-spacing:-.01em;margin:0 0 8px}
.card h3{font-size:16px;margin:13px 0 3px}
.card p{margin:0 0 9px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card ul{margin:0 0 9px;padding-left:19px}
.card li{margin:0 0 4px}
.card img{border-radius:12px;margin:10px 0 0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0 0 6px}
.note{background:var(--tint);border-radius:14px;padding:11px 12px;margin:10px 0 0;font-size:15px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pair img{margin:0}

/* Sprungmarken */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.chips a{background:var(--tile);box-shadow:var(--sh);border-radius:999px;padding:7px 13px;
  font-size:14px;text-decoration:none;color:var(--txt)}
.chips a:active{transform:scale(.96)}

/* Checklisten */
.check{list-style:none;padding:0;margin:0}
.check li{position:relative;padding:0 0 0 28px;margin:0 0 10px}
.check li::before{
  content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  border:1.7px solid var(--acc);
}
.check li b{display:block}


.btn{
  display:block;margin:12px 0 0;padding:13px;border:0;border-radius:14px;
  background:var(--acc);color:#fff;font-size:16px;font-weight:600;
  text-align:center;text-decoration:none;
}
.btn:active{opacity:.7}
@media (prefers-color-scheme:dark){.btn{color:#23132e}}

/* Galerie: horizontal wischen + Lightbox ohne JS */
.strip{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -12px;padding:0 12px 10px;scroll-padding:0 12px;
  -webkit-overflow-scrolling:touch;
}
.strip a{flex:0 0 78%;scroll-snap-align:center;border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
.strip img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (hover:hover){.strip a:hover img{transform:scale(1.04);transition:transform .3s ease}}

.lb{position:fixed;inset:0;z-index:50;display:none;margin:0;background:#000}
.lb:target{display:grid;place-items:center}
.lb img{width:100%;max-height:100%;object-fit:contain}
.lb .bg{position:absolute;inset:0}
.lb figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 16px;
  color:#f5f5f7;font-size:14px;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.lb .x{
  position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;
  border-radius:50%;background:rgba(0,0,0,.45);
  color:#fff;font-size:25px;line-height:37px;text-align:center;text-decoration:none;
}

footer{margin-top:24px;text-align:center;font-size:14px;color:var(--dim)}
footer a{margin:0 7px;white-space:nowrap}