body {
    margin: 0;
    font-family: "Titillium", "Helvetica Neue", Arial, Tahoma, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    color: #212529; /* check ...*/
    text-align: left;
}
.svg-symbols {
	display:none;
}	
* {
	box-sizing: border-box;
}
/* ------------- anchor to detail page -------------  */
a{
	text-decoration: none;
	color: #000079;  /*inherit;*/
}
footer a,
.headline-subtext a {
	color: inherit;
}

.detail-anchor{
	transition: transform 0.3s ease;
}
a:not(.inline-link):not(:has(.home-scale)):hover,
.detail-anchor:hover,
.detail-anchor:hover,
.inline-link span:hover
 {
	text-decoration: underline;
	cursor: pointer;
}
a:hover > .home-scale {
	transform: scale(calc(var(--Logo-Scale) * 1.05)   );
	transform-origin: top left;
}
img.detail-anchor:hover{
	transform: scale(1.3);
}
.inline-link::before{
	content: '\25BA'; /*\00A0';*/
	/*padding-right: 0.3rem;*/
}
.button-link{
	color: unset;
	border: solid 0.1rem black;
	padding: 0.3rem 2rem;
	border-radius: 9999px;
    cursor: pointer;
	width: fit-content;
}
.button-link:hover{
	color:var(--text-hl-color);
	border-color: var(--text-hl-color);
	text-decoration: none!important;
}
.cut-top-edges {
	clip-path: polygon(10% 0, 90% 0, 100% 7%, 100% 100%, 0 100%, 0 7%);
}
.image-container { /* ... review if still needed*/
	overflow: hidden;
}
 .info-grid {
	display: grid;
    grid-template-columns: fit-content(0) 1fr;
    gap: 0.5rem 1rem;
}
 .info-grid  > :nth-child(2n + 1){
	 white-space: nowrap;
 }
/* -------------------------------------------------  */

:root {
	 --headline-color: hsl(355deg 75% 34% );    /*   #000079;    dark blue  color- option*/
	 --text-hl-color:  #000079;                   /*  dark red */
	
	/*--headline-color: black;                     #000079;    dark blue  color- option*/
	/* --text-hl-color:  hsl(355deg 75% 34% );     dark red */
	/* -------------------------------------------------------------------------------------
		* ScrollHeaderBackground, ScrollHeaderBorder 
		  - both values are calculated by js pageScroll()
		  - ScrollHeaderBackground = white and ScrollHeaderBorder = solid 
		    if hero image is scrolled away, the header should become intransparent
		  - ScrollHeaderBackground = transparent and ScrollHeaderBorder = none
			if hero image should be visible underneath the header
	------------------------------------------------------------------------------------- */
	--ScrollHeaderBorder: solid;                    /* changed in js-function pageScroll */
	--ScrollHeaderBackground: white;                /* changed in js-function pageScroll */
	
	/* -------------------------------------------------------------------------------------
		* Logo-Scale   		  - The size of the Logo (.home) element is the product of
								ScrollHeightFactor and LogoBaseHeight
								The value is used to scale the the Logo and calculate its height and width
		* ScrollHeightFactor  - the value is 1 by default (the page is scroll to the top = window.scrollY<10)
								the value is calculated by js pageScroll() in the range from 1 to 0.76
		* LogoBaseHeight      - with a value starting at 1 for wide screens to 0.5 for screens with width less 430
	------------------------------------------------------------------------------------- */
	--ScrollHeightFactor: 1;                     
	--LogoBaseHeight: 1;                     
	--Logo-Scale: calc(var(--LogoBaseHeight) * var(--ScrollHeightFactor));
	
	/* -------------------------------------------------------------------------------------
		* ScrollPaddingTop	  - tighting the header depending on scrollY
								values between 1.5rem (on top of the page) to 0.3rem  
	------------------------------------------------------------------------------------- */
	--ScrollPaddingTop: calc((5rem * var(--LogoBaseHeight)) - 4.5rem); 
	
	/* -------------------------------------------------------------------------------------
		* Headline-Size depends only on the width of the screen 
	------------------------------------------------------------------------------------- */
	--HeadlineSize: calc(1rem +  ( 1.5rem * var(--LogoBaseHeight))); 
	
	--cardsrow-width: 1050px;
}
@media(min-width: 100px) {
	:root {
		--LogoBaseHeight: 0.5;
	}
}
@media(min-width: 430px) {
	:root {
		--LogoBaseHeight: 0.6;
	}
}
@media(min-width: 500px) {
	:root {
		--LogoBaseHeight: 0.7;
	}
}
@media(min-width: 550px) {
	:root{
		--LogoBaseHeight: 0.8;
	}
}
@media(min-width: 620px) {
	:root {
		--LogoBaseHeight: 0.9;
	}
}
@media(min-width: 670px) {
	:root {
		--LogoBaseHeight: 1;
	}
}

header{
	position: fixed;
	top: 0;
	z-index: 10;
	background: var(--ScrollHeaderBackground);
	width: 100%;
	/*
	background - var(--ScrollHeaderBackground) - set in js
	- if hero image is visible: white 
	- else - linear-gradient(to bottom
					rgba(255, 255, 255, 1) 0%,   * fully opaque *
					rgba(255, 255, 255, 0) 100%  * fades out *
					)
	*/
}



.header {
	justify-self: center;
	font-weight:bold;
	line-height: 1; 
	
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
	max-width: 1050px;
	
	border-bottom-width: 1px ;
	border-bottom-color: black;
	border-bottom-style: var(--ScrollHeaderBorder);
	padding: 0.5rem; /* ... padding zusammenfassen */
	padding-top: var(--ScrollPaddingTop); 
	padding-bottom: 0.5rem;
	margin: 0 auto 1rem auto;
}
body:has(.cards-row)  .header { 
	max-width: var(--cardsrow-width);
}

.home {
	color: var(--headline-color);
	flex: 0 0 auto;
	height: calc(10rem * var(--Logo-Scale));         /* calculate height and width, since scale alone doesn't   */
	width: calc(var(--Logo-Width)* var(--Logo-Scale));
}
.home-scale{
	transition: transform 0.3s ease;
	transform:  scale(var(--Logo-Scale));
	transform-origin: top left;
}
.home-title {
    background: url(../images/rsz-logo.svg) left;
    background-size: contain;
    background-repeat: no-repeat;
}
.home-title{
	display: flex;
    flex-direction: column;
	padding-left:  2.8rem;
	padding-bottom: 0.5rem;	
}
.home-title1,.home-title2 {
	flex: 0 0 auto;
	white-space: nowrap;
}
.home-title1 {
	padding-top:3.4rem;
	font-size:  1.57rem;
}
.home-title2 {
	padding-top: 1.7rem;
	font-size: 3.3rem;
}

.menu {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;           
	flex-direction: row;
	gap: 1rem;
	overflow: hidden;
	justify-content: flex-end;
	align-items: baseline;
	padding-right: 1rem;
	font-size: 1.5rem; 
}
.menu > div {
	min-width: 0;
	flex: 0 0 auto;
}

#menu-open-button,#menu-close-button {
	font-size: 1.5rem;
	font-weight: bold;
	cursor:pointer;
	margin: 0; /*unset broweser defaults for buttons */
	background-color: transparent;
    padding-block-start: 0;    
	padding-block: 0px;
	padding-inline: 0px;
	border: none;
    color: unset;
	height: fit-content;
}
#menu-close-button{
	position: fixed;
}
#menu-popup[open] {
	margin: unset;
	top:0;
	height: 100%;
	border: none;
	padding: 5rem 1rem 3rem 1rem;
	display: flex;
    flex-direction: column;
	gap: 2.5rem;
}

#menu-popup[open] * {
	white-space: nowrap;
}
#menu-popup[open] > div {
	display: flex;
    flex-direction: column;
	gap: 0.5rem;
}

.hero {
    background: url(../images/RSH-entrance.jpg) center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 70%;
    height: 500px;
	max-height: 32vh;
	max-width: 1050px;
	margin: auto;
	position: relative;
	z-index:-10;
	clip-path: polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 9.5vh), 65% calc(100% - 5.5vh), 38% calc(100% - 4.5vh));
	margin-top: 0rem; /* to be depreaciated later, black thin border should be above entrance */
}
body:has(.cards-row)  .hero { 
	max-width: var(--cardsrow-width);
}
.nohero {
	z-index:-10;
	padding-top: 2rem; 
	height: calc( var(--Logo-Scale) * 10rem + 3rem );
}


@media (min-width:100px) {
    :root {
		--card-width: 100%;
		--cardsrow-width: unset;
    }
}
@media (min-width: 690px) {
    :root { 
		--card-width: 19rem;	
		--cardsrow-width: calc( 2 * var(--card-width) + 1 * 2rem ); 
    }
}
@media (min-width: 1010px) {
    :root {
		--card-width: 19rem;
		--cardsrow-width: calc( 3 * var(--card-width) + 2 * 2rem ); 
    }
}
@media (min-width: 1350px) {
    :root { 
		--card-width: 19rem;
		--cardsrow-width: calc( 4 * var(--card-width) + 3 * 2rem ); 
    }
}
.page-content { /* not used on index and UeberUns */
	max-width: 1050px;
	padding: 0 1rem;
	margin: 0 auto; /* centers the content */
}

.headline { 
	font-size: var(--HeadlineSize);
	text-transform: uppercase;
	line-height: 1;
	color: var(--headline-color);
}
.section-row .headline { 
	text-transform: unset;
}
.headline-subtext{
	font-size: min(70%,1rem);
	text-transform: none;
	margin-top: 0.3rem; 
}
.title {
	font-size: 1.4rem;
	color: var(--text-hl-color);
	text-transform: uppercase;
}
.sub-title {
	font-size: 1.2rem;
	color: var(--text-hl-color);
	padding-top: 0.2rem;
}
.datetime,.date,.time {
	white-space: nowrap;
}
.date {
	font-size: 1.4rem;
}
.cards .date {
	font-size: 1.2rem;
}
.inline-icon,  .card-icon { /* ... remove card-icon...*/
	height: 1.1rem;
	fill:  hsl(0 0% 70% / 1);
	padding-right: 0.3rem;
}
.date-container { 
	display: grid;
    grid-auto-flow: column;    
    grid-template-columns: min-content;
}
.location-container {  
	/*font-size: 1.0rem;*/
	/* ... is this need any more?  ....*/
}
/*
    --------------  home Page ----------
*/

.cards-row {                     /* holds min-width from media */
	margin: 0 auto; 
	padding: 2rem 0rem 1rem 0rem;
	max-width: var(--cardsrow-width);
}
@media (max-width :690px) { /* if only one card is visibility ensure left, rift padding */
   	.cards-row {                    
		padding: 2rem 0.8rem 1rem 0.8rem;
	}
}
.cards {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

	column-gap: 2rem;
	padding-inline-start: 0rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;

	-webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
	overscroll-behavior-x: contain;    /* prevent page swipe */
	list-style: none;
}
.cards::-webkit-scrollbar{
  display: none;
}
.cards-scroll {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 0.5rem;
	padding-bottom: 1rem;
}
.cards-scroll button{
	all: unset;
	font-size: 1.2rem;
	font-weight: bold;
	display: block;
}
.card-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 0.6rem ;
}
.card-dots div {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ccc;
	display: block;
}
.card-dots .selected {
	background: #666;
}
.card {
	flex: 0 0 var(--card-width);  
	display: flex;
	flex-direction: column;
	gap: 1rem;
	scroll-snap-align: start;
	scroll-snap-stop: always;  
}				   
.date-container+.location-container {
	padding-top: 0.15rem;
}
.card-event-image {
	display: block;
	width: 100%;
	min-height: 168px;
	aspect-ratio: 9/5;  
	object-fit: cover;
}
.card .speaker { 
	font-size: 1.2rem;
}
/*
    --------------  Branch on Index Page ----------
*/
#A-branch-evenings .branch-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
#A-branch-evenings .branch-title {
	font-size: 1.2rem;
	color: var(--text-hl-color);
	text-transform: uppercase;
}
#A-branch-evenings .branch-sub-title {
	font-size: 1rem;
	color: var(--text-hl-color);
}
#A-branch-evenings .eurythmy-container {
	min-height: 2.86rem;
}

#A-branch-evenings .branch-lecture {
	display: flex;
	flex-direction: row;
	gap: 0.3rem;
	height: 10rem;
	background: #e7d1f8;
}
#A-branch-evenings .branch-lecture .lecture-image {
	flex: 0 0 auto;
	height: 100%; /* important for Firefox and Safari */
}
#A-branch-evenings .branch-lecture .lecture-image > img {
	display: block;
	height: 100%;
	object-fit: cover;
	
}
#A-branch-evenings .branch-lecture-content {
	display: flex;
    flex-direction: column;
	gap: 0.3rem;
	padding: 0.3rem;
}
#A-branch-evenings .branch-special-event {
	display: flex;
	flex-direction: column;
}
#A-branch-evenings [data-member="lectureSerie.content"]{
	flex: 1;
	font-style: italic;
}
#A-branch-evenings .branch-special-event .image {
	flex: 0 0 auto;
	overflow: hidden;
}
#A-branch-evenings .branch-special-event .image  img {
	display: block;
	height: 10rem;
	width: 100%;
	object-fit: cover;
}
#A-school-events *{
	color: darkslategrey;
	font-weight: normal;	
}
#A-school-events .title {
	font-size: 1.2rem;
}
.headline:has(+ #A-school-events){
	color:black;
	font-size: calc(0.7 * var(--HeadlineSize));
}
/*
    --------------  Calendar Grid (Kalender-page, Detail-Page, Branch-Page ----------
*/
.calendar-col-1 { 
	grid-area: c1; 
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
	height: 100%;
}
.calendar-col-2 { 
	grid-area: c2; 
	display: flex;
	flex-direction: column;
	height: 100%;
}
.calendar-col-3 { 
	grid-area: c3; 
	display: flex; /* das mit col 1 2 zusammenfassen*/
	flex-direction: column;
}
.calendaritem {
	display: grid;
	grid-template-areas: unset;
	grid-template-columns: 11rem 1fr min-content;
	grid-template-areas:"c1 c2 c3";
	column-gap:  1rem;
	padding: 1.5rem 0;
}
.calendaritem:not(:last-child) {
	border-bottom: thin solid #ccc;
}

.calendar-row .location-container,
.calendar-row .speaker {
	margin-top: auto;
    display: flex;
    align-items: flex-end;
} 
@media (max-width :615px) {
	.calendaritem {
		width: 100%;
		grid-template-columns: auto 1fr;
        grid-template-areas:   "c1 c1""c3 c2";
		row-gap: 1rem;
	}
	.calendar-col-1 {
		grid-area: c1;
		display: flex;
		flex-direction: row;
		column-gap: 1rem;
		align-items: flex-end;
	}
	.calendar-row .location-container {
		display: flex;
		min-width: 0;   
		flex-direction: row;
		align-items: flex-start
	} 
	.calendar-row .location-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;        
	}

}
.calendar-row .time:has(+ .secondDate),
.calendar-row .time.secondDate
{
	display: none;
}
.calendar-row .image {
	justify-self: end;
}
.calendar-row img {
	height: 7rem;
	aspect-ratio: 1/1;
	object-fit: cover;
}
.calendar-row .type:has(+ .organizer)::after{
	content: '  |  ';
}

.calendar-row .speaker::before{
	content: "mit\00A0";
}
/*
    --------------  Branch Page ----------
*/

.lecturelist{
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto 1fr;
	gap: 0 1rem;
}
.lecturelist >div{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#A-branch-calendar-grid .location-container {
	display: none;
}

/* 
	--------------  Arbeitsgruppen, Klassenstunden Page ---------- 
*/
#A-school-grid * {
	color: darkslategrey;
	font-weight: normal;	
}

.simple-row-grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0;
}
.simple-row-grid:not(:last-child) {
	border-bottom: thin solid #ccc;
}

/* 
   -------------- index-page: strip, quote ---------- 
*/
.strip {	
	background: url(../images/strip.jpg) center;
    background-size: cover;
    background-repeat: no-repeat;
	clip-path: polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 2rem));
  	padding: 1rem 0.8rem 2rem 0.8rem;
	max-width: 1050px;
	margin: 1.6rem auto;
}
body:has(.cards-row)  .strip { 
	max-width: var(--cardsrow-width);
}
.strip > .cards-row{
	background: transparent;
}
.quote {
	display: grid;
    grid-auto-flow: row;
	gap: 0.2rem;
    align-items: center;
}
.quote-text {
	font-size: 1.2rem;
	font-style: italic;
}
.quote-text::before {
	content: '»';
}
.quote-text::after {
	content: '«';
}
.quote-author::before {
	content: '— ';
}
.quote-source {
	font-size: 85%;
}
.quote-source::before {
	content: '  (';
}
.quote-source::after {
	content: ')';
}
/*
    --------------  Sections (Zweigabend and "Über uns"  ----------
*/
.section-rows {
	display: flex;
	flex-direction: column;
}
.section-rows>div:nth-child(even) {
	background: #e3e3e3;
}
.section-row {
	display: flex;
	flex-direction: row;
	max-width: 1050px;
	gap: 2rem;
	width: 100%;
	justify-self: center;
	padding: 1rem 0;
}
.section-image-1 {
	flex: 0 0 30%;
}
.section-image-1  >img {
    max-width: 100%;
    width: 100%;
    display: block;
}
.section-image-2 {
  flex: 0 0 40%;
}
.section-image-2 >img {
	max-width: 100%;
	width: 100%;
	aspect-ratio: 8/5;  
	object-fit: cover;
	display: block;
}
.section-content { 
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (max-width :615px) {
	.section-row {
		flex-wrap: wrap;
	}
	.section-image-1,
	.section-image-2,
	.section-content {
		flex-basis: 100%;
		padding: 0 0.5rem;
	}
}

#detail-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	line-height:1.5;
}
#detail-content .title {
	font-size: calc( 0.8 * var(--HeadlineSize));
}
#detail-content .sub-title {
	font-size: calc( 0.6 * var(--HeadlineSize));
}
#detail-content .prevNextNavigation {
	display: flex;
	justify-content: space-between;
}
#detail-content .prevNextNavigation a:not([href]){
	visibility: hidden;
}
#detail-content .main-image img{
	max-width: 80%;
	max-height: 30rem;
}
#detail-content .detail-series-grid{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: max-content fit-content(100%) 4rem;
	gap: 0.5rem 1rem;
}
#detail-content .detail-series-row {
	display: contents;
}
#detail-content .detail-headline{
	font-size: 1.3rem;
	color: var(--headline-color) ; 
}
#detail-content .detail-series-grid:before{
	content: 'Siehe auch';
	grid-column: 1 / -1;
	font-size: 1.3rem;
	color: var(--headline-color) ; 
}
#detail-content .detail-series-image-col img{
	height: 3rem;
	width: 3rem;
	object-fit: cover;
}

#detail-content .contact-options {
	display: flex;
	gap: 1rem;
}

/*
    --------------  Kontakt Form ----------
*/
#ContactRequestFeedback{
	display: hidden;
}




/* ... review done ... until here */


.page-section .headline {
	text-transform: unset;
	
	padding: 1rem 0;
	
	position: sticky;
	background: white; /* important for sticky headlines */
	top: calc(calc(var(--LogoBaseHeight) * var(--ScrollHeightFactor)) + 3rem);
    z-index: 1;

}


.page-section {
	padding: 1.5rem 0;
}



.contact-content label {
  display: block;
  margin-top: 12px;
}
.contact-content input, 
.contact-content textarea {
  width: 100%;
  max-width: 25rem;
  padding: 8px;
  margin-top: 5px;
}
.contact-content button {
  margin-top: 20px;
}
/*  to be cleaned up ... copy-past from headline */
/*
.contact-content button {
	font-size:     130%;
	background:    transparent;
	padding:       0.3rem 1rem;	   
	display:        inline-block;
    vertical-align: text-top;
	border-radius: 0.3rem;
	margin-bottom: 1rem;
}

.detail-content button:hover,
.contact-content button:hover{
	background-color: grey;  das nochmal checken  
}
*/

.floating-img{
  float: left;
  width: 25rem;
  max-width: 50%;
  margin-right: 15px; /* space between image and text */
  margin-bottom: 10px; /* optional spacing below image */
}
.floating-img-small{
  float: left;
  height: 8rem;
  max-width: 30%;
  margin-right: 1rem; /* space between image and text */
  margin-bottom: 0.3rem; /* optional spacing below image */
}
.floating-img-clear {
	clear: both;
}
.inline-img {
	height: 1.5rem;
	vertical-align: middle;
	width: auto;
}

.list {
	display: grid;    
	grid-auto-flow: column;
	gap: 1rem;
    justify-content: start;
	padding-bottom: 0.25rem;
}
p {
	line-height: 1.4;
}






/* ... review done ... to end */
.footer {
	background: dimgrey;               /*var(--text-hl-color); color- option*/
	color: white;
	padding: 0 0.8rem;
	margin-top: 1.5rem;
}
.footer-container {
	max-width: 1050px;
	padding: 1rem 0;
	margin: 0 auto;
}
main:has(.cards-row) ~ footer .footer-container,
main:has(.cards-row) ~ footer .footer-footer { 
	max-width: var(--cardsrow-width);
}
.footer-container {
    display: flex;
	justify-content: space-between;
	row-gap:1.3rem;
}
@media (max-width: 1050px) {
	.footer-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 660px) {
	.footer-container {
		display: grid;
		grid-template-columns: 1fr;
	}
}
.footer-item {
    padding: 0;
    line-height: 1.3;
	font-size: 1rem;
    display: flex;
    flex-direction: column;
	white-space: nowrap;
}
footer .title1 {
	font-size: 1.4rem;
}
footer .title2 {
	font-size: 1.2rem;
}
.footer-footer{
	color: black; 
	background: white;
	margin: 0 auto; /* centers the content */
	padding: 0 0.8rem;
	max-width: 1050px;
	display: flex;
    flex-wrap: wrap;
	gap: 0.3rem 1rem;
	
}
.footer-footer > div:first-child {
    flex: 1 1 auto;           /* can grow & shrink */
}
.footer-footer > div:not(:first-child) {
    flex: 0 0 auto;           /* don't shrink */
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}