/* ==========================================================================
   Grüne Liste Helsa – Stylesheet
   Farben, Schriften und Formen zentral hier ändern.
   ========================================================================== */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../assets/fonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}


:root {
  --gruen:  #2E9B3C;   /* Hauptgrün (Header, Buttons)      */
  --dunkel: #16612A;   /* Überschriften                    */
  --tief:   #0F3C1B;   /* Foto-Overlay                     */
  --hell:   #E7F1DC;   /* helle grüne Flächen              */
  --creme:  #FBFAF4;   /* Seitenhintergrund                */
  --gelb:   #FFD21F;   /* Akzent                           */
  --ink:    #1E2A1C;   /* Fließtext                        */
  --grau:   #4A5A46;   /* Sekundärtext                     */
  --breite: 1120px;    /* max. Inhaltsbreite               */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* hält den Fuß auch auf kurzen Seiten unten */
  background: var(--creme);
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

a { color: var(--dunkel); text-underline-offset: 3px; }
a:hover { color: var(--gruen); }

h1, h2, h3, .schrift-nunito { font-family: 'Nunito', system-ui, sans-serif; letter-spacing: -0.02em; }

h1 { margin: 0; font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1.06; color: var(--dunkel); }
h2 { margin: 0; font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: var(--dunkel); }
p  { line-height: 1.7; text-wrap: pretty; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--gruen);
  padding-bottom: clamp(30px, 4.5vw, 54px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%);
}
.kopf-inner {
  max-width: var(--breite); margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 40px) 4px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
}
.kopf-logo img { height: clamp(58px, 7vw, 84px); width: auto; }

.menu { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.menu a {
  font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 17px;
  color: #fff; text-decoration: none; padding: 6px 0;
  border-bottom: 3px solid transparent;
}
.menu a:hover { color: #FFF6C9; }
.menu a.aktiv { border-bottom-color: var(--gelb); }

/* --- Buttons ------------------------------------------------------------- */

.btn, .btn-gelb {
  display: inline-block; cursor: pointer; border: 0; text-decoration: none;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 18px;
  padding: 14px 28px; border-radius: 999px;
}
.btn      { background: var(--gruen); color: #fff; box-shadow: 0 6px 0 0 #1B6E2A; }
.btn:hover{ background: #268233; color: #fff; }
.btn-gelb { background: var(--gelb); color: var(--tief); }
.btn-gelb:hover { background: #FFC400; color: var(--tief); }

/* --- Wellen -------------------------------------------------------------- */

.welle { display: block; width: 100%; height: clamp(36px, 5vw, 70px); }
.welle-oben  { margin-bottom: -1px; }
.welle-unten { margin-top: -1px; }
.band { background: var(--hell); }

/* --- Startseite ---------------------------------------------------------- */

.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 56px); align-items: center;
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(24px, 4vw, 48px);
}
.hero-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.dachzeile {
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gruen);
}
.hero p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 46ch; }
.hero-bild { position: relative; }
.hero-bild::before {
  content: ""; position: absolute; inset: -14px -10px 10px -14px;
  background: var(--gelb); border-radius: 34px; transform: rotate(-2.5deg);
}
.hero-bild img { position: relative; width: 100%; height: auto; border-radius: 28px; transform: rotate(1.2deg); }

.claim { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding-block: clamp(10px,2vw,24px) clamp(24px,4vw,44px); }
.claim h2 { max-width: 22ch; font-size: clamp(24px, 3vw, 38px); text-wrap: balance; }
.claim p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 56ch; color: #3F5039; }

/* Bilderleiste – die Formen wechseln sich nach Position ab */
.galerie {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  padding: 0 clamp(14px, 3vw, 28px) clamp(20px, 3vw, 36px);
  align-items: end;
}
.galerie img { width: 100%; height: clamp(150px, 17vw, 240px); object-fit: cover; border-radius: 20px; }
.galerie img:nth-child(2) { height: clamp(130px, 15vw, 210px); border-radius: 999px 999px 20px 20px; }
.galerie img:nth-child(3) { border-radius: 20px 90px 20px 90px; }
.galerie img:nth-child(4) { height: clamp(130px, 15vw, 210px); border-radius: 20px 20px 999px 999px; }
.galerie img:nth-child(5) { border-radius: 90px 20px 90px 20px; }
/* schmalere Bildschirme: nur vier Bilder, damit keine einzelne zweite Reihe entsteht */
@media (max-width: 1040px) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
  .galerie img:nth-child(5) { display: none; }
}
@media (max-width: 620px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie img { height: clamp(140px, 32vw, 200px); }
  .galerie img:nth-child(2), .galerie img:nth-child(4) { height: clamp(140px, 32vw, 200px); }
}

.mitmachen {
  background: var(--gruen); border-radius: 36px 36px 120px 36px; overflow: hidden;
  padding: clamp(28px, 4.5vw, 56px); margin: clamp(14px,2vw,30px) 0 clamp(48px,7vw,90px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 48px); align-items: center;
}
.mitmachen h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); }
.mitmachen p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #E8F5E1; max-width: 44ch; }
.mitmachen-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mitmachen img { width: 100%; height: clamp(200px, 26vw, 300px); object-fit: cover; border-radius: 24px 24px 24px 90px; }

/* --- Themen -------------------------------------------------------------- */

.seitenkopf { padding-block: clamp(24px,4vw,48px) clamp(28px,4vw,52px); display: flex; flex-direction: column; gap: 14px; }
.seitenkopf p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 52ch; color: var(--grau); }

.themen { display: flex; flex-direction: column; }
.thema { padding: clamp(28px,4vw,52px) 0; }
.thema.thema-hell { padding: clamp(10px,1.5vw,20px) 0 clamp(20px,3vw,36px); }
.thema-inner {
  max-width: var(--breite); margin: 0 auto; padding: 0 clamp(20px,5vw,40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3.5vw, 56px); align-items: center;
}
.thema-text { display: flex; flex-direction: column; gap: 16px; }
.thema-text p { margin: 0; font-size: 17px; }
.thema-bilder { display: flex; flex-direction: column; gap: 18px; }

/* jedes zweite Thema (ohne Foto-Thema) bekommt die helle grüne Fläche */
.thema.thema-hell { background: var(--hell); }

.thema-foto { position: relative; clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 calc(100% - 34px)); margin: clamp(20px,3vw,40px) 0; }
.thema-foto > img.hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.thema-foto .overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,60,27,.9) 0%, rgba(15,60,27,.72) 46%, rgba(15,60,27,.25) 100%); }
.thema-foto .thema-inner { position: relative; padding-top: clamp(64px,9vw,120px); padding-bottom: clamp(64px,9vw,120px); }
.thema-foto h2, .thema-foto .dachzeile { color: #fff; }
.thema-foto .dachzeile { color: var(--gelb); }
.thema-foto p { color: #E4F0DD; }
.bildtext { font-family: 'Nunito', sans-serif; font-size: 14px; color: #CBE2C2; }

/* Bildformen der Themen */
.form-kreis  { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; }
.form-oval   { width: 100%; height: clamp(200px,24vw,300px); object-fit: cover; border-radius: 50% / 34%; }
.form-bogen-o{ width: 100%; height: clamp(200px,22vw,280px); object-fit: cover; border-radius: 999px 999px 24px 24px; }
.form-bogen-u{ width: 100%; height: clamp(160px,18vw,220px); object-fit: cover; border-radius: 24px 24px 999px 999px; }
.form-blob   { width: 100%; height: clamp(160px,18vw,220px); object-fit: cover; border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
.form-schraeg{ width: 100%; max-width: 420px; height: clamp(200px,24vw,300px); object-fit: cover; border-radius: 24px 120px 24px 120px; }
.form-bogen-lr { width: 100%; height: clamp(200px,26vw,320px); object-fit: cover; border-radius: 180px 24px 180px 24px; }

.klima-bilder { position: relative; display: flex; justify-content: center; padding-bottom: 36px; }
.klima-bilder .gross { width: 100%; max-width: 460px; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; }
.klima-bilder .klein { position: absolute; right: 4%; bottom: 0; width: clamp(106px,18vw,180px); aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; border: 6px solid var(--hell); }

.mobil-bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(12px,2vw,22px); align-items: end; margin-top: clamp(22px,3vw,36px); }

.programm {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  background: var(--gruen); border-radius: 32px 32px 32px 110px; padding: clamp(24px,3.5vw,40px);
  margin: clamp(28px,4vw,52px) 0 clamp(48px,7vw,90px);
}
.programm p { margin: 0; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: clamp(19px,2vw,26px); color: #fff; max-width: 24ch; }
.programm .btn-gelb { margin-left: auto; }

/* --- Fraktion ------------------------------------------------------------ */

.gruppe { display: flex; flex-direction: column; gap: 22px; margin-bottom: clamp(32px,4vw,56px); }
.gruppe > h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(22px,2.4vw,28px); font-weight: 700; }
.gruppe > h2::after { content: ""; flex: 1; height: 2px; background: #CFE0BE; }
.personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px,2vw,28px); }
.person { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 22%; border-radius: 50% 50% 46% 54% / 44% 44% 56% 56%; }
.person-name { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 21px; color: var(--dunkel); }
.person-rolle { font-size: 16px; color: var(--grau); }
.person-ort { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); }

/* --- Kontakt ------------------------------------------------------------- */

.kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(28px,4vw,56px); align-items: start; padding-block: clamp(24px,4vw,56px) clamp(48px,7vw,90px); }
.kontakt-spalte { display: flex; flex-direction: column; gap: 22px; }
.kontakt-karte { background: var(--hell); border-radius: 30px 30px 90px 30px; padding: clamp(22px,3vw,34px); display: flex; flex-direction: column; gap: 18px; font-size: 17px; }
.kontakt-karte .titel { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 20px; color: var(--dunkel); }
.kontakt-bild { width: 100%; height: clamp(280px,42vw,520px); object-fit: cover; border-radius: 220px 220px 40px 40px; }
.formular { border: 2px dashed #C6D9B4; border-radius: 30px; padding: clamp(20px,3vw,30px); display: flex; flex-direction: column; gap: 14px; }
.formular input, .formular textarea { border: 1px solid #CFE0BE; border-radius: 14px; padding: 12px 14px; font-size: 16px; font-family: inherit; background: #fff; }
.formular textarea { resize: vertical; }
.hinweis { font-size: 14px; color: #7A8676; }

/* --- Textseite (Impressum) ----------------------------------------------- */

.textseite { max-width: 760px; margin: 0 auto; padding: clamp(24px,4vw,56px) clamp(20px,5vw,40px) clamp(48px,7vw,90px); display: flex; flex-direction: column; gap: 26px; }
.textseite section { display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.7; }
.textseite h2 { font-size: 19px; font-weight: 700; }

/* --- Fuß ----------------------------------------------------------------- */

main { flex: 1 0 auto; width: 100%; }

.fuss { background: var(--gruen); flex-shrink: 0; color: #EAF6E4; margin-top: clamp(20px,3vw,40px); clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
.fuss-inner {
  max-width: var(--breite); margin: 0 auto;
  padding: clamp(40px,5vw,64px) clamp(20px,5vw,40px) clamp(24px,3vw,36px);
  display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-end; justify-content: space-between;
}
.fuss img { height: clamp(64px,7vw,88px); width: auto; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 16px; }
.fuss-links a { color: #EAF6E4; }
.fuss-links a:hover { color: var(--gelb); }
.fuss-links span { color: #C6E4BC; }

/* --- Kleine Bildschirme -------------------------------------------------- */

@media (max-width: 620px) {
  .menu { gap: 16px; width: 100%; }
  .menu a { font-size: 16px; }
  .kopf { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); }
  .thema-foto { clip-path: none; }
  .mitmachen { border-radius: 28px 28px 70px 28px; }
  .programm { border-radius: 28px 28px 28px 70px; padding-bottom: clamp(28px,5vw,40px); }
  .programm .btn-gelb { margin-left: auto; margin-right: 8px; }
}