06.08.2025/* ========================================== 
**** Abundana.ch Custom Code - Version Andi + Cuno  ****

Theme Name: bt4-child beruhend auf bootstrap4
Theme URI: 
Author: Cuno Vollenweider + Andi Heutschi
Author URI: https://gravik.ch
Version: 2025-04
Description: 


======================================= */

/*--------------------------------------------------------------
Variablen und allgemeine Einstellungen (HTML + Body)
--------------------------------------------------------------*/

/* ===  Bootstrap-Farben umdefinieren ======================= */

@import url("bootstrap-colors.css");

/* Anzeigen der bg-Farben auf Demo-Info-Seite */
.square {width: auto; height: 23px; display: inline-block; color: white; font-size: 0.8rem; padding: 0 10px; border: 1px solid grey;}

/* Media Querys Breapoints - evtl. als Variablen speichern 
Bootstrap 4 BS4 - xs: <576px / sm: ≥576px	/ md: ≥768px / lg: ≥992px / xl: ≥1200px 
Quark bzw. specter.css - xs: <480px / sm: ≥600px / md: ≥840px / lg: ≥960px / xl: ≥1280px */

/* ===  Farbdefinitionen  etc. ======================= */

:root {
	--white: #FFF;
	--black: #000;
	--grey: #666;
	--light-grey: #f6f6f6;
	--dark-grey: #333;

	--main-color: #FF6161; /* Dunkelrot */

	--link: cornflowerblue;
	--link-active: grey;
	--link-hover: #FF6161;

	--link-dark: orange;
	--link-dark-active: yellow;
	--link-dark-hover: blue;

  /* Breakpoints BS4 - für max-width: */
  --lg: 1200px;
  --md: 992px;
  --sm: 768px;
  --xs: 576px;
  --xxs: 400px;

  /* Breakpoints spectre.css / Quark - für max-width: */
  --lg: 1280px;
  --md: 960px;
  --sm: 840px;
  --xs: 600px;
  --xxs: 480px;
}


/* ===  Button + Farben etc. ======================= */

.bg-white {background-color: var(--white); }
.bg-black {background-color: var(--black); }
.bg-grey {background-color: var(--grey); }
.bg-light-grey {background-color: var(--light-grey); }
.bg-dark-grey {background-color: var(--dark-grey); }
.bg-main-color {background-color: var(--main-color); }
.bg-link {background-color: var(--link); }
.bg-link-active {background-color: var(--link-active); }
.bg-link-hover {background-color: var(--link-hover); }
.bg-link-dark {background-color: var(--link-dark); }
.bg-link-dark-active {background-color: var(--link-dark-active); }
.bg-link-dark-hover {background-color: var(--link-dark-hover); }

.txt-black {color: var(--black); }
.txt-grey {color: var(--grey); }
.txt-light-grey {color: var(--light-grey); }
.txt-dark-grey {color: var(--dark-grey); }
.txt-main-color {color: var(--main-color); }
.txt-link {color: var(--link); }
.txt-link-active {color: var(--link-active); }
.txt-link-hover {color: var(--link-hover); }
.txt-link-dark {color: var(--link-dark); }
.txt-link-dark-active {color: var(--link-dark-active); }
.txt-link-dark-hover {color: var(--link-dark-hover); }

/* Farbe für Buttons - primary, secondary etc. */
.btn-primary {color: rgb(0, 0, 0); background-color: rgb(223, 223, 223); border: 0px;}
.btn-primary:hover {color: rgb(0, 0, 0); background-color: rgb(185, 184, 184)!important; }
.btn-primary.focus, .btn-primary:focus {color: white; background-color: rgba(150,0,0,1)!important; }

.btn-secondary {color: white; background-color: rgb(58, 115, 172);  border: 0px;}
.btn-secondary:hover {color: white; background-color: rgba(200,0,0,1)!important; }
.btn-secondary.focus, .btn-secondary:focus {color: white; background-color: rgba(150,0,0,1)!important; }

.btn-danger {color: white; background-color: red;  border: 0px;}
.btn-danger:hover {color: white; background-color: rgba(200,0,0,1)!important; }
.btn-danger.focus, .btn-danger:focus {color: white; background-color: rgba(150,0,0,1)!important; }

.btn-warning {color: white; background-color: rgb(252, 217, 59);  border: 0px;}
.btn-warning:hover {color: white; background-color: rgba(200,0,0,1)!important; }
.btn-warning.focus, .btn-warning:focus {color: white; background-color: rgba(150,0,0,1)!important; }

/* Farbdefinition für Badge - Blog-Kategorien */
.badge-primary {color: #fff; background-color: #969696;}
a.badge-primary:hover, .badge-primary:hover {color: #fff; background-color: #6d6d6d;}
a.badge-primary.focus, a.badge-primary:focus {color: #fff; background-color: #797a7a;}

.badge-secondary {color: #fff; background-color: #3089d8;}
a.badge-secondary:hover, .badge-secondary:hover {color: #fff; background-color: #133e64;}
a.badge-secondary.focus, a.badge-secondary:focus {color: #fff; background-color: #606362;}


/* Trennhilfe innerhalb Cards aktivieren */
.card-text {hyphens: auto;}


/* ===  allgemeine Einstellungen etc. ======================= */

html {scroll-behavior: smooth;}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

body {
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 16px;
  hyphens: none;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
}

/* übenommen von Bootstrap 4 */
*, ::after, ::before {
  box-sizing: border-box;
}

hr {border-top: 1px solid rgba(0,0,0,.2); margin: 8px 0;}

/*--------------------------------------------------------------
Schrift und Typographie
--------------------------------------------------------------*/

/* leere p-Tags ausblenden */
p:empty, sspan:empty {display: none;}

/* Überschriften nicht trennen */
h1, h2, h3, h4 {hyphens: none;}

/* Link-farben
a {color: var(--link); text-decoration: none;}
a:hover {color: var(--link-hover); }

/* ===  Schriftgrösse und Farbe ======================= */

p {font-size: 1.0rem;} 

h1, h2, h3, h4, h5 {color: var(--main-color); font-weight: 600;}

h1, .blog-item h2 {font-family: 'Noticia Text',  Georgia, 'Times Roman','Times New Roman', Times, serif; font-weight: 400; }

h1 {font-size: 2.4rem; font-weight: 400; }
h2 {font-size: 1.6rem; padding-top: 1.3rem; } 
h3 {font-size: 1.4rem; padding-top: 0.5rem; }
h4 {font-size: 1.2rem; padding-top: 0.5rem; }
h5 {padding-top: 1rem; color:rgba(0, 0, 0, 0.7)}

.card h2 {padding-top: 0rem; font-size: 1.4rem; } /* roter Titel Blog-Overview */
.card h4 {padding-top: 0rem; font-size: 1.4rem; } /* roter Titel Homepage +  */
.mod-text-row h2 {padding-top: 0rem; }


h1 b {font-weight: 600;} /* für animierter Text auf Homepage */
b, strong {font-weight: 600;}

/* Schriften bei versch.  Displaygrössen */

@media (max-width: 768px) {
  h1 {font-size: 2.2rem; } 
  h2 {font-size: 1.5rem; } 
  h3 {font-size: 1.3rem; } 
  }
 
@media (max-width: 575px) {
  h1 {font-size: 1.8rem; line-height: 1.2;} 
  h2 {font-size: 1.4rem; } 
  h3 {font-size: 1.2rem; }
  }

/* ====  Schriften Blog-Items (Einzelansicht)  ==== */

.blog-item h2 a {font-weight: 200; color: black; pointer-events: none;}

.blog-item h2 a {font-size: 1.8rem; padding-top: 0.5rem; }
.blog-item h3 {font-size: 1.5rem; padding-top: 0.5rem; }
.blog-item h4 {font-size: 1.3rem; padding-top: 0.8rem;}



/*--------------------------------------------------------------
CSS für Shortcodes
--------------------------------------------------------------*/

/* ===  Columns per Flex ======================= */

.flex-col {
	display: flex; 
	flex-wrap: wrap;
	gap: 20px;
	}

.flex-col > * {
	flex-grow: 1; 
	flex-shrink: 1; 
	flex-basis: 400px;
	}

/* Für Shortcode col_L und col_R */
.flex-col-LR > * {flex-basis: 400px; }

.flex-col-LR {
	gap: 20px; 
	margin-top: 8px; margin-bottom: 8px; 
	background-color: #f6f6f6; 
	padding: 1rem 1rem; 

  /* Für Bootstrap4, Damit flex-col-LR wie row funktioniert */
  margin-left: -15px;
  margin-right: -15px;
	}

.flex-col-left {background-color: rgba(255,0,0,0); order: 1; }
.flex-col-right {background-color: rgba(0,255,0,0);); order: 3;}

/* Damit bei einspaltgem Layout auch weisser Rand unterhalb linker spalte - vgl. Shortcode*/

.flex-col-abstand {display: none;}

@media (max-width: 992px) {
.flex-col-abstand {
	display: block;
	background-color: rgba(255,255,255,1);); 
	order: 2; 
	height: 8px; 
	margin-left: -16px; 	margin-right: -16px; 
	}
}


/* ===  Columns per Flex (Bild links - Text rechts) ======================= */

.flex-LR-bildtext {
	display: flex; 
	flex-wrap: wrap;
	gap: 20px;
	}

.flex-L-bild {
	flex-grow: 0; 
	flex-shrink: 1; 
	flex-basis: 170px;
	border: 0px solid blue;
	}

.flex-L-bild p {margin-top: 7px; margin-bottom: 0;}

.flex-R-text {
	flex-grow: 1; 
	flex-shrink: 1; 
	flex-basis: 350px;
	border: 0px solid blue;
	}


/* ===  Columns per Grid ======================= */

.grid-col-SC {
	/* Folgende Optionen sind im Shortcode [col_grid] als styles integriert und können mit folgenden Parameter geändert werden. 
	class / size / gap / m-top / m-bottom / font-size 
	Vom custom.css her müssen diese styles per !important überschrieben werden. 
	default-werte: class: grid-col-SC / size: 200px / gap: 10x / margin-top+margin-bottom: 20px font-size: 90%) */

	/*
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
	grid-gap: 10px  !important;
	margin-top: 20px; margin-bottom: 20px  !important; 
	font-size: 120% !important; */
	}

/* Zum Verwenden von Grid per CSS */
.grid-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
	margin-top: 20px; margin-bottom: 20px;
	font-size: 90%;
  }

.grid-test {
	background-color: yellow;
	}

/* Je nachdem wie Unterelemente aufgelistet werden, muss p aufgerufen werden */

/* noch Testen */

.grid-col-p p {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
	}


/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/

/* ===  Layout für Header, Main und Footer ======================= */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
	 margin-bottom: 0; /* im Theme definierte mit 60px;*/ 
}

/* Header-Bereich (inkl. Navigation) vgl. block header_navigation bzw. navigation.html.twig */
.header-gr {display: auto;}

/* Tell the  main element to grow to the full size of the body */
.main-gr {
  position: relative;
	margin-top: 0px;
	flex-grow: 1;
	min-height: 400px;
}

/* main-content ohne Anfangsabstand */
.main-content {margin-top: 0px;}

/* But leave header and footer also take the size they need and not get shrunk. */
.header-gr, .footer-gr {
  flex-shrink: 0;
}

.footer-gr {
	position: relative; /* um Theme-Einstellung zu neutralisieren */
}


/*--------------------------------------------------------------
Einstellungen für Aufzählung etc,
--------------------------------------------------------------*/

/* =========== Aufzählungszeichen linksbündig */

.main-gr ul {
	padding-left: 1.2rem;
	list-style-type: none;}

.main-gr ul li {
  text-indent: -0.5rem;
  line-height: 1.4rem;
}

.main-gr ul li::before {
	content: "•";
	position: relative;
	font-size: 120%;
	left: -0.5rem;}

/* Obenstehende einstellungen für Pagination deaktvieren */
ul.pagination {padding-left: auto; list-style-type: none;}
ul.pagination li {text-indent: 0;}
ul.pagination li::before {content: "";}

/* Abstand zwischen p und ul verringern */
.main-gr p:has(+ ul) {
  margin-bottom: 0.2rem; /* Kein Abstand, wenn direkt danach ein <ul> kommt */
}


/*--------------------------------------------------------------
Navbar (inkl. Logo, Lang-Switcher und Hamburger
--------------------------------------------------------------*/

/* === Navbar Elemente positionieren (per Flex)  ====================== */

.navbar .container {align-items: flex-start; flex-wrap: wrap; }
.navbar .navbar-collapse {flex-basis: 100%; margin-top: 10px;}
.navbar .navbar-button {flex-basis: 100%; align-self: flex-end; text-align: right;}


/* === Navbar allgemein ====================== */

/* Toggler randlos */    
.navbar-toggler {
  border: none;
}

/* === Logo inb Navbar allgemein ====================== */

/* Groessse des Logos auf versch. Displays */
.navbar-logo img  {
  width:208px;
  height: auto;
}

/* === Media-Querys für Logo bzw. Navbar-Brand ====================== */

@media (max-width: 992px) {.navbar-logo img  {width:200px; }}
@media (max-width: 767px) {.navbar-logo img  {width:180px; }}
@media (max-width: 576px) {.navbar-logo img  {width: 180px; }}
@media (max-width: 400px) {.navbar-logo img  {width: 160px; }}

/* Mouse-over logo */
.navbar-logo:hover {opacity: 0.7;}

/* === Navbar Farben ====================== */

.navbar-nav .nav-link {font-weight: 400;}

.navbar-light .navbar-nav .nav-link {color: var(--link);}
.navbar-light .navbar-nav .active .nav-link {color: var(--link-active); font-weight: 600; }
.navbar-light .navbar-nav .active .nav-link:hover {color: var(--link-active); }
.navbar-light .navbar-nav .nav-link:hover {color: var(--link-hover);}

/*
.navbar-dark .navbar-nav .nav-link {color: var(--link-dark);}
.navbar-dark .navbar-nav .active .nav-link {color: var(--link-dark-active); font-weight: 600; }
.navbar-dark .navbar-nav .active .nav-link:hover {color: var(--link-dark-active); cursor: default;}
.navbar-dark .navbar-nav .nav-link:hover {color: var(--link-dark-hover);}
*/

/* === Dropdowns-Navigation ====================== */

.navbar-collapse.show .navbar-nav .nav-item.active {background-color: rgba(0,0,0,0.05); }
.navbar-collapse.show .navbar-nav .nav-item:hover {background-color: rgba(0,0,0,0.05); }

/* Seitenspezifitsche Einstellungen - Kein Pointer-event bei Home */
.Accueil .navbar-logo {pointer-events: none;}
.Home .navbar-logo {pointer-events: none;}


/* === Language-Switcher  ====================== */

/* Zurücksetzen der Original-CSS Position der Elemente */

.langswitcher {top: 50%; transform: translateY(-50%);} /* Original */
.langswitcher {top: 0%; transform: translateY(0%);}

/* Formatierung der Texte */

.langswitcher a {font-weight: 400; text-decoration: none !important; }

.navbar-light .langswitcher a {color: var(--link); }
.navbar-light .langswitcher a.active {color: var(--link-active); font-weight: 600; }
.navbar-light .langswitcher a.active:hover {color: var(--link-active); cursor: default;}
.navbar-light .langswitcher a:hover {color: var(--link-hover);  }

/* 
.navbar-dark .langswitcher a {color: var(--link-dark); }
.navbar-dark .langswitcher a.active {color: var(--link-dark-active); font-weight: 600;  }
.navbar-dark .langswitcher a.active:hover {color: var(--link-dark-active); cursor: default; }
.navbar-dark .langswitcher a:hover {color: var(--link-dark-hover);  }
*/

.langswitcher {margin-right: 5px;}

  /* Langswitcher */
@media (max-width: 767px) {
  .langswitcher {margin-right: 10px;}
  }


/* Lang-switcher Abstand zwischen FR DE EN */        
    .langswitcher .external {
      padding: 0 3px 0 3px;
  }

/*--------------------------------------------------------------
Hero und Header
--------------------------------------------------------------*/

/* === Allgemeine Einstellungen ====================== */

/* Überschreiben der Hintergrund-Farbe */
.header {background-color: #fff !important; background-image: linear-gradient(#fff, #fff);}

/* Farbe der Header- bzw. Hero-Schrift */
.header, .header h1, .header h2, .header h3 {color: #ffffff;}

.hero-gr.hero-medium {height: 400px;} /* Andi hat's auf 500px gesetzt */
.hero-gr.hero-small {height: 250px;} /* Andi hat's auf 500px gesetzt */

.hero-gr {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

/* === Schrift im Hero ====================== */

.hero-gr h1 {
  font-family: 'Noticia Text', 'Times Roman', Georgia, 'Times New Roman', Times, serif;;
  font-weight: 300;
  width: 100%;
  font-size: 3.5rem;
  /*text-align: center !important; */
  text-align: left; 
  text-shadow: 3px 3px 10px #000; 
  color: var(--white);;
  }

.hero-gr h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji";
  font-weight: 400 !important;
  font-size: 1.8rem;
  margin-top: 0;
  width: 100%;
  font-weight: normal;
  align-self: flex-end;
  text-align: right;
  text-align: left;
  text-shadow: 2px 2px 3px #092538; 
  color: var(--white);
  }

/* === Media-Querys für Hero ====================== */

/* Grösse des Heros */

@media (max-width: 767px) {
	.hero-gr.hero-medium {height: 320px;} 
	.hero-gr.hero-small {height: 320px;}
}
@media (max-width: 767px) {
	.hero-gr.hero-medium {height: 200px;} 
	.hero.hero-small {height: 200px;}
} 

/* Schrift des Heros */  
@media (max-width: 992px) {.hero-gr h1 {font-size: 3rem; } .hero-gr h3 {font-size: 1.5rem; } }
@media (max-width: 767px) {.hero-gr h1 {font-size: 2.5rem; } .hero-gr h3 {font-size: 1.2rem; } }
@media (max-width: 576px) {.hero-gr h1 {font-size: 1.8rem; } .hero-gr h3 {font-size: 1.2rem; } }

/* === Hero-gr inkl. Overlay ====================== */

/* Damit Navbar über Hero kommt */
nav.navbar {z-index: 4;}

.hero-gr {
  height: 30vh;
  margin-top: 0; /* noch anpassen - Verschieben wegen Fixed top */
  }
        
.hero-gr .container {
  z-index: 3;
  height: 100%;
  }

/* === Hero-Overlay - Farbe / Verlauf, Helligkeit  ====================== */

.hero-gr .image-overlay {
  opacity: 0.2;
  z-index: 2;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /*
  background: linear-gradient(139deg, rgba(60, 240, 240, 0.5), rgba(248, 130, 12, 0.5) !important);
  Xbackground: rgba(155, 0, 0, .3);
  Xbackground: hsl(204, 50%, 50%, .8); */
  }

/* === Hero-Bilder - Helligkeit, Filter etc. ====================== */

/* Herobilder wegen Scroll-Zoom anpassen */

.hero-gr {/* position: inherit;*/
    background-position: 15% 70%;
    background-position: bottom;
}

.hero-gr .image-hero {
      display: block;
      z-index: 1;
      position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
      background-size: 100%;
      background-repeat: no-repeat;
		  background-position: center bottom;

      /* Parallax-Effekt */  
      /* background-attachment: fixed; */

      /* filter:brightness(80%); Filter ausgeblendet */
      /* filter: grayscale(100%) contrast(150%) brightness(80%); */
		/* filter: grayscale(100%); */
      }

/* Beim Firefox im mobilen Bereich werden unten und oben Balken angezeigt - Hier 115% wählen */

@media (max-width: 400px) {
	.hero-gr .image-hero {
		background-size: 125%;  
	}
}




/* Image-Overlay mix-blend-mode - normal, multiply, overlay, screen, color, saturation*/
.hero-gr .image-overlay {mix-blend-mode: normal;}

/* .hero .image-hero {background-blend-mode: multiply; } - funktioniert nicht richtig */

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

.footer-gr {
	height: auto;
	background-color: rgba(201, 201, 201, 0.15); /* Orange - 50% Transparent */
	margin-top: 5px;
}

.footer-gr .text-muted {
    color: #444 !important;
	 text-align: left;
}

.footer a:hover {text-decoration: underline;}


/* Teil der Formatierung deaktiviert durch display: flex */
.footer-gr .container {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between; /* flex-start / space-evenly / space-between / space-around / center etc. */
	column-gap: 50px;
	align-items: flex-start;
}

/* Footer-Main wie cards per grid formatieren */

/* beim container flex deaktivieren */
.footer-gr .container { 
	display: block;
}

.footer-gr .main {width: 100%;}


.footer-gr .main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-column-gap: 40px;
	grid-row-gap: 10px;
	margin-top: 10px; margin-bottom: 10px;
	margin-right: 30px;
}

.left, .middle, .right {border: 0px solid blue;}

.footer-gr .oben, .footer-gr .main, .footer .unten {flex-basis: 100%;}


.footer-gr img {margin-top: 5px;}
.footer-gr a:hover img {opacity: 0.7;}


.footer-gr ul {
	list-style-type: none;
	padding: 0; margin:0;
	margin-left: 0em;
	margin-bottom: 1rem; /* damit ausrichtung per flex align-items untenbündig ist */
}

/* vgl. Aufzählungszeichen z.B. mit Strich vgl. flex-layout.html *
/*
.footer li::before {content: "–"); 
.footer ul li::before { content: "&hearts"; color: firebrick; font-size: 2em; }
before { content: "&#9829;"; color:red; }
*/

/*--------------------------------------------------------------
Spezialseiten
--------------------------------------------------------------*/

/* === Cards auf Startseite ====================== */

.mod-grid-cards {margin: 20px; padding-bottom: 20px;}

/* Kleinerer Abstand bei Mobilen Geräten */
@media (max-width: 768px) {
	.mod-grid-cards {margin: 20px 0px 10px 0px; padding-bottom: 20px;}
}


/* === Modular Text (neu) ====================== */

.mod-text-gr h1, .mod-text-gr h2, .mod-text-gr h3 {color: var(--main-color);}

.mod-text-gr h1, .mod-text-gr  h3 {font-weight: 400; }
.mod-text-gr  h2 {font-weight: 400; }

/* Hintergrund einfärben und Abstand bei col_Z */
.mod-text-gr  .col-inhalt, .mod-text-gr  .col-title {background-color: var(--light-grey); } 

.mod-text-gr  .col-title { padding: 1.5rem 0;} 
.mod-text-gr  .col-inhalt {padding: 1.5rem 0;} 




/*--------------------------------------------------------------
Grid-Cards (Hauptseite und auch bei Blog-Übersicht)
--------------------------------------------------------------*/

/* Steuerung des Card-Layouts*/
.grid-cards {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-gap: 20px;
}

.grid-cards .card {
	order: 99;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.0);
}

/* Aus Grid-Tutorial */
/* grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); */

.grid-cards .card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between !important; 
} 

/* Textbereich soll oben angeordnert werden */ 
.grid-cards .card-text {
	height: 100%;
  flex-shrink: 1;
} 

/* Bilder zuschneiden - Position kann als Style per Frontmatter oder Blueprint angepasst werden vgl. column.CardImgPos */
.grid-cards .card img {
    height: 180px;
    width: 100% !important;
    object-fit: cover;
    object-position: center center;
}

/* Hover-Effekt für Text und Titel - mit und ohne Link - cardLink wird per Twig gesetzt */
.card-gr:hover .card-img {opacity: 0.7;}
.cardLink:hover .card-title, .cardLink:hover .card-text, .cardLink:hover .card-img {opacity: 0.7;}


/*  Schrift und Buttone formatieren */

.card-title {color: var(--main-color);}

.Xcard .btn:hover {background-color: red;}


/* Fontawesome-Icon */
.grid-cards .card-icon  {text-align: center; }
.grid-cards .card-icon .fa {font-size: 50px; color: rgba(0,0,0, 0.3);}
.grid-cards .card-icon .fa {font-size: 50px; color: var(--link);}
.grid-cards .card-icon:hover .fa {color: rgba(0,0,0, 0.5);}
.grid-cards .card-icon:hover .fa {color: color: var(--link-hover);;}


/* Einzelne Cards ansprchen - standard ist 99 (siehe oben) 
Kann per Blueprint/Frontmatter angepasst werden - vgl. column.CardNr:*/

/*.grid-cards .card-nr-88 {order: 1; background-color: #fff; }
.grid-cards .card-nr-2 {order: 1;}
.grid-cards .card-nr-3 {order: 1;}
*/


/*--------------------------------------------------------------
Formular
--------------------------------------------------------------*/

/* Formular-Inhalt Layout */
.form-container {
	display: flex;
	flex-wrap: wrap;
}

.form-container {background-color: #f6f6f6; padding: 1.5rem 0 5rem 0;}

.form-text, .form-inhalt {flex: 50%; }
.form-info, .form-daten {flex: 100%;}

.form-text, .form-info, .form-data {padding-left: 1rem; padding-right: 1rem;}
.form-inhalt {margin-top: 3rem;}

/* Formular-Inhalt Formatieren */

.form-container h1, .form-container h2, .form-container h3 {color: var(--main-color);}
.form-container h1, .form-container h3 {font-weight: 400; }
.form-container h2 {font-weight: 400; }

.form-container .form-field,  .form-container .button {margin-left: 1rem;} 
.form-container .control-label {margin-top: 0.5rem; margin-bottom: 0.2rem;}
.form-container .button {margin-top: 1rem;} 

.form-data.basic-captcha .form-input-wrapper {border: 0;} /* Rand um Captcha entfernen */

/* Linker und oberer Rand bei Captcha und Button vergrössern */

.form-container .col-sm-2, .form-container .col-sm-10 {padding-left: 0px; padding-right: 0px;} /* Zurücksetzten des BS4-Formulars */ 

/* === Media-Querys == */

@media (max-width: 1024px) {
  .form-text, .form-inhalt {flex: 100%;}
  .form-inhalt {margin-top: 0rem;}
}

@media (min-width: 576px) {.form-container .col-sm-2 {max-width: 100%; }}
@media (max-width: 576px) {.form-container .col-sm-2, .form-container .col-sm-10 {margin-left: auto; padding-right: 1rem;}}

/* Thank-you alert ausblenden */

/* Alert-Meldung ausblenden */
.form-container .alert {display: none;}

/*--------------------------------------------------------------
Blog
--------------------------------------------------------------*/

/* ====  Allgemeine Einstellungen  */

/* Abstand oben (ohne Suche) */

.sidebar-content {margin-top: 1rem;}

/* Abstand Pagination zu maint-content (blog etc.) - per Twig immer eingeblendet */
.Blog .pagination-container {padding-top: 0rem; padding-bottom: 1rem; margin-bottom: 0.5rem; }
.pagination-container .row {min-height: 4rem;}

.blog-item .container {background-color: transparent; padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 1rem;}

/* Links im Blog-item anklickbar machen */
/* .blog-item .list-item a {pointer-events: none;} */


/* Schriftgrösse breadcrumb verkleinern */
ol.breadcrumb {font-size: 80%;}
.img_source p {font-size: 90%;}
.blog-image img {margin-bottom: 15px;} /* nach Blog-Image Abstand */


.list-blog-header h3 {font-weight: 400;}
.list-blog-date {font-size: 0.8rem;}
.list-blog-tags, .list-blog-categories {font-size: 0.8rem;}

/* Abstände zueinander */
.list-blog-meta {padding-bottom: 1rem; }


/* ====  Einstellungen Blog Übersicht (Blog-Overview) === */

/* Aktivieren der JS-Links in der Overview-Ansicht mit Mouse-Over */
/* .blog-overview .list-item {cursor: pointer; pointer-events: auto;} */

.blog-overview .list-item:hover .blog-image,
.blog-overview .list-item:hover .blog-title,
.blog-overview .list-item:hover .list-blog-padding p
{opacity: 0.6;}

.blog-overview .list-blog-padding a p {color: black;}
.blog-overview .list-blog-padding a.summary:hover {text-decoration: none !important;}
.blog-overview .blog-title a:hover {text-decoration: none !important;}




/* Keine Mouse-Events auf Bild im Blog-Item */

/* Abstand Sortieren der Elemente bei Blog-Übersicht - da Reihenfolge in blog-item.html.twig definiert ist */
.blog-overview .list-blog-header {display: flex; flex-direction: column;}

.blog-overview .list-blog-header .blog-summary {order:1; display: none;} /* Ausblenden der Summary vor Bild in Übersicht */
.blog-overview .list-blog-header .blog-image {order: 1; }
.blog-overview .list-blog-header .blog-title {order: 3; padding: 0 1rem 0rem 1rem;}
.blog-overview .list-blog-header .list-blog-meta {order: 2; padding: 0 1rem 1rem 1rem;}

/* ====  Schriften Blog Übersicht (Blog-Overview)  ==== */

.blog-overview h2 a {color: var(--main-color); }

.blog-overview h3 a {color: var(--main-color); font-weight: 600; font-size: 1.5rem; cursor: pointer;}
.blog-overview h3 a:hover {opacity: 0.6; text-decoration: none;} 



/* ====  Einstellungen Blog-Items (Einzelansicht) === */

/* Deeaktiveren der JS-Links in der Einzelansicht */
.blog-item .list-item {cursor: auto; XXpointer-events: none;} 

.blog-item .list-item {margin: 0;}

/* ====  Schriften Blog-Items (Einzelansicht)  ==== */

.blog-item .blog-image {Xpointer-events: none; cursor: default;}

.blog-item .blog-summary, .blog-item .blog-summary p {font-size: 1.2rem; font-style: italic;}

/* ====  Blog-Overview Einstellungen */

/* Ausblenden der Tags auf .blog-overview */
.blog-overview .list-blog-tags {display: none;}

.blog-overview .list-blog-padding {padding: 0 1rem 0rem 1rem;;}

/* Formatieren und ausblenden von Link des Titels im Blog-Detail */
.blog-overview .list-item {margin: 0; }
.blog-overview .card  {height: auto;}

/* Ende geändert durch Cuno */

/* Code noch testen ob notwendig */ 

.blog-overview .card {margin-bottom: 10px; display: inline-block;}
 


/* Bei gewählter Kategorie wird diese in per JavaScript als body-class übernommen */
.categ-form .ct-form, 
.categ-gest .ct-gest,
.categ-neur .ct-neur,
.categ-pers .ct-pers,
.categ-self .ct-self,
.categ-suje .ct-suje,
.categ-trai .ct-trai, 
.categ-vari .ct-vari,
.categ-zrm .ct-zrm
{background-color: #296DA0 ;}



/* ========================
Accordion formatieren - damit immer aktuelle Seite blau bleibt
=========================  */

/* Ändern des ui-accordion.html.twig (partials) - vgl. Twig Shortcode-UI bzw. Ordner orig */


.accordion-wrapper {
  margin: 0px 0px;
  margin-top: -0.5rem;
}

.accordion-wrapper label {
	background-color: transparent;
	color: var(--link);
	font-weight: 600;
	border: 0px;
	padding: 5px 0px;
	background: transparent;
	background-image: url("img/trans_100x100px.png");
	}

/* Neue Version andi - more-und-less unten -  */

.accordion-wrapper input + article + label .acc-on {display: none;}
.accordion-wrapper input + article + label .acc-off {display: inline;}

.accordion-wrapper input:checked + article + label .acc-on {display: inline;}
.accordion-wrapper input:checked + article + label .acc-off {display: none; }

.accordion-wrapper label:hover {
	background: transparent;
	color: var(--link-hover); 
	}

.accordion-wrapper label:hover:after, .accordion-wrapper input:checked + label:hover:after {
	  background-image: url("img/trans_100x100px.png");
	 }

/* Damit Abstand nach und vor Öffne übernommen wird */
.accordion-wrapper article p:first-child  {margin-top: 1rem;}
.accordion-wrapper article p:last-child  {margin-bottom: 0;}
.accordion-wrapper input:checked + label {border-bottom: 0px; }
.accordion-wrapper > div:last-child label, .accordion-wrapper > div:last-child input:checked ~ article {border-bottom: 0px; }


.accordion-wrapper article {
	background: transparent; 
	margin-top: 10px;
	padding: 10px 0 0 0;
	border: 0px !important;
}

  .accordion-wrapper input:checked + label {
    border-bottom: 0px; }
  .accordion-wrapper > div:last-child label, .accordion-wrapper > div:last-child input:checked ~ article {
    border-bottom: 0px; }

/* ======== button als normaler Link formatieren  ========== */
.btn_link {
	background: none!important;
  border: none;
  padding: 0!important;
  /*margin-left: -0.2rem;*/
  color: var(--link);
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
}

.btn_link:hover {
	color: var(--link-hover);
  text-decoration: underline;
}

/* ======== Animation Hauptseite (kann evtl. später auskommentiert oder gelöscht werden) ======= */

.img-liste {
  display: block;
  position: relative;
  width: 800px; 
  height: 100px; 
  max-width: 100%;
}

@media only screen and (max-width: 550px) {
  .img-liste {height: 50px;}
}

.img-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  opacity: 0;
  animation: fadeInOut 12s infinite;
}

.img01 {animation-delay: 0s;}
.img02 {animation-delay: 4s;}
.img03 { animation-delay: 8s;}

@keyframes fadeInOut {
  0% { opacity: 0; }
  15% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}


/* ======== Test-Code ========== */