/* Kopf und Fuß des Fensters */
/* ######################### */

/* Darstellung des Headers mit zentriertem Bild (Banner) */
img.ls-is-cached.lazyloaded {
  margin:auto;
}

/* Inhaltsbereich "Main-Body", kurze Abstände oben und unten. */
section#sp-main-body.toptop {
  padding-top: 10px;
  padding-bottom: 20px;
  margin: 0px 40px;
}

/* Breadcrumb in Position content-top Höhe anpassen */
.breadcrumb {
  padding: 0.5rem 1rem;
}

/* Inhaltsbereich im Footer mit kurzem Abstand oben und unten */
#sp-bottom {
  padding: 0;
  }
  #sp-footer .container-inner {
  padding: 20px 0;
  }

/* Artikel-Info-Zeile (Status) für jeden Beitrag */
.article-info {
  color: darkgreen;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid silver;
}

/* Programm-Code auf Webseite darstellen */
code.linux {
  background-color: #dfdfba;
  padding: 10px 10px 5px 50px;
  border-left: 12px solid #DFAC20;
  display: block;
  /*white-space: pre;*/
  margin-bottom: 15px;
  color: #252525;
}
code {
  background-color: #dfdfba;
}


/* Module anpassen */
/* ############### */

/* Modul: Neueste Beiträge - Darstellung anpassen */
.sp-module-content .latestnews > li > a > span {
  margin-top: 0;
  font-size: 75%;
  font-weight: normal;
}
.sp-module-content .latestnews > li > a {
  font-weight: bolder;
}
/* Zeilenabstand in rechter Spalte anpassen */
#sp-right .sp-module ul>li>a {
line-height: 24px;
}

/* Neueste Beiträge - Auf der Startseite */
ul.latestnews > li {
  padding:  0.4em 0;
}
ul.latestnews > li > a > span {
  font-size: 75%;
  color: #0B610B; /*green*/
}
ul.latestnews > li > a > span::before {
  content: "\A";
  white-space: pre;
}



/* Menüleisten links+rechts anpassen */
/* ################################# */

/* Abstände auf Null und Rahmen abstellen*/
#sp-left .sp-module, #sp-right .sp-module {
margin-top: 0px;
padding: 0px;
border: none;
  overflow-y: auto; /* verhindert, dass Menü in Foot scrollt */
}
/* Abstände der Überschriften anpassen */
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
margin: 0px;
padding-bottom: 20px;
}
/* Menü-Darstellung linke + rechte Spalte anpassen */
#sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a {
padding: 0px 0px 0px 30px;
font-weight: bolder;
line-height: 25px;
}
#sp-right .sp-module ul>li>a {
padding: 0px;
}
/* in den Menüs die Border ausschalten */
#sp-left .sp-module ul>li, #sp-right .sp-module ul>li {
border: none;
}

/* Menüpunkte nach Status färben*/
.sp-module ul>li>a:link {
  color: #252525;
}
.sp-module ul>li>a:visited {
  color: grey;
}
.sp-module ul>li>a:focus {
  color: yellow;
}
.sp-module ul>li>a:hover {
  color: #252525;
  background-color: #E9ECEF;
}
.sp-module ul>li>a:active {
  color: black;
}


/* Sondereinstellungen in einzelnen Seiten */
/* ####################################### */

/* Liste mit Nummern bei Tastenkürzel (Archlinux) einfärben */
/* shortcuts: Tastenkürzel für Anwendungen */
.kurzel li::marker {
  color: red;
}


/* Tabellen-Struktur */
/* ################# */

#tabsys th, td {
border: 1px solid black;
padding: 4px 8px;
}

#tabsys th {
  background-color: LightGray;
}

/* Tabellen als darstellende Blocks */
#tablock table {
  border-collapse: separate;
  border-spacing: 15px;
}
#tablock td {
  background-color: #fdfaed;
  border: 1px solid #444444;
  padding: 20px;
  vertical-align: top;
}
#tablock h5 {
  color: #054acf; padding-bottom: 5px;
}


/* Informationen und Hinweise */
/* ########################## */

/* Blockquote neu formatieren */
blockquote {
  margin: 0 0 1.5em 3em;
  background-color: lightgray;
  padding: 15px 10px 1px 15px;
  border-left: 12px solid cadetblue;
}
/* Klasse: blockquote */
.blockquote {
  font-size: 1.0rem;
  font-family: Monospace;
  font-weight: bolder;
  padding-left: 2em;
  border-left: 10px solid silver;
}
/* Hinweisbox */
.hbox {
  max-width: 75%;
  padding: 1em;
  border: 1px solid #bbb;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  font-family: sans-serif;
}
.hbox h4 {
  margin-top: 0;
  font-weight: bold;
  font-size: 1.1em;
}
.hbox p {
  margin: 0.5em 0 0 0;
}
/* Farben zu Hinweisbox */
.rosa {
  background-color: #FDE0E0;
}

/* Infobox */
.ibox {
  padding: 1rem;
  margin: 1rem 0;
}
/* Farben zu Infobox */
.iblau {
  background-color: #e7f3ff;
  border-left: 5px solid #0074D9;
}
.iblau h4 {
  color: #0074D9;
}
.irosa {
  background-color: #FDE0E0;
  border-left: 5px solid red;
}
.irosa h4 {
  color: red;
}

/* Tastendarstellungen */
/* ################### */

.key {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 0 #ccc;
  font-size: 0.95em;
  color: #333;
}

/* ############### */
/* Eigene Projekte */
/* ############### */


/* Accordion */
/* ######### */
input.acc {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.my-accordion {
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}
.acc-punkt-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  cursor: pointer;
  color: #1A6204; /*#000;*/
  border: 1px solid silver;
}
.acc-punkt-close {
  padding-right: 1.5em;
  cursor: pointer;
  width: 100%;
  text-align: right;
  font-size: smaller;
}
.acc-punkt-label::after {
  content: ">";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.5s ease;
}
.acc-punkt-inhalt {
  max-height: 0;
  padding: 0 1em;
  background: white;
  transition: all 0.35s ease;
}
.acc-punkt-inhalt tbody {
  vertical-align: top;
}
input:checked + .acc-punkt-label::after {
  transform: rotate(90deg);
}
input:checked ~ .acc-punkt-inhalt {
  max-height: 100%;
  padding: 1em;
}


/* Flip - Images - vertikal */
/* ######################## */

.flip-box:hover .flip-content {
  opacity:			1;
  -webkit-transform:	rotateX(0);
  -moz-transform:		rotateX(0);
  -ms-transform:		rotateX(0);
  -o-transform:		rotateX(0);
  transform:			rotateX(0);
}
.flip-box:hover .flip-icon {
  opacity:			0;
  -webkit-transform:	translateY(-110px) rotateX(90deg);
  -moz-transform: 	translateY(-110px) rotateX(90deg);
  -ms-transform:		translateY(-110px) rotateX(90deg);
  -o-transform:		translateY(-110px) rotateX(90deg);
  transform:			translateY(-110px) rotateX(90deg);
}

.flip-content {
  position:	absolute;
  top:		0;
  left:		0;
  z-index:	1;
  opacity:	0;
  margin:		20px;
  padding:	20px;
  text-align:	center;
  transition:	all .5s ease;
  background-color:	#474747;
  backface-visibility:hidden;
  transform-style:	preserve-3d;
  -webkit-transform:	translateY(110px) rotateX(-90deg);
  -moz-transform:		translateY(110px) rotateX(-90deg);
  -ms-transform:		translateY(110px) rotateX(-90deg);
  -o-transform:		translateY(110px) rotateX(-90deg);
  transform:			translateY(110px) rotateX(-90deg);
}

.flip-box {
  position:	relative;
  float:		left;
  overflow:	hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  width:		300px;
}

.flip-marg {
  margin: 20px;
}

.flip-box .flip-icon .front-content {
  position: relative;
  top: 100px;
  -webkit-transform:	translateY(-50%);
  -moz-transform:		translateY(-50%);
  -ms-transform:		translateY(-50%);
  -o-transform:		translateY(-50%);
  transform:			translateY(-50%);
}
.flip-box .flip-icon .front-content img{
  margin-bottom:	20px;
}
.flip-box .flip-icon .front-content h4 {
  font-size:		18px;
  text-align:		center;
  background: 	transparent;
  margin-bottom:	15px;
  text-transform:	uppercase;
}
.flip-box .flip-content h4 {
  font-size:		15px;
  font-weight:	788;
  background:		transparent;
  color:			#fff;
  margin-bottom:	0px;
  margin-top:		15px;
  text-transform:	uppercase;
}
.flip-box .flip-content p {
  font-size:		13px;
  color:			#b1b1b1;
  margin:			0;
}

.flip-icon, .flip-content {
  height: 250px;
}

.flip-icon {
  padding: 20px;
  text-align: center;
  transition: all .5s ease;
}

/* Flip - Images - horizontal */
/* ########################## */

/* The flipp box container - set the width and height to whatever you want. We have added the border
 p *roperty to demonstrate that the flipp itself goes out of the box on hover (remove perspective
 if you don't want the 3D effect */
.flipp-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flipp-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flipp when you move the mouse over the flipp box container */
.flipp-box:hover .flipp-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flipp-box-front, .flipp-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flipp-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flipp-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}