@font-face {
    font-family: 'notosans_bold';
    src: url('../fonts/NotoSans-Bold.woff') format('woff');
}

@font-face {
    font-family: 'notosans_medium';
    src: url('../fonts/NotoSans-Medium.woff') format('woff');
}

@font-face {
    font-family: 'notosans_light';
    src: url('../fonts/NotoSans-Light.woff') format('woff');
}

body, html {
    font-family: 'notosans_light', sans-serif;
    font-size: 18px;
    color: black;
    background-color: white;
}

.header {
    font-family: 'notosans_medium', sans-serif;
}

.header_bold {
    font-family: 'notosans_bold', sans-serif;
}

/*** Styles Start ***/

.btn-link:hover {
    color: white;
}

.pt_big {
    padding-top: 6.5rem !important;
}

.pb_big {
    padding-bottom: 6.5rem !important;
}

.card_pl {
    padding-left: 0px;
}

.card_pr {
    padding-right: 0px;
}

.myheader {
    font-size: 3rem;
}

.mygrey {
    color: #020202;
}

#mynavbar {
    max-height: 120px;
}

.stern_text {
    font-size: 0.75rem;
}

.mycenter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.mycenter2 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    text-align: center;
}


.width_icons {
    width: 45px;
}

.btn_hover:hover {
    color: black;
}

.btn_hover2 {
    color: black;
}
.btn_hover2:hover {
    color: #CB0C33 !important;
}

.custom_logo {
    max-width: 250px;
    max-height: 150px;
}


.custom_logo_map {
    max-width: 280px;
    max-height: 170px;
}


th {
    width: 90px;
}

.link_color {
    color: black;
}

.link_color:hover {
    color: #CB0C33;
}


.pt_contact {
    padding-top: 1.65rem;
}

.txt_black {
    color: black;
}



/**** BUTTON 1 ****/ 
.btn_black {
    background-color: black;
    border-radius: 4px;
    color: white;
}

.btn_black:hover {
    background-color: transparent;
    border-radius: 4px;
    color: #CB0C33;
    border: #CB0C33 solid 1px;
}
/**** BUTTON 1 ****/ 





/*** Hero Start ***/
.hero {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero_img {
    width: 100%;
}



/*** Section2 ***/
.bg_section1 {
position: relative;
min-height: 600px;
overflow: hidden;
  background: url(https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}

.text-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 0px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  color: #000;
  text-align: right;
 min-height: 320px;   /* alle Boxen mind. gleich hoch */
}


.text-box2 {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 0px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  color: #000;
  text-align: left;
    min-height: 320px;   /* alle Boxen mind. gleich hoch */
}


/*** Section3 ***/




/*** Section3 ***/
.bg_section2 {
  background-color: #000; /* Schwarzer Hintergrund */
  color: #fff;            /* Weißer Text */
}

.bg_section2 h2 {
  color: #fff;            /* Überschrift weiß */
}

.btn_cta {
  background-color: #d90f3a; /* Dein Rot (#d90f3a aus Screenshot) */
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 4px;
}

.btn_cta:hover {
  background-color: #b00c2f; /* dunkleres Rot beim Hover */
}



.textpart_section2 {
    text-align: right;
}



/*** Section4 – Crossfade ohne Weiß ***/
.bg_section3 {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

.bg_section3::before,
.bg_section3::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: opacity;
  backface-visibility: hidden;
}

.bg_section3::before {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv3.jpg");
  animation: fadeA 16s infinite ease-in-out;
}

.bg_section3::after {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv4.jpg");
  animation: fadeB 16s infinite ease-in-out;
}

/* Rechte Textbox & Inhalt bleibt wie gehabt */
.overlay { position: relative; z-index: 1; }
.text-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 0px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  color: #000;
}

/*** Keyframes: gegenphasig, mit Haltezeit ***/
@keyframes fadeA {
  0%, 40%   { opacity: 1; }   /* Motiv A steht */
  50%, 90%  { opacity: 0; }   /* A ausgeblendet, B steht */
  100%      { opacity: 1; }   /* Loop zurück zu A sichtbar */
}

@keyframes fadeB {
  0%, 40%   { opacity: 0; }   /* B versteckt, A steht */
  50%, 90%  { opacity: 1; }   /* B steht */
  100%      { opacity: 0; }   /* Loop zurück zu B versteckt */
}

/* Optional: Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce) {
  .bg_section3::before,
  .bg_section3::after { animation: none; opacity: 1; }
}






/*** Section5 ***/
.bg_section3_5 {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

.bg_section3_5::before,
.bg_section3_5::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: opacity;
  backface-visibility: hidden;
}

.bg_section3_5::before {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv11.jpg");
  animation: fadeA 16s infinite ease-in-out;
}

.bg_section3_5::after {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv12.jpg");
  animation: fadeB 16s infinite ease-in-out;
}


.bg_section4 {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

.bg_section4::before,
.bg_section4::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: opacity;
  backface-visibility: hidden;
}

.bg_section4::before {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv5.jpg");
  animation: fadeA 16s infinite ease-in-out;
}

.bg_section4::after {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv6.jpg");
  animation: fadeB 16s infinite ease-in-out;
}

.overlay {
  position: relative;
  z-index: 1;
}

.text-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 0px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  color: #000;
}

/* Keyframes wiederverwenden */
@keyframes fadeA {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes fadeB {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg_section4::before,
  .bg_section4::after { animation: none; opacity: 1; }
}





.section-divider {
  background-color: #fff;  /* Weißer Balken */
  height: 40px;            /* Höhe anpassbar */
  width: 100%;             /* volle Breite */
}










/*** Section6 – Crossfade ohne Weiß ***/
.bg_section5 {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

.bg_section5::before,
.bg_section5::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: opacity;
  backface-visibility: hidden;
}

.bg_section5::before {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv7.jpg");
  animation: fadeA 16s infinite ease-in-out;
}

.bg_section5::after {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv8.jpg");
  animation: fadeB 16s infinite ease-in-out;
}

/* Rechte Textbox & Inhalt bleibt wie gehabt */
.overlay { position: relative; z-index: 1; }
.text-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 0px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  color: #000;
}

/*** Keyframes: gegenphasig, mit Haltezeit ***/
@keyframes fadeA {
  0%, 40%   { opacity: 1; }   /* Motiv A steht */
  50%, 90%  { opacity: 0; }   /* A ausgeblendet, B steht */
  100%      { opacity: 1; }   /* Loop zurück zu A sichtbar */
}

@keyframes fadeB {
  0%, 40%   { opacity: 0; }   /* B versteckt, A steht */
  50%, 90%  { opacity: 1; }   /* B steht */
  100%      { opacity: 0; }   /* Loop zurück zu B versteckt */
}

/* Optional: Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce) {
  .bg_section5::before,
  .bg_section5::after { animation: none; opacity: 1; }
}






/*** Section7 ***/
.bg_section6 {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

.bg_section6::before,
.bg_section6::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: opacity;
  backface-visibility: hidden;
}

.bg_section6::before {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv9.jpg");
  animation: fadeA 16s infinite ease-in-out;
}

.bg_section6::after {
  background-image: url("https://lp.axregio.de/01_assets/kunden/citizenhome/x01_SEA/motiv10.jpg");
  animation: fadeB 16s infinite ease-in-out;
}

.overlay {
  position: relative;
  z-index: 1;
}

.text-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 0px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  color: #000;
}

/* Keyframes wiederverwenden */
@keyframes fadeA {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes fadeB {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg_section6::before,
  .bg_section6::after { animation: none; opacity: 1; }
}






/*** Section7 ***/
.bg_section7 {
  background-color: #fff; /* Weißer Hintergrund */
  color: #000;           /* Schwarzer Text */
}

.bg_section7 h2 {
  font-weight: 700;
  color: #000;
}

.bg_section7 p {
  max-width: 800px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}

/* Button-Style global für Wiederverwendung */
.btn_cta2 {
  background-color: #d90f3a;
  border: none;
  padding: 0.9rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 4px;

text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 1px;  /* ggf. 3px */
  text-underline-offset: 3px;      /* Abstand zur Schrift */
}

.btn_cta2:hover {
  background-color: #b00c2f;
}






/** Animationen der Slides **/
/* Standard: pausiert */
.bg-fade::before,
.bg-fade::after {
  animation-play-state: paused;
}

/* Aktiv, wenn im Viewport */
.bg-fade.animate-background::before,
.bg-fade.animate-background::after {
  animation-play-state: running;
}







/*** Section8 – Logo-Block ***/
.bg_section8 {
  background-color: #fff; /* Weißer Hintergrund */
}

.logo-img {
  max-width: 220px;   /* Logo nicht zu groß */
  height: auto;
}







/*** Section3 ***/
.apps_hover {
    transition: 0.1s ease-out;
}

.apps_hover:hover {
    transform: scale(1.05);
}






.negative_mobile_margin{
    margin-bottom: 0px;
}

/*** Map Area Start ***/
.map_icon_size{
    width: 30px !important;
    margin-left: 15px;
}

.logo_mobile_margin{
    margin-bottom: 0px;
}
/*** Map Area End ***/





/*** Media Queries ***/


@media only screen and (max-width: 1600px) {
.formular_margin {
    margin-top: 0px;
}

.hero {
    height: 50vh;
}

} 


@media only screen and (max-width: 1400px) {
.formular_margin {
    margin-top: 0px;
}

.hero {
    height: 40vh;
}

} 

@media only screen and (max-width: 1200px) {
} 

@media only screen and (max-width: 1199px) {

}


@media only screen and (max-width: 992px) {
    .custom_logo_map {
        max-width: 220px;
        max-height: 150px;
    }

    .mymt2 {
        margin-top: 60px; 
    }

    .mycenter2 {
        align-items: center;
    }


.hero {
    height: 30vh;
}

.textpart_section2 {
    text-align: left !important;
}


}

@media only screen and (max-width: 920px) {

}

@media only screen and (max-width: 806px) {

}

@media only screen and (max-width: 792px) {

}

@media only screen and (max-width: 768px) {
    .mymt {
        margin-top: 30px;
    }

    .custom_logo_map {
        max-width: 280px;
        max-height: 170px;
    }

    th {
        width: 70px;
    }

    .card_pl {
        padding-right: 0px;
    }
    
    .card_pr {
        padding-left: 0px;
    }

    .logo_mobile_margin{
        margin-bottom: 50px;
    }

    .negative_mobile_margin{
        margin-bottom: -40px;
    }
}

@media only screen and (max-width: 667px) {

}

@media only screen and (max-width: 576px) {

    .col-lg-4.mycenter {
        display: block;
    }

    .col-lg-6.mycenter {
        display: block;
    }

    .mycenter2 {
        display: block;
    }

    .cta_center {
        text-align: center;
    }

    .hero_img {
        width: 100%;
    }
}

@media only screen and (max-width: 491px) {

}


@media only screen and (max-width: 470px) {

    .pt_big {
        padding-top: 3rem !important;
    }

    .pb_big {
        padding-bottom: 3rem !important;
    }
}
@media only screen and (max-width: 420px) {

}

@media only screen and (max-width: 375px) {

}

@media only screen and (max-width: 320px) {

}