/* vianova.coop – Designsystem
   Farben aus dem Logo: Dunkelgrün #005826, Schwarz, Rot als Akzent. */

:root{
  --gruen:#005826;
  --gruen-hell:#0d7a3a;
  --gruen-blass:#e8f1ea;
  --dunkel:#13201a;
  --text:#202824;
  --grau:#5d6b64;
  --linie:#dde5e0;
  --flaeche:#f3f7f4;
  --weiss:#fff;
  --rot:#c8102e;
  --breite:1120px;
  --schmal:760px;
  --radius:10px;
  --schatten:0 1px 2px rgba(19,32,26,.06), 0 8px 24px rgba(19,32,26,.07);
  --font:"Source Sans 3","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url(../schriften/source-sans-3-400.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url(../schriften/source-sans-3-600.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;
  src:url(../schriften/source-sans-3-700.woff2) format("woff2");}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;
  color:var(--text);background:var(--weiss);overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
a{color:var(--gruen);text-underline-offset:.15em}
a:hover{color:var(--gruen-hell)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;color:var(--dunkel);font-weight:700;
  overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3rem)}
h2{font-size:clamp(1.45rem,1.15rem + 1.2vw,2.05rem)}
h3{font-size:1.2rem}
p,ul,ol{margin:0 0 1.1em}
ul,ol{padding-left:1.3em}
li{margin-bottom:.3em}
hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--linie);padding:.5em .7em;text-align:left;vertical-align:top}
th{background:var(--flaeche)}
blockquote{margin:1.5em 0;padding:.2em 0 .2em 1.2em;border-left:4px solid var(--gruen);
  color:var(--grau);font-style:italic}
code{background:var(--flaeche);padding:.1em .35em;border-radius:4px;font-size:.92em}

.innen{max-width:var(--breite);margin:0 auto;padding:0 1.25rem}
.nur-lesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springen{position:absolute;left:-9999px;background:var(--gruen);color:#fff;padding:.7em 1.2em;z-index:100}
.springen:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:2px}

/* ---------- Kopf ---------- */
.kopf{background:var(--weiss);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:50}
.kopf-innen{display:flex;align-items:center;gap:1rem;min-height:72px}
.marke{display:flex;align-items:center;flex:0 0 auto}
.marke img{width:200px;height:auto;display:block}
.haupt{margin-left:auto}
.haupt ul{list-style:none;margin:0;padding:0;display:flex;gap:.35rem;align-items:center}
.haupt li{margin:0;position:relative}
.haupt a{display:block;padding:.55rem .8rem;border-radius:8px;text-decoration:none;
  font-weight:600;color:var(--dunkel);white-space:nowrap}
.haupt a:hover{background:var(--gruen-blass);color:var(--gruen)}
.haupt a[aria-current]{color:var(--gruen);box-shadow:inset 0 -3px 0 var(--gruen)}
.haupt .hat-unter>ul{display:none;position:absolute;top:100%;left:0;min-width:270px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:.4rem;flex-direction:column;gap:0}
.haupt .hat-unter:hover>ul,.haupt .hat-unter:focus-within>ul{display:flex}
.haupt .auf{display:none}
.menue-schalter{display:none;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer}
.menue-schalter span:not(.nur-lesbar){display:block;width:24px;height:2px;background:var(--dunkel);margin:5px 0;
  transition:transform .2s,opacity .2s}
.menue-schalter[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-schalter[aria-expanded=true] span:nth-child(2){opacity:0}
.menue-schalter[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .menue-schalter{display:block}
  .haupt{display:none;position:absolute;top:100%;left:0;right:0;background:var(--weiss);
    border-bottom:1px solid var(--linie);box-shadow:var(--schatten);padding:.6rem 1.25rem 1.2rem}
  .haupt.offen{display:block}
  .haupt ul{flex-direction:column;align-items:stretch;gap:0}
  .haupt a{padding:.75rem .5rem;border-bottom:1px solid var(--linie)}
  .haupt .hat-unter>ul{display:none;position:static;border:0;box-shadow:none;padding:0 0 0 1rem}
  .haupt .hat-unter.offen>ul{display:flex}
  .haupt .hat-unter:hover>ul{display:none}
  .haupt .hat-unter.offen:hover>ul{display:flex}
  .haupt .auf{display:block;position:absolute;right:0;top:.25rem;width:44px;height:44px;
    background:none;border:0;cursor:pointer}
  .haupt .auf::after{content:"";display:block;width:9px;height:9px;margin:0 auto;
    border-right:2px solid var(--dunkel);border-bottom:2px solid var(--dunkel);transform:rotate(45deg)}
  .haupt .hat-unter.offen .auf::after{transform:rotate(-135deg)}
}

/* ---------- Hero ---------- */
.hero{background:var(--gruen);color:#fff;padding:4.5rem 0;position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  border-radius:0}
.hero--bild::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(0,88,38,.94) 0%,rgba(0,88,38,.78) 55%,rgba(0,88,38,.5) 100%)}
.hero h1{color:#fff;max-width:20ch}
.hero-text{font-size:1.2rem;max-width:52ch;margin:0;color:rgba(255,255,255,.93)}
.hero--klein{padding:2.75rem 0}
.hero--klein h1{max-width:30ch}

/* ---------- Krumen ---------- */
.krumen{background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:.92rem}
.krumen .innen{padding-top:.7rem;padding-bottom:.7rem}
.krumen a{color:var(--grau);text-decoration:none}
.krumen a:hover{color:var(--gruen);text-decoration:underline}
.krumen span{color:var(--dunkel)}
.krumen .pfeil{color:var(--linie);margin:0 .15em}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:3.25rem 0}
.abschnitt--flaeche{background:var(--flaeche)}
.abschnitt--schmal .innen{max-width:var(--schmal)}
.text{max-width:var(--schmal)}
.text img{border-radius:var(--radius)}
figure{margin:1.75rem 0}
figure img{border-radius:var(--radius);display:block;width:100%}
figcaption{font-size:.9rem;color:var(--grau);margin-top:.5rem}
.externe-grafik{background:var(--flaeche);border:1px dashed var(--linie);border-radius:var(--radius);
  padding:.9rem 1.1rem;font-size:.95rem}

/* ---------- Karten und Raster ---------- */
.raster{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  list-style:none;padding:0;margin:0}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schatten)}
.karte img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:0}
.karte-text{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:.35em;font-size:1.1rem}
.karte h3 a{text-decoration:none;color:var(--dunkel)}
.karte h3 a:hover{color:var(--gruen)}
.karte p{margin-bottom:.8em;color:var(--grau);font-size:.97rem}
.karte .datum{font-size:.85rem;color:var(--grau);margin-bottom:.4em;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}
.karte .weiter{margin-top:auto;font-weight:600;text-decoration:none}
.karte .weiter::after{content:" →"}

.zielgruppen{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  list-style:none;padding:0;margin:0}

/* ---------- Knöpfe ---------- */
.btn{display:inline-block;background:var(--gruen);color:#fff;padding:.7em 1.4em;border-radius:999px;
  text-decoration:none;font-weight:600;border:2px solid var(--gruen);transition:background .15s,color .15s}
.btn:hover{background:var(--gruen-hell);border-color:var(--gruen-hell);color:#fff}
.btn--rand{background:transparent;color:var(--gruen)}
.btn--rand:hover{background:var(--gruen);color:#fff}
.hero .btn{background:#fff;color:var(--gruen);border-color:#fff}
.hero .btn:hover{background:transparent;color:#fff}

/* ---------- Video erst nach Klick ---------- */
.video-schutz{position:relative;aspect-ratio:16/9;background:var(--dunkel);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;
  color:#fff;text-align:center;padding:1.5rem;margin:1.75rem 0;cursor:pointer}
.video-schutz p{margin:0;font-size:.95rem;max-width:38ch;color:rgba(255,255,255,.85)}
.video-schutz iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius)}

/* ---------- Aufklapper ---------- */
details{border:1px solid var(--linie);border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:.8rem;
  background:var(--weiss)}
summary{cursor:pointer;font-weight:600;color:var(--dunkel)}

/* ---------- Suche ---------- */
.suchfeld{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.suchfeld input{flex:1 1 260px;padding:.7em .9em;border:1px solid var(--linie);border-radius:8px;
  font:inherit;color:inherit}
.treffer{list-style:none;padding:0;margin:0}
.treffer li{padding:1.1rem 0;border-bottom:1px solid var(--linie)}
.treffer h3{margin-bottom:.2em;font-size:1.08rem}
.treffer mark{background:#fff2b8;padding:0 .1em}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel);color:rgba(255,255,255,.82);margin-top:4rem;padding:3rem 0 1.5rem}
.fuss-raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fuss h2{color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.7em}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.45em}
.fuss a{color:rgba(255,255,255,.82);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-logo{width:190px;margin-bottom:1rem}
.anschrift{font-size:.95rem;line-height:1.55}
.fuss-unten{border-top:1px solid rgba(255,255,255,.15);margin-top:2.5rem;padding-top:1.25rem;
  font-size:.9rem;color:rgba(255,255,255,.6)}
.fuss-unten p{margin:0}

@media print{.kopf,.fuss,.krumen,.springen{display:none}body{color:#000}}

/* Inhaltsraster aus den alten Spaltenreihen */
.raster--inhalt{align-items:start}
.zelle{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.35rem 1.5rem 1.5rem;box-shadow:var(--schatten)}
.zelle>*:first-child{margin-top:0}
.zelle>*:last-child{margin-bottom:0}
.zelle figure{margin:0 0 1rem}
.zelle figure:not(:first-child){margin-top:1.2rem}
.zelle h3{font-size:1.15rem}
.zelle ul{padding-left:1.15em}

/* Newsblog */
.jahr{margin-top:2.75rem;padding-bottom:.4rem;border-bottom:2px solid var(--gruen-blass)}
.jahr:first-of-type{margin-top:0}
.nachbarn{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie);font-size:.95rem}
.nachbarn span{max-width:46%}
.nachbarn a{text-decoration:none;font-weight:600}
.nachbarn a:hover{text-decoration:underline}

/* Quiz */
.quiz-buehne{max-width:760px;margin:0 auto}
.quiz-buehne .container{max-width:none;box-shadow:none;border:1px solid var(--linie);padding:1.75rem}

/* lange Adressen und fremde Einbettungen brechen sonst das Handy-Layout */
.text a,.zelle a,.treffer a{overflow-wrap:anywhere}
main iframe{max-width:100%}

/* ---------- Partnerhinweis evemo ---------- */
.partner-band{background:var(--gruen-blass);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);padding:2.75rem 0}
.partner{display:grid;gap:2rem;grid-template-columns:minmax(160px,220px) 1fr;align-items:start}
.partner-marke{margin:0;font-size:2.6rem;font-weight:700;letter-spacing:-.02em;
  color:var(--gruen);line-height:1;padding:1.4rem 1.2rem;background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--radius);text-align:center;
  box-shadow:var(--schatten)}
.partner-text>*:first-child{margin-top:0}
.partner-text h2{margin-bottom:.6em}
.partner-text p{max-width:62ch}
.partner-knopf{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:0}
.partner-knopf .btn--rand{background:var(--weiss)}
@media (max-width:700px){
  .partner{grid-template-columns:1fr;gap:1.25rem}
  .partner-marke{justify-self:start;padding:.9rem 1.6rem;font-size:2.1rem}
}