cc-window.cc-banner{
    background-color: white;
}
.cc-window {
    background-color: white;
}
.cc-revoke{
  display: none !important;
}
.cd-block-content table{
   width: 100% !important;
}

.cd-block-content tr{
   width: auto !important;
   height: auto !important;
}
.cd-block-content td,
.cd-block-content table{
   height: auto !important;
}
.cd-block-content td:first-child{
   white-space: nowrap;
   padding-right:5px;
}
/* ================================ */
/* ===== INHALT ZUM EDITIEREN ===== */
/* ================================ */

:root {
	/* === Saison-Farbe ===
	   >> NUR EINE Stelle pro Saison ändern (gleicher Wert wie in der Legende unten).
	   Alle modernen Effekte (durchscheinende Karte, Menü-Akzent, Tabellen-Hover)
	   passen sich automatisch an. << */
	--kriya-season: #FFCCCC;
}

.cd-content {
	/* === Hintergrundfarbe (folgt jetzt der Variable --kriya-season) === */
	background-color: var(--kriya-season);
	/*
        Andere:
	Regenbogen:				background-color: #8D9DB6;

	Winter:
	01 Sonne durch Baum:	background-color: #A0DAFC;
	02 Baum Bogen:			background-color: #A0DAFC;
	03 Tanne Mitte:			background-color: #A0DAFC;
	04 Reife/Wiese:			background-color: #A0DAFC;
	05 Kiefern: 			background-color: #A0DAFC;
	06 Farn gefroren:		background-color: #A0DAFC;
	07 Farn gefroren/Sonne:	background-color: #A0DAFC;

	
	Frühling:
	01 Schneegloeckchen : 	background-color: #8ABD83;
	02 Kirschblueten: 		background-color: #E1B6D0;
	03 Azaleen: 			background-color: #E28588;
	04 Krokusse: 			background-color: #E7CFDA;
	05 Ahornblaetter: 		background-color: #659933;
	
	Sommer:
	01 Lupinen: 		background-color: #FFFFCC;
	02 Kerbel: 			background-color: #FFFF99;
	03 Wasserlilien: 	background-color: #FFCCCC;
	04 Palmenblätter: 	background-color: #CCCC99;
	05 Margeriten: 		background-color: #FFFF99;
	
	Herbst:
	01 Beeren: 			background-color: #FFCC99;
	02 Blaetter: 		background-color: #FFCC99;
	03 Blume: 			background-color: #FFCC66;
	*/
}

body {
	/* ==== Schriftfarbe ==== */
	color: black !important;
	/*
		Schwarz:			color: black !important;
		Weiss: 				color: white !important;
	*/
	
	
	/* === Hintergrundbild === */
	/* Saison wechseln: oben bei --kriya-bg nur den url('…')-Teil ersetzen.
	   Das Foto liegt auf einer fixierten Ebene (body::after, Abschnitt 0 der
	   Modernisierungs-Ebene weiter unten), damit es auch in Safari auf
	   iPhone/iPad erscheint. Aus der Liste unten nur den url('…')-Teil übernehmen. */
	--kriya-bg: url('background_summer_03.jpg'); 
	/* 
        Andere:
	Regenbogen:				background-image: url('background_rainbow.jpg');
	
	Winter:
	01 Sonne durch Baum:	background-image: url('background_winter_01.jpg');
	02 Baum Bogen:			background-image: url('background_winter_02.jpg');
	03 Tanne Mitte:			background-image: url('background_winter_03.jpg');
	04 Reife/Wiese:			background-image: url('background_winter_04.jpg');
	05 Kiefern: 			background-image: url('background_winter_05.jpg');
	06 Farn gefroren:		background-image: url('background_winter_06.jpg');
	07 Farn gefroren/Sonne:	background-image: url('background_winter_07.jpg');
	
	Frühling:
	01 Schneegloeckchen: 	background-image: url('background_spring_01.jpg');
	02 Kirschblueten: 		background-image: url('background_spring_02.jpg'); 
	03 Azaleen: 			background-image: url('background_spring_03.jpg'); 
	04 Krokusse: 			background-image: url('background_spring_04.jpg'); 
	05 Ahornblaetter:		background-image: url('background_spring_05.jpg'); 
	
	Sommer:
	01 Lupinen: 		background-image: url('background_summer_01.jpg');
	02 Kerbel: 			background-image: url('background_summer_02.jpg'); 
	03 Wasserlilien: 	background-image: url('background_summer_03.jpg'); 
	04 Palmenblätter: 	background-image: url('background_summer_04.jpg'); 
	05 Margeriten: 		background-image: url('background_summer_05.jpg'); 
	
	Herbst:
	01 Beeren: 		background-image: url('background_autumn_01.jpg');
	02 Blaetter: 	background-image: url('background_autumn_02.jpg'); 
	03 Blume: 		background-image: url('background_autumn_03.jpg'); 
	*/
}

.kriya-quote, .kriya-quotee {
	/* === Textfarbe Startseite === */
	color: black !important;
}
.kriya-first .cd-content::before {
	/* === Transparenz fuer Hintergrund auf Startseite === */
	/* Wert 0 = voll transparent; 1 = keine transparenz */
	opacity: 0.6 !important;
}

/* ================================ */
/* ===== HIER NICHT! EDITIEREN ==== */
/* ================================ */

/* === Schriftfamilie: Andika (SIL) ===
   Ersetzt die fruehere Mixage-ITC-Schrift. Grund: Andika deckt die Sanskrit-
   Diakritika (IAST: a i u r l m n s h mit Punkten/Makron, ā ī ū ṛ ṃ ś ṣ ḥ …)
   vollstaendig ab, Mixage tat das nicht. Deckt zudem Deutsch/Franzoesisch
   komplett ab (äöü ß, é è œ æ …).
   Vier Schnitte. Die Gewichte werden per font-weight-Bereich verteilt:
     1–550   -> Regular  (auch 500 = Fliesstext)
     551–1000 -> Bold    (auch 900)
   size-adjust: 95% aufrecht, 101% kursiv – die Andika-Kursive rendert ~2%
   kleiner und wird angehoben, damit sie optisch gleich gross wirkt. */

@font-face {
    font-family: 'Andika';
    src: url('../genwwwfiles/Andika-Full-Regular.woff2') format('woff2');
    font-weight: 1 550;
    font-style: normal;
    font-display: swap;
    size-adjust: 95%;
}

@font-face {
    font-family: 'Andika';
    src: url('../genwwwfiles/Andika-Full-Bold.woff2') format('woff2');
    font-weight: 551 1000;
    font-style: normal;
    font-display: swap;
    size-adjust: 95%;
}

@font-face {
    font-family: 'Andika';
    src: url('../genwwwfiles/Andika-Full-Italic.woff2') format('woff2');
    font-weight: 1 550;
    font-style: italic;
    font-display: swap;
    size-adjust: 101%;
}

@font-face {
    font-family: 'Andika';
    src: url('../genwwwfiles/Andika-Full-BoldItalic.woff2') format('woff2');
    font-weight: 551 1000;
    font-style: italic;
    font-display: swap;
    size-adjust: 101%;
}

/* Footer immer zuunterst auf der Seite, auch wenn der Inhalt kleiner ist */
html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0 auto !important;
    overflow-x: hidden;
    z-index: -100;
	/* Hintergrundfoto: siehe body::after (fixierte Ebene) in der
	   Modernisierungs-Ebene – background-attachment:fixed entfernt,
	   da Safari auf iOS/iPadOS es nicht rendert. */
	line-height: 1.15 !important;
}

@media (max-width: 768px) {
	body {
		margin: 0 !important;
	}
}

body, .main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
hr {
	margin: 20px 0 !important;
	border-top: 1px solid black !important;
}
@media (max-width: 768px) {
	p {
		margin:10px 0 !important;
	}
}

a{
        color:#0000AA;
}

h1, h2, h3, h4, h5{
	font-family: 'Andika', 'Verdana', sans-serif !important;
	/* color: #000000 !important; */
	font-weight:normal !important;
	letter-spacing: 2px !important;
	text-decoration:none !important;
}
h1{
	font-size: 32pt !important;
	/*margin: 40px 0 20px 0 !important;*/
}
h2{
	font-size: 22pt !important;
	/*margin: 30px 0 0 0 !important;*/
}
h3{
	font-size: 16pt !important;
	font-style: normal !important;
}
@media (max-width: 768px) {
	h1{
		font-size: 20pt !important;
		margin: 20px 0 10px 0 !important;
	}
	h2{
		font-size: 16pt !important;
		margin: 20px 0 10px 0 !important;
	}
	h3{
		font-size: 14pt !important;
		margin: 20px 0 10px 0 !important;
	}
}

html,td,div{
	text-align:inherit !important;
}

td, div, body, p, .form-label, .cd-data-label {
	font-family: 'Andika', 'Verdana', sans-serif !important;
	/* color: #000000 !important; */
	font-size: 12pt !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
}

p {
	margin:0 !important;
}

p.kriya-pdf::before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400; 
	content: "\f1c1";
    padding-right: 10px;
}

.cd-block-content {
	padding: 0 !important;
	margin: 0 !important;
}

.cd-content a, .cd-content a:visited { /* , .cd-light a, .cd-light a:visited */
	text-decoration: underline !important;
	font-family: 'Andika', 'Verdana', sans-serif !important;
	/* color: #000000 !important; */
	font-size: 12pt !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
	cursor: pointer !important;
}

input[type="checkbox"],
input[type="radio"] {
	width: 20px !important;
	height: 20px !important;
}

input[type="checkbox"] {
	margin-top:0 !important;
}
.cd-form-option {
	display: inline-flex !important;
}

.cd-data-formfield {
	font-family: 'Andika', 'Verdana', sans-serif !important;
	/* color: #000000 !important; */
	font-size: 12pt !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
}

.kriya-tile {
	display:block;
	margin:5px;
	padding:5px;
	border:1px solid black;
	width: 45%;
    float: left;
    text-align: center;
	position:relative;
	background: rgba(255, 255, 255, 0.4);
	cursor:pointer;
	text-decoration:none !important;
	color: #000000 !important;
}
.kriya-tile > img {
	margin-top:10px;
}
.kriya-tile:hover {
	text-decoration:none !important;
	color: #000000 !important;
	background: transparent;
}

.kriya-quote {
	font-size: 16pt !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
    margin: 182px 0 0 0 !important;
    line-height: 40px !important;
	text-align:center !important;
}
@media (max-width: 768px) {
	.kriya-quote {
		font-size: 14pt !important;
		line-height: 30px !important;
		margin: 5%;
		margin-top: 60px !important
	}
}

.kriya-quotee{
	font-size: 13pt !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
	text-align: center !important;
}

.kriya-hidden{
	display:none;
}

.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
	overflow-x: hidden;
    max-width: 1100px;
    z-index: -101;
}
.main > div {
    flex-shrink: 0;
}
.cd-content {
    flex: 1 0 auto;
	max-width: 768px;
	position:relative;
	width:100%;
	padding-bottom: 30px;
}
.kriya-first .cd-content{
	background-color: transparent;
}
.kriya-first .cd-content::before {
	content: "";
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: white;
	/* Transparenz wird oben im Editier-Bereich gesteuert
	   (.kriya-first .cd-content::before, ~Zeile 136). Hier bewusst KEINE
	   opacity mehr – die Doppelung überschrieb sonst den dortigen Regler. */
}

@media (min-width: 769px) {
	.cd-content table{
		width: 100%;
		border-spacing: 0;
		margin-top:10px;
		/*border-bottom: 1px solid black;*/
	}
	.cd-content table > tbody > tr > td {
		border-top:1px solid black;
		padding:5px 0;
		vertical-align:top;
		text-align: left;
	}
	
	.cd-content table > tbody > tr:last-child > td {
		border-bottom:1px solid black;
	}

	.cd-content table > tbody > tr > td > p {
		padding:0;
		margin:0;
		text-align: left;
	}
}
@media (max-width: 768px) {
	.cd-content table, .cd-content tbody, .cd-content tr, .cd-content td{
		display:block;
		padding:5px 0 5px 0;
		margin:0;
	}
	.cd-content table {
		width: 100% !important;
	}
	.cd-content table > tbody > tr {
		border-top: 1px solid black;
	}
	.cd-content table > tbody > tr:last-child {
		border-bottom: 1px solid black;
	}
	.cd-content table > tbody > tr > td > p {
		padding:0 !important;
		margin:0 !important;
		text-align: left !important;
	}
}

@media (max-width: 1099px) {
	.cd-content {
		margin:80px 0 0 0;
	}
}
@media (min-width: 1000px){
	.cd-content {
		width: 768px !important;
	}
}
@media (max-width: 1099px) {
	.cd-fullpagemenu-open .cd-content {
		display:none;
	}
}

.cd-content ol {
	padding: 0 0 0 19px;
    margin: 0;
}

.cd-content ul {
	list-style-type: none;
	padding:0;
	margin:0;
}
.cd-content ul > li{
	text-indent: -12px;
    padding-left: 10px;
}
.cd-content ul > li:before { 
	content: "- ";
    text-indent: -10px;
}

.header-on-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 450px;
    z-index: 100000;
    overflow-x: hidden;
    overflow-y: auto;
}

.cd-header {
    width: 100%;
}

@media (min-width: 769px) {
	.cd-section {
		padding: 0 60px;
	}
}

@media (max-width: 768px) {
	.cd-section {
		padding:0 10px !important;
	}
}

.stripeVertical {
    width: 30px;
    background: rgba(33,83,113,1.0);
    border-left: 2px solid white;
    border-right: 2px solid white;
}

.stripeHorizontal {
    width: 100%;
    height: 30px;
    background: rgba(33,83,113,1.0);
    border-top: 2px solid white;
}

.cd-fullpagemenu-menu {
    border-right: 2px solid white;
}

@media (min-width: 1100px) {
    .main {
        margin-left: 230px;
    }
}

@media (min-width: 769px) {
    .cd-header, .cd-header .cd-section {
        min-height: 100%;
    }
}

.cd-footer {
    flex-shrink: 0;
}
/* --------------------------------------*/

@media (min-width: 1100px) {
	.im-header {
		display:none;
	}
}
@media (max-width: 1099px) {
	.im-header {
		height:80px;
		display:block;
		position:fixed;
		top:0;
		left:0;
		right:0;
		width:100%;
		z-index:10000;
		background-color: #575756;
	}

	.im-header img {
		position:absolute;
		top:0;
		left:15px;
		height:80px;
	}
}

/* ============= FORM CONTENT ============ */

.cd-light a.cd-button-primary, 
.cd-light input.cd-button-primary, 
.cd-light button.cd-button-primary {
	background-color: transparent !important;
}
.cd-light a.cd-button-primary:hover, 
.cd-light input.cd-button-primary:hover, 
.cd-light button.cd-button-primary:hover {
	background-color: rgba(0,0,0,1.0) !important;
}


.kriya-link-test a, .kriya-link-test a:visited{
	text-decoration: none !important;
	position:relative;
	background-color: rgba(255,255,255,0.6);
}
.cd-fullpagemenu-button {
    position: fixed;
    z-index: 100001;
    top: 20px;
    right : 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding-top: 10px;
    padding-left: 8px;
}
@media (min-width: 1100px) {
	.cd-fullpagemenu-button{
		display:none;
	}
}

.cd-fullpagemenu-button .nav-icon {
    width: 24px;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.cd-fullpagemenu-button .nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,1.0);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all .25s ease-in-out;
}

.cd-fullpagemenu-button .nav-icon span:nth-child(1) {
    top: 3px;
}

.cd-fullpagemenu-button .nav-icon span:nth-child(2) {
    top: 9px;
}

.cd-fullpagemenu-button .nav-icon span:nth-child(3) {
    top: 15px;
}

.cd-fullpagemenu-button .nav-icon.open span {
    background: rgba(255,255,255,1.0);
}

.cd-fullpagemenu-button .nav-icon.open span:nth-child(1) {
    top: 9px;
    transform: rotate(135deg);
}

.cd-fullpagemenu-button .nav-icon.open span:nth-child(2) {
    opacity: 0;
}

.cd-fullpagemenu-button .nav-icon.open span:nth-child(3) {
    top: 9px;
    transform: rotate(-135deg);
}


.kriya-header{
	/*position: fixed;*/
	position: absolute;
	z-index: 1000;
	top: 0;
	height:180px;
	width: 230px;
	background-color: rgba(0,0,0,.5);
}
.kriya-header img{
	height: 165px;
	text-align: right;
	position: absolute;
	right: 0;
}
@media (max-width: 1099px) {
	.kriya-header {
		display:none;
	}
}

.cd-fullpagemenu {
    position: absolute;
    z-index: 1000;
    top: 190px;
    /* bottom: 0; */
    width: 230px;
    background-color: rgba(0,0,0,.5);
    transition: all 0.5s;
    padding-top: 50px;
    padding-bottom: 50px;
    /* height: 100%; */
}

@media (max-width: 1099px) {
    .cd-fullpagemenu {
		position: fixed;
		top: 0;
		visibility: hidden;
    	opacity: 0;
        width: 100%;
		margin:80px 0 0 0;
		background-color: rgba(112,118,122,1);
    }

	.cd-fullpagemenu::before {
	    background-image: url(../genwwwfiles/kriya_bildmarke_weiss.png);
	    background-repeat: no-repeat;
	    background-position: center center;
	    background-size: 100% auto;
		opacity: 0.1;
	    content: "";
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -2;
	    height: 100%;
	    width: 100%;
	}


}

@media (max-width: 1099px) {
    .cd-fullpagemenu-open .cd-fullpagemenu {
        display: block;
        /*background: rgba(33,83,113,1.0);*/
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
}

.cd-fullpagemenu ul {
    text-align: right;
    list-style-type: none;
    padding: 0;
    margin: 0 10px;
}
.cd-fullpagemenu ul ul {
    margin: 0;
}

.cd-fullpagemenu ul li a {
    text-decoration: none;
    display: inline-block;
}


.cd-fullpagemenu .cd-menu-level-1 > ul > li:last-child{
	margin-top:60px;
}
.fas{
	color:white;
}
.cd-fullpagemenu .cd-menu-level-1 a {
	font-size: 14pt;
	font-style: normal;
	text-decoration: none;
	margin: 10px 5px;
	overflow-wrap: break-word;
}

.cd-fullpagemenu .cd-menu-level-1 a {
	color: rgba(255,255,255,1.0);
}

.cd-fullpagemenu .cd-menu-level-2 {
	display:none;
}

.cd-fullpagemenu .cd-menu-level-2 > ul > li{
	margin-bottom:2px;
	margin-top:2px;
}

.cd-fullpagemenu .cd-menu-level-2 > ul > li:last-child{
	margin-bottom:20px;
}

.cd-fullpagemenu .cd-menu-level-2 a {
	font-size: 14px;
	font-style: normal;
	text-decoration: none;
	/* text-transform: uppercase; */
	margin: 2px 5px;
	overflow-wrap: break-word;
}

.cd-fullpagemenu .cd-menu-level-2 a {
	color: rgba(255,255,255,1.0);
}


.cd-fullpagemenu .cd-menu-level-3 a {
	font-size: 9pt;
	font-weight: 200;
	font-style: normal;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0px 0 0px 0;
overflow-wrap: break-word;}

.cd-fullpagemenu .cd-menu-level-3 a {
	color: rgba(255,255,255,1.0);
}



.cd-fullpagemenu .cd-menu-item.cd-menu-selected {
    background-color: rgba(255,255,255,0.3);
}
@media (min-width: 769px) {
	.cd-fullpagemenu .cd-menu-item:hover {
	    background-color: rgba(255,255,255,0.3);
	}
}
.cd-scroll .cd-totop-button {
    right: 20px;
}

.cd-form-checkbox-container {
	margin:0 !important;
}

.cd-form-validation ul > li{
	text-indent: 0;
    padding-left: 0;
}

.cd-form-validation ul > li:before {
	content: "";
    text-indent: 0;
}


/* =================================================================== */
/* =====  KRIYA · MODERNISIERUNGS-EBENE                          ====== */
/* =====  Milchglas · Neomorphismus · Licht · Details            ====== */
/* -------------------------------------------------------------------  */
/* =====  Rein visuell: Struktur und Inhalt bleiben unverändert.        */
/* =====  Farben folgen --kriya-season (siehe ganz oben).               */
/* =====  Zum Deaktivieren: diesen Block entfernen.                     */
/* =================================================================== */

:root {
	--k-ease: cubic-bezier(.22,.61,.36,1);
	--k-radius: 20px;
	/* Akzente aus der Saison-Farbe abgeleitet */
	--k-accent-strong: color-mix(in srgb, var(--kriya-season, #FFCCCC) 68%, #000);        /* sichtbarer Akzent auf hellem Grund */
	--k-accent-glow:   color-mix(in srgb, var(--kriya-season, #FFCCCC) 55%, transparent); /* weicher Halo auf dunklem Menü */
	/* Links im Inhalt: Prune-Ton, folgt der Saison. Ruhe = --k-link, Hover/Fokus = dunkler. */
	--k-link:          color-mix(in srgb, var(--kriya-season, #FFCCCC) 26%, #6d1b3f);
	--k-link-hover:    color-mix(in srgb, var(--kriya-season, #FFCCCC) 22%, #4a1230);
}

/* ---- Sanfter Bildlauf + schlanke Scrollleiste ---- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
* { scrollbar-width: thin; scrollbar-color: rgba(150,150,150,.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
	background: rgba(130,130,130,.45); border-radius: 10px;
	border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(130,130,130,.7); background-clip: content-box; }

/* ---- 0. Hintergrundfoto als fixierte, viewport-grosse Ebene ---- */
/* Ersetzt `background-attachment: fixed` am body, das Safari auf iOS/iPadOS
   NICHT rendert (Foto blieb dort leer). position:fixed pinnt zuverlässig an
   den Viewport → das Foto erscheint auf iPhone/iPad UND behält überall den
   fixierten „Foto-hinter-Glas“-Effekt. Quelle: --kriya-bg (Editier-Bereich
   ganz oben). z-index -103 liegt hinter .main (-101), stört also weder
   Lesbarkeit noch Klicks. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -103;
	background-image: var(--kriya-bg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ---- 1. (entfallen) Seitenmenü-Milchglas -> siehe Abschnitt 18 ---- */

/* ---- 2. Menüeinträge: weiche Pille, Glühen, Saison-Akzent ---- */
.cd-fullpagemenu .cd-menu-item {
	position: relative;
	border-radius: 11px;
	margin: 2px 6px;
	transition: background .3s var(--k-ease), box-shadow .3s var(--k-ease);
}
.cd-fullpagemenu .cd-menu-item a { transition: color .25s, text-shadow .25s; }
/* Aktiv/Hover: weiche Pille + saisonaler Halo (kein Streifen -> keine Kollision mit dem Text) */
@media (min-width: 769px) {
	.cd-fullpagemenu .cd-menu-item:hover {
		background: rgba(255,255,255,.14) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
		            0 0 22px var(--k-accent-glow),
		            0 6px 18px rgba(0,0,0,.18);
	}
	.cd-fullpagemenu .cd-menu-item:hover a { text-shadow: 0 0 14px rgba(200,225,245,.6); }
}
.cd-fullpagemenu .cd-menu-item.cd-menu-selected {
	background: rgba(255,255,255,.18) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
	            0 0 22px var(--k-accent-glow),
	            0 6px 20px rgba(0,0,0,.22);
}

/* ---- 3. Inhaltskarte (Unterseiten): schwebend, durchscheinend ---- */
.main:not(.kriya-first) .cd-content {
	border-radius: var(--k-radius) !important;
	background: var(--kriya-season); /* Rückfall, falls color-mix nicht verfügbar */
	background: color-mix(in srgb, var(--kriya-season, #FFCCCC) 88%, transparent) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: 0 22px 55px rgba(0,0,0,.26), 0 4px 14px rgba(0,0,0,.12);
	overflow: hidden;
}
@media (min-width: 769px) {
	.main:not(.kriya-first) .cd-content { margin: 22px 0 22px 22px; }
}
/* Lichtreflex am oberen Kartenrand */
.main:not(.kriya-first) .cd-content::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	border-radius: inherit; z-index: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 34%);
	mix-blend-mode: soft-light;
}
.main:not(.kriya-first) .cd-content > * { position: relative; z-index: 1; }

/* ---- 4. Startseite: Glaskarte + "atmendes" Licht hinter dem Zitat ---- */
.kriya-first .cd-content {
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.kriya-first .cd-content::before {
	border-radius: 24px;
	-webkit-backdrop-filter: blur(10px) saturate(1.12);
	backdrop-filter: blur(10px) saturate(1.12);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
	z-index: 0;
}
.kriya-first .cd-content::after {
	content: ""; position: absolute; left: 50%; top: 150px;
	width: min(80%, 460px); height: 300px; transform: translateX(-50%);
	pointer-events: none; z-index: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255,244,222,.55), transparent 72%);
	mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
	.kriya-first .cd-content::after { animation: kriyaBreathe 7s var(--k-ease) infinite; }
}
@keyframes kriyaBreathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.kriya-quote, .kriya-quotee { position: relative; z-index: 2; }

/* ---- 5. Tabellen (Seminare): weiche Trennlinien + Hover ---- */
@media (min-width: 769px) {
	.main:not(.kriya-first) .cd-content table > tbody > tr > td {
		border-top: 1px solid rgba(70,40,40,.16) !important;
		transition: background .25s, box-shadow .25s;
	}
	.main:not(.kriya-first) .cd-content table > tbody > tr:last-child > td {
		border-bottom: 1px solid rgba(70,40,40,.16) !important;
	}
	.main:not(.kriya-first) .cd-content table > tbody > tr:hover > td {
		background: rgba(255,255,255,.34);
	}
	/* Kein linker Akzentstrich mehr: er lag ohne Zellen-Innenabstand direkt
	   auf dem Text (wie zuvor beim Menü). Der weiche Hintergrund reicht. */
}

/* ---- 6. Links im Inhalt: Prune-Farbe, Unterstrich erst beim Hover ---- */
/* :not(.cd-button-primary):not(.kriya-tile) = Schaltflächen/Kacheln behalten ihren eigenen Stil. */
.cd-content a:not(.cd-button-primary):not(.kriya-tile),
.cd-content a:not(.cd-button-primary):not(.kriya-tile):visited {
	color: var(--k-link) !important;
	text-decoration-line: none !important;            /* kein Standard-Unterstrich mehr */
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 4px !important;            /* Abstand für den Hover-Unterstrich */
	text-decoration-color: color-mix(in srgb, var(--k-link-hover) 55%, transparent) !important;
	transition: color .25s var(--k-ease), text-decoration-color .25s var(--k-ease), text-shadow .2s var(--k-ease);
}
.cd-content a:not(.cd-button-primary):not(.kriya-tile):hover,
.cd-content a:not(.cd-button-primary):not(.kriya-tile):focus-visible {
	color: var(--k-link-hover) !important;
	text-decoration-line: underline !important;       /* feiner Unterstrich erscheint beim Hover/Fokus */
}

/* ---- 6b. Klick auf Links: kein Rechteck mehr, sanftes Aufleuchten stattdessen ---- */
.cd-content a:not(.cd-button-primary):not(.kriya-tile) {
	-webkit-tap-highlight-color: transparent;         /* kein grauer Kasten beim Tippen (Handy) */
	border-radius: 4px;                               /* weiche Ecken für den Tastatur-Fokusring */
}
/* Maus/Touch: gar kein Fokus-Rechteck */
.cd-content a:not(.cd-button-primary):not(.kriya-tile):focus { outline: none !important; }
.cd-content a:not(.cd-button-primary):not(.kriya-tile):focus:not(:focus-visible) { outline: none !important; }
/* Nur Tastatur (Tab): weicher, runder Ring statt hartem schwarzem Rechteck */
.cd-content a:not(.cd-button-primary):not(.kriya-tile):focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-link) 28%, transparent);
}
/* Klick-Feedback: kurzes, weiches Aufleuchten (verblasst über die transition oben) */
.cd-content a:not(.cd-button-primary):not(.kriya-tile):active {
	color: var(--k-link-hover) !important;
	text-shadow: 0 0 9px color-mix(in srgb, var(--k-link) 55%, transparent),
	             0 0 2px color-mix(in srgb, var(--k-link) 45%, transparent);
}

/* ---- 7. Bilder im Inhalt: runde Ecken + weicher Schatten ---- */
.main:not(.kriya-first) .cd-content img {
	border-radius: 14px;
	/* Weicher, gleichmässiger Prune-Schatten (statt hartem schwarzem Schatten nur
	   unten): das Foto „schwebt“ ruhig, passend zu den Karten (Abschnitt 15/16).
	   Kein heller Rand/Schein rundherum. */
	box-shadow: 0 10px 26px rgba(60,20,35,.20), 0 2px 6px rgba(60,20,35,.14);
}
/* ---- 7a. Schatten nicht abschneiden ----
   Der ClubDesk-Block (.cd-block) um ein Bild hat overflow:hidden und beschnitt
   dadurch den weichen Schatten links/oben – das Bild sitzt bündig in der oberen
   linken Blockecke, deshalb die harte senkrechte Kante links. display:flow-root
   schliesst den umflossenen Float weiterhin ein, OHNE zu beschneiden → der
   Schatten läuft sanft in den rosa Kartenrand aus, das Bild bleibt links bündig
   mit dem Text (keine zusätzliche Marge nötig).
   (:has – moderne Browser inkl. Safari iOS 15.4+; ältere behalten den bisherigen
   Beschnitt, rein kosmetisch.) */
.main:not(.kriya-first) .cd-content .cd-block:has(img) {
	overflow: visible !important;
	display: flow-root;
}
/* ---- 7b. Ausnahme: Logos/Symbole OHNE Rahmen ----
   Standardmässig bekommt JEDES Inhaltsbild oben Ecken + Schatten. Für Logos,
   Symbole usw. ist das unerwünscht. Zwei einfache Wege, das abzuschalten:
   (a) im ClubDesk-Bild einen ALT-Text mit dem Wort „Logo" oder „Icon" setzen
       (z.B. „Kriya Charity Logo") – hilft zugleich Barrierefreiheit und SEO;
   (b) liegt das Bild in einem Text-Objekt: dem <img> in der Quelltext-Ansicht
       die Klasse „kriya-plain" geben.
   (ClubDesk liefert Bilder über „fileservlet?…", der Dateiname steht NICHT in
   der URL – deshalb geht es nicht automatisch über den Dateinamen.) */
.main:not(.kriya-first) .cd-content img[alt*="logo" i],
.main:not(.kriya-first) .cd-content img[alt*="icon" i],
.main:not(.kriya-first) .cd-content img.kriya-plain {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ---- 8. Kacheln / Schaltflächen: Neomorphismus ---- */
.kriya-tile {
	border: none !important;
	border-radius: 16px !important;
	background: rgba(255,255,255,.5) !important;
	box-shadow: 6px 6px 16px rgba(0,0,0,.12), -6px -6px 16px rgba(255,255,255,.55) !important;
	transition: transform .3s var(--k-ease), box-shadow .3s var(--k-ease), background .3s;
}
.kriya-tile:hover {
	background: rgba(255,255,255,.62) !important;
	transform: translateY(-4px);
	box-shadow: 10px 12px 26px rgba(0,0,0,.16), -8px -8px 20px rgba(255,255,255,.6) !important;
}
.cd-light a.cd-button-primary,
.cd-light input.cd-button-primary,
.cd-light button.cd-button-primary {
	border-radius: 12px !important;
	box-shadow: 0 8px 20px rgba(0,0,0,.14);
	transition: transform .2s var(--k-ease), box-shadow .2s var(--k-ease), background-color .2s;
}
.cd-light a.cd-button-primary:hover,
.cd-light input.cd-button-primary:hover,
.cd-light button.cd-button-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0,0,0,.20);
}

/* ---- 9. Hamburger- / Nach-oben-Button: weiches Glühen ---- */
.cd-fullpagemenu-button .nav-icon span { box-shadow: 0 0 8px rgba(0,0,0,.35); }
.cd-totop-button {
	border-radius: 50% !important;
	box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
	transition: transform .25s var(--k-ease), box-shadow .25s var(--k-ease);
}
.cd-totop-button:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.32) !important; }

/* ---- 10. "Reduzierte Bewegung" berücksichtigen ---- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ---- 11. Mobil: gleiche Handschrift wie am Desktop ---- */
@media (max-width: 768px) {
	/* Inhaltskarte schwebt auch auf dem Handy leicht (kleiner Rand + weniger Rundung) */
	.main:not(.kriya-first) .cd-content {
		margin: 80px 10px 20px 10px !important;
		/* .cd-content hat width:100% – mit 2 × 10px Rand ragte die Karte rechts 10px
		   aus dem Bildschirm (rechter Rand und Rundung abgeschnitten, Fusszeile
		   dagegen korrekt eingerückt). Gemessen 2026-09-19 bei 390px: 10–389 statt 10–369. */
		width: calc(100% - 20px) !important;
		border-radius: 16px !important;
	}
	/* Tabellen: weiche Trennlinien statt harter schwarzer Linien
	   (mobil nutzt ClubDesk andere Selektoren -> hier separat überschreiben) */
	.main:not(.kriya-first) .cd-content table > tbody > tr {
		border-top: 1px solid rgba(70,40,40,.16) !important;
	}
	.main:not(.kriya-first) .cd-content table > tbody > tr:last-child {
		border-bottom: 1px solid rgba(70,40,40,.16) !important;
	}
	/* ClubDesk speichert feste Spaltenbreiten inline (z.B. style="width:27%").
	   Auf dem Handy stapeln die Zellen (display:block) und wären dann nur ~1/4 breit.
	   -> auf volle Breite zurücksetzen (bestehender ClubDesk-Fehler, unabhängig vom Redesign). */
	.cd-content table > tbody > tr > td {
		width: auto !important;
	}
}

/* ---- 11b. Mobil: Glas-Unschärfe (backdrop-filter) sparsam ----
   Die Milchglas-Unschärfe muss beim Scrollen das fixierte Hintergrundfoto
   fortlaufend neu abtasten – der grösste GPU-Kostenpunkt, spürbar v.a. auf
   älteren Handys. Unter 768px daher die Unschärfen abschalten und den
   Kartengrund etwas dichter machen (praktisch gleiche Optik, flüssigeres
   Scrollen). Desktop bleibt unverändert. */
@media (max-width: 768px) {
	/* Inhaltskarte (Unterseiten): ohne Blur, dafür etwas deckender + leichterer Schatten */
	.main:not(.kriya-first) .cd-content {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: color-mix(in srgb, var(--kriya-season, #FFCCCC) 95%, transparent) !important;
		box-shadow: 0 10px 24px rgba(60,20,35,.18) !important;
	}
	/* Startseiten-Glaskarte: ohne Blur, leichterer Schatten */
	.kriya-first .cd-content {
		box-shadow: 0 12px 26px rgba(60,20,35,.20) !important;
	}
	.kriya-first .cd-content::before {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
	/* Sprachumschalter-Pille: ohne Blur, dafür deckender Grund (bleibt gut lesbar) */
	.kriya-lang {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: rgba(255,255,255,.85) !important;
	}
	/* „Atmendes" Licht hinter dem Zitat auf dem Handy ruhen lassen (spart GPU/Akku) */
	.kriya-first .cd-content::after {
		animation: none !important;
	}
}

/* ---- 12. Klick auf einen Menüpunkt: kein grobes Rechteck ---- */
/* Grauen Tap-/Klick-Rahmen entfernen (Touch + Maus) */
.cd-fullpagemenu a,
.cd-fullpagemenu .cd-menu-item { -webkit-tap-highlight-color: transparent; }
/* Maus-/Touch-Klick: keinen Standard-Fokusrahmen zeigen */
.cd-fullpagemenu .cd-menu-item a:focus { outline: none; }
.cd-fullpagemenu .cd-menu-item a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* Weicher Effekt beim Klicken statt des Rechtecks (saisonaler Schimmer am Text) */
.cd-fullpagemenu .cd-menu-item a:active {
	text-shadow: 0 0 16px var(--k-accent-glow), 0 0 6px rgba(255,255,255,.55);
}
/* Tastatur-Navigation: weicher, gut sichtbarer Fokus (Barrierefreiheit) */
.cd-fullpagemenu .cd-menu-item a:focus-visible {
	outline: none;
	border-radius: 8px;
	box-shadow: 0 0 0 2px rgba(255,255,255,.42), 0 0 16px var(--k-accent-glow);
}

/* ---- 13. Parampara / Ahnenlinie (ersetzt das statische Bild auf /parampara) ---- */
/* Wird als HTML-Baustein (<div class="kriya-parampara">…</div>) in den Seiteninhalt
   eingefügt – siehe Datei parampara-block.html. Farben folgen --kriya-season.
   Zwei ClubDesk-Fallen sind hier bewusst abgefangen:
   1) ClubDesk erzwingt padding-left/Marker auf <ol> -> mit !important zurücksetzen,
      sonst driftet die Mittellinie ~9px gegen die zentrierten Karten.
   2) ClubDesk erzwingt text-align:start -> Beschriftungen per Flexbox zentrieren
      (nicht über text-align, das sonst nach links fällt). */
.kriya-parampara {
	--pp-accent: color-mix(in srgb, var(--kriya-season, #FFCCCC) 56%, #7a1f47);
	--pp-glow:   color-mix(in srgb, var(--kriya-season, #FFCCCC) 60%, transparent);
	--pp-spine:  color-mix(in srgb, var(--kriya-season, #FFCCCC) 60%, #9a6076);
	--pp-soft:   #8c7480;
	--pp-card:   rgba(255,255,255,.62);
	--pp-strong: rgba(255,255,255,.82);
	--pp-hair:   rgba(90,50,66,.20);
	max-width: 600px;
	margin: 1.4rem auto 0.5rem;
	color: #3B2330;
}
/* Der „Strom": senkrechte Achse der direkten Übertragung */
.kriya-parampara .pp-stream {
	list-style: none !important;
	margin: 0 auto !important;
	padding: 0 !important;                 /* ClubDesk-Listeneinzug entfernen -> Linie mittig */
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	gap: 2.6rem;
	width: fit-content; max-width: 100%;
}
.kriya-parampara .pp-gen {
	list-style: none !important;
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	gap: .55rem; width: 100%;
}
.kriya-parampara .pp-stream::before {
	content: ""; position: absolute; top: 9px; bottom: 3rem; left: 50%;
	transform: translateX(-50%);
	width: 2px; border-radius: 2px; opacity: .5;
	background: linear-gradient(to bottom, transparent, var(--pp-spine) 8%, var(--pp-spine) 85%, transparent);
}
/* Meisterkarte */
.kriya-parampara .pp-node {
	background: var(--pp-strong);
	border: 1px solid rgba(255,255,255,.85);
	border-radius: 14px;
	padding: .6rem 1.15rem;
	text-align: center !important;
	/* 500 = gleiche Schriftstärke wie der übrige Inhaltstext (ClubDesk erzwingt bei
	   <div> ohnehin 500 !important); so sind pp-node und pp-leaf textlich identisch. */
	font-weight: 500; font-size: 1.16rem; line-height: 1.2;
	box-shadow: 0 4px 14px rgba(70,35,52,.12);
}
.kriya-parampara .pp-node .pp-role {
	display: block; margin-top: .15rem;
	font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--pp-soft); font-weight: 700;
}
/* Lebende Lehrerin (Kripanandamoyima) hervorheben */
.kriya-parampara .pp-living {
	border-color: var(--pp-accent);
	box-shadow: 0 0 0 1px var(--pp-accent), 0 10px 26px var(--pp-glow), 0 4px 14px rgba(70,35,52,.12);
	background: linear-gradient(180deg, color-mix(in srgb, var(--kriya-season, #FFCCCC) 24%, var(--pp-strong)), var(--pp-strong));
}
.kriya-parampara .pp-living .pp-role { color: var(--pp-accent); }
/* Quelle-Punkt (Babaji): als Pseudo-Elemente DIREKT an der Babaji-Karte.
   Wichtig: KEIN leeres Extra-Element verwenden – ClubDesk entfernt leere Tags
   (z.B. <span></span>) beim Einfügen. Die Karte trägt Text und bleibt erhalten. */
.kriya-parampara .pp-source { position: relative; margin-top: 30px; }
.kriya-parampara .pp-source::before {   /* Ring */
	content: ""; position: absolute; left: 50%; top: -30px; width: 22px; height: 22px; margin-left: -11px;
	border-radius: 50%; border: 1.5px solid var(--pp-accent); opacity: .6;
}
.kriya-parampara .pp-source::after {    /* leuchtender Punkt */
	content: ""; position: absolute; left: 50%; top: -24px; width: 10px; height: 10px; margin-left: -5px;
	border-radius: 50%; background: var(--pp-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kriya-season, #FFCCCC) 40%, transparent), 0 0 14px 3px var(--pp-glow);
}
/* weitere autorisierte Lehrer: per Flexbox zentriert (gegen text-align-Override) */
.kriya-parampara .pp-aside {
	display: flex; flex-direction: column; align-items: center;
	margin-top: .1rem; max-width: 94%;
}
.kriya-parampara .pp-aside__lbl,
.kriya-parampara .pp-present__lbl {
	font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--pp-soft); font-weight: 700; text-align: center !important;
}
.kriya-parampara .pp-aside__lbl { margin-bottom: .45rem; }
.kriya-parampara .pp-peers {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
}
.kriya-parampara .pp-peer {
	font-size: .8rem; font-weight: 400; color: var(--pp-soft);
	padding: .28rem .65rem; border-radius: 999px;
	background: var(--pp-card); border: 1px solid var(--pp-hair);
}
.kriya-parampara .pp-peer em { font-style: normal; opacity: .7; }
.kriya-parampara .pp-more { font-style: italic; }
/* Gegenwart: die von ihr autorisierten Lehrer:innen */
.kriya-parampara .pp-present {
	margin-top: .7rem;
	display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.kriya-parampara .pp-leaves {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.kriya-parampara .pp-leaf {
	background: var(--pp-strong); border: 1px solid rgba(255,255,255,.85);
	border-radius: 12px; padding: .5rem .95rem;
	text-align: center !important;
	/* gleicher Textstil wie pp-node (Span wird von ClubDesk NICHT auf 500 gezwungen,
	   deshalb hier ausdrücklich 500 – sonst wirkt der Name fett gegenüber den Meistern). */
	font-weight: 500; font-size: 1.02rem;
	box-shadow: 0 4px 14px rgba(70,35,52,.12);
}
@media (max-width: 520px) {
	.kriya-parampara { max-width: 100%; }
	.kriya-parampara .pp-node { font-size: 1.05rem; }
}

/* =================================================================== */
/* =====  14 · SPRACHUMSCHALTER  (DE / FR)                       ====== */
/* =====  Wird per JS (kriya-scripts.js) eingeblendet – nur auf         */
/* =====  Seiten, die eine Übersetzung haben (Eintrag in der Tabelle    */
/* =====  PAARE). Farben folgen --kriya-season, wie die übrige Ebene.   */
/* =================================================================== */
.kriya-lang {
	position: fixed;
	top: 22px;
	right: 24px;
	z-index: 10001;                 /* über der mobilen Kopfleiste (.im-header = 10000) */
	display: inline-flex;
	align-items: center;
	gap: .1rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	font-family: 'Andika', "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: .82rem;
	font-weight: 500;                /* Andika Regular (500 -> Regular) – wie der übrige Fliesstext */
	letter-spacing: .04em;
	background: rgba(255,255,255,.62);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 4px 14px rgba(70,35,52,.18);
}
/* aktive Sprache – gleicher Plum-Ton wie die Links im Inhalt */
.kriya-lang__cur {
	color: color-mix(in srgb, var(--kriya-season, #FFCCCC) 24%, #6d1b3f);
	padding: .08rem .3rem;
	font-weight: 700;               /* Andika Bold – aktive Sprache hervorheben */
}
/* inaktive Sprache = Klick-Link zur Übersetzung */
.kriya-lang__link {
	color: #8c7480;
	text-decoration: none !important;
	padding: .08rem .3rem;
	border-radius: 6px;
	transition: color .2s ease, background-color .2s ease;
}
.kriya-lang__link:hover,
.kriya-lang__link:focus-visible {
	color: color-mix(in srgb, var(--kriya-season, #FFCCCC) 22%, #4a1230) !important;
	background: color-mix(in srgb, var(--kriya-season, #FFCCCC) 30%, transparent);
	text-decoration: none !important;
}
.kriya-lang__link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--kriya-season, #FFCCCC) 40%, #6d1b3f);
	outline-offset: 2px;
}
.kriya-lang__sep { color: rgba(90,50,66,.35); }

/* Mobil: neben das Hamburger-Menü setzen, nicht darüber
   (Menü-Button steht rechts: 20px und ist 40px breit). */
@media (max-width: 1099px) {
	.kriya-lang { top: 24px; right: 72px; }
}
@media (prefers-reduced-motion: reduce) {
	.kriya-lang__link { transition: none; }
}

/* =================================================================== */
/* =====  15 · SEMINAR-/TERMINTABELLEN ALS KARTEN               ====== */
/* -------------------------------------------------------------------  */
/* =====  Verwandelt die 3-spaltigen Tabellen (Datum | Seminar |       */
/* =====  Ort) in gut lesbare Karten – EINE Karte pro Zeile.           */
/* =====  Die Klasse .kriya-cards wird per kriya-scripts.js gesetzt     */
/* =====  (nur Unterseiten, nur Tabellen mit >=3 Spalten – die         */
/* =====  2-spaltige Kontakt-Tabelle bleibt also unberührt). Die       */
/* =====  erste Zeile gilt als Kopfzeile und wird ausgeblendet.        */
/* =====  Rein visuell; Struktur/Inhalt in ClubDesk bleiben gleich.    */
/* =====  Farben folgen --kriya-season. Zum Deaktivieren: diesen Block  */
/* =====  UND den kriyaKarten()-Teil in kriya-scripts.js entfernen.    */
/* =================================================================== */
:root {
	/* Beschriftung hinter dem Ort (der Ort-Link führt zur Online-Anmeldung).
	   kriya-scripts.js setzt sie auf FR-Seiten automatisch auf " · Inscription". */
	--k-cards-cta:  " \00B7  Anmelden";  /* \00B7 = Mittelpunkt · als ASCII-Escape (encoding-sicher, verhindert "·"-Mojibake beim Upload). Doppeltes Leerzeichen: 1. beendet den Escape, 2. bleibt sichtbar. */
	/* Datumsfarbe: kräftiges, gut lesbares Pflaumen-Prune (tritt hervor),
	   dezent saisonal getönt. Vorher zu stark mit Dunkelgrau gemischt -> wirkte matt. */
	--k-cards-date: color-mix(in srgb, var(--kriya-season, #FFCCCC) 14%, #5c1533);
}

/* Tabelle -> senkrechte Kartenliste */
.main:not(.kriya-first) .cd-content table.kriya-cards {
	display: block !important;
	width: 100% !important;
	border: none !important;
	margin-top: 14px !important;
}
.main:not(.kriya-first) .cd-content table.kriya-cards > tbody {
	display: flex !important;
	flex-direction: column;
	gap: .8rem;
	width: 100%;
}
/* Kopfzeile (Datum | Seminar | Ort) in der Kartenansicht ausblenden */
.main:not(.kriya-first) .cd-content table.kriya-cards > tbody > tr.kriya-cards-head {
	display: none !important;
}

/* Eine Karte = eine Zeile (Milchglas + weicher Neomorphismus-Schatten) */
.main:not(.kriya-first) .cd-content table.kriya-cards > tbody > tr {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .4rem 1.2rem;
	background: rgba(255,255,255,.5);
	border: none !important;
	border-radius: 16px;
	padding: .85rem 1.1rem;
	/* Weicher, schwebender Schatten (Prune-getönt) statt Neomorphismus:
	   der frühere helle Highlight (-6px -6px … rgba(255,255,255,.5)) warf einen
	   weissen Schein oben-links NEBEN die Karte, der auf dem rosa Grund als
	   störende „Ecke“ sichtbar war. Jetzt nur ein nach unten gerichteter Schatten
	   + ein karteninterner Top-Glanz (inset – tritt nicht nach aussen). */
	box-shadow: 0 6px 18px rgba(60,20,35,.12), inset 0 1px 0 rgba(255,255,255,.45);
	transition: transform .3s var(--k-ease), box-shadow .3s var(--k-ease);
}
.main:not(.kriya-first) .cd-content table.kriya-cards > tbody > tr:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(60,20,35,.18), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ClubDesk-Zellenstil (Rahmen, feste Spaltenbreiten, Innenabstände) zurücksetzen */
.main:not(.kriya-first) .cd-content table.kriya-cards > tbody > tr > td {
	display: block !important;
	border: none !important;
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	vertical-align: middle;
	text-align: left !important;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td p {
	margin: 0 !important;
	padding: 0 !important;
}

/* 1) Datum als Pastille links */
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(1) {
	/* Kompakte Pastille, vertikal zentriert (NICHT auf volle Kartenhöhe gestreckt).
	   align-self + display brauchen !important, weil die allgemeine td-Regel oben
	   display:block !important setzt (sonst würde die Pastille gestreckt). */
	align-self: center !important;
	display: block !important;
	text-align: center !important;
	white-space: nowrap;               /* je Zeile; der Zeilenumbruch kommt vom <br> (kriya-scripts.js) */
	line-height: 1.25;
	font-weight: 700;
	color: var(--k-cards-date);
	/* Gleicher Chip-Look wie die Orts-Pille rechts: gleicher Grund + gleicher Schatten.
	   !important zwingend: die allgemeine Reset-Regel weiter oben
	   (…kriya-cards > tbody > tr > td) setzt background:transparent !important
	   und würde diesen weissen Grund sonst überschreiben (Pastille bliebe durchsichtig). */
	background: rgba(255,255,255,.55) !important;
	border-radius: 12px;
	padding: .5rem .8rem !important;
	min-width: 6rem;
	box-shadow: 0 4px 12px rgba(60,20,35,.10);
	font-variant-numeric: tabular-nums;
}

/* 2) Mitte: Titel (Link -> Details) + Leitung + evtl. Status */
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(2) p:first-child {
	font-size: 1.06rem;
	line-height: 1.22;
	font-weight: 600;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(2) p:first-child a {
	font-weight: 600 !important;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(2) p:first-child ~ p {
	font-size: .9rem;
	color: #6e4a58;
	margin-top: .12rem !important;
}

/* 3) Ort rechts als Pille; ist der Ort ein Link, führt er zur Online-Anmeldung
      -> dann hängt CSS " · Anmelden" (bzw. " · Inscription") an. */
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(3) {
	text-align: right !important;
	justify-self: end;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(3) p {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	line-height: 1.2;
	/* !important nötig, weil die Reset-Regel oben (td p) padding:0 !important setzt */
	padding: .5rem .85rem !important;   /* etwas mehr vertikale Luft */
	border-radius: 999px;
	background: rgba(255,255,255,.55);
	box-shadow: 0 4px 12px rgba(60,20,35,.10);
	font-weight: 600;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(3) p::before {
	content: "";
	width: .5rem;
	height: .5rem;
	flex: 0 0 auto;
	background: var(--k-link);
	border-radius: 50% 50% 50% 0;
	transform: rotate(45deg);
	opacity: .75;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(3) a {
	text-decoration: none !important;
}
.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(3) a::after {
	content: var(--k-cards-cta);
	opacity: .7;
	font-weight: 500;
}

/* Mobil: Karte einspaltig stapeln (Datum -> Titel -> Ort) */
@media (max-width: 768px) {
	.main:not(.kriya-first) .cd-content table.kriya-cards > tbody > tr {
		grid-template-columns: 1fr;
		gap: .5rem;
		padding: .9rem 1rem;
	}
	.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(1) {
		justify-self: start;
		min-width: 0;
		align-self: auto;
		padding: .4rem .7rem !important;
	}
	.main:not(.kriya-first) .cd-content table.kriya-cards td:nth-child(3) {
		text-align: left !important;
		justify-self: start;
	}
}


/* =========================================================================
   16 · KONTAKT-VERZEICHNIS ALS KARTEN   (Seite /kontakt bzw. /contact)
   -------------------------------------------------------------------------
   Aus der 2-spaltigen Tabelle (Region | Kontaktblock) wird ein Raster aus
   Adresskarten. Ausgezeichnet und strukturiert wird in kriya-scripts.js
   (kriyaKontaktKarten() -> Klassen .k-contact-cards sowie je Kontaktzeile
   .k-c-name / .k-c-addr / .k-c-tel / .k-c-mail). Nur Unterseiten
   (.main:not(.kriya-first)); hohe Spezifität, um die ClubDesk-Tabellen-
   regeln zu schlagen (analog zu Abschnitt 15).
   Zum Abschalten: diesen Block löschen UND den Aufruf in kriya-scripts.js.
   ========================================================================= */

.main:not(.kriya-first) .cd-content table.k-contact-cards {
	width: 100% !important;
	border: none !important;
	border-collapse: separate !important;
	background: transparent !important;
	margin: 1.4rem 0 !important;
}
/* Raster: EINE Karte pro Reihe – auf jeder Bildschirmbreite.
   Vorher zwei Karten pro Reihe am Desktop. Das ergab rund 320 px breite
   Karten, in denen die längeren Angaben mitten im Wort umbrachen
   ("marlies.braennhage@kriya." / "ch", "Telefon +41 (0)44 912" / "29 20")
   und die fünfte Karte allein in der letzten Reihe stand. Einspaltig ist
   ruhiger und bleibt lesbar; die Karte ist dann breiter als ihr Inhalt,
   was hier gewollt ist. */
.main:not(.kriya-first) .cd-content table.k-contact-cards > tbody {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}
/* Jede Tabellenzeile wird zu einer Karte */
.main:not(.kriya-first) .cd-content table.k-contact-cards > tbody > tr {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	background: rgba(255,255,255,.5);
	border-radius: 20px;
	padding: 1.15rem 1.25rem 1.25rem;
	/* Wie bei den Seminarkarten (Abschnitt 15) entneomorpht: der helle Highlight
	   (-6px -6px … rgba(255,255,255,…)) warf einen weissen Schein oben-links neben
	   die Karte. Jetzt nur weicher Prune-Schatten nach unten + inset Top-Glanz. */
	box-shadow: 0 8px 22px rgba(60,20,35,.14), inset 0 1px 0 rgba(255,255,255,.5);
	transition: transform .25s var(--k-ease, ease), box-shadow .25s var(--k-ease, ease);
}
@media (min-width: 769px) {
	.main:not(.kriya-first) .cd-content table.k-contact-cards > tbody > tr:hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 32px rgba(60,20,35,.20), inset 0 1px 0 rgba(255,255,255,.55);
	}
}
/* Zellen: ClubDesk-Rahmen/-Breiten/-Padding zurücksetzen */
.main:not(.kriya-first) .cd-content table.k-contact-cards > tbody > tr > td {
	display: block !important;
	border: none !important;
	background: transparent !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 !important;
	vertical-align: top;
}

/* Spalte 1: Region als Pastille mit Ort-Pin (SVG-Maske, in Akzentfarbe) */
.main:not(.kriya-first) .cd-content table.k-contact-cards td:nth-child(1) {
	display: inline-flex !important;
	align-items: center;
	gap: .4rem;
	max-width: 100%;
	font-weight: 700;
	color: var(--k-accent-strong);
	background: rgba(255,255,255,.58) !important;
	padding: .34rem .72rem !important;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(60,20,35,.10);
	margin-bottom: .85rem !important;
	line-height: 1.2;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards td:nth-child(1) strong {
	font-weight: 700;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards td:nth-child(1)::before {
	content: "";
	width: 15px; height: 15px;
	flex: 0 0 auto;
	background-color: var(--k-link);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Spalte 2: Kontaktblock (Name / Adresse / Telefon / E-Mail) */
.main:not(.kriya-first) .cd-content table.k-contact-cards td:nth-child(2) {
	width: 100% !important;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-name {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--k-accent-strong);
	margin-bottom: .12rem;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-addr {
	color: color-mix(in srgb, var(--k-accent-strong) 66%, transparent);
	font-size: .95rem;
	line-height: 1.4;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-tel,
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-mail {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	margin-top: .32rem;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-tel {
	color: color-mix(in srgb, var(--k-accent-strong) 82%, transparent);
}
/* etwas Abstand zwischen Adressblock und Telefon/E-Mail */
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-name + .k-c-tel,
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-name + .k-c-mail,
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-addr + .k-c-tel {
	margin-top: .6rem;
}
/* E-Mail-Zeile einzeilig halten: die eigentliche Verkleinerung passiert auf
   .k-c-mail a (s. unten). overflow-wrap dort ist nur ein Sicherheitsnetz für
   aussergewöhnlich lange Adressen. */
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-mail {
	align-items: center;
	line-height: 1.35;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-tel::before,
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-mail::before {
	content: "";
	width: 15px; height: 15px;
	flex: 0 0 auto;
	background-color: var(--k-link);
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain;   mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-tel::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-mail a {
	color: var(--k-link);
	/* ClubDesk erzwingt die Link-Schriftgrösse mit !important; hier bewusst
	   kleiner überschreiben, damit auch lange Adressen (…@kriya.ch) einzeilig
	   bleiben statt umzubrechen. */
	font-size: .9rem !important;
	text-decoration: none !important;
	border-bottom: 1px solid color-mix(in srgb, var(--k-link) 35%, transparent);
	word-break: break-word;
	overflow-wrap: anywhere;
}
.main:not(.kriya-first) .cd-content table.k-contact-cards .k-c-mail a:hover {
	color: var(--k-link-hover);
	border-bottom-color: var(--k-link);
}

/* (Der frühere Mobil-Block „eine Karte pro Reihe" ist entfallen: das Raster
   ist jetzt schon in der Grundregel einspaltig, die Ausnahme wäre wirkungslos.) */

/* =========================================================================
   17 · E-MAIL-SCHUTZ – Darstellung des Platzhalters
   -------------------------------------------------------------------------
   Statt eines mailto:-Links steht in ClubDesk nur

       <span class="k-mail">…codierte Nutzlast…</span>

   damit im ausgelieferten Quelltext kein "@" auftaucht (Spam-Ernte).
   kriya-scripts.js ERSETZT diesen Platzhalter beim Laden durch einen echten
   Link – die Regeln hier greifen also nur in den Millisekunden davor und
   dauerhaft bei abgeschaltetem JavaScript.

   Zweck: (1) die Nutzlast darf nie sichtbar aufblitzen, (2) ohne JavaScript
   soll dort ein verständlicher Hinweis stehen statt einer leeren Stelle.
   Telefon und Postadresse bleiben in jedem Fall lesbar.
   ========================================================================= */
.k-mail {
	/* Nutzlast unsichtbar und nicht markierbar – aber im Fluss, damit der
	   Hinweis unten an derselben Stelle sitzt wie später der Link. */
	font-size: 0 !important;
	line-height: inherit;
	color: transparent;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}
.k-mail::before {
	/* Notdarstellung ohne JavaScript. Deutsch als Standard. */
	content: "E-Mail: bitte JavaScript aktivieren";
	font-size: .9rem;
	color: inherit;
	opacity: .75;
	-webkit-user-select: text;
	   -moz-user-select: text;
	        user-select: text;
}
/* Französische Seiten: die Kontakt-Tabelle trägt dort lang="fr". */
.k-mail:lang(fr)::before {
	content: "E-mail : veuillez activer JavaScript";
}
/* Der von kriya-scripts.js erzeugte Link. Innerhalb der Kontaktkarten
   gestaltet ihn bereits Abschnitt 16 (.k-c-mail a); hier nur das Nötige,
   falls ein Platzhalter einmal ausserhalb einer Tabelle steht. */
.k-mail-link {
	overflow-wrap: anywhere;
}

/* =================================================================== */
/* =====  18 · HORIZONTALE NAVIGATION (Desktop ab 1100px)        ====== */
/* -------------------------------------------------------------------  */
/* =====  Zwei Zeilen: oben eine schmale Dienstzeile (Kriya Charity,   */
/* =====  Projekt Seminarzentrum, Intern, DE·FR-Pille), darunter das   */
/* =====  Logo links und die Hauptpunkte rechts.                       */
/* =====  769-1099px: Hamburger-Overlay wie auf dem Handy.             */
/* =====  Das Markup (page.mustache) bleibt unverändert; die Klassen   */
/* =====  k-nav-* setzt kriyaNavAufbereiten() in kriya-scripts.js.     */
/* =====  Zum Deaktivieren: diesen Block löschen UND Abschnitt 1 aus   */
/* =====  archive/v5/page.css zurückholen (altes Seitenmenü).          */
/* =================================================================== */
:root {
	--k-nav-util-h: 34px;			/* Höhe der Dienstzeile */
	--k-nav-h: 64px;				/* Höhe der Hauptzeile im Ruhezustand */
	--k-nav-h-akt: var(--k-nav-h);	/* tatsächliche Höhe – schrumpft beim Scrollen */
	--k-nav-total: calc(var(--k-nav-util-h) + var(--k-nav-h));	/* Platzhalter für .main: KONSTANT, damit beim Scrollen nichts springt */
	--k-nav-max: 1100px;			/* Inhaltsspalte – gleich wie .main{max-width} */
	--k-nav-pad: 20px;
	--k-nav-logo-w: 124px;			/* reservierte Breite des Logos */
	--k-nav-lang-w: 92px;			/* reservierter Platz für die DE·FR-Pille */
	--k-nav-glas: linear-gradient(180deg, rgba(16,24,30,.60), rgba(9,15,20,.46));	/* Farbverlauf des früheren Abschnitts 1 */
	--k-nav-rand: 1px solid rgba(255,255,255,.12);
	/* Inhaltskarte ab 1100px – EINE Stelle; die Fusszeile (18o) folgt von selbst.
	   Textspalte = Breite − 2 × Innenabstand. Gemessen 2026-09-19: 648px sind
	   76–80 Zeichen je Zeile (12pt, 1px Sperrung) = obere Grenze guter Lesbarkeit.
	   Also nie die Breite allein erhöhen, sondern den Innenabstand mitziehen. */
	--k-inhalt-b: 880px;
	--k-inhalt-pad: 100px;
}

/* ---- 18a. Kurz-/Langtitel: JS legt beide Texte an, CSS schaltet um ---- */
.cd-fullpagemenu .k-nav-kurz { display: none !important; }

/* ---- 18b. Unter 1100px: Hamburger-Overlay wie bisher ---- */
@media (max-width: 1099px) {
	/* Das Overlay füllt den Bildschirm jetzt per CSS; früher schrieb calcHeight() die Höhe inline. */
	/* left/right ausdrücklich: zwischen 769 und 1099px ist der body zentriert
	   (margin:0 auto) – ohne left erbt das fixierte Overlay dessen Versatz und
	   ragt rechts aus dem Bildschirm (gemessen bei 1000px: 66 -> 1055 statt 0 -> 989). */
	.cd-fullpagemenu {
		left: 0;
		right: 0;
		width: auto;
		bottom: 0;
		height: auto !important;
		box-sizing: border-box;
	}
	/* Zweig der aktuellen Seite aufgeklappt – ersetzt die beiden jQuery-.show().
	   cd-menu-active deckt den Fall ab, dass die aktuelle Seite SELBST ein
	   Elternpunkt ist, cd-menu-selected den Fall einer Unterseite. */
	.cd-fullpagemenu .cd-menu-item.cd-menu-selected + .cd-menu-level-2,
	.cd-fullpagemenu .cd-menu-item.cd-menu-active + .cd-menu-level-2 {
		display: block;
	}
}
/* Schutz gegen alte, noch im Cache liegende calcHeight()-Inline-Höhen */
.main { height: auto !important; }

/* 769-1099px: Inhalt unter die feste Kopfleiste (.im-header, 80px) schieben.
   Ohne diese Regel gälte Abschnitt 3 (margin:22px 0 22px 22px) und der
   Kartenanfang läge unter der Leiste. */
@media (min-width: 769px) and (max-width: 1099px) {
	.main:not(.kriya-first) .cd-content { margin: 102px auto 22px !important; }
	.kriya-first .cd-content { margin: 80px auto 0 !important; }
}

/* Startseite: die 182px Abstand über dem Zitat galten der 180px hohen
   Logo-Platte des Seitenmenüs – die gibt es nicht mehr. Der Lichtschein
   sitzt unverändert 32px ÜBER dem Zitat; wird der eine Wert geändert,
   muss der andere um denselben Betrag mitgehen. */
@media (min-width: 769px) {
	.kriya-quote { margin-top: 84px !important; }
	.kriya-first .cd-content::after { top: 52px; }
}

@media (min-width: 1100px) {

	/* ---- 18c. Seitenraster ohne Seitenleiste ---- */
	html { scroll-padding-top: calc(var(--k-nav-total) + 14px); }
	/* body ist ein Flex-Element mit margin:0 auto und wäre sonst nur so breit
	   wie sein Inhalt; 100% macht die Zentrierung von .main berechenbar. */
	body { width: 100%; }
	.main {
		margin: var(--k-nav-total) auto 0 !important;	/* schlägt margin-left:230px */
		width: 100%;
		min-height: calc(100vh - var(--k-nav-total));
	}
	/* Karte mittig statt links versetzt (ersetzt margin:22px 0 22px 22px, Abschnitt 3) */
	.main:not(.kriya-first) .cd-content { margin: 22px auto !important; }
	.kriya-first .cd-content { margin: 22px auto 0 !important; }
	/* Kartenbreite und Innenabstand aus den Variablen oben (schlägt width:768px !important) */
	.cd-content { width: var(--k-inhalt-b) !important; max-width: var(--k-inhalt-b); }
	.cd-content .cd-section { padding: 0 var(--k-inhalt-pad); }

	/* ---- 18d. Die Leiste: fixiert, volle Breite ----
	   Das Milchglas sitzt auf ::before und NICHT auf .cd-fullpagemenu selbst:
	   ein Element mit backdrop-filter ist "Backdrop-Root", ein Panel DARIN
	   hätte nichts mehr weichzuzeichnen. */
	.cd-fullpagemenu {
		position: fixed;
		top: 0; left: 0; right: 0;
		width: auto;					/* schlägt width:230px */
		height: auto !important;
		padding: 0;						/* schlägt padding-top/-bottom:50px */
		margin: 0;
		z-index: 1000;
		background: none !important;	/* schlägt background-color:rgba(0,0,0,.5) */
		transition: none;				/* schlägt transition:all .5s */
		visibility: visible;
		opacity: 1;
	}
	.cd-fullpagemenu::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--k-nav-glas);
		-webkit-backdrop-filter: blur(11px) saturate(1.15);
		backdrop-filter: blur(11px) saturate(1.15);
		border-bottom: var(--k-nav-rand);
		box-shadow: 0 10px 34px rgba(0,0,0,.28);
	}
	.cd-fullpagemenu .cd-menu-level-1 {
		max-width: var(--k-nav-max);
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 var(--k-nav-pad) 0 calc(var(--k-nav-pad) + var(--k-nav-logo-w) + 24px);
	}

	/* Logo: eigenes fixiertes Element über beide Zeilen, linksbündig zur Spalte */
	.kriya-header {
		position: fixed;
		top: 0;
		left: max(var(--k-nav-pad), calc(50% - var(--k-nav-max) / 2 + var(--k-nav-pad)));
		z-index: 1001;					/* über der Leiste (1000) */
		width: var(--k-nav-logo-w);		/* schlägt width:230px */
		height: calc(var(--k-nav-util-h) + var(--k-nav-h-akt));	/* schlägt height:180px */
		background: none !important;	/* schlägt background-color:rgba(0,0,0,.5) */
		border: 0;
		display: flex;
		align-items: center;
		transition: height .3s var(--k-ease);
	}
	.kriya-header > a { display: flex; align-items: center; }
	/* Feste Höhe statt max-height in %: das <a> dazwischen hat keine definierte
	   Höhe, ein Prozentwert würde verworfen. object-fit schützt vor Verzerrung,
	   falls das Logo breiter als --k-nav-logo-w ausfällt. */
	.kriya-header img {
		position: static;				/* schlägt position:absolute; right:0 */
		height: calc(var(--k-nav-util-h) + var(--k-nav-h-akt) - 16px);	/* schlägt height:165px */
		width: auto;
		max-width: 100%;
		object-fit: contain;
		transition: height .3s var(--k-ease);
	}

	/* ---- 18e. Zwei Zeilen: flex-wrap + order + Umbruch-Pseudoelement ---- */
	.cd-fullpagemenu .cd-menu-level-1 > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		margin: 0;						/* schlägt margin:0 10px */
		padding: 0;
		text-align: left;				/* schlägt text-align:right */
	}
	/* volle Breite = erzwungener Zeilenumbruch zwischen Dienst- und Hauptzeile */
	.cd-fullpagemenu .cd-menu-level-1 > ul::before {
		content: "";
		order: -1;
		flex: 0 0 100%;
		height: 0;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li {
		position: relative;				/* Bezugspunkt der Panels */
		display: flex;
		align-items: center;
		height: var(--k-nav-h-akt);
		margin: 0 !important;			/* schlägt li:last-child{margin-top:60px} */
		white-space: nowrap;
		transition: height .3s var(--k-ease);
	}
	/* Dienstzeile – primär über die JS-Klasse */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-util {
		order: -2;
		height: var(--k-nav-util-h);
	}
	/* … und als Rückfall ohne JS. NICHT mit der Regel darüber zusammenfassen:
	   ein Browser ohne :has() würde sonst die ganze Regel verwerfen. */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:has(> .cd-menu-item > a[href^="/kriya_charity"]),
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:has(> .cd-menu-item > a[href^="/seminarzentrum"]) {
		order: -2;
		height: var(--k-nav-util-h);
	}
	/* "Intern" ist immer der letzte Punkt – eigene Regel, damit sie auch ohne
	   :has() gilt. */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:last-child {
		order: -2;
		height: var(--k-nav-util-h);
	}
	/* Platz für die Sprach-Pille, nur am Ende der Dienstzeile */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-intern,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:last-child {
		margin-right: var(--k-nav-lang-w) !important;
	}

	/* ---- 18f. Schrift und Klickflächen ---- */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item {
		margin: 0;						/* schlägt Abschnitt 2: margin:2px 6px */
		border-radius: 10px;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item > a {
		display: block;					/* schlägt display:inline-block */
		margin: 0;						/* schlägt margin:10px 5px */
		padding: 8px 14px;
		font-size: 15px;				/* schlägt font-size:14pt */
		line-height: 1.2;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-util > .cd-menu-item > a {
		padding: 4px 10px;
		font-size: 12.5px;
		letter-spacing: .04em;
		opacity: .88;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-intern > .cd-menu-item {
		display: flex;
		align-items: center;
		gap: 2px;
		padding-left: 8px;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-intern .fas { font-size: .78em; }
	/* Kurztitel zeigen, Langtitel ausblenden – nur in der Leiste, nur Ebene 1.
	   !important schlägt auch das inline style="display:none" des Kurz-Spans. */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item > a .k-nav-kurz { display: inline !important; }
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item > a.k-nav-hat-kurz .k-nav-lang { display: none; }

	/* Pfeil bei Punkten mit Untermenü (muss NACH der k-nav-util-Regel stehen,
	   sonst überschreibt deren padding-Kurzschreibweise das padding-right) */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-hat-kinder > .cd-menu-item > a { padding-right: 26px; }
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-hat-kinder > .cd-menu-item::after {
		content: "";
		position: absolute;
		right: 11px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -5px;
		border: solid currentColor;
		border-width: 0 1.5px 1.5px 0;
		color: rgba(255,255,255,.7);
		transform: rotate(45deg);
		pointer-events: none;
		transition: transform .25s var(--k-ease), margin-top .25s var(--k-ease);
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-hat-kinder:hover > .cd-menu-item::after,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-hat-kinder:focus-within > .cd-menu-item::after,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-hat-kinder.k-nav-auf > .cd-menu-item::after {
		transform: rotate(225deg);
		margin-top: -1px;
	}

	/* ---- 18g. Aufklapp-Panels ----
	   visibility ist der massgebende Zustand: der Notausschalter für
	   "reduzierte Bewegung" setzt nur transition-duration auf .001ms, eine
	   reine Deckkraft-Steuerung bliebe dann klickbar. */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-level-2 {
		display: block !important;		/* schlägt display:none UND altes inline .show() */
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 240px;
		max-width: 320px;
		padding-top: 8px;				/* unsichtbare Brücke: keine tote Zone zum Panel */
		white-space: normal;
		visibility: hidden;
		transition: visibility 0s linear .32s;
	}
	/* Die beiden Punkte der Dienstzeile haben ebenfalls Untermenüs. Ihr Panel
	   gehört unter die GANZE Leiste, nicht mitten in die Hauptzeile; das hohe
	   Polster darüber ist die durchgehende Hover-Brücke. */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-util > .cd-menu-level-2 {
		padding-top: calc(var(--k-nav-h-akt) + 8px);
	}
	/* hintere Punkte und Dienstzeile: Panel rechtsbündig, damit es im Bild bleibt */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-rechts > .cd-menu-level-2,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-util > .cd-menu-level-2 {
		left: auto;
		right: 0;
	}
	/* Glas UND Deckkraft auf DEMSELBEN Element (sonst zeichnet das Panel nichts weich) */
	.cd-fullpagemenu .cd-menu-level-2 > ul {
		margin: 0;						/* schlägt margin:0 10px */
		padding: 8px;
		text-align: left;				/* schlägt text-align:right */
		background: var(--k-nav-glas);
		-webkit-backdrop-filter: blur(11px) saturate(1.15);
		backdrop-filter: blur(11px) saturate(1.15);
		border: var(--k-nav-rand);
		border-radius: 14px;
		box-shadow: 0 18px 40px rgba(0,0,0,.34);
		max-height: calc(100vh - var(--k-nav-total) - 24px);
		overflow-y: auto;
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity .2s var(--k-ease) .12s, transform .2s var(--k-ease) .12s;
	}
	/* offen: Maus, Tastatur-Fokus, Tipp-Klasse */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:hover > .cd-menu-level-2,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:focus-within > .cd-menu-level-2,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-auf > .cd-menu-level-2 {
		visibility: visible;
		transition-delay: 0s;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:hover > .cd-menu-level-2 > ul,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li:focus-within > .cd-menu-level-2 > ul,
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-auf > .cd-menu-level-2 > ul {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
	/* nie zwei Panels: das Fokus-Panel weicht, sobald die Maus auf einem anderen Punkt steht */
	.cd-fullpagemenu .cd-menu-level-1 > ul:hover > li:focus-within:not(:hover) > .cd-menu-level-2 {
		visibility: hidden;
	}
	/* Escape – kriyaNavVerhalten() setzt k-nav-zu */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li.k-nav-zu > .cd-menu-level-2 {
		visibility: hidden !important;
	}

	/* Panel-Einträge */
	.cd-fullpagemenu .cd-menu-level-2 > ul > li { margin: 0 !important; }
	.cd-fullpagemenu .cd-menu-level-2 .cd-menu-item { margin: 1px 0; }
	.cd-fullpagemenu .cd-menu-level-2 .cd-menu-item > a {
		display: block;
		margin: 0;
		padding: 7px 12px;
		font-size: 14px;
		line-height: 1.25;
	}
	/* Ebene 3 (nur unter "Über Kriya Yoga" -> Parampara): eingerückte Unterliste.
	   Die Deko sitzt am <li>, damit die von ClubDesk IMMER ausgegebenen LEEREN
	   level-3-Hüllen ohne :has() und ohne JS null Höhe behalten. */
	.cd-fullpagemenu .cd-menu-level-3 > ul {
		margin: 0;
		padding: 0;
		text-align: left;
	}
	.cd-fullpagemenu .cd-menu-level-3 li {
		margin-left: 16px;
		padding-left: 6px;
		border-left: 1px solid rgba(255,255,255,.16);
	}
	.cd-fullpagemenu .cd-menu-level-3 .cd-menu-item > a {
		text-transform: none;			/* schlägt text-transform:uppercase */
		font-size: 13px;				/* schlägt font-size:9pt */
		font-weight: 400;
		letter-spacing: .02em;
		padding: 5px 10px;
	}

	/* aktuelle Seite (active) kräftiger als der ganze Zweig (selected) */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item.cd-menu-selected {
		background: rgba(255,255,255,.10) !important;
		box-shadow: none;
	}
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item.cd-menu-active {
		background: rgba(255,255,255,.20) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px var(--k-accent-glow);
	}
	.cd-fullpagemenu .cd-menu-level-2 .cd-menu-item.cd-menu-selected {
		background: rgba(255,255,255,.09) !important;
		box-shadow: none;
	}
	.cd-fullpagemenu .cd-menu-level-2 .cd-menu-item.cd-menu-active {
		background: rgba(255,255,255,.20) !important;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px var(--k-accent-glow);
	}
	.cd-fullpagemenu .cd-menu-item.cd-menu-active > a { font-weight: 700; }
	/* Der Hover muss NACH den beiden Regeln darüber stehen: er hat dieselbe
	   Spezifität, soll aber auch auf dem aktuellen Punkt sichtbar bleiben. */
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item:hover {
		background: rgba(255,255,255,.26) !important;
	}

	/* ---- 18h. Sprach-Pille in die Dienstzeile ----
	   Mittig zur Dienstzeile, ohne die Höhe der Pille zu kennen. */
	.kriya-lang {
		top: calc(var(--k-nav-util-h) / 2);
		right: max(var(--k-nav-pad), calc(50% - var(--k-nav-max) / 2 + var(--k-nav-pad)));
		transform: translateY(-50%);
		padding: .12rem .5rem;
		font-size: .76rem;
		box-shadow: none;
	}

	/* ---- 18i. Beim Scrollen schrumpfen Hauptzeile und Logo (page.js setzt
	   body.cd-scroll). --k-nav-total bleibt unverändert, deshalb springt der
	   Inhalt nicht mit. ---- */
	body.cd-scroll { --k-nav-h-akt: 50px; }
}

/* ---- 18j. 1100-1279px: etwas kleinere Hauptzeile, damit längere (z.B.
   französische) Titel nicht in eine dritte Zeile umbrechen. ---- */
@media (min-width: 1100px) and (max-width: 1279px) {
	.cd-fullpagemenu .cd-menu-level-1 > ul > li > .cd-menu-item > a {
		padding: 8px 11px;
		font-size: 14px;
	}
}

/* ---- 18k. FR-Menü: nur deutschsprachige Ziele dezent kennzeichnen (alle Breiten) ---- */
.cd-fullpagemenu a.k-nav-nur-de::after {
	content: " (DE)";
	font-size: .7em;
	letter-spacing: .05em;
	opacity: .6;
}

/* ---- 18n. Akkordeon im Hamburger-Overlay (unter 1100px) ----
   Früher zeigte das Overlay nur die Unterseiten des AKTUELLEN Zweigs; um die
   Unterseiten von „Kriya Yoga“ zu sehen, musste man erst dorthin wechseln und
   das Menü erneut öffnen. Jetzt trägt jeder Punkt mit Untermenü einen Pfeil-
   Knopf (kriyaNavAufbereiten() fügt ihn ein): Tipp auf den Pfeil klappt auf/zu,
   Tipp auf den Text führt wie bisher zur Seite. Der Zweig der aktuellen Seite
   ist beim Öffnen schon aufgeklappt. In der Leiste ab 1100px bleibt der Knopf
   unsichtbar – dort öffnen Hover und Fokus. */
.cd-fullpagemenu .k-nav-klapp { display: none; }
@media (max-width: 1099px) {
	.cd-fullpagemenu .k-nav-klapp {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background .25s var(--k-ease);
	}
	.cd-fullpagemenu .k-nav-klapp::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 8px;
		height: 8px;
		margin: -7px 0 0 -5px;
		border: solid currentColor;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
		transition: transform .25s var(--k-ease), margin-top .25s var(--k-ease);
	}
	.cd-fullpagemenu li.k-nav-offen > .cd-menu-item > .k-nav-klapp::before {
		transform: rotate(225deg);
		margin-top: -2px;
	}
	.cd-fullpagemenu .k-nav-klapp:active { background: rgba(255,255,255,.16); }
	.cd-fullpagemenu .k-nav-klapp:focus { outline: none; }
	.cd-fullpagemenu .k-nav-klapp:focus-visible {
		box-shadow: 0 0 0 2px rgba(255,255,255,.42), 0 0 16px var(--k-accent-glow);
	}
	/* Sobald das JS läuft (k-nav-klappbar), entscheidet ALLEIN k-nav-offen – sonst
	   liesse sich der aktuelle Zweig nie zuklappen. Ohne JS gilt weiter die Regel
	   aus 18b (cd-menu-selected/-active). Spezifität (0,4,1) schlägt deren (0,4,0). */
	.cd-fullpagemenu li.k-nav-klappbar > .cd-menu-item + .cd-menu-level-2 { display: none; }
	.cd-fullpagemenu li.k-nav-klappbar.k-nav-offen > .cd-menu-item + .cd-menu-level-2 { display: block; }
}

/* ---- 18l. Hamburger: sichtbarer Tastaturfokus ---- */
.cd-fullpagemenu-button:focus-visible {
	outline: 2px solid rgba(255,255,255,.85);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ---- 18m. Reduzierte Bewegung: auch die Schliess-Verzögerung entfällt
   (der Notausschalter in Abschnitt 10 setzt nur transition-duration). ---- */
@media (prefers-reduced-motion: reduce) {
	.cd-fullpagemenu .cd-menu-level-2,
	.cd-fullpagemenu .cd-menu-level-2 > ul {
		transition-delay: 0s !important;
	}
}

/* ---- 18o. Fusszeile (.k-fuss, Block „Body-Ende“ in ClubDesk) mittig ----
   Der eingefügte Block trug noch margin-left:230px aus der Zeit des
   Seitenmenüs und sass dadurch links neben der Karte. Er steht NACH page.css
   im Dokument, deshalb hier !important. Die Kanten liegen deckungsgleich auf
   .cd-content (gemessen 800–1920px). Der Deckel max-width bleibt Pflicht:
   body ist fit-content, eine ungedeckelte Adresszeile bläst ihn auf. */
@media (min-width: 769px) {
	.k-fuss {
		margin: 14px auto 0 !important;
		width: 100% !important;
		max-width: 768px !important;	/* 769–1099px: Karte ist dort 768px breit */
		padding: 0 0 30px !important;
	}
	.k-fuss .k-fuss__karte { max-width: none !important; }
}
@media (min-width: 1100px) {
	.k-fuss { max-width: var(--k-inhalt-b, 768px) !important; }
}