/* ==========================================================================
   Wide Horizon – Theme-Styles (Frontend und Editor)
   Breakpoint Mobil/Desktop: 600px (entspricht dem Umschaltpunkt des WordPress-Navigationsblocks)
   ========================================================================== */

:root {
  --whd-font-display: "Lexend Exa", "Helvetica Neue", Arial, sans-serif;
  --whd-font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --whd-pad-x: 4.2vw;
}

html { scroll-behavior: auto; }
body { margin: 0; overflow-x: hidden; }

/* Kein zusätzlicher Abstand zwischen Header / Inhalt / Grafik / Footer */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks { padding: 0; }

/* Desktop- / Mobil-Umschalter (Footer, Grafiken) */
.whd-mobile-only { display: none !important; }
@media (max-width: 599px) {
  .whd-desktop-only { display: none !important; }
  .whd-mobile-only { display: block !important; }
}

/* ---------- Header ---------- */
.whd-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 6vh var(--whd-pad-x) 0;
  pointer-events: none;
}
body.home .whd-header { position: fixed; }
.whd-header__inner { align-items: flex-start !important; flex-wrap: nowrap !important; gap: 1.5rem; }
.whd-header a, .whd-header nav, .whd-header button { pointer-events: auto; }

.whd-brand { line-height: 1; }
.whd-brand > * { margin-block: 0; }
.whd-brand__name {
  font-family: var(--wp--preset--font-family--text);
  font-weight: 300;
  color: var(--wp--preset--color--red);
  font-size: clamp(1rem, 1.9vw, 2.4rem);
  line-height: 1;
}
.whd-brand__title {
  margin-left: 0.4em !important;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  color: var(--wp--preset--color--yellow-text);
  font-size: clamp(1.5rem, 3.6vw, 4.6rem);
  line-height: 1.15;
}
.whd-brand__title a { color: inherit; text-decoration: none; }
.whd-brand__address {
  margin-left: 6em !important;
  margin-top: 0.2em !important;
  font-family: var(--wp--preset--font-family--text);
  font-weight: 300;
  color: var(--wp--preset--color--green);
  font-size: clamp(1rem, 2vw, 2.6rem);
  line-height: 1;
}

/* Hauptmenü (Desktop) – nav.whd-nav: Core kopiert die Klasse auch auf die innere Liste */
nav.whd-nav {
  color: var(--wp--preset--color--yellow-text);
  margin-top: 1.2em;
  margin-right: 4vw;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1rem, 2.2vw, 2.8rem);
}
.whd-nav .wp-block-navigation__container { gap: 1em; }
nav.whd-nav .wp-block-navigation-item__content { color: inherit; text-decoration: none; }
nav.whd-nav .wp-block-navigation-item__content:hover { opacity: 0.75; }

/* Mobilmenü: Vollbild in Nachthimmel-Blau, rechts ein grünes Panel (68 %) */
.whd-nav .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--yellow-text);
}
.whd-nav .wp-block-navigation__responsive-container-open svg { width: 1.6rem; height: 1.6rem; }

.wp-block-navigation.whd-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--background);
  padding: 0;
}
.whd-nav .is-menu-open::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 32%;
  background: var(--wp--preset--color--lightgreen);
}
.whd-nav .is-menu-open .wp-block-navigation__responsive-close,
.whd-nav .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; z-index: 1; }
.whd-nav .is-menu-open .wp-block-navigation__responsive-container-close {
  top: 1.75rem; right: 1.5rem;
  color: var(--wp--preset--color--yellow-text);
}
.whd-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 1.6rem; height: 1.6rem; }
.whd-nav .is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 6.5rem 1.5rem 2rem calc(32% + 1.5rem);
  align-items: flex-start;
}
.whd-nav .is-menu-open .wp-block-navigation__container { gap: 2rem; }
nav.whd-nav .is-menu-open .wp-block-navigation__responsive-container-content,
nav.whd-nav .is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
}
nav.whd-nav .is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--background);
  font-size: 1.875rem;
  line-height: 1.1;
}
.whd-nav .is-menu-open::after {
  content: var(--whd-copyright);
  position: absolute;
  z-index: 1;
  right: 1.25rem; bottom: 1.25rem;
  font-family: var(--wp--preset--font-family--text);
  font-size: 0.75rem;
  color: var(--wp--preset--color--background);
}

@media (max-width: 599px) {
  .whd-header { padding: 2rem 1.25rem 0; }
  nav.whd-nav { margin: 0; }
  .whd-brand__name { font-size: 1rem; }
  .whd-brand__title { margin-left: 0 !important; margin-top: 0.25rem !important; font-size: 1.125rem; }
  .whd-brand__address { margin-left: 0 !important; margin-top: 0.5rem !important; font-size: 0.875rem; }
}
@media (max-width: 599px) and (min-width: 380px) {
  .whd-brand__title { font-size: 1.375rem; }
}

/* ---------- Inhaltsseiten ---------- */
.whd-main {
  padding: clamp(8rem, 17vw, 24rem) 9.5vw clamp(4rem, 6vw, 9rem);
  min-height: 55vh;
}
.whd-main .wp-block-post-title { margin-block: 0 2.2em; }
.whd-main p { max-width: none; }
.whd-main .wp-block-columns { gap: 4vw; align-items: flex-start; }
.whd-main .wp-block-image img { display: block; width: 100%; height: auto; }
/* Text + Bild: mobil untereinander, Text immer zuerst (egal ob das Bild links oder rechts steht) */
.whd-main .whd-text-image { flex-wrap: nowrap; }
@media (max-width: 599px) {
  .whd-main .whd-text-image { flex-direction: column; flex-wrap: wrap; gap: 1.5rem; }
  .whd-main .whd-text-image > .wp-block-column { flex-basis: auto !important; width: 100%; }
  .whd-main .whd-text-image > .whd-col-text { order: 1; }
  .whd-main .whd-text-image > .whd-col-image { order: 2; }
}

@media (max-width: 599px) {
  .whd-main {
    padding: 7.5rem 1.25rem 3rem;
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
  }
  .whd-main .wp-block-columns { gap: 1.5rem; }
}

/* ---------- Horizont-Grafik (Inhaltsseiten) ---------- */
.whd-art { display: block; line-height: 0; background: transparent; }
.whd-art__svg { display: block; width: 100%; height: auto; }
.whd-art__svg.whd-desktop-only { aspect-ratio: 2576 / 760; }
.whd-art__svg.whd-mobile-only { aspect-ratio: 1100 / 620; }

/* ---------- Footer ---------- */
.whd-footer {
  position: relative;
  background: var(--wp--preset--color--footer-blue);
  color: var(--wp--preset--color--yellow-text);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(0.85rem, 1.15vw, 1.6rem);
  line-height: 1.35;
}
.whd-footer a { color: inherit; text-decoration: none; }
.whd-footer a:hover { opacity: 0.75; }
.whd-footer p { margin: 0; }
.whd-footer .wp-block-navigation-item__content { padding: 0; }

.whd-footer--landing,
.whd-footer--content {
  display: grid !important;
  grid-template-columns: 59fr 41fr;
  align-items: start;
  padding: 4vw var(--whd-pad-x) 5vw;
}
.whd-footer--landing { min-height: 16vw; }
.whd-footer--content { padding-top: 2.2vw; padding-bottom: 3.6vw; align-items: center; }
.whd-footer--content > :first-child { padding-left: 3.3vw; }
.whd-footer--content .whd-footer-nav .wp-block-navigation__container { gap: 2.2vw; }
.whd-footer .whd-copyright {
  position: absolute;
  right: var(--whd-pad-x);
  bottom: 0.9rem;
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--text);
  font-weight: 300;
  font-size: 0.9em;
}

.whd-footer--mobile {
  padding: 2.5rem 1.25rem 3rem;
  font-size: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.whd-footer--mobile .whd-footer-nav { font-size: inherit; }

/* Social */
.whd-social__list { display: flex; gap: 1.4em; list-style: none; margin: 0; padding: 0; align-items: center; }
.whd-social--list .whd-social__list { flex-direction: column; align-items: flex-start; gap: 0; }
.whd-social__heading { margin: 0 0 0.1em; }
.whd-social a { color: inherit; text-decoration: none; display: inline-block; }
.whd-social--icons svg { display: block; width: 1.7em; height: 1.7em; }

/* ---------- Horizont-Szene (Startseite) ---------- */
.whd-scene { position: relative; height: 400vh; }
.whd-scene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--wp--preset--color--background);
}
.whd-scene__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.whd-scene__messages {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--yellow-text);
}
.whd-scene__message {
  position: absolute;
  left: var(--whd-x, 10%);
  top: var(--whd-y, 40%);
  width: max-content;
  max-width: 84vw;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 5rem);
  line-height: 1.35;
  will-change: opacity, transform;
}
.whd-scene__message:not(:first-child) { opacity: 0; }
.whd-line { display: block; }
.whd-line--indent { text-align: right; }
.whd-scene__text--mobile { display: none; }

.whd-scene__more {
  position: absolute;
  left: calc(50% - 28px);
  bottom: 2.5rem;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: none;
  color: var(--wp--preset--color--yellow-text);
  cursor: pointer;
  transition: opacity 0.5s;
  animation: whd-invite 2.4s ease-in-out infinite;
}
.whd-scene__more:focus-visible { outline: 2px solid var(--wp--preset--color--yellow-text); outline-offset: 2px; }
.whd-scene__more.is-hidden { opacity: 0; pointer-events: none; }
@keyframes whd-invite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .whd-scene__more { animation: none; } }

@media (max-width: 599px) {
  .whd-scene__message {
    left: 1.5rem; right: 1.5rem; top: 32%;
    width: auto;
    text-align: center;
    font-size: 1.5rem;
  }
  .whd-scene__text--mobile { display: block; }
  .whd-scene__text--desktop { display: none; }
  .whd-line--indent { text-align: center; }
}
@media (max-width: 599px) and (min-width: 380px) {
  .whd-scene__message { font-size: 1.75rem; }
}

/* ---------- Block-Editor ---------- */
.editor-styles-wrapper .whd-header { position: relative; }
.editor-styles-wrapper .whd-scene { height: auto; }
.editor-styles-wrapper .whd-scene__sticky { position: relative; height: 60vh; }
.editor-styles-wrapper .whd-scene__more { animation: none; }

/* Landing-Footer: Social-Liste in die rechte Spalte */
.whd-footer--landing .whd-social { grid-column: 2; }
.whd-footer--content .whd-social { grid-column: 2; }