@charset "utf-8";
:root {
  --green: #57ab27;
  --green-dark: #4b9321;
  --green-light: #b8d698;
  --green-tint: #f2f8ec;
  --orange: #f29400;
  --orange-light: #f6ac59;
  --text: #333;
  --grey: #838383;
  --line: #e3e8dd;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.65 "Trebuchet MS", Arial, Helvetica, sans-serif; color: var(--text); background: #f5f7f3; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main.stage { flex: 1; }
img { max-width: 100%; height: auto; }
a { color: var(--green-dark); }
a:hover { color: var(--orange); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Topbar */
.topbar { background: #707173; font-size: 14px; }
.topbar .wrap { display: flex; justify-content: flex-end; gap: 22px; align-items: center; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar .cta { color: #fff; background: var(--orange); padding: 5px 16px; border-radius: 99px; font-weight: bold; }
.topbar .cta:hover { background: var(--orange-light); text-decoration: none; }

/* Header + Navigation */
header.site { background: #fff; border-bottom: 3px solid var(--green); position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.logo img { display: block; max-width: 300px; }
nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
nav li { position: relative; }
nav a { display: block; padding: 10px 16px; color: var(--text); text-decoration: none; border-radius: 99px; font-size: 16px; }
nav > ul > li > a:hover, nav li.act > a { background: var(--green-tint); color: var(--green-dark); }
nav li.has > a::after { content: " \25BE"; font-size: 11px; color: var(--grey); }
nav li ul { display: none; position: absolute; left: 0; top: 100%; min-width: 270px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0,0,0,.14); border-top: 3px solid var(--green); }
nav li.has:hover > ul, nav li.has:focus-within > ul { display: block; }
nav li ul a { border-radius: 8px; padding: 8px 14px; font-size: 15px; }
nav li ul a:hover { background: var(--green-tint); color: var(--green-dark); }
.burger { display: none; cursor: pointer; padding: 12px; }
.burger span, .burger span::before, .burger span::after { display: block; width: 26px; height: 3px; background: var(--green-dark); border-radius: 3px; position: relative; content: ""; }
.burger span::before { position: absolute; top: -8px; }
.burger span::after { position: absolute; top: 8px; }

/* Bühne: ruhiger, heller Verlauf ohne Punktemuster */
.stage { min-height: 50vh; padding: 44px 0 70px; background: linear-gradient(180deg, var(--green-tint) 0, #f5f7f3 380px); }
.card { background: #fff; border-radius: 18px; padding: 36px 44px; box-shadow: 0 10px 34px rgba(40,70,20,.14); }
.card.single { max-width: 980px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.hero .photo { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 34px rgba(40,70,20,.22); border: 6px solid #fff; }
.infos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.infos .card { padding: 22px 24px; font-size: 15px; border-top: 4px solid var(--green); }
.infos h3 { margin: 0 0 .4em; font-size: 1rem; color: var(--green-dark); }
.infos p { margin: 0; }
.infos a.card { text-decoration: none; color: #fff; background: var(--orange); border-top-color: var(--orange-light); transition: transform .2s; }
.infos a.card h3 { color: #fff; }
.infos a.card:hover { transform: translateY(-3px); background: var(--orange-light); }
.faq-teaser { margin-top: 28px; }
.faq-teaser h2 { margin: 0 0 .5em; font-size: 1.35rem; color: var(--green-dark); }
.faq-teaser ul { margin: 0 0 1em; padding-left: 1.3em; }
.faq-teaser li::marker { color: var(--green); }
.content { max-width: 920px; }
.hero .content { max-width: none; }
.content h1 { font-weight: bold; font-size: 1.5rem; line-height: 1.2; color: var(--green); margin: 0 0 .7em; }
.content h2 { font-size: 1.35rem; color: var(--green-dark); margin: 1.6em 0 .5em; }
.content h3 { font-size: 1.1rem; margin: 1.3em 0 .4em; }
.content h1:not(:first-child) { margin-top: 1.8em; padding-top: 1em; border-top: 1px solid var(--line); }
.content ul, .content ol { padding-left: 1.3em; }
.content li { margin: .3em 0; }
.content li::marker { color: var(--green); }
.content img { border-radius: var(--radius); }
.content img.pic-right, .content video.pic-right { float: right; margin: 6px 0 18px 28px; }
.content img.pic-left, .content video.pic-left { float: left; margin: 6px 28px 18px 0; }
.content img.pic-center, .content video.pic-center { display: block; margin: 16px auto; }
.content img.pic-s, .content video.pic-s { width: 25%; }
.content img.pic-m, .content video.pic-m { width: 40%; }
.content img.pic-l, .content video.pic-l { width: 60%; }
.content img.pic-full, .content video.pic-full { width: 100%; float: none; display: block; margin: 16px 0; }
.content h1, .content h2, .content hr { clear: none; }
.content h1:not(:first-child) { clear: both; }
.content video { width: 100%; border-radius: var(--radius); background: #000; margin: 16px 0; }
.content table { border-collapse: collapse; width: 100%; }
.content td, .content th { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.btn { display: inline-block; background: var(--green); color: #fff !important; padding: 10px 22px; border-radius: 99px; text-decoration: none; font-weight: bold; margin: 4px 6px 4px 0; }
.btn:hover { background: var(--orange); }

/* Footer */
footer.site { background: #707173; border-top: 6px solid var(--green); color: #fff; padding: 28px 0; text-align: center; font-size: 15px; }
footer.site p { margin: .3em 0; }
footer.site a { color: #fff; }
footer.site a:hover { color: var(--green-light); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero .photo { height: auto; order: -1; }
  .infos { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 26px 22px; }
  .burger { display: block; }
  nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 3px solid var(--green); max-height: 75vh; overflow: auto; padding: 10px 20px 20px; }
  #burger:checked ~ nav { display: block; }
  nav > ul { flex-direction: column; }
  nav li ul { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; }
  nav li.has > a::after { content: ""; }
  .content img.pic-right, .content video.pic-right, .content img.pic-left, .content video.pic-left { float: none; display: block; margin: 12px auto; }
  .content img.pic-s, .content video.pic-s { width: 40%; } .content img.pic-m, .content video.pic-m { width: 60%; } .content img.pic-l, .content video.pic-l { width: 85%; }
  .topbar .wrap { justify-content: center; gap: 12px; font-size: 13px; }
}
@media (max-width: 480px) { .infos { grid-template-columns: 1fr; } .logo img { max-width: 220px; height: auto; } }

/* Team: Kartenraster (gleich hohe Karten) mit Lightbox für die Details */
.pagetitle { font-weight: bold; font-size: 1.5rem; line-height: 1.2; color: var(--green); margin: 0 0 .8em; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; align-items: stretch; }
.person { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 34px rgba(40,70,20,.14); border-top: 4px solid var(--green); }
.person > img, .person .noimg { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--green-tint); }
.person .info { padding: 18px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.person h2 { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 1.2rem; margin: 0 0 .3em; color: var(--text); }
.badge { display: block; min-height: 1.7em; margin-bottom: .6em; }
.badge:not(:empty) { display: inline-block; background: var(--green-tint); color: var(--green-dark); font-size: 13px; padding: 2px 12px; border-radius: 99px; align-self: flex-start; }
.person .more { margin-top: auto; border: 0; cursor: pointer; font: bold 15px "Trebuchet MS", Arial, sans-serif; padding: 8px 20px; }

dialog.lightbox { border: 0; border-radius: 18px; padding: 0; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 70px rgba(0,0,0,.35); overflow: auto; }
dialog.lightbox::backdrop { background: rgba(30,40,25,.65); }
.lightbox .close { position: absolute; top: 10px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox .close:hover { background: var(--orange); }
.lightbox .lb { display: grid; grid-template-columns: 300px 1fr; }
.lightbox .lb img { width: 100%; height: 100%; object-fit: cover; object-position: top; min-height: 380px; }
.lightbox .lbtext { padding: 34px 36px 30px 30px; }
.lightbox h2 { font-size: 1.5rem; margin: 0 0 .4em; color: var(--green-dark); }
.lightbox ul { margin: .6em 0 0; padding-left: 1.2em; }
.lightbox li { margin: .35em 0; }
.lightbox li::marker { color: var(--green); }
@media (max-width: 700px) { .lightbox .lb { grid-template-columns: 1fr; } .lightbox .lb img { height: 280px; min-height: 0; } .lightbox .lbtext { padding: 22px; } }