/* =========================================================================
   Inhaltsseiten im hellen Schema (03.10.2026): /vergleich/ mit allen
   Vergleichsseiten und /ratgeber/ mit allen Artikeln.
   Laedt nach unterseite-hell.css (werkzeuge/vergleich-bauen.py und
   werkzeuge/ratgeber-bauen.py haengen es ueber extra_css ein) und ergaenzt
   nur, was es dort nicht gibt:
     1. Katalog-Karten als Links (Uebersichten), Muster /anbindungen/
     2. Vergleichstabelle mit Textzellen, am Handy gestapelt
     3. Kostenvergleich mit Preiskarten der Startseite
     4. Kleinteile der Vergleichsseiten
     5. Ratgeber: ruhiger Kopf, Hinweis, Tabellen, Quellen
     6. Handy
   ========================================================================= */

/* ---------- 1. Katalog-Karten als Links --------------------------------- */
/* Karte wie im Integrations-Katalog: 22px mit 8px Innenrand, getoente
   Kopfflaeche in --farbe, Link unten; klickbar ueber .u-klick/.u-klick-link
   aus unterseite-hell.css (dieselben Klassen wie die Hilfe-Bereiche). */
.ik-karte {
  --farbe: var(--accent);
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--line-mid);
  border-radius: 22px;
  background: var(--paper);
}
.ik-kopf {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in srgb, var(--farbe) 22%, transparent) 0, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--farbe) 8%, #fff) 0%, #fff 75%);
}
.ik-logo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--farbe) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--farbe) 12%, transparent);
  font-family: Outfit, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--farbe);
}
.ik-logo svg { width: 22px; height: 22px; }
.ik-karte h3 { font-family: Outfit, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.ik-kopf p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ik-stand { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-mid); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink-3); }

/* ---------- 2. Vergleichstabelle mit Textzellen ------------------------- */
/* .u-tabelle aus unterseite-hell.css, hier mit Text statt Haken: links
   buendig, Zeilen mindestens 56px, ClosingHub-Spalte hervorgehoben. */
.ih-vg .u-tabelle thead th { text-align: left; }
.ih-vg .u-tabelle thead th:first-child { width: 26%; }
.ih-vg .u-tabelle th[scope="row"] { padding-top: 14px; padding-bottom: 14px; line-height: 1.4; }
.ih-vg .u-tabelle td { padding-top: 14px; padding-bottom: 14px; text-align: left; line-height: 1.5; }
.ih-vg .u-tabelle .u-text { font-size: 14.5px; color: var(--ink-3); }
.ih-vg .u-tabelle .u-text.u-hervor { color: var(--ink); font-weight: 500; }
.ih-vg .u-nein { display: inline-flex; }
.ih-wir { display: inline-flex; align-items: center; gap: 10px; }
.ih-wir .logo-mark i { width: 18px; height: 18px; }
.ih-wir .logo-mark i + i { margin-left: -7px; }
.ih-seite .u-tabelle-fuss { max-width: 860px; line-height: 1.55; }

/* ---------- 3. Kostenvergleich ------------------------------------------ */
/* Zwei Preiskarten der Startseite (.pr-karte); per Subgrid stehen Kopfflaeche
   und Fusstext beider Karten auf gleicher Hoehe. Die andere Karte ist grau. */
.ih-kosten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 16px; }
.ih-kosten .pr-karte { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.ih-kosten .pr-fuss { margin-top: 0; font-size: 14px; line-height: 1.55; }
.ih-grau { --p-grund: #F5F4F8; --p-a: #B4AEC2; --p-b: #E8E5EF; --p-ton: #5E5772; }
.ih-mono { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 600; line-height: 1; }
.ih-stand { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }

/* ---------- 4. Kleinteile der Vergleichsseiten -------------------------- */
.ih-mehr { margin-top: 28px; }
.ih-marken { margin-top: 28px; }
.uk-knopf.ih-uk-leise { background: var(--nebel); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-mid); }
.ih-seite .uk-titel { margin: 14px 0 2px; color: var(--ink-4); }

/* ---------- 5. Ratgeber ------------------------------------------------- */
/* Ruhiger Kopf: ohne Geldscheine und Punktraster, H1 etwas kleiner, die
   Lesezeit sitzt als Bereichszeile darueber. */
.ih-ruhig .u-buehne::after, .ih-ruhig .u-punkte { display: none; }
.ih-ruhig .u-buehne { padding-bottom: 72px; }
.ih-ruhig h1 { font-size: clamp(38px, 4vw, 56px); max-width: 17em; }
.ih-ruhig .u-hero-text { max-width: 860px; }

/* Leiste links: Lesezeit, Inhaltsverzeichnis (.legal-toc), Knopf. */
.rg-seite-leiste .legal-toc nav { max-height: calc(100vh - 340px); overflow-y: auto; scrollbar-width: thin; }
.rg-artikel-fuss { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Hinweis im Text (Kein Rechtsrat, Beispiel-Wortlaut). */
.rg-text .rg-hinweis { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--line-mid); border-radius: 16px; background: var(--nebel); font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.rg-text .rg-hinweis strong { color: var(--ink); }

/* Tabellen im Artikel: Karte mit 20px, Kopf leise, Zeilen mindestens 56px. */
.rg-text .rg-tabelle { margin: 8px 0 24px; overflow: hidden; border: 1px solid var(--line-mid); border-radius: var(--r-karte); background: var(--paper); box-shadow: var(--shadow-card); }
.rg-text .rg-tabelle table { margin: 0; font-size: 15px; line-height: 1.5; }
.rg-text .rg-tabelle caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rg-text .rg-tabelle th, .rg-text .rg-tabelle td { height: 56px; padding: 12px 18px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.rg-text .rg-tabelle tbody tr:last-child > * { border-bottom: 0; }
.rg-text .rg-tabelle thead th { height: 48px; background: var(--nebel); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rg-text .rg-tabelle th[scope="row"] { font-weight: 600; color: var(--ink); }

/* Quellen unter dem Artikel. */
.ih-quellen { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* ---------- 6. Handy ---------------------------------------------------- */
@media (max-width: 900px) {
  .ih-kosten { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .ih-kosten .pr-karte { display: flex; grid-row: auto; }
  .ih-kosten .pr-fuss { margin-top: auto; }
  .rg-seite-leiste .legal-toc nav { max-height: none; }
}
@media (max-width: 620px) {
  .ik-kopf { padding: 18px 18px 20px; }
  .ik-logo { width: 40px; height: 40px; margin-bottom: 10px; border-radius: 11px; font-size: 18px; }
  .ik-stand { top: 14px; right: 14px; }
  .ik-karte h3 { font-size: 18px; }
  .ik-kopf p { font-size: 14.5px; }

  /* Tabelle gestapelt: je Zeile das Thema, darunter beide Antworten mit
     Spaltennamen davor. ClosingHub zuerst und leicht getoent. */
  .ih-vg .u-tabelle, .ih-vg .u-tabelle tbody, .ih-vg .u-tabelle tr { display: block; width: 100%; }
  .ih-vg .u-tabelle tr { padding: 16px 16px 14px; border-top: 1px solid var(--line); }
  .ih-vg .u-tabelle tbody tr:first-child { border-top: 0; }
  .ih-vg .u-tabelle th[scope="row"] { display: block; width: auto; height: auto; padding: 0 0 10px; border: 0; font-size: 15.5px; font-weight: 600; }
  .ih-vg .u-tabelle td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; height: auto; padding: 8px 10px; border: 0; border-radius: 10px; white-space: normal; text-align: left; }
  .ih-vg .u-tabelle td::before { content: attr(data-spalte); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
  .ih-vg .u-tabelle td.u-hervor { background: var(--tint-weak); }
  .ih-vg .u-tabelle td.u-hervor::before { color: var(--accent); }
  .ih-vg .u-tabelle tbody tr:not(.u-gruppe):hover th, .ih-vg .u-tabelle tbody tr:not(.u-gruppe):hover td:not(.u-hervor) { background: none; }
  .ih-vg .u-tabelle td + td { margin-top: 4px; }

  .ih-ruhig .u-buehne { padding-bottom: 40px; }
  .rg-text .rg-hinweis { padding: 14px 16px; font-size: 14.5px; }
  /* Artikel-Tabellen gestapelt, Spaltenname aus data-spalte. */
  .rg-text .rg-tabelle table, .rg-text .rg-tabelle tbody, .rg-text .rg-tabelle tr { display: block; width: 100%; }
  .rg-text .rg-tabelle thead { display: none; }
  .rg-text .rg-tabelle tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .rg-text .rg-tabelle tbody tr:last-child { border-bottom: 0; }
  .rg-text .rg-tabelle th, .rg-text .rg-tabelle td { display: block; height: auto; padding: 0; border: 0; }
  .rg-text .rg-tabelle th[scope="row"] { margin-bottom: 6px; }
  .rg-text .rg-tabelle td { font-size: 14.5px; }
  .rg-text .rg-tabelle td + td { margin-top: 6px; }
  .rg-text .rg-tabelle td[data-spalte]::before { content: attr(data-spalte) ": "; font-weight: 600; color: var(--ink-3); }
}