:root {

/* Colors: */
--text-color: #2B2B2B;
--text-highlight-color: #B5446E;
--grundfarbe-mittel: #9CABBD;
--grundfarbe-halbhell: #B5C6DB;
--grundfarbe-hell-schatten: #C0D1E8;
--grundfarbe-hell: #CCDEF5;
--primary-color: #7D82B8;
/*
--secondary-color: #5B8284;
--ss-primary-color: #5B8284;
*/
--secondary-color: #494064;
--ss-primary-color: #B5446E;

--event-closed-color: #D2B2C8;
--event-open-color: #AACAEE;

/* Testevents. Bewusst gedeckt-gelb und NICHT rot: Rot ist in der
   Veranstaltungsliste die Farbe fuer "abgesagt". */
--test-event-color: #6B5200;
--test-event-bg: #FDF3D0;
--test-event-border: #E3C766;


/* Font/text values */
--primary-font-family: Haettenschweiler;
--secondary-font-family: dejavu_sansbook;
--secondary-font-bold: dejavu_sansbold;
}

@font-face {
    font-family: 'Haettenschweiler';
    src: url('../fonts/haettenschweiler/hatten.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dejavu_sansbook';
    src: url('../fonts/dejavusans/DejaVuSans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dejavu_sansbold';
    src: url('../fonts/dejavusans/DejaVuSans-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 98px; /* Margin bottom by footer height */
}

h1 {
	font-family: var(--primary-font-family);
	font-style: normal;
	font-weight: normal;
	font-size: 3rem;
	line-height: 64px;
	letter-spacing: 1.8px;
	color: var(--text-color);
}

h2 {
	font-family: var(--primary-font-family);
	font-style: normal;
	font-weight: normal;
	font-size: 30px;
	line-height: 33px;
	letter-spacing: 0.9px;
	color: var(--text-color);
}


h3 {
	font-family: var(--primary-font-family);
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 27px;
	letter-spacing: 0.9px;
	color: var(--text-color);
}

::selection{
	background: var(--text-highlight-color);
	color: var(--grundfarbe-hell);
}

.text-klein{
	font-size: 12px;
}

.h4-fliesstext {
font-family: var(--secondary-font-family);
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.6px;
color: var(--text-color);
}

.text-titel {
	font-family: var(--secondary-font-bold);
	font-style: normal;
	font-weight: bold;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.6px;
	color: var(--secondary-color);
}

.block-titel {
	font-family: var(--secondary-font-bold);
	font-style: normal;
	font-weight: bold;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.6px;
	color: var(--secondary-color);
	border-bottom: solid;
	border-color: var(--secondary-color);
	margin-bottom: 5px;
}

.secondary {
	color:  var(--secondary-color);
}

@media (max-width: 600px) {
	.div_tablet {
		display: none;
	}
	.div_tablet_desktop {
		display: none;
	}
}

@media (min-width: 601px) {
	.div_mobile {
		display: none;
	}
}

@media (max-width: 1024px) {
	.div_desktop {
		display: none;
	}
}

@media (min-width: 1025px) {
	.div_tablet {
		display: none;
	}
	.div_mobile_tablet {
		display: none;
	}
}


@media all and (min-width: 0px) {

h1 {
	font-size: 1.5rem;
	line-height: 24px;
}
.before-footer {
	width: 100%;
	height: 150px;
}

    @media all and (max-width: 576px) {
		.table_img{
			display:none;
		}
	}

    @media all and (min-width: 576px) {
        .modal-dialog {
			font-size: 1rem;
            max-width: 550px;
        }

		.modal-dialog-large {
			font-size: 1rem;
			max-width: 95%;
		}

		.modal-dialog-medium {
			margin-top: 3em;
            max-width: 475px;
        }

        .modal-dialog-small {
            max-width: 400px;
        }
 
		h1 {
			font-size: 60px;
			line-height: 64px;
		}
 		.before-footer {
			width: 100%;
			height: 120px;
		}
	}
    @media all and (min-width: 768px) {
        .modal-dialog {
            max-width: 700px;
        }

		.modal-dialog-large {
			max-width: 95%;
		}

		.modal-dialog-medium {
            max-width: 550px;
        }

        .modal-dialog-small {
            max-width: 400px;
        }
		.before-footer {
			width: 100%;
			height: 100px;
		}
    }
    @media all and (min-width: 992px) {
        .modal-dialog {
            max-width: 850px;
        }

		.modal-dialog-large {
			max-width: 95%;
		}

		.modal-dialog-medium {
            max-width: 625px;
        }

        .modal-dialog-small {
            max-width: 400px;
        }
    }
    @media all and (min-width: 1200px) {
        .modal-dialog {
            max-width: 1100px;
        }

		.modal-dialog-large {
			max-width: 95%;
		}

        .modal-dialog-medium {
            max-width: 750px;
        }

        .modal-dialog-small {
            max-width: 400px;
        }
    }

    body {
        font-family: var(--secondary-font-family);
        color: var(--text-color);
        font-size: 1rem;
		letter-spacing: 0.54px;
        text-decoration: none;
		background: var(--grundfarbe-hell) 0% 0% no-repeat padding-box;
    }

	.modal-content {
		background-color: var(--grundfarbe-hell);
    }
	
	.modal-content_layer2 {
		background-color: var(--grundfarbe-halbhell);
		border-bottom: solid;
		border-color: var(--secondary-color);
    }

    #overlay {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: #fefefe;
        opacity: 0.7;
        z-index: 100000000;
        background: rgba(255, 255, 255, 0.8) url(../img/ajax-loader.gif) 50% 50% no-repeat;
    }

    #overlay_message {
        font-weight: bold;
        text-align: center;
        position: absolute;
        top: 40%;
        width: 100%;
    }

    .mycontainer {
        width: 80%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    @media (max-width: 1280px) {
        .mycontainer {
            width: 90%;
        }
    }
    @media (max-width: 960px) {
        .mycontainer {
            width: 100%;
        }
    }


	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: var(--grundfarbe-mittel);
	}

	.footer a{
		color: var(--text-color);
		text-decoration-line: none
	}
	
	.full_img{
		width: 100%;
	}

	.video-container {
		height: 300px;
		width: 100%;
		position: relative;
	}

	.video-container video {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  object-fit: cover;
	  z-index: 0;
	  object-position: 70% 70%;
	  opacity: 0.55;
	}

	/* Just styling the content of the div, the *magic* in the previous rules */
	.video-container .caption {
	  z-index: 1;
	  position: relative;
	  text-align: center;
	  padding: 10px;
	}

	.video-container-text {
		height: 300px;
		 line-height: 300px;
	}

	.video-container-text h1{
		display: inline-block;
		vertical-align: middle;
		word-wrap: break-word;
	}
	
	.video-container-text img {
		vertical-align: middle;
	}

	/*
	 * Hier standen bis 2026-08-19 die Regeln fuer .title-container - das
	 * Bannerbild img/titel.jpg als Seitenkopf. Alle Seiten nutzen jetzt
	 * .page-title aus redesign.css (Muster: results.php), damit war das
	 * Regelwerk verwaist. .title-container-event war schon vorher tot.
	 *
	 * Das Bild selbst bleibt im Projekt: functions_event_gallery.php zeigt es
	 * als Platzhalter fuer Galerien ohne eigenes Bild.
	 */

    .full_container {
        width: 100%;
        padding-right: 2%;
        padding-left: 2%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 20px;
    }

    .navi-tab {
        padding-left: 25px;
        padding-right: 25px;
    }

    .tablink {
        text-decoration: none;
    }

    .tablink:hover,
    .tablink:focus {
        text-decoration: none;
    }

    .tablink div {
        min-height: 130px;
    }

    .tablink-icon {
        width: 100%;
    }


    .div_hidden {
        display: none;
    }

	.red {
		color: #FF0000;
	}
	.green {
		color: #229954;
	}
    .error_msg {
        color: #FF0000;
    }
	.table_icon, .table_button {
		width: 2em;
		height: 2em; 
	}

	.button_img {
		height: 24px;
	}

	.table_img {
		width: 1.4em;
	}
	
	.table_button {
		cursor: pointer;
	}

	.country_button{
		height: 2em;
		margin-right: 5px;
		margin-top: 2px;
		box-shadow: 10px 10px 30px grey;
		max-width: 100%;
		min-width: 3em;
	}

	.country_button_medium{
		height: 1.5em;
		margin-right: 3px;
		margin-top: 1px;
		max-width: 100%;
		min-width: 1.5em;
	}

	.country_button_small{
		height: 1em;
		margin-right: 3px;
		margin-top: 1px;
		box-shadow: 5px 5px 15px grey;
		max-width: 100%;
		min-width: 1.5em;
	}

	.present_image{
		height: 1.4em;
		margin-right: 5px;
	}

	.title_icon {
		height: 4em; 
	}
	
	.socialbtn {
	  float: left;
	  margin-top: 2px;
	  margin-left: 6px;
	  margin-bottom: 2px;
	  width: 100%;
	  width: 36px;
	  height: 36px;
	  background: url("../img/social/facebook.png") no-repeat; 
	  background-size: cover;
	  background-repeat: no-repeat;
	  }
   @media all and (min-width: 576px) {
		.socialbtn {
		  width: 48px;
		  height: 48px;
		  }
   }
 	  
	 .full_image{
		 width : 100%;
		 border-radius: 18px;
	 }
	 
	 .social_frame {
	  width: 100%;
	  height: 48px;
	 }


	 #drop_zone, .drop_zone {
	  border: 2px dashed #bbb;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  padding: 20px;
	  text-align: center;
	  color: #bbb; }
	  
	  .image_list_item {
		  padding: 20px;
	  }
	  
	.appointment {
		cursor : pointer;
		margin: 0px 20px 20px 0px;
	}
	
	.appointment-title {
		font-family: var(--primary-font-family);
		color: var(--secondary-color);
		font-style: normal;
		font-size: 36px;
		line-height: 24px;
		letter-spacing: 2px;
		writing-mode: sideways-lr;
	}
	
	.appointment-inner{
		border: 1px solid var(--text-color);
		width: 15em;
		border-radius: 8px;
		padding: 5px;
		height: 12em;
	}
	.appointment-inner.trophy{
		background-color: rgba(217, 55, 6, .2);
	}
	.appointment-inner.external{
		background-color: var(--grundfarbe-hell);
	}
	.appointment-inner.registration-open{
		background-color: var(--event-open-color);
	}
	.appointment-inner.registration-closed{
		background-color: var(--event-closed-color);
	}
	.appointment-inner:hover {
		border: 3px solid var(--secondary-color);
	}
	.appointment a{
		font-size: 12px;
		line-height: 14px;	
		cursor: pointer;
		color: var(--text-color);
		text-decoration-line: none;	
	}
	.appointment img{
		display: inline-block;
		width : 3em;
		height : 3em;
	}

	.appointment .date{
		display: inline-block;
		width : 9em;
		padding-left: 4px;
	}
	.appointment .headline{
		display: block;
		width : 100%;
		margin-top: 2px;
		font-size: 16px;
		line-height: 18px;	
		color:  var(--secondary-color);
	}
	.event{
		padding-left: 25px;
        padding-right: 25px;
	}

	.event-inner{
		border: 1px solid var(--text-color);
		border-radius: 8px;
		padding: 10px;
		min-height: 80px;
	}
	.event-inner:hover {
		border: 3px solid var(--secondary-color);
	}

	.event a{
/*
		font-size: 12px;
		line-height: 14px;	
*/
		cursor: pointer;
		color: var(--text-color);
		text-decoration-line: none;	
	}
	.event .headline{
		font-size: 16px;
		line-height: 18px;	
		color:  var(--secondary-color);
	}

	.ss-content .ss-list .ss-option {
    color:var(--secondary-color);
	}
	
	.puzzle-details-titel {
		font-family: var(--secondary-font-bold);
		color:  var(--secondary-color);
		font-style: normal;
		font-weight: bold;
		font-size: 36px;
		line-height: 40px;
		letter-spacing: 0.6px;
		margin-top: 10px;	
		margin-bottom: 30px;	
	}

	.manufacturer_button {
		height: 2em; 
	}
	
	.manufacturer_button_large {
		margin: 3px;
		height: 3em; 
	}

	.sponsor_button_large {
		margin: 1px;
		max-height: 6em;
		max-width:100%;
	}

	#mapdiv {
		overflow : hidden;
		height:100%;
		min-height:700px;
		width:100%;
	}
	
	#mapdivsmall {
		overflow : hidden;
		height:300px;
		width:100%;
	}

	/* Karte im Ortsdialog. Feste Hoehe, weil ein Modal seinen Inhalt sonst auf
	   null zusammenfallen laesst und MapLibre eine Leinwand ohne Flaeche bekaeme. */
	#eventLocationMap {
		overflow : hidden;
		height:260px;
		width:100%;
	}

	.div_member_statistic {
		margin-bottom: unset;
	}

	.member_statistic_table {
		width :100%;
	}
	.largercheckbox input[type="radio"], .largercheckbox input[type=checkbox] {
	  width: 20px;
	  height: 20px; 
	  accent-color: var(--secondary-color);
	  }
	  .largercheckbox input[type="radio"] :checked, .largercheckbox input[type=checkbox] :checked {
		margin-left: 25px;
		border: 1px solid blue; }
	.largercheckbox input[type=checkbox]:checked + label {
	  font-weight: bold; }
	.largercheckbox label {
	  margin-left: 5px;
	  margin-top: -10px; }
	
	#editTranslationModal {
/*		background: var(--grundfarbe-hell) 0% 0% no-repeat padding-box;*/
		background: rgba(255, 255, 255, 0.8) 50% 50% no-repeat;
	}

	#editTranslationModal .modal-content {
		background: var(--grundfarbe-hell) 0% 0% no-repeat padding-box;
		border: 4px solid var(--text-color);
	}
	#editTranslationModal .btn-dark {
		background-color: var(--secondary-color);
		border-color: var(--secondary-color);
	}
	#editTranslationModal .btn-dark:hover{
		color: var(--secondary-color);
		background-color: var(--grundfarbe-hell);
		border-color: var(--secondary-color);
	}
	#editTranslationModal .btn-light {
		color: var(--secondary-color);
		background-color: var(--grundfarbe-hell);
		border-color: var(--secondary-color);
	}
	#editTranslationModal .btn-light:hover{
		color: var(--grundfarbe-hell);
		background-color: var(--grundfarbe-mittel);
	}

	.icon_link{
		font-size: 8px;
	}
	
	.page_title h2 {
		display: inline-block;
	}


	#agb_link {
		cursor : pointer;
	}
	
	#registerSingleModal {
	}
	
	
	.logo_img {
		width: 3em;
		height: 3em;
	}
	
	.normal_price{
		font-style: normal;
		font-weight: bold;
		font-size: 2rem;
		line-height: 48px;
		text-decoration: line-through solid var(--secondary-color);
		margin-right: 0.5em;
	}

	.paid_price{
		font-style: normal;
		font-weight: bold;
		font-size: 2rem;
		line-height: 48px;
		margin-right: 0.5em;
	}

	.final_price{
		font-style: normal;
		font-weight: bold;
		font-size: 2rem;
		line-height: 48px;
		color: var(--secondary-color);
	}
	
	.nav-pills .nav-link.active {
		color: var(--text-color);
		background-color: var(--primary-color);
	}
	
	.sponsor-tile a {
        color: var(--text-color);
        text-decoration: none;
	}
	
	.fee_small{
	font-size: 10px;
	font-weight: normal;
}

	.edit_image_list_item {
		  border: 2px solid #bbb;
		  -webkit-border-radius: 5px;
		  -moz-border-radius: 5px;
		  border-radius: 5px;
		  padding: 5px;
		  cursor : pointer;
	}

	.image_line_container{
		overflow-y: hidden;
		overflow-x: scroll;
		width: 100%;
		display : grid;
		gap: 2px;
		padding: 20px;
	}

	.image_line_container_item {
		width: 8em;
		border: 2px solid #bbb;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 5px;
		cursor : pointer;
		grid-row: 1;
	}
	
	.image_image_frame {
		height: 8em;
		display:flex;
		justify-content: center;
		align-items: center;

	}
	
	.edit_image_image_frame {
		  height: 7em;
	}
	
	.edit_image_preview_frame {
		  height: 30em;
	}

	.edit_image_img {
		max-width: 100%;
		max-height: 100%;
	}
	.event_gallery-tile {
		height: 440px;
		border: 3px solid var(--text-color);
		border-radius: 17px;
		opacity: 1;
		margin: 2px;
		margin-top: 20px;
		overflow : hidden;
		cursor: pointer;
	}
	
	.event_gallery-tile:hover {
		border: 3px solid var(--secondary-color);
	}
	
	
	.event_gallery-tile:hover .event_gallery-tile-button-container{
		background-color: var(--secondary-color);
	}

	
	.event_gallery-tile a {
        color: var(--text-color);
        text-decoration: none;
	}
	
	.event_gallery-tile-img-container {
		height: 290px;
		width: 100%;
		position: relative;
		border-top-right-radius: 14px;
		border-top-left-radius: 14px;
		opacity: 1;
	}

	.event_gallery-tile-img-container img {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  object-fit: scale-down;
	  z-index: -1;
/*	  object-position: 70% 70%;*/
		border-top-right-radius: 14px;
		border-top-left-radius: 14px;
	}

	.event_gallery-tile-text-container {
		height: 100px;
		width: 100%;
		position: relative;
		padding: 20px;
		background-color: var(--grundfarbe-hell);
	}	
	.event_gallery-tile-button-container {
		height: 50px;
		width: 100%;
		position: relative;
		padding: 10px;
		color: white;
		background-color: var(--grundfarbe-mittel);
	}

	.image_view_frame {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: var(--grundfarbe-mittel);
//        opacity: 0.7;
        z-index: 10000000;
	}
	
	.image_view_frame .modal-header{
		height: 5vh;
		min-height: 50px;
	}
	
	.image_view_frame .modal-title{
		font-size: 8px;
	}
	
	.image_view_frame .modal-body{
		padding: 0;
	}
	.image_view_frame .modal-body .fullcontainer{
		height: 88vh;
		justify-content: center;
		text: center;
	}
	.image_view_frame .modal-body .fullcontainer #image_preview {
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer
	}

	.image_view_frame .modal-footer{
		justify-content: center;
		height: 7vh;
		min-height: 50px;
	}
	
	.image_view_frame .modal-footer > * {
		margin: 0;
	}



	.video_frame{
		width : 100%;
	}
	
	.board_table{
		font-size: 16px;
	}

	@media all and (max-width: 1100px) {
		.imprint{
			display:inline-block;
			font-size: 12px;
		}
	}


	.mail_count{
		background-color: #00b755;
		color: white;
		border-radius: 50%;
		margin-top: -5px;
		margin-left: -5px;
		padding: 2px;
		width:20px;
		height:20px;
		font-size: 10px;
		text-align: center;
	}

	.chat_frame
	{
		display:block;
		border-radius: 20px;
		padding: 10px;
		margin: 5px;
		width:auto;
		max-width: 80%;
	}

	.chat_request
	{
		background-color: #6edff6;
	}
	.chat_response
	{
		background-color: #ccffcc;
	}

	.chat_title{
		font-size: 10px;
	}

	#writeChatMessage{

	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	}

	#writeChatMessage img{
		height : 23px;
	}

	.chat_list_chat_frame{
		border: 2px solid var(--secondary-color);
		border-radius: 8px;
		padding: 10px;
		position:relative;
		cursor:pointer;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}

	.chat_list_chat_frame hr{
		margin: 0;
	}

	#chat_text_frame{
		min-height: 200px;
	}

	.chat_new_count {
		background-color: #00b755;
		color: white;
		border-radius: 50%;
		padding: 2px;
		width: 20px;
		height: 20px;
		font-size: 10px;
		text-align: center;
		position: absolute;
		top: 5px;
		right: 5px;
	}
	.link_type_icon_frame {
		float: left;
		padding: 4px;
		width: 36px;
		height: 36px;
		margin: 2px;
//		border: 2px solid var(--secondary-color);
		border-radius: 8px;
		background-color: var(--primary-color);
		cursor:pointer;
	}
	.link_type_icon{
		width: 100%;
	}
	@media all and (min-width: 576px) {
		.link_type_icon_frame {
			width: 48px;
			height: 48px;
		}
	}

	.link_type_link_frame{
		overflow: hidden;
		word-wrap: break-word;
		font-size: 12px;
	}

	.load-more-button{
		display: block;
		width: 60px;
		height: 60px;
		font-size: 24px;
		margin: 50px auto;
		border: thin solid #e4e4e4;
		border-radius: 50%;
		line-height: 60px;
		cursor: pointer;
		transition: box-shadow .2s;
		background-color: var(--secondary-color);
	}
	.load-more-button span{
		display: block;
		transform: rotate(90deg);
		font-size: 22px;
		color: #FFF;
	}
	.load-more-button:hover{
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	}
	.load-more-button:active{
		background-color: #555;
		box-shadow: none;
	}

	.break_word{
		word-break: break-all;
	}

	.invalidInput {
		border: 3px solid red;
	}


	.puzzle_tile_frame{
		padding: 1em;
		font-size: 0.7em;
	}

	.puzzle_frame{
		padding: 1em;
		border-radius: 17px;
		box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
		min-height: 200px;
	}

	.puzzle_frame_image{
		min-height: 180px;
	}
	.puzzle_frame_name{
		height: 30px;
	}

	.puzzle_frame_text{
		height: 100px;
		overflow : hidden;
	}

	.select_puzzle_button{
		font-size: 1em;
	}

	.stream_text_frame{
		padding: 1em;
/*		border-radius: 17px;
		border: 3px solid red;
*/
		background-color: transparent;
		display: flex;
	}

	.stream_text_icon{
		height: 150px;
/*		animation-name: rotate_icon;
		animation-duration: 3s;
		animation-iteration-count: 1;
		animation-play-state: paused;*/
/*		border-radius: 25%;*/
	}

	@keyframes rotate_icon {
		0% {
			opacity:0;
			transform: rotate(0deg);
		}
		100% {
			opacity:1;
			transform: rotate(360deg);
		}
	}
	.stream_text_background{
		position: absolute;
		display: flex;
		top: 26px;
		left : 110px;
		height: 170px;
		width: 1047px;
		background-image: url(../img/stream/puzzle.png);
		background-repeat: no-repeat;
		animation-name: slide_background;
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-play-state: paused;
		z-index: 100;
	}
	@keyframes slide_background {
		0% {
			width: 0px;
		}
		100% {
			width: 1047px;
		}
	}

	.stream_text_icons_frame{
		display: flex;
		flex-direction: row;
		justify-content: end;
		align-items: center;
		width: 13em;
		height: 50%;
		padding-left: 0.1em;
		padding-top: 1.5em;
	}

	.stream_text_text_frame{
		padding-top: 2.5em;
		padding-left: 10.2em;
		width: 48em;
	}

	.stream_text_main_text{
		font-size: 1.5em;
		font-weight: bold;
		color: white;
		animation-name: show_stream_text;
		animation-duration: 0.2s;
		animation-iteration-count: 1;
		animation-play-state: paused;
	}

	.stream_text_main_text_small{
		font-size: 1.3em;
	}


	@keyframes show_stream_text {
		0% {margin-left: 50px;opacity:0;}
		100% {margin-left:0px;opacity:1;}
	}



	.stream_text_sub_text{
		margin-top: 0.5em;
		font-size: 1em;
		color: white;
		word-break: break-all;
		animation-name: show_stream_text;
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-play-state: paused;
	}

	.stream_text_table {
		width :100%;
	}

	.edit_stream_text_footer{
		justify-content: center;
	}

	.stream_button_grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
		gap: 10px;
		overflow: hidden;
		justify-items: center;
		padding: 1em;
	}

	.stream_text_button{
		min-width: 60px;
	}

	.contact{
		font-size: 0.7rem;
	}

	#registration_display{
		font-size: 3em;
	}

	.select_participant_pagination, .select_duplicate_participant_pagination {
		cursor: pointer
	}
}

#article-carousel{
	width: 640px;
	max-width: 100%;
}
.carousel {
	margin: 0 auto;
}
.carousel-inner {
	background-color: var(--grundfarbe-mittel);
	border-radius: 18px;
}
.carousel-item img{
	width : 100%;
	margin:auto;
	max-width: 100%;
}

select:focus > option:hover{
	color: #ffffff;
	background-color: var(--secondary-color)
}


/* Eventbild in der Basisdaten-Tabelle. Der Altbestand direkt in img/event/ ist
   teils mehrere Tausend Pixel breit, deshalb hier begrenzen. */
.event_base_image {
	max-width: 120px;
	max-height: 90px;
}

/* Symbol vor dem Weblink des Veranstaltungsortes. Groesse und Einfaerbung
   kommen von .socialbtn-img (Organisator-Links), hier nur der Abstand zum
   Text daneben. */
.location-link-icon {
	margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   Bildfeld (image-picker)

   EIN Bild je Datensatz, direkt in einer Formularspalte: Vorschaukachel links,
   Bedienung rechts. Bewusst so klein, dass es neben den uebrigen Feldern des
   Basisdaten-Dialogs steht und diesen nicht in die Laenge zieht.

   Zustaende steuert das JS ueber die Klasse image-picker--filled am Rahmen:
   ohne Bild eine gestrichelte Kachel mit Symbol, mit Bild die Vorschau.
   --------------------------------------------------------------------------- */
.image-picker {
	display: flex;
	align-items: stretch;
	gap: 12px;
}
.image-picker__thumb {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border: 1px dashed var(--grundfarbe-mittel);
	border-radius: 10px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: border-color .15s ease, background-color .15s ease;
}
.image-picker__thumb img {
	display: none;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* redesign.css setzt .rd-icon auf 1em - bei dieser kleinen Schrift viel zu
   klein, deshalb hier die Groesse ausdruecklich. */
.image-picker__empty .rd-icon {
	width: 22px;
	height: 22px;
}
.image-picker__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--grundfarbe-mittel);
	font-size: .68rem;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	padding: 0 4px;
}
/* Mit Bild: kein Hintergrund. Die Logos sind transparent und sollen auch in der
   Vorschau so aussehen wie spaeter auf den Eventseiten. */
.image-picker--filled .image-picker__thumb {
	border-style: solid;
	border-color: var(--grundfarbe-halbhell);
	background-color: transparent;
}
.image-picker--filled .image-picker__thumb img { display: block; }
.image-picker--filled .image-picker__empty  { display: none; }

/* Datei kann auch auf die Kachel gezogen werden. Der Zustand muss sich deutlich
   abheben - der Dialoghintergrund ist selbst hellblau. */
.image-picker__thumb.is-dragover {
	border-style: solid;
	border-color: var(--secondary-color);
	background-color: var(--grundfarbe-halbhell);
}
.image-picker__thumb.is-dragover .image-picker__empty { color: var(--secondary-color); }

.image-picker__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* Knopf soll seinen Text umschliessen, nicht die Spalte fuellen */
	justify-content: center;
	gap: 7px;
	min-width: 0;
}
/* Das echte Dateifeld bleibt verborgen; geklickt wird dieses Label. */
.image-picker__choose {
	display: inline-block;
	margin: 0;
	padding: 5px 14px;
	border-radius: 6px;
	background-color: var(--primary-color);
	color: #ffffff;
	font-size: .8rem;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
}
.image-picker__choose:hover { background-color: var(--secondary-color); }
.image-picker__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
}
.image-picker__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.image-picker__link {
	padding: 0;
	border: 0;
	background: none;
	font-size: .75rem;
	color: var(--text-color);
	text-decoration: underline;
	cursor: pointer;
}
.image-picker__link:hover { color: var(--text-highlight-color); }
.image-picker__link--danger { color: var(--text-highlight-color); }
.image-picker__link--danger:hover { color: var(--text-color); }
.image-picker__link[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Testevents (docs/entwicklung/testevent-plan.md, Abschnitt 6)
   Drei Bausteine: die Marke am Titel in der Veranstaltungsliste, die Farbe der
   Zeile dazu, und das Warnband auf jeder Seite eines Testevents.
   --------------------------------------------------------------------------- */
.badge-test-event {
	display: inline-block;
	border-radius: 999px;
	padding: .15rem .55rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--test-event-color);
	background: var(--test-event-bg);
	border: 1px solid var(--test-event-border);
}

/* !important, weil DataTables die Streifenfarbe je Zeile selbst setzt. */
table.table tbody tr.test-event-row > td {
	background-color: var(--test-event-bg) !important;
}

.alert-test-event {
	color: var(--test-event-color);
	background: var(--test-event-bg);
	border: 1px solid var(--test-event-border);
	border-left-width: 5px;
}

/* Testevent-Karte in den Uebersichten (index.php, public_events.php,
   organizer.php, results.php). Nur sichtbar fuer die, die das Event sehen
   duerfen - siehe test_event_visible_sql_filter(). */
.event-card.test-event-card {
	border: 1px solid var(--test-event-border);
	background: var(--test-event-bg);
}

/* Anmeldekachel in registrations.php, wenn die Anmeldung zu einem
   Testevent gehoert (show_user_registrations()). */
.registration_frame.test-event-frame {
	border-color: var(--test-event-border) !important;
	background: var(--test-event-bg);
}

	/* Platzhalter fuer eingebettete Videos (Zwei-Klick-Loesung) */
	.embed-consent{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		padding: 1rem;
		box-sizing: border-box;
		background: var(--surface-muted, #f0f0f0);
		border: 1px dashed var(--border-strong, #999);
		border-radius: 8px;
		text-align: center;
	}
	.embed-consent.event_video{
		aspect-ratio: 16 / 9;
	}
	.embed-consent__text{
		margin: 0;
		font-size: 0.9rem;
	}