/* =========================================================================
   Stil & KragenClub — Submarken-Styling.
   Quelle: brand/skc/brand-kit.json + brand/skc/tokens.css (--skc-*).

   WICHTIG: Alles ist auf .skc-context gescopt (NICHT :root) — die
   SKC-Identität (Playfair/Montserrat, Graphit-Navy/Bronze) gilt nur auf
   der SKC-Landingpage und SKC-Produktseiten und kollidiert nirgends mit
   dem CF-Design (--zcf-*). Geladen wird diese Datei nur, wenn
   zweisam_is_skc_context() greift; auf Produktseiten NACH woocommerce.css
   (Dependency), damit die SKC-Regeln gewinnen.
   ========================================================================= */

/* Schriften: lokal, kein CDN (siehe assets/fonts/skc/README.md).
   @font-face muss global stehen, wirkt aber nur wo die font-family
   verwendet wird — und die steht ausschließlich unter .skc-context. */
@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/skc/playfair-display-var.woff2") format("woff2");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/skc/montserrat-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

.skc-context{
  /* Tokens aus brand/skc/tokens.css — Namensraum kollidiert nicht mit --zcf-* */
  --skc-color-graphit-navy:#202630;
  --skc-color-bronze:#AE8B5F;
  /* Aufgehelltes Bronze für Text auf dunklen Flächen (Bildstreifen, Overlays).
     Bronze selbst ist dort zu dunkel; dieser Ton hält die Markenfarbe und
     erreicht auf Graphit-Navy sicher > 4,5:1. */
  --skc-color-bronze-hell:#D9BC93;
  --skc-color-warm-white:#F7F3EA;
  --skc-color-creme:#E8DDC8;
  --skc-color-graphite-text:#3C4043;
  --skc-color-link:#1F5F8B;
  --skc-color-link-hover:#174866;
  --skc-color-forest-sage:#5F6F5B;
  --skc-color-white:#FFFFFF;
  --skc-font-headline:"Playfair Display", Georgia, "Times New Roman", serif;
  --skc-font-body:"Montserrat", Arial, Helvetica, sans-serif;
  --skc-radius-sm:6px;
  --skc-radius-md:12px;
  --skc-radius-lg:20px;
  --skc-shadow-soft:0 10px 30px rgba(32,38,48,.10);

  background:var(--skc-color-warm-white);
  color:var(--skc-color-graphite-text);
  font-family:var(--skc-font-body);
}

/* Typografie: Serifen-Headline ist die Submarken-Signatur. */
.skc-context h1,
.skc-context h2,
.skc-context h3{
  font-family:var(--skc-font-headline);
  color:var(--skc-color-graphit-navy);
  letter-spacing:0; /* Playfair braucht keinen negativen Tracking wie Inter */
}
.skc-context h1{font-weight:700;line-height:1.05}
.skc-context p,
.skc-context li{font-family:var(--skc-font-body);line-height:1.55}
.skc-context a{color:var(--skc-color-link)}
.skc-context a:hover{color:var(--skc-color-link-hover)}
.skc-context .lead{color:var(--skc-color-graphite-text)}
.skc-context .eyebrow{
  color:var(--skc-color-bronze);
  font-family:var(--skc-font-body);
  letter-spacing:.18em;
}

/* Club-Menü im SKC-Kopf (nur eingeloggte Mitglieder): schlanke, club-eigene
   Navigation neben dem Emblem, kein Corporate-Fashion-Sortiment. */
.skc-context .skc-club-nav__list{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
  list-style:none;
  margin:0;
  padding:0;
}
.skc-context .skc-club-nav__item a{
  font-family:var(--skc-font-body);
  color:var(--skc-color-graphit-navy);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
}
.skc-context .skc-club-nav__item a:hover{color:var(--skc-color-bronze)}
@media (max-width:820px){
  .skc-context .skc-club-nav__list{gap:1rem;font-size:.9rem}
}

/* Buttons: eckiger als CF (Radius 6 statt Pill) — bewusste Submarken-Form. */
.skc-context .btn{border-radius:var(--skc-radius-sm);font-family:var(--skc-font-body)}
.skc-context .btn-primary{
  background:var(--skc-color-graphit-navy);
  border-color:var(--skc-color-graphit-navy);
  color:var(--skc-color-warm-white);
}
.skc-context .btn-primary:hover{background:#0f141c;border-color:#0f141c}
.skc-context .btn-outline{
  background:transparent;
  color:var(--skc-color-graphit-navy);
  border-color:var(--skc-color-graphit-navy);
}
.skc-context .btn-outline:hover{border-color:var(--skc-color-bronze);color:var(--skc-color-bronze)}

/* Flächen */
.skc-context .section--tint{background:var(--skc-color-creme)}
.skc-context .section--dark{background:var(--skc-color-graphit-navy);color:var(--skc-color-warm-white)}
.skc-context .section--dark h2{color:var(--skc-color-warm-white)}
.skc-context .section--dark .eyebrow{color:var(--skc-color-bronze)}
.skc-context .card{
  background:var(--skc-color-white);
  border:1px solid var(--skc-color-creme);
  border-radius:var(--skc-radius-md);
  box-shadow:var(--skc-shadow-soft);
}
.skc-context .card h3{color:var(--skc-color-graphit-navy)}
.skc-context .card p{color:var(--skc-color-graphite-text)}

/* Bronze-Linie als wiederkehrendes Markendetail */
.skc-context .skc-bronze-line{
  border:0;
  border-top:2px solid var(--skc-color-bronze);
  width:72px;
  margin:1.1rem 0;
}

/* SKC-Hero: gleiche Mechanik wie .lp-hero, aber warme SKC-Überblendung. */
.skc-context .lp-hero{background:var(--skc-color-warm-white);border-bottom:1px solid var(--skc-color-creme)}
.skc-context .lp-hero__overlay{
  background:linear-gradient(90deg,
    rgba(247,243,234,.98) 0%,
    rgba(247,243,234,.92) 35%,
    rgba(247,243,234,.42) 62%,
    rgba(247,243,234,.06) 100%);
}
.skc-context .lp-hero h1{color:var(--skc-color-graphit-navy)}
.skc-context .lp-hero .lead{color:var(--skc-color-graphite-text)}
@media (max-width:768px){
  .skc-context .lp-hero__overlay{
    background:linear-gradient(180deg,
      rgba(247,243,234,.96) 0%,
      rgba(247,243,234,.9) 55%,
      rgba(247,243,234,.55) 100%);
  }
}

/* Logo-Zeile im Hero */
.skc-context .skc-logo{width:min(320px,60vw);margin-bottom:1.4rem}
.skc-context .skc-logo img{width:100%;height:auto}

/* Zitat-Band (Brand Voice: "leicht frech") — wechselnde Zitate, Crossfade
   alle 4 s (lp.js, data-quote-slider). Grid-Stack statt absoluter
   Positionierung: alle Slides teilen sich dieselbe Grid-Zelle, die Zelle
   sizet sich automatisch auf das längste Zitat — kein Layout-Sprung, keine
   feste Höhe nötig (Zitatlängen variieren stark). */
.skc-context .skc-quote-slides{
  display:grid;
}
.skc-context .skc-quote-slide{
  grid-area:1 / 1;
  opacity:0;
  transition:opacity 900ms ease-in-out;
  align-self:center;
}
.skc-context .skc-quote-slide.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){
  .skc-context .skc-quote-slide{transition:none}
}
.skc-context .skc-quote{
  font-family:var(--skc-font-headline);
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-style:italic;
  color:var(--skc-color-graphit-navy);
  max-width:42ch;
  margin-inline:auto;
  text-align:center;
}
.skc-context .skc-quote small{
  display:block;
  margin-top:.8rem;
  font-family:var(--skc-font-body);
  font-style:normal;
  font-size:.9rem;
  color:var(--skc-color-bronze);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* SKC auf WooCommerce-Produktseiten: Kauffläche in Submarken-Farben.
   Lädt nach woocommerce.css — nur Farb-/Font-Overrides, kein Layout. */
.skc-context .woocommerce-content .price{color:var(--skc-color-graphit-navy)}
.skc-context .single_add_to_cart_button{
  background:var(--skc-color-graphit-navy);
  border-radius:var(--skc-radius-sm);
}
.skc-context .single_add_to_cart_button:hover{background:#0f141c}

/* Editorial-Bildband (Imagebild aus dem SKC-Drive): volle Breite, aber wie
   der LP-Hero bei 1920px gedeckelt — Ultrawide-Erkenntnis 2026-07-10. */
.skc-context .skc-editorial{
  max-width:1920px;
  margin-inline:auto;
  overflow:hidden;
}
.skc-context .skc-editorial img{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:center 30%; /* Hemd/Kragen-Bereich im Fokus halten */
  display:block;
}
@media (max-width:768px){
  .skc-context .skc-editorial img{aspect-ratio:4/5;object-position:center 20%}
}

/* =========================================================================
   SKC-gebrandetes Login (E8 Ein-Login-Architektur, 2026-07-20).
   Das WooCommerce-My-Account-Login erscheint im SKC-Kontext (?skc) in der
   Club-Optik — gleiches Auth-Backend, nur Playfair/Bronze/Graphit-Navy.
   Diese Regeln gewinnen, weil skc.css nach woocommerce.css lädt. Kein
   Layout-Umbau, nur Rahmen/Farben/Schrift + ein gebrandeter Kopf.
   ========================================================================= */

/* Auf dem gebrandeten SKC-Login übernimmt der Intro-Kopf die Überschrift.
   Den generischen Seitentitel „Mein Konto" (page.php entry-header) blenden
   wir nur hier aus, damit nicht zwei Überschriften konkurrieren. Greift
   ausschließlich im SKC-Login-Kontext (body.skc-context.woocommerce-account —
   skc-context ist dort nur gesetzt, wenn ausgeloggt + ?skc). */
.skc-context.woocommerce-account .entry-header{display:none}

/* Gebrandeter Kopf über dem Formular (aus zweisam_skc_login_intro()). */
.skc-context .skc-login-intro{
  text-align:center;
  max-width:34rem;
  margin:1.2rem auto 1.8rem;
}
.skc-context .skc-login-intro__logo{
  width:min(240px,58%);
  height:auto;
  margin:0 auto 1rem;
  display:block;
}
/* Clubemblem über der Anmeldung. Seit 2026-08-02 mittig und rund doppelt so
   groß wie zuvor (min(220px,60%)) — Axel: „Das Stil-&-KragenClub-Logo bitte
   mindestens doppelt so groß in der Mitte oben platzieren." Die Anmeldung im
   Club hat kein Kartenlayout mehr, das eine linksbündige Marke gebraucht
   hätte; sie ist eine zentrierte, einspaltige Seite. */
.skc-context .zw-login-intro__skc-logo{
  width:min(440px,80%);
  height:auto;
  margin:0 auto 1.4rem;
  display:block;
}
/* Reduzierte Clubanmeldung: eine Spalte, mittig, ohne Nebenkarte. */
.skc-context .zw-login-intro--skc{
  display:block;
  max-width:34rem;
  margin:0 auto 1.6rem;
  text-align:center;
}
.skc-context .zw-login-intro--skc .zw-login-intro__titel{margin:0 0 .5rem}
.skc-context .zw-login-intro--skc .zw-login-intro__lead{margin:0}
/* Hinweis auf die Aufnahme, unter dem Formular: ruhig, kein zweiter CTA. */
.skc-context .zw-login-skc-neu{
  margin:1.2rem 0 0;
  text-align:center;
  color:var(--skc-color-graphite-text);
}
.skc-context .skc-login-intro__title{
  margin:0 0 .5rem;
  font-size:clamp(1.5rem,3.4vw,2rem);
}
.skc-context .skc-login-intro__lead{
  margin:0;
  color:var(--skc-color-graphite-text);
}
/* Bronze-Trennlinie unter dem Kopf als Markendetail. */
.skc-context .skc-login-intro::after{
  content:"";
  display:block;
  width:72px;
  margin:1.1rem auto 0;
  border-top:2px solid var(--skc-color-bronze);
}

/* Login-Karte: zentriert, ruhig, wertig (analog .card). Deckt sowohl das
   Ein-Spalten-Login (Registrierung aus) als auch die linke Login-Spalte
   der Zwei-Spalten-Ansicht ab. */
.skc-context.woocommerce-account .woocommerce > .u-columns,
.skc-context.woocommerce-account .woocommerce > form.login{
  max-width:34rem;
  margin-inline:auto;
}
.skc-context .woocommerce form.login,
.skc-context .woocommerce form.register{
  background:var(--skc-color-white);
  border:1px solid var(--skc-color-creme);
  border-radius:var(--skc-radius-md);
  box-shadow:var(--skc-shadow-soft);
  padding:clamp(1.2rem,3vw,2rem);
}
.skc-context .woocommerce form.login label,
.skc-context .woocommerce form.register label{
  font-weight:600;
  color:var(--skc-color-graphit-navy);
}
.skc-context .woocommerce form.login input.input-text,
.skc-context .woocommerce form.register input.input-text{
  border:1px solid var(--skc-color-creme);
  border-radius:var(--skc-radius-sm);
}
.skc-context .woocommerce form.login input.input-text:focus,
.skc-context .woocommerce form.register input.input-text:focus{
  border-color:var(--skc-color-bronze);
  outline:2px solid rgba(174,139,95,.25);
  outline-offset:1px;
}
/* Anmelde-/Registrier-Button in SKC-Form (Graphit-Navy, eckig — wie .btn-primary). */
.skc-context .woocommerce form.login .woocommerce-button,
.skc-context .woocommerce form.register .woocommerce-button,
.skc-context .woocommerce form.login button.button,
.skc-context .woocommerce form.register button.button{
  background:var(--skc-color-graphit-navy);
  border-color:var(--skc-color-graphit-navy);
  color:var(--skc-color-warm-white);
  border-radius:var(--skc-radius-sm);
}
.skc-context .woocommerce form.login .woocommerce-button:hover,
.skc-context .woocommerce form.register .woocommerce-button:hover,
.skc-context .woocommerce form.login button.button:hover,
.skc-context .woocommerce form.register button.button:hover{
  background:#0f141c;
  border-color:#0f141c;
}
/* „Passwort vergessen?" in Club-Linkfarbe. */
.skc-context .woocommerce-LostPassword a{color:var(--skc-color-link)}
.skc-context .woocommerce-LostPassword a:hover{color:var(--skc-color-link-hover)}

/* Header-Konto-/Login-Link im SKC-Kontext: Bronze-Hover, Club-Schrift. */
.skc-context .header-account{font-family:var(--skc-font-body)}
.skc-context .header-account:hover{border-color:var(--skc-color-bronze);color:var(--skc-color-bronze)}

/* =========================================================================
   Clubkopf + Clubseiten-Bausteine (Nutzervorgabe 2026-07-21).
   Greifen nur unter body.skc-club — also ausschließlich auf der Club-
   Landingpage, nicht auf SKC-Produktseiten oder im gebrandeten Login.
   ========================================================================= */

/* Kopf ohne Navigation: Emblem links, Warenkorb/Konto rechts gruppiert.
   Ohne diesen Eingriff würde space-between die beiden rechten Elemente
   auseinanderziehen, weil das Hauptmenü als mittleres Flex-Kind fehlt. */
.skc-club .site-header{
  background:var(--skc-color-warm-white);
  border-bottom:1px solid var(--skc-color-creme);
}
.skc-club .site-header__inner{justify-content:flex-start}
.skc-club .site-brand{margin-right:auto}

/* Das Emblem ist hochformatig (Kreis + „by Zweisam Mode"), die globale
   Logo-Regel setzt jedoch eine BREITE für das querformatige CF-Logo.
   Deshalb hier über die HÖHE steuern, sonst wird der Kopf riesig. */
.skc-club .site-brand--skc img{
  width:auto;
  height:clamp(58px,7vw,84px);
}

/* Aufnahme-Band: die drei harten Fakten (0 €, 350 Plätze, eine Region).
   Bewusst Zahlentafeln statt Bildkarten — sie sollen sich optisch von den
   Bildkarten unterscheiden, sonst wird die Seite eine Kachelwüste. */
.skc-context .skc-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  text-align:center;
}
.skc-context .skc-fact{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding-inline:clamp(.5rem,2vw,1.5rem);
}
.skc-context .skc-fact + .skc-fact{border-left:1px solid rgba(174,139,95,.35)}
.skc-context .skc-fact__value{
  font-family:var(--skc-font-headline);
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1;
  color:var(--skc-color-graphit-navy);
}
.skc-context .skc-fact__label{
  font-size:.95rem;
  line-height:1.5;
  color:var(--skc-color-graphite-text);
}
@media (max-width:768px){
  .skc-context .skc-facts{grid-template-columns:1fr;gap:1.6rem}
  .skc-context .skc-fact + .skc-fact{
    border-left:0;
    border-top:1px solid rgba(174,139,95,.35);
    padding-top:1.6rem;
  }
}

/* Bildslot in den Clubkarten. Die globale .card__media-Regel rechnet mit
   festen -1,5 rem, die Kartenpolsterung ist aber eine clamp()-Größe — bei
   schmalen Viewports stünde das Bild sonst über den Kartenrand hinaus.
   Hier an dieselbe clamp() gekoppelt und zusätzlich mit overflow:hidden
   abgesichert; SKC-Radius statt CF-Radius. */
.skc-context .card--has-img{overflow:hidden}
.skc-context .card__media{
  margin:calc(-1 * clamp(18px,2.5vw,24px)) calc(-1 * clamp(18px,2.5vw,24px)) 1.1rem;
  border-radius:var(--skc-radius-md) var(--skc-radius-md) 0 0;
  background:var(--skc-color-creme);
}

/* Nachsatz unter einem Kartenraster (z. B. Klarstellung zur Zielgruppe):
   ruhiger als ein Lead, klar abgesetzt durch die Bronze-Linie. */
.skc-context .skc-note{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  padding-top:clamp(1.1rem,2.5vw,1.6rem);
  border-top:2px solid var(--skc-color-bronze);
  max-width:60ch;
  font-size:1rem;
  color:var(--skc-color-graphite-text);
}

/* =========================================================================
   Clubkopf-Zugang für Gäste (Nutzervorgabe 2026-07-29): Warenkorb entfällt,
   stattdessen zwei getrennte Wege — „Registrierung" (→ #beitreten) und
   „Login" (→ ?skc). Reuse der .header-account-Pillen, nur ohne Konto-Icon.
   ========================================================================= */
.skc-club .skc-club-access{
  display:flex;
  gap:clamp(.5rem,2vw,1rem);
  align-items:center;
}
/* Ohne Icon muss das Label immer sichtbar bleiben — die globale 400px-Regel
   blendet .header-account__label sonst aus (dort trägt das Icon die Bedeutung,
   hier gibt es keins). */
.skc-club .skc-club-access .header-account__label{
  position:static;width:auto;height:auto;margin:0;padding:0;
  overflow:visible;clip:auto;white-space:nowrap;
}
.skc-club .skc-club-access .header-account:hover{
  border-color:var(--skc-color-bronze);
  color:var(--skc-color-bronze);
}

/* =========================================================================
   Typografie-Ruhe (Nutzervorgabe 2026-07-29): Die Playfair-Headlines wirkten
   in den Basis-Größen (bis 4,4 rem) gedrungen. SKC-gescopt kleiner + mehr
   Zeilenluft, und generell mehr Abstand zwischen den Textblöcken. CF bleibt
   unberührt (Regeln greifen nur unter .skc-context). Kommt in der Datei nach
   den früheren .skc-context-h*-Regeln → gewinnt per Quellreihenfolge.
   ========================================================================= */
.skc-context h1{font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.16}
.skc-context h2{font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.25}
.skc-context h3{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.34}
.skc-context .lead{font-size:clamp(1.02rem,1.8vw,1.15rem);line-height:1.65}
.skc-context p,
.skc-context li{line-height:1.65}
/* Mehr Luft zwischen den einzelnen Blöcken innerhalb einer Section. */
.skc-context .eyebrow{display:block;margin-bottom:.7rem}
.skc-context .section h2{margin-bottom:.7rem}
.skc-context .section h2 + .lead{margin-top:0;margin-bottom:1.5rem}
.skc-context .card h3{margin-bottom:.55rem}
.skc-context .card p + p{margin-top:.85em}
/* Mehrteiliger Lead (Hero): sichtbarer Abstand zwischen den Absätzen. */
.skc-context .lead + .lead{margin-top:.9rem}

/* =========================================================================
   Preisvorteil-Streifen (Nutzervorgabe 2026-07-29): eigener Themastreifen mit
   Fünf-Teile-Bildmotiv. Zwei Zustände — mit Bild (dunkle Überblendung, helle
   Schrift) und ohne Bild (getönt, Standardschrift). Kein durchgestrichener
   Preis, keine Prozentzahl (Sprachregelung/Claimregister).
   ========================================================================= */
.skc-context .skc-price--media{
  position:relative;
  background-size:cover;
  background-position:center;
  color:var(--skc-color-warm-white);
  display:flex;
  align-items:center;
  /* 2026-08-01 (Axels Sichttest): Auf breiten Monitoren zog sich der Streifen
     über die volle Breite, blieb aber flach — vom Fünf-Teile-Motiv war kaum
     etwas zu sehen. Die Höhe wächst jetzt mit der Breite mit (vh-Anteil), so
     bleibt das Seitenverhältnis auch auf 21:9-Schirmen bildtauglich. */
  min-height:clamp(360px,46vw,520px);
}
@media (min-width:1200px){
  .skc-context .skc-price--media{min-height:clamp(520px,52vh,680px)}
}
.skc-context .skc-price__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(32,38,48,.90) 0%,
    rgba(32,38,48,.74) 48%,
    rgba(32,38,48,.42) 100%);
}
@media (max-width:768px){
  .skc-context .skc-price__overlay{
    background:linear-gradient(180deg,
      rgba(32,38,48,.80) 0%,
      rgba(32,38,48,.86) 60%,
      rgba(32,38,48,.90) 100%);
  }
}
.skc-context .skc-price__inner{
  position:relative;
  z-index:1;
  max-width:48rem;
}
.skc-context .skc-price--media h2,
.skc-context .skc-price--media .lead{color:var(--skc-color-warm-white)}
/* Eyebrow „Ihr Preisvorteil" auf dem dunklen Motiv: Bronze (#AE8B5F) war dort
   zu dunkel und wirkte stumpf (Axel 2026-08-01). Aufgehelltes Bronze hält die
   Markenfarbe und bringt den nötigen Kontrast auf der dunklen Überblendung. */
.skc-context .skc-price--media .eyebrow{color:var(--skc-color-bronze-hell)}
.skc-context .skc-price__points{
  list-style:none;
  padding:0;
  margin:0 0 1.6rem;
  display:grid;
  gap:.85rem;
  max-width:40rem;
}
.skc-context .skc-price__points li{
  position:relative;
  padding-left:1.5rem;
  line-height:1.5;
}
.skc-context .skc-price__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:.55rem;
  height:.55rem;
  border-radius:2px;
  background:var(--skc-color-bronze);
}
.skc-context .skc-price--media .skc-price__points strong{color:var(--skc-color-warm-white)}
.skc-context .skc-price__points strong{color:var(--skc-color-graphit-navy)}
/* Der Button ist bild-über auf Dunkel — Warm-White-Fläche statt Graphit,
   damit er sich vom dunklen Overlay abhebt. */
.skc-context .skc-price--media .btn-primary{
  background:var(--skc-color-warm-white);
  border-color:var(--skc-color-warm-white);
  color:var(--skc-color-graphit-navy);
}
.skc-context .skc-price--media .btn-primary:hover{
  background:#fff;border-color:#fff;
}

/* =========================================================================
   Hero-Vorteilspunkte (2026-08-01, Axels Sichttest). Der Fließtext-Lead war
   zu lang zum Lesen; die Vorteile stehen jetzt als kurze Punkte darunter.
   Bronze-Quadrat als Marker wie im Preisvorteil-Streifen — eine Formsprache.
   ========================================================================= */
.skc-context .lp-hero__points{
  list-style:none;
  padding:0;
  margin:clamp(1rem,2vw,1.4rem) 0 0;
  display:grid;
  gap:.7rem;
  max-width:34rem;
}
.skc-context .lp-hero__points li{
  position:relative;
  padding-left:1.5rem;
  line-height:1.5;
  color:var(--skc-color-graphit-navy);
  font-size:clamp(.98rem,1.5vw,1.06rem);
}
.skc-context .lp-hero__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:.5rem;
  height:.5rem;
  border-radius:2px;
  background:var(--skc-color-bronze);
}

/* -------------------------------------------------------------------------
   Hero mobil (2026-08-01, Axels Sichttest): Bisher lag der Text mit einem
   sehr deckenden Verlauf ÜBER dem Motiv — auf dem Handy war vom Herrn im
   Bild praktisch nichts mehr zu sehen. Auf schmalen Viewports wird der Hero
   deshalb gestapelt: erst das Bild, darunter der Text auf ruhiger Fläche.
   Gilt bewusst nur im SKC-Kontext; andere Landingpages bleiben unverändert.
   ------------------------------------------------------------------------- */
@media (max-width:768px){
  .skc-context .lp-hero{display:block;min-height:0}
  .skc-context .lp-hero__media{
    position:relative;
    inset:auto;
    aspect-ratio:4/3;
  }
  .skc-context .lp-hero__media img{object-position:50% 15%}
  /* Der Verlauf hat auf dem gestapelten Bild nichts mehr zu suchen. */
  .skc-context .lp-hero__overlay{display:none}
  .skc-context .lp-hero .container{background:var(--skc-color-warm-white)}
  .skc-context .lp-hero__content{padding-block:clamp(1.6rem,6vw,2.4rem)}
}

/* =========================================================================
   Meldungen (2026-08-01, Axels Sichttest). WooCommerce setzt sein Häkchen
   als ::before-Pseudoelement absolut in die linke obere Ecke — es lag dadurch
   direkt ÜBER dem ersten Wort („Ihr Club-Profil wurde gespeichert.", „Danke").
   Hier wird das Icon aus der Überlagerung geholt und als eigene Spalte VOR
   den Text gesetzt. Bewusst auf .skc-context gescopt, damit der Shop-Teil
   unverändert bleibt.
   ========================================================================= */
.skc-context .woocommerce-message,
.skc-context .woocommerce-info,
.skc-context .woocommerce-error{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1rem 1.15rem;
  margin:0 0 1.4rem;
  border-radius:var(--skc-radius-sm);
  border-top:none;
  background:var(--skc-color-warm-white);
  border-left:4px solid var(--skc-color-forest-sage);
  color:var(--skc-color-graphite-text);
  font-family:var(--skc-font-body);
  line-height:1.5;
  list-style:none;
}
.skc-context .woocommerce-message::before,
.skc-context .woocommerce-info::before,
.skc-context .woocommerce-error::before{
  position:static;
  flex:0 0 auto;
  margin:0;
  top:auto;left:auto;
  font-size:1rem;
  line-height:1.5;
  color:var(--skc-color-forest-sage);
}
.skc-context .woocommerce-error{border-left-color:#9B3B2F}
.skc-context .woocommerce-error::before{color:#9B3B2F}
.skc-context .woocommerce-info{border-left-color:var(--skc-color-bronze)}
.skc-context .woocommerce-info::before{color:var(--skc-color-bronze)}
/* Der „Zum Warenkorb"-Button in Woo-Meldungen soll nicht die Zeile sprengen. */
.skc-context .woocommerce-message .button{margin-left:auto;flex:0 0 auto}

/* Eigene SKC-Meldung (Plugin-Views ohne WooCommerce-Notice-Kontext). */
.skc-context .zwcl-skc-notice{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1rem 1.15rem;
  margin:0 0 1.4rem;
  border-radius:var(--skc-radius-sm);
  background:var(--skc-color-warm-white);
  border-left:4px solid var(--skc-color-forest-sage);
  color:var(--skc-color-graphite-text);
  line-height:1.5;
}
.skc-context .zwcl-skc-notice__icon{
  flex:0 0 auto;
  width:1.15rem;height:1.15rem;
  margin-top:.15rem;
  color:var(--skc-color-forest-sage);
}
.skc-context .zwcl-skc-notice__text{margin:0}
.skc-context .zwcl-skc-notice--hinweis{border-left-color:var(--skc-color-bronze)}
.skc-context .zwcl-skc-notice--hinweis .zwcl-skc-notice__icon{color:var(--skc-color-bronze)}

/* =========================================================================
   Kundenkonto in Club-Optik (Etappe 4, 2026-08-01).
   Greift nur, wenn das Plugin den Clubkontext gesetzt hat (Body-Klasse
   .zwcl-skc-konto, includes/skc/konto-optik.php) — also bei aktivem
   SKC-Profil. Doppelprofil-Konten im Shop-Profil bleiben unberührt.
   ========================================================================= */
.zwcl-skc-konto .zwcl-skc-kontokopf{
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:1rem 1.2rem;
  margin:0 0 1.6rem;
  background:var(--skc-color-graphit-navy);
  border-radius:var(--skc-radius-md);
  color:var(--skc-color-warm-white);
}
.zwcl-skc-konto .zwcl-skc-kontokopf__bild{
  flex:0 0 auto;
  width:96px;height:96px;
  object-fit:cover;
  border-radius:var(--skc-radius-sm);
}
.zwcl-skc-konto .zwcl-skc-kontokopf__marke{
  margin:0;
  font-family:var(--skc-font-headline);
  font-size:clamp(1.15rem,2vw,1.4rem);
  color:var(--skc-color-warm-white);
}
.zwcl-skc-konto .zwcl-skc-kontokopf__claim{
  margin:.25rem 0 0;
  font-size:.94rem;
  color:var(--skc-color-bronze-hell);
}
@media (max-width:600px){
  .zwcl-skc-konto .zwcl-skc-kontokopf{flex-direction:column;align-items:flex-start;text-align:left}
  .zwcl-skc-konto .zwcl-skc-kontokopf__bild{width:100%;height:140px}
}

/* Kontonavigation als ruhige Kartenliste statt nackter Aufzählung. */
.zwcl-skc-konto .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.4rem;
}
.zwcl-skc-konto .woocommerce-MyAccount-navigation li{margin:0}
.zwcl-skc-konto .woocommerce-MyAccount-navigation li a{
  display:block;
  padding:.7rem .9rem;
  min-height:44px;
  border:1px solid var(--skc-color-creme);
  border-radius:var(--skc-radius-sm);
  background:var(--skc-color-white);
  color:var(--skc-color-graphit-navy);
  text-decoration:none;
  font-family:var(--skc-font-body);
}
.zwcl-skc-konto .woocommerce-MyAccount-navigation li a:hover{
  border-color:var(--skc-color-bronze);
  color:var(--skc-color-graphit-navy);
}
.zwcl-skc-konto .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--skc-color-graphit-navy);
  border-color:var(--skc-color-graphit-navy);
  color:var(--skc-color-warm-white);
  font-weight:600;
}

/* Inhaltsseite: Formulare (Adressen, Zugangsdaten) in Markenschrift. */
.zwcl-skc-konto .woocommerce-MyAccount-content{font-family:var(--skc-font-body)}
.zwcl-skc-konto .woocommerce-MyAccount-content h2,
.zwcl-skc-konto .woocommerce-MyAccount-content h3,
.zwcl-skc-konto .woocommerce-MyAccount-content legend{
  font-family:var(--skc-font-headline);
  color:var(--skc-color-graphit-navy);
}
.zwcl-skc-konto .woocommerce-MyAccount-content input[type=text],
.zwcl-skc-konto .woocommerce-MyAccount-content input[type=email],
.zwcl-skc-konto .woocommerce-MyAccount-content input[type=tel],
.zwcl-skc-konto .woocommerce-MyAccount-content input[type=password],
.zwcl-skc-konto .woocommerce-MyAccount-content select,
.zwcl-skc-konto .woocommerce-MyAccount-content textarea{
  min-height:44px;
  border:1px solid var(--skc-color-creme);
  border-radius:var(--skc-radius-sm);
  padding:.55rem .7rem;
  font-family:var(--skc-font-body);
}
/* Alle Aktionsknöpfe im Club tragen dasselbe Outfit: dunkler Grund, helle
   Schrift. Die a-Varianten stehen bewusst mit dabei — als Link erbten sie
   sonst die Akzentfarbe des Themes und standen dunkelblau auf dunklem Grund
   (Axels Sichttest 2026-08-02). Grüne Knöpfe hat Axel dabei ausdrücklich
   zurückgenommen; die Plugin-Klasse .zwcl-skc-btn-gruen ist nur noch ein
   Name aus der Historie und wird hier mitgefärbt. */
.zwcl-skc-konto .woocommerce-MyAccount-content .button,
.zwcl-skc-konto .woocommerce-MyAccount-content button[type=submit],
.zwcl-skc-konto .woocommerce-MyAccount-content a.zwcl-skc-btn,
.zwcl-skc-konto .woocommerce-MyAccount-content a.zwcl-skc-btn-gruen,
.zwcl-skc-konto .woocommerce-MyAccount-content .zwcl-skc-btn,
.zwcl-skc-konto .woocommerce-MyAccount-content .zwcl-skc-btn-gruen{
  background:var(--skc-color-graphit-navy);
  color:var(--skc-color-warm-white);
  border-radius:var(--skc-radius-sm);
  min-height:44px;
  font-family:var(--skc-font-body);
  text-decoration:none;
}
.zwcl-skc-konto .zwcl-skc-konto__gruss{font-size:1.08rem}
.zwcl-skc-konto .zwcl-skc-konto__cta{margin-top:1.1rem}
.zwcl-skc-konto .zwcl-skc-konto__abmelden{margin-top:1.4rem;color:var(--skc-color-graphite-text)}

/* =========================================================================
   Erlebnisreise R2 Phase 6 (M3, 2026-08-02): Katalog-/Artikelseiten in
   Club-Farben. skc.css lädt jetzt auch auf PDP/Archiven eingeloggter
   Mitglieder (produkt-optik.php); zwei harte CF-Farbtoken aus
   woocommerce.css müssen dort weichen: der Petrol-Kaufknopf (:178-198)
   und der waldgrüne „Anzeigen"-Kachelknopf (:266-282). Gleiche Regel wie
   im Konto: SKC-Graphit mit heller Schrift, kein Grün, kein Petrol.
   Selektoren spiegeln bewusst die woocommerce.css-Muster (inkl. der
   Disabled-Zweige, die Woo sonst lila einfärbt).
   ========================================================================= */
.skc-context .woocommerce div.product form.cart .single_add_to_cart_button,
.skc-context .woocommerce #respond input#submit.alt,
.skc-context .woocommerce a.button.alt,
.skc-context .woocommerce button.button.alt,
.skc-context .woocommerce input.button.alt,
.skc-context .woocommerce button.button.alt.disabled,
.skc-context .woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.skc-context .woocommerce div.product form.cart .single_add_to_cart_button:disabled{
  background:var(--skc-color-graphit-navy);
  color:var(--skc-color-warm-white);
}
.skc-context .woocommerce div.product form.cart .single_add_to_cart_button:hover,
.skc-context .woocommerce a.button.alt:hover,
.skc-context .woocommerce button.button.alt:hover,
.skc-context .woocommerce input.button.alt:hover{
  background:var(--skc-color-bronze);
  color:var(--skc-color-graphit-navy);
}
.skc-context .woocommerce ul.products li.product .button{
  background:var(--skc-color-graphit-navy);
  color:var(--skc-color-warm-white);
  border-color:var(--skc-color-graphit-navy);
}
.skc-context .woocommerce ul.products li.product .button:hover{
  background:var(--skc-color-bronze);
  color:var(--skc-color-graphit-navy);
  border-color:var(--skc-color-bronze);
}

/* =========================================================================
   Warenkorb & Kasse im Club (Erlebnisreise R2, Phase 7 — N4/N6/N8).
   Greift, sobald includes/skc/warenkorb-optik.php den Club-Kontext meldet;
   ausserhalb des Clubs bleibt der Warenkorb unverändert.
   ========================================================================= */

/* N6: In der Club-Meldung ist die Zeile ein Flex-Container. Damit der
   Bestätigungssatz links steht und Knopf + Rückweg zusammen rechts landen,
   nimmt der Text den freien Platz — sonst schiebt `margin-left:auto` am Knopf
   den Rückweg-Link hinter den Knopf. */
.skc-context .woocommerce-message .zwcl-korb-meldung__text{flex:1 1 auto}
.skc-context .woocommerce-message .button{margin-left:0}
.skc-context .zwcl-korb-weiter{
  color:var(--skc-color-graphite-text);
  font-family:var(--skc-font-body);
}
.skc-context .zwcl-korb-weiter:hover,
.skc-context .zwcl-korb-weiter:focus{color:var(--skc-color-bronze)}

/* Auf schmalen Viewports darf die Meldung umbrechen statt zu quetschen. */
@media (max-width:600px){
  .skc-context .woocommerce-message{flex-wrap:wrap}
  .skc-context .woocommerce-message .zwcl-korb-meldung__text{flex:1 1 100%}
  .skc-context .zwcl-korb-weiter{margin-left:0}
}

/* Warenkorbtabelle im Club: gleiche ruhige Flächen wie im übrigen Clubbereich. */
.skc-context .woocommerce table.shop_table{
  border-color:var(--skc-color-line, #E2D9CC);
  background:var(--skc-color-warm-white);
}
.skc-context .woocommerce table.shop_table th{
  font-family:var(--skc-font-body);
  color:var(--skc-color-graphite-text);
}

/* =========================================================================
   Club-Kopf mobil (Axels Mobil-Rundgang 2026-08-03)

   ≤820 px zeigt der eingeloggte Clubkopf nur Emblem + Burger: Das Inline-
   Menü brach zweizeilig um und fraß mit dem Warenkorb den halben Bildschirm.
   Menüpunkte UND Warenkorb stehen im Club-Overlay (#zw-clubnav). Der Burger
   selbst erbt Optik und Breakpoint von .nav-toggle (style.css).
   ========================================================================= */
@media (max-width:820px){
  .skc-context.skc-club .skc-club-nav{display:none}
  .skc-context.skc-club .header-cart{display:none}
  /* Kopf auf Emblem-Höhe verknappen. */
  .skc-context.skc-club .site-header__inner{padding-block:8px;flex-wrap:nowrap}
  .skc-context.skc-club .site-brand--skc img{width:auto;height:52px}
}

/* Club-Overlay: Vollbild, ruhig, große Tapflächen. */
.zw-clubnav{
  position:fixed;
  inset:0;
  z-index:1000;
  background:var(--skc-color-warm-white,#F7F3EA);
  overflow-y:auto;
  padding:0 1.25rem 2rem;
}
.zw-clubnav__kopf{
  display:flex;
  justify-content:flex-end;
  padding:.6rem 0;
}
.zw-clubnav__zu{
  min-width:44px;
  min-height:44px;
  border:1px solid var(--skc-color-line,#E3DDD2);
  border-radius:6px;
  background:none;
  font-size:1.6rem;
  line-height:1;
  color:var(--skc-color-graphit-navy,#202630);
  cursor:pointer;
}
.zw-clubnav__list{
  list-style:none;
  margin:0;
  padding:0;
}
.zw-clubnav__item a{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1rem .2rem;
  border-top:1px solid var(--skc-color-line,#E3DDD2);
  color:var(--skc-color-graphit-navy,#202630);
  font-family:var(--skc-font-body);
  font-weight:600;
  font-size:1.05rem;
  text-decoration:none;
}
.zw-clubnav__item:last-child a{border-bottom:1px solid var(--skc-color-line,#E3DDD2)}
.zw-clubnav__icon{display:inline-flex;align-items:center;color:var(--skc-color-bronze,#AE8B5F)}
.zw-clubnav__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.4rem;height:1.4rem;padding:0 .3rem;margin-left:auto;
  border-radius:999px;background:var(--skc-color-bronze,#AE8B5F);
  color:#fff;font-size:.8rem;line-height:1;
}