/* ==========================================
   PB Fishing — PB//Neo Dark
   pb-main.css (komplett)
   ========================================== */

/* ----------------------
   Design Tokens
   ---------------------- */
:root{
  --pb-black:#0f0f0f;        /* Hintergrund */
  --pb-chartreuse:#d4f44b;   /* Primär-CTA */
  --pb-surface1:#161616;     /* Flächen */
  --pb-surface2:#1f1f1f;     /* Panels/Karten */
  --pb-border:#2a2a2a;       /* Linien/Divider */
  --pb-text:#f2f2f2;         /* Primärtext */
  --pb-text-weak:#bdbdbd;    /* Sekundärtext */
  --pb-focus-ring:2px solid var(--pb-chartreuse);

  /* Spacing Scale */
  --pb-gap-1: 6px;
  --pb-gap-2: 10px;
  --pb-gap-3: 14px;
  --pb-gap-4: 18px;
  --pb-gap-5: 24px;
  --pb-gap-6: 32px;
  --pb-gap-7: 40px;

  /* Max Breite */
  --pb-max: 1200px;
}

/* ----------------------
   Base / Globals
   ---------------------- */
*{ box-sizing: border-box }
html, body{
  background:var(--pb-black);
  color:var(--pb-text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
a{ color:var(--pb-text); text-decoration:none }
a:hover{ color:#ffffff; text-decoration:underline }
:focus-visible{ outline:var(--pb-focus-ring); outline-offset:2px }

.container, .wrap, .site-content{
  max-width: var(--pb-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ----------------------
   Header (Atomion-native)
   ---------------------- */

/* Topbar vollständig ausblenden – robust (falls Theme/Customizer aktiv) */
.top-bar,
.topbar,
.header-top,
.header-top-bar,
.site-topbar,
.site-header .top-bar,
.site-header .topbar,
.site-header .header-top,
.site-header .header-top-bar,
.site-header .site-topbar,
#masthead .top-bar,
#masthead .header-top,
.pb-topbar{
  display: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Sticky + Glass-Hintergrund */
#masthead.site-header,
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(15,15,15,0.85);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--pb-border);
}

/* Innenabstände (häufige Wrapper in Themes) */
.site-header .site-header-inner,
.site-header .container,
.site-header .wrap{
  padding-block: var(--pb-gap-4);
}

/* Logo-Höhe */
.site-header .site-branding img,
.site-header .custom-logo{
  max-height: 32px !important;
  height: auto;
}

/* Navigation mittig */
.site-header .main-navigation,
.site-header .primary-navigation{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Menüliste */
.site-header .main-navigation ul.menu,
.site-header .primary-navigation ul.menu{
  display:flex;
  align-items:center;
  gap: var(--pb-gap-2);
  list-style:none;
  margin:0;
  padding:0;
}

/* Top-Level Links */
.site-header .main-navigation ul.menu > li > a,
.site-header .primary-navigation ul.menu > li > a{
  display:inline-block;
  padding:8px 6px;
  color: var(--pb-text-weak);
  letter-spacing:.01em;
  font-weight:500;
  position:relative;
  transition: color .15s ease;
}

/* Hover/Active Underline in Chartreuse */
.site-header .main-navigation ul.menu > li > a::after,
.site-header .primary-navigation ul.menu > li > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: transparent;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease, background .18s ease;
}
.site-header .main-navigation ul.menu > li:hover > a,
.site-header .primary-navigation ul.menu > li:hover > a,
.site-header .main-navigation .current-menu-item > a,
.site-header .primary-navigation .current-menu-item > a{
  color: var(--pb-text);
}
.site-header .main-navigation ul.menu > li:hover > a::after,
.site-header .primary-navigation ul.menu > li:hover > a::after,
.site-header .main-navigation .current-menu-item > a::after,
.site-header .primary-navigation .current-menu-item > a::after{
  background: var(--pb-chartreuse);
  transform: scaleX(1);
}

/* Tastatur-Fokus */
.site-header .main-navigation a:focus-visible,
.site-header .primary-navigation a:focus-visible{
  outline: var(--pb-focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Dropdowns */
.site-header .main-navigation .sub-menu,
.site-header .primary-navigation .sub-menu{
  position:absolute;
  min-width:220px;
  margin-top:12px;
  background: var(--pb-surface1);
  border:1px solid var(--pb-border);
  border-radius:12px;
  padding: var(--pb-gap-3) var(--pb-gap-4);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index:1001;
}
.site-header .main-navigation .sub-menu li,
.site-header .primary-navigation .sub-menu li{
  margin:2px 0;
}
.site-header .main-navigation .sub-menu a,
.site-header .primary-navigation .sub-menu a{
  color: var(--pb-text);
  padding:6px 8px;
  border-radius:8px;
  display:block;
}
.site-header .main-navigation .sub-menu a:hover,
.site-header .primary-navigation .sub-menu a:hover{
  background: var(--pb-surface2);
}

/* Header-Action-Icons (Suche/Konto/Warenkorb – gängige Bereiche) */
.site-header .header-actions,
.site-header .header-icons,
.site-header .site-header-cart{
  display:flex;
  gap:12px;
  align-items:center;
}
.site-header .header-actions a,
.site-header .header-actions button,
.site-header .site-header-cart a{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  color: var(--pb-text);
  background: var(--pb-surface1);
  border:1px solid var(--pb-border);
  border-radius:10px;
}
.site-header .header-actions a:hover,
.site-header .header-actions button:hover,
.site-header .site-header-cart a:hover{
  background: var(--pb-surface2);
}

/* ----------------------
   Mobile Navigation
   ---------------------- */

/* Hamburger-Toggle (zeigt Icon via pseudo) */
.menu-toggle,
.mobile-menu-toggle,
.primary-navigation .menu-toggle{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  color: var(--pb-text);
  background: var(--pb-surface1);
  border:1px solid var(--pb-border);
  border-radius:10px;
  padding:10px 12px;
  line-height:1;
  position:relative;
}
.menu-toggle:focus-visible,
.mobile-menu-toggle:focus-visible{
  outline: var(--pb-focus-ring);
}

/* Hamburger-Icon (3 Linien) */
.menu-toggle::before{
  content:"";
  position:relative;
  width:20px; height:2px;
  background: currentColor;
  display:inline-block;
  box-shadow:
    0 6px 0 0 currentColor,
    0 12px 0 0 currentColor;
}
/* Aktiv-Zustand (X) bei aria-expanded=true */
.menu-toggle[aria-expanded="true"]::before{
  background: transparent;
  box-shadow: none;
}
.menu-toggle[aria-expanded="true"]::after{
  content:"";
  display:inline-block;
  width:20px; height:2px;
  background: currentColor;
  transform: rotate(45deg);
  position:relative;
  left:-20px;
}

/* Desktop: Toggle ausblenden */
@media (min-width:961px){
  .menu-toggle,
  .mobile-menu-toggle,
  .primary-navigation .menu-toggle{
    display:none !important;
  }
}

/* Mobile Overlay-Menü */
@media (max-width:960px){
  /* Nav als Overlay */
  .primary-navigation, .main-navigation{
    position: fixed;
    inset: 64px 0 0 0; /* unter Header */
    background: rgba(15,15,15,.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 999;
  }
  /* Menüliste vertikal */
  .primary-navigation ul.menu, .main-navigation ul.menu{
    flex-direction: column;
    gap: var(--pb-gap-3);
    padding: var(--pb-gap-5);
  }
  /* Sichtbar wenn geöffnet (.is-open oder .toggled) */
  .primary-navigation.is-open,
  .main-navigation.is-open,
  .primary-navigation.toggled,
  .main-navigation.toggled{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Fallback: falls Nav direkt auf Toggle folgt und aria-expanded genutzt wird */
  .menu-toggle[aria-expanded="true"] + .primary-navigation,
  .menu-toggle[aria-expanded="true"] + .main-navigation{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Body Scroll-Lock, wird per JS gesetzt */
  body.pb-nav-open{ overflow:hidden }

  /* kompaktere Header-Höhe mobil */
  .site-header .site-header-inner,
  .site-header .container,
  .site-header .wrap{
    padding-block: var(--pb-gap-3);
  }
}

/* Optional: transparenter Header über Hero */
.page-hero #masthead.site-header,
.page-hero .site-header{
  background: linear-gradient(180deg, rgba(15,15,15,.65), rgba(15,15,15,0));
  border-bottom-color: transparent;
}

/* ----------------------
   Breadcrumbs
   ---------------------- */
.breadcrumb,
.woocommerce-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap: var(--pb-gap-2);
  align-items:center;
  color: var(--pb-text-weak);
  font-size:14px;
  letter-spacing:.01em;
  margin-bottom: var(--pb-gap-4);
}
.breadcrumb a,
.woocommerce-breadcrumb a{
  color: var(--pb-text-weak);
  text-decoration:none;
  position:relative;
}
.breadcrumb a:hover,
.woocommerce-breadcrumb a:hover{ color: var(--pb-text) }
.breadcrumb a:hover::after,
.woocommerce-breadcrumb a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background: var(--pb-chartreuse);
}
.breadcrumb .separator,
.woocommerce-breadcrumb .separator,
.bc-sep{
  color: var(--pb-text-weak);
  margin: 0 var(--pb-gap-1);
}
.breadcrumb .current,
.woocommerce-breadcrumb .breadcrumb_last{ color: var(--pb-text) }

/* ----------------------
   Footer
   ---------------------- */
.site-footer{
  background: var(--pb-surface1);
  border-top: 1px solid var(--pb-border);
  color: var(--pb-text-weak);
}
.site-footer .container,
.site-footer .wrap,
.site-footer .footer-widgets{
  padding-block: var(--pb-gap-6);
}
.site-footer .widget-title{
  color: var(--pb-text);
  font-size:16px;
  margin-bottom: var(--pb-gap-3);
}
.site-footer .widget,
.site-footer .footer-column{ margin-bottom: var(--pb-gap-5) }
.site-footer a{ color: var(--pb-text-weak); text-decoration:none }
.site-footer a:hover{ color: var(--pb-text); text-decoration: underline }
.footer-cta, .newsletter-bar{
  background: var(--pb-black);
  border:1px solid var(--pb-border);
  border-radius:12px;
  padding: var(--pb-gap-4);
}
.footer-cta input[type="email"]{
  background: var(--pb-black);
  border:1px solid var(--pb-border);
  color: var(--pb-text);
  border-radius:10px;
}
.footer-legal{
  border-top:1px solid var(--pb-border);
  padding-top: var(--pb-gap-4);
  margin-top: var(--pb-gap-4);
  font-size:13px;
}

/* ----------------------
   Buttons
   ---------------------- */
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background: var(--pb-chartreuse);
  color: var(--pb-black);
  border:none;
  border-radius:8px;
  padding:.75rem 1rem;
  font-weight:600;
  transition:filter .15s ease, transform .02s ease;
}
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  filter:brightness(.96);
}
button:active,
.woocommerce a.button:active{
  transform: translateY(1px);
}

/* ----------------------
   Formulare
   ---------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea{
  background: var(--pb-black);
  border:1px solid var(--pb-border);
  color: var(--pb-text);
  border-radius:10px;
}
input::placeholder, textarea::placeholder{ color: var(--pb-text-weak) }

/* ----------------------
   Panels / Karten
   ---------------------- */
.card, .panel, .widget, .content-box, .wp-block-group{
  background: var(--pb-surface2);
  border:1px solid var(--pb-border);
  border-radius:16px;
}

/* Divider / Tabellen */
hr, .wp-block-separator{ border-color: var(--pb-border) }
table, table th, table td{ border-color: var(--pb-border) }

/* ----------------------
   WooCommerce
   ---------------------- */
/* Produktlisten */
.woocommerce ul.products li.product{
  background: var(--pb-surface1);
  border:1px solid var(--pb-border);
  border-radius:12px;
  padding:16px;
}
.woocommerce ul.products li.product .price{ color: var(--pb-text) }
.woocommerce ul.products li.product .star-rating{ filter:brightness(1.1) }

/* Produktdetail */
.woocommerce div.product .summary,
.woocommerce div.product .images{
  background: var(--pb-surface1);
  border:1px solid var(--pb-border);
  border-radius:12px;
  padding:16px;
}

/* Woo Breadcrumb fallback */
.woocommerce-breadcrumb{ color: var(--pb-text-weak) }
.woocommerce-breadcrumb a{ color: var(--pb-text-weak) }
.woocommerce-breadcrumb a:hover{ color: var(--pb-text) }

/* ----------------------
   Utility Badges
   ---------------------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(212,244,75,.08);
  border:1px solid var(--pb-border);
  color: var(--pb-text);
  padding:6px 10px; border-radius:999px; font-size:13px;
}

/* ----------------------
   Coming-Soon (Template)
   ---------------------- */
.pbcs{ color:var(--pb-text); background:var(--pb-black); padding:24px 0 }
.pbcs .wrap{ max-width:1100px; margin:0 auto; padding:0 24px }
.pbcs .hero{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center }
.pbcs .card{ background:linear-gradient(180deg, rgba(212,244,75,.04) 0%, rgba(22,22,22,.9) 100%);
  border:1px solid var(--pb-border); border-radius:16px; padding:32px;
  box-shadow:0 0 0 1px rgba(212,244,75,.07) inset; }
.pbcs .topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.pbcs .brand{ font-weight:800; letter-spacing:.02em; }
.pbcs .tag{ display:inline-flex; align-items:center; gap:8px; background:rgba(212,244,75,.08);
  border:1px solid var(--pb-border); color:var(--pb-text); padding:8px 10px; border-radius:999px; font-size:13px }

.pbcs h1{ margin:0 0 10px; font-size:42px; line-height:1.1; letter-spacing:.01em }
.pbcs .h3{ margin:0 0 8px; font-size:24px; line-height:1.3 }
.pbcs .sub{ color:var(--pb-text-weak); font-size:16px; line-height:1.6; margin:0 }

.pbcs .countdown{ display:flex; gap:16px; margin-top:20px; flex-wrap:wrap }
.pbcs .unit{ background:var(--pb-surface2); border:1px solid var(--pb-border); border-radius:12px; padding:16px; min-width:110px; text-align:center }
.pbcs .num{ font-size:32px; font-weight:800 }
.pbcs .label{ font-size:12px; color:var(--pb-text-weak); letter-spacing:.08em; text-transform:uppercase }

.pbcs .cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap }
.pbcs .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:10px;
  border:1px solid var(--pb-border); text-decoration:none; cursor:pointer; font-weight:600; color:var(--pb-text) }
.pbcs .btn--pri{ background:var(--pb-chartreuse); color:var(--pb-black); border-color:transparent }
.pbcs .btn--pri:hover{ filter:brightness(.96) }
.pbcs .btn:focus-visible{ outline:var(--pb-focus-ring); outline-offset:2px }

.pbcs .panel{ background:var(--pb-surface1); border:1px solid var(--pb-border); border-radius:16px; padding:24px }
.pbcs .badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.pbcs .badge{ display:flex; align-items:center; gap:10px; color:var(--pb-text-weak); font-size:13px }
.pbcs .dot{ width:10px; height:10px; border-radius:50%; background:var(--pb-chartreuse); box-shadow:0 0 0 4px rgba(212,244,75,.12) }

.pbcs .footer{ margin-top:28px; border-top:1px solid var(--pb-border); padding-top:18px;
  display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap }
.pbcs .newsletter{ display:flex; gap:8px }
.pbcs input[type="email"]{ background:var(--pb-black); border:1px solid var(--pb-border); color:var(--pb-text);
  padding:10px 12px; border-radius:10px; min-width:260px }
.pbcs input[type="email"]::placeholder{ color:var(--pb-text-weak) }

/* ----------------------
   Media Queries allgemein
   ---------------------- */
@media (max-width:960px){
  .pbcs .hero{ grid-template-columns:1fr }
}


/* --- Header Feinschliff (Grid/Abstände) --- */
.site-header .site-header-inner,
.site-header .header-inner,
.site-header .header-main{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* Brand | Nav | Actions */
  align-items:center;
  gap: var(--pb-gap-4);
}

/* Sicherstellen, dass Logo/Actions korrekt ausgerichtet sind */
.site-header .site-branding{ display:flex; align-items:center; gap:12px }
.site-header .header-actions,
.site-header .site-header-cart{ display:flex; justify-content:flex-end; gap:12px; align-items:center }

/* --- Footer Feinschliff --- */
.site-footer .footer-widgets{ row-gap: var(--pb-gap-5) }
.site-footer .footer-legal{
  border-top: 1px solid var(--pb-border);
  padding-top: var(--pb-gap-4);
  margin-top: var(--pb-gap-4);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* --- Countdown (Shortcode) --- */
.pb-counter{ padding: var(--pb-gap-6) 0 }
.pb-counter__wrap{ max-width: var(--pb-max); margin: 0 auto; padding: 0 24px }
.pb-counter__title{ margin: 0 0 6px; font-size: 36px; line-height: 1.15 }
.pb-counter__sub{ margin: 0 0 var(--pb-gap-4); color: var(--pb-text-weak) }
.pb-counter__grid{ display:flex; flex-wrap:wrap; gap: var(--pb-gap-3) }
.pb-counter__unit{
  background: var(--pb-surface2);
  border: 1px solid var(--pb-border);
  border-radius: 12px;
  min-width: 120px;
  padding: 16px;
  text-align: center;
}
.pb-counter__num{ font-size: 34px; font-weight: 800 }
.pb-counter__lab{ font-size: 12px; color: var(--pb-text-weak); letter-spacing: .08em; text-transform: uppercase }
.pb-counter__cta{ margin-top: var(--pb-gap-3) }

/* --- Messe Blog Card (Shortcode) --- */
.pb-card{
  background: var(--pb-surface1);
  border: 1px solid var(--pb-border);
  border-radius: 16px;
  padding: var(--pb-gap-4);
}
.pb-card__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px }
.pb-card__tag{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(212,244,75,.08);
  border: 1px solid var(--pb-border);
  color: var(--pb-text);
  padding: 6px 10px; border-radius: 999px; font-size: 13px;
}
.pb-card__date{ color: var(--pb-text-weak); font-size: 13px }
.pb-card__title{ margin: 6px 0 8px; font-size: 24px; line-height: 1.25 }
.pb-card__title a{ color: var(--pb-text); text-decoration: none }
.pb-card__title a:hover{ text-decoration: underline }
.pb-card__excerpt{ color: var(--pb-text-weak); margin: 0 0 var(--pb-gap-3) }
.pb-card__cta .btn{ border: 1px solid var(--pb-border); border-radius: 10px; padding: 10px 14px }

/* --- Mobile Anpassungen --- */
@media (max-width: 960px){
  .pb-counter__title{ font-size: 28px }
  .pb-counter__unit{ min-width: 100px }
}


/* DEBUG: kurz aktiv lassen */
.site-header { outline: 2px dashed #d4f44b66 }
.site-header nav ul.menu > li > a { outline: 1px dotted #d4f44b44 }