/* =========================================================================
   Mitgliederbereich Gesundes Leben Verein

   Eigene Kopie, bewusst getrennt von der oeffentlichen Vereinsseite.
   Zwei Schriften (Montserrat fuer Titel, Barlow fuer Text), drei Farben
   (Schwarz, Blattgruen, Weiss). Grundschrift 18px, Klickziele mindestens
   48px hoch - die Leserschaft ist 50+ und oft am Handy.
   ========================================================================= */

@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat.woff2") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("fonts/Barlow-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("fonts/Barlow-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("fonts/Barlow-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("fonts/Barlow-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --tinte:#141714;
  --tinte-weich:#4b524a;
  --gruen:#55933a;
  --gruen-tief:#47772d;
  --gruen-dunkel:#375d23;
  --gruen-blass:#eff5eb;
  --weiss:#fff;
  --flaeche:#f5f7f3;
  --linie:#e3e8de;
  --rot:#96311f;
  --radius:8px;
  --spalte:56rem;
  --titel:"Montserrat","Segoe UI",-apple-system,sans-serif;
  --text:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font-family:var(--text);
  font-size:18px;
  line-height:1.65;
  color:var(--tinte);
  background:var(--weiss);
}

h1,h2,h3 { font-family:var(--titel); line-height:1.25; margin:0 0 .6em; }
h1 { font-size:1.85rem; }
h2 { font-size:1.35rem; margin-top:2rem; }
h3 { font-size:1.1rem; }
p,ul,ol { margin:0 0 1.1em; }
a { color:var(--gruen-dunkel); }
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid var(--gruen); outline-offset:2px;
}

.huelle { max-width:var(--spalte); margin:0 auto; padding:0 1.25rem; }

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

.kopf { border-bottom:1px solid var(--linie); background:var(--weiss); }
.kopf__innen {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:76px; flex-wrap:wrap;
}
.marke { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.marke img { height:46px; width:auto; }
.marke__zusatz { font-family:var(--titel); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tinte-weich); }
.kopf__nav { display:flex; gap:.35rem; flex-wrap:wrap; }
.kopf__nav a {
  display:inline-flex; align-items:center; min-height:48px; padding:0 .85rem;
  border-radius:var(--radius); text-decoration:none; color:var(--tinte); font-weight:500;
}
.kopf__nav a:hover { background:var(--gruen-blass); }
.kopf__nav a[aria-current="page"] { background:var(--gruen-blass); color:var(--gruen-dunkel); font-weight:600; }

/* ---------- Inhalt -------------------------------------------------------- */

main { padding:2rem 0 4rem; }
.vorspann { font-size:1.1rem; color:var(--tinte-weich); }

.knopf {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 1.4rem;
  background:var(--gruen); color:var(--weiss);
  font-family:var(--titel); font-weight:600; font-size:1rem;
  border:0; border-radius:var(--radius); text-decoration:none; cursor:pointer;
}
.knopf:hover { background:var(--gruen-tief); }
.knopf--leise { background:var(--weiss); color:var(--gruen-dunkel); border:2px solid var(--gruen); }
.knopf--leise:hover { background:var(--gruen-blass); }
.knopf--voll { width:100%; }

.feld { display:block; margin:0 0 1rem; }
.feld span { display:block; font-weight:600; margin-bottom:.35rem; }
.feld input,.feld select,.feld textarea {
  width:100%; min-height:52px; padding:.6rem .8rem;
  font-family:var(--text); font-size:1.05rem;
  border:2px solid var(--linie); border-radius:var(--radius); background:var(--weiss); color:var(--tinte);
}
.feld textarea { min-height:9rem; line-height:1.5; }
.feld input:focus,.feld textarea:focus { border-color:var(--gruen); }

.kasten {
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:1.25rem 1.4rem; margin:0 0 1.5rem;
}
.kasten--warnung { background:#fdf3f1; border-color:#e7cdc7; }
.kasten h2:first-child,.kasten h3:first-child { margin-top:0; }

/* Schritte auf der Startseite */
.schritte { list-style:none; padding:0; counter-reset:schritt; }
.schritte li {
  counter-increment:schritt; position:relative;
  padding:0 0 1.4rem 3.2rem; margin:0;
}
.schritte li::before {
  content:counter(schritt);
  position:absolute; left:0; top:0;
  width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--gruen); color:var(--weiss);
  font-family:var(--titel); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Kachelliste fuer Mittel und Dokumente */
.liste { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
@media (min-width:38rem) { .liste { grid-template-columns:1fr 1fr; } }
.liste a {
  display:flex; align-items:center; min-height:60px;
  padding:.7rem 1rem; gap:.6rem;
  border:1px solid var(--linie); border-radius:var(--radius);
  text-decoration:none; color:var(--tinte); font-weight:500; background:var(--weiss);
}
.liste a:hover { border-color:var(--gruen); background:var(--gruen-blass); }
.liste .zusatz { display:block; font-size:.85rem; color:var(--tinte-weich); font-weight:400; }

.suche { display:flex; gap:.6rem; margin:0 0 1.75rem; flex-wrap:wrap; }
.suche input { flex:1 1 14rem; min-height:52px; padding:.6rem .8rem; font-size:1.05rem;
  border:2px solid var(--linie); border-radius:var(--radius); font-family:var(--text); }

.zurueck { display:inline-block; margin:0 0 1.25rem; font-weight:500; }

table { width:100%; border-collapse:collapse; margin:0 0 1.5rem; }
th,td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--linie); vertical-align:top; }
th { font-family:var(--titel); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinte-weich); }
.tabellenrolle { overflow-x:auto; }

.marke-status { display:inline-block; padding:.15rem .6rem; border-radius:99px; font-size:.85rem; font-weight:600; }
.marke-status--aktiv { background:var(--gruen-blass); color:var(--gruen-dunkel); }
.marke-status--aus { background:#fdf3f1; color:var(--rot); }

.hinweis { color:var(--rot); font-weight:600; }

/* ---------- Fuss ---------------------------------------------------------- */

.fuss { border-top:1px solid var(--linie); background:var(--flaeche); padding:1.75rem 0; margin-top:3rem; font-size:.95rem; color:var(--tinte-weich); }
.fuss a { color:var(--tinte-weich); }

.nur-fuer-screenreader {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}