/* -----------------------------------------
    V :: 25
-------------------------------------------- */


:root {
	--headerHeight:70px;
	--footerHeight:70px;
	--colorHover:navy;


  --ratio: 2.0;
  --cta-color: rgb(0, 102, 254);
  --light-color-bg: rgb(238, 241, 247);
  --dark-color-bg: rgb(55, 65, 81);
  --grey-color: rgb(107, 114, 128);
  --leading: 0.025em;
  --line-color: rgb(107,114,128);

  --feedback-color: darkgreen;
  --dunkelblau: #002c50;
  --blau: #00AFDE;
  --hellblau: #cfeafb;
  --rot:#ca2025;
  --gruen:#087530;
  
  --primary: #00AFDE;
  --primary-dark: #002c50;
  --primary-light: #cfeafb;
  --warning:#ca2025;
  --ok:#087530;
  
 --szSmall:11px;
 --szPanel:14px;
 --szToast:16px;
 --szMedium:18px;
 --szLarge: 22px;
 --szVeryLarge: 38px;
 
}

* {
	box-sizing:border-box;
}
body {
	padding:0;
	margin:0;
	font-family:sans-serif;
	font-size:13px;
}
em {
	color:var(--primary);
}
.fa {
	font-size:14px;
}
.hidden {
	display:none;
}
.row {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.col {
	flex:1 1 100%;
}
#toast-container > div {
	opacity:1;
	font-size:var(--szToast);
}

/* MENU OVERRIDES */
.x-header {
	width:auto;
	z-index:9100;
	left:180px;
}
nav.mainmenu {
	z-index:9101;
}
.page-shader, .page-shader.menu-open {
	z-index:8000;
}


/* ========= Leaflet ============= */

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border:none;
}
.leaflet-container .marker-on-active {
	background-color:#888;
	color:white;
}
.leaflet-bar button.active {
	background-color:#ddd;
}
.leaflet-bar button.marker-on-active:hover {
  background-color: #888;
}

.leaflet-container.add-marker {
	cursor: url(/template/marker-icon.png) 12 41, crosshair;
}
.leaflet-container.add-marker.cursor-marker-standard {
	cursor: url(/template/pins/cursor-standard.png) 16 45, crosshair;
}
.leaflet-container.add-marker.cursor-marker-innovationen {
	cursor: url(/template/pins/cursor-innovationen.png) 16 45, crosshair;
}
.leaflet-container.add-marker.cursor-marker-menschundmeer {
	cursor: url(/template/pins/cursor-menschundmeer.png) 16 49, crosshair;
}
.leaflet-container.add-marker.cursor-marker-problemzone {
	cursor: url(/template/pins/cursor-problemzone.png) 16 45, crosshair;
}
.leaflet-container.add-marker.cursor-marker-wohlfuehlort {
	cursor: url(/template/pins/cursor-wohlfuehlort.png) 16 45, crosshair;
}
.leaflet-container.add-marker.cursor-marker-wunschort {
	cursor: url(/template/pins/cursor-wunschort.png) 16 45, crosshair;
}

.leaflet-touch .leaflet-bar button.easy-button-button {
	width:38px;
	height:38px;
	line-height:38px;
}
.leaflet-touch .leaflet-bar button.easy-button-button .fa {
	font-size:19px;
}
.leaflet-touch .easy-button-button.orga {
	color:var(--primary);
}

.svg-button {
	display:inline-block;
	width:100%;
	height:100%;
	background:transparent url(/template/pins/pin-standard.svg) no-repeat center center;
	background-size:16px;
}
.svg-button.svg-eye { background-image:url(/template/pins/pin-auge.svg); }

.svg-button.svg-innovationen { background-image:url(/template/pins/pin-innovationen.svg); }
.svg-button.svg-menschundmeer { background-image:url(/template/pins/pin-menschundmeer.svg); }
.svg-button.svg-problemzone { background-image:url(/template/pins/pin-problemzone.svg); }
.svg-button.svg-wohlfuehlort { background-image:url(/template/pins/pin-wohlfuehlort.svg); }
.svg-button.svg-wunschort { background-image:url(/template/pins/pin-wunschort.svg); }

/* ========= Marker ============= */

.svg-marker {
	width:25px;
	height:41px;
}
.svg-marker .pin {
	display:inline-block;
	width:100%;
	height:100%;
	background:transparent url(/template/pins/pin-standard.svg) no-repeat center center;
	background-size:25px;
	position:relative;
	z-index:10;
}
.svg-marker::after {
	content:"";
	display:block;
	position:absolute;
	left:-2px;
	bottom:-2px;
	width:41px;
	height:41px;
	background:transparent url(/template/pin-shadow.png) no-repeat;
	background-size:contain;
	z-index:0;
}
.svg-marker.pin-standard .pin { background-image:url(/template/pins/pin-standard.svg); }
.svg-marker.pin-innovationen .pin { background-image:url(/template/pins/pin-innovationen.svg); }
.svg-marker.pin-menschundmeer .pin { background-image:url(/template/pins/pin-menschundmeer.svg); }
.svg-marker.pin-problemzone .pin { background-image:url(/template/pins/pin-problemzone.svg); }
.svg-marker.pin-wohlfuehlort .pin { background-image:url(/template/pins/pin-wohlfuehlort.svg); }
.svg-marker.pin-wunschort .pin { background-image:url(/template/pins/pin-wunschort.svg); }

/*
.svg-marker.user-marker .pin::after {
	content:"";
	position:absolute;
	display:block;
	left:0;
	right:0;
	bottom:-1px;
	height:5px;
	border-radius:50%;
	background-color:rgba(0,0,0,0.2);
}
*/
.svg-marker.pin-standard.user-marker .pin {
	background-image:url(/template/pins/pin-standard-user.svg);
}
.svg-marker.pin-innovationen.user-marker .pin { background-image:url(/template/pins/pin-innovationen-user.svg); }
.svg-marker.pin-menschundmeer.user-marker .pin { background-image:url(/template/pins/pin-menschundmeer-user.svg); }
.svg-marker.pin-problemzone.user-marker .pin { background-image:url(/template/pins/pin-problemzone-user.svg); }
.svg-marker.pin-wohlfuehlort.user-marker .pin { background-image:url(/template/pins/pin-wohlfuehlort-user.svg); }
.svg-marker.pin-wunschort.user-marker .pin { background-image:url(/template/pins/pin-wunschort-user.svg); }

.marker-locked {
	display:none;
}
.svg-marker.marker-pending .pin::after {
	content:"";
	position:absolute;
	left:-1px;
	top:2px;
	width:22px;
	height:22px;
	display:block;
	border:2px solid red;
	border-radius:50%;
	animation-name:pendingPulse;
	animation-duration:1.7s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-timing-function:ease-out;
}
@keyframes pendingPulse {
	0% {
		transform:scale(1);
		opacity:0.4;
	}
	100% {
		transform:scale(3.5);
		opacity:0;
	}
}


/* Allgemein */
#mobinavbar {
	justify-content:flex-end;
	pointer-events:none;
}
#mobinavbar > img {
	pointer-events:auto;
}


/* ========= Map App ============= */


.map-frame {
	position:relative;
	width:100vw;
	height:100vh;
	overflow:hidden;
	display:flex;
	flex-wrap:nowrap;
	align-items:flex-start;
	justify-content:flex-start;
}

.map {
/*
	position:absolute;
	left:0;
	top:0;
*/
	flex:1 1 auto;
	height:100%;
	background:lightskyblue;
}
#panel {
	position:relative;
	left:0;
	top:0;
	width:33%;
	max-width:400px;
	flex:1 1 auto;
	box-shadow:none;
	font-size:var(--szPanel);
	
}
.map-overlay {
	position:absolute;
	left:0;
	top:0;
	z-index:5000;
}
.xmap-panel{
	width:420px;
	left:auto;
	right:-420px;
	height:100%;
	background-color:white;
	box-shadow:0 0 0px rgba(0,0,0,0.2);
	transition:all 0.4s ease;
}
.xmap-panel.active {
	box-shadow:0 0 24px rgba(0,0,0,0.2);
	right:0px;
}

.map-panel-buttons {
	position:absolute;
	top:10px;
	left:0;
	transform:translateX(calc(-100% - 10px));
}
.map-text-button {
	display:inline-block;
	line-height:1;
	padding:0.2rem;
	min-width:2rem;
	text-align:center;
	background-color:rgba(0,0,0,0.5);
	color:white;
	border-radius:4px;
	cursor:pointer;
}

/* ========= Sidebar Panel Controls ============= */

.panel-controls {
	line-height:1;
	text-align:right;
}
.panel-controls .fa {
	font-size:18px;
	cursor:pointer;
}
.panel-button {
	cursor:pointer;
}
.panel-button {
   width: 100%;
   line-height: 1em;
   background-color: var(--primary);
   color: white;
   text-align: right;
   text-transform: uppercase;
   text-decoration: none;
   display: block;
   padding: 1em;
   transition: 0.5s all;
   letter-spacing: 1px;
   padding-right:30px;
}
.panel-button:hover {
	background-color:var(--primary-dark);
}
.login-button::before, .logout-button::before {
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	margin-right:1rem;
	line-height:1;
	vertical-align:middle;
	background:transparent url(/template/login-dsm.svg) no-repeat center center;
	background-size:contain;
}

.login-button {
	display:inline-block;
}
.map-type-10 .login-button {
	visibility:hidden;
}

.logout-button {
	display:none;
}
.logged-in .logout-button {
	display:inline-block;
}
.logged-in .login-button {
	display:none;
}
.form-feedback-browser {
	display:block;
}
.form-feedback-online {
	display:none;
}
.logged-in .form-feedback-browser {
	display:none;
}
.logged-in .form-feedback-online {
	display:block;
}


/* ========= Sidebar Panels ============= */


.panel-section {
	padding:1rem 2rem;
}
.panel-content {
	padding:1rem;
}
.panel-pages {
	position:relative;
	width:100%;
	height:calc(100vh - 56px);
	overflow-x:hidden;
	overflow-y:auto;
}
.panel-page {
	position:absolute;
	left:0;
	right:0;
	top:0;
	padding: 0px 30px 40px 30px;
	display:none;
}
.panel-editor.panel-page {
	padding:0 0 80px 0;
}
.panel-editor-inner {
	padding:1rem 30px 0px 30px;
}
.panel-view {
	padding-top:30px;
}


/* ========= Panel Content ============= */

/* --- Intro-Panel --- */
.intro p {
   line-height:1.6em; 
}
.intro h2 { 
   color: var(--primary);
   text-transform: uppercase;
   font-size: 32px;
   margin-top:0;
}

.intro-header { 
   text-align:center; 
   padding-bottom: 2em;
}

.intro-logo { width: 45%; max-width: }



.intro-footer {
   margin-top: 2em;
   border-bottom: 5px var(--primary) solid; 
   padding-bottom:15px;
}
.intro-footer img { width: 33%; }

ul.intro-navigation  {
   list-style: none;
   margin:0;
   padding: 0;
   
}

ul.intro-navigation li a {
   line-height: 1em;
   display: block;
   padding: 0.25em 1em 0.25em 0;
   text-decoration: none;
   text-transform: uppercase;
   color: var(--primary);
   margin-bottom: 5px;
}


.map-panel p {
	margin:0.5rem 0 1rem 0;
}


/* --- Marker View-Panel --- */

.marker-title {
}
.marker-text {
}
.marker-picture {
	text-align:center;
	margin-bottom: 1rem;
}



.marker-audio {
	text-align:center;
	margin-bottom: 1rem;
}

.marker-picture img {
	display:inline-block;
	width:100%;
	height:auto;
	max-height:40vh;
	object-fit:contain;
	/*
	max-height:200px;
	object-fit:contain;
	object-position:top center;
	*/
}
.marker-meta p {
	margin:0;
	padding:0;
	line-height:1.3;
}
.marker-comments {
	padding:0.5rem 0;
	margin:0.5rem 0;
	border-top:1px solid var(--line-color);
}

.comment-entry {
	margin-bottom:1rem;
}

.comment-entry-text {
	color:black;
}

.comment-entry-author {
	color:var(--grey-color);
}

.comment-entry-time {
	color:var(--light-color);
}


.form-section {
	padding:0;
}

.form-section-label {
	margin:0 0 1rem 0;
	padding:1rem 0;
}

.heading-label {
	font-size:var(--szMedium);
	font-weight:bold;
	display:block;
	color:black;
	line-height:1.1;
	margin:0 0 1rem 0;
}

.row .heading-label {
	font-size:15px;
	font-weight: normal;
	margin:0;
}


/* --- Marker Form --- */


.dsm-label {
	font-weight:bold;
	display:inline-block;
	margin-right:0.5rem;
}
.form-input,
.form-textarea {
	display:inline-block;
	width:100%;
	border:1px solid var(--grey-color);
	font-family: inherit;
	font-size:var(--szPanel);
	padding:0.5rem;
	line-height:1.4;
	border-radius:8px;
	outline: 0;
}

.form-input:focus,
.form-textarea:focus {
	border-color: var(--primary);
	outline: none;
}


.form-textarea {
	margin-top:1rem;
}
/* ---------------------------------------
	Orga
------------------------------------------*/

.panel-page h3 {
	color:var(--primary);
}

.marker-approval {
	padding:0.5rem 0;
}
.approval-list {
	list-style-type:none;
	margin:0;
	padding:0;
}
.approval-list li {
	margin:0 0 0.5rem 0;
	padding:0.5rem 0 0.5rem 0;
	border-bottom:1px solid var(--primary);
	overflow:hidden;
}
.approval-list img {
	display:block;
	width:64px;
	height:64px;
	float:left;
	object-fit:contain;
	margin:0 0.5rem 0.2rem 0;
}
.approval-list .title {
	display:block;
	font-weight:600;
	margin-right:1rem;
}
.approval-list .text {
}

/* -----------------------------------------
	 Form Button 
-------------------------------------------- */

.form-button {
  display: inline-block;
  border-radius: calc(3px * var(--ratio));
  border: none;
  letter-spacing: calc(3 * var(--leading, 0.025em));
  font-family: inherit;
  color: inherit;
}

.form-button.button-primary {
	color:white;
	background-color:var(--primary);
}
.form-button.button-primary:hover {
	color:white;
	background-color:var(--primary-dark);
}

.form-button-small,
.form-button {
	display:inline-block;
	line-height:1;
	color:white;
	text-align:center;
	padding:12px 20px;
	border-radius:8px;
	background-color:var(--primary);
	font-size:var(--szPanel);
	cursor:pointer;
}

.form-button-small {
	border-radius:4px;
	padding:4px 5px;
	font-size:var(--szSmall);
	margin:0 0.2rem;
}
.button-ok {
	color:var(--green);
}
.button-del {
	background-color:var(--warning);
}

.form-button.form-delete {
		padding:10px 18px;
}

span.form-button {
/* 	padding:16px 16px 16px 16px; */
}
.form-button:hover {
	background-color:var(--primary-dark);
	color:white;
}
.form-button:active { transform:scale(0.95); }

.form-button-small[data-fn="approveComment"],
.form-button-small[data-fn="approve"] {
	background-color:var(--ok);
}
.form-button-small[data-fn="decline"] {
}
.form-button-small[data-fn="removeComment"],
.form-button-small[data-fn="remove"] {
	background-color:var(--warning);
}

.form-controls-section {
	padding:10px 30px;
	background-color: var(--primary-light) 
}

.form-buttons {
	padding:0;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
}

.form-buttons .section-right {
	margin-left:auto;
}

.form-buttons .section-bottom {
	align-self:bottom;
}

.form-delete .fa {
	font-size:18px;
}

.form-buttons .section-left {
}

.form-buttons h3 {
	margin:0;
}

/* -------------------------------------------- */

.section-right {
	display:flex;
	gap:0.5rem;
	justify-content:flex-end;
	align-items:center;
}

.form-link {
	cursor:pointer;
}

.form-link:hover {
}
.filedialog-wrapper {
	padding:1rem 0;
	margin:1rem 0;
}

.dropzone.file-upload {
	position:relative;
	border:1px solid var(--grey-color);
	padding:5px;
	display:flex;
	justify-content:center;
	align-items:center;
	/* width:300px; */
	height:200px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	border-radius:8px;
	max-width:100%;
	overflow:hidden;
}
.dropzone .label {
	color:#aaa;
/*
	width:100%;
	height:auto;
*/
	display:block;
}
.dropzone .overlay-button {
	position:absolute;
	bottom:5px;
	right:5px;
	padding:5px;
	text-align:center;
	line-height:1;
	border:1px solid #ddd;
	background-color:white;
	display:none;
}
.dropzone.withImage .label {
	display:none;
}
.dropzone.withImage .overlay-button {
	display:block;
}
.dropzone.active {
	outline:2px solid lightgreen;
}

/* Comments */
.comment-editor {
	height:6rem;
}
.comment-buttons {
	padding:0.5rem 0;
}


/* ========= In-app dialog ============= */

.map-dialog-backdrop {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color:rgba(0,0,0,0.2);
	z-index:9900;
	display:flex;
	display:none;
}
.xmap-dialog-window {
	min-width:320px;
	max-width:50%;
	min-height:200px;
	max-height:800px;
	margin:15% auto auto auto;
	background-color:#fff;
	position:relative;
	box-shadow:0px 0px 16px rgba(0,0,0,0.6);
}
.map-dialog-window {
  border: none !important;
  border-radius: calc(5px * var(--ratio));
  box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 12vh 1.6rem;
  width: 60%;
  max-width: 860px;
  font-size: 16px;
  margin:auto;
  background-color:#fff;
  position:relative;
}
.dialog-autosize .map-dialog-window {
	width:auto;
	/*min-width:320px;*/
	padding:2rem 1.6rem 2rem 1.6rem;
}

.map-dialog-content {
	padding:25px 25px 12px 25px;
}
.map-dialog-content a {
	text-decoration:underline;
	
}
.dialog-autosize .map-dialog-content {
	padding-bottom:45px;
}
.map-dialog-controls {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:50px;
	border-top:1px solid #eee;
	display:flex;
	padding:0 25px;
	justify-content:center;
	align-items:center;
}
.map-dialog-ok,.map-dialog-cancel {
  line-height: 1;
  padding:0.5rem 1.5rem;
  margin:0;
  display:inline-block;
  cursor:pointer;
  display:none;
  user-select:none;
}



.dlg_with_cancel .map-dialog-cancel { display:inline-block; }
.dlg_with_ok .map-dialog-ok { display:inline-block; }

.dlg_with_cancel.dlg_with_ok .map-dialog-controls { justify-content:space-between; }

.map-dialog-close {
	position:absolute;
	right:12px;
	top:12px;
	color:#888;
	font-size:28px;
	color:var(--primary);
	font-weight:lighter;
}
.map-dialog-backdrop.without_buttons .map-dialog-controls {
	display:none;
}

@media (max-width: 800px) {
	
	
	.map-dialog-window {
		padding: 20px 10px;
		width: 90%;
		max-width: 860px;
		font-size: 14px;
	}

	.map-dialog-window h2#dialog_title {
		font-size: 19px !important;
		margin: 1.5em 0 0;
	}

	.map-dialog-window p {
		margin: 0;
	}   
	
	.map-dialog-content {
		padding:0;
	}
	
	.map-dialog-window input {
		font-size: 15px;
		padding: 7px
	}

	.dialog-autosize .map-dialog-content {
		padding-bottom:45px;
	}

	.map-dialog-close {
		position:absolute;
		right:12px;
		top:12px;
	}
	
}


/* ========= Pin-Selector ============= */

.pin-selector {
	display:none;
}
.pin-selector.active {
	display:block;
}

/* --- form feedback ---*/
.form-feedback, .form-feedback span {
	font-size:var(--szSmall);
	color:#888;
}
.form-feedback span {
	color:transparent;
}
.form-feedback.active span {
	animation-name: pulseFeedback;
	animation-duration: 0.3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes pulseFeedback {
 0% {
 	color:transparent;
 }
 100% {
 	color:var(--feedback-color);
 }
}


/* -------- Tour-Controller ------ */
.tour-toggle .panel-button {
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
.tour-toggle .panel-button .fa {
	display:inline-block;
	font-size:30px;
	margin-right:0.5rem;
}
.tour-controller {
	max-height:0;
	overflow:hidden;
	transition:all 0.9s ease;
}
.tour-controller.active {
	max-height:200px;	
}
.tour-selector {
	padding:10px 30px;
}
.tour-select {
	width:100%;
	background-color:white;
	border:1px solid #aaa;
	padding:3px;
	font-family:inherit;
	font-size:inherit;
	border-radius:6px;
}

.tour {
	position:relative;
	padding:10px 30px;
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	gap:15px;
}
.tour .tour-title {
	flex: 1 1 100%;
}


/* --- Galerie-Editor --- */
.gallery-button-col {
	display:none;
}
.logged-in .gallery-button-col {
	display:block;
}
.icon-gallery {
	display:flex;
	justify-content:flex-start;
	flex-wrap:nowrap;
	align-items:center;
	width:100%;
	position:relative;
	overflow:hidden;
}
.gallery-icon {
	display:inline-block;
	flex:0 1 auto;
	height:auto;
	max-width:12%;
	position:relative;
	outline:none;
	border:none;
}
.gallery-icon img {
	display:block;
	aspect-ratio:1/1;
	object-fit:cover;
	width:100%;
	height:auto;
}



.row.image-upload .heading-label {
	font-size:14px;
	font-weight: normal;
	margin:0;
	padding-top:1em;
}

.gallery-grid {
	display:grid;
	gap:0.5rem;
	grid-template-columns: repeat(4,1fr);
}
.gallery-card {
	padding:12px;
	border:1px solid #bbb;
	position:relative;
}
.gallery-image {
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	background-color:#f0f0f0;
}
.gallery-image.active {
	background-color:green;
}
.gallery-image {
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
.gallery-image img {
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.gallery-caption {
	width:100%;
	margin-top:10px;
	padding:5px 0;
}
.gallery-caption input {
	width:100%;
	background-color:transparent;
	text-align:left;
	padding:5px;
	font-size:12px;
	margin:0;
}
.gallery-caption textarea {
	width:100%;
	height:3rem;
	background-color:transparent;
	text-align:left;
	padding:5px;
	font-size:11px;
	margin:0;
	border:1px solid #ddd;
	border-radius:6px;
	resize: none;
}
.gallery-caption textarea::placeholder {
	color:#e5e5e5;
}
.gallery-grid .dropzone .overlay-button {
	top:5px;
	right:5px;
	bottom:auto;
}
.gallery-grid .dropzone.wImage .overlay-button {
	display:block;
}


/* ========= IKON ============= */

.uk-grid {
	align-items:flex-start;
}

.ikon-auswahl {
   position: absolute;
   left: 50%;
   top: 2%;
   width: 90%;
   max-width:600px;
   transform: translatex(-50%);
   height: auto;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
   padding: 3% 5%;
   box-sizing: border-box;
   border-radius: 6px;
}

.ikon-auswahl h3 {
   margin:0;
   padding:0;
   font-size: var(--szLarge);
   line-height:1.2;
   text-transform: uppercase;
   margin-bottom: 10px;
}

.pin-wrapper {
}
.pin-entry {
	padding:1rem;
	border:1px solid #ddd;
	border-radius:12px;
	width:140px;
	height:140px;
}
.pin-entry img {
	display:block;
	width:90px;
	height:55px;
	margin:0 auto;
	object-fit:contain;
	object-position:center;
}
.pin-caption {
	text-align:center;
	font-size:16px;
	line-height:1.1;
	margin-top:10px;
}


/* -----------------------------------------
	Lang Menu
-------------------------------------------- */

.lang-menu a { 
	font-size: 11px; 
	display: inline-block; 
	margin-right: 1rem; 
	text-decoration: none;
	color: rgba(255,255,255,0.5);
}

.lang-menu a:hover {
	color: darkorange;
}

.lang-menu a.langaktiv { color:white;}

/* ------- mobile ---------- */




@media all and (max-width: 800px) {
	html,body {
		overflow:auto;
	}
	.header {
		display:none;
	}
	.map-frame {
		display:block;
		height:auto;
		max-height:none;
		overflow-x:hidden;
		overflow-y:auto;
		position:relative;
	}
	
	#map {
		width:100%;
		height:50vh;
	}
	#panel {
		left:0;
		top:0;
		right:auto;	bottom:auto;
		width:100%;
		max-width:100%;
		height:auto;
		position:relative;
		transition:none;
	}
	.panel-pages {
		width:100vw;
		display:block;
		height:auto;
		overflow:auto;
	}
	.panel-page {
		position:relative;
		left:0;top:0;
		right:auto;bottom:auto;
		width:100%;
		height:auto;
	}
	
	/* -----------------------------------------
		Editier-Bereich		
	-------------------------------------------- */

	
	#x-panel {
		position:fixed;
		top:auto;
		left:0;
		bottom:0;
		right:auto;
		width:100%;
		max-width:100%;
		height:55vh;
		z-index:5000;
	}
	
	#x-panel.fullscreen {
		position:fixed;
		top:0;
		left:0;
		bottom:auto;
		right:0;
		width:100%;
		max-width:100%;
		height:100vh;
		z-index:12000;
	}
	
	#panelControls {
		display:none;
	}
	.x-panel-section-bottom {
		width:100%;
	}
	
	.form-controls-section {
		width: 100%;
		height: auto;
		padding:10px 30px 10px 30px;
		background-color: var(--primary-light);
		
	}
	
	.form-buttons {
		padding:0;	
		border: none;
		
	}
	

	.panel-editor-inner {
		padding: 12px 30px 0px 30px;
	}

	
	select.dsm-form-element {
		width: 100% !important;
	}
	
	
}


/* -----------------------------------------
	Sprechblase
-------------------------------------------- */

.sprechblase {
   position: absolute;
   border: 1px solid red;
   width: 150px;
   height: 150px;
   top:0;
   left: 0;
   z-index: 1000;
   /* transform: translateX(100%); */
}


.speech-bubble, .speech-bubble * { box-sizing: border-box }

.speech-bubble {
  --bbColor: #00AFDE;
  --bbArrowSize: 1.5rem;
  --bbBorderRadius: 0.25rem;
  --bbPadding: 1rem;
  
  position: absolute;
  top:0;
  left: 30px;
  /* transform: translateX(105%); */
  width: 33vw;
  
  background: var(--bbColor);
  border-radius: var(--bbBorderRadius);
  padding: var(--bbPadding);
/*   filter: drop-shadow(0px 0px 0.25rem rgba(0,0,0,0.25)); */
  transition: transform 0.25s ease;
   color: white;
   z-index:1000;
}

.speech-bubble::before{
  content: ''; 
  position: absolute;
  background: var(--bbColor);
}

.speech-bubble.pleft  { margin-left: var(--bbArrowSize); }


/* left and right  */
.speech-bubble.pleft::before {
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
  right: calc(100% - 2px);
}

.speech-bubble.pleft.atop::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}

/* ----------------------------------------- */

.intro-index-teaser {}

.intro-index-teaser h3 {
	font-size: 17px;
	border-top: 1px dotted var(--blau);
	padding-top: 0.5rem; 
	margin-bottom: 0.75rem;
}

.home-card-intro {
	width: 100%;
	margin: 1rem auto;
	
}

.home-card {
	display: block;
	border-top: 3px solid var(--blau);
	padding: 0;
	border-radius: 0;
	margin: 0 0 10px !important; 	
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

a.home-card:hover {
	text-decoration: none !important;
	/* background-color: #eee; */
	transition: all 1s;
}

.home-card-ikon {
	justify-content: center;
	align-self: center;	
	text-align: left;		
	
}

.home-card-ikon-img {
	width: 80px !important;
	filter: brightness(95%);
}

.home-card-entry {
	justify-content: center;
	align-self: center;	
	padding-left: 1rem;
}

.home-card h4 {
	font-size: 14px;
	margin: 0;
}

.home-card p {
	font-size: 12px;
	margin: 0;
}

/* Float or flex… */
.susy {  display: flex; }

/* Setup… */
.susy-item {
  --span: initial; /* avoid inheritance */
  --percentage: calc(var(--span) * 100%);
  width: var(--percentage, initial);
}

/* Items… */
.susy-1  {  --span: 1/12; }
.susy-2  {  --span: 2/12; }
.susy-3  {  --span: 3/12; }
.susy-4  {  --span: 4/12; }
.susy-5  {  --span: 5/12; }
.susy-6  {  --span: 6/12; }
.susy-7  {  --span: 7/12; }
.susy-8  {  --span: 8/12; }
.susy-9  {  --span: 9/12; }
.susy-10 {  --span: 10/12; }
.susy-11 {  --span: 11/12; }
.susy-12 {  --span: 12/12; }

@media (max-width: 400px) {
/* 
	.susy:not(.home-card) {  display: block; }
  .susy-item:not(.home-card-entry) { width: 100%; } */
}


/* ----------------------------------------- */

.intro-index-teaser {}

.intro-index-teaser h3 {
	font-size: 17px;
	border-top: 1px dotted var(--blau);
	padding-top: 0.5rem; 
	margin-bottom: 0.75rem;
}

.home-card-intro {
	width: 100%;
	margin: 1rem auto;
	
}

.home-card {
	display: block;
	border-top: 3px solid var(--blau);
	padding: 0;
	border-radius: 0;
	margin: 0 0 10px !important; 	
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

a.home-card:hover {
	text-decoration: none !important;
	/* background-color: #eee; */
	transition: all 1s;
}

.home-card-ikon {
	justify-content: center;
	align-self: center;	
	text-align: left;		
	
}

.home-card-ikon-img {
	width: 80px !important;
	filter: brightness(95%);
}

.home-card-entry {
	justify-content: center;
	align-self: center;	
	padding-left: 1rem;
}

.home-card h4 {
	font-size: 14px;
	margin: 0;
}

.home-card p {
	font-size: 12px;
	margin: 0;
}

/* Float or flex… */
.susy {  display: flex; }

/* Setup… */
.susy-item {
  --span: initial; /* avoid inheritance */
  --percentage: calc(var(--span) * 100%);
  width: var(--percentage, initial);
}

/* Items… */
.susy-1  {  --span: 1/12; }
.susy-2  {  --span: 2/12; }
.susy-3  {  --span: 3/12; }
.susy-4  {  --span: 4/12; }
.susy-5  {  --span: 5/12; }
.susy-6  {  --span: 6/12; }
.susy-7  {  --span: 7/12; }
.susy-8  {  --span: 8/12; }
.susy-9  {  --span: 9/12; }
.susy-10 {  --span: 10/12; }
.susy-11 {  --span: 11/12; }
.susy-12 {  --span: 12/12; }

@media (max-width: 400px) {
/* 
	.susy:not(.home-card) {  display: block; }
  .susy-item:not(.home-card-entry) { width: 100%; } */
}