/* Simply42 – Gestaltung nach handover/styleguide/STYLEGUIDE.md.
   Farben, Abstände und Schriftrollen kommen aus css/tokens.css (generiert aus tokens.yaml):
   --c-*  Farben · --sp-* Raster · --fs-/--lh-/--fw-/--ls-<rolle> Schriftrolle · --tc-<rolle> Rollenfarbe
   (unter .navy automatisch die Navy-Variante). Breakpoints (tokens.yaml): 940 / 720 / 520 px. */

/* ---------- Schrift (selbst gehostet, SIL OFL) ---------- */
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/open-sans-latin-800-normal.woff2") format("woff2"); }

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

html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-fliesstext);
  font-weight: var(--fw-fliesstext);
  line-height: var(--lh-fliesstext);
  color: var(--tc-fliesstext);
  background: var(--c-light-bg);
  hyphens: auto;
  overflow-wrap: break-word;
  /* Flächen-Variablen: .navy überschreibt sie. */
  --line: var(--c-light-line);
  --link: var(--c-light-accent-ink);
  --focus: var(--c-light-accent-ink);
  --surface: var(--c-light-surface);
  --measure: 64ch; /* Fließtext ≤ 75 Zeichen je Zeile */
}

/* Dunkle Flächen: Aufmacher, Seitenkopf, Souveränität, Fuß. Rollenfarben kommen aus tokens.css (.navy). */
.navy {
  background: var(--c-marke-navy);
  color: var(--tc-fliesstext);
  --line: color-mix(in srgb, var(--c-light-on-navy) 18%, transparent);
  --link: var(--c-marke-blau-hell);
  --focus: var(--c-marke-blau-hell);
  --surface: var(--c-marke-navy);
}

/* Überschriften: nie getrennt, ausgewogen umbrochen, nie blau (außer <em> im h2). */
h1, h2, h3 {
  margin: 0 0 var(--sp-14);
  hyphens: manual;
  text-wrap: balance;
}
h1 { font-size: var(--fs-seitentitel); font-weight: var(--fw-seitentitel); line-height: var(--lh-seitentitel); color: var(--tc-seitentitel); }
h2 { font-size: var(--fs-abschnittstitel); font-weight: var(--fw-abschnittstitel); line-height: var(--lh-abschnittstitel); color: var(--tc-abschnittstitel); }
h3 { font-size: var(--fs-bausteintitel); font-weight: var(--fw-bausteintitel); line-height: var(--lh-bausteintitel); color: var(--tc-bausteintitel); }
h2 em { font-style: normal; color: var(--tc-hervorhebung); }

p, ul, ol, dl { margin: 0 0 var(--sp-14); }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }
address { font-style: normal; }
strong { font-weight: 700; }

.eyebrow {
  margin: 0 0 var(--sp-7);
  font-size: var(--fs-mikrolabel-eyebrow);
  font-weight: var(--fw-mikrolabel-eyebrow);
  line-height: var(--lh-mikrolabel-eyebrow);
  letter-spacing: var(--ls-mikrolabel-eyebrow);
  color: var(--tc-mikrolabel-eyebrow);
  text-transform: uppercase;
  hyphens: manual;
}
.lead { font-size: var(--fs-einleitung); font-weight: var(--fw-einleitung); line-height: var(--lh-einleitung); color: var(--tc-einleitung); }
.meta { font-size: var(--fs-sekundaertext); line-height: var(--lh-sekundaertext); color: var(--tc-sekundaertext); }

/* Textlinks: unterstrichen, bei Hover wächst eine Linie von links. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 0.25s ease, text-decoration-color 0.25s ease;
}
a:hover, a:focus-visible { background-size: 100% 2px; text-decoration-color: transparent; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: var(--sp-10);
  top: -100px;
  z-index: 10;
  padding: var(--sp-10) var(--sp-14);
  background: var(--c-marke-navy);
  color: var(--c-light-on-navy);
  font-weight: 700;
}
.skip-link:focus { top: var(--sp-10); }

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

/* Primär-Button: blaue Fläche, Navy-Text (nie Weiß), bei Hover wächst eine Navy-Linie von links. */
.button, .hero p:not(.hero-phone) > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--sp-7) var(--sp-22);
  background-color: var(--c-marke-blau);
  background-image: linear-gradient(var(--c-marke-navy), var(--c-marke-navy));
  background-size: 0 3px;
  color: var(--c-marke-navy);
  font-weight: 700;
  text-decoration: none;
  transition: background-size 0.25s ease;
}
.button:hover, .button:focus-visible,
.hero p:not(.hero-phone) > a:only-child:hover, .hero p:not(.hero-phone) > a:only-child:focus-visible { background-size: 100% 3px; }

/* Weiterführende Links („Wie wir …“): kräftiger Textlink mit Touch-Höhe, keine Schaltfläche. */
.section-body > p > a:only-child {
  display: inline-block;
  padding: var(--sp-7) 0;
  font-weight: 700;
  text-decoration-thickness: 2px;
}

/* ---------- Kopf ---------- */
.site-header {
  background: var(--c-light-surface);
  border-bottom: 1px solid var(--c-light-line);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10) var(--sp-28);
  min-height: 76px;
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.brand { display: inline-flex; background: none; }
.brand img { display: block; width: auto; height: 40px; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--sp-10);
  color: var(--c-light-ink-strong);
  font-weight: 600;
  text-decoration: none;
  background-size: 0 3px;
  background-position: 0 calc(100% - 6px);
}
.site-header nav a:hover, .site-header nav a:focus-visible, .site-header nav a[aria-current="page"] { background-size: calc(100% - 2 * var(--sp-10)) 3px; background-position: var(--sp-10) calc(100% - 6px); }
.site-header nav a[aria-current="page"] { background-image: linear-gradient(var(--c-marke-blau), var(--c-marke-blau)); }

/* ---------- Aufmacher (Startseite) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-56) 0 calc(var(--sp-56) + var(--sp-22));
}
/* Einziges Dekor auf Navy: sehr transparenter Blau-Glow. */
.hero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: 55vw;
  max-width: 760px;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-marke-blau) 22%, transparent), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .with-eyebrow { margin-bottom: var(--sp-28); }
.hero h1 {
  max-width: 18ch;
  margin: 0;
  font-size: var(--fs-aufmacher);
  font-weight: var(--fw-aufmacher);
  line-height: var(--lh-aufmacher);
  letter-spacing: var(--ls-aufmacher);
  color: var(--tc-aufmacher);
}
/* Claim (Unterzeile): Weiß, ohne Akzentkante. */
.hero .with-eyebrow + p {
  max-width: 40ch;
  margin: 0 0 var(--sp-22);
  font-size: var(--fs-unterzeile);
  font-weight: var(--fw-unterzeile);
  line-height: var(--lh-unterzeile);
  color: var(--tc-unterzeile);
}
.hero .with-eyebrow + p strong { font-weight: inherit; }
.hero .with-eyebrow + p + p { max-width: var(--measure); font-size: var(--fs-einleitung); line-height: var(--lh-einleitung); color: var(--tc-einleitung); }
/* Handlungsaufforderung und Telefon (Sekundärhandlung) nebeneinander. */
.hero .wrap > p:has(> a:only-child) { display: inline-block; margin: var(--sp-28) var(--sp-28) 0 0; vertical-align: middle; }
.hero-phone a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--c-light-on-navy); font-weight: 700; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-head { padding: var(--sp-44) 0; }
.page-head h1 { max-width: 24ch; }
.page-head p { max-width: var(--measure); font-size: var(--fs-einleitung); line-height: var(--lh-einleitung); color: var(--tc-einleitung); }

/* ---------- Abschnitte ---------- */
.section { padding: var(--sp-56) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section.navy + .section, .section + .section.navy { border-top: 0; }
.section-head { margin-bottom: var(--sp-36); }
.section-head h2 { max-width: 28ch; margin: 0; }
.section-body > p, .section-body > ul:not(.cards), .section-body > ol:not(.levels), .section-body .with-eyebrow { max-width: var(--measure); }
.section-body > ul:not(.cards) li { margin-bottom: var(--sp-7); }
.section-body h3 { margin-top: var(--sp-44); }
.section-body > :first-child { margin-top: 0; }
.with-eyebrow > :last-child { margin-bottom: 0; }
.section-body .with-eyebrow { margin-bottom: var(--sp-22); }

/* Zwei Textspalten (Kernbotschaft, Abgrenzung). */
.zweispaltig .section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-22) var(--sp-56);
}
.zweispaltig .section-body > p:last-child:not(:nth-child(2)) { grid-column: 1 / -1; }
.zweispaltig .section-body > .with-eyebrow { margin: 0; }

/* Inhaltsblock mit linker Akzentkante (Team). */
.akzent .section-body { max-width: calc(var(--measure) + var(--sp-22) + 4px); padding-left: var(--sp-22); border-left: 4px solid var(--c-marke-blau); }

/* ---------- Karten (Leistungsbausteine, Referenzen, Standorte) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-14);
  margin: 0 0 var(--sp-28);
  padding: 0;
  list-style: none;
}
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  padding: var(--sp-22);
  background: var(--c-light-surface);
  border: 1px solid var(--c-light-line);
  border-left: 3px solid var(--c-marke-blau);
  color: var(--c-light-ink);
}
.card h3, .card .card-title { margin: 0 0 var(--sp-7); font-size: var(--fs-bausteintitel); font-weight: var(--fw-bausteintitel); line-height: var(--lh-bausteintitel); color: var(--c-light-ink-strong); }
.card p { margin: 0; }
.card .card-meta { margin-bottom: var(--sp-7); font-size: var(--fs-sekundaertext); color: var(--c-light-muted); }
.cards--plain .card { border-left-width: 1px; border-left-color: var(--c-light-line); }
.navy .card { border-color: var(--line); border-left-color: var(--c-marke-blau); }

/* ---------- Technologien ---------- */
.tech-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-28);
  margin: 0;
}
.tech-groups dt {
  padding-bottom: var(--sp-7);
  border-bottom: 3px solid var(--c-marke-blau);
  font-size: var(--fs-mikrolabel-eyebrow);
  font-weight: var(--fw-mikrolabel-eyebrow);
  letter-spacing: var(--ls-mikrolabel-eyebrow);
  color: var(--tc-mikrolabel-eyebrow);
  text-transform: uppercase;
}
.tech-groups dd { margin: 0; padding: var(--sp-7) 0; border-bottom: 1px solid var(--line); font-weight: 600; }

.platform { margin: 0; max-width: var(--measure); }
.platform div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--sp-14);
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--line);
}
.platform div:last-child { border-bottom: 1px solid var(--line); }
.platform dt { font-weight: 700; color: var(--tc-bausteintitel); }
.platform dd { margin: 0; }

/* ---------- Souveränität: fünf Ebenen ---------- */
.levels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-22);
  margin: var(--sp-36) 0;
  padding: 0;
  list-style: none;
  counter-reset: ebene;
}
.levels li { padding-left: var(--sp-14); border-left: 3px solid var(--c-marke-blau); }
.levels .eyebrow { margin-bottom: var(--sp-7); }
.levels .level-claim { margin: 0; font-weight: 700; color: var(--tc-bausteintitel); }
.levels--full {
  display: block;
  margin-top: var(--sp-28);
}
.levels--full li {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  column-gap: var(--sp-22);
  padding: var(--sp-18) 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}
.levels--full li:last-child { border-bottom: 1px solid var(--line); }
.levels--full .eyebrow { margin: 0; padding-top: 3px; }
.levels--full .level-claim { margin-bottom: var(--sp-4); font-size: var(--fs-bausteintitel); line-height: var(--lh-bausteintitel); }
.levels--full .level-proof { grid-column: 2; margin: 0; max-width: var(--measure); }
.navy .section-body > .lead + .levels { margin-top: var(--sp-36); }

/* ---------- Zertifikat ---------- */
.cert { max-width: var(--measure); padding: var(--sp-22); border: 1px solid var(--line); border-left: 3px solid var(--c-marke-blau); }
.cert-norm { margin-bottom: var(--sp-14); font-size: var(--fs-bausteintitel); font-weight: var(--fw-bausteintitel); color: var(--tc-bausteintitel); }
.facts { margin: 0 0 var(--sp-14); }
.facts div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--sp-10); padding: var(--sp-7) 0; border-top: 1px solid var(--line); }
.facts dt { font-size: var(--fs-sekundaertext); font-weight: 700; letter-spacing: 0.3px; color: var(--tc-sekundaertext); text-transform: uppercase; }
.facts dd { margin: 0; }

/* ---------- Kundenstimme ---------- */
.quote { max-width: var(--measure); margin: 0 0 var(--sp-22); padding: var(--sp-7) 0 var(--sp-7) var(--sp-22); border-left: 4px solid var(--c-marke-blau); }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: var(--fs-einleitung); font-weight: 600; line-height: 1.5; color: var(--tc-bausteintitel); }
.quote figcaption { margin-top: var(--sp-10); font-size: var(--fs-sekundaertext); color: var(--tc-sekundaertext); }

/* ---------- Kontakt ---------- */
.contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-28) var(--sp-44);
  margin: 0;
}
.contact dd { margin: 0; font-size: var(--fs-einleitung); }
.contact .button { font-size: var(--fs-unterzeile); }

/* ---------- Textseiten (Impressum, Datenschutz, 404) ---------- */
.layout-text .page-head { padding: var(--sp-36) 0; }
.layout-text .section { padding: var(--sp-28) 0; border-top: 0; }
.layout-text .section:first-of-type { padding-top: var(--sp-44); }
.layout-text .section:last-of-type { padding-bottom: var(--sp-56); }
.layout-text .section .wrap, .layout-text .page-head .wrap { max-width: calc(var(--measure) + 2 * var(--gutter-desktop)); margin-left: 0; }
.layout-text .section-head { margin-bottom: var(--sp-14); }
.layout-text .section h2 { font-size: var(--fs-bausteintitel); line-height: var(--lh-bausteintitel); }

/* ---------- Fuß ---------- */
.site-footer { padding: var(--sp-56) 0 var(--sp-44); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-36) var(--sp-28); }
.footer-aufruf { max-width: 18ch; margin-bottom: var(--sp-22); font-size: var(--fs-abschnittstitel); font-weight: var(--fw-abschnittstitel); line-height: var(--lh-abschnittstitel); color: var(--tc-abschnittstitel); text-wrap: balance; }
.footer-reach { display: flex; flex-wrap: wrap; gap: var(--sp-7) var(--sp-28); }
.footer-reach a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: var(--fs-einleitung); font-weight: 700; color: var(--c-light-on-navy); }
.footer-contact, .footer-links { font-size: var(--fs-sekundaertext); line-height: var(--lh-sekundaertext); color: var(--tc-einleitung); }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin-bottom: var(--sp-4); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--touch-min); color: var(--c-light-on-navy); }
.footer-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-14) var(--sp-28); margin-top: var(--sp-22); padding-top: var(--sp-28); border-top: 1px solid var(--line); }
.footer-brand img { display: block; width: auto; height: 32px; }
.footer-absender { margin: 0; font-size: var(--fs-sekundaertext); color: var(--tc-sekundaertext); }

/* ---------- Responsiv ---------- */
@media (max-width: 940px) {
  .wrap { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
  .tech-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .levels li:last-child { grid-column: 1 / -1; }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-call { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .section { padding: var(--sp-44) 0; }
  .hero { padding: var(--sp-44) 0 var(--sp-56); }
  .hero::before { width: 90vw; top: -10%; right: -40%; }
  .cards, .cards--3, .contact { grid-template-columns: 1fr; }
  .zweispaltig .section-body { grid-template-columns: 1fr; }
  .platform div, .levels--full li, .facts div { grid-template-columns: 1fr; gap: var(--sp-4); }
  .levels--full .level-proof { grid-column: 1; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .site-header nav a { padding: 0 var(--sp-10) 0 0; margin-right: var(--sp-7); }
  .site-header nav a:hover, .site-header nav a:focus-visible, .site-header nav a[aria-current="page"] { background-size: calc(100% - var(--sp-10)) 3px; background-position: 0 calc(100% - 6px); }
}

@media (max-width: 520px) {
  .wrap { padding-left: var(--gutter-mobil); padding-right: var(--gutter-mobil); }
  .tech-groups, .levels { grid-template-columns: 1fr; }
  .levels li:last-child { grid-column: auto; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .brand img { height: 34px; }
  .hero .wrap > p:has(> a:only-child) { display: block; margin-right: 0; }
  .hero .wrap > p:has(> a:only-child) + p { margin-top: var(--sp-14); }
}

/* ---------- Ruhige Bewegung: nur mit Anlass ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}