/* ===================================
    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: #0b6e64;
}

.card p {
  font-size: 14px;
  color: #374151;
  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: 450px !important; /* Hier dein Wunschmaß für alle Bilder */
    width: 100% !important;
    object-fit: cover; /* Verhindert Verzerrungen bei unterschiedlichen Formaten */
}

/* 2. Den Textbereich (Caption) auf eine einheitliche Höhe setzen */
.portfolio-caption {
    min-height: 200px; /* 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: 10px !important;
    position: relative; /* Basis für die Positionierung */
    padding-bottom: 60px !important; /* Platz für den Button am Boden schaffen */
}
.portfolio-caption .btn {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%); /* Zentriert den Button perfekt */
    
    /* Der Zaubertrick: */
    min-width: 200px;      /* Alle Buttons sind mindestens so breit */
    width: auto;           /* Aber sie dürfen wachsen, wenn der Text länger ist */
    text-align: center;
    white-space: nowrap;   /* Verhindert hässliche Zeilenumbrüche */
}
@media (max-width: 767px) {
    .portfolio-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding-bottom: 15px !important;
    }
    .portfolio-filter li {
        white-space: nowrap;
        margin-right: 10px;
    }
    /* Versteckt den Scrollbalken (optional) */
    .portfolio-filter::-webkit-scrollbar {
        display: none;
    }
}
.btn-grid {
    display: inline-block !important;
    width: auto !important;
    color: var(--alt);
    padding: 5px 5px; /* Kontrolliert die Größe um den Text herum */
}
/* Nur für Bildschirme ab 992px Breite (Desktop) */
@media (min-width: 992px) {
    /* Wir zielen auf die Spalten ab, die die Karten halten */
    .portfolio-boxed .col, 
    .portfolio-boxed [class*="col-"] {
        padding-left: 30px !important;  /* Mehr Platz links */
        padding-right: 30px !important; /* Mehr Platz rechts */
        margin-bottom: 60px !important; /* Mehr Platz nach unten zur nächsten Reihe */
    }

    /* Korrektur für den äußeren Rand der Reihe, damit alles bündig bleibt */
    .portfolio-boxed .row {
        margin-left: -30px !important;
        margin-right: -30px !important;
    }
}
/* Die Karte im Normalzustand */
.portfolio-boxed .portfolio-box {
    background: #ffffff;
    border: 1px solid #eeeeee !important; /* Feiner Rahmen */
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05) !important; /* Sehr dezenter Schatten */
    transition: all 0.3s ease-in-out;
}

/* Die Karte, wenn man mit der Maus darüberfährt */
.portfolio-boxed .portfolio-box:hover {
    border-color: #dddddd !important; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important; /* Schatten wird tiefer */
    transform: translateY(-5px); /* Karte hebt sich leicht an */
}
.product-label {
  font-size: 13px; 
  font-weight: 600;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}  
.label-free { 
    background-color: #23ffbd; 
    color: #000; 
}       
.label-neu { 
    background-color: #E2D4C9; 
    color: #374151; 
}
.label-best { 
    background-color: #F6D08D; 
    color: #374151; 
}      
.label-bundle { 
    background-color: #485C6A; 
    color: #fff; 
}  
.label-canva { 
    background-color: #134ECD; 
    color: #fff; 
}   
.label-pdf { 
    background-color: #DEDEDE; 
    color: #374151; 
    border: 1px solid #e0e0e0; 
    box-shadow: none; 
} 
/* Der Hover-Container (ersetzt die äußeren zwei Divs) */
.custom-portfolio-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

/* Der weiße Kreis mit dem Plus (ersetzt das span und das i-Tag) */
.custom-hover-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: #637C92; /* Hier deine Standard-Text-Accent-Farbe eintragen */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* NEU: Standardmäßig unsichtbar und leicht nach unten verschoben (für den Animationseffekt) */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
}
/* NEU: Erst wenn man über das Bild hovert, wird das Icon sichtbar und wandert hoch */
.portfolio-image:hover .custom-hover-icon {
  opacity: 1;
  transform: translateY(0);
}

/* Holt das Bootstrap-Plus-Icon direkt ins CSS */
.custom-hover-icon::after {
  content: "\f4fe"; /* Der offizielle Code für das Bootstrap "bi-plus" Icon */
  font-family: "bootstrap-icons";
  font-size: 28px; /* Entspricht in etwa icon-medium */
  font-weight: normal;
  color: #134ECD;
}

/* Behält deinen Animationseffekt bei (move-bottom-top / Hover) */
.portfolio-image:hover .custom-hover-icon {
  transform: translateY(-5px);
  /* Falls sich die Farbe beim Hovern ändern soll: */
  /* color: #deine-hover-farbe; */
}
/* Der Text-Container */
.shop-card-content {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 30px;
  text-align: center;
}

/* 1. Die Kategorie (z.B. Ratgeber, Vorlagen) */
.shop-card-content span {
  display: block;                  /* Zwingt das span in eine eigene Zeile */
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #0A857B;                  
  margin-bottom: 5px;
  font-weight: 500;
}

/* 2. Der Produkttitel */
.shop-card-content h3.product-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #2563EB !important;                  
  margin-top: 0;                   /* Killt ungewollte Browser-Abstände nach oben */
  margin-bottom: 10px;             /* Sauberer Abstand nach unten zum Text */
  line-height: 24px;
}

/* 3. Die Beschreibung */
.shop-card-content p {
  font-size: 15px; 
  line-height: 22px;
  color: #374151; 
  margin-bottom: 10px;
  margin-top: 0;
  height:66px;
  overflow: hidden;
}