/*
 Theme Name:   FM-Hannover
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     generatepress
 Version:      0.1
*/

/* THEME TWEAKS  */

/* Header padding with responsive clamp */
.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* Typography wrapping */
/* Balance headings and elements with `.balance` class */
:is(h1, h2, h3, h4, h5, h6),
.balance {
    text-wrap: balance;
}

/* Use pretty wrapping for body text elements */
p,
blockquote,
li {
    text-wrap: pretty;
}

/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
    margin-bottom: 0px;
}

/* UTILITIES */

/* Line Clamping */
.line-limit-3,
.line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}

/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Smooth Transition Utility */
.transition {
    transition: all 0.25s ease-in-out;
}


/*  GP MENU ACCESSIBILITY TWEAKS */

#site-navigation ul.sub-menu {
    display: block;
}

#site-navigation li:hover .gp-icon svg {
    transform: rotate(180deg);
}

#site-navigation li:hover .sub-menu {
    visibility: visible;
}
/* 
  Image wie Hintergrundbild nutzen SEO und Barriere konform
   https://www.youtube.com/watch?v=75maot9Hnvc
*/
.image-background {
 position: relative;
 isolation: isolate;

  & img:first-of-type{
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
 }
}
/* 
   STRETCH LINK (from Bootstrap)
   Source: https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l
   Note: Only use ONE link per card or this breaks!
*/

.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.stretch-link  a:is(:focus-visible)::after {
    outline: 2px solid;
}

.stretch-link  a:is(:hover, :focus) {
    outline: none;
}

/*  CONTAINER WRAPPER */

.site-wrapper {
    width: 100%;
    max-width: 1620px;
    margin-inline: auto;
}

/*  TYPOGRAPHY  */
/* Font Family Utilities */
.ff-body {
    font-family: var(--gp-font--body);
}

.ff-heading {
    font-family: var(--gp-font--headings);
}

/* Heading and utility class font assignment */
h1, h2, h3, h4, h5, h6,
[class^="fs-"] {
    font-family: var(--gp-font--headings);
}

.fs-p {
    font-family: var(--gp-font--body);
}
:root {
  --fluid-body-font-min: 1rem;
  --fluid-body-font-max: 1.125rem;
  --fluid-body-font: clamp(var(--fluid-body-font-min), 0.97rem + 0.129vw, var(--fluid-body-font-max));

  --h1-min-font: 1.536rem;
  --h1-max-font: 5rem;
  --fluid-h1-font: 2000px;

  --h2-min-font: 1.375rem;
  --h2-max-font: 3.438rem;
  --fluid-h2-font: clamp(2rem, 1.8364rem + 0.7273vw, 3rem); /* 32px 48px */

  --fluid-h3-font: clamp(1.875rem, 1.7308rem + 0.641vw, 2.5rem);
}

.body {
  font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem);
}

h1, .fs-h1 {
    font-size: clamp(2.5rem, 2.4182rem + 0.3636vw, 3rem); /* 32px 48px */
}

h2, .fs-h2 {
    font-size: var(--fluid-h2-font);
}
h4 {
  font-size: clamp(2.375rem, 2.2727rem + 0.4545vw, 3rem) ;
}
h2.head_2 {
  position: relative;
  
}
h2.head_2::before, h2.head_2_center::before {
  content: "";
  position: absolute;
  /* left: -16px;
  transform: translateY(-53%);*/
  width: 68px;
  height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='22' viewBox='-415.042 325.958 68 22' xml:space='preserve'><path fill='none' stroke='%23E30812' stroke-width='3' d='M-412.042 347.958v-19h65'/></svg>") no-repeat center;
  background-size: contain;
  margin-right: 8px; /* Abstand zur Headline */
  vertical-align: middle;
  
}
h2.head_2::before {
    transform: translate(-16px, -13px);
}
h2.head_2_center::before {
    transform: translate(-16px, -13px);
}
/* mobile */
@media (max-width: 768px) {
  h2.head_2::before, h2.head_2_center::before {
    content: "";
    position: absolute;
    /* left: -16px;
    transform: translateY(-53%);*/
    width: 50px;
    height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='18' viewBox='-415.042 325.958 68 22' xml:space='preserve'><path fill='none' stroke='%23E30812' stroke-width='3' d='M-412.042 347.958v-19h65'/></svg>") no-repeat center;
    background-size: contain;
    margin-right: 5px; /* Abstand zur Headline */
    vertical-align: middle;
    
  }
  h2.head_2::before {
      transform: translate(-10px, -9px);
  }
  h2.head_2_center::before {
      transform: translate(-10px, -9px);
  }
}


h3, .fs-h3 {
    font-size: var(--fluid-h3-font);
}

p, .fs-p {
    font-size: var(--fluid-body-font);
}

/* Navigation */

#menu-hauptmenue li:hover a::before {
  background: #0076bd;
  text-decoration: none;
  opacity: 1;
}
#menu-hauptmenue li a::before {
  content: "";
  height: 5px;
  background: transparent;
  z-index: 9;
  overflow: auto;
  visibility: unset;
  top: -40px;
  position: relative;
  width: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#menu-hauptmenue li.current-menu-item a::before {
  background: #0076bd;
  opacity: 1;
}
/* Swiper Slider "Ueber uns" */
.swiper-navigation {
  display: flex!important;
  justify-content: flex-end!important;
  gap: 10px; /* Abstand zwischen den Buttons */
  margin-top: 15px; /* Abstand zum Slider */
}

/* Buttons anpassen */
.mySwiperAbout {
    padding-bottom: 50px !important;
}
.swiper-button-prev,
.swiper-button-next {
  position: static !important;/* Positionierung zurücksetzen */
  width: 47px !important;
  height: 47px !important;
  color: #000; /* oder deine Wunschfarbe */
  cursor: pointer;
}

/* Optional: Icons anpassen (z.B. größer machen) */
/* Grundsätzlich die Swiper-eigenen Einstellungen überschreiben */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "" !important;
  font-family: none !important; /* swiper-icons deaktivieren */
  font-size: 0 !important; /* verhindert evtl. Überlagerungen */
  line-height: 0;
  text-transform: none;
  letter-spacing: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 47px !important;
  height: 47px !important;
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Linker Pfeil (dein SVG) */
.swiper-button-prev::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='47px' height='47px' viewBox='-6.5 5.5 47 47' xml:space='preserve'><g transform='translate(17.838 14.75) rotate(180)'><line fill='none' stroke='%23000' stroke-width='2' x1='-7.375' y1='-14.25' x2='9.049' y2='-14.25'/><path fill='none' stroke='%23000' stroke-width='2' d='M2.028-21.271L9.05-14.25L2.028-7.229'/></g><circle fill='none' stroke='%23000' stroke-width='2' cx='17' cy='29' r='22.5'/></svg>");
}

/* Rechter Pfeil (dein SVG) */
.swiper-button-next::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='47px' height='47px' viewBox='-6.5 5.5 47 47' xml:space='preserve'><g transform='translate(17.838 14.75) rotate(180)'><line fill='none' stroke='%23000' stroke-width='2' x1='9.05' y1='-14.25' x2='-7.374' y2='-14.25'/><path fill='none' stroke='%23000' stroke-width='2' d='M-0.352-7.229l-7.022-7.021l7.022-7.021'/></g><circle fill='none' stroke='%23000' stroke-width='2' cx='17' cy='29' r='22.5'/></svg>");
}

/* Optional: Layout (nebeneinander unter dem Slider) */
.swiper-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  opacity: 0.6;
}
.swiper-pagination {
  position: relative !important;
  padding-top: 30px;
}
.swiper-pagination-bullet {
  background: #fff !important;
  border: 1px solid #000;
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: #000 !important;
}
/* Swiper Problem wenn er in einem Container mit display:grid steckt: https://stackoverflow.com/questions/61373563/swiper-nested-inside-displaygrid-css Lösung: min-width: 0v*/



/* clear fix */
.grid:after, .grid-2:after {
  content: '';
  display: block;
  clear: both;
}


/* Teaser Leistungen */
.teaser_leistungen {
  align-items: flex-end;
  background-blend-mode: normal;
  background-image: linear-gradient(0deg,var(--global-color-7) 0%,rgba(53,69,94,0) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.teaser_start_textcont {
  width: 100%;
  padding: 0 2rem 20px; /* 20px padding-bottom für die Positionierung */
  position: relative;
  z-index: 2;
  box-sizing: border-box; /* Damit Padding in die Breite einberechnet wird */
}

.teaser_start_head {
  margin-bottom: 15px; /* Abstand zur darunter erscheinenden Liste */
  will-change: transform;
  display: block;
  position: relative;
}

.teaser_fade_up {
  will-change: transform, opacity;
  position: absolute; /* Absolute Positionierung unter der Headline */
  bottom: 100%; /* Direkt unter der Headline starten */
  
  width: 100%;
  opacity: 0;
  transform: translateY(30px); /* Startposition unterhalb */
  pointer-events: none; /* Anfangs keine Interaktion */
}

.teaser_fade_up p {
  margin: 8px 0;
}

.teaser_fade_up a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}








/* Accordion-Inhalt überlagert den restlichen Content */
.gb-accordion__item {
  position: relative; 
  z-index: 10;
}

.akko_content {
  position: absolute;
  top: 100%; 
  left: 0;
  width: 100%;
  background: #fff; 
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.15); 
  z-index: 999; 
}

/* Übergang für ein sanftes Ein- und Ausklappen */
.akko_content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Wenn geöffnet */
.gb-accordion__item.gb-accordion__item-open .akko_content {
  max-height: 500px; 
  opacity: 1;
  overflow: visible;
}
.akko_content_text {
  margin-top: 0em !important;
}
.akko_content_text p {
  cursor: pointer;
}



/* Kontaktformular */


@media all and (min-width: 650px) {
  .form-row {
    display: flex;
  }
}
.form-col {
  flex: 1;
  margin-bottom: 1rem;
}
@media all and (min-width: 650px) {
  .form-col:first-of-type {
    margin-right: 0.55rem;
  }
}
.form-textarea {
  margin-right: 0 !important ;
}
.form-textarea textarea,
.form-col input,
.form-col select {
  width: 100%;
  background-color: white !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-color: #c1bdbb !important;
}
select {
  padding: 12px 14px !important;
}
.flex-container.checkboxes {
  margin-bottom: 1rem;
}
.flex-container.checkboxes a {
  color: #212529 !important;
  text-decoration: underline;
}
.wpcf7-list-item {
	display: inline-block;
	margin: 0 !important; 
}
/* Kontaktformular Ende */