/* VituraWeb-Design-System — Klassen, die über mehrere Komponenten hinweg
   identisch aussehen müssen (Mockup: Design-Tokens.md, VituraWeb B2B-Redesign).
   Werte ausschließlich über die Tokens aus tokens.css. */

/* ---------- Wrapper & Raster ---------- */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Zweispalter: Inhalt + enges Seitenteil (Hero, CTA) */
.cols {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}

.cols--duo {
  grid-template-columns: 1fr 1fr;
}

/* 3er-Reihen für Features/Abläufe */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

/* 2er-Reihen (Kernkompetenzen) */
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* 12-Grid für Kacheln */
.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.span-7 {
  grid-column: span 7;
}

.span-5 {
  grid-column: span 5;
}

.stack {
  display: grid;
  gap: 24px;
}

/* ---------- Sektionsrhythmus ---------- */

.section {
  padding: 64px 0 24px;
  border-top: 1px solid var(--color-text);
}

.section--top {
  padding-top: 64px;
}

.section--flush {
  padding: 80px 0;
}

.section--tight {
  padding: 24px 0 72px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.section-head .h2 {
  margin: 0;
}

.section-note {
  margin: 0;
  color: var(--color-label);
  font-size: 15px;
}

/* Trägerband (Netzwerk-Teaser) */
.band {
  background: var(--color-band);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

/* ---------- Typografie ---------- */

.eyebrow {
  margin: 0 0 24px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-label);
}

.h1 {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 18ch;
}

.h1--xl {
  font-size: 58px;
  line-height: 1.08;
  margin-bottom: 28px;
  max-width: 16ch;
}

/* Kleine Sektions-Label (kapitäl) */
.h2 {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 40px;
}

/* Große Statements (CTA-Band, Bänder) */
.statement {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 22ch;
}

.statement--xl {
  font-size: 38px;
  max-width: 20ch;
}

.statement--md {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 58ch;
  margin: 0;
}

.lead--sm {
  font-size: 17px;
  max-width: 52ch;
}

.body-text {
  font-size: 16px;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- Buttons & Links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent);
}

/* Überschreibt die generische a:hover-Regel (tokens.css) gezielt: die färbt
   sonst auch den Button-Text auf --color-primary um, was auf der
   --color-accent-Fläche kaum noch lesbar ist (~1.9:1). Fläche stattdessen
   auf die dunklere primary-Fläche abdunkeln, Text bleibt accentContrast —
   dieselbe Kombination wie bei den dunklen Fokus-Kacheln, also bereits
   geprüft kontraststark. */
.btn--primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-accent-contrast);
}

/* Dark Mode: Das Light-Mode-Muster (Fläche dunkelt auf --color-primary ab)
   funktioniert hier nicht — jede Fläche, die dunkel genug für weißen Text
   bleibt, liegt zu nah am dunklen Seitenhintergrund (#004c6d vs. #14181b
   nur 1.92:1 statt der nötigen 3:1 Abgrenzung). Stattdessen dasselbe
   Outline-Hover-Muster wie .btn--secondary: Fläche transparent, Kante und
   Text in --color-accent-text. Siehe Spec, Abschnitt "Sonderfälle". */
[data-theme="dark"] .btn--primary:hover {
  background: transparent;
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Gleiches Hover-Muster wie navlink (DESIGN.md): Grenze accent, Farbe
   --color-accent-text-hover — hier explizit statt über die generische
   a:hover-Regel, damit Button-Zustände nicht von globalen Link-Styles
   abhängen. */
.btn--secondary:hover {
  color: var(--color-accent-text-hover);
  border-color: var(--color-accent);
}

.btn--block {
  width: 100%;
  min-height: 52px;
}

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Textlink mit Unterlinie (Kacheln, Bänder) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  width: fit-content;
}

/* ---------- Feature-Reihen (01 / 02 / 03) ---------- */

.feature {
  border-top: 1px solid var(--color-hairline);
  padding: 20px 0 0;
}

.feature .num {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-text);
}

.feature h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.feature p {
  font-size: 16px;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- Spec-Listen ---------- */

/* Enges Seitenteil (Hero/Netzwerk): 96px-Labels */
.specs {
  margin: 0;
}

.specs > div {
  border-top: 1px solid var(--color-hairline);
  padding: 16px 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}

.specs > div:last-child {
  border-bottom: 1px solid var(--color-hairline);
}

.specs dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
  padding-top: 3px;
}

.specs dd {
  margin: 0;
  font-size: 15px;
}

/* Gekastete Zeilen (Technik-/Umfang-Listen der Leistungsseiten) */
.specbox {
  margin: 0;
  border: 1px solid var(--color-hairline);
}

.specbox > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 28px;
}

.specbox > div + div {
  border-top: 1px solid var(--color-hairline);
}

.specbox dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
  padding-top: 3px;
}

.specbox dd {
  margin: 0;
  font-size: 16px;
}

/* Zeitleiste (Werdegang): Jahr + Überschrift + Text, ohne Kasten */
.specrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--color-hairline);
}

.specrow dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent-text);
}

.specrow dd {
  margin: 0;
}

.specrow h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.specrow p {
  font-size: 16px;
  color: var(--color-muted);
  max-width: 70ch;
  margin: 0;
}

/* ---------- Kacheln ---------- */

.tile {
  border: 1px solid var(--color-hairline);
  padding: 28px 32px;
}

.tile h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.tile p {
  font-size: 16px;
  color: var(--color-muted);
  margin: 0 0 16px;
}

.tile--dark {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  background: var(--color-surface-strong);
  color: var(--color-accent-contrast);
  border: none;
  padding: 40px;
}

/* Registermarken („+"-Schnitte) an den Ecken dunkler Flächen */
.tile--dark::before,
.tile--dark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: color-mix(
    in srgb,
    var(--color-accent-contrast) 55%,
    transparent
  );
}

.tile--dark::before {
  left: 12px;
  top: 12px;
  border-left: 1px solid;
  border-top: 1px solid;
}

.tile--dark::after {
  right: 12px;
  bottom: 12px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.tile--dark .tile-eyebrow {
  margin: 0 0 auto;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-primary-strong);
}

.tile--dark h3 {
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 32px 0 14px;
  color: var(--color-accent-contrast);
}

.tile--dark p {
  font-size: 17px;
  color: var(--color-on-primary);
  max-width: 44ch;
  margin-bottom: 24px;
}

/* Dark Mode: --color-on-primary/-strong sind exakt auf die Light-Mode-
   Fläche #004c6d gemessen (7.52:1 / 6.85:1) und fallen auf der helleren
   --color-surface-strong-Fläche (#0077a8, Dark Mode) unter AA (gemessen:
   4.03:1 / 3.67:1) — siehe Spec, Abschnitt "Sonderfälle". Einheitlich Weiß
   verwenden, dieselbe bereits geprüfte Kombination wie Kachel-Überschrift
   und Buttons (5.0:1). */
[data-theme="dark"] .tile--dark .tile-eyebrow,
[data-theme="dark"] .tile--dark p {
  color: var(--color-accent-contrast);
}

/* .link-arrow nutzt color: inherit, wird aber von der generischen a:hover-
   Regel (tokens.css) auf --color-accent-text-hover überschrieben. Auf der
   dunklen Kachelfläche (--color-surface-strong) ergibt das zu wenig
   Kontrast (~2.7:1, siehe Review-Fund) — stattdessen Weiß wie der Rest des
   Kachel-Texts verwenden. */
.tile--dark a:hover {
  color: var(--color-accent-contrast);
}

.tile--md {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  padding: 36px;
}

.tile--md h3 {
  font-size: 28px;
  margin: 28px 0 12px;
}

.tile--md p {
  margin-bottom: 0;
}

.tile--light-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-label);
}

/* ---------- Subnavigation (Leistungen) ---------- */

.subnav {
  border-bottom: 1px solid var(--color-hairline);
}

.subnav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0 36px;
  flex-wrap: wrap;
}

.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  text-decoration: none;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
}

.subnav a:hover {
  color: var(--color-accent-text-hover);
  border-bottom-color: var(--color-accent);
}

.subnav a[aria-current="page"] {
  font-weight: 700;
  color: var(--color-accent-text-hover);
  border-bottom-color: var(--color-accent);
}

/* Info-Kästen auf der Kontaktseite */
.info-box {
  border: 1px solid var(--color-hairline);
  padding: 28px;
}

.info-box h2 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
  margin: 0 0 16px;
  font-weight: 700;
}

/* ---------- Rechtstexte ---------- */

.prose h2 {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}

.prose h3 {
  font-size: 20px;
  margin: 32px 0 12px;
}

.prose p,
.prose li {
  font-size: 16px;
  color: var(--color-muted);
}

.prose ul {
  padding-left: 24px;
}

.prose a {
  color: var(--color-accent-text);
}

/* ---------- Mobile (Umbruch 700px, im Mockup Container-Query) ---------- */

@media (max-width: 700px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .cols-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cols-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tiles {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .span-7,
  .span-5 {
    grid-column: auto;
  }

  .h1,
  .h1--xl {
    font-size: 34px;
  }

  .h2 {
    font-size: 15px;
  }

  .statement,
  .statement--xl {
    font-size: 28px;
  }

  .lead {
    font-size: 17px;
  }

  .section {
    padding-top: 44px;
  }

  .section--flush {
    padding: 44px 0;
  }

  .section--tight {
    padding: 16px 0 44px;
  }

  .specbox > div,
  .specrow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .specbox > div {
    padding: 14px 18px;
  }

  .subnav ul {
    gap: 0 18px;
  }
}