/* =========================================================================
   Design „Klartext" — modern, reduziert, schweizerisch
   Fast schwarz auf weiß, eine Signalfarbe, keine Rundungen, große Typografie.
   ========================================================================= */

:root {
  --tinte:        #111315;
  --tinte-hell:   #6b7075;
  --tief:         #111315;
  --navy:         #111315;
  --akzent:       #0f6e4f;   /* tiefes Grün */
  --akzent-dunkel:#0a5239;
  --mint:         #4fcf9a;
  --hauch:        #f4f4f2;
  --hauch-2:      #e8e8e5;
  --rand:         #dcdcd8;
  --weiss:        #ffffff;

  --breite:       1220px;
  --radius:       0px;
  --radius-knopf: 0px;
  --schatten:     none;

  /* system-ui und Segoe UI bringen echte Zwischenstufen mit.
     Helvetica und Arial kennen nur 400 und 700 - dort wirkte 700 zu schwer. */
  --schrift: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: var(--schrift);

  --titel-gewicht: 600;
  --titel-abstand: -.026em;
  --marke-schrift: var(--schrift);
  --marke-abstand: -.02em;
  --mikro-transform: uppercase;
  --mikro-abstand: .12em;
  --kachel-rand: 1px solid var(--rand);
  --held-schleier: linear-gradient(180deg, rgba(17,19,21,.52) 0%, rgba(17,19,21,.86) 100%);
}

body { font-size: 1.0625rem; }

/* Kein künstliches Fetten, wo eine Schrift den Schnitt nicht mitbringt -
   das erzeugt sonst genau die klobige Wirkung, die hier vermieden werden soll. */
h1, h2, h3, h4, .kopf__wort, .knopf { font-synthesis-weight: none; }

h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); line-height: 1.06; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); line-height: 1.14; }
h3 { font-weight: 600; letter-spacing: -.015em; }

.kopf { background: #fff; border-bottom: 1px solid var(--tinte); backdrop-filter: none; }
.kopf__wort { font-weight: 650; }
.menue a { border-radius: 0; font-weight: 500; }
.menue a:hover, .menue a[aria-current="page"] { background: var(--tinte); color: #fff; }

.held__innen { padding-block: 8rem 6rem; max-width: 46rem; }
.held__zusatz { text-transform: uppercase; letter-spacing: .08em; font-size: .9rem;
                font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.45); }

.knopf { border-width: 1px; font-weight: 550; letter-spacing: .01em; }
.knopf--voll { background: var(--akzent); border-color: var(--akzent); }
.knopf--voll:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf--tief { background: var(--tinte); border-color: var(--tinte); }
.knopf--tief:hover { background: var(--akzent); border-color: var(--akzent); }

/* Kacheln als reines Raster, ohne Karte */
.kachel { padding: 1.8rem 1.6rem; transition: background .15s; }
.kachel:hover { background: var(--hauch); border-color: var(--tinte); transform: none;
                box-shadow: none; }
.kachel h3 { font-size: 1.18rem; font-weight: 600; }
.kachel__pfeil { color: var(--akzent); text-transform: uppercase;
                 letter-spacing: .1em; font-size: .78rem; }

.gitter { gap: 1px; background: var(--rand); }
.gitter--3 .kachel, .gitter--2 .kachel { border: 0; }
.gitter--2[style] { gap: 3rem; background: transparent; }

.haken { border-radius: 0; background: var(--akzent); color: #fff; }

.marke { border-radius: 0; background: var(--hauch-2); }
.marke:hover { background: var(--tinte); }

.beitrag-karte { border-bottom: 1px solid var(--tinte); }
.beitrag-meta { font-size: .74rem; font-weight: 500; }

.feld input, .feld textarea { border-radius: 0; border-color: var(--tinte); }
.kartenlink { border-radius: 0; border-color: var(--tinte); }
.sprachknopf { border-color: var(--tinte); font-weight: 500; }
.sprachknopf:hover { background: var(--tinte); color: #fff; border-color: var(--tinte); }

a { text-decoration-color: rgba(15,110,79,.5); }
a:hover { color: var(--akzent); }
:focus-visible { outline-color: var(--akzent); }

.rechtshinweis { border-radius: 0; border-left-color: var(--akzent); }
.fuss { background: var(--tinte); }
.fuss h2, .fuss h3 { letter-spacing: .14em; font-size: .78rem; }
.fuss a:hover { color: var(--mint); }

/* Am Handy ist das Kopfbild höher und die Schrift liegt mitten im Motiv.
   Der Schleier wird dort dichter, damit die Überschrift sicher trägt. */
@media (max-width: 900px) {
  :root { --held-schleier: linear-gradient(180deg, rgba(17,19,21,.62) 0%, rgba(17,19,21,.9) 100%); }
}