/* =============================================================
   unterseiten.css – /leistung, /ergebnisse, /ueber-mich, /preis
   Baut auf components.css und home.css auf. Farben nur über Tokens aus brand.css.
   ============================================================= */

/* Hero der Unterseiten: Headline + Text, rechts die Flugbahn-Zeichnung (components.css) */
.sub_hero{max-width:44rem}
.sub_hero-facts{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:2.5rem;padding-top:2rem;border-top:1.5px dashed var(--line-strong)}
.sub_hero-fact{display:flex;flex-direction:column;gap:.25rem;max-width:13rem}
.sub_hero-fact-number{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:2.25rem;line-height:1;white-space:nowrap}
.sub_hero-fact-label{font-size:.875rem;line-height:1.45;color:var(--text-muted)}

/* Raster */
.sub_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.sub_grid.is-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:991px){.sub_grid.is-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sub_grid,.sub_grid.is-3{grid-template-columns:1fr;gap:1rem}}

/* Baustein-Karte mit Nummer */
.block_card{display:flex;flex-direction:column;padding:2.5rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.block_card.is-highlight{border-color:var(--marine);box-shadow:inset 0 0 0 .5px var(--marine)}
.block_number{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--marine);font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:1.25rem}
.block_card.is-highlight .block_number{background:var(--limette);border-color:var(--limette)}
.block_text{color:var(--text-muted)}
.block_list{color:var(--text-muted)}
@media (max-width:640px){.block_card{padding:1.75rem}}

/* Prinzip-Karte (kleiner, ohne Liste) */
.principle_card{padding:2rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.principle_icon{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.875rem;background:var(--limette);color:var(--marine)}
.principle_icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.principle_text{color:var(--muted-on-surface)}

/* Zweispaltig: Text links, Inhalt rechts */
.sub_split{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
.sub_split-sticky{position:sticky;top:calc(var(--navbar-height) + 2rem)}
@media (max-width:991px){.sub_split{grid-template-columns:1fr;gap:2.5rem}.sub_split-sticky{position:static}}

/* Werdegang als Flugbahn: gepunktete Linie mit Stationen */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:.6875rem;top:.75rem;bottom:.75rem;border-left:2.5px dotted var(--marine)}
.timeline_item{position:relative;margin:0;padding:0 0 2.5rem 3rem}
.timeline_item:last-child{padding-bottom:0}
.timeline_item::before{content:"";position:absolute;left:0;top:.25rem;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--hafer);border:2.5px solid var(--marine);box-sizing:border-box}
.timeline_item.is-now::before{background:var(--limette)}
.timeline_label{display:block;margin-bottom:.25rem;font-size:.875rem;font-weight:600;color:var(--text-soft)}
.timeline_text{color:var(--text-muted)}

/* Kostenaufstellung */
.cost_card{padding:2.5rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.cost_list{margin:0}
.cost_row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:1.5px dashed var(--line-strong)}
.cost_row:first-child{padding-top:0}
.cost_row dt{color:var(--text-muted)}
.cost_row dd{margin:0;font-weight:600;white-space:nowrap}
.cost_row.is-total{border-bottom:0;padding-bottom:0}
.cost_row.is-total dt{font-weight:600;color:var(--marine)}
.cost_row.is-total dd{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:2rem;line-height:1}
.cost_note{font-size:.8125rem;color:var(--text-soft)}
@media (max-width:640px){.cost_card{padding:1.75rem}.cost_row.is-total dd{font-size:1.625rem}}

/* Angebots-Karten (Bau, Analyse, Check) */
.offer_card{display:flex;flex-direction:column;padding:2rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.offer_price{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:2rem;line-height:1.1}
.offer_text{color:var(--text-muted)}
.offer_card .button{margin-top:auto}
.offer_link{align-self:flex-start;margin-top:auto;padding-top:1.25rem;font-weight:600;color:var(--marine);text-decoration:none}
.offer_link span{background:linear-gradient(transparent 62%,var(--limette) 62%)}

/* Kennzahlen-Liste (Ergebnisse) */
.kpi_list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.kpi_list li{display:flex;gap:1rem;margin:0;padding:1.25rem 1.5rem;border-radius:var(--radius-medium);background:var(--surface-card);border:1px solid var(--line)}
.kpi_list strong{display:block;font-weight:600}
.kpi_list span{color:var(--muted-on-surface)}
.kpi_list li.is-main{background:var(--limette);border-color:var(--limette);color:var(--marine)}
.kpi_list li.is-main span{color:#34425E}

/* Großes Porträt auf /ueber-mich */
.portrait_note{font-size:.875rem;color:var(--text-soft)}

/* Individuelle Icons statt Häkchen (z. B. Bausteine auf /leistung) */
.feature_icon{flex:none;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-top:-.125rem;border-radius:.625rem;background:var(--himmel);color:var(--marine)}
.feature_icon svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.block_card.is-highlight .feature_icon{background:var(--limette)}
.surface-leinen .feature_icon{background:var(--himmel-hell)}

/* =============================================================
   PROJEKTE (/ergebnisse) · Text + nachgebildetes Google-Ads-Diagramm
   Kacheln mit den Kennzahlen, darunter der Verlauf der Leads (ohne Skala,
   Kurvenform aus dem Original nachgezeichnet). Eine Kennzahl pro Kurve, keine zweite Achse.
   ============================================================= */
.proj_list{display:grid;gap:6rem}
.proj_component{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.proj_component.is-reverse .proj_text{order:2}
.proj_client{font-size:.9375rem;font-weight:600;color:var(--text-soft)}
.proj_steps{display:grid;gap:1.5rem}
.proj_step{padding-left:1.25rem;border-left:2.5px dotted var(--line-strong)}
.proj_step.is-result{border-left:2.5px solid var(--limette)}
.proj_step-label{margin-bottom:.25rem;font-size:.875rem;font-weight:600;color:var(--marine)}
.proj_step-text{color:var(--text-muted)}
.proj_results{margin:0;padding-left:1.125rem;color:var(--text-muted)}
.proj_results li{margin:.25rem 0;padding-left:.25rem}
.proj_results li::marker{color:var(--marine)}

.proj_chart{margin:0;padding:1.75rem;border-radius:var(--radius-large);background:var(--marine);color:var(--weiss)}
.proj_chart-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:1.25rem;font-size:.875rem;font-weight:600;color:var(--muted-dark)}
.proj_kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem}
.proj_kpi{display:flex;flex-direction:column;gap:.25rem;padding:1rem;border-radius:var(--radius-medium);background:rgba(255,255,255,.07)}
.proj_kpi.is-main{background:var(--limette);color:var(--marine)}
.proj_kpi-label{font-size:.8125rem;line-height:1.3;color:var(--muted-dark)}
.proj_kpi.is-main .proj_kpi-label{color:#34425E}
.proj_kpi-value{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:1.625rem;line-height:1.05;white-space:nowrap}
.proj_plot{margin-top:1.5rem;height:9rem}
.proj_plot svg{display:block;width:100%;height:100%;overflow:visible}
.proj_grid{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.proj_area{fill:rgba(205,242,92,.14);stroke:none}
.proj_line{fill:none;stroke:var(--limette);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.proj_caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1rem;font-size:.8125rem;color:var(--muted-dark)}
.proj_legend{display:inline-flex;align-items:center;gap:.5rem;color:var(--weiss)}
.proj_legend-swatch{display:inline-block;width:1rem;height:3px;border-radius:2px;background:var(--limette)}
@media (max-width:991px){
  .proj_list{gap:4.5rem}
  .proj_component{grid-template-columns:1fr;gap:2rem}
  .proj_component.is-reverse .proj_text{order:0}
}
@media (max-width:640px){
  .proj_chart{padding:1.25rem}
  .proj_kpis{grid-template-columns:1fr 1fr}
  .proj_kpi-value{font-size:1.375rem}
  .proj_plot{height:7rem}
}

/* Zurück-Link auf Leistungs-Unterseiten */
.sub_back{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--text-muted);text-decoration:none}
.sub_back:hover{color:var(--marine)}
/* Textlink am Ende einer Baustein-Karte */
.block_card .offer_link{margin-top:auto;padding-top:1.5rem}