/*
 * single-fallstudie.css — v1.2 (2026-09-24, Phase 7, supervisor visual
 * review): the design's own vertical rhythm restored for
 * herausforderung-loesung/kunde/weitere — `.icc-fs-section--hl`/`--kunde`
 * (padding-top 110px, design L123/L147) and `.icc-fs-section--weitere`
 * (110px 0 96px, design L165), lost in v1.1 once the (now-optional) chart
 * section stopped reliably bridging the gap; `.icc-split--kunde-solo
 * .icc-kunde__desc` widens to 760px so the solo panel doesn't leave the right
 * half empty. v1.1 (2026-09-24, Phase 7, single-fallstudie.md v1.3, decision
 * 5): real-data rework. `.icc-split--kunde-solo` (no client image → single
 * column); `.icc-weitere__all` (archive link, replaces the placeholder
 * teaser); dropped the dead placeholder-only rules (`.icc-result__note`,
 * `.icc-media-box--placeholder`, `.icc-related-thumb*`, `.icc-related__*` —
 * the related cards now use the shared `.icc-fs-card` block in
 * components.css). v1.0 2026-09-16, Phase 3: Fallstudie single: the
 * section-3 SVG traffic chart (Konzept B `Fallstudie.dc.html` L86–L121) — the
 * tinted feature panel, the white chart card, the generated area/line SVG, the
 * two annotation pills and the x-axis label row. The hero + ergebnisse (before)
 * and herausforderung-loesung + kunde + weitere + cta (after) are styled by the
 * template-builder against docs/specs/templates/single-fallstudie.md.
 *
 * Auto-enqueued by basename AFTER responsive.css (inc/enqueue.php), so per the
 * mobile-rules.md §1 cascade + ownership contract this file:
 *   • NEVER sets `position` on `.icc-chart` (relative) or `.icc-chart__pill`
 *     (absolute) — responsive.css OWNS those and resets the pills to static at
 *     ≤768; here we set only pill top/left/right/bottom + visual styling with
 *     PLAIN single-class selectors (never `.icc-page`-prefixed), so the
 *     `.icc-page …` mobile rules in responsive.css still win at ≤768/≤480;
 *   • does NOT set the SVG width beyond `width:100%` (viewBox-scaled), so the
 *     chart card is padding-driven — no width arithmetic needed (R1: the card
 *     max-width comes from `.icc-container`, the svg fills its content box);
 *   • draws the line with dashB via `.icc-chart__line` (a CLASS, never inline),
 *     so base.css can kill it under `prefers-reduced-motion` (`.icc-chart svg
 *     path { animation:none }`).
 *
 * One-off design hexes carry a `/​* design … *​/` note; everything else is an
 * --icc-* token.
 */

/* ---------- Section rhythm (design L86: padding 64px 32px 0; horizontal from .icc-container) ---------- */
.icc-chart-section {
  padding: 64px 0 0;
}

/* ---------- Tinted feature panel (design L87: radius 44, padding 64, tint bg) ----------
   `.icc-panel` base radius is page-scoped (mirrors front-page.css / page-geo.css);
   responsive.css owns the ≤768/≤480 `.icc-page .icc-panel` padding overrides. */
.icc-panel { border-radius: var(--icc-r-panel); }
.icc-panel--chart {
  background: var(--icc-tint);
  padding: 64px;
}

/* ---------- Head row: eyebrow + H2 on the left, legend on the right (design L88) ---------- */
.icc-chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.icc-h2--chart {
  font-size: var(--icc-h2-erfolg);
  margin: 0;
}
.icc-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
}
.icc-chart-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--icc-body);
}
.icc-chart-legend__swatch {
  display: block;
  width: 22px;
  height: 3.5px;
  border-radius: 2px;
  background: var(--icc-primary);
}
.icc-chart-legend__note {
  font-size: 12.5px;
  color: var(--icc-muted);
}

/* ---------- White chart card (design L98: radius 26, padding 36 32 20, panel border) ----------
   `position` is OWNED by responsive.css (`.icc-chart { position:relative }`) — not set here. */
.icc-chart {
  background: #fff;
  border: 1px solid var(--icc-panel-border);
  border-radius: var(--icc-r-lg);
  padding: 36px 32px 20px;
}

/* SVG: width from the content box (viewBox-scaled), fixed design height 300px.
   responsive.css adds `min-height:220px` at ≤768 (R14: height ≥200, readable). */
.icc-chart__svg {
  display: block;
  width: 100%;
  height: 300px;
}

/* Area-fill gradient stops (design L101–L104: accent → transparent). stop-color
   set here so the SVG carries no inline hex (token policy) — SVG presentation
   attributes don't parse var(), but a CSS rule on the <stop> does. */
.icc-chart__area-stop { stop-color: var(--icc-accent); }
.icc-chart__area-stop--top { stop-opacity: .34; }
.icc-chart__area-stop--bottom { stop-opacity: 0; }

/* Dashed gridlines (design L106–L108). `#EAF2F8` is a one-off design gridline hex. */
.icc-chart__grid {
  stroke: #EAF2F8; /* design gridline */
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
}

/* Line series drawn with dashB (design L110 uses inline animation → CLASS here so
   base.css disables it under prefers-reduced-motion). dasharray ≥ path length so
   the stroke fully reveals at offset 0. */
.icc-chart__line {
  stroke: var(--icc-primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2400;
  animation: dashB 2.2s ease .2s both;
}

/* Marker dots on the 3rd + 9th data points (design L111–L112). */
.icc-chart__dot {
  fill: #fff;
  stroke-width: 3.5;
}
.icc-chart__dot--start { stroke: var(--icc-accent); }
.icc-chart__dot--peak { stroke: var(--icc-primary); }

/* ---------- Annotation pills (design L114–L115) ----------
   `position:absolute` is OWNED by responsive.css; here we set only coordinates +
   visual styling with PLAIN single-class selectors. At ≤768 responsive.css resets
   these to `position:static` and drops them below the chart. */
.icc-chart__pill {
  border-radius: var(--icc-r-pill);
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
}
.icc-chart__pill--start {
  left: 20%;
  bottom: 130px;
  background: #fff;
  border: 1px solid var(--icc-border-2);
  color: var(--icc-navy);
  box-shadow: 0 10px 26px -12px rgba(29, 81, 129, .3);
}
.icc-chart__pill--peak {
  right: 17%;
  top: 44px;
  background: var(--icc-navy);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(22, 56, 90, .4);
}

/* ---------- X-axis label row (design L116): flow row under the svg, unchanged on mobile ---------- */
.icc-chart__axis {
  display: flex;
  justify-content: space-between;
  padding: 14px 4px 6px;
  font-size: 12px;
  color: var(--icc-muted);
}

/* ==========================================================================
   1. Hero (design L44–58). Centred intro, no scene. `.icc-hero` (chrome.css)
   gives 150/32/0; the design bottom padding is 64 — added here with a PLAIN
   class per mobile-rules.md §1 (responsive.css owns the ≤768/≤480 `.icc-hero`
   shorthand and will zero this again on mobile; that collapse is Phase 5).
   ========================================================================== */
.icc-hero--fallstudie {
  padding-bottom: 64px; /* design 150 32 64 — .icc-hero already gives 150 32 0 */
}
.icc-hero__intro {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  animation: fadeUpB .7s ease both;
}
.icc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--icc-border-2);
  border-radius: var(--icc-r-pill);
  padding: 8px 18px;
  box-shadow: 0 6px 18px -8px rgba(29, 81, 129, .2);
  margin-bottom: 28px;
}
.icc-hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--icc-accent);
  display: block;
}
.icc-hero__eyebrow-label { font-size: 13px; font-weight: 600; color: var(--icc-navy); }

.icc-hero__title {
  font-family: var(--icc-font-head);
  font-size: var(--icc-h1-fallstudie);
  font-weight: 750;
  letter-spacing: var(--icc-ls-h1);
  line-height: 1.05;
  color: var(--icc-navy);
  margin: 0 0 24px;
}
.icc-hero__accent { position: relative; white-space: nowrap; }
.icc-hero__accent-word { position: relative; z-index: 1; }
.icc-hero__swash {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 14px;
  z-index: 0;
}
.icc-hero__swash path {
  stroke: var(--icc-accent);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  opacity: .55;
}

.icc-hero__lead {
  font-size: 17.5px;
  line-height: var(--icc-lh-body);
  max-width: 620px;
  margin: 0 auto 30px;
}

.icc-hero__chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   2. Ergebnisse (design L60–84). `.icc-results` grid columns are OWNED by
   responsive.css; here only the tile visuals (plain classes, no grid props).
   ========================================================================== */
.icc-result {
  background: #fff;
  border: 1px solid var(--icc-border);
  border-radius: var(--icc-r-lg);
  padding: 32px 30px;
  box-shadow: 0 16px 40px -24px rgba(29, 81, 129, .25);
}
.icc-result__value {
  font-family: var(--icc-font-head);
  font-size: 42px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--icc-primary);
  line-height: 1;
}
.icc-result__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--icc-navy);
  margin-top: 12px;
}
.icc-result--dark {
  background: var(--icc-primary);
  border-color: var(--icc-primary);
  box-shadow: 0 20px 44px -20px rgba(29, 81, 129, .5);
  position: relative;
  overflow: hidden;
}
.icc-result--dark .icc-result__value,
.icc-result--dark .icc-result__label { color: #fff; }

/* ==========================================================================
   3. Herausforderung / Lösung (design L123–145). `.icc-split--challenge`
   overrides only the gap (columns already 1fr 1fr on the base `.icc-split`
   rule in responsive.css) — a PLAIN class per mobile-rules.md §1.
   ========================================================================== */
/* Section rhythm (design L123: padding 110px 32px 0; horizontal from
   .icc-container). No default `.icc-section` class on this section (the
   template renders it only when it has content), so the top gap to the
   ergebnisse tiles above is added explicitly; responsive.css §3.9b reduces
   this to 64px at ≤768 (mobile-rules.md §1 site rhythm). */
.icc-fs-section--hl { padding-top: 110px; }
.icc-split--challenge { gap: 22px; }
.icc-challenge-card,
.icc-solution-card {
  border-radius: var(--icc-r-xl);
  padding: 46px 44px;
}
.icc-challenge-card { background: #fff; border: 1px solid var(--icc-border); }
.icc-solution-card { background: var(--icc-tint); }
.icc-h2--split { font-size: 28px; margin: 0 0 16px; }
.icc-challenge-card p,
.icc-solution-card > p {
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.icc-challenge-card p:last-child,
.icc-solution-card > p:last-child { margin-bottom: 22px; }
.icc-solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.icc-solution-tags .icc-chip { padding: 9px 16px; }
.icc-tag-icon {
  display: inline-flex;
  color: var(--icc-primary);
}

/* ==========================================================================
   4. Über den Kunden (design L147–163). `.icc-split--kunde` sets the 380/1fr
   desktop ratio (gap 64 + align-items:center already inherit from the base
   `.icc-split` rule) — a PLAIN class.
   ========================================================================== */
/* Section rhythm (design L147: padding 110px 32px 0; horizontal from
   .icc-container); responsive.css §3.9b reduces this to 64px at ≤768. */
.icc-fs-section--kunde { padding-top: 110px; }
.icc-panel--kunde {
  background: var(--icc-panel-gradient);
  border: 1px solid var(--icc-panel-border);
  padding: 64px;
}
.icc-split--kunde { grid-template-columns: 380px 1fr; }
/* No client image: single column, plain class (mobile-rules.md §1); declared
   after .icc-split--kunde so it wins when both classes are present. */
.icc-split--kunde-solo { grid-template-columns: 1fr; }
/* Solo mode: no 380px image column to balance against, so let the copy
   measure widen inside the full 64px-padded panel (supervisor visual review). */
.icc-split--kunde-solo .icc-kunde__desc { max-width: 760px; }
/* R1: design height:280 content-box + padding:24×2 + border:1×2 → border-box
   height:330 (280 + 48 + 2 = 330). */
.icc-media-box {
  display: block;
  width: 100%;
  height: 330px; /* 280 + 2*24 + 2*1 = 330 */
  border-radius: var(--icc-r-lg);
  object-fit: cover;
}
.icc-h2--kunde { font-size: clamp(26px, 2.8vw, 36px); margin: 0 0 16px; }
.icc-kunde__desc {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 560px;
}
.icc-kunde__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   5. Weitere Erfolgsgeschichten (design L165–194). `.icc-grid-3` columns are
   OWNED by responsive.css; here only card visuals (plain classes).
   ========================================================================== */
/* Section rhythm (design L165: padding 110px 32px 96px; horizontal from
   .icc-container) — the 96px bottom is the gap to the CTA band below (its own
   section carries no top padding, design L196: 0 32px 32px). responsive.css
   §3.9b reduces this to 64px top/bottom at ≤768. */
.icc-fs-section--weitere { padding: 110px 0 96px; }
.icc-weitere__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.icc-h2--weitere { font-size: clamp(28px, 3.2vw, 42px); margin: 0; }
.icc-weitere__all {
  font-size: 14px;
  font-weight: 600;
  color: var(--icc-primary);
  text-decoration: none;
}
.icc-weitere__all:hover { color: var(--icc-primary-hover); text-decoration: underline; }
/* The dark CTA card in .icc-grid-3 keeps the pre-existing related-card box
   model (the 2 related slots now use the shared .icc-fs-card block). */
.icc-card--related {
  display: block;
  border-radius: var(--icc-r-lg);
  padding: 32px 30px;
  text-decoration: none;
  cursor: pointer;
}
.icc-card--related-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.icc-related-cta__title {
  font-family: var(--icc-font-head);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.icc-related-cta__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 20px;
}
.icc-related-cta__btn {
  display: inline-block;
  align-self: flex-start;
  background: #fff;
  color: var(--icc-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--icc-r-pill);
  transition: background var(--icc-ease), color var(--icc-ease);
}
.icc-related-cta__btn:hover { background: var(--icc-accent); color: #fff; }