{"id":9094,"date":"2026-05-17T23:24:45","date_gmt":"2026-05-17T21:24:45","guid":{"rendered":"https:\/\/mf-mgmt.com\/?page_id=9094"},"modified":"2026-09-11T11:31:13","modified_gmt":"2026-09-11T09:31:13","slug":"sidelaneai","status":"publish","type":"page","link":"https:\/\/mf-mgmt.com\/en\/sidelaneai\/","title":{"rendered":"Home &#8211; SidelaneAI &#8211; 2026"},"content":{"rendered":"<div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid wpb_animate_when_almost_visible wpb_fadeIn fadeIn vc_custom_1779196594437 vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-has-fill\"><div class=\"vc_column-inner vc_custom_1779196490803\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<section class=\"video-hero\" aria-label=\"Fullscreen video\">\n  <video class=\"video-hero__video\" autoplay muted loop playsinline preload=\"auto\">\n    <source src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/trailer-web-new.mp4\" type=\"video\/mp4\" \/>\n  <\/video>\n\n  <div class=\"video-hero__overlay\"><\/div>\n<div class=\"video-hero__grain\"><\/div>\n<div class=\"video-hero__content\">\n  <h1>SidelaneAI<\/h1>\n<\/div>\n<\/section>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div id=\"custom-row-mobile-hidden\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid wpb_animate_when_almost_visible wpb_fadeIn fadeIn vc_custom_1779368517886 vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs\"><div class=\"vc_column-inner vc_custom_1779368474651\"><div class=\"wpb_wrapper\"><p style=\"font-size: 12px;color: #5a554f;line-height: 40px;text-align: center;font-family:Roboto;font-weight:500;font-style:normal\" class=\"vc_custom_heading custom-hero-headline\" >was wir m\u00f6glich machen<\/p><p style=\"font-size: 64px;color: #141210;line-height: 75px;text-align: center;font-family:Hind;font-weight:600;font-style:normal\" class=\"vc_custom_heading\" >AI Produktions Plattform.<br \/>\nF\u00fcr Fashion &amp; Beauty Brands.<\/p><\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div id=\"custom-row-desktop-hidden\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid wpb_animate_when_almost_visible wpb_fadeIn fadeIn vc_custom_1779368543664 vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_hidden-lg vc_hidden-md vc_hidden-sm\"><div class=\"vc_column-inner vc_custom_1779368565035\"><div class=\"wpb_wrapper\"><p style=\"font-size: 12px;color: #5a554f;line-height: 40px;text-align: center;font-family:Roboto;font-weight:500;font-style:normal\" class=\"vc_custom_heading custom-hero-headline\" >was wir m\u00f6glich machen<\/p><p style=\"font-size: 36px;color: #141210;line-height: 44px;text-align: center;font-family:Hind;font-weight:600;font-style:normal\" class=\"vc_custom_heading\" >AI Produktions Plattform.<br \/>\nF\u00fcr Fashion &amp; Beauty Brands.<\/p><\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid wpb_animate_when_almost_visible wpb_fadeIn fadeIn vc_custom_1779184889683 vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner vc_custom_1767893475094\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     sidelane ai \u2014 Hero + Pillars (two combined sections)\n     Self-contained block for WordPress \"Custom HTML\".\n\n     Replaces the old 3 sections (Bereit f\u00fcr die Zukunft... \/ Wand-of-text \/\n     was wir m\u00f6glich machen) with two CI-aligned sections.\n     ===================================================================== -->\n\n<style>\n  .hp-section{\n    background:#fff;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    line-height:1.45;\n    -webkit-font-smoothing:antialiased;\n    overflow:hidden;\n  }\n  .hp-section.hp-hero{ padding:120px 0 80px; }\n  .hp-section.hp-pillars-section{ padding:60px 0 100px; }\n\n  .hp-container{\n    max-width:none;\n    margin:0;\n    padding:0 100px;\n    box-sizing:border-box;\n  }\n\n  \/* ===== HERO ===== *\/\n  .hp-hero-grid{\n    display:grid;\n    grid-template-columns:42% 58%;\n    gap:60px;\n    align-items:center;\n  }\n  .hp-hero-text{\n    padding-right:20px;\n  }\n  .hp-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:#5A554F;\n    margin:0 0 18px;\n    font-weight:500;\n  }\n  .hp-hero-title{\n    font-size:clamp(36px,4.4vw,44px);\n    line-height:1.05;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 0 24px !important;\n    text-align:left !important;\n    color:#141210;\n    text-transform: none;\n  }\n  .hp-hero-sub{\n    font-size:17px;\n    line-height:1.55;\n    color:#5A554F;\n    margin:0 0 28px;\n    max-width:480px;\n  }\n  .hp-cta{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    font-size:15px;\n    color:#0066CC;\n    text-decoration:none;\n    padding:12px 0;\n  }\n  .hp-cta:hover{ text-decoration:underline; }\n\n  \/* \u2500\u2500 Wiederverwendbare Reveal-\/Countdown-Logik (heller Look) \u2500\u2500 *\/\n  .reveal-live{ display:none; }\n  .reveal.is-live .reveal-live{ display:inline-flex; }\n  .reveal.is-live .reveal-locked{ display:none; }\n  .reveal-locked{\n    display:inline-flex; align-items:center; gap:9px;\n    padding:11px 16px;\n    background:#141210;\n    border:1px solid #141210; border-radius:999px;\n    font-size:14px; line-height:1; color:rgba(255,255,255,0.85);\n  }\n  .reveal-locked svg{ width:15px; height:15px; flex-shrink:0; stroke:rgba(255,255,255,0.7); }\n  .reveal-count{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }\n\n  \/* Hero image pair card *\/\n  .hp-hero-pair{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:14px;\n    border-radius:30px;\n    overflow:hidden;\n  }\n  .hp-hero-img{\n    aspect-ratio:3 \/ 4;\n    background:#F4F2EE;\n    overflow:hidden;\n    border-radius:22px;\n  }\n  .hp-hero-img img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    object-position:center center;\n    display:block;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n\n  \/* ===== PILLARS ===== *\/\n  .hp-pillars-head{\n    margin-bottom:48px;\n    max-width:780px;\n  }\n  .hp-pillars-title{\n    font-size:clamp(28px,3.4vw,44px);\n    line-height:1.08;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 0 16px !important;\n    text-align:left !important;\n    color:#141210;\n    text-transform: none;\n  }\n  .hp-pillars-sub{\n    font-size:16px;\n    line-height:1.55;\n    color:#5A554F;\n    margin:0;\n    max-width:680px;\n  }\n\n  .hp-pillars{\n    display:grid;\n    grid-template-columns:repeat(3, 1fr);\n    gap:28px;\n  }\n  .hp-pillar{\n    background:#F4F2EE;\n    border:1px solid #eee;\n    border-radius:30px;\n    padding:36px 32px 36px;\n    display:flex;\n    flex-direction:column;\n    gap:0;\n  }\n  .hp-pillar-icon{\n    width:56px;\n    height:56px;\n    border-radius:50%;\n    background:#fff;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    margin-bottom:24px;\n    color:#141210;\n  }\n  .hp-pillar-icon svg{ width:24px; height:24px; }\n  .hp-pillar-title{\n    font-size:22px;\n    font-weight:700;\n    line-height:1.2;\n    margin:0 0 12px;\n    letter-spacing:-0.01em;\n    color:#141210;\n  }\n  .hp-pillar-text{\n    font-size:15px;\n    line-height:1.55;\n    color:#5A554F;\n    margin:0;\n  }\n\n  \/* ===== Mobile ===== *\/\n  @media (max-width: 900px){\n    .hp-section.hp-hero{ padding:64px 0 48px; }\n    .hp-section.hp-pillars-section{ padding:40px 0 64px; }\n    .hp-container{ padding:0 20px; }\n\n    .hp-hero-grid{\n      grid-template-columns:1fr;\n      gap:32px;\n    }\n    .hp-hero-text{ padding-right:0; }\n    .hp-hero-title{ font-size:36px; }\n    .hp-hero-sub{ font-size:15px; max-width:none; }\n\n    .hp-hero-pair{\n      gap:10px;\n      border-radius:22px;\n    }\n    .hp-hero-img{ border-radius:18px; }\n\n    .hp-pillars-head{ margin-bottom:28px; }\n    .hp-pillars-title{ font-size:30px; }\n    .hp-pillars{\n      grid-template-columns:1fr;\n      gap:16px;\n    }\n    .hp-pillar{\n      padding:28px 24px;\n      border-radius:22px;\n    }\n    .hp-pillar-icon{\n      width:48px;\n      height:48px;\n      margin-bottom:18px;\n    }\n    .hp-pillar-icon svg{ width:22px; height:22px; }\n    .hp-pillar-title{ font-size:19px; }\n    .hp-pillar-text{ font-size:14.5px; }\n  }\n<\/style>\n\n<!-- ===== Section 1: Hero ===== -->\n<section class=\"hp-section hp-hero\">\n  <div class=\"hp-container\">\n    <div class=\"hp-hero-grid\">\n\n      <div class=\"hp-hero-text\">\n        <p class=\"hp-eyebrow\">SidelaneAI<\/p>\n        <h1 class=\"hp-hero-title\">AI-Models.<br>Digital inszeniert.<br>Alles in einer Plattform.<\/h1>\n        <p class=\"hp-hero-sub\">Lizenzierte Agenturmodels und AI-Avatare, digital produziert. Buyouts und Vertr\u00e4ge inklusive, alles in einem Prozess.<\/p>\n        <span class=\"reveal\" data-launch=\"2026-09-16T12:00:00+02:00\">\n          <a class=\"hp-cta reveal-live\" href=\"https:\/\/studio.mf-mgmt.com\/register\" target=\"_blank\" rel=\"noopener noreferrer\">Jetzt ausprobieren \u203a<\/a>\n          <span class=\"reveal-locked\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>F\u00fcr Gesch\u00e4ftskunden verf\u00fcgbar in <b class=\"reveal-count\">\u2026<\/b><\/span>\n        <\/span>\n      <\/div>\n\n      <div class=\"hp-hero-pair\">\n        <div class=\"hp-hero-img\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/2026-05-17_Amara_1da5cf82-scaled.jpeg\" alt=\"Model Mode\" loading=\"eager\">\n        <\/div>\n        <div class=\"hp-hero-img\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-25.jpeg\" alt=\"Model Beauty\" loading=\"eager\">\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== Section 2: Drei S\u00e4ulen ===== -->\n<section class=\"hp-section hp-pillars-section\">\n  <div class=\"hp-container\">\n\n    <div class=\"hp-pillars-head\">\n      <p class=\"hp-eyebrow\">Wie es funktioniert<\/p>\n      <h2 class=\"hp-pillars-title\">Eine Plattform, drei S\u00e4ulen.<\/h2>\n      <p class=\"hp-pillars-sub\">Vom Model bis zum freigegebenen Bild. Die Brand steuert alles selbst.<\/p>\n    <\/div>\n\n    <div class=\"hp-pillars\">\n\n      <article class=\"hp-pillar\">\n        <div class=\"hp-pillar-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n        <\/div>\n        <h3 class=\"hp-pillar-title\">AI-Models.<\/h3>\n        <p class=\"hp-pillar-text\">Lizenzierte Agenturmodels, AI-Avatare, die Wahl trifft die Brand direkt in der Plattform.<\/p>\n      <\/article>\n\n      <article class=\"hp-pillar\">\n        <div class=\"hp-pillar-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 4V2\"\/><path d=\"M15 16v-2\"\/><path d=\"M8 9h2\"\/><path d=\"M20 9h2\"\/><path d=\"M17.8 11.8 19 13\"\/><path d=\"M15 9h.01\"\/><path d=\"M17.8 6.2 19 5\"\/><path d=\"m3 21 9-9\"\/><path d=\"M12.2 6.2 11 5\"\/><\/svg>\n        <\/div>\n        <h3 class=\"hp-pillar-title\">AI-Produktion.<\/h3>\n        <p class=\"hp-pillar-text\">Custom-Pipelines f\u00fcr konsistente Markenoptik. Die Brand erstellt AI-Bilder intuitiv selbst \u2014 ohne Vorkenntnisse.<\/p>\n      <\/article>\n\n      <article class=\"hp-pillar\">\n        <div class=\"hp-pillar-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><path d=\"m9 15 2 2 4-4\"\/><\/svg>\n        <\/div>\n        <h3 class=\"hp-pillar-title\">Buyout, Vertrag & Rechnung.<\/h3>\n        <p class=\"hp-pillar-text\">Buyout-Kalkulation mit Laufzeiten und Nutzungsrechten. Digitale Signatur \u2014 Vertr\u00e4ge direkt im Workflow.<\/p>\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ \u2500\u2500 Wiederverwendbare Reveal-\/Countdown-Logik \u2500\u2500\n  (function(){\n    var items = Array.prototype.slice.call(document.querySelectorAll('.reveal[data-launch]'))\n      .map(function(el){ return { el: el, target: new Date(el.getAttribute('data-launch')).getTime(), count: el.querySelector('.reveal-count') }; })\n      .filter(function(it){ return !isNaN(it.target); });\n    if (!items.length) return;\n\n    function fmt(ms){\n      \/\/ 12 Std oder mehr \u2192 nur Tage\n      if (ms >= 12 * 3600 * 1000){\n        var days = Math.round(ms \/ 86400000);\n        if (days < 1) days = 1;\n        return days + (days === 1 ? ' Tag' : ' Tagen');\n      }\n      \/\/ weniger als 12 Std \u2192 Stunden und Minuten (keine Sekunden)\n      var totalMin = Math.floor(ms \/ 60000);\n      var h = Math.floor(totalMin \/ 60);\n      var m = totalMin - h * 60;\n      return (h > 0 ? h + ' Std ' + m + ' Min' : m + ' Min');\n    }\n    function tick(){\n      var now = Date.now(), pending = false;\n      items.forEach(function(it){\n        var rem = it.target - now;\n        if (rem <= 0){\n          it.el.classList.add('is-live');\n        } else {\n          it.el.classList.remove('is-live');\n          if (it.count) it.count.textContent = fmt(rem);\n          pending = true;\n        }\n      });\n      return pending;\n    }\n    if (tick()){\n      var iv = setInterval(function(){ if (!tick()) clearInterval(iv); }, 60000);\n    }\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779120622418 vc_row-no-padding vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner vc_custom_1767893475094\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 Features Carousel\n     Self-contained block for WordPress \"Custom HTML\".\n\n     Same architecture as the workflow section:\n     - CSS transform on the track (no scroll container)\n     - Arrow buttons + swipe gesture\n     - First card aligns with headline, last card clamps to viewport\n     ===================================================================== -->\n\n<style>\n  .fc-section{\n    background:#fff;\n    padding:160px 0 56px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    line-height:1.45;\n    -webkit-font-smoothing:antialiased;\n    overflow:hidden;\n  }\n\n  .fc-container{\n    max-width:1480px;\n    margin:0 auto;\n    padding:0 24px;\n    box-sizing:border-box;\n  }\n\n  \/* Header \u2014 title left, link+arrows stacked right *\/\n  .fc-head{\n    display:flex;\n    align-items:flex-end;\n    justify-content:space-between;\n    gap:24px;\n    margin-bottom:36px;\n    flex-wrap:wrap;\n  }\n  .fc-title-block{\n    display:flex;\n    flex-direction:column;\n    gap:0;\n    min-width:0;\n  }\n  .fc-title{\n    font-size:clamp(28px,4vw,44px);\n    line-height:1.08;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 !important;\n    text-align:left !important;\n    text-transform:none;\n    max-width:780px;\n  }\n\n  \/* Right column: link above arrows *\/\n  .fc-actions{\n    display:flex;\n    flex-direction:column;\n    align-items:flex-end;\n    gap:14px;\n  }\n  .fc-link{\n    font-size:15px;\n    color:#0066CC;\n    text-decoration:none;\n    white-space:nowrap;\n  }\n  .fc-link:hover{ text-decoration:underline; }\n\n  \/* \u2500\u2500 Wiederverwendbare Reveal-\/Countdown-Logik (schwarze Pille auf hellem Grund) \u2500\u2500 *\/\n  .reveal-live{ display:none; }\n  .reveal.is-live .reveal-live{ display:inline-flex; }\n  .reveal.is-live .reveal-locked{ display:none; }\n  .reveal-locked{\n    display:inline-flex; align-items:center; gap:9px;\n    padding:11px 16px;\n    background:#141210;\n    border:1px solid #141210; border-radius:999px;\n    font-size:14px; line-height:1; color:rgba(255,255,255,0.85);\n  }\n  .reveal-locked svg{ width:15px; height:15px; flex-shrink:0; stroke:rgba(255,255,255,0.7); }\n  .reveal-count{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }\n\n  \/* Arrows *\/\n  .fc-arrows{\n    display:flex;\n    gap:10px;\n    align-items:center;\n  }\n  .fc-arrow{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:none;\n    background:#F0EDE8;\n    color:#141210;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    transition:background .15s, opacity .15s, color .15s;\n  }\n  .fc-arrow:hover:not(:disabled){ background:#141210; color:#fff; }\n  .fc-arrow:disabled{ opacity:0.35; cursor:default; }\n  .fc-arrow svg{ width:18px; height:18px; }\n\n  \/* Track-viewport \u2014 full-viewport-width, breaks out of container *\/\n  .fc-viewport{\n    width:100vw;\n    margin-left:calc(-50vw + 50%);\n    overflow:hidden;\n    position:relative;\n  }\n\n  \/* Track \u2014 flex row, transform-based animation *\/\n  .fc-track{\n    display:flex;\n    gap:56px;\n    padding-left:max(24px, calc((100vw - 1480px) \/ 2 + 24px));\n    box-sizing:border-box;\n    transform:translateX(var(--fc-offset, 0px));\n    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change:transform;\n  }\n\n  \/* Card \u2014 image on top, body underneath *\/\n  .fc-card{\n    flex:0 0 var(--fc-card-width, 880px);\n    display:flex;\n    flex-direction:column;\n    opacity:0.5;\n    transition:opacity 0.5s ease;\n    cursor:pointer;\n  }\n  .fc-card.is-active{\n    opacity:1;\n    cursor:default;\n  }\n\n  .fc-card-image{\n    background:#F4F2EE;\n    border-radius:30px;\n    overflow:hidden;\n    border:1px solid #eee;\n    box-sizing:border-box;\n    aspect-ratio:4 \/ 3;\n  }\n  .fc-card-image img{\n    display:block;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    object-position:center;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n  .fc-card-body{\n    padding:35px 6px 0;\n    max-width:560px;\n  }\n  .fc-card-title{\n    font-size:25px;\n    font-weight:700;\n    line-height:1.2;\n    margin:0 0 8px;\n    letter-spacing:-0.01em;\n    text-transform:none;\n  }\n  .fc-card-text{\n    font-size:14.5px;\n    color:#5A554F;\n    margin:0;\n    line-height:1.55;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 820px){\n    .fc-section{ padding:56px 0 40px; }\n    .fc-container{ padding:0 20px; }\n    .fc-head{ margin-bottom:24px; }\n    .fc-arrow{ width:40px; height:40px; }\n    .fc-track{ gap:24px; }\n    .fc-card{ flex:0 0 var(--fc-card-width, 84vw); }\n    .fc-card-image{ border-radius:22px; }\n    .fc-card-body{ padding:18px 2px 0; max-width:none; }\n    .fc-card-title{ font-size:18px; }\n    .fc-card-text{ font-size:13.5px; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .fc-track{ transition:none; }\n    .fc-card{ transition:none; }\n  }\n<\/style>\n\n<section class=\"fc-section\">\n  <div class=\"fc-container\">\n\n    <div class=\"fc-head\">\n      <div class=\"fc-title-block\">\n        <h2 class=\"fc-title\">Das Studio.<br>Der zentrale Ort f\u00fcr die Produktion.<\/h2>\n      <\/div>\n      <div class=\"fc-actions\">\n        <span class=\"reveal\" data-launch=\"2026-09-16T12:00:00+02:00\">\n          <a class=\"fc-link reveal-live\" href=\"https:\/\/studio.mf-mgmt.com\/register\" target=\"_blank\" rel=\"noopener noreferrer\">Jetzt ausprobieren \u203a<\/a>\n          <span class=\"reveal-locked\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>F\u00fcr Gesch\u00e4ftskunden verf\u00fcgbar in <b class=\"reveal-count\">\u2026<\/b><\/span>\n        <\/span>\n        <div class=\"fc-arrows\">\n          <button class=\"fc-arrow\" id=\"fc-prev\" aria-label=\"Zur\u00fcck\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"\/><\/svg>\n          <\/button>\n          <button class=\"fc-arrow\" id=\"fc-next\" aria-label=\"Weiter\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"fc-viewport\">\n    <div class=\"fc-track\" id=\"fc-track\">\n\n      <article class=\"fc-card is-active\" data-index=\"0\">\n        <div class=\"fc-card-image\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/aigency-studio-1.jpeg\" alt=\"Composer und Preset speichern\" loading=\"lazy\">\n        <\/div>\n        <div class=\"fc-card-body\">\n          <h3 class=\"fc-card-title\">Composer und Preset.<\/h3>\n          <p class=\"fc-card-text\">Bausteine kombinieren, Setups konservieren. Board, Outfit, Model \u2014 gespeichert als Preset, jederzeit wieder einsatzbereit.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"fc-card\" data-index=\"1\">\n        <div class=\"fc-card-image\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/aigency-studio-3.jpeg\" alt=\"Model-Auswahl und Buyout-Vertrag\" loading=\"lazy\">\n        <\/div>\n        <div class=\"fc-card-body\">\n          <h3 class=\"fc-card-title\">Vom Model zum Vertrag.<\/h3>\n          <p class=\"fc-card-text\">Models, Nutzungsrechte und digitale Signatur in einem Workflow.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"fc-card\" data-index=\"2\">\n        <div class=\"fc-card-image\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/aigency-studio-6.jpeg\" alt=\"Bild-Feedback mit Markierungen und Kommentaren\" loading=\"lazy\">\n        <\/div>\n        <div class=\"fc-card-body\">\n          <h3 class=\"fc-card-title\">Feedback direkt am Bild.<\/h3>\n          <p class=\"fc-card-text\">Markierungen auf konkreten Bildbereichen, Kommentare mit Erw\u00e4hnungen, alles im Kontext. Kein E-Mail-Ping-Pong.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"fc-card\" data-index=\"3\">\n        <div class=\"fc-card-image\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/aigency-studio-2.jpeg\" alt=\"Review- und Refine-Modus\" loading=\"lazy\">\n        <\/div>\n        <div class=\"fc-card-body\">\n          <h3 class=\"fc-card-title\">Review & Refine.<\/h3>\n          <p class=\"fc-card-text\">Sichten und freigeben im Review-Modus. Variationen entstehen im Refine-Modus, ohne das Setup neu aufzubauen.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"fc-card\" data-index=\"4\">\n        <div class=\"fc-card-image\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/aigency-studio-outfit.jpeg\" alt=\"Outfit-Verwaltung mit Kategorie und Passform\" loading=\"lazy\">\n        <\/div>\n        <div class=\"fc-card-body\">\n          <h3 class=\"fc-card-title\">Outfit-Bibliothek.<\/h3>\n          <p class=\"fc-card-text\">Hochladen gen\u00fcgt \u2014 Eigenschaften und Kategorien entstehen automatisch. \u00c4nderungen \u00fcbertragen sich in alle bestehenden Produktionen.<\/p>\n        <\/div>\n      <\/article>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<script>\n  (function(){\n    var section = document.querySelector('.fc-section');\n    var container = document.querySelector('.fc-container');\n    var track = document.getElementById('fc-track');\n    var prev = document.getElementById('fc-prev');\n    var next = document.getElementById('fc-next');\n    var cards = document.querySelectorAll('.fc-card');\n    if (!section || !container || !track || !prev || !next || !cards.length) return;\n\n    var currentIndex = 0;\n\n    function getCardWidth(){\n      \/\/ Desktop: large cards (~880px). Mobile: 84vw.\n      var containerWidth = container.getBoundingClientRect().width;\n      if (window.innerWidth <= 820) return window.innerWidth * 0.84;\n      \/\/ Show ~1.5 cards: container minus a \"peek\" so half of card 2 is visible\n      var desired = containerWidth - 200; \/\/ leave 200px peek\n      return Math.max(560, Math.min(940, desired));\n    }\n\n    function getMaxNegOffset(){\n      var trackWidth = track.scrollWidth;\n      var viewportWidth = window.innerWidth;\n      \/\/ Allow last card to end ~24px from viewport right\n      var maxNeg = -(trackWidth - viewportWidth + 24);\n      return Math.min(0, maxNeg);\n    }\n\n    function update(){\n      track.style.setProperty('--fc-card-width', getCardWidth() + 'px');\n\n      var cardW = getCardWidth();\n      var gap = parseInt(getComputedStyle(track).gap, 10) || 56;\n      var desiredOffset = -(currentIndex * (cardW + gap));\n      var maxNegOffset = getMaxNegOffset();\n      var offset = Math.max(maxNegOffset, desiredOffset);\n      track.style.setProperty('--fc-offset', offset + 'px');\n\n      cards.forEach(function(c, i){\n        c.classList.toggle('is-active', i === currentIndex);\n      });\n\n      \/\/ Boundary buttons \u2014 only disable based on currentIndex, not on offset\n      prev.disabled = currentIndex === 0;\n      next.disabled = currentIndex === cards.length - 1;\n    }\n\n    function goTo(index){\n      var clamped = Math.max(0, Math.min(cards.length - 1, index));\n      if (clamped === currentIndex) return;\n      currentIndex = clamped;\n      update();\n    }\n\n    prev.addEventListener('click', function(){ goTo(currentIndex - 1); });\n    next.addEventListener('click', function(){ goTo(currentIndex + 1); });\n\n    \/\/ Click on a card to navigate to it (when not already active)\n    cards.forEach(function(c, i){\n      c.addEventListener('click', function(){\n        if (i !== currentIndex) goTo(i);\n      });\n    });\n\n    \/\/ Debounced resize\n    var resizeTimer;\n    window.addEventListener('resize', function(){\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(update, 150);\n    });\n\n    \/\/ Swipe support\n    var touchStartX = 0;\n    var touchStartY = 0;\n    var touchActive = false;\n    var SWIPE_THRESHOLD = 50;\n    var DIRECTION_LOCK_THRESHOLD = 10;\n\n    track.addEventListener('touchstart', function(e){\n      if (e.touches.length !== 1) return;\n      var t = e.touches[0];\n      touchStartX = t.clientX;\n      touchStartY = t.clientY;\n      touchActive = true;\n    }, { passive: true });\n\n    track.addEventListener('touchmove', function(e){\n      if (!touchActive || e.touches.length !== 1) return;\n      var t = e.touches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      if (Math.abs(dx) > DIRECTION_LOCK_THRESHOLD || Math.abs(dy) > DIRECTION_LOCK_THRESHOLD){\n        if (Math.abs(dy) > Math.abs(dx)){\n          touchActive = false;\n        }\n      }\n    }, { passive: true });\n\n    track.addEventListener('touchend', function(e){\n      if (!touchActive) return;\n      touchActive = false;\n      var t = e.changedTouches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      if (Math.abs(dx) < SWIPE_THRESHOLD) return;\n      if (Math.abs(dy) > Math.abs(dx)) return;\n      goTo(dx < 0 ? currentIndex + 1 : currentIndex - 1);\n    }, { passive: true });\n\n    update();\n  })();\n\n  \/\/ \u2500\u2500 Wiederverwendbare Reveal-\/Countdown-Logik \u2500\u2500\n  (function(){\n    var items = Array.prototype.slice.call(document.querySelectorAll('.reveal[data-launch]'))\n      .map(function(el){ return { el: el, target: new Date(el.getAttribute('data-launch')).getTime(), count: el.querySelector('.reveal-count') }; })\n      .filter(function(it){ return !isNaN(it.target); });\n    if (!items.length) return;\n\n    function fmt(ms){\n      \/\/ 12 Std oder mehr \u2192 nur Tage\n      if (ms >= 12 * 3600 * 1000){\n        var days = Math.round(ms \/ 86400000);\n        if (days < 1) days = 1;\n        return days + (days === 1 ? ' Tag' : ' Tagen');\n      }\n      \/\/ weniger als 12 Std \u2192 Stunden und Minuten (keine Sekunden)\n      var totalMin = Math.floor(ms \/ 60000);\n      var h = Math.floor(totalMin \/ 60);\n      var m = totalMin - h * 60;\n      return (h > 0 ? h + ' Std ' + m + ' Min' : m + ' Min');\n    }\n    function tick(){\n      var now = Date.now(), pending = false;\n      items.forEach(function(it){\n        var rem = it.target - now;\n        if (rem <= 0){\n          it.el.classList.add('is-live');\n        } else {\n          it.el.classList.remove('is-live');\n          if (it.count) it.count.textContent = fmt(rem);\n          pending = true;\n        }\n      });\n      return pending;\n    }\n    if (tick()){\n      var iv = setInterval(function(){ if (!tick()) clearInterval(iv); }, 60000);\n    }\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779203480557 vc_row-has-fill vc_row-no-padding vc_row-o-content-top vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 Outfit Story Cards\n     Self-contained block for WordPress \"Custom HTML\".\n\n     Desktop: 2 cards side-by-side\n     Mobile: cards stacked vertically (one below the other)\n\n     Each card:\n     - 40% flatlay (static, left)\n     - 60% KI photos (vertical scroll\/click, right)\n     - Dots indicator for KI photos\n     - One-time bounce hint per page load\n     ===================================================================== -->\n\n<style>\n  .os-section{\n    background:#fff;\n    padding:80px 0 56px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    line-height:1.45;\n    -webkit-font-smoothing:antialiased;\n    overflow:hidden;\n  }\n\n  .os-container{\n    max-width:none;\n    margin:0;\n    padding:0 100px;\n    box-sizing:border-box;\n  }\n\n  \/* Optional header *\/\n  .os-head{\n    margin-bottom:40px;\n  }\n  .os-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:#5A554F;\n    margin:0 0 12px;\n    font-weight:500;\n  }\n  .os-title{\n    font-size:clamp(28px,4vw,44px);\n    line-height:1.08;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 !important;\n    text-align:left !important;\n    text-transform:uppercase;\n    max-width:780px;\n  }\n\n  \/* Cards grid \u2014 2 columns, generous gap *\/\n  .os-grid{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:40px;\n  }\n\n  \/* Card *\/\n  .os-card{\n    display:grid;\n    grid-template-columns:40% 60%;\n    background:#F4F2EE;\n    border:1px solid #eee;\n    border-radius:30px;\n    overflow:hidden;\n    aspect-ratio:4 \/ 3;\n    box-sizing:border-box;\n    position:relative;\n  }\n\n  \/* Left: flatlay *\/\n  .os-flatlay{\n    position:relative;\n    overflow:hidden;\n    background:#f4f4f4;\n    border-right:1px solid #eee;\n  }\n  .os-flatlay img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    object-position:center center;\n    display:block;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n\n  \/* Right: KI photos column with dots *\/\n  .os-right{\n    position:relative;\n    display:grid;\n    grid-template-columns:1fr auto;\n    overflow:hidden;\n    height:100%;\n  }\n\n  \/* Photos viewport \u2014 clips the vertical stack *\/\n  .os-photos-viewport{\n    overflow:hidden;\n    position:relative;\n    background:#fff;\n    height:100%;\n  }\n\n  \/* Stack of photos \u2014 translates via CSS variable. *\/\n  .os-photos-stack{\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    transform:translateY(var(--os-offset, 0px));\n    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change:transform;\n  }\n\n  \/* Each photo \u2014 height set by JS to match viewport height *\/\n  .os-photo{\n    position:relative;\n    width:100%;\n    overflow:hidden;\n    cursor:pointer;\n    background:#fff;\n  }\n  .os-photo img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    object-position:center center;\n    display:block;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n  .os-photo.is-active{ cursor:default; }\n\n  \/* Apple-style navigation arrows over the photo viewport *\/\n  .os-arrows{\n    position:absolute;\n    right:14px;\n    top:50%;\n    transform:translateY(-50%);\n    display:flex;\n    flex-direction:column;\n    gap:8px;\n    z-index:4;\n    pointer-events:none;\n  }\n  .os-arrow{\n    width:40px;\n    height:40px;\n    border-radius:999px;\n    border:none;\n    background:rgba(255,255,255,0.9);\n    backdrop-filter:blur(6px);\n    -webkit-backdrop-filter:blur(6px);\n    color:#141210;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    transition:background .15s, opacity .25s, color .15s, transform .15s;\n    pointer-events:auto;\n    padding:0;\n  }\n  .os-arrow:hover:not(:disabled){\n    background:#141210;\n    color:#fff;\n  }\n  .os-arrow:active:not(:disabled){\n    transform:scale(0.94);\n  }\n  .os-arrow:disabled{\n    opacity:0.25;\n    cursor:default;\n    pointer-events:none;\n  }\n  .os-arrow svg{ width:16px; height:16px; }\n\n  @media (max-width: 820px){\n    .os-arrows{ display:none; }\n  }\n\n  \/* Subtle gradient hint over the peek so it reads as \"more below\" *\/\n  .os-photos-viewport::after{\n    content:\"\";\n    position:absolute;\n    left:0;\n    right:0;\n    bottom:0;\n    height:14%;\n    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%);\n    pointer-events:none;\n    opacity:0;\n    transition:opacity 0.3s ease;\n    z-index:3;\n  }\n  .os-photos-viewport.has-peek::after{ opacity:1; }\n\n  \/* Dots indicator *\/\n  .os-dots{\n    display:flex;\n    flex-direction:column;\n    gap:10px;\n    align-items:center;\n    justify-content:center;\n    padding:0 16px;\n    background:#fff;\n  }\n  .os-dot{\n    width:6px;\n    height:6px;\n    border-radius:50%;\n    background:#D3D1C7;\n    border:none;\n    padding:0;\n    cursor:pointer;\n    transition:background 0.3s ease, transform 0.3s ease;\n  }\n  .os-dot:hover{ background:#888780; }\n  .os-dot.is-active{\n    background:#141210;\n    transform:scale(1.35);\n  }\n\n  \/* One-time bounce hint animation *\/\n  @keyframes os-bounce-hint {\n    0%   { transform: translateY(var(--os-offset, 0px)); }\n    35%  { transform: translateY(calc(var(--os-offset, 0px) - 60px)); }\n    65%  { transform: translateY(calc(var(--os-offset, 0px) - 60px)); }\n    100% { transform: translateY(var(--os-offset, 0px)); }\n  }\n  .os-photos-stack.bounce-hint{\n    animation: os-bounce-hint 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;\n  }\n\n  \/* Mobile: cards stacked vertically *\/\n  @media (max-width: 820px){\n    .os-section{ padding:56px 0 40px; }\n    .os-container{ padding:0 20px; }\n    .os-head{ margin-bottom:24px; }\n    .os-grid{\n      display:grid !important;\n      grid-template-columns:1fr !important;\n      grid-template-rows:auto auto !important;\n      gap:20px !important;\n      transform:none !important;\n      width:auto !important;\n      margin-left:0 !important;\n      padding:0 !important;\n    }\n    .os-card{\n      flex:none !important;\n      width:auto !important;\n      aspect-ratio:4 \/ 3.2;\n      border-radius:22px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .os-photos-stack{ transition:none; }\n    .os-photos-stack.bounce-hint{ animation:none; }\n  }\n<\/style>\n\n<section class=\"os-section\">\n  <div class=\"os-container\">\n\n    <div class=\"os-head\">\n      <p class=\"os-eyebrow\">Vom Flatlay zum Bild<\/p>\n      <h2 class=\"os-title\">Ein Outfit,<br>viele Anwendungen.<\/h2>\n    <\/div>\n\n    <div class=\"os-grid\" id=\"os-grid\">\n\n      <article class=\"os-card\" data-card=\"0\">\n        <div class=\"os-flatlay\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/clothing-arket-1019x2048.jpg\" alt=\"Flatlay Outfit 1\" loading=\"lazy\">\n        <\/div>\n        <div class=\"os-right\">\n          <div class=\"os-photos-viewport has-peek\">\n            <div class=\"os-photos-stack\">\n              <div class=\"os-photo is-active\" data-photo=\"0\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-2.png\" alt=\"KI Foto 1\" loading=\"lazy\">\n              <\/div>\n              <div class=\"os-photo\" data-photo=\"1\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-3.jpeg\" alt=\"KI Foto 2\" loading=\"lazy\">\n              <\/div>\n            <\/div>\n            <div class=\"os-arrows\">\n              <button class=\"os-arrow os-arrow-prev\" aria-label=\"Vorheriges Foto\" disabled>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"\/><\/svg>\n              <\/button>\n              <button class=\"os-arrow os-arrow-next\" aria-label=\"N\u00e4chstes Foto\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\n              <\/button>\n            <\/div>\n          <\/div>\n          <div class=\"os-dots\">\n            <button class=\"os-dot is-active\" data-photo=\"0\" aria-label=\"Foto 1\"><\/button>\n            <button class=\"os-dot\" data-photo=\"1\" aria-label=\"Foto 2\"><\/button>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"os-card\" data-card=\"1\">\n        <div class=\"os-flatlay\">\n          <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/clothing-arket-5-733x2048.jpg\" alt=\"Flatlay Outfit 2\" loading=\"lazy\">\n        <\/div>\n        <div class=\"os-right\">\n          <div class=\"os-photos-viewport has-peek\">\n            <div class=\"os-photos-stack\">\n              <div class=\"os-photo is-active\" data-photo=\"0\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-24.jpeg\" alt=\"KI Foto 1\" loading=\"lazy\">\n              <\/div>\n              <div class=\"os-photo\" data-photo=\"1\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-23.jpeg\" alt=\"KI Foto 2\" loading=\"lazy\">\n              <\/div>\n            <\/div>\n            <div class=\"os-arrows\">\n              <button class=\"os-arrow os-arrow-prev\" aria-label=\"Vorheriges Foto\" disabled>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"\/><\/svg>\n              <\/button>\n              <button class=\"os-arrow os-arrow-next\" aria-label=\"N\u00e4chstes Foto\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\n              <\/button>\n            <\/div>\n          <\/div>\n          <div class=\"os-dots\">\n            <button class=\"os-dot is-active\" data-photo=\"0\" aria-label=\"Foto 1\"><\/button>\n            <button class=\"os-dot\" data-photo=\"1\" aria-label=\"Foto 2\"><\/button>\n          <\/div>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    var section = document.querySelector('.os-section');\n    var grid = document.getElementById('os-grid');\n    var cards = document.querySelectorAll('.os-card');\n    if (!section || !grid || !cards.length) return;\n\n    var cardStates = [];\n\n    cards.forEach(function(card, cardIdx){\n      var viewport = card.querySelector('.os-photos-viewport');\n      var stack = card.querySelector('.os-photos-stack');\n      var photos = card.querySelectorAll('.os-photo');\n      var dots = card.querySelectorAll('.os-dot');\n\n      var state = {\n        card: card,\n        viewport: viewport,\n        stack: stack,\n        photos: photos,\n        dots: dots,\n        index: 0,\n        bounced: false\n      };\n      cardStates.push(state);\n\n      function layout(){\n        var vh = viewport.getBoundingClientRect().height;\n        if (vh <= 0) return;\n        var hasNext = photos.length > 1;\n        var peek = hasNext ? Math.round(vh * 0.14) : 0;\n        var photoH = vh - peek;\n        photos.forEach(function(p, i){\n          if (i === photos.length - 1){\n            p.style.height = vh + 'px';\n          } else {\n            p.style.height = photoH + 'px';\n          }\n        });\n        state.photoH = photoH;\n        state.peek = peek;\n        state.vh = vh;\n      }\n\n      function update(){\n        layout();\n        if (!state.photoH) return;\n\n        var offset = -(state.index * state.photoH);\n        if (state.index === photos.length - 1){\n          offset = -((photos.length - 1) * state.photoH);\n          viewport.classList.remove('has-peek');\n        } else {\n          viewport.classList.add('has-peek');\n        }\n        stack.style.setProperty('--os-offset', offset + 'px');\n        stack.style.transform = 'translateY(' + offset + 'px)';\n\n        photos.forEach(function(p, i){\n          p.classList.toggle('is-active', i === state.index);\n        });\n        dots.forEach(function(d, i){\n          d.classList.toggle('is-active', i === state.index);\n        });\n        if (state.prevBtn) state.prevBtn.disabled = state.index === 0;\n        if (state.nextBtn) state.nextBtn.disabled = state.index === photos.length - 1;\n      }\n\n      function goTo(idx){\n        var clamped = Math.max(0, Math.min(photos.length - 1, idx));\n        if (clamped === state.index) return;\n        state.index = clamped;\n        update();\n      }\n\n      photos.forEach(function(p, i){\n        p.addEventListener('click', function(){\n          if (i !== state.index) goTo(i);\n        });\n      });\n\n      dots.forEach(function(d, i){\n        d.addEventListener('click', function(){\n          goTo(i);\n        });\n      });\n\n      \/\/ Vertical swipe on the photos viewport\n      var vTouchStartX = 0, vTouchStartY = 0, vTouchActive = false;\n      var V_THRESHOLD = 40;\n      var V_LOCK = 10;\n\n      viewport.addEventListener('touchstart', function(e){\n        if (e.touches.length !== 1) return;\n        var t = e.touches[0];\n        vTouchStartX = t.clientX;\n        vTouchStartY = t.clientY;\n        vTouchActive = true;\n      }, { passive: true });\n\n      viewport.addEventListener('touchmove', function(e){\n        if (!vTouchActive || e.touches.length !== 1) return;\n        var t = e.touches[0];\n        var dx = t.clientX - vTouchStartX;\n        var dy = t.clientY - vTouchStartY;\n        if (Math.abs(dx) > V_LOCK || Math.abs(dy) > V_LOCK){\n          if (Math.abs(dx) > Math.abs(dy)){\n            vTouchActive = false;\n          }\n        }\n      }, { passive: true });\n\n      viewport.addEventListener('touchend', function(e){\n        if (!vTouchActive) return;\n        vTouchActive = false;\n        var t = e.changedTouches[0];\n        var dx = t.clientX - vTouchStartX;\n        var dy = t.clientY - vTouchStartY;\n        if (Math.abs(dy) < V_THRESHOLD) return;\n        if (Math.abs(dx) > Math.abs(dy)) return;\n        goTo(dy < 0 ? state.index + 1 : state.index - 1);\n      }, { passive: true });\n\n      var prevBtn = card.querySelector('.os-arrow-prev');\n      var nextBtn = card.querySelector('.os-arrow-next');\n      if (prevBtn){\n        prevBtn.addEventListener('click', function(){ goTo(state.index - 1); });\n      }\n      if (nextBtn){\n        nextBtn.addEventListener('click', function(){ goTo(state.index + 1); });\n      }\n      state.prevBtn = prevBtn;\n      state.nextBtn = nextBtn;\n\n      if ('ResizeObserver' in window){\n        var ro = new ResizeObserver(function(){\n          update();\n        });\n        ro.observe(viewport);\n      }\n\n      photos.forEach(function(p){\n        var img = p.querySelector('img');\n        if (img && !img.complete){\n          img.addEventListener('load', update, { once: true });\n        }\n      });\n\n      update();\n      state.update = update;\n    });\n\n    var resizeTimer;\n    window.addEventListener('resize', function(){\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(function(){\n        cardStates.forEach(function(s){ if (s.update) s.update(); });\n      }, 150);\n    });\n\n    \/\/ One-time bounce hint per page load\n    var BOUNCE_KEY = 'aigency_os_bounce_played';\n    var alreadyBounced = false;\n    try { alreadyBounced = sessionStorage.getItem(BOUNCE_KEY) === '1'; } catch(e){}\n\n    if (!alreadyBounced && 'IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if (e.isIntersecting && e.intersectionRatio >= 0.4){\n            cardStates.forEach(function(s, idx){\n              if (s.bounced) return;\n              s.bounced = true;\n              setTimeout(function(){\n                s.stack.classList.add('bounce-hint');\n                setTimeout(function(){\n                  s.stack.classList.remove('bounce-hint');\n                }, 1500);\n              }, idx * 180);\n            });\n            try { sessionStorage.setItem(BOUNCE_KEY, '1'); } catch(e){}\n            io.disconnect();\n          }\n        });\n      }, { threshold: [0, 0.4, 1] });\n      io.observe(section);\n    }\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779111237357 vc_row-has-fill vc_row-no-padding vc_row-o-content-top vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<style>\n  .wf-section{\n    background:#fff;\n    padding:0px 0 56px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    line-height:1.45;\n    -webkit-font-smoothing:antialiased;\n    overflow:hidden;\n  }\n\n  .wf-container{\n    max-width:1480px;\n    margin:0 auto;\n    padding:0 24px;\n    box-sizing:border-box;\n  }\n\n  \/* Header \u2014 centered *\/\n  .wf-head{\n    text-align:center;\n    margin-bottom:40px;\n  }\n  .wf-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:#5A554F;\n    margin:0 0 12px;\n    font-weight:500;\n  }\n  .wf-title{\n    font-size:clamp(28px,4vw,44px);\n    line-height:1.08;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 0 28px !important;\n    text-transform:none;\n    max-width:780px;\n    margin-left:auto !important;\n    margin-right:auto !important;\n  }\n\n  \/* Tabs \u2014 centered pill group *\/\n  .wf-tabs{\n    display:inline-flex;\n    gap:4px;\n    background:#F4F2EE;\n    padding:5px;\n    border-radius:999px;\n  }\n  .wf-tab{\n    background:transparent;\n    color:#5A554F;\n    border:none;\n    padding:10px 20px;\n    border-radius:999px;\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    cursor:pointer;\n    transition:background .35s ease, color .35s ease;\n    white-space:nowrap;\n  }\n  .wf-tab:hover{ color:#141210; }\n  .wf-tab.is-active{\n    background:#141210;\n    color:#fff;\n  }\n\n  \/* Track-viewport \u2014 breaks out of container to be full-viewport-width *\/\n  .wf-viewport{\n    height:calc(100vh - 280px);\n    min-height:480px;\n    max-height:760px;\n    overflow:hidden;\n    position:relative;\n    \/* Break out of the centered container \u2014 extend to full viewport width.\n       Uses negative margins matching the calc'd container side padding. *\/\n    width:100vw;\n    margin-left:calc(-50vw + 50%);\n  }\n\n  \/* Track \u2014 flex row, translates via JS-set CSS variable.\n     padding-left aligns first card with the centered container's left edge. *\/\n  .wf-track{\n    display:flex;\n    gap:24px;\n    height:100%;\n    padding-left:max(24px, calc((100vw - 1480px) \/ 2 + 24px));\n    box-sizing:border-box;\n    transform:translateX(var(--wf-offset, 0px));\n    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change:transform;\n  }\n\n  \/* Card width \u2014 set by JS via --wf-card-width to match container. *\/\n  .wf-card{\n    flex:0 0 var(--wf-card-width, 1350px);\n    background:#000;\n    color:#fff;\n    border-radius:30px;\n    border:1px solid #1a1816;\n    box-sizing:border-box;\n    overflow:hidden;\n    display:grid;\n    grid-template-columns:38% 62%;\n    position:relative;\n    opacity:0.35;\n    transition:opacity 0.5s ease;\n    cursor:pointer;\n  }\n  .wf-card.is-active{\n    opacity:1;\n    cursor:default;\n  }\n  .wf-card.is-active{ opacity:1; }\n\n  \/* Left column \u2014 text *\/\n  .wf-card-text{\n    padding:6vh 3vw 6vh 4vw;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n  }\n  .wf-step-eyebrow{\n    font-size:12px;\n    letter-spacing:0.12em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,0.5);\n    margin-bottom:16px;\n  }\n  .wf-step-number{\n    font-size:16px;\n    letter-spacing:0.08em;\n    text-transform:uppercase;\n    margin-bottom:18px;\n    color:#fff;\n  }\n  .wf-step-title{\n    font-size:clamp(24px,2.2vw,38px);\n    line-height:1.02;\n    letter-spacing:-0.02em;\n    margin:0 0 22px;\n    color:#fff;\n    word-break:normal;\n    overflow-wrap:break-word;\n    hyphens:auto;\n    text-transform: none;\n  }\n  .wf-step-desc{\n    font-size:15px;\n    line-height:1.5;\n    color:rgba(255,255,255,0.7);\n    max-width:420px;\n    margin:0;\n    overflow-wrap:break-word;\n    hyphens:auto;\n  }\n\n  \/* Right column \u2014 visual area *\/\n  .wf-card-visual{\n    position:relative;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    padding:3vh 3vw 3vh 2vw;\n    overflow:hidden;\n    border-left:1px solid rgba(255,255,255,0.08);\n  }\n\n  \/* ====== STEP 1: Fan animation ====== *\/\n  .wf-fan{\n    position:relative;\n    width:100%;\n    height:100%;\n  }\n  .wf-fan-inner{\n    position:absolute;\n    top:50%;\n    left:12%;\n    width:min(60%, 420px);\n    aspect-ratio:4 \/ 5;\n    transform:translate(-50%, -50%);\n  }\n  .wf-fan-panel{\n    position:absolute;\n    inset:0;\n    overflow:hidden;\n  }\n  .wf-fan-panel img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    object-position:center;\n    display:block;\n    border:0;\n    margin:0;\n    padding:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n  .wf-fan-caption{\n    position:absolute;\n    left:50%;\n    bottom:35px;\n    transform:translateX(-50%);\n    font-size:14px;\n    letter-spacing:0.12em;\n    text-transform:uppercase;\n    color:#fff;\n    text-shadow:0 0 12px rgba(0,0,0,0.5);\n    white-space:nowrap;\n    opacity:0;\n    animation:wf-fan-caption 11s ease-in-out infinite;\n    animation-play-state:paused;\n    z-index:20;\n    pointer-events:none;\n  }\n  .wf-fan-panel--1{ z-index:5; animation:wf-fan-1 11s ease-in-out infinite; animation-play-state:paused; }\n  .wf-fan-panel--2{ z-index:4; animation:wf-fan-2 11s ease-in-out infinite; animation-play-state:paused; }\n  .wf-fan-panel--3{ z-index:3; animation:wf-fan-3 11s ease-in-out infinite; animation-play-state:paused; }\n  .wf-fan-panel--4{ z-index:2; animation:wf-fan-4 11s ease-in-out infinite; animation-play-state:paused; }\n  .wf-fan-panel--5{ z-index:1; animation:wf-fan-5 11s ease-in-out infinite; animation-play-state:paused; }\n\n  \/* Activate animations when section is 50% visible *\/\n  .wf-section.wf-animate .wf-fan-panel,\n  .wf-section.wf-animate .wf-fan-caption,\n  .wf-section.wf-animate .wf-connector-line::after,\n  .wf-section.wf-animate .wf-connector-end{\n    animation-play-state:running;\n  }\n\n  @keyframes wf-fan-1{\n    0%,4%,18%,73%,100%{ transform:translateX(0); opacity:1; }\n  }\n  @keyframes wf-fan-2{\n    0%,4%,100%{ transform:translateX(10px); opacity:0.9; }\n    18%,73%{ transform:translateX(120px); opacity:0.9; }\n  }\n  @keyframes wf-fan-3{\n    0%,4%,100%{ transform:translateX(20px); opacity:0.82; }\n    18%,73%{ transform:translateX(245px); opacity:0.82; }\n  }\n  @keyframes wf-fan-4{\n    0%,4%,100%{ transform:translateX(30px); opacity:0.74; }\n    18%,73%{ transform:translateX(370px); opacity:0.74; }\n  }\n  @keyframes wf-fan-5{\n    0%,4%,100%{ transform:translateX(40px); opacity:0.66; }\n    18%,73%{ transform:translateX(495px); opacity:0.66; }\n  }\n  @keyframes wf-fan-caption{\n    0%,14%{ opacity:0; }\n    18%,68%{ opacity:1; }\n    73%,100%{ opacity:0; }\n  }\n\n  \/* ====== STEP 2: Pipeline with connectors ====== *\/\n  .wf-pipeline{\n    display:grid;\n    grid-template-columns:1fr 1fr 1fr;\n    grid-template-rows:auto auto;\n    gap:18px 16px;\n    align-items:start;\n    width:100%;\n    padding:0 1vw;\n  }\n  .wf-pipeline-frame{\n    aspect-ratio:3 \/ 4;\n    overflow:hidden;\n    background:#000;\n  }\n  .wf-pipeline-frame img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n    border-radius:2px;\n    border:0;\n    margin:0;\n    padding:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n  .wf-connector{\n    position:relative;\n    height:34px;\n    width:82%;\n    margin:0 auto;\n  }\n  .wf-connector-label{\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    font-size:11px;\n    line-height:1.2;\n    letter-spacing:0.08em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,0.55);\n    text-align:center;\n    white-space:nowrap;\n  }\n  .wf-connector-line{\n    position:absolute;\n    left:0;\n    right:0;\n    bottom:6px;\n    height:1px;\n    background:rgba(255,255,255,0.22);\n    overflow:hidden;\n  }\n  .wf-connector-line::after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    transform:scaleX(0);\n    transform-origin:left center;\n    background:rgba(255,255,255,0.95);\n    animation:wf-line-1 5.4s linear infinite;\n    animation-play-state:paused;\n  }\n  .wf-connector--2 .wf-connector-line::after{ animation-name:wf-line-2; }\n  .wf-connector--3 .wf-connector-line::after{ animation-name:wf-line-3; }\n  .wf-connector-end{\n    position:absolute;\n    right:-5px;\n    bottom:2px;\n  }\n  .wf-connector--arrow .wf-connector-end{\n    width:0;\n    height:0;\n    border-left:7px solid rgba(255,255,255,0.45);\n    border-top:5px solid transparent;\n    border-bottom:5px solid transparent;\n    animation:wf-arrow-1 5.4s linear infinite;\n    animation-play-state:paused;\n  }\n  .wf-connector--arrow.wf-connector--2 .wf-connector-end{ animation-name:wf-arrow-2; }\n  .wf-connector--end .wf-connector-end{\n    width:9px;\n    height:9px;\n    border-radius:50%;\n    background:rgba(255,255,255,0.45);\n    animation:wf-dot-3 5.4s linear infinite;\n    animation-play-state:paused;\n  }\n  @keyframes wf-line-1{\n    0%{ transform:scaleX(0); }\n    18%,100%{ transform:scaleX(1); }\n  }\n  @keyframes wf-line-2{\n    0%,33.333%{ transform:scaleX(0); }\n    51.333%,100%{ transform:scaleX(1); }\n  }\n  @keyframes wf-line-3{\n    0%,66.666%{ transform:scaleX(0); }\n    84.666%,100%{ transform:scaleX(1); }\n  }\n  @keyframes wf-arrow-1{\n    0%{ border-left-color:rgba(255,255,255,0.45); }\n    18%,100%{ border-left-color:rgba(255,255,255,0.95); }\n  }\n  @keyframes wf-arrow-2{\n    0%,33.333%{ border-left-color:rgba(255,255,255,0.45); }\n    51.333%,100%{ border-left-color:rgba(255,255,255,0.95); }\n  }\n  @keyframes wf-dot-3{\n    0%,66.666%{ background:rgba(255,255,255,0.45); transform:scale(1); }\n    84.666%,100%{ background:rgba(255,255,255,0.95); transform:scale(1.15); }\n  }\n\n  \/* ====== STEP 3: Single image ====== *\/\n  .wf-single{\n    width:100%;\n    height:100%;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n  }\n  .wf-single img{\n    width:min(88%, 980px);\n    height:auto;\n    max-height:100%;\n    object-fit:contain;\n    display:block;\n    border:0;\n    margin:0;\n    padding:0;\n    box-shadow:none;\n  }\n\n  \/* Mobile \u2014 same horizontal layout, smaller cards *\/\n  @media (max-width: 900px){\n    .wf-section{ padding:56px 0 40px; }\n    .wf-container{ padding:0 16px; }\n    .wf-head{ margin-bottom:28px; }\n    .wf-title{ margin-bottom:20px !important; }\n    .wf-tab{ padding:8px 14px; font-size:13px; }\n\n    .wf-viewport{\n      height:auto;\n      min-height:0;\n      max-height:none;\n    }\n    .wf-card{\n      flex:0 0 calc(100% - 40px);\n      grid-template-columns:1fr;\n      grid-template-rows:auto 1fr;\n      min-height:78vh;\n      border-radius:22px;\n    }\n    .wf-card-text{\n      padding:6vh 5vw 3vh 6vw;\n    }\n    .wf-step-title{ font-size:28px; }\n    .wf-step-desc{ font-size:14.5px; }\n    .wf-card-visual{\n      padding:2vh 4vw 6vh 4vw;\n      border-left:0;\n      border-top:1px solid rgba(255,255,255,0.08);\n      min-height:420px;\n    }\n    .wf-fan-inner{\n      left:18%;\n      width:min(50%, 200px);\n    }\n    @keyframes wf-fan-2{\n      0%,4%,100%{ transform:translateX(8px); opacity:0.9; }\n      18%,73%{ transform:translateX(42px); opacity:0.9; }\n    }\n    @keyframes wf-fan-3{\n      0%,4%,100%{ transform:translateX(16px); opacity:0.82; }\n      18%,73%{ transform:translateX(86px); opacity:0.82; }\n    }\n    @keyframes wf-fan-4{\n      0%,4%,100%{ transform:translateX(24px); opacity:0.74; }\n      18%,73%{ transform:translateX(130px); opacity:0.74; }\n    }\n    @keyframes wf-fan-5{\n      0%,4%,100%{ transform:translateX(32px); opacity:0.66; }\n      18%,73%{ transform:translateX(174px); opacity:0.66; }\n    }\n    .wf-fan-caption{\n      font-size:10px;\n      bottom:14px;\n    }\n\n    \/* Mobile: pipeline (Step 2) \u2014 labels smaller and allowed to wrap *\/\n    .wf-pipeline{\n      gap:14px 6px;\n      padding:0;\n    }\n    .wf-connector{\n      width:92%;\n      height:46px;\n    }\n    .wf-connector-label{\n      font-size:9px;\n      letter-spacing:0.04em;\n      line-height:1.25;\n      white-space:normal;\n      padding:0 2px;\n    }\n    .wf-track{ gap:14px; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .wf-track{ transition:none; }\n    .wf-card{ transition:none; }\n  }\n<\/style>\n\n<section class=\"wf-section\">\n  <div class=\"wf-container\">\n\n    <div class=\"wf-head\">\n      <p class=\"wf-eyebrow\">Custom Workflow<\/p>\n      <h2 class=\"wf-title\">Ein Prozess, ganz auf die Bed\u00fcrfnisse der Brand zugeschnitten.<\/h2>\n      <div class=\"wf-tabs\" role=\"tablist\">\n        <button class=\"wf-tab is-active\" data-step=\"0\" role=\"tab\" aria-selected=\"true\">Grundlage<\/button>\n        <button class=\"wf-tab\" data-step=\"1\" role=\"tab\" aria-selected=\"false\">Pipeline<\/button>\n        <button class=\"wf-tab\" data-step=\"2\" role=\"tab\" aria-selected=\"false\">Ergebnis<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"wf-viewport\">\n      <div class=\"wf-track\" id=\"wf-track\">\n\n        <article class=\"wf-card is-active\" data-step=\"0\">\n          <div class=\"wf-card-text\">\n            <div class=\"wf-step-eyebrow\">Schritt 01<\/div>\n            <div class=\"wf-step-number\">Die Grundlage<\/div>\n            <h3 class=\"wf-step-title\">Model, Marke<br>und Datenbasis<\/h3>\n            <p class=\"wf-step-desc\">Wir legen den visuellen Ausgangspunkt fest, indem wir das Model, die Marken\u00e4sthetik, die Stilrichtung und die Bilddaten analysieren, die f\u00fcr die Erstellung eines hochwertigen AI-Twins erforderlich sind.<\/p>\n          <\/div>\n          <div class=\"wf-card-visual\">\n            <div class=\"wf-fan\">\n              <div class=\"wf-fan-inner\">\n                <div class=\"wf-fan-panel wf-fan-panel--1\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/step-1-1.png\" alt=\"Step 1\">\n                  <div class=\"wf-fan-caption\">AI-Twin<\/div>\n                <\/div>\n                <div class=\"wf-fan-panel wf-fan-panel--2\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/step-1-2-2-2.png\" alt=\"Step 1\">\n                <\/div>\n                <div class=\"wf-fan-panel wf-fan-panel--3\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/step-1-3-2.png\" alt=\"Step 1\">\n                <\/div>\n                <div class=\"wf-fan-panel wf-fan-panel--4\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/step-1-4-2.png\" alt=\"Step 1\">\n                <\/div>\n                <div class=\"wf-fan-panel wf-fan-panel--5\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/step-1-5.png\" alt=\"Step 1\">\n                  <div class=\"wf-fan-caption\">Reales Model<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"wf-card\" data-step=\"1\">\n          <div class=\"wf-card-text\">\n            <div class=\"wf-step-eyebrow\">Schritt 02<\/div>\n            <div class=\"wf-step-number\">Arbeitsablauf<\/div>\n            <h3 class=\"wf-step-title\">Individuelle<br>AI-Pipeline<\/h3>\n            <p class=\"wf-step-desc\">Ausgehend von den Zielen der Brand entwickeln wir einen ma\u00dfgeschneiderten Arbeitsablauf \u2013 vom Training des AI-Twins \u00fcber visuelle Konsistenz bis hin zur Prompt-Logik, Produktintegration und kampagnenspezifischen Produktion.<\/p>\n          <\/div>\n          <div class=\"wf-card-visual\">\n            <div class=\"wf-pipeline\">\n              <div class=\"wf-pipeline-frame\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/pipeline-step2-2.jpeg\" alt=\"Flatlay\">\n              <\/div>\n              <div class=\"wf-pipeline-frame\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/pipeline-step2-1.jpeg\" alt=\"AI twin\">\n              <\/div>\n              <div class=\"wf-pipeline-frame\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/pipeline-step2-3.jpeg\" alt=\"Ergebnis\">\n              <\/div>\n              <div class=\"wf-connector wf-connector--1 wf-connector--arrow\">\n                <div class=\"wf-connector-label\">Echte Kleidung<\/div>\n                <div class=\"wf-connector-line\"><\/div>\n                <span class=\"wf-connector-end\"><\/span>\n              <\/div>\n              <div class=\"wf-connector wf-connector--2 wf-connector--arrow\">\n                <div class=\"wf-connector-label\">AI-Twin<\/div>\n                <div class=\"wf-connector-line\"><\/div>\n                <span class=\"wf-connector-end\"><\/span>\n              <\/div>\n              <div class=\"wf-connector wf-connector--3 wf-connector--end\">\n                <div class=\"wf-connector-label\">Ergebnis<\/div>\n                <div class=\"wf-connector-line\"><\/div>\n                <span class=\"wf-connector-end\"><\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"wf-card\" data-step=\"2\">\n          <div class=\"wf-card-text\">\n            <div class=\"wf-step-eyebrow\">Schritt 03<\/div>\n            <div class=\"wf-step-number\">Ergebnis<\/div>\n            <h3 class=\"wf-step-title\">Skalierbare<br>visuelle Produktion<\/h3>\n            <p class=\"wf-step-desc\">Das Ergebnis ist ein flexibles Content-System f\u00fcr hochwertige Bild- und Video-Daten, das sich \u00fcber Kampagnen, E-commerce und M\u00e4rkte hinweg skalieren l\u00e4sst und dabei stets im Markenkontext bleibt.<\/p>\n          <\/div>\n          <div class=\"wf-card-visual\">\n            <div class=\"wf-single\">\n              <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/pipeline-step-3-black-web-scaled.jpeg\" alt=\"Skalierbare Produktion\">\n            <\/div>\n          <\/div>\n        <\/article>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    var section = document.querySelector('.wf-section');\n    var container = document.querySelector('.wf-container');\n    var tabs = document.querySelectorAll('.wf-tab');\n    var cards = document.querySelectorAll('.wf-card');\n    var track = document.getElementById('wf-track');\n    if (!section || !container || !tabs.length || !cards.length || !track) return;\n\n    function getCardWidth(){\n      \/\/ Fixed desktop card width \u2014 1350px on screens that can fit it,\n      \/\/ otherwise scale down to container width minus peek.\n      var containerWidth = container.getBoundingClientRect().width;\n      var desired = 1350;\n      \/\/ If the desired width fits with at least an 80px peek margin, use it.\n      if (containerWidth >= desired + 80) return desired;\n      \/\/ Otherwise scale down \u2014 leave 80px peek\n      return Math.max(280, containerWidth - 80);\n    }\n\n    function updateCardWidth(){\n      var cardW = getCardWidth();\n      track.style.setProperty('--wf-card-width', cardW + 'px');\n    }\n\n    function activateStep(index){\n      tabs.forEach(function(t){\n        var isActive = parseInt(t.dataset.step, 10) === index;\n        t.classList.toggle('is-active', isActive);\n        t.setAttribute('aria-selected', isActive ? 'true' : 'false');\n      });\n\n      cards.forEach(function(c){\n        var isActive = parseInt(c.dataset.step, 10) === index;\n        c.classList.toggle('is-active', isActive);\n      });\n\n      var cardW = getCardWidth();\n      var gap = parseInt(getComputedStyle(track).gap, 10) || 24;\n\n      \/\/ Desired offset \u2014 moves the track so card[index] is left-aligned\n      var desiredOffset = -(index * (cardW + gap));\n\n      \/\/ Max negative offset \u2014 track can't move past the point where the LAST\n      \/\/ card's right edge aligns with the viewport's right edge (plus some breathing room).\n      \/\/ Calculate: trackWidth - viewportWidth - padding-left of track\n      var trackWidth = track.scrollWidth;\n      var viewportWidth = window.innerWidth;\n      var trackPaddingLeft = parseInt(getComputedStyle(track).paddingLeft, 10) || 0;\n      \/\/ We want: last card's right edge sits ~24px from viewport right\n      var maxNegOffset = -(trackWidth - viewportWidth + 24);\n      \/\/ If track fits in viewport, no scrolling needed\n      if (maxNegOffset > 0) maxNegOffset = 0;\n\n      \/\/ Clamp: offset can't be more negative than maxNegOffset\n      var offset = Math.max(maxNegOffset, desiredOffset);\n\n      track.style.setProperty('--wf-offset', offset + 'px');\n    }\n\n    tabs.forEach(function(tab){\n      tab.addEventListener('click', function(){\n        var idx = parseInt(tab.dataset.step, 10);\n        if (!isNaN(idx)) activateStep(idx);\n      });\n    });\n\n    \/\/ Click on a non-active card to activate it\n    cards.forEach(function(card){\n      card.addEventListener('click', function(){\n        if (card.classList.contains('is-active')) return;\n        var idx = parseInt(card.dataset.step, 10);\n        if (!isNaN(idx)) activateStep(idx);\n      });\n    });\n\n    \/\/ IntersectionObserver: start animations when section is 50% visible\n    if ('IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if (e.isIntersecting && e.intersectionRatio >= 0.5){\n            section.classList.add('wf-animate');\n          }\n        });\n      }, { threshold: [0, 0.5, 1] });\n      io.observe(section);\n    } else {\n      \/\/ Fallback for old browsers \u2014 just animate immediately\n      section.classList.add('wf-animate');\n    }\n\n    \/\/ Initialize card width\n    updateCardWidth();\n\n    \/\/ Re-calculate on resize (debounced)\n    var resizeTimer;\n    window.addEventListener('resize', function(){\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(function(){\n        updateCardWidth();\n        var activeTab = document.querySelector('.wf-tab.is-active');\n        if (activeTab) activateStep(parseInt(activeTab.dataset.step, 10));\n      }, 150);\n    });\n\n    \/\/ Swipe support \u2014 horizontal swipes navigate between cards\n    var touchStartX = 0;\n    var touchStartY = 0;\n    var touchActive = false;\n    var SWIPE_THRESHOLD = 50;       \/\/ px horizontal to trigger swipe\n    var DIRECTION_LOCK_THRESHOLD = 10; \/\/ px to decide horizontal vs vertical\n\n    track.addEventListener('touchstart', function(e){\n      if (e.touches.length !== 1) return;\n      var t = e.touches[0];\n      touchStartX = t.clientX;\n      touchStartY = t.clientY;\n      touchActive = true;\n    }, { passive: true });\n\n    track.addEventListener('touchmove', function(e){\n      if (!touchActive || e.touches.length !== 1) return;\n      var t = e.touches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      \/\/ Once we've moved enough to decide direction, lock it.\n      \/\/ If vertical movement dominates, let the page scroll naturally (cancel swipe).\n      if (Math.abs(dx) > DIRECTION_LOCK_THRESHOLD || Math.abs(dy) > DIRECTION_LOCK_THRESHOLD){\n        if (Math.abs(dy) > Math.abs(dx)){\n          touchActive = false;\n        }\n      }\n    }, { passive: true });\n\n    track.addEventListener('touchend', function(e){\n      if (!touchActive) return;\n      touchActive = false;\n      var t = e.changedTouches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      \/\/ Only fire if horizontal movement is dominant and crosses threshold\n      if (Math.abs(dx) < SWIPE_THRESHOLD) return;\n      if (Math.abs(dy) > Math.abs(dx)) return;\n\n      var currentTab = document.querySelector('.wf-tab.is-active');\n      if (!currentTab) return;\n      var current = parseInt(currentTab.dataset.step, 10);\n      var maxStep = tabs.length - 1;\n      var next = dx < 0 ? Math.min(maxStep, current + 1) : Math.max(0, current - 1);\n      if (next !== current) activateStep(next);\n    }, { passive: true });\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779203560145 vc_row-has-fill vc_row-o-content-top vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner vc_custom_1767906120298\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 Outfit Story Cards\n     Self-contained block for WordPress \"Custom HTML\".\n\n     Desktop: 2 cards side-by-side\n     Mobile: horizontal swipe to switch cards (one visible at a time)\n\n     Each card:\n     - 40% flatlay (static, left)\n     - 60% KI photos (vertical scroll\/click, right)\n     - Dots indicator for KI photos\n     - One-time bounce hint per page load\n     ===================================================================== -->\n\n<style>\n  .os-section{\n    background:#fff;\n    padding:80px 0 56px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    line-height:1.45;\n    -webkit-font-smoothing:antialiased;\n    overflow:hidden;\n  }\n\n  .os-container{\n    max-width:none;\n    margin:0;\n    padding:0 100px;\n    box-sizing:border-box;\n  }\n\n  \/* Optional header *\/\n  .os-head{\n    margin-bottom:40px;\n  }\n  .os-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:#5A554F;\n    margin:0 0 12px;\n    font-weight:500;\n  }\n  .os-title{\n    font-size:clamp(28px,4vw,44px);\n    line-height:1.08;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 !important;\n    text-align:left !important;\n    text-transform:none;\n    max-width:780px;\n  }\n\n  \/* Cards grid \u2014 2 columns, generous gap *\/\n  .os-grid{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:40px;\n  }\n\n  \/* Card *\/\n  .os-card{\n    display:grid;\n    grid-template-columns:40% 60%;\n    background:#F4F2EE;\n    border:1px solid #eee;\n    border-radius:30px;\n    overflow:hidden;\n    aspect-ratio:4 \/ 3;\n    box-sizing:border-box;\n    position:relative;\n  }\n\n  \/* Left: flatlay *\/\n  .os-flatlay{\n    position:relative;\n    overflow:hidden;\n    background:#f4f4f4;\n    border-right:1px solid #eee;\n  }\n  .os-flatlay img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    object-position:center center;\n    display:block;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n\n  \/* Right: KI photos column with dots *\/\n  .os-right{\n    position:relative;\n    display:grid;\n    grid-template-columns:1fr auto;\n    overflow:hidden;\n    height:100%;\n  }\n\n  \/* Photos viewport \u2014 clips the vertical stack *\/\n  .os-photos-viewport{\n    overflow:hidden;\n    position:relative;\n    background:#fff;\n    height:100%;\n  }\n\n  \/* Stack of photos \u2014 translates via CSS variable.\n     Position absolute on top\/left\/right only (no bottom!) so height\n     grows naturally with children. *\/\n  .os-photos-stack{\n    position:absolute;\n    top:0;\n    left:0;\n    right:0;\n    transform:translateY(var(--os-offset, 0px));\n    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change:transform;\n  }\n\n  \/* Each photo \u2014 height set by JS to match viewport height *\/\n  .os-photo{\n    position:relative;\n    width:100%;\n    overflow:hidden;\n    cursor:pointer;\n    background:#fff;\n  }\n  .os-photo img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    object-position:center center;\n    display:block;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n  .os-photo.is-active{ cursor:default; }\n\n  \/* Apple-style navigation arrows over the photo viewport *\/\n  .os-arrows{\n    position:absolute;\n    right:14px;\n    top:50%;\n    transform:translateY(-50%);\n    display:flex;\n    flex-direction:column;\n    gap:8px;\n    z-index:4;\n    pointer-events:none;\n  }\n  .os-arrow{\n    width:40px;\n    height:40px;\n    border-radius:999px;\n    border:none;\n    background:rgba(255,255,255,0.9);\n    backdrop-filter:blur(6px);\n    -webkit-backdrop-filter:blur(6px);\n    color:#141210;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    transition:background .15s, opacity .25s, color .15s, transform .15s;\n    pointer-events:auto;\n    padding:0;\n  }\n  .os-arrow:hover:not(:disabled){\n    background:#141210;\n    color:#fff;\n  }\n  .os-arrow:active:not(:disabled){\n    transform:scale(0.94);\n  }\n  .os-arrow:disabled{\n    opacity:0.25;\n    cursor:default;\n    pointer-events:none;\n  }\n  .os-arrow svg{ width:16px; height:16px; }\n\n  @media (max-width: 820px){\n    .os-arrows{ display:none; }\n  }\n\n  \/* Subtle gradient hint over the peek so it reads as \"more below\" *\/\n  .os-photos-viewport::after{\n    content:\"\";\n    position:absolute;\n    left:0;\n    right:0;\n    bottom:0;\n    height:14%;\n    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%);\n    pointer-events:none;\n    opacity:0;\n    transition:opacity 0.3s ease;\n    z-index:3;\n  }\n  .os-photos-viewport.has-peek::after{ opacity:1; }\n\n  \/* Dots indicator *\/\n  .os-dots{\n    display:flex;\n    flex-direction:column;\n    gap:10px;\n    align-items:center;\n    justify-content:center;\n    padding:0 16px;\n    background:#fff;\n  }\n  .os-dot{\n    width:6px;\n    height:6px;\n    border-radius:50%;\n    background:#D3D1C7;\n    border:none;\n    padding:0;\n    cursor:pointer;\n    transition:background 0.3s ease, transform 0.3s ease;\n  }\n  .os-dot:hover{ background:#888780; }\n  .os-dot.is-active{\n    background:#141210;\n    transform:scale(1.35);\n  }\n\n  \/* One-time bounce hint animation *\/\n  @keyframes os-bounce-hint {\n    0%   { transform: translateY(var(--os-offset, 0px)); }\n    35%  { transform: translateY(calc(var(--os-offset, 0px) - 60px)); }\n    65%  { transform: translateY(calc(var(--os-offset, 0px) - 60px)); }\n    100% { transform: translateY(var(--os-offset, 0px)); }\n  }\n  .os-photos-stack.bounce-hint{\n    animation: os-bounce-hint 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;\n  }\n\n  \/* Mobile: horizontal swipe between cards *\/\n  @media (max-width: 820px){\n    .os-section{ padding:56px 0 40px; }\n    .os-container{ padding:0 20px; }\n    .os-head{ margin-bottom:24px; }\n    \/* Make the section break out for full-viewport-width swipe area *\/\n    .os-grid-wrap{\n      width:100vw;\n      margin-left:calc(-50vw + 50%);\n      overflow:hidden;\n    }\n    .os-grid{\n      display:flex;\n      gap:16px;\n      padding:0 20px;\n      transform:translateX(var(--os-card-offset, 0px));\n      transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n      will-change:transform;\n    }\n    .os-card{\n      flex:0 0 calc(100vw - 56px);\n      aspect-ratio:4 \/ 3.2;\n      border-radius:22px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .os-photos-stack{ transition:none; }\n    .os-grid{ transition:none; }\n    .os-photos-stack.bounce-hint{ animation:none; }\n  }\n<\/style>\n\n<section class=\"os-section\">\n  <div class=\"os-container\">\n\n    <div class=\"os-head\">\n      <p class=\"os-eyebrow\">Vom Flatlay zum Bild<\/p>\n      <h2 class=\"os-title\">Aus einem Outfit <br>wird Brand-Content.<\/h2>\n    <\/div>\n\n    <div class=\"os-grid-wrap\">\n      <div class=\"os-grid\" id=\"os-grid\">\n\n        <article class=\"os-card\" data-card=\"0\">\n          <div class=\"os-flatlay\">\n            <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/clothing-arket-4.jpg\" alt=\"Flatlay Outfit 1\" loading=\"lazy\">\n          <\/div>\n          <div class=\"os-right\">\n            <div class=\"os-photos-viewport has-peek\">\n              <div class=\"os-photos-stack\">\n                <div class=\"os-photo is-active\" data-photo=\"0\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-16.jpeg\" alt=\"KI Foto 1\" loading=\"lazy\">\n                <\/div>\n                <div class=\"os-photo\" data-photo=\"1\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-15.jpeg\" alt=\"KI Foto 2\" loading=\"lazy\">\n                <\/div>\n              <\/div>\n              <div class=\"os-arrows\">\n                <button class=\"os-arrow os-arrow-prev\" aria-label=\"Vorheriges Foto\" disabled>\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"\/><\/svg>\n                <\/button>\n                <button class=\"os-arrow os-arrow-next\" aria-label=\"N\u00e4chstes Foto\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\n                <\/button>\n              <\/div>\n            <\/div>\n            <div class=\"os-dots\">\n              <button class=\"os-dot is-active\" data-photo=\"0\" aria-label=\"Foto 1\"><\/button>\n              <button class=\"os-dot\" data-photo=\"1\" aria-label=\"Foto 2\"><\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"os-card\" data-card=\"1\">\n          <div class=\"os-flatlay\">\n            <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/clothing-arket-2.jpg\" alt=\"Flatlay Outfit 2\" loading=\"lazy\">\n          <\/div>\n          <div class=\"os-right\">\n            <div class=\"os-photos-viewport has-peek\">\n              <div class=\"os-photos-stack\">\n                <div class=\"os-photo is-active\" data-photo=\"0\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-20.jpeg\" alt=\"KI Foto 1\" loading=\"lazy\">\n                <\/div>\n                <div class=\"os-photo\" data-photo=\"1\">\n                  <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/fashion-ai-clothing-web-21.jpeg\" alt=\"KI Foto 2\" loading=\"lazy\">\n                <\/div>\n              <\/div>\n              <div class=\"os-arrows\">\n                <button class=\"os-arrow os-arrow-prev\" aria-label=\"Vorheriges Foto\" disabled>\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"\/><\/svg>\n                <\/button>\n                <button class=\"os-arrow os-arrow-next\" aria-label=\"N\u00e4chstes Foto\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\n                <\/button>\n              <\/div>\n            <\/div>\n            <div class=\"os-dots\">\n              <button class=\"os-dot is-active\" data-photo=\"0\" aria-label=\"Foto 1\"><\/button>\n              <button class=\"os-dot\" data-photo=\"1\" aria-label=\"Foto 2\"><\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    var section = document.querySelector('.os-section');\n    var grid = document.getElementById('os-grid');\n    var cards = document.querySelectorAll('.os-card');\n    if (!section || !grid || !cards.length) return;\n\n    \/\/ Setup each card independently\n    var cardStates = [];\n\n    cards.forEach(function(card, cardIdx){\n      var viewport = card.querySelector('.os-photos-viewport');\n      var stack = card.querySelector('.os-photos-stack');\n      var photos = card.querySelectorAll('.os-photo');\n      var dots = card.querySelectorAll('.os-dot');\n\n      var state = {\n        card: card,\n        viewport: viewport,\n        stack: stack,\n        photos: photos,\n        dots: dots,\n        index: 0,\n        bounced: false\n      };\n      cardStates.push(state);\n\n      function layout(){\n        var vh = viewport.getBoundingClientRect().height;\n        if (vh <= 0) return;\n        \/\/ Each photo takes (viewport - peek) height so the next photo\n        \/\/ naturally pokes in at the bottom.\n        var hasNext = photos.length > 1;\n        var peek = hasNext ? Math.round(vh * 0.14) : 0;\n        var photoH = vh - peek;\n        photos.forEach(function(p, i){\n          \/\/ Last photo gets the full viewport height (no peek for the last one)\n          if (i === photos.length - 1){\n            p.style.height = vh + 'px';\n          } else {\n            p.style.height = photoH + 'px';\n          }\n        });\n        state.photoH = photoH;\n        state.peek = peek;\n        state.vh = vh;\n      }\n\n      function update(){\n        layout();\n        if (!state.photoH) return;\n\n        \/\/ Each photo (except the last) has height = photoH.\n        \/\/ To bring photo[index] to the top of the viewport, translate by\n        \/\/ -(index * photoH). That naturally leaves the next photo poking in\n        \/\/ by exactly the peek amount.\n        var offset = -(state.index * state.photoH);\n        \/\/ If on the LAST photo, the previous photo's peek is already absorbed\n        \/\/ because last photo has full vh height \u2014 but we want the last photo\n        \/\/ to fill the viewport (no peek of anything below it).\n        if (state.index === photos.length - 1){\n          \/\/ Total stack height = (n-1) * photoH + vh\n          \/\/ Want last photo top to align with viewport top:\n          offset = -((photos.length - 1) * state.photoH);\n          viewport.classList.remove('has-peek');\n        } else {\n          viewport.classList.add('has-peek');\n        }\n        stack.style.setProperty('--os-offset', offset + 'px');\n        stack.style.transform = 'translateY(' + offset + 'px)';\n\n        photos.forEach(function(p, i){\n          p.classList.toggle('is-active', i === state.index);\n        });\n        dots.forEach(function(d, i){\n          d.classList.toggle('is-active', i === state.index);\n        });\n        if (state.prevBtn) state.prevBtn.disabled = state.index === 0;\n        if (state.nextBtn) state.nextBtn.disabled = state.index === photos.length - 1;\n      }\n\n      function goTo(idx){\n        var clamped = Math.max(0, Math.min(photos.length - 1, idx));\n        if (clamped === state.index) return;\n        state.index = clamped;\n        update();\n      }\n\n      photos.forEach(function(p, i){\n        p.addEventListener('click', function(){\n          if (i !== state.index) goTo(i);\n        });\n      });\n\n      dots.forEach(function(d, i){\n        d.addEventListener('click', function(){\n          goTo(i);\n        });\n      });\n\n      \/\/ Vertical swipe on the photos viewport\n      var vTouchStartX = 0, vTouchStartY = 0, vTouchActive = false;\n      var V_THRESHOLD = 40;\n      var V_LOCK = 10;\n\n      viewport.addEventListener('touchstart', function(e){\n        if (e.touches.length !== 1) return;\n        var t = e.touches[0];\n        vTouchStartX = t.clientX;\n        vTouchStartY = t.clientY;\n        vTouchActive = true;\n      }, { passive: true });\n\n      viewport.addEventListener('touchmove', function(e){\n        if (!vTouchActive || e.touches.length !== 1) return;\n        var t = e.touches[0];\n        var dx = t.clientX - vTouchStartX;\n        var dy = t.clientY - vTouchStartY;\n        if (Math.abs(dx) > V_LOCK || Math.abs(dy) > V_LOCK){\n          if (Math.abs(dx) > Math.abs(dy)){\n            vTouchActive = false;\n          }\n        }\n      }, { passive: true });\n\n      viewport.addEventListener('touchend', function(e){\n        if (!vTouchActive) return;\n        vTouchActive = false;\n        var t = e.changedTouches[0];\n        var dx = t.clientX - vTouchStartX;\n        var dy = t.clientY - vTouchStartY;\n        if (Math.abs(dy) < V_THRESHOLD) return;\n        if (Math.abs(dx) > Math.abs(dy)) return;\n        \/\/ Swipe UP (dy negative) \u2192 next photo. Swipe DOWN \u2192 previous.\n        goTo(dy < 0 ? state.index + 1 : state.index - 1);\n      }, { passive: true });\n\n      \/\/ Arrow buttons (desktop only \u2014 hidden via CSS on mobile)\n      var prevBtn = card.querySelector('.os-arrow-prev');\n      var nextBtn = card.querySelector('.os-arrow-next');\n      if (prevBtn){\n        prevBtn.addEventListener('click', function(){ goTo(state.index - 1); });\n      }\n      if (nextBtn){\n        nextBtn.addEventListener('click', function(){ goTo(state.index + 1); });\n      }\n      state.prevBtn = prevBtn;\n      state.nextBtn = nextBtn;\n\n      \/\/ Re-layout when viewport changes size (image loading, card resize, etc.)\n      if ('ResizeObserver' in window){\n        var ro = new ResizeObserver(function(){\n          update();\n        });\n        ro.observe(viewport);\n      }\n\n      \/\/ Re-layout when each image finishes loading (safety net)\n      photos.forEach(function(p){\n        var img = p.querySelector('img');\n        if (img && !img.complete){\n          img.addEventListener('load', update, { once: true });\n        }\n      });\n\n      update();\n      state.update = update;\n    });\n\n    \/\/ Resize: recalculate offsets\n    var resizeTimer;\n    window.addEventListener('resize', function(){\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(function(){\n        cardStates.forEach(function(s){ if (s.update) s.update(); });\n        if (window.innerWidth <= 820) updateCardOffset();\n      }, 150);\n    });\n\n    \/\/ One-time bounce hint per page load\n    var BOUNCE_KEY = 'aigency_os_bounce_played';\n    var alreadyBounced = false;\n    try { alreadyBounced = sessionStorage.getItem(BOUNCE_KEY) === '1'; } catch(e){}\n\n    if (!alreadyBounced && 'IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){\n          if (e.isIntersecting && e.intersectionRatio >= 0.4){\n            cardStates.forEach(function(s, idx){\n              if (s.bounced) return;\n              s.bounced = true;\n              \/\/ Stagger the bounces a touch\n              setTimeout(function(){\n                s.stack.classList.add('bounce-hint');\n                setTimeout(function(){\n                  s.stack.classList.remove('bounce-hint');\n                }, 1500);\n              }, idx * 180);\n            });\n            try { sessionStorage.setItem(BOUNCE_KEY, '1'); } catch(e){}\n            io.disconnect();\n          }\n        });\n      }, { threshold: [0, 0.4, 1] });\n      io.observe(section);\n    }\n\n    \/\/ ===== Mobile: swipe between cards =====\n    var currentCardIndex = 0;\n\n    function updateCardOffset(){\n      if (window.innerWidth > 820){\n        grid.style.setProperty('--os-card-offset', '0px');\n        return;\n      }\n      var firstCard = cards[0];\n      if (!firstCard) return;\n      var cardW = firstCard.getBoundingClientRect().width;\n      var gap = parseInt(getComputedStyle(grid).gap, 10) || 16;\n      var offset = -(currentCardIndex * (cardW + gap));\n      grid.style.setProperty('--os-card-offset', offset + 'px');\n    }\n\n    function goToCard(idx){\n      var clamped = Math.max(0, Math.min(cards.length - 1, idx));\n      if (clamped === currentCardIndex) return;\n      currentCardIndex = clamped;\n      updateCardOffset();\n    }\n\n    \/\/ Mobile swipe\n    var touchStartX = 0;\n    var touchStartY = 0;\n    var touchActive = false;\n    var SWIPE_THRESHOLD = 50;\n    var DIRECTION_LOCK = 10;\n\n    grid.addEventListener('touchstart', function(e){\n      if (window.innerWidth > 820) return;\n      if (e.touches.length !== 1) return;\n      var t = e.touches[0];\n      touchStartX = t.clientX;\n      touchStartY = t.clientY;\n      touchActive = true;\n    }, { passive: true });\n\n    grid.addEventListener('touchmove', function(e){\n      if (!touchActive || e.touches.length !== 1) return;\n      var t = e.touches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      if (Math.abs(dx) > DIRECTION_LOCK || Math.abs(dy) > DIRECTION_LOCK){\n        if (Math.abs(dy) > Math.abs(dx)){\n          touchActive = false;\n        }\n      }\n    }, { passive: true });\n\n    grid.addEventListener('touchend', function(e){\n      if (!touchActive) return;\n      touchActive = false;\n      var t = e.changedTouches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      if (Math.abs(dx) < SWIPE_THRESHOLD) return;\n      if (Math.abs(dy) > Math.abs(dx)) return;\n      goToCard(dx < 0 ? currentCardIndex + 1 : currentCardIndex - 1);\n    }, { passive: true });\n\n    updateCardOffset();\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779204670118 vc_row-has-fill vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner vc_custom_1767906055848\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 Beauty Pairs Section (Black)\n     Self-contained block for WordPress \"Custom HTML\".\n\n     Layout:\n     - Full-width black section\n     - Left 35%: sticky text\n     - Right 65%: horizontal carousel of paired-image cards (2 portraits each)\n     - Same architecture as features carousel: transform on track, no scroll container\n     ===================================================================== -->\n\n<style>\n  .bp-section{\n    background:#000;\n    color:#fff;\n    padding:120px 0 100px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    line-height:1.45;\n    -webkit-font-smoothing:antialiased;\n    overflow:hidden;\n    width:100vw;\n    margin-left:calc(-50vw + 50%);\n  }\n\n  .bp-container{\n    max-width:none;\n    margin:0;\n    padding:0 100px;\n    box-sizing:border-box;\n  }\n\n  \/* Grid: text left 35%, carousel right 65% *\/\n  .bp-grid{\n    display:grid;\n    grid-template-columns:35% 65%;\n    gap:60px;\n    align-items:start;\n  }\n\n  \/* Left: text block *\/\n  .bp-text{\n    position:sticky;\n    top:120px;\n    padding-right:24px;\n  }\n  .bp-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,0.5);\n    margin:0 0 18px;\n    font-weight:500;\n  }\n  .bp-title{\n    font-size:clamp(28px,2.6vw,44px);\n    line-height:1.15;\n    font-weight:700;\n    letter-spacing:-0.01em;\n    margin:0 0 22px !important;\n    text-align:left !important;\n    color:#fff;\n    text-transform: none;\n  }\n  .bp-body{\n    font-size:16px;\n    line-height:1.55;\n    color:rgba(255,255,255,0.7);\n    margin:0;\n    max-width:440px;\n  }\n\n  \/* Right: header (arrows) + carousel *\/\n  .bp-right{\n    position:relative;\n    min-width:0;\n  }\n  .bp-arrows-row{\n    display:flex;\n    justify-content:flex-end;\n    gap:10px;\n    margin-bottom:24px;\n  }\n  .bp-arrow{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:none;\n    background:rgba(255,255,255,0.92);\n    color:#141210;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    transition:background .15s, opacity .15s, color .15s, transform .15s;\n  }\n  .bp-arrow:hover:not(:disabled){\n    background:#fff;\n    transform:scale(1.05);\n  }\n  .bp-arrow:active:not(:disabled){\n    transform:scale(0.94);\n  }\n  .bp-arrow:disabled{\n    opacity:0.25;\n    cursor:default;\n  }\n  .bp-arrow svg{ width:18px; height:18px; }\n\n  \/* Carousel viewport \u2014 breaks out to the right edge of the viewport *\/\n  .bp-viewport{\n    position:relative;\n    overflow:hidden;\n    \/* extend to right edge of viewport \u2014 only right side, left aligned with grid *\/\n    margin-right:calc(-1 * (100vw - 100% - 100px));\n  }\n\n  \/* Track *\/\n  .bp-track{\n    display:flex;\n    gap:24px;\n    transform:translateX(var(--bp-offset, 0px));\n    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change:transform;\n  }\n\n  \/* Each pair-card \u2014 contains 2 portrait images side by side *\/\n  .bp-card{\n    flex:0 0 var(--bp-card-width, 640px);\n    background:#0a0a0a;\n    border-radius:24px;\n    overflow:hidden;\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:0;\n    opacity:0.5;\n    transition:opacity 0.5s ease;\n    cursor:pointer;\n  }\n  .bp-card.is-active{\n    opacity:1;\n    cursor:default;\n  }\n  .bp-card-img{\n    aspect-ratio:3 \/ 4;\n    overflow:hidden;\n    background:#0a0a0a;\n  }\n  .bp-card-img img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    object-position:center center;\n    display:block;\n    border:0;\n    padding:0;\n    margin:0;\n    max-width:100%;\n    box-shadow:none;\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 900px){\n    .bp-section{\n      padding:64px 0 56px;\n    }\n    .bp-container{\n      padding:0 20px;\n    }\n    .bp-grid{\n      grid-template-columns:1fr;\n      gap:32px;\n    }\n    .bp-text{\n      position:static;\n      padding-right:0;\n    }\n    .bp-body{ max-width:none; }\n    .bp-arrows-row{ display:none; }\n    .bp-viewport{\n      margin-right:-20px;\n    }\n    .bp-track{ gap:14px; }\n    .bp-card{\n      flex:0 0 calc(100vw - 60px);\n      border-radius:18px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .bp-track{ transition:none; }\n    .bp-card{ transition:none; }\n  }\n<\/style>\n\n<section class=\"bp-section\">\n  <div class=\"bp-container\">\n    <div class=\"bp-grid\">\n\n      <div class=\"bp-text\">\n        <p class=\"bp-eyebrow\">Realismus, der \u00fcberzeugt<\/p>\n        <h2 class=\"bp-title\">Echte Beauty-Produkte. Transformiert in realistische AI-Kampagnen.<\/h2>\n        <p class=\"bp-body\">Mit sichtbaren Texturen, realer Hautinteraktion und feinsten Materialdetails \u2014 ohne klassische Produktion.<\/p>\n      <\/div>\n\n      <div class=\"bp-right\">\n        <div class=\"bp-arrows-row\">\n          <button class=\"bp-arrow\" id=\"bp-prev\" aria-label=\"Zur\u00fcck\" disabled>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"\/><\/svg>\n          <\/button>\n          <button class=\"bp-arrow\" id=\"bp-next\" aria-label=\"Weiter\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\n          <\/button>\n        <\/div>\n\n        <div class=\"bp-viewport\">\n          <div class=\"bp-track\" id=\"bp-track\">\n\n            <article class=\"bp-card is-active\" data-index=\"0\">\n              <div class=\"bp-card-img\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/beauty-ai-web-5.jpeg\" alt=\"Beauty Pair 1A\" loading=\"lazy\">\n              <\/div>\n              <div class=\"bp-card-img\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/beauty-ai-web-6.jpeg\" alt=\"Beauty Pair 1B\" loading=\"lazy\">\n              <\/div>\n            <\/article>\n\n            <article class=\"bp-card\" data-index=\"1\">\n              <div class=\"bp-card-img\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/beauty-ai-web-1.jpeg\" alt=\"Beauty Pair 2A\" loading=\"lazy\">\n              <\/div>\n              <div class=\"bp-card-img\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/beauty-ai-web-2.jpeg\" alt=\"Beauty Pair 2B\" loading=\"lazy\">\n              <\/div>\n            <\/article>\n\n            <article class=\"bp-card\" data-index=\"2\">\n              <div class=\"bp-card-img\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/jewelry-1-1536x1477.jpg\" alt=\"Beauty Pair 3A\" loading=\"lazy\">\n              <\/div>\n              <div class=\"bp-card-img\">\n                <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/beauty-ai-web-3-1-1646x2048.jpeg\" alt=\"Beauty Pair 3B\" loading=\"lazy\">\n              <\/div>\n            <\/article>\n\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  (function(){\n    var section = document.querySelector('.bp-section');\n    var track = document.getElementById('bp-track');\n    var prev = document.getElementById('bp-prev');\n    var next = document.getElementById('bp-next');\n    var cards = document.querySelectorAll('.bp-card');\n    if (!section || !track || !prev || !next || !cards.length) return;\n\n    var currentIndex = 0;\n\n    function getCardWidth(){\n      if (window.innerWidth <= 900){\n        return window.innerWidth - 60;\n      }\n      \/\/ Desktop: pair card ~640px so the next one peeks in on the right\n      var viewport = track.parentElement.getBoundingClientRect().width;\n      \/\/ Show ~1 full card + ~25% of the next as peek\n      var desired = Math.min(720, Math.max(480, viewport * 0.78));\n      return desired;\n    }\n\n    function getMaxNegOffset(){\n      var cardW = getCardWidth();\n      var gap = parseInt(getComputedStyle(track).gap, 10) || 24;\n      \/\/ Total track width = (n cards \u00d7 cardW) + ((n-1) gaps \u00d7 gap)\n      var trackWidth = (cards.length * cardW) + ((cards.length - 1) * gap);\n      \/\/ The track extends from the viewport's left edge all the way to the\n      \/\/ viewport's right edge (because of the negative margin trick).\n      \/\/ So the visible track area = window.innerWidth - (viewport's left offset).\n      var vpRect = track.parentElement.getBoundingClientRect();\n      var visibleWidth = window.innerWidth - vpRect.left;\n      \/\/ We want the last card's right edge to align with the viewport's right edge\n      \/\/ (with a small breathing room).\n      var maxNeg = -(trackWidth - visibleWidth + 24);\n      return Math.min(0, maxNeg);\n    }\n\n    function update(){\n      track.style.setProperty('--bp-card-width', getCardWidth() + 'px');\n\n      var cardW = getCardWidth();\n      var gap = parseInt(getComputedStyle(track).gap, 10) || 24;\n      var desiredOffset = -(currentIndex * (cardW + gap));\n      var maxNegOffset = getMaxNegOffset();\n      var offset = Math.max(maxNegOffset, desiredOffset);\n      track.style.setProperty('--bp-offset', offset + 'px');\n\n      cards.forEach(function(c, i){\n        c.classList.toggle('is-active', i === currentIndex);\n      });\n\n      prev.disabled = currentIndex === 0;\n      next.disabled = currentIndex === cards.length - 1;\n    }\n\n    function goTo(idx){\n      var clamped = Math.max(0, Math.min(cards.length - 1, idx));\n      if (clamped === currentIndex) return;\n      currentIndex = clamped;\n      update();\n    }\n\n    prev.addEventListener('click', function(){ goTo(currentIndex - 1); });\n    next.addEventListener('click', function(){ goTo(currentIndex + 1); });\n\n    \/\/ Click on a non-active card \u2192 activate it\n    cards.forEach(function(c, i){\n      c.addEventListener('click', function(){\n        if (i !== currentIndex) goTo(i);\n      });\n    });\n\n    \/\/ Debounced resize\n    var resizeTimer;\n    window.addEventListener('resize', function(){\n      clearTimeout(resizeTimer);\n      resizeTimer = setTimeout(update, 150);\n    });\n\n    \/\/ Swipe support\n    var touchStartX = 0;\n    var touchStartY = 0;\n    var touchActive = false;\n    var SWIPE_THRESHOLD = 50;\n    var DIRECTION_LOCK = 10;\n\n    track.addEventListener('touchstart', function(e){\n      if (e.touches.length !== 1) return;\n      var t = e.touches[0];\n      touchStartX = t.clientX;\n      touchStartY = t.clientY;\n      touchActive = true;\n    }, { passive: true });\n\n    track.addEventListener('touchmove', function(e){\n      if (!touchActive || e.touches.length !== 1) return;\n      var t = e.touches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      if (Math.abs(dx) > DIRECTION_LOCK || Math.abs(dy) > DIRECTION_LOCK){\n        if (Math.abs(dy) > Math.abs(dx)){\n          touchActive = false;\n        }\n      }\n    }, { passive: true });\n\n    track.addEventListener('touchend', function(e){\n      if (!touchActive) return;\n      touchActive = false;\n      var t = e.changedTouches[0];\n      var dx = t.clientX - touchStartX;\n      var dy = t.clientY - touchStartY;\n      if (Math.abs(dx) < SWIPE_THRESHOLD) return;\n      if (Math.abs(dy) > Math.abs(dx)) return;\n      goTo(dx < 0 ? currentIndex + 1 : currentIndex - 1);\n    }, { passive: true });\n\n    update();\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div id=\"ki-twins\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779204417340 vc_row-has-fill vc_row-o-content-middle vc_row-flex\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner vc_custom_1767906055848\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 Models Grid (with header + KI-Twin overlay)\n     Self-contained block for WordPress \"Custom HTML\".\n     ===================================================================== -->\n\n<style>\n  \/* ===== Header section (matches other sections on page) ===== *\/\n  .mg-wrap{\n    background:#fff;\n    padding:100px 0 56px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    -webkit-font-smoothing:antialiased;\n  }\n  .mg-container{\n    max-width:none;\n    margin:0;\n    padding:0 100px;\n    box-sizing:border-box;\n  }\n  .mg-head{\n    margin-bottom:48px;\n    max-width:780px;\n  }\n  .mg-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:#5A554F;\n    margin:0 0 14px;\n    font-weight:500;\n  }\n  .mg-title{\n    font-size:44px;\n    line-height:1.08;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 0 18px !important;\n    text-align:left !important;\n    color:#141210;\n    text-transform:none;\n  }\n  .mg-sub{\n    font-size:16px;\n    line-height:1.55;\n    color:#5A554F;\n    margin:0;\n    max-width:680px;\n  }\n\n  @media (max-width: 900px){\n    .mg-wrap{ padding:64px 0 40px; }\n    .mg-container{ padding:0 20px; }\n    .mg-head{ margin-bottom:28px; }\n    .mg-title{ font-size:30px; }\n    .mg-sub{ font-size:15px; }\n  }\n\n  \/* ===== Existing models grid styles (unchanged) ===== *\/\n.models-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n}\n\n.model-card {\n  position: relative;\n  overflow: hidden;\n  aspect-ratio: 3 \/ 4;\n  cursor: pointer;\n  border-radius: 24px;\n}\n\n.model-card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.4s ease, filter 0.4s ease;\n}\n\n.model-card::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(0,0,0,0);\n  transition: background 0.4s ease;\n}\n\n.model-name {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  font-size: 18px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0;\n  z-index: 2;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n}\n.model-type {\n  display: block;\n  font-size: 12px;\n  margin-top: 6px;\n  letter-spacing: 0.04em;\n}\n\n.label-pill {\n  display: inline-block;\n  padding: 4px 10px;\n  border-radius: 999px;\n  font-size: 11px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  background: rgba(255,255,255,0.15);\n  border: 1px solid rgba(255,255,255,0.35);\n}\n\n.label-pill.twin { background: rgba(255,255,255,0.18); }\n.label-pill.digital { background: rgba(255,255,255,0.08); }\n\n\/* Hover *\/\n.model-card:hover img {\n  filter: brightness(0.7);\n}\n.model-card:hover video {\n  filter: brightness(0.7);\n}\n.model-card:hover::after { background: rgba(0,0,0,0.35); }\n.model-card:hover .model-name { opacity: 1; }\n\n\/* Coming soon state *\/\n.model-card.coming-soon { display: none; }\n.model-card.coming-soon img { filter: blur(10px); }\n.model-card.coming-soon .model-name { opacity: 0 !important; }\n.model-card.coming-soon::before {\n  content: \"Coming soon\";\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  font-size: 18px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0;\n  z-index: 3;\n  transition: opacity 0.4s ease;\n}\n.model-card.coming-soon:hover::before { opacity: 1; }\n\n\/* KI models coming soon label (name stays visible) *\/\n.model-card.ki-coming img { filter: blur(10px); }\n.model-card.ki-coming::before {\n  content: \"Coming soon\";\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  font-size: 14px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  z-index: 3;\n  opacity: 1;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n.model-card.ki-coming:hover::before { opacity: 0; }\n\n\/* Tablet *\/\n@media (max-width: 1024px) {\n  .models-grid { grid-template-columns: repeat(2, 1fr); }\n}\n\n\/* Mobile \u2014 now 2 columns instead of 1 *\/\n@media (max-width: 640px) {\n  .models-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n  }\n  .model-card {\n    border-radius: 16px;\n  }\n  .model-name {\n    font-size: 13px;\n    letter-spacing: 0.04em;\n    padding: 0 8px;\n  }\n  .model-card.ki-coming::before {\n    font-size: 11px;\n  }\n}\n\n\/* Overlay Modal *\/\n.model-overlay {\n  position: fixed !important;\n  inset: 0;\n  background: rgba(0,0,0,0.6);\n  z-index: 2147483647;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 30px 24px;\n\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 0.25s ease, visibility 0s linear 0.25s;\n}\n.model-overlay.is-open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity 0.25s ease;\n}\n\n.model-overlay__inner {\n  position: relative;\n  width: 80vw;\n  height: 80vh;\n  background: #ffffff;\n  overflow: hidden;\n  padding: 48px;\n  border-radius: 24px;\n  transform: translateY(16px);\n  opacity: 0;\n  transition: transform 0.25s ease, opacity 0.25s ease;\n}\n.model-overlay.is-open .model-overlay__inner {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.model-overlay__close {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  z-index: 50;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.model-overlay__scroll {\n  height: 100%;\n  overflow-y: auto;\n  padding: 48px;\n  padding-top: 0px;\n}\n\n@media (max-width: 900px) {\n  .model-overlay__scroll {\n    padding: 24px;\n    padding-top: 10px;\n  }\n}\n\n.model-overlay__grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 40px;\n  align-items: start;\n}\n\n.model-overlay__headline {\n  font-size: 80px;\n  line-height: .4;\n  max-width: 420px;\n  word-break: keep-all;\n  overflow-wrap: normal;\n  hyphens: none;\n  white-space: normal;\n}\n\n.model-overlay__headline .headline-first,\n.model-overlay__headline .headline-last {\n  display: block;\n  white-space: nowrap;\n}\n\n.model-overlay__subtext {\n  margin-top: 50px;\n  max-width: 420px;\n  font-size: 20px;\n  line-height: 1.4;\n  color: rgba(0,0,0,0.55);\n}\n\n.model-overlay__left {\n  position: sticky;\n  top: 130px;\n  align-self: start;\n}\n\n.model-overlay__right {\n  position: relative;\n  padding-right: 0;\n}\n\n.model-overlay__stack {\n  position: relative;\n  display: grid;\n  gap: 24px;\n}\n\n.model-overlay__images {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 24px;\n}\n\n.model-overlay img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* Gesetzlich vorgeschriebenes AI-Tag auf den KI-generierten Modal-Bildern *\/\n.mo-img { position: relative; display: block; }\n.mo-ai-tag {\n  position: absolute;\n  right: 12px;\n  bottom: 12px;\n  font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Arial,sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  color: rgba(255,255,255,0.75);\n  text-shadow: 0 1px 3px rgba(0,0,0,0.55);\n  pointer-events: none;\n}\n\n\/* Overlay scroll hint *\/\n.overlay-scroll-indicator {\n  position: fixed;\n  bottom: calc(10vh + 10px);\n  left: calc(50% + 20vw);\n  transform: translateX(-50%);\n  display: flex;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 2147483648;\n}\n\n.overlay-scroll-arrow {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.65);\n  color: #000;\n  font-size: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: overlayScrollHint 1.4s ease-in-out infinite;\n}\n\n@keyframes overlayScrollHint {\n  0%   { transform: translateY(0); opacity: 1; }\n  50%  { transform: translateY(6px); opacity: 0.8; }\n  100% { transform: translateY(0); opacity: 1; }\n}\n\n.overlay-scroll-indicator.is-hidden {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n@media (max-width: 900px) {\n  .model-overlay__grid {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .model-overlay__inner {\n    width: 100%;\n    height: calc(100vh - 60px);\n    padding: 16px;\n  }\n\n  .model-overlay__scroll {\n    padding: 16px;\n    padding-top: 10px;\n  }\n\n  .model-overlay__left {\n    position: relative;\n    top: auto;\n  }\n\n  .model-overlay__headline {\n    font-size: 50px;\n    line-height: .5;\n    max-width: none;\n    word-break: normal;\n    overflow-wrap: anywhere;\n  }\n\n  .model-overlay__headline .headline-first,\n  .model-overlay__headline .headline-last {\n    white-space: normal;\n  }\n\n  .model-overlay__subtext {\n    margin-top: 16px;\n    max-width: none;\n    font-size: 16px;\n    line-height: 1.45;\n  }\n\n  .model-overlay__close {\n    left: auto;\n    right: 12px;\n    top: 12px;\n  }\n\n  .overlay-scroll-indicator {\n    display: flex !important;\n    left: 50%;\n    bottom: 50px;\n    transform: translateX(-50%);\n  }\n}\n<\/style>\n\n<!-- ===== Header ===== -->\n<section class=\"mg-wrap\">\n  <div class=\"mg-container\">\n    <div class=\"mg-head\">\n      <p class=\"mg-eyebrow\">Models<\/p>\n      <h2 class=\"mg-title\">Von realen Models zu AI-Twins.<\/h2>\n      <p class=\"mg-sub\">Jeder AI-Twin basiert auf einem realen Model und echten Bilddaten. So verbinden wir authentische \u00c4sthetik mit den M\u00f6glichkeiten k\u00fcnstlicher Intelligenz.<\/p>\n    <\/div>\n\n<div class=\"models-grid\" id=\"modelsGrid\">\n\n  <!-- Model 24 -->\n  <div class=\"model-card\"\n       data-headline=\"SERLINA HOHMANN\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Serlina-Pola-2-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Serlina-Pola-1-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2024\/02\/Serlina-Hohmann-x-Tobias-Dick-10.jpg\" alt=\"Model 22\">\n    <div class=\"model-name\">SERLINA HOHMANN<\/div>\n  <\/div>\n\n  <!-- Model 26 -->\n  <div class=\"model-card\"\n       data-headline=\"SOHNI AHMED\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Sohni-Pola-2.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Sohni-Pola-1.jpeg\"\n       data-img2=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Sohni-Pola-3.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-23.jpeg\" alt=\"Model 22\">\n    <div class=\"model-name\">SOHNI AHMED<\/div>\n  <\/div>\n\n  <!-- Model 25 -->\n  <div class=\"model-card\"\n       data-headline=\"LEA OUDE\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Lea-Pola-1.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Lea-Pola-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/04\/lea-oude-tobias-dick-mf-mgmt-11.jpeg\" alt=\"Model 20\">\n    <div class=\"model-name\">LEA OUDE<\/div>\n  <\/div>\n\n  <!-- Model 23 -->\n  <div class=\"model-card\"\n       data-headline=\"VINCENT VON THIEN\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Vincent-Pola-2-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Vincent-Pola-1-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2024\/02\/Vincent-von-Thien-x-Tobias-Dick-01.jpg\" alt=\"Model 22\">\n    <div class=\"model-name\">VINCENT VON THIEN<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"SOFIA TSAKIRIDOU\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Sofia-2-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Sofia-1-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/SOFIA-TSAKIRIDOU.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">SOFIA TSAKIRIDOU<\/div>\n  <\/div>\n\n    <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"RUBEN RUA\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Ruben-AI-Twin-Portrait-scaled.png\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Ruben-AI-Twin-1-scaled.png\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Ruben-Rua.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">RUBEN RUA<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"LOUISA KAPITZA\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Louisa-Kapitza-Pola-1-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Louisa-Kapitza-Pola-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/louisakapitza_model.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">LOUISA KAPITZA<\/div>\n  <\/div>\n\n    <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"VLADA STALMAKOVA\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-VLADA-STALMAKOVA-1-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-VLADA-STALMAKOVA-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/VLADA-STALMAKOVA.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">VLADA STALMAKOVA<\/div>\n  <\/div>\n\n    <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"ELENA FAUPEL\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Elena-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/Elena-Faupel.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">ELENA FAUPEL<\/div>\n  <\/div>\n\n    <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"ANNA AMATO\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Anna-2-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Anna-1-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/Anna-Amato.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">ANNA AMATO<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"CLAUDIA COLLADO\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Claudia-1-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Claudia-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/Claudia-Collado.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">CLAUDIA COLLADO<\/div>\n  <\/div>\n\n\n    <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"LUISA SONDERMEIER\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Luisa-Pola-1-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Luisa-Pola-4-scaled.jpeg\"\n       data-img2=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Luisa-Pola-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-16.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">LUISA SONDERMEIER<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"LIA LENHARDT\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Lia-1-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/KI-Twin-Lia-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/191.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">LIA LENHARDT<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"HANNAH LAKER\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/KI-Twin-Hannah-1.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Hannah-Laker.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">HANNAH LAKER<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"LEONIE KIM\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Leonie-Kim-AI-Twin-2-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Leonie-Kim-AI-Twin-1-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Leonie-Kim.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">LEONIE KIM<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"LARA BENDER\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Lara-Bender-AI-Twin-2-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Lara-Bender-AI-Twin-1-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/04\/Lara-Bender.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">LARA BENDER<\/div>\n  <\/div>\n\n    <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"FINE BAUER\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/Fine-Bauer-Ai-Twin-Portrait-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/Fine-Bauer-Ai-Twin-Full-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/05\/Fine-Bauer-Sedcard.jpeg\" alt=\"Model 16\">\n    <div class=\"model-name\">FINE BAUER<\/div>\n  <\/div>\n\n  <!-- Model 16 -->\n  <div class=\"model-card\"\n       data-headline=\"LENNART BETZGEN\"\n       data-main=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Lennart-Pola-1-scaled.jpeg\"\n       data-img1=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/KI-Twin-Lennart-Pola-2-scaled.jpeg\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/02\/Lennart-Betzgen-mfmgmt-portrait-1.jpg\" alt=\"Model 16\">\n    <div class=\"model-name\">LENNART BETZGEN<\/div>\n  <\/div>\n\n\n\n\n\n\n\n\n  <!-- Model 1 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-1.jpeg\" alt=\"Model 1\">\n    <div class=\"model-name\">ALEXANDRA PEKARKOVA<\/div>\n  <\/div>\n\n  <!-- Model 2 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-2.jpeg\" alt=\"Model 2\">\n    <div class=\"model-name\">ALINA<\/div>\n  <\/div>\n\n  <!-- Model 3 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-3.jpeg\" alt=\"Model 3\">\n    <div class=\"model-name\">ASEKA<\/div>\n  <\/div>\n\n  <!-- Model 4 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-4.jpeg\" alt=\"Model 4\">\n    <div class=\"model-name\">CAROLINNE PRATES<\/div>\n  <\/div>\n\n  <!-- Model 5 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-5.jpeg\" alt=\"Model 5\">\n    <div class=\"model-name\">CELINA KROGMANN<\/div>\n  <\/div>\n\n  <!-- Model 6 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-6.jpeg\" alt=\"Model 6\">\n    <div class=\"model-name\">FATIMA SIAD<\/div>\n  <\/div>\n\n  <!-- Model 7 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-7.jpeg\" alt=\"Model 7\">\n    <div class=\"model-name\">FINE BAUER<\/div>\n  <\/div>\n\n  <!-- Model 8 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-8.jpeg\" alt=\"Model 8\">\n    <div class=\"model-name\">FLORENTINA<\/div>\n  <\/div>\n\n  <!-- Model 9 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-9.jpeg\" alt=\"Model 9\">\n    <div class=\"model-name\">GRETA<\/div>\n  <\/div>\n\n  <!-- Model 10 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-10.jpeg\" alt=\"Model 10\">\n    <div class=\"model-name\">ILAYS<\/div>\n  <\/div>\n\n  <!-- Model 11 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-11.jpeg\" alt=\"Model 11\">\n    <div class=\"model-name\">JELENA STANKOVIC<\/div>\n  <\/div>\n\n  <!-- Model 12 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-12.jpeg\" alt=\"Model 12\">\n    <div class=\"model-name\">JULIA STREGE<\/div>\n  <\/div>\n\n  <!-- Model 13 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-13.jpeg\" alt=\"Model 13\">\n    <div class=\"model-name\">LENE GOUWS<\/div>\n  <\/div>\n\n  <!-- Model 14 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-14.jpeg\" alt=\"Model 14\">\n    <div class=\"model-name\">LILLI ZOE<\/div>\n  <\/div>\n\n  <!-- Model 15 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-15.jpeg\" alt=\"Model 15\">\n    <div class=\"model-name\">LINDSEY OPSO<\/div>\n  <\/div>\n\n  <!-- Model 17 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-17.jpeg\" alt=\"Model 17\">\n    <div class=\"model-name\">LUISA HARTEMA<\/div>\n  <\/div>\n\n  <!-- Model 18 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-18.jpeg\" alt=\"Model 18\">\n    <div class=\"model-name\">SARAH DEWI<\/div>\n  <\/div>\n\n  <!-- Model 19 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-19.jpeg\" alt=\"Model 19\">\n    <div class=\"model-name\">SOPHIE<\/div>\n  <\/div>\n\n  <!-- Model 20 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-20.jpeg\" alt=\"Model 20\">\n    <div class=\"model-name\">STEPH HUYNH<\/div>\n  <\/div>\n\n  <!-- Model 21 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-21.jpeg\" alt=\"Model 21\">\n    <div class=\"model-name\">VIOLA MAZZA<\/div>\n  <\/div>\n\n  <!-- Model 22 -->\n  <div class=\"model-card coming-soon\">\n    <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/01\/ki-twins-22.jpeg\" alt=\"Model 22\">\n    <div class=\"model-name\">YVONNE<\/div>\n  <\/div>\n\n<\/div>\n\n  <\/div>\n<\/section>\n\n<!-- ===== AI-Avatare (separate Sektion, identisches Styling) ===== -->\n<section class=\"mg-wrap\" id=\"avatarsSection\" style=\"display:none\">\n  <div class=\"mg-container\">\n    <div class=\"mg-head\">\n      <p class=\"mg-eyebrow\">AI-Avatare<\/p>\n      <h2 class=\"mg-title\">AI-Avatare, komplett neu erschaffen.<\/h2>\n      <p class=\"mg-sub\">Anders als unsere AI-Twins basieren AI-Avatare auf keinem realen Model. Sie entstehen komplett neu und geben maximale Freiheit bei Look, Diversit\u00e4t und Verf\u00fcgbarkeit. Kunden haben die Wahl zwischen \u00fcber 250 fertigen AI-Avataren oder bauen sich ihren eigenen selbst.<\/p>\n    <\/div>\n\n    <div class=\"models-grid\" id=\"avatarsGrid\"><\/div>\n  <\/div>\n<\/section>\n\n<div class=\"model-overlay\" id=\"modelOverlay\">\n  <div class=\"model-overlay__inner\">\n    <div class=\"model-overlay__close\" id=\"closeOverlay\">\u00d7<\/div>\n\n    <div class=\"model-overlay__scroll\">\n      <div class=\"model-overlay__grid\">\n        <div class=\"model-overlay__left\">\n          <h2 class=\"model-overlay__headline\" id=\"overlayHeadline\">MODEL NAME<\/h2>\n          <p class=\"model-overlay__subtext\">\n            Alle Bilder sind AI generiert und basieren auf echten Bilddaten von dem Model.\n            <br>Mit diesen AI-Twins setzen wir die Grundlage f\u00fcr alle kommenden AI Produktionen.\n          <\/p>\n        <\/div>\n\n        <div class=\"model-overlay__right\">\n          <div class=\"model-overlay__stack\">\n            <div class=\"overlay-scroll-indicator\" id=\"overlayScrollIndicator\">\n              <span class=\"overlay-scroll-arrow\">\u2193<\/span>\n            <\/div>\n\n            <div class=\"model-overlay__images\" id=\"overlayImages\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var FEED = 'https:\/\/studio.mf-mgmt.com\/public\/website-models';\n  var grid = document.getElementById('modelsGrid');\n  var avatarsGrid = document.getElementById('avatarsGrid');\n  var avatarsSection = document.getElementById('avatarsSection');\n  var overlay = document.getElementById('modelOverlay');\n  document.body.appendChild(overlay);\n  var closeBtn = document.getElementById('closeOverlay');\n  var headline = document.getElementById('overlayHeadline');\n  var imagesWrap = document.getElementById('overlayImages');\n  var scrollIndicator = document.getElementById('overlayScrollIndicator');\n  var scrollContainer = document.querySelector('.model-overlay__scroll');\n  var subEl = document.querySelector('.model-overlay__subtext');\n  var TWIN_SUB = 'Alle Bilder sind AI generiert und basieren auf echten Bilddaten von dem Model.<br>Mit diesen AI-Twins setzen wir die Grundlage f\u00fcr alle kommenden AI Produktionen.';\n  var AVATAR_SUB = 'Alle Bilder sind AI generiert.<br>Mit diesem AI-Avatar setzen wir die Grundlage f\u00fcr alle kommenden AI Produktionen.';\n\n  function openCard(card){\n    var name = card.dataset.headline || (card.querySelector('.model-name') && card.querySelector('.model-name').innerText) || '';\n    var fallback = card.querySelector('img') ? card.querySelector('img').src : '';\n    var parts = (name||'').trim().split(\/\\s+\/);\n    var firstName = parts.shift() || '';\n    var lastName = parts.join(' ');\n    headline.innerHTML = '<span class=\"headline-first\">'+firstName+'<\/span><br><span class=\"headline-last\">'+lastName+'<\/span>';\n    headline.style.fontSize = window.matchMedia('(max-width: 900px)').matches ? '32px' : '80px';\n    requestAnimationFrame(function(){\n      var max = window.matchMedia('(max-width: 900px)').matches ? Math.floor(headline.getBoundingClientRect().width) : 420;\n      while (headline.scrollWidth > max && parseFloat(getComputedStyle(headline).fontSize) > 46) {\n        headline.style.fontSize = (parseFloat(getComputedStyle(headline).fontSize) - 2) + 'px';\n      }\n    });\n    var urls = [];\n    if (card.dataset.main) urls.push(card.dataset.main);\n    for (var i = 1; i <= 20; i++) { if (card.dataset['img'+i]) urls.push(card.dataset['img'+i]); }\n    if (urls.length === 0 && fallback) urls.push(fallback);\n    imagesWrap.innerHTML = urls.map(function(u){ return '<div class=\"mo-img\"><img decoding=\"async\" src=\"'+u+'\" alt=\"'+name+'\"><span class=\"mo-ai-tag\" aria-hidden=\"true\">AI<\/span><\/div>'; }).join('');\n    if(subEl) subEl.innerHTML = (card.dataset.state === 'avatar') ? AVATAR_SUB : TWIN_SUB;\n    scrollIndicator.classList.remove('is-hidden');\n    scrollContainer.scrollTop = 0;\n    overlay.classList.add('is-open');\n    document.body.style.overflow = 'hidden';\n  }\n  function bindTwin(card){ card.addEventListener('click', function(){ openCard(card); }); }\n\n  \/\/ Hover: das erste Modal-Bild (data-main = AI-Twin) sanft \u00fcber das reale Foto\n  \/\/ einblenden (Crossfade statt hartem Wechsel). Name-Overlay bleibt (per CSS).\n  function enableHoverSwap(card){\n    var img = card.querySelector('img');\n    var twin = card.dataset.main;\n    if(!img || !twin) return;\n    var orig = img.getAttribute('src');\n    if(!orig || twin === orig) return;\n    var over = document.createElement('img');\n    over.src = twin;\n    over.alt = '';\n    over.setAttribute('aria-hidden', 'true');\n    over.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.55s ease, filter 0.4s ease;z-index:1;pointer-events:none;';\n    card.appendChild(over);\n    \/\/ Gesetzlich vorgeschriebenes AI-Tag \u2014 erscheint mit dem (KI-generierten) Twin-Bild.\n    var aiTag = document.createElement('span');\n    aiTag.textContent = 'AI';\n    aiTag.setAttribute('aria-hidden', 'true');\n    aiTag.style.cssText = 'position:absolute;right:10px;bottom:9px;z-index:4;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.04em;color:rgba(255,255,255,0.7);text-shadow:0 1px 3px rgba(0,0,0,0.5);opacity:0;transition:opacity 0.55s ease;pointer-events:none;';\n    card.appendChild(aiTag);\n    card.addEventListener('mouseenter', function(){ over.style.opacity = '1'; aiTag.style.opacity = '1'; });\n    card.addEventListener('mouseleave', function(){ over.style.opacity = '0'; aiTag.style.opacity = '0'; });\n  }\n\n  \/\/ Avatare: beim Hover das Video abspielen. Abdunklung + Name bleiben (per CSS).\n  \/\/ Video liegt als Ebene \u00fcber dem Cover, blendet sanft ein, stumm + Loop.\n  function enableHoverVideo(card){\n    var url = card.dataset.video;\n    if(!url) return;\n    var v = document.createElement('video');\n    v.src = url;\n    v.muted = true; v.loop = true; v.playsInline = true; v.preload = 'metadata';\n    v.setAttribute('muted', ''); v.setAttribute('playsinline', ''); v.setAttribute('preload', 'metadata');\n    v.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.5s ease, filter 0.4s ease;z-index:1;pointer-events:none;';\n    card.appendChild(v);\n    \/\/ Gesetzlich vorgeschriebenes AI-Tag \u2014 erscheint mit dem (KI-generierten) Video.\n    var aiTag = document.createElement('span');\n    aiTag.textContent = 'AI';\n    aiTag.setAttribute('aria-hidden', 'true');\n    aiTag.style.cssText = 'position:absolute;right:10px;bottom:9px;z-index:4;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.04em;color:rgba(255,255,255,0.7);text-shadow:0 1px 3px rgba(0,0,0,0.5);opacity:0;transition:opacity 0.5s ease;pointer-events:none;';\n    card.appendChild(aiTag);\n\n    var hovering = false;\n    \/\/ Abspielversuch \u2014 schluckt Rejections leise; wird \u00fcber die Ready-Events erneut versucht.\n    function attempt(){\n      if(!hovering) return;\n      var p = v.play();\n      if(p && typeof p.then === 'function'){ p.catch(function(){}); }\n    }\n    \/\/ Selbstheilend: sobald genug Daten da sind UND wir noch hovern \u2192 (erneut) abspielen.\n    ['loadeddata','canplay','canplaythrough','playing'].forEach(function(ev){\n      v.addEventListener(ev, function(){ if(hovering && v.paused) attempt(); });\n    });\n    \/\/ Defektes\/fehlendes Video \u2192 Cover bleibt einfach sichtbar (kein leeres Feld).\n    v.addEventListener('error', function(){ v.style.opacity = '0'; });\n\n    card.addEventListener('mouseenter', function(){\n      hovering = true;\n      v.preload = 'auto';        \/\/ ab jetzt voll puffern (nur f\u00fcr tats\u00e4chlich gehoverte Videos)\n      v.style.opacity = '1';\n      aiTag.style.opacity = '1';\n      attempt();\n    });\n    card.addEventListener('mouseleave', function(){\n      hovering = false;\n      v.style.opacity = '0';\n      aiTag.style.opacity = '0';\n      try { v.pause(); } catch(e){}\n    });\n  }\n\n  \/\/ 1) Bestehende (hardcodierte) Karten: Namen merken + Twins klickbar machen\n  var existingNames = {};\n  Array.prototype.forEach.call(grid.querySelectorAll('.model-card'), function(card){\n    var nmEl = card.querySelector('.model-name');\n    var nm = (card.dataset.headline || (nmEl && nmEl.innerText) || '').trim().toUpperCase();\n    if(nm) existingNames[nm] = true;\n    if(!card.classList.contains('coming-soon') && !card.classList.contains('ki-coming')){ bindTwin(card); enableHoverSwap(card); }\n  });\n\n  \/\/ Feed-Model \u2192 klickbare Karte. Cover = Portrait (images[0]), Modal = alle images\n  \/\/ (Portrait + Ganzk\u00f6rper). Twin und Avatar werden gleich behandelt (beide klickbar).\n  function buildCard(m){\n    var div = document.createElement('div');\n    div.className = 'model-card';\n    div.dataset.headline = m.name || '';\n    div.dataset.state = m.state || 'twin';\n    if(m.video) div.dataset.video = m.video;\n    var imgs = m.images || [];\n    if(imgs[0]) div.dataset.main = imgs[0];\n    for(var i=1;i<imgs.length;i++){ div.dataset['img'+i] = imgs[i]; }\n    var img = document.createElement('img');\n    img.src = m.cover; img.alt = m.name || ''; img.loading = 'lazy';\n    var nm = document.createElement('div'); nm.className='model-name'; nm.textContent = (m.name||'').toUpperCase();\n    div.appendChild(img); div.appendChild(nm);\n    return div;\n  }\n\n  \/\/ 2) Feed-Models zus\u00e4tzlich anh\u00e4ngen (nur die, die noch nicht als Karte existieren)\n  fetch(FEED, { cache: 'no-store' })\n    .then(function(r){ return r.json(); })\n    .then(function(d){\n      var avatarModels = [];\n      (d.models||[]).forEach(function(m){\n        if(!m.cover) return;\n        var nm = (m.name||'').trim().toUpperCase();\n        if(existingNames[nm]) return;\n        existingNames[nm] = true;\n        if((m.state||'twin') === 'avatar'){\n          avatarModels.push(m);              \/\/ sammeln, gleich gemischt anh\u00e4ngen\n        } else {\n          var card = buildCard(m);           \/\/ Twins: feste Feed-Reihenfolge\n          bindTwin(card);\n          enableHoverSwap(card);\n          grid.appendChild(card);\n        }\n      });\n      \/\/ Avatare zuf\u00e4llig mischen (Fisher-Yates) \u2014 frische Reihenfolge pro Seitenaufruf.\n      for(var i=avatarModels.length-1;i>0;i--){\n        var j=Math.floor(Math.random()*(i+1));\n        var tmp=avatarModels[i]; avatarModels[i]=avatarModels[j]; avatarModels[j]=tmp;\n      }\n      if(avatarModels.length && avatarsGrid){\n        avatarModels.forEach(function(m){\n          var card = buildCard(m);\n          bindTwin(card);\n          enableHoverVideo(card);            \/\/ Avatare: nur Video beim Hover\n          avatarsGrid.appendChild(card);\n        });\n        if(avatarsSection) avatarsSection.style.display = '';\n      }\n    })\n    .catch(function(e){ console.error('[models-feed]', e); });\n\n  scrollContainer.addEventListener('scroll', function(){ if (scrollContainer.scrollTop > 10) scrollIndicator.classList.add('is-hidden'); });\n  function closeOverlay(){ overlay.classList.remove('is-open'); document.body.style.overflow = ''; }\n  closeBtn.addEventListener('click', closeOverlay);\n  overlay.addEventListener('click', function(e){ if (e.target === overlay) closeOverlay(); });\n  window.addEventListener('keydown', function(e){ if (e.key === 'Escape' && overlay.classList.contains('is-open')) closeOverlay(); });\n})();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1779184654283 vc_row-has-fill\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 About Section (centered, black card)\n     Self-contained block for WordPress \"Custom HTML\".\n\n     Black rounded card, centered on the page (not full width).\n     Headline top-left, animated KPI band, two balanced columns,\n     Studio\/Enterprise cards + contact, emphasised closing line.\n     ===================================================================== -->\n\n<style>\n  .ab-wrap{\n    background:#fff;\n    padding:80px 0 80px;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    -webkit-font-smoothing:antialiased;\n    \/* Full-bleed: bricht aus geerbtem Container-Padding aus, schwarz bis zum Rand.\n       margin: -50vw links\/rechts zieht die Sektion auf volle Viewport-Breite. *\/\n    width:100vw;\n    position:relative;\n    left:50%;\n    right:50%;\n    margin-left:-50vw;\n    margin-right:-50vw;\n    \/* Pre-compute the inset value as a CSS variable \u2014\n       avoids parsing issues with calc\/max inside clip-path.\n       Startbreite schmaler (mehr sichtbarer Aufklapp-Effekt), aber auf 120px\n       gedeckelt, damit am Startpunkt nur Padding und nie Text beschnitten wird. *\/\n    --ab-inset: clamp(24px, calc((100vw - 1200px) \/ 2), 120px);\n  }\n\n  \/* Outer expansion wrapper \u2014 clip-path animated by JS via --ab-progress *\/\n  .ab-expand{\n    width:100%;\n    background:#000;\n    --ab-progress: 0;\n    will-change: clip-path;\n    clip-path: inset(\n      0\n      calc(var(--ab-inset) * (1 - var(--ab-progress)))\n      0\n      calc(var(--ab-inset) * (1 - var(--ab-progress)))\n      round\n      calc(24px * (1 - var(--ab-progress)))\n    );\n    -webkit-clip-path: inset(\n      0\n      calc(var(--ab-inset) * (1 - var(--ab-progress)))\n      0\n      calc(var(--ab-inset) * (1 - var(--ab-progress)))\n      round\n      calc(24px * (1 - var(--ab-progress)))\n    );\n  }\n\n  .ab-section{\n    max-width:1480px;\n    margin:0 auto;\n    padding:0 24px;\n    box-sizing:border-box;\n  }\n\n  .ab-card{\n    color:#fff;\n    padding:120px 150px 120px;\n    box-sizing:border-box;\n    line-height:1.55;\n    max-width:1480px;\n    margin:0 auto;\n  }\n\n  .ab-eyebrow{\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,0.5);\n    margin:0 0 16px;\n    font-weight:500;\n  }\n  .ab-title{\n    font-size:clamp(32px,3.6vw,52px);\n    line-height:1.05;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    margin:0 0 20px !important;\n    text-align:left !important;\n    color:#fff;\n    max-width:780px;\n    text-transform: none;\n  }\n  .ab-lead{\n    font-size:clamp(15px,1.5vw,22px);\n    line-height:1.45;\n    color:rgba(255,255,255,0.9);\n    font-weight:500;\n    max-width:none;\n    white-space:nowrap;\n    margin:0 0 56px;\n  }\n\n  \/* Animated KPI band *\/\n  .ab-stats{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:16px;\n    margin:0 0 56px;\n  }\n  .ab-stat{\n    text-align:center;\n    background:rgba(255,255,255,0.15);\n    border:1px solid rgba(255,255,255,0.22);\n    border-radius:16px;\n    padding:26px 20px;\n  }\n  .ab-stat-pre{\n    font-size:13px;\n    letter-spacing:0.04em;\n    color:rgba(255,255,255,0.55);\n    margin-bottom:8px;\n    min-height:1.1em;\n  }\n  .ab-stat-num{\n    font-size:clamp(34px,3.4vw,54px);\n    font-weight:700;\n    letter-spacing:-0.02em;\n    line-height:1;\n    color:#fff;\n    font-variant-numeric:tabular-nums;\n  }\n  .ab-stat-label{\n    margin-top:12px;\n    font-size:13.5px;\n    line-height:1.45;\n    color:rgba(255,255,255,0.58);\n  }\n\n  \/* Two-column body *\/\n  .ab-body{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:48px 100px;\n  }\n  .ab-body p{\n    font-size:18px;\n    line-height:1.7;\n    color:rgba(255,255,255,0.78);\n    margin:0 0 18px;\n  }\n  .ab-body p:last-child{ margin-bottom:0; }\n  .ab-col{\n    display:flex;\n    flex-direction:column;\n  }\n\n  \/* Studio \/ Enterprise cards *\/\n  .ab-offers{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:24px;\n    margin-top:56px;\n  }\n  .ab-offer{\n    background:rgba(255,255,255,0.15);\n    border:1px solid rgba(255,255,255,0.22);\n    border-radius:16px;\n    padding:30px 32px;\n  }\n  .ab-offer h3{\n    font-size:19px;\n    font-weight:600;\n    margin:0 0 10px;\n    color:#fff;\n    text-transform:none !important;\n    letter-spacing:normal;\n  }\n  .ab-offer p{\n    font-size:15.5px;\n    line-height:1.6;\n    color:rgba(255,255,255,0.72);\n    margin:0;\n  }\n  .ab-cta{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    margin-top:20px;\n    font-size:15px;\n    font-weight:600;\n    color:#fff;\n    text-decoration:none;\n  }\n  .ab-cta svg{ width:15px; height:15px; transition:transform 0.2s ease; }\n  .ab-cta:hover{ color:#fff !important; }\n  .ab-cta:hover svg{ transform:translateX(3px); }\n\n  \/* \u2500\u2500 Wiederverwendbare Reveal-\/Countdown-Logik \u2500\u2500\n     Markup:  <span class=\"reveal\" data-launch=\"ISO-Datum mit Zeitzone\">\n                <span class=\"reveal-live\">\u2026echter Inhalt (z.B. CTA)\u2026<\/span>\n                <span class=\"reveal-locked\"><svg\u2026\/> Text <b class=\"reveal-count\"><\/b><\/span>\n              <\/span>\n     JS blendet vor dem Launch nur .reveal-locked ein (mit Live-Countdown),\n     ab dem Launch nur .reveal-live. *\/\n  .reveal-live{ display:none; }\n  .reveal.is-live .reveal-live{ display:inline-flex; }\n  .reveal.is-live .reveal-locked{ display:none; }\n  .reveal-locked{\n    display:inline-flex; align-items:center; gap:9px;\n    margin-top:20px; padding:9px 15px;\n    border:1px solid rgba(255,255,255,0.22); border-radius:999px;\n    font-size:13.5px; line-height:1; color:rgba(255,255,255,0.7);\n  }\n  .reveal-locked svg{ width:14px; height:14px; flex-shrink:0; stroke:rgba(255,255,255,0.55); }\n  .reveal-count{ font-variant-numeric:tabular-nums; color:#fff; font-weight:600; }\n\n  \/* + an der KPI-Kachel (\u00f6ffnet das Rechenbeispiel-Modal) *\/\n  .ab-stat-clickable{ cursor:pointer; }\n  .ab-stat-plus{\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    width:24px;\n    height:24px;\n    margin-top:12px;\n    border-radius:50%;\n    border:1px solid rgba(255,255,255,0.3);\n    background:rgba(255,255,255,0.08);\n    color:#fff;\n    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;\n  }\n  .ab-stat-plus svg{ width:12px; height:12px; display:block; stroke:currentColor; stroke-width:2.4; }\n  .ab-stat-clickable:hover .ab-stat-plus{ background:#fff; color:#141210; border-color:#fff; transform:scale(1.08); }\n\n  \/* \u2500\u2500 Rechenbeispiel-Modal (dunkel, monochrom \u2014 passend zur About-Sektion) \u2500\u2500 *\/\n  .rc-overlay{\n    position:fixed; inset:0; z-index:2147483000;\n    display:none; align-items:center; justify-content:center;\n    padding:24px;\n    background:rgba(0,0,0,0.72);\n    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n  }\n  .rc-overlay.is-open{ display:flex; animation:rcOvIn 0.3s ease; }\n  @keyframes rcOvIn{ from{opacity:0} to{opacity:1} }\n  .rc-panel{\n    position:relative;\n    background:#141210; color:#fff;\n    border:1px solid rgba(255,255,255,0.12);\n    border-radius:24px;\n    max-width:840px; width:100%;\n    max-height:92vh; overflow:auto;\n    padding:44px 46px 34px;\n    box-shadow:0 40px 100px rgba(0,0,0,0.6);\n    animation:rcPanIn 0.42s cubic-bezier(0.2,0.7,0.3,1);\n    -webkit-font-smoothing:antialiased;\n  }\n  @keyframes rcPanIn{ from{opacity:0; transform:translateY(22px) scale(0.98)} to{opacity:1; transform:none} }\n  .rc-panel *{ box-sizing:border-box; }\n  .rc-close{\n    position:absolute; top:18px; right:20px;\n    width:38px; height:38px; border-radius:50%;\n    border:1px solid rgba(255,255,255,0.25); background:transparent;\n    font-size:20px; line-height:1; color:rgba(255,255,255,0.7);\n    cursor:pointer; display:flex; align-items:center; justify-content:center;\n    transition:background 0.2s, color 0.2s, border-color 0.2s;\n  }\n  .rc-close:hover{ background:#fff; color:#141210; border-color:#fff; }\n  .rc-kicker{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); font-weight:500; margin-bottom:14px; }\n  .rc-title{ font-size:clamp(26px,3.2vw,38px); font-weight:700; line-height:1.08; letter-spacing:-0.02em; text-transform:none; margin:0 0 12px; color:#fff; }\n  .rc-sub{ font-size:15.5px; line-height:1.55; color:rgba(255,255,255,0.6); margin:0 0 28px; max-width:600px; }\n  .rc-compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }\n  .rc-card{ border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:22px 24px; background:rgba(255,255,255,0.04); }\n  .rc-card.is-ai{ border-color:rgba(255,107,112,0.5); background:rgba(255,107,112,0.08); }\n  .rc-card-label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:600; margin-bottom:14px; }\n  .rc-card-num{ font-size:40px; font-weight:700; line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:#fff; }\n  .rc-card.is-ai .rc-card-num{ color:#FF6B70; }\n  .rc-card-meta{ font-size:12.5px; color:rgba(255,255,255,0.6); margin-top:8px; line-height:1.4; }\n  \/* Spec-Zeile mit Icons (SKUs \/ Bilder \/ Videos \/ Outfits) *\/\n  .rc-specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0 4px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1); }\n  .rc-spec{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; }\n  .rc-spec svg{ width:22px; height:22px; stroke:rgba(255,255,255,0.7); margin-bottom:3px; }\n  .rc-spec b{ font-size:19px; font-weight:700; line-height:1; letter-spacing:-0.01em; color:#fff; font-variant-numeric:tabular-nums; }\n  .rc-spec span{ font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); }\n  .rc-card.is-ai .rc-spec svg{ stroke:#FF6B70; }\n  .rc-card-tags{ font-size:12px; color:rgba(255,255,255,0.42); margin-top:14px; line-height:1.5; border-top:1px solid rgba(255,255,255,0.1); padding-top:12px; }\n  .rc-result{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:center; padding:24px 0; border-top:1px solid rgba(255,255,255,0.14); border-bottom:1px solid rgba(255,255,255,0.14); margin-bottom:26px; }\n  .rc-r-num{ font-size:clamp(28px,3.2vw,38px); font-weight:700; line-height:1; letter-spacing:-0.02em; color:#FF6B70; font-variant-numeric:tabular-nums; }\n  .rc-r-label{ font-size:11.5px; color:rgba(255,255,255,0.6); margin-top:9px; line-height:1.35; }\n  .rc-bars{ margin-bottom:24px; }\n  .rc-bar-row{ display:grid; grid-template-columns:120px 1fr auto; gap:14px; align-items:center; margin-bottom:12px; }\n  .rc-bar-name{ font-size:13px; color:rgba(255,255,255,0.85); font-weight:600; }\n  .rc-bar-track{ height:22px; background:rgba(255,255,255,0.08); border-radius:6px; overflow:hidden; }\n  .rc-bar-fill{ height:100%; width:0; border-radius:6px; transition:width 1s cubic-bezier(0.2,0.7,0.3,1); }\n  .rc-bar-fill.conv{ background:rgba(255,255,255,0.28); }\n  .rc-bar-fill.ai{ background:linear-gradient(90deg,#CC3036 0%,#E84A52 45%,#FF6B70 100%); }\n  .rc-bar-val{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; color:#fff; }\n  .rc-bar-row.is-ai .rc-bar-name, .rc-bar-row.is-ai .rc-bar-val{ color:#FF6B70; }\n  .rc-math{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:16px 20px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.7); margin-bottom:20px; }\n  .rc-math b{ color:#fff; font-weight:600; }\n  .rc-math .rc-eq{ color:#FF6B70; font-weight:600; white-space:nowrap; }\n  .rc-foot{ font-size:11.5px; color:rgba(255,255,255,0.4); line-height:1.5; margin:0; }\n  @media (max-width:640px){\n    .rc-panel{ padding:34px 22px 26px; }\n    .rc-title{ font-size:24px; }\n    .rc-compare{ grid-template-columns:1fr; }\n    .rc-card-num{ font-size:34px; }\n    .rc-result{ grid-template-columns:repeat(3,1fr); gap:10px; }\n    .rc-specs{ gap:4px; margin:16px 0 4px; }\n    .rc-spec svg{ width:20px; height:20px; }\n    .rc-spec b{ font-size:17px; }\n    .rc-spec span{ font-size:9px; letter-spacing:0.04em; }\n    .rc-bar-row{ grid-template-columns:84px 1fr auto; gap:9px; }\n    .rc-bar-name{ font-size:12px; }\n    .rc-math .rc-eq{ white-space:normal; }\n  }\n  @media (max-width:420px){\n    .rc-result{ grid-template-columns:1fr; gap:16px; text-align:left; }\n  }\n  .ab-contact{\n    margin-top:18px;\n    display:flex;\n    flex-wrap:wrap;\n    align-items:center;\n    gap:12px 26px;\n  }\n  .ab-contact-label{\n    flex-basis:100%;\n    font-size:12px;\n    letter-spacing:0.08em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,0.5);\n    margin-bottom:2px;\n  }\n  .ab-contact a{\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    width:fit-content;\n    font-size:15px;\n    color:#fff;\n    text-decoration:none;\n  }\n  .ab-contact a:hover{ opacity:0.8; }\n  .ab-contact a svg{\n    width:16px;\n    height:16px;\n    flex-shrink:0;\n    stroke:rgba(255,255,255,0.85);\n  }\n\n  \/* Emphasised closing line *\/\n  .ab-closing{\n    margin-top:56px;\n    font-size:clamp(19px,1.7vw,24px);\n    line-height:1.5;\n    font-weight:500;\n    color:#fff;\n    max-width:1040px;\n  }\n\n  \/* Reduced-motion users get instant full-bleed (no jumping animation) *\/\n  @media (prefers-reduced-motion: reduce) {\n    .ab-expand{\n      --ab-progress: 1 !important;\n      animation:none !important;\n    }\n  }\n\n  \/* Mobile *\/\n  @media (max-width: 900px){\n    .ab-wrap{\n      padding:56px 0;\n      --ab-inset: 16px;\n    }\n    .ab-section{ padding:0 16px; }\n    .ab-card{\n      padding:40px 28px;\n    }\n    .ab-title{\n      font-size:30px;\n      margin-bottom:16px !important;\n    }\n    .ab-lead{\n      font-size:16px;\n      white-space:normal;\n      margin-bottom:36px;\n    }\n    .ab-stats{\n      grid-template-columns:1fr 1fr;\n      gap:14px;\n      margin-bottom:40px;\n    }\n    .ab-body{\n      grid-template-columns:1fr;\n      gap:0;\n    }\n    .ab-body p{\n      font-size:15px;\n      line-height:1.6;\n      margin-bottom:16px;\n    }\n    .ab-offers{\n      grid-template-columns:1fr;\n      margin-top:32px;\n    }\n    .ab-closing{\n      font-size:18px;\n      margin-top:36px;\n    }\n  }\n<\/style>\n\n<section class=\"ab-wrap\">\n  <div class=\"ab-expand\">\n    <div class=\"ab-card\">\n\n      <p class=\"ab-eyebrow\">\u00dcber uns<\/p>\n      <h2 class=\"ab-title\">SidelaneAI<\/h2>\n      <p class=\"ab-lead\">Die AI-Plattform f\u00fcr die skalierbare Erstellung von Fashion-, Beauty- und Lifestyle-Content.<\/p>\n\n      <!-- Animated KPI band -->\n      <div class=\"ab-stats\" id=\"abStats\">\n        <div class=\"ab-stat ab-stat-clickable\" id=\"rcOpen\" role=\"button\" tabindex=\"0\" aria-label=\"Rechenbeispiel \u00f6ffnen\">\n          <div class=\"ab-stat-pre\">bis zu<\/div>\n          <div class=\"ab-stat-num\" data-to=\"90\" data-suffix=\" %\">0 %<\/div>\n          <div class=\"ab-stat-label\">Kostenreduktion gegen\u00fcber klassischen Shootings<\/div>\n          <span class=\"ab-stat-plus\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\"><path d=\"M12 5v14\"\/><path d=\"M5 12h14\"\/><\/svg><\/span>\n        <\/div>\n        <div class=\"ab-stat\">\n          <div class=\"ab-stat-pre\">bis zu<\/div>\n          <div class=\"ab-stat-num\" data-to=\"10\" data-suffix=\"\u00d7\">0\u00d7<\/div>\n          <div class=\"ab-stat-label\">schnellere Produktion<\/div>\n        <\/div>\n        <div class=\"ab-stat\">\n          <div class=\"ab-stat-pre\">&nbsp;<\/div>\n          <div class=\"ab-stat-num\" data-to=\"200\" data-suffix=\"+\">0+<\/div>\n          <div class=\"ab-stat-label\">fertige AI-Avatare zur direkten Auswahl<\/div>\n        <\/div>\n        <div class=\"ab-stat\">\n          <div class=\"ab-stat-pre\">&nbsp;<\/div>\n          <div class=\"ab-stat-num\" data-to=\"100\" data-suffix=\" %\">0 %<\/div>\n          <div class=\"ab-stat-label\">Brand-Konsistenz \u00fcber alle Produktionen<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Two balanced columns -->\n      <div class=\"ab-body\">\n\n        <div class=\"ab-col\">\n          <p>Brands und Unternehmen erstellen realistische Bild- und Videoinhalte f\u00fcr E-Commerce, Kampagnen, Lookbooks, Social Media und weitere digitale Kan\u00e4le, wahlweise mit AI-Twins realer Models oder mit vollst\u00e4ndig digitalen AI-Avataren.<\/p>\n          <p>Je nach Anforderung und Produktionsumfang sparen sie bis zu 90 % der Kosten gegen\u00fcber konventionellen Shootings und Produktionen, bei gleichzeitig deutlich k\u00fcrzeren Produktionszeiten und skalierbaren Content-Mengen.<\/p>\n          <p>AI-Twins basieren auf realen Models, Schauspielern, Musikern, Creators und anderen Talents. Ihre Nutzung erfolgt ausschlie\u00dflich projektbezogen und auf Grundlage der jeweils erforderlichen Freigaben und Nutzungsrechte. \u00dcber unser Netzwerk lassen sich sowohl Models von mf-mgmt als auch externe Models unserer Partneragenturen anfragen und buchen.<\/p>\n        <\/div>\n\n        <div class=\"ab-col\">\n          <p>F\u00fcr Produktionen mit vollst\u00e4ndig digitalen Models stehen \u00fcber 250 bereits erstellte AI-Avatare zur direkten Auswahl bereit. Dar\u00fcber hinaus k\u00f6nnen Kunden eigene AI-Avatare nach ihren Vorstellungen erstellen und dabei Aussehen, Typ, Alter, Stil und weitere Merkmale definieren. Die so entstehenden konsistenten AI-Avatare lassen sich anschlie\u00dfend f\u00fcr unterschiedliche Produktionen und Content-Formate einsetzen.<\/p>\n          <p>Unsere Plattform verbindet Casting, Rechte- und Freigabeprozesse, Content-Generierung und Projektverwaltung in einem zentralen Workflow. Kunden entscheiden selbst, welche AI-Twins oder AI-Avatare sie einsetzen, welche Inhalte sie erstellen und in welchem Umfang diese genutzt werden sollen.<\/p>\n        <\/div>\n\n      <\/div>\n\n      <!-- Studio \/ Enterprise -->\n      <div class=\"ab-offers\">\n        <div class=\"ab-offer\">\n          <h3>SidelaneAI Studio<\/h3>\n          <p>Self-Service-L\u00f6sung f\u00fcr kleinere und standardisierte Produktionen.<br>Direkt in der Plattform, ohne Umwege.<\/p>\n          <span class=\"reveal\" data-launch=\"2026-09-16T12:00:00+02:00\">\n            <a class=\"ab-cta reveal-live\" href=\"https:\/\/studio.mf-mgmt.com\/register\" target=\"_blank\" rel=\"noopener noreferrer\">Jetzt ausprobieren <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg><\/a>\n            <span class=\"reveal-locked\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>F\u00fcr Gesch\u00e4ftskunden verf\u00fcgbar in <b class=\"reveal-count\">\u2026<\/b><\/span>\n          <\/span>\n        <\/div>\n        <div class=\"ab-offer\">\n          <h3>SidelaneAI Enterprise<\/h3>\n          <p>Pers\u00f6nliche Betreuung f\u00fcr gr\u00f6\u00dfere Kunden und komplexere Produktionen, mit ma\u00dfgeschneiderten Workflows sowie passenden Credit- und Preisstrukturen.<\/p>\n          <div class=\"ab-contact\">\n            <div class=\"ab-contact-label\">Enterprise-Anfragen<\/div>\n            <a href=\"mailto:ai@mf-mgmt.com\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"m3 7 9 6 9-6\"\/><\/svg>ai@mf-mgmt.com<\/a>\n            <a href=\"tel:+494041308373\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>+49 (0) 40 41 30 83 73<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Closing -->\n      <p class=\"ab-closing\">So entsteht eine neue Form der Contentproduktion: schneller, skalierbarer und deutlich kosteneffizienter als klassische Produktionsprozesse. Mit klar geregelten Nutzungsrechten, transparenten Freigaben und kontrollierter Nutzung digitaler Identit\u00e4ten.<\/p>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ===== Rechenbeispiel-Modal ===== -->\n<div class=\"rc-overlay\" id=\"rcOverlay\" aria-hidden=\"true\">\n  <div class=\"rc-panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Rechenbeispiel\">\n    <button class=\"rc-close\" type=\"button\" aria-label=\"Schlie\u00dfen\">&times;<\/button>\n\n    <div class=\"rc-kicker\">Case Study<\/div>\n    <div class=\"rc-title\">30 SKUs, 180 Assets. Was kostet das?<\/div>\n    <p class=\"rc-sub\">Gleicher Content-Umfang, zwei Produktionswege. Beispielrechnung f\u00fcr eine Fashion-E-Commerce-Produktion mit AI-Avataren.<\/p>\n\n    <div class=\"rc-compare\">\n      <div class=\"rc-card\">\n        <div class=\"rc-card-label\">Klassisches Shooting<\/div>\n        <div class=\"rc-card-num\">4.250 \u20ac<\/div>\n        <div class=\"rc-card-meta\">1 Produktionstag<\/div>\n        <div class=\"rc-specs\">\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 4a2 2 0 0 0-1.2 3.6\"\/><path d=\"M12 7.4 3.8 13a1.6 1.6 0 0 0 .9 2.9h14.6a1.6 1.6 0 0 0 .9-2.9L12 7.4Z\"\/><\/svg><b>30<\/b><span>SKUs<\/span><\/div>\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"\/><\/svg><b>150<\/b><span>Bilder<\/span><\/div>\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m22 8-6 4 6 4V8Z\"\/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/><\/svg><b>30<\/b><span>Videos<\/span><\/div>\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23Z\"\/><\/svg><b>10<\/b><span>Outfits<\/span><\/div>\n        <\/div>\n        <div class=\"rc-card-tags\">Model \u00b7 Fotograf \u00b7 Studio \u00b7 Hair &amp; Make-up \u00b7 Styling \u00b7 Produktion<\/div>\n      <\/div>\n      <div class=\"rc-card is-ai\">\n        <div class=\"rc-card-label\">Mit SidelaneAI<\/div>\n        <div class=\"rc-card-num\">297 \u20ac<\/div>\n        <div class=\"rc-card-meta\">Produktion in wenigen Stunden<\/div>\n        <div class=\"rc-specs\">\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 4a2 2 0 0 0-1.2 3.6\"\/><path d=\"M12 7.4 3.8 13a1.6 1.6 0 0 0 .9 2.9h14.6a1.6 1.6 0 0 0 .9-2.9L12 7.4Z\"\/><\/svg><b>30<\/b><span>SKUs<\/span><\/div>\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"\/><\/svg><b>150<\/b><span>Bilder<\/span><\/div>\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m22 8-6 4 6 4V8Z\"\/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/><\/svg><b>30<\/b><span>Videos<\/span><\/div>\n          <div class=\"rc-spec\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23Z\"\/><\/svg><b>10<\/b><span>Outfits<\/span><\/div>\n        <\/div>\n        <div class=\"rc-card-tags\">AI-Avatare \u00b7 parallele Bild- und Video-Generierung<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"rc-result\">\n      <div><div class=\"rc-r-num\" data-count=\"93\" data-suf=\" %\">0 %<\/div><div class=\"rc-r-label\">weniger Produktionskosten<\/div><\/div>\n      <div><div class=\"rc-r-num\" data-count=\"3953\" data-suf=\" \u20ac\">0 \u20ac<\/div><div class=\"rc-r-label\">Ersparnis bei 180 Assets<\/div><\/div>\n      <div><div class=\"rc-r-num\" data-count=\"14\" data-suf=\"\u00d7\">0\u00d7<\/div><div class=\"rc-r-label\">kosteneffizienter<\/div><\/div>\n    <\/div>\n\n    <div class=\"rc-bars\">\n      <div class=\"rc-bar-row\">\n        <div class=\"rc-bar-name\">Konventionell<\/div>\n        <div class=\"rc-bar-track\"><div class=\"rc-bar-fill conv\" data-w=\"100%\"><\/div><\/div>\n        <div class=\"rc-bar-val\">4.250 \u20ac<\/div>\n      <\/div>\n      <div class=\"rc-bar-row is-ai\">\n        <div class=\"rc-bar-name\">SidelaneAI<\/div>\n        <div class=\"rc-bar-track\"><div class=\"rc-bar-fill ai\" data-w=\"7%\"><\/div><\/div>\n        <div class=\"rc-bar-val\">297 \u20ac<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"rc-math\">\n      <b>So entstehen die 297 \u20ac:<\/b> 150 Bilder \u00d7 1 Credit + 30 Videos \u00d7 5 Credits = <span class=\"rc-eq\">300 Credits \u00d7 0,99 \u20ac = 297 \u20ac<\/span>. Das Ergebnis: 10 Outfits werden zu 150 Bildern und 30 Videos.\n    <\/div>\n\n    <p class=\"rc-foot\">Beispielrechnung f\u00fcr eine Fashion-E-Commerce-Produktion mit 30 SKUs und AI-Avataren. Tats\u00e4chliche Kosten und Produktionszeiten k\u00f6nnen je nach Projekt und Anforderungen variieren.<\/p>\n  <\/div>\n<\/div>\n\n<script>\n  (function(){\n    var expand = document.querySelector('.ab-expand');\n    if (!expand) return;\n\n    var ticking = false;\n    var lastProgress = -1;\n\n    \/\/ Cubic ease-out \u2014 starts fast, decelerates at the end\n    function easeOutCubic(t){\n      return 1 - Math.pow(1 - t, 3);\n    }\n\n    function update(){\n      var rect = expand.getBoundingClientRect();\n      var vh = window.innerHeight || document.documentElement.clientHeight;\n      var startAt = vh * 0.70;\n      var endAt = vh * 0.25;\n      var rawProgress = (startAt - rect.top) \/ (startAt - endAt);\n      var clamped = Math.max(0, Math.min(1, rawProgress));\n      var eased = easeOutCubic(clamped);\n\n      var rounded = Math.round(eased * 1000) \/ 1000;\n      if (rounded !== lastProgress){\n        expand.style.setProperty('--ab-progress', rounded);\n        lastProgress = rounded;\n      }\n      ticking = false;\n    }\n\n    function onScroll(){\n      if (ticking) return;\n      ticking = true;\n      requestAnimationFrame(update);\n    }\n\n    update();\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onScroll, { passive: true });\n  })();\n\n  \/\/ \u2500\u2500 KPI count-up (einmalig, beim Sichtbarwerden der Leiste) \u2500\u2500\n  (function(){\n    var band = document.getElementById('abStats');\n    if (!band) return;\n    var nums = Array.prototype.slice.call(band.querySelectorAll('.ab-stat-num'));\n    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    function render(el, val){\n      var pre = el.getAttribute('data-prefix') || '';\n      var suf = el.getAttribute('data-suffix') || '';\n      el.textContent = pre + val + suf;\n    }\n    function animate(el){\n      var to = parseInt(el.getAttribute('data-to'), 10) || 0;\n      if (reduce){ render(el, to); return; }\n      var dur = 1400, start = null;\n      function ease(t){ return 1 - Math.pow(1 - t, 3); }\n      function step(ts){\n        if (start === null) start = ts;\n        var t = Math.min(1, (ts - start) \/ dur);\n        render(el, Math.round(ease(t) * to));\n        if (t < 1) requestAnimationFrame(step);\n      }\n      requestAnimationFrame(step);\n    }\n\n    var done = false;\n    function run(){ if (done) return; done = true; nums.forEach(animate); }\n\n    if ('IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e){ if (e.isIntersecting){ run(); io.disconnect(); } });\n      }, { threshold: 0.4 });\n      io.observe(band);\n    } else {\n      run();\n    }\n  })();\n\n  \/\/ \u2500\u2500 Rechenbeispiel-Modal: \u00f6ffnen \u00fcber das + an der Kachel, animierte Balken + Zahlen \u2500\u2500\n  (function(){\n    var openBtn = document.getElementById('rcOpen');\n    var overlay = document.getElementById('rcOverlay');\n    if (!openBtn || !overlay) return;\n    \/\/ Aus evtl. transformiertem\/geclipptem Kontext l\u00f6sen \u2192 an body h\u00e4ngen.\n    document.body.appendChild(overlay);\n    var closeBtn = overlay.querySelector('.rc-close');\n    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    function countUp(el){\n      var to = parseFloat(el.getAttribute('data-count')) || 0;\n      var suf = el.getAttribute('data-suf') || '';\n      if (reduce){ el.textContent = to.toLocaleString('de-DE') + suf; return; }\n      var dur = 1100, start = null;\n      function ease(t){ return 1 - Math.pow(1 - t, 3); }\n      function step(ts){\n        if (start === null) start = ts;\n        var t = Math.min(1, (ts - start) \/ dur);\n        el.textContent = Math.round(ease(t) * to).toLocaleString('de-DE') + suf;\n        if (t < 1) requestAnimationFrame(step);\n      }\n      requestAnimationFrame(step);\n    }\n    function animateIn(){\n      overlay.querySelectorAll('.rc-bar-fill').forEach(function(el){\n        var w = el.getAttribute('data-w') || '0';\n        if (reduce){ el.style.width = w; } else { requestAnimationFrame(function(){ el.style.width = w; }); }\n      });\n      overlay.querySelectorAll('[data-count]').forEach(countUp);\n    }\n    function open(){\n      \/\/ Zustand zur\u00fccksetzen, damit die Animation bei jedem \u00d6ffnen neu l\u00e4uft\n      overlay.querySelectorAll('.rc-bar-fill').forEach(function(el){ el.style.width = '0'; });\n      overlay.querySelectorAll('[data-count]').forEach(function(el){ el.textContent = '0' + (el.getAttribute('data-suf') || ''); });\n      overlay.classList.add('is-open');\n      overlay.setAttribute('aria-hidden', 'false');\n      document.body.style.overflow = 'hidden';\n      setTimeout(animateIn, 140);\n    }\n    function close(){\n      overlay.classList.remove('is-open');\n      overlay.setAttribute('aria-hidden', 'true');\n      document.body.style.overflow = '';\n    }\n    openBtn.addEventListener('click', open);\n    openBtn.addEventListener('keydown', function(e){ if (e.key === 'Enter' || e.key === ' '){ e.preventDefault(); open(); } });\n    closeBtn.addEventListener('click', close);\n    overlay.addEventListener('click', function(e){ if (e.target === overlay) close(); });\n    window.addEventListener('keydown', function(e){ if (e.key === 'Escape' && overlay.classList.contains('is-open')) close(); });\n  })();\n\n  \/\/ \u2500\u2500 Wiederverwendbare Reveal-\/Countdown-Logik \u2500\u2500\n  \/\/ Jedes .reveal[data-launch] zeigt vor dem Launch den .reveal-locked-Platzhalter\n  \/\/ (mit Live-Countdown), ab dem Launch-Zeitpunkt den .reveal-live-Inhalt.\n  (function(){\n    var items = Array.prototype.slice.call(document.querySelectorAll('.reveal[data-launch]'))\n      .map(function(el){ return { el: el, target: new Date(el.getAttribute('data-launch')).getTime(), count: el.querySelector('.reveal-count') }; })\n      .filter(function(it){ return !isNaN(it.target); });\n    if (!items.length) return;\n\n    function fmt(ms){\n      \/\/ 12 Std oder mehr \u2192 nur Tage anzeigen\n      if (ms >= 12 * 3600 * 1000){\n        var days = Math.round(ms \/ 86400000);\n        if (days < 1) days = 1;\n        return days + (days === 1 ? ' Tag' : ' Tagen');\n      }\n      \/\/ weniger als 12 Std \u2192 Stunden und Minuten (keine Sekunden)\n      var totalMin = Math.floor(ms \/ 60000);\n      var h = Math.floor(totalMin \/ 60);\n      var m = totalMin - h * 60;\n      return (h > 0 ? h + ' Std ' + m + ' Min' : m + ' Min');\n    }\n    function tick(){\n      var now = Date.now(), pending = false;\n      items.forEach(function(it){\n        var rem = it.target - now;\n        if (rem <= 0){\n          it.el.classList.add('is-live');\n        } else {\n          it.el.classList.remove('is-live');\n          if (it.count) it.count.textContent = fmt(rem);\n          pending = true;\n        }\n      });\n      return pending;\n    }\n    \/\/ Nur im Minutentakt aktualisieren (kein sek\u00fcndliches Ticken).\n    if (tick()){\n      var iv = setInterval(function(){ if (!tick()) clearInterval(iv); }, 60000);\n    }\n  })();\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div><div class=\"vc_row wpb_row vc_row-fluid vc_custom_1787755023042\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><p style=\"font-size: 40px;color: #0a0a0a;line-height: 50px;text-align: center;font-family:Roboto;font-weight:500;font-style:normal\" class=\"vc_custom_heading\" >we make your vision come to life<\/p>\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- =====================================================================\n     A(i)GENCY STUDIO \u2014 Team\n     Self-contained block for WordPress \"Custom HTML\".\n     Bild oben \u00b7 Name \u00b7 Jobtitel, zentriert. Mobile untereinander.\n     ===================================================================== -->\n\n<style>\n  .team-wrap{\n    background:#fff;\n    padding:80px 0;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n    color:#141210;\n    -webkit-font-smoothing:antialiased;\n  }\n  .team-grid{\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:center;\n    align-items:flex-start;\n    gap:56px;\n    max-width:900px;\n    margin:0 auto;\n    padding:0 24px;\n    box-sizing:border-box;\n  }\n  .team-member{\n    width:320px;\n    max-width:100%;\n    text-align:center;\n  }\n  .team-member img{\n    width:100%;\n    max-width:224px;      \/* 30% kleiner als die 320px-Karte *\/\n    margin:0 auto;\n    aspect-ratio:3 \/ 4;\n    object-fit:cover;\n    display:block;\n    border-radius:24px;\n  }\n  .team-member h3{\n    margin:22px 0 6px;\n    font-size:22px;\n    font-weight:600;\n    letter-spacing:-0.01em;\n    line-height:1.2;\n    color:#141210;\n  }\n  .team-member span{\n    display:block;\n    font-size:15px;\n    line-height:1.5;\n    color:#5A554F;\n  }\n\n  @media (max-width: 640px){\n    .team-wrap{ padding:56px 0; }\n    .team-grid{ gap:40px; }\n    .team-member{ width:100%; }\n    .team-member h3{ font-size:20px; }\n    .team-member img{ max-width:300px; border-radius:16px; }\n  }\n<\/style>\n\n<section class=\"team-wrap\">\n  <div class=\"team-grid\">\n\n    <div class=\"team-member\">\n      <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2025\/12\/michael-portrait.jpg\" alt=\"Michael Fassl\">\n      <h3>Michael Fassl<\/h3>\n      <span>Co-Founder<br>Marketing and Business Development<\/span>\n    <\/div>\n\n    <div class=\"team-member\">\n      <img decoding=\"async\" src=\"https:\/\/mf-mgmt.com\/wp-content\/uploads\/2026\/03\/Tobi-studio-portrait-e1774026038140.png\" alt=\"Tobias Dick\">\n      <h3>Tobias Dick<\/h3>\n      <span>Co-Founder<br>AI Artist | Photographer | IT Developer<\/span>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"SidelaneAI was wir m\u00f6glich machenAI Produktions Plattform. F\u00fcr Fashion &amp; Beauty Brands.was wir m\u00f6glich machenAI Produktions Plattform. F\u00fcr Fashion &amp; Beauty Brands. SidelaneAI AI-Models.Digital inszeniert.Alles in einer Plattform. Lizenzierte Agenturmodels und AI-Avatare, digital produziert. Buyouts und Vertr\u00e4ge inklusive, alles in einem Prozess. Jetzt ausprobieren \u203a F\u00fcr Gesch\u00e4ftskunden verf\u00fcgbar in \u2026 Wie es funktioniert Eine Plattform, drei S\u00e4ulen. Vom Model bis [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9094","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/pages\/9094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/comments?post=9094"}],"version-history":[{"count":202,"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/pages\/9094\/revisions"}],"predecessor-version":[{"id":9641,"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/pages\/9094\/revisions\/9641"}],"wp:attachment":[{"href":"https:\/\/mf-mgmt.com\/en\/wp-json\/wp\/v2\/media?parent=9094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}