/* ===========================
   RESET & BASE
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #212121; /* Dark Mode Base BG */
    color: #ffffff; /* Dark Mode Primary Text */
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

h5 {
    font-weight: 300;
    padding: 0;
    margin: 0;
}

/* ===========================
   CONTAINER
   =========================== */
.container {
    max-width: 1312px;
    margin: 0 auto;
    padding: 0 64px;
}

/* ===========================
   HEADER - ENHANCED WITH HIDE/SHOW
   =========================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 28px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.header.scrolled {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header.hidden {
    transform: translateY(-100%);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: block;
    transition: opacity 0.3s ease;
}

.logo:hover {
    opacity: 1;
}

.logo strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.logo span {
    display: block;
    /*  font-family: "Unica One", serif;*/

    font-size: 17px;
    letter-spacing:-1%;
    font-weight: 400;
    line-height: 1.4;
}

.main-nav {
    display: flex;
    gap: 48px;
    align-items: center;
          
}

.nav-link {
    font-size: 20px;
    font-weight: 700;
    transition: opacity 0.3s ease;
    position: relative;
}

.nav-link:hover {
    opacity: 0.5;
}

.nav-link.active {
    font-weight: 700;
    opacity: 0.5;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 4px;
    background: #ffffff;
    transition: all 0.3s ease;
    display: block;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===========================
   HERO SECTION (INDEX)
   =========================== */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 200px 0 140px;
    background-size: cover;
       /* background-image: url(pexels-tranmautritam-326514.jpg); */
    background-color: rgba(33,33,33,0.9);
    background-blend-mode:color-burn;
}

.democracy {

    background-size: cover;
    background-image: url(democracy-net/democracy-net-bg-01.png); 
    background-color: rgba(33,33,33,0.15);

    
}

.wallet {

    background-size: cover;
    background-image: url(digital-wallet-bg-01.png); 
    background-color: rgba(19, 193, 51, 0);
    background-blend-mode:screen;

    
}


.democracy .project-intro-text, .wallet .project-intro-text{
    color:#fff;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 1312px;
    animation: fadeInUp 0.8s ease-out;
    padding-right: 12%;
    color:rgba(255, 255, 255, 1);  /* color:#DFFE52; */


    
}

.hero-title-highlight {
 /* font-family: "Unica One", serif; */
  font-weight: 700;
  font-style: normal;
color:rgba(255, 255, 255, 1);  /* color:#DFFE52; */
}


.glowing-text {
    color: #fff;
    
    /* Set the initial color and apply the animation */
    text-shadow: 
        0 0 10px #00FFFF, 
        0 0 20px #00FFFF, 
        0 0 40px #00FFFF; 
    
    /* Apply the animation to cycle the glow */
    animation: glow-cycle 12s ease-in-out infinite alternate;
}

/* --- Keyframe Animation for the Pulsing Glow --- */
@keyframes glow-cycle {
    from {
        /* Starting color (e.g., bright cyan) */
        text-shadow: 
            0 0 5px #fff,        /* Inner white highlight */
            0 0 10px #00FFFF,    /* Light cyan */
            0 0 20px #00FFFF,
            0 0 40px #00FFFF;
    }
    to {
        /* Ending color (e.g., bright magenta/pink) */
        text-shadow: 
            0 0 5px #fff,        /* Inner white highlight */
            0 0 10px #FF00FF,    /* Light magenta */
            0 0 20px #FF00FF,
            0 0 40px #FF00FF;
    }
}

/* ===========================
   PROJECTS SECTION
   =========================== */
.projects-section {
    background: #1A1A1A; /* Dark Mode Section BG */
    padding: 100px 0 126px;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 64px;
    border-bottom: 0 solid #919191;
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.project-item {
    display: flex;
    align-items: center;
    gap: 40px;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding:48px;
    background:#212121;
    border-radius:24px;
}

.company-teaser {
    display:block;
    margin-top:32px; 
    margin-bottom:24px;
    max-width:64px;
    height:auto;
}

.project-item:hover {

    background:#2a2a2a;
}

.project-item:nth-child(1) { animation-delay: 0.1s; }
.project-item:nth-child(2) { animation-delay: 0.2s; }
.project-item:nth-child(3) { animation-delay: 0.3s; }

.project-item.hidden-project {
    display: none;
}

.project-item.show {
    display: flex;
    animation: fadeInUp 0.8s ease-out forwards;
}

.project-link {
    color: inherit;
    text-decoration: none;
}

.project-link:hover .project-title {
    color: #ffffff;
}

.project-link:hover .project-visual {
    transform: translateY(0px) scale(1.02);
    background: #212121;
}

.project-text {
    flex: 0 0 405px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.project-description {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: #919191; /* Dark Mode Secondary Text */
}

.project-visual {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.project-visual img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.1s ease-in-out;
}

.load-more-btn {
    margin: 64px 0 64px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    opacity: 0.7;
    transform: translateX(8px);
}

.jobsearch .load-more-btn {
    margin: 0 0 24px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    text-align:left;
}

.jobsearch .load-more-btn:hover {
    opacity: 0.7;
    transform: translateX(8px);

}

.load-more-btn.hidden {
    display: none;
}

/* ===========================
   QUOTE HERO (ABOUT PAGE)
   =========================== */
.quote-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 200px 0 140px;
    background: #212121;
}

.hero-quote {
    max-width: 1312px;
}

.quote-text {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 32px;
    animation: fadeInUp 0.8s ease-out;
    padding-right: 12%;
}

.quote-author {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #919191;
    font-style: normal;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* ===========================
   ABOUT SECTION
   =========================== */
.about-section {
    background: #1A1A1A;
    padding: 126px 0;
}

.company-info {
    display:flex;
    width:auto;
    padding:0 8px 0 0;
    justify-items:center;
      margin:8px 0;
      border-radius:16px
}


.references-group {
        display:flex;
        flex-direction: row;
        overflow:auto;
          width: 100%;
            white-space: nowrap;
            padding:32px 32px 64px 24px;
            justify-content: start;
            gap:24px;

}

.references {
    display:flex;
    width:auto;
    padding:24px 32px 24px 32px;
    justify-items:flex-start;
    align-content: flex-start;
      background:rgba(42, 42, 42, .3);
      margin:8px 0;
      border-radius:16px
}

.references:hover {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
      background:rgba(42, 42, 42, .5);
}

.references-logos {
    margin-right:24px;
        width:64px;
    height:64px; 
    align-self:center;
          border-radius:16px

}

.references-logos img {

    min-width:64px;
    height:64px; 
          border-radius:16px

}


.references-description {
        align-self:center;
font-size:16px;
    /*max-width:350px;*/
    
}

.reference-company {
font-weight:700;
    
}

.reference-description {
font-weight:400;
}

.reference-description span{
opacity:0.5; 

}

.jobsearch {
    margin:0 auto;
    padding: 24px 0 64px 64px;
    text-align: left;

}


.jobsearch h2{
    font-size:20px;
    max-width:90%;
    padding-bottom:48px;
     padding-top:48px;
            border-top:2px solid white;
            font-weight:300;
                        border-bottom:2px solid white;


}

.jobsearch .jobsearch-icon{
    font-size:32px;
    display:inline-block;
    padding-bottom:16px;
       display:none;
}

.jobsearch .jobsearch-icon:hover{
    rotate: -15deg;
 
    transition:all;
}


.jobsearch .jobsearch-icon-down{
    font-size:32px;
    display:inline-block;
    padding-bottom:16px;
    justify-self:center;
}

.jobsearch .jobsearch-icon-down:hover{
transform: translateY(4px);
    transition:all;

}

.contact-down {
    font-weight:500;
    padding:14px 28px;
    background:#fff;
    border-radius:100px;
    border:0 solid  rgba(255, 255, 255, 0.08);
    color:#000;
    font-size:18px;
    display:inline-block;
}

.contact-down:hover {
transform: rotate(-4deg);
    transition:all;    border-color:#fff;
}

.about-wrapper {
    display: flex;
    gap: 111px;
    align-items: flex-start;
}

.about-image {
    flex: 0 0 535px;
    position: sticky;
    top: 150px;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-image img.tools {
    width:75%;
    height:auto;
    justify-self:left;
    padding-top:16px;
}

.about-content {
    flex: 1;
    max-width: 646px;
}

.about-headline {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-text p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: #919191;
}

.text-link {
    text-decoration: underline;
    color: #919191;
    transition: color 0.3s ease;
}

.text-link:hover {
    color: #ffffff;
}

/* ===========================
   RECOMMENDATIONS CAROUSEL
   =========================== */
.recommendations-section {
    background: #212121;
    padding: 126px 0;
    overflow: hidden;
}

.recommendations-carousel-wrapper {
    position: relative;
    margin-top: 80px;
}

.carousel-gradient {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    z-index: 10;
    pointer-events: none;
}

.carousel-gradient-left {
    left: 0;
    background: linear-gradient(to right, #1a1a1a 0%, transparent 100%);
}

.carousel-gradient-right {
    right: 0;
    background: linear-gradient(to left, #1a1a1a 0%, transparent 100%);
}

.recommendations-carousel {
    display: flex;
    gap: 40px;
    padding: 0 64px;
    cursor: grab;
    user-select: none;
}

.recommendations-carousel.dragging {
    cursor: grabbing;
}

.recommendation-card {
    flex: 0 0 calc(33.333% - 27px);
    min-width: 400px;
    background: #1A1A1A; /* Dark Mode Card BG */
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.3s ease;
}

.recommendation-card:hover {
    transform: translateY(-8px);
}

.recommendation-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.recommendation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommendation-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.recommendation-text {
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
}

.recommendation-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.author-role {
    font-size: 14px;
    color: #919191;
}

/* ===========================
   PROJECT DETAIL PAGE
   =========================== */
.project-hero {
    padding: 200px 0 80px;
    /*background-image: url(iw-medien-iw-akademie.png);
    background-color: #3267ae;
    background-blend-mode: multiply;*/
}

.project-hero::after {
    background: #212121;
    width: 100%;
    height: 100%;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.project-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #919191;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.project-headline {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 32px;
    max-width: 900px;
}

.project-intro {
    font-size: 20px;
    line-height: 1.6;
    color: #919191;
    max-width: 800px;
    margin-bottom: 48px;
}

.hero-image-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.hero-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.hero-img:hover {
    transform: scale(1.02);
}

/* ===========================
   PROJEKT SPEZIFISCHE UTILITIES
   (Aus Inline-Styles extrahiert)
   =========================== */

.project-tag-intro {
    font-size: 12px; 
    width:fit-content;
    text-align:left;
    padding: 8px 16px;
  border-radius: 20px;
    font-weight: 400; 
    display: block; 
    margin-bottom: 24px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    line-height:180%;
    color: #fff;
    background:#1A1A1A;
    display:none;
}

.project-intro-text {
    font-size: 24px; 
    margin-bottom: 48px; 
    font-weight: 300; 
    display: block; 
    margin-top: 24px; 
    line-height: 1.6; 
    color: #919191;
    max-width:950px;
}

/* Spezielles Styling für den Wizard/Journey Mapping Abstand */
.content-block + .two-column-grid {
    margin-top: 100px;
}

/* Abstand für das Carousel im Project Detail */
.carousel-container-wrapper-project {
    margin-top: 40px;
}

.carousel-container-wrapper-project h2{
    font-size: 32px;
}

.lead-icon {
    display:flex; 
    align-items:center;
}
.lead-icon img{
    line-height:140%; width:56px; margin-top:0; padding-right:24px; height:auto;     display:none;

}
/* Project Stats Bar */
.project-stats-bar {
    background: #1A1A1A;
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.stat-item h3 {
    font-size: 14px;
    font-weight: 500;
    color: #919191;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.stat-item p {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
}

/* Project Body */
.project-body {
    background: #212121;
    padding: 100px 0;
}

.content-block {
    max-width: 800px;
}

.content-block h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    line-height:140%;
}

.content-block h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    line-height:140%;
}

.content-block p {
    font-size: 18px;
    line-height: 1.7;
    color: #919191;
    margin-bottom: 16px;
}


p.content-block {
    align-content: center;
    font-size: 18px;
  line-height: 1.7;
  color: #919191;
  margin-bottom: 16px;
  height:70%;
}



.content-block strong{
color: #fff;
}

.projectbody .content-block strong{
color: #fff;
  margin-bottom: 8px;
  display: inline-block;

}

.content-block ul {
    list-style: none;
    padding: 0;
    margin-top: 24px;
    margin-bottom:48px;
}

.content-block ul li {
    font-size: 18px;
    line-height: 1.7;
    color: #919191;
    margin-bottom: 16px;
    padding-left: 24px;
    position: relative;
}

.content-block ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #919191;
}

.content-block ul li b {
    font-weight:500;
}

/* Image Grids */
.image-grid-2,
.image-grid-3 {
    display: grid;
    gap: 24px;
    margin: 80px 0;
}

.image-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.image-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.content-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.content-img:hover {
    transform: scale(1.02);
}

.full-width-img-wrapper {
    margin: 80px 0;
}

/* Trends Section */
.trends-section {
    max-width: 100%;
    margin: 82px auto 0;
    padding: 60px;
    background: #1A1A1A;
    border-radius: 16px;
}

.trend-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.trends-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.trend-intro {
    font-size: 18px;
    line-height: 1.7;
    color: #848484;
    margin-bottom: 40px;
}

.trends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.trend-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trend-icon {
    font-size: 32px;
    margin-bottom: 8px;
    margin-right: 16px;
}

.trend-icon img {
    max-width: 60px;
    height: auto;
}

.trend-card h3, .trend-card h4, .trend-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}



.trend-card h5 {
    font-size: 14px;
    font-weight: 400;
    color: #919191;
    margin-top: 0;
}

.trend-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #919191;
}

/* Project Navigation */
.project-nav {
    background: #1A1A1A;
    padding: 60px 0;
}

.project-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.back-link,
.next-project-link {
    font-size: 20px;
    font-weight: 700;
    transition: opacity 0.3s ease;
    display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 6px solid #212121;
  border-radius: 250px;
  justify-content:space-between;
}

.back-link:hover,
.next-project-link:hover {
    opacity: 0.7;
}




/* ============================
    Marquee Animation

   =========================== */


		.marquee {
			display: flex ;
			overflow:hidden ;
			white-space: nowrap ;
			width: 100% ;
            color:#1a1a1a;
            left:0;
            top:0;
            height:20%;
            font-size:64px;
            letter-spacing:0;
            font-weight:700;
            padding-top:8px;
            

            

		}


	

		.marquee__item {
			animation-duration: 24s ;
			animation-iteration-count: infinite ;
			animation-name: marquee-content ;
			animation-timing-function: linear ;
			padding: 5px 15px 5px 15px ;
            opacity:1;
            background:#eee;
		}
		.marquee:hover .marquee__item {
			animation-play-state: paused;
		}
		.marquee__item span{
            font-size:48px;
		}



	
		/**
		* BOTH of the marquee items are going to be translating left at the same time.
		* And, once each of them has translated to -100%, they will both snap back into
		* place, making it seem as if they are continuously scrolling.
		*/
		@keyframes marquee-content {
			from {
				transform: translateX( 0% );
			}
			to {
				transform: translateX( -100% );
			}
		}
		




/* ===========================
   LIGHTBOX MODAL
   =========================== */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 32px;
    line-height:10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-close {
    top: 30px;
    right: 30px;
    padding-bottom:4px;
}

.lightbox-prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom:4px;
}

.lightbox-next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom:4px;
}

.lightbox-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    backdrop-filter: blur(10px);
}

/* ===========================
   FULL WIDTH IMAGE
   =========================== */
.full-image {
    width: 100%;
}

.full-image img {
    width: 100%;
    height: auto;
    display: block;
}

.full-height {
    max-height:450px;
    background:red;
    overflow:hidden;
}

.full-image.full-height img {
    height:200vh;
    width:200vh;
}


/* ===========================
   ENHANCED FOOTER
   =========================== */
.footer {
    background: #2a2a2a; /* Dark Mode Footer BG */
    padding: 80px 0 140px 0;
    margin-bottom: 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer-contact-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-contact-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 17px 24px;
    background: rgba(255, 255, 255, 0.05); /* Dark Mode Footer Item BG */
    border: 6px solid #212121;
    border-radius: 250px;
    font-size: 18px;
    font-weight: 500;
    color: #f1f1f1;
    text-decoration: none;
    transition: all 0.3s ease;
}


.footer-contact-item:hover {
    background: rgba(255, 255, 255, 0.08);
}



.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
        transform: rotate(-15deg);

}

.footer-contact-item:hover .contact-icon {
    transform: rotate(20deg);
}

.contact-icon svg {
    width: 100%;
    height: 100%;
}

.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

.couple{
    background:#212121;
    border-radius:100px;
    padding:4px;
    display:flex;
    align-items: center;
    justify-content: center;


}

.couple a img{
    max-width:32px;
    height:auto;
    border-radius:200px;
    display:inline;
    align-self: center;
    align-content: center;
    padding:0;
    margin:0;    
}


.footer-contact-imgitem {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    height:min-content;
    padding: 10px 18px 10px 14px;
    background: rgba(255, 255, 255, 0.05); /* Dark Mode Footer Item BG */
    border: 6px solid #212121;
    border-radius: 250px;
    font-size: 18px;
    font-weight: 500;
    color: #f1f1f1;
    text-decoration: none;
    transition: all 0.3s ease;
    max-height:fit-content;
    width:100%;
}


a.footer-contact-imgitem img{
    max-width:fit-content;
    height:42px;
    border-radius:200px;
    display:inline;
    align-self: center;
    align-content:space-between;
    padding:0;
    margin:0;    
}

.footer-contact-imgitem:hover {
    background: rgba(255, 255, 255, 0.08);
}




.couple a svg{


    padding:0;
    margin:0;    
}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
   NEUE STYLES FÜR PROJEKT TEMPLATE
   (Angehängt, um bestehende Styles nicht zu überschreiben)
   =========================== */

/* Background Utility */
.bg-darker {
    background: #1A1A1A;
}

/* Spacing Utility */
.section-spacing {
    padding: 100px 0;
}

/* Spacing Utility */
.section-spacing-small {
    padding: 48px 0;
}


/* Layout Utilities */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.two-column-grid.align-center {
    align-items: start;
}

/* Carousel (Generic) */
.carousel-container-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 24px;
}

.infinite-carousel {
    display: flex;
    gap: 24px;
    padding: 12px 64px;
    cursor: grab;
    user-select: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    background: #1a1a1a;

    /* Optimiert die Darstellung und nutzt GPU-Beschleunigung für flüssigere Animationen (falls vorhanden) */
    will-change: transform;
    
    /* Verbessert das native Scroll-Erlebnis (Inertia Scrolling) auf iOS/Safari */
    -webkit-overflow-scrolling: touch; 
    
    /* Stellt sicher, dass horizontales Panning (Wischen) korrekt behandelt wird, ohne Konflikte mit vertikalem Scrollen */
    touch-action: pan-y;
}

.infinite-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.infinite-carousel.dragging {
    cursor:pointer;
}

.carousel-image-card {
    flex: 0 0 400px;
    height: auto;
    max-height:600px;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
        opacity:1;
        padding-bottom:100px;

}

.carousel-image-card:hover {
    transform: scale(1.04);

}

.carousel-image-card img {
    width: 100%;
    height: 100%;
    object-fit:contain;
    display: block;
    border-radius:12px;
    background:#fff;

}

.carousel-image-card:hover {
    cursor:pointer;
        opacity:1;
}

.image-caption {
    padding:16px 8px;
    text-align:left;
    color:#f1f1f1;
    font-size:14px;
}


/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 1200px) {
    .container {
        padding: 0 40px;
    }
    
    .hero-title,
    .quote-text {
        font-size: 42px;
        line-height: 1.3;
    }
    
    .project-text {
        flex: 0 0 350px;
    }
    
    .about-wrapper {
        gap: 80px;
    }
    
    .about-image {
        flex: 0 0 450px;
    }
    
    .recommendation-card {
        min-width: 350px;
    }
    
    .trends-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {



    .references {
        margin-right:8px;
    }

    .container {
        padding: 0 32px;
    }
    
    .main-nav {
        gap: 32px;
    }
    
    .nav-link {
        font-size: 20px;
    }
    
    .hero,
    .quote-hero,
    .project-hero {
        min-height: 65vh;
        padding: 150px 0 100px;
    }
    
    .hero-title,
    .quote-text,
    .project-headline {
        font-size: 38px;
        line-height: 1.3;
    }
    
    .projects-section,
    .about-section,
    .recommendations-section {
        padding: 100px 0;
    }
    
    .projects-list {
        gap: 120px;
    }
    
    .project-item {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    
    .project-text {
        flex: 1;
        width: 100%;
    }
    
    .about-wrapper {
        flex-direction: column;
        gap: 60px;
    }
    
    .about-image {
        position: relative;
        top: 0;
        flex: 1;
        max-width: 100%;
    }
    
    .about-content {
        max-width: 100%;
    }
    
    .recommendation-card {
        min-width: 320px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .image-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trends-grid {
        grid-template-columns: 1fr;
    }

    /* Neu: Project Page Responsive */
    .two-column-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .image-block {
        order: -1;
    }
}

@media (max-width: 768px) {


    		.marquee {

            font-size:48px;


            

		}



    .container {
        padding: 0 24px;
    }
    
    .header {
        padding: 24px 0;
    }
    
    .header.scrolled {
        padding: 16px 0;
    }
    
    .logo strong {
        font-size: 18px;
    }
    .logo span {
        font-size: 15px;
        letter-spacing:0;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #1A1A1A;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 0;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        font-size: 28px;
    
    }
    
    .main-nav.active {
        right: 0;
    }
    
    .nav-link {
        font-size: 28px;
        padding: 24px 0;
        font-weight: 700;
    }
    
    .nav-link:first-child {
        margin-top: -50px;
    }
    
    .hero,
    .quote-hero,
    .project-hero {
        min-height: 70vh;
        padding: 200px 0 48px;
    }
    
    .hero-title {
        font-size: 32px;
        line-height: 1.3;
        padding-right: 6%;
        padding-top:16px;
    }

    
    .quote-text {
        font-size: 32px;
        line-height: 1.3;
    }

    

    .project-intro-text {
    font-size: 20px; 
    line-height: 1.6; 
    padding-right: 0;
    }   

    .project-item {
        padding:20px;
        gap:16px;
    }


    
    .project-headline {
        font-size: 32px;
    }

    .references-logos {
        width:56px;
    height:56px; 
        border-radius:8px;


}

.references-logos img {

    min-width:56px;
    height:56px; 
    border-radius:8px;

}


.back-link,
.next-project-link {
width:100%;
  justify-content:space-between;
}

.lead-icon img{
    line-height:140%; width:58px; margin-top:0; padding-right:16px; height:auto; 
}

    
    .section-title {
        font-size: 32px;
        margin-bottom: 64px;
    }
    
    .projects-list {
        gap: 80px;
    }
    
    .load-more-btn {
        font-size: 26px;
        margin-top: 60px;
    }
    

    .jobsearch {
        padding-bottom:64px;
        padding-left:24px;

    }


    .jobsearch h2{
        font-size:18px;
        text-align:left;
    }

    .jobsearch .jobsearch-icon{
        display:inline-block;
        padding-bottom:16px;
    }

    .recommendations-carousel {
        padding: 0 24px;
    }
    

.jobsearch .load-more-btn {
    font-size: 24px;
    padding-left:0; 

}


    .recommendation-card {
        flex: 0 0 calc(100% - 48px);
        min-width: calc(100% - 48px);
    }

    
    .carousel-gradient {
        width: 80px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .image-grid-2,
    .image-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .trends-section {
        padding: 40px 24px;
    }
    
    .project-nav .container {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .lightbox-prev, .lightbox-next {
        opacity:0.2;
        }
    
    .footer {
        padding: 48px 0 82px;
    }
    
    .footer-contact-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    
    .footer-contact-item {
        justify-content: flex-start;
        width: 100%;
        padding: 16px 24px;
    }
    
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


    .couple{
        background:#212121;
        border-radius:32px;
        padding:4px;
        flex-direction:column;
    }
    
    .footer-copyright {
        text-align: left;
        width: 100%;
        padding: 0;
    }
    
    .lightbox-close {
        top: 20px;
        right: 20px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }

    /* Neu: Carousel Responsive */
    .carousel-image-card {
        flex: 0 0 280px;
        height: 400px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 20px;
    }
    
    .hero,
    .quote-hero,
    .project-hero {
        min-height: 80vh;
        padding: 120px 0 40px;
    }
    
    .hero-title,
    .quote-text,
    .project-headline {
        font-size: 28px;
        line-height: 1.35;
    }
    
    .project-title {
        font-size: 24px;
    }
    
    .project-visual {
        border-radius: 16px;
    }

    .nav-link {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .section-title,
    .about-headline {
        font-size: 26px;
    }
    
    .footer-contact-item {
        font-size: 16px;padding: 14px 20px;
    }
}