/* Ausgelagert aus src/pages/gravur-druck.html (bisheriger <style>-Block, Konfigurator „Gravur & Druck“).
   Eingebunden mit ?v=AUTO; scripts/prepare-site.mjs ersetzt AUTO beim Bauen durch die ersten 8 Zeichen
   des SHA-256 dieser Datei – bei Änderungen muss nichts von Hand angepasst werden. */
    /* ══ Konfigurator „Artikel personalisieren“ (#produkte) ══
       Schritte, Kacheln und Zusammenfassung wie in Maßgürtel und Custom Wear. */
    #produkte { scroll-margin-top: calc(var(--gd-kopf, 96px) + 8px); }
    #produkte.section { padding-top: 16px; }
    .gd-back{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:rgba(243,246,251,.7);min-height:44px;}
    .gd-back:hover{color:#d3b07a;}
    .gd-back[hidden]{display:none;}
    .gd-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(211,176,122,.75);}
    .gd-klein{font-size:.8rem;color:rgba(243,246,251,.72);line-height:1.55;margin:6px 0 0;}
    .gd-rechte-box{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:rgba(211,176,122,.06);border:1px solid rgba(211,176,122,.2);margin:12px 0 0;}
    .gd-rechte{font-size:.85rem;color:rgba(243,246,251,.82);line-height:1.55;margin:0;}
    .gd-rechte strong{color:#d3b07a;}
    .gd-rechte-mehr{font-size:.82rem;color:rgba(243,246,251,.75);}
    .gd-rechte-mehr summary{cursor:pointer;color:#d3b07a;font-weight:700;min-height:28px;display:list-item;}
    .gd-rechte-mehr p{margin:8px 0 0;line-height:1.6;}
    .gd-hinweis{font-size:.8rem;color:rgba(243,246,251,.72);line-height:1.6;margin:14px 0 0;padding:9px 11px;border:1px solid rgba(211,176,122,.26);border-radius:9px;background:rgba(211,176,122,.07);}
    .gd-hinweis strong{color:rgba(243,246,251,.9);}
    .gd-fertig{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:14px 0 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(211,176,122,.3);background:rgba(211,176,122,.06);}
    .gd-fertig[hidden]{display:none;}
    .gd-fertig img{flex:0 0 auto;width:56px;height:auto;border-radius:8px;display:block;}
    .gd-fertig-text{flex:1 1 200px;min-width:0;font-size:.82rem;line-height:1.5;color:rgba(243,246,251,.78);}
    .gd-fertig-text p{margin:0;}
    .gd-fertig-kopf{margin:0 0 2px !important;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d3b07a;}
    .gd-fertig-link{display:inline-block;margin-top:6px;font-weight:800;font-size:.82rem;color:#d3b07a;text-decoration:underline;text-underline-offset:3px;}
    .gd-fertig-link:hover{color:#e6c791;}

    .gk-kopf { max-width: 1120px; margin: 0 auto 16px; }
    .gk-kopf h2 { margin: 0 0 8px; }
    .gk-kopf p { margin: 0; max-width: 62ch; font-size: .96rem; line-height: 1.7; color: rgba(243,246,251,.72); }
    .gk-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; align-items: start; }
    .gk-panel, .gk-karte {
      background: linear-gradient(180deg, rgba(14,18,27,.86), rgba(9,12,19,.9));
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,.45);
      min-width: 0;
    }
    .gk-panel { padding: 26px 26px 30px; counter-reset: gkstep; }
    .gk-karte { padding: 20px; }
    .gk-seite { display: grid; gap: 18px; min-width: 0; }

    /* Fortschrittsleiste (klebt unter dem Seitenkopf, springt zu den Schritten) */
    .gd-fortschritt { position: sticky; top: var(--gd-kopf, 96px); z-index: 3; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 6px; margin: -6px -8px 12px; padding: 6px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,14,23,.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
    .gd-fortschritt a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1px solid transparent; font: 800 .84rem/1.15 'Manrope', sans-serif; text-align: center; white-space: nowrap; color: rgba(243,246,251,.78); transition: background .18s, color .18s, border-color .18s, opacity .18s; }
    .gd-fortschritt a b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .76rem; font-weight: 900; color: #d3b07a; border: 1px solid rgba(211,176,122,.5); background: rgba(211,176,122,.1); }
    .gd-fortschritt a:hover { border-color: rgba(211,176,122,.4); color: #f3f6fb; }
    .gd-fortschritt a.ist-aktiv { background: linear-gradient(180deg, #d3b07a, #c08a57); color: #14100a; border-color: #d3b07a; }
    .gd-fortschritt a.ist-aktiv b { color: #14100a; border-color: rgba(20,16,10,.45); background: rgba(20,16,10,.1); }
    .gd-fortschritt a.ist-aus { opacity: .4; pointer-events: none; }
    .gd-fortschritt a:focus-visible { outline: 2px solid #e6c391; outline-offset: 1px; }
    @media (max-width: 700px) {
      .gd-fortschritt { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: -6px -6px 12px; padding: 4px; border-radius: 14px; }
      .gd-fortschritt a { flex-direction: column; gap: 3px; padding: 5px 1px; font-size: .75rem; letter-spacing: -.01em; }
      .gd-fortschritt a b { width: 20px; height: 20px; font-size: .74rem; }
      .gd-fortschritt-lang { display: none; }
    }
    .gk-schritt { scroll-margin-top: calc(var(--gd-kopf, 96px) + 72px); }
    .gd-unterschied { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 2px; font-size: .84rem; font-weight: 800; color: #d3b07a; text-decoration: underline; text-underline-offset: 3px; }
    .gd-unterschied:hover { color: #e6c391; }

    /* Schritte */
    .gk-schritt { counter-increment: gkstep; position: relative; padding: 24px 0 26px 46px; border-bottom: 1px solid rgba(255,255,255,.07); margin: 0; min-width: 0; }
    .gk-schritt:first-of-type { padding-top: 4px; }
    .gk-schritt:last-child { border-bottom: 0; padding-bottom: 4px; }
    .gk-schritt::before { content: counter(gkstep, decimal-leading-zero); position: absolute; left: 0; top: 24px; width: 30px; text-align: center; font: 800 .74rem/1 'Manrope', sans-serif; letter-spacing: .02em; color: rgba(211,176,122,.7); padding: 6px 0; border: 1px solid rgba(211,176,122,.28); border-radius: 8px; background: rgba(211,176,122,.05); }
    .gk-schritt:first-of-type::before { top: 4px; }
    .gk-schritt h3 { font: 800 1rem/1.25 'Manrope', sans-serif; letter-spacing: -.01em; text-transform: none; color: #f3f6fb; margin: 0 0 3px; }
    .gk-schritt h3 span { font-weight: 600; color: rgba(211,176,122,.8); font-size: .78rem; margin-left: 4px; }
    .gk-sub { font-size: .86rem; line-height: 1.5; color: rgba(243,246,251,.72); margin: 0 0 14px; }

    /* Schritt 1: Produkte */
    .gk-produkte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .gk-prod { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 11px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); color: rgba(243,246,251,.82); font: 800 .84rem/1.25 'Manrope', sans-serif; text-align: left; transition: border-color .18s, background .18s, color .18s, transform .18s; min-width: 0; }
    .gk-prod--marke .gk-prod-bild img { object-fit: contain; }
    .gk-prod:hover { border-color: rgba(211,176,122,.4); transform: translateY(-1px); }
    .gk-prod-bild { display: block; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: #0e131e; }
    .gk-prod-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gk-prod.kein-bild .gk-prod-bild { display: none; }
    .gk-prod.kein-bild { justify-content: center; min-height: 64px; }
    .gk-prod-name { min-height: 2.5em; }
    .gk-prod.kein-bild .gk-prod-name { min-height: 0; }
    .gk-prod--marke .gk-prod-bild { background: radial-gradient(90% 80% at 50% 40%, rgba(211,176,122,.14), transparent 75%), #0e131e; }
    .gk-prod--marke .gk-prod-bild img { padding: 6%; box-sizing: border-box; }
    .gk-prod-name { display: block; padding: 0 2px; overflow-wrap: anywhere; }
    .gk-mindest { margin: 6px 0 12px; padding: 8px 12px; border-radius: 12px; font-size: .84rem; font-weight: 700; line-height: 1.4; color: #e6c391; background: rgba(192,138,87,.12); border: 1px solid rgba(230,195,145,.4); }
    .gk-mindest[hidden] { display: none; }
    .gk-grenze { color: #f0a0a0; background: rgba(224,112,112,.1); border-color: rgba(224,112,112,.45); }
    .gk-grenze a { color: #d3b07a; text-decoration: underline; }
    .gk-prod-ab { display: block; padding: 0 2px; margin-top: auto; font-weight: 700; font-size: .8rem; color: rgba(243,246,251,.72); }
    .gk-prod[aria-pressed="true"] { border-color: rgba(211,176,122,.75); background: rgba(211,176,122,.12); color: #e6c391; box-shadow: 0 0 0 1px rgba(211,176,122,.35); }
    .gk-prod[aria-pressed="true"] .gk-prod-ab { color: rgba(230,195,145,.85); }
    .gk-prod-mit { display: block; font-weight: 400; font-size: .74rem; color: rgba(243,246,251,.82); }
    /* Hundemarken-Gestalter (Kachel „Hundemarke“): Bedienelemente kommen aus dem Teil hundemarke-css */
    #schrittHundemarke { border-bottom: 0; padding-bottom: 4px; }
    #schrittHundemarke .hm-block:first-of-type { margin-top: 4px; }
    .gk-schritt[hidden], .gk-karte[hidden] { display: none; }
    .gk-info { margin: 12px 0 0; font-size: .86rem; line-height: 1.55; color: rgba(243,246,251,.74); }
    .gk-info:empty { display: none; }

    /* Schritt 2: Verfahren */
    .gk-verfahren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gk-verf { --ak: 192,138,87; position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; border-radius: 16px; overflow: hidden; cursor: pointer; border: 1.5px solid rgba(255,255,255,.1); color: #f3f6fb; font: 600 .86rem/1.4 'Manrope', sans-serif; transition: border-color .2s, box-shadow .2s, transform .2s; min-width: 0; }
    .gk-verf--laser { background: linear-gradient(180deg, rgba(192,138,87,.13), rgba(46,26,14,.36)); }
    .gk-verf--tief { --ak: 176,190,205; background: linear-gradient(180deg, rgba(176,190,205,.12), rgba(20,24,32,.45)); }
    .gk-verf--uv { --ak: 159,178,201; background: linear-gradient(180deg, rgba(159,178,201,.10), rgba(18,22,34,.5)), radial-gradient(120% 70% at 100% 0%, rgba(217,101,139,.10), transparent 60%), radial-gradient(100% 60% at 0% 0%, rgba(79,176,224,.10), transparent 60%); }
    .gk-verf::before { content: ''; display: block; height: 4px; flex: none; }
    .gk-verf--laser::before { background: linear-gradient(90deg, #8a4f26, #c08a57); }
    .gk-verf--tief::before { background: linear-gradient(90deg, #5d6b7a, #b0becd); }
    .gk-verf--uv::before { background: linear-gradient(90deg, #e0a25a, #d9658b, #8f7be0, #4fb0e0); }
    .gk-verf:hover { transform: translateY(-2px); border-color: rgba(var(--ak), .55); }
    .gk-verf[aria-pressed="true"] { border-color: rgba(var(--ak), .95); box-shadow: 0 0 0 1px rgba(var(--ak), .55), 0 14px 34px rgba(var(--ak), .2); }
    .gk-bild { display: none; position: relative; aspect-ratio: 4/3; background: #0e131e; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
    .gk-bild.ok { display: block; }
    .gk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gk-bild-tag { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; padding: 3px 9px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(8,11,18,.78); color: rgba(243,246,251,.85); border: 1px solid rgba(255,255,255,.14); }
    .gk-verf-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 15px; flex: 1; }
    .gk-verf-titel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 900 1.1rem/1.2 'Manrope', sans-serif; letter-spacing: -.01em; }
    .gk-haken { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); display: grid; place-items: center; color: transparent; transition: all .2s; }
    .gk-haken svg { width: 12px; height: 12px; }
    .gk-verf[aria-pressed="true"] .gk-haken { background: rgb(var(--ak)); border-color: rgb(var(--ak)); color: #14100a; }
    .gk-verf-tag { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ak)); }
    .gk-farben { display: inline-flex; gap: 3px; flex: none; }
    .gk-farben i { width: 10px; height: 10px; border-radius: 50%; display: block; }
    .gk-verf--laser .gk-farben i { background: #b5733c; }
    .gk-verf--tief .gk-farben i { background: #b0becd; }
    .gk-verf--uv .gk-farben i:nth-child(1) { background: #e0a25a; }
    .gk-verf--uv .gk-farben i:nth-child(2) { background: #d9658b; }
    .gk-verf--uv .gk-farben i:nth-child(3) { background: #8f7be0; }
    .gk-verf--uv .gk-farben i:nth-child(4) { background: #4fb0e0; }
    .gk-verf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: rgba(243,246,251,.82); }
    .gk-verf li { padding-left: 14px; position: relative; }
    .gk-verf li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ak), .9); }
    .gk-ideal { margin: 0; font-size: .8rem; color: rgba(243,246,251,.72); }
    .gk-ideal b { color: rgba(243,246,251,.85); font-weight: 800; }
    .gk-verf-preis { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 2px; }
    .gk-verf-preis small { text-align: right; }
    .gk-verf-preis strong { font-size: 1.2rem; font-weight: 900; color: #e6c391; letter-spacing: -.01em; }
    .gk-verf-preis small { font-size: .76rem; font-weight: 700; color: rgba(243,246,251,.7); }
    /* Schiefer-Untersetzer: drei Verfahren (Laser, Tiefengravur, UV) – schmal untereinander, breit nebeneinander */
    .gk-verfahren--drei { grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 1100px), (min-width: 601px) and (max-width: 860px) {
      .gk-verfahren--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
      .gk-verfahren--drei .gk-verf-titel { font-size: 1rem; }
      .gk-verfahren--drei .gk-verf-tag { letter-spacing: .02em; font-size: .7rem; min-width: 0; }
      .gk-verfahren--drei .gk-farben { display: none; }
      .gk-verfahren--drei .gk-verf-preis { flex-wrap: wrap; gap: 2px 8px; }
      .gk-verfahren--drei .gk-verf-preis strong { white-space: nowrap; }
      .gk-verfahren--drei .gk-verf-body { padding: 12px 12px 13px; }
    }
    .gk-verf[hidden] { display: none; }
    /* Ausführung (nur Schiefer-Untersetzer): zwei große Knöpfe */
    .gk-ausf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gk-ausf-opt { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; min-height: 64px; border-radius: 12px; cursor: pointer; text-align: left; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); color: rgba(243,246,251,.82); font: 800 .95rem/1.25 'Manrope', sans-serif; transition: border-color .2s, background .2s; }
    .gk-ausf-opt small { font-weight: 600; font-size: .8rem; line-height: 1.35; color: rgba(243,246,251,.7); }
    .gk-ausf-opt:hover { border-color: rgba(211,176,122,.4); }
    .gk-ausf-opt[aria-pressed="true"] { border-color: rgba(211,176,122,.75); background: rgba(211,176,122,.12); color: #e6c391; box-shadow: 0 0 0 1px rgba(211,176,122,.35); }
    .gk-ausf-opt[aria-pressed="true"] small { color: rgba(230,195,145,.85); }
    .gk-liste li[hidden] { display: none; }

    /* Schritt 3: Gestaltung */
    .gk-hint { margin: 0 0 14px; padding: 11px 13px; border-radius: 12px; font-size: .86rem; line-height: 1.55; color: rgba(243,246,251,.82); background: rgba(192,138,87,.09); border: 1px solid rgba(192,138,87,.3); border-left: 3px solid #c08a57; }
    .gk-hint[data-verfahren="tief"] { background: rgba(176,190,205,.09); border-color: rgba(176,190,205,.3); border-left: 3px solid #b0becd; }
    .gk-hint[data-verfahren="uv"] { background: rgba(159,178,201,.09); border-color: rgba(159,178,201,.3); border-left: 3px solid #8fa8d4; }
    .gk-hint strong { color: #f3f6fb; }
    .gk-feld-label { display: block; margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(211,176,122,.8); }
    .gk-feld-label span { font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(243,246,251,.86); margin-left: 4px; }
    .gk-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(8,11,18,.9); color: #f3f6fb; font: 600 1rem 'Manrope', sans-serif; outline: none; resize: none; line-height: 1.45; }
    .gk-input:focus { border-color: rgba(211,176,122,.6); box-shadow: 0 0 0 3px rgba(211,176,122,.1); }
    /* Schriftauswahl: gleiche Optik wie bei Halsband, Gürtel und Hundemarke (Liste, jede Schrift in sich selbst) */
    .gk-schrift { margin-top: 16px; }
    .gk-schrift-wrap { position: relative; }
    .gk-schrift-knopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 14px; border-radius: 12px; cursor: pointer; text-align: left; border: 1px solid rgba(255,255,255,.14); background: rgba(8,11,18,.9); color: #f3f6fb; }
    .gk-schrift-knopf:hover, .gk-schrift-knopf[aria-expanded="true"] { border-color: rgba(211,176,122,.6); }
    .gk-schrift-knopf:focus-visible { outline: none; border-color: rgba(211,176,122,.6); box-shadow: 0 0 0 3px rgba(211,176,122,.1); }
    .gk-schrift-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; line-height: 1.35; color: #d3b07a; }
    .gk-schrift-pfeil { flex: none; font-size: .6rem; opacity: .7; color: rgba(211,176,122,.9); }
    .gk-schrift-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; max-height: 288px; overflow-y: auto; padding: 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #0b0f18; box-shadow: 0 18px 40px rgba(0,0,0,.55); -webkit-overflow-scrolling: touch; }
    .gk-schrift-liste[hidden] { display: none; }
    .gk-schrift-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 7px 10px; margin: 0 0 2px; border-radius: 8px; cursor: pointer; text-align: left; border: 1.5px solid rgba(255,255,255,.1); background: transparent; color: rgba(243,246,251,.7); }
    .gk-schrift-opt:hover { border-color: rgba(211,176,122,.35); }
    .gk-schrift-opt[aria-selected="true"] { border-color: rgba(211,176,122,.6); background: rgba(211,176,122,.12); color: #d3b07a; }
    .gk-schrift-opt:focus-visible { outline: none; border-color: rgba(211,176,122,.6); }
    .gk-schrift-opt span { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
    .gk-motiv { margin-top: 18px; }
    .gk-datei { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .gk-datei-knopf { padding: 10px 14px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #f3f6fb; font: 700 .85rem 'Manrope', sans-serif; min-height: 44px; }
    .gk-datei-knopf:hover { border-color: rgba(211,176,122,.55); color: #d3b07a; }
    .gd-motiv-unten { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
    .gd-motiv-unten .gk-datei { flex-direction: column; align-items: stretch; gap: 8px; }
    .gk-datei-knopf.gd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 96px; padding: 16px; border: 1.5px dashed rgba(211,176,122,.45); border-radius: 14px; background: rgba(211,176,122,.04); color: rgba(243,246,251,.85); text-align: center; }
    .gk-datei-knopf.gd-drop:hover, .gk-datei-knopf.gd-drop.ist-drueber { border-color: #d3b07a; background: rgba(211,176,122,.1); color: #f3f6fb; }
    .gd-drop svg { color: #d3b07a; }
    .gd-drop-titel { font-weight: 700; font-size: .92rem; }
    .gd-drop-sub { font-weight: 500; font-size: .78rem; color: rgba(243,246,251,.7); }
    .gd-motiv-unten #motivWeg { align-self: flex-start; }
    .gk-datei-name { font-size: .82rem; color: rgba(243,246,251,.72); overflow-wrap: anywhere; min-width: 0; }
    .gk-fehler { margin: 12px 0 0; font-size: .86rem; font-weight: 700; color: #ff9a9a; }
    .gk-fehler:empty { display: none; }

    /* Schritt 4: Menge */
    .gk-menge { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; }
    .gk-menge button { width: 48px; height: 48px; border: none; background: rgba(255,255,255,.04); color: #f3f6fb; font: 800 1.2rem 'Manrope', sans-serif; cursor: pointer; }
    .gk-menge button:disabled { opacity: .35; cursor: not-allowed; }
    .gk-menge button:hover { background: rgba(211,176,122,.14); color: #d3b07a; }
    .gk-menge input { width: 58px; height: 48px; border: none; border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); background: rgba(8,11,18,.9); color: #f3f6fb; text-align: center; font: 700 1rem 'Manrope', sans-serif; -moz-appearance: textfield; }
    .gk-menge input::-webkit-outer-spin-button, .gk-menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* Rechte Spalte */
    .gk-vorschau { background: radial-gradient(90% 40% at 50% 20%, rgba(211,176,122,.11), rgba(211,176,122,0) 72%), linear-gradient(180deg, rgba(14,18,27,.86), rgba(9,12,19,.9)); }
    .gk-vorschau .gd-klein { text-align: center; margin: 12px 0 0; }
    .gk-vorschau .gd-klein:empty { display: none; }

    /* Vorschau-Bühne: Optik und Bedienung wie bei Custom Wear
       (Motiv oder Text ziehen, Größe, Drehung, Vollbild). */
    .gd-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .gd-prev-head h3 { font: 800 .76rem/1.2 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,246,251,.7); margin: 0; }
    .gd-prev-tag { font-size: .76rem; font-weight: 800; color: rgba(211,176,122,.85); text-align: right; min-width: 0; overflow-wrap: anywhere; }
    .gd-stage { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(180deg, #2b2f38, #1a1d24); border: 1px solid rgba(255,255,255,.14); user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
    .gd-stage canvas, .gd-fs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; display: block; }
    .gd-stage canvas:active, .gd-fs-stage canvas:active { cursor: grabbing; }
    .gd-stage canvas:focus-visible { outline: 2px solid #e6c391; outline-offset: -3px; }
    /* Trinkglas „Rundum“: Hinweis, dass die 2D-Ansicht abgerollt ist, mit Sprung in die 360°-Ansicht */
    .gd-rundum-hinweis { position: absolute; left: 10px; top: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 70px); white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid #d3b07a; background: rgba(14,12,8,.9); color: #f0d3a6; font: 800 .78rem/1.25 'Manrope', sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.45); text-align: left; }
    .gd-rundum-hinweis[hidden] { display: none; }
    .gd-rundum-hinweis strong { color: #14100a; background: #d3b07a; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
    .gd-rundum-hinweis:hover strong { background: #e6c391; }
    .gd-rundum-hinweis:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }
    .gd-rundum-hinweis span { overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 520px) { .gd-rundum-hinweis { font-size: .74rem; padding: 6px; } .gd-rundum-hinweis span { display: none; } }
    .gd-stage-hint { position: absolute; left: 12px; bottom: 12px; z-index: 3; pointer-events: none; max-width: calc(100% - 24px); padding: 5px 11px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: rgba(8,11,18,.72); border: 1px solid rgba(255,255,255,.1); color: rgba(243,246,251,.78); backdrop-filter: blur(6px); }
    .gd-fs-btn { position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; background: rgba(8,11,18,.72); border: 1px solid rgba(255,255,255,.12); color: rgba(243,246,251,.7); display: grid; place-items: center; backdrop-filter: blur(6px); transition: all .18s; }
    .gd-fs-btn:hover { color: #d3b07a; border-color: rgba(192,138,87,.4); }

    .gd-ctl { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
    .gd-ctl-hint { font-size: .8rem; color: rgba(243,246,251,.72); margin: 0; line-height: 1.5; }
    .gd-ctl-row { display: flex; align-items: center; gap: 10px; transition: opacity .18s; }
    .gd-ctl-row[hidden], .gd-ctl-hint[hidden] { display: none; }
    .gd-ctl-row > label, .gd-ctl-row > .gd-ctl-name { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(243,246,251,.72); white-space: nowrap; min-width: 76px; }
    .gd-ctl-row input[type=range] { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(192,138,87,.65), rgba(255,255,255,.12)); accent-color: #d3b07a; outline: none; margin: 0; cursor: pointer; }
    .gd-ctl-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #d3b07a; border: 3px solid #12161f; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
    .gd-ctl-row input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #d3b07a; border: 3px solid #12161f; cursor: grab; }
    .gd-ctl-row input[type=range]:focus-visible { outline: 2px solid #e6c391; outline-offset: 5px; }
    /* Trinkglas: 360°-Vorschau und Platzierung (nur sichtbar, wenn das Trinkglas gewählt ist) */
    .gd-prev-head { flex-wrap: wrap; }
    .gd-prev-head .gd-prev-tag { margin-left: auto; white-space: nowrap; }
    .gd-360-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; cursor: pointer; border: 1.5px solid rgba(192,138,87,.45); background: rgba(192,138,87,.1); color: #e6c391; font: 800 .74rem/1.2 'Manrope', sans-serif; transition: all .18s; min-height: 44px; }
    .gd-360-knopf[hidden] { display: none; }
    .gd-360-knopf:hover { background: rgba(192,138,87,.2); color: #f0d3a6; }
    .gd-360-knopf[aria-pressed="true"] { background: #d3b07a; border-color: #d3b07a; color: #14100a; }
    .gd-360-knopf:focus-visible { outline: 2px solid #e6c391; outline-offset: 3px; }
    .gd-stage canvas.gd-360-canvas { z-index: 2; background: linear-gradient(180deg, #2b2f38, #1a1d24); }
    .gd-stage canvas.gd-360-canvas[hidden] { display: none; }
    .gd-stage.ist-360 .gd-fs-btn { display: none; }
    .gd-360-box { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
    .gd-360-box[hidden] { display: none; }
    .gd-360-nav { display: flex; align-items: center; gap: 10px; }
    .gd-360-nav input[type=range] { flex: 1; min-width: 0; height: 4px; accent-color: #d3b07a; margin: 0; cursor: pointer; }
    .gd-360-pfeil { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; cursor: pointer; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #f3f6fb; transition: all .18s; }
    .gd-360-pfeil:hover { border-color: rgba(192,138,87,.5); color: #d3b07a; }
    .gd-360-pfeil:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }
    .gd-360-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .gd-360-chips .gd-opt { flex: 1 1 0; min-width: 0; padding: 9px 4px; text-align: center; }
    .gd-360-knopf { white-space: nowrap; }
    /* Trinkglas: deutlicher Umschalter zwischen Gestalten und 360°-Drehen */
    .gd-modus { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 0 0 12px; border-radius: 14px; border: 1px solid rgba(192,138,87,.35); background: rgba(192,138,87,.06); }
    .gd-modus[hidden] { display: none; }
    .gd-modus-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 10px; border: 0; cursor: pointer; background: transparent; color: #e6c391; font: 800 .9rem/1.2 'Manrope', sans-serif; transition: background .18s, color .18s; }
    .gd-modus-btn:hover { background: rgba(192,138,87,.14); }
    .gd-modus-btn[aria-pressed="true"] { background: #d3b07a; color: #14100a; }
    .gd-modus-btn:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }
    .gd-360-chips .gd-opt[aria-pressed="true"], .gd-art-btn[aria-pressed="true"] { border-color: #d3b07a; background: rgba(211,176,122,.18); color: #e6c391; }
    .gd-360-karte { display: block; width: 100%; max-width: 330px; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); margin: 0 auto; cursor: crosshair; touch-action: none; }
    .gd-360-info { margin: 0; text-align: center; font-size: .78rem; font-weight: 800; color: #d3b07a; }
    .gd-ctl .gd-ctl-art[hidden], .gd-ctl-arthint[hidden] { display: none; }
    .gd-art { display: flex; gap: 8px; flex: 1; min-width: 0; }
    .gd-art-btn, .gd-pick-btn { flex: 1 1 0; padding: 9px 10px; }
    .gd-pick-btn[aria-pressed="true"] { border-color: #d3b07a; background: rgba(211,176,122,.18); color: #e6c391; }
    .gd-ctl.is-leer .gd-ctl-row.gd-ctl-art { opacity: 1; pointer-events: auto; }
    .gd-ctl-row > span.gd-ctl-wert { font-size: .82rem; font-weight: 800; color: #d3b07a; min-width: 46px; text-align: right; }
    .gd-farben { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
    .gd-farbe { position: relative; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0; border: 2px solid rgba(255,255,255,.22); box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s, border-color .15s, transform .15s; }
    .gd-farbe::after { content: ''; position: absolute; inset: -8px; }
    .gd-farbe:hover { transform: scale(1.08); }
    .gd-farbe[aria-pressed="true"] { border-color: #14100a; box-shadow: 0 0 0 2px #e6c391; }
    .gd-farbe:focus-visible { outline: 2px solid #e6c391; outline-offset: 3px; }
    .gd-ctl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
    .gd-opt { padding: 10px 15px; border-radius: 12px; cursor: pointer; white-space: nowrap; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: rgba(243,246,251,.78); font: 800 .78rem/1.2 'Manrope', sans-serif; transition: all .2s; min-height: 44px; }
    .gd-opt:hover { border-color: rgba(192,138,87,.42); background: rgba(192,138,87,.07); color: #d3b07a; }
    .gd-opt:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }
    .gd-ctl.is-leer .gd-ctl-row, .gd-ctl.is-leer .gd-ctl-foot { opacity: .4; pointer-events: none; }

    /* Vollbild */
    .gd-fs { position: fixed; inset: 0; z-index: 6000; display: none; background: rgba(5,7,11,.96); backdrop-filter: blur(8px); padding: 24px; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
    .gd-fs-stage { position: relative; width: min(calc(82vh * 4 / 3), 92vw); aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #2b2f38, #1a1d24); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    .gd-fs-close { position: absolute; top: 20px; right: 22px; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #f3f6fb; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
    .gd-fs-tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 92vw; }
    .gd-fs-tools button { min-height: 44px; padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(243,246,251,.75); font: 800 .8rem 'Manrope', sans-serif; transition: all .18s; }
    .gd-fs-tools button[hidden] { display: none; }
    .gd-fs-tools button[aria-pressed="true"] { border-color: #d3b07a; background: rgba(211,176,122,.18); color: #e6c391; }
    .gd-fs-tools button:hover { border-color: rgba(192,138,87,.5); color: #d3b07a; }
    .gk-pb-titel { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(211,176,122,.8); font-weight: 800; margin: 0 0 10px; }
    .gk-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; }
    .gk-liste li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .88rem; color: rgba(243,246,251,.7); }
    .gk-liste li:last-child { border-bottom: 0; }
    .gk-liste strong { color: rgba(243,246,251,.92); font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
    .gk-gesamt { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(211,176,122,.14), rgba(192,138,87,.05)); border: 1px solid rgba(211,176,122,.3); }
    .gk-gesamt > div > span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,246,251,.7); font-weight: 800; margin-bottom: 6px; }
    #preisAnzeige { display: block; font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 900; line-height: 1; color: #e6c391; letter-spacing: -.02em; }
    .gk-gesamt small { font-size: .78rem; line-height: 1.5; color: rgba(243,246,251,.72); text-align: right; }
    .gk-cta { display: flex; width: 100%; margin-top: 16px; }
    .gk-meldung { min-height: 1.3em; margin-top: 10px; text-align: center; font-weight: 700; font-size: .88rem; color: #e6c391; }

    /* Kompakte Leiste (Desktop: schwebende Karte unten mittig, Handy: volle Breite am unteren Rand) */
    .gk-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 12px; margin: 0 auto; width: min(720px, calc(100% - 32px)); box-sizing: border-box; z-index: 990; padding: 10px 14px 10px 18px; border-radius: 16px; border: 1px solid rgba(211,176,122,.3); background: rgba(11,13,18,.97); box-shadow: 0 10px 28px rgba(0,0,0,.45); transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
    .gk-leiste.zeigen { transform: none; visibility: visible; transition: transform .25s ease; }
    .gk-leiste-summe { display: block; min-width: 0; line-height: 1.15; }
    .gk-leiste-summe span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,246,251,.7); }
    .gk-leiste-summe strong { font-size: 1.25rem; font-weight: 900; color: #e6c391; white-space: nowrap; }
    .gk-leiste-versand { display: block; margin-top: 2px; font-size: .7rem; line-height: 1.2; color: rgba(243,246,251,.7); }
    .gk-leiste-knopf { flex: none; width: auto; white-space: nowrap; }
    /* Mittlere Breiten: der WhatsApp-Knopf sitzt rechts unten, die Leiste rückt nach links */
    @media (min-width: 861px) and (max-width: 1280px) { .gk-leiste { margin-left: 16px; margin-right: auto; width: min(720px, calc(100% - 280px)); } }
    :where(.gk-prod, .gk-verf, .gk-ausf-opt, .gk-datei-knopf, .gk-menge button, .gk-cta, .gk-leiste-knopf):focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }

    @media (min-width: 861px) {
      /* Die Live-Vorschau steht rechts und bleibt beim Konfigurieren immer sichtbar
         (wie bei den Hundehalsbändern). Die Zusammenfassung mit dem Warenkorb-Knopf
         rückt links unter die Schritte, damit die Vorschau allein in der Spalte steht. */
      .gk-seite { display: contents; }
      .gk-panel { grid-column: 1; grid-row: 1; }
      #gkSumme, #markeSumme { grid-column: 1; grid-row: 2; }
      #vorschauKarte, #markeKarte { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 100px; z-index: 2; }
      /* Kein eigener Scrollbereich: Der ein-/ausblendende Balken hat die Breite ständig
         verändert und die Vorschau zum Flackern gebracht. Ist die Karte höher als das
         Fenster, setzt gravur-druck.js „top“ so, dass sie bis zu ihrer Unterkante mitscrollt. */
      .gk-seite .gk-karte { box-shadow: 0 10px 26px rgba(0,0,0,.32); }
    }
    @media (max-width: 860px) {
      .gk-grid { grid-template-columns: 1fr; gap: 18px; }
      .gk-panel { padding: 20px 16px 22px; }
      .gk-karte { padding: 16px; }
      /* Schrittnummer klein über der Überschrift, Inhalte in voller Breite */
      .gk-schritt { padding-left: 0; }
      .gk-schritt::before, .gk-schritt:first-of-type::before { position: static; display: block; width: fit-content; margin: 0 0 8px; padding: 4px 8px; }
      /* Vorschau-Bühne sitzt in Schritt 3 und nutzt die volle Breite des Panels */
      .gk-schritt > .gk-vorschau { margin: 4px 0 22px; padding: 14px; }
      .gk-leiste { margin: 0; width: auto; bottom: 0; padding: 10px 84px calc(10px + env(safe-area-inset-bottom, 0px)) 16px; border-radius: 0; border-width: 1px 0 0; box-shadow: 0 -10px 28px rgba(0,0,0,.45); transform: translateY(110%); }
      .gk-leiste.zeigen { transform: none; }
    }
    @media (max-width: 600px) {
      .gk-verfahren { grid-template-columns: 1fr; }
      .gk-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .gk-prod { grid-column: span 1; }
      .gk-gesamt { flex-direction: column; align-items: flex-start; }
      .gk-gesamt small { text-align: left; }
    }
    /* Handy: Regler groß und mit −/+ Knöpfen, Beschriftung über dem Regler, nichts unter der Kaufleiste versteckt */
    .gd-step { display: none; }
    @media (max-width: 860px) {
      main { padding-bottom: 96px; }
      .gd-ctl { gap: 14px; }
      .gd-ctl-hint { font-size: .84rem; line-height: 1.55; color: rgba(243,246,251,.72); }
      .gd-ctl-row.gd-regler { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; grid-template-areas: "name name wert" "minus slider plus"; align-items: center; gap: 8px 10px; }
      .gd-ctl-row.gd-regler > label { grid-area: name; font-size: .84rem; color: rgba(243,246,251,.78); min-width: 0; }
      .gd-ctl-row.gd-regler > .gd-ctl-wert { grid-area: wert; font-size: .95rem; white-space: nowrap; justify-self: end; }
      .gd-ctl-row.gd-regler > input[type=range] { grid-area: slider; height: 44px; background: linear-gradient(90deg, rgba(192,138,87,.75), rgba(255,255,255,.16)) no-repeat center / 100% 6px; border-radius: 0; }
      .gd-ctl-row.gd-regler > input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; border-width: 4px; }
      .gd-ctl-row.gd-regler > input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-width: 4px; }
      .gd-step { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #f3f6fb; font: 800 1.35rem/1 'Manrope', sans-serif; cursor: pointer; padding: 0; touch-action: manipulation; }
      .gd-step:active { background: rgba(192,138,87,.22); border-color: rgba(192,138,87,.6); }
      .gd-step.links { grid-area: minus; } .gd-step.rechts { grid-area: plus; }
      .gd-360-nav input[type=range] { height: 44px; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, rgba(192,138,87,.75), rgba(255,255,255,.16)) no-repeat center / 100% 6px; }
      .gd-360-nav input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #d3b07a; border: 4px solid #12161f; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
      .gd-360-nav input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #d3b07a; border: 4px solid #12161f; }
      .gd-360-pfeil { width: 48px; height: 48px; }
      .gd-opt { min-height: 46px; font-size: .86rem; }
      .gd-ctl-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .gd-ctl-foot .gd-opt { width: 100%; }
      .gd-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
      .gd-ctl-row.gd-ctl-art { flex-wrap: wrap; }
    }
    @media (prefers-reduced-motion: reduce) {
      .gk-prod, .gk-verf, .gk-cta, .gk-leiste { transition: none; }
    }


    /* ══ Gravur & Druck – Kundenbereich (Hero, Auswahl, Vergleich, Materialien, Anfrage) ══
       Stile aus den früheren Seiten Lasergravur und UV-Druck übernommen. */
    .lg-heroband { position: relative; width: 100%; height: clamp(160px, 30vw, 500px); overflow: hidden; background: #0a0e17; }
    .lg-heroband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
    .lg-heroband::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,11,18,.26) 0%, rgba(8,11,18,.04) 30%, rgba(8,11,18,.42) 84%, rgba(8,11,18,.94) 100%); }
    .subpage-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
    .subpage-text { justify-content: center; }
    .page-card { padding: 28px; }
    .page-card h2 { margin-top: 0; margin-bottom: 14px; }
    .page-list { margin: 0; padding-left: 20px; }
    .page-list li { margin-bottom: 10px; line-height: 1.7; color: rgba(243,246,251,.9); }
    .page-actions { max-width: 620px; }
    @media (max-width: 1100px) { .subpage-hero { grid-template-columns: 1fr; } }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
    .gd-einstiege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; max-width: 920px; }
    .gd-einstieg { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 20px 22px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(14,19,30,.94), rgba(10,14,23,.92)); box-shadow: 0 14px 30px rgba(0,0,0,.34); color: #f3f6fb; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .gd-einstieg:hover { transform: translateY(-3px); border-color: rgba(211,176,122,.6); box-shadow: 0 18px 38px rgba(0,0,0,.44); }
    .gd-einstieg:focus-visible { outline: 2px solid #e6c391; outline-offset: 3px; }
    .gd-einstieg-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #d3b07a; border: 1.5px solid rgba(211,176,122,.5); background: rgba(211,176,122,.1); }
    .gd-einstieg-icon svg { width: 22px; height: 22px; display: block; }
    .gd-einstieg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .gd-einstieg-text strong { font-size: 1.08rem; line-height: 1.25; font-weight: 800; color: #f3f6fb; }
    .gd-einstieg-text span { font-size: .88rem; line-height: 1.5; color: rgba(243,246,251,.78); }
    .gd-einstieg-pfeil { flex: none; font-size: 1.4rem; font-weight: 800; color: #d3b07a; transition: transform .25s ease; }
    .gd-einstieg:hover .gd-einstieg-pfeil { transform: translateX(4px); }
    @media (max-width: 700px) { .gd-einstiege { grid-template-columns: 1fr; gap: 12px; } .gd-einstieg { padding: 16px 16px; gap: 12px; } }

    .gd-intro { max-width: 64ch; margin: 0 0 24px; }
    .gd-intro p { margin: 8px 0 0; font-size: .95rem; line-height: 1.7; color: rgba(243,246,251,.7); max-width: 62ch; }

    /* Auswahl A / B */
    .gd-wahl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .gd-wahl { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(14,19,30,.94), rgba(10,14,23,.92)); box-shadow: 0 14px 30px rgba(0,0,0,.34); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .gd-wahl:hover { transform: translateY(-3px); border-color: rgba(192,138,87,.5); box-shadow: 0 18px 38px rgba(0,0,0,.44); }
    .gd-wahl-nr { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #d3b07a; border: 1.5px solid rgba(211,176,122,.5); background: rgba(211,176,122,.1); }
    .gd-wahl h3 { margin: 0; font-size: 1.15rem; color: #f3f6fb; }
    .gd-wahl p { margin: 0; font-size: .92rem; line-height: 1.7; color: rgba(243,246,251,.72); }
    .gd-wahl-link { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: .9rem; color: #d3b07a; }

    /* Vergleich Laser / Tiefengravur / UV: Bildstreifen und drei Karten mit gleich hohen Zeilen (subgrid) */
    .gd-streifen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 18px; }
    .gd-streifen figure { position: relative; margin: 0; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: #0a0e17; }
    .gd-streifen img { width: 100%; height: 180px; object-fit: cover; display: block; }
    .gd-streifen figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: #f3f6fb; background: rgba(8,11,18,.8); border: 1px solid rgba(255,255,255,.16); }
    .gd-vergleich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(5, auto); column-gap: 18px; row-gap: 0; }
    .gd-verf { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(14,19,30,.94), rgba(10,14,23,.92)); box-shadow: 0 14px 30px rgba(0,0,0,.34); padding: 20px 22px 8px; }
    .gd-verf h3 { margin: 0 0 8px; font-size: 1.2rem; color: #f3f6fb; }
    .gd-verf dl { display: grid; grid-row: span 5; grid-template-rows: subgrid; margin: 0; }
    .gd-verf dl > div { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); min-width: 0; }
    .gd-verf dt { margin: 0 0 3px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(211,176,122,.9); }
    .gd-verf dd { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(243,246,251,.88); }
    .gd-hilfe { margin-top: 18px; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(211,176,122,.4); background: rgba(211,176,122,.08); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
    .gd-hilfe p { margin: 0; font-weight: 700; line-height: 1.5; color: #f3f6fb; }
    .gd-hilfe a { font-weight: 800; color: #d3b07a; text-decoration: underline; white-space: nowrap; }

    /* Materialien (Karten wie auf den früheren Seiten) */
    .mat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .mat-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(14,19,30,.94), rgba(10,14,23,.92)); box-shadow: 0 14px 30px rgba(0,0,0,.34); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .mat-card:hover { transform: translateY(-4px); border-color: rgba(192,138,87,.45); box-shadow: 0 18px 38px rgba(0,0,0,.44); }
    .mat-card-bild { position: relative; aspect-ratio: 16/7; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(192,138,87,.14), transparent 70%), #0d1119; }
    .mat-card-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
    .mat-card:hover .mat-card-bild img { transform: scale(1.05); }
    .mat-card-bild::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(8,11,18,.7) 100%); }
    .mat-card-bild.is-zeichnung { display: grid; place-items: center; }
    .mat-card-bild.is-zeichnung svg { width: auto; height: 82%; opacity: .85; }
    .mat-card-text { padding: 12px 14px 14px; }
    .mat-card-text h3 { margin: 0 0 6px; font-size: 1rem; color: #f3f6fb; }
    .mat-card-text p { margin: 0; font-size: .84rem; line-height: 1.55; color: rgba(243,246,251,.7); }
    .gd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
    .gd-badge { padding: 3px 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; border: 1px solid rgba(211,176,122,.6); background: rgba(211,176,122,.16); color: #ecd2a8; }
    .gd-badge.uv { border-color: rgba(159,178,201,.6); background: rgba(159,178,201,.16); color: #cfdcee; }
    .gd-badge.bedingt { border-style: dashed; background: transparent; }
    .gd-legende { margin: 16px 0 0; font-size: .85rem; line-height: 1.6; color: rgba(243,246,251,.72); max-width: 70ch; }
        .gd-intro p.gd-kombi { max-width: 70ch; margin: 16px 0 0; padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); border-left: 3px solid #c08a57; background: linear-gradient(180deg, rgba(14,19,30,.94), rgba(10,14,23,.92)); line-height: 1.7; color: rgba(243,246,251,.8); }
    .gd-kombi strong { color: #f3f6fb; }

    /* Anfrage-Formular */
    .category-form-wrapper { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
    .category-form-card { padding: 28px; }
    .category-form-card h2, .category-form-card h3 { margin-top: 0; }
    .contact-form { display: flex; flex-direction: column; gap: 16px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-field { display: flex; flex-direction: column; gap: 8px; }
    .form-field label { font-weight: 700; }
    .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,11,18,.72); color: #f3f6fb; font: inherit; box-sizing: border-box; }
    .form-field textarea { min-height: 160px; resize: vertical; }
    .form-helper { margin: 0; opacity: .8; font-size: .9rem; }
    .form-status { margin: 0; min-height: 1.4em; font-weight: 700; }
    .form-status.is-success { color: #9ee3a0; }
    .form-status.is-error { color: #ff9a9a; }
    .contact-side-card .mini-box { margin-top: 14px; }
    @media (max-width: 1100px) { .category-form-wrapper, .form-grid { grid-template-columns: 1fr; } }
    @media (max-width: 820px) {
      .gd-wahl-grid { grid-template-columns: 1fr; }
      .gd-vergleich { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 14px; }
      .gd-verf { grid-row: auto; grid-template-rows: none; }
      .gd-verf dl { grid-row: auto; grid-template-rows: none; }
      .gd-streifen { gap: 10px; }
      .gd-streifen img { height: 120px; }
      .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .mat-card-text { padding: 10px 12px 12px; }
      .mat-card-text p { font-size: .82rem; }
    }
    @media (max-width: 1100px) and (min-width: 821px) { .mat-grid { gap: 10px; } }
    /* Mobil: Formular-Karte schmaler, damit lange Auswahltexte
       ("Noch unklar – bitte empfehlen") im Dropdown vollständig sichtbar bleiben. */
    @media (max-width: 520px) {
      .category-form-card { padding: 20px 14px; }
      .category-form-card .form-field select { padding-left: 12px !important; padding-right: 32px !important; background-position: right 12px center !important; }
    }

    /* Einheitlich mit Hundehalsband/Maßgürtel: „Live-Vorschau“ als Pille, Anfrage mit Eyebrow + Playfair-Titel */
    .gd-prev-head h3.eyebrow { margin: 0; padding: 8px 14px; font: 800 .82rem/1.2 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; }
    .category-form-card > .eyebrow { margin: 0 0 12px; }


/* Sichtbarer Tastaturfokus (Paket 9.9) */
#verschlussSelect:focus-visible, #mengeMinus:focus-visible, #gdSize:focus-visible, #swSize:focus-visible, .sw-i:focus-visible, #anmerkung:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }