/* ===================================================================
   NICHT IRGENDWANN | Globales Designsystem 2026
   V01 · 22.10.2026 · ENFOLD CHILD THEME

   Nur globale Elemente: Farben, Typografie, Header, Footer, Basis.
   Seitenlayouts werden separat in ni-home-preview.css, ni-blog.css usw.
   gepflegt. Dieses Stylesheet ersetzt NICHT die bestehenden Plugins.
   =================================================================== */

/* ENTWICKLUNG: Roboto Slab via Google Fonts.
   Vor dem öffentlichen Relaunch die Schrift lokal hosten. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap');

/* Eigene Schrift aus deinem Projekt.
   Kopiere NachmittageDisplay-Regular-v2.woff2 nach assets/fonts/.
   Keine Schriftdatei liegt diesem Paket bei. */
@font-face {
  font-family: 'Nachmittage Display';
  src: url('../fonts/NachmittageDisplay-Regular-v2.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* 01. DESIGN-TOKENS --------------------------------------------- */
:root {
  --ni-black: #020202;
  --ni-red: #89252d;
  --ni-white: #ffffff;
  --ni-gray-100: #f5f5f5;
  --ni-gray-500: #696969;
  --ni-gray-800: #282828;
  --ni-line: rgba(2, 2, 2, 0.15);

  --font-headline: 'Nachmittage Display', Impact, sans-serif;
  --font-body: 'Roboto Slab', Georgia, serif;
  --font-condensed: 'Roboto Slab', Georgia, serif;
  --bs-body-font-size: 1rem;

  --ni-body-size: 1rem;
  --ni-body-line: 1.7;
  --ni-h1: clamp(3rem, 2rem + 3.5vw, 6rem);
  --ni-h2: clamp(2.4rem, 1.75rem + 2vw, 4rem);
  --ni-h3: clamp(1.75rem, 1.3rem + 1vw, 2.5rem);
  --ni-content-width: 1180px;
  --ni-reading-width: 740px;
  --ni-header-height: 96px;
}

/* 02. GRUNDLAGE ------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }
body, #top {
  font-family: var(--font-body);
  font-size: var(--ni-body-size);
  font-weight: 400;
  line-height: var(--ni-body-line);
  color: var(--ni-black);
  background-color: var(--ni-white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
#top p, #top li { hyphens: auto; }
#top a { text-underline-offset: 0.18em; }
#top :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ni-red);
  outline-offset: 3px;
}

/* 03. TYPOGRAFIE ------------------------------------------------ */
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
#top h1 { font-size: var(--ni-h1); }
#top h2 { font-size: var(--ni-h2); }
#top h3 { font-size: var(--ni-h3); }
#top :is(h4, h5, h6) { line-height: 1.15; }
#top strong, #top b { font-weight: 700; }
#top .entry-content p, #top .avia_textblock p { line-height: var(--ni-body-line); }

/* 04. HEADER / NAVIGATION ---------------------------------------
   Enfold-Header bleibt technisch unveraendert; nur die Optik aendert sich.
   Farb- und Schriftwerte kommen aus den Design-Tokens oben.
   ---------------------------------------------------------------- */
#top #header,
#top #header_main,
#top #header .header_bg,
#top #header_main_alternate {
  background-color: var(--ni-black);
}
#top #header .header_bg { opacity: 1; }
#top #header_main {
  border-bottom: 3px solid var(--ni-red);
  box-shadow: none;
}
#top #header_main > .container {
  width: min(var(--ni-content-width), calc(100% - 48px));
  max-width: none;
  padding-inline: 0;
}

/* Feste Desktop-Hoehe; Enfold-Sticky-Header braucht einheitliche Werte. */
@media (min-width: 990px) {
  #top #header_main > .container,
  #top #header_main .av-logo-container,
  #top #header_main .inner-container {
    height: var(--ni-header-height) !important;
    min-height: var(--ni-header-height) !important;
  }
  #top #header_main .logo,
  #top #header_main .main_menu,
  #top #header_main .main_menu ul:first-child > li > a {
    height: var(--ni-header-height) !important;
    line-height: var(--ni-header-height) !important;
  }
}
#top #header_main .logo a {
  display: flex;
  align-items: center;
  height: 100%;
}
#top #header_main .logo img {
  display: block;
  width: auto;
  max-height: 62px !important;
  object-fit: contain;
  /* Kein Filter: das Logo muss als helle Version hinterlegt sein. */
}
#top #header_main .main_menu ul:first-child > li > a {
  padding-inline: clamp(8px, 1.05vw, 15px);
  color: var(--ni-white);
  font-family: var(--font-body);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  text-decoration: none;
}
#top #header_main .main_menu ul:first-child > li > a .avia-menu-text {
  position: relative;
  display: inline-block;
}
#top #header_main .main_menu ul:first-child > li > a .avia-menu-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background: var(--ni-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
#top #header_main .main_menu ul:first-child > li:hover > a .avia-menu-text::after,
#top #header_main .main_menu ul:first-child > li > a:focus-visible .avia-menu-text::after,
#top #header_main .main_menu ul:first-child > li.current-menu-item > a .avia-menu-text::after,
#top #header_main .main_menu ul:first-child > li.current_page_item > a .avia-menu-text::after,
#top #header_main .main_menu ul:first-child > li.current-menu-ancestor > a .avia-menu-text::after {
  transform: scaleX(1);
}
#top #header_main .main_menu ul:first-child > li > a:hover,
#top #header_main .main_menu ul:first-child > li.current-menu-item > a,
#top #header_main .main_menu ul:first-child > li.current_page_item > a {
  color: var(--ni-white);
}
#top #header_main .avia-menu-fx { display: none; }

/* Roter Shop-Menuepunkt, wenn dem Menueeintrag die CSS-Klasse
   ni-nav-shop zugewiesen wird. Ohne diesen Eintrag passiert nichts. */
#top #header_main .main_menu ul:first-child > li.ni-nav-shop > a .avia-menu-text {
  display: inline-block;
  padding: 11px 16px;
  background: var(--ni-red);
  color: var(--ni-white);
  transform: rotate(-0.5deg);
  transition: background 180ms ease, transform 180ms ease;
}
#top #header_main .main_menu ul:first-child > li.ni-nav-shop > a .avia-menu-text::after {
  display: none;
}
#top #header_main .main_menu ul:first-child > li.ni-nav-shop > a:hover .avia-menu-text,
#top #header_main .main_menu ul:first-child > li.ni-nav-shop > a:focus-visible .avia-menu-text {
  background: #6d1b22;
  transform: rotate(0);
}

/* Untermenue */
#top #header_main .sub-menu {
  background: var(--ni-black);
  border: 1px solid rgba(255,255,255,0.18);
  border-top: 3px solid var(--ni-red);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}
#top #header_main .sub-menu li a {
  background: var(--ni-black);
  color: var(--ni-white);
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.5;
  text-transform: none;
  transition: background 150ms ease;
}
#top #header_main .sub-menu li a:hover,
#top #header_main .sub-menu li a:focus-visible {
  background: var(--ni-red);
  color: var(--ni-white);
}

/* Hamburger & Enfold-Overlay-Navigation */
#top #header_main .av-hamburger-inner,
#top #header_main .av-hamburger-inner::before,
#top #header_main .av-hamburger-inner::after {
  background-color: var(--ni-white);
}
#top #header_main .av-burger-menu-main a { color: var(--ni-white); }
#top #header_main a:focus-visible,
#top .ni-footer a:focus-visible {
  outline: 2px solid var(--ni-red);
  outline-offset: 4px;
}

/* 05. FOOTER ----------------------------------------------------
   Entspricht dem freigegebenen Muster 02B: heller Footer als
   ruhiger Abschluss nach dem dunklen Portrait-Bereich.
   Das vorhandene HTML mit .ni-footer kann unveraendert bleiben.
   --------------------------------------------------------------- */
#top #footer,
#top #socket {
  background: var(--ni-white);
  color: var(--ni-black);
  border-color: rgba(2,2,2,0.12);
}
#top #socket a { color: var(--ni-black); }
#top #socket a:hover { color: var(--ni-red); }

/* Falls die HTML-Footer-Struktur innerhalb des Enfold-Footer-Widgets
   sitzt, dessen aeussere Container fuer volle Breite freigeben. */
#top #footer:has(.ni-footer) { padding: 0; }
#top #footer:has(.ni-footer) > .container {
  width: 100%;
  max-width: none;
  padding: 0;
}
#top #footer:has(.ni-footer) .widget:has(.ni-footer) {
  margin: 0;
  padding: 0;
}

#top .ni-footer,
#top .ni-footer * { box-sizing: border-box; }
#top .ni-footer {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: var(--ni-white);
  color: var(--ni-black);
  border-top: 4px solid var(--ni-red);
  padding: clamp(48px, 6vw, 78px) 0 25px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}
#top .ni-footer__inner,
#top .ni-footer__bottom {
  width: min(var(--ni-content-width), calc(100% - 48px));
  margin-inline: auto;
}
#top .ni-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 0.65fr);
  gap: clamp(28px, 4.5vw, 70px);
  align-items: start;
}
#top .ni-footer__brand { min-width: 0; }
#top .ni-footer__logo {
  display: inline-block;
  margin-bottom: 18px;
  text-decoration: none;
}
#top .ni-footer__logo img {
  display: block;
  width: clamp(108px, 10vw, 142px);
  height: auto;
  filter: none; /* Dunkle Logo-Version auf weissem Footer */
}
#top .ni-footer__brand p {
  max-width: 355px;
  margin: 0;
  padding-left: 15px;
  border-left: 3px solid var(--ni-red);
  color: #353535;
  font-size: 0.91rem;
  font-weight: 400;
  line-height: 1.65;
}
#top .ni-footer h3 {
  margin: 0 0 21px;
  padding: 0 0 10px;
  display: inline-block;
  border-bottom: 3px solid var(--ni-red);
  color: var(--ni-black);
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
#top .ni-footer__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 36px);
}
#top .ni-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#top .ni-footer li { margin: 0 0 12px; padding: 0; }
#top .ni-footer li::before { display: none; }
#top .ni-footer a {
  color: var(--ni-black);
  text-decoration: none;
}
#top .ni-footer__nav a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.89rem;
  font-weight: 500;
  line-height: 1.45;
  transition: color 160ms ease, transform 160ms ease;
}
#top .ni-footer__nav a:hover,
#top .ni-footer__nav a:focus-visible {
  color: var(--ni-red);
  transform: translateX(4px);
}
#top .ni-footer__social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
#top .ni-footer__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(2,2,2,0.75);
  background: transparent;
  color: var(--ni-black);
  transform: rotate(-1deg);
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
#top .ni-footer__social-icons a:nth-child(even) { transform: rotate(1deg); }
#top .ni-footer__social-icons a:hover,
#top .ni-footer__social-icons a:focus-visible {
  background: var(--ni-black);
  color: var(--ni-white);
  transform: translateY(-2px) rotate(0);
}
#top .ni-footer__social-icons svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: currentColor;
}
#top .ni-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: clamp(42px, 5vw, 70px);
  padding-top: 17px;
  border-top: 1px solid rgba(2,2,2,0.15);
  color: #606060;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
}
#top .ni-footer__bottom a { color: #565656; font-size: inherit; }
#top .ni-footer__bottom a:hover,
#top .ni-footer__bottom a:focus-visible { color: var(--ni-red); }

/* Enfold hat teils sehr spezifische Footer-Linkfarben. Falls das
   eigene HTML innerhalb von #footer liegt, bleiben unsere Zustände
   trotzdem sichtbar (besonders weiße Social-Icons auf Schwarz). */
#top #footer .ni-footer__nav a,
#top #footer .ni-footer__bottom a { color: var(--ni-black); }
#top #footer .ni-footer__nav a:hover,
#top #footer .ni-footer__nav a:focus-visible,
#top #footer .ni-footer__bottom a:hover,
#top #footer .ni-footer__bottom a:focus-visible { color: var(--ni-red); }
#top #footer .ni-footer__social-icons a { color: var(--ni-black); }
#top #footer .ni-footer__social-icons a:hover,
#top #footer .ni-footer__social-icons a:focus-visible { color: var(--ni-white); }

/* 06. RESPONSIVE ------------------------------------------------ */
@media (max-width: 1100px) {
  #top #header_main .main_menu ul:first-child > li > a {
    padding-inline: 9px;
    font-size: 0.72rem;
  }
}
@media (max-width: 989px) {
  :root { --ni-header-height: 76px; }
  #top #header_main .logo img { max-height: 54px !important; }
  #top .ni-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #top .ni-footer__social { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --ni-header-height: 72px; --ni-h1: clamp(3rem, 12vw, 4.5rem); }
  #top #header_main > .container { width: calc(100% - 32px); }
  #top #header_main .logo img { max-height: 50px !important; }
  #top .ni-footer { padding-top: 42px; padding-bottom: 24px; }
  #top .ni-footer__inner,
  #top .ni-footer__bottom { width: calc(100% - 36px); }
  #top .ni-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  #top .ni-footer__social { grid-column: auto; }
  #top .ni-footer__nav-grid { gap: 26px; }
  #top .ni-footer__bottom { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #top #header_main .main_menu ul:first-child > li > a .avia-menu-text::after,
  #top .ni-footer a { transition: none; }
}

/* ===============================================================
   NICHT IRGENDWANN / FOOTER-STEMPEL 04D
   Am ENDE der bestehenden ni-global.css einfuegen.
   Die bestehenden Footer-Regeln NICHT loeschen.
   =============================================================== */

#top .ni-footer .ni-footer__stamp-wrap {
    margin-top: 23px;
    padding: 5px 7px 8px 0;
}

/* Extra spezifisch wegen der Enfold-Regeln fuer Footer-Links. */
#top .ni-footer__nav a.ni-footer__stamp,
#top #footer .ni-footer__nav a.ni-footer__stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 21px);
    max-width: 100%;
    padding: 12px 19px 11px;
    background: #89252d;
    border: 2px solid #020202;
    color: #fff !important;
    box-shadow: 6px 6px 0 #020202;
    font-family: var(--font-headline, 'Nachmittage Display', Impact, sans-serif);
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-3deg);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#top .ni-footer__nav a.ni-footer__stamp:hover,
#top .ni-footer__nav a.ni-footer__stamp:focus-visible,
#top #footer .ni-footer__nav a.ni-footer__stamp:hover,
#top #footer .ni-footer__nav a.ni-footer__stamp:focus-visible {
    color: #fff !important;
    background: #6e1720;
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 8px 9px 0 #020202;
}

#top .ni-footer__nav a.ni-footer__stamp:focus-visible {
    outline: 3px solid #020202;
    outline-offset: 5px;
}

#top .ni-footer__stamp-arrow {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: .83em;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 640px) {
    #top .ni-footer .ni-footer__stamp-wrap {
        margin-top: 16px;
    }
    #top .ni-footer__nav a.ni-footer__stamp,
    #top #footer .ni-footer__nav a.ni-footer__stamp {
        font-size: clamp(23px, 6vw, 29px);
        padding: 12px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #top .ni-footer__nav a.ni-footer__stamp {
        transition: none;
    }
}

/* NICHT IRGENDWANN – Abstand zum Quellenblock */

.niq-sources {
    margin-top: 180px !important;
}

@media (max-width: 767px) {
    .niq-sources {
        margin-top: 100px !important;
    }
}