*{margin: 0; padding: 0;}

/*///////////Schriften/////////////*/
/* poppins-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2');
}

/* poppins-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-italic.woff2') format('woff2');
}

/* poppins-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2');
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500italic.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600italic.woff2') format('woff2');
}

/* poppins-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2');
}

/* poppins-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800.woff2') format('woff2');
}


/*////// Display ////////*/

/* dm-serif-display-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-serif-display-v17-latin-regular.woff2') format('woff2');
}

/* dm-serif-display-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/dm-serif-display-v17-latin-italic.woff2') format('woff2');
}


/*///////////Farben/////////////*/

:root {
  /* BLUE */
  --color-blue: #203E58;

  /* GREEN */
  --color-green: #9DBC35;

  /* DARK GREY */
  --color-dark-grey: #4C4C4C;

  /* LIGHT GREY */
  --color-light-grey: #F5F7F9;
}

/* Text Colors */
.text-blue { color: var(--color-blue); }
.text-green { color: var(--color-green); }
.text-dark-grey { color: var(--color-dark-grey); }
.text-light-grey { color: var(--color-light-grey); }

/* Background Colors */
.bg-blue { background-color: var(--color-blue); }
.bg-green { background-color: var(--color-green); }
.bg-dark-grey { background-color: var(--color-dark-grey); }
.bg-light-grey { background-color: var(--color-light-grey); }

/* Hover Effects */
.bg-blue-hover:hover { background-color: var(--color-blue); }
.bg-green-hover:hover { background-color: var(--color-green); }
.bg-dark-grey-hover:hover { background-color: var(--color-dark-grey); }
.bg-light-grey-hover:hover { background-color: var(--color-light-grey); }

.text-blue-hover:hover { color: var(--color-blue); }
.text-green-hover:hover { color: var(--color-green); }
.text-dark-grey-hover:hover { color: var(--color-dark-grey); }
.text-light-grey-hover:hover { color: var(--color-light-grey); }

/* Border Colors */
.border-blue { border-color: var(--color-blue); }
.border-green { border-color: var(--color-green); }
.border-dark-grey { border-color: var(--color-dark-grey); }
.border-light-grey { border-color: var(--color-light-grey); }



/*///////////Überschrift/////////////*/


h1{
   font-size: 58px;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;
   color: white;
   margin:0!important;
}

.highlight-h1{
   font-size: 72px;
   font-family: 'DM Serif Display';
   font-style: italic;
   font-weight: 400;
   color: var(--color-green); 
   margin:0!important;
}


h2{
   font-size: 40px;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   color: var(--color-blue); 
   margin:0!important;
}

.highlight-h2{
   font-size: 50px;
   font-family: 'DM Serif Display';
   font-style: italic;
   font-weight: 400;
   color: var(--color-green); 
   margin:0!important;
}
h3{
   font-size: 32px;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   color: var(--color-blue); 
   margin:0!important;
   line-height: 1.4;
}

h4{
   font-size: 18px;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;
   margin:0!important;
   line-height: 1.4;
}

h5{
   font-size: 18px;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   margin:0!important;
   line-height: 1.4;
   color: var(--color-green); 
}


p{
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey);  
}

strong {font-weight: 600 !important;}

.zitat{
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: italic;
  color: var(--color-blue);
  text-align: right; 
  
}


/*//////////////////Buttons////////////////////////////*/

.btn-primary-blue{
  background-color: var(--color-blue);
  color: white;
  border:solid 2px;
  border-color:var(--color-blue);
  font-family: Poppins;
  font-weight: 500;
  font-size: 1rem;
  padding:10px 20px;
  border-radius:0;
}

.btn-primary-blue:hover{
  color: var(--color-blue);
  background-color: none;
  border-color: var(--color-blue);

}
.btn-primary-green{
  background-color: var(--color-green);
  color: var(--color-blue);
  border:none;
  font-family: Poppins;
  font-weight: 500;
  font-size: 1rem;
  padding:10px 20px;
  border-radius:0;
}

.btn-primary-green:hover{
  color: var(--color-blue);
  border-color: var(--color-blue); 
  background-color:white;
 
}


.btn-secondary-green{
  color: var(--color-blue);
  background-color: white; 
  font-family: Poppins;
  font-weight: 500;
  font-size: 1rem;
  padding:10px 20px; 
  border-radius:0;  
  border: solid 2px #9DBC35;
}

.btn-secondary-green:hover{
  color: var(--color-blue);
  background-color: var(--color-green); 
  border-color:none;  
}

.btn-secondary-white{
  color: white;
  background-color: none; 
  font-family: Poppins;
  font-weight: 500;
  font-size: 1rem;
  padding:10px 20px; 
  border-radius:0;  
  border: solid 2px white;
}
.btn-secondary-white:hover{
  color: var(--color-blue);
  background-color: white; 
 
  border: solid 2px white;
}

/*//////////////////Layout///////////////////////////////*/

  @media (min-width : 2000px) {
  .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .einleitung, {max-width : 1700px!important;
}
  }@media (min-width : 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width : 1500px;
}
  }@media (max-width: 991px) and (min-width : 768px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width : 908px;
}
}

/*//////////////////Navbar///////////////////////////////*/

.nav-link{
	font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-dark-grey);  
}

.nav-link:hover{
	color:var(--color-green);
}
.fa-solid{
	font-size:21px;
}
 .fa-solid :hover{
	color: var(--color-blue);
}

.nav-item {
align-items: center;
display:flex;
}

.logo-nav{
	width:200px;
	height:auto;
}

.navbar .fa-solid:hover{
  color: var(--color-blue);
}
.navbar .fa-solid{
  font-size:30px;
}

.navbar{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.nav-link:focus{
  color:var(--color-green);
}

/* Farbvariablen – passe diese an deine echten Hex-Codes an */
:root {
    --text-green: #7fa43b;      /* Das Hans Sachs Grün */
    --primary-blue: #1c3d5a;    /* Das dunkle Blau der Buttons */
    --bg-light-gray: #f8f9fa;
}

/* Navbar Anpassungen */
.custom-navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}



/* --- ZUSATZ FÜR HOVER & MEGA-MENU LOGIK --- */
@media (min-width: 768px) {
    /* Zeigt das Mega-Menü flüssig beim Hovern an */
    .custom-dropdown:hover .mega-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Grundkonfiguration des Overlays über die volle Breite */
    .mega-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.25s ease;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffffff;
        box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
        border-top: 3px solid var(--text-green) !important; /* Grüner Akzentbalken oben */
        z-index: 1000;
        border-radius:0px;
    }
    
    /* Der kleine, dezente CSS-Pfeil über dem aktiven Menüpunkt */
    .custom-dropdown:hover > .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 8px 8px 8px;
        border-style: solid;
        border-color: transparent transparent var(--text-green) transparent;
    }
}

/* Karten-Styling innerhalb des Mega-Menüs */
.mega-menu .card-img-top, 
.mega-menu .card-img-bottom {
    height: 150px;
    object-fit: cover;
}

.mega-menu a{
    font-size: 15px;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey); 
  text-decoration: none;
}
.mega-menu a:hover{
  color: var(--color-green); 
}
.mega-menu .btn .btn-primary-blue a{
  color: white!important; 
}
.mega-menu .btn .btn-primary-blue a:hover{
  color: var(--color-blue)!important; 
}

.mega-menu .fa-solid{
  color: var(--color-green)!important;
  font-size: 18px; 
}

.btn.btn-primary-blue.w-100.text-white.pt-2:hover {
color: var(--color-blue)!important;
}

.btn.btn-primary-blue.pt-2.mt-auto.text-white:hover{
  color: var(--color-blue)!important;
}



/*////////////Header///////////*/

.container.header-content {
padding-top: 200px;
}

header{
	background-image:
	linear-gradient(to right, rgba(7, 23, 38, 0.88) 0%, rgba(28, 86, 140, 0) 100%),
	url('assets/templates/hans/img/Laufende.jpg');
	min-height: 880px;
	object-fit: cover;	
	background-repeat: no-repeat;
}

header p{
	font-size: 1.1rem;
}

header ul{
	list-style: none;
	display:flex;
	flex-wrap: wrap;

	align-items: center;
}

header .keyword{
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
}


header .keyword-number{
   font-size: 69px;
   font-family: 'DM Serif Display';
   font-style: italic;
   font-weight: 400;
   color: var(--color-green); 
   margin:0!important;
}
.keywords-header .keyword {
    display: flex;
    flex-direction: column; /* Sorgt dafür, dass die Zahl ÜBER dem Text steht */
    align-items: flex-start; /* Linksbündig (Nutze 'center' für zentriert) */
 }

header {
    background-image:
    linear-gradient(to right, rgba(7, 23, 38, 0.88) 0%, rgba(28, 86, 140, 0) 100%),
    url('../img/Laufende.jpg');
    min-height: 880px;
    background-size: cover; /* Korrigiert von object-fit (gehört nicht auf den Header) */
    background-position: center;
    background-repeat: no-repeat;
}

.container.header-content {
    padding-top: 200px;
    padding-bottom: 50px;
}

header p {
    font-size: 1.1rem;
}

/* Keywords Basis-Styling */
header .keyword {
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

header .keyword-number {
    font-size: 69px;
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--color-green); 
    margin: 0 !important;
    line-height: 1.1;
}

/* Flex-Anordnung innerhalb der Keywords */
.keywords-header .keyword {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; /* Linksbündig auf Desktop & Tablet */
}

/* --- RESPONSIVE ANPASSUNGEN MITTELS CSS --- */

/* Für harmonischere Schriften und Abstände auf Tablets & Handys */
@media (max-width: 991.98px) {
    .container.header-content {
        padding-top: 120px; /* Kompakterer Abstand oben auf kleineren Screens */
    }
    header {
        min-height: auto; /* Verhindert starre Riesen-Höhe auf Mobilgeräten */
    }
    .responsive-h1 {
        font-size: 2.5rem; /* Angenehmere H1 Größe für Tablets */
    }
    header .keyword-number {
        font-size: 55px; /* Zahlen werden auf Tablet etwas kleiner */
    }
}

@media (max-width: 575.98px) {
    .container.header-content {
        padding-top: 80px;
    }
    .responsive-h1 {
        font-size: 1.75rem;
    }
    .highlight-h1 {
        font-size: 33px;
    }
    .keywords-header .keyword {
        align-items: center;
        text-align: center;
    }
    header .keyword-number {
        font-size: 48px;
        line-height: 1.0;
        margin-bottom: 5px !important;
    }
    header {
        min-height: auto !important;
        padding-bottom: 40px;
        padding:20px;
    }
    header ul {
        gap: 1rem;
    }
}


 /*////////////Anspruch///////////*/


#anspruch {
	padding-top:90px!important;
}


 .subline{
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  color: var(--color-blue);  
 }


.bild {
    position: relative;
    padding-top: 30px; 
    padding-right: 30px;
}

.quadrat-img {
    width: 440px;
    height: 440px;
    object-fit: cover;    
    position: relative;
    z-index: 2;          
}

.quadrat {
    width: 440px;
    height: 446px;
    
    position: absolute;
    top: 1px;
    right: 144px;             
    z-index: 1;          
}
.text-rechteck{
	max-width: 260px;
    height:60px;
    
    position: absolute;          
    z-index: 3; 
    bottom: -25px;
    left: -21px;
    color:white;
    font-size: 1.1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
}
@media (max-width: 575.98px) {
    h2 {
    font-size: 24px;
    }
    .highlight-h2 {
    font-size: 33px;
    }
    .zitat{
      text-align:left;
    }
    .zitat-zeichen{
      width:27px;
    }
    .quadrat-img{
      height:100%;
    }
    .text-rechteck{
      left:12px;
    }
    #anspruch p{
      margin-top:20px;
    }
    #anspruch{
      padding-top:37px!important;
      padding:20px;
    }
}

 /*////////////Leistungen///////////*/

#leistungen {
	margin-top:110px!important;
}
#leistungen li{
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey);
}

.card-linie{
	color:var(--color-dark-blue);
}

.card-step-num{
   font-size: 32px;
   font-family: 'DM Serif Display';
   font-style: italic;
   font-weight: 400;
   color: var(--color-green); 
   margin:0!important;
}

#leistungen .fa-solid{
	font-size:18px;
}

@media (max-width: 575.98px) {
  #leistungen {
  margin-top: 61px !important;
  padding-top:32px!important;
  padding-bottom: 40px;
  padding:20px;
  
  }
  .zitat{
    margin-bottom:36px;
  }
}  


 /*//////////// Unser Weg///////////*/

#unserweg .quadrat-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  position: relative;
  z-index: 2; /* Bild immer im Vordergrund */
}

/* Container für das Bild und das absolute grüne Quadrat */
#unserweg .bild .d-inline-block {
  position: relative;
  width: 100%;
  max-width: 500px;
}

/* Basis-Klasse für alle Quadrate */
#unserweg .quadrat {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1; /* Immer hinter dem Bild */
}

/* EXTRA KLASSE: Für RECHTSSTEHENDE Bilder (Kasten bricht nach links-unten aus) */
#unserweg .quadrat-rechts {
  transform: translate(-30px, 30px);
}

/* EXTRA KLASSE: Für LINKSSTEHENDE Bilder (Kasten bricht nach rechts-unten aus) */
#unserweg .quadrat-links {
  transform: translate(30px, 30px);
}

/* DESKTOP-MODUS (Ab 992px / ca. 1000px): Zweispaltiges Zick-Zack-Layout */
@media (min-width: 992px) {
  #unserweg .quadrat-img {
    width: 500px;
    height: 500px;
    object-fit: cover;
  }
  #unserweg .bild .d-inline-block {
    width: 500px;
    height: 500px;
  }
  
}

/* =========================================================================
   NUR TABLET-MODUS (Zwischen 576px und 1000px)
   Bricht hier sauber einspaltig und linksbündig um, ohne Handys zu beeinflussen
   ========================================================================= */
@media (min-width: 576px) and (max-width: 991.98px) {
  #unserweg .row {
    display: flex !important;
    flex-direction: column !important; /* Spalten untereinander zwingen */
  }

  #unserweg .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bild kommt auf dem Tablet immer zuerst */
  #unserweg .order-1, 
  #unserweg .order-lg-2 {
    order: 1 !important;
  }
  #unserweg .order-2, 
  #unserweg .order-lg-1 {
    order: 2 !important;
  }

  /* Bild-Design für den einspaltigen Fluss auf Tablets */
  #unserweg .quadrat-img {
    max-width: 100%;
    height: 450px;
    object-fit: cover;
  }

  #unserweg .bild {
    text-align: left !important; /* Konsequent linksbündig */
    margin-bottom: 3.5rem; /* Platz für das nach unten ausbrechende Quadrat */
    padding-left: 30px; 
    padding-right: 30px;
  }

  #unserweg .bild .d-inline-block {
    width: 100%;
    max-width: 450px; 
  }
  
  /* Setzt die rechte Textausrichtung zurück auf links */
  #unserweg .text-lg-end {
    text-align: left !important;
  }

  /* Abstand zwischen dem Bild-Block und dem folgenden Text */
  #unserweg .col-lg-6:not(.bild) {
    margin-top: 0.5rem;
  }
}

/* TYPOGRAFIE & BASIS */
#unserweg li {
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 2.3;
  font-style: normal;
  color: var(--color-dark-grey); 
}

#unserweg {
  margin-top: 100px;
}

/* =========================================================================
   SMARTPHONE-MODUS (Unter 576px) - DEIN ORIGINAL-ZUSTAND
   ========================================================================= */
@media (max-width: 575.98px) {
  .reveal-right {
  }
  h3 {
    font-size: 18px;
    padding-bottom: 20px !important;
  }
  #unserweg .quadrat-img {
    height: 450px;
  }
  #unserweg {
    padding: 20px;
    margin-top: 20px;
  }
}
/*///////////Hans Sachs/////////////*/

#hanssachs .fa-solid{
  font-size:40px;
}

.linie-b{
  border-bottom: solid 2px #9DBC35;
}

.linie-r{
  border-right: solid 2px #9DBC35;
}

#hanssachs{
  margin-top:100px;
}

#hanssachs.btn-primary-green:hover {
  color: var(--color-green)!important;
  border-color: var(--color-green)!important;
  border: solid 2px;
  font-family: Poppins;
  font-weight: 500;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 0;
}

/* Verhindert, dass die Rows Abstand zueinander haben */
#hanssachs .row {
    margin-bottom: 0;
    margin-top: 0;
}

/* Entfernt den seitlichen Versatz der Spalten in diesem Bereich */
#hanssachs .col-3 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Trick: Lässt die rechte Linie der linken Boxen minimal länger nach unten ragen, 
   damit sie die untere Linie schneidet */
.linie-r {
    border-right: solid 2px #9DBC35;
    position: relative;
}

/* Schließt die Lücke im Zentrum mathematisch */
.linie-b.linie-r::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 2px;
    height: 2px;
    background-color: #9DBC35;
}

/* Grundlegendes Styling für die Icons */
#hanssachs .fa-solid {
  font-size: 40px;
}
#hanssachs {
  margin-top: 100px;
}
@media (max-width: 575.98px) {
  #hanssachs{
    padding:20px;
  }
}  
/* ==========================================
   MOBIL-STYLING (Standard für Smartphones)
   ========================================== */
.linie-b-mobil {
    border-bottom: solid 2px #9DBC35;
}

/* Ein bisschen extra Abstand für die Boxen im Smartphone-Modus */
@media (max-width: 767px) {
    .vorteil-box {
        padding-left: 0 !important;   /* Nutzt den vollen Platz links */
        padding-right: 0 !important;  /* Nutzt den vollen Platz rechts */
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    /* Die linke Spalte (Text/Button) bekommt mobil Abstand nach unten */
    #hanssachs .col-md-6:first-child {
        margin-bottom: 3rem;
    }
}

/* ==========================================
   DESKTOP-STYLING (Ab Tablet / PC - das Kreuz)
   ========================================== */
@media (min-width: 768px) {
    /* Mobil-Linien auf Desktop deaktivieren */
    .linie-b-mobil {
        border-bottom: none;
    }
    
    /* Desktop-Kreuz aktivieren */
    .linie-b-desktop {
        border-bottom: solid 2px #9DBC35;
    }
    .linie-r-desktop {
        border-right: solid 2px #9DBC35;
    }

    /* Das Kreuz im Zentrum mathematisch perfekt schließen */
    .linie-b-desktop.linie-r-desktop {
        position: relative;
    }
    .linie-b-desktop.linie-r-desktop::after {
        content: '';
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 2px;
        height: 2px;
        background-color: #9DBC35;
    }
}
/*///////////Referenzen/////////////*/

#referenzen{
  margin-top: 100px;
}

.quote-green {
  /* Wandelt das dunkle Icon exakt in den Farbton #9DBC35 um */
  filter: invert(72%) sepia(50%) saturate(464%) hue-rotate(33deg) brightness(91%) contrast(85%);
}

#referenzen p{
  font-style: italic;
}

#referenzen .card{
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding:44px;
}
.owl-stage {
margin: -154px 0px;
padding: 209px 88px;
}

@media (max-width: 575.98px) {
  #referenzen{
    padding:20px;
    margin-top:20px;
  }
}  

/*///////////Kontakt/////////////*/

#kontakt{
  margin-top:100px;
}

.quadrat-text{
  position: relative;
  z-index: 2;
   box-shadow: 0 15px 30px #203e5833 !important;
   width: 500px;
   height:500px;
   right: -65px;
   padding:42px;

}


#kontakt li{
   font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey);  
}

.bold{
  font-weight: 600;
}

#kontakt .fa-solid{
  font-size:24px;
}

.quadrat-text a{
     font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey); 
}
.quadrat-text a:hover{
  color: var(--color-green); 
}
@media (max-width: 575.98px) {
  .quadrat-text {
    width: 100%;
    height: 517px;
    right: -8px;

    }
    .subline{
      padding-bottom: 30px!important;
      padding-top:30px;
    }

    footer{
      padding:20px!important;
    }
    #kontakt{
      padding:20px;
      margin-top:0px;
    }
}    

@media (max-width: 767.98px) {
.custom-contact-box {
height: 536px !important;
}
}

#kontakt {
  margin-top: 10px;
}

/* Der Wrapper kontrolliert den Stapelkontext für Box + Quadrat */
#kontakt .kontakt-box-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  z-index: 1;
}

/* Die weiße Box liegt sauber über dem Quadrat */
#kontakt .quadrat-text {
  position: relative;
  z-index: 2;
  box-shadow: 0 15px 35px #203e5822 !important;
  width: 100%;
  max-width: 500px;
  height: 500px;
  padding: 42px;
  background-color: #ffffff;
}

/* Das grüne Hintergrundquadrat */
#kontakt .quadrat {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /* Bricht jetzt perfekt nach RECHTS und nach OBEN aus */
  transform: translate(30px, -30px); 
}

/* TYPOGRAFIE & STYLES innerhalb der Box */
#kontakt li {
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey);  
}

.bold {
  font-weight: 600;
}

#kontakt .fa-solid {
  font-size: 24px;
}

#kontakt .quadrat-text a {
  font-size: 1rem;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-dark-grey); 
}

#kontakt .quadrat-text a:hover {
  color: var(--color-green); 
}

/* =========================================================================
   DESKTOP-MODUS (Ab 992px): Zwingt die Box an den rechten Rand der Spalte
   ========================================================================= */
@media (min-width: 992px) {
  #kontakt .bild {
    display: flex;
    justify-content: flex-end; /* Richtet die Box samt Quadrat rechtsbündig aus */
    padding-right: 30px; /* Fängt das nach rechts ausbrechende Quadrat ab */
    margin-top: 30px;    /* Schafft oben Platz für den Ausbruch des Quadrats */
  }
 #kontakt{
  margin-top:20px!important;
 }
}

/* =========================================================================
   NUR TABLET-MODUS (Zwischen 576px und 1000px): Einspaltig & Sicherer Fluss
   ========================================================================= */
@media (min-width: 576px) and (max-width: 991.98px) {
  #kontakt .row {
    display: flex !important;
    flex-direction: column !important;
  }
  #kontakt .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #kontakt .bild {
    margin-top: 5rem !important; /* Etwas mehr Platz für das obere Quadrat */
    display: flex;
    justify-content: flex-start; /* Bleibt im einspaltigen Fluss linksbündig */
    padding-right: 30px; 
  }
  #kontakt h2 br {
    display: none !important;
  }
}

/* =========================================================================
   SMARTPHONE-MODUS (Unter 576px) - DEIN ORIGINAL-ZUSTAND
   ========================================================================= */
@media (max-width: 575.98px) {
  .quadrat-text {
    width: 100%;
    height: 517px;
    right: -8px;
  }
  .subline {
    padding-bottom: 30px !important;
    padding-top: 30px;
  }
  footer {
    padding: 20px !important;
  }
  #kontakt {
    padding: 20px;
    margin-top: 0px;
  }
}
/*///////////Footer/////////////*/

footer li{
 font-size: 15px;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 2;
  font-style: normal;
  color: white;  
}
footer a{
 font-size: 15px;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.9;
  font-style: normal;
  color: white; 
  text-decoration: none; 
}

footer a:hover{
  color: var(--color-green)!important;

}

footer p{
 font-size: 13px;
  font-family: 'Poppins';
  font-weight: 400;
  line-height: 1.9;
  font-style: normal;
  color: white; 
  text-decoration: none; 
}

footer{
  padding:80px;
}

footer img{
  width:300px;
}

footer{
  margin-top:100px;
}

/*/////Back to top////*/
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  width: 60px;           /* Etwas kompakteres, edles Quadratformat */
  height: 60px;
  border: none;
  border-radius: 0;      /* STRIKT QUADRATISCH: Radius komplett auf 0 */
  background-color: #203E58; /* Standard: Dunkelblau */
  color: #ffffff;        /* Pfeil: Weiß */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: rgba(32, 62, 88, 0.25) 0px 8px 20px 0px; /* Schatten passend zum Blau */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Seidenglatte Transition */
  
  /* Deine Animationseinstellungen für das Einscrollen */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* HOVER-EFFEKT: Wird beim Drüberfahren grün */
#backToTop:hover {
  background-color: #9DBC35; /* Hans-Sachs-Grün */
  color: #ffffff;            /* Bleibt weiß für starken Kontrast */
  transform: translateY(-3px); /* Hebt sich beim Hovern minimal an */
}

/* KLICK-EFFEKT (Active): Bleibt beim Klick grün und drückt sich optisch nach unten */
#backToTop:active {
  background-color: #9DBC35 !important;
  transform: translateY(1px); /* Drückt sich beim Klick leicht rein */
  box-shadow: rgba(157, 188, 53, 0.2) 0px 4px 10px 0px;
}

/* WICHTIG: Wenn der Button durch dein JS die Klasse .show bekommt */
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
 HOVER-EFFEKTE 
   ========================================================================== */
   /* Leistungskarten (01, 02, 03) - Heben sich plastisch ab */
.custom-step-card {
   border-radius: 0px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.custom-step-card:hover {
    transform: translateY(-8px);
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* Die Zahl in der Karte (01, 02...) färbt sich beim Hover um */
.custom-step-card:hover .card-step-num {
    color: var(--color-blue) !important; /* Nutzt Bootstraps Grün oder deine Variable */
    transition: color 0.3s ease;
}

/* Bilder mit dem grünen "Quadrat" im Hintergrund */
.bild img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bild:hover img {
    transform: scale(1.03) translateY(-2px);
}


#referenzen .card:hover {
    transform: translateY(-8px);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#kontakt .quadrat-text:hover{
  transform: translateY(-8px);
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


/* Verhindert, dass das Icon auf die volle Breite gestreckt wird */
#referenzen-carousel .owl-item img {
    width: auto !important;
    display: inline-block;
}

/* Sorgt dafür, dass alle Karten innerhalb des Sliders exakt gleich hoch sind */
#referenzen-carousel .owl-stage {
    display: flex;
}
#referenzen-carousel .owl-item {
    display: flex;
    flex-direction: column;
}
#referenzen-carousel .item {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
#referenzen-carousel .card {
    width: 100%;
    border-radius: 0px;
}







/* ==========================================================================
 On Scroll Effekte
   ========================================================================== */


/* Startzustand für alle Animations-Elemente */
.scroll-reveal {
    opacity: 0;
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}

/* Von links einfliegen (für Bilder links) */
.reveal-left {
    transform: translateX(-50px);
}

/* Von rechts einfliegen (für Bilder rechts oder Text) */
.reveal-right {
    transform: translateX(50px);
}

/* Von unten einblenden (Gute Alternative für Text) */
.reveal-up {
    transform: translateY(40px);
}

/* Der Zustand, wenn das Element ins Bild scrollt */
.scroll-reveal.pgh-visible {
    opacity: 1;
    transform: translate(0);
}

/* Optionale Verzögerung für Listenpunkte, damit sie nacheinander auftauchen */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }



/* Erweitert den CSS-Code aus Schritt 1 */

/* Sanfter Zoom-Effekt für die Icons, wenn das Element sichtbar wird */
.scroll-reveal.reveal-up i.fa-solid {
    transform: scale(0.5);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastischer Effekt */
    transition-delay: inherit; /* Nutzt das Delay der Spalte */
}

.scroll-reveal.pgh-visible i.fa-solid {
    transform: scale(1);
}

/* Hover-Effekt: Wenn der Nutzer später mit der Maus über die Spalten fährt */
.col-3.scroll-reveal {
    transition: transform 0.3s ease, opacity 0.8s ease-out;
}
.col-3.scroll-reveal:hover {
    transform: translateY(-5px) !important; /* Leichtes Anheben bei Hover */
}




/* Styling für das Kontakt-Rechteck */
.custom-contact-box {
    position: relative;
    z-index: 5;
    border-radius: 4px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Subtiler interaktiver Hover-Effekt für die gesamte Box */
.custom-contact-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

/* Farbwechsel-Effekt für die Telefon- & Mail-Links */
.contact-meta-link, .contact-link-dark {
    color: #333333;
    transition: color 0.2s ease;
}

.contact-meta-link:hover, .contact-link-dark:hover {
    color: #9DBC35 !important; /* Färbt sich beim Drüberfahren dezent im Hans-Sachs-Grün */
}

/* Positionierungs-Sicherheit für das grüne Deko-Quadrat dahinter */
#kontakt .bild {
    position: relative;
}
#kontakt .quadrat {
    position: absolute;
    z-index: 1;
    /* Falls nötig, hier deine bestehenden Abstände für das grüne Quadrat anpassen */
}

/* Mobil-Anpassung */
@media (max-width: 767px) {
    #kontakt .quadrat {
        display: none; /* Verhindert unschöne Überlappungen auf kleinen Displays */
    }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & ANIMATION-RESET (Für Smartphones & Tablets)
   ========================================================================== */
@media (max-width: 767.98px) {
    
    /* 1. Seitliche Bewegungen mobil in ein sanftes Aufwärtsgleiten verwandeln */
    .scroll-reveal.reveal-left,
    .scroll-reveal.reveal-right {
        transform: translateY(30px) !important; /* Gleitet nur noch dezent von unten hoch */
    }

    /* Sobald aktiv, normalisieren */
    .scroll-reveal.reveal-left.active,
    .scroll-reveal.reveal-right.active {
        transform: translateY(0) !important;
    }
    
    /* 2. Layout-Sicherheit für die Sektionen */
    #leistungen .card,
    #anspruch .bild,
    #kontakt .custom-contact-box {
        margin-bottom: 1.5rem; /* Gibt den Elementen untereinander Luft zum Atmen */
    }

    /* 3. Das grüne Deko-Quadrat im Hintergrund mobil bändigen */
    #anspruch .quadrat,
    #kontakt .quadrat {
        display: none; /* Blendet die reinen Deko-Blöcke aus, damit sie Text/Bilder nicht überlagern */
    }
    
    /* 4. Die weiße Kontaktbox mobil schick machen */
    .custom-contact-box {
        padding: 1.5rem !important; /* Etwas kompakterer Innenabstand auf kleinen Displays */
    }
}