/*
 * Farben
 * #FFE1C4 BG
 * #DBC1A9 BOX Footer hell
 * #805D3C Footer braun
 * #B8A28D BOX2
 * 
 * */

/* sticky header */
header.wp-block-template-part { position: sticky; top: 0; left: 0; right: 0; z-index: 1000;}
.admin-bar header.wp-block-template-part { top: 32px; }

@media (max-width: 980px){
	body header > div{
		padding-top: 10px!important;
	}
}
@media (max-width: 768px){
	body header > div{
		padding-bottom: 10px!important;
	}
}


/* höhe des dorp down menüs korregieren */
body .wp-block-navigation .wp-block-navigation__submenu-icon {
    height: 76px;
}

/* schatten des menüs */
@media (min-width: 768px){
	.wp-block-navigation__submenu-container {
    background-color: #fff7ef!important;
		box-shadow: 0px 4px 8px 5px rgb(0 0 0 / 17%);
	}

	.wp-block-navigation__submenu-container li:first-child {
    border-top: 0px;
	}

	.wp-block-navigation__submenu-container li {
    border-top: 1px solid #c3c3c3;
	}
}



/* blog liste mit 3 spalten */
.wp-block-post-template.wp-block-post-template {
    background: none;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    display: grid;
    grid-gap: 1.5em 1.5em;
		padding-bottom: 50px!important;
}

@media (max-width: 1024px){
	.wp-block-post-template.wp-block-post-template {
    grid-template-columns: 50% 50%;
		}
}

@media (max-width: 767px){
	.wp-block-post-template.wp-block-post-template {
    display: block;
		}
}

/* blog liste hintergrund, schatten, abgerundet */
.wp-block-post-template.wp-block-post-template li {
		background-color: #ffffff52;
		box-shadow:0 8px 18px 0 rgba(0,0,0,0.12);
		border-radius: 8px;
}

/* blog liste text abstand links und unten */
.wp-block-post-template.wp-block-post-template li > figure {
		margin-top: 0!important;
}

.wp-block-post-template.wp-block-post-template li > h2 {
		padding-left: 20px!important;
		padding-right: 20px!important;
}

.wp-block-post-template.wp-block-post-template li > div {
		padding-left: 20px!important;
		padding-bottom: 20px!important;
}

/* blog liste bild 4/3 und oben abgerundet */
.wp-block-post-template.wp-block-post-template img {
    -webkit-aspect-ratio: 4/3;
    aspect-ratio: 4/3;
		border-radius: 8px 8px 0px 0px;
}

/* Kein abstand über dem block */
.zero_gap, .zero_gap div{
		margin-block-start: 0;
}

/* blog liste abstand über dem bild entfernen */
body .wp-block-post-template:not(.is-flex-container) > li + li, .wp-block-query > .wp-block-query-pagination {
    margin-block-start: 0;
}

body .wp-container-24 > * + * {
    margin-block-start: 0
}

/* blog liste abstand innen unten entfernen */
.wp-block-columns {
    margin-bottom: 0;
}

/* beiträge box hintergrund */
body .bgboxcolor > li{
		background-color:#fff7ef!important;
}










/* Bsp. #1: CSS eines HTML-Elements überschreiben
   ===============================================
 * Hier überschreiben wir das, was das Theme-CSS uns für die Geataltung der HTML-Elemente im Frontend vorgibt.
 * 
 * Bsp Manipulation HTML
 * Bsp a) - Überschrift/Heading H5 und H6 -> Textfarbe: Dunkelgrau, Hintergrundfarbe: Gold, Schriftgröße +80%
 * Bsp b) Zitatenformat (Blockquote) -> Boxschatten hinzugefügt
 * 
 * Wenn das nicht klappen sollte (bei einigen Themes), ergänzen wir ein !important, das der Anweisung eine höhere Priorität gibt 
 * color: green!important;
 * 
 * HTML-Farbcodes finden sich hier:
 * https://www.w3schools.com/colors/colors_picker.asp
 * https://html-color-codes.info/
 * */
 
 
/* lösche diese Zeile 18 und 30 zum Aktivieren der Beispiele Zeile 20 bis 29)

h5, h6 {
	color: #303030;
	background-color: gold;
	font-size: 1.8em;
	}
	
blockquote {
	box-shadow: 0px 10px 13px -7px #A0A0A0, 5px 5px 9px 5px rgba(163,163,163,0);
	}
			
*/


/* Bsp2
blockquote {
    box-shadow: 0px 10px 13px -7px #A0A0A0, 5px 5px 9px 5px rgba(163,163,163,0);
 }
*/


/* Bsp. #2: CSS Klassen neu anlegen 
   ========================
Die hier unterhalb definierten CSS-Klassen sind einfach anzuwenden !!
Dazu in das Feld CSS-Klasse bzw. CSS-Class (z.B. in allen Blöcken, Menüeintrag, Shortcodes, PageBuilder, TablePress verfügbar) einfach den Namen der gewünschten Klasse eintragen.
Tipp: Man kann auch zwei CSS-Klassen durch ein Leerzeichen getrennt kombinieren, z.B.: bilderrahmen bggelb
*/


/*  Abstände definieren
 * Manchmal brauchen Texte oder andere Objekte einen Innen- oder Aussenabstand */
  
 .abstandinnen {
  padding: 20px;
}

.abstandaussen {
  margin: 20px;
}



/* Bsp. #3: CSS-Klassen mit Farben und Verläufe 
   ============================================
Einige tranparente Farben, die wir später auf Blöcke oder im Zeilen/Spalten/Widget-CSS des Page-Builder anwenden können. Hier eine schöne Farbtabellen bzw. Verläufe:
http://www.farbenundleben.de/webdesign/webdesign_RGBa_HSLa_opacity.htm
https://cssgradient.io/  
https://uigradients.com/#DarkOcean
https://webkul.github.io/coolhue/
*/

.bgblau{
	background-color: rgba(0,0,255,0.5);
}

.bgrot {
	background-color: rgba(255,0,0,0.5);
}

.bggruen {
	background-color: rgba(0,255,0,0.5);
}

.bggelb {
	background-color: rgba(255,255,0,0.5);
}

.bgweiss {
	background-color: rgba(255,255,255,0.5);
}

.bgverlauf {
	background: rgb(34,67,195);
	background: linear-gradient(14deg, rgba(34,67,195,1) 0%, rgba(45,253,58,0.5074404761904762) 100%);
}




/* CSS Bsp. #4-10
   =============
 * Hier definieren wir uns neue, eigene Klassen die wir später auf Bilder und andere Objekte anwenden.
 * Die Kursteilnehmer ohne HTML/CSS-Erfahrung können dazu einen Online-Generator nutzen um den Code 
 * mit Klicks zu erzeugen, wie z.B. http://angrytools.com/css-generator/
 * Weitere Webseiten finden sich im Kursordner D CMS-02


/* Bsp. #4a: Heller Verlaufshintergrund mit Schatten */

.schatten {
	padding: 10px;
	border-radius: 22px;
	background: linear-gradient(145deg, #e6e6e6, #ffffff);
	box-shadow:  25px 25px 60px #d4d4d4, 
  	           -25px -25px 60px #ffffff;
}

/* Bsp. #4b: Milchglaseffekt, sollte auf Objekte angewendet werden die einen Hintergrund haben */

.glass {
  background: white;
  min-height: 80vh;
  width: 60%;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.3)
  );
  border-radius: 2rem;
  z-index: 2;
  backdrop-filter: blur(2rem);
  display: flex;
}



/* Bsp. #5: Rahmen für Bilder und andere Objekte -  Weiße Rahmenlinie durchgehend mit Schatten */

.bilderrahmen {
	border: 10px solid #fff;
	box-shadow: 1px 1px 3px 3px rgba(200, 200, 200, .5);
}

/* Bsp. #6: Der selbe wie oben nur diesmal kreisrund  */

.bilderrahmen1 {
	border: 10px solid #fff;
	box-shadow: 1px 1px 3px 3px rgba(200, 200, 200, .5);
	border-radius: 50%;
}

/* Bsp. #7: Wie oben, nur diesmal in schräg und einem Hintergrundverlauf  */

.bilderrahmen2 {
	border: 10px solid #fff;
	box-shadow: 1px 1px 3px 3px rgba(200, 200, 200, .5);
	transform: rotate(5deg) ;
	background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#DEDEDE), to(#FAFAFA));
}

/* Bsp. #8: Hellgrauer Rahmen mit Schatten und unterschiedlichen Radien in den Ecken */

.bilderrahmen3 {
	border-color: #FAFAFA;
	border-width: 4px;
	border-style: solid;
	box-shadow: 5px 5px 50px #888888;
	border-radius:5px 20%;
}

/* Bsp. #9: Magenta, Rahmenlinie outset, abgerundet */

.bilderrahmen4 {
	border: 25px outset #BF218C;
	border-radius: 40px;
}

/* Bsp. #10: Magenta, Rahmenlinie unten outset , abgerundet */

.bilderrahmen5 {
	border-bottom: 25px outset #BF218C;
	border-radius: 40px;
}

/* Bsp. #11: Einzelne Menüeinträge farblich hervorheben
   ===========
 * Wir können CSS sogar auf Menüeinträge anwenden.  Wie?
 * - WordPress "Backend/Design/Menü" öffnen
 * - oben rechts unter "Ansicht anpassen" CSS-Feld aktivieren
 * - Menüeintrag öffnen und den Namen der Klassen eintragen,
 *   z.B. Menüeintrag "Wordpress" in das Feld CSS-Klasse "wpmenu" eintragen (ohne Anführungszeichen)*/

.wpmenu {
	background-color: #dfe7ff;
}

.rezmenu {
	background-color: #DFFFE7;
}

.infmenu {
	background-color: #FFDFF7;
}




/* Bsp. #12: CSS3-Effekte für Bilder: 
   ===============
 * CSS-Klassen blur blur:hover graycale und sepia
 * CSS 3 Effekte werden hier schön erklärt
 * https://blog.kulturbanause.de/2015/03/css-filter-effekte/ */

.blur {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

.blur:hover {
	-webkit-filter: blur(0px);
	filter: blur(0px);
}

.grayscale {
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}

.sepia {
	-webkit-filter: sepia(1);
	filter: sepia(1);
}