/* ============================================================
   Olivia · Blog (Übersicht + Artikel)
   ============================================================ */
.bwrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-5); }
.awrap { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ---- Blog-Hero ---- */
.bhero { position: relative; background: var(--c-forest); color: var(--c-on-dark); padding: var(--sp-9) 0 calc(var(--sp-9) + 24px); overflow: hidden; text-align: center; }
.bhero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.045; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bhero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:80px; background:var(--c-cream); -webkit-mask:url("torn-edge-down.svg") no-repeat bottom/100% 100%; mask:url("torn-edge-down.svg") no-repeat bottom/100% 100%; }
.bhero .inner { position: relative; z-index: 1; }
.bhero .eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--c-peach); font-family:var(--ff-body); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.bhero .eyebrow::before, .bhero .eyebrow::after { content:""; width:26px; height:1.5px; background:var(--c-gold); }
.bhero h1 { font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:clamp(34px,4.6vw,54px); color:var(--c-cream-soft); margin:var(--sp-4) 0 0; line-height:1.06; }
.bhero h1 em { font-style: italic; color: var(--c-peach); }
.bhero .sub { color:var(--c-on-dark-muted); font-size:17px; line-height:1.6; max-width:56ch; margin:var(--sp-5) auto 0; }
.bhero .paw { position:absolute; pointer-events:none; color:var(--c-peach); opacity:.12; }
.bhero .paw svg { width:100%; height:100%; fill:currentColor; }
.bhero .paw.a { width:48px; height:48px; top:26%; left:8%; animation: bfloat 9s ease-in-out infinite; }
.bhero .paw.b { width:36px; height:36px; top:40%; right:10%; color:var(--c-gold); opacity:.14; animation: bfloat 11s ease-in-out infinite 1.2s; }
@keyframes bfloat { 0%,100%{transform:translateY(0) rotate(-14deg);} 50%{transform:translateY(-14px) rotate(-14deg);} }

/* ---- Kategorie-Filter ---- */
.bcats { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: var(--sp-7) 0 var(--sp-6); }
.bcat { font-family:var(--ff-body); font-size:13px; font-weight:600; padding:9px 18px; border-radius:var(--r-pill); border:1.5px solid var(--c-border); background:var(--c-cream-soft); color:var(--c-forest-deep); cursor:pointer; transition: all var(--dur-base) var(--ease); }
.bcat:hover { border-color:var(--c-gold); transform:translateY(-2px); }
.bcat.is-active { background:var(--c-forest); border-color:var(--c-forest); color:var(--c-cream-soft); }

/* ---- Artikel-Liste ---- */
.blist { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width: 780px) { .blist { grid-template-columns:1fr; } }
.bcard { display:flex; flex-direction:column; gap:12px; text-decoration:none; background:var(--c-cream-soft); border:1px solid var(--c-border); border-radius:var(--r-md); padding:var(--sp-5); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.bcard:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.bcard .meta { font-family:var(--ff-body); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); display:flex; gap:10px; align-items:center; }
.bcard .meta .tag { color:var(--c-coral); font-weight:600; }
.bcard h2, .bcard h3 { font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:21px; line-height:1.3; color:var(--c-forest-deep); margin:0; }
.bcard p { font-size:14.5px; line-height:1.6; color:var(--c-muted); margin:0; }
.bcard .more { font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--c-coral); margin-top:auto; display:inline-flex; align-items:center; gap:7px; }
.bcard:hover .more svg { transform:translateX(4px); }
.bcard .more svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--dur-base) var(--ease); }
.bcard.is-feature { grid-column:1 / -1; background:var(--c-forest); border-color:var(--c-forest); }
.bcard.is-feature h2 { color:var(--c-cream-soft); font-size:27px; }
.bcard.is-feature p { color:var(--c-on-dark-muted); font-size:16px; }
.bcard.is-feature .meta { color:var(--c-on-dark-muted); }
.bcard.is-feature .meta .tag { color:var(--c-peach); }
.bcard.is-feature .more { color:var(--c-peach); }

/* ---- Artikel ---- */
.apage { padding: var(--sp-8) 0 var(--sp-9); }
.blistpage { padding: var(--sp-6) 0 var(--sp-9); }
.acrumb { font-size:12.5px; color:var(--c-muted); margin-bottom:var(--sp-5); }
.acrumb a { color:var(--c-muted); text-decoration:none; }
.acrumb a:hover { color:var(--c-coral); }
.ameta { font-family:var(--ff-body); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); display:flex; gap:12px; flex-wrap:wrap; }
.ameta .tag { color:var(--c-coral); font-weight:600; }
.awrap h1 { font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:clamp(30px,4vw,44px); line-height:1.14; color:var(--c-forest-deep); margin:var(--sp-4) 0 var(--sp-5); }
.awrap .lede { font-size:19px; line-height:1.6; color:var(--c-forest-deep); margin:0 0 var(--sp-6); }
.awrap > h2, .awrap > .afaq h2, .awrap > .asum h2, .awrap > .acta h2, .awrap > .awrap .amore h2 { font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:26px; color:var(--c-forest-deep); margin:var(--sp-8) 0 var(--sp-3); padding-top:var(--sp-5); border-top:1px solid var(--c-border); }
.awrap > h3 { font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:19px; color:var(--c-forest-deep); margin:var(--sp-5) 0 var(--sp-2); }
.awrap > p { font-size:16.5px; line-height:1.75; color:var(--c-ink); margin:0 0 var(--sp-4); }
.awrap > p a, .awrap ul a, .awrap ol a { color:var(--c-coral); text-decoration:none; border-bottom:1px solid rgba(232,122,90,.35); }
.apage a:hover { border-bottom-color:var(--c-gold); }
.awrap ul li { position:relative; display:block; padding-left:26px; margin:0 0 12px; font-size:16px; line-height:1.65; }
.awrap ul li:last-child { margin-bottom:0; }
.awrap ul li strong { color:var(--c-forest-deep); }
.awrap ul li::before { content:""; position:absolute; left:2px; top:10px; width:7px; height:7px; border-radius:999px; background:var(--c-gold); transition:transform .3s var(--ease), background .3s var(--ease); }
.awrap ul li:hover::before { transform:scale(1.5); background:var(--c-coral); }
.awrap ol { counter-reset:s; }
.awrap ol li { position:relative; padding-left:42px; margin:0 0 var(--sp-4); font-size:16px; line-height:1.6; }
.awrap ol li:last-child { margin-bottom:0; }
.awrap ol li::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:999px; background:var(--c-peach); color:var(--c-coral-deep); display:grid; place-items:center; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:14px; }
.awrap figure { margin:var(--sp-6) 0; }
.awrap figure img { width:100%; border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.awrap figcaption { font-size:12.5px; color:var(--c-muted); margin-top:9px; font-style:italic; text-align:center; }

/* ---- KI-lesbare Zusammenfassung ---- */
.asum {
  position:relative; overflow:hidden;
  background:var(--c-cream-soft); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-6) var(--sp-5);
  margin:0 0 var(--sp-7);
}
.asum::after { content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:999px; background:radial-gradient(circle, rgba(232,122,90,.10), transparent 68%); pointer-events:none; animation:asum-breathe 12s ease-in-out infinite; }
@keyframes asum-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
.awrap .asum h2 {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-body); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-coral); margin:0 0 var(--sp-4); border:0; padding:0;
}
.awrap .asum h2::before {
  content:""; width:20px; height:20px; flex-shrink:0; border-radius:999px;
  background:var(--c-peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D5644A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/12px 12px;
  animation:asum-pop 4.5s ease-in-out infinite;
}
@keyframes asum-pop { 0%,88%,100% { transform:scale(1); } 93% { transform:scale(1.22); } }
.asum ul { position:relative; margin:0; display:flex; flex-direction:column; gap:11px; padding:0; list-style:none; }
.asum ul li { position:relative; display:block; padding-left:26px; font-size:15px; line-height:1.6; color:var(--c-ink); }
.asum ul li::before { content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:999px; background:var(--c-coral); transition:transform .3s var(--ease); }
.asum ul li:hover::before { transform:scale(1.5); }

/* ---- FAQ-Box ---- */
.afaq { background:var(--c-cream-warm); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-6); margin:var(--sp-8) 0 0; }
.awrap .afaq h2 { margin:0 0 var(--sp-4); border:0; padding:0; font-size:23px; }
.afaq .qa { border-top:1px solid var(--c-border); padding:var(--sp-4) 0 0; margin-top:var(--sp-4); }
.afaq .qa:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.afaq .q { font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:17.5px; color:var(--c-forest-deep); margin:0 0 8px; position:relative; padding-left:24px; transition:color .3s var(--ease); }
.afaq .q::before { content:""; position:absolute; left:0; top:7px; width:11px; height:11px; border-radius:3px; background:var(--c-gold); transform:rotate(45deg); transition:transform .4s var(--ease), background .3s var(--ease); }
.afaq .qa:hover .q { color:var(--c-coral-deep); }
.afaq .qa:hover .q::before { transform:rotate(135deg); background:var(--c-coral); }
.afaq .a { padding-left:24px; }
.afaq .a { font-size:15.5px; line-height:1.65; color:var(--c-ink); margin:0; }

/* ---- CTA ---- */
.acta { background:var(--c-forest); color:var(--c-on-dark); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-7); margin:var(--sp-8) 0 0; text-align:center; }
.awrap .acta h2 { color:var(--c-cream-soft); border:0; padding:0; margin:0 0 var(--sp-3); font-size:25px; }
.acta p { color:var(--c-on-dark-muted); font-size:15.5px; max-width:52ch; margin:0 auto var(--sp-5); }
.acta .btn { margin:0 auto; }

/* ---- Auch interessant ---- */
.amore { margin:var(--sp-9) 0 0; padding-top:var(--sp-6); border-top:1px solid var(--c-border); }
.awrap .amore h2 { font-family:var(--ff-body); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-coral); margin:0 0 var(--sp-4); border:0; padding:0; }
.amore-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width: 640px) { .amore-grid { grid-template-columns:1fr; } }
.amore-card { display:block; text-decoration:none; background:var(--c-cream-soft); border:1px solid var(--c-border); border-radius:var(--r-md); padding:16px 18px; transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.amore-card:hover { transform:translateY(-3px); box-shadow:var(--sh-sm); }
.amore-card .t { font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:17px; color:var(--c-forest-deep); display:block; line-height:1.3; }
.amore-card .s { font-size:12.5px; color:var(--c-muted); margin-top:5px; display:block; }

/* reveal — always painted; animation only as a soft entrance via animation, never opacity gating */
.reveal { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; } .js .reveal { opacity:1; transform:none; } }

/* cards must never inherit article-body heading rules */
.blist .bcard h2, .blist .bcard h3 { margin: 0; padding: 0; border: 0; }

/* ---- Microanimations (blogweit) ---- */
.awrap > h2 { position:relative; }
.awrap > h2::after { content:""; position:absolute; left:0; bottom:-9px; width:38px; height:2px; background:var(--c-coral); transform-origin:left; transform:scaleX(.45); transition:transform .5s var(--ease); }
.awrap > h2:hover::after { transform:scaleX(1); }
.awrap > p a { transition:color .3s var(--ease); }
.awrap > p a:hover { color:var(--c-coral-deep); }
.acta { position:relative; overflow:hidden; }
.acta::after { content:""; position:absolute; left:-60px; bottom:-60px; width:200px; height:200px; border-radius:999px; background:radial-gradient(circle, rgba(246,216,191,.14), transparent 70%); pointer-events:none; animation:asum-breathe 14s ease-in-out infinite; }
.acta > * { position:relative; }
.bhero h1 em { display:inline-block; animation:bsway 7s ease-in-out infinite; transform-origin:bottom center; }
@keyframes bsway { 0%,100% { transform:rotate(-1deg); } 50% { transform:rotate(1deg); } }
.bcard .meta .tag { transition:letter-spacing .3s var(--ease); }
.bcard:hover .meta .tag { letter-spacing:.16em; }
.amore-card .t { transition:color .3s var(--ease); }
.amore-card:hover .t { color:var(--c-coral-deep); }
/* dezente schwebende Pfote im Artikel */
.apaw { position:absolute; pointer-events:none; color:var(--c-gold); opacity:.10; }
.apaw svg { width:100%; height:100%; fill:currentColor; }
.apaw.one { width:54px; height:54px; right:-70px; top:120px; animation:afloat 10s ease-in-out infinite; }
.apaw.two { width:40px; height:40px; left:-64px; top:52%; color:var(--c-coral); opacity:.09; animation:afloat 13s ease-in-out infinite 1.4s; }
@keyframes afloat { 0%,100% { transform:translateY(0) rotate(-12deg); } 50% { transform:translateY(-16px) rotate(-12deg); } }
@media (max-width: 1080px) { .apaw { display:none; } }

/* Guard: Artikel-Listen bleiben normaler Textfluss (fetter Begriff + Text in einer Zeile) */
.awrap ul li, .awrap ol li, .asum ul li, .afaq li { display:block; align-items:initial; gap:normal; }

/* ---------- Teilen-Button ---------- */
.ashare { margin: var(--sp-7, 40px) 0 0; display: flex; justify-content: flex-start; }
.share-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-body); font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--c-ink, #2C3D33); background: transparent;
  border: 1.5px solid var(--c-border, rgba(44,61,51,.25)); border-radius: 999px;
  padding: 10px 20px; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.share-btn:hover { background: var(--c-coral, #C96F4A); border-color: var(--c-coral, #C96F4A); color: #fff; }
.share-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }