/* ==========================================================================
   SHK-Info.de – Basisstile
   Baut auf tokens.css auf. Mobile first, ohne Framework.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--schrift-text);
  font-size: var(--text-base);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  line-height: var(--zeilenhoehe-eng);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

@media (min-width: 48rem) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
}

p { text-wrap: pretty; }

a {
  color: var(--farbe-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--farbe-link-hover); }

/* Sichtbarer Fokus für Tastaturnutzung – nie entfernen */
:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

mark {
  background: var(--farbe-marker);
  color: inherit;
  padding: 0 .15em;
  border-radius: 2px;
}

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--raum-4);
}
@media (min-width: 48rem) {
  .container { padding-inline: var(--raum-8); }
}

.abschnitt { padding-block: var(--raum-16); }
.abschnitt--flaeche { background: var(--farbe-flaeche-alt); }
@media (min-width: 48rem) {
  .abschnitt { padding-block: var(--raum-24); }
}

.lesespalte { max-width: var(--breite-text); }

/* Raster, das von selbst umbricht – keine Breakpoint-Pflege nötig */
.raster {
  display: grid;
  gap: var(--raum-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.stapel > * + * { margin-top: var(--raum-4); }

/* Nur für Screenreader */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprunglink zum Inhalt */
.sprunglink {
  position: absolute; top: var(--raum-2); left: var(--raum-2);
  z-index: 100;
  padding: var(--raum-2) var(--raum-4);
  background: var(--farbe-cta); color: #fff;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.sprunglink:focus { transform: translateY(0); color: #fff; }

/* --- Kopfzeile ------------------------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-6);
  min-height: 4.5rem;
}
.kopf__marke { display: flex; align-items: center; gap: var(--raum-3); flex-shrink: 0; }
.kopf__marke img { width: 44px; height: 44px; }
.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: var(--raum-1); }
}
.nav__link {
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--radius);
  color: var(--farbe-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
}
.nav__link:hover { background: var(--grau-100); color: var(--farbe-text); }
.nav__link[aria-current="page"] {
  color: var(--blau-700);
  box-shadow: inset 0 -2px 0 var(--shk-rot);
}
/* Externe Ziele – optisch abgesetzt, damit klar ist: hier geht es weg */
.nav__link--extern { color: var(--farbe-text-leise); }
.nav__link--extern::after { content: " ↗"; font-size: .85em; }


/* --- Buttons -------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--text-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knopf--haupt { background: var(--farbe-cta); color: #fff; }
.knopf--haupt:hover { background: var(--farbe-cta-hover); color: #fff; }
.knopf--zweit { background: var(--blau-600); color: #fff; }
.knopf--zweit:hover { background: var(--blau-700); color: #fff; }
.knopf--leise { background: #fff; color: var(--farbe-text); border-color: var(--farbe-linie); }
.knopf--leise:hover { background: var(--grau-50); border-color: var(--grau-300); color: var(--farbe-text); }

/* --- Karten --------------------------------------------------------------- */
.karte {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-lg);
  padding: var(--raum-6);
  height: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.karte { text-decoration: none; color: inherit; }
a.karte:hover {
  border-color: var(--blau-300);
  box-shadow: var(--schatten);
  transform: translateY(-2px);
  color: inherit;
}
.karte__titel { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--raum-2); }
.karte__text { color: var(--farbe-text-leise); font-size: var(--text-sm); }
.karte__fuss { margin-top: auto; padding-top: var(--raum-4); }

/* Kategoriekennzeichnung */
.marke {
  display: inline-block;
  padding: var(--raum-1) var(--raum-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--blau-50); color: var(--blau-700);
}
.marke--rot { background: var(--rot-50); color: var(--rot-700); }

/* Überschrift eines Abschnitts */
.abschnittskopf { max-width: 44rem; margin-bottom: var(--raum-12); }
.abschnittskopf__auge {
  display: block;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--shk-rot);
  margin-bottom: var(--raum-3);
}
.abschnittskopf p { color: var(--farbe-text-leise); margin-top: var(--raum-4); font-size: var(--text-lg); }

/* --- Ladezustände und Fehler ---------------------------------------------- */
.platzhalter {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--grau-100) 25%, var(--grau-200) 37%, var(--grau-100) 63%);
  background-size: 400% 100%;
  animation: schimmer 1.4s ease infinite;
  min-height: 11rem;
}
@keyframes schimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.hinweis {
  padding: var(--raum-4) var(--raum-6);
  border-radius: var(--radius);
  border: 1px solid var(--rot-200);
  background: var(--rot-50);
  color: var(--rot-800);
  font-size: var(--text-sm);
}

/* --- Fußzeile ------------------------------------------------------------- */
.fuss {
  background: var(--grau-900);
  color: var(--grau-300);
  padding-block: var(--raum-16) var(--raum-8);
  font-size: var(--text-sm);
}
.fuss a { color: var(--grau-300); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss h3 {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--raum-4);
}
.fuss__raster {
  display: grid; gap: var(--raum-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.fuss__liste { list-style: none; padding: 0; }
.fuss__liste li + li { margin-top: var(--raum-2); }
.fuss__unten {
  margin-top: var(--raum-12); padding-top: var(--raum-6);
  border-top: 1px solid var(--grau-700);
  display: flex; flex-wrap: wrap; gap: var(--raum-4) var(--raum-6);
  justify-content: space-between; align-items: center;
  color: var(--grau-400); font-size: var(--text-xs);
}
.fuss__rechtslinks { display: flex; flex-wrap: wrap; gap: var(--raum-4); list-style: none; padding: 0; }

/* Trenner zwischen eigenen Inhalten und externen Angeboten in der Navigation */
.nav__trenner {
  width: 1px; height: 1.25rem;
  background: var(--farbe-linie);
  margin-inline: var(--raum-2);
}

/* --- Team ----------------------------------------------------------------- */
.team {
  display: grid; gap: var(--raum-8);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  list-style: none; padding: 0;
}
.person { text-align: center; }
.person__bild {
  width: 100%; max-width: 11rem; margin: 0 auto var(--raum-4);
  aspect-ratio: 1; object-fit: cover;
  /* Die Fotos sind bereits kreisförmig freigestellt und haben weiße Ecken –
     ein runder Rahmen schneidet sie sauber weg. */
  border-radius: 50%;
  background: var(--grau-100);
}
.person__name { font-weight: 700; letter-spacing: -0.01em; }
.person__rolle {
  font-size: var(--text-sm); color: var(--farbe-text-leise);
  margin-top: var(--raum-1);
}
/* „Second-Level-Support" soll am Bindestrich nicht auseinanderfallen */
.person__rolle .zusammen { white-space: nowrap; }

/* Offene Stelle statt einer weiteren Person */
.person--offen .person__bild {
  display: grid; place-items: center;
  aspect-ratio: 1; max-width: 11rem; margin: 0 auto var(--raum-4);
  border: 2px dashed var(--grau-300);
  border-radius: 50%;
  color: var(--grau-400); font-size: 2rem;
}

/* --- Mobilmenü ------------------------------------------------------------
   Ohne JavaScript bleibt das Menü ausgeklappt sichtbar. Erst wenn
   navigation.js läuft, setzt es .js-menue und übernimmt die Steuerung.
   ------------------------------------------------------------------------- */
.kopf__menuebutton {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  background: none; border: 1px solid var(--farbe-linie);
  border-radius: var(--radius); cursor: pointer;
  font-size: var(--text-sm); font-weight: 600;
}
.kopf__menuebutton:hover { border-color: var(--grau-300); background: var(--grau-50); }
@media (min-width: 62rem) { .kopf__menuebutton { display: none; } }

/* Drei Striche, die sich beim Öffnen zum Kreuz drehen */
.kopf__menuestrich,
.kopf__menuestrich::before,
.kopf__menuestrich::after {
  display: block; width: 18px; height: 2px;
  background: var(--farbe-text); border-radius: 2px;
  transition: transform .18s, opacity .18s;
}
.kopf__menuestrich { position: relative; }
.kopf__menuestrich::before,
.kopf__menuestrich::after { content: ""; position: absolute; left: 0; }
.kopf__menuestrich::before { top: -6px; }
.kopf__menuestrich::after  { top: 6px; }

[aria-expanded="true"] .kopf__menuestrich { background: transparent; }
[aria-expanded="true"] .kopf__menuestrich::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .kopf__menuestrich::after  { transform: translateY(-6px) rotate(-45deg); }

.mobilmenue {
  border-top: 1px solid var(--farbe-linie);
  background: #fff;
  padding-block: var(--raum-6) var(--raum-8);
}
/* Sobald das Skript läuft, füllt das geöffnete Menü den Rest des Fensters.
   Das Menü steht bewusst AUSSERHALB von .kopf: deren backdrop-filter würde
   sonst zum Bezugsrahmen für position:fixed und das Menü auf Kopfzeilenhöhe
   zusammenstauchen. */
.js-menue .mobilmenue {
  position: fixed; inset: 4.5rem 0 0 0;
  z-index: 45;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: 0;
}
.mobilmenue[hidden] { display: none; }
@media (min-width: 62rem) { .mobilmenue { display: none; } }

.mobilmenue__liste { list-style: none; padding: 0; }
.mobilmenue__liste a {
  display: block;
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--farbe-linie);
  color: var(--farbe-text);
  font-size: var(--text-lg); font-weight: 600;
  text-decoration: none;
}
.mobilmenue__liste a:hover { color: var(--farbe-link); }
.mobilmenue__liste a[aria-current="page"] {
  color: var(--blau-700);
  box-shadow: inset 3px 0 0 var(--shk-rot);
  padding-left: var(--raum-4);
}

.mobilmenue__ueberschrift {
  margin-top: var(--raum-8); margin-bottom: var(--raum-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-text-leise);
}
.mobilmenue__liste--leise a {
  font-size: var(--text-base); font-weight: 500;
  color: var(--farbe-text-leise);
}

/* --- Grundsätze (Philosophie) --------------------------------------------- */
.einstieg { font-size: var(--text-lg); color: var(--farbe-text-leise); }

.grundsaetze {
  display: grid; gap: var(--raum-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--raum-12);
}
.grundsatz { padding-top: var(--raum-5); border-top: 3px solid var(--shk-rot); }
/* Symbol über der Überschrift – Strichzeichnung, ein Markenakzent je Motiv */
.grundsatz__symbol,
.karte__symbol { display: block; margin-bottom: var(--raum-4); }
.grundsatz__symbol { width: 2.5rem; height: 2.5rem; }
.karte__symbol { width: 2.25rem; height: 2.25rem; }
.grundsatz h2 { font-size: var(--text-lg); margin-bottom: var(--raum-3); }
.grundsatz p { font-size: var(--text-sm); color: var(--farbe-text-leise); }

/* --- Teamband: die Gesichter hinter dem Text ------------------------------
   Überlappende Porträts, damit aus „wir" sichtbare Menschen werden.
   ------------------------------------------------------------------------- */
.teamband {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--raum-4); margin-top: var(--raum-6);
}
.teamband__bilder { display: flex; }
.teamband__bilder img {
  /* Sieben Porträts müssen auch auf 375 px nebeneinander passen, ohne
     die Seite breiter zu machen – daher schmal beginnen und mitwachsen. */
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--farbe-flaeche);
  margin-left: -0.6rem; background: var(--grau-100);
}
.teamband__bilder img:first-child { margin-left: 0; }
@media (min-width: 48rem) {
  .teamband__bilder img { width: 3.75rem; height: 3.75rem; margin-left: -0.5rem; }
}
.teamband__text { font-size: var(--text-sm); color: var(--farbe-text-leise); }