/* ============================================================
 * Fineprints — Global Styles
 * 1:1 Übernahme aus prototype/index.html
 * ============================================================ */

/* ============================================================
 * @font-face: Lokal gehostete Webfonts (DSGVO).
 * Subsets latin + latin-ext (Umlaute fuer de-AT).
 * `font-display: swap` vermeidet FOIT / verzoegert FOUT.
 * ============================================================ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}

@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/jost-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/jost-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jost-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jost-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jost-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jost-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/jost-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/jost-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/caveat-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/caveat-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}

:root {
  --bg:       #F4EEE3;
  --bg-warm:  #EDE3D2;
  --paper:    #FBF7EE;
  --ink:      #2A1F14;
  --ink-soft: #4A3A28;
  --muted:    #8B7959;
  --line:     #D9CDB6;
  --rust:     #A65A3E;
  --sage:     #6E7A55;
  --green-shutter: #4C6B3E;
  --red-shutter:   #B33A2A;

  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Jost", system-ui, sans-serif;
  --script: "Caveat", cursive;

  --header-h: 80px;
}

* { box-sizing: border-box; }

/* Canvas dunkel wie der Footer: auf kurzen Seiten scheint sonst die creme
   Body-Farbe unter dem Footer durch (kein Sticky-Footer-Wrapper vorhanden).
   Body malt den Inhaltsbereich weiterhin creme — nur die Flaeche darunter
   wird dunkel und schliesst nahtlos an den Footer an. */
html { scroll-behavior: smooth; background: var(--ink); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(54px, 7vw, 108px); }
h2 { font-size: clamp(36px, 4vw, 64px); }
h3 { font-size: clamp(22px, 2vw, 30px); }

p { text-wrap: pretty; margin: 0 0 1em; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--rust); }

::selection { background: var(--ink); color: var(--paper); }

::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============================================================
 * Typography Utilities
 * ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.script { font-family: var(--script); }
.serif  { font-family: var(--serif); }

.italic { font-style: italic; }

/* ============================================================
 * Container
 * ============================================================ */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-wide {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 1100px) {
  .container, .container-wide { padding: 0 24px; }
}
@media (max-width: 760px) {
  .container, .container-wide { padding: 0 18px; }
  body { font-size: 14px; }
}

/* ============================================================
 * Buttons (1:1 wie Prototyp)
 * ============================================================ */
.btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce .woocommerce-info a.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0 !important;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--paper);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-paper {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn-paper:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--paper);
}

/* Animated underline on links */
.link-u {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.link-u:hover { background-size: 0% 1px; }

@media (max-width: 760px) {
  .btn { padding: 12px 18px; font-size: 10px; }
}

/* ============================================================
 * Page transitions
 * ============================================================ */
.page-fade { animation: pageFade .35s ease-out both; }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
 * Header
 * ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
  color: var(--ink);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

/* Transparent über Hero-Seiten */
body.has-hero-header .site-header:not(.is-scrolled) {
  background: transparent;
  color: var(--paper);
}
body.has-hero-header .site-header:not(.is-scrolled) .nav-link,
body.has-hero-header .site-header:not(.is-scrolled) .icon-btn { color: var(--paper); }
body.has-hero-header .site-header:not(.is-scrolled) .header-divider {
  background: rgba(251,247,238,0.4);
}
body.has-hero-header .site-header:not(.is-scrolled) .site-logo img {
  filter: invert(1) brightness(1.15);
}

/* Announcement-Bar (rotierender Streifen) */
.announcement-bar {
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
  overflow: hidden;
}
body.has-hero-header .site-header:not(.is-scrolled) .announcement-bar {
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.announcement-track {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  height: 1.2em;
}
.announcement-track li {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.announcement-track li.is-active {
  opacity: 1;
  transform: none;
}

/* 5-Spalten-Grid: NavLinks · Logo · NavRechts+Trenner+Icons */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  max-width: 1480px;
  margin: 0 auto;
}
.site-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.site-logo img,
.site-logo .custom-logo {
  height: 56px;
  width: auto;
  display: block;
  transition: filter .35s ease;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.primary-nav--left  { justify-self: start; }
.primary-nav--right { justify-self: end; }

.nav-link {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  padding-bottom: 6px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .nav-link:hover::after,
  .nav-link:focus-visible::after,
  .nav-link.is-current::after {
    transform: scaleX(1);
  }
}
.nav-link:hover,
.nav-link.is-current { color: var(--rust); }

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: end;
}
.header-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  display: inline-block;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-actions .icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.header-actions .cart-count {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 16px; height: 16px;
  background: var(--rust);
  color: var(--paper);
  font-size: 9px;
  font-weight: 500;
  border-radius: 10px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.burger { display: none; }

.mobile-sheet {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 8px 0 24px;
}
.mobile-sheet[hidden] { display: none; }
.mobile-sheet nav { display: flex; flex-direction: column; }
.mobile-sheet .nav-link {
  display: block;
  padding: 14px 32px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-sheet .nav-link:hover,
.mobile-sheet .nav-link:focus,
.mobile-sheet .nav-link.is-current { color: var(--rust); }
/* Auf Hero-Pages setzt .site-header:not(.is-scrolled) .nav-link auf weiss
   (Zeile 203). Das gilt auch fuers Mobile-Sheet, weil .mobile-sheet *im*
   .site-header sitzt. Selber Spezifitaets-Level (4 Klassen) erzwingt dunkle
   Schrift im aufgeklappten Sheet. */
body.has-hero-header .site-header .mobile-sheet .nav-link { color: var(--ink); }
body.has-hero-header .site-header .mobile-sheet .nav-link:hover,
body.has-hero-header .site-header .mobile-sheet .nav-link:focus,
body.has-hero-header .site-header .mobile-sheet .nav-link.is-current { color: var(--rust); }

@media (max-width: 1024px) {
  .primary-nav--left,
  .primary-nav--right,
  .header-divider { display: none; }
  .burger { display: inline-flex; }
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* Tablet-Bereich (iPad portrait + landscape) — analog Phone: 2-Spalten-Grid
   "auto 1fr", Logo links, Icons-Block ganz rechts buendig. Default-Grid
   1fr auto 1fr drueckt die Icons sonst in die Mitte zwischen Logo und Rand. */
@media (max-width: 1024px) and (min-width: 601px) {
  .header-inner {
    grid-template-columns: auto 1fr !important;
    padding: 12px 20px;
    gap: 16px;
  }
  .site-logo { justify-self: start; }
  .site-logo img,
  .site-logo .custom-logo {
    height: 52px !important;
    width: auto !important;
  }
  .header-right { justify-self: end; gap: 14px; }
  .header-actions { gap: 10px; }
  .header-actions .icon-btn { width: 34px; height: 34px; }
  .header-actions .icon-btn svg { width: 20px; height: 20px; }
  /* Hero-Corner-Tag ist auf <=760 schon ausgeblendet — auf iPad runter mit top
     damit er nicht in die Headerzeile rutscht. */
  .hero-corner-tag { top: 90px; right: 24px; }
}

/* ============================================================
 * Footer
 * ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0 32px;
  margin-top: 80px;
}
.site-footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 18px;
}
.site-footer a { color: var(--paper); opacity: 0.85; }
.site-footer a:hover { opacity: 1; color: var(--rust); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand .brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  margin-bottom: 14px;
  color: var(--paper);
}
.footer-brand p {
  color: rgba(251,247,238,0.7);
  font-size: 14px;
  max-width: 320px;
}
.footer-grid ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.footer-bottom {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #4A3A28;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(251,247,238,0.55);
}
.footer-bottom .legal {
  display: flex; gap: 18px; flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  /* Brand-Block oben volle Breite, Shop/Service nebeneinander, Kontakt drunter
     volle Breite (Adresse + Telefon/Mail brauchen Platz). */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer .footer-grid > div:last-child { grid-column: 1 / -1; }
  .site-footer h4 { margin-bottom: 12px; font-size: 10px; }
  .footer-grid ul { gap: 8px; font-size: 13px; }
  .footer-brand .brand-name { font-size: 24px; margin-bottom: 10px; }
  .footer-brand p { font-size: 13px; }
}

/* ============================================================
 * Hero (Front-Page)
 * ============================================================ */
.hero {
  position: relative;
  height: min(100vh, 100svh);
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.hero .hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0; /* Poster liegt unter Videos — LCP-Anchor, dann blendet das Video drueber */
}
.hero video,
.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(1.05);
  transition: opacity .6s ease;
}
.hero .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31,22,16,0.20) 0%,
    rgba(31,22,16,0.10) 40%,
    rgba(31,22,16,0.55) 100%);
}
.hero .content {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 0 32px 72px;
}
.hero .content-inner {
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}
.hero .content-inner > div { max-width: 760px; color: var(--paper); }
.hero h1 { color: var(--paper); }
.hero .eyebrow { color: rgba(251,247,238,0.85); margin-bottom: 22px; }
.hero .ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 36px;
}
.hero-corner-tag {
  position: absolute; top: 110px; right: 36px;
  color: var(--paper);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.hero-corner-tag::before {
  content: ''; width: 24px; height: 1px; background: rgba(251,247,238,0.6);
}
@media (max-width: 760px) {
  .hero-corner-tag { display: none; }
  .hero .content { padding: 0 18px 48px; }
}

/* ============================================================
 * Sections — common
 * ============================================================ */
.section {
  padding: 110px 0;
}
.section--warm   { background: var(--bg-warm); }
.section--paper  { background: var(--paper); }
.section--ink    { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
@media (max-width: 760px) {
  .section { padding: 56px 0; }
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 64px;
  align-items: end;
}
.section-head p {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 520px;
  margin-left: auto;
}
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .section-head p { margin-left: 0; }
}

/* Hero auf Mobile: Video komplett aus, nur Poster anzeigen.
   Spart 5–12 MB Daten pro Erst-Visit auf 4G — LCP-kritisch. */
@media (max-width: 768px) {
  .hero video { display: none !important; }
}

/* ============================================================
 * Manufaktur — Stoff-Tabelle
 * ============================================================ */
.mfg-fabrics { padding: 80px 0 40px; background: var(--bg-warm); }
.mfg-fabrics .container-wide > .eyebrow { margin-bottom: 18px; }
.mfg-fabrics__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400; line-height: 1.05;
}
.mfg-fabrics__title em { font-style: italic; color: var(--rust); }
.mfg-fabrics__lead {
  margin-top: 18px; max-width: 640px;
  font-size: 17px; line-height: 1.7; color: var(--ink-soft);
}
.mfg-fabrics__table-wrap {
  margin-top: 40px;
  overflow-x: auto;
}
.mfg-fabrics__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.mfg-fabrics__table thead { background: var(--bg); }
.mfg-fabrics__table th,
.mfg-fabrics__table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.mfg-fabrics__table thead th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.mfg-fabrics__table tbody th {
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  width: 18%;
}
.mfg-fabrics__table tbody td { color: var(--ink-soft); line-height: 1.5; }
.mfg-fabrics__table tbody tr:last-child th,
.mfg-fabrics__table tbody tr:last-child td { border-bottom: 0; }
.mfg-fabrics__footnote {
  margin-top: 24px;
  font-size: 13px; color: var(--muted);
}
@media (max-width: 700px) {
  .mfg-fabrics__table-wrap { overflow-x: visible; }
  .mfg-fabrics__table,
  .mfg-fabrics__table thead,
  .mfg-fabrics__table tbody,
  .mfg-fabrics__table tr,
  .mfg-fabrics__table th,
  .mfg-fabrics__table td { display: block; width: 100%; }
  .mfg-fabrics__table thead { position: absolute; left: -9999px; top: -9999px; }
  .mfg-fabrics__table tbody tr {
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 18px 18px 8px;
    background: var(--bg);
  }
  .mfg-fabrics__table tbody th {
    font-size: 22px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
    width: auto;
  }
  .mfg-fabrics__table tbody td {
    padding: 0 0 12px;
    border-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .mfg-fabrics__table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .mfg-fabrics__table tbody tr:last-child { margin-bottom: 0; }
}

/* ============================================================
 * Trio Cards (Kollektionen)
 * ============================================================ */
.trio {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.trio-card {
  position: relative;
  display: block;
  text-align: left;
  overflow: hidden;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 0.62/1;
}
.trio-card:first-child { aspect-ratio: 0.78/1; }
.trio-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.trio-card:hover img { transform: scale(1.04); }
.trio-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,22,16,0.7));
}
.trio-card .caption {
  position: absolute; left: 28px; right: 28px; bottom: 26px;
  color: var(--paper);
}
.trio-card .caption .name {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  margin-top: 10px;
}
.trio-card .caption .tagline {
  font-size: 13px; margin-top: 12px; opacity: 0.85; font-style: italic;
}
.trio-card .caption .more {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
@media (max-width: 1100px) {
  .trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .trio { grid-template-columns: 1fr; }
  .trio-card, .trio-card:first-child { aspect-ratio: 1/1; }
}

/* ============================================================
 * Manufaktur Teaser
 * ============================================================ */
.mfg-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mfg-teaser .media {
  position: relative;
}
.mfg-teaser .media video,
.mfg-teaser .media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.mfg-teaser .badge {
  position: absolute;
  right: -20px; top: -20px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--rust);
  color: var(--paper);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transform: rotate(-8deg);
  box-shadow: 0 10px 30px -10px rgba(166,90,62,0.4);
  font-family: var(--script);
  font-size: 26px;
  line-height: 1;
  text-align: center;
}
.mfg-teaser .techniques {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.mfg-teaser .techniques h3,
.mfg-teaser .techniques h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
}
.mfg-teaser .techniques .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 880px) {
  .mfg-teaser { grid-template-columns: 1fr; gap: 40px; }
  .mfg-teaser .techniques { grid-template-columns: 1fr; }
}

/* ============================================================
 * Product Grid (Featured)
 * ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.product-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #E7DCC4;
}
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .35s ease, transform .8s ease;
}
.product-card__img--front { opacity: 1; transform: scale(1); }
.product-card__img--back  { opacity: 0; transform: scale(1); }
.product-card:hover .product-card__img--front { opacity: 0; transform: scale(1.03); }
.product-card:hover .product-card__img--back  { opacity: 1; transform: scale(1.03); }

/* Badge(s) unten links */
.product-card__badges {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
  max-width: calc(100% - 28px);
}
.product-card__badge {
  background: var(--paper);
  color: var(--ink);
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Wishlist: paper-Kreis mit Outline-Herz oben rechts.
   Unser <button> traegt zusaetzlich .tinvwl_add_to_wishlist_button — damit das
   delegierte Plugin-JS einhakt. Plugin-CSS aggressiv ueberschreiben. */
button.product-card__wish.tinvwl_add_to_wishlist_button {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: 0 !important; /* Plugin-Icon-Font abwuergen, wir nutzen unser SVG */
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
button.product-card__wish.tinvwl_add_to_wishlist_button:before,
button.product-card__wish.tinvwl_add_to_wishlist_button:after {
  display: none !important; /* Plugin-Icon-Font-Glyph blocken */
  content: none !important;
}
button.product-card__wish.tinvwl_add_to_wishlist_button svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
button.product-card__wish.tinvwl_add_to_wishlist_button:hover {
  background: var(--rust) !important;
  color: var(--paper) !important;
  transform: scale(1.06);
}
/* Aktiv-Zustand: Plugin setzt .tinvwl-product-in-list (bzw. -make-remove bei
   simple_flow). Herz wird in Brand-Farbe gefuellt. */
button.product-card__wish.tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
button.product-card__wish.tinvwl_add_to_wishlist_button.tinvwl-product-make-remove {
  background: var(--rust) !important;
  color: var(--paper) !important;
  border-color: var(--rust) !important;
}
button.product-card__wish.tinvwl_add_to_wishlist_button.tinvwl-product-in-list svg path,
button.product-card__wish.tinvwl_add_to_wishlist_button.tinvwl-product-make-remove svg path {
  fill: currentColor;
}
/* Plugin-Tooltip + Loop-Wrapper, falls Plugin doch noch was einstreut */
.product-card__media .tinvwl-tooltip,
.product-card__media .tinv-wraper,
.product-card__media .tinv-wishlist:not(.product-card__wish) {
  display: none !important;
}

/* Footer: Name + Stoff links, Preis rechts */
.product-card__foot {
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.product-card__name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}
.product-card__fabric {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.product-card__price {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  white-space: nowrap;
}
.product-card__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.product-card__price del { opacity: 0.4; margin-right: 6px; }

/* ============================================================
 * Instagram Feed (6 tiles)
 * ============================================================ */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.instagram-grid > * {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.instagram-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.instagram-grid a:hover img { transform: scale(1.05); }
@media (max-width: 1100px) {
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * Popup Banner
 * ============================================================ */
.popup-banner {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 32px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.popup-banner a {
  color: var(--rust);
  margin-left: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
 * Newsletter Strip
 * ============================================================ */
.newsletter-strip {
  background: var(--bg-warm);
  padding: 100px 0;
}
.newsletter-strip .inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-strip form {
  display: flex; gap: 8px;
  max-width: 520px; margin: 32px auto 12px;
}
.newsletter-strip input[type="email"] {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 0;
}
.newsletter-strip input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
}
.newsletter-strip .footnote {
  font-size: 11px;
  color: var(--muted);
}
@media (max-width: 600px) {
  .newsletter-strip form { flex-direction: column; }
}

/* ============================================================
 * Page Hero (für Subseiten)
 * ============================================================ */
.page-hero {
  position: relative;
  height: min(64vh, 560px);
  overflow: hidden;
}
body:not(.has-hero-header) .page-hero {
  margin-top: var(--header-h);
}
.page-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}
.page-hero .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,22,16,0.3) 0%, rgba(31,22,16,0.55) 100%);
}
.page-hero .content {
  position: absolute; left: 0; right: 0; bottom: 56px;
  color: var(--paper);
  padding: 0 32px;
}
.page-hero .content .eyebrow {
  color: rgba(251,247,238,0.85);
  margin-bottom: 22px;
}
.page-hero h1 { color: var(--paper); }
.page-hero .lead {
  max-width: 600px;
  font-size: 17px;
  margin-top: 22px;
  color: rgba(251,247,238,0.92);
  line-height: 1.6;
}

/* ============================================================
 * Manufaktur Page
 * ============================================================ */

.mfg-intro {
  padding: calc(var(--header-h) + 60px) 0 60px;
}
.mfg-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mfg-intro__grid p {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
.mfg-intro__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.mfg-techniques {
  padding: 40px 0 110px;
}
.mfg-techniques__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.mfg-technique {
  background: var(--paper);
  padding: 32px 28px 36px;
  border: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.mfg-technique__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.mfg-technique__num {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  color: var(--rust);
}
.mfg-technique h3 {
  margin: 0;
}
.mfg-technique__short {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.mfg-technique img {
  margin-top: 22px;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  display: block;
}
.mfg-technique__desc {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.mfg-bts {
  padding: 110px 0;
  background: var(--bg-warm);
}
.mfg-bts__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.mfg-bts__main {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  object-fit: cover;
  display: block;
}
.mfg-bts__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.mfg-bts__stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mfg-bts__text {
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mfg-bts__text p {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
.mfg-bts__text .btn {
  margin-top: 24px;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .mfg-intro__grid,
  .mfg-techniques__grid,
  .mfg-bts__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mfg-bts__stack {
    grid-template-rows: auto auto;
  }
}

/* ============================================================
 * Theresa Page
 * ============================================================ */
.eyebrow--rust { color: var(--rust); }

.page-theresa { padding-top: calc(var(--header-h) + 56px); }

/* Hero-Intro */
.th-intro { padding: 8px 0 60px; }
.th-intro__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.th-intro__title {
  font-size: clamp(56px, 6vw, 104px);
  margin: 0;
}
.th-intro__lead {
  margin-top: 30px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 520px;
}
.th-intro__body {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 520px;
}
.th-intro__sig {
  margin-top: 38px;
  font-family: var(--script);
  font-size: 40px;
  color: var(--rust);
  line-height: 0.9;
}
.th-intro__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Pullquote */
.th-pullquote {
  padding: 40px 0 60px;
  text-align: center;
}
.th-pullquote .container { max-width: 980px; }
.th-pullquote .eyebrow { margin-bottom: 22px; }
.th-pullquote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.25;
  color: var(--ink);
}
.th-pullquote__quote {
  font-style: normal;
  color: var(--rust);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.3em;
  margin: 0 6px;
}
.th-pullquote__cite {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.th-pullquote__cite em {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

/* Das Haus */
.th-haus { padding: 100px 0; background: var(--bg-warm); }
.th-haus__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.th-haus__image-wrap { position: relative; }
.th-haus__image-wrap img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.th-haus__caption {
  position: absolute;
  bottom: -28px;
  right: -28px;
  background: var(--paper);
  padding: 18px 22px;
  max-width: 240px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  box-shadow: 0 18px 40px -20px rgba(42, 31, 20, 0.35);
}
.th-haus__caption .eyebrow { margin-bottom: 8px; }
.th-haus p {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* 3er-Bildleiste */
.th-figures .container-wide {
  padding: 60px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.th-figures figure { margin: 0; }
.th-figures img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.th-figures figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Das Atelier (dark) */
.th-atelier {
  padding: 100px 0;
  background: var(--ink);
  color: var(--paper);
}
.th-atelier__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.th-atelier h2 { color: var(--paper); }
.th-atelier h2 em { color: rgba(251, 247, 238, 0.88); }
.th-atelier .eyebrow { color: rgba(251, 247, 238, 0.65); }
.th-atelier .lead {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(251, 247, 238, 0.8);
}
.th-atelier p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(251, 247, 238, 0.75);
}
.th-atelier strong { color: var(--paper); }
.th-atelier__stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(251, 247, 238, 0.18);
  padding-top: 28px;
}
.th-stat-num {
  font-family: var(--serif);
  font-size: 44px;
  color: var(--rust);
  line-height: 1;
}
.th-atelier__stats .eyebrow { color: rgba(251, 247, 238, 0.6); margin-top: 6px; }
.th-stat-sub {
  font-size: 12px;
  color: rgba(251, 247, 238, 0.75);
  margin-top: 4px;
}
.th-atelier__media {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
}
.th-atelier__media-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.th-atelier__media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.th-atelier__media-pair img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Familie + Mitbewohner */
.th-familie { padding: 110px 0; }
.th-familie__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}
.th-familie p {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.th-mitbewohner__h { font-size: clamp(28px, 2.6vw, 40px); }
.th-mitbewohner {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.th-mitbewohner li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.th-mitbewohner__num {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--rust);
  min-width: 36px;
}
.th-mitbewohner__note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  font-style: italic;
}

/* Timeline */
.th-timeline { padding: 80px 0; background: var(--bg-warm); }
.th-timeline__head {
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.th-timeline__head .eyebrow { margin-bottom: 18px; }
.th-timeline__head p {
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 480px;
  margin-left: auto;
  line-height: 1.7;
}
.th-timeline__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.th-timeline__item {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}
.th-timeline__year {
  font-family: var(--serif);
  font-size: clamp(42px, 3.6vw, 60px);
  line-height: 1;
  color: var(--rust);
}
.th-timeline__item p {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Kundenstorys */
.th-stories { padding: 100px 0; }
.th-stories .section-head { margin-bottom: 48px; }
.th-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.th-story {
  background: var(--paper);
  padding: 36px 32px;
  border: 1px solid var(--line);
  margin: 0;
}
.th-story__quote {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  color: var(--rust);
}
.th-story blockquote {
  margin: 8px 0 24px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
  font-style: italic;
}
.th-story figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
}
.th-story__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-warm);
  color: var(--rust);
  font-family: var(--serif);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-story__name { font-family: var(--serif); font-size: 18px; }
.th-story__place { font-size: 12px; color: var(--muted); }

/* CTA Strip */
.th-cta { padding: 40px 0 100px; }
.th-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}
.th-cta p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
}
.th-cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .th-intro__grid,
  .th-haus__grid,
  .th-atelier__grid,
  .th-familie__grid,
  .th-cta__grid,
  .th-timeline__head {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .th-haus__caption { bottom: 16px; right: 16px; }
  .th-timeline__grid { grid-template-columns: repeat(2, 1fr); }
  .th-stories__grid,
  .th-figures .container-wide {
    grid-template-columns: 1fr;
  }
  .th-cta__buttons { justify-content: flex-start; }
}

/* ============================================================
 * Kollektionen Übersicht (/kollektionen/)
 * ============================================================ */
.page-kollektionen { padding-top: calc(var(--header-h) + 56px); }

.kol-intro {
  padding: calc(var(--header-h) + 64px) 0 40px;
  text-align: center;
}
.kol-intro .container-wide {
  max-width: 760px;
}
.kol-intro .eyebrow { margin-bottom: 18px; }
.kol-intro__title {
  font-size: clamp(44px, 5.2vw, 88px);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .kol-intro__title { white-space: normal; }
}

.kol-list {
  padding: 40px 0 100px;
}
.kol-list .container-wide {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.kol-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}
.kol-row--reverse {
  grid-template-columns: 1fr 1.2fr;
}
.kol-row--reverse .kol-row__media { order: 2; }
.kol-row--reverse .kol-row__text  { order: 1; }
.kol-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.kol-row:hover .kol-row__media img { transform: scale(1.03); }
.kol-row__text { padding: 0 8px; }
.kol-row__num {
  font-family: var(--serif);
  font-size: 96px;
  line-height: 0.9;
  color: var(--rust);
}
.kol-row__text h2 { margin-top: 12px; }
.kol-row__tagline {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
}
.kol-row__desc {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  max-width: 460px;
}
.kol-row__cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.kol-row:hover .kol-row__cta { color: var(--rust); }

/* ============================================================
 * Kollektion Detail (/kollektionen/{slug}/)
 * ============================================================ */
.kol-detail-intro {
  padding: 80px 0 60px;
}
.kol-detail-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
}
.kol-detail-intro__pull {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.3;
  font-style: italic;
  color: var(--ink);
}
.kol-detail-intro__desc {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}
.kol-detail-intro__desc p { margin: 0 0 14px; }
.kol-detail-intro__desc p:last-child { margin-bottom: 0; }

.kol-detail-grid {
  padding: 40px 0 100px;
}
.kol-detail-grid ul.products,
.kol-detail-grid .products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .kol-row,
  .kol-row--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .kol-row--reverse .kol-row__media,
  .kol-row--reverse .kol-row__text { order: initial; }
  .kol-row__num { font-size: 72px; }
  .kol-detail-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .kol-detail-grid ul.products,
  .kol-detail-grid .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kol-detail-grid ul.products,
  .kol-detail-grid .products { grid-template-columns: 1fr; }
}

/* ============================================================
 * Kontakt-Seite
 * ============================================================ */
.page-kontakt { padding-top: calc(var(--header-h) + 40px); }

.kt-intro {
  padding: 40px 0 60px;
  text-align: center;
}
.kt-intro .container-wide { max-width: 760px; }
.kt-intro .eyebrow { margin-bottom: 18px; }
.kt-intro__lead {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 17px;
}

.kt-main { padding: 40px 0 100px; }
.kt-main__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}

/* Adressen */
.kt-addresses { display: flex; flex-direction: column; }
.kt-block {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  margin-bottom: 32px;
}
.kt-block .eyebrow { margin-bottom: 12px; }
.kt-block h2,
.kt-block h3 { margin: 0; font-size: clamp(22px, 2vw, 30px); }
.kt-block__addr {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.kt-block__sub {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.kt-block__direct {
  margin: 0;
  font-size: 18px;
  font-family: var(--serif);
  line-height: 1.5;
}
.kt-hours {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.kt-hours dt { color: var(--muted); margin: 0; }
.kt-hours dd { margin: 0; }

/* Formular */
.kt-form {
  background: var(--paper);
  padding: 40px 44px;
  border: 1px solid var(--line);
}
.kt-form h2,
.kt-form h3 { margin: 0; font-size: clamp(22px, 2vw, 30px); }
.kt-form .eyebrow { margin-bottom: 18px; }

.kt-topics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.kt-topic {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.kt-topic.is-active {
  background: var(--ink);
  color: var(--paper);
}

.kt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}
.kt-field {
  display: block;
  margin-top: 18px;
}
.kt-row .kt-field { margin-top: 0; }
.kt-field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.kt-field input,
.kt-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.kt-field input:focus,
.kt-field textarea:focus {
  border-bottom-color: var(--ink);
}
.kt-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-soft);
}
.kt-consent input { margin-top: 4px; }
.kt-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.kt-form button[type="submit"] { margin-top: 24px; }

.kt-form__inner[hidden],
.kt-form__thanks[hidden] { display: none; }
.kt-form__thanks {
  padding: 40px 0;
  text-align: center;
}
.kt-thanks__hi {
  font-family: var(--script);
  font-size: 56px;
  color: var(--rust);
  line-height: 1;
}
.kt-form__thanks p {
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink-soft);
}
.kt-form__thanks .btn { margin-top: 24px; }

/* Map (Leaflet · OpenStreetMap) */
.kt-map { padding: 0 32px 100px; }
.kt-map__canvas {
  position: relative;
  height: 360px;
  background: var(--bg-warm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.kt-map__canvas .leaflet-container {
  height: 100% !important;
  width: 100% !important;
  background: var(--bg-warm);
  font-family: var(--sans);
}
/* Standard-Attribution unten rechts unsichtbar (wir setzen eigene), Zoom-Buttons sanfter */
.kt-map__canvas .leaflet-control-attribution { display: none; }
.kt-map__canvas .leaflet-control-zoom {
  border: none;
  box-shadow: 0 8px 24px -16px rgba(42,31,20,0.4);
}
.kt-map__canvas .leaflet-control-zoom a {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--serif);
}
.kt-map__canvas .leaflet-control-zoom a:hover { background: var(--bg-warm); }
/* Popups in Brand-Optik */
.kt-map__canvas .leaflet-popup-content-wrapper {
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  box-shadow: 0 12px 32px -12px rgba(42,31,20,0.35);
}
.kt-map__canvas .leaflet-popup-content {
  margin: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
}
.kt-map__canvas .leaflet-popup-content small {
  color: var(--muted);
  font-size: 11px;
}
.kt-map__canvas .leaflet-popup-tip { background: var(--paper); }
/* Custom DivIcons (Serif-Zahl im Kreis) ersetzen das Standard-PNG via JS */
.kt-map__canvas .leaflet-marker-icon.kt-pin {
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 6px 18px -6px rgba(42,31,20,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  margin: -21px 0 0 -21px !important;
  transition: transform .2s ease;
}
.kt-map__canvas .leaflet-marker-icon.kt-pin:hover { transform: scale(1.08); }
.kt-map__canvas .leaflet-marker-icon.kt-pin--primary {
  background: var(--rust);
}
.kt-map__canvas .kt-pin__num {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.kt-map__attribution {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(251,247,238,0.85);
  padding: 4px 8px;
}
.kt-map__attribution a { color: var(--ink-soft); text-decoration: none; }
.kt-map__attribution a:hover { color: var(--rust); }

@media (max-width: 1024px) {
  .kt-main__grid { grid-template-columns: 1fr; gap: 40px; }
  .kt-form { padding: 32px 28px; }
}
@media (max-width: 600px) {
  .kt-row { grid-template-columns: 1fr; }
  .kt-pin__label { font-size: 11px; padding: 8px 12px; }
  .kt-map { padding: 0 0 64px; }
  .kt-map .container-wide { padding-left: 0; padding-right: 0; }
  .kt-map__canvas { height: 280px; border-left: 0; border-right: 0; }
  .kt-map__attribution {
    right: 0; left: 0; bottom: 0;
    background: rgba(251,247,238,0.92);
    text-align: center;
    padding: 4px 10px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}

/* ============================================================
 * Journal (page_for_posts + category archive)
 * ============================================================ */
.page-journal { /* PageHero hat eigenes Margin-Handling */ }

/* Clean Text-Intro (kein Bild-Hero) — Stil wie .th-intro */
.jr-intro {
  padding: calc(var(--header-h) + 64px) 0 24px;
}
.jr-intro__title {
  font-size: clamp(44px, 5.2vw, 88px);
  margin: 18px 0 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .jr-intro__title { white-space: normal; }
}
.jr-intro__lead {
  margin-top: 30px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .jr-intro__lead { white-space: normal; }
}

.jr-list { padding: 60px 0 100px; }

.jr-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.jr-pill {
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.jr-pill:hover {
  background: var(--ink);
  color: var(--paper);
}
.jr-pill.is-active {
  background: var(--ink);
  color: var(--paper);
}

.jr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 32px;
}

.jr-card { display: block; }
.jr-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #E7DCC4;
  aspect-ratio: 16 / 10;
}
.jr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.jr-card:hover .jr-card__media img { transform: scale(1.03); }
.jr-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
}

.jr-card__body { padding-top: 22px; }
.jr-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.jr-card__cat {
  color: var(--rust);
  text-decoration: none;
}
.jr-card__cat:hover { text-decoration: underline; text-underline-offset: 3px; }

.jr-card__title {
  font-size: 32px;
  margin: 0;
}
.jr-card__title a {
  color: inherit;
  text-decoration: none;
}
.jr-card__title a:hover { color: var(--rust); }

.jr-card__excerpt {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.jr-card__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.jr-card__more:hover { color: var(--rust); }

.jr-pagination {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}
.jr-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  margin: 0 4px;
}
.jr-pagination .page-numbers.current,
.jr-pagination .page-numbers:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.jr-pagination .nav-links { display: flex; flex-wrap: wrap; }

@media (max-width: 900px) {
  .jr-grid { grid-template-columns: 1fr; gap: 48px; }
  .jr-card__title { font-size: 26px; }
}

/* ============================================================
 * Product Detail Page (PDP)
 * ============================================================ */
.page-product { padding-top: calc(var(--header-h) + 16px); }

/* Breadcrumb */
.pdp-breadcrumb { padding: 24px 0 12px; }
.pdp-breadcrumb .container-wide {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdp-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.pdp-breadcrumb a:hover { color: var(--ink); border-bottom-color: currentColor; }
.pdp-breadcrumb__current,
.pdp-breadcrumb .breadcrumb_last { color: var(--ink); font-weight: inherit; }
.pdp-breadcrumb span[aria-hidden="true"] { margin: 0 8px; }
/* Yoast-Breadcrumb-Trenner (Text-Knoten zwischen <a>s) */
.pdp-breadcrumb nav { display: inline; }

/* Main 2-Spalt */
.pdp-main { padding: 24px 0 80px; }
.pdp-main__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

/* Galerie */
.pdp-gallery {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
}
.pdp-gallery__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-gallery__thumb {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
  opacity: 0.7;
  transition: opacity .2s ease, outline-color .2s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-gallery__thumb:hover { opacity: 1; }
.pdp-gallery__thumb.is-active {
  opacity: 1;
  outline-color: var(--ink);
}
.pdp-gallery__stage {
  position: relative;
  background: #E7DCC4;
  aspect-ratio: 4 / 5;
}
.pdp-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.pdp-gallery__slide.is-active { opacity: 1; pointer-events: auto; }
.pdp-gallery__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pdp-gallery__zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  background: var(--paper);
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
}
.pdp-gallery__zoom:hover { color: var(--rust); }

/* Lightbox */
.pdp-lightbox {
  position: fixed; inset: 0;
  background: rgba(31,22,16,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
.pdp-lightbox img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.pdp-lightbox__close {
  position: absolute; top: 24px; right: 28px;
  font-size: 32px; line-height: 1;
  color: var(--paper);
  background: none; border: 0; cursor: pointer;
}

/* Info-Spalte */
.pdp-info { position: sticky; top: 110px; align-self: flex-start; }
.pdp-info__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pdp-info__cat { color: var(--rust); }
.pdp-info__sep, .pdp-info__style { color: var(--muted); }

.pdp-info__title {
  font-size: clamp(40px, 4vw, 64px);
  margin: 14px 0 0;
  line-height: 1.05;
}
.pdp-info__blurb {
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pdp-info__price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 22px;
}
.pdp-info__price-value {
  font-family: var(--serif);
  font-size: 36px;
}
.pdp-info__price-value .woocommerce-Price-amount { font: inherit; color: inherit; }
.pdp-info__price-value del { opacity: 0.4; margin-right: 8px; }
.pdp-info__price-note {
  font-size: 12px;
  color: var(--muted);
}
.pdp-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: 28px;
}

/* === WC Variations-Form als Brand-Selektoren stylen === */
.pdp-variants form.variations_form { margin-top: 28px; }
.pdp-variants table.variations { width: 100%; border-collapse: collapse; }
.pdp-variants table.variations tr {
  display: block;
  margin-bottom: 22px;
}
.pdp-variants table.variations th,
.pdp-variants table.variations td {
  display: block;
  padding: 0;
  background: none;
}
.pdp-variants table.variations th {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 400;
}
.pdp-variants .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Fallback fuer Attribute ohne Swatch (rein-select) */
.pdp-variants table.variations select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}
.pdp-variants table.variations select:focus { outline: none; border-color: var(--ink); }

/* === woo-variation-swatches: Brand-Override === */
.pdp-variants .variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
  background: none;
}
.pdp-variants .variable-item {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  transition: transform .2s ease;
}

/* Color-Swatches: 44px Kreise mit ink-Ring wenn aktiv (1:1 Prototyp) */
.pdp-variants .color-variable-item {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08) !important;
}
.pdp-variants .color-variable-item .variable-item-contents,
.pdp-variants .color-variable-item .variable-item-span-color {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 0 !important;
}
.pdp-variants .color-variable-item.selected,
.pdp-variants .color-variable-item[aria-checked="true"] {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
}
.pdp-variants .color-variable-item:hover { transform: scale(1.08); }

/* Button-Swatches: 56px-Quadrat (Groesse) / Pill mit Padding (Stoff) */
.pdp-variants .button-variable-item {
  min-width: 56px;
  height: 56px;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  font-size: 18px !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.pdp-variants .button-variable-item:hover { border-color: var(--ink) !important; }
.pdp-variants .button-variable-item.selected,
.pdp-variants .button-variable-item[aria-checked="true"] {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.pdp-variants .button-variable-item .variable-item-contents,
.pdp-variants .button-variable-item .variable-item-span,
.pdp-variants .button-variable-item .variable-item-span-button {
  color: inherit !important;
  font: inherit !important;
  background: transparent !important;
  border: 0 !important;
}

/* Disabled / nicht waehlbar */
.pdp-variants .variable-item.disabled,
.pdp-variants .variable-item.out-of-stock {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through;
}

.pdp-variants .woocommerce-variation-price {
  margin: 18px 0;
  font-family: var(--serif);
  font-size: 28px;
}
.pdp-variants .woocommerce-variation-price .woocommerce-Price-amount { font: inherit; }
.pdp-variants .woocommerce-variation-availability {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

.pdp-variants .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 22px;
}
.pdp-variants .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  height: 56px;
}
.pdp-variants .quantity input.qty {
  width: 56px; height: 56px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--serif);
  font-size: 20px;
}
.pdp-variants .single_add_to_cart_button {
  flex: 1;
  height: 56px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pdp-variants .single_add_to_cart_button:hover {
  background: transparent;
  color: var(--ink);
}
.pdp-variants .single_add_to_cart_button.disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* Wishlist auf PDP */
.pdp-wishlist { margin-top: 14px; }
.pdp-wishlist .tinv-wraper { margin: 0; }
.pdp-wishlist .tinvwl_add_to_wishlist_button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.pdp-wishlist .tinvwl_add_to_wishlist_button:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Stammkundinnen-Note */
.pdp-loyalty {
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px dashed var(--rust);
  background: rgba(166,90,62,0.05);
  display: flex;
  gap: 14px;
  align-items: center;
}
.pdp-loyalty__plus {
  font-family: var(--script);
  font-size: 28px;
  color: var(--rust);
  line-height: 1;
}
.pdp-loyalty p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pdp-loyalty a { color: var(--rust); border-bottom: 1px solid currentColor; text-decoration: none; }

/* Accordion */
.pdp-accordion {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.pdp-acc__row { border-bottom: 1px solid var(--line); }
.pdp-acc__head {
  width: 100%;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.pdp-acc__sign {
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}
.pdp-acc__head.is-open .pdp-acc__sign { transform: rotate(45deg); }
.pdp-acc__body {
  padding-bottom: 22px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.pdp-acc__body p { margin: 0 0 12px; }
.pdp-acc__body p:last-child { margin-bottom: 0; }

/* "Es passt auch" — nutzt .product-grid + .product-card */
.pdp-related { padding: 80px 0 100px; border-top: 1px solid var(--line); }
.pdp-related .product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .pdp-main__grid { grid-template-columns: 1fr; gap: 40px; }
  .pdp-info { position: static; }
  .pdp-related .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pdp-gallery { grid-template-columns: 1fr; }
  .pdp-gallery__rail { flex-direction: row; overflow-x: auto; }
  .pdp-gallery__thumb { flex: 0 0 80px; }
  .pdp-related .product-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Forms (generisch)
 * ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
}

/* ============================================================
 * Wunschliste (Page /wunschliste/)
 * - Brand-Wrapper um den [ti_wishlistsview]-Shortcode (.tinv-wishlist)
 * ============================================================ */
/* Schlichter Text-Header im Shop-Stil — kein Hero-Bild. */
.wl-header { padding-bottom: 24px; }
.wl-header__lead {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.wl-board { padding: 20px 0 80px; background: var(--bg); }
.wl-board__inner {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 40px 44px;
}
@media (max-width: 760px) {
  .wl-board__inner { padding: 24px 18px; }
}
/* Plugin-eigener Listenheader (h2 mit Listentitel) — wir haben oben schon einen
   Seitenheader, also Doppel-Heading raus. */
.wl-board .tinv-header { display: none; }

.wl-empty {
  text-align: center;
  padding: 60px 24px;
}
.wl-empty h3 { margin: 18px 0 8px; }
.wl-empty p { color: var(--ink-soft); margin-bottom: 28px; }

/* ---- TI-Wishlist Plugin-Overrides ---- */
.wl-board .tinv-wishlist { color: var(--ink); }
.wl-board .tinv-wishlist .woocommerce-notices-wrapper { margin-bottom: 18px; }

/* --- Tabellen-Grundgeruest ---
   Das Plugin-CSS (public.css) wird *vor* global.css geladen (Dependency in
   functions.php). Damit greifen unsere Regeln bei gleicher oder hoeherer
   Spezifitaet ohne !important.
   Plugin hat einen "Mobile-Stack" bei viewport <768px (thead-Spalten ausser
   .product-name werden auf display:none, alle td werden display:block).
   Wir wollen die echte Tabelle bis 600px halten. */

.wl-board .tinv-wishlist table.tinvwl-table-manage-list {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  margin: 0;
}
.wl-board .tinv-wishlist table.tinvwl-table-manage-list thead th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  padding: 10px 12px 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.wl-board .tinv-wishlist table.tinvwl-table-manage-list tbody td {
  padding: 22px 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  vertical-align: middle;
}

/* Plugin-Mobile-Stack neutralisieren bis runter auf 600px.
   Mit gleicher Spezifitaet wie die Plugin-Regel (selber Selektor-Aufbau). */
@media (max-width: 768px) and (min-width: 601px) {
  .wl-board .tinv-wishlist table.tinvwl-table-manage-list thead th:not(.product-name),
  .wl-board .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove {
    display: table-cell;
  }
  .wl-board .tinv-wishlist table.tinvwl-table-manage-list thead th.product-name {
    display: table-cell;
    width: auto;
    text-align: left;
  }
  .wl-board .tinv-wishlist table.tinvwl-table-manage-list tbody td {
    display: table-cell;
    width: auto;
    text-align: left;
  }
  .wl-board .tinv-wishlist thead th .tinvwl-full  { display: inline; }
  .wl-board .tinv-wishlist thead th .tinvwl-mobile { display: none; }
}

/* "Produkt"-Header steckt im <span class="tinvwl-full">. Mobile-Span (.tinvwl-mobile)
   in jedem Viewport hart aus, damit nie zwei Wörter im selben TH stehen. */
.wl-board .tinv-wishlist thead th .tinvwl-mobile { display: none; }
.wl-board .tinv-wishlist thead th .tinvwl-full   { display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.wl-board .tinvwl-table-manage-list .product-thumbnail img {
  width: 88px; height: 110px;
  object-fit: cover;
  display: block;
}
.wl-board .tinvwl-table-manage-list .product-name a {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
}
.wl-board .tinvwl-table-manage-list .product-name a:hover { color: var(--rust); }
/* Variation-Liste (Stoff / Farbe / Groesse) — Plugin rendert <dl class="variation">
   mit dt/dd. Default-Browser-Styling wuerde jedes Paar in eine eigene Zeile setzen
   und die Spalte ueberlaufen. Wir layouten kompakt inline. */
/* Variation-Liste (Stoff · Farbe · Groesse) — Plugin rendert <dl class="variation">
   mit dt/dd. WooCommerce setzt dt: float:left + clear:both -> zwingt jedes Paar
   in eine eigene Zeile und ueberlaeuft schmale Spalten. Wir setzen float zurueck
   und layouten kompakt inline. */
.wl-board .tinv-wishlist .product-name dl.variation {
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.wl-board .tinv-wishlist .product-name dl.variation dt,
.wl-board .tinv-wishlist .product-name dl.variation dd {
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.wl-board .tinv-wishlist .product-name dl.variation dt {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--muted);
  margin-right: 4px;
}
.wl-board .tinv-wishlist .product-name dl.variation dt::after { content: none; }
.wl-board .tinv-wishlist .product-name dl.variation dd {
  color: var(--ink);
}
.wl-board .tinvwl-table-manage-list .product-price {
  font-family: var(--serif);
  font-size: 18px;
}
.wl-board .tinvwl-table-manage-list .product-stock .stock {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}
.wl-board .tinvwl-table-manage-list .product-stock .stock.out-of-stock { color: var(--rust); }
.wl-board .tinvwl-table-manage-list .product-remove button {
  background: transparent;
  border: 1px solid var(--line);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 50%;
}
.wl-board .tinvwl-table-manage-list .product-remove button:hover {
  color: var(--rust); border-color: var(--rust);
}
.wl-board .tinvwl-table-manage-list .product-action button,
.wl-board .tinv-wishlist button.button,
.wl-board .tinv-wishlist a.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.2s;
}
.wl-board .tinvwl-table-manage-list .product-action button:hover,
.wl-board .tinv-wishlist button.button:hover,
.wl-board .tinv-wishlist a.button:hover {
  background: var(--rust); border-color: var(--rust);
}
.wl-board .tinv-wishlist input[type="checkbox"] {
  accent-color: var(--ink);
}
.wl-board .tinv-wishlist .tinv-lists-nav {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.wl-board .tinv-wishlist .social-buttons,
.wl-board .tinv-wishlist .tinvwl-tooltip { display: none; }

@media (max-width: 760px) {
  .wl-board .tinvwl-table-manage-list thead { display: none; }
  .wl-board .tinvwl-table-manage-list,
  .wl-board .tinvwl-table-manage-list tbody,
  .wl-board .tinvwl-table-manage-list tr,
  .wl-board .tinvwl-table-manage-list td { display: block; width: 100%; }
  .wl-board .tinvwl-table-manage-list tr {
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px 18px;
    align-items: start;
  }
  .wl-board .tinvwl-table-manage-list td { border: none; padding: 0; }
  .wl-board .tinvwl-table-manage-list .product-thumbnail { grid-row: span 4; }
  .wl-board .tinvwl-table-manage-list .product-remove { text-align: right; }
}

.wl-cta { padding: 0 0 100px; background: var(--bg); }
.wl-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 36px 40px;
  border-top: 1px solid var(--line);
}
.wl-cta__inner h3 { margin: 4px 0 0; }
@media (max-width: 760px) {
  .wl-cta__inner { flex-direction: column; align-items: flex-start; padding: 28px 0 0; }
}

/* ============================================================
 * Mein-Konto (WC /mein-konto/) — Brand-Overrides
 * Wrapper: .mk-account (in my-account.php override)
 * Plugin-Selektoren: .woocommerce-account, .woocommerce-MyAccount-*
 * ============================================================ */
.page-id-mk,
.woocommerce-account {
  background: var(--bg);
}

/* Greeting-Header */
/* Mein-Konto-Header: gleicher Shop-Stil wie Wunschliste. */
.woocommerce-products-header.mk-header { padding-top: calc(var(--header-h) - 32px); padding-bottom: 12px; }
.mk-header__lead {
  max-width: 720px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.mk-header__lead .mk-tier { color: var(--rust); }
.mk-header__logout {
  display: inline-block;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  vertical-align: baseline;
}
.mk-header__logout:hover { color: var(--rust); }

/* Account-Wrapper Grid (Sidenav | Content) */
.mk-account {
  padding: 0 0 32px;
}
.mk-account__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  margin-top: 24px;
}
@media (max-width: 980px) {
  .mk-account__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Side-Navigation */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 120px;
  align-self: start;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  background: transparent;
  border-left: 2px solid transparent;
  transition: all 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--paper);
  color: var(--ink);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--paper);
  color: var(--ink);
  border-left-color: var(--rust);
}
@media (max-width: 980px) {
  .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
  .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
  .woocommerce-MyAccount-navigation li a {
    padding: 14px 16px;
    border-left: 2px solid transparent;
    border-bottom: none;
  }
  .woocommerce-MyAccount-navigation li.is-active a {
    border-left-color: var(--rust);
    border-bottom: none;
  }
}

/* Content-Bereich */
.woocommerce-MyAccount-content { color: var(--ink); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { margin-top: 0; }
.woocommerce-MyAccount-content > p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.woocommerce-MyAccount-content > p a { color: var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none; }

/* Dashboard — Loyalty Card (dunkles Gradient) */
.mk-loyalty {
  background: linear-gradient(135deg, #2A1F14 0%, #4A3A28 100%);
  color: var(--paper);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}
.mk-loyalty::before,
.mk-loyalty::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(166, 90, 62, 0.15);
  pointer-events: none;
}
.mk-loyalty::before { right: -40px; top: -40px; width: 280px; height: 280px; }
.mk-loyalty::after { right: 60px; bottom: -60px; width: 160px; height: 160px; background: rgba(166, 90, 62, 0.10); }
.mk-loyalty__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.mk-loyalty .eyebrow {
  color: rgba(251, 247, 238, 0.7);
  margin-bottom: 14px;
}
.mk-loyalty__points {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  color: var(--paper);
}
.mk-loyalty__points small {
  font-size: 24px;
  color: rgba(251, 247, 238, 0.6);
  margin-left: 6px;
}
.mk-loyalty__lead {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(251, 247, 238, 0.7);
  max-width: 400px;
  line-height: 1.6;
}
.mk-loyalty__lead strong { color: var(--paper); }
.mk-loyalty__bar {
  margin-top: 22px;
  height: 6px;
  background: rgba(251, 247, 238, 0.15);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.mk-loyalty__bar > span {
  position: absolute; inset: 0; width: 0;
  background: var(--rust);
  display: block;
}
.mk-loyalty__tiers {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 247, 238, 0.6);
}
.mk-loyalty__tiers .is-current { color: var(--rust); }
.mk-loyalty__cta {
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--ink);
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.mk-loyalty__cta:hover { background: transparent; color: var(--paper); }
@media (max-width: 760px) {
  .mk-loyalty { padding: 30px 24px; }
  .mk-loyalty__inner { grid-template-columns: 1fr; gap: 22px; }
  .mk-loyalty__points { font-size: 48px; }
}

/* Dashboard — Vorab-Zugang */
.mk-preview {
  background: var(--paper);
  padding: 36px 40px;
  border: 1px solid var(--line);
  margin-bottom: 32px;
}
.mk-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.mk-preview__head h3 { margin: 0; }
.mk-preview__lead {
  margin-top: 10px;
  color: var(--ink-soft);
  max-width: 520px;
  line-height: 1.7;
  font-size: 14px;
}
.mk-preview__lead strong { color: var(--ink); }
.mk-preview__countdown {
  text-align: center;
  border-left: 1px solid var(--line);
  padding-left: 32px;
  flex-shrink: 0;
}
.mk-preview__countdown .mk-cd-script {
  font-family: var(--script);
  font-size: 18px;
  color: var(--rust);
}
.mk-preview__countdown .mk-cd-num {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
}
.mk-preview__countdown .mk-cd-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Dashboard — Stat-Cards */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 760px) { .mk-stats { grid-template-columns: 1fr; } }
.mk-stat {
  background: var(--paper);
  padding: 24px 28px;
  border: 1px solid var(--line);
}
.mk-stat .eyebrow { margin-bottom: 12px; }
.mk-stat__value {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
}
.mk-stat__sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.mk-recent {
  margin-top: 32px;
}
.mk-recent__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}

/* Order-Rows (Brand-Stil statt WC-Tabelle) */
.mk-orders {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mk-order-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: transparent;
}
.mk-order-row.is-active { background: var(--paper); }
.mk-order-row__thumb {
  width: 90px; height: 110px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.mk-order-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-order-row__num { font-family: var(--serif); font-size: 20px; }
.mk-order-row__items { font-size: 13px; color: var(--muted); margin-top: 4px; }
.mk-order-row__date { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.15em; text-transform: uppercase; }
.mk-order-row__total { font-family: var(--serif); font-size: 22px; }
.mk-order-row__status {
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.mk-order-row__status.is-shipping {
  background: var(--rust);
  color: var(--paper);
  border-color: var(--rust);
}
.mk-order-row__view {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
@media (max-width: 760px) {
  .mk-order-row {
    grid-template-columns: 90px 1fr;
    gap: 14px 18px;
  }
  .mk-order-row__thumb { grid-row: span 4; }
  .mk-order-row__total, .mk-order-row__status, .mk-order-row__view { grid-column: 2; }
}

/* Form-Login — Split: Pitch links · Form rechts */
.mk-login {
  padding: 24px 0 60px;
  background: var(--bg);
}
body:not(.has-hero-header) .mk-login { padding-top: var(--header-h); }
.mk-login__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 980px) {
  .mk-login__grid { grid-template-columns: 1fr; gap: 36px; }
}
.mk-login__pitch { padding: 0; }
.mk-login__pitch .eyebrow { margin-bottom: 12px !important; }
.mk-login__pitch h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
}
.mk-login__benefits {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-login__benefits li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.mk-login__benefits li:last-child { border-bottom: none; padding-bottom: 0; }
.mk-login__benefits .mk-num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--rust);
  line-height: 1;
}
.mk-login__benefits .mk-b-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
}
.mk-login__benefits .mk-b-text {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* Ein-Box-Look mit Tab-Toggle Login | Konto erstellen */
.mk-login__forms {
  background: var(--paper);
  border: 1px solid var(--line);
  align-self: stretch;
}
.mk-login__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.mk-login__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 16px 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.mk-login__tab:hover { color: var(--ink); }
.mk-login__tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.mk-login__form {
  padding: 24px 32px 26px;
}
.mk-login__form[hidden] { display: none !important; }

/* WC-Default-Passwort-Hint (langer Tipp-Text) ausblenden — Strength-Meter bleibt. */
.woocommerce-account .woocommerce-password-hint { display: none !important; }
.mk-login__form h2 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 16px;
  text-align: center;
}
.mk-login__switch {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.mk-login__switch-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 0 0 4px;
  font: inherit;
  color: var(--rust);
  cursor: pointer;
  font-weight: 500;
}
.mk-login__switch-btn:hover { text-decoration: underline; }
.mk-login__form .form-row {
  display: block;
  margin-top: 12px;
}
.mk-login__form .form-row-first,
.mk-login__form .form-row-last {
  display: inline-block;
  width: calc(50% - 6px);
  vertical-align: top;
}
.mk-login__form .form-row-first { margin-right: 8px; }
.mk-login__form .clear { display: block; clear: both; }
@media (max-width: 520px) {
  .mk-login__form .form-row-first,
  .mk-login__form .form-row-last { display: block; width: 100%; margin-right: 0; }
}
.mk-login__hint {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

/* Show-Password-Toggle (von WC.js per JS in jedes Passwort-Feld eingefuegt) */
.password-input { position: relative; display: block; }
.password-input input[type="password"],
.password-input input[type="text"] { padding-right: 44px; }
.show-password-input {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  opacity: 0.75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.show-password-input:hover,
.show-password-input:focus { opacity: 1; outline: none; }
.show-password-input::before {
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  /* Eye-Icon (Feather), inline SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23394637' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.show-password-input.display-password::before {
  /* Eye-Off-Icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23394637' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a19.77 19.77 0 0 1 4.22-5.19'/><path d='M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a19.86 19.86 0 0 1-3.17 4.19'/><line x1='1' y1='1' x2='23' y2='23'/><line x1='9.88' y1='9.88' x2='14.12' y2='14.12'/></svg>");
}
.mk-login__form .form-row label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.mk-login__form .form-row label .required { color: var(--rust); }
.mk-login__form input[type="text"],
.mk-login__form input[type="email"],
.mk-login__form input[type="password"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 6px 0;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.mk-login__form input:focus { border-bottom-color: var(--ink); }
.mk-login__form .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 14px;
}
.mk-login__form .woocommerce-form-login__rememberme input { width: auto; }
.mk-login__form .button,
.mk-login__form button[type="submit"] {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  margin-top: 14px;
  transition: all 0.2s;
}
.mk-login__form .button:hover,
.mk-login__form button[type="submit"]:hover {
  background: var(--rust); border-color: var(--rust);
}
.mk-login__form .woocommerce-LostPassword {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
}
.mk-login__form .woocommerce-LostPassword a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mk-login__form .woocommerce-LostPassword a:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* Address-Cards */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 760px) { .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px 30px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { color: var(--rust); border-bottom-color: var(--rust); }
.woocommerce-MyAccount-content address {
  font-style: normal;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

/* Allgemeine Buttons im MyAccount-Content */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .wc-block-components-button,
.woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.2s;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--rust); border-color: var(--rust);
}

/* Edit-Account / Edit-Address Forms */
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); padding: 24px 28px; margin: 32px 0; }
.woocommerce-MyAccount-content fieldset legend {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px;
}
.woocommerce-MyAccount-content .form-row {
  display: block;
  margin-bottom: 18px;
}
.woocommerce-MyAccount-content .form-row label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea,
.woocommerce-MyAccount-content .select2-selection {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
}
.woocommerce-MyAccount-content .form-row-first { display: inline-block; width: 48%; margin-right: 3.8%; }
.woocommerce-MyAccount-content .form-row-last { display: inline-block; width: 48%; }
@media (max-width: 600px) {
  .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-MyAccount-content .form-row-last { width: 100%; margin-right: 0; }
}

/* Helpers
 * ============================================================ */
.text-center { text-align: center; }
.hide-on-mobile { display: initial; }
@media (max-width: 760px) {
  .hide-on-mobile { display: none; }
}
.show-on-mobile { display: none; }
@media (max-width: 760px) {
  .show-on-mobile { display: initial; }
}

/* ============================================================
 * WhatsApp Floating-Button
 * - sitzt ueber dem My-Rewards-Widget (Loyalty-Plugin: bottom ~20px)
 * - Hover/Focus expandiert auf Pille mit Beschriftung
 * ============================================================ */
.wa-fab,
.wa-fab:hover,
.wa-fab:focus,
.wa-fab:visited {
  color: #fff;
  text-decoration: none;
}
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: #25D366; /* WhatsApp-Grün */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: width .25s ease, padding .25s ease, background .2s ease;
}
.wa-fab svg {
  flex-shrink: 0;
  margin: 0 12px;
  fill: #fff;
}
.wa-fab svg path { fill: #fff; }
.wa-fab__txt {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  max-width: 0;
  transition: opacity .2s ease .05s, max-width .25s ease, padding-right .25s ease;
  padding-right: 0;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  width: auto;
  background: #1ebe57;
}
.wa-fab:hover .wa-fab__txt,
.wa-fab:focus-visible .wa-fab__txt {
  opacity: 1;
  max-width: 240px;
  padding-right: 18px;
  color: #fff;
}
@media (max-width: 600px) {
  .wa-fab { right: 16px; bottom: 80px; }
}

/* ============================================================
 * Mobile-Audit — konsolidierter Block fuer 320-480px
 * Reparieren von Layouts, die unterhalb der bisherigen Breakpoints
 * (760/600/480) kaputt waren. Reihenfolge wie sichtbarer Page-Aufbau.
 * ============================================================ */

/* Globale Type-Skala: H1 clamp(54,7vw,108) ist auf 320px noch 54px -> zu wuchtig.
   H2 clamp(36,4vw,64) ebenso 36px -> okay aber Wrapper-Padding bricht. */
@media (max-width: 600px) {
  h1 { font-size: clamp(34px, 9vw, 54px); line-height: 1.05; }
  h2 { font-size: clamp(26px, 7vw, 40px); line-height: 1.1; }
  h3 { font-size: clamp(20px, 5vw, 26px); line-height: 1.15; }
  .container,
  .container-wide { padding: 0 18px; }
}
@media (max-width: 400px) {
  h1 { font-size: clamp(28px, 9vw, 34px); }
}

/* ---------- Header ---------- */
@media (max-width: 600px) {
  /* Header-Hoehe schrumpfen + CSS-Variable updaten, damit Hero-Spacer korrekt sind. */
  :root { --header-h: 68px; }
  /* Grid auf 2 Spalten umbauen: Logo links | Actions rechts. Das Default-Grid
     ist 1fr auto 1fr (Logo zentriert) -> auf Mobile drueckt die rechte 1fr-Spalte
     die Icons gegen das Logo statt an den Rand. */
  .header-inner {
    grid-template-columns: auto 1fr;
    padding: 10px 12px;
    gap: 8px;
  }
  .site-logo { justify-self: start; }
  /* Logo: feste Hoehe, width:auto -> kein Verzerren bei custom_logo-Output. */
  .site-logo img,
  .site-logo .custom-logo,
  .site-logo .custom-logo-link img {
    height: 48px !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
  }
  /* Rechte Spalte: Icons ganz rechts buendig. */
  .header-right { justify-self: end; gap: 0; }
  .header-actions { gap: 6px; }
  .header-actions .icon-btn { width: 32px; height: 32px; }
  .header-actions .icon-btn svg { width: 18px; height: 18px; }
  .header-actions .icon-btn[aria-label*="Suche"],
  .header-actions a[aria-label*="Suche"] { display: none; }
  .cart-count {
    min-width: 14px; height: 14px;
    font-size: 8px;
    top: -3px; right: -4px;
  }
}
@media (max-width: 400px) {
  .header-inner { padding: 10px 10px; gap: 4px; }
  .site-logo img,
  .site-logo .custom-logo { height: 42px !important; }
  .header-actions { gap: 4px; }
}

/* ---------- Announcement-Bar ---------- */
@media (max-width: 600px) {
  .announcement-bar {
    font-size: 9px;
    letter-spacing: 0.16em;
    padding: 8px 12px;
  }
  .announcement-track { height: 1.3em; }
  .announcement-track li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
  }
}

/* ---------- Mobile-Sheet (Burger-Inhalt) ---------- */
@media (max-width: 600px) {
  .mobile-sheet { padding: 4px 0 16px; }
  .mobile-sheet .nav-link {
    padding: 12px 18px;
    font-size: 19px;
  }
}

/* ---------- Front-Page Hero ---------- */
@media (max-width: 600px) {
  .hero { min-height: 480px; }
  .hero .content { padding: 0 18px 32px; }
  .hero .ctas { gap: 10px; margin-top: 22px; }
  .hero .eyebrow { margin-bottom: 14px; }
}

/* ---------- Sections / Section-Head ---------- */
@media (max-width: 600px) {
  .section { padding: 44px 0; }
}

/* ---------- Buttons ---------- */
@media (max-width: 600px) {
  .btn,
  .btn-outline {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}

/* ---------- Page-Hero (Shop-Header-Stil, Wunschliste/Konto/Shop) ---------- */
@media (max-width: 600px) {
  .woocommerce-products-header { padding: 100px 18px 24px; }
  .woocommerce-products-header.mk-header { padding: var(--header-h) 18px 8px; }
  .woocommerce-products-header__title { font-size: clamp(30px, 8vw, 44px); }
  .wl-header__lead,
  .mk-header__lead { font-size: 14px; }
  .mk-header__logout {
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: 6px;
  }
}

/* ---------- Product-Card (Grid + Inhalt) ---------- */
@media (max-width: 600px) {
  .product-card__name { font-size: 15px; }
  .product-card__fabric { font-size: 11px; }
  .product-card__price { font-size: 14px; }
  .product-card__wish {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .product-card__wish svg { width: 14px !important; height: 14px !important; }
}

/* ---------- PDP (Single Product) ---------- */
@media (max-width: 600px) {
  .pdp-wrap { padding: 0 18px; }
  .pdp-title { font-size: clamp(28px, 8vw, 40px); }
  .pdp-price { font-size: 22px; }
  .pdp-breadcrumb { font-size: 10px; letter-spacing: 0.16em; }
  /* Galerie-Rail unter dem Hauptbild platzieren */
  .pdp-gallery { display: flex; flex-direction: column; gap: 8px; }
  .pdp-gallery__rail {
    flex-direction: row !important;
    width: auto !important;
    overflow-x: auto;
    padding: 4px 0;
  }
  .pdp-gallery__rail img,
  .pdp-gallery__rail button { flex: 0 0 64px; }
}

/* ---------- Wishlist-Tabelle: Stack-Modus unter 600px aktiv lassen (Plugin),
   aber sauber. Plugin macht td -> block, wir geben jeder Zelle einen Label-
   Prefix per content. Bei <=600 erlauben wir den Plugin-Stack. */
@media (max-width: 600px) {
  .wl-board__inner { padding: 18px 14px; }
  .wl-board .tinv-wishlist table.tinvwl-table-manage-list tbody td {
    padding: 8px 0;
    text-align: left !important;
  }
  .wl-board .tinv-wishlist .product-name dl.variation {
    font-size: 11px;
    gap: 2px 8px;
  }
}

/* ---------- Konto / Login-Box ---------- */
@media (max-width: 600px) {
  .mk-login__grid { gap: 28px; }
  .mk-login__pitch h1 { font-size: clamp(28px, 8vw, 38px); }
  .mk-login__benefits .mk-num { font-size: 18px; }
  .mk-login__benefits .mk-b-title { font-size: 15px; }
  .mk-login__form { padding: 20px 18px 22px; }
  .mk-login__tab { padding: 14px 8px; font-size: 10px; letter-spacing: 0.18em; }
}

/* ---------- Footer ---------- */
@media (max-width: 600px) {
  .site-footer { padding: 56px 0 24px; margin-top: 48px; }
  .footer-grid { gap: 32px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 36px;
    padding-top: 22px;
  }
}

/* ---------- WhatsApp + My-Rewards Stack auf Mobile ---------- */
@media (max-width: 600px) {
  /* My-Rewards-Plugin steht selber bei right:20 bottom:20 — Platz freihalten */
  .wa-fab { right: 14px; bottom: 76px; width: 44px; height: 44px; }
  .wa-fab svg { margin: 0 10px; width: 20px; height: 20px; }
}

/* =========================================================================
   Shop-Archive — Toolbar (Kategorie-Tabs, Sort, Grid-Toggle)
   Prototyp: prototype/shop.jsx
   ========================================================================= */
.shop-intro { padding: 60px 0 30px; }
.shop-intro__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.shop-intro__title i { font-style: italic; }
.shop-intro__lead { max-width: 640px; margin: 18px auto 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

.shop-toolbar { padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: var(--header-h); z-index: 20; }
.shop-toolbar__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }

.shop-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.shop-tabs__tab { padding: 10px 18px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; text-decoration: none; }
.shop-tabs__tab:hover { color: var(--rust); }
.shop-tabs__tab.is-active { color: var(--rust); border-bottom-color: var(--rust); }

.shop-controls { display: flex; align-items: center; gap: 18px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.shop-controls__sep { width: 1px; height: 14px; background: var(--line); }

.shop-sort { position: relative; display: inline-flex; align-items: center; }
.shop-sort select { appearance: none; -webkit-appearance: none; background: transparent; border: none; padding: 6px 22px 6px 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); outline: none; cursor: pointer; }
.shop-sort select:focus-visible { outline: 1px dotted var(--rust); outline-offset: 4px; }
.shop-sort__chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--ink); pointer-events: none; }

.shop-grid-toggle { display: flex; gap: 6px; }
.shop-grid-toggle__btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--ink); padding: 0; }
.shop-grid-toggle__btn:hover { color: var(--rust); }
.shop-grid-toggle__btn.is-active { color: var(--rust); }

.shop-grid-section { padding: 40px 0 100px; }
.shop-grid-count { margin-bottom: 24px; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; }

/* WC-Loop-Grid: 3 oder 4 Spalten je nach Toggle (in localStorage gemerkt) */
.shop-grid-section ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shop-grid-section[data-grid="4"] ul.products { grid-template-columns: repeat(4, 1fr); }
.shop-grid-section ul.products::before,
.shop-grid-section ul.products::after { content: none; }
.shop-grid-section ul.products li.product { width: auto; margin: 0; float: none; }

@media (max-width: 900px) {
  .shop-toolbar { position: static; }
  .shop-toolbar__inner { flex-direction: column; align-items: stretch; }
  .shop-tabs { justify-content: center; }
  .shop-controls { justify-content: space-between; }
  .shop-grid-section ul.products,
  .shop-grid-section[data-grid="4"] ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .shop-grid-section ul.products,
  .shop-grid-section[data-grid="4"] ul.products { grid-template-columns: 1fr; }
  .shop-tabs__tab { padding: 8px 12px; font-size: 10px; }
}

/* ============================================================
 * FAQ-Page (page-haeufige-fragen.php)
 * ============================================================ */
.page-faq { padding-top: calc(var(--header-h) + 60px); }
.faq-intro { padding: 0 0 56px; }
.faq-intro .eyebrow { margin-bottom: 18px; }
.faq-intro__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
}
.faq-intro__title em { font-style: italic; color: var(--rust); }
.faq-intro__lead {
  margin-top: 22px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.faq-list { padding-bottom: 100px; }
.faq-acc { max-width: 820px; }
.faq-acc__row {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq-acc__row:last-of-type { border-bottom: 1px solid var(--line); }
.faq-acc__head {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  cursor: pointer; list-style: none; user-select: none;
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px);
  color: var(--ink); line-height: 1.3;
}
.faq-acc__head::-webkit-details-marker { display: none; }
.faq-acc__sign {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--sans); font-size: 16px; line-height: 1;
  color: var(--ink-soft);
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}
.faq-acc__row[open] .faq-acc__sign { transform: rotate(45deg); color: var(--rust); border-color: var(--rust); }
.faq-acc__body {
  padding-top: 16px;
  font-family: var(--serif);
  font-size: 17px; line-height: 1.7;
  color: var(--ink-soft);
}
.faq-acc__body p:last-child { margin-bottom: 0; }
.faq-cta {
  margin-top: 60px;
  font-family: var(--serif); font-size: 17px; color: var(--ink-soft);
}