:root{
  --bg:#161f18; --mint:#abd2a1; --pale:#eef6ea; --ink:#223025; --green:#3f6e3b;
  --silver:#c5d0c9; --bar:50px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--pale);
  font:17px/1.7 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(900px 600px at 50% 0,#2e4232 0,rgba(46,66,50,0) 70%),
    radial-gradient(700px 500px at 100% 100%,#22331f 0,rgba(34,51,31,0) 70%),
    var(--bg);
  background-attachment:fixed;
}
img{max-width:100%}
a{color:var(--green); font-weight:600; text-underline-offset:3px}

/* Gimmick-Flächen */
#pfoten{position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
#augen{position:fixed; right:clamp(12px,2vw,90px); bottom:var(--bar); width:220px; height:100px; z-index:2; pointer-events:none}

/* Banner */
.banner{max-width:1100px; margin:0 auto; padding:28px 16px 14px}
.banner a{display:block; line-height:0}
.banner img{display:block; width:100%; height:auto; border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 1px rgba(171,210,161,.25)}

/* Reiter */
.tabs{position:sticky; top:0; z-index:5; background:rgba(22,31,24,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid rgba(171,210,161,.18)}
.tabs .in{max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:6px; padding:8px 16px; overflow-x:auto; scrollbar-width:none}
.tabs .in::-webkit-scrollbar{display:none}
.tabs a{flex:none; color:var(--silver); font-weight:600; font-size:15px; text-decoration:none; padding:9px 16px; border-radius:999px; white-space:nowrap; transition:background .2s,color .2s}
.tabs a:hover{background:rgba(171,210,161,.16); color:#fff}
.tabs a.on{background:var(--mint); color:#17301a}
.tabs a.lg{padding:0; margin-right:8px; line-height:0; border-radius:50%}
.tabs a.lg:hover{background:none}
.tabs a.lg img{width:38px; height:38px; border-radius:50%; display:block}
.tabs a.alt{margin-left:auto; font-weight:400; font-size:13px; opacity:.7}
.tabs a.alt:hover{opacity:1}

/* Inhalt */
main{max-width:1000px; margin:0 auto; padding:34px 16px 56px}
section{scroll-margin-top:72px; margin-bottom:40px}
.card{background:var(--pale); color:var(--ink); border-radius:22px; padding:clamp(22px,4vw,48px); box-shadow:0 14px 44px rgba(0,0,0,.4)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; font-weight:400; font-style:italic; line-height:1.15}
h2{color:var(--green); font-size:clamp(2rem,4.5vw,2.9rem); margin:0 0 .5em}
h3{color:var(--green); font-size:1.6rem; margin:1.8em 0 .6em}
.sub{font-size:1.15rem; color:#4d6a4a; margin:-.2em 0 1.4em}
.sig{font-style:italic}
.leer{opacity:.65}
p{margin:0 0 1em}

/* Start */
.hero{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(22px,4vw,52px); align-items:center; padding:8px 0}
.hero h1{margin:0; color:var(--mint); font-size:clamp(2.1rem,5vw,3.5rem)}
.hero img{width:100%; height:auto; display:block; border-radius:26px; border:8px solid var(--pale); box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 2px var(--mint)}

/* Info und FIFe */
blockquote{margin:1.4em auto; max-width:34em; padding:18px 26px; border-left:4px solid #8fbf86; background:rgba(171,210,161,.3); font-style:italic; border-radius:0 14px 14px 0}
.std{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; margin:0; border-top:1px solid rgba(63,110,59,.25)}
.std dt,.std dd{margin:0; padding:12px 0; border-bottom:1px solid rgba(63,110,59,.25)}
.std dt{font-weight:700; color:var(--green); padding-right:28px}
.pts{border-collapse:collapse; width:100%; max-width:420px}
.pts td{padding:8px 0; border-bottom:1px solid rgba(63,110,59,.25)}
.pts td+td{text-align:right; white-space:nowrap}
.pts .sum{font-weight:700; color:var(--green)}

/* Galerien */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:1.6em}
.gal a{display:block; aspect-ratio:1; overflow:hidden; border-radius:12px; background:#cfdccb}
.gal img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.gal a:hover img{transform:scale(1.07)}

/* Lightbox */
dialog#lb{border:0; padding:0; background:transparent; width:100%; max-width:100vw; height:100%; max-height:100vh; overflow:hidden}
dialog#lb::backdrop{background:rgba(8,12,9,.92)}
dialog#lb[open]{display:flex; align-items:center; justify-content:center}
#lb-img{max-width:min(92vw,1200px); max-height:84vh; object-fit:contain; border-radius:10px; box-shadow:0 10px 60px rgba(0,0,0,.6)}
#lb button{position:absolute; border:0; background:rgba(238,246,234,.14); color:#fff; cursor:pointer; border-radius:50%; width:48px; height:48px; font:400 30px/1 Arial,sans-serif; transition:background .2s}
#lb button:hover{background:rgba(171,210,161,.45)}
.lb-x{top:14px; right:14px}
.lb-p{left:14px; top:50%; margin-top:-24px}
.lb-n{right:14px; top:50%; margin-top:-24px}
.lb-c{position:absolute; bottom:16px; left:0; right:0; text-align:center; color:var(--silver); font-size:14px; letter-spacing:.08em}


@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .std{grid-template-columns:1fr}
  .std dt{border-bottom:0; padding-bottom:0}
  .std dd{padding-top:2px}
  #augen{width:165px; height:75px}
  .adr-m{display:block; margin:0; padding:14px 20px; border-radius:16px; background:rgba(238,246,234,.08); color:var(--silver); font:400 14px/1.6 Arial,Helvetica,sans-serif; font-style:normal}
  footer .adr{display:none}
  footer .wrap{justify-content:center}
  .banner{padding-top:16px}
}