/* ==========================================================================
   salzburg.network — Unternehmens-/Produktwebseite
   Eigenständiges Stylesheet (kein Framework, kein CDN). Ursprünglich an
   die blaue "Coming Soon"-Seite im Hauptverzeichnis angelehnt, auf
   Nutzerwunsch (26.08.2026) auf denselben roten/korallfarbenen Akzent
   wie das neue ZKM-Design umgestellt (--accent/--accent-rgb) - dunkler
   Netzwerk-Hintergrund und Logo-Form bleiben gleich, nur die Akzentfarbe
   hat sich geändert. Mobile-first.
   ========================================================================== */

:root{
  --bg-0: #05080f;
  --bg-1: #0b1220;
  --surface: #101828;
  --surface-2: #16213a;
  --border: rgba(245, 247, 250, 0.10);
  /* 01.09.2026: an das tatsaechliche Orange des neuen Logos angepasst
     (per Pixel-Probe aus logo-icon.png ermittelt, ~#fa5730 statt des
     bisherigen, etwas blasseren Korallton) - Logo und Website-Akzentfarbe
     sollen sichtbar dieselbe Farbe sein. */
  --accent: #fa5730;
  --accent-light: #ff8a63;
  --accent-dark: #e0421a;
  --accent-rgb: 250, 87, 48;
  --text-primary: #f5f7fa;
  --text-secondary: #9aa7bd;
  --text-tertiary: #6b7688;
  --success: #3ddc97;

  --font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Fuer Ueberschriften, an das geometrische, rund-offene Schriftbild des
     Logo-Schriftzugs angelehnt (01.09.2026) - bewusst nur bereits auf dem
     jeweiligen System vorhandene Schriften (kein Font-CDN, siehe
     Projektvorgabe "kein CDN" + eigenes DSGVO-Versprechen auf dieser
     Seite: ein Google-Fonts-Nachladen wuerde Besucher-IPs an Google
     senden). Faellt ohne diese Schriften sauber auf --font-sans zurueck. */
  --font-display: "Century Gothic", "Poppins", "Avenir Next", "Segoe UI", var(--font-sans);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --container: 1180px;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

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

html{ scroll-behavior: smooth; }
html, body{ margin: 0; padding: 0; min-height: 100%; }

body{
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{ margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-display); }
p{ margin: 0; }

a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Animierter Hintergrund (Canvas), fix ueber die ganze Seite - siehe
   assets/js/network-bg.js (Glasfaser-Kurven mit wandernden Datenpaketen).
   Rein dekorativ, reagiert leicht auf die Maus. */
#network-bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: .85;
}

/* Zusaetzliche, sehr langsam driftende Farbflaechen HINTER dem Netzwerk-
   Canvas - rein CSS (kein JS/Canvas noetig), sorgt fuer mehr Tiefe/Leben
   im Hintergrund als die duennen Partikel-Linien allein. Bewusst in der
   eigenen warmen Akzentpalette gehalten (kein Fremdton), stark verwischt
   und niedrige Deckkraft, damit Textkontrast ueberall erhalten bleibt. */
.bg-orbs{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-orbs span{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .4;
  will-change: transform;
}
.bg-orbs span:nth-child(1){
  width: 34vw; height: 34vw; min-width: 320px; min-height: 320px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .6) 0%, rgba(var(--accent-rgb), 0) 72%);
  top: -10%; left: -8%;
  animation: orb-drift-1 28s ease-in-out infinite;
}
.bg-orbs span:nth-child(2){
  width: 28vw; height: 28vw; min-width: 260px; min-height: 260px;
  background: radial-gradient(circle, rgba(240, 192, 76, .45) 0%, rgba(240, 192, 76, 0) 72%);
  bottom: -12%; right: -6%;
  animation: orb-drift-2 34s ease-in-out infinite;
}
.bg-orbs span:nth-child(3){
  width: 22vw; height: 22vw; min-width: 220px; min-height: 220px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .35) 0%, rgba(var(--accent-rgb), 0) 72%);
  top: 42%; right: 12%;
  animation: orb-drift-3 24s ease-in-out infinite;
}
@keyframes orb-drift-1{ 0%, 100%{ transform: translate(0, 0); } 50%{ transform: translate(4vw, 6vw); } }
@keyframes orb-drift-2{ 0%, 100%{ transform: translate(0, 0); } 50%{ transform: translate(-5vw, -4vw); } }
@keyframes orb-drift-3{ 0%, 100%{ transform: translate(0, 0) scale(1); } 50%{ transform: translate(-3vw, 4vw) scale(1.12); } }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-light);
  margin-bottom: var(--space-2);
}
.eyebrow::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55);
  flex-shrink: 0;
  animation: eyebrow-pulse 2.4s ease-out infinite;
}
@keyframes eyebrow-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
/* Marken-Variante des Eyebrows (Hero, 01.09.2026): schreibt "salzburg.network"
   statt eines Kategorie-Labels, ".network" farblich wie im Logo abgesetzt. */
.eyebrow--brand{ font-family: var(--font-display); font-size: .95rem; text-transform: none; }
.eyebrow--brand b{ color: var(--accent); font-weight: 700; }
.lead--tagline{ font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 600; color: var(--text-primary); max-width: none; margin-bottom: var(--space-2); }

/* Buttons ------------------------------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; box-shadow: 0 8px 24px rgba(var(--accent-rgb),.35); }
.btn--primary:hover{ background: linear-gradient(135deg, #ff7d5f 0%, var(--accent) 100%); box-shadow: 0 10px 28px rgba(var(--accent-rgb),.5); }
.btn--ghost{ background: transparent; color: var(--text-primary); border-color: var(--border); }
.btn--ghost:hover{ border-color: var(--accent-light); color: var(--accent-light); }
.btn--login{ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; box-shadow: 0 6px 18px rgba(var(--accent-rgb),.3); }
.btn--login:hover{ box-shadow: 0 8px 22px rgba(var(--accent-rgb),.45); }
.btn--sm{ padding: .55rem 1.1rem; font-size: .85rem; }
.btn--block{ width: 100%; }

/* Info-/Wartungsbanner ---------------------------------------------------
   Wird per JS (site-banner.js) ganz oben in <body> eingefuegt, falls in
   banner-config.js aktiviert - steht bewusst VOR dem Header im Fluss
   (nicht fixiert), damit er beim Scrollen normal mit verschwindet und der
   sticky Header sich danach wie gewohnt oben anheftet. */
.site-banner{
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .7rem 2.75rem .7rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.site-banner--warning{ background: #f0c04c; color: #1a1206; }
.site-banner--info{ background: rgba(var(--accent-rgb), .16); color: var(--accent-light); border-bottom: 1px solid rgba(var(--accent-rgb), .3); }
.site-banner__close{
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .08);
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-banner--info .site-banner__close{ background: rgba(255, 255, 255, .1); }
.site-banner__close:hover{ background: rgba(0, 0, 0, .16); }
.site-banner--info .site-banner__close:hover{ background: rgba(255, 255, 255, .18); }

/* Cookie-Consent-Dialog (cookie-consent.js) ------------------------------
   Modales Overlay, erscheint beim ersten Besuch bzw. ueber den Footer-Link
   "Cookie-Einstellungen" auf jeder Seite. Nutzt die bestehenden Marken-
   Farben/-Tokens (Orange-Akzent, dunkle Flaeche) statt einer fremden
   Akzentfarbe, damit der Dialog wie ein Teil der Seite wirkt. */
.cc-overlay{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 8, 15, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
body.cc-no-scroll{ overflow: hidden; }
.cc-modal{
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}
.cc-title{
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--space-2);
}
.cc-intro{
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.cc-intro a{ color: var(--accent-light); }
.cc-category{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.cc-category__head{
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .9rem;
  color: var(--text-primary);
  cursor: pointer;
}
.cc-category__head input{ width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.cc-category__desc{
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.cc-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: var(--space-3);
}
.cc-btn{
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cc-btn:hover{ border-color: var(--accent-light); color: var(--accent-light); }
.cc-btn--primary{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), .35);
}
.cc-btn--primary:hover{ background: linear-gradient(135deg, #ff7d5f 0%, var(--accent) 100%); color: #fff; }
@media (max-width: 480px){
  .cc-actions{ grid-template-columns: 1fr; }
}

/* Header / Navigation ---------------------------------------------------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 9, 14, .78);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, padding .2s ease, box-shadow .2s ease;
}
/* Durchgehende, dezente Verlaufslinie statt einer schlichten Border - macht
   die Leiste zu jedem Zeitpunkt (auch ganz oben) klar erkennbar und
   "lebendiger" statt komplett flach. Wird beim Scrollen kraeftiger. */
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), .55) 50%, transparent 100%);
  opacity: .5;
  transition: opacity .2s ease;
}
.site-header.is-scrolled{
  background: rgba(8, 7, 11, .94);
  box-shadow: 0 12px 30px -14px rgba(var(--accent-rgb), .35);
}
.site-header.is-scrolled::after{ opacity: 1; }
.site-header.is-scrolled .nav-inner{ padding-top: .6rem; padding-bottom: .6rem; }

.nav-inner{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 1.05rem var(--space-3);
  max-width: var(--container);
  margin: 0 auto;
  transition: padding .2s ease;
}

.brand{ display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.02rem; flex-shrink: 0; }
.brand-logo-img{ height: 36px; width: auto; flex-shrink: 0; }

.site-nav{
  display: none;
  align-items: center;
  gap: .2rem;
  margin: 0 auto 0 var(--space-4);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.site-nav a{ padding: .5rem .9rem; border-radius: var(--radius-sm); transition: color .15s ease, background .15s ease; }
.site-nav a:hover{ color: var(--text-primary); background: rgba(var(--accent-rgb), .12); }
.site-nav > a.is-active{ color: var(--text-primary); background: rgba(var(--accent-rgb), .12); }

/* Produkte-Dropdown im Desktop-Menü (Nutzerwunsch 01.09.2026) - reines
   CSS (:hover/:focus-within), kein JS noetig. */
.nav-dropdown{ position: relative; }
.nav-dropdown__panel{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
  padding: .4rem;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel{ display: block; }
.nav-dropdown__panel a{ display: block; padding: .55rem .8rem; border-radius: var(--radius-sm); font-size: .88rem; white-space: nowrap; }
.nav-dropdown__panel a:hover{ background: rgba(var(--accent-rgb), .12); color: var(--text-primary); }
.nav-dropdown__panel hr{ border: none; border-top: 1px solid var(--border); margin: .3rem .2rem; }
.nav-dropdown__panel a.is-active{ color: var(--accent-light); background: rgba(var(--accent-rgb), .1); }
.nav-dropdown__trigger.is-active{ color: var(--text-primary); background: rgba(var(--accent-rgb), .12); }

/* Breites, in Bereiche gegliedertes Dropdown-Panel ("Cloud & Hosting",
   Nutzerwunsch 08.09.2026) - Mehrspalten-Grid statt einer einzelnen langen
   Liste, damit das Panel auf kleineren Desktop-Aufloesungen in der Hoehe
   kompakt bleibt (breiter statt zu weit nach unten ragend) und trotzdem per
   max-width niemals ueber den sichtbaren Bereich hinausragt. */
.nav-dropdown__panel--wide{
  left: 0;
  min-width: 0;
  width: max-content;
  max-width: min(600px, calc(100vw - 2rem));
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 0 .5rem;
  padding: .6rem;
}
.nav-dropdown:hover .nav-dropdown__panel--wide,
.nav-dropdown:focus-within .nav-dropdown__panel--wide{ display: grid; }
.nav-dropdown__group{ display: flex; flex-direction: column; padding: 0 .3rem; border-left: 1px solid var(--border); }
.nav-dropdown__group:first-child{ border-left: none; }
.nav-dropdown__group-label{
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
  padding: .4rem .5rem .3rem;
}

.nav-toggle{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

.nav-actions{ display: none; align-items: center; gap: .75rem; }

.mobile-menu{
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem var(--space-3) 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(5, 8, 15, .97);
}
.mobile-menu.is-open{ display: flex; }
.mobile-menu a.site-nav-link{ font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.mobile-menu .nav-actions{ display: flex; padding-top: .5rem; border-top: 1px solid var(--border); margin-top: .25rem; }

/* Produkte-Untermenue mobil (Nutzerwunsch 01.09.2026) - natives <details>,
   kein zusaetzliches JS noetig. */
.mobile-submenu summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.mobile-submenu summary::-webkit-details-marker{ display: none; }
.mobile-submenu summary::after{ content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; margin-right: .2rem; }
.mobile-submenu[open] summary::after{ transform: rotate(-135deg); }
.mobile-submenu__list{ display: flex; flex-direction: column; gap: .65rem; padding-left: 1rem; margin-top: .75rem; }
.mobile-menu a.site-nav-link--sub{ font-size: .92rem; font-weight: 500; color: var(--text-secondary); }
.mobile-submenu__group-label{
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
  margin-top: .3rem;
}
.mobile-submenu__group-label:first-child{ margin-top: 0; }
.mobile-menu a.is-active,
.mobile-menu summary.is-active{ color: var(--accent-light); }

@media (min-width: 900px){
  .site-nav{ display: flex; }
  .nav-actions{ display: flex; margin-left: var(--space-2); }
  .nav-toggle{ display: none; }
  .mobile-menu{ display: none !important; }
}

/* Hero -------------------------------------------------------------------- */

.hero{
  position: relative;
  z-index: 2;
  padding: var(--space-6) 0 var(--space-5);
}
.hero-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 960px){
  .hero-inner{ grid-template-columns: 1.15fr .85fr; gap: var(--space-5); }
}
.hero-copy{ max-width: 640px; }
.hero h1{ font-size: clamp(2.1rem, 5.5vw, 3.4rem); margin-bottom: var(--space-3); }
.hero .lead{ font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-secondary); max-width: 62ch; margin-bottom: var(--space-4); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: var(--space-5); }

.hero-badges{ display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; color: var(--text-tertiary); font-size: .82rem; }
.hero-badges li{ display: flex; align-items: center; gap: .5rem; }
.hero-badges svg{ width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }

/* Vertrauens-Leiste unterhalb des Hero-Bereichs (Nutzerwunsch 08.09.2026) -
   volle Breite statt auf die linke Hero-Spalte beschraenkt, damit sie wie
   im Referenzbild als eigene Zeile unter Text UND Roboter-Grafik sitzt. */
.trust-bar{
  margin-top: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 760px){
  .trust-bar{ grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}
.trust-bar__item{ display: flex; gap: .75rem; align-items: flex-start; }
.trust-bar__icon{
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
  background: rgba(var(--accent-rgb), .14); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.trust-bar__icon svg{ width: 20px; height: 20px; }
.trust-bar h3{ font-size: .92rem; margin-bottom: .2rem; }
.trust-bar p{ color: var(--text-secondary); font-size: .82rem; line-height: 1.4; margin: 0; }

/* Eingangsanimation: der Hero-Text blendet beim ersten Laden der Seite
   gestaffelt ein (reines CSS, laeuft sofort, unabhaengig vom Scroll-
   Reveal-System weiter unten, das erst greift sobald main.js geladen
   ist - so gibt es hier keinen Moment mit unsichtbarem Inhalt, falls
   JavaScript langsam startet oder deaktiviert ist). */
.hero-copy > *{
  opacity: 0;
  animation: hero-fade-up .8s cubic-bezier(.16, .84, .44, 1) forwards;
}
.hero-copy > *:nth-child(1){ animation-delay: .05s; }
.hero-copy > *:nth-child(2){ animation-delay: .16s; }
.hero-copy > *:nth-child(3){ animation-delay: .28s; }
.hero-copy > *:nth-child(4){ animation-delay: .4s; }
.hero-copy > *:nth-child(5){ animation-delay: .52s; }
@keyframes hero-fade-up{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Hero-Visual: Maskottchen-Roboter rechts neben dem Text (nur ab Tablet
   aufwaerts - auf Mobilgeraeten wuerde er den eigentlichen Text zu weit
   nach unten schieben). Ersetzt die fruehere Kachel-Liste (Nutzerfeedback
   01.09.2026: die Liste wiederholte inhaltlich nur die Leistungen-Kacheln
   knapp darunter) - eigenes Maskottchen-Bild statt Text-Duplikat. */
.hero-visual{ display: none; }
@media (min-width: 720px){
  .hero-visual{ display: block; }
}
.hero-robot{ position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-4) 0; }
.hero-robot::before{
  content: '';
  position: absolute;
  width: 68%;
  height: 68%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .38) 0%, rgba(var(--accent-rgb), 0) 72%);
  filter: blur(6px);
  z-index: 0;
}
.hero-robot__img{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  height: auto;
  animation: hero-robot-float 4.5s ease-in-out infinite;
}
@keyframes hero-robot-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}

/* Rotierendes Wort in der Hero-Ueberschrift (Nutzerwunsch 01.09.2026) */
.hero-rotate{ display: inline-block; color: var(--accent); transition: opacity .3s ease, transform .3s ease; }
.hero-rotate.is-swapping{ opacity: 0; transform: translateY(6px); }

/* Sections ------------------------------------------------------------- */

section{ position: relative; z-index: 2; padding: var(--space-5) 0; }
.section-head{ max-width: 640px; margin: 0 0 var(--space-4); }
.section-head h1, .section-head h2{ font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: .6rem; }
/* Nur fuer Screenreader/Suchmaschinen sichtbar - haelt die Ueberschriften-
   Hierarchie korrekt (z. B. Projektname als H2 unter der Seiten-H1), ohne
   das bestehende visuelle Design zu veraendern (Nutzerwunsch 08.09.2026,
   SEO-Ueberarbeitung: "semantische Struktur ergaenzen, Design unveraendert"). */
.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; }
.section-head p{ color: var(--text-secondary); }
.section-alt{ background: linear-gradient(180deg, rgba(16,24,40,0) 0%, rgba(16,24,40,.55) 12%, rgba(16,24,40,.55) 88%, rgba(16,24,40,0) 100%); }

/* Karten-Grid: Leistungen ------------------------------------------------- */

.grid{ display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px){ .grid--2{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
  .grid--4{ grid-template-columns: repeat(4, 1fr); }
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.card:hover{ border-color: rgba(var(--accent-rgb),.35); transform: translateY(-3px); background: var(--surface-2); }

.card__icon{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent-light);
  margin-bottom: 1rem;
}
.card__icon svg{ width: 22px; height: 22px; }
.card h3{ font-size: 1.05rem; margin-bottom: .5rem; }
.card p{ color: var(--text-secondary); font-size: .9rem; }

/* Schmaler Hinweis-/Verweis-Streifen innerhalb einer Sektion (z. B.
   Verweis auf das Reseller-Programm unterhalb der Leistungen-Kacheln) -
   bewusst schlanker als eine ganze .card, damit es wie ein Zusatz-Hinweis
   statt wie eine weitere gleichwertige Leistung wirkt. */
.inline-cta{
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.inline-cta p{ color: var(--text-secondary); font-size: .92rem; margin: 0; }
.inline-cta strong{ color: var(--text-primary); }
.inline-cta p a{ color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(var(--accent-rgb), .4); }
.inline-cta p a:hover{ text-decoration-color: var(--accent-light); }

/* Kompakte Link-Pillen (z. B. "6 weitere Produkte" auf der Startseite) -
   anklickbare Kurzverweise auf einzelne Produktseiten, ohne dafuer gleich
   eine ganze .card oder einen Flieastext mit Links zu brauchen. */
.chip-list{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.chip{
  display: inline-flex;
  align-items: center;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover{ border-color: var(--accent-light); color: var(--accent-light); background: rgba(var(--accent-rgb), .1); }

/* Wertversprechen (Ueber uns) --------------------------------------------- */

.value{ display: flex; gap: 1rem; align-items: flex-start; }
.value__icon{
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: rgba(var(--accent-rgb),.12); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.value__icon svg{ width: 20px; height: 20px; }
.value h3{ font-size: .98rem; margin-bottom: .3rem; }
.value p{ color: var(--text-secondary); font-size: .88rem; }

/* IT-Dienstleistungen: Liste ---------------------------------------------- */

.service-list{ display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 720px){ .service-list{ grid-template-columns: 1fr 1fr; } }
.service-item{ display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.service-item__icon{ width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; background: rgba(61,220,151,.12); color: var(--success); display: flex; align-items: center; justify-content: center; }
.service-item__icon svg{ width: 19px; height: 19px; }
.service-item h3{ font-size: .96rem; margin-bottom: .25rem; }
.service-item p{ color: var(--text-secondary); font-size: .87rem; }

/* Partner (Microsoft 365 / NFON) ------------------------------------------ */

.partner-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  align-items: center;
}
@media (min-width: 860px){
  .partner-card{ grid-template-columns: 1.3fr .7fr; padding: var(--space-4) var(--space-5); }
  .partner-card--reverse .partner-card__media{ order: -1; }
}
.partner-card + .partner-card{ margin-top: 1.1rem; }

.partner-card__badge{
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: .6rem 1rem;
  margin-bottom: 1.1rem;
}
.partner-card__badge img{ height: 38px; width: auto; }

.partner-card h3{ font-size: 1.3rem; margin-bottom: .7rem; }
.partner-card p{ color: var(--text-secondary); font-size: .95rem; margin-bottom: 1rem; }

.partner-card__list{ display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.3rem; }
.partner-card__list li{ display: flex; gap: .55rem; align-items: flex-start; color: var(--text-secondary); font-size: .89rem; }
.partner-card__list svg{ width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: .1rem; }
.zkm-flex-actions{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.partner-card__media{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
  max-width: 80%;
  margin: 0 auto;
}
.partner-card__media img{ width: 100%; height: auto; display: block; }

.partner-card__logo-panel{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}
.partner-card__logo-panel img{ width: 100%; max-width: 260px; height: auto; }

/* Projekte (z. B. Gameserver Austria) --------------------------------------
   Eigenstaendige Marken/Projekte werden bewusst in DEREN eigener Marken-
   farbe praesentiert (per Inline-Style/-Variable am jeweiligen
   .project-card gesetzt, Standard-Fallback ist unser eigener Akzent) statt
   in unserem Rot/Koralle - macht auf einen Blick klar, dass es sich um
   ein eigenstaendig gebrandetes Projekt handelt, nicht um eine ZKM-/
   salzburg.network-Leistung. */
.project-card{
  --pc-accent: var(--accent);
  --pc-accent-dark: var(--accent-dark);
  --pc-accent-rgb: var(--accent-rgb);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 860px){
  .project-card{ grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  .project-card__brand{ margin-top: 1.5rem; }
  .project-card__brand-logo{ height: 76px; }
}

.project-card__brand{ display: flex; align-items: center; gap: .9rem; }
.project-card__brand-logo{ height: 52px; width: auto; flex-shrink: 0; }

.project-status{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pc-accent);
  border: 1px solid rgba(var(--pc-accent-rgb), .4);
  padding: .35rem .75rem;
  margin-top: .9rem;
}
.project-status__dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--pc-accent); flex-shrink: 0; }

.project-card__tagline{ font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin: 1.1rem 0 .6rem; }
.project-card__desc{ color: var(--text-secondary); font-size: .94rem; margin-bottom: 1.2rem; }

.project-card__features{ display: grid; grid-template-columns: 1fr; gap: .55rem; margin-bottom: 1.3rem; }
@media (min-width: 560px){ .project-card__features{ grid-template-columns: 1fr 1fr; } }
.project-card__features li{ display: flex; gap: .5rem; align-items: flex-start; color: var(--text-secondary); font-size: .87rem; }
.project-card__features svg{ width: 16px; height: 16px; color: var(--pc-accent); flex-shrink: 0; margin-top: .1rem; }

.btn--project{
  background: linear-gradient(135deg, var(--pc-accent) 0%, var(--pc-accent-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--pc-accent-rgb), .35);
}
.btn--project:hover{ box-shadow: 0 10px 28px rgba(var(--pc-accent-rgb), .5); filter: brightness(1.08); }

/* Detailseiten (z. B. nfon.html/microsoft-365.html) ------------------------- */

.page-hero{ padding: var(--space-6) 0 var(--space-4); }
.page-hero__badge{ display: inline-block; background: #fff; border-radius: var(--radius-sm); padding: .55rem .9rem; margin-bottom: 1.2rem; }
.page-hero__badge img{ height: 24px; width: auto; }
.page-hero__content{ max-width: 720px; }
.page-hero h1{ font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1rem; }
.page-hero p{ color: var(--text-secondary); font-size: 1.05rem; max-width: 62ch; }
.page-hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
/* Dezenter Text-Link unter dem Bestellen-Button (Nutzerwunsch 08.09.2026) -
   Bestellen bleibt der einzige, klar gewichtete Button; "anfragen" ist fuer
   Unsichere weiterhin einen Klick entfernt, konkurriert aber nicht mehr
   optisch gleichwertig mit dem Bestellen-Button. */
.page-hero-hint{ margin-top: .9rem; font-size: .88rem; color: var(--text-secondary); }
.page-hero-hint a{ color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }

.steps{ display: grid; grid-template-columns: 1fr; gap: 1.75rem; counter-reset: step; }
@media (min-width: 720px){ .steps{ grid-template-columns: repeat(3, 1fr); } }
.step{ position: relative; }
.step::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), .4);
  margin-bottom: .6rem;
}
.step h3{ font-size: 1rem; margin-bottom: .4rem; }
.step p{ color: var(--text-secondary); font-size: .9rem; }

/* Haeufige-Fragen-Liste (Nutzerwunsch 08.09.2026, SEO-Ueberarbeitung) -
   natives details/summary, exakt dasselbe Interaktionsmuster wie das
   bestehende Mobile-Untermenue (.mobile-submenu), nur als eigenstaendige
   Karte je Frage statt eingerueckter Liste. */
.faq-list{ display: flex; flex-direction: column; gap: .75rem; }
.faq-item{ border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--surface); }
.faq-item summary{ cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; flex-shrink: 0; }
.faq-item[open] summary::after{ transform: rotate(-135deg); }
.faq-item p{ color: var(--text-secondary); font-size: .92rem; margin-top: .75rem; }

/* Kontakt ------------------------------------------------------------------ */

.contact-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (min-width: 720px){
  .contact-card{ flex-direction: row; align-items: center; justify-content: space-between; }
}
.contact-card h2{ font-size: 1.5rem; margin-bottom: .5rem; }
.contact-card p{ color: var(--text-secondary); max-width: 46ch; }
.contact-card__actions{ display: flex; flex-wrap: wrap; gap: .8rem; flex-shrink: 0; }

/* Footer -------------------------------------------------------------------- */

.site-footer{
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding: var(--space-4) 0 var(--space-3);
  color: var(--text-tertiary);
  font-size: .85rem;
}
.footer-grid{ display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 720px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand{ display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--text-primary); margin-bottom: .7rem; }
.footer-brand .brand-logo-img{ height: 28px; }
.footer-col h4{ font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: .8rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: .5rem; }
.footer-col a:hover{ color: var(--text-primary); }
.footer-bottom{ display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.footer-bottom::before{ content: "// "; color: var(--text-tertiary); }

/* Einfache Unterseiten (Impressum/Datenschutz) ----------------------------- */

.legal-page{ position: relative; z-index: 2; padding: var(--space-5) 0 var(--space-6); }
.legal-page .container{ max-width: 760px; }
.legal-page h1{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: var(--space-3); }
.legal-page h2{ font-size: 1.15rem; margin: var(--space-4) 0 .6rem; }
.legal-page p, .legal-page li{ color: var(--text-secondary); font-size: .95rem; margin-bottom: .7rem; }
.legal-page ul{ padding-left: 1.2rem; list-style: disc; }
/* Wiederverwendbarer "Zurueck"-Link, nicht nur auf Impressum/Datenschutz -
   auch auf den Partner-Detailseiten (nfon.html/microsoft-365.html) genutzt. */
.back-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
  padding: .55rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.back-link:hover{ border-color: var(--accent-light); color: var(--accent-light); background: rgba(var(--accent-rgb), .08); text-decoration: none; }
.back-link svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* Immer sichtbarer "Zur Startseite"-Button im Header von Impressum/
   Datenschutz - diese Seiten haben keine Hauptnavigation, daher hier
   unabhaengig von .nav-actions (das erst ab 900px sichtbar wird). */
.legal-nav-back{ margin-left: auto; flex-shrink: 0; }

/* Kopfzeile von AGB/Datenschutz: "Zurueck"-Link + "Als PDF speichern"-
   Button (Nutzerwunsch 08.09.2026) nebeneinander statt der Button haengt
   irgendwo ohne Bezug im Fliesstext. */
.legal-page-toolbar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: var(--space-4); }
.legal-page-toolbar .back-link{ margin-bottom: 0; }

.todo-note{
  background: rgba(240, 192, 76, .1);
  border: 1px solid rgba(240, 192, 76, .35);
  color: #f0c04c;
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-size: .85rem;
  margin-bottom: var(--space-4);
}

/* "Als PDF speichern" auf AGB/Datenschutz (Nutzerwunsch 08.09.2026) - kein
   Build-Step/Backend vorhanden, das echte PDFs erzeugen koennte, daher
   ueber die native Browser-Druckfunktion (window.print()) geloest: bleibt
   dadurch automatisch mit dem Live-Text synchron, statt eine separate,
   irgendwann veraltende PDF-Datei pflegen zu muessen. Diese Regeln
   formatieren die Druckansicht sauber (nur der eigentliche Dokumenttext,
   schwarz auf weiss), unabhaengig vom Seitenhintergrund/Dark-Design.
   .no-print blendet zusaetzlich einzelne Elemente (z. B. den PDF-Button
   selbst) nur im Ausdruck aus. */
.no-print{}
@media print{
  .site-header, .site-footer, #network-bg, .bg-orbs, #scrollProgress,
  .cc-overlay, .site-banner, .no-print{ display: none !important; }
  body{ background: #fff; color: #000; }
  .legal-page{ padding: 0; }
  .legal-page .container{ max-width: 100%; }
  .legal-page h1, .legal-page h2{ color: #000; }
  .legal-page p, .legal-page li{ color: #111; }
  .legal-page a{ color: #000; text-decoration: underline; }
}

/* Scroll-Fortschrittsbalken ------------------------------------------------
   Duenne Leiste ganz oben (ueber dem Header), Breite folgt per JS
   (main.js) dem Scroll-Fortschritt der Seite - dezenter, aber lebendiger
   Hinweis darauf, wie weit man schon gescrollt hat. */
#scrollProgress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
  z-index: 30;
  transition: width .1s linear;
}

/* Scroll-Reveal --------------------------------------------------------
   Elemente mit dieser Klasse starten leicht nach unten versetzt/
   unsichtbar und werden per IntersectionObserver (main.js) beim
   Eintritt in den Viewport eingeblendet - macht die Seite beim Scrollen
   lebendiger, ohne dass Inhalte fuer Nutzer ohne JS verloren gehen
   (Grundzustand ohne ".js-reveal" auf <html> bleibt vollstaendig sichtbar). */
html.js-reveal .reveal-up{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js-reveal .reveal-up.is-visible{ opacity: 1; transform: translateY(0); }

/* Innerhalb eines Grids/einer Liste nacheinander statt gleichzeitig
   einblenden - reine CSS-Staffelung über :nth-child, kein JS pro Karte. */
html.js-reveal .reveal-stagger > *{ transition-delay: 0s; }
html.js-reveal .reveal-stagger > *:nth-child(2){ transition-delay: .08s; }
html.js-reveal .reveal-stagger > *:nth-child(3){ transition-delay: .16s; }
html.js-reveal .reveal-stagger > *:nth-child(4){ transition-delay: .24s; }
html.js-reveal .reveal-stagger > *:nth-child(5){ transition-delay: .32s; }
html.js-reveal .reveal-stagger > *:nth-child(6){ transition-delay: .4s; }
html.js-reveal .reveal-stagger > *:nth-child(7){ transition-delay: .48s; }
html.js-reveal .reveal-stagger > *:nth-child(8){ transition-delay: .56s; }
html.js-reveal .reveal-stagger > *:nth-child(9){ transition-delay: .64s; }

/* Barrierefreiheit: Bewegung reduzieren -------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn:hover{ transform: none; }
  .card:hover{ transform: none; }
  html.js-reveal .reveal-up{ opacity: 1; transform: none; transition: none; }
  #scrollProgress{ transition: none; }
  .eyebrow::before{ animation: none; }
  .bg-orbs span{ animation: none; }
  .hero-copy > *{ opacity: 1; animation: none; }
  .hero-robot__img{ animation: none; }
  .hero-rotate{ transition: none; }
}

/* Cluster-Typen (Root-Server) ------------------------------------------
   Nutzerwunsch 14.09.2026: Kunden sollen schon VOR dem Konfigurator
   wissen, welche drei CPU-Typen es gibt, wofuer sich welcher eignet und
   wie sie preislich zueinander stehen. Bewusst eigenes Bauteil statt
   .card: hier braucht jede Karte eine Kopfzeile (Typ + CPU-Modell), eine
   "Ideal fuer"-Liste und eine Kennwert-Fusszeile - dafuer ist .card zu
   schlicht. Die mittlere Karte ist hervorgehoben (--featured). */
.cluster-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: start;
}
@media (min-width: 900px){
  .cluster-grid{ grid-template-columns: repeat(3, 1fr); }
}

.cluster-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.3rem;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.cluster-card:hover{
  border-color: rgba(var(--accent-rgb), .35);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.cluster-card--featured{
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--surface-2);
}

.cluster-card__tag{
  position: absolute;
  top: -.7rem;
  left: 1.4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
}
.cluster-card--featured .cluster-card__tag{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cluster-card__name{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: .4rem 0 .15rem;
}
.cluster-card__cpu{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-tertiary);
  margin-bottom: .9rem;
  word-break: break-word;
}
/* Preis bewusst weit oben, direkt unter dem CPU-Modell (Nutzerwunsch
   14.09.2026) - beim Vergleich der drei Karten ist der Preis die
   Kennzahl, nach der zuerst gesucht wird; vorher stand er ganz unten in
   der Kennwert-Fusszeile und war erst nach dem Lesen sichtbar. */
.cluster-card__price{
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.cluster-card__price-prefix{
  font-size: .8rem;
  color: var(--text-tertiary);
}
.cluster-card__price-value{
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.cluster-card--featured .cluster-card__price-value{ color: var(--accent-light); }
.cluster-card__price-suffix{
  font-size: .8rem;
  color: var(--text-tertiary);
}

.cluster-card__lead{
  color: var(--text-secondary);
  font-size: .9rem;
  margin: 0 0 1.1rem;
}

.cluster-card__label{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: .55rem;
}
.cluster-card__list{
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.cluster-card__list li{
  position: relative;
  padding-left: 1.4rem;
  font-size: .88rem;
  color: var(--text-secondary);
}
.cluster-card__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .55);
}
.cluster-card--featured .cluster-card__list li::before{ background: var(--accent); }

.cluster-card__specs{
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.cluster-card__spec{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  font-size: .85rem;
}
.cluster-card__spec dt{ color: var(--text-tertiary); margin: 0; }
.cluster-card__spec dd{ margin: 0; font-weight: 600; text-align: right; }

/* Hinweis auf die geringere Anbindung des RYZEN-Clusters - bewusst
   sichtbar hervorgehoben statt nur in der Kennwert-Zeile, damit niemand
   mit hohem Datendurchsatz versehentlich den falschen Cluster waehlt. */
.cluster-card__note{
  margin: .75rem 0 0;
  font-size: .78rem;
  color: var(--text-tertiary);
  line-height: 1.45;
}

/* Zahlen-Band ----------------------------------------------------------
   Kurzer Kennzahlen-Streifen direkt unter dem Hero (Umbau 14.09.2026).
   Bewusst nur belegbare Angaben - siehe Kommentar in index.html. */
/* Zahlen-Zeile als Kopf der trust-bar (Umbau 14.09.2026): urspruenglich
   eine eigene Karte unter dem Hero - zwei identisch gestaltete Kaesten
   untereinander wirkten wie ein Versehen, daher jetzt beides in EINER
   Karte, getrennt durch eine Trennlinie. Spannt im 4-spaltigen
   trust-bar-Raster ueber die volle Breite. */
.trust-bar__stats{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 760px){
  .trust-bar__stats{ grid-template-columns: repeat(4, 1fr); }
}
.stat-band__item{ text-align: center; }
.stat-band__value{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
}
.stat-band__label{
  display: block;
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--text-secondary);
}

/* FAQ-Seite: Sprungmarken zu den Themenbereichen ------------------------ */
.faq-jump{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--space-4);
}
.faq-jump a{
  padding: .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--text-secondary);
  background: var(--surface);
}
.faq-jump a:hover{
  border-color: rgba(var(--accent-rgb), .45);
  color: var(--text-primary);
}
/* Bugfix 14.09.2026: .faq-list setzt den Abstand per "gap", das greift
   aber nur auf direkte Kinder - auf der FAQ-Seite liegen die Fragen eine
   Ebene tiefer in .faq-group, standen dadurch ohne Abstand aneinander.
   Die Gruppe bekommt deshalb ihren eigenen Spaltenfluss mit gap. */
.faq-group{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: var(--space-5);
}
.faq-group__title{
  font-family: var(--font-display);
  font-size: 1.15rem;
  /* Abstand nach unten kommt aus dem gap der Gruppe (siehe oben), hier
     nur ein kleiner Zuschlag, damit die Ueberschrift etwas absetzt. */
  margin: 0 0 .35rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.faq-group__title a{ color: var(--text-tertiary); font-size: .8rem; font-weight: 400; float: right; }
.faq-group__title a:hover{ color: var(--accent-light); }
.faq-item__src{ margin: .6rem 0 0; font-size: .82rem; }
.faq-item__src a{ color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(var(--accent-rgb), .4); }
.faq-item__src a:hover{ text-decoration-color: var(--accent-light); }