/* ===== Blog – ergänzt assets/stil.css ===== */

:root{
  --link-blau:#1B4FD8;
  --link-blau-h:#123FB0;
  --icon-blau:#1B4FD8;
  --icon-blau-fl:#E9EEFC;
  /* Einzige blogeigene Farbe: Nachtblau auf 4 %. Fläche für "Mein Rat" und
     Hover im Inhaltsverzeichnis. Keine neue Markenfarbe, sondern ein Tint des
     vorhandenen --nachtblau. Wird sie außerhalb des Blogs gebraucht, gehört
     sie nach DESIGN.md. */
  --fl-blau-tint:#F1F2F7;
  --rand-karte:#E6E7ED;   /* Rahmen der Blog-Kacheln */
  /* Gefüllter Pfeil nach rechts, als Maske verwendet */
  --pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 11h9.4V7.1l6.3 4.9-6.3 4.9V13H3.4Z' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wrap--schmal{max-width:760px}

/* Beitragsraster: Text bleibt mittig, das Verzeichnis sitzt im linken Freiraum */
.beitrag__raster{max-width:760px;margin:0 auto;padding:0 var(--sp-wrap)}
.inhalt-seitlich{display:none}
@media(min-width:1340px){
  .beitrag__raster{display:grid;grid-template-columns:1fr 760px 1fr;max-width:none;padding:0;gap:0}
  .beitrag__spalte{grid-column:2;min-width:0}
  /* padding-right ist Pflicht: overflow-y:auto macht die Spalte auch waagerecht
     zum Rahmen, sonst wird die Hover-Fläche mit ihrem negativen Rand beschnitten. */
  .inhalt-seitlich{grid-column:1;justify-self:end;align-self:start;display:block;
    width:262px;margin-right:52px;position:sticky;top:calc(var(--header-h) + 32px);
    max-height:calc(100vh - var(--header-h) - 64px);overflow-y:auto;
    border-left:2px solid var(--rand-linie);padding-left:18px;padding-right:16px}
  .inhalt-seitlich .inhalt__titel{font-size:var(--t-label);letter-spacing:.08em;
    text-transform:uppercase;color:var(--hilf-hell);font-weight:600}
  .inhalt-seitlich .inhalt__liste{font-size:.88rem;line-height:1.4}
  .inhalt-seitlich .inhalt__liste li{margin-bottom:1px}
  /* Im Fließtext wird es dann überflüssig */
  .beitrag__text .inhalt{display:none}
}

/* --- Kopfbereiche --- */
.blog-kopf{background:var(--fl-tint);padding-top:var(--s7);padding-bottom:var(--s6)}
.blog-liste{background:var(--fl-tint)}
.blog-kopf h1{margin-bottom:var(--s3)}
.rubrik-kopf{display:flex;align-items:center;gap:16px;margin-bottom:var(--s3)}
.rubrik-kopf h1{margin-bottom:0}
.rubrik-kopf .rubrik-icon{width:64px;height:64px;margin-bottom:0}
.rubrik-kopf .rubrik-icon svg{width:36px;height:36px}
.blog-kopf .lead{max-width:60ch;color:var(--hilf-hell)}

.brotkrume{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:var(--t-label);color:var(--hilf-hell);margin-bottom:var(--s4)}
.brotkrume a{color:var(--link-blau);text-decoration:none}
.brotkrume a:hover{text-decoration:underline}

.rubrik-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.rubrik-filter a,.rubrik-filter__aktiv{display:inline-flex;align-items:center;
  padding:7px 15px;border-radius:var(--radius-pille);font-size:var(--t-label);
  font-weight:600;line-height:1;text-decoration:none}
.rubrik-filter a{color:var(--indigo);background:#fff;border:1px solid var(--rand-tint)}
.rubrik-filter a:hover{border-color:var(--rand-hover)}
.rubrik-filter__aktiv{background:var(--indigo);color:#fff;border:1px solid var(--indigo)}

/* --- Suche auf der Uebersicht ---
   Filtert die schon ausgelieferten Kacheln im Browser. Das Feld erscheint nur mit
   JavaScript (html.js), weil es ohne Skript nichts taete - ohne Skript bleibt die
   vollstaendige Liste stehen, die ist die Grundfassung. */
.suche{display:none}
.js .suche{display:flex;gap:8px;align-items:center;margin-top:var(--s5);max-width:520px}
.suche input{flex:1;min-width:0;font:inherit;font-size:var(--t-body);color:var(--titel);
  background:#fff;border:1px solid var(--rand-tint);border-radius:var(--radius-pille);
  padding:11px 17px;-webkit-appearance:none;appearance:none;
  transition:border-color .25s ease,box-shadow .25s ease}
.suche input::placeholder{color:var(--hilf-hell);opacity:.75}
.suche input:hover{border-color:var(--rand-hover)}
.suche input:focus-visible{outline:none;border-color:var(--link-blau);
  box-shadow:0 0 0 3px rgba(27,79,216,.15)}
.suche input::-webkit-search-cancel-button{display:none}
.suche__weg{font:inherit;font-size:var(--t-label);font-weight:600;color:var(--indigo);
  background:#fff;border:1px solid var(--rand-tint);border-radius:var(--radius-pille);
  padding:11px 15px;cursor:pointer;flex:none}
.suche__weg:hover{border-color:var(--rand-hover)}
.suche__stand{color:var(--hilf-hell);font-size:var(--t-label);margin:0 0 var(--s4)}
.suche__stand:empty{display:none}
.suche__leer{max-width:56ch;margin-top:var(--s5)}
/* .karte ist ein Flex-Container - ohne diese Regel bliebe eine ausgeblendete
   Kachel trotz hidden-Attribut sichtbar. */
.karte[hidden]{display:none}

/* --- Kartenliste --- */
.karten{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
/* Kachel hebt beim Überfahren leicht an; zugleich erscheint der Pfeil.
   Bewegung über translate, damit transform frei bleibt. Kein Rahmenwechsel. */
.karte{position:relative;background:var(--fl-weiss);border:1px solid var(--rand-karte);
  border-radius:var(--radius-karte);padding:var(--s5);display:flex;flex-direction:column;gap:10px;
  box-shadow:0 2px 6px rgba(14,14,55,.07);
  transition:translate .45s cubic-bezier(.25,1.05,.4,1)}
.karte:hover,.karte:focus-within{translate:0 -4px}
@media (prefers-reduced-motion:reduce){.karte{transition:none}.karte:hover,.karte:focus-within{translate:none}}
/* Rubrik-Symbol in getönter Fläche – Icons und Bedeutungen aus ICONS.md */
.rubrik-icon{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--radius-karte);
  background:var(--rubrik-fl,#E9EEFC);
  color:var(--rubrik-fg,#1B4FD8);flex:none;margin-bottom:4px}
/* Rubrikfarben (27.08.2026) - fuenf gedeckte Toene, damit die Kacheln der Uebersicht
   auf einen Blick auseinanderzuhalten sind. Sie gelten AUSSCHLIESSLICH fuer die
   Rubrik-Symbole im Blog: nie fuer Buttons, Links, CTAs oder die Website. Bewusste,
   auf den redaktionellen Teil begrenzte Erweiterung der Ein-Achsen-Palette; die
   Begruendung steht in DESIGN.md. Hier liegt die einzige Wahrheit fuer diese Werte -
   in rubriken.ts stehen absichtlich keine Farben. */
.rubrik-icon--gesundheit              {--rubrik-fg:#1B4FD8;--rubrik-fl:#E9EEFC}
.rubrik-icon--einkommen-existenz      {--rubrik-fg:#0E6E6E;--rubrik-fl:#E2F0EF}
.rubrik-icon--altersvorsorge-vermoegen{--rubrik-fg:#8A5A12;--rubrik-fl:#F6EDDF}
.rubrik-icon--haftpflicht-haus-kfz    {--rubrik-fg:#3F2999;--rubrik-fl:#ECE9F7}
.rubrik-icon--gewerbeversicherung     {--rubrik-fg:#7A2E4E;--rubrik-fl:#F3E7ED}
/* Gefüllte Variante: fill statt stroke – die Outline-Regeln der Website greifen hier nicht */
.rubrik-icon svg{width:32px;height:32px;fill:currentColor;stroke:none}
.karte__titel{font-size:1.14rem;line-height:1.32;margin:0}
.karte__titel a{color:var(--titel);text-decoration:none}
/* Die ganze Kachel ist Trefferfläche, nicht nur die Überschrift */
.karte__titel a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-karte)}
.karte__titel a:focus-visible::after{outline:2px solid var(--violett);outline-offset:2px}
/* Pfeil hinter dem Titel – erscheint beim Überfahren, rückt dabei leicht nach rechts.
   Gefüllte Form als Maske statt Schriftzeichen: das Unicode-Zeichen sähe je nach
   System anders aus, die Maske nimmt zuverlässig die Farbe aus background-color. */
.karte__titel::after{content:"";display:inline-block;
  width:.94em;height:.94em;margin-left:.34em;vertical-align:-.13em;
  background-color:var(--link-blau,#1B4FD8);
  -webkit-mask:var(--pfeil) no-repeat center/contain;
  mask:var(--pfeil) no-repeat center/contain;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease,transform .2s ease}
.karte:hover .karte__titel::after,
.karte:focus-within .karte__titel::after{opacity:1;transform:translateX(0)}
.karte__anriss{color:var(--hilf-hell);margin:0;flex:1}

.leer{max-width:56ch}
.leer__titel{font-weight:700;font-size:1.14rem;margin-bottom:10px}

/* --- Beitrag --- */
.beitrag{padding-top:var(--s7);padding-bottom:var(--s9)}
.beitrag__titel{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.18;
  letter-spacing:-.02em;margin-bottom:var(--s3);color:var(--titel)}
.beitrag__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:var(--t-label);color:var(--hilf-hell);margin-bottom:var(--s6)}
.beitrag__titelbild{margin:0 0 var(--s6)}
.beitrag__titelbild img{width:100%;height:auto;border-radius:var(--radius-karte);display:block}

/* Fließtext: automatische Nummerierung der Abschnitte wie bisher */
.beitrag__text{counter-reset:abschnitt;font-size:1.06rem;line-height:1.7}
/* Kein eigener scroll-margin: stil.css setzt bereits scroll-padding-top auf <html> */
.beitrag__text h2{color:var(--titel);counter-increment:abschnitt;font-size:clamp(1.35rem,2.2vw,1.7rem);
  line-height:1.25;margin:var(--s7) 0 var(--s3)}
.beitrag__text h2::before{content:counter(abschnitt) ". "}
.beitrag__text h3{color:var(--titel);font-size:1.14rem;margin:var(--s5) 0 10px}
.beitrag__text p{margin:0 0 var(--s4)}
.beitrag__text ul,.beitrag__text ol{margin:0 0 var(--s4);padding-left:1.4em}
.beitrag__text li{margin-bottom:8px}

.beitrag__text a:not(.btn){color:var(--link-blau);text-decoration:underline;text-underline-offset:2px}
.beitrag__text a:not(.btn):hover{color:var(--link-blau-h)}
/* Buttons behalten die Regeln aus stil.css – weiße Schrift, keine Unterstreichung */
.beitrag__text .btn{color:#fff;text-decoration:none}
.beitrag__text hr{border:0;border-top:1px solid var(--rand-linie);margin:var(--s6) 0}
.beitrag__text strong{font-weight:700}
.beitrag__text em{color:var(--hilf-hell)}

/* Transparenzhinweis und Quellen: eigener Fußnotenbereich am Beitragsende */
.fussnote{margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--rand-linie);font-size:.84rem;line-height:1.6;
  color:var(--hilf-hell)}
.fussnote p{margin:0 0 12px}
.fussnote em{font-style:normal;color:var(--hilf-hell)}
.fussnote a{color:var(--hilf-hell);text-decoration:underline}

/* --- Inhaltsverzeichnis (zur Bauzeit erzeugt) --- */
.inhalt{margin:0 0 var(--s7)}
.inhalt__titel{font-weight:700;color:var(--titel);margin:0 0 10px}
.inhalt__liste{list-style:none;counter-reset:toc;margin:0;padding:0}
.inhalt__liste li{margin-bottom:2px;counter-increment:toc}
/* Hover wie im Hauptmenü: getönte Fläche statt Unterstreichung.
   Einzige Ausnahme von der Link-Farbe: das Beitragsmenü steht in der Titelfarbe
   #00104B - es ist eine Gliederung des Beitrags, kein Verweis nach außen, und
   in Blau würde die lange Liste am Rand mit dem Text konkurrieren. */
.inhalt .inhalt__liste a,
.inhalt-seitlich .inhalt__liste a{display:flex;gap:.45em;color:var(--titel);text-decoration:none;
  padding:8px 13px;margin:0 -13px;border-radius:var(--radius-btn);transition:background .25s ease}
/* Die Nummer gehört in den Link, sonst bleibt sie beim Hover außen vor */
.inhalt .inhalt__liste a::before,
.inhalt-seitlich .inhalt__liste a::before{content:counter(toc) ".";flex:none;
  min-width:1.3em;color:var(--hilf-hell)}
.inhalt .inhalt__liste a:hover,
.inhalt-seitlich .inhalt__liste a:hover{background:var(--fl-blau-tint);text-decoration:none}
.inhalt .inhalt__liste a:focus-visible,
.inhalt-seitlich .inhalt__liste a:focus-visible{border-radius:var(--radius-btn)}

/* --- Callouts --- */
.callout{display:block;margin:var(--s6) 0;padding:var(--s5);
  border-radius:var(--radius-karte);border-left:3px solid}
.callout__inhalt{flex:1;min-width:0}
.callout__titel{font-weight:700;margin:0 0 8px;display:flex;flex-wrap:wrap;
  gap:10px;align-items:baseline}
.callout__stand{font-size:var(--t-label);font-weight:400;color:var(--hilf-hell)}
.callout__text > :last-child{margin-bottom:0}
.callout__text p{margin:0 0 12px}
.callout__text ol,.callout__text ul{margin:12px 0;padding-left:1.4em}
.callout--hinweis{background:#FDF6E3;border-color:#B8860B}
.callout--hinweis .callout__titel{color:#6B4E00}
.callout--info{background:var(--fl-tint);border-color:var(--rand-linie)}
.callout--rat{background:var(--fl-blau-tint);border-color:var(--indigo)}
.callout--rat .callout__titel{color:var(--indigo)}
.callout__signatur{margin:12px 0 0;font-size:var(--t-label);font-weight:600;
  color:var(--hilf-hell)}

/* --- Vergleichstabelle --- */
.vergleich{margin:var(--s6) 0}
.vergleich__titel{font-weight:700;margin-bottom:12px;color:var(--titel)}
.vergleich__rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vergleich table{width:100%;border-collapse:collapse;font-size:.96rem}
.vergleich th,.vergleich td{text-align:left;padding:12px 14px;vertical-align:top}
.vergleich thead th{color:var(--indigo);font-weight:700;
  border-bottom:2px solid var(--indigo);white-space:nowrap}
.vergleich tbody tr{border-bottom:1px solid var(--rand-linie)}
.vergleich tbody tr:nth-child(even){background:rgba(24,19,80,.025)}
.vergleich tbody th{font-weight:600;color:var(--titel)}
@media(max-width:620px){
  .vergleich thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vergleich table,.vergleich tbody,.vergleich tr,.vergleich th,.vergleich td{display:block;width:100%}
  .vergleich tbody tr{border:1px solid var(--rand-tint);border-radius:var(--radius-karte);
    margin-bottom:12px;padding:6px 0;background:var(--fl-tint)}
  .vergleich tbody tr:nth-child(even){background:var(--fl-tint)}
  .vergleich tbody th{font-size:1.02rem;padding-bottom:4px}
  .vergleich tbody td::before{content:attr(data-spalte);display:block;
    font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--violett);margin-bottom:2px}
  .vergleich tbody td{padding-top:8px}
}

/* --- Laufzeiten --- */
.laufzeiten{margin:var(--s6) 0}
.laufzeiten__titel{font-weight:700;margin-bottom:14px;color:var(--titel)}
.laufzeiten__kopf{display:grid;grid-template-columns:repeat(var(--phasen),1fr);
  gap:4px;margin-left:var(--spurstart,190px);margin-bottom:8px}
.laufzeiten__phase{font-size:var(--t-label);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--violett);line-height:1.3}
.laufzeiten__liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.laufzeiten__zeile{display:grid;grid-template-columns:var(--spurstart,190px) 1fr;
  align-items:center;gap:0;min-height:34px}
.laufzeiten__name{font-size:.9rem;font-weight:600;color:var(--titel);
  padding-right:14px;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.laufzeiten__spur{position:relative;height:100%;min-height:26px;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--fl-tint) 0,var(--fl-tint) calc(100%/var(--phasen) - 4px),
    transparent calc(100%/var(--phasen) - 4px),transparent calc(100%/var(--phasen)))}
.laufzeiten__balken{position:absolute;top:3px;bottom:3px;border-radius:4px;background:var(--indigo);
  left:calc(var(--von) * 100% / var(--phasen));
  width:calc((var(--bis) - var(--von)) * 100% / var(--phasen) - 4px)}
@media(max-width:620px){
  .laufzeiten__kopf{margin-left:0;margin-bottom:6px}
  .laufzeiten__phase{font-size:.68rem}
  .laufzeiten__zeile{grid-template-columns:1fr;gap:4px}
  .laufzeiten__name{padding-right:0}
}

/* --- Abschlussbox im Beitrag: dezent, im Lesefluss --- */
.autorbox{display:flex;gap:18px;align-items:flex-start;
  background:var(--fl-tint);border-radius:var(--radius-karte);
  padding:var(--s5);margin:var(--s7) 0 var(--s6)}
.autorbox__bild{width:80px;height:80px;border-radius:50%;object-fit:cover;
  object-position:50% 14%;flex:none;background:#fff}
.autorbox__text{min-width:0}
.autorbox__einladung{margin:0 0 14px;color:var(--titel);font-size:1rem;line-height:1.6}
.autorbox__einladung strong{font-weight:700}
.autorbox__aktion{margin:0}
/* Kompakter als der Seiten-CTA – die Box soll ruhig bleiben */
.autorbox .btn.btn--kompakt{flex-direction:row;min-height:0;
  padding:10px 20px;font-size:var(--t-klein)}
@media(max-width:560px){
  .autorbox{flex-direction:column;gap:14px}
  .autorbox__bild{width:64px;height:64px}
}

/* --- CTA und Abschluss --- */
.cta-block{margin:var(--s6) 0}
.weiterlesen{background:var(--fl-tint)}
.weiterlesen__titel{font-size:clamp(1.28rem,1.6vw,1.5rem);margin-bottom:var(--s5)}