/* Sektion finanzierung: CSS nur für #finanzierung. Blau, große 20 %, Bildfenster Zürich und Augsburg (Jacques 2026-11-11), Tabelle. */
#finanzierung > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); grid-template-rows: auto auto auto auto; align-content: start; }
#finanzierung h2 { grid-column: 1 / span 9; max-width: none; }

#finanzierung .big20 { grid-column: 1 / span 4; grid-row: 2; position: relative; padding-top: 26px; align-self: start; }
#finanzierung .num { display: flex; align-items: flex-start; font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: var(--t-num); line-height: .8; letter-spacing: -0.05em; margin: 0; }
#finanzierung .num span { display: inline-block; }
#finanzierung .num .pc { font-size: .42em; margin-left: .06em; margin-top: .06em; }
#finanzierung .dim { position: absolute; left: 0; right: 10%; top: 0; height: 14px; }
#finanzierung .dim::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--white); transform-origin: left; }
#finanzierung .dim i { position: absolute; top: 0; width: 1px; height: 14px; background: var(--white); transform: rotate(45deg); }
#finanzierung .dim i:first-child { left: 0; } #finanzierung .dim i:last-child { right: 0; }

#finanzierung .f-pics { grid-column: 5 / span 8; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); height: 200px; align-self: start; }
#finanzierung .f-pics figure { position: relative; overflow: hidden; margin: 0; }
#finanzierung .f-pics img { width: 100%; height: 100%; object-fit: cover; }
#finanzierung .f-pics .label { position: absolute; left: 0; bottom: 0; padding: 16px; background: var(--igc-blue); color: var(--on-blue); }

#finanzierung .f-say { grid-column: 1 / span 4; grid-row: 3; align-self: start; margin-top: var(--s-5); font-size: 19px; line-height: 1.5; max-width: 62ch; }
#finanzierung .f-tab { grid-column: 5 / span 8; grid-row: 3; margin-top: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); align-content: start; }
#finanzierung .f-tab h3 { font-family: var(--font-text); font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: 0; padding-bottom: var(--s-2); border-bottom: 1px solid var(--on-blue-soft); }
#finanzierung .f-tab li { font-size: 15px; line-height: 1.5; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-on-blue); }
#finanzierung .note { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s-4); font-size: 15px; line-height: 1.5; color: var(--on-blue-soft); }

/* Bewegung nur mit .mo; Endzustand bei --p: 1 */
.mo #finanzierung .num span { --f: clamp(0, (var(--p, 1) - var(--d)) / .35, 1); transform: translateY(calc((1 - var(--f)) * 40%)); opacity: var(--f); }
.mo #finanzierung .dim::before { transform: scaleX(clamp(0, (var(--p, 1) - .2) / .45, 1)); }

@media (max-width: 1023px) {
  #finanzierung h2, #finanzierung .big20, #finanzierung .f-pics, #finanzierung .f-say, #finanzierung .f-tab, #finanzierung .note { grid-column: 1 / -1; grid-row: auto; }
  #finanzierung .f-pics { margin-top: var(--s-5); height: 220px; }
  #finanzierung .f-say { margin-top: var(--s-6); align-self: start; }
  #finanzierung .f-tab { margin-top: var(--s-5); }
}
@media (max-width: 639px) {
  #finanzierung .num { font-size: 120px; }
  /* Telefon: zwei Fenster untereinander im Format 4:3 */
  #finanzierung .f-pics { height: auto; grid-template-columns: 1fr; gap: var(--s-3); }
  #finanzierung .f-pics figure { aspect-ratio: 4 / 3; }
  #finanzierung .f-tab { grid-template-columns: 1fr; row-gap: var(--s-5); }
  #finanzierung .f-say { font-size: 17px; }
}

/* niedrige Fenster (kleine Laptops): Sektion wächst mit dem Inhalt, nie unter einem Bildschirm */
@media (min-width: 1024px) {
  #finanzierung { height: auto; min-height: calc(var(--h, 1) * 100svh); }
  #finanzierung > .wrap { height: auto; }
}