/* ==========================================================================
   LIGABO – Markteintritt Medizintechnik Deutschland / Market entry Germany
   Seitenspezifische Stile, geladen nach styles.css
   ========================================================================== */

/* Abschnitte dieser Seite: 96px statt der gemeinsamen 104px */
.pad-96 { padding-top: 96px; padding-bottom: 96px; }

/* Oranger Akzentbalken */
.accent-bar { width: 56px; height: 4px; background: var(--orange); }

/* Zweispaltiges Raster (Entscheidung, Häufiger Fehler, Wo LIGABO ansetzt) */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px 72px;
  align-items: start;
}
.duo__head { gap: 16px; }
.duo__head--wide { gap: 20px; }
.duo__body { gap: 24px; }
.duo__body--loose { gap: 28px; }

.body-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.body-text-group { gap: 16px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.entry-hero {
  padding-top: 96px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.entry-hero__title {
  margin: 0;
  max-width: 920px;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.entry-hero__intro {
  margin: 0;
  max-width: 720px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
.entry-hero__text {
  margin: 0;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  text-wrap: pretty;
}
.entry-hero__scope {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Drei Wege – Karten mit gleich hohen Innenbereichen (Subgrid)
   -------------------------------------------------------------------------- */
.paths { display: flex; flex-direction: column; gap: 48px; }
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
/* Verzweigung über den drei Säulen:
   Vertrieb in Deutschland → eigene Organisation | lokaler Partner (Agentur + Distribution).
   Linien sind reine Deko; der Inhalt steht als Text im HTML. */
.route-map {
  --line-w: 2px;
  --gap: 24px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  text-align: center;
  font-weight: 700;
}
.route-map__root {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  margin-bottom: 48px;
  padding: 14px 28px;
  border: 2px solid var(--navy);
  border-radius: 6px;
  background: var(--white);
  font-size: 17px;
}
.route-map__branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.3;
}
.route-map__branch--own { background: var(--white); border: 2px solid var(--line); }
.route-map__branch--partner { background: var(--navy); color: var(--white); border: 2px solid transparent; }
.route-map__branch--accent { background: var(--orange); }
.route-map__branch--accent .route-map__partner { color: var(--navy); }
.route-map__models { font-size: 13px; font-weight: 600; color: var(--on-navy); }

.route-map__root::after,
.route-map__branch::before,
.route-map__branch::after,
.route-map__down,
.route-map__bracket::before { content: ""; position: absolute; background: var(--navy); }
/* von „Vertrieb in Deutschland“ nach unten … */
/* Alle Kästen haben 2px Rahmen; Linien setzen an der Außenkante an und überlappen sich an den Knoten */
.route-map__root::after { top: calc(100% + 2px); left: calc(50% - var(--line-w) / 2); width: var(--line-w); height: 26px; }
/* … zur Querlinie und von dort in die beiden Zweige */
.route-map__branch::before { top: -26px; left: calc(50% - var(--line-w) / 2); width: var(--line-w); height: 24px; }
.route-map__branch::after { top: -26px; height: var(--line-w); }
.route-map__branch--own::after { left: calc(50% - var(--line-w) / 2); right: calc(var(--gap) / -2 - 3px); }
.route-map__branch--partner::after { left: calc(var(--gap) / -2 - 3px); right: calc(50% - var(--line-w) / 2); }
.route-map__down,
.route-map__bracket { display: none; }

@media (max-width: 480px) {
  .route-map { --gap: 12px; }
  .route-map__branch { padding: 12px 8px; font-size: 15px; }
}

/* Breite Bildschirme: drei Spalten wie die Säulen, Linien bis zu den Säulen */
@media (min-width: 1000px) {
  .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-map + .path-grid { margin-top: -24px; }       /* Abstand Zweige → Säulen: 24px */
  .route-map__branch--partner { grid-column: 2 / span 2; }
  .route-map__models { display: none; }
  /* eigene Organisation → Säule 1 */
  .route-map__down { display: block; top: calc(100% + 2px); left: calc(50% - var(--line-w) / 2); width: var(--line-w); height: 24px; }
  /* lokaler Partner → Säulen 2 und 3 (Klammer ┌─┐) */
  .route-map__bracket {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    left: calc((100% - var(--gap)) / 4 - 2px);
    right: calc((100% - var(--gap)) / 4 - 2px);
    height: 12px;
    border: var(--line-w) solid var(--navy);
    border-bottom: none;
  }
  .route-map__bracket::before { bottom: 100%; left: calc(50% - var(--line-w) / 2); width: var(--line-w); height: 14px; }
}

.path-card {
  background: var(--white);
  border-radius: var(--radius);
  border-top: 4px solid var(--white);
  padding: 32px 28px;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 20px;
}
.path-card--agency { border-top-color: var(--orange); }
.path-card--distribution { border-top-color: var(--navy); }
.path-card__head { display: flex; flex-direction: column; gap: 10px; }
.path-card__title { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.2; }
.path-card__intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.path-card__point { display: flex; flex-direction: column; gap: 6px; }
.path-card__point--first { padding-top: 18px; border-top: 1px solid var(--line); }
.path-card__label { margin: 0; font-size: 14px; font-weight: 700; }
.path-card__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.path-card__question {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--soft);
  border-radius: 6px;
}
.path-card__question-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.path-card__question-text { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 700; }

.source-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.source-note a { color: var(--muted); text-decoration: underline; }
.source-note a:hover { color: var(--orange); }

/* --------------------------------------------------------------------------
   Vergleichstabelle
   -------------------------------------------------------------------------- */
.compare { display: flex; flex-direction: column; gap: 40px; }
.compare__head { gap: 16px; }
.compare__scroll { overflow-x: auto; }
.cmp {
  min-width: 760px;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.cmp col.cmp__crit { width: 28.6%; } /* 1.2fr : 3 × 1fr */
.cmp th, .cmp td { vertical-align: top; }

.cmp thead th {
  padding: 16px 18px;
  border-bottom: 2px solid var(--navy);
  font-weight: 800;
  vertical-align: middle;
}
.cmp thead th:first-child {
  padding-left: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.cmp--crit-strong thead th:first-child { font-size: 15px; font-weight: 800; }
.cmp__col { display: flex; align-items: center; gap: 10px; }

.cmp tbody th {
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.cmp tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}


.callout { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.callout__text {
  margin: 0;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.5;
  font-weight: 700;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Entscheidungskriterien
   -------------------------------------------------------------------------- */
.h2--decision {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.2;
}
.criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--navy);
}
.criteria li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.criteria__num { font-weight: 800; color: var(--orange); }
.criteria__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.criteria__text {
  grid-column: 2;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Wo LIGABO ansetzt
   -------------------------------------------------------------------------- */
.focus-block { gap: 12px; }
.focus-block__label { margin: 0; font-size: 14px; font-weight: 700; }
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chip-list li {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Abschluss-CTA (Navy)
   -------------------------------------------------------------------------- */
.cta-band {
  padding-top: 88px;
  padding-bottom: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 56px;
  flex-wrap: wrap;
}
.cta-band__text { flex: 1 1 480px; gap: 14px; }
.cta-band__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.cta-band .lead { max-width: 640px; }