:root {
  /* --bs-body-font-family: 'Roboto', sans-serif;*/
  --bs-body-font-family: 'Roboto';
  --bs-body-font-size: 0.95rem;

  /* Der gewünschte Überhang */
  --offset-outer: 30px;
  /* Headbox */
  --ger-headbox1: 56.4%;
  --ger-headbox2: 43.6%;
  --divider-offset: 70px;

  /*Termin Button v1*/
  --ger-button-size: 44px; 
  --ger-button-font-size: 15px;
 
  /*neuer Termin Button v2*/
  --ger-online-button-size: 42px; 

  --ger-logo-width: 270px;
  --ger-logo-height: 73px;

  /* icons termine/kontakt/praxisteam*/
  --ger-icon-size: 46px;
  --toge-icon-color: #464646;


  /* custom_buttons ohne Icon */
--ger-custom-button-font-size:16px;
}

body {
  background-color: #ffffff !important;
  font-family: var(--bs-body-font-family);

}


.ger-link {
  
  color: inherit; 
  text-decoration: none;
  position: relative;
  padding-bottom: 1px;

}
.ger-link::after {
content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #212529 !important;
  transition: width .3s ease-in-out;
}


.ger-link:hover::after {
  width: 100%;
  /* Linie wächst auf volle Breite */
}


.iconsize {
  width: var(--ger-icon-size);
  height: var(--ger-icon-size);
}
.toge-icon-color {
  color: var(--toge-icon-color);
}


.navbar-nav {
  margin-top: 16px
}


h2 {
  font-weight: 700;
  margin-bottom: .75rem;
}

h3 {
  font-weight: 700;
  margin-bottom: .75rem;
}


h4 {
  font-family: 'Roboto';
  font-weight: 700;
  /* font-size: 1.25rem; */
  /*   font-size: 2em;*/
}



h5 {
  font-family: 'Roboto';
  font-weight: 700;
  /* font-size: 1.25rem; */
    font-size: 1.1rem;
  /*   font-size: 2em;*/
}

h6 {
  font-family: 'Roboto';
  font-weight: 700;
  /* font-size: 1.25rem; */
  /*   font-size: 2em;*/
}


.mt-4_5 {
  margin-top: 2.25rem !important;
}

.ger_p {
   hyphens: auto;
}

.ger_anf_txt{
  margin-top: -7px;
}

.ger_header {
  padding-right: 0px !important;
  padding-left: 0px !important;


  /* padding-right: 12px !important;
  padding-left: 12px !important; */
}

/* .ger_header_start{
  background-color: var(--blue);
  background: url('../imgs/bg_start_img.jpg') center/cover no-repeat;
  background-position-x: 35%;

} */







.ger_teaser {
  padding: 20px 20px 40px 20px; /*20px 20px 52px 20px*/
  /* padding: 20px; */
  background-color: hsl(0, 0%, 100%);
}

.ger_teaser_komb {
  padding: 20px 20px 20px 20px; /*20px 20px 52px 20px*/
  /* padding: 20px; */
  background-color: hsl(0, 0%, 100%);
}

/* --------------------------------- Bootstrap Container Anpassungen ---------------------------------------------------- */

/* 1. Small (sm): Ab 576px */
@media (min-width: 576px) {

  :root {
    --ger-logo-width: 300px;
  }

  .container,
  .container-sm {
    max-width: 500px;
    /* Standard: 540px */
  }



  h5 {
    font-size: 1.1rem;
  }


}

/* 2. Medium (md): Ab 768px -----------------------------------------------------------------------*/
@media (min-width: 768px) {

  :root {
    --bs-body-font-size: 0.9rem;
  }

  .container,
  .container-sm,
  .container-md {
    max-width: 700px;
    /* Standard: 720px */
  }





}

/* 3. Large (lg): Ab 992px -----------------------------------------------------------------------*/
@media (min-width: 992px) {

  :root {
    --bs-body-font-size: 0.9rem;
    --ger-button-size: 55px;
   
    --ger-button-font-size: 15px;
    /* --ger-online-button-size: 44px;  */
    --ger-headbox1: 49.4%;
    --ger-headbox2: 50.6%;
    --divider-offset: 86px;
    --ger-icon-size: 40px;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 850px;
    /* Standard: 960px */
  }


  h5 {
    font-size: 1.05rem;
  }


}

/* 4. Extra Large (xl): Ab 1200px -----------------------------------------------------------------------*/
@media (min-width: 1200px) {


  :root {
    --bs-body-font-size: 0.9rem;
    --header-scale: 0.9;
    --bs-nav-link-font-size: 1rem;
    --ger-button-size: 34px;
    --ger-button-font-size: 15px;
    --ger-headbox1: 52.4%;
    --ger-headbox2: 47.6%;
    --divider-offset: 76px;
    --ger-logo-width: 320px;

  }


  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 1000px;
    /* Standard: 1140px */
  }



  h5 {
    font-size: 1.1rem;
  }

  .navbar-nav {
    margin-top: 16px
  }
}

/* 5. Extra Extra Large (xxl): Ab 1400px -----------------------------------------------------------------------*/
@media (min-width: 1400px) {

  .container,
  .container-md,
  .container-lg {
    max-width: 1200px;
    /* max-width: 1180px; */
    /* Standard: 1320px */
  }

  h5 {
    font-size: 1.25rem;
  }

  :root {
    --bs-body-font-size: 1rem;
    --header-scale: 1;
    --bs-nav-link-font-size: 1.25rem;
    --ger-button-size: 44px;
    --ger-button-font-size: 17px;
    --ger-headbox1: 56.4%;
    --ger-headbox2: 43.6%;
    --divider-offset: 70px;
    --ger-logo-width: 368px;
    --ger-logo-height: 73px;
    --ger-icon-size: 42px;
    /* --ger-icon-size: var(--ger-icon-size); */
 
  }

  .text-2-sync {
    font-size: 0.9375rem;
  }

  .navbar-nav {
    margin-top: 18px
  }

  .ger_header {
    /* padding-right: 0px !important;
    padding-left: 0px !important; */

    /* padding-right: 12px !important;
    padding-left: 12px !important;*/
  }
}
/* ----------------------------------- -----------------------------------------------------------------------*/



.navbar-brand img {
  width: var(--ger-logo-width);
  height: var(--ger-logo-height);
}




/* DAS AUFGEPUMPTE BLAUE ELEMENT */
.ger_header_start {
  background-color: var(--blue);
  background: url('../imgs/bg_start_img_2.jpg') center/cover no-repeat;
  background-position-x: 35%;
  /* Schiebt die Box 30px links & rechts über den Container-Rand */
  margin-left: calc(var(--offset-outer) * -1);
  margin-right: calc(var(--offset-outer) * -1);
  /* Gleicht den negativen Margin innen wieder aus, damit der Inhalt 
               nicht über den Rand hinausragt */
  /* padding: 60px var(--offset-outer); */
  padding: 30px var(--offset-outer) 55px var(--offset-outer);
  min-height: 300px;
  /* border-radius: 4px; */
  /* Optional: leichte Rundung sieht oft edel aus */
}

/* DAS AUFGEPUMPTE BLAUE ELEMENT */
.ger_header_leistungen {
  background-color: var(--blue);
  background: url('../imgs/bg_leistungen.jpg') center/cover no-repeat;
  background-position: 35%  70%;
  /* Schiebt die Box 30px links & rechts über den Container-Rand */
  margin-left: calc(var(--offset-outer) * -1);
  margin-right: calc(var(--offset-outer) * -1);
  /* Gleicht den negativen Margin innen wieder aus, damit der Inhalt 
               nicht über den Rand hinausragt */
  /* padding: 60px var(--offset-outer); */
  padding: 30px var(--offset-outer) 55px var(--offset-outer);
  min-height: 300px;
  /* border-radius: 4px; */
  /* Optional: leichte Rundung sieht oft edel aus */
}


.ger_header_anfahrt {
  background-color: var(--blue);
  background: url('../imgs/bg_anfahrt.jpg') center/cover no-repeat;
  background-position: 35%  70%;
  /* Schiebt die Box 30px links & rechts über den Container-Rand */
  margin-left: calc(var(--offset-outer) * -1);
  margin-right: calc(var(--offset-outer) * -1);
  /* Gleicht den negativen Margin innen wieder aus, damit der Inhalt 
               nicht über den Rand hinausragt */
  /* padding: 60px var(--offset-outer); */
  padding: 30px var(--offset-outer) 55px var(--offset-outer);
  min-height: 300px;
  /* border-radius: 4px; */
  /* Optional: leichte Rundung sieht oft edel aus */
}















.ger_header {
  padding-right: 0px !important;
  padding-left: 0px !important;
  /* background-color: var(--blue);
  background: url('../imgs/bg_start_img.jpg') center/cover no-repeat;
  background-position-x: 35%; */

  /* padding-right: 12px !important;
  padding-left: 12px !important; */
}



.wrapper-green {
  background-color: #ffffff;

  padding: 10px;
  display: flex;
  gap: 1px;
}

.textbox-red {
  background-color: #fff;
  padding: 15px 20px 25px 25px;
  color: rgb(0, 0, 0);
  flex-grow: 1;
}



.text-1-wide {
  width: calc(var(--ger-headbox1) + var(--divider-offset));
}

.text-2-sync {
  width: calc(var(--ger-headbox2) - var(--divider-offset));

}


/* ----------------------------------------menu start------------------------------------- */

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  list-style: none;

  --bs-nav-link-color: #000;

}

.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.0rem;
  /* font-size: 20px; */

}


/* Styling für die Nav-Links */
.navbar-nav .nav-link {
  position: relative;
  /* Notwendig, damit die Linie am Link klebt */
  padding-bottom: 1px;
  /* Kleiner Abstand zur Linie */
  margin-left: 25px;
  /* Etwas Platz zwischen den Punkten */
}

/* Die versteckte Linie vorbereiten */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  /* Startbreite ist Null */
  height: 1px;
  background-color: #000000;
  /* Hier deine Wunschfarbe (z.B. Bootstrap Blue) */
  transition: width 0.3s ease-in-out;
  /* Hier passiert die Magie */
}

/* Animation beim Hover */
.navbar-nav .nav-link:hover::after {
  width: 100%;
  /* Linie wächst auf volle Breite */
}

/* Damit der aktive Punkt dauerhaft unterstrichen bleibt */
.navbar-nav .nav-link.active::after {
  width: 100%;
}



/* -------------------------------menu end----------------------------------------- */




/* Untere Sektion */




/* Responsive Fix */
@media (max-width: 992px) {

  /* Auf kleineren Bildschirmen nehmen wir den Überhang weg, 
               damit nichts aus dem Viewport ragt */
  .ger_header_start, .ger_header_leistungen, .ger_header_anfahrt{
    margin-left: 0;
    margin-right: 0;
    padding: 150px 15px 25px 15px;
  }

    .ger_header_leistungen {

  background: url('../imgs/bg_leistungen.jpg') center/cover no-repeat;
  background-position: 0% 100%;

  background-size:auto 104%;
}
    .ger_header_anfahrt {

  background: url('../imgs/bg_anfahrt.jpg') center/cover no-repeat;
  background-position: 0% 100%;

  background-size:auto 104%;
}



  .wrapper-green {
    flex-direction: column;
  }

  .text-1-wide,
  .text-2-sync {
    width: 100% !important;
  }
}


footer a:hover {
  color: #000 !important;
  /* Wird beim Hover schwarz */
  text-decoration: underline !important;
}


footer a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  /* Startbreite ist Null */
  height: 1px;
  background-color: #000000;
  /* Hier deine Wunschfarbe (z.B. Bootstrap Blue) */
  transition: width 0.3s ease-in-out;
  /* Hier passiert die Magie */
}

/* Animation beim Hover */
footer a:hover {
  width: 100%;
  /* Linie wächst auf volle Breite */
}



/*-------------------------------------------------------------------------------*/

.ger_list {
  line-height: 1.5rem;
}

.ger_table {
  font-size: 15px;
}

.ger_list-item{
  padding: 5px 0 5px 0;

}

.ger_list-item_n{
  padding: 2px 0 2px 0;

}



.custom-bullet {
    width: 7px; height: 7px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 8px;
}

/* Der bündige Inhalt unter dem Text */
.collapse-content-align {
    margin-left: calc(12px + 2rem); /* Bullet-Breite + Margin */
    color: black;
}

/* Das Badge als 'float-end' für die Einbettung in den Textfluss */
.toggle-badge {
    /* float: right; */
    margin-left: 10px;
    margin-top: 0px; /* Kleine Korrektur für die Zeilenhöhe */
    transform: translateY(-1px);
}

/* Fix für den Float-Container */
.text-wrapper::after {
    content: "";
    display: table;
    clear: both;
}