/* -----------------------------------------------
   layout2.css – Data Analytics Projects Page
   Basiert auf dem Design-System von layout.css
----------------------------------------------- */

:root {
   --color-background: #1d1d1f;
   --color-surface: #1d1d1f;
   --color-white: #ffffff;
   --color-accent: #d98e51;
   --color-accent-alt: #d98e51;
   --color-blue: #172668;
   --color-blue-dark: #272757;
   --color-text-muted: rgba(220, 215, 210, 0.8);
   --color-text-soft: rgba(220, 215, 210, 0.55);

   --font-base: "Roboto", sans-serif;
}

/* -----------------------------------------------
   Reset / Base
----------------------------------------------- */

html {
   scroll-behavior: smooth;
}

body {
   width: 100%;
   max-width: 100%;
   margin: 0;
   overflow-x: hidden;
   background: var(--color-background);
   font-family: var(--font-base);
}

/* -----------------------------------------------
   Zurück-Button
----------------------------------------------- */

.back-link {
   position: fixed;
   top: 24px;
   left: 32px;
   z-index: 100;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   color: var(--color-white);
   font-family: var(--font-base);
   font-size: 13px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-decoration: none;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   backdrop-filter: blur(18px) saturate(180%);
   -webkit-backdrop-filter: blur(18px) saturate(180%);
   box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
   transition: transform 0.3s ease, background 0.3s ease, border-color 0.25s ease, color 0.25s ease;
}

.back-link:hover,
.back-link:focus {
   color: var(--color-accent);
   background: rgba(255, 255, 255, 0.09);
   border-color: rgba(217, 142, 81, 0.4);
   transform: translateY(-2px);
}

.back-link:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 3px;
}

/* -----------------------------------------------
   Page Hero / Seitentitel
----------------------------------------------- */

.page-hero {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 140px 40px 80px;
   text-align: center;
   overflow: hidden;
   background:
      radial-gradient(circle at 10% 60%, rgba(217, 142, 81, 0.12) 0%, transparent 55%),
      radial-gradient(circle at 85% 30%, rgba(23, 38, 104, 0.18) 0%, transparent 55%),
      var(--color-background);
}

.page-hero::before,
.page-hero::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: 0.3;
   pointer-events: none;
   animation: blobFloat 10s ease-in-out infinite alternate;
}

.page-hero::before {
   width: 340px;
   height: 340px;
   top: -80px;
   left: -60px;
   background: rgba(217, 142, 81, 0.3);
}

.page-hero::after {
   width: 280px;
   height: 280px;
   bottom: -60px;
   right: -40px;
   background: rgba(23, 38, 104, 0.4);
   animation-delay: -5s;
}

@keyframes blobFloat {
   from { transform: translate(0, 0) scale(1); }
   to   { transform: translate(40px, 30px) scale(1.1); }
}

.page-title {
   position: relative;
   z-index: 1;
   margin: 0 0 16px;
   font-family: var(--font-base);
   font-size: clamp(36px, 6vw, 64px);
   font-weight: 700;
   letter-spacing: -1.5px;
   line-height: 1.1;
   color: transparent;
   background: linear-gradient(
      135deg,
      rgba(235, 235, 235, 0.6) 0%,
      rgba(255, 255, 255, 0.85) 40%,
      rgba(255, 236, 212, 0.9) 55%,
      rgba(235, 235, 235, 0.7) 100%
   );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

.page-title span {
   background: linear-gradient(90deg, var(--color-accent-alt), var(--color-blue));
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   filter: none;
}

.page-subtitle {
   position: relative;
   z-index: 1;
   margin: 0;
   color: var(--color-text-soft);
   font-family: var(--font-base);
   font-size: 18px;
   line-height: 1.6;
   letter-spacing: 0.02em;
}

/* Trennlinie unter dem Hero */
.page-hero + .projects-wrapper {
   border-top: none;
}

/* -----------------------------------------------
   Projekte-Wrapper
----------------------------------------------- */

.projects-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 40px;
   max-width: 1100px;
   margin: 0 auto;
   padding: 60px 48px 120px;
}

/* -----------------------------------------------
   Projekt-Karte
----------------------------------------------- */

.project-card {
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 40px;
   padding: 40px 44px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 20px;
   backdrop-filter: blur(14px) saturate(160%);
   -webkit-backdrop-filter: blur(14px) saturate(160%);
   box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04);
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
   overflow: hidden;
}

/* Subtiler Glanz-Overlay oben */
.project-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 50%;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 100%
   );
   border-radius: 20px 20px 60% 60% / 20px 20px 30px 30px;
   pointer-events: none;
}

.project-card:hover {
   transform: translateY(-5px);
   border-color: rgba(217, 142, 81, 0.3);
   box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------------
   Logo-Bereich
----------------------------------------------- */

.project-logo-wrap {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 90px;
   height: 90px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 18px;
   overflow: hidden;
   box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.project-logo {
   width: 70px;
   height: 70px;
   object-fit: contain;
   display: block;
}

/* -----------------------------------------------
   Projekt-Inhalt
----------------------------------------------- */

.project-content {
   flex: 1;
   min-width: 0;
}

.project-title {
   position: relative;
   margin: 0 0 14px;
   font-family: var(--font-base);
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -0.4px;
   line-height: 1.2;
   color: transparent;
   background: linear-gradient(
      135deg,
      rgba(235, 235, 235, 0.6) 0%,
      rgba(255, 255, 255, 0.85) 40%,
      rgba(255, 236, 212, 0.9) 55%,
      rgba(235, 235, 235, 0.7) 100%
   );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

.project-description {
   margin: 0 0 24px;
   color: var(--color-text-muted);
   font-family: var(--font-base);
   font-size: 15px;
   line-height: 1.8;
   text-align: justify;
}

/* -----------------------------------------------
   Projekt-Link
----------------------------------------------- */

.project-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 11px 26px;
   overflow: hidden;
   color: var(--color-white);
   font-family: var(--font-base);
   font-size: 13px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-decoration: none;
   background: rgba(217, 119, 87, 0.15);
   border: 1px solid rgba(217, 142, 81, 0.4);
   border-radius: 12px;
   backdrop-filter: blur(14px) saturate(160%);
   -webkit-backdrop-filter: blur(14px) saturate(160%);
   box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04);
   transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease, color 0.25s ease;
}

.project-link::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 50%;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0) 100%
   );
   border-radius: 12px 12px 50% 50% / 12px 12px 14px 14px;
   pointer-events: none;
}

.project-link:hover,
.project-link:focus {
   color: var(--color-accent);
   background: rgba(217, 119, 87, 0.28);
   border-color: var(--color-accent);
   transform: translateY(-3px);
   box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.project-link:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 3px;
}

/* -----------------------------------------------
   Responsive
----------------------------------------------- */

@media (max-width: 768px) {
   .projects-wrapper {
      padding: 40px 24px 80px;
      gap: 28px;
   }

   .project-card {
      flex-direction: column;
      gap: 24px;
      padding: 28px 28px;
   }

   .project-logo-wrap {
      width: 72px;
      height: 72px;
   }

   .project-logo {
      width: 54px;
      height: 54px;
   }

   .page-hero {
      padding: 120px 24px 60px;
   }
}

@media (max-width: 480px) {
   .back-link {
      top: 16px;
      left: 16px;
      padding: 8px 14px;
      font-size: 12px;
   }

   .page-title {
      font-size: 32px;
      letter-spacing: -1px;
   }

   .page-subtitle {
      font-size: 15px;
   }

   .project-card {
      padding: 22px 20px;
   }

   .project-title {
      font-size: 20px;
   }

   .project-description {
      font-size: 14px;
   }
}