/* Chosen design A: heading type, colours and cost section. */
@font-face{font-family:DesignJost;src:url('../fonts/jost.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
.vgl-ico{font-family:Inter,system-ui,-apple-system,sans-serif}
h1{hyphenate-limit-chars:12 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6}
h1,h2,h3,h4{font-family:var(--design-heading);font-weight:var(--design-weight);letter-spacing:var(--design-tracking)}
.hero{background:var(--design-hero)}
.hero-bild::before{background:var(--design-frame)}
section.surface,section.mint{background:var(--design-surface)}
.card,.bcard{border-color:var(--design-border);border-radius:16px;box-shadow:0 2px 4px rgba(47,82,93,.025),0 12px 32px rgba(47,82,93,.045)}
.card--surface{background:var(--design-card)}
.calc,.ag-einord,.ag-bloecke{border-color:var(--design-border)}
.statband{background:var(--design-band);border-top:3px solid var(--koralle)}
.vgl>.vgl-pos::before{background:linear-gradient(90deg,var(--petrol),var(--koralle))}
.ix-kosten>.card{padding:26px}
.ix-kosten-ansatz{background:var(--design-solution);border-color:var(--koralle)}
.ix-kosten-label{font-family:Inter,system-ui,sans-serif;color:var(--koralle-tief)}
.ix-kosten-ansatz h4{font-size:22px;line-height:1.25}
.ag-hebel .card{border-top:3px solid var(--koralle)}
main>section:not(.loesung-foto):not(.cta-schluss)>.container>h2::after{content:'';display:block;margin-top:18px;width:54px;height:3px;background:var(--koralle);transform-origin:left}
.hero-bild img{box-shadow:0 18px 46px rgba(47,82,93,.14)}
@media(hover:hover){.ix-kosten>.card{transition:border-color .2s,box-shadow .2s}.ix-kosten>.card:hover{border-color:rgba(228,71,83,.45);box-shadow:0 12px 32px rgba(47,82,93,.09)}}
@media(prefers-reduced-motion:reduce){.design-in,.design-in::after{animation:none!important}.ix-kosten>.card{transition:none}}
@media(max-width:640px){.ix-kosten>.card{padding:22px}.ix-kosten-ansatz{padding:18px}.ix-kosten-ansatz h4{font-size:21px}}

/* A: nähere Anlehnung an Petrol/Blaugrau der ursprünglichen CI, Rot als klare Führung. */
:root{--design-heading:DesignJost,Inter,sans-serif;--design-weight:600;--design-tracking:-.025em;--design-surface:#E3ECEF;--design-card:#EEF3F5;--design-border:#C6D7DD;--design-hero:linear-gradient(115deg,#EDF3F5 0%,#D5E2E7 100%);--design-frame:#B4CBD2;--design-band:linear-gradient(120deg,#2F525D,#243F48);--design-solution:#FFF0F1}
#kosten{background:#DAE7EB}
#kosten .ix-kosten-intro{color:var(--petrol)}

/* Gewählter Entwurf A: nur der Kostenabschnitt. Keine neuen Texte oder Icons. */
#kosten.a-kosten{padding:60px 0;background:#DAE7EB}
.a-kosten>.container{max-width:1136px}
.a-kosten-header h2{max-width:840px}
.a-kosten-vorspann{display:grid;grid-template-columns:1.1fr 1fr;gap:42px;margin-top:24px;align-items:start}
.a-kosten-vorspann>p{margin:0!important;max-width:none!important}
.a-kosten .ix-kosten{display:block;margin-top:30px;overflow:hidden;border:1px solid var(--design-border);border-radius:18px;background:var(--bg);box-shadow:0 12px 32px rgba(47,82,93,.045)}
.a-kosten .ix-kosten>.card{display:grid;grid-template-columns:210px minmax(0,.9fr) minmax(0,1.4fr);grid-template-rows:auto;grid-row:auto;column-gap:28px;row-gap:0;align-items:start;padding:26px 28px;border:0;border-bottom:1px solid var(--design-border);border-radius:0;box-shadow:none;background:var(--bg)}
.a-kosten .ix-kosten>.card:last-child{border-bottom:0}
.a-kosten .ix-kosten-kopf{gap:12px;margin:0;align-items:flex-start;min-width:0}
.a-kosten .ix-kosten-kopf .kv{font-size:20px;line-height:1.25;padding-top:8px;text-align:left;text-wrap:wrap}
.a-kosten .ix-kosten-problem{padding-top:4px;min-width:0}
.a-kosten .ix-kosten-ansatz{margin:0;padding:0 0 0 24px;background:transparent;border:0;border-left:2px solid var(--design-border);border-radius:0;min-width:0}
.a-kosten .ix-kosten-label{font-size:13px;line-height:1.4;margin-bottom:7px}
.a-kosten .ix-kosten-ansatz h4{font-size:20px;line-height:1.25;margin-bottom:7px}
.a-kosten .ix-kosten-ansatz p{font-size:14.5px;line-height:1.65}
.a-kosten .ix-kosten-link{margin-top:24px}
@media(hover:hover){.a-kosten .ix-kosten>.card:hover{background:#F8FAFB;border-color:var(--design-border);box-shadow:none}}
@media(max-width:1050px){
  .a-kosten .ix-kosten>.card{grid-template-columns:185px minmax(0,.85fr) minmax(0,1.3fr);column-gap:22px;padding:24px}
}
@media(max-width:880px){
  .a-kosten-vorspann{grid-template-columns:1fr;gap:14px}
  .a-kosten .ix-kosten>.card{grid-template-columns:210px minmax(0,1fr);column-gap:26px;row-gap:12px}
  .a-kosten .ix-kosten-kopf{grid-column:1;grid-row:1}
  .a-kosten .ix-kosten-problem{grid-column:1;grid-row:2;padding-top:0}
  .a-kosten .ix-kosten-ansatz{grid-column:2;grid-row:1/span 2}
}
@media(max-width:640px){
  #kosten.a-kosten{padding:48px 0}
  .a-kosten .ix-kosten{margin-top:24px;border-radius:14px}
  .a-kosten .ix-kosten>.card{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:14px}
  .a-kosten .ix-kosten-kopf,.a-kosten .ix-kosten-problem,.a-kosten .ix-kosten-ansatz{grid-column:auto;grid-row:auto}
  .a-kosten .ix-kosten-ansatz{margin-top:2px;padding:16px;background:var(--design-card);border:0;border-left:2px solid var(--koralle);border-radius:0 8px 8px 0}
  .a-kosten .ix-kosten-ansatz h4{font-size:20px}
}