/* ---------------------------------------------------------------------------
   UX/UI-Tweaks — nicshanker.de
   Nachgelagertes Stylesheet, ändert nichts am Avada-Markup.
   Ziele: Textkontrast >= 4.5:1, sichtbarer Tastaturfokus, Tap-Targets >= 44px,
   lesbare Schrift auf Bildkacheln, lesbares Cookie-Banner.
   Rückbau: <link ... ux-tweaks.css> aus den Seiten entfernen.
   --------------------------------------------------------------------------- */

/* 1 — Fließtext-Kontrast: #7e8890 (3,6:1) -> #56626c (6,3:1) --------------- */
:root {
  --body_typography-color: #56626c;
  --awb-ux-focus: #004968;
}

body,
.fusion-text p,
.post-content p,
.fusion-copyright-notice,
.fusion-copyright-notice a {
  color: #56626c;
}

/* Hauptmenü: #828282 (3,8:1) -> #5a5a5a (6,9:1) --------------------------- */
.fusion-main-menu > ul > li > a .menu-text,
.fusion-main-menu .fusion-menu > li > a .menu-text {
  color: #5a5a5a;
}

/* Footer-Links vom Fließtext abheben (waren farbgleich) ------------------- */
.fusion-copyright-notice a {
  color: #3c4650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fusion-copyright-notice a:hover,
.fusion-copyright-notice a:focus-visible {
  color: #004968;
}

/* 2 — Tastaturfokus sichtbar (Avada setzt outline:none global) ------------ */
.fusion-disable-outline a:focus-visible,
.fusion-disable-outline button:focus-visible,
.fusion-disable-outline input:focus-visible,
.fusion-disable-outline select:focus-visible,
.fusion-disable-outline textarea:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--awb-ux-focus) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Skip-Link war 1x1px und damit unbenutzbar */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
  z-index: 2147483646 !important;
}

/* 3 — Tap-Targets >= 44px ------------------------------------------------- */
.fusion-social-networks-wrapper a.fusion-social-network-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
}

.fusion-mobile-menu-icons a.fusion-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.fusion-copyright-notice a,
.fusion-text-9 a,
.fusion-text-13 a {
  display: inline-block;
  padding: 11px 6px;
}

/* Platzhalter der EVENTS-Kachel auf gleiche Hoehe bringen */
.fusion-text-11 p > span {
  display: inline-block;
  padding: 11px 6px;
}

@media (max-width: 900px) {
  .fusion-copyright-notice > div {
    line-height: 2.2;
  }
}

/* 4 — Weiße Schrift auf Foto-Kacheln absichern (Scrim) -------------------- */
.fusion-column-inner-bg-wrapper .fusion-column-inner-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.48) 100%);
  pointer-events: none;
}

.fusion-column-inner-bg-wrapper .fusion-column-inner-bg-image {
  position: relative;
}

.fusion-column-inner-bg-wrapper h2,
.fusion-column-inner-bg-wrapper p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 5 — Cookie-Banner lesbar (Quelle: 9px, ~2,6mm hoch) -------------------- */
#nicshanker-cookie-banner .iub-p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #1f1f1f !important;
}

#nicshanker-cookie-banner .iubenda-cs-customize-btn,
#nicshanker-cookie-banner .iubenda-cs-reject-btn,
#nicshanker-cookie-banner .iubenda-cs-accept-btn {
  min-height: 44px;
  transition: background-color 200ms ease, color 200ms ease;
}

#nicshanker-cookie-banner .iubenda-cs-content {
  max-height: 70vh;
  overflow-y: auto;
}

@media (max-width: 900px) {
  #nicshanker-cookie-banner .iub-p {
    font-size: 13px !important;
    max-height: 34vh;
    overflow-y: auto;
    padding-right: 4px;
  }

  #nicshanker-cookie-banner .iubenda-cs-rationale {
    gap: 12px;
    padding: 16px;
  }

  #nicshanker-cookie-banner .iubenda-cs-brand img {
    width: 96px;
  }
}

/* 6 — Bewegung respektieren ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fusion-column-inner-bg.hover-type-zoomin:hover .fusion-column-inner-bg-image {
    transform: none !important;
  }
}

/* 7 — Restliche Tap-Targets ---------------------------------------------- */
.fusion-button,
.fusion-button-wrapper > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Kachel-Ueberschrift bewusst ohne Extra-Padding: die ganze Kachel ist
   klickbar und "View More" darunter erfuellt bereits 44px. */

/* 8 — Foto-Kacheln (DRINKS / EVENTS / NEWS) ------------------------------
   Zwei Probleme auf Mobil:
   a) Die Hintergrundbilder (950x1200, Hochformat) hingen an "0% 0%" — auf der
      breiten, flachen Mobil-Kachel war damit nur der obere Bildrand zu sehen,
      die Motive waren abgeschnitten.
   b) Die vertikale Zentrierung des Textes kam von Avada-Spacern mit 170px
      margin-top, die per fusion-no-small-visibility auf Mobil ausgeblendet
      werden — der Text klebte dadurch oben statt mittig. */

.fusion-column-inner-bg-wrapper .fusion-column-inner-bg-image {
  background-position: center center;
}

@media (max-width: 1024px) {
  .fusion-column-inner-bg-wrapper > .fusion-column-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
  }

  /* die verbliebenen Trenner brauchen im Flex-Kontext keine Alt-Margins */
  .fusion-column-inner-bg-wrapper > .fusion-column-wrapper > .fusion-separator {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 640px) {
  .fusion-column-inner-bg-wrapper {
    min-height: 320px;
  }

  /* Text liegt jetzt mittig über dem Motiv — Scrim entsprechend kräftiger */
  .fusion-column-inner-bg-wrapper .fusion-column-inner-bg-image::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.52) 100%);
  }
}

/* 9 — Footer-Zeile ------------------------------------------------------
   Vorher: doppelte Impressum-/Datenschutz-Links und literale "|" im Text.
   Auf Mobil brach das über vier Zeilen mit hängenden Trennstrichen am
   Zeilenende. Jetzt: Flex-Liste, Trenner per CSS (fallen am Umbruch weg). */

.nsc-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 14px;
}

.nsc-footer-links > * {
  display: inline-flex;
  align-items: center;
  padding: 11px 6px;
}

/* Keine literalen Trennstriche: die haengen beim Umbruch am Zeilenanfang und
   werden vom Link-Underline mitgezeichnet. Abstand traegt die Trennung. */
.nsc-footer-links > span {
  color: #56626c;
}

@media (max-width: 640px) {
  .nsc-footer-links {
    gap: 0 6px;
  }

  /* Platz für den runden "Nach oben"-Button, der sonst die Social-Icons überlappt */
  .fusion-footer-copyright-area {
    padding-bottom: 84px;
  }
}