/* CorpMap — Markenschicht. Wird als letzte Datei geladen.
   Ziel: kein „Dokument-/Bericht-Look“. Statt Serifen-Headlines, Versal-Kickern, Creme-Flächen,
   Serifen-Nummern und dünner Häkchen: kräftige Grotesk (Archivo), Kicker als Badges,
   kühle Flächen, Zahlen in Kacheln, gefüllte Häkchen, Karten statt Haarlinien-Tabellen.
   Die Papier-Dokumente in den Visuals bleiben bewusst Serif – sie sollen wie echte Unterlagen aussehen. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: "Archivo", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: var(--display);            /* alle bisherigen Serifen-Überschriften werden Grotesk */
  --cream: #eaf2ef;                   /* kühl statt Creme */
  --tint: #f3f7f6;
}

/* ─── Überschriften ─────────────────────────────────────────── */
.hero h1, .section-title, .split h2, .stats h2, .cta h2, .legal-hero h1, .legal h2, .annual h2, .plan h3,
.page-head h1, .usecases .section-title {
  font-family: var(--display); font-weight: 700; font-stretch: 104%; letter-spacing: -0.028em;
}
.hero h1 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1.04; font-weight: 750; }
.hero--page h1 { font-size: clamp(34px, 4vw, 52px); }
.section-title { line-height: 1.1; }
.split h2 { line-height: 1.12; }
.pb h3 { font-family: var(--display); font-weight: 700; font-stretch: 102%; letter-spacing: -0.02em; font-size: 22px; line-height: 1.2; }
.statement__big { font-family: var(--display); font-weight: 800; font-stretch: 108%; letter-spacing: -0.035em; line-height: 1.02; }
.ds-count b, .st-num b, .stack__tag b, .dt__file span, .stat__num { font-family: var(--display); font-weight: 800; font-stretch: 110%; letter-spacing: -0.045em; }
.st-num b { font-size: clamp(40px, 4.2vw, 58px); }
.brand__name { font-family: var(--display); font-weight: 800; font-stretch: 106%; letter-spacing: -0.03em; }
.uc h3, .fcard h3, .st-item h3, .nsteps h3, .ds-steps h3, .dt h3, .related b, .branches b, .persona h3 { font-family: var(--display); font-stretch: 102%; letter-spacing: -0.015em; }
.paper { font-family: "Roboto Serif", Georgia, "Times New Roman", serif; }

/* ─── Kicker als Badge statt Versal-Zeile ──────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; margin-bottom: 18px;
  border-radius: 999px; background: #e3f0ed; color: #185a62;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none;
}
.kicker::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.sec--navy .kicker, .docstory .kicker, .gallery .kicker, .usecases .kicker, .usecases-sec .kicker, .hero .kicker {
  background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}
.statement .kicker { background: rgb(255 255 255 / .6); }

/* Brotkrumen im Seiten-Hero: normale Schreibweise */
.crumbs { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.crumbs span { color: #fff; }

/* ─── Zahlen in Kacheln statt Serifen-Ziffern ──────────────── */
.pb__no { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--navy); color: #fff; font: 700 15px/1 var(--display); letter-spacing: 0; }
.nsteps li { border-top: 0; padding: 22px 22px 24px; border-radius: 16px; background: var(--tint); }
.sec--cream .nsteps li { background: #fff; }
.sec--navy .nsteps li { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--navy-line); }
.nsteps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--navy); color: #fff; font: 700 16px/1 var(--display); }
.sec--navy .nsteps li::before { background: var(--orange); color: var(--navy); }
.nsteps h3 { margin-top: 16px; }
.ds-steps li { align-items: start; }
.ds-step__no { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px;
  background: rgb(238 127 91 / .16); color: var(--orange); font: 700 12px/1 var(--display); letter-spacing: 0; }

/* ─── Häkchen als gefüllte Punkte ──────────────────────────── */
.checks li { align-items: flex-start; }
.checks li::before { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; font-size: 11px; line-height: 1; }
.sec--navy .checks li::before { background: var(--orange); color: var(--navy); }
.plan li::before { top: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #e3f0ed; color: var(--blue); font-size: 11px; line-height: 1; }
.plan--featured li::before { background: rgb(238 127 91 / .2); color: var(--orange); }

/* ─── Problem: zweigeteilte Karten statt Spalten mit Haarlinien ─ */
.pb-grid { border-top: 0; gap: 18px; }
.pb, .pb + .pb { display: flex; flex-direction: column; padding: 28px 28px 0; border: 1px solid var(--line); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgb(11 42 48 / .04), 0 18px 40px -26px rgb(11 42 48 / .3); overflow: hidden; }
.pb h3 { margin-top: 18px; }
.pb p > span { display: flex; width: fit-content; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin-bottom: 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; }
.pb__before span { background: #f1f4f3; color: var(--ink-soft); }
.pb__before span::before { content: "\e4f6"; font-family: "CorpMap Icons"; font-size: 11px; }
.pb__after { margin: auto -28px 0; padding: 22px 28px 26px; border-top: 0; background: #eaf4f0; }
.pb__after span { background: #fff; color: #185a62; }
.pb__after span::before { content: "\e182"; font-family: "CorpMap Icons"; font-size: 11px; color: var(--orange); }

/* ─── Feature-Raster: Karten mit Piktogramm ────────────────── */
.fgrid { border-top: 0; gap: 16px; }
.fgrid > .fcard { padding: 24px !important; border: 1px solid var(--line) !important; border-radius: 16px; background: #fff; }
.sec--cream .fgrid > .fcard { border-color: transparent !important; }
.sec--navy .fgrid > .fcard { background: rgb(255 255 255 / .04); border-color: var(--navy-line) !important; }
.fcard h3 { margin-top: 18px; }

/* ─── Piktogramme: eigene Zeichnungen aus drei Farbebenen ──────
   Linie Petrol, Fläche Mint (versetzt), Akzent Koralle. Auf dunklen Flächen Linie weiß. */
.px { --px-line: var(--navy); --px-tint: #d4ebe1; --px-accent: var(--orange); }
.sec--navy .px, .hero .px, .usecases .px, .usecases-sec .px, .uc .px, .docstory .px, .gallery .px,
.net__node--main .px, .mobile-nav .px, .ai-note .px, .related .px {
  --px-line: #fff; --px-tint: rgb(88 190 178 / .3); --px-accent: var(--orange);
}
.fcard .fi, .st-item .fi { font-size: 44px; }
.trust-item .fi { font-size: 40px; }
.uc__top .fi { font-size: 36px; }
.ai-note .fi { font-size: 56px; }
.branches a { grid-template-columns: 40px minmax(0, 1fr) auto; }
.branches .fi { font-size: 38px; }
.net__node .fi { font-size: 20px; }
.source-list .fi { font-size: 26px; }
/* Hover: die Fläche wechselt von Mint zu hellem Koralle */
a:hover > .px, .branches a:hover .px, a.fcard--link:hover .px { --px-tint: #f8d5c7; }
.uc:hover .px, .sec--navy a:hover .px, .mobile-nav a:hover > .px { --px-tint: rgb(238 127 91 / .32); }

/* ─── Menü: jeder Eintrag mit Piktogramm ───────────────────── */
.mega__cols { gap: 6px 22px; }
.mega h4 { margin-bottom: 8px; }
.mega a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 10px 10px 11px; margin: 0 -10px; border-radius: 10px; transition: background-color .15s ease; }
.mega a > .px { grid-row: 1 / span 2; font-size: 30px; margin-top: 1px; }
.mega a > b, .mega a > span { grid-column: 2; }
.mega a:hover, .mega a.is-active { background: var(--tint); }
.mega a:hover b, .mega a.is-active b { color: var(--navy); text-decoration: none; }
.mega a:hover > .px, .mega a.is-active > .px { --px-tint: #f8d5c7; }
.mega__list a { grid-template-columns: 26px minmax(0, 1fr); align-items: center; padding: 8px 10px; }
.mega__list a > .px { grid-row: auto; font-size: 26px; margin-top: 0; }
.mega a.mega__all { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 14px 0 6px; border-radius: 0; }
.mega a.mega__all:hover { background: none; }
.mega a.mega__all .ci { font-size: 13px; color: var(--blue); transition: transform .15s ease; }
.mega a.mega__all:hover .ci { transform: translateX(3px); }
.mobile-nav a:not(.btn) { display: flex; align-items: center; gap: 12px; }
.mobile-nav a > .px { font-size: 24px; }

/* ─── Abschluss: dunkle Karte statt Creme-Fläche ───────────── */
.cta { padding: 24px 0 104px; background: var(--white); }
.cta .wrap { position: relative; isolation: isolate; overflow: hidden; width: calc(100% - 2 * var(--gutter)); padding: 76px 40px 64px;
  border-radius: 24px; background: var(--navy); color: #fff; }
.cta .wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/contours-soft.png") right center / auto 130% no-repeat; opacity: .5; }
.cta h2 { color: #fff; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.06; }
.cta .mailform input { border-color: transparent; }
.cta__note { color: rgb(255 255 255 / .65); }
.cta__note a { color: #fff; }

/* ─── Aussage-Band: mehr Plakat, weniger Zitat ─────────────── */
.statement__big em { color: var(--blue); }

@media (max-width: 640px) {
  .cta .wrap { padding: 56px 22px 48px; border-radius: 18px; }
  .pb, .pb + .pb { padding: 24px 22px 0; }
  .pb__after { margin: auto -22px 0; padding: 20px 22px 22px; }
}