/* Blog: Uebersicht und Beitrag. Die Schrift des Beitrags kommt von .legal in style.css. */
.blog__liste{display:grid; gap:1.4rem; margin-top:var(--sp-4, 2rem)}
.blog__karte{display:grid; grid-template-columns:minmax(0,1fr); background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl, 22px); overflow:hidden; box-shadow:var(--sh-sm)}
@media (min-width:720px){.blog__karte:has(.blog__karte-bild){grid-template-columns:280px minmax(0,1fr)}}
.blog__karte-bild{display:block; background:var(--c-primary-tint)}
.blog__karte-bild img{display:block; width:100%; height:100%; min-height:180px; object-fit:cover}
.blog__karte-text{padding:clamp(1.2rem,2.5vw,1.8rem)}
.blog__karte h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); margin:.1rem 0 .5rem}
.blog__karte h2 a{color:var(--c-ink); text-decoration:none}
.blog__karte h2 a:hover{color:var(--c-primary)}
.blog__karte p{margin:0 0 .8rem; color:var(--c-ink-soft)}
.blog__meta{font-size:var(--fs-sm); color:var(--c-placeholder)}
.blog__weiter{font-weight:700; color:var(--c-primary); text-decoration:underline; text-underline-offset:3px}
.blog__leer{margin-top:2rem; color:var(--c-ink-soft)}
.blog__brot{font-size:var(--fs-sm); margin:0 0 .6rem}
.blog__brot a{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px}
.blog__titelbild{display:block; width:100%; max-height:420px; object-fit:cover; border-radius:var(--r-xl, 22px); margin:0 0 1.6rem}
.blog__beitrag .legal__body img{max-width:100%; height:auto; border-radius:14px; margin:.4rem 0}
.blog__beitrag blockquote{margin:1.2rem 0; padding:.2rem 1.1rem; border-left:4px solid var(--c-primary); color:var(--c-ink-soft)}
.blog__cta{margin-top:2.4rem; padding:1.6rem; background:var(--c-primary-tint); border:1px solid var(--c-line); border-radius:var(--r-xl, 22px); text-align:center}
.blog__cta h2{font-size:1.3rem; margin:0 0 .4rem}
.blog__cta p{margin:0 0 1rem; color:var(--c-ink-soft)}
/* Autorenzeile unter dem Titel */
.blog__autor{display:flex; align-items:center; gap:.8rem; margin:1rem 0 0}
.blog__autor-bild{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--c-primary-tint-2, #FCE2D7); color:var(--c-primary); font-weight:700; letter-spacing:.04em}
.blog__autor span:last-child{display:flex; flex-direction:column; line-height:1.3}
.blog__autor b{color:var(--c-ink)}
.blog__autor small{color:var(--c-muted); font-size:var(--fs-xs)}

/* Uebersicht freundlicher: warmer Kopf, Karten im Raster mit farbigem Themenband */
.blog .legal__head{padding:clamp(1.6rem,4vw,2.6rem); border-radius:var(--r-xl, 22px);
  background:linear-gradient(90deg, #FEF7F3 0%, #fff 70%); border:1px solid var(--c-line)}
.blog__liste{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
.blog__karte{display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s}
.blog__karte:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--c-primary-soft)}
.blog__karte-band{display:flex; align-items:flex-end; min-height:110px; padding:1rem 1.3rem; text-decoration:none;
  background:radial-gradient(circle at 85% 20%, var(--c-primary-soft) 0 22%, transparent 23%),
             linear-gradient(135deg, var(--c-primary-tint-2) 0%, #FEF7F3 100%)}
.blog__karte-band span{display:inline-block; padding:.3rem .7rem; border-radius:999px; background:#fff;
  color:var(--c-primary); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.blog__karte:nth-child(3n+2) .blog__karte-band{background:radial-gradient(circle at 15% 80%, var(--c-primary-soft) 0 18%, transparent 19%), linear-gradient(135deg, #FEF7F3 0%, var(--c-primary-tint-2) 100%)}
.blog__karte:nth-child(3n) .blog__karte-band{background:radial-gradient(circle at 50% 10%, #F9C5AF 0 15%, transparent 16%), linear-gradient(180deg, var(--c-primary-tint-2) 0%, #fff 100%)}
.blog__karte-text{display:flex; flex-direction:column; flex:1}
.blog__karte .blog__weiter{margin-top:auto}

/* Inhaltsverzeichnis, Tabellen, Infokasten, Titelbild */
.blog__toc{margin:1.6rem 0 0; padding:1.1rem 1.3rem; border-radius:var(--r-md, 16px); background:#FEF7F3; border:1px solid var(--c-line)}
.blog__toc b{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-primary); margin-bottom:.5rem}
.blog__toc ol{margin:0; padding-left:1.2rem; columns:2; column-gap:2rem}
.blog__toc li{margin:.2rem 0; break-inside:avoid}
.blog__toc a{color:var(--c-ink); text-decoration:none}
.blog__toc a:hover{color:var(--c-primary); text-decoration:underline}
@media (max-width:640px){ .blog__toc ol{columns:1} }
.blog__tabelle{overflow-x:auto; margin:1.4rem 0; border:1px solid var(--c-line); border-radius:var(--r-md, 16px)}
.blog__tabelle table{width:100%; border-collapse:collapse; font-size:.95rem}
.blog__tabelle th{background:#FEF7F3; text-align:left; padding:.75rem .9rem; font-size:.8rem; letter-spacing:.04em; color:var(--c-ink)}
.blog__tabelle td{padding:.75rem .9rem; border-top:1px solid var(--c-line); vertical-align:top}
/* Bis 900 px jede Zeile als Karte, damit nichts zum Wischen bleibt. */
@media (max-width:900px){
  .blog__tabelle{overflow:visible; border:0; border-radius:0}
  .blog__tabelle table, .blog__tabelle tbody, .blog__tabelle tr, .blog__tabelle td{display:block; width:100%}
  .blog__tabelle thead{display:none}
  .blog__tabelle tr{border:1px solid var(--c-line); border-radius:var(--r-sm, 12px); padding:.5rem .9rem; margin-bottom:.75rem}
  .blog__tabelle td{border:0; padding:.35rem 0}
  .blog__tabelle td[data-label]::before{content:attr(data-label); display:block; font-size:.875rem; font-weight:700; color:var(--c-ink-soft, var(--c-ink))}
}
.blog__kasten{margin:1.4rem 0; padding:1.1rem 1.3rem; border-left:5px solid var(--c-primary); border-radius:var(--r-md, 16px); background:#FEF7F3}
.blog__kasten > :first-child{margin-top:0}
.blog__kasten > :last-child{margin-bottom:0}
.blog__titelbild{display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; border-radius:var(--r-xl, 22px); margin:1.6rem 0 0}

/* Hinweis-Kaesten (Tipp, Achtung, Gut zu wissen), Angebotskasten und Bilder im Text (31.10.2026).
   Icons als Masken aus Inline-SVG, damit sie die Markenfarbe uebernehmen. */
.blog__hinweis{position:relative; margin:1.6rem 0; padding:1.1rem 1.3rem 1.1rem 3.6rem; border-radius:var(--r-md, 16px); border:1px solid var(--c-line); background:#fff}
.blog__hinweis::before{content:""; position:absolute; left:1.1rem; top:1.15rem; width:26px; height:26px; background:var(--c-primary-dark);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat}
.blog__hinweis > :last-child{margin-bottom:0}
.blog__hinweis-titel{margin:0 0 .3rem; font-weight:700; color:var(--c-ink); letter-spacing:.02em}
.blog__hinweis--tipp{background:#FEF7F3; --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E")}
.blog__hinweis--achtung{background:#FFF8EC; border-color:#F2D3A2; --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.blog__hinweis--achtung::before{background:#9A5B00}
.blog__hinweis--wissen{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
.blog__angebot{display:flex; align-items:center; gap:1.2rem; margin:2rem 0; padding:1.3rem 1.4rem; border-radius:var(--r-lg, 20px); background:var(--c-primary-tint-2); border:1px solid var(--c-primary-soft)}
.blog__angebot > div{flex:1}
.blog__angebot p{margin:0}
.blog__angebot .btn, .blog__angebot .btn:hover{flex:none; min-height:48px; color:#fff; text-decoration:none}
.blog__bild{margin:1.8rem 0}
.blog__bild img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg, 20px)}
.blog__bild figcaption{margin-top:.5rem; font-size:var(--fs-sm); color:var(--c-muted); text-align:center}
@media (max-width:640px){
  .blog__hinweis{padding:1rem 1rem 1rem 3.2rem}
  .blog__hinweis::before{left:.9rem; width:22px; height:22px}
  .blog__angebot{flex-direction:column; align-items:stretch; text-align:left}
  .blog__angebot .btn{width:100%; justify-content:center}
}

/* Barrierefreiheit im Blog (31.10.2026): Koralle #F58060 hat auf Weiss nur 2,58:1.
   Fuer Text und Knoepfe im Blog ein dunkleres Koralle (#A84A2B, 5,71:1 auf Weiss,
   4,62:1 auf dem Angebotskasten). Inhaltsverzeichnis mit groesserer Trefferflaeche. */
.blog{--c-blog-akzent:#A84A2B}
.blog .legal__body a:not(.btn), .blog__brot a, .blog__weiter{color:var(--c-blog-akzent)}
.blog__toc b, .blog__autor-bild{color:var(--c-blog-akzent)}
.blog__toc a{display:block; padding:.3rem 0; color:var(--c-ink)}
.blog__angebot .btn, .blog__cta .btn{background:var(--c-blog-akzent); border-color:var(--c-blog-akzent); color:#fff}
.blog__angebot .btn:hover, .blog__cta .btn:hover{background:#8F3E23; border-color:#8F3E23; color:#fff}
.blog__brot a{display:inline-block; padding:.6rem 0}

/* Tarifkaesten und Preisgarantie im Text. Grosse Preise in #E06B4B (3,3:1 auf Weiss,
   reicht fuer grosse Schrift), kleinere Hervorhebungen im dunkleren Blog-Koralle. */
.blog__angebot strong, .blog__cta strong{color:var(--c-blog-akzent)}
.blog__cta strong{display:block; margin-top:.25rem}
.blog__tarife{margin:1.6rem 0 2rem}
.legal__body .blog__tarife-kopf{margin:0 0 .35rem; font-size:clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem); line-height:1.25; color:var(--c-primary-dark)}
.blog__tarife-kopf b{font-weight:700}
.legal__body .blog__tarife-unter{margin:0 0 1.1rem}
.blog__tarif-liste{margin-top:1.4rem; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.9rem}
.blog__tarif{position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:1.15rem 1.1rem 1.2rem; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg, 20px)}
.blog__tarif--start{border:2px solid var(--c-primary-dark); background:var(--c-primary-tint)}
.blog__tarif-marke{position:absolute; top:-.75rem; left:1rem; padding:.15rem .6rem; border-radius:999px; background:var(--c-blog-akzent); color:#fff; font-size:.8rem; font-weight:700}
.legal__body .blog__tarif h3{margin:0 0 .3rem; font-size:1.15rem}
.legal__body .blog__tarif-preis{margin:0 0 .55rem; line-height:1.2}
.blog__tarif-preis b{font-size:2.1rem; font-weight:700; color:var(--c-primary-dark)}
.blog__tarif-preis span{font-size:.875rem; color:var(--c-ink-soft, var(--c-ink))}
.legal__body .blog__tarif-text{flex:1; margin:0 0 .9rem; font-size:.95rem; line-height:1.5}
.blog .blog__tarif .btn{width:100%; justify-content:center; min-height:48px; background:var(--c-blog-akzent); border-color:var(--c-blog-akzent); color:#fff; text-decoration:none; text-align:center}
.blog .blog__tarif .btn:hover{background:#8F3E23; border-color:#8F3E23; color:#fff}
.blog__tarif--voll .blog__tarif-preis b{color:var(--c-ink-soft, var(--c-ink))}
.legal__body .blog__tarif-voll{margin:0; font-size:.95rem; font-weight:700}
.legal__body .blog__tarife-klein{margin:1rem 0 0; font-size:.875rem; line-height:1.5; color:var(--c-ink-soft, var(--c-ink))}
@media (max-width:760px){
  .blog__tarif-liste{grid-template-columns:1fr}
}