/* ============================================================
 * 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.
 *
 * Newsreader traegt die Display-Rolle (Headlines), Jost alles Funktionale.
 * Herkunft, Version und Lizenz stehen in assets/fonts/THIRD-PARTY-NOTICES.md —
 * beim Austausch einer Schrift dort mitpflegen.
 * ============================================================ */
@font-face {
  font-family: 'Newsreader';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-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: 'Newsreader';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-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: 'Newsreader';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-latin-400-italic.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: 'Newsreader';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-latin-ext-400-italic.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: 'Newsreader';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/newsreader-latin-500-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: 'Newsreader';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/newsreader-latin-ext-500-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: 'Newsreader';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/newsreader-latin-600-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: 'Newsreader';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/newsreader-latin-ext-600-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: '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;
  --line:     #D9CDB6;
  --rust:     #A65A3E;
  --sage:     #6E7A55;
  --green-shutter: #4C6B3E;
  --red-shutter:   #B33A2A;

  /* Kontrast: --muted nur noch für echte UI-Labels, nicht für Fließtext.
     War #8B7959, dunkler gesetzt für WCAG AA. */
  --muted:        #6B5840;
  --text-soft:    #4A3A28;   /* für sekundären Fließtext (= ink-soft) */

  /* ----------------------------------------------------------
   * Typografie: genau zwei Rollen, plus die Signatur-Schrift.
   *
   * Es gab hier zwei parallele Namenssysteme für dieselben zwei
   * Familien — global.css sprach von --serif/--sans/--read,
   * woocommerce.css von --font-display/--font-ui. Kanonisch sind
   * jetzt die Rollennamen; --serif, --sans, --read und --script
   * sind ersatzlos entfallen.
   *
   * --font-display  Headlines und Editorial-Kursiv. Sonst nichts.
   * --font-ui       Alles Funktionale: Navigation, Preise, Fließtext,
   *                 Buttons, Varianten, Meta, Accordions, Formulare.
   * --font-script   Ausschließlich die persönliche Signatur „Servus."
   *                 auf der Theresa-Seite. Nicht im Shop verwenden.
   * ---------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, serif;
  --font-ui:      "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script:  "Caveat", cursive;

  /* Typografie-Skala */
  --text-small:   15px;   /* Meta, Varianten, Adresskarten */
  --text-base:    17px;
  --lh-body:      1.72;
  --lh-tight:     1.45;

  /* Bezugsgroesse fuer die Top-Abstaende der Seiten. Waechst mit der
     Logo-Hoehe mit, sonst rutschen die Seiteninhalte unter den Fixed-Header. */
  --header-h: 88px;
}

* { 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(--font-ui);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  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(--font-display);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0 0 0.4em;
}
/* Die Stufen liegen rund 15 % unter den Werten, die hier zu Cormorant-Zeiten
   standen. Newsreader hat eine deutlich groessere x-Hoehe und laeuft breiter:
   bei gleicher px-Angabe wirkt jede Zeile groesser und schwerer. Die Werte
   unten ergeben dieselbe optische Groesse wie vorher, brauchen aber weniger
   Platz. Nicht „einfach kleiner", sondern auf gleiche Wirkung eingestellt. */
h1 { font-size: clamp(46px, 5.9vw, 92px); }
h2 { font-size: clamp(31px, 3.4vw, 54px); }
h3 { font-size: clamp(20px, 1.8vw, 27px); }

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(--font-ui);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.script { font-family: var(--font-script); }
.serif  { font-family: var(--font-display); }

.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: 16px; }
}

/* ============================================================
 * 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(--font-ui);
  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: 13px 20px; font-size: 11px; min-height: 44px; }
}

/* ============================================================
 * Formulare: globale Input-Grundregel
 * Verhindert iOS-Autozoom (min 16px), setzt lesbare Größen zentral.
 * ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: var(--lh-tight);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  transition: border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ink-soft);
}
textarea { min-height: 120px; resize: vertical; }
select { padding-right: 36px; cursor: pointer; }

label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

/* ============================================================
 * 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: 64px;
  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-Beschriftung bewusst kraeftiger als der Fliesstext: 500 statt der vom
   body geerbten 300 (Jost 500 liegt lokal als eigener Schnitt vor, also kein
   Faux-Bold), dafuer etwas engere Laufweite, damit die sechs Punkte trotz
   groesserer Schrift nicht breiter bauen als vorher. */
.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  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; }

/* Desktop: explizit sicherstellen dass Nav sichtbar und Burger verborgen bleibt */
@media (min-width: 1025px) {
  .primary-nav--left,
  .primary-nav--right,
  .header-divider { display: flex; }
  .burger { display: none !important; }
}

.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(--font-display);
  font-size: 22px;
  /* Eigene Serif-Optik, erbt bewusst NICHT die 500 der Desktop-Nav. */
  font-weight: 400;
  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); }

/* Tablet + Mobile: Nav und Divider ausblenden, Burger einblenden */
@media (max-width: 1024px) {
  .primary-nav--left,
  .primary-nav--right,
  .header-divider { display: none; }
  .burger { display: inline-flex; }
}

/* Tablet (iPad portrait + landscape): Logo zentriert, Actions rechts */
@media (max-width: 1024px) and (min-width: 601px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
    padding: 12px 20px;
    gap: 16px;
  }
  .site-logo { justify-self: center; }
  .site-logo img,
  .site-logo .custom-logo {
    height: 58px;
    width: auto;
  }
  /* Leere linke Spalte (Nav hidden) → transparente Platzhalterbreite
     damit Logo wirklich in der Mitte bleibt. header-right braucht
     justify-self: end damit Actions an den rechten Rand wandern. */
  .primary-nav--left { visibility: hidden; }
  .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 { top: 90px; right: 24px; }
}

/* ============================================================
 * Footer
 *
 * Aufbau nach „Footer4Col": Brand-Spalte (1/3) + vier Link-Spalten (2/3),
 * darunter die Bottom-Bar. Farben als footer-lokale Variablen, weil der
 * Footer die einzige grosse dunkle Flaeche ist: --muted (#6B5840) haette auf
 * --ink nur 2,4:1 Kontrast, deshalb ein eigener Label-Ton (4,8:1, aus dem
 * Prototyp). Saemtliches Footer-CSS liegt hier — auch die Mobile-Regeln.
 * ============================================================ */
.site-footer {
  --ft-text:       var(--paper);
  --ft-text-soft:  rgba(251,247,238,0.7);
  --ft-text-faint: rgba(251,247,238,0.55);
  --ft-label:      #9C8B65;
  --ft-line:       rgba(251,247,238,0.16);
  --ft-accent:     var(--rust);

  background: var(--ink);
  color: var(--ft-text);
  padding: 80px 0 32px;
  margin-top: 80px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}
.site-footer p { margin: 0; }

/* Textlinks — bewusst nicht ".site-footer a", damit der Logo-Link nicht
   mit 85 % Deckkraft gerendert wird. */
.footer-menu a,
.footer-contact a,
.footer-legal a {
  color: var(--ft-text);
  opacity: 0.85;
  transition: color .2s ease, opacity .2s ease;
}
.footer-menu a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
  opacity: 1;
  color: var(--ft-accent);
}
.site-footer a:focus-visible {
  outline: 1px solid var(--ft-text);
  outline-offset: 3px;
}

/* Grid: Brand 1/3, Links 2/3 — drei Menue-Spalten plus eine breitere
   Kontakt-Spalte, damit die E-Mail-Adresse neben ihrem Icon einzeilig bleibt. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
  align-items: start;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  gap: 40px 32px;
}

/* Brand */
.footer-logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 20px;
}
.footer-logo img,
.footer-logo .custom-logo {
  height: 56px;
  width: auto;
  display: block;
  /* Dunkles Tinten-Logo auf dunklem Footer sichtbar machen — gleiche
     Aufhellung wie der Header ueber dunklem Hero. */
  filter: invert(1) brightness(1.15);
}
.footer-brand__text {
  max-width: 320px;
  line-height: 1.7;
  color: var(--ft-text-soft);
}
.footer-social {
  list-style: none;
  margin: 22px 0 0 -8px; /* Icon-Flaeche optisch an die Textkante ruecken */
  padding: 0;
  display: flex;
  gap: 4px;
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ft-text);
  opacity: 0.85;
  transition: color .2s ease, opacity .2s ease;
}
.footer-social__link:hover { opacity: 1; color: var(--ft-accent); }
.footer-social__link .fp-icon { width: 20px; height: 20px; }

/* Spalten */
.footer-col__title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: var(--ft-label);
  margin: 0 0 18px;
}
.footer-menu,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer-contact__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px; /* optisch auf die erste Textzeile (21px) zentriert */
  color: var(--ft-accent);
}
.footer-contact__address {
  font-style: normal;
  color: var(--ft-text-soft);
}
.footer-contact a { overflow-wrap: anywhere; }

/* Bottom-Bar */
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ft-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 12px;
  color: var(--ft-text-faint);
}
.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-legal a { color: inherit; opacity: 1; }
.footer-legal a:hover { color: var(--ft-accent); }

/* Responsive in vier Stufen (Laptop → Tablet quer → Tablet hoch → Phone):
   > 1280   Brand 1/3 | vier Link-Spalten 2/3
   ≤ 1280   Brand 1/4 | vier Link-Spalten 3/4 (schmale Laptops, 1200–1280)
   ≤ 1100   Brand oben volle Breite, vier Link-Spalten in einer Reihe (iPad quer)
   ≤  900   Link-Spalten 2x2 (iPad hoch, grosse Phones)
   ≤  600   kompakter, Kontakt volle Breite, Bottom-Bar gestapelt */
@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; }
  .footer-links { gap: 40px 28px; }
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-links { gap: 40px 32px; }
}
@media (max-width: 900px) {
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
}
@media (max-width: 600px) {
  /* Link-Spalten bleiben 2-spaltig (kuerzerer Footer), Kontakt volle Breite. */
  .site-footer { padding: 56px 0 24px; margin-top: 48px; font-size: 13px; }
  .footer-grid { gap: 36px; }
  .footer-links { gap: 28px 20px; }
  .footer-col--contact { grid-column: 1 / -1; }
  .footer-col__title { font-size: 10px; margin-bottom: 12px; }
  .footer-logo { margin-bottom: 14px; }
  .footer-logo img,
  .footer-logo .custom-logo { height: 48px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 36px;
    padding-top: 20px;
  }
}

/* ============================================================
 * 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: NUR das erste Video laeuft (kein 3er-Wechsel) — so spielt
   das Hero ueberall, aber wir laden/zeigen auf Mobil nicht alle Clips.
   Spart den Grossteil der mobilen Daten (die Folge-Clips), das erste Video
   liefert das „lebendige" Hero. preload bleibt schlank (metadata, front-page). */
@media (max-width: 768px) {
  .hero video:not(:first-of-type) { display: none !important; }
}

/* ============================================================
 * Manufaktur — Stoff-Tabelle
 * ============================================================ */
/* Letzte Sektion der Seite, deshalb unten so viel Luft wie oben. */
.mfg-fabrics { padding: 80px 0; background: var(--bg-warm); }
.mfg-fabrics .container-wide > .eyebrow { margin-bottom: 18px; }
.mfg-fabrics__title {
  margin: 0;
  font-family: var(--font-display);
  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(--font-ui);
  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: 20px 22px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.mfg-fabrics__table thead th {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.mfg-fabrics__table tbody th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  width: 18%;
}
.mfg-fabrics__table tbody td {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 16px;
}
.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-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
@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: 20px;
    padding: 20px 20px 10px;
    background: var(--bg);
  }
  .mfg-fabrics__table tbody th {
    font-size: 22px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    width: auto;
  }
  .mfg-fabrics__table tbody td {
    padding: 0 0 14px;
    border-bottom: 0;
    font-size: 16px;
    line-height: 1.7;
  }
  .mfg-fabrics__table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
  }
  .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(--font-display);
  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; }
}

/* ============================================================
 * 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); }
/* Hover: immer leichter Zoom; ueberblenden nur, wenn ein zweites Bild da ist
   (.product-card--flip aus fineprints_render_product_card). Sonst bleibt das
   einzige Bild sichtbar statt dem leeren Platzhalter-Hintergrund. */
.product-card:hover .product-card__img { transform: scale(1.03); }
.product-card--flip:hover .product-card__img--front { opacity: 0; }
.product-card--flip:hover .product-card__img--back  { opacity: 1; }

/* 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(--font-display);
  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 {
  /* Sans wie auf der Produktdetailseite (siehe .pdp-info__price-value). Der
     Produktname darueber bleibt Serif. */
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--ink);
  /* Kein nowrap: bei einer Aktion stehen hier durchgestrichener Preis,
     aktueller Preis und die Ersparnis. Die Betraege selbst bleiben unten
     einzeln unumbrechbar, die Ersparnis rutscht in eine zweite Zeile. */
  white-space: normal;
  text-align: right;
}
.product-card__price .woocommerce-Price-amount { font: inherit; color: inherit; }
.product-card__price .price { font: inherit; color: inherit; margin: 0; }
.product-card__price del,
.product-card__price ins { white-space: nowrap; }
/* Die Aktionspreis-Hierarchie (Groesse, Gewicht, Farbe von del/ins und die
   Ersparnis) steht gebuendelt am Dateiende unter „Aktionspreise". */

/* ============================================================
 * Instagram-Sektion (Startseite) — Instagram-Profil-Look
 * 6 Posts, 3 Spalten, grosse 4:5-Hochformat-Kacheln.
 * Zwei Render-Pfade mit identischer Optik:
 *   1. .insta-grid                    statisches Fallback-Grid (Theme-Markup)
 *   2. .instagram-grid--smashballoon  Live-Feed (Smash Balloon Free 6.x);
 *      Overlay + Icon injiziert main.js in .sbi_photo_wrap (gleiche Klassen).
 * ============================================================ */

/* Section-Kopf: Lead + Follow-Link rechtsbuendig in Spalte 2 */
.insta-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.insta-follow {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 880px) {
  .insta-head-side { align-items: flex-start; }
}

/* --- Fallback-Grid (statisch) --- */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.insta-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-warm);
}
.insta-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.insta-tile:hover img,
.insta-tile:focus-visible img { transform: scale(1.05); }

/* --- Overlay-Bausteine (Fallback + per JS im SBI-Pfad) --- */
.insta-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent 55%, rgba(31, 22, 16, 0.55));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}
.insta-tile:hover .insta-tile__overlay,
.insta-tile:focus-visible .insta-tile__overlay,
.sbi_item:hover .insta-tile__overlay,
.sbi_item:focus-within .insta-tile__overlay { opacity: 1; }
.insta-tile__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--paper);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insta-tile__icon {
  position: absolute;
  top: 12px; right: 12px;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------------------------------------
 * Smash-Balloon-Pfad (Free 6.x, verifiziert am Plugin-Code 6.11).
 * Plugin-Markup: #sb_instagram.sbi.sbi_col_N > #sbi_images (CSS-Grid)
 *                > .sbi_item > .sbi_photo_wrap > a.sbi_photo > img
 * Der Feed-Builder liefert Portrait 4:5, 6 Posts, 3 Spalten, Padding 0 —
 * dieses CSS ist der Robustheits-Gurt fuer Grid, Ratio und Abstaende.
 * Nur ZWEI !important (gegen Inline-Styles): .sbi_photo-Hoehe (Plugin-JS
 * setImageHeight() setzt px-Hoehen) und der #sbi_images-gap (Builder-Padding
 * rendert inline als style="gap"). Alles andere gewinnt ueber Spezifitaet
 * (Wrapper-Klasse + .sbi vor der ID schlaegt Plugin-Selektoren).
 * ------------------------------------------------------------ */
.instagram-grid--smashballoon #sb_instagram {
  width: 100%;
  padding: 0;
  background: transparent;
}
/* Plugin-Header, Load-More und blauer Follow-Button raus —
   den Kopf liefert die Section selbst. */
.instagram-grid--smashballoon .sb_instagram_header,
.instagram-grid--smashballoon #sbi_load,
.instagram-grid--smashballoon .sbi_follow_btn { display: none; }

.instagram-grid--smashballoon #sb_instagram.sbi #sbi_images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px !important;
  padding: 0;
}
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-warm);
}
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_photo_wrap {
  position: relative;
  height: 100%;
}
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_photo {
  display: block;
  height: 100% !important;
}
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_item:hover img,
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_item:focus-within img {
  transform: scale(1.05);
}
/* Video-/Carousel-Icons des Plugins weichen unserem eigenen IG-Icon */
.instagram-grid--smashballoon #sb_instagram.sbi .sbi_playbtn,
.instagram-grid--smashballoon #sb_instagram.sbi .fa-clone { display: none; }

/* Responsive: beide Pfade identisch — Tablet/Phone 2 Spalten,
 * unter 600px nur noch 4 Kacheln (2x2), damit die Sektion ruhig bleibt. */
@media (max-width: 900px) {
  .insta-grid,
  .instagram-grid--smashballoon #sb_instagram.sbi #sbi_images {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .insta-grid { gap: 6px; }
  .instagram-grid--smashballoon #sb_instagram.sbi #sbi_images { gap: 6px !important; }
  .insta-grid .insta-tile:nth-child(n+5),
  .instagram-grid--smashballoon #sb_instagram.sbi .sbi_item:nth-child(n+5) {
    display: none;
  }
}

/* ============================================================
 * 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(--font-ui);
  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; }
}
/* Honeypot (fuer Menschen unsichtbar) + Status-Meldung der Newsletter-Anmeldung */
.nl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.nl-status {
  min-height: 1.2em;
  margin: 0 auto 8px;
  font-size: 13px;
}
.nl-status.is-success { color: var(--sage); }
.nl-status.is-error   { color: var(--rust); }
.newsletter-strip button[disabled] { opacity: .6; cursor: default; }

/* ============================================================
 * 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
 * ============================================================ */

/* Seitenkopf: nur die kleine Marken-Zeile, wie auf /shop und /kollektionen.
   Sie traegt das <h1> der Seite, deshalb h1-Zeilenhoehe und -Abstaende
   zuruecknehmen, damit die Optik eine Eyebrow bleibt. */
.mfg-label {
  padding: calc(var(--header-h) + 28px) 0 24px;
}
.mfg-label .eyebrow {
  line-height: 1.5;
  margin: 0;
}

.mfg-intro {
  padding: 20px 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;
}
/* Erster Absatz nach der Ueberschrift — etwas groesser als der Fliesstext,
   analog .th-intro__lead auf der Theresa-Seite. Selektor bewusst mit
   Element-Teil, sonst gewinnt `.mfg-intro__grid p` darueber. */
.mfg-intro__grid p.mfg-intro__lead {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.65;
}
.mfg-intro__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Hervorgehobene Saetze aus dem Kundinnen-Text. Zweimal auf der Seite: nach
   dem Intro und am Ende des Fine-Print-Abschnitts. */
.mfg-highlight {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 2px solid var(--rust);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 620px;
}
/* Element-Teil im Selektor, sonst gewinnt `.mfg-intro__grid p` darueber. */
.mfg-intro__grid p.mfg-highlight {
  margin-top: 30px;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
}

/* ---- Entstehung: Foto links, Text rechts ---- */
.mfg-process {
  padding: 20px 0 80px;
}
.mfg-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 64px;
  align-items: center;
}
/* Die Quelle ist ein 2:3-Hochformat. 3:4 nimmt oben und unten je einen
   schmalen Streifen weg und haelt die Bildspalte auf einer Hoehe, die neben
   der Textspalte noch ausgewogen wirkt. */
.mfg-process__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.mfg-process__text {
  max-width: 720px;
}
.mfg-process__title {
  margin: 0 0 4px;
  font-size: clamp(28px, 3vw, 40px);
}
.mfg-process p,
.mfg-fineprint p {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}
.mfg-process strong,
.mfg-fineprint strong {
  font-weight: 500;
  color: var(--ink);
}

/* ---- Fine Print: Text links, Video rechts ---- */
.mfg-fineprint {
  padding: 0 0 100px;
}
.mfg-fineprint__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: 72px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 48px;
}
.mfg-fineprint__inner {
  max-width: 720px;
}
.mfg-fineprint__title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
}

/* Video im Hochformat neben dem Fine-Print-Text. Bei 9:16 steuert die
   BREITE alles: ueber die volle Spaltenbreite waere das Video rund 2500px
   hoch. 340px breit ergibt 604px Hoehe, das bleibt unter einer
   Bildschirmhoehe. aspect-ratio leitet die Hoehe aus der Breite ab. */
.mfg-video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: var(--ink); /* kein weisses Aufblitzen vor dem ersten Frame */
}


/* Sprungziele der Footer-Menue-Anker — der Header liegt fix ueber der Seite. */
#behind-the-scenes,
#stoffkunde {
  scroll-margin-top: 120px;
}

.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-process__grid,
  .mfg-fineprint__grid,
  .mfg-bts__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mfg-bts__stack {
    grid-template-rows: auto auto;
  }
  /* Einspaltig wuerden die beiden Hochformate sonst die volle Breite
     einnehmen und die Seite in die Laenge ziehen. */
  .mfg-process__media { max-width: 380px; }
  .mfg-fineprint__media { max-width: 340px; }
  .mfg-fineprint__grid { gap: 40px; }
}

/* Behind-the-Scenes auf Phones: Stack-Bilder nutzen height:100% — in einer
   einspaltigen Auto-Row blaeht das in mobile Safari die Hoehe auf und der
   Text-Block ueberlagert die Bilder. Feste aspect-ratio + height:auto und
   die zwei Stack-Bilder nebeneinander; Text sauber darunter im Fluss. */
@media (max-width: 760px) {
  .mfg-bts { padding: 56px 0; }
  .mfg-bts__grid { grid-template-columns: 1fr; gap: 16px; }
  .mfg-bts__main { aspect-ratio: 4 / 3; height: auto; }
  .mfg-bts__stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }
  .mfg-bts__stack img { height: auto; aspect-ratio: 1 / 1; }
  .mfg-bts__text { padding: 4px 0 0; }
  .mfg-bts__text p { margin-top: 12px; }
  .mfg-bts__text .btn { margin-top: 18px; }
  .mfg-process { padding-bottom: 56px; }
  .mfg-process__media { max-width: none; }
  .mfg-fineprint { padding-bottom: 64px; }
  .mfg-fineprint__grid { padding-top: 32px; }
  .mfg-fineprint__media { max-width: min(78vw, 300px); }
  .mfg-highlight { padding-left: 16px; }
}

/* ============================================================
 * 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(--font-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(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.25;
  color: var(--ink);
  /* Gleichmaessig lange Zeilen statt einer langen und einem Rest.
     Browser ohne Support brechen wie bisher um. */
  text-wrap: balance;
}
/* Anfuehrungszeichen sitzen auf der Grundlinie des Zitats (kein vertical-align-
   Versatz mehr, der sie in den Zeilenzwischenraum gezogen hat). line-height: 0
   haelt die Zeilenhoehe trotz der 1.5em grossen Glyphe gleichmaessig.
   Der Abstand zum Text steht nur auf der Innenseite und in em, damit er auf
   allen Breakpoints proportional bleibt. */
.th-pullquote__quote {
  font-style: normal;
  color: var(--rust);
  font-size: 1.5em;
  line-height: 0;
}
.th-pullquote__quote:first-child { margin-right: 0.1em; }
.th-pullquote__quote:last-child  { margin-left: 0.1em; }
.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(--font-display);
  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: 130px 0; }
.th-familie__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.th-familie__inner .eyebrow {
  display: inline-block;
  margin-bottom: 22px;
}
.th-familie__h {
  margin: 0 auto;
}
/* dezente Zierlinie zwischen Headline und Fliesstext */
.th-familie__h::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--rust);
  margin: 28px auto 0;
}
.th-familie__inner p {
  margin: 24px auto 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 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-cta__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .th-haus__caption { bottom: 16px; right: 16px; }
  .th-figures .container-wide {
    grid-template-columns: 1fr;
  }
  .th-cta__buttons { justify-content: flex-start; }
}

/* ============================================================
 * Kollektionen Übersicht (/kollektionen/)
 * ============================================================ */
.page-kollektionen { padding-top: 0; }

.kol-intro {
  padding: calc(var(--header-h) + 28px) 0 24px;
  text-align: center;
}
.kol-intro .container-wide {
  max-width: 760px;
}
/* Traegt seit dem Entfernen der Schlagzeile das <h1> der Seite, soll aber die
   kleine Marken-Zeile bleiben: h1-Zeilenhoehe und -Abstaende zuruecknehmen. */
.kol-intro .eyebrow {
  line-height: 1.5;
  margin: 0;
}

.kol-list {
  padding: 20px 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(--font-display);
  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(--font-display);
  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(--font-display);
  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; }
/* h1 in .kt-intro erbt var(--font-display) aus globalen h1-Regeln — korrekt */
.kt-intro__lead {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 17px;
  font-family: var(--font-ui);
}

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

/* Adressen — linke Spalte */
.kt-addresses { display: flex; flex-direction: column; gap: 0; }
.kt-block {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  margin-bottom: 36px;
}
.kt-block .eyebrow { margin-bottom: 12px; }
/* Ortsname = emotional/dekorativ → Serif */
.kt-block h2,
.kt-block h3 { margin: 0; font-size: clamp(22px, 2vw, 30px); font-family: var(--font-display); }
/* Adresse = funktional → Sans-Serif */
.kt-block__addr {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-family: var(--font-ui);
}
.kt-block__sub {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-ui);
}
/* Öffnungszeiten = funktional → Sans-Serif */
.kt-hours {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 5px;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--ink-soft);
}
.kt-hours dt { color: var(--muted); margin: 0; font-weight: 400; }
.kt-hours dd { margin: 0; }

/* Vertrauenssignale-Block */
.kt-trust {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 4px;
}
.kt-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kt-trust__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  line-height: 1.5;
}
.kt-trust__list li::before {
  content: '·';
  color: var(--rust);
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  margin-top: 1px;
}

/* WhatsApp-Button in linker Spalte */
.kt-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 20px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
  min-height: 48px;
}
.kt-whatsapp:hover { background: #1ebe5b; transform: translateY(-1px); color: #fff; }
.kt-whatsapp__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Antwortzeit-Hinweis */
.kt-response-time {
  margin-top: 10px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--muted);
}

/* Kontakt-Karte — rechte Spalte (E-Mail + WhatsApp statt Formular) */
.kt-card {
  background: var(--paper);
  padding: 40px 44px;
  border: 1px solid var(--line);
  align-self: start;
}
/* Karten-Headline = emotional → Serif */
.kt-card h2 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-family: var(--font-display); }
.kt-card .eyebrow { margin-bottom: 18px; }
.kt-card__lead {
  margin: 14px 0 0;
  font-size: 15px;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  line-height: 1.6;
}
.kt-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.kt-card__actions .btn {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  text-align: center;
  font-family: var(--font-ui);
}
.kt-card__actions .kt-whatsapp {
  margin-top: 0;
  width: 100%;
  justify-content: center;
}
.kt-card__direct {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
}
.kt-card__direct dt {
  font-size: 11px;
  font-family: var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  align-self: center;
}
.kt-card__direct dd {
  margin: 0;
  font-size: 15px;
  font-family: var(--font-ui);
  color: var(--ink);
}
.kt-card__privacy {
  margin-top: 14px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--muted);
}
.kt-card__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 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);
}
/* Statisches Standort-Bild (ersetzt die fruehere interaktive Leaflet-Karte).
   Lokal gehostet, fuellt die Canvas-Flaeche, Klick fuehrt zu OpenStreetMap. */
.kt-map__static {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.kt-map__static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease, filter .3s ease;
}
.kt-map__static:hover img,
.kt-map__static:focus-visible img {
  transform: scale(1.02);
  filter: brightness(1.03);
}
.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);
  font-family: var(--font-ui);
  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-card { padding: 32px 28px; }
}
@media (max-width: 600px) {
  .kt-card { padding: 28px 20px; }
  .kt-card__actions .btn { min-height: 56px; }
  .kt-whatsapp { width: 100%; justify-content: center; }
  .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(--font-display);
  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)
 *
 * Verdichtet am 2026-08-20. Leitgedanke: der obere Produktbereich soll auf
 * einem normalen Desktop so hoch bauen, dass der Bereich darunter („Es passt
 * auch") schon anreisst, statt zwei Bildschirmhoehen entfernt zu liegen.
 *
 * Bewusste Abweichung vom Prototyp (prototype/shop.jsx, ProductDetail), der die
 * luftigere Fassung zeigt — auf Anweisung des Auftraggebers. Nicht
 * „zurueckreparieren", ohne das vorher zu klaeren.
 *
 * Die Hebel, nach Wirkung sortiert:
 *   1. Folgebereich: schlanke Kopfzeile statt zweizeiliger Serif-Headline
 *   2. Kaufspalte: ein Abstandsrhythmus statt neun frei gewaehlter Margen
 *   3. Bildbuehne: hoehengesteuert am Viewport statt breitengesteuert
 * ============================================================ */
.page-product { padding-top: calc(var(--header-h) + 4px); }

/* Breadcrumb */
.pdp-breadcrumb { padding: 12px 0 8px; }
.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; }

/* Main 2-Spalt */
.pdp-main { padding: 12px 0 20px; }
.pdp-main__grid {
  display: grid;
  /* Frueher 1.3fr/1fr. Seit die Bildhoehe am Viewport haengt, ist die Buehne
     schmaler als ihre Spalte — bei 1.3fr blieben rund 320px tote Flaeche
     zwischen Bild und Kaufspalte stehen. Das Verhaeltnis gibt die Breite jetzt
     der Kaufspalte, die dadurch weniger umbricht und selbst kuerzer wird. */
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: flex-start;
}

/* Galerie: grosses Hauptbild, darunter eine horizontale Thumbnail-Zeile
   (frueher stand die Rail als 76px-Spalte links neben dem Bild). */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Nur ein Bild: keine Thumbnail-Zeile. */
.pdp-gallery--single .pdp-gallery__rail { display: none; }
.pdp-gallery__rail {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  max-width: 100%;
  /* Wenige Thumbs stehen mittig unterm Bild. 'safe' haelt bei vielen Thumbs
     die linke Kante erreichbar — plain center wuerde beim Ueberlauf beide
     Enden abschneiden. Engines ohne safe-Support fallen auf linksbuendig
     zurueck, das ist verschmerzbar. */
  justify-content: safe center;
}
.pdp-gallery__thumb {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 0 0 64px;
  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;
  /* Vertikal scrollen bleibt dem Browser, horizontale Gesten gehoeren der
     Swipe-Navigation (main.js) — unterbindet auch den Doppeltipp-Zoom, der
     auf iOS sonst mit schnellen Blaetter-Taps kollidiert. */
  touch-action: pan-y;
}

/* Ab Desktop wird die Buehne hoehen- statt breitengesteuert.
   Vorher bestimmte die Spaltenbreite die Hoehe: bei 1440px Fensterbreite
   ergaben 636px Breite im Verhaeltnis 4:5 rund 795px Hoehe — allein das Bild
   war fast eine ganze Bildschirmhoehe, unabhaengig davon, wie hoch das Fenster
   ueberhaupt ist. Jetzt gibt die Fensterhoehe den Ton an, das Verhaeltnis 4:5
   bleibt und die Breite folgt daraus. Das Bild fuellt weiterhin fast die volle
   sichtbare Hoehe, laesst aber Platz fuer den Folgebereich.

   `width: auto` zusammen mit gesetzter Hoehe und aspect-ratio leitet die Breite
   ab; `max-width: 100%` faengt schmale Spalten ab, in denen die abgeleitete
   Breite nicht mehr passt. Unterhalb 1000px bleibt es beim alten Verhalten. */
/* Tablet-Band: Ohne die fruehere 76px-Rail-Spalte (+14px Abstand) wuerde die
   breitengesteuerte Buehne die volle Spaltenbreite fuellen und das Bild
   waechst um genau diese 90px — bei 768px hiesse das +112px Bildhoehe, die
   die Seite ohne Not verlaengern. Die Galerie bleibt deshalb auf der alten
   Bildbreite und steht mittig; einzig die Thumb-Zeile darunter kommt als
   ehrlicher Preis des neuen Layouts dazu. Auf dem Phone (<=600px) zaehlt
   jeder Pixel Bildbreite, dort gilt weiterhin die volle Breite. */
@media (min-width: 601px) and (max-width: 999px) {
  .pdp-gallery {
    width: calc(100% - 90px);
    margin-inline: auto;
  }
}
@media (min-width: 1000px) {
  /* Zentrierung in der Grid-Spalte uebernimmt jetzt die ganze Galerie (nicht
     mehr die Stage allein): als nicht-gestrecktes Grid-Kind ist sie genau so
     breit wie die Stage, und die Thumb-Zeile darunter richtet sich daran aus. */
  .pdp-gallery {
    justify-self: center;
    max-width: 100%;
  }
  .pdp-gallery__stage {
    /* Budget der Galerie-Spalte bleibt das der frueheren Nur-Bild-Loesung
       (min(74vh, 740px)): die Thumb-Zeile darunter kostet ~95px (64px breite
       Thumbs im 3:4-Format = 85px hoch, plus 10px Abstand). 62vh + 95px
       ergibt bei 900px Fensterhoehe ~653px (vorher 666), die 645px-Kappung
       plus Zeile exakt die alten 740px — die Seite wird also nicht hoeher. */
    height: min(62vh, 645px);
    width: auto;
    max-width: 100%;
  }
  /* Die Rail darf die shrink-to-fit-Breite der Galerie nicht aufspannen:
     width:0 nimmt sie aus der Breitenrechnung, min-width spannt sie danach
     exakt auf Stage-Breite. Nur so scrollen viele Thumbs, statt die Zeile
     (und damit die Galerie) zu verbreitern. */
  .pdp-gallery__rail {
    width: 0;
    min-width: 100%;
  }
}
.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);
  /* Ueber den Cursor-Zonen (z-index 1, unten): der Zoom-Knopf muss klickbar
     bleiben und seinen eigenen Cursor zeigen. */
  z-index: 2;
}
.pdp-gallery__zoom:hover { color: var(--rust); }

/* Dezente Hinweise fuer die Blaetter-Klickzonen: kein sichtbarer Pfeil, nur
   ein Chevron-Cursor je Bildhaelfte. Zwei Pseudo-Elemente, weil `cursor`
   nicht pro Haelfte EINES Elements gesetzt werden kann — und als Teil der
   Stage ueberleben sie deren innerHTML-Tausch beim Variantenwechsel. Sie
   muessen hit-testbar sein (kein pointer-events:none), sonst zeigt der
   Browser ihren Cursor nie; Klicks melden trotzdem die Stage als target,
   genau darauf hoert die Blaetter-Logik in main.js. Nur auf Zeigegeraeten
   und nur, wenn es mehr als ein Bild gibt. Die Chevron-Farbe ist im
   data-URI hartkodiert (Ink #2A1F14 + heller Schein) — CSS-Variablen sind
   in cursor-URLs technisch nicht moeglich. */
@media (hover: hover) {
  .pdp-gallery:not(.pdp-gallery--single) .pdp-gallery__stage::before,
  .pdp-gallery:not(.pdp-gallery--single) .pdp-gallery__stage::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
  }
  .pdp-gallery:not(.pdp-gallery--single) .pdp-gallery__stage::before {
    left: 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' opacity='.85'/%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5' fill='none' stroke='%232A1F14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, pointer;
  }
  .pdp-gallery:not(.pdp-gallery--single) .pdp-gallery__stage::after {
    right: 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' opacity='.85'/%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5' fill='none' stroke='%232A1F14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, pointer;
  }
}

/* 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
 *
 * Die Abstaende liefen frueher auf neun frei gewaehlte Werte hinaus
 * (14/14/22/28/28/22/14/22/32). Zusammen ergab das rund 200px reine Luft und
 * keine erkennbare Ordnung. Jetzt gibt es zwei Stufen, und jede Marge unten
 * benennt eine davon. Wer hier etwas aendert, aendert die Stufe, nicht den
 * Einzelwert. */
.pdp-info {
  position: sticky;
  top: 104px;
  align-self: flex-start;
  --pdp-gap:    12px;  /* innerhalb einer Gruppe */
  --pdp-gap-lg: 16px;  /* zwischen zwei Gruppen */
}
.pdp-info__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 11px;
  line-height: 1.2;
  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 {
  /* Deutlich kleiner als die frueheren clamp(40px, 4vw, 64px): Newsreader
     baut bei gleicher px-Angabe groesser als Cormorant, die optische Wirkung
     bleibt damit erhalten. Und das H1 war der zweitgroesste Hoehenposten der
     Spalte. */
  font-size: clamp(30px, 3vw, 44px);
  margin: 8px 0 0;
  line-height: 1.06;
}
.pdp-info__blurb {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.45;
}
/* Preisgruppe: Betraege und Ersparnis in einer Zeile. */
.pdp-info__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 0;
  margin-top: var(--pdp-gap);
}
.pdp-info__price-value {
  /* Preise in der Sans: Zahlen sind darin klarer zu lesen als in der Serif,
     die nur noch Produktnamen und Headlines traegt (Auftraggeber-Entscheidung
     2026-08-20). Jost laeuft breiter als die Display-Serif, darum etwas
     kleiner gesetzt. */
  font-family: var(--font-ui);
  /* Auf schmalen Schirmen mitschrumpfen: sonst stehen durchgestrichener Preis,
     aktueller Preis und Ersparnis auf 320px zu gedraengt. Gleiches
     clamp-Muster wie bei .pdp-info__title. */
  font-size: clamp(26px, 4.1vw, 32px);
  line-height: 1.15;
}
.pdp-info__price-value .woocommerce-Price-amount { font: inherit; color: inherit; }
/* WooCommerce wrappt das price_html der Variantendaten in <span class="price">.
   Der Wrapper darf die Typografie der Gruppe nicht anfassen, damit die Anzeige
   vor und nach der Variantenwahl identisch aussieht. */
.pdp-info__price-value .price { font: inherit; color: inherit; margin: 0; }
/* Steuerhinweis: im Normalfall inline neben dem Betrag, wie im Prototyp.
   Er stand hier zwischenzeitlich immer in einer eigenen Zeile, weil er bei
   Aktionspreisen als Flex-Nachbar mit Streichpreis und Ersparnis um den Platz
   konkurrierte und die Zeile unkontrolliert umbrach. Dieser Grund gilt aber nur
   im Aktionsfall — deshalb wird jetzt genau der Fall adressiert statt pauschal
   eine Zeile zu verbrauchen. Faellt :has() aus, greift die Basisregel und der
   Hinweis steht inline: kein kaputter Zustand, nur der aeltere Umbruch. */
.pdp-info__price-note {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}
.pdp-info__price:has(del) .pdp-info__price-note {
  flex: 0 0 100%;
  margin-top: 6px;
}

/* Lieferzeit-Zeile unter dem Preis. Erbt Groesse und Farbe von
   .pdp-info__price-note (dieselbe stille Meta-Rolle), braucht aber einen
   eigenen Abstand nach oben: das <p> steht ausserhalb von .pdp-info__price und
   haette aus der p-Basisregel nur einen Abstand nach UNTEN, wuerde also direkt
   am Preis kleben. */
.pdp-info__delivery {
  margin-top: 6px;
}
.pdp-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--pdp-gap-lg);
}

/* === WC Variations-Form als Brand-Selektoren stylen === */
.pdp-variants form.variations_form { margin-top: var(--pdp-gap-lg); }
.pdp-variants table.variations { width: 100%; border-collapse: collapse; }
.pdp-variants table.variations tr {
  display: block;
  margin-bottom: var(--pdp-gap);
}
/* Der Abstand zum Warenkorb-Block kommt von dort, nicht von der letzten Zeile.
   Sonst addieren sich beide zu einer toten Luecke unter dem letzten Merkmal. */
.pdp-variants table.variations tr:last-child { margin-bottom: 0; }
.pdp-variants table.variations th,
.pdp-variants table.variations td {
  display: block;
  padding: 0;
  background: none;
}
.pdp-variants table.variations th {
  font-size: 11px;
  /* Ohne eigene Zeilenhoehe erbt die Beschriftung die 1.72 des Fliesstexts —
     bei 11px eine 19px hohe Zeilenbox fuer eine 11px-Versalzeile. Mal drei bis
     vier Merkmale summiert sich das. */
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 400;
}
/* Der gewaehlte Wert steht hinter der Beschriftung („FARBE: ROT-HEART PRINT").
   Bei den Farbpunkten ist sonst nur der Punkt selbst die Information, der Name
   der Farbe steht nirgends lesbar.

   Das Element fuellt woo-variation-swatches selbst — hier wird es nur
   ausgezeichnet. Nicht per JS nachbauen: ein eigener Anhang steht neben diesem
   hier und der Wert erscheint doppelt. */
.pdp-variants table.variations th .woo-selected-variation-item-name {
  color: var(--ink);
}

.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;
}

/* WCs eigene Preisanzeige im Formular aus: sobald Variantenpreise differieren,
   liefert WC sie in .single_variation mit — der Preis oben
   (.pdp-info__price-value) wird stattdessen per JS live aktualisiert. */
.pdp-variants .woocommerce-variation-price { display: none; }

/* 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);
  /* Bedienelement, also Sans. Jost laeuft schmaler als die Display-Serif,
     darum trotz kleinerer px-Angabe optisch gleichwertig. */
  font-family: var(--font-ui);
  font-size: 15px;
  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: sichtbarer Kreis und Trefferflaeche sind zwei Dinge.
 *
 * Das <li> ist die Trefferflaeche: 44x44 und bewusst OHNE border-radius, damit
 * auch die Ecken reagieren. Der sichtbare Kreis ist der innere Span mit 40px.
 * So bauen die Variantenzeilen kompakter, ohne das Tippziel zu verkleinern.
 *
 * Das ist zugleich eine Korrektur. Vorher trug das <li> selbst den Kreis mit
 * `border-radius: 50%`, und Hit-Testing folgt der Rundung: die Ecken des
 * 44x44-Quadrats waren tot. Mit elementFromPoint an den vier Ecken gemessen —
 * alle vier verfehlten den Swatch, auf Desktop wie auf 320px.
 *
 * Nicht ueber ein Pseudo-Element am <li> loesen: woo-variation-swatches
 * belegt `::before` dort bereits selbst (Tooltip), unsere Groessenangaben
 * wurden davon ueberschrieben und die Flaeche war nicht anklickbar.
 * `.fp-swatch--label` ist ausgenommen, das ist eine breite Schaltflaeche mit
 * eigener Geometrie (siehe weiter unten). */
.pdp-variants .color-variable-item:not(.fp-swatch--label) {
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pdp-variants .color-variable-item:not(.fp-swatch--label) .variable-item-contents,
.pdp-variants .color-variable-item:not(.fp-swatch--label) .variable-item-span-color {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform .2s ease;
}
/* Aktiv-Ring und Hover sitzen am sichtbaren Kreis, nicht an der Trefferflaeche
   — sonst umliefe ein Quadrat den runden Swatch. */
.pdp-variants .color-variable-item:not(.fp-swatch--label).selected .variable-item-span-color,
.pdp-variants .color-variable-item:not(.fp-swatch--label)[aria-checked="true"] .variable-item-span-color {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.pdp-variants .color-variable-item:not(.fp-swatch--label):hover .variable-item-span-color {
  transform: scale(1.08);
}

/* Button-Swatches: 48px-Quadrat (Groesse) / Pill mit Padding (Stoff).
   Von 56 auf 48 verkleinert; mit 48px weiterhin klar ueber der 44px-Grenze
   fuer Tippziele. */
.pdp-variants .button-variable-item {
  min-width: 48px;
  height: 48px;
  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;
  /* Stoff-Pills und Groessen-Buttons sind Bedienelemente, keine Ueberschriften.
     Die Display-Serif traegt auf dieser Seite nur noch das H1. */
  font-family: var(--font-ui);
  font-size: 14px !important;
  font-weight: 400;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0.02em !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;
}

/* === Farb-Swatches: Darstellungsarten ===
   Gesetzt von inc/product-variants.php. Der Modus steckt als Klasse
   fp-swatch--<art> am <li>, die Farben als Inline-Style am Span. Kreisgeometrie
   und Aktiv-Ring kommen weiter von .color-variable-item oben, hier steht nur,
   was je Art dazukommt.

   Einfarbig, zweifarbig, dreifarbig und gemustert brauchen kein eigenes CSS:
   sie sind reine Hintergruende auf dem bestehenden Span. Der Streifen fuer
   „gemustert" ist die Formel aus dem Prototyp. */

/* Bild: das Foto fuellt den Kreis, zugeschnitten statt verzerrt. */
.pdp-variants .fp-swatch--image .fp-swatch__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
}
/* Die Innenkante des Spans liegt hinter dem Bild und waere unsichtbar. Als
   Pseudo-Element liegt sie darueber und haelt auch helle Fotos auf hellem Grund
   abgegrenzt.

   Sitzt am Span, nicht mehr am <li>: das <li> ist seit der Verdichtung die
   quadratische 44px-Trefferflaeche, ein Ring darauf waere ein Quadrat um den
   runden Swatch. */
.pdp-variants .fp-swatch--image .variable-item-span-color {
  position: relative;
  /* Klammert das Foto zusaetzlich zu seinem eigenen border-radius auf die
     Kreisform. Ohne das blieben Ecken stehen, sobald eine Fremdregel die
     Rundung am <img> ueberschreibt. */
  overflow: hidden;
  border-radius: 50%;
}
.pdp-variants .fp-swatch--image .variable-item-span-color::after {
  content: "";
  position: absolute;
  inset: 0;
  /* !important ist hier noetig: woo-variation-swatches legt eine eigene
     ::after-Regel auf die Swatch-Spans, die die Rundung auf 0 zurueckholt.
     Der Ring wurde dadurch als Quadrat um den runden Swatch gezeichnet. */
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

/* Name als Schaltflaeche: wenn sich aus dem Namen keine ehrliche Farbe ableiten
   laesst („Herz Muster", „Dreifarbig"), steht der Name da, statt eine Farbe zu
   behaupten. Optik wie die Groessen-Buttons, damit es als Auswahl lesbar ist. */
.pdp-variants .color-variable-item.fp-swatch--label {
  width: auto !important;
  height: 48px !important;
  min-width: 48px;
  padding: 0 14px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--line) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.pdp-variants .color-variable-item.fp-swatch--label:hover {
  border-color: var(--ink) !important;
  transform: none;
}
.pdp-variants .color-variable-item.fp-swatch--label.selected,
.pdp-variants .color-variable-item.fp-swatch--label[aria-checked="true"] {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  /* Der Ink-Ring der Farbpunkte passt hier nicht, die Fuellung zeigt die Wahl. */
  outline: none !important;
}
.pdp-variants .color-variable-item.fp-swatch--label .variable-item-contents,
.pdp-variants .color-variable-item.fp-swatch--label .fp-swatch__label {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  /* Wie .button-variable-item: Bedienelement, also Sans. */
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.pdp-variants .color-variable-item.fp-swatch--label.selected .fp-swatch__label,
.pdp-variants .color-variable-item.fp-swatch--label[aria-checked="true"] .fp-swatch__label {
  color: var(--paper);
}

/* Disabled / nicht waehlbar */
/* Nur .disabled (Kombination existiert nicht) wird ausgegraut. Frueher stand
   hier auch .out-of-stock — seit Lagerbestand 0 "Auf Anfrage" bedeutet
   (inc/product-inquiry.php), muss eine ausverkaufte Variante waehlbar
   aussehen und waehlbar sein. */
.pdp-variants .variable-item.disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through;
}

.pdp-variants .woocommerce-variation-price {
  margin: 18px 0;
  /* Ausgeblendet (siehe display:none weiter oben), der Vollstaendigkeit halber
     aber auf derselben Rolle wie die uebrige Preisdarstellung. */
  font-family: var(--font-ui);
  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: var(--pdp-gap-lg);
}
.pdp-variants .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  height: 52px;
}
.pdp-variants .quantity input.qty {
  width: 52px; height: 52px;
  border: 0;
  background: transparent;
  text-align: center;
  /* Mengenfeld: Eingabe, also Sans. */
  font-family: var(--font-ui);
  font-size: 16px;
}
.pdp-variants .single_add_to_cart_button {
  flex: 1;
  height: 52px;
  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;
}

/* Inline-Hinweis bei fehlender Variantenauswahl. Ersetzt WCs natives
   window.alert; wird von main.js in die betroffene Attribut-Zelle gehaengt und
   verschwindet, sobald dort eine Option gewaehlt ist.

   Bewusst kein Signalrot: Rust ist die Akzentfarbe der Marke, das genuegt als
   Warnung. Sichtbarkeit kommt aus Groesse, Flaeche und der Kante links, nicht
   aus der Farbe. */
.pdp-variants .pdp-variant-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--rust);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ink);
}
.pdp-variants .pdp-variant-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--rust);
  color: var(--paper);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}
/* Kurzes Einblenden, damit die Meldung beim Klick auffaellt. Ohne Bewegung
   uebersieht man sie unter den Swatches leicht. */
@keyframes fp-variant-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.pdp-variants .pdp-variant-error { animation: fp-variant-error-in 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pdp-variants .pdp-variant-error { animation: none; }
}

/* Formular-Ebene: nicht kombinierbare Auswahl, gehoert zu keinem Merkmal. */
.pdp-variants .pdp-variant-error--form { margin-top: 18px; }

/* Das betroffene Merkmal selbst markieren: die Beschriftung allein ist grau und
   klein, ohne Markierung sucht man die Stelle. */
.pdp-variants table.variations tr.pdp-variant-row--missing th.label,
.pdp-variants table.variations tr.pdp-variant-row--missing th.label label {
  color: var(--rust);
}

/* Wishlist auf PDP */
.pdp-wishlist { margin-top: 10px; }
.pdp-wishlist .tinv-wraper { margin: 0; }
.pdp-wishlist .tinvwl_add_to_wishlist_button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 44px ist die Untergrenze fuer Tippziele — nicht weiter verkleinern. */
  height: 44px;
  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: var(--pdp-gap);
  padding: 10px 14px;
  border: 1px dashed var(--rust);
  background: rgba(166,90,62,0.05);
  display: flex;
  gap: 14px;
  align-items: center;
}
/* Das „+" ist ein Ornament, keine Signatur. Auf Shop- und Produktseiten laeuft
   die Schrift-Rolle Script nicht mit — die bleibt der persoenlichen Handschrift
   auf der Theresa-Seite vorbehalten. Die Auszeichnung traegt hier die
   Rostfarbe, nicht die Schriftart. */
.pdp-loyalty__plus {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 300;
  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: var(--pdp-gap-lg);
  border-top: 1px solid var(--line);
}
.pdp-acc__row { border-bottom: 1px solid var(--line); }
.pdp-acc__head {
  width: 100%;
  padding: 10px 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; }
/* Produktmerkmale: aus der Mehrfachauswahl im Backend erzeugte Aufzaehlung */
.pdp-acc__body ul.fp-produktmerkmale {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-acc__body ul.fp-produktmerkmale li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 8px;
}
.pdp-acc__body ul.fp-produktmerkmale li:last-child { margin-bottom: 0; }
.pdp-acc__body ul.fp-produktmerkmale li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rust);
}

/* "Es passt auch" — nutzt .product-grid + .product-card */
/* Folgebereich „Es passt auch"
 *
 * Hier lag der groesste einzelne Hoehenposten der Seite: 80px Vorlauf plus ein
 * .section-head mit zweizeiliger Serif-Headline und 64px Untermarge kosteten
 * rund 274px, bevor die erste Karte ueberhaupt begann. Auf einer Seite, deren
 * Zweck es ist, den naechsten Artikel zu zeigen, war der Wegweiser damit hoeher
 * als das Ziel.
 *
 * Statt .section-head steht hier eine eigene, schlanke Kopfzeile. Das <h2>
 * bleibt fuer Semantik und Suchmaschinen erhalten, tritt aber als kleine
 * Versalzeile auf. .section-head selbst bleibt fuer alle anderen Seiten
 * unveraendert — der grosse Editorial-Kopf ist dort richtig, nur hier nicht. */
.pdp-related { padding: 24px 0 56px; border-top: 1px solid var(--line); }
.pdp-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.pdp-related__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.pdp-related__all {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.pdp-related__all:hover { color: var(--rust); }
.pdp-related .product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 0;
}

@media (max-width: 600px) {
  /* Auf schmalen Schirmen bricht „Alle ansehen" sonst mit dem Titel zusammen. */
  .pdp-related__head { gap: 12px; }
  .pdp-related__all { font-size: 10px; letter-spacing: 0.14em; }
}

@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) {
  /* Galerie braucht hier nichts Eigenes mehr: Hauptbild oben + horizontale
     Thumb-Zeile darunter ist seit der Galerie-Ueberarbeitung das Layout auf
     ALLEN Breakpoints (Basisregeln bei .pdp-gallery). */
  .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(--font-ui);
  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);
}

/* Zurück-Link zu „Mein Bereich" (nur eingeloggt) — der Account-Nav-Eintrag
   „Wunschliste" verlinkt auf diese Standalone-Seite, die sonst keinen Weg
   zurueck in den Konto-Bereich bietet. */
.wl-header__back {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wl-header__back:hover { color: var(--rust); }

.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(--font-ui);
  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(--font-display);
  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(--font-ui);
  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(--font-display);
  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(--font-ui);
  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; }

  /* Action-Zelle ueber beide Spalten — sonst landet sie via Auto-Placement in
     der 100px-Thumbnail-Spalte und der Button-Text wird abgeschnitten. */
  .wl-board .tinvwl-table-manage-list .product-action { grid-column: 1 / -1; }

  /* Button-Grunddesign auf Mobile: Text umbrechen statt clippen. */
  .wl-board .tinvwl-table-manage-list .product-action button,
  .wl-board .tinv-wishlist button.button,
  .wl-board .tinv-wishlist a.button,
  .wl-board .tinv-wishlist input.button {
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
  /* Per-Item-Action („Ausführung wählen") volle Breite. */
  .wl-board .tinvwl-table-manage-list .product-action button {
    width: 100%;
    letter-spacing: 0.14em;
    padding: 13px 14px;
  }

  /* Footer-Toolbar (im tfoot): linke Gruppe (Select + Anwenden) und rechte
     Gruppe (Warenkorb-Buttons) untereinander — die zwei Warenkorb-Buttons
     aber NEBENEINANDER. */
  .wl-board .tinv-wishlist tfoot td {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .wl-board .tinv-wishlist .tinvwl-to-left,
  .wl-board .tinv-wishlist .tinvwl-to-right {
    width: 100%;
    float: none;
    margin: 0;
  }
  /* Select + Anwenden nebeneinander */
  .wl-board .tinv-wishlist .tinvwl-input-group { display: flex; width: 100%; }
  .wl-board .tinv-wishlist .tinvwl-input-group .tinvwl-break-input-filed,
  .wl-board .tinv-wishlist .tinvwl-input-group select { flex: 1 1 auto; min-width: 0; }
  .wl-board .tinv-wishlist .tinvwl-to-left .button {
    width: auto;
    white-space: nowrap;
    letter-spacing: 0.12em;
    padding: 12px 16px;
  }
  /* Die zwei Warenkorb-Buttons (Ausgewählte / Alle) nebeneinander */
  .wl-board .tinv-wishlist .tinvwl-to-right { display: flex; flex-direction: row; gap: 10px; }
  .wl-board .tinv-wishlist .tinvwl-to-right .button {
    flex: 1 1 0;
    width: auto;
    padding: 12px 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

.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-bottom: 12px; } /* Top-Versatz kommt vom Spacer in page.php, wie beim Wunschlisten- und Shop-Header */
.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(--font-ui);
  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(--font-ui);
  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; }

/* ------------------------------------------------------------
 * WPLoyalty „Punkte & Prämien"-Endpoint (.wlr-myaccount-page)
 * Das Plugin ist zwar responsiv, kollabiert aber erst am Viewport
 * (≤600px). In unserer Account-Content-Spalte (ab ≤980px volle Breite,
 * aber schmal auf Tablet) quetschen sich die 3 Punkte-Karten und die
 * 2-3-spaltigen Karten-Grids. Hier an unseren Account-Stack-Breakpoint
 * koppeln + den Waehrungs-Select baendigen. Nur Layout, keine Farben.
 * ---------------------------------------------------------- */
.woocommerce-MyAccount-content .wlr-myaccount-page { padding: 0; }
.woocommerce-MyAccount-content .wlr-myaccount-page #wlr-used-rewards > div:first-child {
  flex-wrap: wrap;
  gap: 8px;
}
.woocommerce-MyAccount-content .wlr-myaccount-page #wlr-used-rewards select {
  max-width: 100%;
}
@media (max-width: 980px) {
  /* Punkte-Karten + Karten-Grids einspaltig, solange die Content-Spalte
     schmal ist — verhindert das Quetschen/Ueberlappen. */
  .woocommerce-MyAccount-content .wlr-myaccount-page #wlr-points { flex-direction: column; }
  .woocommerce-MyAccount-content .wlr-myaccount-page #wlr-available-points,
  .woocommerce-MyAccount-content .wlr-myaccount-page #wlr-redeemed-points,
  .woocommerce-MyAccount-content .wlr-myaccount-page #wlr-used-rewards { width: 100%; }
  .woocommerce-MyAccount-content .wlr-myaccount-page .wlr-earning-options .wlr-campaign-container,
  .woocommerce-MyAccount-content .wlr-myaccount-page .wlr-customer-reward {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .woocommerce-MyAccount-content .wlr-myaccount-page .wlr-earning-options .wlr-campaign-container,
  .woocommerce-MyAccount-content .wlr-myaccount-page .wlr-customer-reward {
    grid-template-columns: 1fr;
  }
}

/* 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(--font-display);
  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(--font-ui);
  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;
}
/* „noch" vor der Tageszahl: eine Beschriftung, kein handgeschriebener Gruss.
   Deshalb Sans wie jedes andere Label im Konto, die Rostfarbe traegt die
   Auszeichnung. Vgl. .pdp-loyalty__plus. */
.mk-preview__countdown .mk-cd-script {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.mk-preview__countdown .mk-cd-num {
  font-family: var(--font-display);
  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 — Geburtstag als Membership-Schritt
 *
 * Die Karte steht zwischen dem dunklen Punktestand und dem Rest des Kontos und
 * muss auffallen, ohne wie eine Meldung auszusehen. Sie tut das mit Flaeche und
 * Groesse, nicht mit Farbe: dieselbe helle Flaeche und dieselbe Haarlinie wie
 * .mk-preview, aber mehr Polster und eine Ueberschrift in der Display-Schrift,
 * die sonst nirgends im Dashboard vorkommt. Die Rostfarbe traegt nur die
 * Marken-Zeile und einen Strich an der Oberkante, sonst nichts.
 *
 * Aufteilung wie .mk-loyalty__inner und .mk-preview__head: Text links, Handlung
 * rechts, unter 760px gestapelt. Damit bleibt die Karte im Rhythmus der
 * Nachbarn, statt als Fremdkoerper quer im Stapel zu stehen.
 * ============================================================ */
.mk-bday {
  background: var(--paper);
  border: 1px solid var(--line);
  /* Der einzige Farbakzent. Ein Strich, keine Flaeche: er zieht den Blick an
     die Oberkante, ohne dass die Karte einen Zustand behauptet. */
  border-top: 1px solid var(--rust);
  padding: clamp(30px, 4vw, 44px) clamp(24px, 3.4vw, 44px);
  margin-bottom: 32px;
}
.mk-bday__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
/* Die Textspalte bekommt eine Breitenbremse, sonst laeuft die Zeile auf breiten
   Schirmen bis an den Knopf heran und die Karte liest sich wie ein Absatz. */
.mk-bday__text { max-width: 52ch; }
.mk-bday .eyebrow { margin-bottom: 16px; }
.mk-bday__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.mk-bday__lead {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Gleicher Knopf wie im Konto-Formular (.mk-login__form .button): dunkle
   Flaeche, helle Schrift. Der helle Knopf von .mk-loyalty__cta funktioniert nur
   auf der dunklen Karte, hier waere er unsichtbar. */
.mk-bday__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  padding: 15px 30px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.mk-bday__cta:hover,
.mk-bday__cta:focus {
  background: transparent;
  color: var(--ink);
}
.mk-bday__cta:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}
/* Ab hier wird die zweite Spalte zu schmal fuer die Beschriftung: der Knopf
   rutscht unter den Text und nimmt die volle Breite, wie im Login-Formular. */
@media (max-width: 760px) {
  .mk-bday__inner { grid-template-columns: 1fr; gap: 26px; }
  .mk-bday__text { max-width: none; }
  .mk-bday__cta { width: 100%; }
}

/* Dashboard — Stat-Cards */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
/* Steht der Geburtstag oben als Karte, fehlt hier die dritte Kachel. Zwei
   gleich breite Spalten statt zwei Drittel eines Dreierrasters. */
.mk-stats--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .mk-stats,
  .mk-stats--2 { 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(--font-display);
  font-size: 36px;
  line-height: 1;
}
.mk-stat__sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
/* Kleiner Weiterweg aus einer Kachel heraus, im Ton der uebrigen
   Konto-Textlinks (.mk-order-row__view). Bewusst kein Knopf: hinterlegter
   Geburtstag ist ein Status, keine offene Aufgabe. */
.mk-stat__link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mk-stat__link:hover,
.mk-stat__link:focus {
  color: var(--rust);
  border-bottom-color: var(--rust);
}
/* Bildunterschrift direkt unter dem Wert, fuer den Countdown bis zum
   Geburtstag. Bewusst dieselbe Behandlung wie .mk-cd-label beim Vorab-Zugang:
   klein, gesperrt, in Versalien. Damit liest sie sich als Beschriftung der Zahl
   darueber und nicht als weiterer Satz. */
.mk-stat__meta {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Der hinterlegte Geburtstag traegt zwei Zeilen mehr als die Nachbarkacheln.
   Die Marken-Zeile in Rost setzt ihn als Membership-Status ab, der laengere
   Satz braucht mehr Zeilenluft als die knappen Zahlen daneben. */
.mk-stat--bday .eyebrow { color: var(--rust); }
.mk-stat--bday .mk-stat__meta { color: var(--rust); }
.mk-stat--bday .mk-stat__sub {
  line-height: 1.6;
  margin-top: 12px;
  color: var(--ink-soft);
}

.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(--font-display); 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(--font-display); 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(--font-ui);
  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 {
  /* Kein Top-Padding: den Fixed-Header haelt allein der Spacer aus page.php
     frei. Frueher stand hier padding-top: var(--header-h), und genau deshalb
     lagen WooCommerce-Meldungen, die VOR diesem Block gerendert werden, unter
     dem Header. */
  padding: 0 0 60px;
  background: var(--bg);
}
.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(--font-display);
  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(--font-display);
  font-size: 22px;
  color: var(--rust);
  line-height: 1;
}
.mk-login__benefits .mk-b-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
}
.mk-login__benefits .mk-b-text {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

/* 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(--font-ui);
  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; }
/* WC-Strength-Meter (per JS erzeugt: #password_strength.woocommerce-password-strength,
   role=alert) im Brand-Stil. WC haengt ihn als Sibling hinter das Passwort-Input,
   also in dieselbe .form-row wie unseren statischen .mk-login__pw-hint. */
.mk-login__form .woocommerce-password-strength {
  display: block;
  margin: 10px 0 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  border-radius: 2px;
  padding: 2px 0;
}
.mk-login__form .woocommerce-password-strength.short,
.mk-login__form .woocommerce-password-strength.bad { color: var(--rust); }
.mk-login__form .woocommerce-password-strength.good { color: var(--ink-soft); }
.mk-login__form .woocommerce-password-strength.strong { color: var(--sage); }
/* Aufleuchten, wenn der Nutzer trotz schwachem Passwort auf „Konto erstellen" klickt.
   Klasse wird per JS gesetzt/entfernt (main.js). Rust-Puls + kurzer Wackler,
   respektiert prefers-reduced-motion. */
.mk-login__form .woocommerce-password-strength.is-flash {
  animation: mk-pw-flash 0.9s ease-out;
}
@keyframes mk-pw-flash {
  0%   { background: rgba(166, 90, 62, 0); transform: translateX(0); }
  12%  { background: rgba(166, 90, 62, 0.16); transform: translateX(-4px); }
  30%  { transform: translateX(4px); }
  45%  { transform: translateX(-2px); }
  60%  { transform: translateX(0); }
  100% { background: rgba(166, 90, 62, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-login__form .woocommerce-password-strength.is-flash {
    animation: mk-pw-flash-soft 0.9s ease-out;
  }
  @keyframes mk-pw-flash-soft {
    0%, 100% { background: rgba(166, 90, 62, 0); }
    30%      { background: rgba(166, 90, 62, 0.16); }
  }
}
/* WC deaktiviert den Submit-Button (disabled + .disabled) bei zu schwachem
   Passwort. Sichtbar machen, damit der „tut nichts"-Klick nicht raetselhaft ist. */
.mk-login__form button[type="submit"]:disabled,
.mk-login__form button[type="submit"].disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mk-login__form button[type="submit"]:disabled:hover,
.mk-login__form button[type="submit"].disabled:hover {
  background: var(--ink); border-color: var(--ink);
}
.mk-login__form h2 {
  font-family: var(--font-ui);
  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(--font-ui);
  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"],
.mk-login__form input[type="date"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.mk-login__form input:focus { border-bottom-color: var(--ink); }
.mk-login__form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
/* WPLoyalty-Signup-Hinweis („Registriere Dich und erhalte X Punkte!"),
   rendert als <span> + <br> ueber dem Geburtstagsfeld (Hook woocommerce_register_form) */
.mk-login__form .wlr-signup-message {
  display: block;
  margin: 18px 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--rust);
}
.mk-login__form .wlr-signup-message + br { display: none; }
/* Statischer Hinweis auf die Passwort-Policy unterm Register-Passwortfeld */
.mk-login__pw-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.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(--font-ui);
  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; }
  /* Address-Title ist ein space-between-Flex aus zwei langen deutschen Strings
     (z. B. „Rechnungsadresse" + „Rechnungsadresse hinzufügen") -> auf dem Phone
     ueberlaufen sie und schieben die ganze Seite (inkl. Nav) horizontal raus.
     Auf Mobile untereinander, Add-Link umbrechen. */
  .woocommerce-MyAccount-content .woocommerce-Address-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Grid-Items duerfen schrumpfen, sonst erzwingt langer Inhalt Overflow. */
  .woocommerce-MyAccount-content .woocommerce-Address { min-width: 0; }
}
.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(--font-display);
  font-size: 24px;
  margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  font-family: var(--font-ui);
  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(--font-display);
  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(--font-ui);
  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(--font-ui);
  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(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
/* input[type="date"] gehoert hier dazu: WPLoyalty haengt das Geburtstagsfeld als
   Datumsfeld in dieses Formular, und ohne den Eintrag stand es als einziges Feld
   im Browser-Standardkasten, waehrend alles daneben auf einer Haarlinie sitzt.
   Im Login-/Registrierformular war der Fall schon abgedeckt (.mk-login__form). */
.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 input[type="date"],
.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(--font-display);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
}
.woocommerce-MyAccount-content .form-row input:focus { border-bottom-color: var(--ink); }
.woocommerce-MyAccount-content .form-row input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
.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; }
}

/* ── Geburtstagsfeld in den Kontodaten ──
   WPLoyalty haengt sein Feld ans Ende des Formulars, hinter „Passwort aendern".
   Der Kopf davor (PHP, woocommerce_edit_account_form Prioritaet 5) gibt ihm
   wieder einen Zusammenhang; die Haarlinie oben trennt ihn vom Feldsatz darueber.

   scroll-margin-top am Feld selbst, weil der Sprung aus dem Konto-Dashboard auf
   die vom WooCommerce-Formularfeld erzeugte Marke #wlr_dob_field zeigt. Ohne
   Versatz laege das Feld unter dem fixierten Seitenkopf; die zusaetzlichen 150px
   ziehen den Kopf mit ins Bild, statt nur das nackte Feld. --header-real-h misst
   main.js aus der tatsaechlichen Kopfhoehe, --header-h ist der Notwert daraus,
   gleiche Kombination wie .fp-order-anchor in checkout.css. */
.mk-bday-field {
  margin: 32px 0 18px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.mk-bday-field .eyebrow { margin-bottom: 10px; }
.mk-bday-field__lead {
  margin: 0;
  max-width: 56ch;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
}
.woocommerce-MyAccount-content #wlr_dob_field {
  scroll-margin-top: calc(var(--header-real-h, var(--header-h)) + 176px);
}

/* 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
 * - Desktop: Hover/Focus expandiert auf Pille mit Beschriftung
 * - Touch/Mobile: reine Bubble (nur Icon), unten rechts (siehe @media unten)
 * - das WPLoyalty-Launcher-Widget ist generell ausgeblendet → kein Stapeln noetig
 * ============================================================ */
.wa-fab,
.wa-fab:hover,
.wa-fab:focus,
.wa-fab:visited {
  color: #fff;
  text-decoration: none;
}
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  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(--font-ui);
  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;
}

/* Touch-Geraete (kein echter Hover): reine Bubble — NUR das runde Icon, KEIN
   ausklappendes Label, KEIN Hover-Expand. Tap oeffnet direkt den wa.me-Link
   (ist ohnehin ein <a href>). Greift geraetebasiert, nicht nur per Breakpoint —
   der Hover-Pille-Effekt bleibt damit nur auf echten Zeigegeraeten (Desktop). */
@media (hover: none) {
  .wa-fab {
    width: 56px;            /* fester Kreis */
    height: 56px;
    padding: 0;
  }
  /* Hover/Focus aendert auf Touch nichts (kein „klebriger" Zustand). */
  .wa-fab:hover,
  .wa-fab:focus-visible { width: 56px; background: #25D366; }
  /* Label komplett aus. */
  .wa-fab__txt,
  .wa-fab:hover .wa-fab__txt,
  .wa-fab:focus-visible .wa-fab__txt {
    display: none;
  }
  .wa-fab svg { margin: 0 auto; }
}

/* Mobile-Position: iPhone-tauglich, weiter unten (knapp ueber der
   Browserleiste), Safe-Area beruecksichtigen, Platz fuers My-Rewards-Widget. */
@media (max-width: 600px) {
  .wa-fab {
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
 * 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; }

  /* Seitenspezifische Hero-/Section-Titel: tragen eigene Klassen-clamps (40-56px
     Minimum) und ueberstimmen per Spezifitaet die obige h1/h2-Verkleinerung ->
     blieben sonst auf dem Phone zu wuchtig. Hier explizit nachziehen. */
  .th-intro__title,
  .jr-intro__title,
  .shop-intro__title,
  .faq-intro__title { font-size: clamp(30px, 9vw, 44px); line-height: 1.05; }
  .pdp-info__title  { font-size: clamp(28px, 8vw, 40px); line-height: 1.08; }
  /* nowrap-Titel: auf dem Phone umbrechen lassen, sonst horizontaler Scroll. */
  .th-intro__title,
  .jr-intro__title,
  .shop-intro__title,
  .faq-intro__title,
  .pdp-info__title { white-space: normal; }
}
@media (max-width: 400px) {
  h1 { font-size: clamp(28px, 9vw, 34px); }
  .th-intro__title,
  .jr-intro__title,
  .shop-intro__title,
  .faq-intro__title { font-size: clamp(26px, 9vw, 36px); }
  .pdp-info__title { font-size: clamp(25px, 8vw, 33px); }
}

/* ---------- Header ---------- */
@media (max-width: 600px) {
  /* Header-Hoehe schrumpfen + CSS-Variable updaten, damit Hero-Spacer korrekt sind. */
  :root { --header-h: 72px; }
  /* 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: 52px;
    width: auto;
    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: 46px; }
  .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) {
  /* Abstand zum Eyebrow verkleinern: diese Header haben alle einen
     Spacer-<div> (height: var(--header-h)) ueber sich, der den Fixed-Header
     freihaelt, die zusaetzlichen 100px Top-Padding waren doppelt gemoppelt.
     Der Konto-Header war frueher die Ausnahme und trug den Versatz selbst.
     Seit page.php den Spacer auch fuer Konto-Seiten ausgibt, gilt hier
     dieselbe Regel wie ueberall, es gibt keinen Sonderwert mehr. */
  .woocommerce-products-header { padding: 28px 18px 24px; }
  .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; }
  /* Die Aktionspreis-Anpassungen fuer schmale Schirme stehen im Block
     „Aktionspreise" am Dateiende: dort gewinnen sie die Kaskade gegen die
     dortigen Basisregeln gleicher Spezifitaet. */
  .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) ----------
   Die frueheren Regeln fuer .pdp-wrap/.pdp-title/.pdp-price stammten aus
   einer alten Template-Version und matchten nichts mehr (das Template nutzt
   .pdp-info__title etc., geregelt im Typo-Block weiter oben). Der Galerie-
   Umbau (Rail unters Bild) ist seit der Galerie-Ueberarbeitung Basis-Layout
   auf allen Breakpoints — hier bleibt nur noch Phone-Feinschliff. */
@media (max-width: 600px) {
  .pdp-breadcrumb { font-size: 10px; letter-spacing: 0.16em; }
  .pdp-gallery__thumb { flex: 0 0 56px; }
}

/* ---------- 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: 20px; }
  .mk-login__benefits .mk-b-title { font-size: 18px; }
  .mk-login__benefits .mk-b-text { font-size: 14px; }
  .mk-login__form { padding: 20px 18px 22px; }
  .mk-login__tab { padding: 14px 8px; font-size: 10px; letter-spacing: 0.18em; }
}

/* ---------- WhatsApp-Bubble auf Mobile ---------- */
@media (max-width: 600px) {
  /* Reine Bubble (Groesse/Form via @media (hover:none) oben). Icon zentriert,
     gut sichtbar. Position kommt aus dem Safe-Area-Block oben (unten rechts). */
  .wa-fab svg { width: 24px; height: 24px; }
}

/* ---------- WPLoyalty-Launcher („My Rewards"-Floating-Widget) deaktivieren ----------
   Das schwebende Launcher-Widget soll generell NICHT erscheinen (Wunsch:
   nur die WhatsApp-Bubble unten rechts). Das Treueprogramm selbst (Punkte,
   Mein-Konto-Bereich) bleibt unberuehrt — hier wird ausschliesslich der
   fixe Launcher-Container ausgeblendet. Greift breit ueber die bekannten
   WPLoyalty-Launcher-Klassen (Add-on nutzt feste wlr-/wlr-launcher-Praefixe). */
.wlr-launcher,
.wlr-launcher-widget,
.wlr-launcher-container,
#wlr-launcher,
#wlr_launcher,
.wlr-floating-widget,
.wlr-launcher-button {
  display: none !important;
}

/* =========================================================================
   Shop-Archive — Toolbar (Kategorie-Tabs, Sort, Grid-Toggle)
   Prototyp: prototype/shop.jsx
   ========================================================================= */
.shop-intro { padding: 60px 0 30px; }
.shop-intro__title { font-family: var(--font-display); 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: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  /* Echte Unterkante des Fixed-Headers, in main.js gemessen und gesetzt.
     --header-h ist als Rueckfall gedacht (JS aus): bewusst gerundet und
     kleiner als der Header, deshalb rutschte die Leiste damit darunter. */
  top: var(--header-real-h, var(--header-h));
  z-index: 20;
}
.shop-toolbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Kategorie-Tabs */
.shop-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs__tab {
  flex-shrink: 0;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.shop-tabs__tab:hover { color: var(--rust); }
.shop-tabs__tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--rust);
  font-weight: 500;
}

/* Sonder-Tab „Reststückerln" (Sale-Seite) — abgesetzt von den Kategorie-Tabs */
.shop-tabs__tab--sale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  color: var(--rust);
  font-weight: 500;
}
.shop-tabs__tab--sale:hover { color: var(--ink); }
.shop-tabs__tab--sale svg { flex-shrink: 0; }

/* Rechte Kontroll-Gruppe */
.shop-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.shop-controls__sep { width: 1px; height: 16px; background: var(--line); }

/* Sortier- und „pro Seite"-Feld.
 *
 * Die Breite bestimmt der sichtbare <span>, nicht das <select>. Grund: ein
 * <select> misst sich selbst am laengsten <option> und nimmt dabei
 * `text-transform: uppercase` und `letter-spacing` nicht zuverlaessig mit;
 * nach dem Nachladen der Webfont wiederholt nicht jede Engine die Messung.
 * Ergebnis waren abgeschnittene Beschriftungen („PREIS AUFSTEIGE…"). Der
 * <span> ist gewoehnlicher Text und wird ueberall korrekt gemessen.
 *
 * Das <select> liegt deckungsgleich und unsichtbar darueber und bleibt das
 * bedienbare Element — native Auswahlliste, auch auf dem Handy. Es steht im
 * Markup VOR dem <span>, damit der Fokus-Ring per Geschwister-Selektor gesetzt
 * werden kann.
 */
.shop-sort { position: relative; display: inline-flex; align-items: center; }
.shop-sort__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.shop-sort__chev { color: var(--ink-soft); flex-shrink: 0; }
/* Spezifitaet: assets/css/woocommerce.css setzt `.woocommerce form select`
   (0,1,2) und laedt NACH global.css — der .shop-toolbar-Prefix legt uns per
   Klassenzahl darueber. */
.shop-toolbar .shop-sort__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.shop-toolbar .shop-sort__input:focus-visible ~ .shop-sort__value {
  outline: 1px dotted var(--rust);
  outline-offset: 4px;
}
.shop-toolbar .shop-sort__input:hover ~ .shop-sort__value { color: var(--rust); }

/* Seitentitel des Shops: traegt seit dem Entfernen der Schlagzeile das <h1>,
   soll aber die kleine Marken-Zeile bleiben. h1-Defaults zuruecknehmen. */
.shop-intro__label {
  line-height: 1.5;
  margin: 0;
}

/* Grid-Toggle Buttons */
.shop-grid-toggle { display: flex; gap: 4px; }
.shop-grid-toggle__btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0;
  transition: color .2s ease, border-color .2s ease;
}
.shop-grid-toggle__btn:hover { color: var(--ink); border-color: var(--line); }
.shop-grid-toggle__btn.is-active { color: var(--rust); border-color: var(--rust); }

/* Produktzähler */
.shop-grid-section { padding: 40px 0 100px; }
.shop-grid-count {
  margin-bottom: 24px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------
 * WC-Loop-Grid: 3 oder 4 Spalten per data-grid Toggle.
 * Das generische ul.products-Fallback-Grid in woocommerce.css nimmt die
 * Shop-Sektion per :not() aus — diese Regeln hier sind also die einzige
 * Layout-Quelle fürs Shop-Grid und brauchen keine !important-Abwehr mehr.
 * Die Spaltenzahl je Viewport steht im Responsive-Block weiter unten.
 * --------------------------------------------------------------- */
.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; }

/* ---------------------------------------------------------------
 * Pagination (Shop + Kollektionsseiten)
 *
 * WooCommerce liefert dafuer einen umrandeten Kasten mit lila Hover-Flaechen
 * (woocommerce.css: .woocommerce nav.woocommerce-pagination ul li a …). Hier
 * komplett neu aufgebaut: runde Flaechen, aktuelle Seite in Ink gefuellt.
 *
 * Spezifitaet: WC kommt auf 0,3,4 (li a:hover / span.current), unsere Regeln
 * liegen mit der zusaetzlichen .page-numbers-Klasse darueber. `nav.` im
 * Selektor haelt die Konto-Bestellliste heraus, die dieselbe Klasse an einem
 * <div> mit eigenen Weiter/Zurueck-Buttons traegt.
 * --------------------------------------------------------------- */
body.woocommerce nav.woocommerce-pagination {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
  color: var(--rust);
  background: transparent;
  border-color: var(--line);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
/* Pfeile abgesetzt: dauerhaft umrandet, damit „vor/zurueck" sofort lesbar ist. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.next {
  color: var(--ink);
  border-color: var(--line);
  font-size: 15px;
  letter-spacing: 0;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  min-width: 22px;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}

/* ---------------------------------------------------------------
 * Responsive — Breakpoint-System der Shop-Übersicht.
 *
 * Abgeleitet aus den 2026 verbreiteten Viewports (Galaxy-Basis 360,
 * iPhone 390/393/402, Pixel & A-Serie 412, Plus/Max 428-440; Tablets
 * hochkant 744-834). Keine Geräte-Weichen: die Spalten sind 1fr-Anteile
 * und wachsen fluid, die Stufen schalten nur Spaltenzahl und Dichte um.
 *
 *   <=1024  Tablet quer:  Toolbar nicht mehr sticky
 *   <=900   Tablet hoch:  2 Spalten, Toolbar zweizeilig, Toggle aus
 *   <=600   Phone (Kern 360-440): kompakte Toolbar, engerer
 *           Spalten-Abstand, gestapelte Karten-Fusszeile, Touch-Größen
 *   <=359   Sehr schmal (WCAG-320-Reflow, Altgeräte): 1 Spalte
 * --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .shop-toolbar { position: static; }
}
@media (max-width: 900px) {
  .shop-toolbar__inner { flex-wrap: wrap; }
  .shop-tabs { flex-basis: 100%; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
  .shop-controls { width: 100%; justify-content: space-between; }
  .shop-grid-section ul.products,
  .shop-grid-section[data-grid="4"] ul.products { grid-template-columns: repeat(2, 1fr); }
  /* Grid-Toggle auf Tablet/Mobile ausblenden — Spalten sind fest */
  .shop-grid-toggle { display: none; }
  .shop-controls__sep:last-of-type { display: none; }
}
@media (max-width: 600px) {
  .shop-intro { padding: 40px 0 16px; }
  .shop-toolbar { padding: 10px 0; }

  /* Tabs als Vollbreiten-Scrollzeile bis an die Viewport-Kanten (das
     Container-Padding ist hier fix 18px): die Trennlinie läuft durch,
     und ein am rechten Rand angeschnittener Tab zeigt von selbst, dass
     sich die Zeile schieben lässt. */
  .shop-tabs { margin: 0 -18px; padding: 0 18px 2px; }
  .shop-tabs__tab { padding: 10px 12px; font-size: 12px; }
  .shop-tabs__tab:first-child { padding-left: 0; }

  .shop-controls { font-size: 12px; gap: 12px; }
  /* 44px-Touchfläche: bedient wird das unsichtbare <select> darüber,
     das die Fläche des sichtbaren <span> übernimmt. */
  .shop-sort__value { font-size: 12px; gap: 6px; min-height: 44px; }

  .shop-grid-section { padding: 24px 0 64px; }
  .shop-grid-count { font-size: 13px; margin-bottom: 16px; }

  /* 2 Spalten: Spalten-Abstand enger (mehr Kartenbreite), Zeilen-Abstand
     größer — die gestapelte Fusszeile braucht Luft nach unten. */
  .shop-grid-section ul.products,
  .shop-grid-section[data-grid="4"] ul.products { gap: 32px 14px; }

  /* Karten-Fusszeile: Name, Variante und Preis untereinander statt
     nebeneinander. Auf ~150-190px Kartenbreite quetschten sich Serif-Name
     und (Sale-)Preisgruppe sonst gegenseitig in den Umbruch. */
  .shop-grid-section .product-card__foot { flex-direction: column; gap: 0; padding-top: 12px; }
  .shop-grid-section .product-card__price { text-align: left; margin-top: 6px; }
  /* Alter Preis inline VOR dem aktuellen statt als eigene Zeile darüber —
     linksbündig gestapelt liest sich „alt → neu" in einer Zeile natürlicher.
     Passt bei 11px auch auf die schmalste 2-Spalten-Karte (~150px). */
  .shop-grid-section .product-card__price del { display: inline; margin-right: 7px; }

  /* Badges kompakter — zwei gestapelte Badges verdeckten sonst auf der
     schmalen Karte das halbe Produktbild. */
  .shop-grid-section .product-card__badge { font-size: 9px; padding: 4px 8px; letter-spacing: 0.14em; }
  .shop-grid-section .product-card__badges { bottom: 10px; left: 10px; gap: 4px; }

  /* Pagination: Touch-Flächen nicht unter 40px */
  body.woocommerce nav.woocommerce-pagination { margin-top: 44px; padding-top: 24px; }
  .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
    min-width: 40px;
    height: 40px;
    font-size: 12px;
  }
}
@media (max-width: 359px) {
  /* WCAG-Reflow-Fall (320px) und Altgeräte: 2 Spalten ergäben <135px
     Kartenbreite — unter ~150px wird der Serif-Name unleserlich eng.
     Eine Spalte, großzügiger Zeilenabstand. */
  .shop-grid-section ul.products,
  .shop-grid-section[data-grid="4"] ul.products { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
 * 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(--font-display);
  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(--font-display); 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(--font-ui); 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(--font-display);
  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(--font-display); font-size: 17px; color: var(--ink-soft);
}

/* ============================================================
 * Rechts- & Service-Seiten (Impressum, AGB, Datenschutz,
 * Widerruf, Versand, Lieferbedingungen, Größentabelle, Retouren)
 * Lange Fließtexte: lesbare Zeilenlänge, ruhige vertikale Rhythmik,
 * mobil-optimiert. Wird über die Klasse .legal-doc am <div> aktiviert.
 * ============================================================ */
.legal-doc {
  max-width: 760px;            /* lesbare Zeilenlänge statt 1320px Container */
  margin: 0 auto;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.legal-doc > .legal-lead {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 48px;
}
.legal-doc h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--ink);
  margin: 56px 0 16px;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 32px 0 10px;
}
.legal-doc p { margin: 0 0 18px; }
.legal-doc a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--ink); }
.legal-doc ul, .legal-doc ol { margin: 0 0 18px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc hr {
  border: 0; border-top: 1px solid var(--line);
  margin: 48px 0;
}
/* Eyebrow-Datum / „zuletzt aktualisiert" */
.legal-doc .legal-meta {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.7;
  margin-bottom: 40px;
}
/* Hervorgehobener Hinweiskasten (z. B. Widerrufs-Ausnahme, Vorkasse-IBAN) */
.legal-doc .legal-callout {
  background: var(--paper);
  border-left: 3px solid var(--rust);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 16px;
}
.legal-doc .legal-callout p:last-child { margin-bottom: 0; }
/* Definitionsliste für Impressum/Kontaktblöcke */
.legal-doc .legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 24px;
  margin: 0 0 24px;
}
.legal-doc .legal-dl dt { font-weight: 600; color: var(--ink); }
.legal-doc .legal-dl dd { margin: 0; }
/* Tabellen (Größentabelle, Versandkosten) */
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 16px;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.legal-doc thead th {
  font-family: var(--font-ui); font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.legal-doc figure.wp-block-table { margin: 24px 0; overflow-x: auto; }

@media (max-width: 600px) {
  .legal-doc { font-size: 16px; }
  .legal-doc .legal-dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-doc .legal-dl dt { margin-top: 12px; }
  .legal-doc .legal-dl dt:first-child { margin-top: 0; }
  .legal-doc th, .legal-doc td { padding: 10px 8px; font-size: 15px; }
}

/* ============================================================
 * Journal-Beitrag — Text-Header-Fallback (kein Beitragsbild)
 * single.php zeigt diesen Kopf statt des Bild-Heros. Header bleibt dann
 * dunkel/lesbar (body ohne .has-hero-header).
 * ============================================================ */
.jr-single-head {
  padding: calc(var(--header-h) + 64px) 0 8px;
}
.jr-single-head__title {
  font-size: clamp(40px, 5vw, 76px);
  margin: 16px 0 0;
}
.jr-single-head__meta {
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============================================================
 * Journal-Beitrag — Fliesstext-Stile (.entry-content in single.php)
 * Bewusst KONSISTENT mit assets/css/editor.css gehalten, damit das
 * Schreib-Erlebnis (Editor) dem veroeffentlichten Beitrag entspricht.
 * ============================================================ */
.entry-content h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 1.4em 0 0.4em; }
.entry-content h3 { font-size: clamp(21px, 2vw, 26px); margin: 1.2em 0 0.3em; }
.entry-content p { margin: 0 0 1em; }

.entry-content blockquote {
  border-left: 2px solid var(--rust);
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.4em;
  font-family: var(--font-display);
  font-size: 1.35em;
  line-height: 1.4;
  color: var(--ink-soft);
  font-style: italic;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--font-ui);
  font-size: 0.62em;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.entry-content ul,
.entry-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.entry-content li { margin: 0 0 0.4em; }

.entry-content figure.wp-block-image { margin: 1.8em 0; }
.entry-content figure.wp-block-image figcaption {
  margin-top: 0.6em;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ============================================================
 * Scroll-Reveal — sanftes Einblenden beim Reinscrollen
 * ------------------------------------------------------------
 * Markup: Klasse `.reveal` auf das Element setzen. JS (main.js)
 * fuegt beim Eintreten in den Viewport `.is-revealed` hinzu.
 * Ruhiger, kurzer Versatz nach oben + Fade — passend zum ruhigen
 * Slow-Fashion-Ton. Verzoegerungs-Varianten `.reveal--d1/d2/d3`
 * fuer gestaffeltes Einblenden (z.B. Karten in einer Reihe).
 *
 * WICHTIG (No-JS-Schutz): Die `opacity:0`-Startlage gilt NUR, wenn
 * JS aktiv ist — dann setzt main.js `.reveal-on` auf <html>. Ohne
 * JS (oder bei JS-Fehler) bleibt der Content normal sichtbar, statt
 * unsichtbar haengenzubleiben. Reduced-Motion deaktiviert die
 * Startlage ebenfalls.
 * ============================================================ */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on .reveal.is-revealed {
  opacity: 1;
  transform: none;
}
.reveal-on .reveal--d1 { transition-delay: 0.08s; }
.reveal-on .reveal--d2 { transition-delay: 0.16s; }
.reveal-on .reveal--d3 { transition-delay: 0.24s; }

/* Reduced-Motion: nie verstecken/animieren, egal ob JS laeuft. */
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
 * Nur fuer Screenreader (.screen-reader-text)
 *
 * Wortgleich zur WordPress-Core-Regel (wp-includes/css/dist/block-library),
 * damit sich Fremd-Markup genauso verhaelt wie mit Core-CSS. Das Theme braucht
 * die Regel selbst, weil zwei Dinge zusammenkommen:
 *   - woocommerce_enqueue_styles ist per __return_empty_array abgeschaltet
 *     (inc/woocommerce-hooks.php), WC-Core-CSS kommt also nie an,
 *   - should_load_separate_core_block_assets ist true (functions.php), damit
 *     laedt WordPress das monolithische wp-block-library-Stylesheet im
 *     Frontend nicht mehr.
 * Ohne diese Regel wuerden Hilfstexte SICHTBAR: die von wc_format_sale_price()
 * erzeugten "Ursprünglicher Preis war: …" / "Jetziger Preis ist: …" ebenso wie
 * die Theme-eigenen Stellen in home.php, page-manufaktur.php und
 * woocommerce/archive-product.php.
 *
 * Bewusst kein display:none und kein visibility:hidden — das wuerde den Text
 * auch fuer Screenreader entfernen und damit den Zweck zerstoeren.
 * ============================================================ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); /* Fallback fuer aeltere Engines */
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
/* Skip-Links u.ae. bei Tastaturfokus doch zeigen (Core-Verhalten). */
.screen-reader-text:focus {
  background-color: var(--paper);
  clip: auto !important;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  height: auto;
  width: auto;
  left: 8px;
  top: 8px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  z-index: 100000;
}

/* ============================================================
 * Aktionspreise: visuelle Hierarchie
 *
 * Das Markup kommt ausschliesslich aus fineprints_sale_price_html()
 * (inc/woocommerce-hooks.php) und ist an allen vier Orten dasselbe:
 * Produktdetailseite, normale Produktkarte, Karte je optischer Ausfuehrung und
 * Sale-Seite „Reststückerln" (die beiden letzten nutzen dieselbe
 * Karten-Komponente). Darum stehen die Regeln hier gebuendelt und gelten fuer
 * alle Orte gemeinsam — die Basis-Schriftgroesse setzt der jeweilige Container,
 * die Abstufung laeuft in em und skaliert dadurch mit.
 *
 * Rangfolge: aktueller Preis dominant, alter Preis sichtbar aber deutlich
 * zurueckgenommen, Ersparnis als ruhige Rost-Auszeichnung. Bewusst KEIN Badge
 * ueber dem Produktbild und kein Rot: das WC-Sale-Tag bleibt entfernt.
 *
 * Greift auch nach der Variantenwahl auf der Produktdetailseite, weil das von
 * main.js eingesetzte price_html dieselben Elemente enthaelt.
 * ============================================================ */

/* Alter Preis: klar sekundaer. Zurueckgenommen wird ueber Groesse und Farbe,
   nicht ueber Transparenz — var(--muted) ist als Wert kontrollierbar und
   erfuellt den Kontrast, ein opacity-Wert auf var(--ink) verwaesch je
   Hintergrund unterschiedlich. */
.pdp-info__price-value del,
.product-card__price del {
  opacity: 1;
  color: var(--muted);
  font-weight: 400;
  text-decoration: line-through;
}
/* Deutlicher Groessenabstand zum aktuellen Preis. Auf der Karte ist die Basis
   kleiner, dort waere derselbe Faktor nicht mehr lesbar. */
.pdp-info__price-value del { font-size: 0.58em; margin-right: 12px; }
.product-card__price   del { font-size: 0.75em; }

/* Verbindendes „bis" im Bereichsfall: zurueckgenommen, damit die Betraege
   fuehren. Tritt nur auf der Produktdetailseite vor der Variantenwahl auf und
   nur bei Produkten, deren Varianten unterschiedlich kosten. */
.fp-price-range-sep {
  font-size: 0.5em;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0 0.1em;
}

/* Auf der Karte steht der alte Preis in einer eigenen Zeile DIREKT ueber dem
   aktuellen. Grund: die Karten-Fusszeile teilt die Breite mit Name und Stoff,
   fuer beide Betraege nebeneinander (rund 180px) bleibt bei vier Spalten kein
   verlaesslicher Platz. Ohne die Regel entschied der Zufall, ob umgebrochen
   wird, und die Angabe zerfiel in drei lose Zeilen. So ist es immer eine
   kompakte, rechts ausgerichtete Zweizeiler-Gruppe. */
.product-card__price { line-height: 1.25; }
.product-card__price del { display: block; }
/* Der Preis darf in der Fusszeile nicht schrumpfen, sonst quetscht der
   Produktname die Ersparnis in eine dritte Zeile. Statt dessen bricht der Name
   um, der hat dafuer bereits zwei Zeilen Platz. min-width:0 erlaubt Flexbox
   ueberhaupt, ihn unter seine Inhaltsbreite zu bringen. */
.product-card__foot .product-card__price { flex: 0 0 auto; }
.product-card__foot .product-card__id { min-width: 0; }

/* Aktueller Preis: das dominante Element. Neben der vollen Containergroesse
   traegt ihn der echte Jost-500-Schnitt (kein synthetisches Fett, die Datei ist
   als @font-face eingebunden). */
.pdp-info__price-value ins,
.product-card__price ins {
  text-decoration: none;
  background: none;
  color: var(--ink);
  font-weight: 500;
}
/* Ohne Aktion gibt es kein <ins>. Damit derselbe Betrag nicht je nach
   Sale-Zustand unterschiedlich kraeftig wirkt, tragen die Container denselben
   Schnitt — sonst erbten sie die leichten 300 des Bodys. */
.pdp-info__price-value,
.product-card__price { font-weight: 500; }

/* Ersparnis. Das Leerzeichen vor dem Prozentzeichen gehoert im Deutschen dazu,
   bekam durch das letter-spacing aber zusaetzlich Luft und liess „-50 %"
   auseinanderfallen. Das negative word-spacing nimmt genau diese Zugabe zurueck,
   ohne den Abstand ganz zu schliessen. */
.fp-price-save {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  word-spacing: -0.1em;
  text-transform: uppercase;
  color: var(--rust);
  white-space: nowrap;
}
/* Auf der Produktdetailseite in derselben Zeile, optisch auf die Mitte der
   Zahl gehoben statt auf deren Grundlinie geklebt. */
.pdp-info__price-value .fp-price-save {
  margin-left: 8px;
  font-size: 12px;
  vertical-align: 0.42em;
}
/* Auf der Karte in der Zeile des aktuellen Preises, nicht in einer dritten
   eigenen Zeile: zusammen mit dem alten Preis darueber bleibt die Angabe so
   eine Gruppe aus zwei Zeilen statt drei losen. */
.product-card__price .fp-price-save { margin-left: 7px; }

/* Schmale Schirme. Steht bewusst hier und nicht in den Media-Query-Bloecken
   weiter oben: die Selektoren haben dieselbe Spezifitaet wie die Basisregeln
   dieses Blocks, es entscheidet also die Reihenfolge in der Datei. */
@media (max-width: 600px) {
  /* Der em-Faktor ergaebe bei 14px Kartenbasis nur 10px und damit einen kaum
     noch lesbaren alten Preis. Feste Untergrenze, die gegenueber dem aktuellen
     Preis trotzdem klar zurueckbleibt. */
  .product-card__price del { font-size: 11px; }
  /* Ersparnis kleiner und enger, damit sie in der engen Karten-Fusszeile neben
     dem aktuellen Preis bleibt statt in eine dritte Zeile zu rutschen. */
  .product-card__price .fp-price-save {
    font-size: 9px;
    letter-spacing: 0.08em;
    margin-left: 5px;
  }
}

/* ============================================================
 * Journal-Video (.fp-video) — natives <video> aus dem [video]-Shortcode,
 * gerendert in inc/journal-video.php. Bricht aus der 760-px-Textspalte
 * auf die Breite von .container-wide aus (1480 px minus 2×32 px Padding),
 * damit ein TV-Beitrag beim Oeffnen sofort gross dasteht; unter 600 px
 * bleiben 16 px Randabstand. In Video-Beitraegen (.jr-video-post, Textkopf
 * statt Bild-Hero) sitzt das Video ohne Abstand direkt unter dem Titel.
 * ============================================================ */
.fp-video {
  width: min(1416px, 100vw - 64px);
  margin: 2em 0 2em 50%;
  transform: translateX(-50%);
}
.jr-video-post .entry-content > .fp-video:first-child { margin-top: 0; }
@media (max-width: 600px) {
  .fp-video { width: calc(100vw - 32px); }
}
.fp-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.fp-video figcaption {
  margin-top: 0.6em;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}