:root{--green:#22a861;--ink:#111}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.site-header{position:sticky;top:0;background:#f4fbf7;border-bottom:1px solid #caefe0;z-index:20}
.header-wrap{display:flex;gap:22px;align-items:center;padding:14px 0}
.brand img,.brand svg{height:52px}
.site-nav ul{display:flex;gap:40px;list-style:none;margin:0;padding:0}
.site-nav a{font-weight:600;color:#223}
.lang-switch{margin-left:auto;position:relative}
.lang-btn{border:1px solid #e3ece7;background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center}
.lang-menu{display:none;position:absolute;right:0;top:46px;background:#fff;border:1px solid #e3ece7;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:6px;min-width:180px}
.lang-menu.open{display:block}
.lang-menu a{display:flex;gap:8px;padding:8px 10px;border-radius:8px;color:#223}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:42px 0}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 10px}
.hero p{font-size:18px;color:#455}
.badge{display:inline-block;background:var(--green);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;margin-bottom:10px}
.cta{display:inline-block;margin-top:14px;background:var(--green);color:#fff;padding:12px 16px;border-radius:12px;font-weight:700}
.section{padding:28px 0;border-top:1px solid #f0f2f1}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:1px solid #e8eeeb;border-radius:16px;padding:18px;background:#fff}
.notice{background:#f3faf6;border:1px solid #caefe0;color:#124;padding:14px;border-radius:12px}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.people img{width:100%;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.site-footer{background:#124f36;color:#fff;border-top:1px solid #0e3f2a;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:26px;padding:28px 0}
.logo-square{height:78px;border-radius:10px}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{margin:6px 0}
.tiny{font-size:13px;color:#667;margin-top:-10px;padding-bottom:16px}
@media (max-width:900px){.hero{grid-template-columns:1fr}.people{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}
.site-footer a{color:#e6fff3}
.site-footer h4{color:#fff}
.site-footer .tiny{color:#cfe9db}

.footer-copy{margin-top:0.4rem;font-size:13px;opacity:.9;text-align:left;margin-left:0;padding-left:0;text-indent:0;display:block}

/* === PATCH FIX 2025-FOCUS ===
   - Badge "Unsere Schwerpunkte" bekommt ":"
   - Hellgrüner Hintergrund der Kartentitel sicherstellen
   - Abstand Badge -> Karten verkleinern
   - Trennstrich entfernen
*/
.section .badge::after{content:":";margin-left:.25rem}
.card h3{display:inline-block;background:#e6f7ee;padding:4px 10px;border-radius:10px;margin:0 0 8px 0}
.card h3::after{content:":"}
.section.container.grid.grid-3{border-top:none !important;margin-top:0 !important}
.section hr,.section .divider{display:none !important}
.section .badge{margin-bottom:8px !important}
/* === END PATCH FIX 2025-FOCUS === */

	/* Abstand zwischen "Unsere Schwerpunkte" (CTA) und den Boxen verkleinern */
.hero .cta{ 
  display:inline-block;   /* falls vorher inline – damit margin greift */
  margin-bottom: 6px;     /* gewünschter Abstand */
}

/* Falls der Abstand vom nächsten Abschnitt kommt: gezielt nur hier reduzieren */
.hero + .section.container.grid.grid-3{
  margin-top: 6px;        /* ggf. 0–12px testen */
}

/* Optional: wenn die Hero-Sektion selbst unten Luft lässt */
.hero{ 
  padding-bottom: 0; 
  margin-bottom: 0; 
}

/* Falls die grüne Beschriftung als .badge (statt .cta) gestylt ist: */
.hero .badge{ margin-bottom: 6px; }

/* PATCH: Language button pill should wrap flag + code */
.lang-btn{
  background:#fff !important;
  border:1px solid #e3ece7 !important;
  border-radius:9999px !important;
  padding:6px 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
.lang-btn .flag{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  display:block;
}

	
	/* Sprachflaggen als IMG (ersetzt Emoji) */
.lang-flag {
  width: 18px;
  height: auto;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
}

.lang-btn .lang-code {
  font-weight: 600;
}

.lang-menu a .lang-code {
  min-width: 26px; /* hält EN/DE/FR optisch sauber */
  display: inline-block;
}