/* ahabFlow Videos: Startseite (Anwendungsfälle, Workflows, Monitoring) und E-Rechnung */
.af-hero-video{margin:0;display:flex;flex-direction:column;min-width:0}
.af-hero-video-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px}
.af-hero-video-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.af-hero-video-frame video:focus-visible{outline:2px solid var(--color-primary-glow,#8ac0ee);outline-offset:2px}
.af-hero-video-caption{padding:.6rem .25rem .15rem;font-size:13px;line-height:1.55;color:var(--color-ink-muted,#a7bbd3);max-width:62ch}

/* Anwendungsfälle: Video links, Beispielkarten rechts */
.af-usecase-layout{display:grid;gap:1.25rem;align-items:start}
.af-usecase-video{padding:0}
/* Bildunterschrift auf hellem bzw. dunklem Seitenhintergrund (folgt dem Design) */
.af-light-caption .af-hero-video-caption{color:var(--color-muted-foreground,#5b6b7d);padding:.7rem .1rem 0}
.af-light-caption .af-hero-video-caption strong{color:var(--color-foreground,#0f1b2a)}
.af-hero-video-caption strong{color:#fff;font-weight:600}
.af-usecase-cards>article{padding:1.1rem 1.25rem}
.af-usecase-cards h3{margin-top:0}
.af-usecase-cards>article p{padding-top:.75rem}
@media (min-width:1024px){
  .af-usecase-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.5rem}
  .af-usecase-video{position:sticky;top:5.5rem}
}

/* Play-Knopf unten links über dem Vorschaubild, lässt den Titel im Bild frei.
   Nach dem Start übernimmt die normale Videosteuerung. */
.af-hero-video-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(to top,rgba(9,21,36,.85),rgba(9,21,36,0));pointer-events:none}
.af-hero-video-frame.is-started::after{display:none}
.af-hero-video-play{position:absolute;left:10px;bottom:10px;z-index:1;display:inline-flex;align-items:center;gap:.6rem;min-height:40px;padding:.35rem .85rem .35rem .4rem;border:0;border-radius:999px;background:#fff;color:#091524;font-size:13px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:background .15s ease}
.af-hero-video-play:hover{background:#dcebf8}
.af-hero-video-play:focus-visible{outline:3px solid var(--color-primary-glow,#8ac0ee);outline-offset:3px}
.af-hero-video-play-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#1d5a8c;color:#fff}
.af-hero-video-play-icon svg{margin-left:2px}
.af-hero-video-play small{font-size:12px;font-weight:500;color:#44576d}
.af-hero-video-frame.is-started .af-hero-video-play{display:none}
@media (prefers-reduced-motion:reduce){.af-hero-video-play{transition:none}}
@media (max-width:479px){.af-hero-video-play{left:10px;bottom:10px;min-height:40px;padding:.35rem .8rem .35rem .4rem;font-size:13px}.af-hero-video-play-icon{width:28px;height:28px}}

/* Video-Blöcke Workflows und Monitoring (Startseite) */
.af-video-block{padding:4rem 1.25rem;scroll-margin-top:4.5rem}
.af-video-block--alt{background:color-mix(in srgb,var(--color-primary,#1d5a8c) 5%,transparent);border-top:1px solid var(--color-border,#d9e0e8);border-bottom:1px solid var(--color-border,#d9e0e8)}
.af-video-block-inner{max-width:1140px;margin:0 auto;display:grid;gap:2rem;align-items:center}
.af-video-block-text{max-width:36rem}
.af-video-block-list{margin:1.25rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.af-video-block-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:15.5px;line-height:1.5}
.af-video-block-check{flex:none;width:18px;height:18px;margin-top:.2rem;color:var(--success,#0f7d54)}
.af-video-block-link{display:inline-block;margin-top:1.5rem;font-weight:600;font-size:15px;color:var(--color-primary,#1d5a8c);text-decoration:none}
.af-video-block-link:hover{text-decoration:underline}
@media (min-width:768px){.af-video-block{padding:5rem 1.25rem}}
/* Der Workflow-Block schließt direkt an „Die Ausgangslage“ an */
#workflows{padding-top:0}
@media (min-width:1024px){
  .af-video-block-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.5rem}
  .af-video-block-inner--reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
/* Auf schmalen Bildschirmen steht der Text immer über dem Video */
@media (max-width:1023px){.af-video-block-inner--reverse .af-video-block-text{order:-1}}

/* E-Rechnung: Video rechts im dunklen Kopfbereich */
.af-subhero-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:1024px){.af-subhero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem}}
.af-subhero-video{max-width:560px;width:100%}