
:root {
  --wk-green:       #2d6a2d;
  --wk-green-lt:    #3d8b3d;
  --wk-green-dark:  #1a3f1a;
  --wk-green-pale:  #e8f4e8;
  --wk-dark:        #1a2a1a;
  --wk-dark2:       #243024;
  --wk-bg:          #f2f2f2;
  --wk-bg2:         #e8f4e8;
  --wk-white:       #ffffff;
  --wk-text:        #2a2a2a;
  --wk-muted:       #5a6a5a;
  --radius:         4px;
  --max-w:          1100px;
}

.wk-inner { max-width:var(--max-w); margin:0 auto; }

.wk-label {
  display:inline-block;
  font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--wk-green-lt);
  margin-bottom:10px;
}

.wk-divider {
  width:50px; height:3px;
  background:var(--wk-green);
  margin:18px auto 30px;
}

.wk-btn {
  display:inline-block;
  padding:14px 32px;
  font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  text-decoration:none;
  border:2px solid var(--wk-green);
  background:var(--wk-green);
  color:var(--wk-white);
  cursor:pointer;
  transition:background .2s, color .2s;
  border-radius:var(--radius);
}
.wk-btn:hover { background:var(--wk-green-lt); border-color:var(--wk-green-lt); color:#fff; }

.wk-btn-outline {
  background:transparent;
  color:var(--wk-green);
  border-color:var(--wk-green);
}
.wk-btn-outline:hover { background:var(--wk-green); color:#fff; }

.wk-btn-light {
  border-color:var(--wk-white);
  background:transparent;
  color:var(--wk-white);
}
.wk-btn-light:hover { background:var(--wk-white); color:var(--wk-green-dark); }

/* ── HERO ───────────────────────────────────────────────────── */
.wk-hero {
  position:relative;
  background:url('https://emp3r48hp8z.exactdn.com/wp-content/uploads/fussball-training.jpg?strip=all') center center / cover no-repeat;
  min-height:520px;
  display:flex; align-items:flex-end;
  padding:60px 40px 60px 40px;
  padding-top:320px; /* Platz für fixe WordPress-Navigation */
  box-sizing:border-box;
}
.wk-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(10,30,10,.75) 45%, rgba(10,30,10,.2));
}
.wk-hero-inner { position:relative; max-width:var(--max-w); margin:0 auto; width:100%; }
.wk-hero-tag {
  font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:#a8d8a8;
  background:rgba(0,0,0,.35);
  display:inline-block;
  padding:5px 12px; border-radius:var(--radius);
  margin-bottom:18px;
}
.wk-hero h1 {
  color:var(--wk-white) !important;
  font-size:clamp(28px,5vw,54px);
  line-height:1.12; margin:0 0 20px;
  max-width:680px;
}
.wk-hero p {
  color:rgba(255,255,255,.88);
  font-size:17px; line-height:1.65;
  max-width:540px; margin:0 0 30px;
}

/* ── LEISTUNGSLEISTE ────────────────────────────────────────── */
.wk-bar { background:var(--wk-green); padding:26px 40px; }
.wk-bar-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center;
  flex-wrap:wrap; gap:0;
  justify-content:space-around;
}
.wk-bar-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; color:var(--wk-white);
}
.wk-bar-item svg { width:20px; height:20px; fill:rgba(255,255,255,.85); flex-shrink:0; }
.wk-bar-item span { font-size:13px; font-weight:600; letter-spacing:.5px; }
.wk-bar-sep { width:1px; height:40px; background:rgba(255,255,255,.25); }

/* ── INFO-SEKTION ───────────────────────────────────────────── */
.wk-info { background:var(--wk-white); padding:80px 20px; }
.wk-info-grid {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
}
.wk-info-grid h2 { font-size:clamp(22px,3.5vw,36px); color:var(--wk-dark) !important; margin:0 0 20px; line-height:1.2; }
.wk-info-grid p  { color:var(--wk-text); font-size:16px; line-height:1.8; margin:0 0 16px; }
.wk-info-img { position:relative; }
.wk-info-img img { width:100%; display:block; border-radius:var(--radius); object-fit:cover; aspect-ratio:4/3; }
.wk-info-img::after {
  content:''; position:absolute;
  bottom:-14px; right:-14px;
  width:70%; height:70%;
  border:3px solid var(--wk-green);
  border-radius:var(--radius); z-index:-1;
}

/* ── TRUST-BADGES ───────────────────────────────────────────── */
.wk-trust { background:var(--wk-green-dark); padding:30px 20px; }
.wk-trust-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; flex-wrap:wrap;
  gap:0; justify-content:space-around;
}
.wk-trust-item {
  display:flex; flex-direction:column;
  align-items:center; padding:16px 24px;
  text-align:center; min-width:150px;
}
.wk-trust-item .icon svg { width:24px; height:24px; fill:rgba(255,255,255,.85); }
.wk-trust-item .icon  { margin-bottom:8px; display:flex; justify-content:center; }
.wk-trust-item .title { font-size:13px; font-weight:700; color:var(--wk-white); margin-bottom:4px; }
.wk-trust-item .sub   { font-size:11px; color:rgba(255,255,255,.6); }

/* ── LEISTUNGSPAKETE ────────────────────────────────────────── */
.wk-pakete { background:var(--wk-bg); padding:80px 20px; }
.wk-pakete-head { text-align:center; margin-bottom:50px; }
.wk-pakete-head h2 { font-size:clamp(24px,4vw,42px); color:var(--wk-dark) !important; margin:0 0 10px; }

.wk-pakete-grid {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.wk-paket-card {
  background:var(--wk-white); border-radius:var(--radius);
  padding:32px 28px;
  border:1px solid #d4e4d4;
}
.wk-paket-card.featured {
  border-color:var(--wk-green);
  box-shadow:0 4px 24px rgba(45,106,45,.15);
}
.wk-paket-badge {
  display:inline-block;
  background:var(--wk-green);
  color:var(--wk-white);
  font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius);
  margin-bottom:14px;
}
.wk-paket-card h3 { font-size:20px; color:var(--wk-dark) !important; margin:0 0 8px; }
.wk-paket-price   { font-size:22px; font-weight:700; color:var(--wk-green); margin:0 0 6px; }
.wk-paket-price span { font-size:14px; font-weight:400; color:var(--wk-muted); }
.wk-paket-desc {
  font-size:14px; color:var(--wk-muted); line-height:1.6;
  margin:0 0 20px; padding-bottom:20px;
  border-bottom:1px solid #d4e4d4;
}
.wk-paket-list { list-style:none; padding:0; margin:0 0 28px; }
.wk-paket-list li {
  font-size:14px; color:var(--wk-text);
  padding:7px 0; display:flex; align-items:flex-start;
  gap:10px; border-bottom:1px solid #e8f4e8;
}
.wk-paket-list li .li-icon { fill:var(--wk-green); flex-shrink:0; margin-top:3px; width:13px; height:13px; }

/* ── INKLUSIVE-KARTEN ───────────────────────────────────────── */
.wk-inkl { background:var(--wk-white); padding:80px 20px; }
.wk-inkl-head { text-align:center; margin-bottom:50px; }
.wk-inkl-head h2 { font-size:clamp(24px,4vw,42px); color:var(--wk-dark) !important; margin:0 0 10px; }
.wk-inkl-grid {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.wk-inkl-card { background:var(--wk-bg2); border-radius:var(--radius); padding:28px 22px; }
.wk-inkl-card .icon { display:block; margin-bottom:14px; }
.wk-inkl-card .icon svg { width:28px; height:28px; fill:var(--wk-green); }
.wk-inkl-card h4 { font-size:15px; font-weight:700; color:var(--wk-dark) !important; margin:0 0 8px; }
.wk-inkl-card p  { font-size:13px; color:var(--wk-muted); line-height:1.6; margin:0; }

/* ── SEO-CONTENT ────────────────────────────────────────────── */
.wk-content { background:var(--wk-bg); padding:80px 20px; }
.wk-content-inner { max-width:820px; margin:0 auto; }
.wk-content h2 {
  font-size:clamp(20px,3vw,30px);
  color:var(--wk-dark) !important;
  margin:48px 0 16px; padding-top:16px;
  border-top:2px solid #c8dcc8;
}
.wk-content h2:first-child { margin-top:0; border-top:none; padding-top:0; }
.wk-content p { font-size:16px; color:var(--wk-text); line-height:1.8; margin:0 0 18px; }

/* ── FAQ ────────────────────────────────────────────────────── */
.wk-faq { background:var(--wk-white); padding:80px 20px; }
.wk-faq-inner { max-width:820px; margin:0 auto; }
.wk-faq-head { text-align:center; margin-bottom:50px; }
.wk-faq-head h2 { font-size:clamp(24px,4vw,38px); color:var(--wk-dark) !important; margin:0 0 10px; }
.wk-faq-item { border-bottom:1px solid #d4e4d4; padding:22px 0; }
.wk-faq-item:first-of-type { border-top:1px solid #d4e4d4; }
.wk-faq-q { font-size:16px; font-weight:700; color:var(--wk-green-dark); margin:0 0 10px; }
.wk-faq-a { font-size:15px; color:var(--wk-muted); line-height:1.7; margin:0; }

/* ── ZUSAMMENFASSUNG ────────────────────────────────────────── */
.wk-summary { background:var(--wk-bg2); padding:60px 20px; }
.wk-summary-inner { max-width:820px; margin:0 auto; }
.wk-summary h2 { font-size:clamp(20px,3vw,28px); color:var(--wk-dark) !important; margin:0 0 24px; }
.wk-summary ul {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;
}
.wk-summary ul li {
  background:var(--wk-white);
  border-left:4px solid var(--wk-green);
  padding:14px 18px;
  font-size:15px; color:var(--wk-text);
  line-height:1.5;
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ── ABSCHLUSS-CTA ──────────────────────────────────────────── */
.wk-cta { background:var(--wk-green-dark); padding:80px 20px; text-align:center; }
.wk-cta .wk-label { display:block; text-align:center; }
.wk-cta h2 { color:var(--wk-white) !important; font-size:clamp(24px,4vw,42px); margin:0 0 16px; }
.wk-cta p  { color:rgba(255,255,255,.8); font-size:16px; max-width:560px; margin:0 auto 36px; line-height:1.7; }
.wk-cta-btns { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:768px) {
  .wk-info-grid { grid-template-columns:1fr; }
  .wk-info-img  { order:-1; }
  .wk-bar-sep   { display:none; }
  .wk-bar-inner { flex-direction:column; align-items:flex-start; gap:8px; }
  .wk-hero { padding:40px 20px; min-height:420px; }
}
