/* Focustrend – Seite „Video & Animation“ /video-animation/ (16.10.2026) Gehört zu wp-content/mu-plugins/ft-video.php + ft-video/seite.php + ftv.js. Regeln: Bewegung nur über transform/opacity; Platz für alles Bewegte ist fest reserviert (Wechselwort, Showreel, Format-Wechsler, Klappe, Ablauf). Dauer-Animationen laufen nur, solange ihr Abschnitt zu sehen ist (.ist-an setzt ftv.js) – schont den Speicher am iPhone. Am Handy deckende Flächen, kein Weichzeichner. Alle Regeln mit „.ftv “ davor – sonst schlucken die Rücksetzungen (p, ul, li, button) Abstände. */ @property --ftv-w { syntax: ''; inherits: false; initial-value: 0deg; } /* ---------- Theme-Rahmen ---------- */ body.ftv-seite .page_content_wrap { padding: 0 !important; } body.ftv-seite .page_content_wrap > .content_wrap, body.ftv-seite .page_content_wrap > .content_wrap_fullscreen { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } body.ftv-seite .page_content_wrap .content { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; } /* ---------- Grundlagen ---------- */ .ftv { --kopf: "Plus Jakarta Sans", system-ui, sans-serif; --fliess: "DM Sans", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --kreide: "Chalkboard SE", "Marker Felt", "Plus Jakarta Sans", system-ui, sans-serif; --grund: #14141a; --text: #aab0bd; --karte: #1c1c25; --karte2: #20202a; --feld: #15151c; --linie: rgba(255, 255, 255, .09); --rot: #ff4d6d; --orange: #ff8a3d; --gold: #ffc857; --lila: #8b7bff; --cyan: #22d3ee; --pink: #e879f9; --gruen: #34d399; --weich: cubic-bezier(.2, .8, .2, 1); --feder: cubic-bezier(.34, 1.56, .64, 1); position: relative; overflow-x: clip; background: var(--grund); color: var(--text); font-family: var(--fliess); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: clamp(70px, 9vw, 130px); } .ftv *, .ftv *::before, .ftv *::after { box-sizing: border-box; } .ftv h1, .ftv h2, .ftv h3 { margin: 0; padding: 0; font-family: var(--kopf); color: #fff; letter-spacing: -.025em; line-height: 1.12; text-transform: none; font-weight: 800; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; } .ftv p, .ftv address, .ftv figure, .ftv dl, .ftv dt, .ftv dd { margin: 0; padding: 0; font-style: normal; } .ftv ul, .ftv ol { list-style: none; margin: 0; padding: 0; } .ftv li { margin: 0; padding: 0; } .ftv li::before, .ftv li::marker { content: none; } .ftv a { text-decoration: none; color: inherit; } .ftv a:hover, .ftv a:focus { color: inherit; text-decoration: none; } .ftv svg { display: block; flex: none; } .ftv button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; text-align: inherit; min-height: 0; line-height: inherit; border-radius: 0; } .ftv button:hover, .ftv button:focus { background: none; color: inherit; } .ftv img { max-width: none; } .ftv video { display: block; max-width: none; } .ftv .ftv-svg { width: 22px; height: 22px; } .ftv a:focus-visible, .ftv button:focus-visible, .ftv input:focus-visible, .ftv summary:focus-visible, .ftv [tabindex="0"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 138, 61, .65) !important; } .ftv .ftv-rahmen { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } .ftv [tabindex="-1"]:focus { outline: none; } .ftv .ftv-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ftv [hidden] { display: none !important; } .ftv .ftv-verlauf { background: linear-gradient(90deg, #ff4d6d, #ff8a3d, #ffc857, #ff8a3d, #ff4d6d) 0 0 / 600px 100% repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: ftv-fluss 8s linear infinite; } @keyframes ftv-fluss { to { background-position: 600px 0; } } /* Abschnitts-Kopf */ .ftv .ftv-abschnitt { position: relative; padding: clamp(64px, 8vw, 120px) 0 0; } .ftv .ftv-kopf { max-width: 800px; margin-bottom: clamp(28px, 3.6vw, 46px); } .ftv .ftv-kopf--mitte { margin-inline: auto; text-align: center; } .ftv .ftv-kopf--mitte .ftv-oben { justify-content: center; } .ftv .ftv-oben { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 700 12.5px/1.2 var(--mono); letter-spacing: .14em; color: #9aa1ae; text-transform: uppercase; } .ftv .ftv-nr { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 7px; background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .4); color: #ff8fa3; letter-spacing: .04em; } .ftv .ftv-code { white-space: pre; } .ftv .ftv-kopf h2 { font-size: clamp(31px, 4.4vw, 56px); letter-spacing: -.035em; } .ftv .ftv-unter { margin-top: 16px; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.6; color: #a3a9b6; max-width: 700px; } .ftv .ftv-unter b { color: #fff; } .ftv .ftv-kopf--mitte .ftv-unter { margin-inline: auto; } /* Knöpfe */ .ftv .ftv-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 700 16px/1 var(--kopf); white-space: nowrap; transition: transform .35s var(--weich), box-shadow .35s, border-color .3s, background-color .3s; } .ftv .ftv-knopf .ftv-svg { width: 19px; height: 19px; transition: transform .35s var(--weich); } .ftv .ftv-knopf--voll { background: linear-gradient(120deg, #ff4d6d, #ff7a45 55%, #ffb347); color: #fff; box-shadow: 0 14px 34px -14px rgba(255, 77, 109, .9); } .ftv .ftv-knopf--voll:hover { color: #fff; background: linear-gradient(120deg, #ff4d6d, #ff7a45 55%, #ffb347); transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(255, 77, 109, 1); } .ftv .ftv-knopf--voll:hover .ftv-svg { transform: rotate(-12deg) scale(1.1); } .ftv .ftv-knopf--rand { border: 1.5px solid rgba(255, 255, 255, .2); color: #e3e5ea; background: #1b1b23; } .ftv .ftv-knopf--rand:hover { color: #fff; background: #1b1b23; border-color: rgba(255, 138, 61, .75); transform: translateY(-2px); } .ftv .ftv-knopf--rand:hover .ftv-svg { transform: translateX(3px); } .ftv .ftv-knopf--klein { min-height: 46px; padding: 0 18px; font-size: 14.5px; } .ftv .ftv-play-rund { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, #ff4d6d, #ff8a3d); color: #fff; box-shadow: 0 0 0 10px rgba(255, 77, 109, .18), 0 18px 40px -12px rgba(255, 77, 109, .9); transition: transform .4s var(--feder); } .ftv .ftv-play-rund .ftv-svg { width: 30px; height: 30px; margin-left: 4px; } /* Einblenden (einmalig) */ .ftv-js .ftv-zeigen { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s var(--weich); transition-delay: calc(var(--i, 0) * 80ms); } .ftv-js .ftv-zeigen.ist-sichtbar { opacity: 1; transform: none; } /* Dauer-Animationen nur im sichtbaren Abschnitt */ .ftv-js [data-ftv-an]:not(.ist-an) *, .ftv-js [data-ftv-an]:not(.ist-an) *::before, .ftv-js [data-ftv-an]:not(.ist-an) *::after { animation: none !important; } /* =================================================================== Kopf */ .ftv .ftv-held { position: relative; padding: clamp(36px, 5vw, 72px) 0 0; overflow: hidden; isolation: isolate; } .ftv .ftv-held-grund { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ftv .ftv-licht { position: absolute; border-radius: 50%; opacity: .55; } .ftv .ftv-licht.l1 { width: 760px; height: 760px; right: -180px; top: -260px; background: radial-gradient(closest-side, rgba(255, 77, 109, .38), transparent); animation: ftv-treiben 18s ease-in-out infinite alternate; } .ftv .ftv-licht.l2 { width: 620px; height: 620px; left: -220px; bottom: -260px; background: radial-gradient(closest-side, rgba(139, 123, 255, .3), transparent); animation: ftv-treiben 22s ease-in-out infinite alternate-reverse; } .ftv .ftv-licht.l3 { width: 460px; height: 460px; left: 38%; top: 20%; background: radial-gradient(closest-side, rgba(255, 200, 87, .16), transparent); animation: ftv-treiben 26s ease-in-out infinite alternate; } @keyframes ftv-treiben { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.12); } } .ftv .ftv-korn { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .ftv .ftv-held-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(40px, 5vw, 70px); } .ftv .ftv-held-text { position: relative; z-index: 2; } .ftv .ftv-rec-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 4px rgba(255, 77, 109, .2); animation: ftv-blinken 1.4s steps(2, jump-none) infinite; } @keyframes ftv-blinken { 50% { opacity: .15; } } .ftv .ftv-held h1 { font-size: clamp(40px, 5.5vw, 76px); letter-spacing: -.045em; line-height: 1.02; } .ftv .ftv-dreh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .32em; margin-top: 20px; font: 700 clamp(20px, 2.1vw, 28px)/1.3 var(--kopf); color: #e3e5ea; letter-spacing: -.015em; } .ftv .ftv-dreh-slot { display: inline-grid; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; } .ftv .ftv-dreh-wort { grid-area: 1 / 1; justify-self: start; white-space: nowrap; color: #fff; opacity: 0; transform: translateY(70%) rotateX(-60deg); transform-origin: 50% 100%; transition: opacity .45s ease, transform .6s var(--weich); } .ftv .ftv-dreh-wort::after { content: ""; display: block; height: 3px; margin-top: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rot), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--weich) .15s; } .ftv .ftv-dreh-wort.ist-an { opacity: 1; transform: none; } .ftv .ftv-dreh-wort.ist-an::after { transform: scaleX(1); } .ftv .ftv-dreh-wort.ist-weg { opacity: 0; transform: translateY(-70%) rotateX(60deg); } .ftv .ftv-einleitung { margin-top: 20px; max-width: 600px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: #b4b9c5; } .ftv .ftv-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .ftv .ftv-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .ftv .ftv-sprung a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .03); font: 600 13.5px/1 var(--kopf); color: #c7cbd4; transition: border-color .3s, color .3s, transform .3s var(--weich); } .ftv .ftv-sprung a:hover { color: #fff; border-color: rgba(255, 138, 61, .6); transform: translateY(-1px); } /* Kamera-Sucher */ .ftv .ftv-buehne { position: relative; display: grid; justify-items: center; gap: 18px; padding: 26px 0 0; } .ftv .ftv-sucher { position: relative; width: min(100%, 352px); aspect-ratio: 464 / 688; border-radius: 24px; overflow: hidden; background: #050507; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 9px #1b1b23, 0 0 0 10px rgba(255, 255, 255, .08); } .ftv .ftv-sucher-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; } .ftv .ftv-sucher-clip.ist-an { opacity: 1; } .ftv .ftv-sucher-ui { position: absolute; inset: 0; pointer-events: none; color: #fff; font: 700 11.5px/1 var(--mono); letter-spacing: .06em; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); } .ftv .ftv-ecke { position: absolute; width: 26px; height: 26px; border: 2.5px solid rgba(255, 255, 255, .9); } .ftv .ftv-ecke.e1 { left: 14px; top: 14px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; } .ftv .ftv-ecke.e2 { right: 14px; top: 14px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; } .ftv .ftv-ecke.e3 { left: 14px; bottom: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; } .ftv .ftv-ecke.e4 { right: 14px; bottom: 14px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; } .ftv .ftv-drittel { position: absolute; inset: 0; opacity: .22; background: linear-gradient(90deg, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(180deg, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)); } .ftv .ftv-fokus { position: absolute; left: 50%; top: 46%; width: 70px; height: 52px; margin: -26px 0 0 -35px; border: 2px solid rgba(255, 200, 87, .95); border-radius: 6px; animation: ftv-fokus 6s var(--weich) infinite; } @keyframes ftv-fokus { 0%, 100% { transform: scale(1); opacity: .95; } 6% { transform: scale(1.35); opacity: .3; } 12% { transform: scale(.94); opacity: 1; } 16% { transform: scale(1); } 60% { opacity: .9; } 80% { opacity: .35; } } .ftv .ftv-rec { position: absolute; left: 22px; top: 50px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); } .ftv .ftv-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); animation: ftv-blinken 1.2s steps(2, jump-none) infinite; } .ftv .ftv-akku { position: absolute; right: 22px; top: 50px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); } .ftv .ftv-akku i { position: relative; width: 22px; height: 11px; border: 1.5px solid #fff; border-radius: 3px; } .ftv .ftv-akku i::before { content: ""; position: absolute; inset: 1.5px 6px 1.5px 1.5px; border-radius: 1px; background: var(--gruen); } .ftv .ftv-akku i::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: #fff; } .ftv .ftv-tc { position: absolute; left: 22px; bottom: 48px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; } .ftv .ftv-blende { position: absolute; right: 22px; bottom: 48px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); } .ftv .ftv-pegel { position: absolute; left: calc(50% - 176px - 44px); top: 70px; display: flex; gap: 5px; height: 200px; padding: 8px 6px; border-radius: 10px; background: #15151c; border: 1px solid var(--linie); } .ftv .ftv-pegel i { position: relative; width: 7px; height: 100%; border-radius: 4px; overflow: hidden; background: #24242e; } .ftv .ftv-pegel i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--gruen) 0 60%, var(--gold) 60% 82%, var(--rot) 82%); transform-origin: bottom; animation: ftv-pegel 1.1s ease-in-out infinite; } .ftv .ftv-pegel i:nth-child(2)::before { animation-duration: .9s; animation-delay: -.4s; } @keyframes ftv-pegel { 0%, 100% { transform: scaleY(.35); } 18% { transform: scaleY(.8); } 34% { transform: scaleY(.5); } 52% { transform: scaleY(.92); } 70% { transform: scaleY(.42); } 86% { transform: scaleY(.7); } } /* kleine Klappe am Sucher */ .ftv .ftv-klappe-mini { position: absolute; left: calc(50% - 176px - 122px); top: 400px; width: 108px; transform: rotate(-9deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .6)); } .ftv .ftv-km-arm { display: block; height: 20px; border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(-55deg, #f4f4f6 0 11px, #15151c 11px 22px); transform-origin: 6px 100%; transform: rotate(-22deg); } .ftv .ftv-km-arm i { display: none; } .ftv .ftv-klappe-mini.klapp .ftv-km-arm { animation: ftv-klapp-mini .6s cubic-bezier(.5, 0, .3, 1); } @keyframes ftv-klapp-mini { 0% { transform: rotate(-22deg); } 40% { transform: rotate(-34deg); } 62% { transform: rotate(0); } 72% { transform: rotate(-4deg); } 82% { transform: rotate(0); } 100% { transform: rotate(-22deg); } } .ftv .ftv-km-tafel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 2px; padding: 9px 10px 10px; border-radius: 2px 2px 8px 8px; background: #111116; border: 1.5px solid #34343f; font: 700 8.5px/1.2 var(--mono); letter-spacing: .1em; color: #9aa1ae; } .ftv .ftv-km-tafel em { font: 400 22px/1 var(--kreide); color: #fff; font-style: normal; } /* schwebende Schilder */ .ftv .ftv-schwebe { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #22222c; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8); font: 700 13px/1 var(--kopf); color: #fff; white-space: nowrap; animation: ftv-schweben 5s ease-in-out infinite; } .ftv .ftv-schwebe .ftv-svg { width: 16px; height: 16px; color: var(--gold); } .ftv .ftv-schwebe.s1 { right: calc(50% - 176px - 72px); top: 64px; } .ftv .ftv-schwebe.s2 { right: calc(50% - 176px - 40px); top: 300px; animation-delay: -1.7s; } .ftv .ftv-schwebe.s2 .ftv-svg { color: var(--cyan); } .ftv .ftv-schwebe.s3 { left: calc(50% - 176px - 64px); top: 300px; animation-delay: -3.2s; } .ftv .ftv-schwebe.s3 .ftv-svg { color: var(--pink); } @keyframes ftv-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Schnittspur unter dem Sucher */ .ftv .ftv-spur { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 430px); padding: 8px; border-radius: 14px; background: #15151c; border: 1px solid var(--linie); } .ftv .ftv-spur-clip { position: relative; height: 62px; border-radius: 8px; overflow: hidden; background: #000; opacity: .55; transition: opacity .3s, box-shadow .3s; } .ftv .ftv-spur-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ftv .ftv-spur-clip span { position: absolute; left: 5px; right: 5px; bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10.5px/1.2 var(--kopf); color: #fff; text-shadow: 0 1px 3px #000; } .ftv .ftv-spur-clip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .75)); } .ftv .ftv-spur-clip span { z-index: 1; } .ftv .ftv-spur-clip.ist-an { opacity: 1; box-shadow: 0 0 0 2px var(--gold); } .ftv .ftv-spur-clip:hover { opacity: .9; } .ftv .ftv-spur-kopf { position: absolute; left: 8px; top: 3px; bottom: 3px; width: 2px; background: var(--rot); border-radius: 1px; pointer-events: none; will-change: transform; } .ftv .ftv-spur-kopf::before { content: ""; position: absolute; left: -5px; top: -2px; border: 6px solid transparent; border-top: 7px solid var(--rot); border-bottom: 0; } /* Laufband */ .ftv .ftv-band { position: relative; border-block: 1px solid var(--linie); background: #17171e; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ftv .ftv-band::before, .ftv .ftv-band::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .1) 10px 18px); } .ftv .ftv-band::before { top: 4px; } .ftv .ftv-band::after { bottom: 4px; } .ftv .ftv-band-spur { display: flex; width: max-content; animation: ftv-lauf 160s linear infinite; } .ftv .ftv-band-teil { display: flex; align-items: center; gap: 22px; padding: 22px 11px; white-space: nowrap; font: 700 14px/1 var(--kopf); color: #c7cbd4; text-transform: uppercase; letter-spacing: .06em; } .ftv .ftv-band-teil i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--rot), var(--gold)); } @keyframes ftv-lauf { to { transform: translateX(-50%); } } /* =================================================================== Showreel */ .ftv .ftv-reel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "buehne liste" "unter liste"; gap: 18px 22px; align-items: start; } .ftv .ftv-reel-buehne { grid-area: buehne; position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #08080b; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, .08); } .ftv .ftv-reel-perfo { position: absolute; left: 0; right: 0; height: 22px; z-index: 0; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .14) 14px 26px, transparent 26px 32px); -webkit-mask: linear-gradient(180deg, transparent 6px, #000 6px, #000 16px, transparent 16px); mask: linear-gradient(180deg, transparent 6px, #000 6px, #000 16px, transparent 16px); } .ftv .ftv-reel-perfo.p1 { top: 0; } .ftv .ftv-reel-perfo.p2 { bottom: 0; } .ftv .ftv-reel-teil { position: absolute; inset: 22px 0; z-index: 1; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; background: #000; } .ftv .ftv-reel-teil.ist-an { opacity: 1; visibility: visible; transition: opacity .45s ease; } .ftv .ftv-reel-video { width: 100%; height: 100%; object-fit: contain; background: #000; } .ftv .ftv-reel-teil--video-hoch { background: radial-gradient(500px circle at 50% 50%, rgba(255, 200, 87, .12), transparent 70%), #07070b; } .ftv .ftv-reel-teil--video-hoch .ftv-reel-video { width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; } .ftv .ftv-yt { position: absolute; inset: 0; display: grid; place-items: center; } .ftv .ftv-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ftv .ftv-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)); } .ftv .ftv-yt-start { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; } .ftv .ftv-yt-start:hover .ftv-play-rund { transform: scale(1.08); } .ftv .ftv-yt-text { display: grid; justify-items: center; gap: 4px; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .72); } .ftv .ftv-yt-text b { font: 800 17px/1.2 var(--kopf); } .ftv .ftv-yt-text small { font: 600 13px/1.2 var(--kopf); color: #d0d3da; } .ftv .ftv-yt-hinweis { position: absolute; z-index: 1; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12.5px; color: #e5e7eb; text-shadow: 0 1px 4px #000; } .ftv .ftv-yt iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; } .ftv .ftv-reel-clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; height: 100%; padding: 16px; } .ftv .ftv-reel-clip { position: relative; border-radius: 14px; overflow: hidden; background: #111; } .ftv .ftv-reel-clip video { width: 100%; height: 100%; object-fit: cover; } .ftv .ftv-reel-clip span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .72); font: 700 12px/1.2 var(--kopf); color: #fff; } .ftv .ftv-reel-fotos { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; width: 100%; height: 100%; padding: 16px; } .ftv .ftv-reel-foto { position: relative; border-radius: 14px; overflow: hidden; background: #111; } .ftv .ftv-reel-foto:first-child { grid-row: span 2; } .ftv .ftv-reel-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ftv .ftv-reel-foto span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 9px; border-radius: 7px; background: rgba(0, 0, 0, .74); font: 600 12.5px/1.3 var(--kopf); color: #fff; justify-self: start; width: fit-content; max-width: calc(100% - 16px); } .ftv .ftv-reel-unter { grid-area: unter; display: grid; } .ftv .ftv-reel-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s, transform .45s var(--weich), visibility 0s .35s; font-size: 15.5px; line-height: 1.6; color: #b8bdc9; } .ftv .ftv-reel-text.ist-an { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .1s, transform .45s var(--weich) .1s; } .ftv .ftv-reel-text b { display: block; margin-bottom: 4px; font: 800 18px/1.3 var(--kopf); color: #fff; } .ftv .ftv-reel-liste { grid-area: liste; display: grid; gap: 10px; } .ftv .ftv-reel-wahl { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; border-radius: 18px; background: var(--karte); border: 1px solid var(--linie); transition: border-color .3s, background-color .3s, transform .35s var(--weich); } .ftv .ftv-reel-wahl::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--rot), var(--gold)); transform: scaleY(0); transition: transform .4s var(--weich); } .ftv .ftv-reel-wahl:hover { border-color: rgba(255, 255, 255, .2); background: var(--karte); transform: translateX(3px); } .ftv .ftv-reel-wahl.ist-an { border-color: rgba(255, 138, 61, .55); background: #22202a; } .ftv .ftv-reel-wahl.ist-an::before { transform: scaleY(1); } .ftv .ftv-reel-bild { position: relative; width: 74px; height: 74px; flex: none; border-radius: 12px; overflow: hidden; background: #000; } .ftv .ftv-reel-bild img { width: 100%; height: 100%; object-fit: cover; } .ftv .ftv-reel-bild i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; } .ftv .ftv-reel-bild i .ftv-svg { width: 22px; height: 22px; } .ftv .ftv-reel-info { display: grid; gap: 3px; min-width: 0; } .ftv .ftv-reel-info em { font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #ff9f7a; font-style: normal; } .ftv .ftv-reel-info b { font: 800 16px/1.25 var(--kopf); color: #fff; } .ftv .ftv-reel-info small { font-size: 13px; color: #9aa1ae; } /* =================================================================== Katalog */ .ftv .ftv-zahl { font-variant-numeric: tabular-nums; } .ftv .ftv-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .ftv .ftv-filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; background: #1d1d26; border: 1.5px solid rgba(255, 255, 255, .1); color: #cfd3db; font: 600 14px/1 var(--kopf); white-space: nowrap; transition: border-color .25s, background-color .25s, color .25s, transform .3s var(--weich); } .ftv .ftv-filter-chip .ftv-svg { width: 17px; height: 17px; color: var(--f, #fff); } .ftv .ftv-filter-chip b { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 700 12px/1 var(--kopf); color: #c7cbd4; } .ftv .ftv-filter-chip:hover { color: #fff; border-color: rgba(255, 255, 255, .25); background: #1d1d26; transform: translateY(-1px); } .ftv .ftv-filter-chip.ist-an { color: #fff; border-color: var(--f, var(--orange)); background: color-mix(in srgb, var(--f, #ff8a3d) 18%, #1d1d26); } .ftv .ftv-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; } .ftv .ftv-f { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); transition: border-color .35s, transform .45s var(--weich), box-shadow .45s; } .ftv .ftv-f.ist-aus { display: none; } .ftv .ftv-f.ist-neu { animation: ftv-auf .55s var(--weich) both; animation-delay: calc(var(--i, 0) * 35ms); } @keyframes ftv-auf { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } } .ftv .ftv-f::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(360px circle at 0 0, color-mix(in srgb, var(--f) 16%, transparent), transparent 60%); opacity: 0; transition: opacity .4s; } .ftv .ftv-f-kopf { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .ftv .ftv-f-sym { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--f) 16%, #1c1c25); border: 1px solid color-mix(in srgb, var(--f) 40%, transparent); color: var(--f); transition: transform .5s var(--feder); } .ftv .ftv-f-sym .ftv-svg { width: 25px; height: 25px; } .ftv .ftv-merk { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #e3e5ea; transition: background-color .3s, border-color .3s, transform .35s var(--feder); } .ftv .ftv-merk .ftv-svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .35s var(--feder), opacity .25s; } .ftv .ftv-merk-haken { opacity: 0; transform: scale(.4); } .ftv .ftv-merk:hover { background: rgba(255, 255, 255, .12); border-color: var(--f); transform: scale(1.06); } .ftv .ftv-merk[aria-pressed="true"] { background: var(--f); border-color: var(--f); color: #111; } .ftv .ftv-merk[aria-pressed="true"] .ftv-merk-plus { opacity: 0; transform: rotate(90deg) scale(.4); } .ftv .ftv-merk[aria-pressed="true"] .ftv-merk-haken { opacity: 1; transform: none; } .ftv .ftv-f-ber { font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--f) 75%, #fff); } .ftv .ftv-f h3 { margin-top: 6px; font-size: 19px; letter-spacing: -.015em; line-height: 1.25; } .ftv .ftv-f-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #aeb3bf; } .ftv .ftv-f-ideal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; } .ftv .ftv-f-ideal span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font: 600 12px/1 var(--kopf); color: #c7cbd4; } .ftv .ftv-f.ist-gemerkt { border-color: color-mix(in srgb, var(--f) 60%, transparent); } @media (hover: hover) { .ftv .ftv-f:hover { border-color: color-mix(in srgb, var(--f) 55%, transparent); transform: translateY(-4px); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--f) 70%, #000); } .ftv .ftv-f:hover::after { opacity: 1; } .ftv .ftv-f:hover .ftv-f-sym { transform: rotate(-8deg) scale(1.08); } } .ftv .ftv-katalog-fuss { display: flex; justify-content: center; margin-top: 26px; } /* =================================================================== Live-Erklärvideo */ .ftv .ftv-ev-raster { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 24px; align-items: start; } .ftv .ftv-ev { padding: 12px; border-radius: 26px; background: #101016; border: 1px solid var(--linie); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 1); } .ftv .ftv-ev-buehne { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #ffeedd; } .ftv .ftv-ev-svg { display: block; width: 100%; height: 100%; } .ftv .ftv-ev-ut { position: absolute; left: 0; right: 0; bottom: 5.5%; display: flex; justify-content: center; padding: 0 6%; pointer-events: none; transition: opacity .3s; } .ftv .ftv-ev-ut span { padding: .35em .8em; border-radius: 8px; background: rgba(10, 10, 14, .82); color: #fff; font: 700 clamp(12.5px, 1.45vw, 19px)/1.35 var(--kopf); text-align: center; } .ftv .ftv-ev-buehne.ut-aus .ftv-ev-ut { opacity: 0; } .ftv .ftv-ev-start { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 10, 16, .38); transition: opacity .35s, visibility 0s; } .ftv .ftv-ev-start:hover { background: rgba(10, 10, 16, .38); } .ftv .ftv-ev-start:hover .ftv-play-rund { transform: scale(1.08); } .ftv .ftv-ev.laeuft .ftv-ev-start, .ftv .ftv-ev.gestartet .ftv-ev-start { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; } .ftv .ftv-ev-wisch { position: absolute; inset: -10% -30%; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 138, 61, .95) 40%, rgba(255, 77, 109, .95) 50%, rgba(139, 123, 255, .95) 60%, transparent 70%); transform: translateX(-110%); } .ftv .ftv-ev-buehne.wischt .ftv-ev-wisch { animation: ftv-wisch .7s cubic-bezier(.6, 0, .3, 1); } @keyframes ftv-wisch { from { transform: translateX(-110%); } to { transform: translateX(110%); } } .ftv .ftv-ev-leiste { display: flex; align-items: center; gap: 12px; padding: 12px 6px 4px; } .ftv .ftv-ev-pp, .ftv .ftv-ev-cc { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #20202a; color: #fff; transition: background-color .25s; } .ftv .ftv-ev-pp:hover, .ftv .ftv-ev-cc:hover { background: #2a2a36; } .ftv .ftv-ev-pp .ftv-svg { width: 18px; height: 18px; grid-area: 1 / 1; } .ftv .ftv-ev-i-pause { display: none; } .ftv .ftv-ev.laeuft .ftv-ev-i-pause { display: block; } .ftv .ftv-ev.laeuft .ftv-ev-i-play { display: none; } .ftv .ftv-ev-cc .ftv-svg { width: 20px; height: 20px; } .ftv .ftv-ev-cc[aria-pressed="true"] { color: var(--gold); } .ftv .ftv-ev-zeit { min-width: 86px; font: 700 13px/1 var(--mono); color: #c7cbd4; font-variant-numeric: tabular-nums; } .ftv .ftv-ev-spur { position: relative; flex: 1; height: 34px; cursor: pointer; touch-action: none; } .ftv .ftv-ev-spur::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: #2a2a36; } .ftv .ftv-ev-spur-voll { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, var(--rot), var(--orange), var(--gold)); transform-origin: left; transform: scaleX(0); } .ftv .ftv-ev-marke { position: absolute; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 1px; background: rgba(255, 255, 255, .55); } .ftv .ftv-ev-griff { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 138, 61, .35); } .ftv .ftv-ev-seite { display: grid; gap: 14px; } .ftv .ftv-ev-titel { display: flex; align-items: center; gap: 8px; font: 800 15px/1.2 var(--kopf); color: #fff; } .ftv .ftv-ev-titel .ftv-svg { width: 18px; height: 18px; color: var(--gold); } .ftv .ftv-ev-stile { display: grid; gap: 8px; } .ftv .ftv-ev-stil { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--karte); border: 1.5px solid var(--linie); transition: border-color .3s, background-color .3s; } .ftv .ftv-ev-stil:hover { border-color: rgba(255, 255, 255, .22); background: var(--karte); } .ftv .ftv-ev-stil[aria-pressed="true"] { border-color: var(--orange); background: #24202a; } .ftv .ftv-ev-stil b { display: block; font: 800 15px/1.2 var(--kopf); color: #fff; } .ftv .ftv-ev-stil small { display: block; font-size: 13px; color: #9aa1ae; } .ftv .ftv-ev-probe { width: 46px; height: 32px; flex: none; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); } .ftv .probe-flat { background: linear-gradient(135deg, #ffeedd 0 50%, #ff4d6d 50% 70%, #8b7bff 70%); } .ftv .probe-neon { background: #07070d; box-shadow: inset 0 0 0 2px #22d3ee, inset 0 0 12px rgba(232, 121, 249, .8); } .ftv .probe-skizze { background: #fbfaf6 repeating-linear-gradient(135deg, transparent 0 7px, rgba(0, 0, 0, .55) 7px 8.5px); } .ftv .ftv-ev-kapitel { display: grid; gap: 4px; } .ftv .ftv-ev-kap { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; color: #c7cbd4; transition: background-color .25s, color .25s; } .ftv .ftv-ev-kap:hover { background: rgba(255, 255, 255, .05); color: #fff; } .ftv .ftv-ev-kap b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #22222c; font: 800 13px/1 var(--kopf); color: #fff; transition: background-color .3s; } .ftv .ftv-ev-kap span { font: 700 14.5px/1.2 var(--kopf); } .ftv .ftv-ev-kap small { font: 600 12px/1 var(--mono); color: #7d8390; } .ftv .ftv-ev-kap.ist-an { background: rgba(255, 138, 61, .1); color: #fff; } .ftv .ftv-ev-kap.ist-an b { background: linear-gradient(135deg, var(--rot), var(--orange)); } .ftv .ftv-ev-hinweis { font-size: 13.5px; line-height: 1.5; color: #8d93a0; } /* --- Zeichnung: gemeinsame Formen --- */ .ftv .ftv-ev-svg text { font-family: var(--kopf); font-weight: 800; } .ftv .ftv-ev-svg .e-schrift--dach { font-size: 22px; letter-spacing: .12em; } .ftv .ftv-ev-svg .e-schrift-klein { font-size: 16px; font-weight: 700; } .ftv .ftv-ev-svg .e-frage { font-size: 70px; } .ftv .ftv-ev-svg .e-titel { font-size: 66px; letter-spacing: -.03em; } .ftv .ftv-ev-svg .e-unter { font-size: 24px; font-weight: 700; letter-spacing: .04em; } .ftv .ftv-ev-svg .e-strich, .ftv .ftv-ev-svg .e-mund, .ftv .ftv-ev-svg .e-achse, .ftv .ftv-ev-svg .e-bodenlinie, .ftv .ftv-ev-svg .e-logo-ring { fill: none; stroke-linecap: round; stroke-linejoin: round; } .ftv .ftv-ev-svg [class^="e-"], .ftv .ftv-ev-svg [class*=" e-"] { transition: fill .35s, stroke .35s; } /* Flat */ .ftv .stil-flat { background: #ffeedd; } .ftv .stil-flat .e-grund { fill: #ffeedd; } .ftv .stil-flat .e-sonne { fill: #ffc857; } .ftv .stil-flat .e-wolke { fill: #fff; } .ftv .stil-flat .e-boden { fill: #f7d5b6; } .ftv .stil-flat .e-bodenlinie { stroke: #2a2440; stroke-width: 3; } .ftv .stil-flat .e-haus { fill: #fff8f0; } .ftv .stil-flat .e-dach, .ftv .stil-flat .e-markise, .ftv .stil-flat .e-akzent, .ftv .stil-flat .e-herz, .ftv .stil-flat .e-schrift--leer, .ftv .stil-flat .e-frage { fill: #ff4d6d; } .ftv .stil-flat .e-markise2, .ftv .stil-flat .e-weiss, .ftv .stil-flat .e-iconkreis, .ftv .stil-flat .e-karte, .ftv .stil-flat .e-bildschirm, .ftv .stil-flat .e-schuerze, .ftv .stil-flat .e-muetze { fill: #fff; } .ftv .stil-flat .e-schrift--dach { fill: #fff; } .ftv .stil-flat .e-glas { fill: #bfe9ff; } .ftv .stil-flat .e-brot { fill: #e3a35b; } .ftv .stil-flat .e-strich { stroke: #8a5a2b; stroke-width: 3; } .ftv .stil-flat .e-tuer { fill: #3b82f6; } .ftv .stil-flat .e-knopf { fill: #ffc857; } .ftv .stil-flat .e-achse { stroke: #2a2440; stroke-width: 3; } .ftv .stil-flat .e-balken { fill: #ffb3c1; } .ftv .stil-flat .e-schrift-klein, .ftv .stil-flat .e-auge { fill: #2a2440; } .ftv .stil-flat .e-hose, .ftv .stil-flat .e-schuh, .ftv .stil-flat .e-geraet, .ftv .stil-flat .e-rahmen { fill: #2a2440; } .ftv .stil-flat .e-haut { fill: #f6c7a1; } .ftv .stil-flat .e-kleid { fill: #8b7bff; } .ftv .stil-flat .e-haar { fill: #6b3e26; } .ftv .stil-flat .e-wange { fill: #ff9db0; } .ftv .stil-flat .e-mund { stroke: #2a2440; stroke-width: 3.5; } .ftv .stil-flat .e-suche, .ftv .stil-flat .e-zeile { fill: #eceef5; } .ftv .stil-flat .e-p1 { fill: #22d3ee; } .ftv .stil-flat .e-p2 { fill: #ff8a3d; } .ftv .stil-flat .e-p3 { fill: #34d399; } .ftv .stil-flat .e-p4 { fill: #e879f9; } .ftv .stil-flat .e-ende { fill: #16141f; } .ftv .stil-flat .e-logo-ring { stroke: #ffc857; stroke-width: 4; stroke-dasharray: 10 12; } .ftv .stil-flat .e-titel { fill: #fff; } .ftv .stil-flat .e-unter { fill: #ffc857; } .ftv .stil-flat :is(.e-haus, .e-dach, .e-markise, .e-markise2, .e-glas, .e-tuer, .e-karte, .e-kleid, .e-schuerze, .e-muetze, .e-haut, .e-haar, .e-geraet, .e-rahmen, .e-iconkreis, .e-brot, .e-balken, .e-akzent, .e-p1, .e-p2, .e-p3, .e-p4, .e-wolke, .e-suche, .e-zeile, .e-bildschirm, .e-herz) { stroke: #2a2440; stroke-width: 3; stroke-linejoin: round; } .ftv .stil-flat #ev-ende .e-ende, .ftv .stil-flat #ev-logo .e-akzent { stroke: none; } /* Neon */ .ftv .stil-neon { background: #07070d; } .ftv .stil-neon .e-grund { fill: #07070d; } .ftv .stil-neon .e-sonne { fill: none; stroke: #ffc857; stroke-width: 3; } .ftv .stil-neon .e-wolke { fill: #0d0d18; stroke: #3d3d66; stroke-width: 2; } .ftv .stil-neon .e-boden { fill: #0b0b14; } .ftv .stil-neon .e-bodenlinie { stroke: #22d3ee; stroke-width: 3; } .ftv .stil-neon :is(.e-haus, .e-dach, .e-markise, .e-markise2, .e-tuer, .e-karte, .e-kleid, .e-schuerze, .e-muetze, .e-haut, .e-haar, .e-geraet, .e-rahmen, .e-iconkreis, .e-bildschirm, .e-suche, .e-zeile, .e-hose, .e-schuh, .e-p1, .e-p2, .e-p3, .e-p4, .e-balken) { fill: #10101c; stroke-width: 2.6; stroke-linejoin: round; } .ftv .stil-neon :is(.e-haus, .e-dach, .e-markise) { stroke: #ff4d6d; } .ftv .stil-neon .e-markise2 { fill: rgba(255, 77, 109, .25); stroke: #ff4d6d; } .ftv .stil-neon .e-schrift--dach { fill: #ff8fa3; } .ftv .stil-neon .e-glas { fill: rgba(34, 211, 238, .1); stroke: #22d3ee; stroke-width: 2.6; } .ftv .stil-neon .e-brot { fill: none; stroke: #ffc857; stroke-width: 2.6; } .ftv .stil-neon .e-strich { stroke: #ffc857; stroke-width: 2.4; } .ftv .stil-neon .e-tuer { stroke: #8b7bff; } .ftv .stil-neon .e-knopf { fill: #ffc857; } .ftv .stil-neon .e-karte { stroke: #22d3ee; } .ftv .stil-neon .e-achse { stroke: #22d3ee; stroke-width: 2.4; } .ftv .stil-neon .e-balken { stroke: #e879f9; } .ftv .stil-neon .e-akzent { fill: #ff4d6d; stroke: none; } .ftv .stil-neon .e-schrift-klein { fill: #9be9f7; } .ftv .stil-neon :is(.e-hose, .e-schuh) { stroke: #8b7bff; } .ftv .stil-neon .e-kleid { stroke: #8b7bff; } .ftv .stil-neon :is(.e-schuerze, .e-muetze) { stroke: #f4f4f6; } .ftv .stil-neon .e-haut { stroke: #ffd6a5; } .ftv .stil-neon .e-haar { stroke: #ff8a3d; } .ftv .stil-neon .e-auge { fill: #22d3ee; } .ftv .stil-neon .e-wange { fill: rgba(232, 121, 249, .55); } .ftv .stil-neon .e-mund { stroke: #22d3ee; stroke-width: 3; } .ftv .stil-neon :is(.e-geraet, .e-rahmen) { stroke: #e879f9; } .ftv .stil-neon :is(.e-bildschirm, .e-suche, .e-zeile, .e-iconkreis) { stroke: #22d3ee; } .ftv .stil-neon .e-weiss { fill: #fff; } .ftv .stil-neon .e-herz { fill: none; stroke: #ff4d6d; stroke-width: 2.6; } .ftv .stil-neon .e-frage, .ftv .stil-neon .e-schrift--leer { fill: #ff4d6d; } .ftv .stil-neon .e-p1 { stroke: #22d3ee; } .ftv .stil-neon .e-p2 { stroke: #ff8a3d; } .ftv .stil-neon .e-p3 { stroke: #34d399; } .ftv .stil-neon .e-p4 { stroke: #e879f9; } .ftv .stil-neon .e-ende { fill: #05050a; } .ftv .stil-neon .e-logo-ring { stroke: #22d3ee; stroke-width: 3; stroke-dasharray: 4 8; } .ftv .stil-neon .e-titel { fill: #fff; } .ftv .stil-neon .e-unter { fill: #22d3ee; } @media (hover: hover) and (min-width: 900px) { .ftv .stil-neon .ftv-ev-svg { filter: drop-shadow(0 0 5px rgba(34, 211, 238, .35)); } } /* Skizze */ .ftv .stil-skizze { background: #fbfaf6; } .ftv .stil-skizze .ftv-ev-svg text { font-family: var(--kreide); font-weight: 700; } .ftv .stil-skizze .e-grund { fill: #fbfaf6; } .ftv .stil-skizze :is(.e-sonne, .e-wolke, .e-haus, .e-dach, .e-markise, .e-markise2, .e-glas, .e-brot, .e-tuer, .e-karte, .e-balken, .e-kleid, .e-schuerze, .e-muetze, .e-haut, .e-haar, .e-geraet, .e-rahmen, .e-iconkreis, .e-bildschirm, .e-suche, .e-zeile, .e-hose, .e-schuh, .e-p1, .e-p2, .e-p3, .e-p4) { fill: #fff; stroke: #1d1d1f; stroke-width: 3; stroke-linejoin: round; } .ftv .stil-skizze .e-boden { fill: none; } .ftv .stil-skizze .e-bodenlinie, .ftv .stil-skizze .e-achse, .ftv .stil-skizze .e-strich, .ftv .stil-skizze .e-mund { stroke: #1d1d1f; stroke-width: 3; } .ftv .stil-skizze .e-markise2 { fill: #1d1d1f; fill-opacity: .12; } .ftv .stil-skizze .e-haar { fill: #1d1d1f; fill-opacity: .2; } .ftv .stil-skizze .e-geraet, .ftv .stil-skizze .e-rahmen { fill: #1d1d1f; fill-opacity: .08; } .ftv .stil-skizze .e-schrift--dach, .ftv .stil-skizze .e-schrift-klein, .ftv .stil-skizze .e-auge, .ftv .stil-skizze .e-knopf { fill: #1d1d1f; } .ftv .stil-skizze .e-wange { fill: #ff4d6d; fill-opacity: .25; } .ftv .stil-skizze .e-akzent, .ftv .stil-skizze .e-herz, .ftv .stil-skizze .e-frage, .ftv .stil-skizze .e-schrift--leer { fill: #ff4d6d; stroke: #1d1d1f; stroke-width: 2.5; } .ftv .stil-skizze .e-frage { stroke: none; } .ftv .stil-skizze .e-weiss { fill: #fff; stroke: #1d1d1f; stroke-width: 2; } .ftv .stil-skizze .e-ende { fill: #fbfaf6; } .ftv .stil-skizze .e-logo-ring { stroke: #1d1d1f; stroke-width: 3; stroke-dasharray: 2 9; } .ftv .stil-skizze .e-titel { fill: #1d1d1f; } .ftv .stil-skizze .e-unter { fill: #ff4d6d; } /* =================================================================== Stil-Galerie */ .ftv .ftv-stil-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ftv .ftv-stil { border-radius: 22px; overflow: hidden; background: var(--karte); border: 1px solid var(--linie); transition: transform .45s var(--weich), border-color .35s; } .ftv .ftv-stil-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .ftv .ftv-stil-text { display: grid; gap: 3px; padding: 14px 16px 16px; } .ftv .ftv-stil-text b { font: 800 16.5px/1.25 var(--kopf); color: #fff; } .ftv .ftv-stil-text span { font-size: 13.5px; line-height: 1.45; color: #9aa1ae; } @media (hover: hover) { .ftv .ftv-stil:hover { transform: translateY(-4px); border-color: rgba(255, 138, 61, .5); } } /* 2D-Flat */ .ftv .ftv-st-flat { background: #ffeedd; } .ftv .ftv-st-flat .k { position: absolute; bottom: 26%; width: 18%; aspect-ratio: 1; transform-origin: 50% 100%; animation: ftv-huepf 1.6s cubic-bezier(.4, 0, .6, 1) infinite; } .ftv .ftv-st-flat .k1 { left: 14%; border-radius: 50%; background: #ff4d6d; } .ftv .ftv-st-flat .k2 { left: 41%; border-radius: 22%; background: #8b7bff; animation-delay: -.53s; } .ftv .ftv-st-flat .k3 { left: 68%; border-radius: 50% 50% 22% 22%; background: #ffc857; animation-delay: -1.06s; } .ftv .ftv-st-flat .boden { position: absolute; left: 8%; right: 8%; bottom: calc(26% - 3px); height: 3px; border-radius: 2px; background: #2a2440; } @keyframes ftv-huepf { 0%, 100% { transform: translateY(0) scale(1.18, .82); } 15% { transform: translateY(0) scale(.9, 1.12); } 50% { transform: translateY(-110%) scale(1, 1); } 85% { transform: translateY(0) scale(.94, 1.06); } } /* 3D */ .ftv .ftv-st-3d { background: radial-gradient(circle at 50% 40%, #1f2a55, #0b0d1c 70%); perspective: 520px; } .ftv .ftv-st-3d .w3 { position: absolute; left: 50%; top: 46%; width: 76px; height: 76px; margin: -38px 0 0 -38px; transform-style: preserve-3d; animation: ftv-schweben 3s ease-in-out infinite; } .ftv .ftv-st-3d .wuerfel { position: absolute; inset: 0; transform-style: preserve-3d; animation: ftv-wuerfel 8s linear infinite; } .ftv .ftv-st-3d .wuerfel i { position: absolute; inset: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .35); backface-visibility: visible; } .ftv .ftv-st-3d .v { transform: translateZ(38px); background: linear-gradient(135deg, #22d3ee, #3b82f6); } .ftv .ftv-st-3d .h { transform: rotateY(180deg) translateZ(38px); background: linear-gradient(135deg, #3b82f6, #1e3a8a); } .ftv .ftv-st-3d .l { transform: rotateY(-90deg) translateZ(38px); background: linear-gradient(135deg, #8b7bff, #4c1d95); } .ftv .ftv-st-3d .r { transform: rotateY(90deg) translateZ(38px); background: linear-gradient(135deg, #67e8f9, #0891b2); } .ftv .ftv-st-3d .o { transform: rotateX(90deg) translateZ(38px); background: linear-gradient(135deg, #a5f3fc, #22d3ee); } .ftv .ftv-st-3d .u { transform: rotateX(-90deg) translateZ(38px); background: #1e1b4b; } .ftv .ftv-st-3d .schatten { position: absolute; left: 50%; bottom: 14%; width: 90px; height: 14px; margin-left: -45px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); animation: ftv-schatten 3s ease-in-out infinite; } @keyframes ftv-wuerfel { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } } @keyframes ftv-schatten { 50% { transform: scaleX(.8); opacity: .6; } } /* Skizze */ .ftv .ftv-st-skizze { background: #fbfaf6; background-image: linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px); background-size: 18px 18px; } .ftv .ftv-st-skizze svg { position: absolute; left: 50%; top: 50%; width: 58%; height: auto; transform: translate(-50%, -50%); } .ftv .ftv-st-skizze .z { fill: none; stroke: #1d1d1f; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ftv-zeichnen 4.4s ease-in-out infinite; } .ftv .ftv-st-skizze .z2 { animation-delay: .5s; } .ftv .ftv-st-skizze .z3 { stroke: #ff4d6d; animation-delay: .9s; } .ftv .ftv-st-skizze .z4 { stroke: #ff8a3d; animation-delay: 1.2s; } @keyframes ftv-zeichnen { 0% { stroke-dashoffset: 1; opacity: 1; } 40%, 80% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* Kinetische Typografie */ .ftv .ftv-st-typo { background: #111116; display: grid; place-items: center; } .ftv .ftv-st-typo .t { grid-area: 1 / 1; font: 800 clamp(24px, 2.6vw, 38px)/1 var(--kopf); letter-spacing: -.03em; color: #fff; opacity: 0; animation: ftv-typo 3.6s var(--weich) infinite; } .ftv .ftv-st-typo .t2 { color: var(--gold); animation-delay: 1.2s; } .ftv .ftv-st-typo .t3 { background: linear-gradient(90deg, var(--rot), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation-delay: 2.4s; } @keyframes ftv-typo { 0% { opacity: 0; transform: translateY(60%) scale(.6) rotate(-6deg); } 8% { opacity: 1; transform: none; } 26% { opacity: 1; transform: scale(1.06); } 33%, 100% { opacity: 0; transform: translateY(-50%) scale(1.3); } } /* Isometrisch */ .ftv .ftv-st-iso { background: linear-gradient(160deg, #e6f7ff, #c7ecff); } .ftv .ftv-st-iso svg { position: absolute; inset: 8% 10%; width: 80%; height: 84%; } .ftv .ftv-st-iso .o { fill: #a5f3fc; } .ftv .ftv-st-iso .l { fill: #22d3ee; } .ftv .ftv-st-iso .r { fill: #0e7490; } .ftv .ftv-st-iso .b2 .o { fill: #ffd6a5; } .ftv .ftv-st-iso .b2 .l { fill: #ff8a3d; } .ftv .ftv-st-iso .b2 .r { fill: #c2410c; } .ftv .ftv-st-iso .b3 .o { fill: #ddd6fe; } .ftv .ftv-st-iso .b3 .l { fill: #8b7bff; } .ftv .ftv-st-iso .b3 .r { fill: #5b21b6; } .ftv .ftv-st-iso .b { animation: ftv-iso 3.6s var(--feder) infinite; } .ftv .ftv-st-iso .b2 { animation-delay: .3s; } .ftv .ftv-st-iso .b3 { animation-delay: .6s; } @keyframes ftv-iso { 0% { transform: translateY(-40px); opacity: 0; } 15%, 80% { transform: none; opacity: 1; } 95%, 100% { transform: translateY(10px); opacity: 0; } } /* Neon */ .ftv .ftv-st-neon { background: #07070d; } .ftv .ftv-st-neon svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(232, 121, 249, .9)); } .ftv .ftv-st-neon .n { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 30; animation: ftv-neon 2.4s linear infinite; } .ftv .ftv-st-neon .n1 { stroke: #e879f9; } .ftv .ftv-st-neon .n2 { stroke: #22d3ee; animation-duration: 3.2s; animation-direction: reverse; } .ftv .ftv-st-neon .n3 { fill: none; stroke: #ffc857; stroke-width: 2.5; transform-origin: 80px 60px; animation: ftv-neon-puls 2.4s ease-in-out infinite; } @keyframes ftv-neon { to { stroke-dashoffset: -180; } } @keyframes ftv-neon-puls { 50% { transform: scale(.82); opacity: .5; } } /* Realfilm */ .ftv .ftv-st-real { background: #000; } .ftv .ftv-st-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ftv-zoom 12s ease-in-out infinite alternate; } .ftv .ftv-st-real .balken { position: absolute; left: 0; right: 0; height: 12%; background: #000; } .ftv .ftv-st-real .b-o { top: 0; } .ftv .ftv-st-real .b-u { bottom: 0; } .ftv .ftv-st-real .rec { position: absolute; left: 10px; top: calc(12% + 8px); display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; background: rgba(0, 0, 0, .65); font: 700 10.5px/1 var(--mono); color: #fff; } .ftv .ftv-st-real .rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); animation: ftv-blinken 1.2s steps(2, jump-none) infinite; } @keyframes ftv-zoom { from { transform: scale(1); } to { transform: scale(1.1); } } /* Papier & Stop-Motion */ .ftv .ftv-st-papier { background: #f3e9d8; } .ftv .ftv-st-papier .p { position: absolute; display: block; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .18)); } .ftv .ftv-st-papier .sonne { right: 16%; top: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffb547; animation: ftv-stop-dreh 2.4s steps(6) infinite; } .ftv .ftv-st-papier .berg1 { left: -6%; bottom: 14%; width: 70%; height: 56%; background: #6aa38a; clip-path: polygon(0 100%, 48% 6%, 100% 100%); } .ftv .ftv-st-papier .berg2 { right: -10%; bottom: 14%; width: 66%; height: 44%; background: #4c7f6b; clip-path: polygon(0 100%, 52% 8%, 100% 100%); } .ftv .ftv-st-papier .wolke { left: 10%; top: 18%; width: 26%; height: 12%; border-radius: 999px; background: #fff; animation: ftv-stop-wolke 3.2s steps(8) infinite alternate; } .ftv .ftv-st-papier .wiese { left: 0; right: 0; bottom: 0; height: 18%; background: #8cc084; } @keyframes ftv-stop-dreh { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.06); } 100% { transform: rotate(0) scale(1); } } @keyframes ftv-stop-wolke { to { transform: translateX(120%); } } /* =================================================================== Format-Wechsler */ .ftv .ftv-fw { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .ftv .ftv-fw .ftv-kopf { margin-bottom: 26px; } .ftv .ftv-fw-knoepfe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .ftv .ftv-fw-knopf { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 16px; background: var(--karte); border: 1.5px solid var(--linie); text-align: center; transition: border-color .3s, background-color .3s, transform .35s var(--weich); } .ftv .ftv-fw-knopf:hover { border-color: rgba(255, 255, 255, .25); background: var(--karte); transform: translateY(-2px); } .ftv .ftv-fw-knopf[aria-pressed="true"] { border-color: var(--orange); background: #26202a; } .ftv .ftv-fw-mini { display: block; height: 26px; width: calc(26px * var(--r)); max-width: 52px; border-radius: 4px; border: 2px solid currentColor; color: #9aa1ae; transition: color .3s; } .ftv .ftv-fw-knopf[aria-pressed="true"] .ftv-fw-mini { color: var(--gold); } .ftv .ftv-fw-knopf b { font: 800 15px/1 var(--kopf); color: #fff; } .ftv .ftv-fw-knopf small { font-size: 11.5px; line-height: 1.2; color: #9aa1ae; } .ftv .ftv-fw-info { display: grid; margin-top: 20px; } .ftv .ftv-fw-infoteil { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .ftv .ftv-fw-infoteil.ist-an { opacity: 1; visibility: visible; transition: opacity .35s .05s; } .ftv .ftv-fw-infoteil > p:first-child { font-size: 16px; line-height: 1.6; color: #c7cbd4; } .ftv .ftv-fw-kanaele { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ftv .ftv-fw-kanaele span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 200, 87, .1); border: 1px solid rgba(255, 200, 87, .3); font: 600 13px/1 var(--kopf); color: #ffe2a3; } .ftv .ftv-fw-buehne { position: relative; display: grid; place-items: center; height: 500px; border-radius: 26px; background: radial-gradient(600px circle at 50% 40%, rgba(255, 138, 61, .1), transparent 70%), #111117; border: 1px dashed rgba(255, 255, 255, .14); overflow: hidden; } .ftv .ftv-fw-rahmen { position: relative; width: 560px; height: 315px; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, .15); transition: width .7s var(--weich), height .7s var(--weich), border-radius .5s; } .ftv .ftv-fw-rahmen img { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; max-width: none; object-fit: cover; transform: translate(-50%, -50%); } .ftv .ftv-fw-ui { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; color: #fff; pointer-events: none; } .ftv .f-16x9 .ui-16x9, .ftv .f-9x16 .ui-9x16, .ftv .f-1x1 .ui-1x1, .ftv .f-4x5 .ui-4x5, .ftv .f-21x9 .ui-21x9 { opacity: 1; transition: opacity .4s .45s; } .ftv .ftv-fw-ui .ftv-svg { width: 20px; height: 20px; } .ftv .ftv-fw-leiste { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 26px 14px 10px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85)); font: 700 11.5px/1 var(--mono); } .ftv .ftv-fw-leiste i { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); } .ftv .ftv-fw-leiste i b { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; border-radius: 2px; background: var(--rot); } .ftv .ftv-fw-seitlich { position: absolute; right: 10px; bottom: 70px; display: grid; gap: 16px; } .ftv .ftv-fw-seitlich .ftv-svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); } .ftv .ftv-fw-unten { position: absolute; left: 12px; right: 50px; bottom: 14px; display: grid; gap: 3px; font: 600 12px/1.3 var(--kopf); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); } .ftv .ftv-fw-unten b { font-weight: 800; font-size: 13px; } .ftv .ftv-fw-oben { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px 26px; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); font: 700 12.5px/1 var(--kopf); } .ftv .ftv-fw-oben i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--rot), var(--gold)); box-shadow: 0 0 0 2px #fff; } .ftv .ftv-fw-oben small { margin-left: auto; font-size: 11px; color: #e5e7eb; } .ftv .ftv-fw-reihe { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; padding: 26px 12px 10px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); } .ftv .ftv-fw-reihe .ftv-svg:last-child { margin-left: auto; } .ftv .ftv-fw-cta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, .95); color: #111; font: 800 12.5px/1 var(--kopf); } .ftv .ftv-fw-cta .ftv-svg { width: 16px; height: 16px; } .ftv .ftv-fw-kino { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font: 800 clamp(14px, 1.6vw, 20px)/1 var(--kopf); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); } .ftv .ftv-fw-sicher { position: absolute; inset: 7%; border: 1.5px dashed rgba(255, 200, 87, .55); border-radius: 6px; pointer-events: none; } .ftv .ftv-fw-mass { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 6px; background: var(--gold); color: #111; font: 800 12px/1 var(--mono); } .ftv .f-1x1 .ftv-fw-mass, .ftv .f-4x5 .ftv-fw-mass { top: auto; bottom: 52px; } .ftv .f-4x5 .ftv-fw-mass { bottom: 56px; } /* =================================================================== Video-Planer */ .ftv .ftv-pl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .ftv .ftv-pl-fragen { display: grid; gap: 22px; } .ftv .ftv-pl-frage { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 800 17px/1.3 var(--kopf); color: #fff; } .ftv .ftv-pl-frage b { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: linear-gradient(135deg, var(--rot), var(--orange)); font-size: 14px; color: #fff; } .ftv .ftv-pl-frage em { font: 600 12.5px/1 var(--kopf); font-style: normal; color: #8d93a0; } .ftv .ftv-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ftv .ftv-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 999px; background: #21212b; border: 1.5px solid rgba(255, 255, 255, .1); color: #cfd3db; font: 600 14px/1 var(--kopf); white-space: nowrap; transition: transform .3s var(--weich), border-color .25s, background-color .25s, color .25s; } .ftv .ftv-chip:hover { border-color: rgba(255, 138, 61, .6); color: #fff; background: #21212b; transform: translateY(-1px); } .ftv .ftv-chip .ftv-svg { width: 0; height: 15px; opacity: 0; margin-left: -7px; transition: width .3s var(--weich), opacity .25s, margin .3s var(--weich); } .ftv .ftv-chip[aria-pressed="true"] { background: rgba(255, 138, 61, .18); border-color: var(--orange); color: #fff; } .ftv .ftv-chip[aria-pressed="true"] .ftv-svg { width: 15px; opacity: 1; margin-left: 0; } .ftv .ftv-pl-ort { position: sticky; top: 110px; display: grid; justify-items: center; gap: 16px; } .ftv .ftv-pl-los { position: relative; z-index: 1; width: min(100%, 440px); } .ftv .ftv-pl-hinweis { max-width: 440px; text-align: center; font-size: 13px; line-height: 1.5; color: #8d93a0; } /* Filmklappe */ .ftv .ftv-klappe { position: relative; width: min(100%, 440px); padding-top: 50px; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55)); } .ftv .ftv-klappe-arm, .ftv .ftv-klappe-leiste { height: 44px; border-radius: 7px; border: 2px solid #2b2b35; background: repeating-linear-gradient(-55deg, #f4f4f6 0 26px, #15151c 26px 52px); } .ftv .ftv-klappe-arm { position: absolute; left: 0; right: 0; top: 4px; transform-origin: 10px 100%; transform: rotate(-12deg); } .ftv .ftv-klappe-leiste { margin-bottom: 4px; background: repeating-linear-gradient(55deg, #f4f4f6 0 26px, #15151c 26px 52px); } .ftv .ftv-klappe-arm i, .ftv .ftv-klappe-leiste i { display: none; } .ftv .ftv-klappe.klapp .ftv-klappe-arm { animation: ftv-klapp .75s cubic-bezier(.5, 0, .3, 1); } @keyframes ftv-klapp { 0% { transform: rotate(-12deg); } 35% { transform: rotate(-24deg); } 55% { transform: rotate(0); } 64% { transform: rotate(-2.5deg); } 72%, 88% { transform: rotate(0); } 100% { transform: rotate(-12deg); } } .ftv .ftv-klappe-tafel { padding: 18px 20px 16px; border-radius: 4px 4px 16px 16px; background: #111116; border: 2px solid #2b2b35; } .ftv .ftv-klappe-firma { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, .7); font: 800 15px/1.2 var(--kopf); letter-spacing: .14em; color: #fff; } .ftv .ftv-klappe-firma span { font: 700 10.5px/1.6 var(--mono); letter-spacing: .12em; color: #9aa1ae; } .ftv .ftv-klappe-zeilen { display: grid; margin-top: 4px; } .ftv .ftv-klappe-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 46px; border-bottom: 1px solid rgba(255, 255, 255, .2); } .ftv .ftv-klappe-zeile dt { font: 700 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9aa1ae; } .ftv .ftv-klappe-zeile dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 19px/1.3 var(--kreide); color: #f4f4f6; } .ftv .ftv-klappe-zeile.ist-leer dd { color: #5c606b; } .ftv .ftv-klappe-zeile.neu dd { animation: ftv-kreide .7s ease; } @keyframes ftv-kreide { 0% { color: var(--gold); transform: translateX(-4px); } 100% { color: #f4f4f6; transform: none; } } .ftv .ftv-klappe-fuss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; } .ftv .ftv-klappe-fuss span { display: grid; gap: 4px; padding: 8px 10px; border-left: 1px solid rgba(255, 255, 255, .2); } .ftv .ftv-klappe-fuss span:first-child { border-left: 0; } .ftv .ftv-klappe-fuss small { font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9aa1ae; } .ftv .ftv-klappe-fuss b { font: 400 17px/1.1 var(--kreide); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } /* =================================================================== Ablauf */ .ftv .ftv-ab { display: grid; gap: 18px; } .ftv .ftv-ab-pult { position: relative; padding: 14px 16px 16px; border-radius: 22px; background: #0f0f15; border: 1px solid var(--linie); } .ftv .ftv-ab-lineal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) 0; height: 22px; margin-left: 46px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .ftv .ftv-ab-lineal i { position: relative; border-left: 1px solid rgba(255, 255, 255, .18); } .ftv .ftv-ab-lineal span { position: absolute; left: 5px; top: 2px; font: 700 10px/1 var(--mono); color: #6f7581; } .ftv .ftv-ab-spur { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; } .ftv .ftv-ab-name { display: grid; place-items: center; height: 100%; min-height: 28px; border-radius: 8px; background: #1c1c25; font: 700 11px/1 var(--mono); color: #9aa1ae; } .ftv .ftv-ab-clips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .ftv .ftv-ab-clip { position: relative; display: grid; align-content: center; gap: 4px; height: 66px; padding: 8px 10px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--f) 16%, #16161e); border: 1.5px solid color-mix(in srgb, var(--f) 40%, transparent); text-align: left; transition: background-color .35s, border-color .35s, box-shadow .35s; } .ftv .ftv-ab-clip b { font: 800 12px/1 var(--mono); color: var(--f); } .ftv .ftv-ab-clip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px/1.2 var(--kopf); color: #e3e5ea; } .ftv .ftv-ab-clip:hover { background: color-mix(in srgb, var(--f) 26%, #16161e); } .ftv .ftv-ab-clip.ist-an { background: color-mix(in srgb, var(--f) 40%, #16161e); border-color: var(--f); box-shadow: 0 0 24px -6px var(--f); } .ftv .ftv-ab-clip.ist-an span { color: #fff; } .ftv .ftv-ab-welle { width: 100%; height: 36px; } .ftv .ftv-ab-welle path { stroke: #34d399; stroke-width: 2.2; stroke-linecap: round; opacity: .55; } .ftv .ftv-ab-titel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .ftv .ftv-ab-titel i { height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--f) 50%, transparent); width: 60%; } .ftv .ftv-ab-kopf { position: absolute; top: 30px; bottom: 10px; left: 0; width: 2px; background: var(--rot); border-radius: 1px; pointer-events: none; transition: transform .9s var(--weich); } .ftv .ftv-ab-kopf::before { content: ""; position: absolute; left: -6px; top: -8px; border: 7px solid transparent; border-top: 9px solid var(--rot); border-bottom: 0; } .ftv .ftv-ab-details { display: grid; } .ftv .ftv-ab-d { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nr nr" "titel titel" "text erg"; gap: 6px 26px; padding: 24px 26px; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--f); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .45s var(--weich), visibility 0s .35s; } .ftv .ftv-ab-d.ist-an { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .05s, transform .45s var(--weich) .05s; } .ftv .ftv-ab-d-nr { grid-area: nr; font: 700 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f); } .ftv .ftv-ab-d h3 { grid-area: titel; font-size: clamp(22px, 2.4vw, 30px); } .ftv .ftv-ab-d-text { grid-area: text; max-width: 640px; font-size: 16px; line-height: 1.6; color: #b8bdc9; } .ftv .ftv-ab-d-erg { grid-area: erg; display: flex; align-items: flex-start; gap: 10px; align-self: start; max-width: 340px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--f) 12%, transparent); border: 1px solid color-mix(in srgb, var(--f) 35%, transparent); font-size: 14.5px; line-height: 1.45; color: #e3e5ea; } .ftv .ftv-ab-d-erg .ftv-svg { width: 18px; height: 18px; margin-top: 1px; color: var(--f); } .ftv .ftv-ab-d-erg b { color: #fff; } /* =================================================================== Warum + Kulissen */ .ftv .ftv-warum-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ftv .ftv-w { padding: 24px; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); transition: transform .45s var(--weich), border-color .35s; } .ftv .ftv-w-sym { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 77, 109, .2), rgba(255, 200, 87, .14)); border: 1px solid rgba(255, 138, 61, .35); color: #ffb48a; } .ftv .ftv-w-sym .ftv-svg { width: 25px; height: 25px; } .ftv .ftv-w h3 { font-size: 19px; } .ftv .ftv-w p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #aeb3bf; } @media (hover: hover) { .ftv .ftv-w:hover { transform: translateY(-4px); border-color: rgba(255, 138, 61, .45); } } .ftv .ftv-kulissen { margin-top: 34px; } .ftv .ftv-kulissen-titel { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 800 17px/1.2 var(--kopf); color: #fff; } .ftv .ftv-kulissen-titel .ftv-svg { color: var(--rot); } .ftv .ftv-kulissen-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ftv .ftv-kulisse { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #111; border: 1px solid var(--linie); } .ftv .ftv-kulisse img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ftv .ftv-kulisse span { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .78); font: 600 13px/1.3 var(--kopf); color: #fff; } /* =================================================================== Branchen */ .ftv .ftv-br-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .ftv .ftv-br-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #1d1d26; border: 1.5px solid rgba(255, 255, 255, .1); color: #cfd3db; font: 700 14px/1 var(--kopf); white-space: nowrap; transition: border-color .25s, background-color .25s, color .25s; } .ftv .ftv-br-tab .ftv-svg { width: 18px; height: 18px; color: var(--gold); } .ftv .ftv-br-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .25); background: #1d1d26; } .ftv .ftv-br-tab.ist-an { color: #fff; border-color: var(--orange); background: rgba(255, 138, 61, .16); } .ftv .ftv-br-flaeche { display: grid; } .ftv .ftv-br-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .ftv .ftv-br-panel.ist-an { opacity: 1; visibility: visible; transition: opacity .35s; } .ftv .ftv-br-ideen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ftv .ftv-br-idee { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); } .ftv .ftv-br-panel.ist-an .ftv-br-idee { animation: ftv-auf .5s var(--weich) both; animation-delay: calc(var(--j) * 70ms); } .ftv .ftv-br-num { position: absolute; right: 18px; top: 12px; font: 800 46px/1 var(--kopf); color: rgba(255, 255, 255, .06); } .ftv .ftv-br-idee h3 { font-size: 19px; padding-right: 30px; } .ftv .ftv-br-idee p { margin-top: 8px; margin-bottom: 16px; font-size: 15px; line-height: 1.6; color: #aeb3bf; } .ftv .ftv-br-format { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; width: fit-content; padding: 6px 11px; border-radius: 999px; background: rgba(255, 200, 87, .1); border: 1px solid rgba(255, 200, 87, .3); font: 700 12.5px/1 var(--mono); color: #ffe2a3; } .ftv .ftv-br-format .ftv-svg { width: 14px; height: 14px; } .ftv .ftv-br-los { margin-top: 18px; } /* =================================================================== Fragen */ .ftv .ftv-fragen-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: start; } .ftv .ftv-fragen-raster .ftv-kopf { position: sticky; top: 110px; } .ftv .ftv-faq { display: grid; gap: 10px; } .ftv .ftv-faq-eintrag { border-radius: 20px; background: var(--karte); border: 1px solid var(--linie); transition: border-color .3s, background-color .3s; } .ftv .ftv-faq-eintrag[open] { border-color: rgba(255, 138, 61, .45); background: #211f28; } .ftv .ftv-faq-eintrag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 800 17px/1.35 var(--kopf); color: #fff; } .ftv .ftv-faq-eintrag summary::-webkit-details-marker { display: none; } .ftv .ftv-faq-eintrag summary i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255, 138, 61, .15); color: #ffb48a; transition: transform .4s var(--feder), background-color .3s; } .ftv .ftv-faq-eintrag summary i .ftv-svg { width: 17px; height: 17px; } .ftv .ftv-faq-eintrag[open] summary i { transform: rotate(45deg); background: var(--orange); color: #fff; } .ftv .ftv-faq-eintrag p { padding: 0 20px 20px; font-size: 15.5px; line-height: 1.65; color: #b8bdc9; } /* =================================================================== Kontakt */ .ftv .ftv-kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .85fr); gap: 22px; align-items: start; } .ftv .ftv-karte { position: relative; isolation: isolate; border-radius: 30px; background: var(--karte); box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .95); } .ftv .ftv-karte-rand { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ftv-w), rgba(255, 77, 109, .85), rgba(255, 200, 87, .5), rgba(139, 123, 255, .7), rgba(255, 77, 109, .85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; } @media (hover: hover) { .ftv .ftv-karte-rand { animation: ftv-dreh 10s linear infinite; } } @keyframes ftv-dreh { to { --ftv-w: 360deg; } } .ftv .ftv-karte-innen { position: relative; padding: clamp(22px, 3.4vw, 42px); transition: opacity .45s ease, transform .5s var(--weich); } .ftv .ftv-form-kopf h2 { font-size: clamp(30px, 3.6vw, 46px); } .ftv .ftv-form-kopf > p:last-child { margin-top: 12px; margin-bottom: 26px; font-size: 16.5px; line-height: 1.6; color: #b4b9c5; max-width: 560px; } .ftv .ftv-merk-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 138, 61, .08); border: 1px solid rgba(255, 138, 61, .3); } .ftv .ftv-merk-zeile > b { display: inline-flex; align-items: center; gap: 7px; font: 700 13.5px/1 var(--kopf); color: #ffd2b8; } .ftv .ftv-merk-zeile > b .ftv-svg { width: 16px; height: 16px; } .ftv .ftv-merk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; background: #2c2228; color: #ffe4d6; font: 600 13px/1 var(--kopf); } .ftv .ftv-merk-chip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; } .ftv .ftv-merk-chip button .ftv-svg { width: 12px; height: 12px; } .ftv .wpcf7 { margin: 0; } .ftv .wpcf7-form { margin: 0; } .ftv .wpcf7-form p { margin: 0; } .ftv .wpcf7 .columns_wrap { margin: 0 !important; } .ftv .wpcf7 [class*="column-"] { width: auto !important; padding: 0 !important; float: none !important; } .ftv .style-line { display: block; margin: 0 !important; } .ftv .style-line::before, .ftv .style-line::after { display: none !important; } .ftv .wpcf7-form-control-wrap { display: block; position: relative; } .ftv .wpcf7 input[type="text"], .ftv .wpcf7 input[type="email"], .ftv .wpcf7 input[type="tel"], .ftv .wpcf7 textarea { display: block; width: 100% !important; max-width: none !important; height: auto !important; min-height: 56px; margin: 0 !important; padding: 16px 16px !important; border: 1.5px solid rgba(255, 255, 255, .1) !important; border-radius: 15px !important; background: var(--feld) !important; color: #fff !important; font: 500 16px/1.4 var(--fliess) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; outline: none !important; transition: border-color .25s, box-shadow .25s, background-color .25s; } .ftv .wpcf7 textarea { min-height: 170px; resize: vertical; } .ftv .wpcf7 input::placeholder, .ftv .wpcf7 textarea::placeholder { color: #6f7581 !important; opacity: 1; } .ftv .wpcf7 input:hover, .ftv .wpcf7 textarea:hover { border-color: rgba(255, 255, 255, .2) !important; } .ftv .wpcf7 input:focus, .ftv .wpcf7 textarea:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 4px rgba(255, 138, 61, .2) !important; background: #18171c !important; } .ftv .wpcf7 .wpcf7-not-valid { border-color: rgba(244, 63, 94, .8) !important; } .ftv .wpcf7-not-valid-tip { margin-top: 6px; font: 600 13px/1.3 var(--kopf); color: #fda4af; } .ftv .ftv-feld-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; } .ftv .ftv-feld { display: block; margin: 0; cursor: text; } .ftv .ftv-feld-titel { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font: 700 14px/1.2 var(--kopf); color: #e3e5ea; } .ftv .ftv-feld-titel .ftv-svg { width: 17px; height: 17px; color: #ffb48a; transition: transform .35s var(--weich), color .3s; } .ftv .ftv-feld:focus-within .ftv-feld-titel .ftv-svg { color: var(--gold); transform: scale(1.15); } .ftv .ftv-feld-titel i { font-style: normal; color: #ff8fa3; } .ftv .ftv-feld-titel em { font-style: normal; font-weight: 500; color: #8d93a0; } .ftv .ftv-themen { margin: 0 0 16px; } .ftv .ftv-nachricht { position: relative; margin-bottom: 8px; } .ftv .ftv-zaehler { display: flex; justify-content: flex-end; margin-top: 7px; font: 600 12.5px/1 var(--kopf); color: #6f7581; font-variant-numeric: tabular-nums; } .ftv .ftv-zaehler.ist-knapp { color: #fbbf24; } .ftv .ftv-hinweis { display: none; align-items: center; gap: 10px; margin: 10px 0 0; padding: 12px 14px; border-radius: 13px; border: 1px solid rgba(244, 63, 94, .45); background: rgba(244, 63, 94, .08); color: #fecdd3; font: 600 14.5px/1.4 var(--kopf); } .ftv .ftv-hinweis.ist-da { display: flex; animation: ftv-ruck .45s ease; } @keyframes ftv-ruck { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } .ftv .ftv-absenden { position: relative; display: inline-flex; align-items: center; margin: 18px 0 0 !important; } .ftv .wpcf7-submit-style { position: relative; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } .ftv .submit-style-in { display: none !important; } .ftv .wpcf7 input.wpcf7-submit { min-height: 58px; padding: 0 60px 0 30px !important; border: 0 !important; border-radius: 999px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") right 26px center / 20px no-repeat, linear-gradient(120deg, #ff4d6d, #ff7a45 55%, #ffb347) !important; color: #fff !important; font: 700 16.5px/1 var(--kopf) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; box-shadow: 0 14px 34px -14px rgba(255, 77, 109, .9) !important; transition: transform .35s var(--weich), box-shadow .35s, opacity .3s, background-position .45s var(--weich); } .ftv .wpcf7 input.wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(255, 77, 109, 1) !important; background-position: right 21px center, 0 0 !important; } .ftv .wpcf7 input.wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; } .ftv .wpcf7-spinner { position: absolute !important; right: 18px; top: 50%; margin: -12px 0 0 !important; z-index: 2; background-color: #ff5a5f !important; } .ftv .wpcf7 form .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px 16px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .15) !important; color: #e3e5ea; font-size: 14.5px; } .ftv .wpcf7 form.invalid .wpcf7-response-output, .ftv .wpcf7 form.unaccepted .wpcf7-response-output, .ftv .wpcf7 form.failed .wpcf7-response-output, .ftv .wpcf7 form.spam .wpcf7-response-output { border-color: rgba(244, 63, 94, .5) !important; background: rgba(244, 63, 94, .08); } .ftv .wpcf7 form.sent .wpcf7-response-output { display: none !important; } .ftv .ftv-datenschutz { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: #8d93a0; } .ftv .ftv-datenschutz .ftv-svg { width: 18px; height: 18px; margin-top: 1px; color: var(--gruen); } .ftv .ftv-datenschutz a { color: #ffb48a; text-decoration: underline; text-underline-offset: 3px; } .ftv .ftv-datenschutz a:hover { color: #fff; text-decoration: underline; } .ftv .ftv-danke { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; opacity: 0; visibility: hidden; outline: none; } .ftv .ftv-karte.ist-fertig .ftv-karte-innen { opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .35s ease, transform .4s ease, visibility 0s .4s; } .ftv .ftv-karte.ist-fertig .ftv-danke { opacity: 1; visibility: visible; transition: opacity .5s ease .25s; } .ftv .ftv-danke .ftv-klappe { width: min(100%, 300px); } .ftv .ftv-danke h2 { margin-top: 22px; font-size: clamp(28px, 3.4vw, 42px); } .ftv .ftv-danke > p { margin-top: 10px; max-width: 460px; font-size: 16px; line-height: 1.6; color: #b8bdc9; } .ftv .ftv-danke .ftv-knopf { margin-top: 26px; } .ftv .ftv-danke-haken { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .4); color: #a7f3d0; font: 700 13.5px/1 var(--kopf); } .ftv .ftv-danke-haken .ftv-svg { width: 16px; height: 16px; } .ftv .ftv-klappe-gross { margin-top: 14px; font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--kreide); color: #fff; } .ftv .ftv-spalte { display: grid; gap: 14px; } .ftv .ftv-spalte-bild { padding: 26px 24px 28px; border-radius: 26px; background: radial-gradient(400px circle at 50% 70%, rgba(255, 138, 61, .16), transparent 60%), var(--karte); border: 1px solid var(--linie); } .ftv .ftv-klappe--klein { margin-inline: auto; width: min(100%, 300px); padding-top: 72px; } .ftv .ftv-klappe--klein .ftv-klappe-arm, .ftv .ftv-klappe--klein .ftv-klappe-leiste { height: 34px; } .ftv .ftv-klappe--klein .ftv-klappe-arm { animation: ftv-klapp-ruhe 5s cubic-bezier(.5, 0, .3, 1) infinite; } @keyframes ftv-klapp-ruhe { 0%, 80% { transform: rotate(-12deg); } 86% { transform: rotate(-22deg); } 90% { transform: rotate(0); } 93% { transform: rotate(-2deg); } 96% { transform: rotate(0); } 100% { transform: rotate(-12deg); } } .ftv .ftv-weg { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); color: #fff; transition: transform .4s var(--weich), border-color .3s; } .ftv .ftv-weg > .ftv-svg { width: 18px; height: 18px; margin-left: auto; color: #8d93a0; transition: transform .35s var(--weich); } .ftv .ftv-weg-sym { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 15px; background: linear-gradient(120deg, #ff4d6d, #ff8a3d); color: #fff; } .ftv .ftv-weg--wa .ftv-weg-sym { background: linear-gradient(120deg, #059669, #34d399); } .ftv .ftv-weg--mail .ftv-weg-sym { background: linear-gradient(120deg, #0891b2, #22d3ee); } .ftv .ftv-weg--anfrage .ftv-weg-sym { background: linear-gradient(120deg, #6d5cff, #c026d3); } .ftv .ftv-weg small { display: block; font: 700 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9aa1ae; } .ftv .ftv-weg b { display: block; margin-top: 3px; font: 800 16px/1.25 var(--kopf); color: #fff; overflow-wrap: anywhere; } @media (hover: hover) { .ftv .ftv-weg:hover { transform: translateY(-3px); border-color: rgba(255, 138, 61, .7); } .ftv .ftv-weg:hover > .ftv-svg { transform: translateX(4px); color: #fff; } } /* Funken */ .ftv .ftv-funken { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; } .ftv .ftv-funke { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--c, #ff8a3d); animation: ftv-funke .9s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes ftv-funke { from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.3); opacity: 0; } } /* Merkleiste */ .ftv .ftv-merkleiste { position: fixed; left: 50%; bottom: 18px; z-index: 100040; visibility: hidden; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: #262631; border: 1px solid rgba(255, 138, 61, .5); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .9); transform: translate(-50%, 160%); transition: transform .5s var(--feder), visibility 0s .5s; } .ftv .ftv-merkleiste.ist-da { visibility: visible; transform: translate(-50%, 0); transition: transform .5s var(--feder), visibility 0s; } .ftv .ftv-merkleiste-zahl { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); } .ftv .ftv-merkleiste-zahl .ftv-svg { width: 20px; height: 20px; } .ftv .ftv-merkleiste-zahl b { display: inline-block; min-width: 1.4ch; font: 800 17px/1 var(--kopf); color: #fff; font-variant-numeric: tabular-nums; } .ftv .ftv-merkleiste-text { font: 600 14px/1 var(--kopf); color: #c7cbd4; white-space: nowrap; } .ftv .ftv-merkleiste-los { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: linear-gradient(120deg, #ff4d6d, #ff8a3d); color: #fff; font: 700 14.5px/1 var(--kopf); white-space: nowrap; } .ftv .ftv-merkleiste-los:hover { background: linear-gradient(120deg, #ff4d6d, #ff8a3d); color: #fff; } .ftv .ftv-merkleiste-los .ftv-svg { width: 16px; height: 16px; } /* =================================================================== Bildschirmgrößen */ @media (max-width: 1100px) { .ftv .ftv-stil-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftv .ftv-ev-raster { grid-template-columns: 1fr; } .ftv .ftv-ev-seite { grid-template-columns: 1fr 1fr; align-items: start; gap: 14px 24px; } .ftv .ftv-ev-seite > .ftv-ev-titel:nth-of-type(1) { grid-column: 1; grid-row: 1; } .ftv .ftv-ev-seite > .ftv-ev-stile { grid-column: 1; grid-row: 2; } .ftv .ftv-ev-seite > .ftv-ev-titel:nth-of-type(2) { grid-column: 2; grid-row: 1; } .ftv .ftv-ev-seite > .ftv-ev-kapitel { grid-column: 2; grid-row: 2; } .ftv .ftv-ev-seite > .ftv-ev-hinweis { grid-column: 1 / -1; } } @media (max-width: 1000px) { .ftv .ftv-held-raster { grid-template-columns: 1fr; } .ftv .ftv-reel { grid-template-columns: 1fr; grid-template-areas: "buehne" "liste" "unter"; } .ftv .ftv-reel-liste { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ftv .ftv-reel-liste::-webkit-scrollbar { display: none; } .ftv .ftv-reel-wahl { flex: 0 0 auto; width: 250px; scroll-snap-align: start; } .ftv .ftv-reel-wahl:hover { transform: none; } .ftv .ftv-fw { grid-template-columns: 1fr; } .ftv .ftv-pl { grid-template-columns: 1fr; } .ftv .ftv-pl-ort { position: static; margin-top: 46px; } .ftv .ftv-warum-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftv .ftv-br-ideen { grid-template-columns: 1fr; } .ftv .ftv-fragen-raster { grid-template-columns: 1fr; } .ftv .ftv-fragen-raster .ftv-kopf { position: static; } .ftv .ftv-kontakt-raster { grid-template-columns: 1fr; } .ftv .ftv-ab-d { grid-template-columns: 1fr; grid-template-areas: "nr" "titel" "text" "erg"; } } @media (max-width: 700px) { .ftv .ftv-held h1 { font-size: clamp(36px, 10.4vw, 48px); } .ftv .ftv-knoepfe .ftv-knopf { width: 100%; } .ftv .ftv-sprung { display: none; } .ftv .ftv-sucher { width: min(72vw, 300px); } .ftv .ftv-pegel, .ftv .ftv-schwebe.s2 { display: none; } .ftv .ftv-klappe-mini { display: none; } .ftv .ftv-schwebe.s1 { right: 0; top: 40px; } .ftv .ftv-schwebe.s3 { left: 0; top: 120px; } .ftv .ftv-tc, .ftv .ftv-blende { bottom: 40px; font-size: 10.5px; } .ftv .ftv-rec, .ftv .ftv-akku { top: 40px; font-size: 10.5px; } .ftv .ftv-reel-buehne { aspect-ratio: 1 / 1; } .ftv .ftv-reel-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; } .ftv .ftv-reel-fotos { padding: 10px; gap: 8px; } .ftv .ftv-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; } .ftv .ftv-filter::-webkit-scrollbar { display: none; } .ftv .ftv-katalog { grid-template-columns: 1fr; } .ftv .ftv-f { padding: 18px; } .ftv .ftv-ev { padding: 8px; border-radius: 20px; } .ftv .ftv-ev-leiste { gap: 8px; padding: 10px 2px 2px; } .ftv .ftv-ev-zeit { min-width: 0; font-size: 11.5px; } .ftv .ftv-ev-ut { bottom: 3%; padding: 0 3%; } .ftv .ftv-ev-ut span { padding: .25em .6em; border-radius: 6px; font-size: 11px; } .ftv .ftv-ev-pp, .ftv .ftv-ev-cc { width: 38px; height: 38px; } .ftv .ftv-play-rund { width: 62px; height: 62px; } .ftv .ftv-ev-seite { grid-template-columns: 1fr; } .ftv .ftv-ev-seite > * { grid-column: 1 !important; grid-row: auto !important; } .ftv .ftv-ev-stile { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftv .ftv-ev-stil { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; } .ftv .ftv-ev-stil small { display: none; } .ftv .ftv-stil-raster { gap: 10px; } .ftv .ftv-stil-text { padding: 10px 12px 12px; } .ftv .ftv-stil-text b { font-size: 14.5px; } .ftv .ftv-stil-text span { font-size: 12.5px; } .ftv .ftv-fw-buehne { height: 380px; } .ftv .ftv-fw-knoepfe { gap: 6px; } .ftv .ftv-fw-knopf { padding: 10px 2px 8px; border-radius: 12px; } .ftv .ftv-fw-knopf small { display: none; } .ftv .ftv-fw-mini { height: 20px; width: calc(20px * var(--r)); max-width: 40px; } .ftv .ftv-klappe-zeile { grid-template-columns: 78px minmax(0, 1fr); min-height: 42px; } .ftv .ftv-klappe-zeile dd { font-size: 17px; } .ftv .ftv-klappe-fuss b { font-size: 14px; } .ftv .ftv-klappe-fuss span { padding: 7px 7px; } .ftv .ftv-ab-lineal span { display: none; } .ftv .ftv-ab-spur { grid-template-columns: 26px minmax(0, 1fr); gap: 6px; } .ftv .ftv-ab-lineal { margin-left: 32px; } .ftv .ftv-ab-clip { height: 50px; padding: 6px; place-items: center; text-align: center; } .ftv .ftv-ab-clip b { font-size: 15px; } .ftv .ftv-ab-clip span { display: none; } .ftv .ftv-ab-pult { padding: 10px 10px 12px; } .ftv .ftv-ab-d { padding: 20px; } .ftv .ftv-warum-raster { grid-template-columns: 1fr; gap: 10px; } .ftv .ftv-w { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 14px; padding: 18px; } .ftv .ftv-w-sym { grid-row: span 2; width: 46px; height: 46px; margin: 0; border-radius: 14px; } .ftv .ftv-w h3 { font-size: 17.5px; } .ftv .ftv-w p { margin-top: 4px; font-size: 14.5px; } .ftv .ftv-kulissen-reihe { display: flex; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; } .ftv .ftv-kulissen-reihe::-webkit-scrollbar { display: none; } .ftv .ftv-kulisse { flex: 0 0 78%; scroll-snap-align: start; } .ftv .ftv-br-reiter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; } .ftv .ftv-br-reiter::-webkit-scrollbar { display: none; } .ftv .ftv-br-los { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 10px; } .ftv .ftv-faq-eintrag summary { font-size: 16px; padding: 16px; } .ftv .ftv-faq-eintrag p { padding: 0 16px 16px; } .ftv .wpcf7 input.wpcf7-submit { width: 100%; } .ftv .ftv-absenden, .ftv .wpcf7-submit-style { display: flex !important; width: 100%; } .ftv .ftv-merkleiste { left: 12px; right: 84px; bottom: 14px; justify-content: space-between; transform: translateY(160%); } .ftv .ftv-merkleiste.ist-da { transform: none; } .ftv .ftv-merkleiste-text { display: none; } } @media (prefers-reduced-motion: reduce) { .ftv *, .ftv *::before, .ftv *::after { animation: none !important; transition-duration: .01ms !important; } }