/* =========================================================
   POOL PROMOTION — GLOBAL
   ========================================================= */

/* =========================================================
   AFACAD FLUX — SAFARI-SICHER
   ========================================================= */

@font-face {
  font-family: "Afacad Flux";
  src: url("../fonts/AfacadFlux-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Afacad Flux";
  src: url("../fonts/AfacadFlux-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html,
body {
  font-family:
    "Afacad Flux",
    Arial,
    Helvetica,
    sans-serif;

  font-style: normal;
  font-weight: 400;

  font-synthesis: none;
}

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --content-width: 1200px;

  --background: #272025;
  --white: #ffffff;
  --berry: #820A5F;
}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  margin: 0;
}

/* =========================================================

   GLOBAL

   ========================================================= */

body {
  min-height: 100vh;

  margin: 0;

  display: flex;
  flex-direction: column;

  background: var(--background);

  color: var(--white);

  font-family:
    "Afacad Flux",
    Arial,
    Helvetica,
    sans-serif;

  font-style: normal;
  font-weight: 400;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   NAVIGATION + FOOTER IMMER KLEINGESCHRIEBEN
   ========================================================= */

.main-nav,
.main-nav a,
.main-nav span,
.footer-nav,
.footer-nav a,
.footer-language,
.footer-language button,
.footer-language span {
  text-transform: lowercase !important;
}

/* =========================================================
   MAIN
   ========================================================= */

.site-main {
  flex: 1 0 auto;

  width: 100%;

  min-height: 0;
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */

.pool-cursor {
  position: fixed;

  z-index: 999999;

  pointer-events: none;

  opacity: 0;

  transform: translate3d(0, 0, 0);

  will-change:
    transform,
    opacity,
    background-color;

}

.pool-cursor.is-visible {
  opacity: 1;
}

/* =========================================================
   HIDE NATIVE CURSOR
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  html,
  body,
  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [data-artist],
  .nav-parent {
    cursor: none !important;
  }

}

@media (hover: none), (pointer: coarse) {

  .pool-cursor {
    display: none !important;
  }

}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: relative;

  z-index: 5000;

  flex: 0 0 auto;

  width: 100%;
  max-width: none;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    30px
    6vw;

  background: var(--background);
}

/* =========================================================
   MAIN NAV
   ========================================================= */

.main-nav {
  position: relative;

  z-index: 1001;

  display: flex;

  align-items: center;

  gap:
    clamp(55px, 5vw, 80px);
}

.nav-item {
  position: relative;
}

.nav-has-submenu {
  padding: 0;
  margin: 0;
}

/* =========================================================
   NAV PARENT (Größe: siehe Teil 2, 44px)
   ========================================================= */

.nav-parent {
  position: relative;

  display: block;

  width: fit-content;

  margin: 0;

  padding:
    0
    0
    9px;

  font-size: 40px;
  line-height: 1;

  letter-spacing: 0;

  text-decoration: none;
}

/* =========================================================
   NAV PARENT LINE
   ========================================================= */

.nav-parent::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 0;

  border-radius: 50%;

  opacity: 0;

  transform:
    translateX(-50%);

  transform-origin: center;
}

/* =========================================================
   NAV HOVER ANIMATION
   ========================================================= */

.nav-has-submenu:hover
> .nav-parent:not(.active)::after,

.nav-has-submenu:focus-within
> .nav-parent:not(.active)::after {
  animation:
    navUnderlineGrow
    .6s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}

@keyframes navUnderlineGrow {

  0% {
    width: 0;
    height: 0;

    opacity: 0;

    border-radius: 50%;
  }

  18% {
    width: 6px;
    height: 6px;

    opacity: 1;

    border-radius: 50%;
  }

  32% {
    width: 6px;
    height: 6px;

    opacity: 1;

    border-radius: 50%;
  }

  100% {
    width: 100%;
    height: 2px;

    opacity: 1;

    border-radius: 999px;
  }

}

/* =========================================================
   ACTIVE MAIN NAV
   ========================================================= */

.nav-parent.active::after {
  left: 50%;
  bottom: 0;

  width: 100%;
  height: 2px;

  opacity: 1;

  border-radius: 999px;

  transform:
    translateX(-50%);

  animation: none;
}

/* =========================================================
   SUBMENU
   ========================================================= */

.nav-submenu {
  position: absolute;

  top: calc(100% + 8px);
  left: -10px;

  z-index: 1100;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 2px;

  min-width: max-content;

  padding:
    9px
    10px
    10px;

  background: var(--background);

  opacity: 0;
  visibility: hidden;

  transform:
    translate3d(0, -5px, 0);

  pointer-events: none;

  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.16, 1, .3, 1),
    visibility .25s;
}

/* =========================================================
   UNSICHTBARE HOVER-BRÜCKE
   ========================================================= */

.nav-submenu::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -10px;

  height: 10px;
}

/* =========================================================
   SUBMENU LINKS (Größe: siehe Teil 2, 26px)
   ========================================================= */

.nav-submenu a {
  position: relative;

  display: block;

  width: fit-content;

  margin: 0;

  padding:
    1px
    0
    2px;

  line-height: 1.15;

  font-weight: 400;

  text-decoration: none;

  transition:
    opacity .2s ease,
    transform .3s cubic-bezier(.16, 1, .3, 1);
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  transform:
    translateX(3px);
}

/* =========================================================
   ACTIVE SUBMENU
   ========================================================= */

.nav-submenu a.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

}

/* =========================================================
   SHOW SUBMENU — DESKTOP
   ========================================================= */

.nav-has-submenu:hover
> .nav-submenu,

.nav-has-submenu:focus-within
> .nav-submenu {
  opacity: 1;

  visibility: visible;

  transform:
    translate3d(0, 0, 0);

  pointer-events: auto;
}

/* =========================================================
   KEEP ACTIVE SUBMENU VISIBLE — DESKTOP
   ========================================================= */

.nav-has-submenu:has(.nav-submenu a.active)
> .nav-submenu {
  opacity: 1;

  visibility: visible;

  transform:
    translate3d(0, 0, 0);

  pointer-events: auto;
}

/* =========================================================
   POOL PROMOTION — LOGO
   BERRY CURSOR SPOT
   ========================================================= */

.pool-logo {
  position: relative;

  display: block;
  flex: 0 0 auto;

  line-height: 0;
  transform: none;

  --logo-x: 50%;
  --logo-y: 50%;
}

/* =========================================================
   NORMALES WEISSES LOGO
   ========================================================= */

.pool-logo img {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
}

/* =========================================================
   BERRY OVERLAY
   ========================================================= */

.pool-logo::after {
  content: "";

  position: absolute;

  /*
   * WICHTIG:
   * exakt dieselbe Fläche wie das Original.
   * Kein -1px / kein Vergrößern.
   */
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background-color: var(--berry);

  /* =======================================================
     EXAKT DIESELBE LOGO-MASKE
     ======================================================= */

  -webkit-mask-image:
    url("/assets/images/poolpromotion-logo.svg");

  mask-image:
    url("/assets/images/poolpromotion-logo.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  /*
   * WICHTIG:
   * exakt gleiche Größe wie <img>
   */

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  /* =======================================================
     CURSOR CIRCLE
     ======================================================= */

  -webkit-clip-path:
    circle(
      0px
      at
      var(--logo-x)
      var(--logo-y)
    );

  clip-path:
    circle(
      0px
      at
      var(--logo-x)
      var(--logo-y)
    );

  /* =======================================================
     LANGSAM / SMOOTH
     ======================================================= */

  transition:
    -webkit-clip-path 1.1s cubic-bezier(.16, 1, .3, 1),
    clip-path 1.1s cubic-bezier(.16, 1, .3, 1);

  will-change:
    clip-path;
}

/* =========================================================
   CURSOR IM LOGO
   ========================================================= */

.pool-logo.has-cursor::after {

  /*
   * Der Radius bleibt konstant.
   */

  -webkit-clip-path:
    circle(
      36px
      at
      var(--logo-x)
      var(--logo-y)
    );

  clip-path:
    circle(
      36px
      at
      var(--logo-x)
      var(--logo-y)
    );
}

/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none), (pointer: coarse) {

  .pool-logo::after {
    display: none;
  }

}

/* =========================================================
   STICKY HEADER — DESKTOP
   ========================================================= */

@media (min-width: 701px) {

  .site-header {
    position: sticky;

    top: 0;

    z-index: 5000;

    align-items: center;

    padding:
      30px
      6vw;

    transition:
      padding .6s cubic-bezier(.16, 1, .3, 1),
      background-color .4s ease,
      box-shadow .4s ease;
  }

  .main-nav {
    align-items: center;

    transition:
      gap .6s cubic-bezier(.16, 1, .3, 1);
  }

  .nav-parent {
    transition:
      padding .6s cubic-bezier(.16, 1, .3, 1);
  }

  .pool-logo {
    transform-origin: center right;

    transition:
      width .65s cubic-bezier(.16, 1, .3, 1);
  }

  /* SCROLLED: Header bleibt beim Scrollen gleich groß (wie auf der
     Startseite) – nur das Untermenü klappt ein (siehe Teil 2). */

}

/* =========================================================
   GENERIC PAGE
   ========================================================= */

.page {
  padding-top: 10vh;
  padding-bottom: 80px;
}

.page h1 {
  margin:
    0
    0
    32px;

  font-size:
    clamp(54px, 10vw, 150px);

  line-height: .9;

  font-weight: 400;

  letter-spacing: -.05em;
}

.text {
  max-width: 850px;

  font-size:
    clamp(20px, 2vw, 30px);

  line-height: 1.35;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  position: relative;

  z-index: 500;

  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: none;

  margin-top: auto;

  padding:
    24px
    6vw
    28px;

  color: #fff;

  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   FOOTER NAV — 20PX
   ========================================================= */

.footer-nav {
  display: flex;

  align-items: center;

  gap:
    clamp(25px, 3vw, 50px);
}

.footer-nav a {
  position: relative;

  display: inline-block;

  padding-bottom: 6px;

  color: #fff;

  font-size: 20px;
  line-height: 1;

  text-decoration: none;

  opacity: .85;

  transition:
    opacity .2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  opacity: 1;
}

.footer-nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 0;

  background: #fff;

  border-radius: 50%;

  opacity: 0;

  transform:
    translateX(-50%);

  transform-origin: center;
}

.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
  animation:
    footerLineGrow
    .5s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}

@keyframes footerLineGrow {

  0% {
    width: 0;
    height: 0;

    opacity: 0;
  }

  20% {
    width: 4px;
    height: 4px;

    opacity: 1;

    border-radius: 50%;
  }

  35% {
    width: 4px;
    height: 4px;

    opacity: 1;

    border-radius: 50%;
  }

  100% {
    width: 100%;
    height: 1px;

    opacity: 1;

    border-radius: 999px;
  }

}

/* =========================================================
   LANGUAGE SWITCH — 20PX
   ========================================================= */

.footer-language {
  display: flex;

  align-items: center;

  gap: 3px;

  color: #fff;

  font-size: 20px;
  line-height: 1;

  text-transform: lowercase !important;
}

.footer-language button,
.footer-language span {
  font-size: 20px;

  text-transform: lowercase !important;
}

.lang-switch {
  appearance: none;
  -webkit-appearance: none;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font: inherit;

  font-size: 20px;
  line-height: 1;

  text-transform: lowercase !important;

  opacity: .4;

  cursor: pointer;

  transition:
    opacity .2s ease;
}

.lang-switch:hover,
.lang-switch.active {
  opacity: 1;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) and (min-width: 701px) {

  .main-nav {
    gap: 40px;
  }

  .site-header.is-scrolled .main-nav {
    gap: 40px;
  }

  /*
   * Tablet:
   * Hauptmenü 40px
   * Submenu 20px
   */

  .nav-parent,
  .site-header.is-scrolled .nav-parent {
    font-size: 40px;
  }

  /*
   * Footer bleibt 20px.
   */

  .site-footer,
  .footer-nav a,
  .footer-language,
  .footer-language button,
  .footer-language span,
  .lang-switch {
    font-size: 20px;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .site-header {
    /*
     * Header bleibt auch auf Mobile
     * am oberen Bildschirmrand stehen.
     */

    position: sticky;

    top: 0;

    z-index: 5000;

    justify-content: space-between;

    background: var(--background);
  }

  /* -------------------------------------------------------
     NAV
     ------------------------------------------------------- */

  .main-nav {
    display: flex;

    align-items: center;

  }

  .nav-item {
    position: relative;
  }

  .nav-has-submenu {
    padding: 0;
    margin: 0;
  }

  /*
   * Hauptmenü Mobile = 40px.
   */

  .nav-parent {
    padding:
      0
      0
      6px;

    line-height: 1;

    user-select: none;

    -webkit-tap-highlight-color:
      transparent;
  }

  /* -------------------------------------------------------
     MOBILE SUBMENU
     ------------------------------------------------------- */

  .nav-submenu {
    position: absolute;

    top: calc(100% + 6px);
    left: -8px;

    z-index: 6000;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    min-width: max-content;

    gap: 2px;

    padding:
      8px
      8px
      9px;

    background: var(--background);

    opacity: 0;

    visibility: hidden;

    transform:
      translate3d(0, -5px, 0);

    pointer-events: none;

    transition:
      opacity .25s ease,
      transform .3s cubic-bezier(.16, 1, .3, 1),
      visibility .25s;
  }

  /*
   * Aktive Unterseite öffnet das
   * Dropdown auf Mobile NICHT automatisch.
   */

  .nav-has-submenu:has(.nav-submenu a.active)
  > .nav-submenu {
    opacity: 0;

    visibility: hidden;

    transform:
      translate3d(0, -5px, 0);

    pointer-events: none;
  }

  /*
   * Desktop-Hover auf Mobile deaktivieren.
   */

  .nav-has-submenu:hover
  > .nav-submenu,

  .nav-has-submenu:focus-within
  > .nav-submenu {
    opacity: 0;

    visibility: hidden;

    transform:
      translate3d(0, -5px, 0);

    pointer-events: none;
  }

  /*
   * NUR mobile-open öffnet das Menü.
   */

  .nav-has-submenu.mobile-open
  > .nav-submenu,

  .nav-has-submenu.mobile-open:hover
  > .nav-submenu,

  .nav-has-submenu.mobile-open:focus-within
  > .nav-submenu,

  .nav-has-submenu.mobile-open:has(.nav-submenu a.active)
  > .nav-submenu {
    opacity: 1;

    visibility: visible;

    transform:
      translate3d(0, 0, 0);

    pointer-events: auto;
  }

  /* -------------------------------------------------------
     MOBILE SUBMENU LINKS — 20PX
     ------------------------------------------------------- */

  .nav-submenu a {
    padding:
      1px
      0
      2px;

    line-height: 1.2;

  }

  .nav-submenu a:hover,
  .nav-submenu a:focus-visible {
    transform: none;
  }

  /* -------------------------------------------------------
     MOBILE LOGO
     ------------------------------------------------------- */

  .pool-logo {

    transform: none;
  }

  /* -------------------------------------------------------
     GENERIC PAGE
     ------------------------------------------------------- */

  .page {
    padding-top: 55px;
    padding-bottom: 50px;
  }

  /* -------------------------------------------------------
     MOBILE FOOTER — 20PX
     ------------------------------------------------------- */

  .site-footer {
    align-items: flex-end;

    padding:
      25px
      20px
      20px;

    font-size: 20px;
  }

  .footer-nav {
    align-items: flex-start;

    flex-wrap: wrap;

    gap:
      10px
      22px;

    max-width: 75%;
  }

  .footer-nav a,
  .footer-language,
  .footer-language button,
  .footer-language span,
  .lang-switch {
    font-size: 20px;
  }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-header,
  .nav-parent,
  .main-nav,
  .pool-logo,
  .nav-submenu {
    transition: none;
  }

  .nav-has-submenu:hover
  > .nav-parent:not(.active)::after,

  .nav-has-submenu:focus-within
  > .nav-parent:not(.active)::after,

  .footer-nav a:hover::after,

  .footer-nav a:focus-visible::after {
    animation: none;
  }

  .nav-has-submenu:hover
  > .nav-parent:not(.active)::after,

  .nav-has-submenu:focus-within
  > .nav-parent:not(.active)::after {
    width: 100%;
    height: 2px;

    opacity: 1;
  }

  .footer-nav a:hover::after,
  .footer-nav a:focus-visible::after {
    width: 100%;
    height: 1px;

    opacity: 1;
  }

}

/* =========================================================
   GOOGLE TRANSLATE VERSTECKEN
   ========================================================= */

#google_translate_element {
  position: fixed !important;

  width: 1px !important;
  height: 1px !important;

  left: -9999px !important;
  bottom: 0 !important;

  overflow: hidden !important;

  opacity: 0 !important;
  pointer-events: none !important;
}

/* obere Google-Leiste entfernen */

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* Google darf Body nicht verschieben */

html,
body {
  top: 0 !important;
}

/* Google Tooltip entfernen */

.goog-te-balloon-frame {
  display: none !important;
}

html,
body {
  overflow-x: clip;
}

@media (max-width: 700px) {

  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 20px;
  }

  .main-nav {
    min-width: 0;
    flex-wrap: nowrap;
    gap: clamp(8px, 3vw, 18px);
  }

  .nav-parent {
    font-size: clamp(18px, 6.4vw, 40px);
    padding-bottom: 5px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
  }

  .pool-logo {
    justify-self: end;
  }

}

/* =========================================================
   TEIL 2 — AKTUELLES DESIGN
   Ab hier stehen die aktuellen Werte für Farben, Abstände,
   Schriftgrößen und Layout. „body“ vor dem Selektor, weil
   artists.css, archive.css usw. nach style.css geladen werden.

   Inhalt:
   1. Abstand Header → Inhalt, Menüfarben, Untermenü
   2. Bildfilter (Werte aus dem Panel)
   3. Überschriften
   4. Variablen: Seitenrand, Schrift, Breite (max. 1280px)
   5. Menü, Logo, Schriftgrößen, Listen
   6. Archiv, Cursor-Stern, Buchstaben/Zahlen
   7. Fester Header, Fotos ohne helle Ränder, Kontakt
   ========================================================= */

:root {
  /* Abstand Header (bzw. aufgeklapptes Untermenü) → erste Überschrift.
     Gilt auf allen Seiten und bei Anker-Sprüngen (header.js misst den Header). */
  --content-gap: 50px;
  --content-offset: var(--content-gap);
}

/* ---------- Menü + Untermenü in Berry ---------- */
.nav-parent,
.nav-submenu a {
  color: var(--berry);
}
.nav-parent::after,
.nav-submenu a.active::after {
  background: var(--berry);
}

/* ---------- Untermenü größer (vorher 20px) ---------- */
.nav-submenu a,
.site-header.is-scrolled .nav-submenu a {
  font-size: 26px;
}
.nav-submenu a { opacity: .75; }
.nav-submenu a:hover,
.nav-submenu a:focus-visible,
.nav-submenu a.active { opacity: 1; }

/* ---------- Überschriften in Berry ---------- */
body .about-title,
body .section-title,
body .page h1,
body .legal-page h1,
body .legal-page h2 {
  color: var(--berry);
}

/* ---------- Mehr Abstand zwischen Menü und Inhalt ---------- */
/* „body“ davor, weil artists.css, archive.css usw. erst nach style.css geladen werden */
body .artists-page:not(.pool-alt-artists),
body .archive-page,
body .contact-page,
body .legal-page,
body .onepage > .onepage-section:first-of-type,
body .clients-page:not(.onepage-section),
body .charts-page:not(.onepage-section) {
  padding-top: var(--content-offset);
}

@media (max-width: 1000px) and (min-width: 701px) {
  .nav-submenu a,
  .site-header.is-scrolled .nav-submenu a { font-size: 24px; }
}
@media (max-width: 700px) {
  :root { --content-gap: 40px; }
  .nav-submenu a { font-size: 24px; opacity: .8; }
}

/* ---------- Untermenü klappt beim Scrollen ein ----------
   Oben auf der Seite bleibt das Untermenü der aktuellen Seite
   zur Orientierung offen. Sobald gescrollt wird (Header wird
   kleiner), klappt es ein und verdeckt keine Inhalte mehr.
   Hover / Tastatur öffnet es weiterhin. */
@media (min-width: 701px) {
  .site-header.is-scrolled
  .nav-has-submenu:has(.nav-submenu a.active):not(:hover):not(:focus-within)
  > .nav-submenu {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -5px, 0);
    pointer-events: none;
  }
}

/* =========================================================
   BILDFILTER (Panel → Site → Bildfilter)
   Die Werte kommen als CSS-Variablen aus dem Snippet
   „photo-filter“ im <head>. Ohne Einstellung gilt der
   bisherige Look (Berry, voll, Kontrast 112 %).
   ========================================================= */

body .artist-tile-media img {
  filter:
    grayscale(var(--photo-grayscale, 100%))
    contrast(var(--photo-contrast, 1.12))
    brightness(var(--photo-brightness, 1));
}

body .artist-tile-media::after {
  background: var(--photo-tint, var(--berry));
  opacity: var(--photo-tint-opacity, 1);
  mix-blend-mode: color;
}

/* =========================================================
   ÜBERSCHRIFTEN IMPRINT / PRIVACY POLICY / CONTACT
   Fett und Berry wie alle Überschriften (Größe: siehe unten).
   ========================================================= */
body .legal-title,
body .contact-title {
  font-weight: 700;
  color: var(--berry);
}

/* Nur für Suchmaschinen und Screenreader sichtbar (z. B. H1 der Listen-Seiten) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   VARIABLEN + GRUNDLAYOUT
   Seitenrand, Schriftgrößen, Abstände und maximale Breite
   werden hier zentral festgelegt.
   ========================================================= */

:root {
  /* Seitenrand: Header, Inhalt und Footer stehen exakt bündig */
  --gutter: 6vw;
  --text-size: 21px;
  --text-lh: 1.7;
  --title-size: 36px;
  --title-gap: 34px;
  --letter-gap: 44px;     /* mehr Platz unter den Buchstabengruppen (vorher 24px) */
  --content-max: 1280px;  /* maximale Breite des Inhalts */
  --content-pad: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}
@media (max-width: 1000px) {
  :root { --gutter: 5vw; --text-size: 19px; --title-size: 32px; }
}
@media (max-width: 700px) {
  :root { --gutter: 20px; --text-size: 17px; --text-lh: 1.65; --title-size: 26px; --title-gap: 24px; --letter-gap: 30px; }
}

/* ---------- Header / Footer: gleicher Rand ---------- */
body .site-header,
body .site-header.is-scrolled,
body .site-footer {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Sticky Header ohne Transparenz ---------- */
@media (min-width: 701px) {
  body .site-header.is-scrolled {
    background: var(--background);
    box-shadow: none;
  }
}

/* ---------- Inhalt: max. 1280px breit, mittig ----------
   Header und Footer bleiben so breit wie der Seitenrand (--gutter),
   der Inhalt wird auf großen Bildschirmen nicht breiter als 1280px. */
body .artists-page,
body .archive-page,
body .onepage > .onepage-section,
body .clients-page,
body .charts-page,
body .about-page,
body .legal-page,
body .contact-page,
body .page {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--content-pad) !important;
  padding-right: var(--content-pad) !important;
}
body .about-inner,
body .about-content {
  max-width: none;
}

/* ---------- Menü: 40px fett, etwas dichter ---------- */
@media (min-width: 701px) {
  body .nav-parent,
  body .site-header.is-scrolled .nav-parent {
    font-size: 40px;
  }
  body .main-nav,
  body .site-header.is-scrolled .main-nav {
    gap: clamp(30px, 2.8vw, 46px);
  }
}

/* ---------- Logo etwas größer ---------- */
body .pool-logo {
  width: clamp(140px, 14.5vw, 215px);
}
@media (max-width: 700px) {
  body .pool-logo { width: 96px; }
}

/* ---------- Schrift 21px und mehr Zeilenhöhe ---------- */
body .about-text,
body .about-text p,
body .legal-text,
body .legal-text p,
body .contact-page,
body .chart-entry,
body .chart-artist,
body .chart-song,
body .clients-client,
body .archive-artist,
body .archive-mobile .archive-artist {
  font-size: var(--text-size);
}
body .about-text,
body .about-text p,
body .legal-text,
body .legal-text p {
  line-height: var(--text-lh);
}
body .chart-entry { line-height: 1.4; }
body .chart-items { row-gap: 12px; }

/* Listen: Zeilen eines umbrochenen Namens eng, Abstand zwischen Namen größer */
body .clients-all .clients-client,
body .archive-page .archive-artist {
  line-height: 1.15;
  padding: 3px 0 5px;
}

/* ---------- Überschriften: Tick größer, mehr Abstand, alles klein ---------- */
body .section-title,
body .about-title,
body .legal-title,
body .contact-title {
  font-size: var(--title-size);
  line-height: 1;
  margin: 0 0 var(--title-gap);
  text-transform: lowercase;
}
body .legal-text h2,
body .legal-text h3,
body .legal-text h4 {
  text-transform: lowercase;
  font-size: calc(var(--text-size) + 1px);
  margin-top: 40px;
}

/* ---------- Archiv als eine Seite ---------- */
body .archive-onepage > .archive-page {
  padding-bottom: 60px;
}
body .archive-onepage > .archive-page + .archive-page {
  padding-top: 40px;
}

/* ---------- Cursor: Grundeinstellungen (Form: siehe „Cursor = Stern“) ---------- */
body .pool-cursor,
body .pool-cursor.is-clickable,
body .pool-cursor.is-artist {
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none !important;
  color: var(--white);            /* Stern weiß … */
  transition: color .2s ease;
}
body .pool-cursor.is-clickable,
body .pool-cursor.is-artist { color: var(--berry); }   /* … über Links Berry */
body .pool-cursor::before {
  position: absolute;
  left: 0;
  top: 0;
}

/* =========================================================
   BUCHSTABEN (Archive, Client Roster) UND ZAHLEN (Airplay Peaks)
   Desktop 34px, Tablet 31px, Handy 27px
   ========================================================= */
body .chart-position,
body .archive-page .archive-letter,
body .clients-all .clients-letter { font-size: 34px; }
@media (max-width: 1100px) {
  body .chart-position,
  body .archive-page .archive-letter,
  body .clients-all .clients-letter { font-size: 31px; }
}
@media (max-width: 700px) {
  body .chart-position,
  body .archive-page .archive-letter,
  body .clients-all .clients-letter { font-size: 27px; }
}

/* Cursor = Stern aus zwei Dreiecken (gleiche Form wie bei den Airplay Peaks) */
body .pool-cursor::before {
  content: "";
  width: 22px;
  height: 22px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.43,25 93.3,25 78.87,50 93.3,75 64.43,75 50,100 35.57,75 6.7,75 21.13,50 6.7,25 35.57,25'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.43,25 93.3,25 78.87,50 93.3,75 64.43,75 50,100 35.57,75 6.7,75 21.13,50 6.7,25 35.57,25'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}
body .pool-cursor.is-artist::before {
  width: 30px;
  height: 30px;
}

/* =========================================================
   FESTER HEADER (ohne Springen)
   Vorher war der Header „sticky“ (Teil des Seitenflusses). Wurde er
   beim Scrollen kleiner, rutschte der Inhalt nach oben – der Browser
   korrigierte die Scrollposition, der Header wurde wieder groß, usw.
   Jetzt liegt er fest über der Seite; der Platz darunter bleibt immer
   gleich hoch (--header-space, misst header.js).
   Startseite (.pool-alt-body) hat ihren eigenen festen Header.
   ========================================================= */
/* Platz für Header + aufgeklapptes Untermenü – feste Werte statt
   JavaScript-Messung, damit beim Laden nichts springt
   (gemessen: Desktop max. 240px, Tablet 216px, Handy 88px).
   --anchor-offset: wohin Anker-Sprünge die Überschrift setzen =
   Header + aufgeklapptes Untermenü + 100px (Handy: + 65px) */
:root {
  --header-space: 240px;
  /* Header bleibt beim Scrollen gleich groß → Anker landen genau dort,
     wo auch oben auf der Seite die erste Überschrift steht */
  --anchor-offset: calc(var(--header-space) + var(--content-gap));
}
@media (max-width: 1000px) { :root { --header-space: 216px; } }
@media (max-width: 700px)  { :root { --header-space: 88px; } }

body:not(.pool-alt-body) {
  padding-top: var(--header-space);
}
body:not(.pool-alt-body) .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}
html { overflow-anchor: none; }   /* keine automatische Scroll-Korrektur */
/* Header immer mit Hintergrund, damit beim Scrollen nichts durchscheint */
body:not(.pool-alt-body) .site-header {
  background: var(--background);
}

/* =========================================================
   FOTOS: KEINE HELLEN RÄNDER
   Safari/Chrome runden die Farbschicht (mix-blend-mode) und das
   gefilterte Foto manchmal auf unterschiedliche Pixel – dann blitzt
   am Rand ein schmaler, ungefärbter Streifen des Fotos auf.
   Deshalb ragt die Farbschicht etwas über das Foto hinaus und das
   Foto minimal über den Rahmen (beides wird vom Rahmen abgeschnitten).
   ========================================================= */
body .artist-tile-media::after,
body .artist-list-preview::after,
body .artist-row-thumb::after,
body .artist-item-photo::after {
  inset: -2px;
}
body .artist-tile-media,
body .artist-list-preview,
body .artist-row-thumb,
body .artist-item-photo {
  overflow: hidden;
}
body .artist-list-preview img,
body .artist-row-thumb img,
body .artist-item-photo img {
  transform: scale(1.01);
}

/* =========================================================
   KONTAKT: gleiche Schrift wie die anderen Seiten,
   Stern statt Punkt (wie bei den Airplay Peaks)
   ========================================================= */
body .contact-content,
body .contact-person,
body .contact-address,
body .contact-row {
  font-size: var(--text-size);
  line-height: var(--text-lh);
}
body .contact-row {
  gap: 0;
  min-height: 0;
}

/* =========================================================
   AGENCY-TEXT: Zwischen verlinkten Künstlern ein kleiner Berry-Stern statt Komma
   (about.php ersetzt „, “ zwischen zwei Links; das Komma bleibt
   unsichtbar im HTML für Screenreader).
   ========================================================= */
body .about-text .about-sep {
  display: inline-block;
  width: .48em;
  height: .48em;
  margin: 0 .05em 0 .3em;
  overflow: hidden;
  color: transparent;
  line-height: 0;
  vertical-align: middle;
  background: var(--berry);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.43,25 93.3,25 78.87,50 93.3,75 64.43,75 50,100 35.57,75 6.7,75 21.13,50 6.7,25 35.57,25'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.43,25 93.3,25 78.87,50 93.3,75 64.43,75 50,100 35.57,75 6.7,75 21.13,50 6.7,25 35.57,25'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   MENÜ: etwas kleiner (40px), dafür fett
   ========================================================= */
body .nav-parent {
  font-weight: 700;
}

/* =========================================================
   TEST-SCHALTER (Panel → Site → Farben):
   „Menü weiß + Logo Berry“ → <body class="pool-menu-white">
   ========================================================= */
body.pool-menu-white .nav-parent,
body.pool-menu-white .nav-submenu a {
  color: var(--white);
}
body.pool-menu-white .nav-parent::after,
body.pool-menu-white .nav-submenu a.active::after {
  background: var(--white);
}
/* Logo in Berry: weißes Logo ausblenden, Berry-Fläche in Logoform */
body.pool-menu-white .pool-logo img,
body.pool-menu-white .pool-alt-logo img {
  opacity: 0;
}
body.pool-menu-white .pool-logo::before,
body.pool-menu-white .pool-alt-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--berry);
  -webkit-mask: url("/assets/images/poolpromotion-logo.svg") center / 100% 100% no-repeat;
          mask: url("/assets/images/poolpromotion-logo.svg") center / 100% 100% no-repeat;
}
/* Hover-Spot über dem Logo dann weiß */
body.pool-menu-white .pool-logo::after,
body.pool-menu-white .pool-alt-logo::after {
  background-color: var(--white);
}