/* 
 Theme Name:   Balie Child Theme
 Theme URI:    
 Description:  
 Author:       Bernhard
 Author URI:   
 Template:     balie
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/

*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Color styles */
:root {

  --hofgut--schwarz: #060609;
  --hofgut--schwarz-opacity: rgba(6, 6, 9, 0.5);

  --hofgut--weiß: #FFFFFF;
  --hofgut--weiß-opacity: rgba(255, 255, 255, 0.5);

 --hofgut--milch: #F3F3F3;


  --hofgut--lila: #B587D4;
    --hofgut--lila-light: #DFAEFF;

  --hofgut--lila-opacity: rgba(94, 47, 125, 0.5);

  --hofgut--rosa: #DB8BA8;
    --hofgut--rosa-light: #FFC6DA;
  --hofgut--rosa-opacity: rgba(219, 139, 168, 0.5);

  --hofgut--türkis: #98C6E8;
  --hofgut--türkis-opacity: rgba(152, 198, 232, 0.5);

  --hofgut--gelb: #D7C820;
  --hofgut--gelb-opacity: rgba(215, 200, 32, 0.5);

  --hofgut--grün: #85C969;
  --hofgut--grün-opacity: rgba(133, 201, 105, 0.5);

  --hofgut--hellgrau: #D8D8D8;
  --hofgut--hellgrau-opacity: rgba(216, 216, 216, 0.5);

  --hofgut--dunkelgrau: #1D1D1B;
  --hofgut--dunkelgrau-opacity: rgba(29, 29, 27, 0.5);

  --hofgut--blau: #30B4E8;
  --hofgut--blau-opacity: rgba(0, 173, 238, 0.5);
  

}

.icon [class^="fa"] {
  font-size:1.6em;
}

.table > :not(caption) > * > *, .wp-block-table table > :not(caption) > * > * {
  background-color: transparent !important;
}

strong {font-weight: bold !important;}

html {
    background-image: url('img/balie_bg_plain.jpg');
   
    ;
}

body {
    font-family: "Futura-Light", sans-serif;
    font-size:20px;
}

html, body {
 
}

body {
  display: flex; /* Use Flexbox */
  flex-direction: column; /* Stack elements vertically */
  min-height: 100vh; /* Minimum height of the viewport */
}

body.page {
  background-color:var(--hofgut--hellgrau) !important;
  
}

body.page-template-page-login {
  background-image: url('img/balie_login_bg.jpg') !important;
  background-size:cover;
  font-size:18px;
}

body.page-template-page-login a {
color:white !important;

}

body.page-template-page-login button,
body.page-template-page-login input {
font-size:22px;
width:auto;
font-family: "Futura-Light", sans-serif;


}

a.navbar-brand.centered {
  display:none;
}

body.page-template-page-login .navbar-brand.centered {
  display:block;
}



body.page-template-page-login .navbar-brand.right-aligned,
body.page-template-page-login .main-nav,
body.page-template-page-login  a.kursplan,
body.page-template-page-login  .navbar-toggler,
body.page-template-page-login  .btn.hilfe {
  display:none;
}

body.page-template-page-login .navbar > .container {
  justify-content:center;
}

p {
  font-size:20px;
}

span.step-text {
  font-weight:bold;
}


body:not(.blog) main,
body:not(.home) main {
    padding-top: 67px !important;
    margin-top: 0 !important; 
}
body:not(.blog) .content,
body:not(.home) .content,
body:not(.blog) #sidebar,
body:not(.home) #sidebar {
    padding-top: 67px;
      padding-bottom:100px;
}


h1.entry-header {
  font-size:45px;
}

h2 {
  font-size:32px;
}

.card h2 {
  font-size:20px;
}

 .card[class^="lernfelder"] h2 {
   text-align:center;
    font-size:40px;
}

.btn-schwarz {
  background-color:#000;
  color:#fff;
  border:2px solid #000;
}

.btn-schwarz:hover {
  background-color:#fff;
  color:#000;
  border:2px solid #000;
}


body, footer, header {
    background-color:transparent !important;
}

		body.ppwp-sitewide-protection {
   background-image: url("https://balie-lernen.de/wp-content/uploads/2023/10/login_bg.jpg") !important;

   background-size: cover;
   background-repeat: no-repeat;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}


/*/*Bilder Hintergrund*/

.img-container {
    position: relative;
    display: inline-block; /* or block, depending on your layout */
    overflow: visible; /* Ensure the pseudo-element can be seen outside the container */
}

.img-container::before {
    content: '';
    position: absolute;
    top: -5px; /* Extend beyond the top edge of the image */
    left: -5px; /* Extend beyond the left edge of the image */
    right: -5px; /* Extend beyond the right edge of the image */
    bottom: -5px; /* Extend beyond the bottom edge of the image */
    z-index: 1; /* Place it behind the image */
    transform: rotate(2deg);
    transform-origin: center; /* Ensure the rotation is centered */
}

.img-container img {
    display: block; /* Remove any space below the image */
    width: 100%; /* Make the image fill the container */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* Make sure the image is positioned relative to its container */
    z-index: 1; /* Ensure the image is above the pseudo-element */
}


/* Methoden im Kurs */
.card.lernfelder-methodik-im-kurs .image-container,
body.lernfelder-methodik-im-kurs #myNavPills .nav-link .number,
body.lernfelder-methodik-im-kurs .kartei::before {
    background-color: var(--hofgut--lila);
}
body.lernfelder-methodik-im-kurs .inhaltsverzeichnis [class^="fa"] {
    color: var(--hofgut--lila);
}

/* Kurs planen */
.card.lernfelder-kurs-planen .image-container,
body.lernfelder-kurs-planen #myNavPills .nav-link .number,
body.lernfelder-kurs-planen .kartei::before {
    background-color: var(--hofgut--rosa);
}
body.lernfelder-kurs-planen .inhaltsverzeichnis [class^="fa"] {
    color: var(--hofgut--rosa);
}

/* Sprache und Umgang */
.card.lernfelder-kommunikation-und-interaktion .image-container,
body.lernfelder-kommunikation-und-interaktion #myNavPills .nav-link .number,
body.lernfelder-kommunikation-und-interaktion .kartei::before {
    background-color: var(--hofgut--gelb);
}
body.lernfelder-kommunikation-und-interaktion .inhaltsverzeichnis [class^="far"] {
    color: var(--hofgut--gelb);
}

/* Persönliches Wirken */
.card.lernfelder-personliches-wirken .image-container,
body.lernfelder-personliches-wirken #myNavPills .nav-link .number,
body.lernfelder-personliches-wirken .kartei::before {
    background-color: #98c6e8;
}
body.lernfelder-personliches-wirken .inhaltsverzeichnis [class^="fa"] {
    color: #98c6e8;
}

/* Kursleitung an der VHS */
.card.lernfelder-kursleitung-vhs .image-container,
body.lernfelder-kursleitung-vhs #myNavPills .nav-link .number,
body.lernfelder-kursleitung-vhs .kartei::before {
    background-color: var(--hofgut--grün);
}
body.lernfelder-kursleitung-vhs .inhaltsverzeichnis [class^="fa"] {
    color: var(--hofgut--grün);
}

/* Digitaler Kurs */
.card.lernfelder-digitaler-kurs .image-container,
body.lernfelder-digitaler-kurs #myNavPills .nav-link .number,
body.lernfelder-digitaler-kurs .kartei::before {
    background-color: var(--hofgut--blau);
}
body.lernfelder-digitaler-kurs .inhaltsverzeichnis [class^="fa"] {
    color: var(--hofgut--blau);
}

/* Begleitung */
.card.lernfelder-begleitung .image-container,
body.lernfelder-begleitung #myNavPills .nav-link .number,
body.lernfelder-begleitung .kartei::before {
    background-color: var(--hofgut--milch);
}
body.lernfelder-begleitung .inhaltsverzeichnis [class^="fa"] {
    color: var(--hofgut--milch);
}




/* /////////////////////// */

body.lernfelder-digitaler-kurs::before,
.img-container::before {
  background-color: var(--hofgut--blau-opacity);
}

body.lernfelder-digitaler-kurs .nav-pills .nav-link.active i{
color: var(--hofgut--blau-opacity);
}

/* ----- */

body.lernfelder-begleitung::before,
.img-container::before {
  background-color: var(--hofgut--dunkelgrau-opacity);
}

body.lernfelder-begleitung .nav-pills .nav-link.active i{
color: var(--hofgut--blau-opacity);
}

/* ----- */

body.lernfelder-kommunikation-und-interaktion::before,
body.lernfelder-kommunikation-und-interaktion .img-container::before {
  background-color: var(--hofgut--gelb-opacity);
}

body.lernfelder-kommunikation-und-interaktion  .nav-pills .nav-link.active i{
 color: #000;
}

/* ----- */

body.lernfelder-kurs-planen::before,
body.lernfelder-kurs-planen .img-container::before {
  background-color: var(--hofgut--rosa-opacity);
}

body.lernfelder-kurs-planen .nav-pills .nav-link.active i {
 color: var(--hofgut--rosa-opacity);
}

/* ----- */

body.lernfelder-methodik-im-kurs::before,
body.lernfelder-methodik-im-kurs .img-container::before {
  background-color: var(--hofgut--lila-opacity);
}

body.lernfelder-methodik-im-kurs .nav-pills .nav-link.active i {
  color: var(--hofgut--lila-opacity);
}

/* ----- */

body.lernfelder-kursleitung-vhs::before,
body.lernfelder-kursleitung-vhs .img-container::before {
  background-color: var(--hofgut--grün-opacity);
}

body.lernfelder-kursleitung-vhs .nav-pills .nav-link.active i {
 color: var(--hofgut--grün-opacity);
}

/* ----- */

body.lernfelder-personliches-wirken::before,
body.lernfelder-personliches-wirken .img-container::before {
  background-color: var(--hofgut--blau-opacity);
}

body.lernfelder-personliches-wirken .nav-pills .nav-link.active i{
  color: var(--hofgut--blau-opacity);
}






h1, h2, h3, h4, h5 {
    font-family: "Futura-Bold", sans-serif;
}

/* Styles for sidebar */

#sidebar {
  text-align:center;
}


/* Styles for the page content */
#wrapper {
    flex:1;
}

.content {
  background-color:#f3f3f3;

}


.nav-pills .nav-link  {
  color: #828282;
	border-bottom:2px solid #AFAFAF;
	border-radius:0px;
}

.nav-pills.custom-numbered-list .nav-link {
border:none;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: transparent;
  background-image: none;
  color: #000;
			border-color:#000;
}


#pills-tab-1 ul {
list-style:none !important;
padding-left:0;
}

.step-text {
    margin-right:20px; /* Adjust the value as needed to create the desired space */
   
}

.col-1.location {
  max-width:30px;
}



#navbar {
  color:#fff;
}




#header.navbar {
  background-image: none; /* Initially no background image */
  background-position: bottom 50px right;
  background-repeat: no-repeat;
}

#header.navbar.show-bg {
  background-image: url(img/nav-bg.png); /* Show background image when class is added */
}

.navbar-toggler {
  margin-right:30px;
}

.navbar-collapse {
  padding-top:50px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}



/* Initial state: hidden */
/* Transition for fading in and out */








		body.ppwp-sitewide-protection {
   background-image: url("https://balie-lernen.de/wp-content/uploads/2023/10/login_bg.jpg") !important;

   background-size: cover;
   background-repeat: no-repeat;
}

.bg-dark {
  background-color: var(--hofgut--dunkelgrau)!important;
}

.bg-weiss, .kartei{
 z-index: 1;
 position: relative;
}

.bg-weiss{
margin-top:-15px;
padding-top:15px;
padding-left: 50px;
  padding-right: 50px;
}

.bg-weiss.slider{
text-align: center;
padding-top:50px;
padding-bottom:50px;
padding-left:10px;
padding-right:10px;
}

.kartei {
  width:fit-content;
  padding:7px;
  z-index:2;
  margin-left:20px;
}

.bg-weiss::before {
    content: '';
    position: absolute;
    top: 1%; /* Adjust these values as necessary */
    left: 1%;
    right: 1%;
    bottom: 1%;
    background: #fff; /* Your desired background color */
    transform: rotate(-1deg); /* Tilt angle */
    z-index: -1;
}


.kartei::before {
    content: '';
    position: absolute;
    top: 1%; /* Adjust these values as necessary */
    left: 1%;
    right: 1%;
    bottom: 1%;
   
    transform: rotate(-1deg); /* Tilt angle */
    z-index: -1;
}



.block {
  margin-bottom: 30px;
}

a {
	color:#000;
text-decoration:none;
}

p a, .content li a {border-bottom:solid #000 2px;}

.button-text {
    display: block; /* Display on a new line */
    margin-top: 5px; /* Adjust the top margin for spacing */
}



/* Lernfeld Startseite */

.number {
  color:#000 !important;
}

/* Carousel für Zitate */

/* Remove gradients and existing background images from carousel controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
}

/* Style for black square buttons */
.carousel-control-prev,
.carousel-control-next {
    background-color: black;
    width: 40px; /* Size of the box */
    height: 40px; /* Size of the box */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none; /* Optional: Removes border */
}

/* Use Bootstrap icons for arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background: none;
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    content: '';
    display: inline-block;
    background: none;
    color: white;
    font-size: 20px; /* Adjust size as needed */
}

/* Specific icons for Prev and Next */
.carousel-control-prev-icon::after {
    content: '\2039'; /* Bootstrap icon for previous */
}

.carousel-control-next-icon::after {
    content: '\203a'; /* Bootstrap icon for next */
}

.carousel-item {
  padding-left:50px;
  padding-right:50px;
}

.card {
  border:none !important;
}

/*  Grid Main */ 

.card.grid a {
  display:flex !important;
  width:100% !important;
  justify-content:center !important;
}

/* Nav Grid Main  */
.card-img, .card-img-top
{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.card-img-top
{
 width:auto !important;
}

header .card-img
{
max-height:80px !important;
}

.collapse.show .navbar-brand {
  display:none;
}

.nav-wrapper {
  height:calc(100vh - var(--wp-admin--admin-bar--height));
}




.right-aligned {
    margin-left: auto; /* Pushes this item to the right */
}


/* accordions */

.accordion-button:not(.collapsed)
{
  background-color: transparent;
}

/* custom numbered */


#myNavPills .nav-link .number {

    text-align: center; /* Center the number text */
    width: 35px; /* Set a fixed width for the square */
    height: 37px; /* Set the height to match the width, making it a square */
    display: flex; /* Use flexbox for centering the content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

#myNavPills .nav-link .title {
    background-color: white; /* White background for the title */
    flex-grow: 1; /* Ensure the title takes up remaining space */
}

ul.navigation-lernfelder {
  display: none !important;
}


/* nav items */
li.nav-item.lernfelder-header {
  text-align:center !important;
}

/*  Elternseite */

/* Footer */

footer#footer.bg-dark {
  padding-top:30px;
}

.col-md-12.widgets {
  display:flex !important;
  
}

footer * {
  color:#fff;
}

footer h3.widget-title {
  font-size: 1.2rem;
}

footer ul{
  list-style: none;
  padding-left:0;
}

#footer .menu-item a[aria-current="page"] {
  color: inherit;
}


.lernfeld-header-icon img {
  width:40px;
  height:auto;
}




.back-button {
    display: inline-block;
    background-color: black;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    position: relative;
   
}



.tab-navigation-lernfelder .nav-link i {
    display: block; /* Make the icon take the full width */
    margin-bottom: 5px; /* Space between the icon and text */
}

.tab-navigation-lernfelder .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content */
}

.tab-navigation-lernfelder .button-text {
    display: block; /* Ensure the text is on its own line */
}


/*Header*/

.btn-outline-secondary, .btn .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
}

.navbar-toggler {
  color:#fff;
  border-color:#fff;
}

img.header-image {
  margin-right:20px;
}


/*Kursplan*/

.orte .card {
  margin-bottom:20px;
}


  .navbar-collapse.show {
        height: 100vh; /* Set the height to 100% of the viewport */
        overflow-y: auto; /* Enable scrolling if content overflows */
    }
    
    
    
    .scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Webkit browsers */
}

.scroll-container {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.nav-item {
    display: inline-block;
    float: none; /* Override Bootstrap's default float */
}


.chevron {
  display:none;
}
    
    
    .kursplan-mobil {
      display-none;
    }