/* ---------- Lokale Schriften (DSGVO: kein Google-CDN) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/caveat-latin-wght-normal.woff2') format('woff2')}

/* ============================================================
   Pebbels — Memorial & Insulinom-Hilfe
   Warm · mediterran · ehrlich
   ============================================================ */

:root{
  --sand:#F5EDDF; --sand2:#EFE4D2; --card:#FCF8F0; --card2:#F7F0E2;
  --ink:#3A2F26; --ink2:#6E5F4F; --ink3:#8C7C6A;
  --terra:#C16A43; --terra2:#9F4F2C; --gold:#D6A03C; --olive:#79864F; --lila:#8A6A9C;
  --line:rgba(58,47,38,.14); --line2:rgba(58,47,38,.08);
  --shadow:0 18px 50px -20px rgba(58,40,24,.45);
  --shadow-sm:0 8px 24px -14px rgba(58,40,24,.4);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--sand);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 78% -8%, rgba(214,160,60,.16), transparent 60%),
    radial-gradient(900px 500px at -8% 12%, rgba(193,106,67,.12), transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%; display:block}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.12; color:var(--ink); margin:0 0 .4em}
h2{font-size:clamp(1.9rem,4.4vw,3rem); letter-spacing:-.01em}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
p{margin:0 0 1.1em}
a{color:var(--terra2)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.sec{padding:clamp(56px,9vw,110px) 0; position:relative}
.eyebrow{font-family:"Inter"; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  font-size:.74rem; color:var(--terra2); margin:0 0 .9em}
.lead{font-size:clamp(1.12rem,2.1vw,1.32rem); color:var(--ink2)}
.center{text-align:center}
.narrow{max-width:720px; margin-left:auto; margin-right:auto}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:40; transition:background .3s, box-shadow .3s, border-color .3s;
  background:transparent; border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(245,237,223,.88); backdrop-filter:saturate(1.3) blur(10px);
  border-bottom-color:var(--line2); box-shadow:0 6px 22px -18px rgba(58,40,24,.5)}
.nav .row{display:flex; align-items:center; justify-content:space-between; height:62px}
.brand{font-family:"Fraunces"; font-weight:600; font-size:1.18rem; letter-spacing:.01em; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:.5rem}
.brand .paw{width:20px;height:20px; color:var(--terra)}
.navlinks{display:flex; gap:6px; align-items:center}
.navlinks a{text-decoration:none; color:var(--ink2); font-size:.93rem; font-weight:500;
  padding:.45rem .7rem; border-radius:999px; transition:.18s}
.navlinks a:hover{color:var(--terra2); background:rgba(193,106,67,.1)}
.navlinks a.active{color:var(--terra2); background:rgba(193,106,67,.12)}
.menubtn{display:none; border:0; background:transparent; cursor:pointer; padding:8px; color:var(--ink)}
.menubtn svg{width:26px;height:26px}

/* ---------- hero (immersiv) ---------- */
.hero{position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; background:url('../images/hero-bg.jpg') center/cover no-repeat;
  transform:scale(1.05); animation:heroZoom 26s ease-in-out infinite alternate}
.hero-bg:after{content:""; position:absolute; inset:0; background:
  linear-gradient(102deg, rgba(245,237,223,.96) 0%, rgba(245,237,223,.82) 36%, rgba(245,237,223,.34) 68%, rgba(245,237,223,.10) 100%),
  radial-gradient(140% 100% at 50% 130%, rgba(58,40,24,.20), transparent 58%)}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.13)}}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px);
  align-items:center; padding-top:clamp(94px,12vw,140px); padding-bottom:clamp(72px,10vw,120px); width:100%}
.hero-photo{position:relative; justify-self:center; z-index:1}
.hero-photo .frame{position:relative; animation:floaty 7s ease-in-out infinite}
.hero-photo img{position:relative; z-index:1; width:min(440px,86vw); border-radius:22px;
  box-shadow:0 30px 70px -24px rgba(58,40,24,.6); border:9px solid #fff; transform:rotate(-2deg)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.bubble{position:absolute; z-index:6; top:-24px; left:-16px; background:#fff; color:var(--ink);
  font-family:"Caveat"; font-size:1.95rem; font-weight:700; padding:.3rem 1.2rem .45rem;
  border-radius:18px 18px 18px 4px; box-shadow:var(--shadow); transform:rotate(-4deg)}
.bubble:after{content:""; position:absolute; left:26px; bottom:-12px; width:0;height:0;
  border:8px solid transparent; border-top-color:#fff; border-bottom:0; transform:rotate(8deg)}
.hero h1{font-size:clamp(3rem,8vw,5.4rem); letter-spacing:-.02em; margin-bottom:.18em; line-height:1}
.hero .dates{font-family:"Fraunces"; font-style:italic; color:var(--terra2); font-size:clamp(1.1rem,2.4vw,1.5rem); margin-bottom:.7em}
.hero .sub{color:var(--ink2); max-width:46ch; font-size:clamp(1.02rem,1.7vw,1.18rem)}
.heartline{font-family:"Caveat"; font-size:1.7rem; color:var(--lila); margin-top:.35em}
.hero .diag{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink3); margin:.1em 0 1.1em}
.hero .diag a{color:var(--terra2); text-decoration:none; border-bottom:1px solid rgba(159,79,44,.4)}
.hero .diag a:hover{border-bottom-color:var(--terra2)}
.scrolldown{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--terra2);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; opacity:.85}
.scrolldown svg{width:22px;height:22px; animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.hero-bg,.hero-photo .frame,.scrolldown svg{animation:none}}

/* ---------- generic blocks ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,60px); align-items:center}
.split.rev .txt{order:2}
.framed{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff; transition:transform .4s ease, box-shadow .4s ease}
.framed img{width:100%; aspect-ratio:4/5; object-fit:cover}
.framed.wide img{aspect-ratio:4/3}
.framed:hover{transform:translateY(-5px); box-shadow:0 32px 64px -26px rgba(58,40,24,.55)}
figure{margin:0}
figcaption{font-size:.82rem; color:var(--ink3); text-align:center; margin-top:.6rem; font-style:italic}

.quote{font-family:"Fraunces"; font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.4; color:var(--terra2);
  border-left:3px solid var(--gold); padding:.2em 0 .2em 1.1em; margin:1.6em 0}
.quote cite{display:block; font-style:normal; font-family:"Inter"; font-weight:500;
  font-size:.86rem; color:var(--ink3); letter-spacing:.04em; margin-top:.7em}

.band{background:linear-gradient(180deg,var(--card),var(--card2)); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); position:relative; overflow:hidden}
.band.terra{background:linear-gradient(165deg,#fbf1e6,#f3e3d2)}
.band:before{content:""; position:absolute; width:540px; height:540px; right:-170px; top:-190px; pointer-events:none;
  background:radial-gradient(circle, rgba(214,160,60,.20), transparent 64%)}
.band.terra:before{left:-180px; right:auto; background:radial-gradient(circle, rgba(193,106,67,.18), transparent 64%)}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:var(--card); border:1px solid var(--line2); border-radius:16px; padding:24px 22px; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-5px); box-shadow:0 26px 46px -22px rgba(58,40,24,.5)}
.card .ic{font-family:"Fraunces"; font-weight:700; color:var(--terra); font-size:1.5rem; line-height:1; margin-bottom:.5rem}
.card h3{margin-bottom:.35em}
.card p{font-size:.96rem; color:var(--ink2); margin:0}

/* marotten mini */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.tile{background:var(--card); border-radius:16px; padding:22px; border:1px solid var(--line2); transition:transform .3s ease, box-shadow .3s ease}
.tile:hover{transform:translateY(-5px); box-shadow:0 26px 46px -22px rgba(58,40,24,.5)}
.tile h3{color:var(--terra2)}
.tile p{font-size:.96rem; color:var(--ink2); margin:0}

/* gallery (Startseite, 8) */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery button{padding:0; border:0; background:none; cursor:pointer; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm); position:relative; aspect-ratio:1/1}
.gallery img{width:100%; height:100%; object-fit:cover; transition:.4s}
.gallery button:hover img{transform:scale(1.06)}
.gallery button:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

/* timeline */
.timeline{position:relative; margin:2rem 0 0; padding-left:0}
.timeline ol{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 1.7em 28px; border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent}
.timeline li:before{content:""; position:absolute; left:-7px; top:4px; width:12px;height:12px;
  border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px rgba(193,106,67,.16)}
.timeline .d{font-weight:600; color:var(--terra2); font-size:.92rem; letter-spacing:.02em}
.timeline p{font-size:.97rem; color:var(--ink2); margin:.2em 0 0}

/* cost */
.cost{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:1.6rem 0}
.cost .n{font-family:"Fraunces"; font-weight:700; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--terra2)}
.cost .l{font-size:.85rem; color:var(--ink2)}
.cost > div{background:var(--card); border:1px solid var(--line2); border-radius:14px; padding:18px 20px; transition:transform .3s ease}
.cost > div:hover{transform:translateY(-4px)}

.disc{background:#f7efe2; border:1px solid var(--line); border-radius:14px; padding:18px 22px;
  font-size:.92rem; color:var(--ink2)}
.disc strong{color:var(--ink)}

/* app */
.appsec{background:linear-gradient(160deg,#332a22,#221b16); color:#f4ead9}
.appsec h2,.appsec h3{color:#fbf2e3}
.appsec .eyebrow{color:var(--gold)}
.appsec p{color:#e4d6c2}
.applist{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:1.6rem 0}
.applist div{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:18px; transition:transform .3s ease}
.applist div:hover{transform:translateY(-4px)}
.applist b{color:#fbf2e3}
.applist span{font-size:.93rem; color:#d8c8b2}
.tag{display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(214,160,60,.5); border-radius:999px; padding:.3em .9em; margin:0 .4em .6em 0}

/* footer */
footer{background:#2c241d; color:#e9dcca; text-align:center; padding:64px 26px}
footer .name{font-family:"Fraunces"; font-size:2rem; color:#fbf2e3; margin-bottom:.1em}
footer .heart{font-family:"Caveat"; font-size:1.6rem; color:var(--gold)}
footer p{color:#c5b6a1; font-size:.9rem; max-width:60ch; margin:1em auto}
footer .legal{margin-top:1.4rem; font-size:.82rem}
footer .legal a{color:#c5b6a1; text-decoration:none; border-bottom:1px solid rgba(197,182,161,.4)}
footer .legal a:hover{color:#fbf2e3}

/* divider */
.divider{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto; max-width:260px; opacity:.85}
.divider .ln{height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line),transparent)}
.divider svg{width:30px;height:30px;color:var(--olive)}
.divider img{width:46px;height:46px;object-fit:contain}
.divider img.olive{width:48px;height:48px}

/* reveal */
.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}}

/* lightbox (Startseite) */
.lb{position:fixed; inset:0; z-index:90; background:rgba(28,20,14,.92); display:none;
  align-items:center; justify-content:center; padding:30px; flex-direction:column}
.lb.on{display:flex}
.lb img{max-width:92vw; max-height:80vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb .cap{color:#f0e4d2; margin-top:14px; font-style:italic; font-family:"Fraunces"; font-size:1.05rem}
.lb button{position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff; cursor:pointer;
  width:52px;height:52px; border-radius:50%; font-size:1.5rem; display:grid; place-items:center; transition:.2s}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb .close{top:20px; right:20px}
.lb .prev{left:18px; top:50%; transform:translateY(-50%)}
.lb .next{right:18px; top:50%; transform:translateY(-50%)}

/* sunset closing band */
.sunset{position:relative; text-align:center; padding:clamp(64px,10vw,130px) 0;
  background:#f3e3d2 center/cover no-repeat; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2)}
.sunset:before{content:""; position:absolute; inset:0; background:rgba(252,248,240,.32)}
.sunset .wrap{position:relative}
.sunset .olv{width:62px;height:62px;margin:0 auto 18px;object-fit:contain; filter:drop-shadow(0 6px 12px rgba(90,60,30,.18))}
.sunset p{font-family:"Fraunces"; font-style:italic; font-weight:500;
  font-size:clamp(1.35rem,3.6vw,2.1rem); line-height:1.34; color:#7c4a2c; margin:0 auto; max-width:20ch}
.footolive{width:54px;height:54px;margin:0 auto 16px;object-fit:contain;opacity:.92}

/* design-tiefe */
:where(section,header)[id]{scroll-margin-top:78px}
body:before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.olive-float{position:absolute; opacity:.45; pointer-events:none; z-index:0; filter:drop-shadow(0 10px 16px rgba(90,60,30,.12))}

/* Unterseiten-Header */
.pagehead{position:relative; min-height:46vh; display:flex; align-items:flex-end; overflow:hidden}
.pagehead .wrap{position:relative; z-index:2; width:100%; padding-top:clamp(120px,16vw,184px); padding-bottom:clamp(34px,5vw,60px)}
.pagehead h1{font-size:clamp(2.4rem,6vw,4rem); letter-spacing:-.01em; margin:0 0 .14em; line-height:1.05}
.pagehead .sub{color:var(--ink2); max-width:62ch; font-size:clamp(1.02rem,1.7vw,1.2rem)}
.note{font-size:.92rem; color:var(--ink3); font-style:italic}

/* Galerie-Seite */
.galyear{display:flex; align-items:baseline; gap:16px; margin:clamp(34px,5vw,58px) 0 18px}
.galyear h2{font-size:clamp(1.7rem,5vw,2.7rem); margin:0; color:var(--terra2)}
.galyear .ln{flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}
.galyear .ct{font-size:.78rem; color:var(--ink3); letter-spacing:.04em}
.gal-grid{column-count:4; column-gap:12px}
@media(max-width:1000px){.gal-grid{column-count:3}}
@media(max-width:680px){.gal-grid{column-count:2}}
.gal-item{display:block; width:100%; break-inside:avoid; margin:0 0 12px; padding:0; border:0; background:none;
  border-radius:12px; overflow:hidden; position:relative; cursor:pointer; box-shadow:var(--shadow-sm)}
.gal-item img{width:100%; display:block; transition:transform .45s ease}
.gal-item:hover img{transform:scale(1.045)}
.gal-item:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.gal-item .vbadge{position:absolute; left:8px; bottom:8px; display:flex; align-items:center; gap:5px;
  background:rgba(28,20,14,.66); color:#fff; font-size:.72rem; padding:3px 8px; border-radius:999px}
.gal-item .vbadge svg{width:10px;height:10px; fill:#fff}
.gal-item .pcenter{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.gal-item .pcenter span{width:46px;height:46px;border-radius:50%; background:rgba(255,255,255,.82);
  display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.3)}
.gal-item .pcenter svg{width:18px;height:18px; fill:var(--ink); margin-left:2px}
.glb{position:fixed; inset:0; z-index:95; background:rgba(24,17,11,.94); display:none;
  align-items:center; justify-content:center; padding:24px; flex-direction:column}
.glb.on{display:flex}
.glb img,.glb video{max-width:92vw; max-height:82vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.6); background:#000}
.glb .gcap{color:#efe2cf; margin-top:12px; font-family:"Fraunces"; font-style:italic; font-size:1rem}
.glb button{position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff; cursor:pointer;
  width:52px;height:52px; border-radius:50%; font-size:1.5rem; display:grid;place-items:center; transition:.2s}
.glb button:hover{background:rgba(255,255,255,.26)}
.glb .gx{top:20px;right:20px}
.glb .gp{left:18px; top:50%; transform:translateY(-50%)}
.glb .gn{right:18px; top:50%; transform:translateY(-50%)}
@media(max-width:680px){.glb .gp{left:8px}.glb .gn{right:8px}}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .navlinks{position:absolute; top:62px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:rgba(245,237,223,.98); border-bottom:1px solid var(--line); padding:10px 16px 16px; gap:2px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s}
  .navlinks.open{transform:none; opacity:1; pointer-events:auto}
  .navlinks a{padding:.7rem .6rem}
  .menubtn{display:block}
  .hero .wrap{grid-template-columns:1fr; text-align:center}
  .hero-photo{order:-1}
  .hero .sub{margin-left:auto;margin-right:auto}
  .split{grid-template-columns:1fr}
  .split.rev .txt{order:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){ body{font-size:17px} .gallery{grid-template-columns:repeat(2,1fr)} }

/* ---------- Download-Button + Schritte (App-Seite) ---------- */
.dl-btn{display:inline-block; background:var(--gold); color:#2b2118; font-weight:600; text-decoration:none;
  padding:.72rem 1.25rem; border-radius:999px; font-size:.95rem; box-shadow:0 8px 22px -8px rgba(214,160,60,.6); transition:.2s}
.dl-btn:hover{background:#e6b24f; transform:translateY(-2px)}
.steps{margin:1.3rem 0 0; padding-left:1.2rem; color:#e4d6c2}
.steps li{margin:.45rem 0}
.steps li b{color:#fbf2e3}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; margin:1.4rem 0 0}
.shots figure{margin:0; text-align:center}
.shots img{width:100%; max-width:280px; height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 16px 38px rgba(0,0,0,.55))}
.shots figcaption{margin-top:.8rem; font-size:.85rem; color:#d8c8b2; line-height:1.45}
.shots figcaption b{display:block; color:#fbf2e3; font-size:.95rem; margin-bottom:.15em}

/* --- Sprachumschalter DE|EN|ES --- */
.langsw{display:inline-flex;gap:.1rem;align-items:center}
.langsw a{font:600 .76rem/1 inherit;letter-spacing:.05em;padding:.2rem .42rem;border-radius:6px;opacity:.5;text-decoration:none;color:inherit}
.langsw a.on{opacity:1;background:rgba(193,106,67,.16);color:#C16A43}
.langsw a:hover{opacity:1}

/* Flaggen statt Buchstaben im Umschalter */
.langsw{gap:.25rem}
.langsw a{font-size:1.15rem;line-height:1;letter-spacing:0;padding:.1rem .25rem}

/* --- Store-Buttons (App-Seite) --- */
.storebox{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.05);border-radius:16px;padding:16px;flex:1;min-width:230px}
.store-btn{display:inline-flex;align-items:center;gap:.5rem;background:#fbf2e3;color:#2b2b2b;font-weight:700;padding:.55rem 1.05rem;border-radius:999px;text-decoration:none;font-size:.95rem;line-height:1}
.store-btn:hover{background:#fff}
.store-qr{width:104px;height:104px;border-radius:10px;background:#fff;padding:6px;flex:0 0 auto}