body {
  background: url(../../../images/bg/winterhinter_hans_pixabay.jpg) no-repeat center center fixed ; /*  2024_Luftbild_web.jpg gymsef_bg_treppenhaus.JPG*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size: 1.2em;
  line-height:160%;
  quotes: "\201E" "\201D";
  padding-top:100px;
  padding-bottom:1200px; /*dadurch scrollt die Seite weiter und gibt den Blick auf das Hintergrundbild frei*/
  
}





/* Farbe von markiertem Text  */
  /**/*::-moz-selection {
  background: rgb(40, 0, 0, 0.8) none repeat scroll 0 0; 

 
 
}

/* SEITEN-LAYOUT */



/* Bereich Logo, Navigation und Seitenkopf  */

/* erstmal alles durchsichtig machen  */

#g-navigation {
  background:transparent !important;
	

}

/* Navigationsleiste weiß machen  */
.jl-navbar-container:not(.jl-navbar-transparent) {
    background: /*#f1f1f1*/ #FCFDFF !important;
  }


/* Logo-Bereich ganz oben auf der Seite mit Linie und Schatten versehen  */

#logo-7126-particle {
  
  border: 1px solid #ccc;
  box-shadow: 3px 6px 6px 0px rgb(7, 9, 13, 0.6);
  padding-bottom:20px !important;
}

/*Bereich Hero=Kopf ggf. mit Bild bekommt Rahmen und Schatten und wird durchsichtig*/

#jlimage-5811-particle {

  padding:0 !important; 
}

#g-hero  {
background: transparent !important;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;

}




/*Bereich Container (Content)*/

/*macht die Rahmenlinie und den Schatten um den gesamten Inhaltscontainer*/
#g-container-main {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-shadow: 3px 6px 6px 0px rgb(7, 9, 13, 0.6);
}

/*macht Schatten um die einzelnen Beiträge*/
.jl-article, {
  
  box-shadow: 3px 4px 4px 2px rgb(88, 114, 164, 0.4) !important;
  padding: 25px 40px 40px 30px !important;
}

/*Ärgerlich, dass das in Joomla anscheinend nicht anders geht: Beitragsbild soll  nicht angezeigt werden! */
.jl-article .left.item-image {
  display: none; !important;
}
 
 /* im JL-Layout haben die Artikel einen riesigen Weißanteil und große Abstände, das wird hier korrigiert  */

.jl-section {
  padding:0 !important;
}

/* unten auf der Seite kommt ein transluzenter Container  */

#g-expanded {
  background:rgba(255, 255, 255, 0.7) !important;

}
/* Der Copyright-Container wird Anthrazit gemacht, die Linie rot  */

#g-copyright {
  background:#222831;
  color:#FCFDFF;
}

.jl-hr, hr {
  border-top: 1px solid #AA0000 !important;
}





/* Allgemeines Textlayout  */

h1 {
  

	font-size:1.8rem !important;
  text-rendering: optimizelegibility;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border-bottom:1px solid #AA0000;
    
}

h2 {

  font-size:1.6rem !important; color: /*#069 #003752*/#222831;
  text-rendering: optimizelegibility;
  margin-top: 34px;
   
}

h3 {

  font-size:1.4rem !important;
  color:#750000;
  margin-top:26px;
  text-rendering: optimizelegibility;
  
}

h4 {

  font-size:1.2rem !important;
  color: /*#ff4800*/ #434F60;
  margin-top:24px;
  text-rendering: optimizelegibility;
}

p {
  font-size:1.2rem !important;
  margin:0;
  text-rendering: optimizelegibility;
 
}

/* wenn der Absatz durch Farbe hervorgehoben werden soll (Hinweis-Texte) */
.hi {
  color:#750000;
}

/* wenn der Absatz kleinere Schrift haben soll (Kleingedrucktes) */
.mi {
  font-size:0.8em !important;
}


/* Nicht ganz klar, warum... Aber schaden kann ein bisschen Abstand ja nie */

td, th {
  padding:10px !important;
  
}



/* LINK-Definitionen */

/* Die Links in der Navigation sind anders als die im Text */


}
.jl-navbar-item, .jl-navbar-nav>li>a, .jl-navbar-toggle {
  font-size:0.85em !important;
  color:#222831 !important;
}

#g-navigation .jl-navbar-dropdown, #g-navigation .jl-dropdown, #g-navigation .jl-navbar-dropbar {
    background: #222831;
}

#g-navigation .jl-navbar-dropdown-nav > li > a {
  color:#DCDADC; display: block; border-bottom: 1px solid #303945 !important; padding: 10px 0 !important;
}
#g-navigation .jl-navbar-dropdown-nav > li > a:hover {
color:#f1f1f1; display: block; border-bottom: 1px solid #AA0000 !important;
}


/* Hier kommen die normalen Links */


a {
  transition: all 0.4s ease-out 0s;
  text-decoration:underline;
  text-decoration-skip-ink:auto;
  
 }

a:hover {
  
  color: #470000 ;
  text-decoration:underline !important; 
  text-decoration-color:#AA0000 !important;
  text-decoration-skip-ink:auto;
  visibility: visible;
     /* wir entscheiden uns gegen eine zusätzliche Linie
     border-bottom: 1px solid rgba(144, 193, 64, 1); */
}

/* Kleine Pfeil-Symbole vor externen Links - benötigt keine class */

a[href^="http://"], a[href^="https://"] {
    background: url("../grafik/wwwseite_rot.gif") no-repeat scroll left center rgba(0, 0, 0, 0);
    color: #524F54 /*  */;
    padding-left: 14px;
  
}

a[href^="http://"]:hover, a[href^="https://"]:hover 

{
  color:#000;
}


/* Keine Pfeil-Symbole vor externen Links - z.B. wenn Bilder verlinkt werden */
a.keinpfeil {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding-left: 0;
    border:0;
}

/* erzeugt kleinen Rahmen um verlinkte Bilder - benötigt keine class */
a:hover img {
  border-color:rgba(117, 0, 0, 0.5);
}


/* auch die Links in der Seitennavigation sollen unterstrichen sein bei mouseover*/
.jl-nav li > a:hover
{
  text-decoration:underline !important;
}




/* Kleine PDF-Symbole vor Links - benötigt class */


.pdf {
  background: url("../grafik/page_white_acrobat.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    padding-left: 21px;
}

/* Listendefinitionen */

ul {
  margin-top:0px !important;
}

li.lipdf {
    background: url("../grafik/page_white_acrobat.png") no-repeat scroll 0% 20%  rgba(0, 0, 0, 0);
    list-style: none outside none;
    padding-left: 21px;
  
}
li.liword {
    background: url("../grafik/page_white_word.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    list-style: none outside none;
    padding-left: 21px;
}

/* folgende Klasse ist für Textblöcke im div-Container, die eine rote Umrandung haben */
.kasten {
  width: 97%; 
  padding: 10px; 
  border: 1px solid #A30000; 
  border-radius: 5px 15px; 
  background: #fff; 
  margin-right: 48px; 
  box-sizing: border-box; 
  box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.07); 
  
  
}


/*
----------------------------------------------------------------------------------------------------------
Bilddefinitionen
*/  




.article-intro img, .article-content img
{
  display:inline;
}


/*Die Klasse i bewirkt, dass die Bilder einen grauen Schatten bekommen. V.a. für die Bildchen auf der Startseite */	
.i
{
  border: 1px solid #A7A7A7;
 margin-right:10px;
  padding: 5px;
  /*background: #ffffff;*/
  box-shadow: 0px 4px 4px -2px rgb(7, 9, 13, 0.6);
}

/* Nur noch für die Archiv-Seiten relevant: Die Klasse .is für "image with shadow" erzeugt  Schatten um die Vorschaubilder (180px, 240px feste Breite bzw. 640px für die großen Bilder ohne Thumbnail): Die Bildgröße muss 14 px schmaler sein als die schatten.png-Grafik; Höhen werden bis 800px mit Rand dargestellt  */

.is
{
  background: url(../../../images/grafik/schatten254.png) no-repeat bottom left;
  border-top: 1px solid #f5f5f5;
   border-right: 2px solid #f5f5f5;
  padding: 4px 7px 17px 7px;
  margin: 10px;
  display:inline;
}

.is194
{
  background: url(../../../images/grafik/schatten194.png) no-repeat bottom left;
  border-top: 1px solid #f5f5f5;
  padding: 4px 7px 17px 7px;
  margin: 10px;
}

.is654
{
  background: url(../../../images/grafik/schatten654.png) no-repeat bottom left;
  border-top: 1px solid #f5f5f5;
  padding: 4px 7px 17px 7px;
  margin: 10px;
}

/* Accordion für die FAQ-Seite;  styles Vorlage: https://codepen.io/raubaca  */


input.taab {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tabs {
max-width: 850px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

.tab {
  width: 100%;
  color: #2A608D;
  overflow: hidden;
}
.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #F4FBFF;
  cursor: pointer;
   font-weight:normal;
  margin-bottom:1px !important;
  /* Icon */
}

.tab-label:hover {
  background: #DAEDFF;
}
.tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all .35s;
}
.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: #fff;
  transition: all .35s;
}
.tab-content p {
margin-bottom:20px;
}

.tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #DAEDFF;
  cursor: pointer;
}
.tab-close:hover {
  background: #F4FBFF;
}

input:checked + .tab-label {
  background: #DAEDFF;
}
input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}

/* 75-jähriges Schuljubiläum 2021 Styledefinitionen */


blockquote.chronik {
  
  font-size:20px;
  line-height:30px;
  padding: 8px;
  background-image: linear-gradient(to right, #d5d6d0, #e3e5e0);
  border-left: 3px solid #333;
	border-bottom: 3px solid #ccc;
  margin: 5px 20px 10px 20px;
  
  }

blockquote.chronik span {
     display: block;
   
   }

blockquote.sonst {
 
  padding: 8px;
  background-color: #f5f5f5;
  border-left: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin: 5px 20px 10px 20px;
  
  
  }

blockquote.sonst span {
     display: block;
   
   }

.pull_zitat_chronik {
	float:left;
   width: 15em;
  	font-family: 'Cormorant Upright';
  font-size:16px;
  line-height:30px;
 background-color: #d2d2ca;
   color: #475257;
	padding: 5px 10px 5px 10px;
   border-left: 3px solid #475257;
   border-bottom: 3px solid #ccc;
	margin: 10px;
}
.chronik_foto_hell {
	float: right; margin: 0 0 20px 10px; 
	border-left: 3px solid #475257;
  	border-bottom: 3px solid #ccc;
}

.sjbc {
  width:300px;
  margin: 10px 10px;
  padding: 10px;
 background-color: #d2d2ca;
  border: 1px solid #475257;

}

.sjbb {
 text-align:center;
 background-color: #d2d2ca;
  margin-bottom:30px;
  
}

/* tooltip für Elemente, z.B. den Schnellstart auf der Homepage */


/* 
  You want a simple and fancy tooltip?
  Just copy all [data-tooltip] blocks:
*/
[data-tooltip] {
  --arrow-size: 5px;
  position: relative;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  bottom: calc(100% + var(--arrow-size));
  pointer-events: none;
  transition: 0.2s;
  will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 200px;
  width: max-content;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: 14px;
  background-color: rgba(59, 72, 80, 0.9);
  background-image: linear-gradient(30deg,
    rgba(59, 72, 80, 0.44),
    rgba(59, 68, 75, 0.44),
    rgba(60, 82, 88, 0.44));
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  white-space: pre-wrap;
  transform: translate(-50%,  calc(0px - var(--arrow-size))) scale(0.5);
  z-index: 100;

}

/* Tooltip arrow */
[data-tooltip]:after {
  content: '';
  border-style: solid;
  border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); /* CSS triangle */
  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
  transition-duration: 0s; /* If the mouse leaves the element, 
                              the transition effects for the 
                              tooltip arrow are "turned off" */
  transform-origin: top;   /* Orientation setting for the
                              slide-down effect */
  transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
}
/* 
  Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
[data-tooltip]:hover:after {
  transition-delay: 0.5s; /* Starting after the grow effect */
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}
/*
  That's it for the basic tooltip.

  If you want some adjustability
  here are some orientation settings you can use:
*/

/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
  left: auto;
  right: calc(100% + var(--arrow-size));
  bottom: 50%;
}

/* Tooltip */
[data-tooltip-location="left"]:before {
  transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5);
}
[data-tooltip-location="left"]:hover:before {
  transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1);
}

/* Arrow */
[data-tooltip-location="left"]:after {
  border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size);
  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
  transform-origin: left;
  transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="left"]:hover:after {
  transform: translateY(50%) scaleX(1);
}



/* RIGHT */
[data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after {
  left: calc(100% + var(--arrow-size));
  bottom: 50%;
}

[data-tooltip-location="right"]:before {
  transform: translate(var(--arrow-size), 50%) scale(0.5);
}
[data-tooltip-location="right"]:hover:before {
  transform: translate(var(--arrow-size), 50%) scale(1);
}

[data-tooltip-location="right"]:after {
  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0px;
  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
  transform-origin: right;
  transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="right"]:hover:after {
  transform: translateY(50%) scaleX(1);
}



/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
  top: calc(100% + var(--arrow-size));
  bottom: auto;
}

[data-tooltip-location="bottom"]:before {
  transform: translate(-50%, var(--arrow-size)) scale(0.5);
}
[data-tooltip-location="bottom"]:hover:before {
  transform: translate(-50%, var(--arrow-size)) scale(1);
}

[data-tooltip-location="bottom"]:after {
  border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);
  border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
  transform-origin: bottom;
}



/* Animation auf Brösel-Seite: Brösel geht nach links   */

.broesel_go_left {
  width: 105px;
  height: 100px;
  position: relative;
  background: url('../../../images/broesel/broesel_s_1.png') no-repeat;
  animation-name: broesel_go_left;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-direction: all;
  visibility: hidden;
  
}

@keyframes broesel_go_left {
  0%   { right: -200px; top:0px; visibility: visible;}
  25%  { right: -150px; top:0px;visibility: visible;}
  50%  { right: -70px; top:0px; visibility: visible;}
  75%  { right: -30px; top:0px; visibility: visible;}
  99% { right: 0px; top:0px; visibility: hidden;}

}

.broesel_stand_left {
  width: 105px;
  height: 100px;
  position: relative;
  top:0px;
  background: url('../../../images/broesel/broesel_1.png') no-repeat;
  animation-name: broesel_stand_left;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-direction: all;
  animation-duration: 3s;
  visibility: visible;
 
}
@keyframes broesel_stand_left {
  0%   { visibility: hidden;}
  99% {visibility: hidden; }
  100% { visibility: visible;}
}
  /* Broesel-Animation - Ende*/