/* ==========================================================================
   Uncle & Nephew — WordPress-Anpassungen
   Basis ist assets/css/style.css (identisch mit der statischen Fassung);
   hier steht nur, was WordPress-Markup auf die bestehende Optik abbildet.
   ========================================================================== */

/* ---- Grundgerüst ---- */
.wp-site-blocks { margin: 0; padding: 0; }
body .is-layout-constrained > * { max-width: none; margin-left: 0; margin-right: 0; }

/* Der Layout-Reset des Kerns (:where(.is-layout-flow) > *) nimmt Absätzen
   und Überschriften ihre Browser-Margins — die statische Fassung baut aber
   genau darauf auf. Mit :where (Spezifität 0,0,1) zurückgeben, sodass alle
   Klassenregeln der Basis (.section h2, .hero-lead, .accent-line, …) wie
   gehabt gewinnen. */
:where(.is-layout-flow) > p { margin-block-start: 1em; margin-block-end: 1em; }
:where(.is-layout-flow) > h1 { margin-block-start: 0.67em; margin-block-end: 0.67em; }
:where(.is-layout-flow) > h2 { margin-block-start: 0.83em; margin-block-end: 0.83em; }
:where(.is-layout-flow) > h3 { margin-block-start: 1em; margin-block-end: 1em; }
:where(.is-layout-flow) > ul { margin-block-start: 1em; margin-block-end: 1em; }

/* Kicker kommen aus dem Editor als Absätze (statisch: div) — die
   .section-p-Regeln der Basis dürfen sie nicht übersteuern */
p.kicker, p.section-kicker { margin: 0; }
.section p.section-kicker,
.cta-section p.section-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: normal;
  color: var(--brass);
  margin: 0;
}
.section p.kicker,
.cta-section p.kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: var(--brass);
  margin: 0;
}
.cta-inner p.kicker { font-size: 20px; }

/* Absätze mit begrenzter Zeilenbreite (statisch: style="max-width:820px") */
.mw-820 { max-width: 820px; }
/* Absätze ohne Außenabstand (statisch: style="margin:0") */
p.m-0 { margin: 0; }

/* ---- Kopfbereich: Template-Part-Wrapper trägt .site-header ---- */
header.site-header.wp-block-template-part { position: absolute; }
.site-header .wp-block-group.site-nav { gap: 10px 26px; }

/* Navigation-Block auf die .site-nav-Optik abbilden */
.site-nav .wp-block-navigation {
  font-size: 13.5px;
  letter-spacing: 0.02em;
  gap: 10px 26px;
}
.site-nav .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--offwhite-cc);
  padding: 0;
}
.site-nav .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--brass); }
/* Aktiver Menüpunkt messingfarben (wie statisch): aria-current="page" für
   die offene Seite, aria-current="true" für den Bereichseintrag
   „Leistungen“, solange eine seiner Unterseiten offen ist. Beides setzt
   das Theme beim Rendern der Navigation (functions.php). */
.site-nav .wp-block-navigation .wp-block-navigation-item__content[aria-current] { color: var(--brass); }
.site-nav .wp-block-navigation .wp-block-navigation__container { gap: 10px 26px; align-items: center; }

/* Untermenü „Leistungen“: Schiefer-Fläche mit Messing-Linie oben, sanftes
   Einblenden — Hover UND Tastaturfokus (Kern zeigt per :hover/:focus-within,
   wir übernehmen nur die Optik und die Animation) */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 250px;
  left: -22px;
  top: calc(100% + 14px);
  padding: 12px 0 14px;
  background: var(--slate-deep) !important;
  border: 0;
  border-top: 1px solid var(--brass);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 13.5px;
  color: var(--offwhite-cc);
}
/* Innenabstand und Mindestbreite wie die statische Fassung (.subnav):
   Der Kern setzt padding:.5em 1em bzw. im geöffneten Zustand min-width:200px
   mit gleicher bzw. höherer Spezifität — beide Regeln brauchen deshalb eine
   Klasse mehr. Mit 9px/22px passt „Objekt- und Lagebeschreibung“ einzeilig
   in die 250 px breite Fläche, und die Zeilenhöhe stimmt wieder (33 px). */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  padding: 9px 22px;
}
.site-nav .wp-block-navigation .has-child.wp-block-navigation-item > .wp-block-navigation__submenu-container {
  min-width: 250px;
}
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--brass); }
/* eigene Regel für die Unterpunkte: die Farbregel der Aufklappliste oben
   ist gleich spezifisch wie die aria-current-Regel und stünde sonst später */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] { color: var(--brass); }
/* Chevron wie .subnav-toggle der statischen Fassung: 12×8-Zeichen mit 4 px
   Fläche ringsum und 6 px Abstand zum Wort. Das Zeichen selbst setzt das
   Theme beim Rendern ein (un_nav_chevron in functions.php); hier werden nur
   die Maße des Kerns (.6em im Quadrat, svg erbt Breite/Höhe) zurückgesetzt. */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-icon {
  color: var(--offwhite-cc);
  width: auto;
  height: auto;
  padding: 4px;
  margin-left: 6px;
}
.site-nav .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  display: block;
  width: 12px;
  height: 8px;
  margin-top: 0;
  transition: transform .3s ease;
}
/* geöffnet: Chevron dreht sich wie statisch (.nav-item.is-open) */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-icon[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Chevron wie statisch: am Desktop unsichtbar (Hover/Fokus öffnen), mobil sichtbar */
@media (min-width: 721px) {
  .site-nav .wp-block-navigation .wp-block-navigation__submenu-icon { display: none; }
}
/* Mobil bricht die Navigation wie in der statischen Fassung um: dort sind
   alle Menüpunkte und der Button „Objekt anfragen“ Geschwister in einer
   einzigen Flex-Zeile (die statische Fassung hat an dieser Stelle gar keine
   Liste). In WordPress steckt die Liste in einem eigenen Block — Navigation
   und Liste geben mobil deshalb ihre Box auf, damit die Menüpunkte direkte
   Flex-Elemente von .site-nav werden und der Button nicht in eine eigene
   Zeile rutscht. */
@media (max-width: 720px) {
  .site-nav .wp-block-navigation,
  .site-nav .wp-block-navigation > .wp-block-navigation__container { display: contents; }

  /* Aufgeklapptes Untermenü mobil wie statisch (.nav-item.is-open):
     Der Eintrag nimmt die ganze Zeile, die Liste steht darunter im
     Textfluss (nicht schwebend), die übrigen Menüpunkte rücken nach. */
  .site-nav .wp-block-navigation-item.has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
    flex-basis: 100%;
    flex-wrap: wrap;
    row-gap: 6px; /* wie .nav-item { gap: 6px } der statischen Fassung */
  }
  .site-nav .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 10px 16px 12px;
    box-shadow: none;
    transition: none;
  }
  .site-nav .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 8px 0;
  }
  .site-nav .wp-block-navigation .wp-block-navigation__submenu-container::before { display: none; }
  /* Der absolut positionierte Header wächst mit geöffnetem Untermenü über
     den Hero-Text — eine eigene Fläche hält die Navigation lesbar */
  .site-header:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
    background: var(--slate);
    border-bottom: 1px solid var(--offwhite-15);
  }
}
/* Tastaturfokus des Chevrons wie statisch (.subnav-toggle:focus-visible) */
.site-nav .wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* unsichtbare Brücke, damit der Hover auf dem Weg nach unten nicht abreißt */
.site-nav .wp-block-navigation .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -15px; height: 15px;
}

/* Button „Objekt anfragen“ im Kopf: exakt .btn-primary.btn-nav.
   Schriftfarbe mit !important — die Global-Styles des Kerns setzen
   .wp-element-button sonst auf Weiß (weiß auf weiß). */
.site-nav .wp-block-button__link {
  display: inline-block;
  background: var(--offwhite);
  color: var(--slate) !important;
  border-radius: 0;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13.5px;
  line-height: normal;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background .4s ease;
}
.site-nav .wp-block-button__link:hover { background: var(--brass); color: var(--slate); }
.site-nav .wp-block-button__link:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---- Buttons im Inhalt (core/button mit Zusatzklasse) ----
   Die Zusatzklassen btn-primary/btn-secondary/btn-cta liegen auf dem
   Block-WRAPPER (div.wp-block-button) — die Basis-Regeln für <a>-Buttons
   dürfen dort nicht greifen (sonst doppeltes Padding/Margin/Hintergrund). */
div.wp-block-button.btn-primary,
div.wp-block-button.btn-secondary {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-weight: normal;
  letter-spacing: normal;
  transition: none;
}
div.wp-block-button.btn-primary:hover,
div.wp-block-button.btn-secondary:hover { background: none; border: 0; }

.wp-block-button.btn-primary .wp-block-button__link {
  display: inline-block;
  background: var(--offwhite);
  color: var(--slate) !important;
  border-radius: 0;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background .4s ease;
}
.wp-block-button.btn-primary .wp-block-button__link:hover { background: var(--brass); color: var(--slate) !important; }
.wp-block-button.btn-primary.btn-cta .wp-block-button__link { padding: 15px 32px; }
.wp-block-button.btn-secondary .wp-block-button__link {
  display: inline-block;
  background: none;
  border: 1px solid #EEF0F266;
  color: var(--offwhite) !important;
  border-radius: 0;
  padding: 13px 26px;
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color .4s ease, color .4s ease;
}
.wp-block-button.btn-secondary .wp-block-button__link:hover { border-color: var(--brass); color: var(--brass) !important; }
.wp-block-buttons { gap: 14px; }
.cta-inner .wp-block-buttons { margin-top: 34px; justify-content: center; }
.hero-actions.wp-block-buttons { margin: 34px 0 0; }

/* ---- FAQ: core/details auf die .faq-item-Optik abbilden ---- */
.faq-list .wp-block-details {
  border: 1px solid var(--offwhite-15);
  margin-top: 14px;
  padding: 0;
  font-size: inherit;
  transition: border-color .5s ease;
}
.faq-list .wp-block-details:hover,
.faq-list .wp-block-details[open] { border-color: var(--brass); }
.faq-list .wp-block-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}
.faq-list .wp-block-details summary::-webkit-details-marker { display: none; }
.faq-list .wp-block-details summary::after {
  content: '+';
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--brass);
  flex: 0 0 auto;
}
.faq-list .wp-block-details[open] summary::after {
  display: inline-block;
  transform: rotate(45deg);
}
.faq-list .wp-block-details > :not(summary) { margin: 0; padding: 0 24px 22px; }
.faq-list .wp-block-details p { font-size: var(--text-m); line-height: 1.7; color: var(--offwhite-70); }

/* ---- Listen (core/list mit Zusatzklasse) ---- */
ul.feature-list, ul.addon-list { list-style: none; }

/* ---- Rechtsseiten-Template: schmale Textbreite wie .legal-text ---- */
.legal-page .legal-text { max-width: 70ch; }

/* ---- Kontaktseite ---- */
.contact-form button[type="submit"] { border: 0; cursor: pointer; font-family: 'Archivo', ui-sans-serif, sans-serif; margin-top: 34px; }

/* ---- WPForms (live): Felder erben die Formular-Optik ---- */
.contact-form-col .wpforms-container input[type="text"],
.contact-form-col .wpforms-container input[type="email"],
.contact-form-col .wpforms-container input[type="tel"],
.contact-form-col .wpforms-container select,
.contact-form-col .wpforms-container textarea {
  width: 100%;
  background: var(--panel-bg);
  border: 1px solid var(--offwhite-15);
  color: var(--offwhite);
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  font-size: 15.5px;
  padding: 13px 16px;
  border-radius: 0;
}
.contact-form-col .wpforms-container input:focus,
.contact-form-col .wpforms-container select:focus,
.contact-form-col .wpforms-container textarea:focus { outline: none; border-color: var(--brass); }
.contact-form-col .wpforms-container label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  color: var(--offwhite);
}
.contact-form-col .wpforms-container button[type="submit"] {
  display: inline-block;
  background: var(--offwhite);
  color: var(--slate);
  border: 0;
  border-radius: 0;
  padding: 15px 32px;
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .4s ease;
  margin-top: 34px;
}
.contact-form-col .wpforms-container button[type="submit"]:hover { background: var(--brass); color: var(--slate); }

/* ---- Admin-Leiste: absolut positionierten Header mitschieben ---- */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ---- Inhaber-Block (U&N Inhaber): gewählte Bilder füllen die Rahmen ----
   Porträts füllen den 4:5-Rahmen formatfüllend, das Logo bleibt im
   3:1-Rahmen vollständig sichtbar (deshalb contain, nicht cover). */
.owner-col .figure-frame .owner-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.owners-logo-frame .owners-logo-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}