/* ═══════════════════════════════════════════════════════════════════════
   AdvancedSoft GmbH — gemeinsames Stylesheet fuer alle Seiten.

   Vorher trug jede Seite ihren eigenen <style>-Block, wodurch Nav- und
   Footer-Regeln dreifach gepflegt werden mussten und auseinandergedriftet
   sind. Alles steht jetzt hier.

   AUFBAU: erst global, dann was alle Seiten teilen (Nav, Sprachbutton,
   Footer), dann die beiden Seitentypen getrennt. Die Trennung laeuft ueber
   eine Klasse am <body>:

     <body class="page-home">   index.html
     <body class="page-legal">  impressum.html, datenschutz.html

   Diese Klassen sind nicht Kosmetik. Die Rechtsseiten stylen nackte
   Element-Selektoren (h1, h2, p, address, a); global gestellt wuerden die
   in die Startseite durchschlagen und dort z.B. die Sektionstitel orange
   und gross schreiben. Deshalb haengt jede seitentyp-spezifische Regel
   unter der passenden Klasse.

   SCHRIFTEN: bewusst Systemschriften, keine Webfonts. Damit entsteht beim
   Aufruf keine Verbindung zu Dritten, was die Aussage in Abschnitt 6 der
   Datenschutzerklaerung traegt. Wer hier Webfonts ergaenzt, muss sie lokal
   unter assets/fonts/ hosten UND die Datenschutzerklaerung anpassen.

   CACHE: die Seiten binden diese Datei mit ?v=<datum> ein, weil das
   Deploy-Skript keine Cache-Header setzt. Wer hier etwas aendert, muss den
   Wert in allen drei HTML-Dateien mitziehen, sonst bekommen Besucher altes
   CSS zu neuem HTML.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  --bg:          #0D1117;
  --surface:     #161B22;
  --elevated:    #1C2128;
  --border:      rgba(255, 255, 255, 0.07);
  --orange:      #F29200;
  --orange-mid:  rgba(242, 146, 0, 0.18);
  --orange-dim:  rgba(242, 146, 0, 0.07);
  --text:        #E6EDF3;
  --text-muted:  #8B949E;
  --text-dim:    #3D444D;
  --radius:      3px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  /* Hoehe der fixierten Nav-Leiste. Explizit gesetzt, damit Abstaende auf
     allen Seiten damit rechnen koennen; in den Media Queries aendert sich
     nur das horizontale Padding, die Hoehe bleibt konstant. */
  --nav-h:       74px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
}

/* Nur die Startseite: das fixierte Canvas und der Hero koennen sonst eine
   horizontale Scrollleiste erzeugen. */
.page-home { overflow-x: hidden; }

/* Die Rechtsseiten sind Lesetext und laufen luftiger. */
.page-legal { line-height: 1.8; }

/* Tastaturfokus sichtbar machen */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══ NAV — auf allen Seiten identisch ═══════════════════════════════════ */
/* Nav bleibt beim Scrollen stehen, nur der Inhalt darunter scrollt.
   Hintergrund und Blur sind dabei zwingend, sonst laeuft der Text sichtbar
   hinter der Leiste durch. Nur die Kopfzeile: der Footer enthaelt ein
   zweites <nav> (.foot-links), das nicht fixiert werden darf. */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 4rem;
  background: rgba(13, 17, 23, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-logo { display: flex; align-items: center; text-decoration: none; }

.nav-logo img {
  height: 38px;
  width: auto;
  display: block;
  filter: invert(1) hue-rotate(180deg);
}

/* Fallback, den der onerror-Handler am <img> einblendet */
.nav-logo-text {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  display: none;
}
.nav-logo-text em { color: var(--orange); font-style: normal; }

.lang-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.25s, color 0.25s;
}
.lang-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ══ FOOTER — auf allen Seiten identisch ════════════════════════════════ */
footer {
  padding: 1.75rem 4rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.foot-copy { font-size: 0.78rem; color: var(--text-dim); }

.foot-links { display: flex; gap: 2rem; }
.foot-links a {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.foot-links a:hover { color: var(--orange); }

/* ══ RECHTSSEITEN ═══════════════════════════════════════════════════════ */
/* Alles unter "main" gescopet, damit die Element-Selektoren weder in die
   Startseite noch in die gemeinsame Nav/Footer-Insel dieser Seiten greifen. */
.page-legal main {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 6rem) 2rem 8rem;
}

.page-legal main h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 2.5rem;
}

.page-legal main h2 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--orange);
  margin: 2.5rem 0 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-legal main p,
.page-legal main address {
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.page-legal main a { color: var(--orange); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--orange);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 3rem;
}
.back:hover { text-decoration: underline; }

/* Hinweis auf den Vorrang der deutschen Fassung. Steht nur in der
   englischen Variante Text im data-en, im Deutschen ist das Element leer
   und verschwindet dadurch restlos — auch der Abstand. */
.page-legal main .lang-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  border-left: 2px solid var(--orange);
  padding: 0.15rem 0 0.15rem 1rem;
  margin-bottom: 2.5rem;
}
.page-legal main .lang-note:empty { display: none; }

.page-legal main .legal-updated {
  margin-top: 2.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ══ STARTSEITE ═════════════════════════════════════════════════════════ */
/* Die Selektoren ab hier existieren nur auf index.html; gescopet werden
   deshalb bloss die, die sonst auf die Rechtsseiten durchschlagen wuerden. */

#hero {
  position: relative;
  z-index: 1;
  height: 100svh;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#circuit {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
  max-width: 820px;
}

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.2s var(--ease) forwards;
}

.hero-h1 {
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.38s var(--ease) forwards;
}
.hero-h1 .hi { color: var(--orange); }

.hero-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--text-muted);
  opacity: 0;
  animation: fadeUp 0.9s 0.55s var(--ease) forwards;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--orange);
  opacity: 0;
  animation: fadeIn 1s 1.2s forwards, bobble 2.2s 1.2s ease-in-out infinite;
}
.scroll-cue svg { display: block; }

/* lift all sections above the fixed canvas — nav gehoert bewusst NICHT in
   diese Liste: es bleibt position:fixed mit z-index 200 und liegt damit
   ueber Canvas und Inhalt. */
.page-home section,
.page-home footer,
.page-home #stack { position: relative; z-index: 1; }

/* ── SECTION SHARED ─────────────────────────────────────── */
.inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 3rem;
}

.sec-label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.9rem;
}

.sec-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.sec-body {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.85;
  max-width: 52ch;
}

/* ── ABOUT ──────────────────────────────────────────────── */
#about {
  padding: 9rem 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center;
}

.about-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.tile:hover {
  border-color: var(--orange-mid);
  transform: translateY(-3px);
}

.tile-icon {
  width: 28px;
  height: 28px;
  color: var(--orange);
  margin-bottom: 0.85rem;
}

.tile-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── SERVICES ───────────────────────────────────────────── */
#services {
  padding: 9rem 0;
  background: rgba(22, 27, 34, 0.88);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.svc-header { margin-bottom: 4rem; }

/* Sechs Spalten als gemeinsames Raster: oben die zwei Fachgebiete ueber je
   drei Spalten (halbe Breite), darunter die drei Werkzeuge ueber je zwei
   Spalten. Beide Reihen fuellen die Breite, die Hierarchie steckt in der
   Kartengroesse. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.svc-card { grid-column: span 2; }
.svc-card:nth-child(-n+2) { grid-column: span 3; }

.svc-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s var(--ease);
}
/* top bar that sweeps in on hover */
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.svc-card:hover {
  border-color: var(--orange-mid);
  transform: translateY(-5px);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-icon {
  width: 46px;
  height: 46px;
  color: var(--orange);
  margin-bottom: 1.5rem;
}

.svc-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.svc-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ── STACK ──────────────────────────────────────────────── */
#stack {
  padding: 2.75rem 0;
  background: rgba(13, 17, 23, 0.72);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Chip-Reihe soll einzeilig bleiben: mehr Breite als der Textsatz
   (1080px) und schmalerer Seitenrand, wenn das Fenster enger wird. */
#stack .inner {
  max-width: 1200px;
  padding: 0 clamp(1.25rem, 3vw, 3rem);
}

.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.35rem, 0.62vw, 0.55rem);
  justify-content: center;
}

.chip {
  white-space: nowrap;
  padding: 0.28rem clamp(0.5rem, 0.9vw, 0.8rem);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: default;
  transition: border-color 0.25s, color 0.25s;
}
.chip:hover { border-color: var(--orange-mid); color: var(--text); }

/* ── PROJECTS ────────────────────────────────────────────── */
#projects {
  padding: 9rem 0;
  background: rgba(22, 27, 34, 0.88);
  border-bottom: 1px solid var(--border);
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.proj-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s var(--ease);
}
.proj-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.proj-card:hover { border-color: var(--orange-mid); transform: translateY(-4px); }
.proj-card:hover::before { transform: scaleX(1); }

.proj-tag {
  font-size: 0.67rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.85rem;
}

.proj-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.78;
}

/* ── PARTNERS ───────────────────────────────────────────── */
#partners {
  padding: 8rem 0;
  text-align: center;
}

.partner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.partner {
  opacity: 0.45;
  filter: grayscale(1) brightness(1.8);
  transition: opacity 0.3s, filter 0.3s;
}
.partner:hover { opacity: 1; filter: none; }

.partner img { height: 36px; width: auto; display: block; }
.partner-fallback {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  display: none;
}

/* ── CONTACT ────────────────────────────────────────────── */
#contact {
  padding: 9rem 0;
  background: rgba(22, 27, 34, 0.88);
  border-top: 1px solid var(--border);
  text-align: center;
}

#contact .inner { max-width: 640px; }

#contact .sec-body { max-width: none; margin: 0 auto; }

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.5rem;
  padding: 0.9rem 2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.contact-link:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}
.contact-link svg { flex-shrink: 0; }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 0.55; }
}
@keyframes bobble {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.on { opacity: 1; transform: none; }

/* ══ MEDIA QUERIES ══════════════════════════════════════════════════════ */
/* Reihenfolge beachten: 1000 → 900 → 600. Die 900er-Regeln gelten nur fuer
   die Startseite, die 600er nur fuer die Rechtsseiten — sonst wuerde je
   eine Seitengruppe die Paddings der anderen erben. */

/* Wer weniger Bewegung eingestellt hat, bekommt die Inhalte sofort und ohne
   Animation. Wichtig: Hero und .reveal starten mit opacity 0 und werden erst
   durch die Animation sichtbar, deshalb hier explizit auf 1 setzen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .eyebrow, .hero-h1, .hero-sub { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .scroll-cue { opacity: 1 !important; animation: none !important; }
}

/* knapp vor dem Umbruch: Schrift der Chips minimal enger ziehen,
   damit die Reihe auch auf kleineren Notebooks einzeilig bleibt */
@media (max-width: 1000px) {
  .chip { font-size: 0.66rem; letter-spacing: 0.06em; }
}

@media (max-width: 900px) {
  .page-home > nav { padding: 0 1.75rem; }
  .page-home footer { padding: 1.5rem 1.75rem; }
  .inner { padding: 0 1.75rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card,
  .svc-card:nth-child(-n+2) { grid-column: auto; }
  .proj-grid { grid-template-columns: 1fr; }
  #about, #services, #projects, #partners, #contact { padding: 6rem 0; }
}

@media (max-width: 600px) {
  .page-legal > nav { padding: 0 1.5rem; }
  .page-legal main { padding: calc(var(--nav-h) + 4rem) 1.5rem 6rem; }
  .page-legal footer { padding: 1.5rem 1.5rem; }
}
