/* ════════════════════════════════════════════════════════════
   onlytap – Karten-Generator
   ════════════════════════════════════════════════════════════ */
.kf-head { max-width: 1280px; margin: 0 auto; padding: clamp(24px,4vw,40px) 24px 6px; }
.kf-head .eyebrow { color: var(--blue); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.kf-head h1 { font-size: clamp(26px,4vw,40px); font-weight: 800; letter-spacing: -.03em; margin: 4px 0 6px; }
.kf-head p { color: var(--ink-soft); font-size: 15.5px; max-width: 560px; }

.kf { max-width: 1240px; margin: 0 auto; padding: 20px 24px 80px; display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }

/* ── Bühne (zentrierte Spalte: Tabs · Karte · Hinweis) ── */
.kf-stagewrap { position: sticky; top: 88px; text-align: center; }
.kf-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kf-topbar .kf-tabs { margin-bottom: 0; }
.kf-hist { display: flex; gap: 6px; }
.kf-hist button { width: 42px; height: 42px; border: 1.5px solid var(--tile-border); border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.kf-hist button svg { width: 18px; height: 18px; }
.kf-hist button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.kf-hist button:disabled { opacity: .35; cursor: default; }
.kf-tabs { display: inline-flex; background: var(--tile); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 18px; }
.kf-tabs button { border: none; background: none; padding: 9px 20px; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.kf-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(0,0,0,.08); }

.kf-stage {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  aspect-ratio: 85/54; border-radius: clamp(12px,1.6vw,18px);
  overflow: hidden; background: #fff;
  border: 1px solid var(--tile-border);
  box-shadow: var(--shadow-lg);
  user-select: none; touch-action: none;
  container-type: inline-size;
  text-align: left; /* Bühneninhalt nicht vom zentrierten Wrapper erben */
}
.kf-underhint { margin-top: 12px; font-size: 12.5px; color: var(--ink-muted); }
/* Echtzeit-Druckcheck: Warnung wenn Inhalt über den Sicherheitsabstand ragt */
.kf-warn { margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; text-align: left;
  background: #fdf0ee; color: #b8402f; border: 1.5px solid #f3cfc8; border-radius: 12px;
  padding: 10px 15px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.kf-warn[hidden] { display: none; }   /* sonst gewinnt display:inline-flex gegen das hidden-Attribut */
.kf-warn svg { width: 18px; height: 18px; flex: none; }
.kf-el.kf-oob { outline: 2px dashed rgba(224,58,45,.9); outline-offset: 2px; }

/* Vorlagen-Galerie */
.kf-tplgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.kf-tpl { cursor: pointer; }
.kf-tpl .tpl-card {
  aspect-ratio: 85/54; border-radius: 7px; position: relative; overflow: hidden;
  border: 1px solid var(--tile-border); container-type: inline-size;
  box-shadow: 0 3px 10px rgba(19,15,29,.1);
  transition: transform .15s, box-shadow .15s;
}
.kf-tpl:hover .tpl-card { transform: scale(1.05); box-shadow: 0 6px 16px rgba(19,15,29,.18); }
.kf-tpl .tpl-name { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-align: center; margin-top: 6px; }

/* Segment (Farbe | Bild) */
.kf-seg { display: inline-flex; background: var(--tile); border-radius: 11px; padding: 4px; gap: 4px; }
.kf-seg button { border: none; background: none; padding: 8px 16px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.kf-seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* Ebenen: Hintergrundbild → Overlay → Logo/Text → NFC (DOM-Reihenfolge) */
.kf-bgimg { position: absolute; transform: translate(-50%,-50%); transform-origin: center; will-change: transform; }
.kf-bgimg img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.kf-overlay { position: absolute; inset: 0; pointer-events: none; }
.kf-img { position: absolute; transform: translate(-50%,-50%); transform-origin: center; will-change: transform; }
.kf-img img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.kf-text { position: absolute; transform: translate(-50%,-50%); white-space: pre; line-height: 1.15; padding: 2px 4px; }
/* QR-Code: feste Position, bündig rechts + unten an der Sicherheitslinie */
.kf-qr { position: absolute; right: 7.059%; bottom: 11.111%; width: 18%; pointer-events: none; }
.kf-qr svg { width: 100%; height: auto; display: block; }
.kf-el { cursor: grab; }
.kf-el.dragging { cursor: grabbing; }
.kf-el.editing { cursor: text; }
.kf-tx[contenteditable] { outline: none; caret-color: var(--blue); }
/* Bestätigungs-Dialog */
.kf-confirm-ov { position: fixed; inset: 0; background: rgba(19,15,29,.45); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; }
.kf-confirm-ov.open { display: flex; }
.kf-confirm { background: #fff; border-radius: 18px; padding: 26px 24px; max-width: 400px; width: 100%; box-shadow: 0 24px 70px rgba(19,15,29,.3); }
.kf-confirm h4 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.kf-confirm p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; }
.kf-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }

/* Entwürfe */
.kf-draftlist { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.kf-draft { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--tile-border); border-radius: 13px; padding: 9px 11px; }
.kf-draft-card { width: 72px; aspect-ratio: 85/54; border-radius: 6px; position: relative; overflow: hidden; container-type: inline-size; flex: none; border: 1px solid var(--tile-border); }
.kf-draft-card > div { pointer-events: none; }
.kf-draft-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kf-draft-meta b { font-size: 14px; font-weight: 800; }
.kf-draft-meta span { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.kf-draft-acts { display: flex; gap: 6px; }
.kf-draft-acts .kf-btn { height: 36px; padding: 0 12px; font-size: 13px; }
.kf-draft-empty { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }

/* Magnetische Ausrichtung: Führungslinien beim Snap */
.kf-guide-v, .kf-guide-h { position: absolute; display: none; pointer-events: none; z-index: 60; }
.kf-guide-v { top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--blue); box-shadow: 0 0 0 .5px rgba(255,255,255,.65); }
.kf-guide-h { left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--blue); box-shadow: 0 0 0 .5px rgba(255,255,255,.65); }
/* Handle-Box: liegt über der Karte (Kind von .kf-stagewrap, nicht geclippt),
   zeichnet die Selektion auf der SICHTBAREN Fläche des Elements */
#kfHbox {
  position: absolute; z-index: 20; pointer-events: none;
  border: 2px dashed rgba(255,255,255,.95);
  box-shadow: 0 0 0 2px rgba(35,93,160,.55), inset 0 0 0 1px rgba(35,93,160,.35);
  border-radius: 4px;
}
#kfHbox .kf-h, #kfHbox .kf-roth, #kfHbox .kf-hx { pointer-events: auto; }
.kf-h {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--blue);
  box-shadow: 0 1px 4px rgba(19,15,29,.35);
  touch-action: none;
}
.kf-h[data-h="nw"] { left: -9px; top: -9px; cursor: nwse-resize; }
.kf-h[data-h="ne"] { right: -9px; top: -9px; cursor: nesw-resize; }
.kf-h[data-h="sw"] { left: -9px; bottom: -9px; cursor: nesw-resize; }
.kf-h[data-h="se"] { right: -9px; bottom: -9px; cursor: nwse-resize; }
.kf-roth {
  position: absolute; left: 50%; top: -38px; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(19,15,29,.35);
  cursor: grab; touch-action: none;
}
.kf-roth::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 2px; height: 16px; background: rgba(35,93,160,.7); }
.kf-hx {
  position: absolute; right: -12px; top: -40px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #e0563f; color: #fff; border: 2px solid #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  box-shadow: 0 1px 4px rgba(19,15,29,.35);
  cursor: pointer; touch-action: none; user-select: none;
}
.kf-hx:hover { background: #c0392b; }
/* NFC-Icon: innerhalb des Sicherheitsabstands */
.kf-nfc { position: absolute; top: 13%; right: 8.5%; width: 5.5%; pointer-events: none; }
.kf-nfc svg { width: 100%; height: auto; display: block; }
/* Sicherheitsabstand 0,6 cm rundum (Karte 85 × 54 mm) – nur im Editor sichtbar */
.kf-safe {
  position: absolute; left: 7.059%; right: 7.059%; top: 11.111%; bottom: 11.111%;
  border: 1.5px dashed rgba(224, 58, 45, .8); border-radius: 6px;
  pointer-events: none; z-index: 6;
}
.kf-emptyhint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-muted); font-size: 14px; font-weight: 600; text-align: center; padding: 24px; pointer-events: none; }
.kf-stage.dark .kf-emptyhint { color: rgba(255,255,255,.6); }

/* ── Panel ── */
.kf-panel { display: flex; flex-direction: column; gap: 14px; }
.kf-card2 { background: #fff; border: 1px solid var(--tile-border); border-radius: 16px; padding: 20px; }
.kf-card2 h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); margin-bottom: 14px; }
.kf-row { margin-bottom: 14px; }
.kf-row:last-child { margin-bottom: 0; }
.kf-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; }
.kf-input, .kf-select { width: 100%; height: 44px; padding: 0 13px; border: 1.5px solid var(--tile-border); border-radius: 11px; font-family: inherit; font-size: 14.5px; color: var(--ink); background: #fff; }
.kf-input:focus, .kf-select:focus { outline: none; border-color: var(--blue); }
textarea.kf-input { height: auto; min-height: 60px; padding: 10px 13px; line-height: 1.5; resize: vertical; }

.kf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 10px; font-family: inherit; font-weight: 800; font-size: 14.5px; border: none; cursor: pointer; transition: all .18s; }
.kf-btn.primary { background: var(--blue); color: #fff; }
.kf-btn.primary:hover { background: var(--blue-dark); }
.kf-btn.dark { background: var(--ink); color: #fff; }
.kf-btn.dark:hover { background: #2a2638; }
.kf-btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--tile-border); }
.kf-btn.ghost:hover { border-color: var(--blue); color: var(--blue); }
.kf-btn.block { width: 100%; }
.kf-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.kf-btn:disabled { opacity: .45; pointer-events: none; }

/* Upload-Feld: Block, Inhalt gestapelt & zentriert */
.kf-upload {
  display: block; width: 100%;
  border: 1.5px dashed #d4d4dc; border-radius: 12px;
  padding: 18px 14px; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.kf-upload:hover { border-color: var(--blue); background: var(--blue-light); }
.kf-upload svg { display: block; width: 24px; height: 24px; color: var(--blue); margin: 0 auto 8px; }
.kf-upload p { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.kf-upload span { display: block; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }

/* Slider */
.kf-slider { display: flex; align-items: center; gap: 10px; }
.kf-slider input[type=range] { flex: 1; accent-color: var(--blue); min-width: 0; }
.kf-slider .val { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* Toggle */
.kf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 14px; }
.kf-switch input { display: none; }
.kf-switch .track { width: 44px; height: 26px; border-radius: 50px; background: #d6d6dd; position: relative; transition: background .2s; flex-shrink: 0; }
.kf-switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.kf-switch input:checked + .track { background: var(--blue); }
.kf-switch input:checked + .track::after { transform: translateX(18px); }

/* Farben: Picker + Swatches einheitlich 36px, aktive markiert */
.kf-colors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kf-colors input[type=color] { width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--tile-border); border-radius: 10px; background: none; cursor: pointer; }
.kf-swatch { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(0,0,0,.1); transition: transform .12s; }
.kf-swatch:hover { transform: scale(1.07); }
.kf-swatch.active { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Selektion-Box */
.kf-selbox[hidden] { display: none; }
.kf-stylebtns { display: flex; gap: 8px; }
.kf-stylebtns .kf-btn { flex: 1; height: 42px; font-size: 13px; padding: 0 10px; }

/* ── Mockup-Modal ── */
.kf-ov { position: fixed; inset: 0; z-index: 200; background: rgba(19,15,29,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.kf-ov.open { opacity: 1; pointer-events: auto; }
.kf-modal { position: fixed; left: 50%; top: 50%; width: min(90vw, 660px); max-height: 88vh; z-index: 201; background: #f4f5f7; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.98); transition: opacity .25s, transform .25s; }
.kf-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
.kf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: #fff; border-bottom: 1px solid var(--tile-border); flex-shrink: 0; }
.kf-modal-head h3 { font-size: 16px; font-weight: 800; }
.kf-modal-head-acts { display: flex; align-items: center; gap: 10px; }
.kf-modal-head-acts .kf-btn { height: 40px; padding: 0 16px; font-size: 14px; }
.kf-modal-head-acts .kf-btn svg { width: 16px; height: 16px; }
.kf-modal-close { width: 36px; height: 36px; border-radius: 50%; background: var(--tile); color: var(--ink); font-size: 19px; display: grid; place-items: center; border: none; cursor: pointer; }
.kf-modal-close:hover { background: var(--tile-border); }
/* Scene scrollt; Inner mit margin:auto → zentriert OHNE Overflow-Clipping oben */
.kf-scene { flex: 1; overflow: auto; display: flex; background: radial-gradient(120% 120% at 50% 0%, #ffffff, #f2f3f6); }
.kf-flipwrap { margin: auto; padding: clamp(22px,2.5vw,36px); display: flex; flex-direction: column; align-items: center; gap: clamp(20px,2.4vw,28px); perspective: 1800px; }
/* 3D-Flip-Karte: Vorder- und Rückseite auf einem Objekt, Klick dreht */
.kf-flip {
  width: clamp(280px, 44vw, 430px); aspect-ratio: 85/54;
  position: relative; transform-style: preserve-3d; cursor: pointer;
  transform: rotateY(-13deg) rotateX(6deg);
  transition: transform .7s cubic-bezier(.34,1.2,.4,1);
  /* KEIN filter/opacity/overflow hier – würde preserve-3d flach machen und Backface-Culling brechen */
}
.kf-flip.flipped { transform: rotateY(167deg) rotateX(6deg); }
/* Face = reine 3D-Ebene (nur backface-visibility, KEIN overflow/radius/containment –
   sonst wird das Backface-Culling in WebKit/Blink ignoriert) */
.kf-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.kf-flip-face.back { transform: rotateY(180deg); }
.kf-flip-face .mk-card {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(19,15,29,.08); container-type: inline-size;
  box-shadow: 0 16px 30px rgba(19,15,29,.16), 0 4px 10px rgba(19,15,29,.10);
}
.kf-flip-face .mk-card::after { content: ''; position: absolute; inset: 0; z-index: 9; background: linear-gradient(120deg, rgba(255,255,255,.26), transparent 42%); pointer-events: none; }
.kf-flip-ctrl { display: flex; align-items: center; gap: 16px; }
.kf-flip-ctrl .mk-label { font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); min-width: 92px; text-align: right; }
.kf-flip-ctrl .kf-btn { height: 36px; padding: 0 15px; font-size: 13px; background: transparent; border: 1.5px solid var(--tile-border); color: var(--ink-soft); box-shadow: none; }
.kf-flip-ctrl .kf-btn:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
.kf-flip-ctrl .kf-btn svg { width: 15px; height: 15px; }
/* Wasserzeichen: echtes onlytap-Logo, gekachelt & gedreht, neutral grau (hell & dunkel sichtbar) */
.kf-wm {
  position: absolute; inset: -35%; pointer-events: none; z-index: 8;
  transform: rotate(-18deg);
  background: rgba(127,127,127,.11);
  -webkit-mask-image: url('/assets/onlytap-wm-tile.svg');
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 200px;
  mask-image: url('/assets/onlytap-wm-tile.svg');
  mask-repeat: repeat;
  mask-size: 200px;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .kf { grid-template-columns: 1fr; gap: 24px; }
  .kf-stagewrap { position: relative; top: auto; }
}
@media (max-width: 560px) {
  .kf { padding: 8px 0 64px; }
  .kf-editbar { padding-left: 0; padding-right: 0; margin-bottom: 10px; }
  .kf-head { padding: 36px 24px 8px; text-align: center; }
  .kf-head h1 { display: none; }
  .kf-head .eyebrow { display: inline-block; margin-bottom: 22px; }
  .kf-steps { justify-content: center; margin-top: 0; }
  .kf-card2 { padding: 16px; }
  .kf-topbar { justify-content: space-between; }
  .kf-tabs button { padding: 9px 14px; }
  .kf-mock .mk-card { width: min(86vw, 340px); }
}

/* ── Schritt-Anzeige (Stepper) ─────────────────────────────── */
.kf-steps { display:flex; gap:8px; list-style:none; margin:16px 0 0; padding:0; flex-wrap:wrap; }
.kf-steps li { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink-muted); }
.kf-steps li span { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--tile); color:var(--ink-muted); font-size:12px; font-weight:800; border:1.5px solid var(--tile-border); }
.kf-steps li:not(:last-child)::after { content:''; width:26px; height:2px; background:var(--tile-border); border-radius:2px; margin-left:2px; }
.kf-steps li.on { color:var(--ink); }
.kf-steps li.on span { background:var(--blue); color:#fff; border-color:var(--blue); }
.kf-steps li.done span { background:var(--blue-light); color:var(--blue); border-color:var(--blue-light); }

/* ── Schritt 1: Material-Auswahl ───────────────────────────── */
.kf-matbox h3 { display:flex; align-items:center; }
.kf-matgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kf-mat { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;
  background:#fff; border:1px solid transparent; border-radius:13px; cursor:pointer; text-align:left;
  font-family:inherit; transition:border-color .15s, transform .12s, box-shadow .15s; }
/* Auswahl-Kreis oben rechts */
.kf-mat-check { position:absolute; top:8px; right:8px; z-index:4; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.22); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  border:1.5px solid rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }
.kf-mat-check svg { width:13px; height:13px; color:#fff; opacity:0; transition:opacity .15s; }
.kf-mat.sel .kf-mat-check { background:var(--blue); border-color:var(--blue); }
.kf-mat.sel .kf-mat-check svg { opacity:1; }
.kf-mat:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(19,15,29,.10); }
.kf-mat-thumb { display:block; width:100%; aspect-ratio:85/54; background-size:cover; background-position:center; background-color:#ececed; }
.kf-mat-thumb.plain { background:repeating-linear-gradient(135deg,#f4f4f6,#f4f4f6 8px,#ececed 8px,#ececed 16px); }
.kf-mat-cap { display:flex; flex-direction:column; }
.kf-mat-name { padding:8px 10px 2px; font-size:13px; font-weight:800; line-height:1.2; color:var(--ink); }
.kf-mat-price { padding:0 10px 9px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.kf-mat.sel { border-color:var(--blue); }
.kf-mat.oos { opacity:.62; }
.kf-mat.oos .kf-mat-price { color:#c0392b; }
.kf-matnote { margin-top:10px; font-size:12.5px; line-height:1.5; color:#c0392b; }
.kf-matnote:empty { display:none; }

/* ── Preis über den Buttons ────────────────────────────────── */
.kf-price { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 2px 6px; border-top:1px solid var(--tile-border); margin-top:6px; }
.kf-price:empty { display:none; }
.kf-price-name { font-size:14px; font-weight:700; color:var(--ink-soft); }
.kf-price-val { font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.kf-btn.dark:disabled { background:#c9c8cf; cursor:not-allowed; }

@media (max-width:560px){ .kf-matgrid { grid-template-columns:1fr 1fr; } .kf-steps li:not(:last-child)::after { width:14px; } }

/* ── Multistep-Wizard ──────────────────────────────────────── */
.kf-step { display:none; max-width:1280px; margin:0 auto; padding:8px 24px 40px; }
.kf-step.active { display:block; }
.kf-step-head { text-align:center; margin:8px 0 26px; }
.kf-step-head h2 { font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.6px; margin:0 0 6px; color:var(--ink); }
.kf-step-head p { font-size:14.5px; color:var(--ink-muted); font-weight:600; margin:0; }

/* Material-Grid im Schritt 1: größer, mehrspaltig */
#kfStep1 .kf-matgrid { grid-template-columns:repeat(4,1fr); gap:16px; }
#kfStep1 .kf-mat-thumb { aspect-ratio:85/54; }
#kfStep1 .kf-mat-name { font-size:14px; padding:10px 12px 2px; }
#kfStep1 .kf-mat-price { font-size:13px; padding:0 12px 11px; }

/* Desktop: Name + Preis direkt auf die Karte legen (Scrim für Lesbarkeit) */
@media (min-width:701px){
  #kfStep1 .kf-mat { position:relative; background:transparent; border:none; overflow:visible; }
  #kfStep1 .kf-mat-thumb { border-radius:13px; border:1px solid var(--tile-border); box-shadow:0 4px 14px rgba(19,15,29,.10); }
  #kfStep1 .kf-mat.sel .kf-mat-thumb { outline:3px solid var(--blue); outline-offset:2px; }
  #kfStep1 .kf-mat-cap { position:absolute; left:0; right:0; bottom:0; padding:22px 13px 11px; border-radius:0 0 13px 13px;
    display:flex; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:0;
    background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.20) 55%, transparent); pointer-events:none; }
  #kfStep1 .kf-mat-name { color:#fff; padding:0; font-size:14.5px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.35); }
  #kfStep1 .kf-mat-price { color:rgba(255,255,255,.92); padding:0; font-size:13px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.35); }
  #kfStep1 .kf-mat-price::before { content:"·"; margin:0 6px; opacity:.85; }
  #kfStep1 .kf-mat.oos .kf-mat-price { color:#ffb3a7; }
}

/* Schritt-Navigation */
.kf-stepnav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.kf-stepnav-end { justify-content:flex-end; }
.kf-stepnav .kf-btn { min-width:150px; }
.kf-matnote { text-align:center; }

/* Vorlagen-Auswahl (Schritt 2) */
.kf-tplpick { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; align-items:stretch; }
#kfStep2 .kf-tplgrid { display:contents; }
#kfStep2 .kf-tpl { margin:0; }
.kf-tpl-blank { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:2px dashed var(--tile-border); border-radius:14px; background:var(--tile); cursor:pointer;
  font-family:inherit; color:var(--ink); padding:18px; min-height:150px; transition:border-color .15s, background .15s; }
.kf-tpl-blank:hover { border-color:var(--blue); background:var(--blue-light); }
.kf-tpl-blank.sel { border-color:var(--blue); border-style:solid; box-shadow:0 0 0 3px var(--blue-light); }
.kf-tpl-blank-ic { width:40px; height:40px; border-radius:11px; background:#fff; color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:400; line-height:1; margin-bottom:4px; }
.kf-tpl-blank b { font-size:14.5px; }
.kf-tpl-blank-sub { font-size:12px; color:var(--ink-muted); }
#kfStep2 .kf-tpl.sel .tpl-card { outline:3px solid var(--blue); outline-offset:2px; }

/* Editor-Leiste (Schritt 3) */
.kf-editbar { max-width:1280px; margin:0 auto 14px; padding:0 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kf-editbar-mat { font-size:14px; color:var(--ink-soft); }
.kf-editbar-mat b { color:var(--ink); font-weight:800; }
.kf-btn.sm { height:38px; padding:0 14px; font-size:13.5px; min-width:0; }

/* Mobile: 3 quadratische Textur-Kacheln, Text direkt auf der Textur */
@media (max-width:700px){
  /* Materialauswahl mobil: exakt wie Vorlagen – Textur-Kachel + zentrierter Text darunter */
  #kfStep1 .kf-matgrid { grid-template-columns:1fr 1fr; gap:14px; }
  #kfStep1 .kf-mat { background:transparent; border:none; overflow:visible; align-items:stretch; }
  #kfStep1 .kf-mat:hover { transform:none; box-shadow:none; }
  #kfStep1 .kf-mat-thumb { aspect-ratio:85/54; border-radius:8px; border:1px solid var(--tile-border); box-shadow:0 3px 10px rgba(19,15,29,.1); }
  #kfStep1 .kf-mat-cap { align-items:center; text-align:center; margin-top:6px; }
  #kfStep1 .kf-mat-name { font-size:12px; font-weight:700; color:var(--ink-soft); padding:0; text-align:center; }
  #kfStep1 .kf-mat-price { font-size:12px; font-weight:700; color:var(--ink); padding:0; text-align:center; }
  #kfStep1 .kf-mat.sel { border:none; }
  #kfStep1 .kf-mat.sel .kf-mat-thumb { outline:3px solid var(--blue); outline-offset:2px; border-color:var(--blue); }
  #kfStep1 .kf-mat-check { top:6px; right:6px; }
  /* Nav-Buttons mobil: Step 1 einzeln = volle Breite, Step 2 = geteilt */
  #kfStep1 .kf-stepnav .kf-btn { width:100%; min-width:0; flex:none; }
  #kfStep2 .kf-stepnav .kf-btn { flex:1; min-width:0; }
}
@media (max-width:560px){
  .kf-tplpick { grid-template-columns:1fr 1fr; }
  .kf-stepnav .kf-btn { min-width:0; flex:1; }
  /* Stepper immer einzeilig */
  .kf-steps { flex-wrap:nowrap; gap:6px; }
  .kf-steps li { font-size:14px; gap:6px; }
  .kf-steps li span { width:21px; height:21px; font-size:12px; }
  .kf-steps li:not(:last-child)::after { width:16px; margin-left:0; }
}
@media (max-width:380px){
  .kf-steps li { font-size:13px; }
  .kf-steps li:not(:last-child)::after { width:10px; }
}

@media (max-width:600px){
  .kf-editbar { padding-left:0; padding-right:0; margin-bottom:10px; }
}

/* ── Geführter Flow (Schritt 3) – auf Mobile UND Desktop ────── */
.kf-guide { display: none; }
/* Desktop: geführter Flow rechts statt Panel (nur aktives Feld) */
#kfStep3 .kf-panel { display: none; }
#kfStep3 .kf-guide { display: flex; flex-direction: column; gap: 10px; }
.kf-guidebox { display: flex; flex-direction: column; }
.kf-guidebox-title { display: none; }
/* Desktop (echte 2 Spalten): grauer Rahmen um die Box, Höhe = Karte (per JS), Titel in der Box */
@media (min-width: 981px){
  #kfStep3 .kf-step-head { display: none; }
  #kfStep3 .kf-guidebox { border: 1px solid var(--tile-border); border-radius: 16px; background: var(--tile); padding: 16px; }
  #kfStep3 .kf-guidebox-title { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); margin: 2px 2px 3px; }
  /* Material-Label als Untertitel unter „Gestalte deine Karte" */
  #kfStep3 .kf-guidebox .kf-editbar-mat { display: block; font-size: 13px; font-weight: 600; color: var(--ink-muted); margin: 0 2px 15px; }
  /* „Zurück" links, Tabs mittig über der Karte, Undo/Redo rechts */
  #kfStep3 .kf-editbar { display: none; }
  #kfStep3 .kf-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  #kfStep3 .kf-topbar > .kf-btn { justify-self: start; }
  #kfStep3 .kf-topbar .kf-hist { justify-self: end; }
  /* Felder als einzelne weiße Boxen (wie Mobile), luftiger */
  #kfStep3 .kf-guide { gap: 12px; }
  #kfStep3 .kf-gstep { padding: 14px 15px; }
}
@media (max-width: 700px){
  #kfStep3 .kf { display: block; }
  #kfStep3 .kf-topbar { display: none; }
  #kfStep3 .kf-underhint { display: none; }
  #kfStep3 .kf-stagewrap { position: static; }
  #kfStep3 .kf-guidebox { height: auto !important; min-height: 0 !important; margin-top: 0 !important; }   /* evtl. Desktop-Inline-Stile neutralisieren */
  #kfStep3 .kf-guide { gap: 9px; margin-top: 16px; }
}
.kf-gstep { border: 1px solid var(--tile-border); border-radius: 12px; padding: 11px 13px; background: #fff; }
.kf-gstep.done { background: var(--tile); }
.kf-gstep-head { display: flex; align-items: center; gap: 9px; }
.kf-gstep-head b { font-size: 13px; font-weight: 800; }
.kf-gnum { width: 19px; height: 19px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.kf-gstep.done .kf-gnum { background: var(--blue-light); color: var(--blue); }
.kf-gedit { margin-left: auto; background: none; border: none; color: var(--blue); font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
.kf-gsummary { margin-top: 4px; padding-left: 28px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.kf-gbody { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.kf-ginput { width: 100%; height: 44px; border: 1.5px solid var(--tile-border); border-radius: 10px; padding: 0 13px; font-family: inherit; font-size: 14px; color: var(--ink); }
.kf-ginput:focus { outline: none; border-color: var(--blue); }
.kf-gwarn { display: flex; gap: 9px; align-items: flex-start; background: #fdf0ee; color: #b8402f; border: 1px solid #f3cfc8; border-radius: 9px; padding: 9px 11px; font-size: 11.5px; line-height: 1.4; text-align: left; }
.kf-gwarn b { font-weight: 800; }
.kf-gwarn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kf-gpill { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.kf-glink { background: none; border: none; color: #c0392b; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 12.5px; }
.kf-gdone { text-align: center; display: flex; flex-direction: column; gap: 11px; }
.kf-gdone-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 10px; }
.kf-gcheck { width: 22px; height: 22px; color: #1c9a5b; flex: none; }
.kf-gdone b { font-size: 16px; } .kf-gdone p { font-size: 13px; color: var(--ink-soft); margin: 0 0 3px; line-height: 1.4; }
.kf-guide .kf-btn.block { width: 100%; height: 44px; font-size: 14px; }

/* Guide: Text-Styling / NFC / QR / Rückseiten-Vorlagen */
.kf-gopts { display: flex; flex-direction: column; gap: 8px; }
.kf-gsel { width: 100%; height: 40px; border: 1.5px solid var(--tile-border); border-radius: 9px; padding: 0 12px; font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink); }
.kf-gcolors { display: flex; gap: 8px; flex-wrap: wrap; }
.kf-gsw { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 1.5px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 2px #fff; }
.kf-gsw.on { outline: 2px solid var(--blue); outline-offset: 1px; }
.kf-gsize { display: flex; align-items: center; gap: 10px; }
.kf-gsize span { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; flex: none; }
.kf-gsize input[type=range] { flex: 1; accent-color: var(--blue); }
.kf-glbl { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.kf-ghint { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; }
.kf-gcheckrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.kf-gcheckrow input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.kf-gtplgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kf-gtpl { cursor: pointer; }
.kf-gtpl .tpl-card { aspect-ratio: 85/54; border-radius: 8px; position: relative; overflow: hidden; border: 1px solid var(--tile-border); container-type: inline-size; box-shadow: 0 3px 10px rgba(19,15,29,.1); }
.kf-gtpl span { display: block; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-top: 5px; }
.kf-gtpl-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 85/54; border: 2px dashed var(--tile-border); border-radius: 8px; background: var(--tile); color: var(--ink-soft); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.kf-gtpl-blank span { font-size: 22px; line-height: 1; }

/* Guide: Color-Picker neben Swatches */
.kf-gcolorrow { display: flex; align-items: center; gap: 10px; }
.kf-gcolorrow .kf-gcolors { flex: 1; }
.kf-gcpick { width: 34px; height: 30px; padding: 0; border: 1.5px solid var(--tile-border); border-radius: 8px; background: #fff; cursor: pointer; flex: none; }
.kf-gcpick::-webkit-color-swatch-wrapper { padding: 3px; }
.kf-gcpick::-webkit-color-swatch { border: none; border-radius: 5px; }

/* Guide: Rückseiten-Vorlagen-Auswahl – Stage ausblenden, Kopf schlicht */
@media (max-width:700px){
  #kfStep3.kf-picking .kf-stagewrap { display: none; }
  #kfStep3.kf-picking .kf-underhint { display: none; }
}
.kf-gpickhead { margin-bottom: 12px; }
.kf-gpickhead b { font-size: 15px; font-weight: 800; }

/* Guide-Rückseiten-Vorlagen: gleiches Grid-Verhalten wie Schritt 2 */

/* Guide: Info-Box (Hinweis: Elemente verschiebbar) – Form wie Warnbox, blau */
.kf-ginfo { display: flex; gap: 9px; text-align: left; background: var(--blue-light); color: var(--blue-dark);
  border: 1px solid #cfe0f2; border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; font-weight: 600; }
.kf-ginfo svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

.kf-tpl-blank-txt { display: flex; flex-direction: column; gap: 2px; }

/* Guide (mobile Rückseiten-Picker): „Leer starten" als Querbutton oben, Vorlagen-Grid darunter */
#kfGuide .kf-tplpick { display: flex; flex-direction: column; gap: 14px; }
#kfGuide .kf-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
#kfGuide .kf-tpl-blank { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 0; padding: 16px 20px; }
#kfGuide .kf-tpl-blank .kf-tpl-blank-ic { margin-bottom: 0; }
#kfGuide .kf-tpl-blank-txt { align-items: flex-start; }

/* Desktop Schritt 2: „Leer starten" als gleichgroße Kachel NEBEN den Vorlagen (ein geordnetes Grid) */
#kfStep2 .kf-tplpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; align-items: start; }
#kfStep2 .kf-tplgrid { display: contents; }
#kfStep2 .kf-tpl-blank { flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: auto; aspect-ratio: 85/54; min-height: 0; padding: 12px; border-radius: 8px; }
#kfStep2 .kf-tpl-blank .kf-tpl-blank-ic { margin-bottom: 0; }
#kfStep2 .kf-tpl-blank-txt { align-items: center; text-align: center; }

/* Mobile Schritt 2: „Leer starten" als Querbutton oben, Vorlagen-Grid darunter */
@media (max-width: 700px){
  #kfStep2 .kf-tplpick { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  #kfStep2 .kf-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  #kfStep2 .kf-tpl-blank { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
    width: 100%; aspect-ratio: auto; min-height: 0; padding: 16px 20px; }
  #kfStep2 .kf-tpl-blank-txt { align-items: flex-start; text-align: left; }
}
@media (max-width: 560px){ #kfStep2 .kf-tplgrid, #kfGuide .kf-tplgrid { grid-template-columns: 1fr 1fr; } }

/* Vorschau-Modal: Foot-Button (Desktop aus) */
.kf-modal-foot { display: none; }
.kf-modal-foot .kf-btn.block { width: 100%; }
.kf-modal-foot .kf-btn + .kf-btn { margin-top: 10px; }
/* Desktop: Foot mit „Design teilen" + „In den Warenkorb"; Teilen aus dem Head raus */
@media (min-width: 701px){
  .kf-modal-head-acts #kfShare { display: none; }
  .kf-modal-foot { display: block; padding: 14px 16px; background: #fff; border-top: 1px solid var(--tile-border); }
}

/* Mobile: kleines zentriertes Popup + „Design teilen" unten full-width */
@media (max-width: 700px){
  .kf-modal { inset: auto; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.98);
    width: min(92vw, 380px); max-height: 86vh; border-radius: 14px; }
  .kf-modal.open { transform: translate(-50%,-50%); }
  .kf-modal-head { padding: 14px 16px; }
  .kf-modal-head-acts #kfShare { display: none; }
  .kf-flipwrap { padding: 22px 18px; gap: 18px; }
  .kf-modal-foot { display: block; padding: 14px; background: #fff; border-top: 1px solid var(--tile-border); }
}

/* ════════════════════════════════════════════════════════════
   Betriebsart „Backend" – der gleiche Generator als Werkzeug für
   Druckdaten. Shop-Rahmen (Header, Footer, Warenkorb) fällt weg,
   dafür kommt der Druckdaten-Kasten dazu.
   ════════════════════════════════════════════════════════════ */
.kf-druck { display: none; }
body.kf-adminmodus .site-header,
body.kf-adminmodus .announce,
body.kf-adminmodus .ft,
body.kf-adminmodus .mobile-menu,
body.kf-adminmodus #kfAddCart,
body.kf-adminmodus #kfModalCart,
body.kf-adminmodus .kf-price { display: none !important; }
body.kf-adminmodus .kf-head { padding-top: 18px; }
body.kf-adminmodus .kf-druck { display: block; }
/* Im Backend arbeiten wir mit allen Reglern statt mit dem geführten Ablauf –
   der ist für Kundinnen gedacht, die zum ersten Mal eine Karte gestalten. */
body.kf-adminmodus .kf-guidebox,
body.kf-adminmodus .kf-tipps { display: none !important; }

/* Kundenansicht mit Material aus der Bestellung: Schritt 1 entfällt.
   Die Leiste zeigt dann nur noch Vorlage und Gestalten. */
body.kf-ausbestellung .kf-nurshopadmin,
body.kf-ausbestellung #kfBackTo1 { display: none !important; }
body.kf-ausbestellung #kfSteps li[data-step="2"] span::before { content: '1'; }
body.kf-ausbestellung #kfSteps li[data-step="3"] span::before { content: '2'; }
body.kf-ausbestellung #kfSteps li[data-step="2"] span,
body.kf-ausbestellung #kfSteps li[data-step="3"] span { font-size: 0; }
body.kf-ausbestellung #kfSteps li[data-step="2"] span::before,
body.kf-ausbestellung #kfSteps li[data-step="3"] span::before { font-size: 13px; }
body.kf-adminmodus #kfStep3 .kf-panel { display: flex !important; }
body.kf-adminmodus .kf-mat-price:empty { display: none; }

.kf-druck {
  margin-top: 14px; padding: 14px; border: 1.5px solid var(--tile-border, #ececf0);
  border-radius: 14px; background: #fafafc;
}
.kf-druck h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.kf-druck-row { margin-bottom: 9px; }
.kf-druck-row label { display: block; font-size: 12px; font-weight: 700; color: #55525f; margin-bottom: 4px; }
.kf-druck-row select, .kf-druck-row input {
  width: 100%; height: 36px; border: 1.5px solid #ececf0; border-radius: 9px;
  padding: 0 11px; font-family: inherit; font-size: 13.5px; background: #fff; box-sizing: border-box;
}
.kf-druck-row select:focus, .kf-druck-row input:focus { outline: none; border-color: #235DA0; }
.kf-druck-btns { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.kf-druck-msg { margin-top: 9px; font-size: 12.5px; font-weight: 700; min-height: 17px; }
.kf-druck-msg.ok { color: #1a9a5b; }
.kf-druck-msg.err { color: #c0392b; }

/* Druckvorschau (Proof) */
.kf-proof-ov {
  position: fixed; inset: 0; z-index: 300; background: rgba(19,15,29,.62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.kf-proof {
  background: #fff; border-radius: 18px; width: min(1100px, 100%);
  max-height: 90vh; overflow: auto; padding: 18px 20px 20px;
}
.kf-proof-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kf-proof-head b { font-size: 16px; }
.kf-proof-head span { font-size: 12.5px; color: #8b8893; font-weight: 700; }
.kf-proof-head button {
  margin-left: auto; width: 30px; height: 30px; border: 1.5px solid #ececf0;
  border-radius: 9px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1;
}
.kf-proof-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kf-proof-body figure { margin: 0; }
.kf-proof-body figcaption { font-size: 12px; font-weight: 800; color: #55525f; margin-bottom: 6px; }
.kf-proof-body > figure > div { background: #f0f0f3 repeating-conic-gradient(#e6e6ea 0 25%, transparent 0 50%) 0 0/16px 16px; border-radius: 8px; overflow: hidden; }
.kf-proof-hint { margin: 14px 0 0; font-size: 12.5px; color: #8b8893; line-height: 1.5; }
@media (max-width: 760px) { .kf-proof-body { grid-template-columns: 1fr; } }

/* Design Studio ohne passende Bestellung: ruhiger Hinweis statt Editor */
.kf-sperre { max-width: 620px; margin: 0 auto; padding: 40px 20px 70px; text-align: center; }
.kf-sperre-ic {
  width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 18px;
  background: var(--tile, #f6f6f7); color: var(--ink-soft, #55525f);
  display: flex; align-items: center; justify-content: center;
}
.kf-sperre-ic svg { width: 28px; height: 28px; flex: none; }
.kf-sperre h2 { font-size: clamp(21px, 3.2vw, 28px); letter-spacing: -.5px; margin: 0 0 10px; }
.kf-sperre p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft, #55525f); margin: 0 0 26px; }
.kf-sperre-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   Designempfehlungen: Anreißer über der Vorlagenauswahl und das
   Pop-up mit den Gegenüberstellungen. Die Beispielkarten sind
   gezeichnet – Textgrößen in cqw, damit sie mit der Karte skalieren.
   ════════════════════════════════════════════════════════════ */
.kf-tipps { max-width: 1180px; margin: 0 auto 22px; padding: 14px 18px; border: 1px solid var(--tile-border, #ececf0);
  border-radius: 16px; background: var(--tile, #f6f6f7); }
.kf-tipps-kopf { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.kf-tipps-kopf b { font-size: 15px; letter-spacing: -.2px; }
.kf-tipps-sub { font-size: 13px; color: var(--ink-muted, #8b8893); font-weight: 600; }
.kf-tipps-mehr { margin-left: auto; border: none; background: var(--ink, #130F1D); color: #fff;
  height: 36px; padding: 0 16px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.kf-tipps-mehr:hover { background: #000; }

/* Pop-up: ein Vergleich je Schritt, unten Pagination */
.kf-emp-ov { position: fixed; inset: 0; z-index: 320; background: rgba(8,6,14,.72);
  display: flex; align-items: center; justify-content: center; padding: 28px; }
.kf-emp-ov[hidden] { display: none; }
.kf-emp { border-radius: 24px; width: min(1060px, 100%); height: min(640px, 92vh); max-height: 92vh;
  overflow: hidden; padding: 30px 34px 24px; display: flex; flex-direction: column;
  /* gleicher Verlauf wie die Hero-Sektion der Startseite */
  background: linear-gradient(160deg, #0c0a14 0%, #100e1c 55%, #0a0812 100%);
  color: #f4f4f5; position: relative; }
/* Lichtschein wie im Hero – als Radial-Verlauf statt weichgezeichneter Kreis.
   Ein blur() über große dunkle Flächen erzeugt sichtbare Stufen (Banding);
   Radial-Verläufe laufen glatt durch. Die feine Rauschschicht darüber bricht
   die letzten Farbstufen auf. */
.kf-emp::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background:
    radial-gradient(680px 420px at 88% -12%, rgba(35,93,160,.55), rgba(35,93,160,0) 62%),
    radial-gradient(520px 380px at 4% 108%, rgba(63,131,214,.34), rgba(63,131,214,0) 60%);
}
.kf-emp::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.kf-emp > * { position: relative; z-index: 1; }
.kf-emp-kopf { display: flex; align-items: center; gap: 18px; }
.kf-emp-eyebrow { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; color: #7fb0ec; }
.kf-emp-kopf h2 { margin: 5px 0 0; font-size: 28px; letter-spacing: -.6px; }
.kf-emp-zaehler { margin-left: auto; font-size: 13px; font-weight: 800; color: rgba(244,244,245,.55); }
.kf-emp-zu { width: 38px; height: 38px; flex: none; border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 12px; background: rgba(255,255,255,.06); color: #f4f4f5; cursor: pointer; font-size: 15px; line-height: 1; }
.kf-emp-zu:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }

.kf-emp-body { margin-top: 26px; flex: 1; min-height: 0; overflow-y: auto; }
/* Schrittwechsel: der neue Inhalt fährt aus der Blätterrichtung herein */
.kf-emp-body { will-change: transform, opacity; }
.kf-emp-body.rein-rechts { transform: translate3d(46px, 0, 0); opacity: 0; }
.kf-emp-body.rein-links  { transform: translate3d(-46px, 0, 0); opacity: 0; }
.kf-emp-body.da { transform: translate3d(0, 0, 0); opacity: 1;
  transition: transform .34s cubic-bezier(.22,.7,.3,1), opacity .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .kf-emp-body.rein-rechts, .kf-emp-body.rein-links { transform: none; opacity: 1; }
  .kf-emp-body.da { transition: none; }
}
.kf-emp-txt b { display: block; font-size: 20px; letter-spacing: -.4px; margin-bottom: 6px; }
.kf-emp-txt p { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: rgba(244,244,245,.72); max-width: 74ch;
  white-space: pre-line;              /* Zeilenumbrüche im Text übernehmen (z. B. der Tipp) */
  min-height: calc(2 * 15px * 1.65);  /* zwei Zeilen sind gesetzt, egal wie kurz der Text ist */ }
.kf-emp-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 4px 6px 10px; }
.kf-emp-seite { margin: 0; }
.kf-emp-marke { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.kf-emp-marke svg { width: 14px; height: 14px; flex: none; }
.kf-emp-seite.gut .kf-emp-marke { color: #2fbd76; }
.kf-emp-seite.schlecht .kf-emp-marke { color: #e8695c; }

.kf-emp-fuss { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12); }
.kf-emp-fuss .kf-btn:last-child { margin-left: 0; }
.kf-emp-punkte { flex: 1; display: flex; justify-content: center; gap: 9px; }
.kf-emp-punkt { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.24); cursor: pointer; transition: background .14s, transform .14s; }
.kf-emp-punkt:hover { background: rgba(255,255,255,.55); }
.kf-emp-punkt.on { background: #fff; transform: scale(1.25); }
.kf-emp-fuss .kf-btn[disabled] { opacity: .4; cursor: default; }
.kf-emp-fuss .kf-btn { height: 44px; padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
/* Knöpfe auf dunklem Grund */
.kf-emp-fuss .kf-btn.ghost { background: rgba(255,255,255,.08); color: #f4f4f5; border-color: rgba(255,255,255,.18); }
.kf-emp-fuss .kf-btn.ghost:hover:not([disabled]) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.kf-emp-fuss .kf-btn.primary { background: #fff; color: #130F1D; }
.kf-emp-fuss .kf-btn.primary:hover { background: #e9e9ee; }
@media (max-width: 760px) {
  .kf-emp-ov { padding: 14px; }
  .kf-emp { height: auto; }
  .kf-emp-paar { gap: 22px; padding: 0; }
  .kf-emp { padding: 20px 18px 18px; border-radius: 18px; }
  .kf-emp-kopf h2 { font-size: 22px; }
  .kf-emp-body { margin-top: 18px; }
  .kf-emp-paar { grid-template-columns: 1fr; gap: 18px; }
  .kf-emp-fuss .kf-btn { height: 42px; padding: 0 16px; }
}

/* Beispielkarte als Mockup: gerade ausgerichtet, mit Tiefe durch
   Schatten und einer feinen Glanzkante – ohne Neigung, damit man die
   beiden Karten wirklich vergleichen kann. */
.be-mock { display: flex; justify-content: center; }
.be-mock-karte {
  position: relative; width: 100%; max-width: 360px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.46), 0 3px 10px rgba(0,0,0,.34);
  transition: box-shadow .3s ease, transform .3s ease;
}
.be-mock-karte:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0,0,0,.55); }
.be-mock-karte img { display: block; width: 100%; height: auto; }
.be-mock-glanz {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 50%);
}
.kf-emp-seite.gut .be-mock-karte { outline: 2px solid #2fbd76; outline-offset: 3px; }
.kf-emp-seite.schlecht .be-mock-karte { outline: 2px solid #e05a4c; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .be-mock-karte, .be-mock-karte:hover { transform: none; transition: none; }
}

/* ── Aufruf aus einer Bestellung ───────────────────────────
   Material und QR-Ziel stehen fest – der Kunde sieht, an welcher
   Karte er gerade arbeitet. */
.kf-bestellhinweis {
  display: flex; flex-direction: column; gap: 3px;
  max-width: 640px; margin: 16px auto 0; padding: 12px 18px;
  border: 1.5px solid var(--blue); border-radius: 13px;
  background: var(--blue-light, #eef4fd); text-align: left;
}
.kf-bestellhinweis b { font-size: 14.5px; font-weight: 800; }
.kf-bestellhinweis span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.kf-bestellhinweis code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; background: #fff; padding: 1px 5px; border-radius: 5px;
}
/* Materialschritt entfällt komplett, wenn die Karte schon gekauft ist */
body.kf-ausbestellung-fest #kfSteps li[data-step="1"] { display: none; }

/* ── Einzelne Seite nachladen ─────────────────────────────
   Erscheint nach dem PNG-Export. Wer die Rückfrage des Browsers nach
   mehreren Dateien weggeklickt hat, bekommt so die fehlende Seite,
   ohne die Druckdaten neu erzeugen zu müssen. */
.kf-nachlade {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 12.5px; color: var(--ink-muted, #77777f);
}
.kf-nachlade-btn {
  border: 1px solid var(--line, #e4e4e8); background: #fff;
  border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 12.5px;
  color: inherit; cursor: pointer;
}
.kf-nachlade-btn:hover { border-color: currentColor; color: var(--ink, #130F1D); }