/* ==========================================================================
   SKEBA GmbH Stylesheet
   ==========================================================================

   AUFBAU DIESER DATEI
   1.  Farben, Schriften, Abstände (die Stellschrauben)
   2.  Grundlagen
   3.  Layout
   4.  Kopfzeile und Navigation
   5.  Schaltflächen
   6.  Aufmacher
   7.  Kacheln und Raster
   8.  Abschnitte mit dunklem Hintergrund
   9.  Referenzen
   10. Formulare
   11. Fußzeile
   12. Hilfsklassen und Animation
   13. Mobil

   WENN DU ETWAS ÄNDERN WILLST
   Farben, Schriftgrößen und Abstände stehen in Abschnitt 1. Ändere sie dort,
   dann zieht die ganze Seite mit. In den übrigen Abschnitten stehen keine
   festen Farbwerte, nur Verweise auf die Variablen.
   ========================================================================== */


/* ==========================================================================
   1. FARBEN, SCHRIFTEN, ABSTÄNDE
   Die vier Akzentfarben stammen aus der Blume im SKEBA Logo und sind für
   guten Textkontrast etwas abgedunkelt.
   ========================================================================== */

:root {
  /* MARKENFARBEN, unverändert aus der originalen Logodatei übernommen.
     Diese vier Werte stecken so in der Vektordatei des Logos. Sie sind für
     Flächen, Kanten und Striche gedacht. */
  --blau:     #5ba0ea;
  --magenta:  #c965bb;
  --gruen:    #6dd65f;
  --orange:   #e9a15c;

  /* Abgedunkelte Varianten derselben Farbtöne.
     Nötig überall dort, wo Text ins Spiel kommt: farbige Schrift auf hellem
     Grund oder weiße Schrift auf farbigem Grund. Die Originalfarben sind
     dafür zu hell, der Text wäre schlecht lesbar. */
  --blau-dunkel:    #2F6FB8;
  --magenta-dunkel: #B03E95;
  --gruen-dunkel:   #4A9440;
  --orange-dunkel:  #D2762F;

  /* Grundfarben */
  --tinte:     #343334;   /* Schriftfarbe, ebenfalls aus dem Logo */
  --tinte-weich: #555454; /* etwas leiser */
  --grau:      #5A5751;   /* Beschreibungstexte */
  --grau-hell: #6B6862;   /* Kleingedrucktes */
  --grund:     #F7F6F3;   /* Seitenhintergrund */
  --flaeche:   #FFFFFF;   /* Kacheln, Kopfzeile */
  --flaeche-warm: #EDEAE3;/* leicht abgesetzte Flächen */
  --linie:     #E4E1DA;   /* Rahmen und Trenner */
  --linie-kraeftig: #C9C5BC;
  --dunkel:    #1E1E1E;   /* dunkle Abschnitte */
  --dunkel-innen: #2A2A29;
  --auf-dunkel: #C6C3BC;  /* Text auf dunkel */

  /* Schriften
     Bewusst nur Schriften, die auf dem Gerät des Besuchers vorhanden sind.
     Es wird keine Schrift von Google oder einem anderen fremden Server
     geladen. Das spart nicht nur Ladezeit, es vermeidet auch die
     Übertragung der IP Adresse an Dritte, für die sonst eine Einwilligung
     nötig wäre. Siehe Anleitung, Abschnitt Schriften. */
  --schrift-titel: 'Segoe UI Semibold', 'Segoe UI', system-ui, -apple-system,
                   'Helvetica Neue', Helvetica, sans-serif;
  --schrift-text:  'Segoe UI', system-ui, -apple-system,
                   'Helvetica Neue', Helvetica, sans-serif;

  /* Abstände */
  --raum-xs: 8px;
  --raum-s:  16px;
  --raum-m:  24px;
  --raum-l:  40px;
  --raum-xl: 72px;
  --raum-xxl: 96px;

  /* Sonstiges */
  --rundung:       12px;
  --rundung-gross: 20px;
  --breite: 1200px;
}


/* ==========================================================================
   2. GRUNDLAGEN
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--tinte);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0;
}

h1 { font-size: 54px; font-weight: 700; }
h2 { font-size: 38px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 18px; font-weight: 600; letter-spacing: 0; }

p { margin: 0; }

a { color: var(--blau-dunkel); text-decoration: none; }
a:hover { color: #245789; text-decoration: underline; }

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

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


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--raum-m);
}

/* Jeder Inhaltsblock bekommt .section. Das sorgt für gleiche Abstände,
   ganz gleich wie viele Blöcke du hinzufügst. */
.section { padding: var(--raum-xxl) 0; }
.section--schmal { padding: var(--raum-xl) 0; }
.section--ohne-oben { padding-top: 0; }

/* Kopfzeile eines Abschnitts: Kicker, Überschrift, Einleitung */
.abschnitt-kopf { max-width: 720px; margin-bottom: var(--raum-l); }
.abschnitt-kopf .lead { margin-top: var(--raum-s); }

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau-hell);
  margin-bottom: var(--raum-s);
}

.lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--tinte-weich);
}


/* ==========================================================================
   4. KOPFZEILE UND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-m);
  min-height: 84px;
}

/* Markenzeichen in der Kopfzeile
   Hier steht die originale Logodatei als Vektor. Sie bleibt auf jedem
   Bildschirm scharf, auch beim Heranzoomen, und ist nur rund 3 KB groß.
   Images/skeba-logo.svg      Symbol und Schriftzug, für die Kopfzeile
   Images/skeba-logo-voll.svg zusätzlich mit dem Band Service nach Maß
   Images/skeba-symbol.svg    nur das Symbol, für Favicon und enge Stellen */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 52px; width: auto; }

/* Menü */
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--raum-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: inline-block;
  padding: 10px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--tinte-weich);
  text-decoration: none;
}

.nav-list a:hover { color: var(--tinte); text-decoration: none; }

/* Aktuelle Seite markieren: class="aktiv" im Menüpunkt setzen */
.nav-list a.aktiv {
  color: var(--tinte);
  font-weight: 600;
  border-bottom: 2px solid var(--blau-dunkel);
}

/* Knopf, der auf dem Handy das Menü aufklappt.
   Auf großen Bildschirmen ausgeblendet, siehe Abschnitt 13. */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--tinte);
  border-radius: 2px;
}


/* ==========================================================================
   5. SCHALTFLÄCHEN
   Varianten: .btn--primaer, .btn--dunkel, .btn--rand
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 10px;
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { text-decoration: none; }

.btn--primaer { background: var(--blau-dunkel); color: #FFFFFF; }
.btn--primaer:hover { background: #245789; color: #FFFFFF; }

.btn--dunkel { background: var(--dunkel); color: #FFFFFF; }
.btn--dunkel:hover { background: #000000; color: #FFFFFF; }

.btn--rand {
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  color: var(--tinte);
}
.btn--rand:hover { border-color: var(--tinte); color: var(--tinte); }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }


/* ==========================================================================
   6. AUFMACHER
   ========================================================================== */

.hero { padding: var(--raum-xl) 0 var(--raum-xxl) 0; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--raum-xl);
  align-items: start;
}

.hero h1 { margin-bottom: var(--raum-m); }
.hero .lead { margin-bottom: var(--raum-l); }

.marke-band {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  margin-bottom: var(--raum-m);
  background: var(--flaeche-warm);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4A4843;
}

.marke-band .punkt {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gruen-dunkel);
}

/* Liste im Aufmacher, rechte Spalte */
.aufgaben {
  padding: var(--raum-m);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung-gross);
}

.aufgaben ul { margin: var(--raum-s) 0 0 0; padding: 0; list-style: none; }
.aufgaben li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linie); }
.aufgaben li:first-child { border-top: none; padding-top: 0; }
.aufgaben .streifen { width: 4px; border-radius: 2px; flex-shrink: 0; }
.aufgaben .titel { font-weight: 600; }
.aufgaben .text { font-size: 15px; color: var(--grau); margin-top: 3px; }


/* ==========================================================================
   7. KACHELN UND RASTER

   NEUE KACHEL HINZUFÜGEN
   Kopiere im HTML einen kompletten <article class="karte"> Block und setze
   eine der Farbklassen: karte--blau, karte--magenta, karte--gruen,
   karte--orange. Das Raster bricht von selbst um, du musst hier nichts
   ändern.
   ========================================================================== */

.raster { display: grid; gap: var(--raum-m); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.karte {
  display: flex;
  flex-direction: column;
  padding: var(--raum-m);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--linie-kraeftig);
  border-radius: var(--rundung);
}

/* Steht in einer Kachel ein Knopf, wird er an den unteren Rand geschoben.
   Dadurch liegen die Knöpfe nebeneinanderstehender Kacheln auf einer Höhe,
   auch wenn die Texte darüber unterschiedlich lang sind. Voraussetzung:
   die Knopfreihe ist das letzte Element in der Kachel.                     */
.karte > .btn-reihe {
  margin-top: auto;
  padding-top: var(--raum-m);
}

.karte h3 { margin-bottom: 10px; }
.karte p { color: var(--grau); }

.karte ul {
  margin: var(--raum-s) 0 0 0;
  padding: 0;
  list-style: none;
}

.karte li {
  position: relative;
  padding-left: 18px;
  margin-top: 8px;
  font-size: 15px;
  color: var(--tinte-weich);
}

.karte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--linie-kraeftig);
}

/* Farbvarianten */
.karte--blau    { border-top-color: var(--blau); }
.karte--magenta { border-top-color: var(--magenta); }
.karte--gruen   { border-top-color: var(--gruen); }
.karte--orange  { border-top-color: var(--orange); }

.karte--blau li::before    { background: var(--blau); }
.karte--magenta li::before { background: var(--magenta); }
.karte--gruen li::before   { background: var(--gruen); }
.karte--orange li::before  { background: var(--orange); }

/* Schlichte Kachel ohne farbige Kante, etwa für Branchen */
.kachel {
  padding: var(--raum-m);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

.kachel .titel { font-size: 17px; font-weight: 600; }
.kachel .text { margin-top: 6px; font-size: 15px; color: var(--grau); }


/* --------------------------------------------------------------------------
   TEAMKACHEL

   NEUES TEAMMITGLIED
   Kopiere im HTML einen kompletten <article class="person"> Block. Das Bild
   ersetzt du durch ein echtes Foto im Ordner assets/img. Empfohlen sind
   quadratische Bilder ab 600 mal 600 Pixel, gespeichert als jpg und unter
   200 KB groß.
   -------------------------------------------------------------------------- */

.person {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  overflow: hidden;
}

.person-bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--flaeche-warm);
  border-bottom: 1px solid var(--linie);
}

.person-text { padding: var(--raum-m); }
.person-name { font-family: var(--schrift-titel); font-size: 20px; font-weight: 600; }
.person-rolle { margin-top: 4px; font-size: 15px; color: var(--blau-dunkel); font-weight: 500; }
.person-text p { margin-top: 10px; color: var(--grau); font-size: 15px; }

.person-kontakt { margin-top: var(--raum-s); font-size: 15px; }




/* --------------------------------------------------------------------------
   KARUSSELL

   Eine Reihe Kacheln, die sich seitlich schieben lässt. Am Handy und am
   Touchpad geht das mit dem Finger beziehungsweise Wischen, am Rechner
   zusätzlich über die beiden runden Knöpfe links und rechts.

   Technisch ist das ein ganz normaler Kasten mit seitlichem Überlauf. Das
   Einrasten übernimmt der Browser selbst über scroll-snap, es braucht keine
   fremde Bibliothek. Fällt JavaScript aus, bleibt das Karussell nutzbar,
   nur die Knöpfe fehlen dann.

   NEUE KACHEL: einfach einen weiteren Block in die Spur legen, sonst nichts.
   -------------------------------------------------------------------------- */

.karussell { position: relative; }

.karussell-spur {
  display: flex;
  gap: var(--raum-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Platz unten für den Fokusrahmen und die Bildlaufleiste */
  padding: 4px 4px 18px 4px;
  margin: -4px -4px 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-kraeftig) transparent;
}

/* Jede Kachel bekommt eine feste Breite und rastet links ein */
.karussell-spur > * {
  flex: 0 0 340px;
  scroll-snap-align: start;
}

.karussell-spur::-webkit-scrollbar { height: 8px; }
.karussell-spur::-webkit-scrollbar-track { background: transparent; }
.karussell-spur::-webkit-scrollbar-thumb {
  background: var(--linie-kraeftig);
  border-radius: 999px;
}

.karussell-knopf {
  position: absolute;
  top: calc(50% - 26px);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(52, 51, 52, 0.12);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.karussell-knopf:hover { transform: scale(1.06); }
.karussell-knopf svg { display: block; }

.karussell-knopf--zurueck { left: -26px; }
.karussell-knopf--vor { right: -26px; }

/* Am Anfang beziehungsweise Ende wird der jeweilige Knopf blass und
   nicht mehr anklickbar. Setzt main.js. */
.karussell-knopf[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.karussell-knopf[disabled]:hover { transform: none; }

/* Hinweis unter dem Karussell */
.karussell-hinweis {
  margin-top: var(--raum-s);
  font-size: 14px;
  color: var(--grau-hell);
}


/* --------------------------------------------------------------------------
   LOGOWAND FÜR REFERENZEN

   Jede Referenz ist eine Kachel mit Logo, Name und Branche. Die Logos sind
   standardmäßig entfärbt und werden beim Überfahren farbig. Das sorgt für
   ein ruhiges Bild, auch wenn die Logos sehr verschieden bunt sind.

   NEUE REFERENZ: einen <li> Block kopieren, Logodatei in assets/img ablegen
   und den Dateinamen eintragen.
   -------------------------------------------------------------------------- */

.logowand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logowand > li { flex: 1 1 260px; display: flex; }

.referenz-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  padding: var(--raum-m);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.referenz-karte:hover {
  text-decoration: none;
  border-color: var(--linie-kraeftig);
  box-shadow: 0 4px 16px rgba(52, 51, 52, 0.08);
}

/* Feste Bühne für jedes Logo. So wirken breite und schmale Logos gleich
   groß, egal welche Datei später dazukommt. object-fit sorgt dafür, dass
   nichts verzerrt wird.                                                      */
.referenz-logo {
  height: 54px;
  width: 100%;
  max-width: 210px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.referenz-karte:hover .referenz-logo { filter: none; opacity: 1; }

.referenz-karte .name {
  font-family: var(--schrift-titel);
  font-size: 18px;
  font-weight: 600;
  color: var(--tinte);
}

.referenz-karte .branche { font-size: 15px; color: var(--grau); }


/* ==========================================================================
   8. DUNKLER ABSCHNITT
   ========================================================================== */

.dunkel-block {
  padding: var(--raum-xl) var(--raum-l);
  background: var(--dunkel);
  border-radius: var(--rundung-gross);
  color: #FFFFFF;
}

.dunkel-block h2, .dunkel-block h3 { color: #FFFFFF; }
.dunkel-block p { color: var(--auf-dunkel); }

.dunkel-block .strich {
  width: 38px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: var(--raum-s);
}

.strich--blau   { background: var(--blau); }
.strich--gruen  { background: var(--gruen); }
.strich--orange { background: var(--orange); }
.strich--magenta{ background: var(--magenta); }


/* ==========================================================================
   9. REFERENZEN
   Weitere Referenz: einen <li class="referenz"> Block kopieren.
   ========================================================================== */

.referenzen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.referenz {
  flex: 1 1 280px;
  padding: var(--raum-m);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

.referenz .name {
  font-family: var(--schrift-titel);
  font-size: 19px;
  font-weight: 600;
}

.referenz .branche { margin-top: 5px; font-size: 15px; color: var(--grau); }


/* ==========================================================================
   10. FORMULARE
   ========================================================================== */

.formular {
  max-width: 640px;
  padding: var(--raum-l);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung-gross);
}

.feld { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--raum-s); }

.feld label { font-size: 15px; font-weight: 600; color: #3A3A38; }

.feld input, .feld textarea {
  padding: 13px 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 9px;
  font-family: var(--schrift-text);
  font-size: 16px;
  color: var(--tinte);
}

.feld textarea { resize: vertical; min-height: 130px; }

.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--blau-dunkel);
  box-shadow: 0 0 0 3px rgba(47, 111, 184, 0.18);
}

.hinweis { margin-top: var(--raum-s); font-size: 14px; color: var(--grau-hell); }

/* Sternchen an Pflichtfeldern. Der Stern ist im Formular mit aria-hidden
   versehen, weil das Attribut required die Pflicht schon an Vorleseprogramme
   meldet. Sonst würde bei jedem Feld zweimal Pflichtfeld gesagt.            */
.pflicht { color: var(--magenta-dunkel); font-weight: 600; }

/* Rückmeldung unter dem Sendeknopf. Steht im HTML leer da und wird von
   main.js gefüllt. Ohne JavaScript bleibt die Zeile unsichtbar, dann greift
   das action Attribut des Formulars.                                        */
.formular-status {
  margin-top: var(--raum-s);
  font-size: 14px;
  color: var(--grau);
}

/* Häufige Fragen. Auf- und zuklappen macht der Browser selbst über die
   Elemente details und summary, dafür braucht es kein JavaScript.          */
.fragen { border-top: 1px solid var(--linie); }

.frage {
  border-bottom: 1px solid var(--linie);
}

.frage summary {
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--schrift-titel);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinte);
  cursor: pointer;
  list-style: none;
}

.frage summary::-webkit-details-marker { display: none; }

/* Das Pluszeichen rechts, das beim Aufklappen zum Minus wird */
.frage summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 2px;
  margin-top: -1px;
  background: var(--blau-dunkel);
  box-shadow: 0 0 0 0 transparent;
}

.frage summary::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 2px;
  height: 13px;
  margin-top: -7px;
  background: var(--blau-dunkel);
  transition: opacity 0.2s ease;
}

.frage[open] summary::before { opacity: 0; }

.frage summary:hover { color: var(--blau-dunkel); }

.frage summary:focus-visible {
  outline: 2px solid var(--blau-dunkel);
  outline-offset: 3px;
  border-radius: 4px;
}

.frage p {
  margin: 0 0 20px 0;
  padding-right: 40px;
  color: var(--grau);
}

.formular-status.ist-aktiv {
  padding: 12px 14px;
  background: var(--flaeche-warm);
  border-left: 3px solid var(--gruen);
  border-radius: 6px;
  color: var(--tinte-weich);
}

/* Kontaktangaben neben dem Formular */
.kontakt-liste { display: flex; flex-direction: column; gap: var(--raum-m); }
.kontakt-liste .bezeichnung {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grau-hell);
}
.kontakt-liste .wert { margin-top: 5px; font-size: 17px; color: var(--tinte-weich); }
.kontakt-liste .wert.gross {
  font-family: var(--schrift-titel);
  font-size: 26px;
  font-weight: 600;
  color: var(--tinte);
}


/* ==========================================================================
   11. FUSSZEILE
   ========================================================================== */

.site-footer {
  margin-top: var(--raum-xxl);
  padding: var(--raum-l) 0 var(--raum-m) 0;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--raum-l);
}

.footer-grid h4 { margin-bottom: 10px; }
.footer-grid p { font-size: 15px; color: var(--grau); }

/* Die Anschrift steht in einem address Element. Browser schreiben das von
   Haus aus kursiv, das wird hier zurückgesetzt.                            */
.footer-adresse {
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  color: var(--grau);
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { font-size: 15px; color: var(--tinte-weich); }

.footer-bottom {
  margin-top: var(--raum-l);
  padding-top: var(--raum-s);
  border-top: 1px solid var(--linie);
  color: var(--grau-hell);
  font-size: 14px;
}


/* ==========================================================================
   12. HILFSKLASSEN UND ANIMATION
   ========================================================================== */

.mittig { text-align: center; }
.abstand-oben { margin-top: var(--raum-l); }

/* Aufzählung im Fließtext, etwa in der Datenschutzerklärung */
.liste { margin: 0; padding-left: 22px; }
.liste li { margin-top: 9px; color: var(--tinte-weich); }
.liste li::marker { color: var(--linie-kraeftig); }

/* Rechtstexte lesen sich besser in schmaler Spalte, dafür sorgt das
   style Attribut max-width am umgebenden div in den Rechtsseiten. */
h2 + p, h2 + ul { margin-top: var(--raum-s); }

/* Einblenden beim Scrollen. Wird von main.js gesteuert.
   Wer keine Animation möchte, entfernt einfach die Klasse reveal im HTML. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   13. MOBIL
   ========================================================================== */

@media (max-width: 900px) {
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  body { font-size: 16px; }
  .lead { font-size: 18px; }

  .section { padding: var(--raum-xl) 0; }

  .hero-inner { grid-template-columns: 1fr; gap: var(--raum-l); }

  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--raum-m); }

  .dunkel-block { padding: var(--raum-l) var(--raum-m); }

  /* Navigation klappt auf */
  .nav-toggle { display: block; }

  .nav-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--raum-xs) var(--raum-m) var(--raum-m) var(--raum-m);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
  }

  .nav-list.show { display: flex; }

  .nav-list a {
    padding: 14px 0;
    border-bottom: 1px solid var(--linie);
    font-size: 17px;
  }

  .nav-list a.aktiv { border-bottom: 2px solid var(--blau-dunkel); }

  .site-header { position: relative; }
  .header-inner { position: relative; }
  .brand img { height: 46px; }

  .btn { width: 100%; }
  .btn-reihe { flex-direction: column; }

  /* Karussell: am Handy wird gewischt, die Knöpfe entfallen */
  .karussell-knopf { display: none; }
  .karussell-spur > * { flex-basis: 86%; }

  /* Logowand: zwei nebeneinander wären zu eng */
  .logowand > li { flex-basis: 100%; }
}