/*
Theme Name: Gymnasium St. Michael 2025
Author: Pixelstudios-Design.de | Maximilian Dittmann
Description: .

*/


* {
margin: 0;
padding: 0;

}

p {
margin-bottom: 1em;
}

html, body {
line-height: normal;
margin: 0 0 0 0;
scroll-behavior: smooth;
height: 100%;
font-size: 18px;
font-family: var(--schriftart-main);
background-color: var(--body-bgcolor);
}

.main {
  position: relative;
  height:auto !important; /* real browsers */
  height:100%; /* IE6: treaded as min-height*/
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  background-color: var(--main-bgcolor);
  color: var(--schriftfarbe-main);
}



.content-wrapper {
      background-color: var(--content-bgcolor);
        width: 100%;
        min-height: calc(100vh - 15em);
        padding-top: 5em;
      }

 .content-container {
        display: block;
        background-color: var(--content-bgcolor);
        background-color: var(--innercont-bgcolor);
        position: relative;
   
        overflow-x: hidden;
        padding-bottom: var(--foot-hoehe);
        font-size: var(--schriftgroesse-content);

        
text-align: left;
      }
      
      .content-container a {
        text-decoration: none;
        color: var(--link-farbe);
      }

.content-container h1 {

  text-align: center;
  font-size: 1.5em;
  margin: 0.67em 0;
  color: var(--hervorhebung-h1);

}



      .content-container h2 {
        text-align: center;
        color: var(--hervorhebung-h2);
        font-size: 1.3em;
        margin: 0.83em;
        margin-left: 0;

        scroll-margin-top: 4em; /
        }
      
      .content-container h3 {
 
        font-size: 1.17em;
        margin: 1em 0;
        color: var(--hervorhebung-h3);
            }


     .wp-block-list {
  list-style: disc;
  padding-left: 1.5em;
  margin-left: 0;
}

.wp-block-list li {
  margin-bottom: 0.5em; /* Optional, für bessere Lesbarkeit */
}

 .blocksatz {
 text-align: justify; 
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; 
 }

.content_block {
  padding: 10px;
}

.bild-links img {
  float: left;
  margin-right: 2em;
}

.bild-rechts img {
  float: right;
  margin-left: 2em;
}

.startseite-beitrag-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 auto;
  width: 100%;
}

.startseite-beitrag {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0px;
  color: var(--schriftart-main);
  box-sizing: border-box;
  border-radius: 0px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

    .startseite-beitrag h4 {
      margin: 5px;
      font-size: 1.5em;
      text-align: left;
    
     
      
    }
    .startseite-beitrag-titellink
    {
      color: var(--schriftfarbe-main)!important;
    }

   .startseite-beitrag article {
    flex-grow: 1;
   }
    

    .weiterlesen {
      display: block;
      width: 100%;
      background-color: var(--link-farbe);
      color: #ffffff!important;
      text-align: right;
      font-weight: bold;
      text-decoration: none;
      font-size: 1.2em;
      padding: 3px;
      margin-top: 20px;
      align-self: flex-end;
      border-bottom-right-radius:0px;
      border-bottom-left-radius: 0px;
    }
.startseite-beitrag-vorschaubild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.startseite-beitrag-vorschaubild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


    .startseite-beitrag-content {
      padding: 5px;
    }

    .startseite-begruessung {
      width: 80;
    }

.beitrags-bild-container {
  width: 100%;
  aspect-ratio: 4 / 3;    /* erzwingt Format */
  max-height: 70vh;        /*  Höhe begrenzen */
  overflow: hidden;        /* Bild zuschneiden */
  display: block;
}

.beitrags-bild-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* füllt den Container und schneidet überstehende Teile ab */
  object-position: center;  /* Fokus horizontal und vertikal auf die Mitte */
  display: block;
}
   

   

b {
  text-align: left; /* Sollte das Vererben von text-align verhindern */
}

.sl-overlay {
  background-color: rgba(255, 255, 255, 0.85)!important; /* Hintergrundfarbe ändern */
}

.fuss {
  background-color: var(--foot-bgcolor);
  overflow-x: hidden!important; 
  width: 100%;
  min-height: var(--foot-hoehe);
  position: relative;
  bottom: 0px;
  color: var(--schriftfarbe-foot);
}

.fuss-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* Abstand zwischen Boxen */
  padding: 16px;
}

.fuss-box {
  flex: 1 1 calc(100%); /* Standard: Jede Box nimmt die gesamte Breite */
  box-sizing: border-box;
  padding: 16px;
  color: var(--fussbox-schriftfarbe);
  display: flex; /* Flexbox für alle Boxen */
  flex-direction: column; /* Inhalte untereinander ausrichten */
  align-items: center; /* Inhalte horizontal zentrieren */
  justify-content: center; /* Inhalte vertikal zentrieren */
  text-align: center; /* Nur für Text ohne Flex-Eigenschaften */
}


.fuss-box a {
  text-decoration: none;
  color: var(--fussbox-schriftfarbe);
  margin-bottom: 1em;
}



.fuss-box img {
  max-width: 100%; /* Verhindert Überlauf in größeren Containern */
  height: auto; /* Beibehaltung der Proportionen */
  margin: 0; /* Entfernt unnötige Standardabstände */
  vertical-align: middle; /* Sorgt für optische Mitte */
}

.fuss-box .social_logo {
  max-width: 6em; /* Setzt eine klare maximale Breite */
  width: auto; /* Beibehaltung des Seitenverhältnisses */
  height: auto; /* Proportionen beibehalten */
}

.fuss-box .fuss_icon {
  display: inline;
  height: 1em;
  width: auto;
  margin-right: 0.25em;
}

.fuss-box:nth-child(3) .fuss_logo {
  width: 100%;
  max-width: 12em;
  height: auto;
}

scroller {
position: fixed;
bottom: 3em;
right: -100vh;
background-color: #ffffffcb;
width: auto;
padding: 0.4em;
height: 3.3em;
z-index: 998;
border-radius: 2em;
 transition: all 1s;
 -moz-transition: all 1s; /* Firefox 4 */
 -webkit-transition: all 1s; /* Safari and Chrome */
 -o-transition: all 1s; /* Opera */
}

scroller.sehen {
position: fixed;
bottom: 4em;
right: 4em;

 transition: all 1s;
 -moz-transition: all 1s; /* Firefox 4 */
 -webkit-transition: all 1s; /* Safari and Chrome */
 -o-transition: all 1s; /* Opera */
}

.hoch-icon {
  height: 2.5em;
  width: auto;
}

#ontop {
  position: fixed;
  right: 10px;
  bottom: 100px;
  
   transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari and Chrome */
    -o-transition: all 1s; /* Opera */
  }




.desktop_navi {
 position: static;
 height: 20em;
}

/* Textumfluss fuer  Bilder */
.alignleft {
  float: left;
  margin: 0 1em 1em 0;
  display: inline;
}

.alignright {
  float: right;
  margin: 0 0 1em 1em;
  display: inline;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignnone {
  float: none;
}



.clear {
clear: both;
}

.head_logo_wrapper {
  padding: 0;
}

.head_logo {
height: 100%;
width: auto;

         }


.beitrag_datum {
  text-align: right;
  color: var(--michael-dgrau);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


.eigene_buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--michael-brom1);
  color: #ffffff!important;
  padding: 0 1em;       /* horizontales Padding, Höhe kommt über height */
  border-radius: 0.3em;
  text-align: center;
  height: 2.5em;        /* alle Buttons gleich hoch, relativ zur Schriftgröße */
  line-height: 1;       /* wichtig, damit die Höhe nur von height bestimmt wird */
}

/* Aktuelles Seitenzahlen */
.pagination-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  margin-top: .5rem;
}

.pager_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  min-width: 2.2em;
  padding: 0 .8em;
  border-radius: .35em;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  background: var(--michael-brom1);
  color: #ffffff!important; /* Pfeile weiß */
  border: none;
  transition: transform .08s ease, opacity .12s ease;
}

.pager_btn a {

color: #ffffff!important; /* Pfeile weiß */
}

/* Aktuelle Seite */
.pager_btn--current {
  background: transparent;
  color: var(--michael-brom1)!important;
  pointer-events: none;
  border: none;
}

/* Hover nur bei klickbaren Buttons */
.pager_btn:not(.pager_btn--current):hover {
  transform: translateY(-1px);
}

/* Disabled Buttons */
.pager_btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.seitensteuerung_titel {
  width: 100%;
  text-align: center;
  color: var(--michael-brom1);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 1em;
}

#filter-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
.filter-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.filter-group select {
  width: 100%;
  background-color: var(--michael-brom1);
  color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  border: none;
  font-size: 1em;
}

.filter-group select:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

.startseite-beitrag-datum {
  display: block;
  width: 98%;
  text-align: right;
  font-size: 0.8em;
  color: var(--michael-dgrau);

}

.single_weisser-block {
box-shadow: 0 15px 25px 0 rgba(0,0,0,.1);
  padding: 0.5em;
  margin-top: 2em;
  margin-bottom: 2em;
  background-color: var(--wp--preset--color--primary, #ffffff);
}

 .news-on-homepage {
            border: 3px solid var(--michael-brom1);
            padding: 15px;
            background-color: #ffffff;
            margin: 0px;
            margin-bottom: 2em;
        }

        a[href$=".pdf"]::after {
  content: "(PDF)";
  margin-left: 0.1em;
}

       a[href$=".docx"]::after {
  content: "(Word)";
  margin-left: 0.1em;
}

      a[href$=".doc"]::after {
  content: "(Word)";
  margin-left: 0.1em;
}