{"id":633,"date":"2026-06-25T14:55:31","date_gmt":"2026-06-25T14:55:31","guid":{"rendered":"https:\/\/echtjetzt.digital\/?p=633"},"modified":"2026-06-25T15:34:04","modified_gmt":"2026-06-25T15:34:04","slug":"was-sind-wir","status":"publish","type":"post","link":"https:\/\/echtjetzt.digital\/index.php\/2026\/06\/25\/was-sind-wir\/","title":{"rendered":"Was sind wir"},"content":{"rendered":"\n<div class=\"ben-browser-beitrag\">\n\n  <!-- Linke Seite: Bild -->\n  <div class=\"ben-bild-seite\">\n    <img decoding=\"async\"\n      src=\"https:\/\/echtjetzt.digital\/media\/mein_film\/bild.jpg\"\n      alt=\"Beitragsbild\"\n    >\n\n    <div class=\"ben-bild-text\">\n      <div class=\"ben-klein\">BEN DER SCHWEIZER<\/div>\n      <h1>Always My Choice<\/h1>\n      <p>Die Seite steht. Der Film l\u00e4uft. Die Kamera sucht den Moment.<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- Rechte Seite: Video -->\n  <div class=\"ben-video-seite\">\n\n    <video\n      id=\"benFilmVideo\"\n      class=\"ben-film-video\"\n      poster=\"https:\/\/echtjetzt.digital\/media\/mein_film\/bild.jpg\"\n      playsinline\n      preload=\"metadata\"\n      controls\n    >\n      <source src=\"https:\/\/echtjetzt.digital\/media\/mein_film\/film.mp4\" type=\"video\/mp4\">\n      Dein Browser kann dieses Video nicht abspielen.\n    <\/video>\n\n    <div class=\"ben-kamera\" id=\"benKamera\">\n      <div class=\"kamera-body\">\n        <div class=\"kamera-linse\"><\/div>\n        <div class=\"kamera-punkt\"><\/div>\n      <\/div>\n    <\/div>\n\n    <button class=\"ben-start-ton\" id=\"benStartTon\">\n      Film mit Ton starten\n    <\/button>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* \n  Wichtig:\n  Diese H\u00f6he zieht das Men\u00fc ab.\n  Wenn dein Men\u00fc z.B. 80px hoch ist, stelle hier 80px ein.\n*\/\n.ben-browser-beitrag {\n  --ben-menu-height: 90px;\n\n  width: 100%;\n  height: calc(100svh - var(--ben-menu-height));\n  min-height: 520px;\n\n  display: grid;\n  grid-template-columns: 45% 55%;\n\n  background: #111;\n  overflow: hidden;\n  font-family: Georgia, \"Times New Roman\", serif;\n}\n\n\/* Linke Bildseite *\/\n.ben-bild-seite {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n  background: #ddd;\n}\n\n.ben-bild-seite img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n\/* dunkler Verlauf \u00fcber Bild *\/\n.ben-bild-seite::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.68)),\n    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.12), transparent 40%);\n  pointer-events: none;\n}\n\n.ben-bild-text {\n  position: absolute;\n  left: clamp(22px, 5vw, 70px);\n  bottom: clamp(28px, 6vw, 80px);\n  max-width: 440px;\n  color: white;\n  z-index: 2;\n}\n\n.ben-klein {\n  font-size: 12px;\n  letter-spacing: 4px;\n  margin-bottom: 24px;\n  opacity: 0.85;\n}\n\n.ben-bild-text h1 {\n  margin: 0 0 18px 0;\n  font-weight: normal;\n  font-size: clamp(38px, 6vw, 82px);\n  line-height: 0.9;\n}\n\n.ben-bild-text p {\n  margin: 0;\n  font-size: clamp(17px, 2vw, 24px);\n  line-height: 1.35;\n}\n\n\/* Rechte Videoseite *\/\n.ben-video-seite {\n  position: relative;\n  height: 100%;\n  background: #050505;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ben-film-video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n\/* Filmlook *\/\n.ben-video-seite::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), transparent 35%),\n    linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0.35));\n  pointer-events: none;\n}\n\n\/* Kamera *\/\n.ben-kamera {\n  position: absolute;\n  left: 8%;\n  bottom: 9%;\n  width: 130px;\n  height: 82px;\n  z-index: 5;\n  transform: rotate(-18deg);\n  animation: kameraAtmet 5s ease-in-out infinite;\n  cursor: pointer;\n}\n\n.kamera-body {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(145deg, #2b2b2b, #050505);\n  border-radius: 14px;\n  position: relative;\n  box-shadow: 0 20px 45px rgba(0,0,0,0.6);\n}\n\n.kamera-body::before {\n  content: \"\";\n  position: absolute;\n  left: 18px;\n  top: -15px;\n  width: 48px;\n  height: 20px;\n  background: #171717;\n  border-radius: 8px 8px 0 0;\n}\n\n.kamera-linse {\n  position: absolute;\n  right: 18px;\n  top: 17px;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: radial-gradient(circle, #777 0%, #222 42%, #000 72%);\n  border: 4px solid #333;\n}\n\n.kamera-punkt {\n  position: absolute;\n  left: 20px;\n  top: 27px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.5);\n}\n\n@keyframes kameraAtmet {\n  0%, 100% {\n    transform: rotate(-18deg) translateY(0);\n  }\n  50% {\n    transform: rotate(-12deg) translateY(-10px);\n  }\n}\n\n.ben-kamera.wackelt {\n  animation: kameraWurf 0.65s ease-in-out;\n}\n\n@keyframes kameraWurf {\n  0% {\n    transform: rotate(-18deg) translate(0,0);\n  }\n  25% {\n    transform: rotate(20deg) translate(35px,-22px);\n  }\n  50% {\n    transform: rotate(-32deg) translate(-25px,16px);\n  }\n  100% {\n    transform: rotate(-18deg) translate(0,0);\n  }\n}\n\n\/* Ton-Button *\/\n.ben-start-ton {\n  position: absolute;\n  right: 28px;\n  bottom: 28px;\n  z-index: 10;\n\n  border: 1px solid rgba(255,255,255,0.8);\n  background: rgba(0,0,0,0.55);\n  color: white;\n\n  padding: 14px 24px;\n  border-radius: 999px;\n  font-size: 16px;\n  cursor: pointer;\n\n  backdrop-filter: blur(8px);\n}\n\n.ben-start-ton:hover {\n  background: rgba(255,255,255,0.18);\n}\n\n.ben-start-ton.ausblenden {\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.5s ease;\n}\n\n\/* Mobiltelefon *\/\n@media (max-width: 850px) {\n  .ben-browser-beitrag {\n    --ben-menu-height: 80px;\n\n    grid-template-columns: 1fr;\n    height: calc(100svh - var(--ben-menu-height));\n    min-height: 620px;\n  }\n\n  .ben-bild-seite {\n    height: 42%;\n  }\n\n  .ben-video-seite {\n    height: 58%;\n  }\n\n  .ben-bild-text {\n    left: 22px;\n    bottom: 24px;\n    max-width: 86%;\n  }\n\n  .ben-klein {\n    margin-bottom: 12px;\n  }\n\n  .ben-kamera {\n    width: 92px;\n    height: 58px;\n    left: 6%;\n    bottom: 9%;\n  }\n\n  .kamera-linse {\n    width: 34px;\n    height: 34px;\n    top: 12px;\n    right: 12px;\n  }\n\n  .kamera-punkt {\n    width: 12px;\n    height: 12px;\n    top: 22px;\n  }\n\n  .ben-start-ton {\n    right: 18px;\n    bottom: 18px;\n    font-size: 15px;\n    padding: 12px 19px;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const video = document.getElementById(\"benFilmVideo\");\n  const startTon = document.getElementById(\"benStartTon\");\n  const kamera = document.getElementById(\"benKamera\");\n\n  startTon.addEventListener(\"click\", function () {\n    video.muted = false;\n    video.volume = 1;\n    video.play();\n    startTon.classList.add(\"ausblenden\");\n  });\n\n  kamera.addEventListener(\"click\", function () {\n    kamera.classList.remove(\"wackelt\");\n    void kamera.offsetWidth;\n    kamera.classList.add(\"wackelt\");\n  });\n\n  video.addEventListener(\"pause\", function () {\n    if (video.currentTime > 0 && !video.ended) {\n      startTon.classList.remove(\"ausblenden\");\n      startTon.textContent = \"Film weiter mit Ton\";\n    }\n  });\n\n  video.addEventListener(\"ended\", function () {\n    startTon.classList.remove(\"ausblenden\");\n    startTon.textContent = \"Film nochmals mit Ton starten\";\n  });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>BEN DER SCHWEIZER Always My Choice Die Seite steht. Der Film l\u00e4uft. Die Kamera sucht den Moment. Dein Browser kann dieses Video nicht abspielen. Film mit Ton starten<\/p>\n","protected":false},"author":1,"featured_media":644,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,38],"tags":[88,87],"class_list":["post-633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-movies","category-meine-weissheiten","tag-meine-meinung","tag-verantwortung-tragen"],"_links":{"self":[{"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/posts\/633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/comments?post=633"}],"version-history":[{"count":9,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/posts\/633\/revisions"}],"predecessor-version":[{"id":645,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/posts\/633\/revisions\/645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/media\/644"}],"wp:attachment":[{"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/media?parent=633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/categories?post=633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/echtjetzt.digital\/index.php\/wp-json\/wp\/v2\/tags?post=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}