/* ===================================
    Mach's dir leicht by Freelancia
====================================== */

/* variable */
:root {      
    --alt-font: "Urbanist", sans-serif; 
    --primary-font: "Inter", sans-serif;
    --base-color:#374151;
    --medium-base:#445064;
    --alt: #0D9488;
    --dark-alt: #0A857B;
    --accent: #2563EB; 
    --dark-gray: #232323;
    --medium-gray:#69666e;
}
/* reset */
body { 
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
}
/* heading */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
   
}
h1, .h1 {
    font-size: 6.25rem;
    line-height: 5.75rem;
}
/* btn */
.btn {
    font-family: var(--primary-font);
    font-weight: 500;
    letter-spacing:0.5px;
    text-transform: none;
}
.btn.btn-extra-large,
.btn.btn-rounded.btn-extra-large {
    padding: 24px 49px;
}
.btn.btn-large,
.btn.btn-rounded.btn-small {
    padding: 9px 20px;
}
.btn.btn-large,
.btn.btn-rounded.btn-large {
    font-size: 17px;
    padding: 16px 32px;
}
.btn.btn-medium,
.btn.btn-rounded.btn-medium {
    font-size: 15px;
    padding: 15px 30px;
}
.btn.btn-medium i {
    font-size: 16px;
}
.btn.btn-small i {
    font-size: 15px;
}
.btn.btn-very-small i {
    font-size: 14px;
}
.btn.btn-very-small,
.btn.btn-rounded.btn-very-small {
    font-size: 12px;
    padding: 7px 18px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
/* border color */
.border-color-transparent-dark-very-light {
  border-color: rgba(21, 21, 21, 0.1) !important;
}
/* border radius */
.border-radius-top-left-top-right {
    border-radius: 20px 20px 0 0 !important;
}
/* text color */
.text-dark-gray-light-transparent {
  color: rgba(28, 28, 28, 0.15);
}

/* gradient background color */
/* bg color */
.bg-gradient-darkblue-green {
    background: linear-gradient(50deg, #374151 0%, #0D9488 100%) !important;
}
.bg-gradient-soft-green {
    background: linear-gradient(50deg, #f8fafc 0%, #e2f2f1 100%);
    /* Ein Hauch von Grau zu einem ganz zarten Mint-Petrol */
}
.bg-gradient-new-green {
    background: linear-gradient(to right, #0D9488 0%, #5eead4 80%, #f0fdfa 100%);
    /* Ein Hauch von Grau zu einem ganz zarten Mint-Petrol */
}
.bg-gradient-teal-vibrant {
    background: linear-gradient(to right top, 
        #0D9488 0%,    /* Start: Petrol */
        #5eead4 50%,   /* Mitte: Ein leuchtendes Türkis */
        #f0fdfa 100%   /* Ende: Fast Weiß */
    );
}
.bg-gradient-black-green {
    background-image: linear-gradient(to right top, #1f2021, #1b1d1c, #1b1d1c, #222523, #333c37);
}
.bg-gradient-black-blue-green {
    background-image: linear-gradient(to right, #374151, #2563EB, #0D9488);
}
.bg-footer-gradient {
    background: linear-gradient(50deg, #1f2937 0%, #0D9488 100%) !important;
}
/* text color */
.text-gradient-black-green {
    background-image: linear-gradient(to right top, #374151, #0D9488);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-gradient-darkblue-green {
    background: linear-gradient(50deg, #374151 0%, #0D9488 100%);
    color: var(--white);
}
/* button gradient */
.btn-gradient-black-blue-green {
    background-image: linear-gradient(to right, #374151, #2563EB, #0D9488);
    background-size: 200% auto;
    color: var(--white);
}
.bg-gradient-blue-green {
    background: rgba(52, 60, 217, 1);
    background: linear-gradient(to right, #2563EB, #0D9488);
    color: var(--white);
}
.bg-gradient-white-transparent {
  background: rgb(255, 255, 255);
  background: linear-gradient(90.85deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
}
.bg-gradient-right-white-transparent {
  background: rgb(255, 255, 255);
  background: linear-gradient(87.96deg, rgba(255, 255, 255, 0.15) 0.25%, rgba(255, 255, 255, 0) 100.25%);
}
.bg-gradient-very-light-gray-transparent {
    background: rgba(52, 60, 217, 1);
    background: linear-gradient(87.96deg, rgba(52, 60, 217, 0.10) 0.25%, rgba(52, 60, 217, 0) 100.25%);
}
.bg-gradient-light-green-transparent {
    background: rgba(13, 148, 136, 1);
    background: linear-gradient(87.96deg, rgba(13, 148, 136, 0.10) 0.25%, rgba(13, 148, 136, 0) 100.25%);
}
.bg-gradient-to-top-solitude-blue-transparent {
    background: #F3F3FF;
    background: linear-gradient(180deg, #F3F3FF 0%, rgba(243, 243, 255, 0) 100%);
}
.icon-gradient {
  background: linear-gradient(135deg, #374151 0%, #0D9488 100%);
  -webkit-background-clip: text; /* Für Chrome, Safari, Edge */
  background-clip: text;         /* Die Standard-Regel für VS Code */
  -webkit-text-fill-color: transparent; /* Macht das Icon durchsichtig für den Gradient */
}

/* background */
.bg-light-green {
    background-color: #F0F9F9;
}
.bg-light-blue {
    background-color: #f9fafb;
}
.bg-wisp-pink {
    background-color: #faebe7;
}
.bg-pattens-blue {
    background-color: #d7ebf7;
}
.bg-humming-bird {
    background-color: #dbf2eb;
}
.bg-ghost-white {
  background-color: #f3f3ff;
}
.bg-base-color-transparent {
    background-color: rgba(52, 60, 217, 0.1);
}
.bg-alt-color-transparent {
    background-color: rgba(13, 148, 136, 0.1);
}
.bg-dark-gray-transparent-medium {
    background-color: rgba(28, 28, 28, 0.4);
}
.bg-dark-gray-transparent-extra-medium {
    background-color: rgba(6, 18, 42, 0.4);
}
.blur-box {
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
}
/* bg sliding line */ 
.bg-sliding-line-dark-gray { 
    background-image: linear-gradient(135deg, transparent 45%, #464646 45%, #464646 55%, transparent 0);
    background-size: 5px 5px;
}
/* Padding */
.pt-100px {
    padding-top: 100px;
}
.pb-100px {
    padding-bottom: 100px;
}
/* bottom */
.bottom-180px {
    bottom: 180px;
}
/* newsletter style 02 */
.newsletter-style-02 input {
    font-size: 20px;
    border-radius: 0;
    padding-right: 60px !important;
    padding-bottom: 16px;
}
/* box shadow */
.box-shadow-medium-bottom, 
.box-shadow-medium-bottom-hover:hover {
  -webkit-box-shadow: 0 20px 34px rgba(0, 0, 0, 0.15);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}
/* header */
.navbar .navbar-nav .nav-link {
    font-size: 16px;
    padding: 10px 25px;
}
header .navbar-brand {
    padding: 24px 0;
}
/* page title */
.page-title-extra-large h1 {
    font-size: 4.375rem;
    line-height: 4.375rem;
}
/* tab style 04 */
.tab-style-04 .nav-tabs .nav-item {
    padding: 0;
    flex: 0% 1 0;
}
.tab-style-04 .nav-tabs .nav-item .nav-link .tab-border {
    height: 3px;
}
/* footer */
footer .footer-logo img {
    max-height: 44px;
}
.footer-dark, .footer-dark a, .footer-dark p {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 300;
}
.footer-dark a:hover, 
.footer-light a:hover, 
.footer-navbar li a:hover {
    color: var(--white);
}
footer ul li {
    margin-bottom: 2px;
}

@keyframes scroll1 {
    0% {
        top: 0px;
    }
    100% {
        top: 100%;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1345px;
    }
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link { 
        padding: 10px 20px;
    }
}
@media (max-width: 1199px) {
    .navbar .navbar-nav .nav-link { 
        padding: 10px 15px;
    }
    .team-style-01 figure figcaption .social-icon a {
        margin: 0 8px;
    }
}
@media (max-width: 767px) {  
    h1, .h1 {
        font-size: 5.25rem;
        line-height: 4.75rem;
    }
}
@media (max-width: 375px) { 
    h1, .h1 {
        font-size: 4.5rem;
        line-height: 4rem;
    }
}
.card-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.card {
  background: #FFFFFF;
  border: 1px solid #2563eb;
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.label {
  font-size: 12px;
  color: #6F6F6F;
  display: block;
  margin-bottom: 8px;
}

.card h3 {
  font-size: 16px;
  margin: 0 0 6px;
  color: #0D9488;
}

.card p {
  font-size: 14px;
  color: #0D9488;
  margin: 0;
}
/* Landing page footer */
.footer-demo ul li {
  margin-bottom: 0;
  line-height: 30px;
}
.footer-demo a:hover {
  color: #fff;
}
.footer-demo img {
  max-height: 55px !important;
}
.footer-titel {
  font-family: 'Urbanist';
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.custom-pill2 {
    /* Typografie */
    font-size: 13px;                  
    line-height: 36px;                
    font-weight: 600;                 
    text-transform: uppercase;       
    color: var(--base-color);         

    /* Abstände & Layout */
    padding-left: 20px;              
    padding-right: 20px;             
    margin-bottom: 20px;              
    display: inline-flex;         
    align-items: center;              

   /* Design-Elemente */
    border-radius: 100px;             
    border-color: #0D9488;
    transform: translateY(-4px);
    background: linear-gradient(50deg, #f8fafc 0%, #D3E3E3 100%);
    } 

    .custom-pill {
    background: rgba(225, 232, 232, 0.6);
    
    font-weight: 600;
    font-size: 13px;
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.custom-pill i {
    font-size: 12px;
}
.custom-pill-mdl {
    /* Typografie */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #445064;

    /* Layout & Abstände */
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    padding: 6px 18px;
    margin-bottom: 24px;
    
    /* Design */
    border-radius: 100px;
        background: linear-gradient(to right, #f8fafc 0%, #ebf2f2 100%);
    border: 1px solid rgba(13, 148, 136, 0.2); 
    
    /* Sanfter Versatz nach oben für Leichtigkeit */
    transform: translateY(-2px);
}
/* Container für den Header-Bereich */
.hero-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Oder center, je nach Layout */
    gap: 20px; /* Der goldene Abstand zwischen Pille und H1 */
}

/* Die kräftige Pille über der H1 */
.hero-pill {
    background-color: #0A857B;
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(10, 133, 123, 0.15); /* Subtiler Schatten macht es "schwebend" */
}
.hero-pill i {
    opacity: 0.8; /* Macht das Weiß des Icons etwas sanfter */
    margin-right: 8px;
}


.hero-title {
    font-size: 4.75rem;
    font-family: var(--alt-font);
    font-weight: 700;
    color: #374151;
    line-height: 1.05;
    margin-bottom: 30px;
    letter-spacing: -0.02em
}

.hero-subtitle {
    font-size: 22px;
    color: #445064;
    font-size: 24px;
    max-width: 700px;
    margin-left: 0px;
    margin-right: auto;
    margin-bottom: 20px;
    line-height: 1.5;
}
.hero-subtext {
    font-size: 20px;
    color: #445064;
    max-width: 540px;
    margin-left: 0px;
    margin-right: auto;
    margin-bottom: 20px;
    line-height: 1.5;
    display: block;
    text-align: start;
}
.pill-hero2 {
    background: rgba(13, 148, 136, 0.1);
    color: #0D9488;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-block;
}
.page-title-clean::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
   
}
.module-animation-container {
    width: 200px;
    height: 150px;
    margin: 0 auto;
}

.module-box {
    position: absolute;
    border: 2px solid #0D9488;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    width: 80px;
    height: 100px;
}

.box-1 {
    top: 10%; left: 10%;
    animation: float-slow 6s ease-in-out infinite;
    opacity: 0.6;
}

.box-2 {
    top: 40%; left: 50%;
    animation: float-slow 8s ease-in-out infinite reverse;
    opacity: 0.4;
    width: 90px;
}

.box-3 {
    top: 20%; left: 40%;
    animation: float-slow 7s ease-in-out infinite 1s;
    opacity: 0.3;
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}
@media (max-width: 991px) {
    .module-animation-container {
        width: 150px; /* Kleiner am Handy */
        height: 100px;
    }
    .module-box {
        width: 60px;
        height: 75px;
    }
}
/* Desktop-Standard */
.custom-banner-padding {
    padding: 80px 0 50px 0;
}
/* Nur für Desktop (ab 992px) */
@media (min-width: 992px) {
    .custom-banner-padding {
        padding-top: 160px; 
        padding-bottom: 160px;
    }
}
/* Handy-Anpassung */
@media (max-width: 767px) {
    .custom-banner-padding {
        padding-top: 130px; 
        padding-bottom: 30px;
    }
}
/* --- BASIS (Handy) --- */
.custom-wave-container {
    height: 60px; /* Schön flach am Handy */
}

/* --- TABLET (ab 768px) --- */
@media (min-width: 768px) {
    .custom-wave-container {
        height: 90px;
    }
}

/* --- LAPTOP / DESKTOP (ab 992px) --- */
@media (min-width: 992px) {
    .custom-wave-container {
        height: 120px; /* Hier darf sie groß sein */
        /* Wir schieben sie 2px tiefer, um die graue Linie zu killen */
        bottom: -2px !important; 
    }
}
/* Handy-Einstellungen */
    .custom-wave-wrapper {
        height: 50px;       /* Welle am Handy flach halten */
        bottom: -25px;      /* Halbe Höhe nach unten schieben für Überlappung */
    }

    /* Laptop/Desktop Einstellungen */
    @media (min-width: 992px) {
        .custom-wave-wrapper {
            height: 100px;  /* Am Laptop darf sie höher sein */
            bottom: -50px;  /* Wieder genau die Hälfte für perfekte Zentrierung auf der Kante */
        }
        /* Damit der Content im 2. Sektor nicht von der Welle überlagert wird */
        section.bg-white {
            padding-top: 140px !important; 
        }
    }
    /* 1. Das Bild auf eine feste Höhe zwingen */
.portfolio-image img {
    height: 400px !important; /* Hier dein Wunschmaß für alle Bilder */
    width: 100%;
    object-fit: cover; /* Verhindert Verzerrungen bei unterschiedlichen Formaten */
}

/* 2. Den Textbereich (Caption) auf eine einheitliche Höhe setzen */
.portfolio-caption {
    min-height: 260px; /* Dieser Wert sorgt dafür, dass alle Boxen gleich lang werden */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Schiebt den Button nach unten */
    padding: 25px !important;
    position: relative; /* Basis für die Positionierung */
    padding-bottom: 80px !important; /* Platz für den Button am Boden schaffen */
}
.portfolio-caption .btn {
    position: absolute;
    bottom: 25px; /* Abstand zum unteren Rand */
    left: 25px;   /* Abstand zum linken Rand */
    right: 25px;  /* Abstand zum rechten Rand */
    width: 60%;  /* Oder 'calc(100% - 50px)' für volle Breite */
    margin: 0 auto;
}