/* ==========================================================================
   WiGLOW – Gestaltung für Kosmetikstudio und Onlineshop (Relaunch 2026)

   Grundlage: docs/redesign/handoff-2026-10-20/README.md (Tokens, Maße,
   Zustände). Regeln, die man leicht vergisst:
   - Gold #B99447 nie als Schrift auf Hell. Lesbares Gold ist #856A32.
   - Ecken überall 0, Schatten nur am Mini-Warenkorb.
   - Fließtext 21 px, Bedienelemente 56–64 px hoch (Zielgruppe 45–65).
   - Keine Übergangsanimationen außer dem Parallax.
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO) ---------- */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --wg-weiss: #FFFFFF;
  --wg-sand: #F2F1ED;
  --wg-salbei: #EFF2ED;
  --wg-fuss: #DCE3D4;
  --wg-fuss-text: #4A5A3E;
  --wg-fuss-linie: #B9C4AE;
  --wg-fuss-unterstrich: #9FAE92;
  --wg-gruen: linear-gradient(100deg, #333D2A 0%, #43503A 46%, #5C6B4C 100%);
  --wg-abdunklung: linear-gradient(95deg, rgba(26,26,26,.70) 0%, rgba(26,26,26,.42) 46%, rgba(26,26,26,.12) 100%);
  --wg-tinte: #1A1A1A;
  --wg-text: #4A4A4A;
  --wg-neben: #5F5F5A;
  --wg-linie: #E4E2DC;
  --wg-linie-stark: #CFCCC4;
  --wg-linie-sand: #D8D6D0;
  --wg-gold: #856A32;
  --wg-gold-hover: #6B5629;
  --wg-gold-ornament: #B99447;
  --wg-gold-hell: #DCC58C;
  --wg-fehler: #A3392B;
  --wg-platzhalter: #E8E7E2;

  --wg-schrift: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wg-zahl: "Cormorant Garamond", Georgia, serif;

  --wg-breite: 1560px;
  --wg-rand: clamp(20px, 5vw, 64px);
  --wg-sektion: clamp(64px, 8vw, 104px);
  --wg-band: clamp(56px, 6vw, 88px);
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--wg-weiss);
  font-family: var(--wg-schrift);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.7;
  color: var(--wg-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--wg-gold); text-decoration: none; }
a:hover { color: var(--wg-gold-hover); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; color: var(--wg-tinte); }
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 400; color: var(--wg-tinte); }
:focus-visible { outline: 2px solid var(--wg-gold); outline-offset: 3px; }
::selection { background: var(--wg-salbei); color: var(--wg-tinte); }
[hidden] { display: none !important; }

.screen-reader-text, .wg-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wg-skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 200; width: auto; height: auto; clip: auto;
  background: var(--wg-tinte); color: var(--wg-weiss); padding: 12px 20px; font-size: 18px;
}

/* ---------- Raster und Abschnitte ---------- */
.wg-sektion { padding: var(--wg-sektion) var(--wg-rand); }
.wg-sektion--band { padding-block: var(--wg-band); }
.wg-sektion--oben0 { padding-top: 0; }
.wg-sektion--sand { background: var(--wg-sand); }
.wg-sektion--salbei { background: var(--wg-salbei); }
.wg-sektion--gruen { background: var(--wg-gruen); color: var(--wg-weiss); }
.wg-sektion--gruen h1, .wg-sektion--gruen h2, .wg-sektion--gruen h3, .wg-sektion--gruen .wg-claim { color: var(--wg-weiss); }
.wg-sektion--gruen .wg-eyebrow { color: var(--wg-gold-hell); }
.wg-innen { max-width: var(--wg-breite); margin: 0 auto; width: 100%; }

.wg-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wg-min, 420px)), 1fr));
  gap: var(--wg-luecke, 56px 96px);
  align-items: start;
}
.wg-raster--mitte { align-items: center; }
.wg-raster--fuellen { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wg-min, 260px)), 1fr)); }
.wg-stapel { display: flex; flex-direction: column; gap: var(--wg-luecke, 28px); }
.wg-zeile { display: flex; flex-wrap: wrap; gap: var(--wg-luecke, 16px); align-items: center; }

/* ---------- Schrift ---------- */
.wg-h1 { font-weight: 200; font-size: clamp(42px, 6.2vw, 88px); line-height: 1.08; color: var(--wg-tinte); text-wrap: balance; }
.wg-h1--start { font-size: clamp(42px, 6.6vw, 96px); }
.wg-h1--produkt { font-size: clamp(40px, 4.6vw, 68px); text-wrap: pretty; }
.wg-h2 { font-weight: 200; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.1; color: var(--wg-tinte); }
.wg-claim { font-weight: 200; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.14; color: var(--wg-tinte); text-wrap: pretty; }
.wg-claim--klein { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; }
.wg-h3 { font-weight: 300; font-size: 30px; line-height: 1.25; color: var(--wg-tinte); }
.wg-lead { font-size: 24px; line-height: 1.55; }
.wg-text-gross { font-size: 22px; line-height: 1.6; color: var(--wg-tinte); }
.wg-klein { font-size: 18px; line-height: 1.55; color: var(--wg-neben); }
.wg-eyebrow { font-size: 19px; line-height: 1.7; letter-spacing: .18em; text-transform: uppercase; color: var(--wg-neben); }
.wg-eyebrow--gold { color: var(--wg-gold); }
.wg-kennzeile { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--wg-neben); }
.wg-zahl { font-family: var(--wg-zahl); font-weight: 300; line-height: 1; color: var(--wg-gold); }
.wg-preis { font-family: var(--wg-zahl); font-weight: 300; line-height: 1.1; color: var(--wg-gold); }
.wg-preis del, .wg-preis s { font-family: var(--wg-schrift); color: var(--wg-neben); }
.wg-preis ins { text-decoration: none; }
.wg-max-48 { max-width: 48ch; }
.wg-max-56 { max-width: 56ch; }
.wg-tinte { color: var(--wg-tinte); }

/* Pfeillisten „→ Text" */
.wg-pfeile { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.wg-pfeile li { display: flex; gap: 20px; align-items: flex-start; color: var(--wg-tinte); }
.wg-pfeile li::before { content: "→"; color: var(--wg-gold); flex: none; font-size: 22px; line-height: 1.45; }
.wg-pfeile--weit { gap: 18px; }
.wg-sektion--gruen .wg-pfeile li { color: var(--wg-weiss); }
.wg-sektion--gruen .wg-pfeile li::before { color: var(--wg-gold-hell); }

/* Nummernliste „01 Text" mit Linien */
.wg-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--wg-linie); }
.wg-schritte li { display: flex; gap: 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--wg-linie); color: var(--wg-tinte); }
.wg-schritte__nr { font-family: var(--wg-zahl); font-weight: 300; font-size: 40px; line-height: 1; color: var(--wg-gold); flex: none; width: 52px; }
.wg-sektion--gruen .wg-schritte { border-color: rgba(255,255,255,.3); }
.wg-sektion--gruen .wg-schritte li { border-color: rgba(255,255,255,.3); color: var(--wg-weiss); padding-block: 22px; }
.wg-sektion--gruen .wg-schritte__nr { color: var(--wg-gold-hell); }

/* Unterstrichener Textlink */
.wg-link { align-self: flex-start; border-bottom: 1px solid var(--wg-linie-sand); padding-bottom: 4px; color: var(--wg-gold); }
.wg-link:hover { border-bottom-color: var(--wg-gold); }

/* ---------- Knöpfe ---------- */
.wg-btn, .button, button.button, a.button, input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 64px; padding: 0 44px; border: 1px solid var(--wg-gold); border-radius: 0;
  background: var(--wg-gold); color: var(--wg-weiss);
  font-family: var(--wg-schrift); font-weight: 300; font-size: 15px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.wg-btn:hover, .button:hover, button.button:hover, a.button:hover { background: var(--wg-gold-hover); border-color: var(--wg-gold-hover); color: var(--wg-weiss); }
.wg-btn--kontur, .button.wg-btn--kontur { background: var(--wg-weiss); color: var(--wg-gold); }
.wg-btn--kontur:hover, .button.wg-btn--kontur:hover { background: var(--wg-gold); border-color: var(--wg-gold); color: var(--wg-weiss); }
.wg-btn--hell { background: var(--wg-gold-ornament); border-color: var(--wg-gold-ornament); color: var(--wg-tinte); }
.wg-btn--hell:hover { background: var(--wg-weiss); border-color: var(--wg-weiss); color: var(--wg-tinte); }
.wg-btn--kontur-hell { background: transparent; border-color: rgba(255,255,255,.7); color: var(--wg-weiss); }
.wg-btn--kontur-hell:hover { background: var(--wg-weiss); border-color: var(--wg-weiss); color: var(--wg-tinte); }
.wg-btn--56 { height: 56px; padding: 0 32px; }
.wg-btn--breit { display: flex; width: 100%; }
.wg-btn[disabled], .button[disabled], .button.disabled { opacity: .5; cursor: not-allowed; }
.button.loading { opacity: .6; pointer-events: none; }
.added_to_cart { display: none !important; }

/* ---------- Kopf ---------- */
.wg-kopf {
  position: relative; z-index: 30; background: var(--wg-weiss);
  border-bottom: 1px solid var(--wg-linie);
  padding: 28px var(--wg-rand);
}
.wg-kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: var(--wg-breite); margin: 0 auto; }
.wg-kopf__logo { display: block; flex: none; }
.wg-kopf__logo img { width: 172px; height: 90px; object-fit: contain; }
.wg-nav { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; justify-content: flex-end; }
.wg-nav__liste { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 18px; letter-spacing: .04em; }
.wg-nav__liste a { display: block; color: var(--wg-text); padding-bottom: 7px; border-bottom: 1px solid transparent; line-height: 1.4; }
.wg-nav__liste a:hover { color: var(--wg-gold); }
.wg-nav__liste .current-menu-item > a,
.wg-nav__liste .current_page_item > a,
.wg-nav__liste .current-menu-parent > a,
.wg-nav__liste .wg-aktiv > a { color: var(--wg-gold); border-bottom-color: var(--wg-gold); }
.wg-nav__liste .sub-menu { display: none; }
.wg-kopf__knopf { flex: none; }
.wg-korb-knopf { gap: 12px; padding: 0 28px; }
.wg-korb-knopf__anzahl {
  min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--wg-gold); color: var(--wg-weiss); font-size: 15px; letter-spacing: 0;
}
.wg-korb-knopf:hover .wg-korb-knopf__anzahl { background: var(--wg-weiss); color: var(--wg-gold); }
.wg-menue-knopf { display: none; }
.wg-kopf__mobil { display: none; }

/* Kompakte Navigation: Logo, (Warenkorb), Menü-Knopf. Im Entwurf noch nicht
   gestaltet (README „Offen"), deshalb in derselben Formensprache gebaut. */
@media (max-width: 1180px) {
  .wg-kopf { padding-block: 20px; }
  .wg-kopf__logo img { width: 132px; height: 69px; }
  .wg-nav { display: none; }
  .wg-kopf__aktionen { display: flex; align-items: center; gap: 12px; }
  .wg-menue-knopf { display: inline-flex; }
  .wg-kopf__mobil {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wg-weiss); border-bottom: 1px solid var(--wg-linie);
    padding: 8px var(--wg-rand) 32px; max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .wg-kopf__mobil[hidden] { display: none !important; }
  /* Auf- und Zuklappen (wiglow.js setzt .ist-offen einen Frame nach hidden=false
     und hidden erst nach dem Ausblenden): die Fläche rollt von oben auf, die
     Einträge folgen leicht versetzt. */
  .wg-kopf__mobil {
    clip-path: inset(0 0 100% 0); opacity: 0;
    transition: clip-path .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  }
  .wg-kopf__mobil.ist-offen { clip-path: inset(0 0 0 0); opacity: 1; }
  .wg-kopf__mobil .wg-nav__liste > li,
  .wg-kopf__mobil > .wg-btn {
    opacity: 0; transform: translateY(-8px);
    transition: opacity .3s ease, transform .42s cubic-bezier(.22,.61,.36,1);
  }
  .wg-kopf__mobil.ist-offen .wg-nav__liste > li,
  .wg-kopf__mobil.ist-offen > .wg-btn { opacity: 1; transform: none; }
  .wg-kopf__mobil.ist-offen .wg-nav__liste > li:nth-child(2) { transition-delay: .04s; }
  .wg-kopf__mobil.ist-offen .wg-nav__liste > li:nth-child(3) { transition-delay: .08s; }
  .wg-kopf__mobil.ist-offen .wg-nav__liste > li:nth-child(4) { transition-delay: .12s; }
  .wg-kopf__mobil.ist-offen .wg-nav__liste > li:nth-child(5) { transition-delay: .16s; }
  .wg-kopf__mobil.ist-offen .wg-nav__liste > li:nth-child(n+6),
  .wg-kopf__mobil.ist-offen > .wg-btn { transition-delay: .2s; }
  .wg-kopf__mobil .wg-nav__liste { flex-direction: column; align-items: stretch; gap: 0; font-size: 22px; }
  .wg-kopf__mobil .wg-nav__liste a { padding: 16px 0; border-bottom: 1px solid var(--wg-linie); }
  .wg-kopf__mobil .wg-nav__liste .current-menu-item > a,
  .wg-kopf__mobil .wg-nav__liste .current_page_item > a { border-bottom-color: var(--wg-linie); }
  .wg-kopf__mobil .wg-btn { margin-top: 24px; width: 100%; }
}
@media (min-width: 1181px) {
  .wg-kopf__aktionen .wg-menue-knopf, .wg-kopf__aktionen .wg-korb-knopf--mobil { display: none; }
}
@media (max-width: 480px) {
  .wg-korb-knopf--mobil .wg-korb-knopf__wort { display: none; }
  .wg-kopf__aktionen .wg-btn--56 { padding: 0 18px; }
}

/* ---------- Fuß ---------- */
.wg-fuss { background: var(--wg-fuss); color: var(--wg-tinte); padding: var(--wg-sektion) var(--wg-rand) 48px; }
.wg-fuss__innen { max-width: var(--wg-breite); margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.wg-fuss__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 64px; }
.wg-fuss__spalte { display: flex; flex-direction: column; gap: 16px; }
.wg-fuss__spalte--marke { gap: 28px; }
.wg-fuss__logo img { width: 172px; height: 90px; object-fit: contain; }
.wg-fuss__titel { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--wg-fuss-text); }
.wg-fuss a { color: var(--wg-tinte); }
.wg-fuss a:hover { color: var(--wg-gold-hover); }
.wg-fuss__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wg-fuss__social { display: flex; gap: 10px 28px; flex-wrap: wrap; }
.wg-fuss__social a { border-bottom: 1px solid var(--wg-fuss-unterstrich); padding-bottom: 4px; }
.wg-fuss__social a:hover { border-bottom-color: var(--wg-gold-hover); }
.wg-fuss__leiste {
  border-top: 1px solid var(--wg-fuss-linie); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--wg-fuss-text);
}
.wg-fuss__leiste a { color: var(--wg-fuss-text); }
.wg-fuss__leiste a:hover { color: var(--wg-tinte); }
/* Widerrufs-Knopf aus dem Plugin cps-widerruf wie ein Fußzeilenlink darstellen */
.wg-fuss .cps-widerruf-button, .wg-fuss [class*="widerruf"] a, .wg-fuss button[class*="widerruf"] {
  all: unset; cursor: pointer; font-size: 21px; color: var(--wg-tinte); line-height: 1.7;
}
.wg-fuss .cps-widerruf-button:hover, .wg-fuss [class*="widerruf"] a:hover { color: var(--wg-gold-hover); }

/* ---------- Foto mit Parallax ---------- */
.wg-foto { position: absolute; inset: 0; overflow: hidden; background: var(--wg-platzhalter); }
.wg-foto__ebene { position: absolute; left: 0; width: 100%; top: 0; height: 100%; will-change: transform; }
.wg-foto__ebene[data-parallax-stufe="gross"] { top: -13%; height: 126%; }
.wg-foto__ebene[data-parallax-stufe="klein"] { top: -8%; height: 116%; }
.wg-foto__ebene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wg-bildflaeche { position: relative; overflow: hidden; background: var(--wg-platzhalter); }
@media (prefers-reduced-motion: reduce) {
  .wg-foto__ebene { transform: none !important; }
  .wg-kopf__mobil, .wg-kopf__mobil .wg-nav__liste > li, .wg-kopf__mobil > .wg-btn { transition: none !important; }
}

/* ---------- Mini-Warenkorb ---------- */
.wg-korb { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.wg-korb[hidden] { display: none !important; }
.wg-korb__dunkel { position: absolute; inset: 0; background: rgba(26,26,26,.42); }
.wg-korb__panel {
  position: relative; width: min(520px, 100%); height: 100%; background: var(--wg-weiss);
  display: flex; flex-direction: column; box-shadow: -24px 0 48px rgba(26,26,26,.12);
}
.wg-korb__kopf { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 40px; border-bottom: 1px solid var(--wg-linie); }
.wg-korb__titel { font-size: 30px; line-height: 1.2; color: var(--wg-tinte); }
.wg-schliessen {
  width: 56px; height: 56px; flex: none; border: 1px solid var(--wg-linie-stark); background: var(--wg-weiss);
  font-weight: 200; font-size: 32px; line-height: 1; color: var(--wg-tinte); border-radius: 0; padding: 0;
}
.wg-schliessen:hover { border-color: var(--wg-gold); color: var(--wg-gold); }
.wg-korb__inhalt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wg-korb__leer { flex: 1; padding: 48px 40px; display: flex; flex-direction: column; gap: 20px; }
.wg-korb__leer p { margin: 0 0 8px; font-size: 22px; color: var(--wg-tinte); }
.wg-korb__liste { flex: 1; overflow-y: auto; padding: 0 40px; list-style: none; margin: 0; }
.wg-korb__zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--wg-linie); }
.wg-korb__bild { position: relative; width: 96px; height: 120px; border: 1px solid var(--wg-linie); overflow: hidden; background: var(--wg-weiss); }
.wg-korb__bild img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.wg-korb__bild--service img { padding: 0; object-fit: cover; }
.wg-korb__daten { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wg-korb__name { font-size: 21px; line-height: 1.35; color: var(--wg-tinte); }
.wg-korb__name a { color: inherit; }
.wg-korb__info { font-size: 18px; line-height: 1.45; color: var(--wg-neben); }
.wg-korb__info dl { margin: 0; }
.wg-korb__info dt { display: none; }
.wg-korb__info dd { margin: 0; }
.wg-korb__info dd p { margin: 0; }
.wg-korb__info dd + dt + dd::before { content: "· "; }
.wg-korb__reihe { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.wg-korb__preis { font-family: var(--wg-zahl); font-weight: 300; font-size: 28px; line-height: 1; color: var(--wg-tinte); margin-left: auto; }
.wg-korb__entfernen {
  align-self: flex-start; background: none; border: none; border-bottom: 1px solid var(--wg-linie-stark);
  padding: 6px 0 2px; font-size: 18px; color: var(--wg-neben); border-radius: 0;
}
.wg-korb__entfernen:hover { color: var(--wg-gold); border-bottom-color: var(--wg-gold); }
.wg-korb__hinweis { margin: 28px 0; background: var(--wg-salbei); padding: 24px; font-size: 18px; line-height: 1.55; color: var(--wg-tinte); }
.wg-korb__fuss { border-top: 1px solid var(--wg-linie); padding: 24px 40px 32px; display: flex; flex-direction: column; gap: 14px; }
.wg-korb__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wg-korb__summe span:first-child { font-size: 21px; color: var(--wg-tinte); }
.wg-korb__summe .wg-preis { font-size: 36px; line-height: 1; }
.wg-korb__versand { font-size: 18px; color: var(--wg-neben); }
.wg-korb__fuss .wg-btn:first-of-type { margin-top: 8px; }
.wg-korb.is-laedt .wg-korb__panel { opacity: .7; pointer-events: none; }
@media (max-width: 480px) {
  .wg-korb__kopf, .wg-korb__fuss { padding-inline: 24px; }
  .wg-korb__liste, .wg-korb__leer { padding-inline: 24px; }
}

/* Mengenstepper (Mini-Warenkorb 48 px, Produktseite 56 × 64 px) */
.wg-menge { display: flex; border: 1px solid var(--wg-linie-stark); flex: none; background: var(--wg-weiss); }
.wg-menge button { width: 48px; height: 48px; border: none; background: var(--wg-weiss); font-size: 22px; color: var(--wg-tinte); padding: 0; border-radius: 0; }
.wg-menge button:hover { color: var(--wg-gold); }
.wg-menge output, .wg-menge input {
  width: 44px; height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--wg-tinte); border: none; text-align: center; background: transparent; padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.wg-menge input::-webkit-outer-spin-button, .wg-menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wg-menge--gross button { width: 56px; height: 64px; font-size: 24px; }
.wg-menge--gross output, .wg-menge--gross input { width: 56px; height: 64px; font-size: 21px; }

/* ---------- Produktkarte ---------- */
.wg-karte { display: flex; flex-direction: column; gap: 18px; height: 100%; list-style: none; }
.wg-karte__bild { display: block; position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--wg-linie); background: var(--wg-weiss); overflow: hidden; }
.wg-karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 28px; object-fit: contain; }
.wg-karte--service .wg-karte__bild img { padding: 0; object-fit: cover; }
.wg-etikett { position: absolute; top: 16px; left: 16px; background: var(--wg-gold); color: var(--wg-weiss); padding: 6px 14px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.wg-karte__name { font-size: 22px; line-height: 1.35; color: var(--wg-tinte); text-wrap: pretty; }
.wg-karte__name:hover { color: var(--wg-gold); }
.wg-karte__preisblock { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.wg-karte__preis { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.wg-karte__preis .wg-preis { font-size: 34px; }
.wg-karte__preis s, .wg-karte__preis del { font-size: 19px; color: var(--wg-neben); font-family: var(--wg-schrift); }
.wg-steuer { font-size: 18px; line-height: 1.5; color: var(--wg-neben); }
.wg-steuer a { color: var(--wg-neben); border-bottom: 1px solid var(--wg-linie-stark); }
.wg-steuer a:hover { color: var(--wg-gold); border-bottom-color: var(--wg-gold); }
.wg-grundpreis { font-size: 18px; line-height: 1.5; color: var(--wg-neben); }
.wg-karte .wg-btn { height: 56px; padding: 0 20px; }
.wg-karte .wg-btn--kontur { background: var(--wg-weiss); color: var(--wg-gold); }
.wg-karte .wg-btn--kontur:hover { background: var(--wg-gold); color: var(--wg-weiss); }

/* ---------- Chips (Filter, Hauttypen) ---------- */
.wg-chips { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.wg-chip {
  height: 48px; display: inline-flex; align-items: center; padding: 0 22px;
  border: 1px solid var(--wg-linie-stark); background: var(--wg-weiss); color: var(--wg-tinte);
  font-size: 18px; white-space: nowrap; border-radius: 0;
}
.wg-chip:hover { border-color: var(--wg-gold); color: var(--wg-gold); }
.wg-chip.is-aktiv, .wg-chip[aria-current="page"] { background: var(--wg-gold); border-color: var(--wg-gold); color: var(--wg-weiss); }

/* ---------- Akkordeon ---------- */
.wg-akkordeon { display: flex; flex-direction: column; border-bottom: 1px solid var(--wg-linie); }
.wg-akkordeon__eintrag { border-top: 1px solid var(--wg-linie); }
.wg-akkordeon__knopf {
  width: 100%; min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: none; border: none; padding: 16px 0; text-align: left; font-weight: 300; font-size: 24px; color: var(--wg-tinte); border-radius: 0;
}
.wg-akkordeon__knopf:hover { color: var(--wg-gold); }
.wg-akkordeon__zeichen { font-size: 28px; color: var(--wg-gold); flex: none; line-height: 1; }
.wg-akkordeon__inhalt { padding: 0 0 28px; display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.wg-akkordeon__inhalt p { margin: 0; }

/* ---------- Brotkrumen ---------- */
.wg-krumen { display: flex; gap: 12px; flex-wrap: wrap; font-size: 18px; color: var(--wg-neben); }
.wg-krumen a { color: var(--wg-neben); }
.wg-krumen a:hover { color: var(--wg-gold); }
.wg-krumen [aria-current] { color: var(--wg-tinte); }

/* ---------- Formulare ---------- */
.wg-formular label, .woocommerce form .form-row label {
  display: block; font-size: 18px; line-height: 1.4; color: var(--wg-tinte); margin-bottom: 10px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="url"], input[type="date"], select, textarea,
.woocommerce form .input-text, .select2-container .select2-selection--single {
  width: 100%; min-height: 64px; padding: 0 20px; border: 1px solid var(--wg-linie-stark); border-radius: 0;
  background: var(--wg-weiss); color: var(--wg-tinte); font-size: 20px; font-weight: 300; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
textarea, .woocommerce form textarea.input-text { padding: 18px 20px; min-height: 160px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23856A32' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; padding-right: 52px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--wg-gold); box-shadow: inset 0 0 0 1px var(--wg-gold); }
::placeholder { color: #8A8A84; opacity: 1; }
.select2-container .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--wg-tinte); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 62px; right: 14px; }
.select2-dropdown { border-color: var(--wg-linie-stark); border-radius: 0; font-size: 19px; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--wg-gold); }

input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; flex: none; margin: 0;
  border: 1px solid var(--wg-linie-stark); background: var(--wg-weiss); border-radius: 0; cursor: pointer;
  display: inline-grid; place-content: center; vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: ""; width: 14px; height: 8px; border: solid var(--wg-weiss); border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg) translate(1px, -2px); opacity: 0;
}
input[type="radio"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--wg-gold); opacity: 0; }
input[type="checkbox"]:checked { background: var(--wg-gold); border-color: var(--wg-gold); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { opacity: 1; }
input[type="radio"]:checked { border-color: var(--wg-gold); }

.required, abbr.required { color: var(--wg-fehler); text-decoration: none; border: 0; }

/* ---------- Hinweise (WooCommerce) ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wg-hinweis {
  list-style: none; margin: 0 0 32px; padding: 24px 28px; font-size: 19px; line-height: 1.55;
  background: var(--wg-salbei); color: var(--wg-tinte); border-left: 2px solid var(--wg-gold);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
}
.woocommerce-error { background: #F7EDEB; border-left-color: var(--wg-fehler); display: block; }
.woocommerce-error li { margin: 0; }
.woocommerce-error li + li { margin-top: 8px; }
.woocommerce-message .button, .woocommerce-info .button { height: 48px; padding: 0 24px; order: 2; }
.wg-hinweis--sand { background: var(--wg-sand); border-left: 0; }

/* ---------- Text aus dem Editor (Rechtstexte, freie Inhalte) ---------- */
.wg-text { max-width: 72ch; color: var(--wg-text); }
/* Die IT-Recht-Texte kommen in einer äußeren <div>, deshalb auch eine Ebene tiefer. */
.wg-text > * + *, .wg-text > div > * + * { margin-top: 1em; }
.wg-text h2 { font-weight: 300; font-size: 30px; line-height: 1.25; margin-top: 1.8em; color: var(--wg-tinte); }
.wg-text h3 { font-weight: 300; font-size: 24px; line-height: 1.35; margin-top: 1.6em; color: var(--wg-tinte); }
.wg-text h4, .wg-text h5, .wg-text h6 { font-weight: 400; font-size: 21px; margin-top: 1.4em; color: var(--wg-tinte); }
.wg-text ul, .wg-text ol { padding-left: 1.3em; }
.wg-text li + li { margin-top: .4em; }
.wg-text a { border-bottom: 1px solid var(--wg-linie-sand); }
.wg-text a:hover { border-bottom-color: var(--wg-gold); }
.wg-text table { width: 100%; border-collapse: collapse; font-size: 18px; }
.wg-text th, .wg-text td { border-top: 1px solid var(--wg-linie); padding: 12px 12px 12px 0; text-align: left; vertical-align: top; }
.wg-text blockquote { border-left: 2px solid var(--wg-gold); padding-left: 24px; color: var(--wg-tinte); }
.wg-text img { margin-block: 1.5em; }
.wg-text hr { border: 0; border-top: 1px solid var(--wg-linie); margin-block: 2em; }

/* ---------- Hilfsklassen ---------- */
.wg-nur-mobil { display: none; }
@media (max-width: 720px) {
  .wg-nur-desktop { display: none; }
  .wg-nur-mobil { display: initial; }
  body { font-size: 20px; }
  .wg-h3 { font-size: 26px; }
  .wg-lead { font-size: 22px; }
  .wg-btn, .button { padding: 0 28px; }
}

/* ---------- Rechtstexte und Standardseiten ---------- */
.wg-recht { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 96px; align-items: start; }
.wg-recht__nav { display: flex; flex-direction: column; gap: 24px; }
.wg-recht__liste { display: flex; flex-direction: column; border-bottom: 1px solid var(--wg-linie); }
.wg-recht__liste a { padding: 20px 0; border-top: 1px solid var(--wg-linie); color: var(--wg-text); display: flex; justify-content: space-between; gap: 16px; }
.wg-recht__liste a:hover { color: var(--wg-gold); }
.wg-recht__liste a[aria-current] { color: var(--wg-tinte); }
.wg-recht__liste a[aria-current] span + span { color: var(--wg-gold); }
.wg-recht__text { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 56px; max-width: 760px; }
@media (max-width: 760px) { .wg-recht__text { grid-column: auto; } .wg-recht { gap: 56px; } }

/* Mini-Warenkorb: Liste im Scrollbereich */
.wg-korb__liste ul { list-style: none; margin: 0; padding: 0; }
.wg-fuss__folge { gap: 14px; }

/* ---------- Produktseite ---------- */
.wg-produktliste { list-style: none; margin: 0; padding: 0; }
.wg-produkt__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 96px; align-items: start; }
.wg-produkt__bild {
  position: sticky; top: 24px; width: 100%; aspect-ratio: 4 / 5;
  /* zweispaltig höchstens 760 px hoch, einspaltig höchstens min(36vh, 440px),
     damit Name, Preis und Buchung auf dem Tablet im ersten Bildschirm stehen */
  max-height: clamp(min(36vh, 440px), calc((100vw - 1080px) * 999), 760px);
  border: 1px solid var(--wg-linie); background: var(--wg-weiss); overflow: hidden;
}
.wg-produkt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 48px; object-fit: contain; }
.wg-produkt__bild--service img { padding: 0; object-fit: cover; }
@media (max-width: 1079px) { .wg-produkt__bild { position: relative; top: 0; max-width: 100%; margin-inline: auto; } }
.wg-produkt__kauf { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.wg-produkt__preis { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--wg-linie); padding-top: 24px; }
.wg-produkt__preis .wg-preis { font-size: 52px; line-height: 1; }
.wg-produkt__preis s { font-size: 22px; color: var(--wg-neben); }
.wg-produkt__vorteile { border-top: 1px solid var(--wg-linie); padding-top: 28px; }
.wg-produkt__vorteile .wg-pfeile li { font-size: 20px; }
.wg-produkt .stock { font-size: 18px; color: var(--wg-neben); margin: 0 0 16px; }
.wg-produkt .stock.out-of-stock { color: var(--wg-fehler); }

form.cart.wg-kaufen { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; margin: 0; }
form.cart.wg-kaufen .single_add_to_cart_button { flex: 1 1 240px; height: 64px; }
form.cart.wg-kaufen--buchung .single_add_to_cart_button { flex-basis: 100%; }
.wg-menge-fest { display: none; }

/* Varianten (einziges variables Produkt: Smooth & Pure Cocktail) */
.variations_form .variations { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.variations_form .variations th, .variations_form .variations td { display: block; text-align: left; padding: 0; }
.variations_form .variations th label { font-size: 19px; letter-spacing: .18em; text-transform: uppercase; color: var(--wg-neben); font-weight: 300; margin-bottom: 14px; display: block; }
.variations_form .variations td { padding-bottom: 16px; }
.variations_form .reset_variations { display: inline-block; margin-top: 12px; font-size: 18px; color: var(--wg-neben); border-bottom: 1px solid var(--wg-linie-stark); }
.variations_form .single_variation_wrap { display: flex; flex-direction: column; gap: 16px; }
.variations_form .woocommerce-variation-add-to-cart { display: flex; gap: 16px; flex-wrap: wrap; }
.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 240px; }
.variations_form .woocommerce-variation-price .price { font-family: var(--wg-zahl); font-size: 34px; color: var(--wg-gold); }

/* Weißer Kasten auf Sand („So läuft es ab") */
.wg-kasten { background: var(--wg-weiss); padding: 56px 48px; }
@media (max-width: 600px) { .wg-kasten { padding: 36px 24px; } }
.wg-claim--gross { font-weight: 200; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.1; color: inherit; text-wrap: pretty; }

/* ---------- Terminwahl der Hautstrategie (Plugin cps-hautanalyse) ---------- */
.cps-ha { display: flex; flex-direction: column; gap: 32px; margin: 0 0 32px; }
.cps-ha__teilnahme { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cps-ha__label { display: block; padding: 0; margin: 0 0 14px; font-size: 19px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--wg-neben); }
.cps-ha__karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.cps-ha-karte {
  position: relative; min-height: 88px; padding: 16px 24px; border: 1px solid var(--wg-linie-stark); background: var(--wg-weiss);
  display: flex; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer; text-align: left;
}
.cps-ha-karte:hover { border-color: var(--wg-gold); }
.cps-ha-karte__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border: 0; }
.cps-ha-karte:has(.cps-ha-karte__input:focus-visible) { outline: 2px solid var(--wg-gold); outline-offset: 3px; }
.cps-ha-karte.is-active, .cps-ha-karte:has(.cps-ha-karte__input:checked) { border-color: var(--wg-gold); box-shadow: inset 0 0 0 1px var(--wg-gold); }
.cps-ha-karte__icon { color: var(--wg-gold); margin-bottom: 6px; line-height: 0; }
.cps-ha-karte__icon:empty { display: none; }
.cps-ha-karte__titel { font-size: 22px; line-height: 1.3; color: var(--wg-tinte); }
.cps-ha-karte__text { font-size: 18px; line-height: 1.4; color: var(--wg-neben); }
.cps-ha__termin { display: flex; flex-direction: column; gap: 14px; }
.cps-ha__tage, .cps-ha-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.cps-ha-zeiten { margin-top: 6px; }
.cps-ha-tag, .cps-ha-zeit {
  border: 1px solid var(--wg-linie-stark); background: var(--wg-weiss); color: var(--wg-tinte);
  font-family: var(--wg-schrift); font-weight: 300; border-radius: 0; padding: 0; cursor: pointer;
}
.cps-ha-tag { height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cps-ha-tag__wochentag { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.cps-ha-tag__tag, .cps-ha-tag__monat { font-size: 21px; line-height: 1.2; }
.cps-ha-tag__tag + .cps-ha-tag__monat { margin-top: -2px; font-size: 16px; }
.cps-ha-zeit { height: 56px; font-size: 19px; }
.cps-ha-tag:hover, .cps-ha-zeit:hover { border-color: var(--wg-gold); }
.cps-ha-tag.is-active, .cps-ha-tag[aria-pressed="true"], .cps-ha-zeit.is-active, .cps-ha-zeit[aria-pressed="true"] {
  background: var(--wg-gold); border-color: var(--wg-gold); color: var(--wg-weiss);
}
.cps-ha__geschenk { background: var(--wg-sand); padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; font-size: 20px; line-height: 1.55; color: var(--wg-tinte); }
.cps-ha__geschenk svg { flex: none; margin-top: 2px; color: var(--wg-gold); }
.cps-ha__geschenk-inhalt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cps-ha__geschenk-text { margin: 0; }
.cps-ha__eilig { display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.45; cursor: pointer; }
.cps-ha__fehler { margin: 0; font-size: 19px; color: var(--wg-fehler); }

/* ---------- Kasse ---------- */
.wg-h1--kasse { font-size: clamp(42px, 5.6vw, 80px); }
.wg-shopseite--kasse { padding-top: clamp(48px, 6vw, 72px); }
.wg-kasse { display: flex; flex-direction: column; gap: 56px; }
.wg-kasse__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 64px 96px; align-items: start; }
.wg-kasse__felder, .wg-kasse__kunde, .woocommerce-billing-fields { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.wg-kasse__gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.wg-kasse__gruppe > legend { padding: 0; margin-bottom: 24px; }
.wg-kasse__felderliste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.wg-kasse__felderliste .form-row { margin: 0; grid-column: 1 / -1; }
.wg-kasse__felderliste .form-row-first { grid-column: 1; }
.wg-kasse__felderliste .form-row-last { grid-column: 2; }
.wg-kasse__felderliste .wg-feld-plz { grid-column: 1; }
.wg-kasse__felderliste .wg-feld-ort { grid-column: 2; }
@media (min-width: 560px) { .wg-kasse__felderliste:has(.wg-feld-plz) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .wg-kasse__felderliste .form-row-first:not(.wg-feld-plz) { grid-column: 1; } }
@media (max-width: 559px) { .wg-kasse__felderliste .form-row-first, .wg-kasse__felderliste .form-row-last { grid-column: 1 / -1; } }
.woocommerce form .form-row label { font-size: 19px; }
.woocommerce form .form-row .optional { color: var(--wg-neben); }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--wg-fehler); box-shadow: inset 0 0 0 1px var(--wg-fehler); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--wg-linie-stark); }
.woocommerce-shipping-fields, .woocommerce-additional-fields { display: flex; flex-direction: column; gap: 24px; }
.woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 24px; }
#ship-to-different-address label { display: flex; gap: 16px; align-items: center; font-size: 20px; color: var(--wg-tinte); cursor: pointer; }
.shipping_address .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.shipping_address .form-row { grid-column: 1 / -1; margin: 0; }
.shipping_address .form-row-first { grid-column: 1; }
.shipping_address .form-row-last { grid-column: 2; }
.checkbox, .woocommerce-form__label-for-checkbox { display: flex !important; gap: 16px; align-items: flex-start; cursor: pointer; }
.woocommerce-form__label-for-checkbox input { margin-top: 2px; }
.woocommerce-form__label-for-checkbox span { font-size: 18px; line-height: 1.55; color: var(--wg-tinte); }

/* Zahlarten als Karten */
.wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wc_payment_method { position: relative; border: 1px solid var(--wg-linie-stark); background: var(--wg-weiss); }
.wc_payment_method > input[type="radio"] { position: absolute; left: 24px; top: 26px; }
.wc_payment_method > label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 80px; padding: 16px 24px 16px 72px; font-size: 21px; color: var(--wg-tinte); cursor: pointer; }
.wc_payment_method > label img { max-height: 28px; width: auto; display: inline-block; }
.wc_payment_method:has(> input:checked) { border-color: var(--wg-gold); box-shadow: inset 0 0 0 1px var(--wg-gold); }
.wc_payment_method .payment_box { padding: 0 24px 24px 72px; font-size: 18px; line-height: 1.55; color: var(--wg-neben); }
.wc_payment_method .payment_box p { margin: 0; }
.wc_payment_method .payment_box fieldset { border: 0; padding: 0; margin: 12px 0 0; }

/* Bestellübersicht rechts */
.wg-kasse__uebersicht { position: sticky; top: 24px; background: var(--wg-sand); padding: 48px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 600px) { .wg-kasse__uebersicht { padding: 32px 24px; position: relative; top: 0; } }
@media (max-width: 1079px) { .wg-kasse__uebersicht { position: relative; top: 0; } }
.wg-uebersicht { width: 100%; border-collapse: collapse; font-size: 21px; }
.wg-uebersicht tbody tr { border-top: 1px solid var(--wg-linie-sand); }
.wg-uebersicht tbody tr:last-child { border-bottom: 1px solid var(--wg-linie-sand); }
.wg-uebersicht tbody td { padding: 20px 0; vertical-align: top; }
.wg-uebersicht .product-name { display: flex; flex-direction: column; gap: 4px; padding-right: 24px; }
.wg-uebersicht__name { font-size: 20px; line-height: 1.4; color: var(--wg-tinte); }
.wg-uebersicht__info, .wg-uebersicht__info dl { font-size: 18px; line-height: 1.45; color: var(--wg-neben); margin: 0; }
.wg-uebersicht__info dt { display: none; }
.wg-uebersicht__info dd { margin: 0; }
.wg-uebersicht__info dd p { margin: 0; display: inline; }
.wg-uebersicht__info dd + dt + dd::before { content: " · "; }
.wg-uebersicht .product-total { text-align: right; font-family: var(--wg-zahl); font-weight: 300; font-size: 28px; line-height: 1.2; color: var(--wg-tinte); white-space: nowrap; }
.wg-uebersicht tfoot th { text-align: left; font-weight: 300; padding: 5px 24px 5px 0; }
.wg-uebersicht tfoot td { text-align: right; color: var(--wg-tinte); padding: 5px 0; }
.wg-uebersicht tfoot tr:first-child th, .wg-uebersicht tfoot tr:first-child td { padding-top: 24px; }
.wg-uebersicht tfoot .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: right; }
.wg-uebersicht tfoot .woocommerce-shipping-methods li { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.wg-uebersicht tfoot .woocommerce-shipping-destination, .wg-uebersicht tfoot .woocommerce-shipping-calculator { display: none; }
.wg-uebersicht__gesamt th, .wg-uebersicht__gesamt td { border-top: 1px solid var(--wg-linie-stark); padding-top: 20px !important; }
.wg-uebersicht__gesamt th { font-size: 22px; color: var(--wg-tinte); vertical-align: baseline; }
.wg-uebersicht__gesamt .wg-preis { font-size: 44px; line-height: 1; }
.wg-uebersicht__gesamt .wg-preis .woocommerce-Price-amount { font-family: var(--wg-zahl); }
.wg-uebersicht__mwst td { text-align: right; font-size: 18px; color: var(--wg-neben) !important; padding-top: 4px !important; }
.wg-kasse__service { background: var(--wg-salbei); padding: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 19px; line-height: 1.55; color: var(--wg-tinte); }
.wg-kasse__abschluss { display: flex; flex-direction: column; gap: 16px; }
.wg-kasse__abschluss .form-row { margin: 0; }
.wg-kasse__abschluss .woocommerce-terms-and-conditions-wrapper { display: flex; flex-direction: column; gap: 16px; }
.wg-kasse__abschluss .woocommerce-privacy-policy-text p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--wg-neben); }
.wg-kasse__abschluss .woocommerce-invalid label span { color: var(--wg-fehler); }
.wg-kasse__abschluss #place_order { margin-top: 8px; }
.woocommerce-checkout .blockUI.blockOverlay { background: rgba(255,255,255,.6) !important; }
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { background: var(--wg-sand); border-left: 0; }
.wg-kasse form.checkout_coupon, .wg-kasse form.woocommerce-form-login { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 32px; align-items: flex-end; }
.wg-kasse form.checkout_coupon .form-row-first { flex: 1 1 260px; margin: 0; }
.wg-kasse form.checkout_coupon .form-row-last { margin: 0; }

/* ---------- Bestellbestätigung ---------- */
.wg-danke { display: flex; flex-direction: column; gap: 72px; }
.wg-danke__service { background: var(--wg-gruen); color: var(--wg-weiss); padding: 56px 48px; }
@media (max-width: 600px) { .wg-danke__service { padding: 36px 24px; } }
.wg-danke__termin { font-family: var(--wg-zahl); font-weight: 300; font-size: 36px; line-height: 1.2; }
.wg-danke__service .wg-schritte__nr { font-size: 36px; width: 48px; }
.wg-btn--grau { border-color: var(--wg-linie-stark); color: var(--wg-tinte); }
.wg-btn--grau:hover { background: var(--wg-weiss); border-color: var(--wg-gold); color: var(--wg-gold); }
.wg-danke__details { display: flex; flex-direction: column; gap: 40px; border-top: 1px solid var(--wg-linie); padding-top: 56px; }
.wg-danke__details h2 { font-size: 30px; font-weight: 300; line-height: 1.25; margin-bottom: 20px; }
.wg-danke__details table { width: 100%; border-collapse: collapse; font-size: 19px; }
.wg-danke__details th, .wg-danke__details td { text-align: left; padding: 14px 16px 14px 0; border-top: 1px solid var(--wg-linie); vertical-align: top; font-weight: 300; }
.wg-danke__details address { font-style: normal; line-height: 1.6; }
.wg-danke__details .woocommerce-customer-details { display: flex; flex-direction: column; gap: 20px; }
.wg-danke__details .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }

/* ---------- Produktübersicht ---------- */
.wg-filterleiste { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; border-top: 1px solid var(--wg-linie-stark); border-bottom: 1px solid var(--wg-linie); padding: 24px 0; }
.woocommerce-ordering { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 18px; color: var(--wg-neben); }
.woocommerce-ordering::before { content: "Sortieren"; }
.woocommerce-ordering select { min-height: 48px; height: 48px; width: auto; padding: 0 44px 0 16px; font-size: 18px; background-position: right 16px center; }
.woocommerce-pagination ul { list-style: none; display: flex; gap: 10px; padding: 0; margin: 64px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span { min-width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wg-linie-stark); color: var(--wg-tinte); }
.woocommerce-pagination .current { background: var(--wg-gold); border-color: var(--wg-gold); color: var(--wg-weiss); }

/* Tag-Knöpfe der Terminwahl: Wochentag oben, darunter „4.11." in einer Zeile */
.cps-ha-tag { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; row-gap: 2px; }
.cps-ha-tag__wochentag { grid-column: 1 / -1; text-align: center; }
.cps-ha-tag__tag + .cps-ha-tag__monat { margin-top: 0; font-size: 21px; }

/* Stepper: Zahlenfeld ohne eigene Linie (sonst greift die allgemeine Feldregel) */
.wg-menge input[type="number"] {
  min-height: 0; height: 48px; width: 44px; padding: 0; border: 0; box-shadow: none;
  background: transparent; text-align: center; font-size: 19px;
}
.wg-menge--gross input[type="number"] { height: 64px; width: 56px; font-size: 21px; }
.wg-menge input[type="number"]:focus { box-shadow: inset 0 -2px 0 var(--wg-gold); }
.wg-produkt .stock { margin: 0 0 12px; }

/* Teilnahme und Termin in einer Zeile: „Online per Zoom · Mittwoch, 4. November …" */
.wg-korb__info dd, .wg-uebersicht__info dd { display: inline; }
.wg-korb__info dd p, .wg-uebersicht__info dd p { display: inline; }
.wg-korb__info dl, .wg-uebersicht__info dl { display: block; }

/* Pflicht-Sternchen direkt hinter dem Text der Checkboxen */
.wg-kasse__abschluss .woocommerce-form__label-for-checkbox .required { display: none; }
.wg-kasse__abschluss .woocommerce-terms-and-conditions-checkbox-text::after,
.wg-kasse__abschluss .cps-ha-leistungsbeginn label > span::after { content: " *"; color: var(--wg-fehler); }

/* ---------- Tabellen (Warenkorb-Seite, Konto, Bestelldetails) ---------- */
.shop_table:not(.wg-uebersicht) { width: 100%; border-collapse: collapse; font-size: 19px; }
.shop_table:not(.wg-uebersicht) th, .shop_table:not(.wg-uebersicht) td { text-align: left; padding: 16px 16px 16px 0; border-top: 1px solid var(--wg-linie); vertical-align: middle; font-weight: 300; }
.shop_table:not(.wg-uebersicht) thead th { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--wg-neben); border-top: 0; }
.shop_table .woocommerce-Price-amount { font-family: var(--wg-zahl); font-size: 24px; color: var(--wg-tinte); }

/* ---------- Warenkorb-Seite ---------- */
.woocommerce-cart-form .product-thumbnail img { width: 80px; height: 100px; object-fit: contain; border: 1px solid var(--wg-linie); padding: 6px; }
.woocommerce-cart-form .product-name a { color: var(--wg-tinte); }
.woocommerce-cart-form .product-name dl { margin: 6px 0 0; font-size: 18px; color: var(--wg-neben); }
.woocommerce-cart-form .product-name dt { display: none; }
.woocommerce-cart-form .product-name dd { margin: 0; display: inline; }
.woocommerce-cart-form .product-name dd p { display: inline; margin: 0; }
.woocommerce-cart-form .product-remove a.remove { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--wg-linie-stark); color: var(--wg-tinte); font-size: 24px; line-height: 1; }
.woocommerce-cart-form .product-remove a.remove:hover { border-color: var(--wg-gold); color: var(--wg-gold); }
.woocommerce-cart-form .actions { padding-top: 24px !important; }
.woocommerce-cart-form .actions .coupon { display: inline-flex; gap: 12px; flex-wrap: wrap; margin-right: 16px; }
.woocommerce-cart-form .actions .coupon label { display: none; }
.woocommerce-cart-form .actions .coupon input { width: 260px; }
.woocommerce-cart-form .actions button[name="update_cart"] { background: var(--wg-weiss); color: var(--wg-gold); }
.woocommerce-cart-form .actions button[name="update_cart"]:hover { background: var(--wg-gold); color: var(--wg-weiss); }
.cart-collaterals { display: flex; justify-content: flex-end; margin-top: 56px; }
.cart_totals { background: var(--wg-sand); padding: 48px; width: min(560px, 100%); display: flex; flex-direction: column; gap: 24px; }
.cart_totals h2 { font-size: 30px; font-weight: 300; }
.cart_totals .shop_table th, .cart_totals .shop_table td { border-color: var(--wg-linie-sand); }
.cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.cart_totals .woocommerce-shipping-calculator, .cart_totals .woocommerce-shipping-destination { font-size: 17px; }
.wc-proceed-to-checkout .checkout-button { display: flex; width: 100%; }
@media (max-width: 760px) {
  .woocommerce-cart-form thead { display: none; }
  .woocommerce-cart-form tr { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--wg-linie); }
  .woocommerce-cart-form td { border: 0 !important; padding: 0 !important; }
  .woocommerce-cart-form .product-thumbnail { grid-row: span 3; }
  .woocommerce-cart-form .product-price { display: none; }
  .woocommerce-cart-form .actions { grid-column: 1 / -1; }
  .cart_totals { padding: 32px 24px; }
}

/* ---------- Mein Konto (Schriften und Farben, keine Neugestaltung) ---------- */
.woocommerce-account .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 64px 96px; align-items: start; }
.woocommerce-account h2 { font-size: 30px; font-weight: 300; margin-bottom: 24px; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .woocommerce-EditAccountForm, .woocommerce-address-fields {
  display: flex; flex-direction: column; gap: 24px; max-width: 560px;
}
.woocommerce-form-row, .woocommerce form .form-row { margin: 0; }
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.woocommerce-form-login__rememberme { display: flex !important; gap: 12px; align-items: center; margin: 0 !important; font-size: 19px; }
.woocommerce-LostPassword { font-size: 18px; margin: 0; }
.password-input { position: relative; display: block; }
.show-password-input {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; padding: 0; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23856A32' stroke-width='1.25'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.show-password-input.display-password { opacity: .55; }
.woocommerce-privacy-policy-text p, .woocommerce-form-register p:not(.form-row) { font-size: 18px; line-height: 1.55; color: var(--wg-neben); margin: 0; }
.logged-in.woocommerce-account .wg-shopseite--konto .woocommerce { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 64px 96px; align-items: start; }
@media (max-width: 860px) { .logged-in.woocommerce-account .wg-shopseite--konto .woocommerce { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--wg-linie); }
.woocommerce-MyAccount-navigation a { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--wg-linie); color: var(--wg-text); }
.woocommerce-MyAccount-navigation a:hover, .woocommerce-MyAccount-navigation .is-active a { color: var(--wg-tinte); }
.woocommerce-MyAccount-navigation .is-active a::after { content: "→"; color: var(--wg-gold); }
.woocommerce-MyAccount-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.woocommerce-MyAccount-content address { font-style: normal; line-height: 1.6; }
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }

/* reCAPTCHA-Hinweis aus cps-recaptcha (setzt 11 px inline): nie kleiner als 15 px */
.cps-recaptcha-notice { font-size: 15px !important; line-height: 1.5 !important; color: var(--wg-neben) !important; }
.cps-recaptcha-notice a { color: var(--wg-gold); }
.wg-kaufen__auswahl { flex-basis: 100%; margin: 0; }

/* Bestelldetails: Teilnahme und Termin ohne Aufzählungspunkte */
.wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 18px; color: var(--wg-neben); }
.wc-item-meta li { display: flex; gap: 6px; flex-wrap: wrap; }
.wc-item-meta strong { font-weight: 300; color: var(--wg-neben); }
.wc-item-meta p { margin: 0; display: inline; }
.wg-danke__details .product-name a { color: var(--wg-tinte); }

/* Auf breiten Fenstern nimmt der leere Aktionsbereich sonst Platz neben der Navigation weg */
@media (min-width: 1181px) { .wg-kopf__aktionen { display: none; } }

/* ---------- Google-Bewertung im Kopfbild (auf dunklem Foto) ---------- */
.wg-google { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wg-google__link { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--wg-weiss); font-size: 18px; line-height: 1.4; }
.wg-google__link:hover { color: var(--wg-gold-hell); }
.wg-google__sterne { position: relative; display: inline-block; font-size: 20px; line-height: 1; letter-spacing: .12em; }
.wg-google__sterne-leer { color: rgba(255, 255, 255, .35); }
.wg-google__sterne-voll { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--wg-gold-hell); }
.wg-google__text { border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 2px; }
.wg-google__hinweis { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .78); }

/* reCAPTCHA-Abzeichen ausblenden: Es stand live absolut rechts neben der Seite und
   machte sie 186 px breiter (gemessen 20.10.2026). Erlaubt, weil der Hinweistext von
   cps-recaptcha an den Formularen steht. Dazu keine waagrechte Überbreite auf <html>. */
.grecaptcha-badge { visibility: hidden !important; right: 0 !important; }
html { overflow-x: clip; }