/* WiA Navigation. Farben und Abstaende aus den Automatic.css-Tokens.
   Umbruchpunkt 992px, derselbe, den Bricks fuer sein mobiles Menue nutzt. */

.wia-nav {
  position: relative;
  background: var(--white, #fff);
}

/* ---------- Obere Leiste ---------- */
.wia-nav__balken {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s, 2rem);
  flex-wrap: wrap;
  max-inline-size: var(--width-content, 128rem);
  margin-inline: auto;
  padding: 16px var(--space-xs, 1.9rem);
}

/* Flex statt inline-flex: als Zeilenelement sitzt das Logo auf der
   Schriftlinie, wodurch unten Platz fuer Unterlaengen frei bleibt. Das
   verschob es gegenueber dem Menueknopf um 4px nach oben. */
.wia-nav__marke {
  display: flex;
  align-items: center;
}

.wia-nav__logo {
  display: flex;
  align-items: center;
}

.wia-nav__logo img {
  display: block;
  block-size: auto;
  max-inline-size: 280px;
}

.wia-nav__logo--text {
  font-size: var(--text-l, 2rem);
  font-weight: 600;
  color: var(--base-dark, #404040);
  text-decoration: none;
}

.wia-nav__extras {
  display: flex;
  align-items: center;
  /* 20px statt 12px: Rufnummer und die beiden Knoepfe standen zu eng
     beieinander und lasen sich als ein Block. */
  gap: 20px;
  flex-wrap: wrap;
}

/* Die Rufnummer ist kein Knopf und bekommt etwas mehr Abstand, damit die
   beiden Knoepfe als Paar zusammengehoeren. */
.wia-nav__extras .wia-nav__telefon {
  margin-inline-end: 8px;
}

.wia-nav__telefon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Zielgroesse: auch bei kurzem Text bedienbar */
  min-block-size: 44px;
  padding-inline: 4px;
  color: var(--base-dark, #404040);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wia-nav__telefon:hover,
.wia-nav__telefon:focus-visible {
  color: var(--primary, #906111);
}

.wia-nav__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 10px 20px;
  border: 2px solid var(--primary, #906111);
  border-radius: 8px;
  background: var(--white, #fff);
  color: var(--primary, #906111);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* Gefuelltes Braun mit weisser Schrift, wie ueberall sonst (5,4:1). */
.wia-nav__knopf:hover,
.wia-nav__knopf:focus-visible {
  background: var(--primary, #906111);
  color: #fff;
}

.wia-nav__knopf--voll {
  background: var(--primary, #906111);
  color: #fff;
}

.wia-nav__knopf--voll:hover,
.wia-nav__knopf--voll:focus-visible {
  background: var(--primary-dark, #6d4a0d);
  color: #fff;
}

/* ---------- Brennerknopf ---------- */
.wia-nav__brenner {
  display: none;
  align-items: center;
  gap: 12px;
  min-block-size: 48px;
  min-inline-size: 48px;
  padding: 10px 14px;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--base-dark, #404040);
  font-family: inherit;
  font-size: var(--text-l, 2rem);
  font-weight: 600;
}

.wia-nav__brenner-striche {
  display: grid;
  gap: 6px;
}

.wia-nav__brenner-striche span {
  display: block;
  inline-size: 30px;
  block-size: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------- Menue ---------- */
.wia-nav__menue-innen {
  max-inline-size: var(--width-content, 128rem);
  margin-inline: auto;
  padding-inline: var(--space-xs, 1.9rem);
}

/* Baugleich mit dem Menueknopf, damit er dieselbe Flaeche einnimmt. */
.wia-nav__schliessen {
  display: none;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  min-block-size: 48px;
  min-inline-size: 48px;
  padding: 10px 14px;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--base-dark, #404040);
  font-family: inherit;
  font-size: var(--text-l, 2rem);
  font-weight: 600;
}

.wia-nav__schliessen-zeichen {
  flex: 0 0 auto;
}

.wia-nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wia-nav__zeile {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wia-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 8px 12px;
  color: var(--base-dark, #404040);
  text-decoration: none;
  font-weight: 500;
}

.wia-nav__link:hover,
.wia-nav__link:focus-visible {
  color: var(--primary, #906111);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Die aktuelle Seite bekommt neben der Farbe eine Linie, damit sie nicht
   allein ueber Farbe erkennbar ist (BITV 9.1.4.1). */
.wia-nav__link[aria-current="page"] {
  color: var(--primary, #906111);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 var(--primary, #906111);
}

.wia-nav__schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 8px;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--base-dark, #404040);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}

.wia-nav__schalter--voll {
  min-inline-size: 0;
  padding-inline: 12px;
}

.wia-nav__schalter:hover,
.wia-nav__schalter:focus-visible {
  color: var(--primary, #906111);
}

@media (prefers-reduced-motion: no-preference) {
  .wia-nav__pfeil { transition: transform 0.2s ease; }
}

.wia-nav__schalter[aria-expanded="true"] .wia-nav__pfeil {
  transform: rotate(180deg);
}

.wia-nav__unter[hidden] { display: none; }

/* Sichtbarer Fokus auf allem Bedienbaren */
.wia-nav a:focus-visible,
.wia-nav button:focus-visible {
  outline: 3px solid var(--base-ultra-dark, #1a1a1a);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Desktop ab 992px ---------- */
@media (min-width: 992px) {
  .wia-nav__menue {
    background: var(--base-ultra-light, #f2f2f2);
    border-block-start: 1px solid var(--base-light, #d9d9d9);
  }

  .wia-nav__liste--1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .wia-nav__punkt { position: relative; }

  /* Untermenues schweben ueber dem Inhalt */
  .wia-nav__liste--1 > .wia-nav__punkt > .wia-nav__unter {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-inline-size: 28rem;
    padding: 8px;
    background: var(--white, #fff);
    border: 1px solid var(--base-light, #d9d9d9);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  }

  /* Dritte Ebene klappt innerhalb der zweiten auf, nicht seitlich:
     seitliche Ausklappmenues sind mit Vergroesserung kaum bedienbar. */
  .wia-nav__liste--2 .wia-nav__unter {
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--base-light, #d9d9d9);
    margin-inline-start: 12px;
  }

  .wia-nav__liste--2 .wia-nav__link,
  .wia-nav__liste--3 .wia-nav__link { inline-size: 100%; }

  /* Telefon und Handlungsknoepfe stehen auf dem Desktop in der oberen
     Leiste. Die Zweitausgabe im Menue ist nur fuer die mobile Ansicht da. */
  .wia-nav__menue-knoepfe { display: none; }
  .wia-nav__telefon--im-menue { display: none; }

  /* Hoehe des Kopfbereichs nach dem Vorbild bayern-pflege-wohnen.de:
     dort ist die obere Leiste 142px hoch (30px Innenabstand oben und
     unten) und die Menueleiste 80px, zusammen 222px. Bei uns waren es
     152px, wodurch der Kopf gedrungener wirkte. Der Abstand vom Kopf zum
     Inhalt ist auf beiden Seiten schon gleich (90px bzw. 68px). */
  .wia-nav__balken {
    padding-block: 30px;
  }

  .wia-nav__menue-innen {
    padding-block: 21px;
  }
}

/* ---------- Mobil bis 991px ---------- */
@media (max-width: 991px) {
  .wia-nav__brenner { display: inline-flex; }

  /* Telefon und Knoepfe wandern in das Menue */
  .wia-nav__balken .wia-nav__telefon,
  .wia-nav__balken .wia-nav__knopf { display: none; }

  /* Logo und Menueknopf bleiben auf einer Zeile. Das Logo ist 280px breit,
     der Knopf 108px: auf einem iPhone (390px abzueglich Innenabstand) passt
     das nicht und brach um. Statt fester Breite darf das Logo jetzt
     mitschrumpfen, gedeckelt auf 200px. */
  .wia-nav__balken {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .wia-nav__marke {
    min-inline-size: 0;
    flex: 0 1 auto;
  }

  .wia-nav__logo img {
    max-inline-size: min(200px, 100%);
  }

  .wia-nav__extras { flex: 0 0 auto; }

  .wia-nav__menue {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--white, #fff);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Geschlossen: aus dem Layout UND aus der Tabreihenfolge nehmen.
       Nur visibility/display entfernt die Elemente wirklich, opacity
       allein liesse sie fokussierbar. */
    visibility: hidden;
    opacity: 0;
  }

  .wia-nav.ist-offen .wia-nav__menue {
    visibility: visible;
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .wia-nav__menue { transition: opacity 0.2s ease, visibility 0.2s; }
  }

  .wia-nav__menue-innen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px var(--space-xs, 1.9rem) 40px;
  }

  .wia-nav__schliessen { display: inline-flex; }

  /* Auf die Zeile des vormaligen Menueknopfes heben: gleicher Abstand
     nach oben und rechts wie in der Kopfleiste, gleiche Hoehe. */
  .wia-nav__menue-innen > .wia-nav__schliessen {
    margin-block-start: 3px;
  }

  .wia-nav__liste--1 { display: flex; flex-direction: column; }

  .wia-nav__link { font-size: var(--text-l, 2rem); }

  .wia-nav__zeile { justify-content: space-between; }

  .wia-nav__schalter--voll {
    inline-size: 100%;
    justify-content: space-between;
    font-size: var(--text-l, 2rem);
  }

  .wia-nav__unter {
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--base-light, #d9d9d9);
    margin-inline-start: 12px;
  }

  .wia-nav__menue-knoepfe {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-start: 20px;
  }

  .wia-nav__telefon--im-menue {
    justify-content: center;
    font-size: var(--text-l, 2rem);
  }
}

/* Hintergrund nicht mitscrollen, solange das Menue offen ist */
.wia-nav-gesperrt { overflow: hidden; }