/* Theme Name: theme.dokfilm.2025 Theme URI: Author: eric lacaze | lacaze-carnier.com / iuno.co Author URI: Description: Theme für DOKFilm Requires at least: 6.0 Tested up to: 6.8.3 Requires PHP: 8.1 Version: 2025.10 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: theme-dokfilm-2025 Tags: */ //.wp-block-spacer { background: repeating-linear-gradient(45deg, #00000020, #00000020 1rem, #ffffff40 1rem, #ffffff40 2rem); } /* section */ section { z-index: +2; } /* hide */ @media (mxn-width: 600px) { .hide-on-mobile { display: none !important; } } @media (min-width: 600px) AND (max-width: 992px) { .hide-on-tablet { display: none !important; } } @media (min-width: 992px) { .hide-on-desktop { display: none !important; } } /* group */ .wp-block-group { position: relative; } :where(.wp-block-group.has-background) { padding: 0; margin: 0; } #iuno-access { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; } .is-style-iuno-accessibility { padding: 0 1rem 0 1rem; max-width: 1392px; margin: 0 auto; height: 42px; overflow: hidden; } .is-style-iuno-inner-container { padding: 0 1rem; max-width: 992px; } .is-style-iuno-inner-container.alignwide { max-width: 1392px; } @media (min-width: 600px) { .is-style-iuno-accessibility { padding: 0m 1.5rem 0 1.5rem; } .is-style-iuno-inner-container { padding: 0 1.5rem; } } @media (min-width: 992px) { .is-style-iuno-accessibility { padding: 0 2rem 0 2rem; } .is-style-iuno-inner-container { padding: 0 2rem; } } .is-style-iuno-2x3 { aspect-ratio: 2 / 3; } .is-style-iuno-3x4 { aspect-ratio: 3 / 4; } .is-style-iuno-4x3 { aspect-ratio: 4 / 3; } .is-style-iuno-16x10 { aspect-ratio: 16 / 10; } .is-style-iuno-16x9 { aspect-ratio: 16 / 9; } .is-style-iuno-2x3, .is-style-iuno-3x4, .is-style-iuno-4x3, .is-style-iuno-16x10, .is-style-iuno-16x9 { width: 100%; height: auto; background-position: center center; display: flex; align-items: center; } .single-team .is-style-iuno-2x3.wp-block-post-featured-image, .single-team .is-style-iuno-3x4.wp-block-post-featured-image { align-self: center; } /* paragraph */ h1, .is-style-iuno-h1 { font-size: 1.875rem; font-weight: 600; line-height: 1; margin: 0; letter-spacing: 1.5px; text-transform: uppercase; } h2, .is-style-iuno-h2 { font-size: 1.5rem; font-weight: 600; line-height: 1; margin: 0; } h3, .is-style-iuno-h3 { font-size: 1.25rem; font-weight: 600; line-height: 1; margin: 0; } h4, .is-style-iuno-h4 { font-size: 1rem; font-weight: 600; line-height: 1; margin: 0; } h5, .is-style-iuno-h5 { font-size: 1rem; font-weight: 600; line-height: 1; margin: 0; } h6, .is-style-iuno-h6 { font-size: 1rem; font-weight: 600; line-height: 1; margin: 0; } .is-style-iuno-ellipsis { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } p, li, dt, dd, dl, address, label, small, pre, code { letter-spacing: 0.02em; } p, li, dt, dd, dl, address, label, pre, code { font-size: 1rem; line-height: 1.75; } b, strong { font-weight: 600; } main a:visited, .is-root-container a:visited, main a, .is-root-container a { color: var(--iuno-black); position: relative; } main a:hover, .is-root-container a:hover, main a:focus, .is-root-container a:focus { color: var(--iuno-dark-grey); } main a::after, .is-root-container a::after { content: ''; position: absolute; bottom: -0.25rem; left: 0; right: 0; width: auto; height: 1px; background-color: var(--iuno-block); } .produktionen-template-default .is-style-iuno-inner-container p { max-width: 992px; position: relative; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 1rem; } .is-style-iuno-intro { text-align: center; font-weight: 600; } .is-style-iuno-normal { text-align: center; font-weight: 400; } .is-style-iuno-no-margin { margin-bottom: 0; } @media (max-width: 800px) { .is-style-iuno-intro { text-align: left; } .is-style-iuno-normal { text-align: left; } } /* accessibility */ .iuno-accessibility { position: relative; height: auto; z-index: 5; display: flex; flex-direction: row; justify-content: flex-end; column-gap: 1rem; } .modal-body.iuno-accessibility { flex-direction: column; column-gap: 0; row-gap: 1rem; } .modal-backdrop { background-color: transparent; } .modal-dialog { margin: 1rem auto; max-width: 80%; width: 500px; } .modal-dialog .btn-close { color: var(--iuno-black); } .modal-dialog .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--iuno-black)'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); } @media (min-width: 600px) { .iuno-accessibility { column-gap: 2rem; } .modal-body.iuno-accessibility { column-gap: 0; } } .modal-content { border-radius: 0; box-shadow: 0 0 0 5px var(--iuno-accent-red); border: 0; background-color: var(--iuno-white); color: var(--iuno-black); } button[class*="iuno-access-control-"] { display: inline-flex; flex-flow: row nowrap; } .iuno-accessibility .iuno-button { position: relative; color: var(--iuno-black); background-color: transparent !important; float: right; margin: 0; padding: 0 !important; cursor: pointer; border: 0 !important; font-size: 0.8rem; font-weight: bold; line-height: 1.4rem; text-transform: uppercase; } .iuno-accessibility .iuno-switch { position: relative; color: var(--iuno-black); background-color: transparent !important; float: right; margin: 0; padding: 0 !important; cursor: pointer; border: 0 !important; font-size: 0.8rem; font-weight: bold; line-height: 1.4rem; text-transform: uppercase; } .iuno-accessibility .iuno-switch span { position: relative; width: 2.25rem !important; height: calc(1rem - 2px) !important; margin: .25rem 0 0 .25rem; vertical-align: top; cursor: pointer; border-radius: 2rem; transition: background-position .15s ease-in-out; background-color: var(--iuno-white); background-position: left center; background-repeat: no-repeat; background-size: contain; border: 1px solid var(--iuno-black); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f72440'/%3e%3c/svg%3e"); } .iuno-accessibility .iuno-switch span::before, .iuno-accessibility .iuno-switch span::after { position: absolute; top: 0; transition: opacity .15s ease-in-out; font-size: 0.5rem; line-height: 0.8rem; text-transform: uppercase; color: var(--iuno-black); } .iuno-access-control-animations.iuno-switch span, .iuno-access-control-transparency.iuno-switch span { background-color: var(--iuno-white); background-position: right center; background-repeat: no-repeat; background-size: contain; border: 1px solid var(--iuno-black); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2320a04e'/%3e%3c/svg%3e"); } .is-dark-mode .iuno-access-control-dark-mode.iuno-switch span { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2320a04e'/%3e%3c/svg%3e"); } .iuno-access-control-dark-mode.iuno-switch span::before { opacity: 0; content: "AN"; left: 0.2rem; } .is-dark-mode .iuno-access-control-dark-mode.iuno-switch span::before { opacity: 1; } .iuno-access-control-dark-mode.iuno-switch span::after { opacity: 1; content: "AUS"; right: 0.2rem; } .is-dark-mode .iuno-access-control-dark-mode.iuno-switch span::after { opacity: 0; } .no-transitions .iuno-access-control-animations.iuno-switch span { background-position: left center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f72440'/%3e%3c/svg%3e"); } .iuno-access-control-animations.iuno-switch span::before { opacity: 0; content: "AUS"; right: 0.2rem; } .no-transitions .iuno-access-control-animations.iuno-switch span::before { opacity: 1; } .iuno-access-control-animations.iuno-switch span::after { opacity: 1; content: "AN"; left: 0.2rem; } .no-transitions .iuno-access-control-animations.iuno-switch span::after { opacity: 0; } .no-transparency .iuno-access-control-transparency.iuno-switch span { background-position: left center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f72440'/%3e%3c/svg%3e"); } .iuno-access-control-transparency.iuno-switch span::before { opacity: 0; content: "AUS"; right: 0.2rem; } .no-transparency .iuno-access-control-transparency.iuno-switch span::before{ opacity: 1; } .iuno-access-control-transparency.iuno-switch span::after { opacity: 1; content: "AN"; left: 0.2rem; } .no-transparency .iuno-access-control-transparency.iuno-switch span::after { opacity: 0; } .is-max-contrast .iuno-access-control-max-contrast.iuno-switch span { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2320a04e'/%3e%3c/svg%3e"); } .iuno-access-control-max-contrast.iuno-switch span::before { opacity: 0; content: "AN"; left: 0.2rem; } .is-max-contrast .iuno-access-control-max-contrast.iuno-switch span::before { opacity: 1; } .iuno-access-control-max-contrast.iuno-switch span::after { opacity: 1; content: "AUS"; right: 0.2rem; } .is-max-contrast .iuno-access-control-max-contrast.iuno-switch span::after { opacity: 0; } .has-iuno-access-reading-mask .iuno-access-control-reading-mask.iuno-switch span { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2320a04e'/%3e%3c/svg%3e"); } .iuno-access-control-reading-mask.iuno-switch span::before { opacity: 0; content: "AN"; left: 0.2rem; } .has-iuno-access-reading-mask .iuno-access-control-reading-mask.iuno-switch span::before{ opacity: 1; } .iuno-access-control-reading-mask.iuno-switch span::after { opacity: 1; content: "AUS"; right: 0.2rem; } .has-iuno-access-reading-mask .iuno-access-control-reading-mask.iuno-switch span::after { opacity: 0; } .iuno-access-control-contrast-plus span, .iuno-access-control-contrast-minus span { border-width: 1px; border-style: solid; border-radius: 100%; width: calc(1rem - 2px) !important; border-color:*@color-mix(in oklab, •color(display-p3 1 0 1), •color (display-p3 0 1 1)) ; height: calc(1rem - 2px) !important; display: block; font-size: 0.7rem; line-height: 0.6rem; margin: calc(0.3rem - 1px) 0 calc(0.3rem - 1px) 0.25rem; color: var(--iuno-black); } .iuno-access-control-reset { display: inline-block; padding: 0.5rem 1rem; font-weight: 600; border-radius: 0; text-decoration: none; white-space: nowrap; margin: 0; border: 0; background-color: var(--iuno-red); color: var(--iuno-always-white); } .iuno-access-close { display: inline-block; padding: 0.5rem 1rem; font-weight: 600; border-radius: 0; text-decoration: none; white-space: nowrap; margin: 0 0 0 0.5rem; border: 0; background-color: var(--iuno-grey); color: var(--iuno-black); } .iuno-accessibility-modal { display: inline-flex; flex-flow: row nowrap; } .iuno-accessibility-modal svg { width: calc(1rem - 2px); height: calc(1rem - 2px); margin: 0.25rem 0 0 0.25rem; fill: var(--iuno-black); } /* button */ main .is-style-iuno-button a { color: var(--iuno-white); background-color: var(--iuno-black); text-transform: uppercase; padding: 0.5rem 1rem; } main .is-style-iuno-button a:hover, main .is-style-iuno-button a:active, main .is-style-iuno-button a:focus { background-color: var(--iuno-dark-grey); } /* columns / map / .... */ .is-style-iuno-team { display: grid !important; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 2rem; grid-row-gap: 2rem; } .is-style-iuno-productions { display: grid !important; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 2rem; grid-row-gap: 2rem; } .is-style-iuno-team-detail { display: grid !important; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 2rem; grid-row-gap: 2rem; align-items: flex-end; } @media (min-width: 800px) { .is-style-iuno-team { grid-template-columns: repeat(2, 1fr); } .is-style-iuno-productions { grid-template-columns: repeat(2, 1fr); } .is-style-iuno-team-detail { grid-template-columns: 40% auto; } } @media (min-width: 992px) { .is-style-iuno-team { grid-template-columns: repeat(3, 1fr); } .is-style-iuno-productions { grid-template-columns: repeat(3, 1fr); } } .is-style-iuno-w-100 { max-width: 100%; width: 100%; } .is-style-iuno-map, .is-style-iuno-map .is-style-iuno-h-50, .is-style-iuno-h-50, .is-style-iuno-h-100 { transition: height 0.25s ease-in-out } .is-style-iuno-map { min-height: calc((100vh - var(--headerHeight) - 4rem) / 2); background-position: center calc(50% - 50px); background-size: auto !important; } .is-style-iuno-map .is-style-iuno-h-50 { min-height: calc((100vh - var(--headerHeight) - 4rem) / 2); justify-content: space-between; } .is-style-iuno-h-50 { min-height: calc((100vh - var(--headerHeight) - 4rem) / 2); display: flex; align-items: center; } .is-style-iuno-h-100 { min-height: calc(100vh - var(--headerHeight) - 4rem); } .is-style-iuno-2-col { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 5rem; grid-row-gap: 0; max-width: 800px; position: relative; margin: 0 auto; align-items: start; } .is-style-iuno-2-col div.wp-block-group { width: 100%; } @media (max-width: 800px) { .is-style-iuno-2-col { grid-template-columns: repeat(1, 1fr); } } /* scroll up */ .iuno-scroll-up { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; background-color: var(--iuno-red); color: var(--iuno-white); padding: 0; font-weight: 600; border-radius: 0; text-decoration: none; cursor: pointer; } .iuno-scroll-up::after { content: '❯'; color: var(--iuno-always-white); background-image: none; width: 2rem; height: 2rem; text-align: center; transform: rotate(-90deg); font-size: 1rem; line-height: 2rem; display: block; } /* address */ address { font-style: normal; color: var(--iuno-always-white); } address a:hover, address a:focus, address a:active { color: var(--iuno-yellow); } address span { white-space: nowrap; } /* video */ .is-style-iuno-video-auto video { width: auto; max-width: 100%; height: auto; } .is-style-iuno-video-100 video { width: 100%; height: auto; } /* suche */ .wp-block-search__input { border: 1px solid var(--iuno-black); background-color: var(--iuno-white); color: var(--iuno-black); line-height: 1.5rem; padding: 0 0.5rem; height: 2.3rem; transition: width 0.2s ease-in-out; } .wp-block-search__input:hover, .wp-block-search__input:focus { border: 1px solid var(--iuno-red); } .wp-block-search__button { border: 1px solid var(--iuno-accent-red); background-color: var(--iuno-accent-red); color: var(--iuno-always-white); line-height: 1.5rem; padding: 0 1rem; height: 2.3rem; transition: padding 0.2s ease-in-out; } .wp-block-search__button:hover, .wp-block-search__button:focus { padding: 0 1.5rem } #search-results a:hover, #search-results a:active, #search-results a:focus { color: var(--iuno-accent-red); } #search-results h4 span { font-weight: 400; font-size: 1rem; } /* akkordeon */ #iuno-accordeon * { border-radius: 0 !important; } .iuno-accordeon .accordion-body { padding: 1rem; background-color: var(--iuno-white); } .iuno-accordeon .accordion-item { background-color: var(--iuno-white); border-radius: 0; border-color: var(--iuno-grey); } .iuno-accordeon .accordion-button { padding: 0.5rem 1rem; color: var(--iuno-black); background-color: var(--iuno-white); font-weight: 700; border-width: 0; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; } .iuno-accordeon .accordion-button[aria-expanded="true"] { background-color: var(--iuno-grey); } .iuno-accordeon .accordion-body p:last-of-type, .iuno-accordeon .accordion-body ul:last-of-type { margin-bottom: 0; } .iuno-accordeon .accordion-body ul { list-style: none outside none; list-style-type: '· '; padding: 0 0 0 0.5rem; } .iuno-accordeon .accordion-body ul li { font-weight: 400; font-style: normal; } /* filter */ .search-filter-input-button-group button { text-transform: uppercase; border: 0 !important; letter-spacing: 1.5px; font-weight: 600; } .search-filter-input-button-group button.search-filter-input-button--is-selected { color: var(--iuno-white) !important; } .search-filter-input-button-group button:hover, .search-filter-input-button-group button:focus, .search-filter-input-button-group button:active { color: var(--iuno-grey) !important; } /* production */ .iuno-production { position: relative; } .iuno-production a { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; max-width: 992px; background-color: var(--iuno-always-black); display: block; } .iuno-production img { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 10; object-fit: cover; object-position: center center; opacity: 0.8; -webkit-transition: transform 0.25s ease-in-out; -moz-transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; transform-origin: center center; transform: scale(1); } .iuno-production a:hover img { transform: scale(1.1); } .iuno-production .iuno-production-inner { position: absolute; width: 100%; height: auto; z-index: 20; bottom: 10%; display: flex; align-items: center; color: var(--iuno-always-white); padding: 3rem 2rem; } .iuno-production .iuno-production-inner p { position: absolute; display: block; width: calc(100% - 4rem); margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1.5rem; line-height: 1.1; font-weight: 300; } .iuno-production-head { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 1392px; background-color: var(--iuno-always-black); } .iuno-production-head img { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 10; object-fit: cover; object-position: center center; opacity: 0.8; } .iuno-production-head .iuno-production-head-inner { position: absolute; width: 100%; height: auto; z-index: 20; bottom: 10%; display: flex; align-items: center; color: var(--iuno-always-white); padding: 3rem 2rem; } .iuno-production-head .iuno-production-head-inner p { position: absolute; display: block; width: calc(100% - 4rem); margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 1.5px; font-size: 3rem; line-height: 1.1; font-weight: 300; } @media (max-width: 992px) { .iuno-production-head .iuno-production-head-inner p { font-size: 2rem; } } @media (max-width: 600px) { .iuno-production-head .iuno-production-head-inner p { font-size: 1.5rem; } } .iuno-production-gallery { margin-top: 5rem; } .iuno-production-gallery ul { position: relative; list-style: none outside none; max-width: 992px; padding: 0; margin: 0 auto; display: grid !important; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 2rem; grid-row-gap: 2rem; } .iuno-production-gallery ul img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center center; } @media (min-width: 600px) { .iuno-production-gallery ul { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .iuno-production-gallery ul { grid-template-columns: repeat(3, 1fr); } } .iuno-production-links { margin-top: 2rem; display: flex; justify-content: space-evenly; }