/* Selfiefox Druck-Designer (druck.selfiefox.de) – Design wie qr.selfiefox.de / galerie.selfiefox.de */
:root {
  --rot: #b1322e; --rot-dunkel: #962a26; --orange: #cc4113; --blau: #00a8f4; --gruen: #16a34a; --gelb: #f59e0b;
  --text: #3c424f; --hell: #6b7280; --flaeche: #f6f7f9; --rand: #e5e7eb; --weiss: #fff;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kopf: 57px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { font-family: var(--schrift); color: var(--text); background: var(--flaeche); -webkit-font-smoothing: antialiased; line-height: 1.45; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--rot); }
[hidden] { display: none !important; }

/* Kopfzeile */
.kopf { background: #fff; border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 40; height: var(--kopf); }
.kopf .innen { max-width: 1440px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; height: 100%; }
.kopf .logo { display: flex; }
.kopf img { height: 22px; width: auto; }
.kopf .wer { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); }
.kopf .platz { flex: 1; }
.kontaktlink { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rand); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.kontaktlink:hover { background: var(--flaeche); }
@media (max-width: 640px) { .kopf .wer, .kontaktlink .lbl { display: none; } .kopf .innen { padding: 10px 12px; } }

/* Arbeitsfläche: links Steuerung, rechts Vorschau */
.arbeit { max-width: 1440px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(340px, 480px) 1fr; gap: 20px; align-items: start; }
.steuer { min-width: 0; padding-bottom: 60px; }
.vorschau { position: sticky; top: calc(var(--kopf) + 12px); height: calc(100vh - var(--kopf) - 28px); min-height: 420px; background: #e9ebef; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.vorschau-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13.5px; color: var(--hell); flex-wrap: wrap; }
.vorschau-kopf b { color: var(--text); font-size: 14.5px; }
.vorschau-kopf .platz { flex: 1; }
.buehne { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px 12px; position: relative; }
#leinwand { display: block; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); touch-action: none; cursor: default; }
#leinwand.ziehbar { cursor: move; }
.vorschau-hinweis { font-size: 12.5px; color: var(--hell); text-align: center; padding: 0 12px 10px; }
.rund { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid var(--rand); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--text); }
.rund:disabled { opacity: .4; cursor: default; }
@media (max-width: 900px) {
  .arbeit { grid-template-columns: 1fr; padding: 0 0 16px; gap: 0; }
  .vorschau { order: -1; top: var(--kopf); height: 46vh; min-height: 260px; border-radius: 0; z-index: 30; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  .vorschau.klein { height: 64px; min-height: 0; }
  .vorschau.klein .buehne, .vorschau.klein .vorschau-hinweis { display: none; }
  .steuer { padding: 12px 12px 60px; }
}

/* Karten & Formular */
.titelzeile h1 { font-size: 23px; line-height: 1.2; }
.unter { color: var(--hell); font-size: 14.5px; margin-top: 4px; }
.karte { background: #fff; border-radius: 18px; box-shadow: 0 1px 3px rgba(20,30,50,.06), 0 6px 20px rgba(20,30,50,.05); padding: 18px; margin-top: 14px; }
.karte h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.karte h2 .nr { width: 26px; height: 26px; border-radius: 50%; background: #fdecea; color: var(--rot); font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.erkl { color: var(--hell); font-size: 13.5px; margin: 4px 0 10px; }
.feld { margin-top: 10px; }
.feld label, .lbl { display: block; font-size: 12.5px; color: var(--hell); font-weight: 600; margin-bottom: 4px; }
.feld input[type=text], .feld input[type=email], .feld input[type=date], .feld textarea, .feld select {
  width: 100%; border: 1.5px solid var(--rand); border-radius: 12px; padding: 10px 12px; font-size: 16px; background: #fff; outline: none; }
.feld textarea { min-height: 64px; resize: vertical; line-height: 1.35; }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--blau); }
.feld.fehlt input { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(177,50,46,.12); }
.feld small { display: block; color: var(--hell); font-size: 12.5px; margin-top: 4px; }
.warnzeile { font-size: 12.5px; color: var(--rot-dunkel); background: #fdf2f1; border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.vorschlag { font-size: 13px; margin-top: 6px; }
.vorschlag button { color: var(--rot); font-weight: 700; text-decoration: underline; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-weight: 600; font-size: 15px; padding: 10px 14px; border: 1.5px solid var(--rand); background: #fff; color: var(--text); text-decoration: none; transition: background .15s; }
.btn:hover { background: var(--flaeche); }
.btn.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn.haupt:hover { background: var(--rot-dunkel); }
.btn.blau { background: var(--blau); border-color: var(--blau); color: #fff; }
.btn.gefahr { color: var(--rot); border-color: #f3c6c4; }
.btn.klein { font-size: 13px; padding: 7px 10px; border-radius: 10px; }
.btn.gross { width: 100%; padding: 14px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: default; }
.reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.linkknopf { color: var(--rot); font-weight: 600; text-decoration: underline; font-size: 13.5px; }

/* Umschalter (Segmente) */
.segmente { display: flex; background: var(--flaeche); border-radius: 12px; padding: 4px; gap: 4px; margin-top: 10px; }
.segmente button { flex: 1; padding: 9px 6px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--hell); line-height: 1.2; }
.segmente button small { display: block; font-weight: 400; font-size: 11.5px; }
.segmente button.an { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Vorlagen-Auswahl */
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.vorlage { border: 2px solid var(--rand); border-radius: 12px; padding: 6px; background: #fff; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--hell); line-height: 1.25; }
.vorlage canvas { display: block; margin: 0 auto 5px; max-width: 100%; height: 86px; width: auto; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.vorlage.an { border-color: var(--rot); color: var(--text); }

/* Foto-Felder */
.fotoliste { margin-top: 10px; display: grid; gap: 6px; }
.fotozeile { display: flex; align-items: center; gap: 8px; background: var(--flaeche); border-radius: 10px; padding: 6px 8px; font-size: 13.5px; border: 2px solid transparent; }
.fotozeile.an { border-color: var(--blau); background: #eef8fe; }
.fotozeile .farbe { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.fotozeile .masse { color: var(--hell); font-size: 12px; flex: 1; }
.fotozeile select { border: 1.5px solid var(--rand); border-radius: 8px; padding: 4px 6px; background: #fff; font-size: 13.5px; }
.fotozeile button { color: var(--rot); font-size: 16px; padding: 2px 6px; }

/* Elemente */
.neu-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.neu-knoepfe .breit { grid-column: 1 / -1; }
.neu-knoepfe button { border: 2px solid var(--rot); color: var(--rot); background: #fff; border-radius: 12px; padding: 9px 8px; font-weight: 700; font-size: 13.5px; }
.neu-knoepfe button:hover:not(:disabled) { background: #fdf2f1; }
.neu-knoepfe button:disabled { border-color: var(--rand); color: #9aa1ad; cursor: default; }
.elliste { margin-top: 12px; display: grid; gap: 8px; }
.el { border: 1.5px solid var(--rand); border-radius: 14px; background: #fff; overflow: hidden; }
.el.an { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(0,168,244,.12); }
.el-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 14px; user-select: none; }
.el-kopf .griff { color: #9aa1ad; cursor: grab; padding: 0 2px; font-size: 16px; touch-action: none; }
.el-kopf .titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-kopf .ebene { font-size: 11px; font-weight: 700; color: var(--hell); background: var(--flaeche); border-radius: 999px; padding: 2px 8px; }
.el-kopf .weg { color: var(--rot); font-size: 15px; padding: 2px 6px; }
.el-inhalt { padding: 0 12px 12px; border-top: 1px solid var(--rand); display: none; }
.el.an .el-inhalt { display: block; }
.el.zieht { opacity: .5; }
.el.drueber { border-top: 3px solid var(--rot); }
.regler { display: flex; align-items: center; gap: 8px; }
.regler input[type=range] { flex: 1; accent-color: var(--rot); }
.regler output { min-width: 44px; text-align: right; font-size: 12.5px; color: var(--hell); }
.farbwahl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.farbwahl button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--rand); }
.farbwahl button.an { box-shadow: 0 0 0 2.5px var(--blau); }
.farbwahl input[type=color] { width: 34px; height: 30px; border: 1.5px solid var(--rand); border-radius: 8px; background: #fff; padding: 2px; cursor: pointer; }
.schriften { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.schriften button { border: 1.5px solid var(--rand); border-radius: 10px; padding: 6px 4px; background: #fff; line-height: 1.1; text-align: center; }
.schriften button b { display: block; font-size: 19px; font-weight: 400; white-space: nowrap; overflow: hidden; }
.schriften button small { font-size: 10.5px; color: var(--hell); }
.schriften button.an { border-color: var(--blau); background: #eef8fe; }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.icons button { border: 1.5px solid var(--rand); border-radius: 10px; padding: 6px; background: #fff; aspect-ratio: 1; }
.icons button img { width: 100%; height: 100%; object-fit: contain; }
.icons button.an { border-color: var(--blau); background: #eef8fe; }
.schalter-zeile { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; }
.schalter-zeile label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.knopfgruppe { display: inline-flex; border: 1.5px solid var(--rand); border-radius: 10px; overflow: hidden; }
.knopfgruppe button { padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--hell); }
.knopfgruppe button + button { border-left: 1.5px solid var(--rand); }
.knopfgruppe button.an { background: #eef8fe; color: var(--text); }
.schieber { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 30px); gap: 4px; }
.schieber button { border: 1.5px solid var(--rand); border-radius: 8px; background: #fff; font-size: 13px; }
.schieber .o { grid-column: 2; } .schieber .l { grid-column: 1; grid-row: 2; } .schieber .u { grid-column: 2; grid-row: 2; } .schieber .r { grid-column: 3; grid-row: 2; }
.lage { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.hinweis-k { font-size: 12.5px; color: var(--hell); margin-top: 6px; }
.box-info { background: #eef8fe; border-radius: 14px; padding: 11px 13px; font-size: 14px; color: #075985; margin-top: 12px; }
.box-warn { background: #fff7ed; border-radius: 14px; padding: 11px 13px; font-size: 14px; margin-top: 12px; }

/* Prüfliste */
.pruefliste { margin-top: 10px; display: grid; gap: 6px; font-size: 13.5px; }
.pruefliste div { border-radius: 10px; padding: 8px 10px; }
.pruefliste .fehler { background: #fdecea; color: var(--rot-dunkel); }
.pruefliste .warn { background: #fff7ed; }
.pruefliste .info { background: #f1f7fb; color: #075985; }
.pruefliste .gut { background: #eefaf3; color: #166534; }
.pruefliste button { color: inherit; text-decoration: underline; font-weight: 600; }

.fuss { text-align: center; color: var(--hell); font-size: 13px; margin-top: 22px; line-height: 1.8; }
.fuss button { color: var(--hell); text-decoration: underline; font-size: 13px; }

/* Fenster */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(15,18,24,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-karte { background: #fff; border-radius: 20px; width: min(980px, 100%); max-height: 94vh; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.modal-bild { background: #e9ebef; display: flex; align-items: center; justify-content: center; padding: 18px; min-height: 300px; }
.modal-bild img { max-width: 100%; max-height: 80vh; box-shadow: 0 8px 24px rgba(0,0,0,.2); background: #fff; }
.modal-text { padding: 22px; }
.modal-text h3 { font-size: 20px; margin-bottom: 8px; }
.modal-text .einverstanden { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 12px; cursor: pointer; }
.modal-text .einverstanden input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.balken { height: 8px; background: var(--rand); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.balken div { height: 100%; width: 0; background: linear-gradient(90deg, var(--rot), var(--blau)); border-radius: 999px; transition: width .3s; }
@media (max-width: 760px) { .modal { padding: 0; align-items: stretch; } .modal-karte { grid-template-columns: 1fr; border-radius: 0; max-height: 100vh; } .modal-bild img { max-height: 46vh; } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; background: rgba(20,22,28,.92); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; z-index: 200; max-width: calc(100% - 32px); text-align: center; }

/* Danke-Seite */
.seite { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
.danke { text-align: center; }
.danke .gross { font-size: 52px; }
.danke h1 { font-size: 26px; margin: 6px 0 8px; }
.danke img.vorschaubild { max-width: min(320px, 100%); max-height: 60vh; box-shadow: 0 8px 24px rgba(0,0,0,.18); margin: 16px auto 0; display: block; background: #fff; }

/* Ergänzungen */
.kontaktlink svg { width: 16px; height: 16px; flex-shrink: 0; }
details.hg { margin-top: 14px; border: 1.5px solid var(--rand); border-radius: 14px; background: #fff; }
details.hg > summary { list-style: none; cursor: pointer; padding: 11px 12px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
details.hg > summary::-webkit-details-marker { display: none; }
details.hg > summary::after { content: '▾'; margin-left: auto; color: var(--hell); }
details.hg[open] > summary::after { content: '▴'; }
details.hg > summary .wert { color: var(--hell); font-weight: 400; font-size: 13px; }
details.hg[open] { border-color: var(--blau); }
#hgInhalt { padding: 0 12px 12px; border-top: 1px solid var(--rand); }
.modal-karte.einzeln { grid-template-columns: 1fr; width: min(480px, 100%); }
.lbl.abstand { margin-top: 14px; }
.schritt-info { display: flex; gap: 10px; align-items: flex-start; }
.team-hinweis { background: #fef3c7; color: #92400e; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; margin-top: 10px; }
@media (max-width: 900px) { .vorschau-hinweis { display: none; } }

/* Zoom auf den Designbereich (Fotostreifen) */
.buehne { overflow: hidden; }
.vorschau.zoom #leinwand { transform: scale(2.3); transform-origin: 50% 100%; }
#leinwand { transition: transform .25s ease; }
.rund.an { background: #eef8fe; border-color: var(--blau); }

/* Legende unter der Vorschau */
.legende { padding: 0 14px 12px; font-size: 13px; color: var(--text); }
.legende-haupt { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid var(--blau); border-radius: 12px; padding: 9px 12px; line-height: 1.4; }
.legende-haupt b { color: var(--text); }
.kaesten { display: inline-flex; gap: 3px; flex-shrink: 0; margin-top: 1px; }
.kaesten i { font-style: normal; width: 22px; height: 16px; border-radius: 3px; color: #fff; font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.legende-klein { color: var(--hell); font-size: 12px; text-align: center; margin-top: 6px; }
.farbpunkt { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px; border: 1px solid #c7cbd1; }
.nurmobil { display: none; }
@media (max-width: 900px) {
  .nurmobil { display: inline-flex; }
  .legende { padding: 0 10px 8px; font-size: 12px; }
  .legende-haupt { padding: 6px 9px; }
  .legende-klein { display: none; }
  .vorschau { height: 54vh; }
  .vorschau.klein .legende { display: none; }
}
@media (max-width: 640px) { .kopf .wer { display: inline; font-size: 10px; letter-spacing: .03em; line-height: 1.2; min-width: 0; } .kopf .innen { gap: 8px; } }
.legende .kurz { display: none; }
@media (max-width: 900px) { .legende .lang { display: none; } .legende .kurz { display: inline; } }

.legende-haupt { position: relative; padding-right: 34px; }
.legende-zu { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border-radius: 50%; color: var(--hell); font-size: 14px; }
.legende-zu:hover { background: var(--flaeche); color: var(--text); }
.legende.zu .legende-haupt { display: none; }

/* Runde 3 */
.modal-text { position: relative; }
.modal-zu { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--flaeche); font-size: 16px; color: var(--text); z-index: 2; }
.modal-zu:hover { background: var(--rand); }
.modal-text h3 { padding-right: 40px; }
@media (max-width: 760px) { .modal-zu { position: fixed; top: 10px; right: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); } }
.el.blinkt { animation: blinkt 1.5s ease; }
@keyframes blinkt { 0%, 60% { box-shadow: 0 0 0 4px rgba(245,158,11,.6); } 100% { box-shadow: 0 0 0 3px rgba(0,168,244,.12); } }
.vorschau.zoom #leinwand { transition: transform .25s ease, transform-origin .25s ease; }
.vorschau.zoom .buehne { cursor: grab; }
@media (max-width: 900px) {
  .vorschau.klein { height: auto; }
  .vorschau.klein #vorschauInfo, .vorschau.klein #btnZoom, .vorschau.klein #btnZoomHoch, .vorschau.klein #btnZoomRunter { display: none; }
  .vorschau.klein .vorschau-kopf { flex-wrap: nowrap; }
}
@media (max-width: 640px) { #vorschauInfo { display: none; } }