/* ==========================================================================
   OnServio Kontur - Kopfbereich und Fusszeile als Bloecke
   Bringt die Standardbloecke Logo und Navigation auf die Optik des Themes.
   Die Bloecke von WordPress bringen eigene Regeln mit, die spaeter geladen
   werden. Deshalb sind einige Selektoren hier bewusst laenger.
   ========================================================================== */

:root {
  --tel-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>');
}

/* --- Logo ---------------------------------------------------------------- */
.site-header .wp-block-site-logo { flex: 0 0 auto; margin: 0; }
.site-header .wp-block-site-logo a { display: inline-flex; align-items: center; }
.site-header .wp-block-site-logo img { height: 22px; width: auto; }

.footer-brand .wp-block-site-logo { margin: 0 0 18px; }
.footer-brand .wp-block-site-logo img { height: 22px; width: auto; }

/* --- Navigation ---------------------------------------------------------- */
.site-header .nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  color: var(--ink);
}
.site-header .nav .wp-block-navigation { width: 100%; justify-content: center; }
.site-header .nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-header .nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .16s ease;
}
.site-header .nav .wp-block-navigation-item__content:hover { opacity: .58; }
.site-header .nav .current-menu-item > .wp-block-navigation-item__content,
.site-header .nav .current-menu-ancestor > .wp-block-navigation-item__content { font-weight: 600; }

/* --- Untermenue ---------------------------------------------------------- */
.site-header .nav .wp-block-navigation__submenu-icon { display: none; }
.site-header .nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
  min-width: 250px;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
}
.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.site-header .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--ink);
}
.site-header .nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--surface);
  opacity: 1;
}

/* --- Telefonnummer ------------------------------------------------------- */
.site-header .header-tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}
.site-header .header-tel::before {
  content: '';
  flex: 0 0 auto;
  width: 15px; height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--tel-icon) center / contain no-repeat;
  mask: var(--tel-icon) center / contain no-repeat;
}
.site-header .header-tel a,
.site-header .header-tel a:where(:not(.wp-element-button)) {
  color: var(--ink);
  text-decoration: none;
}
.site-header .header-tel a:hover { opacity: .65; }

/* --- Menuetaste ---------------------------------------------------------- */
.site-header .wp-block-navigation__responsive-container-open {
  width: 44px; height: 44px;
  padding: 0;
  margin-right: -10px;
  color: var(--ink);
  background: none;
  border: 0;
}
.site-header .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; fill: currentColor; }
.site-header .wp-block-navigation__responsive-container-close { color: var(--ink); }

/* --- Mobiles Menue ------------------------------------------------------- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--bg);
  color: var(--ink);
  padding: var(--space-md) var(--gutter) var(--space-lg);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: block;
  gap: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  display: block;
  border-bottom: 1px solid var(--line);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after { display: none; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static;
  transform: none;
  min-width: 0;
  border: 0;
  padding: 0 0 10px;
  background: transparent;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  padding: 9px 0 9px 18px;
}

/* --- Fusszeile ----------------------------------------------------------- */
.footer-brand p { margin: 0; max-width: 34ch; }
.footer-links p { margin: 0; }
.footer-links a,
.footer-links a:where(:not(.wp-element-button)) {
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }
.footer-links .footer-city { font-size: 0.9375rem; color: var(--muted); }
.footer-bottom p { margin: 0; }
.footer-legal p { margin: 0; }
.footer-legal a,
.footer-legal a:where(:not(.wp-element-button)) {
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--ink); }

/* --- Umbruch bei 960px, wie im Theme ------------------------------------- */
@media (max-width: 960px) {
  .site-header .nav { display: flex; flex: 0 0 auto; justify-content: flex-end; }
  .site-header .nav .wp-block-navigation { width: auto; }
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (min-width: 961px) {
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
}