/* =========================
   Allgemeines Styling
   ========================= */

/*################# GRUNDLEGENDE STILE #################*/

/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    color: #fff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #1a73e8;
    z-index: 9999;
    font-family: Arial, sans-serif;
    display: none;  /* Start hidden */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.5s ease-out;
  }
  
  .cookie-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .cookie-message {
    font-size: 0.95rem;
    margin: 0;
    flex: 1;
    text-align: left;
  }
  
  .cookie-message a {
    color: #1a73e8;
    text-decoration: underline;
  }
  
  .cookie-button {
    background-color: #1a73e8;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .cookie-button:hover {
    background-color: #1558a4;
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  /* Responsive Styles für mobile Geräte */
  @media (max-width: 480px) {
    /* Hier beginnen die spezifischen Änderungen für mobile Geräte */
    .cookie-banner {
      padding: 8px 16px;
      flex-direction: column;  /* Text und Button übereinander anordnen */
      align-items: center;  /* Zentriert alles horizontal */
    }
  
    .cookie-banner-content {
      flex-direction: column;  /* Text und Button übereinander */
      align-items: center; /* Zentriert sowohl Text als auch Button */
      text-align: center;  /* Text mittig */
    }
  
    /* Schriftgröße für den Cookie-Banner Text anpassen */
    .cookie-message {
      font-size: 0.7rem;  /* Schriftgröße kleiner */
      margin-bottom: 1px;  /* Abstand zwischen Text und Button */
    }
  
    .cookie-button {
      padding: 6px 14px;
      font-size: 0.9rem;
      margin-top: 10px;  /* Abstand zum Text */
    }
  }
  /* Responsive Styles für mobile Geräte und Tablets */
@media (max-width: 1024px) {
    .cookie-banner {
      padding: 8px 16px;
      flex-direction: column;  /* Text und Button übereinander anordnen */
      align-items: center;      /* Zentriert alles horizontal */
    }
  
    .cookie-banner-content {
      flex-direction: column;   /* Text und Button übereinander */
      align-items: center;      /* Zentriert sowohl Text als auch Button */
      text-align: center;       /* Text mittig */
    }
  
    /* Schriftgröße für den Cookie-Banner Text anpassen */
    .cookie-message {
      font-size: 0.7rem;       /* Schriftgröße kleiner */
      margin-bottom: 1px;      /* Abstand zwischen Text und Button */
    }
  
    .cookie-button {
      padding: 6px 14px;
      font-size: 0.9rem;
      margin-top: 10px;        /* Abstand zum Text */
    }
  }
  
  

.spacer-20 { height: 20px; }
.spacer-40 { height: 40px; }
.spacer-60 { height: 60px; }
.spacer-70 { height: 70px; }
.spacer-100 { height: 100px; }
.spacer-120 { height: 120px; }

*, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: clip; /* besser als hidden */
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    overflow-x: clip;
    font-family: sans-serif !important;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    height: 100%;
}



/* =========================
   Fixiertes Hintergrund
   ========================= */
.image-background {
    position: relative;
    width: 100%;
    height: 100vh;
}

.background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* =========================
   Fixiertes Video im Hintergrund
   ========================= */
   .video-background1 {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000; /* Schwarz als Fallback */
    background-image: url('images/background.png');
    background-size: cover;
    background-position: center center;
    overflow: hidden;
  }

.video-background1 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* =========================
   Overlay für den Video-Hintergrund
   ========================= */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

/* =========================
   Title- und Subtitle-Styling mit transparenter Box
   ========================= */
   .title-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    z-index: 10;
    padding: 60px;  /* Mehr Abstand rund um den Inhalt */
    width: 95%;
    max-width: 1800px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* =========================
   Titel Styling
   ========================= */
.title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #007bff;  /* Blau für den Titel */
    margin: 0;
    line-height: 1.1;
}


/* =========================
   Untertitel Styling
   ========================= */
.subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    margin-top: 10px;
    line-height: 1.5;
}
/* =========================
   Highlight für wichtige Texte die Fett und in anderer Farbe gemacht werden
   ========================= */
   .highlight {
    color: #FF6347;  /* Tomatenrot als Farbe für Highlights */
    font-weight: bold;  /* Fettdruck für den hervorgehobenen Text */
    text-transform: uppercase;  /* Großbuchstaben */
}

/* =========================
   Responsive Design für Title und Subtitle
   ========================= */

/* Für Smartphones unter 768px */
@media (max-width: 767px) {  
    .title-container {
        padding: 10px;  /* Weniger Abstand bei kleinen Geräten im Landscape-Modus */
        top: 55%;  /* Leicht nach oben verschieben, um den Inhalt sichtbarer zu machen */
    }
    .title {
        font-size: 1rem;  /* Kleinere Schriftgröße für kleinere Smartphones */
    }

    .subtitle {
        font-size: 1rem;  /* Kleinere Schriftgröße für kleinere Smartphones */
    }

}
/* Für Tablets zwischen 768px und 1024px */
@media (min-width: 768px) and (max-width: 1024px) {  
    .title {
        font-size: 1.9rem;  /* Angemessene Schriftgröße für Tablets */
    }

    .subtitle {
        font-size: 1.4rem;  /* Angemessene Schriftgröße für Tablets */
    }
}

/* =========================
   Landscape-orientierte Medienabfragen für 667x375px (kleinere Smartphones)
   ========================= */
@media (orientation: landscape) and (max-width: 667px) and (max-height: 375px) {
    .title-container {
        padding: 20px;  /* Weniger Abstand bei kleinen Geräten im Landscape-Modus */
        top: 55%;  /* Leicht nach oben verschieben, um den Inhalt sichtbarer zu machen */
    }

    .title {
        font-size: 1rem;  /* Sehr kleine Schriftgröße für den Titel */
    }

    .subtitle {
        font-size: 0.6rem;  /* Sehr kleine Schriftgröße für den Untertitel */
    }
}

/* =========================
   Landscape-orientierte Medienabfragen für größere Smartphones im Landscape-Modus
   ========================= */

/* Für Smartphones mit größeren Auflösungen im Landscape-Modus (z.B. 820x460px) */
@media (orientation: landscape) and (min-width: 820px) and (max-width: 1080px) {
    .title-container {
        padding: 10px;  /* Mehr Abstand für größere Smartphones */
        top: 55%;  /* Standard Position */
    }

    .title {
        font-size: 1.5rem;  /* Etwas größere Schriftgröße */
    }

    .subtitle {
        font-size: 0.8rem;  /* Größere Untertitel-Schrift */
    }
}

/* =========================
   Anpassungen für größere Geräte im Landscape-Modus
   ========================= */

/* Für Geräte im Landscape-Modus (ab 1025px) */
@media (orientation: landscape) and (min-width: 1025px) {
    .title-container {
        padding: 10px;  /* Mehr Abstand für größere Smartphones */
        top: 55%;  /* Standard Position */
    }

    .title {
        font-size: 2.8rem;  /* Etwas größere Schriftgröße */
    }

    .subtitle {
        font-size: 1.2rem;  /* Größere Untertitel-Schrift */
    }
}
/* Für besonders große Geräte im Landscape-Modus (ab 1600px) */
@media (orientation: landscape) and (min-width: 1600px) {
    .title-container {
        padding: 10px;  /* Mehr Abstand für größere Smartphones */
        top: 50%;  /* Standard Position */
    }

    .title {
        font-size: 3rem;  /* Etwas größere Schriftgröße */
    }

    .subtitle {
        font-size: 1.7rem;  /* Größere Untertitel-Schrift */
    }
}
/* Generell für Landscape zwischen 700px und 900px */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 900px) {
    .title-container {
        padding: 10px;
        top: 55%;
    }

    .title {
        font-size: 1.2rem;
    }

    .subtitle {
        font-size: 0.8rem;
    }
}



/*################# Unterpage Hero Section Bild #################*/
/* =========================================
   Subpage Hero Section (für Unterseiten)
   ========================================= */

   .subpage-hero {
    position: relative;
    width: 100%;
    height: 500px; /* Fixe Höhe für Unterseiten */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}
.subpage-hero__button-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.subpage-hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background-color: #111; /* oder #111, oder Farbverlauf passend zu Overlay */
}


/*################# Hero Bild Lade-Transition für alle Unterseiten #################*/
.subpage-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
    transform: scale(1.05);
    opacity: 0;
    transition: filter 0.6s ease, transform 0.6s ease, opacity 0.6s ease;
    background-color: transparent; /* kein grauer Platzhalter */
}

.subpage-hero__img.loaded {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
}


.subpage-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Halbtransparente Überlagerung */
    z-index: 2;
}

.subpage-hero__content {
    position: relative;
    z-index: 3;
    max-width: 1600px;
    padding: 20px;
}

.subpage-hero__title {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #007BFF; /* schönes kräftiges Blau */
    font-weight: 700; /* schön fett */
}


.subpage-hero__subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Container bleibt gleich */
.subpage-hero__button-container {
    position: relative;
    display: inline-block;
}

/* Goldener animierter Rahmen */
.subpage-hero__animated-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 215, 0, 0.8); /* Gold */
    border-radius: 50px;
    animation: subpagePulseBorder 3s ease-in-out infinite;
    z-index: -1;
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 30px rgba(255, 215, 0, 0.2);
}

/* Button mit goldenem Glas-Effekt */
.subpage-hero__button {
    background: rgba(255, 215, 0, 0.15); /* leicht goldener Glas-Effekt */
    border: 2px solid rgba(255, 215, 0, 0.9);
    color: #FFD700; /* Gold */
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow:
        0 4px 15px rgba(255, 215, 0, 0.3),
        inset 0 0 8px rgba(255, 215, 0, 0.5);
    cursor: pointer;
}

.subpage-hero__button:hover {
    background: #FFD700;
    color: #2b2b2b;
    box-shadow:
        0 6px 25px rgba(255, 215, 0, 0.8),
        inset 0 0 15px rgba(255, 215, 0, 0.7);
    transform: translateY(-3px) scale(1.05);
}


  

@media (max-width: 768px) {
    .subpage-hero__content {
        margin-top: 80px;
    }

    .subpage-hero__title {
        font-size: 1.5rem; /* Größere Smartphones und kleine Tablets */
    }

    .subpage-hero__subtitle {
        font-size: 0.9rem;
    }
}

/* Für die Unterpage Webvisitenkarte vorallem */

@media (max-width: 480px) {
    .subpage-hero__content {
        margin-top: 60px;
    }

    .subpage-hero__title {
        font-size: 1.2rem; /* Kleine Handys */
    }

    .subpage-hero__subtitle {
        font-size: 0.7rem;
    }
}

/* === HIER EINSETZEN === */
@media (max-width: 767px) {
    .custom-webdesign-container {
        padding: 10px;
    }

    .custom-webdesign-card {
        padding: 15px;
        margin: 10px auto;
        width: 95%;
        border-radius: 8px;
    }

    .custom-webdesign-card .card-title {
        font-size: 1.3rem;
        text-align: center;
        margin-bottom: 15px;
    }

    .custom-webdesign-card .card-text {
        font-size: 1rem;
        line-height: 1.6;
        padding-left: 15px;
        padding-right: 15px;
    }

    .custom-webdesign-card .card-text li {
        margin-bottom: 12px;
    }

    .custom-webdesign-card .card-text strong {
        display: block;
        margin-bottom: 4px;
        font-size: 1.05rem;
    }
}



/* =========================
   Navbar Styling (transparente Navigation)
   ========================= */
/* Höhe der Navbar festlegen */
.navbar {
    background-color: rgba(0, 0, 0, 0.7); /* Transparenter schwarzer Hintergrund */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Navbar bleibt immer oben */
    padding: 5px 0; /* Reduziere das Padding vertikal */
}

html {
    scroll-padding-top: 60px; /* Abstand für Anker-Links, damit sie nicht hinter der Navbar verschwinden */
}

/* Inhalte der Seite erhalten ein Padding, damit sie nicht hinter dem Menü verschwinden */
body {
    padding-top: 60px; /* Abstand zum Menü */
}

/* Alternativ: Spezifischer Abschnitt für Überschrift, falls gewünscht */
.header-section {
    padding-top: 60px; /* Stellen Sie sicher, dass die Überschrift nicht hinter dem Menü verschwindet */
}


/* =========================
   Dropdown Menü sichtbar machen bei Hover für WIZARDPIXEL
   ========================= */
   .navbar .nav-item.dropdown:hover .dropdown-menu {
    display: block;
}


.dropdown-menu {
    display: none; /* Dropdown standardmäßig ausgeblendet */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background-color: rgba(0, 0, 0, 0.9); /* Dunkler Hintergrund für das Dropdown */
    border-radius: 5px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

/* =========================
   Dropdown Links Styling
   ========================= */
.dropdown-item {
    color: white; /* Textfarbe der Dropdown-Links */
    padding: 10px 15px; /* Padding für die Links */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s ease, color 0.3s ease; /* Sanfte Übergänge */
}

.dropdown-item:hover {
    background-color: #007bff; /* Hintergrundfarbe bei Hover */
    color: white !important; /* Textfarbe bleibt weiß */
}


/* =========================
   Logo-Größe und Anpassung
   ========================= */
.navbar-brand img {
    max-width: 130px; /* Standardbreite */
    height: auto; /* Höhe wird automatisch an die Breite angepasst, um das Seitenverhältnis zu bewahren */
}

/* =========================
   Anpassung für größere Bildschirme
   ========================= */
@media (min-width: 1024px) {
    .navbar-brand img {
        max-width: 190px; /* Logo-Größe auf 190px setzen */
    }
}


/* =========================
   Navbar Links Styling
   ========================= */
.navbar-nav .nav-link {
    color: white !important; /* Textfarbe der Links */
    padding: 10px 15px; /* Padding für die Links */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s ease, color 0.3s ease; /* Sanfte Übergänge */
    font-size: 1rem; /* Schriftgröße auf 0.9rem gesetzt */
}

.navbar-nav .nav-link:hover {
    background-color: #007bff; /* Hintergrundfarbe bei Hover (blau) */
    color: white !important; /* Textfarbe bleibt weiß */
}

/* =========================
   Hamburger Icon Styling
   ========================= */
   .navbar-toggler {
    border: none;
    background: transparent;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: visible;
    padding: 10px;
}

/* Balken */
.navbar-toggler .bar {
    width: 35px;
    height: 4px;
    margin: 4px 0;
    background-color: #007bff;
    border-radius: 2px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Hamburger → X */
.navbar-toggler[aria-expanded="true"] .bar:nth-child(1) {
    transform: rotate(45deg) translate(6px, 8px);
}
.navbar-toggler[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0; /* Mittlerer Balken verschwindet */
}
.navbar-toggler[aria-expanded="true"] .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Hover-Effekt */
.navbar-toggler:hover .bar {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    transform: scale(1.05);
}

/* Fokus-Effekt */
.navbar-toggler:focus {
    box-shadow: none;
}
/* =========================
   Mobile Querformat: Hamburger Menü scrollbar & sichtbar
   ========================= */
   @media (max-width: 1024px) and (orientation: landscape) {
    .navbar-collapse {
        max-height: 70vh; /* Menü maximal 70% der Bildschirmhöhe */
        overflow-y: scroll; /* immer scrollbar */
        scrollbar-gutter: stable; /* Platz für Scrollbar immer reservieren */
        margin-top: 10px;  /* Abstand unter der Navbar */
        margin-bottom: 10px; /* Abstand zum unteren Bildschirmrand */
        padding-right: 10px; /* Platz für Scrollbar, damit Inhalt nicht verdeckt wird */
        border-radius: 5px; /* Abgerundete Kanten */
        transition: max-height 0.4s ease; /* sanftes Ein- und Ausklappen */
    }

    /* Scrollbar sichtbar machen (Webkit) */
    .navbar-collapse::-webkit-scrollbar {
        width: 8px; /* Breite der Scrollleiste */
    }
    .navbar-collapse::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.7); /* Scrollbar-Farbe */
        border-radius: 4px;
    }
    .navbar-collapse::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.2); /* Hintergrund der Scrollleiste */
        border-radius: 4px;
    }
}



/*################# HAUPTINHALT für die Main Globale Wirkung #################*/



/*################# MEHR ERFAHREN BUTTON IM HEADER #################*/
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    margin-top: 20px;  /* Abstand von oben */
    z-index: 11;  /* Button bleibt über dem Overlay */
}

.animated-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    text-decoration: none;
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: background-color 0.3s, transform 0.3s;
    font-weight: 700; /* Normales Gewicht für den Text */
    font-family: sans-serif; 
}

/* Responsive Anpassung des Buttons */
@media (max-width: 768px) {
    .animated-button {
        font-size: 14px;  /* Kleinere Schriftgröße für den Button */
        padding: 8px 16px;  /* Kleinere Polsterung auf mobilen Geräten */
    }
}

.animated-border {
    position: absolute;
    top: 0;  /* Anpassung */
    left: 0; /* Anpassung */
    right: 0; /* Anpassung */
    bottom: 0; /* Anpassung */
    border-radius: 15px; /* Gleiche Abrundung wie der Button */
    background: linear-gradient(270deg, #FF0080, #FF8C00, #FFD700, #00FF00, #00FFFF, #0000FF, #800080, #FF0080);
    background-size: 400% 400%;
    animation: borderAnimation 8s ease infinite; /* Animation */
    z-index: 0; /* Unter dem Button */
    filter: blur(8px); /* Leichter Weichzeichner für den Effekt */
    width: 100%; /* Breite auf 100% setzen */
    height: 100%; /* Höhe auf 100% setzen */
}

/* Keyframes für die Animation */
@keyframes borderAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hover-Effekte für den Button */
.animated-button:hover {
    background-color: #0056b3; /* Dunklere Blauton */
    transform: scale(1.05); /* Vergrößerung des Buttons */
}

/*################# 1. Sektion #################*/
/* Stile für den Container der Card */
.custom-container {
    display: flex;
    justify-content: center; /* Zentriert das Kärtchen horizontal */
    align-items: center; /* Zentriert das Kärtchen vertikal */
    padding: 20px; /* Abstand um den Container */
    width: 100%; /* Volle Breite */
    background-color: #f8f9fa; /* Helles Hintergrund für die Sektion */
}

/* Stile für die Card mit einer eigenen ID */
#customCardCustom1 {
    background-color: #ffffff;
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    padding: 40px;
    width: 100%;
    max-width: 1300px;
    margin: 20px auto; /* Zentrierung */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s ease-out; /* Animation beim Laden der Card */
}

/* Hover-Effekt für die Card */
#customCardCustom1:hover {
    transform: scale(1.05); /* Vergrößert die Card bei Hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Verstärkter Schatten bei Hover */
}

/* Die Animation für das Einblenden der Card */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stile für den Card-Titel */
#customCardCustom1 .card-title {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: #007bff;
    margin-bottom: 20px;
    position: relative;
}

/* Icon für den Titel mit Animation */
#customCardCustom1 .card-title i {
    font-size: 1.2em;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    color: #FF8C00; /* Orange für das Icon */
}

/* Hover-Effekt für das Icon des Card-Titels */
#customCardCustom1 .card-title:hover i {
    transform: translateY(-5px); /* Icon wird beim Hover nach oben verschoben */
}

/* Stile für den Card-Text */
#customCardCustom1 .card-text {
    font-family: sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    color: #000;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Stile für die Checkliste */
#customCardCustom1 .checklist {
    text-align: left;
    margin-top: 20px;
}

/* Stile für die Liste mit den Checkmarks */
#customCardCustom1 .checklist p {
    font-size: 1.1em;
    color: #333 !important; /* Dunkleres Grau für den Text */
    margin-bottom: 10px;
}

/* Sicherstellen, dass die Textfarbe korrekt angewendet wird */
#customCardCustom1 .checklist p {
    color: #444444 !important; /* Dunkles Grau für den Text, noch stärker als #333 */
}

/* Stile für die grünen Häkchen */
#customCardCustom1 .checklist .fas {
    color: #28a745; /* Grünes Häkchen */
    margin-right: 10px;
    transition: transform 0.3s ease;
}

/* Hover-Effekt für die Checkmarks */
#customCardCustom1 .checklist .fas:hover {
    transform: translateX(5px); /* Checkmark wird nach rechts verschoben */
}

/* Stile für den Button-Container */
#customCardCustom1 .contact-button-container {
    position: relative;
    display: inline-block;
    margin-top: 30px;
}

/* Stile für den Kontakt-Button */
#customCardCustom1 .contact-button {
    padding: 12px 25px;
    font-size: 16px;
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    color: white;
    text-decoration: none;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}

/* Hover-Effekt für den Button */
#customCardCustom1 .contact-button:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-decoration: none;
}
.checklist ul {
    list-style: none; /* Standard-Bullets entfernen */
    padding: 0;
    margin: 0;
  }
  
  .checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0.5em;
    line-height: 1.5;
  }
  
  .checklist li i {
    color: #28a745; /* grün wie im Screenshot */
    margin-top: 4px; /* Icon optisch zentrieren */
    flex-shrink: 0; /* Icon soll nicht schrumpfen */
  }
  

/* ################# Hintergrundvideo-Trenner ################# */
.space-divider {
    position: relative;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, #1c1c1c, #2e2e2e);
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Wrapper für animierte Sterne */
  .space-divider-stars-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* größer für Endloslauf */
    height: 100%;
    display: flex;
    animation: space-divider-moveStars 180s linear infinite;
    will-change: transform;
  }
  
  .space-divider-stars {
    width: 50%;
    height: 100%;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='5' cy='5' r='1' fill='white'/><circle cx='30' cy='30' r='0.8' fill='white'/><circle cx='70' cy='20' r='1.2' fill='white'/><circle cx='50' cy='60' r='0.6' fill='white'/><circle cx='80' cy='80' r='0.5' fill='white'/></svg>") repeat;
    background-size: 100px 100px;
    opacity: 0.5;
  }
  
  
  .space-divider-twinkling {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 1;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='10' cy='10' r='1' fill='white'/><circle cx='40' cy='40' r='0.7' fill='white'/><circle cx='60' cy='70' r='0.6' fill='white'/></svg>") repeat;
    animation: space-divider-twinkle 20s linear infinite;
    opacity: 0.3;
  }
  
  
  .space-divider-text {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    max-width: 100%;
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: bold;
    padding: 1rem;
  }
  
  /* Animierte Bewegung per transform */
  @keyframes space-divider-moveStars {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  
  @keyframes space-divider-twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
  }
  
  /* Optionaler unterer Wellenabschluss */
  .space-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff; /* Passe an nächste Sektion an */
    clip-path: ellipse(100% 100% at 50% 0%);
    z-index: 3;
  }
  




/*################# 1. Sektion Unterpage Wizardpixel #################*/
.webdesign-container .webdesign-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 100%;
    max-width: 1600px;
    margin: 20px auto;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    
}

.webdesign-container .webdesign-card:hover {
    transform: scale(1.0);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.webdesign-container .webdesign-card .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #007bff; /* Blau für die Überschrift */
}

.webdesign-container .webdesign-card .card-text {
    font-size: 1.1em;
    color: #000;
    line-height: 1.5;
}

.webdesign-container .contact-button-container {
    position: relative; 
    display: inline-block; 
    margin-top: -10px; 
}

.webdesign-container .contact-button {
    padding: 10px 20px; 
    font-size: 16px; 
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    color: white;
    text-decoration: none; 
    border-radius: 15px; 
    transition: transform 0.3s, box-shadow 0.3s; 
    position: relative;
    z-index: 1; 
}

.webdesign-container .contact-button:hover {
    transform: scale(1.1) rotate(3deg); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-decoration: none; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.webdesign-container .pulsating {
    animation: pulse 4s infinite; 
}

.checkmark {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #28a745;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    vertical-align: middle; 
}

.checkmark::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checklist {
    text-align: left; 
    display: inline-block; 
    margin-top: 10px; 
    margin-bottom: 20px; 
}

/* ######################### Breakpoints ######################### */

/* Mobile Geräte (max-width: 767px) */
@media (max-width: 767px) {
    .webdesign-container .webdesign-card {
        padding: 15px; /* Weniger Innenabstand auf mobilen Geräten */
        margin: 10px auto; /* Weniger Abstand zwischen den Karten */
        border-radius: 10px; /* Weniger abgerundete Ecken auf kleinen Bildschirmen */
        width: 90%; /* Box schmaler machen */
    }

    .webdesign-container .webdesign-card .card-title {
        font-size: 1.2em; /* Kleinere Schriftgröße für den Titel */
    }

    .webdesign-container .webdesign-card .card-text {
        font-size: 1em; /* Kleinere Schriftgröße für den Text */
    }

    .webdesign-container .contact-button {
        padding: 8px 16px; /* Kleinere Schaltflächen für mobile Geräte */
        font-size: 14px; /* Kleinere Schriftgröße für den Button */
    }

    .checklist {
        font-size: 0.9em; /* Kleinere Schriftgröße für die Checkliste */
    }
}

/* Tablets (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .webdesign-container .webdesign-card {
        padding: 18px; /* Etwas mehr Abstand für Tablets */
        width: 90%; /* Box schmaler machen */
    }

    .webdesign-container .webdesign-card .card-title {
        font-size: 1.4em; /* Etwas größere Schriftgröße für den Titel */
    }

    .webdesign-container .webdesign-card .card-text {
        font-size: 1.05em; /* Etwas größere Schriftgröße für den Text */
    }

    .webdesign-container .contact-button {
        padding: 10px 18px; /* Etwas größere Schaltflächen */
        font-size: 15px; /* Etwas größere Schriftgröße für den Button */
    }
}

/* Laptops (1025px bis 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .webdesign-container .webdesign-card {
        max-width: 1200px; /* Breitere Karten für Laptops */
        padding: 25px; /* Mehr Innenabstand für Laptops */
        width: 80%; /* Schmaler auf mittleren Bildschirmen */
    }

    .webdesign-container .webdesign-card .card-title {
        font-size: 1.6em; /* Größere Schriftgröße für den Titel */
    }

    .webdesign-container .webdesign-card .card-text {
        font-size: 1.1em; /* Größere Schriftgröße für den Text */
    }

    .webdesign-container .contact-button {
        padding: 12px 24px; /* Größere Schaltflächen */
        font-size: 16px; /* Größere Schriftgröße für den Button */
    }
}

/* Desktops (ab 1441px) */
@media (min-width: 1441px) {
    .webdesign-container .webdesign-card {
        max-width: 1600px; /* Maximalbreite für große Desktops */
        padding: 30px; /* Mehr Innenabstand für große Bildschirme */
        width: 75%; /* Schmaler für große Bildschirme */
    }

    .webdesign-container .webdesign-card .card-title {
        font-size: 1.8em; /* Sehr große Schriftgröße für den Titel */
    }

    .webdesign-container .webdesign-card .card-text {
        font-size: 1.2em; /* Sehr große Schriftgröße für den Text */
    }

    .webdesign-container .contact-button {
        padding: 14px 28px; /* Sehr große Schaltflächen für große Desktops */
        font-size: 18px; /* Sehr große Schriftgröße für den Button */
    }
}

/*################# <!-- 1. Sektion Unterpage Zielgruppen --> #################*/
.customzielgruppen-container {
    display: flex;
    justify-content: center; /* Zentriert das Kärtchen horizontal */
    align-items: center; /* Zentriert das Kärtchen vertikal */
    padding: 20px; /* Abstand um den Container */
    width: 100%; /* Volle Breite */
    background-color: #f8f9fa; /* Helles Hintergrund für die Sektion */
}

/* Stile für die Card mit einer eigenen ID */
#customCardzielgruppen {
    background-color: #ffffff;
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    padding: 40px;
    width: 100%;
    max-width: 1600px;
    margin: 20px auto; /* Zentrierung */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s ease-out; /* Animation beim Laden der Card */
}

/* Hover-Effekt für die Card */


/* Die Animation für das Einblenden der Card */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stile für den Card-Titel */
#customCardzielgruppen .card-title {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: #007bff;
    margin-bottom: 20px;
    position: relative;
}

/* Icon für den Titel mit Animation */
#customCardzielgruppen .card-title i {
    font-size: 1.2em;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    color: #FF8C00; /* Orange für das Icon */
}

/* Hover-Effekt für das Icon des Card-Titels */
#customCardzielgruppen .card-title:hover i {
    transform: translateY(-5px); /* Icon wird beim Hover nach oben verschoben */
}

/* Stile für den Card-Text */
#customCardzielgruppen .card-text {
    font-family: sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    color: #000;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Stile für die Checkliste */
#customCardzielgruppen .checklist {
    text-align: left;
    margin-top: 20px;
}

/* Stile für die Liste mit den Checkmarks */
#customCardzielgruppen .checklist p {
    font-size: 1.1em;
    color: #333 !important; /* Dunkleres Grau für den Text */
    margin-bottom: 10px;
}

/* Sicherstellen, dass die Textfarbe korrekt angewendet wird */
#customCardzielgruppen .checklist p {
    color: #444444 !important; /* Dunkles Grau für den Text, noch stärker als #333 */
}

/* Stile für die grünen Häkchen */
#customCardzielgruppen .checklist .fas {
    color: #28a745; /* Grünes Häkchen */
    margin-right: 10px;
    transition: transform 0.3s ease;
}

/* Hover-Effekt für die Checkmarks */
#customCardzielgruppen .checklist .fas:hover {
    transform: translateX(5px); /* Checkmark wird nach rechts verschoben */
}

/* Stile für den Button-Container */
#customCardzielgruppen .contact-button-container {
    position: relative;
    display: inline-block;
    margin-top: 30px;
}

/* Stile für den Kontakt-Button */
#customCardzielgruppen .contact-button {
    padding: 12px 25px;
    font-size: 16px;
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    color: white;
    text-decoration: none;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}

/* Hover-Effekt für den Button */
#customCardzielgruppen .contact-button:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-decoration: none;
}



/*################# <!-- 1. Sektion Unterpage Sitemap --> #################*/
.main-content {
    padding: 40px 20px;
    background: #fff;
    margin: 40px auto;
    max-width: 1200px;
    width: 93%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    overflow: hidden;
}

/* Stil für die Hauptüberschrift */
.main-content h1 {
    font-size: 2.5rem;
    color: rgb(0, 123, 255);
    margin-bottom: 20px;
    font-weight: bold;
}

/* Stil für Unterüberschriften */
.main-content h2 {
    font-size: 1.8rem;
    color: #000000;
    margin-top: 30px;
    margin-bottom: 10px;
    font-weight: normal;
}


/* Stil für den Text in Absätzen */
.main-content p {
    font-size: 1rem;
    color: #000000;
    margin-bottom: 20px;
}

/* Links innerhalb von main-content */
.main-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.main-content a:hover {
    text-decoration: underline;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .main-content {
        padding: 20px;
        margin: 20px 10px;
    }

    .main-content h1 {
        font-size: 2rem;
    }

    .main-content h2 {
        font-size: 1.5rem;
    }

    .main-content p {
        font-size: 0.95rem;
    }
}

/*################# <!-- 1. Sektion Unterpage AGB --> #################*/
.mainAGB-content {
    padding: 40px 20px;
    background: #fff;
    margin: 40px auto;
    max-width: 1200px;
    width: 93%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    overflow: hidden;
    /* text-align entfernt, damit Text linksbündig ist */
}

/* Stil für die Hauptüberschrift */
.mainAGB-content h1 {
    font-size: 2.5rem;
    color: rgb(0, 123, 255);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center; /* H1 zentriert */
}

/* Stil für Unterüberschriften */
.mainAGB-content h2 {
    font-size: 1.8rem;
    color: #000000;
    margin-top: 40px;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: left;
}

/* Stil für den Text in Absätzen */
.mainAGB-content p {
    font-size: 1rem;
    color: #000000;
    margin-bottom: 20px;
    text-align: left; /* Text linksbündig */
}

/* Links innerhalb von main-content */
.mainAGB-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.mainAGB-content a:hover {
    text-decoration: underline;
}
.footnotes {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal zentrieren */
    text-align: center;
    margin-top: 40px;
    gap: 5px; /* Abstand zwischen den Zeilen */
    font-size: 0.95rem;
    color: #666;
    line-height: 0;
}



/* Mobile Ansicht */
@media (max-width: 768px) {
    .mainAGB-content {
        padding: 20px;
        margin: 20px 10px;
    }

    .mainAGB-content h1 {
        font-size: 2rem;
    }

    .mainAGB-content h2 {
        font-size: 1.5rem;
    }

    .mainAGB-content p {
        font-size: 0.95rem;
    }
}

/*################# <!-- 1. Sektion Unterpage Datenschutz --> #################*/
.mainDatenschutz-content {
    padding: 40px 20px;
    background: #fff;
    margin: 40px auto;
    max-width: 1200px;
    width: 93%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    overflow: hidden;
    /* text-align entfernt, damit Text linksbündig ist */
}

/* Stil für die Hauptüberschrift */
.mainDatenschutz-content h1 {
    font-size: 2.5rem;
    color: rgb(0, 123, 255);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center; /* H1 zentriert */
}

/* Stil für Unterüberschriften */
.mainDatenschutz-content h2 {
    font-size: 1.8rem;
    color: #000000;
    margin-top: 40px;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: left;
}
.mainDatenschutz-content h3 {
    font-size: 1.3rem;
    margin-top: 30px; /* Abstand nach oben */
    margin-bottom: 10px; /* Abstand nach unten */
}


/* Stil für den Text in Absätzen */
.mainDatenschutz-content p {
    font-size: 1rem;
    color: #000000;
    margin-bottom: 20px;
    text-align: left; /* Text linksbündig */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Links innerhalb von main-content */
.mainDatenschutz-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.mainDatenschutz-content a:hover {
    text-decoration: underline;
}

.mainDatenschutz-content ol,
.mainDatenschutz-content ul {
    padding-left: 2em; /* sorgt für Abstand für Nummern/Aufzählungszeichen */
    margin: 0 0 20px 0;
}

.mainDatenschutz-content li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 0.5em;
    text-indent: -0.5em; /* sorgt dafür, dass der Text nicht unter der Zahl startet */
}

.kontaktblock p {
    margin: 1px 0;
    padding: 0;
}


.footnotes {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal zentrieren */
    text-align: center;
    margin-top: 40px;
    gap: 5px; /* Abstand zwischen den Zeilen */
    font-size: 0.95rem;
    color: #666;
    line-height: 0;
}

.footnotes p {
    margin: 1px 0;
    padding: 0;
    line-height: 1.2;
}




/* Mobile Ansicht */
@media (max-width: 768px) {
    .mainDatenschutz-content {
        padding: 20px;
        margin: 20px 10px;
    }

    .mainDatenschutz-content h1 {
        font-size: 2rem;
    }

    .mainDatenschutz-content h2 {
        font-size: 1.5rem;
    }

    .mainDatenschutz-content p {
        font-size: 0.95rem;
    }
}

/*################# <!-- 1. Sektion Unterpage Impressum --> #################*/
.mainImpressum-content {
    padding: 40px 20px;
    background: #fff;
    margin: 40px auto;
    max-width: 1200px;
    width: 93%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    overflow: hidden;
    /* text-align entfernt, damit Text linksbündig ist */
}

/* Stil für die Hauptüberschrift */
.mainImpressum-content h1 {
    font-size: 2.5rem;
    color: rgb(0, 123, 255);
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center; /* H1 zentriert */
}

/* Stil für Unterüberschriften */
.mainImpressum-content h2 {
    font-size: 1.8rem;
    color: #000000;
    margin-top: 40px;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: left;
}
.mainImpressum-content h3 {
    font-size: 1.3rem;
    margin-top: 30px; /* Abstand nach oben */
    margin-bottom: 10px; /* Abstand nach unten */
}


/* Stil für den Text in Absätzen */
.mainImpressum-content p {
    font-size: 1rem;
    color: #000000;
    margin-bottom: 20px;
    text-align: left; /* Text linksbündig */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Links innerhalb von main-content */
.mainImpressum-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.mainImpressum-content a:hover {
    text-decoration: underline;
}

.mainImpressum-content ol,
.mainImpressum-content ul {
    padding-left: 2em; /* sorgt für Abstand für Nummern/Aufzählungszeichen */
    margin: 0 0 20px 0;
}

.mainImpressum-content li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 0.5em;
    text-indent: -0.5em; /* sorgt dafür, dass der Text nicht unter der Zahl startet */
}

.kontaktblock p {
    margin: 1px 0;
    padding: 0;
}


.footnotes {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal zentrieren */
    text-align: center;
    margin-top: 40px;
    gap: 5px; /* Abstand zwischen den Zeilen */
    font-size: 0.95rem;
    color: #666;
    line-height: 0;
}

.footnotes p {
    margin: 1px 0;
    padding: 0;
    line-height: 1.2;
}




/* Mobile Ansicht */
@media (max-width: 768px) {
    .mainDatenschutz-content {
        padding: 20px;
        margin: 20px 10px;
    }

    .mainDatenschutz-content h1 {
        font-size: 2rem;
    }

    .mainDatenschutz-content h2 {
        font-size: 1.5rem;
    }

    .mainDatenschutz-content p {
        font-size: 0.95rem;
    }
}



/*################# <!-- 1. Sektion Unterpage Kontakt --> #################*/
.contact-card, .left-section {
    border-radius: 15px; /* Gleiche runde Ecken */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Gleicher Schatten */
    padding: 20px; /* Gleiche Polsterung */
    margin: 20px 0; /* Gleicher Abstand */
    background-color: white; /* Hintergrundfarbe für beide Boxen */
}
/* Überschrift in der Kontakt-Sektion anpassen */
.contact-card h1 {
    color: #007bff; /* Blau für die Überschrift */
    font-weight: 700; /* Fett (Gewicht 700) */
    text-align: center; /* Zentriert die Überschrift */
    margin-bottom: 20px; /* Optional: Abstand nach unten */
    font-family: sans-serif !important;
}



.icon {
    font-size: 24px;
    margin-right: 10px;
}

.left-section {
    border-radius: 15px 0 0 15px; /* Runde Ecken auf der linken Seite */
}

.right-section {
    border-radius: 0 15px 15px 0; /* Runde Ecken auf der rechten Seite */
}

.flex-container {
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center; /* Zentriert die Boxen */
    align-items: stretch; /* Stellt sicher, dass die Boxen gleich hoch sind */
}

/* Styling für die Pflicht-Sternchen */
.required {
    color: red;  /* Rote Farbe */
    font-weight: bold;  /* Optional: Fettdruck für bessere Sichtbarkeit */
}
/* Anfrage absenden Button leicht nach unten verschieben */
/* Standard Button-Stil */
button.btn-primary {
    margin-top: 15px; /* Abstand nach oben */
    background-color: #007bff; /* Standardfarbe */
    border-color: #007bff; /* Standard Randfarbe */
    color: white; /* Textfarbe */
    outline: none; /* Kein Standard-Rand bei Fokus */
    box-shadow: none; /* Kein Standard-Schlagschatten */
}

/* Entfernen der Standard-Veränderungen beim Fokussieren */
button.btn-primary:focus, 
button.btn-primary:focus-visible {
    outline: none; 
    box-shadow: none; 
    background-color: #007bff; 
    border-color: #007bff; 
}

/* Entfernen der Veränderungen beim Klicken (Active-Zustand) */
button.btn-primary:active {
    background-color: #007bff; 
    border-color: #007bff; 
    box-shadow: none; 
}

/* Optional: Hover-Effekt */
button.btn-primary:hover {
    background-color: #0056b3; 
    border-color: #0056b3; 
    box-shadow: none; 
}
/* Abstand unter der Überschrift "Wie möchtest du uns ansprechen?" */
.card-title {
    margin-bottom: 30px; /* Hier den Abstand nach Bedarf anpassen */
}

/* Optional: Abstand zwischen den einzelnen Kontaktoptionen */
.d-flex.mb-3 {
    margin-top: 10px; /* Abstand zu den nachfolgenden Elementen */
}

/* Flexbox anpassen, um den Abstand und das Layout für Kontaktoptionen zu optimieren */
.flex-container .d-flex {
    margin-top: 15px; /* Abstand nach oben für jede Box */
}

/* Optional: Weitere Anpassungen für die Icons */
.icon {
    margin-right: 10px; /* Etwas Abstand zwischen den Icons und dem Text */
}


/* Benachrichtigungsanzeige für das Kontaktformular für den User */

#form-status {
    margin-top: 10px; 
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
    display: none; 
}

.alert-success {
    background-color: #4CAF50;
    color: white;
}

.alert-danger {
    background-color: #f44336;
    color: white;
}
textarea {
    resize: none; /* Deaktiviert die Möglichkeit, die Größe zu verändern */
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}






/*################# 1. Sektion Unterpage Branchenlösungen #################*/

.custom-webdesign-container .custom-webdesign-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 100%;
    max-width: 1600px;
    margin: 20px auto;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.custom-webdesign-container .custom-webdesign-card:hover {
    transform: scale(1.0);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.custom-webdesign-container .custom-webdesign-card .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #007bff; /* Blau für die Überschrift */
}

.custom-webdesign-container .custom-webdesign-card .card-text {
    font-size: 1.1em;
    color: #000;
    line-height: 1.5;
}

.custom-webdesign-container .contact-button-container {
    position: relative; 
    display: inline-block; 
    margin-top: -10px; 
}

.custom-webdesign-container .contact-button {
    padding: 10px 20px; 
    font-size: 16px; 
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    color: white;
    text-decoration: none; 
    border-radius: 15px; 
    transition: transform 0.3s, box-shadow 0.3s; 
    position: relative;
    z-index: 1; 
}

.custom-webdesign-container .contact-button:hover {
    transform: scale(1.1) rotate(3deg); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-decoration: none; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.custom-webdesign-container .pulsating {
    animation: pulse 4s infinite; 
}

.checkmark {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #28a745;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    vertical-align: middle; 
}

.checkmark::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checklist {
    text-align: left; 
    display: inline-block; 
    margin-top: 10px; 
    margin-bottom: 20px; 
}

/* ######################### Breakpoints ######################### */

/* Mobile Geräte (max-width: 767px) */
@media (max-width: 767px) {
    .custom-webdesign-container .custom-webdesign-card {
        padding: 15px; /* Weniger Innenabstand auf mobilen Geräten */
        margin: 10px auto; /* Weniger Abstand zwischen den Karten */
        border-radius: 10px; /* Weniger abgerundete Ecken auf kleinen Bildschirmen */
        width: 90%; /* Box schmaler machen */
    }

    .custom-webdesign-container .custom-webdesign-card .card-title {
        font-size: 1.2em; /* Kleinere Schriftgröße für den Titel */
    }

    .custom-webdesign-container .custom-webdesign-card .card-text {
        font-size: 1em; /* Kleinere Schriftgröße für den Text */
    }

    .custom-webdesign-container .contact-button {
        padding: 8px 16px; /* Kleinere Schaltflächen für mobile Geräte */
        font-size: 14px; /* Kleinere Schriftgröße für den Button */
    }

    .checklist {
        font-size: 0.9em; /* Kleinere Schriftgröße für die Checkliste */
    }
}

/* Tablets (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .custom-webdesign-container .custom-webdesign-card {
        padding: 18px; /* Etwas mehr Abstand für Tablets */
        width: 90%; /* Box schmaler machen */
    }

    .custom-webdesign-container .custom-webdesign-card .card-title {
        font-size: 1.4em; /* Etwas größere Schriftgröße für den Titel */
    }

    .custom-webdesign-container .custom-webdesign-card .card-text {
        font-size: 1.05em; /* Etwas größere Schriftgröße für den Text */
    }

    .custom-webdesign-container .contact-button {
        padding: 10px 18px; /* Etwas größere Schaltflächen */
        font-size: 15px; /* Etwas größere Schriftgröße für den Button */
    }
}

/* Laptops (1025px bis 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .custom-webdesign-container .custom-webdesign-card {
        max-width: 1200px; /* Breitere Karten für Laptops */
        padding: 25px; /* Mehr Innenabstand für Laptops */
        width: 80%; /* Schmaler auf mittleren Bildschirmen */
    }

    .custom-webdesign-container .custom-webdesign-card .card-title {
        font-size: 1.6em; /* Größere Schriftgröße für den Titel */
    }

    .custom-webdesign-container .custom-webdesign-card .card-text {
        font-size: 1.1em; /* Größere Schriftgröße für den Text */
    }

    .custom-webdesign-container .contact-button {
        padding: 12px 24px; /* Größere Schaltflächen */
        font-size: 16px; /* Größere Schriftgröße für den Button */
    }
}

/* Desktops (ab 1441px) */
@media (min-width: 1441px) {
    .custom-webdesign-container .custom-webdesign-card {
        max-width: 1600px; /* Maximalbreite für große Desktops */
        padding: 30px; /* Mehr Innenabstand für große Bildschirme */
        width: 75%; /* Schmaler für große Bildschirme */
    }

    .custom-webdesign-container .custom-webdesign-card .card-title {
        font-size: 1.8em; /* Sehr große Schriftgröße für den Titel */
    }

    .custom-webdesign-container .custom-webdesign-card .card-text {
        font-size: 1.2em; /* Sehr große Schriftgröße für den Text */
    }

    .custom-webdesign-container .contact-button {
        padding: 14px 28px; /* Sehr große Schaltflächen für große Desktops */
        font-size: 18px; /* Sehr große Schriftgröße für den Button */
    }
}







/*################# <!-- 4. Sektion --> #################*/
/* Container Styles */
.card-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px; /* Abstand zwischen den Karten */
}

/* Card Styles */
.card-container .card {
    --border-radius: 1rem;
    --bg-color: #393e41;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 300px; /* Standardbreite für Desktop */
    min-height: 300px; /* Mindesthöhe für Karten */
    background: var(--bg-color);
    border-radius: var(--border-radius);
    color: #fff;
    padding: 30px; /* Padding */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    isolation: isolate;
    overflow: hidden; /* Verhindert Überlaufen von Inhalten */
}

/* Animation und Hover-Effekte */
.card-container .card::before,
.card-container .card::after {
    content: '';
    position: absolute;
}

.card-container .card::before {
    width: 200%;
    height: 200%;
    background-image: conic-gradient(var(--color) 0deg,
            transparent 60deg, transparent 180deg, var(--color) 180deg,
            transparent 240deg);
    inset: -50%;
    z-index: -2;
    animation: borderanimation 4s linear infinite;
}

.card-container .card:hover::before {
    animation-play-state: paused;
}

@keyframes borderanimation {
    to {
        transform: rotate(-360deg);
    }
}

.card-container .card::after {
    --inset: 4px;
    background: #111;
    inset: var(--inset);
    border-radius: calc(var(--border-radius) - var(--inset));
    z-index: -1;
    transition: all 0.3s linear;
}

.card-container .card:hover::after {
    background: var(--bg-color);
}

.card-container .card i {
    font-size: 3rem; /* Schriftgröße für Icons */
    color: transparent;
    -webkit-text-stroke: thin var(--color);
}

.card-container .card:hover i {
    color: var(--color);
    -webkit-text-stroke-width: 0;
}

.card-container .card .title {
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-block: 1.5rem;
    color: var(--color);
}

.card-container .card .description {
    line-height: 1.5rem;
    text-align: center;
    opacity: 0.75;
    flex-grow: 1; /* Beschreibung wächst, um Platz einzunehmen */
}
/* Stil für die h2-Überschrift innerhalb der Kunst des Webdesigns Sektion */
#kunst-des-webdesigns h2.section-title {
    color: #007bff; /* Blau für die Überschrift */
    font-weight: 700; /* Schriftgewicht 700 */
    text-align: center; /* Zentriert die Überschrift */
    margin-bottom: 10px; /* Optional: Abstand nach unten für bessere Struktur */
}


/* ################# Responsiv für größere Bildschirme (ab 1024px) ################# */
@media screen and (min-width: 1024px) {
    .card-container {
        flex-direction: row; /* Karten nebeneinander */
        justify-content: center; /* Karten werden zentral ausgerichtet */
        gap: 20px; /* Abstand zwischen den Karten */
        padding: 0 20px; /* Abstand von den Seiten des Containers */
    }

    .card-container .card {
        width: calc(33.33% - 40px); /* Jede Karte nimmt ein Drittel der Breite ein und berücksichtigt den Abstand */
    }
}


/* ################# Responsiv für Bildschirme von 821px bis 1024px ################# */
@media screen and (max-width: 1024px) and (min-width: 821px) {
    .card-container {
        flex-direction: row; /* Karten nebeneinander */
        justify-content: center; /* Zentriert die Karten */
    }

    .card-container .card {
        width: calc(30% - 30px); /* Jede Karte nimmt 50% der Breite ein */
    }
}

/* ################# Responsiv für 768px bis 820px ################# */
@media screen and (max-width: 820px) {
    .card-container {
        flex-direction: column;
        align-items: center; /* Zentriert die Karten */
    }

    .card-container .card {
        width: 90%; /* Kartenbreite auf 90% der Containerbreite */
        margin-bottom: 20px; /* Abstand zwischen den Karten */
    }
}

/* ################# Responsiv für Bildschirme von 853px und kleiner ################# */
@media screen and (max-width: 853px) {
    .card-container {
        flex-direction: row; /* Karten nebeneinander */
        justify-content: center; /* Karten werden zentral ausgerichtet */
        gap: 20px; /* Abstand zwischen den Karten */
        padding: 0 20px; /* Abstand von den Seiten des Containers */
    }

    .card-container .card {
        width: 90%; /* Kartenbreite auf 90% der Containerbreite */
        margin-bottom: 20px; /* Abstand zwischen den Karten */
    }
}

/* ################# Responsiv für kleinere Bildschirme (max-width: 768px) ################# */
@media screen and (max-width: 768px) {
    .card-container {
        flex-direction: column;
        align-items: center; /* Zentriert die Karten */
    }

    .card-container .card {
        width: 90%; /* Kartenbreite auf 90% der Containerbreite */
        margin-bottom: 20px; /* Abstand zwischen den Karten */
    }
}




/*################# 5. Sektion: Unser Angebot #################*/
/* Animation: Bounce bei Hover */
.icon-bounce-on-hover {
    transition: transform 0.3s ease;
    display: inline-block;
  }
  
  .icon-bounce-on-hover:hover {
    animation: bounce-icon 0.5s;
  }
  
  @keyframes bounce-icon {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-8px); }
    60%  { transform: translateY(4px); }
    100% { transform: translateY(0); }
  }
  
  /* Container-Zentrierung */
  #cardContainerCustom5 {
      margin: 0 auto;
      padding: 0 10px;
  }
  
  /* Card-Styling */
  #customCardCustom5 {
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      padding: 30px;
      width: 100%;
      max-width: 1200px;
      margin: 20px auto;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
  }
  
  /* Hover-Effekt für Card */
  #customCardCustom5:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  }
  
  /* Titel */
  #customCardCustom5 .card-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: #007bff;
      margin-bottom: 1rem;
  }
  
  /* Textinhalt */
  #customCardCustom5 .card-text {
      font-size: 1rem;
      color: #333;
      margin-bottom: 0.75rem;
  }
  
  /* Kontaktbutton (jetzt genauso rund wie in der 1. Sektion) */
  #customCardCustom5 .contact-button {
      padding: 6px 12px; /* Gleiche Padding wie in der 1. Sektion */
      font-size: 16px;
      background: linear-gradient(45deg, #FF0080, #FF8C00); /* Farbverlauf */
      color: white;
      text-decoration: none;
      border-radius: 30px; /* Jetzt auf 30px für sehr runde Ecken (wie in der 1. Sektion) */
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
      position: relative;
      z-index: 1;
  }
  
  /* Hover-Effekt für den Button (Mit der gleichen Animation wie in der 1. Sektion) */
  #customCardCustom5 .contact-button:hover {
      transform: scale(1.1) rotate(3deg); /* Vergrößern und Drehen bei Hover */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Schatten */
      text-decoration: none;
  }
  
  /* Gradient Text für Icons oder Titel */
  .text-gradient {
      background: linear-gradient(45deg, #FF0080, #FF8C00);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
  }
  
  /* Sektion-Hintergrund */
  .angebot-section {
      background: linear-gradient(to bottom right, #f3f5fa, #ffffff);
  }
  
  /* Responsive Optimierung */
  @media (max-width: 768px) {
      #customCardCustom5 {
          padding: 20px;
      }
  
      #customCardCustom5 .card-title {
          font-size: 1.3rem;
      }
  
      #customCardCustom5 .card-text {
          font-size: 0.95rem;
      }
  
      .contact-button {
          font-size: 16px;
          padding: 10px 20px;
      }
  }
  



/*################# <!-- 6. Sektion --> #################*/
.video-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
}

.video-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.responsive-video {
    width: 50%; /* Standardbreite für größere Bildschirme */
}

@media (max-width: 768px) { /* Anpassung für mobile Geräte */
    .responsive-video {
        width: 90%; /* Breite für mobile Geräte */
    }
}

.video-thumbnail {
    width: 50%; /* 50% der Breite */
    height: auto; /* Höhe automatisch anpassen */
    aspect-ratio: 16 / 9; /* 16:9 Seitenverhältnis */
    cursor: pointer; /* Zeigt an, dass das Bild anklickbar ist */
    border-radius: 8px; /* Optionale Abrundung der Ecken */
    transition: transform 0.3s; /* Optionale Animation beim Hover */
}

.video-thumbnail:hover {
    transform: scale(1.05); /* Optionales Zoom bei Hover */
}


/*################# 7. Sektion #################*/
/* Container Styles */

.my-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Boxen */
    width: 100%; /* Sicherstellen, dass der Container die volle Breite einnimmt */
    padding: 0 10px; /* Padding für kleinere Bildschirme */
}

/* Card Styles */
.my-container .card {
    --border-radius: 1rem;
    --bg-color: #393e41;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 0 0 100%; /* Standardmäßig 100% Breite für kleinere Bildschirme */
    min-height: 180px; /* Etwas mehr Höhe, damit der Text nicht zu gedrängt aussieht */
    max-height: 300px;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    color: #fff;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.3s;
}

/* Hover-Effekt der Boxen */
.my-container .card:hover {
    transform: scale(1.05);
}

/* Hover-Effekte für den Rand und den Hintergrund */
.my-container .card::before,
.my-container .card::after {
    content: '';
    position: absolute;
}

.my-container .card::before {
    width: 200%;
    height: 200%;
    background-image: conic-gradient(var(--color) 0deg,
            transparent 60deg, transparent 180deg, var(--color) 180deg,
            transparent 240deg);
    inset: -50%;
    z-index: -2;
    animation: borderanimation 4s linear infinite;
}

.my-container .card:hover::before {
    animation-play-state: paused;
}

@keyframes borderanimation {
    to {
        transform: rotate(-360deg);
    }
}

.my-container .card::after {
    --inset: 4px;
    background: #111;
    inset: var(--inset);
    border-radius: calc(var(--border-radius) - var(--inset));
    z-index: -1;
    transition: all 0.3s linear;
}

.my-container .card:hover::after {
    background: var(--bg-color);
}

/* Icon-Styling */
.my-container .card i {
    font-size: 2.5rem; /* Größeres Icon für bessere Sichtbarkeit */
    color: transparent;
    -webkit-text-stroke: thin var(--color);
}

.my-container .card:hover i {
    color: var(--color);
    -webkit-text-stroke-width: 0;
}

/* Title Styling */
.my-container .card .title {
    text-align: center;
    font-size: 1.4rem; /* Größerer Text für den Titel */
    line-height: 1.5rem;
    margin-block: 1.5rem 1rem;
    color: var(--color);
    flex-grow: 0; /* Verhindert, dass der Titel den verfügbaren Platz dehnt */
    width: 100%; /* Sorgt dafür, dass der Text den gesamten Platz nutzt */
}

/* Description Styling */
.my-container .card .desc {
    line-height: 1.5rem;
    text-align: center;
    opacity: 0.75;
    flex-grow: 1;
    font-size: 1.2rem; /* Kleinere Schrift für die Beschreibung */
    margin-bottom: 1rem; /* Abstand zum unteren Rand */
    padding: 0 10px; /* Padding für bessere Lesbarkeit */
}


/*################# RESPONSIVE STILE #################*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .my-container .card {
        flex: 0 0 100%; /* 100% Breite auf kleinen Bildschirmen */
        min-height: 200px; /* Höhere Cards auf kleinen Bildschirmen */
    }

    .my-container .card .title {
        font-size: 1rem; /* Kleinere Schrift für die Titel */
    }

    .my-container .card .desc {
        font-size: 0.8rem; /* Kleinere Beschreibung */
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    .my-container .card {
        flex: 0 0 48%; /* Zwei Spalten */
        min-height: 200px; /* Höhere Cards */
    }

    .my-container .card .title {
        font-size: 1.1rem;
    }

    .my-container .card .desc {
        font-size: 1rem;
    }
}

/* Medium devices (landscape tablets and some iPads, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .my-container .card {
        flex: 0 0 48%; /* Zwei Spalten */
    }

    .my-container .card .title {
        font-size: 1.2rem;
    }

    .my-container .card .desc {
        font-size: 1.1rem;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .my-container .card {
        flex: 0 0 23%; /* Vier Spalten */
    }

    .my-container .card .title {
        font-size: 1.3rem;
    }

    .my-container .card .desc {
        font-size: 1.2rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .my-container .card {
        flex: 0 0 23%; /* Vier Spalten */
    }

    .my-container .card .title {
        font-size: 1.4rem;
    }

    .my-container .card .desc {
        font-size: 0.9rem;
    }
}


/*################# 8. Sektion: Die Bedeutung einer professionellen Internetpräsenz #################*/
/* Container-Zentrierung */
#cardContainerCustom8 {
    margin: 0 auto;
    padding: 0 10px;
}

/* Card-Styling */
#customCardCustom8 {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

/* Hover-Effekt für Card */
#customCardCustom8:hover {
    transform: scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Titel */
#customCardCustom8 .card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 1rem;
}

/* Textinhalt */
#customCardCustom8 .card-text {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.75rem;
}

/* Kontaktbutton  */
#customCardCustom8 .contact-button {
    padding: 12px 25px; 
    font-size: 16px;
    background: linear-gradient(45deg, #FF0080, #FF8C00); /* Farbverlauf */
    color: white;
    text-decoration: none;
    border-radius: 30px; /* Jetzt auf 30px für runde Ecken (wie in der 1. Sektion) */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Hover-Effekt für den Button */
#customCardCustom8 .contact-button:hover {
    transform: scale(1.1) rotate(3deg); /* Vergrößern und Drehen bei Hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Schatten */
    text-decoration: none;
}

/* Gradient Text für Icons oder Titel */
.text-gradient {
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Sektion-Hintergrund */
.preise-section {
    background: linear-gradient(to bottom right, #f3f5fa, #ffffff);
}

/* Responsive Optimierung */
@media (max-width: 768px) {
    #customCardCustom8 {
        padding: 20px;
    }

    #customCardCustom8 .card-title {
        font-size: 1.3rem;
    }

    #customCardCustom8 .card-text {
        font-size: 0.95rem;
    }

    .contact-button {
        font-size: 16px;
        padding: 10px 20px;
    }
}




/*################# 9.Sektion #################*/
#pricingTables.body {
    background-color: #181828;
    color: #ffffff; /* Schriftfarbe auf Weiß setzen */
  }
  
  #mainContainer {
    background-image: url("images/Price-Table-Background.jpg");
    background-color: #181828;
    height: 100%;
    width: 100%;
    padding-bottom: 50px;
    overflow: hidden; /* Hinzugefügt */
}

  
#pricingTables .titles-h2 {
    margin-top: 0.5em;
    margin-bottom: 1.4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: inherit;
    color: #ffffff; /* Titelfarbe auf Weiß setzen */
    font-size: 38px;
  }
  
  #pricingTables .pricing_row_title,
  #pricingTables .pricing-row span,
  #pricingTables .pricing-cost,
  #pricingTables .time {
    color: #ffffff; /* Preis-, Titel- und Zeitfarbe auf Weiß setzen */
  }
  
  #pricingTables .margin-body {
    position: relative;
    width: 90%;
    box-sizing: border-box;
    margin: auto;
  }
  
  /* Media Query für Tablets */
  @media (max-width: 768px) {
    #pricingTables .pricing-column-wrapper {
      width: 100%; /* Vollständige Breite für Tablets */
      margin-bottom: 20px; /* Abstand zwischen den Preispaketen */
    }
  
    #pricingTables .row {
      display: flex;
      flex-direction: column; /* Spalten untereinander anordnen */
      align-items: center; /* Zentrieren der Spalten */
    }
  }

    /* Media Query für Tablets */
    @media (min-width: 820px) and (max-width: 1024px) {
        #pricingTables .pricing-column-wrapper {
          width: 100%; /* Vollständige Breite für Tablets */
          margin-bottom: 20px; /* Abstand zwischen den Preispaketen */
        }
      
        #pricingTables .row {
          display: flex;
          flex-direction: column; /* Spalten untereinander anordnen */
          align-items: center; /* Zentrieren der Spalten */
        }
      }
  
  /* Style für den monatlichen Kosten-Button */
  #pricingTables .monthly-cost-button {
    background-color: #3b3b3b;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin: 15px 0;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  
  #pricingTables .monthly-cost-button:hover {
    background-color: #00bcd4;
  }

  
  
  #pricingTables .pricing-column {
    position: relative; /* Füge relative Positionierung hinzu */
    overflow: hidden;
    /* Restliche Stile bleiben unverändert */
  }
  
 .bestseller-badge {
    position: absolute; /* Positionierung */
    top: 10px; /* Abstand vom oberen Rand der Preis Spalte */
    right: 10px; /* Abstand vom rechten Rand der Preis Spalte */
    background-color: #ff9800; /* Farbe des Badges */
    color: white; /* Schriftfarbe */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 20px; /* Abgerundete Ecken */
    font-size: 14px; /* Schriftgröße */
    font-weight: bold; /* Fettdruck */
    text-transform: uppercase; /* Großbuchstaben */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für 3D-Effekt */
    z-index: 10; /* Sicherstellen, dass der Badge oben angezeigt wird */
  }
  


  /* Rest des CSS bleibt unverändert */
  
  
  
  #pricingTables .mystylethird
  {
  background-image: url("images/Price-Table-Background2.webp");
  }
  /*************header*******/
  
  #pricingTables .main-header {
    top: 0;
    left: 0;
    z-index: 20;
    -webkit-transform: translate3d(0, 0, 0); /* Für WebKit-Browser */
    transform: translate3d(0, 0, 0); /* Standard-Eigenschaft für alle anderen Browser */
    height: 70px;
    width: 100%;
    bottom: inherit;
    text-align: center;
    background: rgba(28, 31, 47, 0.16);
    overflow: hidden;
    border: 1px solid #2e344d;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    box-shadow: 10px 10px 36px rgba(0, 0, 0, 0.5), -13px -13px 23px rgba(255, 255, 255, 0.03);
    border-width: 1px 0 0 1px;
}

  
#pricingTables .folio-btn {
      position: absolute;
      bottom: 0;
      background: rgba(255, 255, 255, 0.03);
      border-top: 1px solid rgba(255,255,255,0.1);
      right: 0;
      height: 70px;
      width: 70px;
  }
  
  #pricingTables .folio-btn-item {
  position: absolute;
      width: 40px;
      height: 40px;
      left: 15px;
      top: 15px;
  }
  
  #pricingTables .folio-btn-dot {
      float: left;
      width: 33.3%;
      height: 33.3%;
      position: relative;
  }
  
  #pricingTables.folio-btn-dot:before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 4px;
      height: 4px;
      margin: -2px 0 0 -2px;
      border-radius: 50%;
      transition: all 300ms linear;
      transform: scale(1.0);
  }
  
  #pricingTables .folio-btn-dot:before
  {
    background: #00BCD4;
  }
  
  #pricingTables .folio-btn:hover .folio-btn-dot:first-child:before, .folio-btn:hover .folio-btn-dot:nth-child(3):before, .folio-btn:hover .folio-btn-dot:nth-child(4):before, .folio-btn:hover .folio-btn-dot:nth-child(8):before {
      transform: scale(1.8);
      opacity: 0.5;
  }
  
  
  /***social***/
  #pricingTables .header-social {
  position: absolute;
      z-index: 20;
      width: auto;
      bottom: 17px;
      right: 90px;
      padding: 0;
      min-width: 140px;
      box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
      border-width: 1px 0px 0px 1px;
      border-style: solid;
      border-color: #2e344d;
  }
  
  #pricingTables .header-social:before
  {
    background: #00BCD4;
  }
  
  #pricingTables .header-social:before {
      content: '';
      position: absolute;
      left: 50%;
      top: -3px;
      width: 36px;
      margin-left: -18px;
      height: 6px;
  }
  
  #pricingTables .header-social li {
      display: block;
      float: left;
      margin-top: 0;
  }
  
  #pricingTables .header-social li a {
      width: 36px;
      height: 36px;
      line-height: 36px;
      display: inline-block;
      font-size: 12px;
      border-style: solid;
      color: rgba(255, 255, 255, 0.41);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 300ms linear;
  }
  
  #pricingTables .header-social li a:hover
  {
    color:  #00BCD4;
    cursor:pointer;
  }
  
  ul, li
  {
        border: none;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
      text-decoration: none;
      margin: 0;
      padding: 0;
  }
  
  ol, ul {
      list-style: none;
  }
  
  #pricingTables .main-header:before {
      content: '';
      position: absolute;
      left: 10px;
      width: 60px;
      height: 1px;
      bottom: 120px;
      background: rgba(255,255,255,0.1);
  }
  
  /***end*****/
  
  #pricingTables .card{    border: none;
      border-radius: 30px;
  background-color: #14edaa;}
  
  #pricingTables .wow-bg
  {
        background-color: #141421;
      border: 1px solid #2e2e4c;
      box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
    border-radius: 10px;
    margin-top: 4px;
  }
  
  
  
  #pricingTables .starsec{
    content: " ";
      position: absolute;
      width: 3px;
      height: 3px;
      background: transparent;
     box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336;
    animation: animStar 150s linear infinite;
  }
  
  #pricingTables .starthird
  {
    content: " ";
      position: absolute;
      width: 3px;
      height: 3px;
      background: transparent;
     box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336;
    animation: animStar 10s linear infinite;
  }
  
  #pricingTables .starfourth
  {
    content: " ";
      position: absolute;
      width: 2px;
      height: 2px;
      background: transparent;
     box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336;
    animation: animStar 50s linear infinite;
  }
  
  #pricingTables .starfifth
  {
    content: " ";
      position: absolute;
      width: 1px;
      height: 1px;
      background: transparent;
     box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336;
    animation: animStar 80s linear infinite;
  }
  
  @keyframes animStar
  {
    0% {
      transform: translateY(0px);
  }
    100% {
      transform: translateY(-2000px);
  }
  }
  
  
  
  #pricingTables .logn-btn
  {
       background: #1c1f2f;
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid #2e344d;
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
      /* box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); */
      box-shadow: 0px 2px 26px rgb(0,0,0,0.5), 0px 7px 13px rgba(255,255,255, 0.03);
      margin-top: 30px;
  }
  
  #pricingTables .logn-btn:hover
  {
    background-color: #1c1f2f;
      border-radius: 50px;
      min-width: 140px;
      /* box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); */
      box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
      border-width: 1px 0px 0px 1px;
      border-style: solid;
      border-color: #2e344d;
  }
  
  #pricingTables .textbox-dg
  {
    background: rgba(28, 31, 47, 0.16);
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #2e344d;
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
      /* box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); */
      box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03);
      border-width: 1px 0px 0 1px;
        margin-top: 15px;
  }
  
  
  
  #pricingTables .form-control:focus
  {
    border: 1px solid #344d2e;
    color: #495057;
      outline: 0;
      background: rgb(17, 20, 31);
      border-radius: 4px;
    transition: all 0.3s ease-in-out 0s;
      /* box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); */
      box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03);
  }
  
  
  
  #pricingTables .btn-link {
      color: #344d2e;
  }
  
  
  #pricingTables .btn-link:hover {
      color: #2b7a19;
      text-decoration: underline;
  }
  
  #pricingTables .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
      color: #807f7f;
      background-color: transparent;
      border-color: #2b7a19;
  }
  
  
  #pricingTables.btn-primary.focus, .btn-primary:focus {
      color: #fff;
      background-color: transparent;
      border-color: transparent;
      box-shadow: 0 0 0 0.2rem rgba(0, 255, 110, 0.25);
  }
  
  #pricingTables .mt-6, .my-6 {
      margin-top: 2rem !important;
  }
  
  
  #pricingTables.socila-btn
  {
    height: 40px;
      border-radius: 10%;
      width: 40px;
      box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
      border-width: 1px 0px 0px 1px;
      border-style: solid;
      border-color: rgba(255,255,255, 0.2);
      margin-right: 10px;
     
  }
  
  #pricingTables .fb-color
  {
    color:#3b5998 ;
  }
  
  #pricingTables.incolor
  {
    color:#007bff;
  }
  
  #pricingTables  .tweetcolor
  {
    color:#41a4f7;
  }
  #pricingTables .driblecolor
  {
    color:#e83e8c;
  }
  
  #pricingTables .colorboard
  {
    color: #00ffaaed;
  }
  
  
  /***********pricing table**********/
  #pricingTables .titles-h1 {
    margin-top:0.5em;
         margin-bottom: 1.4em;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: inherit;
      color: #ffffff;
      font-size: 38px;
  }
  
  #pricingTables .titles-h1 .light
  {
    font-weight: normal;
  }
  
  #pricingTables .pricing-price-wrapper
  {
        background-color: rgba(71, 71, 72, 0.2);
    border-top-right-radius: 50%;
      border-top-left-radius: 50%;
      padding-top: 45px;
    padding-bottom: 34px;
        text-align: center;
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.13), -20px -20px 60px rgba(29, 29, 29, 0.08);
  }
  #pricingTables  .pricing-price
  {
    background-color: #393b4a;
    background-color: #00bcd4;
      -webkit-box-shadow: 0px 0px 0px 10px rgba(0, 188, 212, 0.31);
      -moz-box-shadow: 0px 0px 0px 10px rgba(0, 188, 212, 0.31);
      box-shadow: 0px 0px 0px 10px rgba(0, 188, 212, 0.31);
    color: #fff;
    border-radius: 50%;
      height: 180px;
      width: 180px;
      display: inline-block;
      padding-top: 46px;
  }
  
  #pricingTables .pricing-cost {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
  }
  
  #pricingTables .pricing-table-style-4 .time {
      font-size: 24px;
      font-weight: 300;
  }
  
  #pricingTables .pricing-row-title
  {
    background-color: #303241;
    padding: 26px 10px;
        text-align: center;
  }
  
  #pricingTables .pricing_row_title {
      color: #00bcd4;
    line-height: 38px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
  }
  
  #pricingTables .pricing-table.pricing-table-style-4 .pricing-row
  {
    background-color: #393b4a;
  }
  #pricingTables .pricing-table-style-4 figure.pricing-row:first-of-type {
      padding-top: 15px;
  }
  #pricingTables .pricing-table-style-4 .pricing-row {
      padding: 5px 10px;
  }
  figure {
      margin: 0;
    display: block;
  }
  
  figure {
  display: block;
      padding-block-start: 0.4em;
      padding-block-end: 0.4em;
      padding-inline-start: 40px;
      padding-inline-end: 40px;
      background-color: rgba(51, 51, 51, 0.4117647058823529);
      text-align: left;
  }
  
  #pricingTables .pricing-row:before {
      vertical-align: middle;
     content: "\f058";
      font-family: "Font Awesome 5 Free";
      color: #00bfa5;
      text-align: center;
      padding-right: 10px;
  }
  
  #pricingTables .strike:before
  {
    content:none;
  }
  #pricingTables .pricing_row_title {
      color: #00bcd4;
  }
  
  
  #pricingTables .body
  {
    color: #5f727f;
  }
  
  #pricingTables .pricing-column
  {
    float: none;
      display: inline-block;
      text-align: left;
      vertical-align: top;
      margin-bottom: 42px;
    -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
  #pricingTables .pricing-column-wrapper {
      min-width: 271px;
    text-align: center;
  }
  
  #pricingTables .pricing-row-title {
      background-color: rgba(48, 50, 65, 0.2);
  }
  
  #pricingTables .margin-body
  {
          position: relative;
      width: 90%;
      box-sizing: border-box;
      margin: auto;
  }
  
  #pricingTables .pricing-row
  {
    border-top: 1px solid #7273723b;
  }
  
  
  #pricingTables .pricing-price-wrapper
  {
    border-top-right-radius: 50%;
      border-top-left-radius: 50%;
      padding-top: 45px;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper .pricing-price {
      background-color: #a637ec;
      -webkit-box-shadow: 0px 0px 0px 10px rgba(166, 55, 236, 0.31);
      -moz-box-shadow: 0px 0px 0px 10px rgba(166, 55, 236, 0.31);
      box-shadow: 0px 0px 0px 10px rgba(166, 55, 236, 0.31);
  }
  
  #pricingTables .strike
  {
    text-decoration: line-through;
      color: #99a9b5;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper .pricing_row_title {
      color: #a637ec;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing_row_title {
      color: #ee417c;
  }
  
  #pricingTables  .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-price {
      background-color: #ee417c;
      -webkit-box-shadow: 0px 0px 0px 10px rgba(238, 65, 124, 0.31);
      -moz-box-shadow: 0px 0px 0px 10px rgba(238, 65, 124, 0.31);
      box-shadow: 0px 0px 0px 10px rgba(238, 65, 124, 0.31);
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing_row_title {
      color: #ff994e;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-price {
      background-color: #ff994e;
      -webkit-box-shadow: 0px 0px 0px 10px rgba(255, 153, 78, 0.31);
      -moz-box-shadow: 0px 0px 0px 10px rgba(255, 153, 78, 0.31);
      box-shadow: 0px 0px 0px 10px rgba(255, 153, 78, 0.31);
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper .pricing-row:before{
      color: #a637ec;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-row:before
  {
    color: #ee417c;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-row:before
  {
        color: #ff994e;
  }
  
  
  #pricingTables .gem-button
  {
      cursor: pointer;
    border-width: 2px;
      line-height: 36px;
      border-style: solid;
      background: transparent;
      height: 40px;
      line-height: 40px;
      padding: 0 17px;
      font-size: 14px;
      margin: 25px;
      position: relative;
      display: inline-block;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      vertical-align: middle;
    
  }
  #pricingTables .gem-green
  {
    border-radius: 0px;
      border-color: rgb(0, 188, 212);
      color: rgb(0, 188, 212) !important;
  }
  #pricingTables .gem-green:hover
  {
       background-color: rgb(0, 188, 212);
      color: rgb(255, 255, 255) !important;
  }
  
  #pricingTables .gem-purpel
  {
    border-radius: 0px;
      border-color: rgb(166, 55, 236);
      color: rgb(166, 55, 236) !important;
  }
  
  #pricingTables .gem-purpel:hover
  {
       background-color: #a637ec;
      color: rgb(255, 255, 255) !important;
  }
  
  
  #pricingTables .gem-orange
  {
    border-radius: 0px;
      border-color: #ee417c;
      color: #ee417c !important;
  }
  
  #pricingTables .gem-orange:hover
  {
       background-color: #ee417c;
      color: rgb(255, 255, 255) !important;
  }
  
  #pricingTables .gem-yellow
  {
    border-radius: 0px;
      border-color: #ff994e;
      color: #ff994e !important;
  }
  #pricingTables .gem-yellow:hover
  {
       background-color: #ff994e;
      color: rgb(255, 255, 255) !important;
  }
  
  
  #pricingTables .gem-button-position-center {
      text-align: center;
      display: block;
        background-color: rgba(0, 0, 0, 0.16862745098039217);
      border-radius: 0px 0px 10px 10px;
  }
  
  #pricingTables .pricing-column:hover .pricing-price-wrapper
  {
        box-shadow: 0px 35px 80px rgba(4, 255, 236, 0.25), 0px 0px 0px rgba(10, 197, 173, 0.33);
    -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
  #pricingTables .pricing-column:hover
  {
    overflow:hidden;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper .pricing-column:hover .pricing-price-wrapper
  {
        box-shadow: 0px 35px 80px rgba(230, 2, 241, 0.34), 0px 0px 0px rgba(21, 21, 20, 0.79);
    -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-column:hover .pricing-price-wrapper
  {
         box-shadow: 0px 35px 80px rgba(255, 4, 166, 0.25), 0px 0px 0px rgba(222, 6, 84, 0.33);
    -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
  #pricingTables .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-column:hover .pricing-price-wrapper
  {
        box-shadow: 0px 35px 80px rgba(241, 139, 2, 0.34), 0px 0px 0px rgba(21, 21, 20, 0.79);
    -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
/*################# 10. Sektion: Monatliche Kosten für Webdesign #################*/
/* Container-Zentrierung */
#cardContainerCustom10 {
    margin: 0 auto;
    padding: 0 10px;
}

/* Card-Styling */
#customCardCustom10 {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    padding: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

/* Hover-Effekt für Card */
#customCardCustom10:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Titel */
#customCardCustom10 .card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 1rem;
}

/* Textinhalt */
#customCardCustom10 .card-text {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.75rem;
}

/* Kontaktbutton */
.contact-button {
    padding: 12px 28px;
    font-size: 18px;
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    color: white;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
}

.contact-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

/* Gradient Text für Icons oder Titel */
.text-gradient {
    background: linear-gradient(45deg, #FF0080, #FF8C00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Sektion-Hintergrund */
.preise-section {
    background: linear-gradient(to bottom right, #f3f5fa, #ffffff);
}

/* Responsive Optimierung */
@media (max-width: 768px) {
    #customCardCustom10 {
        padding: 20px;
    }

    #customCardCustom10 .card-title {
        font-size: 1.3rem;
    }

    #customCardCustom10 .card-text {
        font-size: 0.95rem;
    }

    .contact-button {
        font-size: 16px;
        padding: 10px 20px;
    }
}




/*################# 11. Sektion #################*/
/* Stile für den Webdesign-Card-Bereich */
.referenzen-section {
    padding-top: 60px; /* Abstand oben */
    padding-bottom: 5px; /* Abstand unten */
}

/* Container für die Referenzen-Card */
#webdesignCardContainerCustom {
    background-color: #ffffff;
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Schatten */
    max-width: 1000px; /* Maximale Breite */
    width: 100%; /* Breite auf 100% setzen */
    margin: 0 auto; /* Zentrierung */
    padding: 20px; /* Innenabstand */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt für den Hover-Effekt */
    overflow: hidden;
    text-align: center; /* Text zentrieren */
}

/* Hover-Effekt für die Webdesign-Card */
#webdesignCardContainerCustom:hover {
    transform: scale(1.05); /* Vergrößert die Card um 5% */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Verstärkt den Schatten bei Hover */
}

/* Icon für den Titel mit Animation */
.icon-bounce-on-hover {
    display: inline-block;
    transition: transform 0.3s ease; /* Weicher Übergang für das Bouncing */
}

/* Bounce-Animation für das Icon **nur beim Hover über das Icon** */
.icon-bounce-on-hover:hover {
    transform: translateY(-10px); /* Springt nach oben */
}

/* Stile für den Card-Titel */
#webdesignCardContainerCustom .card-title {
    font-size: 1.5rem; /* Größere Schrift für den Titel */
    font-weight: 700; /* Fettgedruckt */
    color: #007bff; /* Textfarbe bleibt blau */
    margin-bottom: 15px; /* Abstand unter dem Titel */
}

/* Stile für den Card-Text */
#webdesignCardContainerCustom .card-text {
    font-size: 1rem;
    color: #000 !important; /* Sicherstellen, dass der Text schwarz wird */
    margin-bottom: 0;
}

/* Optional: Anpassungen für den Text unter der Card */
#webdesignCardContainerCustom .lead {
    font-size: 1.1rem;
    color: #000 !important; /* Sicherstellen, dass der Text schwarz wird */
    font-weight: 500;
}


/* Stile für die Referenzen-Boxen im #referenzenVideos Bereich */

/* Nur die Cards im #referenzenVideos Bereich animieren */
#referenzenVideos .col-12 .card {
    background-color: #ffffff;
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Schatten */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt für den Hover-Effekt */
}

/* Hover-Effekt für die Referenz-Card-Boxen */
#referenzenVideos .col-12 .card:hover {
    transform: translateY(-10px); /* Verändert den Card-Standort um 10px nach oben */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Verstärkt den Schatten bei Hover */
}

/*################# Medienanfragen für responsives Design #################*/
/* Für Handys (unter 768px) */
@media (max-width: 768px) {
    .col-12 {
        padding: 0 10px; /* Ein wenig Abstand zwischen den Kacheln */
    }

    /* Verkleinere Videos auf kleinere Bildschirmgrößen */
    #referenzenVideos video {
        width: 100%; /* 100% der Breite der Card */
    }
}

/* Für Tablets und größere Handys (bis 992px) */
@media (max-width: 992px) {
    .col-md-4 {
        flex: 0 0 100%; /* Kacheln nehmen den ganzen Platz ein */
        max-width: 100%; /* Maximale Breite auf 100% setzen */
    }
}

/* Für Desktops */
@media (min-width: 993px) {
    .col-md-4 {
        flex: 0 0 32%; /* 3 Kacheln nebeneinander auf großen Bildschirmen */
        max-width: 33.333%; /* Maximale Breite der Kachel */
    }
}









/*################# 13. Sektion #################*/
/* Stile für den FAQ-Bereich */


.faq-section {
    background: linear-gradient(to bottom right, #f3f5fa, #ffffff);
}

/* Container für den FAQ-Bereich */
#faqContainerCustom {
    margin: 0 auto; /* Zentriert den Container */
}

/* Stile für die FAQ-Card */
#faqCardCustom {
    background-color: #ffffff;
    border-radius: 15px; /* Abgerundete Ecken */
    padding: 30px;
    max-width: 1200px; /* Maximale Breite */
    width: 100%; /* Breite auf 100% setzen */
    margin: 20px auto; /* Zentrierung */
    text-align: center; /* Text zentrieren */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekt für den Hover-Effekt */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten für die Card */
    display: flex;
    flex-direction: column; /* Optional, je nach Layout */
    justify-content: center; /* Vertikale Zentrierung */
    align-items: center; /* Horizontale Zentrierung */
}

/* Hover-Effekt für die FAQ-Card */
#faqCardCustom:hover {
    transform: scale(1.05); /* Vergrößert die Card um 5% */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Verstärkt den Schatten bei Hover */
}

/* Stile für den FAQ-Card-Titel */
#faqCardCustom .card-title {
    font-size: 1.5rem; /* Größere Schrift für den Titel */
    font-weight: 700; /* Fettgedruckt */
    color: #007bff; /* Textfarbe */
    margin-bottom: 1rem;
}

/* Text innerhalb der Card */
#faqCardCustom .card-text {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.75rem;
}

/* Stile für die Icons */
.icon-bounce-on-hover {
    transition: transform 0.3s ease;
}

.icon-bounce-on-hover:hover {
    transform: scale(1.1);
}

/* Stile für den FAQ-Bereich */
.faq-section .text-muted {
    color: #6c757d !important;
}

/* Responsive Optimierung */
@media (max-width: 768px) {
    #faqCardCustom {
        padding: 20px;
    }

    #faqCardCustom .card-title {
        font-size: 1.3rem;
    }

    #faqCardCustom .card-text {
        font-size: 0.95rem;
    }
}

/* Container für die FAQ-Sektion */
.faq-container {
    max-width: 800px; /* Maximalbreite für größere Geräte */
    margin: auto; /* Zentriert den Container */
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */
    padding: 20px; /* Innenabstand */
}

/* FAQ-Element */
.faq-item {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s;
    border-radius: 8px; /* Abrundung für alle Ecken */
    overflow: hidden; /* Verhindert Überlauf */
}

.faq-item:last-child {
    border-bottom: none; /* Kein unterer Rand für das letzte Element */
}


/* Fragebereich */
.faq-question {
    cursor: pointer;
    padding: 15px;
    background-color: #000000; /* Schwarzer Hintergrund */
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: transform 0.3s; /* Animation für Verschiebung */
}

.faq-question:hover {
    background-color: #000000; /* Schwarz bei Hover */
    transform: translateX(10px); /* Verschiebung nach rechts */
}

.faq-item:hover {
    background-color: #e7f1ff; /* Helles Blau bei Hover */
}

.faq-question i {
    margin-right: 10px; /* Abstand zwischen Icon und Text */
}

.toggle-icon {
    font-size: 1.2em; /* Größe des Toggle-Icons */
}

/* Antwortbereich */
.faq-answer {
    padding: 15px;
    display: none; /* Standardmäßig ausgeblendet */
    background-color: #f1f1f1;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Optional: Um die letzte Frage ohne untere Grenze darzustellen */
.faq-item:last-child .faq-answer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.faq-table { /* Für die FAQ und ist eine Tabelle  */
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .faq-table th, .faq-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    color: #333;
  }

  .faq-table th {
    background-color: #4CAF50;
    color: white;
    font-size: 1.1rem;
  }

  .faq-table td {
    font-size: 1rem;
    background-color: white;
  }

  .faq-table tr:hover {
    background-color: #f1f1f1;
  }

  .faq-table td strong {
    color: #007bff;
    font-weight: 600;
  }


/* ######################### Für FAQ 13 ######################### */
.faq-answer p {
    margin-bottom: 20px; /* Abstand zwischen den Absätzen */
}

/* Listenelemente in der FAQ-Antwort */
.faq-answer ul li {
    margin-bottom: 15px; /* Abstand zwischen den Listenelementen */
}

/* Zusätzlicher Abstand nach Überschriften */
.faq-answer strong {
    margin-bottom: 10px; /* Abstand nach der Überschrift */
}

/* Für den Fall, dass du einen extra Abstand am Ende der Antwort haben möchtest */
.faq-answer {
    margin-bottom: 30px; /* Abstand nach dem Antwortbereich */
}


/* ######################### Breakpoints ######################### */

/* Mobile Geräte (max-width: 767px) */
@media (max-width: 852px) {
    .faq-container {
        padding: 0px; /* Weniger Innenabstand für kleine Bildschirme */
    }

    .faq-question {
        font-size: 14px; /* Kleinere Schriftgröße für Fragen */
        padding: 12px; /* Weniger Abstand um die Frage */
    }

    .faq-answer {
        font-size: 14px; /* Kleinere Schriftgröße für Antworten */
        padding: 12px; /* Weniger Abstand für Antworten */
    }

    .faq-item {
        margin-bottom: 10px; /* Abstand zwischen den FAQ-Items */
    }

    .toggle-icon {
        font-size: 1.1em; /* Etwas kleinere Icon-Größe */
    }

    .faq-item {
        margin-bottom: 10px; /* Abstand zwischen FAQ-Items beibehalten */
    }
}

/* Tablets (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .faq-container {
        padding: 20px; /* Standard Innenabstand für Tablets */
    }

    .faq-question {
        font-size: 16px; /* Standard Schriftgröße für Tablets */
        padding: 14px; /* Ausreichend Abstand für Tablets */
    }

    .faq-answer {
        font-size: 16px; /* Standard Schriftgröße für Tablets */
        padding: 14px; /* Standard Abstand für Antworten */
    }

    .toggle-icon {
        font-size: 1.3em; /* Größeres Toggle-Icon für Tablets */
    }
    .faq-item {
        margin-bottom: 10px; /* Abstand zwischen FAQ-Items beibehalten */
    }
}

/* Laptops (1025px bis 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .faq-container {
        max-width: 900px; /* Größere Breite für Laptops */
        padding: 25px; /* Etwas mehr Abstand für größere Bildschirme */
    }

    .faq-question {
        font-size: 18px; /* Größere Schriftgröße für Laptops */
        padding: 18px; /* Mehr Abstand für größere Bildschirme */
    }

    .faq-answer {
        font-size: 18px; /* Größere Schriftgröße für Laptops */
        padding: 18px; /* Mehr Abstand für Antworten */
    }

    .toggle-icon {
        font-size: 1.4em; /* Größeres Toggle-Icon für Laptops */
    }
}

/* Desktops (ab 1441px) */
@media (min-width: 1441px) {
    .faq-container {
        max-width: 1000px; /* Maximale Breite für große Desktops */
        padding: 30px; /* Mehr Innenabstand für große Bildschirme */
    }

    .faq-question {
        font-size: 20px; /* Größere Schriftgröße für große Desktops */
        padding: 20px; /* Mehr Abstand um die Fragen */
    }

    .faq-answer {
        font-size: 20px; /* Größere Schriftgröße für große Desktops */
        padding: 20px; /* Mehr Abstand für Antworten */
    }

    .toggle-icon {
        font-size: 1.5em; /* Größeres Toggle-Icon für große Desktops */
    }
}




/*################# Hilfe & Kontakt #################*/
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    line-height: 1.6; /* Zeilenhöhe für besseren Lesefluss */
    background-color: #f4f4f4; /* Hintergrundfarbe für den gesamten Body */
}

/*################# Hilfe & Kontakt Styles #################*/
.hilfe-kontakt-container {
    max-width: 1200px; /* Maximalbreite des Containers */
    margin: 20px auto; /* Zentrieren des Containers */
    padding: 20px; /* Innenabstand des Containers */
    background-color: #fff; /* Hintergrundfarbe des Containers */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Schatten für den Container */
    border-radius: 8px; /* Abgerundete Ecken */
}

.hilfe-kontakt-header {
    text-align: center; /* Zentrieren der Kopfzeile */
    margin-bottom: 20px;
}

.hilfe-kontakt-header h1 {
    font-size: 32px; /* Standard Schriftgröße für größere Bildschirme */
    color: #333; /* Dunkle Schriftfarbe für bessere Lesbarkeit */
}

.hilfe-kontakt-header p {
    font-size: 16px; /* Schriftgröße für den Beschreibungstext */
    color: #777; /* Hellgraue Farbe für den Beschreibungstext */
}

/* Formularbereich */
.hilfe-kontakt-form {
    display: flex;
    flex-direction: column; /* Anordnung der Formularelemente untereinander */
    gap: 15px; /* Abstand zwischen den Formularelementen */
}

.hilfe-kontakt-form input,
.hilfe-kontakt-form textarea {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Abgerundete Ecken für die Formulareingabefelder */
    width: 100%; /* Eingabefelder nehmen die volle Breite ein */
    box-sizing: border-box; /* Box-Modell berücksichtigen */
}

.hilfe-kontakt-form button {
    background-color: #00bcd4; /* Schaltflächenfarbe */
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hilfe-kontakt-form button:hover {
    background-color: #0097a7; /* Dunkleres Blau bei Hover */
}

/* ######################### Breakpoints ######################### */

/* Mobile Geräte (max-width: 767px) */
@media (max-width: 767px) {
    .hilfe-kontakt-header h1 {
        font-size: 24px; /* Kleinere Schriftgröße für Mobilgeräte */
    }

    .hilfe-kontakt-header p {
        font-size: 14px; /* Kleinere Schriftgröße für den Beschreibungstext */
    }

    .hilfe-kontakt-form input,
    .hilfe-kontakt-form textarea {
        font-size: 14px; /* Kleinere Schriftgröße für Eingabefelder */
        padding: 8px; /* Weniger Innenabstand für Eingabefelder */
    }

    .hilfe-kontakt-form button {
        font-size: 14px; /* Kleinere Schriftgröße für den Button */
        padding: 10px 15px; /* Weniger Abstand im Button */
    }
}

/* Tablets (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hilfe-kontakt-header h1 {
        font-size: 28px; /* Größere Schriftgröße für Tablets */
    }

    .hilfe-kontakt-header p {
        font-size: 15px; /* Leicht größere Schriftgröße für Tablets */
    }

    .hilfe-kontakt-form input,
    .hilfe-kontakt-form textarea {
        font-size: 15px; /* Größere Schriftgröße für Formulareingabefelder */
    }

    .hilfe-kontakt-form button {
        font-size: 15px; /* Größere Schriftgröße für den Button */
    }
}

/* Laptops (1025px bis 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .hilfe-kontakt-container {
        padding: 30px; /* Etwas mehr Innenabstand für größere Bildschirme */
    }

    .hilfe-kontakt-header h1 {
        font-size: 32px; /* Größere Schriftgröße für Laptops */
    }

    .hilfe-kontakt-header p {
        font-size: 16px; /* Standard Schriftgröße für den Beschreibungstext */
    }

    .hilfe-kontakt-form input,
    .hilfe-kontakt-form textarea {
        font-size: 16px; /* Standard Schriftgröße für Formulareingabefelder */
    }

    .hilfe-kontakt-form button {
        font-size: 16px; /* Standard Schriftgröße für den Button */
    }
}

/* Desktops (ab 1441px) */
@media (min-width: 1441px) {
    .hilfe-kontakt-container {
        max-width: 1200px; /* Maximale Breite für große Desktops */
        margin: 40px auto; /* Mehr Abstand zum oberen Rand */
    }

    .hilfe-kontakt-header h1 {
        font-size: 36px; /* Größere Schriftgröße für Desktops */
    }

    .hilfe-kontakt-header p {
        font-size: 18px; /* Größere Schriftgröße für den Beschreibungstext */
    }

    .hilfe-kontakt-form input,
    .hilfe-kontakt-form textarea {
        font-size: 18px; /* Größere Schriftgröße für Formulareingabefelder */
        padding: 15px; /* Mehr Innenabstand */
    }

    .hilfe-kontakt-form button {
        font-size: 18px; /* Größere Schriftgröße für den Button */
        padding: 15px 25px; /* Mehr Abstand im Button */
    }
}



/*################# Navigation Kontakt Button #################*/
.contact-button {
    background-color: #007bff; /* Bootstrap primary color */
    color: #ffffff; /* White text */
    padding: 10px 20px; /* Padding für mehr Platz */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    text-decoration: none; /* Unterstreichung entfernen */
    transition: background-color 0.3s ease; /* Übergangseffekt */
}

.contact-button:hover {
    background-color: #0056b3; /* Dunklere Farbe beim Hover */
    text-decoration: none; /* Unterstreichung entfernen */
}

.contact-button i {
    margin-right: 5px; /* Abstand zum Text */
}




.custom-contact-button-container {
    position: fixed;
    right: -23px; /* Abstand vom rechten Rand */
    top: 50%; /* Mitte der Seite vertikal */
    transform: translateY(-50%); /* Zentriert den Button vertikal */
    z-index: 1000; /* Höherer Z-Index, damit der Button über anderen Elementen angezeigt wird */
}

.custom-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px; /* Breite des Buttons */
    height: 25px; /* Höhe des Buttons */
    background-color: #007bff; /* Bootstrap Blau */
    color: white; /* Textfarbe */
    font-weight: 700; /* Fettdruck */
    text-decoration: none; /* Unterstreichung entfernen */
    border-radius: 25px; /* Abgerundete Ecken */
    transform: rotate(-90deg); /* Button um 90 Grad drehen */
    transform-origin: center; /* Ursprung der Rotation anpassen */
    transition: background-color 0.3s, color 0.3s; /* Übergangseffekt für Hintergrund und Textfarbe */
    position: relative; /* Damit der Button korrekt positioniert wird */
    left: 60%; /* Button von der Mitte aus nach links verschieben */
    margin-left: -75px; /* Hälfte der Buttonbreite (150px/2) subtrahieren, um ihn zu zentrieren */
    z-index: 1001; /* Höherer Z-Index für den Button */
}

.custom-contact-button:hover {
    background-color: #0056b3; /* Dunkleres Blau bei Hover */
    color: #ffffff; /* Weiß bleibt beim Hover */
}


/*################# Scrollen nach Oben beim Klicken #################*/
.scroll-to-top {
    position: fixed;
    bottom: 10px; /* Abstand vom unteren Rand */
    right: 10px; /* Abstand vom rechten Rand */
    background-color: orange; /* Hintergrundfarbe auf orange geändert */
    color: white; /* Textfarbe */
    border: none;
    border-radius: 100%; /* Runde Form */
    width: 40px; /* Standard Breite des Buttons */
    height: 40px; /* Standard Höhe des Buttons */
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    font-size: 24px; /* Schriftgröße */
    text-decoration: none; /* Kein Unterstrich */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Schatten */
    transition: background-color 0.3s, transform 0.3s; /* Übergangseffekte */
    z-index: 1000; /* Über anderen Inhalten */
}

/* Der Pfeil innerhalb des Buttons */
.scroll-to-top .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white; /* Pfeilfarbe */
    transition: transform 0.3s; /* Übergangseffekt für den Pfeil */
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hover-Effekt für den Button */
.scroll-to-top:hover {
    background-color: #e68a00; /* Hintergrundfarbe bei Hover, leicht dunkleres Orange */
    transform: scale(1.1); /* Vergrößerung beim Hover */
}

/* Aktiver Zustand des Buttons */
.scroll-to-top:active {
    transform: scale(0.9); /* Verkleinerung beim Klicken */
}

/* Zustand, wenn der Button aktiv ist (durch Scrollen sichtbar) */
.scroll-to-top.active {
    background-color: orange; /* Hintergrundfarbe bleibt orange */
    color: white; /* Textfarbe bleibt weiß */
}

/* Pfeil heben sich beim Hover */
.scroll-to-top:hover .arrow {
    transform: translateY(-3px); /* Pfeil hebt sich beim Hover */
}

/* ######################### Breakpoints ######################### */

/* Für Mobile Geräte (max-width: 767px) */
@media (max-width: 767px) {
    .scroll-to-top {
        width: 35px; /* Kleinere Breite für mobile Geräte */
        height: 35px; /* Kleinere Höhe für mobile Geräte */
        font-size: 18px; /* Kleinere Schriftgröße für mobile Geräte */
    }

    .scroll-to-top .arrow {
        border-bottom: 8px solid white; /* Kleineren Pfeil für mobile Geräte */
    }
}

/* Für Tablets (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .scroll-to-top {
        width: 40px; /* Standardgröße für Tablets */
        height: 40px;
        font-size: 20px; /* Etwas kleinere Schriftgröße für Tablets */
    }

    .scroll-to-top .arrow {
        border-bottom: 9px solid white; /* Mittlere Pfeilgröße */
    }
}

/* Für Laptops (1025px bis 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .scroll-to-top {
        width: 45px; /* Größerer Button für Laptops */
        height: 45px;
        font-size: 22px; /* Größere Schriftgröße für Laptops */
    }

    .scroll-to-top .arrow {
        border-bottom: 10px solid white; /* Größerer Pfeil */
    }
}

/* Für Desktops (ab 1441px) */
@media (min-width: 1441px) {
    .scroll-to-top {
        width: 50px; /* Größerer Button für Desktops */
        height: 50px;
        font-size: 24px; /* Standard-Schriftgröße für Desktops */
    }

    .scroll-to-top .arrow {
        border-bottom: 12px solid white; /* Größter Pfeil für Desktops */
    }
}



/*################# CHECKLISTE #################*/
.checkmark {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #28a745;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    vertical-align: middle; 
}

.checkmark::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checklist {
    text-align: left; 
    display: inline-block; 
    margin-top: 10px; 
    margin-bottom: 20px; 
}

/* ################# 2. Testimonials ################# */
.testimonials-section {
    background-color: #f0f0f0; /* Etwas dunkleres Grau für die Sektion */
    padding: 40px 20px;
    text-align: center;
}

.testimonials-section h2 {
    color: #007bff; /* Blaue Farbe für die Überschrift */
    font-size: 2rem; /* Optional, je nach Bedarf anpassen */
    font-weight: bold;
}

.testimonial-card {
    background-color: #ffffff; 
    border-radius: 10px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
    padding: 10px; 
    margin: 10px auto; 
    max-width: 1600px; 
}

.testimonial-container {
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
    margin-top: 20px;
}

.testimonial-box {
    background-color: #ffffff; /* Weißer Hintergrund für maximalen Kontrast */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 40px; 
    width: 100%;
    max-width: 350px; 
    transition: transform 0.3s;
}


.testimonial-box:hover {
    transform: translateY(-5px);
}

.stars {
    color: #FFD700; 
    margin-bottom: 10px;
}

.testimonial-text {
    font-size: 1.1em;
    color: #1c1c1c; /* Dunkleres Grau für besseren Kontrast */
    margin: 10px 0;
}

.client-name {
    font-weight: bold;
    color: #0056b3; /* Dunkleres Blau für besseren Kontrast */
}


/* =========================
   Responsives Design für verschiedene Bildschirmgrößen
   ========================= */

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .testimonial-container {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-box {
        margin: 20px 0; /* Weniger Abstand zwischen den Boxen */
        max-width: 100%; /* Jede Box nimmt die volle Breite ein */
    }
}

/* Tablet (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .testimonial-container {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-box {
        margin: 20px 0; /* Weniger Abstand zwischen den Boxen */
        max-width: 48%; /* 2 Testimonials nebeneinander */
    }
}

/* Größere Geräte (Desktop: min-width: 1025px) */
@media (min-width: 1025px) {
    .testimonial-container {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .testimonial-box {
        margin: 20px; /* Mehr Abstand auf großen Bildschirmen */
        max-width: 350px; /* Maximalgröße der Testimonial-Box */
    }
}





/*################# FOOTER #################*/

/* Footer-Navigation für Links */

.footer-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-navigation li {
    display: block;
    margin: 10px 0;
}

footer {
    background: #000000; /* Hintergrundfarbe */
    color: #fff; /* Schriftfarbe */
    text-align: center; /* Text zentrieren */
    padding: 20px 0; /* Innenabstand */
    width: 100%; /* Breite */
    position: relative; /* Position für das Overlay */
    overflow: hidden; /* Überlauf verstecken */
    animation: fadeIn 1s; /* Fade-In-Animation beim Laden */
}

footer .container {
    position: relative; /* Für das animierte Element */
    z-index: 1; /* Sicherstellen, dass der Text über dem Overlay liegt */
}

/* Flexbox für Footer-Inhalte */
.footer-content {
    display: flex; /* Flexbox für das 3-Spalten-Layout */
    justify-content: space-between; /* Verteilt die Spalten gleichmäßig */
    margin-bottom: 20px; /* Abstand zwischen Inhalt und Divider */
    flex-wrap: wrap; /* Für flexibles Verhalten bei kleineren Bildschirmen */
}

.footer-column {
    flex: 1; /* Jede Spalte gleichmäßig verteilen */
    padding: 0 20px; /* Innenabstand für die Spalten */
    text-align: center; /* Text zentrieren */
    margin-bottom: 20px; /* Abstand nach unten */
}

.footer-divider {
    height: 2px; /* Höhe des Trenners */
    background-color: #00bcd4; /* Farbe des Trenners */
    margin: 20px 0; /* Abstand um den Trenner */
}

footer ul {
    list-style: none; /* Keine Aufzählungszeichen */
    padding-top: 10px; /* Abstand oben */
    margin: 0; /* Kein Margin */
}

footer ul li {
    display: inline-block;
    margin-left: 20px;
}


footer ul li a {
    color: #fff; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    transition: color 0.3s, transform 0.3s; /* Übergang für die Farbe und Transformation */
}

footer ul li a:hover {
    color: #00bcd4; /* Neue Farbe bei Hover */
    transform: scale(1.1); /* Vergrößerung bei Hover */
}
/* Custom Dropdown Hover-Logik */
.custom-dropdown {
    position: relative;
}

.custom-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000;
    min-width: 200px;
    max-height: 140px;
    overflow-y: auto;
    z-index: 999;
    padding: 0;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


.dropdown-menu .dropdown-item {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    display: block;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #007bff;
    color: #000;
}



/* Falls die Schriftgröße oder Layout beim Hover verändert wird, fixiere sie hier */
.nav-item.dropdown.custom-dropdown .dropdown-menu {
    font-size: 16px !important;  /* Fixiert Schriftgröße */
    transform: none !important;  /* Verhindert Skalierung */
    padding: 10px !important;   /* Fixiert das Padding */
}

/* Standard .nav-link */
.nav-link {
    display: block; /* Standard Anzeige für Nav-Links */
    font-size: 18px; /* Standard Schriftgröße */
  }
  
  /* .nav-link nur im Footer */
  footer .nav-link {
    display: inline;  /* Macht den Link inline im Footer */
    font-size: 18px;  /* Größere Schriftgröße im Footer */
  }
  


/* Logo */
.footer-logo {
    max-width: 200px; /* Setze die maximale Breite für das Logo */
    display: block; /* Block-Display für zentrierte Ausrichtung */
    margin: 0 auto 10px; /* Zentriere das Logo und füge Abstand nach unten hinzu */
}


.social-media-icons {
    display: flex; /* Flexbox für die Icons */
    justify-content: center; /* Zentriere die Icons */
    margin-top: 10px; /* Abstand zwischen Logo und Icons */
}

.social-media-icons a {
    color: #fff; /* Standardfarbe für die Icons */
    margin: 0 5px; /* Abstand zwischen den Icons */
}

.socila-btn {
    height: 40px; /* Höhe der Icons */
    width: 40px; /* Breite der Icons */
    display: flex; /* Flex-Display für zentrierte Icons */
    align-items: center; /* Zentriere vertikal */
    justify-content: center; /* Zentriere horizontal */
    border-radius: 50%; /* Runde Form */
    transition: background-color 0.3s; /* Sanfter Übergang für Hover */
}

.socila-btn:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Hintergrundfarbe beim Hover */
}



/* Für Mobile Geräte (max-width: 767px) */
@media (max-width: 767px) {
    .footer-content {
        flex-direction: column; /* Spalten untereinander */
        align-items: center; /* Zentrieren der Spalten */
    }

    .footer-column {
        text-align: center;
        padding: 10px 0; /* Weniger Padding für mobile Geräte */
    }

    footer ul li {
        display: block; /* Links untereinander */
        margin-left: 0; /* Kein Abstand nach links */
        margin-top: 10px; /* Abstand nach oben */
    }

    footer ul {
        padding: 0;
    }

    .footer-logo {
        max-width: 150px; /* Kleinere Logo-Größe für mobile Geräte */
    }
}

/* Für Tablets (kleine, mittlere und große Tablets) (768px bis 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .footer-content {
        flex-direction: row; /* Spalten nebeneinander */
        justify-content: space-evenly; /* Gleichmäßige Verteilung der Spalten */
    }

    .footer-column {
        text-align: center;
        padding: 20px 0;
        min-width: 220px; /* Mindestbreite für jede Spalte */
    }

    footer ul li {
        display: inline-block;
        margin-left: 20px;
    }

    .footer-logo {
        max-width: 170px; /* Etwas kleinere Logo-Größe auf Tablets */
    }
}

/* Für Laptops (1025px bis 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .footer-content {
        flex-direction: row; /* Spalten nebeneinander */
        justify-content: space-evenly; /* Gleichmäßige Verteilung der Spalten */
    }

    .footer-column {
        text-align: center;
        padding: 20px 30px;
    }

    footer ul li {
        display: inline-block;
        margin-left: 20px;
    }

    .footer-logo {
        max-width: 180px; /* Logo-Größe leicht angepasst */
    }
}

/* Für Desktops (ab 1441px) */
@media (min-width: 1441px) {
    .footer-content {
        flex-direction: row; /* Spalten nebeneinander */
        justify-content: space-between; /* Gleichmäßige Verteilung */
    }

    .footer-column {
        text-align: left; /* Linksbündiger Text */
        padding: 20px 30px;
    }

    footer ul li {
        display: inline-block;
        margin-left: 20px;
    }

    .footer-logo {
        max-width: 200px; /* Standard Logo-Größe für Desktops */
    }
}

/* Animationsdefinitionen */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}