<turbo-stream action="replace" target="more_stories"><template>
  <turbo-frame class="contents" id="more_stories">
      <div class="w-80 flex-none snap-start py-2 first:pl-1 last:pr-1 hover-device:w-auto">
        <article class="group flex size-full flex-col overflow-hidden rounded-2xl bg-base-100 shadow-sm ring-1 ring-base-300/40 transition-all hover:bg-base-200/40 hover:shadow-md">

  <a data-turbo-frame="_top" class="flex flex-1 flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60" href="https://www.wearedevelopers.com/companies/3297-bwi-gmbh/stories/1633-coach-robert-turbanisch-vorleben-ist-das-zentrale-element-im-arbeitsalltag">
    <div class="flex flex-1 flex-col px-6 pb-4 pt-6">
      <div class="mb-2 flex items-center text-xs text-base-content/60">
        <svg class="mr-1 size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg>
        almost 3 years ago
      </div>

      <h3 class="mb-2 line-clamp-2 font-display text-lg leading-snug font-semibold text-balance text-base-content">
        -Coach Robert Turbanisch: „Vorleben ist das zentrale Element im Arbeitsalltag“
      </h3>

        <p class="text-base text-base-content/70 line-clamp-3">
          Grenzen überwinden, neue Abläufe trainieren und im Geist Erdachtes ins eigene Verhalten umsetzen – das ist die Kunst im Taekwondo. Robert Turbanisch übt diesen Sport mit Begeisterung aus und ermutigt im Berufsalltag als Trainer und Coach bei der BWI seine Kolleg*innen: „Man kann nicht Nicht-Vorleben und Vorleben auch nicht „üben“ – wohl aber das eigene Verhalten trainieren. Warum #Vorleben für ihn das zentrale Element im Arbeitsalltag ist, verrät Robert im Video.
        </p>

      <div class="flex-1"></div>
    </div>
</a>
    <div class="aspect-video" data-controller="social-content-gate gated-video-player" data-action="social-content-gate:allow-&gt;gated-video-player#mount" data-gated-video-player-source-value="aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj02ZzY0QWplcVpTdw==">
  <div class="flex size-full items-center justify-center bg-base-300/50 text-center text-base-content" data-social-content-gate-target="content">
    <div class="flex flex-col items-center gap-3 px-4 sm:px-6">
      <p class="text-sm text-base-content/65">This content is not shown due to your cookie preferences.</p>

      <button type="button" class="btn gap-2 btn-primary btn-sm sm:btn-md" data-action="click->social-content-gate#play">
        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd"></path></svg> Load video
      </button>

      <button
        type="button"
        class="text-sm text-base-content/55 underline-offset-4 transition-colors hover:text-base-content hover:underline"
        data-controller="truendo"
        data-action="click->truendo#manage"
      >
        Cookie settings
      </button>
    </div>
  </div>

  
  <template data-gated-video-player-target="template">
    <media-player
  data-controller="video-player"
  data-video-player-autostart-value="false"
  data-video-player-timestamp-value="0"
  class="ring-media-focus aspect-video size-full overflow-hidden bg-slate-950 font-sans text-white data-[focus]:ring-4 leading-none @container"
  crossorigin
  playsinline
>
  <media-provider>
    <media-poster
      class="absolute inset-0 block size-full opacity-0 transition-opacity data-visible:opacity-100 [&amp;&gt;img]:h-full [&amp;&gt;img]:w-full [&amp;&gt;img]:object-cover"
      alt="Video thumbnail"
      aria-hidden="true"
      role="presentation"
    ></media-poster>



    <div
      class="
        media-loading:opacity-100 pointer-events-none absolute inset-0 z-30 flex items-center justify-center opacity-0 transition-opacity media-buffering:opacity-100
        media-waiting:opacity-100
      "
    >
      <div class="rounded-md bg-black/30 p-3 backdrop-blur-sm">
        <div class="size-8 animate-spin rounded-full border-4 border-white/30 border-t-white"></div>
      </div>
    </div>
  </media-provider>

  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-[55%] bg-linear-to-t from-black/65 via-black/28 to-transparent"></div>


    <!-- Gestures -->
    <media-gesture class="absolute inset-0 z-0 block size-full" event="pointerup" action="toggle:paused"></media-gesture>
    <media-gesture class="absolute inset-0 z-0 block size-full" event="dblpointerup" action="toggle:fullscreen"></media-gesture>
    <media-gesture class="absolute top-0 left-0 z-10 block h-full w-1/5" event="dblpointerup" action="seek:-10"></media-gesture>
    <media-gesture class="absolute top-0 right-0 z-10 block h-full w-1/5" event="dblpointerup" action="seek:10"></media-gesture>

  <media-captions
    class="
      absolute inset-x-0 bottom-4 z-10 hidden text-center text-sm font-semibold text-pretty break-words transition-[opacity,bottom] duration-300 select-none @lg:bottom-8
      @lg:text-lg @2xl:bottom-12 @2xl:text-xl media-controls:bottom-[100px] media-muted:block media-preview:opacity-0 [&_[data-part='cue']]:inline-block
      [&_[data-part='cue']]:rounded-lg [&_[data-part='cue']]:bg-black/55 [&_[data-part='cue']]:px-2.5 [&_[data-part='cue']]:py-1 [&_[data-part='cue']]:backdrop-blur-md
    "
  ></media-captions>

  <!-- Controls -->
  <media-controls class="pointer-events-none absolute inset-0 z-10 flex size-full flex-col opacity-0 transition-opacity media-controls:pointer-events-auto media-controls:opacity-100">
    <div class="pointer-events-none flex-1"></div>

    <media-controls-group class="flex w-full items-center px-0">
      <!-- Time Slider -->
      <media-time-slider  class="group relative mx-[7.5px] inline-flex h-10 w-full cursor-pointer touch-none items-center outline-none select-none">
        <media-slider-chapters class="relative flex size-full items-center rounded-[1px]">
          <template>
            <!-- Slider Chapter -->
            <div class="last-child:mr-0 relative mr-0.5 flex size-full items-center rounded-[1px]" style="contain: layout style">
              <!-- Slider Chapter Track -->
              <div class="ring-media-focus relative z-0 h-1 w-full rounded-full bg-white/20 group-data-[focus]:ring-[3px]">
                <!-- Playback progress -->
                <div class="absolute z-5 h-full w-[var(--chapter-fill)] rounded-full bg-brand will-change-[width]"></div>
              </div>
            </div>
          </template>
        </media-slider-chapters>

        <!-- Slider Thumb -->
        <div
          class="
            absolute top-1/2 left-[var(--slider-fill)] z-20 size-[15px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 ring-2 ring-black/30 backdrop-blur-md
            transition-opacity will-change-[left] group-data-[active]:opacity-100 group-data-[dragging]:ring-4
          "
        ></div>

        <!-- Slider Preview (shows on hover) -->
        <media-slider-preview class="pointer-events-none opacity-0 transition-opacity duration-200 data-visible:opacity-100" offset="6">
          <div
            class="
              mx-2 flex max-w-[280px] flex-col items-center rounded-[1.25rem] bg-black/55 px-4 py-2 text-sm font-medium text-white shadow-lg ring-1 shadow-black/25
              ring-white/10 backdrop-blur-md
            "
          >
            <!-- Chapter Title (if chapters are available) -->

            <div class="vds-slider-chapter-title mb-1 w-full text-center text-balance" data-part="chapter-title"></div>

            <!-- Timestamp -->
            <media-slider-value class="font-mono text-white"></media-slider-value>
          </div>
        </media-slider-preview>
      </media-time-slider>
    </media-controls-group>

    <media-controls-group class="-mt-2 flex w-full items-center px-3 pb-3">
      <!-- Play Button -->
      <media-tooltip>
        <media-tooltip-trigger>
          <media-play-button
            class="
              ring-media-focus relative inline-flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/55 shadow-lg ring-1 shadow-black/25 ring-white/10
              backdrop-blur-md transition-colors outline-none hover:bg-black/65 data-[focus]:ring-4
            "
          >
            <svg class="media-paused:block hidden size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd"></path></svg>
            <svg class="media-paused:hidden size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd"></path></svg>
          </media-play-button>
        </media-tooltip-trigger>

        <media-tooltip-content
          class="
            animate-out fade-out slide-out-to-bottom-2 data-visible:animate-in data-visible:fade-in data-visible:slide-in-from-bottom-4 z-10 rounded-full bg-black/55 px-3 py-1
            text-sm font-medium text-white ring-1 ring-white/10 backdrop-blur-md
          "
          placement="top start"
          offset="30"
        >
          <span class="hidden media-paused:block">Play</span>
          <span class="media-paused:hidden">Pause</span>
        </media-tooltip-content>
      </media-tooltip>

      <!-- Time Group -->
      <div class="ml-1.5 flex h-10 items-center rounded-full bg-black/55 px-3 font-mono text-sm font-bold shadow-lg ring-1 shadow-black/25 ring-white/10 backdrop-blur-md">
        <media-time type="current" class="hidden media-started:block"></media-time>

        <div class="mx-1 hidden text-white/80 media-started:block">|</div>

        <media-time type="duration"></media-time>
      </div>

      <div class="flex-1"></div>

      <!-- Mute Button -->
      <media-tooltip>
        <media-tooltip-trigger>
          <media-mute-button
            class="
              ring-media-focus group relative mr-1.5 inline-flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/55 shadow-lg ring-1 shadow-black/25
              ring-white/10 backdrop-blur-md transition-colors outline-none hover:bg-black/65 data-[focus]:ring-4
            "
          >
            <svg class="hidden size-5 group-data-[state=&#39;muted&#39;]:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM17.78 9.22a.75.75 0 1 0-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 1 0 1.06-1.06L20.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-1.72 1.72-1.72-1.72Z"></path></svg>
            <svg class="hidden size-5 group-data-[state=&#39;low&#39;]:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z"></path><path d="M15.932 7.757a.75.75 0 0 1 1.061 0 6 6 0 0 1 0 8.486.75.75 0 0 1-1.06-1.061 4.5 4.5 0 0 0 0-6.364.75.75 0 0 1 0-1.06Z"></path></svg>
            <svg class="hidden size-5 group-data-[state=&#39;high&#39;]:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z"></path><path d="M15.932 7.757a.75.75 0 0 1 1.061 0 6 6 0 0 1 0 8.486.75.75 0 0 1-1.06-1.061 4.5 4.5 0 0 0 0-6.364.75.75 0 0 1 0-1.06Z"></path></svg>
          </media-mute-button>
        </media-tooltip-trigger>

        <media-tooltip-content
          class="
            animate-out fade-out slide-out-to-bottom-2 data-visible:animate-in data-visible:fade-in data-visible:slide-in-from-bottom-4 z-10 rounded-full bg-black/55 px-3 py-1
            text-sm font-medium text-white ring-1 ring-white/10 backdrop-blur-md
          "
          placement="top"
          offset="30"
        >
          <span class="media-muted:hidden">Mute</span>
          <span class="hidden media-muted:block">Unmute</span>
        </media-tooltip-content>
      </media-tooltip>

      <!-- Fullscreen Button -->
      <media-tooltip>
        <media-tooltip-trigger>
          <media-fullscreen-button
            class="
              ring-media-focus group relative inline-flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/55 shadow-lg ring-1 shadow-black/25
              ring-white/10 backdrop-blur-md transition-colors outline-none hover:bg-black/65 data-[focus]:ring-4
            "
          >
            <svg class="media-fullscreen:hidden size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M15 3.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V5.56l-3.97 3.97a.75.75 0 1 1-1.06-1.06l3.97-3.97h-2.69a.75.75 0 0 1-.75-.75Zm-12 0A.75.75 0 0 1 3.75 3h4.5a.75.75 0 0 1 0 1.5H5.56l3.97 3.97a.75.75 0 0 1-1.06 1.06L4.5 5.56v2.69a.75.75 0 0 1-1.5 0v-4.5Zm11.47 11.78a.75.75 0 1 1 1.06-1.06l3.97 3.97v-2.69a.75.75 0 0 1 1.5 0v4.5a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h2.69l-3.97-3.97Zm-4.94-1.06a.75.75 0 0 1 0 1.06L5.56 19.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"></path></svg>
            <svg class="media-fullscreen:block hidden size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" version="1.1" fill="currentColor" stroke="none" aria-hidden="true"><path fill-rule="evenodd" d="M3.22 3.22a.75.75 0 0 1 1.06 0l3.97 3.97V4.5a.75.75 0 0 1 1.5 0V9a.75.75 0 0 1-.75.75H4.5a.75.75 0 0 1 0-1.5h2.69L3.22 4.28a.75.75 0 0 1 0-1.06Zm17.56 0a.75.75 0 0 1 0 1.06l-3.97 3.97h2.69a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75V4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0ZM3.75 15a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-2.69l-3.97 3.97a.75.75 0 0 1-1.06-1.06l3.97-3.97H4.5a.75.75 0 0 1-.75-.75Zm10.5 0a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.97 3.97a.75.75 0 1 1-1.06 1.06l-3.97-3.97v2.69a.75.75 0 0 1-1.5 0V15Z" clip-rule="evenodd"></path></svg>
          </media-fullscreen-button>
        </media-tooltip-trigger>

        <media-tooltip-content
          class="
            animate-out fade-out slide-out-to-bottom-2 data-visible:animate-in data-visible:fade-in data-visible:slide-in-from-bottom-4 z-10 rounded-full bg-black/55 px-3 py-1
            text-sm font-medium text-white ring-1 ring-white/10 backdrop-blur-md
          "
          placement="top end"
          offset="30"
        >
          <span class="media-fullscreen:hidden">Enter Fullscreen</span>
          <span class="hidden media-fullscreen:block">Exit Fullscreen</span>
        </media-tooltip-content>
      </media-tooltip>
    </media-controls-group>
  </media-controls>
</media-player>

  </template>

</div>

</article>

      </div>
</turbo-frame></template></turbo-stream>
<turbo-stream action="remove" target="auto_load_trigger"></turbo-stream>

<turbo-stream action="remove" target="load_more_stories_button"></turbo-stream>
