/*
Theme Name:     TT5-Child
Template:       twentytwentyfive
Version:        1.0
*/
@import url("jobmanager.css");
@import url("formulare.css");
@import url("menu.css");


/** weiches scrollen **/
html {
  scroll-behavior: smooth;
}

/* Menü bltzen verhindern Scrollbalken immer einblenden*/
html {
  overflow-y: scroll;
}


/* Titel nur auf statischen Seiten (Pages) im Frontend ausblenden */
body.page:not(.single):not(.blog):not(.category):not(.tag):not(.home):not(.wp-admin):not(.block-editor-page) .wp-block-post-title {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Buchstaben von Wörtern nicht trenne oder umbrechen*/
.nicht-trennen {
  word-break: keep-all;         /* keine Worttrennung */
  overflow-wrap: normal;        /* kein automatisches Umbrechen innerhalb eines Wortes */
}

body {
 /* word-break: keep-all;       /* Keine Trennung innerhalb von Wörtern */
  overflow-wrap: break-word;  /* Nur brechen, wenn es nötig ist */
  /*hyphens: auto;*/
}

/* Menü fixieren */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Stellt sicher, dass das Menü über anderen Elementen liegt */
    background-color: #007053; /* Falls du den Hintergrund des Menüs ändern möchtest */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: fügt einen Schatten hinzu */
}

/* Abstand oben für den restlichen Inhalt, damit er nicht vom Menü überlappt wird */
body {
  padding-top: 140px; /* Die Höhe des Menüs (kann je nach Theme angepasst werden) */
}

#R290-Formular, #Luft-Split-WP-Formular {
  scroll-margin-top: 140px;
}

.vcard-hidden {
  position: absolute;
  left: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* Fokusrahmen um Links ausblenden */
a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px solid #000; /* oder deine Wunschfarbe */
}

/* Spalten: Flex-Layout mit vertikalem Stretch */
.wp-block-column.is-vertically-aligned-stretch {
  display: flex;
  flex-direction: column;
}

/* Der Inhaltsteil innerhalb der Spalte soll sich dehnen */
.wp-block-group.link-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Der untere Button-Block soll ganz unten sitzen */
.wp-block-buttons.no_underline.underline {
  margin-top: auto !important;
}


/* Bild Zoom bei Mous Over +/
/* Rahmen nur fürs Bild */
.zoom-img {
  position: relative;
  overflow: hidden;    
}

/* Bild */
.zoom-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
  transform-origin: center center;
}


/* Wenn man über den äußeren Block fährt, zoomt das Bild */
.outer-block:hover .zoom-img img {
  transform: scale(1.1);
}


/* Button Link Standardzustand */
/* Unterstreichen des Button-Textes */
/* Hover: Hintergrund etwas dunkler */
.wp-block-button .wp-block-button__link:hover {
  text-decoration: underline !important;
  filter: brightness(110%);  /* macht den bestehenden Verlauf ~10% dunkler */
}

.no_underline a {
    text-decoration: none;
}

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




/** Bild überblenden für Hero Header
.fade img {
    animation: fadeinout 12s ease-in-out infinite;
    opacity: 0;
}
**/
/**
@keyframes fadeinout {
    0%     { opacity: 1; }
    41.66% { opacity: 1; }   /* 5s / 12s = 41.66% */
/*    50%    { opacity: 0; }   /* 6s / 12s = 50% */
 /*   91.66% { opacity: 0; }   /* 11s / 12s = 91.66% */
  /*  100%   { opacity: 1; }   /* 12s */
/*}
**/


/** Spalten Blöcke nicht unter xypx werden lassen**/
/* Mindestbreite für Spalten */
.custom-columns > .wp-block-column {
  min-width: 200px;
  flex: 1 1 200px;
}



/** Modal für Formular **/
#open-form-model img {
 display: block;;
  width: 100%;;
}

#open-form-modal {
  color: #fff;
  font-size: large;
  background-color: #BE1616 ;
  border-radius: 15px;
  border:none;
  padding: 15px 50px 15px 50px;
  width: 100%;
  cursor: pointer;
}

#open-form-modal:hover {
  text-decoration: underline;
}

.SHS-Logo-Modal-Formular img {
max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: none !important;
  opacity: 1 !important;
}

.SHS-Logo-Modal-Formular {
  color:#007053;
  padding: 15px;
}




/* Container clickbar machen */
.link-container {
  position: relative;
  overflow: hidden; /* wichtig, damit das Bild nicht „überläuft“ */
}

.full-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
}

.zoom-image {
  transition: transform 0.4s ease;
}

.link-container:hover .zoom-image {
  transform: scale(1.05);
  overflow: hidden; /* wichtig, damit das Bild nicht „überläuft“ */
}

/* Nur wenn figure die Klasse img-zoom hat */
figure.img-zoom {
  display: inline-block;           /* verhindert volle Breite */
  overflow: hidden;                /* Bild bleibt im Rahmen */
}

figure.img-zoom a img {
  transition: transform 0.4s ease; /* weicher Zoom */
  display: block;                  /* entfernt Lücken bei inline-Bildern */
}

/* Hover-Zustand – reagiert auf figure oder Link */
figure.img-zoom:hover a img {
  transform: scale(1.05);          /* Zoom-Effekt */
}


/* ------------------------------
   Fade für Hero Slider (Crossfade)
---------------------------------- */
/* Hero Fader 3 Slides*/
.slideshow-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: fadeCycle 21s linear infinite;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Startzeiten versetzen */
.slide1 { animation-delay: 0s; }
.slide2 { animation-delay: 7s; }
.slide3 { animation-delay: 14s; }

@keyframes fadeCycle {
  0%      { opacity: 0; visibility: hidden; pointer-events: none; }
  4.76%   { opacity: 1; visibility: visible; pointer-events: auto; }
  33.33%  { opacity: 1; visibility: visible; pointer-events: auto; }
  38.09%  { opacity: 0; visibility: hidden; pointer-events: none; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Hero Fader 4 Slides*/
.slideshow-container-4slides {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.slide-4slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: fadeCycle-4 48s linear infinite;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Startzeiten versetzen */
.slide1-of4 { animation-delay: 0s; }
.slide2-of4 { animation-delay: 12s; }
.slide3-of4 { animation-delay: 24s; }
.slide4-of4 { animation-delay: 36s; }

@keyframes fadeCycle-4 {
  0%      { opacity: 0; visibility: hidden; pointer-events: none; }
  4.76%   { opacity: 1; visibility: visible; pointer-events: auto; }
  33.33%  { opacity: 1; visibility: visible; pointer-events: auto; }
  38.09%  { opacity: 0; visibility: hidden; pointer-events: none; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}


/* Button für die Slideshow stoppen weiter Toogle */
#toggleSlideshow {
	color: #fff;
  background-color: #f2b400;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  border: 0 !important;
  border-radius: 10px;
  text-decoration: none;
  z-index: 10;
  position: absolute;
  bottom:10px;
}

#toggleSlideshow:hover {
	text-decoration: underline !important;
	filter: brightness(110%);  
}

#toggleSlideshow:active {
	border: 0 !important;
}

#toggleSlideshow:focus {
	outline: none;
}

/* benutzerdefinierte Klasse, um das Marker-Element (Haken) zu stylen */
.custom-list-zeichen li::marker {
   /* content: "\2713";   Unicode für Haken */
    color: #f2b400;    
    /* font-size: 1.2em;   Größe des Hakens */  
}

.custom-list-zeichen-kreis li::marker {
    content: "\2022";   /*Unicode für Kreis */
    color: #f2b400;    
    /* font-size: 1.2em;   Größe des Hakens */  
}

.custom-list-zeichen-farbe li::marker {
     color: #f2b400;    
    /* font-size: 1.2em;   Größe des Hakens */  
}


/* Runde Videorahmen */
.wp-block-video [poster] {
	border-radius: 10px;
}

.wp-block-video video {
	border-radius: 10px;
}