/* ------------------------------------------------ */
/* Stylesheet für Oratorienchor Bern:               */
/* Datum: 22. Dez 2023                              */
/* Änderungen:                                      */
/* -----------                                      */
/* tt. Mon jjjj: ?                                  */
/* ------------------------------------------------ */

/*
Selector 	        Example 	Example description
------------------  ----------  -----------------------------------------------
#id 	            #firstname 	Selects the element with id="firstname"
.class 	            .intro 	    Selects all elements with class="intro"
element.class       p.intro 	Selects only <p> elements with class="intro"
* 	                *           Selects all elements
element 	        p           Selects all <p> elements
element,element,.. 	div, p 	    Selects all <div> elements and all <p> elements
*/
@charset "utf-8";

@font-face {
	font-family: 'Quicksand Regular';
	src: url("/fonts/Quicksand-Regular.ttf") format('truetype');
}

@font-face {
	font-family: 'Quicksand Medium';
	src: url("/fonts/Quicksand-Medium.ttf") format('truetype');
}

@font-face {
	font-family: 'Quicksand Semibold';
	src: url("/fonts/Quicksand-SemiBold.ttf") format('truetype');
}

@font-face {
	font-family: 'Quicksand Bold';
	src: url("/fonts/Quicksand-Bold.ttf") format('truetype');
}

@font-face {
	font-family: 'Arno Pro';
	font-style: normal;
	font-weight: normal;
	src: local('Arno Pro'), url('/fonts/ArnoPro-Regular.woff')
		format('woff');
}

@font-face {
	font-family: 'Myriad Pro Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Regular'), url('/fonts/MYRIADPRO-REGULAR.woff')
		format('woff');
}

@font-face {
	font-family: 'Myriad Pro Condensed';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Condensed'), url('/fonts/MYRIADPRO-COND.woff')
		format('woff');
}

@font-face {
	font-family: 'Myriad Pro Condensed Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Condensed Italic'),
		url('/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Light';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Light'), url('/fonts/MyriadPro-Light.woff')
		format('woff');
}

@font-face {
	font-family: 'Myriad Pro Semibold';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Semibold'), url('/fonts/MYRIADPRO-SEMIBOLD.woff')
		format('woff');
}

@font-face {
	font-family: 'Myriad Pro Semibold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Semibold Italic'),
		url('MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold Condensed';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Condensed'), url('MYRIADPRO-BOLDCOND.woff')
		format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold'), url('MYRIADPRO-BOLD.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Italic'),
		url('/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
	font-family: 'Myriad Pro Bold Condensed Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Condensed Italic'),
		url('/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

/* --------------------------------------------------------- */
/* Für die Farben am besten: https://www.htmlcsscolor.com/   */
/* --------------------------------------------------------- */
:root {
	--schrift: 'Myriad Pro Regular'; /* 'Quicksand Medium'; */
	--ueberschrift: 'Arno Pro'; /* 'Quicksand Semibold'; */
	--grundfarbe: #F8F8FF; /* Ghost white  */
	--mittelfarbe: #FAF0E6; /* Linen        */
	--zielfarbe: #FDFBF9; /* Seashell     */
	--schriftfarbe: #000000; /* Nero         */
	--tasterfarbe: #C7CDD8; /* Link Water   */
	--tabellenfarbe: #F5F5F5; /* Whitesmoke   */
	--ueberschriftfarbe: #131168; /* ungefähr Midnight Blue */
	--hintergrund: #E3E3E3; /* Gainsboro */
}

/* Quelle für font-size und Headers: https://matthewjamestaylor.com/responsive-font-size. */

/* ------------------------------------------------ */
/* Globale Definitionen.                            */
/* ------------------------------------------------ */
html {
	color: var(--schriftfarbe);
	font-size: 100%;
}

body {
	background-color: var(--grundfarbe);
	max-width: 1536px;
	padding: 0; /* calc(8px + 1.5625vw); */
	font-family: var(--schrift), Verdana, sans-serif !important;
	font-size: clamp(1em, 2.8vw, 1.75em);
	/* https://kulturbanause.de/blog/skalierende-texte-und-schriftgroessen/ */
	font-size: calc(15px + 0.390625vw);
	font-weight: normal;
	line-height: 1.3em;
	margin: 0;
	text-align: left;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

.w3-small {
	font-size: 0.9em !important;
}

/* Quelle: https://matthewjamestaylor.com/responsive-padding. */
.w3-padding {
	padding: calc(8px + 1.5625vw)
}

/* ------------------------------------------------ */
/* Überschriften.                                   */
/* ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ueberschrift), Verdana, sans-serif;
	text-align: left;
	font-weight: 700;
	color: var(--ueberschriftfarbe);
}

h1 {
	font-size: calc(1.0em + 0.390625vw);
	color: var(--schriftfarbe);
}

h2 {
	/*font-size: 2.488em;*/
	font-size: calc(1.3em + 0.390625vw);
}

h3 {
	font-size: calc(1.2em + 0.390625vw);
	font-style: italic;
}

h4 {
	font-size: calc(1.1em + 0.390625vw);
}

h5 {
	font-size: calc(1.0em + 0.390625vw);
}

h6 {
	font-size: calc(0.9em + 0.390625vw);
}

hr {
	border: 0;
	border-top: 1px solid #eee;
	margin: 20px 0
}

/* ------------------------------------------------ */
/* Meine ID's und Klassen.                          */
/* ------------------------------------------------ */
#ocb-freiraum {
	padding-top: 16px;
	padding-bottom: 16px;
}

.ocb-ort-dat {
	font-family: var(--ueberschrift), Verdana, sans-serif;
	font-size: 1.1em !important;
	text-align: left;
	font-weight: 600;
	color: var(--schriftfarbe);
	margin: 0;
	/* line-height: 1.25;*/
}

.ocb-nopadding {
	padding: 0 !important;
}

.ocb-nomargin {
	margin: 0;
}

#ocb-nomargin {
	margin: 0;
}

#ocb-nopadding {
	padding: 0;
}

.ocb-facebook {
	color: rgba(30, 48, 80, 0);
}

#ocb-ul {
	list-style-type: none;
	padding-left: 0;
}

#ocb-mehrspaltig {
	column-count: var(--spalten);
	column-width: 10em; /* 12em*/
	column-gap: 2em;
	margin-top: 0px;
	margin-bottom: 16px;
}

#ocb-dreispaltig {
	column-count: 3;
	column-width: 15em; /*15em*/
	column-gap: 2em;
	margin-top: 0px;
	margin-bottom: 16px;
}

#ocb-zweispaltig {
	column-count: 2;
	column-width: 20em;
	column-gap: 2em;
	margin-top: 0px;
	margin-bottom: 16px;
}

#ocb-bild-gross {
	float: left;
	height: 350px;
	width: 97% !important;
	object-fit: cover;
	object-position: center;
	margin: 8px;
}

#ocb-bild-gross-higher {
	float: left;
	height: 400px;
	width: 97% !important;
	object-fit: cover;
	object-position: center;
	margin: 8px;
}

#ocb-bild-gross-lower {
	float: left;
	height: 300px;
	width: 97% !important;
	object-fit: cover;
	object-position: center;
	margin: 8px;
}

#ocb-bild-normal {
	float: left;
	height: auto;
	width: 400px;
	margin: 8px;
	margin-left: 0px;
	margin-bottom: 0px;
}

#ocb-bild-normal-450 {
	float: left;
	height: auto;
	width: 450px;
	margin-right: 8px;
	margin-top: 12px;
	margin-left: 0px;
	margin-bottom: 0px;
}

#ocb-bild-normal-250 {
	float: left;
	max-width: 250px;
	height: auto;
	margin: 8px;
	margin-left: 0px;
	margin-bottom: 0px;
	object-position: center;
}

#ocb-bild-normal-150 {
	float: left;
	max-width: 150px;
	height: auto;
	margin: 0;
	margin-right: 4px;
	object-position: center;
}

/* ------------------------------------------------ */
/* Buttons "Zum Anfang" und "Zur vorigen Seite".    */
/* ------------------------------------------------ */

/* Start https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top */
#ocb-topbtn {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 16px;
	z-index: 99;
	border: solid;
	outline: none;
	background-image: none;
	color: var(--grundfarbe);
	background-color: var(--schriftfarbe);
	cursor: pointer;
	padding: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}

#ocb-topbtn:hover {
	background-color: darkgrey;
}

#ocb-backbtn {
	display: block;
	border: solid;
	outline: none;
	background-image: none;
	color: var(--grundfarbe);
	background-color: var(--schriftfarbe);
	cursor: pointer;
	padding: 9px;
	padding-top: 3px;
	padding-bottom: 3px;
}

#ocb-backbtn:hover {
	background-color: darkgrey;
}

/* Ende https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top */

/* ------------------------------------------------ */
/* Taster                                           */
/* ------------------------------------------------ */
.ocb-taste {
	border-style: none;
	border: 1px solid #000 !important;
	border-radius: 8px;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: var(--schriftfarbe);
	background-color: var(--tasterfarbe);
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	/*width: 200px;*/
}

.ocb-taste:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	color: #000 !important;
	background-color: #ccc !important;
}

#ocb-taste {
	border: 1px solid silver !important;
	border-radius: 8px;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: var(--grundfarbe);
	background-color: transparent;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	margin-top: 8px;
	width: auto;
	height: auto;
	font-size: 0.8em;
}

#ocb-taste:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	color: #000 !important;
	background-color: #ccc !important;
}

/* ------------------------------------------------ */
/* Bars und Buttons                                 */
/* ------------------------------------------------ */
.w3-button, w3-btn {
	background-color: var(--grundfarbe);
	color: var(--schriftfarbe);
	border: whitesmoke;
}

.w3-button:visited {
	background-color: var(--grundfarbe);
	color: var(--schriftfarbe);
}

/* ------------------------------------------------ */
/* Links.                                           */
/* ------------------------------------------------ */
a {
	color: var(--ueberschriftfarbe);
	background-color: transparent;
	outline: none;
	text-decoration: underline dashed;
}

/* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:hover, a:focus {
	color: var(--ueberschriftfarbe);
	text-decoration: none;
	background-color: gainsboro;
}

a:visited {
	color: var(--ueberschriftfarbe);
	background-color: transparent;
}

a.more {
	float: right;
	font-weight: bold;
}

a.more:after {
	content: " \2192 ";
	font-weight: bold;
}

/* ------------------------------------------------ */
/* Checkboxes, Radiobuttons.                        */
/* ------------------------------------------------ */
.w3-check, .w3-radio {
	top: 0px;
	padding-bottom: 16px;
	margin-left: 8px;
	margin-right: 12px;
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------ */
/* Input-Felder.                                     */
/* ------------------------------------------------ */
.w3-input {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	background-color: var(--grundfarbe);
	box-shadow: 6px 6px 10px hsla(300, 15%, 25%, 0.3) inset;
}

/* ------------------------------------------------ */
/* Bilduelle in Bild unten rechts.                  */
/* ------------------------------------------------ */
.ocb-bildquelle {
	position: absolute;
	bottom: 2px;
	left: 4px;
	font-size: 10px;
	font-weight: 500;
	color: var(--grundfarbe);
}