:root{
  --cream:#F3F6EC;
  --cream-2:#EFF3E6;
  --brown-dark:#243A18;
  --brown-mid:#5B8C3E;
  --brown-text:#4F7233;
  --orange:#6AA84F;
  --orange-soft:#8FB573;
  --green:#5B8C3E;
  --green-bright:#6AA84F;
  --green-dark:#2E4A22;
  --green-footer:#2C3D20;
  --green-bg:#E7EDDD;
  --olive-text:#5F7040;
  --freq-bg:#E9EDDF;
  --freq-text:#2E4A22;
  --freq-dark:#1C2E12;
  --freq-footer:#2C3D20;
  --gold:#D4A23C;
  --card-border:#A9BC8F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;font-size:1.1rem;background:var(--cream);color:var(--brown-dark);line-height:1.65;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- LANDING ---------- */
.hero{padding:70px 22px 70px;text-align:center}
.hero h1{position:relative;display:inline-block;font-family:'Dancing Script',cursive;font-size:clamp(3rem,7vw,4.8rem);font-weight:700;letter-spacing:.01em;line-height:1.15;margin:0 0 12px;padding:0 .6em;background:linear-gradient(110deg,var(--green-dark) 0%,var(--green) 35%,#D6EFAE 50%,var(--green) 65%,var(--green-dark) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 10px rgba(36,58,24,.35));animation:shine 9s linear infinite}
@keyframes shine{to{background-position:-220% center}}
.hero h1 .spark{position:absolute;font-size:.32em;line-height:1;animation:twinkle 4s ease-in-out infinite}
.hero h1 .s1{top:-.3em;left:.2em}
.hero h1 .s2{top:-.6em;right:.4em;font-size:.42em;animation-delay:1s}
.hero h1 .s3{bottom:-.4em;right:22%;font-size:.26em;animation-delay:2s}
.hero h1 .s4{bottom:.1em;left:-.1em;font-size:.24em;animation-delay:3s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.5) rotate(-15deg)}50%{opacity:1;transform:scale(1.15) rotate(12deg)}}
.hero .name{font-size:1.25rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--green)}
.cards{max-width:900px;margin:48px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:0 0 10px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:16px;transition:transform .35s ease}
.card .pic{position:relative;border-radius:14px;overflow:hidden;padding-top:140%;box-shadow:0 10px 26px rgba(58,43,25,.16);border:6px solid var(--brown-dark);background:#fff;transition:box-shadow .35s}
.card .pic img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s ease}
.card:hover{transform:translateY(-8px)}
.card:hover .pic{box-shadow:0 18px 38px rgba(58,43,25,.28)}
.card:hover .pic img{transform:scale(1.06)}
.card h3{position:absolute;bottom:0;left:0;right:0;z-index:1;margin:0;padding:60px 14px 20px;color:#fff;text-align:center;font-size:.88rem;line-height:1.45;font-weight:700;text-transform:uppercase;letter-spacing:.18em;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 28px rgba(255,255,255,.6),0 1px 4px rgba(0,0,0,.6);animation:textGlow 2s ease-in-out infinite alternate;transition:transform .3s}
.card h3::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.2) 70%,transparent 100%);z-index:-1}
.card:hover h3{animation:hoverGlow 2.5s ease-in-out infinite}
@keyframes textGlow{from{text-shadow:0 0 8px rgba(255,255,255,.6),0 0 18px rgba(255,255,255,.3),0 1px 4px rgba(0,0,0,.6)}to{text-shadow:0 0 18px rgba(255,255,255,1),0 0 36px rgba(255,255,255,.85),0 1px 4px rgba(0,0,0,.6)}}
@keyframes hoverGlow{
  0%,100%{text-shadow:0 0 10px #fff,0 0 22px rgba(255,255,255,.7),0 0 40px rgba(255,255,255,.4),0 1px 4px rgba(0,0,0,.5)}
  50%{text-shadow:0 0 18px #fff,0 0 38px rgba(255,255,255,.95),0 0 65px rgba(255,255,255,.6),0 1px 4px rgba(0,0,0,.5)}
}
.card:hover h3{transform:scale(1.05)}
.card .arrow{margin:0 auto;text-align:center;font-size:.95rem;font-weight:600;padding:9px 22px;border-radius:26px;border:2px solid;transition:background .3s,color .3s,transform .3s}
.card:hover .arrow{transform:translateY(2px)}
.c-orange .pic{border-color:var(--green)}
.c-brown .pic{border-color:var(--green)}
.c-green .pic{border-color:var(--green)}
.c-dark .pic{border-color:var(--green)}
.c-orange .arrow{color:var(--green);border-color:var(--green)}
.c-brown .arrow{color:var(--green);border-color:var(--green)}
.c-green .arrow{color:var(--green);border-color:var(--green)}
.c-dark .arrow{color:var(--green);border-color:var(--green)}
.c-orange:hover .arrow{background:var(--green);color:#fff}
.c-brown:hover .arrow{background:var(--green);color:#fff}
.c-green:hover .arrow{background:var(--green);color:#fff}
.c-dark:hover .arrow{background:var(--green);color:#fff}

/* ---------- SECTION HEROES ---------- */
.sec-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:260px;overflow:hidden}
.sec-hero .bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(6px) brightness(.72);transform:scale(1.05)}
.sec-hero h1{position:relative;font-family:'Dancing Script',cursive;color:#fff;font-size:clamp(2.8rem,6vw,4.2rem);font-weight:700;line-height:1.15;text-align:center;padding:0 20px;text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* ---------- shared ---------- */
.wrap{max-width:980px;margin:0 auto;padding:60px 24px}
.section-sub{font-size:1.5rem;font-weight:700;margin-bottom:26px}
.center{text-align:center}
.sig{font-weight:600;margin-top:28px}
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:32px;padding:12px 26px;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-light{background:#fff;color:var(--brown-dark)}
.btn-green{background:var(--green-dark);color:#fff}
.btn-brown{background:var(--brown-mid);color:#fff}
.btn-freq{background:var(--freq-dark);color:#fff}
.info-box{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:30px 26px;text-align:center;max-width:780px;margin:44px auto 0;box-shadow:0 8px 22px rgba(58,43,25,.12)}
.info-box h4{font-size:1.35rem;font-weight:700;letter-spacing:.04em;margin-bottom:8px}
.info-box p{margin-bottom:16px !important;font-weight:500 !important;font-style:normal !important}
.info-box .btn{margin:0 6px 6px}
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:40px 0 10px}
.photo-row .frame{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.14);border:6px solid var(--brown-dark);background:#fff;padding-top:130%;cursor:pointer;will-change:transform;animation:photoFloat 5s ease-in-out infinite}
.photo-row .frame:nth-child(2){animation-delay:-1.7s}
.photo-row .frame:nth-child(3){animation-delay:-3.3s}
.photo-row .frame:hover{animation:none}
.photo-row img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s ease}
.photo-row .frame:hover img{transform:scale(1.05)}
.page-sport .photo-row .frame{border-color:var(--brown-mid)}
.page-natur .photo-row .frame{border-color:var(--green-dark)}
.grid-2{display:grid;grid-template-columns:340px 1fr;gap:46px;align-items:start}
.back-link{display:inline-block;margin-bottom:26px;text-decoration:none;font-size:.88rem;font-weight:600;opacity:.75;transition:opacity .25s}
.back-link:hover{opacity:1}

/* ---------- TEXT-GLIEDERUNG ---------- */
.sub-script{color:var(--green-dark);font-size:1.25rem;font-weight:700;line-height:1.3;margin:34px 0 12px}
.page-natur .sub-script,.page-sport .sub-script{text-align:center}

/* ---------- REVIEWS ---------- */
.reviews h3{font-size:1.3rem;font-weight:700;margin:46px 0 22px;color:var(--green)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 16px rgba(58,43,25,.07);transition:transform .3s,box-shadow .3s}
.rev:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(58,43,25,.14)}
.stars{color:var(--gold);font-size:1.05rem;letter-spacing:3px}
.rev p{font-style:italic;font-size:.875rem;color:#4a4a4a;flex:1}
.rev .name{font-weight:700;font-size:.9rem;color:var(--brown-mid)}
.rev p.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.rev .more{background:none;border:none;color:var(--green);font-weight:600;font-size:.85rem;cursor:pointer;padding:0;text-align:left;font-family:inherit}
.rev .more:hover{text-decoration:underline}

/* ---------- ÜBER MICH ---------- */
.page-uebermich .sec-body{background:#ECEFDB}
.page-uebermich .bike{border:8px solid var(--orange);border-radius:6px;overflow:hidden;box-shadow:0 14px 30px rgba(58,43,25,.18);position:sticky;top:90px;cursor:pointer;will-change:transform;animation:photoFloat 5s ease-in-out infinite}
.page-uebermich .bike:hover{animation:none}
@keyframes photoFloat{0%,100%{transform:translateY(0) rotate(.25deg)}50%{transform:translateY(-9px) rotate(-.25deg)}}
.photo-shine{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.page-uebermich h2.greet{color:var(--green-bright);font-size:1.45rem;font-weight:700;margin-bottom:18px}
.page-uebermich .text p{color:var(--green-dark);font-weight:500;margin-bottom:14px}
.page-uebermich .back-link{color:var(--olive-text)}
.page-uebermich footer{background:var(--orange-soft)}

/* ---------- SPORT ---------- */
.page-sport .sec-body{background:var(--cream-2)}
.page-sport .intro p{color:var(--green-dark);font-weight:500;text-align:center;margin-bottom:14px}
.page-sport .back-link{color:var(--brown-text)}
.page-sport footer{background:var(--brown-mid)}

/* ---------- NATUR ---------- */
.page-natur .sec-body{background:var(--green-bg)}
.page-natur .sec-body p{color:var(--green-dark);font-weight:500;text-align:center;margin-bottom:14px}
.page-natur .reviews h3{color:var(--green-dark)}
.page-natur .rev{border-color:#A9BC8F}
.page-natur .rev p{color:#4a4a4a;font-weight:400;text-align:left;margin-bottom:0}
.page-natur .back-link{color:var(--green-dark)}
.page-natur footer{background:var(--green-footer)}
.ringana-box{background:#fff;border:1px solid #7E9560;border-radius:16px;padding:30px 26px;text-align:center;max-width:640px;margin:44px auto 0;box-shadow:0 8px 22px rgba(46,74,34,.12)}
.ringana-box h4{color:var(--green-dark);font-size:1.35rem;font-weight:700;letter-spacing:.04em;margin-bottom:8px}
.ringana-box p{margin-bottom:16px !important;font-weight:500 !important}

/* ---------- FREQUENZEN ---------- */
.page-freq .sec-hero{background:var(--freq-dark)}
.page-freq .sec-hero .bg{opacity:.55;filter:blur(6px) brightness(.6) sepia(1) hue-rotate(55deg) saturate(1.4)}
.page-freq .sec-body{background:var(--freq-bg)}
.page-freq .section-sub{text-align:center;color:var(--freq-text)}
.page-freq .matte{border:6px solid var(--freq-dark);border-radius:10px;overflow:hidden;box-shadow:0 14px 32px rgba(33,23,16,.3);position:sticky;top:90px;cursor:pointer;will-change:transform;animation:photoFloat 6s ease-in-out infinite}
.page-freq .matte:hover{animation:none}
.page-freq .matte img{width:100%}
.page-freq .grid-2{grid-template-columns:320px 1fr}
.page-freq .text p{color:var(--green-dark);font-weight:500;margin-bottom:14px}
.page-freq .back-link{color:var(--freq-text)}
.page-freq footer{background:var(--freq-footer)}

/* ---------- FOOTER ---------- */
footer{background:var(--brown-dark);color:#fff;padding:40px 24px 26px}
.foot-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
footer h4{font-size:1.1rem;font-weight:400;text-transform:uppercase;letter-spacing:.18em;margin-bottom:4px}
footer .meta{display:flex;flex-direction:row;align-items:center;gap:24px;font-size:.95rem;opacity:.95;flex-wrap:wrap;justify-content:center}
footer .meta b{font-weight:600}
footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .25s}
footer a:hover{border-color:#fff}
footer .btn-light{border-bottom:none;color:var(--brown-dark)}
.tagline{text-align:center;font-family:'Dancing Script',cursive;font-size:1.15rem;font-weight:600;font-style:normal;opacity:.9;margin-top:20px;letter-spacing:.02em}
.copyright{max-width:1180px;margin:10px auto 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font-size:.78rem;opacity:.7;text-align:center}

/* ---------- back to top ---------- */
#toTop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:var(--brown-dark);color:#fff;border:none;font-size:1.2rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:90;box-shadow:0 6px 16px rgba(0,0,0,.25)}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-3px);background:var(--green)}

/* ---------- reveal animations ---------- */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero h1,.hero h1 .spark{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- MOBILE ---------- */
@media (max-width:920px){
  .cards{grid-template-columns:repeat(2,1fr);gap:20px;padding-left:22px;padding-right:22px}
  .grid-2,.page-freq .grid-2{grid-template-columns:1fr}
  .page-uebermich .bike{position:static;max-width:380px;margin:0 auto 10px}
  .page-freq .matte{position:static;max-width:340px;margin:0 auto 10px}
  .rev-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .hero{padding:52px 18px 50px}
  .cards{grid-template-columns:1fr;max-width:340px}
  .card .pic{padding-top:125%}
  .photo-row{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .rev-grid{grid-template-columns:1fr}
  .wrap{padding:44px 20px}
  .sec-hero{min-height:180px}
  .foot-inner{flex-direction:column;align-items:center}
}

/* ── Sportkurse hero fix ───────────────────────────────────────── */
/* Aktuelle Kurse heading green */
.page-sport .info-box h4{color:var(--green)}
.page-sport .info-box p,.page-sport .info-box p strong{color:var(--green) !important}

/* ── Promo / Gutschein box ─────────────────────────────────────── */
.promo-box{background:linear-gradient(135deg,#f0f9e8 0%,#e2f0d0 100%);border:2px dashed var(--green);border-radius:10px;padding:14px 18px;text-align:center;max-width:420px;margin:22px auto;box-shadow:0 4px 16px rgba(60,100,30,.1)}
.promo-box p{margin:0 0 10px !important;font-weight:500 !important;color:var(--green-dark) !important;font-style:normal !important}
.promo-code{display:inline-block;font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:.15em;color:var(--green);background:#fff;border:2px solid var(--green);border-radius:6px;padding:5px 20px;margin-top:2px;box-shadow:0 2px 8px rgba(91,140,62,.18)}

/* ── Mehr Infos factbox – kompakt, in Textspalte ──────────────── */
.mehr-infos{background:rgba(231,237,221,.45);border:1px solid rgba(91,140,62,.22);border-radius:8px;margin:16px 0 0;overflow:hidden}
.mehr-infos summary{padding:8px 14px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.8rem;cursor:pointer;color:var(--green);letter-spacing:.06em;text-transform:uppercase;list-style:none;display:flex;align-items:center;justify-content:space-between;user-select:none}
.mehr-infos summary::-webkit-details-marker{display:none}
.mehr-infos summary::after{content:'+';font-size:1.1rem;font-weight:300;color:var(--green);transition:transform .3s}
.mehr-infos[open] summary::after{transform:rotate(45deg)}
.mehr-infos-content{padding:2px 14px 14px;border-top:1px solid rgba(91,140,62,.18)}
.mehr-infos-content h4{font-size:.82rem;font-weight:700;color:var(--green-dark);margin:12px 0 2px}
.mehr-infos-content p{font-size:.82rem;margin-bottom:0 !important;color:var(--text) !important;font-weight:400 !important;line-height:1.5}
/* beach cartwheel photo: person centered */
.page-sport .photo-row .frame:nth-child(2) img{object-fit:cover;object-position:42% center}
.page-sport .sec-hero .bg{background-position:center top}