/*
Theme Name:  PFFB block theme
Description: Custom block theme for the Pornfilmfestival Berlin based on Twenty Twenty-Five
Template:    twentytwentythree
Author:      The team of the Pornfilmfestival Berlin
Author URI:  http://pornfilmfestivalberlin.de
Version:     1.15
Text Domain: pffb
*/





/* Fonts */

@font-face {
	font-family: 'Switzer';
	src: url('/lib/fonts/switzer/Switzer-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Switzer';
	src: url('/lib/fonts/switzer/Switzer-Italic.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Switzer';
	src: url('/lib/fonts/switzer/Switzer-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Switzer';
	src: url('/lib/fonts/switzer/Switzer-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Bodoni Moda';
	src: url('/lib/fonts/bodoni-moda/bodoni-moda-latin.woff2') format('woff2');
	font-weight: 400 900;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Bodoni Moda';
	src: url('/lib/fonts/bodoni-moda/bodoni-moda-latin-italic.woff2') format('woff2');
	font-weight: 400 900;
	font-display: swap;
	font-style: italic;
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

/* Grundschrift */
body {
    font-family: 'Switzer', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

/* H1 */
h1 {
    font-family: 'Switzer', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
}

/* H2 */
h2 {
    font-family: 'Switzer', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

/* H3 */
h3 {
    font-family: 'Switzer', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

/* H4 */
h4 {
    font-family: 'Switzer', sans-serif;
    font-weight: 700;
}

/* H5 */
h5 {
    font-family: 'Switzer', sans-serif;
    font-weight: 700;
}

/* H6 */
h6 {
    font-family: 'Switzer', sans-serif;
    font-weight: 700;
}


/* =========================================================
   SONDERFALL: TITEL mit BODONI KURSIV und Text fett
   ========================================================= */

/*
   Verwendung innerhalb einer Überschrift:

   <span class="title-kursiv">Wort</span>
*/

h1 em,
h1 i,
h2 em,
h2 i {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-weight: 800;
}
/*
   Verwendung für den normalen/fetten Teil
   eines speziellen Titels.
*/

.title-fett {
    font-family: 'Switzer', sans-serif;
    font-weight: 800;
}


/* =========================================================
   SLIDER TEXT
   ========================================================= */
.slider-text {
    font-family: 'Switzer', sans-serif;
    font-size: clamp(28px, 3.1vw, 44px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff !important;

    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* =========================================================
   FULLSCREEN SLIDER
   ========================================================= */

.full-screen-slider {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    height: 50svh;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

/* Slides übereinanderlegen */
.full-screen-slider .slider-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
}

/* Erster / aktiver Slide */
.full-screen-slider .slider-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Bilder füllen den Slider */
.full-screen-slider .slider-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}






/* Custom variables */

:root {
	--pffb-default-padding: 16px;
}

/*
Twenty Twenty-THREE child theme overrides:

1) No spacing on top between the header and content
2) Defined background color for site blocks
3) Position header, main content and footer in a vertical flex grid
4) Allow full width content but default to content width
5) Adjust default line height
6) Make headings and strong (b) elements bold and not just "bolder"
*/

:root {
	--wp--preset--spacing--60: 1rem !important;
}

.wp-site-blocks {
	background-color: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-height: 100vh;
}

main {
	flex-grow: 1;
}

footer {
	width: 100%;
	align-self: flex-end;
}

footer > p {
	margin: 0;
}



/* =========================================================
   PADDING
   ========================================================= */

main .entry-content > :where(
	:not(.alignleft):not(.alignright):not(.alignfull)
) {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}




/*
main > .entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2);
	margin: 0 auto;
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
}

main .entry-content > *:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2) !important;
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
}

main .entry-content > table {
	padding-left: 0;
	padding-right: 0;
}

.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wp-block-post-title {
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
}

*/


p, h1, h2, h3, h4, h5, h6, h7 {
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, h7, strong, b {
	font-weight: bold;
}

/* Main menu as popover */

#pffb-nav-main-head {
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2);
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
}

.pffb-nav-theme-frontpage img {
	filter: invert(100%);
}

.pffb-nav-main-toggle,
.pffb-nav-main-close {
	border: none;
	cursor: pointer;
	background: inherit;
	float: right;
}

.pffb-nav-main-toggle:focus,
.pffb-nav-main-close:focus {
	outline-style: dotted;
	outline-width: hairline;
	outline-color: inherit;
}

.pffb-nav-main-close img {
	width: 32px;
	height: auto;
}

#pffb-nav-container {
	position: absolute;
	top: 0;
	padding: 0;
	width: 100%;
	margin: 0;
	z-index: 9;
	border: none;
	overflow: hidden;
}

#pffb-nav-container::backdrop {
	background: var(--wp--preset--color--base);
}

#pffb-nav-main {
	background: var(--wp--preset--color--base);
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2);
	margin: 0 auto;
	padding-top: 16px;
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
	display: flex;
	flex-direction: column;
}

.pffb-nav-block {
	width: 100%;
	border-bottom: solid 1px var(--wp--preset--color--contrast);
	padding-top: 16px;
	padding-bottom: 16px;
}

.pffb-nav-block:first-child {
	padding-top: 0;
}

.pffb-nav-block:first-child,
.pffb-nav-block:last-child {
	border-bottom: 0;
}

.pffb-nav-year-logo {
	width: auto;
	height: 32px;
}

.pffb-nav-text-logo {
	width: auto;
	height: 32px;
}

.pffb-nav-menu-title {
	font-family: 'Bodoni Moda', sans-serif;
	font-style: italic;
	font-weight: 900;
	padding-top: 32px;
	font-size: 4rem;
	line-height: 1;
}

.pffb-nav-social a {
	float: right;
	padding-top: 4.25rem;
	margin-left: 32px;
}

.pffb-nav-social a img {
	width: 32px;
	height: auto;
}

/* Menu - menu items */

ul.menu {
	list-style: none;
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
}

/* Menu - main entry  */

ul.menu > li.menu-item {
	list-style: none;
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
	padding-top: 16px;
	border-bottom: 1px solid #000;
}

ul.menu > li.menu-item:has(ul.sub-menu) {
	padding-bottom: 16px;
}

ul.menu > li.menu-item:first-child {
	padding-top: 0;
}

ul.menu > li.menu-item > a {
	font-size: 32px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 16px;
}

ul.menu > li.menu-item > a:hover {
	text-decoration: underline;
}

ul.sub-menu {
	padding-inline-start: 0;
	line-height: 2em;
}

ul.sub-menu > li {
	display: inline;
	padding-inline-end: 3em;
}

ul.sub-menu > li:last-child {
	padding-inline-end: 0;
}

ul.sub-menu > li > a {
	color: #000;
	font-size: 20px;
	text-decoration: none;
}

ul.sub-menu > li > a:hover {
	text-decoration: underline;
}

/* Movie page layout */

.single-movie-2016 #page #content,
.single-movie-2017 #page #content,
.single-movie-2018 #page #content,
.single-movie-2019 #page #content,
.single-movie-2020 #page #content,
.single-movie-2021 #page #content {
	float: none;
	max-width: 100%;
}

.single-movie-2016 #page #central,
.single-movie-2017 #page #central,
.single-movie-2018 #page #central,
.single-movie-2019 #page #central,
.single-movie-2020 #page #central,
.single-movie-2021 #page #central {
	display: block;
}

.single-movie-2016 #page #sidebar,
.single-movie-2017 #page #sidebar,
.single-movie-2018 #page #sidebar,
.single-movie-2019 #page #sidebar,
.single-movie-2020 #page #sidebar,
.single-movie-2021 #page #sidebar {
	display: none;
}

.movie-content img {
	max-width: 100%;
	height: auto;
}

/* Movie details */

.movie-content {
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2);
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
	margin-top: 0.5em;
	display: flex;
	flex-flow: row;
}

.movie-details {
	width: 100%;
}

.movie-details p:first-child {
	max-width: 100%;
}

.movie-details p,
.movie-details table {
	max-width: 50rem;
}

.movie-details > p > iframe,
.movie-details > p > img {
	border-radius: 8px;
}

.movie-content img {
	height: auto;
	max-width: 100%;
}

.movie-content img.teaser {
	width: 64.5em;
	height: auto;
	max-width: 100%;
}

.movie-content img.teaser-portrait {
	width: 43em;
	height: auto;
	max-width: 50%;
}

.movie-data,
.movie-producer {
}

.movie-director,
.movie-cast {
	font-style: italic;
}

.movie-streaming {
	font-style: italic;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
}

.movie-data {
	margin-bottom: 0.5em;
}

.movie-director,
.movie-cast {
	margin-top: 0em;
	margin-bottom: 0.5em;
}

.movie-producer {
	margin-top: 0em;
	margin-bottom: 1.5em;
}

.movie-info {
	width: 20.25em;
	margin-top: 1em;
	padding-left: 3.5em;
}

.movie-info h2 {
	font-size: 1.3em;
}

.movie-screening {
	margin: 1em 0;
	padding-bottom: 1em;
}

.movie-screening-notice {
	margin: 0.5em 0;
	padding-bottom: 0.5em;
	font-style: italic;
}

.movie-screening-single {
	margin: 0.5em 0;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #dddddd;
}

.movie-screening-single:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.movie-ticketlink {
	margin-left: 1.5em;
}

.movie-search-image {
	float: left;
	width: 14em;
	margin: 0.25em 1em 1em 0;
}

.movie-search-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.movie-search-content .movie-director {
	margin-top: 1em;
}

.movie-search-link {
	clear: both;
}

.movie-program-entry {
	display: flex;
	flex-flow: row;
	clear: both;
	border-top: 1px #000 solid;
}

.movie-program-screening {
	font-weight: bold;
	display: table-cell;
	vertical-align: top;
	width: 11em;
	min-width: 11em;
	max-width: 11em;
	order: 1;
}

.movie-program-location {
	font-size: 0.86em;
	font-weight: normal;
	margin-bottom: 0.1em;
}

.movie-program-extra {
	font-weight: normal;
	font-size: 0.86em;
	font-style: italic;
	line-height: 1.5;
}

.movie-program-thumbnail {
	display: table-cell;
	vertical-align: top;
	order: 2;
}

.movie-program-thumbnail > div {
	padding: 1.25em 1.5em 1em 1.5em;
}

.movie-program-thumbnail > div > a > img {
	margin: 0;
	width: 10.5em;
	min-width: 10.5em;
	height: auto;
	border-radius: 8px;
}

.movie-program-description {
	display: table-cell;
	vertical-align: top;
	order: 3;
}

.movie-program-description h2 {
	font-size: 1.3em;
	margin-top: 0.75em;
}

.movie-program-description h2 a {
	color: #000000 !important;
	text-decoration: none;
}

.movie-program-description h2 a:hover,
.movie-program-description h2 a:active {
	color: #ec008c !important;
	text-decoration: underline;
}

.movie-extrainfo {
	margin-top: 1.5em;
	padding-top: 0.5em;
	border-top: 1px solid #dddddd;
	font-style: italic;
}

.movie-support {
	font-weight: bold;
}

/* Custom styles for program overview */

.programarchive-container,
.programdate-container {
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2);
}

.programdate-container {
	margin-bottom: 16px !important;
}

.movie-program {
	max-width: calc(var(--wp--style--global--content-size) - var(--pffb-default-padding) * 2);
	padding-left: var(--pffb-default-padding);
	padding-right: var(--pffb-default-padding);
}

.programdate {
	border: 0;
	border-spacing: 0;
	width: 100%;
}

.programday5 {
	width: 20%;
}

.programday6 {
	width: 16.66%;
}

.programday7 {
	width: 14.28%;
}

.programday,
.programdaysel {
	border-left: 0.125em solid #ffffff;
	border-bottom: none;
	margin: 0;
	padding: 0;
	width: 1%;
}

.programday:first-child,
.programdaysel:first-child {
	border-left: 0;
}

.programday:last-child,
.programdaysel:last-child {
	padding: 0;
}

.programday a,
.programdaysel a {
	text-decoration: none;
	padding: 0.25em 0.5em;
	display: block;
	font-weight: bold;
}

.programday a {
	color: #fff;
	background: #000;
	border: 0.125em solid #000;
}

.programdaysel a {
	color: #ec008c;
	border: 0.125em solid #000;
}

.programday a:hover {
	color: #ec008c;
	border: 0.125em solid #ec008c;
}

.programdaysel a:hover {
	border: 0.125em solid #ec008c;
}

.programtitle {
	padding-bottom: 16px;
}

.programinfo {
	margin: 0.5em 0;
}

.programstaff {
	margin: 0.5em 0;
}

.programsupport {
	margin: 0.5em 0;
}

.programarchive {
	max-width: 1380px;
	margin: 0 auto;
	background: #666;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.125em;
	padding: 0.25em;
}


.programarchive-container {
	background: #666666;
	margin-bottom: 0.125em;
}

.programdate-container {
	background: #000000;
	margin-block-start: 0;
}

/* Custom styles for "Adult Industry only" */

#industry-header {
	text-align: center;
}

#industry-header > div {
	text-align: left;
	display: inline-block;
}

h1.industry {
	font-size: 2em;
	line-height: 1em;
}

h1.industry > .sub {
	font-size: 0.75em;
	font-style: italic;
}

.industry-dorcel {
	width: 10em;
	margin-top: 0.5em;
}

a.industry-btn {
	display: inline-block;
	width: 12em;
	padding: 0.5em 0;
	border: 1px solid #fff;
	border-radius: 1.25em;
	color: #fff;
	text-decoration: none !important;
	margin-top: 2em;
	margin-bottom: 1em;
}

/* Other custom styles */

.buytickets {
	color: #fff !important;
	background-color: #224d44;
	text-decoration: none;
	padding: 0.5em;
	font-size: 1.5em;
	border-radius: 0.5em;
	display: inline-block;
}

img.image10 {
	max-width: 10%;
}

img.image20 {
	max-width: 20%;
}

img.image25 {
	max-width: 25%;
}

img.image30 {
	max-width: 30%;
}

img.image40 {
	max-width: 40%;
}

img.image45 {
	max-width: 45%;
}

img.image50 {
	max-width: 50%;
}

img.image60 {
	max-width: 60%;
}

img.image75 {
	max-width: 75%;
}

img.image100 {
	max-width: 100%;
}

img.alignright {
	float: right;
	padding-left: 16px;
	padding-bottom: 16px;
}

img.alignleft {
	float: left;
	padding-left: 16px;
	padding-bottom: 16px;
}

img.aside40 {
	width: 12em;
	max-width: 40%;
}

img.image_sponsor {
	width: 50%;
}

img.festival-list-logo {
	float: right;
	width: 10em;
	padding-left: 2em;
}

div.festival-list-section {
	clear: both;
	padding-top: 1em;
	border-top: 1px solid #c0c0c0;
}

div.festival-list-section:first-child {
	padding-top: 0em;
	border-top: none;
}

div.festival-list-title {
	font-weight: bold;
}

div.festival-list-title img {
	border-radius: 0;
}

.clear {
	clear: both;
}

.pt1 {
	padding-top: 1em;
}

.pb1 {
	padding-top: 1em;
}

.nobr {
	white-space: nowrap;
}

div.hscroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0 0 1em;
}

div.hscroll table {
	margin: 0.25em 0 0 0;
}

img.banner {
	width: 100%;
	height: auto;
	visibility: hidden;
}

img.bannerside {
	display: none;
}

div.slick-slide > a > img {
	visibility: visible;
}

div.grid2 {
	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
}

div.grid3 {
	width: 100%;
	display: grid;
	grid-template-columns: 33% 33% 33%;
}

div.grid2 > div,
div.grid3 > div {
	text-align: center;
	align-self: center;
	justify-self: center;
}

div.grid2 > div,
div.grid3 > div {
	text-align: center;
	align-self: center;
	justify-self: center;
}

div.grid2 > div > a > img,
div.grid3 > div > a > img {
	width: 80%;
	height: auto;
}

/* Zoom cursor for linked images */

a[data-lbwps-width] > img:hover {
	cursor: zoom-in;
}

/* Grid on sponsor page */

.grid-sponsors {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

.grid-sponsors > a {
	width: calc(50% - 16px);
	align-content: center;
	line-height: 0;
	border: 1px solid #dddddd;
	border-radius: 8px;
}

.grid-sponsors > div {
	padding: 8px;
}

.grid-sponsors > a {
	aspect-ratio: 10 / 3.2;
}

.grid-sponsors > a > img,
.grid-sponsors > div > a > img {
	width: calc(100% - 16px);
	height: auto;
	margin: 8px;
}

.grid-sponsors-container {
	display: flex;
}

.grid-sponsors-container > div > h3 {
	margin-top: 0;
	margin-bottom: 8px;
}

.grid-sponsors-container > div > .grid-sponsors > a {
	width: calc(100% - 16px);
}

/* Sponsors in footer */

.sponsorsfooter {
	background: #000000;
	color: #fff;
	padding: 1em 0 0 0;
	width: 100%;
	text-align: center;
	line-height: 1.5em;
	display: block;
}

.splogo {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 0.5em 1em;
}

.splogo > a > img {
	height: 30px;
	width: auto;
}




/* =========================================================
   BUTTONS
   ========================================================= */
/* =========================================================
   BTN-LINK
   Vollbreiter Editorial-Link mit Pfeil
   ========================================================= */

.wp-block-button.is-style-btn-link {
	width: 100%;
	margin: 0;
}

.wp-block-button.is-style-btn-link .wp-block-button__link {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	box-sizing: border-box;

	padding: 16px 16px 16px 0;
	margin: 0;

	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;

	background: transparent;
	color: inherit;

	text-align: left;
	text-decoration: none;

	transition: padding-right 0.2s ease;
}

/* Pfeil */
.wp-block-button.is-style-btn-link .wp-block-button__link::after {
	content: "";

	width: 20px;
	height: 20px;

	flex: 0 0 20px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transition: transform 0.2s ease;
}

/* Hover */
.wp-block-button.is-style-btn-link .wp-block-button__link:hover {
	text-decoration: none;
}

/* Pfeil bewegt sich beim Hover nach rechts */
.wp-block-button.is-style-btn-link .wp-block-button__link:hover::after {
	transform: translateX(4px);
}


/* =========================================================
   BTN-OUTLINE
   Kompakter Button mit Rahmen und Pfeil
   ========================================================= */

.wp-block-button.is-style-btn-outline {
	width: auto;
	margin: 0;
}

.wp-block-button.is-style-btn-outline .wp-block-button__link {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	width: auto;
	box-sizing: border-box;

	padding: 12px 16px;
	padding-right: 12px;

	border: 2px solid currentColor;
	border-radius: 999px;

	background: transparent;
	color: inherit;

	text-align: left;
	text-decoration: none;

	gap: 24px;

	transition: all 0.2s ease;
}

/* Pfeil */
.wp-block-button.is-style-btn-outline .wp-block-button__link::after {
	content: "";

	width: 20px;
	height: 20px;

	flex: 0 0 20px;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transition: transform 0.2s ease;
}

/* Hover */
.wp-block-button.is-style-btn-outline .wp-block-button__link:hover {
	text-decoration: none;
}

/* Pfeil bewegt sich leicht nach rechts */
.wp-block-button.is-style-btn-outline .wp-block-button__link:hover::after {
	transform: translateX(4px);
}




/* =========================================================
   BLOG GRID
   ========================================================= */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Tablet */
@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}


.wp-block-query .wp-block-post-date {
    font-weight: 700;
}

.wp-block-query .wp-block-post-title {
    font-weight: 700;
}

/* ========================================
   INFO SLIDER
======================================== */

.info-slider {
    width: 100%;
}


/* ========================================
   HAUPT-LAYOUT
   Links: Titel + Pfeile
   Rechts: Slider
======================================== */

.info-slider-layout {
    width: 100%;
}

.info-slider-layout > .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0;
}


/* ========================================
   LINKE SPALTE
======================================== */

.info-slider-layout > .wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 25% !important;
    width: 25% !important;
}

.info-slider-controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* ========================================
   RECHTE SPALTE – SLIDER
======================================== */

.info-slider-layout > .wp-block-columns > .wp-block-column:last-child {
    flex: 0 0 75% !important;
    width: 75% !important;
}


/* ========================================
   SLIDER-STAGE
   Feste Höhe für alle Slides
======================================== */

.info-slider-stage {
    position: relative;
    width: 100%;
    height: 500px;
}


/* ========================================
   SLIDES
   Alle Slides bleiben sichtbar,
   damit die Bilder gestapelt werden können
======================================== */

.info-slider-stage .info-slide {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 500px;

    background: transparent;

    opacity: 1;
    visibility: visible;

    z-index: 1;
}


/* Aktiver Slide liegt oben */

.info-slider-stage .info-slide.is-active {
    z-index: 3;
}


/* ========================================
   INAKTIVER CONTENT
   Nur der Text wird ausgeblendet
======================================== */

.info-slider-stage .info-slide .info-slider-content {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}


/* Aktiver Content */

.info-slider-stage .info-slide.is-active .info-slider-content {
    opacity: 1;
    visibility: visible;
}


/* ========================================
   INNERE SPALTEN
======================================== */

.info-slider-stage .info-slide > .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;

    width: 100%;
    height: 100%;

    margin: 0;
    gap: 0;

    align-items: stretch !important;
}


/* ========================================
   TEXTSPALTE
======================================== */

.info-slider-content {
    flex: 0 0 50% !important;
    width: 50% !important;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    background: #fff;

    position: relative;
    z-index: 5;
}


/* Überschrift */

.curator-name {
    margin: 0;
}


/* Beschreibung */

.curator-description {
    margin: 0;
}


/* ========================================
   BILDSPALTE
======================================== */

.info-slider-image {
    flex: 0 0 50% !important;
    width: 50% !important;

    height: 500px;

    position: relative;

    display: flex;
    align-items: stretch;

    z-index: 1;
}


/* ========================================
   BILD
======================================== */

.info-slider-image figure {
    width: 100%;
    height: 100%;

    margin: 0;
}

.info-slider-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ========================================
   FOTO-STAPEL
   Nur horizontal versetzt
======================================== */

/* Erstes Foto */

.info-slider-stage .info-slide:nth-child(1) .info-slider-image {
    transform: translateX(0);
}


/* Zweites Foto */

.info-slider-stage .info-slide:nth-child(2) .info-slider-image {
    transform: translateX(10px);
}


/* Drittes Foto */

.info-slider-stage .info-slide:nth-child(3) .info-slider-image {
    transform: translateX(20px);
}


/* ========================================
   PFEILE
======================================== */

.info-slider .info-slider-prev .wp-block-button__link,
.info-slider .info-slider-next .wp-block-button__link {
    width: 70px;
    height: 70px;

    padding: 0 !important;
    margin: 0 !important;

    border: 2px solid currentColor !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    line-height: 1;
    text-decoration: none;
}

/* ========================================
   PFEILE – HOVER
======================================== */

.info-slider .info-slider-prev .wp-block-button__link:hover,
.info-slider .info-slider-next .wp-block-button__link:hover {
    background: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
/* ========================================
   PFEILE NEBENEINANDER
======================================== */

.info-slider-buttons {
    display: flex;
    flex-direction: row;
    gap: 15px;
}




/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    /* ----------------------------------------
       Slider
    ---------------------------------------- */

    .info-slider {
        width: 100%;
    }


    /* ----------------------------------------
       Hauptlayout
       Alles untereinander
    ---------------------------------------- */

    .info-slider-layout > .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 30px !important;
    }


    /* ----------------------------------------
       Linke Spalte
       Titel + Pfeile
    ---------------------------------------- */

    .info-slider-layout > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 auto !important;
        width: 100% !important;
    }


    /* ----------------------------------------
       Rechte Spalte
    ---------------------------------------- */

    .info-slider-layout > .wp-block-columns > .wp-block-column:last-child {
        flex: 0 0 auto !important;
        width: 100% !important;
    }


    /* ----------------------------------------
       Stage
       Keine feste Desktop-Höhe
    ---------------------------------------- */

    .info-slider-stage {
        width: 100%;
        height: auto;
        min-height: 0;
    }


    /* ----------------------------------------
       Slides
    ---------------------------------------- */

    .info-slider-stage .info-slide {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: auto;

        background: transparent;
    }


    /* ----------------------------------------
       Innere Spalten
       Text über Bild
    ---------------------------------------- */

    .info-slider-stage .info-slide > .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        width: 100%;
        height: auto;

        gap: 0 !important;
    }


    /* ----------------------------------------
       Text
    ---------------------------------------- */

    .info-slider-content {
        flex: 0 0 auto !important;
        width: 100% !important;

        height: auto;

        min-height: 0;

        padding-bottom: 30px;

        background: #fff;
    }


    /* ----------------------------------------
       Bild
    ---------------------------------------- */

    .info-slider-image {
        flex: 0 0 auto !important;
        width: 100% !important;

        height: 400px;

        position: relative;
    }


    .info-slider-image figure {
        width: 100%;
        height: 100%;

        margin: 0;
    }


    .info-slider-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* ----------------------------------------
       Bildversatz auf Mobile
    ---------------------------------------- */

    .info-slider-stage .info-slide:nth-child(1) .info-slider-image {
        transform: translateX(0);
    }

    .info-slider-stage .info-slide:nth-child(2) .info-slider-image {
        transform: translateX(10px);
    }

    .info-slider-stage .info-slide:nth-child(3) .info-slider-image {
        transform: translateX(20px);
    }


    /* ----------------------------------------
       Pfeile
    ---------------------------------------- */

    .info-slider-buttons {
        display: flex;
        flex-direction: row;

        gap: 15px;

        margin-top: 20px;
    }


    .info-slider .info-slider-prev .wp-block-button__link,
    .info-slider .info-slider-next .wp-block-button__link {
        width: 55px;
        height: 55px;

        font-size: 22px;
    }


    /* ----------------------------------------
       Hover
    ---------------------------------------- */

    .info-slider .info-slider-prev .wp-block-button__link:hover,
    .info-slider .info-slider-next .wp-block-button__link:hover {
        background: transparent !important;
        color: inherit !important;
        border-color: currentColor !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

}