/* ==========================================================================
   Kopfleiste, Mega-Menü, Menü am Handy
   ========================================================================== */

.wt-kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 var(--wt-rand);
  /* Die Leiste liegt über dem Inhalt. Ohne Deckfläche wäre der Text darunter
     lesbar durchscheinend - deshalb Weichzeichner plus halbe Deckung. */
  background: color-mix(in srgb, var(--wt-bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--wt-normal) var(--wt-kurve-weich),
              border-color var(--wt-normal) var(--wt-kurve-weich);
}

/* Sobald gescrollt wird, wird die Leiste fester - setzt theme.js */
.wt-kopf[data-gescrollt="ja"] {
  background: color-mix(in srgb, var(--wt-bg) 92%, transparent);
  border-bottom-color: var(--wt-border);
}

@supports not (backdrop-filter: blur(1px)) {
  .wt-kopf { background: var(--wt-bg); }
}

.wt-kopf-innen {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--wt-breite);
  height: var(--wt-kopf-hoehe);
  margin: 0 auto;
}

/* --- Wortmarke ----------------------------------------------------------- */

.wt-marke {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--wt-fg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.01em;
  flex: none;
}
.wt-marke:hover { color: var(--wt-fg); }

/* Höhe begrenzen, Breite folgt. Die Breitenbegrenzung fängt sehr breite
   Querformat-Logos ab, damit die Leiste nicht auseinandergeschoben wird. */
.wt-marke img,
.wt-marke-bild {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  flex: none;
}

.wt-marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.wt-marke-text b { font-size: 16.5px; }
.wt-marke-text small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wt-muted);
  letter-spacing: .04em;
}

/* --- Hauptmenü ----------------------------------------------------------- */

/* Die Navigation nimmt den freien Platz zwischen Marke und Werkzeugen ein.
   Ohne flex:1 wüchse sie nur bis zur Textbreite, und die Werkzeuge klebten
   am Menü statt am rechten Rand. min-width:0 verhindert, dass ein langer
   Menüpunkt die Leiste auseinanderdrückt. */
.wt-nav { flex: 1; min-width: 0; }

.wt-menue {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 14px;
  padding: 0;
  list-style: none;
}

.wt-menue > li { position: relative; }

.wt-menue > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--wt-radius-klein);
  color: var(--wt-muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wt-schnell) var(--wt-kurve),
              background-color var(--wt-schnell) var(--wt-kurve);
}

.wt-menue > li > a:hover,
.wt-menue > li:focus-within > a { color: var(--wt-fg); background: var(--wt-surface); }

.wt-menue > li.current-menu-item > a,
.wt-menue > li.current-menu-ancestor > a,
.wt-menue > li.current-page-ancestor > a { color: var(--wt-accent-text); }

/* Pfeil bei Einträgen mit Untermenü */
.wt-menue > li.wt-hat-kinder > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .6;
  transition: transform var(--wt-normal) var(--wt-kurve);
}
.wt-menue > li.wt-hat-kinder:hover > a::after,
.wt-menue > li.wt-hat-kinder:focus-within > a::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* --- Aufklappbereich ----------------------------------------------------- */

.wt-klapp {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  min-width: 230px;
  padding: 10px;
  border: 1px solid var(--wt-border);
  border-radius: 15px;
  background: var(--wt-surface-hoch);
  box-shadow: var(--wt-shadow-hoch), var(--wt-glanz);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity var(--wt-normal) var(--wt-kurve),
              transform var(--wt-normal) var(--wt-kurve),
              visibility var(--wt-normal);
}

.wt-menue > li:hover > .wt-klapp,
.wt-menue > li:focus-within > .wt-klapp {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mehrspaltig, sobald das Menü Gruppen enthält */
.wt-klapp-mehrspaltig {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), minmax(176px, 1fr));
  gap: 4px 12px;
  padding: 16px;
}

.wt-klapp-gruppe { min-width: 0; }

/* Die Spaltenüberschrift steht als eigener Menüeintrag in der Liste, nicht
   an der Spaltenhülle - deshalb auch innerhalb von ul/li ansprechen. */
.wt-gruppentitel {
  display: block;
  padding: 4px 10px 7px;
  color: var(--wt-leise);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wt-gruppentitel-zeile { list-style: none; }

/* Ab der zweiten Überschrift einer Spalte etwas Luft darüber. */
.wt-gruppentitel-zeile ~ li .wt-gruppentitel { padding-top: 12px; }

/* Symbole aus dem Plugin "Menu Icons". Sie kommen als <i class="_mi …">
   mit eigenen Inline-Maßen; hier nur Ausrichtung und Abstand. */
.wt-menue ._mi,
.wt-klapp ._mi {
  margin-right: 7px;
  vertical-align: -2px;
  opacity: .85;
}
.wt-gruppentitel ._mi { margin-right: 6px; opacity: .7; }
.wt-klapp a:hover ._mi { opacity: 1; }

.wt-klapp ul { list-style: none; margin: 0; padding: 0; }

.wt-klapp a {
  display: block;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--wt-muted);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--wt-schnell) var(--wt-kurve),
              background-color var(--wt-schnell) var(--wt-kurve);
}
.wt-klapp a:hover { background: var(--wt-surface-2); color: var(--wt-fg); }
.wt-klapp li.current-menu-item > a { color: var(--wt-accent-text); }

/* --- Werkzeuge rechts ---------------------------------------------------- */

.wt-werkzeuge { display: flex; align-items: center; gap: 8px; flex: none; }

.wt-knopf-rund {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--wt-border);
  border-radius: 11px;
  background: var(--wt-surface);
  color: var(--wt-muted);
  cursor: pointer;
  transition: color var(--wt-schnell) var(--wt-kurve),
              border-color var(--wt-schnell) var(--wt-kurve);
}
.wt-knopf-rund:hover { color: var(--wt-fg); border-color: var(--wt-border-stark); }
.wt-knopf-rund svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hier standen zehn Zeilen für Sonne und Mond im Modus-Schalter. Der
   Schalter ist entfernt - das Erscheinungsbild folgt dem Gerät. */

/* Aktuelle Temperatur in der Leiste */
.wt-kopf-wert {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--wt-border);
  border-radius: 11px;
  background: var(--wt-surface);
  color: var(--wt-fg);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wt-kopf-wert:hover { color: var(--wt-fg); border-color: var(--wt-accent); }
.wt-kopf-wert i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wt-gut);
  flex: none;
  animation: wt-puls 2.6s ease-in-out infinite;
}

@keyframes wt-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

/* --- Menüschalter fürs Handy --------------------------------------------- */

.wt-menue-schalter { display: none; }

.wt-menue-schalter span {
  display: block;
  width: 18px; height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--wt-normal) var(--wt-kurve),
              opacity var(--wt-schnell) var(--wt-kurve);
}

.wt-menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
.wt-menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wt-menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }

/* --- Umschaltpunkt ------------------------------------------------------- */

@media (max-width: 980px) {
  /* Flex-Spalte mit gap, nicht das Grid von .wt-knopf-rund: dort käme jeder
     Balken in eine eigene Zeile, die Abstände wären andere als die 6,3 px,
     um die unten gedreht und verschoben wird - das X träfe nicht zusammen. */
  .wt-menue-schalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5px;
  }

  /* WICHTIG: backdrop-filter macht .wt-kopf zum Bezugsrahmen für
     position:fixed - das Menü darunter richtete sich dann an der 68 px hohen
     Leiste aus statt am Fenster und war nur als schmaler Streifen zu sehen.
     Bei offenem Menü liegt ohnehin eine deckende Fläche darüber, der
     Weichzeichner wird also nicht gebraucht. */
  .wt-kopf[data-menue="offen"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--wt-bg);
    border-bottom-color: var(--wt-border);

    /*
     * Bei offenem Menü über alles andere.
     *
     * Der Cookie-Hinweis von Orbit Fox liegt auf z-index 9999 und deckte
     * die unteren Menüeinträge zu - bei 812 px Fensterhöhe ab Pixel 613,
     * also fast ein Viertel der Liste.
     *
     * Der Wert muss an .wt-kopf stehen, nicht am Menü: die Kopfleiste ist
     * position:fixed mit eigenem z-index und bildet damit einen eigenen
     * Stapelkontext. Was darin liegt, kommt über dessen Wert nie hinaus,
     * und wäre das Menü noch so hoch gesetzt.
     */
    z-index: 10000;
  }

  .wt-menue {
    position: fixed;
    inset: var(--wt-kopf-hoehe) 0 0;
    z-index: 99;
    display: block;
    margin: 0;
    padding: 18px var(--wt-rand) 60px;
    background: var(--wt-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--wt-normal) var(--wt-kurve),
                transform var(--wt-normal) var(--wt-kurve),
                visibility var(--wt-normal);
  }

  .wt-kopf[data-menue="offen"] .wt-menue {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .wt-menue > li { border-bottom: 1px solid var(--wt-border); }
  .wt-menue > li:last-child { border-bottom: 0; }

  /*
   * Hier stand justify-content: space-between. Gedacht war, den Pfeil an
   * den rechten Rand zu schieben - tatsächlich hat es den ganzen Inhalt
   * auseinandergezogen: Symbol ganz links, Beschriftung ganz rechts, bei
   * "Wetter" der Text in der Mitte zwischen Symbol und Pfeil. Die Einträge
   * der Untermenüs stehen dagegen linksbündig, das sah zerrissen aus.
   *
   * Jetzt bleibt alles links beieinander, und nur der Pfeil wandert über
   * margin-left: auto nach rechts.
   */
  .wt-menue > li > a {
    width: 100%;
    justify-content: flex-start;
    padding: 15px 4px;
    font-size: 17px;
    border-radius: 0;
  }
  .wt-menue > li > a:hover { background: none; }

  .wt-menue > li.wt-hat-kinder > a::after { margin-left: auto; }

  /* Untermenüs am Handy immer offen - Aufklappen wäre ein Tipp mehr für
     nichts, die Liste ist kurz. */
  .wt-klapp,
  .wt-klapp-mehrspaltig {
    position: static;
    translate: none;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 12px;
    padding: 0 0 6px 4px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .wt-klapp-gruppe + .wt-klapp-gruppe { margin-top: 10px; }
  .wt-klapp a { padding: 10px 10px 10px 0; font-size: 15.5px; }
  .wt-klapp a:hover { background: none; }

  /* Die Temperatur bleibt sichtbar - sie ist der Grund, warum jemand
     die Seite am Telefon aufruft. Platz schafft stattdessen der
     Schriftzug, der unter 560 px weicht (Block darunter). */

  body[data-menue="offen"] { overflow: hidden; }
}

@media (max-width: 560px) {
  /*
   * Am Telefon zählt der Platz. Der Schriftzug weicht hier zugunsten der
   * Temperatur - das Wappen allein trägt die Marke, und der Stationsname
   * steht ohnehin groß als Wortmarke im Kopfbereich darunter.
   * Nur wenn gar kein Logo hinterlegt ist, bleibt der Schriftzug stehen -
   * sonst stünde die Leiste ohne jede Beschriftung da.
   */
  .wt-marke-text small { display: none; }
  .wt-marke img,
  .wt-marke-bild { height: 32px; }
  .wt-marke-text b { font-size: 15px; }
  .wt-marke.wt-hat-logo .wt-marke-text { display: none; }
}