/* Tarifly Blog-Hero. Layouts: split | cover | centered | minimal | card. Themes: light | tinted | dark | brand. */
.tf-bhero{position:relative;isolation:isolate;overflow:clip;--tf-bh-min:0px;--tf-bh-ratio:4/3;--tf-bh-fg:var(--tf-ink);--tf-bh-sub:var(--tf-text);--tf-bh-mute:var(--tf-mute);color:var(--tf-bh-sub);container-type:inline-size;container-name:bhero}
.tf-bhero:not(.alignfull){border-radius:calc(var(--tf-r) + 10px)}
.tf-bhero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.tf-bhero__inner{position:relative;display:grid;gap:clamp(24px,4vw,56px);align-items:center;max-width:var(--wd-container-w,1222px);margin-inline:auto;padding:clamp(28px,5vw,72px) clamp(18px,4vw,40px);min-height:var(--tf-bh-min)}
.tf-bhero__copy{display:grid;gap:clamp(14px,1.6vw,20px);align-content:center;min-width:0}
.tf-bhero__title{margin:0;font-size:clamp(30px,6.2cqi,60px);line-height:1.05;font-weight:800;letter-spacing:-.035em;color:var(--tf-bh-fg);overflow-wrap:anywhere;hyphens:auto}
.tf-bhero--balance .tf-bhero__title{text-wrap:balance}
.tf-bhero__lead{margin:0;max-width:60ch;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--tf-bh-sub);text-wrap:pretty}
.tf-bhero .tf-bh-crumbs ol{color:var(--tf-bh-mute)}
.tf-bhero .tf-bh-crumbs li:last-child{color:var(--tf-bh-fg)}
.tf-bhero .tf-btn{color:#fff}
.tf-bhero__chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:99px;background:var(--tf-acc-soft);color:var(--tf-link);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;line-height:1;transition:background .2s,transform .2s var(--tf-ease)}
a.tf-bhero__chip:hover{background:color-mix(in srgb,var(--tf-acc) 18%,#fff);transform:translateY(-1px)}
.tf-bhero__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--tf-bh-mute)}
.tf-bhero__meta li{display:inline-flex;align-items:center;gap:7px;min-width:0}
.tf-bhero__meta svg{width:16px;height:16px;flex:none;opacity:.85}
.tf-bhero__meta a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s}
.tf-bhero__meta a:hover{text-decoration-color:var(--tf-acc)}
.tf-bhero__author{color:var(--tf-bh-fg);font-weight:650}
.tf-bhero__avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,var(--tf-acc),color-mix(in srgb,var(--tf-acc) 55%,var(--ts-ink,#0d0625)));color:#fff;font-size:11px;font-weight:800}
.tf-bhero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tf-bhero .tf-btn--primary{background:var(--tf-acc);color:#fff;box-shadow:0 14px 28px -14px color-mix(in srgb,var(--tf-acc) 70%,transparent)}
.tf-bhero--dark .tf-btn--primary,.tf-bhero--brand .tf-btn--primary{background:#fff;color:var(--ts-ink,#0d0625)}
.tf-bhero .tf-btn--primary:hover{background:var(--tf-acc-hover)}
.tf-bhero--dark .tf-btn--primary:hover,.tf-bhero--brand .tf-btn--primary:hover,.tf-bhero--cover .tf-btn--primary:hover{background:#fff}

/* media */
.tf-bhero__media{position:relative;margin:0;min-width:0;border-radius:calc(var(--tf-r) + 6px);overflow:hidden;aspect-ratio:var(--tf-bh-ratio);background:var(--tf-surface);box-shadow:0 0 0 1px rgba(13,6,37,.06),0 30px 60px -30px rgba(13,6,37,.45)}
.tf-bhero__img{display:block;width:100%;height:100%;object-fit:cover}
.tf-bhero__progress{position:fixed;z-index:99999;top:0;left:0;width:100%;height:3px;background:var(--tf-acc);transform-origin:0 50%;transform:scaleX(var(--tf-p,0));pointer-events:none}
@supports (animation-timeline:scroll()){.tf-bhero__progress{animation:tf-bh-progress linear both;animation-timeline:scroll(root)}}
@keyframes tf-bh-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- themes ---- */
.tf-bhero--light{background:#fff}
.tf-bhero--tinted{background:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,var(--tf-acc) 11%,transparent),transparent 70%),linear-gradient(180deg,#f7f7fb,#fff)}
.tf-bhero--dark{--tf-bh-fg:#fff;--tf-bh-sub:rgba(255,255,255,.78);--tf-bh-mute:rgba(255,255,255,.62);background:var(--ts-ink,#0d0625)}
.tf-bhero--dark .tf-bhero__chip,.tf-bhero--brand .tf-bhero__chip{background:rgba(255,255,255,.14);color:#fff}
.tf-bhero--brand{--tf-bh-fg:#fff;--tf-bh-sub:rgba(255,255,255,.9);--tf-bh-mute:rgba(255,255,255,.78);background:linear-gradient(125deg,var(--tf-acc),color-mix(in srgb,var(--tf-acc) 58%,var(--ts-ink,#0d0625)))}

/* ---- background effects (decorative, transform-only) ---- */
.tf-bhero--bg-aurora .tf-bhero__bg::before,.tf-bhero--bg-aurora .tf-bhero__bg::after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.tf-bhero--bg-aurora .tf-bhero__bg::before{top:-30%;right:-10%;background:var(--tf-acc);animation:tf-bh-aurora-a 16s ease-in-out infinite alternate}
.tf-bhero--bg-aurora .tf-bhero__bg::after{bottom:-40%;left:-10%;background:var(--ts-ink,#0d0625);opacity:.35;animation:tf-bh-aurora-b 20s ease-in-out infinite alternate}
.tf-bhero--light.tf-bhero--bg-aurora .tf-bhero__bg::before,.tf-bhero--tinted.tf-bhero--bg-aurora .tf-bhero__bg::before{opacity:.22}
.tf-bhero--light.tf-bhero--bg-aurora .tf-bhero__bg::after,.tf-bhero--tinted.tf-bhero--bg-aurora .tf-bhero__bg::after{opacity:.14}
@keyframes tf-bh-aurora-a{to{transform:translate3d(-12%,14%,0) scale(1.15)}}
@keyframes tf-bh-aurora-b{to{transform:translate3d(14%,-10%,0) scale(1.1)}}
.tf-bhero--bg-grid .tf-bhero__bg{background-image:linear-gradient(to right,currentColor 1px,transparent 1px),linear-gradient(to bottom,currentColor 1px,transparent 1px);background-size:44px 44px;color:rgba(13,6,37,.07);-webkit-mask-image:radial-gradient(70% 90% at 50% 20%,#000,transparent);mask-image:radial-gradient(70% 90% at 50% 20%,#000,transparent)}
.tf-bhero--dark.tf-bhero--bg-grid .tf-bhero__bg,.tf-bhero--brand.tf-bhero--bg-grid .tf-bhero__bg{color:rgba(255,255,255,.1)}
.tf-bhero--bg-dots .tf-bhero__bg{background-image:radial-gradient(currentColor 1.2px,transparent 1.4px);background-size:22px 22px;color:rgba(13,6,37,.14);-webkit-mask-image:radial-gradient(80% 100% at 80% 0%,#000,transparent 75%);mask-image:radial-gradient(80% 100% at 80% 0%,#000,transparent 75%)}
.tf-bhero--dark.tf-bhero--bg-dots .tf-bhero__bg,.tf-bhero--brand.tf-bhero--bg-dots .tf-bhero__bg{color:rgba(255,255,255,.22)}

/* ---- layouts ---- */
.tf-bhero--split .tf-bhero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.tf-bhero--split.tf-bhero--no-image .tf-bhero__inner{grid-template-columns:minmax(0,820px)}
.tf-bhero--centered .tf-bhero__inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.tf-bhero--centered .tf-bhero__copy{justify-items:center;max-width:860px}
.tf-bhero--centered .tf-bhero__meta,.tf-bhero--centered .tf-bh-crumbs ol,.tf-bhero--centered .tf-bhero__actions{justify-content:center}
.tf-bhero--centered .tf-bhero__media{width:100%;aspect-ratio:var(--tf-bh-ratio);max-height:560px}
.tf-bhero--minimal{background:none}
.tf-bhero--minimal .tf-bhero__inner{grid-template-columns:minmax(0,900px);padding-block:clamp(20px,3vw,40px)}
.tf-bhero--minimal .tf-bhero__title{font-size:clamp(32px,6.6cqi,68px)}
.tf-bhero--minimal .tf-bhero__media{aspect-ratio:var(--tf-bh-ratio);max-height:480px}
.tf-bhero--card{background:none;overflow:visible}
.tf-bhero--card .tf-bhero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:#fff;border-radius:calc(var(--tf-r) + 12px);box-shadow:var(--tf-shadow-up);padding:clamp(22px,3.4vw,44px)}
.tf-bhero--card.tf-bhero--dark .tf-bhero__inner{background:var(--ts-ink,#0d0625)}
.tf-bhero--card.tf-bhero--brand .tf-bhero__inner{background:linear-gradient(125deg,var(--tf-acc),color-mix(in srgb,var(--tf-acc) 58%,var(--ts-ink,#0d0625)))}
.tf-bhero--card .tf-bhero__bg{display:none}
.tf-bhero--cover{--tf-bh-fg:#fff;--tf-bh-sub:rgba(255,255,255,.88);--tf-bh-mute:rgba(255,255,255,.75);background:var(--ts-ink,#0d0625)}
.tf-bhero--cover .tf-bhero__inner{grid-template-columns:minmax(0,820px);align-items:end;min-height:max(var(--tf-bh-min),clamp(420px,64vh,680px));padding-block:clamp(40px,7vw,96px) clamp(28px,4vw,56px)}
.tf-bhero--cover .tf-bhero__media{position:absolute;inset:0;z-index:-1;border-radius:0;aspect-ratio:auto;box-shadow:none;background:var(--ts-ink,#0d0625)}
.tf-bhero--cover .tf-bhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,6,37,.25) 0%,rgba(13,6,37,.55) 45%,rgba(13,6,37,.88) 100%)}
.tf-bhero--cover .tf-bhero__chip{background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tf-bhero--cover .tf-btn--primary{background:#fff;color:var(--ts-ink,#0d0625)}
.tf-bhero--cover .tf-bhero__inner{position:static}
.tf-bhero--cover .tf-bhero__copy,.tf-bhero--cover .tf-bhero__summary{position:relative;z-index:1}
.tf-bhero--cover .tf-bhero__bg{display:none}
.tf-bhero--cover.tf-bhero--no-image .tf-bhero__bg{display:block}

/* ---- summary ("Kurz & knapp") ---- */
.tf-bhero__summary{position:relative;max-width:var(--wd-container-w,1222px);margin:0 auto clamp(20px,3vw,40px);width:calc(100% - clamp(36px,8vw,80px));padding:clamp(18px,2.4vw,28px);border-radius:var(--tf-r);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(13,6,37,.07),0 18px 40px -26px rgba(13,6,37,.35);color:var(--tf-text)}
.tf-bhero--dark .tf-bhero__summary,.tf-bhero--cover .tf-bhero__summary,.tf-bhero--brand .tf-bhero__summary{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.18);color:#fff}
.tf-bhero__summary-title{display:block;margin-bottom:10px;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tf-link)}
.tf-bhero--dark .tf-bhero__summary-title,.tf-bhero--cover .tf-bhero__summary-title,.tf-bhero--brand .tf-bhero__summary-title{color:#fff}
.tf-bhero__summary ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 24px;margin:0;padding:0;list-style:none}
.tf-bhero__summary li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5}
.tf-bhero__summary li svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--tf-acc)}
.tf-bhero--dark .tf-bhero__summary li svg,.tf-bhero--cover .tf-bhero__summary li svg,.tf-bhero--brand .tf-bhero__summary li svg{color:#fff}
.tf-bhero--card .tf-bhero__summary{margin-top:14px}

/* ---- entrance animation ---- */
.tf-bhero--intro-stagger .tf-bhero__item{animation:tf-bh-in .75s var(--tf-ease) both;animation-delay:calc(var(--i,0)*70ms)}
.tf-bhero--intro-rise .tf-bhero__item{animation:tf-bh-in .8s var(--tf-ease) both}
.tf-bhero--intro-fade .tf-bhero__item{animation:tf-bh-fade .9s ease both}
@keyframes tf-bh-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tf-bh-fade{from{opacity:0}to{opacity:1}}
.tf-bhero--cover .tf-bhero__media.tf-bhero__item{animation:none}
.tf-bhero--img-zoom .tf-bhero__img{animation:tf-bh-zoom 1.6s var(--tf-ease) both}
@keyframes tf-bh-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.tf-bhero--img-float:not(.tf-bhero--cover) .tf-bhero__media{animation:tf-bh-float 7s ease-in-out infinite}
@keyframes tf-bh-float{50%{transform:translateY(-10px)}}
.tf-bhero--img-tilt .tf-bhero__img{transition:transform .6s var(--tf-ease)}
.tf-bhero--img-tilt .tf-bhero__media:hover .tf-bhero__img{transform:scale(1.04)}
.tf-bhero--img-float .tf-bhero__media.tf-bhero__item{animation:tf-bh-in .75s var(--tf-ease) both,tf-bh-float 7s 1s ease-in-out infinite}

/* ---- responsive (container based: works in narrow columns too) ---- */
@container bhero (max-width:900px){
  .tf-bhero--split .tf-bhero__inner,.tf-bhero--card .tf-bhero__inner{grid-template-columns:minmax(0,1fr)}
  .tf-bhero--split .tf-bhero__media,.tf-bhero--card .tf-bhero__media{aspect-ratio:16/10}
}
@container bhero (max-width:560px){
  .tf-bhero__meta{gap:6px 14px;font-size:13px}
  .tf-bh-crumbs li:last-child{max-width:24ch}
  .tf-bhero__actions .tf-btn{flex:1 1 100%}
  .tf-bhero--cover .tf-bhero__inner{min-height:max(var(--tf-bh-min),460px)}
}
@media (prefers-reduced-motion:reduce){
  .tf-bhero__item,.tf-bhero__img,.tf-bhero__media,.tf-bhero__bg::before,.tf-bhero__bg::after{animation:none!important;transition:none!important}
  .tf-bhero__progress{animation:none!important}
}
@media print{.tf-bhero__bg,.tf-bhero__progress{display:none}.tf-bhero{background:none!important;color:#000}}