/* ═══════════════════════════════════════════════════════════════
   frontend/css/finanzierung-raster.css — v3238 · Marcel 09.11.2026

   Reiter Finanzierung, Karten „Darlehen I" und „Darlehen II":
   „Anschlussfinanzierung und Position der Felder nicht gut im Tab
   Finanzierung."

   Vorher: sieben .g2-Paare in Ladereihenfolge — Eigenkapital und
   Darlehenssumme je allein in einer Zeile, die Rate allein, drei Felder
   (Zinsbindung · Verwendung · Restschuld) in einem Zwei-Spalten-Raster,
   also eines umgebrochen; die Anschlussfinanzierung als Schalter
   zwischen den Import-Knöpfen, ihre Felder in drei .g2 mit Leerzelle.

   Jetzt Gruppen mit eigenem Raster (index.html .fz-gruppen), Vorbild
   css/objektdaten-raster.css (v3225):
     Darlehen       Art (2) · Auszahlung · Verwendung
     Eigenkapital   Eigenkapital (2) · Haken „= Kaufnebenkosten" (2)
     Konditionen    Betrag (2) · Zins · Tilgung /
                    Zinsbindung · Rate · davon Zinsen · davon Tilgung /
                    Kapitaldeckung (volle Breite)
     Verlauf        Restschuld Ende Zinsbindung (2) · bis · Volltilgung
     Anschluss      eigener, abgesetzter Kasten direkt darunter:
                    Beginn · Anschlusszins · Anschlusstilgung · Zinsbindung /
                    Rate · Zinsrisiko (2) · Mehrkosten
   Vier Spalten, unter 480 px Kartenbreite zwei (Container-Abfrage, nicht
   Fenster). Beschriftungen einzeilig, Felder volle Breite, oben bündig.
   Eigene Klassen statt .g2: die .g2-Regeln in style.css greifen hier
   absichtlich nicht.
   ═══════════════════════════════════════════════════════════════ */

/* v3238 · Behälter misst die Kartenbreite */
.fz-gruppen {
  container-type: inline-size;
  container-name: fz;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* v3238 · gemeinsames Raster jeder Gruppe: vier gleiche Spalten */
.fz-gruppen .fz-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
  padding: 10px 0;
  min-width: 0;
}
/* v3261: die Raster stehen jetzt in .fz-gruppe-inhalt (eingeklappte Gruppen) */
.fz-gruppe-inhalt > .fz-raster:first-child { padding-top: 0; }
.fz-gruppe-inhalt > .fz-raster + .fz-raster {
  border-top: 1px solid color-mix(in srgb, var(--border, #E0DBD3) 75%, transparent);
}
.fz-gruppen .fz-raster > * { min-width: 0; }
.fz-gruppen .fz-raster > .f { margin: 0; gap: 4px; }
.fz-gruppen .fz-raster > .fz-s2 { grid-column: span 2; }
.fz-gruppen .fz-raster > .fz-s3 { grid-column: span 3; }
.fz-gruppen .fz-raster > .fz-voll { grid-column: 1 / -1; }

/* v3238 · Beschriftungen einzeilig, Ausgabefelder ohne Umbruch */
.fz-gruppen .fz-raster > .f > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-gruppen .fz-raster > .f > .cf { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-gruppen .fz-raster > .f > .iw,
.fz-gruppen .fz-raster > .f > input,
.fz-gruppen .fz-raster > .f > select { width: 100%; min-width: 0; }
.fz-gruppen .fz-raster > p.hint { margin: 0; }

/* v3238 · Haken „Eigenkapital = Kaufnebenkosten" auf Höhe des Eingabefelds */
.fz-gruppen .fz-ek > .fz-haken { align-self: end; min-height: 38px; display: flex; align-items: center; }
.fz-gruppen .fz-ek > .fz-haken .cb-label { white-space: normal; }

/* v3238 · Werkzeuge (Tilgungsplan, Bank-PDF) als eine Zeile */
.fz-gruppen .fz-werkzeuge {   /* v3261: in der Gruppe „Werkzeuge" */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0;
}

/* v3238 · Anschlussfinanzierung: abgesetzter Kasten direkt unter dem Darlehen */
.fz-gruppen .fz-anschluss {   /* v3261: in der Gruppe „Anschlussfinanzierung", Rahmen trägt die Gruppe (unten) */
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border, #E0DBD3) 90%, transparent);
  border-left: 3px solid var(--wl-c9a84c, #c9a84c);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wl-c9a84c, #c9a84c) 5%, transparent);
}
.fz-anschluss > .fz-anschluss-kopf { margin: 0; }
.fz-anschluss > .fz-anschluss-kopf .toggle-slim > span { font-weight: 600; }
.fz-anschluss > .fz-raster { padding: 10px 0 2px; }
.fz-anschluss > .fz-anschluss-fuss { display: block; margin-top: 6px; }

/* v3256 · Kapitaldeckung („Es fehlen …"): die beiden Knöpfe rechts neben dem Text,
   untereinander, gleich breit; kein leerer Platz, wenn beide verborgen sind */
#kd-box .kd-knoepfe {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
#kd-box .kd-knoepfe:not(:has(> button:not([style*="display:none"]):not([style*="display: none"]))) { display: none; }
/* Gegen .sec .btn-outline (style.css, 10px 16px !important) - gemessen 09.11.: 39 px hoch */
#s3 #kd-box .kd-knoepfe > .btn { padding: 4px 10px !important; font-size: 11.5px !important; line-height: 1.3 !important; min-height: 0 !important; white-space: nowrap; }

/* v3256 · Marktzins-Hinweis unter dem Zinsfeld (js/indicative-zins.js): eine kompakte
   Zeile, Zahl und Prozentzeichen nie getrennt; der Knopf „Marktzins übernehmen" steht in
   der Nachbarspalte unter dem Tilgungsfeld auf derselben Höhe */
.fz-gruppen .fz-raster > .f > .dp-marktzins-hint {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  min-height: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 4px;
}
.dp-marktzins-hint .dp-mz-wert { white-space: nowrap; }
.fz-gruppen .fz-raster > .f > .dp-mz-knopf-zeile {
  margin-top: 3px;
  min-height: 22px;
  display: flex;
  align-items: center;
}
/* zwei IDs: schlägt einheitlich.css „html[data-dp-layout] body .body :is(#s3 …) .btn.btn-sm"
   (min-height 38px, 13px !important; Spezifität 1,4,2) - gemessen 09.11. */
#s3 #d1t_field .dp-mz-knopf-zeile > .btn.dp-mz-uebernehmen {
  padding: 2px 8px !important;   /* gegen .sec .btn-outline 10px 16px !important */
  font-size: 11px !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* v3238 · schmale Karte (Handy, Tablet hochkant): zwei Spalten */
@container fz (max-width: 480px) {
  .fz-gruppen .fz-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fz-gruppen .fz-raster > .fz-s3 { grid-column: 1 / -1; }
}
/* v3256 · schmale Karte: Kapitaldeckung untereinander, Knöpfe nebeneinander darunter */
@container fz (max-width: 480px) {
  #kd-box { flex-wrap: wrap; }
  #kd-box > div:first-child { flex-basis: 100% !important; }
  #kd-box .kd-knoepfe { flex: 1 1 100%; min-width: 0; }   /* untereinander, volle Breite */
  #s3 #kd-box .kd-knoepfe > .btn { white-space: normal; }
}

/* v3238 · Gruppe ganz ausgeblendet (Detailgrad markiert die .f mit data-dp-dg):
   kein leerer Streifen mit Trennlinie, kein leerer Anschluss-Kasten */
body.dp-dg-1 #s3 .fz-gruppen .fz-raster:not(:has(> .f:not([data-dp-dg="2"]):not([data-dp-dg="3"]))),
body.dp-dg-2 #s3 .fz-gruppen .fz-raster:not(:has(> .f:not([data-dp-dg="3"]))),
body.dp-dg-1 #s3 .fz-gruppen .fz-anschluss:not(:has(.f:not([data-dp-dg="2"]):not([data-dp-dg="3"]))),
body.dp-dg-2 #s3 .fz-gruppen .fz-anschluss:not(:has(.f:not([data-dp-dg="3"])))  { display: none; }

/* ═══════════════════════════════════════════════════════════════
   v3261 · Marcel 09.11.2026: „Der Tab Darlehen I ist auch irgendwie
   unübersichtlich." Je Darlehen (I, II, jedes weitere) gleich gebaut:
     Kopf     fünf Kacheln mit den Eckdaten (js/finanzierung-kopf.js,
              bei weiteren Darlehen js/darlehen-weitere-ui.js)
     Gruppen  <details class="fz-gruppe"> Konditionen bearbeiten ·
              Anschlussfinanzierung · Bankdaten · Werkzeuge
   Optik wie Reiter Objekt: weiße Karten, Kopf in Mono-Versalien 10 px,
   geöffnet über einer Goldlinie. Gold nur über var(--wl-…).
   ═══════════════════════════════════════════════════════════════ */
.fz-kopf {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
  min-width: 0;
}
.fz-kachel {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  padding: 7px 9px 8px;
  background: #fff;
  border: 1px solid #EFEBE3;
  border-top: 2px solid var(--wl-c9a84c, #C9A84C);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .15s;
}
.fz-kachel:hover { border-color: color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 55%, #EFEBE3); border-top-color: var(--wl-c9a84c, #C9A84C); }
.fz-kachel:focus-visible { outline: 2px solid var(--wl-c9a84c, #C9A84C); outline-offset: 1px; }
.fz-k-lbl {
  font: 500 9.5px/1.25 "JetBrains Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: #8A8272;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fz-k-wert {
  font: 600 15px/1.25 "Space Grotesk", Inter, system-ui, sans-serif;
  color: #050505;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fz-k-unter {
  font: 400 10.5px/1.3 Inter, system-ui, sans-serif;
  color: #8A8272;
  min-height: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* leerer Auszahlungs-Hinweis (v269) hielt die Zeile „Art · Auszahlung · Verwendung" 22 px höher - gemessen 09.11. */
#v269-d1auszahl-hint:empty { display: none; }

/* Kapitaldeckung zwischen Kopf und Gruppen (vorher volle Zeile im Konditionen-Raster) */
.fz-gruppen > .fz-deckung { margin: 0 0 2px; min-width: 0; }

/* Gruppen */
.fz-gruppe {
  margin-top: 6px;
  background: #fff;
  border: 1px solid #EFEBE3;
  border-radius: 2px;
  min-width: 0;
}
.fz-gruppe > summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 34px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  font: 600 10px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: #2A2727;
}
.fz-gruppe > summary::-webkit-details-marker { display: none; }
.fz-gruppe > summary::marker { content: ''; }
.fz-gruppe > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--wl-c9a84c, #C9A84C);
  border-bottom: 1.5px solid var(--wl-c9a84c, #C9A84C);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.fz-gruppe[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.fz-gruppe[open] > summary { border-bottom: 1px solid var(--wl-c9a84c, #C9A84C); }
.fz-gruppe > summary:hover { color: #050505; }
.fz-gruppe > summary:focus-visible { outline: 2px solid var(--wl-c9a84c, #C9A84C); outline-offset: -2px; }
.fz-g-titel { flex: 0 0 auto; white-space: nowrap; }
.fz-g-stand {
  flex: 1 1 auto; min-width: 0;
  text-align: right;
  font: 400 11.5px/1.35 Inter, system-ui, sans-serif;
  letter-spacing: 0; text-transform: none;
  color: #8A8272;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fz-gruppe-inhalt { padding: 10px 12px; min-width: 0; }

/* Anschluss-Kasten in seiner Gruppe: kein zweiter Rahmen */
.fz-gruppe .fz-anschluss {
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
}

/* „Mehr" in einem Hinweis: Langtext eingeklappt */
details.fz-mehr { display: inline; }
details.fz-mehr > summary {
  display: inline; list-style: none; cursor: pointer;
  font: 600 10px/1.5 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wl-9a7f33, #9a7f33);
}
details.fz-mehr > summary::-webkit-details-marker { display: none; }
details.fz-mehr > summary::after { content: " ▾"; }
details.fz-mehr[open] > summary::after { content: " ▴"; }
details.fz-mehr[open] { display: block; margin-top: 4px; padding: 6px 10px; background: #fff; border-left: 2px solid var(--wl-c9a84c, #C9A84C); }

/* Weitere Darlehen: jeder Eintrag wie Darlehen I und II */
#dw-box > .dw-eintrag { padding: 10px 0 12px; border-top: 1px solid #EFEBE3; }
#dw-box > .dw-eintrag > .dw-titel {
  margin: 0 0 6px;
  font: 600 10px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: #2A2727;
}
#dw-box .dw-werkzeuge { margin-top: 0; }

/* schmale Karte (Handy): drei Kacheln je Zeile, Stand der Gruppe unter dem Titel */
@container fz (max-width: 480px) {
  .fz-kopf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fz-gruppe > summary { flex-wrap: wrap; row-gap: 2px; }
  .fz-g-stand { flex-basis: 100%; text-align: left; padding-left: 16px; }
  .fz-gruppe-inhalt { padding: 10px; }
}
@container fz (max-width: 330px) {
  .fz-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fz-kopf > .fz-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* die Rate allein: volle Breite */
}