/*
 * Design-Tokens auf Basis der verifizierten AS-Concepts-CI-Analyse
 * (Elementor-Kit-Konfiguration der bestehenden Website).
 * Primär/Sekundär/Text/Akzent sind reale Markenwerte, keine Annahme.
 * 1:1 übernommen aus der bisherigen Next.js-Umsetzung (globals.css).
 */
:root {
  --color-ink: #191c20;
  --color-ink-soft: #4b565b;
  --color-ink-mute: #69727d;
  --color-paper: #ffffff;
  --color-band: #f4f6f6;
  --color-surface: #ffffff;
  --color-line: #e1e5e5;

  --color-dark: #191c20;
  --color-dark-2: #20262c;
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-cream: #ffffff;
  --color-cream-soft: rgba(255, 255, 255, 0.72);
  --color-cream-mute: rgba(255, 255, 255, 0.5);

  --color-teal: #00f0ff;
  --color-teal-deep: #3f8288;

  --color-cyan: #00f0ff;
  --color-mint: #00ff9f;
  --color-purple: #8a4dff;
  --color-orange: #ff7a00;

  --color-warn: #b5432e;

  /* Leistungsfarben: Strategie grün, Marketing hell-lila, Vertrieb türkis (Nutzerin, 02.11.2026; gilt für Menü, Heros, Übersicht und Startseite) */
  --color-cat-strategie: #00ff9f;
  --color-cat-marketing: #8a4dff;
  --color-cat-vertrieb: var(--color-teal);

  /* Pro Leitfarbe sechs ähnliche Farben (Nutzerin, 02.11.2026): Farbton in Schritten von ca. 10 Grad, Sättigung und
     Helligkeit fast gleich, damit Karten und Kacheln abwechseln können, ohne dass die Seite bunt wirkt. Die Leitfarbe
     selbst (--color-cat-*) steht jeweils an einer Stelle der Reihe. Auf dunklem Grund alle über 5:1. */
  --color-cat-strategie-1: #1fff5a;
  --color-cat-strategie-2: #0cff78;
  --color-cat-strategie-3: #00ff90;
  --color-cat-strategie-4: #00ff9f; /* = Leitfarbe */
  --color-cat-strategie-5: #00f8c0;
  --color-cat-strategie-6: #00f0dc;
  --color-cat-marketing-1: #5c7cff;
  --color-cat-marketing-2: #7068ff;
  --color-cat-marketing-3: #8a4dff; /* = Leitfarbe */
  --color-cat-marketing-4: #9245ff;
  --color-cat-marketing-5: #9a40ff;
  --color-cat-marketing-6: #a23bff;
  --color-cat-vertrieb-1: #00f5d8;
  --color-cat-vertrieb-2: #00f0ff; /* = Leitfarbe */
  --color-cat-vertrieb-3: #00dcff;
  --color-cat-vertrieb-4: #00c8ff;
  --color-cat-vertrieb-5: #14b4ff;
  --color-cat-vertrieb-6: #2ea0ff;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-sans: "Work Sans", system-ui, sans-serif;
  --font-slab: "Roboto Slab", Georgia, serif;

  /* Deckungsgleich mit dem Inhaltsstreifen des Startseiten-Heros
     (.hero__inner: max-width 1345px, padding-inline 64px). Bei .container
     mit padding-inline 2.5rem ergibt 81rem dieselben Inhaltskanten. */
  --container-max: 81rem;
  --header-height: 80px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin: 0;
}

::selection {
  background: var(--color-teal);
  color: var(--color-dark);
}

.balance {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Silbentrennung in Ueberschriften nur bei langen Woertern (ab 10 Zeichen)
   und mit mindestens 4 Buchstaben vor und 5 nach dem Strich. Verhindert
   "zwi-schen", "Er-kenntnis", "B2B-Un-ternehmen" oder "zusammenge-hört". */
h1, h2, h3 {
  hyphenate-limit-chars: 10 4 5;
}

/* Mobil: lange Komposita (z. B. "Neukundengewinnung") mit Trennstrich an der
   Silbengrenze brechen statt mitten im Wort ohne Strich. */
@media (max-width: 599px) {
  .keep-compound {
    hyphens: manual;
  }

  h1.balance,
  h2.balance,
  h3.balance,
  .testimonial-card__quote.balance {
    hyphens: auto;
  }
}

.container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 2.5rem;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Tastatur-Fokus, funktioniert auf hellen und dunklen Sektionen
   (teal-deep hält den Kontrast auf beiden Untergründen). Die spezielleren
   :focus-visible-Regeln einzelner Komponenten (z. B. Branchen-Slider) haben
   Vorrang. */
:focus-visible {
  outline: 2px solid var(--color-teal-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

/* Skip-Link: erstes fokussierbares Element der Seite (partials/header.html),
   liegt außerhalb des Viewports und klappt bei Tastatur-Fokus oben ein. */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  border-radius: 0 0 6px 6px;
  background: var(--color-dark);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-cream);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline-offset: -2px;
}

/* Scroll-Reveal: Basiszustand, wird von js/reveal.js aktiviert (siehe js/reveal.js).
   2rem statt der ursprünglichen 0.375rem, weil die kleine Distanz besonders in
   Kombination mit dem gestaffelten Karten-Reveal (data-reveal-group) praktisch
   nicht wahrnehmbar war, Nutzer-Feedback: "ich sehe ehrlich keinen Unterschied". */
[data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal-Varianten: data-reveal="left" | "right" | "zoom" (Standard: von unten). */
[data-reveal="left"] {
  transform: translateX(-2.5rem);
}

[data-reveal="right"] {
  transform: translateX(2.5rem);
}

[data-reveal="zoom"] {
  transform: translateY(3rem) scale(0.86);
  transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal].is-visible {
  transform: none;
}


/* Kundentypen-Seiten: je sechs ähnliche Farben (02.11.2026) */
:root {
  --color-kt-cyan-1: #00f5d8;
  --color-kt-cyan-2: #00f2ec;
  --color-kt-cyan-3: #00f0ff;
  --color-kt-cyan-4: #00d8ff;
  --color-kt-cyan-5: #0cc4ff;
  --color-kt-cyan-6: #28b0ff;
  --color-kt-mint-1: #14ff66;
  --color-kt-mint-2: #06ff84;
  --color-kt-mint-3: #00ff90;
  --color-kt-mint-4: #00ff9f;
  --color-kt-mint-5: #00f8bc;
  --color-kt-mint-6: #00f0dc;
  --color-kt-orange-1: #ff9900;
  --color-kt-orange-2: #ff8e00;
  --color-kt-orange-3: #ff8400;
  --color-kt-orange-4: #ff7a00;
  --color-kt-orange-5: #ff7000;
  --color-kt-orange-6: #ff6600;
  --color-kt-purple-1: #5c7cff;
  --color-kt-purple-2: #7068ff;
  --color-kt-purple-3: #8a4dff;
  --color-kt-purple-4: #9245ff;
  --color-kt-purple-5: #9a40ff;
  --color-kt-purple-6: #a23bff;
}