/* =========================
   WJ Design Tokens (anpassen)
   ========================= */
:root{
  --wj-container: 1200px;
  --wj-gutter: 24px;
  --wj-box-padding: clamp(24px, 3vw, 32px); /* Einheitlicher Abstand Box-Rand → Inhalt, alle 4 Seiten */
  --wj-font: 'Josefin Sans', sans-serif;

  --wj-bg: #0f0f10;
  --wj-surface: rgba(255,255,255,.06);
  --wj-text: rgba(255,255,255,.92);
  --wj-muted: rgba(255,255,255,.72);

  --wj-accent: #d8c3a5; /* Brand-Akzent */
  --wj-accent-2: #ffffff;

  --wj-radius: 18px;
  --wj-radius-lg: 28px;

  --wj-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Standard-Schrift: Josefin Sans (global, alle Unterseiten) */
body {
  font-family: var(--wj-font);
}

/* =========================
   Baseline / Scope
   ========================= */
.wj { color: var(--wj-text); }
.wj * { box-sizing: border-box; }

/* Startseite + Köln: Theme-Seitentitel ausblenden (Hero hat eigenen H1).
   NUR innerhalb #main — #site-header (Hauptmenü) explizit ausgenommen */
body.home #main header.page-header,
body.home #main .page-header,
body.home #main .entry-header,
body.wj-koeln-page #main header.page-header,
body.wj-koeln-page #main .page-header,
body.wj-koeln-page #main .entry-header { display: none !important; }

/* body#error-page: WordPress-Fehlerlayout überschreiben (385px Margin verursacht leeren linken Bereich) */
body.home#error-page,
body#error-page.home,
body#error-page.wj-ueber-page,
body#error-page.wj-workshop-page,
body#error-page.wj-kontakt-page,
body#error-page.blog,
body#error-page.single {
  margin: 0 !important;
  padding: 0 !important;
}

/* 404-Seite: WJ-Layout, volle Breite wie Startseite */
body.error404 #right-sidebar,
body.error404 #left-sidebar,
body.error404 #sidebar,
body.error404 .widget-area { display: none !important; }
body.error404 #primary,
body.error404 .content-area,
body.error404 #content,
body.error404 .main-content-area { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.error404 #outer-wrap,
body.error404 #wrap { width: 100% !important; max-width: 100% !important; }
body.error404 #content-wrap,
body.error404 #content-wrap.container {
  max-width: 1100px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  box-sizing: border-box !important;
  border: none !important;
}
body.error404 #main header.page-header,
body.error404 #main .page-header,
body.error404 #main .entry-header { display: none !important; }
body.error404 #main,
body.error404 .site-main,
body.error404 .site-content { width: 100% !important; max-width: 100% !important; }
body.error404.content-left-sidebar #content-wrap,
body.error404.content-right-sidebar #content-wrap,
body.error404 #main #content-wrap { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }

/* Kommentare ausblenden, wenn 0 (Blog + Einzelbeiträge) */
.has-no-comments .meta-comments {
  display: none !important;
}

/* Blog-Archiv & Einzelbeiträge: volle Breite, Content nicht zu schmal */
body.blog #content-wrap,
body.single #content-wrap,
body.blog .content-area,
body.single .content-area,
body.blog #content,
body.single #content {
  width: 100% !important;
  max-width: 100% !important;
}
body.blog #content-wrap,
body.single #content-wrap {
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  box-sizing: border-box !important;
}
body.blog #right-sidebar,
body.blog #left-sidebar,
body.single #right-sidebar,
body.single #left-sidebar {
  display: none !important;
}

/* Startseite + Köln: OceanWP full width — kein Sidebar, Content zentriert (1100px) */
body.home #right-sidebar,
body.home #left-sidebar,
body.home #sidebar,
body.home .widget-area,
body.wj-koeln-page #right-sidebar,
body.wj-koeln-page #left-sidebar,
body.wj-koeln-page #sidebar,
body.wj-koeln-page .widget-area { display: none !important; }
body.home #primary,
body.home .content-area,
body.home #content,
body.home .main-content-area,
body.wj-koeln-page #primary,
body.wj-koeln-page .content-area,
body.wj-koeln-page #content,
body.wj-koeln-page .main-content-area { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.home #outer-wrap,
body.home #wrap,
body.wj-koeln-page #outer-wrap,
body.wj-koeln-page #wrap {
  width: 100% !important;
  max-width: 100% !important;
}
body.home #content-wrap,
body.home #content-wrap.container,
body.wj-koeln-page #content-wrap,
body.wj-koeln-page #content-wrap.container {
  max-width: 1100px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-right: none !important;
}

/* Graue Linie rechts entfernen */
body.home #primary,
body.home #primary.content-area,
body.home #wrap,
body.home #outer-wrap,
body.wj-koeln-page #primary,
body.wj-koeln-page #primary.content-area,
body.wj-koeln-page #wrap,
body.wj-koeln-page #outer-wrap {
  border: none !important;
  border-right: none !important;
}
/* OceanWP Layout: kein Platz für ausgeblendete Sidebar, symmetrischer Abstand */
body.home.content-left-sidebar #primary,
body.home.content-right-sidebar #primary,
body.home.content-left-sidebar .content-area,
body.home.content-right-sidebar .content-area,
body.home #main .content-area,
body.wj-koeln-page.content-left-sidebar #primary,
body.wj-koeln-page.content-right-sidebar #primary,
body.wj-koeln-page.content-left-sidebar .content-area,
body.wj-koeln-page.content-right-sidebar .content-area,
body.wj-koeln-page #main .content-area {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* #content-wrap ausgenommen – bleibt zentriert (margin-inline: auto in wj-workshops) */
body.home #main,
body.home .site-main,
body.home .site-content,
body.wj-koeln-page #main,
body.wj-koeln-page .site-main,
body.wj-koeln-page .site-content {
  width: 100% !important;
  max-width: 100% !important;
}
body.home .wj-container,
body.home .wj-hero__inner,
body.wj-koeln-page .wj-container,
body.wj-koeln-page .wj-hero__inner {
  max-width: min(1100px, 100%) !important;
  width: 100% !important;
}

/* Hero: Inner füllt Container, Container zentriert */
body.home .wj-hero .wj-container > .wj-hero__inner,
body.wj-koeln-page .wj-hero .wj-container > .wj-hero__inner {
  width: 100%;
}

/* Sektionsköpfe auf Startseite zentrieren */
body.home .wj-section__head {
  text-align: center;
}
body.home .wj-section__head .wj-sub {
  margin-inline: auto;
}

.wj-container{
  width: min(var(--wj-container), 100%);
  margin-inline: auto;
  padding-inline: var(--wj-gutter);
}

/* Typo */
.wj-eyebrow{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--wj-muted);
  margin: 0 0 10px;
}
.wj-eyebrow-link{
  color: inherit;
  text-decoration: none;
}
.wj-eyebrow-link:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wj-hero--light .wj-eyebrow-link{
  color: rgba(31,41,55,.62);
}
.wj-hero--light .wj-eyebrow-link:hover{
  color: var(--wj-accent);
}

.wj-h1{
  margin: 0 0 12px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.wj-lead{
  margin: 0 0 22px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--wj-muted);
  max-width: 52ch;
}

/* Buttons */
.wj-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;
}

.wj-btn:hover{ transform: translateY(-1px); }

.wj-btn--primary{
  background: var(--wj-accent);
  color: #151515;
  border-color: rgba(0,0,0,.08);
}

.wj-btn--ghost{
  background: transparent;
  color: var(--wj-text);
  border-color: rgba(255,255,255,.28);
}

.wj-btn:focus-visible{
  outline: 2px solid var(--wj-accent-2);
  outline-offset: 3px;
}

/* =========================
   HERO
   ========================= */
.wj-hero{
  position: relative;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(216,195,165,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(255,255,255,.10), transparent 55%),
              var(--wj-bg);
  padding: clamp(28px, 4vw, 56px) 0;
  overflow: hidden;
}

.wj-hero__inner{
  position: relative;
}

.wj-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  min-height: clamp(420px, 52vh, 640px);
}

/* min-width: 0 verhindert Grid-Overflow (Bild/Text überschneiden sich sonst) */
.wj-hero__copy,
.wj-hero__media{
  min-width: 0;
}

.wj-hero__copy{
  position: relative;
  z-index: 2;
}

.wj-hero__sub{
  margin: 0 0 12px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wj-text);
}

.wj-hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.wj-hero__badges{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wj-badge{
  font-size: 12px;
  color: var(--wj-muted);
  background: var(--wj-surface);
  border: 1px solid rgba(255,255,255,.12);
  padding: 9px 12px;
  border-radius: 999px;
}

/* Media card */
.wj-hero__media{
  position: relative;
  border-radius: var(--wj-radius-lg);
  overflow: hidden;
  box-shadow: var(--wj-shadow);
  min-height: 360px;
  isolation: isolate;
}

.wj-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.wj-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.10) 55%, rgba(0,0,0,.35));
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px){
  .wj-hero__grid{
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .wj-hero__media{
    order: -1;
    min-height: 260px;
  }

  .wj-hero--light .wj-hero__grid{
    padding-inline-end: 0;
  }
  .wj-hero--light .wj-hero__media{
    margin-inline-end: 0 !important;
  }

  .wj-lead{
    max-width: 60ch;
  }
}

/* Mobile: kleinere Abstände, Touch-freundlich */
@media (max-width: 600px) {
  :root {
    --wj-gutter: 16px;
  }
  .wj-hero__media {
    min-height: 200px;
  }
  .wj-hero--light .wj-hero__inner {
    padding: 18px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --wj-gutter: 16px;
  }
  .wj-section {
    margin-block: clamp(16px, 4vw, 28px);
  }
  .wj-h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .wj-h2 {
    font-size: clamp(20px, 5vw, 26px) !important;
  }
}

/* =========================
   HERO – Light Variant (wie dein weißes Beispiel)
   ========================= */

.wj-hero--light{
  /* überschreibt nur innerhalb dieses Heros */
  --wj-text: #1f2937;
  --wj-muted: rgba(31,41,55,.72);
  --wj-surface: rgba(15,23,42,.04);
  --wj-shadow: 0 18px 60px rgba(15,23,42,.08);
}

/* außen: kein dunkler Hintergrund */
.wj-hero--light.wj-hero{
  background: transparent;
  padding: clamp(18px, 3vw, 34px) 0;
}

/* innen: weißes Panel mit großer Rundung (kein Rahmen) */
.wj-hero--light .wj-hero__inner{
  background: #fff;
  border: none;
  border-radius: 34px;
  padding: var(--wj-box-padding);
}

/* OceanWP-sicher: Farben explizit setzen */
.wj-hero--light .wj-h1{ color: var(--wj-text); }
.wj-hero--light .wj-hero__sub{ color: rgba(31,41,55,.85); }
.wj-hero--light .wj-eyebrow{ color: rgba(31,41,55,.62); }
.wj-hero--light .wj-lead{ color: var(--wj-muted); }

/* Bild-Karte: gleichmäßiger Abstand, Bild wird nicht abgeschnitten */
.wj-hero--light .wj-hero__grid{
  gap: clamp(18px, 3vw, 34px);
}
.wj-hero--light .wj-hero__media{
  box-shadow: none;
  border: none;
  background: #f3f4f6;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  min-width: 0;
  min-height: 200px;
  border-radius: 20px;
}
.wj-hero--light .wj-hero__overlay{ display: none; }

/* Bild vollständig sichtbar – kein Abschneiden an den Rändern */
.wj-hero--light .wj-hero__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transform: none;
}

/* Buttons: Primary = Accent, Ghost = Border */
.wj-hero--light .wj-btn--primary{
  background: var(--wj-accent);
  color: #fff;
  border-color: transparent;
}
.wj-hero--light .wj-btn--ghost{
  background: transparent;
  color: var(--wj-text);
  border-color: rgba(15,23,42,.20);
}

/* Badges: helle Chips */
.wj-hero--light .wj-badge{
  color: rgba(31,41,55,.80);
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.10);
}

/* =========================
   Newsletter Danke — Erfolgsseite (UI/UX optimiert)
   ========================= */
.wj-newsletter-danke {
  --wj-text: #1f2937;
  --wj-muted: rgba(31,41,55,.72);
  width: 100%;
  padding: clamp(48px, 8vw, 80px) 0;
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.wj-newsletter-danke .wj-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.wj-newsletter-danke__card {
  background: #fff;
  border-radius: 28px;
  padding: clamp(36px, 5vw, 56px);
  text-align: center !important;
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.06);
  transition: box-shadow .25s ease;
}
.wj-newsletter-danke__card:hover {
  box-shadow: 0 24px 72px rgba(15,23,42,.1);
}
.wj-newsletter-danke__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wj-muted);
  text-align: center;
}
.wj-newsletter-danke__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  color: var(--wj-accent, #d8c3a5);
}
.wj-newsletter-danke__icon svg {
  width: 100%;
  height: 100%;
}
.wj-newsletter-danke__title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--wj-text);
  text-align: center;
}
.wj-newsletter-danke__text {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--wj-muted);
  max-width: 42ch;
  margin-inline: auto;
  text-align: center;
}
.wj-newsletter-danke__intro {
  margin: 0 0 20px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--wj-text);
  font-weight: 500;
  text-align: center;
}
.wj-newsletter-danke__material {
  margin-bottom: 28px;
  padding: 24px;
  background: rgba(216, 195, 165, 0.12);
  border-radius: var(--wj-radius-lg);
  border: 1px solid rgba(216, 195, 165, 0.35);
}
.wj-newsletter-danke__material .wj-btn--material {
  padding: 16px 32px;
  font-size: 1.2rem;
  font-weight: 600;
  min-width: 260px;
  box-shadow: 0 4px 16px rgba(216, 195, 165, 0.35);
}
.wj-newsletter-danke__material .wj-btn--material:hover {
  box-shadow: 0 6px 24px rgba(216, 195, 165, 0.45);
}
.wj-newsletter-danke__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.wj-newsletter-danke__actions .wj-btn {
  min-width: 140px;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.wj-newsletter-danke__actions .wj-btn:hover {
  transform: translateY(-1px);
}
.wj-newsletter-danke__actions .wj-btn--primary {
  background: var(--wj-accent, #d8c3a5);
  color: #fff;
  border-color: transparent;
}
.wj-newsletter-danke__actions .wj-btn--primary:hover {
  background: #c9b394;
}
.wj-newsletter-danke__actions .wj-btn--ghost {
  background: transparent;
  color: var(--wj-text);
  border-color: rgba(31,41,55,.25);
}
.wj-newsletter-danke__actions .wj-btn--ghost:hover {
  border-color: var(--wj-accent, #d8c3a5);
  color: var(--wj-accent, #d8c3a5);
}
.wj-newsletter-danke__actions .wj-btn:focus-visible {
  outline: 2px solid var(--wj-accent, #d8c3a5);
  outline-offset: 3px;
}
body.wj-newsletter-page .wj-newsletter-danke,
body.wj-newsletter-danke-page .wj-newsletter-danke {
  background: radial-gradient(1200px 600px at 50% 0%, rgba(216,195,165,.12), transparent 70%),
              #faf9f7;
}
body.wj-newsletter-danke-page #main .page-header,
body.wj-newsletter-danke-page #main .entry-header {
  display: none !important;
}
body.wj-newsletter-danke-page #content,
body.wj-newsletter-danke-page .site-content,
body.wj-newsletter-page .wj-newsletter-danke {
  text-align: center !important;
}
body.wj-newsletter-danke-page #main,
body.wj-newsletter-danke-page #content-wrap,
body.wj-newsletter-danke-page #primary,
body.wj-newsletter-danke-page #content,
body.wj-newsletter-danke-page .content-area,
body.wj-newsletter-danke-page .site-content,
body.wj-newsletter-danke-page article,
body.wj-newsletter-danke-page .entry-content {
  text-align: center !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.wj-newsletter-danke-page .wj-newsletter-danke p,
body.wj-newsletter-danke-page .wj-newsletter-danke h1,
body.wj-newsletter-danke-page .wj-newsletter-danke h2,
body.wj-newsletter-danke-page .wj-newsletter-danke .wj-newsletter-danke__card,
body.wj-newsletter-danke-page .wj-newsletter-danke .wj-container {
  text-align: center !important;
}
@media (max-width: 480px) {
  .wj-newsletter-danke__card {
    padding: 28px 24px;
  }
  .wj-newsletter-danke__material {
    padding: 20px 16px;
  }
  .wj-newsletter-danke__material .wj-btn--material {
    min-width: 100%;
  }
  .wj-newsletter-danke__actions .wj-btn {
    min-width: 100%;
  }
}

/* =========================
   SECTIONS (shared)
   ========================= */

:root{
  --wj-gap: clamp(28px, 4vw, 56px);
  --wj-border: rgba(15,23,42,.10);
  --wj-soft: rgba(15,23,42,.03);
}

/* Section spacing */
.wj-section{ margin-block: var(--wj-gap); }
.wj-section__head{ margin-bottom: 18px; }
.wj-h2{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 30px);
}
.wj-h2-sub{
  margin: 0 0 14px;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  color: var(--wj-text);
  line-height: 1.5;
}
.wj-sub{
  margin: 0;
  color: var(--wj-muted);
  max-width: 70ch;
  line-height: 1.6;
}

/* Grids */
.wj-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}
@media (max-width: 900px){
  .wj-grid{ grid-template-columns: 1fr; }
}

/* Card component — einheitliches Layout für Kollektionen, Events, Blog */
/* Wrapper-Link (Workshop-Übersicht): display:contents → article bleibt Grid-Kind */
.wj-card__link {
  display: contents;
  text-decoration: none;
  color: inherit;
}
.wj-card__link:hover .wj-card {
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}
.wj-card__link:hover .wj-link,
.wj-card__link:hover .wj-card__cta {
  text-decoration: underline;
}

/* Stretched-Link (Startseite): Link innen, Karte bleibt Grid-Kind */
.wj-card__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.wj-card{
  position: relative;
  border: 1px solid var(--wj-border);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wj-card__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
  min-height: 0;
}
.wj-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}
/* Stretched-Link: Hover auf Karte = Hover auf Link → wj-link unterstreichen */
.wj-card:hover .wj-link {
  text-decoration: underline;
}
.wj-card__img{
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 0;
}
.wj-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.wj-kicker{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(31,41,55,.60);
  margin: 0 0 6px;
}
.wj-card__title{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--wj-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wj-card__text{
  flex: 1;
  margin: 0 0 12px;
  color: var(--wj-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Link immer am unteren Rand der Karte (einheitliche Höhe) */
.wj-card__body .wj-link{
  margin-top: auto;
  padding-top: 4px;
}
.wj-link{
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  text-decoration: none;
  color: var(--wj-text);
  font-weight: 600;
}
.wj-link:hover{ text-decoration: underline; }

/* Split layout (Why / Newsletter) */
.wj-split{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: center; /* Zentriert Inhalt vertikal → gleichmäßige Abstände oben/unten */
}
@media (max-width: 900px){
  .wj-split{ grid-template-columns: 1fr; }
}

/* Why list */
.wj-whylist{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 900px){
  .wj-whylist{ grid-template-columns: 1fr; }
}
.wj-whyitem{
  border: 1px solid var(--wj-border);
  background: var(--wj-soft);
  border-radius: 18px;
  padding: 12px 12px 12px;
}
.wj-whyt{ margin: 0 0 6px; font-weight: 700; color: var(--wj-text); }
.wj-whyd{ margin: 0; color: var(--wj-muted); line-height: 1.55; }

.wj-why-media{
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--wj-border);
  background: #fff;
}
.wj-why-media img{ width: 100%; height: auto; display: block; }
.wj-bubble{
  padding: 14px 14px 16px;
  color: var(--wj-text);
  font-weight: 600;
  border-top: 1px solid var(--wj-border);
}

.wj-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.wj-badge2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--wj-border);
  background: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  color: rgba(31,41,55,.85);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.wj-badge2:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
}
.wj-badge2 svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* Blog head row */
.wj-headrow{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
@media (max-width: 900px){
  .wj-headrow{ flex-direction: column; align-items: start; }
}

/* Newsletter & Hinweise */
.wj-notice {
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 1em;
  font-size: 15px;
}
.wj-notice--success {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}
.wj-notice--error {
  background: #ffebee;
  color: #b71c1c;
  border: 1px solid #ef9a9a;
}

/* Newsletter: Bestätigung im Formular-Grid über volle Breite, sauber ausgerichtet */
.wj-form .wj-notice {
  grid-column: 1 / -1;
  margin-top: 0;
  margin-bottom: 12px;
  order: -1;
}

/* Newsletter */
.wj-nl{
  border: 1px solid var(--wj-border);
  border-radius: 28px;
  background: #fff;
  padding: var(--wj-box-padding);
  display: block;
  min-height: unset;
}
.wj-nl .wj-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
  max-width: 380px;
}
.wj-nl .wj-form .wj-in,
.wj-nl .wj-form .wj-submit,
.wj-nl .wj-form .wj-turnstile-wrap {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Newsletter-Consent: Label umschließt alles, Klick auf Text oder Box aktiviert Checkbox */
/* Honeypot: für Bots sichtbar, für Menschen ausgeblendet */
/* Cloudflare Turnstile: Wrapper-Methode für abgerundete Ecken (iframe lässt sich nicht direkt stylen) */
.wj-form .wj-turnstile-wrap {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin: 0.5em 0;
  min-height: 65px;
  box-sizing: border-box;
  /* Wrapper mit overflow + border-radius = Standard-Lösung für iframe-Ecken */
  border-radius: 14px;
  overflow: hidden;
  transform: translateZ(0);
}
.wj-turnstile-wrap .wj-turnstile-container {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.wj-turnstile-wrap iframe {
  display: block;
  border: none;
}
/* Footer */
.wj-footer-newsletter-form .wj-turnstile-wrap {
  margin: 0.35em 0;
  border-radius: 10px;
  min-height: 60px;
}
@media (max-width: 480px) {
  .wj-turnstile-wrap {
    margin: 0.4em 0;
    border-radius: 12px;
  }
  .wj-footer-newsletter-form .wj-turnstile-wrap {
    border-radius: 8px;
  }
}

.wj-newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.wj-form .wj-newsletter-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 1.5em;
  cursor: pointer;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.5;
  color: var(--wj-muted);
}
.wj-newsletter-consent__box {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.wj-newsletter-consent__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.wj-newsletter-consent__box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  pointer-events: none;
}
.wj-newsletter-consent__box:has(.wj-newsletter-consent__input:checked)::before,
.wj-newsletter-consent__box:has(input:checked)::before {
  background-color: #d8c3a5;
  border-color: #d8c3a5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.wj-newsletter-consent__input:focus-visible {
  outline: 2px solid #d8c3a5;
  outline-offset: 2px;
}
.wj-newsletter-consent__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 600px){
  .wj-nl .wj-form{ grid-template-columns: 1fr; }
}
.wj-nl .wj-in{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--wj-border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
}
.wj-nl .wj-submit{
  border-radius: 14px;
  padding: 12px 20px;
  border: 1px solid transparent;
  background: var(--wj-accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.wj-nl .wj-submit:hover{ opacity: .92; }

/* Newsletter-Landing: Standalone-Formular — kompakteres Layout, weniger Whitespace */
.wj-nl--standalone {
  width: 100%;
  max-width: none;
  padding: clamp(20px, 2.5vw, 28px);
}
.wj-nl--standalone .wj-h2 {
  margin-bottom: 0.35em;
  padding: 0;
}
.wj-nl--standalone .wj-sub {
  padding: 0;
}
.wj-nl--standalone .wj-form {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  margin-top: -1em;
  gap: 16px;
}
.wj-nl--standalone .wj-form .wj-newsletter-consent {
  margin-top: 1em;
}
.wj-nl--standalone .wj-submit {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

/* Newsletter-Formular im Hero: unter dem Bild, volle Breite */
.wj-nl--in-hero {
  margin-top: 1.5em;
  padding: 0;
  border: none;
}
.wj-nl--in-hero .wj-form {
  margin-top: 0;
}
/* Volle Breite: E-Mail + Button in einer Zeile */
.wj-nl--full-width {
  width: 100%;
  max-width: none;
}
.wj-nl--full-width .wj-form {
  grid-template-columns: 1fr;
  max-width: none;
  gap: 12px;
}
.wj-nl--full-width .wj-submit {
  width: 100%;
  min-width: 0;
}

/* Trust-Box: wie Startseite „Sicherheit & Vertrauen“ (wj-trust) */
.wj-trust-box {
  background: #fff;
  border: 1px solid var(--wj-border);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
}

/* Trust-Liste: Grid wie wj-tgrid (2×2), Karten wie wj-titem */
.wj-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.wj-trust-list__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vw, 18px);
  background: var(--wj-soft);
  border: 1px solid var(--wj-border);
  border-radius: 16px;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--wj-text);
}
/* Icon-Box wie wj-ticon (weiß, Rahmen, abgerundet) */
.wj-trust-list__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--wj-border);
  border-radius: 12px;
  color: var(--wj-accent);
}
.wj-trust-list__icon svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .wj-trust-list {
    grid-template-columns: 1fr;
  }
  .wj-trust-box {
    padding: 24px 20px;
  }
}

.wj-nl-disclaimer{
  margin: 12px 0 0;
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.5;
  color: var(--wj-muted);
}
/* Letztes Kind ohne margin-bottom → gleichmäßige Abstände in der Box */
.wj-nl .wj-split > div > *:last-child,
.wj-hero__copy > *:last-child {
  margin-bottom: 0 !important;
}

/* Einheitliche Box-Abstände: Direktes Kind hat keine margin zum Box-Rand */
.wj-hero__inner > *:first-child,
.wj-nl > *:first-child,
.wj-cta-box > *:first-child,
.wj-eckdaten-box > *:first-child,
.wj-package > *:first-child,
.wj-contact-form > *:first-child {
  margin-top: 0 !important;
}
.wj-hero__inner > *:last-child,
.wj-nl > *:last-child,
.wj-cta-box > *:last-child,
.wj-eckdaten-box > *:last-child,
.wj-package > *:last-child,
.wj-contact-form > *:last-child {
  margin-bottom: 0 !important;
}
.wj-nl-disclaimer .wj-link{ font-size: inherit; }
/* Newsletter-Bild: festes 16:10, Bild füllt den Rahmen */
.wj-nl .wj-why-media{
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.wj-nl .wj-why-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: Mobile quick CTAs */
.wj-mcta{
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  display: none;
  gap: 10px;
  z-index: 999;
}
.wj-mcta a{
  flex: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 12px;
  border: 1px solid var(--wj-border);
  background: #fff;
  color: var(--wj-text);
  font-weight: 800;
}
.wj-mcta a.wj-mcta--primary{
  background: var(--wj-accent);
  color: #fff;
  border-color: transparent;
}
@media (max-width: 900px){
  .wj-mcta{ display: flex; }
}

/* =========================
   GLOBAL DEFAULT: Light Tokens (Fix für weiße Schrift)
   ========================= */
.wj{
  --wj-bg: #ffffff;
  --wj-text: #1f2937;
  --wj-muted: rgba(31,41,55,.72);
  --wj-surface: rgba(15,23,42,.03);
  --wj-border: rgba(15,23,42,.10);
  --wj-shadow: 0 18px 60px rgba(15,23,42,.08);

  color: var(--wj-text);
}

/* =========================
   SICHERHEIT & VERTRAUEN (Trust) — Lesbar auf allen Geräten
   ========================= */
.wj-spacer{
  margin-top: clamp(24px, 4vw, 40px);
  display: block;
}

.wj-trust{
  border: 1px solid var(--wj-border);
  border-radius: 24px;
  background: #fff;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
}

.wj-trust .wj-section__head{
  margin-bottom: 28px;
}

.wj-trust .wj-section__head .wj-h2{
  margin-bottom: 10px;
  font-size: clamp(22px, 2.5vw, 28px);
}

.wj-trust .wj-section__head .wj-sub{
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
}

/* 3 Karten — Grid, gleiche Höhe (an größter orientiert), Icons mittig */
.wj-tgrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.wj-titem{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vw, 18px);
  background: var(--wj-soft);
  border: 1px solid var(--wj-border);
  border-radius: 16px;
}

.wj-ticon{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--wj-border);
  border-radius: 12px;
}

.wj-ticon svg{
  width: 24px;
  height: 24px;
}

.wj-titem > div:last-child{
  flex: 1;
  min-width: 0;
}

.wj-tt{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.3;
  color: var(--wj-text);
}

.wj-tx{
  margin: 0 !important;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--wj-muted);
}

/* 4 Badges — Flex, jede Bubble passt sich dem Text an, Icon+Text nebeneinander */
.wj-trust .wj-badges{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.5vw, 16px);
  justify-content: center;
}

/* Gutenberg fügt oft leere <p> zwischen Blöcken ein → ausblenden */
.wj-trust .wj-badges p:empty{
  display: none !important;
}

/* <br> in Badges entfernen → Icon und Text nebeneinander statt untereinander */
.wj-trust .wj-badges .wj-badge2 br{
  display: none !important;
}

.wj-trust .wj-badges .wj-badge2{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2vw, 20px);
  font-size: clamp(14px, 1.2vw, 15px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  background: #fff;
  border: 1px solid var(--wj-border);
  border-radius: 999px;
  color: rgba(31,41,55,.9);
}

.wj-trust .wj-badges .wj-badge2 svg{
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0; 
  display: block;
}

/* Shield-Icon (SSL) wirkt optisch höher → Korrektur für saubere Ausrichtung */
.wj-trust .wj-badges .wj-badge2:first-child svg{
  transform: translateY(2px);
}

/* Alle Badge-Inhalte (Icon + Text) explizit mittig ausrichten */
.wj-trust .wj-badges .wj-badge2 > svg,
.wj-trust .wj-badges .wj-badge2 > span{
  align-self: center;
}

/* Tablet: 2 Spalten Karten, Badges umbrechen automatisch */
@media (max-width: 900px){
  .wj-tgrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Mobile: Trust-Abstand */
@media (max-width: 600px){
  .wj-trust{
    padding: 24px 20px;
  }
}

/* Warum: Bild bündig zur Boxen-Gruppe */
.wj-whygrid{ align-items: stretch; }

/* Overlay-Variante: Caption nimmt keine Extra-Höhe → perfekte Bündigkeit */
.wj-why-media--overlay{
  position: relative;
  height: 100%;
  display: block;                 /* überschreibt ggf. display:grid aus früheren Regeln */
  overflow: hidden;
}

.wj-why-media--overlay img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wj-why-media--overlay .wj-bubble{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--wj-border);
  color: var(--wj-text);
}

/* WHY: Bild exakt auf Höhe der linken Boxen (Desktop) */
@media (min-width: 901px){
  .wj-whygrid{
    --wj-why-right: 42.5%;  /* entspricht .85fr bei 1.15fr/.85fr */
    --wj-why-gap: 22px;     /* entspricht dem gap aus .wj-split */
    position: relative;

    /* überschreibt das 2-Spalten-Grid nur für WHY */
    grid-template-columns: 1fr;

    /* Platz für das absolut positionierte Bild reservieren */
    padding-right: calc(var(--wj-why-right) + var(--wj-why-gap));
  }

  /* rechtes Bild aus dem Layout nehmen, Höhe = Containerhöhe (= linke Boxen) */
  .wj-whygrid .wj-why-media{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--wj-why-right);
    margin: 0;
  }

  .wj-whygrid .wj-why-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile: wieder normal stapeln */
@media (max-width: 900px){
  .wj-whygrid{
    padding-right: 0;
    grid-template-columns: 1fr;
  }

  .wj-whygrid .wj-why-media{
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: 100%;
    margin-top: 16px;
  }

  .wj-whygrid .wj-why-media img{
    height: auto;
  }
}

/* WHY: Header-Abstand so setzen, dass Grid (Boxen) direkt danach beginnt */
.wj-whyhead{
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* wichtig: wj-section__head könnte woanders margin setzen – hier erzwingen */
.wj-whyhead.wj-section__head{
  margin-bottom: clamp(18px, 2.2vw, 26px) !important;
}

/* WHY: Boxen starten bündig oben (damit Bild + Boxen top-alignen) */
.wj-whygrid .wj-whylist{
  margin-top: 0;
}

/* =========================
   WJ – WooCommerce Blocks: Produkte nach Schlagwort (clean, ohne Warenkorb)
   Scope: nur innerhalb .wj-woo
   Datei: /wp-content/themes/oceanwp-child/assets/css/wj-components.css
   ========================= */

/* Grid-Container (Woo Blocks) */
.wj-woo .wc-block-grid__products,
.wj-woo .wp-block-woocommerce-product-template{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px){
  .wj-woo .wc-block-grid__products,
  .wj-woo .wp-block-woocommerce-product-template{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px){
  .wj-woo .wc-block-grid__products,
  .wj-woo .wp-block-woocommerce-product-template{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .wj-woo .wc-block-grid__products,
  .wj-woo .wp-block-woocommerce-product-template{
    grid-template-columns: 1fr;
  }
}

/* Card */
.wj-woo .wc-block-grid__product,
.wj-woo .wp-block-woocommerce-product-template li.product{
  border: 1px solid var(--wj-border);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  padding: 14px;

  display: grid;
  gap: 10px;
  align-content: start;

  transition: transform .15s ease, box-shadow .15s ease;
  text-align: center; /* wenn du links willst: entfernen */
}

.wj-woo .wc-block-grid__product:hover,
.wj-woo .wp-block-woocommerce-product-template li.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}

/* Bild */
.wj-woo .wc-block-grid__product-image img,
.wj-woo .wp-block-woocommerce-product-template li.product img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Sale-Badge — Kollektionen-Block (Startseite) */
.wj-woo .wc-block-grid__product-image,
.wj-woo .wp-block-woocommerce-product-template li.product > a:first-of-type {
  position: relative;
}
.wj-woo .wc-block-grid__product .onsale,
.wj-woo .wp-block-woocommerce-product-template li.product .onsale,
.wj-woo .wc-block-grid__product-image .onsale {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--wj-accent, #d8c3a5) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(216,195,165,.4) !important;
  z-index: 2 !important;
}

/* Titel */
.wj-woo .wc-block-grid__product-title{
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wj-text);
}

/* Preis */
.wj-woo .wc-block-grid__product-price,
.wj-woo .wp-block-woocommerce-product-template li.product .price{
  margin: 0;
  color: rgba(31,41,55,.80);
  font-weight: 700;
}

/* Links sauber */
.wj-woo .wc-block-grid__product a,
.wj-woo .wp-block-woocommerce-product-template a{
  text-decoration: none !important;
  color: inherit;
}

/* Add-to-cart / Buttons komplett ausblenden (inkl. "1 im Warenkorb") */
.wj-woo .wc-block-grid__product-add-to-cart,
.wj-woo .wc-block-grid__product-add-to-cart * ,
.wj-woo .wp-block-button,
.wj-woo .add_to_cart_button,
.wj-woo .wp-block-woocommerce-product-button{
  display: none !important;
}

/* Optional: Rating ausblenden */
.wj-woo .star-rating,
.wj-woo .wc-block-grid__product-rating{
  display: none !important;
}
/* Woo Ende */

/* Bild: immer gleich hoch, sauber */
.wj .wp-block-woocommerce-product-template li.product img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Titel */
.wj .wp-block-woocommerce-product-template li.product .wc-block-grid__product-title,
.wj .wp-block-woocommerce-product-template li.product .woocommerce-loop-product__title{
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wj-text);
}

/* Preis */
.wj .wp-block-woocommerce-product-template li.product .price{
  margin: 0;
  color: rgba(31,41,55,.80);
  font-weight: 700;
}

/* Links: keine Unterstreichungen/Theme-Styles */
.wj .wp-block-woocommerce-product-template a{
  text-decoration: none !important;
  color: inherit;
}

/* Optional: Rating ausblenden (ruhiger Look) */
.wj .wp-block-woocommerce-product-template .star-rating{
  display: none;
}

/* =========================
   WJ: Headings NICHT typografisch steuern
   -> OceanWP Customizer soll H1–H6 kontrollieren
   Datei: /wp-content/themes/oceanwp-child/assets/css/wj-components.css
   ========================= */

/* Falls du WJ-Klassen auf Überschriften nutzt (wj-h1, wj-h2, ...):
   Typo an Theme/Customizer zurückgeben
   AUSNAHME: Workshop-Seiten verwenden ihre eigenen Styles (siehe wj-workshops.css)
   Die Workshop-CSS hat höhere Spezifität und überschreibt diese Regeln automatisch */
body:not(.wj-workshop-page) .wj .wj-h1,
body:not(.wj-workshop-page) .wj .wj-h2{
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
}

/* Optional: wenn du weitere Heading-Klassen einführst */
body:not(.wj-workshop-page) .wj .wj-h3,
body:not(.wj-workshop-page) .wj .wj-h4,
body:not(.wj-workshop-page) .wj .wj-h5,
body:not(.wj-workshop-page) .wj .wj-h6{
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
}

/* Highlights: Subheadline unter H2 (wie wj-sub) */
.wj-woo .wj-sub{
  margin: 0 0 16px;
  color: var(--wj-muted);
  max-width: 70ch;
  line-height: 1.6;
}

/* Woo-Section: light tokens auch ohne .wj-Wrapper */
.wj-woo{
  --wj-text: #1f2937;
  --wj-muted: rgba(31,41,55,.72);
  --wj-border: rgba(15,23,42,.10);
  --wj-soft: rgba(15,23,42,.03);
}

/* Subline erzwingen (falls Theme/Inline rummischt) */
.wj-woo .wj-sub{
  color: var(--wj-muted) !important;
}


/* Contact Form 7 — Erfolgsmeldung global für alle Formulare stark hervorheben
   CF7 rendert .wpcf7-response-output INNERHALB des Formulars; bei Erfolg hat das Formular .sent */
.wpcf7-mail-sent-ok .wpcf7-response-output,
.wpcf7 .wpcf7-mail-sent-ok .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form[data-status="sent"] .wpcf7-response-output,
.wpcf7-form.sent + .wpcf7-response-output,
.wpcf7-form[data-status="sent"] + .wpcf7-response-output,
div.wpcf7-mail-sent-ok .wpcf7-response-output,
body .wpcf7-mail-sent-ok .wpcf7-response-output {
  display: block !important;
  visibility: visible !important;
  padding: 20px 24px !important;
  margin: 24px 0 16px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #14532d !important;
  background: #bbf7d0 !important;
  border: 2px solid #22c55e !important;
  border-left: 5px solid #15803d !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

/* =========================================================
   Workshopbedingungen (AGB) — Lesbare Rechtstexte
   ========================================================= */
.wj-agb-page .wj-section__head--left,
.wj-agb-page .wj-section__head {
  text-align: left !important;
}

.wj-agb-page .wj-section__head .wj-h1,
.wj-agb-page .wj-section__head .wj-sub {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Intro-Paragraph: margin: 0 auto überschreiben (wj-workshops zentriert sonst) */
body.wj-workshop-page .wj-agb-page .wj-section__head .wj-sub {
  text-align: left !important;
  margin: 0 !important;
  max-width: 100%;
}

.wj-agb-content {
  max-width: 720px;
  line-height: 1.65;
}

.wj-agb-section {
  margin-bottom: 2.5rem;
}

.wj-agb-section:last-child {
  margin-bottom: 0;
}

.wj-agb-section h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wj-border, rgba(15,23,42,.1));
  font-size: 1.25rem;
}

.wj-agb-section h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.1rem;
}

.wj-agb-section p {
  margin: 0 0 0.75rem;
}

.wj-agb-section ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.wj-agb-section li {
  margin-bottom: 0.5rem;
}

.wj-agb-section .wj-btn {
  margin-top: 0.5rem;
}

/* =========================================================
   Cookie Law Info — responsive Override (Plugin setzt width: 500px inline)
   ========================================================= */
@media (max-width: 560px) {
  #cookie-law-info-bar.cli-bar-popup {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    left: 50% !important;
    margin-left: calc(-50vw + 16px) !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   WJ Footer — moderner, schlanker Footer
   ========================================================= */
.wj-footer-fallback {
  padding: 32px 24px 28px;
  background: #faf9f7;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
  color: #5a5a5a;
}

.wj-footer__inner {
  max-width: min(700px, 100%);
  margin: 0 auto;
  text-align: center;
}

.wj-footer__nav {
  margin-bottom: 20px;
}

/* Screen-reader only (Accessibility) */
.wj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer Newsletter — schmales Anmeldefeld mit schmalem Consent */
.wj-footer__newsletter {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.wj-footer-newsletter-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto !important;
  text-align: left;
}
.wj-footer-newsletter-form .wj-in,
.wj-footer-newsletter-form .wj-submit,
.wj-footer-newsletter-form .wj-turnstile-wrap {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
.wj-footer-newsletter-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wj-footer-newsletter-row .wj-in {
  flex: 1;
  min-width: 0;
}
.wj-footer-newsletter-form .wj-in {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  background: #fff;
}
.wj-footer-newsletter-form .wj-submit {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 10px;
  border: none;
  background: var(--wj-accent, #d8c3a5);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.wj-footer-newsletter-form .wj-newsletter-consent {
  margin-top: 0 !important;
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: flex-start !important;
  color: #5a5a5a !important;
}
.wj-footer-newsletter-form .wj-newsletter-consent__text a {
  color: inherit;
  text-decoration: underline;
}
.wj-footer-newsletter-form .wj-newsletter-consent__text a:hover {
  color: var(--wj-accent, #d8c3a5);
}
.wj-footer-newsletter-consent .wj-newsletter-consent__box {
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px !important;
}
.wj-footer-newsletter-consent .wj-newsletter-consent__box::before {
  border-radius: 3px;
}
.wj-footer-newsletter-consent .wj-newsletter-consent__box:has(.wj-newsletter-consent__input:checked)::before,
.wj-footer-newsletter-consent .wj-newsletter-consent__box:has(input:checked)::before {
  background-size: 10px 10px;
}
.wj-footer-newsletter-form .wj-notice {
  grid-column: 1 / -1;
  font-size: 13px;
  padding: 10px 12px;
}
@media (max-width: 400px) {
  .wj-footer-newsletter-form {
    max-width: 100%;
  }
}

.wj-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}

.wj-footer__links a {
  color: #5a5a5a;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s ease;
}

.wj-footer__links a:hover {
  color: var(--wj-accent, #d8c3a5);
}

.wj-footer__social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.wj-footer__social a {
  color: #8a8a8a;
  transition: color .2s ease, transform .2s ease;
}

.wj-footer__social a:hover {
  color: var(--wj-accent, #d8c3a5);
  transform: translateY(-2px);
}

.wj-footer__trust {
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.wj-footer__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.wj-footer__badges .wj-badge2 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  color: rgba(31,41,55,.9);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wj-footer__badges .wj-badge2--link:hover {
  border-color: var(--wj-accent, #d8c3a5);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.wj-footer__badges .wj-badge2__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wj-footer__badges .wj-badge2__icon svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

.wj-footer__handmade {
  margin: 0 0 20px;
  font-size: 14px;
  color: #888;
}

.wj-footer__handmade span {
  color: #e07a7a;
}

.wj-footer__copy {
  margin: 0;
  font-size: 13px;
  color: #888;
}

@media (max-width: 480px) {
  .wj-footer-fallback {
    padding: 24px 16px 20px;
  }
  .wj-footer__links {
    gap: 6px 12px;
    font-size: 13px;
  }
  .wj-footer__trust {
    padding: 12px 0;
  }
  .wj-footer__badges .wj-badge2 {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* =========================
   404-Seite — WJ-Design (inspiriert von Figma, Mailchimp, Adobe)
   ========================= */
.wj-404__section {
  padding-top: clamp(56px, 10vw, 100px);
  padding-bottom: clamp(56px, 10vw, 100px);
  text-align: center;
}
.wj-404__inner {
  max-width: 520px;
  margin-inline: auto;
}
.wj-404__number {
  font-size: clamp(72px, 15vw, 140px);
  font-weight: 200;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--wj-accent, #d8c3a5);
  letter-spacing: -0.04em;
  opacity: 0.9;
}
.wj-404__title {
  margin-bottom: 12px;
}
.wj-404__text {
  margin-bottom: 28px;
  color: rgba(31,41,55,.7);
}
.wj-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}