/* ============================================
   ECX 30 - Topbar
   Uebernommen aus dem Entwurf der Grafikerin,
   Werte, Media Queries und Uebergaenge unveraendert.
   Umbenennungen:
     .topbar     -> .ecx-topbar  (Unterklassen __inner,
                    __logo, __right usw. bleiben)
     .is-active  -> .ecx-is-active
   Entfallen:
     .search - die Suche kommt von Ajax Search Pro und
     bringt eigene Klassen und eigenes Styling mit.
     Bewusst NICHT ueberschrieben.
   ============================================ */

.ecx-topbar {
  background: var(--ec-blue);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/*
 * HINTERGRUNDGRAFIK DER ALTEN KOPFZEILE, seit 06.10.2026 (Isa, s1).
 *
 * Der Streifen des bisherigen Headers - blauer Grund, rote Wellen -,
 * seit 06.10.2026 ALS VEKTOR (kopfzeile-linien.svg). Isa hat die
 * Liniengrafik als SVG geliefert; der Streifen ist daraus nachgebaut,
 * Lage an das bisherige PNG angepasst und danach 20px hoeher gesetzt.
 * Das PNG (1210 x 103) wurde am Desktop hochgerechnet und war auf
 * Retina deutlich unscharf - das SVG ist auf jeder Breite scharf.
 * DECISIONS Punkte 44 und 47.
 *
 * Eigene Datei im Theme (ecx/img/header/), unabhaengig vom alten
 * GenerateBlocks-Element und der Mediathek. Das alte Element ist
 * unberuehrt.
 *
 * cover, mittig: der Streifen fuellt die Leiste immer ganz, im
 * Seitenverhaeltnis seiner viewBox (1210:103). Auf dem Handy der linke
 * Ausschnitt, siehe unten.
 *
 * Der Grund --ec-blue bleibt stehen, bis das Bild geladen ist.
 */
.ecx-topbar {
  background-image: url('../../img/header/kopfzeile-linien.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * Unter 640 der LINKE Ausschnitt statt des mittigen. Mittig lag das
 * Logo auf dem dichtesten Teil der roten Wellen; links steht es auf
 * ruhigem Blau, die Wellen liegen zwischen Logo und Lupe. Verglichen bei
 * 375 mit left, 8 % und 100 % - rechts bliebe von der Grafik kaum etwas.
 */
@media (max-width: 640px) {
  .ecx-topbar { background-position: left center; }
}

.ecx-topbar::before,
.ecx-topbar::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url('../../img/linien.png') no-repeat;
  background-size: 60% auto;
  opacity: .35;
  mix-blend-mode: screen;
}

.ecx-topbar::before { top: -180px; left: -120px; width: 700px; height: 700px; transform: rotate(-10deg); }
.ecx-topbar::after  { top: -120px; right: -160px; width: 600px; height: 600px; transform: rotate(140deg); opacity: .28; }

/*
 * Die beiden Linienbilder sind seit 06.10.2026 aus. Der Streifen oben
 * bringt seine eigenen Wellen mit; beides uebereinander waere unruhig
 * und laege mit .35 Deckkraft als Schleier ueber den roten Linien. Die
 * Regeln darueber bleiben stehen - wer zur Linien-Fassung zurueck will,
 * loescht diese Zeile und die background-image-Regel oben.
 */
.ecx-topbar::before,
.ecx-topbar::after { content: none; }

.ecx-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 32px;
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.ecx-topbar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ecx-topbar__logo img { height: 46px; width: auto; }

.ecx-topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}

/*
 * Platz fuer das ASP-Suchfeld: Breite und Position. Das Aussehen des
 * Felds steht seit 07.10.2026 darunter fest (vorher nur im ASP-Backend).
 * Die Suche liegt im Markup hinter __right. margin-left:auto schiebt sie
 * samt allem dahinter nach rechts, order bringt sie davor.
 */
.ecx-topbar__search {
  order: 2;
  flex: 0 1 240px;
  min-width: 0;
  margin-left: auto;
}
.ecx-topbar__logo { order: 1; }
.ecx-topbar__right { order: 3; }

/*
 * Aussehen der ASP-Suche (Instanz 7), unabhaengig von den Einstellungen
 * im ASP-Backend. Seit 07.10.2026, DECISIONS Punkt 53: auf Live wichen
 * die Instanz-Einstellungen ab (eckig, weisser Grund, Lupe rechts).
 * Festgehalten wird genau, was sich zwischen lokal und Live
 * unterschied - Breite, Grund, Rand, Rundung, Schatten, Schrift, Lupe.
 * Alles andere (Ergebnisliste, Verhalten) bleibt beim Plugin.
 *
 * Warum die IDs: ASP schreibt seine Regeln als #ajaxsearchpro7_1 ...
 * (1,3,1). Eine reine Klassenregel verliert dagegen; die IDs in :is()
 * heben unsere Regel um genau eine Klasse darueber, ohne !important.
 * _1 und _2 wie bei ASP selbst - im Header steht die Instanz einmal.
 */
.ecx-topbar__search .asp_w_container_7 { width: 100%; }

.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) {
  background: rgba(255,255,255,.005);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 21px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.2);
}
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox {
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
}
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox .proinput,
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox .proinput input.orig,
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox .proinput input.autocomplete {
  color: #fff;
  font-size: 14px;
}
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox .proinput input.orig::placeholder {
  color: #fff;
  font-size: 14px;
  opacity: .85;
}
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox .promagnifier {
  order: 1;
  float: left;
  background: transparent;
  box-shadow: none;
}
.ecx-topbar__search :is(#ajaxsearchpro7_1, #ajaxsearchpro7_2) .probox .promagnifier .innericon svg {
  fill: #fff;
}

/* Lupe und Burger erst unter 900px. */
.ecx-topbar__searchtoggle,
.ecx-topbar__burger { display: none; }

.ecx-topbar__socials { display: flex; gap: 6px; }
.ecx-topbar__socials a {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: .85;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ecx-topbar__socials a:hover { background: var(--ec-red); opacity: 1; }
.ecx-topbar__socials a svg { width: 16px; height: 16px; }

.ecx-topbar__lang { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.ecx-topbar__lang a { opacity: .65; }
.ecx-topbar__lang a.ecx-is-active { opacity: 1; }
.ecx-topbar__lang span { opacity: .35; }

/* ============================================
   Stufe 2: 900 bis 1080px
   Bleibt einzeilig. Die Suche darf schrumpfen,
   aber nicht unter 160px. Abstaende enger.
   ============================================ */
@media (max-width: 1080px) {
  .ecx-topbar__inner { gap: 12px; padding: 14px 20px; }
  .ecx-topbar__right { gap: 12px; }
  .ecx-topbar__search { flex: 0 1 240px; min-width: 160px; }
  .ecx-topbar__logo img { height: 40px; }
}

/* ============================================
   Stufe 3: unter 900px
   Nur noch Logo, Lupe und Burger. Social-Icons
   und Sprachwahl wandern ins Menue-Panel.
   Die Suche wird zur vollbreiten Zeile darunter
   und ist erst nach Klick auf die Lupe da.
   ============================================ */
@media (max-width: 899px) {
  .ecx-topbar__inner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }

  .ecx-topbar__socials,
  .ecx-topbar__lang { display: none; }

  .ecx-topbar__right { margin-left: auto; gap: 4px; }

  .ecx-topbar__searchtoggle,
  .ecx-topbar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Touch-Ziel: mindestens 44px in beide Richtungen. */
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    border-radius: var(--r-md);
    color: #fff;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
  }

  .ecx-topbar__searchtoggle:hover,
  .ecx-topbar__burger:hover { background-color: rgba(255,255,255,.12); }

  .ecx-topbar__burger__label,
  .ecx-burger__label { font-size: 13px; font-weight: 600; }

  /* Suchzeile: volle Breite, erst nach Klick auf die Lupe. */
  .ecx-topbar__search {
    order: 10;
    flex: 1 1 100%;
    margin-left: 0;
    min-width: 0;
    display: none;
    padding-bottom: 6px;
  }
  .ecx-topbar.ecx-is-searchopen .ecx-topbar__search { display: block; }

  .ecx-topbar__logo img { height: 36px; }
}