@import url(/p/fonts/ptsans/ptsans.css);
@import url(/p/fonts/lato/lato.css);
@import url(/p/fonts/robotocondensed/roboto.css);

:root {
	--ubs-green-brand: #76b837;
	--ubs-green-invert: #588023;
	--ubs-green-a11y-text: #5a8524;
	--ubs-image-radius: 10px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	font-family: "Roboto Condensed", sans-serif;
   	margin: 0px;
	padding: 0px;
}

@media screen and (max-width: 768px) {
	* {	
		font-size: 16px;
	}

	#spielplan span.title * {
		font-size: 18px;
	}
}

.clearfix 
{
	clear: both;
}
.forminline
{
	display: inline;
}
.fib
{
	-moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
	border: 1px solid #ccc;
	color: #666;
	padding: 3px 10px 3px 10px;
}
.fib:hover
{
		border: 1px solid #76b837;
	color: #76b837;
}

/*	LOGIN  */
#login 
{
	display: inline-block;
	font-family: 'PT Sans', sans-serif;
	border: 1px solid #ddd;
	margin: auto;
	-moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
	padding: 10px;
}
#login form *
{
	color: #888;
}
#login form 
{
	margin-top:20px;
	font-size: 18px;
	line-height: 24px;
}

#login p
{
	color: #888;
}

#login input
{
	border: 1px solid #ccc;
	display: inline;
	height: 32px;
	display: inline-block;
	-moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
	width: 150px;
	margin: 5px;
}
#login input:hover
{
	border: 1px solid #76b837;
	color: #76b837;
}
#login span
{
	display: inline-block;
	height: 24px;
	text-align:right;
	vertical-align: top;
	padding-right: 5px;
	color: #888;
	width: 130px;
	margin: 5px;
}


/* LOCK SCREEN */

#lock 
{
	height: 100px;
	margin: auto;
	position: absolute;
	top: 40%;
	left: 40%;
	font-family: 'PT Sans', sans-serif;
	font-weight: bold;
	font-size: 48px;
	vertical-align: text-bottom;
	line-height: 46px;
	color: #333;
}
#lock form *
{
	color: #888;
}
#lock form 
{
	margin-top:20px;
	font-size: 12px;
	line-height: 24px;
	color: #888;
}

#lock input
{
	border: 1px solid #ccc;
	display: inline;
	height: 24px;
	display: inline-block;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
	width: 70px;
}
#lock input:hover
{
	border: 1px solid #76b837;
	color: #76b837;
}
#lock span
{
	display: inline;
	width: 80px;
	height: 24px;
	text-align:right;
	vertical-align: top;
	padding-right: 5px;
}
#error 
{
	font-size: 12px;
	line-height: 22px;
	display: inline-block;
	padding: 5px;
	background-color: #fb7a6e;
	color: #fff;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
	margin-top: 15px;
	font-weight: 700;
	margin-bottom: 20px;

}


#blackBar{
	position:fixed;
   top:0;
   left:0;
   width:100%;
   height:45px;
   background-color:black;
/*
   -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
*/
/*
background: rgba(61,61,61,1);
background: -moz-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(61,61,61,1)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#000000', GradientType=0 );
*/

    background: #1A1A1A;
/*
    background: -moz-linear-gradient(top,  #444444 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top,  #444444 0%,#000000 100%);
    background: -o-linear-gradient(top,  #444444 0%,#000000 100%);
    background: -ms-linear-gradient(top,  #444444 0%,#000000 100%);
    background: linear-gradient(to bottom,  #444444 0%,#000000 100%);
*/
	z-index: 99999;	
}
/* desktop screens fixed top bar */
/*
@media screen and (min-width: 640px) 
{
	#blackBar{
	position:fixed;
   top:0;
   left:0;
	}
}
*/
/* http://www.cssmatic.com/gradient-generator#%27\-moz\-linear\-gradient\%28top\%2C\%20rgba\%2861\%2C61\%2C61\%2C1\%29\%200\%25\%2C\%20rgba\%280\%2C0\%2C0\%2C1\%29\%20100\%25\%29\%3B%27 */


#navBar
{
	width: 100%;
	max-width: 1280px;
	margin: auto;
	height: 45px;
	color: #fff;
/*	border-left: 1px dotted #444;
	border-right: 1px dotted #444; */
	position: relative;
}

#navBar #brand {
	position: absolute;
	right: 0px;
	top: 2px;
	height: 90%;
	display: block;
}
#navBar #brand img {
	height: 100%;
	width: auto;
}

.numNew
{
	background-color: #87153d;
	padding: 0px 4px 0px 4px;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}

.numInv
{
	padding: 0px 4px 0px 4px;
	background-color: #999;
	color: #000;
	color:  rgba(0, 0, 0, 1.0);
   -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;	
}

/*
#navBar span
{
	font-family: 'PT Sans', sans-serif;
	font-weight: bold;
	font-size: 24px;
	margin-left: 54px;
	display: inline-block;
	color: #888;
	padding-top: 8px;
}
*/

/*
@media screen and (max-width: 700px) {
#navBar span {
 font-size: 16px;
 }
}

.navBarSubRight 
{
	display: inline;
	float: right;
	font-size: 24px;
	padding-top: 8px;
		color: #888;


}
.navBarSubRight div
{
	display: inline;
	padding-right: 10px;
	padding-left: 20px;

}
.navBarSubRight div a
{
		color: #888;
}

.navBarSubRight div a:hover
{
		color: #76b837; 
}

@media screen and (max-width: 1000px) {
.navBarSubRight {
 display: none;
 }
}


#navBar i
{
	padding: 3px;
}
*/


#box
{
	border: 1px solid red;
}



#root_container 
{
	width: 100%;
	max-width: 1280px;
	margin: auto;
/*
	box-sizing: border-box;
	border: 1px dotted green;
*/
}
@media screen and (max-width: 640px) {
#root_container 
{
	width: 100%;
}
}

#head {
	width: 100%;
	box-sizing: border-box;
/*	border-top: 1px solid grey; */
	padding-top: 44px;
	margin: auto;
	overflow: visible;
	position: relative;
	z-index: 2;
}



#content 
{
	width: 95%;
	margin: auto;
	font-family: "Roboto Condensed", sans-serif; 
/*
	box-sizing: border-box;
	border: 1px dotted red;
	*/
}
@media screen and (min-width: 1280px) {
	#content 
	{
		width: 100%;
	}
}
		
#left {
	width: 400px;
	display: inline-block;
	color: #666;
}
#right {
	width: 400px;
	display: inline-block;
}

@media screen and (max-width: 640px) {
#right {
 display: none;
 }
}


/*  COLUMN */
.column2 
{
		font-family: "Roboto Condensed", sans-serif;
	color: #555;
	width: 50%;
	float: left;
	padding: 0;
	min-height: 300px;
	min-width: 320px;

/*	position: relative;	*/
}

@media screen and (max-width: 500px) {
	.column2 
	{
		
		width: 100%;
	/*	border: 1px dotted red; 	*/
	}
/*
	.column p {
		text-align: left;
		font-size: 1.5em;
	}

	.column:nth-child(2) {
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
		background-position: 90px 3em;
	}
	*/
}

.column3
{
	color: #555;
	width: 33%;
	vertical-align: top;
	padding: 0px;
/*	min-height: 300px;
	min-width: 320px;
	position: relative; */	
	display: inline-block;

}
.column4
{
	color: #555;
	width: 25%;
	vertical-align: top;
	padding: 0px;


/*	min-height: 300px;
	min-width: 320px;
	position: relative; */	
	display: inline-block;
}


/* FOOTER */

.footer
{
	font-size: 13px;
	color: #999;
}

.footer a
{
	padding: 10px 10px 10px 0px;
	font-size: 23px;
	text-decoration: none;
	white-space: nowrap;
}

@media screen and (min-width: 768px) {
	.footer a:not(.social)
	{
		display: block;
		padding: 2px 0 0 0;
	}

	.footer-social .follow a.social
	{
		display: inline-block;
		padding: 2px 0;
	}
}

.footer a:hover
{
	color: #76b837;
}

#footer_container
{
	width: 100%;
	max-width: 1280px;
	margin: 20px 0 50px 0;
	padding-top: 10px;
	border-top: 1px solid #ddd;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
	#footer_container
	{
		margin: 20px 0 20px 0;
	}
}

#footer_container p
{
	margin: 0;
	text-align: justify;
}

#footer_container .footer-self-text p,
#footer_container .footer-funder-text
{
	max-width: 24em;
	text-align: left;
}

.footer-row
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px 20px;
	padding: 14px 10px;
	box-sizing: border-box;
}

.footer-row-2,
.footer-row-3
{
	border-top: 1px solid #e8e8e8;
}

@media screen and (min-width: 768px) {
	.footer-row
	{
		flex-direction: row;
		align-items: center;
	}

	.footer-row.footer-row-1
	{
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px 32px;
	}

	.footer-row-1 .footer-self,
	.footer-row-1 .footer-social
	{
		align-self: flex-start;
		margin-top: 0;
		padding-top: 0;
	}

	.footer-self
	{
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		align-items: flex-start;
	}

	.footer-self-brand
	{
		align-items: flex-start;
	}

	.footer-self-text
	{
		flex: 1 1 200px;
	}

	.footer-social
	{
		flex: 0 0 auto;
		width: auto;
		margin-top: 0;
		margin-left: auto;
		text-align: left;
	}

	.footer-social .follow
	{
		display: block;
		width: max-content;
		max-width: 100%;
		margin: 0 0 0 auto;
		padding: 0;
		text-align: left;
	}

	#footer_container .footer-social .follow p
	{
		margin: 0 0 6px 0;
		padding: 0;
		line-height: 1.35;
		font-size: 13px;
		text-align: left;
	}

	.footer-social .follow a.social
	{
		display: inline-block;
		padding: 2px 0;
	}

	.footer-row.footer-row-2,
	.footer-row.footer-row-3
	{
		display: block;
		width: 100%;
	}

	.footer-row-2 .footer-partner-logos,
	.footer-row-3 .footer-partner-logos--distributed
	{
		width: 100%;
		max-width: 100%;
	}

	.footer-row-2 .footer-partner-logos--distributed,
	.footer-row-3 .footer-partner-logos--distributed
	{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		justify-content: space-between;
		justify-items: start;
		align-items: center;
	}
}

.footer-self
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 16px;
	flex: 0 1 auto;
	min-width: 0;
}

.footer-self-brand
{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.footer-self-text
{
	flex: 1 1 auto;
	min-width: 0;
	max-width: 24em;
}

.footer-social
{
	flex: 0 1 auto;
	align-self: flex-start;
}

.footer-partner-group
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex: 0 1 auto;
	min-width: 0;
}

.footer-partner-group-others
{
	align-self: flex-start;
}

.footer-partner-heading
{
	font-size: 12px;
	font-weight: 400;
	color: #888;
	text-transform: none;
	letter-spacing: 0.02em;
}

.footer-row-3
{
	--footer-partner-logo-gap: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e8e8e8;
}

.footer-row-2 .footer-partner-logos--distributed,
.footer-row-3 .footer-partner-logos--distributed
{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: space-between;
	justify-items: start;
	align-items: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0;
}

.footer-row-3 .footer-partner-logos--distributed
{
	margin: 0 0 14px 0;
}

#footer_container .footer-row-3 .footer-partner-link
{
	margin: 0;
	padding: 0 !important;
}

#footer_container #disclaimer
{
	margin-top: 20px;
	padding-top: 0;
}

.footer-partner-logos
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.footer-funder-item
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.footer-funder-text
{
	font-size: 12px;
	line-height: 1.45;
	color: #999;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 24em;
}

.footer-partner-link
{
	display: flex;
	align-items: center;
	padding: 0 !important;
	font-size: inherit;
	white-space: normal;
	line-height: 0;
}

#footer_container .footer-partner-logo,
#footer_container img.ubs
{
	float: none;
	display: block;
	height: auto;
	max-height: 50px;
	width: auto;
	max-width: 100%;
	margin: 0;
	object-fit: contain;
}

/* SVG-Logos kollabieren mit width:auto im Grid auf 0x0 -> feste Höhe erzwingt Breite aus dem Seitenverhältnis */
#footer_container .footer-partner-logo[src$=".svg"]
{
	height: 50px;
	width: auto;
	max-width: none;
}

#footer_container img.ubs
{
	margin-right: 4px;
	cursor: pointer;
}

/* Footer-Logos vereinheitlichen: brightness höher = heller (z. B. 0.65–0.85), opacity 0.85–1 */
#footer_container.footer-logos-greyscale .footer-partner-logo,
#footer_container.footer-logos-greyscale img.ubs
{
	filter: grayscale(100%) brightness(1) contrast(1);
	opacity: 0.7;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

#footer_container.footer-logos-greyscale .footer-partner-link:hover .footer-partner-logo,
#footer_container.footer-logos-greyscale .footer-partner-logo:hover,
#footer_container.footer-logos-greyscale img.ubs:hover
{
	filter: none;
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.footer-row
	{
		gap: 8px;
		padding: 6px 10px;
	}

	.footer-row-1
	{
		padding: 0 10px 6px 10px;
		gap: 0;
	}

	.footer-self
	{
		flex: 0 0 auto;
		width: 100%;
		align-items: flex-start;
		gap: 8px 12px;
	}

	.footer-self-brand,
	.footer-self-text
	{
		padding: 0;
		margin: 0;
	}

	.footer-self-text
	{
		max-width: 100%;
	}

	#footer_container img.ubs
	{
		margin-right: 0;
	}

	.footer-social
	{
		flex: 0 0 auto;
		width: 100%;
		margin-top: 12px;
		padding: 0;
		align-self: stretch;
	}

	.footer-social .follow > p:first-child
	{
		margin: 0 0 8px 0;
	}

	.footer a.social
	{
		display: inline-block;
		padding: 4px 12px 4px 0;
	}

	.footer-row-2
	{
		padding-top: 8px;
	}

	.footer-row-2 .footer-partner-logos--distributed,
	.footer-row-3 .footer-partner-logos--distributed
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--footer-partner-logo-gap, 20px);
	}
}

#footer_container a.footlogo
{
	padding: 0;
}
.follow 
{

  -web-kit-transition:  color 0.7s ease;
  -moz-transition:  color 0.7s ease;
  -o-transition:    color 0.7s ease;
  transition:   color 0.7s ease;
}

.follow a
{
  -web-kit-transition:  color 0.7s ease;
  -moz-transition:  color 0.7s ease;
  -o-transition:    color 0.7s ease;
  transition:   color 0.7s ease;
}

.follow a:hover
{
	color: #76b837;
  -web-kit-transition:  color 0.7s ease;
  -moz-transition:  color 0.7s ease;
  -o-transition:    color 0.7s ease;
  transition:   color 0.7s ease;
}

/* MAPS */
.responsiveMaps {
	  position: relative;
	  padding-bottom: 56%;
	  height: 0;
	  overflow: hidden;
	}
.responsiveMaps iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
}


/*  H E A D E R - I M G B O X */
/* Images, Text, Gradients https://css-tricks.com/design-considerations-text-images/ */
/* https://css-tricks.com/text-blocks-over-image/ */
.imgbox { 
   position: relative; 
   width: 100%; /* for IE 6 */
   margin-bottom: 10px;
   
}
.imgbox img 
{
	width: 100%;
}
.imgbox h2  
{
   position: absolute; 
   bottom: 25px; 
   left: 0; 
   width: 100%; 
 /*  box-sizing: border-box;
   border: 1px solid white; */
}
.imgbox h2 span  
{
	font-family: "Roboto Condensed", sans-serif;
	color: #eee;
	font-weight: lighter;
	font-size: 24px;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
	padding: 10px; 
	background: var(--ubs-green-invert);	


}

/* added for guestbook nav */

.imgboxright {
	width:auto;
    text-align: right;
    padding-right: 20px;
    color: #999;

}
.imgboxleft
{
    float:left;
}

.imgboxright a 
{
	font-size: 18px;
	font-weight: normal;
	text-decoration: none;
	padding: 3px 12px 3px 12px;
	margin: 4px;
	color: #ccc;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(100, 100, 100, 0.7);
	background: var(--ubs-green-invert);

    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
     -khtml-border-radius: 6px;
	border-radius: 6px;
	white-space: no-wrap;
}
.imgboxright a:hover
{
	background: var(--ubs-green-invert);
	background: var(--ubs-green-invert);
}
.imgboxright a.s
{
	background: var(--ubs-green-invert);
}
.imgboxright a.new
{
	color: #eee;
}

/* Jahreswahl unten rechts im Headerbild (z. B. Veröffentlichungen) */
.imgbox:has(.imgbox-year-picker) {
	overflow: visible;
	position: relative;
	z-index: 5;
}

.imgbox:has(.imgbox-year-picker) h2 {
	overflow: visible;
}

.imgboxright.imgbox-year-picker {
	position: relative;
	overflow: visible;
}

.imgboxright.imgbox-year-picker .header-picker-nav {
	text-align: right;
	position: relative;
	z-index: 50;
}

.imgboxright.imgbox-year-picker .header-picker-nav summary {
	color: #eee;
	background: var(--ubs-green-invert);
	padding: 6px 12px;
	border-radius: 6px;
}

.imgboxright.imgbox-year-picker .header-picker-nav summary:hover,
.imgboxright.imgbox-year-picker .header-picker-nav[open] summary {
	color: #fff;
}

.imgboxright.imgbox-year-picker .header-picker-nav__list {
	top: calc(100% + 4px);
	bottom: auto;
	z-index: 100;
}

.imgboxright.imgbox-year-picker .header-picker-nav__list a {
	display: block;
	padding: 7px 16px;
	margin: 0;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
	color: #333;
	background: #fff;
	border-radius: 0;
	white-space: nowrap;
}

.imgboxright.imgbox-year-picker .header-picker-nav__list a:hover,
.imgboxright.imgbox-year-picker .header-picker-nav__list a.active {
	color: #76b837;
	background: #f5f5f5;
}

.desktop {
	display: inline;
}
.mobilex {
	display: none;
}

@media screen and (max-width: 768px) {
	.imgbox h2  
	{
	   bottom: 10px;

	}

	.imgbox h2 span  
	{
		font-size: 16px;
	}
	.desktop {
		display: none;
	}
	.mobilex {
		display: inline;
	}

}
@media screen and (max-width: 400px) {
	.imgbox h2  
	{
	   bottom: 10px; 

	}

	.imgbox h2 span  
	{
		font-size: 10px;
		padding: 2px; 
	}
	.desktop {
		display: none;
	}
	.mobilex {
		display: inline;
	}
	.imgboxright {
	    padding-right: 5px;
	}
	.imgboxright a 
	{
		font-size: 12px;
		font-weight: normal;
		text-decoration: none;
		padding: 3px 10px 3px 10px;
	}
}



/*******************************/

/*******************************/
#debug 
{
	width: 100%;
	max-width: 1280px;
	margin: auto;
	background-color: #f0f0f0;
	color: #666;
	height: auto;
	margin-top: 50px;
	padding: 0px;
	font-size: 12px;
	font-family: "Roboto Condensed", sans-serif;
	border: 1px solid #ddd;
}
#debug th
{
	background-color: #ddd;
}
#debug td
{
	padding: 10px;
	width: 33%;
	vertical-align: top;
}


/*
	generic reused styles
*/
/*
.bottomline 
{
	border-bottom: 1px solid #ddd;
}
.bottomspace
{
	margin-bottom: 15px;
}
.bottompad
{
	padding-bottom: 10px;
}
*/

.uvg 
{
}

.uvg td 
{
	border-left: solid 4px #ccc;
	vertical-align: top;
	padding: 0px 10px 0px 10px;
}

#search > input 
{
	height: 24px;
	margin: 3px 3px 3px 0px;
	color: #666;
	font-size: 16px;
	padding: 5px;
	border: 1px solid #ddd;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
}

#search > button
{
	margin: 3px;
	display: inline;
	color: #888;
	font-size: 20px;
	padding: 5px;
	border: 1px solid #ddd;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
}
#search > button:hover
{
	color: #76b837;
	border: 1px solid #76b837;
}

#savecam 
{
	font-size: 24px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}
#savecam span
{
	margin-left: 10px;
	font-size: 16px;
}

#webcam1wrap {

	position: relative;
}

#chat 
{
	margin-top: 10px;
	font-size: 10px;
}

#cnt 
{
	display: inline-block;
}

.chatbubble {
	background: #888;
	background: rgba(100,100,100,0.5);
	display: inline-block;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
	padding: 3px 6px 3px 6px;
	margin-bottom: 3px;

}
.chatnick {
	color: yellow;
	font-size: 14px;
}
.chattime {
	color:	#bbb;
	font-size: 14px;
}
.chatmsg {
	color: #fff;
	font-size: 14px;
}
.chatviewer {
	color: #444;
	font-size: 14px;
}
#chatboxwrap
{
	position: absolute;
	bottom: 8px;
	width: 100%;		/* textarea */
	height: 100%;
}
#viewercnt {
	top: 10px;
	right: 5px;
	position: absolute;
	font-size: 14px;
	color: #ddd;
}
#chatbox
{
	position: absolute;
	bottom: 0px;
	color: #fff;
	font-size: 15px;
	resize: none;
   	padding: 5px;
   	margin-bottom: 10px;
   	margin-top: 10px;
   	overflow-y: hidden;
   	max-height: 100%;
}



#chat button {
	font-size: 15px;
	margin-left: 2px;
	display: inline;
	color: #666;
}

#chat #nck {
	width: 10%;
}

#chat #acc {
	font-size: 17px;
	border: 1px solid #aaa;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}

#chat #msg {
	width: 75%;
	margin-left: 10px;
}


@media screen and (max-width: 400px) {
	.chatnick {
		font-size: 12px;
	}
	.chattime {
		font-size: 12px;
	}
	.chatmsg {
		font-size: 12px;
	}
	.chatviewer {
		font-size: 12px;
	}
	.chatbubble {
		padding: 2px 2px 2px 2px;
		margin-bottom: 1px;
	}
	#chatboxwrap
	{	
		bottom: 0px;
	}
	#chatbox
	{
		padding: 5px;
	   margin-bottom: 0px;
	   margin-top: 0px;
	   overflow-y: hidden;
	}
	#chat #nck {
		width: 10%;
		font-size: 12px;
	}
	#chat button {
		font-size: 12px;
	}
	#chat #msg {
		width: 70%;
		margin-left: 2px;
		font-size: 12px;
	}
	
}



#chat input
{
	color: #666;

	font-size: 16px;
	border: 1px solid #aaa;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
   padding: 5px;
}

@media screen and (max-width: 400px) {

}


.small 
{
	font-size: 14px;
}

.smaller 
{
	font-size: 15px;
}

.half
{
	line-height: 1.7em;
}

.red 
{
	color: #76b837;
}

.redinv
{
	padding: 0px 6px 1px 6px;
	background-color: var(--ubs-green-invert);
	color: #fff;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;	
}
@media screen and (max-width: 400px) {
.redinv
{
	padding: 0px 2px 0px 2px;
}
}

.kartenlinks 
{
/*	border: 3px dotted #76b837; /


/*	background-color: #ddd; */
	display: inline-block;
	padding: 8px 16px 8px 0px;
	margin-top: 10px;
   -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}

.kartenlinks:hover
{
	/* background-color: #76b837; */
	color: #76b837;
}


/* spielplan + articles */

.tags 
{
/*	background-color: #e0e0e0;			/* #76b837; */
/*	float: right;	*/
	color: #444;
	font-size: 16px;
/*	padding: 2px 4px 2px 4px;
	margin: 5px 2px 2px 2px;
/*	border: 1px solid #444; */
   -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
}
/*
.tags:hover 
{
	background-color: var(--ubs-green-invert);
	color: #fff;
	border: none;
}
*/
@media screen and (max-width: 768px) {
	.tags 
	{
		font-size: 14px;
	}
}


/*
 boxmodel test

http://www.colorzilla.com/gradient-editor/
*/
.innerbox 
{
	padding: 10px 20px 10px 20px;
}
.innerbox10
{
	padding: 10px 10px 10px 10px;
}
.innerbox10top
{
	padding: 0px 10px 10px 10px;
}
.innerbox20top
{
	padding: 10px 20px 10px 20px;
}
.innerboxright10
{
	padding: 10px 0px 10px 10px;
}
.innerbox30 
{
	padding: 10px 30px 10px 30px;
}

.innerboxleft
{
	padding: 10px 20px 10px 0px;
}
.innerboxmiddle
{
	padding: 10px 0px 10px 0px;
}
.innerboxright
{
	padding: 10px 0px 10px 20px;
}



.innerboxtop
{
	padding: 0px 20px 10px 20px;
}

.innerboxtop30m
{
	padding: 0px 30px 10px 30px;
}
@media screen and (max-width: 1024px) 
{
.innerboxtop30m
{
	padding: 20px 0px 10px 0px;
}	
}
/* 2 col articles */
.articleL
{
	padding: 20px 40px 20px 0px;
}
.articleR
{
	padding: 20px 0px 20px 40px;
}

@media screen and (max-width: 768px) {
	.articleL
	{
		padding: 20px 0px 20px 0px;
	}
	.articleR
	{
		padding: 0px 0px 20px 0px;
	}
}
@media screen and (max-width: 400px) {

	.articleL
	{
		padding: 10px 0px 10px 0px;
	}
	.articleR
	{
		padding: 0px 0px 20px 0px;
	}
}



.top30 
{
	margin-top: 30px;
}

.grey 
{
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}

/* 1 block volle breite */
.b1
{
	display: inline-block;
	width: 100%;
	vertical-align: top;
	
/*	box-sizing: border-box;
	border: 1px dotted green; */
}

.textMax 
{
	max-width: 900px;
}

.textMaxx 
{
	max-width: 600px;
}


/* 2 blocks nebeneinander */

/* 3/4 Block, der aber auf 100% geht, wenn mobile */
.b75
{
	display: inline-block;
	width: 75%;
	vertical-align: top;
}
.b25
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
}

.savecamDesktop {
	display: block;
	}

@media screen and (max-width: 1024px) 
{
	.savecamDesktop
	{
		display: none;
	}
	.b75
	{
		display: inline-block;
		width: 100%;
		vertical-align: top;
	}
	.b25
	{
		display: inline-block;
		width: 100%;
		vertical-align: top;
	}
}




/* Ensemble overview */
/* Desktop: 80%-20% */
/* Mobile: 100%-0% */
.boL 
{
	display: inline-block;
	width: 80%;
	vertical-align: top;
}
.boRX
{
	display: inline-block;
	width: 20%;
	vertical-align: top;
}
@media screen and (max-width: 1024px) 
{
	.boL 
	{
		display: inline-block;
		width: 100%;
		vertical-align: top;
	}	
	.boRX
	{
		display: none;
	}
}

.ensemble-overview.boL {
	width: 100%;
}

/* ensemble ov pictures */
.ensemble 
{
	display: inline-block;
	margin: 0px 20px 20px 0px;
	position: relative;
}
.ensemble img.hasvita:hover
{
	  filter: drop-shadow(4px 4px 8px #444);
	-webkit-filter: drop-shadow(4px 4px 8px #444);
	-moz-filter: drop-shadow(4px 4px 8px #444);
	-o-filter: drop-shadow(4px 4px 8px #444);
	-ms-filter: drop-shadow(4px 4px 8px #444);
}
.ensemble img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.ensemble > figcaption
{
	position: absolute;
	bottom: 5px;
	background: var(--ubs-green-invert);
	color: #ddd;
	padding: 3px;
}

@media screen and (max-width: 768px) {

}
@media screen and (max-width: 400px) {
	.ensemble {
		width: 150px;

	}
	.ensemble > figcaption
	{
		bottom: 3px;
		padding: 3px;
	}


}

.underline
{

	text-decoration: none;


}

/* Ensemble-Profile */
/* Desktop: 25% 50% 25%
/* Mobile: 100%-100% 0% */
.beL 
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
}

.beL img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.beL figcaption
{
	display: none;
}
.beM 
{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.beRX
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
}
@media screen and (max-width: 1024px) {
	.beRX{
		display: none;
	}
}
@media screen and (max-width: 400px) {
	.beL 
	{
		width: 100%;
	}
	.beM 
	{	
		width: 100%;
	}
	.innerbox10top {
		padding-left: 0px;
	}
}


/* VA Info: 3 blocks nebeneinander */
/* Desktop: 33.3 (426px) 43.3% (554px)  23.3% (298px) */
/* Mobile: 100%-100%-100% (not implemented) */
.bvi1
{
	display: inline-block;
	width: 33.3%;
	min-width: 420px;
	vertical-align: top;
}
.bvi2
{
	display: inline-block;
	width: 43.3%;
	vertical-align: top;
}
.bvi3
{
	display: inline-block;
	width: 23.3%;
	vertical-align: top;
}

.bvi3 i
{
	/* doesnt work */
}

/* 2 blocks nebeneinander */
.b2
{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

/* 2 blocks nebeneinander, die aber im Mobile auf 100% hoppsen */
.b2m
{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

@media screen and (max-width: 768px) {
.b2m
{
		width: 100%;
}
}


/* 3 blocks nebeneinander */
.b3
{
	display: inline-block;
	width: 33.3%;
	vertical-align: top;
 
}
.b3 img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {

}
@media screen and (max-width: 400px) {
	.b3
	{
	display: inline-block;
	width: 100%;
	}
	.innerboxleft
	{
		padding: 0px 0px 0px 0px;
	}
}


/*  | 33% |   66%   |			b3 + b66  Artcile*/
.b66
{
	display: inline-block;
	width: 66.6%;
	vertical-align: top;
}
@media screen and (max-width: 400px) {
	.b66
	{
		width: 100%;
	}
	.innerbox10
	{
		padding: 10px 0px 0px 0px;
	}
}

/* 4 blocks nebeneinander */
.b4
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
/*
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid red;
*/
}

@media screen and (max-width: 768px) {

.b4.itsold {
	display: none;
	}
.b4.news1 {
	display: block;
}

.b4.news3 {
	display: none;
}
.b4.news4 {
	display: none;
}
}


.b4 img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* b4 inner box */
/* oben rechts unten links */
.b4iA 
{
	padding: 0px 20px 0px 0px;
}
.b4iB
{
	padding: 0px 13px 0px 7px;
}
.b4iC
{
	padding: 0px 7px 0px 13px;
}
.b4iD
{
	padding: 0px 0px 0px 20px;
}

/* aus b4 wird < 768 ein b2 */
@media screen and (max-width: 768px) {
	.b4
	{
		width: 100%;
	}

	.b4iA 
	{
		padding: 0px 0px 0px 0px;
	}
	.b4iB
	{
		padding: 0px 0px 0px 7px;
	}
	.b4iC
	{
		padding: 0px 0px 0px 0px;
	}
	.b4iD
	{
		padding: 0px 0px 0px 7px;
	}
}
/* aus b4 wird < 400 ein b1 */
/*
@media screen and (max-width: 400px) {
	.b4
	{
		width: 100%;
	}
	.b4iA 
	{
		padding: 0px 0px 0px 0px;
	}
	.b4iB
	{
		padding: 0px 0px 0px 0px;
	}
	.b4iC
	{
		padding: 0px 0px 0px 0px;
	}
	.b4iD
	{
		padding: 0px 0px 0px 0px;
	}
}
*/


/* Spezieller 4. Block, nur da wenn genug Platz */
.b4x
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
}
@media screen and (max-width: 1024px) {
.b4x
{
	display: none;
}
}

/* 
	desktop:	|----left block 75%----||---right---|
	mobile:		|---right 100%---|
				|----left 100%----|

	tested for locations + article
*/
.bdm75
{
	display: inline-block;
	width: 75%;
	vertical-align: top;
}
.bdm25r
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
	float: right;
}
.bdm25
{
	display: inline-block;
	width: 25%;
	vertical-align: top;
}
@media screen and (max-width: 1024px) {
.bdm75
{
	width: 100%;
}
.bdm25r
{
	width: 100%;
	float: left;
}
.bdm25
{
	width: 100%;
}
.innerbox20top {
	padding: 0px;
}
}


/*    
	desktop: |---L---||---R---|
	mobile:  |---L---|
			 |---R---|
*/
.bdm50
{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

@media screen and (max-width: 768px) 
{
	.bdm50 
	{
		width: 100%;
	}
}

#logocontainer img {
	padding: 0px 10px 20px 0px;
}

/* BOXMODEL TEST GRADIENT */
.gr1
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #ccc;
}

/* GENERIC TEXT STYLES */
h1 
{
	font-size: 24px;
/*	color: #444; */
}


@media screen and (max-width : 768px)
{
 h1 
 {
	 font-size: 18px;
  }
}



h1.large
{
	font-size: 32px;		/* 32px; */
}

h1.large
{
	text-decoration: none;
}

a.silent 
{
	text-decoration: none;
}

h2
{
	font-size: 18px;
}
h3
{
	display: inline-block;		/* same as h2 but inline */
	font-size: 18px;
	text-decoration: inherit;
}

h5	/* Slider sub */
{
	font-size: 16px;
/*	font-style: italic; */
}


@media screen and (max-width: 768px) {
	h2
	{
	font-size: 18px;
		margin-bottom: 5px;
	}

	h2>a {
		font-size: 18px;
	}
}




/* h4 reserved for picture tags */
.biglink 
{
	font-size: 18px;
	display: inline-block;
	font-weight: bold;
}


a  
{
	color: inherit;
/*   -webkit-transition: color .5s ease-out;
   -moz-transition: color .5s ease-out;
   -o-transition: color .5s ease-out;
   transition: color .5s ease-out; */
}

.tx1
{
	color: #666;
}

.tx2
{
	color: #333;
}
.tx3
{
	color: #444;
}
.tx4
{
	color: #888;
}

.tx5
{
	color: #555;
}

.txr 
{
	text-align: right;
}

.txd
{
	line-height: 1.5em;
}

.txe
{
	line-height: 2em;
}


.txa
{
	color: #76b837;
}

/* links */
.hoverred:hover 
{
	color: #76b837;
}

/* dualheader statt 70/30 w�rde ich gern flex!?*/
.heading 
{
	border-bottom: 1px solid #ddd;
	margin: 25px 0px 15px 0px;
	padding-bottom: 10px;
}
.headingL 
{
	display: inline-block;
	width: 70%;
}


.headingR 
{
	width: 30%;
	display: inline-block;
	text-align: right;
}

/* Header: Statistik + Auswahl-Dropdown (Galerie, Ensemble, …) */
.heading:has(.header-picker-nav) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
}

.heading:has(.header-picker-nav) .headingL {
	width: auto;
	flex: 1 1 200px;
}

.heading:has(.header-picker-nav) .headingR {
	width: auto;
	flex: 0 0 auto;
}

.headingL .heading-stats {
	margin: 4px 0 0;
	color: #666;
	font-size: 16px;
	line-height: 1.3;
}

.header-picker-nav {
	display: inline-block;
	position: relative;
	text-align: right;
}

.header-picker-nav summary {
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	color: #666;
	white-space: nowrap;
	user-select: none;
}

.header-picker-nav summary::-webkit-details-marker {
	display: none;
}

.header-picker-nav summary::after {
	content: " \25BE";
}

.header-picker-nav[open] summary::after {
	content: " \25B4";
}

.header-picker-nav summary:hover,
.header-picker-nav[open] summary {
	color: #76b837;
}

.header-picker-nav__list {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
	min-width: 190px;
	max-height: min(70vh, 420px);
	overflow-y: auto;
	margin: 0;
	padding: 6px 0;
	text-align: left;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.header-picker-nav__list a {
	display: block;
	padding: 7px 16px;
	text-decoration: none;
	color: #333;
	white-space: nowrap;
}

.header-picker-nav__list a:hover,
.header-picker-nav__list a.active {
	color: #76b837;
	background: #f5f5f5;
}

.heading:has(.header-picker-nav) .headingL:empty {
	display: none;
}

.publications-overview.b75 {
	width: 100%;
}


/*  100% header */
.heading100
{
	border-bottom: 1px solid #ddd;
	margin: 15px 0px 15px 0px;
	padding-bottom: 10px;
	display: inline-block;
	width: 100%;
}

/* VA Tabs */
/* http://jsfiddle.net/xZeJt/1/ http://stackoverflow.com/questions/19027764/extend-last-li-to-remaining-width-of-a-ul*/
#tabhead 
{
    display: inline-block;		/* table */
    width: 100%; 
	margin-top: 20px;
/*	font-size: 15px;	*/
}

#content > #tabhead {
	margin-bottom: 10px;
}

@media screen and (max-width: 400px) {
	#tabhead 
	{	margin-bottom: 10px;
	}
}
.tabheadnotopmargin 
{
	margin-top: 0px !important;
}

#tabhead h1
{
/*	color: #76b837; */
}

#tabhead p
{
/*	max-width: 500px; */
}

#tabhead p.block
{
	text-align: justify;
}



#tabhead > nav {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

#tabhead > nav > ul > li > a,
#tabhead > ul > li > a 
{
	text-decoration: none;
}
#tabhead > nav > ul,
#tabhead > ul {
    list-style:inside none;		
    width:100%;
    display: inline-block;	/* table-row */
	margin-top: 20px;
}
#tabhead > nav > ul > li,
#tabhead > ul > li {
    list-style:inside none;
    float:left;
	color: #999;
	height: 30px;
	border: 1px solid #ddd;
	padding: 0px 10px 0px 10px;
	font-size: 16px;
	border-top-right-radius: 16px;
	border-top-left-radius: 5px;

	line-height: 30px;
	border-bottom: 1px solid #ddd; 
}
#tabhead > nav > ul > li:last-child,
#tabhead > ul > li:last-child{
    float:none;
    overflow:hidden;
    border: none;
	border-bottom: 1px solid #ddd;
	padding: 0px 10px 1px 10px;
}

#tabhead > nav > ul > li:hover,
#tabhead > ul > li:hover
{
	color: #76b837;
	border-bottom: 1px solid #ddd;

	-web-kit-transition:  color 0.5s ease;
	-moz-transition:  color 0.5s ease;
	-o-transition:    color 0.5s ease;
	 transition:   color 0.5s ease;
}
#tabhead > nav > ul > li:last-child:hover,
#tabhead > ul > li:last-child:hover 
{
	color: #999;
    float:none;
    overflow:hidden;
    border: none;
	border-bottom: 1px solid #ddd;
	padding: 0px 10px 1px 10px;
	background-color: #fff;
}
#tabhead > nav > ul > li.s,
#tabhead > ul > li.s
{
	color: #76b837;
	border: 1px solid #ddd;
	border-top-right-radius: 16px;
	border-top-left-radius: 5px;
	border-bottom: none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,ffffff+100 */

	background: #ddd; /* Old browsers */
	background: -moz-linear-gradient(top, #d0d0d0 0%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #d0d0d0 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #d0d0d0 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

#tabhead > nav > ul > li.s:hover,
#tabhead > ul > li.s:hover {
	height: 30px;
	border: 1px solid #ddd;
	padding: 0px 10px 0px 10px;
	font-size: 16px;
	border-top-right-radius: 16px;
	border-top-left-radius: 5px;

	line-height: 30px;
	border-bottom: none;
	
	background-color: #fff;

}




/* Thumbox2 ohne statische Gr��en */
.thumbbox2 
{
	display: inline-block;
	position: relative;
	vertical-align: top;
	line-height: 0;
}
.thumbbox2 > span
{
	text-align: left;
	left: 0;
	right: 0;
	width: auto;
	box-sizing: border-box;
	position: absolute; 
	bottom: 0px; 
	line-height: normal;
	border-radius: 0 0 var(--ubs-image-radius) var(--ubs-image-radius);
	color: #888;
	background: rgba(0, 0, 0, 0.6);
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(20, 20, 20, 0.8);
}
.thumbbox2 > span > h4 
{
	padding: 5px;
	font-weight: normal;
	font-size: 14px;
}

.thumbbox2 img
{
	display: block;
	width: auto;
	height: auto;
	border-radius: var(--ubs-image-radius);
}
.thumbbox2:hover
{
	box-shadow: 4px 4px 8px #444;
}
.thumbbox2 img:hover
{
	filter: none;
}

/* auf infoseiten tab – Abstand über a:has(> .thumbbox2) */
#infoseite .thumbbox2
{
	margin: 0;
}

/* guestbook */

#guestbook 
{
	margin-top: 20px;
}
#guestbook span
{
	display: block;
}
#guestbook .poster 
{
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
}
#guestbook .comment
{
	display: block;
	margin-bottom: 0px;
	text-align: left;

}
#guestbook .commentwrap
{
	margin-bottom: 20px;
	text-align: right;

}
#guestbook .re
{
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 0px;
	display: block;
}
#guestbook .re > .poster
{
	border: none;
}
#guestbook div
{

}
#guestbook a 
{
}
/* FORMULARE */

#myform
{
}
#myform label,
#myform button
{
	display: block;
	margin: 10px 0px 0px 0px;
}
#myform input
{
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
}
#myform #subject			/* mail form exclusive */
{
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
#myform textarea
{
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
}
#myform input,
#myform textarea,
#myform label,
#myform button
{
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	padding: 5px;
}
#myform input,
#myform textarea
{
	border: 1px solid #ccc;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
		
}
#myform input:focus,
#myform textarea:focus
{
	border: 1px solid #bbb;
		
}
#myform label
{

}
#myform input, #myform textarea, #myform button, #myform label
{
	color: #666;
}
#myformwrap p
{
	margin: 40px 0px 0px 0px;
	color: #666;
}
#myformwrap p.warn
{
	margin: 0px;
	color: #76b837;
	margin: 20px 0px 20px 0px;
	/* text-shadow: 1px 1px 1px #ccc; */
}

#myform input.bad,
#myform textarea.bad,
#myform button.bad
{
	border: 1px solid #76b837;
}

#usercomment {
	width: 90%;
}
#message {
	width: 90%;
}
@media screen and (max-width: 400px) {
	#myform input,
	#myform textarea,
	#myform label,
	#myform button
	{
		font-size: 14px;
	}
}

/* Articles */
.teaser 
{
/*	max-width: 426px;	*/		/* force text to warp */
	display: inline-block;
	margin-bottom: 22px;
}




/*}*/



.teaserimgwrap {
    position: relative;
    border: 1px solid green;
}

.teaseroverlay 
{
    position: absolute;
	left: 0;
	bottom: 10px;
	color: #fff;
	background: rgba(250, 250, 250, 0.7);
	background: var(--ubs-green-invert); 
	padding: 10px 10px 10px 5px;
}

.teaser p.date
{
	font-size: 14px;
}
/*
.teaser h3
{
	color: #fff;
	text-decoration: none;

	font-size: 100%;
}
*/
.teaser p.text
{
	color: #555;
}

.teaser img 
{	

	height: auto;
	max-width: 100%;
}
@media screen and (max-width: 768px) {
	.teaser p.date
	{
		font-size: 16px;
	}
	.teaser p.text
	{
		color: #555;
		font-size: 16px;
	}
}
.nojump img 
{
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	max-width: 100%;
	
}

.articledate
{
	color: #666;
}
.articlepic 
{
	margin-top: 8px;
}

#content .more 
{
	font-size: 18px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	text-align: right;
} 

#content .more a
{
	text-decoration: none;
	color: #eee;
	background: var(--ubs-green-invert);
	margin-left: 10px;
	padding: 7px 50px 7px 50px;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
		-webkit-transition: background 1s; /* Safari */
    transition: background  1s;
}

    #content .more a:hover {
        text-decoration: none;
        color: #fff;
        background: var(--ubs-green-invert);

        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
        -webkit-transition: background 0.5s; /* Safari */
        transition: background 0.5s;
    }

@media screen and (max-width: 768px) {

	#content .more 
	{
		font-size: 18px;
		margin-top: 20px;

	}
	#content .more a
	{
		margin: 0px 0px 0px 10px;
	}
}

/* BUTTON MEHR */
/*
#content button.followme 
{
	margin: auto;
	color: #666;
	font-size: 24px;
	padding: 5px 100px 5px 100px;
	border: none;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;


background: -moz-linear-gradient(-45deg, rgba(232,232,232,0.65) 0%, rgba(150,150,150,0.44) 100%);
background: -webkit-linear-gradient(-45deg, rgba(232,232,232,0.65) 0%,rgba(150,150,150,0.44) 100%); 
background: linear-gradient(135deg, rgba(232,232,232,0.65) 0%,rgba(150,150,150,0.44) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e8e8e8', endColorstr='#70969696',GradientType=1 );
}
#content button.followme:hover
{
	background-color: var(--ubs-green-invert);
	color: White;
}
*/
.linkbox 
{
	margin: 0px 0px 20px 0px;
}

.linkbox a:hover 
{
	color: #76b837;
}

/* Premierenspiegel */
/*
#chronik h2 {
	clear: both;
	display: block;
	margin-bottom: 20px;
	font-size: 21px;
}
*/
.VA 
{

	display: inline-table;

	width: 300px;

	height: 210px;
	margin: 0px 15px 10px 0px;

	overflow-y: hidden;
	font-size: 14px;

	word-wrap: break-word;


}

.VA img 
{
	float: left;
	margin-right: 10px;
}

/* The Modal (background) */
#modal 
{
	    transition: 0.3s;
	    display: none;
	position: absolute;
	top: 50%;
	left: 50%;

/*    display: none; /* Hidden by default */
/*    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
	margin-left: -400px;
	margin-top: -110px;

    width: 800px; /* Full width */
    height: 220px; /* Full height */



    overflow: visible; /* Enable scroll if needed */
    background-color: #fff; /* Fallback color */
    background-color: rgba(100,100,100,0.8); /* Black w/ opacity */
    padding: 0px;
    vertical-align: top;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;

	  filter: drop-shadow(4px 4px 8px #444);
	-webkit-filter: drop-shadow(4px 4px 8px #444);
	-moz-filter: drop-shadow(4px 4px 8px #444);
	-o-filter: drop-shadow(4px 4px 8px #444);
	-ms-filter: drop-shadow(4px 4px 8px #444);
}


#modal > img
{
	border: 1px solid #333;
	margin: 10px;
	float: left;
}

#modal > h2
{
	margin: 10px;
	color: #eee;
}

#modal > p
{
	margin: 10px;
	color: #eee;
}

#modal input
{
	margin: 5px;
	font-size: 16px;
	padding: 5px;
	border: 1px solid #ccc;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
	display: block;
}

#modal button
{
	color: #444;
	margin: 5px 5px 5px 0px;
	font-size: 16px;
	padding: 5px;
	border: 1px solid #ccc;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
	display: inline;
	
}
#modal button:hover
{
	    transition: 0.3s;
	color: #76b837;	
}
/* The Close Button */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #f1f1f1;
    font-size: 24px;
    font-weight: normal;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.autoimg 
{
	max-width: 100%;
	height: auto;
	width: auto;
}

.smalltopmargin 
{
	margin-top: 8px;
}

/* Artikel Typ 1 */
/*

.imgbox { 
   position: relative; 
   width: 100%; 
   margin-bottom: 10px;
   
}
.imgbox img 
{
	width: 100%;
}
.imgbox h2  
{
   position: absolute; 
   bottom: 25px; 
   left: 0; 
   width: 100%; 
}
.imgbox h2 span  
{
	font-family: "Roboto Condensed", sans-serif;
	color: #ccc;
	font-weight: lighter;
	font-size: 24px;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, 0.7);
	background: var(--ubs-green-invert); 
	padding: 10px; 
}
*/
#artikel1 .imgboxinline
{
	margin-right: 32px;
	margin-bottom: 8px;
}

@media screen and (max-width: 768px) {

}
@media screen and (max-width: 400px) {
	#artikel1 .imgboxinline
	{
		margin-right: 0px;
	}
}

/* Global-Reset (* { padding:0 }) — Listen in Artikel-Fließtext */
#artikel2 ul,
#artikel2 ol,
#ckedited ul,
#ckedited ol,
.articleL ul,
.articleL ol,
.innerboxleft ul,
.innerboxleft ol,
.innerbox10 ul,
.innerbox10 ol,
.innerbox20top ul,
.innerbox20top ol,
.b1 ul,
.b1 ol,
#infoseite ul,
#infoseite ol {
	margin: 0.6em 0;
	padding-left: 0;
	list-style-position: inside;
	list-style-type: disc;
	display: block;
	width: auto;
	max-width: 100%;
	float: none;
	box-sizing: border-box;
}

#artikel2 ol,
#ckedited ol,
.articleL ol,
.innerboxleft ol,
.innerbox10 ol,
.innerbox20top ol,
.b1 ol,
#infoseite ol {
	list-style-type: decimal;
}

#artikel2 li,
#ckedited li,
.articleL li,
.innerboxleft li,
.innerbox10 li,
.innerbox20top li,
.b1 li,
#infoseite li {
	margin: 0.2em 0;
	float: none;
	display: list-item;
	height: auto;
	line-height: inherit;
	border: none;
	border-radius: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	font-size: inherit;
}

#artikelhead 
{
	position: relative; 
	width: 100%; 
	margin-bottom: 0px;
}

#artikelhead img
{
	width: 100%;
}
#artikelhead img
{
	width: 100%;
}
#artikelhead span h1
{
	font-weight: normal;
	font-size: 28px;
}

#artikelhead span
{
	color: #eee;
	position: absolute;
	bottom: 20px;
	left: 0px;
	line-height: normal;
	background: rgba(250, 250, 250, 0.7);
	background: var(--ubs-green-invert); 
	padding: 10px 40px 10px 20px;
}

#artikelhead span.noBG
{
	color: #666;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: none; 
	padding: 10px 40px 10px 20px;
	background: none;
}


#artikelhead span.fwd
{
	position: absolute;
	left: auto;
	bottom: 20px;
	right: 20px;
	background-color:rgba(0, 0, 0, 0.0);
	padding: 4px;
	margin: 0px;
}


#artikelhead span.fwd a
{
	font-size: 18px;
	font-weight: normal;
	text-decoration: none;
	padding: 3px 12px 3px 12px;
	margin: 4px;
	color: #ddd;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(100, 100, 100, 0.8);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;	
}


#artikelhead span.fwd a:hover
{
	background: var(--ubs-green-invert);	
}

#artikelhead span.fwd a.static
{
	color: #fff;
	background: var(--ubs-green-invert);	
}

#artikelhead span.fwd a.static:hover
{
	background: var(--ubs-green-invert);	
}

#artikelhead form {
	display: block;
}

#artikelhead span.fwd select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  
  font-size: 18px;
	background: var(--ubs-green-invert);
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  	  padding: 4px;
}

#artikelhead span.fwd select option {
		background: var(--ubs-green-invert);
	  font-size: 16px;

}



@media screen and (max-width: 768px) {
	#artikelhead span h1
	{
		font-size: 16px;
		padding-left: 0px;
		margin-left: 0px;
	}
	#artikelhead span
	{
		font-size: 12px;
		padding: 5px 10px 5px 10px;
		bottom: 10px;
	}
}
@media screen and (max-width: 500px) {
	#artikelhead span h1
	{
		font-size: 18px;
		padding-left: 0px;
		margin-left: 0px;
	}
	#artikelhead span
	{
		font-size: 14px;
		padding: 5px 10px 5px 10px;
		bottom: 5px;
	}
	#artikelhead span.fwd
	{
		font-size: 14px;
	}
	#artikelhead span.fwd select {
		font-size: 12px;
	}
}
.kultable 
{
	margin-top: 0px;
	border-left: 1px solid #CCC;
}

.kultable td
{
	padding: 2px 0px 0px 10px;
}
@media screen and (max-width: 400px) {
	.kultable 
	{
		margin-left: 5px;
	}

	.kultable td
	{
		padding: 2px 0px 0px 2px;
	}
	p.indented 
	{
	margin-left: 5px;
	}
}



.vvktable 
{
	margin-top: 10px;
	border-left: 1px solid #CCC;
}

.vvktable td
{
	padding: 2px 0px 0px 10px;
}
@media screen and (max-width: 400px) {
	.vvktable 
	{
		margin-left: 5px;
	}

	.vvktable td
	{
		padding: 2px 0px 0px 2px;
	}
	p.indented 
	{
	margin-left: 5px;
	}
}
p.indented 
{
	padding-left: 10px;
	border-left: 1px solid #CCC;
}
#rrs 
{
	display: inline;
}

#rrs input 
{
	padding: 5px;
	border: 1px solid #ddd;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
	font-size: 16px;
	color: #666;
}

#rrs button
{
	background-color: #eee;
	font-size: 16px;
	display: inline;
	color: #444;
	padding: 5px;
	border: 1px solid #ddd;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
	margin-left: 10px;
}
#rrs button:hover
{
	color: #fff;
	background-color: var(--ubs-green-invert);
		border: 1px solid #76b837;
}

#stf h2
{
	display: block;
	clear: both;
	
}
#stf h3
{
	display: block;
	margin-bottom: 10px;
	font-size: 24px;
	clear: both;

}

/* Artikel-Fließtext: Abschnittsüberschriften block (global h3 = inline für Teaser) */
.articleL h2,
.articleR h2,
.articleL h3,
.articleR h3,
.articleL h4,
.articleR h4,
.articleL h5,
.articleR h5,
.articleL h6,
.articleR h6,
.bdm75 h2,
.bdm75 h3,
.bdm75 h4,
.bdm75 h5,
.bdm75 h6,
.innerbox20top h2,
.innerbox20top h3,
.innerbox20top h4,
.innerbox20top h5,
.innerbox20top h6,
.innerboxleft h2,
.innerboxleft h3,
.innerboxleft h4,
.innerboxleft h5,
.innerboxleft h6,
.innerbox10 h2,
.innerbox10 h3,
.innerbox10 h4,
.innerbox10 h5,
.innerbox10 h6,
#infoseite h2,
#infoseite h3,
#infoseite h4,
#infoseite h5,
#infoseite h6,
#ckedited h2,
#ckedited h3,
#ckedited h4,
#ckedited h5,
#ckedited h6,
#artikel2 h2,
#artikel2 h3,
#artikel2 h4,
#artikel2 h5,
#artikel2 h6,
#tabhead .b75 h2,
#tabhead .b75 h3,
#tabhead .b75 h4,
#tabhead .b75 h5,
#tabhead .b75 h6 {
	display: block;
	clear: both;
	margin-top: 0;
	margin-bottom: 0.35em;
	font-weight: bold;
}

/*
#stf .ibi_title 
{
	font-size: 24px;
}
*/

#stf .event
{
	border-bottom: 3px dotted #ddd;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
	padding: 8px 16px;
	background: #2d4015;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}
.skip-link:focus {
	position: fixed;
	left: 8px;
	top: calc(45px + 8px);
	width: auto;
	height: auto;
	overflow: visible;
	outline: 3px solid #76b837;
	outline-offset: 2px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

:focus-visible {
	outline: 3px solid #76b837;
	outline-offset: 2px;
}

/* === Inhaltsbilder: abgerundete Ecken (wie Admin --adm-radius-sm) === */
figure.picbox,
.imgbox,
.thumbbox,
.teaser > a,
.relimg,
.ensemble figure,
.beL,
.VA {
	border-radius: var(--ubs-image-radius);
	overflow: hidden;
}

.teaser > a,
.relimg {
	display: block;
}

#head img#voteteaser,
#content img,
#ckedited img,
#artikel2 img,
.articleL img,
.articleR img,
.innerboxleft img,
.innerbox10 img,
.innerbox20top img,
.bdm75 img,
.bdm25 img,
#infoseite img,
.b1 img,
.picboxthumb,
img#picture,
.autoimg,
#modal > img,
figure.image img {
	border-radius: var(--ubs-image-radius);
	padding: 0;
}

/* Wrapper clippt das Bild (verhindert eckige untere rechte Ecke bei Overlays) */
figure.picbox img,
.imgbox img,
.teaser > a img,
.relimg img,
.ensemble figure img,
.beL img,
.VA img,
#content figure.picbox img,
#content .imgbox img,
#content .teaser > a img,
#content .relimg img,
#content .ensemble figure img,
#content .beL img,
#content .VA img,
#artikel2 .imgbox img,
#infoseite .thumbbox img,
#content .thumbbox img,
.thumbbox img {
	display: block;
	height: auto;
	border-radius: 0;
}

.thumbbox img,
#infoseite .thumbbox img,
#content .thumbbox img {
	width: auto;
}

/* Personenkarten (#ansprech): Abstand per margin, nicht padding auf img */
#ansprech table.person td:first-child {
	vertical-align: top;
	line-height: 0;
}

#ansprech table.person img {
	display: block;
	margin: 0 10px 0 0;
	border-radius: var(--ubs-image-radius) !important;
}

/* Headerbilder: oben eckig, unten abgerundet */
#artikelhead {
	overflow: hidden;
	line-height: 0;
}

#artikelhead img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0 0 var(--ubs-image-radius) var(--ubs-image-radius) !important;
}

/* Galerie-Thumbnails thumbbox2: Abstand am Link */
#content a:has(> .thumbbox2),
a:has(> .thumbbox2) {
	display: inline-block;
	vertical-align: top;
	margin: 0 20px 20px 0;
	line-height: 0;
}
#content .thumbbox2,
.thumbbox2,
#infoseite .thumbbox2 {
	margin: 0;
	line-height: 0;
}
#content .thumbbox2 > span,
.thumbbox2 > span {
	line-height: normal;
}

/* Galerie-Karten: Rundung direkt auf dem Bild (nicht Wrapper-Clip) */
#content .thumbbox2 > img,
.thumbbox2 > img,
#content .imgboxinlineimgwrap > img.show,
.imgboxinlineimgwrap > img.show {
	display: block;
	border-radius: var(--ubs-image-radius) !important;
}

/* Keine Abrundung: Logos, Navigation, Partner, Vollbild-Karussell */
#navBar img,
#footer_container img,
#logocontainer img,
.menu_container img,
#mobileLogo img,
.home-slider-wrap img,
.royalSlider img,
.rsImg {
	border-radius: 0;
}