@layer fonts {
	/* noto-sans-regular - latin */
	@font-face {
	  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	  font-family: 'Noto Sans';
	  font-style: normal;
	  font-weight: 400;
	  src: url('fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}

	/* noto-sans-italic - latin */
	@font-face {
	  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	  font-family: 'Noto Sans';
	  font-style: italic;
	  font-weight: 400;
	  src: url('fonts/noto-sans-v42-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}

	/* noto-sans-700 - latin */
	@font-face {
	  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	  font-family: 'Noto Sans';
	  font-style: normal;
	  font-weight: 700;
	  src: url('fonts/noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}

	/* noto-sans-700italic - latin */
	@font-face {
	  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	  font-family: 'Noto Sans';
	  font-style: italic;
	  font-weight: 700;
	  src: url('fonts/noto-sans-v42-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}

	/* noto-sans-900 - latin */
	@font-face {
	  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	  font-family: 'Noto Sans';
	  font-style: normal;
	  font-weight: 900;
	  src: url('fonts/noto-sans-v42-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}
}
@layer global {
	/* Colors */
	:root{
		--fs-12: calc(12 /  16 * 1rem);
		--fs-14: calc(14 /  16 * 1rem);
		--fs-16: calc(16 /  16 * 1rem);
		--fs-18: calc(18 /  16 * 1rem);
		--fs-20: calc(20 /  16 * 1rem);
		--fs-22: calc(22 /  16 * 1rem);
		--fs-24: calc(24 /  16 * 1rem);
		--fs-28: calc(28 /  16 * 1rem);
		--fs-34: calc(34 /  16 * 1rem);
		--fs-38: calc(38 /  16 * 1rem);
		--fs-44: calc(44 /  16 * 1rem);
		--fs-50: calc(50 /  16 * 1rem);
		--fs-56: calc(56 /  16 * 1rem);
		--fs-60: calc(60 /  16 * 1rem);
		--fs-64: calc(64 /  16 * 1rem);
		--fs-76: calc(76 /  16 * 1rem);
		
		--font-size-h1: var(--fs-50);
		--font-size-h2: var(--fs-38);
		--font-size-h3: var(--fs-28);
		--font-size-h4: var(--fs-18);
		
		
		--font-size-adaptive-h1: clamp(var(--fs-44), 7.5vw, var(--fs-76));
		
		--font-size-topnav-link: var(--fs-22);
		--font-size-imprint: var(--fs-14);

		@media (width >= calc(600 / 16 * 1rem)) {
			--font-size-h1: var(--fs-56);
			--font-size-h2: var(--fs-44); 
			--font-size-h3: var(--fs-34);
			--font-size-h4: var(--fs-24);
			--font-size-topnav-link: var(--fs-16);
		
		}
		
		--c-weiss: white;
		/* hsl(42, 31%, 94%); */
		--c-ekbo-rot: hsl(330, 100%, 35%);
		--c-ekbo-lila: hsl(271, 45%, 38%);
		--c-ekbo-lila60: #7E58A1;
		--c-ekbo-lila40: #BCAAD3;
		--c-ekbo-lila20: #DDD4EB;
		--c-ekbo-gelb: #e1ac00;
		--c-ekbo-grey: #6c7f86;
		--c-ekbo-grau-dunkel: hsl(186, 11%, 15%);
		--c-bv-leinen: hsl(43, 30%, 91%);
		--c-bv-salbei: hsl(64, 21%, 83%);
		--c-bv-pflaume: hsl(290, 19%, 15%);

		--color-main-bg: var(--c-bv-leinen);
		--color-main-text: var(--c-bv-pflaume);
		/* var(--c-ekbo-grau-dunkel); */
		--color-section-membership: var(--c-bv-leinen);
		--color-footer-text: var(--c-ekbo-rot);
		--color-footer-link: var(--c-ekbo-gelb);
		--color-footer-background: var(--c-bv-salbei);
		--color-topnav-link: var(--c-bv-leinen);
		--color-topnav-button-open: var(--c-ekbo-lila60);
		--color-topnav-button-close: var(--c-bv-leinen);
		@media (width >= calc(600 / 16 * 1rem)) {
			--color-topnav-link: var(--c-ekbo-lila);
		}
		--color-topnav-bg:  linear-gradient(to bottom, var(--c-bv-salbei) 0%, var(--c-bv-leinen) 20%);
		/* var(--c-bv-leinen); */
		--color-topnav-ham-bg: var(--c-ekbo-lila);
		--color-side-nav-dot: var(--c-ekbo-grey);
		--color-side-nav-dot-border: var(--c-bv-leinen);
		--color-side-nav-dot__active: var(--c-ekbo-rot);
		--color-hero-textbox: var(--c-bv-pflaume);
		--color-hero-pictureoverlay: hsla(42, 5%, 92%, .7);
		/* hsla(271, 45%, 38%, .9); */
		/* rgba(255, 255, 255, 0.8); */
		
		--topnav-height: calc(88 / 16 * 1rem); 
		@media (min-width: calc(600 / 16 * 1rem)) and (max-width: 767px) { --topnav-height: calc(145 / 16 * 1rem); }
		@media (min-width: calc(768 / 16 * 1rem)) { --topnav-height: calc(119 / 16 * 1rem); }	
	}
	html { scroll-behavior: smooth; }

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	body {
		font-family: "Noto Sans", Arial, Helvetica, sans-serif;
		font-size: var(--fs-14);
		@media (width >= calc(600 / 16 * 1rem)) { 
			font-size: var(--fs-16);
		}
		line-height: 1.5;
		color: var(--color-main-text);
		background-color: var(--color-main-bg);
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	/* Der Marker-Effekt für Text-Links (Klasse im HTML vergeben) */
    a.link__marker {
		--local-fg: var(--link-fg, currentColor);
        --local-bg: var(--link-bg, transparent);
        --bg-h: 100%; /* Standard: Vollfläche */

        display: inline-block;
        color: var(--local-fg);
        margin: 0 -.25rem;
        padding: 0 .25rem;
        padding-bottom: 2px;

        /* Der Hintergrund startet RECHTS unten mit einer Breite von 0% */
        background: linear-gradient(0deg, var(--local-fg), var(--local-fg)) no-repeat right bottom / 0% var(--bg-h);
        
        /* Wir animieren die Breite des Hintergrunds und die Textfarbe */
        transition: background-size .3s ease-in-out, color .3s ease-in-out;

        &:hover {
            /* Beim Hovern: Hintergrund dockt LINKS an und schießt auf 100% Breite vor */
            background-size: 100% var(--bg-h);
            background-position-x: left;
            color: var(--local-bg);
        }

        /* DIE AUSNAHMEN FÜR DIE TOPNAV */
        .topnav & {
            --bg-h: 3px; /* Hier wird der Balken automatisch zur 4px Unterstreichung! */
            margin: 0;
            padding-inline: 0;
			
            &:hover {
                color: var(--local-fg); /* Textfarbe bleibt in der Topnav stabil */
            }
        }
    }
	
	a.with-icon::before {
	  content: "\1F517"; /* Unicode-Code für das Link-Symbol */
	  margin-right: .1rem; /* Abstand zum Text */
	  font-style: normal; /* Falls der umgebende Text kursiv ist */
	  display: inline-block;
	}
	
    /* Der Zoom-Effekt für Bild-Links (Klasse im HTML vergeben) */
    a.link__zoom {
        display: inline-block;
        transition: transform .2s ease-in-out;

        &:hover {
            transform: scale(1.2);
        }
    }
	img,
	picture,
	svg {
		max-width: 100%;
		display: block;
		height: auto;
	}

    p {
		padding-block: 1rem;
	}
	
	h1, h2, h3, h4, h5 {
		font-weight: 700; 
		line-height: 1.15;
		margin-top: .5rem;
		margin-bottom: 1rem;
		text-align: center;
	}
	h1 {
		font-size: var(--font-size-h1);
		font-weight: 900;
		text-transform: uppercase;
		color: var(--c-ekbo-rot);
		margin-bottom: 1.5rem;
		@media (width >= calc(600 / 16 * 1rem)) { 
			margin-bottom: 2rem; 
		}
	}
	h2 { 
		color: var(--c-ekbo-lila);
		font-size: var(--font-size-h2);
		margin-bottom: 2rem;
		@media (width >= calc(600 / 16 * 1rem)) { 
			margin-bottom: 4rem; 
		}
	}
	h3 { 
		font-size: var(--font-size-h3); 
	}
	h4 { 
		font-size: var(--font-size-h4); 
	}
	summary { 
		font-size: 120%;
		font-weight: bold;
	}

	.text__right { text-align: right; }
	.text__center { text-align: center; }
	
	.small-caps { font-variant-caps: small-caps; }
	
	.salbei {
		box-shadow: .5rem .5rem 3rem var(--c-bv-salbei);
		background-color: var(--c-bv-salbei);
		/* background-color: var(--c-bv-salbei); */
	}

	.box__salbei {
		padding: 1rem 1.5rem;
		border-radius: 1.5rem;
		background-color: var(--c-bv-salbei);
		box-shadow: .5rem .5rem .7rem rgba(0,0,0,.2);
		h2, h3, h4 { 
			color: var(--c-ekbo-rot); 
		}
	}

	
	.wrapper {
		/* width: min(calc(100% - 48px), calc(1200 / 16 * 1rem)); */
		/* margin-inline: auto; */
		
		width: min(calc(100% - (var(--gap) * 2)), var(--max-width));
        margin-inline: auto; 
    
        /* Handy: 12px Rand (ergibt 24px Gesamt-Abzug) */
        --gap: 12px;         
        --max-width: 100%;   
        
        /* Tablet-Anpassung */
        @media (min-width: calc(600 / 16 * 1rem)) {
            --gap: 45px;            
            --max-width: calc(640 / 16 * 1rem); 
        }

        /* Desktop-Anpassung: Hier greift für den Content der Goldene Schnitt */
        @media (min-width: calc(1024 / 16 * 1rem)) {
            --gap: 18.5vw; 
            --max-width: calc(1200 / 16 * 1rem); 
        }
	}

	.min-wrap {
        --gap: 12px;         
        --max-width: 100%;   
	}

  
	.topnav .wrapper {
        /* Tablet-Korrektur: Hier hebeln wir die 640px-Bremse aus. Die Topnav darf zwischen 
           600px und 1024px dynamisch bis zum Rand (minus 45px) mitwachsen! */
        @media (min-width: calc(600 / 16 * 1rem)) {
            --max-width: 100%; 
        }
        /* Desktop-Fixierung: 
           Ab 1024px bleibt es bei den stabilen 45px Rand und maximal 1200px Breite. */
        @media (min-width: calc(1024 / 16 * 1rem)) {
            --gap: 45px; 
            --max-width: calc(1200 / 16 * 1rem); 
        }
    }

	.sec__first {
		margin-top: var(--topnav-height);
	}

	.sec__generic {
		padding-block: 3rem;
		--link-fg: var(--c-ekbo-lila);
        --link-bg: var(--c-bv-leinen);

	}

	.sec__fullscreen {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;    /* Inhalte untereinander anordnen */
		justify-content: center;   /* Vertikale Zentrierung */
		align-items: center;       /* Horizontale Zentrierung */
  
		/* Verhindert, dass Inhalte an den Bildschirmrand stoßen (wichtig für Mobilgeräte) */
		/* padding: 20px; */
		box-sizing: border-box;
	}
	
}

@layer component {
	.topnav {
		
		/* background: var(--color-topnav-bg); */

		/* background: linear-gradient(to bottom,  hsla(271,45%,85%,1) 0%, hsla(32,41%,94%,1) 20%, hsla(32,41%,94%,1) 80%, hsla(271,45%,85%,1) 100%); */
		/* background: hsla(271, 45%, 95%, .8); */
		/* linear-gradient(to bottom,  hsla(271,45%,75%,0.5) 0%,hsla(330,53%,90%,0.5) 50%,hsla(0,0%,100%,0.5) 100%); */ 
		/* box-shadow: inset 0 -15px 15px -15px rgba(0,0,0,.15); */

		--link-fg: var(--color-topnav-link);
        --link-bg: var(--c-bv-leinen);

			position: absolute;
		
		display: flex;
		justify-content: end;
		align-items: center;
		
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 3;
		
		padding-block: 0.5rem;
	
		
		
		&::before {
			content: '';
			position: fixed;
			inset: 0;
			background: hsla(0, 0%, 0%, 0.75);
			opacity: 0;
			pointer-events: none;
			transition: opacity .5s ease-in-out;
			z-index: 4;
		}
		
		&:has(.topnav__toggle[aria-expanded='true'])::before {
			opacity: 1;
		}
		/* &:has(.topnav__open[aria-expanded='true'])::before { */
			/* opacity: 1; */
		/* } */
	}
	.topnav button {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		@media (width >= calc(600 / 16 * 1rem)) {
			display: none;
		}
	}
	.topnav__toggle {
		position: relative;
		z-index: 10;
		/* 30px x 20px in rem umgerechnet */
		width: calc(30 / 16 * 1rem);  /* 1.875rem */
		height: calc(20 / 16 * 1rem); /* 1.25rem */
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		transition: .5s ease-in-out;

		@media (width >= calc(600 / 16 * 1rem)) {
			display: none;
		}
	}

	/* Die drei Linien */
	.topnav__toggle span {
		display: block;
		position: absolute;
		height: calc(3 / 16 * 1rem);
		width: 100%;
		background: var(--color-topnav-button-open);
		border-radius: calc(3 / 16 * 1rem);
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}

	/* Initiale Positionen der Linien */
	.topnav__toggle span:nth-child(1) { top: 0px; }
	.topnav__toggle span:nth-child(2) { top: calc(8.5 / 16 * 1rem); }
	.topnav__toggle span:nth-child(3) { top: calc(17 / 16 * 1rem); }


	/* --- ANIMATION IM GEÖFFNETEN ZUSTAND --- */

	.topnav__toggle[aria-expanded='true'] {
		span { background: var(--color-topnav-button-close); }
		span:nth-child(1) { top: calc(8.5 / 16 * 1rem); transform: rotate(135deg); }
		span:nth-child(2) { opacity: 0; left: calc(-30 / 16 * 1rem); }
		span:nth-child(3) { top: calc(8.5 / 16 * 1rem); transform: rotate(-135deg); }

		/* Selektor angepasst auf den Toggle-Button */
		+ .topnav__menu {
			translate: 0;
			visibility: visible;
			transition: translate 0.5s ease-in-out, visibility 0s linear 0s;
			@media (prefers-reduced-motion) { 
				opacity: 1; 
				transition: opacity 500ms ease-in-out, visibility 0s linear 0s;
			}
		}
	}

	/* .topnav__close { */
		/* display: block; */
		/* margin-inline-start: auto; */
		/* margin-block-end: 8rem; */
		/* img { */
			/* width: 2.5rem; */
		/* } */
	/* } */

	.topnav__menu {
		@media (width < calc(600 / 16 * 1rem)) {
			position: fixed;
			inset: 0 0 0 150px;
			/* padding: 1.5rem; */
			padding: 6rem 1.5rem 1.5rem 1.5rem; /* Oben mehr Padding, damit der Button nichts verdeckt */
			z-index: 5; /* Niedriger als der Button, höher als der Rest */
			background-color: var(--color-topnav-ham-bg);
			
			translate: 100vw 0;
			visibility: hidden; 
			transition: translate 0.5s ease-in-out, visibility 0s linear 0.5s;
			@media (prefers-reduced-motion) {
				translate: 0;
				opacity: 0;
				transition: opacity 500ms ease-in-out, visibility 0s linear 0.5s;
			}
		}
	}
	.topnav__wrapper {
		display:flex;
		flex-direction: row;	
		justify-content: space-between;
		align-items: center;
		padding-block: 10px;
		
		/* Abgrenzung wenn kein Fullsize-Hero */
		/* border: solid var(--c-ekbo-lila20); */
		/* border-width: 2px 0; */

		@media (width >= calc(600 / 16 * 1rem)) {
			padding-block: 16px;
			flex-direction: column;	
		}
		@media (width >= calc(768 / 16 * 1rem)) {
			padding-block: 16px;
			flex-direction: row;	
		}
	}
	.topnav__homelink {
		transition:all 150ms ease-in-out; 
		&:hover { transform: scale(1.05); }
		filter: drop-shadow(0 0 3px hsla(42, 5%, 92%, 0.9)) drop-shadow(0 0 8px hsla(42, 5%, 92%, 0.7)) drop-shadow(0 0 16px hsla(42, 5%, 92%, 0.4));
	}
	.topnav__logo {
		width: 220px;
		@media (width >= calc(600 / 16 * 1rem)){
			width: 300px;
		}
	}
	.topnav__links {
		display: flex;
		flex-direction: column;
		gap:30px;
		list-style-type: none;
		align-items: center;
		margin: 0;
		padding: 0;
		@media (width >= calc(600 / 16 * 1rem)){
			flex-direction: row;
		}
	}
	.topnav__item {
		/* list-style-type: none; */
		@media (width >= calc(600 / 16 * 1rem)) {
			text-shadow: 0 0 3px hsla(42, 5%, 92%, 0.9), 0 0 8px hsla(42, 5%, 92%, 0.7), 0 0 16px hsla(42, 5%, 92%, 0.4);
		}
	}
	.topnav__link {
		font-size:	var(--font-size-topnav-link);
		font-weight: 700;
		/* letter-spacing: 0.05em; */
		
		/*color: var(--color-topnav-link);
		
		&:hover {
			text-decoration: underline 2px;
			text-underline-offset: 4px;
		}*/
	}
	
	/* 3. SEITLICHE DOT-NAVIGATION (Die Punkte am rechten Rand) */
    .side-nav {
		position: fixed;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		gap: 15px;
		z-index: 1000;
		
		opacity: 0.75;
		visibility: visible;
		transition: opacity .3s ease-in-out .3s, visibility 0s linear .3s;
    }
    
    /* Standard-Aussehen: Helle Kreise mit dunklem Rand */
    .side-nav .dot {
		margin: 1px;
		width: 14px;
		height: 14px;
		background-color: var(--color-side-nav-dot);
		border: 2px solid var(--color-side-nav-dot-border);
		border-radius: 50%;
		text-decoration: none;
		transition: background-color 0.2s, border-color 0.2s;
    }
    .side-nav .dot:hover {
		margin: 0;
		width: 16px;
		height: 16px;
		background-color: var(--color-side-nav-dot__active);
		/* border-color: var(--color-side-nav-dot__active); */
    }
	/* Aktiver Zustand (Wird vom JS gesteuert) */
	.side-nav .dot.active {
		margin: 0;
		width: 16px;
		height: 16px;
		background-color: var(--color-side-nav-dot__active) !important; /* Wird strahlend blau */
		/* border-color: var(--color-side-nav-dot__active) !important; */
	}
	:root:has(.topnav__toggle[aria-expanded='true']) .side-nav {
        opacity: 0;
		visibility: hidden;
		/* visibility wartet, bis das Ausblenden (0.4s) vorbei ist */
		transition: opacity 0s ease-in-out 0s, visibility 0s linear 0s;
    }
	
	
	/* 1. Das Grid-System für die Stapelung */
	.hero {
		box-shadow: .75rem .4rem .55rem hsla(64, 15%, 60%, .65);
		display: grid;
		grid-template-areas: "hero-stack"; /* Erstellt eine einzige "Zelle" */
		width: 100%;

		/* height: calc(100vh - var(--topnav-height)); */
		/* height: calc(100dvh - var(--topnav-height));  */
		min-height: 100vh;
		min-height: 100dvh;

		/* calc(600 / 16 * 1rem); */
		overflow: hidden;
		
		/* box-shadow:  12px 0 12px 0 rgba(0,0,0,.10); */
		
		/* box-shadow:  12px 0 12px 0 hsla(271, 45%, 38%, .15); */

	}

	/* Beide Kinder belegen exakt dieselbe Grid-Fläche */
	.hero > picture,
	.hero-content {
	    grid-area: hero-stack;
		height: 100%; /* Füllt exakt die Höhe des Heros aus */
		min-height: 0; /* Verhindert, dass das Grid das Element künstlich aufbläht */
	}
 	.hero > picture { max-height: max(100dvh, 500px); }
 
	/* 2. Das Bild füllt die Zelle voll aus */
	.hero-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		
/* 		max-width: 100%;
		max-height: 100%;
		object-position: center; /* Zentriert den Bildausschnitt */ */
	}

	/* 3. Der Content-Bereich nutzt dein gewohntes Flexbox-Layout */
	.hero-content {
		grid-area: hero-stack;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 2;
		background: linear-gradient(to bottom, 
			hsla(43, 31%, 94%, .9) 0%,
			var(--color-hero-pictureoverlay) calc(var(--topnav-height) * 2), /* Geht auf Höhe des Headers in dein Overlay über */
			var(--color-hero-pictureoverlay) 100%
		);
		/* var(--color-hero-pictureoverlay); */
	}


	.hero-text-box {
		margin-top: var(--topnav-height);
		h1 { font-size: var(--font-size-adaptive-h1); }
		color: var(--color-hero-textbox);
		padding: 20px;
		max-width: calc(1200 / 16 * 1rem);
		/* background-color: red; */
	}

	.box__membership {
		position: sticky;
		top: 0;
		overflow: visible;
		z-index: 100;
	}
	.btn {
		display: block;
		margin: 2rem auto;
		border: none;
		width: calc(192/16 * 1rem);
		/* box-shadow: 3px 3px 8px rgba(0,0,0,.4); */
		/* box-shadow: 0px 0px 30px rgba(255,255,255,.5); */
		box-shadow: 5px 5px 12px rgba(0,0,0,.15);
		color: var(--c-bv-leinen);
		text-align:center;
		padding: calc(12/16 * 1rem);
		background: var(--c-ekbo-lila);
		/* linear-gradient(175deg, hsl(309,100%, 35%) 0%, hsl(262,42%,42%) 100%); */
		border-radius: calc(14 / 16 * 1rem); /* 1.25rem; */
		font-size:1rem;
		font-style:normal;
		/* font-weight: bold; */

		outline: 3px solid transparent;
		/* outline: 2px solid var(--c-bv-leinen); */
		outline-offset: 0px;
		transition:all 150ms ease-in-out; 


		&:hover {
			transform: scale(1.05);
			/* Die Linie wird sichtbar und "springt" mit Abstand nach außen */
			outline-color: var(--c-bv-leinen);

			/* outline-color: var(--c-ekbo-rot); */

			/* outline-offset: 2px; */
			/* Das erzeugt den transparenten Zwischenraum */

			/* box-shadow: 2px 2px 5px rgba(0,0,0,.4); */
			/* transform: translateY(3px); */
			/* background: linear-gradient(175deg, hsl(309,100%, 25%) 0%, hsl(262,42%,32%) 100%); */
		}
		&:active {
			outline-color: var(--c-bv-leinen);
			/* outline-offset: 2px; */  /* Das erzeugt den transparenten Zwischenraum */
			transform: translateY(3px);
		}

	}
	.btn__membership {
		position:absolute;
		right:2rem;
		bottom:-4rem;
		/* text-transform: uppercase; */
		/* font-weight: 900; */
		/* background: rgba(0,16,44,0.55); */
		z-index:999;
	}
	#intro {
		box-shadow: inset 0 -1rem 1rem -1rem hsl(64, 21%, 80%);
	}
	
	#committee {
		path {
			fill: #ff0000;
		}
		/* border-top: var(--c-bv-salbei) solid calc(3 / 16 * 1rem); */
		background: url(img/bv-gp-pattern_rotate.svg);
		background-size: 30rem auto;
		/* background: url(img/bv-gp-pattern.svg); */
		padding-block: 3rem;
		.name {
			font-weight: 700;
			/* display: block; */
		}
		.role {
			font-style: italic;
			color: var(--c-ekbo-rot);
			/* display: block; */
		}
		.foto {
			margin-bottom: 1rem;			
			img {
				/* display: block; */
				box-shadow: 5px 5px 12px rgba(0,0,0,.15);
				border-radius: 50%;
				transition:all 150ms ease-in-out; 
				&:hover { transform: scale(1.075	); }
			}
		}
		h4 { margin: 0; }
		ul {
			display: flex;
			flex-flow: wrap;
			justify-content: space-evenly;
			gap: calc(30/16 * 1rem);
			
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		li {
			flex: 0 0 calc(33.3333% - calc(30/16 * 1rem));
			min-width: 150px; 
			/* flex: 1; */
			display: flex;
			flex-direction: column;  /* Ordnet die 3 Spans untereinander an */
			align-items: center;     /* Zentriert alle Spans horizontal */
			justify-content: center; /* Zentriert die Inhalte vertikal (falls das li eine feste Höhe hat) */
			text-align: center;
  
  
			/* flex-grow: 1; */
			/* width: calc(33% - 30px); */
		}
		/* background: linear-gradient(to bottom, hsla(0,0%,100%,1) 90%,hsl(309,100%,35%) 100%); */
	}
	#membership {
		padding-block: 3rem 5rem;
		/* calc(100 / 16 * 1rem); */
		margin-bottom: 5rem;
		background: linear-gradient(175deg, hsl(309,100%,35%) 0%, hsl(262,42%,42%) 100%);
		box-shadow: .75rem .6rem .75rem rgba(0,0,0,.25);
		/* box-shadow: 0 0 1.2rem .75rem rgba(0,0,0,.15); */
		
		color: var(--color-section-membership);
		h1, h2, h3, h4 {
			color: var(--color-section-membership);
		}
		.btn {
			background: var(--c-ekbo-rot);
			color: var(--c-bv-leinen);
			/* font-weight: bold; */
			outline-color:  var(--c-bv-leinen);
			/* box-shadow: 5px 5px 12px rgba(255,255,255,.15); */
			&:hover {
				outline-color: var(--c-bv-leinen);
			}
		}
		.membership-quote {
			margin: 1rem 0;
			/* padding: 1rem; */
			/* border-left: 4px solid #fff; */
			font-size: 1.2rem;
			line-height: 2;
			font-style: italic; /* Optional: leicht kursiv */
			/* border-radius: 0 8px 8px 0; */
		}
		
		/* clip-path: url(#kreuz-oben-anker-unten); */
/* 		clip-path: polygon(
			/* =========================================================
			   1. OBERE KANTE: Das Stufen-Kreuz (Feste rem-Abstände)
			   ========================================================= */
			0% 3.5rem,
			calc(50% - 6.25rem) 3.5rem,
			calc(50% - 6.25rem) 2.0rem,
			calc(50% - 1.25rem) 2.0rem,
			calc(50% - 1.25rem) 0rem,       /* Höchster Punkt des Kreuzes */
			calc(50% + 1.25rem) 0rem,
			calc(50% + 1.25rem) 2.0rem,
			calc(50% + 6.25rem) 2.0rem,
			calc(50% + 6.25rem) 3.5rem,
			100% 3.5rem,

		/* =========================================================
			   2. UNTERE KANTE: Ankerschwung mit korrigierter, breiter Spitze
			   ========================================================= */
			100% calc(100% - 3.5rem),
			calc(50% + 11.25rem) calc(100% - 3.5rem),
			calc(50% + 8.2rem)   calc(100% - 2.8rem),
			calc(50% + 5.3rem)   calc(100% - 2.3rem),
			calc(50% + 3.0rem)   calc(100% - 1.9rem),
			calc(50% + 1.6rem)   calc(100% - 1.5rem),
			calc(50% + 0.9rem)   calc(100% - 1.2rem),
			calc(50% + 0.4rem)   calc(100% - 0.7rem),
			
			/* --- DIE ZENTRALE SPITZE --- */
			50% 100%,
			
			/* --- Linker Flügel symmetrisch --- */
			calc(50% - 0.4rem)   calc(100% - 0.7rem),
			calc(50% - 0.9rem)   calc(100% - 1.2rem),
			calc(50% - 1.6rem)   calc(100% - 1.5rem),
			calc(50% - 3.0rem)   calc(100% - 1.9rem),
			calc(50% - 5.3rem)   calc(100% - 2.3rem),
			calc(50% - 8.2rem)   calc(100% - 2.8rem),
			calc(50% - 11.25rem) calc(100% - 3.5rem),

			0% calc(100% - 3.5rem)
		  ); */
	}
	/* .footer__shadow { filter: drop-shadow(0px -8px 15px rgba(0, 0, 0, .25)); } */
	footer {
		position: relative;
		font-size: var(--font-size-imprint);

		background: var(--color-footer-background);
		color: var(--color-footer-text);
		--link-fg: var(--color-footer-text);
        --link-bg: var(--color-footer-background);
		padding-block: 4.5rem 2.25rem;
		
		clip-path: polygon(
			0% 2.50rem,
			14.7% 1.96rem,
			22.5% 1.73rem,
			30.8% 1.54rem,
			39.6% 1.38rem,
			49.0% 1.27rem,
			74.1% 1.16rem,
			78.0% 1.12rem,
			81.9% 1.05rem,
			85.9% 0.97rem,
			89.8% 0.86rem,
			93.5% 0.73rem,
			96.9% 0.58rem,
			100% 0.50rem,
			100% 100%,
			0% 100%
		  );
		
		&::before {
			  content: "";
			  position: absolute;
			  top: 0;
			  left: 0;
			  right: 0;
			  height: 6rem; /* Tiefe des Schattens */
			  background: linear-gradient(
			    	179deg,
					rgba(0, 0, 0, 0.15) 0%,
					rgba(0, 0, 0, 0) 45%,
					rgba(0, 0, 0, 0) 100%
				);
			  pointer-events: none; /* Macht den Schatten klick-durchlässig */
		}
		
		.footer__left {
			text-align: center;
			@media (min-width: calc(480 / 16 * 1rem)) { text-align: left; }
		}
		.footer__center {
			/* text-align: center; */
		}
		.footer__right {
			text-align: center;
			@media (min-width: calc(480 / 16 * 1rem)) { text-align: right; }
		}
		
		.footer__wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
			gap: 3rem;
			@media (width >= calc(480 / 16 * 1rem)) {
				flex-direction: row;
				gap: 1rem;
			}
			
		}
	}

	
	#imprint {
		
	}
}
@layer utility {

	.visually-hidden {
	  /* position: absolute; */
	  /* left:     -10000px; */
	  /* top:      auto; */
	  /* width:    1px; */
	  /* height:   1px; */
	  /* overflow: hidden; */
		/* &.skip:focus { */
			/* left: 0; */
			/* width: auto; */
			/* height: auto; */
			/* background: var(--c-bv-leinen); */
			/* padding: 10px; */
			/* border: 1px solid; */
		/* } */
		position: absolute !important;
		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
		clip: rect(1px, 1px, 1px, 1px);
		padding: 0 !important;
		border: 0 !important;
		height: 1px !important;
		width: 1px !important;
		overflow: hidden;
	}
}

/*
Aktuelles/Termine, Instalink

Werwirsind/Vorstand
CTA > Kontakt

Mitgliedschaftsantrag 
CTA > Online & PDF

Footer
-Impressum
-Datenschutzerklärung 
-Links

Wo? Verlinkung mit den lokalen Ausbildungsstätten 
*/



/* CSS fuer XML Termin-Lademodul */

        .button-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        .filter-button {
            background-color: #62358c;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            cursor: pointer;
        }
		.poll-button {
			background-color: #e1ac00;
            color: #000 !important;
            border: none !important;
            border-radius: 5px;
            padding: 12px 14px;
            margin: 10px 0;
            font-size: 16px;
			line-height: 300%;
            cursor: pointer;
		}
        .event-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 0;
            margin: 0;
        }
        .event-card {
            background-color: var(--c-bv-salbei);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 10px;
            padding: 0;
            width: calc(25% - 20px);
			max-width: calc(275 / 16 * 1rem);
            text-align: center;
            font-size: 14px;
            display: none;
            overflow: hidden;
        }
		
        .event-card.visible {
            display: block;
        }
        .event-link {
			cursor: pointer;
		}
	    h2.event-link {
			color: #62358c;
			transition: transform .2s ease-in-out;
			&:hover {
				transform: scale(1.05);
			} 
		}

        .event-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-bottom: 1px solid #ccc;
            position: relative;
        }
        .event-card-content {
            padding: 15px;
        }
        .event-card h2 {
            font-size: 18px;
            margin: 10px 0;
        }
        .event-card p {
			padding-block: 0;
            color: #555;
        }
        .show-more {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #62358c;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .loader {
            display: none;
            border: 8px solid #c4cccf;
            border-radius: 50%;
            border-top: 8px solid #62358c;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #event-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 700px;
            width: 100%;
            z-index: 10000001;
            overflow-y: auto;
            max-height: 80vh;
        }
        #event-modal-content {
            display: flex;
            flex-wrap: wrap;
        }
        #modal-image {
            width: 40%;
            max-width: 200px;
            margin-right: 20px;
            border-radius: 8px;
        }
        #modal-details {
            flex: 1;
        }
        #modal-details h2 {
            font-size: 22px;
            margin: 10px 0;
        }
        #modal-details p {
			padding-block: 0;
            margin: 5px 0;
            color: #555;
        }
        #modal-details p.bold {
            font-weight: bold;
        }
        #event-modal button {
            background-color: #c4cccf;
            color: #000;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 20px;
        }
        @media (max-width: 767px) {
            #event-modal-content {
                flex-direction: column;
            }
            #modal-image {
                width: 100%;
                max-width: 100%;
                margin-right: 0;
                margin-bottom: 15px;
            }
        }
        #event-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000000;
        }
        .event-image {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        @media (max-width: 767px) {
            .event-card {
                width: calc(45% - 20px);
				max-width: none;
            }
        }
/* Layout ohne slider
        @media (max-width: 480px) {
            .event-card {
                width: calc(90% - 20px);
				max-width: none;
            }
			.event-card img {
				height: 200px;
			}
        } 
*/

		/* --- Mobile Slider-Layout (bis 480px oder 767px) --- */
		@media (max-width: 480px) {
				.event-container {
				display: flex;
				flex-wrap: nowrap;          /* Verhindert den Zeilenumbruch */
				overflow-x: auto;           /* Erlaubt waagerechtes Scrollen/Wischen */
				scroll-snap-type: x mandatory; /* Erzwingt das Einrasten der Karten beim Wischen */
				-webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS/Safari */
				padding-bottom: 15px;       /* Platz für eventuelle Scrollbalken */
				
				/* Optional: Bündiges Scroll-Gefühl an den Rändern */
				padding-left: 10px;
				padding-right: 10px;
			}

			.event-card {
				/* Karten nebeneinander anordnen */
				flex: 0 0 85%;             /* 85% Breite, damit die nächste Karte rechts leicht hervorschaut */
				width: 85%;
				max-width: none;
				
				scroll-snap-align: center;  /* Rastet beim Wischen genau in der Mitte ein */
				scroll-snap-stop: always;   /* Verhindert, dass man mit einem Wisch 5 Karten überspringt */
				
				margin: 0 10px;             /* Anpassen des Abstands zwischen den Slidencards */
			}

			.event-card img {
				height: 200px;              /* Deine gewünschte Mobile-Bildhöhe */
				object-fit: cover;
			}

			.show-more {
				flex: 0 0 50%;
				width: 50%;
				scroll-snap-align: center;
				scroll-snap-stop: always;
				margin: 0 10px 0 0;
				
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 200px;
				
				background-color: #62358c;
				color: #fff;
				border-radius: 8px;
				font-size: 15px;
				font-weight: bold;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}
		}