@import url('/tools/qr-code-generator/assets/css/qr-tool.css');
.generator-section{padding-top:clamp(18px,2.4vw,26px);padding-bottom:clamp(18px,2.4vw,26px)}
.generator-section .section-head.compact{margin-bottom:14px}.generator-section .section-head h2{font-size:clamp(1.45rem,2.2vw,2rem)}
.generator-grid{grid-template-columns:minmax(0,1.02fr) minmax(280px,390px);gap:16px}.generator-panel,.preview-panel{padding:clamp(14px,2vw,20px);border-radius:22px}
.field{gap:6px;margin-bottom:11px}.field span{font-size:.94rem}.field small{font-size:.82rem;line-height:1.32}.field input[type=number],select,input[type=range]{width:100%;min-height:44px;border-radius:15px;border:1px solid rgba(99,91,255,.16);background:rgba(255,255,255,.94);padding:10px 12px;font:inherit;color:var(--text-main,#1d2440)}input[type=range]{accent-color:var(--accent,#635bff);padding:0}.field-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode-card,.preset-card{margin:0 0 14px;border-radius:20px;border:1px solid rgba(99,91,255,.14);background:rgba(255,255,255,.72);padding:12px}.mode-card__head,.preset-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.mode-card__head small,.preset-card__head small{color:var(--text-soft,#69738d);font-size:.82rem}.mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mode-option{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;min-height:92px;padding:12px;border-radius:17px;border:1px solid rgba(99,91,255,.14);background:rgba(255,255,255,.88);cursor:pointer}.mode-option input{margin-top:3px;accent-color:var(--accent,#635bff)}.mode-option:has(input:checked){border-color:rgba(99,91,255,.42);background:linear-gradient(135deg,rgba(99,91,255,.14),rgba(0,180,216,.10));box-shadow:0 14px 28px rgba(99,91,255,.10)}.mode-option strong{display:block;margin-bottom:4px}.mode-option small{display:block;color:var(--text-soft,#69738d);line-height:1.35}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preset-chip{appearance:none;border:1px solid rgba(99,91,255,.14);background:rgba(255,255,255,.92);color:var(--text-main,#1d2440);border-radius:14px;min-height:42px;padding:10px 12px;cursor:pointer;font:inherit;font-weight:600;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.preset-chip:hover,.preset-chip:focus-visible{border-color:rgba(99,91,255,.38);box-shadow:0 14px 28px rgba(99,91,255,.12);transform:translateY(-1px)}.button-row--stack-mobile{flex-wrap:wrap}.button-row--stack-mobile>*{flex:1 1 220px}.privacy-note{font-size:.86rem;line-height:1.45;color:var(--text-soft,#69738d)}.image-preview-box{min-height:280px}.image-preview-empty[hidden],#preview-image[hidden]{display:none!important}.image-preview-box img{max-width:100%;max-height:360px;object-fit:contain;border-radius:18px}.preview-hint--soft{color:var(--text-soft,#69738d);font-size:.88rem}
@media(max-width:860px){.field-grid-two,.generator-grid,.mode-options,.preset-grid{grid-template-columns:1fr}}
.preset-grid--ratios{grid-template-columns:repeat(3,minmax(0,1fr))}.preset-chip.is-active{background:linear-gradient(135deg,rgba(99,91,255,.16),rgba(0,180,216,.14));border-color:rgba(99,91,255,.35)}.editor-modal[hidden]{display:none!important}.editor-modal{position:fixed;inset:0;z-index:80}.editor-modal__backdrop{position:absolute;inset:0;background:rgba(8,12,28,.68);backdrop-filter:blur(6px)}.editor-modal__dialog{position:relative;z-index:1;width:min(1100px,calc(100vw - 24px));max-height:min(92vh,960px);overflow:auto;margin:clamp(10px,3vh,24px) auto;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,247,255,.98));border-radius:28px;border:1px solid rgba(255,255,255,.76);box-shadow:0 28px 80px rgba(6,13,35,.28);padding:18px}.editor-modal__close{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(99,91,255,.14);background:rgba(255,255,255,.94);cursor:pointer;font-size:1.4rem}.editor-modal__head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding-right:46px;margin-bottom:12px}.editor-modal__sub,.editor-note{color:var(--text-soft,#69738d);line-height:1.45}.editor-modal__meta{font-weight:700;font-size:.95rem;color:var(--text-main,#1d2440);background:rgba(99,91,255,.08);border-radius:999px;padding:10px 14px}.editor-stage{position:relative;min-height:420px;border-radius:24px;background:linear-gradient(45deg,rgba(99,91,255,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(99,91,255,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(99,91,255,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(99,91,255,.04) 75%),#eef2fb;background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:hidden;display:grid;place-items:center;padding:14px}.editor-image-wrap{position:relative;max-width:100%;max-height:100%;user-select:none;touch-action:none}.editor-image-wrap img{display:block;width:100%;height:100%;object-fit:contain;border-radius:18px;box-shadow:0 16px 38px rgba(10,20,40,.16);user-select:none;-webkit-user-drag:none}.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(10,16,28,.42),0 0 0 1px rgba(0,0,0,.18);cursor:move;border-radius:14px;min-width:50px;min-height:50px;touch-action:none}.crop-box__grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.75) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.75) 1px,transparent 1px);background-size:33.333% 100%,100% 33.333%;opacity:.46;pointer-events:none}.crop-handle{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:linear-gradient(135deg,#635bff,#00b4d8);box-shadow:0 8px 18px rgba(8,20,35,.22);cursor:nwse-resize}.crop-handle--br{right:-9px;bottom:-9px}.crop-handle--tl{left:-9px;top:-9px}.editor-modal__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;flex-wrap:wrap}.editor-modal__actions{display:flex;gap:10px;flex-wrap:wrap}body.editor-open{overflow:hidden}@media(max-width:860px){.preset-grid--ratios{grid-template-columns:1fr}.editor-stage{min-height:320px}.editor-modal__head,.editor-modal__foot{flex-direction:column;align-items:stretch}.editor-modal__meta{align-self:flex-start}}


/* v2: vereinfachter Zuschneiden-Workflow */
.upload-zone--crop {
  position: relative;
  border: 2px dashed rgba(79,70,229,.28);
  border-radius: 22px;
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(79,70,229,.055), rgba(255,255,255,.72));
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 185px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  overflow: hidden;
}
.upload-zone--crop:hover,
.upload-zone--crop.is-dragover {
  border-color: var(--accent, #4f46e5);
  background: rgba(79,70,229,.09);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(79,70,229,.10);
}
.upload-zone--crop input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  inset: auto !important;
}
.upload-zone--crop .upload-zone__icon {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 8px;
}
.upload-zone--crop strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.upload-zone--crop span span {
  color: var(--muted, #647089);
  line-height: 1.45;
}
.crop-start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0;
  border-radius: 20px;
  border: 1px solid rgba(99,91,255,.14);
  background: rgba(255,255,255,.72);
  padding: 14px;
}
.crop-start-card strong { display: block; margin-bottom: 4px; }
.crop-start-card small {
  color: var(--text-soft, #69738d);
  line-height: 1.4;
}
.editor-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(210px, 1.1fr) minmax(220px, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.editor-custom-size {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.editor-control {
  display: grid;
  gap: 6px;
  border-radius: 17px;
  border: 1px solid rgba(99,91,255,.14);
  background: rgba(255,255,255,.78);
  padding: 10px 12px;
}
.editor-control span {
  font-weight: 800;
  font-size: .88rem;
}
.editor-control select,
.editor-control input {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(99,91,255,.16);
  background: rgba(255,255,255,.95);
  padding: 9px 11px;
  font: inherit;
}
.crop-handle--tr { right: -9px; top: -9px; cursor: nesw-resize; }
.crop-handle--bl { left: -9px; bottom: -9px; cursor: nesw-resize; }
.crop-handle--tl { left: -9px; top: -9px; cursor: nwse-resize; }
.crop-handle--br { right: -9px; bottom: -9px; cursor: nwse-resize; }
.crop-box { cursor: move; }
@media (max-width: 940px) {
  .editor-controls { grid-template-columns: 1fr; }
  .crop-start-card { align-items: stretch; flex-direction: column; }
}

/* Einheitliche Tool-Navigation: Startseite · Tools · Zum Shop bleibt auch mobil in einer Zeile. */
.header-card {
  flex-wrap: nowrap;
  align-items: center;
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 1.8vw, 12px);
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}
.header-actions a {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .header-card {
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }
  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  .brand img {
    height: clamp(28px, 8vw, 38px);
    max-width: 96px;
    object-fit: contain;
  }
  .header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-left: auto;
    gap: clamp(5px, 1.4vw, 8px);
  }
  .plain-link {
    font-size: clamp(.72rem, 3.15vw, .9rem);
  }
  .shop-pill {
    padding: 8px clamp(8px, 2.6vw, 12px);
    font-size: clamp(.72rem, 3.15vw, .9rem);
  }
}
@media (max-width: 380px) {
  .header-card {
    padding: 7px 8px;
    gap: 6px;
  }
  .brand img {
    height: 28px;
    max-width: 82px;
  }
  .header-actions {
    gap: 5px;
  }
  .plain-link,
  .shop-pill {
    font-size: .7rem;
  }
  .shop-pill {
    padding: 7px 8px;
  }
}