.gb-back{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:rgba(243,246,251,.82);margin:0 0 14px;}.gb-back:hover{color:#d3b07a;}.gb-back[hidden]{display:none;}
    .hh-heroband {
      position: relative;
      width: 100%;
      /* Ganzes Bild zeigen (Seitenverhältnis des Banners 2048 × 683), nicht hineinzoomen */
      aspect-ratio: 2048 / 683;
      max-height: 420px; /* flach halten: auf großen Bildschirmen nicht die ganze Seite füllen */
      overflow: hidden;
      background: #0a0e17;
    }
    .hh-heroband img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 70%;
      display: block;
    }
    .hh-heroband::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg,
        rgba(8,11,18,.18) 0%,
        rgba(8,11,18,0) 25%,
        rgba(8,11,18,0) 82%,
        rgba(8,11,18,.85) 100%);
    }

    /* ── Layout ── */
    .konfig-layout {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 28px;
      align-items: start;
    }
    @media (max-width: 960px) { .konfig-layout { grid-template-columns: 1fr; } }

    /* ── Panel ── */
    .konfig-panel {
      background: rgba(10,14,23,.78);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 28px;
      padding: 32px;
    }
    .konfig-section { margin-bottom: 28px; }
    .konfig-section h3 {
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #d3b07a;
      margin: 0 0 6px;
      font-weight: 700;
    }
    .marke-seite-btn {
      flex: 1; padding: 6px 0; border-radius: 9px; cursor: pointer;
      border: 1px solid rgba(255,255,255,.12); background: transparent;
      color: rgba(243,246,251,.7); font: 700 .74rem 'Manrope', sans-serif;
    }
    .marke-seite-btn.aktiv { border-color: rgba(211,176,122,.6); background: rgba(211,176,122,.12); color: #d3b07a; }
    .konfig-section .sub {
      font-size: .82rem;
      color: rgba(243,246,251,.75);
      margin: 0 0 12px;
    }

    /* ── Option Buttons ── */
    .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 8px; }
    .option-btn {
      padding: 10px 12px; border-radius: 12px;
      border: 1.5px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: rgba(243,246,251,.75);
      font: 700 .83rem/1.3 'Manrope', sans-serif;
      cursor: pointer; transition: all .2s; text-align: center;
    }
    .option-btn:hover { border-color: rgba(192,138,87,.4); background: rgba(192,138,87,.07); }
    .option-btn.selected { border-color: rgba(192,138,87,.7); background: rgba(192,138,87,.15); color: #d3b07a; }
    .option-btn .opt-price { display: block; font-size: .72rem; font-weight: 500; opacity: .86; margin-top: 2px; }
    .option-btn.selected .opt-price { opacity: .9; color: #d3b07a; }

    /* ── Farb-Swatches ── */
    .farb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
    .farb-swatch {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      cursor: pointer;
    }
    /* Radio bleibt für Tastatur und Screenreader erreichbar (nur optisch versteckt) */
    .farb-swatch { position: relative; }
    .farb-swatch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .farb-swatch:has(input:focus-visible) { outline: 2px solid #e6c391; outline-offset: 2px; }
    .farb-dot {
      width: 34px; height: 34px; border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,.12);
      transition: all .18s;
    }
    .farb-swatch span:last-child {
      font-size: .65rem; color: rgba(243,246,251,.75);
      font-weight: 700; text-align: center; white-space: nowrap;
    }
    .farb-swatch.active .farb-dot,
    .farb-swatch:hover .farb-dot {
      border-color: #d3b07a;
      box-shadow: 0 0 0 2px rgba(192,138,87,.35);
      transform: scale(1.12);
    }
    .farb-swatch.active span:last-child { color: #d3b07a; }

    /* ── Naht-Swatches ── */
    .naht-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .naht-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
    /* Radio bleibt für Tastatur und Screenreader erreichbar (nur optisch versteckt) */
    .naht-swatch { position: relative; }
    .naht-swatch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .naht-swatch:has(input:focus-visible) { outline: 2px solid #e6c391; outline-offset: 2px; }
    .naht-dot {
      width: 32px; height: 32px; border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,.12);
      transition: all .18s; display: flex; align-items: center;
      justify-content: center;
    }
    .naht-swatch span:last-child { font-size: .62rem; color: rgba(243,246,251,.7); font-weight: 600; text-align: center; }
    .naht-swatch.active .naht-dot, .naht-swatch:hover .naht-dot { border-color: #d3b07a; box-shadow: 0 0 0 2px rgba(192,138,87,.3); transform: scale(1.12); }
    .naht-swatch.active span:last-child { color: #d3b07a; }

    /* ── Extras (Checkboxen) ── */
    .extras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .extra-btn {
      padding: 10px 12px; border-radius: 12px;
      border: 1.5px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: rgba(243,246,251,.75);
      font: 600 .82rem/1.3 'Manrope', sans-serif;
      cursor: pointer; transition: all .2s; text-align: left;
      display: flex; align-items: center; gap: 8px;
    }
    .extra-btn:hover { border-color: rgba(192,138,87,.4); background: rgba(192,138,87,.07); }
    .extra-btn.selected { border-color: rgba(192,138,87,.7); background: rgba(192,138,87,.15); color: #d3b07a; }
    .extra-btn .check {
      width: 16px; height: 16px; border-radius: 4px;
      border: 1.5px solid rgba(255,255,255,.2);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: .65rem;
    }
    .extra-btn.selected .check { background: rgba(192,138,87,.4); border-color: rgba(192,138,87,.7); }

    /* ── Input ── */
    .text-input {
      width: 100%; padding: 10px 14px; border-radius: 12px;
      border: 1.5px solid rgba(255,255,255,.12);
      background: rgba(8,11,18,.8); color: #f3f6fb;
      font: 500 .9rem 'Manrope', sans-serif;
    }
    .text-input:focus { outline: none; border-color: rgba(192,138,87,.5); }
    .num-input {
      width: 110px; padding: 10px 14px; border-radius: 12px;
      border: 1.5px solid rgba(255,255,255,.12);
      background: rgba(8,11,18,.8); color: #f3f6fb;
      font: 700 1rem 'Manrope', sans-serif;
      -moz-appearance: textfield;
    }
    .num-input::-webkit-inner-spin-button { -webkit-appearance: none; }
    .num-input:focus { outline: none; border-color: rgba(192,138,87,.5); }

    /* ── Mess-Anleitung ── */
    .measure-guide {
      display: flex; align-items: flex-start; gap: 16px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: 16px 18px;
      margin: 12px 0 4px;
    }
    .measure-icon { width: 26px; height: 26px; flex-shrink: 0; color: #d3b07a; margin-top: 2px; }
    .measure-tips { display: flex; flex-direction: column; gap: 10px; }
    .measure-tips p {
      margin: 0; display: flex; gap: 10px; align-items: flex-start;
      font-size: .82rem; line-height: 1.55; color: rgba(243,246,251,.84);
    }
    .measure-num {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic; font-weight: 700;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(211,176,122,.1); border: 1px solid rgba(211,176,122,.4);
      color: #d3b07a; font-size: .75rem;
    }
    @media (max-width: 480px) { .measure-guide { flex-direction: column; } }

    /* ── Gravur Toggle ── */
    .gravur-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
    .gravur-toggle button {
      flex: 1; padding: 9px; border-radius: 10px;
      border: 1.5px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: rgba(243,246,251,.84);
      font: 700 .82rem 'Manrope', sans-serif;
      cursor: pointer; transition: all .2s;
    }
    .gravur-toggle button.active {
      border-color: rgba(192,138,87,.7);
      background: rgba(192,138,87,.15);
      color: #d3b07a;
    }

    /* ── Rechte Spalte ── */
    .preview-sticky { position: sticky; top: 116px; align-self: start; }
    .preview-card {
      background: rgba(10,14,23,.78);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 28px;
      padding: 24px;
      margin-bottom: 16px;
    }
    .preview-card h3 {
      font-size: .75rem; letter-spacing: .1em;
      text-transform: uppercase; color: rgba(243,246,251,.7);
      margin: 0 0 16px;
    }
    #halsbandImg {
      width: 100%; display: block;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
      transition: opacity .2s ease;
      border-radius: 8px;
    }
    .meta-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px; margin-top: 14px;
    }
    .meta-box {
      background: rgba(255,255,255,.04);
      border-radius: 10px; padding: 8px 12px;
    }
    .meta-box strong { display: block; font-size: .72rem; color: rgba(243,246,251,.7); font-weight: 700; }
    .meta-box span { font-size: .88rem; font-weight: 700; color: #f3f6fb; }

    /* ── Zusammenfassung ── */
    .summary-card {
      background: rgba(10,14,23,.78);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 28px;
      padding: 24px;
    }
    .summary-card h3 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 800; }
    .sum-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
    .sum-list li {
      display: flex; justify-content: space-between;
      font-size: .83rem; color: rgba(243,246,251,.86);
      padding: 7px 10px; border-radius: 9px;
      background: rgba(255,255,255,.03);
    }
    .sum-list li strong { color: #f3f6fb; }
    .price-total { font-size: 2rem; font-weight: 900; color: #d3b07a; text-align: center; margin: 0 0 16px; }
    .price-note { font-size: .72rem; color: rgba(243,246,251,.72); text-align: center; margin: -10px 0 16px; }
    .laenge-hinweis { font-size: .82rem; font-weight: 700; color: #e07070; margin: 8px 0 0; line-height: 1.5; }
    .laenge-hinweis a { color: #d3b07a; text-decoration: underline; }
    .cart-msg { text-align: center; font-size: .83rem; color: #d3b07a; margin-top: 8px; min-height: 18px; }

    /* ── Rechte Spalte Karten ── */
    .belt-preview-card, .belt-summary-card, .belt-config-card {
      background: rgba(10,14,23,.78);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 28px;
      box-shadow: 0 18px 48px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      padding: 24px;
    }
    .belt-summary-card { margin-top: 16px; }
    .inquiry-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; margin-top:24px; align-items:start; }
    .belt-inquiry-card { background:rgba(10,14,23,.78); border:1px solid rgba(255,255,255,.1); border-radius:28px; box-shadow:0 18px 48px rgba(0,0,0,.35); backdrop-filter:blur(10px); padding:28px; }
    @media (max-width:1180px) { .inquiry-layout { grid-template-columns:1fr; } }
    .summary-price { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:18px; border-radius:22px; background:linear-gradient(135deg,rgba(168,137,95,.16),rgba(211,176,122,.08)); border:1px solid rgba(211,176,122,.28); margin-bottom:18px; }
    .summary-price strong { display:block; font-size:.9rem; color:rgba(243,246,251,.8); margin-bottom:4px; }
    .summary-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
    .summary-list li { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
    .summary-list li strong { color:rgba(243,246,251,.8); font-weight:700; }
    .mini-note { font-size:.82rem; color:rgba(243,246,251,.7); margin-top:4px; }
    /* Naturleder-Hinweis, gut lesbar statt als graue Kleinschrift:
       Farbe und Maserung sind bei gewachsenem Leder der häufigste Grund
       für Rückfragen nach der Lieferung. */
    .leder-hinweis {
      margin-top: 14px; padding: 14px 16px; border-radius: 16px;
      background: rgba(211,176,122,.08); border: 1px solid rgba(211,176,122,.3);
      font-size: .86rem; line-height: 1.65; color: rgba(243,246,251,.78);
      max-width: 620px;
    }
    .leder-hinweis strong { color: #d3b07a; display: block; margin-bottom: 3px; }
    .primary-cta { display:flex; width:100%; margin-top:16px; }

    @media (max-width: 768px) {
      html, body { overflow-x: clip !important; }
      .container { width: calc(100% - 24px) !important; padding: 0 12px !important; box-sizing: border-box !important; }
      * { max-width: 100% !important; box-sizing: border-box !important; }
      svg, .naht-dot, .swatch-dot, input[type="radio"], input[type="checkbox"] { max-width: none !important; }
      img { max-width: 100% !important; }
      .konfig-layout, .inquiry-layout { display: block !important; }
      div[style*="grid-template-columns"] { display: block !important; }
      .extras-grid { grid-template-columns: 1fr !important; }
      .option-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
      .option-btn { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
      .konfig-panel { padding: 18px 14px !important; border-radius: 18px !important; }
      .belt-config-card, .belt-summary-card, .belt-help-card,
      .belt-preview-card, .belt-inquiry-card, .info-card { padding: 16px 14px !important; width: 100% !important; margin-bottom: 14px !important; }
      div[style*="position:sticky"], div[style*="sticky"] { position: static !important; top: auto !important; }
      div[style*="420px"] { width: 100% !important; min-width: 0 !important; }
      canvas { max-width: 100% !important; height: auto !important; }
      .primary-cta { width: 100% !important; }
      .summary-price { flex-direction: column !important; }
      .section-title { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }
    }
    /* Schriftarten-Listen: auf dem Handy volle Breite des Textfelds (Beispiel + voller Name),
       deckend und über den folgenden Abschnitten. Die generelle Regel "* { max-width:100% }"
       hatte sie sonst auf die Breite des kleinen Auswahlknopfs gestaucht. */
    @media (max-width: 768px) {
      #fontPickerList, #markeFontList {
        left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
        max-height: min(288px, 48vh) !important; background: #0b0f18 !important; opacity: 1 !important;
      }
    }
    /* Mobil: lange Wörter ("Businessgürtel") dürfen die Spalte nicht aufweiten,
       sonst rutscht die zweite Karte über den Rand. Verschluss-Auswahl bekommt
       auf schmalen Geräten die volle Breite (Bild oben, Auswahl darunter). */
    @media (max-width: 600px) {
      .verschluss-row { flex-direction: column !important; align-items: stretch !important; }
      .verschluss-row > div:first-child { align-self: flex-start; }
      .verschluss-row select { width: 100% !important; }
    }

/* Berater-Reiter (rechter Rand) und WhatsApp-Knopf (rechts unten) sollen den Text der stehenden Vorschau nicht überdecken */
@media (min-width: 861px) and (max-width: 1400px) {
  .preview-sticky > .belt-preview-card:first-child { padding-right: 64px !important; }
}