/* =========================================================================
   DFFB60 — main stylesheet
   Tokens below are taken from the DFFB design-system Figma page
   (colours, type scale, grid) and the home-page mockup (layout).
   ========================================================================= */

/* ---- ES Allianz / Allianz webfont --------------------------------------
   The DFFB house typeface is "Allianz" ("ES Allianz"); Figma uses Inter as a
   substitute. Per the design system ALL styles are weight 400 (Regular); only
   the uppercase label uses Medium (500). ES Allianz is licensed/commercial and
   is NOT bundled — drop the files into /assets/fonts/ (see fonts/README.txt).
   Inter is listed as the documented fallback.                               */
@font-face {
	font-family: "ES Allianz";
	src: url("../fonts/ESAllianz-Regular.woff2") format("woff2"),
	     url("../fonts/ESAllianz-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "ES Allianz";
	src: url("../fonts/ESAllianz-Medium.woff2") format("woff2"),
	     url("../fonts/ESAllianz-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-sans: "ES Allianz", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Colours (DFFB design system) */
	--color-bg: #f7f6f5;       /* Brand / White — Hauptflaeche */
	--color-fg: #000000;       /* Brand / Black — Text, Logo, Nav */
	--color-accent: #f4516a;   /* Brand / Pink — Hero, Akzente, Hover */
	--color-muted: #505050;    /* Text / Muted — Sekundaertext, Meta */
	--color-line: #e5e5e5;     /* Border / Subtle — Trenner, Outlines */

	/* Type scale (px from design system, expressed responsively) */
	--fs-h1: clamp(2.75rem, 6vw, 4.75rem);   /* 76 */
	--fs-h2: clamp(2rem, 4.5vw, 3.125rem);   /* 50 */
	--fs-h3: clamp(1.5rem, 3vw, 2rem);       /* 32 */
	--fs-body-lg: 1.1875rem;                  /* 19 */
	--fs-body: 1rem;                          /* 16 */
	--fs-label: 0.75rem;                      /* 12 */

	/* Grid / spacing */
	--container-max: 1440px;
	--gutter: 30px;            /* design-system outer margin */
	--space-s: 0.75rem;
	--space-m: 1.5rem;
	--space-l: 3rem;
	--space-xl: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: 1.375;          /* 22/16 */
	color: var(--color-fg);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;          /* guard against full-bleed hero overflow */
	letter-spacing: -0.05em;
	line-height: 1;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Generic headings stay black & Regular; pink is applied per design class. */
h1, h2, h3 { font-weight: 400; line-height: 1.1; margin: 0 0 var(--space-m); }

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto;
	padding: .5rem 1rem; background: var(--color-fg); color: #fff; z-index: 1000;
}

/* ---- Header / footer --------------------------------------------------- */
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-m); padding-block: var(--space-m);
}
.site-title { font-size: 1.25rem; text-decoration: none; }
.site-nav__menu { list-style: none; display: flex; gap: var(--space-m); margin: 0; padding: 0; }
.site-nav__menu a { text-decoration: none; }
.site-nav__menu a:hover { color: var(--color-accent); }

.site-footer { margin-top: var(--space-xl); } 
.site-footer__inner { padding-block: var(--space-l); }
.site-footer__menu { list-style: none; display: flex; gap: var(--space-m); margin: 0 0 var(--space-s); padding: 0; }
.site-footer__copy { color: var(--color-muted); margin: 0; }
.site-footer__site {
	font-size: 32px;line-height: 1;}
.site-footer__site a {
	white-space: nowrap;
}

.site-header { position: relative; }

/* Featured-image band: only the lower 10% of the image, full-bleed. */
.site-header--media {
	display: flex;
	align-items: center;
	aspect-ratio: var(--header-ar);
	min-height: 64px;                 /* keeps the nav usable if the 10% slice is very short */
	background-image: var(--header-img);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;       /* branding removed — nav alone */
}

.site-nav__menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--space-l);
}

/* Nav links styled like the hero title. */
.site-nav__menu a {
	font-family: inherit;              /* ES Allianz / Allianz */
	font-weight: 400;                  /* Regular, per the design system */
	color: var(--color-pink);
	text-decoration: none;
	line-height: 1;
	font-size: clamp(1.75rem, 4vw, 3rem); /* ⚠ approximation — see note below */
}

/* ---- Hero (title split, full-bleed image, intro + logo) ---------------- */
.hero-title {
	position: fixed; top: 0; left: 50%; transform: translateX(-50%);
	width: 100%; max-width: var(--container-max);
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--space-m); padding: var(--gutter); z-index: 100;
	pointer-events: none; /* clicks pass through to content beneath */
	letter-spacing: -0.2em; 
	transition: all 0.5s ease-in-out;
	
}
.hero-title::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;            /* wider than the title → full-bleed left & right */
	z-index: -1;             /* behind the title text */
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		#f7f6f5 50%,
		rgba(247, 246, 245, 0) 100%
	);
	opacity: 0;
	transition: opacity .3s ease;
}

.hero-title.scrolled::before {
	opacity: 1;
	z-index: -1
		
			transition: opacity .3s ease;


}

.hero-title__part { color: var(--color-accent); font-size: var(--fs-h1); line-height: 1; z-index: 1}
.hero-title--single { justify-content: flex-start; }

/* Full-viewport hero image. */
.hero__media { width: 100%; height: 100vh; height: 100svh; }
.hero__image { width: 100%; height: 100%; object-fit: fill; }

/* The fixed title is the front-page header, so hide the default site header there. */
.dffb60-front .site-header { display: none; }

.intro {
	margin-block: var(--space-xl);
}
.intro__text {
	width: 75%;        /* 9 of 12 columns */
	max-width: 75%;
	color: var(--color-accent);
	font-size: var(--fs-h3);
	line-height: 1.25;
}
.intro__text p { margin: 0 0 var(--space-m); line-height: 1.1}
.intro__text p:last-child { margin-bottom: 0; }

/* Logo: fixed, always visible, bottom-right. */
.site-logo-fixed {
	position: fixed; right: var(--gutter); bottom: var(--gutter);
	z-index: 100; pointer-events: none; /* clicks pass through to content */
}
.site-logo-fixed img { max-width: 200px; height: auto; display: block; }

/* ---- Programme (events grouped by category) ---------------------------- */
.programme-heading {
	text-align: center; color: var(--color-accent);
	font-size: var(--fs-h1); margin: var(--space-xl) 0 var(--space-l);
	position: sticky;
/* display: block; */
top: 25px;
z-index: 99999;
	letter-spacing: -0.05em;
}

.event-group__label {
	text-align: center; color: var(--color-accent);
	text-transform: uppercase; letter-spacing: .04em;
	font-size: var(--fs-h3); margin: var(--space-xl) 0 var(--space-l);
}

.event-list { list-style: none; margin: 0; padding: 0; }
.event-row { border-bottom: 0.01em solid var(--color-accent); }
.event-row__link {
	display: block; text-decoration: none; color: var(--color-accent);
	padding-block: var(--space-m); 
}
.event-row__title,
.event-row__meta { display: block; font-size: var(--fs-h3); line-height: 1.2; }
.event-row__meta { display: block; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; }
.event-row__link:hover { opacity: .65; }

.programme__more { text-align: center; margin-block: var(--space-xl); }
.button--outline {
	display: inline-block; text-decoration: none;
	color: var(--color-accent); border: 1px solid var(--color-accent);
	border-radius: 3px; padding: 1rem 4.5rem; font-size: var(--fs-body-lg);
	background-color: #fff;
}
.button--outline:hover { border-color: var(--color-accent); text-decoration: none;}

/* ---- Single event ------------------------------------------------------ */
.event-single { padding-block: var(--space-l); }
.event-single__date { color: var(--color-accent); margin: 0 0 ; font-size: 32px; letter-spacing: -0.05em;}
.event-single__title { color: var(--color-accent); font-size: var(--fs-h1); margin-bottom: var(--space-s);  letter-spacing: -0.05em;}
.event-single__subtitle { color: var(--color-accent); font-size: var(--fs-h3); margin: 0 0 var(--space-m); }
.event-single__venue { margin: 0 0 var(--space-m); }
.event-single__venue-name, .event-single__address { color: var(--color-accent); letter-spacing: -0.03em;}
.event-single__hero { margin: var(--space-l) 0; }
.event-single__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-single__content { max-width: 70ch; font-size: var(--fs-body-lg); }
.event-single__content p { margin-block: 0 var(--space-m); }

.event-gallery {
	display: grid; gap: var(--space-m); margin-block: var(--space-l);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---- Cooperation partners --------------------------------------------- */
.partners { margin-top: var(--space-xl); border-top: 1px solid var(--color-line); padding-top: var(--space-l); }
.partners__title { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); font-weight: 500; }
.partners__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); }
.partners__logo { max-height: 64px; width: auto; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 800px) {
	.intro__text { width: 100%; max-width: 100%; }
	.site-logo-fixed img { max-width: 140px; }
	.programme-heading{
		position: relative;
	}
}
@media (max-width: 640px) {
	.hero-title { gap:0; }
	.site-header__inner { flex-direction: column; align-items: flex-start; }
	.site-nav__menu { flex-wrap: wrap; }
	.site-logo-fixed img { max-width: 110px; }
	.category-card__title{
		font-size: 38px;
	}
	
	.hero__media{
		height: 75svh
	}
	
	.hero-title{
		padding: 10px;
	}
	
	.hero__image{
		    object-fit: fill;

	}
	.intro{
	margin-block:1rem;
	}

}




/* Front-page categories grid */

.category-card{
	border: 0.03em solid var(--color-accent);
	border-radius: 4px;
	padding:20px;	
}

.categories {
	margin-block: 60px;
}

.programme h4{
	text-align: center;
	margin: 20px auto;
	color: var(--color-accent);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-top: 80px;
}

.categories__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* each card = 4 of 12 cols */
	gap: 50px;
}

/* Only break the equal-height grid once a card is open */
.categories__grid:has(.category-card.is-open) {
	align-items: start;
}

.category-card__title {
	font-size: 48px;
	font-weight: 400;
	color: var(--color-pink, #F4516A);
	margin: 0 0 .25em;
	line-height: 1;
	text-align: center;
	letter-spacing: -0.04em;
}

.category-card__subtitle {
	font-size: 24px;
	color: var(--color-pink, #F4516A);
	margin: 0 0 .75em;
	text-align: center;
}

.category-card__desc {
	font-size: 16px;
	color: var(--color-text, #000);
}

.category-card__desc p {
	margin: 0 0 1em;
		color: var(--color-pink, #F4516A);
		hyphens: auto;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.category-card__desc p:last-of-type {
	margin: 0 0 0;
	
}

/* Collapsible category descriptions — only collapse once JS marks the grid */
.categories__grid.is-enhanced .category-card { cursor: pointer; }

.categories__grid.is-enhanced .category-card__desc {
	height: 0;
	overflow: hidden;
	transition: height .35s ease;
}

/* Tablet: two up */
@media (max-width: 1024px) {
	.categories__grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* Mobile: stacked */
@media (max-width: 680px) {
	.categories__grid {
		grid-template-columns: 1fr;
	}
}






/* Site footer */
.site-footer {
	margin-top: 60px;
	padding: 30px 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-text, #000);
	letter-spacing: -0.01em;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 40px;
	padding-bottom: 0px;
}

.site-footer p { margin: 0; }

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover { text-decoration: none;  color: var(--color-accent);}

.site-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .button--outline {
	border: 1px solid #000;
	padding: 0.5rem 2rem;
	font-size: 75%;
}

.site-footer .button--outline:hover {
	border: 1px solid var(--color-accent);
}

.site-footer__legal  a {
	 font-size: 75%;
	line-height: 1;
}

.site-footer__legal  li {
	line-height: 1;
}

/* Social + logos pushed to the right edge, stacked */
.site-footer__end {
	margin-right: 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
}

.social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
}

.social-list a {
	display: inline-flex;
	color: var(--color-text, #000);
}

.social-list a:hover {
	background-color: transparent;   /* cancel the pink box from .site-footer a:hover */
	color: var(--color-accent);      /* currentColor -> SVG fill turns pink */
}
.site-footer__logos {
	display: flex;
	align-items: center;
	gap: 16px;
}

.site-footer__logos img {
	height: 44px;
	width: auto;
	display: block;
}




@media (max-width: 1440px) {

	.site-footer p{
		font-size: 75%;
	}
	
	.site-footer__logos img{
		height: 44px;
	}
	
	.site-footer__inner{
		gap:40px;
	}
	
	.site-footer .button--outline{
		padding: 0.25rem 1rem
	}
	
	.site-footer__inner.container{ 
		width:75%;
	 	margin-left: 0px;
		flex-wrap: wrap;
	
	}
	
	.site-footer__site{
	}
	
	.site-footer__end{
		flex-direction: row;
		gap:40px;
	}
	

}

/* Stack on mobile */
@media (max-width: 768px) {
	.site-footer__inner { flex-direction: column; }
	.site-footer__end {
		margin-left: 0;
		align-items: center;
		margin-right: 0px;
	}
		.site-footer__inner.container{ align-items: center;text-align: center; width: 100%;}
	.site-footer__end{flex-direction: column; gap:20px;}
	
	.site-footer__site{		margin-bottom: 75px;}
}


.event-date__time{
	display: none;
}


body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;   /* fill at least the viewport */
}

.site-main {
	flex: 1 0 auto;      /* grow to eat free space, never shrink */
}

.site-footer {
	flex-shrink: 0;      /* keep its natural height at the bottom */
}



.event-row__link.is-disabled {
	cursor: default;
	pointer-events: none;
}


.hero{
	position: sticky;
	top:calc(-100vh + 100px)	;
}

.hero::before{
    content: "";
    position: absolute;
    top: auto;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(rgb(247, 246, 245) 0%, rgba(247, 246, 245, 0) 100%);
    transition: opacity 0.3s;
    height: 20px;
    bottom: -20px;
}

.hero-title:before{
	display: none;
}


/* Language switcher — fixed, right edge, vertically centred */
.lang_sw_wrapper {
	position: fixed;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	z-index: 1000;
}

/* Strip WPML's default list/box styling */
.lang_sw_wrapper .wpml-ls,
.lang_sw_wrapper .wpml-ls ul,
.lang_sw_wrapper .wpml-ls li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

.lang_sw_wrapper .wpml-ls ul{
	border: 1px solid #000;          /* black 1px border (footer override) */
	border-radius: 3px;
	padding: 0.2rem 0.2rem;
	background-color: #fff;
}

.wpml-ls-legacy-list-vertical a{
	border: 0;
	text-transform: uppercase;
	padding: 0;
}
.lang_sw_wrapper .wpml-ls li{
	margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
/* Outline-button look, matching the footer CTA tokens */
/* Outline button — mirrors .site-footer .button--outline exactly */
.lang_sw_wrapper .wpml-ls-link {
	display: inline-block;
	color: var(--color-fg);      /* pink text */
	background-color: #fff;
	
	font-size: 12px;                 /* footer CTA = 75% of its 16px base */
	font-weight: 400;                /* Regular — not Medium, not uppercase */
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.lang_sw_wrapper .wpml-ls-link:hover {
	border-color: var(--color-accent);  /* only the border turns pink */
	color:  var(--color-accent);
}

/* Aktive Sprache: rot, bei Hover schwarz */
.lang_sw_wrapper .wpml-ls-current-language .wpml-ls-link {
	color: var(--color-accent);          /* pink/rot */
	border-color: var(--color-accent);
}
.lang_sw_wrapper .wpml-ls-current-language .wpml-ls-link:hover {
	color: var(--color-fg);              /* schwarz */
	border-color: var(--color-fg);
}

/* Inaktive Sprache(n): schwarz, bei Hover rot */
.lang_sw_wrapper .wpml-ls-item:not(.wpml-ls-current-language) .wpml-ls-link {
	color: var(--color-fg);              /* schwarz */
	border-color: var(--color-fg);
}
.lang_sw_wrapper .wpml-ls-item:not(.wpml-ls-current-language) .wpml-ls-link:hover {
	color: var(--color-accent);          /* rot */
	border-color: var(--color-accent);
}



/* ---- Scroll-Reveal für Section-Inhalte -------------------------------- */
/* Startzustand wird NUR per JS (.reveal) gesetzt → ohne JS bleibt alles sichtbar. */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	/* bewusst nur opacity + transform animieren, kein "all" */
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}