/* ==========================================================================
   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: #2563eb;      /* Signalfarbe (Akzent): modernes Blau, z.B. für Buttons/Links */
  --accent-dark: #1d4ed8; /* dunkleres Blau, z.B. für Hover-Zustand von Buttons */
  --accent-light: #93c5fd;/* helles Blau, für Text auf dunklem Hintergrund */
  --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: 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;
}

/* "position: relative" auf dem <li> ist wichtig, damit das versteckte
   Untermenü (.submenu) sich später korrekt DARUNTER positionieren kann. */
nav.main-nav > ul > li { position: relative; }

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);
}

/* Das Dropdown-Untermenü unter "Dienstleistungen" (World Wide Web, PC...).
   Es ist standardmässig unsichtbar (opacity: 0) und erscheint erst,
   wenn man mit der Maus über den Elternpunkt fährt. */
.submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;   /* liegt "frei schwebend" über dem restlichen Inhalt */
  top: 100%;             /* direkt unter dem Menüpunkt */
  left: 0;
  min-width: 230px;
  background: var(--ink);
  box-shadow: 0 12px 24px rgba(0,0,0,.18); /* leichter Schatten für Tiefe */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px); /* startet 4px tiefer, für kleinen "Rutsch"-Effekt */
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

/* Sobald der Mauszeiger über dem <li> ODER einem Kind-Element davon ist
   (:hover, :focus-within), wird das Untermenü sichtbar gemacht. */
nav.main-nav > ul > li:hover .submenu,
nav.main-nav > ul > li:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu li a {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mono-fg);
  text-decoration: none;
  border-left: 2px solid transparent; /* wird beim Hover blau (siehe unten) */
}
.submenu li a:hover {
  border-left-color: var(--accent);
  background: rgba(37,99,235,0.12); /* leicht transparentes Blau als Hintergrund */
  color: #fff;
}

.nav-toggle { display: none; } /* aktuell ungenutzt, Platzhalter für ein
                                   mögliches "Hamburger-Menü" auf Mobilgeräten */

/* ==========================================================================
   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-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;
}

/* ---------- 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 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;
}

/* .coming-soon: für Angebote, die es noch nicht "live" gibt (z.B. eine
   Partner-Webseite, die erst im Aufbau ist). Sieht aus wie .more, ist aber
   bewusst KEIN Link (kein <a>, sondern ein <span>) und etwas gedämpfter
   eingefärbt, damit klar ist: hier gibt es aktuell nichts zum Anklicken. */
.card .coming-soon {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
  display: inline-block;
}

/* ==========================================================================
   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 */
.prose { max-width: 74ch; }
.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;
  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; }
.footer-inner .fmark { font-family: var(--font-mono); color: #626c72; }

/* ==========================================================================
   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 */

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