/* ============================================================
   Hoffmann Webdesign - Stylesheet
   ------------------------------------------------------------
   Aufbau dieser Datei (mit Strg+F springen):

     1.  Schriften einbinden (self-hosted)
     2.  Farben & Design-Variablen
     3.  Grundeinstellungen / Reset
     4.  Layout-Bausteine (Container, Abschnitte)
     5.  Logo (Wortmarke)
     6.  Kopfzeile & Navigation
     7.  Buttons
     8.  Hero
     9.  Problem / Nutzen
     10. Leistungen
     11. Ablauf
     12. Ueber mich
     13. Kontakt & Formular
     14. Fusszeile
     15. Rechtsseiten (Impressum / Datenschutz)
     16. Barrierefreiheit (Fokus, Skip-Link, Motion)
     17. Dunkles Design (Dark Mode)
     18. Druckansicht

   Farbwerte werden NICHT direkt im Code verstreut, sondern
   einmal oben unter "2. Farben" definiert. Wenn du eine Farbe
   aendern willst, aenderst du sie dort - und sie aendert sich
   ueberall auf der Seite.
   ============================================================ */


/* ============================================================
   1. SCHRIFTEN
   ------------------------------------------------------------
   Die Schrift "Inter" liegt als Datei im Ordner /fonts/.
   Sie wird NICHT von Google geladen - das ist Absicht:
   Google Fonts per CDN uebertraegt die IP-Adresse deiner
   Besucher an Google. Das war 2022 Gegenstand eines Urteils
   (LG Muenchen, 3 O 17493/20) und ist ein bekannter
   Abmahngrund. Lokal eingebunden gibt es das Problem nicht.

   font-display: swap -> Text ist sofort lesbar, auch waehrend
   die Schriftdatei noch laedt.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;                       /* Normal - Fliesstext */
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;                       /* Halbfett - Zwischenueberschriften */
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;                       /* Fett - Ueberschriften, Logo */
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}


/* ============================================================
   2. FARBEN & DESIGN-VARIABLEN
   ------------------------------------------------------------
   Alle Farben deiner Marke an einem Ort.
   Die Kontraste sind gegen WCAG 2.1 AA geprueft (mind. 4.5:1
   fuer normalen Text) - siehe Kommentare.
   ============================================================ */

:root {

  /* --- Markenfarben (deine Vorgabe) --------------------- */
  --marke-navy:    #1D3A5F;   /* Primaer */
  --marke-schiefer:#64798C;   /* Sekundaer */
  --marke-akzent:  #2E7BB0;   /* Akzent */
  --marke-hell:    #EEF2F6;   /* Heller Hintergrund */
  --marke-text:    #16232E;   /* Dunkler Text */

  /* --- Abgeleitete Farben fuer guten Kontrast ------------ */
  /* Schiefergrau auf hellgrauem Grund erreicht nur 4.0:1 und
     faellt damit knapp durch die AA-Pruefung. Fuer Fliesstext
     nutzen wir deshalb einen leicht abgedunkelten Ton (5.4:1). */
  --marke-schiefer-dunkel: #4E637A;
  /* Gleiches Prinzip fuer den Akzent, wenn er als Text dient. */
  --marke-akzent-dunkel:   #26658F;
  /* Fuer Flaechen mit weisser Schrift darauf (Buttons, Ablauf-
     Nummern). Reines #2E7BB0 kaeme nur auf 4.6:1 und liegt damit
     hart an der Grenze - dieser Ton schafft 5.2:1. */
  --marke-akzent-flaeche:  #2A72A4;

  /* --- Semantische Rollen ------------------------------- */
  /* Diese Namen sagen, WOFUER eine Farbe da ist. Im restlichen
     Stylesheet werden nur noch diese verwendet. Dadurch laesst
     sich weiter unten der Dark Mode mit wenigen Zeilen bauen. */
  --c-seite:        #FFFFFF;                    /* Seitenhintergrund */
  --c-flaeche-alt:  #F4F8FC;                    /* abgesetzte Abschnitte, sehr hell */
  --c-flaeche-zart: #FAFCFE;                    /* noch zarter, fuer den Hero */
  --c-karte:        #FFFFFF;                    /* Karten / Formular */
  --c-text:         var(--marke-text);          /* Fliesstext (11.9:1) */
  --c-text-leise:   var(--marke-schiefer-dunkel);/* Nebentext  (5.4:1) */
  --c-ueberschrift: var(--marke-navy);          /* Ueberschriften (11.6:1) */
  --c-akzent:       var(--marke-akzent);        /* Linien, Raender, Deko */
  --c-akzent-text:  var(--marke-akzent-dunkel); /* Akzent als Text (5.6:1) */
  --c-akzent-flaeche: var(--marke-akzent-flaeche); /* Flaeche mit weisser Schrift (5.2:1) */
  --c-linie:        #D3DCE6;                    /* Trennlinien */
  --c-linie-stark:  #B9C7D4;                    /* Formularrahmen */
  --c-dunkel:       var(--marke-navy);          /* dunkle Flaechen */
  --c-auf-dunkel:   #FFFFFF;                    /* Text auf dunkel (11.6:1) */
  --c-auf-dunkel-leise: #C3D3E4;                /* Nebentext auf dunkel (7.4:1) */

  /* --- Abstaende ----------------------------------------
     Ein festes Raster wirkt ruhiger als frei gewaehlte Werte. */
  --abstand-xs:  0.5rem;
  --abstand-s:   1rem;
  --abstand-m:   1.75rem;
  --abstand-l:   3rem;
  --abstand-xl:  4.5rem;
  --abstand-xxl: 6.5rem;

  /* --- Sprungnavigation ---------------------------------
     Innenabstand eines Abschnitts als eigene Variable. Die
     Sprungnavigation weiter unten muss damit rechnen koennen,
     sonst entsteht beim Klick auf einen Menuepunkt genau
     dieser Abstand als Leerraum unter der Kopfzeile. */
  --abschnitt-padding: var(--abstand-xl);

  /* Hoehe der festen Kopfzeile (siehe .kopf__inner). */
  --kopf-hoehe: 4.5rem;

  /* So viel Luft soll nach einem Klick auf einen Menuepunkt
     zwischen Kopfzeile und Abschnitts-Inhalt bleiben. */
  --sprung-abstand: 10px;

  /* --- Layout -------------------------------------------- */
  --breite-max:    72rem;   /* ca. 1150 px - Inhaltsbreite */
  --breite-text:   38rem;   /* ca.  610 px - angenehme Lesebreite */
  --rand:          1.25rem; /* Seitenabstand auf dem Handy */

  /* --- Rundungen -------------------------------------------
     Grosszuegig gerundet: wirkt freundlicher und heller als
     die vorherige, sehr sachliche Kantigkeit. */
  --radius:        16px;    /* Karten, Bilder, groessere Flaechen */
  --radius-klein:  10px;    /* Eingabefelder, Icon-Badges, Chips */
  --radius-pille:  999px;   /* Buttons - vollstaendig rund */

  /* --- Schatten ----------------------------------------------
     Weiche, leicht bläulich getönte Schatten statt hartem Grau.
     Zwei Stufen: normal fuer Karten, gross fuer schwebende
     Elemente (z. B. die Karte im Hero-Bild). */
  --schatten:       0 1px 2px rgba(29, 58, 95, 0.05),
                     0 14px 28px -16px rgba(29, 58, 95, 0.20);
  --schatten-gross: 0 26px 56px -20px rgba(29, 58, 95, 0.30);

  /* --- Schriftfamilie ------------------------------------
     Falls Inter nicht laedt, greifen die System-Schriften. */
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ============================================================
   3. GRUNDEINSTELLUNGEN / RESET
   ============================================================ */

/* box-sizing: border-box heisst - Innenabstand und Rahmen
   zaehlen zur angegebenen Breite dazu. Ohne das rechnet man
   sich bei jedem Layout dumm und daemlich. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Sanftes Scrollen bei Klick auf die Sprungnavigation. */
  scroll-behavior: smooth;
  /* Damit Abschnitte beim Springen nicht unter der festen
     Kopfzeile verschwinden. Der Wert entspricht exakt der
     Kopfzeilenhoehe; den Rest der Feinjustierung uebernimmt
     das scroll-margin-top bei ".abschnitt[id]". */
  scroll-padding-top: var(--kopf-hoehe);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;      /* 17px - bewusst etwas groesser als ueblich,
                                weil viele Kunden aeltere Augen haben */
  line-height: 1.7;          /* luftig = leichter zu lesen */
  color: var(--c-text);
  background-color: var(--c-seite);
  -webkit-font-smoothing: antialiased;
}

/* --- Ueberschriften ---------------------------------------
   clamp(min, wunsch, max) skaliert die Groesse stufenlos mit
   der Fensterbreite - ohne dass man Media Queries braucht. */
h1, h2, h3 {
  color: var(--c-ueberschrift);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;   /* grosse Schrift wirkt sonst zu locker */
  margin: 0 0 var(--abstand-s);
  text-wrap: balance;         /* verhindert einzelne Worte in letzter Zeile */
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem); }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: 0; }

p {
  margin: 0 0 var(--abstand-s);
  max-width: var(--breite-text);
}

a {
  color: var(--c-akzent-text);
  text-underline-offset: 0.2em;   /* Unterstrich nicht direkt am Text */
}

a:hover {
  color: var(--c-ueberschrift);
}

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

ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: var(--abstand-xs);
}


/* ============================================================
   4. LAYOUT-BAUSTEINE
   ============================================================ */

/* Zentriert Inhalte und haelt sie vom Bildschirmrand weg. */
.container {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Standard-Abstand oben/unten fuer jeden Abschnitt. */
.abschnitt {
  padding-block: var(--abschnitt-padding);
}

@media (min-width: 48rem) {          /* ab ca. 768px = Tablet */
  :root { --abschnitt-padding: var(--abstand-xxl); }
}

/* --- Sprungziele richtig anfahren -------------------------
   Die Sprungmarken (id="warum" usw.) sitzen NICHT auf der
   Sektion selbst, sondern direkt auf dem "abschnitt-kopf" -
   also auf dem ersten sichtbaren Text (Label + Ueberschrift).
   So bestimmt der Browser die Sprungposition anhand von genau
   dem, was der Nutzer als Erstes lesen soll - unabhaengig vom
   Innenabstand der Sektion. Kein Rechnen mit Polstern mehr
   noetig, und kein Risiko, dass der vorherige Abschnitt mit
   seiner Hintergrundfarbe oben ins Bild ragt. */
.abschnitt-kopf[id] {
  scroll-margin-top: var(--sprung-abstand);
}

/* Abschnitt mit hellgrauem Hintergrund - sorgt fuer Rhythmus,
   damit die Seite nicht wie ein langes weisses Blatt wirkt. */
.abschnitt--alt {
  background-color: var(--c-flaeche-alt);
}

/* --- Abschnitts-Kopf --------------------------------------
   Kleines Label ("Leistungen") ueber der grossen Ueberschrift.
   Das ist das wiederkehrende Gestaltungsmerkmal der Seite. */
.abschnitt-kopf {
  max-width: var(--breite-text);
  margin-bottom: var(--abstand-l);
}

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-akzent-text);
  margin-bottom: var(--abstand-xs);
}

/* Kurzer Akzentstrich unter der Ueberschrift. */
.abschnitt-kopf h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background-color: var(--c-akzent);
  margin-top: var(--abstand-s);
}

/* Einleitungstext eines Abschnitts - etwas groesser. */
.vorspann {
  font-size: 1.125rem;
  color: var(--c-text-leise);
  margin-top: var(--abstand-s);
}


/* ============================================================
   5. LOGO (WORTMARKE)
   ------------------------------------------------------------
   "Hoffmann" gross und fett, darunter "WEBDESIGN" klein und
   weit gesperrt. Kein Symbol - die Typografie traegt die Marke.
   ============================================================ */

.logo {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}

/* --- Variante mit Bildmarke (Kopfzeile) -------------------
   Das "H mit Cursor-Strich" links, die Wortmarke rechts
   daneben. Die zwei Zeilen (Hoffmann / WEBDESIGN) bleiben
   gestapelt und ruecken als Ganzes nach rechts. */
.logo--mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.logo__mark {
  display: inline-flex;
  flex: none;
}

.logo__mark svg {
  display: block;
  width: 38px;
  height: 38px;
}

.logo--mark .logo__text {
  display: flex;
  flex-direction: column;
}

@media (min-width: 48rem) {
  .logo__mark svg { width: 42px; height: 42px; }
}

.logo__name {
  display: block;
  font-size: 1.375rem;          /* 22px */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--marke-navy);
}

.logo__sub {
  display: block;
  font-size: 0.59375rem;        /* ca. 43% von 22px - deine Vorgabe: 40-45% */
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marke-schiefer);
  margin-top: 0.28em;
}

@media (min-width: 48rem) {
  .logo__name { font-size: 1.625rem; }      /* 26px */
  .logo__sub  { font-size: 0.703125rem; }   /* ca. 43% von 26px */
}

/* Variante fuer dunkle Flaechen (Fusszeile). */
.logo--hell .logo__name { color: var(--c-auf-dunkel); }
.logo--hell .logo__sub  { color: var(--c-auf-dunkel-leise); }


/* ============================================================
   6. KOPFZEILE & NAVIGATION
   ============================================================ */

.kopf {
  position: sticky;            /* bleibt beim Scrollen oben kleben */
  top: 0;
  z-index: 100;
  /* Dunkelblaue Kopfzeile - kraeftiger Rahmen fuer die helle
     Seite darunter. Nutzt --c-dunkel, damit sie sich im
     Dunkelmodus automatisch mit abdunkelt. */
  background-color: var(--c-dunkel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
              0 6px 20px -12px rgba(0, 0, 0, 0.5);
}

/* Logo und Bedienelemente in der Kopfzeile hell, damit sie
   auf dem dunklen Grund lesbar sind. */
.kopf .logo__name { color: #FFFFFF; }
.kopf .logo__sub  { color: var(--c-auf-dunkel-leise); }

.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  /* Muss zu --kopf-hoehe passen, damit die Sprungnavigation
     exakt unter der Kopfzeile landet. */
  min-height: var(--kopf-hoehe);
}

/* --- Menue-Knopf (nur auf dem Handy sichtbar) -------------- */
.menue-knopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Heller Knopf auf dem dunklen Header. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-klein);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  /* Mindestens 44px hoch - Empfehlung fuer gut treffbare
     Bedienelemente auf dem Touchscreen (WCAG 2.5.5). */
  min-height: 44px;
}

.menue-knopf:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

/* Die drei Striche des Hamburger-Symbols. */
.menue-knopf__icon {
  position: relative;
  width: 18px;
  height: 2px;
  background-color: currentColor;
}

.menue-knopf__icon::before,
.menue-knopf__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background-color: currentColor;
}

.menue-knopf__icon::before { top: -6px; }
.menue-knopf__icon::after  { top:  6px; }

/* --- Navigation ------------------------------------------- */
/* Mobil: zugeklappt. Das JavaScript setzt data-offen="true",
   um sie aufzuklappen. Ist JavaScript aus, sorgt die Regel
   ganz unten dafuer, dass das Menue trotzdem sichtbar ist. */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--c-seite);
  border-bottom: 1px solid var(--c-linie);
  box-shadow: 0 12px 24px rgba(29, 58, 95, 0.08);
}

.nav[data-offen="true"] {
  display: block;
}

.nav__liste {
  list-style: none;
  margin: 0;
  padding: var(--abstand-s) var(--rand) var(--abstand-m);
  max-width: var(--breite-max);
  margin-inline: auto;
}

.nav__liste li {
  margin: 0;
  border-bottom: 1px solid var(--c-linie);
}

.nav__liste li:last-child {
  border-bottom: none;
}

.nav__link {
  display: block;
  padding: 0.85rem 0;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
}

.nav__link:hover {
  color: var(--c-akzent-text);
}

/* Ab Tablet: Menue immer sichtbar, Knopf verschwindet. */
@media (min-width: 62rem) {                /* ca. 992px */

  .menue-knopf { display: none; }

  .nav {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
  }

  .nav__liste {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    padding: 0;
  }

  .nav__liste li { border: none; }

  .nav__link {
    padding: 0.4rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    position: relative;
    /* Auf dem dunklen Header hell. */
    color: var(--c-auf-dunkel);
  }

  .nav__link:hover {
    color: #FFFFFF;
  }

  /* Feiner Unterstrich beim Ueberfahren - ruhiger als eine
     Farbflaeche und passt zum sachlichen Gesamtbild. */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--c-akzent);
    transform: scaleX(0);
    transition: transform 0.18s ease;
  }

  .nav__link:hover::after,
  .nav__link:focus-visible::after {
    transform: scaleX(1);
  }

  /* Der Kontakt-Link im Menue wird zum Pillen-Knopf. */
  .nav__link--cta {
    background-color: var(--c-akzent-flaeche);
    color: #FFFFFF;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pille);
    font-weight: 600;
  }

  .nav__link--cta:hover {
    background-color: var(--c-akzent-text);
    color: var(--c-auf-dunkel);
  }

  .nav__link--cta::after { display: none; }
}


/* ============================================================
   7. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  min-height: 48px;               /* gut treffbar auf dem Handy */
  border: 1.5px solid transparent;
  border-radius: var(--radius-pille);   /* komplett rund - "Pillenform" */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.15s ease,
              box-shadow 0.2s ease;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Hauptaktion - kraeftig, faellt sofort auf, mit weichem
   Schlagschatten in der Akzentfarbe. */
.btn--primaer {
  background-color: var(--c-akzent-flaeche);
  border-color: var(--c-akzent-flaeche);
  color: #FFFFFF;
  box-shadow: 0 12px 24px -10px rgba(46, 123, 176, 0.55);
}

.btn--primaer:hover {
  background-color: #1F5B85;
  border-color: #1F5B85;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(46, 123, 176, 0.6);
}

/* Nebenaktion - nur Umriss, weisse Flaeche. */
.btn--sekundaer {
  background-color: var(--c-karte);
  border-color: var(--c-linie-stark);
  color: var(--c-ueberschrift);
}

.btn--sekundaer:hover {
  border-color: var(--c-akzent);
  color: var(--c-akzent-text);
  transform: translateY(-2px);
  box-shadow: var(--schatten);
}

/* Variante auf dunklem Grund. Aktuell ungenutzt (der Hero ist
   inzwischen hell), bleibt fuer eventuelle dunkle Flaechen. */
.btn--auf-dunkel {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}

.btn--auf-dunkel:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-top: var(--abstand-m);
}


/* ============================================================
   7b. ICON-BADGES
   ------------------------------------------------------------
   Kleines, farbig hinterlegtes Quadrat mit abgerundeten Ecken
   fuer ein Icon. Wiederkehrendes Element in Karten (Leistungen,
   Warum, Ablauf, Kontakt) - sorgt fuer einen einheitlichen,
   freundlichen Auftritt statt karger Textlisten.

   Die SVGs selbst stehen im HTML (handgezeichnete Strichicons,
   keine externe Icon-Bibliothek noetig).
   ============================================================ */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-klein);
  background: linear-gradient(150deg, #E4EEF7, #EEF2F6);
}

.icon-badge svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--c-akzent-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kleinere Variante fuer Listen (Kontakt, Ablauf-Text). */
.icon-badge--klein {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-klein);
}

.icon-badge--klein svg {
  width: 1.25rem;
  height: 1.25rem;
}


/* ============================================================
   8. HERO
   ------------------------------------------------------------
   Heller Einstieg: weisser bis ganz zart blauer Hintergrund,
   links der Text, rechts ein Bild, das sofort zeigt, worum es
   geht (Website auf Laptop und Handy).

   Auf dem Handy steht das Bild UNTER dem Text - so sieht man
   zuerst die Kernaussage und muss nicht am Bild vorbeiscrollen.
   ============================================================ */

.hero {
  position: relative;
  background: linear-gradient(180deg,
              var(--c-seite) 0%, var(--c-flaeche-zart) 100%);
  border-bottom: 1px solid var(--c-linie);
  padding-block: var(--abstand-l) var(--abstand-xl);
  overflow: hidden;
}

/* Zwei weiche Farbflaechen im Hintergrund - der einzige
   Farbakzent, sehr dezent gehalten ("mehr Weiss, blaue
   Akzente" statt einer vollflaechigen Farbe). */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
}

.hero::before {
  top: -18rem;
  right: -12rem;
  width: 42rem;
  height: 42rem;
  background: radial-gradient(circle,
              rgba(46, 123, 176, 0.12) 0%, rgba(46, 123, 176, 0) 68%);
}

.hero::after {
  bottom: -16rem;
  left: -14rem;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle,
              rgba(100, 121, 140, 0.14) 0%, rgba(100, 121, 140, 0) 70%);
}

.hero__raster {
  position: relative;   /* liegt ueber dem Schimmer */
  z-index: 1;
  display: grid;
  gap: var(--abstand-l);
  align-items: center;
}

/* Ab Tablet zwei Spalten: Text links, Bild rechts. */
@media (min-width: 62rem) {
  .hero {
    padding-block: var(--abstand-xl) var(--abstand-xxl);
  }
  .hero__raster {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--abstand-xl);
  }
}

.hero__inhalt {
  max-width: 36rem;
}

.hero__text {
  font-size: 1.1875rem;
  color: var(--c-text-leise);
  max-width: 34rem;
}

/* --- Das Hero-Bild ---------------------------------------- */
.hero__bild {
  position: relative;
}

.hero__bild img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schatten-gross);
  position: relative;
  z-index: 1;
}

/* Zarte blaue Flaeche hinter dem Bild - greift den Akzent auf
   und gibt dem Bild etwas Tiefe, ohne ein weiteres Foto zu
   brauchen. */
.hero__bild::before {
  content: "";
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 88%;
  height: 88%;
  background-color: var(--c-akzent);
  opacity: 0.14;
  border-radius: var(--radius);
  pointer-events: none;
}

/* Kleine Merkmal-Zeile unter den Buttons. Ersetzt bewusst
   die sonst ueblichen erfundenen Kundenzahlen. */
.hero__fakten {
  list-style: none;
  padding: 0;
  margin: var(--abstand-m) 0 0;
  /* Immer untereinander - so steht jeder Punkt sauber in einer
     eigenen Zeile und der vierte haengt nicht neben dem dritten. */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-text);
}

.hero__fakten li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Rundes Haekchen-Icon vor jedem Punkt. */
.hero__fakten svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--c-akzent-text);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   9. PROBLEM / NUTZEN
   ------------------------------------------------------------
   Drei Karten mit Icon-Badge, weissem Grund und weichem
   Schatten - passt zum helleren, freundlicheren Gesamtbild.
   ============================================================ */

.nutzen-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--abstand-m);
}

/* Erst ab 56rem (ca. 900px) dreispaltig.
   Bei 768px waeren die Spalten nur rund 205px breit - das sind
   etwa 25 Zeichen pro Zeile und liest sich unangenehm. Auf dem
   Tablet im Hochformat bleiben die drei Punkte deshalb
   untereinander. */
@media (min-width: 56rem) {
  .nutzen-liste {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--abstand-l);
  }
}

.nutzen-liste li {
  margin: 0;
  background-color: var(--c-karte);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: var(--abstand-m);
  box-shadow: var(--schatten);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}

.nutzen-liste li:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-gross);
}

.nutzen-liste .icon-badge {
  margin-bottom: var(--abstand-s);
}

.nutzen-liste h3 {
  margin-bottom: 0.4rem;
}

.nutzen-liste p {
  margin-bottom: 0;
  color: var(--c-text-leise);
  font-size: 0.9875rem;
}


/* ============================================================
   10. LEISTUNGEN
   ------------------------------------------------------------
   Eigenstaendige Karten mit Icon-Badge, weissem Grund und
   Schlagschatten, die beim Ueberfahren leicht abheben.
   ============================================================ */

.leistungen {
  display: grid;
  gap: var(--abstand-m);
}

@media (min-width: 40rem) {
  .leistungen { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .leistungen { grid-template-columns: repeat(3, 1fr); }
}

.leistung {
  background-color: var(--c-karte);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: var(--abstand-m);
  box-shadow: var(--schatten);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}

.leistung:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-gross);
}

.leistung .icon-badge {
  margin-bottom: var(--abstand-s);
}

.leistung h3 {
  margin-bottom: 0.5rem;
}

.leistung p {
  margin-bottom: 0;
  color: var(--c-text-leise);
  font-size: 0.9875rem;
}

/* --- Info-Aufklapper (z. B. "Was sind Cookies?") -----------
   Ein natives <details>-Element: klickbar, tastaturbedienbar
   und funktioniert ganz ohne JavaScript. Das runde "i" macht
   auf den ersten Blick klar, dass hier eine Erklaerung wartet. */
.info-aufklapper {
  margin-top: var(--abstand-s);
  font-size: 0.875rem;
}

.info-aufklapper summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--c-akzent-text);
  font-weight: 600;
  list-style: none;               /* eigener Pfeil statt Standard-Dreieck */
}

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

.info-aufklapper__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-color: var(--c-akzent-flaeche);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}

.info-aufklapper summary:hover .info-aufklapper__icon {
  background-color: #1F5B85;
}

.info-aufklapper p {
  margin: 0.6rem 0 0;
  padding: var(--abstand-s);
  background-color: var(--c-flaeche-alt);
  border-radius: var(--radius-klein);
  color: var(--c-text-leise);
  font-size: 0.875rem;
  max-width: none;
}


/* ============================================================
   11. ABLAUF
   ------------------------------------------------------------
   Nummeriert, weil es tatsaechlich eine Reihenfolge ist.
   Die Schritte sind mit einer durchgehenden Linie verbunden:
   auf dem Handy senkrecht untereinander, ab breiter Anzeige
   waagerecht nebeneinander.
   ============================================================ */

.ablauf {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: schritt;         /* Zaehler starten */
  display: grid;
  gap: 0;
}

.ablauf li {
  counter-increment: schritt;     /* Zaehler +1 pro Schritt */
  position: relative;
  margin: 0;
  padding: 0 0 var(--abstand-m) 3.75rem;
}

/* Die Nummer im Kreis. */
.ablauf li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Akzentblau, dunklerer Flaechenton fuer 5.2:1 bei
     weisser Ziffer. */
  background-color: var(--c-akzent-flaeche);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 700;
  z-index: 1;
}

/* Verbindungslinie zum naechsten Schritt. */
.ablauf li::after {
  content: "";
  position: absolute;
  left: 1.25rem;                  /* Mitte des Kreises */
  top: 2.5rem;
  bottom: 0;
  width: 2px;
  background-color: var(--c-linie-stark);
}

/* Beim letzten Schritt keine Linie ins Leere. */
.ablauf li:last-child::after {
  display: none;
}

.ablauf h3 {
  margin-bottom: 0.3rem;
  padding-top: 0.4rem;
}

.ablauf p {
  margin-bottom: 0;
  color: var(--c-text-leise);
  font-size: 0.9875rem;
}

/* Erst ab 75rem (1200px) nebeneinander mit waagerechter Linie.
   Bei 992px waeren die Spalten sonst nur rund 165px breit. */
@media (min-width: 75rem) {

  .ablauf {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--abstand-m);
  }

  .ablauf li {
    padding: 3.75rem 0 0 0;       /* Nummer sitzt jetzt oben */
  }

  /* Linie waagerecht zwischen den Nummern. */
  .ablauf li::after {
    left: 2.5rem;
    right: calc(var(--abstand-m) * -1);
    top: 1.25rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}


/* ============================================================
   12. UEBER MICH
   ------------------------------------------------------------
   Der ganze Abschnitt hat das abstrakte Muster als
   Hintergrund. Es wird nach links ausgeblendet, sodass der
   Text links auf ruhiger Flaeche steht und das Muster nur
   rechts durchscheint. Darauf liegt rechts die Karte mit den
   Eckdaten (Standort usw.).
   ============================================================ */

.ueber-sektion {
  position: relative;
  overflow: hidden;
}

/* Das Hintergrundmuster. Liegt hinter dem gesamten Inhalt.

   Es wird gleich in ZWEI Richtungen ausgeblendet:
     - waagerecht: nach links hin, damit der Text auf ruhiger
       Flaeche steht und das Muster nur rechts durchscheint;
     - senkrecht: nach oben und unten hin, damit der Abschnitt
       weich in die Nachbarabschnitte uebergeht statt hart
       abzuschneiden.
   Umgesetzt mit zwei Masken, die per "intersect" kombiniert
   werden (sichtbar nur, wo BEIDE Masken deckend sind). Wo die
   Maske transparent ist, kommt die einheitliche Sektionsfarbe
   durch - deshalb funktioniert das automatisch in hell UND
   dunkel, ohne feste Farbwerte. */
.ueber-sektion__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("bilder/abstrakt.webp");
  background-size: cover;
  background-position: center right;
  opacity: 0.32;                    /* leichte Opacity - dezent */

  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;   /* alte WebKit-Schreibweise fuer "intersect" */
          mask-composite: intersect;
}

/* Auf dem Handy soll der Text nicht ueber dem Muster liegen -
   dort blenden wir das Bild noch weiter nach rechts aus. */
@media (max-width: 48rem) {
  .ueber-sektion__bg {
    opacity: 0.22;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, transparent 55%, #000 95%),
      linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
            mask-image:
      linear-gradient(90deg, transparent 0%, transparent 55%, #000 95%),
      linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  }
}

/* Inhalt liegt ueber dem Hintergrund. */
.ueber-sektion .container {
  position: relative;
  z-index: 1;
}

.ueber {
  display: grid;
  gap: var(--abstand-l);
  align-items: center;
}

@media (min-width: 62rem) {
  .ueber {
    /* Gleich breite Spalten, damit die Karte weiter zur Mitte
       rueckt statt am rechten Rand zu kleben. */
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-xl);
  }
}

.ueber__text p {
  max-width: 36rem;
}

/* --- Eckdaten-Karte ---------------------------------------
   Liegt auf dem durchscheinenden Muster. Leicht durchscheinend
   mit Weichzeichner, damit das Muster dahinter erahnbar bleibt,
   der Text aber klar lesbar ist.

   Groesser und in ihrer Spalte zentriert - sie ist das
   Blickfang-Element des Abschnitts. */
.ueber__karte {
  justify-self: center;
  width: 100%;
  max-width: 30rem;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  padding: var(--abstand-xl) var(--abstand-l);
  box-shadow: var(--schatten-gross);
}

.ueber__karte dl {
  margin: 0;
  display: grid;
  gap: var(--abstand-l);
}

.ueber__karte dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-akzent-text);
}

.ueber__karte dd {
  margin: 0.25rem 0 0;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-ueberschrift);
}


/* ============================================================
   13. KONTAKT & FORMULAR
   ============================================================ */

.kontakt {
  display: grid;
  gap: var(--abstand-l);
  align-items: start;
}

@media (min-width: 62rem) {
  .kontakt {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--abstand-xl);
  }
}

/* --- Linke Spalte: direkte Kontaktwege -------------------- */
.kontakt__direkt dl {
  margin: 0 0 var(--abstand-l);
  display: grid;
  gap: var(--abstand-m);
}

/* Jeder Eintrag: Icon-Badge links, Text rechts daneben. */
.kontakt__direkt dl > div {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.kontakt__direkt dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-akzent-text);
}

.kontakt__direkt dd {
  margin: 0.1rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ueberschrift);
}

.kontakt__direkt dd a {
  color: inherit;
  text-decoration-color: var(--c-linie-stark);
}

/* --- Das Formular ----------------------------------------- */
.formular {
  background-color: var(--c-karte);
  border: 1px solid var(--c-linie);
  border-top: 3px solid var(--c-akzent);
  border-radius: var(--radius);
  padding: var(--abstand-m);
}

@media (min-width: 48rem) {
  .formular { padding: var(--abstand-l); }
}

/* Kurzer Motivations-Satz oben im Formular - soll zum
   Loslegen ermutigen, ohne wie ein Versprechen mit Termin
   zu klingen (deshalb "koennten", nicht "werden"). */
.formular__slogan {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-ueberschrift);
  margin: 0 0 var(--abstand-m);
  max-width: none;
}

.feld {
  margin-bottom: var(--abstand-s);
}

/* Beschriftungen stehen ueber dem Feld und sind IMMER sichtbar.
   Kein Platzhalter-statt-Label: der verschwindet beim Tippen
   und ist ein klassischer Barrierefreiheits-Fehler. */
.feld label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-ueberschrift);
  margin-bottom: 0.35rem;
}

/* Kennzeichnung der Pflichtfelder. */
.pflicht {
  color: var(--c-akzent-text);
}

.feld input,
.feld textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;              /* 16px verhindert das Zoomen auf iPhones */
  color: var(--c-text);
  background-color: var(--c-flaeche-alt);
  border: 1.5px solid var(--c-linie);
  border-radius: var(--radius-klein);
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease;
}

.feld textarea {
  min-height: 9rem;
  resize: vertical;
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--c-akzent);
  background-color: var(--c-seite);
  box-shadow: 0 0 0 4px rgba(46, 123, 176, 0.16);
}

.feld__hinweis {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-text-leise);
  margin-top: 0.3rem;
}

/* --- Honeypot (Spamschutz) --------------------------------
   Dieses Feld ist fuer Menschen unsichtbar, Spam-Roboter
   fuellen es aber aus. Die PHP-Datei verwirft jede Nachricht,
   bei der es ausgefuellt ist.

   Wichtig: NICHT display:none verwenden - manche Bots
   erkennen das. Stattdessen aus dem Bild schieben.
   aria-hidden + tabindex="-1" im HTML sorgen dafuer, dass
   Screenreader und Tab-Taste das Feld ueberspringen. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Datenschutzhinweis am Formular (Pflicht) ------------- */
.formular__datenschutz {
  font-size: 0.875rem;
  color: var(--c-text-leise);
  background-color: var(--c-flaeche-alt);
  border-left: 3px solid var(--c-akzent);
  padding: var(--abstand-s);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  margin: var(--abstand-m) 0;
  max-width: none;
}

.formular__datenschutz a {
  font-weight: 600;
}

/* --- Rueckmeldung nach dem Absenden ----------------------- */
.meldung {
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-klein);
  margin-bottom: var(--abstand-m);
  font-weight: 500;
  max-width: none;
}

.meldung--ok {
  background-color: #E4F1E8;
  border-left: 4px solid #2E7D4F;
  color: #1B4D30;              /* 8.1:1 - deutlich ueber AA */
}

.meldung--fehler {
  background-color: #FBE9E7;
  border-left: 4px solid #B3261E;
  color: #8C1D18;              /* 7.5:1 */
}

.meldung ul {
  margin: 0.5rem 0 0;
}


/* ============================================================
   14. FUSSZEILE
   ============================================================ */

.fuss {
  background-color: var(--c-dunkel);
  color: var(--c-auf-dunkel-leise);
  padding-block: var(--abstand-l);
  font-size: 0.9375rem;
}

.fuss__oben {
  display: grid;
  gap: var(--abstand-m);
  padding-bottom: var(--abstand-m);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 48rem) {
  .fuss__oben {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--abstand-l);
  }
}

.fuss__text {
  max-width: 26rem;
  margin: var(--abstand-s) 0 0;
  color: var(--c-auf-dunkel-leise);
}

.fuss__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s) var(--abstand-m);
}

.fuss__nav li { margin: 0; }

.fuss__nav a {
  color: var(--c-auf-dunkel);
  text-decoration: none;
  font-weight: 500;
}

.fuss__nav a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.fuss__unten {
  padding-top: var(--abstand-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs) var(--abstand-m);
  justify-content: space-between;
  font-size: 0.875rem;
}

.fuss__unten p {
  margin: 0;
  max-width: none;
}


/* ============================================================
   15. RECHTSSEITEN (Impressum / Datenschutz)
   ============================================================ */

.rechtsseite {
  padding-block: var(--abstand-l) var(--abstand-xl);
}

/* Schmale Spalte - lange Rechtstexte liest man sonst schlecht. */
.rechtsseite__inhalt {
  max-width: 46rem;
}

.rechtsseite h2 {
  font-size: 1.375rem;
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-s);
  border-top: 1px solid var(--c-linie);
}

.rechtsseite h3 {
  margin-top: var(--abstand-m);
  color: var(--c-ueberschrift);
}

.rechtsseite p,
.rechtsseite li {
  max-width: 46rem;
  font-size: 1rem;
}

/* Zurueck-Link oben auf den Rechtsseiten. */
.zurueck {
  display: inline-block;
  margin-bottom: var(--abstand-m);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.zurueck::before {
  content: "\2190";            /* Pfeil nach links */
  margin-right: 0.4rem;
}

.zurueck:hover { text-decoration: underline; }

/* Stand-Datum unten. */
.stand {
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-s);
  border-top: 1px solid var(--c-linie);
  font-size: 0.875rem;
  color: var(--c-text-leise);
}


/* ============================================================
   16. BARRIEREFREIHEIT
   ============================================================ */

/* --- Skip-Link -------------------------------------------
   Erster Tab-Stopp der Seite. Wer mit der Tastatur bedient,
   kann damit die Navigation ueberspringen. Normalerweise
   unsichtbar, wird beim Fokussieren eingeblendet. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background-color: var(--c-ueberschrift);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* --- Sichtbarer Fokus ------------------------------------
   Ohne das sieht man bei Tastaturbedienung nicht, wo man ist.
   :focus-visible zeigt den Rahmen nur bei Tastatur, nicht
   bei jedem Mausklick. */
:focus-visible {
  outline: 3px solid var(--c-akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auf dunklem Grund braucht der Fokus eine helle Farbe:
   Kopfzeile und Fusszeile. */
.kopf :focus-visible,
.fuss :focus-visible {
  outline-color: #A8CDE8;
}

/* --- Nur fuer Screenreader ------------------------------- */
.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;
}

/* --- Bewegung reduzieren --------------------------------
   Respektiert die Systemeinstellung von Menschen, denen
   Animationen Schwindel verursachen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Ohne JavaScript ------------------------------------
   Falls JS deaktiviert ist, wird die Navigation dauerhaft
   ausgeklappt und der Knopf ausgeblendet. Die Seite bleibt
   damit vollstaendig bedienbar. */
.kein-js .nav       { display: block; position: static;
                      box-shadow: none; border: none; }
.kein-js .menue-knopf { display: none; }


/* ============================================================
   17. DUNKLES DESIGN (DARK MODE)
   ------------------------------------------------------------
   Wird automatisch aktiv, wenn das Geraet auf "dunkel" steht.
   Es werden nur die Farb-Variablen aus Abschnitt 2 neu belegt -
   am restlichen Stylesheet muss nichts geaendert werden.
   ============================================================ */

@media (prefers-color-scheme: dark) {

  :root {
    --c-seite:        #16232E;
    --c-flaeche-alt:  #1B2B38;
    --c-flaeche-zart: #1A2A36;
    --c-karte:        #1F3140;
    --c-text:         #E7EDF3;   /* 13.6:1 */
    --c-text-leise:   #93A5B8;   /* 6.3:1  */
    --c-ueberschrift: #7FB0DD;   /* 7.0:1  */
    --c-akzent:       #5AA3D0;
    --c-akzent-text:  #5AA3D0;   /* 5.8:1  */
    --c-akzent-flaeche: #5AA3D0; /* im Dunklen mit dunkler Schrift darauf */
    --c-linie:        #2C4152;
    --c-linie-stark:  #486074;
    --c-dunkel:       #101B24;   /* noch dunkler als die Seite */
    --c-auf-dunkel:   #E7EDF3;
    --c-auf-dunkel-leise: #A9BCCD;
  }

  /* Das Logo braucht im Dunkeln eigene Farben - Navy auf
     Dunkelblau waere nicht lesbar. */
  .logo__name { color: #E7EDF3; }
  .logo__sub  { color: #93A5B8; }

  /* Das Hero-Bild hat einen weissen Hintergrund. Im dunklen
     Design bekommt es deshalb eine helle Flaeche als Rahmen,
     damit es nicht wie ein Loch in der Seite wirkt. */
  .hero__bild img {
    background-color: #FFFFFF;
    border: 1px solid var(--c-linie);
  }

  /* Die schwebende Karte etwas dunkler einfaerben, damit sie
     nicht wie ein helles Loch im dunklen Design wirkt. */
  .ueber__karte {
    background-color: rgba(31, 49, 64, 0.9);
  }

  .ueber__karte dd { color: var(--c-auf-dunkel); }

  .icon-badge {
    background: linear-gradient(150deg, #24384A, #1B2B38);
  }

  .btn--primaer {
    background-color: #5AA3D0;
    border-color: #5AA3D0;
    color: #0E1922;              /* dunkler Text auf hellem Blau: 6.6:1 */
  }

  .btn--primaer:hover {
    background-color: #7FB0DD;
    border-color: #7FB0DD;
    color: #0E1922;
  }

  /* Der blaue Kontakt-Knopf gilt nur auf dem Desktop, wo er
     als Pille in der Leiste steht. Im Handy-Menue soll Kontakt
     wie die anderen Punkte aussehen - deshalb hier auf die
     breite Anzeige begrenzt (verschachteltes @media). */
  @media (min-width: 62rem) {
    .nav__link--cta {
      background-color: #5AA3D0;
      color: #0E1922;
    }

    .nav__link--cta:hover {
      background-color: #7FB0DD;
      color: #0E1922;
    }
  }

  .info-aufklapper__icon {
    background-color: #5AA3D0;
    color: #0E1922;
  }

  .ablauf li::before {
    background-color: #5AA3D0;
    color: #0E1922;
  }

  /* Meldungen dunkel einfaerben. */
  .meldung--ok     { background-color: #16301F; color: #B6E3C4; }
  .meldung--fehler { background-color: #33191A; color: #F5C3BE; }
}


/* ============================================================
   18. DRUCKANSICHT
   ------------------------------------------------------------
   Nuetzlich, wenn ein Kunde das Impressum ausdrucken moechte.
   ============================================================ */

@media print {
  .kopf, .fuss__nav, .btn, .menue-knopf,
  .hero__bild, .skip-link { display: none !important; }

  body { color: #000; background: #fff; font-size: 11pt; }

  .hero, .fuss { background: #fff !important; color: #000 !important; }
  .hero h1, .hero__text { color: #000 !important; }

  /* Ziel-Adresse von Links mit ausdrucken. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}