/* © 2026 eysec (Meerbusch) – RheinPrintPack. Alle Rechte vorbehalten. Kennung EYSEC-RPP-64BC921C1948 */
/* ---------- Konfigurator (eigene Datei, nur auf der Konfigurator-Seite geladen) ---------- */
.seite-kfg .fuss { display: none; }
.kfg { display: grid; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); min-height: calc(100vh - var(--kopf-hoehe)); background: var(--papier); }
/* Hoehe = sichtbarer Bereich unter der tatsaechlichen Oberkante (--kfg-oben setzt app.js; Topbar oben ist nicht sticky) – sonst ist die Fussleiste abgeschnitten */
.kfg__panel { display: flex; flex-direction: column; background: var(--weiss); border-right: 1px solid var(--linie); height: calc(100vh - var(--kfg-oben, var(--kopf-hoehe))); height: calc(100dvh - var(--kfg-oben, var(--kopf-hoehe))); position: sticky; top: var(--kopf-hoehe); }
.kfg__kopf { padding: 1.2rem var(--rand) .8rem; border-bottom: 1px solid var(--linie); }
.kfg__titel { font-size: 1.35rem; margin-bottom: .8rem; }
.kfg__schritte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; list-style: none; }
.kfg__schritt { width: 100%; border: 0; background: none; padding: .3rem 0; text-align: left; font-size: .68rem; line-height: 1.2; color: var(--text-2); cursor: pointer; border-top: 3px solid var(--linie); display: grid; gap: .2rem; }
.kfg__schritt .mono { color: var(--kraft-tief); }
.kfg__schritt.ist-aktiv { border-color: var(--tinte); color: var(--tinte); font-weight: 700; }
.kfg__schritt.ist-fertig { border-color: var(--kraft); }
.kfg__schritt:disabled { opacity: .45; cursor: default; }
.kfg__inhalt { flex: 1; overflow: auto; padding: 1.2rem var(--rand) 2rem; scroll-behavior: smooth; }
.kfg__h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.kfg__block { margin-bottom: 1.4rem; }
.kfg__block h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin-bottom: .5rem; font-family: var(--schrift-mono); font-weight: 600; }
.kfg__fuss { border-top: 1px solid var(--linie); padding: .9rem var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--papier); }
.kfg__preis { display: grid; grid-template-columns: auto auto; gap: 0 .8rem; align-items: baseline; }
.kfg__preis-label { font-size: .7rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; }
.kfg__preis-wert { font-size: 1.05rem; color: var(--tinte); }
.kfg__nav { display: flex; gap: .5rem; }
.kfg__produkte { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.kfg__produkt { width: 100%; border: 2px solid var(--linie); border-radius: var(--radius-gross); background: var(--weiss); padding: 0 0 .5rem; cursor: pointer; text-align: left; display: grid; gap: .25rem; overflow: hidden; transition: border-color var(--uebergang), transform var(--uebergang); }
.kfg__produkt:hover { border-color: var(--kraft); transform: translateY(-2px); }
.kfg__produkt.ist-aktiv { border-color: var(--tinte); }
.kfg__produkt img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kfg__produkt-name { font-family: var(--schrift-display); font-weight: 600; font-size: .84rem; padding: .3rem .5rem 0; color: var(--text); line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.kfg__produkt-info { padding: 0 .5rem; color: var(--text-2); font-size: .62rem; }
.kfg__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.kfg__chip { border: 1.5px solid var(--linie); background: var(--weiss); border-radius: var(--radius); padding: .4rem .8rem; font-size: .85rem; cursor: pointer; min-height: 40px; display: inline-flex; gap: .4rem; align-items: center; }
.kfg__chip .mono { color: var(--text-2); font-size: .7rem; }
.kfg__chip:hover { border-color: var(--kraft-tief); }
.kfg__chip.ist-aktiv { border-color: var(--tinte); background: var(--tinte); color: #fff; }
.kfg__chip.ist-aktiv .mono { color: var(--kraft); }
.kfg__chip.hat-logo::after { content: '●'; color: var(--folie); font-size: .6rem; }
.kfg__masse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.kfg__mass { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }
.kfg__mass small { color: var(--text-2); font-weight: 400; display: block; font-size: .65rem; }
.kfg__mass input { width: 100%; padding: .55rem .6rem; border: 1px solid var(--linie); border-radius: var(--radius); font-family: var(--schrift-mono); min-height: 44px; }
.kfg__mass--menge input { font-size: 1.1rem; }
.kfg__materialien { display: grid; gap: .5rem; }
.kfg__material { display: flex; gap: .7rem; align-items: center; border: 1.5px solid var(--linie); border-radius: var(--radius-gross); padding: .6rem .7rem; cursor: pointer; position: relative; }
.kfg__material input { position: absolute; opacity: 0; }
.kfg__material.ist-aktiv { border-color: var(--tinte); box-shadow: 0 0 0 1px var(--tinte); }
.kfg__material strong { display: block; font-size: .9rem; }
.kfg__material small { color: var(--text-2); font-size: .74rem; line-height: 1.35; display: block; }
.kfg__farbe { display: inline-block; width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.kfg__farbe--knopf { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0; }
.kfg__farbe--knopf.ist-aktiv { outline: 3px solid var(--folie); outline-offset: 2px; }
.kfg__farbe--mini { width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.kfg__inks { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; font-size: .85rem; }
.kfg__inks input[type=color] { width: 40px; height: 32px; border: 1px solid var(--linie); border-radius: var(--radius); padding: 2px; background: #fff; cursor: pointer; }
.kfg__drop { display: grid; gap: .2rem; border: 2px dashed var(--kraft-tief); border-radius: var(--radius-gross); padding: 1.3rem 1rem; text-align: center; cursor: pointer; background: var(--papier); transition: background var(--uebergang); }
.kfg__drop:hover, .kfg__drop.ist-drag { background: var(--kraft-hell); }
.kfg__drop strong { color: var(--tinte); }
.kfg__drop span { font-size: .85rem; color: var(--text-2); }
.kfg__drop small { font-size: .7rem; color: var(--text-2); }
.kfg__logo-vorschau { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; align-items: center; font-size: .85rem; }
.kfg__logo-bild { width: 96px; height: 96px; border-radius: var(--radius); display: grid; place-items: center; padding: 8px; border: 1px solid var(--linie); }
.kfg__logo-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kfg__check { margin-top: .7rem; font-size: .85rem; }
.kfg__dpi { margin: .6rem 0 0; font-size: .8rem; padding: .45rem .7rem; border-radius: var(--radius); background: var(--papier-dunkel); color: var(--text-2); }
.kfg__dpi.ist-ok { background: var(--gruen-hell); color: var(--ok); }
.kfg__dpi.ist-warn { background: #FBF1D6; color: #7A5A0B; }
.kfg__dpi.ist-bad { background: #FBE6E4; color: var(--fehler); }
.kfg__platz { margin-top: .8rem; display: grid; gap: .5rem; }
.kfg__regler { display: grid; gap: .2rem; font-size: .8rem; }
.kfg__regler span { display: flex; justify-content: space-between; }
.kfg__regler output { font-family: var(--schrift-mono); color: var(--text-2); }
.kfg__regler input[type=range] { width: 100%; accent-color: var(--tinte); }
.kfg__fins { display: grid; gap: .4rem; }
.kfg__fin { display: flex; gap: .6rem; align-items: center; border: 1.5px solid var(--linie); border-radius: var(--radius); padding: .5rem .7rem; font-size: .85rem; cursor: pointer; }
.kfg__fin.ist-aktiv { border-color: var(--tinte); background: var(--papier); }
.kfg__fin input { width: 18px; height: 18px; }
.kfg__fin .mono { margin-left: auto; color: var(--text-2); font-size: .68rem; white-space: nowrap; }
.kfg__aktionen { display: grid; gap: .5rem; margin-top: .8rem; }
.kfg__meldung { font-size: .85rem; margin: .6rem 0 0; min-height: 1.2em; }
.kfg__angebot { margin-top: .9rem; padding: .9rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); }
.kfg__angebot h3 { margin: 0 0 .2rem; font-family: var(--schrift-display); font-size: 1.02rem; text-transform: none; letter-spacing: -.01em; color: var(--text); }
.kfg__angebot .kfg__mass input { font-family: var(--schrift-text); }
.kfg__angebot .kfg__klein { margin: 0 0 .7rem; }
.kfg__angebot-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
.kfg__angebot .kfg__mass { margin-bottom: .5rem; }
.kfg__angebot input.ist-fehler, .kfg__angebot textarea.ist-fehler { border-color: var(--fehler); }
.kfg__angebot textarea { width: 100%; min-height: 4.5em; font: inherit; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.kfg__meldung.ist-ok { color: var(--ok); }
.kfg__meldung.ist-fehler { color: var(--fehler); }
.kfg__buehne { position: sticky; top: var(--kopf-hoehe); height: calc(100vh - var(--kfg-oben, var(--kopf-hoehe))); height: calc(100dvh - var(--kfg-oben, var(--kopf-hoehe))); }
.kfg__ansicht { position: relative; width: 100%; height: 100%; background: radial-gradient(80% 60% at 50% 60%, #FFFFFF, #E2E7E5); overflow: hidden; }
.kfg__ansicht canvas { width: 100% !important; height: 100% !important; display: block; touch-action: none; }
.kfg__flach { position: absolute; inset: 0; overflow: auto; padding: 4rem var(--rand) 5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; align-content: start; }
.kfg__flach-flaeche { margin: 0; background: #fff; padding: .6rem; border-radius: var(--radius); box-shadow: var(--schatten-klein); }
.kfg__flach-flaeche img { width: 100%; height: auto; border: 1px solid var(--linie); }
.kfg__flach-flaeche figcaption { font-size: .68rem; color: var(--text-2); margin-top: .4rem; }
.kfg__hinweis { position: absolute; left: 50%; bottom: 3.2rem; transform: translateX(-50%); color: var(--text-2); font-size: .7rem; pointer-events: none; margin: 0; }
.kfg__werkzeuge { position: absolute; top: 1rem; right: 1rem; display: flex; gap: .3rem; }
.kfg__werkzeug { border: 1px solid var(--linie); background: rgba(255,255,255,.9); border-radius: var(--radius); padding: .4rem .8rem; font-size: .78rem; cursor: pointer; min-height: 40px; }
.kfg__werkzeug.ist-aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.kfg__flaechen { position: absolute; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: .3rem; max-width: 60%; }
.kfg__flaeche { border: 1px solid var(--linie); background: rgba(255,255,255,.9); border-radius: var(--radius); padding: .35rem .7rem; font-size: .74rem; cursor: pointer; min-height: 36px; }
.kfg__flaeche[aria-selected="true"] { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.kfg__flaeche.hat-logo::after { content: ' ●'; color: var(--folie); font-size: .6rem; }
.kfg__beispiel { position: absolute; right: 1rem; bottom: .8rem; margin: 0; font-size: .62rem; color: var(--text-2); }
@media (max-width: 900px) {
  .kfg { grid-template-columns: minmax(0, 1fr); }
  .kfg__panel { min-width: 0; }
  .kfg__fuss { flex-wrap: wrap; }
  .kfg__buehne { order: -1; position: sticky; top: var(--kopf-hoehe); height: 52dvh; z-index: 5; }
  /* The product chooser must not slide underneath an interactive 3D overlay. */
  .kfg[data-step="1"] .kfg__buehne { position:relative; top:0; }
  .kfg__panel { position: static; height: auto; border-right: 0; border-top: 1px solid var(--linie); }
  .kfg__inhalt { overflow: visible; }
  .kfg__fuss { position: sticky; bottom: 0; z-index: 6; }
  .kfg__produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kfg__flaechen { max-width: calc(100% - 2rem); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; top: .6rem; left: 1rem; }
  .kfg__flaeche { white-space: nowrap; flex-shrink: 0; }
  .kfg__werkzeuge { top: auto; bottom: .6rem; right: .6rem; }
  .kfg__beispiel { display: none; }
  .kfg__hinweis { display: none; }
}

/* Anfrage-Modus (20.10.2026): Mengen-Chips, Vergleichsmengen, Preisversprechen */
.kfg__mengen { margin-top: .6rem; }
.kfg__chip--check { position: relative; }
.kfg__chip--check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kfg__chip--check:focus-within { outline: 2px solid var(--folie); outline-offset: 2px; }
.kfg__chip--check.ist-aktiv::before { content: '+'; font-family: var(--schrift-mono); }
.kfg__angebot .feld--check span { font-size: .8rem; font-weight: 400; }
#kfg-netto { font-family: var(--schrift-display); font-size: .98rem; }
.kfg__preis-wert { white-space: nowrap; }
.kfg__preis { min-width: 0; }
.kfg__mass input#kfg-name { font-family: var(--schrift-text); }

/* Fernseher-Praesentation: Statusleiste im Konfigurator (nur Backoffice) */
.kfg-tv { position: fixed; left: 50%; transform: translateX(-50%); bottom: 4.6rem; z-index: 60; display: flex; gap: 1rem; align-items: center; background: var(--nacht, #12212B); color: #fff; padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.kfg-tv a { color: #F5E8D8; font-weight: 700; }
.kfg-tv.ist-live [data-tv-status] { color: #7BE0A0; }

.kfg__werkzeug:disabled { opacity: .45; cursor: not-allowed; }
.kfg__farbzeile { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin:.8rem 0; }
.kfg__farbzeile label { display:flex; align-items:center; gap:.5rem; width:100%; }
.kfg__farbzeile input[type=color] { width:2.8rem; height:2rem; padding:0; border:1px solid var(--linie); cursor:pointer; }
.kfg__oeffnung { position:absolute; left:1rem; bottom:6rem; z-index:4; display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; max-width:calc(100% - 2rem); padding:.55rem; background:rgba(255,255,255,.94); border:1px solid var(--linie); }
.kfg__oeffnung[hidden], .kfg__schematisch[hidden] { display:none; }
.kfg__oeffnung label { display:flex; align-items:center; gap:.4rem; font-size:.8rem; }
.kfg__oeffnung input { width:7rem; accent-color:var(--blau); }
.kfg__schematisch { position:absolute; top:4.8rem; left:1rem; right:1rem; z-index:3; padding:.55rem .7rem; background:#fff2ce; color:#5b410f; font-size:.78rem; }
@media(max-width:600px) { .kfg__oeffnung { bottom:5.1rem; left:.5rem; } .kfg__oeffnung input { width:5rem; } }