/* ==========================================================================
   FMTech GmbH — Stylesheet (style.css)
   ==========================================================================
   Hallo! Diese Datei bestimmt das AUSSEHEN der ganzen Webseite:
   Farben, Schriften, Abstände, Layout usw.

   Die HTML-Dateien (index.html, kontakt.html, ...) enthalten nur den INHALT
   (Texte, Bilder, Struktur) und "verlinken" auf diese Datei mit:
     <link rel="stylesheet" href="style.css">
   So sehen alle Seiten automatisch gleich aus, weil sie dieselbe CSS-Datei
   benutzen. Ändert man hier z.B. die blaue Farbe, ändert sie sich auf
   ALLEN Seiten gleichzeitig. Das ist der grosse Vorteil von CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) VARIABLEN (:root)
   --------------------------------------------------------------------------
   Mit "--name: wert;" legt man wiederverwendbare Werte fest, sogenannte
   "CSS-Variablen". Man kann sie überall im Dokument mit var(--name) abrufen.
   Vorteil: Farbe/Schrift nur an EINER Stelle ändern, statt an 50 Stellen.
   -------------------------------------------------------------------------- */

:root {
  --ink: #4b5563;         /* Haupt-Dunkelfarbe: modernes Grau (statt Schwarz) */
  --paper: #f2f4f5;       /* Hintergrundfarbe der Seite, helles Grau */
  --paper-alt: #ffffff;   /* Alternativer Hintergrund, reines Weiss (z.B. Karten) */
  --line: #d3d8db;        /* Farbe für dünne Trennlinien/Rahmen */
  --accent: #2159d4;      /* Signalfarbe (Akzent): modernes Blau, z.B. für Buttons/Links
                              (10% dunkler als das ursprüngliche #2563eb) */
  --accent-dark: #1a46c2; /* dunkleres Blau, z.B. für Hover-Zustand von Buttons
                              (10% dunkler als das ursprüngliche #1d4ed8) */
  --accent-light: #84b1e4;/* helles Blau, für Text auf dunklem Hintergrund
                              (10% dunkler als das ursprüngliche #93c5fd) */
  --slate: #46586a;       /* Gedämpftes Blaugrau für Nebentexte */
  --slate-light: #eef1f3; /* Sehr helles Blaugrau für Info-Boxen */
  --mono-bg: #374151;     /* Dunkler, aber moderner Grau-Ton für "Datenblatt"-Boxen */
  --mono-fg: #f2f4f5;     /* Textfarbe auf dunklem Hintergrund */

  /* Schriftarten: siehe <link> in den HTML-Dateien, dort werden sie von
     Google Fonts geladen. Hier sagen wir nur, WELCHE benutzt werden soll. */
  --font-display: "Space Grotesk", sans-serif; /* für Überschriften */
  --font-body: "Inter", sans-serif;            /* für normalen Fliesstext */
  --font-mono: "IBM Plex Mono", monospace;     /* für Labels, Preise, Nav */

  --max-width: 1120px;    /* maximale Breite des Inhalts, damit Text auf
                             sehr breiten Bildschirmen nicht endlos wird */
}

/* --------------------------------------------------------------------------
   2) GRUNDEINSTELLUNGEN (gelten für die ganze Seite)
   -------------------------------------------------------------------------- */

/* Der Stern * bedeutet "alle Elemente". box-sizing: border-box sorgt dafür,
   dass Padding und Rahmen in die angegebene Breite eines Elements
   EINGERECHNET werden, statt die Breite zu vergrössern. Ohne das rutscht
   das Layout gerne durcheinander – deshalb macht man das fast immer. */
* { box-sizing: border-box; }

/* Sanftes Scrollen, wenn man z.B. auf einen internen Sprungmarken-Link klickt */
html { scroll-behavior: smooth; }

body {
  margin: 0;                     /* Browser fügen sonst automatisch Rand hinzu */
  font-family: var(--font-body); /* Standard-Schrift für Fliesstext */
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;              /* Zeilenabstand für gute Lesbarkeit */
  font-size: 16px;
}

img { max-width: 100%; display: block; } /* Bilder werden nie breiter als
                                             ihr Container (responsive!) */

a {
  color: var(--accent);
  text-decoration: none; /* keine Unterstreichung standardmässig */
}
a:hover { text-decoration: underline; } /* Unterstreichung nur beim Hovern */

/* Sichtbarer Rahmen, wenn man mit der TAB-Taste durch die Seite navigiert
   (wichtig für Barrierefreiheit / Tastatur-Nutzer!) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* .wrap ist ein "Container", den wir in fast jedem Abschnitt verwenden,
   um den Inhalt zu zentrieren und links/rechts etwas Abstand zu geben. */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;   /* "auto" links und rechts = horizontal zentriert */
  padding: 0 32px;  /* Innenabstand, damit Text nicht am Bildschirmrand klebt */
}

/* Überschriften h1–h4 teilen sich diese Grundformatierung */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -0.01em; /* Buchstaben minimal enger zusammen */
}

/* clamp(MIN, BEVORZUGT, MAX) macht die Schrift automatisch responsive:
   Sie ist nie kleiner als MIN und nie grösser als MAX, dazwischen passt sie
   sich an die Bildschirmbreite (vw = "viewport width") an. */
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

/* .eyebrow = kleiner, farbiger Vortext über einer Überschrift,
   z.B. "DIENSTLEISTUNG 01" über "World Wide Web" */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;      /* Buchstaben auseinanderziehen */
  text-transform: uppercase;   /* alles in Grossbuchstaben anzeigen */
  color: var(--accent);
  display: block;
  margin-bottom: 0.6em;
}

/* ==========================================================================
   3) HEADER / NAVIGATION (der Balken ganz oben mit Logo + Menü)
   ========================================================================== */

.site-header {
  background: var(--paper-alt);
  border-bottom: 3px solid var(--ink);
  position: sticky;  /* "sticky" = bleibt beim Scrollen oben kleben */
  top: 0;
  z-index: 50;       /* sorgt dafür, dass der Header über anderen Inhalten liegt */
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;              /* Flexbox: Logo und Menü nebeneinander */
  align-items: center;        /* vertikal mittig ausrichten */
  justify-content: space-between; /* Logo links, Menü rechts */
  gap: 24px;
}

/* Logo-Schriftzug "FMTech" oben links */
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.logo:hover { text-decoration: none; }
.logo span { color: var(--accent); } /* färbt nur den Teil "Tech" blau ein */
.logo small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  color: var(--slate);
  margin-left: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Logo als BILD statt als Text (z.B. eine .gif- oder .png-Datei).
   height begrenzt die Höhe, width: auto sorgt dafür, dass die Breite sich
   automatisch anpasst, damit das Bild nicht verzerrt wird. */
.logo-img {
  height: 75px; /* 50% grösser als zuvor (war 50px) */
  width: auto;
  display: block;
}

nav.main-nav { display: flex; }

/* Die Menüpunkte sind eigentlich eine Liste (<ul><li>...). Wir entfernen
   die Listenpunkte (list-style: none) und legen sie nebeneinander (flex). */
nav.main-nav > ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}

nav.main-nav > ul > li > a {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent; /* Platzhalter, damit beim Hover
                                            nichts "springt" */
  transition: border-color .15s ease, color .15s ease; /* sanfte Animation */
}

/* Wenn man mit der Maus über einen Menüpunkt fährt (:hover) ODER wenn er
   die Klasse .active hat (= "das ist die aktuelle Seite"), wird er blau. */
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.active > a {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   HAMBURGER-MENÜ FÜR HANDYS (nur CSS, kein JavaScript nötig!)
   ==========================================================================
   Der Trick: Wir verstecken eine echte Checkbox (#nav-toggle) und benutzen
   ein <label for="nav-toggle">, das wie drei Striche aussieht. Klickt man
   auf das Label, wird automatisch die (unsichtbare) Checkbox "angehakt" —
   das kann HTML von Natur aus, ganz ohne JavaScript. Per CSS-Selektor
   ":checked ~ nav" zeigen wir dann das Menü an, wenn die Checkbox angehakt
   ist. Auf grossen Bildschirmen (Desktop) blenden wir den ganzen Trick aus
   und zeigen das Menü immer normal an. */

.nav-toggle-input {
  display: none; /* die Checkbox selbst soll man nie sehen */
}

.hamburger {
  display: none; /* auf dem Desktop unsichtbar, siehe @media weiter unten */
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 19px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
}

/* ==========================================================================
   4) HERO-BEREICH (der grosse Aufmacher-Bereich ganz oben auf der Startseite)
   ========================================================================== */

.hero {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  padding: 72px 0 64px;
}

/* CSS-Grid: teilt den Bereich in zwei Spalten auf.
   1.3fr / 0.7fr bedeutet: linke Spalte ist ca. doppelt so breit wie rechte. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: end; /* Inhalte unten ausrichten */
}

.hero h1 { max-width: 14ch; } /* "ch" = Breite des Buchstaben "0", verhindert
                                  dass die Überschrift zu breite Zeilen bildet */

/* .hero h1.tagline: eine kleinere Variante der Hero-Überschrift.
   Wird für den Claim "Der digitale Hansdampf in allen Gassen." verwendet,
   der zwar bleiben, aber optisch weniger dominant wirken soll. */
.hero h1.tagline {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  max-width: 26ch;
}

.hero-lede {
  font-size: 1.1rem;
  color: #333;
  border-left: 3px solid var(--accent); /* blauer Strich links vom Text */
  padding-left: 20px;
}

/* Die kleine Info-Box rechts im Hero (Gegründet / Standort / Netzwerk) */
.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--slate);
  border: 1px solid var(--line);
  padding: 18px;
  background: var(--slate-light);
}
.hero-meta dt { color: var(--ink); font-weight: 600; } /* dt = Begriff/Titel */
.hero-meta dd { margin: 0 0 10px; color: var(--slate); } /* dd = Beschreibung */

/* ---------- Seiten-Header für alle Unterseiten (nicht die Startseite) ---------- */

.page-hero {
  background: var(--ink);   /* dunkler Hintergrund macht Unterseiten
                                optisch von der Startseite unterscheidbar */
  color: var(--mono-fg);
  padding: 56px 0 48px;
  border-bottom: 4px solid var(--accent);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .eyebrow { color: var(--accent-light); }
.page-hero p { color: #c3cbd1; max-width: 60ch; }

/* ---------- Breadcrumb (die kleine Pfad-Anzeige "Home / Dienstleistungen") ---------- */
.crumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a949c;
  margin-bottom: 14px;
}
.crumb a { color: #c3cbd1; }
.crumb a:hover { color: #fff; }

/* ==========================================================================
   5) ABSCHNITTE (SECTIONS) — allgemeine Blöcke auf jeder Seite
   ========================================================================== */

section { padding: 64px 0; } /* Innenabstand oben/unten für jeden Abschnitt */

/* .alt = "alternativer" Abschnitt mit weissem statt grauem Hintergrund,
   um Abschnitte optisch voneinander abzugrenzen (wie ein Zebra-Muster) */
section.alt {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Kopfzeile eines Abschnitts: Titel links, evtl. Zusatzinfo rechts,
   darunter eine dünne Trennlinie */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

/* .section-head.no-line: gleiche Abstände wie .section-head, aber ohne
   die dünne Trennlinie darunter. Für Abschnitte, wo die Linie stört
   (z.B. direkt über den vier Dienstleistungs-Kacheln). */
.section-head.no-line {
  border-bottom: none;
  padding-bottom: 0;
}

/* ---------- Karten-Raster (z.B. die 3 Dienstleistungs-Kacheln) ---------- */

/* grid-template-columns: repeat(3, 1fr) = drei gleich breite Spalten.
   Der graue "background" scheint durch den 1px-Zwischenraum (gap) hindurch
   und erzeugt so dünne Trennlinien zwischen den Karten – ein kleiner Trick! */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* Gleiches Prinzip wie .grid-3, aber mit 4 Spalten — z.B. für die
   Dienstleistungs-Übersicht, seit eine vierte Karte dazugekommen ist. */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); } /* 2 Spalten auf Tablet */
}
@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; } /* 1 Spalte auf Handy */
}

.card { background: var(--paper-alt); padding: 28px; }

.card .index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

.card h3 { margin-bottom: 0.5em; }

/* .card h3.accent: färbt einen Kartentitel blau ein (statt der normalen
   dunklen Textfarbe). Wird z.B. bei den vier Kernbereichs-Kacheln auf der
   Startseite verwendet, seit dort die kleinen Kürzel (WWW, SEC, ...)
   darüber entfernt wurden — die Farbe übernimmt jetzt deren Signalwirkung. */
.card h3.accent { color: var(--accent); }

.card p { color: #444; font-size: 0.95rem; margin-bottom: 0.8em; }
.card a.more {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   6) "DATENBLATT"-BOX — das wiederkehrende Gestaltungselement für Preise
      und Leistungen (dunkler Kasten, wirkt wie ein technisches Datenblatt)
   ========================================================================== */

.datasheet {
  background: var(--mono-bg);
  color: var(--mono-fg);
  border: 1px solid #2a2f34;
  font-family: var(--font-mono);
  margin: 28px 0;
}
.datasheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px dashed #3a4046; /* gestrichelte Linie */
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f8b93;
}
.datasheet-header .dot { color: var(--accent); } /* der blaue Punkt "●" */

/* Jede Zeile im Datenblatt: links der Begriff (dt), rechts die Erklärung (dd) */
.datasheet-row {
  display: grid;
  grid-template-columns: 220px 1fr; /* linke Spalte fix 220px, rechte flexibel */
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #23282d;
  font-size: 0.86rem;
}
.datasheet-row:last-child { border-bottom: none; } /* letzte Zeile ohne Linie */
.datasheet-row dt { color: #7f8b93; }
.datasheet-row dd { margin: 0; color: var(--mono-fg); }
.datasheet-row .price { color: var(--accent-light); font-weight: 600; } /* Preise hervorheben */

/* ==========================================================================
   7) ALLGEMEINE TEXTBLÖCKE
   ========================================================================== */

/* .prose = normaler Fliesstext-Block, auf max. 74 Zeichen Breite begrenzt,
   damit Zeilen nicht zu lang und damit schlecht lesbar werden */
/* Früher war .prose auf 74ch (schmale Lesebreite) begrenzt. Jetzt soll der
   Textblock genau so breit sein wie die Box darüber (z.B. Datenblatt oder
   Freelancer-Liste) — deshalb keine eigene max-width mehr, der Block nimmt
   einfach die volle Breite von .wrap ein. */
.prose { max-width: none; }
.prose p { color: #2a2e31; }

/* .callout = hervorgehobener Hinweis-Kasten mit blauem Strich links */
.callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--paper-alt);
  padding: 20px 24px;
  margin: 24px 0;
}

/* ==========================================================================
   8) TEAM-BEREICH (Mitarbeiter-Seite)
   ========================================================================== */

/* Foto links (feste Breite 220px), Text rechts (Rest der Breite) */
.team-lead {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 32px;
}
.team-lead img {
  border: 1px solid var(--line);
  filter: grayscale(15%); /* Foto ganz leicht entsättigt, wirkt ruhiger */
}
.team-lead .tags {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.8;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

/* Liste der Freelancer: Name links, Rolle rechts, ebenfalls mit dem
   "1px-Hintergrund-Trick" für dünne Trennlinien wie beim Karten-Raster oben */
.freelancer-list {
  list-style: none;
  margin: 0 0 28px; /* Abstand unten, analog zu .datasheet (margin: 28px 0),
                        damit ein folgender Textblock nicht zu eng anschliesst */
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.freelancer-list li {
  background: var(--paper-alt);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}
.freelancer-list .role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.freelancer-list .name { font-weight: 600; }

/* ==========================================================================
   9) REFERENZEN-SEITE (Liste der Kunden in mehreren Spalten)
   ========================================================================== */

/* "columns: 3" lässt den Text automatisch wie in einer Zeitung auf
   3 Spalten verteilen — ganz ohne Grid oder Flexbox! */
.ref-grid {
  columns: 3;
  column-gap: 32px;
}
.ref-grid .ref-item {
  break-inside: avoid; /* verhindert, dass ein Eintrag mitten zwischen
                           zwei Spalten "zerrissen" wird */
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

/* ==========================================================================
   10) KONTAKT-SEITE
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei gleich breite Spalten */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact-grid > div { background: var(--paper-alt); padding: 32px; }
.contact-grid dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-top: 18px;
}
.contact-grid dt:first-child { margin-top: 0; }
.contact-grid dd { margin: 4px 0 0; font-size: 1.05rem; }

/* Blauer Button, z.B. "Jetzt anrufen" */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: #fff;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  text-decoration: none;
  margin-top: 18px;
}
.btn:hover {
  background: var(--accent-dark); /* dunkleres Blau beim Hovern, wirkt wie ein "Druck"-Effekt */
  border-color: var(--accent-dark);
  text-decoration: none;
}

/* ==========================================================================
   11) FOOTER (Fussbereich ganz unten auf jeder Seite)
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: #9aa4ab;
  padding: 40px 0 28px;
  border-top: 4px solid var(--accent);
}
.footer-inner {
  display: flex;
  justify-content: space-between; /* die 3 Spalten gleichmässig verteilen */
  flex-wrap: wrap;  /* bei schmalen Bildschirmen automatisch umbrechen */
  gap: 20px;
  font-size: 0.85rem;
}
.footer-inner a { color: #d6dbde; }

/* ==========================================================================
   12) RESPONSIVE DESIGN (Anpassung für Tablet/Handy)
   ==========================================================================
   "@media (max-width: 860px)" bedeutet: Diese Regeln gelten NUR, wenn das
   Browserfenster schmaler als 860px ist (z.B. auf einem Handy). So bauen
   wir mehrspaltige Layouts auf einspaltige Layouts um, damit alles auf
   kleinen Bildschirmen lesbar bleibt.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }       /* eine Spalte statt zwei */
  .grid-3 { grid-template-columns: 1fr; }           /* Karten untereinander */
  .team-lead { grid-template-columns: 1fr; }        /* Foto über dem Text */
  .contact-grid { grid-template-columns: 1fr; }     /* Kontakt-Boxen untereinander */
  .ref-grid { columns: 1; }                         /* Referenzen einspaltig */
  .datasheet-row { grid-template-columns: 1fr; gap: 4px; } /* Datenblatt-Zeilen
                                                                untereinander */

  /* Freelancer-Liste: Name und Tätigkeit nicht mehr nebeneinander (2 Spalten),
     sondern übereinander (1 Spalte). So beginnt die Tätigkeit bei JEDEM
     Eintrag exakt am gleichen linken Rand, direkt unter dem Namen. */
  .freelancer-list li {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 4px;
  }

  .header-inner { flex-wrap: wrap; }  /* Logo/Menü dürfen umbrechen */

  /* Auf dem Handy: Hamburger-Icon anzeigen... */
  .hamburger { display: flex; }

  /* ...und das Menü standardmässig verstecken (display: none). */
  nav.main-nav {
    display: none;
    width: 100%;       /* nimmt die volle Breite ein, sobald es sichtbar ist */
    order: 3;          /* erscheint UNTER Logo und Hamburger-Icon */
  }

  /* Das ist der eigentliche Trick: Ist die Checkbox #nav-toggle angehakt
     ("~" bedeutet "irgendein nachfolgendes Geschwister-Element"), wird
     das Menü sichtbar (display: block). */
  .nav-toggle-input:checked ~ nav.main-nav {
    display: block;
  }

  /* Auf dem Handy stehen die Menüpunkte untereinander statt nebeneinander */
  nav.main-nav > ul {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
  nav.main-nav > ul > li > a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
  }
}