/* DJK St. Michael Marpingen – statische Seite */
:root{
  --background:#221a14;
  --foreground:#f6f1e6;
  --card:#2b2218;
  --card-2:#332719;
  --muted:#b1a795;
  --border:#3a2e21;
  --primary:#5fbf6e;
  --primary-2:#b6d472;
  --primary-soft:rgba(95,191,110,.15);
  --primary-border:rgba(95,191,110,.45);
  --shadow-glow:0 20px 60px -15px rgba(95,191,110,.45);
  --gradient-hero:linear-gradient(135deg,#5fbf6e 0%,#b6d472 100%);
  --gradient-dark:radial-gradient(ellipse at top,#3a2c1d 0%,#1a130c 70%);
  --font-display:"Bebas Neue","Anton",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0}
body{
  background:var(--gradient-dark);
  background-attachment:fixed;
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:880px;margin:0 auto;padding:0 24px}
.display{font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.muted{color:var(--muted)}
.primary{color:var(--primary)}
.kicker{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--primary)}

/* Header */
header.site{display:flex;align-items:center;justify-content:space-between;padding:24px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:40px;object-fit:contain}
.brand span{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.18em;text-transform:uppercase}
.nav{display:flex;gap:8px;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:transform .15s,opacity .15s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-hero{background:var(--gradient-hero);color:#13260f;box-shadow:var(--shadow-glow)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--foreground)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost{background:transparent;color:var(--foreground)}
.btn-ghost:hover{color:var(--primary)}
.btn-sm{padding:8px 14px;font-size:.85rem}
.btn-lg{padding:14px 28px;font-size:1rem}
.btn-block{width:100%;justify-content:center}

/* Pill */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--primary-border);background:var(--primary-soft);color:var(--primary);padding:6px 16px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(95,191,110,.25);animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,191,110,.45)}100%{box-shadow:0 0 0 12px rgba(95,191,110,0)}}

/* Hero */
.hero{padding:64px 0 80px}
.hero-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:880px){.hero-grid{grid-template-columns:1fr 1fr;align-items:center}}
.hero h1{font-family:var(--font-display);font-size:clamp(3.2rem,9vw,7rem);line-height:.95;margin:24px 0 0;text-transform:uppercase;letter-spacing:-.01em}
.hero h1 .accent{background:var(--gradient-hero);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-top:24px;max-width:520px;color:var(--muted);font-size:1.05rem}
.hero .sub{margin-top:16px;text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;color:#a9dba8;font-weight:600}
.hero-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;position:relative}
.stat{border:1px solid var(--border);background:rgba(43,34,24,.6);backdrop-filter:blur(8px);padding:24px;border-radius:18px}
.stat .v{font-family:var(--font-display);font-size:3rem;color:var(--primary);line-height:1}
.stat .l{margin-top:6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}

/* Sections */
section.band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(20,15,10,.4);padding:64px 0}
section.pad{padding:80px 0}
h2.section{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);margin:8px 0 0;text-transform:uppercase;letter-spacing:.04em}

/* Cards grid */
.card-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.card-grid{grid-template-columns:repeat(4,1fr)}}
.r-card{border:1px solid var(--border);background:rgba(43,34,24,.6);padding:20px;border-radius:18px;transition:transform .2s,border-color .2s}
.r-card:hover{border-color:var(--primary);transform:translateY(-4px)}
.r-card .icon{width:28px;height:28px;color:var(--primary)}
.r-card h3{font-family:var(--font-display);font-size:1.25rem;margin:14px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.r-card p{color:var(--muted);font-size:.9rem;margin:0}

/* Quiz */
.quiz-wrap{max-width:720px;margin:0 auto}
.quiz-card{border:1px solid var(--border);background:rgba(43,34,24,.8);backdrop-filter:blur(8px);padding:32px;border-radius:22px;box-shadow:var(--shadow-glow)}
@media(min-width:640px){.quiz-card{padding:40px}}
.q-progress{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.q-bar{height:4px;background:#3a2e21;border-radius:999px;overflow:hidden;margin-bottom:32px}
.q-bar > div{height:100%;background:var(--gradient-hero);width:0%;transition:width .5s}
.q-title{font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.25rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.q-options{display:grid;gap:12px;margin-top:32px}
.q-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--border);background:rgba(58,46,33,.4);padding:16px 20px;border-radius:14px;text-align:left;font-weight:500;cursor:pointer;color:var(--foreground);font-size:1rem;transition:transform .15s,border-color .2s,background .2s}
.q-opt:hover{border-color:var(--primary);background:rgba(58,46,33,.7);transform:translateX(4px)}
.q-opt .arrow{color:var(--muted)}
.q-opt:hover .arrow{color:var(--primary)}
.q-back{margin-top:24px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;display:inline-flex;gap:8px;align-items:center}
.q-back:hover{color:var(--foreground)}

/* Result */
.result-head{text-align:center}
.result-badge{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:20px;margin-top:16px}
.result-name{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;margin:16px 0 8px}
.result-desc{color:var(--muted);max-width:520px;margin:0 auto}
.result-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:768px){.result-grid{grid-template-columns:1fr 1fr}}
.result-box{border:1px solid var(--border);background:rgba(58,46,33,.3);padding:20px;border-radius:14px}
.result-box .label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.result-box ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.result-box li{display:flex;gap:8px;font-size:.92rem}
.result-box li:before{content:"✓";color:var(--primary);font-weight:bold}
.rank-row{margin-bottom:12px}
.rank-row .top{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:4px}
.rank-bar{height:8px;background:#3a2e21;border-radius:999px;overflow:hidden}
.rank-bar > div{height:100%;border-radius:999px;transition:width .8s}
.contact-box{border:1px solid var(--primary-border);background:var(--primary-soft);padding:20px;border-radius:14px;margin-top:24px}
.contact-row{display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){.contact-row{flex-direction:row;align-items:center;justify-content:space-between}}
.contact-name{font-family:var(--font-display);font-size:1.25rem;text-transform:uppercase}
.contact-actions{display:flex;flex-wrap:wrap;gap:8px}

/* CTA */
.cta-box{position:relative;overflow:hidden;border-radius:24px;padding:48px;border:1px solid var(--primary-border);background:var(--gradient-hero);color:#13260f}
.cta-box h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);text-transform:uppercase;margin:12px 0 8px;color:#13260f}
.cta-box p{color:#1a3014;max-width:520px}
.cta-grid{display:grid;gap:24px;align-items:center;grid-template-columns:1fr}
@media(min-width:768px){.cta-grid{grid-template-columns:1fr auto}}

/* Video */
.video-wrap{max-width:780px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border)}
.video-wrap iframe{width:100%;height:100%;border:0;display:block}

/* Footer */
footer.site{border-top:1px solid var(--border);padding:32px 0;color:var(--muted);font-size:.9rem}
footer.site .row{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:space-between;text-align:center}
@media(min-width:768px){footer.site .row{flex-direction:row;text-align:left}}
footer.site a:hover{color:var(--primary)}

/* Über-uns specific */
.ebene-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:40px}
@media(min-width:768px){.ebene-grid{grid-template-columns:repeat(3,1fr)}}
.ebene{border:1px solid var(--border);background:rgba(43,34,24,.7);padding:24px;border-radius:18px}
.ebene .icon-box{width:48px;height:48px;border-radius:14px;background:var(--primary-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.4rem;margin-bottom:16px}
.ebene h3{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;margin:8px 0 8px}

.two-col{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:880px){.two-col{grid-template-columns:1fr 1.2fr}}
.marken-stack{display:grid;gap:16px}
.marke{position:relative;overflow:hidden;border:1px solid var(--border);background:rgba(43,34,24,.7);padding:24px;border-radius:16px}
.marke .accent-bar{position:absolute;left:0;top:0;height:100%;width:4px}
.marke .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.marke h3{font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase;margin:0}
.marke .badge{border:1px solid var(--border);background:#3a2e21;color:var(--muted);padding:2px 10px;border-radius:999px;font-size:.72rem}
.checklist{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;font-size:.92rem;align-items:flex-start}
.checklist li:before{content:"✓";color:var(--primary);font-weight:bold;margin-top:1px}

.ressort-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:880px){.ressort-grid{grid-template-columns:1fr 1fr}}
.ressort{border:1px solid var(--border);background:rgba(43,34,24,.7);padding:24px;border-radius:18px;transition:border-color .2s}
.ressort:hover{border-color:var(--primary)}
.ressort .head{display:flex;gap:16px;align-items:flex-start}
.ressort .icon-box{flex:0 0 44px;height:44px;border-radius:14px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.2rem}
.ressort h3{font-family:var(--font-display);font-size:1.25rem;text-transform:uppercase;letter-spacing:.04em;margin:0}
.ressort .small{color:var(--muted);font-size:.88rem;margin:4px 0 0}
.bullets{margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--border);list-style:none;display:grid;gap:8px}
.bullets li{display:flex;gap:10px;font-size:.9rem;align-items:flex-start}
.bullets li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:8px;flex:0 0 6px}
.profil{margin-top:20px;border:1px solid var(--primary-border);background:var(--primary-soft);padding:16px;border-radius:14px}
.profil .label{font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--primary)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tag{border:1px solid var(--border);background:#3a2e21;padding:4px 10px;border-radius:999px;font-size:.75rem}
.dl{display:grid;gap:8px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:520px){.dl{grid-template-columns:1fr 1fr}}
.dl dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.dl dd{margin:4px 0 0;font-size:.85rem}
.role-list{display:grid;gap:8px;margin-top:20px}
.role-list .item{border:1px solid var(--border);background:rgba(58,46,33,.5);padding:12px 16px;border-radius:10px;display:flex;align-items:center;gap:12px;font-size:.92rem}

/* Datenschutz */
.legal{padding:32px 0 80px}
.legal h1{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4rem);text-transform:uppercase;margin:8px 0 16px;line-height:1.05}
.legal h2{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;margin:40px 0 12px}
.legal p,.legal li{color:var(--muted);line-height:1.65}
.legal strong{color:var(--foreground)}
.legal ul{padding-left:22px}
.legal a{color:var(--primary);text-decoration:underline}

/* Utility */
.center{text-align:center}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.hidden{display:none!important}