/* ═══════════════════════════════════════════════════════════════════
   /unternehmen  und  /unternehmen/<slug>
   Die Dachmarken-Kinderseiten. Register wie die Konzeptseiten
   (DESIGN §6): Weiß, Haarlinien, keine Einstiegs-Animationen — die
   Seiten sollen sich wie ein Datenblatt lesen, nicht wie eine Bühne.
   Ein Cream-Feld pro Seite setzt den Abschnitt ab, mehr Fläche nicht.
   Wiederverwendet aus dem Bestand: .pill .h1 .h2 .btn .ticks .ph__box
   .tag--demo .sec-head.
   ═══════════════════════════════════════════════════════════════════ */

.co-sec{padding-block:var(--section-y)}
.co-sec--tint{background:var(--c-cream)}
.co-h2{margin-bottom:var(--s-5)}

/* ── Übersicht ───────────────────────────────────────────────────── */
.co-intro{max-width:52rem}
.co-intro__lead{margin-top:var(--s-5);color:var(--c-muted);font-size:var(--t-md);max-width:52ch}

/* Eine Stufe = Kopfspalte links, Unternehmen rechts. Die Kette liest
   sich damit von oben nach unten, nicht als drei gleichwertige Spalten. */
.co-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:var(--s-12);padding-block:var(--s-10)}
.co-stage + .co-stage{border-top:1px solid var(--c-line)}
.co-stage:first-child{padding-top:0}
.co-stage__no{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal);letter-spacing:.06em}
.co-stage__title{margin-top:var(--s-2);font-size:var(--t-xl);line-height:1.1;
  letter-spacing:-.03em;font-weight:var(--fw-display)}
.co-stage__text{margin-top:var(--s-4);color:var(--c-muted);font-size:var(--t-sm);
  line-height:1.6;max-width:42ch}
.co-stage__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);
  align-content:start}
.co-stage__tiles:has(> :only-child){grid-template-columns:minmax(0,20rem)}

/* ── Unternehmens-Kachel (Übersicht + Geschwister) ───────────────── */
.cotile{display:flex;flex-direction:column;gap:var(--s-2);
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-6);
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui),transform var(--dur-ui) var(--ease)}
.cotile:hover{border-color:transparent;box-shadow:var(--sh-card);transform:translateY(-3px)}
.cotile__head{display:flex;align-items:center;gap:var(--s-2)}
.cotile__mark{display:grid;place-items:center;width:1.4rem;height:1.4rem;color:var(--c-signal)}
.cotile__code{font-size:var(--t-md);font-weight:var(--fw-strong);color:var(--c-signal);letter-spacing:.03em}
.cotile__stage{margin-left:auto;font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  letter-spacing:.06em;text-transform:uppercase}
.cotile__name{font-size:var(--t-sm);font-weight:var(--fw-title);line-height:1.35;
  letter-spacing:-.01em;hyphens:auto;transition:color var(--dur-ui)}
.cotile:hover .cotile__name{color:var(--c-signal)}
.cotile__role,.cotile__where{font-size:var(--t-xs);color:var(--c-muted)}
.cotile__go{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line);
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.cotile__arrow{flex:none;width:1.5rem;height:1.5rem;border-radius:var(--r-pill);
  display:grid;place-items:center;padding:.3rem;
  border:1px solid var(--c-signal);
  transition:background var(--dur-ui),color var(--dur-ui),transform var(--dur-ui) var(--ease)}
.cotile:hover .cotile__arrow{background:var(--c-signal);color:#fff;transform:translateX(3px)}

.co-siblings{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}

/* ── Zeitstrahl der Gruppe ───────────────────────────────────────── */
.co-tl__shell{max-width:60rem}
.co-tl{margin-top:var(--s-10);display:grid;gap:0}
.co-tl__item{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:var(--s-8);padding-block:var(--s-6);border-top:1px solid var(--c-line)}
.co-tl__year{font-size:var(--t-lg);font-weight:var(--fw-title);color:var(--c-signal);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.co-tl__text{color:var(--c-muted);font-size:var(--t-sm);line-height:1.65}
.co-plan{margin-top:var(--s-10)}

/* ── Kopf einer Gesellschaft ─────────────────────────────────────── */
.co-crumb{display:flex;gap:var(--s-2);align-items:center;font-size:var(--t-xs);
  font-weight:var(--fw-strong);color:var(--c-muted);margin-bottom:var(--s-6)}
.co-crumb a{border-bottom:1px solid var(--c-line);transition:color var(--dur-ui),border-color var(--dur-ui)}
.co-crumb a:hover{color:var(--c-signal);border-color:var(--c-signal)}

.co-head__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--s-12);align-items:start}
.co-head__badge{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.co-head__mark{display:grid;place-items:center;width:2rem;height:2rem;color:var(--c-signal)}
.co-head__code{font-size:var(--t-lg);font-weight:var(--fw-strong);color:var(--c-signal);letter-spacing:.04em}
.co-head__role{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted);border-left:1px solid var(--c-line);padding-left:var(--s-3)}
.co-head__name{margin-top:var(--s-4);max-width:16ch}
.co-head__lead{margin-top:var(--s-5);color:var(--c-muted);font-size:var(--t-md);
  line-height:1.65;max-width:52ch}

/* Faktenkarte — bewusst eine Definitionsliste: das ist es auch. */
.cofacts{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-8);box-shadow:var(--sh-card)}
.cofacts__head{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-signal);margin-bottom:var(--s-5)}
.cofacts__list{display:grid;gap:var(--s-4)}
.cofacts__list > div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line)}
.cofacts__list > div:last-child{padding-bottom:0;border-bottom:0}
.cofacts__list dt{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted)}
.cofacts__list dd{font-size:var(--t-sm);font-weight:var(--fw-strong);display:grid;gap:var(--s-1);
  justify-items:start}
.cofacts__list dd a{border-bottom:1px solid var(--c-line);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.cofacts__list dd a:hover{color:var(--c-signal);border-color:var(--c-signal)}
.cofacts__cta{margin-top:var(--s-6);width:100%;justify-content:center}

/* ── Rolle in der Kette ──────────────────────────────────────────── */
.co-role{padding-bottom:var(--s-10);margin-bottom:var(--s-10);
  border-bottom:1px solid var(--c-line)}
.co-role__text{margin-top:var(--s-3);font-size:var(--t-lg);line-height:1.45;
  letter-spacing:-.015em;max-width:60ch}
.co-role__peers{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--c-muted)}
.co-role__peers a{font-weight:var(--fw-strong);color:var(--c-signal);border-bottom:1px solid var(--c-line);
  transition:border-color var(--dur-ui)}
.co-role__peers a:hover{border-color:var(--c-signal)}

/* ── Leistungen + Kontaktspalte ──────────────────────────────────── */
.co-cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s-12);
  align-items:start}
.co-main__lead{color:var(--c-muted);font-size:var(--t-md);max-width:56ch}
.co-main__gap{margin-top:var(--s-5);display:flex;align-items:center;gap:var(--s-3);
  flex-wrap:wrap;font-size:var(--t-sm);color:var(--c-muted)}

.co-svcs{margin-top:var(--s-6);display:grid}
.co-svcs li + li{border-top:1px solid var(--c-line)}
.co-svcs a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-5);
  align-items:center;padding:var(--s-4) 0}
.co-svcs__ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:.5rem;
  border:1px solid var(--c-line);border-radius:var(--r-sm);color:var(--c-signal);
  transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui)}
.co-svcs a:hover .co-svcs__ic{background:var(--c-signal);color:#fff;border-color:transparent}
.co-svcs__body{display:grid;gap:var(--s-1)}
.co-svcs__title{font-size:var(--t-md);font-weight:var(--fw-title);letter-spacing:-.015em;
  transition:color var(--dur-ui)}
.co-svcs a:hover .co-svcs__title{color:var(--c-signal)}
.co-svcs__promise{font-size:var(--t-xs);color:var(--c-muted)}
.co-svcs__stage{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

.co-side__head{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-signal);margin-bottom:var(--s-5)}
.coloc + .coloc{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.coloc__city{font-size:var(--t-md);font-weight:var(--fw-title);letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.coloc__city span{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.coloc__hq{border:1px solid var(--c-signal);border-radius:var(--r-pill);
  padding:.2em .7em;font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.coloc__addr{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--c-muted);line-height:1.55}
.coloc__links{margin-top:var(--s-4);display:grid;gap:var(--s-1);font-size:var(--t-sm)}
.coloc__links a{font-weight:var(--fw-strong);width:fit-content;border-bottom:1px solid var(--c-line);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.coloc__links a:hover{color:var(--c-signal);border-color:var(--c-signal)}

/* ── Breakpoints (DESIGN §5: 1140 / 900 / 760 / 520) ─────────────── */
@media (max-width:1140px){
  .co-stage{grid-template-columns:1fr;gap:var(--s-8)}
  .co-stage__text{max-width:60ch}
  .co-siblings{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .co-head__grid,.co-cols{grid-template-columns:1fr;gap:var(--s-10)}
  .co-stage__tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .co-tl__item{grid-template-columns:1fr;gap:var(--s-2)}
  .cofacts__list > div{grid-template-columns:1fr;gap:var(--s-1)}
}
@media (max-width:520px){
  .co-stage__tiles,.co-siblings{grid-template-columns:1fr}
  .co-svcs a{grid-template-columns:auto minmax(0,1fr);gap:var(--s-4)}
  .co-svcs__stage{grid-column:2;margin-top:var(--s-1)}
}