/* Flyer: Automotive und Zulieferer (/de/flyer/automotive).
   Baut auf flyer-common.css auf. Kernvisualisierung ist die Lieferkette als
   drei gestapelte Raenge (OEM, Tier 1, Tier 2/3) auf einer Graphitflaeche,
   mit zwei gegenlaeufigen Pfeilen in den Randspalten: links faellt die
   Anforderung des Kunden nach unten, rechts steigt der Angriffsweg von den
   kleineren Zulieferern nach oben. Zweitakzent ist Signalrot, es markiert
   ausschliesslich den Angriffsweg, den Tier-2/3-Rang, die Szenario-Nummern
   und die Fallkarte. Alle uebrigen Farben laufen ueber die --fp-*-Tokens aus
   flyer-common.css, damit der Bogen am Bildschirm dunkel und im Druck hell
   bleibt.

   Zur Dichte: Fliesstext liegt hier nirgends unter 0,72 rem bei Zeilenhoehe
   1,45, Beschriftungen nicht unter 0,64 rem. Die Kompaktfassung traegt
   deshalb bewusst weniger Abschnitte (Kopf, Lieferkette, Szenario, Module
   und Fall); Angriffsflaechen, Leistungsumfang, Produktionsfrage und FAQ
   stehen in der Langfassung. Klassenpraefix au- = automotive. */

.flyer-page {
  --au-red: #e2594a;
  --au-red-soft: rgba(226, 89, 74, 0.15);
  --au-red-border: rgba(226, 89, 74, 0.5);
  --au-graphite: rgba(255, 255, 255, 0.035);
  --au-graphite-border: rgba(255, 255, 255, 0.12);
}
@media print {
  .flyer-page {
    --au-red: #c0392b;
    --au-red-soft: #fbe9e6;
    --au-red-border: #eab7ae;
    --au-graphite: #eef1f5;
    --au-graphite-border: #d7dde5;
  }
}

/* ---- Kopf ---- */
.au-sheet .flyer-logo { margin-bottom: 12px; height: 32px; }
.au-sheet .flyer-h1 { font-size: clamp(1.35rem, 2.5vw, 1.7rem); margin-bottom: .4rem; max-width: 26em; }
.au-sheet .flyer-subline { font-size: .84rem; line-height: 1.5; margin-bottom: .6rem; max-width: 52em; }

.au-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 1rem; padding: 0; list-style: none; }
.au-trust li { display: flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; color: var(--fp-muted); }
.au-trust svg { flex-shrink: 0; width: 13px; height: 13px; color: var(--fp-accent); }

.au-h2 {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-muted);
  margin: 0 0 .5rem;
  break-after: avoid;
}

.au-note { font-size: .68rem; color: var(--fp-muted-2); line-height: 1.45; margin: .45rem 0 0; }

/* ---- Kernvisualisierung: Lieferkette ---- */
.au-chain { margin-bottom: 1rem; break-inside: avoid; }

.au-chain-panel {
  background: var(--au-graphite);
  border: 1px solid var(--au-graphite-border);
  border-radius: 10px;
  padding: .75rem .8rem .8rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.au-chain-svg { display: block; width: 100%; height: auto; font-family: var(--font-family); }

.au-chain-svg .c-axis { stroke-width: 2; fill: none; }
.au-chain-svg .c-axis-down { stroke: var(--fp-accent); }
.au-chain-svg .c-axis-up { stroke: var(--au-red); }
.au-chain-svg .c-head-down { fill: var(--fp-accent); }
.au-chain-svg .c-head-up { fill: var(--au-red); }

.au-chain-svg .c-ax-lbl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.au-chain-svg .c-ax-lbl-down { fill: var(--fp-accent); }
.au-chain-svg .c-ax-lbl-up { fill: var(--au-red); }

.au-chain-svg .c-rank rect { fill: var(--fp-bg); stroke: var(--fp-border); stroke-width: 1.2; }
.au-chain-svg .c-rank .c-chip { fill: var(--fp-accent-soft); stroke: var(--fp-accent-border); stroke-width: 1; }
.au-chain-svg .c-rank .c-chip-alt { fill: var(--au-red-soft); stroke: var(--au-red-border); stroke-width: 1; }
.au-chain-svg .c-chip-lbl { font-size: 11.5px; font-weight: 800; fill: var(--fp-accent); }
.au-chain-svg .c-chip-lbl-alt { fill: var(--au-red); }
.au-chain-svg .c-rank-title { font-size: 13px; font-weight: 800; fill: var(--fp-text); }
.au-chain-svg .c-rank-text { font-size: 11.5px; font-weight: 500; fill: var(--fp-muted); }
.au-chain-svg .c-rank-t23 rect:first-child { stroke: var(--au-red-border); }

.au-chain-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: .7rem; }
.au-leg { border-left: 3px solid var(--fp-accent); padding-left: .7rem; }
.au-leg-up { border-left-color: var(--au-red); }
.au-leg-label {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin-bottom: 3px;
}
.au-leg-up .au-leg-label { color: var(--au-red); }
.au-leg p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- Szenario ---- */
.au-scenario { margin-bottom: 1rem; break-inside: avoid; }
.au-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.au-steps li {
  border-top: 2px solid var(--au-red-border);
  padding: .5rem .2rem 0 0;
}
.au-step-num {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--au-red);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.au-steps h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.3; }
.au-steps p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- Module und Fall ---- */
.au-bottom {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  margin-bottom: 1rem;
  break-inside: avoid;
}
.au-surfaces, .au-modules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.au-surfaces h3, .au-modules h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.au-surfaces p, .au-modules p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.au-modules h3::before { content: "\2192\00a0"; color: var(--fp-accent); }
.au-surfaces li { border-left: 2px solid var(--fp-border); padding-left: .7rem; }

.au-case {
  background: var(--au-red-soft);
  border: 1px solid var(--au-red-border);
  border-radius: 8px;
  padding: .7rem .8rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.au-case-kicker {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--au-red);
  margin-bottom: 2px;
}
.au-case h3 { font-size: .8rem; font-weight: 800; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.au-case-meta { display: block; font-size: .68rem; font-weight: 700; color: var(--fp-muted-2); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.au-case p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.au-case-disclaimer { font-size: .64rem !important; color: var(--fp-muted-2) !important; margin-top: 5px !important; }

/* ---- Nur Langfassung ---- */
.au-extra { margin-bottom: 1.6rem; }
.au-scope, .au-extra-grid { break-inside: avoid; }
.au-extra-grid { grid-template-columns: 1fr 1.2fr; gap: 1.6rem; }
.flyer-page[data-version="extended"] .au-extra-grid { display: grid; }
.flyer-page[data-version="extended"] .au-surfaces { flex-direction: row; gap: 20px; }
.flyer-page[data-version="extended"] .au-surfaces li { flex: 1 1 0; }

.au-deliver { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.au-deliver li { display: flex; gap: 9px; align-items: flex-start; }
.au-deliver svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--fp-accent); }
.au-deliver p { font-size: .78rem; color: var(--fp-text); line-height: 1.5; margin: 0; }

.au-prod p { font-size: .78rem; color: var(--fp-muted); line-height: 1.55; margin: 0; }

.au-scope p { font-size: .78rem; color: var(--fp-muted); line-height: 1.55; margin: 0; max-width: 62em; }

.au-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.au-faq-item { break-inside: avoid; }
.au-faq-item h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 4px; line-height: 1.35; }
.au-faq-item p { font-size: .77rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ---- CTA ---- */
.au-cta {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: center;
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 10px;
  padding: .8rem .9rem;
  break-inside: avoid;
}
.au-cta h2 { font-size: 1rem; font-weight: 800; color: var(--fp-text); margin: 0 0 .3rem; }
.au-cta p { font-size: .75rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }
.au-cta-url { margin-top: .45rem !important; font-size: .72rem !important; color: var(--fp-text) !important; font-weight: 700; }
.au-cta-url span { font-weight: 600; color: var(--fp-muted-2); }

.au-cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.au-cta-actions .au-contact { grid-column: 1 / -1; }
.au-btn {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--fp-accent);
  color: var(--fp-on-accent) !important;
  text-decoration: none !important;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 9px 10px;
}
.au-btn-ghost { background: transparent; color: var(--fp-accent) !important; border: 1px solid var(--fp-accent-border); }
.au-contact { border-top: 1px solid var(--fp-accent-border); padding-top: .5rem; margin-top: 0; font-size: .72rem; gap: 2px; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

.au-sheet .flyer-footer-legal { margin-top: .75rem; padding-top: .5rem; font-size: .7rem; }

@media screen and (max-width: 700px) {
  .au-chain-legend, .au-steps, .au-bottom, .au-faq, .au-cta { grid-template-columns: 1fr; }
  .flyer-page[data-version="extended"] .au-extra-grid { grid-template-columns: 1fr; }
  .flyer-page[data-version="extended"] .au-surfaces { flex-direction: column; }
}