/* 
    Created on : 20.05.2026
    Author     : M. Schulz
*/

@font-face{
	font-family:"MiloWeb W04 Light";
	src:url("../assets/fonts/1474021/529065e7-60a5-499d-9556-2f4f65c5c312.eot?#iefix");
	src:url("../assets/fonts/1474021/529065e7-60a5-499d-9556-2f4f65c5c312.eot?#iefix") format("eot"),url("../assets/fonts/1474021/6203c288-9b1e-42a5-8b18-14287829747c.woff2") format("woff2"),url("../assets/fonts/1474021/0af30fb9-be60-4f8a-9320-9fdeb7ee803e.woff") format("woff"),url("../assets/fonts/1474021/46879ccd-8e3e-4d25-876f-c892effde00c.ttf") format("truetype");
}
@font-face{
	font-family:"MiloWeb W04 Medium";
	src:url("../assets/fonts/1474029/5c2fe151-26c2-4664-aa77-b3006cdb10cd.eot?#iefix");
	src:url("../assets/fonts/1474029/5c2fe151-26c2-4664-aa77-b3006cdb10cd.eot?#iefix") format("eot"),url("../assets/fonts/1474029/62e50b33-f84f-42e7-9e50-2f56a843ee54.woff2") format("woff2"),url("../assets/fonts/1474029/8cc3bd79-32fc-46df-b235-46e68dbaf950.woff") format("woff"),url("../assets/fonts/1474029/d4331d92-59d0-435e-a2c3-12e789e7ca96.ttf") format("truetype");
}

:root {
	--mainColor: #00448a;
	--backgroundColor: #abdcf0; /* 50% #57b9e2 */
	--backgroundGradient: linear-gradient(0deg,rgba(87, 185, 226, 1) 0%, rgba(175, 210, 230, 1) 36%, rgba(175, 210, 230, 1) 66%, rgba(87, 185, 226, 1) 100%);
	--accentColor: #00448a; /*=*/
	--accentBackgroundColor: rgba(0, 68, 138, 0.5);
	--accentInvertColor: white; /* #afd2e6; */
	--accentInvertColor2: #9ccde9;
	--chartBackgroundColor: #80d5cb;
	--disabledColor: gray;
	--fontColorBodyText: #000000;
}

html {
	font-size: 18px;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "MiloWeb W04 Light", Helvetica, Arial;
	font-size: 1em;
	line-height: 1.2em;
	color: var(--fontColorBodyText);
	background-color: var(--backgroundColor);
	/* keine Mediävalziffern */
	-moz-font-feature-settings:"lnum" 1; 
	-ms-font-feature-settings:"lnum" 1; 
	-o-font-feature-settings:"lnum" 1; 
	-webkit-font-feature-settings:"lnum" 1; 
	font-feature-settings:"lnum" 1;
	touch-action: none;
}

body::before {
  content: "Karte wird geladen...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  color: var(--mainColor);
  z-index: 0; /* Text liegt hinter dem Canvas */
}


.h1, h1, 
.h2, h2,
.h3, h3,
.h4, h4 {
	font-family:"MiloWeb W04 Medium";
	color: var(--mainColor);
}

.h3, h3 {
	/*text-transform: uppercase;*/
}

.h4, h4 {
	font-size: 1.2rem;
	margin-bottom: 0.6rem;
	margin-top: 1.2rem;
}

p {
	margin: 0 0 1.2em 0;
}

a, a:hover, a:visited {
	color: var(--mainColor);
	text-decoration: underline;
}
@media (hover:hover) {
	a:hover {
		color: white;
		background-color: var(--mainColor);
		text-decoration: none;
	}
	
	.ml-footer a:hover {
		color: var(--mainColor);
		background-color: white;
		text-decoration: none;
	}
}
a:focus {
	outline: none;
}

.modal-content ul {
	padding-left: 1em;
}


/* Audio-Description */

.show-audiodescription {
	color: var(--mainColor);
	cursor: pointer;
	text-decoration: underline;
	margin-bottom: 0.5rem;
}
.audiodescription {
	background-color: var(--chartBackgroundColor);
	padding: 15px 15px 1px 15px;
}

summary:after {
    font-family: "BuchnerIcons";
	content: "\e901";  /*buchnerIcons: .icon-arrow_right*/
	display: inline-block;
	transform: rotate(180deg);
  
    position: absolute;
}
[open] summary:after {
    content: "\e902"; /*buchnerIcons: .icon-arrow_up*/
	margin-left: 0.1em;
}


/*DEBUG*/
#info_panel {
	display: none;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
    bottom: 60px;
}

#canvas {
    position: relative;
	top: 50px;
	background: var(--backgroundGradient);
	background-repeat: no-repeat;
}

/*Bilder*/
img.ml-image {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}
/*caption - wir verwenden figure*/
figure img {
	margin-bottom: 2px !important;
}
figure {
	margin-bottom: 10px;
}
figure figcaption,
.ml-reference-source {
	font-size: 0.8em;
	font-style: italic;	
}
.ml-reference-source {
	margin-top: .2rem;
}


audio {
	width: 100%;
}


.ml-youtube-placeholder {
	width: 100%;
	height: auto;
}

.navbar-default {
	font-family:"MiloWeb W04 Medium";
	background-color: #FFFFFF; /*#5c2874*/
    border: none;
	
	-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.30);
	-moz-box-shadow:    0px 5px 20px 0px rgba(0,0,0,0.30);
	box-shadow:         0px 5px 20px 0px rgba(0,0,0,0.30);
	
	margin-bottom: 0;
}
.navbar-default .navbar-text {
	width: 100%;
	text-align: left;
	color: var(--mainColor);
	font-size: 20px;
	margin-top: 16px;
	margin-bottom: 0px;
	
	margin-right: 15px;
	margin-left: 15px;
	
	padding-right: 60px; /*wegen menu_btn*/
}

footer {
	display: flex;
}

.ml-footer {
	-webkit-box-shadow: 0px -5px 20px 0px rgba(0,0,0,0.30);
	-moz-box-shadow:    0px -5px 20px 0px rgba(0,0,0,0.30);
	box-shadow:         0px -5px 20px 0px rgba(0,0,0,0.30);
	min-height: 50px;
	
	font-family:"MiloWeb W04 Light";
}
.ml-footer p {
	width: 100%;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}
.ml-footer a {
	cursor: pointer;
	text-decoration: none;
}
.ml-footer a:not(.btn) a:not(:hover) {
	color: var(--mainColor);
}

#logo-container {
	background-image: url(../assets/img/02_DE-IOEB-Logo_kurz.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
    width: 260px;
	border: 3px solid transparent;
	margin-inline-start: 20px;
}
#link-impressum-container {
	width: 100px;
	display: flex;
    align-items: flex-end;
	margin-inline-end: 10px;
}
#link-impressum-container p {
	display: table-cell;
	vertical-align: bottom;
	padding-bottom: 4px
}

footer,
#logo-container,
#link-impressum-container {
	height: 60px;
}

/* Tabellen */
table.ml-content-table {
	margin-bottom: 1rem;
	border: 1px solid #eeeeee;
	border-collapse: collapse;
	border-spacing:0;
	width: 100%;
}
table.ml-content-table td,
table.ml-content-table th {
	vertical-align: top;
	padding: 5px;
	hyphens: auto;
}
table.ml-content-table th {
	background-color: var(--mainColor);
	color: #FFFFFF;
}
.ml-content-table-col-1 {
	width: 25%;
}
table.ml-content-table tr:nth-child(even) {
  background-color: #eeeeee; 
}
table.ml-content-table tr:nth-child(odd) {
  background-color: #ffffff;
}
table.ml-content-table caption { 
	caption-side: bottom; 
	margin-top: 1em;
	color: var(--fontColorBodyText);
}

/*******************************************************************************
	Modal-Dialog
********************************************************************************/
.modal-dialog {
	margin: 120px auto;
}
.modal-content {
	border-radius: 0;
}

.ml-modal-header-number {
	background-color: var(--mainColor);
	color: #FFFFFF;
	display: inline-block;
	width: 1.45em;
	height: 1.45em;
	text-align: center;
}

.icon-iphone {
	background-image: url(../assets/img/icon_iphone.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 49%;
}

/*
	Scrollbares Modal-Window
	Quelle: http://stackoverflow.com/questions/24166568/set-bootstrap-modal-body-height-by-percentage
*/
.modal-body {
    max-height:65vh; 
    overflow-y: scroll;
}

/* Sprechblasen-Nase */
.modal-content:before {  
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 17px;
	top: -30px;
	border: 20px solid;
	border-color: transparent transparent white white;
}
/*******************************************************************************/

#zoom-button-container {
    position: relative;
	text-align: right;
	height: 50px;
    bottom: 10px;
}

.ml-text-newspaper {
	/*border: 1px solid #6F236E;*/
	/*background-color: rgba(92, 40, 116, 0.2);*/
	background-color: #afd2e6;
	padding: 0 15px;
	margin: 0.7rem 0 0.2rem 0;
}
.ml-text-newspaper h4 {
	margin-top: 10px;
	margin-bottom: 0.5em;
	color: #000000;
	text-transform: none; /* reset uppercase */
}
.ml-text-newspaper-1column {
	text-align: unset !important;
}

.ml-break-word {
	word-wrap:break-word;
}

.btn:focus {
  outline: none;
}
.btn-ml {
	color: var(--mainColor);/* !important;*/
    background-color: transparent;
    border-color: transparent;
	border-radius: 0px;
}
.btn-ml:hover {
	color: #FFFFFF;
}
.btn.disabled, 
.btn[disabled], 
fieldset[disabled] .btn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .40 !important;
	color: #FFFFFF;
}

.embed-responsive {
	/*margin-bottom: 1.5em;*/
}

.ml-offline-info {
	margin-top: 2px;
	color: red;
}

.progress-bar-success {
	background-color: var(--accentColor);
}

@media (max-width: 480px) and (orientation: portrait){
	
}
@media (min-width: 768px) {
	.ml-text-newspaper {
		text-align: justify;
		
		/*Achtung: Hyphens (Silbentrennung) Attribut lang erforderlich*/
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
}
@media (min-width: 992px) {
	.navbar-default .navbar-text {
		font-size: 30px;
		margin-top: 15px;
	}
	
	footer,
	#logo-container,
	#link-impressum-container {
		height: 57px;
	}
	
	#link-impressum-container p {
		padding-bottom: 8px
	}
	
	.ml-text-newspaper {
		text-align: justify;
	}
}
@media screen and (min-width: 1200px) {
	.navbar-default .navbar-text {
		text-align: left;
		padding-left: 20px;
		font-size: 30px;
		margin-top: 15px;
	}
	
	footer,
	#logo-container,
	#link-impressum-container {
		height: 77px;
	}
	
	#link-impressum-container p {
		padding-bottom: 12px
	}
	
	.ml-text-newspaper {
		text-align: justify;
	}
}


/* chrome: download-button in video-controls nicht zeigen - jetzt via Attribut controlslist="nodownload" möglich*/
/* Quelle: http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome */
video::-webkit-media-controls {
    /*overflow: hidden !important*/
}
video::-webkit-media-controls-enclosure {
    /*width: calc(100% + 32px);*/
    /*margin-left: auto;*/
}

.video-btn-bereich-abspielen {
	background-color: var(--mainColor);
	color: white;
	margin-top:0.5rem;
	margin-bottom: 0;
}