/* ====== Design Tokens ====== */
:root {
  --bg-1: #050816;
  /* fast schwarz */
  --bg-2: #0b1430;
  /* tiefes Blau */
  --bg-3: #0e1c48;
  /* Verlauf */
  --brand: #2aa8ff;
  /* Aqua-Blau */
  --brand-2: #66d1ff;
  --text: #d8e7ff;
  --muted: #9db3d1;
  --card: #0c1330cc;
  --border: #27406b;
  --glow: 0 0 24px rgba(42, 168, 255, .35);
}

/* Reset */
* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: hidden;
  /* Prevent horizontal scroll from overlapping elements */
}

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, #1a2a6c 0%, var(--bg-2) 50%, var(--bg-1) 100%) fixed;
}




/* Utilities */
.container {
  width: min(1120px, 92%);
  margin-inline: auto
}

.eyebrow {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-2);
  font-weight: 600;
  font-size: .78rem
}


/* ===== SECTION ===== */
.section {
  padding: 100px 0;
  text-align: center;
  background: radial-gradient(circle at top, #060b1a 0%, #020512 100%);
  color: #fff;
}

.section-title {
  font-size: clamp(1.8rem, 2.5vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.section-subtitle {
  color: #8bbcff;
  font-size: 1.1rem;
  margin-bottom: 3rem;
  opacity: 0.8;
}


/* ===== CARDS ===== */
.cards-blue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  justify-items: center;
}

.card-blue {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg) center/cover no-repeat;
  box-shadow: 0 0 30px rgba(0, 50, 150, 0.4);
  transition: all 0.4s ease;
  cursor: default;
}

.card-blue:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 50px rgba(100, 180, 255, 0.6);
}

/* Overlay for readable text */
.card-blue .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 10, 25, 0.9) 0%,
      rgba(0, 10, 25, 0.5) 50%,
      rgba(0, 10, 25, 0.2) 100%);
  backdrop-filter: blur(2px);
}

/* Content area */
.card-blue .content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 30px 25px;
  text-align: left;
  z-index: 2;
}

.card-blue h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 0 10px rgba(100, 200, 255, 0.4);
}

.card-blue p {
  font-size: 0.95rem;
  color: #cfe6ff;
  line-height: 1.5;
  max-width: 90%;
}

/* Glow title effect */
.glow-title {
  text-shadow: 0 0 25px rgba(100, 180, 255, 0.5),
    0 0 50px rgba(60, 150, 255, 0.3);
}



/* Buttons */
.btn {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  padding: .9rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600
}

.btn.primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #001428;
  box-shadow: var(--glow)
}

.btn.primary:hover {
  filter: brightness(1.05)
}

.btn.ghost {
  background: transparent;
  border-color: #27406b;
  color: var(--text)
}

.btn.link {
  background: transparent;
  color: var(--brand-2);
  padding: .6rem 0
}

.btn.pill {
  background: #0b244a;
  border: 1px solid #21436d
}

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px clamp(12px, 4vw, 28px);
  background: linear-gradient(180deg, rgba(5, 8, 22, .9), rgba(5, 8, 22, .6), transparent);
  backdrop-filter: blur(6px);
}

/* ===== Nav (Centered Floating Bar – clean, flat, mit mehr Abstand) ===== */
.nav.nav-centered {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* justify-items: center; REMOVED to restore correct spacing */
  gap: 50px;
  /* mehr Abstand zwischen Logo und Text */
  width: min(800px, 90%);
  padding: 8px 28px;
  border-radius: 999px;
  background: rgba(8, 15, 40, 0.85);
  border: 1px solid rgba(90, 150, 255, 0.25);
  backdrop-filter: blur(10px);
}

/* Navigation links/rechts */
.nav-side {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  width: 100%;
  /* Ensure it fills grid column for alignment */
}

.nav-left {
  justify-content: flex-end;
}

.nav-right {
  justify-content: flex-start;
  align-items: center;
  /* Ensure items vertically centered */
}

.nav-side a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-side a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* App Icon Link Styling */
.nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  /* Optimal touch target size */
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  /* More visible background */
  color: #ffffff !important;
  /* Force White */
  transition: all 0.3s ease;
  text-decoration: none;
}

.nav-icon-link:hover {
  background: rgba(42, 168, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(42, 168, 255, 0.5);
}

.nav-icon-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* ===== Logo Bubble (komplett clean, kein Glow, kein Schatten) ===== */
.center-brand {
  justify-self: center;
  text-decoration: none;
}

.logo-bubble {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: transparent;
  /* kein Verlauf, kein Schatten */
  border: 1px solid rgba(120, 180, 255, 0.4);
  animation: floatY 4.5s ease-in-out infinite alternate;
  position: relative;
}

.logo-bubble::after {
  /* entfernt, um komplett clean zu bleiben */
  content: none;
}

.logo-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: none;
  /* kein Glow, kein Shadow */
}

@keyframes floatY {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-5px);
  }
}

/* Weicher Übergang am unteren Rand des Hero */
.hero {
  position: relative;
  min-height: 78vh;
  /* wie bei dir */
  display: grid;
  place-items: center;
  overflow: hidden;
  /* ok */
  background: #000;
  /* Fallback */
}

.hero::after {
  content: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  /* Stärke des Übergangs */
  pointer-events: none;
  /* Verlauf von transparent -> Seitenhintergrund */
  background: linear-gradient(180deg,
      rgba(5, 8, 22, 0) 0%,
      rgba(5, 8, 22, .75) 700%,
      rgba(5, 8, 22, 1) 700%);
  z-index: 1;
  /* über dem Bild, unter dem Text */
}

/* Sicherstellen: Text liegt über dem Fade */
.hero__content {
  position: relative;
  z-index: 2;
}




/* Hamburger ausblenden (wir haben mittigen Nav-Bar Look) */
.hamburger {
  display: none
}

/* Platz oben im Hero, damit die Bar nichts verdeckt */
.hero {
  padding-top: 120px
}

/* Responsive: unter 860px zentrierte Bar + Mobile-Menü */
@media (max-width: 1200px) {
  .nav.nav-centered {
    grid-template-columns: 1fr auto 1fr;
    width: min(680px, 94%);
    padding: 8px 14px;
  }

  .nav-side {
    display: none
  }

  /* Links ausblenden */
  .hamburger {
    display: block;
    justify-self: end;
    background: none;
    border: 0;
    width: 40px;
    height: 40px;
    position: relative
  }

  .hamburger span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: #9db3d1;
    transform-origin: center;
    transition: .2s
  }

  .hamburger span:nth-child(1) {
    top: 12px
  }

  .hamburger span:nth-child(2) {
    top: 19px
  }

  .hamburger span:nth-child(3) {
    top: 26px
  }
}


/* ===== Hero ===== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 30px;
  /* Explicit positioning from top */
  overflow: hidden;
  height: 100vh;
  /* Höhe des sichtbaren Bereichs */
  min-height: 800px;
  background: #000;
  /* Fallback */
}

@media (max-width: 900px) {
  .hero {
    min-height: 100svh;
    height: auto;
    padding-top: 0px;
  }
}


/* 2) Dunklen Verlauf aus dem Overlay ENTFERNEN */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: url("assets/background.png");
  /* nur das Bild */
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}

/* 3) Sicherheit: kein extra Abstand/Shadow am Übergang */
.hero {
  margin-bottom: 0;
  padding-bottom: 0;
}


/* Text-Inhalt bleibt oben sichtbar */
.hero__content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(1.8rem, 3.6vw + 1rem, 3.2rem);
  line-height: 1.15;
  margin: .4rem 0 1rem
}

.hero .accent {
  color: #eaf6ff
}

.hero .sub {
  color: var(--muted);
  max-width: 58ch
}

.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem
}

/* Boden/Silhouette */
.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  background: transparent;
  /* Kein dunkler Verlauf mehr */
  z-index: 1;
}

/* ===== Cards / Vorteile ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.card {
  background: linear-gradient(180deg, rgba(12, 19, 48, .7), rgba(6, 12, 30, .7));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.card .icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #092447, #0b2b59);
  margin-bottom: 12px;
  box-shadow: var(--glow)
}

.card svg {
  width: 24px;
  height: 24px;
  fill: #bfe7ff
}

/* ===== Two Column Night Section ===== */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center
}

.two-col h2 {
  font-size: clamp(1.6rem, 1.8vw + 1rem, 2.4rem);
  margin: .4rem 0 1rem
}

.bullets {
  padding-left: 1.1rem
}

.bullets li {
  margin: .2rem 0;
  color: var(--text)
}

.stars-lines {
  position: relative;
  height: 320px;
  border-radius: 18px;
  background: linear-gradient(180deg, #05102a, #091a3e);
  border: 1px solid #163158;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
  overflow: hidden
}

.stars-lines .dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #83d6ff, 0 0 2px #fff
}

.stars-lines .dot:nth-child(1) {
  left: 8%;
  top: 12%
}

.stars-lines .dot:nth-child(2) {
  left: 42%;
  top: 40%
}

.stars-lines .dot:nth-child(3) {
  left: 64%;
  top: 30%
}

.stars-lines .dot:nth-child(4) {
  left: 86%;
  top: 74%
}

.stars-lines .constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stars-lines polyline {
  fill: none;
  stroke: #9ee3ff;
  stroke-width: 2;
  opacity: .8
}


/* ===== Contact Section (cards + form) ===== */
:root {
  --aa-dark: #081225;
  --aa-panel: #0b1730;
  --aa-light: #cfe3ff;
  --aa-accent: #2baaff;
  /* Aqua Agents Blau */
  --aa-accent-glow: #5cc8ff;
  --aa-border: rgba(255, 255, 255, 0.06);
}

.contact-section {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, var(--aa-dark) 0%, #060e20 100%);
}

.contact-section .container {
  width: min(980px, 92%);
  margin-inline: auto;
  text-align: left;
}

.contact-kicker {
  margin-left: 0;
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aa-light);
  margin-bottom: 14px;
}

.contact-title {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  color: var(--aa-light);
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.contact-title span {
  color: #4b7cff;
  text-shadow: 0 0 10px rgba(75, 124, 255, 0.4);
}


.contact-sub {
  text-align: left;
  margin: 0 0 36px 0;
  margin: 10px auto 36px;
  color: rgba(255, 255, 255, 0.7);
  max-width: none;
  width: 100%;
}

/* INFO CARDS */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--aa-panel);
  border: 1px solid var(--aa-border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 0 25px rgba(91, 206, 255, 0.25);
  border-color: rgba(91, 206, 255, 0.5);
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: rgba(43, 170, 255, 0.1);
  color: var(--aa-accent-glow);
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(43, 170, 255, 0.3);
}

.info-icon svg {
  width: 24px;
  height: 24px;
}

.info-label {
  font-weight: 600;
  color: var(--aa-light);
}

.info-value {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: 0.2s;
}

.info-value:hover {
  color: var(--aa-accent-glow);
}

/* FORM */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: rgba(11, 23, 48, 0.6);
  border: 1px solid var(--aa-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form .form-row-full {
  grid-column: 1 / -1;
}

.contact-form label {
  font-weight: 600;
  color: var(--aa-light);
  font-size: 0.92rem;
  text-align: left;
}

.contact-form input,

.contact-form select {
  width: 100%;
  background-color: #0b1530;
  border: 1px solid rgba(80, 180, 255, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  color: rgba(207, 227, 255, 0.6);
  /* gleiche Farbe wie Input-Placeholder */
  font-family: 'Inter', sans-serif;
  /* gleiche Font */
  font-size: 1rem;
  font-style: italic;
  /* Placeholder-Look */
  appearance: none;
  /* entfernt Browser-Stil */
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: color 0.3s ease, font-style 0.3s ease;
}

/* Farbe & Schrift nach Auswahl */
.contact-form select:valid {
  color: #e8f1ff;
  /* normale Aqua Agents Schriftfarbe */
  font-style: normal;
}

/* Dropdown-Pfeil anpassen (optional Aqua-Stil) */
.contact-form select::-ms-expand {
  display: none;
}

.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg fill='rgba(80,180,255,0.8)' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}


.contact-form textarea {
  background: #0a1533;
  color: var(--aa-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--aa-accent);
  box-shadow: 0 0 8px rgba(43, 170, 255, 0.4);
}

.btn-contact {
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--aa-accent-glow), var(--aa-accent));
  box-shadow: 0 0 30px rgba(43, 170, 255, 0.3);
  cursor: pointer;
  transition: 0.3s ease;
}

.btn-contact:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 800px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* Stil für den Placeholder im Dropdown */
.contact-form select option[value=""] {
  color: rgba(207, 227, 255, 0.6);
  /* hellblau-grau wie Aqua Agents Light */
  font-style: italic;
}

/* Stil für den ausgewählten Wert (normale Farbe & Schriftart) */
.contact-form select:valid {
  color: var(--aa-light);
  /* Standard-Textfarbe wie Inputs */
  font-style: normal;
}

/* Workaround: Placeholder wird sichtbar, bis etwas gewählt wurde */
.contact-form select {
  color: rgba(207, 227, 255, 0.6);
  /* Anfangsfarbe (heller Placeholder-Look) */
  font-style: italic;
}

.contact-form select:focus,
.contact-form select:active {
  color: var(--aa-light);
  font-style: normal;
}

/* === Einheitlicher Aqua Agents Placeholder- und Text-Style === */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background-color: #0b1530;
  border: 1px solid rgba(80, 180, 255, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #e8f1ff;
  /* normale Textfarbe */
  transition: all 0.3s ease;
}

/* === Placeholder-Farbe für alle Inputs und Textareas === */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(207, 227, 255, 0.6);
  /* identische Farbe */
  font-style: italic;
}

/* === Select (Dropdown) – gleiche Farbe, Schrift & Verhalten === */
.contact-form select {
  color: rgba(207, 227, 255, 0.6);
  font-style: italic;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='rgba(80,180,255,0.8)' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

/* === Wenn ein Wert im Dropdown gewählt wurde === */
.contact-form select:valid {
  color: #e8f1ff;
  font-style: normal;
}

/* === Hover & Focus Effekte (optional Aqua Glow) === */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: rgba(80, 180, 255, 0.8);
  box-shadow: 0 0 12px rgba(80, 180, 255, 0.3);
  outline: none;
  color: #e8f1ff;
  font-style: normal;
}




/* ===== GLOBAL FOOTER WRAPPER ===== */
/* ===== GLOBAL FOOTER WRAPPER ===== */
.aa-footer {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  margin-top: 0;
  position: relative;
  z-index: 20;
  /* Ensure it sits on top */
  background: var(--bg-1);
  /* Base background */
}

/* ===== OBERER BEREICH MIT ILLUSTRATION ===== */
.aa-footer-main {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1)),
    url("assets/leitungen.png") center bottom / cover no-repeat;
  padding: 80px 20px 60px;
}

.aa-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.aa-footer-col h4 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 15px;
}

.aa-footer-col a {
  display: block;
  color: #ffffffdd;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 6px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.aa-footer-col a:hover {
  opacity: 0.8;
  transform: translateX(2px);
}

.aa-footer-col-right p {
  font-size: 0.95rem;
  /* Matched to links */
  line-height: 1.5;
  margin-top: 0;
  /* Remove default p margin */
  margin-bottom: 6px;
  /* Matched to links */
  color: #ffffffdd;
  /* Matched to links */
}

/* © COPYRIGHT – nur eine schmale Leiste */
/* © COPYRIGHT – nur eine schmale Leiste */
.aa-footer-credit {
  background: #000000;
  text-align: center;
  padding: 12px 0 18px;
  font-size: 0.85rem;
  color: #ffffff88;
  width: 100%;
}

/* Socials neben dem Text */
.aa-footer-col-right .aa-footer-address-social {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

/* Icons etwas nach oben, perfekt parallel zu deinem Text */
.aa-footer-social-vertical {
  display: flex;
  flex-direction: column !important;
  /* Icons untereinander */
  gap: 12px;
  margin-top: -4px;
  /* leicht nach oben, optional */
  align-items: flex-start;
}

/* Social Icons: runde Kreise + Bild füllt Kreis */
.aa-social-circle-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #fff;
}

.aa-social-circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive: Adresse & Social untereinander */
@media (max-width: 900px) {
  .aa-footer-col-right .aa-footer-address-social {
    flex-direction: column;
    align-items: flex-start;
  }
}


.aa-footer-social-vertical {
  flex-direction: row;
}

@media (max-width: 600px) {
  .aa-footer-social-vertical {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Hide contact details only on small mobile screens */
  .footer-contact-details {
    display: none;
  }
}

/* FIXED SOCIAL ICONS AM RECHTEN RAND */
.socials-fixed {
  position: fixed;
  right: 30px;
  bottom: 50%;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 9999;
}

/* Runde Kreise */
.socials-fixed a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.socials-fixed a img {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

.social-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #ffffff;
  position: relative;
  /* ← Wichtig */
  overflow: hidden;
  /* ← Schneidet Ränder sauber ab */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: 0.25s ease;
}

.social-icon-wrap lord-icon {
  width: 55px !important;
  height: 55px !important;
  position: absolute;
  /* ← Perfekt zentriert */
  inset: 0;
  margin: auto;
  transform: translateX(-4px);
}


/* Hover Effekt */
.socials-fixed a:hover {
  transform: scale(1.08);
  opacity: 0.9;
}



.aa-footer-bottom {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aa-footer-bottom-links {
  justify-content: center;
}


/* ===== Responsive ===== */
@media (max-width: 960px) {
  .cards {
    grid-template-columns: 1fr
  }

  .two-col {
    grid-template-columns: 1fr
  }
}

@media (max-width: 860px) {

  .nav nav,
  .nav-cta {
    display: none
  }

  /* Layout erzwingen: Links leer, Mitte Logo, Rechts Burger */
  .nav.nav-centered {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .center-brand {
    grid-column: 2;
  }

  .hamburger {
    display: block;
    grid-column: 3;
    justify-self: end;
    cursor: pointer;
    /* Show it's clickable */
    pointer-events: auto;
    /* Force events */
    z-index: 200;
    /* Ensure it's on top */
    background: transparent;
    /* Fix background */
  }

  /* Footer Mobile Fix */
  .aa-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 0 20px;
  }

  /* Removed .footer-contact-details rule from here */

  .aa-footer-address p {
    margin-top: 0;
  }

  /* Ensure footer columns display correctly in grid */
  .aa-footer-col {
    display: block;
    text-align: left;
  }

  /* Ensure Address column spans correctly or sits nicely */
  .aa-footer-col:last-child {
    display: block;
  }

  .aa-footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    /* Tighter spacing */
  }

  .aa-footer-col a,
  .aa-footer-col p {
    font-size: 0.95rem;
    line-height: 1.4;
    /* Better reading flow */
  }

  .aa-footer-address-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align left */
    gap: 15px;
  }
}

#vorteile {
  background: #050816;
  /* gleichmäßig dunkles Schwarz-Blau */
  padding-top: 40px;
  padding-bottom: 100px;
}

#vorteile .section-title {
  margin-top: 0;
  margin-bottom: 60px;
  /* kann bleiben oder leicht anpassen */
}


body,
#vorteile {
  background: #050816;
  /* KEIN !important nötig */
  animation: none;
}


/* Vollbreites Hintergrundbild + angeglichener Verlauf */
#analyse.section.section--night {
  position: relative;
  width: 100vw;
  /* volle Bildschirmbreite */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  /* verhindert Container-Einschränkung */
  margin-right: -50vw;
  min-height: 100vh;

  background:
    linear-gradient(to bottom,
      #050816 0%,
      /* oben gleiche Farbe */
      rgba(5, 8, 22, 0) 20%,
      /* sanfter Übergang */
      rgba(5, 8, 22, 0) 80%,
      #050816 100%
      /* unten gleiche Farbe */
    ),
    url("assets/background_technik.png") center center / cover no-repeat;
  background-size: cover;
  background-attachment: scroll;
  z-index: 1;
}

#analyse::before,
#analyse::after {
  content: none !important;
}

#analyse .container {
  position: relative;
  top: -6vh;
  padding-bottom: 8vh;
}

/* Auf kleinen Screens weniger verschieben */
@media (max-width: 768px) {
  #analyse .container {
    top: -3vh;
  }
}

/* --- Hintergrundbild mit dunklem Verlauf --- */
#analyse {
  position: relative;
  background: url("background_technik.png") center center / cover no-repeat;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#analyse::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 8, 22, 0.9) 0%, rgba(5, 8, 22, 0.3) 40%, rgba(5, 8, 22, 0.9) 100%);
  z-index: 0;
}

/* --- Glas-Effekt Card --- */
.analyse-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

.analyse-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 48px 56px;
  max-width: 720px;
  color: #fff;
  text-align: left;
  transform: translateY(-60px);
}

.analyse-card h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #e6f0ff;
}

.analyse-card p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #cfd8e3;
}

.analyse-card ul {
  margin-bottom: 24px;
  list-style-type: disc;
  padding-left: 20px;
  color: #cfd8e3;
}

.analyse-card li {
  margin-bottom: 6px;
}

.analyse-card .button {
  display: inline-block;
  background: linear-gradient(90deg, #009cff, #00b8ff);
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 12px 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.analyse-card .button:hover {
  background: linear-gradient(90deg, #00b8ff, #009cff);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .analyse-card {
    padding: 30px 20px;
    /* Reduced padding */
    transform: none;
    /* Remove negative margin/transform */
    margin: 20px 16px;
    /* Add spacing */
  }

  .analyse-card h2 {
    font-size: 1.6rem;
  }
}


/* ===== Testimonials ===== */
#testimonials {
  position: relative;
  padding: 80px 0;
}

.testi-head .section-title {
  font-weight: 700;
}

.testi-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
}

@media (max-width: 600px) {
  .testi-carousel {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    /* Context for absolute arrows */
  }

  .testi-nav {
    display: flex;
    /* Show arrows */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    /* Ensure it's above everything */
    background: rgba(12, 19, 48, 0.9);
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Visibility boost */
  }

  .testi-nav.prev {
    left: 10px;
  }

  .testi-nav.next {
    right: 10px;
  }
}

.testi-nav {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0c1330cc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cfe3ff;
  cursor: pointer;
  transition: .2s;
  backdrop-filter: blur(8px);
  z-index: 50;
  /* Ensure desktop arrows are also elevated */
}

.testi-nav:hover {
  filter: brightness(1.1)
}

.testi-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 18px;
  padding: 10px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.testi-track::-webkit-scrollbar {
  display: none
}

.testi-card {
  perspective: 1000px;
  position: relative;
  scroll-snap-align: center;
  /* Essential for snap to work */
}

.testi-card .flip {
  position: relative;
  height: 420px;
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
}

/* Beim Hover: Flip */
.testi-card:hover .flip {
  transform: rotateY(180deg);
}

/* Vorderseite */
.testi-card .front {
  position: relative;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.testi-card .front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Schwarzer Overlay für Bild */
.testi-card .front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  /* Dunkelt Bild leicht ab */
  transition: background 0.3s ease;
}

.testi-card:hover .front::after {
  background: rgba(0, 0, 0, 0.35);
}

/* Text unten */
.testi-card .info {
  position: absolute;
  bottom: 14px;
  left: 20px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6),
    0 0 4px rgba(255, 255, 255, 0.3);
  transition: opacity 0.4s ease, transform 0.3s ease;
  transform: translateY(0);
}

.testi-card .info h3 {
  margin-bottom: 4px;
  font-weight: 700;
  color: #f9fbff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  color: #e0ebff;
  /* deutlich heller */
  font-weight: 500;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Beim Hover bleibt der Text klar, aber leicht angehoben */
.testi-card:hover .info {
  transform: translateY(2px);
  opacity: 0.9;
}



.rating .crossed {
  position: relative;
  color: #50b6ff;
  font-weight: 700;
}

.rating .crossed::before,
.rating .crossed::after {
  /* content: ""; REMOVED so it doesn't show double lines */
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #ff4d4d;
  transform: rotate(-15deg);
}

.rating .crossed::after {
  transform: rotate(15deg);
}


/* ===== STORY PAGE SPECIFIC STYLES (Clean Design) ===== */

/* Layout Fix: Ensure footer is pushed down */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    width: 100%;
}

/* Story Grid */
.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 40px;
    width: min(1200px, 92%);
    margin: 60px auto 100px;
}

/* CLEAN Card Design */
.clean-story-card {
    background: #0f172a;
    /* Solid dark background for premium feel */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 440px;
    /* Fixed height for consistency */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.clean-story-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Media Container */
.media-container {
    width: 100%;
    height: 260px;
    /* Dominant visual area */
    background: #000;
    position: relative;
    overflow: hidden;
}

.media-container video,
.media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.clean-story-card:hover .media-container video,
.clean-story-card:hover .media-container img {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

/* Play Icon Overlay */
.video-container .play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-container .play-icon i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.clean-story-card:hover .play-icon {
    opacity: 1;
}

/* Card Content */
.card-content {
    padding: 24px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text vertically in the space */
    background: linear-gradient(to bottom, #0f172a, #0b1120);
}

.card-date {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.3;
    margin: 0;
}

/* Placeholders */
.media-container.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
}

.media-container.placeholder i {
    font-size: 3rem;
    color: #334155;
}

/* ===== MODAL STYLES (Split View) ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background-color: #0f172a;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    max-height: 90vh;
    margin-top: 5vh;
    border-radius: 20px;
    box-shadow: 0 25px 100px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    z-index: 1002;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    transition: all 0.2s;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.modal-media-side {
    flex: 1.8;
    /* Give media more space */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.modal-media-side video,
.modal-media-side img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 90vh;
}

.modal-text-side {
    flex: 1;
    padding: 50px;
    overflow-y: auto;
    background: #111827;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.modal-text-side h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #f1f5f9;
    line-height: 1.2;
}

.modal-text-side .modal-date {
    color: #60a5fa;
    /* Accent color */
    font-size: 1rem;
    margin-bottom: 2rem;
    display: inline-block;
    font-weight: 600;
}

.modal-text-side p {
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Modal Responsive */
@media (max-width: 1024px) {
    .modal-content {
        width: 95%;
        margin-top: 2.5vh;
        max-height: 95vh;
    }

    .modal-text-side {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .modal-content {
        max-height: 100vh;
        margin-top: 0;
        border-radius: 0;
    }

    .modal-split {
        flex-direction: column;
        overflow-y: auto;
    }

    .modal-media-side {
        flex: none;
        height: 40vh;
        min-height: 300px;
    }

    .modal-text-side {
        flex: none;
        min-height: 50vh;
    }
}

/* Loading Spinner for JS */
.loading-spinner {
    height: 300px;
    display: none;
    /* JS controlled */
    align-items: center;
    justify-content: center;
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.rating .crossed::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.rating .crossed::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Rückseite */
.testi-card .back {
  background: linear-gradient(180deg, #0d1b3a, #08142a);
  color: #fff;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: rotateY(180deg);
  opacity: 0;
  backface-visibility: hidden;
  transition: opacity 0.4s ease;
}

/* Effekt beim Hover */
.testi-card:hover .front .info {
  opacity: 0;
}

.testi-card:hover .back {
  opacity: 1;
}


.rating .active:hover,
.rating .cross:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #eaf0ff;
  margin-bottom: 6px;
}

.section-subtitle {
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: #a6b3c9;
  margin-bottom: 40px;
}

.vorteile-section {
  text-align: center;
  padding-top: 180px;
  /* Abstand nach oben */
  padding-bottom: 80px;
  /* Abstand nach unten */
}

.vorteile-section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #eaf0ff;
  margin-bottom: 60px;
  /* <--- hier Abstand zu den Cards */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.vorteile-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  /* Abstand zwischen den Cards */
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .vorteile-section h2 {
    margin-bottom: 40px;
  }

  .vorteile-cards {
    gap: 20px;
  }
}

/* =========================
   KONTAKT-SEKTION DESIGN
   ========================= */
#kontakt {
  position: relative;
  padding: 120px 0;
  background: url("assets/kontakt.png") center -120px / cover no-repeat;
  background-attachment: fixed;
  /* optional, für Tiefe */
  color: #fff;
}

/* ===== Formular-Container ===== */
#kontakt form {
  position: relative;
  z-index: 1;
  background: rgba(8, 18, 40, 0.55);
  /* transparente Fläche */
  border: 1px solid rgba(100, 180, 255, 0.25);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 10px 40px rgba(0, 30, 80, 0.4),
    inset 0 0 20px rgba(100, 180, 255, 0.1);
  max-width: 900px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

/* ===== Texte und Labels ===== */
#kontakt form h2,
#kontakt form h3,
#kontakt form label {
  color: #eaf3ff;
}

/* ===== Eingabefelder ===== */
#kontakt form input,
#kontakt form select,
#kontakt form textarea {
  width: 100%;
  background: rgba(10, 25, 50, 0.45);
  border: 1px solid rgba(80, 150, 255, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  color: #dceaff;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

#kontakt form textarea {
  resize: vertical;
  min-height: 160px;
}

/* Placeholder */
#kontakt form ::placeholder {
  color: rgba(180, 210, 255, 0.55);
}

/* Fokus-Effekt */
#kontakt form input:focus,
#kontakt form select:focus,
#kontakt form textarea:focus {
  border-color: rgba(100, 200, 255, 0.7);
  box-shadow: 0 0 12px rgba(100, 200, 255, 0.3);
}

/* Select Pfeil */
#kontakt form select {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%23aee0ff' stroke-width='2'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

/* ===== Submit Button ===== */
#kontakt form button,
#kontakt form input[type="submit"] {
  width: 100%;
  background: linear-gradient(90deg, #59b7ff, #6dd8ff);
  border: none;
  color: #041220;
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 20px;
  cursor: pointer;
  box-shadow:
    0 10px 25px rgba(0, 100, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

#kontakt form button:hover,
#kontakt form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(80, 180, 255, 0.5),
    inset 0 -2px 5px rgba(0, 0, 0, 0.25);
}

/* ===== Grid Layout für Eingabefelder ===== */
#kontakt form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* ===== Responsivität ===== */
@media (max-width: 768px) {
  #kontakt {
    padding: 80px 0;
    background-attachment: scroll;
  }

  #kontakt form {
    padding: 20px;
    border-radius: 20px;
  }
}


/* Inputs / Select / Textarea – Glassy + Glow */
#kontakt form input[type="text"],
#kontakt form input[type="email"],
#kontakt form input[type="tel"],
#kontakt form input[type="number"],
#kontakt form select,
#kontakt form textarea {
  width: 100%;
  appearance: none;
  background: linear-gradient(180deg, rgba(8, 18, 40, .65), rgba(5, 14, 32, .55));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--text);
  outline: none;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease, transform .08s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

#kontakt form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Placeholder & helper text */
#kontakt form ::placeholder {
  color: rgba(170, 210, 255, .55);
}

/* Toast – kleine Karte über dem Screen */
#toast-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.toast {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  min-width: 260px;
  max-width: min(92vw, 560px);
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10, 24, 56, .72);
  border: 1px solid rgba(120, 190, 255, .25);
  color: #eaf3ff;
  font-weight: 600;
  letter-spacing: .1px;
  box-shadow: 0 12px 40px rgba(0, 20, 60, .35), inset 0 0 24px rgba(120, 190, 255, .07);
  backdrop-filter: blur(10px) saturate(140%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  animation: toast-in .26s ease both;
}

.toast.success {
  border-color: rgba(120, 255, 195, .35);
}

.toast.error {
  border-color: rgba(255, 120, 120, .4);
}

.toast .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.toast.success .dot {
  color: #65ffbf;
  background: #65ffbf;
}

.toast.error .dot {
  color: #ff8b8b;
  background: #ff8b8b;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
}

/* ===== Karriere-Seite ===== */

.career-page {
  background: #000;
  /* kompletter Hintergrund schwarz */
  color: #f5f5f5;
  /* heller Text */
}

/* ===== Karriere Hero (1:1 wie Vorlage) ===== */

.career-hero {
  padding: 210px 0 100px;
  background: #000;
}


/* Container für Text + Logo */
.career-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* Text links, Logo rechts */
  align-items: flex-start;
}

/* Textblock (egal ob du career-text oder career-hero-text im HTML benutzt) */
.career-hero-text,
.career-text {
  max-width: 900px;
  /* schön breit wie im Screenshot */
}

/* Überschrift */
.career-hero-text h1,
.career-text h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 20px;
}

/* Blaue zweite Zeile */
.career-hero-text h1 span,
.career-text h1 span {
  color: #427BFF;
}

/* Blaue Linie */
.career-hero-line {
  width: 880px;
  /* feste Länge wie im Screenshot */
  max-width: 100%;
  height: 2px;
  background: #427BFF;
  margin: 20px 0 36px;
}

/* Fließtext */
.career-hero-text p,
.career-text p {
  max-width: 800px;
  color: #e6e6e6;
  line-height: 1.6;
  margin-bottom: 12px;
  font-size: 0.98rem;
}

/* Logo rechts */
.career-hero-logo img {
  width: 300px;
  height: auto;
  /* Removed aggressive positioning to ensure visibility */
}


/* Responsive: untereinander auf kleineren Screens */
@media (max-width: 900px) {
  .career-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 0 20px;
  }

  .career-hero-logo img {
    margin-top: 0;
  }
}

/* ===== Black Page Transition ===== */

#page-black {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.45s ease;
}

#page-black.active {
  opacity: 1;
}

/* ===== Karriere – moderne Punkteliste mit Icons ===== */

.career-list-section {
  padding: 70px 20px 100px;
  background: #000;
}

.career-list-group {
  max-width: 1100px;
  margin: 0 auto 48px;
}

.career-list-heading {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #427BFF;
  margin-bottom: 20px;
}

/* Grid für die einzelnen Items */
.career-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
}

.career-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(66, 123, 255, 0.18), transparent 55%),
    rgba(7, 12, 32, 0.96);
  border: 1px solid rgba(120, 190, 255, 0.18);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  opacity: 0;
  transform: translateY(12px);
  animation: careerListIn 0.6s ease-out forwards;
}

/* kleine Verzögerung pro Item */
.career-list-item:nth-child(1) {
  animation-delay: 0.05s;
}

.career-list-item:nth-child(2) {
  animation-delay: 0.1s;
}

.career-list-item:nth-child(3) {
  animation-delay: 0.15s;
}

.career-list-item:nth-child(4) {
  animation-delay: 0.2s;
}

.career-list-item:nth-child(5) {
  animation-delay: 0.25s;
}

.career-list-item:hover {
  transform: translateY(0);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  border-color: rgba(120, 190, 255, 0.45);
  background: rgba(9, 16, 44, 0.98);
}

/* Icon-Kreis – hier später deine eigenen Icons rein */
.career-list-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 10%, #ffffff, #6da6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.career-list-icon {
  font-size: 1.4rem;
  color: #0b1638;
}

/* falls du später <img> benutzt */
.career-list-icon-img {
  width: 24px;
  height: 24px;
}

/* Textbereich */
.career-list-text h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #ffffff;
}

.career-list-text p {
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.6;
  color: #c6d3ff;
}

/* Entry-Animation */
@keyframes careerListIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive – auf Mobile einspaltig */
@media (max-width: 900px) {
  .career-list-grid {
    grid-template-columns: 1fr;
  }
}

/* SPACER SECTION */
.black-spacer {
  width: 100%;
  height: 200px;
  background-color: #000;
  position: relative;
  z-index: 10;
}

/* Kontaktbereich NUR in karriere.html ohne Hintergrundbild */
body.career-page .contact-section {
  background: #000;
  /* Clean Schwarz */
  background-image: none !important;
  margin-top: 100px;
  padding-top: 200px !important;
  position: relative;
  z-index: 50;
  clear: both;
  background-attachment: scroll !important;
}

.career-cta {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  margin: -30px 0 -30px;
  /* ↓ weniger Abstand oben und unten */
  letter-spacing: 0.3px;
}

.career-cta span {
  color: #4b7cff;
  cursor: pointer;
  transition: 0.3s ease;
}

.career-cta span:hover {
  color: #6d93ff;
  text-shadow: 0 0 12px rgba(75, 124, 255, 0.6);
}

.career-cta a {
  text-decoration: none;
}

body.career-page #kontakt {
  margin-top: -140px !important;
}

body.career-page #topic {
  pointer-events: none;
  background: #0e162e;
  color: #9cb8ff;
}

/* ===== Mobile Menu Styling (Floating Oval) ===== */
.mobile-menu {
  position: fixed;
  top: 100px;
  /* unter der Header-Bar */
  left: 50%;
  transform: translateX(-50%);
  /* Zentrierung */
  width: min(680px, 94%);

  /* HIDDEN BY DEFAULT */
  display: none;

  background: rgba(8, 15, 40, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(90, 150, 255, 0.25);
  border-radius: 32px;
  /* Ovaler Look */

  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 300;
  /* Higher than burger (200) and header (100) */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);

  transform-origin: top center;
  animation: mobileMenuIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* SHOW WHEN ACTIVE */
.mobile-menu.active {
  display: flex !important;
}

/* Compatibility for old hidden attr if needed, but active is primary */
.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu a.active {
  color: #4b7cff;
  font-weight: 700;
}

.mobile-menu a {
  font-size: 1.1rem;
  font-weight: 600;
  color: #d8e7ff;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.2s;
}

.mobile-menu a:hover {
  color: #66d1ff;
}

/* Button im Mobile Menu */
.mobile-menu .btn.pill {
  margin-top: 8px;
  background: linear-gradient(90deg, #2aa8ff, #66d1ff);
  color: #050816;
  border: none;
  border-radius: 99px;
  padding: 10px 32px;
  box-shadow: 0 0 20px rgba(42, 168, 255, 0.4);
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Störende Elemente auf Mobile ausblenden */
@media (max-width: 800px) {
  .socials-fixed {
    display: none !important;
  }
}

/* ===== 3D CAROUSEL CSS ===== */
.career-3d-section {
  position: relative;
  background: #000;
  padding: 80px 0 120px;
  text-align: center;
  /* Fixed visibility - always show content */
  opacity: 1;
  transform: none;
  overflow: visible;
  /* Forced visible to show side cards */
}

/* NETFLIX RED VIGNETTE BACKGROUND */
.netflix-bg-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(42, 168, 255, 0.25) 0%, rgba(11, 23, 48, 0.4) 50%, #000000 80%);
  background-color: #000;
  z-index: 1;
  pointer-events: none;
}

.career-3d-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.carousel-3d-view {
  position: relative;
  perspective: 2500px;
  /* Sehr flache, weite Perspektive */
  height: 440px;
  width: 100%;
  max-width: 1400px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible !important;
  /* Force side cards visibility */
}

/* Container für die Positionierung */
.carousel-3d-stage {
  position: relative;
  width: 100%;
  /* FULL WIDTH NOW */
  height: 480px;
  /* More height for hover effects */
  transform-style: preserve-3d;
  overflow: visible;
}

.c3d-card {
  position: absolute;
  top: 10px;
  /* Centering Logic */
  left: 50%;
  width: 260px;
  margin-left: -130px;
  /* Half of width to center */
  height: 380px;

  background: #000;
  border-radius: 12px;
  /* Removed border to be cleaner */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* Spiegelung */
  -webkit-box-reflect: below 5px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

  /* Smooth interpolation */
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s, filter 0.4s, box-shadow 0.4s;

  backface-visibility: visible;
  z-index: 10;
}

/* Active Glow State - Netflix Red */
.c3d-card.active-card {
  box-shadow: 0 0 50px rgba(229, 9, 20, 0.5);
  border: 1px solid rgba(229, 9, 20, 0.8);
  z-index: 50;
}

/* Mobile Visibility Class (gesteuert durch JS) */
.c3d-card.mobile-hidden {
  opacity: 0;
  pointer-events: none;
}

.c3d-image-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

/* REMOVED BLUE OVERLAY for Netflix Style */
.c3d-image-wrap::after {
  display: none;
}

.c3d-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* REMOVED BLUE FILTERS - Natural colors */
  filter: brightness(0.9);
}

.c3d-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 10, 30, 0.95), rgba(0, 0, 0, 0));
  padding: 28px 20px;
  text-align: center;
  z-index: 2;
  transform: translateY(0);
  /* Immer sichtbar wie im Design */
}

.c3d-overlay h3 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 0 15px rgba(0, 150, 255, 0.8);
}

.c3d-overlay p {
  font-size: 0.8rem;
  color: #a0c0ff;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Nav Buttons */
.c3d-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(8, 15, 30, 0.6);
  border: 1px solid rgba(0, 150, 255, 0.4);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 50;
  /* Increased to ensure clickability */
  backdrop-filter: blur(8px);
  transition: 0.3s;
  display: grid;
  place-items: center;
}

.c3d-nav:hover {
  background: rgba(0, 150, 255, 0.9);
  border-color: #00C6FF;
  box-shadow: 0 0 25px rgba(0, 150, 255, 0.5);
}

.c3d-nav.prev {
  left: 4%;
}

.c3d-nav.next {
  right: 4%;
}

/* Responsive adjustments */
@media (max-width: 800px) {
  .carousel-3d-view {
    height: 400px;
    perspective: 1500px;
    width: 100vw;
    overflow: hidden;
    /* Auf Mobile darf nichts überstehen */
  }

  .carousel-3d-stage {
    width: 220px;
    height: 320px;
  }

  /* Auf Mobile verstecken wir die äußeren Karten via JS + CSS */
}

/* ===== 3D Circle Carousel (User Request) ===== */
.circle-wrapper {
  width: 100%;
  height: 1200px;
  /* Increased height further to prevent bottom clipping */
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Keep hidden to contain width, height is now enough */
  margin-top: -300px;
  /* Pull closer to headline, compensated for height increase */
}

.circle-inner {
  --w: 260px;
  /* Reduced size slightly to fit screen */
  --h: 390px;
  --translateZ: 290px;
  --rotateX: 0deg;
  /* Removed tilt so front card stands straight */
  --perspective: 1000px;
  position: relative;
  /* Changed to relative for flex centering */
  width: var(--w);
  height: var(--h);
  z-index: 2;
  transform-style: preserve-3d;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0deg);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.circle-card {
  position: absolute;
  border-radius: 24px;
  /* Runder */
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
  /* Removed border/overflow here, moved to inner faces for clean flip */
  transform-style: preserve-3d;

  /* Reflection Effect - Enhanced 3D feel */
  -webkit-box-reflect: below 15px linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 100%);

  /* Visibility Logic: Only active card visible */
  opacity: 0.4;
  filter: blur(5px) brightness(0.7);
  transition: all 0.6s ease-in-out;
  pointer-events: none;
  /* Prevent clicking hidden cards */
}

.circle-card.active {
  opacity: 1;
  filter: blur(0) brightness(1);
  pointer-events: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 50;
  /* Ensure on top */
}

/* 3D Flip Wrapper */
.card-inner-3d {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.circle-card.flipped .card-inner-3d {
  transform: rotateY(180deg);
}

/* Front & Back Faces */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Default column, overridden for front layout if needed or use internal wrappers */
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Reset padding to handle internally */
  border: 1px solid rgba(0, 150, 255, 0.1);
  box-shadow: 0 0 30px rgba(0, 100, 255, 0.05);
  background: #000;
}

/* Front Face Styling - High End Dark Mode */
.card-front {
  background: linear-gradient(145deg, #020b16 0%, #000000 100%);
  /* Deep Blue-Black */
  display: flex;
  flex-direction: row;
  /* Layout: Left Icon, Right Text */
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  border: 1px solid rgba(0, 200, 255, 0.2);
  /* Neon Blue Border */
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.1), inset 0 0 20px rgba(0, 200, 255, 0.05);
  /* Glassmorphism Glow */
}

.card-icon-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 200, 255, 0.08);
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
  /* Glowing Halo */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 15px;
  border: 1px solid rgba(0, 200, 255, 0.3);
}

.card-content-right {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
}

.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

.card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #8899b0;
  /* Light Blue-Grey */
  line-height: 1.4;
  font-weight: 400;
}


/* Back Face Styling */
.card-back {
  background: linear-gradient(135deg, #001a33 0%, #000000 100%);
  color: #fff;
  transform: rotateY(180deg);
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(0, 200, 255, 0.1);
}

.card-back p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #aaccff;
}

/* Controls - Side Arrows */
.circle-nav-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 5%;
  /* Move arrows slightly wider */
  display: flex;
  justify-content: space-between;
  z-index: 60;
  /* Above cards */
  pointer-events: none;
  /* Let clicks pass through container */
}

.circle-btn {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 200, 255, 0.3);
  color: #00c3ff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.3s;
  pointer-events: auto;
  /* Re-enable clicks on buttons */
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.2);
}

.circle-btn:hover {
  background: rgba(0, 200, 255, 0.2);
  color: #fff;
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.6);
  transform: scale(1.1);
}

/* Category Tabs */
.carousel-tabs {
  position: absolute;
  top: -15%;
  /* Position above the ring */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
}

.tab-btn {
  background: rgba(11, 23, 48, 0.6);
  border: 1px solid rgba(66, 180, 255, 0.3);
  color: #8dbaff;
  padding: 10px 20px;
  border-radius: 99px;
  cursor: pointer;
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background: rgba(42, 168, 255, 0.25);
  border-color: #2aa8ff;
  color: #fff;
  box-shadow: 0 0 15px rgba(42, 168, 255, 0.3);
}

.card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* ===== NATURE LAYOUT REDESIGN ===== */
.nature-section {
  position: relative;
  width: 100vw;
  min-height: calc(100vh + 80px);
  /* Adapts to content, at least full screen */
  height: auto;
  overflow: hidden;
  background: #000;
  font-family: 'Inter', sans-serif;
  margin-top: -80px;
  /* Pull up behind navbar if navbar is 80px */
}

.nature-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  /* Focus on lower part */
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
}

.nature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.nature-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: 100vh;
  /* Match section */
  padding-top: 0;
  /* Removed shared padding */
  /* padding-bottom removed to allow sidebar to touch bottom */
}

/* LEFT HERO AREA */
.nature-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Changed from center to start to align with padding */
  padding: 400px 5vw 0 5vw;
  /* Content moved higher up (closer to buttons) */
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 0.8s ease-out forwards 0.3s;
  position: relative;
}

.hero-top-text {
  position: absolute;
  top: 240px;
  /* Moved down */
  left: 5vw;
  z-index: 10;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c7d5e6;
  line-height: 1.4;
  border-left: 3px solid #4b7cff;
  padding-left: 15px;
  pointer-events: none;
}

.nature-tabs {
  position: absolute;
  top: 340px;
  /* More space from headline */
  left: 5vw;
  z-index: 10;
  display: flex;
  gap: 15px;
}

.n-tab {
  padding: 10px 20px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9rem;
}

.n-tab:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.n-tab.active {
  background: #4b7cff;
  border-color: #4b7cff;
  box-shadow: 0 5px 15px rgba(75, 124, 255, 0.3);
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-index {
  position: absolute;
  top: 260px;
  left: 45vw;
  /* Adjusted slightly right from 40vw */
  font-size: 8rem;
  font-weight: 200;
  line-height: 1;
  opacity: 0.3;
  color: #fff;
  z-index: 5;
  pointer-events: none;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hero-desc {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 550px;
  color: #e0eaff;
  margin-bottom: 3rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-btn {
  padding: 18px 45px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: #4b7cff;
  border: none;
  border-radius: 99px;
  width: fit-content;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(75, 124, 255, 0.4);
}

.hero-btn:hover {
  background: #3a63cc;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(75, 124, 255, 0.6);
}

/* RIGHT SIDEBAR */
.nature-sidebar {
  width: 450px;
  height: auto;
  /* Fit content */
  min-height: 100vh;
  /* Full height min */
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  overflow-y: hidden;
  /* Scroll disabled */
  display: flex;
  flex-direction: column;
  padding: 110px 20px 20px 20px;
  /* Cards moved slightly down (110px) */
  gap: 20px;
  /* Spacing between cards */
  scrollbar-width: none;
  z-index: 20;
}

.nature-sidebar::-webkit-scrollbar {
  display: none;
}

/* RESPONSIVE NATURE SECTION */
@media (max-width: 1024px) {
  .nature-content-wrapper {
    flex-direction: column;
    padding-top: 100px;
    /* Space for fixed nav */
  }

  /* Reset Absolute Positioning to Flow */
  .hero-top-text {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 20px 20px 20px;
    border-left: 3px solid #4b7cff;
  }

  .nature-tabs {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 20px 30px 20px;
    flex-wrap: wrap;
    /* allow wrapping */
  }

  .nature-hero {
    padding: 0 20px;
    margin-bottom: 40px;
    min-height: auto;
    /* Remove fixed spacing */
  }

  .hero-index {
    display: none;
    /* Hide huge index on mobile */
  }

  .hero-title {
    font-size: 3rem;
    /* Smaller title */
  }

  .nature-sidebar {
    width: 100%;
    min-height: auto;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    /* Darker bg for readability */
    overflow-y: visible;
    /* Allow scroll if needed/stacked */
  }

  .nature-section {
    height: auto;
    min-height: calc(100vh + 80px);
    overflow-y: visible;
    /* Scrollable main page */
  }
}

/* REDESIGNED CARD (Ref Image) */
.n-card {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.3s;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.n-card:hover {
  transform: scale(1.02);
  padding: 0;
  /* Reset hover padding from prev */
  background: inherit;
  /* Reset */
}

.n-card.active {
  border: 2px solid #4b7cff;
  transform: scale(1.02);
}

.n-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.n-card-index {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 4rem;
  font-weight: 700;
  color: #fff;
  opacity: 0.9;
  line-height: 1;
}

.n-card-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 2;
}

.n-card-icon-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #4b7cff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.n-card-text {
  display: flex;
  flex-direction: column;
}

.n-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.n-card-subtitle {
  font-size: 0.85rem;
  color: #ccc;
  font-weight: 400;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
  .nature-content-wrapper {
    flex-direction: column;
    padding-top: 80px;
  }

  .nature-sidebar {
    width: 100%;
    height: 40%;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
  }

  .n-card {
    width: 280px;
    height: 160px;
  }

  .nature-hero {
    height: 60%;
    padding: 20px;
    justify-content: flex-end;
  }

  .hero-index {
    font-size: 5rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }
}

/* =========================================
   MOBILE RESPONSIVENESS (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {

  /* 1. Nature Layout Stack */
  /* 1. Nature Layout Stack */
  .nature-content-wrapper {
    flex-direction: column;
    padding-top: 0;
    min-height: 100dvh;
    /* Full viewport height */
    display: flex;
    justify-content: space-between;
    /* Distribute space */
    padding-bottom: 0;
  }

  /* 2. Hero Adjustments */
  .nature-hero {
    order: 2;
    /* Main Text Second */
    padding: 20px 20px 20px 20px;
    /* Reduced top padding further, relying on top-text */
    height: auto;
    width: 100%;
    align-items: flex-start;
    flex: 1;
    /* Grow to fill space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
  }

  /* 3. Fluid Headline */
  .hero-title {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    /* Scales with width */
  }

  /* 4. Top Text Flow */
  .hero-top-text {
    order: 1;
    /* Top Text First */
    position: relative;
    /* No longer absolute */
    top: auto;
    left: auto;
    margin-bottom: 0px;
    margin-top: 220px;
    /* Push down from navbar */
    font-size: 0.8rem;
    padding-left: 0;
    border-left: none;
    /* remove border if needed or keep it style dependent */
    border-left: 3px solid #4b7cff;
    /* Keep the style */
    padding-left: 15px;
    margin-left: 20px;
    /* Align with padding */
  }

  /* Hide Index Numbers on Mobile */
  .hero-index,
  .n-card-index {
    display: none !important;
  }

  /* 3. Sidebar - Horizontal Scroll */
  .nature-sidebar {
    order: 4;
    /* Cards Last */
    width: 100%;
    height: auto;
    min-height: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 20px 40px 20px;
    margin-top: 0;
    /* REMOVED TYPO/MARGIN */
    flex-shrink: 0;
    /* Don't shrink cards */
    /* Push cards down */
    gap: 15px;
    background: transparent;
    /* Transparent to show hero image */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll iOS */
    padding-bottom: 20px;
    /* Reset padding */
  }

  /* Cards for Horizontal Scroll */
  .n-card {
    min-width: 280px;
    width: 280px;
    height: 180px;
  }

  /* 4. Tabs Positioning */
  .nature-tabs {
    order: 3;
    /* Tabs Third (Above Cards) */
    position: relative;
    /* No longer absolute */
    top: auto;
    left: auto;
    transform: none;
    margin: 20px 0 20px 20px;
    /* Spacing */
    display: flex;
    flex-wrap: nowrap;
    /* Single row */
    overflow-x: auto;
    /* Scrollable */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll */
    gap: 10px;
    z-index: 50;
    padding-right: 20px;
    /* Padding for end of scroll */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
  }

  /* Hide scrollbar for Chrome/Safari */
  .nature-tabs::-webkit-scrollbar {
    display: none;
  }

  .n-tab {
    flex-shrink: 0;
    /* Don't shrink buttons */
    white-space: nowrap;
    /* Keep text on one line */
  }

  .n-tab {
    font-size: 0.9rem;
    padding: 10px 16px;
  }

  /* 5. Spacer & Contact Reset */
  .black-spacer {

    /* 5. Spacer & Contact Reset */
    .black-spacer {
      height: 50px;
      /* Reduced spacer */
      display: block;
      background: #000 !important;
      opacity: 1;
      position: relative;
      z-index: 40;
    }

    body.career-page .contact-section {
      margin-top: 0;
      padding-top: 40px !important;
      position: relative;
      z-index: 50;
      background: #000 !important;
    }

    .nature-content-wrapper {
      /* (Moved to top rule) */
    }

    .nature-content-wrapper {
      flex-direction: column;
      padding-top: 0;
      padding-bottom: 0;
      /* Remove gap */
      /* Add bottom padding to wrapper */
    }

    /* Adjust Container Widths */
    .container {
      width: 90%;
      padding: 0;
    }

    /* Contact Title Size */
    .contact-title {
      font-size: 2rem;
    }
  }
}

/* Startseite Mobile Hero Anpassung */
@media (max-width: 768px) {
  .hero {
    min-height: 650px;
    /* Reduced from 800px */
    height: auto;
    padding-bottom: 60px;
  }
}

/* =========================================
   SERVICE PAGE - DIGITAL KENSEI THEME
   ========================================= */

/* General Service Page Overrides */
body:has(.dk-hero) {
  background-color: #ffffff;
  color: #000000;
}

/* --- HERO SECTION --- */
.dk-hero {
  position: relative;
  height: 110vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 1. Bottom Fade to Black */
  /* 2. Side Gradients (Darker on edges) & General Dark Overlay (via opacity in middle) */
  /* 3. Image */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, #000 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.9) 100%),
    url('assets/service.png') center 70% / cover no-repeat;
}

.dk-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: flex-start;
  padding-top: 0;
}

.dk-hero__text {
  max-width: 900px;
  position: relative;
  margin-left: 80px;
}

.dk-title {
  font-weight: 900;
  line-height: 1.0;
  /* Increased from 0.85 to fix clipping */
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 20px;
  padding-top: 10px;
  /* Extra breathing room */
}

.dk-title-line,
.dk-title-sub {
  display: block;
  background: linear-gradient(120deg, #ffffff 0%, #ffffff 65%, #a2d9ff 88%, #2aa8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dk-title-line {
  font-size: clamp(6rem, 10vw, 12rem);
  letter-spacing: -2px;
  padding-top: 0.15em;
  /* Space for Umlaut dots */
  margin-top: -0.15em;
  /* Align back */
  line-height: 1.1;
  padding-right: 0.4em;
}

.dk-title-sub {
  font-size: clamp(4rem, 8vw, 9rem);
  margin-left: 2px;
}

.dk-japanese {
  font-size: 2.5rem;
  position: absolute;
  top: 20px;
  right: -120px;
  opacity: 0.8;
}

.dk-hero-desc {
  margin-top: 40px;
  border-left: 2px solid #2aa8ff;
  /* Blue accent */
  padding-left: 20px;
}

.dk-hero-desc p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 300;
  /* Gradient for text */
  background: linear-gradient(120deg, #ffffff 0%, #ffffff 65%, #a2d9ff 88%, #2aa8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dk-hero-desc .dk-small {
  font-size: 0.9rem;
  max-width: 250px;
  margin-top: 8px;
  opacity: 0.6;
}

/* Floating Card in Hero */
.dk-hero__card {
  position: absolute;
  top: 10%;
  right: 18%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 20px;
  max-width: 300px;
  margin-top: 0;
  transition: all 0.4s ease;
  animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-10px, -15px);
  }
}

/* Hover Effect: Float & Glow */
.dk-hero__card:hover {
  transform: translateY(-10px);
  /* Float up */
  box-shadow: 0 0 30px rgba(42, 168, 255, 0.4);
  /* Blue glow */
  border-color: rgba(42, 168, 255, 0.5);
}

.dk-hero__card .card-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  background: rgba(42, 168, 255, 0.1);
  /* Blue tint */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #2aa8ff;
  /* Blue icon */
}

.dk-hero__card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #2aa8ff;
  font-weight: 700;
}

.dk-hero__card p {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.5;
}


/* --- DESCRIPTION SECTION --- */
/* --- SERVICE CATEGORIES SECTION --- */
.dk-desc-section {
  background: #000000;
  padding: 80px 0;
  position: relative;
  z-index: 5;
  margin-top: -60px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

.service-categories {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.service-cat-item {
  flex: 1;
  min-width: 200px;
  height: 250px;
  background: rgba(255, 255, 255, 0.05);
  /* Slight light on dark */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.service-cat-item h3 {
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  padding: 0 20px;
  transition: all 0.4s ease;
  z-index: 2;
}

.cat-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

.card-bg-icon {
  position: absolute;
  top: 50%;
  right: -5px;
  /* Moved slightly left (was -20px) */
  left: auto;
  transform: translateY(-50%);
  width: 100px;
  /* Large background icon */
  height: 100px;
  pointer-events: none;
  z-index: 0;
  /* Behind text */
  opacity: 0.1;
  /* Very transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-bg-icon svg {
  width: 100%;
  height: 100%;
  stroke: #2aa8ff;
  /* Ensure blue */
  stroke-width: 1px;
}

.cat-icon-secondary {
  display: none;
  /* Hidden on desktop */
}

/* Hover Effects */
.service-cat-item:hover {
  background: rgba(42, 168, 255, 0.1);
  /* Blue tint */
  border-color: #2aa8ff;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(42, 168, 255, 0.2);
}

.service-cat-item:hover h3 {
  transform: translateY(-10px);
  color: #2aa8ff;
}

.service-cat-item:hover .cat-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  top: 56%;
  /* Move below text */
}

/* Responsive */
@media (max-width: 900px) {
  .service-categories {
    flex-direction: column;
    gap: 40px;
    /* More distance between cards */
  }

  .dk-desc-section {
    padding-top: 0 !important;
    margin-top: -80px !important;
    /* Restore transition visibility while keeping content high */
  }

  .service-cat-item {
    height: auto;
    padding: 30px 15px;
    /* Keep increased padding */
    display: flex !important;
    flex-direction: row !important;
    /* Back to row per user request */
    justify-content: center !important;
    /* Stack text center */
    padding: 30px 25px;
    align-items: center !important;
    gap: 0;
    position: relative;
    /* For absolute icon */

    /* Animation removed for safety - handled by JS or default visible */
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  /* Added via JS only */
  .service-cat-item.prepare-scroll {
    opacity: 0;
    transform: translateY(20px);
  }

  .service-cat-item.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hide Left Icon on Mobile - High Specificity */
  .service-categories .service-cat-item .cat-icon:not(.cat-icon-secondary) {
    display: none !important;
    width: 0 !important;
    /* Double safety */
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    /* Take out of flow */
  }

  /* Right Icon (Secondary) - Absolute Position */
  .cat-icon-secondary {
    position: absolute !important;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) !important;
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    pointer-events: none;
    /* Let clicks pass */
  }

  /* Jumping Animation Class */
  .cat-icon-secondary.jump {
    animation: bounceIcon 0.6s ease;
  }

  @keyframes bounceIcon {

    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(-50%);
    }

    40% {
      transform: translateY(-65%);
    }

    60% {
      transform: translateY(-58%);
    }
  }

  /* Reset Nth-child delays - handled by JS or CSS delay classes if needed */

  .service-cat-item h3 {
    padding: 0;
    /* No side padding affecting center */
    margin: 0;
    text-align: center !important;
    width: 100%;
    flex: 1;
    z-index: 2;
    /* Reset other props */
    order: unset;
    border: none;
  }
}






/* --- CENTERED FEATURE SECTION --- */
.dk-centered-section {
  background: #ffffff;
  padding: 80px 0;
  position: relative;
  z-index: 5;
  color: #000;
}

.dk-centered-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.dk-centered-header h2 {
  font-size: 3.5rem;
  line-height: 1.1;
  color: #000;
  font-weight: 700;
  margin-bottom: 30px;
}

.dk-centered-header .text-blue {
  color: #2aa8ff;
  background: linear-gradient(120deg, #2aa8ff, #0056b3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dk-centered-desc {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.6;
}

/* Cards Grid */
.dk-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Right Side Cards */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.dk-feature-card-row {
  background: #fdfdfd;
  border: 1px solid rgba(42, 168, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 25px 30px;
  border-radius: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Fill Effect Pseudo-element */
.dk-feature-card-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  /* Start empty (top) */
  background: linear-gradient(120deg, #000000 0%, #0a1929 25%, #2aa8ff 50%, #0a1929 75%, #000000 100%);
  background-size: 200% 200%;
  animation: waterShimmer 2s linear infinite;
  z-index: -1;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dk-feature-card-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  /* Top bar */
  background: #2aa8ff;
  opacity: 1;
  transition: all 0.3s ease;
  z-index: 2;
}

.dk-feature-card-row p {
  color: #333;
  margin: 0;
  font-size: 1.1rem;
  padding-left: 0;
  /* Removed side padding since bar is on top */
  padding-top: 10px;
  /* Add some top padding */
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.dk-feature-card-row strong {
  color: #000;
  font-weight: 700;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.dk-feature-card-row:hover {
  transform: translateY(-5px);
  /* Move UP instead of side */
  border-color: #2aa8ff;
  box-shadow: 0 10px 30px rgba(42, 168, 255, 0.2);
  background: transparent;
}

.dk-feature-card-row:hover::after {
  height: 100%;
  /* Fill Down */
}

.dk-feature-card-row:hover p,
.dk-feature-card-row:hover strong {
  color: #fff;
}

.dk-feature-card-row:hover::before {
  height: 6px;
  /* Slightly thicken top bar */
}

@media (max-width: 900px) {
  .dk-centered-header h2 {
    font-size: 2.5rem;
  }

  .dk-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* --- DETAIL SECTION (Split Dark Layout) --- */
/* --- DETAIL SECTION (Split Dark Layout) --- */
.dk-black-section {
  background: #ffffff;
  /* Changed to White to show corners */
  padding: 0;
  color: #fff;
  position: relative;
  z-index: 5;
  overflow: visible;
}

.dk-full-width-container {
  max-width: 95%;
  /* Expand to edges */
  margin: 0 auto;
  padding: 0 40px;
  /* Safe padding */
}

/* --- TECH CARD CHARACTER LAYOUT --- */
.dk-tech-card-wrapper {
  background: #000000;
  border: none;
  /* REMOVE BORDERS */
  /* Top Rounded Corners for Transition */
  border-radius: 80px 80px 0 0;
  position: relative;
  display: flex;
  /* Changed to flex to hold content */
  align-items: center;
  justify-content: space-between;
  padding: 100px 10%;
  /* More internal padding */
  overflow: visible;
  /* CRITICAL: Allow character to stick out */
  /* Needs slightly negative overlapping or margin? No, user wants transition. margin-top to separate or overlaps? */
  /* Actually, to see the curve effectively against the white, we might want it to start flush or overlap.
     If the previous section is white, and this is margin-top:0, the curve happens at the exact boundary.
     If we want a gap, margin is fine.
     Let's try margin-top: -50px to PULL it up into the white? Or just 0.
     User said "Wer profitiert" and "Bädertechnik" transition.
     If I put margin-top: -50px, it covers the bottom of previous section.
     Let's stick to margin-top: 0 but add the radius.
  */
  margin-top: 0;
  /* Remove margin */
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.1);
  /* Shadow less relevant if full width */
  width: 100vw;
  /* Force full viewport width */
  margin-left: calc(-50vw + 50%);
  /* Break out of container */
  margin-right: calc(-50vw + 50%);
  /* Ensure proper height calculation if needed, but flex handles it */
}

/* Add "Tech Corners" pseudo elements if desired, but border-radius + border is clean */
/* .dk-tech-card-wrapper::after { ... } */

.dk-tech-card-content {
  flex: 1;
  max-width: 60%;
  /* Leave space for character */
  z-index: 2;
}

.dk-tech-card-content h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
}

/* Reuse existing desc-text and feature-list styles, ensuring colors work on dark bg */

/* Reverse Layout (Image Left, Text Right) */
.dk-reverse-layout {
  flex-direction: row-reverse;
}

.dk-reverse-layout .dk-tech-card-content {
  margin-left: 5%;
  /* Add spacing from image */
}

.dk-reverse-layout .dk-character-image {
  right: auto;
  left: -20px;
  /* Position on left */
  /* Justify content flex-start? */
  justify-content: flex-start;
}

/* Dual Layout (Image - Content - Image) */
.dk-dual-layout {
  justify-content: center;
  /* Center content */
}

.dk-dual-layout .dk-tech-card-content {
  text-align: center;
  max-width: 100%;
  /* Wider text area */
  z-index: 5;
  position: relative;
  /* Ensure z-index works */
}

.dk-dual-layout .dk-character-image {
  /* Reset default positioning */
  right: auto;
  left: auto;
  width: 35%;
  /* Reduced from 40% */
  max-width: 450px;
  /* Reduced from 500px */
  z-index: 1;
  /* Images in background */
  pointer-events: none;
  /* Let clicks pass through if overlapping text */
}

.dk-dual-layout .dk-character-image.dk-pos-left {
  left: 1%;
  justify-content: flex-start;
}

.dk-dual-layout .dk-character-image.dk-pos-right {
  right: 0.5%;
  justify-content: flex-end;
}

/* Feature list in dual layout */
/* Feature list */
.dk-features-list {
  /* Plain list by default on Desktop */
  margin-top: 30px;
}

/* Feature list in dual layout (Keep Card Style on Desktop) */
.dk-dual-layout .dk-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 columns for features */
  gap: 40px;
  text-align: left;
  /* Card Styling specifically for Dual Layout on Desktop */
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  position: relative;
}

/* Vertical Separator Line */
.dk-dual-layout .dk-features-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}

.dk-character-image {
  position: absolute;
  right: -20px;
  /* Overlap right edge */
  bottom: -5px;
  /* Push down slightly to cover any sub-pixel gap */
  width: 40%;
  /* Adjust size */
  height: auto;
  /* Let it scale naturally */
  max-width: 600px;
  display: flex;
  align-items: flex-end;
  /* Align img to bottom of container */
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  /* Let clicks pass through if needed */
}

.dk-char-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  /* Optional: Animation on hover */
  transition: transform 0.4s ease;
}

.dk-tech-card-wrapper:hover .dk-char-img {
  transform: scale(1.05) translateY(-10px);
}

@media (max-width: 900px) {

  /* Card Layout for ALL Feature Lists on Mobile */
  .dk-features-list {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    /* Gap between item cards */
  }

  /* Style Individual Items as Cards */
  .dk-feature-item {
    background: #000000 !important;
    /* Modern Line Pattern Overlay */
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.03) 0px,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    width: 100% !important;
    /* Ensure uniform width */
    margin-bottom: 0 !important;
    /* Gap handles spacing */
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* Contain pattern */
  }

  .dk-tech-card-wrapper {
    flex-direction: column;
    padding: 10px 20px 0px 20px !important;
    /* Extremely reduced padding */
    /* Override inline padding and reset bottom */
    /* Remove bottom padding for image? No, need space. */
    overflow: hidden;
    /* Contain on mobile? Or let stick out bottom? */
  }

  .dk-tech-card-content {
    max-width: 100%;
    margin-bottom: 0px !important;
    /* Minimized gap */
  }

  .dk-tech-card-content .dk-desc-text {
    margin-bottom: 30px !important;
    /* Increased to add spacing back */
  }

  .dk-character-image {
    position: static !important;
    /* Stack in flow */
    width: 300px !important;
    /* Increased from 250px */
    height: auto !important;
    margin: -50px auto -30px auto !important;
    /* Pull up (-50) and pull next content up (-30) */
    /* Aggressive negative margin (was -10px) */
    /* Centered with top margin */
    opacity: 1 !important;
    /* Full visibility */
    display: block !important;
  }

  /* Adjust for reverse layout on mobile - no special handling needed if static */
  .dk-reverse-layout .dk-character-image {
    right: auto !important;
    left: auto !important;
  }

  /* Make Further Services (Dual Layout) compact and readable on mobile */
  .dk-dual-layout .dk-features-list {
    grid-template-columns: 1fr !important;
    /* Stack items vertically */
    gap: 30px !important;
    padding: 20px !important;
    /* Reduce internal padding uses mobile default now? or explicit */
  }

  /* Hide vertical separator line on mobile */
  .dk-dual-layout .dk-features-list::before {
    display: none !important;
  }
}

.dk-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  /* Increased gap for wide layout */
  align-items: center;
}

/* Left Content */
.dk-content-left h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
}

.dk-desc-text {
  font-size: 1.1rem;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Feature List (Icons) */
.dk-feature-item {
  display: flex;
  align-items: flex-start;
  /* Ensure top alignment if text wraps */
  margin-bottom: 25px;
  /* Reduced slightly to fit 3 items */
}

.dk-feature-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  /* Prevent shrink */
  background: rgba(42, 168, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
  /* Increased constraint */
  color: #2aa8ff;
  font-size: 1.2rem;
  margin-top: 5px;
  /* Align with first line of text visually */
}

.dk-feature-text h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #fff;
  line-height: 1.4;
  margin-top: 0;
}

.dk-feature-text p {
  color: #888;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Right Content (Visual) */
.dk-content-right {
  display: flex;
  justify-content: center;
  perspective: 1500px;
  /* Container perspective */
}

.dk-visual-card {
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  border-radius: 40px;
  padding: 30px;
  box-shadow:
    -20px 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border: none;
  width: 120%;
  /* "Bisschen breiter" -> Make it overflow width slightly or just wide */
  max-width: none;
  /* remove constraint */
  transform: rotateY(-12deg) rotateX(5deg);
  /* 3D Effect */
  transition: transform 0.5s ease;
  margin-right: -10%;
  /* Pull out to the right */
}

.dk-visual-card:hover {
  transform: rotateY(-5deg) rotateX(2deg) scale(1.02);
}

.dk-visual-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
  .dk-split-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .dk-content-left {
    order: 2;
    /* Image on top? Or text? Usually text first on mobile */
  }
}

/* --- FEATURES SECTION --- */
.dk-features-section {
  background-color: #f0f0f0;
  /* Continue light bg */
  padding: 0 0 120px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  max-width: 900px;
  margin-left: auto;
  /* Align to right side mostly as per looking at image layout? No, normal grid */
}

.dk-feature {
  padding: 20px;
}

.dk-feature h3 {
  font-size: 1.2rem;
  margin: 20px 0 10px;
  font-weight: 700;
}

.dk-feature p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
  max-width: 250px;
}

.dk-icon {
  font-size: 2rem;
  color: #2aa8ff;
}

.red-icon {
  color: #2aa8ff;
}


/* --- STATS SECTION --- */
.dk-stats-section {
  background-color: #000;
  color: #fff;
  padding: 100px 0;
  border-top-left-radius: 0;
  /* Normal */
  /* Wait, the light section was rounded TOP. The stats is below it, black. */
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.stats-header h2 {
  font-size: 3rem;
  line-height: 1.1;
}

.stats-header .stats-label {
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
}

.stats-card {
  background: #111;
  border-radius: 30px;
  padding: 30px;
  position: relative;
  border: 1px solid #222;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Specific Card Styles */
.graph-card {
  /* bg gradient maybe */
  background: linear-gradient(135deg, #111 0%, #050505 100%);
}

.tier-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.tier {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: fit-content;
}

.tier:before {
  content: "• ";
  margin-right: 5px;
}

.tier-new {
  color: #ff2a2a;
  border-color: rgba(255, 42, 42, 0.3);
}

.stats-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.small-card {
  min-height: auto;
  flex: 1;
  background: rgba(255, 255, 255, 0.15);
  /* Glass light */
  color: #000;
  /* If glass is light */
  /* wait image shows dark glass? 
       Actually right cards look greyish/glassy.
    */
  background: #333;
  color: #fff;
}

.small-card.glass {
  background: rgba(80, 80, 80, 0.4);
  backdrop-filter: blur(10px);
}

.stats-val {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
}

.stats-sub {
  font-size: 0.9rem;
  color: #aaa;
  display: block;
  margin-bottom: 5px;
}

.small-card .stats-sub {
  color: #ccc;
}

.icon-top-right {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.5rem;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 900px) {
  .dk-desc-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .dk-title-line {
    font-size: 4rem;
  }

  .dk-title-sub {
    font-size: 3rem;
  }
}

@media (max-width: 900px) {

  /* Reset absolute position on mobile */
  .dk-hero__card {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 40px;
  }
}

@media (max-width: 900px) {
  .dk-hero {
    height: auto;
    min-height: 75vh;
    /* Reduced height for mobile */
    padding-top: 90px;
    /* Space for fixed nav */
    padding-bottom: 60px;
  }

  /* Smooth transition gradient for mobile */
  .dk-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000000 100%);
    pointer-events: none;
    z-index: 1;
  }

  .dk-hero__text {
    margin-left: 20px;
    padding-right: 20px;
    /* Ensure right side also has breathing room if needed */
  }

  .dk-hero-desc {
    margin-top: 20px;
    /* Reduced from 40px */
  }

  .dk-hero-desc p {
    font-size: 0.95rem;
    /* Smaller text */
  }
}

/* Override for Service Category Links */
a.service-cat-item {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}


/* ===== FAQ SECTION STYLES (Redesigned: Light, Static) ===== */
.dk-faq-section {
  padding: 100px 0;
  background: #ffffff !important;
  /* Force white */
  color: #1a1a1a !important;
  position: relative;
  z-index: 10;
  /* Ensure on top of any dark overlays */
}

.dk-faq-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

/* FAQ Header (Left) */
.dk-faq-header .eyebrow {
  color: #2aa8ff;
  font-weight: 700;
  margin-bottom: 20px;
  display: block;
}

.dk-faq-header h2 {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #000;
}

.dk-faq-header p {
  color: #555;
  margin-bottom: 40px;
  max-width: 400px;
  line-height: 1.6;
}

.dk-faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: #2aa8ff;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
}

.dk-faq-cta-btn:hover {
  background: #1a8ce0;
}

/* FAQ List (Right) */
.dk-faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* FAQ Item - Light Theme */
.dk-faq-item {
  background: #f9f9f9;
  /* Light gray card */
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  /* No transitions */
}

/* Open State */
.dk-faq-item[open] {
  border-color: #2aa8ff;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.dk-faq-item summary {
  padding: 25px 30px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-weight: 600;
  color: #000;
  /* Dark text */
}


.dk-faq-item[open] summary {
  color: #2aa8ff;
  /* Blue highlight when open */
}

.dk-faq-item summary::-webkit-details-marker {
  display: none;
}

.dk-faq-item .faq-icon {
  color: #2aa8ff;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dk-faq-item[open] summary .faq-icon {
  transform: rotate(180deg);
}

/* Animation Wrapper */
/* Uncopyable Protection */
.dk-faq-section {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

/* Animation Wrapper */
.faq-answer {
  padding: 0 30px 25px 30px;
  color: #555;
  line-height: 1.6;
  border-top: 1px solid transparent;
  width: 100%;
  transform-origin: top;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.dk-faq-item[open] .faq-answer {
  color: #555;
  /* Fixed: Dark text for white background */
}

/* Keyframe for "Pop" open effect will be handled via JS/CSS combo or standard details animation support */

@media (max-width: 900px) {
  .dk-faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .dk-faq-header h2 {
    font-size: 2.5rem;
  }
}

/* =========================================
   ÜBER UNS (About Us) Styles - Dark/Tech
   ========================================= */

/* 1. Header with Breadcrumb overlay */
/* 1. Header with Breadcrumb overlay -> Now Tech Hero Style */
.about-header {
  position: relative;
  min-height: 100vh;
  /* Full Screen */
  background: url('assets/überuns3.png') center/cover no-repeat;
  background-size: 130%;
  /* Größer */
  background-position: center 20%;
  /* Move image up to show lower part */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Left Align */
  text-align: left;
  margin-top: 0;
  padding-top: 80px;
}

.about-header-overlay {
  position: absolute;
  inset: 0;
  /* 1:1 Match with Service Page Overlay (Black transitions) */
  background:
    /* Bottom Fade to Black */
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, #000 100%),
    /* Side Vignette */
    linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 1;
}

.about-header-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.about-header-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.breadcrumbs {
  font-size: 1rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 2. Intro Section (Split) */
.about-intro {
  padding: 80px 20px;
  background: #000;
  /* Schwarzer Hintergrund */
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-intro-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.about-intro-text {
  color: #000;
  background: #fff;
  /* Weiße Card */
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Inverted Intro Style (White bg, Black card) */
.about-intro.about-intro-white {
  background: #fff;
  color: #000;
}

.about-intro.about-intro-white .about-intro-text {
  background: #000;
  color: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* If dark theme overall, invert colors. Assuming white for this section based on contrast. */

.about-eyebrow {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2aa8ff;
  /* Brand Blue */
  margin-bottom: 10px;
  font-weight: 700;
}

.about-intro-text h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.about-intro-text p {
  line-height: 1.6;
  margin-bottom: 30px;
  color: #555;
}

/* 3. Skills & Stats (Dark) */
.about-skills {
  background: #000;
  color: #fff;
  padding: 80px 0;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.skills-desc {
  color: #aaa;
  margin-bottom: 40px;
}

.skill-bar-wrapper {
  margin-bottom: 25px;
}

.skill-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}

.skill-track {
  width: 100%;
  height: 6px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: #fff;
  /* White bars as per image */
  border-radius: 3px;
}

/* Stats Counter Grid */
.stats-counter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.stat-item {
  text-align: center;
  /* Or left? Image looks centered-ish in grid, but aligned left content. Left is safer. */
  text-align: left;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #fff;
}

.stat-label {
  color: #aaa;
  font-size: 0.9rem;
}

/* 4. CTA Banner */
.about-cta {
  position: relative;
  padding: 220px 20px;
  background: url('assets/WojciechDaniel01.jpg') center 25%/cover no-repeat;
  /* Reuse image */
  text-align: center;
  color: #fff;
}

.about-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.about-cta-content {
  position: relative;
  z-index: 2;
}

.about-cta h2 {
  font-size: 3rem;
  margin-bottom: 40px;
  line-height: 1.2;
}

.btn-white {
  display: inline-block;
  padding: 16px 40px;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: transform 0.2s;
}

.btn-white:hover {
  transform: translateY(-3px);
  background: #f0f0f0;
}

/* Responsiveness */
@media (max-width: 900px) {

  .about-intro-grid,
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-intro-img {
    order: -1;
  }

  .about-intro-text {
    padding: 24px;
    /* Reduced padding for mobile */
  }
}

/* About Us Image Gradient Effect */
.about-image-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
}

.about-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.image-gradient-overlay {
  position: absolute;
  inset: 0;
  /* Blue tint in center, fading to black border */
  /* This radial gradient starts with a transparent blueish center and fades to a black edge */
  background: radial-gradient(circle at center, rgba(42, 168, 255, 0.2) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 85%, #000000 100%);
  pointer-events: none;
  border-radius: 12px;
  z-index: 2;
  mix-blend-mode: normal;
  /* Or multiply/overlay depending on look. Normal is safest for "border" effect */
}

/* Shimmer Animation for Text */
@keyframes shimmer {
  0% {
    color: #2aa8ff;
    text-shadow: none;
  }

  50% {
    color: #88d1ff;
    text-shadow: 0 0 10px rgba(136, 209, 255, 0.6), 0 0 20px rgba(42, 168, 255, 0.4);
  }

  100% {
    color: #2aa8ff;
    text-shadow: none;
  }
}

.text-shimmer {
  color: #2aa8ff;
  font-weight: 600;
  display: inline-block;
  animation: shimmer 3s infinite ease-in-out;
}

/* ===== BENTO GRID SECTION ===== */
.bento-section {
  padding: 60px 0 100px;
  /* Space below the text section */
  background: transparent !important;
  /* Use parent's black bg */
}

.bento-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 24px;
  width: 100%;
}

/* 3D Flip Container */
/* Rotating Light Animation */
@keyframes rotate-light {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Static Bento Card (Simplified) with Rotating Light */
.bento-card {
  position: relative;
  border-radius: 30px;
  min-height: auto;
  /* Reset direct bg/border for pseudos */
  background: transparent;
  border: none;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(42, 168, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  /* Clip the spinner */
  z-index: 1;
  /* Stacking context */
}

/* The Rotating Light */
.bento-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  /* Large enough to cover corners */
  height: 250%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      transparent 140deg,
      #2aa8ff 180deg,
      /* The Light Beam */
      transparent 220deg,
      transparent 360deg);
  animation: rotate-light 4s linear infinite;
  z-index: -2;
}

/* The Dark Background (Inset) */
.bento-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  /* Border thickness */
  background: linear-gradient(135deg, rgba(20, 30, 50, 1) 0%, rgba(5, 5, 10, 1) 100%);
  border-radius: 28px;
  /* 30px - 2px */
  z-index: -1;
}

/* Inner Container - The flipper */
.bento-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.bento-card:hover .bento-inner {
  transform: rotateY(180deg);
}

/* Front and Back Faces */
.bento-front,
.bento-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  /* Keep content inside rounded corners */
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Front Face Styling */
.bento-front {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Default alignment */
  justify-content: flex-end;
  /* Text at bottom by default */
  padding: 40px;
}

/* Back Face Styling */
.bento-back {
  background: linear-gradient(135deg, #005f9e 0%, #00385f 100%);
  color: white;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

/* Specific Card Tweaks */
.card-large .bento-front {
  justify-content: flex-end;
  /* Text at bottom */
}

.card-small .bento-front {
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  overflow: visible;
  /* Allow bubble to pop out */
}

/* We need overflow visible on the FACES too for the bubble */
.card-small .bento-inner,
.card-small .bento-front {
  overflow: visible;
}

/* Re-apply border radius mask for image inside visible overflow container */
.card-small .uberuns-img {
  border-radius: 30px;
}

/* Text Styles */
.bento-text {
  position: relative;
  z-index: 5;
  color: #fff;
  max-width: 100%;
}

.bento-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0;
  /* Tighter on front */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.bento-title br {
  display: none;
  /* Let text flow naturally or grid controls it */
}

@media(min-width: 992px) {
  .bento-title br {
    display: block;
  }
}

.bento-sub {
  font-size: 1.1rem;
  line-height: 1.5;
  opacity: 0.9;
  font-weight: 300;
  margin-top: 15px;
}

.bento-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.bento-btn:hover {
  background: #fff;
  color: #000;
  transform: scale(1.04);
}

/* Images */
.taucher-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Right Card Specifics */
.uberuns-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 30px;
  /* Ensure rounded despite overflow visible */
}

/* Bubble Overlay - Larger & Positioned */
.blase-overlay {
  position: absolute;
  top: -120px;
  /* Higher up */
  right: -100px;
  /* Further right */
  width: 480px;
  /* Larger */
  opacity: 0.95;
  z-index: 10;
  pointer-events: none;
  transition: transform 0.6s ease;
}

.bento-card:hover .blase-overlay {
  transform: scale(1.1) rotate(10deg);
}

/* Overlays */
.bento-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
  z-index: 2;
  pointer-events: none;
  border-radius: 30px;
}

@keyframes floatBubble {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}


/* Mobile Responsive */
@media (max-width: 992px) {

  /* Intro Text Section Mobile Optimization */
  .section[style*="padding: 100px"] {
    padding-top: 40px !important;
    /* Reduce huge top padding */
    padding-bottom: 40px !important;
  }

  .section p[style*="font-size: 1.8rem"] {
    font-size: 1.25rem !important;
    /* Scale down large intro text */
    line-height: 1.4 !important;
  }

  /* Bento Grid Mobile */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bento-card {
    min-height: 350px;
    /* Reduce min-height from 420px */
    padding: 25px;
    align-items: flex-start;
    text-align: left;
  }

  .card-small {
    align-items: flex-start;
    text-align: left;
  }

  .taucher-img {
    width: 280px;
    /* Smaller image */
    max-width: 70%;
    right: -20px;
    bottom: -20px;
  }

  .bento-title {
    font-size: 1.8rem;
    /* Smaller title */
  }
}

/* =========================================
   NEW CONTACT PAGE STYLES
   ========================================= */

/* Reuse tech hero sizing but specific background if needed */
.contact-hero {
  min-height: 65vh;
  /* Add gradients back: Bottom Fade + Side/Overlay + Image */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.8) 100%),
    url('assets/Kontakt.jpg') center 15%/cover no-repeat;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .contact-hero {
    min-height: 40vh;
    /* Reduced height for mobile */
    background-position: center top;
  }
}

.contact-page-section {
  background-color: #000;
  color: #fff;
  padding: 100px 0 80px 0;
  margin-top: 0;
  position: relative;
  z-index: 5;
  text-align: left;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  /* Left col smaller than form */
  gap: 60px;
}

/* Left Column */
.contact-left-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 18px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn-primary-contact {
  background-color: #2aa8ff;
  color: #fff;
  box-shadow: 0 4px 15px rgba(42, 168, 255, 0.4);
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 4px 15px rgba(42, 168, 255, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 20px rgba(42, 168, 255, 0.7), 0 0 10px rgba(42, 168, 255, 0.5);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 4px 15px rgba(42, 168, 255, 0.4);
    transform: scale(1);
  }
}

.btn-primary-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(42, 168, 255, 0.6);
}

/* Info Cards */
.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-card {
  background: #050a1e;
  /* Dark Blue from FAQ gradient */
  border: 1px solid rgba(42, 168, 255, 0.2);
  padding: 25px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: border-color 0.3s;
}

.contact-info-card:hover {
  border-color: #2aa8ff;
}

.cic-icon {
  font-size: 1.5rem;
  color: #2aa8ff;
  width: 40px;
  display: flex;
  justify-content: center;
}

.cic-text {
  display: flex;
  flex-direction: column;
}

.cic-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.cic-label {
  font-size: 0.85rem;
  color: #aaa;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quick Links */
.contact-quick-links {
  background: #050a1f;
  /* Very dark/black */
  padding: 30px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-quick-links a {
  color: #aaa;
  text-decoration: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
}

.contact-quick-links a:hover {
  color: #2aa8ff;
}

.contact-quick-links i {
  font-size: 0.8rem;
}

/* Right Column: Form */
.contact-right-col {
  background: #0b1430;
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-form-wrapper h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #fff;
}

.contact-form-dark {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  /* Softer label */
  font-weight: 600;
  margin-left: 5px;
}

.contact-form-dark input,
.contact-form-dark textarea {
  background: rgba(255, 255, 255, 0.03);
  /* Glassy dark */
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  /* More rounded */
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s ease;
}

.contact-form-dark input:focus,
.contact-form-dark textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: #2aa8ff;
  box-shadow: 0 0 0 4px rgba(42, 168, 255, 0.15);
}

.btn-submit-contact {
  margin-top: 15px;
  background: linear-gradient(135deg, #2aa8ff 0%, #007acc 100%);
  /* Gradient */
  color: #fff;
  border: none;
  padding: 18px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(42, 168, 255, 0.25);
}

.btn-submit-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(42, 168, 255, 0.4);
}


/* Mobile Responsive */
@media (max-width: 900px) {

  /* Force Section Background Black */
  .contact-page-section {
    background: #000 !important;
    padding-top: 50px;
    /* Reduced top padding for mobile */
  }

  /* Grid Reset */
  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  /* Reset wrappers */
  .contact-left-col {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Center the cards wrapper */
  }

  .contact-info-cards,
  .contact-right-col {
    width: 90%;
    /* Narrower width for side spacing */
    max-width: 400px;
    /* Max width for larger mobiles */
    margin: 0 auto;
    /* Centered */
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* High Specificity Overrides for Mobile */
  /* Force Container to be almost full width on mobile for this section */
  #kontakt-formular .container {
    width: 98% !important;
    max-width: none;
    padding: 0;
  }

  /* Shared wrapper styles for Cards and Form - MAX WIDTH */
  #kontakt-formular .contact-right-col,
  #kontakt-formular .contact-info-cards,
  /* Wrapper must be 100% */
  #kontakt-formular .contact-info-card,
  /* Child must be 100% */
  .contact-quick-links {
    width: 100%;
    /* Fill the 98% container */
    margin: 0 auto;
    max-width: 500px;
  }

  /* Animation Keyframes */
  /* Moving Light Keyframes */
  @keyframes lightTravel {
    0% {
      top: 0;
      left: 0;
    }

    25% {
      top: 0;
      left: 100%;
    }

    50% {
      top: 100%;
      left: 100%;
    }

    75% {
      top: 100%;
      left: 0;
    }

    100% {
      top: 0;
      left: 0;
    }
  }

  /* Form Container Redesign */
  #kontakt-formular .contact-right-col {
    padding: 10px 20px 24px;
    /* Tighter padding to raise text */
    background-image:
      linear-gradient(135deg, rgba(5, 12, 30, 0.9), rgba(5, 12, 30, 0.95)),
      repeating-linear-gradient(45deg, rgba(42, 168, 255, 0.05) 0px, rgba(42, 168, 255, 0.05) 1px, transparent 1px, transparent 20px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(42, 168, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    /* For light positioning */
    overflow: hidden;
    /* Clip the light */
  }

  /* Moving Light Pseudo-element (Restored) */
  #kontakt-formular .contact-right-col::before {
    content: '';
    position: absolute;
    width: 800px;
    /* Large smooth light */
    height: 800px;
    background: radial-gradient(circle, rgba(42, 168, 255, 0.2) 0%, transparent 70%);
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    animation: lightTravel 12s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

  /* Ensure content sits above the light */
  #kontakt-formular .contact-right-col>* {
    position: relative;
    z-index: 1;
  }

  /* Smaller Headline for Mobile Form */
  #kontakt-formular h2 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    text-align: center;
    margin-top: 0;
    /* Ensure no extra space above */
  }

  /* Force single column for split rows (Email/Tel) */
  #kontakt-formular .form-row-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
  }

  /* Optimize inputs for readability and touch */
  .contact-form-dark input,
  .contact-form-dark textarea {
    padding: 14px 16px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 100%;
  }

  .contact-form-dark input:focus,
  .contact-form-dark textarea:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #2aa8ff;
    box-shadow: 0 0 0 2px rgba(42, 168, 255, 0.25);
  }

  /* Compact Button */
  .btn-submit-contact {
    width: 100%;
    margin-top: 15px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #2aa8ff 0%, #0066cc 100%);
    box-shadow: 0 6px 20px rgba(42, 168, 255, 0.3);
  }

  .btn-submit-contact:active {
    transform: scale(0.97);
  }

  .contact-quick-links {
    padding: 20px;
  }

  /* Cards fill the narrowed wrapper */
  #kontakt-formular .contact-info-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    padding: 25px;

    /* Blue Pattern Pattern + Glass */
    background-image:
      linear-gradient(135deg, rgba(5, 12, 30, 0.8), rgba(5, 12, 30, 0.9)),
      repeating-linear-gradient(45deg, rgba(42, 168, 255, 0.05) 0px, rgba(42, 168, 255, 0.05) 1px, transparent 1px, transparent 15px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(42, 168, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .contact-info-card:active {
    transform: scale(0.98);
    border-color: #2aa8ff;
  }

  .cic-value {
    word-break: break-all;
    /* Prevent long emails from breaking layout */
  }
}

/* ===== WARUM WIR PAGE STYLES ===== */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.why-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.why-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.06);
  border-color: #2aa8ff;
}

.why-icon {
  font-size: 3rem;
  color: #2aa8ff;
  margin-bottom: 25px;
  height: 80px;
  width: 80px;
  line-height: 80px;
  background: rgba(42, 168, 255, 0.1);
  border-radius: 50%;
  margin-inline: auto;
  transition: var(--transition);
}

.why-card:hover .why-icon {
  background: #2aa8ff;
  color: #fff;
}

.why-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #fff;
}

.why-card p {
  color: #aaa;
  line-height: 1.6;
}

.why-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.why-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #ddd;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.why-list li i {
  color: #2aa8ff;
  font-size: 1.2rem;
}

.why-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  line-height: 0;
  /* Remove gap */
}

.why-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 24, 56, 0.6);
  /* Dark blue tint */
  mix-blend-mode: color;
  pointer-events: none;
}

.philosophy-text {
  text-align: left;
}

.warum-wir-hero {
  background-image: url('assets/warum_wir_header.jpg');
  background-position: center center;
  background-size: cover;
}

/* FAQ Redesign (Two Column Premium) */
.faq-section-wrapper {
  text-align: left;
}

.faq-layout-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  padding: 50px 0;
}

/* ... existing styles ... */

.faq-hero {
  background-image: url('assets/HäufigeFragen.jpg');
  background-position: center center;
  background-size: cover;
  min-height: 65vh;
  display: flex;
  align-items: center;
  /* Default alignment */
  justify-content: center;
  /* Or whatever default was, usually center */
}

/* Mobile Adjustments (Dark Mode & Spacing) */
@media (max-width: 900px) {

  /* Dark Gradient Content Background on Mobile */
  .faq-section-wrapper {
    background: linear-gradient(to bottom, #000000 0%, #00152e 100%);
    color: #fff;
    padding-bottom: 80px;
  }

  /* Fade to Black Hero on Mobile */
  .faq-hero {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 100%),
      linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.7) 100%),
      url('assets/HäufigeFragen.jpg') center center / cover no-repeat;
    align-items: flex-start;
    /* Move text up */
    padding-top: 80px;
    /* Reduced specific spacing */
    min-height: 50vh;
  }

  /* Tighter Content Spacing on Mobile */
  .faq-layout-grid {
    padding: 10px 0 50px 0;
    gap: 30px;
    grid-template-columns: 1fr;
    /* Stacked */
  }

  /* Move header content up margin adjustment */
  .faq-hero .dk-hero__content {
    align-items: flex-start;
    padding-top: 0;
  }

  .faq-hero .dk-hero__text {
    margin-top: 0;
  }

  .faq-category-header {
    position: static;
    margin-bottom: 20px;
  }

  .faq-hero .dk-hero__text h1 {
    font-size: 2.5rem;
  }
}

.faq-category-header {
  position: sticky;
  top: 120px;
  /* Sticky effect for long lists */
  align-self: start;
}

.faq-category-header h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #fff;
  background: linear-gradient(135deg, #fff 0%, #2aa8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.faq-category-header p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
  margin-right: 20px;
}

.faq-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 168, 255, 0.3), transparent);
  width: 100%;
  margin: 20px 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Added gap for card-like separation */
}

.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Full border for card look */
  border-radius: 12px;
  /* Rounded corners */
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(42, 168, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-item[open] {
  background: rgba(42, 168, 255, 0.06);
  border-color: #2aa8ff;
  box-shadow: 0 0 20px rgba(42, 168, 255, 0.15);
}

.faq-question {
  padding: 24px 30px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  cursor: pointer;
  color: #e0e0e0;
  font-weight: 500;
  transition: color 0.3s ease;
}

.faq-item[open] .faq-question {
  color: #fff;
  border-bottom: 1px solid rgba(42, 168, 255, 0.2);
  font-weight: 600;
}

.faq-question::after {
  content: "+";
  margin-left: 20px;
  position: static;
  font-weight: 400;
  color: #2aa8ff;
  border: 1px solid rgba(42, 168, 255, 0.4);
  background: rgba(42, 168, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  padding-bottom: 3px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-item:hover .faq-question::after {
  background: #2aa8ff;
  color: #fff;
  border-color: #2aa8ff;
  transform: scale(1.1);
}

.faq-item[open] .faq-question::after {
  transform: rotate(135deg);
  /* X shape */
  background: #eb3b3b;
  /* Red for close */
  border-color: #eb3b3b;
  color: #fff;
  font-size: 1.2rem;
  /* adjust size for X */
  padding-bottom: 0;
}

.faq-answer {
  padding: 20px 30px 30px 30px;
  color: #ccc;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0;
  animation: fadeIn 0.4s forwards 0.1s;
}

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

/* Responsive */
@media (max-width: 900px) {
  .faq-category-header {
    position: static;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .faq-layout-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }
}


.stories-hero {
  background-image: url('assets/stories.jpg');
  background-position: center center;
  background-size: cover;
}

/* Story Grid (Blog) */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.story-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(42, 168, 255, 0.3);
}

.story-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.story-card:hover .story-image img {
  transform: scale(1.05);
}

.story-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.story-date {
  font-size: 0.85rem;
  color: #2aa8ff;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.story-content h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #fff;
  line-height: 1.3;
}

.story-content p {
  font-size: 1rem;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.story-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.story-link:hover {
  color: #2aa8ff;
}

.story-link i {
  font-size: 0.9em;
  transition: transform 0.3s ease;
}

.story-link:hover i {
  transform: translateX(5px);
}

.faq-hero {
  min-height: 65vh;
  /* Adjustable height */
  /* Gradient overlay (Fade to Black) + Image */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.7) 100%),
    url('assets/HäufigeFragen.jpg') center center / cover no-repeat;
  display: flex;
  align-items: flex-start;
  /* Move text up */
  padding-top: 120px;
  /* Specific top spacing for header */
}

/* Mobile Adjustments (Dark Mode & Spacing) - MOVED TO END FOR PRECEDENCE */
@media (max-width: 900px) {

  /* Dark Gradient Content Background on Mobile */
  .faq-section-wrapper {
    background: linear-gradient(to bottom, #000000 0%, #00152e 100%);
    color: #fff;
    padding-bottom: 80px;
  }

  /* Fade to Black Hero on Mobile */
  .faq-hero {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 100%),
      linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.7) 100%),
      url('assets/HäufigeFragen.jpg') center center / cover no-repeat;
    align-items: flex-start !important;
    /* Move text up */
    padding-top: 40px !important;
    /* Aggressively Reduced for Mobile */
    min-height: 50vh !important;
  }

  /* Tighter Content Spacing on Mobile */
  .faq-layout-grid {
    padding: 10px 0 50px 0;
    gap: 30px;
    grid-template-columns: 1fr;
    /* Stacked */
  }

  /* Move header content up margin adjustment */
  .faq-hero .dk-hero__content {
    align-items: flex-start;
    padding-top: 0;
  }

  .faq-hero .dk-hero__text {
    margin-top: 0;
  }

  .faq-category-header {
    position: static;
    margin-bottom: 20px;
  }

  .faq-hero .dk-hero__text h1 {
    font-size: 2.5rem;
  }
}

/* Move header up specifically for FAQ */
.faq-hero .dk-hero__content {
  align-items: flex-start;
  padding-top: 0;
}

.faq-hero .dk-hero__text {
  margin-top: 0;
}

.partner-hero {
  background-image: url('assets/Partner.jpg');
  background-position: center center;
  background-size: cover;
}

.partner-hero {
  background-image: url('assets/Partner.jpg');
  background-position: center center;
  background-size: cover;
}

/* Partner Content */
.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.partner-text h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #fff 0%, #2aa8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.partner-text .lead {
  font-size: 1.2rem;
  color: #2aa8ff;
  margin-bottom: 20px;
  font-weight: 500;
}

.partner-text p {
  color: #ccc;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.partner-images {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.partner-logo-wrapper {
  background: transparent;
}

.partner-logo {
  max-width: 250px;
  border-radius: 10px;
  /* Dark logo on white BG -> Invert -> Light logo on Black BG */
  /* Sepia+Hue -> Tint White to Correct Blue */
  filter: invert(1) sepia(1) saturate(3) hue-rotate(170deg) brightness(1);
  mix-blend-mode: screen;
}

.partner-image-wrapper {
  position: relative;
  width: 100%;
}

.partner-action-img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.img-caption {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 10px;
  font-style: italic;
}

@media (max-width: 900px) {
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .partner-images {
    order: 1;
  }
}

.partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 24px;
  background: #2aa8ff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(42, 168, 255, 0.3);
}

.partner-btn:hover {
  background: #1a8ce0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 168, 255, 0.4);
}

.partner-btn i {
  transition: transform 0.3s ease;
}

.partner-btn:hover i {
  transform: translateX(4px);
}

/* Presse Page Styles - Modern Redesign */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 40px;
  margin-top: 40px;
  animation: fadeInUp 0.8s ease-out forwards;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.video-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 50px rgba(42, 168, 255, 0.2);
  border-color: rgba(42, 168, 255, 0.3);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.press-articles-section {
  background: linear-gradient(180deg, rgba(10, 24, 56, 0) 0%, rgba(42, 168, 255, 0.05) 100%);
  position: relative;
}

/* Decorative background blur */
.press-articles-section::before {
  content: '';
  position: absolute;
  top: 20%;
  left: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(42, 168, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

.press-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 0;
  /* Padding handled by content/wrapper */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

/* Stagger animation for cards */
.press-card:nth-child(2) {
  animation-delay: 0.5s;
}

.press-card:nth-child(3) {
  animation-delay: 0.7s;
}

.press-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2aa8ff, #00d4ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 5;
}

.press-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(42, 168, 255, 0.1);
  border-color: rgba(42, 168, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

.press-card:hover::before {
  transform: scaleX(1);
}

.press-image-wrapper {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

/* Overlay gradient on image for better text readability vs white images? No, image is separate. */
.press-image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(10, 24, 56, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.press-card:hover .press-image-wrapper::after {
  opacity: 1;
}

.press-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s ease;
}

.press-card:hover .press-img {
  transform: scale(1.1);
}

.press-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.press-date {
  font-size: 0.85rem;
  color: #2aa8ff;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.press-card h3 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 15px;
  line-height: 1.3;
  transition: color 0.3s ease;
  min-height: 4rem;
  /* Defines height for ~2 lines to align content below */
  display: flex;
  align-items: center;
  /* Vertically center short titles */
}

.press-card:hover h3 {
  background: linear-gradient(135deg, #fff 0%, #2aa8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.press-source {
  color: #aaa;
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.press-source::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #2aa8ff;
  border-radius: 50%;
  display: inline-block;
}

.press-card p {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}

.press-card .read-more {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  transition: all 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.press-card .read-more:hover {
  background: #2aa8ff;
  color: #fff;
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(42, 168, 255, 0.4);
}

.press-card .read-more i {
  transition: transform 0.3s ease;
}

.press-card .read-more:hover i {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

.presse-hero {
  background-image: url('assets/Presse.jpg');
  background-position: center center;
  background-size: cover;
  position: relative;
}

/* Dark overlay for hero readability if image is bright */
.presse-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 24, 56, 0.3), rgba(10, 24, 56, 0.9));
  z-index: 1;
}

.presse-hero .dk-hero__content {
  position: relative;
  z-index: 2;
}

/* Mobile optimization for About Us Hero */
@media (max-width: 900px) {
  .about-header {
    min-height: 75vh !important;
    /* Reduce height from 100vh */
    background-size: cover !important;
    /* Fix zoom level */
    background-position: center center !important;
    padding-top: 100px !important;
    /* Ensure nav clearance */
    align-items: center !important;
  }

  .about-header-content h1 {
    font-size: 2.5rem !important;
    /* Scale text */
  }
}

/* Contact Form Content Wrapper (Restored Static) */
.contact-form-wrapper {
  position: relative;
  background: rgba(11, 20, 48, 0.3);
  /* Transparent dark to show light behind? Or solid? */
  /* If user wants "Back Card", maybe this is the card ON TOP of the light? */
  /* Let's replicate the deleted style minus animation */
  background: rgba(11, 20, 48, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* The "card" border */
  border-radius: 24px;
  padding: 20px;
  /* Reduced internal padding */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 2;
  /* Sit above the light in .contact-right-col */
  width: 100%;
  box-sizing: border-box;
}

#kontakt-formular .contact-form-wrapper h2 {
  margin-bottom: 25px;
  /* Add spacing between title and labels as requested */
  margin-top: 0;
}

/* FINAL MOBILE OVERRIDE FOR FAQ HEADER POSITION */
@media (max-width: 900px) {
  .faq-hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 115px !important;
    /* Safe clearance for navbar */
    min-height: 35vh !important;
    /* Drastically reduced size */
  }

  .faq-hero .dk-hero__content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100%;
  }

  .faq-hero .dk-hero__text {
    margin-top: 0 !important;
    /* Reset negative margin */
    padding-top: 0 !important;
    text-align: left !important;
  }

  .faq-hero h1 {
    margin-top: 0 !important;
    line-height: 1.1 !important;
  }

  .faq-section-wrapper {
    margin-top: 0 !important;
    /* Reset wrapper to keep background static */
    position: relative;
    z-index: 5;
  }

  .faq-layout-grid {
    margin-top: -100px !important;
    /* Move ONLY content up */
    position: relative;
    z-index: 10;
  }
}

/* ===== COOKIE BANNER ===== */
/* ===== PRIVACY UI (Renamed from Cookie Banner) ===== */
.aa-privacy-ui {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 420px;
  background: rgba(10, 24, 56, 0.98);
  /* Less transparent */
  backdrop-filter: blur(16px);
  border: 1px solid rgba(120, 190, 255, 0.4);
  border-radius: 16px;
  padding: 24px;
  z-index: 2147483647 !important;
  /* MAX Z-INDEX */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  transform: none;
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Inter', sans-serif;
}

.aa-privacy-ui.active {
  transform: none;
  opacity: 1;
}

.aa-privacy-ui h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.aa-privacy-ui p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #cbd5e1;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.cookie-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-btn.accept {
  background: #4b7cff;
  color: #fff;
  box-shadow: 0 2px 12px rgba(75, 124, 255, 0.3);
}

.cookie-btn.accept:hover {
  background: #3a63d9;
}

.cookie-btn.decline {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-btn.decline:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

@media (max-width: 480px) {
  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}