/* ====================================================================
   SOKRATeam – Stylesheet

   Die Gestaltung folgt teamfixx.com; Vorbild war deren Seite
   lernen.html. Die Grundzuege:

   - Durchgehend Inter, auch in den Ueberschriften.
   - Abschnittstitel 48 Pixel, Schriftstaerke 800, vollstaendig in
     Rot #990000. Das hervorgehobene Wort steht dagegen im dunklen
     Ton – umgekehrtes Vorzeichen statt Rot in Rot.
   - Weite Flaechen: Container bis 1600 Pixel, 100 Pixel Luft nach
     oben und unten. Lesetexte bleiben schmaler.
   - Kacheln mit 16 Pixel Radius, heller Linie und weichem Schatten,
     die sich beim Zeigen anheben.
   - Abschnitte wechseln zwischen Weiss und #f8f8f8.
   - Ein schwebender Glasbalken als Kopfzeile.
   - Dunkles Neutralgrau #2b2b2b fuer Kachelueberschriften und dunkle
     Abschnitte, Schwarz fuer den Fussbereich.
   ==================================================================== */


/* --------------------------------------------------------------------
   Grundwerte

   teamfixx arbeitet ohne Variablen mit festen Farbwerten. Hier stehen
   sie gesammelt – schon deshalb, weil das Piktogramm der Startseite
   seine Farben ueber Variablen bezieht.
   -------------------------------------------------------------------- */

:root {
  --red: #990000;
  --red-dunkel: #7a0000;
  /* Auf dem dunklen Grund bleibt vom Markenrot kaum Kontrast uebrig.
     Dieser aufgehellte Ton gilt ausschliesslich dort. */
  --red-hell: #ff8a8a;
  --dunkel: #2b2b2b;
  --ink: #333333;
  --grey: #666666;
  --grey-2: #A6A6A6;
  --linie: #e0e0e0;
  --linie-hell: #f0f0f0;
  --paper: #ffffff;
  --paper-2: #f8f8f8;
  --rot-hauch: #fff5f5;

  --schrift: 'Inter', system-ui, -apple-system, sans-serif;

  --kachel-radius: 16px;
  --kachel-schatten: 0 4px 20px rgba(0, 0, 0, 0.05);
  --kachel-schatten-hoch: 0 12px 32px rgba(0, 0, 0, 0.1);
}


/* --------------------------------------------------------------------
   Zuruecksetzen und Grundtypografie
   -------------------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift);
  color: var(--ink);
  background-color: var(--paper);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--schrift); line-height: 1.2; color: var(--dunkel); }

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }

img { max-width: 100%; height: auto; display: block; }

::selection { background-color: var(--red); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 20px; top: -4rem; z-index: 2000;
  background-color: var(--dunkel); color: #fff;
  padding: 10px 20px; border-radius: 8px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 20px; }

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


/* --------------------------------------------------------------------
   Abschnitte

   Die Masse stammen unveraendert von teamfixx: 1600 Pixel Breite,
   100 Pixel Innenabstand oben und unten, 64 seitlich.
   -------------------------------------------------------------------- */

.content-section { width: 100%; background-color: var(--paper); }
.content-section--alt { background-color: var(--paper-2); }

.content-section--dunkel { background-color: var(--dunkel); color: #fff; }
.content-section--dunkel h2, .content-section--dunkel h3 { color: #fff; }
.content-section--dunkel .section-text { color: rgba(255,255,255,0.82); }

.section-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 64px;
}

.section-title {
  font-family: var(--schrift);
  font-size: 48px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 40px;
  line-height: 1.1;
}

/* Die Startseite hebt in jeder Ueberschrift ein Wort hervor. Bei
   teamfixx ist die ganze Zeile rot – ein rotes Wort in einer roten
   Zeile waere unsichtbar. Das hervorgehobene Wort bekommt deshalb den
   dunklen Ton: gleiche Betonung, umgekehrtes Vorzeichen. */
.section-title em,
.hero-headline em { font-style: normal; color: var(--dunkel); }

.content-section--dunkel .section-title { color: #fff; }
.content-section--dunkel .section-title em { color: var(--red-hell); }

.section-text {
  font-family: var(--schrift);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  max-width: 1000px;
}

.eyebrow-zeile {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
  display: block;
}
.content-section--dunkel .eyebrow-zeile { color: var(--grey-2); }


/* --------------------------------------------------------------------
   Kopfzeile: schwebender Glasbalken
   -------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.header-glass-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 24px;
  border-radius: 8px;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(clamp(8px, 1em, 20px));
  backdrop-filter: blur(clamp(8px, 1em, 20px));
  background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -1px 1px rgba(255,255,255,0.1),
    0 8px 32px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* Der Glasbalken lebt davon, dass etwas hindurchscheint. Sobald man
   scrollt, liegt er ueber weissem Grund und verschwindet – dann traegt
   er einen eigenen hellen Grund. */
.header.gescrollt .header-glass-bar {
  background: rgba(255,255,255,0.88);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.05);
}

.logo { display: flex; align-items: center; }
.logo-image { height: 26px; width: auto; }

.nav-menu { display: flex; align-items: center; gap: 28px; }

.nav-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--dunkel);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--red); }
.nav-link[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

.header-contact-btn {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: var(--red);
  padding: 10px 24px;
  border-radius: 999px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(153,0,0,0.25);
  white-space: nowrap;
}
.header-contact-btn:hover { background-color: var(--red-dunkel); transform: translateY(-1px); }

.burger-menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.burger-line {
  display: block;
  width: 24px; height: 2px;
  background-color: var(--dunkel);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-offen .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-offen .burger-line:nth-child(2) { opacity: 0; }
.menu-offen .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* --------------------------------------------------------------------
   Aufmacher

   teamfixx legt hier ein Foto unter zentrierten Text. Die Startseite
   hat kein Aufmacherbild, dafuer ein Diagramm. Der Aufbau folgt
   trotzdem demselben Muster: ruhige Flaeche, Text mittig, darunter
   die Grafik.
   -------------------------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(160deg, #fafafa 0%, #f0eeec 100%);
  padding: 180px 64px 100px;
  overflow: hidden;
}

.hero-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dunkel);
  box-shadow: var(--kachel-schatten);
  margin-bottom: 28px;
}

.hero-headline {
  color: var(--red);
  font-size: 60px;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 24px;
}

.hero-subheadline {
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 36px;
  max-width: 46ch;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 15px;
  color: var(--grey);
}
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background-color: #2e9e4f;
  box-shadow: 0 0 0 4px rgba(46,158,79,0.15);
  flex: none;
}

/* Das Diagramm sitzt bei teamfixx-Kacheln auf dunklem Grund; hier
   bekommt es eine eigene dunkle Kachel, damit die hellen Linien
   tragen. */
.hero-visual {
  background: var(--dunkel);
  border-radius: var(--kachel-radius);
  padding: 40px;
  box-shadow: var(--kachel-schatten-hoch);
}
.hero-diagramm { width: 100%; height: auto; display: block; }
.hero-visual p {
  margin-top: 20px;
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  text-align: center;
}
.hero-visual em { font-style: normal; font-weight: 700; color: #ff8a8a; }


/* --------------------------------------------------------------------
   Schaltflaechen
   -------------------------------------------------------------------- */

.btn-voll {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: var(--red);
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(153,0,0,0.2);
}
.btn-voll:hover { background-color: var(--red-dunkel); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(153,0,0,0.28); }

.btn-linie {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--red);
  background: transparent;
  padding: 14px 28px;
  border: 1px solid rgba(153,0,0,0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-linie:hover { background: var(--rot-hauch); border-color: var(--red); }

.content-section--dunkel .btn-linie { color: #fff; border-color: rgba(255,255,255,0.4); }
.content-section--dunkel .btn-linie:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn-klein { font-size: 14px; padding: 8px 16px; border-radius: 6px; }


/* --------------------------------------------------------------------
   Kacheln
   -------------------------------------------------------------------- */

.karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.karte {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  padding: 32px 28px;
  box-shadow: var(--kachel-schatten);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--kachel-schatten-hoch); }

.karte h3 { font-size: 22px; font-weight: 700; color: var(--dunkel); margin-bottom: 12px; }
.karte p { color: var(--grey); font-size: 16px; }

.karten-marke {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  display: block;
}

.karten-aktion {
  margin-top: auto;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
}
.karten-aktion:hover { color: var(--red-dunkel); }

/* Das Zitat in den Situationskacheln traegt den Abschnitt und steht
   deshalb groesser als der erklaerende Satz darunter. */
.karten-zitat {
  font-size: 20px;
  font-weight: 700;
  color: var(--dunkel);
  line-height: 1.4;
  margin-bottom: 12px;
}

.karten-symbol { height: 20px; width: auto; margin-bottom: 20px; }


/* --------------------------------------------------------------------
   Was Sie gewinnen – vier Kacheln mit Ziffer
   -------------------------------------------------------------------- */

.gewinn-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.gewinn-karte {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--kachel-radius);
  padding: 28px 24px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.gewinn-karte:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); }

.gewinn-ziffer {
  font-size: 32px;
  font-weight: 800;
  color: rgba(255,255,255,0.25);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}
.gewinn-karte h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.gewinn-karte p  { color: rgba(255,255,255,0.75); font-size: 16px; }


/* --------------------------------------------------------------------
   Notruf

   Der Kasten ist teamfixx' pain-point-box: heller Rotton, kraeftige
   rote Kante links. Auf der Startseite traegt er den dringlichsten
   Abschnitt.
   -------------------------------------------------------------------- */

.notruf-box {
  background: var(--rot-hauch);
  border: 2px solid rgba(153,0,0,0.1);
  border-left: 6px solid var(--red);
  border-radius: 12px;
  padding: 32px 36px;
  margin-top: 40px;
  box-shadow: 0 10px 30px rgba(153,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.notruf-box:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(153,0,0,0.12); }

.notruf-marke {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
}
.notruf-box h3 { font-size: 26px; font-weight: 800; color: var(--dunkel); margin-bottom: 12px; }
.notruf-box p  { color: var(--ink); font-size: 17px; }

.notruf-nummer {
  display: inline-block;
  margin-top: 20px;
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
}
.notruf-nummer:hover { color: var(--red-dunkel); }


/* --------------------------------------------------------------------
   sicher scheitern – Haken und Spurgrafik
   -------------------------------------------------------------------- */

.prinzip-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 40px;
}

.haken-liste { list-style: none; margin-top: 28px; }
.haken-liste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 18px;
}
.haken { color: var(--red); font-weight: 800; flex: none; }
.content-section--dunkel .haken { color: var(--red-hell); }
.content-section--dunkel .process-gate { border-left-color: var(--red-hell); }

.process-visual {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--kachel-radius);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.process-tracks { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.track { display: flex; align-items: center; gap: 12px; }
.track-label {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  width: 70px;
  text-align: right;
  flex: none;
}
.track-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.85); }
.track:last-child .track-bar { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 6px, transparent 6px 13px); }

.process-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-left: 24px;
  border-left: 2px dashed var(--red);
  text-align: center;
}
.process-gate span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.process-gate .zeichen { height: 22px; width: auto; }


/* --------------------------------------------------------------------
   So arbeiten wir – nummerierte Zeilen

   Uebernommen von den Qualifikationsstufen aus lernen.html: breite
   Zeilenkacheln mit grosser, heller Ziffer links.
   -------------------------------------------------------------------- */

.schritt-liste { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }

.schritt-zeile {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  transition: all 0.3s ease;
}
.schritt-zeile:hover { border-color: rgba(153,0,0,0.3); box-shadow: var(--kachel-schatten); }

.schritt-ziffer {
  font-size: 44px;
  font-weight: 800;
  color: var(--linie);
  line-height: 1;
  transition: color 0.3s ease;
}
.schritt-zeile:hover .schritt-ziffer { color: var(--red); }

.schritt-marke {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--rot-hauch);
  color: var(--red);
  margin-bottom: 10px;
}
.schritt-zeile h3 { font-size: 22px; font-weight: 700; color: var(--dunkel); margin-bottom: 8px; }
.schritt-zeile p  { color: var(--grey); font-size: 16px; }


/* --------------------------------------------------------------------
   Ueber uns – Kacheln mit Bild, nach dem Muster der Zielgruppenkacheln
   -------------------------------------------------------------------- */

.profil-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.profil-karte {
  background: var(--paper);
  border: 1px solid var(--linie-hell);
  border-radius: var(--kachel-radius);
  overflow: hidden;
  box-shadow: var(--kachel-schatten);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.profil-karte:hover { transform: translateY(-4px); box-shadow: var(--kachel-schatten-hoch); }

.profil-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.profil-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

.profil-inhalt { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.profil-inhalt h3 { font-size: 22px; font-weight: 700; color: var(--dunkel); margin-bottom: 10px; }
.profil-inhalt > p { color: var(--grey); font-size: 16px; }

.profil-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 24px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  background: var(--rot-hauch);
  border: 1px solid rgba(153,0,0,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}
.chip:hover { background: var(--red); color: #fff; border-color: var(--red); }
.chip svg { flex: none; }
.chip-lines { display: flex; flex-direction: column; line-height: 1.3; }
.chip-label { font-weight: 400; font-size: 12px; opacity: 0.8; }


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

.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 40px;
  align-items: start;
}

.kontakt-zeile { margin-bottom: 24px; }
.kontakt-bezeichnung {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-2);
  display: block;
  margin-bottom: 4px;
}
.kontakt-wert { font-size: 22px; font-weight: 600; color: #fff; }
.kontakt-wert:hover { color: #ff8a8a; }

.kontakt-aktionen { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.kontakt-aktionen .btn-voll, .kontakt-aktionen .btn-linie { width: 100%; text-align: center; }
.kontakt-hinweis { font-size: 14px; color: rgba(255,255,255,0.6); }


/* --------------------------------------------------------------------
   Fussbereich – schwarz und zentriert wie bei teamfixx
   -------------------------------------------------------------------- */

.footer { background-color: #000; padding: 60px 64px; text-align: center; }

.footer-brand { font-size: 32px; font-weight: 800; color: var(--red); margin-bottom: 8px; }
.footer-tagline { color: rgba(255,255,255,0.7); margin-bottom: 28px; }

.footer-spruch-reihe {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}
.footer-spruch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.footer-spruch .zeichen { height: 14px; width: auto; }

.footer-gruppe { margin-bottom: 20px; }
.footer-gruppen-titel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}

.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.footer-link { color: rgba(255,255,255,0.7); font-size: 15px; }
.footer-link:hover { color: #fff; }
.footer-divider { color: rgba(255,255,255,0.3); }

.footer-schluss { margin-top: 28px; font-size: 14px; color: rgba(255,255,255,0.45); }


/* --------------------------------------------------------------------
   Das Piktogramm

   Unveraendert von der Startseite uebernommen: Die Form ist ueberall
   dieselbe, unterschieden wird nur ueber die Farbe der drei Zeichen.
   Die Variablen wirken bis in den Schattenbaum von <use>.
   -------------------------------------------------------------------- */

.zeichensatz { position: absolute; width: 0; height: 0; overflow: hidden; }

.zeichen {
  --zeichen-1: var(--red);
  --zeichen-2: var(--grey);
  --zeichen-3: var(--grey-2);
  flex-shrink: 0;
}
.zeichen-still   { --zeichen-1: var(--grey-2); --zeichen-2: var(--grey-2); --zeichen-3: var(--grey-2); }
.zeichen-einzeln { --zeichen-1: var(--red);    --zeichen-2: var(--grey-2); --zeichen-3: var(--grey-2); }
.zeichen-laut    { --zeichen-1: var(--red);    --zeichen-2: var(--red);    --zeichen-3: var(--red); }
.zeichen-hell    { --zeichen-1: var(--red);    --zeichen-2: var(--paper);  --zeichen-3: var(--grey-2); }

.hero-badge .zeichen { height: 14px; width: auto; }

.slogan-word { display: inline-block; min-width: 76px; transition: opacity 0.5s ease; }


/* --------------------------------------------------------------------
   Einblenden beim Scrollen
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
  .reveal.active { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------
   Schmalere Bildschirme
   -------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .prinzip-raster { grid-template-columns: 1fr; gap: 40px; }
  .kontakt-raster { grid-template-columns: 1fr; gap: 40px; }

  /* Der Glasbalken traegt bei teamfixx drei kurze Punkte. Die
     Startseite hat sechs, teils lange – die Klappnavigation muss
     deshalb frueher greifen. */
  .burger-menu { display: flex; }
  .nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 20px; right: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: rgba(255,255,255,0.97);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    display: none;
  }
  .menu-offen .nav-menu { display: flex; }
  .nav-link { padding: 10px 0; border-bottom: 1px solid var(--linie-hell); }
  .nav-link:last-child { border-bottom: 0; }
}

@media (max-width: 768px) {
  .section-container { padding: 64px 20px; }
  .section-title { font-size: 32px; margin-bottom: 24px; }
  .section-text { font-size: 18px; }

  .hero { padding: 140px 20px 64px; }
  .hero-headline { font-size: 36px; }
  .hero-subheadline { font-size: 18px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas a { text-align: center; }

  .karten-raster, .gewinn-raster, .profil-raster { grid-template-columns: 1fr; gap: 20px; }

  .schritt-zeile { grid-template-columns: 1fr; gap: 8px; }
  .schritt-ziffer { font-size: 32px; }

  .process-visual { flex-direction: column; align-items: stretch; }
  .process-gate { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 2px dashed var(--red); }

  .notruf-box { padding: 24px 20px; }
  .footer { padding: 48px 20px; }
}

@media print {
  .header, .hero-ctas, .kontakt-aktionen { display: none; }
  .section-container { padding: 20px 0; }
  .karte, .schritt-zeile { break-inside: avoid; }
}


/* ====================================================================
   UNTERSEITEN

   Impressum, Datenschutz, AGB und Literatur behalten ihren Rumpf
   unveraendert – das schuetzt die Texte und laesst die Suchfunktion
   der Literaturseite weiterlaufen. Ihre Klassen werden hier in der
   Formensprache von teamfixx neu gefasst.
   ==================================================================== */


/* --------------------------------------------------------------------
   Bruecken zu den Klassennamen des Bestands

   Die uebernommenen Rumpfe sprechen .btn, .eyebrow und .text-* an.
   Statt das Markup anzufassen, bekommen die alten Namen hier das neue
   Aussehen.
   -------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 64px;
}

.section { padding-block: 100px; }
.section-alt { background-color: var(--paper-2); }
.section-dark { background-color: var(--dunkel); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }

.eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
}
.section-dark .eyebrow { color: var(--grey-2); }

.text-xs   { font-size: 13px; }
.text-sm   { font-size: 15px; }
.text-lg   { font-size: 20px; }
.text-grey { color: var(--grey); }
.text-red  { color: var(--red); }
.section-dark .text-red { color: var(--red-hell); }
.mt-4 { margin-top: 24px; }
.mt-8 { margin-top: 40px; }

.btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary { color: #fff; background-color: var(--red); box-shadow: 0 4px 12px rgba(153,0,0,0.2); }
.btn-primary:hover { background-color: var(--red-dunkel); transform: translateY(-2px); }
.btn-outline { color: var(--red); background: transparent; border-color: rgba(153,0,0,0.3); }
.btn-outline:hover { background: var(--rot-hauch); border-color: var(--red); }
.section-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }
.section-dark .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* Auf den Unterseiten sitzt die Kopfzeile ueber dem ersten Element.
   Der Glasbalken ist rund 86 Pixel hoch, dazu Luft. */
.legal-header, .lit-intro { padding-top: 180px; }


/* --------------------------------------------------------------------
   Rechtstexte

   Fliesstext will kurze Zeilen. Die 1600 Pixel des Rasters gelten
   deshalb nur fuer den Rahmen, der Text selbst bleibt schmal.
   -------------------------------------------------------------------- */

/* Der Rahmen des Rasters ist 1600 Pixel breit. Ein Lesetext darin
   stuende weit links mit einer grossen Leere rechts. Der Block wird
   deshalb schmaler und mittig gesetzt; der Text selbst bleibt
   linksbuendig und bei rund 900 Pixel Zeilenlaenge. */
.container.legal, .container.legal-header { max-width: 1100px; }

.legal { padding-bottom: 100px; }
.legal > *, .legal-header > * { max-width: 900px; }
.legal-table-wrap, .legal-table { max-width: 100%; }

.legal-header { padding-bottom: 40px; }
.legal-header h1 { font-size: 48px; font-weight: 800; color: var(--red); line-height: 1.1; }
.legal-meta { font-size: 15px; color: var(--grey); margin-top: 8px; }

.legal h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--dunkel);
  margin-top: 48px;
  margin-bottom: 16px;
}
.legal h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--dunkel);
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal p { margin-bottom: 16px; color: var(--ink); }
.legal ul, .legal ol { margin: 0 0 16px 24px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 0.15em; }
.legal a:hover { color: var(--red-dunkel); }
.legal a.btn { text-decoration: none; }

/* Inhaltsverzeichnis: heller Kasten, wie die Zielgruppenkacheln. */
.legal-toc {
  background-color: var(--paper-2);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  padding: 24px 28px;
  margin-bottom: 40px;
}
.legal-toc ol, .legal-toc ul { margin-bottom: 0; }

/* Hervorgehobener Kasten: rote Kante links, wie der Notrufkasten. */
.legal-box {
  background: var(--rot-hauch);
  border: 1px solid rgba(153,0,0,0.15);
  border-left: 6px solid var(--red);
  border-radius: 12px;
  padding: 24px 28px;
  margin-block: 32px;
}
.legal-box p:last-child { margin-bottom: 0; }

.legal-dl {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 8px 24px;
  margin-bottom: 24px;
}
.legal-dl dt { font-weight: 700; color: var(--dunkel); }
.legal-dl dd { margin: 0; }

.legal-table-wrap { overflow-x: auto; margin-block: 24px; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  overflow: hidden;
}
.legal-table th {
  text-align: left;
  font-weight: 700;
  color: var(--dunkel);
  background: var(--paper-2);
  padding: 14px 16px;
  border-bottom: 2px solid var(--linie);
}
.legal-table td { padding: 14px 16px; border-bottom: 1px solid var(--linie-hell); vertical-align: top; }
.legal-table tr:last-child td { border-bottom: 0; }


/* --------------------------------------------------------------------
   Literatur
   -------------------------------------------------------------------- */

.lit-intro { padding-bottom: 48px; }
.lit-intro h1 { font-size: 48px; font-weight: 800; color: var(--red); line-height: 1.1; margin-bottom: 20px; }
.lit-intro p { max-width: 900px; }
.lit-intro p a { color: var(--red); text-decoration: underline; text-underline-offset: 0.15em; }
.lit-intro p a.btn { text-decoration: none; color: inherit; }

/* Die Unterleiste gehoert zum Inhalt, nicht zur Website-Navigation.
   Als Band ueber die volle Fensterbreite sah sie aus, als wuerde die
   schwebende Kopfzeile auf dieser einen Seite ploetzlich ueber den
   ganzen Bildschirm wachsen.

   Sie ist deshalb selbst eine schwebende Leiste: flacher als der Kopf,
   am Inhaltsraster ausgerichtet statt mittig, mit sichtbarem Abstand
   darunter. Damit liest sie sich als Werkzeugleiste der Seite und
   nicht als zweite Menuezeile. Der durchsichtige Rahmen laesst
   Mausklicks daneben durch. */
.lit-subnav {
  position: sticky;
  top: 98px;
  z-index: 50;
  margin-block: 8px 28px;
  background: none;
  border: 0;
  pointer-events: none;
}

.lit-subnav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  /* Der Container traegt sonst 64 Pixel Innenabstand; die Leiste
     stuende dann beidseitig ueber dem Kachelraster. Die Breite wird
     deshalb um genau diesen Abstand verringert, damit ihre Kanten mit
     denen der Kacheln fluchten. */
  max-width: calc(1600px - 2 * 64px);
  padding: 10px 20px;
  pointer-events: auto;
  background-color: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Sprungziele muessen unter der klebenden Kopfzeile freibleiben
   (106 Pixel hoch, dazu Luft). Auf der Literaturseite klebt zusaetzlich
   die Werkzeugleiste, deshalb dort mehr. Das gilt auch fuer Sprunge,
   die ohne Skript ausgeloest werden - etwa beim Aufruf einer Adresse
   mit Raute. */
section[id] { scroll-margin-top: 122px; }
#buecher, #fachartikel { scroll-margin-top: 190px; }
.lit-subnav a { font-size: 15px; font-weight: 600; color: var(--dunkel); }
.lit-subnav a:hover { color: var(--red); }

.lit-search { margin-left: auto; position: relative; }
.lit-search input {
  font-family: var(--schrift);
  font-size: 15px;
  padding: 10px 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  min-width: 260px;
  background: var(--paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lit-search input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(153,0,0,0.1);
}

.lit-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }

.lit-list--raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.lit-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 24px;
  background-color: var(--paper);
  border: 1px solid var(--linie);
  border-radius: var(--kachel-radius);
  padding: 24px 28px;
  box-shadow: var(--kachel-schatten);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lit-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--kachel-schatten-hoch);
  border-color: rgba(153,0,0,0.25);
}
.lit-list--raster .lit-item { grid-template-columns: 1fr; }

.lit-num { font-size: 20px; font-weight: 800; color: var(--linie); line-height: 1.4; }
.lit-item:hover .lit-num { color: var(--red); }

.lit-title { font-size: 20px; font-weight: 700; color: var(--dunkel); margin-bottom: 6px; }
.lit-title a:hover { color: var(--red); }
.lit-authors { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.lit-source { font-size: 15px; color: var(--grey); margin-bottom: 0; }
.lit-sub { font-size: 16px; color: var(--ink); margin-bottom: 12px; }

.lit-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 0; }
.lit-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
  background-color: var(--paper-2);
  border: 1px solid var(--linie-hell);
  padding: 4px 12px;
  border-radius: 999px;
}

.lit-cover { border-radius: 8px; box-shadow: var(--kachel-schatten); }

.lit-note {
  font-size: 15px;
  color: var(--grey);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  max-width: 900px;
}

.lit-empty { color: var(--grey); font-style: italic; margin-top: 40px; }


/* --------------------------------------------------------------------
   Schachbrettmuster im Kachelraster

   Jede zweite Kachel ist leicht hervorgehoben. Bei drei Spalten ergibt
   das ein Schachbrettmuster, weil die Spaltenzahl ungerade ist – die
   Betonung wandert von Zeile zu Zeile um eine Spalte weiter.

   Der Grundschatten der Kachel bleibt erhalten; die rote Innenkante
   kommt davor. Wuerde man box-shadow einfach ueberschreiben, verloere
   die Kachel ihre Tiefe.
   -------------------------------------------------------------------- */

.lit-list--raster .lit-item:nth-child(even) {
  background-color: #fafafa;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 3px 0 0 rgba(153, 0, 0, 0.35), var(--kachel-schatten);
}

/* Auf dem grauen Abschnittsgrund muss der Ton eine Stufe tiefer
   liegen, sonst ist der Unterschied nicht mehr zu sehen. */
.section-alt .lit-list--raster .lit-item:nth-child(even) {
  background-color: #f1f1f1;
}

.lit-list--raster .lit-item:nth-child(even):hover {
  box-shadow: inset 3px 0 0 var(--red), var(--kachel-schatten-hoch);
}

/* Die Marken sitzen sonst farbgleich auf der getoenten Kachel. */
.lit-list--raster .lit-item:nth-child(even) .lit-tag {
  background-color: #ebebeb;
  border-color: #e2e2e2;
}


/* --------------------------------------------------------------------
   Leserichtung des Kachelrasters: von unten nach oben

   Die Kacheln stehen im Dokument aufsteigend (1 zuerst). Angezeigt
   werden sie von unten nach oben: die 1 unten links, die Zaehlung
   laeuft zeilenweise nach oben. Dafuer wird das Raster vertikal
   gespiegelt und jede Kachel einzeln zurueckgespiegelt.

   Der Vorteil gegenueber einer fest umsortierten Liste: die
   Zeilenumkehr gilt bei drei, zwei und einer Spalte gleichermassen,
   ohne dass fuer jede Spaltenzahl eine eigene Reihenfolge noetig
   waere. Eine unvollstaendige Zeile landet dabei automatisch oben,
   die Luecke sitzt rechts.

   Der Einleitungssatz der Seite sagt genau das zu: "chronologisch von
   unten nach oben, der aelteste unten links".
   -------------------------------------------------------------------- */

.lit-list--raster { transform: scaleY(-1); }

.lit-list--raster > .lit-item { transform: scaleY(-1); }

/* Das Anheben beim Ueberfahren muss die Spiegelung mitfuehren, sonst
   ueberschreibt es sie. Im gespiegelten System hebt +4px nach oben an. */
.lit-list--raster > .lit-item:hover { transform: scaleY(-1) translateY(4px); }


@media (max-width: 1100px) {
  .lit-list--raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container { padding-inline: 20px; }
  .section { padding-block: 64px; }

  .legal-header, .lit-intro { padding-top: 140px; }
  .legal-header h1, .lit-intro h1 { font-size: 32px; }
  .legal h2 { font-size: 24px; }

  .legal-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal-dl dd { margin-bottom: 12px; }

  .lit-list--raster { grid-template-columns: 1fr; }
  .lit-item { grid-template-columns: 1fr; gap: 8px; }
  .lit-search { margin-left: 0; width: 100%; }
  .lit-search input { min-width: 0; width: 100%; }
  .lit-subnav-inner { gap: 16px; }
}


/* --------------------------------------------------------------------
   Abschnittsueberschriften der Unterseiten

   Sie folgen derselben Regel wie die Startseite: ganze Zeile rot, das
   hervorgehobene Wort dunkel. Die Rechtstexte sind davon nicht
   betroffen – sie stehen in div.container.legal, nicht in
   section.section, und behalten ihre dunklen Ueberschriften. Ein
   Lesetext liest sich mit dunklen Zwischentiteln besser als mit roten.
   -------------------------------------------------------------------- */

section.section > .container > h2 {
  font-size: 40px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
  margin-bottom: 8px;
}
section.section > .container > h2 em { font-style: normal; color: var(--dunkel); }

section.section-dark > .container > h2 { color: #fff; }
section.section-dark > .container > h2 em { color: var(--red-hell); }

@media (max-width: 768px) {
  section.section > .container > h2 { font-size: 28px; }
}


/* --------------------------------------------------------------------
   Ausgeblendete Eintraege der Literatursuche

   literatur.js setzt das hidden-Attribut. Dessen Standardregel im
   Browser hat nur die Spezifitaet eines Attributselektors und wird von
   .lit-item { display: grid } geschlagen – ohne diese Regel blieben
   ausgefilterte Kacheln sichtbar und behielten ihren Platz im Gitter.
   Uebernommen aus dem Bestands-Stylesheet.
   -------------------------------------------------------------------- */

.lit-item[hidden],
.lit-empty[hidden],
.lit-list--raster .lit-item[hidden] {
  display: none;
}


/* Pfeil nur fuer Ziele auf fremden Servern. Uebernommen aus dem
   Bestands-Stylesheet. */
.lit-title a[target="_blank"]:not([href$=".pdf"])::after {
  content: "\2197";
  font-size: 0.7em;
  color: var(--grey-2);
  margin-left: 0.3em;
  vertical-align: super;
}

/* Lokal vorgehaltene Volltexte werden als PDF ausgewiesen. */
.lit-title a[href$=".pdf"]::after {
  content: "PDF";
  font-family: var(--schrift);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--red);
  background-color: rgba(153, 0, 0, 0.08);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.5em;
  vertical-align: 0.15em;
  white-space: nowrap;
}