/*
 Theme Name:   WDT UrsulaHeimann Theme
 Theme URI:    https://generatepress.com
 Description:  WDT Web Design UrsulaHeimann Theme (A GeneratePress child theme)
 Author:       Heike Trosin
 Author URI:   https://www.web-design-technik.de
 Template:     generatepress
 Version:      0.1
*/

/* =====================================
 * Eindeutige Seiten-Klassen im Body-Tag
 * =====================================

Startseite
.home

Programme
.page-id-224

Mit mir arbeiten
.page-id-12

Über mich 
.page-id-51

Presse/Blog
.page-id-2192

Presse
.page-id-216

Kolumnen
.page-id-2071

Blog
.page-id-210

Termine
.page-id-214

Aktuelles
.page-id-218

Kontakt
.page-id-130

Impressum (Bild: Mit mir arbeiten)
.page page-id-259

Datenschutz
.privacy-policy

Qualitätsversprechend
.page-id-444

Error
.error404
*/
/* ==============================================
 * Ende   Eindeutige Seiten-Klassen im Body-Tag
 * ==============================================



/* =====================================
 * Grundsätzliche Einstellungen 
 * =====================================*/

/* -------------------------------------
*   Farben / Hintergrundfarben
* -------------------------------------*/

:root {
	--contrast: #076266;
	--contrast-2: #06b4b7;
	--base: #eaedee;
	--base-2: #fbf7f3;
	--base-3: #ffffff;
	--accent: #fecc31;
	--accent-2: #ef3d30;

	--outside-container:  #ffffff;
	--body:  #ffffff;
}

:root {

	--bg-white: var(--base-3);
	--bg-beige: var(--base-2);
	--bg-gray: var(--base);
}

/* -------------------------------------
*   Typografie 
* -------------------------------------*/

:root {
	
	--gp-font--noto-serif-display: "Noto Serif Display";
	--gp-font--montserrat-thin: "Montserrat Thin";
	--gp-font--italiana: "Italiana";
}

:root {

    --font-heading: "Noto Serif Display", Georgia, serif;
    --font-text: "Montserrat Thin", Arial, Helvetica, sans-serif;
    --font-zitat: "Italiana", Georgia, serif;
}

:root {

	--font-size-body: 1.2rem;
	
	--font-size-p: clamp(1.15rem, 4vw, 1.4rem);	
	--font-size-p-small: clamp(0.95rem, 4vw, 1.1rem);
	--font-size-p-very-small: clamp(0.9rem, 4vw, 1rem);
	
	--font-size-li: var(--font-size-p);
	
	--font-size-navi: clamp(1.05rem, 6vw, 1.2rem);
	--font-size-unternavi: clamp(1.05rem, 6vw, 1.2rem);
	--font-size-navi-mobil: clamp(1.05rem, 6vw, 1.2rem);
	--font-weight-unternavi-mobil: clamp(1.05rem, 6vw, 1.2rem);
	
	--font-size-site-footer-p: clamp(1.05rem, 6vw, 1.2rem);
	--font-size-site-footer-heading: clamp(1.4rem, 6vw, 1.8rem);
	
	--font-size-zitat-medium: clamp(2.1rem,6vw,3.2rem);
	--font-size-zitat-large: clamp(2.2rem,6vw,3.6rem);

	--font-size-h1: clamp(1.5rem, 1.4rem + 2vw, 2.9rem);
	--font-size-h2: clamp(1.8rem, 6vw, 2.2rem);
	--font-size-h3: clamp(1.3rem, 6vw, 2.0rem);
	--font-size-h4: clamp(1.2rem, 6vw, 1.5rem);
}

:root {

	--line-height-body: 1.5;
	--line-height-heading: 1.2;
	
	--font-weight-p: 400;
	
	--font-weight-bold-light: 500;
	--font-weight-bold: 600;
	--font-weight-bold-heavy: 700;
	
	--font-weight-heading: 600;
	--font-weight-heading-small: 400;  /* eventuell */
	
	--font-weight-navi: 500;
	--font-weight-navi-hover: 500;
	--font-weight-navi-mobil: 500;
	--font-weight-navi-mobil-hover: 500;

}

:root {

	--font-color-p: var(--contrast);
	
	--font-color-heading: var(--accent-2);
}


/* -------------------------------------
*   Layout
* -------------------------------------*/

/* Layoutbreite, Container */

:root {
	--layout-width: 1360px;

	--layout-padding-desktop: 5rem;
	--layout-padding-tablet: 3rem;
	--layout-padding-mobile: 1rem;
	--layout-padding-mobile-mini: 1rem;
}

/* Section-Padding */

:root {

	--section-padding-desktop: 6rem;
	--section-padding-tablet: 5rem;
	--section-padding-mobile: 4rem;
}

/* Abstände */

:root {
	--space-xxs: .5rem;
	--space-xs: 1rem;
	--space-s: 2rem;
	--space-m: 3rem;
	--space-l: 4rem;
	--space-xl: 5rem;
	--space-xxl: 6rem;
	--space-xxxl: 7rem;
}

/* Grid Abstände */

:root {
	--grid-gap-column: clamp(1rem, 2vw, 2rem);
	--grid-gap-row: clamp(2rem, 4vw, 3rem);
}

/* -------------------------------------
 *   Rundungen
 * -------------------------------------*/

:root {

	--radius-xs: .1rem;
	--radius-s: .25rem;
	--radius-m: .5rem;
}

/* -------------------------------------
 * Schatten
 * -------------------------------------*/

:root {

	--shadow-standard:
		0px 5px 16px -5px rgba(33,33,33,.2);

	--shadow-hover:
		0px 8px 32px 0 rgba(33,33,33,.1);
}

/* -------------------------------------
*   Animation 
* -------------------------------------*/

:root {
	
	--transition-fast: .2s;
	--transition-normal: .3s;
}

/* =====================================
 * Ende   Grundsätzliche Einstellungen 
 * =====================================*/


/* =====================================
 * Hilfsklassen 
 * =====================================*/

/* -------------------------------------
 * Textausrichtung
 * ------------------------------------- */

.text-left {}
.text-center {}
.text-right {}

/* -------------------------------------
 * Sichtbarkeit
 * ------------------------------------- */

.hide-mobile {}
.hide-tablet {}
.hide-desktop {}

/* -------------------------------------
 * Standard Schatten
 * ------------------------------------- */

.shadow-standard {
	box-shadow: var(--shadow-standard);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: var(--shadow-hover);
}

/* => Ich weiß nicht, ob ich die folgenden Hilfsklassen überhaupt benötige - bisher noch nicht! - sind (teilweise) auch nur Beispiele, die noch angepasst werden können */

/* Max Width(s) */

.max-width-1024 {
	max-width: 1024px;
}

.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}

/* Margin Auto */

.margin-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Position Properties */

.relative {
	position: relative;
}

.absolute {
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky {
	position: sticky;
	top: 24px;
}

/* Image Aspect Ratios */ 

.aspect-1-1 img{
    aspect-ratio: 1/1;
	object-fit: cover;
}

.aspect-3-2 img{
    aspect-ratio: 3/2;
	object-fit: cover;
}

.aspect-2-3 img{
    aspect-ratio: 2/3;
	object-fit: cover;
}

.aspect-4-3 img{
    aspect-ratio: 4/3;
	object-fit: cover;
}

.aspect-3-4 img{
    aspect-ratio: 3/4;
	object-fit: cover;
}

.aspect-16-9 img{
    aspect-ratio: 16/9;
	object-fit: cover;
}

.aspect-9-16 img{
    aspect-ratio: 9/16;
	object-fit: cover;
}

/* =====================================
 * Ende   Hilfsklassen 
 * =====================================*/



/* ==========================================
   Layout-Bibliothek
   ========================================== */

/* ------------------------------------------
   Grundsätzliches Seitenlayout
   ------------------------------------------ */

/* body */

body {
	
	background-color: var(--outside-container);
}

#main {

	min-height: 65vh;
}

/* .site-footer  */



/* ------------------------------------------
   Gemeinsame Sections
   ------------------------------------------ */

.section {

	position: relative;
	overflow: hidden;

	background: var(--base-3);
}

/* ------------------------------------------
   Container
   ------------------------------------------ */

.section-container {

	max-width: var(--layout-width);

	margin-inline: auto;

	padding-inline: var(--layout-padding-desktop);
}

/* ------------------------------------------
   Grid
   ------------------------------------------ */

.section-grid {

	display: grid;
}

/*
Die Spalten definiert jeder Block selbst.

Beispiele:
Block 01: grid-template-columns: 1fr;
Block 02: 1fr 1fr;
Block 03: 2fr 1fr;
usw.
*/

/* ------------------------------------------
   Dekorelemente
   ------------------------------------------ */

.section-decoration {

	position: absolute;

	pointer-events: none;

	background-repeat: no-repeat;

	background-size: contain;

	background-position: center;

	z-index: 1;
}

/*
Jeder Block setzt dann lediglich:
right
bottom
width
height
background-image
*/

/* ------------------------------------------
   Buttons
   ------------------------------------------ */

/* Section Button */

.section-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
	
	text-align: center;

    margin-top: 2rem;

	padding: .35em 2em;

    border: 4px solid var(--contrast-2);

    background: transparent;

    color: var(--contrast-2);

	font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;

    line-height: 1.4;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;

}

.section-button:hover,
.section-button:focus {

	background: var(--contrast-2);
	color: var(--base-2);
}

/*
Varianten könnten sein:
.section-button-primary
oder
.section-button-secondary
*/

/* ------------------------------------------
   Responsive
   ------------------------------------------ */

@media (max-width:1024px) {

	.section-container {

		padding-inline: var(--layout-padding-tablet);

	}

}

@media (max-width:585px) {

	.section-container {

		padding-inline: var(--layout-padding-mobile);

	}

}

/* ==========================================
   Ende    Layout-Bibliothek
   ========================================== */
 

/* ==========================================
   Typografie
   ========================================== */

/* ------------------------------------------
   Fließtext
   ------------------------------------------ */

/* body */

body {
	font-family: var(--font-text);
	font-weight: 400;
	text-transform: none;
	font-size: var(--font-size-body);
	line-height: 1.5;
}

/* Wortumbruch */

p, a, button, input, li, blockquote, h1, h2, h3, h4, h5, h6 {
	
	overflow-wrap: break-word;
	
	/*-webkit-hyphens: auto;
	hyphens: auto;*/
}


/* p */

p {
	font-family: var(--font-text);
	font-weight: 400;
	text-transform: none;
	font-size: var(--font-size-p);
	line-height: var(--line-height-body);
}

/* Links */

a, button, input {
	/*transition: color .1s ease-in-out,background-color .1s ease-in-out;*/
	transition:
		background-color var(--transition-normal),
		color var(--transition-normal),
		border-color var(--transition-normal);
}

/* Listen */

li {
	font-family: var(--font-text);
	font-weight: 400;
	text-transform: none;
	font-size: var(--font-size-li);
	line-height: var(--line-height-body);
}

/* Blockquote */

blockquote {
	font-family: var(--font-zitat);
	border-left: 5px solid rgba(0,0,0,.05);
	padding: 20px;
	font-size: 1.2em;
	font-style: normal;
	margin: 0 0 1.5em;
	position: relative;
}
blockquote p {
	font-family: var(--font-zitat);
}

/* ------------------------------------------
   Überschriften
   ------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-heading);
	color: var(--accent-2);
	text-transform: none;
}

h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-body);
}

h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-heading);
}

h3 {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-heading);
}

h4, 
h5, 
h6 {
	font-size: var(--font-size-h4);
	line-height: var(--line-height-heading);
}

/* ==========================================
   Ende   Typografie
   ========================================== */


/* ==========================================
   Header
   ========================================== */

/* ==========================================
   Ende Header
   ========================================== */


/* ======================================================
   Hauptmenü Primary Navigation GeneratePress
   ====================================================== */

/* Hauptnavigation */

.main-navigation .main-nav ul li {
	
	display: inline-block;
}

.main-navigation .main-nav ul li a {
	
	position: relative;

	font-family: var(--font-text);
	font-size: var(--font-size-navi);
	font-weight: var(--font-weight-navi);
	line-height: 1.5;

	color: var(--contrast-2);
	text-transform: uppercase;
	text-decoration: none;
	font-kerning: none;
	letter-spacing: 0.03em;

	padding-inline: 16px;
	margin-bottom: 35px;

	transition: color .3s ease;
}

/* ------------------------------------------
   Farbwechsel bei hover/aktive
   ------------------------------------------ */

/* Hover: Linie */

.main-navigation .main-nav ul li:not(.linkedin-button):not(.wpml-ls-item) a:hover {
	
	color: var(--accent);
}

/* Aktiver Menüpunkt: Farbe */

.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	
	color: var(--accent);
}


/* ------------------------------------------
   Linie bei hover/aktive
   ------------------------------------------ */

/* Linie ::after */

.main-navigation .main-nav ul li:not(.linkedin-button):not(.wpml-ls-item) > a::after {
	
	content: "";
	display: block;

	width: 50px;
	height: 3px;
	margin: 3px auto 0;

	background: transparent;
	transition: background-color .3s ease;
}

/* -> .wpml-ls-item muss wahrscheinlich noch umgebaut werden für anderes Übersetzungs-Plugin: Polylang Pro */


/* Sichtbare Linie bei Hover und aktivem Menüpunkt */

.main-navigation .main-nav > ul > li:not(.linkedin-button):not(.wpml-ls-item) a:hover::after,
.main-navigation .main-nav > ul > li[class*="current-menu-"]:not(.linkedin-button):not(.wpml-ls-item) > a::after,
.main-navigation .main-nav > ul > li.menu-item-has-children > ul > li[class*="current_page_item"] > a::after {
	
	background: var(--accent);
}

/* ------------------------------------------
   Fetter Text bei hover/aktive 
   ------------------------------------------ */

/* Hover: SemiBold */
/*
.main-navigation .main-nav ul li:not(.linkedin-button):not(.wpml-ls-item) a:hover {
	
	var(--font-weight-navi-hover);
}
*/
/* Aktiver Menüpunkt: SemiBold */
/*
.main-navigation .main-nav ul li[class*="current-menu-"] a {
	
	font-weight: 600;
}
*/
/* Breite für den aktiven fetteren Text */ 
/*
.main-navigation .main-nav ul li:not(.linkedin-button):not(.wpml-ls-item) a::before { 
	
	content: attr(data-text);

	font: inherit;
	font-weight: var(--font-weight-navi-hover);
	text-transform: inherit;
	font-kerning: inherit;
	letter-spacing: inherit;

	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	white-space: nowrap;
	pointer-events: none;
}
*/

/* ------------------------------------------
   alternativ Textshadow für scheinbar fetten Text bei hover/aktive 
   ------------------------------------------ */

/* Textshadow statt fett */
/* Hauptmenü-Punkte bei Hover und im aktiven Zustand "fett" machen */
/*
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	
    text-shadow: 0.6px 0 0 currentColor, -0.6px 0 0 currentColor;
}
*/

/* Textshadow statt fett */

/* Untermenü-Punkte (Dropdowns) optional ebenfalls anpassen */
/*
.main-navigation .main-nav > ul > li > ul > li:hover > a,
.main-navigation .main-nav > ul > li > ul > li[class*="current-menu-"] > a {
	
    text-shadow: 0.6px 0 0 currentColor, -0.6px 0 0 currentColor;
}
*/
/* ------------------------------------------
   Untermenü vom Hauptmenü GeneratePress
   ------------------------------------------ */

/* Untermenue */

.main-navigation .main-nav > ul > li > ul {
	
	background: rgba(255,255,255,0.95); /* var(--base-3); */
	border-radius: 0;
	padding: 10px 0;
	box-shadow: 0 8px 25px rgba(0,0,0,.08);
	
	text-align: center;
}

.main-navigation .main-nav > ul > li > ul > li {
	
	display: block;
	width: 100%;
}

.main-navigation .main-nav > ul > li > ul > li > a {
	
	font-size: var(--font-size-p-small);
	font-weight: var(--font-weight-navi);
	text-transform: none;

	color: var(--contrast-2);

	padding: 10px 20px;
	margin-bottom: 0;

	letter-spacing: 0.02em;
}


/* Hover Untermenü */

.main-navigation .main-nav > ul > li > ul > li > a:hover {
	
	color: var(--accent);
	background: transparent;
}

/* Aktiver Untermenüpunkt */

.main-navigation .main-nav > ul > li > ul > li[class*="current-menu-"] > a {
	
	/*font-weight: 600;*/
	color: var(--accent);
	background: transparent;
}


/* -------------------------------------
   LinkedIn Button
   ------------------------------------- */

.main-navigation .main-nav > ul > li.linkedin-button > a {
	
	display: flex;
	align-items: center;
	justify-content: center;

	width: 25px;
	height: 25px;

	padding: 0;
	margin-left: 15px;
	margin-top: -10px;

	background: var(--contrast-2);
	color: var(--base-3);

	font-family: Arial, sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 0;

	border-radius: 3px;

	text-transform: none;

	transition:
		background-color .3s ease,
		color .3s ease;
}


/* Hover */

.main-navigation .main-nav > ul > li.linkedin-button > a:hover {
	
	background: var(--accent);
	color: var(--base-3);
}

/* -------------------------------------
   WPML Sprachumschalter Desktop => Muss wahrscheinlich noch umgebaut werden für anderes Übersetzungs-Plugin
   ------------------------------------- */
.main-navigation .main-nav > ul > li.wpml-ls-item > a {
	font-size: .85rem;
	letter-spacing: .08em;

	padding-inline: 12px;
	color: var(--contrast-2);
}

.main-navigation .main-nav > ul > li.wpml-ls-item > a:hover {
	color: var(--accent);
}


/* -------------------------------------
   Desktop Navigation GeneratePress
   ------------------------------------- */

@media (min-width: 1024px) {

	/* Dropdown-Pfeile der Hauptnavigation ausblenden */

	/*
	.menu-item-has-children > a {

		padding-right: 1.25em;
	}

	.main-navigation .dropdown-menu-toggle {

		width: 1em;
		margin-left: .25em;

		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.main-navigation .dropdown-menu-toggle svg {

		visibility: hidden;
	}
	*/
}

/* -------------------------------------
   Mobile Navigation GeneratePress
   ------------------------------------- */

@media (max-width: 1024px) {

	/* Text "Menü" */
	
	.menu-toggle .gp-icon + .mobile-menu {
		
		font-size: var(--font-size-navi-mobil);
		font-weight: var(--font-weight-navi-mobil);

		color: var(--contrast-2);
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	/* Mobile Menü Container */
	
	.main-navigation .main-nav {
		
		background: var(--base-3);
	}

	/* Hauptmenüpunkte */
	
	#site-navigation.toggled .main-nav > ul {
		
		display: grid;
	}
	
	#site-navigation .nav-align-center .main-nav > ul {	
		
		display: grid;		
		justify-content: center;	
	}
	
	#site-navigation.toggled .main-nav li {
		
		text-align: center;
	}
	
	#site-navigation.toggled .main-nav li.linkedin-button {
		
		display: grid;
		width: auto;

		justify-content: center;
	}

	.main-navigation .main-nav ul li a {
		
		font-size: var(--font-size-navi-mobil);
		font-weight: var(--font-weight-navi-mobil);

		padding: 14px 25px;
		margin-bottom: 0;

		color: var(--contrast-2);
		letter-spacing: 0.03em;
	}

	/* Hover */
	
	.main-navigation .main-nav ul li a:hover,
	.main-navigation .main-nav ul li a:focus {
		
		color: var(--accent);
		background: transparent;
	}


	/* Aktiver Menüpunkt */
	
	.main-navigation .main-nav ul li[class*="current-menu-"] > a {
		
		font-weight: var(--font-weight-navi-mobil-hover);
		color: var(--accent);
	}

	/* Linie im mobilen Menü entfernen */
	
	.main-navigation .main-nav ul li a::after,
	.main-navigation .main-nav ul li a::before {
		
		display: none;
	}


	/* Untermenüs */
	
	.main-navigation .main-nav ul ul {
		
		background: transparent;
		padding: 0 0 10px 20px;
		box-shadow: none;
	}


	.main-navigation .main-nav ul ul li a {
		
		font-size: var(--font-weight-unternavi-mobil);
		padding: 10px 25px;

		text-transform: none;
		font-weight: var(--font-weight-navi-mobil);
	}


	/* Untermenü aktiver Punkt */
	
	#site-navigation .main-nav ul ul li[class*="current-menu-"] > a {
		
		font-weight: var(--font-weight-navi-mobil-hover);
		color: var(--accent);
	}


	/* Mobile Toggle */
	
	.menu-toggle {
		
		color: var(--contrast-2);
		font-size: var(--font-size-navi-mobil);
		padding: 15px 20px;
	}


	.menu-toggle:hover {
		
		color: var(--accent);
	}

	/* Mobile LinkeIn-Button */
	
	.main-navigation .main-nav ul li.linkedin-button {
		
		margin: 15px 25px;
	}

	.main-navigation .main-nav ul li.linkedin-button > a {

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

		width: 25px;
		height: 25px;

		padding: 0;
		margin-left: 15px;

		background: var(--contrast-2);
		color: var(--base-3);

		font-family: Arial, sans-serif;
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1;

		border-radius: 3px;

		text-transform: none;

		transition:
			background-color .3s ease,
			color .3s ease;
	}

	.main-navigation .main-nav ul li.linkedin-button > a:hover {
		
		background: var(--accent);
		color: var(--base-3);
	}

	/* Mobile WPML Sprach-Umschalter */
	.main-navigation .main-nav ul li.wpml-ls-item > a {
		
		font-size: var(--font-size-navi-mobil);
		letter-spacing: .08em;

		margin-top: 15px;
		padding-left: 25px;
	}
	
}

/* ======================================================
   Ende     Hauptmenü Primary Navigation GeneratePress
   ====================================================== */


/* ==========================================
   Page Hero
   ========================================== */

/* Sichtbarkeit der Hero-Varianten */

.page-hero-desktop {
	
    display: block;
}

.page-hero-tablet,
.page-hero-mobile {
	
    display: none;
}

/* ------------------------------------------
   Gemeinsame Regeln Page Hero
   ------------------------------------------ */


/* Hintergrundcontainer
   ------------------------------------------ */
.page-hero-hintergrund-container {

    position: relative;

    display: flex;

    background-size: cover;

    background-repeat: no-repeat;
}

/* Hintergrundlogo
   ------------------------------------------ */
.page-hero-container-logo-hintergrund-element {
	
    position: absolute;

	left:0;
	bottom:0;

    width: clamp(160px, 22vw, 340px);
    aspect-ratio: 1;

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

    opacity: .4;

    z-index: 1;
}

/* Textbox
   ------------------------------------------ */

.page-hero-inhalt-container{

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 2;
}

/* Texte
   ------------------------------------------ */

/* Pretitle = SEO-Title */

.page-hero-inhalt-container h1,
.home .page-hero-inhalt-container p {

	font-family: var(--font-text);
	font-size: var(--font-size-p);
	font-weight: 400;

	color: var(--contrast);

	text-transform: none;

	line-height: var(--line-height-body);


	margin-bottom: .75rem;

	letter-spacing: 0em;
}

/* Hauptüberschrift */

.page-hero-inhalt-container p,
.home .page-hero-inhalt-container h1 {

	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-heading);

	color: var(--accent-2);

	text-transform: none;

	margin: 0;

	line-height: 1.1;
}

/* Hero Button */ /* -> .section-button */

.page-hero-button-container {	
}


/* Logo */

.page-hero-logo-container {

	display: flex;
	
	justify-content: left;
	
}

.page-hero-logo-content {

	display: flex;
	align-items: flex-start;
	
	justify-content: center;
	
	max-width: 350px;
	
	padding-top: 20px;
}

/* ------------------------------------------
   Desktop Ansicht Page Hero
   ------------------------------------------ */


/* Hintergrundcontainer
   ------------------------------------------ */
.page-hero-desktop .page-hero-hintergrund-container {

    align-items: center;
    justify-content: flex-start;

    max-width: var(--layout-width);
    margin-inline: auto;

    padding-inline: 4rem;

    background-position: top right;

    overflow: hidden;
}

/* Höhe Hintergrundcontainer / Hintergrundbild
   ------------------------------------------ */

.page-hero-desktop .page-hero-hintergrund-container {

    height: 575px;

}

/* Ausrichtung Hintergrundbild
   ------------------------------------------ */

/* Startseite .home / Termine .page-id-214 / Programme .page-id-224 / Mit mir arbeiten .page-id-12 / Über mich .page-id-51 / 
   Presse/Blog .page-id-2192 / Presse .page-id-216 / Kolumnen .page-id-2071 / Blog .page-id-210 / Kontakt .page-id-130
   Impressum .page-id-259 / Datenschutz .privacy-policy / Qualitätsversprechen .page-id-444 / Error .error404  */

/* Programme (224), Mit mir arbeiten (12), Presse/Blog (2192), Presse/Medienberichte (216), Kolumnen (2071), Blog (210) */

.page-id-224 .page-hero-desktop .page-hero-hintergrund-container,
/*.page-id-12 .page-hero-desktop .page-hero-hintergrund-container,*/
.page-id-51 .page-hero-desktop .page-hero-hintergrund-container,
.page-id-2192 .page-hero-desktop .page-hero-hintergrund-container,
/*.page-id-216 .page-hero-desktop .page-hero-hintergrund-container,*/
/*.page-id-2071 .page-hero-desktop .page-hero-hintergrund-container,*/
.page-id-210 .page-hero-desktop .page-hero-hintergrund-container,
.page-id-130.page-hero-desktop .page-hero-hintergrund-container,
.page-id-259 .page-hero-desktop .page-hero-hintergrund-container {
	
	background-position: left top;
}

/* Textbox
   ------------------------------------------ */

.page-hero-desktop .page-hero-inhalt-container {

    width: 580px;
	
	min-height: 350px;

    margin-left: 0;
	
	padding:
		var(--space-s)
		var(--space-m);

    background: rgba(251,247,243,.88);
	
	border-radius:var(--radius-xs);
	
	justify-content: center;
}

/* Anordnung Textbox */

/* Startseite .home / Termine .page-id-214 / Programme .page-id-224 / Mit mir arbeiten .page-id-12 / Über mich .page-id-51 / 
   Presse/Blog .page-id-2192 / Presse .page-id-216 / Kolumnen .page-id-2071 / Blog .page-id-210 / Kontakt .page-id-130
   Impressum .page-id-259 / Datenschutz .privacy-policy / Qualitätsversprechen .page-id-444 / Error .error404  */

/* Programme (224), Mit mir arbeiten (12), Presse/Blog (2192), Presse/Medienberichte (216), Kolumnen (2071), Blog (210) */

.page-id-224 .page-hero-desktop .page-hero-inhalt-container,
/*.page-id-12 .page-hero-desktop .page-hero-inhalt-container,*/
.page-id-51 .page-hero-desktop .page-hero-inhalt-container,
.page-id-2192 .page-hero-desktop .page-hero-inhalt-container,
/*.page-id-216 .page-hero-desktop .page-hero-inhalt-container,*/
/*.page-id-2071 .page-hero-desktop .page-hero-inhalt-container,*/
.page-id-210 .page-hero-desktop .page-hero-inhalt-container,
.page-id-130 .page-hero-desktop .page-hero-inhalt-container,
.page-id-259 .page-hero-desktop .page-hero-inhalt-container {
	
    margin-left: auto;
    margin-right: 0;
}

/* ------------------------------------------
   Tablet Ansicht Page Hero
   ------------------------------------------ */

@media (max-width: 1024px) {

    /* Sichtbarkeit */
	.page-hero-desktop {
		
        display: none;
    }

    .page-hero-tablet {
		
        display: block;
    }

	/* Hintergrund */
    .page-hero-tablet .page-hero-hintergrund-container {

        align-items: flex-end;
		
		justify-content: flex-end;

        padding: 0;
    }
	
	.page-hero-tablet .page-hero-hintergrund-container {

        min-height: 585px;
		aspect-ratio: 1/1;
    }

	/* Logo */
		.page-hero-logo-container {

		justify-content: center;
	}
	
    .page-hero-tablet .page-hero-container-logo-hintergrund-element {

        width: 180px;
    }
	
	/* Textbox */
	.page-hero-tablet .page-hero-inhalt-container {

		padding: 2.5rem var(--layout-padding-tablet);

		background: rgba(251,247,243,.88);

        width: 100%;
		max-width: 100%;
		
		margin: 0;

        border-radius: 0;
	}
	
	/* Ausrichtung Text-Inhalt und Button */
	.page-hero-inhalt-container > p, 
	.home .page-hero-inhalt-container > h1,
	.page-hero-inhalt-container > h1,
	.home .page-hero-inhalt-container > p {

		text-align: center;
	}
	
	.page-hero-button-container {
		
		display: flex;
		justify-content: center;
	}
	
}

/* ------------------------------------------
   Mobile Ansicht Page Hero
   ------------------------------------------ */

@media (max-width:585px) {

    /* Sichtbarkeit */
    .page-hero-desktop,
	.page-hero-tablet {
		
        display: none;
    }

    .page-hero-mobile {
		
        display: block;
    }

    /* Hintergrund - Bildbereich */
    .page-hero-mobile .page-hero-hintergrund-container {

        display: block;

        padding: 0;

        overflow: hidden;

        background-size: cover;
        background-position: center center;
    }
	
	.page-hero-mobile .page-hero-hintergrund-container {
		
		aspect-ratio: 1/1;
    }

    /* Logo */
    .page-hero-mobile .page-hero-container-logo-hintergrund-element {

        width: 140px;

    }
	
	.page-hero-logo-content {

		max-width: 280px;
	}

    /* Textbox */
    .page-hero-mobile .page-hero-inhalt-container {

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: none;

        margin: 0;

        padding: 2rem var(--layout-padding-mobile);

        border-radius: 0;

        background: rgba(251,247,243,.95);

    }

}

@media (max-width:340px) {

    /* Textbox */
    .page-hero-mobile .page-hero-inhalt-container {

        padding: 2rem var(--layout-padding-mobile-mini);

    }

}


/* ==========================================
   Ende   Page Hero
   ========================================== */




/* ==========================================
   Inhaltsblöcke
   ========================================== */

/* ==========================================
   Komponenten Inhaltsblöcke
   ========================================== */
/*
Komponenten
│
├── Intro
├── Buttons
├── Karten
│     ├── Projektkarte
│     ├── Pressekarte
│     └── Veranstaltungskarte
├── Slider
├── Navigation
├── Dekorationen
└── Footer
*/

/*


Komponenten

Layout
├── Intro
├── Footer

Interaktion
├── Buttons
├── Slider
├── Navigation

Content
├── Projektkarte
├── Pressekarte
├── Veranstaltungskarte

Dekoration
├── Hintergrund
└── Vordergrund


*/

/* -------------------------------------
 * Komponente - Intro
 * ------------------------------------- */


/* -------------------------------------
 * Komponente - Buttons
 * ------------------------------------- */


/* -------------------------------------
 * Komponente – Dekoration
 * ------------------------------------- */

.content-decoration {

    position: absolute;
    pointer-events:none;
    user-select:none;
}

/* Varianten */

.content-decoration-left {}

.content-decoration-right {}

.content-decoration-front {}

.content-decoration-back {}


/* -------------------------------------
 * Komponente - Karten
 * ------------------------------------- */

/* Verwendung:
   - Inhaltsblock 02 – Projekte & Programme
   - Inhaltsblock 05 – Presse & Keynotes & Konferenzen
   - Archivseite Projekte (geplant)
   - Archivseite Presse / Keynotes / Konferenzen (geplant)
   - weitere Query-basierte Inhaltsblöcke

   Abhängigkeiten:
   - GenerateBlocks Query
   - ACF Dynamic Data
   - Kartenlayout mit Bild, Titel und Beschreibung
   ------------------------------------------ */


/* Pressekarte */


/* Veranstaltungskarte */

/* -------------------------------------
 * Komponente - Eventbilder
 * -------------------------------------*/

:root {

    --event-image-height-desktop: 300px;
    --event-image-height-tablet: 280px;
    --event-image-height-tablet-small: 220px;
    --event-image-height-mobile: 280px;

}

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


/* Slider */

:root {

    --slider-pagination-space: 2rem;

    --logo-card-height-desktop: 140px;
    --logo-card-height-tablet: 120px;
    --logo-card-height-mobile: 100px;
	

    --event-card-image-height-desktop: 300px;
    --event-card-image-height-tablet: 280px;
    --event-card-image-height-mobile: 280px;

}

/* -------------------------------------
 * Komponente - Slider-Navigation
 * ------------------------------------- */

/* Navigation */

.content-slider .slider-navigation {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 2rem;

    margin-top: 2rem;
}

/* Pfeile */

.content-slider .gb-carousel-control {

    color: var(--contrast-2);
	background: none;
}

.content-slider .gb-carousel-control:hover,
.content-slider .gb-carousel-control:focus,
.content-slider .gb-carousel-control:is(:hover, :focus) {

    color: var(--accent);
	background: none;
}

.content-slider .slider-arrow-container-left {
	left: 0;
}

.content-slider .slider-arrow-container-right {
	right: 0;
}

/* SVG-Pfeile */

.content-slider .gb-carousel-control .gb-carousel-control-icon svg {

    width: 50px;
    height: 50px;
}


/* Bullet-Design */

.content-slider .gb-carousel-pagination .gb-carousel-dot {
	background-color: var(--base);
	height: 14px;
	width: 14px;
}

.content-slider :where(.gb-carousel-pagination) .gb-carousel-dot.is-active {
	background-color: var(--accent);
	transform: scale(1);
}

@media (max-width: 1024px) {
	
	/* SVG-Pfeile */

	.content-slider .gb-carousel-control .gb-carousel-control-icon svg {

		width: 45px;
		height: 45px;
	}

}

@media (max-width: 585px) {
	
	/* vertikale Anordnung Pfeile links und rechts - leichte Korrektur */
	
	.content-slider .slider-arrow-container-left {
		top: 45%;
	}

	.content-slider .slider-arrow-container-right {
		top: 45%;
	}
	
	/* SVG-Pfeile */

	.content-slider .gb-carousel-control .gb-carousel-control-icon svg {

		width: 40px;
		height: 40px;
	}
}

/* -------------------------------------
   Komponente – Icon-Liste
   ------------------------------------- */

/*
.icon-list
└── .icon-list-item
    ├── .icon-list-icon
    └── .icon-list-content
        └── .icon-list-title
        └── .icon-list-text

.icon-list
│
├── .icon-list-item
│
│    ├── .icon-list-icon
│    │
│    └── .icon-list-content
│         │
│         ├── beliebige Überschrift
│         ├── beliebiger Text
│         ├── beliebige Liste
│         └── weitere Elemente

*/

/* Allgemein */

/* Listenelement */

/* wenn Text ohne Icon darüber */
.icon-list {
	
	display: grid;	
	gap: 1.5rem;
}

.icon-list-item {
	
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Icon */

.icon-list-icon {
	
    color: var(--contrast-2);
	
	width: 3rem;
	flex-shrink: 0;
	
	/* Optischer Ausgleich, da das SVG oberhalb Leerraum besitzt */
	transform: translateY(-1.2rem);
}

/* Text */

.icon-list-title, 
.icon-list-text {

	display: inline;
	line-height: 1.6;
}

.icon-list-title {

    font-weight: 600;
}

.icon-list-text {

    font-weight: 400;
	
	column-gap: 0.5em;
	display: inline-flex;
}

/* -------------------------------------
   Komponente – Content-Grid (2 Spalten)
   ------------------------------------- */

/*
.content-grid
├── .content-grid-content
└── .content-grid-aside
    └── img.content-grid-photo
*/

/* Grid
 * ------------------------------------- */

.content-grid {

    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: var(--space-xs);

    align-items: center;
}

/* Linke Spalte
 * ------------------------------------- */

.content-grid-content {

    display: flex;
    flex-direction: column;
    gap: var(--space-s);
	
	margin-bottom: 1.5em;
}

/* Text über .icon-list */
.content-grid-text {
	
	margin-bottom: 0em;
	
	/* Iconbreite 3rem + Gab 1.5rem */
	padding-left: 4.5rem;
}

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

.content-grid-aside {

    position: relative;

    justify-self: end;
    align-self: start;

    padding-top: var(--space-m);
	
	/* Letztes Element der rechten Spalte nach unten schieben */
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Letztes Element der rechten Spalte nach unten schieben */
/* und Ausrichtung */
.content-grid-button-wrapper {
	
	display: flex;
	justify-content: center;
	
	margin-top: auto;
	margin-bottom: 1.5em;
}

.content-grid-photo {

    display: block;

    width: 100%;
    max-width: 450px;

    height: auto;
}

/* Über mich */

.page-id-51 .content-competence .content-grid-aside {
	
	justify-self: start;
	
	padding-top: 0;
}

.page-id-51 .content-engagement .content-grid {

	gap: var(--space-m);
}

.page-id-51 .content-competence .content-grid-photo {
	
	max-width: 500px;
}

.page-id-51 .content-engagement .content-grid-photo {
	
	max-width: 500px;
}

/* Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

    .content-grid {

        grid-template-columns: 1fr;
    }

    .content-grid-aside {

        justify-self: center;
        padding-top: 0;
    }
	
	
	.page-id-51 .content-competence .content-grid-aside {

		justify-self: center;
	}
}

/* -------------------------------------
 * Komponente - Footer mit 1 Button
 * ------------------------------------- */

.content-footer {
	
	display: grid;
	grid-template-columns: repeat(1, 1fr);

	gap: 3rem;

	margin-top: clamp(1rem, 6vw, 2rem);
}

.content-footer-item {

	display:flex;
	flex-direction:column;

	align-items:center;

	height:100%;
}

/* ==========================================
   Ende Komponenten Inhaltsblöcke
   ========================================== */


/* ==========================================
 * Gemeinsame Regeln Inhaltsblöcke
 * ========================================== */

/* Standardcontainer */ /* max-width horizontales Padding Zentrierung */
.content-container {
    position: relative;

    display: block;
	max-width: 1360px;
    margin-inline: auto;
    /*padding-inline: clamp(2rem, 4vw, 4rem);*/ /* -> hier weg wegen Design-Element */
}

/* bei Bedarf */
.content-grid {}
.content-stack {}
.content-two-columns {}

/* Intro und Grid immer über den Dekoelementen */
.content-intro-container,
.content-contact-grid {
    position: relative;
    z-index: 2;
}

/* -------------------------------------
 * Ebenen
 * ------------------------------------- */
/*
Ebene 4
──────────────
Button

Ebene 3
──────────────
Dekoelement im Vordergrund (vor Bild und Text)

Ebene 2
──────────────
Intro
Grid

Ebene 1
──────────────
Dekoelement im Hintergrund (hinter Bild und Text)

Ebene 0
──────────────
Hintergrund

*/

/* Hintergrund */
.content-contact {
    position: relative;
	z-index: 0;
}

/* Intro + Grid (Inhalt) */
.content-intro-container,
.content-contact-grid,
.content-events-container,
.site-footer {
    position: relative;
    z-index: 2;
}

/* Dekoration 
 * ----------*/

/* Dekoelemente im Hintergrund */
.content-decoration {
    position: absolute;
	z-index: 1;
    pointer-events: none;
	user-select: none;
}

/* linke Deko (Startseite - Kontakt) */
.content-contact-decoration-left {
    position: absolute;
    z-index: 1;
}

/* rechte Deko (Startseite - Events) */
.content-events-decoration-right {
    position: absolute;
    z-index: 1;
}

/* Foto hinter Dekoelement (.content-contact-decoration-right) */

/* rechte Deko (Kontaktseite) */
.content-contact-decoration-right {
    position: absolute;
    z-index: 3;
}

/* ==========================================
 * Gemeinsame Regeln Inhaltsblöcke
 * ========================================== */

/* ==========================================
   Inhaltsblock 01 – Einleitung
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* gemeinsame Klasse aus für fast alle Inhaltsblöcke */

.content-intro {

	padding-top: clamp(1rem, 6vw, 3rem);
	padding-bottom: clamp(.2rem, 6vw, 1rem);
}

/* Container */

.content-intro-container {
	position: relative;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	margin-bottom: var(--space-s);
}

/* Spezialfarbe Seite Programme (224) */
.page-id-224 .content-intro {
	
	background-color: var(--bg-gray);
}


/* Content */
.content-intro-content {

	display: flex;
	flex-direction: column;

	gap: 1.5rem;
}

.content-intro-content > p {
	
	text-align: center;
	
	margin-bottom: var(--space-xxs);
}

.content-intro-content > p:first-child,
.content-intro-content > h2 {
	
	max-width: 880px;
	align-self: center;
}

/* -------------------------------------
 * Typografie
 * ------------------------------------- */

/* Pretitle */

.content-intro-content > h2.content-intro-pretitle {

	font-family: var(--font-text);
	font-size: var(--font-size-p);
	
	font-weight: var(--font-weight-p);
	line-height: var(--line-height-body);
	
	color: var(--font-color-p);
	
	text-transform: none;
	/*letter-spacing: .08em;*/

	margin: 0;

	text-align: center;
}

/* Titel */

.content-intro-content > p.content-intro-title {

	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	
	font-weight: var(--font-weight-heading);
	line-height: var(--line-height-heading);
	
	color: var(--font-color-heading);

	margin: 0;

	text-align: center;
}

/* WYSIWYG */
.content-intro-text {
	display: flex;
	flex-direction: column;

	gap: 1rem;
	
	text-align: center;
}

.content-intro-text p {
    margin: 0;
}

.content-intro-text strong {
    font-weight: 600;
}

.content-intro-text a {
    /* Linkstil */
}

.content-intro-text ul {
	margin: 0;
	padding-left: 1.5rem;
}

.content-intro-text li {
	margin-bottom: .5rem;
}

/* Dekoelement */

.content-intro-decoration {
	position: absolute;
	
	width: 100%;
	height: auto;
	max-width: 243px;

	right: 0;
	bottom: -120px;

	pointer-events: none;
}

/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-intro-content {
	padding-left: var(--layout-padding-desktop);
	padding-right: var(--layout-padding-desktop);
	padding-bottom: var(--space-s);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-intro-content {
		padding-left: var(--layout-padding-tablet);
		padding-right: var(--layout-padding-tablet);
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-intro-content {
		padding-left: var(--layout-padding-mobile);
		padding-right: var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-intro-content {
		padding-left: var(--layout-padding-mobile-mini);
		padding-right: var(--layout-padding-mobile-mini);
	}
}

/* ==========================================
   Ende Inhaltsblock 01 – Einleitung
   ========================================== */


/* ==========================================
   Inhaltsblock 02 – Projekte & Programme
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-projekte {
	
	background-color: var(--base);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------
 * Projekte & Programme
 * ------------------------------------- */

/* Grid 2 Spalten */

.content-projekte-grid {

    display: grid;
	width: 100%;
    grid-template-columns: 1fr 1fr;
	
    column-gap: var(--grid-gap-column);
	row-gap: var(--grid-gap-row);

    align-items: top;
	
	padding: 0 var(--layout-padding-desktop);
}

/* Projektbereich */
.content-projekte-container {
	
	/*margin-top: clamp(2rem, 5vw, 3rem);*/
	
	padding: 0;
}

/* Query */
.content-projekte-query > div {
	
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	
	column-gap: var(--grid-gap-column);
	row-gap: var(--grid-gap-row);
	
	margin-top: clamp(2rem, 5vw, 3rem);
}


/* -------------------------------------
 * Projektkarte
 * ------------------------------------- */

.content-projekte-card {

	display: flex;
	flex-direction: column;

	height: 100%;

	background: var(--base-3);

	overflow: visible;

}

a.content-projekte-card {
	text-decoration: none;
}
a.content-projekte-card:hover, 
a.content-projekte-card:focus, 
a.content-projekte-card:active {
  color: var(--contrast);
}

/* Bild */
.content-projekte-card-image {

	display:block;

	width:100%;
	height:auto;

	aspect-ratio: 3 / 2;

	object-fit: cover;
}

/* Inhalt */
.content-projekte-card-content {

	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding: 1.5rem;

	gap: 1rem;
}

/* Titel */
.content-projekte-card-title {
	
	font-family: var(--font-text);
	font-size: var(--font-size-p-small); /* h3 zu groß */
	color: var(--contrast);
	
	text-align: center;
	
	margin: 0;

	line-height: 1.3;
	min-height: calc(3 * 1.3em);
}

/* Text */
.content-projekte-card-text {

	flex-grow: 1;
	
	/*max-height: calc(10 * 1.5 * var(--font-size-p-small) + .14rem);*/
	max-height: calc(10 * 1.5 * var(--font-size-p-very-small) - 0.24rem);

    overflow: hidden;
}

.content-projekte-card-text p {
	
	/*font-size: var(--font-size-p-small);*/
	font-size: var(--font-size-p-very-small);

    margin: 0 0 20px 0;
}

.content-projekte-card-text p:last-child {

    margin-bottom: 0;
}


/* Dekoelement */
.content-projekte-card-decoration{

	display: block;

	width: 100px;
	height: auto;

	margin: auto auto -40px; 
}

/* -------------------------------------
 * Footer
 * ------------------------------------- */
.content-projekte-footer {
	
	display: grid;
	grid-template-columns: 1fr;

	gap: 3rem;

	margin-top: clamp(3rem, 6vw, 5rem);
}

.content-projekte-footer-item {

	display:flex;
	flex-direction:column;

	align-items:center;

	height:100%;
}

.content-projekte-logo {

	display: flex;

	align-items: flex-start;
	justify-content: center;

	min-height: 120px;
}

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

/* Button */
.content-projekte-button {

	margin-top: auto;
}


/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-projekte-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.content-projekte-grid {
		
		display: grid;
		width: 100%;
		
		grid-template-columns: 1fr;
		
		column-gap: var(--grid-gap-column);
		row-gap: var(--grid-gap-row);
		
		padding: 0;
	}

	.content-projekte-query > div {
		
		grid-template-columns: repeat(2,1fr);
		
		row-gap: 4rem;
	}

	.content-projekte-footer {
		
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-projekte-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.content-projekte-query > div {
		
		grid-template-columns: 1fr;
		
		row-gap: 5rem;
	}
}

@media (max-width: 340px) {
	
	.content-projekte-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 02 – Projekte & Programme
   ============================================ */



/* ==========================================
   Inhaltsblock 03 – Kontakt
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-contact {
	background-color: var(--base-3);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------
 * Kontakt
 * ------------------------------------- */

.content-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-l);
	align-items: center;
}

/* Linke Spalte
 * ------------------------------------- */

.content-contact-text {
	
	display: flex;
	flex-direction: column;
	gap: var(--space-xxs);
}

p.content-contact-text-content {
	
	margin-bottom: var(--space-xs);
}

.home p.content-contact-text-content {
	
	margin-bottom: var(--space-xl);
}

.content-contact-details {
	
	display: flex;
	flex-direction: column;
	/*gap: var(--space-xxs);*/
}

.content-contact-details p {
	
	margin-bottom: 0;
}

.content-contact-name {
	
	font-weight: 600;
}

/* LinkedIn-Text */
.content-contact-linkedin-content {
	
	margin-top: var(--space-s);
}

.content-contact-linkedin {
	
	display: inline;
}

/* -------------------------------------
 * Foto
 * ------------------------------------- */

.content-contact-image {
	position: relative;
	display: flex;
	justify-self: right;
	
  	flex-direction: column; 
	align-self: flex-start;
	/*padding-top: var(--space-m);*/
}

.page-id-130 .content-contact-image {

	justify-self: left;
}

.content-contact-photo {
	width: 100%;
	max-width: 550px;
	height: auto;
	display: block;
}

.page-id-130 .content-contact-photo {

	max-width: 468px;
}


/* -------------------------------------
 * Dekoelemente
 * ------------------------------------- */

.content-contact-decoration-left {

	width: 100%;
	height: auto;
	max-width: 525px;
	
	left: 0;
	bottom: 0;
}

.page-id-130 .content-contact-decoration-left {
	
	display: none;
}

.content-contact-decoration-right {

	width: 100%;
	height: auto;
	max-width: 243px;
	
	right: 0;
	bottom: -105px;
}

.home .content-contact-decoration-right {
	
	display: none;
}

/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-contact {
	
	padding-inline: var(--layout-padding-desktop);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

	.content-contact {
	
		padding-inline: var(--layout-padding-tablet);
	}
	
	.content-contact-decoration-left {

		max-width: 325px;
	}

	.content-contact-decoration-right {

		max-width: 193px;

		bottom: -60px;
	}
}

@media (max-width: 750px) {
	
	.content-contact-grid {
		
		grid-template-columns: 1fr;
	}
	
	.content-contact-image {

		justify-self: left;
		
		padding-top: 0;
	}
	
	.content-contact-decoration-left {

		max-width: 300px;
		
		bottom: 480px;
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-contact {
	
		padding-inline: var(--layout-padding-mobile);
	}
	
	.content-contact-decoration-left {

		max-width: 275px;
		
		bottom: 400px;
	}

	.content-contact-decoration-right {

		max-width: 143px;

		bottom: -50px;
	}
}

@media (max-width: 340px) {
	
	.content-contact {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
	
	.content-contact-decoration-left {

		max-width: 225px;
		
		bottom: 300px;
	}
	
	.content-contact-decoration-right {

		max-width: 103px;

		bottom: -30px;
	}
}

/* ============================================
   Ende Inhaltsblock 03 – Kontakt
   ============================================ */


/* ==========================================
   Inhaltsblock 04 – Textblock
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-textblock {
	
	background-color: var(--contrast);
	padding-block: clamp(1.5rem, 6vw, 2rem);
}

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

/* WYSIWYG */

.content-textblock-content {
	
    max-width: 1200px;
    margin-inline: auto;
    text-align: center;
}

.content-textblock-content p {
	
	font-family: var(--font-zitat);
	font-weight: 400;
	color: var(--accent);
	
	text-transform: none;
	
	font-size: var(--font-size-zitat-large);
	line-height: 1.25;
	
	margin-bottom: 0;
	
}

.content-textblock-content strong {
	
	font-weight: 600;
}

/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-textblock {
	
	padding-inline: var(--layout-padding-desktop);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-textblock {
	
		padding-inline: var(--layout-padding-tablet);
	}
	
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-textblock {
	
		padding-inline: var(--layout-padding-mobile);
	}

}

@media (max-width: 340px) {
	
	.content-textblock {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
	
}

/* ============================================
   Ende Inhaltsblock 04 – Textblock
   ============================================ */


/* =================================================================
   Inhaltsblock 05 – Presseberichte & Keynotes & Konferenzen
   ================================================================= */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-presse {
	background-color: var(--base);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------
 * Presseberichte & Keynotes & Konferenzen
 * ------------------------------------- */

/* Pressebereich */
.content-presse-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
.content-presse-query > div {
	
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	
	column-gap: var(--grid-gap-column);
	row-gap: var(--grid-gap-row);
	
	margin-top: clamp(2rem, 5vw, 3rem);
}


/* -------------------------------------
 * Pressekarte
 * ------------------------------------- */

.content-presse-card {

	display: flex;
	flex-direction: column;

	height: 100%;

	background: var(--base-3);

	overflow: visible;

}

/* Bild */

.content-presse-card-image {

	display:block;

	width:100%;
	height:auto;

	aspect-ratio:1 / 1;

	object-fit:cover;
}

/* Inhalt */
.content-presse-card-content {

	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding: var(--space-s);

	gap: var(--space-s);
}

/* Titel */
.content-presse-card-title {
	
	font-family: var(--font-text);
	font-size: var(--font-size-h4); /* h3 zu groß */
	color: var(--contrast);
	
	text-align: center;
	
	margin: 0;
	
	line-height: 1.3;
	min-height: calc(3 * 1.3em);
}

/* Text */
.content-presse-card-text {

	flex-grow: 1;
	
	/*max-height: calc(8 * 1.5 * var(--font-size-p-small) + .14rem);*/
	max-height: calc(8 * 1.5 * var(--font-size-p-very-small) - 0.24rem);

    overflow: hidden;
}

.content-presse-card-text p {
	
	/*font-size: var(--font-size-p-small);*/
	font-size: var(--font-size-p-very-small);

    margin: 0 0 20px 0;
}

.content-presse-card-text p:last-child {

    margin-bottom: 0;
}

/* Dekoelement */
.content-presse-card-decoration{

	display: block;

	width: 100px;
	height: auto;

	margin: auto auto -40px;
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-presse-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.content-presse-query > div {
		
		grid-template-columns:repeat(2,1fr);
		
		row-gap: 4rem;
	}

	.content-presse-footer {
		
		grid-template-columns: 1fr;
	}
}

@media (max-width: 800px) {
	
	/* Query */
	.content-presse-query > div {

		grid-template-columns: 1fr;
	}

}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-presse-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.content-presse-query > div {
		
		grid-template-columns: 1fr;
		
		row-gap: 5rem;
	}
}

@media (max-width: 340px) {

	.content-presse-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}
}

/* =================================================================
   Ende Inhaltsblock 05 – Presseberichte, Keynotes und Konferenzen
   ================================================================= */


/* ==========================================
      Inhaltsblock 06 – Logo-Slider
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-known,
.content-cooperation-logo,
.content-references-logo {
	
	background-color: var(--base-3);
	padding-top: clamp(2rem, 6vw, 8rem);
	padding-bottom: clamp(1rem, 6vw, 4rem);
}

.content-cooperation-logo,
.content-references-logo {
	
	margin-bottom: clamp(1rem, 6vw, 2rem);
}

/* -------------------------------------
 * Carousel
 * ------------------------------------- */

.known-slider,
.cooperation-logo-slider,
.references-logo-slider { 
	
    --gb-carousel-slides-per-view: 5;
	--gb-carousel-slide-gap: 0rem;
}


/* -------------------------------------
 * Carousel Logobereich
 * ------------------------------------- */

.content-known-container,
.content-cooperation-logo-container,
.content-references-logo-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	margin-top: 0;
	
	padding: 0 var(--layout-padding-desktop);
}

/* -------------------------------------
 * Logo-Karte
 * ------------------------------------- */

/* Carousel-Item */
.content-slider .logo-card {
	
	display: flex;

    justify-content: center;

    align-items: center;

    height: var(--logo-card-height-desktop);
}

/* Logo-Image (img) */
.content-slider .logo-card-image {
	
	display: block;

    width: auto;
	height: auto;

    max-width: 80%;
    max-height: 70%;

    object-fit: contain;
}

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

/* siehe auch Komponenten Slider-Navigation */

/* Pagnitation - Bullets */

/* vertikale Anordnung Bullets (unter Logos) */
/* Höhe = Logobereich + Platz für Pagination */

.known-slider,
.cooperation-logo-slider,
.references-logo-slider {

    height: calc(
        var(--logo-card-height-desktop)
        + var(--slider-pagination-space)
    );
}

.cooperation-logo-slider {

    height: calc(
        var(--logo-card-height-desktop)
        + var(--slider-pagination-space) + 180px
    );
}

.references-logo-slider {

    height: calc(
        var(--logo-card-height-desktop)
        + var(--slider-pagination-space) + 100px
    );
}


.known-slider .slider-pagination-container,
.cooperation-logo-slider .slider-pagination-container,
.references-logo-slider .slider-pagination-container {
	
	bottom: 0;  
}


/* -------------------------------------
 * Query
 * ------------------------------------- */
.content-known-query > div,
.content-cooperation-logo-query > div,
.content-references-logo-query > div {
	
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-known {

		padding-bottom: 7rem;
	}
	
	.content-known-container,
	.content-cooperation-logo-container,
	.content-references-logo-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.known-slider,
	.cooperation-logo-slider,
	.references-logo-slider {
		
        --gb-carousel-slides-per-view: 3;
    }
	
	.content-slider .logo-card {

		height: var(--logo-card-height-tablet);
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-known {

		padding-bottom: 6rem;
	}
	
	.content-known-container,
	.content-cooperation-logo-container,
	.content-references-logo-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.known-slider,
	.content-cooperation-slider,
	.references-logo-slider {
		
        --gb-carousel-slides-per-view: 2;
    }
	
	.content-slider .logo-card {

		height: var(--logo-card-height-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-known-container,
	.content-cooperation-logo-container,
	.content-references-logo-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 06 – Logo-Slider
   ============================================ */



/* ==========================================
   Inhaltsblock 07 – Blog
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-blog {
	
	background-color: var(--base-2);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* Seite Presse/Blog */
.page-id-2192 .content-blog {
	
	background-color: var(--base);
}

/* -------------------------------------
 * Blog
 * ------------------------------------- */

/* Blogbereich */
.content-blog-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
.content-blog-query > div {
	
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	
	column-gap: var(--grid-gap-column);
	row-gap: var(--grid-gap-row);
	
	margin-top: clamp(2rem, 5vw, 3rem);
}


/* -------------------------------------
 * Blogkarte
 * ------------------------------------- */

.content-blog-card {

	display: flex;
	flex-direction: column;

	height: 100%;

	background: var(--base-3);

	overflow: visible;

}

/* Bild */
.content-blog-card-image {

	display: block;

	width: 100%;
	height: auto;

	aspect-ratio: 4 / 3;

	object-fit: contain;
}

/* Inhalt */
.content-blog-card-content {

	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding: 1.5rem;

	gap: 1rem;
}

/* Titel */
.content-blog-card-title {
	
	font-family: var(--font-heading);
	font-size: var(--font-size-h4); /* h3 zu groß */
	color: var(--accent-2);
	
	text-align: left;
	
	margin: 0;

	line-height: 1.3;
	min-height: calc(4 * 1.3em);
}

/* Datum */
.content-blog-card-date {

	font-size: var(--font-size-p-small);
	
	margin: 0 0 20px 0;
}

/* Text */
.content-blog-card-text {

	flex-grow: 1;
	
	/*max-height: calc(8 * 1.5 * var(--font-size-p-small) + .14rem);*/
	max-height: calc(8 * 1.5 * var(--font-size-p-very-small) - 0.24rem);

    overflow: hidden;
}

.content-blog-card-text p {
	
	/*font-size: var(--font-size-p-small);*/
	font-size: var(--font-size-p-very-small);

    margin: 0 0 20px 0;
}

.content-blog-card-text p:last-child {

    margin-bottom: 0;
}

/* Link */

.content-blog-card-link,
.content-mehr-card-link {
	
	display: block;
	
	text-align: right;
	
	background: transparent;
	color: var(--contrast);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	
	line-height: 1.4;
	
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.content-blog-card-link:hover,
.content-mehr-card-link:hover,
.content-blog-card-link:focus,
.content-mehr-card-link:focus {
	
	background: transparent;
	color: var(--contrast-2);
}

/* -------------------------------------
 * Pagination (nur Blog-Seite)
 * ------------------------------------- */

/* Container */

.content-blog .content-blog-card-pagination {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: clamp(2rem, 5vw, 3rem);
}

/* Navigation */

.content-blog .content-blog-card-pagination-nav {

    display: flex;

    gap: .5rem;
}

/* Seitenzahlen */

.content-blog-card-pagination-nav .page-numbers {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;

	font-weight: 600;
	text-decoration: none;

	border-radius: 50%;

	color: var(--contrast);

	transition: .25s;
}

.content-blog-card-pagination-nav a.page-numbers:hover {

	background: var(--contrast);

	color: white;
}

/* Aktive Seite */

.content-blog-card-pagination-nav .current {

	background: var(--contrast);

	color: white;

	font-weight: 600;
}

/* Pfeile */

.content-blog-card-pagination-previous,
.content-blog-card-pagination-next {

	display: flex;
	position: absolute;

	align-items: center;

	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;

	color: var(--contrast);

	transition: .25s;
	
	top: 50%;

    transform: translateY(-50%);
}

.content-blog-card-pagination-previous {

    left: 0;
}

.content-blog-card-pagination-next {

    right: 0; 
}

.content-blog-card-pagination-previous:hover,
.content-blog-card-pagination-next:hover {

	color: var(--contrast-2);
}

/* SVG */

.content-blog .content-blog-container .content-blog-card-pagination svg {

	width: 2.5rem;

	height: 2.5rem;
}

/* --------------------------------------------------
 * Blog Footer (nur Startseite & Presse/Blog-Seite)
 * --------------------------------------------------- */

/* siehe auch Komponente Footer mit 1 Button */

/* Button auf Blog-Seite ausblenden */ /* -> kann ggf. später weg - stattdessen löschen */

.page-id-210 .content-blog-footer {
	
	display: none !important;
}


/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-blog-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.content-blog-query > div {
		
		grid-template-columns:repeat(2,1fr);
		
		row-gap: 4rem;
	}

	.content-blog-footer {
		
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-blog-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.content-blog-query > div {
		
		grid-template-columns: 1fr;
		
		row-gap: 5rem;
	}
}

@media (max-width: 340px) {
	
	.content-blog-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 07 – Blog
   ============================================ */



/* ================================================
      Inhaltsblock 08 – Veranstaltungen & Termine
   ================================================ */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-events {
	
	background-color: var(--base-3);
	padding-top: clamp(2rem, 6vw, 8rem);
	padding-bottom: clamp(1rem, 6vw, 4rem);
}

/* -------------------------------------
 * Carousel
 * ------------------------------------- */

.content-slider .events-slider { 
    --gb-carousel-slides-per-view: 3;
	/* Carousel → Space Between steuert den Abstand der Slides (statt --gb-carousel-slide-gap).*/
}

/* -------------------------------------
 * Carousel Eventbereich
 * ------------------------------------- */

/* Eventbereich */
.content-events-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
/* Eventkarten volle Breite des Slides */
.content-events-query .gb-carousel-item {

    display: flex;	
	height: auto; /* für identische Höhen der Eventkarten - Schritt 1 von 2 */
}

/* -------------------------------------
 * Eventkarte
 * ------------------------------------- */

.content-events-card {

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%; /* für identische Höhen der Eventkarten - Schritt 2 von 2 */

	background: var(--base);

	overflow: visible;
}

/* Bild */

.content-events-card-image {

	display:block;

	width:100%;
	
	height: var(--event-image-height-desktop); /* alle Bilder gleiche Höhe */
	
	object-fit: contain;
	object-position: top;
	
	background: var(--base);
	padding: var(--space-xs);
}

/* Inhalt */
.content-events-card-content {

	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding: var(--space-xs);

	gap: 1rem;
}

/* Typografie allgemein */
.content-events-card-title,
.content-events-card-organisation,
.content-events-card-role,
.content-events-card-date,
.content-events-card-location,
.content-events-card-text {
	
	font-family: var(--font-text);
	color: var(--contrast);
	
	text-align: left;
	
	margin: 0;
	
	line-height: 1.3;
}

/* Titel */
.content-events-card-title {

    font-size: var(--font-size-p);
	
	min-height: calc(3 * 1.3em);
    line-height: 1.3;

    margin: 0 0 var(--space-xxs) 0;
}

/* Organisation */
.content-events-card-organisation {
	
	font-size: var(--font-size-p-small);
	
	font-style: italic;
	font-weight: 600;
	
	min-height: calc(2 * 1.3em);

    margin: 0 0 var(--space-xxs) 0;
}

/* Rolle */
.content-events-card-role {

	font-size: var(--font-size-p-small);
    font-style: italic;

    margin: -.5rem 0 .75rem;
}

.content-events-card-role:before {
	
	/*content: "Meine Rolle: ";*/
	font-weight: 600;
}

/* Datum und Ort */
.content-events-card-date,
.content-events-card-datepicker,
.content-events-card-location {

    font-size: var(--font-size-p-small);

    margin: 0;
}

/* Datum */
.content-events-card-datepicker:before {
	
	content: "Datum? ";
	font-weight: 600;
}

/* Uhrzeit */
.content-events-card-date:before {
	
	content: "Wann? ";
	font-weight: 600;
}

/* Ort */
.content-events-card-location:before {
	
	content: "Wo? ";
	font-weight: 600;
}

/* Beschreibung */
.content-events-card-text {
	
    margin-top: var(--space-xs);

    flex-grow: 1;
}

.content-events-card-text p {
	
	font-size: var(--font-size-p-small);

	margin: 0;
}

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

/* siehe auch Komponenten Slider-Navigation */

/* Ausrichtung Pagnitation - Bullets */

.events-slider .slider-pagination-container {
	bottom: -50px;  
}

/* -------------------------------------
 * Footer / Button
 * ------------------------------------- */

/* siehe auch Komponente - Footer mit 1 Button */

/* Button */ /* wegen vertikaler Bulletverschiebung (Seite Termine) */

.content-events-container .content-footer {
	
    margin-top: clamp(2rem, 6vw, 4rem);
}

/* Button */

.home .content-events-container .section-button {

  	margin-top: 0;
	margin-bottom: clamp(1rem, 6vw, 3rem);
}

/* -------------------------------------
 * Dekoelement
 * ------------------------------------- */

.content-events-decoration-right {

	width: 100%;
	height: auto;
	max-width: 525px;
	
	right: 0;
	bottom: -105px;
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-events-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.content-slider .events-slider {
		
        --gb-carousel-slides-per-view: 2;
    }
	
	/* Bild */

	.content-events-card-image {

		height: var(--event-image-height-tablet); /* alle Bilder gleiche Höhe */
	}
	
	/* Dekoelement */
	
	.content-events-decoration-right {

		max-width: 425px;

		bottom: -60px;
	}
	
	/* Button */ /* wegen vertikaler Bulletverschiebung (Seite Termine) */

	.content-events-container .content-footer {

		margin-top: clamp(4rem, 6vw, 6rem);
	}

}

@media (max-width: 885px) {
	
	/* Bild */

	.content-events-card-image {

		height: var(--event-image-height-tablet-small); /* alle Bilder gleiche Höhe */
	}	
}

@media (max-width: 750px) {
	
	/* Dekoelement */
	
	.content-events-decoration-right {

		max-width: 375px;	
	}
	
	.content-slider .events-slider {
		
		--gb-carousel-slides-per-view: 1;
	}
}


/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-events-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.content-slider .events-slider {
		
        --gb-carousel-slides-per-view: 1;
    }
	
	/* Bild */

	.content-events-card-image {

		height: var(--event-image-height-mobile); /* alle Bilder gleiche Höhe */
	}
	
	/* Dekoelement */
	
	.content-events-decoration-right {

		max-width: 325px;

		bottom: -50px;
	}
	
	/* Kartenbreite wegen der Pfeile */
	
	.content-events-query .gb-carousel-item {

		justify-content: center;
	}
	
	.content-events-card {
		
		width: 85%;
	}
}

@media (max-width: 340px) {
	
	.content-events-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}

	/* Dekoelement */
	
	.content-events-decoration-right {

		max-width: 275px;

		bottom: -30px;
	}	
}

/* =================================================
   Ende Inhaltsblock 08 – Veranstaltungen & Termine
   ================================================= */


/* ==========================================
   Inhaltsblock 09 – Programme
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-programs {
	
	background-color: var(--base-2);
	padding-block: clamp(2rem, 6vw, 4rem);
}


/* -------------------------------------
 * Programme Hochformat
 * ------------------------------------- */

/* Programmbereich */
.content-programs-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
.content-programs-query > div {
	
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	
	column-gap: var(--grid-gap-column);
	row-gap: var(--grid-gap-row);
	
	margin-top: clamp(2rem, 5vw, 3rem);
}


/* -------------------------------------
 * Programmkarte Hochformat
 * ------------------------------------- */

.content-program-card {

	display: flex;
	flex-direction: column;

	height: 100%;

	background: var(--base-3);

	overflow: visible;

}

/* Bild */

.content-program-card-image {

	display:block;

	width:100%;
	height:auto;

	aspect-ratio: 4 / 3;

	object-fit: contain;
}

/* Inhalt */
.content-program-card-content {

	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding: var(--space-s);

	gap: var(--space-s);
}

/* Titel */
.content-program-card-title {
	
	font-family: var(--font-text);
	font-size: var(--font-size-h4); /* h3 zu groß */
	color: var(--contrast);
	
	text-align: center;
	
	margin: 0;
	
	line-height: 1.3;
	min-height: calc(3 * 1.3em);
}

/* Text */
/*.content-program-card-text {

	flex-grow: 1;
	
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 11;
	-webkit-box-orient: vertical;
}

p.content-program-card-text, 
.content-program-card-text p {

	font-family: var(--font-text);
	font-size: var(--font-size-p-small);

	font-weight: var(--font-weight-p);
	text-transform: none;

	line-height: var(--line-height-body);

	margin: 0;
}*/	

/* Text */
.content-program-card-text {

	flex-grow: 1;
	
	/*max-height: calc(10 * 1.5 * var(--font-size-p-small) + .14rem);*/
	max-height: calc(10 * 1.5 * var(--font-size-p-very-small) - 0.24rem);

    overflow: hidden;
}

.content-program-card-text p {
	
	/*font-size: var(--font-size-p-small);*/
	font-size: var(--font-size-p-very-small);

    margin: 0 0 20px 0;
}

.content-program-card-text p:last-child {

    margin-bottom: 0;
}

/* Dekoelement */
.content-program-card-decoration {

	display: block;

	width: 100px;
	height: auto;

	margin: auto auto -40px; /* alternativ */
	
	/*transform: translateY(35%);*/ /* -> alternativ, aber hier liegen die Dekoelemente nicht mehr mittig in der Horizontebene.*/

}

/* -------------------------------------
 * Footer
 * ------------------------------------- */

/* Button */
.content-programs-button {

	margin-top: auto;
}

/* -------------------------------------
 * Tablet Hochformat
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-programs-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.content-programs-query > div {
		
		grid-template-columns: repeat(2,1fr);
		
		row-gap: 4rem;
	}

	.content-programs-footer {
		
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------
 * Smartphone Hochformat
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-programs-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.content-programs-query > div {
		
		grid-template-columns: 1fr;
		
		row-gap: 5rem;
	}
}

@media (max-width: 340px) {

	.content-programs-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 09 – Programme
   ============================================ */


/* ==========================================
   Inhaltsblock 10 – Kommunen und Gemeinden
   Inhaltsblock 10.2 - Kompetenz
   Inhaltsblock 10.3 – Engagement & Ehrenamt
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-municipalities, 
.content-competence, 
.content-engagement {
	
	background-color: var(--base-3);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------
 * Typographie
 * ------------------------------------- */

/* weniger Abstand zwischen den Aufzählungspunkten in diesen Inhaltsblöcken */
.content-competence p.icon-list-text,
.content-engagement p.icon-list-text {
	
	margin-bottom: 0em;
}

/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-municipalities, 
.content-competence, 
.content-engagement {
	
	padding-inline: var(--layout-padding-desktop);
}

.content-municipalities .content-grid-aside {
	
	padding-top: 0;
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

	.content-municipalities, 
	.content-competence, 
	.content-engagement {
	
		padding-inline: var(--layout-padding-tablet);
	}	
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-municipalities, 
	.content-competence, 
	.content-engagement {
	
		padding-inline: var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-municipalities, 
	.content-competences, 
	.content-engagement {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 10 – Kommunen und Gemeinden
   Ende Inhaltsblock 10.2 - Kompetenz
   Ende Inhaltsblock 10.3 – Engagement & Ehrenamt
   ============================================ */


/* ==========================================
   Inhaltsblock 11 – Arbeitsweise
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-approach {
	
	background-color: var(--base-3);
	padding-block: clamp(2rem, 6vw, 4rem);
}


/* Icon */

.content-approach .icon-list-icon {

	margin-top: -20px;

	/* Kein optischer Ausgleich */
	transform: translateY(0);
}


/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-approach {
	
	padding-inline: var(--layout-padding-desktop);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

	.content-approach {
	
		padding-inline: var(--layout-padding-tablet);
	}	
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-approach {
	
		padding-inline: var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-approach {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 11 – Arbeitsweise
   ============================================ */



/* ==========================================
   Inhaltsblock 12 – Zielgruppen
   ========================================== */


.content-target-groups {

    background-color: var(--base-2);
    padding-block: clamp(2rem, 6vw, 4rem);
}

.target-groups {

    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

/* Icon */

.target-groups .icon-list-icon {

	margin-top: -20px;

	/* Kein optischer Ausgleich */
	transform: translateY(0);
}

/* Inhalt */

.target-groups .icon-list-content {

    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Überschrift */

.target-group-title {

    margin: 0 0 1rem 0;
}

/* Liste */

.target-group-list {

    margin: 0;
    padding-left: 1.25rem;
}

.target-group-list li + li {

    margin-top: .4rem;
}

/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-target-groups {
	
	padding-inline: var(--layout-padding-desktop);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

	.content-target-groups {
	
		padding-inline: var(--layout-padding-tablet);
	}	
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-target-groups {
	
		padding-inline: var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-target-groups {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 12 – Zielgruppen
   ============================================ */



/* =================================================================
   Inhaltsblock 13 – Referenzen & Praxisprojekte
   ================================================================= */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-references {
	background-color: var(--base);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------
 * Referenzen & Praxisprojekte
 * ------------------------------------- */

/* Pressebereich */
.content-references-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
.content-references-query > div {
	
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	
	column-gap: var(--grid-gap-column);
	row-gap: var(--grid-gap-row);
	
	margin-top: clamp(2rem, 5vw, 3rem);
}


/* -------------------------------------
 * Referezenkarte
 * ------------------------------------- */

.content-references-card {

	display: flex;
	flex-direction: column;

	height: 100%;

	background: var(--base-3);

	overflow: visible;

}

a.content-references-card {
	text-decoration: none;
}
a.content-references-card:hover, 
a.content-references-card:focus, 
a.content-references-card:active {
  color: var(--contrast);
}

/* Bild */

.content-references-card-image {

	display:block;

	width:100%;
	height:auto;

	aspect-ratio: 4 / 3;

	object-fit: contain;
}

/* Inhalt */
.content-references-card-content {

	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding: var(--space-s);

	gap: var(--space-s);
}

/* Titel */
.content-references-card-title {
	
	font-family: var(--font-text);
	font-size: var(--font-size-h4); /* h3 zu groß */
	color: var(--contrast);
	
	text-align: center;
	
	margin: 0;
	
	line-height: 1.3;
	min-height: calc(3 * 1.3em);
}

/* Text */
.content-references-card-text {

	flex-grow: 1;
}

.content-references-card-text p,
p.content-references-card-text {

	font-family: var(--font-text);
	font-size: var(--font-size-p-small);

	font-weight: var(--font-weight-p);
	text-transform: none;

	line-height: var(--line-height-body);

	margin: 0;
}

/* Dekoelement */
.content-references-card-decoration{

	display: block;

	width: 100px;
	height: auto;

	margin: auto auto -40px; /* alternativ */
	
	/*transform: translateY(35%);*/ /* -> alternativ, aber hier liegen die Dekoelemente nicht mehr mittig in der Horizontebene.*/

}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-references-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
	.content-references-query > div {
		
		grid-template-columns:repeat(2,1fr);
		
		row-gap: 4rem;
	}

	.content-references-footer {
		
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-references-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
	
	.content-references-query > div {
		
		grid-template-columns: 1fr;
		
		row-gap: 5rem;
	}
}

@media (max-width: 340px) {

	.content-references-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}
}

/* =================================================================
   Ende Inhaltsblock 13 – Referenzen & Praxisprojekte
   ================================================================= */


/* ================================================
      Inhaltsblock 14 – Kundenstimmen & Bewertungen
   ================================================ */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-testimonials {
	
	background-color: var(--base-3);
	padding-block: clamp(2rem, 6vw, 4rem);
	
	margin-bottom: var(--space-m);
}

/* -------------------------------------
 * Carousel
 * ------------------------------------- */

.content-slider .testimonials-slider { 
	
    --gb-carousel-slides-per-view: 1;
}

/* -------------------------------------
 * Carousel Bewertungsbereich
 * ------------------------------------- */

/* Bewertungsbereich */
.content-testimonials-container {
	
	/*margin-top: clamp(2rem, 5vw, 3rem);*/
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
/* Bewertungskarten volle Breite des Slides */
.content-testimonials-query .gb-carousel-item {

    display: flex;	
}

/* -------------------------------------
 * Bewertungskarte
 * ------------------------------------- */

.content-testimonial-card {

	display: flex;
	flex-direction: column;

	width: 100%;

	background: var(--base-3);

	overflow: visible;
}

/* Inhalt */
.content-testimonial-card-content {

	display: flex;
	flex-direction: column;
	
	min-height: 450px;   /* Beispiel */ /* für Ausrichtung Text vertikal zentriert, Name unten */

	/* flex-grow: 1; */  /* sonst wird Name nach unten gedrückt */

	padding: var(--space-xs);

	gap: 1rem;
}

/* Typografie allgemein */
.content-testimonial-card-text,
.content-testimonial-card-name {
	
	font-family: var(--font-text);
	color: var(--contrast);
	
	text-align: center;
	
	margin: 0;
	
	line-height: 1.3;
}

/* Beschreibung */

/* Text */
.content-testimonial-card-text-wrapper { /* Text in Container für Ausrichtung Text vertikal zentriert, Name unten */

    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;
}

.content-testimonial-card-text {
	
    margin-top: var(--space-xs);

    flex-grow: 1;
}

p.content-testimonial-card-text {
	
	font-family: var(--font-zitat);
	font-size: var(--font-size-zitat-medium);

	margin: 0;
}

/* Name */

p.content-testimonial-card-name {
	
	font-family: var(--font-p);
	font-size: var(--font-size-p);
	
	font-weight: 600;
	
	color: var(--contrast-2);
	
	padding-top: var(--space-m);
	
	margin: auto 0 0 0;  /* maring-top: auto; für Ausrichtung Text vertikal zentriert, Name unten */
}


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

/* siehe auch Komponenten Slider-Navigation */

/* Ausrichtung Text */

.content-testimonials-query > div {
	align-items: end;
	display: flex;
}

/* Pfeile */
.content-testimonials-container .slider-arrow-container-left,
.content-testimonials-container .slider-arrow-container-right {
	top: 65%;
}

/* Ausrichtung Pagnitation - Bullets */

.content-testimonials-container .slider-pagination-container {
	bottom: -50px;  
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	z-index: 10;
}


/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-testimonials-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
	
}


/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-testimonials-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-testimonials-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}	
}

/* ===================================================
   Ende Inhaltsblock 14 – Kundenstimmen & Bewertungen
   =================================================== */


/* =====================================================
      Inhaltsblock 15 – Partnerprogramme & Referenzen
   ===================================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-partner {
	
	background-color: var(--base);
	padding-block: clamp(2rem, 6vw, 4rem);
}

.content-partner-logo-wrapper {
	
	position: relative;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	margin-bottom: var(--space-m);
}

/* -------------------------------------
 * Footer
 * ------------------------------------- */

/* siehe auch Komponente - Footer mit 1 Button */

.content-partner-button {
	
	margin-top: 0;
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {
	
	.content-partner-container {
		
		padding: 0 var(--layout-padding-tablet);
	}
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-partner-container {
		
		padding: 0 var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-partner-container {
		
		padding: 0 var(--layout-padding-mobile-mini);
	}	
}

/* =======================================================
   Ende Inhaltsblock 15 – Partnerprogramme & Referenzen
   ======================================================= */


/* ==========================================
   Inhaltsblock 16 – Unternehmen-Referenzen
   ========================================== */


.content-company-references {

    background-color: var(--base-3);
    padding-block: clamp(2rem, 6vw, 4rem);
}

.target-groups {

    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

/* Icon */

.company-references .icon-list-icon {

	margin-top: -20px;

	/* Kein optischer Ausgleich */
	transform: translateY(0);
}

/* Inhalt */

.company-references .icon-list-content {

    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Überschrift */

.company-reference-title {

    margin: 0 0 1rem 0;
}

/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-company-references {
	
	padding-inline: var(--layout-padding-desktop);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

	.content-company-references {
	
		padding-inline: var(--layout-padding-tablet);
	}	
}

/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-company-references {
	
		padding-inline: var(--layout-padding-mobile);
	}
}

@media (max-width: 340px) {
	
	.content-company-references {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
}

/* ================================================
   Ende Inhaltsblock 16 – Unternehmen-Referenzen
   ================================================ */

/* ======================================================
   Inhaltsblock 17 – Rechtstexte
   ====================================================== */

.content-legal {
	
    padding:
        var(--space-xl)
        0;
	
	background-color: var(--base-3);
    /*padding-block: clamp(2rem, 6vw, 4rem);*/
}

.content-legal-intro {
	
    margin-bottom:var(--space-l);
}

.content-legal-content {
	
    max-width: 980px;
}

/*nur für Impressum, Datenschutz und Qualitätsversprechend */
.page-id-259 .content-intro-text,
.page-id-53 .content-intro-text,
.page-id-444 .content-intro-text {
	
	text-align: left;
}

.content-legal-content p {
	
    margin-bottom: 1.25rem;
}

.content-legal-content h2 {
	
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.content-legal-content h3 {
	
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.content-legal-content ul,
.content-legal-content ol {
	
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.content-legal-content table {
	
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.content-legal-content td,
.content-legal-content th {
	
    padding: .75rem;
    border-bottom: 1px solid var(--base);
}

.content-legal-content a {
	
    word-break:break-word;
}

/* ======================================================
   Inhaltsblock 17 – Rechtstexte
   ====================================================== */


/* ==========================================
   Inhaltsblock 18 – Kolumnen
   ========================================== */

/* -------------------------------------
 * Gemeinsame Regeln
 * ------------------------------------- */

/* Inhaltsblock */ /* Intro-Komponente */ /* nutzt die gemeinsamen Klassen aus Inhaltsblock 01 */

.content-column {
	
	background-color: var(--base-2);
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------
 * Grid auf Seite Kolumnen
 * ------------------------------------- */

/* Seite meine moinatlichen Kolumnen */
.post-2071 .content-column .content-grid {
	
  display: grid;
	
  grid-template-columns: 1fr;
	
  gap: var(--space-xs);
  align-items: center;
}

/* -------------------------------------
 * Kolumnen
 * ------------------------------------- */

/* Kolumnenbereich */
.content-column-container {
	
	margin-top: clamp(2rem, 5vw, 3rem);
	
	padding: 0 var(--layout-padding-desktop);
}

/* Query */
.content-column-query > div {

    display: grid;
	
	grid-template-columns: repeat(3, minmax(0, 1fr));
	
	row-gap: 5rem; /* wegen dem Dekoelement */
	column-gap: clamp(0.75rem, 6vw, 2rem);

    margin-top: clamp(2rem, 5vw, 3rem);
}


/* -------------------------------------
 * Kolumneneintrag (inzwischen Karte Hochformat)
 * ------------------------------------- */

.content-column-item { 

	background: var(--base-3);

	padding: clamp(.75rem,4vw,1.5rem);

	display: flex;
	flex-direction: column;
	
	height: 100%;

	overflow: visible;
}

/* Inhalt */
.content-column-item-content {

	display: flex;	
	flex-direction: column;

	justify-content: center; 

    gap: 1.5rem;
	
	position: relative;   /* für das Dekoelement */
	
	padding-top: 3rem;
	
	flex-grow: 1;
}

/* Dekoelement */ 
.content-column-item-decoration {
   
	position: absolute;

    top: -90px;

	left: 50%; /* mittig über Textblock */
    transform: translateX(-50%);

    width: 90px;
    height: auto;
}

/* Titel */ 
.content-column-item-title {
	
	font-family: var(--font-text);
	
	font-size: var(--font-size-h4); /* h3 zu groß */
	
	color: var(--contrast);
	
	text-align: center;

	line-height: 1.2;
}

/* Link Überschrift (Download, falls vorhanden) */

.content-column-item-link {
	
	font-size: var(--font-size-p-small);
	font-weight: var(--font-weight-bold);

	margin-bottom: var(--space-xs);
}


/* Text */
.content-column-item-text-content {

    display: flex;
    flex-direction: column;

    flex-grow: 1;
}

.content-column-item-text {

	flex-grow: 1;
	
	/*max-height: calc(10 * 1.5 * var(--font-size-p-small) + .14rem);*/
	max-height: calc(10 * 1.5 * var(--font-size-p-very-small) - 0.24rem);

    overflow: hidden;
}

.content-column-item-text p {
	
	/*font-size: var(--font-size-p-small);*/
	font-size: var(--font-size-p-very-small);

    margin: 0 0 20px 0;
}

.content-column-item-text p:last-child {

    margin-bottom: 20px;
}


/* Link mehr lesen */

.content-mehr-card-link {

    margin-top: auto;

    align-self: flex-end;
}

/* Wortumbruch */
.content-column-item-title,
.content-column-item-text {

    overflow-wrap: break-word;
}

/* -------------------------------------
 * Tab-Container-Navigation
 * ------------------------------------- */

.content-column-tab-container .gb-tabs__menu {
	
	margin-bottom: 5px;
}

.content-column-tab-container .gb-tabs__menu .gb-tabs__menu-item {
	
	margin: 5px;
}

.content-column-tab-container .gb-tabs__menu .gb-tabs__menu-item > span {
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	
	font-family: var(--font-text);
	font-size: var(--font-size-navi);
	font-weight: var(--font-weight-navi);
	color: var(--contrast-2);
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	font-kerning: none;
	letter-spacing: 0.03em;
	padding-inline: 10px;
	margin-bottom: 0;
	transition: color .3s ease;
}

.content-column-tab-container .gb-tabs__menu .gb-tabs__menu-item > span:hover,
.content-column-tab-container .gb-tabs__menu .gb-block-is-current > span,
.content-column-tab-container .gb-tabs__menu-item:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus),
.content-column-tab-container .gb-tabs__menu-item:is(:hover, :focus) {
	
	color: var(--accent);
	
	background-color: var(--base-3);
}

/* ------------------------------------------
   Tab: Linie bei hover/aktive
   ------------------------------------------ */

/* Linie ::after */

.content-column-tab-container .gb-tabs__menu .gb-tabs__menu-item > span::after {
	
	content: "";
	display: block;

	width: 50px;
	height: 3px;
	margin: 3px auto 0;

	background: transparent;
	transition: background-color .3s ease;
}


/* Sichtbare Linie bei Hover und aktivem Menüpunkt */

.content-column-tab-container .gb-tabs__menu-item:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) > span::after {
	
	background: var(--accent);
}

.content-column-tab-container .gb-tabs__menu .gb-tabs__menu-item:hover > span::after {
	
	background: var(--accent);
}

/* -------------------------------------
 * Button
 * ------------------------------------- */

.content-column-button-wrapper {

	display: flex;
	
	align-items: center;
	justify-content: center;
}



/* -------------------------------------
 * Desktop
 * ------------------------------------- */

.content-column {
	
	padding-inline: var(--layout-padding-desktop);
}

/* -------------------------------------
 * Tablet
 * ------------------------------------- */

@media (max-width: 1024px) {

	.content-column {
	
		padding-inline: var(--layout-padding-tablet);
	}
	
	.content-column-tab-container .content-column-item-decoration {
		
		/* display: none; */
	}
	
	/* Query */
	.content-column-query > div {

		grid-template-columns: repeat(2,1fr);
	}

}

@media (max-width: 800px) {
	
	/* Query */
	.content-column-query > div {

		grid-template-columns: 1fr;
	}

}


/* -------------------------------------
 * Smartphone
 * ------------------------------------- */

@media (max-width: 585px) {
	
	.content-column {
	
		padding-inline: var(--layout-padding-mobile);
	}
	
	.content-column-tab-container .content-column-item-decoration {
		
		/* display: none; */
	}
}

@media (max-width: 340px) {
	
	.content-column {
	
		padding-inline: var(--layout-padding-mobile-mini);
	}
}

/* ============================================
   Ende Inhaltsblock 18 – Kolumnen
   ============================================ */

/* ============================================
   Einzelseiten Blog etc.
   ============================================ */

/* -------------------------------------
 * Blog Einzelseite Single Page
 * ------------------------------------- */

.content-single-page-content {
	
	display: flex;
	
	justify-content: center;	
}

.content-single-page-content-image {

	display: flex;
	justify-content: center;
}

.content-single-page-content-image img {

	max-width: 800px;
}

.content-single-page-content-text {

	display: flex;
	flex-direction: column;

	max-width: 980px;
	justify-content: center;
}

section.column-article .content-single-page-content-text {
	max-width: 800px;
}

.content-single-page-content-text h1,
.content-single-page-content-text h2,
.content-single-page-content-text p.content-blog-card-date,
section.column-article .content-single-page-content-text > p {

	display: flex;
	justify-content: center;
	
	text-align: center;
	
	margin-bottom: 40px;
}

.content-single-page-content-text h2 {

	margin-bottom: 20px;
}

section.column-article .content-single-page-content-text > p {
	
	font-weight: 500;
	font-style: italic;
	
	margin-bottom: 20px;
}

/* -------------------------------------
 * Previous-/Next-Navigation
 * Einzelner Blogbeitrag / Kolumne
 * ------------------------------------- */

/* Navigation */

.content-single-page-navigation {

	display: flex;

	justify-content: space-between;

	align-items: center;

	width: 100%;

	margin-top: clamp(2rem, 5vw, 3rem);
}

/* Linker / rechter Bereich */

.content-single-page-navigation-item-left,
.content-single-page-navigation-item-right {

	display: flex;

	align-items: center;

}

/* Pfeil-Links */

.content-single-page-navigation-previous,
.content-single-page-navigation-next {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;

	color: var(--contrast);

	transition: .25s;

}

/* Hover */

.content-single-page-navigation-previous:hover,
.content-single-page-navigation-next:hover {

	color: var(--contrast-2);

}

/* SVG */

.content-single-page-navigation svg {

	width: 2.5rem;

	height: 2.5rem;

}

/* ============================================
   Ende Einzelseiten Blog, Kolumnen etc.
   ============================================ */




/* ==========================================
   Ende Inhaltsböcke
   ========================================== */




/* ==========================================
   Site-Footer
   ========================================== */


/* ------------------------------------------
   Gemeinsame Regeln - Site-Footer
   ------------------------------------------ */

/* Site-Footer
   ------------------------------------------ */

/* Footer - Gesamtbreite - Zentrierung - Außenabstand oben/unten */

.footer {
	max-width: var(--layout-width);
	margin-inline: auto;
}

/* Textfarbe der Telefonnummer auf die des übergeordneten Elements, wie dem <p>-Tag, übernehmen (iPhone / iPad) */

a[href^="tel"] { 
	color: inherit; 
	text-decoration-line: none;
}

/* Button für mobile Navigation im Footer auch auf altem iPad ausblenden */

.footer-navigation .gb-menu-toggle {
	display: none;
}

/* Site-Footer oben
   ------------------------------------------ */

/* Footer oben - Hintergrundfarbe */

.footer-oben {
	background-color: var(--contrast);
	color: var(--base-3);
}

/* Footer oben Grid - Grid allgemein - Abstand der Spalten - Vertikale Ausrichtung */

.footer-oben-grid {
	display: grid;
	column-gap: 1rem;
	align-items: start;
}


/* Logo - Breite */

.footer-logo {
	width: 260px;
}

/* Logo Bild - Größe */



/* Logo Text - Abstand zum Logo - Einrückung */

.footer-logo-text {
	padding-top: 8px;
	padding-left: 8px;
}

/* Schriftgestaltung - Anschrift -  Kontakt */

.footer-logo-text,
.footer-anschrift p,
.footer-kontakt p {
	font-size: var(--font-size-site-footer-p);
}

.footer-anschrift > .footer-title,
.footer-kontakt > .footer-title {
	font-family: 'Noto Serif Display', sans-serif;
	font-weight: 600;
	color: var(--accent);
	text-transform: none;	
	
	font-size: var(--font-size-site-footer-heading);
	line-height: 1.2;
	
    margin-bottom: clamp(0.4em,4vw,0.5em);
	margin-top: clamp(0.4em,4vw,0.5em);
}

/* Site-Footer unten
   ------------------------------------------ */

/* Footer unten - Hintergrundfarbe */

.footer-unten {
	background-color: var(--base-3);
	color: var(--contrast-2);;
}

/* Footer unten Grid - Grid allgemein - Vertikale Ausrichtung */

.footer-unten-grid {
	display: grid;
	column-gap: 1rem;
	align-items: start;
}

/* Typografie - Footer allgemein - Footer Titel - Copyright */

/* Schriftgestaltung - Copyright - Navigation */

.footer-unten p.footer-copyright,
.footer-unten .footer-navigation ul li a {

	font-family: var(--font-text);
	font-size: var(--font-size-navi);
	font-weight: var(--font-weight-navi);
	line-height: 1.5;

	color: var(--contrast-2);
	text-transform: uppercase;
	text-decoration: none;
	font-kerning: none;
	letter-spacing: 0.03em;
}

/* Site-Footer Navigation 
 * ------------------------------------------ */

/* Navigation - Menü - Menüpunkt */

.footer-unten .footer-navigation > ul {
	
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.footer-unten .footer-navigation ul li {
	
	position: relative;
	display: inline-block;
}

/* Links - Standard - Hover - Focus */

.footer-unten .footer-navigation ul li a {
	
	transition: color .3s ease;
	padding: 0 30px 0 0;    /* -> besser wäre autmatische Verteilung auf der zur Verfügung stehenden Breite statt padding-right: 33px; Suche noch Lösung dafür... */
}

.footer-unten .footer-navigation ul li:last-child > a {
	padding: 0;
}

.footer-unten .footer-navigation a {
	display: inline-block;	/* wichtig, damit Linie unter Link */
}

/* Hover: nur Farbe + Linie - Footer Navigation */

.footer-unten .footer-navigation ul li > a:hover {
	color: var(--accent);
	
	font-weight: var(--font-weight-navi-hover);
}

/* Aktiver Menüpunkt: Farbe + Linie + SemiBold - Footer Navigation */

.footer-unten .footer-navigation ul li[class*="current-menu-"] > a {
	font-weight: var(--font-weight-navi-hover);
	color: var(--accent);
}

/* Linie - Footer Navigation */

.footer-unten .footer-navigation ul li > a::after {
	content: "";
	display: block;

	width: 50px;
	height: 3px;
	margin: 3px auto 0;

	background: transparent;
	transition: background-color .3s ease;
}

/* Sichtbare Linie bei Hover und aktivem Menüpunkt - Footer Navigation */

.footer-unten .footer-navigation ul li > a:hover::after,
.footer-unten .footer-navigation ul li[class*="current-menu-"] > a::after {
	background: var(--accent);
}

/* Breite für den aktiven fetteren Text - Footer Navigation */

.footer-unten .footer-navigation > ul > li > a::before {
	
	content: attr(data-text);

	font: inherit;
	font-weight: var(--font-weight-navi-hover);
	text-transform: inherit;
	font-kerning: inherit;
	letter-spacing: inherit;

	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	white-space: nowrap;
	pointer-events: none;
}


/* ------------------------------------------
   Desktop Site-Footer
   ------------------------------------------ */

/* Footer oben - Innenabstände */

.footer-oben {
	padding: 
		var(--space-s)
		var(--layout-padding-desktop);
}

/* Footer unten - Innenabstände */

.footer-unten {
	padding: 
		var(--space-xs)
		var(--layout-padding-desktop);
}


/* Footer oben Grid - 510px 1fr 1fr
*
*  Grid-Lösung für:

        510px
──────────┬──────────────────────────────
 Logo     │ Anschrift
          │
          │ Kontakt

und 

        510px
──────────┬──────────────────────────────
Copyright │ Navigation

*/

/* Gestaltungsachse Desktop */

.footer-oben-grid {
	
	grid-template-columns: 510px 1fr 1fr;
	/* Erste Spalte definiert die gemeinsame linke Achse
   für Anschrift, Kontakt und Footer-Navigation */
}

/* Footer unten Grid - Copyright links - Navigation rechts */

/* Gestaltungsachse Desktop */

.footer-unten-grid {
	
	grid-template-columns: 510px 1fr;
}

@media (max-width: 1340px) and (min-width: 1141px) {
	
	.footer-oben-grid {
		grid-template-columns: 400px 1fr 1fr;
	}
	
	.footer-unten-grid {
		grid-template-columns: 400px 1fr;
	}

}
@media (max-width: 1140px) and (min-width: 1025px) {
	
	.footer-oben-grid {
		grid-template-columns: 310px 1fr 1fr;
	}
	
	.footer-unten-grid {
		grid-template-columns: 310px 1fr;
	}
	
}


/* ------------------------------------------
   Tablet Site-Footer
   ------------------------------------------ */


@media (max-width: 1024px) and (min-width: 584px) {

/* Footer oben - Abstände */
	
	.footer-oben {
		padding: 
			var(--space-s)
			var(--layout-padding-tablet);
	}

/* Footer oben Grid - Logo oben - Anschrift | Kontakt */
	
	/* Grid-Lösung für:
	┌───────────────────────────────┐
	│ Logo                          │
	│ Text                          │
	├───────────────┬───────────────┤
	│ Anschrift     │ Kontakt       │
	└───────────────┴───────────────┘
	*/	
	
	.footer-oben-grid {
		
		grid-template-columns: 1fr 1fr;
	}
	
	.footer-logo {
		
		grid-column: 1 / -1;
	}

/* Footer unten - Abstände */

	.footer-unten {
		padding: 
			var(--space-xs)
			var(--layout-padding-tablet);
	}

/* Footer unten Grid - automatisch ab zirka 769px: - Copyright oben - Navigation darunter */
	
	.footer-unten-grid {
		grid-template-columns: 1fr 1fr;
	}

}

/* ------------------------------------------
   Mobile Site-Footer
   ------------------------------------------ */

@media (max-width: 585px) {

/* Footer oben - Abstände */

	.footer-oben {
		padding: 
			var(--space-s)
			var(--layout-padding-mobile);
	}

/* Footer oben Grid - einspaltig */

	.footer-oben-grid {
		grid-template-columns: 1fr;
	}

/* Logo */
	
	.footer-logo {
		width: clamp(180px,65vw,300px);
	}

/* Anschrift / Kontakt */

	.footer-anschrift > .footer-title,
	.footer-kontakt > .footer-title {
		
		margin-bottom: clamp(0.4em,4vw,0.5em);
	}

/* Footer unten - Abstände */

	.footer-unten {
		padding: 
			var(--space-xs)
			var(--layout-padding-mobile);
	}

/* Footer unten Grid - einspaltig */

	.footer-unten-grid {
		grid-template-columns: 1fr;
	}
	
}

/* Abstände superkleine Bildschirme */

@media (max-width:340px) {
	.footer-oben {
		padding: var(--layout-padding-mobile-mini);
	}
	.footer-unten {
		padding: 
			var(--space-xs)
			var(--layout-padding-mobile-mini);
	}
}


/* ==========================================
   Ende Site-Footer
   ========================================== */