/* ==== Reset & Base ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #f5f8fc;
  padding-top: 0;
}

/* ==== NAVBAR DESKTOP ==== */
.navbar {
  /* NICHT fixed – normal oben, scrollt mit */
  position: relative;
  width: 100%;
  height: 96px;        /* kompakte Höhe */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 1000;

  background: linear-gradient(180deg, #2c5364 0%, #203a43 60%, #0f2027 100%),
              linear-gradient(270deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

/* Logo + Linie + Text nebeneinander */
.logo-container {
  display: flex;
  align-items: center;
  gap: 14px;              /* Abstand Logo – Linie – Text */
  height: 100%;
  margin-left: 0;
}

/* Logo-Größe */
.logo {
  height: 95px;   /* etwas kleiner als ganz am Anfang */
  width: auto;
}

/* Container für die Linie */
.logo-divider {
  position: relative;
  width: 26px;            /* „Breite“ des Bereichs */
  height: 46px;           /* „Höhe“ des Bereichs */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -25px;
}

/* Eigentliche schräge Linie */
.logo-divider::before {
  content: "";
  width: 2px;
  height: 65px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(0, 184, 169, 0.0),
    #00b8a9,
    rgba(0, 184, 169, 0.0)
  );
  box-shadow: 0 0 10px rgba(0, 184, 169, 0.7);
  transform: rotate(-25deg);   /* Neigung der Linie */
  transform-origin: center;
}

/* Tagline rechts vom Logo in zwei Zeilen */
.logo-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: -12px;
  margin-bottom: 4px;    /* schiebt den Text leicht nach oben */

  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #e8f2f8;
  text-transform: none;
  white-space: normal;   /* Zeilenumbruch erlaubt */
  line-height: 1.1;
  opacity: 0.95;
}

.tagline-line1,
.tagline-line2 {
  display: block;
}

/* leichte Einrückung der zweiten Zeile */
.tagline-line2 {
  margin-left: 10px;
}

/* ==== Links (Layout Desktop) ==== */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 18.5px;
  transition: color .25s ease;
}

.nav-links a:hover {
  color: #00ffcc;
}

.nav-links .active > a {
  color: #00ffcc;
  border-bottom: 2px solid #00ffcc;
}

/* ==== Pill-Stil + Hover / Press (Desktop) ==== */
.nav-links > li:not(.active) > a {
  position: relative;
  overflow: hidden;
  padding: 7px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    transform .18s ease,
    color .25s ease;
}

.nav-links > li:not(.active) > a:hover,
.nav-links > li:not(.active) > a:focus {
  background: rgba(0,0,0,.3);
  color: #00ffcc;
  box-shadow:
    0 8px 22px rgba(0,184,169,.18),
    inset 0 1px 0 rgba(255,255,255,.14);
  outline: none;
}

.nav-links > li:not(.active) > a:active {
  transform: translateY(1px) scale(.985);
}

/* Glanz-Sweep */
.nav-links > li:not(.active) > a::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -130%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.15) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: transform .55s ease, opacity .35s ease;
  pointer-events: none;
}

.nav-links > li:not(.active) > a:hover::before,
.nav-links > li:not(.active) > a:focus::before {
  transform: translateX(230%) skewX(-20deg);
  opacity: .9;
}

/* Ripple */
.nav-links > li:not(.active) > a::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0,184,169,.45), transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .35s ease;
  pointer-events: none;
}

.nav-links > li:not(.active) > a:active::after {
  transform: translate(-50%, -50%) scale(14);
}

/* ==== Pfeil für Dropdown ==== */
.nav-arrow {
  display: inline-block;
  margin-left: 2px;
  width: .9em;
  text-align: center;
  line-height: 1;
  opacity: .9;
  transform: translateY(1px) rotate(0deg);
  transition:
    transform .22s cubic-bezier(.3,.7,.2,1.2),
    opacity .2s ease,
    color .2s ease,
    letter-spacing .2s ease;
}

.nav-arrow::before {
  content: "❯";              /* schlanker Rechts-Pfeil */
}

.dropdown > a:hover .nav-arrow,
.dropdown > a:focus .nav-arrow {
  color: #00ffcc;
  opacity: 1;
  letter-spacing: .5px;
}

.dropdown > a:active .nav-arrow {
  transform: translateY(2px) rotate(10deg) scale(1.08);
}

.dropdown > a[aria-expanded="true"] .nav-arrow {
  transform: translateY(2px) rotate(90deg); /* nach unten */
}

/* ==== Dropdown (Desktop, verbunden) ==== */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 230px;
  background: #1b2a37;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  list-style: none;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2000;
}

/* Connector unter dem Pill – perfekt zentriert */
.dropdown.open > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 22px;
  height: 12px;
  border-radius: 0 0 10px 10px;
  background: #1b2a37;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 12px rgba(0,0,0,.22);
  pointer-events: none;
}

/* wenn offen, Pill optisch verbinden */
.dropdown.open > a {
  background: rgba(0,0,0,.34);
  border-color: rgba(0,255,204,.22);
  box-shadow:
    0 12px 26px rgba(0,184,169,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  font-size: 15px;
  transition: background .18s ease, padding-left .18s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: #2a3a48;
  color: #00ffcc;
  outline: none;
  padding-left: 20px;
}

/* ==== CTA (Desktop) ==== */
.highlight-link {
  color: #00ffcc;
  border: 2px solid #00ffcc;
  border-radius: 12px;
  padding: 6px 14px;
  transition: all .3s ease;
}

.highlight-link:hover {
  background: #00ffcc;
  color: #003344;
}

/* ==== MOBILE: Hamburger-Button – nur Icon, kein Kreis ==== */
.hamburger {
  display: none;              /* Desktop: unsichtbar */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;

  align-items: center;
  justify-content: center;
}

.hamburger i {
  font-size: 25px;            /* vorher 16px → jetzt größer, aber nicht riesig */
  color: #ffffff;
}

.hamburger:hover i {
  color: #00ffcc;
}

.hamburger[aria-expanded="true"] i {
  color: #00ffcc;
}

.hamburger:focus-visible {
  outline: 2px solid #00ffcc;
  outline-offset: 3px;
}

.mobile-shortcuts {
  display: none;
}


@media (max-width: 900px) {

  .navbar {
    height: 70px;
    padding: 0 10px;          /* etwas weniger Rand rechts/links */
    justify-content: flex-start;
  }

  .logo-container {
    margin-left: -4px;
    margin-bottom: 0;
    gap: 8px;
    flex: 1 1 auto;           /* Logo nimmt den Platz dazwischen ein */
  }

  /* nur EINE Definition! */
  .navbar-right-mobile {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;        /* schiebt Icons + Burger nach rechts */
    margin-right: 2px;          /* falls woanders was gesetzt wurde */
  }

  .logo {
    height: 60px;
  }

  .logo-divider {
    margin-left: -12px;
    height: 38px;
  }

  .logo-divider::before {
    height: 48px;
    box-shadow: 0 0 6px rgba(0, 184, 169, 0.6);
  }

  .logo-tagline {
    margin-left: -4px;
    margin-bottom: 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }

  .tagline-line2 {
    margin-left: 6px;
  }

  .mobile-shortcuts {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .mobile-shortcuts a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0,184,169,.12);
    border-radius: 50%;
    color: #00b8a9;
    font-size: 17px;
    transition:
      transform .2s ease,
      background-color .2s ease,
      color .2s ease;
  }

  .mobile-shortcuts a:hover {
    background: rgba(0,184,169,.2);
    color: #009e92;
    transform: scale(1.08);
  }

  .hamburger {
    display: flex;
  }

  /* Burger-Menü Panel – zentriert, einheitliche Breite */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 420px;
    margin: 0 auto;
    background: #111b24;
    padding: 14px 14px 18px;
    gap: 10px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    z-index: 999;
    overflow-x: hidden;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links > li {
    width: 100%;
  }

  .nav-links > li > a {
    width: 100%;
    font-size: 16px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    transition:
      background-color .25s ease,
      transform .15s ease,
      color .25s ease;
  }

  .nav-links > li > a:hover {
    background: rgba(255,255,255,.08);
    transform: scale(1.02);
  }

  .nav-links > li > a:active {
    transform: scale(.97);
    background: rgba(0,184,169,.15);
  }

  .dropdown > a {
    width: 100%;
  }

  .nav-links > li > a.highlight-link {
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid #00ffcc;
    background: linear-gradient(135deg, #00b8a9, #00e6c3);
    color: #021b24;
    font-weight: 600;
  }

  .nav-links > li > a.highlight-link i {
    font-size: 17px;
    margin: 0;
  }

  .nav-links > li > a.highlight-link:hover {
    background: linear-gradient(135deg, #00e6c3, #00b8a9);
    transform: scale(1.02);
  }

  .dropdown-menu {
    position: static;
    min-width: unset;
    border: none;
    background: transparent;
    box-shadow: none;
    margin-top: 4px;

    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    padding: 0;
    transform: none;
    transition:
      max-height .28s ease,
      opacity .22s ease,
      padding .22s ease;
  }

  .dropdown.open .dropdown-menu {
    max-height: 1000px;
    opacity: 1;
    pointer-events: auto;
    padding: 4px 0 2px;
  }

  .dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 15px;
    color: #dde7f2;
    padding: 8px 10px 8px 30px;
    border-radius: 8px;
    background: transparent;
    position: relative;
  }

  .dropdown-menu a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #00b8a9;
    opacity: 0.75;
  }

  .dropdown-menu a:hover,
  .dropdown-menu a:focus {
    background: rgba(255,255,255,.06);
    color: #00ffcc;
    padding-left: 32px;
  }

  .dropdown.open > a::after {
    display: none;
  }

  .nav-arrow {
    display: inline-block;
    margin-left: 6px;
    line-height: 1;
    opacity: .95;
    transition:
      transform .22s cubic-bezier(.3,.7,.2,1.2),
      color .2s ease;
  }

  .dropdown > a:hover .nav-arrow {
    color: #00ffcc;
  }

  .dropdown > a[aria-expanded="true"] .nav-arrow {
    transform: rotate(90deg);
  }
}

/* sorgt dafür, dass Anker-Ziele unter einer (ursprünglich fixen) Navbar korrekt einrasten */
#results-section,
#search-section {
  scroll-margin-top: 110px; /* Desktop (Navbar ~96px) */
}

@media (max-width: 900px) {
  #results-section,
  #search-section {
    scroll-margin-top: 90px; /* Mobile (Navbar ~70px) */
  }
}

/* optional für weiches Scrollen */
html {
  scroll-behavior: smooth;
}

/* === Anti-Overscroll (Seite) === */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;           /* kein horizontales Scrollen */
  overscroll-behavior-x: none;  /* verhindert iOS/Android "Seitwärts-Ziehen" */
  touch-action: pan-y;          /* nur vertikales Scrollen auf der Seite */
}

/* Clip alles, was ggf. aus dem Viewport ragen könnte */
.navbar,
.homepage-main,
.hero-with-image,
.search-section {
  overflow-x: clip;            /* moderner als hidden, clippt ohne Scrollbar */
}

/* Bilder/Videos niemals breiter als der Viewport */
img, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==== ULTRA-WIDE SCREENS (z.B. ab 1400px) ==== */
@media (min-width: 1400px) {
  .navbar {
    /* Inhalt auf ~1280px begrenzen und zentrieren */
    padding-left: calc(50vw - 640px);
    padding-right: calc(50vw - 640px);
  }
}

/* === Sprechblasen-Connector für das Dropdown (Desktop) === */
@media (min-width: 901px) {
  .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -9px;                /* sitzt knapp über dem Panel */
    left: 40px;               /* Abstand von links – an dein Pill anpassen */
    width: 16px;
    height: 16px;
    background: #1b2a37;      /* gleiche Farbe wie .dropdown-menu */
    transform: rotate(45deg); /* macht aus dem Quadrat ein „Dreieck“ */
    
    /* leichte Outline wie das Panel */
    border-left: 1px solid rgba(255,255,255,.08);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: -2px -2px 4px rgba(0,0,0,.25);
    z-index: -1;              /* zieht sich unter den Panel-Radius */
  }
}







/* ===== Hero-Bereich Startseite ===== */

/* Hero: höher, damit das Bild hinter die Filter „reinläuft“ */
.hero-with-image {
  margin-top: var(--nav-h);
  position: relative;
  height: clamp(56vh, 64vh, 72vh);  /* großer Hero auf Desktop */
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
}

/* Bild */
.hero-background-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  transform:scale(1.035);
  filter:brightness(.72) contrast(1.06) saturate(1.02);
  will-change:transform;
}

/* Gradient – Fokus hinter Text */
.hero-with-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1200px 420px at 50% 48%, rgba(0,0,0,.55), transparent 70%),
    linear-gradient(180deg, rgba(18,34,42,.55) 0%, rgba(18,34,42,.35) 60%, rgba(18,34,42,.25) 100%);
}

/* Inhalt */
.hero-overlay{
  position:relative;
  z-index:2;
  height:100%;
  width:100%;
  display:grid;
  place-items:center;       /* horizontal & vertikal zentriert */
  padding:0 20px;
  text-align:center;
  animation:fadeUp .55s ease-out both .1s;
}

/* Glass-Karte – Desktop stark nach oben gezogen */
.hero-overlay > div,
.hero-overlay .hero-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:16px;
  padding:clamp(18px, 3vw, 38px) clamp(20px, 3.4vw, 46px);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  max-width:min(980px,92vw);

  /* Desktop: kräftig hochgezogen, damit es tief in den Hero „reinragt“ */
  margin-top: -100px;
}

/* Typo */
.hero-overlay h1{
  margin:0 0 12px;
  color:#fff;
  font-weight:800;
  line-height:1.12;
  font-size:clamp(30px,5.2vw,56px);
  max-width:none;
  margin-inline:auto;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

.hero-overlay p{
  margin:8px 0 0;
  color:#eaf3f6;
  line-height:1.55;
  font-size:clamp(14px,1.8vw,20px);
  max-width:60ch;
  margin-inline:auto;
  opacity:.95;
}

.hero-overlay h1::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:14px auto 0;
  border-radius:2px;
  background:var(--accent);
  opacity:.95;
}

/* Hover: dezenter Tiefeneffekt */
@media (hover:hover){
  .hero-background-image:hover{
    transform:scale(1.045);
  }
}

/* ===== Responsive Feinschliff – iPad (Hoch + Quer, ca. 601–1024px) ===== */
@media (max-width: 1024px) and (min-width: 601px){
  :root{ --nav-h:0px; }          /* iPad Navbar etwas kleiner */

  .hero-with-image{
    height: 52vh;
    min-height: 420px;
  }

  .hero-background-image{
    object-position:center 45%;
  }

  /* iPad: weniger stark hochgezogen, wirkt ruhiger */
  .hero-overlay .hero-card{
    margin-top: -50px;
  }
}

/* ===== Responsive – Handy (bis 600px) ===== */
@media (max-width:600px){
  :root{ --nav-h:0px; }          /* Mobile Navbar-Höhe */

  .hero-with-image{
    height: 48vh;
    min-height: 380px;
  }

  .hero-overlay h1::after{
    width:56px;
  }

  /* Handy: nur leicht anheben, damit es nicht zu weit oben klebt */
  .hero-overlay .hero-card{
    margin-top: -80px;
    padding: 18px 20px 20px;
  }

  .hero-overlay h1{
    font-size: clamp(24px, 6vw, 30px);
  }

  .hero-overlay p{
    font-size: 14px;
  }
}


/* Mobile */
@media screen and (max-width: 768px) {
  .search-form {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  
  .form-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-search,
  .btn-advanced {
    width: 100%;
  }
  
  .form-group {
    margin-bottom: 18px;
  }

  .form-group input,
  .form-group select {
    padding: 14px 16px;
    font-size: 16px;
  }

  /* >>> Wichtig: Abstand zwischen Hero & Search = 0 <<< */
  .homepage-main{
    gap: 0;}

  .search-section{
    margin: -80px 16px 0;   /* Overlap wie zuvor, links/rechts etwas Luft */
    padding: 22px 16px;
    border-radius: 14px;
  }
}






/* 3) Suchbereich – in den Hero „reinziehen“ */
.search-section{
  background: linear-gradient(135deg, #121c26, #1f2f3d);
  margin: -80px auto 0;              /* Overlap mit dem Hero */
  max-width: 1200px;
  padding: 64px 56px 48px;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  color:#fff;
  position: relative;
  z-index: 3;
  animation: fadeInUp .6s ease forwards;
  opacity:0;
}
  
  @keyframes fadeInUp {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .search-section h2 {
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 36px;
    text-align: center;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  
  .search-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
  }
  
  /* Ab 1024px runter: 2 Spalten */
  @media screen and (max-width: 1024px) {
    .search-form {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Ab 600px runter: 1 Spalte */
  @media screen and (max-width: 600px) {
    .search-form {
      grid-template-columns: 1fr;
    }
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14.5px;
    color: #cbd5e1;
  }
  
  .form-group input,
  .form-group select {
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #3a4a5a;
    border-radius: 8px;
    background-color: #273642;
    color: #ffffff;
    transition: border 0.2s ease, box-shadow 0.3s ease;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
    background-color: #2b3d4a;
  }
  
  .form-group input::placeholder {
    color: #a8b4c4;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    outline: none;
    border-color: #00ffcc;
    box-shadow: 0 0 0 4px rgba(0, 255, 204, 0.1);
  }
  
  .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23cccccc' stroke-width='14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
  }
  
  /* Buttons */
  .form-buttons {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    margin-bottom: 40px;
  }
  
  .btn-search,
  .btn-advanced {
    padding: 13px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-search {
    background: linear-gradient(135deg, #00ffcc, #00c7a2);
  color: #002c3b;
  border: none;
  }
  
  .btn-search:hover {
    background: #00e6ba;
    transform: translateY(-1px);
  }
  
  .btn-advanced {
    background: transparent;
    border: 1px solid #00ffcc;
    color: #00ffcc;
  }
  
  .btn-advanced:hover {
    background: #00ffcc;
    color: #002c3b;
    transform: translateY(-1px);
  }
  
  .extra-filters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 20px;
    opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  transform: translateY(-8px);
  }
  
  .extra-filters.show {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
  
  
  
  .form-group input:hover,
  .form-group select:hover {
    border-color: #00ffcc;
  }
  /* Mobile */
  @media screen and (max-width: 768px) {
    .search-form {
      grid-template-columns: 1fr;
      gap: 5px;
    }
    
    .form-buttons {
      flex-direction: column;
      align-items: stretch;
    }
    
    .btn-search,
    .btn-advanced {
      width: 100%;
    }
    
    .form-group {
    margin-bottom: 18px;
  }
  
    .form-group input,
    .form-group select {
      padding: 14px 16px;
      font-size: 16px;
    }
    
       .homepage-main{ gap: 6px; }   /* schließt die Lücke direkt */
  .search-section{
    padding: 22px 16px;
    border-radius: 14px;
  }
    }
    
    
  
    
  
  
  
  
  
  
  
  
  
  
  /* === WERBE-BANNER === */
  .ad-banner {
    margin: 50px auto;
    max-width: 1000px;
    background-color: #eef4fb;
    padding: 30px;
    text-align: center;
    font-size: 18px;
    border-radius: 12px;
    border: 1px dashed #a2bcd6;
    color: #2c3e50;
  }
  
  
  /* === RESPONSIVE DESIGN === */
  @media screen and (max-width: 768px) {
    .hero h1 {
      font-size: 28px;
    }
    
    .hero p {
      font-size: 16px;
    }
    
  
  }
  
  
  
  
  .no-js .dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
  }
  
  
  
  
  
  
  
  
  
  .inline-selects {
    display: flex;
    gap: 0.5rem;
  }
  
  .inline-selects select {
    flex: 1;
  }
  
  
  
  
  
  
  
  
  .input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .input-icon-wrapper i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #00b8a9;
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
  }
  
  .input-icon-wrapper input[type="text"] {
    padding-left: 50px !important;
    /* Wichtig: !important, um überschreibende Regel zu umgehen */
    background-color: #1a2733;
    color: #f5f8fc;
    border: 1px solid #00b8a9;
    border-radius: 6px;
    height: 48px;
    font-size: 15px;
    width: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
  }
  
  .input-icon-wrapper input:focus {
    outline: none;
    border-color: #00d5c3;
    box-shadow: 0 0 0 2px rgba(0, 216, 195, 0.2);
  }
  
  /* === Slim Select Dark Mode für Autovisa === */
  
  .ss-main {
    background-color: #1a2733 !important;
    border: 1px solid #00b8a9 !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    color: #f5f8fc !important;
    min-height: 42px !important;
    padding: 6px 10px !important;
    box-shadow: none !important;
  }
  
  .ss-main:hover {
    border-color: #00d5c3 !important;
  }
  
  .ss-open .ss-main {
    border-color: #00d5c3 !important;
    box-shadow: 0 0 0 2px rgba(0, 216, 195, 0.2) !important;
  }
  
  .ss-placeholder {
    color: #888 !important;
  }
  
 /* SlimSelect Dropdown – höher & luftiger */
.ss-content {
  background-color: #1f3441 !important;
  color: #f5f8fc !important;
  border: 1px solid #00b8a9 !important;

  /* WICHTIG: viel größer machen */
  max-height: min(70vh, 560px) !important;   /* war 260px */
  overflow-y: auto !important;

  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
  z-index: 9999 !important;
}

/* Die innere Liste soll die Höhe übernehmen */
.ss-content .ss-list {
  max-height: inherit !important;
}
  
  /* Optionen */
  .ss-option {
    padding: 10px !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background-color: #1f3441 !important;
    color: #f5f8fc !important;
  }
  
  .ss-option:hover {
    background-color: #00d5c3 !important;
    color: white !important;
  }
  
  .ss-option.ss-selected {
    background-color: #00b8a9 !important;
    color: white !important;
  }
  
  /* Tags im Eingabefeld */
  .ss-values .ss-value {
    background-color: #00b8a9 !important;
    color: white !important;
    border-radius: 4px !important;
    padding: 3px 6px !important;
    margin: 2px !important;
  }
  
  /* Suchfeld im Dropdown */
  .ss-search input {
    background-color: #1a2733 !important;
    color: #f5f8fc !important;
    border: 1px solid #00b8a9 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
  }
  
  .ss-search input::placeholder {
    color: #888 !important;
  }
  
  /* Pfeil rechts */
  .ss-arrow {
    border-color: #00b8a9 !important;
  }
  
  /* Scrollbar */
  .ss-content::-webkit-scrollbar {
    width: 8px;
  }
  .ss-content::-webkit-scrollbar-track {
    background: #1a2733;
  }
  .ss-content::-webkit-scrollbar-thumb {
    background-color: #00b8a9;
    border-radius: 10px;
  }
  
  
  
  
  @media (max-width: 1024px) {
    .ss-content { max-height: 75vh !important; }
  }
    
  
  
  
  form select:not(.ss-select) {
    background-color: #1a2733;
    color: #f5f8fc;
    border: 1px solid #00b8a9;
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    z-index: 1;
  }
  
  form select:not(.ss-select):hover {
    border-color: #00d5c3;
  }
  
  form select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  
  
  
  
  
  form input[type="text"],
  form input[type="number"],
  form input[type="search"],
  form input[type="email"] {
    background-color: #1a2733;
    color: #f5f8fc;
    border: 1px solid #00b8a9;
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    font-family: inherit;
  }
  
  form input:focus {
    outline: none;
    border-color: #00d5c3;
    box-shadow: 0 0 0 2px rgba(0, 216, 195, 0.2);
  }
  
  
  
  
  
  
  form label {
    color: #f5f8fc;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
  }
  
  
  
  
  
  
  
  
  .custom-kilometer {
    transition: all 0.3s ease;
  }
  
  
  
  
  .custom-price {
    transition: all 0.3s ease;
  }
  
  
  
  
  #gear {
    transition: all 0.3s ease;
  }
  
  
  
  
  
  #fuel {
    transition: all 0.3s ease;
  }
  
  
  
  
  
  .dual-input-wrapper {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  
  /* Einheitliches Design für Select & Input */
  .dual-input-wrapper select,
  .dual-input-wrapper input {
    font-size: 15px !important;
    height: 46px !important;
    padding: 12px 14px !important;
    background-color: #1a2733 !important;
    border: 1px solid #00b8a9 !important;
    border-radius: 6px !important;
    color: #f5f8fc !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  }
  
  /* Input für eigenen Wert – kompakter */
  .dual-input-wrapper input[type="number"] {
    max-width: 160px !important;
    flex: 0 0 auto !important;
  }
  
  /* Placeholder-Stil */
  .dual-input-wrapper input::placeholder {
    color: #a8b4c4 !important;
  }
  
  /* Fokus-Stil wie bei PLZ / Ort */
  .dual-input-wrapper input:focus,
  .dual-input-wrapper select:focus {
    border-color: #00d5c3 !important;
    box-shadow: 0 0 0 2px rgba(0, 216, 195, 0.2) !important;
    outline: none !important;
  }
  
  /* Hover-Stil wie bei SlimSelect */
  .dual-input-wrapper input:hover,
  .dual-input-wrapper select:hover {
    border-color: #00ffcc !important;
  }
  
  
  
  
  
  
/* === Handy: Hero & Suchbereich ohne Lücke === */
@media screen and (max-width: 600px) {

  /* kein Grid-Abstand zwischen Hero und Search */
  .homepage-main {
    gap: 0;
  }

  /* Hero ganz normal, kein extra Bottom-Abstand */
  .hero-with-image {
    margin-bottom: 0;
  }

  /* Suchbereich in den Hero reinziehen, kein weißer Balken */
  .search-section {
    margin: -80px 0 0;      /* overlap nach oben, 0 Abstand */
    padding: 32px 16px;     /* wie vorher */
    border-radius: 0;       /* volle Breite auf Handy */
  }

  .search-section h2 {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .search-form {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .form-group {
    margin-bottom: 8px;
  }

  .form-group label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .form-group input,
  .form-group select {
    font-size: 15px;
    padding: 12px 14px;
    height: 44px;
  }

  .dual-input-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .dual-input-wrapper input[type="number"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  .form-buttons {
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
    align-items: center;
  }

  .btn-search,
  .btn-advanced {
    width: 100%;
    font-size: 16px;
    padding: 14px 18px;
  }
}
  
  
  
  /* === Wrapper (nur Breite/Abstand) === */
.results-section{
  max-width:1280px;
  margin:32px auto;
  padding:0 16px;
}

/* === Kartenlayout (GRID) === */
#carResults,
.car-results{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:24px;
  width:100%;
  align-items:start;                 /* ⬅️ nicht strecken -> weniger Leerraum */
}

/* === Fahrzeugkarte === */
.car-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e3e9ef;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:transform .25s ease, box-shadow .3s ease;
  height:auto;                       /* ⬅️ keine erzwungene Höhe */
}
.car-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* === Medienbereich === */
.car-card-media{
  position:relative;
  background:#f3f6f9;
  border-bottom:1px solid #e3e9ef;
}
.media-container{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  display:flex;
}
@supports not (aspect-ratio:16/9){
  .media-container{ height:0; padding-top:56.25%; }
  .media-container .slides{ position:absolute; inset:0; }
}
.slides{ display:flex; width:100%; height:100%; transition:transform .5s ease-in-out; will-change:transform; }
.slide{ flex:0 0 100%; min-width:100%; height:100%; display:block; width:100%; object-fit:cover; object-position:center; }

/* Pfeile */
.media-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(15,32,39,.7); border:none; color:#fff;
  font-size:18px; padding:10px 12px; border-radius:50%;
  cursor:pointer; z-index:5; transition:background .25s ease, transform .15s ease; line-height:1;
}
.media-arrow:hover{ background:rgba(0,184,169,.9); }
.media-arrow:active{ transform:translateY(-50%) scale(.96); }
.media-arrow.left{ left:10px; } .media-arrow.right{ right:10px; }

/* === Details (kompakt) === */
.car-details{
  padding:16px 18px 14px;           /* ⬅️ enger */
  display:flex;
  flex-direction:column;
  gap:8px;                           /* ⬅️ enger */
}
.car-top-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.car-title{
  font-size:17px; font-weight:600; color:#1a2a33; flex:1 1 auto;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0;
}
.car-price{
  font-size:18px; padding:6px 12px; background:#f1f5f9; border-radius:10px;
  color:#1a2a33; font-weight:600; white-space:nowrap; flex-shrink:0;
}

/* Untertitel */
.car-subtitle{
  font-size:14px; color:#6c7a89; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  line-height:1.25; min-height:2.4em;        /* ⬅️ etwas kompakter */
}

/* Info-Grid (kompakt, nicht zentriert) */
.car-info-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px 16px; font-size:14px; color:#37444f;
  margin:8px 0 0;                  /* ⬅️ kleiner Top-Abstand */
  padding:8px 0 6px;               /* ⬅️ kompakter Innenabstand */
  border-top:1px solid #f0f2f5;
}
.car-info-grid p{ margin:0; display:flex; align-items:center; gap:6px; }
.car-info-grid i{ color:#00b8a9; font-size:13px; }

/* Händlerinfo (kompakt, normales Fließen) */
.dealer-info{
  font-size:13px; color:#6b7a88; font-style:italic;
  margin-top:8px;                   /* ⬅️ kein auto mehr */
  padding-top:8px;
  border-top:1px solid #e6eaf0;
}

/* Aktionen */
.card-actions{ display:flex; gap:10px; }
.card-actions button, .save-btn, .clean-phone{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; background:rgba(0,184,169,0.0);
  border:1px solid #ccd5df; border-radius:50%; padding:0; font-size:16px;
  cursor:pointer; text-decoration:none; color:inherit; box-shadow:0 2px 5px rgba(0,0,0,.06);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.card-actions button:hover, .save-btn:hover, .clean-phone:hover{ background:#00b8a9; color:#fff; border-color:#00b8a9; }
.card-actions button i, .save-btn i, .clean-phone i{ color:#1a2a33; transition:color .2s ease; }
.card-actions button:hover i, .save-btn:hover i, .clean-phone:hover i{ color:#fff; }
.clean-phone[aria-disabled="true"]{ opacity:.35; pointer-events:none; cursor:not-allowed; }
.car-card-media .mobile-only{ position:absolute; top:10px; right:10px; z-index:7; display:flex; gap:10px; }

/* Desktop-only Buttons (optional) */
.desktop-only{ display:none; }
.dealer-info-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:14px; padding-top:10px; border-top:1px solid #e6eaf0;
}
.dealer-info-text{ font-size:13px; color:#6b7a88; font-style:italic; line-height:1.4; flex:1; }

/* === Responsive === */
@media (max-width:900px){
  .car-info-grid{ grid-template-columns:repeat(2,1fr); }
  .media-arrow{ font-size:16px; padding:8px 10px; }
}
@media (min-width:901px){
  .desktop-only{ display:flex; gap:10px; margin-top:8px; }
}
@media (max-width:600px){
  .results-section{ padding:0 12px; }
  #carResults, .car-results{ grid-template-columns:1fr; gap:20px; }
  .media-container{ aspect-ratio:4/3; }
  .car-title{ font-size:16px; }
  .car-price{ font-size:16px; padding:5px 10px; }
  .car-subtitle{ -webkit-line-clamp:2; }
  .car-info-grid{ font-size:13px; gap:6px 12px; }
  .dealer-info{ font-size:12.5px; }
}

/* Bewegungs-Reduktion */
@media (prefers-reduced-motion: reduce){
  .car-card, .slides{ transition:none !important; }
}

/* große Breakpoints */
@media (min-width:1200px){
  #carResults, .car-results{ grid-template-columns:repeat(3,1fr); }
}




/* Verkäufer-Row mit Logo/Initialen */
.dealer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.dealer-avatar {
  width: 34px;
  height: 34px;
  aspect-ratio: 1 / 1;         /* hält's rund bei Resize */
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e3e9ef;
  background: #ffffff;
  position: relative;          /* für Overlay-Positionierung */
  flex-shrink: 0;
}

/* Bild & Initialen ÜBERLAGERN statt nebeneinander */
.dealer-avatar img,
.dealer-avatar .dealer-initials {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Bild nie via display:none verstecken (Safari lädt sonst nicht) */
.dealer-avatar img {
  object-fit: cover;
  display: block;
  opacity: 0;                 /* unsichtbar bis geladen */
  transition: opacity .2s ease;
}

/* Fallback-Initialen sind default sichtbar */
.dealer-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #253544;
  background: #e9eef3;
  letter-spacing: .3px;
}

/* Wenn Logo geladen: Bild zeigen, Initialen ausblenden */
.dealer-avatar.has-logo img { opacity: 1; }
.dealer-avatar.has-logo .dealer-initials { display: none; }

.dealer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dealer-meta .dealer-name {
  font-weight: 600;
  color: #1a2a33;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-meta .dealer-location {
  color: #6b7a88;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 700px){
  .dealer-avatar { width: 38px; height: 38px; }
  .dealer-meta .dealer-name { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce){
  .dealer-avatar img { transition: none; }
}




  /* Eltern für absolut positionierte Box */
.location-group,
.input-icon-wrapper { position: relative; }

/* ==== Vorschlagsbox (Dark Theme) ==== */
.loc-suggest-box {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 60;

  max-height: 320px;
  overflow: auto;

  /* Dark panel + leichter Glass-Effekt */
  background: linear-gradient(180deg, #0f1b22 0%, #0c151b 100%);
  border: 1px solid rgba(22, 212, 178, 0.25);     /* türkisrahmen */
  border-radius: 12px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.02) inset;

  color: #e6f2f5;
  font-size: 0.95rem;

  /* sanftes Einblenden */
  opacity: 1;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease;
}
.loc-suggest-box.hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* Einträge */
.loc-suggest-item {
  display: flex;
  align-items: center;
  gap: .6rem;

  padding: 10px 12px;
  cursor: pointer;
  line-height: 1.25;

  border-bottom: 1px solid rgba(255,255,255,.04);
}
.loc-suggest-item:last-child { border-bottom: 0; }

/* linke Icon-Badge */
.loc-suggest-item .loc-icn {
  width: 28px; height: 28px; min-width: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(22,212,178,.15);
  color: #16d4b2;  /* Accent */
  font-size: .9rem;
}

/* Textspalte */
.loc-suggest-item .loc-text { display: grid; }
.loc-suggest-item .primary {
  font-weight: 600; letter-spacing: .1px;
  color: #f2fbff;
}
.loc-suggest-item .secondary {
  margin-top: 2px;
  font-size: .86rem;
  color: #93a8b2;   /* muted */
}

/* Hover/Active */
.loc-suggest-item:hover,
.loc-suggest-item.active {
  background: radial-gradient(120% 140% at 10% 0%,
              rgba(22,212,178,.10) 0%, rgba(22,212,178,.02) 60%, transparent 100%),
              rgba(255,255,255,.02);
  border-bottom-color: rgba(255,255,255,.06);
}

/* Match-Highlight */
.loc-suggest-item mark,
.loc-suggest-item .hl {
  background: none;
  color: #1de9b6;
  font-weight: 700;
}

/* Scrollbar (WebKit) */
.loc-suggest-box::-webkit-scrollbar { width: 10px; }
.loc-suggest-box::-webkit-scrollbar-track { background: transparent; }
.loc-suggest-box::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.loc-suggest-box::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.14); }

/* Loading-State: zeigt Spinner oben rechts */
.loc-suggest-box.loading::after {
  content: "";
  position: sticky; top: 8px; left: calc(100% - 28px);
  width: 16px; height: 16px; margin: 8px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: #16d4b2;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* Leerer Zustand */
.loc-suggest-empty {
  padding: 12px;
  color: #93a8b2;
  font-size: .9rem;
  text-align: center;
}














/* === Footer (Über-uns Look global, self-contained) === */
.site-footer{
  /* lokale Tokens – funktionieren auch, wenn :root fehlt */
  --text:      #eaf3f8;
  --muted:     #b7c3ce;
  --accent:    #00b8a9;
  --stroke:    rgba(255,255,255,.14);
  --surface-0: rgba(255,255,255,.06);
  --surface-1: rgba(255,255,255,.10);
  --e-out:     cubic-bezier(.2,.7,.2,1);
  --bg-grad:   linear-gradient(135deg, #0f2027, #203a43, #2c5364);

  margin-top: clamp(40px, 6vw, 80px);
  padding-top: clamp(28px, 3.5vw, 40px);
  color: var(--text);
  background: var(--bg-grad);
  border-top: 1px solid var(--stroke);
  box-shadow: inset 0 20px 60px rgba(0,0,0,.18);
}

/* Breite */
.site-footer .container{ width:min(1100px,92vw); margin-inline:auto; }

/* Grid */
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:clamp(18px,3vw,28px); align-items:start;
}

/* Brand + Social */
.footer-brand .brand{
  display:inline-block; font-weight:800; letter-spacing:.06em; text-decoration:none; color:#fff;
  padding:10px 12px; border-radius:10px; border:1px solid var(--stroke);
  background:var(--surface-0); backdrop-filter:saturate(120%) blur(2px);
}
.brand-sub{ color:var(--muted); margin:.6rem 0 1rem; }
.social{ display:flex; gap:12px; padding:0; margin:0; list-style:none; }
.social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--stroke); border-radius:10px;
  color:var(--text); background:var(--surface-0);
  transition: transform .2s var(--e-out), border-color .2s var(--e-out), color .2s var(--e-out);
  backdrop-filter:saturate(120%) blur(2px);
}
.social a:hover{ transform:translateY(-2px); color:var(--accent); border-color:var(--accent); }

/* Spalten */
.footer-col h3{ font-size:1rem; margin-bottom:.6rem; color:#fff; font-weight:700; }
.footer-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.footer-col a{ color:var(--muted); text-decoration:none; border-radius:8px; padding:6px 0; transition:color .2s var(--e-out); }
.footer-col a:hover,.footer-col a:focus{ color:var(--accent); outline:none; }

/* Bottom bar */
.footer-bottom{
  margin-top:clamp(18px,2.5vw,28px);
  border-top:1px solid var(--stroke);
  background:var(--surface-1);
  backdrop-filter:saturate(120%) blur(2px);
}
.bottom-inner{ display:flex; gap:14px; align-items:center; justify-content:space-between; padding:14px 0; }
.bottom-inner p{ color:var(--muted); margin:0; font-size:.95rem; }
.to-top{
  color:var(--text); text-decoration:none; border:1px solid var(--stroke);
  padding:8px 12px; border-radius:10px; background:var(--surface-0);
  transition: transform .2s var(--e-out), border-color .2s var(--e-out), color .2s var(--e-out);
}
.to-top:hover,.to-top:focus{ transform:translateY(-2px); color:var(--accent); border-color:var(--accent); outline:none; }

/* Responsive */
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .bottom-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
}









/* Force: gleiche Ausrichtung wie anzeige.html (Menü startet am linken Pill-Rand) */
.navbar .dropdown { position: relative; }           /* falls nicht schon so */
.navbar .dropdown-menu{
  left: 0 !important;
  right: auto !important;
  transform: translateY(6px) scale(.98) !important; /* X-Übersetzung entfernen */
}