/* =========================================================================
   alantouz — BLOG (Archiv + Artikel-Template)
   Loaded after style.css + pages.css. Uses the same design tokens.
   ========================================================================= */

/* ---------- category filter ---------- */
.blogfilter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: clamp(28px,3.4vw,44px); }
.blogfilter button { font: inherit; cursor:pointer; border:1px solid var(--line); background: var(--surface);
  color: var(--fir-soft); padding: 9px 18px; border-radius: 999px; font-size: .94rem; font-weight: 600;
  letter-spacing:-0.01em; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
.blogfilter button:hover { border-color: var(--emerald); color: var(--fir); transform: translateY(-1px); }
.blogfilter button[aria-selected="true"] { background: var(--fir); border-color: var(--fir); color:#fff; }
.blogfilter button .n { opacity:.55; font-weight:500; margin-left:4px; font-variant-numeric: tabular-nums; }
.blogfilter button[aria-selected="true"] .n { opacity:.7; }
.bpost.is-hidden, .blogfeat.is-hidden { display:none !important; }
.bloggrid.is-empty + .blogempty { display:block; }
.blogempty { display:none; padding: 40px 0; color: var(--fir-soft); }

/* ---------- archive grid ---------- */
.blogfeat { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,56px); align-items:center;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
  margin-bottom: clamp(40px,5vw,64px); transition: box-shadow .4s var(--ease); }
a.blogfeat { display:grid; color:inherit; }
a.blogfeat:hover { box-shadow: 0 30px 60px -38px rgba(23,48,41,.45); }
.blogfeat__media { align-self:stretch; min-height: 320px; position:relative;
  background: linear-gradient(140deg, var(--mist), color-mix(in oklab, var(--emerald), white 55%)); }
.blogfeat__media::before { content:""; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(rgba(25,96,72,.18) 1px, transparent 1px); background-size: 24px 24px; }
.blogfeat__media svg { position:absolute; inset:0; margin:auto; width: 38%; max-width: 200px; color: var(--emerald-deep); opacity:.85; }
.blogfeat__body { padding: clamp(26px,3.4vw,48px); }
.blogfeat__body h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem,2.8vw,2.2rem); letter-spacing:-0.02em; line-height:1.12; margin: 14px 0 14px; }
.blogfeat__body p { color: var(--fir-soft); font-size: 1.04rem; line-height: 1.6; }
@media (max-width: 880px){ .blogfeat { grid-template-columns: 1fr; } .blogfeat__media { min-height: 200px; } }

.bloggrid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px){ .bloggrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .bloggrid { grid-template-columns: 1fr; } }

.bpost { display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; color:inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bpost:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -34px rgba(23,48,41,.4); }
.bpost__media { height: 150px; position:relative; background: linear-gradient(140deg, var(--mist), color-mix(in oklab, var(--bp, var(--emerald)), white 58%)); }
.bpost__media::before { content:""; position:absolute; inset:0; opacity:.45;
  background-image: radial-gradient(rgba(25,96,72,.16) 1px, transparent 1px); background-size: 20px 20px; }
.bpost__media svg { position:absolute; inset:0; margin:auto; width: 52px; height:52px; color: var(--emerald-deep); opacity:.8; }
.bpost__body { padding: 22px 24px 26px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.bpost__body h3 { font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing:-0.015em; line-height:1.25; }
.bpost__body p { color: var(--fir-soft); font-size: .94rem; line-height: 1.55; flex:1; }

.bmeta { display:flex; gap: 8px 14px; align-items:center; flex-wrap:wrap; font-size: .82rem; color: var(--fir-dim); }
.bmeta .cat { background: var(--mist); color: var(--emerald-deep); font-weight: 700; padding: 4px 12px; border-radius: 100px; font-size:.78rem; }

/* ---------- article ---------- */
.art { max-width: 760px; margin-inline: auto; }
.art__head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing:-0.03em; line-height: 1.07; margin-top: 18px; }
.art__head .lead { margin-top: 18px; }
.art__byline { display:flex; gap: 14px; align-items:center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.art__byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center top; }
.art__byline b { display:block; font-size: .95rem; }
.art__byline small { color: var(--fir-dim); font-size: .84rem; }

/* key takeaways — AEO box */
.art__keys { background: var(--mist); border: 1px solid color-mix(in oklab, var(--emerald), white 40%); border-radius: var(--radius-lg); padding: clamp(22px,3vw,30px); margin: clamp(32px,4vw,44px) 0; }
.art__keys h2 { font-family: var(--display); font-size: 1.1rem; font-weight: 800; letter-spacing:.01em; display:flex; gap:9px; align-items:center; margin-bottom: 14px; color: var(--emerald-deep); }
.art__keys ul { list-style:none; display:grid; gap: 10px; }
.art__keys li { display:flex; gap: 10px; align-items:flex-start; font-size: .98rem; color: var(--fir-soft); line-height:1.5; }
.art__keys li svg { flex:none; margin-top: 3px; color: var(--emerald-deep); }

/* body typography */
.art__body { font-size: 1.06rem; line-height: 1.72; color: var(--fir-soft); }
.art__body h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing:-0.02em; color: var(--fir); margin: clamp(36px,4.5vw,52px) 0 16px; line-height:1.2; }
.art__body h3 { font-family: var(--display); font-weight: 700; font-size: 1.18rem; color: var(--fir); margin: 30px 0 12px; }
.art__body p + p { margin-top: 16px; }
.art__body strong { color: var(--fir); }
.art__body a { color: var(--emerald-deep); text-decoration: underline; text-underline-offset: 3px; }
.art__body ul, .art__body ol { margin: 16px 0 16px 22px; display:grid; gap: 8px; }
.art__body blockquote { border-left: 3px solid var(--emerald); padding: 6px 0 6px 22px; margin: 24px 0; font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--fir); line-height: 1.4; }

/* inline CTA box inside article */
.art__cta { background: var(--fir); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px,3.4vw,36px); margin: clamp(36px,4.5vw,52px) 0; position:relative; overflow:hidden; }
.art__cta::before { content:""; position:absolute; right:-14%; bottom:-50%; width: 50%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(52,167,123,.4), transparent 65%); }
.art__cta h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-0.02em; margin: 0 0 10px; color:#fff; position:relative; }
.art__cta p { color: rgba(255,255,255,.78); font-size: .98rem; margin: 0 0 20px; position:relative; max-width: 52ch; }
.art__cta .btn { position:relative; }

/* author box */
.art__author { display:flex; gap: 20px; align-items:center; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px,3vw,30px); margin-top: clamp(40px,5vw,56px); }
.art__author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center top; flex:none; }
.art__author b { font-family: var(--display); font-size: 1.05rem; display:block; }
.art__author small { color: var(--fir-dim); display:block; margin-top: 2px; }
.art__author p { color: var(--fir-soft); font-size: .92rem; line-height: 1.5; margin-top: 8px; }
@media (max-width: 560px){ .art__author { flex-direction:column; align-items:flex-start; } }

/* related */
.art__related { margin-top: clamp(44px,5vw,60px); }
.art__related h2 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing:-0.02em; margin-bottom: 22px; }

/* ---------- article hero image + image cards ---------- */
.art__hero { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); margin: clamp(8px,1.2vw,14px) 0 0; }
.art__hero img { width: 100%; height: auto; }
.bpost__media img, .blogfeat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Conversion-Block im Artikel (Pakete buchen + Lead-Formular) ----------
   Nutzt EXAKT die .plan-Karten von der Pakete-Seite (Klassen aus style.css) →
   gleiche Farben, gleiche Bullets, dunkle „Beliebteste Wahl"-Karte. Hier nur
   kompaktere Typo, damit 3 Karten in die schmale Artikelspalte (760px) passen. */
.art-midcta { background: var(--mist); border: 1px solid color-mix(in oklab, var(--emerald), white 55%); border-radius: var(--radius-lg); padding: clamp(24px,3.5vw,40px); margin: clamp(44px,5.5vw,60px) 0; }
.art-midcta__h { font-family: var(--display); font-weight: 800; font-size: clamp(1.45rem,2.6vw,2rem); letter-spacing:-0.02em; margin: 0 0 8px; color: var(--fir); }
.art-midcta__sub { color: var(--fir-soft); margin: 0 0 26px; font-size: 1.02rem; line-height: 1.6; }
/* Pakete-Karten im Artikel kompakter (Farben/Look bleiben identisch zur /pakete/) */
.art-midcta .pricing { gap: 14px; }
.art-midcta .plan { padding: 22px 20px; }
.art-midcta .plan__for { font-size: .76rem; }
.art-midcta .plan h3 { font-size: 1.2rem; margin: 9px 0 2px; color: var(--fir); }
/* .art__body-Regeln (dunkler Text) wuerden sonst die hellen Texte der DUNKLEN
   Karte ueberschreiben (Titel/Preis unlesbar) — hier explizit erzwingen. */
.art-midcta .plan--feat h3,
.art-midcta .plan--feat .plan__price b { color: #fff; }
.art-midcta .plan--feat .plan__price small { color: #b6cabf; }
.art-midcta .plan__price { margin: 8px 0 6px; }
.art-midcta .plan__price b { font-size: 1.7rem; }
.art-midcta .plan__price small { font-size: .82rem; }
.art-midcta .plan > p { font-size: .9rem; line-height: 1.45; min-height: 0; margin: 4px 0 0; }
.art-midcta .plan ul { gap: 9px; margin: 15px 0 20px; }
.art-midcta .plan li { font-size: .9rem; line-height: 1.4; }
.art-midcta .plan__badge { top: 14px; right: 14px; font-size: .66rem; padding: 4px 10px; }
.art-midcta .plan .btn { font-size: .92rem; padding: 11px 16px; }
/* Buttons wie auf der Startseite: links/rechts hell + dunkle Schrift (ghost),
   Mitte hellgrün + dunkelgrüne Schrift. .art__body a wuerde die Schriftfarbe
   sonst auf emerald-deep ziehen -> hier explizit setzen. */
.art-midcta .plan .btn { color: var(--fir); }
.art-midcta .plan--feat .btn { color: #06231a; }
.art-midcta__or { display:flex; align-items:center; text-align:center; color: var(--fir-dim); margin: 30px 0 18px; }
.art-midcta__or::before, .art-midcta__or::after { content:""; flex:1; height:1px; background: color-mix(in oklab, var(--emerald), white 55%); }
.art-midcta__or span { padding: 0 16px; font-size: .9rem; font-weight: 600; }
.art-midcta__formlead { margin: 0 0 16px; color: var(--fir); font-size: 1rem; }
/* Artikel-Body-Links sind unterstrichen — im Block NICHT (Buttons/Karten) */
.art__body .art-midcta a, .art-midcta a { text-decoration: none; }
/* Gestapelt (≤900px, wie /pakete/): wieder volle Pakete-Typo, da volle Breite */
@media (max-width: 900px){
  .art-midcta .plan { padding: 26px 24px; }
  .art-midcta .plan h3 { font-size: 1.5rem; }
  .art-midcta .plan__price b { font-size: 2.3rem; }
  .art-midcta .plan > p { font-size: .98rem; }
  .art-midcta .plan li { font-size: .98rem; }
}