/* ============================================================================
   MORELIA CITY / TEBEX WEBSTORE
   ----------------------------------------------------------------------------
   Farben, Typo, Karten- und Buttonrezepte sind 1:1 aus dem Morelia-City-
   WordPress-Theme uebernommen (assets/css/main.css). Wo dieses File von
   shared.css abweicht, steht der Grund als Kommentar daneben.

   Ladereihenfolge (siehe head.twig): shared.css -> store.css -> DIESES FILE.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1  TOKENS
   ============================================================ */
:root {
  /* Flaechen */
  --mc-bg:        #0d0d0d;
  --mc-bg-dark:   #161616;
  --mc-panel:     rgba(22, 22, 22, 0.90);

  /* Akzente. Gruen = Kaufen und Erfolg, Rot = Marke, Sale und Dringlichkeit. */
  --mc-green:        #9CFF86;
  --mc-green-radial: radial-gradient(100% 100% at 50% 0%, #9CFF86 0%, #60CB48 100%);
  --mc-green-soft:   rgba(156, 255, 134, 0.25);

  --mc-red:      #FF6768;
  --mc-red-glow: rgba(255, 103, 104, 0.75);

  --mc-discord: #5865F2;

  /* Weisstufen. w50 ist die kleinste Deckkraft, die auf #0d0d0d noch
     WCAG AA (4.5:1) erreicht, deshalb endet Fliesstext dort. */
  --mc-white: #ffffff;
  --mc-w70:   rgba(255, 255, 255, 0.70);
  --mc-w50:   rgba(255, 255, 255, 0.50);
  --mc-w15:   rgba(255, 255, 255, 0.15);
  --mc-w10:   rgba(255, 255, 255, 0.10);
  --mc-w07:   rgba(255, 255, 255, 0.07);
  --mc-w05:   rgba(255, 255, 255, 0.05);
  --mc-w03:   rgba(255, 255, 255, 0.03);

  --mc-font-display: 'Bebas Neue', 'Space Grotesk', sans-serif;
  --mc-font-body:    'Space Grotesk', system-ui, sans-serif;

  /* Schriftskala. Alles im Store benutzt diese Stufen, damit die Seite
     einen Takt hat und nicht 25 handgesetzte Groessen. */
  --t-xs: 12px;   /* Fussnoten, Rechtliches, Meta */
  --t-sm: 13px;   /* Buttons, Links, Sekundaertext */
  --t-md: 15px;   /* Fliesstext */
  --t-lg: 18px;   /* grosser Fliesstext */
  --d-sm: 20px;   /* kleine Bebas-Titel: Warenkorbzeile, Widget */
  --d-md: 24px;   /* Kartentitel, Preis */
  --d-lg: 32px;   /* Panel-Ueberschrift */
  --d-xl: clamp(38px, 7vw, 72px); /* Seitentitel im Band */

  /* Abstandsskala */
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radienskala aus dem WP-Theme. Regel: Buttons und Badges 3px,
     Karten 10px, grosse Panels 16px, Pills voll. Keine Ausnahmen. */
  --mc-r-btn:   3px;
  --mc-r-card:  10px;
  --mc-r-panel: 16px;
  --mc-r-pill:  9999px;

  --mc-nav-h: 68px;
  --mc-ease:  0.2s ease;
  --mc-ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tebex-Variablen auf die Marke mappen */
  --color-text:                 var(--mc-white);
  --color-text-darker:          var(--mc-w70);
  --color-text-secondary:       var(--mc-w50);
  --color-text-dark:            #0d0d0d;
  --color-bg:                   var(--mc-bg);
  --color-brighter-bg:          var(--mc-bg-dark);
  --color-primary:              var(--mc-green);
  --color-primary-hover:        var(--mc-green);
  --color-primary-text:         rgba(0, 0, 0, 0.82);
  --color-primary-text-hover:   rgba(0, 0, 0, 0.82);
  --color-secondary:            var(--mc-w05);
  --color-secondary-hover:      var(--mc-w10);
  --color-secondary-text:       var(--mc-white);
  --color-secondary-text-hover: var(--mc-white);
  --color-tertiary:             transparent;
  --color-tertiary-hover:       var(--mc-w07);
  --color-tertiary-text:        var(--mc-w50);
  --color-tertiary-text-hover:  var(--mc-white);
  --color-removed:              var(--mc-red);
  --color-sale-banner-bg:       rgba(255, 103, 104, 0.10);
  --color-sale-banner-text:     var(--mc-red);

  --btn-size: 44px;
  --content-inner-width: 1240px;
  --sidebar-width: 292px;

  --tebex-legal-footer-background-color: var(--mc-bg-dark);
  --tebex-legal-footer-border-color: rgba(255, 255, 255, 0.07);
  --tebex-legal-footer-text-color: var(--mc-w50);
}

/* ============================================================
   2  BASE
   ============================================================ */
html { scrollbar-color: var(--mc-w15) var(--mc-bg); }

body {
  font-family: var(--mc-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mc-white);
  background: var(--mc-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* generic.css der Vorlage legt hier ein Hintergrundbild an. Morelia setzt
   stattdessen auf eine flache Flaeche, Textur gibt es nur im Header-Band. */
body::before { content: none; }

::selection { color: #0d0d0d; background-color: var(--mc-green); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--mc-bg); }
::-webkit-scrollbar-thumb { background: var(--mc-w15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mc-w50); }

/* shared.css definiert keinerlei :focus-Stil. Ohne das hier waere die
   Tastaturbedienung auf #0d0d0d praktisch unsichtbar. */
:focus-visible {
  outline: 3px solid var(--mc-green);
  outline-offset: 2px;
  border-radius: var(--mc-r-btn);
}
/* Karte und Bildflaeche haben overflow: hidden. Ein nach aussen
   versetzter Fokusring wuerde dort abgeschnitten, deshalb nach innen. */
.store-product .image-link:focus-visible,
.mc-product-media .image-link:focus-visible,
.media-slider .thumb:focus-visible { outline-offset: -3px; }

/* shared.css baut .site als Grid mit `grid-auto-rows: auto 1fr auto`. Das
   bricht, sobald eine Seite mehr als drei Bloecke ausgibt, weil dann ein
   beliebiger Block das 1fr erbt und sich aufblaeht. Flex-Spalte ist hier
   robuster: der Footer bleibt per margin-top:auto unten. */
.site {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: var(--mc-nav-h);
  gap: 0;
  font-size: 15px;
}
@media (width > 960px) {
  .site { gap: 0; }
}
.site > .site-footer { margin-top: auto; }

/* Header traegt sein eigenes Innenmass, damit das Band randlos laufen kann. */
.site-header { max-width: none; padding: 0; z-index: 300; }

.mc-shell {
  width: 100%;
  max-width: calc(var(--content-inner-width) + var(--content-padding) * 2);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.site-content { padding-top: 44px; padding-bottom: 64px; }
@media (width > 960px) {
  .site-content { padding-top: 56px; padding-bottom: 88px; }
}

/* Sprungziele duerfen nicht unter der fixen Leiste landen. */
[id] { scroll-margin-top: calc(var(--mc-nav-h) + 20px); }
#mc-content:focus { outline: none; }

.mc-skip-link {
  position: absolute;
  top: 16px;
  left: 16px;
  transform: translateY(calc(-100% - 32px));
  z-index: 400;
  padding: 12px 20px;
  border-radius: var(--mc-r-btn);
  background: var(--mc-green);
  color: #0d0d0d;
  font-family: var(--mc-font-body);
  font-size: 14px;
  font-weight: 700;
  /* transform statt top: kein Reflow auf dem wichtigsten Tastaturelement */
  transition: transform 0.2s ease;
}
.mc-skip-link:focus { transform: none; color: #0d0d0d; }

/* Die Empfehlung ist das einzige Produkt in der Sidebar und gehoert
   deshalb nach oben, nicht unter Serverstatus und Spendenziel. */
/* gap statt margin: die Empfehlung steht per order:-1 optisch oben, ist im
   Quelltext aber das letzte Widget. :last-child hat ihr damit den Abstand
   nach unten genommen, die Boxen klebten aneinander. */
.store-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); }
.store-sidebar .widget-featured { order: -1; }
.store-sidebar .widget + .widget { margin-top: 0; }
.store-sidebar .widget { margin-bottom: 0; }

/* Beschreibung sitzt in der linken Spalte unter dem Bild */
.mc-product-media .descr { margin-top: var(--sp-6); }

/* ============================================================
   3  TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mc-font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.text-content { line-height: 1.75; color: var(--mc-w70); }
.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4,
.text-content h5,
.text-content h6 { color: var(--mc-white); }
.text-content h1 { font-size: var(--d-lg); }
.text-content h2 { font-size: var(--d-md); margin-top: var(--sp-2); }
.text-content h3 { font-size: var(--d-sm); }
.text-content h4 { font-size: var(--t-lg); }
.text-content h1:not(:last-child),
.text-content h2:not(:last-child),
.text-content h3:not(:last-child) { margin-bottom: 14px; }
.text-content p { max-width: 68ch; }
.text-content strong { color: var(--mc-white); font-weight: 600; }
.text-content a {
  color: var(--mc-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text-content a:hover { color: var(--mc-white); }
.text-content img { border-radius: var(--mc-r-card); }
.text-content hr { height: 1px; margin: 28px 0; background: var(--mc-w07); }
.text-content ul,
.text-content ol { color: var(--mc-w70); }

/* Zitat im Store-Text, uebernommen von .philosophy-text */
.text-content blockquote {
  position: relative;
  margin: 24px 0;
  padding: 26px 30px;
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-panel);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  font-style: italic;
  color: var(--mc-w50);
}
.text-content blockquote::before {
  content: '"';
  position: absolute;
  top: -14px;
  left: 20px;
  font-family: var(--mc-font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--mc-red);
  opacity: 0.25;
}

.link-text { color: var(--mc-w70); text-decoration-color: var(--mc-w15); }
.link-text:hover { color: var(--mc-green); }

/* ============================================================
   4  BUTTONS
   Hierarchie wie im WP-Theme: weiss traegt den Haupt-CTA im Header-Band,
   gruen jede Kaufhandlung, ghost alles Sekundaere.
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  height: var(--btn-size);
  min-height: 44px;
  padding: 0 20px;
  line-height: var(--btn-size);
  border-radius: var(--mc-r-btn);
  font-family: var(--mc-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* filter und box-shadow bewusst NICHT in der Transition: beide sind
     teuer, der 20px-Blur wird sonst pro Frame neu gerastert. Sie
     schalten hart um, was am Button niemand als Sprung wahrnimmt. */
  transition: background-color var(--mc-ease), border-color var(--mc-ease),
              color var(--mc-ease), transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--mc-green-radial);
  background-color: transparent;
  border: 1px solid var(--mc-green);
  color: rgba(0, 0, 0, 0.82);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--mc-green-radial);
  color: rgba(0, 0, 0, 0.82);
  filter: brightness(1.08);
  box-shadow: 0 0 20px var(--mc-green-soft);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background-color: var(--mc-w05);
  border: 1px solid var(--mc-w15);
  color: var(--mc-white);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--mc-w10);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--mc-white);
  box-shadow: none;
}
.btn-secondary:active { transform: scale(0.98); }

.btn-tertiary {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--mc-w50);
}
.btn-tertiary:hover,
.btn-tertiary:focus { background-color: var(--mc-w07); color: var(--mc-white); }
/* Gleiche Rueckmeldung wie bei den grossen Buttons, damit sich jeder
   Klick im Shop gleich anfuehlt. */
.btn-tertiary:active { transform: scale(0.94); }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled,
.btn-primary[disabled],
.btn-secondary[disabled],
[aria-disabled="true"] {
  opacity: 0.4;
  filter: grayscale(70%);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-glyph,
.btn-icon { border-radius: var(--mc-r-btn); }

/* ============================================================
   5  TOPBAR UND NAVIGATION
   ============================================================ */
.mc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: var(--mc-nav-h);
  border-bottom: 1px solid var(--mc-w07);
  /* Kein backdrop-filter auf diesem Element: das erzeugt einen Containing
     Block und sperrt das mobile Navigations-Drawer (position: fixed) in die
     Leiste ein. Der Blur sitzt deshalb auf dem ::before-Layer. */
}
.mc-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Sobald man den Kopf verlassen hat, setzt sich die Leiste leicht ab.
   Rein scroll-getrieben, kein Listener, kein Reflow. Der Schatten liegt
   fertig auf einer eigenen Ebene, animiert wird nur deren Deckkraft:
   ein wandernder Blur-Radius muesste sonst pro Frame neu gerastert
   werden. Ohne Unterstuetzung bleibt die Leiste flach, was in Ordnung ist. */
.mc-topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .mc-topbar::after {
      animation: mcBarElevate linear both;
      animation-timeline: scroll();
      animation-range: 0 140px;
    }
  }
}
@keyframes mcBarElevate {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mc-topbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
}
.mc-topbar-left { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.mc-topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

.site-title {
  font-family: var(--mc-font-display);
  font-size: var(--d-md);
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}
/* Ein langer Store-Name ohne Logo darf den Warenkorb-Button nicht aus dem
   Viewport schieben, wo body{overflow-x:hidden} ihn stumm abschneidet. */
.site-title a { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; }
.site-title img {
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: opacity var(--mc-ease);
}
.site-title a:hover img { opacity: 0.82; }

/* Icons, die shared.css an .site-header-inner haengt. Diese Klasse gibt es
   in diesem Theme nicht mehr, also hier neu setzen. */
.toggle-navigation {
  /* Eigener Burger statt Tebex-Lagerware: drei Balken mit den Breiten
     22/14/18px, exakt wie .nav-toggle im WordPress-Theme. */
  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='0' width='22' height='2' rx='1'/%3E%3Crect x='0' y='7' width='14' height='2' rx='1'/%3E%3Crect x='0' y='14' width='18' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  --btn-icon-size: 22px;
  display: none;
}
/* Symbole siehe Abschnitt 17: alle als Data-URI, wegen CORS. */

.mc-topbar .user-name { contain: paint; max-width: 180px; }
.mc-topbar .user-name .text-inner { overflow: hidden; }
.mc-topbar .user-name .text,
.mc-topbar .user-name .text-hover {
  display: block;
  transition: opacity var(--mc-ease), visibility 0s var(--mc-ease);
}
.mc-topbar .user-name .text-hover { margin-top: calc(var(--btn-size) * -1); }
.mc-topbar .user-name:not(:hover):not(:focus-within) .text-hover { visibility: hidden; opacity: 0; }
.mc-topbar .user-name:hover .text,
.mc-topbar .user-name:focus-within .text { visibility: hidden; opacity: 0; }

.mc-basket-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: var(--mc-r-pill);
  background: rgba(0, 0, 0, 0.30);
  /* .btn-glyph-text setzt auf Mobil font-size:0 und color:transparent,
     beides muss der Zaehler explizit zuruecksetzen. */
  color: #0d0d0d;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

/* Server-Adresse zum Kopieren */
.mc-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--btn-size);
  padding: 0 14px;
  border: 1px solid var(--mc-w10);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w03);
  font-family: var(--mc-font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--mc-w70);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--mc-ease), border-color var(--mc-ease), background-color var(--mc-ease);
}
.mc-copy:hover { color: var(--mc-white); border-color: var(--mc-w15); background: var(--mc-w05); }
/* Ohne sichtbares Zeichen liest sich die Flaeche wie ein Etikett. Das
   title-Attribut erreicht weder Touch noch Tastatur, deshalb ein Glyph
   plus aria-label im Markup. Zwei Rechtecke, kein gezeichnetes Icon-Set. */
.mc-copy::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.75;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-shadow: 3px -3px 0 -1.5px var(--mc-bg), 4.5px -4.5px 0 0 currentColor;
  transition: opacity var(--mc-ease);
}
.mc-copy:hover::after { opacity: 0.9; }

.mc-discord-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--btn-size);
  padding: 0 14px;
  border: 1px solid rgba(88, 101, 242, 0.40);
  border-radius: var(--mc-r-btn);
  background: rgba(88, 101, 242, 0.12);
  font-size: var(--t-sm);
  font-weight: 600;
  color: #c5cbff;
  white-space: nowrap;
  transition: background-color var(--mc-ease), border-color var(--mc-ease), color var(--mc-ease);
}
.mc-discord-link:hover {
  background: var(--mc-discord);
  border-color: var(--mc-discord);
  color: #fff;
}
.mc-discord-link svg { width: 16px; height: 16px; flex: none; }

/* Horizontale Navigation */
@media (width > 960px) {
  .navigation-horizontal { flex: 1 1 auto; min-width: 0; }
  .navigation-horizontal .menu {
    justify-content: flex-start;
    gap: 2px;
    padding: 0;
    background: transparent;
    line-height: normal;
    font-family: var(--mc-font-body);
    font-size: 13px;
    font-weight: 500;
    flex-wrap: nowrap;
  }
  .navigation-horizontal .menu > li > a {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--mc-r-btn);
    color: var(--mc-w50);
    letter-spacing: 0.02em;
    transition: color var(--mc-ease), background-color var(--mc-ease);
  }
  .navigation-horizontal .menu > li > a:hover { color: var(--mc-white); background: var(--mc-w07); }
  .navigation-horizontal a.link-active { position: relative; color: var(--mc-white); background: var(--mc-w05); }
  .navigation-horizontal .menu > li > a.link-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: var(--mc-r-pill);
    background: var(--mc-red);
    box-shadow: 0 0 10px var(--mc-red-glow);
  }
  .navigation-horizontal .has-children { gap: 2px; }
  .navigation-horizontal .has-children .toggle {
    --btn-size: 24px;
    --btn-icon-size: 16px;
    color: var(--mc-w50);
  }
  .navigation-horizontal .has-children > ul {
    top: calc(100% + 6px);
    min-width: 208px;
    padding: 6px;
    border: 1px solid var(--mc-w15);
    border-radius: var(--mc-r-card);
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(20px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
  .navigation-horizontal li li a {
    max-width: none;
    padding: 9px 12px;
    border-radius: var(--mc-r-btn);
    color: var(--mc-w50);
    font-size: 13px;
  }
  .navigation-horizontal li li a:hover,
  .navigation-horizontal li li a.link-active {
    color: #0d0d0d !important;
    background-color: var(--mc-green) !important;
  }
}

/* Mobiles Drawer */
@media (width <= 960px) {
  .toggle-navigation { display: block; }

  .site-navigation .menu {
    inset: 0 56px 0 0;
    padding: 84px 22px 22px;
    background: rgba(11, 11, 11, 0.98);
    border-right: 1px solid var(--mc-w07);
    font-family: var(--mc-font-body);
    font-size: 16px;
    color: var(--mc-w70);
  }
  /* Solange das Menue offen ist, liegen die Kopfzeilen-Buttons darunter
     und waren nicht mehr klickbar. Das Panel nimmt jetzt die volle Breite
     und der Schliessen-Knopf sitzt an der Kante. */
  body.show-navigation .mc-topbar-right { display: none; }
  body.show-navigation .site-navigation .menu { inset: 0; }
  .site-navigation .close-navigation { top: 12px; right: 12px; color: var(--mc-white); }
  .site-navigation a { padding: 13px 0; font-weight: 500; }
  .site-navigation a:hover,
  .site-navigation a.link-active { color: var(--mc-green); }
  .site-navigation .menu > li + li { border-top: 1px solid var(--mc-w05); }
  .site-navigation ul ul { padding-left: 14px; }
}

/* Vertikale Navigation, falls in den Theme-Settings gewaehlt */
@media (width > 960px) {
  .navigation-vertical .menu {
    font-family: var(--mc-font-body);
    font-size: 14px;
    color: var(--mc-w50);
  }
  .navigation-vertical a { padding: 10px 12px; border-radius: var(--mc-r-btn); }
  .navigation-vertical a:hover { color: var(--mc-white); background: var(--mc-w05); }
  .navigation-vertical a.link-active {
    color: var(--mc-green);
    background: rgba(156, 255, 134, 0.08);
    font-weight: 600;
  }
}

/* ============================================================
   6  HEADER-BAND
   Direkt uebernommen von .page-header aus dem WordPress-Theme:
   50px-Raster, gruener Glow links, roter Glow rechts, Bebas zentriert.
   Jede Seite des Stores bekommt dieses Band, damit Shop und Website
   als dieselbe Seite gelesen werden.
   ============================================================ */
.mc-band {
  position: relative;
  overflow: hidden;
  padding: 34px 0 30px;
  text-align: center;
  border-bottom: 1px solid var(--mc-w07);
  background: var(--mc-bg);
}
.mc-band::before {
  content: "";
  position: absolute;
  /* Grösser als das Band: das Raster wandert um genau eine Kachel,
     ohne dass an den Rändern eine Kante sichtbar wird. */
  inset: -60px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}
.mc-band-glow-left,
.mc-band-glow-right {
  position: absolute;
  top: 0;
  width: 500px;
  height: 300px;
  pointer-events: none;
}
.mc-band-glow-left  { left: -200px;  background: radial-gradient(ellipse, rgba(156, 255, 134, 0.08) 0%, transparent 70%); }
.mc-band-glow-right { right: -200px; background: radial-gradient(ellipse, rgba(255, 103, 104, 0.08) 0%, transparent 70%); }

/* Rauschen aus .hero-noise des WordPress-Themes. Nimmt den Flaechen die
   digitale Glaette und ist das Erkennungsmerkmal der Startseite. */
.mc-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Die weisse Diagonale aus der Wortmarke, als wanderndes Licht. Das ist
   das einzige Element, das sich von selbst bewegt und auffallen soll. */
.mc-band-sweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 22%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
}

.mc-band-inner { position: relative; z-index: 1; }

.mc-band-title {
  font-family: var(--mc-font-display);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 0.95;
  margin: 0;
}
/* Nur die Startseite bekommt den grossen Auftritt. Auf Kategorie- und
   Inhaltsseiten wiederholt der Titel den aktiven Navigationspunkt, dafuer
   darf er nicht die halbe erste Ansicht kosten. */
.mc-band--home .mc-band-title { font-size: var(--d-xl); margin-bottom: 14px; }
.mc-band-headline + .mc-band-sub,
.mc-band-title + .mc-band-meta { margin-top: 12px; }
.mc-band-sub {
  max-width: 560px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mc-w50);
}

/* Startseite: echte Wortmarke statt nachgebautem Schriftzug */
.mc-band--home { padding: 56px 0 44px; }
.mc-band-headline { margin: 0; font-weight: 400; }
.mc-band-headline .mc-band-title {
  display: block;
  font-family: var(--mc-font-display);
  font-size: var(--d-xl);
  line-height: 0.95;
  margin-bottom: 14px;
}
.mc-band-logo {
  height: clamp(66px, 11vw, 116px);
  width: auto;
  max-width: min(100%, 620px);
  margin: 0 auto 22px;
  object-fit: contain;
}
.mc-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

/* Kategorie-Seiten: Anzahl der Angebote als sachliche Ergaenzung */
.mc-band-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 5px 14px;
  border: 1px solid var(--mc-w10);
  border-radius: var(--mc-r-pill);
  background: var(--mc-w03);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mc-w50);
}

/* Sale-Banner sitzt direkt unter der Topbar */
.site-sale-banner {
  max-width: none;
  padding: 13px var(--content-padding);
  font-family: var(--mc-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-red);
  background: rgba(255, 103, 104, 0.10);
  border-bottom: 1px solid rgba(255, 103, 104, 0.20);
}

/* ============================================================
   7  KATEGORIE-LEISTE
   Statt eines weiteren Kartenrasters eine ruhige Chip-Reihe. Das ist
   die schnellste Navigation im Shop und wiederholt das Kartenlayout nicht.
   ============================================================ */
.mc-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.mc-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--mc-w10);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w03);
  font-family: var(--mc-font-display);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--mc-w70);
  transition: color var(--mc-ease), border-color var(--mc-ease), background-color var(--mc-ease);
}
.mc-cat:hover {
  color: var(--mc-white);
  border-color: var(--mc-w15);
  background: var(--mc-w05);
}
.mc-cat img { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* shared.css rendert die Startseiten-Kategorien als Grid. Diese Struktur
   wird hier nicht verwendet, die Regeln werden trotzdem neutralisiert. */
.site-home-categories { display: block; padding: 0; max-width: none; }

/* Erste Produktreihe direkt auf der Startseite */
.mc-lead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-4);
  padding-top: 40px;
}
.mc-lead-title {
  font-family: var(--mc-font-display);
  font-size: var(--d-lg);
  letter-spacing: 0.04em;
  margin: 0;
}
.mc-lead-more {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--mc-w50);
  transition: color var(--mc-ease);
}
.mc-lead-more:hover { color: var(--mc-green); }
/* auto-fit statt auto-fill: bei drei Paketen bleibt sonst eine leere
   vierte Spalte im Raster stehen. */
.mc-lead .store-products-images {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
}
@media (width <= 600px) {
  .mc-lead { grid-template-columns: 1fr; }
}

/* ============================================================
   8  FLAECHEN UND SIDEBAR
   ============================================================ */
@media (width > 960px) {
  .site-content-widgets { gap: 40px; }
}

.store-text,
.category-description,
.no-products,
.store-product-full,
.store-category-tiered,
.store-quote,
.store-product-options,
.widget:not(.site-navigation) {
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-panel);
  background: var(--mc-panel);
}

.store-text { padding: var(--sp-8); font-size: var(--t-md); }

/* Der Tebex-Editor schreibt Inline-Styles in die Store-Beschreibung, unter
   anderem font-family: Impact und feste Zeilenhoehen. Beides wird hier
   neutralisiert, damit die Seite in Bebas Neue und Space Grotesk bleibt. */
.store-text [style*="font-family"] { font-family: inherit !important; }
.store-text [style*="line-height"] { line-height: inherit !important; }
.store-text h1 [style], .store-text h2 [style],
.store-text h3 [style], .store-text strong [style] { font-size: inherit !important; }
.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 { text-align: left; }

.no-products { padding: 56px var(--sp-6); font-size: var(--t-md); color: var(--mc-w50); text-align: center; }

.category-description { margin-bottom: var(--sp-6); padding: var(--sp-6); font-size: var(--t-md); }

/* Widgets */
.widget:not(.site-navigation) { padding: var(--sp-6); }

/* Widgets, die nur ihren Leerzustand zeigen, kosten in der Sidebar
   ueber 100px Hoehe und sagen nichts. */
.widget:has(.empty) { display: none; }
.widget + .widget { margin-top: 18px; }

.widget-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mc-w07);
  font-family: var(--mc-font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-white);
  text-align: left;
}

/* Badge-Rezept aus .changelog-type des WP-Themes */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--mc-r-btn);
  font-family: var(--mc-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-success { color: var(--mc-green); background: rgba(156, 255, 134, 0.12); }
.badge-danger  { color: var(--mc-red);   background: rgba(255, 103, 104, 0.12); }

.widget-server-status .server-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--mc-w10);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w03);
  font-family: var(--mc-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-white);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--mc-ease), background-color var(--mc-ease);
}
.widget-server-status .server-address:hover { border-color: var(--mc-w15); background: var(--mc-w05); }
.widget-server-status .widget-content p { margin-top: 10px; font-size: 13px; color: var(--mc-w50); }

.widget-recent .purchase { padding: 10px 0; border-bottom: 1px solid var(--mc-w05); }
.widget-recent .purchase:last-child { border-bottom: none; }
.widget-recent .avatar { border-radius: var(--mc-r-card); border: 1px solid var(--mc-w07); }
.widget-top-donator .avatar { border-radius: 50%; border: 1px solid var(--mc-w07); }
.widget-recent .username,
.widget-top-donator .username {
  font-family: var(--mc-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mc-white);
}
.widget-recent time,
.widget-recent .sep,
.widget-recent p,
.widget-top-donator p { font-size: 12px; color: var(--mc-w50); }
.widget-recent .price strong,
.widget-top-donator strong { color: var(--mc-green); }
.widget-recent .empty,
.widget-top-donator .empty { font-size: 13px; color: var(--mc-w50); }

.widget-community-goal .progress,
.widget-goal .progress {
  height: 8px;
  border-radius: var(--mc-r-pill);
  background: var(--mc-w07);
  overflow: hidden;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: var(--mc-r-pill);
  background: var(--mc-green-radial);
}
.widget-community-goal p,
.widget-goal p { font-size: 13px; color: var(--mc-w50); }
.widget-community-goal strong,
.widget-goal strong { color: var(--mc-white); }
.widget-community-goal .goal-image { border-radius: var(--mc-r-card); }

.widget-gift-card { text-align: left; }
.widget-gift-card .gift-card-input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--mc-w15);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w05);
  color: var(--mc-white);
  font-family: var(--mc-font-body);
  font-size: 14px;
}
.widget-gift-card .gift-card-input::placeholder { color: var(--mc-w50); }
.widget-gift-card .gift-card-input:focus { border-color: rgba(156, 255, 134, 0.45); background: rgba(156, 255, 134, 0.06); }
.widget-gift-card .check { margin-top: 10px; width: 100%; }
.widget-gift-card .alert { margin-top: 10px; padding: 10px 12px; border-radius: var(--mc-r-btn); font-size: 13px; }
.widget-gift-card .alert-danger  { color: var(--mc-red);  background: rgba(255, 103, 104, 0.10); }
.widget-gift-card .alert-warning { color: #fbbf24;        background: rgba(255, 200, 80, 0.12); }

/* ============================================================
   9  PRODUKTKARTEN
   Kartenrezept identisch zu .changelog-entry im WP-Theme.
   ============================================================ */
/* auto-fit statt auto-fill: bei nur einem Paket in einer Kategorie liess
   auto-fill zwei leere Rasterspalten stehen, die Seite las sich als
   "hier fehlt was". auto-fit klappt leere Spuren zusammen. */
.store-products-images {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  gap: 18px;
}
.store-products-list { gap: 12px; }

.store-product {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 0;
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
  background: var(--mc-w03);
  transition: border-color var(--mc-ease), transform var(--mc-ease-smooth);
}
.store-products-images .store-product:hover,
.store-products-list .store-product:hover {
  border-color: var(--mc-w15);
  transform: translateY(-2px);
}
/* Rote Kante beim Zeigen, uebernommen von .feature-card im WP-Theme.
   Das ist dort die Markierungssprache fuer "hier passiert etwas". */
.store-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #FF6768 0%, #BB494A 100%);
  opacity: 0;
  transition: opacity var(--mc-ease);
}
.store-products-images .store-product:hover::before,
.store-products-list .store-product:hover::before { opacity: 1; }
.widget-featured .store-product::before,
.store-product-full::before { display: none; }

/* Medienflaeche */
.store-product .image-link {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #101010;
  border-bottom: 1px solid var(--mc-w07);
}
.store-products-images .store-product .image-link { display: block; margin: 0; }
/* Paketbilder bei Tebex sind fast immer Banner im Querformat, deshalb
   randlos fuellen statt einpassen. Das ergibt eine ruhige Bildkante
   ueber alle Karten hinweg, auch wenn die Seitenverhaeltnisse abweichen. */
.store-product .image-link .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mc-ease-smooth);
}
.store-product .image-link:hover .image { transform: scale(1.04); }
.store-product .image-default { width: 100%; height: 100%; aspect-ratio: auto; }
.store-product .image-default::before { opacity: 0.25; }

/* Textkoerper der Karte */
.store-product .product-title {
  padding: var(--sp-4) 18px 0;
  font-family: var(--mc-font-display);
  font-size: var(--d-md);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.12;
}
.store-product .product-title a { color: var(--mc-white); }
.store-product .product-title a:hover,
.store-product .image-link:hover ~ .product-title a { color: var(--mc-green); }
.store-product .product-title .countdown {
  margin-top: 6px;
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-red);
}

.store-product .actions {
  gap: 10px;
  padding: 14px 18px 18px;
  /* Titel und Teaser sind unterschiedlich lang. Ohne das hier stehen Preis
     und Kaufbutton in jeder Karte auf einer anderen Hoehe. */
  margin-top: auto;
}
.store-product .actions .btn-primary,
.store-product .actions .btn-secondary { flex: 1 1 auto; }
.store-product .gift,
.store-product .remove { flex: none; }
/* Tebex graut beim Laden den ganzen Block auf 30% aus und legt einen
   Spinner darueber. Das sah nach Fehler aus. Stattdessen bleibt alles
   stehen und nur der gedrueckte Button zeigt einen kleinen Spinner. */
.store-product .actions.updating { pointer-events: none; }
.store-product .actions.updating > * { opacity: 1; filter: none; }
.store-product .actions.updating::before { display: none; }
.store-product .actions.updating .add,
.store-product .actions.updating .subscribe {
  position: relative;
  color: transparent;
}
.store-product .actions.updating .add::after,
.store-product .actions.updating .subscribe::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: rgba(0, 0, 0, 0.75);
  animation: mcSpin 0.6s linear infinite;
}

/* Bestaetigung: ein gruener Haken blitzt kurz ueber dem Kaufblock auf und
   deckt damit den Uebergang zum Mengenfeld ab. */
.store-product .actions { position: relative; }
.store-product .actions.mc-added::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mc-green) var(--ic-check) center/20px no-repeat;
  box-shadow: 0 0 0 6px rgba(13, 13, 13, 0.85);
  pointer-events: none;
  animation: mcAdded 1.2s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.store-product .actions.mc-added .quantity-field,
.store-product .actions.mc-added .open-basket-cta {
  animation: mcPopIn 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both;
  animation-delay: 0.12s;
}

@keyframes mcSpin { to { transform: rotate(360deg); } }
@keyframes mcAdded {
  0%   { opacity: 0; transform: scale(0.4); }
  22%  { opacity: 1; transform: scale(1); }
  68%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes mcPopIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Preis */
.store-product .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mc-font-body);
  font-size: 13px;
  color: var(--mc-w50);
}
.store-product .price strong {
  font-family: var(--mc-font-display);
  font-size: var(--d-md);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--mc-green);
  /* Glow der gruenen Zahlen aus dem WP-Theme (.stat-number) */
  text-shadow: 0 0 20px var(--mc-green-soft);
}
.store-product .price .discount {
  font-family: var(--mc-font-body);
  font-size: 14px;
  color: var(--mc-w50);
  opacity: 0.9;
}
.mc-price-note { font-size: 13px; font-weight: 500; color: var(--mc-w50); }

/* Rabatt-Badge. Erscheint nur, wenn wirklich ein Rabatt aktiv ist. */
.mc-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--mc-r-btn);
  /* Flaches Rot statt Verlauf: auf dem dunklen Ende des Radials kaeme der
     Text nur auf 4.2:1, flach sind es 7.4:1 bei 10px Schriftgroesse. */
  background: var(--mc-red);
  font-family: var(--mc-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0d0d0d;
  pointer-events: none;
}

/* Listenlayout */
/* Raster statt Flex-Reihe: vorher standen Titel, Kurztext und Kaufblock
   nebeneinander, wodurch "450x Coin" auf zwei Zeilen umbrach und die
   Abstaende sprangen. Jetzt Bild links, Titel und Text gestapelt in der
   Mitte, Preis und Button rechts. */
.store-products-list .store-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media title   actions"
    "media teaser  actions";
  align-items: center;
  gap: 2px 18px;
  padding: 12px 16px;
}
.store-products-list .store-product .image-link   { grid-area: media; }
.store-products-list .store-product .product-title { grid-area: title; align-self: end; padding: 0; }
.store-products-list .store-product .mc-card-teaser { grid-area: teaser; align-self: start; padding: 0; }
.store-products-list .store-product .actions {
  grid-area: actions;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  align-items: center;
}
.store-products-list .store-product .price { white-space: nowrap; margin: 0; }
@media (width <= 700px) {
  .store-products-list .store-product {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "media title"
      "media teaser"
      "actions actions";
    row-gap: 12px;
  }
}
/* Querformat, nicht Quadrat: Paketbilder kommen als 16:9 oder 16:10 an.
   Ein 1:1-Mittelschnitt auf 76px schneidet das Produkt komplett heraus
   und uebrig bleibt der dunkle Hintergrund. */
.store-products-list .store-product .image-link {
  flex: none;
  width: 120px;
  height: 75px;
  aspect-ratio: auto;
  border: 1px solid var(--mc-w07);
  border-bottom: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
}
@media (width <= 600px) {
  .store-products-list .store-product .image-link { width: 96px; height: 60px; }
}
.store-products-list .store-product .image-link .image { object-fit: cover; }
.store-products-list .store-product .product-title { flex: 1 1 auto; padding: 0; font-size: 20px; }
.store-products-list .store-product .actions { flex: none; padding: 0; }
.store-products-list .store-product .price strong { font-size: 24px; }
.store-products-list .store-product .mc-sale { top: 6px; left: 6px; }


/* Empfehlungs-Widget: Karte flach in die Sidebar legen */
.widget-featured .store-product {
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.widget-featured .store-product:hover { transform: none; }
.widget-featured .store-product .image-link {
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
  margin-bottom: var(--sp-3);
}
.widget-featured .store-product .product-title { padding: 0; font-size: 20px; }
.widget-featured .store-product .actions { flex-direction: column; align-items: stretch; padding: 12px 0 0; }
.widget-featured .store-product .wide,
.widget-featured .store-product .half { width: 100%; }

/* Mengenfeld */
.quantity-field {
  --btn-size: 42px;
  border: 1px solid var(--mc-w15);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w05);
  color: var(--mc-white);
}
.store-product .quantity-field { background: var(--mc-w05); }
.quantity-field input[type=number] {
  border: none;
  font-family: var(--mc-font-body);
  font-weight: 600;
  color: var(--mc-white);
}
.quantity-field .open-basket { font-size: 13px; font-weight: 600; color: var(--mc-green); }
.quantity-field .open-basket:hover { color: var(--mc-white); }
.quantity-field .adjust { color: var(--mc-w70); }

/* Kurzbeschreibung auf der Karte. Der Inhalt ist das Beschreibungs-HTML
   aus Tebex, gekürzt wird deshalb hier statt per Filter: alles darin wird
   auf Fließtext flachgelegt und auf zwei Zeilen beschnitten. */
.store-product .mc-card-teaser {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  padding: var(--sp-2) 18px 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--mc-w50);
}
.store-product .mc-card-teaser * {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  list-style: none;
}
/* Ein Leerzeichen hinter jedem Absatz, sonst kleben zwei <p> im
   flachgelegten Teaser aneinander: "verfuegbar.Der Preis". */
.store-product .mc-card-teaser p::after { content: " "; }
.store-product .mc-card-teaser img,
.store-product .mc-card-teaser br,
.store-product .mc-card-teaser hr,
.store-product .mc-card-teaser iframe,
.store-product .mc-card-teaser video,
.store-product .mc-card-teaser table,
.store-product .mc-card-teaser script,
.store-product .mc-card-teaser style { display: none; }
/* In der Zeilenansicht ist der Kurztext die einzige Kaufhilfe zwischen
   "450x Coin" und "1000x Coin", deshalb bleibt er dort sichtbar. Nur im
   schmalen Sidebar-Widget waere er zu gedraengt. */
.widget-featured .mc-card-teaser { display: none; }
.store-products-list .mc-card-teaser { padding: 4px 0 0; -webkit-line-clamp: 1; }

/* Grund, warum ein Paket nicht kaufbar ist. Stand vorher nur im
   title-Attribut und war fuer Touch und Tastatur unerreichbar. */
.mc-blocked {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--mc-red);
}


/* ============================================================
   10  PRODUKTSEITE
   ============================================================ */
.store-product-full { padding: var(--sp-8); gap: var(--sp-6); }
.store-product-full:hover { transform: none; }
.store-product-full .image-link { border: none; }

.mc-back {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-w50);
  transition: color var(--mc-ease);
}
.mc-back:hover { color: var(--mc-green); }

.store-product-full .product-title {
  padding: 0;
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: 0.02em;
  color: var(--mc-white);
}

.mc-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (width > 860px) {
  .mc-product-layout { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); }
}

.mc-product-media .image,
.mc-product-media .media-slider {
  width: 100%;
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
  background: #101010;
  overflow: hidden;
}
/* Auf der Detailseite muss das Produkt ganz zu sehen sein, hier also
   einpassen. Im Raster bleibt es cover, damit die Bildkante ruhig laeuft. */
.mc-product-media .image { aspect-ratio: 16 / 10; object-fit: contain; padding: var(--sp-4); }
.mc-product-media .image-default { aspect-ratio: 16 / 10; width: 100%; }

.mc-product-buy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: calc(var(--mc-nav-h) + 20px);
}
@media (width <= 860px) { .mc-product-buy { position: static; } }

/* shared.css klebt .store-product-full .actions per position:sticky !important
   und order:1 an den Seitenfuss. Fuer die zweispaltige Kaufbox faellt das weg. */
.store-product-full .actions {
  position: static !important;
  order: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
  background: var(--mc-w03);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.store-product-full .price { width: 100%; margin: 0 0 4px; }
.store-product-full .price strong { font-size: 38px; }
/* Haupt-CTA nimmt die Zeile, das Geschenk-Icon sitzt daneben statt als
   volle Leiste ohne Beschriftung darunter. */
.store-product-full .actions .half,
.store-product-full .actions .wide { flex: 1 1 160px; min-width: 0; width: auto; }
.store-product-full .actions .gift { flex: 0 0 var(--btn-size); width: var(--btn-size); }
.store-product-full .actions .quantity-field { flex: 1 1 100%; }

/* Eine sachliche Zeile statt eines Vorteilsdreiklangs */
.mc-delivery {
  padding: 12px 14px;
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w03);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--mc-w50);
}
.mc-delivery strong { color: var(--mc-w70); font-weight: 600; }

.store-product-full .descr { font-size: 15px; }

.media-slider .thumb { border-radius: var(--mc-r-card); border: 1px solid var(--mc-w07); }
.media-slider .open-lightbox {
  border-radius: var(--mc-r-btn);
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 600;
}

/* ============================================================
   11  TIERED-KATEGORIEN
   ============================================================ */
.store-category-tiered { padding: var(--sp-8); }
.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3 { text-align: left; }

.store-product-tiered {
  --border-color: var(--mc-w07);
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
  background: var(--mc-w03);
  padding: 22px;
  text-align: center;
  transition: border-color var(--mc-ease), transform var(--mc-ease-smooth);
}
.store-product-tiered:hover { border-color: var(--mc-w15); transform: translateY(-2px); }
.store-product-tiered.subscribed { border-color: rgba(156, 255, 134, 0.45); }
.store-product-tiered.store-product-cta {
  background-image: linear-gradient(to bottom, transparent 62%, rgba(156, 255, 134, 0.10));
}
.store-product-tiered .product-title {
  padding: 0;
  font-family: var(--mc-font-display);
  font-size: var(--d-md);
  letter-spacing: 0.04em;
}
.store-product-tiered .price { justify-content: center; }
.store-product-tiered .price strong { font-family: var(--mc-font-display); font-size: var(--d-lg); color: var(--mc-green); }
.store-product-tiered .descr { color: var(--mc-w70); font-size: 14px; }
.store-product-tiered .actions { padding: 0; }

.store-quote { padding: var(--sp-8); }
.store-quote .quote-actions { gap: 12px; margin-top: 8px; }

/* ============================================================
   12  FORMULARE
   ============================================================ */
.store-form input[type=text],
.store-form input[type=password],
.store-form input[type=email],
.store-form input[type=number],
.store-form input[type=search],
.store-form input[type=url],
.store-form input[type=tel],
.store-form input[type=date],
.store-form select,
.store-form textarea {
  padding: 13px 14px;
  border: 1px solid var(--mc-w15);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w05);
  color: var(--mc-white);
  font-family: var(--mc-font-body);
  font-size: 15px;
  transition: border-color var(--mc-ease), background-color var(--mc-ease);
}
.popup .store-form input[type=text],
.popup .store-form input[type=password],
.popup .store-form input[type=email],
.popup .store-form input[type=number],
.popup .store-form select,
.popup .store-form textarea { background: rgba(255, 255, 255, 0.06); }
.store-form input::placeholder,
.store-form textarea::placeholder { color: var(--mc-w50); }
.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus { border-color: rgba(156, 255, 134, 0.45); background: rgba(156, 255, 134, 0.06); }
.store-form p { color: var(--mc-w70); font-size: 15px; }
.store-form .actions { gap: 12px; }

.store-product-options { padding: var(--sp-8); }
.store-product-options .product-title {
  padding: 0;
  font-family: var(--mc-font-display);
  font-size: var(--d-lg);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-5);
}

/* ============================================================
   13  WARENKORB, POPUPS, TOASTS
   ============================================================ */
.popup { background-color: rgba(0, 0, 0, 0.82); }

.popup-content {
  border: 1px solid var(--mc-w15);
  border-radius: var(--mc-r-panel);
  background: #141414;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
.popup-close { border-radius: var(--mc-r-btn); color: var(--mc-w50); background: var(--mc-w05); }
.popup-close:hover { color: var(--mc-white); background: var(--mc-w10); }

.basket-popup-content,
.basket-popup-content .popup-close { border-radius: 0; }
.basket-popup-content { border-left: 1px solid var(--mc-w15); background: #111; }

/* Der Schliessen-Knopf sass per position:absolute an der Ecke des
   Vollbild-Overlays und schwebte damit neben dem Drawer statt darin. */
.basket-popup .popup-close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  opacity: 1;
}

.basket .basket-header { padding: 24px var(--sp-6) 16px; }
.basket .basket-second-header { padding: 14px var(--sp-6); }
.basket .basket-items { padding: var(--sp-5) var(--sp-6); gap: 12px; }
.basket .basket-item { padding: 16px; gap: 14px; }
.basket .basket-item .info { min-width: 0; }
.basket .basket-item .title { margin-bottom: 2px; word-break: break-word; }
.basket .basket-item .quantity-field { --btn-size: 36px; flex: none; }
.basket .basket-item .remove { flex: none; }
.basket .basket-checkout { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.basket .basket-checkout h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-4);
}
.basket .basket-checkout .checkout { width: 100%; }

/* Auf schmalen Geraeten nimmt der Drawer die volle Breite. */
@media (width <= 560px) {
  .basket .basket-header,
  .basket .basket-second-header,
  .basket .basket-items,
  .basket .basket-checkout { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .basket .basket-item { flex-wrap: wrap; }
  .basket .basket-item .info { flex: 1 1 100%; }
}
/* Ist niemand angemeldet, zeigt der Drawer statt der Liste das
   Login-Formular. Ohne diesen Abstand klebt es in der oberen Ecke. */
.basket-popup-content > .store-form:not(.basket),
.basket-popup-content > .store-text,
.login-popup-content { padding: var(--sp-8); }

.basket .basket-header { background: rgba(255, 255, 255, 0.03); }
.basket .basket-title { font-family: var(--mc-font-display); font-size: var(--d-lg); letter-spacing: 0.06em; }
.basket .basket-second-header {
  border-bottom: 1px solid var(--mc-w07);
  background: transparent;
  font-size: 13px;
  color: var(--mc-w50);
}
.basket .basket-second-header .total strong {
  font-family: var(--mc-font-display);
  font-size: var(--d-md);
  color: var(--mc-green);
}
.basket .basket-item {
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-card);
  background: var(--mc-w03);
  transition: border-color var(--mc-ease);
}
.basket .basket-item:hover { border-color: var(--mc-w15); }
.basket .basket-item .title { font-family: var(--mc-font-display); font-size: var(--d-sm); letter-spacing: 0.02em; }
.basket .basket-item .title a:hover { color: var(--mc-green); }
.basket .basket-item .options li,
.basket .basket-item .trial { font-size: var(--t-sm); color: var(--mc-w50); }
.basket .basket-item .price strong { font-family: var(--mc-font-display); font-size: var(--d-md); color: var(--mc-green); }
.basket .basket-item .remove { --btn-icon-size: 16px; }
.basket .basket-empty { color: var(--mc-w50); font-size: 15px; }

.basket .basket-checkout {
  border-top: 1px solid var(--mc-w07);
  background: rgba(255, 255, 255, 0.02);
}
.basket .basket-checkout h3 { font-family: var(--mc-font-display); font-size: var(--d-md); letter-spacing: 0.06em; }
.basket .basket-checkout .total strong {
  font-family: var(--mc-font-display);
  font-size: var(--d-lg);
  color: var(--mc-green);
}
.basket .basket-checkout .checkout { font-size: 14px; letter-spacing: 0.08em; }

.toast {
  border-radius: var(--mc-r-card);
  border: 1px solid var(--mc-w15);
  background: #1a1a1a;
  font-family: var(--mc-font-body);
  font-size: 14px;
}
.toast.toast-success { background: rgba(156, 255, 134, 0.14); border-color: rgba(156, 255, 134, 0.35); color: var(--mc-green); }
.toast.toast-error   { background: rgba(255, 103, 104, 0.14); border-color: rgba(255, 103, 104, 0.35); color: var(--mc-red); }
.toast.toast-warning { background: rgba(255, 200, 80, 0.14);  border-color: rgba(255, 200, 80, 0.35);  color: #fbbf24; }
.toast-close { border-radius: var(--mc-r-btn); }

/* ============================================================
   14  FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--mc-w07); background: var(--mc-bg-dark); }

/* shared.css macht .site-footer-inner auf Mobil zu einer zentrierten
   Flex-Spalte und positioniert .we-accept auf Desktop absolut. Beides
   wuerde das Spaltenlayout zerlegen. */
.site-footer-inner { display: block; padding-top: 0; padding-bottom: 0; }
@media (width <= 960px) {
  .site-footer-inner { display: block; align-items: stretch; }
}

/* Vier Spalten: Marke, Sortiment, Hilfe, Zahlungsarten. Zahlungsarten
   hingen vorher per Inline-Style unter der Hilfe-Spalte und liessen das
   Raster unten unruhig auslaufen. */
.mc-footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 52px 0 40px;
}
@media (width <= 1100px) {
  .mc-footer-top { grid-template-columns: 1fr 1fr; }
}

.mc-footer-brand { min-width: 0; }
.mc-footer-logo {
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.9;
  margin-bottom: 16px;
}
.mc-footer-name {
  font-family: var(--mc-font-display);
  font-size: var(--d-lg);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.mc-footer-tagline { max-width: 380px; font-size: 13px; line-height: 1.7; color: var(--mc-w50); }
.mc-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.mc-footer-col-title {
  margin-bottom: 14px;
  font-family: var(--mc-font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-w50);
}
.mc-footer-nav { display: flex; flex-direction: column; gap: 4px; }
.mc-footer-nav a {
  padding: 5px 0;
  font-size: 13px;
  color: var(--mc-w50);
  transition: color var(--mc-ease);
}
.mc-footer-nav a:hover { color: var(--mc-white); }

.site-footer-inner .we-accept {
  position: static;
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.site-footer-inner .we-accept li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--mc-w07);
  border-radius: var(--mc-r-btn);
  background: var(--mc-w03);
}
.site-footer-inner .we-accept img {
  height: 14px;
  max-height: 14px;
  max-width: 42px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
}

.mc-footer-bottom { padding: 18px 0 26px; border-top: 1px solid var(--mc-w05); }
.site-footer-inner .copyright,
.mc-legal { font-size: 12px; line-height: 1.7; color: var(--mc-w50); }
.mc-legal { margin-top: 6px; max-width: 76ch; }

/* ============================================================
   15  MOTION
   Vier Bewegungen im Hintergrund und drei als Rueckmeldung. Jede hat
   einen Grund, keine ist Deko um der Deko willen:

   Hintergrund  gruenes und rotes Licht atmen  = die Marke lebt
                weisse Diagonale wandert       = die Wortmarke als Licht
                Raster driftet                 = Tiefe, kaum wahrnehmbar
   Rueckmeldung Karten steigen beim Scrollen   = Reihenfolge beim Stoebern
                Karte hebt sich beim Zeigen    = anklickbar
                Bild zoomt leicht              = das Produkt ist das Ziel
                Button gibt nach beim Druecken = Klick kam an

   Animiert werden ausschliesslich transform und opacity.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* Umgebungslicht. 26s und 34s laufen bewusst auseinander, damit kein
     hoerbarer Takt entsteht und die Schleife nicht auffaellt. */
  .mc-band-glow-left  { animation: mcDriftLeft  26s ease-in-out infinite; }
  .mc-band-glow-right { animation: mcDriftRight 34s ease-in-out infinite; }

  /* Der Lichtschnitt laeuft nur alle 15s einmal durch und ist die
     restliche Zeit unsichtbar. Selten genug, dass er nicht nervt. */
  .mc-band-sweep { animation: mcSweep 15s ease-in-out infinite; }

  .mc-band::before { animation: mcGrid 44s linear infinite; }

  /* Einfaedeln beim Laden. Fallback fuer Browser ohne view()-Timeline. */
  /* backwards statt both: die Karte endet garantiert im sichtbaren
     Normalzustand, statt am letzten Keyframe einzufrieren. Falls die
     Animation nie startet, ist der Inhalt trotzdem da. */
  .store-products-images .store-product,
  .store-products-list .store-product,
  .store-sidebar .widget,
  .mc-cat {
    animation: mcEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .store-products-images .store-product:nth-child(1),
  .store-products-list .store-product:nth-child(1),
  .mc-cat:nth-child(1) { animation-delay: 0.02s; }
  .store-products-images .store-product:nth-child(2),
  .store-products-list .store-product:nth-child(2),
  .mc-cat:nth-child(2) { animation-delay: 0.06s; }
  .store-products-images .store-product:nth-child(3),
  .store-products-list .store-product:nth-child(3),
  .mc-cat:nth-child(3) { animation-delay: 0.10s; }
  .store-products-images .store-product:nth-child(n+4),
  .store-products-list .store-product:nth-child(n+4),
  .mc-cat:nth-child(n+4) { animation-delay: 0.14s; }
}

/* Wo der Browser scroll-getriebene Animationen kann, steigen die Karten
   beim Hereinscrollen auf, statt alle beim Laden gleichzeitig. Ohne
   Support greift der Block darueber, der Inhalt bleibt also immer
   sichtbar und kann nicht bei opacity 0 haengen bleiben. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .store-products-images .store-product,
    .store-products-list .store-product,
    .store-sidebar .widget,
    .mc-cat {
      animation: mcEnter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 44%;
      animation-delay: 0s;
    }
  }
}

@keyframes mcEnter {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes mcDriftLeft {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.85; }
  50%      { transform: translate3d(38px, 16px, 0) scale(1.14); opacity: 1; }
}

@keyframes mcDriftRight {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1);  opacity: 1; }
  50%      { transform: translate3d(-32px, 20px, 0) scale(1); opacity: 0.8; }
}

@keyframes mcSweep {
  0%, 66%  { transform: translate3d(-160%, 0, 0) skewX(-18deg); opacity: 0; }
  74%      { opacity: 1; }
  92%      { opacity: 1; }
  100%     { transform: translate3d(520%, 0, 0) skewX(-18deg); opacity: 0; }
}

@keyframes mcGrid {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50px, 50px, 0); }
}

/* Nutzer mit reduzierter Bewegung bekommen eine vollstaendig ruhige
   Seite: keine Schleifen, keine Hover-Transforms, kein Zoom. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .mc-band-glow-left,
  .mc-band-glow-right,
  .mc-band::before,
  .mc-band-sweep { animation: none !important; }
  .mc-band-sweep { display: none; }
  .store-product,
  .store-product-tiered,
  .store-product .image-link .image,
  .store-products-images .store-product:hover,
  .store-products-list .store-product:hover,
  .store-product-tiered:hover,
  .store-product .image-link:hover .image,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-tertiary:active { transform: none !important; }
  .mc-topbar::after { animation: none !important; opacity: 0; }
  /* Bestaetigung und Spinner: der Haken bleibt, aber ohne Bewegung. */
  .store-product .actions.updating .add::after,
  .store-product .actions.updating .subscribe::after { animation: none !important; }
  .store-product .actions.mc-added::after,
  .store-product .actions.mc-added .quantity-field,
  .store-product .actions.mc-added .open-basket-cta {
    animation-duration: 0.001ms !important;
    transform: none !important;
  }
}


/* ============================================================
   17  ICONS
   Tebex laedt alle Symbole per CSS-mask von template-assets.tebex.io.
   Auf einer eigenen Domain ist das cross-origin, und mask-image
   unterliegt CORS: der Browser blockiert die Dateien, uebrig bleiben
   leere Flaechen (Geschenk-Button, Warenkorb-Pfeil, Plus und Minus).
   Deshalb hier alle Symbole als Data-URI, gleiche Bedeutung, gleiche
   Strichstaerke, keine Fremdanfrage mehr.
   ============================================================ */
:root {
  --ic-cart:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2.5 6h19l-2 12.4a2 2 0 0 1-2 1.6H6.5a2 2 0 0 1-2-1.6L2.5 6Z'/%3E%3Cpath d='M8 6a4 4 0 0 1 8 0h-2a2 2 0 0 0-4 0H8Z'/%3E%3C/svg%3E");
  --ic-user:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0v1H4v-1Z'/%3E%3C/svg%3E");
  --ic-gift:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11h18v10a1 1 0 0 1-1 1h-7v-11h-2v11H4a1 1 0 0 1-1-1V11Z'/%3E%3Cpath d='M2 7h20v3H2V7Z'/%3E%3Cpath d='M12 7C11 4.5 9.6 3 8 3a2.5 2.5 0 0 0 0 5h4Zm0 0c1-2.5 2.4-4 4-4a2.5 2.5 0 0 1 0 5h-4Z'/%3E%3C/svg%3E");
  --ic-plus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='10.6' y='3' width='2.8' height='18' rx='1.4'/%3E%3Crect x='3' y='10.6' width='18' height='2.8' rx='1.4'/%3E%3C/svg%3E");
  --ic-minus:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='10.6' width='18' height='2.8' rx='1.4'/%3E%3C/svg%3E");
  --ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --ic-close:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
  --ic-trash:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Z'/%3E%3Cpath d='M6 8h12l-1 12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 8Z'/%3E%3C/svg%3E");
  --ic-clock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-box:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 21 7v10l-9 4.4L3 17V7l9-4.4Z'/%3E%3Cpath d='M3 7l9 4.4L21 7M12 11.4V21.4'/%3E%3C/svg%3E");
  --ic-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 1-6.4 2.6' /%3E%3C/svg%3E");
  --ic-logout:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h11'/%3E%3C/svg%3E");
  --ic-expand:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
  --ic-check:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E");
  --ic-play:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5L8 5.5Z'/%3E%3C/svg%3E");
}

/* Buttons, deren Symbol ueber --btn-icon kommt */
.btn-icon, .btn-glyph, .btn-glyph-text, .btn-icon-text { --btn-icon: var(--ic-plus); }
.open-basket                        { --btn-icon: var(--ic-cart); }
.user-name                          { --btn-icon: var(--ic-user); }
.store-product .gift, .gift         { --btn-icon: var(--ic-gift); }
.store-product .remove, .remove,
.basket .basket-item .remove        { --btn-icon: var(--ic-trash); }
.quantity-field .adjust             { --btn-icon: var(--ic-plus); }
.quantity-field .adjust.decrease    { --btn-icon: var(--ic-minus); }
/* shared.css setzt den Chevron in drei Navigationskontexten mit hoeherer
   Spezifitaet, deshalb hier alle drei nachziehen. */
.has-children .toggle,
.site-navigation .has-children .toggle,
.navigation-horizontal .has-children .toggle,
.navigation-vertical .has-children .toggle { --btn-icon: var(--ic-chevron); }
.site-navigation .close-navigation  { --btn-icon: var(--ic-close); }
.media-slider .open-lightbox        { --btn-icon: var(--ic-expand); }

/* Direkte mask-Deklarationen aus shared.css */
.store-product .product-title .countdown::before,
.store-product-tiered .countdown::before {
  mask: var(--ic-clock) center center/contain no-repeat;
}
.store-product .image-default::before,
.site-home-categories .category .image-default::before {
  mask: var(--ic-box) center center/contain no-repeat;
}
.basket .basket-title::before {
  mask: var(--ic-user) center center/contain no-repeat;
}
.site-navigation .log-out a::before {
  mask: var(--ic-logout) center center/contain no-repeat;
}
.popup-close::before {
  mask: var(--ic-close) center center/contain no-repeat;
}
.store-product .actions.updating::before,
.store-product-options .actions.updating::before,
.gift-form-popup .popup-content .actions.updating::before,
.popup.popup-loading .popup-content::before,
.basket-popup-content.updating::before {
  mask: var(--ic-spinner) center center/contain no-repeat;
}
.popup.popup-media-slider .thumb-youtube::after,
.media-slider .thumb-youtube::after {
  mask: var(--ic-play) center center/contain no-repeat;
}


/* ============================================================
   18  SEITENUEBERGAENGE
   Tebex aktiviert in shared.css `@view-transition { navigation: auto }`
   und spricht Gruppen wie `siteContent` an, vergibt die Namen aber nie
   und definiert `--page-transition-duration` nicht. Damit lief bisher
   nichts. Hier wird die Verkabelung fertiggestellt.

   Idee: Kopfleiste, Navigation und Fuss bleiben beim Seitenwechsel
   stehen, nur der Seitenkoerper wird ausgetauscht. Dadurch fuehlt sich
   der Shop wie eine Anwendung an und nicht wie einzelne Seiten.
   Browser ohne Unterstuetzung navigieren wie bisher, ohne Nachteil.
   ============================================================ */
:root { --page-transition-duration: 320ms; }

/* `.site` umschliesst die ganze Seite. Mit eigenem Namen wuerde alles zu
   EINER Gruppe und die feinere Aufteilung darunter faende nicht statt. */
.site { view-transition-name: none; }

/* Diese drei sind auf jeder Seite identisch und sollen deshalb gar nicht
   animieren. Genau das erzeugt den Eindruck einer durchgehenden Huelle. */
.site-header { view-transition-name: siteHeader; }
.site-footer { view-transition-name: siteFooter; }

::view-transition-group(siteHeader),
::view-transition-group(siteNavigation),
::view-transition-group(siteFooter) { animation-duration: var(--page-transition-duration); }

::view-transition-old(siteHeader),
::view-transition-new(siteHeader),
::view-transition-old(siteNavigation),
::view-transition-new(siteNavigation),
::view-transition-old(siteFooter),
::view-transition-new(siteFooter) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
}

/* Alles Uebrige, also Kopfband und Inhalt, wechselt als ein Block:
   das Alte sinkt leicht ab und geht, das Neue kommt von unten herein.
   Die beiden ueberlappen sich bewusst nur zur Haelfte, sonst matscht es. */
::view-transition-old(root) {
  animation: mcPageOut var(--page-transition-duration) cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: mcPageIn var(--page-transition-duration) cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes mcPageOut {
  0%        { opacity: 1; transform: none; }
  55%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes mcPageIn {
  0%, 45%   { opacity: 0; transform: translateY(12px); }
  100%      { opacity: 1; transform: none; }
}

/* Die aktive Markierung in der Navigation wandert beim Tabwechsel von
   einem Punkt zum naechsten, statt neu zu erscheinen. Bewusst nur auf
   der obersten Ebene: waeren zwei Elemente gleichzeitig aktiv, wuerde
   der Browser den kompletten Uebergang verwerfen. */
@media (width > 960px) {
  .navigation-horizontal > .menu > li > a.link-active {
    view-transition-name: navActive;
  }
  ::view-transition-group(navActive) {
    animation-duration: var(--page-transition-duration);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-old(navActive),
  ::view-transition-new(navActive) { animation: none; }
}

/* Ankersprünge weich, betrifft vor allem den Sprung-Link. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   16  RESPONSIVE
   ============================================================ */
@media (width <= 1180px) {
  .mc-topbar-right .mc-copy { display: none; }
}

@media (width <= 960px) {
  :root { --mc-nav-h: 60px; }

  .site-title { font-size: 19px; }
  .site-title img { height: 30px; max-width: 148px; }

  .mc-topbar-right .mc-copy,
  .mc-topbar-right .mc-discord-link { display: none; }

  .mc-basket-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    margin-left: 0;
    line-height: 18px;
    background: #0d0d0d;
    color: var(--mc-green);
    border: 1px solid var(--mc-green);
  }
  .open-basket { position: relative; }

  .mc-band { padding: 44px 0 40px; }
  .mc-band--home { padding: 52px 0 44px; }
  .mc-band-actions .btn-primary,
  .mc-band-actions .btn-secondary { flex: 1 1 auto; height: 48px; line-height: 48px; }

  .store-text,
  .store-product-full,
  .store-category-tiered,
  .store-quote { padding: 22px; }

  .mc-footer-top { grid-template-columns: 1fr; gap: 30px; padding: 38px 0 30px; }
}

@media (width <= 600px) {
  .store-products-images { grid-template-columns: 1fr; }
  .store-text { padding: 20px; }
  .widget:not(.site-navigation) { padding: 18px; }
}