/* Lechsonde – Landingpage · Stil: Lechsonde-Bauchbinde (dunkel, abgenutzt, gold) · Schriften lokal */
@font-face{font-family:'Cinzel';src:url('fonts/cinzel-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cinzel';src:url('fonts/cinzel-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}

:root{
  --nacht:#0e0a07; --erde:#18110c; --flaeche:#211812; --flaeche2:#2a1f17;
  --creme:#EADBBA; --leise:#B7A588; --gold-hi:#F6DEA8; --gold:#D2A863; --gold-lo:#A87434;
  --linie:rgba(210,168,99,.55); --linie2:rgba(210,168,99,.22);
  --gruen:#3DFF7A;
  --gold-verlauf:linear-gradient(180deg,#F6DEA8 0%,#E2BC79 45%,#A87434 100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nacht);color:var(--creme);font:500 20px/1.55 Cormorant,Georgia,serif;overflow-x:hidden}
body{background:radial-gradient(ellipse 120% 600px at 50% 0,rgba(168,116,52,.16),transparent 70%),url('img/grund.webp') 0 0/512px 512px,var(--nacht)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi);text-underline-offset:3px;text-decoration-color:var(--linie)}
a:hover{color:var(--gruen)}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}
p{margin:0 0 14px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.leise{color:var(--leise);font-size:17px}
.gold{background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Navigation ─────────────────────────── */
.leiste{position:sticky;top:0;z-index:20;background:rgba(14,10,7,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie2)}
.leiste .wrap{display:flex;align-items:center;gap:14px;height:56px}
.leiste .marke{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 18px Cinzel,serif;letter-spacing:1px;white-space:nowrap}
.leiste .marke img{width:34px;height:34px}
.leiste nav{display:flex;gap:4px 18px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.leiste nav::-webkit-scrollbar{display:none}
.leiste nav a{font:600 13px Cinzel,serif;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;color:var(--creme);white-space:nowrap;padding:6px 0}
.leiste nav a:hover{color:var(--gold-hi)}
@media (max-width:820px){.leiste .marke span{display:none}.leiste nav{gap:4px 14px}}

/* ── Hero: die Bauchbinde ───────────────── */
.hero{padding:34px 0 10px}
.bb{position:relative;container-type:inline-size;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.bb img{width:100%}
.bb .text{position:absolute;left:25.5%;right:6%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.bb .kicker{font:600 1.55cqw Cinzel,serif;letter-spacing:.5cqw;text-transform:uppercase;color:var(--gold);margin:0 0 .6cqw}
.bb h1{font:700 7.2cqw/1 Cinzel,serif;margin:0;letter-spacing:.3cqw}
.bb .claim{font:500 italic 2.5cqw/1.2 Cormorant,serif;margin:.9cqw 0 0;color:var(--creme)}
.bb .claim b{font-style:normal;color:var(--gruen);font-weight:600}

.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
section.intro{padding:44px 16px 20px}
.portrait{position:relative;padding:10px;border:2px solid var(--gold);outline:1px solid var(--linie2);outline-offset:6px;background:var(--erde);transform:rotate(-1.2deg)}
.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;width:100%;filter:sepia(.1) contrast(1.03)}
.portrait figcaption{position:absolute;right:-12px;bottom:18px;background:var(--flaeche2);border:1px solid var(--gold);padding:4px 12px;font:600 13px Cinzel,serif;letter-spacing:2px;color:var(--gold-hi);transform:rotate(1.2deg)}
.intro h2{margin-top:0}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.knopf{display:inline-flex;align-items:center;gap:9px;padding:10px 18px 9px;border:1px solid var(--gold);background:linear-gradient(180deg,rgba(246,222,168,.06),rgba(168,116,52,.10));color:var(--creme);text-decoration:none;font:600 14px Cinzel,serif;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;position:relative}
.knopf::after{content:"";position:absolute;inset:3px;border:1px solid var(--linie2);pointer-events:none}
.knopf:hover{background:var(--gold);color:var(--nacht)}
.knopf.voll{background:var(--gold-verlauf);color:#1a120b;border-color:var(--gold-hi)}
.knopf.voll:hover{filter:brightness(1.08);color:#1a120b}
.knopf svg{width:18px;height:18px;flex:none}
@media (max-width:760px){.intro{grid-template-columns:1fr;gap:28px}.portrait{max-width:340px;margin:0 auto}}

/* ── Abschnitte & Plakette (Mini-Bauchbinde) ── */
section,section.wrap{padding:72px 16px 18px}
.plakette{position:relative;display:inline-block;margin:0 0 26px;padding:14px 34px 12px 26px;background:url('img/textur.webp') center/cover,var(--erde);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);box-shadow:inset 0 5px 0 -3px var(--linie2),inset 0 -5px 0 -3px var(--linie2),0 10px 24px rgba(0,0,0,.5);
  clip-path:polygon(0 6%,2% 0,40% 2%,70% 0,98% 3%,100% 12%,99% 50%,100% 88%,97% 100%,60% 98%,30% 100%,2% 97%,0 90%,1% 50%)}
.plakette small{display:block;font:600 12px Cinzel,serif;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:2px}
h2{font:700 clamp(30px,4.6vw,46px)/1.05 Cinzel,serif;margin:0;letter-spacing:.5px}
h2 .gold, .plakette h2{background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
h3{font:700 21px/1.2 Cinzel,serif;margin:0 0 8px;color:var(--gold-hi);letter-spacing:.5px}
.lead{font-size:22px;max-width:760px}

.karte{position:relative;background:linear-gradient(180deg,rgba(33,24,18,.92),rgba(24,17,12,.95)),url('img/textur.webp') center/cover;border:1px solid var(--linie);padding:22px 22px 18px}
.karte::before{content:"";position:absolute;inset:5px;border:1px solid var(--linie2);pointer-events:none}
.raster{display:grid;gap:18px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.r4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.r2,.r4{grid-template-columns:1fr}}

.ort svg{width:46px;height:46px;color:var(--gold);margin-bottom:10px}
.ort p{font-size:18px;margin:0}

/* Regeln */
.regeln{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;margin-top:22px}
@media (max-width:860px){.regeln{grid-template-columns:1fr}}
ol.liste{counter-reset:n;list-style:none;margin:0;padding:0}
ol.liste li{counter-increment:n;position:relative;padding:0 0 12px 46px;font-size:19px}
ol.liste li::before{content:counter(n,upper-roman);position:absolute;left:0;top:1px;width:32px;text-align:center;font:700 15px/28px Cinzel,serif;color:var(--nacht);background:var(--gold-verlauf);height:28px}
ol.liste b{color:var(--gold-hi);font-weight:600}
.recht-box{border-left:3px solid var(--gruen)}
.recht-box h3{color:var(--gruen)}
.recht-box ul{margin:0;padding-left:18px;font-size:18px}
.recht-box li{margin-bottom:8px}
.recht-box .leise{font-size:15px;margin-top:10px}

/* ── Einbettungen mit Einwilligung ─────── */
.einbettung{position:relative;border:1px solid var(--linie);background:#000;overflow:hidden}
.einbettung.yt{aspect-ratio:16/9}
.einbettung.ig{height:760px;background:var(--erde)}
.einbettung.ig[data-geladen]{background:#fff}
@media (max-width:640px){.einbettung.ig{height:620px}}
.einbettung iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sperre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px;background:var(--erde)}
.sperre>*{position:relative;z-index:1}
.sperre::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(14,10,7,.92),rgba(14,10,7,.55) 70%,rgba(14,10,7,.35))}
.sperre .vorschau{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(3px) brightness(.4) sepia(.35);transform:scale(1.04)}
.sperre .vorschau.gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;filter:blur(2px) brightness(.32) sepia(.3)}
.sperre .vorschau.gitter img{width:100%;height:100%;object-fit:cover}
.sperre p{max-width:560px;font-size:17px;margin:0;color:var(--leise)}
.sperre strong{font:700 20px Cinzel,serif;color:var(--gold-hi)}
.sperre label{font-size:16px;display:flex;gap:8px;align-items:center;cursor:pointer}
.sperre input{accent-color:var(--gold);width:18px;height:18px}
.mit-text{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:22px;align-items:start}
@media (max-width:860px){.mit-text{grid-template-columns:1fr}}
.formate{list-style:none;margin:0 0 6px;padding:0}
.formate li{padding:10px 0;border-bottom:1px solid var(--linie2);font-size:18px}
.formate li:last-child{border:0}
.formate b{display:block;font:700 16px Cinzel,serif;color:var(--gold-hi);letter-spacing:.5px}

/* ── Podcast ───────────────────────────── */
.podcast{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:start}
.podcast img{border:1px solid var(--linie)}
.ff{font:700 30px/1 Cinzel,serif;letter-spacing:1px}
.ff span:last-child{color:var(--gruen)}
.player{margin-top:14px}
.folge{border-top:1px solid var(--linie2);padding:12px 0}
.folge:first-child{border-top:0}
.folge h4{margin:0;font:600 19px Cormorant,serif;color:var(--creme)}
.folge .meta{font-size:15px;color:var(--leise)}
.folge audio{width:100%;margin-top:8px;height:40px}
.ki{font-size:16px;color:var(--leise);border-left:3px solid var(--gruen);padding:4px 0 4px 12px;margin:12px 0 0}
@media (max-width:640px){.podcast{grid-template-columns:1fr}.podcast img{max-width:200px}}

/* ── Fundarchiv ────────────────────────── */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.filter button{font:600 13px Cinzel,serif;letter-spacing:1.2px;text-transform:uppercase;padding:8px 14px;background:transparent;color:var(--creme);border:1px solid var(--linie);cursor:pointer}
.filter button[aria-pressed="true"]{background:var(--gold-verlauf);color:#1a120b;border-color:var(--gold-hi)}
.filter button .z{opacity:.7;margin-left:4px}
.funde{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.funde button{padding:0;border:1px solid var(--linie2);background:var(--erde);cursor:zoom-in;display:block;width:100%;transition:transform .2s,border-color .2s}
.funde button[hidden]{display:none}
.funde button:hover{transform:translateY(-3px);border-color:var(--gold)}
.funde img{aspect-ratio:4/5;object-fit:cover;width:100%}
@media (max-width:420px){.funde{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
dialog.lupe{border:2px solid var(--gold);background:var(--erde);padding:10px;max-width:min(560px,92vw);color:var(--creme)}
dialog.lupe::backdrop{background:rgba(0,0,0,.82)}
dialog.lupe img{width:100%}
dialog.lupe .zu{position:absolute;top:16px;right:16px;background:rgba(14,10,7,.88);color:var(--gold-hi);padding:6px 12px;font-size:18px}
dialog.lupe p{margin:10px 4px 2px;font-size:17px}
.mehr-btn{margin-top:18px}

/* ── Shop ──────────────────────────────── */
.shop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px;align-items:center}
.produkte{display:grid;gap:10px}
.produkte img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.produkte a:nth-child(even){margin-left:8%}
@media (max-width:860px){.shop{grid-template-columns:1fr}}

/* ── Acker gesucht ─────────────────────── */
.acker{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px}
@media (max-width:860px){.acker{grid-template-columns:1fr}}
ul.haken{list-style:none;margin:0 0 6px;padding:0}
ul.haken li{position:relative;padding:0 0 9px 30px;font-size:19px}
ul.haken li::before{content:"";position:absolute;left:2px;top:9px;width:14px;height:8px;border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(-45deg)}
.acker .bild{background:url('img/marius-acker.webp') 50% 20%/cover;min-height:260px;border:1px solid var(--linie)}

/* ── Fuß ───────────────────────────────── */
footer{margin-top:60px;border-top:1px solid var(--linie);padding:26px 0 40px;font-size:16px;color:var(--leise)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
footer button{font:inherit;background:none;border:0;color:var(--gold-hi);text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:3px;cursor:pointer;padding:0}

/* ── Rechtstexte ───────────────────────── */
.recht{max-width:820px}
.recht h2{font-size:30px;margin:34px 0 12px}
.recht h3{font-size:19px;margin:22px 0 6px}
.recht h4{font:600 19px Cormorant,serif;margin:14px 0 4px;color:var(--gold-hi)}
.recht p,.recht li{font-size:18px}
.recht ul{padding-left:20px}
.recht .wichtig{border:1px dashed var(--gruen);padding:12px 16px;color:var(--gruen)}

/* ── Handy-Feinschliff ─────────────────── */
.hero .unter{display:none}
@media (max-width:640px){
  .bb .kicker,.bb .claim{display:none}
  .bb h1{font-size:9cqw}
  .bb .text{left:27%}
  .hero{padding-top:20px}
  .hero .unter{display:block;text-align:center;margin:14px 0 0;font:500 italic 20px/1.3 Cormorant,serif}
  .hero .unter b{font-style:normal;color:var(--gruen);font-weight:600}
  .hero .unter small{display:block;font:600 11px Cinzel,serif;font-style:normal;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:4px}
  .einbettung.yt:not([data-geladen]){aspect-ratio:auto;height:380px}
  .einbettung.ig:not([data-geladen]){height:420px}
  .sperre p{font-size:16px}
  section,section.wrap{padding-top:56px}
}
.leiste nav{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}

/* Instagram-Vorschau (statisch, keine Einbettung) */
.ig-raster{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:1px solid var(--linie);padding:6px;background:var(--erde);text-decoration:none}
.ig-raster img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:filter .2s}
.ig-raster:hover img{filter:brightness(.75)}
.ig-hinweis{grid-column:1/-1;text-align:center;font:600 14px Cinzel,serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-hi);padding:8px 0 4px}

/* YouTube-Raster (Vorschaubilder liegen auf dem eigenen Server) */
.yt-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yt-raster a{display:block;text-decoration:none;color:var(--creme);border:1px solid var(--linie2);background:var(--erde);transition:border-color .2s,transform .2s}
.yt-raster a:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--gold-hi)}
.yt-raster .bild{position:relative}
.yt-raster img{aspect-ratio:16/9;object-fit:cover;width:100%}
.yt-raster .bild::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:32px;margin:-16px 0 0 -23px;border-radius:8px;background:rgba(14,10,7,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F6DEA8' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center/24px no-repeat;border:1px solid var(--gold)}
.yt-raster span{display:block;padding:8px 10px 10px;font-size:16px;line-height:1.3}
.yt-raster small{display:block;color:var(--leise);font-size:13px;margin-top:2px}
@media (max-width:520px){.yt-raster{grid-template-columns:1fr}}

/* Knöpfe im Über-mich-Block: immer gleich breit, nie ein einzelner Knopf in der nächsten Zeile */
.intro .knoepfe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.intro .knopf{justify-content:center;padding:11px 6px 10px;font-size:13px;letter-spacing:1px;white-space:nowrap}
@media (max-width:1200px){.intro .knoepfe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.intro .knoepfe{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Häufige Fragen */
.fragen details summary{cursor:pointer;list-style:none;position:relative;padding-right:28px}
.fragen details summary::-webkit-details-marker{display:none}
.fragen details summary::after{content:"+";position:absolute;right:0;top:-2px;font:700 22px Cinzel,serif;color:var(--gold)}
.fragen details[open] summary::after{content:"–"}
.fragen details h3{margin:0}
.fragen details p{margin:12px 0 0;font-size:18px}
.fragen{align-items:start}