/* Wir wollen künftig rem statt em oder % bei font-size nutzen:
	rem	Relative	(root em) Relativ zur Schriftgröße des html-Elements, also Browsereinstellung, meist 16px
	Hintergrund leicht grau f3f3f3, um Kontrast zu schwarzer Schrift etwas abzumildern
	Zeilenlänge eigentlich auf 80 Zeichen begrenzen, wir sind zu lang
	etwas Abstand zwischen zwei <p>,
	siehe https://www.webdesign-journal.de/gute-webtypographie-mit-css/ */
?/*blueprints-blau: #003e79
bp-orange: #e75112
bp-grün: #809023
bp-braun: #945620
dunkelrot: #760e0f
*/

html { font-size: 100%; } /* Default Font Size, 16px */ 

/* Grundsätzliche Template Farben und Einstellungen */

:root {
  	--templategrundfarbe: #760e0f; /* Hntergrundfarbe für Header, Footer etc. */

    --cassiopeia-color-primary: #760e0f; /* Standard-Dunkelrot: #760e0f, z. B. Überschriften in Kästen */
    --cassiopeia-color-link: #760e0f; /* Alle Links */
    --cassiopeia-color-hover: #003e79; /* blueprints-blau */

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1.3rem;
    --body-font-weight: 400;
    --body-line-height: 1.7;
    --body-color: #3e3e3e; /* ein dunkles Grau */
    --body-bg: #f1efed; a
}

/* Content-Hintergrund vom Grid weiss */
.site-grid {
  	background: #ffffff;
}

/* Top-Menü oben ohne Rand */
@media (max-width: 767.98px) {
  .container-header .container-nav .container-search,
.container-header .container-nav nav {
    margin-top: 0em;
  }
}

/* Auf Modulposition bottom-b soll alles untereinander erscheinen */
.grid-child.container-bottom-b {
    flex-direction: column;
}

/* Bildunterschrift */
figcaption {
  font-size: 0.8em;
  text-align: left;
  font-style: italic;
}
/* Abstand unter Bild */
figure {
  margin: 0 0 0.8em;
}

/* Schrift auf der Seite nutzen: Auf Google findest du auch die CSS Anweisung für die Nutzung der Schrift. Wenn du diese in das body element einfügst dann wird die Schrift auf der ganzen Webseite genutzt. */

body {
      font-family: 'Georama', sans-serif;
      -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* Silbentrennung */
}

/* Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst diese also mit .header an */

.header {
    background: var(--templategrundfarbe);
	/* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); */
}


/* Das Dropdown-Menu im Menu färbst du mit der Klasse .metismenu.mod-menu .mm-collapse ein */
.metismenu.mod-menu .mm-collapse {
  background:  #003e79; /* blueprints-blau */
}

/* Die Links im Dropdown Menu musst du dann auch einzeln ansteuern */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}

/* Module haben die Klasse card, man steuert sie also mit .card an - wenn du nur ein bestimmtes Modul ansteuern willst, kannst du dem Modul in den Einstellungen eine eigene CSS Klasse geben und dann damit ansteuern  */
/*
.card {
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}
*/

/* Module sind auf verschiedenen Modulpositionen im Cassiopeia Template bekommen dann die Module zusätzlich zu card auch die Position als Klassennamen, zum Beispiel main-top - wenn du also alle Module auf Main Top ändern möchtest, nimmst du .main-top.card */
.main-top.card {
   /* background: var(--cassiopeia-color-primary); */
}

/* Die Breite vom Template ändern 
	siehe https://blog.astrid-guenther.de/cassiopeia-statisch-oder-fluid/ */
.site-grid {
  max-width: 800px;
  margin: auto;
}
@media (min-width: 576px) {
  .site-grid {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .site-grid {
    max-width: 800px;
  }
}

/* in Blog-Kategorie-Ansicht die Bilder zentrieren und Abstand Text-Bild verringern */
.boxed .blog-item .item-image {
	display: block;
  	margin: 0 auto;
}
.boxed .blog-item .item-content {
    padding: 0.5em;
}

/* Überschriften sind html Elemente, die Hauptüberschrift ist eine h1, dann kommt h2, h3, h4 usw. Ein html Element steuerst du an indem du einfach den Namen davorschreibst */
h1 {
	font-size: 2rem;
	line-height: 1.3;
}
h2 {
	font-size: 1.7rem;
	line-height: 1.3;
	padding-top: 30px;
}
h3 {
	font-size: 1.4rem;
	line-height: 1.3;
	color: #760e0f;
	padding-top: 15px;
}
h4 {
   	font-size: 1.35rem;
	line-height: 1.5;
	line-height: 150%;
}
h5 {
	font-weight: bold;
}

a {
	text-decoration: underline;
}

/* Logo */
.logo {
   	font-size: 1.4rem;
	line-height: 1.3;
	color: #ffffff;
  	text-transform: uppercase;
  	/*padding-top: 1rem;*/
}

.logo a
  {
    text-decoration: none;
    color: #ffffff;
}

/* In Joomla haben die meisten Buttons die Klasse btn-primary - im Element Inspektor kannst du nachsehen ob der Button, den du einfärben willst wirklich diese Farbe hat.
*/

.btn-primary {
  background: var(--cassiopeia-color-primary);
}

/* Wenn du etwas einfärben möchtest, nur wenn man mit der Maus drüber fährt dann schreibst du :hover dahinter
*/

.btn-primary:hover {
  background: var(--cassiopeia-color-hover);
} 

/* Breadcrumps kleiner */
.mod-breadcrumbs__wrapper
  {
    font-size: 1rem;
}

/* In Joomla haben alle Beitragsbilder die Klasse item-image, wenn du nur ein bestimmtes Bild einsteuern möchtest, dann muss du dem Bild im Beitrag eine eigene CSS Klasse geben.
*/
/*
.item-image {
  border: 2px solid #ff0000;
}
*/

/*Laufen dir auf der Webseite icons über den Weg kannst du diese einzeln einfärben*/
.icon-user {
}

/* oder du färbst mit dieser besonderen Anweisung alle Icon ein*/
.fa, .fas, [class*=" icon-"], [class^="icon-"] {
  color: #ffffff; /* eigentlich weiss */
}

/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an */
.footer {
    background:var(--templategrundfarbe);
	/* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); */
}

/* Alte User.css-Anweisungen */

/* Die Zitate */
blockquote p {
	padding: 0 0 0 15px;
	margin: 0px 0px 20px 0px;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #070610;
	font-style: italic;
  	border-left: 5px solid #eee;
}

/* Für Boxen baucht man Zwischenübeschrift in H3-Optik */

.zwischenueberschrift {
	font-size: 19px;
	line-height: 150%;
	color: var(--cassiopeia-color-primary);
	padding-top: 13px;
	font-weight: bold;
}

/* Unsere Content-Box */
.box_well {
	min-height: 20px;
	padding: 10px;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.mitbox
  {
	border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 4px 8px;
    line-height: 1.5;
    font-size: 1.4rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #760e0f;
    box-shadow: 0px 2px 3px 2px #666;
    margin: 10px 10px 10px 5px;
    white-space: normal;
}

.mitbox a
  {
    color: #FFF;
}

.mitbox_bp
  {
	border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 4px 8px;
    line-height: 1.5;
    font-size: 1.4rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #003e79;
    box-shadow: 0px 2px 3px 2px #666;
    margin: 10px 10px 10px 5px;
    white-space: normal;
}

.mitbox_bp a
  {
    color: #FFF;
}

.mitbox_bp2
  {
	border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 4px 8px;
    line-height: 1.5;
    font-size: 1.4rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #e75112;
    box-shadow: 0px 2px 3px 2px #666;
    margin: 10px 10px 10px 5px;
    white-space: normal;
}
.mitbox_bp2 a
  {
    color: #FFF;
}

.mitbox_bp3

  {
	border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 4px 8px;
    line-height: 1.5;
    font-size: 1.4rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #809023;
    box-shadow: 0px 2px 3px 2px #666;
    margin: 10px 10px 10px 5px;
    white-space: normal;
}
.mitbox_bp3 a
  {
    color: #FFF;
}

.mitbox_bp4

  {
	border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 4px 8px;
    line-height: 1.5;
    font-size: 1.4rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #945620;
    box-shadow: 0px 2px 3px 2px #666;
    margin: 10px 10px 10px 5px;
    white-space: normal;
}
.mitbox_bp4 a
  {
    color: #FFF;
}


/* FÜR TABELLEN */
table {
 	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  border-collapse: separate;
  font-size:1.1rem;
  line-height: 1.3rem;
  margin-right: auto; 
  margin-left: auto; 
  margin-bottom: 10px;
  width:100%;
}
td {
  	border: 1px solid #FFFFFF;
  	padding: 4px 5px;
}
.tabellenueberschrift {
    background-color: var(--cassiopeia-color-primary);
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.3rem;
  	line-height: 1.5rem;
}
.tabellenueberschrift a {
    color: #FFF;
    text-decoration: underline;
}
a.tabellenueberschrift:hover {
    color: #E85112;
}

.tabellezelle1 {
    background-color: #cccccc;
}

.tabellezelle2 {
    background-color: #e4e4e4;
}
.tabellezelle_anmerkungen {
    padding: 2px 4px;
    background-color: #FFFFFF;
    font-size: 1rem;
}

/* Für Kontaktformulare */
#umfrageform .button_container {
	text-align: center;
	padding: 10px;
	}

#umfrageform input.btn-primary {
	width:90%;
	cursor:pointer;
	padding:10px;
	white-space: normal;
	}

#umfrageform fieldset {
    margin-bottom: 0em;
}

.loading {
	display:none;}

#overlay {
	display:none;
	position:fixed;
	z-index:999;
	background:url('loading.gif') rgba(0,0,0,3);
	background-repeat:no-repeat;
	background-position:center center;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}

label,
input,
button,
select,
textarea {
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.3rem;
}
input[type="checkbox"] {
	margin-top: 0;
	}
label {
	display: block;
	margin-bottom: 10px;
	/* margin-left: 25px;*/
}
label.error {
	background:red;
	color:#fff;
	padding:5px;
	}

input.error {
	border: 2px solid red;
	}
input.success {
	border: 2px solid green;
}

/* Kleinere Styles für verschiedenes */
.floatleft {
	padding: 5px;
	float: left;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 10px 10px 10px 5px;
	/*width: 250px;*/
}

.bannerfixed {
	position: fixed;
}

/* Hintergrund für Link nach oben */
.back-to-top-link {
  background-color: var(--templategrundfarbe);
}

/* Joomla-Title in Blogansicht Kategorie */
.com-content-category-blog__item .page-header, .blog-item .page-header   
{
	border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.2;
    font-size: 1.2rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% var(--cassiopeia-color-primary);
    box-shadow: 0px 2px 3px 2px #666;
    margin: 5px 5px 5px 5px;
    white-space: normal;
}

  .com-content-category-blog__item .blog-item .page-header a, .blog-item .page-header a
    {
      color: #FFF;
      text-decoration: none;
  }
  .com-content-category-blog__item .blog-item .page-header h2, .blog-item .page-header h2
    {
      font-size: 1.3rem;
      line-height: 1.5rem;
      padding-top: 10px;
  }

/* Für Navi-Buttons oben in Kommandostation */
#rollovermenu a {
  font-size: 12px;
  background-color: #809023;
  vertical-align: bottom;
  display: block;
  text-align: center;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 5px;
  color: #fff; text-decoration: underline;
}

#rollovermenu a:hover {
  background-position: 0px -25px;
}
#rollovermenu a:active {
  background-position: 0px -50px;
}

/* Zum Bearbeiten von Bausteinen, aber auch auf Startseite */
.centeringContainer{
	text-align: center;
	max-width:564px;
	min-width:200px;
}
.centeringIndent{
	position:relative; padding-left:83px; padding-right:99px; text-align:left;
}
.centered{
	margin-left: auto; /*Durch Setzen des rechten und linken Außenabstands (margin) auf auto lässt sich das Element horizontal zentrieren. Das Element nimmt so die definierte Breite an und teilt den verbleibenden Außenabstand gleichmäßig auf. */
	margin-right: auto;
	display: table;
	text-align:left;
}
/* Youtube-Video-Anpassung (und andere Iframes) */
iframe {
  max-width: 100%;
}
.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
  margin-top: 0.6em;
  margin-bottom: 1em;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

/* FÜR DETAILS-BOX (Plusbox) */
/* Für Details-Drop-Down */
*,
::before,
::after {
  box-sizing: border-box;
}

details {
  margin: 1rem auto;
  padding: 0 0.5rem;
  width: 100%;
  max-width: 100%;
  position: relative;
  border: 1px solid var(--cassiopeia-color-primary);
  border-radius: 6px;
  background-color: #f5f5f5;
  /*color: #263238;*/
  transition: background-color .15s;
}

details > :last-child {
  margin-bottom: 1rem;
}

details::before {
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    opacity: .15;
    box-shadow: 0 .25em .5em #263238;
    pointer-events: none;
    transition: opacity .2s;
    z-index: -1;
}

details[open] {
  background-color: #f5f5f5;
}
details[open]::before {
  opacity: .6;
}

summary {
  padding: 0.5rem 0.5em 0.5rem 0;
  display: block;
  position: relative;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
}
summary::before, summary::after {
  width: .75em;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  content: '';
  background-color: currentColor;
  text-align: right;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
summary::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
[open] summary::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
summary::-webkit-details-marker {
  display: none;
}


/* FÜR Video-Integration */
.video-wrapper {
    background-color: #f0f0f0;
    padding: 0px;
    margin-bottom: 20px;
    width: 100%; /* Setzt die Breite auf die maximal verfügbare Breite */
}

.video-title {
    border:2px solid #EBEDEE;
    border-radius: 7px;
    text-align: center;
    padding: 4px 8px;
    line-height: 1.5;
    font-size: 1.4rem;
    vertical-align: middle;
    text-decoration: none;
    color: #FFF;
    background: none repeat scroll 0% 0% #809023;
    box-shadow: 0px 2px 3px 2px #666;
    margin: 10px 10px 10px 5px;
    white-space: normal;
}


.video-container {
    position: relative;
    width: 100%; /* Passt sich an die Breite des video-wrapper an */
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0; /* Wird verwendet, um das Verhältnis zu halten */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.info-container {
    position: relative; /* Oder 'fixed', wenn der Container beim Scrollen sichtbar bleiben soll */
    z-index: 1000; /* Ein hoher z-index-Wert, um sicherzustellen, dass er über anderen Elementen liegt */
    /* Die restlichen Stile beibehalten */
    text-align: center;
    margin-bottom: 0px; /* Anpassen, falls nötig */
}

.unlock-all-videos {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    margin-top: -5px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow {
    border: solid white;
    border-width: 0 40px 40px 0;
    display: inline-block;
    padding: 20px;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}

.video-explanation {
  font-size: smaller;
  font-style: italic;
  color: #6e6e6e;
  text-align: center; /* Zentriert den Text und den Button */
  margin-top: 0px; /* Abstand nach oben, zur Trennung vom Video */
}